Rapport fra Stine, Kristin og Jeannette

Risskov Fysioterapi

Multimedie og interaktionsdesign 2011

Aarhus Tech v. Per Rasmussen

Jeannette Callisen

Kristin Lange Stine Thit Jensen

Kontaktperson: Stine ([email protected])

http://multimediekursus.ats.dk/0511/jeannette/wp_risskov_fysioterapi/wp/

http://multimediekursus.ats.dk/0511/jeannette/wp_risskov_fysioterapi/wp/

1

Indholdsfortegnelse

INDHOLDSFORTEGNELSE 1

OPGAVEFORMULERING 3

FORANALYSE 3

RISSKOV FYSIOTERAPI 3 DEN NUVÆRENDE HJEMMESIDE 3 RISSKOV FYSIOTERAPIS ØNSKER TIL NYT WEBSITE 4 KUNDEMØDE D. 9. MARTS 4 SAMLET PROFIL 5 INTERESSENTANALYSE 5

UNDERSØGELSE 6

PROJEKTBESKRIVELSE 6 TEAMETABLERING 6 SAMARBEJDSAFTALE 6 IDEUDVIKLING 6 INFORMATIONSINDSAMLING, RESEARCH OG INSPIRATION 7 FYSIOTERAPI GENERELT 7 Charlottehøj 8 Hornslet Fys 8 KONCEPTBESKRIVELSE 9 KOMMUNIKATIONSPLANLÆGNING 9

DESIGN 10

INFORMATIONSDESIGN 10 INTERAKTIONSDESIGN 10

REALISERING 11

KUNDEMØDE 2 11 WORDPRESS (WP) 11 DESIGNPARAMETRE 12 KOMPOSITION 13 AIDA 13

2

VALG AF SKRIFTER 14 FARVEVALG 14 SKITSE TIL HJEMMESIDEN 15 ENDELIGT SITE PRÆSENTATION 15 VURDERING AF SAMARBEJDE 16 PROCESDOKUMENTATION 16

BILAGSOVERSIGT 17

BILAG 1 GRUPPENS REFLEKSIONER 18 BILAG 2 PROJEKTPLAN 1 19 BILAG 3 IDEUDVIKLING 20 BILAG 4 SCREEN-DUMP AF KONKURRENTHJEMMESIDER 25 BILAG 5 FLOWCHART 26 BILAG 6 STORYBOARD 27 BILAG 7 WP TEMA 32 BILAG 8 ENDELIGT WEBSITE – FORSIDE 33 BILAG 9 PROJEKTPLAN2 34 BILAG 10 KODEUDSKRIFT AF WEBSITE 344

3

Opgaveformulering

Projektet tager udgangspunkt i en opgave stillet af Risskov Fysioterapi, der ønsker at få re-designet deres hjemmeside.

Foranalyse

Risskov Fysioterapi

Risskov Fysioterapi er en klinik i det nordlige Århus med 7 fysioterapeuter, en sekretær og løst ansatte medhjælpere. Det er en mindre klinik der fokuserer på at tilbyde fysiologisk behandling og træning med fokus på en høj faglighed, en afslappet atmosfære og en god relation til deres patienter.

Den nuværende hjemmeside

På den nuværende side sidder menuen højt oppe, mange billeder er generiske og siger ikke direkte noget om de behandlinger der udbydes. Der er adgang til administration direkte fra siden. Designet er enkelt, med få farver: blå, hvid, sort skrift, kun lidt tekst, 6 menupunkter (velkommen, klinikken, træning, priser, hvem er vi, find os, kontakt). Som siden er nu, kan det være forvirrende med tre punkter der knytter sig til det samme.

Billedgalleriet er af ældre dato, og igen er der direkte adgang for administration, og det er ikke nødvendigt for brugeren at se.

Billederne af medarbejderne har ikke samme baggrund, der er ikke noget fælles billede, der står navn under billederne, men ikke andet, så man ved ikke hvem der er sekretær

4

eller hvem der er fysioterapeut. Menuen og det store billede er statisk og går igen på alle sider.

