Ma Xiu Jia

Hoofdstuk 2. Informatief luik

2.1 Inleidend

In dit hoofdstuk wordt vrij minutieus uiteen gezet welke ontwerpbeslissingen werden genomen bij het ontwikkelen van een website voor de CAM-Brain. Er wordt daarnaast aandacht besteed aan de manier waarop enkele specifieke problemen het hoofd werden geboden. Het gaat in dit hoofdstuk voornamelijk over dat gedeelte van de website dat "statisch" is. Hiermee wordt dat deel van de website bedoelt dat niet direct interageert met de gebruiker, of nog, het deel waar informatie in één richting, vanuit ELIS naar gebruikers, vloeit. Er werd per gebruikte taal een paragraaf voorzien. Het gaat respectievelijk om HTML, CSS2 en PHP.

Alle code die in en om de website werd gebruikt (HTML, CSS2, PHP, JAVA en MySQL) werd zonder uitzondering manueel ingevoerd. Daarbij werd gebruikt gemaakt van BBEdit 6.1.2, een robuuste code-editor voor Macintosh die verschillende programmeertalen aankan en enkele aardige kenmerken, typisch voor dit soort programma"s, in zich draagt. Zo is er syntax highlighting (het automatisch kleuren van bepaalde sleutelwoorden), het balanceren van haakjes, accolades en aanhalingstekens, een uitgebreide zoekfunctie die het gebruik van reguliere expressies ondersteunt, en kan er op regelnummer worden gezocht. Er werd bij het schrijven van de code dan ook voornamelijk gewerkt onder MacOS X (10.1.4 Server), hoewel af en toe ook Windows NT en Red Hat Linux werden aangesproken.

2.2 HTML

Een basisbetrachting bij het schrijven van de HTML voor de website was het zo hygiënisch mogelijk houden van de code. HTML is een zogenaamde markup taal. Dat wil zeggen dat aan de tekst bijkomende commando"s kunnen worden toegevoegd, waarin aanwijzingen vervat zitten over de stijl of de logische structuur van (een bepaald deel van) het document. De plaatsing van deze commando"s varieert naargelang de markup taal. In HTML is de situatie zo dat documenten doorspekt worden van markup commando"s. Men spreekt bij HTML ook van tags. Deze tags worden steeds omsloten door de driepuntige haken "<" en ">", en komen meestal voor in paren. Het gaat dan om begin- en eindtags, waarbij de eindtags van de begintags onderscheiden worden door de karaktersequentie "</".

Deze informatie helpt bij het verstaan wat bedoeld wordt met "hygiënische HTML". Concreet gaat het over het vermijden van ouderwetse ("deprecated") tags, het gebruiken van eindtags en het vermijden van tags die aanwijzingen geven over stijl. Daartoe werd de recentste HTML standaard van het W3C, HTML 4.01, naar de letter gevolgd.[1] Er werd meerbepaald gestreefd naar conformantie met de DTD"s van HTML 4.01 Transtional en HTML 4.01 Frameset. De HTML-parser op de website van het W3C heeft de HTML code van de CAM-Brain website dan ook met succes gevalideerd. Hierbij speelt enigszins, dat spreekt voor zich, het motto "een betere wereld begint bij jezelf". Indien immers elke web-auteur mooie, conformerende HTML zou voortbrengen, zouden vele duizenden (miljoenen?) browsers over de hele wereld een stuk minder vaak bevriezen. Daarenboven heeft een conformerende HTML-auteur het recht de eerste steen te werpen indien een bepaalde browser diens website vreselijk verminkt (is de auteur in dat geval immers niet "zonder zonde"?).

De HTML-code van elke bladzijde begint met een gelijkaardig "briefhoofd":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
    <TITLE>CAM-Brain Machine Home</TITLE>
    <META name="author" content="Marceau Dewilde">
    <META name="generator" content="written with BBEdit 6.1.2 on MacOS X">
    <META name="keywords" content="CBM,evolvable hardware, [...]">
    <META name="description" content="Information on the CAM-Brain machine [...]">
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK rel="style sheet" href="default.html" type="text/css">
</HEAD>

Figuur 2: HTML Headers

Eerst wordt expliciet kenbaar gemaakt aan welke document-definitie de HTML code schatplichtig is (in dit geval HTML 4.01 Frameset). Deze verklaring wordt door bepaalde browsers en SGML-parsers gebruikt als leidraad bij het behandelen van de rest van het document (er wordt als het ware een context gespecifieerd en gecreëerd waarbinnen het HTML document "correct" poogt te zijn).

Na deze eerste tag volgen de klassieke <HTML> en <HEAD> tags, die respectievelijk het begin markeren van het HTML document en van de hoofding met meta-data (data die niet weergegeven wordt aan de gebruiker). Binnen de header zijn twee manieren gebruikt om meta-data aan een HTML-document toe te voegen. Het zijn de enige manieren die beschikbaar zijn in HTML. Enerzijds kan men metadata direct invoegen met vrij ondubbelzinnige <META> tags. Anderzijds is het mogelijk om van in het HTML document te linken naar externe metadata.

De eerste mogelijkheid, het directe invoegen van metadata via <META> tags, kan op twee manieren geïmplementeerd worden. Aan de ene kant kan men het vaste patroon <META name="[...]" content="[...]"> volgen. In dit soort tags wordt na het sleutelwoord name een bepaald attribuut ingevuld. De waarde van het attribuut is dan te vinden na content. In bovenstaand stukje code is er bijvoorbeeld de regel <META name="author" content="Marceau Dewilde">. Dit soort <META> tags kan naar believen uitgebreid worden om bepaalde, door de gebruiker gedefinieerde, attributen te bevatten. Aan de andere kant is er de kleinere familie <META> tags, minder ruim in getal en in gebruik, die opgetrokken worden volgens het patroon <META http-equiv="[...]" content="[...]">. Deze tags worden aan de HTML-code toegevoegd om HTTP-servers en clients extra informatie te leveren. Bij het antwoorden op een HTTP-aanvraag wordt dit soort tags omgezet in een authentieke HTTP-header en als dusdanig meegezonden. In het geval van de website voor de CBM (CBM: CAM-Brain Machine) gaat het enkel om een declaratie van de gebruikte karakterset. Deze werd, in overeenstemming met de overkoepelende website www.elis.rug.ac.be, gekozen als LATIN ISO-8859-1.

Een volledig andere manier om meta-data aan een HTML document toe te voegen bestaat erin binnen de hoofding te verwijzen naar een extern document dat bijkomende informatie bevat. Dit verwijzen kan via een <LINK> tag. In de HTML code voor de CBM-website gebruikte ik de <LINK> tag slechts om naar een extern style sheet te verwijzen. De tag kan echter evengoed gebruikt worden om zoekrobotten diets te maken dat het onderhavig document het begin of de inhoudstafel van een reeks documenten is, of dat het een bladzijde met hulp betreft. Men kan de tag eveneens gebruiken om een zoekrobot of een browser automatisch om te leiden naar hetzelfde document in een taal die de gebruiker beter ligt.

