Una introduzione allo sviluppo web

Indietro nel mio giorno (OK, prima del mio giorno), la professione di sviluppatore web è stato uno basso. E 'classificato sotto cucciolo odiatore ma soprattutto fan Yankees sulla scala d'onore professionale. A causa di tutti i tag e le immagini che abbiamo usato trasparenza spaziatori, eravamo visti come gli hacker greggio con nessun senso di estetica.

Bene, possiamo ancora essere privo di senso estetico, ma come il Web si è sviluppato così ha la professione di sviluppatore web. In questi giorni ci sono innumerevoli strumenti che possiamo utilizzare per rendere ben scritto, norme conformi, e bello (OK, forse non che l'ultimo) pagine web. La maggior parte dei grandi siti web che si utilizzano oggi (senza vergogna: compreso questo) sono costruite utilizzando questi strumenti.

Il nostro stuolo di strumenti sull'estremità del browser ci hanno permesso di creare le cose sul web che erano inimmaginabili solo 10 anni fa, come innumerevoli reti sociali che affermano di essere il miglior modo per sprecare il tuo tempo, “caldo” start-up tecnologiche che sostengono di aver rivoluzionato qualcosa che è già stato fatto mille volte, e cloni di Angry Birds che affermano di essere solo un po 'peggio di quella originale. Tutto sul web. Quindi forse questi strumenti non sono andati al più grande degli usi.

Ma quali sono questi incredibili strumenti che ho parlato? Ad aprire la strada sono stati la (francamente incredibile) lingue chiamati HTML5, CSS3, e JavaScript, che ho soprannome 3 cavalieri del webocalypse. Ecco uno sguardo a ciascuno di essi:

HTML

HTML (propriamente conosciuto come HyperText Markup Language; si può capire perché le persone che non vogliono fare brutta basta usare l'acronimo) è l' linguaggio usato per disporre le pagine web. Fare clic destro su questa pagina e fare clic “View Source”. Questo è il codice HTML che questa pagina utilizza.

Essenzialmente, HTML è un gruppo di tag, che il browser interpreta e pone fuori. Per esempio, guardare a questo codice HTML:

<p>Io non so voi, ma mi piace premere i pulsanti.</p>

<br>

<pulsante>Clicca mi!</pulsante>

Il codice HTML è testo avvolto in un paragrafo (gli <p> tag inizia un paragrafo, gli </p> tag termina un paragrafo.) C'è un'interruzione di riga (gli <br>) e poi un pulsante è possibile scegliere al contenuto del vostro cuore. Il tuo browser getterà fuori sullo schermo per voi.

Ecco, questo è cosa buona e giusta. Ma se non hai niente, ma HTML, you get a webpage that looks like it came straight out of the 1990’s. Non molto buono è venuto fuori di quel decennio comunque (acconciature, musica, ecc) Ma aspettate! C'è di più!

CSS

Un altro acronimo. Estate. CSS è l'acronimo di Cascading Style Sheets, che è un po 'un termine improprio in quanto non realmente cascata (qualunque cosa significhi… è il codice di computer, Non una cascata!) CSS è l' linguaggio usato per le pagine web in stile. Questo, troppo, viene interpretato dal browser.

CSS e HTML lavorare insieme – HTML rende il layout della pagina, CSS dà il suo fascino. Immaginate di costruire una casa: HTML fornisce il quadro di legno triste ma necessario, CSS aggiunge i colori al neon e mobili eccentrico.

CSS è un linguaggio piuttosto semplice: per un determinato tag HTML (come un paragrafo), è possibile specificare valori per le classi di vario stile. Il tuo browser leggerà il CSS e applicarlo a tutti i tag HTML corrispondenti. Per esempio:

p {

colore: rosso;

font-size: 16px;

}

Così ogni punto (roba in HTML <p> tag) avrà rosso di carattere e essere 16 pixel di dimensione. Se avete notato, questi sono alcuni degli stessi stili è possibile utilizzare in Microsoft Word e altre applicazioni.

Così ora le pagine web sono disposti e sembrano abbastanza. Ma ecco la cosa: questo è tutto quello che fanno. Hanno appena seduti lì e guardare piuttosto. Che è grande e tutti, ma gli utenti del web vogliono di più. Vogliono animazioni di fantasia. Vogliono pop-up (OK, forse hanno fatto di nuovo 2002, ma sto divagando.) Vogliono pulsanti che faranno cose quando si fa clic su di essi.

A proposito di quella ultima – questo è un problema. È possibile effettuare una <pulsante> in HTML, e si può scegliere tutta la settimana, ma non sta facendo nulla in qualunque momento presto. Se si desidera che il pulsante, oh io non lo so, spostare il vostro elefante sullo schermo e attaccare qualcosa, then you need something more.

JavaScript

JavaScript è non un acronimo, Se vi stavate chiedendo. Lo chiamarono JavaScript perché sembrava il linguaggio di programmazione chiamato Java, che è strano perché non lo fa. Comunque, JavaScript è a proper programming language that causes all the dynamic effects si vede sul web.

Come ogni linguaggio di programmazione, JavaScript è una serie di comandi che utilizzano variabili e funzioni. La parte interessante di JavaScript (bene, freddo come un linguaggio di programmazione può essere) è che si può accedere a questi elementi HTML (come punti e pulsanti) e stili CSS (come il colore e la dimensione del carattere) e cambiarle. Guardate questo codice:

var paragraph = $(‘p’);

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

This JavaScript code will find all the paragraphs on the page – gli $ 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 (di nuovo, this is all from the viewpoint of a “webdev”) is how elegantly the three languages work together. Tale ultima riga di JavaScript interagito con HTML della pagina e il CSS utilizzato per lo stile che. Non è che queste lingue sono solo diversi componenti della stessa cosa – sono una stessa, diverse facce della stessa macchina stupefacente.

Suono affascinante? Penso che lo fa. Questa è solo una parte della bellezza del web.