Creación y Diseño Web . Edición 2008

Internet ha cambiado de forma definitiva el concepto de comunicación audiovisual. Diseñar un sitio Web es un proceso que requiere conocimientos técnicos para ponerlo en funcionamiento y nociones de diseño para que el producto sea utilizable y visualmente agradable. En general, los libros de diseño Web se concentran en el aspecto técnico y dejan a un lado los temas creativos y estratégicos, también muy importantes.

Crear diseños de estilo con CSS está de moda, mientras HTML mantiene su punto fuerte en lo que a descripción y estructura del contenido del sitio se refiere, tanto si diseña directamente en código como si lo hace usando un editor visual como Dreamweaver que lo genera automáticamente.

Este libro no explica una herramienta determinada aunque en ocasiones las utilice como ejemplo. Su objetivo principal es abordar los aspectos técnicos, creativos y estratégicos más modernos en el diseño Web. Los principios básicos necesarios para preparar, producir y mantener un sitio.

Agradecimientos

Introducción

Cómo usar este libro

1. Una aproximación a Internet
1.1. Introducción
1.2. Historia y evolución de Internet
1.3. Conectarse a Internet. Terminología de Internet
1.3.1. ¿Cómo funciona Internet?
1.3.2. Protocolo TCP/IP. El lenguaje de Internet
1.3.3. Proveedores de servicio de Internet
1.3.4. Publicar un sitio en la Web
1.3.5. Las IP. Internet Protocol o Protocolo Internet
1.3.6. Tecnologías de conexión
1.3.7. Modems
1.3.8. La nueva revolución: Tecnología inalámbrica
1.4. Servicios de Internet
1.4.1. Navegación Web, La Web
1.4.2. E-mail o Correo electrónico
1.4.3. Los grupos de noticias, newsgroups
1.4.4. FTP, File Transfer Protocol
1.4.5. Voz transmitida sobre IP. VoIP
1.4.6. Chat
1.4.7. Cámara Web, Webcam
1.4.8. Blogs, bitácoras
1.5. La interactividad de la Web
1.6. Resumen

2. Organizar las ideas
2.1. La creación de sitios Web
2.1.1. Las páginas Web
2.1.2. Los sitios Web
2.1.3. Elementos de una página Web
2.1.4. La Web como medio de expresión
2.2. Consideraciones antes de comenzar
2.2.1. Definir los objetivos del sitio
2.2.2. Hacer una descripción del sitio y precisar los recursos
2.2.3. Identificar a la audiencia
2.2.4. Crear una lista de contenidos
2.2.5. Concebir el diseño gráfico
2.3. Otras consideraciones técnicas
2.3.1. El tamaño del monitor
2.3.2. Configurar la pantalla
2.3.3. Velocidad de conexión y ancho de banda
2.3.4. Usabilidad
2.3.5. Cambios de URL
2.4. Resumen

3. Elegir el software
3.1. Introducción
3.2. HTML, XML y XHTML
3.2.1. Exigencias sintácticas para XHTML
3.3. El entorno WYSIWYG
3.4. Cascading Style Sheets (CSS)
3.5. JavaScript
3.6. Editores de HTML y XHTML
3.7. Software para editar páginas Web
3.8. Software para crear y procesar imágenes
3.9. Herramientas para trabajar con archivos multimedia
3.10. Herramientas de Internet
3.10.1. Navegadores
3.10.2. Programas de transferencia de archivos
3.10.3. Aplicaciones de terminal
3.11. Resumen

4. El proceso de diseño
4.1. Crear y organizar el contenido
4.1.1. HTML
4.1.2. HTML vs editores visuales
4.1.3. Una Web por dentro
4.1.4. Estructura de archivos y carpetas
4.1.5. La recopilación del material
4.2. Dibujar los bocetos
4.2.1. La proporción
4.3. La fase de producción. Crear los documentos HTML
4.4. Evaluar el sitio
4.4.1. Versiones del navegador
4.4.2. Plataformas diferentes
4.5. Cargar el sitio en el servidor y volver a probar
4.6. Mantenimiento del sitio

5. Registrar un dominio
5.1. Introducción
5.2. Los IP
5.3. Los URL
5.4. Llevar el sitio a Internet
5.5. Elegir un dominio acertado
5.5.1. Algunas consideraciones sobre la extensión del dominio
5.5.2. Elegir un nombre de dominio
5.5.3. Utilizar un generador de dominios
5.6. Registrar el nombre del sitio
5.7. Elegir alojamiento Web
5.8. Ya he registrado mi sitio. ¿Ahora qué?
5.9. Resumen

6. El color en el diseño Web
6.1. Introducción
6.2. El color en la Web
6.2.1. La paleta Web
6.3. La teoría del Color
6.3.1. Los colores aditivos
6.3.2. Modelo de color RGB (Red, Green, Blue)
6.3.3. Modelo de color CMYK (Cyan, Magenta, Yellow, Black)
6.3.4. Tono, Valor y Saturación
6.3.5. Los esquemas de color
6.3.6. Colores fríos y colores cálidos
6.4. Psicología del color
6.4.1. El significado de los colores
6.5. Colores para un sitio
6.5.1. Notación hexadecimal
6.6. Aplicar el color
6.6.1. Insertar color de fondo
6.6.2. Seleccionar el color del texto y los vínculos
6.7. Resumen

7. Crear sitios Web
7.1. Introducción
7.2. Conceptos generales
7.2.1. Estructura del sitio
7.3. Crear sitios Web
7.3.1. Los fundamentos
7.4. Crear sitios con editores visuales
7.4.1. Trabajar con Dreamweaver CS3
7.5. Mapa del sitio
7.5.1. El Mapa del sitio con Dreamweaver CS3
7.6. Resumen

8. Construir páginas básicas con texto
8.1. Introducción
8.2. Crear un nuevo documento Web
8.2.1. Crear un nuevo documento desde la página de inicio de Dreamweaver CS3
8.2.2. Crear un nuevo documento con el cuadro de diálogo Nuevo documento de Dreamweaver CS3
8.3. Comprender la estructura de una página Web
8.4. Configurar la estructura básica HTML
8.4.1. La declaración DOCTYPE
8.4.2. Las etiquetas "meta"
8.5. El contenido de la página
8.6. Algunos términos tipográficos importantes
8.6.1. El tipo de letra o de fuente
8.6.2. Tamaños de letra
8.6.3. Estilo de fuente: Negritas
8.6.4. Interlineado
8.6.5. Ajuste del espacio entre letras (kerning)
8.6.6. Ancho de línea
8.6.7. El color del texto
8.6.8. Alineación del texto
8.6.9. Uso de mayúsculas
8.6.10. Otros recursos
8.7. Añadir texto a una página Web
8.7.1. Los párrafos
8.7.2. Los encabezados
8.8. Poner etiquetas a los objetos
8.9. Resumen

9. Preparar las imágenes para la Web
9.1. Introducción
9.2. Formatos de archivo de imágenes
9.2.1. Formato de mapa de bits
9.2.2. Formato vectorial
9.3. Las imágenes para la Web
9.3.1. Optimizar las imágenes
9.3.2. Seleccionar el formato
9.3.3. Los formatos para la Web
9.4. Optimizar imágenes con Photoshop CS3
9.5. El tamaño y la resolución de las imágenes
9.5.1. La resolución de las imágenes
9.5.2. Cambiar la resolución con Photoshop
9.5.3. Optimizar el tamaño
9.6. Los tiempos de descarga de las imágenes
9.7. Resumen

10. Encontrar imágenes para el proyecto
10.1. Introducción
10.2. Las imágenes en la Web
10.2.1. Aspectos estéticos
10.2.2. Aspectos técnicos
10.3. Dónde encontrar imágenes
10.3.1. Realizar sus propias imágenes
10.3.2. Bancos de imágenes
10.3.3. Obtener ayuda profesional
10.4. Ubicación de los archivos de imágenes
10.5. Nombrar imágenes para la Web
10.5.1. Nombrar las imágenes
10.6. Vincular archivos y editores
10.7. Resumen

11. Insertar imágenes
11.1. Imágenes de primer plano
11.1.1. Textos alternativos
11.1.2. Descripciones largas
11.1.3. Insertar imágenes desde el panel Activos de Dreamweaver
11.1.4. Redimensionar las imágenes
11.2. Otras herramientas gráficas
11.2.1. Editar
11.2.2. Optimizar
11.2.3. Recortar
11.2.4. Volver a muestrear
11.2.5. Brillo y contraste
11.2.6. Perfilar
11.3. Alinear las imágenes con respecto a otros contenidos
11.3.1. Alinear texto e imágenes
11.4. Introducir Bordes
11.5. Añadir márgenes alrededor
11.6. Introducir textos gráficos
11.7. Utilizar marcadores de posición de imágenes
11.8. Insertar una imagen de fondo
11.9. Resumen

12. Los enlaces
12.1. Introducción
12.2. Conceptos Generales
12.2.1. Las rutas de acceso
12.3. Crear vínculos
12.4. Los vínculos externos
12.5. Los vínculos internos
12.5.1. Vínculos entre dos documentos del mismo directorio
12.5.2. Vínculos entre documentos de diferentes directorios
12.5.3. Trabajar los vínculos internos con editores visuales
12.6. Vínculos dentro del mismo documento
12.7. Crear enlaces a un correo electrónico
12.8. El color de los vínculos
12.9. Abrir vínculos en una nueva ventana
12.10. Comprobar los vínculos
12.11. Trabajar los vínculos con imágenes
12.11.1. Crear un mapa de imagen con Dreamweaver CS3
12.11.2. Insertar una zona interactiva rectangular
12.11.3. Insertar una zona interactiva oval
12.11.4. Insertar una zona interactiva poligonal
12.12. Consejos para trabajar con hipervínculos
12.13. Resumen

13. Tablas y capas: La distribución de la página
13.1. Introducción
13.2. Tablas versus Capas
13.3. Trabajar con tablas
13.3.1. Crear tablas con HTML
13.3.2. Crear tablas con Dreamweaver CS3
13.3.3. Dar formato a las tablas
13.3.4. El formato de celdas
13.3.5. Uso de tablas para alinear el contenido de documentos Web
13.3.6. Tablas anidadas
13.3.7. Imágenes de espaciador
13.4. Las capas
13.5. Utilizar las facilidades que ofrecen los editores visuales
13.6. Resumen

14. Las Hojas de Estilos en Cascada
14.1. Introducción
14.2. Las CSS y el W3C
14.3. Las reglas CSS
14.4. Las reglas CSS según su ubicación
14.4.1. Los estilos en línea
14.4.2. Las CSS internas
14.4.3. Las CSS externas
14.5. Las reglas CSS según el tipo de selector
14.5.1. Los estilos de clase
14.5.2. Redefinir etiquetas HTML
14.5.3. Los selectores avanzados
14.6. Los atributos CLASS e ID
14.6.1. El atributo CLASS
14.6.2. El atributo ID
14.7. Cascada y herencia
14.7.1. Los valores de las propiedades
14.8. Las categorías de estilos
14.9. Aplicaciones para crear y editar hojas de estilos
14.10. Resumen

15. Agregar contenido multimedia
15.1. Introducción
15.2. Crear e insertar una imagen de sustitución o rollover
15.2.1. Reglas de sustitución
15.2.2. Crear e insertar un rollover
15.3. Insertar un GIF animado
15.4. Plugin
15.5. El streaming
15.6. Sonido digital
15.6.1. Los archivos de sonido
15.6.2. Insertar sonido en una página Web usando un hipervínculo en Dreamweaver
15.6.3. Incrustar el sonido
15.7. Vídeo digital
15.7.1. Insertar un archivo QuickTime
15.8. Interacción con Flash
15.9. Insertar contenido Flash
15.9.1. Insertar contenidos de tipo Flash Video
15.9.2. Crear e insertar botones Flash
15.9.3. Crear e introducir texto Flash
15.10. Resumen

16. Probar y publicar el sitio
16.1. Introducción
16.2. Aspectos a tener en cuenta en la revisión final
16.3. Añadir metadatos
16.3.1. Añadir palabras clave
16.4. Comprobar los navegadores
16.5. Comprobar la accesibilidad
16.6. Validar páginas
16.7. Comprobar los vínculos
16.7.1. Revisión de archivos huérfanos
16.8. Hacer informes del sitio
16.9. Publicar su sitio Web
16.9.1. Clasificar el material
16.10. Obtener el Dominio
16.11. Colocar el sitio en la Web
16.11.1. Trabajar con programas FTP
16.12. Mantenimiento del sitio
16.13. Resumen

Índice alfabético