WEBAPPLICATIES Toegankelijke gebruikersinterfaces bouwen voor het web

KRIS MERCKX

Webapplicaties

Kris Merckx

Meer informatie over deze en andere uitgaven kunt u verkrijgen bij: Sdu Klantenservice Postbus 20014 2500 EA Den Haag tel.: 070 – 378 98 80 fax: 070 – 378 97 83 e-mail: [email protected] web: www.sdu.nl/klantenservice Omslagontwerp: Bureau MMX, Bergambacht Druk- en bindwerk: drukkerij Bariet, Ruinen Vormgeving binnenwerk en zetwerk: Fritschy opmaak & redactie

ISBN: 978 90 12 58285 8 NUR: 980

© Kris Merkckx / Sdu Uitgevers bv, Den Haag, 2011 Alle rechten voorbehouden. Behalve de door de Auteurswet gestelde uitzonderingen, mag niets uit deze uitgave worden verveelvoudigd (waaronder begrepen het opslaan in een geautomatiseerd gegevensbestand) en/of openbaar gemaakt door middel van druk, fotokopie, microfilm of op welke andere wijze dan ook, zonder voorafgaande schriftelijke toestemming van de uitgever. De bij toepassing van art. 16b en 17 Auteurswet wettelijk verschuldigde vergoedingen wegens kopiëren dienen te worden voldaan aan de Stichting Reprorecht, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) 799 78 10. Voor het overnemen van een gedeelte van deze uitgave in bloemlezingen, readers en andere compilatiewerken op grond van art. 16 Auteurswet 1912 dient men zich te wenden tot de stichting PRO, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) 799 78 09. Voor het overnemen van een gedeelte van deze uitgave ten behoeve van commerciële doeleinden dient men zich te wenden tot de uitgever. Hoewel aan de totstandkoming van deze uitgave de uiterste zorg is besteed, kan voor de afwezigheid van eventuele (druk)fouten en onvolledigheden niet worden ingestaan en aanvaarden auteur(s), redacteur(en) en uitgever deswege geen aansprakelijkheid voor de gevolgen van eventueel voorkomende fouten en onvolledigheden. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system of any nature, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of the publisher. While every effort has been made to ensure the reliability of the information presented in this publication, Sdu Uitgevers neither guarantees the accuracy of the data contained herein nor accepts responsibility for errors or omissions or their consequences.

Inhoud

Voorwoord 9 11

1

De basisingrediënten van een online GUI

1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10 1.11 1.12 1.13 1.14 1.15 1.16 1.17 1.18

Voordelen van een webapplicatie 11 Applicaties en webapplicaties 11 Programma’s bouwen 12 Werking van een webapplicatie 13 HTML als GUI-taal 13 Invoerformulieren in HTML 16 Nieuwe elementen in HTML5 23 DOM 24 Browsers en hun kuren 27 Modernizr 28 Frameworks brengen browsers dichter bij elkaar 30 Elementen selecteren met jQuery 31 Javascript User Interfaces 32 Interactiviteit en UI Management 34 Mobiele interfaces in de lift 35 XUL in elke browser met Ample SDK 36 Een bos van libraries 39 Voorbeelden 41

2

Kantoorapplicaties en bestandsbeheer

2.1 2.2 2.3 2.4 2.5

Tekst manipuleren en tekstverwerking Rekenbladen 54 Presenteren 56 Bestandsbeheer 57 Voorbeelden 65

3

Audio en video

3.1 3.2 3.3 3.4

Flash Video 73 De HTML5 video-tag 75 Online video-editing 79 Webcambeelden met Flash

73

79

47 47

6

inhoud

3.5 3.6

Audio 79 Voorbeelden

4

De browser als tekentafel 85

4.1 4.2 4.3 4.4 4.5 4.6 4.7

Tekenen in XML met Scalable Vector Graphics Schilderen op virtueel canvas 91 Canvas of SVG? 102 CSS3 103 Lettertypes 106 3D in de browser 107 Voorbeelden 110

5

Animaties in de browser

5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10 5.11 5.12

Animeren met jQuery 119 Gevanceerde animaties met jQuery 120 Animatiebibliotheken 120 CSS 3-transitions en -animations 121 SVG-animaties 129 Canvasanimaties 132 Canvasanimatie voor Flash-adepten 135 Processing.js 139 Een GUI voor een animatie-webapp 142 Software voor HTML5-animaties 142 Een huiseigen animatieframework 144 Voorbeelden 148

6

Games en 3D in HTML5

6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9

Een potje fysica 155 Een tile-based speelbord 159 Een speler op het speelveld 161 Toetsenbordbediening 162 Collision detection 163 Pseudo-3D en raycasting 165 HTML5 game libraries 166 GameQuery voor jQuery-adepten 168 Voorbeelden 169

7

Geolokalisatie en kaarten

7.1

De geolocation-API in HTML5

81

119

155

173 173

85

inhoud

7.2 7.3 7.4 7.5 7.6

7

Browser-ondersteuning 174 Libraries voor lokalisatie 174 Google Maps en aanverwanten 177 Kaarten in de browser 179 Voorbeelden 179

Register

185

Voorwoord

