UU Flashcards

1
Q

Noen viktige WCAG krav

A
Tekstlig alternativ
Teksting av video
Struktur
Estetisk
Tastatur
Navigasjon
Språk
Instrukser

1.1… - tekstlig alternativ

1.1.1 A:
All ikke-tekstlig innhold har et tekstlig alternativ.

1.2 - teksting av video
1.2.2 A:
Video og audio som ikke er live har undertekst.

1.2.3 A:
Kort beskrivende tekst eller lydspor av video

1.3 - struktur
1.3.1 A
Ting er kodet som det ser ut

1.4 - Estetisk
1.4.2 A
Bruker kan stanse og starte lyd som begynner automatisk

1.4.1 A
Farge skal ikke være eneste ting som gir intrukser/mening

1.4.3 A
Kontrast mellom tekst og bakgrunn er 4,5:1

1.4.5 AA
Bruk tekst i stedet for bilder av tekst

2.1 - Tastatur
2.1.1 A
All funksjonalitet skal kunne brukes ved hjelp av tastatur

2.3.1 A - Frekvense av fargeendring
Innhold skal ikke blinke mer enn tre ganger pr sekund

2.4 oppsett for bruker
2.4.1 A
Bruker kan hoppe til hovedinnhold

2.4.2 A
Nyttige og tydlige sidetitler

2.4.3 A
Innhold er i logisk rekkefølge

2.4.5 A
Bruker har flere måter å navigere på

3.1 - språk
3.1.1 A
Språket på siden er angitt i koden

3.3 - intrukser
3.3.1 A
Feil som oppdages sutomatisk må det vises hvor feilen er og beskrive feilen

3.3.4 AA
Feil som medfører juridiske forpliktelse må man kunne angre på. Eks innsending av inndata

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Hva er regelen fra 2014?
Hva handler den om?
Hva er WCAG
Hva er WAD

A

Forskrift om universiell utforming av IKT-køsninger
WCAG
WAD

Husk:
Forskrift om universiell utforming av IKT-løsninger
krever at nettsider møter WCAG 2.0 på nivå A og AA
Web content accessability guidlines
WAD - Web accessibility directive/EUs webdirektiv
Tilgjengelighetserklæringen

Forskrift om universiell utforming av IKT-køsninger.

Formålet er å sikre UU av informasjons- og kommunikasjonsteknologiske løsninger.
Krever at nettløsninger skal utformes i samsvar med WCSG 2.0, på nivå A og AA.
Kravene som må møtes finner man på uutilsynet.no

Hva er WCAG?
Web content accessibility guidlines.
Retningslinjer for tilgjengelighet på nettsider.
Retningslinjer for hvordan brukergrensesnitt skal utformes slik at den er tilgjengelig for alle, uavhengig av funksjonsevne.

Hva er WAD?
Web accessibility directive
EUs webdirektiv
Er EUs webdirektiv for UU av offentlige nettsteder og mobilapplikasjoner.
Gjelder for Norsk lov.
Stiller i stor grad de samme kravene, men har noen tillegg. Dette er:
Tilgjengelighetserklæring:
En erklæring som sier at nettsted er universielt utformet.

Forskrift om universiell utforming av IKT-køsninger.

Formålet er å sikre UU av informasjons- og kommunikasjonsteknologiske løsninger.
Krever at nettløsninger skal utformes i samsvar med WCSG 2.0, på nivå A og AA.
Kravene som må møtes finner man på uutilsynet.no

Hva er WCAG?
Web content accessibility guidlines.
Retningslinjer for tilgjengelighet på nettsider.
Retningslinjer for hvordan brukergrensesnitt skal utformes slik at den er tilgjengelig for alle, uavhengig av funksjonsevne.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Hvordan sikre at man er innenfor UU målene

Hvordan sikre at man er innenfor A nivåene

A

Se på listen over WCAG krav.
Generelt:
Hvis man har god struktur og intuitiv navigasjon og oppsett av side, så møter man som regel A krav.

Hvis man har tatt ekstra steg for p slrge at forskjellige elementer kommer tydelig fram, med for eksempel god kontrast mellom farger, god forskjeller i tekststørrelser, sp npr man som regel AA.

Hvis man gjør ekstra steg for å sørge for at siden er så tilgjengelig så mulig for absolutt alle, ved for eksempel sterk fargekontraster, tegnespråk på videoer for blinde, så møter man som regel AAA.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Sammenheng mellom SEO og UU:

