Functioneel Ontwerp. digital4u.nl effectief op internet. Klant. Digitale Vaardigheden. Project. Website. April Datum

Functioneel Ontwerp Klant

Digitale Vaardigheden

Project

Website

Datum

April 2013

digital4u.nl effectief op internet

2

Digitale Vaardigheden Inhoudsopgave 3

Introductie Functioneel Ontwerp

4

Homepagina

6

Header, Sidebar

7

Video, Testimonials

8

Nieuwsarchief

10

Werkgevers

11

Veelgestelde vragen, Zoekresultaten

13

Werknemers, Onderwijs

14

Agenda

16

Examenlocaties

18

Contact

19

DQ Test

21

Nieuwsbrief

22

Gebruikte plugins

www.digital4u.nl | telefoon: 0223 746030 | [email protected]

3

Functioneel Ontwerp Introductie Het Functioneel Ontwerp (F.O.) is de blauwdruk van uw website. In het F.O. staan de functionaliteiten van de website beschreven. Het F.O. is zeer belangrijk om het ontwikkelproces efficiënt te laten verlopen en eventuele misverstanden ten aanzien van de gewenste functionaliteiten zoveel mogelijk te voorkomen. Het maakt ook het testproces eenvoudiger. In dit F.O. is verder de volgende informatie opgenomen:

Schematisch overzicht van diverse soorten pagina’s (wireframe), zoals: homepagina, algemene tekstpagina; Beschrijving op voldoende detailniveau van de functionaliteiten per paginasoort, zodat het voor zowel u als onze ontwikkelaars duidelijk is wat de functionaliteiten inhouden; Schematisch stroomschema (flowchart); Navigatie binnen de website; Breadcrumbs (kruimelpad); Pagina ontwerp & belangrijke pagina elementen; Social media;

Controle van dit document Wij vragen u dit document nauwkeurig door te lezen. Hierna worden in overleg eventueel gewenste wijzigingen door Digital4u doorgevoerd. Na goedkeuring van het definitieve F.O. start Digital4u met de ontwikkeling van het project.



4

Homepagina De homepagina bestaat uit de volgende belangrijke elementen: Menu Hoofd-navigatie van de website; Header Header met 3 links naar hoofd pagina’s; Content homepagina Content van de homepagina. Met links naar belangrijke pagina’s en actueel nieuws zoals agenda items, laatste nieuwsberichten; Testimonials Testimonials van partners;

Top In de top is de volgende informatie altijd te vinden: • Logo (link naar pop-up video); • Submenu; • Social Media links; • Zoekfunctie; Footer In de footer is de volgende informatie altijd te vinden: • Contactgegevens; • Links; • Social Media links; • Nieuwsbrief aanmeldings formulier; • Twitterfeed;


Homepagina



6

Header De header op de homepagina werkt als volgt: Wanneer een bezoeker met de muis over de blokjes van de header heen gaat lichten ze op, tegelijkertijd veranderd de foto en de omschrijving. Wanneer de bezoeker vervolgens klikt op de titel (of de foto) wordt deze doorverwezen naar de pagina die aan deze slide gelinkt staat. Een slide heeft de volgende inhoud: • Een titel; • Een omschrijving; • Een foto; • Een link Maximaal 3 slides zijn tegelijkertijd mogelijk.

Informatie Sidebar

De meeste subpagina’s in de website hebben rechts en/of links naast de algemene content van de pagina een “sidebar”. Dit is een ruimte aan de zijkant van de pagina waar belangrijke, interessante of nuttige informatie geplaatst kan worden door middel van “widgets”. Bij het aanmaken van een pagina zijn de volgende sidebar instellingen mogelijk: • Sidebar links • Sidebar rechts • Sidebar rechts & links


Informatie

7

Video

Op de homepagina bevindt zich een informatieve (YouTube) video. Zodra de bezoeker de video afspeelt, zal deze full-screen getoond worden en afspelen.

Informatie Testimonials

Onderaan de homepagina worden testimonials van partners getoond. Een testimonial bevat: • • • •

Een afbeelding; Een naam; Een titel/functie; Een (korte) tekst;

Wanneer de bezoeker met de muis over de foto’s heen gaat wordt de bijbehorende quote/testimonial getoond. Plugin: Testimonial Rotator

