Zet je eerste stappen in HTML5

In onze artikelenreeks rond HTML5 zijn we al ingegaan op wat HTML5 nu precies is en wat de voordelen zijn. Tijd voor een meer praktische aanpak met deze snelcursus, die je helpt bij je eerste stappen in HTML5.

Nieuwe mogelijkheden

HTML5 introduceerde nieuwe tags waardoor je webpagina"s een diepere semantische structuur krijgen. De eindgebruiker merkt het verschil niet, maar het maakt de pagina toegankelijker voor zoekmachines. 

Het insluiten van video en audio beloofde met HTML5 een stuk eenvoudiger te worden, maar de patentenstrijd rond de te ondersteunen video- en audioformaten deed aanvankelijk wat afbreuk aan het verdiende succes van HTML5. De ondersteuning voor het in real time bewerken van pixelgegevens in de browser maakt het mogelijk om tekeningen zoals grafieken te genereren en te animeren. HTML5 biedt eveneens ondersteuning voor schaalbare vectorafbeeldingen (SVG) waarbij het Adobe Flash de loef afstak. Tot op dit moment zijn er echter weinig of geen visuele webeditors voor handen waarin webdesigners die niet thuis zijn in de HTML- en/of javascript-code van deze functionaliteit gebruik kunnen maken. De leercurve om dit soort functionaliteit in te sluiten is er dus zeker niet lager op geworden.

Voortaan kunnen webapplicaties ook offline opgeslagen worden. Dit biedt heel wat voordelen voor mobiele toestellen die niet steeds opnieuw de hele webpagina of applicatie moeten downloaden. Enkel wijzigingen worden uitgewisseld tussen de browser en de server.

Bovendien is HTML5 niet “klaar”, maar in een voortdurend beta-stadium. Nieuwe voorstellen voor extra functionaliteit worden ingediend zoals het uitlezen van webcambeelden en het geluid van microfoons. Je merkt het al, er staan de webontwikkelaars nog spannende tijden te wachten!

1. Nieuwe pagina-elementen

Met de markeertaal HTML bouw je webpagina"s en kan je ze eveneens aan elkaar koppelen (linken). Een browser (Chrome, Firefox, Internet Explorer, Opera, Safari…) leest die code en zet die om in een visuele weergave voor de mens. Je moet in je HTML-code precies aangeven waar een titel, alinea, link, afbeelding… of wat dan ook staat, want een browser is een stuk software en die software weet anders niet wat voor jou een titel of een alinea is.

In HTML (hypertext markup language) markeren we een element door aan te duiden waar het element begint en waar het eindigt.

Je kan aan elke element een id (eigen identiteit) geven. De naam die je aan zo"n id geeft, mag je zelf kiezen. Veel webdesigners kozen ongeveer dezelfde namen voor gelijkaardige elementen. Zo wisten ze zelf waarvoor elk onderdeel diende. Maar zoekmachines begrepen bijvoorbeeld niet waar de navigatiebalk of de eigenlijke inhoud stond omdat er geen “standaard” was.

Webontwikkelaars stelden een webpagina samen door div-elementen of andere “sectie”-elementen in elkaar in te sluiten. Elk div-element kreeg een herkenbaar id- of class-attribuut dat via CSS van een stijl kon worden voorzien. Die techniek werkt(e) goed, maar leidde in de praktijk vaak tot het opnemen van een massa div-elementen wat door critici smalend “div"itis” wordt genoemd.

In HTML5 zijn een aantal nieuwe elementen gei¨ntroduceerd. De bedoeling was om overbodige elementen weg te gooien, een aantal praktijken van webdesigners te standaardiseren, een aantal dingen te vereenvoudigen, nieuwe mogelijkheden te bieden en html beter doorzoekbaar te maken voor zoekmachines (semantische webpagina"s).  In HTML5 gebruik je nog steeds waar nodig een div-element en een id- en/of class-attribuut. Maar i.p.v. voor zoekmachines onduidelijke “div”- elementen, weten zoekmachines nu meteen waarvoor elk onderdeel dient.

Het verschil tussen beide voorbeelden is meteen duidelijk. Een zoekmachine begrijpt in het tweede voorbeeld veel duidelijker waarvoor elk onderdeel staat. Maar dat geldt ook voor een ontwikkelaar die de code van een ander bestudeert. Bovendien verdwijnt de noodzaak om aan elk element een “id” of “class” toe te kennen.

2. Nieuwe formulierelementen

In HTML5 zijn er een aantal nieuwe mogelijkheden bijgekomen voor het opbouwen van formulieren. Over het algemeen gaat het over nieuwe attributen en variaties op het tekstveld (invoerveld). Niet alle browsers herkennen deze nieuwe invoervelden. Een browser die bijvoorbeeld het type “datetime” niet herkent, zal het renderen als een normaal tekstveld. Als ontwikkelaar moet je er steeds rekening mee houden dat de gebruiker moet kunnen terugvallen op een alternatief.

HTML5 voorziet in deze nieuwe invoervelden en bijhorende attributen, maar vermeldt niet wat browsers met die invoervelden en attributen moeten doen. Browserproducenten zijn dus relatief vrij in hun keuze. Het doel van deze nieuwe formuliervelden en attributen is ontwikkelaars een hoop scriptingwerk te besparen. Tot nog toe werd voor bijvoorbeeld validatiefuncties javascript ingezet. Wanneer de browser dit werk zelf voor zijn rekening neemt, dankzij eenvoudig aan te brengen attributen, bespaart het enorm veel ontwikkeltijd bij het bouwen van een webapplicatie.

Tot de nieuwe attributen behoren onder meer: 

• color: de browser toont een kleur"picker"
• datetime: je kunt enkel een datum of tijd invoeren
• e-mail: de invoer moet een e-mailadres zijn
• month, week: de invoer moet een maand of week zijn; de browser kan een datumveld voorzien
• number: de invoer moet een getal zijn
• range: een bereik, bijvoorbeeld tussen twee getallen
• search: een zoekveld
• tel: de invoer moet een geldig telefoonnummer zijn; een mobiele telefoon kan de mogelijkheid voorzien een telefoonnummer te laten selecteren uit een lijst
• url: de invoer moet een geldig webadres zijn

3. Video en audio

Een van de belangrijkste vernieuwingen die een lans braken voor de lancering van HTML5 was de introductie van de video- en audio-tag. Toch waren het vooral die opties die heel wat stof deden opwaaien en al meteen voor enorm veel verdeeldheid zorgden. Anders dan bij een afbeelding zorgt het insluiten van video in je webpagina’s voor heel wat struikelblokken. Dat is op zich ook niet zo vreemd. De computer van de gebruiker die je webpagina bezoekt, moet de codec en het containerformaat van het audio- of videobestand kunnen weergeven. Ook al kies je voor een ‘standaard’formaat, dan nog kun je er niet van uitgaan dat iedere bezoeker het filmbestand zal kunnen afspelen. Veel hangt immers ook af van de gebruikte webbrowser en het besturingssysteem (Windows, Mac OS X, Linux, iOS, Android).

Het FLV (Flash Video)-formaat ruimde lange tijd alle concurrentie op het vlak van webvideo van de baan. Ook op YouTube was FLV heer en meester.

De nieuwe video- en audio-tag moest het mogelijk maken om video- en audiobestanden even eenvoudig aan een webpagina toe te voegen als afbeeldingen. Extra plugins zoals Adobe Flash zouden hierdoor overbodig worden. Hiervoor moeten de browsers dan wel ondersteuning voor video inbouwen waardoor ze die bestanden zelf kunnen weergeven. En hier wrong nu net het schoentje. In tegenstelling tot afbeeldingen bestaat er geen ‘standaard’formaat voor webvideo. Bovendien kunnen videobestanden ook meerdere codecs bevatten, wat de ondersteuning nog bemoeilijkte.

Groot probleem is dat de browsermakers en drijvende krachten achter het internetgebeuren het niet eens werden over de te gebruiken videocodec. Om de ondersteuning voor een aantal codecs zoals bijvoorbeeld H.264 in te bouwen, zouden browsermakers dure licenties moeten betalen. Om problemen met patenten te vermijden, wilde een aantal HTML5-ontwikkelaars kiezen voor het open source Ogg Theora.

Vreemd genoeg is de angst voor een patentenstrijd de reden waarom Apple nu net geen Ogg Theora-ondersteuning wil inbouwen in hun Safaribrowser. Bovendien zou de kwaliteit van het Ogg Theora-algoritme te laag zijn. Microsoft (Internet Explorer) hield zich lange tijd afzijdig en dat is ook wel te begrijpen. Ze ondersteunden liever hun eigen WMV- en ASF-formaten. Bovendien ondermijnde de video-tag voor een stuk de taak van hun Silverlight-plugin. De Mozilla Foundation (Firefox, Fennec) en Opera gingen wel voor Ogg Theora en wezen andere codecs zoals H.264 en WMV door de licentiekosten resoluut af.

Toen Google in 2010 het nieuwe WebM-formaat aankodigde vond er een kentering plaats. De in het formaat gebruikte videocodec VP8 werd onder een vrije licentie vrijgegeven. Mozilla en Opera ondersteunden het formaat en zelfs Microsoft ging overstag in Internet Explorer 9 als de gebruiker de VP8-codec installeert.  

Om de tegenstrijdigheden op te lossen, kunnen we fallbacks voorzien voor de verschillende browsers en platformen. Oudere browsers negeren de videotag en integreren enkel de Flashspeler.

Ook al is er geen standaardformaat voor HTML5, toch kunnen we de video-tag aanspreken als een DOM-element via javascript en er zelfs een stijl aan geven met CSS. Als de browser die eigenschappen ondersteunt, kun je CSS3-eigenschappen zoals reflecties, schaduw, transformaties enz. op de video loslaten.

4. Tekenen in de browser

Op het vlak van tekenen en vormgeving betekende de komst van HTML5 een ware revolutie. Zowel het gebruik van schaalbare vectorafbeeldingen als het bewerken en genereren van pixelafbeeldingen in de browser is nu mogelijk.

Niemand had nog verwacht dat het naar computermaatstaven oeroude SVG zou doorbreken. Scalable Vector Graphics verschillen aardig van klassieke afbeeldingsformaten zoals JPG, GIF en PNG. Een pixelafbeelding bestaat uit een “matrix” van pixels met elk een eigen kleurwaarde. Vectorafbeeldingen daarentegen bestaan uit losse of gecombineerde geometrische vormen die met een kleur, verlooptint of afbeelding worden gevuld. Omdat enkel de coo¨rdinaten en de vormen en vullingen dienen opgeslagen te worden, blijven de bestanden uiterst klein.

Een groot voordeel van vectorafbeeldingen is dat zij oneindig kunnen worden geschaald zonder kwaliteitsverlies. Het SVG-formaat slaat de informatie over de vectorafbeelding op in XML. SVG is een XML-taal, dat wil zeggen dat je een SVG-bestand ‘stand alone’ kunt gebruiken. Voor webapplicaties is dit natuurlijk niet interessant. Voor een webontwikkelaar wordt SVG pas echt bruikbaar wanneer het kan worden ingesloten in een HTML-pagina. Een SVG-bestand kan op verschillende manieren in een webpagina worden ingesloten, maar de eenvoudigste manier is via de img-tag.

Internet Explorer (en vooral de oudere versies) loopt achterop op het vlak van SVG-ondersteuning. In 1998 stelde Microsoft VML (Vector Markup Language) voor aan het W3C als een manier om vectorafbeeldingen weer te geven in webpagina’s. Het W3C verwierp het voorstel maar gebruikte het wel als inspiratiebron voor SVG. Ondanks de verwerping bouwde Microsoft ondersteuning voor VML in in Internet Explorer, lange tijd de onbetwiste marktleider in het browserlandschap.

Toch is SVG al perfect bruikbaar in alle andere browsers, ook op mobiele toestellen zoals de iPhone en de iPad. Meer nog, via enige omwegen kan SVG ook weergegeven worden in oudere browsers en in Internet Explorer. Maar hier moet je als ontwikkelaar wel je toevlucht zoeken bij javascript-gebaseerde tools. Een handige terugval-optie is SVG Web.

Door de gelijkenissen tussen SVG en VML ontstonden er al snel ‘conversie’tools en ontwikkelmethodes. Raphael.js is een compacte javascriptbibliotheek waarmee je in een wip crossbrowser vectorafbeeldingen en animaties tekent. De bibloitheek genereert met behulp van scriptingtechnieken SVG en VML. Raphael ondersteunt Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ en Internet Explorer 6.0+. Op de website vind je ronduit fantastische voorbeelden en vectoranimaties. Op de solide basis van Raphael.js steunt ook het daarvan afgeleide g.raphael.js waarmee je diagrammen en grafieken via scripting kunt genereren.

Tot voor kort was het enkel mogelijk om afbeeldingen weer te geven via de img-tag of als achtergrondafbeelding of patroon in CSS. Sinds de opname van HTML5 in de jongste generatie webbrowsers is het mogelijk om pixelafbeeldingen door de browser te laten tekenen. HTML5 introduceerde hiervoor het nieuwe canvas-element. Het canvas-element werd in 2004 door Apple toegevoegd aan de WebKit-rendering engine. Andere browserengines namen het canvas-element al snel over (Gecko in 2005, Opera in 2008). Nadat de Web Hypertext Application Technology Working Group het canvas-element standaardiseerde, werd het ook opgenomen in Internet Explorer 9.

3D-ondersteuning
Net zoals bij SVG is het mogelijk om te ‘tekenen’ binnen de afmetingen van het canvas-element. Het canvas-element  geeft uit zichzelf niets weer, maar bepaalt waar je kunt tekenen. Javascript is uitgebreid met een 2D-api die een reeks tekenfuncties bevat voor het dynamisch genereren van pixelafbeeldingen. Bepaalde elementen die je vroeger vooraf moest klaarstomen in een grafisch programma zoals Photoshop of door serverside-componenten in bijvoorbeeld PHP laten genereren, kunnen nu client side in de browser worden getekend.

De jongste generatie browsers zoals Firefox, Safari, Chrome, Opera en Internet Explorer 9 ondersteunen het canvas-element van HTML5 en de bijhorende javascript 2D-api. Dit neemt niet weg dat ook hier gebruikers van oudere versies van Internet Explorer weerom in de kou blijven staan. Explorercanvas is een javascriptbibliotheek die de functionaliteit ook naar oudere versies van IE brengt. Net zoals Raphae¨l.js maakt Explorercanvas gebruik van VML voor de rendering in Internet Explorer.

Op volledige 3D-ondersteuning zal het vermoedelijk nog even wachten zijn, maar ook dat probleem valt nu reeds te omzeilen. WebGL, de webversie van OpenGL is het nieuwe toverwoord dat de doorbraak van 3D naar het web moet forceren. De kans dat Microsoft WebGL gaat integreren in toekomstige versies van Internet Explorer is echter bijzonder klein, omdat OpenGL zelf een concurrent is voor hun huiseigen Direct3D. Ook is WebGL niet meteen het formaat waarmee je in een wip een toepassing schrijft.

Uiterst interessant is de javascript-library Three.js bedoeld als een lichtgewicht 3D engine voor beginners (dummies). De 3D-engine kan renderen naar WebGL, maar ook naar 2D (canvas) of SVG, en net die functionaliteit maakt Three. js zo interessant.

5. Webpagina"s met stijl

CSS3 borduurt verder aan het opmaakkleed van webpagina’s en heeft heel wat meer in zijn mars dan zijn ouders en grootouders. En voor wie graag loos gaat met lettertypes, is het hek al helemaal van de dam.

Ongetwijfeld zijn mediaqueries de belangrijkste vernieuwing van CSS3. In de voorganger CSS2 kon je al meerdere stijlsjablonen voor diverse mediatypes aan de webpagina koppelen zodat een pagina er anders uitzag wanneer hij wordt afgedrukt dan op het scherm. Het heeft bijvoorbeeld geen zin om een navigatiebalk af te drukken. Mediaqueries maken het mogelijk om voor elk mediatype diverse stijlen te definiëren. Op die manier kan je verschillende stijlen gebruiken op een groter beeldscherm en op een smartphone. Op een iPad kan je op die manier een andere stijl laden bij horizontale (landschap) en verticale weergave (portret).

Oudere versies van Internet Explorer (versie 6 tot en met 8) bieden geen ondersteuning voor mediaqueries. Gelukkig bestaat ook hier een oplossing voor in de vorm van een javascriptbibliotheek. Door de volgende regels in uw pagina"s op te nemen, werken de mediaqueries ook vlekkeloos samen met die versies van Internet Explorer.

<!–[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>

6. Spelen met lettertypes

Als webontwikkelaar was je vroeger gebonden aan het gebruik van lettertypes die op de meeste computersystemen standaard geïnstalleerd zijn: Arial, Comic, Courier, Times… Daarom werden titels en opschriften van links vaak vooraf als afbeeldingen aangemaakt in een beeldbewerkingsprogramma zoals Adobe Photoshop of GIMP.

De moderne generaties webbrowsers kunnen lettertypes echter ook inlezen vanaf een webserver. Dit kan op een eenvoudige manier via CSS, maar er zijn verschillen tussen de ondersteunde formaten lettertypes: ttf, otf, woff, svg… Toch moet je je als webdesigner ook hier niet door laten afschrikken. Via http://www.fontsquirrel.com/tools/webfont-generator kan je het gewenste lettertype vanaf je harde schijf uploaden. Fontsquirrel genereert in een mum van tijd een ZIP-bestand met daarin alle benodigde bestandstypes en CSS-code voor integratie in je eigen webpagina"s. Houd er echter rekening mee dat op heel wat lettertypes auteursrechten berusten. Ben je niet zeker over de eigendomsrechten van het lettertype, dan kan je een “vrij” lettertype kiezen op http://www.fontsquirrel.com/fonts/list/find_fonts of op http://www.google.com/fonts. Beide sites tonen je welke code je aan je webpagina"s en CSS moet toevoegen om de lettertypes in je eigen webpagina"s te gebruiken.