Web app Spaans voor kinderen

Web app “Spaans voor kinderen”

Naam: Yanette Wong Lozano

Inhoudsopgave Inleiding ................................................................................................................................................... 3 Beschrijving applicatie ............................................................................................................................. 4 Doelgroep ................................................................................................................................................ 4 Omgeving................................................................................................................................................. 4 Technologische middelen ........................................................................................................................ 4 User stories.............................................................................................................................................. 4 Site map ................................................................................................................................................... 5 Gebruiksscenario .................................................................................................................................. 6-8 Functioneel ontwerp - Wireframes ...................................................................................................... 8-9 Screendumps .................................................................................................................................... 10-13 Requirements ........................................................................................................................................ 13 Logboek ............................................................................................................................................ 14-15 Uitleg en aanpassingen .................................................................................................................... 15-16 Testrapport ............................................................................................................................................ 16 Aanbevelingen ....................................................................................................................................... 16 Bibliografie ............................................................................................................................................ 17

2

Inleiding Kinderen van tegenwoordig zijn in het algemeen heel handig met de nieuwe ontwikkelingen, ze gebruiken smartphones, tablets, computers, enz en doen dat zoals ze het altijd gedaan hebben. Ook willen ouders dat hun kinderen nieuwe talen leren zodat ze later in de toekomst meer mogelijkheden op een baan hebben. Een taal als Spaans is de op één na meest gesproken taal ter wereld. 325 500 miljoen mensen op aarde spreken Spaans. Met behulp van een web applicatie gaan de kinderen Spaans leren op basis-niveau. Het is de bedoeling dat ze op korte termijn de getallen van 0 tot 10, de kleuren, fruitsoorten, het vervoer en de naam van sommige dieren uit hun hoofd leren in het Spaans. Het is een app die gebruikt wordt als basis om verder de Spaanse taal te leren. De app moet aantrekkingskracht op het kind hebben. Dit betekent: veel kleuren, goed lettertypes, plaatjes om op te tikken (touchscreen) en goede audio-interactie. De app moet leuk en grappig zijn voor de kinderen. Dat geeft een goed gevoel aan de kinderen zodat ze de web applicatie altijd willen gebruiken. Kinderen zijn meestal visueel ingesteld. Daarom wordt in de applicatie niet zoveel tekst gebruikt. De applicatie moet leuk, effectief, interessant, duidelijk en veilig te gebruiken zijn. Hij kan alleen maar individueel gebruikt worden.

3

Beschrijving applicatie De web applicatie is gemaakt om te gebruiken op een browser(behalve op Firefox) op laptops, computers en mobiele apparaten. Dit kan gebeuren door middel van een link. Er wordt Spaans op een visuele manier geleerd. De getallen van 0 tot 10, de kleuren, de namen van sommige dieren, fruitsoorten en vervoer. Via een web app zullen de kinderen dit basis Spaans leren met behulp van geluidjes, afbeeldingen en oefeningen. De applicatie is voor kinderen die geen Spaans kunnen, dus voor beginners.

Doelgroep De doelgroep zal bestaan uit kinderen van 10 tot 14 jaar, kinderen van het basisonderwijs. Uit onderzoek is gebleken dat op jonge leeftijd het vermogen om gemakkelijk een nieuwe taal te leren groter is dan op latere leeftijd.

Omgeving Op heel veel leuke en interactieve manieren kan een kind een taal leren. Het kan met meer dan alleen met boeken en dat is hier dus via een app die ze op een browser kunnen draaien.

Technologische middelen De applicatie kan op verschillende devices gebruikt worden, bijvoorbeeld op een iPad, laptop, enz. De applicatie kun je via een link gebruiken op een browser die de audio elementen ondersteunt, zoals Google Chrome, Internet Explorer en Safari.

User stories 

Als kinderen de applicatie leuk vinden willen ze het misschien vaak gebruiken om sommige woorden in het Spaans te leren.



Als ik de applicatie aan het gebruiken ben, wil ik de mogelijkheid hebben om de applicatie in het Spaans en in het Nederlands te gebruiken en altijd terug kunnen gaan naar het “Hoofdmenu”.



Sommige kinderen willen Spaans leren zodat ze in de toekomst meer mogelijkheden voor een baan kunnen hebben.



Als gebruiker van de applicatie wil ik verschillende opties hebben zoals de mogelijkheid om te luisteren naar het woord dat bij het afgebeelde object hoort.



Als gebruiker van de applicatie wil ik aantrekkelijke kleuren en afbeeldingen zien om alles beter te onthouden.



Als ik de applicatie gebruik wil ik het behalve op mijn laptop ook op mijn iPad kunnen gebruiken.

4

Site Map

5