Hvordan SEO og UU er relatert

A
1.
Tekslig alternativ (eks alt tekst, forklaring av video)
Teksting av video/audio
Oppføring av språk som brukes
Strukturen er som siden ser ut.
Strukturen er enkel og effektiv
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Hva forutsetter UU?

A
Lik tilgang (tilgjengelighet) hvis mulig.
Likeverdig tilgang hvis lik tilgsng ikke er mulig.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Hva betyr responsivitet?

Hvordan burde man tenke over gva internett fsktisk er?

A

Tilpasningsdyktighet i forhold til ulike skjermstørrelser

En informadjonskanal

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

UU midler
SEO midler
Microdata midler

A
UU:
uutilsynet.no
wave.webaim.org
difi.no
wc3

SEO
google console
Google trends
AnswerThePublic - forslag til nyttige søkefraser
Word Tracker Scout - se hvilke fraser og ord sidet bruker
WordStream keywords - forslag til søkeord og fraser

Microdata
schema.org
schema validator
W3 RDFa validator
Duvlin core metadata initiativ
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Microdata syntax

Meadata syntax

A

Micro:
I parent har man “itemscope” og itemtype=x
Så i child har man itemprop=xa

Meta:
name - typen metadata som brukes
content - verdien til metadataen
eks på name typer:
description
keywords
author
veiwport
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Ting som er viktig å våte ved oppsett av kode

A

Ting som img og nav kan være i header, det trenger ikke bare å være noe som h1.

Man burde fokusere på å bruke bare img alene, istedenfor å putte det inn i en figure-tag

lang puttes inn i html taggen

<blockquote> brukes for lange quotes
brukes for kortere quotes
Man kan putte lang i taggen hvis quotet er på et visst språk

</blockquote>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Sette opp input for søking

A

from action=”” method=”get”
label for=”s” id=”s” class=”screen-reader-only”
input name°”s” type=”sesrch”
form

Hva gjør det forskjellige stteibuttene?
action: Hvilken side man skal gå til ved bruk av input
method: Hvordan verdien i feltet dkal brukes
For: for hvilket input labelet er for
ops - for må ha samme verdi som name
type: hva slag input type det er
name: Brukes for å vite hvilket element det er snakk om

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Hvm har ansvaret for vedlikehold av webstandarder?

A

W3C

World wide web consortium

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Hvilke deler består en URL av?

A

Unified Resoursce Locator

Domene
Subdomene
Path
Filnavn

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Hva er WAI-ARIA

Hvordan brukes det?

A

Det er attrubutes som kan brukes for å gi siden mer mening slik at nettleser kan enklere lese siden.

Man brukes det for det meste med eks role=element
som frks role=navigation
Men det burde bare brukes når nødvendig.
Eks det er ikke nødvendig med wai-aria for navigasjon, fordi man kan istede bruke nav

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Hva er W3C
Hvordan er WCAG relatert til det?
Hva var WCAG igjen?

A

W3C står for standarder p protokoller på nett

WCAG er relatert ved at det er utviklet igjennom W3C

Et sett med standarder

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Symboler:
©
<
>

A

©: &copy

: &gt

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Hva er DNS til?

A

Domain Name System
Man bruker dette til å koble til IP’er
mobil skal til nett side -> DNS server -> DNS server som henter IP,
så sendes IP-adressen ned kjettingen igjen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Hva er DNSSEC?

A

Sikkerhetsmekanisme som skal forhindre at man kommer til feil nettside.
Passer på at man kommer på riktig side, men ikke at det man leter etter ikke blir funnet
Domain name system security extension

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Hva er er en webserver

A

Maskinvare som kan settes opp hjemme, eller i en maskinpartk, eller feks rasperrypie.
Den oppgave er å kjøre en nettside

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Hva er en IP adresse?
Hva er de to versjonene?
Hvorfor blir den ene mer populær?

A

En unik adresse som tildeles domener

To versjoner IP-adresser
IPv-4 og IPv6
IPv4 - 32bit adresse, mange er reservert for spesielt for spesielt bruk

IP-adressen til pc’en din kobler seg på en ruter, som så bruker sin egen ip-adresse for å koble til nett

IPv6
det begynner å bli tomt for IP adresser
Derfor er det moticasjon for IPv6, fordi det har flere bits

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Hva er TCP/IP

A

TransmissionControlProtocol/IP - TCP/IP
TCP - protokoll for pålitelig overføring av data - gjør at man kan sende meldinger over et nettverk
IP - protokoll for adressing og ruting av data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Hva er en TLD?

