patrones de diseÑo web trad. guillermo espinosa ruiz ut huejotzingo 2010
TRANSCRIPT
![Page 1: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/1.jpg)
PATRONES DE DISEÑO WEB
Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010
![Page 2: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/2.jpg)
Contenido
Introducción Formularios Autentificación de usuarios Navegación
![Page 3: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/3.jpg)
Introducción
Diseño de soluciones probadas Proceso de diseño mejorado Interfaces consistentes y reusabilidad Lenguaje compartido y común
![Page 4: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/4.jpg)
Patrones: formularios 1/7
Aclarar beneficios Explicar los
beneficios de registrarse al sitio.
Explicar los beneficios de usar un formulario.
![Page 5: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/5.jpg)
Patrones: formularios 2/7
Formularios breves Información concisa Dividir formularios
largos en múltiples páginas
![Page 6: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/6.jpg)
Patrones: formularios 3/7
Agrupación lógica Agrupar en bloques
la información que se encuentra relacionada
![Page 7: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/7.jpg)
Patrones: formularios 4/7
Alineación de etiquetas
![Page 8: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/8.jpg)
Patrones: formularios 5/7
Indicaciones de información obligatoria Mostrar el indicador de
información obligatoria
El indicador debe ser consistente en todos los formularios
No es necesario indicar los campos opcionales
Ofrecer instrucciones para la información sensible.
![Page 9: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/9.jpg)
Patrones: formularios 6/7
Ayuda al ingreso de la información Ejemplos Instrucciones contextuales Limitar (validar) el tamaño
de los campos
![Page 10: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/10.jpg)
Patrones: formularios 7/7
Botones de acción La leyenda debe ser
clara y directa. Borrar, quitar Agregar, nuevo
![Page 11: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/11.jpg)
Patrones: autentificación de usuario 1/2
Registro Considerar correo
electrónico como username
Utilizar Captcha para asegurar registro por humanos
Enfoque registro lazy Considerar eliminar
registro
![Page 12: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/12.jpg)
Patrones: autentificación de usuario 2/2
Seguridad Echo sin
caracteres SSL Recuperación de
información Cerrar sesiones
![Page 13: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/13.jpg)
Patrones: navegación 1/4
Navegación primaria Destacar el menú de
navegación Indicar que en qué
sección nos encontramos actualmente
Eliminar la navegación en elementos auto contenidos (wizard, mini sitio)
![Page 14: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/14.jpg)
Patrones: navegación 2/4
Navegación secundaria Se debe mostrar la
navegación secundaria que corresponda con la opción primaria elegida
![Page 15: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/15.jpg)
Patrones: navegación 3/4
Caja de herramientas (utility box) Enfatizar los
elementos más usados
Incluir selección de idioma
![Page 16: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/16.jpg)
Patrones: navegación 4/4
Breadcrumbs Separa los elementos
con “>” Se deben ubicar debajo
del encabezado Cada elemento debe
estar enlazado Tienen un nivel visual
bajo
![Page 17: PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010](https://reader038.vdocuments.site/reader038/viewer/2022103102/5665b4e91a28abb57c94b623/html5/thumbnails/17.jpg)
Web Application Design PatternsPawan VoraEd. Morgan Kauffmann
Referencia