Swartvast adviseert bij innovatieve inwinnings- en verwerkingsprocessen van geo-informatie, analyse van data en informatie en de vertaling daarvan naar welgeformuleerde publicaties

Minder werk aan het bijhouden van de menustructuur

Overzicht van deze pagina

Huidige situatie: navigatiemenu's met de hand coderen

8 februari 2012

Het is erg veel werk om elke keer als ik een pagina toevoeg of de structuur verander, het menu op elke bestaande pagina aan te passen en op te letten wat de code is als de subpagina actief is en als hij wel zichtbaar maar niet actief is. Het is mooi om te ontwerpen en het echte handwerk is leuk om te doen, maar het is nu zoveel werk geworden dat het vervelend wordt. Ik gebruik geen Content Management Systeem en geen generator van webpagina's: conform de uitgangspunten die ik in 2006 formuleerde wil ik zelf de controle over het programmeerwerk houden. Is leerzaam en leuk bovendien. Ik selecteerde toen het nog steeds gebruikte programma PageSpinner om dit te doen. Dit helpt je een beetje bij het bouwen, maar uiteindelijk ben je altijd met de html-code zelf bezig.

Tot nu toe ziet de geheel handgebouwde code er als volgt uit. Het menu 'Projecten' is actief en daardoor klappen de submenu's uit. Daarvan is vervolgens het submenu 'Architectuurverkenning watermanagement' weer actief. In PageSpinner is het door het gebruik van kleuren wat overzichtelijker dan hieronder. Het effect in de browser heb ik rechts door middel van een schermafbeelding opgenomen.

   <tr valign=TOP>
      <td id="navigatiekolom">
         <p class="nav"><a href="index.html">
            Welkom</a></p>
         <p class="nav"><a href="nieuws.html">
            Nieuws</a></p>
         <p class="nav"><a href="diensten.html">
            Waarmee helpt Swart<i>vast</i> u?</a></p>
         <p class="nav"><a href="kwaliteiten.html">
            Kwaliteiten</a></p>
         <p class="nav"><a href="netwerk.html">
            Netwerk</a></p>
         <p class="nav"><a href="rapportage.html">
            Rapportage en redactie</a></p>

         <p class="navactief"><a class="nav" href="projecten.html">
            Projecten
            <img src="plaatjes/pijltjeomlaag.png" class="navpijltje"></a></p>
         <p class="navsub"><a href="distributielaag_watersysteem.html">
            Eisen en ontwerp distributielaag hoofdwatersysteem</a></p>
         <p class="navsubactief">
            Architectuurverkenning watermanagement
            <img src="plaatjes/pijltjerechts.png" class="navpijltje"></p>
         <p class="navsub"><a href="innovatie_slim_meten_rijkswaterstaat.html">
            Innovatiecluster Slim Meten Inwinnen Testen</a></p>
         <p class="navsub"><a href="informatiebehoefte_data_rijkswaterstaat.html">
            Informatiebehoefte data Rijkswaterstaat</a></p>
         <p class="navsub"><a href="college_laser_water_resources.html">
            College laseraltimetrie voor water resources management</a></p>
         <p class="navsub"><a href="seminar_massive_point_clouds.html">
            Studiedag en artikel AHN als 'massive point cloud data'</a></p>
         <p class="navsub"><a href="artikel_land_en_water_laseraltimetrie.html">
            Artikel over laseraltimetrie voor waterkeringbeheer</a></p>

Zo zag dat eruit:

Bestaande menustructuur plaatje

Uitgangspunten centraal navigatiemenu

Ik wil dit nu al een tijdje aanpassen maar wist niet hoe. Ja, niet met een content management systeem. Wat dat betreft blijven de eisen uit 2006 van kracht. Ik probeer een oplossing te vinden voor een navigatiemenu die aan een aantal eisen voldoet:

  • één stuk code dat zelf zorgt voor het veranderen van het uiterlijk als dit actief is of niet (nu heb ik voor beide aparte code, verschillend voor elke pagina);
  • één bestandje met de menucode zodat dit niet op elke pagina weer in de code gekopieerd moet worden, een soort include dus;
  • ik heb en wil geen contentmanagementsysteem dat zelf deze code genereert, dus het moet zelf te schrijven zijn zonder dat je html- en css-professonal bent;
  • ik wil geen gebruik maken van javascript-routines, want daarvoor ontbreekt mij de kennis, tenzij ik ze gewoon kan kopiëren (html en css kende ik ook niet en heb ik me eigen gemaakt voor het maken van mijn eigen website, maar javascript leren kost me te veel extra tijd);
  • en al helemaal niet van flash.

