Theo Peek

Quinnova Internetprofessionals

Introducing HTML5 van Bruce Lawson en Remy Sharp

HTML5 - wat moet je ermee

Na het lezen van het boek Introducing HTML5 van Bruce Lawson en Remy Sharp, lijkt het me nuttig om een management summary te geven voor de internetprofessional die wel weet wat HTML is, maar zelf niet programmeert. HTML5 introduceert een aantal nieuwe zaken ten opzichte van de bestaande (X)HMTL-standaarden. Per punt zal ik kort aangeven wat het inhoudt en (belangrijker) wat je er op dit moment mee moet. Voor details verwijs ik graag naar het genoemde boek, dat duidelijk is en prettig leest.

Nieuwe elementen

"Vroeger" maakten we de layout van een website met tables. Dat werkte prima, totdat Eric Meyer en een aantal anderen zeiden dat het allemaal anders moest, want je hoort opmaak en content van elkaar te scheiden. Een table is voor tabulaire gegevens en niet voor opmaak. Nu maken we netjes allemaal websites die opgebouwd zijn uit divs en die maken we op met CSS. Het voordeel is dat je aan dezelfde content verschillende layouts en stijlen kunt geven, zie bijvoorbeeld csszengarden.com (dat kon met tables niet).

Maar de mensen achter HTML5 hebben bedacht dat heel veel sites heel veel op elkaar lijken en dezelfde elementen gebruiken. Een div zegt op zich niets over de content van die div, alleen dat het een blok met content is. Vandaar de introductie van elementen als header, nav en footer om verschillende delen van een pagina aan te duiden. Daarnaast voor elk artikelen en posts het article element en aside voor gerelateerde content. Het voordeel is dat de browser kan "begrijpen" welke content waar staat. Ik kan me voorstellen dat er (mobiele) browsers ontstaan die alleen de content van een pagina weergeven en niet de navigatie etc.

Voorlopig is er geen noodzaak om die nieuwe elementen te gebruiken, maar als je nou toch een redesign doet, dan kost het ook niets extra en ben je weer helemaal hip en bij. Bovendien ondersteunen alle moderne browsers deze nieuwe elementen (Internet Explorer alleen met een extra javascriptje dat je kunt downloaden) dus er is ook geen reden om het niet te doen.

Formulieren

Invulvelden in formulieren maak je nu met een input met type=text, ongeacht of er een naam, een telefoonnummer of een emailadres in moet komen. In HTML5 kun je aangeven wat er in een invulveld moet komen. En dat is reuze handig, want uiteindelijk kan een browser dan zelf controleren of een emailadres correct is, in plaats van dat je dat zelf in javascript (en op de server nog een keer) moet doen. Ik zeg bewust uiteindelijk want browsers ondersteunen deze nieuwe formulieren nog maar matig.

Het enige voordeel dat ik op dit moment zie, is dat als je aangeeft dat er in een veld een emailadres of een telefoonnummer moet komen, dat een mobiele browser het goede toetsenbord kan kiezen. Dat is best handig en als je zelf nog gewoon de validatie met javascript regelt, dan is de impact ook niet zo groot.

Video en audio

Het afspelen van video en audio op webpagina's kon tot nu toe alleen met plugins (heel vaak wordt Flash gebruikt voor video's bijvoorbeeld), maar met HTML5 kan het ook zonder plugins. De voordelen daarvan zijn: meer controle over de presentatie minder afhankelijkheid van (de juiste versie van) plugins.

Hoewel de verschillende desktopbrowsers nog niet allemaal hetzelfde werken op dit gebied, en hoewel het met Flash eigenlijk prima gaat, is er een goede reden om er toch iets mee te gaan doen: mobiel gebruik. Van de verschillende iProducten is bekend dat ze Flash niet ondersteunen, maar ook op andere smartphones is de ondersteuning matig.

Canvas

In HTML5 kun je een canvas definiëren, waarin je met javascript kunt tekenen. In HTML kon je met elementen en CSS van alles tekenen, als het maar rechthoekig was. Voor alle andere vormen had je plaatjes nodig. Met javascriptinstructies kun je alle mogelijke figuren maken. Nu is het voor uitgebreide figuren en foto's etc nog altijd stukken makkelijker om dat met plaatjes te doen, maar plaatjes zijn niet interactief, met andere woorden, je kunt ze niet op acties van een gebruiker laten reageren. (je kunt wel een nieuw plaatje inladen als een gebruiker iets doet, maar dan moet je dus voor elke mogelijke actie een plaatje beschikbaar hebben). Daar waar figuren moeten reageren op acties van de gebruiker, is het canvas een handige tool.