Noen tld

A

Top level domain
Generic og geographic

generic - hva slags nettsted det er, noen av dem er sponset og derfor bare tilgjengelig for noen
genericTLD(sponset)
mil edu museum

genericTLD(tilgjengelig for alle
.edu .gov .travel .eu

sub TLD’er
priv.uk

geographic:
Hvor i verden nettsiden hører til
eks .no

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Hva gjør en webserver?

A

Lagre -
prossesere -
levere -
webbsider

Når man går på en side, sender man en forespørsel til en webserver,
som så levererer webserveren

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Hvordan forbedre crawling på egen side

A

Verifiser at google når siden din:
type din url i movile friendly test

Om man oppdaterer en side eller en side på nettsiden, kan man opplaste det som url til google, for å fortelle om flere sider pp nettside, bruk sitemap

om man forteller at ceawler bare skal gå igjennim en side, så vurde det være hjemmesiden, siden man der linker til andre steder på side

få andre sider til å linke til din side

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Hvordan lage en nettside?

A

Dette trenger du:

Domenenavn

  • Skal man registrere skrivefeil
  • Hvilket toppdomener skal man registrere - man burde velge utifra formål og publikum

Hvoran skaffe toppdomene?
- Man kan kjøpe det fra forskjellige steder. eks godaddo, domeneshop etc

Hvor skal den plasseres?
Den kan plasseres på:
Webhotell, feks domene.shop
Egen server
Leie virtuell server, feks memset.com

DynamicDNS
Trenger man normalt dette? - nei
det brukes for å vidrekoble domene til ressurs som ligger bak gateway med dynamisk tolnermet IP-adresse

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Viktige begreper i SEO

A

Viktige begreper

Landingpage - Den siden som først vises, ikke nødvendigvis forsiden

exitpage - hvor på siden bruker var når bruker forlot side

bounce - at bruker går ut fort fra siden, betyr ednten at bruker med en gang fant det den ville, eller ikke gjorde det, man vil ha bruekre til å bli lenge på side

Site autority - HVor viktig side er (i henhold til søkemotor)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Hva er et domene bygget opp av?

A

Protokoll - http/https
Domenenavn
Filsti

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Juksetriks i SEO

A

Linke til og bli linket til av masse sider
Gjemme linker og tekst med CSS
Autogenerert tekst

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Hva gjør:
flex auto
flex 1
flex 0 1

A

auto:
Det samme som flex 1 1
Gjør at boks tar opp alt gjenværende rom

flex: 1 0
boks tar opp 1/elementer del av det ledige rommet

flex: 0 1
boks tar opp gjenværende rom, men minimeres til det spwsifisert (eks i basis)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

screen reader only

A

clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;

30
Q

Hva hardware kan brukes for å sette opp webserver?
Hva skal hardwaren gjøre?
Hva gjør en webserver?
Hvordan lage en nettside?

A

Egen maskin
maskin-park
rasperry py

Lagre, prossersere en webside ved forespørsel

URL skrives -> kobker til webserver -> Det sendes forespørsel til en server -> forespørsel svares

Man trenger et domene, så må man ha en sted der man kan ha siden. Man kan feks leie en server, lage sin egen server, eller putte den på et webhotell

31
Q

Hva består en URL av?

A

Protokoll:
Hvordan side skal motta og sende data

Subdomene:
Angir tjenester eller oppdelinger av domenet

Domene:
Navn til side

Filsti
Angir filstien til innholdet man ønsker

32
Q

Hva er TLD

A

Top Level Domain
Generic (sponsored)
Sier hva dlags nettsted det er.
edu, gov, travel

Generic (Tilgjengelig for alle)
info, com, net

Geographic
no, sv, dk, de, fr, uk

33
Q

Hva er en IP-adresse.

Hva er de to forskjellige versjonene

A

En unik indikator eller adresse som tildeles en enhet (eks pc, mobil)

IPv-4
34-bit adresse

IPv-6
128-bit adresse

34
Q

Hva er DNSSEC?

A

Domain name system security extension

Skal gorhindre at man kommer til feil nettsted

35
Q

Hva er TCP

A

Trabsmission controll protocoll

Står for poletelig overføring av data

IP: står for adressering og ruting av data

36
Q

Hvirdn lage egen aide?

A
  1. finn domene
  2. velg tld

Kan finnes på domeneshop, godaddy

  1. Så må den plasseres et sted. Noen alternativer:
    Webhotell, eks domene.shop
    Egen server hjemme, dynamisk/fast IP
    Leie virituell server, eks memset
37
Q

Hva er en nettleser?

A

Noe som skal tolke og presentere sider

38
Q

Nye ting i HTML5

A

Semantiske tagger
video ig audio tagger
2D og 3D grafikk

39
Q

Hva er CMS?
Fordeler ig ulemper med CMS
Eksempler på CMSer

A

Content managment system/publiseringssystem
Informasjonssystem for lagring, håndtering, og organisering av innhold.

Fordeler
Slipper srbeid med tanke på tema
Slipper arbeid med tanke på plugin
Kan lett fordele arbeid
Stort samfunn, mye hjelp
mye backend er tatt hånd om

Ulemper
Statisk, avhengig av plugins og temaer
Bloat, ikke sikkert man trenger all funksjonalitet
Kan ikke være like kreativ
Kan trenge mye teknisk hjelp ved store endringer

Wordpress
Joomla
shopify

40
Q

Faktorer i SEO

A
Personlig
omdømme
arkitektur (oversiktlig nav, lett å finne fram)
responsivitet
UU
HTML (alt tekst, semantiske tagger, title, drop nav)
Mikrodata
metadata
41
Q

Ting aom kan brukes til å forbedre Uu

A

En type høytleser
w3c kodevalidator
Google DevTools
webaim.org/resources/contrastchecker

42
Q
  1. Elementer tar opp alt rom,
    og kan minskes
  2. Elementer tar opp alt rom,
    og kan ikke minskes
  3. Elementer tar opp alt rom,
    men kan bare minske en viss del
  4. Elementer tar opp en viss mendge rom,
    og kan minskes
  5. Elementer tar opp en viss mendge rom,
    og kan ikke minskes
  6. Element fyller så mye rom den normalt ville,
    men i tillegg kan den minskes
  7. element fyller så mye rom den normalt gjør,
    men den kan heller ikke minskes.
A
  1. flex: 1 1/ flex: auto
  2. Tror ikke det går an
  3. flex: 1 0 [width]
  4. flex: auto [width]
  5. flex: 0 0 [width]/ flex: none [width]
  6. flex: 0 1
  7. flex: none;
43
Q

Hvordan reaponsivitet er relatert til UU og SEO

Verktøy som kan brukes for å skjekke responsivitet

A

UU
Tekst kan bli endret til 200% størrelse uten tap av innhold eller funksjon

Ting er i logisk rekkefølge

SEO
Hvis man kan bruke side på flere skjermeneheter gir det pluss i SEO, i tillegg til at man får mer trafikk

Verktøy:
Undersøk tool i browser

44
Q

Noen psuedoelementer

A

link:
:hover
active
visited

input:
checked
enabled
disabled

fist-child
last-child
only-child
\:nth-child(n)
\:not

:before
:after
-content

45
Q

Vertkøy til UU

A
Tastatur
wave evaluation tool
wave HTML validator
wave color checker
microsoft narrator
46
Q

Hva er FTP

Fire eksempler på FTP

A

File transport protocol
Filoverførings standard som er operativuavhengig protokoll for overføring av filer til et TCP/IP basert nettverk

Eksempler:
Filezilla
HTTP
Telnet
Mamp
47
Q

La oss si man skal bruke flere fonter, av sans serif.

Hvordan gjør man det?

A

font-family: ‘Gill Sans’, ‘Gill Sans MT’, sans-serif;

48
Q

Selector typer

A

Grunnleggende:
main

Sammensatt
main, header, footer

Relasjon
main, nav, ul, li

49
Q

Hvirdan lage en animation?

Hvorfan ha den ha forskjellige steg?

A

Du putter “animation” der animasjonen skal skje.
Hvis du skal skje under en forutsetning som hover, må du putte det under hover. så eks
den-som-har-animasjon: hover anim-div {
animation: properties
}

Man må bruke animation, så gi wt navn til en animasjon ved å putte et tilfeldig navn inn i animation.
Så utenfor laget man:
@keyframes [navn] {
0p {...}
50p {...}
100p {...}
}
tallene sier hvordan animasjon skal se ut innen tidspunktet.
50
Q

Hvordan bruke transsision?

A
font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
#delay:hover {
  font-size: 36px;
}
51
Q

