Projecte HJClic 5.0

TITULACIÓ: ENGINYERIA INFORMÀTICA

AUTORS: Aina del Tio Esteve

Maria Rosa Cardona Aragonès Noèlia Tuset Montseny

DIRECTOR:Jordi Duch Gavaldà DATA: Juny / 2011

D epartament  d’Enginyeria   Informàtica   i  Matemàtiques

Projecte HJClic 5.0

3

ÍNDEX

1   OBJECTIUS DEL PROJECTE .................................................................................................. 5  

1.1   CONCEPTE JCLIC ................................................................................................................. 5  1.2   MERCAT DE DISPOSITIUS MÒBILS I TABLETS ............................................................................ 7  1.3   GRÀFIQUES DEL CREIXEMENT DE LA DEMANDA ........................................................................ 8  1.4   TECNOLOGIES EN EL MÓN DE L’EDUCACIÓ ............................................................................ 10  1.5   OBJECTIU PRINCIPAL DEL PROJECTE .................................................................................... 11  1.6   MULTIPLATAFORMA ............................................................................................................. 11  

2   ESPECIFICACIONS DEL PROJECTE ................................................................................... 12  

2.1   ANÀLISI DE TECNOLOGIES .................................................................................................... 12  2.2   HARDWARE DISPONIBLE A NIVELL DE TABLETS ...................................................................... 13  2.3   APISMULTIPLATAFORMA: TITANIUM ...................................................................................... 15  2.4   TECNOLOGIA WEB HTML5 .................................................................................................. 16  2.5   DECISIONS DE DISSENY DE TECNOLOGIES ............................................................................. 16  2.6   REQUERIMENTS FUNCIONALS .............................................................................................. 16  2.7   REQUERIMENTS NO FUNCIONALS ......................................................................................... 17  2.8   REQUERIMENTS D’USABILITAT .............................................................................................. 17  

3   RECURSOS UTILITZATS ....................................................................................................... 18  

3.1   LLENGUATGES DE PROGRAMACIÓ ........................................................................................ 18  3.2   LLIBRERIES UTILITZADES ..................................................................................................... 18  3.3   COMPILADORS / EDITORS .................................................................................................... 19  3.4   EINES DE COORDINACIÓ ...................................................................................................... 20  

4   DISSENY ................................................................................................................................. 21  

4.1   BASE NATIVA: ANDROID I APPLE IOS .................................................................................... 21  4.2   REQUERIMENTS DE LA PLATAFORMA .................................................................................... 22  4.3   LLISTAT D’ACTIVITATS I OBJECTIUS ....................................................................................... 23  4.4   DIAGRAMES DE SEQÜÈNCIES ............................................................................................... 25  4.5   MODEL DE CASOS D’ÚS DE L’APLICACIÓ ................................................................................ 27  4.6   MODEL CONCEPTUAL DE LA INFORMACIÓ .............................................................................. 31  4.7   MODEL CONCEPTUAL DE PANTALLES .................................................................................... 35  4.8   USABILITAT ......................................................................................................................... 38  4.9   HTML5 .............................................................................................................................. 38  4.10   CONNEXIÓ DE L’APLICACIÓ AMB L’ENTORN WEB ..................................................................... 38  

5   IMPLEMENTACIÓ ................................................................................................................... 39  

5.1   DESENVOLUPAMENT DE L’APLICACIÓ ANDROID ..................................................................... 39  5.2   DESENVOLUPAMENT DE L’APLICACIÓ APPLEIOS ................................................................... 39  5.3   DESENVOLUPAMENT DE L’APLICACIÓ HTML5 ....................................................................... 39  5.4   EVOLUCIÓ DE L’APLICACIÓ ................................................................................................... 39  5.5   EXPLICAR EL CODI EN DETALL .............................................................................................. 39  

6   CONCLUSIONS ...................................................................................................................... 39  

7   MANUALS D’ÚS ..................................................................................................................... 40  

7.1   ANDROID ............................................................................................................................ 40  7.2   APPLEIOS .......................................................................................................................... 50  

Projecte HJClic 5.0

4

7.3   JOC ................................................................................................................................... 50  

8   BIBLIOGRAFIA I WEBGRAFIA .............................................................................................. 51  

Projecte HJClic 5.0

5

1 Objectius del projecte

1.1 Concepte JClic

El projecte JClic és una evolució del programa Clic 3.0, una eina per a la creació d'aplicacions didàctiques multimèdia amb més de 10 anys d'història. Al llarg d'aquest temps han estat molts els educadors i educadores que l'han fet servir per crear activitats interactives on es treballen aspectes procedimentals de diverses àrees del currículum, des d'educació infantil fins a secundària.

Els objectius perseguits en iniciar el projecte van ser:

− Fer possible l'ús d'aplicacions educatives multimèdia "en línia", directament des d'Internet.

− Mantenir la compatibilitat amb les aplicacions Clic 3.0 existents. − Fer possible el seu ús en diverses plataformes i sistemes operatius, com ara

Windows, Linux, Solaris o Mac OS X. − Utilitzar un format estàndard i obert per a l'emmagatzematge de les dades, per tal

de fer-les transparents a altres aplicacions i facilitar la seva integració en bases de dades de recursos.

− Ampliar l'àmbit de cooperació i intercanvi de materials entre escoles i educadors de diferents països i cultures, facilitant la traducció i adaptació tant del programa com de les activitats creades.

− Recollir els suggeriments de millores i ampliacions que els usuaris heu anat enviant.

− Fer possible que el programa pugui anar ampliant-se a partir del treball cooperatiu entre diversos equips de programació.

− Crear un entorn de creació d'activitats més potent, senzill i intuïtiu, adaptant-lo a les característiques dels actuals entorns gràfics d'usuari.

L'eina de programació escollida ha estat el Java, i el format per a emmagatzemar les dades de les activitats és l'XML.

1.1.1 Components

El JClic està format per quatre aplicacions:

− JClicapplet: Un "applet" que permet incrustar les activitats JClic dins d'una pàgina web.

− JClicPlayer: Un programa independent, que un cop instal·lat permet realitzar les activitats des del disc dur de l'ordinador (o des de la xarxa) sense que calgui estar connectat a Internet.

