Website Mijn Boodschappenlijst

Transcriptie

1 Website Mijn Boodschappenlijst document 1 / 17 naam datum id mail Versie 1.2 Ernst Klaas Lanser dinsdag 10 juli ernst@wobbo.nl

2 Inhoudsopgave Website Mijn Boodschappenlijst...1 1) Algemeen ) Online ) Website...3 2) Website ) 2.2) 2.3) 2.4) 2.5) 2.6) 2.7) 2.8) 2.9) Begin...4 Ideeën en keuzes...4 Mijn Boodschappenlijsten...4 Mogelijkheden...4 Visueel...5 Talen...5 Zoekversie...5 Proclaimer...6 Website informatie...6 3) Resultaat...7 4) Making-of ) Logo ) PHP MySQL...9 5) Kleuren ) PHP genereert PNG ) Visuele stappen ) Bepalen van de weergave ) Van nul tot nu ) Analytics ) Google Analytics ) Mijn Boodschappen Analytics ) Up-to-date ) Logopedie ) Prijzen / 17

3 1) Algemeen Ongeveer tien jaar geleden heeft logopedist Margot Vermeulen bij het Revalidatiecentrum Reade te Amsterdam een boek gemaakt die mensen met afasie helpt om boodschappen te doen. Dit boek is gemaakt voor mensen met een hersenletsel. Het is specifiek om tekst te linken aan een afbeelding. De schade van het hersenletsel zorgt ervoor dat sommige hersens linkjes niet meer werken. Stel je voor dat je op een boodschappenlijst schrijft dat je melk moet kopen, dan zal je bij de winkel dankzij je boodschappenlijst melk pakken. Mensen met een afasie kunnen moeite hebben met een boodschappenlijst, zo erg dat er bijvoorbeeld niets gekocht wordt of iets anders. Er zijn veel verschillende soorten problemen met afasie, één voorbeeld Bij een winkel begrijpt men wel dat er melk geschreven staat bij de boodschappenlijst, maar men ziet visueel niet een pak melk voor zich. Het kan ook zijn dat men niet ziet dat het gaat om een drink product. Vervolgens kan men het product niet vinden omdat men niet weet wat er staat. Voorbeeld van het probleem zonder afasie Stel je voor dat een Frans persoon in een Nederlandse winkel Franstalig verteld dat hij geen lait kan vinden. Als het persoon vervolgens een afbeelding pak melk laat zien, dan begrijpt de Nederlander wat er gezocht wordt. 1.1) Online De boekversie werd een geweldig succes. Er kwam steeds meer behoefde om het product te verbreden en te verbeteren. Vandaar dat er het idee kwam om een website te maken. De bedoeling is dat gebruikers met afasie nog beter geholpen worden. Belangrijke punten klanten hebben meer keuzes, afbeeldingen moet visueel verbeterd, er moet gekeken naar nieuwe ontwikkeling, het aanbod vergroot, economisch haalbaar en rechten. 1.2) Website Uiteindelijk zijn die punten verwerkt in het resultaat. Zo kunnen de klanten een inlognaam maken en hun eigen winkellijst maken. Stel dat je nooit alcoholische producten koopt, dan kan men dit uit vinken zodat je winkel persoonlijker en makkelijker word voor een gebruiker met afasie. Het is ook mogelijk om eigen boodschappenlijstjes te maken en op te slaan. Alle afbeeldingen zijn in hoge resolutie aangeboden. En alle foto's zijn aangeboden door bedrijven en officieel toegestaan voor deze website. Er is goed gekeken naar de economische omstandigheden van zowel de organisatie en de gebruikers. Zoals de prijzen van providers, gebruik van een maximum (zodat de kosten niet hoger kunnen worden dan gedacht), rechten (afbeeldingen, namen, talen, privé gegevens, etc.) en een eventuele toekomstige uitbreiding voor mobiel (Apps.) en een nieuw boek. De website heet Mijn Boodschappenlijst - http//mijnboodschappenlijst.nl/ 3 / 17

