Ngano nga ang tanan nga mga website gitukod nga adunay kombinasyon sa estruktura, estilo, ug kinaiya
Ang usa ka komon nga analogy nga gigamit sa paghulagway sa pagpalambo sa front-end nga website mao nga kini sama sa 3-legged stool. Kining 3 ka bitiis, nga nailhan usab nga 3 ka mga layer sa web development, mao ang Istraktura, Estilo, ug Mga Kinaiya.
Ang Tulo ka Layers sa Web Development
- Kaayohan sa layer o sulod
- Ang istruktura o sulod nga layer sa usa ka web page mao ang nagpahipi nga code sa HTML niana nga panid. Sama sa usa ka balayan sa balay nagmugna og usa ka lig-on nga patukoranan diin gitukod ang ubang bahin sa balay, mao man ang lig-on nga pundasyon sa HTML nga naghimo sa usa ka plataporma diin ang usa ka website mahimong malalang. Ang istruktura sa HTML mahimong maglangkob sa teksto o mga hulagway ug kini naglakip sa mga hyperlink nga gamiton sa mga bisita aron makalibot sa web site.
- Ang estilo o presentasyon nga layer
- Ang estilo o presentasyon nga panapton nagpunting kon unsaon pagtan-aw sa usa ka structured HTML nga dokumento sa mga bisita sa usa ka site. Kini nga layer gihubit sa CSS (Cascading Style Sheets). Kini nga mga file adunay mga estilo nga nagpakita kon unsaon nga ang dokumento kinahanglan ipakita sa usa ka web browser. Sa Web karon, ang estilo nga layer mahimo usab nga maglakip sa Media Queries nga makapausab sa usa ka display sa site nga gibase sa lain-laing mga gidak-on sa screen ug mga device .
- Paggawi
- Ang layer sa kinaiya mao ang layer sa usa ka Web page nga makatubag sa lain-laing mga aksyon sa gumagamit o makahimo og mga pagbag-o sa usa ka pahina nga gibase sa usa ka hugpong sa mga kondisyon. Alang sa kadaghanang mga panid sa Web, ang lebel sa kinaiya mao ang interaksiyon sa JavaScript sa panid.
Nganong Kinahanglan Nimong Ipahimulag ang mga Layers?
Sa diha nga ikaw naglalang sa usa ka web page, kini nga pagtinguha sa paghupot sa mga lut-od ingon nga nahimulag kutob sa mahimo. Ang estruktura kinahanglan nga itugyan ngadto sa imong HTML, estilo sa panan-aw sa CSS, ug mga kinaiya sa bisan unsang mga script nga gigamit sa site.
Ang pipila sa mga kaayohan sa pagbulag sa mga lut-od mao ang:
- Gipaambitan nga mga kapanguhaan
- Kon ikaw magsulat sa usa ka external CSS file o JavaScript file, mahimo nimo gamiton ang file sa bisan unsang panid sa imong web site. Kung kinahanglan ka magbag-o sa maong file, tingali aron sa pag-update sa pipila ka estilo sa typographic sa website, ang matag pahina nga naggamit nianang estilo sa papel makadawat sa kausaban. Dili kinahanglan nga i-edit ang matag panid sa website nga tagsa-tagsa, nga alang sa mas dako nga site mahimo nga usa ka malisud nga buluhaton.
- Mas dali nga ma-download
- Sa higayon nga ang script o stylesheet gi-download sa imong kustomer sa unang higayon, kini gisulod sa ilang web browser. Tungod kay kini nga mga kapanguhaan nga anaa na karon anaa na sa cache, ang ubang mga panid nga gihangyo sa browser mas dali nga mabug-atan, nga nagpalambo sa kinatibuk-ang pagpadali sa pahina ug pasundayag.
- Mga grupo sa multi-tawo
- Kung adunay usa ka tawo nga nagtrabaho sa usa ka web site sa makausa, mahimo nimo gamiton ang mga sistema nga alang sa "check in" ug "check out" sa mga file aron masiguro nga ang tanan sa team nagtrabaho uban sa pinakabag-o nga bersyon niini nga mga file. Mas lisud kini buhaton kon ang mga estilo ug mga kinaiya adunay duha ka mga dokumento sa istruktura.
- SEO
- Ang usa ka site nga adunay usa ka tin-aw nga pagbulag sa estilo ug istruktura lagmit nga mas maayo alang sa mga search engine tungod kay kini nga mga site mahimo nga mas epektibo nga mag-crawl sa maong sulod ug makasabut sa panid nga dili mapuno sa estilo sa estilo o pamatasan.
- Pag-abut
- Ang external style sheets ug mga file sa script mas dali nga makuha sa mga tawo ug sa mga browser. Tungod kay adunay pagbulag sa estilo ug istruktura, ang software nga sama sa mga magbabasa sa screen mas dali nga makaproseso sa sulod gikan sa layer sa istruktura nga dili maputol ang mga estilo nga dili nila gamiton.
- Balik sa pagkompirma
- Sa diha nga ikaw adunay usa ka site nga gidisenyo uban sa mga layers sa pag-uswag, kini mahimong mas paatras nga magkatakdo tungod kay ang mga browser o device nga dili magamit ang piho nga estilo sa CSS o nga mahimong adunay disable JavaScript mahimo gihapon nga makita ang HTML. Ang imong web site mahimo dayon nga mapauswag pinaagi sa mga feature alang sa mga browser nga nagsuporta kanila.
HTML - ang Layi sa Istruktura
Ang istruktura nga layer mao ang diin imong gitipigan ang tanan nga mga sulod nga gusto sa imong mga kustomer sa pagbasa o pagtan-aw. Kini pag-code sa mga sumbanan nga compliant HTML5 ug kini mahimong maglakip sa mga teksto ug mga imahen ingon man sa multimedia (video, audio, ug uban pa). Importante nga masiguro nga ang matag aspeto sa sulod sa imong site gihulagway diha sa layer sa istruktura. Kini nagtugot sa bisan kinsa nga mga kustomer nga adunay JavaScript nga gipalayo o kinsa dili makatan-aw sa CSS aron makabaton gihapon sa pag-access sa tibuok nga web site, kung dili ang tanang gamit sa maong site.
CSS - ang Styles Layer
Mahimo nimong himoon ang tanan nimo nga mga estilo sa biswal alang sa imong web site sa usa ka estilo sa gawas nga estilo. Makagamit ka og daghang mga estilo sa estilo, apan hinumdumi nga ang matag lain nga CSS file nagkinahanglan sa hangyo sa HTTP nga makuha, nga makaapekto sa performance sa site.
JavaScript - ang Behavior Layer
Ang JavaScript mao ang labing kasagarang gigamit nga pinulongan alang sa layer sa kinaiya, apan sumala sa akong nahisgutan kaniadto, ang CGI ug PHP mahimo usab nga makamugna sa mga kinaiya sa Web page. Kana nga pag-ingon, kung ang kadaghanan nga mga tig-usbaw nagpasabut sa mga lihok sa kinaiya, kini nagpasabot nga ang layer nga gi-activate direkta sa Web browser - mao nga ang JavaScript hapit kanunay ang pinulongan sa pagpili. Gigamit nimo kini nga layer aron makig-uban direkta sa DOM o Document Object Model. Ang pagsulat sa balido nga HTML sa sulod layer mahinungdanon usab alang sa DOM interactions sa layer sa kinaiya.
Kon ikaw magtukod sa layer sa kinaiya, kinahanglan nga gamiton nimo ang eksternal nga mga file sa script sama sa CSS. Nakuha nimo ang tanan nga susama nga mga bentaha sa paggamit sa usa ka estilo sa estilo sa gawas.