− JClicautor: L'eina d'autor que permet crear, editar i publicar les activitats d'una manera més senzilla, visual i intuïtiva.

− JClic reports: Un mòdul de recollida de dades i generació d'informes sobre els resultats de les activitats fetes pels alumnes.

El primer mòdul (l'applet) es descarrega automàticament la primera vegada que es visita alguna pàgina que contingui un projecte JClic incrustat. Els altres tres es poden instal·lar a l'ordinador mitjançant Java WebStart des de la pàgina de descàrregues.

Projecte HJClic 5.0

6

El JClic és un projecte de programari lliure que el Departament d'Educació de la Generalitat de Catalunya posa a disposició de la comunitat sota els termes de la Llicència Pública General de GNU (GPL). Això us permet emprar-lo, distribuir-lo i modificar-lo lliurement sempre que respecteu determinades condicions, entre les quals cal destacar el reconeixement d'autoria i la persistència de la llicència GPL en qualsevol obra derivada. El codi font del JClic es troba disponible al portal de desenvolupament.

1.1.2 Formats de dades

Les dades del JClic s'emmagatzemen en format XML. Això permet la seva integració en bancs de recursos d'estructura complexa, així com la reutilització dels projectes JClic en altres aplicacions.

El JClic treballa amb dos tipus de fitxers:

a) Fitxers amb extensió .jclic

Són documents XML que contenen la descripció completa d'un projecte JClic. L'estructura d'aquests documents està descrita en l'esquema XML jclic.xsd.

L'element arrel dels documents jclic porta el nom <JClicProject> i conté quatre elements principals:

• <settings> Informació sobre els autors/es del projecte, descriptors temàtics, revisions, etc.

• <activities> Conté elements del tipus <activity> que defineixen el funcionament i les característiques pròpies de cada activitat.

• <sequence> Descriu l'ordre en què s'han de presentar les activitats i el comportament dels botons d'avançar i retrocedir.

• <mediaBag> Relació del nom i la ubicació de tots els ingredients necessaris per a executar les activitats: imatges, sons, vídeo, MIDI, fonts TTF... etc.

b) Fitxers amb extensió .jclic.zip

Són arxius ZIP estàndard que contenen un únic document .jclic i alguns o tots els ingredients (imatges, fitxers multimèdia...) necessaris per executar les activitats. L'ús d'aquest format permet encapsular un projecte en un únic fitxer.

1.1.3 Internacionalització

Tots els textos i missatges del JClic es troben en fitxers externs, per tal de simplificar la seva traducció a altres idiomes.

Tant els textos del programa com els de les activitats es troben en format Unicode. Això permet emprar-lo amb alfabets i sistemes d'escriptura no-occidentals. El programa suporta també la representació i escriptura bidireccional (dreta-esquerra o esquerra-dreta) quan

Projecte HJClic 5.0

7

l'idioma emprat així ho requereixi. El projecte de desenvolupament està obert a la participació de tots els que vulguin elaborar traduccions del programa a altres idiomes.

1.2 Mercat de dispositius mòbils i tablets

L’ús de les Tecnologies de la Informació i de la Comunicació, TIC, no paren de créixer i d’estendre’s, fins a integrar-se completament en tots els àmbits de la societat actual. El desenvolupament d’Internet ha significat que la informació estigui descentralitzada, abans les fonts d’informació i coneixement estaven concentrades en els llibres, l’escola, la universitat, etc, aquests límits s’han trencat donant accés il·limitat a la informació. Actualment el mercat dels dispositius mòbils i tablets està en permanent desenvolupament. Les empreses que fabriquen aquests productes estan en constant competència per treure al mercat en primícia els dispositius amb més i millors prestacions. A més es recolzen en uns grans operatius de marketing que generen una forta expectativa en els consumidors fidels que adquireixen tots els productes que treuen al mercat. En aquest moment les empreses que destaquen en el mercat de dispositius mòbils i tablets són Apple, amb el sistema operatiu mòbil Apple IOS, i Google, amb el sistema operatiu mòbil Android, basat en Linux. Això queda reflectit en els estudis i els anàlisis de diferents analistes i consultors de renom com ComsCore, Gartner i ChangeWave els quals fan les seves previsions respecte l’evolució d’aquestes tecnologies. A continuació s’exposen tres estudis que ho avalen: 1. ComsCare[1] considera l’imparable ascens d’Apple a Europa, situant-se en primer lloc

en el mercat al ser utilitzat per uns 29 milions d’usuaris que disposen de diferents dispositius d’aquesta marca com iPad, iPhone o iPod. En segon lloc apareix Google i el seu Android utilitzat per casi 14 milions d’usuaris.

2. La consultora Gartner[2] revela mitjançant un estudi que Apple IOS continuarà

dominant el mercat mundial de tablets fins l’any 2015. Figurarà com el 69% dels subministradors de tablets del 2011 i representarà el 47% del mercat de tablets l’any 2015. Al contrari, estimen que Android passarà de disposar del 20% del mercat de tablets al 2011 al 39% al 2015. Segons els seus analistes el tablet no realitza només les mateixes tasques que un ordinador però amb unes dimensions reduïdes, sinó que proporciona una experiència més abundant en el consum de continguts gracies al ecosistema d’aplicacions i serveis que els suporten.

3. ChangeWave[3]considera que el domini d’Apple en el terreny de les tablets té un futur

assegurat ja que segons el seu estudi és l’elecció de quatre de cada cinc usuaris. A la Figura 1es pot observar el resultat d’aquest estudi on es preguntava als usuaris quina tablet decidirien comprar i a la Figura 2s’observa el creixement de compradors a curt termini.

Projecte HJClic 5.0

8

Figura 1. Planificació de compres de tablets

Figura 2. La demanda de tablets

1.3 Gràfiques del creixement de la demanda

Es pot constatar que existeix un creixement de les tecnologies d’última generació, els dispositius mòbils s’han convertit en un mitjà i una eina de comunicació, i com revelen les dades de la consultora Gartner[2] al 2013 hi haurà més tràfic de dades per xarxes mòbils que per xarxes fixes. El coneixement de l’existència d’aquests dispositius s’ha incrementat progressivament, no només per ús personal, sinó també en el mon empresarial. S’ha convertit en l’eina indispensable per revisar i respondre correus electrònics, accedir a Internet, fer el seguiment de les noticies, i fins i tot per executar activitat i programes. Les següents figures mostren la tendència del mercat per un cert tipus de tecnologia mòbil, concretament els dispositius de la marca Apple, l’augment exponencial de les tablets, una comparativa amb la resta de dispositius i la seva evolució en el propers anys:

