Høgskolen i Oslo Nettsideproduksjon og bildebehandling IKT-seksjonen, høst 2007

Innhold l Kort om bildebehandling i GIMP l Nettsideproduksjon l Publisering

Bildebehandling l GIMP (GNU Image Manipulation Program) - Gratis bildehandlingsprogram som kan lastes ned fra nettet l l Velg ”The GIMP for Windows (version )” – download l Ligger som standard på PC’ene på HiO –Start – Programmer – GIMP –Eller som ikon på skrivebordet

Skarphet og bildestørrelse l Oppløsning –Større oppløsning, flere piksler –Høy oppløsning – kan lage utsnitt av bildet, som fremdeles har god kvalitet l Piksler –Mange piksler, skarpt bilde l Størrelse –Høy oppløsning tar mye plass, og fyller fort opp lagringsplassen (minnekortet)

GIMP l Åpne et bilde i GIMP –Fil – Åpne – Finn fil l Skaler bildet l Ta et utsnitt og kopier l Lim inn som ny… l Lagre nytt bilde

Nettsideproduksjon l Hva er en nettside? l Program: NVU (uttales N-view) l Lage nettsider i NVU l Publisere siden på nettet l Forkunnskaper: Ingen (men en fordel med god kjennskap til filbehandling) l Her kan dere kan laste ned programmet fra nettet: (Dersom du har Windows, velger du nvu-1.0-win32- installer-full.exe)nvu-1.0-win32- installer-full.exe

Nettside l En nettside er et dokument som kan leses ved hjelp av en nettleser – også kalt ”browser”. Det er et tekstdokument som inneholder såkalte HTML-koder. l Du kan lage nettsider ved å programmere HTML-koder l Du kan også lage nettsider ved hjelp av en ”nettside-tekstbehandler” sånn som NVU. l En ”nettside-tekstbehandler” oversetter det vi skriver til HTML-koder

NVU l Skrive inn tekst l Endre tekst l Sette inn horisontal strek l Sette inn bilder l Lage lenker –Bokmerke –E-post-lenke –Hyperlenke – relativ og absolutt (intern og ekstern) l (Lage tabell for tekst-organisering)

Skrive inn og formatere tekst l Bruk av overskrifter (heading) l Endre tekstformat (størrelse, farge, type) l Lage avsnitt (rykke inn tekst) l Lage punktlister (eller nummererte lister) Bruk knapper på verktøymenyene eller oppsøk Format-menyen for å finne utvidete valgmuligheter.

Endre siden l Bakgrunnsfarge –Format – Page colors and background l Horisontal strek –Insert – Horizontal line l Bilde som bakgrunn –Format – Page colors and background – Background Image l Endre navnet på siden (ikke filnavnet, men navnet som du navngir når du lagrer – i den første boksen): –Format – Page Title and Properties

Lage bokmerke Fase 1: Lage bokmerke l Insert– Named Anchor Fase 2: Lage en lenke til bokmerket l Skriv teksten som skal ha en lenke til bokmerket l Merk denne teksten l Insert - Link l Finn bokmerket i lista

Andre elementer l Bilder og elementer bak interne lenker MÅ ligge på samme sted som selve nettsiden –P:/ - public_html

Lage intern lenke En slik lenke peker mot en annen side som ligger på webserveren: l Merk teksten som skal lenkes opp til siden l Insert – Link l Velg ”Choose File…” og finn filen som skal lenkes opp l OK

Sette inn bilde Du kan bruke bilder fra internett (som du har lov til å bruke) eller egne bilder som du har tatt med digitalkamera eller scannet inn – fremgangmåten er den samme: l Sørg for å vite hvor du har bildet før du starter l På Insert-menyen velger du Image l Finn bildet du vil bruke l Velg en ”Alternate text” (eller Don’t use alternate text) l Eventuelt kan du endre dimensjon NB! Husk at du lager en peker til bildet. Det er derfor viktig at bildet er plassert i riktig filhierarki. I vårt tilfelle vil det si at bildet skal ligge i P:/public_html-mappa

Sette inn animasjon l Her gjelder stort sett samme fremgangmåte som for bilder. l Animasjoner finner du på nettet – her er et par lenker: l Her er lenke til en side laget av en med tilknytning til HiO –

Sjekke nettsiden i en nettleser l Når du har laget siden, kan den leses i en nettleser. Dersom du skriver inn din URL (som vist under) vil du se siden din som du har kalt index.html: l Dersom du ønsker å søke opp et annet dokument fra public-mappa, må du spesifisere filnavnet, slik:

Husk! l Når du endrer siden din i NVU må du huske å lagre endringen. Hvis ikke så vil du ikke se endringen i nettleser. l Husk også å oppdatere siden i nettleser etter at du har vært inne i NVU og foretatt endring og lagret endring l Og det siste: Bruk kun lovlige filnavn på filer, bilder og animasjoner – og legg alt som skal knyttes til siden i public-mappen på P.

Å skrive for nettet l Man leser saktere på nett l Man skumleser i større grad l Man er som oftest på leting etter en bestemt informasjon l Man blir lettere utålmodig… (Kilde: Myklebust, Bunæs Eklund, Krabbe og Steensnæs (MyK design DA og Arkitekst DA) ”Hvordan kommunisere på en god måte på nettsidene?” Kurs for Osloskolene 2005 i regi av Utdanningsetaten.)

Litt om det å skrive på nett l Hva ønsker du å oppnå med nettstedet (nettsidene) - hvem er målgruppen? l Hvordan lage siden brukervennlig? l Hvordan bruke grafikk? l Hvilken språkform skal man benytte for å kunne formidle budskapet på en hensiktsmessig måte?

Bruk av hyperlenker l Strukturen bør være slik at det er lett for leseren å få oversikt over sidene l I en hierarkisk struktur vil hver node utgjøre en selvstendig enhet l Strukturen bør gi leseren frihet til å velge/velge bort innhold

Skrivestil l Bruk et aktivt konkret språk – unngå formell stil – dette kan skape avstand til leseren. l Lengden på setningene bør variere – de bør ikke overskride 15 ord. Korte tekster fungerer best. l Unngå fagguttrykk og forkortelser l Unngå fyllord

Brukervennlig grafikk og design l Det bør være kontrast mellom tekst og bakgrunn l Bruk skriftstørrelser og skrifttyper som egner seg for skjermlesning (Arial og Verdana) l Unngå understreket skrift, kursiv skrift og versaler l Del teksten opp i avsnitt og punktlister l Vær varsom med bruk av animasjoner, og grafikk som bakgrunn på sidene.

Mer om grafisk design l Grunndesign og valg av grafikk bør planlegges i en tidlig fase l Vurder om grafikken kan ha en fast plass l All grafikk bør ha samme størrelse

Fargevalg Fargekombinasjoner som er enkle å lese kan være: l Svart på gul l Svart på hvit l Hvit på blå l Gul på blå l Blå på hvit l Mørk grønn på hvit l Mørk rød på hvit l Mørk blå på gul

Tips fra bøker og nett Du kan kanskje finne mer stoff om nettsideproduksjon og skriving for nett blant disse litteraturreferansene og nettstedene: God nettskriving - Ove Dalen og Jon Mjølhus (2004) Cappelen 165 tips for effektive nettsteder – Gunnar Bråthen og Lise Renée Skarpås (2002) Momentum as Skriv for nettet – kort og godt - Christine Calvert (2004) Universitetsforlaget

Ekstra: Lage e-postlenke En slik lenke peker mot en bestemt e-postadresse l Merk teksten som skal lenkes opp til e- postadressen l Insert – Link l Kryss av for ”The above is an -address” l Skriv inn e-postadressen i feltet ”Link location” l OK

Lage ekstern lenke En slik lenke peker mot en URL som du definerer (eller kopierer fra nettleser) l Merk teksten som skal lenkes opp til URL-en l Insert – Link l Skriv inn URL-adressen i feltet ”Link location” l OK

Lage tabell Tabell kan du benytte for å organisere tekst og grafikk på sidene dine. Slik setter du inn en tabell: l Tabell – Insert – Table… Før markøren over cellene, eller velg ”Precisely”-fanen og skriv inn hvor mange rader og kolonner du ønsker l OK

Endre tabellen Skal du endre tabellen, kan du velge fra Table-menyen – eksempler: l Join Selected Cells – Slår sammen merkede celler l Table or Cell Background Color – Her kan du velge bakgrunnsfarger for tabell eller merkede celler l Table Properties – Her kan du blant annet fjerne rutenettet på tabellen ved å sette Border = 0