Waar vind ik aanknopingspunten voor wat ik zoek?

Voor het effect dat mij voor ogen staat (de eerste eis) heb ik een aantal pagina's gevonden die ongeveer doen wat ik wil. Waar zoek je dan op? Navigation, menu, tree, folding, hierarchic en hun Nederlandstalige equivalenten, zoiets.

  • Dynamicdrive, 'dhtml scripts for the real world', geeft met Switch Menu iets dat erg lijkt op wat ik wil. Het klapt in en uit met alleen gebruikmaking van javascripts die ik nauwelijks hoef te snappen en niet hoef aan te passen. De vormgeving moet wel aangepast maar dat komt later wel en lijkt haalbaar omdat het met css geschiedt. Dynamic Drive Switch Menu
  • Drop Menu van MygosuMenu, een menuboom.
  • Verschillende uitschuivende menu's en dergelijke op dhtmlgoodies.com.
  • Verticale uitklapmenu's op htmldog.com.
  • Een mooie website over JavaScript van de auteur van een aantal boeken: jsworkshop.com. Er staan voorbeelden, waarvan het uitklapmenu (navigation tree) zeker interessant is.
  • CSS menumaker laat allerlei voorbeelden zien, waarvan je de code kunt downloaden. Sterk in vormgeving, bijvoorbeeld kleur- en schaduwverelopen, met plaatjes om dat te bereiken. Vertical CSS menus is interessant.
  • Er is op purecssmenu.com een soort online editor die de gewenste code in pure CSS maakt en laat zien.
  • Voor wat betreft de verschijningsvorm is de eenvoudige Nederlandstalige css-cursus ook interessant: deze werkt met een lijst waarvan je de verschijningsvorm naar je hand zet. Je ziet dat de regels blokjes worden met een bepaalde kleur, dat deze blokjes onder elkaar of juist naast elkaar geordend worden en ten slotte oplichten in een lichtere kleur als je er met de muis over gaat, heel inzichtelijk: Menu maken met CSS

Realisatie van uitklapmenu en vormgeving in CSS

Met de hierboven als eerste genoemde uit- en inklapnavigatiemenuboom van de site dynamicdrive.com ga ik hieronder verder. Een paar dingen wil ik anders. Het uiterlijk moet lijken op mijn bestaande handmatige menustructuur: dat zal uiteindelijk wel lukken, het moet in ieder geval mogelijk zijn. Het in- en uitklappen van submenu's lijkt me gewenst. Maar er zijn op mijn site ook pagina's die geen subpagina's hebben. Dan moet het klikken op het bovenste niveau dus gelijk een pagina oproepen in plaats van het uitklappen in submenu's, terwijl de vormgeving hetzelfde moet zijn. In het eerste geval doet het script het: het uitklappen van het menu, in het tweede geval moet er een link (element a) opgenomen worden en gebeurt er op de achtergrond dus iets heel anders. Daarin voorziet mijn voorbeeld niet, dus dat zal ik zelf moeten uitknobbelen.

Ik zie zo geen kans drie niveaus te maken, zoals ik bijvoorbeeld bij het AHN als project met zijn deelpagina's heb en bij de Rover-pagina's. Daar moet ik voorlopig maar wat anders op bedenken. Misschien is het maar beter ook geen drie niveaus te gebruiken. Misschien, net als bij de liefhebberijen, een geheel nieuw, lokaal menu, met bovenaan een knop waarmee je terug kunt.

Ik zat een tijdje op het verkeerde spoor door te proberen de verschijningsvorm van het gehele vak te veranderen terwijl ik het link-element a gebruikte omdat ik immers wil dat er een verwijzing naar een pagina onder zit. Maar a is kennelijk geen boxje, het is onderdeel van een regel. Ik gebruikte dus de alinea p of de divisie div. Uiteindelijk kwam ik op het juiste idee: een div voor de uiterlijke kenmerken, omdat deze wordt gebruikt in het switch menu dat ik ga gebruiken maar waarvoor ik te weinig kennis heb om het aan te passen, met daar omheen een link-element a om te zorgen dat het gehele vakje als selectieknop werkt.

