Transformaci£³n de una aplicaci£³n m£³vil utilizando Material ... Transformaci£³n de una aplicaci£³n

  • View
    3

  • Download
    0

Embed Size (px)

Text of Transformaci£³n de una aplicaci£³n m£³vil utilizando Material ......

  • Transformación de una aplicación móvil utilizando Material Design Usabilidad e interfaces - Multimedia

    Autor: Denisse Gómez Casco

    Consultora: Judit Casacuberta Bagó

    Profesor: Ferran Gimenez Prado

    13-01-2019

  • TFG. Transformación de una aplicación móvil utilizando Material Design Denisse Gómez

    1 / 69

    Reconocimiento-NoComercial-SinObraDerivada (CC BY-NC-ND 4.0)

    Este proyecto está sujeto bajo la licencia de Reconocimiento-NoComercial-SinObraDerivada

    Usted es libre de:

    Compartir – copiar y redistribuir el material en cualquier medio o formato

    Bajo las siguientes condiciones:

    • Reconocimiento - Debe reconocer la autoría, proporcionar el enlace a la licencia e indicar si se han realizado cambios. Puede hacerlo de alguna manera razonable, pero

    en ningún caso que sugiera que tiene el apoyo del licenciador o lo recibe por el uso que

    hace.

    • NoComercial - No puede utilizar el material con finalidad comercial.

    • SinObraDerivada - Si mezcla, transforma o utiliza el material para crear otro, no puede distribuir el material modificado.

    No existen restricciones adicionales – No puede aplicar términos legales o medidas tecnológicas que legalmente restrinjan realizar aquello que la licencia permite.

    Información de la licencia en este enlace: https://creativecommons.org/licenses/by-nc- nd/4.0/

    https://creativecommons.org/licenses/by-nc-nd/4.0/ https://creativecommons.org/licenses/by-nc-nd/4.0/

  • TFG. Transformación de una aplicación móvil utilizando Material Design Denisse Gómez

    2 / 69

    Cita

    [Inglés]

    “If you can’t explain it simply, you don’t understand it well enough”

    Albert Einstein

    [Castellano]

    “Si no lo puedes explicar con simplicidad, es que no lo entiendes suficientemente

    bien”

    Albert Einstein

  • TFG. Transformación de una aplicación móvil utilizando Material Design Denisse Gómez

    3 / 69

    Abstract

    Con el paso del tiempo, las tecnologías cambian y con ellas también el diseño de las interfaces,

    no es lo mismo hablar de una aplicación de hace 10 años a una aplicación actual que esté basada

    en las guías de Material Design, las aplicaciones actuales además de tener un Look and Feel

    más atractivo, utilizan los gestos humanos para facilitar la interacción, son más intuitivas, fáciles

    de usar y se adaptan a las necesidades del usuario.

    En Barcelona existen muchas empresas que se dedican al desarrollo de software, sin embargo,

    no todas se preocupan por analizar las necesidades del cliente y del usuario final, por lo tanto,

    diseñan aplicaciones funcionales, pero no usables.

    Después de hacer prácticas durante 8 meses en una empresa de desarrollo, he podido

    comprobar que este problema sucede y he querido hacer mi trabajo final de grado lo más real

    posible, utilizando la aplicación móvil en la cual he participado, con el fin de renovar su diseño

    aplicando las guías de Material Design.

    El proyecto se divide en cuatro partes, planificación, diseño, desarrollo y mejoras.

    Durante la planificación y un par de meses antes de empezar el proyecto, me he dedicado a

    estudiar los programas y los Frameworks que quería utilizar desarrollar el proyecto, como

    Angular, Angular Material, Sass, Visual Studio Code y las guías de Material Design.

    En la fase de diseño he creado diferentes perfiles de usuario para aplicar el DCU, he hecho un

    análisis heurístico para detectar las partes a mejorar de la aplicación y con ellos he creado los

    Wireframes.

    Seguidamente, he utilizado la guía de estilo de la empresa para que la aplicación pueda ser

    identificada con la marca y he utilizado las guías de Material Design para desarrollar la parte

    Frontend de la aplicación, creando Mockups interactivos y aplicando el diseño de los Wireframes

    hechos con anterioridad.

    Finalmente, después de ejecutar los tests para verificar que todas las partes de la aplicación

    estuvieran bien implementadas y su comportamiento haya sido aplicado en los Mockups

    interactivos, he añadido algunas mejoras a la aplicación.

    Palabras clave: Material Design, Usabilidad, Inspecciones, Aduanas, Inspectores, Inspecciones

    fronterizas.

  • TFG. Transformación de una aplicación móvil utilizando Material Design Denisse Gómez

    4 / 69

    Abstract (English version)

    As time goes by, technologies change and with it also the interface design, is not the same to

    speak about a 10 years old application than speaking about a modern application base on

    Material Design, modern applications apart from having an atractive Look and Feel, they use ease

    the interaction, they are more intuitive, easy to use and they adapt to users needs.

    In Barcelona there are many companies that dedicated to software development, however, not

    all of them anlyze the needs of both clients and end users, therefore, they design functional, but

    not usable apps.

    After doing an internship during 8 months on a development company, I have been able to see

    by myself that this problem is real and I have wanted to do my final thesis as real as posible, using

    the mobile application in which I have participated, with the purpose of renewing its design

    applying Material Design.

    The Project is divided in four parts, planning, design, development and make improvements.

    During the planning and a couple of months before starting the project I have dedicated myself to

    study the software and frameworks I needed to develop the project, as Angular, Sass, Visual

    Studio Code and Material Design.

    During the design phase I have created different user profiles to aply the UCD, I did an heuristic

    analysis to find out the parts of the application that need to be improve and with them I created

    the Wireframes.

    To continue, I have used the design guidelines of the company in order to match the application

    with the company brand and used the Material Design guidelines to develop the Frontend of the

    applicaton, creating interactive mockups by applying the design of the Wireframes done

    previously.

    Finally, after executing the tests to verify all the parts of the application have been well

    implemented and its behavior has been applied on the interactive mockups, I have added some

    improvements to the application.

    Keywords: Material Design, Usability, Inspections, Customs, Inspectors, Border inspections.

  • TFG. Transformación de una aplicación móvil utilizando Material Design Denisse Gómez

    5 / 69

    Agradecimientos

    A mis padres, por haberme guiado desde la niñez hasta mi juventud a alcanzar mis objetivos,

    por hacer de mí una persona fuerte independientemente de las circunstancias.

    A mi compañero de vida, mi marido, por su gran ejemplo de dedicación y amor por la tecnología,

    la motivación que me ha brindado en los momentos más difíciles y por su apoyo incondicional.

  • TFG. Transformación de una aplicación móvil utilizando Material Design Denisse Gómez

    6 / 69

    Índice

    Transformación de una aplicación móvil utilizando Material Design ............................................ 0

    Cita ................................................................................................................................................ 2

    Abstract ......................................................................................................................................... 3

    Abstract (English version) ............................................................................................................. 4

    Agradecimientos ............................................................................................................................ 5

    Introducción ................................................................................................................................... 9

    Descripción .................................................................................................................................. 10

    Flujo de una inspección ........................................................................................................... 10

    El inspector .............................................................................................................................. 10

    La aplicación del Inspector ...................................................................................................... 10

    • Orden de inspección .................................................................................................... 11

    • Detalles del orden ........................................................................................................ 11

    • Embalaje ...................................................................................................................... 11

    • Artículos .................................................................................