4 2) Website Het idee om een non-profit interactieve media site te creëren zag ik als een noodzakelijke ontwikkeling. Aangezien ik ervaring hebt met afasie, zelf afasie heb, in het 4e jaar van Communication and Multimedia Design (voorheen IAM ) zit, vond ik dit een spannende uitdaging. Ik kwam in gesprek met logopedist Margot Vermeulen over het idee dat ik had om haar boekversie van een boodschappenlijst uit te breiden naar een website. Aangezien Margot nog niet bezig was geweest om een site te maken, wilde zij graag mee helpen. Omdat er nog geen wensen waren kreeg ik alle vrije ruimte om die site te ontwikkelen. 2.1) Begin Ik ben begonnen met alleen het oude boek. Dit boek is vaak geüpdatet door Margot in samenwerking met andere logopedisten en specifiek gericht op mensen met afasie. Door gesprekken met Margot heb ik kunnen concluderen hoe het boek gebruikt werd. Het boek gebruikte dezelfde logische indeling als de gemiddelde boodschappenwinkel. De logopedisten pasten het boek aan voor de gebruiker (bijvoorbeeld hebben mannen niet alle producten nodig die vrouwen wel nodig hebben of sommige mensen vieren het feest Pasen en sinterklaas niet). 2.2) Ideeën en keuzes Vervolgens heb ik, tijdens verschillende afspraken, in stappen de mogelijkheden laten zien. Haar kennis, ideeën en mening bepaalden ook het resultaat. Zij had natuurlijk volledig recht om te bepalen wat er op de site komt, aangezien de site gebaseerd is op haar boek. 2.3) Mijn Boodschappenlijsten De naam van de website was niet gemakkelijk. Hier hebben wij aantal afspraken voor gemaakt. Ik vind dat het belangrijk is dat de site dezelfde naam heeft als het Uniform Resource Locator (URL), niet te lang moet zijn en vooral geen extra tekens erbij moet hebben zoals een onderstreep _ en koppelteken / minteken ) Mogelijkheden Voordat de naam gekozen was, waren er genoeg andere punten om verder te gaan met het ontwikkelen. Hierbij werd gekeken naar de problemen waar mensen met afasie last van kunnen hebben. Hierbij zag ik een geweldige extra mogelijkheid die een website wel kan aanbieden en een boek niet! Tekst hard op laten voorlezen. In een boek versie was alleen de link tussen tekst en foto, bij de website kwam de mogelijkheid tekst laten voorlezen dus erbij. 4 / 17

5 2.5) Visueel Zelf miste ik bij het boek dat het een extra hulpmiddel kleur niet gebruikte. Nu heeft elke soort hoofd-kop een eigen kleur gekregen. Zo heeft bijvoorbeeld het onderdeel brood de kleur oranje gekregen, alles wat hieronder walt, dus ook stokbrood, gebruikt de kleur oranje. 2.6) Talen Tijdens de ontwikkeling kwam ook het idee om meerdere talen aan te bieden. Dit helpt mensen die moeite hebben met de Nederlandse taal en / of Nederlanders die op vakantie gaan. 2.7) Zoekversie Ik heb nog een hulpmiddel toegevoegd, een zoeklijst. Hier staat de volledige boodschappenlijst, zowel de kop als de producten (inclusief de tekst, afbeelding en audio). Men kan ook zelf zoek tekst invullen en direct het resultaat zien. 5 / 17

