Firwat all Websäite gebaut ginn mat enger Kombinatioun vun Struktur, Stil an Verhaal
Eng gemeinsame Analogie déi benotzt gëtt fir de Site-Développement vun der Säitendéngscht ze beschreiwen ass datt et ass wéi en 3-legged Hocker. Dës 3 Been, déi och als 3 Schichten vun der Webentwicklung bekannt sinn, sinn Struktur, Stil a Behaviors.
Déi dräi Schichten vun de Webentwicklung
- Struktur oder Inhalt Layer
- D'Struktur oder d'Inhalt vun enger Websäit ass den zugräiche HTML-Code vun där Säit. Wéi en Haus säi Frame erënnert eng staark Stëftung, op där de Rescht vum Haus gebaut ass, sou eng Solidaritéit vun HTML fir eng Plattform ze maachen, op där eng Websäit geschafe ginn kann. HTML Struktur kann aus Texter oder Biller bestehen, an et beinhalt d'Hyperlinks déi Besucher benotzen fir un dëser Websäit ze navigéieren.
- Stil oder Presentatiounschicht
- De Stil oder d'Presentatiounschicht diktéiert wéi e strukturéiert HTML-Dokument op Besucher vun engem Site kuckt. Dëse Layer gëtt definéiert vun CSS (Cascading Style Sheets). Dës Fichier enthalen Stiler, déi uginn, wéi de Dokument an engem Webbrowser kënnt. Op heiteg Web, kann d'Stil Layer och Media Queries schreiwen , déi d'Site vun engem Site z'änneren kënnen op Basis vu verschiddene Screengréissten an Apparater .
- Verhalen
- De Verhalen Layout ass de Layer vun enger Websäit déi reegelméisseg Benotzer Benotzeraktioun behuelen oder Ännerungen an enger Säit baséiert op Basis vun enger Rei vu Konditiounen. Fir déi meescht Websäiten ass de Verhalensniveau d' JavaScript Interaktiounen op der Säit.
Firwat misst Dir d'Layer trennen?
Wann Dir eng Websäit schreift, ass et wënschenswäert, d'Schichten esou abegraff wéi méiglech ze halen. Struktur soll fir Är HTML-, Visuellstil an d'CSS vertraut ginn an d'Verhalen op all Skripten déi de Site benotzt.
E puer vun de Virdeeler vun der Trennung vun de Schichten sinn:
- Shared resources
- Wann Dir eng extern CSS Datei oder JavaScript-Datei schreift, kënnt Dir dës Datei op all Säit vun Ärer Websäit benotzen. Wann Dir e Changement an dës Datei änneren musst, vläicht verschidden typographesch Styles op der Websäit aktualiséieren, all Säit déi benotzt gëtt vun der Stilblock d'Ännerung. Et gëtt keng Notwendegkeet fir all Säit vun der Websäit individuell z'änneren, wat fir eng méi groer Site e grousst Betrib ass.
- Méi schnelle Downloads
- Soubal d'Skript oder Stilerheet vun Ärem Client d'éischt Kéier downloadéiert ass, gëtt et vu sengem Browser navigéiert. Well dës gemeinsam Ressourcen sinn elo am Cache enthalten, sinn aner Säiten, déi an der Browser méi séier beaarbecht ginn, wat d'Gesamtplanggeschwindigkeit an d'Performance verbessert.
- Multi-Person Équipen
- Wann Dir méi wéi eng Persoun an enger Websäit benotzt hutt, kënnt Dir Systeme benotzen fir "Check" an "Check Out" vun Dateien ze garantéieren, datt jiddereen an der Équipe mat den neitste Versioune vun dëse Fichiere geschafft gëtt. Dëst ass méi schwéier fir ze maachen, wann Stiler a Verhale mat Strukturstrukturen interagéiert ginn.
- SEO
- E Site mat enger kloer Trennung vu Stil a Struktur ass méi wahrscheinlech fir d' Sichmaschinn besser ze maachen, well déi Siten kënnen dës Inhalter méi effektiv kreéieren an d'Säit ze verstoen ouni sech visuell Art a Verhalen Informatiounen ze verdrängen.
- Accessibilitéit
- Externe Formblieder an Skriptdateien sinn méi zougänglech fir Leit a Browser. Well do ass d'Trennung vu Stil a Struktur, Software wéi Schreifleser kënne liicht Inhalt vun der Struktur Schicht verleeën ouni ze stoppen duerch Stiler, déi se net iergendwou benotze kënnen.
- Réckkompatibilitéit
- Wann Dir e Site mat der Entwécklungsschicht entwéckelt huet, da gëtt et méi kompatibel datt Browsers oder Apparater, déi keng gewësse CSS-Stiele benotze kënnen oder déi JavaScript ze deaktivéiert hunn, kënnen d'HTML nach ëmmer kucken. Är Websäit kann dann progressiv verstäerkt ginn mat Features fir d'Browser, déi se ënnerstëtzen.
HTML - Struktur Struktur
D'Strukturschicht ass wou Dir all den Inhalt speichert deen Är Clienten Liesen a kucke wëllt. Dëst wäert an normgerecht HTML5 kodéiert ginn an et kann Text a Biller wéi och Multimedia (Video, Audio, etc.) beinhalten. Et ass wichteg ze maachen datt all Aspekter vum Inhalt vun Ärer Säit an der Strukturschicht vertruede gëtt. Dëst erlaabt all Clienten déi JavaScript erofgelueden hunn oder wien net CSS gesinn kann nach ëmmer Zougang zu der gesamten Websäit, wann net all d'Funktionalitéit vun där Säit.
CSS - d'Styles Layer
Dir wäert all Är visuell Stile fir Är Websäiten an engem externen Formblatt erstellen. Dir kënnt verschidde Stylesheets benotzen, awer denk drun datt all eenzel CSS-Datei eng HTTP-Ufro erfuerdert ze kréien an de Site Performance ze beaflossen.
JavaScript - the Behaviour Layer
JavaScript ass d'gebräuchlechst Sprooch fir de Verhalensschicht, awer wéi ech scho gesot hunn CGI an PHP kënnen och Verwierkunge vu Websäit generéieren. Dat hei gesot, wann déi meescht Entwéckler sech op d'Verhalensschicht bezéien, bedeit et dës Schicht, déi direkt am Web-Browser aktivéiert gëtt - sou JavaScript ass bal ëmmer d'Sprooch vun der Wiel. Dir benotzt dës Schicht direkt mat dem DOM oder Document Object Model interagéieren. Schreiwe gëltege HTML am Inhalt Layer ass och wichteg fir DOM Interaktiounen an der Verhalensschicht.
Wann Dir am Verhalensschicht baut, sollt Dir och äusseren Skriptdateien genee wéi mat CSS benotzen. Dir kritt all déi selwecht Virdeeler vun engem externen Stylblat.