Projecte HJClic 5.0

9

Figura 3. Previsió de vendes de dispositius Apple

Figura 4. Vendes de dispositius iPhone

Figura 5. Vendes de dispositius iPad durant l’any 2010

Projecte HJClic 5.0

10

Figura 6. Previsió d’evolució de dispositius mòbils

1.4 Tecnologies en el món de l’educació

Les noves tecnologies ara més que mai incideixen de manera significativa a tots els nivells del mon educatiu. Les noves generacions van assimilant aquesta nova cultura de manera natural, en canvi pels altres moltes vegades comporta un important esforç de formació i adaptació. Els més joves en el seu procés d’aprenentatge continu amb les noves tecnologies fan que es comenci a desenvolupar en entorns com la família, l’oci, etc..., i l’escola ha d’integrar aquesta nova cultura de l’alfabetització tecnològica, font d’informació, instrument per a realitzar treballs, material didàctic, eina comunicacional, etc... A l’escola la progressiva incorporació dels ordinadors a les aules fa apropar aquesta nova cultura als alumnes des dels primers cursos, com un instrument més, i que tindrà diverses finalitats: informatives, lúdiques, comunicatives, instructives, etc... És important que el professorat faciliti a l’alumnat unes tècniques i hàbits que li permetin un bon tractament de la informació. I a més a més, li permetrà realitzar activitats educatives dirigides a l’aprenentatge dels seus alumnes, amb l’ajuda d’eines i aplicacions per a la creació de recursos didàctic.

Projecte HJClic 5.0

11

1.5 Objectiu principal del projecte L’objectiu principal és realitzar una aplicació per dispositius mòbils d’última generació que permeti gestionar les activitats educatives multimèdia que ofereix l’entorn JClic. L’aplicació es descarregarà i emmagatzemarà les activitats al dispositiu, per posteriorment adaptar-les a un llenguatge web i visualitzar el resultat a l’usuari oferint-li la possibilitat de jugar, mantenint en tot moment l’essència de l’entorn JClic. La proposta s’implementarà sobre dos plataformes mòbils amb la intenció d’arribar a un volum més elevat de mercat. Aquestes són la plataforma Android de Google i la plataforma IOS d’Apple. HTML5 Nombre d’activitats Gradualment afegir funcionalitats de les activitats

1.6 Multiplataforma Per arribar al màxim de volum de mercat, s’ha considerat que l’aplicació sigui multiplataforma perquè s’executi sobre diferents arquitectures. Per complir aquest objectiu s’ha fet una anàlisi d’una plataforma de desenvolupament mòbil per comparar el seu rendiment amb el dels llenguatges natius de cada arquitectura. La plataforma AppceleratorTitanium permet crear aplicacions en un llenguatge i després mitjançant interfícies de programació d’aplicacions, API, generar les aplicacions natives per cada estructura.

Projecte HJClic 5.0

12

2 Especificacions del projecte

2.1 Anàlisi de tecnologies

2.1.1 Tecnologia Android Android és un sistema operatiu basat en software lliure per dispositiu mòbils, com telèfons intel·ligents o tablets. L’estructura del sistema operatiu es composa d’aplicacions que s’executen en un framework Java d’aplicacions orientades a objectes sobre el nucli de les biblioteques de Java en una màquina virtual Dalvik amb compilació en temps d’execució. Utilitza tant APIs publiques com privades. Les APIs publiques son llibreries que no varien les seves crides, garanteixen la compatibilitat amb versions anteriors i son les que treballen sobre elements basics del sistema operatiu a tots els nivells, com per exemple, la visualització d’elements, el control dels acceleròmetres, etc,... Las APIs privades són les que controlen els elements físics del dispositiu (el hardware) d’una manera més propera aquest i amb millor rendiment. És una capa inferior que utilitzen les APIs publiques per arribar al dispositiu, però aquestes pateixen modificacions constants que no garanteixen la compatibilitat dels mètodes, arguments, crides, ... l’ús d’aquestes redueix rendiment a l’aplicació.

2.1.2 Tecnologia iPhoneOS 4 iOSd’Apple és un sistema operatiu mòbil desenvolupat inicialment per a l’iPhone, sent utilitzat després al’iPod Touch i iPad. És un derivat de Mac OS X, té quatre capes d’abstracció: la capa del nucli del sistema operatiu, la capa dels “Serveis Principals”, la capa de “Mitjans de Comunicació” i la capa de “Cocoa Touch”. És un sistema estable i elegant. Disposa d’una API pel desenvolupament de la interfície gràfica, donant-li un estil unificat, homogeni i que la fa intuïtiva per l’usuari. Només es poden utilitzar APIs publiques, la capa d’abstracció ens garanteix el funcionament en futures versions de IOS i que els dispositius mòbil donaran sempre la mateixa funcionalitat.

Projecte HJClic 5.0

13

2.1.3 Tecnologia Windows Phone

Windows Phone és el sistema operatiu per mòbils de Microsoft, antigament anomenat Windows Mobile. És un sistema estable, modificable i amb capacitat per emmagatzemar plugins o widgets. Es basa en el nucli del sistema operatiu Windows CE i disposa d’un conjunt d’aplicacions bàsiques utilitzant les API de Microsoft Windows. Pel desenvolupament es necessita el software Visual Studio de Windows.

2.1.4 Tecnologia Symbian Os

Symbian és el sistema operatiu de Nokia, va ser el resultat de l’aliança de diverses empreses de telefonia mòbil, entre elles Nokia, Soni Ericsson, Psion, Samsung, Siemens, etc. L’objectiu va ser crear un sistema operatiu per terminals mòbils que pogués competir amb la resta de sistemes operatius de la competència. Disposa de sis interfícies d’usuari o plataforma.

2.2 Hardware disponible a nivell de tablets