Bij het ontwerpen en publiceren van een website speelt op dwingende wijze ook de vraag naar hoe men zeker kan zijn dat het bedoeld publiek de pagina daadwerkelijk te zien krijgt. Het is onder andere in dat verband dat metadata interessant is, en dan vooral de tags <META name="Keywords" content="[...]"> en <META name="Description" content="[...]">. Door een oordeelkundige keuze van sleutelwoorden kan men de buitenwereld a priori signaleren wat wel en niet op de site verwacht kan worden. Een beknopte omschrijving van wat de site aanbiedt kan dan weer helpen om twijfelende gebruikers over de streep te trekken.

Enkele veelgebruikte zoekrobotten kijken bij het indexeren van websites onder andere naar de opgegeven sleutelwoorden. Eveneens wordt door enkele zoekrobotten de waarde van het "Description" attribuut, indien aanwezig, gebruikt om de site aan de gebruiker voor te stellen. Jammer genoeg worden her en der op het internet randbemerkingen gemaakt zoals: "There has been so much abuse of the keyword meta tag in particular during the past couple of years that meta tagging is not as helpful to web authors as it used to be in the late 1990s."[2] Men doelt dan vooral op het gebruik van "valse" sleutelwoorden, zoals namen van goed in het web liggende beroemdheden en producten, waar de site verder hoegenaamd geen uitstaans mee heeft.

Ongeveer elke website die bestaat uit meer dan één pagina heeft een algemene "omslagbladzijde", die in een overgrote meerderheid van de gevallen "index.html" gedoopt is. Het is deze bladzijde die, indien aanwezig, automatisch door de server doorgestuurd wordt indien een gebruiker een URL oproept die verwijst naar een server of een directory op die server, zonder evenwel een specifiek resource of bestand op de server te vermelden. In die zin conformeert de CBM-website volledig met de normale gang van zaken. Bij het oproepen van "http://www.rug.ac.be/~mjdwilde" krijgt de bezoeker automatisch de hoofdbladzijde, "index.html" toegestuurd. Deze bladzijde is een frameset document, dat voldoet aan de Document Type Definition van HTML 4.01 Frameset.

De bladzijde is opgevat als een tweeluik met een overheersende rechterhelft waarbinnen informatie in verschillende vormen aangeboden wordt. In een beperkter linkerframe zijn enkele mogelijkheden tot navigatie voorzien:

Figuur 3: index.html

Door de verschillende hyperlinks in het linkerframe aan te klikken beïnvloedt de bezoeker de inhoud van het rechterframe. De achterliggende methode om zulks te implementeren bestaat erin bij de declaratie van het rechterframe een name="[...]" attribuut toe te voegen (in dit geval met de waarde "TargFrame") en vervolgens aan de definitie-tags van de hyperlinks in het linkerframe attribuut en waarde target="TargFrame" toe te voegen.

Twee links uit het linkerframe worden niet geopend in het rechterframe. Enerzijds is het logo van de RUG een hyperlink naar "www.rug.ac.be". Anderzijds zorgt een goedgemikte klik op het woord ELIS voor het oproepen van "www.elis.rug.ac.be", de thuispagina van de overkoepelende vakgroep voor de onderzoeksgroep PARIS (de onderzoeksgroep PARallelle Informatie Systemen, die de CAM-Brain huisvest). Beide pagina"s worden, via sleutelattribuut en -waarde target="_blank" binnen de tag van de hyperlink, geopend in een nieuw venster.

Er werd overigens ook gezorgd voor een <NOFRAMES> sectie in "index.html". Een dergelijke sectie wordt automatisch geladen door browsers die geen frames ondersteunen, of browsers die door hun gebruiker zijn opgedragen geen frames weer te geven. Het toevoegen van een <NOFRAMES> sectie in een frameset document is overigens een vereiste indien men wil voldoen aan de HTML 4.01 Frameset standaard.

De breedte van het linkerframe is onveranderlijk vastgesteld op 200 pixels. Die keuze is onder andere ingegeven door het feit dat kan aangenomen worden dat wereldwijd niet meer dan een handvol lieden het Internet opsurfen met een beeldscherm waarvan de resolutie onder de (al bijzonder krappe) waarden 640 x 480 pixels duikt. 200 pixels vullen dan ongeveer één derde van het scherm, wat voor de aard van het linkerframe (een navigatieluik) nog net aanvaardbaar is. Bij schermen van een volwassener formaat (1024 x 768 pixels en groter) zijn 200 pixels dan weer niet zo klein dat er strak turend gezocht moet worden naar een al te klein navigatieluikje.

Een ander element dat speelde bij de keuze voor 200 pixels is het logo van de Universiteit Gent ("uglogo.gif", gedownload van de thuispagina van de universiteit, "www.rug.ac.be"), 189 pixels breed is en als dusdanig mooi oogt. Ook de tekstvakjes onder het logo zijn van een geschikte breedte (hoewel men reserves moet maken en toegeven dat schoonheid ligt in het oog van de kijker).

De keuze voor een onveranderlijk frame (geïmplementeerd door in de HTML-tag voor het desbetreffende frame het attribuut noresize te plaatsen) is ingegeven door de mening dat een aanpassing van de dimensies van het frame de visuele ervaring van de pagina, evenals het gebruiksgemak ervan en, niet te vergeten, de bedoeling van de auteur, ernstig zou schaden. Gebruikers kunnen er overigens met zowat alle browsers voor kiezen om de inhoud van een bepaald frame in een nieuw venster te openen, zodat in gevallen met een dwingende reden toch een volledig scherm gevuld kan worden met de inhoud van een welbepaald frame.

Concreet levert dit alles de volgende code:

<FRAMESET cols="200, *">
   <FRAME name="NavWindow" src="NavWindow.html" frameborder="0" [...]>
   <FRAME name="TargWindow" src="Introduction.html" frameborder="0">
   <NOFRAMES>
      <H1>Welcome to the home page of [...] the CAM-Brain machine!</H1>
      <P>Apparently, your browser does not support frames. [...] </P>
      <UL>
         [...]
         <LI><A href="NavWindow.html">Table of Contents</A>
         <LI><A href="CBM.html">Information</A>
         <LI><A href="Modules.html">Modules</A>
         <LI><A href="DIY.html">Submit task</A>
         [...]
      </UL>
    </NOFRAMES>
</FRAMESET>

Figuur 5: gebruik van FRAMESET bij index.html

In de HTML code van de website werd consequent vermeden aanwijzingen met betrekking tot de stijl toe te voegen. Dat heeft alles te maken met de richtlijnen die het W3C op dat gebied verspreidt. Het World Wide Web Consortium, uiteindelijk de ultieme autoriteit op het gebied, berispt in haar voor de wijde wereld beschikbare HTML standaard elke auteur die eraan denkt een aan stijl gerelateerde tag in de HTML code binnen te smokkelen. Zo staat prominent bij de bespreking van de tagfamilie <FONT>, te lezen: "The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets."[1]

Het groeperen van informatie omtrent stijl in een interne of externe style sheet is niet onlogisch. Het zorgt ervoor dat het onderscheid tussen inhoud en logische structuur enerzijds, en fysische vormgeving anderzijds, duidelijk blijven, en dat heeft louter positieve gevolgen. Ik denk dan bijvoorbeeld aan de eenvoud waarmee de huisstijl van een website volledig veranderd kan worden. Door één style sheet te vervangen of aan te passen kan men de vormgeving van een hele reeks documenten laten afhangen van een resem uiteenlopende factoren. Zo kan men de grillen van de auteur, de eisen van de weergave (computerscherm, uitgeprint, gedrukt, ...), of de wensen van de gebruiker in rekening brengen. Bij het ontwerpen van de website voor CAM-Brain werkte ik met CSS2, waaraan de volgende paragraaf gewijd is.