HTML ontstond ooit als een opmaaktaal voor het uitwisselen van wetenschappelijke informatie. Later ontwikkelde het zich tot een digitaal presentatiekaartje voor bedrijven en organisaties of een middel om via internet geld te verdienen. Intussen is het web enorm veranderd. Vele miljoenen gebruikers brengen het grootste deel van hun ‘computertijd’ door op het internet. Webmail, sociale netwerksites, zoekmachines, ze zijn vaak beter ingeburgerd dan klassieke desktopprogramma’s. De leercurve is minder hoog en de interfaces zijn gebruiksvriendelijk. Computerprogramma’s verhuizen stilaan naar webservers waarop gebruikers inloggen en hun informatie delen en uitwisselen. Het klassieke HTML en zijn opvolger XHTML voldeden niet meer aan de eisen die een moderne webapplicatie stelt. Ook javascript, dat lange tijd enkel werd gebruikt voor rollovereffecten bij afbeeldingen of eenvoudige formuliervalidaties, voldeed niet meer aan de wensen van webontwikkelaars. Naast het W3C (het world wide web consortium) dat al jaren de ontwikkeling van webgerichte talen als HTML en CSS leidt, ontstond het WHATWG (Web Hypertext Application Technology Working Group). Onder hun impuls verscheen HTML5, eigenlijk een verzamelnaam voor een uitbreiding op de (X)HTML-standaard, CSS en nieuwe API’s voor en versies van javascript. HTML5 moet het ontwikkelen van webapplicaties vereenvoudigen en brengt de webapp veel dichter bij het klassieke computerprogramma. Het succes van mobiele apparaten zoals de iPhone, iPod touch, iPad en Android-gebaseerde toestellen gaf een boost aan HTML5. De hegemonie van de Microsoft-browser Internet Explorer werd doorbroken door een nieuwe generatie snelle en vernieuwende browsers zoals Firefox, (Mobile)Safari en Chrome die de nieuwigheden met open armen omsluiten. De nieuwste versie van Internet Explorer kon op dit vlak niet achter blijven. Het resultaat is een explosief groeiend aantal verbazingwekkende webapplicaties die vaak niet meer te onderscheiden zijn van hun desktop-tegenhangers. HTML5, CSS3 en javascript en de webbrowsers bevinden zich voortaan in een chronisch betastadium, en dat is maar goed ook. Nieuwe ontwikkelingen en voorstellen zetten een constante druk op de browserontwikkelaars en de concurrentie leidt tot de snellere integratie van nieuwe technologieën. Webontwikkelaars kunnen meer dan ooit terugvallen op fantastische open source frameworks zoals jQuery, Ample SDK, RaphaëlJS, Three.js enz. die verschillen tussen browsers en platformen nivelleren en de webapp-ontwikkeling versnellen. In dit boek geven we een overzicht van de belangrijkste en interessantste frameworks en libraries voor het ontwikkelen van webapplicaties. We focussen vooral op de nieuwe

10

voorwoord

technologieën en hoe we die ook backwards-compatible kunnen maken. De codevoorbeelden zijn als basis te gebruiken voor je eigen webapplicaties en websites en naar wens uit te breiden en aan te vullen. De voorbeelden, links, extra informatie en frameworks vind je ook op de website bij dit boek: www.computerkit.be/webapps.

1 De basisingrediënten van een online GUI

Nog niet zo heel lang geleden installeerde een computergebruiker voor elke taak een apart programma. Dit kan uiteraard nog steeds. Door de opkomst van de snelle internetverbindingen en nieuwe technieken zoals AJAX en HTML5 is het doordeweekse computergebruik echter enorm veranderd. Heel wat taken kunnen we nu rechtstreeks in de browser afhandelen via een webapplicatie. Een webapplicatie is een programma dat op een webserver draait en via een webbrowser gebruikt kan worden. Webapplicaties zijn er in allerlei soorten en maten. Via online bankieren kunnen we onze financiële rompslomp van thuis uit regelen. We nemen contact op met vrienden en kennissen via Facebook, een film van een verjaardagsfeest uploaden we naar YouTube. Op de werkvloer staat geen klassieke radio meer, maar luisteren we uiterst persoonlijk naar ons favoriete muziekstation via internetradio of een Last FM-account. In Wikipedia maak je naar wens je eigen encyclopedie en je kunt hem drukklaar downloaden in PDF-formaat. Webmailapplicaties zoals Gmail zijn voorzien van een ingebouwde virusscanner, een ‘file viewer’ enzovoort. Je kunt het niet bedenken of er bestaat wel een of andere (vaak gratis) webapplicatie voor. De opkomst van het mobiele internet en het succes van de iPhone en mobiele apparaten met Google Android, vergroten het succes van webapplicaties.

1.1

Voordelen van een webapplicatie

Een webapplicatie is zeker niet zonder gevaren, maar toch biedt het tal van voordelen in vergelijking met een klassiek computerprogramma. De online encyclopedie Wikipedia ziet als belangrijkste voordelen: 1 Webapplicaties vereisen geen ingewikkelde installatieprocedure bij het uitrollen in een grote organisatie. Alleen een webbrowser is vereist. 2 Webapplicaties hebben geen schijfruimte op de clientcomputer nodig. 3 Voor een update in de webapplicatie hoeven er geen wijzigingen op de werkplek gedaan te worden. 4 Webapplicaties zijn makkelijk te integreren met andere websites of webservices. 5 Webapplicaties zijn in de basis platformonafhankelijk (Windows, Mac, Linux, enz.) doordat ze in een webbrowser draaien.

1.2

Applicaties en webapplicaties

Een webapplicatie doet in wezen niets anders dan een klassiek desktopprogramma. Het kan bestanden maken, openen, bewerken en weer opslaan. Om bestanden te maken of te

hoofdstuk 1

12

bewerken beschikt de gebruiker over een aantal bedieningselementen vaak in de vorm van knoppen of menu’s. Een van de belangrijkste verschilpunten is dat de webapplicatie een lijst moet bijhouden van alle gebruikers en hun respectievelijke bestanden.

1.3

Programma’s bouwen

Niet alleen voor doordeweekse computergebruikers, maar ook voor webdesigners en webontwikkelaars hangt er een zweem van geheimzinnigheid rond ‘programmeren’. Klassieke desktopprogramma bestaan vaak uit duizenden, zo niet honderdduizenden regels code. Voordat die code door een computer kan uitgevoerd worden, moet ze ‘gecompileerd’ worden. Dit wil zeggen dat de code door een stuk software (de compiler) in machinetaal wordt omgezet. De gecompileerde code kan rechtstreeks door de processor worden uitgevoerd. Het zal je ongetwijfeld al zijn opgevallen dat de meeste programma’s die je gebruikt, dezelfde dialoogvensters en gelijkaardige knoppenbalken bevatten. Programmeurs maken namelijk gebruik van de API’s die het besturingssysteem biedt. Een API of Application Programming Interface maakt het mogelijk om op eenvoudige wijze systeemtaken (bestanden openen, opslaan, afdrukken) uit te voeren. De programmeur schrijft bijvoorbeeld een stuk code dat het print-dialoogvenster van Windows opent. Omdat niet alleen de processor, maar ook het besturingssysteem en de corresponderende API’s verschillen, is het hierdoor niet zonder meer mogelijk om een Windowsprogramma op pakweg een Mac OS X- of Linuxmachine te installeren en omgekeerd. Weinig programmeurs werken puur in code. Over het algemeen gebruiken ze een visuele IDE (Integrated Development Environment). Daarin kunnen ze grafisch aan de slag volgens het WYSIWYG-principe. In zo’n omgeving kan de ontwikkelaar bedieningselementen zoals vensters, knoppen, menubalken enz. naar zijn ontwerpvenster slepen en de nodige functionaliteit programmeren. Naast de GUI (Graphical User Interface) moet de ontwikkelaar er ook voor zorgen dat de bedieningselementen ‘samenwerken’ met achterliggende verwerkings- en opslagfuncties. Een programma leest gegevens uit een databank of bestand in en kan nieuwe gegevens opslaan. Voor Windows en Mac OS X bestaan IDE’s die standaard voorzien zijn van toegang tot de API-functies van het besturingssysteem en de standaard GUI-elementen (knoppen, vensters, menu’s). Een programmeur kan ook gebruikmaken van een platformonhankelijke IDE zoals bijvoorbeeld Qt (zie figuur 1), waarin hij code kan schrijven voor meerdere besturingssystemen. De IDE neemt in dat geval de vertaalslag voor de verschillende systemen voor zijn eigen rekening. Daarnaast kan een ontwikkelaar zich ook bedienen van een widget toolkit, een widget library of GUI toolkit. Zo’n toolkit is een stuk software dat de programmeur eveneens voorziet van de mogelijkheid om vensters, menubalken, knoppen en andere GUI-elementen in zijn code op te nemen. Sommige van deze toolkits (bijvoorbeeld GTK) hebben ‘huiseigen’ dialoogvensters voor de gecompileerde programma’s.

de basisingrediënten van een online gui

1.4

13

Werking van een webapplicatie

Een webapplicatie werkt op een webserver. De door de gebruikers aangemaakte bestanden of ingevoerde informatie wordt in een databank op de server opgeslagen. In principe kan een webapplicatie in om het even welke programmeertaal worden geschreven. De programmeurs kunnen een eigen clientprogramma schrijven dat verbinding maakt met de webserver en daarmee gegevens uitwisselt. Steeds meer maakt men echter gebruik van een website/webpagina om verbinding te maken met de applicatie. Het grote voordeel is dat de gebruiker geen apart programma hoeft te installeren. Hij moet in zijn browser enkel nog de juiste URL invoeren. Voor het bouwen van een webapplicatie ben je dus niets met platformgebonden GUIelementen. De bediening gebeurt volledig via een webbrowser. Daarom moet de ontwikkelaar zich bijscholen in de werking van HTML, CSS en javascript. Een webapplicatie slaat zijn gegevens op in een centrale databank of als meerdere losse bestanden op de webserver. De meeste programmeertalen beschikken over functionaliteit om die informatie om te zetten in webpagina’s voor een webbrowser. Omdat de stap van het ontwikkelen van een eenvoudige website naar het programmeren toch wel erg groot is, zijn er allerlei relatief eenvoudig te leren scriptingtalen ontwikkeld waarmee een webontwikkelaar/designer bestanden in een databank kan aanspreken. Zonder twijfel heb je al gehoord van ASP, PHP of JSP. Voor klassieke programmeurs is de drempel verlaagd door in de IDE’s ook de ontwikkeling van webapplicaties mogelijk te maken. Server databank, bestanden <> middleware <> output naar HTML+ bedieningslementen (HTML, CSS, javascript)

1.5

HTML als GUI-taal

