O introducere în dezvoltare web

HTML 5 logo on an iPhone smartphone with app icons around it in a cloud
Bine ați venit la web.

Înapoi în ziua mea (Bine, înainte de ziua mea), profesia de dezvoltator web a fost una scăzută. Sa clasat de mai jos catelus hater, dar mai sus Yankees ventilator pe scara de onoare profesional. Datorită toate etichetele și imaginile transparență distanțare am folosit, am fost văzut ca hackerii brut cu nici un sens de estetica.

Bine, am putea fi în continuare lipsit de sens estetic, dar ca Web-ul sa dezvoltat astfel are profesia de web developer. Aceste zile, există nenumărate instrumente pe care le puteți folosi pentru a face bine scris, standarde conforme, și frumos (Bine, poate nu că ultima) pagini web. Cele mai multe dintre cele mai mari site-uri web pe care le utilizați în prezent (mufă nerușinat: inclusiv aceasta) sunt construite folosind aceste instrumente.

Stol noastră de instrumente de pe final a browser-ului ne-au permis de a crea lucruri pe web, care au fost de neimaginat doar 10 ani în urmă, cum ar fi nenumărate rețele sociale care pretind a fi cel mai bun mod de a pierde timpul, “fierbinte” start-up-tech care pretind că au revoluționat ceva care a fost deja făcut o mie de ori, și clone Angry Birds pretinde a fi doar puțin mai rău decât originalul. Tot pe web. Deci, poate că aceste instrumente nu au dus la cel mai mare de utilizări.

Deci, ce sunt aceste instrumente uimitoare am vorbit despre? Leading modul în care au fost (sincer uimitor) limbi numit HTML5, CSS3, si JavaScript, pe care am porecla 3 călăreți de webocalypse. Iată o privire la fiecare dintre:

HTML

HTML (cunoscut în mod corespunzător ca Hypertext Markup Language; puteți vedea de ce oamenii care nu doresc să se uite rău folosi doar acronimul) este limbajul folosit pentru a pune în pagini web. Faceți clic dreapta pe această pagină și faceți clic pe “View Source”. Asta e HTML că această pagină utilizează.

În esență, HTML este un buchet de tag-uri, care browser interpretează și stabilește. De exemplu, uita-te la acest cod HTML:

<p>Nu știu despre tine, dar îmi place apăsarea butoanelor.</p>

<br>

<buton>Faceți clic pe mine!</buton>

Acest cod HTML a înfășurat text într-un paragraf (the <p> tag-ul începe un paragraf, the </p> tag-ul se termină un paragraf.) Există o linie de pauză (the <br>) și apoi un buton puteti selecta sa inima ta de conținut. Browser-ul dvs. se va pune pe ecran pentru tine.

Deci, asta e tot bine și bună. Dar dacă nu ai nimic, dar HTML, you get a webpage that looks like it came straight out of the 1990’s. Nu de mult bine a ieșit din acel deceniu, oricum (coafuri, muzică, etc) Dar așteptați! E mai mult!

CSS

Un alt acronim. Vară. CSS vine de la Cascading Style Sheets, care este un pic de un termen impropriu, deoarece acestea nu cascadă într-adevăr (indiferent ce mijloace… este cod de computer, nu o cascadă!) CSS este limbajul folosit pentru pagini Web de stil. Acest, prea, este interpretat de browser-ul dvs..

CSS și HTML lucrează împreună – HTML face layout-ul paginii, CSS oferă flerul său. Imaginați-vă construirea unei case: HTML oferă cadrul de lemn prostituată, dar necesar, CSS adaugă culorile neon și mobilier ciudate.

CSS este un limbaj destul de simplă: pentru o anumită etichetă HTML (ca un paragraf), puteți specifica valori de clase diferite de stil. Browser-ul dvs. va citi CSS și se aplică la toate tag-urile de potrivire HTML. De exemplu:

p {

culoare: roșu;

font-size: 16px;

}

Astfel încât fiecare paragraf (chestii în HTML <p> tag-uri) va avea roșu font și să fie 16 pixeli. Dacă ați observat, acestea sunt unele dintre cele mai aceleași stiluri care le puteți utiliza în Microsoft Word și alte aplicații.

Deci, acum, paginile Web sunt prevăzute și se uita destul de. Dar aici e de lucru: asta e tot ce fac. Ei doar stau acolo si arata destul de. Care este mare și toate, dar utilizatorii de web vrei mai mult. Ei doresc animații fantezie. Ei doresc pop-up-uri (Bine, Poate au făcut înapoi în 2002, dar am face o digresiune.) Ei doresc butoane care va face lucruri atunci când faceți clic pe ele.

Despre care ultima – că este o problemă. Puteți face o <buton> în HTML, și puteți să-l faceți clic pe toată săptămâna, dar ea nu face nimic orice moment în curând. Dacă doriți butonul pentru a, oh nu știu, muta elefant dvs. pe ecran și ataca ceva, then you need something more.

JavaScript

JavaScript este nu un acronim, dacă ați fost întrebați. Ei au numit JavaScript, pentru că semăna cu limbajul de programare Java, numit, ceea ce este ciudat pentru că nu. Oricum, JavaScript este a proper programming language that causes all the dynamic effects veți vedea pe web.

Ca orice limbaj de programare, JavaScript este o serie de comenzi care fac variabile și utilizează funcții. Partea misto despre JavaScript (bine, la fel de cool ca un limbaj de programare poate fi) este că puteți accesa aceste elemente 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 – the $ sign tells the browser to find all matching elements, and the ‘pmeans 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 (din nou, aceasta este tot din punct de vedere al unui “Webdev”) este modul elegant, cele trei limbi de lucru împreună. Că ultima linie de activarea JavaScript-au interacționat cu HTML a paginii și CSS folosit pentru a-l stil. Nu e ca aceste limbi sunt doar diferite componente ale aceluiași lucru – ei sunt unul și același lucru, diferite părți ale aceeași mașină uimitor.

Sunet fascinant? Cred că nu. Asta e doar o parte din frumusetea de web.

Publicat de

Neel Mehta

Harvard College. Dezvoltator web. Uneori filozof. Drogat Baseball.

One thought on “O introducere în dezvoltare web”

  1. wow was surprised to find out that u wrote it, loc de muncă bun este un avantaj frumos în asta pentru mine înainte de a merge la pachete de programare web Sawyer.

Lasă un Răspuns