Gebruiksscenario Martijn (11 jaar) zit in de bus naar huis en hij verveelt zich heel erg. Hij is net terug uit Spanje waar hij samen met zijn familie één week heeft doorgebracht. Sinds hij terug is, is hij geïnteresseerd in de Spaanse taal. Op zijn Samsung tablet gaat hij online kijken naar web applicaties waarmee hij Spaans kan leren. In zijn zoektocht vindt hij “Spaans voor kinderen”. Hij beslist om de applicatie te gebruiken. Hij ziet als eerst een aantaal onderwerpen om te leren:” Nummers, Kleuren, Fruit, Vervoer en Dieren”. Elk onderwerp heeft zijn eigen kleur. Hij klikt op “Dieren” en gaat verder. Nu ziet hij een kleurrijk scherm met acht dieren. Bovenin zijn scherm ziet hij twee knopjes, één voor Spaans en de andere voor Nederlands. Aan de onderkant ziet hij een knopje “Oefenen”. Hij heeft het knopje Spaans ingeschakeld. Hij drukt met zijn vinger op het plaatje aap van het touchscreen en hoort: “mono”. Zo oefent hij de namen van alle andere dieren. Hij is inmiddels aangekomen bij de bushalte waar hij wil uitstappen, stapt uit en loopt naar huis. Als hij thuis is gaat hij verder met leren. Nu hij alle namen van de dieren een beetje herkent, wil hij verder oefenen. Hij drukt op de “Oefenen”-knop. Als hij verder is, ziet hij vier knoppen: “Luisteren”, “Spreken”, “Lezen” en “Schrijven”. Hij klikt op “Spreken” want hij wil zijn uitspraak oefenen. Nu ziet hij het kleurrijke scherm met de dieren. Hij drukt op de kameel, luister het woord: “Camello” en zegt: “Camello”. Op deze manier gaat Martijn verder totdat hij de namen van de dieren beter kent.

6

Als hij klaar met “Oefenen” is, wil hij naar een ander onderwerp. Hij gaat terug naar het Hoofdmenu en kiest het onderwerp: “Vervoer”. Hier doet hij hetzelfde als bij de “Dieren” en daarna oefent met “Luisteren”. Op dat scherm moet hij op een plaatje drukken en het woord luisteren. Na een korte pauze beslist Martijn om verder te gaan met Spaans leren. Nu gaat hij meteen verder met het onderwerp “Nummers”. Hier kan hij de getallen van 0 tot 10 leren. Hij drukt op “2” en hoort het woord “dos”. Zo oefent hij verder totdat hij al de nummers gehad heeft. Nu probeert hij om zijn “Schrijven” te oefenen. Bij dit scherm ziet hij elf plaatjes en daaronder een tekstveld waar hij het woord in het Spaans moet schrijven. Hij typt “cuatto” bij 4.Hij denkt: “umm, dat schrijf je niet zo” en dan schrijft hij “cuatro”

Daarna blijkt het dat hij de nummers niet goed genoeg kent, daarom gaat hij zijn “Lezen” oefenen. Op deze manier oefent hij zijn uitspraak en leert hij hoe het woord geschreven wordt. Hij wil nu de onderwerpen “Kleuren” en “Fruit” bestuderen en hier doet hij hetzelfde als bij de andere onderwerpen. “Wat leuk” denkt Martijn, “Ik kan zo gemakkelijk thuis leren, maar het is genoeg voor vandaag, morgen zal ik deze app aan mijn vrienden aanraden.” 7

Bij het scenario zijn er belangrijke vragen zoals: •

Weet de gebruiker wat hij moet doen? • Begrijpt hij hoe hij het moet doen? Bij dit scenario weet de gebruiker wat hij moet doen. De opties zijn duidelijk en het is gemakkelijk voor de gebruiker om het proces weer te herhalen.

Functioneel ontwerp Wireframes Hoofdmenu

8

Onderwerp

Onderwerp Oefenen

9

Screendumps

3. Nederlands: De applicatie kan in het Nederlands gebruikt worden. 4. Spaans: Het kan ook gekozen worden om de applicatie in het Spaans te gebruiken.

7. Als er op een plaatje gedrukt wordt hoor je het woord in het Spaans van het gekozen plaatje. 8. Hoofdmenu: Terug naar het hoofdmenu. 9. Oefenen: Hier kun je oefenen. De gebruiker krijgt vier knoppen: “Luisteren”, “Spreken”, “Lezen” en “Schrijven”.

10

1. Hoofdmenu: Terug naar het hoofdmenu 2. Hierbij kunnen de gebruikers kiezen wat ze willen oefenen (Luisteren-Spreken-LezenSchrijven)

3. Luisteren: Als er op een plaatje gedrukt wordt moet de gebruiker goed luisteren

11

4. Spreken: De gebruiker moet het woord nazeggen.