De computergebruiker bedient een webapplicatie via een browservenster. Dit betekent dat de ontwikkelaar zich moet bedienen van de talen die een webbrowser begrijpt. Elk programma-onderdeel dient omgezet te worden in HTML, CSS en javascript. In vergelijking met klassieke programmeertalen en API’s zijn de mogelijkheden van HTML voor het bouwen van een GUI erg beperkt. HTML, CSS en javascript vormen de heilige drievuldigheid van webdesign: 1 (X)HTML: een taal die de tekstinhoud van webpagina’s kan structureren en documenten aan elkaar kan linken. 2 CSS: de taal die beschrijft hoe elk onderdeel van een webpagina er moet uitzien. 3 javascript (of een javascript-bibliotheek zoals Dojo of jQuery): hiermee kun je interactiviteit, effecten, animaties enz. aan je webpagina’s toevoegen. Daarnaast zal je al snel in aanraking komen met verwante ‘talen’ zoals XML, JSON, SVG, XUL enz.

hoofdstuk 1

14

HTML beschrijft de onderdelen die in een webpagina worden opgenomen. Dit gebeurt op een compleet andere manier dan in een programmeertaal. Hoe HTML precies werkt, valt buiten het bestek van dit boek. Op internet en in de boekhandel vind je tal van handleidingen waarmee je de ‘taal’ in een oogwenk onder de knie hebt. Hieronder vind je toch een snelle en korte gids. Ken je HTML reeds voldoende, dan kun je deze paragraaf gerust overslaan. HTML staat voor hypertext markup language. HTML is geen programmeertaal, maar beschrijft enkel de tekststructuur. Het duidt titels, alinea’s, lijsten enz. aan in een tekst. HTML is gedefinieerd met SGML (Stardard Generalized Markup Language) waarvoor de omschrijving is bepaald door de ISO-norm 8879. SGML is veel uitgebreider dan HTML, maar dient net als HTML voor het structureren van tekstuele informatie. In een webpagina staat in de eerste plaats tekst. Die tekst heeft een bepaalde structuur en kan een of meerdere van de volgende onderdelen bevatten: – titels of koppen – alinea’s – citaten – tabellen – lijsten – verwijzingen of referenties (links, hyperlinks) naar andere webpagina’s of websites – (verwijzingen naar) afbeeldingen – … Mensen onderscheiden meteen een titel of een alinea. Een computerprogramma daarentegen is dom. Je moet het op een of andere manier vertellen waar de verschillende onderdelen staan. Dit kun je enkel door aan het programma letterlijk te vertellen waar elk onderdeel begint en eindigt. HTML markeert een titel of alinea zoals je dat zelf misschien al eens in een cursus deed met een markeerstift. Met een HTML-markering duid je het begin en het einde van een tekstonderdeel of tekstelement aan.

Mijn titel

• eerste opsommingspunt
• tweede opsommingspunt
• derde opsommingspunt

Verklaring van de afkortingen in HTML: h = head ul = unordered list (niet-genummerde lijst) li = list item

de basisingrediënten van een online gui

15

Webbrowsers lezen de HTML- markeringen uit en zetten de HTML-structuur om in een voor mensen leesbare weergave. Dit proces noemen we ‘renderen’ of ‘parsen’. Door aan te duiden waar een bepaald tekstonderdeel begint en eindigt, herkent de webbrowser (Internet Explorer, Firefox, Safari) de verschillende tekstonderdelen. HTML kan ‘hypertekst’ bevatten: een document kan verwijzingen bevatten naar andere documenten. Dit kunnen verwijzingen zijn naar documenten als foto’s en teksten die zich op dezelfde computer of medium bevinden, maar ook naar documenten die ergens op de wereldwijde locatie van het internet opgeslagen zijn. De gebruiker zal hiervan niets merken. Wanneer we HTML als GUI-taal voor een webapplicatie gaan toepassen, stuiten we al snel op een aantal grondige beperkingen. HTML (tot en met versie 4) en XHTML hebben: – weinig of geen interactieve mogelijkheden – geen opslag- of verwerkingsfuncties – een heel beperkte set aan invoermogelijkheden en interface-elementen.

Figuur 1

De visuele IDE van Qt maakt het ontwikkelen van desktopapplicaties eenvoudiger.

In een klassiek programma kan een ontwikkelaar gebruik maken van knoppen, menubalken, dialoogvensters, kalenders, selectiegereedschappen, grids enz. De meeste IDE’s beschikken over een ruime voorraad aan bedieningselementen die naar believen naar het werkvenster kunnen worden gesleept. HTML is oorspronkelijk niet ontwikkeld om het te gaan gebruiken voor de ontwikkeling van programma’s. Toch biedt het enige mogelijkheden voor het opbouwen van invulformulieren.

hoofdstuk 1

16

1.6

Invoerformulieren in HTML

Een invulformulier neem je als volgt op in het -element van een webpagina:

Als je de webpagina opvraagt in de browser, zul je nog steeds niets zien veranderen. We hebben immers nog geen knoppen, invulvelden of dergelijke voorzien. We moeten er een goede gewoonte van maken om elk onderdeel van een formulier te benoemen. Dat doen we door de attributen ‘name’ en ‘id’ op te nemen in de HTML-tags voor de formulierelementen. Wanneer het formulier wordt ‘verzonden’, kan een script op de server de ingevoerde gegevens opvragen op basis van het id van een element. Hoe dit precies in zijn werk gaat, hangt af van de gebruikte scripting- of programmeertaal op de server. We moeten het formulier ook vertellen waar het de ingevulde informatie naartoe moet sturen.

Vervolgens beslissen we ook welke verzendmethode we hiervoor zullen gebruiken. We kunnen kiezen tussen GET en POST. – GET: als we informatie willen opvragen, bijvoorbeeld gegevens uit een bestaande databank – POST: informatie verzenden om te bewaren, bijvoorbeeld e-mail, toevoegen aan een databank, gastenboek en dergelijke.

