Internet Project Plan
Let’s Tolk Versie 1.0 Datum 10 oktober 2014
Webdesign en –development by Dennis van Houten
Inhoudsopgave 1! Analyse ................................................................................................................................. 3! 1.1! Huidige website ............................................................................................................. 3! 1.2! Korte concurrentie en bedrijfsanalyse .......................................................................... 3! 1.3! Projectbeschrijving ....................................................................................................... 4! 2! Planning ............................................................................................................................... 5! 2.1! Takenlijst met tijdsduur................................................................................................. 5! 2.2! Globale planning .......................................................................................................... 5! 3! Doel en doelgroep ................................................................................................................ 6! 3.1! Primaire en secundaire doelen ..................................................................................... 6! 3.2! Bezoekersprofielen ........................................................................................................ 6! 4! Inhoud website .................................................................................................................... 7! 4.1! Teksten .......................................................................................................................... 7! 4.2! Media ............................................................................................................................ 8! 4.3! Bibliotheken .................................................................................................................. 8! 5! Functioneel ontwerp ........................................................................................................... 9! 5.1! Navigeren / flowchart ................................................................................................... 9! 5.2! Pagina ontwerp ............................................................................................................. 9! 6! Grafisch ontwerp .............................................................................................................. 11! 6.1! Logo / huisstijl............................................................................................................. 11! 6.2! Kleuren ........................................................................................................................ 11! 6.3! Typografie ................................................................................................................... 11! 7! Technisch ontwerp ............................................................................................................ 13! 7.1! Domeinnamen ............................................................................................................. 13! 7.2! Browsers en platforms ................................................................................................ 13! 7.3! Hosting en CMS .......................................................................................................... 13! 7.4! Onderhoud .................................................................................................................. 14! 7.5! Google (Search Engine Optimalisation) ..................................................................... 14! 8! Examen opleiding .............................................................................................................. 15! 8.1! Verplichte onderdelen voor eind-examen ................................................................... 15!
-2-
1 Analyse 1.1 Huidige website Dewi heeft op dit moment nog geen website. Ze is al wel actief op social media. Huidig Facebook account: geen (alleen een prive account) Huidig Twitter account: https://twitter.com/DewiLatu Het twitter account wordt puur zakelijk gebruikt en ze wil deze wel koppelen aan de website. Het Facebook account (nog) niet.
1.2 Korte concurrentie en bedrijfsanalyse Er blijken nog niet veel tolken een eigen website te hebben. Ik heb er slechts enkele kunnen vinden via google, te weten: http://gebarentolk.net/ http://www.tolk-it.nl/ http://www.tolkroos.nl/ http://www.mirjamstolkngt.nl/home.asp Verder beschikt de branche over een overkoepelende organisatie die tolken inzet: http://www.tolknet.nl/
Let’s Tolk verzorgt de communicatie tussen dove en horende mensen. Let’s Tolk vertaalt alles wat er gezegd wordt in gebarentaal. Andersom vertaalt Let’s Tolk ook van gebarentaal naar gesproken taal voor mensen die de gebarentaal niet beheersen. Dove mensen hebben verschillende vormen van communiceren, zoals onder meer Nederlandse Gebarentaal (NGT) en Nederlands met ondersteunende Gebaren (NmG). Sommige dove mensen geven de voorkeur aan spreken en spraakafzien (liplezen) om te communiceren. Let’s Tolk tolkt in o.a. de volgende situaties: onderwijs, vergaderingen, workshops, cursussen, congressen, presentaties, personeelsuitjes dokters-/ziekenhuisbezoeken, bruiloften, familie-uitjes, zwangerschapsgymnastiek, sport, muziektolken, televisie, theater, feesten, opendagen, feesten, begrafenissen, rechtbank, evenementen en hulpverlening. Kortom; Let’s Tolk is inzetbaar in elke situatie waar communicatie nodig is tussen doof en horend. Dewi is ook zeer vaardig in het gesproken Engels en kan zich snel redden in verschillende gesproken talen. Hierdoor is ze ook in staat om tolkopdrachten in het buitenland te verzorgen.
-3-
Dewi is al verschillende keren op de nationale televisie geweest om te tolken. Bijvoorbeeld bij het programma ‘Uit de kast’ en ‘De Hokjesman’. Dove mensen houden er niet van als je dit soort opdrachten gebruikt om jezelf te promoten en willen niet met naam en toenaam genoemd worden op een website. Dewi is een van de weinige tolken in het noorden van NL en daardoor heeft ze vanzelfsprekend veel opdrachten in het noorden van NL, maar ze wordt ook wel gevraagd voor opdrachten in de rest van het land of zelfs in het buitenland. Dewi wordt ook regelmatig gevraagd om te signdancen. Dit is het vertolken van muziek. Dewi geeft aan dat dove mensen niet alle Nederlandse woorden kennen, dus ze geeft de voorkeur aan filmpjes met gebaren op de website.
1.3 Projectbeschrijving Dewi heeft een goede naam opgebouwd als tolk in het noorden. Ze wordt nu reeds goed gevonden door haar clienten. De website ziet ze in eerste instantie als visitekaartje. Daarnaast moet de website het voor de clienten makkelijker maken zorg in te kopen/een afspraak te maken. In de toekomst is een online agenda wellicht nog een optie. Dewi heeft reeds een domeinnaam, te weten: www.letstolk.nl Hosting is reeds geregeld via www.versio.nl Inlog-gegevens: > DirectAdmin gebruikersnaam: letstdl55 > DirectAdmin wachtwoord: b2qtoxza > DirectAdmin login link: http://46.21.172.165:2222/ > Server: 055 > > FTP host: 46.21.172.165 > FTP user: letstdl55 > FTP wachtwoord: b2qtoxza > > Nameserver 1: ns109.axc.nl > Nameserver 1 IP: 46.21.172.165 > Nameserver 2: ns110.axc.nl > Nameserver 2 IP: 46.21.172.166
-4-
2 Planning 2.1
Takenlijst met tijdsduur
De bouw van de website is een opdracht voor mijn opleiding Webdesign en – development. In eerste instantie wordt de website statisch ontworpen. Een statische website is een eenvoudige website met een beperkt aantal pagina’s, waarvan de inhoud zeer weinig verandert. Een “visitekaartje” van het bedrijf. Na afbouw van de statische website gaan we de website ombouwen tot een dynamische website (een dynamische website wordt aangestuurd door databases die het mogelijk maken de website continu aan te laten passen (mede met behulp van een Content Management Systeem)). De website zal responsive gebouwd gaan worden. Dit wil zeggen dat de website optimaal fungeert op ieder formaat beeldscherm (dus ook op de mobiele aparaten).
2.2 Globale planning Website bouwen Zodra de vormgeving is goedgekeurd en grotendeels de content bekend is kan er worden gestart met het bouwen van de website. De website wordt op een testserver gebouwd en is dan nog niet toegankelijk voor publiek en wordt ook afgeschermd voor Google om te voorkomen dat de website verkeerd wordt geïndexeerd. Website vullen met content Zodra de website het stadium heeft bereikt dat deze gevuld kan worden met de echte content zal de opdrachtgever gevraagd worden de content aan te leveren. Website testen Als de gehele website gevuld is en in principe klaar is om online gepubliceerd te worden, raad ik je aan deze eerst nog een week te testen. Door vooral veel vrienden te vragen naar de website te gaan kijken en te inventariseren of deze “gebruikers” problemen ondervonden. Zorg ervoor dat je per onregelmatigheid weet welke browser de bezoeker gebruikte, welke versie van de browser en wat voor computersysteem en besturingssysteem die persoon had. Als alle probleemgevallen bekend zijn kan ik in één keer zoveel mogelijk de ontdekte problemen en onvolkomenheden oplossen. Website publiceren Als de eventuele problemen zijn opgelost kan de website daadwerkelijk online gaan. Eventueel kun je er voor kiezen om te wachten met publicatie totdat de dynamische website klaar is (als je hier voor kiest).
-5-
3 Doel en doelgroep 3.1 Primaire en secundaire doelen Dewi ziet de website in eerste instantie als visitekaartje. Daarnaast moet de website het voor de clienten makkelijker maken zorg in te kopen/een afspraak te maken. In de toekomst is een online agenda wellicht nog een optie. De inhoud die de website minimaal moet leveren is: - introductie van Dewi / Let’s Tolk - makkelijk inkopen zorg / maken afspraak - wettelijk verplichte informatieverstrekking (denk aan inschrijving bij overkoepelende organisatie, algemene voorwaarden, etc.) - Twitter account gekoppeld aan website - Uitleg van de verschillende onderwerpen, waar nodig en mogelijk, in gebaren (video) - Visitekaartje van Dewi / het bedrijf - Vergroten bereikbaarheid Opties voor de toekomst: - een Engelstalige versie van de website - een agenda, zodat de client de beschikbaarheid van Dewi kan zien
3.2 Bezoekersprofielen De bezoekers zullen voornamelijk mensen uit de doven en slechthorenden wereld zijn. De bezoeker zal voornamelijk op zoek zijn naar tolkvoorziening. Contactgegevens en een aanvraagformulier zijn daarom essentieel. Dewi wil graag op de 1e pagina met zoekresultaten van Google getoond worden. Dewi wil ook graag algemene, handige informatie over tolkvoorziening op haar website tonen. Daarnaast wil Dewi de website regelmatig voorzien van leuke, handige nieuwtjes.
-6-
4 Inhoud website De website krijgt 5 pagina’s, te weten: HOME Hier komt een introductie van Dewi en haar inzetbaarheid. De introductie zal zowel in tekst als in gebaren (video) getoond worden. In de sidebar zal Dewi haar Twitter account getoond worden. WERKWIJZE/TOLKVOORZIENING Hier komt uitleg over de werkwijze van een tolk. Wat zijn de rechten en plichten van de client. Bron: www.nbtg.nl TARIEVEN Hier komen de tarieven voor afname van zorg. En hier komt (opnieuw) uitleg voor de client hoe hij/zij zorg in kan kopen. Bron: aan te leveren door Dewi. CONTACT Hier komen de contactgegevens van Let’s Tolk. En hier komt een contactformulier voor vragen en voor aanvraag van zorg. En hier komt een ‘google maps’-kaartje met aanduiding van het adres. Bron: aan te leveren door Dewi. BEROEPSCODE Hier komen linkjes naar de beroepscodes van NBTG. Bron: http://www.nbtg.nl/overhet-beroep/beroepscodes In de Header en/of Footer zullen Dewi haar contactgegevens getoond worden. De layout van de pagina’s zal zoveel mogelijk gelijk gehouden worden. De header en de footer zullen in ieder geval gelijk blijven. De sidebar op de HOME pagina zal niet terug komen op de andere subpagina’s.
4.1 Teksten Dewi levert zelf de content (teksten) aan voor haar website. Ook de schrijfstijl wordt door Dewi bepaald en bewaakt. Ik zal bij eventueel redigeren van de teksten altijd afstemming zoeken met Dewi. Indien in de toekomst teksten/layout gewijzigd dienen te worden, zal beroep gedaan worden op het (nader op te stellen) onderhoudscontract. De formulieren van de website (bv aanvraag voor tolk opdracht) worden automatisch naar het emailadres van Dewi gestuurd en deze worden door haar afgehandeld.
-7-
4.2 Media Foto’s: Dewi_gebaren1.jpg Foto van Dewi waar ze staat te gebaren. Deze zal prominent op de website gebruikt worden. Bij alle schermformaten. Copyright: Femke Beijnvoort. Dewi heeft aangegeven dat de foto gebruikt mag worden. Video’s: We zullen een aantal filmpjes van Dewi gaan opnemen waar ze in gebaren uitleg geeft over de tekst die op haar website staat. Zodoende kan de bezoeker altijd zien EN lezen welke informatie op de website vermeld staat. Deze video’s moeten nog opgenomen worden en zullen geplaatst worden op een nieuw te openen Youtube-kanaal t.n.v. Dewi. Het Youtube-kanaal zal ik voor Dewi aanvragen. Social media: Twitter plugin voor het weergeven van de tweets van Dewi/LetsTolk. Inclusief een Twitter logo voor de herkenbaarheid.
4.3 Bibliotheken Voor de video’s zal er een Youtube-kanaal aangemaakt worden op Dewi haar naam.
-8-
5 Functioneel ontwerp 5.1 Navigeren / flowchart Er is te weinig content om te werken met submenu’s, daarom hebben we gekozen voor een simpele en krachtige flowchart met slechts 5 hoofdmenu’s/buttons. De plek waar de bezoeker bepaalde informatie mag en kan verwachten moet helder en duidelijk zijn. De navigatiestructuur komt er als volgt uit te zien.
START PAGINA
WERKWIJZE/ TOLKVOORZ.
TARIEVEN
CONTACT/ AANVRAAG
BEROEPS CODE
De layout en verdeling van de content en diverse functies moet een heldere en strakke indeling en uitstraling krijgen. De navigatie moet direct begrepen worden en de bezoeker moet op geen enkel moment het gevoel krijgen dat hij of zij de weg kwijt is. Toegankelijkheid, helderheid en gebruikersvriendelijkheid zijn belangrijk.
5.2 Pagina ontwerp Functionaliteiten die de website zal gaan bieden zijn: Navigatie + ordening • Sitemap • Navigatiestructuur / buttons • Footer Klantvriendelijkheid + klantenbinding • Formulieren voor het maken van een afspraak en/of contact te leggen • agenda (in de toekomst) Website - gebruikersgemak functionaliteit • Responsive webdesign voor gebruik op verschillende devices Sociaal netwerk activiteiten: • Twitter Algemene belangrijke informatie voor bezoekers van de website • Disclaimer / algemene voorwaarden / gebruikersvoorwaarden etc • Copyright / auteursrechten
-9-
Na overleg en een paar voorbeelden zijn we tot onderstaande opzet gekomen (welke nog verder aangepast zal worden):
Mobile versie:
- 10 -
6 Grafisch ontwerp 6.1 Logo / huisstijl Dewi heeft nog geen uitgewekte huisstijl. Dewi heeft wel al een logo. Dit logo hoeft ze niet te behouden. De kleurstelling van het logo wil ze terug zien in de website. Voorstel Logo:
6.2 Kleuren De kleurstelling van het logo wil ze terug zien in de website. De kleurstelling is voornamelijk paars. Eventueel in onderstaande kleurencombinatie:
6.3 Typografie Voor het logo gebruiken we Bowlby One SC, van Google fonts. Voor de koppen gebruiken we Ubuntu, van Google fonts. Voor de sub-koppen gebruiken we Codystar, van Google fonts. Voor de content is de keuze gevallen op Arial.
- 11 -
Arial: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
- 12 -
7 Technisch ontwerp 7.1 Domeinnamen Domeinnaam www.letstolk.nl is reeds geactiveerd door Dewi, via AXC te Leeuwarden. In de toekomst wil Dewi wellicht ook Letstolk.com activeren en die vervolgens doorlinken naar dezelfde website.
7.2 Browsers en platforms De website wordt geschreven volgens de reglementen van het W3C en voor de meest gangbare browsers. In oude browsers en op oude systemen kan de website afwijkend getoond worden. Dit probeer ik zoveel mogelijk te voorkomen maar websites zijn in hun uiterlijk en voorvertoning nu eenmaal afhankelijk van de capaciteit van de computer en de browser van de gebruiker. Een browsers met veel problemen is bijvoorbeeld Internet Explorer 6 (laatste versie online is versie 11) en alle lagere versies hiervan. Om een website voor IE6 ‘goed’ te maken moeten er erg veel aanpassingen worden geschreven. Daarom kies ik ervoor om standaard websites te bouwen voor Internet Explorer vanaf versie 7 en de overige moderne browsers als Opera, Firefox, Safari en Chrome. De door mij gebruikte taalversies zijn: • CSS3 • HTML5 transitional • jQuery • PhP
7.3 Hosting en CMS De website zal zowel statisch als dynamisch opgeleverd worden. Voor het plaatsen en aanpassen van de content op de site maken we gebruik van WordPress als Content Management Systeem. Een Content Management Systeem biedt de eigenaar toegang tot het zelfstandig beheren van de content van de website. De keuze is op WordPress gevallen om de volgende redenen: - WordPress is qua gebruik het meest eenvoudige CMS. Eventuele extra functionaliteiten (denk aan een foto-slider of een zoek-functionaliteit) zijn middels plugins te installeren. - Contentbeheer (door de klant) m.b.v. WordPress is eenvoudig. - de website krijgt geen webwinkel (voor sites met een webwinkel is WordPress minder geschikt) - er hoeven geen accounts aangemaakt te worden, waarin verschillende rollen gekoppeld moeten worden (voor deze sites is WordPress minder geschikt) - WordPress is wereldwijd het grootst en meest gebruikte CMS. - In WordPress is het eenvoudig om de website te optimaliseren voor zoekmachines (zoals Google). - WordPress is gemakkelijk te installeren.
- 13 -
7.4 Onderhoud Elk CMS moet onderhouden worden. De eigenaar van de website moet in ieder geval elk jaar het CMS en de gebruikte functionaliteiten, scripts en formulieren laten controleren en updaten. Het web, de browsers en de techniek ontwikkelen zich elke dag. Hierdoor is het belangrijk dat ook de websites de moderne richtlijnen blijven volgen. Als een website langere tijd niet wordt onderhouden zullen op een gegeven moment bepaalde functionaliteiten wegvallen omdat deze niet meer ondersteund worden. Het technische onderhoud van een Wordpress-website kan zich beperken tot een jaarlijkse onderhoudsbeurt waarin de gebruikte functionaliteiten geupdate worden. Ook aanpassingen in taalversies moeten gecontroleerd en bijgewerkt worden om ervoor te zorgen dat de website door de nieuwe browsers goed ondersteund en voorvertoond wordt. Gebruikte plug-ins moeten regelmatig of in ieder geval één keer per jaar geupdate worden om de functionaliteit en de veiligheid te kunnen waarborgen. Over het onderhoud zijn nog geen afspraken gemaakt.
7.5 Google (Search Engine Optimalisation) Zoekmachineoptimalisatie is een samenwerking tussen de webbouwer en de webbeheerder. Ik zal de website voorzien van de SEO-pack van Yoast, wat betekent dat de website optimaal wordt voorbereid voor de zoekmachine Google. Maar ook de beheerder dient zich, bij het plaatsen van content, aan specifieke regels te houden om ervoor te zorgen dat de website optimaal geïndexeerd kan worden door Google. Ik zal hier bij installatie een korte uitleg over geven. Tevens krijg je een beginners handleiding van me (zie bijlage). Een uitgebreide handleiding vind je hier: https://yoast.nl/artikelen/wordpress-seo/#individual-posts
- 14 -
8 Examen opleiding 8.1 Verplichte onderdelen voor eind-examen Aangezien de website moet voldoen aan een aantal verplichte eisen voor het eindexamen (maar die niet nodig zijn voor Dewi), zullen we deze op een aparte pagina opsommend toevoegen. Deze pagina zal ik later weer verwijderen. Het betreft hier de volgende functionaliteiten: - minimaal 2 sub pagina’s - RSS feed - Print.css stijlblad
- 15 -
Bijlage: WordPress SEO; de basisinstellingen Wanneer je je WordPress-website wilt optimaliseren voor zoekmachines, zijn er een aantal dingen die je vanaf het begin goed moet instellen. Zo heb je permalinks, sitemap-plugins en de titelstructuur. Wanneer je deze zaken vanaf het begin goed doet, scheelt dat een hoop. Daarnaast is het mogelijk om in te stellen van hoe je wilt dat je website er in sociale media uitziet (als iemand je link deelt, bijvoorbeeld). Voor meer tips op het gebied van (WordPress) SEO raad ik je ook zeker aan om de website van Yoast te bezoeken en hun blog te lezen.
Google, Yahoo! en Bing De grote zoekmachines waarmee je rekening moet houden zijn Google, Yahoo! en Bing. Iedere zoekmachine “crawlt” een website op zijn eigen manier. Google negeert “meta keywords” bijvoorbeeld, maar andere zoekmachines kijken daar nog wel naar. Wanneer je website bedoeld is voor de Nederlandse markt kun je Yahoo en Bing eigenlijk meteen vergeten; in Nederland gebruikt zo’n 99% van de internetgebruikers Google als zoekmachine.
WordPress SEO by Yoast
Ik begeleid je langs de belangrijkste instellingen en ik heb de WordPress SEO-plugin al voor je geïnstalleerd.
- 16 -
Titels'en'meta’s'(dit'dien'je'zelf'te'doen!)' Wat voor Google belangrijk is, is de titel van een pagina of bericht. Wanneer je bijvoorbeeld op “WordPress installeren met Installatron” zoekt, zijn de woorden waarop je gezocht hebt ook dikgedrukt in het zoekresultaat. Voorbeeld:
Met de WordPress SEO plugin van Yoast kun je instellen hoe een titel er standaard uit komt te zien. Meestal is dat: [titel van bericht/pagina] – [titel van website] In de WordPress SEO-plugin ziet dat er als volgt uit:
In bovenstaand voorbeeld is %%title%% de titel van het bericht, en %%sitename%% de naam van de website. Tussen de titel van het bericht en de naam van de website heb ik een streepje (-) als scheidingsteken gebruikt. Met deze instelling zet je de titel dus automatisch goed voor alle berichten. Per bericht kun je de titel vervolgens wel nog aanpassen wanneer je dat nodig vindt, via de “WordPress SEO Meta Box” die verschijnt onder ieder bericht dat je schrijft (zie onderstaande afbeelding).
- 17 -
In de WordPress SEO metabox kun je dus de Titel invoeren én de meta-omschrijving. Ook toont de plugin hoe veel tekens je maximaal mag gebruiken én hoe het er in Google uit zou zien (Snippet voorbeeld).
Social'(heb'ik'nog'niet'ingesteld'voor'je,'maar'is'mogelijk)' Vervolgens heb je in de WordPress SEO-plugin de “sociale instellingen”. Hier kun je OpenGraphgegevens invullen. Meer informatie over OpenGraph lees je hier. Zo vul je bijvoorbeeld een standaard afbeelding in, een titel én een beschrijving die wordt getoond wanneer iemand jouw website deelt op Facebook.
- 18 -
Dat ziet er in de plugin uit als te zien op bovenstaande afbeelding. Als resultaat hiervan, ziet het er bijvoorbeeld als volgt uit wanneer je de URL “http://www.wplounge.nl/” deelt op Facebook:
Er wordt dus automatisch een titel, omschrijving én afbeelding getoond. Deze afbeelding heeft bepaalde afmetingen en voldoet aan bepaalde voorwaarden. Meer hierover lees je in het artikel:OpenGraph tags met WordPress SEO.
- 19 -
XML'Sitemaps'(heb'ik'al'voor'je'verzorgd)' Om Google te laten weten welke pagina’s en berichten er op jouw website staan, is het belangrijk om Google te helpen met een XML Sitemap. Deze sitemaps kun je ook indienen in de Google Webmaster Tools. In de Webmaster Tools kun je dan ook bijhouden hoe veel pagina’s je hebt ingediend en hoe veel er al geïndexeerd zijn. Meer over sitemaps en indexatie lees je hier.
Permalinks'(heb'ik'al'voor'je'verzorgd)' Ook is het mogelijk om je permalinks in te stellen met WordPress SEO. Dit heb ik al ingesteld in de WordPress-instellingen. Meer daarover lees je hier.
Interne'links'(heb'ik'al'voor'je'verzorgd)' Onder het kopje “interne links” kun je een kruimelpad (breadcrumbs aan je website toevoegen). Wij hebben dit gedaan op onze pagina’s en categorieën. Wanneer je ze goed instelt, zal het er in Google als volgt uitzien:
Onder het zoekresultaat wordt dus niet de URL getoond, maar de structuur die je hebt aangegeven in het kruimpelpad. Voor het voorbeeld hierboven is dat “WordPress Handleiding” > “WordPress Instellingen”. Het gaat om een pagina in onze Beginners-handleiding voor WordPress.
Overige'instellingen'(niet'van'toepassing)'' Naast de besproken instellingen vind je in de WordPress SEO-plugin nog instellingen voor RSSfeeds en de mogelijkheid om je SEO-instellingen te importeren van een andere WordPresswebsite. Ook kun je onder “bestanden bewerken” het Robots.txt bestand aanpassen.
- 20 -
