Wêrom alle websites binne boud mei in kombinaasje fan struktuer, styl en gedrach
In mienskiplike analogy dy't brûkt wurdt foar it beskriuwen fan front-end-websteeûntwikkeling is dat it is as in 3-legged holle. Dizze 3 skonken, dy't ek bekend binne as de 3 lagen fan webûntwikkeling, binne Struktuer, Styl en Behavioren.
De Trije Layers fan Webûntwikkeling
- Struktuer of ynhâld ljocht
- De struktuer of in ynhâldflak fan in webside is de ûndersteande HTML-koade fan dizze side. Lykas in húshâlding ûntstiet in sterke stifting wêryn't it rest fan it hûs boud is, sadat in stevige stifting fan HTML in platfoarm meitsje wêryn in webside makke wurde kin. HTML-struktuer kin bestean út tekst of ôfbyldingen en it befettet de hyperkeppelings dy't besikers brûke om dizze webstee te navigearjen.
- Styl of presintaasje ljocht
- De styl of presintaasjebline befettet hoe't in struktureare HTML dokumint nei in besikers fan 'e side besjen sil. Dizze layer is definiearre troch CSS (Cascading Style Sheets). Dizze bestannen befetsje stilen dy't oanjaan hoe't it dokumint werjûn wurde moat yn in webblêder. Op it hjoeddeiske web kinne de stylstyl ek Media Queries opnimme dy't de advertinsjes fan in side feroarje kinne basearre op ferskillende skermgrutte en apparaten .
- Hâlden en dragen
- De gedrachslach is it laach fan in webside dy't reageard kin op ferskillende brûkershannelings of feroarings oan in side dy't basearre is op in tal betingsten. Foar de measte websiden soe it gedrachnivo de JavaScript- ynteraksjes wêze op 'e side.
Wêrom moatte jo de lagen te ûnderskieden?
As jo in webside skeppe, is it winsklik om de lagen as ôfsletten as mooglik te hâlden. Struktuer moatte jo befetsje oan jo HTML, fisuele stilen nei de CSS, en gedrach foar alle skripts dy't de side brûkt.
Guon fan 'e foardielen fan it skieden fan de lagen binne:
- Shared resources
- As jo in eksterne CSS-triem of JavaSkript-bestân skriuwe, kinne jo dizze triem brûke troch elke side op jo webside. As jo in wiziging meitsje moatte oan dizze triem, miskien om guon typografyske stilen op 'e webside te aktualisearjen, elke side dy't it stylblêd brûkt sil de wiziging krije. It is net nedich om elke side fan 'e webside yndividu te bewurkjen, wêrtroch foar gruttere site in fergriemjende ûndernimming wêze kin.
- Faster downloads
- Sawol it skript of stylblêd is ynladen troch jo klant de earste kear, wurdt it cached troch har webblêder. Om't dizze dielde middels no opnommen binne yn cache, wurde oare siden dy't frege binne yn 'e browser lade flugger, wêrmei de algemiene side-snelheid en prestaasje ferbettere.
- Multi-persone-teams
- As jo mear as ien persoan tagelyk wurkje op in webside, kinne jo systemen brûke om "yn te kontrolearjen" en "kontrolearje" fan triemen om te soargjen dat elkenien yn 'e ploech wurket mei de lêste ferzjes fan dizze bestannen. Dit is folle hurder te dwaan as stilen en gedrachsinnen mei struktuer dokuminten ferbûn binne.
- SEO
- In side dy't in dúdlike skieding fan styl en struktuer hat, kin wierskynlik better meitsje foar sykmasines, om't dizze siden dizze ynhâld better effektiv krije kinne en de side begripe sûnder ferwiderje mei visuele styl of ynformaasje fan gedrach.
- Tagonklikheid
- Eksterne stylblêden en skriptdateuren binne mear tagonklik foar minsken en browsers. Om't it is dat skieding fan styl en struktuer, kinne software lykas skermlêzers makliker meitsje fan ynhâld fan 'e struktuerflak sûnder dat se troch stilen trochgean kinne, dat se net iens kinne brûke.
- Efterkompatibiliteit
- As jo in side hawwe dy't ûntwikkele is mei de ûntwikkeling-lagen, sil it mear weromkomme kompatibel wêze as browsers of apparaat dat gjin bepaalde CSS-stilen brûke kinne of dy't Java-útskeakel hawwe kin de HTML noch sjen. Jo webside kin dan stadichoan fersterke wurde mei funksjes foar de browsers dy't se stypje.
HTML - de struktuerlagen
De struktuerfersk is wêr't jo alle ynhâld opslaan dy't jo klanten lêze wolle of sjen. Dit sil codearre wurde yn standerts dy't kompleet HTML5 binne en it kin tekst en bylden as multimedia (tekst, audio, ensfh.) Befetsje. It is belangryk om te soargjen dat elk aspekt fan jo ynhâld fan 'e side fertsjintwurdige is yn' e struktuerfersk. Dit soarget elke klanten dy't JavaSkript ôfwiksele hawwe of wa kinne CSS net besjen kinne oan tagong ta de folsleine webside, as net alle funksjes fan dizze side.
CSS - de Styles Layer
Jo sille alle jo fisuele stilen foar jo webside yn in ekstern stylblêd meitsje. Jo kinne meardere stylblêden brûke, mar tink derom dat elke aparte CSS-bestân in HTTP-fersyk freget om te ûntfangen, ynflaasje fan 'e prestaasjes fan' e side.
JavaScript - de Behavior Layer
JavaSkript is de meast brûkte taal foar it gedrachslied, mar as ik earder neamd haw, kin CGI en PHP ek webstee-gedrach generearje. Dat seit, as de measte ûntwikkelers ferwize nei it gedrachslach, betsjutte dat dizze lagen direkt direkte yn 'e webbrowser is - sa JavaScript is hast altyd de taal fan kar. Jo brûke dit lagen om direkt te kommunikaasje mei it DOM of Document Object Model. Skriftlik jildende HTML yn 'e ynhâldslach is ek wichtich foar DOM-ynteraksjes yn it gedrachslied.
As jo yn 'e gedrachslach bouwe, moatte jo eksterne skriptdialo's brûke lykas mei CSS. Jo krije alle deselde foardielen fan it brûken fan in eksterne stylblêd.