Met de uit- en inklapnavigatiemenuboom van de site dynamicdrive.com ga ik hieronder experimenteren. Eerst wat dingen om de stijlelementen te snappen. Eerst met stijlelementen inline, later als class met definitie bovenaan deze html-pagina en nog later overbrengen naar het stijlblad voor werking op de gehele site.

Rens element a met class
Rens a met style inline

Rens p met style inline met a erbinnen

Rens p met style inline met a eromheen

Nu het dynamicdrive-stuk met elke keer weer aanpassingen. De stijldeclaraties staan bovenaan de html-pagina. Het ziet er naar uit de classes en id's niet alleen voor css zijn, maar dat het javascript er ook gebruik van maakt. Het aanpassen van de vormgeving van de submenu's was het lastigst: dat wat ik zojuist voor de div had uitgezocht die het hoofdmenu stileert, werkt niet voor de regels waaruit het submenu bestaat. Dit waren in het origineel gewoon wat links met element a en een br ertussen om ze op aparte regels te krijgen. Indachtig de ervaring om de links om elementen te zetten waarop je vormgeving kan toepassen, heb ik (net als in mijn oude menustructuur) het p-element als bouwsteen gebruikt. Voor deze p-elementen heb ik de class submenuregel gedefinieerd.

Daar omheen staan de links met a. Deze had ik voor de gehele site zo gemaakt dat ze onderstreept worden bij 'muis over' maar dat wil ik hier niet. De hoofdmenu-onderdelen krijgen alleen een donkergroene achtergrond en dat heb ik geregeld in de stijl van de div. Het is niet de bedoeling dat de sitebrede stijl van onderstreping van het a-element daar doorheen fietst. Ik moest dus expliciet bij elk a-element (elke submenuregel) text-decoration op none zetten. Dat heb ik ook weer met een class 'submenuregel' opgelost, specifiek voor element a.

Voor de stijl van de menuregels heb ik voorlopig, omdat het hier midden op de pagina staat, een vaste breedte genomen. Ik zag dat ik mij diende te herinneren dat de padding bij de width komt. Ik gebruikte in het oude hoofdmenu een padding van 4 px boven en onder en 12 aan de zijkant, zie p.nav in mijn stijlblad.css (de klasse nav voor het element p). (Overigens: in het uiteindelijke menu had ik aanvankelijk ook vaste breedtes, maar dat is nodeloos kwetsbaar omdat de breedte in de omvattende navigatiekolom staat.)

Ik gebruik voor het sjiek nu een lijntje van 1 pixel waar de lichtgele ondergrond doorheen schemert: margin-bottom 1px. Maar de ondergrond van de navigatiekolom is hetzelfde als van de menuregels dus daar werkt margin niet: dat is immers een transparant onderdeel. Daarom heb ik een border gemaakt, maar dan alleen aan de onderkant: border-bottom: 1px solid rgb(220,232,20); Omdat de submenu's lichtergroen zijn, kan daar de margin van 1 pixel wel gehandhaafd blijven omdat de navigatiekolomondergrond precies donker genoeg is om als scheidslijn te fungeren. – Naschrift 5 maart 2012: omdat het menu uiteindelijk in de kolom als aparte body geladen wordt, heeft deze de kleur van body uit het stijlblad en dat is geel en dus niet het ontworpen groen voor de navigatiekolom. Tsja. Dus gewoon voor de submenu's ook een border-bottom van de gewenste kleur maken!

De kleur van de menu's zijn die van het zijvak, in den beginne gekozen als background-color: rgb(144,216,0), zie het commentaar in het stijlblad. Deze wordt gedefinieerd in de id 'navigatiekolom'. Voor de submenu's wilde ik een iets lichtere kleur kiezen. Ik neem de bovenstaande kleur in een kleurkiezer in een programma van Mac OS (bijvoorbeeld Graphic Converter), schakel over naar HSB-weergave en kies dan wat donkerder, schakel terug naar RGB en neem de getalletjes over. Zo heb ik wat geëxperimenteerd en schermafbeeldinkjes gemaakt om te kunnen vergelijken en het ontwerp te verfijnen, toen ik eenmaal het principe hieronder werkend had gekregen. Ook heb ik de padding aan de onderkant uiteindelijk altijd 1 pixel minder gemaakt dan aan de bovenkant: dat staat evenwichtiger.