Samlet set kan man sige, at hjemmesiden er meget faktuel og løsningsorienteret, og klinikken er et sted hvor man kommer for at få en kompetent behandling og resultater.

Risskov Fysioterapis ønsker til nyt website

Et tidssvarende site med opdaterede billeder i en god kvalitet

Overskuelig og let at navigere på – så folk får lyst til at ringe

Et minimum af vedligehold, evt. kun prisopdateringer

Medtage at de har overenskomst med sygeforsikringen og er medlem af danske fysioterapeuter

Et nyt fællesbillede på forsiden samt enkeltbilleder med navn og funktion

Eget logo på siden

Mulighed for at oplyse om nye tiltag/hold og kontakt formular

Kundemøde d. 9. marts

Ved kundemødet blev billedet af klinikken og deres ønsker uddybet igennem dialog, og følgende tilføjelser til ønsker kom frem i løbet af samtalen:

Galleriet skal væk, men der må gerne udarbejdes et nyt

3 ord om os: God afslappet atmosfære, kompetence, lokalerne kunne optimeres. Klinikken er startet af Birgitte Esmark, der nu har trukket sig næsten ud, selvom hun fortsat ejer den. Klinikken er ca. 15 år gammel, og træningscentret er ca. 10 år gammel.

Respons på nuværende side fra kunder: rodet, kunder kan ikke finde de informationer de søger. Derfor vil de gerne have en side der er overskuelig, introducerende, generel og ikke for niche-agtig i sine beskrivelser af tilbuddene.

Hjemmesidens primære funktion er at nå nye kunder og bibeholde nuværende loyale kunder. De tilbyder rygskole, og har haft fællesannonce sammen med Charlottehøj Fysioterapi, der har brugt annonceteksten på deres hjemmeside. Den tekst kan bruges på den nye hjemmeside. De fokuserer på: behandling og genoptræning af alle lidelser i bevæge-apparatet. I forhold til kiropraktorerne, der arbejder med knogler og led, arbejder fysioterapeuterne med kroppens bløddele og led.

Der må gerne ændres i tekst, skrifttype, logo og farver.

5

Signalet for klinikken skal være: dygtighed, et rart sted og genkendelighed, tillid og kemi. De samarbejder ikke med kostvejleder, eller lægehus på nuværende tidspunkt.

Menuen må gerne stå lodret, ingen scroll på siden.

Nogle patienter følger deres specifikke behandler fra andre steder, ellers er det primært patienter fra lokalområdet.

Der gives hjemmebehandling, også på lokalcentre.

Samlet Profil

7 fysioterapeuter der kan lidt af hvert og sætter fagligheden højt. De har eget træningscenter, men tilbyder også hjemmebesøg og har hold til specifikke problemer,

Målgruppen for klinikken er alle aldersgrupper.

Centralt for klinikken står ønsket om en profil der fokuserer på den kompetente behandling, tillid til behandlerne og den gode kemi mellem behandlere og patienter. Det er ikke en spa-behandling, og der fokuseres på, at patienterne oplever en afhjælpning af de problemer de henvender sig med.

Klinikken har et rigtig godt udgangspunkt for at hverve nye kunder, nemlig et godt ry. Hjemmesiden skal derfor understøtte dette og være en tilføjelse til mund-til-mund hvervning af nye kunder.

Bilag 1 viser gruppens refleksioner over muligheder for udvikling.

Interessentanalyse

Målgruppen defineres primært gennem behov og geografi. De der vil have interesse i hjemmesiden er derfor allerede motiverede, og skal i mindre grad overtales til at gå til behandling, men i højere grad til at vælge netop dette sted.

For de ansatte skal siden være et online visitkort de kan henvise til i deres arbejde, samt være en side de selv vil kunne administrere og opdatere efter behov.

Andre fysioterapeut-klinikker vil til dels også være konkurrenter, men grundet det geografiske parameter, er det øvrige klinikker i samme område der primært er konkurrenter. Dog skal det nævnes, at mange patienter er meget loyale og gerne følger deres behandler ved klinikskifte, så konkurrencen er meget styret af kvalitet og udbud i området.

6

Undersøgelse

Projektbeskrivelse

