Rejsebeskrivelser 2.3 HTX Roskilde Oliver, Jonas Kristensen, Rasmus og Jacob M August/Oktober 2017 Side 1 af 30

Transkript

1 Side 1 af 30

2 Indholdsfortegnelse Planlægning 3 Planlægningsværktøjer 3 Tidsplan 3 Hack n Plan 4 Kravsfangst 4 Afsender 4 Målgruppeanalyse 4 Userstory 5 Persona - Karl G. Madsen 5 Persona - Ole G Nielsen 5 Persona - Morten & Jeanette Andersen 7 Krav 8 Design 9 Indledende design (Rough) 9 Front design 9 Attractions profil 10 Hotels profil 11 Restaurant profil 12 Footer 13 Valg af footer 13 Informationsdesign 14 Brugergrænseflade (UI) 14 Interaktionsdesign 15 Ikoner 15 Skrifttypografi 16 Farver 16 Programmering 17 Breadcrumbs 18 Valutaomregner 19 Billede-slider 22 Rating 26 Mobil menu 28 Afprøvning 30 Rolf-Molich Test 30 Konklusion af test 30 Side 2 af 30

3 Planlægning Det er vigtigt at bruge god tid på at planlægge projektet, fordi med et overblik over hvad der skal laves kan vi alle sammen hele tiden være i gang med noget, og dermed optimere vores tid og effektivitet. Vi har primært brugt to planlægningsværktøjer til at skabe overblik og struktur i vores arbejde: HacknPlan og en tidsplan. Planlægningsværktøjer Tidsplan Vi har brugt en helt basal tidsplan som et værktøj til at holde styr på hvem der laver hvad. Tidsplanen giver et kort indblik i hvor langt vi er nået i processen på et vilkårligt tidspunkt, samt hvad der skal laves. Tidsplanen er ikke så detaljeret, da vi har brugt hack n plan istedet. Uge Dag Indhold 35 To Præsentation af oplæg, gruppedannelse, informationssøgning 36 Ma Beskrivelse af afsender, userstories, krav til produkt, tidsplan To Roughs, design-principper/skabelon, brugergrænsefladen 37 Ma Videreudvikling ifht egen tidsplan. Beskrivelse af virtuelle niveauer. Intro java-scripts. To Videreudvikling ifht egen tidsplan 38 Studietursugen: tag billeder og videoklip 39 Ma Gør billeder og film web-parate og upload til server To Videreudvikling ifht egen tidsplan 40 Ma Videreudvikling ifht egen tidsplan To Videreudvikling ifht egen tidsplan 41 Ma Gør klar til aflevering To Mundtlig præsentation Side 3 af 30

4 Hack n Plan Vi bruger planlægningsværktøjet ved navn HacknPlan. I HacknPlan kan man lave tasks (små opgaver) og markere deres vigtighed. Den viser, ligesom tidsplanen, hvem der har ansvar for hvad. Man kan også sætte en dato, hvor tingene skal være færdigt for at strukturere hvornår bestemte ting er færdige og nye skal igangsættes. Vi har brugt HacknPlan som en vigtig del af planlægningsarbejdet, og sat punkter op for selv de mindste ting, så vi ikke glemmer noget. Testing tabbet har vi brugt til at vise at et stykke arbejde er parat til at blive testet/ tjekket igennem af andre gruppemedlemmer. HacknPlan og tidsplanen har hjulpet os med at holde styr på opgaven, og har struktureret processen. Kravsfangst Afsender Vi er et turist bureau, der tager udgangspunkt i vores egen oplevelse af Dublin. Vi er afsted for at opleve hvad vi står og mangler af vejledning - som andre besøgende sandsynligvis også søger. Derefter forsyner næste rejsende til Dublin med anmeldelser og information omkring restauranter, barer, attraktioner, events mm. Vi ønsker, at det skal være tidsbesparende og nemt af finde frem til lige præcis dét man søger. Målgruppeanalyse Dublins besøgende (turister), samt indbyggere der skal bruge vejledning. Til dem, som ikke har gjort sig overvejelser inden afrejse, og spontant skal bruge en hjælpende hånd til ønskede rejseformål. Side 4 af 30

