En introduksjon til webutvikling

Tilbake i min dag (OK, før dagen min), profesjonen webutvikler var en lav en. Det rangeres under valp hater men over Yankees fan på omfanget av faglig ære. På grunn av alle kodene og åpenhet avstandsbilder vi brukte, vi ble sett på som grove hackere uten sans for estetikk.

Vel, vi kan fortsatt være mangel på estetisk sans, men som Internett har utviklet seg så har yrket av webutvikler. I disse dager er det utallige verktøy vi kan bruke for å gjøre velskrevet, standarder-forventninger, og vakker (OK, kanskje ikke det siste) websider. De fleste av de store nettstedene du bruker i dag (skamløs plugg: inkludert dette) er bygget ved hjelp av disse verktøyene.

Vår vell av verktøy på leseren slutt har tillatt oss å lage ting på nettet som var utenkelig bare 10 år siden, slik som utallige sosiale nettverk utgir seg for å være den beste måten å kaste bort tiden din, “hot” tech startups hevder å ha revolusjonert noe som allerede er blitt gjort tusen ganger, og Angry Birds kloner utgir seg for å være bare litt dårligere enn den opprinnelige. Alt på nettet. Så kanskje disse verktøyene ikke har gått til den største av bruksområder.

Så hva er disse fantastiske verktøy jeg har snakket om? Viser vei har vært (ærlig utrolig) språk kalles HTML5, CSS3, og Java, som jeg kallenavnet 3 ryttere i webocalypse. Her er en titt på hver enkelt:

HTML

HTML (ordentlig kjent som Hypertext Markup Language; du kan se hvorfor folk som ikke ønsker å se dårlig bare bruke forkortelsen) er språket som brukes til å legge ut websider. Høyreklikk på denne siden og klikk “View Source”. Det er HTML at denne siden bruker.

Hovedsak, HTML er en haug med tags, som nettleseren tolker og legger ut. For eksempel, se på denne HTML-kode:

<p>Jeg vet ikke om deg, men jeg liker å trykke på knapper.</p>

<br>

<knappen>Klikk meg!</knappen>

Denne HTML-koden er tekst innpakket i et avsnitt (den <p> tag starter et avsnitt, den </p> lappen ender et avsnitt.) Det er et linjeskift (den <br>) og deretter en knapp du kan klikke til ditt hjerte innhold. Nettleseren vil legge den ut på skjermen for deg.

Så det er vel og bra. Men hvis du har noe annet enn HTML, you get a webpage that looks like it came straight out of the 1990’s. Ikke mye godt kom ut av dette tiåret likevel (frisyrer, musikk, etc.) Men vent! Det er mer!

CSS

En annen akronym. Sommer. CSS står for Cascading Style Sheets, som er litt av en misvisende benevnelse, siden de ikke egentlig cascade (hva enn det betyr… det er datakode, ikke en foss!) CSS er språket som brukes til å style nettsider. Dette, for, tolkes av nettleseren din.

CSS og HTML arbeidet sammen – HTML gjør sidens layout, CSS gir den sin teft. Tenk deg å bygge et hus: HTML gir trist, men nødvendig reisverk av tre, CSS legger neon farger og quirky møbler.

CSS er en ganske grei språk: for en bestemt HTML-tag (som et ledd), du kan angi verdier for ulike stil klasser. Nettleseren vil lese CSS og bruke den til alle de samsvarende HTML-koder. For eksempel:

p {

farge: red;

font-size: 16px;

}

Så hver paragraf (ting i HTML <p> tags) vil ha red Skrift og være 16 piksler i størrelse. Hvis du lagt merke til, disse er noen av de samme stilene du kan bruke i Microsoft Word og andre applikasjoner.

Så nå websidene er lagt ut, og de ser ganske. Men her er tingen: det er alt de gjør. De bare sitte der og se pen. Og det er flott og alt, men brukere av nettet vil ha mer. De ønsker fancy animasjoner. De ønsker pop-ups (OK, kanskje de gjorde tilbake i 2002, men jeg komme bort fra emnet.) De ønsker knapper som vil gjøre ting når du klikker på dem.

Den siste meldingen – det er et problem. Du kan lage en <knappen> i HTML, og du kan klikke det hele uken, men det er ikke å gjøre noe som helst snart. Hvis du vil at knappen skal, Åh, jeg vet ikke, flytte elefant over skjermen og angripe noe, then you need something more.

Java

Javascript er ikke et akronym, hvis du skulle lure. De kalte det Java fordi det så ut som programmeringsspråk kalt Java, som er rart fordi det ikke. Allikevel, Javascript er a proper programming language that causes all the dynamic effects du ser på nettet.

Som alle programmeringsspråk, Javascript er en serie med kommandoer som gjør variabler og bruke funksjoner. Den kjølige delen om Java (vel, as cool as a programming language can be) is that you can access those HTML elements (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 – den $ 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 blå.

Det jeg finner interessant (igjen, dette er alt fra synspunktet til en “webdev”) er hvor elegant de tre språkene arbeide sammen. Det siste linje av Java samhandlet med sidens HTML og CSS brukes til å style det. Det er ikke som disse språkene er bare forskjellige komponenter av samme sak – de er ett og samme, forskjellige sider av samme fantastisk maskin.

Høres fascinerende? Jeg tror det gjør. Det er bare en del av det fine med nettet.