Opgaven for projektet lyder derfor på

Et opdateret site

Enkelt og let at vedligeholde

Et site, der signalerer høj faglighed, tillid og god stemning

Ingen scroll

Nye billeder

Teametablering

Gruppens kompetencer er: cand.mag. i spansk og engelsk, folkeskolelærer med historie og matematik, cand.mag. i oplevelsesøkonomi. En bred kompetenceflade med interesser indenfor it, oplevelsesdesign og web.

Fra starten udarbejdede vi en projektplan både over opgavens indhold og tidsestimering, samt fordeling mellem gruppearbejde og selvstændigt arbejde (se Bilag 2).

Vi arbejder ud fra en tanke omkring, at processen er iterativ, og derfor betragter vi vores plan som ”working proces”, der konstant udvikler sig eksplorativt, og ændrer sig i takt med projektets udvikling.

Samarbejdsaftale

Vi aftaler fra start i gruppen, at arbejdet skal veksle mellem fælles og individuelt arbejde, samt fleksibel mødetid og arbejdstid. Vi veksler imellem at sætte vores kompetencer i spil til at løse enkelte opgaver hjemme, men mødes og tager fælles beslutninger om proces og indhold. Men vi finder, at det giver en god proces at veksle imellem fælles og individuelt til processen, så vi ikke låser os for hurtigt fast.

Ideudvikling

For at få tankerne i gang i gruppen, og få tunet os ind på opgaven, startede vi med en indledende brainstorm baseret på kundemøde og egne tanker omkring fysioterapi, farvekoncept, kundens nuværende side og ønsker om udvikling. Se

Bilag 3 Tegneskitser

7

Informationsindsamling, research og inspiration

Fysioterapi generelt

Bilag 4 viser en samling screen-dumps af en række fysioterapi klinikker og herunder er en oversigt over de tendenser man kan udlede af sammenligningen

Farveholdning Information Kommunikation Interaktion Præsentation

Praktisk om klinikken, behandlinger, priser, kontakt og adresse

Formål er at informere om ydelser, så effekten bliver at tiltrække kunder.

En mindre grad af interaktion, højst log in til tidsbestilling, forespørgsler, henvisninger og links.

En kombination af tekst og billeder der viser personale, klinikker og behandlingsfor-mer

Afsender er klinikkerne, målgruppen er alle med smerter i bevæge-apparatet

Lav grad af brugerinvolvering, primært en-vejs orienteret.

Minimum af lyd og animationer, højst slideshow af billeder

Budskabet er tilbud om behandling og løsning på patienters fysiologiske problemer

Enkle typografier, rene linier, vertikal/

horizontal menuer

Klinikken udtrykker til kundemødet at der er to hjemmesider de ønsker dels at lade sig inspirere af, og distancere sig fra i design.

8

Charlottehøj

Hornslet Fys

”Tøsefarver”! Den lyserøde firkant tjener ikke noget formål, farvemæssigt rod, der er en barre med fire farver, der ikke tjener noget formål, undermenuerne er farvekodede, men matcher ikke med de andre farver, der er dobbelt scroll på siden, da selve siden, og menuen indeni skal scrolles, logoet står nederst i højre hjørne, og er ikke farvemæssigt knyttet til noget af det andet. Billederne er dog gode, både de mere generiske og de af personer.

Overordnet er siden IKKE god, der er for meget scroll i undermenuerne, siden udnytter ikke skærmen godt, da den er venstreplaceret, og det er ikke godt med dobbeltscroll nogle steder.

Blåt tema, mere lyst, små generiske billeder, lang personbeskrivelser, også seks menupunkter, i samme stil, dog mere service orienteret med punktet ”vi udfører”, men måske en anelse mekanisk, man udfører jo ikke arbejdet på en person, man udfører ikke en behandling, men man giver en behandling. Et lidt gammeldags stemningsbillede fra klinikken. Linket til krak går til en generel søgeside. Sjovt at de har et punkt der hedder ”find os”, når deres adresse og telefonnummer står på alle siderne. Det er unødvendigt at have en søgefunktion på så lille et site, når man har konstant adgang til menupunkterne.

