Diseño Web. Edición 2003

El diseño nos rodea, está presente en todo nuestro entorno, incluso en la red. La llegada masiva de Internet a nuestros hogares ha generado que la red evolucione desde simples páginas estáticas a sitios donde es posible que el usuario esté en constante interacción.

Esta rápida evolución ha creado una nueva disciplina: el diseño web. La posibilidad de conjugar vídeos interactivos, medios impresos, 3D, juegos y animaciones crean en los diseñadores web un equilibrio entre trabajo y diversión que se refleja en el trabajo creativo que desarrollan. Compartir el punto de vista de expertos en este entorno, es una experiencia extraordinaria.

Este libro presenta soluciones claras a los desafíos que tienen que afrontar habitualmente los profesionales de la Web. Es una herramienta de enseñanza excelente, repleta de técnicas e ideas, que trata de forma clara aspectos de la programación con HTML y cómo integrar elementos DHTML, JavaScript, Flash y multimedia en los sitios. Aprenderá a desarrollar experiencias interactivas emocionantes incluyendo el código necesario para conseguirlo.

INTRODUCCIÓN
  Por qué leer este libro
  Resumen
  Modelos de diseño inspirativo

CAPÍTULO 1. INTERFAZ DE USUARIO Y NAVEGACIÓN.DISEÑO DE EXPERIENCIAS DE USUARIO INTERACTIVAS
  Planear un sitio
    Establecer la arquitectura del sitio
    Planear la interfaz de usuario
  Crear elementos de navegación eficientes
    Organizar los enlaces
    Asignar nombres a los enlaces
  Enlaces de texto y enlaces gráficos: ventajas e inconvenientes
  Utilizar mapas de imagen en el lado del cliente
  Mensajes de rollover personalizados en la barra de estado
    Hacer referencia a ventanas de exploración nuevas
  Implementación de cabeceras y pies de página virtuales
  Resumen
  URLs de este capítulo
  Modelo de diseño inspirativo

CAPÍTULO 2. COMPOSICIÓN. CREACIÓN DECOMPOSICIONES ATRACTIVAS MEDIANTE TABLAS Y MARCOS
  Tablas: la base de una composición
    Empezar por lo más básico: una sola tabla
    Tablas de colores
    Tablas anidadas
    Tablas y gráficos
  Caso de estudio
    La bandera estrellada (Star-Spangled Banner)del Smithsonian´s National Museum of America
  Marcos
    101 marcos
  Caso de estudio: Marcos
    Neutrogena Careers
    Marcos anidados
  Resumen
    URLS de este capítulo
  Modelo de diseño inspirativo

CAPÍTULO 3. EFECTOS TIPOGRÁFICOS.MEJORAR UNA INTERFAZ MEDIANTE FUENTES FABULOSAS
  La tipografía y la Web
  Breve historia sobre la tipografía
    Atributos de fuente: conceptos básicos
    Fuentes HTML por defecto y fuentes del sistema
    Fuentes de Mac y de PC
  Efectos especiales de texto
    Letras capitulares
    Cambiar el color de un texto al detectar un rollover
    Alineación de texto
  Texto suavizado
  Utilización de herramientas vectoriales para controlar el texto al máximo
    Componer el texto
    Texto curvado
    Texto experimental
  Resumen
    URLS de este capítulo
  Modelo de diseño inspirativo

CAPÍTULO 4. EL PODER DEL COLOR. PALETAS, TEORÍAY OTROS DETALLES SOBRE EL COLOR
  Comprender el color
    ¿Qué vemos realmente?
    Más de lo que llega a los ojos
    ¿Qué implica la utilización del color?
  Utilización del color
  Minimizar el uso del color
  Caso de estudio
    Studio eg
  Elegir los colores
  Cómo aplicar el color en una interfaz Web
    Color de fondo
    Contenido textual
    Navegación
  Utilización del color para crear un sistema
  La paleta Web segura
  Resumen
    URLs de este capítulo
  Modelo de diseño inspirativo

CAPÍTULO 5. PERSONALIZACIÓN. SIMPLIFICACIÓNCON HOJAS DE ESTILO Y PERSONALIZACIÓN CON JAVASCRIPT
  Hojas de estilo
    Utilización de hojas de estilo
    Agrupar las reglas de hojas de estilo
    Añadir estilos a las páginas Web
    Estilos en línea
    Incrustar una hoja de estilo
    Enlazar una hoja de estilo externa
    Clases e IDs
    La cascada
    Selectores contextuales
    Hojas de estilo y gráficos
  Texto sobre gráficos
  Gráficos sobre gráficos
    Fondos
  JavaScript
    Objetos, propiedades y eventos
    Sintaxis
    JavaScript y la ventana del explorador
  Crear un mensaje de alerta
    Ventana emergente (básico)
    Cerrar la ventana
    Ventana emergente (avanzado)
  Explorador a pantalla completa
    Control remoto
    Colocar una ventana en una posición específica.
    Agitar la ventana de exploración
    Abrir dos ventanas
    Proteger mediante contraseña un sitio
  Utilización de elementos aleatorios
  Mostrar un mosaico de fondo aleatorio
  Incrustar un sonido aleatorio
  Cargar una página HTML aleatoria
    Más información sobre JavaScript
  Resumen
  Modelo de diseño inspirativo

