Webutvikling PDF

Innføring 20.08.24 mandag 5. august 2024 18:49 Prosjektmappe i Visual Code koblet mot Git. Git Skylagring (backup) Mappestruktur, datastruktur, kan lagres mot skytjenester Versjonskontroll Samarbeid Git er bransjestandard for kodeprosjekter Jira finnes og...

Innføring 20.08.24 mandag 5. august 2024 18:49 Prosjektmappe i Visual Code koblet mot Git. Git Skylagring (backup) Mappestruktur, datastruktur, kan lagres mot skytjenester Versjonskontroll Samarbeid Git er bransjestandard for kodeprosjekter Jira finnes også Lettere å dele kode Opensource Backupløsning med versjonskontroll Kan lage egen portefølje med kodeprosjekt Github/Gitkraken Programvare med grafisk grensesnitt som forenkler bruken av Git (Kan brukes fra cmd) Github er enklere enn Gitkraken, men kraken er enklere ved støre prosjekter og store samarbeid "Git" er selve systemet, sørger for at funskjoner etc. funker Github gjør at man kan samhandle med Git på maskinen. Repository Prosjektmappe i Git med ekstra egenskaper Skapes i skyen, klones ned til maskin. Jobber lokalt, men endringer lagres tilbake i sky. Repository for faget med eksempler etc. Klone et repositiry betyr å hente et prosjekt som ligger i Git-sky for å gjøre det tilgjengelig på maskin Nødvendig for å jobbe med filer og mapper i prosjektet. Kan klone egen og andre sine repositorys. Kan ikke jobbe i andres repositorys, det vil ikke lagres pga. rettigheter. IDE = Integrated Development Environment. VSCode er en teksteditor. Brukes for å skrive, kjøre og teste kode. Finnes mange forskjellig IDE. Commit er å gjøre en versjon klar. Comittmelding blir en log melding. Bør gjøres regelmessig. Skriv hva som er gjort med koden for oversikt. Bør ideelt sett gjøres når koden er fungerende. Kan gå tilbake i commit historikken og kjøre rollback. Side 1 for Webutvikling Intro webutvikling 24.08.24 fredag 23. august 2024 08:15 Stort kurs, mye innhold Finne, vurdere og evaluere informasjon. Gratis ChatGPT kan være utdatert info. Hvorfor viktig å følge standarder, og hvordan de utvikler seg HTML5 Søkemotoroptimalisering Blikk fram i tid Deep tag (?) Sass (?) Utvikle nettsteder med vekt på nyere tek. Tilgjengelighet og universell utforming SEO Skal lages til mobil først, så ev. utvide til desktop Hva kan jeg bli? Frontend, back-end, UX-designer, webdesigner, fullstack etc. Gjennomføring Hybrid forelesning - Aud eller zoom< Oblig 5 lab-øvelser LMS - Pensum. Det vi har i forelesninger + ekstra. Øvingsoppgaver. Lese gjennom pensum før forelesning. Canvas - Oversikt og øvelser Prosjekteksamen (teller 70%). Godkjent - kvote, null røde errors (noe skjønn gis), eksamensdokument (kilder brukt, hvilken karakter du går for) Skriftlig eksamen - multiple choice Hvor startet webutvikling Memex - Mekanisert fil- og biblioteksystem Prototype av et hypertext-system. Lagring/notering/markering av lett tilgjengelig innhold (tidlig database-system) 1945 Bakgrunn for Internett er forskning, samarbeid. Frontend - Brukergrensesnitt (alt du ser), HTML5, CSS3, Javascript Backend - Alt som skjer bak, server og databasekommunikasjon Nettsted - Subdomene, HTML, Url, domene. Innhold, design, funksjonalitet (CTA). Alt som gir "mening". Installere flere nettlesere. Firefox, chrome, opera URL (Uniform Resource Locator) Server - Der nettsiden bor, "spør" server hvor nettleser ligger (ip-adresse). Ittud.hiof.no/~brukernavn Side 2 for Webutvikling Grunnleggende HTML tirsdag 27. august 2024 08:16 Språk for struktur og formattering Tag brukes ved skriving. Åpning og avslutning. Står mellom Tag kan avsluttes internt, "". Må ikke ha innhold. Semantiske tagger - HTML 5. Semantikk = mening 2D og 3d via En tag kan ha attributter Element - Hele blokken med tag, innhold, attributter. Tag - Selve HTML tagen, , etc. Man må ha med visse tagger for å bygge HTML-filer. Får valideringsfeil hvis ikke. Komplett liste over HTML tags: w3schools.com/tags/ HTML5 tegnsett - Kan ikke skrives som symboler/tegn, da blir de lest som kode. Må bruke character entities, liste over entities: toptal.com/designers/htmlarrows/symbols/ Strenge på validering, spesielt eksamen. Ingen røde error Ikke bruk for å lage luft, kun CSS Side 3 for Webutvikling HTML5: Semantikk onsdag 28. august 2024 14:17 Betyr "mening" Tagger: osv….. Developer.mozilla.org har god dokumentasjon Lovpålagt at nettstedet er up to date, f.eks. at skjermoppleser fungerer Header Definerer en overskriftsseksjon i HTML-dokument eller i en seksjon. Ikke det samme som Kan inneholde logo, introelementer, søkefelt og mer. God SEO og tilgjengelighet Kan brukes flere ganger gjennom koden Inneholder typisk -tagger og andre skal aldri være "nestet" inn i Nav Navigasjon, definerer et område. Kan være et søkefelt. Flere linker på et sted, da kan man bruke nav Bidrar til tilgjengelighet Main Står for hovedområde Kun brukes 1 gang per nettsted Hovedinnhold Forbedret tilgjengelighet Skal aldri nestes inni andre tagger som: header, footer, article, aside, nav Section Brukes til å definere en seksjon av et HTML dokument Representere gruppering av elementer innen samme tema Bør inneholde en overskrift (-, hvis ikke får du warning Kan ha section nestet inn i hverandre, men tenk på hensikt. Article Representere selvstendig innhold, typisk artikler, blogginnlegg, produktkort, kommentarer eller andre innholdstyper som kan stå alene Tenk nyhetskort, produktkort etc. Aside Brukes til alt innhold som er indirekte relatert til hovedinnholdet, men som hovedinnholdet ikke er avhengig av. Typisk: Relaterte produkter, sitater, fun facts, detaljer etc. Scanning (vi leser ikke) -> Valg (ufarlig/enklere enn å overveie) -> Ev. tilbake til scanning. Før man skal designe -Dropp all unødvendig tekst, slik som velkomsttekst. Dropp all "happy-talk". -"Instructions must die" -Dra fordel av konvensjoner. "Stoppskilt, plassering av knapper i bil, dørhåndtak". Bør ikke endre seg. -Lag effektive visuelle hierarkier. "Jo viktigere, jo tydeligere. Logiske grupperinger." Lag logiske seksjoner som f.eks. Sport, nyheter etc. -Bryt opp siden i klart definerte området. "Nyeste produkter, navigasjon etc." -Gjør det tydelig hva som er klikkbart. Hold visuell støy til et absolutt minimum. Formater tekst for scanning. -De 10 bud: Jakob Nielsen Hva er innhold? -"Content is king" Ikke innhold = Ingen produkt -Navigasjon er en viktig del av innholdet. -Tekst, bilder, video, audio. Alt meningsbærende er innhold. Planlegging er å designe -Mange begynner i feil ende -Viktigst: Hva er innholdet, og hvem skal finne det? -Hvor starter vi? Forundersøkelser (rammeverk, benchmarking, snakke med brukere) Skisser / Wireframes Strukturside/strukturdesign (HTML og CSS) med dummyinnhold Designelementer (farger, fonter og annen pynt) Implementere innhold Brukertesting gjøres kontinuerlig igjennom prosjektet Informasjonsarkitektur Side 9 for Webutvikling  Informasjonsarkitektur -Hvordan informasjon struktureres, organiseres, og presenteres på en nettside i en applikasjon for å gjøre det lett å navigere og forstå for brukere. -Top down: Starter med overordnet struktur. Anses som "Klassisk nettside.struktur". Bryter info ned i mindre deler. Store bildet -> detaljert -Starter med å definere de overordnede delene av nettstedet. -Lag et hierarki som kobler ting sammen -Undersider - logisk struktur av innhold -Ulempe at det er lite fleksibelt, da endringer påvirkes av justering på toppnivå. -Bottum-up: Begynner på detaljnivå ved å fokusere på innholdet først, deretter bygge opp til en større struktur. -Identifiser og optimaliser enkeltinnhold som artikler, produkter eller funksjoner. -Grupper innholdet basert på likheter eller brukermønstre -Sett sammen gruppene til en helhetlig struktur. -Svært fleksibelt, spesielt dynamisk eller skiftende innhold. -Gir innsikt i brukerens behov ved å organisere eksisterende innhold. -Passer godt for innholdsproduksjon, oppskrift-sider etc. -Kan bli kaotisk struktur hvis ikke nøye organisert. -Krever ofte revisjoner for å sikre sammenheng i den overordnede strukturen. Planlegge navigasjon -Hvordan kommer jeg meg til spesifikt innhold? -Hvor kan jeg gå? (Betalingsmur, innlogging som hindrer) -Hvor langt er det til mål? -Hvor er jeg? -Hvor kan vi gå videre? -Tiltro til siden -Bruk det som funker (kovensjoner) -Global navigasjon. Lik navigering på alle sider. (Spesifikk navigasjon/undermeny) -Tenk nivåer. -Hjem knapp. Ikke dropp logo navigering for hjem knapp. Tenk målgruppe. Brødsmulesti -Viser stien du har gått. -Viser hele veien tilbake (best practice) -Toppen av siden, ved siden av logo/meny. -Bruk symboler for å skille nivåer. (> f.eks.) -Bruk fet tekst for å utheve der du er. -La forbigående nivåer være linker. Wireframes vs skisser -Skisser før wireframes. -Wireframe viser hvor ting skal ligge. F.eks. header, bilder etc. Skjermoppløsning -Mobile first. Google er mobile first, og blir ikke indexsert hvis du koder uten dette. -Tenk forskjellig skjerm når du tenker innhold. -"Flytende" skjermoppløsninger. Endres ofte. -Tenk responsivt Responsivt design -Samme HTML-fil og samme innhold uansett skjerm. CSS gjør endringer. -Designet skaleres basert på størrelsen på skjermen det viser på. Side 10 for Webutvikling  -Designet skaleres basert på størrelsen på skjermen det viser på. -Planlegge: Tenk grids, kolonner. CSS-grids -Flytende kolonnebasert struktur forenkler responsivt design. Det gylne snitt som designerprinsipp - 1,6 eller 62% eller 2/3. Side 11 for Webutvikling CSS: Syntaks og selektor tirsdag 17. september 2024 08:16 Hva er CSS? -Sett med regler for hvordan strukturspråk skal vises. -Cascading style sheet. Hvordan CSS-regler blir brukt og prioritert. Kan overstyre hverandre. Siste som står som gjelder, med noen få unntak. -Brukes til å kontrollere layout, farger, skrift og andre visuelle aspekter CSS3 -Nyeste standard som skal funke i alle nettlesere. Kan sjekkes her: caniuse.com -Nivåer (Cascading) -Inline (CSS på selve HTML taggen, overskriver alt) -Internal (Skrevet i head taggen i HTML) -External (Eget CSS ark) -User -Browser CSS syntaks -Selektor, deklarasjoner. Beskriver hvordan elementene som er valgt/pekes på skal se ut. -Egenskap: Hva som skal endres -Verdi: Spesifikasjonen av hvordan egenskapen skal settes/endres. -Viktig å huske på {} Selektor: Type -Ikke bruk unødvendig class og ID. Ikke bruk om du ikke må -Stiler alle forekomster av et element -Nyttig til default styling som skal følge hele nettstedet -Type-selektor kan lett overstyres, da den har en lav spesifisitet Selektor: class(.) -Styling som kan gjenbrukes på flere ting -Kan gjenbrukes på tvers av flere elementer -Bygge modulær og komponentbasert CSS -Kan ha flere klasser på ett attributt Selektor: id(#) -Skal kun finnes 1 av samme ID gjennom hele HTML dokumentet -Brukes f.eks. for å manipulere noe med JS -Høy spesifisering, kan overskrive det aller meste Selektor: universal (*) -Kan velge alle elementer på HTML siden -Bruk med omhu -Kun for default styling Selektor: attributt ([type="text"]) -Style spesifikke inndatafelt, som tekstfelt, passordfelt, placeholder eller radioknapper Selektor: pseudo-klasser -Legger til noe "ekstra" -Hover-elementer etc. -Brukerdefinert, gir ofte et svar på hva brukeren gjør -Visuell tilstand til et element -pseudo-klasser er ferdigdefinerte Selektor: pseudo-elementer -Legge til ting på HTML elementer, uten at det blir lagt i HTML-dokumentet. (symboler, ikoner etc.) -Begynner med 2 kolon (::) Selektorkjeding -Skrive stien til hva jeg vil style. Peker på noe spesifikt, går igjennom hele stien. -Viktig med mellomrom, for å peke spesifikt -Høy spesifisitet Side 12 for Webutvikling  -Høy spesifisitet Gruppe-selektor -Samme stil på flere elementer -Skrive alt sammen i ett regelsett, istedenfor å repetere -Bruker komma for å skille mellom ulike tags Side 13 for Webutvikling CSS: Farger og visuelle regler onsdag 18. september 2024 14:15 CSS farger -Anbefaler å bruke fargekoder. HSL, RGB og HEX -Fargenavn. (blue, green etc.) -Forbedrer lesbarhet -Gir visuell hierarki -Skaper følelser og stemning (tiltro) Hexadecimal Farger -Bruker et sekstentallssystem (hexadecimal) for å representere farger -Skrives #-symbol etterfult av seks tegn med tall fra 0-9 og bokstaver A-F. A-F representerer verdiene 10-15 RGB (255, 0, 34) -Red green blue -Kombinasjon av rødt, grønt og blått gir ulike farger -Verdier varierer fra 0-255 der 0 betyr ingen intensitet, mens 255 betyr max intsensitet HSL (11, 50%, 9%) -Hue(fargetone), Saturation(metning), Lightness(lysstyrke) -HSL representerer farger på en måte som er lettere å forstå i forhold til hvordan i faktisk oppfatter farger Alpha verdier -Alpha verdien viser hvor mye av fargen som er synlig -RGBA, HSLA, HEXA. -0 er fullstendig gjennomsiktig, 1 er fullstendig ugjennomsiktig Siste sifferet bestemmer alpha verdien Visuelle regler -Font-size. Bestemmer strls. På tekstelige elementer. Ulike måleenheter (px, %, em, rem) -Font-weight. Bestemmer tykkelsen på teksten. Normal, bold etc. Kan også være numeriske verdier fra 100-900 -Font-family. Angir skrifttypen som skal brukes. Definere fallback-fonter. Font navn med mellomrom må ha ´fnutter´ rundt seg. Line-height -Angir avstand mellom linjene, bidrar til lesbarhet. Kan settes relativt (1.5) eller absolutte verdier (20px) Color -Kun tekstelige elementer. RGB, hex etc. Background-color -Setter farge på hele elementet Opacity -Gjennomsiktigheten til et element. Verdier fra 0-1. Background-image Bakgrunnsbilde på et element. Background-size Side 14 for Webutvikling  Background-size -Kontrollere hvordan bakgrunnsbilde skaleres. Bruker verdier som cover og contain Text-align -Justere tekst. Høyre, midt eller venstrestilt. Venstre er default. Text-decoration -Legge til/fjerne dekorasjoner på tekstelige elementer. Midtstreker, overstreker etc. Fjerne understrek på link. Text-transformation -Brukes til å transformere tekst. Kun store, små eller camel-case Side 15 for Webutvikling CSS: Box model, målenheter fredag 20. september 2024 08:17 CSS Box Model -Innhold: Kjernen i boksen(tekst, bilder etc.), padding: Avstanden mellom innholdet og bokskanten, border: Rammen rundt boksen, margin: Avstanden mellom boksen og andre elementer Egenskaper: -6 egenskaper. box-sizing, dispplay, float, line-height, position, z-index Box model: display -En av de viktigste egenskapene. Avgjør hvordan et element blir plassert på siden -Block, inline, inline-block, flex, grid, none Box model: Box-sizing -Kontrollerer hvordan bredde og høyde på en boks beregnes -content box: -border box: Box model: float -Unngå å bruk denne. Bruk heller flex og grid -Flytter innhold til venstre eller høyre, med innhold som flyter rundt den. Box model: position -Posisjoneringen til elementet. Hvordan plasseres elementet i forhold til andre elementer? -static: Standardverdi. Naturlig elementflyt -relative: Relativ til andre elementer, men kan flyttes på med top, left, bottom, right -absolute: Posisjonerer elementet i forhold til nærmeste plasserte forelder. Elementet blir fjernet fra dokumentflyten -fixed: Elementet skal "sitte fast". Fastplassert på siden i forhold til viewport -sticky: Kombinerer relative og fixed. Elementet oppfører seg som relative til en viss posisjon på siden, og deretter "fester" seg. Box model: z-index -Bestemmer hvilke elementer som ligger foran andre i et lagdelt layout -Høyere z-index verdi betyr at elementet ligger over elementer med lavere. Funker kun på elementer med position satt til relative, absolute, fixed, sticky. Box model: Line-height -Mellomrom mellom hver linje. Hvor høy/stor boksen er -Påvirker hele innholdsboksen, og fungerer kun på tekstelig elementer Andre egenskaper som påvirker -flex-egenskaper -grid-egenskaper -width og height -margin og padding CSS måleenheter: -Aboslutte enheter: px, cm, mm, in -Relative enheter: em, rem, vw, vh, % Side 16 for Webutvikling CSS Flexbox onsdag 2. oktober 2024 14:14 FLEX OG GRID BLIR STOR DEL AV EKSAMEN CSS Flexbox -Standard layout teknologi -I motsetning til grid formes flexbox rundt en akse. -Erstatter div og float strukturert grid -Fleksible bokser Flex container -Foreldre-element settes til å være flex (display: flex) -Alle barneelementer blir flex items Flex-direction -Bestemmer retning elementene vil flye -Row, row-reverse, column, colums-reverse -Hovedakse og kryssakse Flex-wrap -Legger seg på rad uansett om det er plass eller ikke. Med wrap hopper den på neste linje. -nowrap, wrap og wrap-reverse Flex-item: justify-content -Bestemme hvordan barne-elementene skal legge seg på hovedaksen -Hvor skal det legge seg i forhold til luft tilgjengelig -flex-start, flex-end, center, space-between, space-around, space-evenly Flex-item: align-items -Hvordan det plasseres langs kryssaksen Flex item: order -Gjøres på selve flex items, altså barne elementene -Bestemmer hvilken posisjon i rekkefølgen elementet skal ha. Bare visuelt Flex-grow: -Brukes ved flere elementer, men vil at noen elementer er større enn "søsknene" sine. -Ved å sette høyere verdi, blir elementet større Flex-shrink: -Gjør det motsatte av grow, gjøre elementer mindre enn "søsknene" sine. -Ved å sette verdi 0 krymper ikke elementet på lik linje med de andre elementene. Side 17 for Webutvikling CSS layouts: Grid fredag 4. oktober 2024 08:16 Fungerer optimalt når man blander grid og flexbox Start med et "clean" utgangspunkt -Normalize.css, endrer på standard CSS koden -Link opp eller @import før din css kode CSS Grid -Lag en skisse, planlegg struktur etter en wireframe/skisse. Får en template man kan ta inspirasjon fra -Planlegg struktur etter hvilken teknologi man skal bruke Divits (nesten unødvendig hvis semantisk) Flexbox Grid -Rutenett som vi definerer. Hvor mange kolonner og rader har siden? Hvordan skal elementene plasseres i forhold? -Med grid jobber man i 2 akser CSS Grid Layout -Slipper å bruke float, position etc -Todimensjonalt grid-basert layout system -Responsivt The basics -Rutenett med rader og kolonner vi kan fylle med innhold -Grid container display: grid; -Grid item, grid line, grid cell, grid track, grid area Grid: container -grid-template-columns: (f.eks. 1fr 3fr 1fr) -grid-template-rows -Hvor mange rader og kolonner vi ønsker, og hvor store de skal være Grid item -Alle elementer innenfor containeren -Kun barneelementene som blir påvirket av container -Grid kan overstyre CSS egenskaper CSS grid -Definere områder for item og container -Gi grid-items navn med egenskapen grid-area: "name". Side 18 for Webutvikling Responsivt design: CSS Media Queries og Grid onsdag 9. oktober 2024 14:15 Responsivt design -En HTML fil som tilpasser seg basert på skjermen den vises på -Google bruker mobilversjon til indeksering og rangering -Skaper mindre administrasjons- og vedlikeholdsbehov -Siden er lang i stedet for bred (Kun 1 kolonne?) -Tenk touch (funksjonalitet skjult ved :hover?) -Navigasjon (hamburgermeny?) - må ligge øverst i head for media queries skal fungere Design for responsive nettsider -Mobile-first! -Wireframes/skisser for både desktop og mobil, men start med mobil -Planlegg fra begynnelsen (hamburgermeny, header for mobil etc.) Hva er media queries? -Essensielle for responsive sider -Velge hvilken skjermstørrelse som skal få den spesifiserte stilen -Presentere samme innhold på forskjellige måter ut ifra skjermstørrelsen/oppløsningen -Kan skrive media queries i selve HTML, hvis du har et eget stilark f.eks. -Best practise er å skrive det i CSS, da har man 1 stilark -Kan velge media queries etter rotering (portrait, landscape) Breakpoints -Betyr et punkt/størrelse hvor annen eller tilpasset CSS-kode skal gjelde. -Trenger bare å bruke breakpoint hvis det er noe viktig som må tilpasses -Anbefaler mellom 3-5 breakpoints. 3 er ideelt. (desktop, tablet, mobile) -Skriv kode, planlegg design. Start med mobile, og jobb deg oppover -Bryte design basert på enheter = px -Bryte basert på design (tekstlig innhold) = em Testing -Veldig viktig å gjøre løpende. Sjekke i inspector -Ikke bare bruk en ferdig løsning, passer ikke alltid innholdet -Baserer breakpoint basert på innholdet -Fastsatt løsning fungerer dårlig -Gjør nettleseren så lite som mulig, og gjør den gradvis større. Når begynner det å bli stygt? Sett breakpoint Side 19 for Webutvikling Responsivt design: Bilder og typografi fredag 11. oktober 2024 08:16 Responsive nettsider Lasting av bilder -Nedskalering gjør ingenting med firstørrelsen - -Unngå hardkodede fontstørrelser -Fjern/juster margin og padding Responsiv typography -Tekst blir like responsiv uavhengig av enhet(størrelse) Størrelseangivelse: em, rem, vw, vh -Element size: basert på fontstørrelsen av elementet det brukes for -Root size: Basert på fontstørrelsen av rotelementet -Anbefaler å bruke rem, men krever litt tilpasning i media queries -Viewport width: Bredden av tilgjengelig nettleservindu -Viewport height: Høyden av tilgjengelig nettleservindu -Angi basis fontstørrelse som en utregning basert på standard fontstørrelse i nettleseren + skjermstørrelse Side 20 for Webutvikling SASS tirsdag 15. oktober 2024 08:15 Hva er Sass? -Utvidelsesspråk for CSS som gir designere mulighet til å strukturere filer mer oversiktilig. Likt som CSS, men kan bruke grunnleggende programmeringssyntax for å lage dynamisk CSS. -Må preprosesseres til vanlig CSS før det kan brukes i HTML Nesting -Neste flere stilregelsett inni hverandre Referere foreldreselectoren -Skrive stiler for pseudoklasser/elementer direkte innenfor elementets stilregel. (:hover, :focus etc.) -Bruke &-tegnet for å indikere at du skal style det gjeldende elementet i kombinasjon Variabler -Gir et navn som representerer en verdi. Farger, font, og mye mer. Lett å gjenbruke Mixins -Fungerer som en funksjon. Standard regelsett(CSS). -Unngå repetisjon i koden. Gjenbruke kode, ved å sende med visse parametere. Extending -Arve stilen til en annen klasse. Gjenbruke stilregelsett fra ett selektor til et annet uten å duplisere CSS kode. Struktur -Partials: En SASS-fil som inneholder CSS/SASS-kode som inkluderes i en annen fil. -Alt må importeres inn til hoved CSS-filen. -Partial filer MÅ starte med understrek ( _ ). -Hovedfil main.scss kan importeres med "@import" -Rekkefølge på import er viktig. -Filstruktur er viktig. CSS mappe, SASS mappe Side 21 for Webutvikling Tilgjengelighet og universell utforming tirsdag 22. oktober 2024 08:20 78% av informasjon hentes via en digital enhet. Forutsetter likeverdighet. Lik tilgang hvis mulig. Hvis ikke mulig, skal det gis likeverdig tilgang. Hvorfor er dette viktig? -God brukerskikk: Alle skal kunne oppleve (så å si) det samme. -Konvertering/salg: Selgende nettsider som ikke får solgt taper penger. -Lovpålagt med minstekrav for universell utforming: Nye nettsider etter 1.07.14 skal møte minstekrav. Tilgjengelighetserklæring er et krav fra 2023. Eksamen skal inneholde en tilgjengelighetserklæring. Regelverk -Krav om at 35 av 61 suksesskriterier oppfylles -3 nivåer. A, AA, AAA -4 kategorier. Perceivable, operable, understandable, robusthet -uutilsynet.no Tilgjengelig -Syn, hørsel, motorisk, kognitiv -Ved å følge normer kan man få bedre tilgjengelighet Prinsipper for tilgjengelig design -Fornuftige alternative tekster på bilder. (alt="") -Fornuftig dokumentstruktur (både HTML og tekst. Semantikk) -Gi tittelrader (headers) for tabeller -Sørg for at brukere kan fylle ut og sende inn skjemaer. -Sørg for at linker gir mening basert på kontekst. -Ha hjelpetekster/transkripsjoner av media -Tilby tilgjengelige alternativer til innhold som ikke er HTML (PDF, Word-filer) -Gi brukeren mulighet for å droppe gjentagende elementer på en side ("skip to content") -Farge skal ikke være eneste meningsbærende effekt på noe element. Lesbarhet -Sørg for god lesbarhet i innholdet -Overskrifter har ulike størrelser -Tekstnivåer -Lister -Fontvalg, størrelser -Kontroller bilde- og fargebruk Utfordringer ved prinsippene -Krav til kontrast i farger -Farger kan ikke være eneste meningsbærende effekt -Krav til bilder, audio/video og tektsinnhold -Krav til maskinell lesbarhet Content is king! Innhold er viktigst! "Design uten innhold er pynt!" Iverata prinsippene -God SEO == God UU -Semantikk, struktur og innhold Side 22 for Webutvikling  HTML tips for UU -Bruk lang-attributt for å markere språk -For fremmedspråklige fraser i tekst: ……… -Semantikk = mening (også for nettlesere/verktøy). Semantiske tagger kan brukes som navigasjon -Attributtet roles, og bruk dem. Viser hvilken rolle et element spiller i strukturen. - -Skip to content -Bruk "alt" attributtet. Hvis img kun brukes til dekorasjon skal "alt" taggen være tom. -Hidden eller screen-reader-only-class i CSS som fjerner innhold fra viewport, men ikke fra koden. -Beholde lesbar kode uten å ødelegge struktur/design -Bruk for beskrivelse av tabell. Aldri ha tomme headere. Bruk scope="col" og scope="role" for å definere området gjelder. Støttes ikke av HTML, men viktig for skjermlesere. -Ha en synlig label i tillegg til placeholder for skjemafelter -Ha synlig focus på skjemafelter (pseudoklasse :focus) -Placeholder forsvinner ved fokus på input, ergo vil en forklarende tekst mens man fyller ut hjelpe mange -Tilby et alternativt stilark med høykontrast brukeren kan velge. Litt overskrevet av "darkmode". -Bruk responsivt typografi. Justeres etter brukerens egne innstillinger i forhold til zoom/fontstørrelse -For SASS: Google "sass mixin for responsive typography" -Ved inkludering av og. Ha en title-attributt med beskrivelse. Ha en tekst tett i nærheten til videoen med enten tekst som beskriver innholdet eller lenke til tekst. -Kan bruke. Bruk som linker brukeren til youtube-videoen. Side 23 for Webutvikling GDPR og Cookies fredag 25. oktober 2024 08:15 GDPR - General Data Protection Regulation -Gjelder for alle EU/EØS-land -Nasjonale regler med norske tilpasninger -Fortale(kontekst til artiklene) og artikler. -Gjelder når vi samler data og/eller behandler personopplysninger -Innført mai 2018 -Ivaretar brukernes rettigheter Cookies -Små tekstfiler som lagres på brukernes enhet av en nettside -Brukes for å hente brukernes valg og informasjon -Førstepartcookies: Typisk brukerinnstillinger, som språk eller påloggingsinformasjon og settet av nettstedet -Tredjepartcookies: Settes av eksterne domer, som annonseplattformer (f.eks. Google Ads, Facebool Pixel). Brukes til sporing og markedsføring på tvers av flere nettsteder Formålet med cookies -Nødvendige cookies: Sørger for at nettstedet fungerer korrekt (f.eks. holde brukere innlogget) -Analyse og ytelsescookies: Samler datta om hvordan besøkende bruekr nettstedet (F.eks. Google Analytics) -Markedsføringscookies: Brukes for å vise målrettede annonser basert på brukerens interesser GDPR og Cookies -Cookies samler informasjon som kan betraktes som personinformasjon (f.eks. IP-adresser) -GDPR krever samtykke før cookies lagres, med mindre de er nødvendige for nettstedets funksjon -Må gi informert samtykke, tydelig hva som samles inn og til hvilket formål Samtykke -Må være frivillig, spesifikt, informert og tydelig -Brukeren må kunne trekke tilbake samtykke like enkelt som det ble gitt -Brukeren må aktivt krysse av for samtykke Cookie-varsel og krav -Tilby brukerne muligheten til å velge hvilke typer cookies de aksepterer -Informer og bruken av cookies på en klar og lettforståelig måte -Gi lenker til personvernerklæringen -Sikre at cookie-varsler er i samsvar med nasjonale retningslinjer Konsekvenser ved brudd -Store bøter - Opptil 4% av selskapets globale omsetning, eller 20 millioner euro (avhengig hva som er høyest) -Omdømme -Redusert tillitt Lage gode samtykkeordninger -Granulært samtykke. Tilby brukerne muligheten til å velge hvilke spesifikke typer cookies de vil akseptere. -Brukervennlig utforming Side 24 for Webutvikling  -Brukervennlig utforming -Ingen forhåndsvalgte bokser -Tilbaketrekking av samtykke -Detaljert informasjon om cookies -Tilpasset opplevelse -Proaktive påminnelser Tekniske eksempler på hvordan vi samler data -Cookies -localStorage -sessionStorage -database lagring Side 25 for Webutvikling SEO tirsdag 29. oktober 2024 08:18 Generelt -Gjøre nettsiden attraktiv for søkemotorene -Handler om mer enn bare kode og smart løsninger -Få siden høyt opp i treffene -Alle ønsker førsteplass hos Google -SERP-siden = første siden på Google -Gode resultater ved hjelp av SEO tar tid. Begrenset hvor raskt søkemotorer rekker å gå igjennom nye/endrede sider. -Søkemotorer er strenge - spesielt Google Begreper -Indexing: Sidene på nettstedet havner på google. Blir "Indexert" av Google. -Crawling: "Crawlere", Google bots som jobber fra side til side. Intern linking er viktig. Sånn Google oppdager oppdatert innhold. -Landingpage: Begrep når noen har gjort et søk på Google. Den siden brukeren havner på ved å trykke på en link/annonse/nyhetsbrev/google søk etc. -Exitpage: Siden brukeren forsvant fra. -Bounce: For å måle om brukeren fant det de lette etter. Høy bounce-rate viser at innholdet ditt ikke er bra. -Site Authority: Hvor "credible" nettsiden er. Godt kjent etc. -SERP: Hvorfor er SEO viktig? -Brukere søker etter hva de ønsker, ikke etter selskaper for å se hva de tilbyr. Viktige faktorer - på siden -Innhold: Relevant ifht. Hva brukeren søker etter. Ikke bruk duplikat-innhold fra andre nettsteder. -Arkitektur: Hvordan er nettsiden strukturert? God navigasjon, tilgjengelighet, intern linking. -HTML: Validering, viktig å ha 0 error. God semantikk. Viktige faktorer - utenfor siden -Tillit, linking til nettstedet ditt, lokalitet, sosiale medier. Endringer skjer kjapt på nett -Mye nytt innhold -Konkurrenter gjør en god jobb - hva må jeg gjøre bedre? -Søkemotorens algoritmer endrer seg fra dag til dag. SEO vs SEM -SEO er organisk (ikke betalte søketreff). Dette er langsiktig -Arbeid for å få flere besøkende. -Større og lengre effekt enn andre løsninger. -SEM står for Search Engine Marketing. Betalt plass for å havne høyere opp. Side 26 for Webutvikling  -SEM står for Search Engine Marketing. Betalt plass for å havne høyere opp. -Betalte annonser i søkemotorene. -Gir raske resultater -Koster en del. Kan også betale for antall unike klikk. -Har lite effekt etter endt kampanje -Kan være lurt som ny nettside for å skape trafikk på siden SEO gir kun treff -Innholdet på siden må samsvare med søketreffet så du ikke mister brukeren (bounce-rate). Huskeregler -Bra struktur -Skille mellom innhold, design og funksjonalitet -Bruker man tid på dette så forbedrer man også andre aspekter av siden Google vet alt om deg som bruker -Samler personlige innstillinger/historikk -Påvirker søkeresultatene dine -For søkeresultater uten personlig påvirkning bruk: "&pws=0" i URL'en. Sørg for at tekst/innhold er leselig for søkemotorer -Skille innhold, design og funksjonalitet -Semantiske tagger -Bruke "alt" tekst på f.eks. bilder -Konvertere multimedia til tekst -Validert side! Gyldig og riktig HTML er kjempeviktig for god SEO. SEO basics -Nøye valgte nøkkelord -Sørg for så mange som mulig inngående linker -Sørg for god intern linking Før og etter -All verdens jobb med SEO er fåfengt om man ikke kan måle resultater. Husk å ha oversikt over tilstanden før man begynte arbeidet. -Viktig å kunne vise resultater, spesielt som konsulent. Vanskelig å spore resultater med SEO Kan måle med: -Rang på google -Besøkende på siden -Antall salg/besøkende/kunder -Annen måleenhet Måle -Bedriftens rykte -Merkevare verdi -Besøkende vs faktiske salg -Ingen øyeblikkelig effekt -Web statistikk kan hjelpe deg (Google search console og tagmanager) -Facebook (sosiale medier) statistikk kan også hjelpe med SEO arbeidet. SEO arbeid involverer hele bedriften -"Alle for en!" Rangerings algoritmer -Data er ikke real time -Google bruker mer enn 200 faktorer -Algoritmene endres ofte -Algoritmen er hemmelig Side 27 for Webutvikling  -Algoritmen er hemmelig -Se mentimeter 29.10. for noen av metodene de bruker Spørsmål for god SEO -Hvem er brukerne? -Hva vil vi de skal gjøre på siden og hvorfor -Ønsker vi salg? -Ønsker vi kontakt med potensielle kunder -Ønsker vi bare at de skal lese en artikkel? (og se reklame) -Ønsker vi noe annet? -Hvilken landingsside skal brukere havne på? Nøkkelord eller søkeord er grunnlaget i SEO -Firmanavn -Produktnavn -Tjeneste navn -Bransje -Lokasjon Viktig å tenke utenfor boksen -Slang -Lokale varianter -Alternativ stavemåte -Forkortelser -Entall/flertall -Skrivefeil Nøkkelord -"Vi" vet hva siden handler om, ikke sikkert brukeren er enig -Bruke mest mulig "unike" nøkkelord -Hva bruker "konkurrentene"? 3 kriterier: -Hvor mange brukere søker etter ordet? -Hvor mange andre sider benytter ordet? -Hvor relevant er ordet for din nettside? Optimalt søkeord: -Mye benyttet -Få konkurrenter -Høy relevans for innholdet Hvis siden ikke er indexert -Legg den til indeksering (google search console) -Bruke ulike addme-tjenester -Få andre sider til å linke til din. Tekniske SEO løsninger -. En av de viktigste taggene. Vær spesifikk og unik for hver side. Max 70 tegn. Inkluder sidenavn/bedriftsnavn. Stor forbokstav gir flere klikk. Unngå duplikattitler