a&m impact internetdiensten

Woensdag 25 mei reisde ik weer af naar Utrecht. Dit keer voor de cursus praktisch HTML5. Deze cursus werd gegeven door Peter Beverloo. Peter werkt bij Google en ontwikkelt mee in het Google Chrome team. In deze cursus werd uitgebreid kennis gemaakt met HTML5. En vooral wat HTML5 voor het dagelijkse werk gaat betekenen. Maar wat is HTML5 nu eigenlijk. HTML5 is de nieuwe aankomende web standaard. Met veel nieuwe mogelijkheden, zoals video’s, animaties, offline opslag en veel meer. HTML5 werkt alleen in moderne browsers. (Internet Explorer 9, Firefox, Chrome).

De cursus begon met een lesje geschiedenis. Er werd verteld hoe HTML vroeger begonnen is. Maar belangrijker hoe HTML5 is ontstaan. Er werd dieper ingegaan op wat HTML5 nu precies is. Veel nieuwe mogelijkheden zijn bijvoorbeeld onderdeel van HTML5. HTML5 wordt ook als verzamelnaam gebruikt voor veel nieuwe mogelijkheden. HTML5 is nog niet af. Op dit moment is er een zo genoemde “last-call”. Iedereen kan tot 2 augustus wijzigingen insturen.

Na de geschiedenis werd er dieper in gegaan op HTML5. Waaronder de semantiek, toegankelijkheid, mogelijkheden en formulieren. Met de semantiek van de website gaat veel veranderen. De semantiek is de opbouw van je pagina. Nu doen we dat veel met divs. Maar met HTML5 heb je speciale elementen voor bijvoorbeeld de header, artikel, zijbalk, footer en navigatie. Met de formulieren gaat er ook het een en ander veranderen. Er komt nu betere ondersteuning voor mobiele apparaten. Bijvoorbeeld: Als je een formulier hebt waar je een email adres moet invullen. Wanneer je dit formulier dan op een mobiel apparaat bekijkt. Zal je toetsenbord veranderen met een apenstaartje.

Paar toffe voorbeelden om te zien wat je met HTML5 allemaal kunt:
Alles is met HTML5 gemaakt en er is geen flash gebruikt. Links kun je het beste bekijken in Google Chrome.
- http://www.chromeexperiments.com/shaunthesheep
- http://www.ro.me/film
- http://mrdoob.com/projects/chromeexperiments/ball_pool/

Maar wanneer kunnen we HTML5 nu gaan gebruiken? De oudere web browsers zoals Internet Explorer 8 bieden nog geen ondersteuning voor HTML5. Maar HTML5 kunnen we al gebruiken. Er zijn manieren om voor oudere web browsers een fall-back te maken. Waardoor HTML5 websites in oudere browsers er ook goed uit zien.

Ik kan niet wachten om HTML5 in de praktijk toe te gaan passen.  Zeker weer een waardevolle dag geweest!

Onlangs hebben Rob Lohman en ik een interne presentatie gegeven over de nieuwe mogelijkheden van HTML 5 en CSS3. Dit is een nieuwe versie van de bestaande HTML en CSS, die een aantal leuke nieuwe features bied. We hebben onder andere de onderstaande punten behandeld:

Video en Audio

Het wordt mogelijk video en audio af te spelen met HTML, zonder de tussenkomst van plugins als Media Player, Quicktime of Flash. Voordeel is dat iedereen deze dan af kan spelen, en het daarmee dus heel toegankelijk wordt.  Een groot nadeel is dat de browsers onderling in de clinch liggen over welke codec ze nu moeten gaan ondersteunen. Daardoor moet er voor Mozilla een ander bestand dan voor Webkit aangeleverd worden. Meer informatie en een voorbeeld.

LocalStorage en SessionStorage

Deze twee functies zijn eigenlijk de nieuwe cookies. Hiermee kan meer data dan een cookie opgeslagen worden, en wordt het makkelijker om deze te gebruiken in je javascripts. Een klein nadeel is dat gebruikers deze aan moeten zetten, en niet zoals cookies dat ze standaard aan staan.

Semantische tags en attributen

Er worden een aantal nieuwe tags en attributen toegevoegd waarmee de code semantisch opgebouwd kan worden, en er meer meta data aan elementen gegeven kan worden. Dit is handig om data in de pagina te stoppen voor de javascripts, maar ook erg goed voor zoekmachines als Google. Deze kan zo nog meer uit de pagina halen, en duidelijker zien wat een navigatiebalk is, en welke data bij elkaar hoort.

Canvas

Het tekendoek van HTML. Met een uitgebreide programmeer API kan hier in 2D en 3D (nog in ontwikkeling) op getekend worden. Dit kan van kleine tekeningen (handtekening bijvoorbeeld), tot complete spellen. Meer informatie en een aantal voorbeelden.

Formulieren

Er zijn een flink aantal nieuwe formulier elementen ontwikkeld die het voor de gebruiker en ontwikkelaar een stuk makkelijker maken. Zo zit er standaard een datum veld in, waardoor niet meer de datum ingetypt hoeft te worden, maar dit gekozen kan worden in een kalender. Doordat deze door de browsers geïmplementeerd worden werkt dit overal op dezelfde manier, en kan de gebruiker overal op dezelfde manier hiermee werken.

GeoLocation

Hiermee kan de locatie van de gebruiker opgevraagd worden, mits deze daar toestemming voor geeft. Dit kan handig zijn voor bijvoorbeeld een mobiele webapplicatie met een navigtatie systeem erin. Met GeoLocation is dan de exacte positie, hoogte en kijkrichting van de gebruiker op te vragen.

…vervanger voor Flash?

De laatste tijd is er veel rumoer op het internet over dat HTML 5 de vervanger gaat worden van Flash. Apple is hier mee begonnen door op zijn iPhone geen ondersteuning te willen bieden voor Flash, omdat zij beweren dat hetzelfde bereikt kan worden met HTML 5. Andere browser bouwers zijn het hier mee eens, en het lijkt erop dat Adobe Flash een beetje in een hoek gedreven is.

Voorlopig zitten we nog wel met Flash, aangezien veel browsers nog niet veel van HTML 5 geïmplementeerd hebben (mede omdat het nog niet af is!), en een groot deel van de internetters nog met oude versies van browsers surfen, waardoor er sowieso een Flash applicatie gemaakt moet worden om ondersteuning te bieden voor alle bezoekers.