» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #153

Front-end voor back-enders - Wat bezielt die mensen van de HTML?

De laatste jaren zie je steeds meer dat de front-end van websites onder een dikke laag stof vandaan wordt gehaald. Voorheen werd lang gedacht vanuit hoe het eindproduct eruit moest komen te zien, terwijl de weg daar naar toe ondergeschikt was. Steeds meer bedrijven zien echter het nut van een degelijke front-end in, en er bestaan veel bedrijven waar de front-end apart van de back-end is georganiseerd. In dit artikel gaan we kijken naar de specifieke onderdelen van de front-end die voor ontwikkelaars van de back-end interessant kunnen zijn.

Opzet van front-end

In de front-end van een website komen we drie onderdelen tegen: structuur, opmaak en gedrag. Tot enkele jaren terug werden die drie dingen vaak op een hoop gegooid, en in één HTML-document geplaatst.

In die volgorde hoort de pagina ook opgebouwd te worden. Het is namelijk mogelijk dat de gedragslaag niet kan worden opgebouwd, bijvoorbeeld omdat iemand JavaScript uit heeft staan, of Flash niet geïnstalleerd heeft. Hierover later meer.

Structuur brengen in HTML

In HTML zijn veel zogenaamde elementen voorhanden om structuur in een pagina aan te brengen. Enkele voorbeelden zijn de elementen H1, H2 en P, die respectievelijk een kop, subkop en een alinea representeren. Maar wat dacht je van een BLOCKQUOTE om stukken tekst te citeren, of het ABBR-element om een afkorting te verhelderen? Daarnaast kan ook met behulp van attributen voor structuur in de HTML gezorgd worden. Met behulp van een ID-attribuut, kun je een naam geven aan een element. Deze naam is uniek in de pagina, zodat zowel CSS als JavaScript dit element aan kunnen roepen om er wat mee te doen. Daarnaast is er een CLASS-attribuut, die aangeeft dat een element tot een bepaalde klasse behoort.

Voorbeeld

<h1>Registreren</h1> 
<div id="username-registered" class="error"> 
<h2>Fout: gebruikersnaam bestaat al</h2> 

<p>Iemand anders heeft de door jouw gekozen gebruikersnaam 
al geregistreerd. Vul een andere gebruikersnaam hieronder 
in, en verzend het formulier nogmaals.</p> 
</div> 

De H1 zorgt voor de hoogste kop in de pagina, die aangeeft waar de hele pagina over gaat. Standaard wordt deze vet en groot weergegeven, maar met CSS is dat allemaal naar wens aan te passen. Het is gebruikelijk om het H1-element slechts eenmaal op een pagina te gebruiken. Er is namelijk maar een hoofdthema waar die pagina over gaat. Diverse user-agents kunnen de informatie die in de H1 staat gebruiken om de eindgebruiker een beter inzicht te laten geven in de pagina. Bijvoorbeeld zoekmachines, maar ook diverse browsers kunnen een inhoudsopgave genereren aan de hand van de koppen en tussenkoppen.

Het DIV-element zorgt voor een blok. Dat heeft verder geen betekenis in de pagina, maar zodra je er zinvolle attributen aan toe voegt, krijgt het element juist veel waarde. Door bijvoorbeeld alle foutmeldingen in een webpagina met de klasse ‘error’ op te maken, kan bijvoorbeeld later in de CSS aangegeven worden dat alle foutmeldingen een dikke, rode rand moeten hebben. Door het element ook een ID mee te geven, kunnen eventueel afzonderlijke foutmeldingen worden gestyled. Dit heeft wellicht niet veel nut voor foutmeldingen, maar in de praktijk wordt het veel gebruikt om blokken in de pagina te identificeren.

De H2 geeft een sectie binnen de pagina aan, in dit voorbeeld een stuk tekst waarin uitgelegd wordt wat er mis is gegaan met het versturen van het formulier. Die tekst staat vervolgens in een P-element, die aangeeft dat het een aparte alinea is. Een tussenkop H2 en nog diepere koppen als H3 en H4, gelden tot ze eenzelfde of een hogere kop tegenkomen: een H2 eindigt een voorgaande H3. Het wordt afgeraden om koppen over te slaan. Plaats dus geen  H3 na een H1 als er geen H2 tussen zit.

Door de HTML goed gestructureerd op te zetten, kunnen andere technieken als CSS en JavaScript hun werk doen met die de informatie in het HTML-document. Maar ook user-agents kunnen deze informatie gebruiken. Een zoekmachine kan gemakkelijker zien waar een pagina over gaat, en met behulp van Microformats kan een gebeurtenis of adres gemakkelijk in een agenda of adressenboek geplaatst worden.

Meer informatie over gestructureerde HTML op Naar Voren

HTML-structuur en een CMS

Nu zul je misschien zeggen: “Allemaal heel leuk dat we structuur aan moeten brengen in onze tekst, maar dat kan helemaal niet met mijn CMS!” Dat hoor ik vaker. Er zijn namelijk een heleboel content management systemen die  JavaScript WYSIWYG-editors gebruiken. Heel handig voor diegene die de tekst beheert, maar het kan funest zijn voor de structuur. Je kunt namelijk vaak allemaal fancy kleuren en stijlen aan de tekst toevoegen, zodat je zorgvuldig opgebouwde structuur verloren kan gaan. Gelukkig zijn er een paar oplossingen voor dit probleem.

Markdown

De eerste is een zeer radicale: de WYSIWYG-editor weg doen, en de gebruiker alleen platte tekst in laten voeren. Dit hoeft niet per se HTML te zijn, ook een andere opmaaktaal is mogelijk. Een voorbeeld daarvan is Markdown. Markdown kan omgevormd worden naar HTML, maar is zelf veel beter leesbaar. Als je een tekst in Markdown bekijkt, lijkt het niet alsof er codes doorheen staan, maar alsof het gewoon een net document is. Hier een voorbeeld:

Markdown voorbeeld
================== 
Dit stukje tekst is opgemaakt in *Markdown*, 
je kan het downloaden vanaf [de download 
pagina](http://markdown.org).

Dit zal een HTML opleveren, met een H1-element met daarin de titel ‘Markdown voorbeeld’, en een EM-element om het woord ‘Markdown’ te benadrukken. Naast de in dit voorbeeld gegeven mogelijkheden, kun je met Markdown lijsten, quotes, afbeeldingen, tabellen en code opmaken. Diverse vergelijkbare talen bieden ook nog andere opties.

TinyMCE

TinyMCE is een krachtige WYSIWYG-editor voor in je browser. Met diverse plugins kunnen allerlei soorten content worden bewerkt. Dit komt niet altijd ten goede van de HTML in het eindresultaat. Door met de instellingen te spelen, en diverse plugins te gebruiken, kun je zorgen dat TinyMCE minder kan bewerken.

Standaard zitten in TinyMCE opties om de tekstkleur, het lettertype en andere lay-outzaken aan te passen. Ook zit er een optie in om de HTML direct te kunnen bewerken. Ook als vanuit Word een passage geknipt en geplakt wordt zal er een heleboel extra HTML in de pagina terechtkomen. Het is mogelijk om TinyMCE zo in te stellen dat alleen bepaalde HTML-elementen en -attributen toegevoegd mogen worden. Door alleen de voor structuur noodzakelijke HTML toe te staan, levert TinyMCE geen risico meer op voor de structuur van de pagina. Het is uiteraard nog wel noodzakelijk het een en ander te controleren aan de back-end.

Structuur in je URL

Naast de structuur van de code is ook de URL van een webpagina belangrijk. Eigenlijk hoort die ook bij de front-end. De URL blijft altijd in beeld staan, en is het eerste waar een bezoeker mee te maken krijgt als hij een pagina bezoekt. Is het dan niet te veel gevraagd om de URL dan ook een zekere structuur mee te geven?

Stel, we hebben een webwinkel met tientallen producten. Al die producten staan netjes in een bepaalde categorie ingedeeld. Stel nu, dat de URL van een categoriepagina is:
http://webwinkel.tld/categories.php?id=3

Vanaf die productpagina kan doorgeklikt worden naar een pagina met meer informatie over een product:
http://webwinkel.tld/product_view.php?id=37

Je kunt aan de URL niet zien welk product getoond wordt, en ook niet in welke categorie deze staat. Door het gebruik van mod_rewrite in Apache of RewriteModule in ISS, kan de URL al omgevormd worden.  Zo zien onze URL’s van hier boven er een stuk vriendelijker uit.

Tijdens het invoeren van een product kan een zogenaamde slug voor het product aangemaakt worden. In dit geval is de slug ‘the-big-lebowski-special-edition’. Zodra een aanroep gedaan wordt,kan de slug in de URL vergeleken worden met wat in de database staat, en zo het juiste product weergeven. Bij het maken van slugs is het over het algemeen verstandiger om dashes (-) te gebruiken, in plaats van underscores (_). De dashes zijn beter leesbaar als de URL onderstreept is.

De nieuwe URL’s hebben een paar sterke voordelen. Ze zijn voorspelbaar, iemand zou ook kunnen verzinnen dat http://webwinkel.tld/boeken bestaat. Ze zijn daarnaast veel leesbaarder, en kunnen gemakkelijker onthouden worden. Ook kunnen ze beter afgedrukt worden, want mensen kunnen het gemakkelijk overtypen in hun browser. Met het oog op zoekmachines is het ook beter om URL’s op deze of een soortgelijke manier op tebouwen. Een bot weet namelijk beter wat er op die pagina te vinden is, net als wij mensen dat beter begrijpen.

Meer informatie over het herschrijven van URL’s op Naar Voren

Presentatie toevoegen

Met Cascading Style Sheets, oftewel CSS, kan aan de browser verteld worden hoe het de HTML eruit moet laten zien. Met deze layout-eigenschappen kan de algemene indeling van een pagina worden bepaald, typografie worden bepaald, en kleuren en decoratie worden toegevoegd. Omdat vrijwel alles mogelijk is op presentatieniveau met CSS, worden decoraties, lijnen, afbeeldingen voor layout-doeleinden en dergelijke niet in de HTML maar in de CSS bepaald. De HTML is schoner, omdat niet tientallen regels per pagina nodig zijn om dat ene effect toe te voegen. Bovendien kan het CSS bestand gecached worden, zodat er een enorme winst in bestandsgrootte mogelijk is.

We gaan CSS hier niet uitgebreid bespreken. Wie meer wil weten over CSS kan in andere artikelen van Naar Voren uitgebreid aan zijn trekken komen.

Meer informatie over de presentatielaag op Naar Voren

Gedrag

De laatste laag is meteen ook een laag waarbij een probleem kan ontstaan. Je kunt er namelijk niet blind vanuit gaan dat iemand over bijvoorbeeld JavaScript beschikt. Het is een fluitje van een cent om het uit te zetten, en vooral in bedrijven gebeurt het dan ook regelmatig dat alle JavaScript geblokkeerd wordt. Om een website toch voor iedereen toegankelijk te houden, is het van belang om het van JavaScript afhankelijke gedrag optioneel te maken.

JavaScript kan, zodra de pagina voldoende geladen is, kijken of alle mogelijke functies in de browser werken. Als dat zo is, kunnen de acties aan bepaalde gebeurtenissen gekoppeld worden. Dit heeft echter tot gevolg dat in de HTML ook niet bepaalde elementen, links of buttons voor moeten komen, die niet werken zonder JavaScript. Als mensen geen JavaScript aan hebben, kunnen ze klikken zonder dat het enig effect heeft. Zulke links en buttons kunnen beter door JavaScript aan een pagina toegevoegd worden. Dat doe je met de diverse DOM-functies, waarmee de structuur van een HTML-pagina veranderd kan worden.

Ook de aloude event-attributen zijn niet meer noodzakelijk in de HTML. Een functie die daarin wordt aangeroepen, zou wellicht niet eens uitgevoerd kunnen worden omdat de browser nog niet de nieuwste JavaScript functies heeft toegevoegd. Deze manier van het toevoegen van JavaScript heeft een andere aanpak nodig. Om een script toegankelijk en in de toekomst bewerkbaar te houden, zou je het op de volgende manier op kunnen zetten:

In JavaScript is het op grofweg twee manieren mogelijk om dit netjes op te zetten. De eerste is om de functies die bij elkaar horen in een JavaScript-object te plaatsen. Dit vormt een bepaalde namespace voor jouw code. Het voorkomt dat diverse scripts op een pagina met elkaar botsen en variabelen overschrijven die het andere script gebruikt. Een andere methode om gestructureerd JavaScript op te zetten is om met prototype-functies te gaan werken. Op die manier kun je object-georiënteerd werken. Beide methoden worden uitgebreider besproken in het Naar Voren-artikel Object Georiënteerd JavaScript door Vincent de Haan.

Toegankelijke JavaScript

Een ander aspect is de toegankelijkheid van JavaScript-applicaties via het toetsenbord. Wat als je een mooi, geanimeerd menu niet meer via de TAB kan bereiken? Het toegankelijk houden van JavaScript met het toetsenbord is een lastige opgave. Vaak moet een tweede versie specifiek op de toetsenbord-events worden gemaakt, die functies net anders aanroept. In een menu wil je bijvoorbeeld dat het uitklapt als je er met een muis overheen gaat, maar als je er met een toetsenbord naartoe TABt, mag hij pas uitklappen als je hem activeert door op ENTER te drukken.

Een goede eerste stap is om ervoor te zorgen dat alle informatie goed te bereiken is via het toetsenbord. Het komt vaak voor dat je na het bereiken van het menu in een zwart gat terecht komt,waar je alleen weer uit kan komen door met de muis elders in de pagina te klikken. Haal voor de gein eens de stekker van je muis eruit, en kijk welke sites (van jezelf, maar zeker ook die van grotere namen) nog werken.

Meer over JavaScript op Naar Voren

Auteur

Arjan Eising

Arjan Eising is als front-ender al voor de oprichting van Fronteers betrokken bij de vakvereniging voor front-enders. Naast diverse klussen als freelancer is hij student Kunstmatige Intelligentie aan de Rijksuniversiteit Groningen.

Publicatiedatum: 29 januari 2009

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs