Usa ka pasiuna sa web development

Balik sa akong adlaw (OK, sa atubangan sa akong adlaw), ang propesyon sa web developer usa ka ubos nga ang usa ka. Kini pwesto sa ubos itoy kaaway apan sa ibabaw Yankees fan sa scale sa propesyonal nga kadungganan. Tungod kay sa tanan nga mga tags ug sa transparency spacer mga larawan nga atong gigamit, kami nakita nga krudo hackers nga walay pagbati sa aesthetics.

Maayo, kita pa nga kulang sa aesthetic nga diwa, apan ingon nga ang mga Web og sa ingon ang propesyon sa web developer. Kini nga mga mga adlaw adunay mga dili maihap nga mga himan nga atong magamit sa paghimo sa maayo-nga gisulat, mga sumbanan-pagpahiuyon, ug matahum (OK, tingali nga sa milabay nga usa ka) web pages. Kadaghanan sa mga dako nga website nga imong paggamit sa karon (walay ulaw sampong: lakip na niini nga usa ka) gitukod sa paggamit niini nga mga himan nga.

Ang atong bevy sa mga himan sa browser sa katapusan nga nagtugot kanato sa paghimo sa mga butang sa web nga mahunahuna nga lang 10 ka tuig ang milabay, sama sa dili maihap nga mga social network nag-angkon nga mao ang labing maayo nga paagi sa pag-usik-usik sa imong panahon, “mainit nga” tech startups nag-angkon nga utro sa usa ka butang nga na nga gibuhat sa usa ka libo ka mga panahon, ug Angry Birds clones nag-angkon nga lamang sa gamay mas grabe pa kay sa orihinal nga sa. Ang tanan nga sa web. Busa tingali kini nga mga himan nga wala na sa labing dako nga mga gamit.

Busa unsa ang kini nga mga talagsaon nga mga himan nga akong na-istorya mahitungod sa? Nangulo sa dalan ang mga (prangka nga katingalahang) mga pinulongan nga gitawag HTML5, CSS3, ug JavaScript, nga akong angga sa mga 3 mga magkakabayo sa webocalypse. Ania ang usa ka pagtan-aw sa matag usa ka:

HTML

HTML (sa tukma nga paagi nga nailhan nga HyperText markup Language; imong makita nganong ang mga tawo nga dili gusto nga motan-aw sa dautan nga lang sa paggamit sa abli) mao ang pinulongan nga gigamit sa pag-ibutang sa web pages. Right-click sa niini nga pahina ug i-klik “View Source”. Nga ang HTML nga kini nga panid naggamit.

Esensya, HTML mao ang usa ka hugpong sa mga tags, nga ang browser ang pagsabot ug lays sa. Kay sa panig-ingnan, tan-awon niini nga HTML code:

<p>Wala ako mahibalo mahitungod kanimo, apan ganahan ko sa sa dinalian buton.</p>

<br>

<button>Click kanako!</button>

Kini HTML code nga text giputos sa usa ka parapo (ang <p> tag magsugod sa usa ka parapo, ang </p> tag matapos sa usa ka parapo.) Adunay usa ka linya break (ang <br>) ug unya ang usa ka button nga imong mahimo click sa imong kasingkasing sa sulod. Ang imong browser nga ibutang kini sa ibabaw sa mga tabil alang kaninyo.

Mao nga ang tanan maayo ug sa maayo nga. Apan kon ikaw adunay walay bisan unsa, apan HTML, you get a webpage that looks like it came straight out of the 1990’s. Dili daghan sa maayo nga miabut gikan sa dekada gihapon (estilo sa buhok, music, ug uban pa) Apan maghulat! Adunay mas!

CSS

Laing abli. Summer. CSS nagbarug alang sa Ug misulti Style Sheets, nga ang usa ka gamay sa usa ka kana tinuod tungod kay sila dili gayud pagbusay (bisan unsa nga paagi… kini computer code, dili sa usa ka busay!) CSS mao ang pinulongan nga gigamit sa estilo webpages. Kini, usab, kong hubaron sa imong browser.

