Toelichting functioneel ontwerp Een functioneel ontwerp wordt gebruikt door ontwerpers en ontwikkelaars om overzicht te bieden aan de uit te voeren werkzaamheden. Op basis van het functioneel ontwerp is een planning gemaakt die aan het einde van dit document te vinden is. Belangerijk: een functioneel ontwerp is niet bedoeld als weergave voor uit eindelijk ontwerp, maar slechts een schematische weergave van de inhoud. Termen en afkortingen referentie Indien je een onbekende term of afkorting tegenkomt met een getal erbij, dan kun je de uitleg daavan vinden aan het einde van dit document. Versie 1.0 1
Schematisch overzicht De website zal bestaan uit drie pagina s waaronder de verschillende indelingen van content gemaakt zullen worden. Over de Ontdekkng Contact Versie 1.0 2
De pagina die de gebruiker als eerste te zien zal krijgen bevat de volgende onderdelen: 1 LOGO Over de Ontdekking Contact 1 Logo en hoofdmenu om te navigeren. Het hoofdmenu bevat de verwijzingen naar de pagina s (, Over de Ontdekking, Contact). 2 De landenkiezer 3 Extra call to action met impressies van winkel en link Over de Ontdekking. 4 Overzichte met visuele informatie pakketjes 5 Knoppen om de website te spreiden (facebook, twitter, hyves en email) 2 Landenkiezer 4 3 Winkel Over de Ontdekking 5 F T H E Versie 1.0 3
Landenkiezer Met de landenkiezer kan een gebruiker een land uit kiezen om informatie over te weergeven, of op basis van bestemmingsvoorkeuren van de gebruiker, kan de landenkiezer advies voor bestemmingen uitbrengen. 1 2 Bestemmingskiezer Bestemmingskiezer 3 Bestemmingskiezer 1 Bestemmingskiezer in normale status. 2 Indien de gebruiker klikt op kies een bestemming, dan zal er een lijst met bestemmingen verschijnen om een keuze te maken. 3 Indien de gebruiker kiest voor keuze hulp, dan zullen er opties weergeven worden om voorkeuren voor bestemmingen te defineren. 4 De geadviseerde bestemmingen zullen verschijnen in de bestemmingslijst. 4 Kies een bestemming Bestemmingskiezer Kies een bestemming Keuzehulp nodig? Kies een bestemming Keuzehulp nodig? Amsterdam Aukland Beiroet Belgrado Boedapest Bombay Boston Kies een bestemming Keuzehulp nodig? Ik Amsterdam wil Ver Aukland weg Beiroet dichtbij Belgrado Boedapest warm Bombay weer zacht Bostonweer Actief Ontspannen Ontdekken Filter bestemmingen Sluit keuzenhulp Beiroet Belgrado Versie 1.0 4
Call to action Op de home pagina zal een vaste ruimte beschikbaar zijn waarin actie matig toeglicht kan worden waarom naar de Ontdekking te komen en waarin impressies getoont kunnen worden. 1 Ruimte voor kleine impressies 2 Knop die verwijst naar de pagina met meer informatie over de winkel. De winkel 1 2 Over de Ontdekking Versie 1.0 5
Visuele informatie pakketjes (1/2) Visuele Informatie pakketjes zjn compacte visualisaties van live data. Deze worden gekoppeld met de live data van een bestemming d.m.v. het gebruik van beschikbare API s (1). LOGO Over de Ontdekking Contact 1 De lokale tijd van de gekozen bestemming zal weergegeven worden. 2 Huidige met de tempratuur in celsius en een graphic die het type weer visualiseerd (zonnig, regen, sneeuw, etc). Daarnaast word de optie aangeboden om het gemmidelde weer in een bepaalde maand te zien, indien de bezoeker in de toekomst de bestemming wilt bezoeken. 3 Er zal visueel getoont worden welk bijpassend product(en) in de winkel te verkrijgen is. Het invoeren hiervan kan gedaan worden in het CMS (2) waarbij merk (bijv. lonely planet) gekoppelt kan worden met een bestemming. Op basis van die koppeling zal op de website een afbeelding (of meerdere) gegenereerd worden waarbij bestemming en merk (bjv. lonely planet) op een boek cover getoont word. 4 Een digitaal woordenboek waarbij gebruikt gemaakt word van de Google Translate API (1) (57 talen beschikbaar). Bestemming Winkel Over de Ontdekking 1 Lissabon 4 5 Goedenmiddag! Boa tarde! 2 35 C 17 / 03 / 2011 Vandaag in de winkel: Er kwam een klant die jarenlang voor zijn werk in Lissabon heeft gewoont. Na 25 besloot hij... - Frans 3 lonely planet Lissabon F T H E Versie 1.0 6
Visuele informatie pakketjes (2/2) 5 Blogpost / berichten LOGO Over de Ontdekking Contact Standaard word er altijd de meest recente blogpost (3) weergeven als onderdeel van de visuele informatie pakketjes. Indien er een bericht is geschreven in de afgelopen 6 maanden die getagged (4) is met een bestemming die gekozen is, dan zal deze op de plek getoont worden. Bestemmingskiezer 1 Lissabon 2 35 C 3 lonely planet Lissabon Indien er meerdere berichten zijn getagged (4) met de gekozen bestemming, dan wordt alleen de meest recente getoont. Ten alle tijden zal een blogpost (3) die tussen de Visuele informatie pakketjes staan een link bevatten naar het volledige archief. Winkel 4 5 Goedenmiddag! Boa tarde! 17 / 03 / 2011 Vandaag in de winkel: Er kwam een klant die jarenlang voor zijn werk in Lissabon heeft gewoont. Na 25 besloot hij... - Frans Indien de blogpos (3) te lang wordt, dan word de tekst automatisch afgesneden en komt er een link bij die de gebruiker naar het uitgebreide blogpost kan sturen (die zich bevind op de pagina over de ontdekking). Over de Ontdekking F T H E Versie 1.0 7
Spreiden Voor het delen van de website wordt gebruik gemaakt van de bestaande, meest bekende sociale netwerken. Op de website worden toepassingen geinstalleerd waarmee het delen voor gebruikers van sociale netwerken snel uitgevoerd kan worden. Tevens kan het delen ook door het gebruik van een email toepassing op de site. 1 Deel procces via Facebook, twitter en Hyves. 2 Deel procces via email toepassing. 1 2 F / T / H Inloggen netwerk Gegevens invullen Toestemming geven Verzenden E Delen Versie 1.0 8
Over de Ontdekking Deze pagina zal enkel en alleen het doel hebben mensen zo helder en kort mogelijk te informeren en impressies te geven om ze naar de winkel te brengen. LOGO Over de Ontdekking Contact 1 De locatie van de Ontdekking zal getoont worden op een kaart. Hiervoor wordt de Google Maps API (2) gebruikt (i.v.m. de rijke opties die het geeft). Een bijhorende knop zal een volledige weergave van de kaart tonen in Google Maps. Hierin kan de gebruiker zijn route nader bepalen. Route 1 Toon volledige kaart 2 2 Fotomateriaal op groot formaat zal er voor dienen om impressies van de winkel over te brengen Openingstijden 3 3 Een korte stuk tekst zal op een staccato wijze uitleg geven over de winkel. 4 Overzicht van geposte blogs op datum en titel met daarnaast weergaves van de blogposts (3) Blogarchief 4 Blog F T H E Versie 1.0 9
Contact (1/2) Deze pagina zal op directe wijze de mogelijkheden weergeven voor het contacteren en bereiken van de ontdekking. LOGO Over de Ontdekking Contact 1 De locatie van de Ontdekking zal getoont worden op een kaart. Hiervoor wordt de Google Maps API (2) gebruikt (i.v.m. de rijke opties die het geeft). Een bijhorende knop zal een volledige weergave van de kaart tonen in Google Maps. Hierin kan de gebruiker zijn route nader bepalen. 2 Een email formulier met 5 vragen, waarvan 3 verplicht zijn. Route 1 Toon volledige kaart Algemene contact informatie 2 Naam* Email* Telefoon Bericht* De heer Mevrouw Verstuur *Verlichte velden F T H E Versie 1.0 10
Contact (2/2) Indien het bericht niet verstuurt kan worden door het ontbreken van een verplicht veld of door een foutief email adres, dan zal een melding verschijnen om de gebruiker te attenderen. LOGO Over de Ontdekking Contact Route De heer Mevrouw Naam* Johannes Email* Toon volledige kaart Algemene contact informatie Telefoon Bericht* Hallo! Verkopen jullie ook de Lonely Planet van Brussel? Groet, Johannes Verstuur Er ging iets mis, uw adres klop niet *Verlichte velden F T H E Versie 1.0 11
Alternatieve content Dit is de informatie die getoont wordt als het systeem van de gebruikt plugins (5) heeft uitgeschakelt of niet geinstalleerd. LOGO Er word een melding gemaakt om de gebruiker te attenderen deze te activeren of te installeren (met uitleg). informatiemelding Download plugin Versie 1.0 12
Error 404 Een error404 is de benaming voor de pagina die weergegeven wordt zodra een gebruiker een tikfout in het adres maakt na het adres zelf. Bijvoorbeeld: LOGO www.deontdekking.info/voorbeeldfout Hierbij verwijst de browser van de gebruiker wel naar de website van de Ontdekking, maar weergeeft een foutmelding omdat voorbeeldfout niet achter het adres hoort te staan. De gebruiker krijgt in dat geval een knop met de optie om naar het juiste adres te gaan. informatiemelding naar de website Versie 1.0 13
Termen en afkortingen 1 CMS Staat voor content management systeem. Dit is de naam voor de schermen waarin de beheerder van de website, op eenvoudige wijze zelf content kan schrijven / beheren. 2 API Staat voor application programming interface en word door ontwikkelaars gebruikt om bepaalde bestaande / live in een eigen gecreeerde omgeving te tonen. 3 Blogpost De benaming voor een gepubliseerd bericht op een blog. 4 Taggen (getagged) In dit geval: een bericht een registratie kenmerk geven. Het kenmerkje word gebruikt om te sorteren en om koppelingen kunnen maken, 5 Plugins Invoegtoepassingen op het systeem van de gebruiker om interactieve content mee te tonen Versie 1.0 14
Technische speceficaties De volgende eisen zullen van toepassing zijn op de technische ontwikkeling: A B C D E Resolutie Minimaal toonbaar op 1024 x 728 Browser ondersteuning Microsoft Internet Explorer 7.0 + Mozilla Firefox 3.0 + (MAC / PC) Google Chrome 5.0 + (MAC / PC) Opera 9+ Apple Safari 3.0+ Plugins Adobe Flash Player 10.0 Javascript (wordt gebruikt door 98.2% van de gebruikers volgens Adobe, september 2010) Mobiel / geen plugins Alternatieve content toonbaar Statestieken Statestieken zullen gemeten en gerapporteerd worden met Google Analytics Versie 1.0 15
Planning A B C E F G H I J K Funtionele speceficaties Zaterdag 11 december Start design / start opbouwen backend ontwikkeling Zondag 12 december Presentatie homepage design Zondag 9 januari impementatie design homepage Zondag 9 januari Presentatie achterliggende pagina s Zaterdag 22 januari Verder implementatie en doorontwikkeling website Zaterdag 22 januari Copy voorstaal Zondag 6 februari Presentatie demo model 27 februari Testfase en hosting server toepassingen installeren 27 februari Oplevering en livegang 12 maart Versie 1.0 16