Det er et godt site, overskuelig, præcis, men der er for lange personlige referencer.

9

Konceptbeskrivelse

Titel Idé Brug Indhold Udformning Behov Fokusområde

”What you see is what you get”

Enkelt, seriøst, kompetent

Online visitkort til nuværende/nye kunder, synlighed på nettet så konkurrenten ikke vælges

Præcis information understøttet af billeder fra klinikken, ikke en salgstale med for meget ”fyld”

Et hierakisk site med simpel navigation for både kunder og ansatte, kun de nødvendige sider

Synlighed på nettet

At tage udgangspunkt i det eksisterende og kundens ønsker for ny side

Kommunikationsplanlægning

Formål Effekt Afsender Målgruppe Brugerprofil

Budskab Medie

Fortælle historien om en kompetent klinik med hjertevarme og afslappet atmosfære

Bibeholde nuværen-de patienter og tiltrække nye

Klinikken og dens medar-bejdere

Folk i lokalområdet og de der følger bestemt behandler, alle aldre, køn

N/A ”Vi trykker hvor det gør ondt” - at kunne tilbyde en kompetent løsning på de problemer patienterne kommer med

Fokus på relation mellem patient og behandler

”Hvem, hvad, hvor”

Website – online visitkort

10

Design

Informationsdesign

Vi fokuserer meget på deres ønske om det enkle, så informationen er opdelt i følgende punkter

Velkommen

Klinikkens medarbejdere og fysiske forhold

Hvad der tilbydes af behandlinger og træning

Kontakt

Priser

Det er en minimering fra de nuværende seks menupunkter, hvor vi i forundersøgelsen fandt, at flere af de eksisterende menupunkter overlappede.

Derudover har vi ikke tilføjet yderligere, da de netop ønsker at siden er enkel og ikke skal opdateres for ofte. Havde vi tilføjet en nyhedsside eller artikelbase for eksempel, havde det krævet at de selv skulle vedligeholde det ofte, ellers vil det virke mindre troværdigt.

Vi har organiseret informationen ud fra patientens synspunkt: de har et problem de ønsker løst, derfor er det vigtigt at de hurtigt kommer frem til siden med behandlinger/træning så de kan se, om klinikken kan opfylde deres behov. Derefter kan de blive introduceret til stedet og dets behandlere, priser og kontakt information. Alle punkter er dog synlige fra alle sider i den venstre menu-bar. Det er en fordel, hvis en mulig kunder ”lander” på sitet på en af undersiderne, så kan der hurtigt dannes et overblik alligevel.

Det er derfor bygget op efter en patients behovs-flow.

Interaktionsdesign

Frekvens Graden Betydning Følelse

Der er 5 (11) muligheder for patienten at klikke sig rundt på sitet

En lav grad, patienten kan kun klikke sig frem og tilbage

Lav grad af interaktionsfrihed, da patienten ikke kan påvirke noget på sitet

Taget sidens formål i betragtning (information til patienter) påvirkes følelsen af lav interaktion ikke nævneværdigt

11

Navigationen er hierarkisk opbygget med en forside (velkommen) som hovedmenu, men den venstre menubar er synlig på alle sider, så der kan navigeres let rundt. Det er kun under Klinikken og Hvad vi tilbyder, at der kommer undermenuer.

Flowchart og valgte designparametre kan ses i Bilag 5.

Vores site præsenteres i Bilag 6 Storyboard som storyboard over alle siderne.

Realisering

Kundemøde 2

Ved andet kundemøde var kunden meget positiv og havde ikke nogle større overvejelser, men vi selv stødte ind i nogle problemstillinger i forhold til hvordan det var muligt for os at løse opgaven (designet) i WordPress. Derfor undergik siden herefter nogle design-mæssige forandringer, der dog ikke ændrede på den overordnede strategi. Blandt andet har vi arbejdet meget på at få runde menuknapper så de passer sammen med logo og ideen om de runde former. Farverne har vi justeret, da vi efter 2. kundemøde fandt frem til, at det vil blive for forvirrende med en menubar i for mange farver. Vores farvetema holder sig derfor til logoet.