2.2.1 AppleiPad 2 El nou dispositiu d’Apple, l’iPad 2, disposa d’un processador de doble nucli, el doble de ràpid que el de l’actual iPad, els nous xips gràfics són nou vegades més ràpids i és un terç més prim que el model actual. També disposa de dos càmeres, una a la part de davant i l’altra a la part de darrera, i un nou iPad de color blanc.

Projecte HJClic 5.0

14

2.2.2 Samsung GalaxyTab 10.1 Samsung va presentar la seva nova GalaxyTab 10.1 al Mobile WorldCongress, de 10,1 polzades, resolució de 1280 × 800 píxels, processador de 1 GHz de doble nucli Tegra 2, dos càmeres, una a la part de davant i l’altra a la part de darrera. La càmera posterior pot gravar vídeo d’alta definició i disposa de flash. El sistema operatiu és Android 3.0 Honeycomb.

2.2.3 MotorolaXoom Una altra tablet amb Android 3.0 Honeycomb, la Xoom de Motorola. Es podria dir que és una màquina similar a la GalaxyTab. De 10.1 polzades, la resolució és de 1280×800 píxels, i el seu pes de 730 grams. Les seves dimensions complertes són 249.1 × 167.8 × 12.9 mil·límetres.

2.2.4 HP TouchPad Aquesta tablet d’HP executa una nova versió del sistema operatiu webOS. Processador de 1.2 GHz Qualcomm Sn apdragon de doble nucli, amb un 1 GB de memòria RAM, 9.7 polzades de pantalla, 1024 × 768 de resolució i inclou 4G. Les dimensions són de 190×240 mm, grossor de 13.7 mm, i peso 700 grams. Webcam de 1.3 megapíxels, sortida de auriculars, sistema de carga inductiva Touchtone i ranura microUSB per recarrega’l i connecta’l a l’ordinador.

Projecte HJClic 5.0

15

2.2.5 BlackBerryPlayBook Research In Motion (RIM) és la quarta plataforma principal després d’Android, webOS iiOS. Amb processador de doble nucli d’1 GHz, 1GB de memòria RAM, reproducció de vídeo HD 1080p i sortida HDMI. Desenvolupat per BlackBerry amb interfície d’usuari dissenyada per QNX.

2.3 APIsmultiplataforma: Titanium

La plataforma Appcelerator Titanium és una ajuda per als desenvolupadors web per crear aplicacions natives, rapides i intuïtives per sistemes operatius iPhone, Android i BlackBerry,

És una eina multi-plataforma que ajuda a superar els diferents llenguatges de programació de les plataformes natives i el substitueix per Javascript, un llenguatge més proper i conegut pels desenvolupadors web.

Projecte HJClic 5.0

16

Les característiques d’aquesta plataforma inclouen:

• Recolzament a les tecnologies web basades en estàndards: HTML, CSS i Javascript en totes les plataformes, juntament en PHP, Python i Ruby per plataformes d’escriptori.

• Suport integrat pels llenguatges JavaScript i AJAX marcs inclosos jQuery, Yui, MooTools, Scriptaculous i altres.

• Una plataforma independent de l’API per l’accés natiu a les components de la interfície d’usuari incloses les barres de navegació, menús, quadres de diàleg i alertes, i la funcionalitat del dispositiu natiu incloent el sistema d’arxius, so, xarxa i base de dades local.

• API d’accés a la funcionalitat nativa com la geolocalització mòbil, acceleròmetre i mapes.

• Extensibilitat a traves d’interfícies obertes i cohesió de llicencies, permetent als desenvolupadors introduir una ajuda addicional per llenguatges de scripting, còdecs multimèdia i funcionalitat especifica del dispositiu.

2.4 Tecnologia web HTML5

2.5 Decisions de disseny de tecnologies

2.6 Requeriments funcionals

A continuació es detalla la descripció del comportament de l’aplicació:

− Llistar els jocs JClic que ja s’han descarregats al dispositiu.

− Afegir un joc JClic al dispositiu.

− Llistar els jocs JClic disponibles per descarregar al dispositiu.

− Disposar d’un arxiu on indiqui els jocs que estan descarregats al dispositiu.

− Cercar un joc JClic, podent filtrar per l’àrea, l’idioma, el nivell, el títol i/o l’autor del joc.

− Mostrar la imatge del joc junt amb la descripció quan aquest ja està descarregat.

− Mostrar una pantalla d’inici abans del començament de l’aplicació.

− Descarregar el joc de la pàgina oficial d’Internet.

− Descomprimir l’arxiu del joc per obtenir els fitxers que permetran visualitzar les activitats.

− Detectar si el dispositiu té connexió Internet abans de descarregar el joc.

− Mostrar una barra de procés durant la descàrrega del joc.

− Traduir l’arxiu XML amb l’extensió .jclic a la Notació d’Objectes JavaScript JSON per la seva posterior utilització a l’HTML5 de les activitats.

Projecte HJClic 5.0

17

2.7 Requeriments no funcionals

− Funcionament sobre la plataforma d’Android i iOS.

− El desenvolupament de l’aplicació s’ha de realitzar en Java per l’Android i en Objective C per AppleiOS.

− L’aplicació haurà de ser modular de manera que es puguin realitzar ampliacions per les dues plataformes tant per la part de l’aplicació com la part de les activitats.

− L’entorn gràfic de l’aplicació ha de ser intuïtiu, accessible i usable ja que està enfocat a un entorn educatiu, dissenyant la interacció amb l’usuari de manera clara i elegant.

− Habilitar l’orientació horitzontal i vertical de l’aplicació per aprofitar la funcionalitat del dispositiu.

− L’aplicació ha de tenir tolerància d’errades.

2.8 Requeriments d’usabilitat

2.8.1 Perfils d’usuari de l’aplicació L’aplicació serà utilitzada per usuaris mòbil amb un nivell informàtic baix, aquesta té una interfície bàsica senzilla i intuïtiva per a que l’usuari pugui realitzar les tasques de manera autodidacta. Com que els usuaris podran ser de diferents edats, l’aplicació ha de ser apte per la major varietat d’usuaris.

2.8.2 Perfils d’usuari

Projecte HJClic 5.0

18

3 Recursos utilitzats

