Mensen die werken in de webdesign industrie vergelijkt front-end website-ontwikkeling met een driepotige kruk. Deze drie poten - de drie lagen van webontwikkeling - omvatten de structuur, stijl en het gedrag van een site.
Waarom zou je de lagen scheiden?
Wanneer u een webpagina maakt, moet de structuur worden gedegradeerd naar uw HTML, visuele stijlen naar de CSS, en gedrag naar scripts. Enkele voordelen van het scheiden van de lagen zijn:
- Gedeelde bronnen:Als je 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, misschien om update enkele typografische stijlen op de website krijgt elke pagina die die stylesheet gebruikt de wijziging. Het is niet nodig om elke pagina van de website afzonderlijk te bewerken, wat een slopende onderneming kan zijn voor een grote website.
- Sneller downloaden:Nadat het script of de stylesheet voor de eerste keer door uw klant is gedownload, wordt het door de webbrowser in de cache opgeslagen. Omdat deze gedeelde bronnen nu zijn opgenomen in de browser cache, andere pagina's die in de browser worden opgevraagd, worden sneller geladen, wat de algehele paginasnelheid en -prestaties verbetert.
- Teams met meerdere personen:Als er meer dan één persoon tegelijk aan een website werkt, gebruik dan versiebeheersystemen waarmee bestanden kunnen worden in- en uitgecheckt om ervoor te zorgen dat iedereen met de website werkt. laatste versies. Dit proces is veel moeilijker uit te voeren als stijlen en gedragingen verweven zijn met structuurdocumenten.
- SEO:Een site die een duidelijke scheiding van stijl en structuur laat zien, zal waarschijnlijk beter presteren voor zoekmachines omdat ze kan die inhoud effectiever crawlen en de pagina begrijpen zonder te verzanden in visuele stijl en gedrag informatie.
- Toegankelijkheid:Externe stijlbladen en scriptbestanden zijn toegankelijker voor mensen en voor browsers. Software zoals: schermlezers kunnen gemakkelijker inhoud uit de structuurlaag verwerken zonder te maken te hebben met stijlen die ze toch niet kunnen gebruiken.
- Achterwaartse compatibiliteit:Een site die is ontworpen met afzonderlijke ontwikkellagen, is waarschijnlijker achterwaarts compatibel omdat browsers en apparaten die bepaalde CSS-stijlen niet kunnen gebruiken of waarop JavaScript is uitgeschakeld, kunnen de HTML-code. U kunt uw website vervolgens geleidelijk uitbreiden met functies voor de browsers die ze 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 vormt waarop de rest van het huis is gebouwd, creëert een solide basis van HTML een platform waarop een website kan worden gemaakt.
De structuurlaag is waar u alle inhoud opslaat die uw klanten willen lezen of bekijken. HTML-structuur kan bestaan uit tekst en afbeeldingen, en bevat de hyperlinks die bezoekers zullen gebruiken om door de website te navigeren. Deze informatie is gecodeerd in normconform HTML5 en kan tekst, afbeeldingen en multimedia (video, audio, enz.) bevatten.
Elk aspect van de inhoud van een site moet worden weergegeven in de structuurlaag. Deze scheiding geeft klanten die JavaScript hebben uitgeschakeld of die CSS niet kunnen zien, toegang tot de hele website, 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 hoe het document in een webbrowser moet worden weergegeven. De stijllaag bevat meestal mediaquery's die de weergave van een site veranderen op basis van schermgrootte en apparaat.
Alle visuele stijlen voor een website moeten in een externe stylesheet staan. U kunt meerdere stylesheets gebruiken, maar elk CSS-bestand vereist een HTTP-verzoek om het op te halen, die de prestaties van de site beïnvloeden.
JavaScript: de gedragslaag
De gedragslaag maakt een website interactief, waardoor de pagina kan reageren op gebruikersacties of kan veranderen op basis van een set voorwaarden. JavaScript is de meest gebruikte taal voor de gedragslaag, maar CGI en PHP worden ook heel vaak gebruikt.
Wanneer ontwikkelaars verwijzen naar de gedragslaag, bedoelen de meeste van hen de laag die direct in de webbrowser wordt geactiveerd. Gebruik deze laag voor directe interactie met het documentobjectmodel. Geldige HTML schrijven in de inhoudslaag is belangrijk voor DOM-interacties in de gedragslaag. Wanneer u de gedragslaag inbouwt, moet u, net als bij CSS, externe scriptbestanden gebruiken om de snelheid en prestaties te optimaliseren.