Style and Experience (.pdf)

zope.ots.dk

Style and Experience (.pdf)

Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

1. Indledning.................................................................................................................................2

2. Research og analyse af den givne stil....................................................................................3

2.1 Swiss style karakteristika,.....................................................................................................3

2.2 Om Swiss Style .....................................................................................................................3

3. Udforskende research og analyse..........................................................................................5

3.1 Idékatalog...........................................................................................................................5

3.2 Swiss Style Web-site............................................................................................................7

3.3 Målgruppe...........................................................................................................................9

3.4 Udformning af websitet:...................................................................................................11

3.4.1 Modernisme................................................................................................................11

3.4.2 Designprincipperne...................................................................................................12

3.4.3 PLUS værdierne...........................................................................................................14

4 Project brief..............................................................................................................................16

4.1 Kommerciel målsætning..................................................................................................16

4.2 Teknisk målsætning...........................................................................................................16

4.3 Sidens indhold ...................................................................................................................18

4.3.1 Sitemap.......................................................................................................................18

4.3.2 Storyboard ..................................................................................................................19

4.4 Budget...............................................................................................................................25

5 Evaluering af gruppeproces...................................................................................................26

6 Koder vi er stolte af..................................................................................................................27

6.1.............................................................................................................................................27

6.2.............................................................................................................................................28

7 Konklusion.................................................................................................................................30

8 Litteraturliste.............................................................................................................................31

Side 1/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

1. Indledning

Terrariet vissenbjerg har behov for at få en ny hjemmeside. De har ønsket at få et site, som lægger

vægt på oplevelse og viden. Dyrene skal være i fokus. Det overordnede mål med sitet er at få folk

til at se terrariet som det rette valg af oplevelse til fx en familieudflugt. De sigter efter at ramme en

bred målgruppe, og vi har af den årsag valgt at lave et website i den enkle modernistiske stil med

udgangspunkt i målgruppen børnefamilier.

Vi vil anvende PLUS-værdierne i skabelsen af et oplevelsesdesign som inkluderer den

modernistiske stilart: Swiss Style. Til specifikation af hjemmesidens udseende og funktioner vil vi

desuden lave et project brief. Udover selve hjemmesiden vil et idékatalog til forbedringer af selve

besøget i terrariet blive udarbejdet.

Da vores grupper i ”Style and Experience”-projektet er sammensat på baggrund af vore læringsstile,

vil vi reflektere over vores gruppearbejde bl.a. på baggrund af disse.

Til sidst i rapporten vil vi konkludere hvor vidt og hvordan vi har udviklet et koncept gennem Style

and experience, som vil kunne skabe større interesse hos forældre og deres børn.

Side 2/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

2. Research og analyse af den givne stil.

2.1 Swiss style karakteristika,

Vi har valgt at beskæftige os med den del af modernismen omtalt som Bauhause & "Swiss Style".

Omfattende kunstnere som Jan Tsychichold, Laszlo Moholy-Nagy, Armin Hoffman, Fridolin

Müller og Joseph Müller-Brockmann blandt andre.

Kendetegnende ved denne/deres stil, som kan ses herunder, er:

• Enkelthed

• Vertikale & Horisontale linjer

• Meget luft

• Opdeling af rum i harmoniske dele

• Kontrast

• klare margener

• Grundformerne, cirklen, firkanten og trekanten

• Asymetri

• Sans-serif

• Reduktion af form til det enkelte (basic geometry) 1

• "Less Is More" citat; Ludwig Mies van der Rohe

2.2 Om Swiss Style

Swiss Style er en design stil som opstod i Schweiz i 1950'erne. Pga. dens stærke bånd til de

typografiske elementer er den senere blevet kendt som "The International Typografic Style". Stilen

er bl.a. kendetegnet ved at der er gjort stor brug af en slags matematisk net for at holde designet rent

og struktureret. Samt fonttyper af sans-serif typen (skrift typer uden fødder), klare marginer og

sort/hvid fotos. Det overordnede indtryk er simpelt og rationelt, stramt struktureret, objektivt og

harmonisk, tydeligt og seriøst/alvorligt. 2

Stilen blev forfinet i Svejts af to design skoler, en i Basel ledet af Armin Hoffmann og Emil Ruder

og en i Zurich under ledelse af Joseph Müller-Brockmann. De havde alle studeret på den Schweiz

skole for design hvor der blev undervist Bauhaus principperne og Jan Tschicholds "New

Typography".

1 Aynsley, Jeremy. A Century of Graphic Design. pp. 60-69

2 The History of Visual Communication - The Modernists

Side 3/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

Laszlo Moholy-Nagy

K VII, 1922, oil on canvas, 115.3 x 135.9 cm, Tate

Gallery, London 3

Jan Tschichold

