Nettsteder og multimedier

Home IT1 Nettsteder og multimedier

Nettstruktur og brukeropplevelser

Kompetansemål:
– planlegge nettsteder som inneholder multimediekomponenter
– utvikle nettsteder i henhold til planer og vurdere om krav til brukergrensesnitt er oppfylt

Du har sikkert opplevd å lete etter noe på en nettside, men uansett hvor du klikker, finner du ikke noe som opplagt skulle vært der. Ingenting kan være mer irriterende enn det, akkurat da. Vi bør derfor følge noen prinsipper for struktur og organisering av innhold, når vi lager nettsider.

En nettside kan se utrolige kul ut, og den kan ha et interessant innhold, men hvis du for eksempel ikke finner lenken til hvordan du skal få kjøpt billetter til konserten du skal på til kvelden, ja, da virker ikke nettsiden som den skal.

Prinsipper for hierarkisk struktur
  • De viktigste sidene skal øverst og til venstre i hierarkiet.
  • Dette gjelder alle sidene bortsett fra «Om …», som oftest ligger helt til høyre, eller nederst.
  • Det må være samsvar mellom hovedmenyer og undermenyer i den hierarkiske strukturen.
  • Er det mye informasjon som skal vises, er det vanlig med lister eller rutenettvisninger for det nederste nivået i hierarkiet.
Prinsipper for organisering av innhold
  • Informasjon på ulike hierarkiske nivåer trenger ulikt detaljnivå og gjerne egne skisser for oppsett av informasjon.
  • Det viktigste stoffet får størst plass.
  • Informasjon av ulik type trenger ulik utforming avhengig av type innhold på informasjonen.
  • Informasjon som består av tekst, bilder og/eller video, trenger ulik organisering avhengig av hvilke medietyper som er med.

Kilde: https://ndla.no/nb/node/160297?fag=156500

Kodekurs online

khan-logo-vertical-transparentKahn Academy: Intro til HTML/CSS

Lær å lage nettsider ved hjelp av HTML og CSS. HTML er kodespråket som du omringer innholdet med, for å fortelle nettlesere om headere, lister, tabeller, osv. CSS er det språket du bruker for å utforme nettsiden, for å be nettleserne forandre farge, font, oppsett, m.m. html css koding.

loginkahn


Codeschool: HTML/CSS

code_school_reviewLearn the fundamentals of design, front-end development, and crafting user experiences that are easy on the eyes.
>>>>>>>>>

Ressurssider:

INTERNETTSTANDARDER OG TEKNOLOGIER

Kompetansemål:
gjøre rede for hvilke standarder og prinsipper som muliggjør Internett

Internettstandarder handler om kommunikasjon mellom maskiner. Vi ser på en del grunnbegreper i World Wide Web og ulike internett- og webtjenester.


Noen begreper:

  • Et nettverk består av flere datamaskiner som er koblet sammen, og som kan kommunisere med hverandre. Internett er et nettverk av nettverk.
  • En klient er en maskin som mottar informasjon, og en tjener er en maskin som sender informasjon.
  • En protokoll er en standard for datakommunikasjon. En protokoll angir regler som må følges av tjenere og klienter ved sending av informasjon.
  • Internettprotokollen styrer kommunikasjon mellom maskiner, ved at alle maskiner får en unik adresse (en IP-adresse).
  • Transmission Control Protocol styrer hvordan informasjon sendes mellom maskiner. Den bestemmer hvordan pakker skal deles opp, sendes og mottas.
  • Hypertext Transfer Protocol styrer kommunikasjonen mellom nettlesere (hos klienter) og tjenere.

Aktuelle lenker:

 Blogg er et sentralt nettbasert verktøy. Vi skal derfor lære og sette opp en enkel blogg i wordpress. Noen begrunnelser for hvorfor blogg er aktuelt og kunne i faget.