Hvordan enkelt håndtere font størrelse responsivt?

A
html {font-size: calc(1em + 1vw)}
h1 {font-size: 3rem}
h2 {font-size: 2,2rem}
h3 {font-size: 1,8rem}
h4 {font-size: 1,2rem}
p {font-size: 1rem}
52
Q

Hvirdan bruke video og audio

Hvordan bruke det med fallback

Hvordan ha thumbnail

A
53
Q

Hvordan gjøre det så bilder blir skiftet ut etter skjermstørrelse?

A

Option 1:

<img></img>

 <img>
54
Q

CMS og dets funksjonalitet

A

CMS - Gir et brukergrensesnitt for å redigere innhold på og funksjonalitet på nettside.

Funksjonalitet:
redigering
forhåndsvisning
Utvidbar funksjonalitet - plugins: eks arkiv over bloggposter, kalender (for både admin og brukere)
templates - med noen av disse kan man også bruke layouts
versons managment
brukerkontroll - redigerere har forskjellige rettigheter til sidene - kan se hva andre brukere gjør
automatiske oppdatreinger - lurt med oppdatering med tanke på sikkerhet
søk - kan eks søke etter innhold, kategorier, bilder
osv…

55
Q

Hvirfor er det viktig å oppdatere CMS?

A

CMS er store mål når det kommer til angrep
Så man trenger oppdateringer fordi:
Det kan komme nye svakheter til CMSen
Det kan komme nye angrep
generelle oppdateringer - eks kanskje det blir lagt til nye funksjonaliteter

