Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Formularios o diálogos Leonel Morales Díaz Ingeniería Simple [email_address] Disponible en: http://www.ingenieriasimple.co...
Diálogos <ul><li>Interactuamos con la computadora </li></ul><ul><li>Dialogamos con la computadora </li></ul><ul><li>Pregun...
A veces no tan diálogo...
Diálogos modales <ul><li>Cambian el “modo” de interacción </li></ul><ul><ul><li>Obligan a atenderlos </li></ul></ul><ul><u...
Diálogos sin modo
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 </...
Formas incorrectas
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></...
Password <ul><li>Para ingreso de palabra clave </li></ul><ul><li>Datos que no deben ser vistos </li></ul><ul><ul><li>Númer...
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 etiquet...
 
Checkboxes <ul><li>Cuadros de chequeo </li></ul><ul><li>Indican sí o no, encendido o apagado </li></ul><ul><ul><li>De acue...
Checkboxes
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 d...
Botones de radio
Botones de radio <ul><li>Uso incorrecto </li></ul>
Botones de acción <ul><li>Permiten realizar una acción </li></ul><ul><ul><li>Aceptar, Cancelar, Imprimir, Salir, etc. </li...
Botones de acción
Botones de acción <ul><li>Asignar uno para “Enter” </li></ul><ul><ul><li>La acción predeterminada </li></ul></ul><ul><li>A...
Botones de acción
Botones de acción
Listas desplegables <ul><li>Escoger de una lista de opciones </li></ul><ul><li>Lista relativamente larga </li></ul><ul><ul...
Listas desplegables <ul><li>Valor por omisión </li></ul><ul><li>Ancho de la lista </li></ul><ul><li>Orden dentro de la lis...
Problemas <ul><li>Seleccionar la imagen correcta </li></ul><ul><ul><li>Para botones u otros </li></ul></ul><ul><ul><li>Est...
Problemas <ul><li>Ingreso de fechas </li></ul><ul><ul><li>Ver sitios web </li></ul></ul><ul><ul><ul><li>Prensa Libre, elPe...
Problemas <ul><li>Seleccionar el control adecuado </li></ul><ul><ul><li>El menor número de movimientos </li></ul></ul><ul>...
Problemas <ul><li>Listas demasiado largas </li></ul><ul><ul><li>País de origen </li></ul></ul><ul><ul><li>Producto </li></...
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></u...
Upcoming SlideShare
Loading in …5
×

Clase04

452 views

Published on

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.

Published in: Education
  • Be the first to comment

  • Be the first to like this

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>

×