De som arbetar inom webbdesignindustrin liknar utveckling av avancerad webbsida till en trebenig avföring. Dessa tre ben - de tre skikten av webbutveckling - består av struktur, stil och beteende.
Varför ska du skilja lagen?
När du skapar en webbsida bör dess struktur förkastas till din HTML, visuella stilar till CSS och beteenden på skript. Några av fördelarna med att skilja skikten är:
- Delade resurser: När du skriver en extern CSS- eller JavaScript-fil kan vilken sida som helst på webbplatsen använda den filen. Om du behöver göra en ändring i den filen kanske du uppdaterar vissa typografiska format på webbplatsen kommer varje sida som använder det stilarket att få ändringen. Det finns inget behov av att redigera varje sida på webbplatsen för sig, vilket kan vara ett skrämmande företag för en stor webbplats.
- Snabbare nedladdningar: När skriptet eller stilarket har laddats ner av din kund för första gången, cachas det av webbläsaren. Eftersom dessa delade resurser nu finns i webbläsarens cache, laddas andra sidor som begärs i webbläsaren snabbare, vilket förbättrar övergripande sidhastighet och prestanda.
- Flera personlag: Om du har mer än en person som arbetar på en webbplats på en gång kan du använda system som tillåter att filer kontrolleras in och ut för att säkerställa att alla arbetar med de senaste versionerna. Detta är mycket svårare att göra om stilar och beteenden är sammanflätade med strukturdokument.
- SEO: En webbplats som har en tydlig åtskillnad mellan stil och struktur kommer sannolikt att fungera bättre för sökmotorer, eftersom de kan krypa igenom innehållet mer effektivt och förstå sidan utan att gå in i visuell stil och beteendeinformation.
- Tillgänglighet: Externa stilark och skriptfiler är mer tillgängliga för personer och webbläsare. Programvara som skärmsläsare kan enkelt bearbeta innehållet från strukturskiktet utan att hantera stilar som de inte kan använda ändå.
- Bakåtkompatibilitet: En webbplats som är utformad med separata utvecklingslager är mer benägna att vara bakåtkompatibel eftersom webbläsare och enheter som inte kan använda vissa CSS-format eller som har JavaScript-avstängt, kan fortfarande se HTML. Du kan sedan förbättra din webbplats progressivt med funktioner för webbläsare som stöder dem.
HTML: Structure Layer
Strukturen eller innehållsskiktet på en webbsida är den underliggande HTML-koden på den sidan. Precis som ett husram skapar en stark grund som resten av huset byggs på skapar en solid grund för HTML en plattform där en webbplats kan skapas.
Strukturlagret är där du lagrar allt innehåll som dina kunder vill läsa eller titta på. HTML-strukturen kan bestå av text och bilder, och den innehåller de hyperlänkar som besökare ska använda för att navigera runt webbplatsen. Det här kodas i HTML5-kompatibelt standard och kan innehålla text, bilder och multimedia (video, ljud etc.).
Varje aspekt av en webbplats innehåll bör representeras i strukturlagret. Detta gör det möjligt för kunder som har JavaScript avstängd eller som inte kan visa CSS-åtkomst till hela webbplatsen, om inte alla dess funktioner.
CSS: Styles Layer
Detta lager dikterar hur ett strukturerat HTML-dokument kommer att se på en webbplats besökare och definieras av CSS (Cascading Style Sheets). Dessa filer innehåller stilistiska instruktioner för hur dokumentet ska visas i en webbläsare. Stilskiktet innehåller vanligtvis mediefrågor som ändrar en webbplatsens bildskärm baserat på skärmstorlek och enhet.
Alla visuella stilar för en webbplats borde finnas i ett externt stilark. Du kan använda flera stylesheets, men kom ihåg att varje CSS-fil kräver en HTTP-begäran för att hämta den, vilket påverkar webbplatsens prestanda.
JavaScript: Beteendelagen
Uppförandeskiktet gör en webbplats interaktiv, så att sidan kan svara på användaråtgärder eller ändra på grundval av en uppsättning villkor. JavaScript är det vanligaste språket för beteendelagret, men också CGI och PHP används ofta.
När utvecklare hänvisar till beteendesskiktet menar de flesta av lagen som aktiveras direkt i webbläsaren. Du använder detta lager för att interagera direkt med DOM (Document Object Model). Att skriva giltig HTML i innehållsskiktet är viktigt för DOM-interaktioner i beteendelagret. När du bygger upp beteendesskiktet bör du använda externa skriptfiler, precis som med CSS, för att optimera hastighet och prestanda.