Poster fra udstillingen "Konstructivisten", 1937 4

Jan Tschichold, Poster fra "Der

Berufsphotograph" 1938. 5

3 ArtLex on the Bauhaus.

4 Merrill C. Berman Collection.

5 Introduction (Prints and Photographs: An Illustrated Guide).

Side 4/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

3. Udforskende research og analyse

3.1 Idékatalog

Terrariet har et lavt budget, og har ikke mulighed for at flytte lokaler lige foreløbig. Vi vil derfor

med tanke på det begrænsede budget give forslag, som forholdsvis vil være billige for terrariet, og

øge de besøgendes interesse for stedet. Hovedsageligt kunne vi godt tænke os at følesansen fik mere

plads, da terrariet sælger en oplevelse til folk, og vi mener at de kan udnytte den plads de har bedre.

Ofte er det lokale som besøger stedet, og for at omsætte bedre må de og appellere bedre til den

målgruppe som vil vælge at besøge dem: Folk som ønsker hyggelige og personlige oplevelser.

Føleboksen

For at stimulere sanseoplevelsen ved et besøg i terrariet foreslår vi at man udnytter følesansen.

Dette kan gøres ved at sætte en række af kasser op med forskellige ting som stammer fra de arter af

dyr som findes i terrariet. Dette kunne bl.a. være slangeskind og skildpaddeskjolde. Kasserne skal

være i træ og have et hul foran, hvor man kan stikke hånden ind. Indholdet i kassen kan ikke ses, så

børnene og barnlige sjæle vil få en gætteleg ud af føle på det. Dog skal der være et låg på som kan

åbnes, så man kan se hvad det er man har rørt ved og finde ud af om man gættede rigtigt.

Kæledyrszoo

Der skal være mere mulighed for at kunne røre dyr. I øjeblikket befinder der sig marsvin udenfor.

Desværre er de næsten ikke til at nå og røre. Området udenfor kunne blive brugt bedre ved at ændre

indhegningerne. Det ville være en ekstra spændende oplevelse hvis mindre skildpadder også var i

små indhegninger, hvor deres naturlige miljø efter bedst mulige midler rekonstrueres.

Indhegningerne skal være forholdsvis lave, så der er mulighed for at røre dyrene og komme ind til

dem, uden at de kan komme ud. Der skal være opsyn af en dyrepasser, så der ikke forekommer

nogen ulykker. Det vil virke godt for de besøgende, hvis dyrepasseren er til stede både for opsynets

skyld, men også for at fortælle lidt om dyrene og deres adfærd.

Fødselsdag i terrariet

For at øge personliggørelsen yderligere, bør terrariet reklamere med at man kan få lov at holde

børnefødselsdage oppe i det ekstra lokale de har til rådighed. Til fødselsdagsfesten kunne der være

mulighed for at vælge mellem forskellige temaer. Temaerne kunne bl.a. være tudser, øgler, slanger

Side 5/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

eller edderkopper. Lokalet pyntes med dug, små plastik dyr, flag og balloner. Terrariet kunne

samarbejde med en bager til at lave kagemand, som passer til det valgte tema.

Til begivenheden kunne terrariet lave aktiviteter som passer til temaet, deriblandt historiefortælling

om en af dyrene. Aldersgrupperne for fødselsdagarrangementet vil være børn i alderen: 4-12 år.

Prisen for arrangementet vil være på ca. 1500 kr. for 20 deltagende børn og 2 voksne samt en lille

fødselsdagsgave til barnet.

Postkort

Terrariet har i forvejen en printer, som de printer plakater ud på og de kunne med fordel også bruge

den til at lave speciallavede postkort til folk. I perioder vil man på terrariet kunne få taget sit billede

mens man fx holder eller rører ved en slange. Til ens postkort kan man vælge mellem nogle sjove

sætninger/hilser som man gerne vil have sat på sine kort, og bruge dem til at sende rundt til

familien.

Postkortene kunne koste ca. 150 kr. for et sæt på 10, eventuelt med yderligere mængderabat ved

køb af flere.

Legeplads:

Terrariet har et flot område bagved, som de bør reklamere mere med. De kunne bygge en legeplads

som hører til terrariet i et krybdyrstema. Et forslag til udseende ville være at lave en vippe formet

som krokodille, nogle gynger hvor selve sædet er formet som skildpaddeskjolde, klatrestativ som er

bundet sammen af tove, så det danner et edderkoppespind og nogle små vipper med fjedre under

som ligner frøer. Legepladsen er noget mere krævende for budgettet, men der er sandsynligvis

muligheder for at få tilskud fra fonde, og det vil være en god investering for at lokke

børnefamilierne til. Til legepladsen ville det være godt med nogle bænke, hvor familien kan nyde

