Degenen die in de webontwerpindustrie werken, vergelijken de ontwikkeling van een front-end website met een driepotige stoelgang. Deze drie poten - de drie lagen van webontwikkeling - omvatten structuur, stijl en gedrag.
Waarom zou je de lagen scheiden?
Wanneer u een webpagina aanmaakt, moet de structuur ervan worden verbogen naar uw HTML, visuele stijlen naar de CSS en gedragingen naar scripts. Enkele van de voordelen van het scheiden van de lagen zijn:
- Gedeelde bronnen: Wanneer u een extern CSS- of JavaScript-bestand schrijft, kan elke pagina op de site dat bestand gebruiken. Als u een wijziging in dat bestand moet aanbrengen, bijvoorbeeld om een aantal typografische stijlen op de website bij te werken, krijgt elke pagina die dat stylesheet gebruikt de wijziging. Het is niet nodig om elke pagina van de website afzonderlijk te bewerken, wat een slopende onderneming zou kunnen zijn voor een grote website.
- Snellere downloads: Nadat het script of stylesheet voor de eerste keer door uw klant is gedownload, wordt het door de webbrowser in de cache opgeslagen. Omdat deze gedeelde bronnen zich nu in de cache van de browser bevinden, laden andere pagina's die in de browser worden aangevraagd sneller, wat de algehele paginasnelheid en -prestaties verbetert.
- Multi-person teams: Als u meer dan één persoon tegelijkertijd aan een website hebt, kunt u systemen gebruiken waarmee bestanden kunnen worden in- en uitgecheckt om ervoor te zorgen dat iedereen met de nieuwste versies werkt. Dit is veel moeilijker te doen als stijlen en gedragingen verweven zijn met structuurdocumenten.
- SEO: Een site met een duidelijke scheiding van stijl en structuur presteert waarschijnlijk beter voor zoekmachines omdat ze die inhoud effectiever kunnen crawlen en de pagina kunnen begrijpen zonder verzanden in visuele stijl- en gedragsinformatie.
- Toegankelijkheid: Externe stylesheets en scriptbestanden zijn beter toegankelijk voor mensen en voor browsers. Software zoals schermlezers kunnen inhoud van de structuurlaag gemakkelijker verwerken zonder stijlen aan te pakken die ze toch niet kunnen gebruiken.
- Achterwaartse compatibiliteit: Een site die is ontworpen met afzonderlijke ontwikkelingslagen is waarschijnlijk eerder compatibel met eerdere versies, omdat browsers en apparaten die bepaalde CSS-stijlen niet kunnen gebruiken of waarvoor JavaScript is uitgeschakeld, de HTML nog steeds kunnen bekijken. U kunt uw website vervolgens geleidelijk uitbreiden met functies voor de browsers die hen ondersteunen.
HTML: de structuurlaag
De structuur of inhoudslaag van een webpagina is de onderliggende HTML-code van die pagina. Net zoals het frame van een huis een sterke basis creëert waarop de rest van het huis wordt gebouwd, creëert een stevige basis van HTML een platform waarop een website kan worden gemaakt.
In de structuurlaag slaat u alle inhoud op die uw klanten willen lezen of bekijken. HTML-structuur kan bestaan uit tekst en afbeeldingen en bevat de hyperlinks die bezoekers gebruiken om door de website te navigeren. Dit is gecodeerd in HTML5 die voldoet aan de standaarden en kan tekst, afbeeldingen en multimedia bevatten (video, audio, enz.).
Elk aspect van de inhoud van een site moet in de structuurlaag worden weergegeven. Hiermee kunnen klanten die JavaScript hebben uitgeschakeld of die CSS-toegang tot de gehele website niet bekijken, zo niet alle functionaliteit.
CSS: de laag Stijlen
Deze laag bepaalt hoe een gestructureerd HTML-document eruitziet voor de bezoekers van een site en wordt gedefinieerd door CSS (Cascading Style Sheets). Deze bestanden bevatten stilistische instructies voor de manier waarop het document in een webbrowser moet worden weergegeven. De stijllaag bevat meestal mediaquery's die de weergave van een site wijzigen op basis van schermgrootte en apparaat.
Alle visuele stijlen voor een website moeten zich in een externe stylesheet bevinden. U kunt meerdere stylesheets gebruiken, maar onthoud dat elk CSS-bestand een HTTP-verzoek vereist om het op te halen, wat de prestaties van de site beïnvloedt.
JavaScript: de gedragslaag
De gedragslaag maakt een website interactief, waardoor de pagina kan reageren op gebruikersacties of kan worden gewijzigd op basis van een reeks voorwaarden. JavaScript is de meest gebruikte taal voor de gedragslaag, maar CGI en PHP worden ook vaak gebruikt.
Wanneer ontwikkelaars naar de gedragslaag verwijzen, bedoelen de meeste de laag die direct in de webbrowser is geactiveerd. U gebruikt deze laag om rechtstreeks samen te werken met de DOM (Document Object Model). Het schrijven van geldige HTML in de inhoudlaag is belangrijk voor DOM-interacties in de gedragslaag. Wanneer u de gedragslaag inbouwt, moet u externe scriptbestanden gebruiken, net als met CSS, om de snelheid en prestaties te optimaliseren.
