Dise

1
Diseño de Páginas WebSesión 3 Diseño y
elaboración depáginas web

• Pedro P. Sánchez Villalón

2
Tabla de contenidos (I)

• Qué puede haber en una página web?
• Navegadores web (web browsers)
• Disposición de una página

1
3
HTML 4.01

• HTML 4.01
• Lenguaje de marcado (no de programación)
• Estándar del grupo W3C (www.w3c.org)
• Los ficheros HTML son ficheros de texto
• Permite especificar los distintos elementos que
• componen una página web
• Elementos HTML (se describen mediante texto)
• Elementos no HTML (imágenes, imágenes,
  animaciones
• flash, javascript, applets, ...)

4
Un ejemplo de página

• Objeto
• Animación
• Flash
• JavaScript para
• Menú desplegable
• Imágenes
• Texto y tablas en
• HTML

5
Elementos HTML

• Elementos HTML
• Enlaces, listas, párrafos
• Colores, imágenes
• Fuentes y tipos de letra
• Tablas
• Marcos
• Formularios

6
Elementos no HTML

• JavaScript
• Rollovers
• Menús desplegables
• Animaciones
• Flash
• Gifs animados
• Applets
• Menús desplegables
• Audio y vídeo

7
Applets

• Applets
• http//www.anfyteam.com/
• Ejemplos
• Árbol de menús
• Efectos gráficos.

8
Navegadores web

• Un ejemplo de página multimedia
• Navegadores web.
• Qué es un navegador web?

9
Navegadores (1)

• Qué entiende un navegador?
• Inicialmente, los ficheros que un navegador puede
  procesar correctamente son
• HTML (.htm, .html)
• Imágenes (.gif, .jpg, .png, ...)
• JavaScript (.js)
• Applets (.jar, .class)
• Para otros objetos es necesario instalar en el
  navegador un plug-in (componente)

10
Componentes (plug-ins)

• Componentes (plug-ins)
• Plug-ins habituales
• Macromedia Flash (animaciones flash)
• Acrobat reader (ficheros .pdf)
• Quicktime (vídeo en ficheros .mov)
• RealPlayer (vídeo, audio .mp3, ...)
• Ventajas
• Mejoran la interactividad y proporcionan
  funcionalidades adicionales
• Inconvenientes
• No todo el mundo los tienen instalados

11
Diversidad de navegadores

• Problema la misma página puede tener distinta
  apariencia en distintos navegadores (o incluso en
  el mismo)
• Navegadores
• Microsoft Internet Explorer (85 )
• Netscape (12 )
• Otros (3 )

12
Diversidad de plataformas

• Diversidad de plataformas
• Diversos sistemas operativos (Mac OS, Windows,
  Linux)
• Diversos tipos de monitor
• Diversas formas de acceso a Internet (televisor,
  Pocket PC, teléfono WAP)

13
Aplicación web

• Disposición de una página
• (layout).
• Espacio como elemento de diseño
• Espacio en
• Márgenes laterales, márgenes superiores
  inferiores
• Texto de la página (párrafos)
• Listas
• Entre las imágenes
• Entre elementos (cuadros en la página)

14
Espacio

• Espacio vertical
• Disposición de páginas.
• Otro ejemplo espacio vertical
• Disposición de páginas
• Disposición tipo portal
• Disposición de páginas.
• Juego con el espacio

15
Algunas reglas básicas

• Algunas reglas básicas
• Velocidad de carga (peso)
• Claridad
• Simplicidad
• Estructura