3.1 Llenguatges de programació Java És un llenguatge de programació orientat a objectes, desenvolupat per SunMicrosystems a principis dels anys 90. El llenguatge pren molta de la sintaxis de C i C++, però té un model d’objectes més simple i elimina eines de baix nivell, que solen induir a molts errors, com la manipulació directa de punters o memòria. Aquest llenguatge té moltes característiques importants com ara que és robust, interpretat, multi tasca, dinàmic, distribuït però la més important és la portabilitat, que permet funcionar en qualsevol plataforma. Objective C És un llenguatge de programació orientat a objectes, creat com un superconjunt de C però que implementa un model d’objectes semblant al de Smalltalk. Objective C consisteix amb una capa molt fina situada per damunt del llenguatge C, que fa que sigui possible compilar qualsevol programa escrit en C amb un compilador d’Objective C, i també pot incloure lliurement codi en C dintre d’una classe d’Objective C. Actualment s’utilitza com a llenguatge principal de programació Mac OS X i GNUstep. HTML5

JavaScript

3.2 Llibreries utilitzades Gson.jar Gson és una llibreria que pot ser utilitzada per convertir objectes Java a la seva representació amb JSON. També es pot utilitzar per a convertir cadenes JSON a un objecte equivalent de Java. Gson pot treballar amb objectes Java arbitraris inclosos els objectes pre-existents que no tenen el codi font. Hi ha alguns projectes de codi obert que poden convertir objectes Java a JSON. No obstant, la majoria d’ells requereixen que es col·loquin les anotacions de Java a las seves classes, cosa que no es pot fer si no es té accés al codi font. La majoria tampoc son totalment compatible amb l’ús de Java Generics. Gson considera ambdós com objectius de disseny molt important. Jdom.jar JDOM és una API per llegir, crear i manipular documents XML d’una manera senzilla i molt intuïtiva per qualsevol programador en Java, a diferència d’altres Api’s com DOM i SAX, les quals es van idear sense pensar en cap llenguatge en concret, i per això són més difícils d’utilitzar.

Projecte HJClic 5.0

19

3.3 Compiladors / Editors Part Android Android SDK És el kit de desenvolupament necessari per a programar i implementar tot tipus d’aplicacions per Android, el sistema operatiu per a mòbils proposat per Google. Utilitzant Java amb les API’s que inclou aquest kit es poden desenvolupar aplicacions i inclús depurar-les. Per a facilitar el desenvolupar d’aquestes aplicacions les llibreries que inclouen aquest paquet són compatibles amb editors de programació com l’Eclipse. Eclipse És un entorn de desenvolupament integrat de codi obert i multiplataforma que permet programar, desenvolupar i compilar aplicacions Java. A més l’usuari pot afegir plugins que permetran utilitzar-lo per altres llenguatges de programació. És un entorn amb una atractiva interfície que fa que sigui fàcil i agradable utilitzar. Aquesta plataforma, ha sigut utilitzada per desenvolupar entorns de desenvolupament integrats com l’ IDE de Java anomenat Java Development Toolkit i el compilador ECJ que s’entrega com a part de l’Eclipse. No obstant, també es poden utilitzar per altres tipus d’aplicacions client, com BitTorrent o Azureus.

Part AppleiOS iOS SDK És el kit de desenvolupament d’Apple que permet desenvolupar aplicacions natives per l’iPhone i l’iPAD. Aquest kit inclou una crida a Cocoa Touch i un simulador per poder realitzar les proves de les aplicacions, fet que obre moltes portes al desenvolupadors, en especial pel sector dels videojocs. El desenvolupament de les aplicacions requereixen XCode, i la seva distribució es farà exclusivament a través de l’APPStore d’Apple, amb el qual les aplicacions natives han de tenir el vist hi plau d’Apple.

XCode És l’entorn de desenvolupament integrat d’Apple Computer (IDE) per a Mac OS X. El paquet complet d’Xcode inclou totes les eines que necessita per crear, depurar i optimitzar les seves pròpies aplicacions per a Mac iPhone i iPAD. XCode és un entorn de treball gràfic que integra un editor de text ressaltat de sintaxis, una robusta construcció de sistema de control, un depurador i el potent compilador GCC. Aquest entorn disposa d’una interfície gràfica fàcil d’utilitzar ja que disposa d’assistents per la creació de projectes.

Projecte HJClic 5.0

20

3.4 Eines de coordinació Una part molt important en la coordinació entre els membres del projecte ha sigut la utilització d’un sistema de control de versions. Un sistema de control de versions consisteix en la gestió de diversos canvis que es realitzen sobre els elements d’algun producte o una configuració del mateix. Els sistemes de control de versions faciliten l’administració de les diferents versions de cada producte desenvolupat, així com les possibles especialitzacions realitzades. El control de versions es realitza principalment en la indústria de la informàtica per controlar les diferents versions del codi font. Hi ha varies eines de control de versions com ara el CVS, Subversion, Mercurial, SourceSafe, Git, ... . Git Git és un dels sistemes de control de versions més popular entre els desenvolupadors. Bona part del mèrit és del GitHub, ja que és un excel·lent servei d’allotjament de repositoris de software amb aquest sistema, i que ofereix avui en dia un conjunt de característiques molt útils pel treball en equip. Aquest sistema de versions és utilitzat per molts projectes com jQuery, reddit, Redis, curl, entre d’altres. I a més, algunes de les grans empreses d’Internet, com Facebook, tenen allí els seus desenvolupament públics, com l’SDK, llibreries, exemples, etx. Encara que Git és un sistema descentralitzat (no necessita d’un servidor on pujar els canvis, sinó que els desenvolupadors poden enviar-se’ls els uns als altres des dels seus equips), és molt habitual que els equips de treball utilitzin el GiHub per tenir el repositori de codi en el que treballa tot l’equip. Al tenir el codi al GitHub podem decidir si aquest serà públic o si la seva visibilitat estarà limitada a uns usuaris determinats, que són els únics que tindran permís per accedir al codi i pujar canvis.

Projecte HJClic 5.0

21

4 Disseny

Considerant el volum de treball després d’analitzar els objectius i requisits del projecte de l’aplicació per dispositius mòbils, s’ha decidit dividir les tasques en tres parts ben diferenciades: l’aplicació sobre base nativa Android, l’aplicació sobre base nativa Apple iOS i la interpretació de les activitats JClic a la posterior creació d’aquestes en el llenguatge web HTML5.

