FAKULTETA ZA RAŒUNALNI TVO IN .UNIVERZA V LJUBLJANI FAKULTETA ZA RAŒUNALNI TVO IN INFORMATIKO

  • View
    224

  • Download
    0

Embed Size (px)

Text of FAKULTETA ZA RAŒUNALNI TVO IN .UNIVERZA V LJUBLJANI FAKULTETA ZA RAŒUNALNI TVO...

  • UNIVERZA V LJUBLJANI

    FAKULTETA ZA RAUNALNITVO IN INFORMATIKO

    Karmen Knavs

    Mobilna aplikacija za uenje rk

    DIPLOMSKO DELO

    VISOKOOLSKI STROKOVNI TUDIJSKI PROGRAM PRVE STOPNJE RAUNALNITVO IN INFORMATIKA

    Ljubljana, 2015

  • UNIVERZA V LJUBLJANI

    FAKULTETA ZA RAUNALNITVO IN INFORMATIKO

    Karmen Knavs

    Mobilna aplikacija za uenje rk

    DIPLOMSKO DELO

    VISOKOOLSKI STROKOVNI TUDIJSKI PROGRAM PRVE STOPNJE RAUNALNITVO IN INFORMATIKA

    MENTOR: vi. pred. dr. Alenka Kavi

    Ljubljana, 2015

  • To delo je ponujeno pod licenco Creative Commons Priznanje avtorstva-Deljenje pod enakimi pogoji

    2.5 Slovenija (ali novejo razliico). To pomeni, da se besedilo, slike, grafi in druge sestavine dela kot tudi rezultati diplomskega dela lahko prosto distribuirajo, reproducirajo, uporabljajo, priobujejo javnosti in predelujejo pod pogojem, da sta jasno in vidno navedena avtor in naslov tega dela; da se v

    primeru spremembe, preoblikovanja ali uporabe tega dela lahko distribuira predelava le pod licenco,

    ki je enaka tej. Podrobnosti licence so dostopne na spletni strani creativecommons.si ali na Intitutu za intelektualno lastnino, Strelika 1, 1000 Ljubljana.

    Izvorna koda diplomskega dela in v ta namen razvita programska oprema je intelektualna lastnina

    avtorja in Fakultete za raunalnitvo in informatiko Univerze v Ljubljani. Za objavljanje ali izkorianje rezultatov diplomskega dela je potrebno pisno soglasje avtorja, Fakultete za raunalnitvo in informatiko ter mentorja.

  • Fakulteta za raunalnitvo in informatiko izdaja naslednjo nalogo:

    Mobilna aplikacija za uenje rk

    Tematika naloge:

    V okviru diplomske naloge izdelajte mobilno aplikacijo za predolske in olske otroke, ki otroku pomaga pri spoznavanju abecede, posameznih rk in pri uenju pisanja rk. Aplikacija za uenje rk naj bo zasnovana na igri, tako da otroke motivira in jih poleg izobraevanja tudi zabava, hkrati pa podpira tudi kreativnost otrok. Mobilno aplikacijo zasnujte kot hibridno

    aplikacijo z uporabo spletnih tehnologij, kar omogoa uporabo aplikacije na razlinih mobilnih platformah. V diplomski nalogi raziite tudi primernost uporabe pisala za zaslone na dotik in monosti njihove uporabe v razviti aplikaciji.

  • IZJAVA O AVTORSTVU DIPLOMSKEGA DELA

    Spodaj podpisana Karmen Knavs, z vpisno tevilko 63100024, sem avtorica diplomskega dela z naslovom:

    Mobilna aplikacija za uenje rk

    S svojim podpisom zagotavljam, da:

    sem diplomsko delo izdelala samostojno pod mentorstvom vi. pred. dr. Alenke Kavi,

    so elektronska oblika diplomskega dela, naslov (slov., angl.), povzetek

    (slov., angl.) ter kljune besede (slov., angl.) identini s tiskano obliko diplomskega dela,

    soglaam z javno objavo elektronske oblike diplomskega dela na svetovnem spletu preko univerzitetnega spletnega arhiva.

    V Ljubljani, dne 11. septembra 2015 Podpis avtorja:

  • Prva zahvala velja moji mentorici vi. pred. dr. Alenki Kavi in sodelavcema z Naravoslovnotehnike fakultete: doc. Domnu Frasu in diplomantki Anji Saje. Za podporo v asu tudija se zahvaljujem svoji druini, e posebej starem. Hvala Nini in Mitji za pripomoke, Evi za testiranje in Poloni za lektoriranje. Hvala vsem, ki ste me spodbujali pri diplomskem delu in mi bili v moralno oporo, zlasti fantu Luku.

  • Kazalo

    Povzetek

    Abstract

    Poglavje 1 Uvod ..................................................................................................................... 1

    Poglavje 2 Pisanje v mobilni aplikaciji za otroke ............................................................... 3

    2.1 Rokopis ........................................................................................................................ 3

    2.1.1 Tipografija ............................................................................................................ 3

    2.1.2 Pisava v aplikaciji ................................................................................................. 4

    2.2 Uporabniki vmesnik in uporabnika izkunja ............................................................ 5

    2.3 Pisala za zaslone na dotik ............................................................................................ 5

    2.3.1 Aktivno pisalo v aplikaciji .................................................................................... 6

    2.4 Objava aplikacij za otroke ........................................................................................... 6

    Poglavje 3 Hibridne mobilne aplikacije .............................................................................. 8

    3.1 Delitev mobilnih aplikacij ........................................................................................... 8

    3.2 Apache Cordova .......................................................................................................... 8

    3.2.1 Primerjava z Unity ................................................................................................ 9

    3.2.2 Primerjava s Phonegap ......................................................................................... 9

    3.2.3 Zgradba Cordovinega projekta ........................................................................... 10

    3.2.4 Ukazna vrstica Cordova in osnovni dogodki ...................................................... 11

    3.2.5 Uporabljeni vtiniki v aplikaciji ......................................................................... 12

    Poglavje 4 Spletne tehnologije in uporabljena orodja ..................................................... 13

    4.1 HTML5 in CSS3 ........................................................................................................ 13

    4.2 Javascript ................................................................................................................... 13

    4.2.1 Uporabljene knjinice ......................................................................................... 14

    4.3 Canvas ........................................................................................................................ 14

  • 4.4 SVG ........................................................................................................................... 15

    4.5 Omejitve mobilnih brskalnikov ................................................................................. 15

    4.6 Razvojna in testna orodja .......................................................................................... 16

    Poglavje 5 Implementacija in predstavitev aplikacije ..................................................... 18

    5.1 Domaa stran ............................................................................................................. 18

    5.2 Stran s shranjenimi pisavami ..................................................................................... 20

    5.3 Stran za ustvarjanje pisave ........................................................................................ 21

    5.3.1 Zamegljeni canvas.............................................................................................. 22

    5.4 Stran za ustvarjanje voilnic .................................................................................... 24

    5.5 Odzivna grafika ......................................................................................................... 26

    Poglavje 6 Sklepne ugotovitve ........................................................................................... 27

  • Seznam uporabljenih kratic

    kratica angleko slovensko

    HTML hyper text markup language jezik za oznaevanje nadbesedila

    CSS cascading style sheets seznam slogov

    CLI command line interface vmesnik ukazne vrstice

    API application programming interface aplikacijski programski vmesnik

    SVG

    XML

    SDK

    scalable vector graphics

    extensible markup language

    software development kit

    raztegljiva vektorska grafika

    razirljivi oznaevalni jezik

    orodja za razvoj programske opreme

  • Povzetek

    V diplomski nalogi je opisana izdelava hibridne mobilne aplikacije za uenje rokopisa, ki je namenjena otrokom. Poudarek razvoja je bil na operacijskem sistemu Android. Cilj je bil

    narediti aplikacijo za otroke, ki bo pouna, zabavna in bo omogoala kreativnost. Aplikacija wly je nastajala v sodelovanju z Naravoslovnotehniko fakulteto, zato sta grafina podoba in zasnova primerno prilagojeni otrokom. Predstavljene so glavne prilagoditve in znailnosti pisav, prav tako tudi uporabljene tehnologije. Uporabnik aplikacije lahko naredi ve pisav. Ustvarja lahko voilnice in pri besedilu na njih uporabi svoje pisave. Za izdelovanje hibridne mobilne aplikacije smo izbrali Cordovo. Aplikacija temelji na Javascriptu in tehnologiji

    HTML5, predvsem na dveh njenih elementih: canvas za risanje znakov pisave in svg za

    prikaz vektorskih slik. Za interakcijo z domorodno kodo je uporabljenih ve vtinikov.

    Kljune besede: Cordova, hibridna mobilna aplikacija, rokopis, pisava, otroci, ustvarjanje

  • Abstract

    The thesis describes the building of hybrid mobile application for learning handwriting

    targeting children. The emphasis of developing is on Android operating system. The goal was

    to make an application for children which is educational, fun and where creativity is possible.

    Application wly was made in cooperation with Faculty of natural sciences and engineering,

    therefore the graphic design and concept are sufficiently adapted for the children. The main

    adaptations and charac

View more >