2.3 CSS2

Websites zijn een visitekaartje. Websites geven je de kans om op een revolutionaire en tegelijk verfrissende manier je ideeën mee te delen aan iemand die duizenden kilometers van je af woont. Het is tegelijk ook een manier om je van je allerbelabberdste kant te tonen. In HTML zijn, zoals al eerder vermeld, de mogelijkheden om stijl toe te voegen zowel beperkt als laakbaar. De vraag naar een alternatief stelt zich dus, en het is in het kader van webontwerp bijna onmogelijk om die vraag te beantwoorden zonder Cascading Style Sheets te vermelden.

De term Cascading verwijst naar het mechanisme van verdieping of herhaling: de meest algemene elementen, en alle elementen die er onderdeel van zijn, worden eerst opgemaakt volgens de regels die in de style sheet worden beschreven. Daarna worden de elementen opgemaakt die specifieker zijn, waarbij eventuele stijlkenmerken die al bepaald werden door een eerdere cascade, overschreven worden. Dit gaat zo door tot de meest specifieke elementen behandeld zijn. Een typische situatie is die waarin eerst de stijl van het BODY element wordt toegepast, daarna de stijl van alle "kinderen" van het BODY element, zoals H1 (Header 1) en P (Paragraph) elementen, en daarna nog specifieker elementen, zoals het EM element (EMphasis of nadruk). De huidige Cascading Style Sheets standaard is CSS2, die beschreven wordt in een W3C recommendation van 12 mei 1998.[3]

Een style sheet kan zowel intern in een HTML-document zijn opgenomen, of extern aan dat document worden gekoppeld. Bij het ontwerpen van de website voor de CAM-Brain werd voor de tweede mogelijkheid gekozen. De belangrijkste overweging in dat verband is de verstommende elegantie en eenvoud van code die met een extern style sheet gepaard gaat. Hoe groot het aantal HTML documenten, dat samen de website uitmaakt, ook wordt, één extern style sheet dat alle stijlaspecten van de site beschrijft, en één kort lijntje code in elk document (een eerder besproken <LINK> tag) zijn voldoende om op eenvormige wijze een consistente stijl doorheen de volledige site te propageren. Men kan op die manier met recht spreken van een huisstijl. Documenten die maanden na het afwerken van de site worden toegevoegd kunnen eenvoudig, door het vermelde lijntje code in de HTML header toe te voegen, aangepast worden aan de stijl van de site.

Bij het ontwerpen van de huisstijl van de website voor de CAM-Brain rees, na enkele niet echt valabele ontwerpjes, de idee de stijl enigszins in overeenstemming te brengen met de stijl van de thuispagina van de RUG ("www.rug.ac.be/index.html"). Het gaat dan vooral over het kleurenschema: kanarie-achtig geel op diepblauw (de RGB waarden zijn hexadecimaal respectievelijk #FFF721 en #000063).

Een tweede pijler waarop de stijl van de website werd opgetrokken is het expliciete gebruik van het box model dat aan de basis ligt van Cascading Style Sheets. De idee is dat rond elk element van een HTML document (en men bedoelt daarmee de hiërarchisch geordende groep elementen dat door tags wordt aangeduid, zoals <BODY>, <H1>, <P>, ...) een rechthoek (box) te tekenen. In verband met dit soort rechthoeken zijn vier termen van groot belang:

1) de content box is de rechthoek die de inhoud van het element omsluit

2) de padding is de afstand tussen de buitenkant van de content box en de border

3) de border, of kantlijn, is de buitenrand van het gedefinieerde element

4) de margin is de afstand tussen de border van het element en de buitengrens van de omgevende of aangrenzende box

Figuur 5: Het CSS2 Box model

De syntax van CSS2 is bijzonder eenvoudig onder de knie te krijgen. Elke stijldeclaratie in CSS2 bestaat uit 2 delen: een selector en een descriptor. De selector verwijst naar een HTML element, zoals BODY, H1 of P. De descriptor beschrijft welke stijl het geselecteerde element moet krijgen. Dit gebeurt aan de hand van een reeks "property : value" paren. De verschillende properties of eigenschappen die kunnen voorkomen in een dergelijk paar, alsmede de waarden die er aan kunnen gekoppeld worden, zijn te vinden in de standaardbeschrijving. Voor de CBM website werd vooral gebruik gemaakt van de descriptors die de waarden van bovenvermelde sleutelbegrippen (margin, border, padding, content) beïnvloeden, evenals de descriptors die kleuren vastleggen. maakt de syntax van CSS2 iets duidelijker. De voorbeeldwaarden die onderaan zijn opgegeven zouden ervoor zorgen dat tekst binnen <P> tags rood worden weergegeven.

Figuur 6: CSS2 Syntax

Het opmaken van de stijl van het linkerframe van "index.html" dat doorheen de hele site blijft getoond worden, kwam inderdaad neer op het fijntjes afstellen van de waarden voor de vier ondertussen genoegzaam bekende sleutelbegrippen, en op het voorzien in een subtiel spel met kleuren. Zo ziet een deel van de stijlverklaring van de BODY van het linkerframe er als volgt uit:

BODY.leftFrameSet {
[...]
margin: 0px;
border-right: 5px;
border-right-color: black;
border-right-style: solid;
padding: 0px;
[...]
}

Figuur 7: Fragment uit style sheet

De bepaling margin: 0px; zorgt ervoor dat het element BODY uitloopt tot de rand van het browservenster (dit is van belang aangezien gewerkt wordt met een achtergrondkleur die we gaarne tot de rand hadden zien uitvloeien). De drie bepalingen omtrent border-right zorgen voor de zwarte boord aan de rechterkant van het frame (een boord die als taak heeft de afbakening tussen de twee frames te onderstrepen). Tenslotte zorgt de bepaling padding: 0px; ervoor dat de inhoud van de box BODY tot tegen de rand van het browservenster, respectievelijk tot tegen de zwarte boord, kan doorlopen.

De stilistische eigenschappen van de kleinere rechthoeken die de hyperlinks omgeven (nog steeds in het linkerframe van "index.html"), zijn iets complexer. Voor de weergave van hyperlinks beschikt CSS2 over de pseudoklassen :link en :visited en tevens over de dynamische pseudoklassen :active, :hover en :focus. Deze pseudoklassen maken het stileren en op bescheiden wijze animeren van hyperlinks verfrissend eenvoudig. De oerselector is A:link. Deze selector brengt als het ware de eerste "stijlcascade" aan op álle hyperlinks van het document dat de style sheet opriep. Men kan daarna de stijl voor hyperlinks verder fijn regelen door expliciet ook een bepaling voor A:visited op te nemen (dat, zoals logischerwijs te verwachten valt, een stijl bepaalt voor bezochte hyperlinks), en eventueel één van de dynamische klassen toe te voegen. A:hover bepaalt de stijl van het element wanneer de muispijl erover zweeft, A:active definieert de stijl van het element dat ingedrukt wordt en A:focus bepaalt de stijl van het element dat de focus heeft (het gaat hierbij bijvoorbeeld om een selectie die niet door de muis werd geïnitieerd, zoals bijvoorbeeld met de tabulator knop).

