Isang panimula sa web development

Bumalik sa aking araw (Ayos, bago ang aking araw), ang propesyon ng mga web developer ay isang mababang isa. Nag-ranggo sa ibaba puppy hater ngunit sa itaas Yankees fan sa sukatan ng propesyonal na karangalan. Dahil sa lahat ng mga tag at transparency spacer mga imahe namin ginagamit, kami ay makikita bilang magaspang mga hacker na walang kahulugan ng aesthetics.

Mahusay, maaari pa rin namin ma-kulang sa Aesthetic kahulugan, ngunit bilang ang Web ay bumuo ng sa gayon ay ang propesyon ng mga web developer. Ang mga araw may mga hindi mabilang na mga tool na maaari naming gamitin upang makagawa ng mahusay na isinulat, pamantayan-matularin, at maganda (Ayos, hindi siguro na huli) mga pahina ng web. Karamihan sa mga mahusay na website ang gumagamit sa iyo ngayon (makapal ang mukha plug: kabilang ang isang ito) ay binuo gamit ang mga tool.

Ang aming katipunan ng mga tool sa dulo ng browser na nagpahintulot sa amin upang lumikha ng mga bagay sa web na ay hindi mailarawan sa isip lamang 10 taon na ang nakalipas, tulad ng hindi mabilang na mga social network na inaako upang maging ang pinakamahusay na paraan upang sayangin ang iyong oras, “mainit” tech na mga startup nagki-claim na revolutionized isang bagay na na-tapos na ang isang libong beses, at ng galit na mga ibon panggagaya na inaako upang maging bahagyang mas masahol pa lamang kaysa sa orihinal. Lahat sa web. Kaya siguro mga tool na ito ay hindi nawala sa pinakadakilang ng mga gamit.

Kaya ano ang mga kahanga-hangang mga tool ako ng pakikipag-usap tungkol sa? Nangungunang mga paraan naging ang (nang tapat kahanga-hangang) mga wika na tinatawag na HTML5, CSS3, at JavaScript, na palayaw ko ang 3 horsemen ng webocalypse. Narito ang isang pagtingin sa bawat isa:

HTML

HTML (maayos na kilala bilang Hypertext Markup Language; maaari mong makita kung bakit ang mga tao na hindi gusto upang tumingin masamang gamitin lamang ang acronym) ay ang wika na ginagamit upang mag-ipon out sa mga web page. Mag-right click sa pahinang ito at i-click ang “Tingnan ang Pinagmulan”. Iyan ang HTML na pahina na ito ay gumagamit.

Talaga, HTML ay isang bungkos ng mga tag, saan ang browser binibigyang-kahulugan at lays out. Halimbawa, tumingin sa ang HTML code:

<p>Hindi ko alam tungkol sa iyo, pero gusto ko ng pagpindot sa mga pindutan.</p>

<br>

<butones>Mag-click sa akin!</butones>

Ito HTML code ay teksto nakabalot sa isang talata (ang <p> Nagsisimula ang tag na isang talata, ang </p> tag ay nagtatapos sa isang talata.) Mayroong isang line break (ang <br>) at pagkatapos ng isang pindutan maaari mong i-click sa nilalaman ng iyong puso ni. Ay maglatag ito ng iyong browser out sa screen para sa iyo.

Kaya na ang lahat ng mahusay at magandang. Ngunit kung mayroon kang walang anuman kundi HTML, you get a webpage that looks like it came straight out of the 1990’s. Hindi magkano ang mabuting ay dumating out sa na dekada pa rin (hairstyles, musika, at iba pa) Ngunit maghintay! Marami pa!

CSS

Ang isa pang acronym. Tag-araw. Sinusubaybayan ng CSS para sa Cascading Style Sheet, na kung saan ay isang bit ng isang maling tawag dahil sila ay hindi talagang Cascade (kahit anong paraan na… ito ay computer na code, hindi waterfall!) CSS ay ang wika na ginagamit sa istilo webpage. Ito, masyado, ay kahulugan ng iyong browser.

CSS at HTML trabaho magkasama – HTML ginagawang layout ng pahina, Nagbibigay ito sa CSS likas na talino nito. Isipin pagbuo ng isang bahay: HTML ay nagbibigay ng hindi maganda pero kinakailangan sahig na gawa sa framework, Nagdaragdag ang CSS ang mga kulay neon at quirky kasangkapan.

CSS ay isang medyo prangka wika: para sa isang tiyak na tag na HTML (tulad ng isang talata), maaari mong tukuyin ang mga halaga para sa iba't ibang estilo ng mga klase. Ang iyong browser ay basahin ang CSS at ilapat ito sa lahat ng mga tag sa pagtutugma ng HTML. Halimbawa:

p {

kulay: pula;

font-laki: 16px;

}

Kaya bawat talata (bagay-bagay sa HTML <p> mga tag) Magkakaroon ng pula Font at maging 16 pixels ang laki. Kung napansin mo, ang mga ito ay ilan sa parehong mga estilo maaari mong gamitin sa Microsoft Word at iba pang mga application.

Kaya ngayon ang iyong mga webpage ay inilatag out at hanapin nila medyo. Ngunit narito ang bagay: na lahat ng ginagawa nila. Umupo Sila lamang doon at hanapin kaakit-akit. Alin ang dakila at ang lahat ng, ngunit ang mga gumagamit ng web na gusto nang higit pa. Gusto nila magarbong animation. Gusto nila mga pop-up (Ayos, siguro ginawa nila pabalik sa 2002, ngunit lumihis sa pinag-uusapan ko.) Gusto nila mga pindutan na ang gagawin ng mga bagay-bagay kapag nag-click ka sa mga ito.

Tungkol na huli – na ang isang isyu. Maaari kang magsagawa ng <butones> sa HTML, at maaari mong i-click ito ang lahat ng linggo, ngunit hindi ito ang paggawa ng anumang bagay sa anumang oras sa lalong madaling panahon. Kung gusto mo ang pindutan upang, oh hindi ko alam, ilipat ang iyong elephant sa buong screen at pag-atake ng isang bagay, then you need something more.

JavaScript

JavaScript ay hindi isang acronym, kung ikaw ay nagtataka. Tinatawag nila ang JavaScript dahil tumingin ito tulad ng mga wika programming tinatawag na Java, na kung saan ay kakaiba sanhi hindi. Gayon pa man, JavaScript ay a proper programming language that causes all the dynamic effects mo makita sa web.

Tulad ng anumang wika programming, JavaScript ay isang serye ng mga utos na gumawa ng mga variable na ito at gamitin ang mga function. Ang mga cool na bahagi tungkol sa JavaScript (mahusay, bilang cool na bilang isang programming language ay maaaring maging) ay na maaari mong ma-access ang mga elemento ng HTML (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, ito ay ang lahat mula sa viewpoint ng isang “webdev”) ay kung paano elegante nagtutulungan ang tatlong mga wika. Iyon huling linya ng JavaScript nakipag-ugnayan sa HTML ng pahina at ang CSS ginamit upang estilo ito. Hindi ito bang mga wikang ito lamang ang iba't ibang mga bahagi ng ang parehong bagay – ang mga ito ay isa at sa parehong, iba't ibang panig ng parehong kahanga-hangang machine.

Kamangha-manghang Tunog? Sa tingin ko ang ginagawa nito. Iyan ay bahagi lamang ng kagandahan ng web.