WordPress (WP)

Vi startede med at udvikle eget tema baseret på vores øvelser. Det virkede fuldt ud, men vi gik bort fra det igen, da vi frygtede at senere php-komplikationer ville gøre det problematisk for os.

Vi har valgt at arbejde ud fra et tema i WP, der i høj grad imødekom de ideer vi havde for sidens opsætning. Temaet hedder ”Harvest” og er valgt på grund af ønsket om en venstre menubar i et simpelt design vi kunne redigere i selv, samt havde valgfrie widgets. Det har dog været en udfordring at få overført designstrategi til WP, da nogle ændringer ikke lod sig integrere så let. Se Bilag 7 WP tema for oprindeligt WP tema. Samtidig opdagede vi, at meget af det er grafik i det oprindelige tema, hvor vi i stedet har valgt at finde koder til mange af de grafiske løsninger.

Nogle af vore løsninger på sitet, fungerer desværre kun i nyopdaterede browsere på grund af css3 sprog. Man skal derfor opleve den i minimum IE9 for at kunne se det i netop den browser. Derfor ser storyboardet også ud som det gør. Men Firefox, Safari, Chrome og Opera viser den ”pænest”. Vi har brugt Adobe Photoshop til at finde farvekoderne fra logoet.

Den blå og den grønne farve signalerer ro, renhed og seriøsitet. Dog kan man diskutere, om de tonemæssigt skal arbejdes med, for at få et mere nutidigt look og design, uden at

12

det visuelt rykker sig for langt fra det originale, så både kunder og ansatte stadig kan identificere sig med.

Designparametre

Design-parametre

Funktion Æstetik Teknik/Økonomi

Form Sidens format er valgt ud fra kundens ønske om ingen scroll, og er lavet så den ser ens ud i alle browsere

Det gør det overskueligt både for kunde og kundes kunder og følger ønsket om en overskuelig side

Den lave grad af behov for opdatering og redigering holder udgifterne nede

Typografi Overskiften fungerer som header på alle sider og bliver sammenhængende med logo på alle sider. Brødtekstens størrelse er tilpasset de øvrige elementer og er informativ uden at være for tung. Skrifttypen er valgt så siden holder sit enkle, ”rene” look

Vi har valgt at fonten skal være enkel og ikke tage fokus fra indhold

Den er lidt bred, og meget åben, hvilket gør den læsevenlig for de fleste.

Illustration Skitse og billeder er med til visuelt at beskrive arbejdsfeltet for klinikken og give kommende patienter et kendskab til stedet inden de kommer

Skitsen er lavet med en løs streg, en enkel skitse der ligger som vandmærke på alle siderne. Billederne viser mere faktuelt hvordan klinikken ser ud

Billederne kommer fra klinikken selv og tegningen er tegnet af gruppen

Farve Hvidtonet baggrund og en farveskala der tager udgangs-punkt i klinikkens egne farver så der er sammenhæng imellem hjemmeside og klinik

Det er farver der traditionelt knyttes til faget, samt signalerer ro og renhed, samt seriøsitet

Farverne findes alle i WP designet og har derfor ikke nogen økonomisk faktor for projektet

Lyd Pga. klinikkens ønske om en side med meget lav grad af vedligeholdelse og meget enkel, er der ikke integreret lyd

13

Animation Pga. klinikkens ønske om en side med meget lav grad af vedligeholdelse er der ikke integreret animationer

Komposition

Læse retning på nyt site følger model a, da den består af både billeder, illustration og tekst, logoer og menubar.

AIDA

Awareness/attention Interest Desire Action

Logoet og billeder Præsentation af de patientbehov de

Løsning af patients behov

Nem adgang til kontaktoplysninger

14

kan dække samt imødekommenhed i billeder og tekst på siden

Valg af skrifter

Verdana

Risskov Risskov

Arial

Risskov Risskov

Farvevalg

#30256d # 2e765d

Samtidig har de allerede nogle ”corporate colors” der går igen både i deres arbejdstøj og deres arbejdsredskaber.

15

Vi har dog kun delvist brugt disse farver, da det skabte uro på siden med for mange farver i menubaren. Vi har valgt at fællesbilledet skal på forsiden for at tilføre en mere personlig dimension.

I den verden de arbejder i, er der ikke ret mange skarpe former, og det er iøjefaldende, at alle siderne er meget firkantede i deres design, når de arbejder med kroppen, og kroppen kun består af runde og bløde former. Samtidig er deres logo rundt, så der er lidt diskrepans imellem logo, arbejdet og det visuelle udtryk på hjemmesiden som den er nu. De runde former, bløde kanter og rolige farver der afspejler seriøsitet, vil fungere bedre og skabe en større overensstemmelse imellem det visuelle udtryk og virksomhedens egentlige arbejde.

Skitse til hjemmesiden

Endeligt site præsentation

I Bilag 8 Endeligt website kan man se et screen-dump af forsiden i endelig version.

16

Vurdering af samarbejde

Samarbejdet har fungeret godt. Vi har været gode til at uddelegere opgaver og sørge for at have en god løbende dialog. Selvom vi har haft meget forskellige tilgange, har vi formået at bruge vores kompetencer og været meget lyttende overfor hinandens synspunkter.

Vi har haft en meget åben tilgang til projektets udvikling og hele tiden sammenholdt med kundens ønsker og krav til siden. Vi har dog undervejs måtte justere i forhold til kunnen og hvordan det kom til at se ud.

Procesdokumentation

Projektplanen viser hvordan vores proces endte med at være i det virkelige liv. Se Bilag 9 Projektplan2

17

Bilagsoversigt

1 Bubbl figurer over indledende refleksioner

2 Projektplan 1

3 Tegneskitser

4 Fys generelt screen-dump

5 Flowchart

6 Storyboard

7 WP Temavalgt

8 Endeligt website

9 Projektplan 2

10 Kodeudskrift

18

Bilag 1 Indledende refleksioner

19

Bilag 2 Projektplan 1

20

Bilag 3 Tegneskitser

21

22

23

24

25

Bilag 4 Andre fysio-sites

26

Bilag 5 Flowchart og valgte designparametre

Form og illustrationer:

Stines sketch af pige med hår, set fra ryggen som baggrundsbillede – anbringes til højre på siden –

hånden hviler på fys-logo - tones ned.

Fotos komprimeres og gøres klar til indsættelse på websiden

Menu-punkter i farvede ovaler: lilla, blå, turkis og grøn

Logo øverst i venstre hjørne

Fysioterapeutforeningens logo i nederst højre hjørne (over footer)

Tekst:

Header: Verdana 36 pt - fed

Overskrift side: Verdana 18 pt - fed

Footer: Verdana 11 pt – fed

Menu: Verdana 12 – 12 pt – fed

Brødtekst: Arial 10 pt

27

Bilag 6 Storyboard

28

29

30

31

32

Bilag 7 WP tema

33

Bilag 8 Endeligt website

34

Bilag 9 Projektplan2

35

Bilag 10 Kodeudskrift

Koderne til hjemmesiden:

Style.css

/*

Theme Name: Harvest

Description: Wordpress Theme for Fall

Version: 2.0

Author: Karen Blundell

Author URI: http://karenblundell.com

Tags: harvest, fall, orange, two columns, fixed width, widget ready,left sidebar

Changes: fixed sidebar to remove theme-switcher is now located in sidebar.php

and fixed images in post

*/

* {margin: 0; padding: 0;}

