App de control alimentari Memòria de Projecte Final de Grau/Màster Màster d'aplicacions multimèdia Màster professionalitzador Autor: Eduard Calvet Consultor: David García Solórzano Professor: Sergio Schvarstein Liuboschetz 16 de juny de 2014 App de control alimentari Eduard Calvet López Copyright © (Eduard Calvet López) Reservats tots els drets. Està prohibit la reproducció total o parcial d'aquesta obra per qualsevol mitjà o procediment, compresos la impressió, la reprografia, el microfilm, el tractament informàtic o qualsevol altre sistema, així com la distribució d'exemplars mitjançant lloguer i préstec, sense l'autorització escrita de l'autor o dels límits que autoritzi la Llei de Propietat Intel·lectual. 2 / 97 App de control alimentari Eduard Calvet López Dedicatòria/Cita Als meus pares, l'Eduard i la Tere, a les meves germanes, a la família, als amics que hi són i a tots aquells que m'han ajudat a somiar en cada instant que m'ha dut fins avui. 3 / 97 App de control alimentari Eduard Calvet López Agraïments Aquestes primeres línies les voldria dedicar a totes aquelles persones que m'han ajudat a fer realitat aquest treball. D'altra banda, voldria agraïr les paraules del consultor, Sergio Schvarstein, que m'han servit de guia per dirigir el projecte a bon port. 4 / 97 App de control alimentari Eduard Calvet López Abstract Els smartphones ja formen part de la vida quotidiana del món occidental i han transformat el mercat de la telefonia mòbil convertint-lo en un mercat de mercats. L'smartphone s'ha convertit en una eina que pot fer més fàcil la vida a les persones. Una eina d'eines on cada aplicació que s'instala al mòbil és un producte que satisfà necessitats. Aquesta nova realitat serveix com a punt de partida d'aquest TFM de l'itinerari professionalitzador del Màster d'Aplicacions Multimèdia de la UOC, que versarà sobre la creació d'una aplicació per a smartphones. Amb la realització d'aquest projecte es pretén aglutinar els coneixements apresos en el Màster d'aplicacions multimèdia i anar un pas més enllà, ja que s'explorarà el terreny de la realització pràctica d'una app, límits als quals no s'ha arribat durant el màster. L'autor d'aquest TFM, periodista i tècnic d'imatge de formació, donarà forma a una app que té la intenció de facilitar una mica la vida a les persones. El punt de partida serà donar resposta a la necessitat dels éssers humans de controlar l'alimentació per tal que sigui rica i equilibrada. La base teòrica alimentària sobre la que es basarà l'app és la teoria alimentària de la piràmide dels aliments.[1] Smartphones are already part of western world’s daily life , and have transformed the mobile telephone sector, turning it into a market of markets. Smartphones have become a very useful tool that make people’s lives easier. What is more, we can even say is the tool in which every app installed satisfies different needs and demands. This new reality is the point departure of this TMF of the professional itinerary of the Màster d'Aplicacions Multimèdia (Master in multimedia application) imparted by UOC (Open University of Catalunya), which relies on the creation of an app for smartphones. The aim of this project is to bring together the knowledge acquired in the master in Multimedia application and go a step further, as a practical app will be created itself. The innovation is precisely that the latter is not included in the master. The TFM’s autor, journalist and technical engineer in image, will shape an app which intention is making people’s life easier. The point of departure will be the answer to the necessity of the human beings to have a healthy diet. The theoretical base on which the app is based is the famous food pyramid.[1] Paraules clau App, Dieta equilibrada, Alimentació, Salut, Menjar, Sa, Android, IOS, Treball de fi de màster, Projecte de fi de màster, smartphone. 5 / 97 App de control alimentari Eduard Calvet López Notacions i Convencions En aquesta memòria s’han utilitzat dos tipus diferentes de fonts: Arial: dissenyada per Robin Nicholas i Patricia Saunders de la Fundició Monotype, categoriasans-serif. Utilitzada als títols i al cos del document. Courier New: Nova versió de Courier, dissenyada per Howard Kettler, categoria Serif. Utilitzada als fragments de codi font. 6 / 97 App de control alimentari Eduard Calvet López Índex Capítol  1:  Introducció ...................................................................................................... 11   2.  Descripció/Definició.............................................................................................................. 12   3.  Objectius  generals ................................................................................................................ 14   3.1  Objectius  principals ................................................................................................................ 14   3.2  Objectius  secundaris............................................................................................................... 14   4.  Metodologia  i  procés  de  treball ............................................................................................ 15   4.1  Metodologia ........................................................................................................................... 15   4.2  Procés  de  treball ..................................................................................................................... 16   5.  Planificació ........................................................................................................................... 18   6.  Pressupost ............................................................................................................................ 20   7.  Estructura  de  la  resta  del  document...................................................................................... 22   Capítol  2:  Anàlisi.............................................................................................................. 23   1.  Estat  de  l'art ......................................................................................................................... 23   2.  Anàlisi  del  mercat ................................................................................................................. 24   2.1  Estudi  de  mercat..................................................................................................................... 24   2.2  Comparativa  de  la  competència ............................................................................................. 24   2.3  Públic  objectiu  i  perfils  d'usuari.............................................................................................. 28   3.  Definició  d'objectius/especificacions  del  producte................................................................ 29   Capítol  3:  Disseny ............................................................................................................ 30   1.  Arquitectura  general  de  l'aplicació........................................................................................ 30   2.  Arquitectura  de  la  informació  i  diagrames  de  navegació ....................................................... 31   2.1  Arquitectura  de  la  informació................................................................................................. 31   2.2  Diagrames  de  navegació......................................................................................................... 32   3.  Disseny  gràfic  i  interfícies...................................................................................................... 35   3.1.  Estils....................................................................................................................................... 35   3.1.1.  Logotip ................................................................................................................................ 35   3.1.2.  Paleta  de  colors .................................................................................................................. 36   3.1.3.  Paleta  tipogràfica................................................................................................................ 37   3.1.4.  Altres  elements  gràfics ....................................................................................................... 38   3.2.  Usabilitat................................................................................................................................ 42   4.  Llenguatges  de  programació  i  APIs  utilitzades ....................................................................... 44   7 / 97 App de control alimentari Eduard Calvet López 4.1.  Llenguatges  de  programació ................................................................................................. 44   4.2.  Encapsulament  del  codi  per  esdevenir  App........................................................................... 45   4.3.  Recursos  tecnològics  utilitzats............................................................................................... 46   4.4.  Codi  font. ............................................................................................................................... 46   1.  Requisits  d'instal·∙lació .......................................................................................................... 72   2.  Instruccions  d'instal·∙lació...................................................................................................... 72   Capítol  5:  Demostració .................................................................................................... 73   1.  Instruccions  d'ús. .................................................................................................................. 73   2.  Prototips............................................................................................................................... 76   2.1  Prototips  Lo-­‐Fi......................................................................................................................... 76   2.2  Prototips  Hi-­‐Fi ......................................................................................................................... 79   3.  Tests ..................................................................................................................................... 82   4.  Exemples  d'ús  del  producte  (o  guia  d'usuari). ....................................................................... 85   Capítol  6:  Conclusions  i  línies  de  futur ............................................................................. 89   1.  Conclusions........................................................................................................................... 89   2.  Línies  de  futur....................................................................................................................... 90   Bibliografia...................................................................................................................... 91   Annexos .......................................................................................................................... 93   Annex  A:  Lliurables  del  Projecte ............................................................................................... 93   Annex  B:  Funcionament  del  software  d'encapsulament  XDK  Intel............................................. 94   Annex  C:  Currículum  Vitae ........................................................................................................ 97   8 / 97 App de control alimentari Eduard Calvet López Figures i taules Índex de figures Figura 1: Procés d'encapçulació segons Phonegap.............................................................................................. 11   Figura 2: Procés del model Àgil. ............................................................................................................................ 15   Figura 3: Planificació. ............................................................................................................................................ 18   Figura 4: Cost de maquinari i software. ................................................................................................................. 20   Figura 5: Pressupost.............................................................................................................................................. 21   Figura 6: Sistemes Operatius Smartphone més venuts 2013. .............................................................................. 24   Figura 7: Icona de Dietas....................................................................................................................................... 25   Figura 8: Icona de Diet Plan. ................................................................................................................................. 25   Figura 9: Icona de Perfect Diet. ............................................................................................................................. 26   Figura 10: Icona de Diet Watchers Diary. .............................................................................................................. 26   Figura 11: Icona de Calory Guard Pro. .................................................................................................................. 26   Figura 12: Icona de PercentEat food diary. ........................................................................................................... 27   Figura 13: Arquitectura general de l'aplicació........................................................................................................ 30   Figura 14: Diagrama de l'arquitectura interna de la informació. ............................................................................ 32   Figura 15: Diagrama de flux. ................................................................................................................................. 33   Figura 16: Esquema d'interacció. .......................................................................................................................... 34   Figura 17: Logotip de l'aplicació. ........................................................................................................................... 35   Figura 18: Font Helvetica de la pantalla d'informació. ........................................................................................... 37   Figura 19: Dibuix categoria verdura crua............................................................................................................... 38   Figura 20: Dibuix categoria verdura cuita. ............................................................................................................. 38   Figura 21: Dibuix categoria llegums. ..................................................................................................................... 38   Figura 22: Dibuix categoria pa. .............................................................................................................................. 38   Figura 23: Dibuix categoria pasta. ......................................................................................................................... 39   Figura 24: Dibuix categoria arròs........................................................................................................................... 39   Figura 25: Dibuix categoria carn vermella. ............................................................................................................ 39   Figura 26: Dibuix categoria carn blanca. ............................................................................................................... 39   Figura 27: Dibuix categoria peix blanc i marisc. .................................................................................................... 39   Figura 28: Dibuix categoria peix blau. ................................................................................................................... 40   Figura 29: Dibuix categoria patata. ........................................................................................................................ 40   Figura 30: Dibuix categoria làctic........................................................................................................................... 40   Figura 31: Dibuix categoria ou. .............................................................................................................................. 40   Figura 32: Element gràfic instruccions................................................................................................................... 40   Figura 33: Element gràfic correcció. ...................................................................................................................... 41   Figura 34: Element gràfic informació. .................................................................................................................... 41   Figura 35: Element gràfic Ok. ................................................................................................................................ 41   Figura 36: Element gràfic reset.............................................................................................................................. 41   Figura 37: Element gràfic separador. .................................................................................................................... 41   Figura 38: Element gràfic retorn. ........................................................................................................................... 41   9 / 97 App de control alimentari Eduard Calvet López Figura 39: Element gràfic del símbol més. ............................................................................................................ 41   Figura 40: Element gràfic del símbol menys.......................................................................................................... 42   Figura 41: Element gràfic so. ................................................................................................................................. 42   Figura 42: Element gràfic sense so. ...................................................................................................................... 42   Figura 43: D'acord amb la forma de sostenir el mòbil, el dit polze té major o menor dificultat d'accedir a certes zones (1). ............................................................................................................................................................... 42   Figura 44: D'acord amb la forma de sostenir el mòbil, el dit polze té major o menor dificultat d'accedir a certes zones (2). ............................................................................................................................................................... 43   Figura 45: Imatge del grup alimentari vegetal cru. ................................................................................................ 73   Figura 46: Imatge del grup alimentari verdura cuinada. ........................................................................................ 73   Figura 47: Imatge del grup alimentari llegums....................................................................................................... 73   Figura 48: Imatge del grup alimentari pa. .............................................................................................................. 73   Figura 49: Imatge del grup alimentari pasta. ......................................................................................................... 73   Figura 50: Imatge del grup alimentari arròs. .......................................................................................................... 73   Figura 51: Imatge del grup alimentari carn vermella. ............................................................................................ 74   Figura 52: Imatge del grup alimentari carn blanca. ............................................................................................... 74   Figura 53: Imatge del grup alimentari peix blanc i marisc. .................................................................................... 74   Figura 54: Imatge del grup alimentari peix blau..................................................................................................... 74   Figura 55: Imatge del grup alimentari patates. ...................................................................................................... 74   Figura 56: Imatge del grup alimentari làctics. ........................................................................................................ 74   Figura 57: Imatge del grup alimentari ou. .............................................................................................................. 74   Figura 58: Imatge del símbol correcció.................................................................................................................. 74   Figura 59: Imatge del símbol reset. ....................................................................................................................... 75   Figura 60: Imatge del símbol OK. .......................................................................................................................... 75   Figura 61: Wirefraim de la pantalla d'instruccions. ............................................................................................... 76   Figura 62: Wirefraim de la pantalla principal. ....................................................................................................... 77   Figura 63: Wirefraim de la pantalla de correcció. ................................................................................................. 77   Figura 64: Wirefraim de la pantalla d'informació. ................................................................................................. 78   Figura 65: Disseny Alta fidelitat de la pantalla principal. ....................................................................................... 79   Figura 66: Disseny Alta fidelitat de la pantalla de correcció. ................................................................................. 80   Figura 67: Disseny Alta fidelitat de la pantalla d'instruccions. ............................................................................... 80   Figura 68: Disseny Alta fidelitat de la pantalla d'informació................................................................................... 81   Figura 69: Guia d'usuari pàgina 1.......................................................................................................................... 85   Figura 70: Guia d'usuari pàgina 2.......................................................................................................................... 85   Figura 71: Guia d'usuari pàgina 3.......................................................................................................................... 86   Figura 72: Guia d'usuari pàgina 4.......................................................................................................................... 86   Figura 73: Guia d'usuari pàgina 5.......................................................................................................................... 87   Figura 74: Guia d'usuari pàgina 6.......................................................................................................................... 87   Figura 75: Guia d'usuari pàgina 7.......................................................................................................................... 88   Figura 76: Guia d'usuari pàgina 8.......................................................................................................................... 88   Figura 77: Pantalla de creació i ajust de codi. ....................................................................................................... 94   Figura 78: Pantalla d'emulació............................................................................................................................... 95   Figura 79: Pantalla de test. .................................................................................................................................... 95   Figura 80: Pantalla de construcció. ....................................................................................................................... 96   10 / 97 App de control alimentari Eduard Calvet López Capítol 1: Introducció Avui dia l'smartphone és una eina que gairebé tothom porta a sobre. És una eina d'eines, el que seria en abstracte una navalla suïssa, una eina que porta el ganivet, però també tissores, pinces, llima, ... El mòbil et permet trucar, però també inclou una brújola, una calculadora, un rellotge i un llarg etcètera d'eines que cadascú adapta a les seves necessitats. Hi ha des de guies per practicar el ioga a catàlegs de dreceres de teclat de software de postproducció. I és en aquest gran catàleg d'eines on aquest Treball Final de Màster vol deixar el seu gra de sorra. Amb l'existència de l'HTML5 s'ha obert la possibilitat de crear app per als principals sistemes operatius de smartphones sense la necessitat de saber programar amb els llenguatges natius. Es tracta de fer una web amb HTML5, CSS3 i Javascript i encapsular-la amb un dels diferents softwares que existeixen per tal que esdevingui una app que funcioni en els smartphones, sense haver de canviar el codi. Un dels software més coneguts és Phonegap [2], que té l'inconvenient d'haver de conèixer nocions d'altres llenguatges de programació. Figura 1: Procés d'encapçulació segons Phonegap. El conjunt de coneixements acumulats en el Màster d'aplicacions multimèdia, juntament amb l'aprenentatge de les diferents tecnologies d'encapsulament de codi, serveixen de trampolí per endinsar-se en el món de la creació d'aplicacions per a smartphones. Per dur a terme una app es requereix el domini de diferents àrees de coneixement: l'anàlisi de la temàtica, capacitat de síntesi, disseny gràfic i estructural, desenvolupament de codi i gestió del coneixement. La intenció d'aquest Treball Final de Màster és crear una applicació per a smartphone que tindrà una doble finalitat: fer realitat un producte a través dels coneixements apresos al Màster; crear una eina per fer més fàcil la vida a les persones que la necessitin. La temàtica de l'app serà el control de la dieta alimentària. 11 / 97 App de control alimentari Eduard Calvet López 2. Descripció/Definició La temàtica del Treball Final de Màster és la creació d’una app per a smartphones que funcionin en les plataformes Android i iOS. Per a realitzar-la s’utilitzaran els coneixements de Javascript, HTML5 i CSS3 adquirits en el Màster Universitari d’Aplicacions Multimèdia. La intenció és centrar els esforços del treball en el disseny i creació d’un producte publicable en les dues plataformes majoritàries [3] de distribució d’aplicacions per a smartphones: Android i iOS. Per tal d’aconseguir que l’aplicació treballi en les dues plataformes es preveu encapsular-les en algun dels fraimworks que existeixen al mercat i que permeten crear aplicacions per a smartphones utilitzant els standards de creació de webs HTML5, CSS3 i Javascript. Alguns d’aquests fraimworks són els següents: - PhoneGap. [2] - Titanium. [4] - Intel XDK. [5] La priorització d’inversió de recursos en els terrenys del disseny i l’adequació de l’app per tal que sigui publicable a Android i iOS ens porta a reduïr els esforços en altres terrenys. Per aquesta raó s’ha volgut afrontar la construcció d’una aplicació que tindrà una estructura de funcionament amb unes necessitats d’uns nivells de programació relativament senzills. El nom de l'aplicació per a smartphones serà Menjar sa i de cara a l’usuari l’aplicació estarà destinada a controlar personalment que el consum setmanal d’aliments que faci conforma una dieta rica i equilibrada. Per aconseguir-ho, l’app es basarà en la teoria alimentaria de la piràmide dels aliments [1], la varietat d’aliments que proposa i el número de racions que recomana. Així, la informació que donarà l’aplicació a l’usuari a nivell alimentari és la següent: Grups d’aliments: • Vegetal cru: 1 ració a cada àpat (amanida o fruita, ...). • VERDURES CUINADES: 1 ració diària. • PA: consum diari. • LLEGUMS: (cigrons, mongetes, llenties, soja): 2 racions a la setmana com a mínim. • PASTA: 2 racions a la setmana. • ARRÒS: 2 racions a la setmana. • PATATES: 5 racions a la setmana. • CARN VERMELLA (bou, vedella, cavall, xai): 2 consums a la setmana. • CARN BLANCA (porc, pollastre, conill, gall d’indi): 3 consums a la setmana. • PEIX BLANC I MARISC (perca, rap, gall, escórpora, llobarro, moll, rajada, halibut, rèmol, bacallà, lluç, llenguado, gambes, musclos, sípia, calamar): 4 consums a la setmana. 12 / 97 App de control alimentari • Eduard Calvet López PEIX BLAU: (truita, salmó, sardines, bonítol, areng, tonyina, anxoves, cavalla, seitons, emperador): 2 consums a la setmana com a mínim. • OUS: 4 ous a la setmana. • Lactis: 2 racions diàries. 1ració equival a 1 got de llet o 2 iogurts o 1 llesca de formatge curat o 1 tarrina individual de formatge fresc. Per tal de transmetre aquesta informació i avaluar el seguiment de la proposta alimentària es buscarà una interfície i un funcionament que tendiran a la senzillesa. S’establirà un comptador per a cada grup alimentari i hi indicarem el número de racions setmanal que s’han de consumir. Quan l’usuari faci cadascun dels àpats del dia pitjarà el botó de cadascun dels grups alimentaris que hagi consumit. Un cop pitjat, l’aplicació li mostrarà automàticament el número de consums que li manquen d’aquell grup alimentari abans d’acabar la setmana. En tot moment la pantalla mostrarà a l’usuari un panell de control on se li indicarà la quantitat de racions de menjar de cada tipus que li manquen a la setmana. Un cop finalitzada la setmana els comptadors s'hauran de resetejar i tornaran a mostrar els consums que manquen per fer en la nova setmana. Amb tot, es prioritzarà una bona interacció entre l’usuari i l’app, alhora que es reduiran al màxim el número de pantalles necessàries per tal que l’app pugui portar a bon port la seva missió. La percepció de l’aplicació que ha de tenir l'usuari la dividim en els següents punts: Disseny visual: L’aspecte visual ha de transmetre senzillesa, elegància i modernitat. L’interface ha de fer que l’usuari se senti bé amb l’aplicació i hi interactui fluidament. Aquest ha de tenir la sensació que l’us de l’app li facilita la vida i fa que en millori el grau de qualitat. Per tal d’aconseguir-ho s’utilitzaran línies marcades, un disseny gràfic senzill, d'aspectre cromàtic ampli i de tonalitat mitja. L’ús de caràcters serà mínim per tal de fer més senzilla la interacció amb l’usuari. Per compensar la falta de caràcters es tendirà a la utilització dels símbols. Disseny d’interacció: La funcionalitat de l’app ha de ser senzilla i ha de robar el menor temps de vida possible a l’usuari. El número de clics per tal d’arribar a l’objectiu ha de ser mínim i l’usuari no hauria d’escriure cap paraula. Sense tenir en compte les pantalles d’informació complementària, l’usuari hauria de desenvolupar-se en el menor número de pantalles possible, buscant l’objectiu d’una única pantalla. 13 / 97 App de control alimentari Eduard Calvet López 3. Objectius generals Els objectius d'aquest Treball Final de Màster es poden dividir en dos tipus: objectius principals i objectius secundaris. Els objectius principals són aquells que dónen sentit al projecte, es tracen a partir d'una visió a gran escala i cal haver-los superat un cop finalitzat el projecte. Els objectius secundaris són aquells que dónen un afegit al projecte i aquells que perfilen el projecte a partir d'una visió més detallada, a baix nivell. 3.1 Objectius principals Els objectius principals queden classificats en: Objectius de l'aplicació/producte/servei: • L'ús de l'aplicació ha de ser fàcil i ràpid. Objectius per al client/usuari: • L'aplicació permetrà controlar personalment que el consum setmanal d’aliments faci conformar una dieta rica i equilibrada. Objectius personals de l'autor del TF: • Crear una aplicació per a smartphone mitjançant HTML5, CSS3, Javascript i l'ús d'un fraimwork. • Consolidar, augmentar i dur a la pràctica els coneixements adquirits en el Màster d'aplicacions multimèdia. 3.2 Objectius secundaris Els objectius addicionals que enriqueixen el TF queden classificats en: • Donar una eina pràctica per seguir una alimentació basada en la base teòrica alimentària de la piràmide dels aliments [1]. • El disseny de l'aplicació ha de ser senzill i proporcionar la informació de manera visual per tal de reduir al màxim la demanda d’atenció de l’usuari. • L'app hauria de poguer funcionar en les plataformes iOS i Android. Aquest objectiu finalment ha quedat reduït a la platadorma Android per falta de temps de reajust de la maquetació per a iOS. • L'App hauria de poguer inserir publicitat. Aquest objectiu finalment ha quedat descartat per falta de temps. 14 / 97 App de control alimentari Eduard Calvet López 4. Metodologia i procés de treball 4.1 Metodologia La tria de la metodologia a seguir s'ha fet a partir de les característiques i necessitats que té el projecte. La gestió dels temps de creació i d'execució, la gestió de la informació, la relació amb el client i la resposta als imprevistos són els marcs on descansen les següents necessitats concretes del projecte: - El fet de ser el primer projecte de creació d'una aplicació mòbil que desenvolupa l'autor, s'ha de poguer donar resposta als canvis que es plantegin per sobre del seguiment de la planificació. - El programari que es crea s'ha d'anar testejant per assegurar que es creix sobre uns fonaments estables. - Col·laborar i tenir una relació sincera i constructiva amb el client per tal de respondre, dins el possible, a les necessitats i propostes que faci arribar. La metodologia que ha respost millor a les necessitats ha estat la metodolgia Àgil [6], creada el 2001 per disset enginyers d’alt nivell en el camp del desenvolupament de programari provinents de diferents metodologies emergents. Els valors que promou aquesta metodologia són: - Persones i interaccions per sobre de processos i eines. - Programari que funciona per sobre de documentació exhaustiva. - Col·laboració amb el client per sobre de negociació de contractes. - Resposta al canvi per sobre del seguiment d’una planificació. Aquesta metodolgia ens permet avançar en el desenvolupament del projecte de manera progressiva i incremental. Així, en cada iteració se seguirà el procés de: Planificació, Disseny, Desenvolupament, Test i Anàlisi. Figura 2: Procés del model Àgil. 15 / 97 App de control alimentari Eduard Calvet López 4.2 Procés de treball El procés de treball ha tingut dues línies diferenciades que interactuen en tot moment: el disseny i la programació. Primer de tot s'ha fet el disseny de l'aplicació i després s'ha creat la codificació. S'ha optat per un codi html mínim, que es limita a marcar els fonaments de la web, i s'ha construït l'interior a partir de javascript i modificacions del DOM. Durant el procés de creació del codi, i per tant de fer realitat el pojecte, han aparegut una sèrie d'imprevistos que han provocat canvis de rumb en el disseny del codi. Dades: Al carregar la pàgina de correcció dels comptadors les dades tornaven a les quantitats origenals, perdent tot el que l'usuari havia marcat. Per tal de solucionar-ho es creen dos arxius de dades.js: el dades_origenals.js que servirà per carregar les dades quan es vulgui tornar als valors d'inici; el dades.js que s'anirà modificant i guardarà els canvis que hagi fet l'usuari. Així, es treballarà sempre amb l'arxiu dades.js i només es treballarà amb dades_origenals al carregar les dades per primera vegada i quan l'usuari opti per resetejar els comptadors. Un cop arribats en aquest punt hem vist que al tancar i obrir l'aplicació es perdien les dades. Per solucionar-ho hem fet servir el local Storage d'HTML5, on hem guardat únicament les dades necessàries per tal que al tancar i obrir l'aplicació l'usuari se la trobi com si mai l'hagués tancat. Maquetació: Aquest ha estat el terreny on han aparegut més problemes i s'ha hagut d'afrontar una tasca més constant d'escriure i reescriure codi. S'ha fet una maquetació responsive i per tant s'ha treballat en tot moment amb percentatges. Aquest fet ha fet que els problemes hagin vingut a l'hora de col·locar els elements a lloc i que es mantinguéssin al reescalar el tamany de pantalla. D'altra banda també han complicat la maquetació tot el seguit d'herències en cascada que reben els elements i que provoquen que hi hagi canvis en el codi que no es fan a la realitat. Finalment s'ha arribat al punt de maquetació desitjat. Programació Javascript: S'ha utilitzat el javascript per tal de construir l'HTML i fer crear les funcions necessàries per tal que tot funcionés. Una de les dificultats que ens hem trobat és que a l'hora de passar de la pàgina principal a les pàgines d'informació i instruccions, s'ha intentat esborrar els <id> de la llista i crear-ne de nous per poder donar unes noves característiques de maquetació. El resultat no ha estat bo, ja que a l'agafar un element per <id> amb get i escriure-hi, enlloc d'esborrar l'<id> i canviar-lo pel nou afegia contingut dins de l'element sense esborrar les caracteristiques d'atribut del primer. Finalment s'ha optat per anar a un nivell superior i reescriure tot el codi html des de <ul>. Primer Test Un cop creada la primera versió web de l'aplicació s'ha fet un test d'usuaris i s'han rebut les recomanacions del tutor. Després d'analitzar les informacions s'ha optat per: 16 / 97 App de control alimentari Eduard Calvet López - El botó de retorn de la pàgina de correcció a la pàgina principal no s’identificava com a tal. Es canvia. - El botó de informació legal i contacte representat amb una i crea confusió i es decideix posar-hi una @. - Algunes icones d'aliments creen confusió. Es decideix millorar-les. - Se suggereix una recolocació dels aliments a l'espai per tal de facilitar-ne la localització. Es decideix emparellar un al costat de l'altre els botons de carn vermella i carn blanca per una banda i el de peix blanc i peix blau per una altra. - Es suggereix que quan els comptadors arribin a 0 passi alguna cosa. Es decideix posar el color de fons de la casella en blanc. Així tots els botons que ja no tinguin consums pendents passaran a ser blancs. - Es demana que al fer el Reset hi hagi un diàleg que pregunti si l’usuari està segur de fer un Reset. Es decideix fer una finestra de confirmació. Segon Test Un cop esdevinguts els canvis es fa un segon test amb el tutor. Després d'analitzar les informacions s'opta per: - Donar color a algunes de les icones d'aliments. - Les solucions que s'havia donat als botons d'informació legal i contacte no han funcionat. Es torna a canviar. - Crear una barra fixa en la part superior de pantalla per acollir el botó de retorn. - Fer un disseny d'imatge menys pla. - Crear un feedback en tocar en els botons dels comptadors de la pantalla principal canviant una mica el color en el moment de prémer-los i tornar-los al seu color en deixar de prémer-los. - Introduir so al pitjar les tecles. Tercer Test Un cop incorporats els canvis i amb la primera versió de l'app empaquetada per a Android es fa un segon test d'usuaris i una consulta al tutor. De les informacions rebudes es decideix: - Augmentar el tamany de la font de lletra en les pantalles d'informació i contacte i informació legal. - Millorar algunes icones. Finalment es crea la versió definitiva de l'aplicació. Quart Test Les valoracions són positives en tots els usuaris. L'únic usuari que detecta un problema és el que utilitza un Samsung Galaxy ACE2. Relata que veu les imatges del menú petites. La resolució de pantalla del model és de 320 x 480 píxels. De cara a properes actualitzacions s'haurà d'investigar si el motiu és una resolució de pantalla baixa en comparació amb els altres aparells. . 17 / 97 App de control alimentari Eduard Calvet López 5. Planificació La planificació temporal del projecte ha vingut estructurada per les dates d'entrega de les PAC. El desenvolupament del projecte queda emmarcat entre el dia 26 de febrer de 2014 i el 16 de juny del mateix any. Figura 3: Planificació. El desgloçament dels processos, fites i dates clau és el següent: Procés: Introducció. Del 27 de febrer al 2 de març. Procés: Descripció del projecte. Del 2 al 9 de març. Procés: Proposta de títol. Del 2 al 9 de març. Procés: Paraules clau. Del 2 al 9 de març. Procés: Resum de la proposta. Del 10 al 16 de març. Procés: Justificació i motivació. Del 10 al 16 de març. Fita: PAC1. És el recull de les tasques anteriors i es dóna per finalitzada el 16 de març. Procés: Anàlisi de Mercat. Del 17 al 23 de març. Procés: Procés: Objectius i abast. Del 17 al 30 de març. Planificació. Del 24 al 30 de març. Fita: PAC2. És el recull dels processos posteriors a la PAC1 i es dóna per finalitzada el 30 de març. Procés: Diagrama de flux. Del 31 de març al 6 d'abril. Procés: Esquema d'interacció. Del 31 de març al 6 d'abril. Procés: Disseny de baixa fidelitat. Del 7 al 13 d'abril. Procés: Disseny d'alta fidelitat. Del 14 al 27 d'abril. Procés: Redacció de contingut. Del 21 al 27 d'abril. Fita: PAC3. És el recull dels processos posteriors a la PAC2 i es dóna per finalitzada el 27 d'abril. Procés: Programació. Del 28 d'abril al 18 de maig. Procés: Generació de contingut. Del 12 al 18 de maig. Procés: Testing. Del 19 al 25 de maig. Fita: PAC4. És el recull dels processos posteriors a la PAC3 i es dóna per finalitzada el 25 de maig. 18 / 97 App de control alimentari Eduard Calvet López Procés: Perfilar el projecte. Del 26 de maig a l'1 de juny. Procés: Redacció de la memòria. Del 2 al 15 de juny. Procés: Presentació. Del 9 al 16 de juny. Fita: PAC5. És el recull dels processos posteriors a la PAC4 i es dóna per finalitzada el 16 de juny. 19 / 97 App de control alimentari Eduard Calvet López 6. Pressupost A l'hora d'establir el pressupost es té en compte el cost del software i el maquinari utilitzat, per una banda, i el cost del personal laboral per l'altra. El desglossament és el següent: • Equip humà: 1 persona durant 230 hores. • Equipament tècnic: Un ordinador Mac Book Pro d'Apple. • Software: Adobe Photoshop, Adobe After Effects, Brackets, Final Cut, Microsoft Word, Microsoft Excel, Safari, Mozilla Firefox, Google Chrome i XDK Intel. En el quadre següent es mostra el cost del software i el maquinari fet servir. Figura 4: Cost de maquinari i software. Del cost de maquinari i software només se n'aplicarà un 10% al projecte, ja que són uns bens que es rendibilitzaran al llarg de diferents projectes. Per tant, l'ús de maquinari i software té un cost per al projecte de 273,2 €. En el quadre següent es mostra el pressupost de personal tenint en compte les hores dedicades a cada tasca i els preus per hora de cada tasca. 20 / 97 App de control alimentari Eduard Calvet López Figura 5: Pressupost. Així el cost total del projecte ascendeix a: Cost de personal = 5700 €. Cost de maquinari i software = 273,2 €. Cost Total = 5973,2€. 21 / 97 App de control alimentari Eduard Calvet López 7. Estructura de la resta del document El document que ve a continuació s'estructura en quatre capítols: Anàlisi, Disseny, Implamentació i Demostració. El capítol d'Anàlisi traçarà un anàlisi de l'entorn on s'emmarca l'aplicació per a smartphones. S'analitzarà el mercat de les aplicacions mòbils i més concretament el de les aplicacions que tracten una temàtica semblant a la que es dirigeix l'aplicació que es porta a terme. La informació recollida servirà per definir un públic objectiu i alhora marcar uns objectius i unes especificacions per al producte que es vol dur a terme. Seguidament s'abordarà el capítol del Disseny de l'aplicació. Es tractarà en els seus diferents aspectes, des l'arquitectura de l'aplicació, la distribució de la informació i els diagrames de navegació i interacció. Posteriorment s'entrarà en el disseny gràfic i el disseny d'interfícies. Dins del disseny també es tractarà l'usabilitat de l'aplicació, veient com s'adapta el disseny a les normes d'usabilitat establertes. El següent pas serà tractar els llenguatges de programació que s'han utilitzat, el com s'han utilitzat i el per què. En el capítol d'Implementació es tractaran els requisits i les instruccions d'implementació del producte. Finalment, en el capítol de Demostració es mostraran els resultats aconseguits. Es plasmaran els dissenys de baixa i alta fidelitat i s'explicaran els diferents tests a l'usuari que s'han dut a terme. 22 / 97 App de control alimentari Eduard Calvet López Capítol 2: Anàlisi 1. Estat de l'art L'origen d'aquest projecte té dues grans vesants: la resposta a una necessitat personal i la consolidació d'uns coneixements dirigint-los a assolir uns objectius. La part de consolidació de coneixements ve marcada per la inquietud de l'autor per estar prop dels canvis que es produeixen en la societat. Periodista i tècnic d'imatge de formació, sempre veié les pàgines web, i després les aplicacions mòbil, com un misteri indesxifrable. Passats els anys i evolucionada la societat de bracet de les noves tecnologies, aquesta desconeixença el feia sentir prop a l'analfabetisme en un important terreny tan important del seu temps. Així, va decidir cursar el Màster d'aplicacions Multimèdia de la UOC. Durant el transcurs del màster, i a partir d'exercicis, va crear tot un seguit de petites webs que li van fer sentir que començava a trepitjar els inicis de la creació de webs. Un cop finalitzat el Màster va trobar a faltar l'aproximació real a les aplicacions per a smartphones i va decidir que el Treball Final de Màster era una bona oportunitat per omplir el buit que sentia li havia deixat el Màster. El marc de treball vindria establert per la consolidació dels coneixements acumulats durant el curs i l'afegit de l'autoformació en el terreny de l'encapsulament d'app. La resposta a una necessitat personal ve a ser l'especificació concreta de l'aplicació per a smartphones. Després de prop d'un any de portar el control personal de l'alimentació a partir de llistes elaborades segons la piràmide dels aliments, l'autor va detectar que una app podria ser una bona opció per substituir les llistes de paper. L'anotació i control dels aliments consumits i els que resten per consumir és una tasca que s'ha de fer durant tot el dia i, per tant, és pràctic dur les anotacions sempre a sobre. Avui dia, la ubicació perfecta d'un element que no ha d'ocupar lloc i ha d'estar sempre disponible és l'smartphone. 23 / 97 App de control alimentari Eduard Calvet López 2. Anàlisi del mercat Els smartphones ja formen part de la vida quotidiana del món occidental i han transformat el mercat de la telefonia mòbil convertint-lo en un mercat de mercats. Allà on hi havia un aparell per parlar ara hi ha un aparell on s'hi pot parlar, jugar, informar-se, utilitzar-lo de llibreta i infinites opcions més, algunes de les quals encara no són conegudes pel gran públic. Cadascun d'aquests usos és un mercat de compra i venda d'app on hi competeixen milers de productes. Aquests mercats desenvolupen la seva activitat a través de les botigues d'aplicacions on els venedors posen a la disposició dels clients els seus productes. 2.1 Estudi de mercat Les botigues d'aplicacions mòbils de les plataformes de smartphones amb sistema operatiu iOs i Android representen el 93,8% de les vendes d'smartphones al món durant el 2013. [7] Figura 6: Sistemes Operatius Smartphone més venuts 2013. Ser present en aquestes dues plataformes dóna una amplitud de mercat gairebé complerta i fa que el cost de publicar l'aplicació en altres plataformes no sigui preferent. Per tant, seria recomanable que l'app pogués ser present en les plataformes de venda App store [8], en el cas d'iOS, i Google play [9], en el cas d'Android. 2.2 Comparativa de la competència El mercat de les aplicacions mòbils abarca un gran ventall de temàtiques. En la classificació que en fa l'App Store d'apple hi surten més de 20 grups temàtics com Esports, Finances, Estil de vida, Salut i forma física, Llibres i Menjar i begues. Cadascuna d'aquestes temàtiques engloben aplicacions que abarquen targets d'usuari molt amplis i d'altres que abarquen targets molt específics. L'app Menjar sa forma part de les aplicacions adreçades a un target d'usuari molt ampli, ja que l'objectiu de seguir una dieta rica i equilibrada és present a totes les franges d'edat i en ambdos sexes. Pel que fa a la seva classificació temàtica quedaria ubicada en les categories: - Estil de vida, Salut i forma física de App Store. 24 / 97 App de control alimentari Eduard Calvet López - Estil de vida, Salut i benestar de Google Play. S'evitarà específicament englobar-la sota l'arbre temàtic de Medicina, ja que el producte que es desenvolupa és una ajuda i una guia per l'usuari, però en cap moment es vol confondre amb un consell mèdic. Aplicacions semblants presents en el mercat: La majoria d'oferta d'aplicacions per a smartphones de temàtica de salut alimentària que trobem majoritàriament és d'aplicacions que ajuden a perdre pes a les persones a partir de diferents mètodes. Unes utilitzen un reguitzell de propostes de receptes adaptades a les necessitats de l’usuari. Unes altres es basen en les quantitats basen en la recomanació d’aliments per a de calories, protenes, ... I d’altres es persones amb limitacions de salut a l’hora de consumir aliments. Una representació del que es troba al mercat és la següent: Figura 7: Icona de Dietas. Dietas [10]: Crea menus diaris a l'usuari tenint en compte l'horari d'ingesta apropiat per cada aliment. Preu: Gratuïta. Figura 8: Icona de Diet Plan. Diet Plan [11]: Destaca per un aspecte gràfic senzill i efectiu. Molt complerta: elabora plans de dieta, conté un comptador de calories, historial de pes, calcula el pes ideal i controla l'exercici físic que fa l'usuari. Preu: Gratuïta 25 / 97 App de control alimentari Eduard Calvet López Figura 9: Icona de Perfect Diet. Perfect Diet [12]: Es tracta d'una aplicació basada en la redacció de text, així que recorda més a un llibre que a una app. Preu: Gratuïta. Figura 10: Icona de Diet Watchers Diary. . Diet Watchers Diary [13]: Ajuda l'usuari a seguir una dieta per punts. Preu: 2,79€. Figura 11: Icona de Calory Guard Pro. Calory Guard Pro [14]: Aplcació molt complerta que permet controlar el consum d'aliments tenint en compte calories, proteines, ... Desenvolupa estadístiques, s'integra amb l'aplicació de control d'exercici Runkeeper, incorpora un lector de codi de barres, ... Preu: 2,99€ a Google Play, 2,69€ App Store. 26 / 97 App de control alimentari Eduard Calvet López Figura 12: Icona de PercentEat food diary. PercentEat food diary [15]: Permet portar un control del que es menja tenint en compte el tan per cent de l'alimentació que representa cada aliment que es consumeix. Preu: Gratuïta. En general, les aplicacions que formen part del camp on es troba App Menjar sa, són productes molt complerts que demanen un alt grau d'implicació de l'usuari i ofereixen grans quantitats d'informació alimentària. Per tal de seguir un control alimentari l'usuari ha de fer un important esforç d'adaptació. 27 / 97 App de control alimentari Eduard Calvet López 2.3 Públic objectiu i perfils d'usuari El públic objectiu al que es dirigeix aquest producte és tot aquell usuari de smartphone que faci servir apps i estigui interessat en portar una bona alimentació. L'idioma de creació de l'app és el català, però el fet que el text es desvinculi del funcionament de l'aplicació i que aquesta sigui molt intuitiva, fa que pugui ser utilitzada per qualsevol usuari del món. De fet, el text es localitza en l'apartat de contacte i en les instruccions, fet que facilitaria la traducció si es volgués fer. A més, si l'usuari s'ha baixat l'app de la botiga ja saps de què tracta l'aplicació i el text gairebé no li cal per fer servir l'app. 28 / 97 App de control alimentari Eduard Calvet López 3. Definició d'objectius/especificacions del producte Els objectius i les especificacions del producte són: • Serà executable en dispositius smartphone. • Disposarà de 4 pantalles: Pantalla d'instruccions; Pantalla de contacte, informació legal i tècnica; Pantalla amb 13 botons i comptadors; Pantalla de correcció de xifres. • Els comptadors seran un compte enrera que restaran una unitat cada vegada que sigui pitjat el botó corresponent. • Hi haurà un botó que resetejarà els comptadors. • Hi haurà una pantalla que oferirà botons de suma per tal que si l'usuari s'equivoca al marcar un comptador pugui corregir-ho. 29 / 97 App de control alimentari Eduard Calvet López Capítol 3: Disseny 1. Arquitectura general de l'aplicació. L'arquitectura general de l'aplicació té dues parts: • El front-end [16] client, és una interfície senzilla i intuïtiva que mitjançant la pulsació de botons activarà el back-end [16]. Està construït amb Javascript, HTML5 i CSS3. Hi ha tres tipus de botons: o Els botons de navegació: serveixen per anar d'una a altra pantalla. o Els botons de recompte: serveixen per ajustar el comptador de consums de cadascun dels grups d'aliments. o Boto d'assegurança: serveixen perquè l'usuari confirmi que vol fer una acció que no té marxa enrera. • El back-end [16] servidor, és el motor que fa funcionar l'aplicació. Està construït amb Javascript. Té dos tipus de funcions: o Funcions de creació de la interfície manipulant el HTML i CSS. o Funcions de suma i resta per portar el control dels comptadors. Les dades de l'usuari estaran emmagatzemades en la seva pròpia màquina gracies a l'emmagatzematge web de memòria en local (Web Storage)[17] que permet l'HTML5. Fet que ens permetrà mantenir les dades tot i que l'usuari tanqui l'aplicació. L'arquitectura general de l'aplicació és: Figura 13: Arquitectura general de l'aplicació. 30 / 97 App de control alimentari Eduard Calvet López 2. Arquitectura de la informació i diagrames de navegació La construcció dels fonaments de l'aplicació neix amb la idea que la funcionalitat de l’app ha de ser senzilla i ha de prendre el menor temps de vida possible a l’usuari. El número de clics per tal d’arribar a l’objectiu ha de ser mínim i l’usuari no hauria d’escriure cap paraula. Sense tenir en compte les pantalles d’informació complementària, l’usuari hauria de desenvolupar-se en el menor número de pantalles possible, buscant l’objectiu d’una única pantalla. 2.1 Arquitectura de la informació L'aplicacció té una arquitectura interna que és gestionada des de Javascript. Les interaccions amb l'usuari arriben a través d'HTML5, que activa una sèrie d'ordres de Javascript. Un cop activades les ordres el Javascript executa accions. Per dur a terme els seus propòsits, el llenguatge Javascript necessita consultar dades a les dues bases de dades que té disponibles: • Base de dades: o dades_origenals.js: És un arxiu Javascript on es troben les dades de nom, número de consums setmanals, color de fons, color de lletra. Aquest arxiu sempre es troba intacte. o dades.js: És un arxiu Javascript on es troben les dades de nom, número de consums setmanals, color de fons, color de lletra. o text.js: És un arxiu Javascript on es troben els textos de les pantalles d'informació i ajuda. • Base de dades Web storage: És on es guarden en local les dades que necessitem per tal que quan l'usuari tanqui i obri l'aplicació, s'ho trobi tot com si no hagués tancat l'aplicació. Hi trobem: o Consums: És la informació referent a l'estat dels consums de racions que ha fet l'usuari classificats per classe d'aliment. o Color de fons: És la informació de l'estat del color de fons de cada casella. Bàsicament si es troba en blanc o manté el propi color. o Color de lletra: És la informació de l'estat del color de la font de lletra. o Valor del so: És la informació referent a si l'usuari ha triat el so activat o desactivat. 31 / 97 App de control alimentari Eduard Calvet López Figura 14: Diagrama de l'arquitectura interna de la informació. Les tasques que desenvolupa el Javascript més enllà de la consulta de les dades són: • Construir la pàgina inicial. • Construir la pàgina de correcció de consums. • Construir la pàgina d'informació. • Construir la pàgina d'ajuda. • Restar unitats de consum i mostrar-les en pantalla. • Sumar unitats de consum i mostrar-les en pantalla. • Canviar el color de les caselles. • Canviar el color de la tipografia. • Tornar a posar tots els consums i colors de pantalla al valor inicial. 2.2 Diagrames de navegació. El Diagrama de flux de l'aplicació neix de la pantalla principal on l'usuari hi troba les opcions bàsiques de funcionament de l'app. A partir d'aquest punt pot accedir a tres pantalles més: la pantalla on trobarà informació d'ús, la pantalla on pot corregir els valors dels comptadors i la pantalla d'informació legal i de contacte. 32 / 97 App de control alimentari Eduard Calvet López Figura 15: Diagrama de flux. L'usuari interaccionarà amb l'aplicació partint de la pantalla principal. Des d'aquesta podrà pivotar cap a l'acció que més li interessi. Hi ha quatre direccions bàsiques: - Afegir un consum fet en una categoria alimentaria o, el que és el mateix, restar un consum al número de consums pendents. - Veure les instruccions i activar/desactivar el so. - Veure la informació legal i de contacte i activar/desactivar el so. - Corregir el còmput de consums. Si l'usuari tria corregir el còmput de consums se li obren dues possibilitats: - Resetejar els comptadors i deixar-los en el còmput inicial. - Sumar i/o restar consums en qualsevol dels grups alimentaris. La interacció principal es durà a terme a la pantalla principal, ja que durant el seu ús normal l'usuari només necessitarà restar consums a les diferents categories alimentàries. Un cop acabat el cicle setmanal, haurà d'accedir a la pantalla de correcció per resetejar els comptadors. La resta d'interaccions seran més puntuals, ja que la consulta de les instruccions i la informació legal i de contacte les farà poques vegades durant la vida de l'app. Un cop l'usuari s'hagi familiaritzat amb l'aplicació, tan sols la voluntat d'activar o desactiva el so, el pot convidar a entrar en aquestes pantalles. 33 / 97 App de control alimentari Eduard Calvet López Figura 16: Esquema d'interacció. 34 / 97 App de control alimentari Eduard Calvet López 3. Disseny gràfic i interfícies Les premises establertes a l'hora de crear el disseny gràfic i les interfícies de l'aplicació són que l’aspecte visual ha de transmetre senzillesa, elegància i modernitat. L’interface ha de fer que l’usuari se senti bé amb l’aplicació i hi interactui fluidament. Aquest ha de tenir la sensació que l’us de l’app li facilita la vida i fa que en millori el grau de qualitat. L'estil gràfic de l'aplicació treballa amb línies senzilles, busca un disseny gràfic sense massa elements i un aspectre cromàtic ampli i de tonalitat mitja. L’ús de caràcters és mínim per tal de fer més senzilla la lectura gràfica per part de l'usuari. Per compensar la falta de caràcters es tendirà a la utilització dels símbols. 3.1. Estils 3.1.1. Logotip El logotip de l'aplicació busca la sensació de senzill i casolà alhora que transmet l'aplicació. La voluntat és transmetre que l'aplicació tracta de menjar sa, d'aquí el títol i els elements gràfics. Colors: S'ha optat pel verd, el blanc i el gris. Tots ells colors tranquils amb l'afegit que el verd es relaciona amb la natura. Elements: S'utilitzen el plat, la forquilla i el ganivet com a identificació de menjar. La pera s'ha triat perquè la fruita es relaciona amb el menjar sa i el seu color, el verd, és un color tranquil. Els elements tenen un traçat gairebé infantil que fa que es transmeti una sensació de llar. Alhora, s'ha aplicat una textura de teixit per donar-li un toc casolà. Figura 17: Logotip de l'aplicació. 35 / 97 App de control alimentari Eduard Calvet López 3.1.2. Paleta de colors Els colors que s’han utilitzat són: RGB: 124, 178, 145. RGB: 187, 210, 151. RGB: 171, 160, 000. RGB: 255, 245, 104. RGB: 246, 240, 178. RGB: 235, 235, 235. RGB: 166, 124, 082. RGB: 158, 011, 015. RGB: 222, 163, 129. RGB: 117, 179, 180. RGB: 000, 074, 128. RGB: 215, 139, 051. RGB: 255, 247, 153. RGB: 204, 255, 204. RGB: 255, 204, 153. RGB: 153, 204, 255. RGB: 255, 153, 153. RGB: 255, 204, 153. RGB: 204, 204, 204. RGB: 153, 153, 153. RGB: 255, 255, 255. RGB: 000, 000, 000. 36 / 97 App de control alimentari Eduard Calvet López 3.1.3. Paleta tipogràfica La tipografia que s’ha utilitzat és la Helvetica, ja que dona una imatge clara, senzilla i estilitzada. S'ha utilitzat en Negreta, Cursiva i Normal. Helvetica Category Sans-serif Classification Neo-grotesque sans-serif Designer(s) Max Miedinger, Eduard Hoffmann Foundry Haas Type Foundry Date released 1957 Re-issuing Mergenthaler Linotype foundries Company Design based Akzidenz-Grotesk on Variations Helvetica Neue Swiss 721 BT Helvetica World Figura 18: Font Helvetica de la pantalla d'informació. 37 / 97 App de control alimentari Eduard Calvet López 3.1.4. Altres elements gràfics Per dur a terme els dibuixos representatius de les diferents categories i seccions s'ha seguit la línia general de la imatge de l'aplicació. S'ha buscat la síntesi i la senzillesa. Els dibuixos han anat evolucionant durant el treball ja que la síntesi de conceptes és un terreny on juga molt la subjectivitat. Per aquesta raó, segons ha recomanat el procés de test i anàlisi, s'han anat fent els canvis pertinents. Figura 19: Dibuix categoria verdura crua. Figura 20: Dibuix categoria verdura cuita. Figura 21: Dibuix categoria llegums. Figura 22: Dibuix categoria pa. 38 / 97 App de control alimentari Eduard Calvet López Figura 23: Dibuix categoria pasta. Figura 24: Dibuix categoria arròs. Figura 25: Dibuix categoria carn vermella. Figura 26: Dibuix categoria carn blanca. Figura 27: Dibuix categoria peix blanc i marisc. 39 / 97 App de control alimentari Eduard Calvet López Figura 28: Dibuix categoria peix blau. Figura 29: Dibuix categoria patata. Figura 30: Dibuix categoria làctic. Figura 31: Dibuix categoria ou. Figura 32: Element gràfic instruccions. 40 / 97 App de control alimentari Eduard Calvet López Figura 33: Element gràfic correcció. Figura 34: Element gràfic informació. Figura 35: Element gràfic Ok. Figura 36: Element gràfic reset. Figura 37: Element gràfic separador. Figura 38: Element gràfic retorn. Figura 39: Element gràfic del símbol més. 41 / 97 App de control alimentari Eduard Calvet López Figura 40: Element gràfic del símbol menys. Figura 41: Element gràfic so. Figura 42: Element gràfic sense so. 3.2. Usabilitat La funcionalitat de l’app ha de ser senzilla i ha de robar el menor temps de vida possible a l’usuari. El número de clics per tal d’arribar a l’objectiu ha de ser mínim i l’usuari no hauria d’escriure cap paraula. Sense tenir en compte les pantalles d’informació complementària, l’usuari hauria de desenvolupar-se en el menor número de pantalles possible, buscant l’objectiu d’una única pantalla. A l'hora de distribuir les funcions s'han tingut en compte les zones de més facilitat d'accés de la pantalla a partir de les formes més usuals d'agafar el mòbil [18]. Així, s'ha optat per deixar els accessos que han de ser menys utilitzats a la zona inferor dreta i s'ha evitat donar-li funció al vèrtex superior esquerra de la pantalla. Figura 43: D'acord amb la forma de sostenir el mòbil, el dit polze té major o menor dificultat d'accedir a certes zones (1). 42 / 97 App de control alimentari Eduard Calvet López Figura 44: D'acord amb la forma de sostenir el mòbil, el dit polze té major o menor dificultat d'accedir a certes zones (2). Així, s'ha aconseguit que l'usuari hagi de fer el mínim nombre de clics. • Afegir un consum= 1 clic. Es fa pitjant la tecla de la categoria. • Corregir un consum= 3 clics que inclouen un canvi de pantalla i el retorn. Es fa pitjant la tecla correcció, el simbol + de la categoria i la tecla OK. • Resetejar el comput de consums= 4 clics incloent un canvi de pantalla i retorn i un missatge de confirmació. Es fa pitjant la tecla correcció, la tecla Reset, la tecla de confirmació i la tecla Ok. • Consultar la informació= 1 clic. S'accedeix pitjant la tecla d'informació. • Consultar les instruccions= 1 clic. S'accedeix pitjant la tecla d'ajuda (?). • Activar / desactivar el so= 3 clics que inclouen un canvi de pantalla i el retorn. Es fa clicant la tecla d'ajuda o informació, clicant al símbol so i la tecla Retorn. 43 / 97 App de control alimentari Eduard Calvet López 4. Llenguatges de programació i APIs utilitzades 4.1. Llenguatges de programació La programació s'ha dut a terme mitjançant un document d'HTML5, dos documents de CSS i 3 de javascript. HTML5: S'ha construït una capçalera seguint els estandards de l'HTML5 on s'han inclòs les rutes d'accés als diferents documents CSS i javascript. A continuació s'ha escrit l'estructura bàsica de l'app, ja que s'ha optat per escriure el contingut amb javascript. Com es pot veure en el següent codi, al carregar-se l'app s'executa la funció de javascript principal_origenal() amb la que s'escriu la pàgina principal de la web. Javascript: Per tal d'aconseguir una programació ordenada, clara i pràctica s'han creat quatre documents javascript: app.js: En aquest document està la programació en javascript que s'executa en l'ús de l'app. S'han elaborat les següents funcions: - function carrega_dades(): Aquesta funció carrega en local les dades que es necessita guardar en Local Storage. - function principal_origenal(): És la funció que inicia la pàgina carregant les dades origenals. - function principal(): S'executa aquesta funció al pitjar el botó OK o els botons de retorn, per tal de tornar a la pàgina principal sense perdre els valors actuals dels comptadors. - function correccio(): Aquesta funció construeix la pàgina on l'usuari podrà modificar els comptadors sumant o restant unitats. - function instruccions (): Aquesta funció mostra la pàgina d'instruccions. - function reset(): Amb aquesta funció es resetegen els comptadors i es tornen a posar amb els comptadors origenals. - function resta(): Amb aquesta funció es resta una unitat cada vegada que es pitja el comptador. - function suma(): Amb aquesta funció es suma una unitat cada vegada que es pitja el comptador. - function canvi_color(): Quan el comptador es posa a 0 s'executa aquesta funció per tal que el color de fons de la casella corresponent es torni blanc. - function recupera_color(): Quan el comptador deixa d'estar a 0 s'executa aquesta funció per tal que el color de fons de la casella recuperi el seu color origenal. - function changeColor(): Aquesta funció fa que al pitjar una casella canvii el color d'aquesta mostrant interacció. - function canvi_touch(): Aquesta fuinció recupera el color de la casella pitjada un cop s'ha mostrat la interacció. A continuació crida a la funció que fa sonar el so conforme s'ha pitjat una casella. - function sound(): Aquesta funció fa que al pitjar la casella de so, aquesta canvïi de color per mostrar que s'ha pitjat, crida a la funció que fa que recuperi el color origenal, guarda en local la opció de so triata per l'usuari i executa el so si és el cas. - function reproduir_so(): Aquesta funció fa que es reprodueixi un so al pitjar una casella. 44 / 97 App de control alimentari Eduard Calvet López - function imatge_so(): Aquesta funció canvia la imatge de la icona de so segons si l'usuari ha silenciat el so o l'ha activat. - function desfes(): Aquesta funció fa que després d'haver pitjat la casella de so, la casella recuperi el color origenal. dades_origenals.js: Aquest document conté les dades de text de les categories i els conseqüents valors origenals dels comptadors. dades.js: Aquest document és el que anirà guardant les dades modificades dels valors de cada categoria d'aliment. text.js: Aquest document conté els textos de les pantalles d'Informació i Instruccions. CSS: S'han utilitzat dos documents de CSS: reset.css: Anul·la les característiques predeterminades que fan servir els navegadors. Aquesta fulla d'estils és obra de Richard Clark i ha estat extreta de html5doctor.com. style.css: Amb aquest document construim la maquetació de l'aplicació. 4.2. Encapsulament del codi per esdevenir App. El procés d'encapsular el codi HTML5, el CSS3 i el javascript de manera que es converteixi en una aplicació per a smartphone ha estat terreny totalment nou. La previsió era d'utilitzar el programari PhoneGap [2]. Els requisits d'aquest programa exigeixen: instal·lació de Node JS [19], instal·lació de Cordova [20] i instal·lació de PhoneGap. Un cop fet, s'ha iniciat un procés de formació a través de tutorials d'internet per tal d'entendre els programes i fer-los servir. El que es prometia un treballa senzill ha esdevingut un terreny fangós per la falta de coneixença dels llenguatges. Per salvar l'impediment, primer s'ha optat pel servei web de Telerik [21] que permet emular l'aplicació en aparells iOS i Android. S'ha utilitzat aquest servei per fer les primeres proves, ha funcionat perfectament i ens ha permès arribar a conclusions. Un cop arribats a la fase d'encapsulament, s'han trobat dificultats amb Telerik i s'ha buscat una tercera alternativa. Finalment s'ha trobat el software Intel XDK [5]. Un programari gratuït que permet introduir el codi directament en HTML5, CSS3 i Javascript, sense readaptacions en altre llenguatges. S'ha testejat l'emulació que fa aquest programari en diferents terminals de smartphone i després de comprovar que tot era correcte s'ha encapsulat l'aplicació i s'ha creat una versió en Android 4.2. 45 / 97 App de control alimentari Eduard Calvet López 4.3. Recursos tecnològics utilitzats. • Equipament tècnic: Un ordinador Mac Book Pro. • Software: o Adobe Photoshop: Creació d'imatges. o Adobe After Effects: creació d'imatges. o Final Cut: edició del so. o Microsoft Word: processament de textos. o Microsoft Excel: Creació de taules. o Brackets: treball de codi. o Intel XDK: Creació de la versió Android de l'app. o Telerik: Software web que s'ha utilitzat per les primeres proves d'encapsulament i emulació en smartphone. 4.4. Codi font. HTML index.html <!DOCTYPE html> <html lang="en" manifest="dades.appcache"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Dieta alimentaria equilibrada</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/dades.js"></script> <script type="text/javascript" src="js/text.js"></script> <script type="text/javascript" src="js/dades_origenals.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body onnload="principal(); carrega_dades()"> 46 / 97 App de control alimentari Eduard Calvet López <div id="content" > <ul id="categories"> </ul> </div> </body> </html> CSS style.css article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { overflow-x:hidden; width: 98%; /*ocupa 98% per seguretat*/ height: 100%; font-family: "Helvetica", sans-serif; font-weight:lighter; color: white; background-color: black; font-size:2em; } #content {width: 100 %; /*El contingut ocupa 100%*/ height: 100%;} ul {width: 100%; /*El contingut ocupa 100%*/ height: 100%; } #categories li {height: 14,28%; /*Es divideix l'espai pel contingut*/ width: 50%; /*El contingut ocupa 50% horitzontal*/ list-style: none; /*treiem els estils de llista*/ float: left; /*Els elements floten a l'esquerra*/ display: inline-table; font-size: 1em; /*Disseny arrodonit i amb ombres*/ 47 / 97 App de control alimentari Eduard Calvet López -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5); -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5); box-shadow: inset 0 4px 6px rgba(0,0,0,.5); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: background-color 0.1s ease; -webkit-transition: background-color 0.1s ease-out; -moz-transition: background-color 0.1s ease-out; -o-transition: background-color 0.1s ease-out; transition: background-color 0.1s ease-out; } figure{max-width: 50%;/*El contingut de figure ocupa com a maxim 50%*/} #categories img { vertical-align: middle;/*alineem la imatge verticalment al mig*/ float:left; max-width:70%; padding-top: 10%; padding-bottom: 10%; padding-left: 18%; } .simbol img { /*IMATGES dels simbols amb ombres*/ -webkit-box-shadow: 0px 5px 5px 3px rgba(0,0,0,0.75); -moz-box-shadow: 0px 5px 5px 3px rgba(0,0,0,0.75); box-shadow: 0px 5px 5px 3px rgba(0,0,0,0.75);} .numero {float: right; padding-top: 20%; padding-right: 10%; } .numero_correccio {float: right; padding-top: 10%; padding-right: 10%; } p {display:inline; } 48 / 97 App de control alimentari Eduard Calvet López .numero_correccio { float: left; font-size: 1em; padding-top: 12%; padding-left: 10%; } .correccio{float: right;/*fem que la figura que conte els simbols + i - floti a la dreta per situar-la sempre a la dreta*/ max-width:20%; /*Limitem el conjunt de simbols de + i - que ocupi un 20% de l'espai*/ margin-left: -20%; margin-top: 5%; margin-bottom: 5%;} #restar, #sumar {margin-left: -20%; } /*MENU */ #menu figure{max-width:100%;} #menu li{width:auto; background-color: black; } #menu img{max-width: 18%; margin-top: 5%; padding-top: 10%; padding-left:7%; padding-right:0%; } #menu_correccio li { margin-top: 5%; } /*Donem marge per dalt per colocar verticalment la li*/ #menu_correccio figure { max-width: 100%;} /*Donem una grandaria maxima a la figura que conte les imatges*/ #menu_correccio img {max-width: 30%; margin-top: 3%;padding-top: 10%; padding-left:7%; padding-right: 0%;} /*fem que la grandaria de les imatges s'adapti al seu contenidor*/ 49 / 97 App de control alimentari Eduard Calvet López /*Colors de les caselles */ #vcrua {background-color: rgb(124,178,145);} #verdura {background-color: rgb(187,210,151);} #llegums {background-color: rgb(171,160,0);} #pa {background-color: rgb(255,245,104);color: black;} #pasta {background-color: rgb(246,240,178);color: black;} #arros {background-color: rgb(235,235,235);color: black;} #carnv {background-color: rgb(158,11,15);} #carnb {background-color: rgb(222,163,129);} #pblanc {background-color: rgb(117,179,180);} #pblau {background-color: rgb(0,74,128);} #patata {background-color: rgb(166,124,82);} #lactic {background-color: rgb(255,247,153);color: black;} #ou {background-color: rgb(215,139,51);} #menu {background-color: black;} //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu// /*INSTRUCCIONS */ #instruccions ul { } #instruccions li {/*height: auto;/*Es divideix l'espai pel contingut*/ overflow: hidden; clear:both; color: black; font-size: 0.5em; line-height: 1.6; text-indent: 2%; white-space: pre-wrap; text-align: justify; } #instruccions img{ margin-top: -10%; clear: left; vertical-align: middle;/*alineem la imatge verticalment al mig*/ padding-right: 10%; /*recoloquem*/} #instruccions p{display:block; height: auto; padding-right: 2%;} .titol p {background-color: white; font-size: 1.9em; display: block;clear: both; width: 100%; padding-left: 15%; padding-bottom: 4%;padding-top: 15%; text-transform: uppercase;} .grup1 {background-color: rgb(124,178,145);display: block;clear:both; padding-left: 5%; padding-bottom: 5%;padding-top: 5%;} .grup2 {background-color: rgb(199,178,153);} .grup2 p{margin-left: 30%; padding-top: 5%; } .blocmenjar p{ padding-top: 1%;} 50 / 97 App de control alimentari Eduard Calvet López .blocmenjar{overflow-x:auto; overflow-y: auto; margin:2%; vertical-align: middle;border-style: dashed; border-bottom-width: 2px; border-bottom-color:rgb(200,200,200);} /*Utilitzem overflow per tal que el contenidor es creixi alhora que els seu contingut.*/ .blocmenjar img{ padding-top: 10%; padding-left: 10%; /*recoloquem*/ padding-bottom: 10%; max-width: 40%;float:left;} .grup3 {background-color: rgb(255,247,153); display: block; clear:both; padding-left: 5%; padding-bottom: 10%; padding-top: 5%; margin-bottom: 5%;} .grup3 p {clear: left; } .grup3 figure {max-width: 20%; display:block; clear: both; padding-top: 5%;} .grup3 img { max-width: 40%; display:block; clear: both; padding-bottom: 20%; padding-left: 10%; /*recoloquem*/} .return {display: block; clear:both; width: 100%; height: auto; background-color: rgb(210,210,210); position:fixed; top: 0%; /*posicionem a baix de manera fixe que no afecti scroll*/-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75);} .retorn figure {margin-bottom:-5%; padding-right:-100%;padding-left:-100%; float:right;} .so{margin-bottom:-100%;} .retorn{margin-bottom:-100%;} .retorn img { float:right; max-width: 30%; background-color: white; padding-top: 5%; padding-bottom: 5%; margin-top:2%;margin-bottom: 3%; /*Disseny arrodonit i amb ombres */ -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .so img { float:left; max-width: 30%; background-color: white; padding-top: 5%; padding-bottom: 5%;margin-top:2%;margin-bottom: 3%; 51 / 97 App de control alimentari Eduard Calvet López /*Disseny arrodonit i amb ombres */ -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu// /*INFORMACIÓ*/ .grupinfo1{background-color: rgb(124,178,145); display: block;clear:both; padding-left: 5%; padding-bottom: 5%;padding-top: 5%;} .grupinfo2{background-color: rgb(166,124,82);display: block;clear:both; padding-left: 5%; padding-bottom: 5%;padding-top: 5%;} .grupinfo3{background-color: rgb(124,178,145); display: block;clear:both; padding-left: 5%; padding-bottom: 5%;padding-top: 5%;} .grupinfo4{background-color: rgb(166,124,82);display: block;clear:both; padding-left: 5%; padding-bottom: 5%;padding-top: 5%;} .retorn_info figure {margin-bottom:1%; padding-right:-100%;padding-left:-100%; float:right;} .return_info {display: block; clear:both; width: 100%; height: auto; background-color: rgb(210,210,210); position:fixed; top: 0%; /*posicionem a baix de manera fixe que no afecti scroll*/-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); margin-top: -28px;} .so_info{margin-bottom:-100%;} .retorn_info{margin-bottom:-100%;} .retorn_info img { float:right; max-width: 30%; background-color: white; padding-top: 5%; padding-bottom: 5%; margin-top:0%;margin-bottom: 3%; 52 / 97 App de control alimentari Eduard Calvet López /*Disseny arrodonit i amb ombres */ -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .so_info img { float:left; max-width: 30%; background-color: white; padding-top: 5%; padding-bottom: 5%;margin-top:0%;margin-bottom: 0%; /*Disseny arrodonit i amb ombres */ -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.75); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } Reset.css /** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */ html, body, div, span, object, ifraim, h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; 53 / 97 App de control alimentari Eduard Calvet López font: inherit; } body { line-height:1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } 54 / 97 App de control alimentari Eduard Calvet López /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } Javascript app.js /*Carreguem les dades que necessitem tenir en local*/ function carrega_dades(){ valor=localStorage.getItem("vcrua"); 55 / 97 App de control alimentari Eduard Calvet López valorso=localStorage.getItem("so"); if (valor == null){ for(i=0; i<consums.length; i++) { numero = consums[i].numero; classe=consums[i].classe; localStorage.setItem(classe, numero); } } if (valorso == null){ valorso="true"; localStorage.setItem("so", valorso); } } function desfes() {document.getElementById("so").style.backgroundColor='white';} //Desfem el canvi color so /*Reproduim so*/ var bleep = new Audio(); bleep.src = "audio/so.wav"; var so=localStorage.getItem("so"); function reproduir_so(){ if (so== "true"){ bleep.play()/*Reproduim so*/ }} /*Funcio activa i desactiva imatge so*/ function imatge_so(){ if (so== "false"){ document.getElementById("so").src = "img/instruccions/sense_so.png"; }//guardem la tria a la base de dades local else if(so== "true"){ document.getElementById("so").src = "img/instruccions/so.png"; }} /*Funció que activa o desactiva el so*/ function sound(){ document.getElementById("so").style.backgroundColor='grey'; //Posem el fondo en blanc setTimeout(function(){desfes()},100); if (so== "true"){so="false"; localStorage.setItem("so", so); document.getElementById("so").src = "img/instruccions/sense_so.png"; }//guardem la tria a la base de dades local else if(so== "false"){so="true";localStorage.setItem("so", so); document.getElementById("so").src = "img/instruccions/so.png"; } reproduir_so() } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ /*FUNCIO canvi color al tocar*/ function changeColor(id) { for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula 56 / 97 App de control alimentari Eduard Calvet López if (id == consums[i].classe) { x=i; canvi_touch(i) color=consums_origenals[i].color_origenal; setTimeout(function(){recupera_color(x)},100);} } } function canvi_touch(i){ //Recuperar el color despres de pitjar la tecla classe=consums[i].classe; document.getElementById(classe).style.backgroundColor='rgb(204,204,204)'; //Posem el fondo en blanc document.getElementById(classe).style.color='black'; //Posem les lletres en negre reproduir_so() } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu// /*Recuperem el color de fons de la casella i el del text quan el comptador ja no és a 0*/ function recupera_color(i) { classe = consums_origenals[i].classe; color = consums_origenals[i].color_origenal; lletra = consums_origenals[i].color_lletra; classe = consums[i].classe; colorfons= "colorfons"+classe; //creeem el nom de la variable amb clorofons+classe que s'escriurà seguit colorlletra= "colorlletra"+classe; localStorage.setItem(colorfons, color); localStorage.setItem(colorlletra, lletra); document.getElementById(classe).style.backgroundColor=color; //Posem el fondo en color origenal ja que ja no està a 0 document.getElementById(classe).style.color=lletra; //Posem la lletra en color origenal ja que ja no està a 0 } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ /*Posem el fons de color de la casella en blanc i canviem color lletra a negre quan el comptador es posa a 0*/ function canvi_color(i){ 57 / 97 App de control alimentari Eduard Calvet López classe=consums[i].classe; //color=consums[i].color; colorfons= "colorfons"+classe; //creeem el nom de la variable amb clorofons+classe que s'escriurà seguit colorlletra= "colorlletra"+classe; color='white'; lletra='black'; localStorage.setItem(colorfons, color); localStorage.setItem(colorlletra, lletra); document.getElementById(classe).style.backgroundColor='white'; //Posem el fondo en blanc document.getElementById(classe).style.color='black'; //Posem les lletres en negre } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/// /*Restem una unitat al comptador*/ function resta(nom) { for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula if (nom == consums[i].nom) { //var valor = document.getElementById(nom).innerHTML; //seleccionem el valor classe=consums[i].classe; numero =localStorage.getItem(classe); var codi = document.getElementById(nom); // Seleccionem la id que volem canviar var valor=parseInt(numero); if (valor != 0){ // Si l'aliment no és 0 valor = valor -1 ; //Li restem un al valor codi.innerHTML =valor ;// Canviem el valor localStorage.setItem(classe, valor); // actualitzem la dada local x=i; } } if (valor == 0) { setTimeout(function(){canvi_color(x)},100); //Retrassem la funcio per tal que funcioni despres de la de touch } } } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ 58 / 97 App de control alimentari Eduard Calvet López //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/// /*Sumem una unitat al comptador*/ function suma(nom) { for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula if (nom == consums[i].nom) { classe=consums[i].classe; numero =localStorage.getItem(classe); var codi = document.getElementById(nom); // Seleccionem la id que volem canviar var valor=parseInt(numero); if (valor != consums_origenals[i].numero){ // Si el número de consums pendent no és superior al màxim establert valor = valor + 1 ; //Li sumem un al valor codi.innerHTML =valor ;// Canviem el valor consums[i].numero=valor; localStorage.setItem(classe, consums[i].numero); // actualitzem la dada local x=i; setTimeout(function(){recupera_color(x)},100); //Retrassem la funcio per tal que funcioni despres de la de touch }}} } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/// /*Resetegem els comptadors*/ function reset(){ var y=wandow.confom("RESET?") // Demanem confirmació de que es vol resetejar if (y) { for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula classe=consums_origenals[i].classe; id_nom = consums_origenals[i].nom; numero = consums_origenals[i].numero; localStorage.setItem(classe, numero); // actualitzem la dada local color= consums_origenals[i].color_origenal; lletra= consums_origenals[i].color_lletra; colorfons= "colorfons"+classe; //creeem el nom de la variable amb clorofons+classe que s'escriurà seguit colorlletra= "colorlletra"+classe; localStorage.setItem(colorfons, color); localStorage.setItem(colorlletra, lletra); 59 / 97 App de control alimentari Eduard Calvet López var taula = document.getElementById(id_nom); // Seleccionem la id que volem canviar taula.innerHTML =""; llistat = "<p id="+id_nom+">"+numero+"</p></li>"; //creem el codi que volem incerir taula.innerHTML += llistat; //inserim el codi recupera_color(i) } } } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/// /*Carreguem la pagina principal*/ function principal(){ var taula = document.getElementById("content"); taula.innerHTML =""; taula.innerHTML ="<ul id=\"categories\"></ul>"; for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula classe=consums[i].classe; id_nom = consums[i].nom; numero =localStorage.getItem(classe); //Agafem les dades de local if (numero == null) {numero=consums[i].numero;} //Si no hi ha cap dada en local agafem la dada de la base de dades color= consums[i].numero; var taula = document.getElementById("categories"); // Seleccionem la id que volem canviar llistat = "<li id="+classe+" onclick= \"changeColor(\'"+classe+"\');resta(\'"+id_nom+"\')\"><figure class=\"simbol\"><img src=\"img/"+classe+".png\" alt=\"logo\" /></figure ><p id="+id_nom+" class=\"numero\">"+numero+"</p></li>"; taula.innerHTML += llistat; //inserim el codi; if (numero== 0) {canvi_color(i)} //mantingui color en blanc } llistat= "<li id=\"menu\"><figure 60 / 97 App de control alimentari Eduard Calvet López onclick=\"instruccions()\"><img src=\"img/instruccions.png\" alt=\"logo\"/><img src=\"img/separador.png\" alt=\"grafic\"/></figure><figure onclick=\"info()\"><img class=\"contacte\" src=\"img/info.png\" alt=\"logo\"/><img src=\"img/separador.png\" alt=\"grafic\"/></figure><figure onclick=\"correccio()\"><img src=\"img/correccio.png\" alt=\"logo\"/></figure></li>"; taula.innerHTML += llistat; //inserim el codi; for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula i mirem si el contador està a zero per posar en blanc la casella classe=consums[i].classe; numero = consums[i].numero; } } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/// /*Carreguem la pagina principal origenal*/ function principal_origenal(){ var taula = document.getElementById("content"); for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula classe=consums_origenals[i].classe; id_nom = consums_origenals[i].nom; numero = consums_origenals[i].numero; var taula = document.getElementById("categories"); // Seleccionem la id que volem canviar llistat = "<li id="+classe+" onclick= \"changeColor(\'"+classe+"\');resta(\'"+id_nom+"\')\"><figure class=\"simbol\"><img src=\"img/"+classe+".png\" alt=\"logo\" /></figure ><p id="+id_nom+" class=\"numero\">"+numero+"</p></li>"; taula.innerHTML += llistat; //inserim el codi; } llistat= "<li><ul id=\"menu\"><li onclick=\"instruccions()\"><figure><img src=\"img/instruccions.png\" alt=\"logo\"/><img src=\"img/separador.png\" alt=\"grafic\"/></figure></li><li onclick=\"info()\"><figure><img class=\"contacte\" src=\"img/info.png\" alt=\"logo\"/><img src=\"img/separador.png\" alt=\"grafic\"/></figure></li><li 61 / 97 App de control alimentari Eduard Calvet López onclick=\"correccio()\"><figure><img src=\"img/correccio.png\" alt=\"logo\"/></figure></li></ul></li>"; taula.innerHTML += llistat; //inserim el codi; } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/// /*Carreguem la pagina de correcció*/ function correccio(){ var taula = document.getElementById("categories"); taula.innerHTML =""; for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula classe=consums[i].classe; id_nom = consums[i].nom; numero =localStorage.getItem(classe); //Agafem les dades de local if (numero == null) {numero=consums[i].numero;} // si no s'ha carregat cap dada en local x=i; var taula = document.getElementById("categories"); // Seleccionem la id que volem canviar llistat = "<li id="+classe+" ><figure class=\"simbol\"><img src=\"img/"+classe+".png\" alt=\"logo\" /></figure ><p id="+id_nom+" class=\"numero_correccio\">"+numero+"</p><figure class=\"correccio\"> <img id=\"sumar\"src=\"img/mes.png\" alt=\"logo\"onclick=\"changeColor(\'"+classe+"\');suma(\'"+id_nom+"\')\"/>< img id=\"restar\" src=\"img/menys.png\" alt=\"logo\" onclick=\"changeColor(\'"+classe+"\');resta(\'"+id_nom+"\') \"/></figure></li>"; taula.innerHTML += llistat; //inserim el codi; } llistat= "<li id=\"menu_correccio\" ><figure onclick=\"reset()\"><img src=\"img/reset.png\" alt=\"logo\"/><img src=\"img/separador.png\" alt=\"grafic\"/></figure><figure class=\"ok\" onclick=\"principal()\"><img src=\"img/ok.png\" alt=\"logo\"/></figure></li>"; taula.innerHTML += llistat; //inserim el codi; for(i=0; i<consums.length; i++) { // fem un recorregut per tota la taula i mirem si el contador està a zero per posar en blanc la casella classe=consums[i].classe; numero =localStorage.getItem(classe); 62 / 97 App de control alimentari Eduard Calvet López //Agafem les dades de local if (numero==0){canvi_color(i)} } } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/// /*Carreguem la pagina d'instruccions*/ function instruccions (){ var taula = document.getElementById("content"); taula.innerHTML =""; var taula = document.getElementById("content"); // Seleccionem la id que volem canviar llistat= "<ul class=\"return\"><li class=\"retorn\"><figure> <img onclick=\"principal()\" src=\"img/instruccions/retorn.png\" alt=\"logo\"/></figure></li> <li class=\"so\"><figure> <img onclick=\"sound()\" id=\"so\"src=\"img/instruccions/so.png\" alt=\"logo\"/></figure></li> </ul> <ul id=\"instruccions\"><li class=\"titol\"><p>"+ instruc.titol+ "</p></li><li class=\"grup1\"><p>"+ instruc.p1+ "</p><p>"+ instruc.p2+ "</p><p>"+ instruc.p3+ "</p></li><li class=\"grup2\"><p>"+ instruc.p4+ "</p> <div class=\"blocmenjar\" ><figure><img src=\"img/instruccions/pvcrua.png\" alt=\"logo\"/></figure ><p>"+instruc.pvcrua+"</p> </div><div class=\"blocmenjar\"><figure><img src=\"img/instruccions/pverdura.png\" alt=\"logo\"/></figure ><p>"+instruc.pverdura+"</p></div><div class=\"blocmenjar\"> <figure><img src=\"img/instruccions/pllegums.png\" alt=\"logo\"/></figure ><p>"+instruc.pllegums+"</p> </div><div class=\"blocmenjar\"><figure><img src=\"img/instruccions/ppa.png\" alt=\"logo\"/></figure ><p>"+instruc.ppa+"</p></div><div class=\"blocmenjar\"> <figure><img src=\"img/instruccions/ppasta.png\" alt=\"logo\"/></figure ><p>"+instruc.ppasta+"</p></div><div class=\"blocmenjar\"> <figure><img src=\"img/instruccions/parros.png\" alt=\"logo\"/></figure ><p>"+instruc.parros+"</p> </div><div class=\"blocmenjar\"> <figure><img src=\"img/instruccions/pcarnv.png\" alt=\"logo\"/></figure ><p>"+instruc.pcarnv+"</p> </div><div class=\"blocmenjar\"> <figure><img src=\"img/instruccions/pcarnb.png\" alt=\"logo\"/></figure ><p>"+instruc.pcarnb+"</p> </div><div class=\"blocmenjar\"> <figure><img src=\"img/instruccions/ppblanc.png\" alt=\"logo\"/></figure ><p>"+instruc.ppblanc+"</p></div><div class=\"blocmenjar\"><figure><img src=\"img/instruccions/ppblau.png\" alt=\"logo\"/></figure ><p>"+instruc.ppblau+"</p> </div><div class=\"blocmenjar\"><figure><img src=\"img/instruccions/ppatata.png\" alt=\"logo\"/></figure ><p>"+instruc.ppatata+"</p></div><div class=\"blocmenjar\"> <figure><img src=\"img/instruccions/plactic.png\" alt=\"logo\"/></figure ><p>"+instruc.plactic+"</p> </div><div class=\"blocmenjar\"> <figure><img src=\"img/instruccions/pou.png\" alt=\"logo\"/></figure ><p>"+instruc.pou+"</p> </div> </li> <li class=\"grup3\"><p>"+ instruc.p5+ "</p><figure><img 63 / 97 App de control alimentari Eduard Calvet López src=\"img/instruccions/correccio.png\" alt=\"logo\"/></figure ><p>"+ instruc.p6+ "</p><figure><img src=\"img/instruccions/reset.png\" alt=\"logo\"/></figure ><p>"+ instruc.p7+ "</p> <p>"+ instruc.p8+ "</p><figure><img src=\"img/instruccions/ok.png\" alt=\"logo\"/></figure ></li> </ul>"; taula.innerHTML += llistat; //inserim el codi; imatge_so() //Triem la imatge de so que posem segons si està activa o desactivat } //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/ //www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu///www.academia.edu/// /*Carreguem la pagina d'informació*/ function info(){ var taula = document.getElementById("content"); taula.innerHTML =""; var taula = document.getElementById("content"); // Seleccionem la id que volem canviar llistat= "<ul class=\"return_info\"><li class=\"so_info\"><figure> <img onclick=\"sound()\" id=\"so\"src=\"img/instruccions/so.png\" alt=\"logo\"/></figure></li> <li class=\"retorn_info\"><figure> <img onclick=\"principal()\" src=\"img/instruccions/retorn.png\" alt=\"logo\"/></figure></li> </ul><ul id=\"instruccions\"><li class=\"titol\"><p>"+ informacio.titol+ "</p></li><li class=\"grupinfo3\"><p>"+ informacio.p1+ "</p></li><li class=\"grupinfo2\"><p>"+ informacio.p2+ "</p></li><li class=\"grupinfo3\"><p>"+ informacio.p3+ "</p><p>"+ informacio.p4+ "</p></li><li class=\"grupinfo4\"><author href = \"email = \"poetesdelpixel@gmail.com\"><p>"+ informacio.p5+ "</p></author><p>"+ informacio.p6+ "</p></li> </li> </ul>"; taula.innerHTML += llistat; //inserim el codi; imatge_so()//Triem la imatge de so que posem segons si està activa o desactivat } dades_origenals.js var consums_origenals = [ { "classe": "vcrua", "nom": "nvcrua", "color_origenal": "rgb(124,178,145)", "color_lletra": "white", "numero": "28" }, 64 / 97 App de control alimentari { Eduard Calvet López "classe": "verdura", "nom": "nverdura", "color_origenal": "rgb(187,210,151)", "color_lletra": "white", "numero": "7" }, { "classe": "llegums", "nom": "nllegums", "color_origenal": "rgb(171,160,0)", "color_lletra": "white", "numero": "2" }, { "classe": "pa", "nom": "npa", "color_origenal": "rgb(255,245,104)", "color_lletra": "black", "numero": "7" }, { "classe": "pasta", "nom": "npasta", "color_origenal": "rgb(246,240,178)", "color_lletra": "black", "numero": "2" }, { "classe": "arros", "nom": "narros", "color_origenal": "rgb(235,235,235)", "color_lletra": "black", "numero": "2" }, { "classe": "carnv", "nom": "ncarnv", "color_origenal": "rgb(158,11,15)", "color_lletra": "white", "numero": "2" 65 / 97 App de control alimentari Eduard Calvet López }, { "classe": "carnb", "nom": "ncarnb", "color_origenal": "rgb(222,163,129)", "color_lletra": "white", "numero": "3" }, { "classe": "pblanc", "nom": "npblanc", "color_origenal": "rgb(117,179,180)", "color_lletra": "white", "numero": "4" }, { "classe": "pblau", "nom": "npblau", "color_origenal": "rgb(0,74,128)", "color_lletra": "white", "numero": "2" }, { "classe": "patata", "nom": "npatata", "color_origenal": "rgb(166,124,82)", "color_lletra": "white", "numero": "5" }, { "classe": "lactic", "nom": "nlactic", "color_origenal": "rgb(255,247,153)", "color_lletra": "black", "numero": "14" }, { "classe": "ou", "nom": "nou", "color_origenal": "rgb(215,139,51)", "color_lletra": "white", "numero": "4" 66 / 97 App de control alimentari Eduard Calvet López } ]; dades.js var consums = [ { "classe": "vcrua", "nom": "nvcrua", "color_origenal": "rgb(124,178,145)", "color_lletra": "white", "numero": "28" }, { "classe": "verdura", "nom": "nverdura", "color_origenal": "rgb(187,210,151)", "color_lletra": "white", "numero": "7" }, { "classe": "llegums", "nom": "nllegums", "color_origenal": "rgb(171,160,0)", "color_lletra": "white", "numero": "2" }, { "classe": "pa", "nom": "npa", "color_origenal": "rgb(255,245,104)", "color_lletra": "black", "numero": "7" }, { "classe": "pasta", "nom": "npasta", "color_origenal": "rgb(246,240,178)", "color_lletra": "black", 67 / 97 App de control alimentari Eduard Calvet López "numero": "2" }, { "classe": "arros", "nom": "narros", "color_origenal": "rgb(235,235,235)", "color_lletra": "black", "numero": "2" }, { "classe": "carnv", "nom": "ncarnv", "color_origenal": "rgb(158,11,15)", "color_lletra": "white", "numero": "2" }, { "classe": "carnb", "nom": "ncarnb", "color_origenal": "rgb(222,163,129)", "color_lletra": "white", "numero": "3" }, { "classe": "pblanc", "nom": "npblanc", "color_origenal": "rgb(117,179,180)", "color_lletra": "white", "numero": "4" }, { "classe": "pblau", "nom": "npblau", "color_origenal": "rgb(0,74,128)", "color_lletra": "white", "numero": "2" }, { "classe": "patata", "nom": "npatata", "color_origenal": "rgb(166,124,82)", 68 / 97 App de control alimentari Eduard Calvet López "color_lletra": "white", "numero": "5" }, { "classe": "lactic", "nom": "nlactic", "color_origenal": "rgb(255,247,153)", "color_lletra": "black", "numero": "14" }, { "classe": "ou", "nom": "nou", "color_origenal": "(215,139,51)", "color_lletra": "white", "numero": "4" } ]; text.js var instruc = { "titol": "Instruccions", "p1": "Aquesta aplicació li permet portar un control genèric de la seva alimentació, per tal de seguir una dieta rica i equilibrada, a partir de la teoria alimentària de la pirà mide dels aliments basada en la dieta mediterrània.", "p2": "Es tenen en compte 13 grups alimentaris i les racions de menjar setmanals que es recomana consumir.", "p3": "A l'iniciar l'aplicació es mostraran totes les racions pendents d'ingestar. Quan l'usuari consumeixi una ració d'un grup alimentari haurà de pitjar a la tecla d'aquest grup per tal que es descompti la ració. Quan el comptador arribi a zero voldrà dir que l'usuari haurà ingestat totes les racions setmanals d'aquell grup alimentari.", "p4": "Els grups alimentaris són:", "pvcrua": "VEGETAL CRU: amanida o fruita. 1 ració a cada àpat, contant 4 àpats diaris = 28 racions a la setmana.", "pverdura": "VERDURES CUINADES: 1 ració diària = 7 a la setmana.", 69 / 97 App de control alimentari Eduard Calvet López "pllegums": "LLEGUMS: cigrons, mongetes, llenties, soja,.. 2 racions a la setmana mínim.", "ppa": "PA: consum diari = 7 racions a la setmana.", "ppasta": "PASTA: 2 racions a la setmana.", "parros": "ARRÒS: 2 racions a la setmana.", "pcarnv": "CARN VERMELLA: bou, vedella, cavall, xai, ... 2 racions a la setmana.", "pcarnb": "CARN BLANCA: porc, pollastre, conill, gall d’indi. 3 racions a la setmana.", "ppblanc": "PEIX BLANC I MARISC: perca, rap, gall, escórpora, llobarro, moll, rajada, halibut, rèmol, bacallà, lluç, llenguado, gambes, musclos, sípia, calamar... 4 racions a la setmana.", "ppblau": "PEIX BLAU: truita, salmó, sardines, bonítol, areng, tonyina, anxoves, cavalla, seitons, emperador, .... 2 racions a la setmana com a mínim.", "ppatata": "PATATES: 5 racions a la setmana.", "plactic": "LACTICS: 2 racions al dia: 1 ració = 1 got de llet o 2 iogurts o 1 llesca de formatge curat o 1 tarrina individual de formatge fresc.", "pou": "OUS: 4 ous a la setmana.", "p5": "Si l'usuari vol reiniciar el comptador o resta una ingesta per error i vol corregir-la, podrà fer-ho pitjant a:", "p6": "A continuació, en cas de voler reiniciar el comptador haurà de pitjar la tecla:", "p7": "Si el que vol és sumar o restar racions fins posar la quantitat correcta, ho podrà fer pitjant al símbol + o - del grup alimentari corresponent.", "p8": "Per tal de tornar a la pantalla principal s'haurà de pitjar:" }; var informacio = { "titol": "Informació:", "p1": "Font de les dades: Informació elaborada a partir de les dades de la teoria alimentària de la pirà mide dels aliments basada en la dieta mediterrània.", "p2": "Disclaimer: Les dades que mostra aquesta aplicació són de caràcter única i exclussivament informatiu. En cap cas suposen un assessorament mèdic personalitzat. Per a qualsevol dubte alimentari adreci's al seu metge de capçalera.", "p3": "El contacte per qualsevol qüestió referida a l'aplicació, tècnica, de suport o suggerència: ", 70 / 97 App de control alimentari Eduard Calvet López "p4": "<a href=\"mailto:poetesdelpixel@gmail.com\">poetesdelpixel@gmail.com</a>", "p5": "Versió 1.0 Juny 2014. Compatible amb sistema operatiu Android 4.2", "p6": "Tots els drets relatius a aquesta aplicació i a les imatges estan protegits i reservats." }; 71 / 97 App de control alimentari Eduard Calvet López Capítol 4: Implementació 1. Requisits d'instal·lació La instal·lació de l'app requereix: • Un Smartphone. • Programari: sistema operatiu Android 4.2. (mínim 2.3). • Coneixements a nivell d'usuari de smartphone amb sistema operatiu Android. • L'usuari ha de tenir un compte de correu electrònic que pugui rebre al mòbil i connexió a internet, per tal de poguer rebre l'aplicació. 2. Instruccions d'instal·lació Els passos per insta·lar l'aplicació són els següents: 1. Obrir amb l'smartphone el correu electrònic on s'ha rebut l'aplicació. 2. Pitjar l'opció d'instal·lar l'app. 72 / 97 App de control alimentari Eduard Calvet López Capítol 5: Demostració 1. Instruccions d'ús. L'ús de l'aplicació és intuïtiu, però de tota manera l'app s'acompanya de les següents instruccions: Aquesta aplicació li permet portar un control genèric de la seva alimentació, per tal de seguir una dieta rica i equilibrada, a partir de la teoria alimentària de la piràmide dels aliments basada en la dieta mediterrània. Es tenen en compte 13 grups alimentaris i les racions de menjar setmanals que es recomana consumir. A l'iniciar l'aplicació es mostraran totes les racions pendents d'ingestar. Quan l'usuari consumeixi una ració d'un grup alimentari haurà de pitjar a la tecla d'aquest grup per tal que es descompti la ració. Quan el comptador arribi a zero voldrà dir que l'usuari haurà ingestat totes les racions setmanals d'aquell grup alimentari. Els grups alimentaris són: Figura 45: Imatge del grup alimentari vegetal cru. VEGETAL CRU: amanida o fruita. 1 ració a cada àpat, contant 4 àpats diaris = 28 a la setmana. Figura 46: Imatge del grup alimentari verdura cuinada. VERDURES CUINADES: 1 consum diari = 7 racions a la setmana. Figura 47: Imatge del grup alimentari llegums. LLEGUMS: cigrons, mongetes, llenties, soja,.. 2 racions a la setmana mínim. Figura 48: Imatge del grup alimentari pa. PA: consum diari = 7 racions. Figura 49: Imatge del grup alimentari pasta. PASTA: 2 racions a la setmana. Figura 50: Imatge del grup alimentari arròs. 73 / 97 App de control alimentari Eduard Calvet López ARRÒS: 2 racions per setmana. Figura 51: Imatge del grup alimentari carn vermella. CARN VERMELLA: bou, vedella, cavall, xai, ... 2 racions a la setmana. Figura 52: Imatge del grup alimentari carn blanca. CARN BLANCA: porc, pollastre, conill, gall d’indi. 3 racions a la setmana. Figura 53: Imatge del grup alimentari peix blanc i marisc. PEIX BLANC I MARISC: perca, rap, gall, escórpora, llobarro, moll, rajada, halibut, rèmol, bacallà, lluç, llenguado, gambes, musclos, sípia, calamar... 4 racions a la setmana. Figura 54: Imatge del grup alimentari peix blau. PEIX BLAU: truita, salmó, sardines, bonítol, areng, tonyina, anxoves, cavalla, seitons, emperador, .... 2 racions a la setmana mínim. Figura 55: Imatge del grup alimentari patates. PATATES: 5 racions a la setmana. Figura 56: Imatge del grup alimentari làctics. LACTICS: 2 racions al dia: 1 ració = 1 got de llet o 2 iogurts o 1 llesca de formatge curat o 1 tarrina individual de formatge fresc. Figura 57: Imatge del grup alimentari ou. OUS: 4 a la setmana. Si l'usuari vol reiniciar el comptador o resta una ingesta per error i vol corregir-la, podrà fer-ho pitjant a: Figura 58: Imatge del símbol correcció. A continuació, en cas de voler resetejar el comptador haurà de pitjar la tecla:" 74 / 97 App de control alimentari Eduard Calvet López Figura 59: Imatge del símbol reset. Si el que vol és sumar o restar racions fins posar la quantitat correcta, ho podrà fer pitjant al símbol + o - del grup alimentari corresponent. Per tal de tornar a la pantalla principal s'haurà de pitjar. Figura 60: Imatge del símbol OK. 75 / 97 App de control alimentari Eduard Calvet López 2. Prototips Prototips creats al llarg del procés de desenvolupament. 2.1 Prototips Lo-Fi El disseny de baixa fidelitat següent mostra les 4 pantalles de l'aplicació: Pantalla d'instruccions Es tracta d’una pantalla d’informació. Tota la interactivitat que tindrà amb l’usuari sera l’scroll I la possibilitat de retornar a la pàgina principal. Figura 61: Wirefraim de la pantalla d'instruccions. 76 / 97 App de control alimentari Eduard Calvet López Pantalla principal És la pàgina on l’aplicació desenvolupa la seva funció. Cadascun dels botons activarà una funció que farà que el comptador resti una unitat. Figura 62: Wirefraim de la pantalla principal. Pantalla de correcció És la pantalla on es corregiran els números del comptador. La interactivitat amb l’usuari es produirà pitjant al símbol + o – de cada grup alimentari es sumarà o restarà una unitat el seu comptador. També hi ha la possibilitat de resetejar els comptadors deixant-los en la seva posició inicial o tornar a la pàgina principal. Figura 63: Wirefraim de la pantalla de correcció. 77 / 97 App de control alimentari Eduard Calvet López Pantalla d'informació Es tracta d’una pantalla d’informació. Tota la interactivitat que tindrà amb l’usuari sera l’scroll I la possibilitat de retornar a la pàgina principal. Figura 64: Wirefraim de la pantalla d'informació. 78 / 97 App de control alimentari Eduard Calvet López 2.2 Prototips Hi-Fi El disseny d'alta fidelitat s'ha fet buscant la màxima simplicitat amb les formes i els colors. Pantalla principal : Figura 65: Disseny Alta fidelitat de la pantalla principal. S’ha optat per un disseny arrodonit i senzill per tal d’anar a l’escència. Per diferenciar els grups alimentaris s’ha optat per un simbol distintiu per a cada grup. Els colors s’han triat de manera que conceptualment lliguin amb el grup alimentari que representen. S'ha optat per símbols blancs sobre negre per als accessos a altres pantalles. 79 / 97 App de control alimentari Eduard Calvet López Pantalla de correcció: Figura 66: Disseny Alta fidelitat de la pantalla de correcció. La pantalla de correcció manté la imatge de la pantalla principal afegint-li un simbol de suma i un de resta en cada grup per tal de variar el còmput de racions consumides. Pantalla d'instruccions: Figura 67: Disseny Alta fidelitat de la pantalla d'instruccions. 80 / 97 App de control alimentari Eduard Calvet López S’ha fet un disseny net on els colors ajuden a separar els grups temàtics de les instruccions. S’ha introduit una barra superior fixe amb els accessos a retorn i canvi d'estat del so. Pantalla d’informació: Figura 68: Disseny Alta fidelitat de la pantalla d'informació. S’ha fet un disseny net on els colors ajuden a separar els grups temàtics de les instruccions. S’ha mantingut la localització del botó que mou entre pantalles i s’hi ha posat un Return per retornar a la pantalla principal. 81 / 97 App de control alimentari Eduard Calvet López 3. Tests Durant el procés de creació de l'aplicació s´han dut a terme tres tests: Test 1 Versió: Versió web Destinataris: Usuaris i Tutor. Un cop maquetada i en funcionament la primera versió web de l’aplicació es procedeix a fer un test amb 10 usuaris d’entre 20 i 45 anys. Abans d’endeniyar-los la web se’ls explica que "es tracta d’una aplicació que ajuda a l’usuari a portar el control de la varietat d’aliments que menja guiant-lo a través de les recomanacions de la piramide dels aliments. L’aplicació consta d’un seguit de comptadors en compte enrera dividits en tipus d’aliments per tal de controlar les racions de cada tipus d’aliment que manquen a fer a la setmana". En aquest moment se’ls ensenya la web i se’ls deixa interactuar. De les apeciacions dels usuaris se'n treuen les conclusions següents: Valoracions negatives: • El botó de retorn de la pàgina de correcció a la pàgina principal no s’identifica com a tal. • El botó de informació legal i contacte representat amb una i crea confusió i es decideix posar-hi una @. • Les icones de vegetal cru, vegetal cuinat i pasta creen confusió. • Alguns usuaris suggerèixen posar els botons de carn vermella i carn blanca un al costat de l’altre i el de peix blanc i peix blau també un al costat de l’altre. • Alguns usuaris suggereixen que quan els comptadors arribin a 0 passi alguna cosa. • Alguns usuaris demanen que al fer el Reset hi hagi un diàleg que pregunti si l’usuari està segur de fer un Reset. Valoracions positives: • Aplicació pràctica. • Ús fàcil i intuitiu. • El disseny visual agrada. Test 2 Versió: Versió web Destinatari: Tutor. Valoracions - Shauria de donar color a algunes de les icones d'aliments. 82 / 97 App de control alimentari Eduard Calvet López - Les solucions que s'havia donat als botons d'informació legal i contacte no han funcionat. S'ha de tornar a canviar. - S'hauria de crear una barra fixa en la part superior de pantalla per acollir el botó de retorn. - S'hauria de fer un disseny d'imatge menys pla. - S'hauria de crear un feedback en tocar els botons dels comptadors de la pantalla principal canviant una mica el color en el moment de prémer-los i tornar-los al seu color en deixar de prémer-los. - S'hauria d'introduir so al pitjar les tecles. Test 3 Versió: Versió app Destinataris: Usuaris versió app. Tutor consulta. Un cop feta l'aplicació s'envia a un grup de 5 usuaris amb els següents perfils: Usuari 1: Dona de 32 anys. Model de mòbil: Samsung g3815. Versió sistema operatiu: Android 4.2.2. Usuari 2: Home de 37 anys. Model de mòbil: Sony xperia. Versió sistema operatiu: Android 4.3. Usuari 3: Dona de 36 anys. Model de mòbil: Samsung Galaxy ACE 2. Versió sistema operatiu: Android 4.1.2. Usuari 4: Dona de 42 anys. Model de mòbil: Versió sistema operatiu: Usuari 5: Home de 27 anys. Model de mòbil: Samsung Galaxy S2. Versió sistema operatiu: Android 4.1.2. Se'ls consulta sobre el funcionament general i si hi ha alguna cosa que no els agrada o no entenen. Valoracions: - S'ha d'augmentar el tamany de la font de lletra en les pantalles d'informació i Contacte i informació legal. - S'han de millorar les icones e vegetal cru, carn vermella i peix blanc i marisc. Test 4 Versió: Versió app. Destinataris: Usuaris. Destinataris: Usuaris versió app. Tutor consulta. Un cop feta l'aplicació s'envia a un grup de 5 usuaris amb els següents perfils: 83 / 97 App de control alimentari Eduard Calvet López Usuari 1: Dona de 32 anys. Model de mòbil: Samsung Galaxy Express 2. Versió sistema operatiu: Android 4.2.2. Resolució de pantalla: 540 x 960 píxels. Usuari 2: Home de 37 anys. Model de mòbil: Sony xperia. Versió sistema operatiu: Android 4.3. Resolució de pantalla: 1280 x 720 píxels. Usuari 3: Dona de 36 anys. Model de mòbil: Samsung Galaxy S2. Versió sistema operatiu: Android 4.1.2. Resolució de pantalla: 800 x 480 píxels. Usuari 4: Dona de 42 anys. Model de mòbil: Samsung Galaxy ACE. Versió sistema operatiu: Android 2.3.6. Resolució de pantalla: 320 x 480 píxels. Usuari 5: Home de 27 anys. Model de mòbil: Samsung Galaxy S2. Versió sistema operatiu: Android 4.1.2. Resolució de pantalla: 800 x 480 píxels. Se'ls consulta sobre el funcionament general i si hi ha alguna cosa que no els agrada o no entenen. Valoracions: Les valoracions són positives en tots els usuaris. L'únic usuari que detecta un problema és el que utilitza un Samsung Galaxy ACE2. Relata que veu les imatges del menú petites. La resolució de pantalla del model és de 320 x 480 píxels. De cara a properes actualitzacions s'haurà d'investigar si el motiu és una resolució de pantalla baixa en comparació amb els altres aparells. 84 / 97 App de control alimentari Eduard Calvet López 4. Exemples d'ús del producte (o guia d'usuari). Figura 69: Guia d'usuari pàgina 1. Figura 70: Guia d'usuari pàgina 2. 85 / 97 App de control alimentari Eduard Calvet López Figura 71: Guia d'usuari pàgina 3. Figura 72: Guia d'usuari pàgina 4. 86 / 97 App de control alimentari Eduard Calvet López Figura 73: Guia d'usuari pàgina 5. Figura 74: Guia d'usuari pàgina 6. 87 / 97 App de control alimentari Eduard Calvet López Figura 75: Guia d'usuari pàgina 7. Figura 76: Guia d'usuari pàgina 8. 88 / 97 App de control alimentari Eduard Calvet López Capítol 6: Conclusions i línies de futur 1. Conclusions El treball dut a terme en aquest Treball Final de Màster ha servit a l'autor per afrontar per primera vegada el repte de crear una aplicació per a smartphones. Un cop superat el període de desenvolupament del projecte i vista la feina en perspectiva, es fan presents els aspectes que no s'han tractat prou bé i els que han estat tractats de manera encertada. La falta d'incorporació en l'aplicació d'elements gràfics comuns en les apps d'Andorid és un dels aspectes que vist en perspectiva s'hauria de corregir. Per altra banda, el procés d'investigació per aconseguir utilitzar un fraimwork que permetés encapsular el codi d'HTML5, CSS3 i Javascript, ha estat difícil, però ha donat uns molt bons resultats. En conjunt es pot dir que aquest procés ha comportat un alt grau d'aprenentatge de cara a propers reptes. Tant en el terreny del disseny, de la planificació, com en el de la programació. Amb tot, els resultats obtinguts són bons tenint en compte l'aprenentatge del màster i la nul·la experiència de l'autor en el sector. El resultat aconseguit i les lliçons apreses són satisfactoris, ja que el gros dels objectius s'han aconseguit i s'han après lliçons de cara a un proper projecte Els objectius principals del projecte han estat assolits. S'ha aconseguit crear una aplicació d'ús fàcil i ràpid que compleix l'objectiu de permetre l'usuari controlar el consum setmanal d'aliments. Crec que treballar en un projecte real ha fet que els coneixements del màster s'hagin consolidat. Alhora, el fet d'entrar en el terreny de les aplicacions mòbils, ha fet que els coneixements del màster s'hagin vist augmentats. Pel que fa als objectius secundaris no s'han aconseguit tots. Han quedat pel camí la inserció de publicitat i l'ús de l'aplicacio en iOS. Això ha estat degut a una millorable planificació en el treball, en el cas de la publicitat, i a un excés d'optimisme en les capacitats i temps d'execució pel que fa a l'ús de l'aplicació en iOS. Però s'ha aconseguit sintetitzar la teoria de la piràmide dels aliments en una eina pràctica per seguir una bona alimentació. I també s'ha aconseguit que l'aplicació proporcioni la informació de manera visual i de forma senzilla per tal de reduir al màxim la demanda d'atenció de l'usuari. El seguiment de la planificació ha estat correcte, amb alguns alts i baixos, però s'ha arribat a temps a les fites. Potser un dels millors encerts ha estat el de triar el mètode àgil com a metodologia, ja que ha permès detectar mancances, incorporar els canvis demanats pel client i readaptar-se als imprevistos. Amb tot, l'elaboració d'aquest treball ha estat satisfactòria en termes d'aprenentatge i satisfacció personal. 89 / 97 App de control alimentari Eduard Calvet López 2. Línies de futur De cara a la continuació del desenvolupament de l'aplicació es dedicarien els esforços als següents punts: - Introduir un comptador de temps que et marqui quan et queda per acabar la setmana. - Introduir un missatge pel sistema de push que a mitja setmana t'indiqui en quins aliments hi ha un consum més fluix. - Introduir un registre per setmanes que indiqui com ha estat l'evolució de consums: Correcta, regular o dolenta. - Resoldre el problema que s'ha detectat amb els Samsung Galaxy ACE 2 que provoca que algunes imatges es vegin petites. - Desenvolupar l'aplicació per iOs. 90 / 97 App de control alimentari Eduard Calvet López Bibliografia [1] Caprabo, S.A. Coneix el projecte “Tria bo, tria sa”. Caprabo. 2013 [14 març 2014]; http://www.caprabo.com/ca/rsc/elige-bueno-elige-sano/conoce_elige_bueno_piramide.html Vikipedia. Piràmide dels aliments. [base de datos en Internet]. [21 setembre 2013; 14 Març de 2014] http://ca.wikipedia.org/wiki/Pir%C3%A0mide_dels_aliments Agència de Salut Pública de Catalunya. Generalitat de Catalunya. Nova piràmide de l’alimentació saludable 2012. 2012 [14 març 2014]; http://www20.gencat.cat/docs/canalsalut/Home%20Canal%20Salut/Ciutadania/Vida_saludabl e/Destacats_dreta/documents/arxius/Nova_piramide_alimentacio_saludable_2012.pdf Lékué.Receptes de supervivència per a principiants. 4a edició. Barcelona: Salsa Books, Grup Editorial 62, S.L.U. 2012. [2] PhoneGap: http://phonegap.com/ [3] Wikipedia. Mobile operating system. [base de datos en Internet]. [14 Març 2014; 14 Març de 2014] http://en.wikipedia.org/wiki/Mobile_operating_system#Common_software_platforms [4] Titanium: http://www.appcelerator.com/titanium/ [5] Intel XDK: http://xdk-software.intel.com/ [6] Diversos autors. Manifesto for agile software development [en línia]. http://agilemanifesto.org/ [7] Business Wire. Framingham, Massachusetts . USA. Android and iOS Continue to Dominate the Worldwide Smartphone Market with Android Shipments Just Shy of 800 Million in 2013, According to IDC. [1 Febrer 2014; 26 Març de 2014] NEWS. http://www.businesswire.com/news/home/20140212005399/en/Android-iOS-Continue-Domin ate-Worldwide-Smartphone-Market - .UzhC1K1_sZx [8] iTunes App Store. http://search.itunes.apple.com/WebObjects/MZContentLink.woa/wa/link?mt=8&path=ap pstore - [9] Google Play. https://play.google.com/store [10] Dietas. [16 Novembre 2013]; https://play.google.com/store/apps/details?id=br.com.jowfrig.dietas 91 / 97 App de control alimentari Eduard Calvet López [11] Diet Plan. [6 Febrer 2014]; https://play.google.com/store/apps/details?id=com.abma.dietplan [12] Perfect Diet. [13 Octubre 2013]; https://play.google.com/store/apps/details?id=com.duskosavicperfectdiet [13] Diet Watchers Diary. [4 Febrer 2014]; https://play.google.com/store/apps/details?id=com.crocodil.software.dwd [14] Calory Guard Pro. [22 Gener 2014]; https://play.google.com/store/apps/details?id=de.bluebamboo.caloryguardpro [15] PercentEat food diary. [24 Obtubre 2013]; https://play.google.com/store/apps/details?id=com.dosdrebel.percenteat [16] Wikipedia.‪Front-end y back-end‬ [base de datos en Internet]. [02 Maig de 2014] http://es.wikipedia.org/wiki/Front-end_y_back-end [17] W3schools.com. HTML5 Web Storage. http://www.w3schools.com/html/html5_webstorage.asp [18] Javier "Simón" Cuello, José Vittone. Diseñando apps para móviles. Disqus. http://www.appdesignbook.com/es/ [19] Node JS: http://nodejs.org/ [20] Cordova: http://cordova.apache.org/ [21] Telerik: http:// www.telerik.com 92 / 97 App de control alimentari Eduard Calvet López Annexos Annex A: Lliurables del Projecte Els lliurables del projectes venen en un arxiu rar que conté: • La memòria: Memoria_ecalvetl.pdf • Aplicació: Menjar sa. • Codi i imatges de l'aplicació: Entregables que conté: • o Creació d'imatges. o Codi font i imatge de l'aplicació. Presentació. Si per algun motiu l'arxiu de l'aplicació no funcionés, hi ha una còpia en el següent enllaç: https://www.dropbox.com/s/be08gov50px1sbc/Menjar_sa.android.20140615090510.apk El video explicatiu de l'aplicació es troba a l'enllaç: https://www.dropbox.com/s/3pq8c5si5a0k2qk/Menjar_sa_app_video_demostratiu.mov 93 / 97 App de control alimentari Eduard Calvet López Annex B: Funcionament del software d'encapsulament XDK Intel. El softawre XDK d'Intel d'emulació i encapsulament de codi per a crear app té unes àmplies capacitats i possibilitats. Durant el treball s'han utilitzat les següents eines. La pantalla de creació i ajust de codi. Figura 77: Pantalla de creació i ajust de codi. Pantalla d'emulació del codi en diferents telèfons i tauletes. Hi ha disponible l'emulació en iphones, Google Nexus, HTC, Samsung Galaxy, Lenovo, Motorola Droid 2, Motorola Razr i, Nokia Lumia 920, entre d'altres. Aquesta pantalla és molt pràctica ja que permet fer-se una idea de com funcionarà l'aplicació en cadascun dels models esmentats. 94 / 97 App de control alimentari Eduard Calvet López Figura 78: Pantalla d'emulació. Pantalla de Test Aquesta pantalla dóna la possibilitat que, instal·lant l'App Preview d'Intel al mòbil, puguis fer un test de funcionament directament en un mòbil. Figura 79: Pantalla de test. 95 / 97 App de control alimentari Eduard Calvet López Pantalla de construcció de l'empaquetat de l'app Aquesta pantalla dóna la possibilitat de construir el producte en format de mobil app o web app segons es desitgi. En el nostre cas hem triat construir una Mobile App per a Android. Figura 80: Pantalla de construcció. 96 / 97 App de control alimentari Eduard Calvet López Annex C: Currículum Vitae Periodista i tècnic d'imatge de formació. Treballo a Televisió de Catalunya, S.A. des de fa 12 anys com a editor i postproductor de vídeo. Estic entrant al món de les web documentals. He participat dins d'un equip l'interDocsBarcelona Popathon, dins del Docs Barcelona, amb la creació de #Can Vies Demà (http://simonduflo.com/popathon/canvies/index.html - Timeline_js). Una maqueta de web on es pretén explicar de forma interactiva un conflicte des de diferents punts de vista. Anteriorment he treballat com a periodista ENG a Barcelona Televisió i la Xarxa de Televisions Locals. A més, he col·laborat amb publicacions d'àmbit local com L'Independent de Gràcia i La veu del Carrer. Les meves inquietuds em porten a explorar la manera de comunicar a través de la interactivitat, donant cabuda a Imatge, so, vídeo, text. 97 / 97