6 2.8) Proclaimer Gezamenlijk hebben wij een proclaimer geschreven na aanleiding van mijn eis Website "MijnboodschappenLijst.nl" is het resultaat van "Co-creatie" tussen Ernst Lanser en Margot Vermeulen. De website is eigendom van Margot Vermeulen èn van Ernst Lanser. Margot Vermeulen is als logopedist verantwoordelijk voor de inhoud van "MijnboodschappenLijst.nl" en doet er alles aan deze actueel te houden dit in nauwe samenwerking met Ernst Lanser, de bouwer van de website die verantwoordelijk is voor het technische deel. Wij aanvaarden geen aansprakelijkheid voor schade, errors, virussen en andere storingen van welke aard dan ook. De website is ontwikkeld en bedoeld voor persoonlijk, niet-commercieel gebruik! Het is toegestaan alle afbeeldingen te printen. Wij hebben de inhoud van deze pagina met grote zorg samengesteld. Komt u desondanks toch iets tegen dat niet correct is, verouderd of verkeerd gespeld, dan stellen wij uw reactie bijzonder op prijs. U kunt ons een sturen, alle benodigde informatie kunt u onderaan de pagina vinden onder het kopje "info". Alle informatie die u ons verstrekt, wordt vertrouwelijk behandeld. Persoons- of adresgegevens worden uitsluitend gebruikt waarvoor u ze heeft verstrekt. 2.9) Website informatie Een eigen eis was om een technische informatie lijst te plaatsen, wat ook voor een deel problemen kan voorkomen. Het feit dat de site (bijna) compleet gemaakt is met open source software lost al een hoop mogelijke problemen op. De website is gemaakt in Linux. De website draait op een Linux server en bevat "PHP 5" en "MySQL 5". Ook wordt er gebruikt gemaakt van "JavaScript", "Flash 8" en "MPEG-1 Layer 3". De website is ook gecontroleerd om te kijken of de website werkt op Microsoft ("Windows XP", "Windows Vista" en "Windows 7") en Macintosh Apple ("MacBook", "Mac mini", "imac", "ipad", "ipod" en "iphone"). Daarbij is gekeken of "Microsoft Internet Explorer 8", "Mozilla Firefox 3", "Macintosh Safari 5", "Google Chrome 10", "Android 2.3.3" en "Opera 10, Opera WII, Opera Mini en Opera Mobile" werkt. Om de aangeboden tekst hardop voor te lezen is een Flash (.swf) installatie nodig. Meeste computer hebben Adobe Flash geïnstalleerd (gratis) maar er is ook een alternatief zoals een "open source" genaamd "GNU Gnash". "Open source" beschrijft de praktijk die in productie en ontwikkeling vrije toegang geeft tot de bronmaterialen de source van het eindproduct. Flash is gemaakt in "Macromedia Flash 8" en "Fireworks 8". "GIMP GNU Image Manipulation Program" is gebruikt om alle foto's te maken, bewerken en om te zetten naar PNG. "InkScape Open Source vector graphics editor" realiseerde, genereerde en zette afbeeldingen om naar SVG, EPS en PNG. Alle tekst voor PHP is gemaakt in "OpenOffice Bluefish 2.2". Een aantal Google mogelijkheden worden gebruikt, zoals "Google Vertalen" en "Google Analytics". 6 / 17

7 3) Resultaat Om deze website een succes te laten worden, en dit up-to-date te houden, heb ik het zo gemaakt dat de inhoud (afbeeldingen, teksten, verschillende talen, audio, kleuren, etc.) met een kleine uitleg ook beheerd kan worden door een derde. Zo heeft Margot uitleg gekregen hoe zij de website kan beheren en heeft zij voor een deel de categorieën en producten zelf geplaatst (voor meer informatie zie 6.2 platzijde 12). De site werd erg snel bekeken, gebruikt en verspreid door zowel gebruikers als logopedisten. Omdat ik besloten had dat het erg nuttig is om te weten wat voor soort gebruikers de website heeft werd er gevraagd naar wat voor gebruiker je bent, je landstaal, je leeftijd en je geslacht. Men kon vertellen dat men een gebruikers is ik heb afasie, ik heb hersenletsel, ik heb dementie, ik zit op de basisschool, ik zit op de middelbare school, ik zit op speciaal onderwijs of ik gebruikt de site als professional logopedist, ergotherapeut, onderwijzer, begeleider, vrijwilliger (voor meer informatie zie 8.2 bladzijde 15). Kortom al deze informatie wordt nu gebruikt voor het uitbreiden en wijzigen van de site. Natuurlijk helpt dit ook voor nieuwe ideeën (nieuw boek, stikkers, Apps., website 2.0, etc.). Dankzij de goede voorbereiding en ontwikkeling van verschillende mogelijkheden is deze site nu al een succes en ook een begin van een geweldige ontwikkeling voor mensen met afasie. 7 / 17

