Mobypicture gebruikt al HTML5, waarom jij nog niet?

HTML5 is een buzz-word aan het worden voor alles wat hip en happening wordt op het internet. HTML5 is de sky en de limit lijkt het wel. Er zijn echter maar weinig mensen die het al toepassen. Reden genoeg om toen Adobe me uitnodigde een presentatie te komen geven op de Adobe Usergroup XL conference het te gaan hebben over HTML5 en CSS3.

In tegenstelling tot de meeste HTML5/CSS3 verhalen heb ik geprobeerd zo min mogelijk code te gebruiken en vooral geprobeert mijn enthousiasme voor HTML5 en CSS3 over te brengen. Het is dus ook voor niet technische mensen goed te begrijpen.

[slideshare id=5811650&doc=aug2010-mobyisalreadyusinghml5-101117100959-phpapp01]

De gehele presentatie is ook terug te zien in een 45 minuten durende video, met dank aan Adobe.

W3C sputtert tegen

Onder het motto ‘Mobypicture is already using HTML5 and so can you’ sprak ik 45 minuten over de dingen die al wèl kunnen met HTML5 en CSS3 in tegenstelling tot wat er allemaal nog niet kan.

Despite the hype, the HTML5 specification isn’t yet ready due to interoperability issues

It’s a little too early to deploy HTML5 because we’re running into interoperability issues

Zomaar twee opmerkingen van het W3C, dat bijna wanhopig probeert te voorkomen dat we alvast HTML5 gaan gebruiken of door browsers geïmplementeerd gaat worden. Een aantal jaren geleden zag de support er somber uit, maar tegenwoordig is dat een heel stuk beter:

Om de argumenten om HTML5 nog niet te gaan gebruiken verder te ontkrachten; de release candidate van CSS2.1 was 2009. Als we tot 2009 hadden gewacht met het beginnen te implementeren van CSS2.1, was het web nu een stuk primitiever geweest. De Release Candidate van HTML5 is 2012, dan zullen de specs niet meer gaan veranderen en kunnen browsers ‘veilig’ verder met hun implementatie. Gelukkig zijn de meeste browser fabrikanten al druk bezig met HTML5 en CSS3 en kunnen wij er al goed mee aan de slag.

Wie gebruikt het al?

Niet alleen Mobypicture werkt al met HTML5, ook andere grote namen in de social media wereld als Facebook en Twitter maken al gebruik van verschillende onderdelen. De nieuwe website van Twitter (#newtwitter) is in de HTML5 syntax geschreven met daarbij on andere de Geolocation API van HTML5 om van gebruikers de locatie te bepalen. Facebook is een van de koplopers met implementaties van HTML5 video, de History API, de Geolocation API (voor Facebook Places) en het experimentele Websockets om de chat beter te laten werken. Youtube en Vimeo experimenteren ook al met HTML5 video.

Historie van (x)HTML

De ontwikkeling van HTML ging in het begin van het commerciële internet – vanaf 1994 – vrij hard met 4 versies in 4 jaar. In 2000 kwam de eerste versie van het huidige XHTML uit met als doel HTML te vervangen door XML. Na 2001 begon het W3C te werken aan XHTML2 wat niet backwards compatible zou zijn met XHTML 1.x of HTML en een strikte error afhandeling zou hebben. Momenteel worden fouten in een webpage door de browser zo goed mogelijk gecorrigeerd, maar dat zou niet langer de bedoeling zijn.

Er kwam echter veel protest uit de hoek van onder andere de browser fabrikanten en er werden twee losse werkgroepen opgezet die in zouden gaan spelen op de nieuwste ontwikkelingen op het ondertussen sociale web en het ontstaan van de eerste web apps.

De werkgroepen heetten niet geheel onlogisch ‘Web Forms 2.0’ en ‘Web Apps 1.0’. De huidige HTML5 standaard is hier een afgeleide van, nadat ook het W3C zag dat de support voor XHTML2 zo laag was dat doorgaan geen zin meer had.

HTML5 is in tegenstelling tot XHTML2 geheel backwards compatible met XHTML en HTML.

De syntax van HTML5 is vrij gelaten. Waar lowercase en een self-closing tag (de befaamde /> aan het einde van sommige tags) in XHTML verplicht waren is alles geoorloofd in HTML5. Persoonlijk vind ik dit een slechte zaak. Als developer vind ik dat een taal een syntax heeft en deze moet worden nageleefd. Taal heeft tenslotte ook grammatica en een juiste spelling. Zonder dat zou iedereen maar doen wat hem of haar goeddunkt. En dat sied er nied uit tog?

HTML5 is simpeler

HTML5 is vooral ook veel simpeler. Ik ken niemand die de volledige <html> tag met alle declaraties of de <doctype> uit zijn hoofd kent. In HTML is het zo simpel als <html> en <!doctype html>. Dat is zo simpel dat ik het zelfs voor deze blogpost niet meer hoef op te zoeken. Ook de rest van de tags in de Head zijn versimpeld, zoals de <script> tag om Javascript mee  in een webpagina te laten. Geen charsets of type’s meer, enkel de file in het src atribuut.

HTML5 API’s

Er zitten vrij veel Javascript API’s in de HTML5 standaard. Voordat je je nu al te erg afvraagt waarom er Javascript API’s in een HTML standaard zitten, denk nog even terug aan hoe het begon: Met de werkgroepen Web Forms 2 en Web Apps 1. De laatste is verantwoordelijk voor alle mooie Javascript API’s.

De mooiste toevoeging is verreweg de mogelijkheid om video native af te spelen in de browser. Geen Flash meer nodig! Sinds het in de tweede helft van de jaren negentig van de vorige eeuw (!) als mogelijk was om plaatjes native in een browser te tonen, is het gek dat het 25 jaar heeft geduurd voordat hetzelfde mogelijk is geworden met video en audio. Door middel van de <video> en <audio> tag kun je nu eenvoudig video en audio bestanden opnemen in een website. Er is echter één probleem.

Codecs. In tegenstelling tot plaatjes, die in een veelvoud van formaten te bekijken zijn -van JPG, tot GIF en BMP tot PNG – werken de meeste browsers maar met eeeen of twee codecs voor video en audio. Er is daardoor een tweedeling ontstaan tussen Safari en Internet Explorer aan de ene zijde die MPEG-4 video en MP3 audio ondersteunen en Firefox en Chrome aan de andere zijde die enkel de Open Source codecs Ogg Theora voor video en Ogg Vorbis voor audio ondersteunen. Ik hoop echt dat dit snel wordt opgelost. Helaas heeft Chrome enkele weken geleden zijn support voor h264 terug getrokken en kijken we waarschijnlijk nog jaren lang naar video in Flash. Wat in 2011 natuurlijk van den gekke is dat zoiets simpels als audio en video niet goed in de browser zelf geregeld kan zijn.

In de presentatie bespreek ik nog de Geolocation API waarmee het mogelijk is om de positie van gebruikers door middel van de browser te bepalen en vertel ik een leuke annekdote over inline editiong en IE 5.5.

HTML5 Forms

Het mooiste van HTML5 vind ik misschien wel de Forms. In tegenstelling tot de saaie tekst, select, radio button en checkbox is er een hele reeks bijgekomen. Van range, email, url, date tot mijn favoriet de color picker.

Helaas ondersteunt enkel Mobile Safari de email, url forms, waarmee ze automatisch de @ en de .com in beeld brengen op het on-screen toetsenbord. De date picker en range worden al wel ondersteunt door de nieuwste versie van Opera. De rest nog door niemand. Hopelijk komt hier snel verandering in!

CSS3

Om deze blogpost niet al te lang te maken zal ik het stuk over CSS3 overslaan. Officieel valt CSS3 ook niet onder HTML5, maar wordt vaak uit gemak niet genoemd in de combo HTML5 en CSS3. CSS3 brengt gradients, rounded corners, drop shadows, custom web fonts en nog veel meer mooist.

Omdat je de mogelijkheden van CSS3 eigenlijk moet zien is het CSS3 onderdeel vanaf slide 64 te bekijken. Ook zonder mijn tekst of uitleg erg interessant! Ik ga dieper in hoe wij ons nieuwe Mobypicture design met zo min mogelijk plaatjes opbouwen, inclusief prachtige buttons en menu’s.

Tools

Het lastige aan HTML5 en CSS3 is wel dat niet alle browsers alle features al ondersteunen. Gelukkig zijn er tools om dit te detecteren. In dit geval heb ik het niet over manieren om HTML5 en CSS3 support in oudere browsers te krijgen, dat is in sommige gevallen mogelijk, maar puur de detectie. Modernizr heeft een aantal simpele Javascript en CSS checks, waardoor je per feature kunt bepalen hoe je er mee om gaat als de feature niet bestaat. Bijvoorbeeld voor HTML5 Video:

Bij Mobypicture converteren we de video nog enkel in h264 en niet in Ogg Theora. Hierdoor kunnen alleen browsers met h264 support de video afspelen in HTML5. De eerste check kijkt of HTML5 video werkt en de tweede check of h264 wordt ondersteunt. Alleen dan tonen we de HTML5 player, anders tonene we onze oudere flash player.

In CSS werkt het bijna hetzelfde:

Modernizr zet een hele reeks classes op het HTML element. Daardoor kun je eenvoudige checks maken. In dit geval kijken we of de browser CSS3 Gradients ondersteunt en Border-Radius. Beide CSS classes moeten dan aanwezig zijn in het html element. Als er geen Border-Radius wordt ondersteunt pakken we de Submit button anders aan en tonen we bijvoorbeeld een background-image.

We moeten ons gaan realiseren dat een website er niet langer meer in alle browsers hetzelfde uit gaat zien. Door het grote aanbod aan browsers met verschillende versies, maar ook door het steeds populairder worden van mobiele devices met internettoegang. Ik probeer het altijd te vergelijken met boeken. Een pocket, paperback en hard cover zien er allen anders uit. Vaak verschilt het lettertype en het font, de kaft is anders, maar het blijft hetzelfde boek. De emotie die het boek opwekt tijdens het lezen blijft ook hetzelfde. Als je dat weet te realiseren met je websites is het niet langer erg dat een website er niet onder elke browser hetzelfde uitziet. Uiteindelijk telt de beleving.

Video

De gehele presentatie is ook terug te zien in een 45 minuten durende video, met dank aan Adobe.


We built GroundControl to execute the ideas in this article. It puts our way of working, portfolio management, and innovation accounting in one place where innovation managers and corporate startups work seamlessly together. See How GroundControl Works.