En liten ordlista för webbterminologi
Vi förstår att världen av webbutveckling kan vara överväldigande med alla tekniska termer och begrepp. Not to worry, här kommer en ordlista med de vanligaste termerna och teknikerna i vår webbvärld.
Vi har en tendens att tro att alla är lika insatta och intresserade som vi själva är, men det behöver man såklart inte vara. Vi försöker alltid förklara saker på begripligt sätt, och vill gärna veta om vi blir för krångliga och tekniska. För dig som ändå gärna vill veta lite mer och ha lite koll på en del termer och tekniker (om inte annat för att kunna briljera med det vid något lämpligt tillfälle) bjussar vi på en liten ordlista.
I flera fall har vi faktiskt ännu mer information om olika saker i andra artiklar här på vår sajt.
A
API - Application Programming Interface kan enklast beskrivas som ett gränssnitt som utvecklare kan programmera mot. Det används för att olika program och applikationer ska kunna kommunicera med varandra och kan t ex användas för att hämta och uppdatera information mellan olika system. (Här kan du läsa mer om API)
B
Backend - affärslogik som hämtar, hanterar data som text, bilder, eller användare och skickar data till frontenden för att presenteras.
C
Cache - cacheminnet är till för att hjälpa oss användare att snabbare få ta del av det vi vill. Både webbservern, lösningen för webbplatsen (oftast ett CMS) och din webbläsare vill hjälpa till. För att inte tala om sökmotorer och tjänster som sociala media som också sparar ner saker för att kunna visa dem snabbt. Och olika tjänster för att hämta och skicka data mellan olika ställen kan också lagra saker, det finns alltså många ställen på vägen som data kan "fastna i minnet". (Läs mer om cache här).
CMS - content management system, en bakomliggande plattform för att hantera innehåll på en webbsajt, dvs ett publiceringsverktyg eller innehållshanteringssystem. (Här kan du fördjupa dig mer om CMS.)
Cookies - en cookie är en liten textfil som sparas av webbläsaren och lagras på användarens dator. En webbsajt eller applikation kan hämta cookies från webbläsare vid ett nytt besök så att de kan känna igen besökaren, komma ihåg hens inställningar och ge en bättre upplevelse.(Läs mer om cookies här).
Composer - composer är ett kommandoradsprogram för att installera paket och moduler som andra utvecklare har gjort. Ett bra webbhotell ska ha stöd för detta.
CSS - står för Cascading Style Sheets och är regler som webbläsaren läser in som instruerar hur HTML-taggarna visuellt ska se ut och bete sig responsivt (om innehåll ska visas i en eller flera kolumner etc).
CX - CX är förkortning av Customer Experience, kundupplevelse. Customer Experience är ett förhållningssätt där man beaktar alla interaktioner mellan kunden och verksamheten, från starten till nuet - såväl innan, under och efter ett köp, en levererad tjänst, eller en upplevelse. (Läs mer om CX här).
D
Deploy - deployflöde är kittet mellan stage och live. Deploy betyder driftsätta - och driftsätta i vår webbvärld betyder att lägga saker live på internet. Stagesajten och live-sajten ska ha samma kodbas - och när man gjort uppdateringar och förändringar på stagesajten kan de med ett bra deployflöde enkelt pushas ut på livesajten.
Drupal - ett Content Management System (se CMS)
E
Embed - embed betyder bädda in och en inbäddningskod är helt enkelt en lista med specifika instruktioner från en webbplats som beskriver hur ett visst innehåll kan visas på en annan sida - det kan vara en podd, en film, en karta eller en nyhetslista. (Här kan du läsa mer om embed).
F
Framework - ett framework är en programmeringsplattform som kan innehålla olika kodspråk, ett ramverk för utveckling. Det kan involvera allt från programvaror som funkar med varandra till element som utgår från samma standard. React och Vue.js är ett exempel på frontend-remverk.
Frontend - det visuella gränssnittet och hanteringen av data (från backend) som visas ut i besökarens webbläsare (klientsidan).
Full stack - en full stack-utvecklare kan både backend och frontend.
G
Git - en lokal programvara som gör det möjligt för utvecklare att spara ögonblicksbilder av sina projekt över tid. Tillåter att utvecklare kan samtidigt arbeta med en gemensam kodbas i olika versioner, eller “branches” av koden.
GitHub och GitLab - webbaserade plattformar som kan hålla arkiv av kod i molnbaserad lagring så att flera utvecklare kan arbeta på ett samma projekt och se varandras redigeringar i realtid. Vilket man väljer är en smaksak, GitLab är mer open source och GitHub drivs numera av Microsoft.
H
HTML5 - står för Hyper Text Markup Language. Det är inget programmeringsspråk utan mer som en typ av “dokument” som strukturerar och definierar innehåll (text, bilder, länkar, listor, videor) på webben genom “taggar”. All text som ligger inuti taggen “<p>Text här</p>” är representerat som en paragraf av text. Det är alltså HTML som webbläsaren läser in från servern och renderar ut innehållet med.
HTTP och HTTPS - HTTP (Hypertext Transfer Protocol) och HTTPS (Hypertext Transfer Protocol Secure) är protokoll som används för att överföra data över internet. HTTP används för att skicka och ta emot webbsidor och andra resurser mellan webbservern och webbläsaren. HTTPS är en säker variant av HTTP som krypterar dataöverföringen, vilket skyddar användarnas integritet och säkerhet genom att förhindra avlyssning och manipulering av data. HTTPS används särskilt för att säkra känslig information som inloggningsuppgifter och betalningsinformation på webbplatser och anses vara standarden för säker webbtrafik
I
Interaktionsdesign - interaktionsdesign handlar om att designa interaktionen mellan människa och system (exempelvis datorn, programmet, tjänsten eller en webbsajt). Det ska vara enkelt att förstå och använda för en användare. Interaktionsdesign innefattar hela flödet för användaren, hur gränssnittet ser ut, hur information presenteras och hur de olika stegen sitter ihop. Målet är en smidig användarupplevelse – interaktionsdesign fungerar som allra bäst när du som användare inte märker av att den existerar. Man kan säga att interaktionsdesign är en del av UX-processen. (Se UX design).
Iframe - en iframe kan beskrivas som ett rektangulärt hål i en webbsida, inuti vilket en annan webbsida visas. (Här kan du läsa mer om iframe och olika exempel).
J
JavaScript - programmeringsspråk som körs i webbläsaren. Det kan manipulera HTML-dokumentet och tillåter därmed att man kan skapa funktionalitet för användaren. Exempelvis vid klick på en knapp ska en bild visas ut och när man klickar på “X” knappen skall bilden gömmas. Denna logik görs och hanteras i frontenden (se frontend).
JPEG - detta är nog det vanligaste bildformatet på webben, och passar bäst till "vanliga" bilder, till exempel foton eller andra bilder som har många olika färger och/eller skuggor och som inte behöver vara transparenta.(Läs mer om bilder på webben här).
K
Kontrollpanel - en kontrollpanel eller adminpanel där man kan hantera en webbplats eller applikation. Kontrollpanelens funktionalitet kan vara väldigt olika och beror på det enskilda systemet. En känd kontrollpanel är t.ex. Wordpress-kontrollpanel, när man är inloggad som administratör. Den har ett antal definierade funktioner som kan kompletteras via nya plugins (se plugins). När vi pratar om kontrollpanel syftar vi oftast på kontrollpanelen hos webbhotellet där man kan hantera exempelvis domäner och PHP-versioner.
Komponentbaserad design - en komponent kan vara en mindre egen del, som ett fält eller en knapp, eller en större del bestående av flera komponenter, exempelvis ett helt formulär eller en sidfot. Grundtanken är att återanvända komponenter och se till att deras utseende och beteende är konsekvent. Ett komponentbibliotek är en bra grund som både gör arbetet er effektivt och kvalitetssäkrar det.
L
Laravel - Laravel är ett open source programmeringsspråk som är baserat på PHP. Det är extra bra för att utveckla skräddarsydda lösningar då det ger stor frihet för vidareutveckling.
M
Meta-data - HTML-metadata, som används inom <meta> -elementet, är information som läggs till i webbsidor för att ge metadata om sidan till webbläsare och sökmotorer. Det inkluderar metadata som sidans titel, beskrivning, teckenkodning och författare, och används för att förbättra sökbarhet och förhandsgranskning i sökmotorresultat. Metadata hjälper också till med social delning genom att ange önskad bild och beskrivning när en sida delas på sociala medier. Det används också för att definiera visuella meta-egenskaper som färgteman och skalningsinstruktioner för mobila enheter. Metadata hjälper till att förbättra användarupplevelsen och sökbarheten av webbsidor.
Mobile first - det innebär helt enkelt att man i designarbetet utgår från att de flesta av besökarna kommer att använda sajten via mobilen, och optimerar layout, design, bildformat och innehåll utifrån det. (Läs mer om mobile first och responsiv design här).
Moduler - byggklossar med olika funktioner till Drupal. Det finns moduler för consent-lösningar, SEO optimering, bildhantering etc. Motsvarande byggklossar för WordPress kallas plugins.
N
Node.js - en öppen källkod JavaScript-runtime som bygger på Chrome V8 JavaScript-motorn. Den används för att skapa effektiva serverapplikationer med JavaScript, möjliggör händelsedriven och icke-blockerande kodhantering, och erbjuder en enhetlig miljö för klient- och serverutveckling. Node.js är särskilt populärt för realtidsapplikationer, API:er och mikrotjänster och används av stora teknikföretag
O
Optimering - det finns förstås olika sorts optimering exempelvis sökmotoroptimering (se SEO) prestandaoptimering (se prestanda) och konverteringsoptimering (besök vår systerbyrå på oawa.se).
P
PHP - programmeringsspråk som körs på servern och som bestämmer vilken typ av HTML som skall skickas till klienten (frontenden) och sköter hanteringen av data som inte visas ut (användare, säkerhet osv). Både WordPress och Drupal är skrivna i PHP, men här kan vi alltid göra anpassningar genom egen kod i PHP.
Plugin - plugins är insticksprogram till WordPress som fungerar som en byggkloss till webbsajter - det finns plugins för SEO hantering, språkhantering, val av antal i kassan - ja, allt du kan tänka dig - det finns gratisversion och betalversioner. Men det är viktigt att välja stabila och uppdaterade plugins - och att hålla dem uppdaterade och se till att de fungerar i kombination med andra val som gjorts. Motsvarande byggklossar för Drupal kallas moduler.
Prestanda - i webbvärlden pratar vi mycket om prestanda. Med det menar vi att en webbsajt ska upplevas som snabb av besökarna. Det betyder att sajten ska ladda snabbt, svara snabbt på interaktion och kräva så lite som möjligt av användarens utrustning och uppkoppling. (Läs mer om prestanda).
Pusha - när vi pratar om att pusha menar vi att skicka upp ny kod, antingen till en stagesajt eller en livesajt (se stagesajt, git, GitLab och deploy).
Q
Vad tusan börjar på Q..? Queries? Ja det är en fråga till en databas, det vanligaste kommandot är att fråga efter attribut från en tabell baserat på något villkor. Frågor på det?
R
Ramverk - se framework.
React.js - ett populärt JavaScript-bibliotek för att bygga användargränssnitt och webbapplikationer. Det utvecklades av Facebook och används av många stora webbplatser. React fokuserar på komponentbaserad utveckling och erbjuder en effektiv och deklarativ metod för att skapa användargränssnitt. Det använder en virtuell DOM för snabba uppdateringar och är kompatibelt med olika arkitektoniska mönster och bibliotek. React är kraftfullt och anpassningsbart, vilket gör det till ett populärt val för att bygga dynamiska och responsiva webbapplikationer.
Redirect - omdirigerar en webbläsares begäran från en URL till en annan. Det används oftast för att leda besökare från en gammal eller inaktiv webbadress till en ny och relevant plats på webbplatsen. Det finns olika typer av omdirigeringar, inklusive 301 (permanent) och 302 (tillfällig), som indikerar om den nya URL:en är en permanent eller tillfällig ändring. Redirects är användbara för att bevara sökmotorrankning, rätta döda länkar och förbättra användarupplevelsen genom att leda besökare till korrekta sidor. De hanteras vanligtvis genom serverkonfiguration eller webbapplikationens kod.
Repo - eller repository som det egentligen heter, är den huvudsakliga komponenten som spårar ändringar i ett webbprojekt. Detta är ett system för att hålla koll på vad som ändrats, när och av vem och gör det möjligt för flera webbutvecklare att jobba med samma kod. Se Git och GitLab.
Responsiv design - responsiv design innebär att layouten på en webbsajt ändras och anpassas efter skärmens storlek, vilket gör att hemsidan alltid ser bra ut - oavsett vilken enhet besökaren använder. (Läs mer om responsiv design här).
S
SASS - Sass, eller Syntactically Awesome Style Sheets, är ett CSS-preprocessor verktyg som utökar CSS med fördelar som variabler, nästling, funktioner och återanvändning av kod. Det gör det möjligt för utvecklare att skriva mer strukturerad och underhållbar CSS-kod. Sass-koden kompileras sedan till vanlig CSS som webbläsare kan förstå. Det förenklar stilmallshantering och minskar upprepning, vilket resulterar i effektivare och lättare underhållbara stilmallar. Sass är användbart för att skapa komplexa och skalbara stilarkitekturer för webbprojekt.
SEO - SEO betyder alltså Search Enginge Optimization (sökmotorsoptimering på svenska) och betyder helt enkelt att man optimerar sin webbsajt för att den ska synas i sökmotorernas resultat på specifika sökord. Då menar man att man optimerar för så kallad organisk trafik, dvs inte genom betald trafik från annonser utifrån vissa sökord (det är något helt annat och kallas SEM, Search Engine Marketing). Det finns olika sorts SEO - teknisk SEO, onpage SEO och offpage SEO - och alla är viktiga för hur en webbsajt rankas hos sökmotorerna. (Läs mer om teknisk SEO här).
SPA - Single Page Application som kan byggas med JavaScript-ramverk som React eller Vue. Här finns det endast en “sida” där innehållet (antingen hårdkodad data eller dynamiskt/hämtad data) visas ut med hjälp av JavaScript (besökaren behöver då inte klickar sig in på undersidor för ny data).
SSL - SSL är en förkortning av Secure Socket Layer och är används för att kryptera trafiken mellan en webbsajt på en webbserver och en besökare från en webbläsare. Tekniken används ofta för att skydda lösenord och inloggningar, vid betalning i en webbshop och när person- och kortuppgifter skickas mellan webbservern och besökaren. (Läs mer om SSL här).
SSH - SSH är en förkortning av Secure Shell och är ett protokoll samt ett program som används för att ansluta säkert till andra datorer. Med SSH är all data som skickas mellan två enheter krypterad, och det används av systemadministratörer och utvecklare för att hantera och ansluta till servrar.
Stage-sajt - när man ska utveckla en helt ny sajt (som antingen är helt ny eller ska ersätta en befintlig) gör man detta på en utvecklingssajt, eller stage-sajt som vi brukar säga (det kan också kallas test eller testmiljö). Det ska vara samma tekniska miljö och konfiguration som sedan ska gälla när sajten går live - och det bästa är att sätta upp det på samma server redan från början. En stage-sajt bör vara lösenordsskyddad för att inte indexeras av sökmotorer, och för att ingen obehörig ska råka komma åt den.
Store locator - Store locator är en tilläggsfunktion eller plugin som integreras med ett CMS för att ge besökare möjlighet att hitta fysiska butiker, kontor eller platser. Det ger vanligtvis en interaktiv karta och sökfunktion där användare kan ange sin plats eller sökterm för att hitta närmaste butik eller filial. Det är användbart för företag som har flera fysiska platser och vill ge sina kunder en enkel och bekväm vägbeskrivning till närmaste butik eller avlägset kontor direkt från webbplatsen.
Structured data - eller strukturerad data, är det övergripande namnet för exempelvis Microdata, RDFa och JSON-LD. Det är ett sätt för att beskriva vad innehållet på en webbsida är för exempelvis en sökmotor. Du kan berätta att sidan är bland annat ett evenemang, en produkt, artikel eller FAQ-samling. Ett evenemang kan då taggas upp med plats, datum, tid med mera så att sökmotorn lätt kan presentera detta direkt i sökresultaten. (Läs mer om Structured Data här)
SQL - Structured Query Language, ett sätt att beskriva databasfrågor mot en databasserver. Man kan beskriva komplexa förhållanden mellan olika typer av data och begära ut data som matchar olika kriterier. Datan kan vara text, användare, bilder osv. Servern hämtar datan från databaserna, hanterar den och manipulerar den och skickar sedan vidare den till frontend.
SVG - ett vektorbaserat filformat (en fil som består av kod för former och banor) betyder det att bilden kommer att ha samma utseende oavsett skärmupplösning, men också att det inte går att använda för fotografier eller komplicerade illustrationer med skuggor. SVG formatet är ofta lämpligt för bilder med enklare motiv, som logotyper eller ikoner. Eftersom SVG bilder består av kod, används de också ofta tillsammans med JS, CSS och HTML för att skapa animationer.
T
Tailwind CSS - Tailwind CSS är ett modernt och mycket anpassningsbart CSS-ramverk (se CSS) som förenklar webbdesign genom att erbjuda färdiga komponentklasser för vanliga stilbehov. Istället för att skriva anpassad CSS, kan utvecklare använda klasser som t.ex. `bg-blue-500` för att snabbt lägga till färger, layouter och andra stilattribut i HTML-element. Detta ökar produktiviteten och möjliggör konsekvent design. Tailwind CSS kan anpassas genom en konfigurationsfil och är idealiskt för projekt som kräver snabb och effektiv utveckling av användargränssnitt.
Tema - fördefinierade regler (i kod) för hur en webbsajt ska se ut, vilket innehåll som kan visas och hur.
TypeScript - ett programspråk som bygger på JavaScript och lägger till statisk typning och fördelar som ökar kodens säkerhet och underhållbarhet. Det tillåter utvecklare att deklarera datatyper för variabler och funktioner, vilket fångar potentiella fel i ett tidigt skede och gör koden mer läsbar. TypeScript-koden kompileras till vanlig JavaScript och kan användas överallt där JavaScript används. Det är särskilt populärt för att utveckla stora och komplexa webbapplikationer och har stöd för moderna utvecklingsverktyg och ramverk.
U
UI design - UX är en förkortning av User Experience och betyder alltså användarupplevelse. När man talar om UX design syftar man på designarbete som förbättrar användarnas upplevelse av en tjänst eller produkt (vilket inte är detsamma som enbart den visuella designen). (Läs mer om UX här).
UX design - UI är en förkortning av User Interface som betyder användargränssnitt. Det här handlar om det faktiska visuella utseendet för en tjänst eller produkt, till exempel färger, knappar, grafik, bilder, men också om den uppfattning och känsla som detta ger användaren. Eftersom vi utvecklar webbsajter menar vi oftast dessutom GUI (Graphical User Interface) när vi säger UI. (Läs mer om UI här).
V
VPS - VPS står för Virtual Private Server och är i princip en egen del av en fysisk server som man kan använda som en helt fristående server. Kunderna delar med andra ord på den fysiska serverns resurser, men är helt avskiljda från varandra och har sitt eget operativsystem med alla dess olika inställningar och applikationer.
Vue.js - Vue 3 är ett modernt JavaScript-ramverk för att bygga användargränssnitt och webbapplikationer. Det fokuserar på att göra webbutveckling enkel och effektiv genom komponentbaserad arkitektur. Vue 3 erbjuder reaktivitet och virtuell DOM för snabba och smidiga användargränssnittsuppdateringar. Dess enkla syntax och omfattande ekosystem med tillägg gör det enkelt att integrera med andra projekt och bibliotek. Det är ett kraftfullt verktyg för att skapa dynamiska och responsiva webbapplikationer. Är det JavaScript-ramverk vi på 040 valt att använda.
W
WCAG - betyder Web Content Accessibility Guidelines och är en finfin samling riktlinjer för hur en webbsajt ska tillgängligehtssäkras. (Läs mer om tillgänglighetssäkring här).
Webbserver - den fysiska maskin som en webbsajt finns på - se webbhotell nedan.
Webbhotell - ett webbhotell är ett företag som möjliggör för den som inte vill ha en egen offentlig webbserver att publicera webblösningar på internet. Ett webbhotell har en internetansluten dator (webbserver) – i praktiken flera datorer, för att klara behovet av kapacitet och tillgänglighet – där flera användare kan lägga upp sina webbplatser under olika domännamn.
WebP - det modernare bildformatet WebP har ca 25-35% mindre filstorlek och ger snabbare sajter, bättre ranking och mindre serverutrymme. (Här kan du läsa mer om WebP).
Wireframe - ritningar till en webbsajt, en sorts blueprint på vilka delar som ska finnas och ibland även hur flödet ska se ut . Det är ett bra sätt att definiera och visa grundläggande layout, flöde, struktur och komponenter innan man har en färdig design.
Woocommerce - WordPress WooCommerce är en utbyggbar e-handelsplattform som integreras smidigt med WordPress-webbplatser. Det ger möjlighet att skapa och hantera onlinebutikmer med enkla och användarvänliga verktyg. WooCommerce erbjuder omfattande funktioner för produktlistor, kundkorgar, betalningar, frakt och rapporter. Dessutom stöder det en mängd olika tillägg för att anpassa och utöka funktionaliteten efter behov.
WordPress - ett Content Management System (se CMS)
© 040 2024
Relaterade artiklar:
Webbtrender 2023
Vi är inga orakel, men vi har surfat runt på webben och samlat ihop några gemensamma punkter för det som sägs vara trenderna för webben 2023.
AI - vad betyder det för oss?
AI är inget nytt, men varför pratar så många om det just nu? Vi gräver i historien och spekulerar om framtiden.