CSS HTML ug buhat sa tingub – HTML naghimo sa panid sa layout, CSS naghatag kini sa iyang flair. Hunahunaa pagtukod sa usa ka balay: HTML naghatag sa drab apan gikinahanglan nga kahoy nga gambalay, CSS midugang sa neon mga kolor ug quirky kasangkapan.

CSS mao ang usa ka pretty laktod nga pinulongan: alang sa usa ka HTML tag (sama sa usa ka parapo), nga kamo mahimo hingalan sa mga hiyas alang sa mga nagkalain-laing mga klase sa estilo. Ang imong browser mobasa sa CSS ug paggamit niini sa tanan nga mga matching HTML tags. Kay sa panig-ingnan:

p {

kolor: pula nga;

font-size: 16px;

}

Mao nga sa matag paragraph (mga butang sa HTML <p> tags) adunay pula nga font ug 16 pixels sa gidak-on. Kon namatikdan, kini mao ang pipila sa mga sama nga estilo nga imong magamit sa Microsoft Pulong ug uban pang mga aplikasyon.

Busa karon ang imong webpages nga gibutang sa gawas ug sila motan-aw pretty. Apan dinhi ang butang: nga ang tanan nga ilang buhaton. Sila lang molingkod didto ug tan-awon pretty. Nga mao ang daku ug ang tanan, apan ang mga tiggamit sa web gusto nga mas. Sila gusto lamiang Animasyon. Gusto nila nga pop-ups (OK, tingali sila sa gibuhat ni balik sa 2002, apan ako digress.) Gusto nila nga mga buton nga buhaton butang nga sa diha nga ikaw click sa ibabaw nila.

About nga katapusan nga sa usa ka – nga ang usa ka isyu. Ikaw makahimo sa usa ka <button> sa HTML, ug ikaw mahimo click kini sa tanan nga mga semana, apan kana nga dili sa pagbuhat sa bisan unsa nga butang sa bisan unsa nga panahon sa dili madugay. Kon gusto sa mga button sa, oh ako wala masayud, ibalhin ang imong elepante sa screen ug pag-atake sa usa ka butang, then you need something more.

JavaScript

JavaScript mao ang dili usa ka abli, kon ikaw naghunahuna. Sila gitawag kini JavaScript tungod kay kini mitan-aw sama sa programming pinulongan nga gitawag Java, nga mao ang hinungdan sa lain nga kini dili. Anyway, JavaScript mao ang a proper programming language that causes all the dynamic effects imong tan-awa sa web.

Sama sa bisan unsa nga programming nga pinulongan, JavaScript mao ang usa ka serye sa mga sugo nga baryable ug sa paggamit sa mga kalihokan. Ang cool nga bahin mahitungod sa JavaScript (pag-ayo, ingon sa cool ingon sa usa ka programming pinulongan mahimong) mao nga kamo makagamit sa mga HTML nga mga elemento (like paragraphs and buttons) and CSS styles (like font color and size) and change them. Look at this code:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – ang $ sign tells the browser to find all matching elements, and the ‘p’ means it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to blue.

What I find interesting (again, kini mao ang tanan nga gikan sa panglantaw sa usa ka “webdev”) mao ang paagi nga Elegantly sa tulo ka pinulongan magtinabangay. Nga katapusan nga linya sa JavaScript makig-istorya sa mga panid sa HTML ug sa CSS nga gigamit sa estilo sa niini. Kini dili sama sa kini nga mga pinulongan mao ang mga lain-laing lang nga sangkap sa mao gihapon nga butang – sila ang usa ug sa mao usab nga, sa lain-laing mga kilid sa mao gihapon nga katingalahang makina.

Paminawon makaiikag? Sa akong hunahuna kini. Mao na ang bahin sa katahum sa mga web.