HTML5

gepost op Dinsdag 15 juni 2010 door Thomas

HTML5 (HyperText Markup Language 5) is de nieuwste, nog onafgewerkte versie van html standaard. HTML5 verbetert de kleine foutjes van zijn voorganger (html) en levert extra en betere ondersteuning voor webapplicaties, webdesign. Enkele voorbeelden:

Structuur elementen

Er zijn een aantal nieuwe elementen (tags) bijgekomen om de structuur en inhoud van de pagina te verduidelijken vb. header, nav, article, footer, time enz. Deze tags zullen ongetwijfeld nog een rol spelen voor smartphones, zoekmachines, screenreaders enz.

Video/audio element

Dankzij de audio en video-tag is er de mogelijkheid om media af te spelen zonder gebuik te maken van plugins zoals bijvoorbeeld een flash-player-plugin. De bediening van het filmpje, zoals bijvoorbeeld: play, pause en fast forward zijn via JavaScript aanspreekbaar. Op die manier kan je dus een player volledig via css, html en javascript opmaken en instellen. De enige vereiste is dat je browser het bestand formaat van de media ondersteund (vb mp4, ogg, avi, ...). De ideale situatie zou zijn dat er een codec (formaat) is die alle browsers implementeren. Maar daarvoor zijn de makers (Microsoft, Apple, Google, Mozilla) te koppig.  

Canvas element

Deze tag is ongetwijfeld de spectaculairste vernieuwing. Het geeft webdevelopers de mogelijkheid om met behulp van JavaScript afbeeldingen te creeëren. De mogelijkheden hiervan spreken tot de verbeelding. Dankzij deze tag kan je bijvoorbeeld tekeningen en grafieken maken, foto's bewerken, (eenvoudige) animaties voortbrengen, enz.

Extra functionaliteiten

De mogelijkheiden voor de webdeveloper zijn er in het algemeen sterk op vooruit gegaan. Vb Betere aanspreekbaarheid van "Document Object Model " (DOM), vereenvoudiging Drag 'n drop, lokaal opslaan van data,  snellere laadtijden, Web Workers, extra attributen, nieuwe form fields, font-face (lettertype ondersteuning), enz.

Waar wachten we nog op?

Helaas ondersteunen nog niet alle browsers HTML 5. FindMeByIP zette de browsermogelijkheden eens op een rijtje. De meeste functionaliteiten zijn beschikbaar via Chrome en Safari. Firefox komt nog iets te kort op het gebied van CSS3.  Internet Explorer 8 (en <) heeft de trein helemaal gemist. IE ondersteund bijna geen enkel nieuwe feature van HTML5. Maar daar komt met IE 9 (volgens Microsoft) verandering in. Helaas surfen de meeste gebruikers nog altijd met Internet Explorer (zie blog bericht: Browser mogelijkheden). We zullen nog even moeten wachten om HTML5 in de praktijk te gebruiken.

Van zodra de browsers dit ondersteunen zullen webdesign trendsetters, fora en JavaScript libraries zoals JQuery en Prototype zich hier ook meer op concentreren. Dit zal het implementeren van nieuwe features vereenvoudigen. Met als logisch gevolg dat er een snelle boost zal volgen van HTML5.

Ik heb zelf eens geëxperimenteerd met enkele basis html5 mogelijkheden. Je kan zonder veel moeite vernieuwende features maken. Er zijn ook al tal van voorbeelden online te vinden. Enkele voorbeelden:

• http://www.webatvantage.be/Tutorials/html5/
• Door middel van de cavas tag kan je een 3-D tetris game maken
• Nee dit is geen flash, maar javascript!
• Safari heeft enkele spectaculaire applicaties gemaakt om HTML5 (en Safari) te promoten.

Heb je zelf een HTML5 applicatie gemaakt? Of heb je een spectaculair voorbeeld online gevonden? Deel ze dan zeker met ons via een reactie!

Hoe schat je de overlevingskansen van flash in eenmaal html5 geïntegreerd is?

Vanaf wanneer zou jij HTML5 integreren op je website?