Website Mijn Boodschappenlijst

Website: Mijn Boodschappenlijst

eigen studiepunten

Website Mijn Boodschappenlijst

document : 1 / 17 naam: datum: id: mail:

Versie 1.2

Ernst Klaas Lanser dinsdag 10 juli 2012 500228655 [email protected]

Inhoudsopgave Website: Mijn Boodschappenlijst.........................................................................................1 1) Algemeen..........................................................................................................................3 1.1) Online...........................................................................................................................................3 1.2) Website.........................................................................................................................................3

2) Website.............................................................................................................................4 2.1) 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..........................................................................................................................8 4.1) Logo.............................................................................................................................................8 4.2) PHP & MySQL.................................................................................................................................9

5) Kleuren...........................................................................................................................10 6) PHP genereert PNG...........................................................................................................11 6.1) Visuele stappen............................................................................................................................11 6.2) Bepalen van de weergave..............................................................................................................12

7) Van nul tot nu..................................................................................................................13 8) Analytics..........................................................................................................................14 8.1) Google Analytics...........................................................................................................................14 8.2) Mijn Boodschappen Analytics..........................................................................................................15 8.3) Up-to-date...................................................................................................................................15

9) Logopedie........................................................................................................................16 10) Prijzen...........................................................................................................................17

eigen studiepunten Website Mijn Boodschappenlijst

2 / 17

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

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 “-”.

2.4) 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

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

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 e-mail 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

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

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

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

5) Kleuren •

•

Logo kleuren (HEX)

◦

Melk:

#356EA5

&

#70C2D7

◦

Brood:

#997440

&

#D1B07E

◦

Limoen:

#397102

&

#97C026

◦

Randen:

#4D4543

◦

Kleur:

#FDC14F

◦

Tekst:

#000000

&

#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

1550 × 1000 px

&

#70C2D7

&

#FFFFFF

&

#CDC1B8

&

#D9CDC3


10 / 17

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.

.

2

.

1

3 4

5

7

paprika paprika

6


11 / 17

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.

1

3


12 / 17

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

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 2012. •

Unieke bezoekers

2.866

•

Bezoeken

4.438

•

Paginaweergaves

•

Pagina's/bezoek

•

Gem. bezoekduur

•

Bouncepercentage

21,86%

•

nieuwe bezoeken

63,86%

•

1280x1024

17,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%

36.347 8,19 00:06:25


14 / 17

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 2012. En het aantal geregistreerde bezoeker is nu: 551 + 80 = 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

: : : : : : :

78 0 7 1 3 3 11

15 0 5 0 0 0 3

+ + + + + + +

Professionalen begeleider ergotherapeut logopedist onderwijzer vrijwilliger maar geen goede keuze

: : : : : :

28 20 127 6 12 21

4 3 12 1 2 2

+ + + + + +

geen idee : 15 3 + ________________________________________________ =

332 + 50 =

382

Categorieën : 101 + Afbeeldingen : 1063 + ____________________________ =

1164


15 / 17

9) Logopedie Bij deze zet ik graag zwart-op-wit dat de website www.mijnboodschappenlijst.nl 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) 6071639 Aanwezig di, wo, vrij Reade, centrum voor revalidatie en reumatologie Bezoekadres Overtoom 283 Amsterdam Postadres Postbus 58271 1040 HG Amsterdam www.reade.nl Reade is onze nieuwe naam na de fusie tussen Revalidatiecentrum Amsterdam en het Jan van Breemen Instituut.


16 / 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

Website Mijn Boodschappenlijst

Recommend Documents