CAPÍTULO 6. CONCEPTOS BÁSICOS DEL DISEÑO CON FLASH.ESTUDIO SOBRE EL ESPACIO INTERACTIVO
  Antes de empezar...
  Protectores de pantalla
    El concepto de diseño
    Hacerlo con Flash
    Ventajas de los protectores de pantalla
  Juegos
    Concepto de diseño del juego
    Desarrollo con Flash: presentación aleatoria de las escenas
    Desarrollo con Flash: los objetos de sonido
    Final de los juegos
  Sitelets
    Concepto de diseño del sitelet
    Flash y HTML
    Promociones Flash
  Resumen
    URLS de este capítulo
  Modelo de diseño inspirativo

CAPÍTULO 7. ANIMACIONES DINÁMICAS WEB.DREAMWEAVER Y DHTML
  Nunca hay que olvidarse del HTML
  Utilización de capas en Dreamweaver
  Propiedades de las capas
    El nombre de la capa
    Izquierda y Superior (Iz y Sup)
    Índice Z
    Visibilidad
    Anchura y altura
    Imagen y color de fondo
  Utilización de capas
  Utilización de comportamientos
  Aplicar comportamientos a imágenes
    Modificar o borrar comportamientos
  Técnica: intercambio de imágenes
  Combinar comportamientos y capas
  Caso de estudio
    Sharon Coon, diseñadora
  OnLoad
  Comprobar el explorador
  Comprobar plug-in
  Creación de Rollovers con Macromedia Fireworks
  Resumen
  URLs de este capítulo
  Modelo de diseño inspirativo

CAPÍTULO 8. MULTIMEDIA. UN PASO ADELANTE CON VÍDEO Y SONIDO
  Planificación del vídeo y el sonido
  QuickTime
    Capturar o digitalizar vídeo
    Digitalización de vídeo
    Compresión y optimización de vídeo
    Incrustación de QuickTime
    QuickTime y Flash
  Wildform Flix: conversión de vídeo al formato SWF de Flash
    Skins de QuickTime
  Añadir sonido a nuestros sitios
    Introducción al sonido
    Fomatos de sonido
  .aiff
  .mp3
  .wav
  MIDI y otros
    Edición y compresión de sonido
    Bucles de sonido
    Conversión a MP3
  Incrustación de sonidos en HTML
  Sonido de Flash
    Beatnik Editor
  Caso de estudio
    Sitio Web promocional Samsung-24 Hour Street
    Bibliotecas de sonidos
  Ear Shot SFX (Conjunto de 2 CDs)
  Beatnik Sound Database
  The Hollywood Edge
  Resumen
  Modelo de diseño inspirativo

CAPÍTULO 9. INTERFACES DE FLASH. CREACIÓN DE EXPERIENCIAS CINEMÁTICAS E INTERACTIVAS
  ¿Por qué utilizar Flash?
    Diseñadores y Flash
  Diseño con Flash
  Integrar el movimiento dentro del diseño
  Cargar las páginas de un modo atractivo
    Utilización de máscaras en animaciones
  Utilización de interpolaciones
    Interpolaciones de movimiento
    Interpolaciones de forma
    Interpolaciones con aceleración
  Transiciones
    Utilización de los niveles para crear transiciones suaves
    Utilizar clips de película en transiciones de tipo rollover
  Fotografías y Flash
    Imágenes vectoriales y mapas de bits
    Utilización de fotografías
    Importación de secuencias
    Importación de canales alpha
    Convertir mapas de bits en imágenes vectoriales
    Opciones de exportación
  La descarga
    Crear un sistema de pre-carga
    Utilización de niveles para optimizar la descarga
  Utilización de texto en Flash
    Texto suavizado
    Texto sin suavizar
    Crear texto artístico
    Formularios de texto editables
  Flash y HTML
  Integración de Flash en las páginas HTML
  Flash y los conjuntos de marcos
  Publicación de películas de Flash desde Flash
  Utilización de Flash fuera de la Web
    Crear proyectores de presentaciones
  Caso de estudio
    Red Advertising, www.redads.com
    Créditos de diseño
    Exportar películas de Flash como vídeo QuickTime
  Enlaces interesantes sobre Flash
  URLs de este capítulo
  Modelo de diseño inspirativo

CONCLUSIÓN

APÉNDICE A. REFERENCIA RÁPIDA DE HTML

APÉNDICE B. REFERENCIA DE HOJAS DE ESTILO Y JAVASCRIPT

APÉNDICE C. REFERENCIA MULTIMEDIA

ÍNDICE ALFABÉTICO