LABORATORIO 9. DISEÑO DE INTERFACES GUÍA DE LABORATORIO Nº 9 Actividad de Proyecto: DETERMINAR LA ESTRUCTURA LÓGICA DEL SISTEMA Estructura de contenidos. 1. Introducción. 2 2. Objetivos. 3. Consideraciones. 4. Procedimiento. 5. Evidencias a entregar. 2 3 4 10
GUÍA DE LABORATORIO 9 Diseño de Interfaces ACTIVIDAD DE PROYECTO Determinar la estructura lógica del sistema INTRODUCCIÓN 1. INTRODUCCIÓN Una parte fundamental en todo software es la interfaz de usuario, quien es la encargada de interactuar el software con el usuario. Se requiere entonces Diseñar interfaces de acuerdo a los requerimientos del Sistema pero siempre teniendo en cuenta a los usuarios. Como dice el dicho, todo entra por los ojos. Por lo anterior es importante que las interfaces sean funcionales, pero teniendo en cuenta los detalles de diseño y los atributos de usabilidad. En el presente laboratorio usted podrá iniciar ese proceso de diseño de interfaces utilizando algunas herramientas disponibles en la web. 2. OBJETIVOS Diseñar interfaces de usuario utilizando las herramientas balsamiq mockups y gomockingbird. 2
3. CONSIDERACIONES Para el desarrollo del laboratorio es importante que tenga en cuenta los siguientes aspectos relacionados en la tabla: Ítem Soporte Teórico Descripción Revisar los Objetos de Contenido sobre Diseño de Interfaces de Usuario Tutorial Diseño de Interfaces mediante Balsamiq Mockups. Tutorial Diseño de Interfaces mediante gomockingbird. Productos requeridos Ejercicios ejemplo que se muestran en los objetos de contenido y en los tutoriales. Productos requeridos Para el desarrollo del Laboratorio se requiere tener instalada la herramienta Balsamiq Mockups, su proceso de descarga e instalación se suministra en el tutorial correspondiente. Para el desarrollo del ejercicio utilizando gomockingbird se requiere tener conexión a internet ya que es una herramienta de uso en línea. 3
4. PROCEDIMIENTO Para el Desarrollo de cada uno de los ejercicios tenga en cuenta el siguiente procedimiento: Leer detenidamente el enunciado de la actividad, donde le quede claro qué es lo que se esta solicitando. Identifique los datos de entrada y salida que son necesarios en el diseño de la interfaz, investigue con otras fuentes de ser necesario. Identifique que elemento grafico sirve para la captura de cada uno de los datos. Hacer el prototipo en una hoja de papel. Hacer el diseño en la herramienta balsamiq mockups o gomockingbird. En el diseño utilice los objetos de acuerdo al prototipo realizado en el papel. Escanear los prototipos de las hojas de papel para después ser enviado al tutor. Exporte los archivos a formato PNG. Guarde el archivo en una carpeta para después ser enviados al Tutor. 4
EL SIGUIENTE DIAGRAMA REPRESENTA EL PROCEDIMIENTO GENERAL DEL LABORATORIO Inicio Leer el enunciado y entender Que se requiere? Identificar los datos que se requieren para la interfaz Identificar objetos que permiten capturar cada uno de los datos Hacer prototipo en hoja de papel Hacer el diseño en las herramientas Software Balsamiq Mockups o Mockingbird Agregue objetos de la herramienta para el diseño de la interfaz teniendo en cuenta el prototipo Esta completa la interfaz? NO SI Escanear el prototipo de la hoja de papel Guarde el archivo generado por cada una de las herramientas Exporte el archivo a formato PNG FIN 5
EJERCICIOS: 1. Diseñar la interfaz de usuario para la captura de los datos de un libro que debe ser registrado en la Biblioteca. 2. Diseñar la Interfaz de usuario para la captura de los datos del registro de una persona en un hotel. 3. Diseñar la interfaz de usuario para la captura de datos cuando una persona compra un tiquete para un vuelo nacional. 4. Diseñar una interfaz de usuario para un sistema de votación que incluye tres (3) candidatos, uno de ellos corresponde al voto en blanco. Nota: Se deben crear 2 ejercicios utilizando la herramienta Balsamiq mockups y los otros 2 ejercicios utilizando la herramienta Gomockingbird 6
5. EVIDENCIAS Para cada una de las actividades del laboratorio se requiere que usted haga primero la interfaz en una hoja de papel. Cada una de ellas se debe escanear. Al finalizar comprimir los archivos en uno solo, y enviar el archivo comprimido. Cada uno de los archivos fuente generados por las herramientas de diseño, deben ser almacenados y adicionalmente exportar cada uno de ellos a formato PNG. Enviar todos estos archivos en uno solo en formato comprimido. 7
GLOSARIO Interfaz de usuario: Es el medio como el usuario puede comunicarse con una máquina, un equipo o una computadora, y comprende todos los puntos de contacto entre el usuario y el equipo. Usabilidad: Se refiere a la facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. La usabilidad también puede referirse al estudio de los principios que hay tras la eficacia percibida de un objeto.
LABORATORIO 9 DISEÑO DE INTERFACES Desarrollador de contenido Experto temático César Marino Cuéllar Chacón Asesor Pedagógico Rafael Neftalí Lizcano Reyes Claudia Milena Hernández Naranjo Productor Multimedia Luis Gabriel Urueta Alvarez Líder expertos temáticos Ana Yaqueline Chavarro Parra Líder línea de producción Santiago Lozada Garcés Atribución, no comercial, compartir igual Este material puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial y las obras derivadas tienen que estar bajo los mismos términos de licencia que el trabajo original.