Un sitio web está compuesto por un conjunto de páginas web relacionadas entre sí, normalmente dentro de un dominio de internet. Cada página web (documento) contiene información e hipervínculos que permiten navegar entre las páginas. Un sitio web tiene diferentes capas (estructural, presentación y comportamiento) que definen su contenido, diseño y funcionalidad. El diseño conceptual y visual de un sitio determina cómo se organiza y presenta la información para mejorar la usabilidad y experiencia del usuario.

1. Conceptos básicos
Sitios Web

2. ¿Qué es un Website?
 Un sitio web es un
conjunto de páginas
web, típicamente
comunes a un dominio
de Internet o subdominio
en la World Wide Web
en Internet
Wikipedia
Index.html
Sección1
Cont1
Cont2
Cont N
Sección2 Sección3

3. Página web
Documento adaptado para la Web y que normalmente forma parte de un sitio web. Su principal
característica son los hiperenlaces a otras páginas, siendo esto el fundamento de la Web.
Está compuesta principalmente por información (sólo texto o multimedia) e hiperenlaces;
además puede contener o asociar datos de estilo (CSS) para especificar cómo debe visualizarse,
o aplicaciones embebidas para hacerla interactiva.

4. Capas / Elementos
 Capa Estructural
 Capa Presentación
 Capa
Comportamiento
 Capa de
información
 Capa de diseño
 Funcionalidades

5. Capa Estructural

6. Capa Estructural
 XHTML 1.0
 XML
 Cantidad de
etiquetas
 <Title>
 <H1, H2, ..Hn>
 Div
 Span

7. Capa Presentación

8. Capa Presentación
Hojas de estilo (CSS)
 Atributos como:
 Font
 Color
 Background
 Posicionamiento

9. Capa Comportamiento
Funcionalidades
 Javascript
 PHP/ASP
 Players flash
 Bases de datos
 Interactividad
 USABILIDAD

10. Usabilidad
 ISO
 “grado de eficacia,
eficiencia y
satisfacción con la
que usuarios
específicos pueden
lograr objetivos
específicos, en
contextos de uso
específicos "

11. 3 paneles
 Dónde estoy?
 Qué hay aquí?
 Adónde puedo ir?
1. Branding
area/Barra de
Títulos
2. Barra de
navegación
3. Panel de contenido

12. Diseño Conceptual
 Definir el esquema
de organización,
funcionamiento y
navegación del sitio
 El arte y la ciencia
de organizar
espacios de
información con el fin
de ayudar a los
usuarios a satisfacer
sus necesidades de
información.
--------------------
--------------------
--------------------
Index.html
Sección1
Cont1
Cont2
Cont N
Sección2 Sección3

13. Diseño Conceptual
 Esquemas
 Taxonomias
 Mapas de sitio
 Metadata

14. Diseño Visual
 Aspecto del sitio
web: composición
de cada tipo de
página, aspecto y
comportamiento de
los elementos de
interacción y
presentación de
elementos
multimedia

15. Diseño Visual
 Cuadrícula
 Formas
 Tamaños
 Colores
 Iconos
 Imágenes
 Tipografía
 Texturas

16. Diseño de Contenidos
 Información
 Política editorial
 Producción y uso de
Textos, imágenes,
video, audio,
animaciones,
gráficos