Informatie Uitklapmenu

Wanneer pagina’s in het navigatie menu subpagina’s bevatten wordt automatisch altijd een uitklapmenu getoond.



8

Nieuwsarchief Kruimelpad: Home > Nieuws Het nieuwsarchief toont standaard de laatst geplaatste nieuwsberichten. In het archief worden de berichten getoond met een korte samenvatting en een afbeelding. Met de nieuwsarchief-widget kunnen de berichten per maand gefilterd worden. Wanneer bijvoorbeeld “maart 2013” geselecteerd is, worden alleen de berichten uit deze maand getoond. Berichten: • ...kunnen geplaatst worden door verschillende gebruikers; • ...kunnen gecategoriseerd worden in categorieën Paginatie In het voorbeeld hiernaast worden per pagina 6 nieuwsberichten getoond, door middel van de paginatie onderaan kan door het gehele archief gebladerd worden.

Digitale Vaardigheden Enkel nieuwsbericht Kruimelpad: Home > Nieuws > Nieuwsbericht De detailpagina van een nieuwsbericht. Hier word de hele inhoud van het nieuwsbericht getoond. Klikken op de foto opent een lightbox met de vergrootte afbeelding. Met de volgende/vorige links onderaan kun je gemakkelijk het vorige of volgende bericht lezen.


Nieuwsarchief ‘Maart 2013”



10

Werkgevers Kruimelpad: Home > Werkgevers De introductiepagina voor de hoofdpagina Werkgevers. De pagina kan gevuld worden met alle gewenste content zoals tekst en afbeeldingen. Sidebar Deze soort pagina heeft standaard aan de linker- en rechterkant een sidebar. De linkerkant bevat de widgets: • Submenu items van “Werkgevers” • Projectleider informatie

Digitale Vaardigheden Subpagina Kruimelpad: Home > Werkgevers > subpagina Een subpagina van de hoofdpagina “Werkgevers”. De inhoud van de pagina kan gevuld worden met alle gewenste content. Sidebar De linker sidebar is hetzelfde als de hoofdpagina “Werkgevers”.



11

Veelgestelde vragen Kruimelpad: Home > Werkgevers > Veelgestelde vragen De subpagina “Veelgestelde vragen” onder de hoofdpagina “Werkgevers”. Vragen kunnen onderverdeeld worden in categorieën (bijv: “Werkgevers”, “Onderwijs”, etc.). Zo kunnen onder een hoofdpagina alleen vragen getoond worden die betrekking hebben op dat onderwerp. Plugin: WP Super FAQ

Digitale Vaardigheden Zoekresultaten Kruimelpad: Home > Zoek resultaten... De resultaten pagina wanneer een zoekopdracht via het zoek formulier is gegeven. Samenvatting Resultaten worden getoond als samenvatting (titel + pagina/bericht inhoud). Wanneer er een afbeelding beschikbaar is, word deze getoond. Indien er geen afbeelding in de pagina zit, word er ook geen afbeelding getoond.


Voorbeeld introductiepagina “Werkgevers”



13

Werknemers Kruimelpad: Home > Werknemers De introductiepagina voor de hoofdpagina “Werknemers”. Bovenaan de tekst staat vast het blok “Werknemers”. Daaronder kan de pagina gevuld worden met alle gewenste content. Sidebar Deze pagina heeft standaard aan de linker- en rechterkant een sidebar. De linkerkant bevat twee widgets: • Submenu items van “Werknemers” • Projectleider informatie

Digitale Vaardigheden Onderwijs Kruimelpad: Home > Onderwijs De introductiepagina voor de hoofdpagina Onderwijs. Bovenaan de tekst staat vast het blok “Onderwijs”. Daaronder kan de pagina gevuld worden met alle gewenste content. Sidebar Deze pagina heeft standaard aan de linker- en rechterkant een sidebar. De linkerkant bevat twee widgets: • Submenu items van “Onderwijs” • Projectleider informatie



14

Agenda Kruimelpad: Home > Agenda Standaard toont de agenda een maandweergave. De huidige maand word standaard direct geladen. Datum Linksboven kan de gewenste datum (maand + jaar) geselecteerd worden. Hover Wanneer je met de muis over een agenda-item beweegt komt er een pop-up naar voor. Klikken op het item opent het agenda item in een nieuw pagina (zie hieronder). Plugin: The Events Calendar

Digitale Vaardigheden Agenda detail pagina Kruimelpad: Home > Agenda > ... Voorbeeld detail pagina van een agenda-punt. Zet in mijn agenda Bezoekers kunnen het agendapunt in hun eigen digitale agenda importeren met de button rechstboven.


Agenda maandweergave



16

Examenlocaties Kruimelpad: Home > Examenlocaties De pagina waar de bezoeker kan zoeken naar examenlocaties in zijn of haar buurt. Zoeken Via het zoekformulier kan gezocht worden door middel van de postcode.

Digitale Vaardigheden Zoekresultaten Kruimelpad: Home > Examenlocaties Zoekresultaten worden zowel in lijstweergave (sidebar) getoond, als ook in de kaart zelf. Details Klikken op een resultaat opent meer details over de vestiging.


Examenlocaties zoekresultaten



18

Contact Kruimelpad: Home > Contact De contactpagina toont alle mogelijkheiden om in contact te komen, namelijk: Contactformulier E-mail formulier. Contactegevens Naast het formulier worden contactgegevens getoond. Deze gegevens kunnen als vcard aan het digitale adresboek van een bezoeker toegevoegd worden met de link “Zet in mijn adresboek”.



19

DQ test Kruimelpad: Home > DQ test Introductiepagina van de DQ test. Met bijvoorbeeld informatie over de test. Deze introductie kan naar wens gevuld worden met gewenste content. De button “Start de test” start de test en verwijst direct door naar de eerste stap. Plugin: WP Pro Quiz

Digitale Vaardigheden DQ test vraag Kruimelpad: Home > DQ test > ... Voorbeeld van een vraag. De bovengenoemde plugin biedt verder o.a. de volgende mogelijheden voor het maken van vragen: • Te verdienen punten per vraag instellen; • Multiple/ single choice; • Open vragen; • Tijdslimiet; • Hints per vraag instellen; • Afbeeldingen in vragen en antwoorden; • Correct/incorrect melding bij elke vraag instellen;



20

DQ test resultaat Kruimelpad: Home > DQ test > ... Resultaten pagina van de test. De pagina toont het behaald aantal punten en een score-percentage. Optioneel is het laten zien van best behaalde scores. Bezoekers kunnen er dan uiteindelijk voor kiezen om hun eigen score ook te delen in de lijst van best behaalde scores.



21

Nieuwsbrief Nieuwsbrief welke klanten kunnen ontvangen wanneer zijn geabonneerd zijn. De nieuwsbrief bestaat uit de volgende stukken: Header Header afbeelding. Hier kan het logo in geplaatst worden, maar ook bijvoorbeeld gecombineerd met een uitgelicht onderwerp (in het voorbeeld de DQ test). Algemene tekst Deze tekst kan gevuld worden met alle gewenste content zoals tekst, afbeeldingen, links, etc. Nieuwsberichten Nieuwsberichten kunnen geselecteerd worden om in de nieuwsbrief te tonen. Nieuwsberichten tonen een stukje tekst met een lees verder-link welke linkt naar het volledige bericht op de website. Footer Footer met social media links en contactgegevens. Plugin: WYSIJA Newsletters


22

Functioneel Ontwerp Gebruikte plugins Voor bepaalde functionaliteiten zullen plugins worden gebruikt.

In dit F.O. zijn funcionaliteiten omschreven waar de volgende plugins voor zullen worden gebruikt:

Agenda

Plugin: The Events Calendar URL: http://wordpress.org/extend/plugins/the-events-calendar/

Nieuwsbrief

Plugin: WYSIJA Newsletters URL: http://wordpress.org/extend/plugins/wysija-newsletters/

Veelgestelde vragen

Plugin: WP Super FAQ URL: http://wordpress.org/extend/plugins/wp-super-faq/

DQ Test

Plugin: WP Pro Quiz URL: http://wordpress.org/extend/plugins/wp-pro-quiz/

Testimonials

Plugin: Testimonial Rotator URL: http://wordpress.org/extend/plugins/testimonial-rotator/


Functioneel Ontwerp. digital4u.nl effectief op internet. Klant. Digitale Vaardigheden. Project. Website. April Datum

Recommend Documents