Register

Definitioner av centrala begrepp som används i kursen. Varje begrepp listar de delar där det förekommer och förklaras.

:

:focus-visible CSS-pseudoklass som aktiveras när ett element har tangentbordsfokus (inte musklick). Modernare alternativ till :focus för att visa focus-indikator selektivt. Interaktion & feedback

A

Accessibility Tree En förenklad version av DOM-trädet som webbläsaren skickar till hjälpmedel. Semantiska element bidrar med roller (t.ex. navigation, main, header) och gör sidan navigerbar för skärmläsare. Semantiska landmärken

Alt-text En textalternativ beskrivning av en bild, angiven via alt-attributet på <img>-taggen. Läses upp av skärmläsare och visas om bilden inte kan laddas. Dekorativa bilder ska ha tom alt-text: alt="". Bilder på webben ,Bildformat & upphovsrätt

analogi En analogi är en liknelse eller jämförelse mellan två eller flera saker som har liknande egenskaper eller funktioner. Ordet används för att förklara eller argumentera för något komplext eller mer bekant. Webbens roll i samhället

Användarberättelse En kort mening som beskriver ett behov från användarens perspektiv: "Som [roll] vill jag [mål] för att [anledning]." Används för att definiera funktionskrav utan att låsa fast en teknisk lösning. Målgrupp och användarberättelser

Användarcentrerad design En designprocess där slutanvändarens behov, mål och begränsningar styr alla beslut. Motsatsen är att designa utifrån vad som är tekniskt enkelt eller vad designern själv tycker om. Målgrupp och användarberättelser

aria-expanded ARIA-attribut som kommunicerar till hjälpmedel (skärmläsare) om ett kontrollerbart element är öppet ("true") eller stängt ("false"). Används på hamburger-knappar och accordion-triggers. Progressiv förbättring

Arv (CSS) Mekanismen där barnelement automatiskt ärver typografiska egenskaper (som `color` och `font-family`) från sin förälder, utan att en egen CSS-regel behöver skrivas. Att sätta egenskaper på `body` låter dem sprida sig till hela sidan. HTML-trädet

Attribut Extra information som läggs till i en öppningstagg för att ge elementet egenskaper eller beteenden, t.ex. href i <a href='...'> eller alt i <img alt='...'>. Dokumentets struktur ,Bilder på webben

B

body Delen av ett HTML-dokument som innehåller allt synligt innehåll på sidan: text, bilder, länkar och övriga element som visas i webbläsarfönstret. Dokumentets struktur ,HTML-trädet

Box-modellen CSS-konceptet som beskriver hur varje element upptar utrymme: innehåll + padding + border + margin. Avgörande för att förstå och kontrollera layout. Box-modellen

box-sizing CSS-egenskap som styr hur bredd och höjd beräknas. `content-box` (standard): bredd räknar bara innehållet. `border-box`: bredd inkluderar padding och border. Box-modellen

Brytpunkt (breakpoint) Den skärmbredd vid vilken en media query aktiveras och layouten ändras. Väljs baserat på innehållet, inte på specifika enheter eller standardiserade pixelvärden. Media queries

C

Call to action (CTA) En tydlig uppmaning till besökaren att utföra en specifik handling, som en knapp eller länk: 'Boka nu', 'Läs mer', 'Kom igång'. En effektiv CTA kommunicerar vad som händer när man klickar. Hero-sektionen

CC-0 Public Domain Dedication. Upphovspersonen avsäger sig alla rättigheter. Inga villkor, ingen namngivning krävs. Den friaste Creative Commons-licensen. Digital juridik & etik

classList.toggle JavaScript-metod som lägger till en klass om den saknas och tar bort den om den finns. Returnerar `true` om klassen nu finns på elementet, `false` annars. Progressiv förbättring

Creative Commons Ett system av licenser som ger skapare ett standardiserat sätt att tillåta andra att använda sitt material, med villkor som att ange källa (BY) eller inte använda kommersiellt (NC). Bildformat & upphovsrätt ,Digital juridik & etik

CSS Cascading Style Sheets, språket som används för att styra utseendet på HTML-element, t.ex. färger, typsnitt, storlekar och layout. HTML-trädet ,CSS, selektorer och färg ,Container & läsvänlighet ,Navigationsstruktur

CSS custom property En variabel i CSS, definierad med `--namn: värde` och använd med `var(--namn)`. Gör det möjligt att ändra ett värde på ett ställe och låta ändringen spridas till alla platser som refererar variabeln. CSS-variabler

CSS-selektor Den del av en CSS-regel som pekar ut vilket element eller vilka element som ska få en viss stil, t.ex. p, .klass eller #id. CSS, selektorer och färg

