Arquitectura de la informaciòn de un sitio web
-
Upload
brenda-ivonne -
Category
Design
-
view
268 -
download
1
Transcript of Arquitectura de la informaciòn de un sitio web
![Page 1: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/1.jpg)
DISEÑO DE INTERFACES MULTIMEDIA II
UNIDAD 01SEMANA 01
![Page 2: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/2.jpg)
Logro de la Unidad
Al finalizar la unidad, el alumno elabora Interfaces Graficas de Usuario (GUI), utilizando el IDE de Eclipse y siguiendo las etapas de desarrollo de un programa en Java.
![Page 3: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/3.jpg)
Definición de la página web
Un documento capaz de contener texto, sonido, vídeo, programas, enlaces, imagenes, y muchas otras cosas, adaptada para la World Wide Web, y que puede ser accedida mediante un navegador.
Esta información se encuentra generalmente en formato HTML y puede proporcionar navegación (acceso) a otras paginas web mediante enlaces de hipertexto.
Las paginas web incluyen otros recursos como hojas de estilo en cascada CSS, guiones (scripts), imagenes digitales, entre otros.
http://es.wikipedia.org/wiki
![Page 4: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/4.jpg)
Estructura del diseño web
La gran mayoría de las paginas web tienen divisiones o secciones similares.
Lo usual es que, en la parte superior de la pagina se encuentre un encabezado, seguido de un cuerpo principal y al final de la pagina por un pie de página.
PieCuerpoEncabezado
![Page 5: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/5.jpg)
ENCABEZADO
CUERPO
PIE
ENCABEZADO
CUERPO
PIE
![Page 6: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/6.jpg)
ENCABEZADO
CUERPO
PIE
ENCABEZADO
CUERPO
PIE
![Page 7: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/7.jpg)
Elementos del Encabezado
LOGO BARRA DE NAVEGACIÓN
BANNER
CUADRO DE BÚSQUEDA
![Page 8: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/8.jpg)
Elementos del Encabezado
LOGO
BARRA DE NAVEGACIÓN
BANNER
Redes Sociales
![Page 9: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/9.jpg)
Elementos del Cuerpo
ENLACES
LISTAS
SUBTITULOS
PÁRRAFOS
IMÁGENES
![Page 10: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/10.jpg)
Elementos del Cuerpo SUBTITULOS
SUBTITULOS
PARRAFOS
SUBTITULOS
PARRAFOS
IMÁGENES
IMÁGENES
IMÁGENES
PARRAFOS
![Page 11: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/11.jpg)
Elementos del PieEl pie de página acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los menús de navegación (para que el usuario no deba subir por la página), situar los enlaces al aviso legal, copyright, redes sociales: facebook, RSS, twitter o los datos de dirección y contacto.
![Page 12: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/12.jpg)
Elementos del Pie
![Page 13: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/13.jpg)
CREACIÓN DE WIREFRAMESFundamentos de un proyecto web
![Page 14: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/14.jpg)
¿Qué es un wireframe? Es una guía visual que
representa el esqueleto o estructura visual de un sitio web.
El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.
Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser producidos con medios de diseño de aplicaciones de software libre o comerciales.
http://es.wikipedia.org/wiki
![Page 15: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/15.jpg)
![Page 16: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/16.jpg)
![Page 17: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/17.jpg)
![Page 18: Arquitectura de la informaciòn de un sitio web](https://reader036.fdocuments.es/reader036/viewer/2022070514/588081491a28ab35718b4ba7/html5/thumbnails/18.jpg)