Ik weet nog niet hoe je van een geselecteerd menu kleur zou kunnen veranderen, zoals ik dat tot nu toe had. Dat zou mooi zijn, want je weet dan waar je zit, maar ik ga geen aparte menuboom maken met de kleur voor een geselecteerd menu, zoals ik tot nu toe bloedig met de hand deed: daar wilde ik juist vanaf. Dan maar geen terugkoppeling over welk menu actief is.

Als je met de muis eroverheen beweegt, komt de selectiekleur van het originele menu tevoorschijn, dat is het compromis. Als je hem aanklikt, komt er een mooie donkerrode kleur even tevoorschijn. Ik wist dat het kon en heb er een ietwat stemmige kleur aan gegeven.

Hieronder de menu's in allerlei stadia van het experiment (hierna tijdens het werkelijk bouwen heb ik de scripts en css websitebreed gebruikt dus daarmee is ook het onderstaande anders van gedaante dan toen ik dit schreef). Er zijn er twee die in ieder geval doen wat ik wil en er goed uit zien: een menu-onderdeel dat je rechtstreeks naar een andere pagina voert ('div binnen a') en een die een submenu laat uitklappen in de bij elkaar gekluste vormgeving. In het oorspronkelijke voorbeeld stond ook een plaatje waarop je kunt klikken, maar aan de code daarvan moest ik nog even sleutelen. Het element img was daar genoeg om op te klikken, een a of een div waren niet nodig maar dat ging hier niet goed. Dus een div met een img erin en om de ruimte goed te krijgen een beetje foezelen met de padding. (Want de proef of de padding is in de leaping …)

Een stuk code in alle pagina's opnemen: include

Het zou heel veel werk schelen als de menustructuur in één bestand zou staan en ik dat op elke pagina zou kunnen includeren. Dat zou dan de pagina-onafhankelijke menustructuur moeten zijn. Ik vond de volgende informatie het instructiefst:

De drie opties die ik nader heb geprobeerd en die ik niet of pas na enig foezelen aan de praat kreeg:

  • De interessantste optie leek een server side include, waarbij je de server het werk laat doen van het serveren van een apart bestand in de pagina die de gebruiker opvraagt. Je neemt dan in je bestand bijvoorbeeld op: 
    <!--#include virtual="iframe_exp.html" -->
    (aha, het element pre werkt dus ook! en je vervangt de hoekige haken door de code voor kleiner en groter dan, anders gaat de server ermee aan de haal). Maar ik kreeg dat op de server van mijn provider Mijndomein niet aan de praat.
  • Een adviseur daar raadde me aan de PHP include te bestuderen en verwees naar het artikeltje op htmlwijzer: PHP include toevoegen. In eerste instantie kreeg ik daarmee niet gedaan wat mij voor ogen stond, later wel: zie verderop. Jemig, je blijft prutsen, je kunt hier uren in steken!
  • Er is ook de mogelijkheid een JavaScript een bestand te laten lezen en als het ware als tekst die toevallig html is te laten wegschrijven naar de server. Zo'n bestand includeer je dan met bijvoorbeeld
    <script type="text/javascript" src="iframe_exp.html.js">  </script>
    Maar dat is weinig elegant want dat Javascriptbestand moet dan op elke html-regel hebben 
    document.write('<p>What ever you want to write<\/p>');
    en dat is elegant noch overzichtelijk.
  • Toen kwam ik iframe tegen, waar ik door een vriend jaren geleden al eens op gewezen was. Dit leek het simpelst en leek in eerste instantie te werken. Maar …

iframe: dat werkt … toch niet

Een iframe is een 'venster' waarin een complete html-pagina (met kop en alle elementen van een complete pagina) wordt weergegeven in een andere pagina. Om een voorbeeld te geven: ik heb een simpel paginaatje gemaakt dat ik hier twee keer weergeef.

Maar dat kan door middel van wat attributen ook zonder schuifbalk/scrollbar en zonder rand. Je kunt de grootte in pixels geven of in procenten van de omsluitende pagina of in mijn geval tabelcel. Hieronder is de hoogte 100 pixels en de breedte 50%. Maak het browservenster maar eens breder of smaller: het iframe verandert mee.