56
Q

UU og CMS

A
UU i CMS
Enge plugins
Støttet i themes
Støttet i selve systemet
enkelt å implementere med plugins
57
Q

Alternativer til CMS

A

Alternativer til CMS
Manuell oppdatinerger av nettsider med HTML og css

CMF (Content managment frameworkd) som benytter seg av gjenbrukbare komponenter eller custom løsninger for å administrere nettside innhold

58
Q

Fordeler og ilemper med koding istedenfor CMS?

A
Fordeler og ulemper med koding
Enkelt
gjøre alle sider som man vil
lite overhead (trenger ikke å avhenge av plugins, themes for å få ting som man vil)
Kraftig
Slipper å sloss med cms

Ulemper
tungvindt
gir ikke mulighet for flere brukere (ish)
statisk - man kan ikke lett nedlaste themes og plugins
må gjøre alt selv
mye jobb
sikkerhet

59
Q
Eordpress plugins for:
SEO
UU
DESIGN
UTVIKLING
WEBDIREKTØR
A
SEO
Yoast
-genererer meta og title tagger
-genererer sitemap
-integrert schema i systemet

UU
wp accessibility
-evne til å skippe linker
-plasserer utlinje der man fokuserer

DESIGN
elementor
-drag and drop

UTVIKLING
LiveChat
-gir mulighet til bruker til p live chatte på side for hjelp
-har ai chatbot også man kan bruke
WPML
-Gjør så mange kan lage en side for mange forskjellige språk

WEBDIREKTØR
Monsterinsights
-integrert google analytics
-se hvor brukere er fra
-se info om besøk til sider
-resultater fra kampansje
60
Q

Skip navigation

A

Navigasjonen kan vøre irriterende for de som bruker oppleser.

Da er det bra å gi mulighet til brukeren å kunne skippe nav linkene, for å komme rett til hovedinnholdet.

En slik link burde være spesifikt laget for de som bruker opplesere, og kan komme til syne ved at personen bruker oppleser.

For en som ikke bruker oppleser, kan en slik link være distraherende.

For å gjøre dette kan man gjøre så:

  • link bare blir synelig når man bruker tab
  • er viduelt gjemt på starten av siden, eks med display:hidden eller width/height: 0px.

Linken burde videre:
være på toppen av siden
forbli synelig i en viss lengde etter bruker har vært på linken, slik at de ikke gås forbi hvis bruker tabber raskt.

61
Q

Hvordan lage onklig nav

A

properties ting skal ha:
nav ul - margin: 0, padding: 0, overflow, hidden
nav li - float: left, margin-left: 20px
nav li:first-child - margin-left: 0px

62
Q

Fremtiden av UU

A

Det kommer nye krav fra WAD:
12 nye krav fra WCAG 2.1
Tilgjengelighetserklæring

De nye kravene gjelder for det meste bruk av mobil.

Noen av de viktigste kravene er:

Bruker må få velge om innhold skal vises liggende eller stående.

