Ang mga nagtatrabaho sa industriya ng disenyo ng web ay nagbubuklod sa pagbuo ng front-end na website sa isang tatlong paa na dumi. Ang tatlong mga binti - ang tatlong layer ng web development - binubuo ng istraktura, estilo, at pag-uugali.
Bakit Dapat Mong Paghiwalayin ang Mga Layer?
Kapag lumilikha ka ng isang web page, ang istraktura nito ay dapat na i-relegated sa iyong HTML, visual na mga estilo sa CSS, at pag-uugali sa mga script. Ang ilan sa mga benepisyo ng paghihiwalay sa mga layer ay:
- Mga nakabahaging mapagkukunan: Kapag sumulat ka ng isang panlabas na CSS o JavaScript na file, maaaring gamitin ng anumang pahina sa site ang file na iyon. Kung kailangan mong gumawa ng pagbabago sa file na iyon, marahil na i-update ang ilang mga estilo ng pag-type sa website, ang bawat pahina na gumagamit ng stylesheet na ito ay makakakuha ng pagbabago. Hindi na kailangang i-edit ang bawat pahina ng website nang paisa-isa, na maaaring maging isang nakakalungkot na pangako para sa isang malaking website.
- Mas mabilis na pag-download: Kapag na-download na ng script o stylesheet ng iyong customer sa unang pagkakataon, naka-cache ito ng web browser. Dahil ang mga nakabahaging mga mapagkukunan na ngayon ay nakapaloob sa cache ng browser, ang iba pang mga pahina na hinihiling sa browser ay mas mabilis na na-load, na nagpapabuti sa pangkalahatang bilis at pagganap ng pahina.
- Mga pangkat ng multi-tao: Kung mayroon kang higit sa isang tao na nagtatrabaho sa isang website nang sabay-sabay, maaari mong gamitin ang mga system na nagpapahintulot sa mga file na i-check in at out upang matiyak na lahat ay nagtatrabaho sa mga pinakabagong bersyon. Ito ay mas mahirap gawin kung ang mga estilo at pag-uugali ay may kaugnayan sa mga dokumento ng istraktura.
- SEO: Ang isang site na may malinaw na paghihiwalay ng estilo at istraktura ay malamang na gumanap ng mas mahusay para sa mga search engine dahil maaari nilang pag-crawl ang nilalaman na mas epektibo at maunawaan ang pahina nang hindi nalulungkot sa visual na estilo at impormasyon sa pag-uugali.
- Accessibility: Ang mga panlabas na style sheet at mga file ng script ay mas naa-access sa mga tao at sa mga browser. Ang software tulad ng mga mambabasa sa screen ay maaaring magproseso ng nilalaman mula sa layer ng istraktura nang mas madali nang walang pagharap sa mga estilo na hindi nila magagamit.
- Pabalik na pagkakatugma: Ang isang site na idinisenyo na may mga hiwalay na mga layer ng pag-unlad ay mas malamang na maging pabalik-katugma dahil ang mga browser at mga aparato na hindi maaaring gumamit ng ilang mga estilo ng CSS o na hindi pinagana ang JavaScript ay maaari pa ring tingnan ang HTML. Pagkatapos ay maaari mong mapahusay ang iyong website nang paunahan na may mga tampok para sa mga browser na sumusuporta sa mga ito.
HTML: Ang Istraktura Layer
Ang istraktura o nilalaman layer ng isang web page ay ang pinagbabatayan HTML code ng pahina na iyon. Tulad ng frame ng isang bahay ay lumilikha ng isang matatag na pundasyon kung saan ang natitirang bahagi ng bahay ay itinayo, isang matatag na pundasyon ng HTML ay lumilikha ng isang plataporma kung saan maaaring malikha ang isang website.
Ang layer ng istraktura ay kung saan mo iniimbak ang lahat ng nilalaman na gustong basahin o tingnan ng iyong mga customer. Ang istraktura ng HTML ay maaaring binubuo ng teksto at mga imahe, at kabilang dito ang mga hyperlink na magagamit ng mga bisita upang mag-navigate sa paligid ng website. Ito ay naka-code sa mga pamantayan na sumusunod sa HTML5 at maaaring magsama ng teksto, mga imahe, at multimedia (video, audio, atbp.).
Ang bawat aspeto ng nilalaman ng isang site ay dapat na kinakatawan sa layer ng istraktura. Pinapayagan nito ang mga customer na naka-JavaScript ang naka-off o kung sino ang hindi makakakita ng CSS access sa buong website, kung hindi lahat ng pag-andar nito.
CSS: Ang Mga Layer ng Mga Estilo
Ang layer na ito ay nagpapahiwatig kung paano ang isang nakabalangkas na HTML na dokumento ay titingnan sa mga bisita ng isang site at tinutukoy ng CSS (Cascading Style Sheets). Ang mga file na ito ay naglalaman ng mga istilo ng pagtuturo para sa kung paano dapat ipakita ang dokumento sa isang web browser. Ang estilo layer ay karaniwang may kasamang mga query sa media na nagbabago sa isang display ng site batay sa laki ng screen at aparato.
Ang lahat ng mga visual na estilo para sa isang website ay dapat na naninirahan sa isang panlabas na stylesheet. Maaari kang gumamit ng maramihang mga stylesheets, ngunit tandaan na ang bawat CSS file ay nangangailangan ng isang HTTP na kahilingan upang makuha ito, na nakakaapekto sa pagganap ng site.
JavaScript: Ang Layer ng Pag-uugali
Ang pag-uugali layer ay gumagawa ng isang website na interactive, na nagpapahintulot sa pahina upang tumugon sa mga pagkilos ng gumagamit o upang baguhin batay sa isang hanay ng mga kondisyon. Ang JavaScript ay ang pinaka karaniwang ginagamit na wika para sa layuning pag-uugali, ngunit ang CGI at PHP ay masyadong madalas na ginagamit, masyadong.
Kapag tumutukoy ang mga developer sa layer ng pag-uugali, karamihan sa mga ito ay nangangahulugang ang layer na aktibo nang direkta sa web browser. Ginagamit mo ang layer na ito upang direktang makipag-ugnay sa DOM (Document Object Model). Ang wastong pagsusulat ng HTML sa layer ng nilalaman ay mahalaga para sa mga pakikipag-ugnayan ng DOM sa layer ng pag-uugali. Kapag nagtatayo ka sa layer ng pag-uugali, dapat mong gamitin ang panlabas na mga file ng script, tulad ng CSS, upang i-optimize ang bilis at pagganap.