5 Userstory Som turist vil jeg nemt kunne finde de ting som jeg skal besøge i Dublin Som besøgende skal det være nemt at søge efter et sted jeg gerne vil besøge, samt at navigere til stedet Som voksen besøgende ønsker jeg at høre andres meninger om stederne Som bruger af platformen er det vigtigt at jeg nemt kan tilgå de steder jeg tidligere har kigget på Persona - Karl G. Madsen Karl Gangsta Madsen er 62 år gammel, og underviser i dansk, historie, billedkunst og samfundsfag i udskolingen på Kongevejens Skole i Virum. Han er en flink mand, og de elever han er klasselærer for er alle meget glade for hans muntre tilgang til undervisningen. Hans fritid bruger han på meget forskelligt, han har nemlig ikke nogen faste hobbyer, men han elsker at tage toget ind til københavn og shoppe på strøget. Karl har også besøgt samtlige museer landet over, op til flere gange, han er nemlig stor fan af kunst fra romantikken. Nu hvor det snart er efterårsferie kunne han godt tænke sig at tage en tur til Dublin sammen med hans kone, for at opleve deres kultur, han vil gerne på museum og se mere kunst fra romantikken, men han vil også gerne udvide sin horisont og opleve alt muligt forskelligt i byen. Han har læst meget godt om byen, men kender ikke nogen som selv har været der, og ved derfor ikke helt hvilke steder han skal besøge. Karl har prøvet at google nogle seværdigheder og er da også fundet frem til nogle steder som han helt klart skal forbi, men han savner et større overblik som kan guide ham igennem hele processen og vise ham alle de muligheder byen tilbyder. Persona - Ole G Nielsen Ole G. Nielsen er en 21-årig skiltetekniker, normalt bor han i Randers hvor han er kendt for at have den hurtigste knallert i byen, mens han har studeret på Teknisk Skole Silkeborg de sidste 4 års tid, og er derfor lige blevet færdiguddannet. Han besøger sin mor hver anden uge, men Side 5 af 30

6 ellers er han altid på farten. Han har snart været til fest på alle natklubberne i Jylland, og søger derfor nye udfordringer. Nu hvor han er færdiguddannet vil han gerne ud og se verden mens han holder sabbatår. Han har allerede været i London, som var en fed oplevelse, dog fik han også besøgt enkelte steder som han syntes var ordentlig nedern. Han vil derfor gerne være sikker på at han kun besøger de seje steder når han skal til Dublin som næste stop. Ole er en festabe og han skal blot bruge vejvisning til den vildeste klub i byen, og så er han kørende for en aften, eller en weekend. Nu hvor han kun skal tilbringe 3 dage i Dublin, er det vigtigt at han bruger tiden optimalt og oplever de vildeste ting. Ole har ikke tid til at besøge kedelige museumer og gallerier, der er ikke tid til at se tilbage, for Ole lever i nu et. Han syntes det er rart hvis han kan se nogle andre menneskers bedømmelse af et produkt eller et sted før han selv tager derhen, men han har ikke planlagt turen, han tager det som det kommer. Side 6 af 30

7 Persona - Morten & Jeanette Andersen Jeanette og Morten er uadskillige kompagnoner, ikke nok med at de er i familie, så er de også bedste venner. Næsten hver dag når Morten har fri for skole, kommer hans Mor Jeanette og henter ham, og så tager de ellers på tur. Nogle gange tager de i BonBonland andre gange i tivoli, eller i zoo. Jeanette siger at Morten skal nyde at han ikke får særligt mange lektier for endnu, og at det er vigtigt at være barn en gang imellem det er også et motto hun selv lever efter. Nu hvor det snart er sommerferie skal de to på ferie til Dublin. Morten er enebarn, og hans far har for travlt med arbejdet, til at kunne tage med, derfor bliver det en mor-barn tur. Jeanette håber på at rejsen kan virke dannende med besøger på museumer og lignende, men de skal også opleve det som Morten syntes er sejt. Morten kunne personligt godt tænke sig at tage på en vandretur langs nogle af klipperne ved kysten, hvilket Jeanette er positivt stemt overfor. Turen skal planlægges godt hjemmefra, så de vil gerne have en nem måde at overskue alle de seværdigheder som de har planlagt hjemmefra, ligesom en kryds-af-liste. Side 7 af 30

8 Krav Vores site skal være overskuelig og give brugeren følelsen af, at de ikke skal overveje et valg. Som forklaret af Steve Krug, Don t make me think. Forstået sådan, at brugeren på ingen tid skal finde sit mål. Om det så er restauranter, begivenheder eller andet. Det skal være effektivt, så brugeren hurtigt opnår sin gevinst, of følelsen af Det her er noget der virker. På den måde kunne brugeren blive til en ofte besøgende, den tid personen er for at opleve Dublin. Det kunne også være en indbygger, der i weekenden kom tilbage til siden for at blive oplyst om aktiviteter. Uddybet af Krug, der forklarer - at når vi har fået noget til at fungere én gang, anvender vi samme metode igen. Tekst skal ikke være overvældende. Korte og gode beskrivelser af eksempelvis en restaurant. Ikke en hel roman om, hvorfor dette er en lækker mexicansk restaurant - men hvad der gør den god, og hvad den tilbyder. Herefter kan vi fokusere på billeder. Det kan fodre fantasien for hvor hyggelig aftenen kunne blive på lige dén restaurant. Anmeldelser (stjerner) Need-to-have Valuta omregner Need-to-have Search terms (sorter efter barer, restauranter, events mm.) Nice-to-have Sprog Need-to-have Slideshow til profiler (restauranter) Need-to-have Login Nice-to-have Favorit-marker Nice-to-have Mobiloptimering Nice-to-have Side 8 af 30

9 Design Indledende design (Rough) Front design Forsiden er det første som brugeren møder når de besøger siden, det er derfor vigtigt at de ikke blive skræmt væk af for mange indtryk. Samtidigt skal forsiden også give et overblik, man skal kunne finde det man søger uden at klikke rundt på alle undersiderne. Dette er især vigtigt når vi ikke har nogen søgefunktion. Øverst på siden har vi et stort banner-billede samt en header med ordene Udforsk den fantastiske by DUBLIN øverst har man en menu som linker til alle undersiderne. Hvis man scroller ned bliver man mødt af en række billeder som foreslår hver deres attraktion/restaurant/hotel. Side 9 af 30

10 Attractions profil Dette er en rough af hvordan siden for en seværdighed kan se ud. Primært er siden delt op i 3 rækker, hvoraf de 2 øverste er delt yderligere op i 2 spalter. De 3 rækker er delt således at det skaber en orden på siden, udtrykket bliver mere klart og det er nemmere at finde specifikke informationer. Dette er også noget vores designmål prøver at fremhæve. Vi gør især brug af gestalterne for lukkethed og alignment, dette gør vi med billeder, tabeller (charts), men også ved at give teksten tilpas margin. Det er værd at bemærke at billedet oppe i venstre hjørne er større end den informationsboks til højre for billedet, dette bryder op i billedet og gør det mindre kedeligt, samtidigt med at billedet kan vises i større opløsning. Øverst på alle sider har vi en lille Header, dette element går igen og viser hvor på siden man befinder sig og hvordan man kommer tilbage til forrige sider. Side 10 af 30

11 Hotels profil Hotelsiden ligner meget seværdighedssiden, der er dog nogle få ændringer i bunden af siden. Vi har med vilje holdt os til samme principper i designet, på denne måde kan brugeren nemt tilpasse sig de forskellige sider uden at det virker fremmed. Headeren kan stadig ses på toppen, dette bidrager også til en naturlig sammenhæng mellem siderne. Nederst på siden (dog over pristabellen) ser man hvilke facilities hotellet tilbyder, disse er keywords som Wi-Fi, Seaview, Breakfast og Pool. Side 11 af 30

12 Restaurant profil Restuarantsiden ligner meget seværdighedssiden og hotelsiden, der er dog nogle få ændringer i bunden af siden. Vi har med vilje holdt os til samme principper i designet, på denne måde kan brugeren nemt tilpasse sig de forskellige sider uden at det virker fremmed. Headeren kan stadig ses på toppen, dette bidrager også til en naturlig sammenhæng mellem siderne. Nederst på siden ser man til forskel fra de andre sider en tabel med åbeningstider for restuaranten. Side 12 af 30

13 Footer Vi har lavet nogle forskellige designs for at få forskellige indtryk og funktionalitet, og målt dem op mod hinanden. For at bestemme hvilken form for footer vi skulle have har vi at lave tre roughs for tre muligheder i følgende afsnit Valg af footer Footer 1 I denne footer har vi et logo i midten og et eventuelt firmanavn nedenunder. Til venstre er der kontaktinformationer og til højre er muligheden for at vælge sprog. Footer 2 Her ses kontaktinformationerne i midten af siden, mens logoet er rykket ud til venstre. Valg af sprog findes stadig ud i højre side. Footer 3 Her ses en simpel tekst med et eventuelt firmanavn Vi har valgt footer 1, da vi synes at den viser den vigtigste information på simpelst mulig måde. Side 13 af 30

14 Informationsdesign Vi har lavet et informationsdesign for at kunne holde styr på hvad der skal være på de forskellige sider. Brugergrænseflade (UI) I vores designs har vi prøvet at lavet det så simpelt som muligt men samtidigt fyldt med vigtige informationer. Vores navigation findes i toppen af siden. Der vil være overordnede emner der er mulige at trykke sig ind under. Det er lige til, og det kræver ingen tid at gennemskue vores system. Vi blandt andet lavet et slideshow med billeder på profil siderne samt en masse overall og vigtig data ved siden af slideshow. Ved at gøre dette følger vi Steve Krugs Fact of life om at folk ikke læser men scanner siden. Med sektionen af data gør vi det nemt for brugeren at scanne siden. Vi synes også, at det er vigtigt at brugeren kan læse om andre oplevelser på stedet, derfor har vi implementeret en sektion hvor man kan læse brugeranmeldelser fra TrustPilot. Side 14 af 30

15 Interaktionsdesign Her beskrives interaktionsmuligheder og opsætningen af disse. Brugeren kan navigere sig rundt på siden ved hjælp en menu øverst, med knapper til ønskede emne + samt en breadcrumb guide. Det er med til at give brugeren overblik, og en visuel repræsentation af, hvor brugeren befinder sig. Eksempel fra Google Drive Sidens feedback til brugeren kommer i form af animationer/farveskift af enten knapper eller eksempelvis vores slideshow. Eksempel fra W3Schools Siden indeholder ikke et hav af knapper, som skulle gøre det gennemskueligt at finde frem til det rigtige. Billede af menu Ikoner SIden benytter i enkelte sektioner ikoner for både visuelt design, men også som en hjælper til brugeren. Der er lavet stjerner til vores anmeldelser-sektioner, som er med til at vise i hvilken grad det bestemte emne er evalueret. Der findes også avatar på siden. Kommentarer går ikke kun under et brugernavn. Det vil vises et standard avatar, eller et selvvalgt profilbillede før navn. Det er med til at kommentarerne virker aktuelle og autentiske, end at brugeren tror det er en computer der har genereret feedback. Side 15 af 30

16 Skrifttypografi Typografierne er delt op sådan, at serif fonte (med fødder) er anvendt til overskrifter, da der er nok skærm pixels til at få detaljerne med, for layoutets skyld. Sans-serif (uden fødder) er brugt til vores brødtekst, indhold osv. For at det skal være nemmere at læse, siden at der er færre pixels til rådighed i de skriftstørrelser som vores tekster er skrevet i. Farver Siden er meget neutral, og har ikke et særligt farvetema. Dog har vi på forsiden et banner, med farven brun. Vi har valgt at lave banneret med den brune farve, da Dublin bestod af meget træinventar. I og med, at træ var foretrukne materiale - er træ et af de elementer som lagrer overnaturlige hændelser og indtryk. Irland er et land præget af overnaturlige folkesagn. Det brune banner skal give en følelse af autenticitet, og føle de gentagne spirituelle hændelser, som er en del af den irske historie... Side 16 af 30

17 Programmering Vi har i det følgende afsnit uddraget de mest væsentlige og interessante løsninger på elementer til vores side. I de følgende kode-eksempler er koden opdelt efter farver på følgende måde: HTML/PHP Grøn = Atributter Rød = HTML tag Hvid = Tekst eller start/slut af tag Gul = navngiver atributten JavaScript Blå = Funktioner, statements og loops Grøn = Variabel og funktion navne Lilla = Værdier (strings, ints, booleans) Rød = Operatorer (+ - / *) Hvid = Kommentarer og parenteser Gul = Deklaration af type (var, function) CSS Grøn = Atributter Rød = HTML tag Hvid = Symboler der fortæller computeren hvilke tags i html der skal ændres af CSS en, samt starter og ender CSS med akkolader (Tuborg-parenteser). Blå = Funktion eller deklaration af hvad funktion skal gøre Lilla = Definerer mængde eller farve PHP Blå = Funktioner Grøn = Variabel navne Hvid = Kommentarer og parenteser Lilla = Værdier (strings, ints, booleans) Side 17 af 30

18 Breadcrumbs Breadcrumbs gør at brugeren med færre klik kan finde netop det han eller hun søger. De viser i alt sin enkelthed strukturen på websitet, og derfor den hurtigste sti til siden du er på. For eksempel kan stien til et specifikt hotel i dublin være som følger: Dublin > Hoteller > Det specifikke hotel HTML < p > < a href ="#" >Dublin</ a > < span class ="break" >></ span > < a href ="#" >Hotels</ a > < span class ="break" >></ span > < a href ="#" >Jacob's Inn</ a > </ p > CSS.wrapper > p { margin-top : 1.5% ; margin-bottom : 1.5% ;.wrapper > p > a { text-decoration : none ; color : #000 ;.wrapper > p > a :hover { text-decoration : underline ;.wrapper.break { margin-left : 1.5% ; margin-right : 1.5% ; Output Side 18 af 30

19 Valutaomregner For at gøre siden mere tilgængelig over for alle, ikke mindst forskellige nationaliteter, vil vi gerne gøre det muligt at skifte mellem forskellige valutaer. Vi har udformet nogle krav til denne: 1. Valutakurser skal være præcise 2. Valutakurser skal altid være opdaterede 3. Brugeren skal kunne ændre hvilken valuta siden bruger 4. Alle priser på hjemmesiden skal omregnes når man bruger funktionen 5. Priserne skal være efterfulgt af en møntfod som ændres sammen med prisen For at gøre dette, har vi lavet php-script som kan hente valutakursen for Euro og Dollars direkte fra siden valutakurser.dk. Dette gøres ved brug af PHP s file_get_contents() som henter hele html-kilden. Dette bliver derefter delt op ved det ID som er unikt for den div der indeholder valutakurserne. Denne opdeling fungerer ved brug af explode() som deler en string ved en særlig kombination af tegn (en delimiter). Derefter bliver kommaer erstattet med punktummer, så det kan fungere som et tal i javascript. Til sidst bliver disse kurser gemt i hver deres var i JavaScript. Derudover skal alle priser være navngivet med en særlig class ( price ), mens møntfoden skal navngives med en anden class ( currency ). Derefter har vi lavet en dropdown-menu som styrer hvilken valuta der bliver vist. Hver knap i menuen har vi tilknyttet vores egen javascript funktion til via OnClick(). Denne funktion hedder changecurrency() og tager et argument. Vi har tildelt hver valuta en arbitrær numerisk værdi, det betyder at danske kroner (DKK) har værdien 1, amerikanske dollars (USD) har værdien 2, mens euros (EUR) har værdien 3. Hver valuta har altså en knap for sig selv i dropdown menuen, som kalder vores funktion changecurrency(x) hvor x er enten 1, 2 eller 3 alt efter hvilken valuta man vælger. changecurrency()-scriptet består af en lang række if-sætninger, først tjekkes der om de gemte valutakurser overhovedet er rigtige tal, dette gøres ved at sikre at booleanen isnan er falsk. Hvis tallet ikke bliver genkendt som et nummer, bliver værdien bare erstattet med en standard-værdi. Dette er mest en fejlsikring, da den metode vi loader kurserne ind på, er lidt sketchy og godt kan fucke op hvis html-strukturen på valutakurser.dk ændres. Derefter finder scriptet alle html-elemter som er tagget med enten price eller currency classen. Dette gøres med.getelementsbyclassname() samt et for-loop. Så bruger vi.innerhtml til at omregne alle disse til danske kroner (hvis de ikke allerede var), og derefter finder man ud af hvad de skal omregnes til, ved at kigge på det ene parameter som funktion har fået, dette parameter kaldes to. Eksemplet vist nedenunder et kun et lille uddrag af det lange script. Uddraget viser hvilke if-sætninger der ville være sandt hvis man konverterede fra dollars til euros. Kommentarerne i kode er altid skrevet i engelsk så projektet kan arbejdes videre på af andre, også hvis man arbejder på et internationalt team. Side 19 af 30