De code voor het bovenstaande is 

<iframe src="iframe_exp.html" scrolling="no" width="50%" height="100px" frameborder=0>

Maar helaas … als ik een iframe met het navigatiemenu opneem in de smalle navigatiekolom links (een tabelcel), dan worden alle links die je daarin opent ook weergegeven in deze navigatiekolom … en dat was niet de bedoeling. Dat kan met scripts vast anders maar daar ben ik nog niet in thuis. Met bovengenoemde pagina's maar eens even verder studeren.

PHP include: werkt?!

Ik kreeg PHP eerst niet aan de praat, nu wel. PHP vertelt de server dat hij aan het werk moet. Daaraan zie je al dat het niet werkt als je op je lokale computer uitgerust met browser je webpagina's aan het bouwen bent. Tenzij je dat met een lokale webserver doet, maar dat doe ik niet. Het bestand dat de PHP-opdracht bevat, moet de extensie .php hebben, ook al is het verder een gewone .html-pagina.

Je kunt volgens bovengenoemde hulpbronnen het volgende gebruiken: 

<?php include("iframe_exp.html"); ?>
Je kunt de letters 'php' ook weglaten. In plaats van include werkt readfile ook.

Dit betekent dat ik alle pagina's die ik tot nu gemaakt heb de extensie .php moet geven. En dat alle links in alle pagina's ook moeten worden aangepast op de nieuwe extensie .php. Maar ik moest daarvan toch ook al het gehele menu vervangen. Het betekent dus ook dat ik met een gewone browser als Safari die pagina's niet meer lokaal kan bekijken.

Overigens moet ik niet alleen de code voor de menubomen in een apart bestand plaatsen en dat inlezen, maar ook het Javascript dat het navigeren en in- en uitklappen uitvoert. Tot nu toe stond dat in de header van deze pagina, waar ook alle stijlelementen stonden om immers mee te experimenteren. Het javascript moet in de header van elke pagina. Dat gaat als volgt:

<script type="text/javascript" src="centraal_navigatiemenu.js"></script>

Verschillende menubomen

29 februari 2012

Tijdens de realisatie van het centrale navigatiemenu (zie onder) moest ik toch dieper graven in de Javascript-code. Omdat je maar twee niveaus hebt, niet onterecht, moet ik nog wat bedenken als ik dieper wil. Dat heb ik voor de liefhebberijen al eerder gedaan: je krijgt dan een geheel ander menu te zien met bovenaan 'terug naar Swartvast'. Zoiets ga ik nu vaker toepassen. Ik ben gaan onderzoeken of het werkt daartoe html-bestanden met verschillende menubomen te maken.

Het lijkt wel mogelijk om meerdere menubomen te maken. Eerst iets over hoe het werkt. Ik kan en wil daar niet te diep induiken, dus de oplossing is absoluut niet elegant, maar dat zij dan maar zo. Ik dacht dat de routine SwitchMenu ('sub1') die per menuregel wordt aangeroepen met onclick= iets doet met dat argument sub1. Maar dat komt in die routine niet voor. De routine lijkt alle spans met class="submenu" af te lopen en deze dan style.display = "none" of style.display = "block" te doen, afhankelijk van of hij de juiste heeft getroffen. Het blijkt niet belangrijk waar deze spans staan: ze staan in het voorbeeld direct onder de div die de menuregel definieert, maar dat is niet nodig. Wat wel nodig is, is dat de div en de span dezelfde id hebben. Voor de werking van het in- en uitklappen tijdens het klikken op de menuregels is dat voldoende. Ze hoeven dus geen sub te heten en ze hoeven niet opeenvolgend te zijn.