4.1 Base nativa: Android i Apple iOS L’aplicació s’ha dissenyat per ser implementada sobre bases natives, tant per la plataforma Android en Java, com per la plataforma Apple iOS en Objective C.

S’ha realitzat el mateix disseny independentment de la plataforma on s’hagi d’implementar. Aquest s’ha pensat amb la major flexibilitat per poder adaptar-lo a la interfície i llenguatge de cada dispositiu.

4.1.1 Accés a la informació local El funcionament de l’aplicació requereix d’un fitxer xml amb les característiques de cadascun dels jocs disponibles en l’entorn JClic. Aquest fitxer s’anomena jocs.xml i s’emmagatzema dins l’aplicació. A través d’aquest s’obté la llista de jocs disponibles per l’usuari de l’aplicació. A l’iniciar l’aplicació, aquesta llegirà el fitxer jocs.xml i crearà una estructura de dades amb la informació dels jocs. L’estructura s’ha pensat per adquirir un rendiment òptim a l’hora d’accedir a les dades ja que s’ha observat que es consultarà la informació regularment. Un altre fitxer disponible per l’aplicació és el descarregats.xml que el crearà i l’actualitzarà la mateixa aplicació, aquest contindrà els identificadors dels jocs descarregats per l’usuari. Aquest fitxer s’emmagatzemarà dintre el dispositiu mòbil i es controlarà que no s’hagi eliminat.

4.1.2 Descarrega i preparació de la informació joc Una vegada l’usuari ha seleccionat un joc de la llista dels no descarregats l’aplicació accedirà a la informació del joc per obtenir l’adreça del recurs a Internet (URL) que conté les imatges, sons i dades del joc. Mitjançant aquesta URL es connectarà a Internet i es descarregarà el fitxer. El fitxer descarregat s’ha de descomprimir, en una carpeta amb el nom de l’identificador del joc, dintre del dispositiu ja que per procedir a descarregar-lo l’han hagut d’empaquetar prèviament. Per tal que l’usuari identifiqui que s’ha finalitzat la descarrega del joc, es visualitzarà per la pantalla del dispositiu la imatge del joc seleccionat, que s’ha descarregat de la mateixa manera que el fitxer comprimit explicat anteriorment. Per identificar quina de les imatges és la principal, aquesta s’emmagatzema amb el nom de l’identificador del joc.

Projecte HJClic 5.0

22

En aquest punt, l’aplicació llegeix el fitxer xml amb extensió .jclic que conté les activitats educatives. Aquest està situat al directori del joc de dintre del dispositiu. A mesura que s’anirà llegint la informació d’aquest fitxer s’emmagatzemarà en una estructura de dades per la seva posterior traducció a la Notació d’Objectes JavaScript (JSON).

La notació resultat JSON s’emmagatzema en un fitxer anomenat data.js que serà interpretat per l’entorn web per la visualització de les activitats,

L’aplicació disposa d’un conjunt de plantilles necessàries per l’adaptació del joc JClic a l’entorn web, que s’hi accedeix mitjançant un fitxer html estàndard anomenat index_assets.html. Per finalitzar el procés de descàrrega del joc es copia el fitxer index_assets.html dins la carpeta del joc com a index.html, ja que és el primer fitxer que llegeix l’entorn web des de l’aplicació.

4.2 Requeriments de la plataforma

4.2.1 Part Android Per tal d’executar l’aplicació es requereix un dispositiu de tecnologia Android amb disponibilitat de connexió a Internet. Es recomana un dispositiu tablet PC amb el que es pugui interactuar a través d’una pantalla tàctil de 7 polsades.

4.2.2 Part AppleiOS Es requereix un dispositiu de tecnologia AppleiOS amb disponibilitat de connexió a Internet per tal d’executar l’aplicació Es recomana un dispositiu tablet PC amb el que es pugui interactuar a través d’una pantalla tàctil de 10 polsades.

Projecte HJClic 5.0

23

4.3 Llistat d’activitats i objectius A continuació s’especifiquen les diferents activitats a realitzar per l’usuari:

Activitat 1: Jugar joc Aquesta tasca permet a l’usuari jugar amb un joc JClic descarregat prèviament al dispositiu.

Figura 7. Diagrama de l’activitat Jugar joc

Projecte HJClic 5.0

24

Activitat 2: Afegir joc Permet a l’usuari afegir un joc al dispositiu per poder jugar-hi posteriorment.

Figura 8. Diagrama de l’activitat Afegir joc

Projecte HJClic 5.0

25

Activitat 3: Cercar joc Permet a l’usuari localitzar un joc mitjançant deferents criteris de cerca.

Figura 9. Diagrama de l’activitat Cercar joc

4.4 Diagrames de seqüències

4.4.1 Jugar a un joc

Figura 12. Diagrama de seqüència Jugar a un joc

Projecte HJClic 5.0

26

4.4.2 Instal·lar un joc

Figura 13. Diagrama de seqüència Instal·lar un joc

4.4.3 Cercar un joc

Figura 14. Diagrama de seqüència Cercar un joc

Projecte HJClic 5.0

27

4.5 Model de casos d’ús de l’aplicació

4.5.1 Diagrama de casos d’ús

Figura 10. Diagrama de casos d’ús

Projecte HJClic 5.0

28

4.5.2 Especificació textual dels casos d’ús

Cd’u 1: Llistar jocs descarregats Resum de la funcionalitat: Llistar tots els jocs que l’usuari ja s’ha descarregat. Actor: Usuari.

Pre-condicions: Cap. Procés normal principal:

1. El sistema mostra per pantalla tots els jocs que prèviament l’usuari s’ha descarregat i que s’han emmagatzemat al fitxer de descarregats.xml de dintre el dispositiu.

Alternatives de procés: Cap.

Excepcions: 1. L’usuari encara no s’ha descarregat cap joc i el fitxer de descarregats.xml no existeix.

Cd’u2: Afegir joc Resum de la funcionalitat: Permet seleccionar un joc per la seva posterior descàrrega. Actor: Usuari.

Pre-condicions: Cap. Procés normal principal:

1. Executar el cas d’ús 3. Llistar jocs. 2. L’usuari selecciona el joc que vol descarregar.

3. L’aplicació mostra la descripció del joc seleccionat per l’usuari. 4. Executar el cas d’ús 5. Instal·lar joc.