madpakken og den gode udsigt.

Side 6/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

3.2 Swiss Style Web-site

Et godt eksempel til at vise modernistisk Swiss Style design på en hjemmeside er www.kartell.it

Kartell er et italiensk møbelmærke, som laver møbler i plastik og indimellem stål. 6

På forsiden ser man hurtigt mange af de stiltræk, som karakteriserer modernistisk design.

Der er en tydelig kontrast mellem overskriften ”Kartell” og baggrunden, da de har brugt sort på

baggrunden og signalfarven rød til overskriften(1). Kartell’s hjemmeside holder sig i farverne sort,

hvid og rød, hvilket giver nogle rigtige gode kontraster.

Hele den midterste del, har de efterladt helt blank(2) (sort), hvilket giver rigtig meget luft på sitet. I

bunden af sitet, ser man klare røde linjer, som deler linkene op (3).

6 Kartell Habitat Division.

Side 7/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

Når man trykker sig videre, kommer man ind på hovedsiden.

I bunden ses igen, hvordan vertikale og horisontale linjer deler de forskellige menuer op i lige store

harmoniske felter(4).

Gentagelseselementet ses også tydeligt, da meget af siden er statisk, på nær midtersektionen, der

skiftes ud(5), når man trykker på menu-knapperne i bunden af sitet.

Side 8/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

Med hensyn til grundformer, er næsten alt opdelt i firkanter. Enten i kvadrater eller i rektangler,

hvilket gør siden dejligt overskuelig at klikke sig rundt på.

Kartell’s møbler er ofte holdt i signalfarver, hvilket også giver en god kontrast når man ser på

billederne af møblerne.

3.3 Målgruppe

Vores målgruppe er den aktive børnefamilie. Vi sigter efter dem hvis kerneværdier er fælles

samvær og aktiviteter med mulighed for fordybelse. De skal gå op i at give deres børn et godt

fundament ved at læse godnat historier og aktivt deltage i deres børns kreative udfoldelse. Den

aktive børnefamilie bruger ikke mange penge på kultur som teater og biograf, til gengæld er det

Side 9/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

heller ikke fjernsynet og det indendørs der i overvældende grad trækker, men gerne andre fælles

oplevelser. 7

Den modernistiske stil passer sammen med børnefamilien, da den med sin enkelhed både kan

henvende sig til voksne og børn. Stilen skaber overblik og sætter fokus på det relevante.

7 Boligtorvet - Aktiv børnefamilie.

Side 10/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

3.4 Udformning af websitet:

Hjemmesiden er lavet i en enkel stil med rene linjer hvor funktionalitet og overskuelig er formålet.

Informationerne skal være i fokus, så der bliver lagt vægt på kendskab til og interesse for dyrene i

terrariet.

3.4.1 Modernisme

Websiden er baseret på den grafiske modernisme, swiss style dette kommer til udtryk ved at vi har

brugt kvadratet, som udgangspunkt for opsætningen. De forskellige afsnit på siden er opdelt efter

streger, som giver ro og overblik over sitet. Den samme inddeling gælder for links.

Sort er valgt som baggrundsfarve for at skabe elegance og klarhed over sitet. Sort er

kontrastgivende i forhold til de få elementer sitet indeholder samt den hvide tekst. Denne kontrast er

med til at fastholde fokus og understøtte frøen og bladrankens funktion.

Frøen og bladranken afviger lidt fra modernismen med de bløde former, og holder sig ikke til de

almindelige geometriske former. De har stadig bibeholdt farvekriterierne om klare og rolige farver,

og er også med til at give kontrast. De bryder med den stramme ramme som hjemmesiden ellers er

bygget op efter, for at give effekten af liv og stemning så sanserne pirres. Frø og bladranke kommer

til at træde mere i kraft netop pga. hjemmesidens enkle udformningen, og budskabet kommer til at

stå klart og tydeligt.

Frøen, med blikket vendt ind mod siden, giver oplevelsen af at der foregår noget, og skaber

nysgerrighed efter at læse teksten ved siden af. Bladranken minder i sit udtryk om regnskoven og

bliver brugt til en animation hvor små dyr kravler op af den. Dette skaber en effekt af oplevelse og

giver (forhåbentligt) lysten til at udforske.

Typografien er den groteske skrifttype (helvetica). Kendetegnet for den groteske skrifttype er at der

ingen kontrast mellem hår- og grundstreger og ingen seriffer er 8 .

Der er givet god luft omkring alle elementerne og med en linjeafstand på 16 pt., har selve teksten

også god luft mellem hver linje. Menuen er integreret i designet og er også skabt og opdelt efter

samme modernistiske princip som resten af sitet.

8 Grafisk skrift. Erhvervsskolernes forlag, Odense

Side 11/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

3.4.2 Designprincipperne

