Na lang wachten wordt HTML 5 de nieuwe standaard in HTML. De meeste browsers zoals Firefox en Chrome kunnen er inmiddels al enigszins mee uit de voeten. Dit gegeven op zich zal de gemiddelde internetgebruiker ongemoeid laten, maar zonder dat je het misschien bewust doorhebt zal iedereen binnen 2 jaar volop genieten van de nieuwe mogelijkheden die deze update met zich meebrengt. HTML is namelijk het hart van iedere website, een hart dat ernstig aan vernieuwing toe was (HTML4, de vorige grote versie, is inmiddels alweer 13 jaar oud). Waarom is de nieuwe HTML-versie zo interessant? Wat kan het precies? Deze vragen leidden bij mij tot het schrijven van dit artikel.
In 1997 kwam HTML4 uit. In 1999 kwam er een aangepast versie uit met als versienummer HTML 4.01. Toen kwam een jaar later ineens XHTML uit. Dit werd heel populair en werd verder ontwikkeld tot er in 2002 versie XHTML 2 uitkwam.
XHTML heeft toch wat problemen met verschillende browsers gehad omdat er maar weinig websites echt XHTML valide waren en traag reageerden. Ook was er geen backwards compatibiliteit voor oudere browsers, waardoor de websites het in de oudere browsers niet goed ‘deden’.
Wat kan HTML5?
Er komen een paar nieuwe functies aan voor browsers die HTML 5 ondersteunen.
- Semantische tags – handig zodat ook machines de webpagina makkelijker kunnen lezen.
- Geolocatie – de browser kan, mits je dat zou willen, je locatie zien
- Formulier verbeteringen – handig om bijvoorbeeld een kalender of zoekveld binnen een formulier te integreren
- Audio / Video ondersteuning – geen zware Flash Video conversies meer nodig
- Canvas – handig voor het tonen van verschillende lettertypen en het laten tekenen van vormen, grafieken, animaties en verschillende composities op je pagina.
- ContentEditable – gebruikers kunnen gemakkelijk plaatjes, links en andere uitgebreide toevoegingen doen
- Drag and Drop – hiermee is het mogelijk om elementen binnen pagina’s te verplaatsen, zoals tekst, hyperlinks, afbeeldingen, audio of video.
- Persistent Data Storage – een nieuwe vorm van een cookie, een brokje gegevens dat de browser achterlaat op de cliënt op bijvoorbeeld bij te kunnen houden hoe vaak je op een pagina bent geweest.
HTML5 in het huidige web
Om te beginnen heb ik een leuk voorbeeldje van de Semantische tags (http://www.alexanderinteractive.com/entries/semantic.html) waar op het eerste gezicht weinig te zien lijkt. Bekijk de broncode en je ziet wat anders!
Om Geolocation te demonstreren heb ik een pagina gevonden (http://html5demos.com/geo) die niet veel meer dan dit doet. De browser zal uiteraard vragen of je het ermee eens bent je locatie te delen. Gek genoeg dacht de browser dat ons kantoor op de Nieuwezijds Voorburgwal zat.
De Formulier verbeteringen (http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-03-form-enhancements.html) zijn vooralsnog slechts met Opera te bekijken
Audio en video demonstraties (http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-05-video-demo.html) (http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-04-audio-demo.html) zijn volop te vinden. Vooral bij YouTube is het resultaat goed te zien. Als YouTube wordt bezocht via bijv. Chrome, springt gelijk de HTML5 versie naar voren.
Het canvas is eigenlijk niet meer dan een tekenvel dat onder gekliederd kan worden. Dit natuurlijk niet door Jan Alleman maar slechts door bekwame programmeurs (http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-06-canvas-demo.html) die dit vlak pixel-voor-pixel kunnen opbouwen. Dit biedt onder meer uitkomst voor websites die zich niet willen binden aan de standaard lettertypen die tegenwoordig beschikbaar zijn binnen web-browsers.
Content Editable is de mogelijkheid tekst te bewerken aan de voorkant van de website. (http://html5demos.com/contenteditable) Dit wordt dan opgeslagen d.m.v. Persistent Data Storage.
Drag & Drop is een leuke functie zoals we die kennen uit Windows, Mac OSX of sommige webapplicaties. Voorheen moesten die webapplicaties geprogrammeerd worden, maar nu (http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-08-draganddrop-demo.html) zal dat een stuk makkelijker worden.
Persistent Data Storage is handig om bepaalde gegevens op te slaan zoals in dit voorbeeld (http://jsbin.com/iqura/4/) wordt gedemonstreerd. Hier kan een simpel todolijstje worden bijgehouden zonder tussenkomst van een Database.
Wat doet Occhio ermee?
Zoals dit artikel al aangeeft houdt Occhio de ontwikkeling en mogelijkheden van HTML5 nauw in de gaten. Wij doen er alles aan om ons team volledig up-to-date te houden van alle programmeertrends op het web, dus HTML5 heeft onze volledige aandacht. Door de grote verschillen in ondersteuning door browsers zullen wij hier echter voorlopig nog niet veel op grote schaal mee doen, totdat de het gros van de browsers om is. Pas als Internet Explorer 9 (2011 verwacht) zijn voorganger verdreven heeft, zullen we echt goed gebruik van HTML5 kunnen maken; nog even wachten dus.
Greetings Is fantastic submit additionally it was so educational and that i in the morning definetly able to save it all. Prepared to say the Advanced investigations this info has is normally really impressive.What person flows that extra mile right now? Well Done. Yet another hint most people canget the latest Translator for a World-wide Traffic !