Alternatives de procés: Cap. 2. L’usuari selecciona cercar un joc.

2a. Executar el cas d’ús 4. Cercar joc. Excepcions: Cap.

Cd’u3: Llistar jocs Resum de la funcionalitat: Llistar tots els jocs que l’usuari encara ha descarregat. Actor: Usuari.

Pre-condicions: Venir del cas d’ús 2. Afegir joc. Procés normal principal:

Projecte HJClic 5.0

29

1. El sistema mostra per pantalla tots els jocs disponibles per descarregar, aquests jocs estan indicats en un fitxer anomenat jocs.xml que conté l’aplicació.

Alternatives de procés: Cap.

Excepcions: Cap.

Cd’u4: Cercar joc Resum de la funcionalitat: Permet a l’usuari seleccionar un joc a partir d’uns criteris de cerca. Actor: Usuari.

Pre-condicions: Venir del cas d’ús 2. Afegir joc. Procés normal principal:

1. L’aplicació mostra la pantalla amb els filtres disponibles. 2. L’usuari selecciona els filtres que vol realitzar.

3. L’aplicació mostra la llista de jocs que compleixen els filtres seleccionats per l’usuari.

Alternatives de procés: Cap Excepcions:

1. Que no existeixi cap joc amb els filtres seleccionats.

Cd’u5: Instal·lar joc Resum de la funcionalitat: Permet a l’usuaridescarregar i instal·lar el joc seleccionat.

Actor: Usuari. Pre-condicions: Venir del cas d’ús 2. Afegir joc.

Procés normal principal: 1. L’aplicació es connecta a Internet per descarregar-se el joc.

2. L’aplicació descomprimeix el joc dintre del dispositiu. 3. L’aplicació tradueix l’xml del jclic a JSon.

4. L’aplicació executa el cas d’ús 7. Actualitzar llista descarregats. Alternatives de procés: Cap.

Excepcions: 1. A l’intentar descarregar el joc no es disposa de connexió a Internet.

1a. L’aplicació mostra un missatge a l’usuari indicant que no es disposa de connexió a Internet.

Projecte HJClic 5.0

30

Cd’u6:Jugar joc Resum de la funcionalitat: Permet a l’usuari jugar amb un joc prèviament descarregat. Actor: Usuari.

Pre-condicions: Haver executar el cas d’ús 1. Llistar jocs descarregats o el cas d’ús 4. Cercar joc.

Procés normal principal: 1. L’usuari selecciona un joc de la llista de descarregats o de la llista filtrada.

2. L’aplicació mostra la descripció del joc amb la seva imatge. 3. L’usuari selecciona jugar.

Alternatives de procés: Cap. Excepcions:

3. La carpeta que conté el joc seleccionat no existeix a dintre el dispositiu. 3a. L’aplicació mostra un missatge a l’usuari indicant que el joc no està disponible i que se l’ha de tornar a descarregar. 3b. Executar el cas d’ús 5. Instal·lar joc.

Cd’u7: Actualitzar llista descarregats Resum de la funcionalitat: Permet actualitzar la llista de dintre del dispositiu amb els jocs que s’ha descarregat l’usuari.

Actor: Usuari. Pre-condicions: Venir del cas d’ús 5. Instal·lar joc.

Procés normal principal: 1. L’ aplicació actualitza la llista de descarregats.xml de dintre el dispositiu.

Alternatives de procés: Cap. Excepcions: Cap.

Projecte HJClic 5.0

31

4.6 Model conceptual de la informació Per tal de poder emmagatzemar les dades dels jocs s’ha creat una estructura de dades. Aquesta estructura conté la classe Joc amb tots els seus atributs. Cada joc pot tenir més d’una àrea, nivell i idioma. Tots els jocs tenen un fitxer xml amb extensió .jclic associat, i seguint el model de dades que ens presenta aquest xml, s’ha decidit crear per cada classe Clic una classe Sequence, Settings i una llista d’Activitats.

La classe Activitat conté totes les dades necessàries per a visualitzar una de les activitats del joc. Aquesta conté les cel·les on s’especifiquen les dades habituals de cada activitat, la classe Cell. A més, cada activitat té una llista de cel·les que contenen la informació necessària per visualitzar l’activitat correctament, la classe CellList.

Projecte HJClic 5.0

32

4.6.1 Diagrama de classes El diagrama de classes següent descriu el disseny conceptual de la informació de l’aplicació mostrant les seves classes, atributs i les relacions entre ells:

Figura 11. Diagrama de classes

Projecte HJClic 5.0

33

4.6.2 Especificació de les classes en la tecnologia Android Codi de les classes: Joc: publicclassJoc { private Integer identificador; private String nom; private Date dataPublicacio; //Format de la data ANY-MES-DIA private List<String> llengua; private List<String> nivellJoc; private List<String> areaJoc; private Boolean descarregat; //Es cert si el joc esta descarregat

al mobil. private String ruta; private String clic;//Pathd'on es trobaral'arxiu del joc

comprimit. private String imatge; private String centre; private String autors;

... }

Area: public classArea { privateHashtable<String, String>arees;

privateString[] nomsArees;//Taulaqueensservirà per tenirla llistadenoms ORDENADA

...

}

Idioma: publicclassIdioma { privateHashtable<String, String>idiomes; privateString[] nomsIdiomes;//Taulaqueensservirà per tenirla

llistadenoms ORDENADA

... }

Nivell: publicclassNivell { privateHashtable<String, String>nivells; privateString[] nomsNivells;//Taulaqueensservirà per tenirla

llistadenoms ORDENADA

... }

Projecte HJClic 5.0

34

Clic: publicclassClicimplementsRecursiuXML { protectedHashMap<String, Object>atributs; protected Settings settings; protectedSequencesequence; protectedHashMap<String,Activitat>activitats;

... }

Settings: publicclass Settings implementsRecursiuXML { String[] descripcio; Integerindex; protectedHashMap<String, Object>atributsActivitat;

... }

Sequence: publicclassSequence { String[] taulaNoms; Integerindex;

... }

Activitat: publicclassActivitatimplementsRecursiuXML { protectedList<CellList>celllist; //Guardallista de cel.les protectedList<Cell>cell; //Guardacel.lessueltes, com per

exemple la inicial i la final protectedHashMap<String, Object>atributsActivitat;

... }