20 PHP <!--This PHP script scrapes the html content of valutakurser.dk and then breaks it down to find the specific exchange rate at time of visit on the site by looking for the unique styling of that div. Lastly commas are replaced by dots for it to work in javascript--> <?php $url = ' ; $content = file_get_contents ( $url ); $first_step = explode ( '<div id="usd" style="float:right; line-height: 33px; font-weight: bold; width: 120px; text-align: right;">', $content ); $second_step = explode ( "</div>", $first_step[1] ); $third_step = str_replace ( ',', '.', $second_step[0] ); <!--Same procedure for euros--> $first_step2 = explode ( '<div id="eur" style="float:right; line-height: 33px; font-weight: bold; width: 120px; text-align: right;">', $content ); $second_step2 = explode ( "</div>", $first_step2[1] ); $third_step2 = str_replace ( ',', '.', $second_step2[0] );?> HTML <!--Examples of prices, the number has to be tagged with the "price"-class and the currency in the "currency"-class. Prices need to be written with a default price as euros. --> < p >Price for Jacobs Inn pr day </ p >< span class ="price" >10</ span >< span class ="currency" > EUR</ span > < p >Price for Hotel Supreme pr day </ p >< span class ="price" >16</ span >< span class ="currency" > EUR</ span > < br > <!--A dropdown menu where conversions can be triggered from. The argument in the changecurrency()-function dictates what currency everything will be converted into. (1)=DKK, (2)=USD, (3)=EUR--> < div class ="dropdown" >< p >Choose Currency</ p > < div class ="dropdown-content" > < button onclick ="changecurrency(1)" >DKK</ button >< br > < button onclick ="changecurrency(2)" >USD</ button >< br > < button onclick ="changecurrency(3)" >EUR</ button > </ div > Javascript (Et uddrag af koden) var dollarprice ; //Exchange rate of currencies var europrice ; from = 3 ; //Default currency is Euros dollarprice = <?php echo $third_step?> / 100 ; europrice = <?php echo $third_step2?> / 100 ; Side 20 af 30