For at overholde de grundlæggende design principper skal man tage højde for følgende 9 :

• Alignment

• Nærhed

• Gentagelse

• Kontrast

Alignment

Der er kun brugt en for form vertikal alignment (left-alignment), for at gøre det let læseligt.

Samtidig er der sørget for at teksten ikke står klistret ud til kanten, så den virker forstyrrende. Selve

linjen med linkene er også venstrestillet og flugter med tekstfeltet længst til venstre. Der også taget

højde for den horisontale alignment, så tekststykker der står ved siden af hinanden flugter den

øverste grundlinje. Det samme gælder for opsætningen af linkene, som alle ligger på samme linje

for at give ro og overskuelighed over siden.

Nærhed

Nærhed kan ses på sidens opdeling af felter. Brødtekst og overskrift har fået en samhørighed ved

ikke at have for stor afstand mellem hinanden. Billederne der linker til galleriet er ligeledes samlet i

deres eget felt, og ligger tæt på hinanden så man kan se de har noget tilfælles. Links til undersiderne

er af samme grund samlet på en linje, så der kan ses at de har en funktion sammen. På den måde

bliver siden organiseret, og man har lettere ved at danne overblik.

Gentagelse

Gentagelsen er bevaret på sitet, da kun tekst og billeder inde i midten ændrer sig, når man går til

undersiderne, og man stadig vil føle at man befinder sig på den samme side.

Kontrast

Der er skabt forskellige slags kontraster mellem elementerne, så graden af vigtighed vægtes

forskelligt. Elementerne må nemlig ikke "slås" om at få lige meget opmærksomhed, da det vil blive

9 Williams, R., & Tollett, J. The non-designer's Web book: an easy guide to creating, designing, and posting your own

Web site. pp. 114-127.

Side 12/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

uoverskueligt for den besøgende på sitet. Det mest dominerede på siden er frøen som skaber det

grundlæggende indtryk af nysgerrig og liv. Derefter kommer billederne inde på selve sitet samt

bladranken, som underbygger det samme som frøen. Derefter vil man lægge mærke til overskrifter

og billederne med galleri link. Til sidst vil man se brødtekst og links. Overskrifter er gjort en del

større end brødteksten. Kontrasten skal nemlig være lidt "voldsom for at have en ordentlig

virkning.”

Side 13/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

3.4.3 PLUS værdierne

Playability

Frøens ”Vidste du…” lægger op til den leg som vi forsøger at trække brugerne med i på vores site.

Den undervisende leg. Denne sektion er i især velegnet for forældrene at læse op for deres børn.

Oplysninger vil være forundrende, og bl.a. fortælle om hvor farlige dyrene er. Dette vil både vække

voksnes og børns nysgerrighed. Det samme kommer frem ved brugen af sitets leksikon over dyrene,

hvor brugeren selv kan vælge mellem at se billeder, høre lyden fra dyret eller se en video med det

pågældende dyr. Vores gallerifunktion genererer også playability idet man selv vælger det tema af

dyr man gerne vil se om. Galleriet kører af sig selv, men brugeren kan samtidig sidde og styre det

ved at klikke frem og tilbage mellem billederne. Vi kunne godt tænke os i længden at udvide

galleriet med musik eller lyde, der yderligere ville skabe en stemning af et samlet sanseindtryk.

Likeability

Likeability vil lægge i den overskuelige måde siden er sat op på, hvor man ikke skal "scrolle" i

teksten for at læse det næste del, men ved et tryk på pilen i bunden blot kan klikke videre til det

næste tekstfelt. Hjemmesiden skaber desuden variation ved udover den almindelige læsning også at

have små stykker af information i "Vidste du..." sektionen. Frøen som kravler ud fra kanten virker

helt levende, og giver også siden et løft.

De små gallerieksempler yderst til venstre fungerer, som appetitvækkere man kan klikke på og blive

ført hen til galleriet. Dette fungerer som en god adspredelse fra læsningen. Vi ville gerne have

udvidet kontaksiden med en kalenderfunktion, som synkroniserede med terrariets egen kalender, så

undervisere kunne se, hvornår der var tid.

Usabillity

Vi lægger stor vægt på usability. Linkmenuen er tilgængelig på alle siderne, og linkene har logiske

navne, så brugeren ikke er i tvivl om hvad indholdet på siderne vil være. Linkene er lavet som enkel

tekst for at der ikke kan herske nogen tvivl om hvad det er. Derudover er sitet lavet sådan at man

ikke skal "scrolle" på siden for at læse det næste. Der er lavet pile under tekstfelterne, så man blot

kan klikke frem og tilbage på siden. Således føler den besøgende ikke at man forlader siden og gør

Side 14/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

