Az emberek, akik a webdesign az ipar a front-end weboldal fejlesztését egy háromlábú széklethez hasonlítja. Ez a három láb - a webfejlesztés három rétege - magában foglalja a webhely felépítését, stílusát és viselkedését.
Miért kell elválasztani a rétegeket?
Weboldal készítésekor annak szerkezetét vissza kell helyezni a HTML-be, vizuális stílusok a CSS-hezés a forgatókönyvek viselkedése. A rétegek elválasztásának néhány előnye:
- Megosztott források: Ha külső CSS vagy JavaScript fájlt ír, a webhely bármelyik oldala használhatja ezt a fájlt. Ha módosítania kell a fájlt, akkor talán frissítsen néhány tipográfiai stílust a weboldalon minden olyan oldal megkapja a változást, amely ezt a stíluslapot használja. Nincs szükség a weboldal minden oldalának külön-külön történő szerkesztésére, ami fárasztó vállalkozás lehet egy nagy weboldal számára.
- Gyorsabb letöltések: Miután az ügyfél először letöltötte a szkriptet vagy a stíluslapot, azt a webböngésző tárolja. Mivel ezeket a megosztott erőforrásokat most a böngésző gyorsítótár, a böngészőben kért egyéb oldalak gyorsabban betöltődnek, ami javítja az oldal általános sebességét és teljesítményét.
- Többfős csapatok: Ha egyszerre több ember dolgozik egy weboldalon, használjon verzióellenőrző rendszereket, amelyek lehetővé teszik a fájlok be- és kijelentkezését annak biztosítására, hogy mindenki a legújabb verziók. Ezt a folyamatot sokkal nehezebb megtenni, ha a stílusok és viselkedésmódok összefonódnak a struktúradokumentumokkal.
- SEO: A stílus és a szerkezet egyértelmű elkülönítését bemutató webhely valószínűleg jobban teljesít a keresőmotorok számára, mert azok hatékonyabban tudja feltérképezni ezt a tartalmat és megérteni az oldalt anélkül, hogy elakadna a vizuális stílusban és a viselkedésben információ.
- Megközelíthetőség: A külső stíluslapok és a szkriptfájlok hozzáférhetőbbek az emberek és a böngészők számára. Olyan szoftverek, mint képernyőolvasók könnyebben képes feldolgozni a struktúraréteg tartalmát anélkül, hogy foglalkozna olyan stílusokkal, amelyeket egyébként sem tudnak használni.
- Visszafelé kompatibilitás: Egy külön fejlesztői rétegekkel tervezett webhely valószínűleg visszafelé kompatibilis, mert böngészők és eszközök, amelyek nem tudnak használni bizonyos CSS stílusokat, vagy amelyeken a JavaScript le van tiltva, továbbra is megtekinthetik a HTML. Ezután fokozatosan javíthatja webhelyét az őket támogató böngészők funkcióival.
HTML: A Structure Layer
A weblap szerkezete vagy tartalmi rétege az alapja HTML kódot. Ahogy a ház kerete erős alapot hoz létre, amelyre a ház többi része épül, a HTML szilárd alapja létrehoz egy platformot, amelyre egy webhelyet lehet létrehozni.
A struktúrarétegben tárolják az összes tartalmat, amelyet az ügyfelek el akarnak olvasni vagy megnéznek. A HTML struktúra állhat szövegből és képekből, és magában foglalja a hiperhivatkozások amelyet a látogatók a webhelyen való eligazodáshoz használnak. Ez az információ a szabványoknak megfelelő kódolású HTML5 és tartalmazhat szöveget, képeket és multimédiát (videó, hang stb.).
A webhely tartalmának minden aspektusát képviselni kell a struktúra rétegben. Ez a szétválasztás lehetővé teszi azoknak az ügyfeleknek a hozzáférését, akiknek ki van kapcsolva a JavaScript, vagy akik nem tudják megtekinteni a CSS-t, a teljes weboldalra, ha nem is annak összes funkciójára.
CSS: A stílusréteg
Ez a réteg meghatározza, hogy a strukturált HTML dokumentum hogyan fog kinézni a webhely látogatói számára, és ez határozza meg CSS (Lépcsőzetes stíluslapok). Ezek a fájlok stilisztikai utasításokat tartalmaznak a dokumentum webböngészőben történő megjelenítésére vonatkozóan. A stílusréteg általában tartalmazza média lekérdezések amelyek a webhely megjelenítését megváltoztatják képernyőméret és eszköz.
A webhely minden vizuális stílusának külső stíluslapban kell lennie. Több stíluslapot is használhat, de minden CSS-fájlhoz HTTP-kérelem szükséges a letöltéshez, befolyásolja a webhely teljesítményét.
JavaScript: A viselkedési réteg
A viselkedési réteg interaktívvá teszi a weboldalt, lehetővé téve az oldal számára, hogy reagáljon a felhasználói műveletekre, vagy feltételfeltételek alapján változtathasson. A JavaScript a viselkedési réteg leggyakrabban használt nyelve, de CGI és PHP nagyon gyakran használják.
Amikor a fejlesztők a viselkedési rétegre hivatkoznak, többségük azt a réteget jelenti, amelyet közvetlenül a webböngészőben aktiválnak. Ezzel a réteggel közvetlenül léphet kapcsolatba a dokumentumobjektum-modellel. Érvényes HTML írása a tartalmi rétegben fontos a viselkedési réteg DOM interakcióihoz. A viselkedési réteg beépítésekor külső szkriptfájlokat kell használnia, csakúgy, mint a CSS esetében, a sebesség és a teljesítmény optimalizálásához.