21 if ( isnan ( dollarprice ) == true ) { //If the price we found is Not a Number, we set it to a default value dollarprice = 6.33 ; if ( isnan ( europrice ) == true ) { europrice = 7.44 ; function changecurrency ( to ) { prices = document.getelementsbyclassname ( "price" ); //Find all price numbers currencytypes = document.getelementsbyclassname ( "currency" ); //Find all currency indicators (EUR, USD, DKK) if ( from == 2 ) //First convert to kroner { for ( var i = 0 ; i < prices. length ; i ++ ) { previousprice = prices[i]. innerhtml ; prices[i]. innerhtml = Math.round ( previousprice*dollarprice*10 ) /10 ; for ( var i = 0 ; i < currencytypes. length ; i ++ ) { currencytypes[i]. innerhtml = " DKK" ; // ---Some other if-statemens here--- if ( to == 3 ){ //Convert from DKK to EUR for ( var i = 0 ; i < prices. length ; i ++ ) { previousprice = prices[i]. innerhtml ; prices[i]. innerhtml = Math.round ( previousprice/europrice*10 ) /10 ; for ( var i = 0 ; i < currencytypes. length ; i ++ ) { currencytypes[i]. innerhtml = " EUR" ; from = to ; //Update what currency we are using for future conversions Output Side 21 af 30

22 Billede-slider 1 Vores billede-slider var nem for os at lave da vi tog udgangspunkt i W3Schools billede slider som er ret færdig fra starten. Vi har selv lavet den responsiv og mindre så vi kunne placere den hvor vi ville. Vi har også ændret effekten den laver når vi skifter slide. HTML < div class ="slideshowleft" > < div class ="slideshow-container" > < div class ="myslides fade" > < img src ="../media/jacobs_inn/1.jpg" style ="width:100%" > < div class ="text" >Beskrivelse</ div > </ div > < div class ="myslides fade" > < img src ="../media/jacobs_inn/2.jpg" style ="width:100%" > < div class ="text" >Caption Two</ div > </ div > < div class ="myslides fade" > < img src ="../media/jacobs_inn/3.jpg" style ="width:100%" > < div class ="text" >Caption Three</ div > </ div > < a class ="prev" onclick ="plusslides(-1)" > &#10094 ;</ a > < a class ="next" onclick ="plusslides(1)" > &#10095 ;</ a > </ div > </ div > CSS /*Slideshow start*/.myslides { display : none /* Slideshow container */.slideshow-container { max-width : 1000px ; position : relative ; margin : auto ; /* Next & previous buttons */.prev,.next { cursor : pointer ; position : absolute ; top : 50% ; width : auto ; padding : 16px ; margin-top : -22px ; color : white ; 1 Kan ses på følgende link Side 22 af 30

23 font-weight : bold ; font-size : 18px ; transition : 0.6s ease ; border-radius : 0 3px 3px 0 ; /* Position the "next button" to the right */. next { right : 0 ; border-radius : 3px 0 0 3px ; /* On hover, add a black background color with a little bit see-through */.prev : hover,.next : hover { background-color : rgba(0,0,0,0.8) ; /* Caption text */.text { color : #f2f2f2 ; font-size : 15px ; padding : 10px 12px ; position : absolute ; bottom : 0px ; width : 100% ; text-align : center ; background-color : rgba(0,0,0,0.5) ; /* The dots/bullets/indicators */.dot { cursor : pointer ; height : 13px ; width : 13px ; margin : 0 2px ; background-color : #bbb ; border-radius : 50% ; display : inline-block ; transition : background-color 0.6s ease ;.active,.dot : hover { background-color : # ; /* Fading animation */.fade { -webkit-animation-name : fade ; -webkit-animation-duration : 1.5s ; Side 23 af 30

24 animation-name : fade ; animation-duration : 1.5s fade { from { opacity :.4 to { opacity : fade { from { opacity :.4 to { opacity : 1 /* makes font-size larger on smaller screens only screen and ( max-width : 300px ) {.prev,.next,.text { font-size : 11px /*Slideshow End*/ JavaScript var slideindex = 1 ; showslides ( slideindex ); function plusslides ( n ) { showslides ( slideindex += n ); function currentslide ( n ) { showslides ( slideindex = n ); function showslides ( n ) { var i ; var slides = document.getelementsbyclassname ( "myslides" ); var dots = document.getelementsbyclassname ( "dot" ); if ( n > slides. length ) { slideindex = 1 if ( n < 1 ) { slideindex = slides. length for ( i = 0 ; i < slides. length ; i ++ ) { slides[i]. style. display = "none" ; for ( i = 0 ; i < dots. length ; i ++ ) { dots[i]. classname = dots[i]. classname. replace ( " active", "" ); slides [ slideindex - 1 ]. style. display = "block" ; dots [ slideindex - 1 ]. classname += " active" ; Output Side 24 af 30

25 Side 25 af 30

26 Rating Denne funktion gør at man kan holde over det antal stjerner man vil vælge. Vi har dog ikke nået at lave backend delen så man kunne gemme og poste sin anmeldelse. Ideen har vi indikeret ved at beholde funktionen samt en tekstboks hvor man kan knytte en kommentar til sin anmeldelse. Rating-systemet bliver også brugt til at tage gennemsnittet af folks anmeldelse og placere i toppen af siderne så brugeren kan se hvad andre synes om stedet. Vi har i CSS en også brugt bidi-override og direction rtl til at bytte om på alle tegn. Dette er for at lave et system der kan overrule den originale baggrundsfarve som er gennemsigtig og erstatte med gul for at indikere det antal stjerner du vælger. HTML < div class ="ratingbox" > < div class ="rating" > < span class ="ratings" > </ span > < span class ="ratings" > </ span > < span class ="ratings" > </ span > < span class ="ratings" > </ span > < span class ="ratings" > </ span > </ div > </ div > CSS.ratingbox { width : 100% ; display : block ;.rating { unicode-bidi : bidi-override ; direction : rtl ; float : left ; margin-top : 1% ; margin-bottom : 1% ;.rating > span.ratings { display : inline-block ; position : relative ; width : 1.1em ;.rating > span.ratings : hover : before,. rating > span.ratings : hover ~ span :before { content : "\2605" ; position : absolute ; color : #f1c40f ;.rating > span.test : before { Side 26 af 30

27 content : "\2605" ; position : absolute ; color : #f1c40 f; Output Side 27 af 30

28 Mobil menu HTML < div class ="mobilemenu" onclick ="menufunction()" > </ div > < div id ="menudiv" > < ul > < li >< a href ="attractions.html" >Attraktioner</ a ></ li > < li >< a href ="resturants.html" >Resturanter</ a ></ li > < li >< a href ="hotels.html" >Hoteller</ a ></ li > < li >< a href ="error.html" >Søg</ a ></ li > < li >< a href ="error.html" >Login</ a ></ li > < li >< a href ="error.html ">Hjerte</ a ></ li > </ ul > </ div > CSS div. mobilemenu { display : none ; float : right ; position : absolute ; top : 1.5em ; right : 1em ; font-size : 2.5em ; line-height : 0 ; z-index : 100 ; #menudiv { display : none ; position : absolute ; top : 7em ; width : 100% ; text-align : center ; background-color : #ecf0f1 ; z-index : 10 ; padding-top : 2% ; padding-bottom : 2% ; #menudiv ul { list-style-type : none ; padding : 0 ; margin : 0 ; #menudiv ul li a { text-decoration : none ; color : #000 ; #menudiv ul li a : hover { Side 28 af 30

29 text-decoration : underline only screen and ( max-width : 480px ) { a. logo { width : 100% ; div. mobilemenu { display : block ; Javascript function menufunction () { var x = document.getelementbyid ( "menudiv" ); if ( x. style.display === "block" ) { x. style.display = "none" ; else { x. style.display = "block" ; Output Side 29 af 30

30 Afprøvning Rolf-Molich Test Som forberedelse på en Rolf-Molich test har vi udformet en række spørgsmål som kan få gang i testpersonen. 1. Find et hotel på siden. 2. Hvor meget koster en enkelt overnatning på hotellet? 3. Hvor meget koster overnatning for 4 personer i USD? 4. Find en seværdighed du kan komme ud og se om mandagen, find deres telefon nr. 5. Find Guinness og se hvad det koster at komme ind DKK. 6. Find tilbage til det første hotel du så på. 7. Læs en anmeldelse af The Hairy Lemon. 8. Skift sprog på siden til engelsk 9. Find ud af hvordan man kommer til The Hairy Lemon. 10. Hvad mangler der på siden? Som evaluering af testen har vi, istedet for en videooptagelse, siddet ved siden at testpersonen og skrevet ned hvad de tænker højt. Bagefter har vi så ryddet op i det og nået frem til nogle brugbare punkter. Konklusion af test Testen var yderst vellykket; vi har skrevet følgende som noter: - Design er godt. Skaber overblik, virker proffesionelt. - Forsiden og førstehåndsindtryk: ser proffesionelt ud - Havde let ved at løse opgaverne - Syntes det virker lidt utroværdigt med kun 1 anmeldelse. (ønsker mere indhold) - Det er godt at man hurtigt kan se hvilke faciliteter et hotel har - Opdager hurtigt de forskellige features: Stjerne-ratings, slideshow, prisberegneren. - Opdagede at man kunne klikke på adressen for at finde maps til stedet - Det er nemt at finde tilbage til de andre sider man har været på - Det er godt at hoteller/restauranter/attraktioner er på samme side, istedet for hver deres underside - Syntes det er en god engelsk oversættelse. Giver igen indtryk af noget professionelt. - Det er meget nemt at finde vej på siden. Testpersonen havde følgende ting som vi burde tage op til overvejelse - En hover-effekt ved links til adresser, så man kan se at de kan klikkes og vise vej. - Overvej om oversættelses dropdown-menuen skal flyttes, eventuelt til toppen, så man finder den med det samme hvis man ønsker det. Vi har derfor forbedret siden testen, vi har tilføjet en hover-effekt til addresse links. Vi har dog valgt ikke at flytte oversættelses-dropdown-menuen, da dette ville kræve større overvejelser eventuelt med flere roughs og løsningsforslag. Da vi ikke har så meget tid igen, har vi derfor nedprioriteret dette, det betyder dog ikke vi er uenige med testpersonen. Side 30 af 30