De som jobber i webdesignindustrien ligner front-end nettstedutvikling til en trebent avføring. Disse tre benene - de tre lagene i webutvikling - omfatter struktur, stil og oppførsel.
Hvorfor bør du skille lagene?
Når du oppretter en nettside, bør strukturen bli henvist til HTML, visuelle stiler til CSS og oppførsel til skript. Noen av fordelene med å skille lagene er:
- Delte ressurser: Når du skriver en ekstern CSS eller JavaScript-fil, kan en hvilken som helst side på nettstedet bruke den filen. Hvis du trenger å gjøre en endring i den filen, kanskje for å oppdatere noen typografiske stiler på nettstedet, vil hver side som bruker det stilarket få endringen. Det er ikke nødvendig å redigere hver side av nettstedet hver for seg, noe som kan være et grusomt tilsagn for et stort nettsted.
- Raskere nedlastinger: Når skriptet eller stilarket er lastet ned av kunden for første gang, blir det cachet av nettleseren. Fordi disse delte ressursene nå finnes i nettleserens cache, lastes andre sider som blir forespurt i nettleseren raskere, noe som forbedrer den totale sidens hastighet og ytelse.
- Flerspillerlag: Hvis du har flere enn én person som jobber på et nettsted samtidig, kan du bruke systemer som tillater at filer kontrolleres inn og ut for å sikre at alle jobber med de nyeste versjonene. Dette er mye vanskeligere å gjøre hvis stiler og oppførsel er sammenflettet med strukturdokumenter.
- SEO: Et nettsted som har en klar separasjon av stil og struktur, vil trolig utføre bedre for søkemotorer, fordi de kan gjennomsøke innholdet mer effektivt og forstå siden uten å bli presset ned i visuell stil og atferdsinformasjon.
- Tilgjengelighet: Eksterne stilark og skriptfiler er mer tilgjengelige for folk og til nettlesere. Programvare som skjermlesere kan enkelt behandle innhold fra strukturlaget uten å håndtere stiler som de ikke kan bruke uansett.
- Bakoverkompatibilitet: Et nettsted som er designet med separate utviklingslag, er mer sannsynlig å være bakoverkompatibel fordi nettlesere og enheter som ikke kan bruke bestemte CSS-stiler eller som har JavaScript deaktivert, kan fortsatt se HTML-koden. Du kan deretter forbedre nettstedet ditt gradvis med funksjoner for nettleserne som støtter dem.
HTML: Strukturlaget
Strukturen eller innholdslaget på en nettside er den underliggende HTML-koden til den siden. Akkurat som et husramme skaper et sterkt fundament som resten av huset bygges på, skaper et solid grunnlag for HTML en plattform hvor et nettsted kan opprettes.
Strukturlaget er hvor du lagrer alt innholdet som kundene dine vil lese eller se på. HTML-strukturen kan bestå av tekst og bilder, og den inneholder hyperkoblingene som besøkende vil bruke til å navigere rundt nettstedet. Dette er kodet i HTML5 som er kompatibelt med standard og kan omfatte tekst, bilder og multimedia (video, lyd, etc.).
Hvert aspekt av et nettsteds innhold skal være representert i strukturlaget. Dette tillater at kunder som har JavaScript slått av, eller som ikke kan vise CSS-tilgang til hele nettstedet, om ikke all funksjonalitet.
CSS: Styles Layer
Dette laget dikterer hvordan et strukturert HTML-dokument vil se på et nettsteds besøkende og er definert av CSS (Cascading Style Sheets). Disse filene inneholder stilistiske instruksjoner for hvordan dokumentet skal vises i en nettleser. Stilsjiktet inneholder vanligvis medieforespørsler som endrer visningen på 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 husk at hver CSS-fil krever en HTTP-forespørsel for å hente den, noe som påvirker ytelsen til nettstedet.
JavaScript: Behavior Layer
Behandlingslaget lager et nettsted interaktivt, slik at siden kan svare på brukerhandlinger eller for å endre seg på grunnlag av et sett av forhold. JavaScript er det mest brukte språket for oppførselslaget, men også CGI og PHP brukes ofte.
Når utviklere refererer til oppførselslaget, betyr de fleste lagene som er aktivert direkte i nettleseren. Du bruker dette laget til å samhandle direkte med DOM (Document Object Model). Å skrive gyldig HTML i innholdslaget er viktig for DOM-interaksjoner i oppføringslaget. Når du bygger opp adferdsjonslaget, bør du bruke eksterne skriptfiler, akkurat som med CSS, for å optimalisere hastighet og ytelse.
