Introducció al desenvolupament web

En els meus temps (Acceptar, abans del meu dia), la professió de desenvolupador web era un baixa. Es va classificar a continuació cadell hater però Yankees ventilador en l'escala d'honor professional. A causa de totes les etiquetes i les imatges transparència espaiadors que utilitzem, ens veien com hackers cru sense sentit de l'estètica.

Bé, encara poden faltar en sentit estètic, però a mesura que la web s'ha desenvolupat l'ha fet la professió de desenvolupador web. En aquests dies hi ha un sens fi d'eines que podem utilitzar per fer ben escrit, normes conformes, i bell (Acceptar, potser no tan últim) pàgines web. La majoria dels grans llocs web que vostè utilitza avui (endoll descarat: incloent aquest) estan construïts amb aquestes eines.

El nostre grup d'eines a l'extrem del navegador han permès crear coses a la web, inimaginables penes 10 Fa anys, com ara un sens fi de xarxes socials que diuen ser la millor manera de perdre el temps, “calenta” noves empreses de tecnologia que afirmen haver revolucionat una cosa que ja s'ha fet una i mil vegades, i els clons d'Angry Birds que diuen ser només lleugerament pitjor que l'original. Tot al web. Així que potser aquestes eines no han anat a la més gran d'usos.

Llavors, què són aquestes eines increïbles que he estat parlant? Liderant el camí ha estat el (francament increïble) llengües dites HTML5, CSS3, i JavaScript, que jo sobrenom de la 3 genets del webocalypse. Heus aquí un cop d'ull a cada un:

HTML

HTML (ben conegut com HyperText Markup Language; es pot veure per què les persones que no volen quedar malament només ha d'utilitzar l'acrònim) és el llenguatge utilitzat per dissenyar pàgines web. Feu clic dret en aquesta pàgina i feu clic a “Mostra la”. Aquest és el codi HTML que aquesta pàgina enllaça.

Essencialment, HTML és un munt de etiquetes, que el navegador interpreta i estableix. Per exemple, mira aquest codi HTML:

<p>Jo no sé vostès,, però m'agrada prémer botons.</p>

<br>

<botó>Click em!</botó>

Aquest codi HTML ha text ajustat a un paràgraf (la <p> tag comença un paràgraf, la </p> tag acaba un paràgraf.) Hi ha un salt de línia (la <br>) i després un botó, vostè pot fer clic al contingut del seu cor. El seu navegador no el posarà a la pantalla perquè vostè.

Així que això és tot bé i bo. Però si vostè no té res, però HTML, you get a webpage that looks like it came straight out of the 1990’s. No hi ha molt bo sortir d'aquesta dècada de totes maneres (pentinats, música, etcètera) Però espera! Hi ha més!

CSS

Una altra sigla. Estiu. CSS significa Fulls d'estil en cascada, que és un nom poc apropiat, ja que no realment en cascada (sigui el que sigui… és codi informàtic, no una cascada!) CSS és el llenguatge utilitzat per les pàgines web d'estil. Aquest, massa, és interpretat pel navegador.

CSS i HTML treballen junts – HTML fa que el disseny de la pàgina, CSS li dóna el seu toc. Imagina construir una casa: HTML proporciona el marc de fusta monòton però necessari, CSS agrega els colors de neó i mobles originals.

CSS és un llenguatge bastant senzill: per a un determinat tag HTML (com un paràgraf), podeu especificar valors per a les classes diferents d'estil. El seu navegador llegirà el CSS i aplicar-lo a totes les etiquetes HTML a joc. Per exemple:

p {

color: vermell;

font-size: 16px;

}

Així que cada paràgraf (coses en el codi HTML <p> etiquetes) tindrà vermell font i estar 16 píxels de mida. Si s'han fixat, aquests són alguns dels mateixos estils que pot utilitzar en Microsoft Word i altres aplicacions.

Així que ara les seves pàgines web estan dissenyades, i es veuen bastant. Però aquí està la cosa: això és tot el que fan. Ells només es sentin allà i veuen bastant. La qual cosa és genial i tot, però els usuaris de la web volen més. Volen animacions de luxe. Ells volen que els elements emergents (Acceptar, potser ho van fer en 2002, però estic divagant.) Volen botons de fer coses quan es fa clic en ells.

Sobre això últim – això és un problema. Vostè pot fer una <botó> en HTML, i vostè pot fer clic tota la setmana, però no està fent res en el curt termini. Si voleu que el botó per, oh no sé, moure l'elefant a través de la pantalla i atacar alguna cosa, then you need something more.

JavaScript

Javascript és no un acrònim, si es pregunten. El van anomenar JavaScript perquè semblava que el llenguatge de programació anomenat Java, la qual cosa és estrany perquè no ho fa. De totes maneres, Javascript és a proper programming language that causes all the dynamic effects que es veu a la web.

Igual que qualsevol llenguatge de programació, Javascript és una sèrie d'ordres que fan que les variables i utilitzen funcions. El millor sobre JavaScript (bé, tan fresc com un llenguatge de programació pot ser) és que es pot accedir a aquests elements HTML (com paràgrafs i botons) i estils CSS (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 – la $ 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 (de nou, this is all from the viewpoint of a “webdev”) és la forma elegant dels tres idiomes treballen junts. Aquesta última línia de JavaScript interactuar amb l'HTML de la pàgina i el CSS utilitzat per dissenyar. No és que aquestes llengües són només diferents components de la mateixa cosa – són una i la mateixa, diferents cares d'una mateixa màquina sorprenent.

Sona fascinant? Jo crec que sí. Això és només una part de la bellesa de la web.