Desenvolupament d’una aplicaciómultiplataforma per a dispositius mòbils
Projecte Final de GrauGrau de Multimèdia
Àrea de desenvolupament d'aplicacions
Autor: Marta Pascual Viladegut
Consultors: Ignasi Lorente Puchades i Jordi Almirall LópezProfessor: Josep Prieto Blázquez
Juny 2014
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
1. Introducció2. Descripció3. Metodologia4. Usuaris i context d'ús5. Disseny conceptual6. Prototips7. Usabilitat i avaluació8. Arquitectura de l'aplicació9. Versió alpha de l'aplicació10. Conclusions
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
1. Introducció
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
2. Descripció
● Social + Multiplataforma + càmera + GPS
● Finalitats:● Poder avisar als teus amics de la teva localització● Poder avisar als teus amics d'on has estat● Poder marcar un punt de trobada on reunir als teus amics
● HTML5 + CSS3 + JS amb PhoneGap o Cordova
● App <-> Servidor <-> Base de dades
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
3. Metodologia
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Indagació
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● No cal registre - Registre via telèfon● Facilitat per realitzar la principal funcionalitat ● Facilitat per compartir foto i localització● Facilitat per especificar amb qui vols compartir● Facilitat per editar i esborrar ● Filtres i editors d’imatge● Guarda la informació fins que la pugui tramitar● Facilitat per crear grups● Opció de comentar, compartir i favorits● Opcions de configuració i de privacitat● Versió web i versió en català
● Indagació > Aspectes a simular
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● No cal registre - Registre via telèfon● Facilitat per realitzar la principal funcionalitat ● Facilitat per compartir foto i localització● Facilitat per especificar amb qui vols compartir● Facilitat per editar i esborrar ● Filtres i editors d’imatge● Guarda la informació fins que la pugui tramitar● Facilitat per crear grups● Opció de comentar, compartir i favorits● Opcions de configuració i de privacitat● Versió web i versió en català
● Indagació > Aspectes a simular
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● No cal registre - Registre via telèfon● Facilitat per realitzar la principal funcionalitat ● Facilitat per compartir foto i localització● Facilitat per especificar amb qui vols compartir● Facilitat per editar i esborrar ● Filtres i editors d’imatge● Guarda la informació fins que la pugui tramitar● Facilitat per crear grups● Opció de comentar, compartir i favorits● Opcions de configuració i de privacitat● Versió web i versió en català
● Indagació > Aspectes a simular
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● No cal registre - Registre via telèfon● Facilitat per realitzar la principal funcionalitat ● Facilitat per compartir foto i localització● Facilitat per especificar amb qui vols compartir● Facilitat per editar i esborrar ● Filtres i editors d’imatge● Guarda la informació fins que la pugui tramitar● Facilitat per crear grups● Opció de comentar, compartir i favorits● Opcions de configuració i de privacitat● Versió web i versió en català
● Indagació > Aspectes a simular
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● No cal registre - Registre via telèfon● Facilitat per realitzar la principal funcionalitat ● Facilitat per compartir foto i localització● Facilitat per especificar amb qui vols compartir● Facilitat per editar i esborrar ● Filtres i editors d’imatge● Guarda la informació fins que la pugui tramitar● Facilitat per crear grups● Opció de comentar, compartir i favorits● Opcions de configuració i de privacitat● Versió web i versió en català
● Indagació > Aspectes a simular
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● No cal registre - Registre via telèfon● Facilitat per realitzar la principal funcionalitat ● Facilitat per compartir foto i localització● Facilitat per especificar amb qui vols compartir● Facilitat per editar i esborrar ● Filtres i editors d’imatge● Guarda la informació fins que la pugui tramitar● Facilitat per crear grups● Opció de comentar, compartir i favorits● Opcions de configuració i de privacitat● Versió web i versió en català
● Indagació > Aspectes a simular
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● No cal registre - Registre via telèfon● Facilitat per realitzar la principal funcionalitat ● Facilitat per compartir foto i localització● Facilitat per especificar amb qui vols compartir● Facilitat per editar i esborrar ● Filtres i editors d’imatge● Guarda la informació fins que la pugui tramitar● Facilitat per crear grups● Opció de comentar, compartir i favorits● Opcions de configuració i de privacitat● Versió web i versió en català
● Indagació > Aspectes a simular
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Tarda en carregar l’aplicació● Al compartir foto, s’obre primer el carret● Difícil compartir foto● Compartir localització i foto per separat● La posició GPS no és exacta, sols d’un lloc creat● Tarda molt en carregar el mapa● No hi ha grups● Cal buscar als amics● Massa funcionalitats i opcions● Massa publicitat i suggerències● Versions de idioma incompletes o inexistents
● Indagació > Aspectes a evitar
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Enquesta
● Mètode de seguiment
● Mètode de diari
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● “Quedar amb uns amics” - Usuari primari
● “Quedar amb uns amics” - Usuari amic
● “Trobar els amics”
● “Compartir experiència amb els amics” - des de l’estranger
● “Compartir experiència amb els amics” - amb connexió disponible
● “Relacionar-se”
● Contextos d'ús
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Objectiu: Acordar data i lloc amb un grup d’amics
● Procés: 1. Envia una proposta de data, hora i lloc 2. Espera confirmació de la resta de convidats 3. Acorden la quedada
● Restriccions: Temps d’espera en les respostes del grup
● Entorn: Espai privat, tranquil i d’interior (casa, oficina…)
● Context d'ús “Quedar amb uns amics” - Usuari primari
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Objectiu: Confirmar data i lloc
● Procés: 1. Confirma proposta de data, hora i lloc
● Restriccions: Depèn de l'entorn
● Entorn: Qualsevol entorn
● Context d'ús “Quedar amb uns amics” - Usuari amic (resposta)
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Objectiu: Trobar els amics perduts
● Procés: 1. Envia la seva posició GPS i la fotografia 2. Espera la posició de la resta o que el trobin 3. Es troben
● Restriccions: Qualitat de la connexió i temps d’espera
● Entorn: Espai públic, sorollós, amb molta gent, poca llum i d’exterior (concert, fira…)
● Context d'ús “Trobar els amics”
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Objectiu: Compartir experiència amb els amics
● Procés: 1. Envia una fotografia i/o posició GPS i/o text del lloc on està (fa l’acció, però s’hauria de
desar i enviar-se amb bona connexió)
● Restriccions: Sense connexió disponible
● Entorn: Espai públic, interior o exterior, a l’estranger.
● Context d'ús “Compartir experiència amb els amics” estranger
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Objectiu: Compartir experiència amb els amics
● Procés: 1. Envia una fotografia i/o posició GPS i/o text del lloc
● Restriccions: Qualitat de la connexió
● Entorn: Espai públic o privat, interior o exterior
● Context d'ús “Compartir experiència amb els amics” amb connexió
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Objectiu: Relacionar-se amb els amics
● Procés: 1. Consulta 2. Interactua 3. Comparteix
● Restriccions: Cap
● Entorn: Còmode
● Context d'ús “Relacionar-se”
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Usuaris socials
● Usuaris pseudo-socials
● Usuaris poc socials
● Perfils d'usuari
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Són joves (entre menys de 20 i 40 anys) i solters● Alta experiència i ús d’smartphone i d’aplicacions● SO: Android ● Connexió amb dades mòbils quan usa apps ● Queden amb els amics a diari o setmanal i ho fan via app de missatgeria ● Si es perden, es truquen o via app de missatgeria● En un lloc especial, comparteixen per xarxa social amb tothom o via app de missatgeria ● Usen a diari les apps de xarxes socials i les apps de missatgeria instantània ● Comparteixen una fotografia per apps de xarxes socials o de missatgeria ● Comparteixen una posició GPS per missatgeria ● Comparteixen la seva informació amb una persona o grup, i ocasionalment amb tothom
● Perfil “Usuari social”
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Són joves (entre 31 i 40 anys) i en parella● Alta experiència i ús d’smartphone i d’aplicacions● Connexió amb wifi quan usa apps● Queden amb els amics setmanalment i ho fan via app de missatgeria● Si es perden, usen una app de missatgeria o es truquen● En un lloc especial, comparteixen per app de missatgeria amb grup● Usen setmanalment les apps de xarxes socials● Usen a diari les apps de missatgeria instantània● Comparteixen una fotografia per apps de missatgeria● Comparteixen una posició GPS per apps de missatgeria● Comparteixen la seva informació amb una persona i amb grup, i poc amb tothom
● Perfil “Usuari pseudo-social”
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Edat variada i en parella● Experiència i ús d’smartphone i d’aplicacions molt variada● Connexió amb wifi quan usa apps● Queden amb els amics setmanalment i ho fan via app de missatgeria o trucant● Si es perden, usen una app de missatgeria o es truquen● En un lloc especial, comparteixen per app de missatgeria o per telèfon● Usen ocasionalment les apps de xarxes socials● Usen a diari o setmanalment les apps de missatgeria instantània● Comparteixen una fotografia per apps de missatgeria● Comparteixen poques vegades una posició GPS, si ho fan, per apps de missatgeria● Comparteixen poc la seva informació, si ho fan, amb una persona i amb grup
● Perfil “Usuari poc social”
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
4. Usuaris i context d'ús
● Opció de compartir en les xarxes socials● Opció comentar● Opció “m’agrada” ● Informació “autoenviable”● Alt contrast ● Còpies de seguretat ● Opció consultar qui està convidat● Opció consultar historial ● Opció confirmar● Mostrar ruta
● Característiques descobertes per a l'aplicació
● Creació de grups ● Notificacions ● Esborrar informació compartida● Editar privacitat ● Permetre o no l’opció de compartir en
xarxes socials● Bloquejar contactes ● Autentificació extra (PIN) ● Configuració privacitat del perfil ● Informació de privacitat, seguretat i servei
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
5. Disseny conceptual
● Shaplapp
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
5. Disseny conceptual
● Historial
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
5. Disseny conceptual
● Contactes
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
5. Disseny conceptual
● Configuració
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
6. Prototips
● Prototip d'alta fidelitat: inici
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
6. Prototips
● Prototip d'alta fidelitat: fer fotografia i acceptar
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
6. Prototips
● Prototips d'alta fidelitat: Afegir informació al Shaplapp
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
6. Prototips
● Prototips d'alta fidelitat: Fitxa d'un Shaplapp
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
6. Prototips
● Prototip d'alta fidelitat: Historial en plànol i en llistat
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
6. Prototips
● Prototip d'alta fidelitat: contactes, amics i grups
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
6. Prototips
● Prototip d'alta fidelitat: Més i perfil
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
6. Prototips
● Prototip d'alta fidelitat: Notificacions
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
7. Usabilitat i avaluació
● 10 principis heurístics de Nielsen
● Guies d'estil de Apple i Android
● Test amb usuaris● Preguntes relacionades amb l'usuaris● Llistat de tasques a realitzar● Preguntes sobre les tasques realitzades
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
8. Arquitectura de l'aplicació
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
9. Versió alpha de l'aplicació
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
10. Conclusions
● Desenvolupament app inici -> versió alpha
● Aplicació dels coneixements previs
● Nous coneixements i tecnologies
● Versió alpha, però versió final definida
● Fi d'un inici
Desenvolupament d’una aplicació multiplataforma per a dispositius mòbilsProjecte Final de Grau. Grau de Multimèdia. Àrea de desenvolupament d'aplicacions
Marta Pascual Viladegut. Juny 2014
● Moltes gràcies