Folk som jobber i webdesign industrien sammenligner utvikling av nettsteder på nettet med en trebenet krakk. Disse tre bena - de tre lagene for nettutvikling - består av strukturen, stilen og oppførselen til et nettsted.
Hvorfor bør du skille lagene?
Når du oppretter en webside, bør strukturen henvises til HTML-en din, visuelle stiler til CSSog oppførsel til skript. Noen av fordelene med å skille lagene er:
- Delte ressurser: Når du skriver en ekstern CSS- eller JavaScript-fil, kan hvilken som helst side på nettstedet bruke den filen. Hvis du trenger å gjøre en endring i den filen, kanskje til oppdater noen typografiske stiler på nettstedet, vil hver side som bruker dette stilarket få endringen. Det er ikke nødvendig å redigere hver side på nettstedet hver for seg, noe som kan være en slitsom oppgave for et stort nettsted.
- Raskere nedlastinger: Etter at skriptet eller stilarket har blitt lastet ned av kunden for første gang, blir det bufret av nettleseren. Fordi disse delte ressursene nå er inneholdt i nettleserbuffer, andre sider som blir bedt om i nettleseren, lastes raskere inn, noe som forbedrer den totale sidehastigheten og ytelsen.
- Flerpersonerteam: Hvis du har mer enn en person som jobber på et nettsted på en gang, kan du bruke versjonskontrollsystemer som gjør det mulig å sjekke inn og ut filer for å sikre at alle jobber med nyeste versjoner. Denne prosessen er mye vanskeligere å gjøre hvis stiler og atferd er flettet sammen med strukturdokumenter.
- SEO: Et nettsted som viser en tydelig skille mellom stil og struktur, vil trolig prestere bedre for søkemotorer fordi de kan gjennomsøke innholdet mer effektivt og forstå siden uten å sette seg fast i visuell stil og atferd informasjon.
- tilgjengelighet: Eksterne stilark og skriptfiler er mer tilgjengelige for mennesker og nettlesere. Programvare som skjermlesere kan behandle innhold fra strukturlaget lettere uten å håndtere stiler som de uansett ikke kan bruke.
- Bakoverkompatibilitet: Et nettsted som er designet med separate utviklingslag er mer sannsynlig å være bakoverkompatibelt fordi nettlesere og enheter som ikke kan bruke bestemte CSS-stiler eller som har JavaScript deaktivert, kan fremdeles se HTML. Du kan deretter forbedre nettstedet ditt gradvis med funksjoner for nettleserne som støtter dem.
HTML: Strukturlaget
Strukturen eller innholdslaget til en webside er den underliggende HTML koden til den siden. Akkurat som husets ramme skaper et sterkt fundament som resten av huset er bygget på, skaper et solid fundament av HTML en plattform som et nettsted kan opprettes på.
Strukturlaget er der du lagrer alt innholdet som kundene dine vil lese eller se på. HTML-struktur kan bestå av tekst og bilder, og den inkluderer hyperkoblinger som besøkende vil bruke til å navigere seg rundt på nettstedet. Denne informasjonen er kodet i samsvar med standardene HTML5 og kan inkludere tekst, bilder og multimedia (video, lyd osv.).
Hvert aspekt av innholdet på et nettsted skal være representert i strukturlaget. Denne separasjonen tillater kunder som har slått av JavaScript eller som ikke kan se CSS-tilgang til hele nettstedet, hvis ikke all funksjonaliteten.
CSS: The Styles Layer
Dette laget dikterer hvordan et strukturert HTML-dokument vil se ut til besøkende på et nettsted og blir definert av CSS (Cascading Style Sheets). Disse filene inneholder stilistiske instruksjoner for hvordan dokumentet skal vises i en nettleser. Stillaget inkluderer vanligvis mediespørsmål som endrer visning av et nettsted basert på skjermstørrelse og enhet.
Alle visuelle stiler for et nettsted skal ligge i et eksternt stilark. Du kan bruke flere stilark, men hver CSS-fil krever en HTTP-forespørsel for å hente den, som påvirker nettstedets ytelse.
JavaScript: Atferdslaget
Atferdslaget gjør et nettsted interaktivt, slik at siden kan svare på brukerhandlinger eller endres basert på et sett med betingelser. JavaScript er det mest brukte språket for atferdslaget, men CGI og PHP brukes veldig ofte også.
Når utviklere refererer til atferdslaget, betyr de fleste av dem laget som aktiveres direkte i nettleseren. Bruk dette laget til å samhandle direkte med Document Object Model. Skriver gyldig HTML i innholdslaget er viktig for DOM-interaksjoner i atferdslaget. Når du bygger inn atferdslaget, bør du bruke eksterne skriptfiler, akkurat som med CSS, for å optimalisere hastighet og ytelse.