Contacteer ons op +32 2 306 02 11 of mail ons op info@desk02.be
HTML5
HTML5 is regelmatig in het nieuws de laatste tijd, Google met de aankondiging dat ze Google Gears laten vallen ten gunste van HTML5, Scribd die aankondigt dat ze Flash laten vallen voor HTML5, YouTube die een HTML5 gebaseerde videospeler bouwt en Microsoft die hun steun bevestigen voor HTML5.
Ook bij Desk02 zijn we al een tijdje bezig met HTML5 & geven we hieromtrent ook opleidingen. HTML5 omvat vele zaken maar er zijn, voor mij persoonlijk dan, toch enkele uitschieters dewelke ik in deze blogpost bondig & eenvoudig ga proberen uitleggen, voor meer gedetailleerde info kan je altijd terecht in de HTML5 specificaties.
(Zeer) korte introductie
HTML5 is de recentste grote revisie van HTML (daar je dit aan het lezen bent ga ik er van uit dat je al enigszins vertrouwd ben met HTML). De specificaties werden voor het eerst opgesteld in 2004 door de Web Hypertext Application Technology Working Group (WHATWG) en zeven jaar later zijn ze nog steeds in de "Working Draft" Status.
Dit is om verschillende redenen:
- Traditioneel beweegt het W3C (deze zijn in 2007 samen met WHATWG aan de specificaties beginnen werken) zich zeer langzaam, en
- HTML5 is een ambitieus project waar vele nieuwe onderdelen geïntroduceerd worden.
Dit wil dus niet zeggen dat je HTML5 nog niet kan gebruiken, verscheidene elementen uit de specificaties worden momenteel al ondersteund door de grote browsers. (Je kan snel zien welke elementen jouw browser ondersteunt door een bezoekje te brengen aan http://html5test.com/).
Nieuwe (structurele) HTML5 tags
De specificaties introduceren verschillende nieuwe tags waaronder enkelen voor het logisch structureren van documenten. Deze nieuwe structurele tags moeten/gaan het gebruik van de <div> tag voor het structureren van documenten drastisch verminderen. Goed gebruik van deze tags zal documenten een semantische meerwaarde geven.
- <section> gebruik je voor het verdelen van een document in logische secties
- <header> vertegenwoordigt de hoofding van een sectie binnen het document en is dus verschillend van de <head>-tag dewelke een HTML hoofding is
- <footer> vertegenwoordigt een voettekst van een sectie
- <aside> vormt een "gerelateerde" sectie, maar staaat voor de rest los van het document
- <article> is een sectie binnen een document die als hij uit de context van het document gehaald wordt nog op zichzelf staat (lees: logisch is).
Een mooi voorbeeld van een typisch <article> element zou een nieuwsbericht zijn op een website
Los van bovenstaande tags zijn er nog veel meer tags bijgekomen (& verwijderd), voor een volledig overzicht verwijs ik jullie graag door naar http://www.w3schools.com/html5/html5_reference.asp.
Nog een bemerking die ik hier wil meegeven is dat het binnen HTML5 perfect mogelijk is om per sectie (binnen een document) een <h1> header tag te hebben, en het dus geen probleem is om meerdere <h1>'s te hebben op één pagina, wat dan weer drastische veranderingen met zich zal meebrengen in de wereld van de zoekmachine optimalisatie (SEO). (Evenals in de ranking algorithmes van de zoekmachines.)
Geoloaction API
De Geolocation API zorgt ervoor dat je je locatie kan delen met websites. Onder andere de latitude en de longitude coördinaten worden voor Javascript beschikbaar gemaakt binnen de pagina, deze code kan dan de coördinaten terugsturen naar de webserver om er ‘location-aware’ zaken mee te doen zoals het vinden van vrienden in je nabijheid, het opzoeken van lokale bedrijven of het pinnen van je locatie op een kaart (bv. Google Maps).
Deze Geolocation API wordt momenteel al ondersteund door de meeste desktop browsers en mobiele toestellen (iPhone, HTC Smartphones, ...). Enkele bekende voorbeelden van bekende websites die gretig gebruik maken van de geoloaction API zijn:
In de toekomst toe gaan we nog een pak applicaties zien opduiken die gebruik maken van deze API voor allerhande toepassingsgebieden (zo durf ik een zeer mooie toekomst te voorspellen voor 'location based promotions'). Bij de marketeers van deze wereld moeten ondertussen ook al wat belletjes aan het rinkelen gaan omtrent de mogelijkheden van deze Geolocation functionaliteiten. En zoniet, contacteer ons!
HTML5 video
De HTML5 <video> tag werd geïntroduceerd in de HTML5 specificaties met als doel het afspelen van video’s of films. Momenteel is het op het internet nog de Adobe Flash Player die op grote schaal gebruikt word voor het ‘embedden’ van video maar meer en meer websites (o.a. youtube) stappen over op het <video> element. (Momenteel meestal met een fallback naar de Adobe Flash Player in geval van niet ondersteuning van de <video> tag door de gebruiker.)
HTML5 video heeft de intentie om de nieuwe standaard te worden op het web voor het afspelen van video bestanden. Spijtig genoeg wordt de grote doorbraak, momenteel, nog belemmerd door inconsistenties bij de ondersteuning van de verschillende bestandsformaten in de video tag.
De HTML5 specificaties specifiëren niet welke video formaten dienen ondersteund te worden door de verschillende user agents (browsers). Als dit probleem van de baan is (kortom als er een videoformaat ondersteund zal worden door alle browsers!) zal het integreren & afspelen van videobestanden op het internet grote veranderingen ondergaan.
Besluit
Buiten de enkele functionaliteiten hierboven kort aangehaald zijn er nog tal van fascinerende zaken binnen & rond de HTML5 specificaties zoals:
- drag & drop API
- history API
- local Storage API
- web workers API
- web sockets API
- offline application API
- inline editing API
- enz.
Veel te veel om nu allemaal te bespreken maar naargelang hun ondersteuning vordert in de belangrijkste browsers fantastische tools om te beginnen gebruiken in de websites & applicaties die we voor onze klanten ontwikkelen.
Het mag duidelijk zijn dat de verdere opmars van HTML5 grote veranderingen op het internet met zich mee zal brengen (en al brengt) en dat wij als webdesign bureau op de eerste rij zitten!
Deel dit artikel:
Meer informatie?
- Bel ons op 02/306.02.11,
- vul het contactformulier in
- of mail naar info@desk02.be.
Gorislaan 49,
1820 Steenokkerzeel - België
BE 0873.618.820
Tel +32 2 306 02 11
E-mail: info@desk02.be
© Desk02 • Sitemap
Reacties
Nicky
51 weken geleden ...
HTML5 ziet er inderdaad zeer belovend uit. Het is echter weer wachten op de gebruikers die hun browser updaten. Nog steeds zijn er gebruikers die IE6 gebruiken...Er zou ook een soort van samenwerking moeten zijn tussen de browsers zodat iedere browser telkens aan een minimum moet voldoen, op dit moment ondersteunene de nieuwste browsers wel HTML5 maar den weer niet alle onderdelen...
Bart Haedens
51 weken geleden ...
Klopt, je kan wel al verschillende onderdelen gaan gebruiken met de nodige fallback content voor oudere browsers natuurlijk.
Remy Sharp heeft daar een mooie term voor 'polyfilling'.
"Polyfilling is a shim that mimics a future API providing fallback functionality to older browsers."
http://remysharp.com/2010/10/08/what-is-a-polyfill/
Christiane Peschen
13 weken geleden ...
Ziet er inderdaad veelbelovend uit.
Spijtig dat er nog altijd geen uniformiteit is tussen de verschillende browsers en versies.
Nieuwe reactie inzenden