5. Lezen: De gebruiker leest het woord dat bij het plaatje hoort.

12

6. Schrijven: Hierbij kan het woord geschreven worden. 7. Input text: Elk vakje is gekoppeld aan de aantal letters die het woord heeft. Bijvoorbeeld: Camello (bestaat uit 7 letters) In dit vakje kun je maximaal 7 letters typen.

Requirements Functionele requirements De app kan gebruikt worden via een link. De gebruiker heeft geen gebruikersnaam en password nodig om de web applicatie te gebruiken. Het systeem toont verschillende opties voor de gebruikers (bv. de gebruikers kunnen de applicatie ook in het Spaans gebruiken) De gebruiker kan altijd terug naar het hoofdmenu en kiezen welk onderwerp hij of zij wil oefenen. Niet-functionele requirements Elke actie reageert snel. De applicatie is voorbereid op het gebruik van twee talen: Spaans en Nederlands. Het systeem is geschikt voor mensen die geen kennis van de Spaanse taal hebben. Environmental requirements De applicatie is duidelijk en specifiek voor de doelgroep. Het kan overal gebruikt worden via een link op de beschikbare browser. Het kan aantrekkelijk zijn voor kinderen vanwege de kleuren en de leuke plaatjes. Voor de app wordt er geluid gebruikt. Als de gebruikers op een plaatje drukken, kunnen ze het bijbehorende woord horen en zien. Omdat de doelgroep zo jong is, is het belangrijk dat ze de app leuk vinden.

13

Logboek Datum 11 december

Tijd 5 uur

Beschrijving activiteit Jquery tutorials gelopen Video’s bekeken over programmeren in Dreamweaver

Toelichting

12 december

4 uur

Server toegevoegd in Dreamweaver. Locale verwijzing in de code moesten weg.

Problemen met mijn username en wachtwoord (Server). Pagina’s, in de server, niet goed opgeladen, soms zonder plaatjes. Geen goede verwijzing

13 december

8uur

Gekozen voor een web applicatie (Jquery) Begonnen met de applicatie. index.html begonnen. Applicatie ook beschikbaar maken in het Spaans Kijken naar de vormgeving in Adobe Photoshop

15 december- 17 december

12 uur

Afbeeldingen voor de applicatie in Adobe Photoshop gemaakt. Plaatjes toegevoegd in Dreamweaver.

Ik had problemen met de plaatjes want ze waren te groot en ze konden niet gezien worden op de tablet. Daarna heb ik ze klein gemaakt(ongeveer 35 KB per plaatje)

18 december- 20 december

18 uur

Ik maak veel gebruik van plaatjes. Het is de bedoeling dat als je op een plaatje klikt, dat je een geluid hoort dat bij het plaatje hoort. Geprobeerd om wma files op Woelmuis af te spelen

In de code is dit niet een eenvoudig proces geweest. Ik had problemen met Javascript en op mijn server (Woelmuis) kon ik geen mp3 en WMA files gebruiken.

22 december -23 december december

12 uur

Lokaal gewerkt, geen server gebruikt. Verder werken aan het maken van nieuwe plaatjes in Adobe Photoshop.

Verwijzingen soms niet goed. Problemen met a href

27 december

5 uur

Kijken naar de achtergrond kleur van elke pagina. Alles op de server (Woelmuis) gezet.

Er waren sommige problemen met de CSS style van de verschillende onderwerpen. Bijvoorbeeld, via index.html, wilde ik op vervoer.html komen, dan was de CSS Style (achterdrond kleur) van vervoer.html niet te zien.

5-7 januari

15 uur

Op internet zoeken naar html5 audio voorbeelden. Geluidsopname van de onderwerpen: Dieren- Vervoer- Nummers maken. Verwijzing maken met a href naar de geluidsopnames.

Problemen gehad met het afspelen van de geluidsopnames. In Google Chrome kon ik de mp3 files niet horen, maar wel op Safari, Internet Explorer en Firefox.

10 januari

7 uur

Problemen met de CSS Style in de navigatie, Server veranderd want ik kon geen mp3 files op mijn server spelen.

Navigatie probleem: bv. via de index.html wilde ik naar vervoer.html gaan, dan kon ik de werking van de CSS Style van

14

Uiteindelijk kon ik de server van een klasgenote gebruiken en daar kon ik de mp3 files uploaden. Alles aanpassen en geprobeerd in de server

vervoer.html (backgroundcolor: #79D818) niet zien. Daarom werd rel="external" gebruikt. De pagina werd hierna goed getoond maar het kon niet mooi optisch verschuiven. Daarna heb ik gekozen om rel="external" niet te gebruiken en in plaats daarvan een CSS Style aan de navigatie te geven die voor elk onderwerp anders was, bv, bij vervoer.html: