Ordlista
30 Aug 2019
Ordlista
för
webbdesign och webbutveckling
Det finns många uttryck och begrepp i webbranschen som kan vara bra att känna till om du t.ex. ska bli involverad i ett webbprojekt eller bara vill kunna hänga med i diskussionen.
Vi har sammanställt okomplicerade förklaringar av några vanliga och typiska begrepp och företeelser som kan vara bra att känna till.
Listan uppdateras löpande.
A
Accessibility
Engelsk motsvarighet till Tillgänglighet. Se tillgänglighet.
AMP
AMP står för ”Accelerated Mobile Pages” och är ett nytt format för mobila webbsidor, framtaget av Google. Du har kanske sett ”AMP” bredvid en liten ikon föreställande en blixt i Googlesökningar (på mobilen) som indikerar att det är en länk till en AMP sida.
Google prioriterar AMP-webbplatser så att de hamnar högre upp i sökresultaten.
AMPs anhängare hävdar att tekniken bakom webbplatserna gör dem mycket snabbare på mobiler. Det leder i sin tur till nöjdare besökare, och att företag har större möjligheter att tjäna pengar p.g.a. kortare laddningstider och minskad avvisningsfrekvens.
AMP kritiker menar att Google får för stor kontroll över vilka webbplatser sökresultaten visar, samt menar att det finns oklarheter runt var exakt AMP-sidorna egentligen hostas.
Angular
Angular är ett ramverk i programmeringsspråket JavaScript, skapat av Google för att bygga webbapplikationer. Ramverket är särskilt populärt bland större företag, främst för att det är ett av de äldsta etablerade ramverken av den här typen, men också för att Angular förutsätter en förhållandevis strikt struktur.
Läs mer om ramverk i vår artikel ”Vad är ramverk?”. Läs mer om Angular och se en jämförelse mellan ramverken Angular, React och Vue på vår techblogg. (Artikeln är på engelska.)
API
API står för ”Application Programming Interface”, och erbjuder ett standardiserat sätt för att kommunicera mellan applikationer. Ett API tillhandahåller ett gränssnitt som programmerare kan använda för att få eller uppdatera information mellan appar eller system.
T.ex erbjuder Google ett API (Maps JavaScript API) för kommunikation med deras karttjänster. Genom att använda detta API kan användare få tillgång till Googles kartdata och använda det på sina webbsidor eller i sina appar.
B
C
CMS
CMS står för “Content Management System” och är verktyg som används för att göra det enklare att uppdatera innehållet på webbsidor. Webbsidorna editeras via CMS gränssnitt. Gränssnittets funktion i ett CMS kan jämföras med gränssnittet ordbehandlingsprogrammet Word tillhandahåller för att editera textdokument.
Den mest populära CMS lösningen är i skrivande stund (augusti 2019) WordPress.
CSS
CSS står för ”Cascading Style Sheets”, och är kod som berättar för webbsidor hur deras innehåll ska presenteras (hur elementen på webbsidan ska se ut). CSS används för att implementera design på en webbsida. T.ex, kan CSS koden bl.a. innehålla information om vilken färg, storlek och typsnitt en text på webbsidan ska ha.
D
E
F
the Fold
Ovanför ”the fold” (vecket) är en grafisk designterm, och syftar på det område av en webbsida som syns utan att användaren behöver scrolla nedåt. En generell regel har varit att placera det viktigaste innehållet i detta område, så att det är tillgängligt så lätt och snabbt som möjligt.
Med olika skärmstorlekar, orienteringar (landskaps- eller porträttmode på mobiler och läsplattor) blir det allt svårare att förutspå vilket område som kommer att befinna sig ovanför ”the fold”.
Användbarhetsexperter har dock kommit fram till att det finns betydligt fler saker som bestämmer om en ”call to action” knapp blir klickad än om den befinner sig i området ovanför ”the fold” eller inte*.
TL;DR: Att placera viktigt innehåll i det område som ev. kommer att vara ovanför ”the fold” på vissa skärmar behöver inte innebära någon automatisk förbättring av hur mycket användare interagerar med eller lägger märke till innehållet. Anledningen är att det finns många andra UI och UX aspekter som också påverkar och som man bör ta hänsyn till.
*Joe Leech: “How to Design with Science Without Losing the Magic” på SmashingConf, Barcelona 2017, runt 5.40
G
GDPR
General Data Protection Regulation är en ny lag för alla EU nationer som träder i kraft 25 maj, 2018. Syftet med lagen är att ge ett bättre skydd för medborgarnas privata data. Företag och organisationer som inte uppfyller den nya lagstiftningens krav riskerar avsevärda böter.
De nya reglerna för hantering av privata datauppgifter berör både hur uppgifterna förvaras, säkerhetsrutiner och information till medborgare. Medborgare ska kunna kräva att få veta vilka uppgifter som lagras, varför de lagras och även att uppgifterna raderas.
TL;DR: En ny, omfattande lag som berör alla EU nationer och innebär en hel del extraarbete för alla företag och organisationer som hanterar någon form av användardata.
H
HTML
HTML står för ”HyperText Markup Language”, och är koden som utgör en webbsidas grundläggande element eller byggstenar. HTML kan liknas vid Lego, där varje typ av Legobit motsvarar ett HTML element. Dessa element kan t.ex. vara olika typer av textelement (rubriker, paragrafer), men också bilder, filmer, formulär eller länkar.
I
J
K
L
M
N
Native applikation
Native applikationer är appar som är utvecklade för att användas på en specifik plattform eller operativsystem. Exempel är appar som fungerar på iPhone men inte på Android telefoner och vice versa.
Native appar laddas ner till plattformen eller systemet via t.ex. distributionscenter som Google Play eller App Store. (Native appar går alltså inte att nå via URLs som vanliga webbsidor.)
O
P
Performance
Performance är ett begrepp inom webbindustrin som betyder hur snabbt webbplatser laddas ner och visas i en webbläsare. Snabbare webbsiter har visat sig göra användare mer positiva till webbplatsen i och med att de erbjuder en bättre användarupplevelse.
Hur snabbt en sida laddas spelar också roll för sk. avvisningsfrekvens (”bounce rate”), som innebär att besökare lämnar webbsidan nästan omedelbart. I det här sammanhanget då beroende på att sidan laddas för långsamt.
Det säger sig självt att besökare som inte befinner sig på webbplatsen inte kommer att göra något köp. Om webbplatsen istället laddar riktigt snabbt, minskar risken för att användare ska tappas p.g.a. laddningstiden och då ökar också chansen att de genomför ett köp. Det kan förefalla trivialt och simpelt, men för e-handelsföretag är detta livsviktigt, och för ingenjörer har performance vuxit till ett kompetensområde i sig.
Perceived eller Upplevd Performance
Upplevd performance är hur snabb besökare tycker att din webbsida är, vilket kan skilja sig från hur snabb sidan är i realiteten. Eftersom det är användaren som avgör när laddningstiden av en webbsida är för lång, är den upplevda laddningstiden egentligen den som spelar roll.
Några knep för att behålla användarens intresse medan de väntar (effektivare än musik i telefonkön):
Laddningsanimationer, spinners eller progress bars hjälper till att berätta för användaren att en kort väntetid är normalt, och att inget har blivit fel.
Använd bilder som visar en hel, men suddig version av den riktiga bilden medans den laddas in. Även om bilden är suddig tills all data har laddats in, ger det en bättre användarupplevelse eftersom det förbereder användaren på slutresultatet. För att uppnå detta med JPEG bilder, använd progressivt format.
Visa sk. placeholders under laddningen: När sidan laddas, visa en indikation på vilken typ av innehåll som kommer att finnas, och var på sidan innehållet kommer att dyka upp. Exempel är de grå boxarna som representerar bilder och text på Facebook om sidan laddas via en långsam uppkoppling.
PHP
PHP står för ”PHP: Hypertext Preprocessor” och är en rekursiv akronym, d.v.s. det refererar till sig själv. Det är ett skriptspråk som ofta används för back-end programmering av webbprojekt.
PWA
PWA står för ”Progressive Web App”, och kan beskrivas som en blandning mellan native app och webbapp. Precis som webbappar, är PWA byggda med typiska webbteknologier (HTML, CSS, JS) och är plattformsoberoende. De kan användas av alla enheter som har en kompatibel webbläsare.
PWAs har även funktioner som tidigare bara fanns i native applikationer, som offline läge och push notifikationer.
PWA kan ses som ett mera budgetvänligt alternativ till att bygga flera native appar. PWAs popularitet förväntas öka i takt med att browserkompabiliteten med de tekniker som krävs för att PWAs ska fungera ökar.
Q
R
Ramverk
Ramverk är omfattande plugins eller hjälpbibliotek, som används för att förbättra redan existerande programmeringsspråk. Ramverk används för att lägga till funktionalitet eller för att förenkla hantering och processer. De kan ses som verktyg eller tillägg till ett programmeringsspråk för att göra det enklare för programmerare att utföra vissa operationer.
Läs mer om ramverk – användningsområden och hur man väljer rätt ramverk i vår artikel ”Vad är ramverk?”.
React
React är ett ramverk utvecklat av Facebook, byggt i programmeringsspråket JavaScript för att skapa webbapplikationer. Ramverkets huvudsakliga syfte är att underlätta utveckling av storskaliga applikationer. I skrivande stund (augusti 2019) är React ett av de absolut mest populära ramverken både bland utvecklare och företag.
Läs mer om ramverk i vår artikel ”Vad är ramverk?”. Läs mer om React och se en jämförelse mellan ramverken Angular, React och Vue på vår techblogg. (Artikeln är på engelska.)
Responsiv
En responsiv webbsida eller app har en layout som anpassar sig efter skärmstorleken på den enhet som används för att visa sidan. Ett typiskt exempel är att besöka en webbsida på en mobiltelefon och fortfarande kunna navigera och använda sidan utan att t.ex. behöva skrolla i sidled.
S
SEO
SEO står för ”Search Engine Optimization”, och innebär att en webbsida optimeras för att ranka högt i sökmotorers (som Google, Bing, Yahoo!) sökresultat.
Det finns många metoder för att uppnå detta, och metoderna ändras i takt med att sökmotorerna förfinar sina tekniker. Sökmotorernas mål är att ge så träffsäkra resultat som möjligt, vilket innebär att de kontinuerligt försöker motverka manipulativa SEO insatser där svagheter i deras algoritmer utnyttjas för att ge vissa webbsidor en bättre ranking än de förtjänar.
SPA
SPA står för ”Single Page Application”, och är en webbapp eller webbsida där användaren stannar kvar på en sida vars innehåll laddas om dynamiskt. För användaren blir upplevelsen väldigt lik känslan av att använda en native app.
SSL
SSL står för ”Secure Sockets Layer”, och är en teknik som man använder för att kryptera trafik på webben, mellan webbserver och webbläsare. Lite mer konkret så innebär detta att om du t.ex. loggar in med användarnamn och lösenord på en sida som inte använder SSL så kan den som har möjlighet att följa trafiken på ditt nätverk lätt se dina användaruppgifter. Med SSL är detta krypterat och därför oanvändbart (givetvis förutsatt att krypteringen inte knäcks).
Läs mer om SSL i vår artikel: Vad är SSL?
T
Tillgänglighet
Tillgänglighet på webben handlar om att göra innehåll åtkomligt för människor med olika typer av funktionshinder. De kanske mest uppenbara handikappen när det kommer till att tillgodogöra sig webbinnehåll är olika typer av synskador. Färgblindhet, nedsatt syn och blindhet måste beaktas. Färger och kontraster måste justeras för att göra innehållet enklare att se, och speciell kod måste läggas till för att göra webbplatsen ännu bättre för skärmläsare.
De växande möjligheterna att lägga till animationer och rörelse till webbsidor – som de populära parallaxeffekterna – kan orsaka problem för personer som lätt blir åksjuka. Sidor med den typen av effekter bör därför ha ett sätt att tillgodogöra sig innehållet utan effekter.
Besökare kan även ha dyslexi, eller ha funktionshinder som begränsar deras kognitiva färdigheter. Det är därför viktigt att inte använda alltför komplicerat språk eller för långa avsnitt på webbplatser där delar av besökarna förväntas ha dessa funktionshinder.
Besökare kan också ha motoriska svårigheter, så att de har svårt för att fylla i formulär eller flytta muspekaren.
Ju fler människor som behöver kunna använda en webbplats, desto högre blir kraven på tillgänglighet. De hårdaste kraven placeras oftast på offentliga webbplatser som måste vara tillgängliga för alla medborgare.
U
UI
UI står för ”User Interface”, och benämns på svenska ”användargränssnitt”. Användargränssnittet är sättet med vilket användaren kan interagera med appen, webbplatsen eller produkten. Ett (icke-webbrelaterat) exempel är styret på en cykel som cyklisten använder för att styra cykeln med.
På webben består användargränssnittet ofta av element som användaren kan interagera med – t.ex. inmatningsfält och knappar i ett formulär.
URL
URL står för ”Universal Resource Locator”, och är enkelt uttryckt en webbsidas adress som du skriver in i browserns adressfält.
UX
UX står för ”User Experience”, på svenska motsvarande ”användarupplevelse”. UX beskriver användarens upplevelse av att hantera eller använda appen, webbplatsen eller produkten via dess UI (användargränssnitt).
Även om webbsidan, appen eller produkten som används inte har ändrat på sig, kan andra omkringliggande faktorer påverka användarupplevelsen. T.ex. kan en dålig uppkoppling kombinerat med tidspress lätt leda till frustration för en användare även om webbsidan i sig inte har ändrat på sig.
Förutom omkringliggande faktorer, spelar UI (användargränssnittet) ofta en avgörande roll för användarens upplevelse. Om användargränssnittet underlättar för användaren att åstadkomma det hen vill, leder det till en bättre användarupplevelse.
Ett enkelt och tydligt exempel på vad UI och UX är och gör beskrivs nedan av Jennifer Aldrich, UX och Innehållsstrateg på InVision:
And then my kiddo asked, ”What’s the difference between UX and UI?” #ux #design #ui pic.twitter.com/p2st4sG7NB
— Jennifer Aldrich (@jma245) 4 mars 2014
V
Vue
Vue är ett ramverk i programmeringsspråket JavaScript, skapat av fd. Googleanställde Evan You för att bygga webbapplikationer. Sedan lanseringen 2014 har ramverket blivit väldigt populärt bland front-end utvecklare och webbdesigners. Vue är dock ännu inte (augusti 2019) lika populärt bland företag även om detta håller på att ändras.
Läs mer om ramverk i vår artikel ”Vad är ramverk?”. Läs mer om Vue och se en jämförelse mellan ramverken Angular, React och Vue på vår techblogg. (Artikeln är på engelska.)
W
WordPress
WordPress är ett Content Management System (CMS). WordPress är gratis att använda och finns installerat på ca en tredjedel av alla webbsidor på Internet (augusti 2019).
Webbsidor som använder WordPress får utseende och layout bestämt via sk. teman. Ytterligare tilläggsfunktionalitet (t.ex. e-handelslösningar, hjälp för att förbättra SEO) går att få via sk. plugins, som är påbyggnadsmoduler.