For det første er blogg er et sentralt nettbasert verktøy som ofte inngår i virksomheters bruk av sosiale medier, men det å lykkes med blogging både teknisk og innnholdsmessig er vanskelig uten å prøve i praksis selv.

Videre er blogg en form for kommunikasjon som har mange nivåer av forståelse. Selv erfarne bloggere har stadig nye ting å lære. Aha-opplevelsene en kan få er mange.

Blogg er også en type Web 2.0-teknologi som på en fin måte demonstrerer og binder sammen en rekke andre 2.0-teknologier.

Til slutt er blogg en god arena for læring og refleksjon, siden en blogg åpner for kommentarer og innspill fra medstudenter, faglærer og andre som ikke nødvendigvis tar faget. Erfaringsbasert læring er veldig viktig i forbindelse med sosiale medier, og blogg er en flott plattform å fremme slik læring.

Oppgave: Sett opp en blogg på wordpress.com.

Bloggens tema skal være om digital samtid. Velg et eller flere tema innenfor området. Se kunnskapsmålene:

– beskrive ulike typer digitalt utstyr og forklare hovedtrekkene ved virkemåten
– forklare hvordan de fysiske signalene i datautstyr kan tolkes som binære tall, tegnsett, grafiske framstillinger, billedpunkter og lyd
– gjøre rede for standarder for kommunikasjon mellom ulike former for digitalt utstyr og mellom programmer
– gjøre rede for hvilke utfordringer og muligheter den digitale verden kan skape for språklige og kulturelle minoriteter
– gjøre rede for og argumentere for nødvendigheten av regelverk og etiske normer for bruk av informasjonsteknologi
– beskrive og drøfte informasjonsteknologiens muligheter og konsekvenser
– beskrive og foreslå tiltak mot trusler i den digitale verden

Bloggen skal ha en side hvor du presenterer deg selv og temaet for bloggen, og hvorfor akkurat dette temaet interesserer deg. Den skal også ha to bloggposter om temaet, og et grafisk utseende («theme» i WordPress-terminologien) som passer til temaet du skriver om. Du skal også ha med lenker til et par (minst to) andre blogger som handler om lignende temaer.

Bildebehandling

Bildebehandling er en bearbeidelse av digitale bilder ved hjelp av programvare. Det finnes flere dyktige bildebehandlingsprogrammer, blant annet Adobe Photoshop, Adobe Fireworks, GIMP, Corels og Picture Window Pro, for å nevne noen.

Bruk av bilder og grafikk er en sentral del av det å lage nettsider. Vi ser på hvordan vi kan tilpasse bilder til nettsidene våre. Vi skal gså se på hvordan vi kan tilføre kreative grafiske elementer. Vi bruker Photoshop, Pixlr, Fireworks, Gimp eller lignende programvare.


ONLINE PHOTO EDITORS

Photoshoplenker: 

  1. En innføringsvideo i Photoshop CS5
  2. Learn the basics of Photoshop CS6
  3. Get to know photoshop
  4. Norsk videokurs
  5. Svensk videokurs
  6. Redigere online

HTML og CSS koding

Lær å bruke HTML og CSS for å lage nettsider. HTML er kodespråk som du setter inn innholdet i og forteller nettleseren om hvilke deler av siden som er overskrifter, lister og tabeller. CSS er stilsettspråket du lager siden med, og det forteller nettleseren om farger, skrifttyper, layout og mer.

HTML står for Hyper Text Markup Language.
HTML er ikke et programmeringsspråk, det er et kodespråk. Et kodespråk er et sett med koder. HTML bruker koder for å bestemme nettsidens struktur/innhold. Vi bør ikke prøve og påvirke nettsidens utsende med HTML. Til det bruker vi CSS.

Elevene skal kunne bruke hovedelementene i HTML:

<!DOCTYPE html>
<html>
<head>
    <title>mypage</title>
    <meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="stilarkfil.css"/>
</head>
<body>
<p> hello</p>
</body>
</html>

