Arquitectura de la informaciòn de un sitio web

DISEÑO DE INTERFACES MULTIMEDIA II

UNIDAD 01SEMANA 01

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.

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

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

ENCABEZADO

CUERPO

PIE

ENCABEZADO

CUERPO

PIE

ENCABEZADO

CUERPO

PIE

ENCABEZADO

CUERPO

PIE

Elementos del Encabezado

LOGO BARRA DE NAVEGACIÓN

BANNER

CUADRO DE BÚSQUEDA

Elementos del Encabezado

LOGO

BARRA DE NAVEGACIÓN

BANNER

Redes Sociales

Elementos del Cuerpo

ENLACES

LISTAS

SUBTITULOS

PÁRRAFOS

IMÁGENES

Elementos del Cuerpo SUBTITULOS

SUBTITULOS

PARRAFOS

SUBTITULOS

PARRAFOS

IMÁGENES

IMÁGENES

IMÁGENES

PARRAFOS

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.

Elementos del Pie

CREACIÓN DE WIREFRAMESFundamentos de un proyecto web

¿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