De, der arbejder inden for webdesignindustrien, ligner front-end website udvikling til en trebenet fæces. Disse tre ben - de tre lag af webudvikling - omfatter struktur, stil og adfærd.
Hvorfor skal du adskille lagene?
Når du opretter en webside, skal dens struktur blive henvist til din HTML, visuelle stilarter til CSS og adfærd til scripts. Nogle af fordelene ved at adskille lagene er:
- Fælles ressourcer: Når du skriver en ekstern CSS- eller JavaScript-fil, kan enhver side på webstedet bruge den pågældende fil. Hvis du skal foretage en ændring af den pågældende fil, måske at opdatere nogle typografiske stilarter på hjemmesiden, vil hver side, der bruger det stilark, få ændringen. Der er ikke behov for at redigere hver side af hjemmesiden individuelt, hvilket kunne være en grusom virksomhed for en stor hjemmeside.
- Hurtigere downloads: Når scriptet eller stylesheet er blevet downloadet af din kunde for første gang, caches det af webbrowseren. Da disse delte ressourcer nu er indeholdt i browserens cache, indlæses andre sider, der bliver anmodet om i browseren hurtigere, hvilket forbedrer den samlede sidens hastighed og ydeevne.
- Flerpersonshold: Hvis du har mere end en person, der arbejder på et websted på én gang, kan du bruge systemer, der tillader at filer kontrolleres ind og ud for at sikre, at alle arbejder med de nyeste versioner. Dette er meget sværere at gøre, hvis stilarter og adfærd er sammenflettet med strukturdokumenter.
- SEO: Et websted, der har en klar adskillelse af stil og struktur, vil sandsynligvis udføre bedre for søgemaskiner, fordi de kan gennemgå indholdet mere effektivt og forstå siden uden at blive slået ned i visuel stil og opførsel.
- Tilgængelighed: Eksterne stilark og scriptfiler er mere tilgængelige for mennesker og browsere. Software som skærmlæsere kan nemt behandle indhold fra strukturlaget uden at håndtere stilarter, som de ikke kan bruge alligevel.
- Bagudkompatibilitet: Et websted, der er designet med separate udviklingslag, er mere tilbøjelig til at være bagudkompatibel, fordi browsere og enheder, der ikke kan bruge bestemte CSS-stilarter eller som har JavaScript deaktiveret, kan stadig se HTML'en. Du kan derefter forbedre din hjemmeside gradvist med funktioner til de browsere, der understøtter dem.
HTML: Structure Layer
Strukturen eller indholdslaget på en webside er den underliggende HTML-kode på den pågældende side. Ligesom et husramme skaber et stærkt fundament, hvorpå resten af huset er bygget, skaber et solidt fundament af HTML en platform, hvor en hjemmeside kan oprettes.
Strukturlaget er hvor du gemmer alt det indhold, dine kunder ønsker at læse eller se på. HTML-struktur kan bestå af tekst og billeder, og den indeholder de hyperlinks, som besøgende vil bruge til at navigere rundt på hjemmesiden. Dette er kodet i HTML5-kompatibelt standard og kan omfatte tekst, billeder og multimedier (video, lyd osv.).
Hvert aspekt af et websteds indhold skal være repræsenteret i strukturlaget. Dette gør det muligt for kunder, der har slukket for JavaScript, eller som ikke kan se CSS-adgang til hele webstedet, hvis ikke alle dets funktionaliteter.
CSS: Styles Layer
Dette lag dikterer, hvordan et struktureret HTML-dokument vil se på et websteds besøgende og er defineret af CSS (Cascading Style Sheets). Disse filer indeholder stilistiske instruktioner for, hvordan dokumentet skal vises i en webbrowser. Stillaget indeholder normalt medieforespørgsler, der ændrer et websteds display baseret på skærmstørrelse og enhed.
Alle visuelle stilarter til en hjemmeside skal opbevares i et eksternt stilark. Du kan bruge flere stylesheets, men husk at hver CSS-fil kræver en HTTP-anmodning for at hente den, hvilket påvirker ydeevnen.
JavaScript: Behavior Layer
Opførselslaget gør et websted interaktivt, så siden kan reagere på brugerhandlinger eller ændre sig på baggrund af et sæt betingelser. JavaScript er det mest almindeligt anvendte sprog for opførselslaget, men også CGI og PHP bruges meget ofte.
Når udviklere henviser til adfærdslaget, betyder de fleste af dem laget, der aktiveres direkte i webbrowseren. Du bruger dette lag til at interagere direkte med DOM (Document Object Model). At skrive gyldig HTML i indholdslaget er vigtigt for DOM-interaktioner i adfærdslaget. Når du bygger op adfærdslaget, skal du bruge eksterne scriptfiler, ligesom med CSS, for at optimere hastighed og ydeevne.