Bij het ontwerpen van de website heb ik zoveel mogelijk getracht onnodige uitbundigheid links te laten liggen. Het is waarschijnlijk een valkuil van de fonkelende gereedschapskist die CSS2 uiteindelijk is, om te veel stijlelementen te gebruiken op een te kleine oppervlakte. Elke zoektocht doorheen het web is een frappant pleidooi voor gematigdheid. Een mensenleven is te kort om het aantal websites te tellen waar emmers vol stijlfoefjes op een dergelijk slordige manier zijn samengegooid dat toevallige bezoekers veeleer misselijk dan geïnformeerd het surfen moeten staken. Daarom is het bij de website van de CAM-Brain niet zo dat de basisstijl voor hyperlinks blauw op wit is, de stijl voor bezochte links paars op groen, en de stijl voor A:hover bijvoorbeeld oranje op lichtrood met een korps dat spontaan 5 punten groter wordt en een lettertype dat omslaat naar handwriting. Bescheiden soberheid daarentegen is een conditio sine qua non voor deze, en bij uitbreiding voor elke site, die voor alles een academisch publiek beoogt en graag serieus genomen zou worden. Daarom net is gekozen voor een bescheiden kleurenschema met geringe veranderingen bij het veranderen van de waarde van de link.

In het rechterframe kregen de hyperlinks een iets minder aperte stilering mee dan hun collega"s uit het linkerframe. Het lettergewicht is lichter, er is geen grote "bufferzone" voorzien rond de hyperlink en de stevige zwarte boord ontbreekt volledig. De hyperlinks moeten het daarentegen stellen met een licht geel kadertje rondom, dat onder invloed van de muispijl een donkerblauw tekstblok met gele letters wordt. Deze keuze is vooral geïnspireerd door de bedenking dat HTML documenten die later aan de website toegevoegd en naar hetzelfde style sheet gelinkt kunnen worden, veelal doorlopende teksten en artikelen zullen zijn, waarin dikke zwarte kaders ronduit storend zouden zijn. Mijn hoogstpersoonlijke mening is dat de huidige situatie erg bevredigend is: het lichte gele kadertje is niet storend maar maakt toch duidelijk dat er een hyperlink achter schuilt.

De wijze waarop in één style sheet twee volledig uiteenlopende stijlbepalingen opgenomen kunnen worden voor eenzelfde element (zoals de verschillende stijlbepalingen voor hyperlinks in het rechterframe en in het linkerframe) is door in de HTML code, in de definiërende tag van een hyperlink, het attribuut class="[...]" op te nemen. Het is op die manier mogelijk om een welhaast eindeloze reeks verschillende hyperlink-stijlen te definiëren. De begintags van hyperlinks in het linkerframe zijn gelijkaardig aan:

<A class="navWindow" target="TargWindow" href="CBM.html">

waarbij vooral gelet moet worden op de bepaling class="navWindow". Een hyperlink uit het rechterframe zal typisch gedefinieerd worden met:

<A href="http://www.cs.usu.edu/~degaris/" target="_blank">

waarin geen class-bepaling voorkomt. Hyperlinks in het rechterframe nemen dus gewoon de default of standaard stijl die in de style sheet staat gedefinieerd. Alweer is de achterliggende reden hiervoor de toekomst: om nieuw toe te voegen documenten zo eenvoudig mogelijk aan de meest geschikte stijl voor lopende teksten (de stijl uit het rechterframe) aan te passen, werd deze stijl, en niet de stijl uit het linkerframe, als default gekozen.

Het is jammer genoeg zo dat er nog steeds veel browsers in omloop zijn die CSS2 niet correct ondersteunen (zoals 4.x versies van Netscape Navigator). Ronduit storend is het feit dat er nog steeds browsers worden ontwikkeld die waarlijk gruwelijk haperen waar het CSS2 aangaat (ik denk hierbij bijvoorbeeld aan eerder marginale browser zoals de nieuwste versies van Opera — hoewel deze browser een aanvaardbare best effort aflevert — en iCab). De style sheet van de website werd met succes gevalideerd op de website van W3C, zodat men mag aannemen dat een onstabiele weergave door een bepaalde browser daadwerkelijk te wijten is aan de browser.

Ik ben echter opgevoed met parabels over barmhartige Samaritanen, en ik heb daarom een vangnet voorzien voor browsers waarvan het óf zeker óf ongeweten is of ze al dan niet met CSS2 kunnen omgaan. Niet alleen immers draaien bepaalde browsers de stijl in de soep, maar ze zorgen er vaak ook voor dat bepaalde functies van de website niet uitvoerbaar zijn. De oplossing die ik daar tegenover plaatste bestond erin de style sheet te verpakken in een PHP bestand dat zorgt voor browserdetectie (PHP detecteert dit op basis van de HTTP headers die door de browser worden gestuurd — meer details daarover bij de bespreking van "Introduction.html") Op basis van de browser die gedetecteerd wordt een aangepaste versie van de style sheet doorgestuurd. De browsers die expliciet ondersteund worden, en dus de volledige style sheet krijgen toegestuurd, zijn Internet Explorer 5.x en hoger, Netscape 6.x en hoger, Konqueror 2.2 en hoger.

2.4 PHP

2.4.1 Inleiding

