Nettsteder og multimedier

Home IT1 Nettsteder og multimedier

Hvordan dele et bilde. Kort om åndsverk og Creative commons.

Jone Nyborg i NDLA har tatt et foto som han har lyst til at andre skal kunne bruke. Hvordan kan han gjøre det?

Du kan merke egne produksjoner med Creative commons-lisens slik at andre enkelt kan gjenbruke og bygge videre på det du har skapt.

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

Hva er flexbox?

Flexbox er et kraftig verktøy i CSS-verktøykassen. Det løser noen vanlige utfordringer med dagens float-baserte layouts, og åpner opp for nye muligheter.

Ikke en erstatning for ‘float’
Før jeg gravde meg ned i hva flexbox virkelig var, hadde jeg en oppfatning av at det var en erstatning for float. Etter å ha brukt det en stund, innser jeg at det er mer et nytt verktøy, enn et verktøy som erstatter et annet. Floats har fortsatt sin plass, men flexbox er et bedre verktøy for mange av jobbene floats tidligere har gjort.

Det betyr også at man kan ta et nettsted som allerede eksisterer og drysse flexbox der det måtte være hensiktsmessig. Les mer her……….

Aktuelle lenker:

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

Ditt første HTML dokument

HyperText Markup Language (HTML, hypertekstmarkeringsspråk) er et markeringsspråk for formatering av nettsider med hypertekst og annen informasjon som kan vises i en nettleser.

HTML er altså et markeringsspråk som brukes til å markere deler av et dokument, og dette gir mulighet til å klikke videre til et annet sted i samme dokumentet eller til et annet dokument, altså surfe på nettet.

HTML er et språk som brukes til å publisere nettside på informasjonskanale World Wide Web, som er en del av internett. Det er viktig å forstå at HTML ikke definerer utseende, men struktur. For å definere utseendet bruker man CSS.

Læreboka: 5 HTML og CSS – en introduksjon

  • Kap. 5.2a HTML elementer (avsnitt og linjeskift)
  • Kap. 5.2b HTML elementer (overskrifter)
  • Kap. 5.3 og 5.4 Tekst og bakgrunnsfarge
  • Kap. 5.5 Overskrifter

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.


Codeschool: HTML/CSS

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

Ressurssider:

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

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

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:

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: