En introduktion till webbutveckling

Tillbaka i min dag (OK, innan min dag), yrket webbutvecklare var låg en. Det rankas under valp hater men framför Yankees fan på skalan av professionella heder. På grund av alla taggar och öppenhet distanshållarbilder vi använt, Vi sågs som rå hackare utan känsla för estetik.

Tja, Vi kan fortfarande saknas i estetiska sinne, men eftersom webben har utvecklats så har yrket webbutvecklare. Dessa dagar finns det otaliga verktyg vi kan använda för att göra välskriven, standarder uppfyller kraven, och vacker (OK, kanske inte det sista) webbsidor. De flesta av de stora webbplatser som du använder idag (skamlös plugg: inklusive detta) är byggda med hjälp av dessa verktyg.

Vår uppsjö av verktyg på webbläsarens slut har gett oss möjlighet att skapa saker på nätet som var otänkbara bara 10 år sedan, såsom otaliga sociala nätverk som påstår sig vara det bästa sättet att slösa din tid, “het” tech startups som påstår sig ha revolutionerat något som redan är gjort tusen gånger, och Angry Birds kloner som påstår sig vara endast något sämre än den ursprungliga. Allt på webben. Så kanske dessa verktyg inte har gått till den största av användningsområden.

Så vad är dessa fantastiska verktyg jag har talat om? Visar vägen har varit (uppriktigt sagt häpnadsväckande) språk kallas HTML5, CSS3, och JavaScript, vilket jag smeknamn på 3 ryttare i webocalypse. Här är en titt på var och en:

HTML

HTML (ordentligt känd som Hypertext Markup Language; du kan se varför människor som inte vill se illa bara använda förkortningen) Detta är ett språk som används för att lägga ut webbsidor. Högerklicka på den här sidan och klicka “Visa källa”. Det är HTML som den här sidan använder.

I huvudsak, HTML är ett gäng taggar, vilken webbläsare tolkar och lägger ut. Till exempel, titta på den här HTML-kod:

<p>Jag vet inte om dig, men jag gillar att trycka på knappar.</p>

<br>

<knapp>Klicka mig!</knapp>

Denna HTML-kod har text insvept i ett stycke (den <p> tag börjar ett stycke, den </p> tag slutar ett stycke.) Det finns en radbrytning (den <br>) och sedan en knapp kan du klicka för att du orkar. Din webbläsare kommer att lägga ut det på skärmen för dig.

Så det är allt gott och väl. Men om du har inget annat än HTML, you get a webpage that looks like it came straight out of the 1990’s. Inte mycket bra kom ut av det decenniet ändå (frisyrer, musik, etc.) Men vänta! Det finns mer!

CSS

En annan akronym. Sommar. CSS står för Cascading Style Sheets, som är lite av en missvisande eftersom de inte riktigt kaskad (oavsett vad det betyder… det är datakod, inte ett vattenfall!) CSS är det språk som används för att stil webbsidor. Detta, alltför, tolkas av webbläsaren.

CSS och HTML arbeta tillsammans – HTML gör sidans layout, CSS ger den dess känsla. Tänk dig att bygga ett hus: HTML ger den grå men nödvändiga trä ram, CSS lägger till neonfärger och egendomliga möbler.

CSS är ett ganska enkelt språk: för en viss HTML-tagg (som ett stycke), Du kan ange värden för olika stil klasser. Din webbläsare kommer att läsa CSS och tillämpa den på alla matchande HTML-taggar. Till exempel:

p {

färg: röd;

font-size: 16px;

}

Så varje punkt (grejer i HTML <p> taggar) kommer att ha röd teckensnitt och vara 16 pixlar stora. Om du märkt, dessa är några av de samma färger som du kan använda i Microsoft Word och andra tillämpningar.

Så nu dina webbsidor läggs ut och de ser ganska. Men här är det: det är allt de gör. De sitter bara där och se söt. Vilket är bra och alla, men användare av webben vill ha mer. De vill ha snygga animationer. De vill ha popup-fönster (OK, kanske de gjorde tillbaka i 2002, men jag avvika.) De vill ha knappar som kommer att göra saker när du klickar på dem.

Om den sista – det är en fråga. Du kan göra en <knapp> i HTML, och du kan klicka på den hela veckan, men det är inte att göra något någon gång snart. Om du vill att knappen ska, åh jag vet inte, flytta elefant över skärmen och attackera något, then you need something more.

JavaScript

JavaScript är inte en akronym, om du undrade. De kallade det JavaScript eftersom det såg ut som det programmeringsspråk som heter Java, vilket är märkligt orsakar den inte. Hur som helst, JavaScript är a proper programming language that causes all the dynamic effects du ser på webben.

Precis som alla programmeringsspråk, JavaScript är en serie kommandon som gör variabler och använda funktioner. Den svala delen om JavaScript (väl, så cool som ett programmeringsspråk kan vara) är att du kan komma åt dessa HTML-element (liknande stycken och knappar) och CSS-format (som teckenfärg och storlek) och ändra dem. Titta på den här koden:

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 blue.

What I find interesting (igen, this is all from the viewpoint of a “webdev”) is how elegantly the three languages work together. Den sista raden i JavaScript interagerade med sidans HTML och CSS för att styla det. Det är inte som de här språken är bara olika delar av samma sak – de är en och samma, olika sidor av samma fantastiska maskin.

Ljud fascinerande? Jag tror att det gör. Det är bara en del av skönheten i nätet.