DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los...
-
Upload
antonio-villalobos-valdez -
Category
Documents
-
view
229 -
download
1
Transcript of DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los...
![Page 1: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/1.jpg)
DISEÑO DE LA INTERFAZ
![Page 2: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/2.jpg)
¿Que es?◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e
interactuar con .
◦ Para lograr que un usuario se quede y vuelva, el diseño de la interfaz es importante
![Page 3: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/3.jpg)
¿Qué es la interfaz?◦ El concepto de interfaz es muy amplio y se refiere a todo sistema que permite el
contacto y la funcionalidad entre dos sistemas diferentes.
◦ la interfaz web, que es un sistema gráfico que permite a los usuarios acceder a los contenidos, realizar tareas, comprender las funcionalidades y navegar por las diferentes páginas del sitio.
![Page 4: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/4.jpg)
Simplicidad y coherencia ◦ La facilidad y comodidad con que los usuarios acceden a los servicios que brinda
una web está fundado en dos principios fundamentales para el desarrollo de una interfaz efectiva: la simplicidad y la coherencia.
◦ La simplicidad con que se desarrolle esta interfaz es crucial para determinar que un usuario se sienta satisfecho y desee regresar a un sitio.
◦ La coherencia con que se desarrolle debe comprender el proceso lógico y dar congruencia a la información, imágenes, gráficos etc.
![Page 5: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/5.jpg)
Calidad del diseño y estabilidad funcional◦ La primera impresión que un usuario recibe de un sitio web es extremadamente
importante, por lo que el diseño debe ser cuidado en extremo, de forma tal que logremos convencerlo de que se trata de un sitio ordenado, cuidado y profesional.
◦ Lo mismo sucede con el funcionamiento del sitio. Nada más desagradable que encontrarse con un sitio donde abundan los mensajes de error, tiene enlaces rotos, formularios que no funcionan, etc. La funcionalidad del sitio debe permanecer siempre en o cercana al cien por ciento.
![Page 6: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/6.jpg)
Diseño arquitectónico◦ La arquitectura del contenido se
centra en la manera en la que objetos de contenido se estructuran para la presentación y navegación.
![Page 7: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/7.jpg)
El diseño arquitectónico se lleva a cabo en paralelo con el de la interfaz, el estético y el del contenido.
Se centras en las actividades como:◦Interacción con el usuario◦Manejo de tareas de procesamiento interno◦Navegacion eficiente ◦Presentación del contenido.
![Page 8: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/8.jpg)
ES
TR
UC
TU
RA
S◦Lineales◦Maya◦Jerarquía◦Red o telaraña pura
![Page 9: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/9.jpg)
LINEALES
Se encuentran cuando es común en una secuencia predecible de interacciones (con cierta variación o diferencia)
![Page 10: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/10.jpg)
EJEMPLOS:
![Page 11: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/11.jpg)
MAYA
Se aplica cuando es posible organizar el contenido de una webapp en forma categórica en dos o más dimensiones
![Page 12: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/12.jpg)
JERARQUÍA
Se diseña en forma tal que permite que el flujo del control sea en el sentido horizontal a través de las ramas verticales de la estructura.
![Page 13: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/13.jpg)
EJEMPLO:
![Page 14: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/14.jpg)
RED La pagina web se diseña de modo que la información pasa virtualmente el control (por medio de vínculos de hipertexto) a cada componente del sistema. Este enfoque permite una flexibilidad considerable de navegación
![Page 15: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/15.jpg)
EJEMPLO:
![Page 16: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/16.jpg)
ARQUITECTURA DE UNA WEBAPP
Describe una infraestructura que permite que un sistema o aplicación basados en web alcance sus objetivos empresariales.
Se sugiere una arquitectura del diseño en tres capas que desacopla la interfaz de la navegación y del comportamiento de la aplicación.
Para asi mantener separadas la interfaz, la aplicación y la navegación; por ende se simplifica la implementación y mejora la reutilización.
![Page 17: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/17.jpg)
![Page 18: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/18.jpg)
Diseño de la estética ◦ Es lo referido a la organización y forma de visualización de una interfaz web
![Page 19: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/19.jpg)
Tipos de estéticas ◦ Estática: aquella que solo pose lo mas básico en información e imágenes sin la
interacción de otros elementos
◦Dinámica: aquella que deja interactuar con los elementos dentro de la pagina web mediante enlaces.
![Page 20: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/20.jpg)
Parámetros estéticos Para que la interfaz del sitio sea agradable tiene que tener ciertos parámetros los
cuales son:
◦ Armonia
◦ Equilibrio
◦ Simetria
◦ Secuencia
◦ Cohesión
◦Unidad
◦ Proporcion
◦ Simplicidad
◦Densidad
◦ Regularidad
◦ Economia
◦Homogenidad
◦ Ritmo
◦Orden y complejidad
![Page 21: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/21.jpg)
Diseño del contenido◦ Es la estructuración de la pagina en cuestión a la información (contenido que
llevara y abarcara) dentro de ella y sus enlaces.
![Page 22: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/22.jpg)
3 generaciones en el desarrollo de las interfaces de la WWW◦ Webs de primera generación:
◦ estructura lineal◦ eventual inserción de fotografías y líneas de separación◦ baja definición
◦ Webs de segunda generación:◦ iconos en vez de palabras subrayadas con azul◦ menú de opciones◦ fondos coloreados o con imágenes◦ bordes azules alrededor de las figuras interactivas
◦ Webs de tercera generación:◦ hegemonía del diseño sobre la tecnología◦ utilización de metáforas◦ uso de un layout tipográfico y visual para la descripción de una página bidimensional◦ estructura entrada -área central- salida
![Page 23: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/23.jpg)
Etapas para el diseño◦Delimitación del tema
◦ Recolección de la información
◦ Agregación
◦ Estructuración de los contenidos
◦ Creación de los sistemas de navegación y búsqueda
◦Diseño y estilo grafico
◦ Ensamblaje final
◦ Evaluación
![Page 24: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/24.jpg)
Diseño de Navegación◦ Forma especializada de diseño de interfaces dirigida a presentar espacios de
información.
![Page 25: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/25.jpg)
Puntos importantes.◦ La página de inicio.
Puerta principal de acceso a la página web.
![Page 26: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/26.jpg)
◦Menú de navegación.
Herramienta de navegación que le podemos facilitar al visitante para que encuentre lo que busca. Los menús de navegación son básicamente listas de enlaces a las diferentes páginas o secciones de la web.
![Page 27: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/27.jpg)
◦ Pie de página.
Poner enlaces importantes o que consideras que deben aparecer en todas las páginas de la web, por ejemplo información legal sobre tu empresa, direcciones de contacto, políticas de uso del sitio, etc.
![Page 28: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/28.jpg)
◦ Ruta de acceso o ¿Dónde estoy?.
El camino que se sigue desde la página principal, pasando por las secciones (principales) hasta la página concreta en la que se encuentra el usuario.
![Page 29: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/29.jpg)
◦ Incluir un buscador.
Los buscadores mejoran la experiencia del usuario en el sitio web y le ayudan a ahorrar tiempo en su búsqueda de información.
![Page 30: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/30.jpg)
Consejos para la navegación del sitio.◦ Enlaces volver: Incluya poco enlaces “volver”. Describa al usuario hacia donde va a
“volver” por ejemplo “volver a inicio”.
◦Menú siempre visible: El usuario pueda acceder a el desde cualquier parte del sitio en el que se encuentre.
◦Describir situación actual en el sitio: Describa al usuario en que sección de nuestro sitio se encuentra (www.midominio.com/contacto).
◦ Rapidez: Evite crear sitios muy pesados, que impidan la rapidez de descarga.
![Page 31: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/31.jpg)
Ejemplos:◦Dreamweaver
◦ Es una aplicación en programa de estudio que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones Web basados en estándares
◦ Es uno de los mas utilizados por que es muy practico y se apoya de World Wide Web Consortium
![Page 32: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/32.jpg)
kompozer◦ es un programa para editar códigos HTML, sin necesidad de tener mucho
conocimiento de este.
◦ La interfaz de Kompozer es gráfica, de forma que las modificaciones se realizan como si se tratara de un diseño, evitando el escribir código.
◦No ocupa mucha memoria
![Page 33: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/33.jpg)
NVU◦ La funcionalidad de NVU permite insertar imágenes, crear tablas o
modificar estilos CSS de manera sencilla.
◦ Es muy rápido como editor por su sencillez
![Page 34: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/34.jpg)
WebFácil◦ Para diseñar una página web basta con combinar las funciones del programa, como
elegir colores de fondo, letras, imágenes.
◦ Esta completamente en español
![Page 35: DISEÑO DE LA INTERFAZ. ¿Que es? ◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar con. ◦ Para lograr que.](https://reader035.fdocumento.com/reader035/viewer/2022062323/56a1889a1a28abe545952651/html5/thumbnails/35.jpg)
Adobe edge◦ El programa para crear animaciones web con HTML5
◦Utiliza una interfaz visual basada en una línea de tiempo, de forma que no hay que saber mucho de programación.