Uitlegparty: HTML5

Uitlegparty: HTML5

3 september 2010 om 17:16
Laatste update: 29 april 2018 om 03:29

Ladies and gentlemen, start your browsers. HTML5 brengt multimedia en interactie zonder plugins naar het web.

HTML is de opmaaktaal van het web en daarmee het belangrijkste bouwmateriaal van websites. De nieuwe versie 5 van de taal wordt gelezen door de nieuwste versies van Firefox, Internet Explorer, Chrome, Safari en andere browers. Websites kunnen er vanaf nu dus nieuwe toepassingen mee presenteren. HTML5 wordt uiteindelijk de belangrijkste webstandaard. Voordeel is dat het een open standaard is en eentje met nieuwe functionaliteiten en snellere laadtijden.

De nieuwe versie van HTML biedt een betere integratie van JavaScripts, de programmeercodes die worden gebruikt voor interactieve elementen binnen dezelfde webpagina. Dat maakt nog meer geavanceerde en multimediale toepassingen mogelijk direct in de browser zonder dat je daarvoor extra plug-ins moet installeren. Momenteel gebeuren veel van de zaken die HTML5 kan nog met extra code zoals Adobe's Flash, via een plug-in die de grote meerderheid van de gebruikers heeft draaien.

Maar Flash heeft nadelen: het is gevoelig voor crashes en trekt een relatief zware wissel op de browser en computer wat betreft rekenkracht. Bovendien werkt Flash nog altijd niet lekker op mobieltjes. Ook Flash versie 10.1 voor Android smartphones, sinds kort beschikbaar, werkt nogal traag en buggy. Voordat Adobe de problemen heeft gefixt, is het waarschijnlijk al ingehaald door HTML5.

Dat is dan ook een van de redenen dat Apple - al in erg vroeg stadium - besloot Flash in zijn mobiele besturingssysteem iOS links te laten liggen. Dat heeft de afgelopen jaren tot gevolg gehad dat veel interactieve en multimedia-elementen binnen webpagina's op de iPhone, iPod Touch en iPad niet werkten. Dat geldt bijvoorbeeld voor de Flash-playlists van Tonies Tunes en veel ingevoegde filmpjes bij artikelen.

HTML5 laat audio- en videocontent in een webpagina integreren met bestandsformaten als Ogg Vorbis, mp3, aac (audio), Ogv Vorbis, mp4 en vp8 (video). Grote videosites hebben al de stap gemaakt naar HTML5-spelers voor filmpjes. Daardoor is er geen Flash meer nodig om filmpjes te bekijken op YouTube of Vimeo. De komst van de iPad heeft die overgang versneld. Maar HTML5-ondersteuning staat nog in de kinderschoenen. De meeste webspelletjes of filmpjes werken er nog niet mee.

Belangrijk onderdeel van HTML5 zijn de zogeheten semantische tags. Die slaan op de inhoud en niet alleen op de opmaak. Ook is het makkelijk de locatie van de gebruiker te bepalen, elementen op de site te laten bewerken door de bezoekers en gebruikersgegevens op te slaan.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="334" height="280" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="src" value="http://www.youtube.com/v/XhMN0wlITLk&amp;feature"><embed type="application/x-shockwave-flash" width="334" height="280" src="http://www.youtube.com/v/XhMN0wlITLk&amp;feature"></object>

Schietspel a la Quake.

Alle grote internetspelers gaan HTML5 ondersteunen in hun browsers. De nieuwste edities van Chrome en Safari doen dat al. Google biedt als extraatje ook nog een aantal showcases met experimentele toepassingen op de special site HTML5 Rocks. Ook Apple biedt een dergelijke showroom. Apple toont sinds vrijdag ook bioscoopagenda met automatische locatiebepaling via HTML5.

Een mooi voorbeeld is The Wilderness Downtown waar Google in samenwerking met de Canadese indierockband Arcade Fire laat zien wat HTML5 kan. Op de site beleef je een videoclip waarbij HTML5 de audio afspeelt op het juiste moment en de 3D-rendering van de vogels voor zijn rekening neemt. De schaduwen van de vogels vallen over Google Maps en de site plaatst ook bomen in Street View. Het is mogelijk boomtakken te tekenen en je naam te schrijven.

Ook Mozilla (van Firefox) en Microsoft werken hard aan invoering van HTML5 in hun browsers. Maar TechCrunch merkte op dat er weer storende verschillen zitten in de manier waarop browsers bepaalde codes vertalen in wat er op het scherm wordt getoond. Dat doet denken aan de situatie van enkele jaren geleden waarbij er enorme verschillen zaten tussen de manier waarop sites eruit zagen in IE6 en Firefox. HTML5 zorgt wat dat betreft voorlopig voor een déjà-vu van meldingen over dat je de verkeerde browser gebruikt. The Wilderness Downtown meldt dat de site is ontworpen voor Chrome.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="334" height="280" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="src" value="http://www.youtube.com/v/B-KVHes36qw&amp;feature"><embed type="application/x-shockwave-flash" width="334" height="280" src="http://www.youtube.com/v/B-KVHes36qw&amp;feature"></object>

Zoals met elke nieuwe standaard duurt het een paar jaar voordat alles definitief vaststaat. In de tussentijd krijgen gebruikers soms iets wel of juist niet te zien op basis van hun browserversie. Voor het publiek is dat vervelend. Aan de andere kant kan het er ook voor zorgen dat eindgebruikers, en met name bedrijven, massaler en sneller overstappen op nieuwe browers. Daar is uiteindelijke de ontwikkeling van het hele web bij gebaat.

Het grote voordeel zit uiteindelijk in soepelere en snellere browserinteractie, zowel op computers als mobiele apparaten. Hoe sneller je er niks van merkt dat iets HTML5 gebruikt, des te beter.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="334" height="280" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="src" value="http://www.youtube.com/v/U3j7mM_JBNw"><embed type="application/x-shockwave-flash" width="334" height="280" src="http://www.youtube.com/v/U3j7mM_JBNw"></object>

Tijdschrift Sports Illustrated in HTML 5

Tot slot: zelf proberen kan met bijna vijftig demo's, van een strandbal stuiteren tot tekenen. En natuurlijk: Tetris.

Lees meer over:

Deel via