D

dataminimering GDPR-principen (artikel 5.1c) om att bara samla in personuppgifter som faktiskt behövs för det definierade ändamålet. Digital juridik & etik

Designsystem En samling återanvändbara CSS-variabler, komponenter och designprinciper som definierar ett konsekvent visuellt språk. CSS custom properties för färger, typsnitt och spacing är grunden i ett enkelt designsystem. CSS-variabler

Div-soppa Nedsättande term för HTML-kod som saknar semantik och enbart består av omarkerade `<div>`-element. Gör koden svårläst och sidan oanvändbar för skärmläsare och sökmotorer. Semantiska landmärken

DOCTYPE En deklaration i toppen av ett HTML-dokument som talar om för webbläsaren vilken version av HTML som används. Modern HTML använder <!DOCTYPE html>. Dokumentets struktur

Dokumentflöde (normal flow) Det normala flödet i en webbsida, där blockelement staplas vertikalt uppifrån och ned och inline-element flödar horisontellt. Element med `position: absolute` eller `float` bryts ur flödet och påverkar inte andra elements position. Display egenskaper och dokumentflödet

DOM Document Object Model, webbläsarens representation av HTML-dokumentet som ett träd av noder. JavaScript kan läsa och ändra DOM:en för att uppdatera sidan dynamiskt. Semantiska landmärken

DOS-lagen Lag (2018:1937) om tillgänglighet till digital offentlig service. Kräver att offentliga aktörers digitala tjänster uppfyller WCAG 2.1 AA. Digital juridik & etik

dvh (dynamic viewport height) En CSS-enhet som representerar 1% av den dynamiska viewport-höjden, den höjd som faktiskt är synlig när webbläsarens adressfält är synligt på mobil. Ersätter `100vh` för fullskärmssektioner på mobil. Hero-sektionen

E

em Enhet relativt till det aktuella elementets (eller föräldraelementets) font-size. Kan bli svår att följa i djupt nästlade element. CSS-enheter

F

flex-container Det element som har `display: flex`. Styr hur dess direkta barn (flex-items) placeras längs huvud- och tvärtaxeln. Flexbox

flex-item Direkta barn till en flex-container. Reagerar på `flex-grow`, `flex-shrink` och `flex-basis` för att anpassa sin storlek och position längs huvudaxeln. Flexbox

Flexbox CSS-layoutmodul som gör det enkelt att fördela utrymme och justera element längs en axel (rad eller kolumn). Styrs med display: flex på behållaren. Navigationsstruktur ,Sidebar-layouten

Förälder, barn, syskon Familjetermer för relationer i HTML-trädet. Föräldern omsluter ett element direkt, barnet ligger direkt inuti föräldern, och syskon är element som delar samma förälder. HTML-trädet

G

gap CSS-egenskap som sätter avståndet (gutter) mellan element i flex- och grid-containrar. Ersätter margin-hack och håller koden ren. Navigationsstruktur

Git Ett versionshanteringssystem som sparar hela historiken av ett projekt som en serie snapshots (commits). Låter dig gå tillbaka till en tidigare version av koden och samarbeta med andra. Publicera på webben

GitHub Pages En gratistjänst från GitHub som gör din kodrepository tillgänglig som en live-webbsida. Måste aktiveras separat från repositoryt via Settings → Pages. Publicera på webben

H

head Delen av ett HTML-dokument som innehåller metadata, information om sidan som inte syns direkt för besökaren, t.ex. titel, teckenuppsättning och CSS-kopplingar. Dokumentets struktur ,Typsnitt & webbfonter

Hex-kod Hexadecimal notation för färg i CSS: `#RRGGBB` där RR, GG, BB är röd, grön och blå intensitet från 00 (ingen) till FF (max). `#ff0000` är renrött. Den vanligaste notationen för att ange färger i CSS. CSS, selektorer och färg

hit-area Den klickbara eller tryckbara ytan på ett interaktivt element. WCAG 2.2 rekommenderar minst 24x24 CSS-pixlar. Hit-areas

HTML HyperText Markup Language, det språk som används för att strukturera innehåll på webben med hjälp av taggar och element. Dokumentets struktur ,HTML-trädet ,Projekt: Gutenberg

HTML-element En byggsten i HTML bestående av en öppningstagg, innehåll och en stängningstag, exempelvis <p>text</p>. Vissa element är tomma och har ingen stängningstag. Dokumentets struktur ,HTML-trädet

HTML-träd Den hierarkiska strukturen som uppstår när HTML-element nästlas inuti varandra, med `<html>` som rot. Varje element är en gren med föräldrar, barn och syskon som relationer. HTML-trädet