Avsnitt, lenker, lister, tabeller, bilder, lyd, video, div-elementer, link opp CSS og skjemaer. –  HTML5 W3Cw3


CSS står for Cascading Style Sheets (på norsk stilsett).
CSS brukes til å bestemme nettsidens utseende. Vi kan gjøre om utseende på de aller fleste HTML-elemeter.

CSS kan skrives i HTML-dokumenter. Da legger vi koden inn under <style>-elementet i <head>– elementet. Men det er best og plassere CSS-koden i et eget dokument (eksternt stilark). Eks.
<head>
<link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
</head>

Elevene skal kunne bruke hovedelementene i CSS:

  • Opprette eksterne stilark
  • Gi utseende til <body>-elementet
    (skrifttype/farge/størrelse og bakgrunnsfarger)
  • Gi utseende til liste/menyer
  • Gi utseende til tabeller og skjemaer
  • Gi utseende til <div>-elementer
  • Flexbox layout

Kriteriesett for nettsteder og tjenester

Kriteriesettet retter seg mot både nettsteder og tjenester, og ser på dette som en helhet. Det består av 33 kriterier fordelt på 6 kategorier.

Kriteriesettet ligger til grunn for vår kvalitetsvurdering av offentlige tjeneste som resulterer i stjernefordeling (fra 1 til 6 stjerner) og prisen «Årets digitale tjeneste».

Kriteriesettet har flere bruksområder og fungerer blant annet både som veiledning, hjelp til selvevaluering og som dokumentasjon til kravspesifikasjon i anskaffelser av webløsninger.

Alle kriterier har beskrivende testmetode slik at du selv kan sjekke om du oppfyller kravene. Dersom du har et nettsted uten tjenester, hopper du bare over de testpunktene som bare gjelder tjenester. Noen steder trenger du egne testverktøy, men disse laster du ned gratis etter behov.

Å lage gode digitale tjenester er en stor jobb. Kriteriesettet er en god start, i tillegg har vi samlet noen andre sett med retningslinjer du også bør vite om.

IT1: Prosjekt ungdomsklubb

Ungdomsklubben dere er medlemmer i planlegger en utenlandstur. Ledelsen i klubben lurer på om dere kan lage et nettsted som presenterer reisen og fire forskjellige severdigheter som skal besøkes. I tillegg skal det være litt generell informasjon om reisen/stedet/byen/landet.

Det stilles en rekke krav til nettstedet, og dere må lage en plan for å fordele arbeidet samt sørge for at alle deler blir utført. Sett opp en plan for prosjektet. Planen skal inneholde en framdriftsplan for prosjektet. Hvem gjør hva og beregnet tid. Før dere starter skal dere planlegge arbeidsprosessen. Skrive ned og planlegg gjennomføringen av alle aktiviteter dere kommer på når dere leser og diskuterer oppgaveteksten.  Dokumenter oppgavefordelingen.

Nettsider som skal lages:

  • Forside
  • Reiseopplegg
  • Presentasjon av severdighetene med både tekst og bilde.
  • Presentasjon av Danmark med noe fakta samt bilder.
  • Kontaktside (med skjema)
  • Om prosjektet (brukergrensesnitt etc.)

Krav til nettstedet:

  • Sidene skal utvikles i sublime text eller tilsvarende editor
  • Sidene skal bygges opp ved hjelp av tabeller eller divs.
  • Dere skal bruke eksternt stilark.
  • Menyen på sidene skal være en ‘cssliste’.
  • Nettstedet skal også ha et egenutviklet bilde/logo.
  • Nettstedet skal inneholde lyd, video og skjema
  • Hver nettside skal ha en egen tekst i tittellinja
  • Hver side skal ha ikoner til sosiale medier som Twitter og Facebook.
  • Alle bilder dere bruker skal bearbeides i en grafikk-editor
    • bildene dere benytter bør være hentet fra nettsider hvor materialet er lagt ut i henhold til lisensbestemmelsene Creative Commons
    • legg inn navn på opphavsperson på bildene
    • tilpass bildene til ‘riktig’ størrelse

