Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 120 vistas

    Balsam Iq

    Cargado por

    Anonymous GDEo1L
    El documento describe los pasos para crear un diseño de interfaz utilizando la herramienta Balsamiq Mockups. Explica cómo descargar e instalar la herramienta, y luego cómo agregar elementos como ventanas, títulos, rectángulos, texto e inputs para crear la interfaz de un sistema odontológico. Finalmente, muestra cómo guardar y exportar el diseño terminado.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Balsam Iq

    Cargado por

    Anonymous GDEo1L
    120 vistas13 páginas
    El documento describe los pasos para crear un diseño de interfaz utilizando la herramienta Balsamiq Mockups. Explica cómo descargar e instalar la herramienta, y luego cómo agregar elementos como ventanas, títulos, rectángulos, texto e inputs para crear la interfaz de un sistema odontológico. Finalmente, muestra cómo guardar y exportar el diseño terminado.

    Descripción original:

    Uso del Muckups para interfaces graficas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    El documento describe los pasos para crear un diseño de interfaz utilizando la herramienta Balsamiq Mockups. Explica cómo descargar e instalar la herramienta, y luego cómo agregar elementos como ventanas, títulos, rectángulos, texto e inputs para crear la interfaz de un sistema odontológico. Finalmente, muestra cómo guardar y exportar el diseño terminado.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    120 vistas13 páginas

    Balsam Iq

    Cargado por

    Anonymous GDEo1L
    El documento describe los pasos para crear un diseño de interfaz utilizando la herramienta Balsamiq Mockups. Explica cómo descargar e instalar la herramienta, y luego cómo agregar elementos como ventanas, títulos, rectángulos, texto e inputs para crear la interfaz de un sistema odontológico. Finalmente, muestra cómo guardar y exportar el diseño terminado.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 13

    DISEO DE INTERFACES UTILIZANDO

    HERRAMIENTA WEB BALSAMIQ MOCKUPS

    MANUAL DE LABORATORIO N 9 - Diseo de Interfaces


    Actividad de Proyecto: Determinar la estructura lgica del sistema.

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Primero ingresar al siguiente sitio de internet: http://www.balsamiq.com,


    para que descargue e instale la herramienta Desktop Mockups.
    Cuando se instala se crea un icono en el escritorio con el nombre de
    Balsamiq Moczkups. Dar clic en este icono para iniciar. Debe aparecer la
    siguiente ventana:

    Como ejercicio vamos a crear la siguiente interfaz:

    2
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Damos clic en la pestaa llamada forms como lo indica la siguiente imagen:

    Al dar clic en forms en la parte inferior aparecen muchos elementos que


    podemos utilizar para crear nuestra interfaz. Debajo de esos botones hay
    una barra de desplazamiento para mirar todos los elementos de la pestaa
    forms.

    Ahora damos clic en la Pestaa All y aparecen todos los elementos posibles
    a utilizar para el diseo de la Interfaz:

    Para iniciar vamos a buscar el elemento llamado Window / Dialog, para


    ello utilicemos la barra de desplazamiento. Este elemento es el ltimo.

    3
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Damos clic sostenido y lo soltamos en el rea de trabajo.

    Al agregarse el elemento, nos aparece la opcin habilitada para cambiar


    el texto, como ejercicio vamos a colocar Sistema Centro Odontolgico
    como se encuentra en la interfaz a realizar. Al hacer los cambios ya la
    interfaz se encuentra as:

    4
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Ahora vamos agregar un texto para agregar el Titulo CENTRO


    ODONTOLOGICO ADSI. Para ello buscamos el elemento llamado A Subtitle
    as:

    Damos clic sostenido y lo agregamos dentro del objeto anterior.

    5
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Al agregar el elemento A subtitle modificamos el texto y colocamos


    CENTRO ODONTOLOGICO ADSI.
    Al cambiar y aceptar el texto nos muestra otras opciones de configuracin
    del subtitulo as:

    Por ahora no vamos a modificar nada.


    Al agregar el texto la interfaz va quedando as:

    6
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Ahora vamos agregar el elemento llamado Rectangle / Canvas dentro del


    elemento ventana de la interfaz, debajo del ttulo Centro Odontolgico
    ADSI.

    Al agregar le modificamos el tamao, dando clic sostenido en las esquinas,


    para que la interfaz quede as:

    7
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Ahora vamos agregar el texto INGRESO AL SISTEMA, para ello agregamos


    el elemento llamado some text dentro del rectngulo agregado
    anteriormente.

    Al agregar el elemento y actualizar el texto, nos salen las propiedades,


    cambiemos el tamao del texto a 20.

    Despus de los cambios la interfaz va quedando as:

    8
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Ahora vamos agregar los textos login y password utilizando el emento


    some text, cambiando el tamao a 16 y la interfaz debe quedar as:

    Para continuar con el diseo vamos agregar un elemento llamado Text/


    Input al frente de login y password.

    9
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Al agregar los text-input podemos ajustarles el tamao al deseado.


    Despus de agregar estos elementos la interfaz va quedando as:

    Para continuar ahora vamos agregar un botn y le colocamos el texto


    INGRESAR. Para ello busque el elemento llamado button y agrguelo al
    rea de trabajo y cambie el texto.

    Al agregar el botn la interfaz ha quedado as:

    10
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Si deseamos cambiar las propiedades de la ventana completa de la interfaz,


    damos clic en el objeto y aparecen las opciones de propiedades as:

    Como ejercicio vamos a dar clic en los 3 elementos que me seala la


    flecha roja para que mi interfaz tambin quede con esos elementos de la
    ventana window de la interfaz que estamos creando.

    11
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    Despus la interfaz queda as:

    Para terminar puede guardarlo en el formato propio de la herramienta y


    exportarlo a diferentes formatos como lo muestra las opciones del men
    file de la herramienta.

    12
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    Diseo de interfaces utilizando


    herramienta web balsamiq mockups

    13
    FAVA - Formacin en Ambientes Virtuales de Aprendizaje

    SENA - Servicio Nacional de Aprendizaje

    También podría gustarte