CellList: publicclassCellListimplementsRecursiuXML { protectedList<Cell>cell; protectedHashMap<String,Object>atributs;

... }

Cell: publicclass Cell implementsRecursiuXML { protectedHashMap<String,Object>atributs;

... }

Projecte HJClic 5.0

35

4.7 Model conceptual de pantalles

4.7.1 Pantalla amb el jocs descarregats

4.7.2 Pantalla amb tota la llista de jocs

Projecte HJClic 5.0

36

4.7.3 Pantalla cerca d’un joc en horitzontal i vertical

Projecte HJClic 5.0

37

4.7.4 Pantalla descripció d’un joc en horitzontal i vertical

Projecte HJClic 5.0

38

4.8 Usabilitat Utilitzant criteris d’usabilitat en el disseny de l’aplicació s’obtindran entre altres els beneficis d’una bona facilitat d’aprenentatge per part de l’usuari i flexibilitat en les formes en que l’usuari i l’aplicació intercanvien informació i com aquesta és interpretada. També s’obtindrà menys errors impedint que l’usuari prengui decisions equivoques amb diàlegs, texts i metàfores visuals adequades.

4.8.1 Estàndards S’ha decidit utilitzar els estàndards d’usabilitat. Aquest estàndards s’han de tenir en compte en: la interacció de l’usuari amb l’aplicació, format en que l’aplicació mostra les dades a l’usuari, en l’estructuració de la interfície gràfica i en la navegabilitat de l’aplicació.

Estructura Un altre criteri important a tenir en compte a l’hora de dissenyar una interfície gràfica és l’estructuració d’aquesta. L’entorn de la GUI ha de permetre una bona navegabilitat a l’usuari i tenir una estructuració lògica en les funcionalitats de l’aplicació.

4.8.2 Metàfores S’ha decidit utilitzar metàfores visuals adequades per tal que l’usuari de l’aplicació identifiqui fàcilment què realitza cada opció de l’aplicació. Concretament les utilitzades en l’aplicació són les següents:

Afegir un joc al dispositiu

Cercar un joc

Descarregar un joc

Jugar a un joc

4.9 HTML5

4.10 Connexió de l’aplicació amb l’entorn web

Projecte HJClic 5.0

39

5 Implementació

5.1 Desenvolupament de l’aplicació Android

5.2 Desenvolupament de l’aplicació Apple iOS

5.3 Desenvolupament de l’aplicació HTML5

5.4 Evolució de l’aplicació

5.5 Explicar el codi en detall

6 Conclusions

Projecte HJClic 5.0

40

7 Manuals d’ús

7.1 Android A l'iniciar l'aplicació es mostra durant uns segons una pantalla amb el logotip de l'aplicació.

Imatge de la pantalla principal

Projecte HJClic 5.0

41

Seguidament es pot veure una llista amb els jocs que l'usuari ja s'ha descarregat prèviament i que estan disponibles per a jugar. Des d'aquesta pantalla es pot seleccionar una joc de la llista per jugar o bé es pot seleccionar la opció per afegir i instal·lar un nou joc.

Projecte HJClic 5.0

42

Afegir un joc

Al prémer el botó de la imatge es mostra una llista amb tots els jocs que encara no s'han instal·lat al dispositiu. Des d'aquesta pantalla es poden realitzar dues opcions, seleccionar un joc directament de la llista o bé fer una cerca dels jocs amb varis filtres.

Imatge llista jocs

Projecte HJClic 5.0

43

Cercar un joc

Al prémer el botó es pot seleccionar els filtres per la cerca del joc desitjat.

Hi han dos tipus de filtres disponibles, uns filtres tancats on es pot seleccionar un criteri dels proposats a la llista, com són el nivell, l'àrea i l'idioma o bé uns filtres més oberts on l'usuari introdueix una paraula i l'aplicació selecciona els jocs que continguin aquella paraula, com els filtres per la descripció o per l'autor.

Projecte HJClic 5.0

44

A continuació es mostra un exemple de la llista dels nivells, una de les opcions del filtre.

Quan ja s'han seleccionat tots els filtres al tornar a prémer el botó es mostra una llista amb els jocs que compleixen els criteris indicats.

Projecte HJClic 5.0

45

Instal·lar un joc Quan s'ha seleccionat el joc desitjat per a descarregar, l'aplicació mostra una pantalla amb

la definició del joc. En aquest moment s'ha de prémer el botó .

Projecte HJClic 5.0

46

Al descarregar el joc es mostra un barra de procés per indicar a l'usuari que el joc s'està instal·lant al dispositiu.

Projecte HJClic 5.0

47

Si a l’intentar descarregar el joc, l'aplicació no té accés a Internet es mostra un missatge indicant que el dispositiu no disposa de connexió a Internet.

Projecte HJClic 5.0

48

Jugar a un joc Quan el joc ja està instal·lat al dispositiu, juntament amb la descripció es mostra la imatge del joc. Si tenim el dispositiu en vertical la imatge del joc es mostra a la part inferior, en canvi si el dispositiu està en horitzontal la imatge es visualitza a la part dreta.

Projecte HJClic 5.0

49

Per poder jugar al joc seleccionat s'ha de prémer el botó .

Si la carpeta del joc s’ha eliminat del dispositiu, l’aplicació mostra un missatge indicant que el joc no està disponible i l’usuari s’ha de tornar a descarregar el joc.

Projecte HJClic 5.0

50

7.2 AppleiOS

7.3 Joc

Projecte HJClic 5.0

51

8 Bibliografia i webgrafia

Referencies de pàgines web [1] HTTP://www.comscore.com/.[consulta] Data [2] HTTP://www.gartner.com/technology/home.jsp.[consulta] Data [3] HTTP:// http://www.investorplace.com/33266/tablet-wars-apple-ipad-vs-the-competition.[consulta] Data [4] http://www.indalcasa.com/dispositivos-moviles/los-sistemas-operativos-moviles-para-smartphones-android-vs-ios-vs-symbian-vs-windows-phone/ [consulta] Data [5] http://tecnologia21.com/ipad-2-vs-galaxy-xoom-touchpad-playbook [consulta] Data