Miért épülnek fel minden webhely struktúrával, stílusgal és viselkedéssel?
Egy közös analógia, amellyel leírják a front-end weboldal fejlesztését, hogy olyan, mint egy háromlábú széklet. Ez a 3 láb, amelyet a webes fejlesztés 3 rétegének is neveznek, a struktúra, a stílus és a viselkedés.
A webfejlesztés három rétegei
- Struktúra vagy tartalomréteg
- A weboldal struktúrája vagy tartalmi rétege az adott oldal HTML kódja. Mint egy ház kerete, amely egy erős alapot hoz létre, amelyen a ház többi része épül, a HTML szilárd alapja egy platformot hoz létre, amelyen egy weboldal létrehozható. A HTML-struktúra szövegből vagy képekből állhat, és magában foglalja azokat a hivatkozásokat, amelyeket a látogatók használni fognak a webhelyen való navigáláshoz.
- Stílus vagy prezentációs réteg
- A stílus vagy a megjelenítési réteg diktálja, hogy egy strukturált HTML-dokumentum hogyan fog kinézni a webhely látogatóihoz. Ezt a réteget a CSS (Cascading Style Sheets) határozza meg. Ezek a fájlok olyan stílusokat tartalmaznak, amelyek jelzik, hogyan jelenjen meg a dokumentum egy webböngészőben. A mai weboldalon a stílusréteg tartalmazhat olyan médiakérdéseket is , amelyek megváltoztathatják a webhely képernyőjét különböző képernyőméretek és eszközök alapján .
- Viselkedés
- A viselkedés réteg egy olyan weboldal rétege, amely válaszolhat a különböző felhasználói műveletekre, vagy változtatásokat hajthat végre egy bizonyos feltételek alapján. A legtöbb weboldal esetében a viselkedési szint az oldal JavaScript- kölcsönhatásai.
Miért kell elválasztania a rétegeket?
Weboldal létrehozásakor kívánatos a rétegek lehető legkülönfélébb megtartása. A struktúrát meg kell adni a HTML-nek, a vizuális stílusokat a CSS-nek, és viselnie kell a webhely által használt parancsfájlokhoz.
A rétegek elválasztásának előnyei:
- Megosztott erőforrások
- Amikor külső CSS-fájlt vagy JavaScript-fájlt ír ki, ezt a fájlt felhasználhatja a webhely bármelyik oldalán. 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. Nem szükséges a weboldal minden oldalát külön-külön szerkeszteni, ami nagyobb webhely számára fáradságos vállalkozás lehet.
- Gyorsabb letöltések
- Miután a parancsfájlt vagy stíluslapot az ügyfél először letöltötte, a böngésző gyorsítótárba helyezi. Mivel ezek a megosztott erőforrások most már a gyorsítótárban vannak, a böngészőben igényelt más oldalak gyorsabban töltődnek be, ami javítja az oldal teljes sebességét és teljesítményét.
- Többszemélyes csapatok
- Ha egynél több személy dolgozik egy weboldalon egyszerre, használhat olyan rendszereket, amelyek a "check in" és a "check out" fájlokhoz biztosítják, hogy a csapat minden tagja a legfrissebb verziókkal dolgozik. 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őmotoroknál, mivel ezek a webhelyek hatékonyabban tudják feltérképezni ezt a tartalmat, és megértik az oldalt anélkül, hogy vizuális stílussal vagy viselkedési információkkal lerohantak volna.
- 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. Mivel a stílus és a struktúra szétválasztása van, a szoftvert, mint a képernyőolvasók könnyebben feldolgozhatják a tartalmat a szerkezeti rétegből anélkül, hogy olyan stílusokba ütköznének, amelyeket egyébként sem használhatnak.
- Fordított kompatibilitás
- Ha van olyan fejlesztési réteggel rendelkező webhely, akkor hátrányosabb lesz, ha a böngészők vagy az olyan eszközök, amelyek nem használhatnak bizonyos CSS-stílusokat, vagy amelyeknek nincs engedélyezve a JavaScript, továbbra is megtekinthetik a HTML-t. Webhelyét ezután fokozatosan továbbfejlesztheti az azokat támogató böngésző funkcióival.
HTML - a szerkezeti réteg
A szerkezeti rétegben tárolja az összes olyan tartalmat, amelyet ügyfeleinek olvasni vagy megnézni. Ez kódolható a szabványoknak megfelelő HTML5-ben, és tartalmazhat szöveget és képeket, valamint multimédiát (videó, hang, stb.). Fontos meggyőződni arról, hogy webhelye tartalmának minden elemét a struktúrréteg képviseli. Ez lehetővé teszi, hogy minden olyan ügyfelet, aki a JavaScript ki van kapcsolva, vagy aki nem tudja megtekinteni a CSS-t, hogy továbbra is hozzáférjen a teljes webhelyhez, ha nem az összes funkciója.
CSS - a Stílusréteg
A külső stíluslapon minden vizuális stílust létrehozni fog a webhelyére. Több stíluslapot is használhat, de ne felejtsd el, hogy minden különálló CSS-fájl HTTP-kérést igényel, amely hatással van a webhely teljesítményére.
JavaScript - a viselkedési réteg
A JavaScript a legelterjedtebb nyelv a viselkedési réteghez, de ahogy korábban említettem, a CGI és a PHP is generálhat weblap viselkedést. Ez azt jelenti, hogy amikor a legtöbb fejlesztő a viselkedési rétegre utal, akkor azt jelenti, hogy a webböngészőben közvetlenül aktivált réteg - így a JavaScript szinte mindig a választott nyelv. Ezt a réteget közvetlenül használhatja a DOM vagy a Dokumentum objektummodellhez. A tartalomrétegben érvényes HTML megírása szintén fontos a viselkedési rétegben lévő DOM-kölcsönhatások számára.
Amikor a viselkedési rétegbe épülsz, külső szkriptfájlokat kell használnod, mint a CSS-ben. Ugyanolyan előnyökkel jár, ha külső stíluslapot használ.