det samtidig til en lettere oplevelse for brugeren at læse det, da man ikke kan holde til at læse

længere tekststykker ad gangen. 10

Linkene vil skifte farve hvis man går ind på dem, så man altid er klar over hvilken side man

befinder sig på. Vi har udover linkmenuen også billedlink ude i siden, så man kan blive ført direkte

hen på en gallerivisning. Gallerivisningen vil poppe op i forgrunden, hvor brugeren enten kan lade

det lave et slideshow automatisk eller selv styre det, og lukke for vinduet når de ikke ønsker at se

mere. Når gallerivisningen lukkes vil man stadig befinde sig på den samme side som da man

aktiverede galleriet, og brugeren skal derfor ikke hen og lede efter det de ellers var i gang med før

de lukkede galleriet op.

Sociability

På siden er der ikke stor mulighed for at socialisere sig. Det nærmeste vi kommer sociability, er

mailfunktionen hvor man kan kontakte Terrariet. Vi har lavet siden, så det skulle være muligt at

lade sociability’en udfolde sig på den anden side af skærmen, mellem forældre og børn.

Vi har lagt størst vægt på PLUS-værdierne likeability og usabillity, da brugergruppen vil lægge

vægt på det gode indhold og tydelig information. De vil gerne have et enkelt overblik, fordi man

som forældre har meget at se til når man skal have både jobbet og familien til at fungere. Det vil

derfor være vigtigt for dem at de hurtigt og klart kan danne overblik, og finde ud af om det er noget

de kunne være interesseret i sammen med deres børn, så de kan bruge mere tid på at nyde fritiden

sammen med børnene.

10 Freidlein, Ashley.(2001). Web Project Managemet – Delivering Successful Commercial Web Sites.

Side 15/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

4 Project brief

Efter et møde med de IT-ansvarlige fra Terrariet i Vissenbjerg, har vi, ud fra de svar og

informationer vi har fået, kunnet opstille et forslag til en løsning på et site som vi mener, kommer

klientens ønsker i møde.

4.1 Kommerciel målsætning

Den kommercielle målsætning med siden er først og fremmest at tiltrække flere kunder. Vi ved fra

møde med klienten at de to grupper der primært kommer i terrariet er skoleklasser og børnefamilier.

Da et skoleklassebesøg oftest er en, på forhånd, planlagt del af undervisningen og en klasse sjældent

vil komme gentagne gange, har vi valgt at fokusere på børnefamilien.

Sitet skal for børnefamiler være noget som forælder og barn vil besøge sammen. Barnet, som er

visuelt orienteret og ofte ikke kan læse, vil fokusere på billederne, mens forælderen kan læse højt.

Dette vil gøre barnet videbegærlig og interesseret i de forskellige dyr. Siden er altså ment som en

forsmag på hvad forældre og børn i samvær kan opleve på terrariet, samt en uddannende side som

viser at terrariet er et seriøst sted med plads til fordybelse og samvær, frem for underholdning for

underholdningens skyld. I disse tider hvor ord som kvalitetstid og fælles oplevelser forældre og

børn imellem er ofte brugt, mener vi at målgruppen er valgt med rette. 11

Terrariet har udtrykt ønske om nogle tiltag der vil lette samarbejdet med skolerne, så tid og penge

spares. Derfor har vi yderligere valgt at gøre undervisningsmateriale tilgængeligt på siden (lavet

som et pdf-eksempel).

4.2 Teknisk målsætning

Bl.a. fordi Terrariet ikke som sådan råder over et teknisk team og ikke har de store, dyre

programpakker og løsninger til rådighed, har vi valgt at sitet skal laves i xhtml. Det giver

medarbejderne mulighed for selv at gå ind hurtigt og ændre nogle ting eller tekst, uden at bruge for

meget tid, så siden løbende kan være opdateret.

Vi har valgt at lave siden i et 900x600 format så den kan ses af alle også så brugere med bærbare

computere ikke bliver nødt til at scrolle for at få det hele med. Desuden vil vi forsøge at gøre siden

11 24.dk.

Børn&Unge - fagblad for pædagoger og klubfolk organiseret i BUPL.

Guldguiden-ver2.pdf (application/pdf Objekt).

Side 16/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

så let som muligt, da der skal være fokus på indholdet og ikke alle mulige features uden noget

egentligt formål.

Browser valg

Ud fra statistikker på w3schools.com 12 , kan vi konstatere at de oftest benyttede browsere er Internet

Explorer (IE), som bliver benyttet af godt 50% af internetbrugerne, og Firefox med knap 40 %:

Grundet disse tal vil vi optimere vores site til først og fremmest at virke med IE og Firefox.

Krav til computer

Da der vil være Flash elementer og PDF dokumenter på vores site vil det kræve at Adobe reader (er

kun et krav hvis man vil se lærermateriale) og Flash Player 9 er installeret.

