Webpublisering - HiO - Kirsten Ribu Mer om stiler og stilark. Layout. Litt Design Webpublisering

Webpublisering - HiO - Kirsten Ribu I dag Struktur på hjemmesiden Mer om stiler Stiler og layout Litt om design og farger på sidene

Webpublisering - HiO - Kirsten Ribu Strukturering av websider Mapper Filer

Webpublisering - HiO - Kirsten Ribu Organisering av filene Lag mapper for ulike elementer: feks ’HTML’ – der legger du alle html – filene Legg bilder i en mappe (kall den for eksempel ’bilder’) Link til bildet blir således /bilder/bilde_av_meg.jpg sti: mappe/fil

Webpublisering - HiO - Kirsten Ribu Mappestruktur

Webpublisering - HiO - Kirsten Ribu Din hjemmeside Hovedsiden er index.html Lag en mappe for hvert fag: feks Programmering, Webpublisering, Matematikk. Inne i mappen Webpublisering ligger alle filene som hører til faget, gjerne organisert i mapper ’Bilder’, ’HTML’, ’Lenker’, ’Ukeoppgaver’.

Webpublisering - HiO - Kirsten Ribu Eksempel

Webpublisering - HiO - Kirsten Ribu Mer om selektorer

Webpublisering - HiO - Kirsten Ribu Stiltyper for skriftutseende Dette er de viktigste skrifttypene som går på utseende av skriften: body {font-family: "verdana", fantasy, serif; font-size: 12pt; font-style: normal; font-weight: normal} h1 {font-size: 150%; color: red; font-style: italic; font-weight: bold; text-decoration: underline}

Webpublisering - HiO - Kirsten Ribu Eksempel Selektoren body definerer standarden i dokumentet, og i dette tilfelle er det skrift- utseende, -størrelse, -stil og -tykkelse. Skriftutseende har 3 alternativer, og de er nevnt i prioritert rekkefølge: ”verdana", fantasy, serif; Selektoren h1 omdefinerer noen av disse stiltypene med andre stilverdier font-size: 200%; font-style: italic; font- weight: bold

Webpublisering - HiO - Kirsten Ribu Stiltyper for tekstorganisering De viktigste skrifttypene som går på tekstorganisering:  div {text-align: justify; line-height: 150%; text-indent: 10pt}  div h1 {text-align: center} Selektoren div definerer standarden for alle blokker ( ) til å ha tekstorganisering med jevn venstre- og høyre-marg, 1,5 linjeavstand og innrykk av 1. linje i avsnitt ( ) med 10pt. Selektoren div h1 omdefinerer tekstjusteringen til å være sentrert for overskrifter ( ) innenfor blokker ( ).

Webpublisering - HiO - Kirsten Ribu Selektorer som klasse eller ID Du kan gi HTML elementene et unikt navn, eller et klasse-navn. For å lage en klasse skriver du.klassenavn (punktum + klassenavn, uten mellomrom!) Eksempel:.nyheter

Webpublisering - HiO - Kirsten Ribu Velg elementer basert på klasser Eks:.nyheter{color:red;} virker på alle elementene i klassen nyheter h1.nyheter{color:red;} virker bare på h1 elementene i klassen nyheter I åpningstaggen skriver du class=”nyheter”, der navnet identifiserer klassen av elementer i klassen ’nyheter.’ Nyheter

Webpublisering - HiO - Kirsten Ribu Unike elementer: ID Defineres på samme måte som for klassen, men skrives #id – et unikt navn. I åpningstaggen skrives id=”navn”. Navnet er unikt. Feks: #farge

Webpublisering - HiO - Kirsten Ribu taggen En stildefinisjon er knyttet direkte til en (X)HTML-tag eller indirekte med et class- eller id-attributt. I noen situasjoner er det ønskelig å anvende stiler på tegnnivå (f.eks. enkeltord), og det er mulig ved hjelp av -taggen. Nedenfor er det definert en klasse "viktig" som f.eks. kan være rød farge og fet type:.viktig {color: red; font-weight: bold}

Webpublisering - HiO - Kirsten Ribu Forts. For å anvende dette på et viktig ord, er det bare å omslutte ordet med og. viktig.  PS. For dere som kan litt (X)HTML fra før, så er -taggen arvtageren til -taggen, som nå er borte i XHTML.

Webpublisering - HiO - Kirsten Ribu Stiltyper for farger og bakgrunn Dette er de viktigste skrifttypene som går på farger og bakgrunn body {color: #0000ff; background- color: #fffcbf; background-image: url(bakgrunn.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: 30px}

Webpublisering - HiO - Kirsten Ribu Forklaring De to første stiltypene definerer dokumentets tekstfarge og bakgrunnsfarge. De 4 siste stiltypene definerer et bakgrunnsbilde som skal repeteres vertikalt (i y-retningen), og som skal ligge 30 piksler fra venstre kant. Områder som ikke er dekket av bakgrunnsbildet får bakgrunnsfargen. Eksempel

Webpublisering - HiO - Kirsten Ribu Stiltyper for layout Layout omfatter marger, rammer, luft innenfor blokker, blokkstørrelser og "flytende objekter": div.bx {margin: 20px; width: 200px; border- width: thick; border-color: red; border- style: groove; padding: 10px; float: left} Selektoren div.bx inneholder stildefinisjoner for blokker av typen.

Webpublisering - HiO - Kirsten Ribu Forklaring En slik blokk skal ha en margavstand (avstand til andre objekter) på 20 piksler i alle retninger, og blokken skal være 200 piksler bred. Den skal ha tykk rød ramme i stilen "groove". Luften mellom rammen og innholdet (padding) skal være 10 piksler. Den skal legges til venstre slik at andre objekter (vanligvis tekst) kan "flyte" rundt blokken til høyre.

Webpublisering - HiO - Kirsten Ribu Design og brukergrensesnitt Kort innføring

Webpublisering - HiO - Kirsten Ribu Brukergrensesnitt Alle produkter har et brukergrensesnitt Eks:  Pantemanskinen i butikken: Lys lyd, bevelgelse  Bil: menneske/maskin grensesnittet  PC: Mer enn skjermbildet: mus, tastatur, og skjerm med diverse knapper for lys og lydkontroll

Webpublisering - HiO - Kirsten Ribu Brukerens rolle Utfordringer: å kjenne brukeren og dennes oppførsel I alle systemer er det brukeren som avgjør hvorvidt et system er en suksess eller ikke.

Webpublisering - HiO - Kirsten Ribu Menybasert GUI Brukeren utfører oppgaver ved å velge fra menyer Menyene består som oftest av tekst, men det er også mulig å ha grafikkmenyer eller en kombinasjon av tekst og grafikk. Ved design av tekstmenyer er det viktig at man bruker terminologi som er kjent for brukeren. Teksten til menyvalg bør være vært knyttet til den tjenesten som tilbys. Det er også viktig at terminologi blir benyttet på en konsistentmåte gjennom alle menyene til et system.

Webpublisering - HiO - Kirsten Ribu Drop-down menyer

Webpublisering - HiO - Kirsten Ribu Vanlige feil Dårlig navigering  Hvor er jeg? Hvordan kommer jeg tilbake? Tekst er tekst og linker er linker.  Tekst er ikke understreket, linkene er det Glemmer å teste i ulike browsere For mange detaljer på sidene Ulike fonter. Bruk stilark! Bilder som tekst er OK, men ikke bruk ulike fonter. Bilder som ser ut som linker, men ikke er det.

Webpublisering - HiO - Kirsten Ribu Hvordan navigere? Bruk enkle menyer som er konstant synlig og tilgjengelig i skjermbildet. Menyvalg blir markert etter hvert som brukeren forflytter seg mellom dem. Til dette formål kan det benyttes farger /understreking

Webpublisering - HiO - Kirsten Ribu Eksempel: HiO

Webpublisering - HiO - Kirsten Ribu Skrekkeksempler

Webpublisering - HiO - Kirsten Ribu Storyboards Brukes til å planlegge navigering mellom sidene  Storyboards brukes av design-team for å kommunisere ideer om struktur og navigering  Brukes ikke til å kommunisere med kunder

Webpublisering - HiO - Kirsten Ribu Eksempel Storyboardsrepresenterer handlingssekvenser som brukeren gjør for å utføre en handling. Dette storyboardet viser hvordan en bruker anvender en brukerveiledning for å finne informasjon om et gitt emne.

Webpublisering - HiO - Kirsten Ribu Sitemap Site-mapsviser systemets struktur (navigering). Brukes av designteamet for å strukturere systemet og skjermbildene.

Webpublisering - HiO - Kirsten Ribu Tommelfingerregler om fargebruk Vær konsistent i bruk av farger. Samme farge på de ulike skjermbildene = gjenkjennelse Sørg for at det er kontrast mellom tekst og bakgrunnen Unngå å kombinere farget tekst med sterkt farget bakgrunn Bruk sterke farger med stor forsiktighet “Get it right in Black and White” (8% av alle menn er fargeblinde)

Webpublisering - HiO - Kirsten Ribu Forts. Begrens bruken av animasjon Forsiktig med lyd Video krever ressurser Organiser feltene ryddig Ikke lag overfylte skjermbilder

Webpublisering - HiO - Kirsten Ribu Tekst/bakgrunnsfarger

Webpublisering - HiO - Kirsten Ribu Kontraster: Mørk på lys og lys på mørk

Webpublisering - HiO - Kirsten Ribu Om farger generelt Antall farger i et skjermbilde bør begrenses til 4 pr. skjermbilde 7 for et system som et hele. Farger kan utnyttes i informasjon:  F.eks. farge på overtrukne konti Farger kan hjelpe til med å gruppere objekter som hører sammen

Webpublisering - HiO - Kirsten Ribu Oppgaver Uke 38 Du skal anvende klasser med stildefinisjoner:  Lag en ny side der du bruker div (blokker).  Lek deg med farger og bakgrunner på siden.  Definer stiler innenfor ulike blokker ved hjelp av klasser.  Bruk også det du har lært til nå: definer stiler for lister og linker. Tekst:  Forklar hva et stilark er, og hvorfor det brukes.  Finn eksempler på gode websider du liker, og forklar hvorfor de er gode.  Skriv litt om deg selv, hva slags bakgrunn du har og hvorfor du har valgt datafag på Høgskolen i Oslo

Webpublisering - HiO - Kirsten Ribu Neste gang Tjenester i Internett. Protokoller:  HTTP  FTP  SMTP