Tools zoals Balsamiq en iPlotz om wireframes te maken, zijn nu in Flash geschreven, maar zouden in theorie ook op basis van canvas gemaakt kunnen worden. Er is al een versie van Windows Paint op basis van canvas.

Flash is dus een alternatief, maar voor wie dat niet beheerst, alleen open standaarden wil gebruiken of niet afhankelijk wil zijn van plugins, is het canvas de juiste keuze, ook al omdat alle grote browsers het ondersteunen.

Web storage

Als je iets voor een gebruiker wilt bewaren, dan kan dat met cookies of door gebruikers te laten inloggen (en het voor ze op de server te bewaren). HTML5 biedt Web storage, in feite een verbeterde vorm van cookies. Eigenlijk is het grote voordeel dat als een programmeur je vertelt dat iets met cookies niet kan, dat je dan kan zeggen dat-ie HTML5 Web Storage moet gebruiken.

Alle moderne browsers ondersteunen deze eenvoudige vorm en sommige zelfs de uitgebreide vorm waarin je lokaal een SQL database kunt gebruiken. Dat biedt goede mogelijkheden voor offline werken. Een webapplicatie die gebruik maakt van een SQL server kun je nu helemaal naar de computer van de gebruiker kopiëren en deze kan de applicatie dan ook offline gebruiken. Dit is een andere feature van HTML5: een cache-manifest dat de browser vertelt wat offline opgeslagen moet worden en wat niet. Doordat Internet Explorer deze uitgebreide vorm van web storage niet ondersteunt, is de tijd helaas nog niet rijp om daar grote dingen mee te doen.

Web workers

Browsers doen serieel werk: eerst doen ze een request en dan tonen ze de pagina die terugkomt. Blijft er één plaatje 'hangen', dan blijft de pagina laden. Web workers maken het mogelijk om een browser parallel te laten werken. Dus stel dat je een hele mooie applicatie op basis van canvas hebt gemaakt die een filter op een plaatje legt, maar het javascript van dat filter duurt een minuut, dan is het zonde als een gebruiker een minuut lang moet wachten. Sterker nog: grote kans dat die afhaakt. Met een web worker (ondersteund in Firefox, Safari en Chrome) stop je dat filter in een achtergrondproces en de gebruiker kan aan de voorkant gewoon doorwerken.

Web sockets

Iedereen heeft natuurlijk de Google Wave video gezien waarin de letters die persoon A typt realtime op het scherm van persoon B verschijnen. Hoe werkt dat? Als persoon A typt, dan zijn dat triggers (events) en daardoor is het versturen van de getypte letter naar een server gemakkelijk. Maar bij persoon B gebeurt in principe niets. Hoe weet browser B dat er "nieuws" is? Browser B kan natuurlijk elke seconde aan de server vragen: "zijn er nog nieuwe letters getypt?" maar dat is niet echt efficiënt. Het is beter om daarvoor Web Sockets (ondersteund in Firefox, Safari en Chrome) te gebruiken: dat zijn een soort open kanalen naar een server en de server kan daardoor "nieuws" naar de browser "pushen".

Een beetje technisch verhaal, maar het verandert de kijk op webpagina's compleet. Het web begon met pagina's met tekst, plaatjes en links. Als je op een link klikte, ging je naar de volgende pagina. AJAX zorgde ervoor dat je delen van de pagina opnieuw kon laden, maar nog steeds is daarvoor een trigger (event) nodig. Met web sockets is die trigger niet meer nodig.

Wat moet je ermee?

Als je aan normale, conservatieve internetproducten werkt, hoef je eigenlijk alleen iets met de nieuwe elementen en de nieuwe formuliervelden. Maak je nieuwe, innoverende internetproducten dan zijn audio/video, canvas en web storage interessant. Alleen als je cutting-bleeding-edge hippe dingen ontwikkelt, dan is de rest ook interessant (maar dan had je deze post waarschijnlijk niet nodig). Er is gewoonweg nog te weinig ondersteuning door de browsers (met name Internet Explorer) om de rest nu al serieus te gebruiken.

Met dank aan Steven voor het lenen van het boek!

HomeHome