Dere skal altså publisere/levere:

  1. Komplett nettsted som tilfredsstiller kravene over.
  2. En av nettsidene skal være informasjon om gruppa og arbeidsprosessen deres.
  3. Nettsidene skal publiseres på elevenes nettsider. det vil si at alle elevene på gruppa skal publisere sidene.

Vurderingskriterier

  1. Oppfylle krav til nettstedet (se oppgaven)
  2. Logo, utforming og funksjon
  3. Tekstinnhold, overskrifter, tydelighet…
  4. Navigasjon/meny, funksjon
  5. Komposisjon: Fargevalg, bilder, og tekst
    1. Tekst: Justering og tilpassing av tekst
    2. Bilder: tilpasning på sidene
  6. Bildevalg og lisenser
  7. Sidens tekniske funksjon i nettleser
  8. Mappestruktur
  9. Helhetlig inntrykk

Universell utforming: Løsningsforslag for web

Aktuelle lenker:

Kodevalidering

Korrekt kode er viktig for å sikre at nettsiden fungerer riktig med ulike nettlesere og hjelpemidler. Det er enkelte kodefeil som er mer kritiske enn andre. Når nettsiden har få kodefeil, er det lettere å oppdage de alvorlige feilene.

For å sjekke koden på nettsidene kan du bruke W3Cs kodevalidator (enkelsk). Du bør sjekke alle sidemalene på ditt nettsted. Målsetningen bør være feilfri kode, men du må se spesielt etter disse feilene:

  • At alle elementer er nøstet korrekt.
  • At alle elementer startes og avsluttes korrekt.
  • At ingen elementer har duplikate attributt.
  • At ingen elementer har identisk verdi på id-attributtet.

Utdypende om kodestandarder og validering.


Fra: https://uu.difi.no/artikkel/2016/02/hvordan-teste-universell-utforming-av-ditt-nettsted

Brukergrensesnitt – planlegging

Kompetansemål under ‘Nettsteder og multimedier’
– utvikle nettsteder i henhold til planer og vurdere om krav til brukergrensesnitt er oppfylt

Brukergrensesnitt er måten maskinen og programmet kommuniserer med brukeren på, f.eks. tekst, grafikk, lys, kommandoer, menyvalg, museklikk osv. Vi kan dele opp brukergrensesnitt for datamaskiner i to typer. Vi har grafisk- og tekstlig brukergrensesnitt.

Når vi lager en nettside er det viktig å tenke på brukergrenesnitt, som går ut på å tilpasse nettsiden til mottakeren. Et godt brukergrensesnitt er intuitivt for brukeren. Det skal være lett å finne de viktigste knappene og funksjonene.

Universell Utforming
Når vi planlegger og utformer nettsider må vi også ta hensyn til universell utforming . Begrepet brukes om å lage ting slik at de er tilgjengelige for alle, både brukere med og uten funksjonshemminger. Det handler altså ikke om å lage tilleggsløsninger for folk med spesielle behov, men å lage ting slik at de i utgangspunktet kan brukes av alle. (Klikk på bildet)

Momenter/forhold vi må vurdere:

  1. GAS-prinsippet
    1. Goals = hva du vil oppnå – hvorfor vi utvikler denne nettsiden
    2. Audience = hvem målgruppen er
    3. Scope = hva hovedinnholdet er
  2. Skriftyper og fargevalg: Overskrifter/Tekstmengde og størrelse/Ordvalg
  3. Navigasjonssystem/meny
  4. Bilde og ikonbruk
  5. Lyd og video/Animasjon

Eksempelvideoer:

NSR_VelgRiktig_Songying_3 from Realfagsrekruttering on Vimeo.


Aktuelle lenker: