18
DISEÑO DE INTERFACES MULTIMEDIA II UNIDAD 01 SEMANA 01

Arquitectura de la informaciòn de un sitio web

Embed Size (px)

Citation preview

Page 1: Arquitectura de la informaciòn de un sitio web

DISEÑO DE INTERFACES MULTIMEDIA II

UNIDAD 01SEMANA 01

Page 2: Arquitectura de la informaciòn de un sitio web

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

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

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

ENCABEZADO

CUERPO

PIE

ENCABEZADO

CUERPO

PIE

Page 6: Arquitectura de la informaciòn de un sitio web

ENCABEZADO

CUERPO

PIE

ENCABEZADO

CUERPO

PIE

Page 7: Arquitectura de la informaciòn de un sitio web

Elementos del Encabezado

LOGO BARRA DE NAVEGACIÓN

BANNER

CUADRO DE BÚSQUEDA

Page 8: Arquitectura de la informaciòn de un sitio web

Elementos del Encabezado

LOGO

BARRA DE NAVEGACIÓN

BANNER

Redes Sociales

Page 9: Arquitectura de la informaciòn de un sitio web

Elementos del Cuerpo

ENLACES

LISTAS

SUBTITULOS

PÁRRAFOS

IMÁGENES

Page 10: Arquitectura de la informaciòn de un sitio web

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

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

Elementos del Pie

Page 13: Arquitectura de la informaciòn de un sitio web

CREACIÓN DE WIREFRAMESFundamentos de un proyecto web

Page 14: Arquitectura de la informaciòn de un sitio 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

Page 15: Arquitectura de la informaciòn de un sitio web
Page 16: Arquitectura de la informaciòn de un sitio web
Page 17: Arquitectura de la informaciòn de un sitio web
Page 18: Arquitectura de la informaciòn de un sitio web