Ang Tatlong Layer ng Web Design

Bakit ang lahat ng mga website ay binuo na may isang kumbinasyon ng istraktura, estilo, at pag-uugali

Ang isang pangkaraniwang pagkakatulad na ginamit upang ilarawan ang pag-unlad sa pag-unlad sa harap ng web ay na ito ay tulad ng isang 3-legged stool. Ang mga 3 paa na ito, na kilala rin bilang 3 layers ng web development, ay Structure, Style, at Behaviors.

Ang Tatlong Layer ng Web Development

• Istraktura o nilalaman 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, gayundin ang isang matatag na pundasyon ng HTML ay lumikha ng isang platform kung saan maaaring malikha ang isang website. Ang istraktura ng HTML ay maaaring binubuo ng teksto o mga imahe at kasama dito ang mga hyperlink na magagamit ng mga bisita upang mag-navigate sa paligid ng web site na iyon.
• Estilo o pagtatanghal layer
  • Ang estilo o pagtatanghal layer dictates kung paano ang isang nakabalangkas HTML dokumento ay tumingin sa mga bisita ng isang site. Ang layer na ito ay tinukoy ng CSS (Cascading Style Sheets). Ang mga file na ito ay naglalaman ng mga estilo na nagpapahiwatig kung paano dapat ipakita ang dokumento sa isang web browser. Sa Web ngayon, maaari ring isama ng estilo layer ang Mga Query sa Media na maaaring magbago ng display ng isang site batay sa iba't ibang mga laki ng screen at device .
• Pag-uugali
  • Ang layer ng pag-uugali ay ang layer ng isang pahina ng Web na maaaring tumugon sa iba't ibang mga pagkilos ng gumagamit o gumawa ng mga pagbabago sa isang pahina batay sa isang hanay ng mga kondisyon. Para sa karamihan sa mga pahina ng Web, ang antas ng pag-uugali ay ang pakikipag-ugnayan ng JavaScript sa pahina.

Bakit Dapat Mong Paghiwalayin ang Mga Layer?

Kapag lumilikha ka ng isang web page, kanais-nais na itago ang mga layer nang hiwalay. Ang istraktura ay dapat na confided sa iyong HTML, visual na mga estilo sa CSS, at pag-uugali sa anumang mga script na ginagamit ng site.

Ang ilan sa mga benepisyo ng paghihiwalay sa mga layer ay:

• Mga ibinahaging mapagkukunan
  • Kapag sumulat ka ng isang panlabas na CSS file o JavaScript file, maaari mong gamitin ang file na iyon sa pamamagitan ng anumang pahina sa iyong web site. 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 para sa mas malaking site ay maaaring maging isang nakapanghihina na gawain.
• Mas mabilis na pag-download
  • Kapag na-download na ng script o stylesheet ng iyong customer sa unang pagkakataon, naka-cache ito sa pamamagitan ng kanilang web browser. Dahil ang mga nakabahaging mga mapagkukunan na ito ay nasa cache na, ang iba pang mga pahina na hinihiling sa browser ay mas mabilis na nai-load, na nagpapabuti sa pangkalahatang bilis at pagganap ng pahina.
• Mga multi-person na koponan
  • Kung mayroon kang higit sa isang tao na nagtatrabaho sa isang web site nang sabay-sabay, maaari mong gamitin ang mga system na para sa "check in" at "tingnan" ng mga file upang matiyak na lahat ng tao sa koponan ay nagtatrabaho sa mga pinakabagong bersyon ng mga file na ito. 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 ang mga site na iyon ay maaaring mas epektibong mag-crawl sa nilalaman at maunawaan ang pahina nang hindi nakaka-down na may visual na estilo o pag-uugali ng impormasyon.
• Accessibility
  • Ang mga panlabas na style sheet at mga file ng script ay mas naa-access sa mga tao at sa mga browser. Dahil may pagkakahiwalay na estilo at istraktura, ang software tulad ng mga mambabasa ng screen ay mas madaling maproseso ang nilalaman mula sa layer ng istraktura nang hindi nakakaubos sa pamamagitan ng mga estilo na hindi nila magagamit.
• Pabalik pagkakatugma
  • Kapag mayroon kang isang site na idinisenyo gamit ang mga layer ng pag-unlad, magiging mas pabagu-bago ito dahil ang mga browser o device na hindi maaaring gumamit ng ilang mga estilo ng CSS o na maaaring hindi pinagana ang JavaScript ay maaari pa ring tingnan ang HTML. Ang iyong web site ay maaaring maging progresibong pinahusay na may mga tampok para sa mga browser na sumusuporta sa mga ito.

HTML - ang Istraktura Layer

Ang layer ng istraktura ay kung saan mo iniimbak ang lahat ng nilalaman na gustong basahin o tingnan ng iyong mga customer. Ito ay naka-code sa mga pamantayan na sumusunod sa HTML5 at maaari itong magsama ng teksto at mga imahe pati na rin ang multimedia (video, audio, atbp.). Mahalaga na tiyakin na ang bawat aspeto ng nilalaman ng iyong site ay kinakatawan sa layer ng istraktura. Pinapayagan nito ang anumang mga customer na may JavaScript na naka-off o kung sino ang hindi maaaring tingnan ang CSS upang magkaroon ng access sa buong web site, kung hindi lahat ng pag-andar ng site na iyon.

CSS - ang Mga Layer ng Mga Estilo

Gagawin mo ang lahat ng iyong mga visual na estilo para sa iyong web site sa isang panlabas na style sheet. Maaari kang gumamit ng maramihang mga stylesheets, ngunit tandaan na ang bawat hiwalay na file na CSS ay nangangailangan ng paghiling ng HTTP, na nakakaapekto sa pagganap ng site.

JavaScript - ang Layer ng Pag-uugali

Ang JavaScript ay ang pinaka karaniwang ginagamit na wika para sa layer ng pag-uugali, ngunit tulad ng nabanggit ko dati, ang CGI at PHP ay maaari ring bumuo ng pag-uugali ng Web page. Na sinasabi, kapag ang karamihan sa mga nag-develop ay sumangguni sa layer ng pag-uugali, ang ibig sabihin nito ay ang layer na aktibo nang direkta sa Web browser - kaya ang JavaScript ay halos palaging ang wika ng pagpili. Ginagamit mo ang layer na ito upang direktang makipag-ugnay sa DOM o Document Object Model. Mahalaga rin ang pagsulat ng wastong HTML sa layer ng nilalaman 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. Nakukuha mo ang lahat ng parehong mga pakinabang ng paggamit ng isang panlabas na style sheet.