Zergatik webgune guztiak egitura, estiloa eta jokabidearen konbinazioak dira
Front-end web garapena deskribatzeko erabiltzen den analogia arrunt bat 3 hankako taburetea dela da. Hiru hanka horiek, web garapenaren 3 geruzak ere deitzen direnak, Estruktura, Estiloa eta Kontuak dira.
Web garapenaren hiru geruzak
- Egitura edo edukien geruza
- Web orrialde baten egitura edo edukia geratzen da orrialde horren azpiko HTML kodea. Etxeko marko baten antzera, etxe osorako eraikuntza sendoa sortzen du, beraz, HTML oinarri sendoa sortzen du webgune bat sortzeko. HTML egitura testua edo irudiak izan daiteke eta webgune horren inguruan nabigatzen dutenen hiperestekak sartzen ditu.
- Estilo edo aurkezpen geruza
- Estilo edo aurkezpen-geruzak dokumentu HTML egituratu bateko bisitariei nola begiratu egingo die. Geruza honek CSS (Cascading Style Sheets) definitzen du. Fitxategi hauek dokumentu web arakatzailean nola bistaratu behar diren adierazten duten estiloak dituzte. Gaur egungo webean, estilo-geruza ere barne hartzen ditu multimedia-kontsultak , pantailaren tamainan eta gailuetan oinarritutako gunearen pantaila aldatzeko.
- portaera
- Portaera-geruza erabiltzaile baten ekintzetako bati erantzuteko web orrialde baten geruza da, edo orrialde baten aldaketak baldintza multzo batean oinarrituta. Web orrialde gehienetan, portaeraren maila orriko JavaScript interakzioak izango lirateke.
Zergatik geruzak banatu behar dituzu?
Web orri bat sortzen ari zarenean, desiragarria da geruzak bereizi ahal izateko ahalik eta gehien mantentzea. Egitura zure HTMLa, ikusizko estiloak CSSrako eta webgunearen erabilerarako edozein gidoiri zuzendu beharko litzaioke.
Geruzak bereizteko onura batzuk honakoak dira:
- Baliabide partekatuak
- Kanpoko CSS fitxategiak edo JavaScript fitxategiak idazten dituzunean, zure webguneko edozein orrialde erabil dezakezu. Fitxategi horren aldaketa bat egin behar baduzu, agian webgune tipografiko batzuk eguneratzeko, estilo- orri hori erabiltzen duen orrialdeak aldaketa egingo du. Webgunearen orrialde bakoitza banan-banan editatu beharrik ez dago, eta gune handiagoak larriki konpromisoa izan liteke.
- Deskarga azkarrak
- Behin zure bezeroak lehenengo aldiz deskargatutako script-a edo estilo-orria, bere web-arakatzailean gordetzen da. Baliabide partekatu horiek cachean daudenez gero, arakatzailean eskatzen diren beste orrialdeak azkarrago kargatzen dira, orriaren abiadura eta errendimendu orokorra hobetzen baititu.
- Hainbat pertsona talde
- Webgune batean lan egiten duen pertsona bat baino gehiago badituzu, fitxategiak "egiaztatu" eta "begiratu" egiteko sistemak erabil ditzakezu taldeko guztiek fitxategi hauen azken bertsioekin lanean dihardutela ziurtatzeko. Horrek zailagoa egiten du estilo eta portaerak egitura-dokumentuekin elkartzen direnean.
- SEO
- Estilo eta egituraren bereizketa garbia duen gunea hobe da bilatzaileak hobeto bilatzea , gune horiek modu eraginkorrean arakatzeko eduki hori eta orrialde hori ulertzen ez dutelako estilo bisualarekin edo jokabide-informazioarekin.
- erabilerraztasuna
- Kanpoko estilo-orriak eta script fitxategiak jende gehiagorentzat eta nabigatzaileentzat errazagoak dira. Estilo eta egituraren bereizketa dela eta, pantailako irakurleek bezalako softwarea erraz prozesatu dezakete egitura-geruzaren edukia, hala ere ezin dutela erabili estiloen bidez.
- Atzera bateragarritasuna
- Garapen-geruzekin diseinatutako gunea baduzu, atzera egin daiteke bateragarria, CSS estilo jakin batzuek ez dituzten edo JavaScript desgaitu ditzaketen nabigatzaileek edo gailuak desgaituta egon badituzte ere HTMLa ikus dezakete. Zure webgunea aurrerago pixkanaka hobetzen da onartzen duten arakatzaileentzako ezaugarriekin.
HTML - Estrukturaren geruza
Egitura-geruza zure bezeroek irakurri edo begiratu nahi duten eduki guztia gordetzen du. Honek HTML5 betetzen dituen estandarretan kodetuko du eta testua eta irudiak eta multimedia (bideoa, audioa, eta abar) sartu ahal izango ditu. Garrantzitsua da ziurtatu zure gunearen edukia alderdi guztietan egitura-geruzan irudikatzen dela. Horrek aukera ematen du Javascript desaktibatu edo JavaScript ezin duten bezeroek webgune osoarentzako sarbidea izan dezaten, baldin eta gune horretako funtzionaltasun guztia ez badute.
CSS - Estiluen geruza
Zure kanpoko estilo-orriko zure webguneko estilo bisual guztiak sortuko dituzu. Hainbat estilo-orri erabil ditzakezu, baina gogoratu CSS fitxategi bakoitzak behin-behineko HTTP eskaera behar duela eskuratu, guneen errendimendua eraginez.
JavaScript - Behavior Layer
Javascript portaera geruza gehien erabiltzen den hizkuntza da, baina aurretik aipatu dudan bezala, CGI eta PHPek web orriaren portaerak ere sor ditzakete. Hori esanda, garatzaile gehienek portaera-geruzari egiten diotenean, web-arakatzailean zuzenean aktibatzen den geruza esan nahi da, beraz, JavaScript ia beti aukeratzen du. Geruza hau erabiltzen duzu zuzenean DOM edo Dokumentu Objektu Ereduarekin elkarreragiteko. Edukien geruzan HTML baliagarria idaztea ere garrantzitsua da portaera-geruzako DOM elkarreraginetan.
Portaera-geruzan eraikitzen duzunean, kanpoko script fitxategiak erabili behar dituzu CSS-rekin. Kanpoko estilo-orri bat erabiliz abantaila guztiak lortzen dituzu.