PHP (een recursief acroniem voor Hypertext PreProcessor) is een vrij ruim inzetbare scripting taal, die echter in een overgrote meerderheid van de gevallen gebruikt wordt als module van een Apache server. Dat houdt in dat PHP scripts enkel aan serverzijde worden uitgevoerd. Men spreekt daarom ook over server-side scripting, en dit in tegenstelling tot de client-side scripting van een scripting taal als JavaScript. PHP, als server-side scripting taal wordt het vaakst aangewend om dynamisch HTML te genereren, om met gebruikers te interageren en om bepaalde taken in de achtergrond uit te voeren (zoals het bijhouden van een logbestand, het raadplegen en aanvullen van een databank, het versturen van e-mails, of zoals in "Introduction.html", de browser te detecteren — de bijzonder uitvoerige handleiding ([5]) geeft overigens aanwijzingen om PHP ook te gebruiken voor strikt lokale scripting, en beweert zelfs dat echte adepten met PHP in staat zouden moeten kunnen zijn om windowing applications te bouwen.

PHP heeft een aantal kenmerken gemeen met de "grote" programmeertalen (cfr. C++ en Java). Het gaat dan vooral om de vertrouwde controlestructuren (if ... else, foreach, while, switch) en de mogelijkheid om het programma-verloop in functions op te delen die al dan niet een bepaalde waarde kunnen teruggeven. PHP blijft natuurlijk een scripting taal, wat onder andere inhoud dat er van object-oriëntatie geen sprake is.

PHP is een product van de Open Source gemeenschap, en wordt verspreid onder een General Public License. Het is ten dele daaraan te wijten dat PHP een bijzonder grote functiebibliotheek kan voorleggen. Zo valt bijvoorbeeld op dat PHP, in tegenstelling tot de proprietary server-side scripting taal ASP (van Microsoft), ingebouwde functies heeft om bijzonder eenvoudig e-mails te versturen en om zonder extra drivers te communiceren met een bijzonder groot aantal databanken. Het Open Source / General Public License karakter van PHP zorgt er tevens voor dat er bijzonder veel informatie te vinden op het Internet in allerlei fora en online tutorials. Aangezien de grote functionaliteit van PHP, evenmin als het gebruik ervan in het kader van de CBM-website, zich niet laat samenvatten in een handvol regels, volgt hierna een soms korte, dan weer iets langere bespreking van de verschillende PHP scripts die in de website voorkomen.

2.4.2 "Introduction.html"

Deze bladzijde verenigt in zich een handvol uiteenlopende functies. Ten eerste doet deze pagina dienst als browser-detector. Zoals al ter sprake kwam in de paragraaf omtrent CSS2 zijn er nog te veel browsers in omloop die goedbedoelde en valide style sheet jammerlijk verhaspelen. De style sheet voor de website van de CAM-Brain zit daarom verpakt in een PHP bestand dat afhankelijk van de gedetecteerde browser een aangepaste versie van de style sheet doorstuurt. Dit gebeurt echter volledig in de achtergrond. Ik bedoel daarmee dat een bezoeker die bijvoorbeeld surft met Netscape Navigator 4.x nooit zal weten dat hij een gortdroge versie van de website te zien kreeg. Daarom doet "Introduction.html" dezelfde browserdetectie als "default.html", en genereert een waarschuwing indien een niet ondersteunde browser wordt ontdekt.

Het detecteren van de browser gebeurt door het op zoek te gaan naar de browser-signatuur in de HTTP headers die door de verzoekende browser worden verzonden. In PHP zijn ontvangen HTTP-headers eenvoudig toegankelijk volgens het schema $HTTP_naam_van_de_header. De PHP variabele die informatie bevat over de browser van de gebruiker (de "user agent") heet dan ook gepast $HTTP_USER_AGENT. De lijn code

<?php echo $HTTP_USER_AGENT; ?>

genereert bijvoorbeeld, indien het script dat de code bevat opgeroepen wordt door de recentste versie van Internet Explorer voor MacOS X, de volgende output:

Mozilla/4.0 (compatible; MSIE 5.14; Mac_PowerPC)

"Introduction.html" voert op de variabele verscheidene malen de stringfunctie stristr uit. Deze functie zoekt in een string "hooiberg" naar een string "naald" en levert, indien de string voorkomt, dat stuk van "hooiberg" dat begint bij het eerste voorkomen van "naald". Indien "naald" niet in "hooiberg" voorkomt levert de functie de boolean waarde vals. Er werd, na enig proefondervindelijk onderzoek, aangenomen dat slechts Internet Explorer 5.x en hoger, Netscape Navigator 6.x en Konqueror geen vreselijk figuur slaan als het op CSS2 aankomt. De functie stristr wordt daarom toegepast op de variabele $HTTP_USER_AGENT en op de signatuur van elke browser (hetgeen dus een string aflevert indien de onderzochte signatuur die van een ondersteunde browser is, of de logische waarde vals in het andere geval). Er wordt voor elk van die stristr-functies gecontroleerd of hun teruggeefwaarde identiek is aan de logische waarde vals (of ze dus én een logische waarde én vals zijn). Als dit niét zo is wil dat zeggen dat de signatuur van de browser voldoet en de HTTP request afkomstig is van een valabele browser. De verschillende ontkenningen van de stristr-functie worden via OR aan elkaar gekoppeld en als voorwaarde toegevoegd in een lege if. Daaraan wordt ook een else gekoppeld, die slechts opgeroepen wordt indien een niet ondersteunde browser een aanvraag doet. In de else claus wordt de PHP ge-escaped om een korte boodschap in HTML weer te geven. De volledige code ziet eruit als volgt:

<?php
if (!(( !(stristr($HTTP_USER_AGENT, 'MSIE 5')===false)
    OR !(stristr($HTTP_USER_AGENT, 'MSIE 6')===false)
    OR !(stristr($HTTP_USER_AGENT, 'Netscape6')===false)
    OR !(stristr($HTTP_USER_AGENT, 'Konqueror')===false)

        ////////////////////////////////////////////////////////////////
        // onderstaande AND dient om Opera te onderscheppen (Opera
        // kopieert op schalkse wijze de signatuur van Iexplorer).
        ////////////////////////////////////////////////////////////////

    ) AND (stristr($HTTP_USER_AGENT, 'Opera')===false)))
{

        ////////////////////////////////////////////////////////////////
        // hieronder wordt uit PHP ge-escaped om
        // de HTML code eenvoudig te houden. Er wordt in de HTML code
        // bewust een deprecated Font tag toegevoegd om CSS2 onkundige
        // toch een duidelijke waarschuwing te bezorgen.
        ////////////////////////////////////////////////////////////////

?>
<p><font color="red" size="5">
Warning: You are using an unsupported browser-configuration.
As a result, you will not be able to download the style sheet properly [...]
We are sorry for the inconvenience.<font></p>
<hr>
<?php } ?>

Figuur 8: Browserdetectie met PHP

Een tweede functionaliteit die in de code van "Introduction.html" verscholen zit is het bijhouden van een bescheiden logbestandje. Het desbetreffende stuk script wordt, vanzelfsprekend, uitgevoerd elke keer de pagina "Introduction.html" wordt opgeroepen. Dit aantal is ongeveer gelijk aan het aantal keer dat de site wordt opgeroepen aangezien het rechterframe van "index.html" initieel "Introduction.html" zal laden, en er nadien geen mogelijkheid is om terug te keren naar die bladzijde). Het verloop ziet er ongeveer als volgt uit:

1) Het bestand "./logDir/logText.html" wordt gezocht en geopend (er wordt een zogenaamde filepointer variabele gecreëerd die naar het bestand verwijst). Indien het bestand niet bestaat wordt het aangemaakt.

  1. Het aantal regels in het bestand wordt geteld en in een variabele gestopt die zal dienen als regelnummer voor de toe te voegen regel. Dit regelnummer heeft als doel de webmaster in één oogopslag te laten zien hoeveel gebruikers er tot nog toe de pagina hebben gezocht.

  2. Indien een nieuw bestand is aangemaakt tijdens het openen van "./logDir/logText.html" wordt er een gestandaardiseerde hoofding in geplaatst.

4) Een string variabele wordt aangemaakt met daarin enkele verschillende, enigszins arbitrair gekozen waarden. Deze waarden zijn het IP-adres en de IP-naam van de verzoekende gebruiker en de datum en het tijdstip waarop het verzoek ontvangen werd.

5) De aangemaakte string variabele wordt weggeschreven naar het bestand, waarna het bestand gesloten wordt.

Het beschreven verloop is vrij rechtlijnig, en als dusdanig bijzonder geschikt om door een script te worden uitgevoerd. Het brengt evenwel twee problemen met zich mee. Ten eerste is het zo dat er een conflict ontstaat omwille van strikte permissies: PHP als module van een Apache server wordt, omwille van een strikte regeling van de permissies in het domein ELIS, normalerwijs niet toegelaten om in de directory "./logDir" (een subdirectory van mijn eigen gebruikers-directory) een nieuw bestand aan te maken of, indien het bestand al bestaat, er naar toe te schrijven. De oplossing bestaat erin de eigenaar van de directory "./logDir" te veranderen in Apache, de "gebruiker" die de PHP scripts uitvoert.