Zodra je echter op een link in de menuboom klikt, in het algemeen een submenu dat is uitgeklapt, gebeurt er meer. Het gaat om de routine savemenustate en mogelijk nog zaken die ik niet begrijp. Als het goed is, opent dan ook een andere pagina en dus wordt het navigatiemenu opnieuw geladen. Dan is het nodig dat het id 'sub' heet met daaraan een volgnummer dat bij 1 begint en opeenvolgend is. Een tweede menuboom maken werkt misschien, maar de id's mogen niet overlappen. Anders opent hij menu 2 van een andere boom als je naar die boom gaat, terwijl je de eerdere boom hebt verlaten via menu 2 daarvan. Maar daar komen we toch enigszins in de knoop omdat ze opeenvolgend moeten zijn als je wilt dat je als je een subpagina kiest de boom nog steeds de submenu's laat zien waaruit je net gekozen hebt. Nu is het wel zo te maken dat alle bomen ieder bij id 1 beginnen, maar als je van de ene boom naar de andere navigeert, komt er in de laatste het submenu tevoorschijn met de id van het submenu van het eerste van waaruit je afkomstig was. Ik wilde eerste de menuregels van het hoofdmenu van 1 tot zeg 5 laten lopen, die voor de tweede boom van 11 tot 13 en die van de derde van 21 tot zeg 25, maar dan openen ze niet als je een subpagina klikt. Dus voorlopig elke boom bij 1 beginnen (zoals dynamicdrive's commentaar ook aangeeft …).

Met enig experimenteren en zonder dat ik goed begrijp hoe de Javascriptroutines nu precies werken, blijkt het volgende te werken. Het is niet heel erg onelegant, laten we het daar maar op houden. Ik noem de id's niet sub1, sub2 enzovoort, maar sub1_1, sub1_2 voor de eerste boom en sub2_1 en sub2_2 voor de tweede menuboom. Als je je aan het bovenstaande houdt (maakt niet uit hoe het id luidt en of het opvolgt) dan werkt de hoofdroutine in ieder geval. Naar deze 'sub' kijkt alleen de functie savemenustate. Ik maak nu twee Javascriptbestanden (onelegant) die alleen verschillen in deze functie savemenustate. menu_hoofd.js bevat "sub1_" in plaats van "sub". In de bestanden met de tweede menuboom laad ik menu_liefhebberijen.js (erom denken dat dit moet voorafgegaan worden door ../ !). De functie savemenustate daarvan bevat "sub2_" in plaats van "sub". Dit werkt.

Gaat-ie-dan: het centrale navigatiemenu

17 februari 2012

Het bovenstaande ga ik nu gebruiken om het navigatiemenu links hiernaast mee te maken. De structuur van mijn webpagina's bestaat uit een tabel van twee bij twee cellen, met een kop die over de bovenste twee samengetrokken cellen loopt, een navigatiekolom als cel linksonder en een inhoudscel rechtsonder. De td-cel van de navigatiekolom heeft een id 'navigatiekolom' die in het stijlblad is gedefinieerd. Daarin staan de vaste breedte, de achtergrondkleur en een padding die aan de zijkant nul is en aan de boven- en onderkant 24px. Dit laat ik zo. Daarbinnen komt het nieuw gemaakte centrale navigatiemenu menu_hoofd.html, gebaseerd op de code van de experimenten hierboven. Dit wordt met een php-include ingesloten oftewel geïncludeerd.

Het regeltje in de navigatiekolom op 80% lettergrootte met wanneer er voor het laatst aan de betreffende webpagina is gewerkt, laat ik weg. Dat stond immers wel in de navigatiekolom, maar is paginaspecificiek. De nieuwe-stijl navigatiekolom is dat nu juist niet. Door op het regeltje te klikken kreeg je de pagina met de versiegeschiedenis te zien. Deze moet je nu maar gewoon opzoeken door in de hoofdmenustructuur 'Over de webpagina's' te kiezen. Ik moet toch al vaker op een pagina zetten wanneer hij gemaakt is, dat wil je vaak toch wel weten (hoeveel verouderd of heet van de naald?). Ik zal in gevallen wanneer het geen goeie reclame is dat een pagina al lang niet aangepast is de datum wellicht klein onderaan de pagina zetten in plaats van direct onder de titel.

De routine is niet bedoeld om menu's zonder submenu's te hebben. Ik heb zoals ik boven al schreef inmiddels iets gevonden voor het functioneren als direct menu: door wel de div te gebruiken maar er de bekende a omheen te zetten waardoor je daadwerkelijk direct naar de pagina gaat die de menuregel aanduidt. Er is echter een probleem en dat is dat de submenu's van het zojuist gebruikte menu dan niet dichtklappen. Dat is te ondervangen door ook hier de functie onclick uit te voeren in het javascript. Dat voegen we dus toe op dezelfde manier als bij een menuregel die wél submenu's heeft. Maar dit werkt niet goed als je niet ook submenu's opneemt, want hij zoekt naar de span daarvoor. Dan foppen we hem opnieuw: we nemen alles op, de span en de id, maar geen enkel daadwerkelijk submenu. Het werkt als we op alle menuregels hiervoor id 99 misbruiken. Ja sorry jongens, maar dit kost minder tijd dan me Javascript zodanig eigen te maken dat ik de routines kan aanpassen.

Het is erg moeilijk om alles te veranderen: enorm veel werk, de eerste keer, de grote ombouw. Maar je kunt het ook niet lokaal testen omdat alles extensie php moet krijgen (alles links in alle webpagina's veranderen!!). Dus op de server zetten. Maar daarmee is het publiek en zover ben ik nog niet. Alleen het deel dat ik af heb zou dan publiek zijn en de rest zou de bezoeker op foutmeldingen tracteren. Dus op een ander domein zetten en daar proberen tot het af is, ik heb nog wel zo'n domein …

Structuurverandering website

17 februari 2012

Tegelijk met het invoeren van het centrale navigatiemenu en gelijkaardige menu's voor andere hoofdgebieden, heb ik ook de algehele structuur van mijn website veranderd, soms noodgedwongen.

  • Tot nu toe leidt het klikken op een menuregel vaak tot een eerste pagina die als inleiding of overzicht dient. Tegelijk ontvouwen zich de submenu's aan de menuboom, met de hand geprogrammeerd zoals ik boven liet zien. Elk van die submenu's geeft ook toegang tot een pagina. Het is niet onmogelijk maar wel lastig om dit met de routines die ik van dynamicdrive.com te implementeren. Deze zijn er immers op gemaakt om zodra je op een menuregel klikt de submenuboom te ontvouwen. Daarbij wordt geen webpagina op het hoofdniveau weergegeven. Pagina's worden uitsluitend weergegeven als je op de submenu's klikt. In de hiërarchie is er dus behalve het regeltje in de navigatieboom geen 'moeder', alleen 'kinderen'. Ik ga hier niet alsnog iets op bedenken. Soms, zoals bij de pagina over projecten, was het nogal gekunsteld een pagina op het moeder-niveau te maken. Ik heb dus al deze pagina's moeten vervangen door een subpagina of moeten weglaten.
  • De stoet projecten wordt te lang. Ik heb ergens een scheiding tussen projecten en oudere projecten gemaakt. In 2007 heette het nog 'Actuele projecten'.
  • Ik heb een hoofdmenu 'Kennis' toegevoegd. In de eerste plaats was dit omdat ik anders de pagina's op het kleindochterniveau over het AHN niet kwijt kan. Deze routines voorzien maar in twee niveaus terwijl ik er soms drie heb. Ik beperk met bij Projecten tot daadwerkelijk door Swartvast uitgevoerde projecten. Daarin staat weliswaar meestal een zeer informatief en uitgebreid verhaal met achtergrondkennis (vaak overgenomen uit de inleiding of het projectplan van een project, logisch), maar dit wordt steevast gevolgd door 'De taak van Swartvast'. Zaken die dienen om de achtergrondkennis van Swartvast te delen (zoals over laseraltimetrie, zowel bij de Werkgroep Grootschalige Laseraltimetrie als het Actueel Hoogtebestand Nederland) worden nu onder het menu 'Kennis' ondergebracht. Bij mijn eerste webstekontwerp in 2006 heette dit 'Vakgebieden en onderwerpen'.
  • Om bezoekers te wijzen op gerelateerde pagina's is het dus noodzakelijker bovenaan bepaalde pagina's verwijzingen naar gerelateerde pagina's op te nemen, zoals nu al bij de laseraltimetriepagina's geschiedt. Dat kunnen verwijzingen zijn van projectpagina's naar kennispagina's en andersom.
  • Ik streef er naar, mede doordat ik deze vanwege het project rond de toepassingsmogelijkheden van InSAR weer ben tegengekomen, om op een dergelijke kennispagina mijn afstudeerwerk en latere documenten op het gebied van deformatiemeting met InSAR ook op te nemen.
  • Door de centrale navigatiemenu's is er op de Engelstalige pagina's voorlopig geen Engels menu meer te zien, maar Nederlands.

Met vriendelijke groeten,
Rens Swart