Dette kræver som minimum

for PC: Intel Pentium II 450MHz, 128MB RAM .

For Macintosh; PowerPC G3 500MHz, 128MB RAM eller

Intel Core Duo 1.33Ghz, 128MB RAM 13

12 Browser Statistics.

13 Adobe - Adobe Flash Player : System Requirements.

Side 17/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

4.3 Sidens indhold

4.3.1 Sitemap

Når man kommer ind på Vissenbjerg Terrariets hjemmeside, virker det umiddelbart uoverskueligt.

Især fordi man skal scrolle ned for at se links til alle undersiderne. Endvidere linkes der 2 gange til

de samme sider, både som billeder inde på midten af siden og som tekstlinks i venstre side. Der

også opstå forvirring, da sidderne der er linket til ikke altid findes (endnu). Når man kommer ind på

undersider til undersiderne, fx de enkelte dyr under ”Dyrene i terrariet” er der heller ikke linket

tilbage til hovedsiderne, hvilket må siges at være uheldigt.

Vi har bestræbt os på at gøre navigationen så enkel som muligt (som ses i vores sitemap forneden

(Figur 1). Det er altid muligt at komme på de 7 ”øverste” undersider samt forsiden, lige meget hvor

på siden man befinder sig.

Figur1

Side 18/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

4.3.2 Storyboard

Forsiden (Figur 2) skal give et hurtigt overblik over hvad der er adgang til. Når man kommer ind på

siden, vil der afspilles en lyd, som giver én fornemmelsen af, at være i en regnskov. På overskuelig

vis står linkene til undersiderne forneden på siden. Til venstre er der billeder af dyr, som linker

videre til galleri-undersiden. I en tekstbox til højre for billederne, vil der endvidere være en ”vidste

du”-feature som vil skifte information hver gang man skifter side. Hovedteksten er centreret på

siden (herefter hovedtekstfeltet) og byder kort velkommen til terrariets hjemmeside. Som

dekoration er der en bladranke i højre side og en grøn træfrø som kigger ind på ”vidste du”- boxen.

Forsidens design vil være gennemgående på alle sider, for at skabe ro og overblik for brugeren.

Forsiden skal linke videre til undersiderne: Historie, Kontakt, Undervisning, Leksikon, Galleri,

Kvalitetstid og Nyheder.

Historie

Figur2

Side 19/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

Undersiden ”Historie” vil lægge sig op ad forsiden i design. Hovedtekst og illustration vil blot være

udskiftet. Terrariets historie skal opridses på denne side.

Nyheder

Lige som ”Historie” vil ”Nyheder” ligne hovedsiden. Her skal der være mulighed for at se nye og

gamle nyheder.

Familietid

”Familiehygge” vil beskrive de forskellige muligheder for børnefamilier som terrariet kan byde på.

Kontakt

I ”Kontakt” (Figur3) findes adressen på Vissenbjerg Terrarium til venstre på siden hvor, ”Vidste

Du”- boxen befinder sig på forsiden. Endvidere er der en mailfunktion, hvor man kan skrive en mail

Figur3

Side 20/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

direkte til Terrariet fra siden. Boksene ”Afsender navn”, ”Afsender e-mail” og selve mailboxen,

som er placeret i hovedtekst-feltet, skal udfyldes af afsenderen, så terrariet kan svare på afsenderens

mail.

Undervisning

På denne underside (jf. Figur4) er der i hovedteksten en beskrivelse af Terrariets tilbud til

skoleklasser. Ved klik på den lille kalender som er synkroniseret med Terrariets, øverst i højre

hjørne af hovedtekst-feltet, kommer man ind på en forstørret kalender, hvor det vil være muligt at se

hvornår der er ledige tider på terrariet. Neden for hovedteksten er der et link til under-undersiden

”Undervisningsmateriale”.

Figur4

Side 21/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

Undervisningsmateriale

Hovedtekstfeltet på denne underside (jf. figur5) indeholder en kort beskrivelse af det

undervisningsmateriale som er tilgængeligt, samt, til højre, billeder som linker til materialet i PDFform.

Figur5

Side 22/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

Leksikon

Figur6 illustrerer hvordan det ser ud når man kommer ind på siden med det ønskede dyr. I rammen

til højre, er det muligt at se både et billede samt video af dyret. Der kan også afspilles lyd. Disse

funktioner udløses ved at trykke på knapperne under rammen. Til venstre for og evt. under billedet

kan man læse fakta om valgte dyr. Hvis der er et galleri med det dyr man har søgt på, vil siden også

linke til det.

Figur6

Side 23/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

Gallerier

Ved at klikke på billederne til venstre på siden, kommer man som nævnt til siden med gallerier

(Figur7). På samme måde som i ”Undervisningsmateriale”, indeholder hovedtekstfeltet billeder der

linker videre. Ved klik på et galleri, vil siden fade ud og galleriet vil træde frem i forgrunden. Her

slider billederne langsomt forbi og det er muligt at klikke på de enkelte billeder for at se et større.

For at komme tilbage til siden igen, skal man ganske simpel lukke ned for funktionen.

Figur7

Side 24/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

4.4 Budget

Dage (1 dag = 8 timer) Pris pr. time (Kroner m. moms) Personer

Udarbejdelse af websitet 10 dage 250,- 4 person

Hosting Årsbeløb 75,-, pr. år Ingen personer

I alt: 80075,-

Side 25/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

5 Evaluering af gruppeproces

I gruppen har vi en reflektor/teoretiker, en reflektor, en aktivist og en teoretiker/aktivist. Som

gruppe betyder det at vi arbejder forskelligt med tingene og supplerer hinanden godt. Vi er en meget

rolig gruppe, (næsten for rolig), men arbejder godt sammen og holder vores plan. Vi er gode til at

tale sammen og overholde vores aftaler og deadlines.

Fordelingen af arbejdsopgaver er foregået løbende og vi ved hele tiden hvad de andre er i færd med,

hvilket giver tryghed og gør at vi koncentrerer os godt om det vi sidder med.

Under forløbet med opgaven, har vi hjulpet hinanden med de forskellige opgaver, såsom at finde

relevant materiale osv. Vi har fra start haft det mål at lave et godt produkt og er derfor alle

ambitiøse omkring hele projektet.

Vores gruppeleder er aktivist. Hun går i gang med det samme og finder ud af tingene hen ad vejen,

hun er struktureret og er en god leder med overblik.

Gruppens teoretiker går også i gang med det samme, hun vil gerne have styr på gruppens planer og

gruppens andre medlemmer, hun fungerer godt i gruppesammenhænge, men er også glad for at

arbejde selvstændigt uden at skulle tage hensyn til andre.

De to reflektorer i gruppen har lavet en del arbejde sammen, fundet oplysninger, billeder, skrevet

tekst, designet, analyseret osv. Som teoretikeren har udtalt, arbejder de: "Langsomt, men sikkert".

Der er en væsentlig forskel på de to reflektorer mht. overblik. Den ene stoler på de andre har styr på

sagerne og den anden følger nøje med i hvordan processen skrider frem og hvordan planerne i

gruppen overholdes.

Vi er alt i alt en meget homogen gruppe trods forskelle. Det at de fleste i gruppen ligger stor vægt

på overblik og samarbejde samt det at vi alle er rolige og snakker om tingene er et stort plus.

Side 26/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

6 Koder vi er stolte af

6.1

Denne kode er en del af gallerisiden, og har til formål at hente billederne som skal virke i galleriet.

Billederne vises i et javascript, som ved at klikke på et billede aktiveres, og starter et slideshow.

Normalt skal alle billeder vises på siden for at javascriptet kan lave slideshow med dem. Derfor har

jeg brugt php til at få den til at hente billederne fra en mappe i stedet for. Billederne er desuden delt

op i temaer, og koden gør derfor også at den henter de billeder som jeg har bestemt skal være en del

af temaet. Eksemplet viser hvordan jeg har gjort med temaet slanger. Koden er blevet valgt som

eksempel, fordi den viser hvordan man løser noget mere komplekst, og hvordan man integrere både

html og php og implementere det til et javascript.

1

2

3

4

1) Først laves en reference til hvor den skal gå hen og hente billedet den skal starte med i