In moderne webapplicaties is het standaard ‘submitten’ of verzenden van een formulier vaak vervangen door een javascript-functie die het controleren van de invoer en het verzenden voor zijn rekening neemt. In een volgende stap voegen we de diverse formulierelementen toe. We kunnen kiezen uit: – tekstvelden – tekstvakken – bestandsvelden – keuzelijsten – keuzerondjes – aankruisvakjes – verborgen velden – knoppen – allerlei: tabindex, sneltoetsen etc.

de basisingrediënten van een online gui

17

In het formulier plaatsen we de verschillende elementen tussen de begin- en de eindmarkering "form":

HIER KOMEN DE FORMULIERELEMENTEN

Tekstvelden In een tekstveld kan de gebruiker tekstinformatie invullen. Een tekstveld bestaat uit één regel. Er bestaan twee types tekstvelden: – tekst – wachtwoord: hierbij verschijnt de ingevoerde informatie als sterretjes of bolletjes. Met het attribuut "value" kun je ook een vooraf gedefinieerde inhoud in het tekstveld plaatsen.

In een tekstveld kunnen we uitgebreidere tekstinformatie opnemen. We maken een tekstveld door de tag "textarea" in het formulier in te sluiten.

Tekstvakken In tegenstelling tot een gewoon tekstveld kan een tekstvak meerdere regels weergeven. Het aantal regels stellen we in met het attribuut "rows". Ook kunnen we instellen hoeveel tekens in een regel kunnen weergegeven worden met het attribuut "cols" (=kolommen). Beter is echter de grootte van het tekstvak in te stellen met CSS. Ook bij een tekstvak kunnen we een vooraf gedefinieerde inhoud in het tekstvak opnemen. Dit kunnen we door tekst te typen tussen de begin- en te eindmarkering (=tag) van het element "textarea". Tik hier je tekst.

Bestandsvelden In webmailprogramma’s zit vaak een mogelijkheid om via een ‘browse/blader’-knop ook een bestand toe te voegen aan je mail. Als je een bestand hebt gekozen, wordt het geüpload

hoofdstuk 1

18

naar de server. HTML voorziet hiervoor een ‘bestandsveld’, maar kan zelf geen bestanden uploaden. Immers, HTML is een opmaaktaal, voor het uploaden heb je een programma nodig op de server. In dit voorbeeld wordt het formulier verzonden naar het programma ‘bewaar.php’. Dit script zal het uploaden van het bestand voor zijn rekening moeten nemen. Browsers laten uit veiligheidsoverwegingen niet toe dat je hier een voorgedefinieerde waarde ingeeft via het attribuut "value". Als je hier het attribuut "maxlength" opneemt, interpreteert de browser dit als de maximale hoeveelheid bytes die doorgestuurd mogen worden. Via het attribuut "accept" kun je instellen welke mimetypes (bestandstypes) mogen worden geüpload. Ook het jokerteken "*" is toegelaten om subtypes toe te laten. Neem je het attribuut "accept" niet op, dan is het uploaden van alle bestandstypes toegelaten.

Als je gebruik wilt maken van een bestandsveld, moet je de "form"-tag uitbreiden met het volgende attribuut:

Met behulp van het attribuut "readonly" kun je instellen of de gebruiker de inhoud van het tekstveld mag wijzigen of niet. Dit attribuut kun je ook voor de tekstvelden en tekstvakken gebruiken.

In hoofdstuk 2 lees je hoe je het eenvoudige file-veld kunt ‘upgraden’ naar een uploadveld met drag- en dropmogelijkheden.

Keuzelijsten Je kunt een keuzelijst aanbieden waaruit de bezoeker een of meerdere items kan selecteren. Hiervoor maken we gebruik van het formulierelement "select". De diverse items in onze lijst komen tussen de tags "option" te staan. <select name="selectproduct"> HP-scanner Kodak-scanner Canon-scanner

de basisingrediënten van een online gui

19

In het bovenstaande geval is er in de keuzelijst slechts één item te zien. Om de rest te zien moet je het menu openklappen. Je kunt het aantal zichtbare items instellen met behulp van het attribuut "size". Standaard kan er slechts één item geselecteerd worden. Willen we de gebruikers de mogelijkheid bieden om een meervoudige selectie te maken, dan voegen we het volgende attribuut "multiple" toe. <select name="selectproduct" size="3" multiple="multiple"> ...

We kunnen vooraf ook één item selecteren. Dat doen we op de volgende manier: AGFA-scanner

Toch ontbreekt er nog iets essentieels in onze keuzelijst: met het bovenstaande voorbeeld is het onmogelijk om de verzonden gegevens in een andere webpagina (= de bestemming van het formulier) weer op te vragen. We moeten elk item nog een waarde toekennen. De inhoud van de items is op dit moment enkel bedoeld voor de bezoekers. We voegen bij elk item het attribuut "value" toe. <select name="selectproduct" size="3"> HP-scanner Kodak-scanner Canon-scanner

Je kunt items ook per thema groeperen door de markering "optgroup" op te nemen tussen de "select"-markering. <select name="selectproduct" size="9"> HP AGFA Kodak Canon Trust Canon Brother

hoofdstuk 1

20