2.4.3 "CBM.html"

De code van de bladzijde "CBM.html" biedt een bijzonder eenvoudige functionaliteit. De bedoeling van het script (dat te bereiken is via de hyperlink "Information" in het linkerframe) is het aanbieden van de informatie die zich in de vorm van HTML documenten in de subdirectory "./CBM" bevindt. Ook wordt een hyperlink weergegeven die de gebruiker leidt naar het script "Thumbnails.html", alwaar enige foto"s worden aangeboden.

"CBM.html" kijkt in de subdirectory "./CBM" en genereert als output hyperlinks naar álle bestanden die zich in de map bevinden. De Unix-eigen entries "." en ".." worden daarbij evenwel genegeerd. Het is dus zo dat, om artikelen en teksten aan de website van de CAM-Brain toe te voegen, het volstaat het artikel of de tekst (of de foto of het geluidsfragment of om het even wat) binnen de directory van de site in de subdirectory "./CBM" toe te voegen. Het ware evenwel, dat moet toegegeven worden, nog iets beter indien er een stuk code aan het script werd toegevoegd dat toestond op een al even dynamische wijze ook informatie te verschaffen omtrent de aard van het aangeboden artikel. Daarvoor is bijvoorbeeld een stuk code zoals hetgeen gebruikt wordt bij "ModPresentation.html" geen slecht idee (in dat script wordt gezocht naar tekstbestandjes met identieke bestandsnamen als de klikbare bestanden, waarna die informatieve tekstbestandjes op het scherm worden getoond).

2.4.4 "Thumbnail.html"

