Webtaal op de snijtafel

Zoekmachines, mobiele apparaten en behoefte aan interactiviteit zijn de drijvende krachten achter een nieuwe versie van de webtaal html, die nog volop in ontwikkeling is, maar deels ook al ingevoerd. De nood is hoog.

Veel mensen weten dat de postbode van internet, IPv4, een protocol uit de jaren zeventig is dat met lapmiddelen in de lucht gehouden wordt, omdat de overgang naar IPv6 zo traag verloopt. Minder bekend is dat de taal waarin webpagina’s geschreven wordt, html versie 4, ook alweer vijftien jaar oud is – en piept en kraakt dat het een lieve lust is.

Html4 vertelt browsers hoe ze de webpagina moeten tonen. Naast de inhoudelijke elementen (tekst, links en plaatjes) bevat een webpagina codes die iets zeggen over de ordening van de elementen op site. Moderne, interactieve websites willen echter meer. Bijgevolg ontstaan allerlei non-standaard toevoegingen.

Facebook, bijvoorbeeld, heeft het open graph protocol (ogp) opgesteld om websites in staat te stellen hun content eenvoudig deelbaar te maken. Ook Twitter maakt gebruik van ogp. Google heeft een manier ontwikkeld om auteurs van pagina’s zichzelf te laten identificeren, vanuit de gedachte dat een pagina met een herkenbare auteur gemiddeld waardevoller zal zijn dan een anonieme pagina. Bij sommige zoekresultaten toont Google nu een fotootje van de auteur.

Wanneer iedere internetgrootmacht zijn eigen dialecten gaat creëren, wordt de webtaal op den duur onwerkbaar. Onder de vlag van html5 zijn dan ook diverse bewegingen ingezet om de behoeften van het moderne web in een nieuwe standaard te vangen. Er is een aantal aanjagers.

Zoekmachines

Over de inhoud zegt html4 niets – of, bijna niets: de zogeheten meta-tag stelt paginabouwers in staat de belangrijkste trefwoorden op te sommen, maar daar valt zo makkelijk misbruik van te maken dat zoekmachines er weinig aan hebben.

Zoekmachines als Google en Bing moeten dan ook steeds ingewikkelder analyses toepassen om kwalitatief goede en relevante webpagina’s uit de enorme hoeveelheid rotzooi te filteren. Het zou fijn zijn als de bouwers van webpagina’s daarbij een handje hielpen door hun pagina’s sterker te structureren.

Het deel van html5 dat hiervoor zorgt, is voor de websurfer goeddeels onzichtbaar. Bouwers van websites zullen meer structurele informatie in hun webpagina’s moeten stoppen. Dat lijkt extra werk, maar schijn bedriegt. Veel van die informatie (zoals de titel van de pagina, de publicatiedatum, de auteur) is al aanwezig in het content management systeem (cms) dat gebruikt wordt om de website te beheren. Wanneer het cms een webpagina aflevert, valt die informatie echter weg, omdat html4 geen standaard biedt om haar mee te sturen. Zoekmachines moeten dan aannames doen: de titel is waarschijnlijk de tekst met grootste lettertype, maar is het tekstje meteen daarna de samenvatting of een biografietje van de auteur?

Mobiele apparaten

Toen html4 bedacht werd, belandden webpagina’s op een scherm van doorgaans 1024 pixels breed. Veel sites hebben daarom nog steeds een vaste breedte van maximaal 1000 pixels, maar de realiteit is een wildgroei aan schermformaten. Daardoor is de eerste noodoplossing – een speciale mobiele site voor smalle schermen – ook niet meer werkbaar. Html5 biedt de mogelijkheid om een site zo te ontwerpen dat pagina’s zich automatisch aanpassen aan het apparaat.

De tweede noodoplossing, apps, is vermoedelijk een langer leven beschoren, al was het maar omdat Google en Apple er een fijn verdienmodel aan hebben. In principe biedt een volgroeid html5 echter een platform met dezelfde mogelijkheden als apps, maar dan binnen de browser.

Een andere overweging is het energieverbruik. Ontwikkelaars gebruiken nu vaak programmacode (javascript) om grafische effecten te bereiken. Dat is niet efficiënt. Als browsers meer effecten van zichzelf ondersteunen, maakt dat de presentatie van websites sneller en zuiniger.

Interactiviteit

Een gewone webpagina wordt één keer opgediend door het cms. Gebruikers verwachten tegenwoordig echter dynamische pagina’s. Als de website van de krant open staat, bijvoorbeeld, moet die zelf continu controleren of er laatste nieuws is. Als iemand een ‘like’ uitdeelt op Facebook, moet dat onmiddellijk op de site zichtbaar zijn.

Ook hiervoor geldt dat ontwikkelaars dit nu met javascript realiseren. Maar als het standaard in html5 zit, maakt dat het leven stukken eenvoudiger. Hoe beter de webtaal, hoe meer tijd er overblijft voor de creatie van aantrekkelijke content.


Kleine gids tot html5

Html5 is in de praktijk een parapluterm voor een aantal verwante ontwikkelingen, die samen moeten leiden tot efficiëntere webpagina’s. Een klein overzicht.

Html5
De kern van de webtaal is de definitie van de ‘tags’ die structuur geven aan webpagina’s. De voornaamste verandering in html5 is de toevoeging van tags die iets zeggen over de inhoud. Zo komen er bijvoorbeeld tags die een plaatje en zijn onderschrift aan elkaar koppelen, die de hoofdtekst op een pagina aanduiden en die aangeven welke links de navigatiestructuur van de site vormen. Dit maakt het voor zowel browsers als zoekmachines eenvoudiger om een pagina ‘te begrijpen’.
Daarnaast definieert html5 een groot aantal application programming interfaces (api’s). Dit zijn toegangspoorten tot specifieke toepassingen. De geolocatie-api, bijvoorbeeld, legt vast hoe om te gaan met geografische informatie. Zo kan een webontwikkelaar een pagina maken die rekening houdt met de locatie van de gebruiker, zonder diens browser en gps-ontvanger te kennen.

Css3
Cascaded Style Sheets (css) bevatten de opmaakaanwijzingen van een webpagina. In een css-bestand staat bijvoorbeeld welke kleur links hebben en hoe breed de kolommen op de pagina zijn. Css3 ondersteunt diverse effecten (schaduwen, animaties) waar nu nog programmeerwerk aan te pas komt, dat lastiger is voor de ontwerper en minder efficiënt voor de browser.

Media query’s
Het gewenste uiterlijk en gedrag van een webpagina kan afhangen van het gebruikte apparaat. Op een groot scherm kan een website bijvoorbeeld drie kolommen naast elkaar hebben, terwijl op een smartphone alles in één kolom onder elkaar moet komen. Media query’s bevragen het apparaat en besluiten op basis daarvan welke css van toepassing is. Grote open vraag: hoe om te gaan met aanraakschermen? Traditionele websites vertonen gedrag als je met de muis ergens overheen gaat, maar bij een aanraakscherm werkt dat niet. Er wordt nog gewerkt aan een uniforme standaard voor alle vormen van aanwijzen.

Microdata
Html5 voegt al een aantal tags toe die iets over de inhoud van de pagina zeggen, maar de api voor microdata gaat een stuk verder. Hiermee kunnen stukjes informatie zeer specifieke tags meekrijgen, zoals naam, adres en telefoonnummer, maar ook filmtitel, regisseur en hoofdrolspeler. Deze api wordt aangejaagd door schema.org, een samenwerkingsverband van de grootste zoekmachines.

Browser compatibiliteit
De html5 standaard wordt pas in 2014 definitief. Ondertussen implementeren browsers al diverse onderdelen van de nieuwe standaard. Met name verschillende implementaties van css3 maken dat een webpagina er in de ene browser anders uit kan zien dan in de andere. Het grootste probleem vormen de vele gebruikers die vasthouden aan Windows XP en daarbij surfen met Internet Explorer. Die combi gaat niet samen met html5.

Geschreven voor Technisch Weekblad