Dise

1
Diseño de Páginas Web

• Pedro P. Sánchez Villalón

2
Tabla de contenidos (I)

• 1. El proceso de diseño de un sitio web (3
  sesiones)
• Introducción a la asignatura
• El proceso de diseño de un sitio web
• 2. Diseño y desarrollo de páginas web (8
  sesiones)
• Elementos de un diseño efectivo
• Gráficos e imágenes
• Fuentes y tipos de letras
• Compatibilidad entre navegadores
• Hojas de estilo
• Lenguaje XML
• 3. Añadiendo interactividad a las páginas web (3
  sesiones)
• Páginas dinámicas javascript y applets
• Otros lenguajes y tecnologías Macromedia Flash,
  VRML....

1
3
Tabla de contenidos (II)

• 4. Tecnologías de desarrollo de aplicaciones web
  (5 sesiones)
• Protocolo http peticiones GET, POST, cabeceras,
  cookies
• Generación de páginas dinámicas con CGIs y
  servlets
• Introducción a JSP y ASP
• 5. Usabilidad de sitios web (4 sesiones)
• Estructura de un sitio web
• Elementos de navegación y localización en un
  sitio web
• Estudios de usabilidad de sitios web
• 6. Difusión del sitio web (2 sesiones)
• Promoción en buscadores
• Registro de dominio y web hosting

2
4
Práctica

• 1. La herramienta de diseño de sitios web
  Frontpage
• Descripción del programa
• Elementos centrales de HTML
• 2. Diseño de sitios web con un editor
• Tablas y marcos
• Multimedia
• Hojas de estilo
• DHTML, JavaScripts, Applets, formularios
• 3. Otras herramientas de diseño

3
5
Bibliografía

• Thomas Powell HTML 4. Manual de referencia. Ed.
  Mc Graw Hill.
• Thomas Powell Diseño de sitios web. Ed. McGraw
  Hill.
• Jakob Nielsen Usabilidad. Diseño de sitios web.
  Ed. Prentice Hall.

4
6
Cómo hemos llegado hasta aquí?

• Asiste a las sesiones de teoría y práctica
• Lee los capítulos sugeridos de la bibliografía
  recomendada
• Realiza de los trabajos propuestos
• Participa en clase
• Navega, explora y ponte al día en cuestiones de
  nuevas tecnologías

5
7
La web del día www.amazon.com

• El problema de diseño
• Soluciones innovadoras
• Tecnologías usadas

6
8
El problema de diseño

• Elementos a conjugar
• Tienda on-line
• Enorme cantidad de productos en varias áreas
  (librería, vídeos, electrónica, juguetes, viajes,
  ...)
• Gran cantidad de funionalidades ver cesta de la
  compra,
• ver productos relacionados, ...
• Uso de una gran base de datos de compras de
  clientes
• Participación de los clientes (comunidad de
  clientes)

7
9
Algunas soluciones innovadoras

• Tiendas virtuales dentro de Amazon
• Algoritmos avanzados que
• agrupan los artículos según categorías
• sugieren artículos similares a uno dado según las
  compras de los clientes
• Funciones de comunidad
• Valoraciones de los artículos (comentarios y
  estrellas)
• Venta de artículos usados
• Listas-manía
• Círculos de clientes
• Personalización
• Sobre todo simplicidad!!!

10
Diseño del frontal (febrero 2002)
11
Diseño Tiendas virtuales y Bases de datos

• Tiendas virtuales
• Diseño consistente en tiendas
• Bases de datos
• Artículos
• Enorme base de datos de artículos (libros,
  música, DVDs, juguetes, ...)
• Todo tipo de información asociada a cada artículo
• Algoritmos avanzados de clasificación que
  proporcionan artículos parecidos a uno dado
• Compras
• En un gran número de páginas, Amazon se aprovecha
  de algo que sólo ellos tienen una enorme base de
  datos de compras realizadas por sus clientes

12
Información

• Información de un artículo
• Foto portada
• Autor
• Título
• Precios
• Ofertas
• Disponibilidad.
• Artículos similares

13
Páginas

• Herramientas de comunidad
• Personalización
• Simplicidad confirmación compra
• Accesibilidad versión texto
• Tecnologías usadas
• Diseño de páginas
• Hojas de estilo
• Accesibilidad
• Web completamente dinámica
• Manejo complejo de sesión para personalización
• Bases de datos