I

inset CSS-shorthand för `top`, `right`, `bottom` och `left` tillsammans. `inset: 0` sätter alla fyra till 0 och gör att elementet täcker hela sin positionerade förälder. Avancerad positionering

Interoperabilitet Förmågan hos ett system (t.ex. en webbplats) att fungera korrekt i olika miljöer som webbläsare, operativsystem, enheter och skärmstorlekar. Testar man bara i Chrome är interoperabiliteten okänd. Verifiering och utvärdering

K

Klient En enhet eller ett program (t.ex. webbläsaren) som skickar förfrågningar till en server och tar emot svar. I webbsammanhang är klienten vanligtvis besökarens webbläsare. Publicera på webben

L

Lighthouse Googles inbyggda audit-verktyg i Chrome DevTools. Mäter prestanda, tillgänglighet, best practices och SEO och ger ett poäng 1-100 per kategori med specifika förbättringsförslag. Automatiserad testning

M

margin Utrymmet utanför elementets border. Skapar avstånd till omgivande element. Kan kollapsa när två vertikala marginaler möts. Box-modellen

Mobile-first Designstrategi där mobilstilen är standard och desktop-stilar läggs till med `min-width`-media queries. Tvingar prioritering av kärninnehåll och resulterar ofta i enklare, lättare CSS. Media queries

Motiverat designbeslut Dokumentation av ett medvetet val i design eller implementering: vilket alternativ valdes, varför, och mot vilka kriterier. Visar att beslutet är genomtänkt och reproducerbart, inte en tillfällighet. Verifiering och utvärdering

O

outline Visuellt lager utanför border som inte påverkar layout eller boxmodell. Idealisk för fokus-stilar eftersom den inte rubbar omgivande element. Får aldrig tas bort utan att ersättas av en synlig fokus-indikator. Boxmodellen

P

padding Utrymmet innanför elementets border. Påverkar klickytan och bakgrundsfärgen men inte avståndet till omgivande element. Box-modellen

Persona En fiktiv representation av en typisk användare, baserad på research eller välgrundade antaganden. Beskriver demografisk information, mål, frustrationer och beteenden. Används för att förankra designbeslut i verkliga behov. Målgrupp och användarberättelser

personuppgift Alla uppgifter som kan kopplas till en identifierbar fysisk person. Inkluderar namn, e-post, IP-adresser och cookies som spårar beteende. Digital juridik & etik

prefers-reduced-motion CSS media feature som detekterar om användaren aktiverat en systeminställning för reducerad rörelse. Används för att inaktivera eller minska animationer för användare som är känsliga för rörelse. Interaktion & feedback

Progressiv förbättring En webbutvecklingsstrategi som bygger i lager: HTML-grunden fungerar alltid, CSS förbättrar utseendet, JavaScript förbättrar interaktiviteten. Varje lager är en förbättring, inte ett krav. Progressiv förbättring

Prototyp En tidig, enkel version av en produkt eller ett gränssnitt som används för att testa idéer och strukturer. I webbutveckling ofta en pappersteckning eller enkel HTML-sida. Webbens mönster

Pseudoelement Ett virtuellt element skapat av CSS utan extra HTML. `::before` infogar ett element direkt inuti sin förälder, precis före det övriga innehållet. `::after` infogar det efter. Kräver `content: ""` för att visas. Hero-sektionen

R

rem Root em. Enhet relativt till html-elementets font-size (vanligtvis 16px). 1rem = 16px om användaren inte ändrat sin webbläsarinställning. CSS-enheter

Responsiv design En webbdesignstrategi där layouten anpassar sig efter skärmens storlek. Med Flexbox och tekniker som flex-wrap och min-width kan sidor automatiskt anpassa sig till allt från mobil till storskärm utan Media Queries. Container & läsvänlighet ,Sidebar-layouten

S

Scope creep Okontrollerad utvidgning av ett projekts omfång. Funktioner och sidor tillkommer utan att tid eller resurser anpassas. Vanlig orsak till att projekt missar deadline eller aldrig blir färdiga. Välj vad som ska byggas

Semantisk HTML Att välja HTML-element utifrån deras betydelse snarare än utseende, t.ex. <nav> för navigering och <article> för fristående innehåll. Gynnar tillgänglighet och sökmotorer. Innehållshierarki & struktur ,Semantiska landmärken ,Projekt: fiktivt CV

SEO Search Engine Optimization, sökmotoroptimering. Processen att göra en webbplats lättläst för sökmotorer som Google. Korrekt rubrikhierarki, semantisk HTML och alt-texter bidrar direkt till bättre SEO. Dokumentets struktur ,Innehållshierarki & struktur ,Webbens roll i samhället

Server En dator eller tjänst som tar emot förfrågningar från klienter och skickar tillbaka resurser, t.ex. HTML-filer, bilder eller data. Publicera på webben

Sitemap En strukturell karta över en webbplats sidor och hur de hänger ihop. Används i planeringsfasen för att bestämma webbplatsens omfång och navigationsstruktur innan kodning påbörjas. Välj vad som ska byggas

SVG Scalable Vector Graphics, ett XML-baserat vektorformat för bilder. Definieras matematiskt istället för med pixlar, vilket gör det knivskarpt i alla storlekar. Används för logotyper, ikoner och enkla illustrationer. Bildformat & upphovsrätt ,Projekt: fiktivt CV

Sökväg Adressen till en fil, t.ex. assets/img/profil.webp. En relativ sökväg utgår från filen du skriver i och används för allt i det egna projektet. En absolut sökväg (https://...) används endast för externa resurser på andra servrar. Sökvägar

T

Teckenkodning Standarden för hur tecken (bokstäver och symboler) representeras digitalt. UTF-8 är det moderna standardvalet och stöder i princip alla världens skriftsystem, inklusive å, ä och ö. Dokumentets struktur

Testprotokoll Strukturerad dokumentation av genomförda tester: vilket verktyg, vilken URL, datum, fel hittade, åtgärder vidtagna och kvarstående problem. Bevisar att webbplatsen testats, inte bara att den verkar fungera. Automatiserad testning

transition CSS-egenskap som animerar övergångar mellan state-ändringar. Syntax: `egenskap duration easing`. Specificera alltid exakt egenskap, aldrig `transition: all`. Interaktion & feedback

Typsnitt En samling tecken (bokstäver, siffror och symboler) i en enhetlig design. I CSS styrs typsnitt med font-family. Webbfonter laddas från externa källor som Google Fonts och räknas som nätverkstillgångar som påverkar laddningstiden. Designstilar & identitet ,Typsnitt & webbfonter ,Projekt: fiktivt CV

U

upphovsrätt Ensamrätt för den som skapat ett verk att bestämma hur det används. Uppstår automatiskt vid skapandet utan registrering. Löper i 70 år efter upphovspersonens död i Sverige. Digital juridik & etik

URL Uniform Resource Locator, adressen till en resurs på webben. Består av protokoll (https://), domän och sökväg, t.ex. https://example.com/om-oss. Publicera på webben ,Sökvägar

V

Viewport-enheter (vw, vh) CSS-enheter relativt till webbläsarfönstrets storlek: `vw` (viewport width) och `vh` (viewport height). `100vw` = full fönsterbredd. Används med försiktighet för typografi eftersom texten kan bli för liten på smala skärmar. CSS-enheter & tillgängliga mått

W

W3C Markup Validation Service Verktyg från W3C (validator.w3.org) som kontrollerar om HTML-kod följer standarden. Rapporterar syntaxfel, ogiltiga attribut och felaktig nästling. Bör köras som det första testet på alla sidor. Automatiserad testning

WAVE Web Accessibility Evaluation Tool från WebAIM. Analyserar tillgänglighet: kontrast, aria-attribut, landmärken och formuläretiketter. Röda ikoner markerar fel som måste åtgärdas innan publicering. Automatiserad testning

WCAG Web Content Accessibility Guidelines, riktlinjer för att göra webbinnehåll mer tillgängligt, särskilt för personer med funktionsvariation. Innehåller principer som att innehållet ska vara uppfattbart, hanterbart, begripligt och robust. Navigationsstruktur ,Webbens roll i samhället

WebKit Apples webbläsarmotor som används i Safari och alla webbläsare på iOS och iPadOS. Implementerar CSS och HTML ibland annorlunda än Blink (Chrome) och Gecko (Firefox), vilket kräver testning i Safari. Verifiering och utvärdering

WebP Modernt bildformat för webben som ger bättre komprimering än JPEG och PNG. Stöder transparens och är branschstandarden för foton och bilder med genomskinlig bakgrund. Bildformat & upphovsrätt ,Projekt: fiktivt CV

Wireframe En enkel skiss som visar layouten för en webbsida utan färger eller bilder, bara lådor och etiketter. Används för att planera struktur och tänka igenom innehållet innan kod skrivs. Webbens mönster ,Projekt: fiktivt CV

Z

z-index CSS-egenskap som styr stapelordningen för positionerade element längs z-axeln (djupaxeln). Högre värde = mer i förgrunden. Fungerar bara på element med en `position`-värde annat än `static`. Avancerad positionering