Keuzerondjes Keuzerondjes zijn een reeks ronde aanstipbare knopjes met bijschrift waarvan de bezoeker er één kan selecteren.We nemen steeds de volgende attributen op: – type = radio – name = vrije keuze (maar alle keuzerondjes moeten dezelfde naam hebben als ze bij dezelfde groep horen) – value = per keuzerondje een andere waarde toekennen Vrouw man Onzijdig

De gebruiker kan slechts één van die keuzerondjes selecteren. Bij het laden van de formulierpagina is echter geen enkel rondje geselecteerd. We kunnen vooraf selecteren met behulp van het attribuut "checked". Onzijdig

Aankruisvakjes Aankruisvakjes zijn een groep vierkantjes met bijschrift waarvan de bezoeker er geen, één of meerdere kan aanvinken. We nemen steeds de volgende attributen op: – type: checkbox – name: vrije keuze (maar alle keuzerondjes moeten dezelfde naam hebben als ze bij dezelfde groep horen) – value: per keuzerondje een andere waarde toekennen Curryworst Gehaktbal Mayonaise Ketchup Tartaart

de basisingrediënten van een online gui

21

Verborgen velden Met behulp van een verborgen formulierveld kun je ’onzichtbaar’ informatie in velden opslaan. Onzichtbaar is niet helemaal juist, want de informatie is nog steeds te lezen als we de bron van de pagina bekijken. De browser verbergt het veld enkel bij de definitieve weergave van de pagina in het browservenster. In tegenstelling tot wat je misschien denkt, zijn verborgen velden zeer interessant om informatie weg te schrijven zonder dat de bezoeker de inhoud van de velden kan wijzigen.

Knoppen Om de informatie van het formulier te verzenden, hebben we een knop nodig. Wanneer we op die knop klikken, wordt de informatie gepost.

of OK bewaar

Naast een submit-knop kunnen we ook een reset-knop opnemen om het formulier leeg te maken.

of Opnieuw

Uiteraard kunnen we met HTML ook gewone knoppen schrijven. TEST

Om aan een HTML-knop een zekere functie te koppelen moeten we onze toevlucht nemen tot javascript.

Fieldset Met de markering "fieldset" kun je bepaalde onderdelen van het formulier groeperen. De markering "legend" geeft de "fieldset" een opschrift.

hoofdstuk 1

22

Gebruiker:

Naaminput type="text" name="naam" id="naam">
Telefoon

Labels Net zoals in visuele IDE’s van klassieke programmeertalen, kun je bij invoervelden een label ingeven. Met het attribuut "for" kun je een label koppelen aan een bepaald element. De waarde bij "for" verwijst naar het "id" van het corresponderende element. Het gebruik van labels voor invoervelden maakt je webpagina’s veel toegankelijker voor schermlezers (voor blinden en slechtzienden). Vermits HTML-code niet gecompileerd wordt, is die code immers uit te lezen.

Velden uitschakelen, sneltoetsen en tabs U kunt een veld of formulierelement deactiveren door er het attribuut "disabled" aan toe te kennen. De tekst in het invoerveld wordt lichtgrijs weergegeven en je kunt de inhoud niet wijzigen. De inhoud van dit veld wordt niet mee verstuurd als het formulier gepost wordt. Het heeft dus een andere functie dan het attribuut "readonly".

Als je de tabtoets gebruikt, verspring je van formulierelement tot formulierelement. Met het attribuut "tabindex" kun je instellen in welke volgorde de diverse elementen bereikbaar moeten zijn. Met sneltoetsen (toetsenbord) kun je de gebruiker naar welbepaalde formulierelementen laten gaan. We kunnen sneltoetsen instellen met het attribuut "accesskey".

In hoofdstuk 6 lees je hoe je sneltoetsen aan bepaalde functies kunt verbinden. We kunnen formulieren opmaken met stijlbladen (CSS). Een volledige uitleg van wat stijlbladen nu eigenlijk zijn, valt buiten het bestek van dit boek. In een stijlblad definieer je hoe elk element van een webpagina er moet uitzien (bijvoorbeeld lettertype, lettergrootte, kleur). Ook formulierelementen zoals knoppen of tekstvelden kunnen op die manier opgemaakt worden zodat hun stijl conform de vormgeving van de hele website loopt. We kunnen een algemene stijl definiëren voor bvijvoorbeeld een tekstveld. Alle tekstvelden zullen er dan gelijkaardig uitzien. Een voorbeeld:

de basisingrediënten van een online gui

23

