Nettsideproduksjon og bildebehandling

1. Nettsideproduksjon og bildebehandling IKT-seksjonen, høst 2007

2. Innhold • Kort om bildebehandling i GIMP • Nettsideproduksjon • Publisering

3. Bildebehandling • GIMP (GNU Image Manipulation Program) - Gratis bildehandlingsprogram som kan lastes ned fra nettet • http://gimp-win.sourceforge.net/stable.html • Velg ”The GIMP for Windows (version 2.2.17)”– download • Ligger som standard på PC’ene på HiO • Start – Programmer – GIMP • Eller som ikon på skrivebordet

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

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

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

7. Nettside • 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. • Du kan lage nettsider ved å programmere HTML-koder • Du kan også lage nettsider ved hjelp av en ”nettside-tekstbehandler” sånn som NVU. • En ”nettside-tekstbehandler” oversetter det vi skriver til HTML-koder

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

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

10. Endre siden • Bakgrunnsfarge • Format – Page colors and background • Horisontal strek • Insert – Horizontal line • Bilde som bakgrunn • Format – Page colors and background – Background Image • 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

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

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

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

14. 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: • Sørg for å vite hvor du har bildet før du starter • På Insert-menyen velger du Image • Finn bildet du vil bruke • Velg en ”Alternate text” (eller Don’t use alternate text) • 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

15. Sette inn animasjon • Her gjelder stort sett samme fremgangmåte som for bilder. • Animasjoner finner du på nettet – her er et par lenker: http://www.artie.com/ • Her er lenke til en side laget av en med tilknytning til HiO – http://home.hio.no/~helgerid/nettanimasjoner/Anim.htm

16. Sjekke nettsiden i en nettleser • 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: http://www.stud.hio.no/~brukernavn • Dersom du ønsker å søke opp et annet dokument fra public-mappa, må du spesifisere filnavnet, slik: http://www.stud.hio.no/~brukernavn/filnavn.html

17. Husk! • Når du endrer siden din i NVU må du huske å lagre endringen. Hvis ikke så vil du ikke se endringen i nettleser. • Husk også å oppdatere siden i nettleser etter at du har vært inne i NVU og foretatt endring og lagret endring • 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.

18. Å skrive for nettet • Man leser saktere på nett • Man skumleser i større grad • Man er som oftest på leting etter en bestemt informasjon • 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.)

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

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

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

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

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

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

25. 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 http://infodesign.no/artikler/skrive_for_nett_260402.htm http://www2.skolenettet.no/journalist/2.htm www.sprakrad.no www.clara.no http://design.emu.dk/artik/05/23-9gyldne.html

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

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

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

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