Bureau Everink - teksten en publiciteit

teksten & publiciteit

KNOWHOW-CENTRUM

Bureau Everink - teksten en publiciteit

teksten & publiciteit

KNOWHOW-CENTRUM

Het web van de toekomst wordt gebouwd met HTML5

door ing. Jan Everink

In HTML5, de nieuwste versie van de webdesign-taal HTML, zijn de technische ontwerpmogelijkheden weer verder uitgebreid. Onder meer zijn er belangrijke nieuwe voorzieningen gekomen voor het creren en in webpagina's plaatsen van afbeeldingen en interactieve animaties. Ook wordt het inbouwen van audio en video een stuk makkelijker. Een mogelijk probleem bij het toepassen van de nieuwe HTML5-opties in bestaande webpagina's is dat dit alleen kan als deze pagina's geen verouderde HTML-codes bevatten.

Canvas: interactieve graphics maken met JavaScript

HTML (HyperText Markup Language) is het coderingssysteem voor het creren van webpagina's. HTML5 voegt nieuwe mogelijkheden toe aan de succesvolle tegenwoordige HTML-standaard 4.01. Bestaande in HTML 4.01 gecodeerde webpagina's zijn door versie 5 dus geenszins verouderd. Met HTML5 komen nieuwe mogelijkheden beschikbaar, die wl of niet gebruikt kunnen worden.

Een belangrijke nieuwe voorziening is de opdrachtcode "Canvas", waarmee in JavaScript ontwikkelde afbeeldingen en animaties op een webpagina weergegeven kunnen worden. Afbeeldingen en animaties worden tegenwoordig met speciale software vervaardigd, apart op het web geplaatst en via een koppeling in de pagina gevoegd. Dat blijft mogelijk maar daarnaast is in HTML5 de canvas-opdracht beschikbaar om direct in het HTML-bestand grafische JavaScript-toepassingen in te bouwen.

Met de canvas-opdracht kan op een webpagina een rechthoekig gedeelte van bepaalde afmetingen worden gedefinieerd dat door de webdesigner als een soort schildersdoek toegepast kan worden. De scripttaal JavaScript levert de penselen en de verf om op dat doek te kunnen schilderen. Er kunnen nu zonder extra software interactieve animaties voor bijvoorbeeld communicatie en promotie worden ingebouwd. Te verwachten is dat de rol van Flash steeds meer door canvas-applicaties overgenomen zal worden.

JavaScript wordt nog belangrijker

JavaScript wordt ook nu al in veel webpagina's toegepast, onder meer voor het creren van navigatiemenu's. Met de canvas-opdracht krijgt JavaScript nu ook zeer praktische grafische mogelijkheden.

De rol van JavaScript bij het bouwen van websites is door de jaren heen belangrijker geworden. Dat is onder meer bevorderd door de introductie van een standaard voor het softwarematig benaderbaar maken van pagina-onderdelen, het zogenoemde DOM (Document Object Model). In HTML5 wordt de trend om in webpagina's door middel van scripts interactieve toepassingen te bouwen voortgezet. Terwijl webdocumenten vroeger bestonden uit content met opmaakcodes lijken ze tegenwoordig meer te worden beschouwd als computerprogramma's die bewerkingen met content en invoergegevens uitvoeren.

In HTML5 zijn de toepassingsmogelijkheden van JavaScript ook uitgebreid met zogenoemde webworkers. Dat zijn scripts die op de achtergrond relatief zware taken uitvoeren, in principe zonder daarbij het normale gebruik van de webpagina te belemmeren.

Pagina-onderdelen met (verborgen) semantische betekenis

Een andere nieuwe mogelijkheid is dat aan pagina-onderdelen semantische kenmerken gegeven kunnen worden. Er kunnen verschillende blok-elementen worden gebruikt waarvan de namen aangeven wat voor soort content ze bevatten. Het is bijvoorbeeld mogelijk om kopregels in een speciaal onderdeel genaamd "header" te plaatsen. Ook kan een blok-element "nav" worden gebruikt voor de navigatie-links. De eigenlijke content kan in een blok met de code "article" worden gezet. Er zijn nog verschillende andere semantische structuur-codes beschikbaar.

Deze semanitische elementen zijn onder meer nuttig voor de zoekmachine-robots. Deze kunnen nu gemakkelijker echte content onderscheiden van andere onderdelen van het HTML-bestand, hetgeen bij het indexeren van webpagina's van belang kan zijn.

Een ander voordeel van het gebruik van semantische pagina-onderdelen is dat het HTML-bestand daardoor gemakkelijker door toekomstige webdesigners gelezen en aangepast kan worden. Maar daarvoor is overigens al een goede oplossing beschikbaar: het gebruik van commentaarregels.

Makkelijker inbouwen van audio en video

Om in een webpagina het afspelen van een audio- of videobestand mogelijk te maken is in oudere HTML-versies extra software nodig. In HTML5 is dit makkelijker; de opdrachtcodes "Audio" en "Video" zijn beschikbaar om audio- en videobestanden direct door de browser te laten afspelen.

Maar het gebruik van deze codes garandeert op zichzelf nog niet dat het betreffende bestand daadwerkelijk afspeelbaar is. Het audio- of videoformaat moet ook door de browser worden ondersteund. De HTML5-specificaties laten in principe elk formaat toe, maar voor slechts enkele formaten bestaat brede browser-ondersteuning. Dat zijn voor audio ogg, mp3 en wav, en voor video ogg en mpeg4.

Verder zijn in HTML5 ruime voorzieningen voor de ontwerper beschikbaar om de afspeelmogelijkheden van audio en video nader te bepalen. Zo kan bijvoorbeeld worden aangegeven of het afspelen meteen begint of pas als de bezoeker op de startknop klikt. Ook kan eventueel worden gezorgd dat de bezoeker beschikt over volumeregeling, zoekfunctie en pauzeknop. Verder is het mogelijk om met JavaScript nog extra functionaliteit toe te voegen.

Meer vrijheid

Er zijn in HTML5 nog diverse andere uitbreidingen beschikbaar om desgewenst toegepast te worden, onder meer voor het ontwerpen van formulieren. Toch is HTML5 niet alleen een uitbreiding van HTML 4.01. Er is ook meer vrijheid wat betreft het toepassen van de HTML-opdrachten.

Zo is het bijvoorbeeld in HTML5 wl toegestaan om de table-opdracht te gebruiken voor layout-doeleinden. In oudere versies mocht dat niet maar veel ontwikkelaars trokken zich weinig van dat verbod aan, omdat de table-opdracht nu eenmaal praktisch is om een layout-structuur te creren. Vooral bij responsive design, het creren van webpagina's die op elk medium goed worden weergegeven, kan het heel doelmatig zijn om met de table-opdracht een flexibel raamwerk te maken. In HTML5 wordt deze werkwijze nu wel als standaard erkend. Ook worden voor het gebruik van de table-opdracht voor layout-doeleinden nadere aanbevelingen gegeven.

Positief is ook dat het toegestaan blijft om in de HTML-codes zowel hoofdletters als kleine letters te gebruiken. De trend om in principe geen hoofdletters te gebruiken wordt in HTML5 niet doorgezet.

Minder omslachtige codering

Een andere verbetering is dat voor verschillende onderdelen van het HTML-bestand veel eenvoudiger noteringen worden gebruikt dan in vorige versies. Dat is onder meer het geval met de DOCTYPE-regel, die helemaal aan het begin van een HTML-bestand staat. De DOCTYPE-regel vertelt de browser in welke HTML-versie de pagina gecodeerd is. HTML5 kent maar n DOCTYPE en die is heel eenvoudig, namelijk alleen "HTML". Het is kennelijk de bedoeling dat versie 5 d HTML van de toekomst wordt.

Ook andere codes zoals bijvoorbeeld die betreffende character encoding, de omzetting van binaire tekens naar leesbare letters, cijfers en andere symbolen, zijn flink vereenvoudigd.

Quirks-mode kan niet meer

Hoewel HTML5 als standaard heel tolerant is kunnen om het gebruik van de nieuwe opties mogelijk te maken toch ook verdere aanpassingen nodig zijn. Dat komt niet door HTML5 als zodanig maar doordat mogelijk sommige codes in de bestaande webpagina's door W3C, de instantie die verantwoordelijk is voor de HTML-standaard, vervallen verklaard zijn. In HTML5 geeft dat problemen omdat het daarin niet mogelijk is de zogenoemde quirks-mode toe te passen.

Met de DOCTYPE-regel kan in versie 4.01 eventueel de quirks-mode ofwel de spitsvondige instelling van de browser worden opgeroepen. In de quirks-mode wordt een deel van de browser-capaciteit gebruikt om te zorgen dat de betreffende pagina ondanks onvolkomenheden zoals verouderde codes toch goed wordt weergegeven.

In HTML5 is de quirks-mode niet beschikbaar. Afhankelijk van de browser kunnen verouderde codes in een HTML5-pagina lichte tot serieuze weergave-problemen veroorzaken.

Naar standaard-codering

Als een website nu al helemaal volgens de geldende standaard is gecodeerd zijn voor het omzetten van de pagina's naar HTML5 vrijwel geen aanpassingen nodig.

Maar bij bestaande pagina's die verouderde codes bevatten moet eerst een herziening van de codering plaatsvinden, aangezien de quirks-mode niet meer gebruikt kan worden. Vaak is het in zo'n geval zinvol om tegelijk ook de content en de vormgeving van de pagina kritisch te bekijken en eventueel te upgraden.

Voor nieuwe webpagina's is aan te raden om deze zoveel mogelijk met standaard-HTML5 te bouwen. Dan kan in deze pagina's desgewenst meteen van HTML5-opties gebruik worden gemaakt. Ook als dat vooralsnog niet gebeurt is standaard-codering in nieuwe pagina's aan te raden, want dan zijn deze pagina's in ieder geval klaar voor HTML5.