Successfully reported this slideshow.

Clase04

0

Share

Upcoming SlideShare
Crear una cuenta_en_hotmail
Crear una cuenta_en_hotmail
Loading in …3
×
1 of 28
1 of 28

Clase04

0

Share

Download to read offline

Construcción de formularios y diálogos. Explicación del concepto de diálogo en interfaces de usuario. Diálogos modales y sin modo. Controles o inputs: cuadros de texto, área de texto, password, checkboxes, botones de radio, botones de acción, listas desplegables. Problemas con controles, uso correcto e incorrecto. Ejercicio de diseño de formularios.

Construcción de formularios y diálogos. Explicación del concepto de diálogo en interfaces de usuario. Diálogos modales y sin modo. Controles o inputs: cuadros de texto, área de texto, password, checkboxes, botones de radio, botones de acción, listas desplegables. Problemas con controles, uso correcto e incorrecto. Ejercicio de diseño de formularios.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Clase04

  1. 1. Formularios o diálogos Leonel Morales Díaz Ingeniería Simple [email_address] Disponible en: http://www.ingenieriasimple.com/introprogra Copyright 2008 by Leonel Morales Díaz – Ingeniería Simple. Derechos reservados
  2. 2. Diálogos <ul><li>Interactuamos con la computadora </li></ul><ul><li>Dialogamos con la computadora </li></ul><ul><li>Preguntas y respuestas </li></ul>
  3. 3. A veces no tan diálogo...
  4. 4. Diálogos modales <ul><li>Cambian el “modo” de interacción </li></ul><ul><ul><li>Obligan a atenderlos </li></ul></ul><ul><ul><li>No se puede trabajar en otra cosa </li></ul></ul><ul><li>Diálogos no modales </li></ul><ul><ul><li>También “sin modo” </li></ul></ul><ul><ul><li>Permiten trabajar en otra cosa </li></ul></ul><ul><ul><ul><li>O ignorarlos </li></ul></ul></ul>
  5. 5. Diálogos sin modo
  6. 6. Cuadros de texto <ul><li>Entrada libre de texto </li></ul><ul><li>Cantidad pequeña </li></ul><ul><ul><li>Una sola línea </li></ul></ul>
  7. 7. Formas incorrectas
  8. 8. Area de texto <ul><li>Entrada libre de texto </li></ul><ul><li>De mayor tamaño </li></ul><ul><ul><li>Varias líneas </li></ul></ul>
  9. 9. Password <ul><li>Para ingreso de palabra clave </li></ul><ul><li>Datos que no deben ser vistos </li></ul><ul><ul><li>Números de tarjeta de crédito </li></ul></ul><ul><ul><li>PIN </li></ul></ul>
  10. 10. En todo caso <ul><li>Cuidar el tamaño adecuado </li></ul><ul><li>Cuidar la posición y orden </li></ul><ul><li>Usar etiquetas significativas </li></ul><ul><li>Mantener estándar de etiquetas </li></ul><ul><ul><li>Alineación </li></ul></ul><ul><ul><li>Mayúsculas </li></ul></ul><ul><ul><li>Dos puntos </li></ul></ul>
  11. 12. Checkboxes <ul><li>Cuadros de chequeo </li></ul><ul><li>Indican sí o no, encendido o apagado </li></ul><ul><ul><li>De acuerdo o no, etc. </li></ul></ul><ul><li>Importante: valor por omisión </li></ul>
  12. 13. Checkboxes
  13. 14. Botones de radio <ul><li>Seleccionar entre opciones </li></ul><ul><li>Pocas: 5 o 6 máximo </li></ul><ul><ul><li>Pero más de 2 </li></ul></ul><ul><li>Agrupados </li></ul><ul><li>Valor por omisión </li></ul>
  14. 15. Botones de radio
  15. 16. Botones de radio <ul><li>Uso incorrecto </li></ul>
  16. 17. Botones de acción <ul><li>Permiten realizar una acción </li></ul><ul><ul><li>Aceptar, Cancelar, Imprimir, Salir, etc. </li></ul></ul><ul><li>Mejor si llevan imagen </li></ul><ul><ul><li>Estandarizar </li></ul></ul>
  17. 18. Botones de acción
  18. 19. Botones de acción <ul><li>Asignar uno para “Enter” </li></ul><ul><ul><li>La acción predeterminada </li></ul></ul><ul><li>Asignar uno para “Escape” </li></ul><ul><ul><li>La acción de cancelar </li></ul></ul><ul><li>Ojo con lo que se escribe </li></ul><ul><ul><li>Y con los iconos </li></ul></ul>
  19. 20. Botones de acción
  20. 21. Botones de acción
  21. 22. Listas desplegables <ul><li>Escoger de una lista de opciones </li></ul><ul><li>Lista relativamente larga </li></ul><ul><ul><li>5 en adelante </li></ul></ul>
  22. 23. Listas desplegables <ul><li>Valor por omisión </li></ul><ul><li>Ancho de la lista </li></ul><ul><li>Orden dentro de la lista </li></ul>
  23. 24. Problemas <ul><li>Seleccionar la imagen correcta </li></ul><ul><ul><li>Para botones u otros </li></ul></ul><ul><ul><li>Estandarizar </li></ul></ul><ul><ul><li>De tamaño adecuado </li></ul></ul>
  24. 25. Problemas <ul><li>Ingreso de fechas </li></ul><ul><ul><li>Ver sitios web </li></ul></ul><ul><ul><ul><li>Prensa Libre, elPeriódico </li></ul></ul></ul><ul><ul><ul><li>Formularios de registro </li></ul></ul></ul><ul><ul><ul><ul><li>Yahoo, Hotmail, etc. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Fecha de nacimiento </li></ul></ul></ul></ul><ul><li>¿Un solo cuadro? ¿Tres cuadros? </li></ul><ul><li>Ingreso de horas </li></ul>
  25. 26. Problemas <ul><li>Seleccionar el control adecuado </li></ul><ul><ul><li>El menor número de movimientos </li></ul></ul><ul><ul><ul><li>Pocas acciones “finas” </li></ul></ul></ul><ul><ul><li>Sustituír dos o más controles por un botón </li></ul></ul><ul><ul><ul><li>O por un hipervínculo </li></ul></ul></ul><ul><li>Ordenarlos adecuadamente </li></ul><ul><li>Mantener la tabulación correcta </li></ul>
  26. 27. Problemas <ul><li>Listas demasiado largas </li></ul><ul><ul><li>País de origen </li></ul></ul><ul><ul><li>Producto </li></ul></ul><ul><ul><li>Hipervínculos a grupos alfabéticos </li></ul></ul>
  27. 28. Problema <ul><li>Tome los dígitos de su carné </li></ul><ul><li>Súmelos hasta que le quede un número de un dígito </li></ul><ul><li>Si el dígito es 1, 2, o 3 </li></ul><ul><ul><li>Diseñe un formulario para ingreso de datos generales de colegios </li></ul></ul><ul><li>Si el dígito es 4, 5, o 6 </li></ul><ul><ul><li>Diseñe un formulario para ingreso de datos generales de automóviles </li></ul></ul><ul><li>Si el dígito es 7, 8, o 9 </li></ul><ul><ul><li>Diseñe un formulario para ingreso de datos generales de municipios de Guatemala </li></ul></ul>

×