Azok, akik a webdesign iparban dolgoznak, hasonlítanak a front-end weboldal fejlesztéséhez egy háromlábú széken. Ez a három láb - a webes fejlesztés három rétege - struktúrát, stílust és magatartást tartalmaz.
Miért kell elválasztania a rétegeket?
Amikor weboldalt készítesz, annak struktúráját vissza kell vonni a HTML-hez, a vizuális stílusokat a CSS-hez, és a szkriptek viselkedését. A rétegek elválasztásának előnyei:
- Megosztott erőforrások: Amikor 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, talán a weboldal egyes tipográfiai stílusainak frissítésére, akkor minden olyan oldal, amelyik ezt a stíluslapot használja, megkapja a módosítást. A weboldal minden oldalát külön nem kell szerkeszteni, ami egy nagy weboldal számára nehézkes vállalkozás lehet.
- Gyorsabb letöltések: Miután a parancsfájlt vagy a stíluslapot az ügyfél először töltette le, a böngésző gyorsítótárba helyezi. Mivel ezek a megosztott erőforrások már szerepelnek a böngésző gyorsítótárában, a böngészőben igényelt más oldalak gyorsabban betöltődnek, ami javítja az oldal teljes sebességét és teljesítményét.
- Többtagú csapatok: Ha egynél több személy dolgozik egy weboldalon egyszerre, olyan rendszereket használhat, amelyek lehetővé teszik a fájlok be- és kijelentését annak érdekében, hogy mindenki a legújabb verziókkal dolgozhasson. Ez sokkal nehezebb megtenni, ha a stílusok és viselkedések összefonódnak a szerkezeti dokumentumokkal.
- SEO: A stílus és a struktúra világos elválasztását biztosító webhely valószínűleg jobban teljesít a keresőmotorok számára, mert hatékonyabban képes feltérképezni ezt a tartalmat, és megérteni az oldalt, anélkül, hogy leragadna a vizuális stílusban és viselkedési információban.
- Megközelíthetőség: A külső stíluslapok és szkriptfájlok jobban hozzáférhetőek az emberek és a böngészők számára. A szoftverek, például a képernyőolvasók könnyebben feldolgozhatják a tartalmat a struktúrrétegről, anélkül, hogy olyan stílusokkal foglalkoznának, amelyeket egyébként sem használhatnak.
- Visszafelé kompatibilitás: A különálló fejlesztési rétegekkel rendelkező webhelyek nagyobb valószínűséggel visszamenőlegesen kompatibilisek, mivel a böngészők és eszközök, amelyek nem használhatnak bizonyos CSS-stílusokat, vagy amelyek a JavaScript le vannak tiltva, továbbra is megtekinthetik a HTML-t. Ezután fokozatosan javíthatja webhelyét a böngészők támogató funkcióival.
HTML: A struktúra réteg
A weboldal struktúrája vagy tartalmi rétege az adott oldal HTML kódja. Ahogy egy ház kerete erős alapot teremt, amelyen a ház többi része épül, a HTML szilárd alapja létrehoz egy olyan platformot, amelyen egy weboldal létrehozható.
A szerkezeti rétegben tárolja az összes olyan tartalmat, amelyet ügyfeleinek olvasni vagy megnézni. A HTML-struktúra szövegből és képekből állhat, és magában foglalja azokat a hivatkozásokat, amelyeket a látogatók a webhely körül navigálhatnak. Ez szabványos HTML5 kódolással van kódolva, és tartalmazhat szöveget, képeket és multimédiát (videó, hang, stb.).
A webhely tartalmának minden aspektusát fel kell tüntetni a struktúrrétegben. Ez lehetővé teszi az olyan ügyfeleknek, akiknek a JavaScript ki van kapcsolva, vagy akik nem láthatják a CSS-hozzáférést a teljes webhelyre, ha nem az összes funkciója.
CSS: A Stílusok réteg
Ez a réteg diktálja, hogy a strukturált HTML-dokumentum hogyan fog kinézni egy webhely látogatóinak, és a CSS (Cascading Style Sheets) által definiált. Ezek a fájlok stilisztikai utasításokat tartalmaznak arra nézve, hogyan jelenjen meg a dokumentum egy webböngészőben. A stílusréteg általában olyan média lekérdezéseket tartalmaz, amelyek megváltoztatják a webhely képernyőjét a képernyő méretének és eszközének megfelelően.
A weboldal minden vizuális stílusának külső stíluslapon kell lennie. Több stíluslapot is használhat, de ne feledje, hogy minden CSS-fájl HTTP-kérést igényel a webhely teljesítményének befolyásolására.
JavaScript: A viselkedési réteg
A viselkedési réteg webhelyet interaktívvá tesz, lehetővé téve az oldal számára, hogy válaszoljon a felhasználói műveletekre vagy megváltoztassa a feltételeket. A JavaScript a viselkedési réteg leggyakrabban használt nyelvét használja, de a CGI és a PHP is nagyon gyakran használatos.
Amikor a fejlesztők a viselkedési rétegre utalnak, a legtöbbjük a közvetlenül a böngészőben aktivált réteget jelenti. Ezt a réteget közvetlenül használja a DOM (Document Object Model) eszközzel. A tartalomrétegben érvényes HTML-írás fontos a DOM-interakciók számára a viselkedési rétegben. Ha a viselkedési rétegbe épít, külső script fájlokat kell használnia, akár a CSS-hez hasonlóan, a sebesség és a teljesítmény optimalizálása érdekében.
