INTRODUCCIÓN La Web, un mundo en eterno cambio
Cómo funciona DWG.3
CAPÍTULO 1. PARA EMPEZAR
Consejos de Lynda sobre la carrera profesional
Formación
Autoaprendizaje
Mejorar las técnicas de diseño general
¿Qué cualidades son importantes?
Los primeros pasos de la carrera
La importancia de un portfolio
Cuánto se debe cobrar
Cómo conseguir trabajo en el diseño de sitios Web
Utilice los motores de búsqueda
Opciones de hardware
¿Macintosh o Windows?
Mac contra PC
Ventajas de Mac
Ventajas de PC
¿Qué plataforma es mejor?
Requisitos del sistema
Software
Programas de preparación de imágenes
Resumen
CAPÍTULO 2. EDITORES DE HTML
¿HTML en un libro de gráficos?
¿Qué es HTML?
¿Por qué HTML crea tantos problemas en el diseño?
¿Debe aprender HTML?
Cómo aprender HTML
¿Cómo es HTML?
Editores de HTML
Funciones de edición de HTML
Resumen
CAPÍTULO 3. ESTRATEGIA
Primeros pasos
Storyboards
Estudio de un caso: del storyboard a la producción
Flujograma
Formas de navegación
Más formas de navegación
Estructura del sitio Web
Metáforas
Metáforas: ¿ayudan o dificultan?
Resumen
CAPÍTULO 4. ENTORNOS PARA LA CREACIÓN DE LA WEB
Diferencias de navegador
Recursos con consejos sobre diferencias de HTML y de navegador
Cómo conseguir la compatibilidad
El temido navegador AOL
Calibración del color en multiplataforma
Diferencias de gamma
Valor y contraste
Alta resolución y baja resolución
Profundidad de bit
Profundidad de bit del monitor
Cómo cambiar la profundidad de bit de un monitor
Diferencias en el texto
Consideraciones sobre el tamaño del monitor
WebTV
Consejos sobre el diseño para la WebTV
Comparación entre la Web TV y la Red
Resumen
CAPÍTULO 5. FORMATOS DE ARCHIVO PARA LA WEB
¿Mapa de bits o vector?
Pérdida de calidad
Compresión GIF
GIF entrelazados
GIF transparentes
GIF animados
JPEG
JPEG Progresivo y JPEG Estándar
PNG
Corrección de gamma
Transparencia del canal alfa
Marcas de agua digitales
MNG
Ventajas de MNG
Desventajas de MNG
Resumen
CAPÍTULO 6. GRÁFICOS DE ANCHURA DE BANDA BAJA
Tamaño de archivo y velocidad de descarga
¿Cuál es el tamaño real de un archivo?
Medición del tamaño de imagen en ImageReady y Fireworks
Evaluar el estilo de la imagen
Guardar fotografías como GIF sin tramado
Guardar fotografías como JPEG
Guardar fotografías como GIF con tramado
Guardar gráficos como GIF sin tramado
Guardar gráficos como JPEG
Guardar gráficos como GIF con tramado
Crear JPEG de tamaño pequeño
Ejemplos de JPEG
Baseline Estándar
Progresivo
Baseline Optimizado
Plug-in de Photoshop para crear JPEG de tamaño pequeño
Crear GIF de tamaño pequeño
La profundidad de bit afecta al tamaño del archivo
Anti-aliasing o aliasing
Diseños "aliased"
Archivos GIF para diseños basados en líneas
Paletas de color GIF
Tramado y efecto de banda
Atrévase con el tramado
Reducir los colores en archivos GIF utilizando Photoshop
Opciones de paleta de Photoshop
Reducir colores en ImageReady
Opciones de paleta de ImageReady
Reducir los colores en Firewoks
Opciones de paleta de Fireworks
Reducir los colores en Paint Shop Pro
Opciones de paleta de Paint Shop Pro
Imágenes compuestas
Plug-in de Photoshop para optimización GIF
Boxtop Software
HVS ColorGIF
Reducir el tamaño de archivo on-line: GIFWizard
Animación GIF
Crear archivos PNG pequeños
Entrelazado
Filtros
Secuencias de comandos en Photosop e ImageReady
En Photoshop
En ImageReady
Droplets de ImageReady
Desde la paleta Acciones
Desde la paleta Optimizar
Secuencias de comandos de Fireworks
Secuencia de comandos en DeBabelizer
Resumen
CAPÍTULO 7. CALIBRACIÓN DEL COLOR
¿RGB o CMYK?
Perfiles ICC y RGB
¿Qué es sRGB?
¿Qué es un perfil de color ICC?
Consideraciones sobre ICC y sRGB
Otros asuntos relacionados con gamma
sRGB en Photoshop
Cómo desactivar sRGB
Sitios Web que necesitan precisión en el color
Resumen
CAPÍTULO 8. COLORES SEGUROS PARA LA WEB
¿Qué es una paleta segura para el navegador?
Colores seguros para el navegador organizados según el valor
Colores seguros para el navegador organizados según el tono
¿Por qué existe la paleta segura para el navegador?
Cuándo utilizar la paleta de color segura para el navegador
Colores que se basan en valores hexadecimales
Cambio de colores que no son seguros para el navegador
Diseño basado en una ilustración
Diseño basado en fotografías
Cómo utilizar los colores seguros para el navegador
Elección del color hexadecimal seguro para el navegador
Otros métodos de conversión
Recursos de los colores hexadecimales
Solución segura para el navegador de Pantone
Selección de colores seguros para el navegador
Cómo cargar una paleta de muestras seguras para el navegador en Photoshop
Cómo cargar la paleta segura para el navegador en ImageReady
Cómo cargar la paleta segura para el navegador en Fireworks
Cómo asegurarse de que los colores seguros para el navegador de un diseño GIF no cambian
Guardar archivos GIF en Photoshop
Archivos GIF seguros en ImageReady
Archivos GIF seguros en Fireworks
Software basado en vectores: Illustrator y FreeHand
Colores seguros para el navegador en Illustrator
Cómo trabajar con las muestras de Illustrator
Trabajar con FreeHand
Los diseños JPEG no pueden mantener los colores seguros para la Web
Imágenes compuestas
Imagen compuesta GIF en Photoshop
Imagen compuesta GIF en Fireworks
Imagen compuesta GIF en ImageReady
Imágenes con colores sólidos que no son seguros para el navegador
Resumen
CAPÍTULO 9. ESTÉTICA DEL COLOR
Términos relacionados con el color
Selección de colores
Relaciones de color
Aplicar relaciones de color al diseño para la Web
Herramientas de las relaciones entre colores
Colorear Gráficos Web
Plug-in de Photoshop para la armonía de colores
Legibilidad
Galería del color
Resumen
CAPÍTULO 10. ETIQUETAS HTML SOBRE EL COLOR
Colores por defecto
Atributos de color
La etiqueta BODY
Colores de los enlaces
Utilizar nombres de colores en lugar de valores hexadecimales
Atributo de color en Netscape
La etiqueta FONT
La etiqueta TABLE
Resumen
CAPÍTULO 11. PRINCIPIOS BÁSICOS DE LOS ENLACES
Identificación de enlaces
Imágenes enlazadas
Desactivar los bordes de las imágenes
Importancia de la anchura y la altura
Efectos visuales con WIDTH y HEIGHT
Importancia de ALT
Miniaturas e imágenes grandes
Enlaces con otros medios
Estética de los gráficos enlazados
Resumen
CAPÍTULO 12. FONDO
Imágenes de fondo
Determinar el tamaño del motivo de la imagen de fondo
Fondos del tamaño de la pantalla
Formatos de archivo para imágenes de fondo con motivos
El código, por favor
Con uniones o sin uniones, ésa es la cuestión
Uniones
Sin uniones, al estilo de Photoshop e ImageReady
Imágenes de fondo sin uniones en ImageReady
Imágenes de fondo sin uniones en Photoshop
Crear efectos mediante imágenes de fondo
Estética del fondo
Resumen
CAPÍTULO 13. DISEÑOS TRANSPARENTES
¿Qué es la transparencia?
Simular transparencia
Máscaras
Trucos
No existen las imágenes de fondo simuladas con motivos
Transparencia GIF
Suavizado
Resplandores, bordes suaves y sombras en la transparencia GIF
Herramientas y técnicas para crear transparencias GIF
Transparencia GIF en ImageReady
Transparencia GIF en Fireworks
Transparencia GIF en Photoshop
Transparencia PNG
Resumen
CAPÍTULO14. LÍNEAS, BOTONES Y VIÑETAS
Líneas horizontales
Método HTML
Otras etiquetas de líneas horizontales
Líneas horizontales e imágenes de fondo
Método de creación propia
Crear líneas personalizadas con Photoshop
Líneas verticales
Galerías de imágenes
Viñetas
Listas con viñetas de HTML
Crear listas de definición y listas ordenadas
Crear viñetas personalizadas
Crear diseños personalizados de viñetas
Botones que utilizan las opciones de efectos de capa de Photoshop
Galería de botones
Resumen
CAPÍTULO 15. MAPAS DE IMÁGENES
Mapas de imágenes de cliente y de servidor
Código de un mapa de imagen de cliente
Mapa de imagen de servidor
Combinar mapas de imágenes de servidor y de cliente
Importancia de la etiqueta ALT
Importancia de los atributos de anchura y altura
¿Hace falta realmente un mapa de imagen?
Crear un mapa de imagen en Fireworks
Crear un mapa de imagen con ImageReady
Resumen
CAPÍTULO 16. TIPOGRAFÍA PARA LA WEB
Glosario de términos tipográficos
Glosario de elementos que no se pueden utilizar con HTML
Texto 101
Tipografía Microsoft
Consideraciones estéticas
Tipografía basada en HTML
Opciones de fuente de HTML
Etiqueta FONT FACE
Verdana y Georgia
Tipografía basada en gráficos
Diseñar texto con Fireworks
Recursos para fuentes on-line
HTML para crear gráficos
Incrustación de fuentes
TrueDoc
TrueType Embedding y OpenType
Medidas de seguridad
Los diseñadores de texto contra la incrustación
PDF
Flash
Resumen
CAPÍTULO 17. ALINEACIÓN Y TABLAS
¿Qué tamaño tiene una página Web?
Utilizar HTML para alinear
Etiquetas y atributos de alineación de texto
Etiquetas de alineación de imágenes
Etiquetas de espaciado horizontal y vertical
Atributos de anchura y altura
Alternativas a HTML utilizando imágenes
Uso de tablas para alinear
Tablas de datos
Etiquetas de tablas HTML
Tablas de gráficos en la presentación de una página
¿Porcentajes o píxeles?
Tablas basadas en porcentajes
Tablas basadas en píxeles
Crear niveles con tablas
Tablas WYSIWYG
Resumen
CAPÍTULO 18. FRAMES
¿Qué son los frames?
Ventajas e inconvenientes de los frames
Principios básicos de los frames
Aprender a crear frames
Práctica de destino
Divertirse con los frames
Bordes sangrados simplificados
Resumen
CAPÍTULO 19. CASCADING STYLE SHEETS
¿Qué son las hojas de estilo?
Estructura de una hoja de estilo
Ocultar estilos a los navegadores antiguos
Externas, internas e inline
Externas
Internas
Inline
Texto y medidas
Trabajar con tipografía
Selectores
Posicionamiento absoluto
DIV y posicionamiento absoluto
Texto e imágenes con capas
Editores WYSIWYG
Resumen
CAPÍTULO 20. ESCANEAR EN LA WEB
¿Qué resolución se utiliza?
Diccionario de términos
Equipo para escanear
Cámaras digitales y DV
Cambiar el tamaño de las imágenes en Photoshop
Patrones de puntos y muaré
Técnicas de proceso de imágenes
Niveles
Tono, saturación, brillo
Resumen
CAPÍTULO 21. ANIMACIONES GIF
Estética de la animación
Formato GIF animado
Notas técnicas de los GIF animados
Glosario de términos sobre la animación GIF
Cómo crear el contenido de una animación
Terminología sobre animación
Herramientas y técnicas para crear una animación GIF cuadro a cuadro
Animación de cuadros en ImageReady
Animación de cuadros en Fireworks
Gráficos en movimiento en ImageReady
Utilización de instancias e intercalados para crear animaciones en Fireworks
Otras herramientas para crear animaciones GIF
Resumen
CAPÍTULO 22. JAVASCRIPT: ROLLOVER Y MÁS
La breve historia de JavaScript
Aprender JavaScript
Rollover (Imagen de sustitución)
Crear diseños de rollover
Ejemplo de rollover de sustitución
Ejemplo de rollover indicativo
Ejemplo de rollover múltiple
Capas de Photoshop para crear rollover
Separar rollover
ImageReady para crear sectores y optimización
Rollover simple en Fireworks
Rollover en Dreamweaver
Rollover de sustitución de Dreamweaver
Rollover indicativo en Dreamweaver
Rollover múltiples en Dreamweaver
Compatibilidad con versiones más antiguas de navegador
Detección del navegador
Abrir otra ventana
Resumen
CAPÍTULO 23. HTML DINÁMICO
Visión general de DHTML
Cascading Style Sheets
JavaScript
Complementos
DOM
Lo bueno de DHTML
Capas
Animación
Arrastrar y soltar
DHTMLzone
Resumen
CAPÍTULO 24. QUICKTIME
Principios básicos de QuickTime
Avances en la Web
Funciones de QuickTime para la Web
Películas "póster"
HREF, Sprites y pistas de texto
Ejemplos de distintas velocidades de transmisión de datos
Streaming
Formato de imagen
DV Camcorder
QTVR
Inconvenientes de QuickTime
Glosario de términos de vídeo digital
Resumen
CAPÍTULO 25. FLASH Y SHOCKWAVE
Dependencia de un complemento
Desviar a los usuarios hacia páginas de complementos
Formato de archivo Flash
Aprender Flash
Dibujar en Flash
Escenas y símbolos
Crear símbolos
Gestión de Símbolos y Escenas
Línea del tiempo y fotogramas clave
Botones rollover
Añadir sonido al botón
Interactividad en Flash
Integración de Flash en la Web
Cuadros de HTML con SWF
Contenido Shockwave
Guardar Archivos Shockwave
Introducción a Director
Interfaz de Director
Nuevas funciones para la Web
Aftershock para Director y Flash
Resumen
CAPÍTULO 26. HTML PARA DISEÑADORES VISUALES
Protocolos para asignar nombres en HTML
Nombres comunes de archivos
Nombres de rutas absolutos o relativos
Solución de problemas
Cargar páginas
Etiquetas HTML más frecuentes
Etiquetas de encabezamiento
Etiquetas de cuerpo
Etiquetas de alineación y atributos de texto
Etiquetas de texto
Etiquetas de líneas horizontales
Etiquetas y atributos de enlace
Etiquetas y atributos de alineación para imágenes
Etiquetas de imagen
Etiquetas y atributos de lista
Etiqueta de comentario
Etiquetas de tabla
Etiquetas y atributos de tabla
Etiquetas y atributos de cuadros
CAPÍTULO 27. RECURSOS GRÁFICOS PARA LA WEB
Conferencias sobre diseño
Programas sobre arte digital
URL útiles
Galerías de diseño de sitios Web
Revistas
GLOSARIO
ÍNDICE ALFABÉTICO
SOPORTE TÉCNICO