input { float:left; font-size:10pt; font-family:arial, helvetica; background: ivory; border:1px #cccccc dotted; }

1.7

Nieuwe elementen in HTML5

HTML5 is meer dan alleen maar de nieuwste versie van HTML. Het is een verzamelnaam voor de nieuwste versies van HTML, javascript en CSS. In HTML5 is er een aantal nieuwe mogelijkheden bijgekomen voor het opbouwen van formulieren. Over het algemeen gaat het over nieuwe attributen en variaties op het reeds vermelde tekstveld. Let op: niet alle browsers herkennen deze nieuwe invoervelden. Een browser die bijvoorbeeld het type ‘datetime’ niet herkent, zal het renderen als een normaal tekstveld. Als ontwikkelaar moet je er steeds rekening mee houden dat de gebruiker moet kunnen terugvallen op een alternatief.

color

de browser toont een kleur‘picker’

datetime

je kunt enkel een datum of tijd invoeren

e-mail

de invoer moet een e-mailadres zijn

month, week

de invoer moet een maand zijn; de browser kan een datumveld voorzien

number

de invoer moet een getal zijn

range

een bereik, bijvoorbeeld tussen twee getallen

search

een zoekveld

tel

de invoer moet een geldig telefoonnummer zijn; een mobiele telefoon kan de mogelijkheid voorzien een telefoonnummer te laten selecteren uit een lijst

url

de invoer moet een een geldig webadres zijn.

HTML5 voorziet in deze nieuwe invoervelden, maar vermeldt niet wat browsers met die invoervelden moeten doen. Browserproducenten zijn dus relatief vrij in hun keuze. Samen met de nieuwe invoervelden is ook een aantal nieuwe attributen geïntroduceerd. autocomplete

bij de invoer van de gebruiker suggereert de browser zelf tekst

autofocus

geeft aan welk veld de focus moet hebben bij het laden van de pagina

form

geeft weer bij welk formulier(en) het huidige veld hoort

formaction

vervanging voor "action"

formenctype

application/x-www-form-urlencoded multipart/form-data text/plain

hoofdstuk 1

24

formmethod

vervanging voor "method"

formnovalidate

invoerveld moet niet gevalideerd worden bij het verzenden

formtarget

ter vervanging van "target"

height

hoogte van het element

list

datalist-id, voorgedefinieerde lijst van data

max

hoogst in te voeren cijfer of datum

min

laagst in te voeren cijfer of datum

multiple

meer dan één waarde toegelaten (bijvoorbeeld bij file)

pattern

reguliere expressie die weergeeft welke waardes mogen ingevoerd worden, bijvoorbeeld: pattern="[0-9]"

placeholder

helptekst die bijvoorbeeld weergeeft wat moet ingevoerd worden

required

het veld moet ingevuld worden

step

interval tussen in te voeren waardes (bijvoorbeeld: 2, 4, 6… maar niet 3, 5…)

width

breedte van het element

Het doel van deze nieuwe attributen is ontwikkelaars een hoop scriptingwerk te besparen. Tot nog toe werd voor validatiefuncties javascript ingezet. Wanneer de browser dit werk zelf voor zijn rekening neemt dankzij eenvoudig aan te brengen attributen, bespaart het enorm veel ontwikkeltijd bij het bouwen van een webapplicaties.

1.8

DOM

Als ontwikkelaar van webapplicaties moet je een goed begrip hebben van het DOM. Het DOM of Document Object Model is een platform- en (scripting- of programmeer)taalonafhankelijke manier om de inhoud, structuur en stijl van documenten (bijvoorbeeld HTML en XML) dynamisch aan te passen. Via de DOM kan een document tijdens de weergave worden aangepast. Ruwweg beschrijft het DOM HTML- en XML-documenten in een stamboomstructuur. Elk element (bijvoorbeeld , ,

,

…) of attribuut in de stamboom kan vanuit een scripting- en of programmeertaal geselecteerd en aangepast worden. Er bestaan drie versies van de DOM: 1 Core DOM: model voor elk gestructureerd document. 2 XML DOM: model voor XML-documenten en XHTML 3 HTML DOM: model voor HTML-documenten Het HTML-dom is aldus een onafhankelijke en open standaard voor het selecteren, aanpassen, toevoegen of verwijderen van HTML-elementen in een HTML-document. Elke element in een webpagina wordt beschouwd als een ‘knoop/knooppunt’ (node). De DOM-API bepaalt op welke wijze je bepaalde elementen kunt selecteren (opvragen) om ze aan te passen. Dit kan op verschillende manieren: 1 Via de boomstructuur kan van elk element in het document opgevraagd worden wat het bovenliggende (parentnode) of de onderliggende (childnodes) ‘objecten’ (elementen) zijn.

de basisingrediënten van een online gui

25

Document

Root element:

Element:

Element:

Attribute: "href"

Element:

Wat is de Dom?

Document Object Model...

hoofdstuk 1

26

1 2 3 4 5 6 7 8 9

Het hele document is de document-node. Ieder HTML-element is een element-node. De tekst in een HTML-element zijn text-nodes. Een HTML-attribuut is een attribute-node. Commentaarregels zijn comment-nodes. Ieder element kan maximaal één parent node hebben. Ieder element kan meerdere child nodes hebben. Een ‘leaf’ is een element zonder child nodes. ‘Siblings’ zijn elementen met dezelfde parent node.

GeselecteerdElement.innerHTML

De tekstinhoud (waarde van de textnode) van het element. De innerHTML-eigenschap hoort niet bij de specificaties van de DOM, maar wordt door alle browsers wel ondersteund. Je kunt er de HTMLinhoud van een element mee opvragen of wijzigen.

GeselecteerdElement.nodeName

De naam van het element opvragen.

GeselecteerdElement.nodeValue

De waarde van het element opvragen.

GeselecteerdElement.parentNode

De parent node van het element opvragen.

GeselecteerdElement.childNodes

Alle child nodes van het element opvragen.

GeselecteerdElement.attributes

Alle aanwezige attributen van een element opvragen.

GeselecteerdElement.getElementById(id)

Een element selecteren met behulp van het idattribuut.

GeselecteerdElement.getElementsByTagName(name) Alle elementen van een bepaalde tag (bijvoorbeeld

) opvragen. GeselecteerdElement.appendChild(node)

Een element toevoegen als child node voor het geselecteerde element.

GeselecteerdElement.removeChild(node)

Een child node verwijderen van een geselecteerd element.

Voor elk document kun je een aantal eigenschappen bewerken: tekst, stijl (CSS), events (hoe reageert het element op gebeurtenissen zoals een muisklik), functies (bijvoorbeeld toevoegen of verwijderen van child nodes). In het onderstaande voorbeeld selecteren we het

-element met id "intro". Vervolgens geven we de inhoud van dit element weer in twee alert-vensters.

Hello World!

<script type="text/javascript"> var x=document.getElementById("intro"); alert(x.firstChild.nodeValue); alert(x.innerHTML);

de basisingrediënten van een online gui

27



Een model met een verleden Legacy DOM Voor er sprake was van een gestandaardiseerd model, bevatten de browsers slechts de mogelijkeid om formulierelementen, afbeeldingen en links op te vragen. Aanvankelijk konden alleen formulierelementen, afbeeldingen en links via DOM aangesproken worden. Hiermee kon men een eenvoudige formuliervalidatie doen of aan afbeeldingen een ‘rollover’-effect toevoegen: – via naam: document.formName.inputName – via index: document.forms[0].elements[0] Intermediate Dom Vanaf 1997 begonnen browserfabrikanten aan de implementatie van eigen technieken om onderdelen van een ingelezen document te wijzigen. Die technieken kregen de verzamelnaam Dynamic HTML (DHTML) maar waren vaak incompatibel tussen de verschillende browsers. Dom Level 1, 2, 3 Het W3C bracht browserfabrikanten samen om een standaard voor scriptingtalen te ontwikkelen: ECMAscript. javascript (Netscape) en JScript (Microsoft) implementeerden ECMAscript voor grotere compatibiliteit. Het W3C begon eveneens te werken aan de DOM. DOM Level 1 bevatte al technieken waarbij elk onderdeel van een HTML- of XML-document bewerkt kon worden. Bij DOM Level 2 (2000) werd het bekende getElementById geïntroduceerd. Dom Level 3 (2004) biedt ondersteuning voor XPath, keyboard event handling en serializing van XML-documenten. Vanaf 2005 worden grote delen van DOM ondersteund door ECMAscriptcompatibele browsers zoals IE6, Opera, Safari en Gecko-browsers (Mozilla, Firefox, SeaMonkey en Camino).

1.9

Browsers en hun kuren

Voor heel wat ontwikkelaars is het slikken als ze bedenken dat hun beoogde webapplicatie moet functioneren in alle denkbare browsers. Toch is dit niet zo’n groot probleem als het op het eerste zicht lijkt. Ook al bestaan er veel onderlinge verschillen tussen de browsers, toch kunnen we de browsers indelen in vier grote groepen. Heel wat browsers maken intern immers gebruik van dezelfde rendering engine, de motor voor het omzetten van HTML en CSS in een leesbare weergave. Van veel groter belang in deze tijd is de ondersteuning voor webstandaarden en de snelheid van de ingebouwde javascript-interpreter.

hoofdstuk 1

28

Hieronder vind je een beknopt overzicht van de belangrijkste rendering engines: Rendering engine

Browsers

Beschrijving

WebKit

Webkit is door Apple afgeleid engine achter Google Chrome, Safari, Mobile Safari en de van KHTML, de rendering van browser van Google Android engine van de open source browser Konqueror uit de KDE-desktop op Linux

Gecko of NGLayout

Open source layout-engine van Netscape/Mozilla

engine achter Mozilla Suite Mozilla Firefox, AOL, Beonex Communicator, Camino, CompuServe 7.0, DocZilla, Epiphany, Flock, Galeon, IBM Web Browser, K-Meleon, Kazehakase, Netscape 6.0 en latere versies, Salamander Web Browser, SeaMonkey, Skipstone

Presto

Layout-engine van Opera Software ter vervanging van de oude Elektra-engine

Opera 7 en later, Opera Mobile, Opera Mini, Nintendo DS Browser, Nintendo DSi Browser, Nokia 770 browser, Sony Mylo COM-1 browser, Wii Internetkanaal, Macromedia/Adobe Dreamweaver MX tot en met CS3, Adobe Creative Suite 2 en 3

Trident

Rendering engine voor Microsoft Internet Explorer vanaf versie 4

Internet Explorer

Op http://en.wikipedia.org/wiki/Comparison_of_web_browser_engines vind je een uitgebreide lijst van browser en hun specifieke rendering engines.

1.10 Modernizr Niet alle browsers (en zeker niet de oudere) ondersteunen de nieuwe input-types en attributen. Op www.modernizr.com vind je een geavanceerde javascriptbibliotheek die voor de gebruikte browser controleert welke nieuwe HTML5-elementen, HTML5-attributen en CSS3opties ondersteund worden. Download het script en link het aan de -tag van je webpagina’s. <script src="modernizr-1.7.min.js">

Let op: afhankelijk van de gedownloade versie moet je natuurlijk de naam van het script aanpassen. Je kunt het script ook in een andere map bewaren. Dan moet je niet alleen de naam, maar ook de map invoeren bij het attrbuut ‘src’. Voeg nu het attribuut class "no-js" toe aan de -tag.

Modernizr controleert niet alleen welke HTML5 en CSS3-opties door de gebruikte browser ondersteund worden. Het vervangt de naam van de class door js en voegt een extra class toe

de basisingrediënten van een online gui

29

voor elke optie die ondersteund wordt. Wat niet ondersteund wordt, krijgt het voorvoegsel no-. Bijvoorbeeld:

Het voordeel is dat je in je CSS aparte klassen kunt definiëren. Wanneer je in de body van je webpagina een