Webbteknik II - 1DV449 Laboration 3

Transkript

1 Webbteknik II - 1DV449 Laboration 3 Responsiv webbklient John Häggerud john.haggerud@lnu.se Johan Leitet johan.leitet@lnu.se December 2012 Inledning Det är nu dags att använda ditt, i förra laborationen, skrivna API och bygga en klient. Klienten ska vara en så kallad singlepage application ( och ska därför inte göra andra anropa än asynkrona ( d.v.s. ingen sidomladdningar). Tanken är också att ni ska använda teorierna kring responsiv design och få bekanta er med JavaScript-API:et till Google maps (eller någon likvärdig karttjänst). Uppgift 1 - Singlepage applikation 1.1 Uppgiften Du har nu fått i uppdrag att presentera den data du skrapat och som nu finns tillgängligt via ditt RESTful-API. Detta ska göras på ett modernt sätt så att informationen kan beskådas flertalet enheter, d.v.s. stödjer sig på tankarna om responsiv design. Nedan ser du en enkel mockup som beskriver din applikation i stora drag (se BILD 1.1). Webbapplikationen ska ha en meny med 4-6 länkar samt en inloggningskontroll lagd till höger (som bilden). Du behöver inte implementera någon funktion för inloggning men formuläret ska ligga så som det gör på mockupbilden. Du får dock komma på någon lösning där menyn ser bra ut för mindre skärmar. Det får inte ske att länkar

2 försvinner för de med mindre skärmar och att man får scrolla i sidled utan vi ska försöka få designen responsiv när det gäller menyn. Det är dock upp till dig hur du löser det. BILD Enkel mockup över sidan med meny, tile-mönster med ett urval av producenter samt en lista med alla producenter. Producenterna, och länkarna till deras informationsrutor presenteras i desktop-läge som i mockupen med sex stycken producenter i ett tile-mönster med klickbara knappar samt en lista med alla producenter i botten av sidan. Extra plus till den som löser detta med paging men det är inget krav för godkänt på laborationen. När användaren klickar på antingen en knapp (producenterna i tile-mönstret) eller på en länk i listan över alla producenter ska en informationsruta över den producenten komma upp. Se bild 1.2. Observera att i mockupen stämmer inte namn och bild överens vilket det bör göra i din slutliga version. Informationsrutan ska visa upp den information som finns om varje producent samt en kartbild hämtad från googlemaps där producentens position

3 ska vara utplacerad med en så kallad marker (se bild). Hur du väljer att presentera denna information är upp till dig så länge det är snyggt och subtilt. Det kan vara som en popup, animerad div eller vad du tycker blir bra och snyggt. Viktigt är dock att den ska synas bra även i mindre skärmar och att man ska kunna stänga den för att komma tillbaka till orginalläge i applikationen. BILD Förslag på en informationsruta för varje vald producent 1.2 Val av teknik Till klientapplikationen ska HTML och JavaScript användas för att hämta information via AJAX-anrop från ditt i laboration 2 skapade API. 1.3 Krav för uppgift 1 Du ska skriva en klientapplikation i HTML och JavaScript som endast använder sig av asynkrona anrop för att uppdateras. Du ska använda ditt i laboration 2 skapade Webb-API för att hämta ut information Du ska ha en responsiv design och kunna motivera dina val för hur du väljer att lösa det. Du ska försöka implementera applikationen så den stödjer den mockup som du hittar i Bild 1.1 och bild 1.2. Du ska använda något kart-api, förslagsvis google maps för att visa producenternas position. Applikationen ska vara buggfri och ha en responsiv design.

4 1.4 Att reflektera kring Vilka delar har du implementerat som gör din applikation till responsiv? Hur tänker du kring bilder i en design som är tänkt till en mobiltelefon? Hur påverkas detta av high-dpiskärmar (retina). 1.5 Tips och studiematerial - All dokumentation till hur du implemnterar Google Maps Inspelade demo-exemplen på kursens hemsida. Är man intresserad kan man kolla upp om det finns några CSS-ramverk som kan underlätta din responsiva design Uppgift 2 - Två nya producenter

5 2.1 Uppgiften Vi har ju nu jobbat i tre laborationer med samma data. I första laborationen skrapade vi den och kombinerade ihop data ifrån ett excel-dokument. I laboration 2 lade du denna information i en databas och byggde ett API runt detta och detta API använder du i klienten ovan. Tanken är nu att vi ska testa hela kedjan och se om dina script och lösningar är så generellt skrivna som vi hoppas. Det har nu tillkommit två nya producenter i HTML-sidan och i postions-excelfilen. 2.2 Krav för uppgift 2 Listan på adressen: är en uppdaterad variant med två nya producenter. Det finns också en uppdaterad positionsfil på adressen: Använd denna lista tillsammans med den nya positioneringsfilen som finns att ladda ner på kurshemsidan. Kombinera åter igen ihop datan och skjut in den i din databas. Kontrollera att din webbklient i slutändan även presenterar de två nya klienterna Du är nu klar med laborationskursen för godkänd nivå! Till denna laboration finns inga direkta extrauppgifter utan vi lägg istället krut på att göra en så bra klientimplementation som möjligt.