Innhold skal kunne endres til 400 prosent størrelse ved 1280px bredde, uten tap og funksjonalitet.

Kontrast for ikke tekstlig innhold.

Tekstavstand skal kunne overstyres.

Pekerfølsomt innhold eller innhold ved tastaturfokus

Bruker skal kunne slå av hurtigtsster som består av ett tegn

Pekerbevegelse, innhold skal kunne brukes med pekerinput

Pekeravbrytelse, uhelig input med mus eller berøring skal kunne forhindres

63
Q

Responsivitet og uu
uu krav med responsivitet
hvirdan skjekke responsivitet

A

A responsive design creates a uniform standard that satisfies the mainstream needs of its users, whereas accessibility goes deeper and ensures a much-needed layer of functionality for users using assistive technology such as screen readers.

Tekst skal kunne forstørres 200p uten tap av innhold eller funksjonalitet
Pass på st:
innhold og funksjonalitet kan benyttes,
man kan fortsatt godt navigere siden med tastatur når sides skjermstørrelse forandres

For å teste at forstørring fungerer på en god måte, kan du gjøre følgende:

Sett nettleseren i fullskjerm på den største skjermen du har tilgang til, deretter bruk nettleserens zoomfunksjon (Ctrl og +/- eller Cmd og +/-) stegvis til minst 200 prosent, gjerne opp til 400 prosent.

Sjekk at alt innhold og funksjonalitet er tilgjengelig og forståelig.Sett forstørringen til 100 prosent, og endre vindusbredden på din nettleser gradvis fra fullskjerm og ned til det smaleste du får til.

Se om rekkefølge, gruppering og generell layout fungerer godt i hele spekteret.På mobil eller nettbrett, sjekk at du kan forstørre også på sider med responsivt oppsett.

64
Q

Hvordan sette oop master grid

A

master-grid {
height: 200vh;
gap: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr)
grid-template-rows: 2fr 1fr 4fr 1 fr
grid-template-areas: “header header header”
“nav nav nav”
“main main aside”
“footer footer footer”

header {grid-area: header}
nav {grid-area: nav}
main {grid-area: main}
aside {grid-area: aside}
footer {grid-area: footer}

}

65
Q

psuedo classes og psuedo elements

A
Dynamic pseudo-classes
\:link
\:visited
\:hover
\:active
\:focus
UI element states pseudo-classes
\:enabled
\:disabled
\:checked
Structural pseudo-classes
\:first-child
\:nth-child(n)
\:nth-last-child(n)
\:nth-of-type(n)
\:nth-last-of-type(n)
\:last-child
\:first-of-type
\:last-of-type
\:only-child
\:only-of-type
\:root
\:empty
Other pseudo-classes
\:not(x)
\:target
\:lang(language)
psuedo elements:
\::before
\::after
\::first-letter
\::first-line
66
Q

Når man bruker flex wrap, kommer det masse mellomrom mellom elementene vertikalt.
Hvordan fikse dette?

A

align-content: flex start

67
Q

flex aetikkler på mobol og pc

A

pc:
flex: 1

mobil
flex: auto; width: 100%

68
Q

Scss

A

@extend

@mixin {

}
@include flex

@mixin flex ($row: false) {
@if {}

@else if

@ else

}

Funksjoner
@function navn på funksjon {
@return map-get($farger, [argument]
}

69
Q

flex

Hvordan ha:
- når man minsker skjerm, skal det går fra tre til en columns. Det skal aldri ha 2 columns

Hvordan ha:
med flex, er det delt opp i:
tre colums på skjerm width 800px
to columns pp skjerm mellom 640px og 800px
1 column på mindre enn 640
A

1.
mobil:
display flex, flex-wrap, gap: 1rem, justify-content: space-between
elementer inn i: flex: auto, width: 100p

pc
elementer inn i: flex: 1 1, min-width: 30p

2.
mobil:
disolay: flex, flex-wrap: wrap, gap: 1rem, justify-content: space-between
ting i element: flex: auto, width: 100p

mellom-stor-skjerm
elementer i ting: flex: 1 1 min-width: 30p

stor-skjerm
elementer i ting: flex: 1 1, min-width: 45p

70
Q

Hvordan se om en liste inneholder alle verdier i en annen liste?

eks
list1 = [“x”, “y”, “z”]
list2 = [“x”, “z”]

A
if all (elem in list1 for elem in list2):
      print("liste 1 inneholder alle elementene til liste2")