Dit PHP script, dat opgeroepen kan worden via "CBM.html", heeft als bedoeling op dynamische wijze een typische thumbnail gallery op te maken. Dit script steunt op twee pijlers. In de hoofddirectory van de site bevinden zich de subdirectories "./Thumbnails" en "./Photos". Het is de bedoeling dat de directories evenveel bestanden bevatten die identiek benoemd zijn. Natuurlijk is het zo dat, om de pagina snel toegankelijk te houden, de bestanden in de directory "./Thumbnails" veel kleiner zijn (ze zijn gemiddeld zo"n 4 tot 8 KByte groot, en houden downloadtijden op die manier klein) dan de bestanden in "./Photos".

Het script "Thumbnail.html" kijkt in de subdirectory "./Thumbnails" en tekent op basis van de inhoud daarvan een tabel met vier kolommen. De manier om dynamisch een tabel met maximum vier kolommen (het zullen er, indien "./Thumbnails" bijvoorbeeld slechts drie geldige bestanden bevat, drie zijn) te genereren is als volgt. Een teller wordt geïnitialiseerd op 0, de begintag voor de tabel, <TABLE>, wordt uitgeschreven en een while lus wordt opgestart die per geldig bestand in "./Thumbnails" een iteratie doorloopt. In de lus wordt gekeken op welke waarde de teller staat. Indien dat kleiner is dan vier wordt eenvoudig een nieuwe cel toegevoegd in de tabel via de <TD> tag. Is dat niet kleiner dan vier, dan wordt de huidige rij van de tabel afgesloten (met de eindtag </TR>) en wordt een nieuwe rij aangemaakt (met <TR>), en wordt daarin meteen een eerste cel opgemaakt. Na het beëindigen van de lus worden de huidige rij én de tabel afgesloten. De inhoud van de cellen is steeds de thumbnail afbeelding uit de directory "./Thumbnails". Tegelijk wordt aan de afbeeldingen automatisch een hyperlink gekoppeld die verwijst naar de afbeelding in volle grote (die dus dezelfde bestandsnaam draagt, maar zich in de directory "./Photos" bevindt). toont hoe de bladzijde eruitziet in de respectievelijke gevallen dat "./Thumbnails" drie of zeven afbeeldingen bevat:

Figuur 9: Thumbail.html

2.4.5 "Download.html" en "Publications.html"

"Download.html" biedt in grote trekken dezelfde functionaliteit als "CBM.html", in die zin dat ook hier een aantal klikbare bestandsnamen worden getoond op basis van de inhoud van een bepaalde subdirectory. Op deze bladzijde wordt echter een groter gamma aan bestanden ter download aangeboden. Het updaten van de website is met dit soort functionaliteit vrij eenvoudig: om de buitenwereld de kans te geven iets te downloaden hoeft men het item slechts aan de subdirectory "./Downloads" toe te voegen. "Publications.html" is hier, met uitzondering van enkele eigennamen, identiek aan "Downloads.html". De bedoeling van de bladzijde is, de titel maakt zulks snel duidelijk, het aanbieden van publicaties. Deze publicaties worden op dynamische wijze gezocht in de subdirectory "./Publications".

De code die voor een groot stuk wordt hergebruikt in zowel "CBM.html", "Download.html" en "Publications.html" (en in uitgebreider versie ook in "Thumbnail.html") is vrij eenvoudig. Een directory-handle variabele wordt aangemaakt. Deze hendel kan dan gebruikt worden om snel de inhoud van een directory af te lopen. Voor elk bestand in de directory wordt een regel tekst uitgeschreven, samen met een automatisch gegenereerde hyperlink. In het script "Download.html" levert dat bijvoorbeeld:

<?php
$handle=opendir('./Downloads/');
while (false!==($download=readdir($handle)))
   {
   if (strLen($download)>2)
     {
     ?>
     <a href="./Downloads/<?=$download?>"><?=$download?></a><br>
     <?php
     }
   }
?>

Figuur 10: 'Download.html'

2.4.6 "Modules.html"

De functionaliteit van "Modules.html" is een variatie op en een uitbreiding van hetgeen in de bladzijden "CBM.html" en "Downloads.html" wordt aangeboden. "Modules.html" heeft als bedoeling bezoekers van de CBM-website driedimensionale animaties van bepaalde, door de CAM-Brain getrainde modules te laten zien en te laten manipuleren. In dat verband is in de directory van de website een subdirectory "./Modules" aanwezig, waar zonder onderscheid genotype/fenotype- (".gnt"), tekst- (".txt"), VRML- (Virtual Reality Markup Language of ".wrl") en NeuroMaze-bestanden (".nmz", het bestandsformaat van het programma NeuroMaze, waarmee neurale netwerkjes grafisch gesimuleerd kunnen worden) in kunnen geplaatst worden. Er wordt van elke module die aan de gebruikers voorgesteld moet kunnen worden verwacht dat minimum een VRML bestand aanwezig is. Deze bestanden zijn, mits het gebruik van een specifiek daarvoor beschikbare plugin, als driedimensionale animaties aan de gebruiker voor te stellen. De tekst- en genotype/fenotype-bestanden kunnen, indien ze aanwezig zijn en indien ze, met uitzondering van de extensie, dezelfde naam hebben als de VRML bestanden, aan de gebruiker aangeboden worden. Daarbij is het zo dat de tekstbestandjes een korte beschrijving van de module bevatten. Genotype/fenotype (".gnt") bestanden zijn bestanden die de configuratie beschrijven van een neuraal netwerk dat ófwel ter ontwikkeling aan de CAM-Brain aangeboden wordt (genotype), ófwel het resultaat is van de ontwikkeling uitgevoerd door de CAM-Brain (of een software programma). Hierover volgt iets meer uitleg in hoofdstuk 3.

Het script "Modules.html" opent de subdirectory "./Modules" en kijkt vervolgens naar de namen van de bestanden erin. Ik vermeldde al dat we de gebruiker slechts die modules wensen aan te bieden waarvan een driedimensionale presentatie beschikbaar is. Daarom worden op deze bladzijde de namen van VRML bestanden ontdaan van hun extensie (".wrl") en als hyperlink aangeboden aan de gebruiker. Deze hyperlinks worden dynamisch aangemaakt volgens het patroon

<A HREF = "./ModPresentation.html?id=module_naam">

Er wordt dus een pagina opgeroepen die via de URL extra informatie meekrijgt, wat doet denken aan de werking van de methode GET uit de behandeling van een HTML FORM. In "ModPresentation.html" kan de doorgegeven variabele dan met PHP eenvoudig uit de URL gehaald worden, maar daarover meer in de volgende paragraaf.

In "Modules.html" is ook (voorlopig slechts) één link voorzien naar een website waar VRML plugins beschikbaar zijn, die noodzakelijk zijn om de ".wrl" bestanden op correcte wijze te bekijken.

Figuur 11 tenslotte toont de uitvoer van het script "Modules.html" voor een hypothetische toestand van de directory "./Modules":

Fictieve inhoud van de subdirectory "./Modules":
timed_frequency.gnt
12-parity.gnt
And_neuron.gnt
memory_5bit.wrl
timed_frequency.wrl
And_neuron.wrl
memory_5bit.txt
memory_5bit.gnt
OR_neuron.wrl
Volledig_fictief_wrl_bestand.wrl
OR_neuron.html
Volledig_fictief_NMZ_bestand.nmz
And_neuron.txt
timed_frequency.txt
timed_frequency.nmz

Figuur 11: Modules.html

2.4.7 "ModPresentation.html"

Het script "ModPresentation.html" heeft als taak de gebruiker alle beschikbare informatie omtrent een bepaalde module te presenteren op een aangename wijze. Het gaat hierbij om de al eerder vermelde driedimensionale presentaties, informatieve tekstbestandjes, genotype/fenotype-bestanden en eventuele NeuroMaze-bestandjes. Aangezien PHP voornamelijk gebruikt wordt in interactieve webtoepassingen, en aangezien de verwerking van HTML formulieren misschien wel één van de meest primaire aspecten van interactiviteit in webtoepassingen is, zijn de mogelijkheden om met behulp van PHP data uit HTML formulieren te verwerken vrij extensief en bijzonder eenvoudig te gebruiken.

Een formulier wordt volledig in HTML aangemaakt. De gebruiker vult het in en drukt daarna op een knop, meestal "submit" genaamd, die in zekere zin als een hyperlink fungeert. Het drukken op de knop heeft namelijk tot gevolg dat een pagina wordt opgeroepen. Verschillend met de hyperlink pur sang is echter de mogelijkheid om aan het opgeroepen document de door de gebruiker ingevoerde waarden door te geven. Hiervoor zijn twee methodes beschikbaar: GET en POST. Indien men werkt met GET worden de waarden doorgegeven via de URL, in het andere geval (wanneer men kiest voor POST) worden de waarden doorgegeven in de achtergrond, verpakt in HTTP headers.

Eén en ander doet al vermoeden dat het opgeroepen document op een bepaalde manier in staat moet zijn om de verkregen waarden te verwerken. Het opgeroepen document moet in feite een uitvoerbaar bestand zijn, en het is daar waar PHP in de bres springt. De formulierdata kan in het PHP script van de doelpagina opgeroepen worden door de naam van een specifiek FORM element (zoals TEXT, SELECT, RADIO, ...) als variabele te gebruiken. Indien een parameter via de URL wordt doorgegeven, zelfs als niet met een formulier wordt gewerkt (en de URL dus in situ wordt gegenereerd), kan PHP de waarde eenvoudig opvangen. Een voorbeeld zal veel verduidelijken. Benodigd is een URL van de vorm:

http://www.elis.rug.ac.be/~mjdwilde/ModPresentation.html?id=And_neuron

waarbij vooral het gedeelte vanaf het vraagteken aandacht verdient. Het PHP script "ModPresentation.html" dat aldus wordt opgeroepen zal beschikken over een variabele $id, in dit geval een string variabele, die op de waarde And_neuron geïnitialiseerd zal zijn. Deze routine is, mijns inziens, een stuk eleganter dan ASP, waar enkele sleutelwoorden nodig zijn om aan een variabele een waarde uit een URL toe te kennen (het zou er uitzien als request.querystring("id")). Op basis nu van de informatie die vanuit "Modules.html" via de URL (er wordt niet expliciet met een FORM gewerkt) wordt doorgegeven, krijgen een drietal verschillende delen van "ModPresentation.html" een andere invulling.

Ten eerste wordt de titel van de module in een automatisch gegenereerde hoofding geschreven. Dit kan eenvoudig met de code <?php echo "<H1>".$id."</H1>"; ?>, waarbij opgemerkt moet worden dat het punt (".") in PHP de concatenatie-operator is voor strings, en echo één van de sleutelwoorden is die gebruikt kunnen worden om een bepaalde uitvoer naar het scherm te schrijven.

Meteen onder de hoofding komt, indien aanwezig, de inhoud van het tekstbestandje uit de directory "./Modules" dat dezelfde naam draagt als de module. Deze tekstbestandjes bevatten, zoals reeds vermeld, een kort informatief paragraafje uitleg omtrent de module waarnaar het bestand genoemd is. Zo bevat de directory "./Modules" momenteel enkele bestanden omtrent de module "And_neuron". Het begeleidende tekstbestandje bevat de korte tekst "2 input AND gate", en het is dit kort tekstje dat bij wijze van informatie aan de gebruiker wordt getoond. Eén en ander wordt geïmplementeerd via de functies file_exists(), fopen() en fread(). Eerst wordt uit de modulenaam die via de URL is doorgegeven het pad naar het vereiste tekstbestand geëxtraheerd. Dit vereist het lijntje code

$fPName=("./Modules/".$id.".txt");

Daarna wordt gecontroleerd of het bestand met pad en naam $fPName daadwerkelijk bestaat (if (file_exists($fPName))). Indien dit zo is wordt het bestand geopend en naar het scherm geschreven. Indien dit niet zo is wordt een vervangberichtje naar het scherm geschreven. Het openen van het bestand kan met de functie fopen(string bestand, string mode). De functie levert een "filepointer" die naderhand gebruikt kan worden om bewerkingen of leesoperaties (afhankelijk van de gekozen mode) op het bestand uit te voeren. Men kan als string mode een keuze maken tussen r (read), w (write) en a (append). Specifiek voor "ModPresentation.html" levert dat het volgende:

$handle = fopen($fPName, 'r');

Het tekstbestand is dan klaar om uitgelezen te worden. Hiervoor kan de functie fread(int filepointer, int length) gebruikt worden. Een voordeel is dat het bestand in een string variabele wordt uitgelezen. Licht nadelig is dan weer dat een bovengrens moét gesteld worden aan het aantal in te lezen bytes. fread stopt het inlezen als het vooropgestelde aantal bytes zijn ingelezen, of als een End Of File wordt bereikt. Men kan het probleem (want in "ModPresentation.html" willen we het tekstbestand altijd tot het einde lezen) oplossen door een waarde te kiezen voor length te kiezen die voldoende groot is. Momenteel is die waarde 100.000.

Het is overigens ook mogelijk om het tekstbestand op een andere manier te incorporeren in de HTML code die uiteindelijk naar de gebruiker gestuurd wordt. Men zou er met name voor kunnen kiezen om het tekstbestand an sich in te bedden in het hoofddocument. Zulks zou bijvoorbeeld kunnen gebeuren met een <EMBED> tag (die in HTML 4.01 echter niet meer tot de standaard behoort) of aan de hand van zogenaamde generische inclusie via het OBJECT-element. De keuze is in feite arbitrair. Eén ding pleit echter voor de methode die ik gebruikte, en wel met name het feit dat zulks een eenvoudiger HTML code levert, die door meer browsers foutloos verwerkt kan worden. Het gaat immers om het doorsturen van gewone doorlopende tekst, in plaats van een bijzondere tag die speciale behandeling behoeft. Het tekstbestandje komt overigens tussen <P>[...]</P> tags, met als klasse "ModDescription", zodat het tekstje een aparte, in de style sheet gedefinieerde, opmaak kan krijgen.

Onder het beschrijvende tekstje wordt het VRML bestand, aan de hand van de benodigde plugin, getoond. Dit had moeten gebeuren met de zonet al even vermelde <OBJECT> tag. Het OBJECT-element is van een bewonderenswaardige algemeenheid. Het zorgt ervoor dat zowat alle bestandsformaten, al dan niet met behulp van een plugin, ook bestandsformaten waarvan ten tijde van het opstellen van de HTML standaard nog geen sprake was, in een HTML document getoond kunnen worden. Men spreekt niet voor niets van generische inclusie. Zo is het IMG-element in feite een ingebouwde specifiëring van het OBJECT-element (<IMG SRC="example.gif"> is gelijk aan <OBJECT DATA="example.jpg" TYPE="image/gif">).

Het volgende snippertje code werd eerst met succes gebruikt (althans in Internet Explorer 5.14 voor MacOS X):

<OBJECT data="./Modules/<?=$id?>.wrl"
        type="model/vrml" height="100%" width="100%"
        standby="Loading module...">
... You will not be able to view the module. ...
</OBJECT>

Figuur 12: Het OBJECT element

Het bleek echter onmogelijk om de code ook aan het werken te krijgen in Internet Explorer 5 op Windows. Meerdere stemmen in Internetfora meldden eenzelfde probleem met normaal vrij meegaande versies van Netscape en Internet Explorer. Aangezien nu Internet Explorer 5.x wel degelijk behoort tot de groep browsers die de site correct zouden moeten kunnen behandelen zat er niets anders op dan terug te grijpen naar de officieuze <EMBED> tag, die om één of andere duistere reden wel succesrijk is op een groot aantal browsers. De code ziet er nu uit als volgt:

<EMBED width="100%" height="100%" src="./Modules/<?=$id?>.wrl">

Onder de ingebedde driedimensionale VRML-presentatie komen nog drie lijnen tekst. Een eerste lijn biedt de gebruiker de mogelijkheid de module in een volledig browservenster te bekijken. Daarvoor zorgt een dynamisch gegenereerde hyperlink naar het PHP script "indivMod.html" met als extra argument de modulenaam, via de toevoeging van ?id=modulenaam. Een tweede lijn tekst bevat een verwijzing naar een genotype/fenotype versie van de module, óf, indien er geen ".gnt" bestand beschikbaar is, verontschuldigt de website voor het niet aanbieden ervan. Een laatste lijn tenslotte biedt aan gebruikers de mogelijkheid een ".nmz" of NeuroMaze bestand te downloaden, indien er een dergelijk bestand in de directory "./Modules" te vinden is.

De verschillende bovenstaande elementen, nu, zijn in een tabel geplaatst. Het belangrijkste aspect van die tafel, en de motivatie voor het gebruiken ervan, heeft van doen met de mogelijkheden die tafels bieden bij de pagina-opmaak. Op vraag van mijn thesisbegeleider werd ervoor gezorgd dat een driedimensionale animatie een prominente plaats kreeg bij de weergave van "ModPresentation.html". De bedoeling was ervoor te zorgen dat de animatie zodanig herschaald wordt dat de tekst eronder nooit uit het browservenster zou verdwijnen. Het viel immers te vermoeden dat veel bezoekers, indien de tekst eronder van het scherm zou vallen, zich de moeite niet zouden getroosten een weinig naar beneden te scrollen. Men kan de inhoud van de tabel steeds gepast in het browservenster laten herschalen door die in de style sheet aan de eigenschap height de waarde 100% mee te geven. Er rees echter een probleem met verschillende browsers. Zij bleken jammer genoeg niet geneigd de relatieve hoogte-bepaling correct te interpreteren en op correcte manier de hoogte van de ingebedde animatie te berekenen, met als resultaat een zo goed als onzichtbare animatie, samengedrukt op één lijn pixels. Er werd uiteindelijk voor gekozen de animatie een vaste (althans ten opzichte van de andere delen van het blad) 50% toe te wijzen, wat er, afhankelijk van de grootte van het browservenster, voor zorgt dat alles nu eens wel, dan weer niet in het venster past. In de meerderheid van de gevallen is het resultaat aanvaardbaar. is een concreet voorbeeld van al het besprokene. Te zien is hetgeen schuilt achter de URL ModPresentation.html?id=And_neuron.

Figuur 13: ModPresentation.html?id=And_neuron

2.4.8 "indivMod.html"

"indivMod.html" is een vrij kort script dat als bedoeling heeft een kader te bieden waarbinnen driedimensionale animaties van individuele modules vertoond kunnen worden. De pagina wordt opgeroepen vanuit "ModPresentation.html", krijgt zijn argument via de oproepende URL en vertoont de module aan de hand van de eerder vermelde <EMBED> tag.

Het is in feite ook mogelijk een eenvoudige hyperlink naar het VRML bestand an sich op te nemen. Dit heeft echter als nadeel dat vele browsers zich zullen verslikken. De meeste browsers tonen in dat geval een dialoogvenster met de vraag hoe ze het bestandstype dienen te behandelen, of ze beginnen het bestand onverhoeds te downloaden. Het script, zoals het er nu uitziet, geeft de browser enige houvast door de inbedding in HTML.

2.4.9 "Process.html", "pwdRetrieve.html", "pwdChange.html", "newUser.html" en "Authorization.html"

"Process.html" is de PHP bladzijde die de ruimste functionaliteit biedt. Aangezien echter het script volledig in het teken staat van de interactie tussen gebruiker en CBM, zal ik de bespreking ervan uitstellen tot onderstaand hoofdstuk. Aangezien de scripts "pwdRetrieve.html", "pwdChange.html", "newUser.html" en "Authorization.html" slechts bestaan bij gratie van "Process.html", wordt ook de bespreking over deze bladzijde uitgesteld tot het volgend hoofdstuk.