Hoekom is alle webwerwe gebou met 'n kombinasie van struktuur, styl en gedrag
'N Algemene analogie wat gebruik word om die ontwikkeling van 'n front-end webwerf te beskryf, is dat dit soos 'n 3-leggige stoel is. Hierdie 3 bene, wat ook bekend staan as die 3 lae webontwikkeling, is Struktuur, Styl en Gedrag.
Die drie lae van webontwikkeling
- Struktuur- of inhoudslaag
- Die struktuur of inhoudslaag van 'n webblad is die onderliggende HTML-kode van die bladsy. Soos 'n huis se raam skep 'n sterk fondament waarop die res van die huis gebou word, so maak 'n stewige fondament van HTML 'n platform waarop 'n webwerf geskep kan word. HTML-struktuur kan bestaan uit teks of beelde en dit bevat die hiperskakels wat besoekers sal gebruik om op die webwerf te navigeer.
- Styl of aanbiedingslaag
- Die styl of aanbiedingslaag bepaal hoe 'n gestruktureerde HTML-dokument na die besoekers van 'n webwerf sal kyk. Hierdie laag word gedefinieer deur CSS (Cascading Style Sheets). Hierdie lêers bevat style wat aandui hoe die dokument in 'n webblaaier vertoon moet word. Op vandag se web kan die style laag ook Mediavrae insluit wat 'n webwerf se vertoning kan verander, gebaseer op verskillende skermgroottes en toestelle .
- gedrag
- Die gedragslaag is die laag van 'n webblad wat op verskillende gebruiker aksies kan reageer of veranderinge aan 'n bladsy kan maak gebaseer op 'n stel voorwaardes. Vir die meeste webbladsye is die gedragsvlak die JavaScript- interaksies op die bladsy.
Hoekom moet jy die lae skei?
As jy 'n webblad skep, is dit wenslik om die lae so geskei as moontlik te hou. Struktuur moet vertrou word op jou HTML, visuele style vir die CSS, en gedrag op enige skrifte wat die werf gebruik.
Van die voordele van die skeiding van die lae is:
- Gedeelde bronne
- As u 'n eksterne CSS-lêer of JavaScript-lêer skryf, kan u die lêer gebruik deur enige bladsy op u webwerf. As u 'n verandering in die lêer wil maak, miskien om sekere tipografiese style op die webwerf op te dateer, sal elke bladsy wat die styleblad gebruik, die verandering kry. Daar is nie nodig om elke bladsy van die webwerf individueel te wysig nie, wat vir 'n groter webwerf 'n slegte onderneming kan wees.
- Vinniger aflaaie
- Sodra die script of style heet die eerste keer deur jou kliënt afgelaai is, word dit deur hul webblaaier gekak. Omdat hierdie gedeelde hulpbronne nou in die kas is, word ander bladsye wat in die blaaier aangevra word vinniger laai, wat die algehele bladsyspoed en prestasie verbeter.
- Multi-persoon spanne
- As jy meer as een persoon op 'n webwerf werk, kan jy stelsels gebruik wat vir die "check-in" en "check out" van lêers verseker dat almal op die span met die nuutste weergawes van hierdie lêers werk. Dit is baie moeiliker om te doen as style en gedrag verweef word met struktuurdokumente.
- SEO
- 'N webwerf wat 'n duidelike skeiding van styl en struktuur het, sal waarskynlik beter wees vir soekenjins, aangesien daardie webwerwe die inhoud doeltreffend kan kruip en die bladsy verstaan sonder om met visuele styl- of gedragsinligting te raak.
- Toeganklikheid
- Eksterne style sheets en script lêers is meer toeganklik vir mense en blaaiers. Omdat daar 'n skeiding van styl en struktuur is, kan sagteware soos skermlesers die inhoud van die struktuurlaag makliker verwerk sonder om vas te maak van style wat hulle nie kan gebruik nie.
- Backwards verenigbaarheid
- As u 'n webwerf het wat ontwerp is met die ontwikkelingslae, sal dit meer agteruitkompatibel wees, want blaaiers of toestelle wat nie sekere CSS-style kan gebruik nie, of wat dalk JavaScript deaktiveer, kan steeds die HTML sien. Jou webwerf kan dan geleidelik verbeter word met kenmerke vir die blaaiers wat hulle ondersteun.
HTML - die struktuurlaag
Die struktuurlaag is waar u al die inhoud stoor wat u kliënte wil lees of kyk. Dit sal gekodeer word in HTML5 wat voldoen aan standaarde en dit kan teks en beelde insluit sowel as multimedia (video, klank, ens.). Dit is belangrik om seker te maak dat elke aspek van jou webwerf se inhoud in die struktuurlaag verteenwoordig word. Dit laat enige kliënte wat JavaScript het afgeskakel of wie nie CSS kan sien om toegang tot die hele webwerf te hê nie, indien nie al die funksies van die werf nie.
CSS - die style laag
Jy sal al jou visuele style vir jou webwerf in 'n eksterne stylblad skep. U kan verskeie style sheets gebruik, maar onthou dat elke afsonderlike CSS-lêer 'n HTTP-versoek vereis om te haal, wat die prestasie van die werf beïnvloed.
JavaScript - die gedragslaag
JavaScript is die mees gebruikte taal vir die gedragslaag, maar soos ek voorheen genoem het, kan CGI en PHP ook webbladgedrag genereer. Dit word gesê, wanneer die meeste ontwikkelaars na die gedragslaag verwys, beteken dit die laag wat direk in die webblaaier geaktiveer word, so JavaScript is byna altyd die taal van keuse. U gebruik hierdie laag om direk met die DOM of Document Object Model te kommunikeer. Om geldige HTML in die inhoudslaag te skryf, is ook belangrik vir DOM-interaksies in die gedragslaag.
Wanneer u die gedragslêer bou, moet u eksterne skriflêers gebruik net soos met CSS. Jy kry dieselfde voordele van die gebruik van 'n eksterne stylblad.