Las nuevas tecnolog\u00edas y los dispositivos m\u00f3viles como los tel\u00e9fonos inteligentes o las tabletas nos permiten estar permanentemente conectados y disponer de acceso a multitud de servicios e informaci\u00f3n disponible en Internet. Sin embargo, la cantidad de informaci\u00f3n es tan grande y las fuentes de las que procede tan numerosas, que, o bien empleamos demasiado tiempo en separar y seleccionar aquello que nos interesa de lo que no, o bien, sencillamente, lo obviamos o lo pasamos por alto. El aplicativo que desarroll\u00e9 nace con el objetivo de paliar esta situaci\u00f3n, proporcionando al usuario unos mecanismos para la selecci\u00f3n y lectura de aquella informaci\u00f3n que m\u00e1s le interesa seg\u00fan sus propias inquietudes y necesidades. Adem\u00e1s, y como caracter\u00edstica fundamental, la aplicaci\u00f3n permitir\u00eda agrupar y ordenar las diferentes fuentes o canales de informaci\u00f3n en funci\u00f3n del d\u00eda y la hora en que el usuario prefiera consultarlas.<\/p>\n
El proceso de desarrollo del aplicativo empieza en la fase de conceptualizaci\u00f3n, identificaci\u00f3n de los potenciales usuarios y definici\u00f3n de las principales funciones, pasando por la construcci\u00f3n del \u00e1rbol de navegaci\u00f3n y la realizaci\u00f3n de los primeros dibujos o esbozos de las principales pantallas, y termina con la elaboraci\u00f3n de un prototipo en alta definici\u00f3n, interactivo, navegable y con un alto grado de detalle, paso previo a su programaci\u00f3n. El \u00e9xito o fracaso de una aplicaci\u00f3n para dispositivos m\u00f3viles depende en gran medida de identificar el \u2018target\u2019 de poblaci\u00f3n al que ir\u00e1 destinada, el tipo de usuario que la utilizar\u00e1 \u2013 edad, sexo, estatus social, profesi\u00f3n, etc. – , as\u00ed como sus h\u00e1bitos y costumbres con este tipo de dispositivos. Para conocer estos datos y tener una visi\u00f3n global del uso de los dispositivos m\u00f3viles en la poblaci\u00f3n espa\u00f1ola, estudi\u00e9 y analic\u00e9 diferentes informes estad\u00edsticos que pude encontrar en Internet.<\/p>\n En un contexto m\u00e1s cercano, decid\u00ed realizar una entrevista a las personas m\u00e1s pr\u00f3ximas de mi entorno personal y profesional. Con sus respuestas, pude captar y comprender sus necesidades e identificar sus frustraciones en relaci\u00f3n con otros productos o servicios similares.<\/p>\n Con estos datos podemos crear un aplicativo m\u00e1s personalizado y que satisfaga las necesidades y requisitos del usuario.<\/p>\n Principales funciones del aplicativo Estructura y primeros esbozos Tras definir el esqueleto de la aplicaci\u00f3n, llega la fase en la que tienes que dar forma a tus ideas, plasmarlas sobre el papel y donde puedes dar rienda suelta a tu imaginaci\u00f3n. Es en esta etapa donde realic\u00e9 los primeros dibujos de la interface y de las principales pantallas. Dibujos realizados a papel y l\u00e1piz, a grandes trazos, sin entrar en el detalle. Lo importante es captar la estructura principal de la interface, la esencia, y mantener la coherencia, la misma organizaci\u00f3n y distribuci\u00f3n de los elementos en todas las pantallas.<\/p>\n En mi caso quise dise\u00f1ar una interface minimalista, sencilla, funcional, dividiendo la pantalla del dispositivo en dos bloques principales, un bloque superior o cabecera donde se encuentra un men\u00fa fijo con las opciones principales de la aplicaci\u00f3n y su logotipo, y un bloque central o cuerpo en el que se representan los contenidos din\u00e1micos.<\/p>\n La pantalla inicial, el coraz\u00f3n de la aplicaci\u00f3n, muestra las fuentes que el usuario ha programado para ese d\u00eda, ordenadas en funci\u00f3n de la hora actual. Las noticias, representadas en forma de tarjeta, forman un carrusel por el que el usuario puede desplazarse con un simple gesto swipe. De esta forma, quise potenciar una lectura r\u00e1pida y c\u00f3moda de la informaci\u00f3n con el objetivo de facilitar al usuario la lectura de aquellas noticias que m\u00e1s le interesen.<\/p>\n Dise\u00f1o de la aplicaci\u00f3n Uno de los aspectos al que dediqu\u00e9 m\u00e1s tiempo fue en la elecci\u00f3n de los colores que deb\u00eda tener la aplicaci\u00f3n. Buscaba una combinaci\u00f3n crom\u00e1tica que proporcionara, en una visi\u00f3n de conjunto, un aspecto elegante, profesional y formal.<\/p>\n Finalmente y tras muchas pruebas y combinaciones me decid\u00ed por un degrado en azul levemente saturado para la barra de men\u00fa, de manera que el elemento resultara bien definido, perfectamente delimitado, y que a su vez otorgara seriedad y elegancia.<\/p>\n Como background<\/em> principal y lienzo sobre el que representar las noticias, opt\u00e9 por un gris muy claro, con la intenci\u00f3n de emular el color del papel peri\u00f3dico. La noticia, elemento principal en el aplicativo, representada en forma de tarjeta, de fondo y contorno blancos, muestra una imagen representativa y un titular en letras negras. Un leve sombreado la hace resaltar sobre el fondo de color gris claro.<\/p>\n En esta fase pude poner en pr\u00e1ctica muchos de los conceptos aprendidos en la documentaci\u00f3n de la asignatura: el uso de met\u00e1foras para la representaci\u00f3n de objetos y acciones que se pueden realizar en la interface, diferentes formas de representar la informaci\u00f3n \u2013 carrusel o tira de noticias, miniaturas -, respuesta inmediata o feedback visual de los controles del aplicativo para que el usuario sea plenamente consciente de que han sido pulsados o activados, etc.<\/p>\n Una vez terminado, el prototipo en alta definici\u00f3n nos permitir\u00e1 ver c\u00f3mo ser\u00e1 nuestra aplicaci\u00f3n. Podremos revisar su funcionamiento para asegurarnos que es el deseado, y comprobar que no existen errores de dise\u00f1o o conceptuales.<\/p>\n![\"Gras-2\"](\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Gras-2.png\")
<\/a><\/p>\nEtapas<\/h1>\n
\nIdentificaci\u00f3n de los usuarios de la aplicaci\u00f3n<\/p>\n
\n<\/strong>El usuario puede construir un grid o parrilla con las fuentes o servicios de informaci\u00f3n que elija de entre una lista de categor\u00edas predefinidas \u2013 prensa nacional, internacional, econom\u00eda, deportes, etc.- y definir una programaci\u00f3n horaria para cada una de ellas, estableciendo de esta forma un criterio \u2013 la hora y el d\u00eda \u2013 para la ordenaci\u00f3n de la informaci\u00f3n.<\/p>\n
\n<\/strong>Una vez identificado el destinatario de la aplicaci\u00f3n y definidas las principales funciones, el siguiente paso fue construir el \u00e1rbol de navegaci\u00f3n. Esta fase me permiti\u00f3 saber cu\u00e1ntas pantallas ser\u00edan necesarias para la aplicaci\u00f3n. Adem\u00e1s, pude comprobar sobre el papel que el recorrido que har\u00eda el usuario, saltando de pantalla en pantalla, no tuviera un punto muerto o un callej\u00f3n sin salida. Desde cualquier pantalla, el usuario deber\u00eda poder volver a la anterior, avanzar a la siguiente o saltar directamente a la pantalla principal.<\/p>\n<\/a><\/p>\n
\n<\/strong>Y llegamos a la \u00faltima fase del proyecto, el \u00faltimo paso en el desarrollo de la aplicaci\u00f3n previo a su programaci\u00f3n. En esta tapa podemos construir el aplicativo al m\u00e1s m\u00ednimo detalle, a\u00f1adiendo botones, cuadros de lista, animaciones, etc., y dotarlo de la funcionalidad necesaria para que sea interactivo. Aplicaremos estilos a la interface, colores, tama\u00f1os, tipograf\u00edas, para darle una imagen pr\u00e1cticamente id\u00e9ntica a la que finalmente tendr\u00e1 en un smartphone o en una tableta. Para ello podemos elegir entre diferentes programas de prototipado en alta definici\u00f3n como Justinmind Prototype<\/em> o Axure<\/em>.<\/p>\n<\/a><\/p>\n<\/a><\/p>\n