slideshowet. Derefter linker jeg til mit javascript, og giver den en true-værdi om at den gerne må

”slide” automatisk, når jeg starter slideshowet. Bagefter får den nogle værdier om at den skal

være i stand til at kunne blive trykket frem og tilbage.

2) Dernæst laves selve billedelinket, som aktiverer billedgalleriet når man trykker på den.

Efterfølgende går jeg ind i php og laver en while-løkke for at få den til at tage de 10 billeder der

er af slangerne. Jeg bruger $i som variabel og fortæller den at den må være mindre eller lig med

10.

3) Inde i selve variablen skriver $i++ for at fortælle den at den skal øges sig i værdi.

Side 27/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

4) Herefter skriver jeg echo for at skrive linket ud, om hvor den skal hente fra, og tilføjer $i for at

vise at er alle de tal fra løkken den må hente. Mappen jeg henter fra er billeder navngivet med

tal, og $i gør at den henter det antal billeder som jeg har sat den til i variablen.

6.2

55: Hvad sker der når man slipper musen over ”lyd”-knappen:

57: Hvis indholdet i containeren ikke nu er ”sound.swf”.

59: Så skal indholdet være ”sound.swf”.

60: Det skal vi bruge funktionerne switchContent og loadSWFFile til.

64: Funktionen switchContent:

