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

Presentasjon om: "Høgskolen i Oslo Nettsideproduksjon og bildebehandling IKT-seksjonen, høst 2007."— Utskrift av presentasjonen:

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

2 Innhold l Kort om bildebehandling i GIMP l Nettsideproduksjon l Publisering

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

4 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)

5 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

6 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: http://nvu.com/download.html (Dersom du har Windows, velger du nvu-1.0-win32- installer-full.exe)nvu-1.0-win32- installer-full.exe

7 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

8 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)

9 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.

10 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

11 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

12 Andre elementer l 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: 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

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: 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

15 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: http://www.artie.com/ l 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 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: http://www.stud.hio.no/~brukernavn l Dersom du ønsker å søke opp et annet dokument fra public-mappa, må du spesifisere filnavnet, slik: http://www.stud.hio.no/~brukernavnhttp://www.stud.hio.no/~brukernavn/filnavn.html

17 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.

18 Å 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.)

19 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?

20 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

21 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

22 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.

23 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

24 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

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 l Merk teksten som skal lenkes opp til e- postadressen l Insert – Link l Kryss av for ”The above is an e-mail-address” l Skriv inn e-postadressen i feltet ”Link location” l OK

27 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

28 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

29 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