body { background-color: #2e765d; font-family: Verdana,Arial,sans-serif; font-size: 90%; color: #2e765d; margin: 0; padding: 0 }

#wrap { width: 90%; margin: 20px auto; padding: 0; background:#fff url(images/hent.evt.et.billede.ind.her) repeat-y; color: #2e765d; }

#head { height: 120px; margin: 0; padding: 20px; background: transparent url(images/logokunst_1.png) no-repeat; margin-left: 20px; color: #2e765d; }

#title { padding: 10px 0 0 10px; margin: 0 10px; font-size: 3.0em; font-weight: bold; text-align: center; color: #2e765d; background-color: transparent; }

#title a:link, #title a:visited { color: #30256d; text-decoration: none; background-color: transparent }

36

#title a:hover { color: #2e765d; background-color: transparent }

#desc { padding: 0px 20px 0px 10px; margin: 0 10px; text-align: left; }

#left { float: left; width: 15%; margin: 0 10px; padding: 0 20px 0 0; color: #5D2816; }

#left h2 { margin: 0 0 2px ; padding: 10px; font-size: 0.01em; background-color: transparent; color: #fff }

#left a:link, #left a:visited { margin-top: 10px; color: #2e765d; background-color: transparent; font-size: 1.2em; text-decoration: none; }

#left a:hover { color: #fff; background-color: transparent; }

#left ul { margin: 0px; padding: 0; }

#left ul li { list-style-type: none; margin: 0px; padding: 0px 0px 30px 0px; }

#left ul ul li { list-style-type: none; color: #5D2816; margin: 0px 5px 0px 10px; padding: 0px 5px 5px 5px; background-color: #30256d; border: 10px solid #fff; -moz-border-radius: 15px; border-radius: 15px; color: #fff }

#left ul.children { margin: 0px; padding: 5px 5px 0px 0px; }

#left ul.children li { margin: 0px; padding: 0px 5px 5px 12px; font-size: 0.8em; border: none; }

#content { float: right; width: 75%; height: 450px; font: arial; font-size: 10px; font-weight: bold; color: #111; background: transparent url(images/img/stinesbilledemedlogo.png) no-repeat top right; margin: 0; padding: 0px 20px 0px 0px; }

#content post { margin: 0px; padding: 0px 0px 30px 0px; line-height: 20px; }

#content post p { padding: 0 0 15px 0 }

#content post blockquote { padding-top: 0px; padding-bottom: 0px; }

#content post blockquote p { margin: 5px 0 0 0; padding: 10px 5px 10px 5px; border-left: 2px solid #8B7448; border-right: 2px solid #8B7448; }

#content ul { margin: 0px; padding: 0 5px 0 40px; }

#content li { list-style-type: disc; color: #5D2816; margin: 0px 5px 0px 5px; padding: 0px 5px 5px 0px; }

37

#content ol { margin: 0px; padding: 0 5px 0 40px; }

#content ol li { list-style-type: none; color: #5D2816; margin: 0px 5px 0px 5px; padding: 0px 5px 5px 0px; }

#content img { border:1px solid #fff; display: inline; margin:5px 5px 7px -5px; padding:4px; vertical-align: middle; }

#foot { clear: both; height: 40px; color:#30256d; }

#foot p { padding: 10px; text-align: center; font-family; font-size: 0.75em; font-weight: bold }

#commentlist { margin: 0px; padding: 0px; }

#commentlist li { list-style-type: none; margin: 10px 0px 10px 0px; padding: 5px 15px 0px 15px; border: 1px solid #8B7448; background-color: #BDC69E; color: #5D2816; }

#commentlist p { margin: 0px; padding: 10px 5px; }

#commentlist .commentmeta { font-weight: bold; margin-bottom: 5px; font-size: 0.75em; }

#commentlist .alt { background-color: #F6B384; border-color: #8B7448; color: #5D2816; }

#commentlist blockquote { background-color: #BDC69E; border: 1px solid #8B7448; color: #5D2816; }

#commentlist .alt blockquote { border-color: #8B7448; }

#commentform p { margin: 10px 0px 0px 0px; padding: 0px; }

#commentform textarea { width: 350px; }

.meta { margin: -2px 0px 0px 0px; padding: 0; font-size: 0.75em; font-weight: bold; }

.postmetadata { font-size: 0.75em; font-weight: bold; text-align: center; }

a:link, a:visited { color: #30256d; background-color: transparent }

a:hover { color: #2e765d; }

38

blockquote { background-color: transparent; color: #000; margin-left: 10px; margin-right: 15px; padding: 10px 20px 10px 30px; }

h1 { margin: 0; padding: 2px 0 2px 0; background-color: transparent; color:#30261B; font-size: 1.5em; }

h1 a { text-decoration: none; }

h1 a:link, h1 a:visited { color: #30261B; background-color: transparent;}

h1 a:hover { color: #111; background-color: transparent; }

h2 { background-color: transparent; color:#30261B; font-size: 1.3em; }



form { margin: 0px; padding: 0px; }

form input, form textarea, form submit { border: 1px solid #30261B; background-color:#BDC69E; }

img.centered {display:block; margin: 0 auto 5px auto; border:1px solid #8B7448; padding:2px; }

img.alignright { display: inline; border:1px solid #8B7448; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }

img.alignleft { display: inline; border:1px solid #8B7448; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }

img.border { border:1px solid #8B7448; padding:2px; }

.alignleft { float:left; text-align:left; }

39

.alignright { float:right; text-align:right; }

.aligncenter {

display: block;

margin-left: auto;

margin-right: auto;

}

acronym { cursor: help; border-bottom: 1px dotted #96A66D }

Header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 



<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>

</head>

<body>

<div id="wrap">

<div id="head">

<div id="title"><a href="<?php bloginfo('home'); ?>"><?php bloginfo('title'); ?></a></div>

<div id="desc"><?php bloginfo('description'); ?></div>

</div>

Index.php

<?php get_header(); ?>

41

<div id="content">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>

<p class="meta">Posted by <?php the_author() ?> - <?php the_time('F jS, Y') ?></p>

<div class="entry">

<?php the_content('Read More »'); ?>

</div>

<p class="postmetadata">Posted in <?php the_category(', ') ?> - <?php edit_post_link('Edit','',' - '); ?><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

<p><?php the_tags(); ?></p>

</div>

<?php endwhile; ?>

<p align="center"><?php next_posts_link('« Previous Entries') ?> <?php previous_posts_link('Next Entries »') ?></p>

42

<?php else : ?>

<h2 align="center">Not Found</h2>

<p align="center">Sorry, but you are looking for something that isn't here.</p>

<?php endif; ?>

</div>

<?php

get_sidebar();

get_footer();

?>

Sidebar.php

<div id="left">

<ul>

<?php if ( !function_exists('dynamic_sidebar')

|| !dynamic_sidebar() ) : ?>



<li id="search"><h2><?php _e('Search:'); ?></h2>

<ul>

<li>

<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">

43

<div>

<input type="text" name="s" id="s" size="15" />

<input type="submit" value="Go" />

</div>

</form>

</li>

</ul>

</li>





<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>





<li id="categories"><h2><?php _e(' Blog Categories:'); ?></h2>

<ul>

<?php wp_list_cats(); ?>

</ul>

</li>



44

<?php if (function_exists('get_recent_comments')) { ?>



<li><h2>Recent Comments</h2>

<ul>

<?php get_recent_comments(); ?>

</ul>

</li>



<?php } ?>



<li id="archives"><h2><?php _e('Blog Archives:'); ?></h2>

<ul>

<?php wp_get_archives('type=monthly'); ?>

</ul>

</li>





<li id="meta"><h2><?php _e('Meta:'); ?></h2>

<ul>

<?php wp_register(); ?>

<li><?php wp_loginout(); ?></li>

45

<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">Entries RSS</abbr>'); ?></a></li>

<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>

<?php wp_meta(); /* do not remove this line */ ?>

</ul>

</li>



<?php get_links_list(); ?>



<?php endif; ?>

</ul>

</div>

Page.php

<?php get_header(); ?>

<div id="content">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

46

<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>

<div class="entry">

<?php the_content('Read More »'); ?>

</div>

<p class="postmetadata"><?php edit_post_link('Edit','',''); ?></p>

<p><?php the_tags(); ?></p>

</div>

<?php endwhile; else : endif; ?>

<a href="<?php bloginfo ('home') ?>" class="alignleft">Til forsiden</a>

</div>

<?php

get_sidebar();

get_footer();

?>

Footer.php

<div id="foot"><p>Vestre Strandallé 168, st. • 8240 Risskov • Tlf. 8617 3422 • Fax 8617 6922 • Mail: [email protected]</p></div>

</div>

47

<?php do_action('wp_footer'); ?>

</body>

</html>

Documents

Rapport fra Stine, Kristin og Jeannette