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-Lezen- Schrijven) 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 Tijd Beschrijving activiteit Toelichting 11 december 5 uur Jquery tutorials gelopen Video s bekeken over programmeren in Dreamweaver 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 18 december- 20 december 22 december -23 december december 12 uur Afbeeldingen voor de applicatie in Adobe Photoshop gemaakt. Plaatjes toegevoegd in Dreamweaver. 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 12 uur Lokaal gewerkt, geen server gebruikt. Verder werken aan het maken van nieuwe plaatjes in Adobe Photoshop. 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) 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. 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. 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. 10 januari 7 uur Problemen met de CSS Style in de navigatie, Server veranderd want ik kon geen mp3 files op mijn server spelen. 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. 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. 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: <div id="nav" style="backgroundcolor: #79D818"> 12-13januari 18 uur Geluidsopname van de onderwerpen: Fruit- Kleur maken. Geluidsopnamen koppelen aan de plaatjes en daarna geprobeerd op de browser. De microfoon werkte niet goed, de microfoonversterking was te laag. Fout bij de verwijzing Soms veel CPU gebruikt en de computer ging opnieuw starten 14 januari 8 uur Een knopje Oefen alles gemaakt. Hierbij werden nieuwe pagina s gemaakt 15 januari 2 uur Applicatie klaar Gekeken of de applicatie foutloos werkte. Sommige verwijzigen niet goed. Alles werd aangepast en de applicatie was klaar. Uitleg en aanpassingen Het laden van pagina: vervoer.html ging inderdaad erg traag. Daar waren de plaatjes ongeveer 1,28 MB debet aan. De plaatjes zijn nu kleiner gemaakt met Adobe Photoshop, ongeveer 35 KB. 1. Er werden veel pagina s gemaakt omdat de applicatie in 2 talen was, daarom moest ik alles 2 keer doen. Er zijn vijf onderwerpen en in elk onderwerp kun je luisteren, spreken, lezen en schrijven oefenen, daarom heb ik hiervoor aparte pagina s gemaakt. 2. Op een aantal pagina s was de navigatie niet goed. Het werd dus aangepast. 3. De applicatie kan op alle browsers behalve op Firefox gebruikt worden omdat Firefox de audio elementen niet ondersteunt wanneer het MP3 s zijn. Dit blijkt ook uit de documentatie van het HTML5 AUDIO object. 15

4. User story gemaakt. In het rapport is er een gebruiksscenario gemaakt om via de gebruiker te laten zien hoe de gebruiker de applicatie aan het ervaren was en wat voor interactie op de verschillende pagina s plaatsvond. Op deze manier konden we zien hoe de verschillende stappen doorlopen werden. 5. Navigatie probleem: bv. via de index.html wilde ik naar vervoer.html gaan, dan kon ik de werking van de CSS Style van vervoer.html (background-color: #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 : <div id="nav" style="background-color: #79D818"> 6. De mp3 files waren op Google Chrome niet te horen. Het was eigenlijk wel raar want Google Chrome kan mp3 files wel ondersteunen: http://www.w3schools.com/html/html5_audio.asp Uiteindelijk heb ik ontdekt dat er een fout met mijn mp3 files was. Blijkbaar is er een probleem opgetreden toen ik de de WMA files naar mp3 files geconverteerd had met het programma: Total Video Converter. Daarom heb ik later al de mp3 files online geconverteerd met gebruik van Online Audio Converter : http://media.io/. Nu kunnen al de mp3 files via Google Chrome beluisterd worden. 7. Het was eigenlijk de bedoeling dat als er op een plaatje geklikt werd dat er een geluid te horen was. Na veel zelf proberen met Javascript en het uitproberen van voorbeelden op internet, heb ik dat toch voor elkaar gekregen. Hierbij werd een onclick event gebruikt. 8. Ik heb besloten om de knop Oefen alles te verwijderen omdat de applicatie veel pagina s had. Ook heb ik de Introductie pagina weggehaald. Testrapport De applicatie werkt zonder problemen op een browser. Op de pagina s schrijven schalt het niet goed omdat er een HTML-TABLE gebruikt werd voor de INPUT OBJECTEN. Op de andere pagina s schalt het wel goed. Firefox kan niet gebruikt worden voor deze applicatie omdat deze browser de audio elementen niet ondersteunt wanneer het MP3 s zijn. Internet Explorer, Safari en Google Chrome kunnen prima voor deze applicatie gebruikt worden. Aanbevelingen De applicatie kan gebruik maken van meer plaatjes. Op deze manier kan de gebruiker meer worden in het Spaans leren. De applicatie kan niet gebruikt worden op de Firefox, daarom kan de applicatie ook geschikt worden gemaakt om op deze browser te gebruiken. Het zou handig zijn om een knopje Examen te maken. Zo kan de gebruiker uiteindelijk zien wat hij of zij goed of niet goed doet. 16

Bibliografie 50+ Amazing Jquery Examples- Part1. (sd). Opgeroepen op december 22, 2012, van Noupe: http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html Jquery basics. (sd). Opgeroepen op december 13, 2012, van http://jqfundamentals.com/chapter/jquery-basics Jquery mobile. (sd). Opgeroepen op december 16, 2012, van http://jquerymobile.com/ Jquery project. (sd). Opgeroepen op december 15, 2012, van jquery.org/: http://jquery.org/ jquery Tutorial. (sd). Opgeroepen op december 17, 2012, van W3schools: http://www.w3schools.com/jquery/default.asp JQuery val() Method. (sd). Opgeroepen op december 13, 2013, van W3schools: http://www.w3schools.com/jquery/html_val.asp Linking pages. (sd). Opgeroepen op december 15, 2012, van Jquery mobiles: http://jquerymobile.com/test/docs/pages/page-links.html# StackoverflowDynamically control HTML5 audio with JavaScript. (sd). Opgeroepen op december 22, 2012, van Stackoverflow: http://stackoverflow.com/questions/5697974/dynamically-control-html5- audio-with-javascript W3schools. (sd). Opgeroepen op december 22, 2012, van HTML <audio> Tag: http://www.w3schools.com/tags/tag_audio.asp W3schools. (sd). Opgeroepen op december 23, 2012, van HTML5 <audio> controls Attribute: http://www.w3schools.com/html5/att_audio_controls.asp Youtube. (sd). Opgeroepen op december 12, 2012, van Werken met images in Jquery: http://www.youtube.com/watch?v=mckrcdhizbi Youtube. (sd). Opgeroepen op december 12, 2012, van Jquery for beginners: http://www.youtube.com/watch?v=vrnqocvcls8 17