8 4) Making-of 4.1) Logo A B C Mijn Boodschappenlijst A A Mijn Boodschappenlijst E A Mijn Boodschappenlijst B B B F Mijn Boodschappenlijst A B C MijnBoodschappenlijst (MBL) Melk = Mijn Brood = Boodschappen Limoen = Lijst 8 / 17

9 4.2) PHP MySQL Het technische deel (PHP, SQL, Flash en JavaScript) is volledig zelf ontworpen. 1. Het ontwikkelen is continu 1 opgeslagen in aparte files. 2. Elke file bevat de laatste SQL ontwikkeling. 3. En elke file bevat het volledige website ontwikkeling, inclusief alle 2 afbeeldingen, belangrijke veranderingen en uitleg. Deze veel stappen hebben geholpen ontwikkeling met van de 3 het ontstaan van de website. Technische errors konden soms simpelweg opgelost door oud werk weer terug te plaatsen, etc.. 9 / 17

10 5) Kleuren Logo kleuren (HEX) Melk #356EA5 #70C2D7 Brood # #D1B07E Limoen # #97C026 Randen #4D4543 Kleur #FDC14F Tekst # #D6D4D3 Fons Verdana Pagina's kleuren (HEX) Courier Alleen bij mobieltjes en WII. Achtergrond #FFFFFF Start #FDC14F Handleiding #97C026 Mijn Lijst #D1B07E Mijn Start #8E0101 Info #70C2D7 Proclaimer #B5AFAA Bewerken #B5AFAA Uitroep #8E0101 New #F9FDCB Purisa Bij gewone weergaves. #FAF7F7 De afbeelding is half doorzichtigl. PNG afbeelding px #70C2D7 #FFFFFF #CDC1B8 #D9CDC3 10 / 17

11 6) PHP genereert PNG Alle afbeeldingen worden ter plekken gegenereerd bij aanvraag van het laden van de website pagina. Dat beteken dat alle afbeeldingen niet opgeslagen worden. Een afbeelding kan gemaakt worden voor print kwaliteit (1 print afbeelding 1200px 980px, PNG, ongeveer 250KB). Op dit moment zijn er 1063 afbeeldingen in het Nederlands, 99 in het Engels en 37 in het Frans. 6.1) Visuele stappen 1. Basis (PNG), schaduw, doorzichtig. 2. Eventueel schaduw (PNG), een achtergrond voor de foto 3. Foto (PNG), doorzichtig. 4. Afbeelding (PNG), doorzichtig (moet lijken op glas). 5. Rand (PHP), bepaald door HEX kleur. 6. Tekst (PHP), één in zwart wit en eventueel één grijze schaduw. De tekst kan ook i.p.v. de foto 7. Resultaat paprika paprika 6 11 / 17

12 6.2) Bepalen van de weergave Er is een handige manier gemaakt om ervoor te zorgen dat de categorieën en 2 afbeeldingen gemakkelijk te beheren zijn, zodat de site niet afhankelijk is van alleen technische mensen. 1. Hierbij kan je de categorie (tekst, achtergrond kleur, foto) toevoegen, toevoegen en verplaatsen categorie. Een afbeelding aanpassen, naar talen een toevoegen andere () of wijzigen door te klikken op een afbeelding. 2. Door een afbeelding te wijzigen kan je kleur, positie en grootte (zowel de tekst als de foto), schaduw en lettertype bepalen. 3. Dit is een lijst die de al geüploade foto's laat zien, om bijvoorbeeld bij een afbeelding een foto te selecteren door te klikken op Alle bestaande foto's laten zien of sluiten. Deze foto's zijn in hoge kwaliteit en hebben een doorzichtige achtergrond / 17

13 7) Van nul tot nu Ik ben begonnen in augustus 2010 en de site is in september 2011 online gekomen. In die tijd ben ik er 2,5 dagen per week, exclusief schoolvakanties mee bezig geweest. Er zijn veel vergaderingen geweest, er is samenwerking ontstaan met de vereniging Afasie Vereniging Nederland (AVN), ook zijn er meerdere presentaties geweest en is de site al twee keer genomineerd voor verschillende prijzen. Ik ben nu nog bezig met bijvoorbeeld vragen van gebruikers, reclame, promotie, verbeteringen, technische problemen, kleine uitbreidingen en met nieuwe ontwikkeling. 13 / 17

14 8) Analytics 8.1) Google Analytics Hierbij een weergave van de afbeelding van de locaties van de gebruikers. De afbeelding laat zien in Nederland en België (Vlaanderen) van 1 September 2011 tot en met 31 Maart Unieke bezoekers Bezoeken Paginaweergaves Pagina's/bezoek Gem. bezoekduur Bouncepercentage 21,86% nieuwe bezoeken 63,86% 1280x ,62% 1024x768 17,35% 1366x768 10,95% 1280x800 8,54% Geen Flash 12,48 Internet Explorer 59,53% Firefox 15,71% Safari 10,27% Chrome 10,05% Android Browser 1,71% Opera 1,10% , / 17

15 8.2) Mijn Boodschappen Analytics De website bevat specifieke gegevens over de gebruikers die een inlognaam hebben gemaakt. Deze gegevens zijn belangrijk en speciaal gemaakt om informatie weer te geven voor Arbeidsrevalidatie (zoals logopedisten, ergotherapeut maar ook website sociale media ontwikkeling en aanpassingen). 8.3) Up-to-date In mei 2012 bezoekers is het aantal verdubbeld ten opzichte van april En het aantal geregistreerde bezoeker is nu = 631 De vergroting voornamelijk komt door reclame d.m.v. Google Advertenties en links van bijvoorbeeld http//neurocom.be/. Gebruikers ik heb afasie ik heb dementie ik heb hersenletsel ik zit op de basisschool ik zit op de middelbare school ik zit op speciaal onderwijs maar geen goede keuze Professionalen begeleider ergotherapeut logopedist onderwijzer vrijwilliger maar geen goede keuze geen idee 15 3 = = 382 Categorieën 101 Afbeeldingen 1063 = / 17

16 9) Logopedie Bij deze zet ik graag zwart-op-wit dat de website en prachtig product is geworden! Er zijn al veel mensen met afasie en logopedisten die de website nu gebruiken, in Nederland en België. De website is intuïtief, gebruiksvriendelijk, en mooi / aantrekkelijk fris vormgegeven. Ook mensen met hersenletsel / afasie zijn hierdoor in staat de website te gebruiken en hebben hierdoor de mogelijkheid om weer boodschappenlijsten te maken en te gebruiken. Met vriendelijke groet, Margot Vermeulen logopedist Cluster 2 (020) Aanwezig di, wo, vrij Reade, centrum voor revalidatie en reumatologie Bezoekadres Overtoom 283 Amsterdam Postadres Postbus HG Amsterdam Reade is onze nieuwe naam na de fusie tussen Revalidatiecentrum Amsterdam en het Jan van Breemen Instituut. 16 / 17

17 10) Prijzen In 2011 heeft de website een innovatieprijs gewonnen. In 2012 is de website genomineerd met nog 3 andere kandidaten voor de Peter Koppe kwaliteitsprijs, maar MijnBoodschappenlijst heeft niet gewonnen. 17 / 17