Vad är webbutveckling?

Webbutveckling är ett annat ord för programmering för webb. Man skapar alltså webbplatser och webbapplikationer med kod. Man kan jämföra med programvarutveckling. Inom programvaruutveckling (software development) så skrivs kod som ska köras i en dator och för ett specifikt operativsystem, men inom webbutveckling skrivs kod som ska köras i webbläsaren. Samma sak med mobilapputveckling. Mobilappar är skrivna för att fungera för t ex Android (som är operativsystemet i många smarta telefoner). En mobilapp kan utnyttja telefonens komponenter och funktioner – en webbapp kan inte det på samma sätt.

Att skapa en webbplats innebär, förutom att man layoutar text och bild, med länkar och navigering m m, att omvärlden kan se sajten via ”world wide web”. Och ”world wide web” (eller www) är det nätverk mellan servrar och klienter som vi kort kallar nätet, eller webben. Så filerna med programmerarens kod behöver flyttas från en ”lokal utvecklingsmiljö” till en server. Ett domännamn kopplas till serverdatorns ip-adress, så att när användaren skriver in t ex svd.se i sin webbläsares adressfält, så hämtas datan från svd:s server till din dator (klienten)… Som ni märker, ju mer man nystar i det här, desto fler begrepp dyker upp, men jag drar det så kortfattat jag kan.

Jag jobbar med webbdesign och webbutveckling för företag – välkommen att kontakta mig om det finns intresse för ett samarbete.

Begreppet webbapplikation

En webbapplikation är ett program som öppnas i webbläsaren, till skillnad från vanliga datorprogram. Alltså, vanliga program är ju självständiga program i din dator (som t ex Microsoft Word eller Adobe Photoshop), men en webbapp är ett program som körs i din webbläsare. Några exempel är Facebook, WordPress, Dropbox, Evernote m m.

Det handlar bland annat om att användaren inte bara kan hämta data (läsa data), utan även skapa, uppdatera och radera data samt interagera, kommunicera etc. Google Docs är ett bra exempel där man kan jobba med dokument på samma sätt som i Microsoft Office-paketet, men skillnaden är att man gör det i webbläsaren.

Och när man utvecklare en webbapp så är det vanligt att man även integrerar funktionalitet med tredje parts s k API:er. För att t ex kunna hantera betalningar på en webbshop kan man jobba mot PayPals API.

Man kan även säga att en webbplats kan innehålla en eller flera webbapplikationer. T ex en internetbank är ju en webbplats, men den har en mängd appar i sig.

Webbutveckling och webbdesign

Hur jobbar en webbutvecklare med webbdesign? Lite olika. Många jobbar med färdigdesignade teman som en utgångspunkt för vidare redigering vilket sparar mycket tid. Så för mig som frilansare är det ett smart sätt att jobba. På en webbyrå, som har flera anställda med olika roller, har man ofta en designer som gör webbdesign i program som Sketch, Figma eller Adobe XD.  

Det är grafiska program som producerar s k prototyper. Dessa omvandlas sedan till kod av en webbutvecklare som skiver i HTML, CSS, JavaScript och kanske något ramverk. Det kallas med ett annat ord för frontendutveckling.

David J. Malan, professor i datavetenskap på Harvard. Här ger han en lektion om hur webben funkar.

Andra tekniker inom webbutveckling

Att jobba med webbutveckling innefattar en mängd tekniker. Dels ska man kunna HTML, CSS och JavaScript (frontend), dels är det bra att kunna något backend programmeringsspråk som t ex PHP, Python, Java, C#, Ruby o s v samt kunna hantera databaser.

Vidare finns det tekniker som versionshantering (GIT), testning, Web API:er, REST API, autentisering, CMS:er, dev ops och deployment.

Jag vet att jag pratar ”nördspråk” men man kan i alla fall förstå att en webbutvecklare behöver behärska en hel del.

Följande tekniker är exempel på en s k ”web stack”, dvs en kombination av frontend- och backendutveckling för webb, förhoppningsvis förklarat på ett lättförståeligt sätt.

HTML5

HTML är en förkortning av Hypertext markup language och utgör strukturen av en webbsida. HTML offentliggjordes 1991 och har uppdaterats efter hand. 2014 kom en stor uppdatering – HTML5 – vilket har inneburit en mängd förbättringar och standardiseringar.

CSS3

CSS står för ”Cascading Style Sheets”. Man kan likna det vid Formatmallar i Word eller Paragrafmallar i Indesign. I CSS kallas det för regler och man skriver reglerna i kod. Man fördefinerar t ex typsnitt och färg för ett valt element. Så om du sedan vill ändra behöver du bara göra det på ett ställe, dvs i regeln, och det påverkar alla element med den regeln vald.

JavaScript

Om vi liknar en webbsida med en människokropp så representerar HTML skelettet, CSS färg och form och JavaScript beteende. Med JavaScript kan man skapa dynamik, effekter, funktionalitet, animeringar o s v. Ibland kan du se ”popup”-fönster dyka upp, det kan visas ett räkneverk som räknar ner till en viss tidpunkt, man kan visualisera data i diagram och animerade grafer, etc.

WordPress

WordPress är ett s k CMS, Content Management System. Det började som ett bloggverktyg men används idag även till att skapa webbplatser och det är i särklass det mest populära CMS:et. ”Content” i sammanhanget står för text, bild, video, ljud och grafik som hanteras i ett CMS på ett dynamiskt sätt. T ex så får ett blogginlägg en tidsstämpel, man kan tilldela kategorier och etiketter och inlägget sorteras och presenteras utifrån dessa och andra kriterier från databasen.

PHP

PHP är ett ”server-side” programmeringsspråk. Förkortningen är en nördig lek med ord: PHP Hypertext Preprocessor. Språket fick mycket kritik i början pga avsaknad av struktur, säkerhet och snabbhet, men är idag dominerande för webbutveckling och avsevärda förbättringar har gjorts sedan PHP5 och framåt. PHP interagerar smidigt och intimt med HTML och SQL.

SQL

SQL står för Structured Query Language. ”Query” handlar om att göra förfrågningar i en databas, dvs hämta ut data enligt vissa kriterier. Om du t ex klickar ”like” på ett Facebook-inlägg, eller lägger till en vän så lagras detta i en databas. Databasen finns på en server och där sparas datan. Och en databas, i detta fall handlar det om s k relationsdatabas, kan liknas vid en tabell med rader och kolummner.

Kompletterande information om webbutveckling från Youtubern Aaron Jack

Tidsvinnaren – 9 steg mot ökad produktivitet

Detta är en 9 veckors utmaning där du varje vecka får tips och uppgifter som kommer att öka din produktivitet. Kursen är en mailsekvens med text och videolektioner som handlar om principer, tekniker och verktyg som effektiviserar ditt arbete. Anmäl dig till gratiskursen nedan.

Tidsvinnaren