66: Fjern indholdet i containeren,

70: Funktionen LoadSWFFile:

73: Vi skal komme en ny holder til indholdet ind, der hedder ”ldr”

74: Det vi skal hente ind er det den knap der er blevet trykket på har bedt om (”sound.swf”)

Side 28/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

75: Den ligger i flashmappen under sit navn.

76: Vi har brug for en ny URLRequest til at loade filen

77: Holderen modtager sit indhold

79: Holderen bliver sat i containeren på siden ved hjælp af .addChild.

= der en blevet trykket på lydknappen på siden og lyden afspilles.

Koden er valgt, fordi det faktisk er gået op for kodeskriveren hvordan det hele hænger sammen og

det var lidt af en åbenbaring.

Side 29/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

7 Konklusion

Vi har lagt vægt på udvikle et seriøst site som afspejler det læringsrige miljø, som terrariet udstråler.

Især har vi lagt vægt på PLUS-værdierne usabilty og likeability; Sitet er meget overskueligt og vi

har lagt vægt på at skabe nysgerrighed og en legende tilgang til læring jf. ”Vidste du” og

”Leksikonet”. Endvidere er dyrene i terrariet en flot feature i sig selv. Hvilket især kommer til

udtryk i galleriet.

Udover hjemmesiden har vi fundet ud af, at terrariet bør fokusere på yderligere tiltag. En legeplads

og mere børnevenlige omgivelser, samt de sanseoplevelser terrariet selv efterlyser, fx gennem en

følekasse, som beskrevet i idékataloget, ville være et stort plus.

Over de 2 uger vi har arbejdet med Style & Experince, har vi gjort os mange erfaringer. Vi har lært

en del om kodning både i xhtml og Actionscript 3. Der er både gået lys op for os, mens en del også

blev midlertidigt slukket.

Hvorom alting er, har vi i projektets forløb lært meget, som vi kan tage med os videre. Samtidig har

vi lavet forslag til et site, som vi mener Vissenbjerg terrarium kan være godt tjent med.

Side 30/31


Style and Experience

Gruppe 4: René, Maria, Larsen og Sophie

Projekt til aflevering d. 30/5 2008

8 Litteraturliste

24.dk. . Retrieved May 28, 2008, from http://24.dk/article.jsp?articleId=527.

Aynsley, Jeremy. 2001. A Century of Graphic Design. London. Octopus Publishing Group Limited

Adobe - Adobe Flash Player : System Requirements. . Retrieved May 28, 2008, from

http://www.adobe.com/products/flashplayer/productinfo/systemreqs/.

ArtLex on the Bauhaus. . Retrieved May 28, 2008, from

http://www.artlex.com/ArtLex/b/bauhaus.html.

Bilag1, Grafisk skrift. Odense. Erhvervsskolernes forlag.

Boligtorvet - Aktiv børnefamilie. . Retrieved May 28, 2008, from

http://www.boligtorvet.dk/Home/Inspiration/Artikel.aspx?articleid=884D1222-AE1F-416B-

BFE7-2CD83528C43A.

Browser Statistics. . Retrieved May 28, 2008, from

http://www.w3schools.com/browsers/browsers_stats.asp.

Børn&Unge - fagblad for pædagoger og klubfolk organiseret i BUPL. . Retrieved May 28, 2008,

from

http://www.bupl.dk/internet/BoernogUnge.nsf/0/F4845A9080E2814FC1256D480040BF59?

opendocument.

Freidlein, Ashley. 2001. Web Project Managemet – Delivering Successful Commercial Web Sites.

‘ San Francisco. Morgan Kaufmann Publishers

Guldguiden-ver2.pdf (application/pdf Objekt). . Retrieved May 28, 2008, from

http://www.minff.dk/fileadmin/template/minffdk/pdf/Konferencer/Guldguiden-ver2.pdf.

Introduction (Prints and Photographs: An Illustrated Guide). . Retrieved May 28, 2008, from

http://www.loc.gov/rr/print/guide/intro.html.

Kartell Habitat Division. . Retrieved May 28, 2008, from http://www.kartell.it/.

Merrill C. Berman Collection. . Retrieved May 28, 2008, from

http://www.mcbcollection.com/pages/tschic11.html.

The History of Visual Communication - The Modernists. . Retrieved May 28, 2008, from

http://www.citrinitas.com/history_of_viscom/modernists.html.

Williams, R., & John Tollett. 2006. The non-designer's Web book: an easy guide to creating,

designing, and posting your own Web site, third Edition. Berkeley, CA. Peachpit Press.

Side 31/31

More magazines by this user
Similar magazines