El éxito comercial de la Web precedió al desarrollo de los estándares. Esta circunstancia creó una situación inestable, en la que muchos sitios quedaban rápidamente obsoletos debido a las continuas innovaciones en navegadores y dispositivos.

Con los estándares Web podemos diseñar y generar sofisticados sitios de gran belleza garantizando que funcionen en el futuro. Por estándares nos referimos a lenguajes estructurales como XHTML y XML, lenguajes de presentación como CSS, modelos de objeto como el DOM del W3C y lenguajes de secuencia de comandos como ECMAScript.

Este libro explica cómo trabajar con estos estándares y utilizarlos de manera conjunta para crear sitios compatibles con menos ancho de banda.

Ahorra Con Agapea
"Compra "Diseño con estándares Web" junto a "Hipatia de Alejandría":

Por solo 49.6 € Gastos de envío gratis^**

Agradecimientos
Acerca del autor
Acerca de los revisores técnicos

Prefacio
Un tamaño no siempre es para todos
Teoría frente a práctica
El futuro de los diseños híbridos
Un conjunto continuo de normas, no inflexible
Muestre, no venda
Deje que su trabajo se encargue de vender
Cómo vender persona a persona
Vientos de cambio

Introducción
Costes en espiral, disminución de beneficios
El fin de la obsolescencia
¿Qué es la compatibilidad directa?
Sin normas, sin dogmas
Práctica, no teoría
¿Realmente es necesario?

Parte I. Houston, tenemos un problema

1. El 99'9 por ciento de los sitios Web están obsoletos
Navegadores modernos y estándares Web
Un nuevo código para un nuevo trabajo
El problema de las versiones
Pensamiento inverso
Marcado obsoleto: el coste para los propietarios de sitios
Compatibilidad inversa
El bloqueo de usuarios es malo para el negocio
Camino a Villaidiotez
Cosas buenas para marcado malo
El remedio

2. Diseño y creación con estándares
Pasar por el aro
El coste del diseño antes de los estándares
Sitios modernos, técnicas antiguas
La trinidad de los estándares Web
Estructura
Presentación
Comportamiento
En marcha
Ventajas de los métodos de transición
El Web Standards Project: portabilidad en acción
Un documento para todo
A List Apart: una página, varias vistas
Diseño más allá de la pantalla
Menos tiempo y dinero, más público
El futuro
Compatibilidad directa transicional
Compatibilidad directa estricta

3. El problema de los estándares Web
Un aspecto agradable, un código repelente
Objetivos comunes, medios comunes
Percepción frente a realidad
Año 2000: el año de los navegadores
IE5/Mac: cambios y zoom
El temerario movimiento de Netscape
Se abren las compuertas
¿Demasiado poco, demasiado tarde?
CSS: la primera ronda es gratis
Los navegadores erróneos conducen a prácticas erróneas
La maldición de la representación de legado
Herencia del viento
El Sr. Comportamiento
Por fin un lenguaje de secuencias de comandos duradero
Sitios confusos, denominaciones desconcertantes
Académicos frente a economistas
Los consorcios sugieren, las empresas venden
Concienciados por los productos o concienciados por los estándares
La palabra que empieza por F
El valor de Flash
El problema con Flash
El otro problema con Flash
La compatibilidad es un insulto
El poder del lenguaje para moldear percepciones
El problema de la inspiración
Otros problemas

4. XML conquista el mundo (y otras historias del éxitode los estándares Web)
El lenguaje universal (XML)
Comparación entre XML y HTML
Un padre, varios hijos
Un ingrediente básico del software profesional y de consumo
Más famoso que la MTV
Cinco formas de generar datos
Un filón de inventos
Herramientas de publicación Web para el resto de los mortales
A su servicio
Aplicaciones XML en nuestro sitio
Todavía en pañales
Compatible por naturaleza
Una nueva era de cooperación
Suites de prueba y especificaciones
Importancia de la suite
Estándares Web y herramientas de creación
La Task Force de Dreamweaver
Las herramientas WYSIWYG cumplen la mayoría de edad (dos de tres no está nada mal)
FrontPage: incompatible por diseño
La emergencia del diseño CSS
La campaña de actualización de navegadores
Comienza la riada
Innumerables conversiones y los sitios de ayuda en las que se asientan
Caprichos justificados
El corporativismo de los estándares Web
Los sitios comerciales dan el salto
La conversión de Wired Digital
Adopción de estándares mediante medios tradicionales
El W3C entra en acción
Resumen

Parte II. Diseño y creación

5. Marcado moderno
La vergüenza secreta del marcado incorrecto
¿Una reformulación de qué?
Resumen ejecutivo
¿Qué XHTML es el adecuado?
Diez razones para realizar la conversión a XHTML
Cinco razones para no cambiar a XHTML

6. XHTML: la reestructuración de la Web
Conversión a XHTML: reglas sencillas, directrices simples
El DOCTYPE y el espacio de nombres correctos
Declare su tipo de contenido
Etiquetas en minúscula
Todos los valores de atributo entre comillas
Todos los atributos requieren valores
Cierre todas las etiquetas
Cierre también las etiquetas vacías
No incluya guiones dobles en los comentarios
Codifique todos los caracteres < y &
Resumen ejecutivo: las reglas de XHTML
Codificación de caracteres
Unicode y otros conjuntos de caracteres
Una cura estructural recomendada para todos
Cómo marcar un documento para que tenga sentido, no estilo
Color dentro de los contornos
Elementos visuales y estructura

7. Páginas más firmes y compactas: estructura y metaestructura en marcado estricto e híbrido
¿Todos los elementos deben ser estructurales?
div, id y otros asistentes
Atrévase a hacer menos
Diseños híbridos y marcado compacto: ventajas e inconvenientes
Asignación de nombres a elementos incorrectos
Errores comunes del marcado híbrido
Los div son correctos
Enamorados del elemento id
Eliminación de celdas de tablas redundantes
Métodos desfasados
El año del mapa
El método de cortar y trocear
En defensa de los diseños de tablas de navegación
Los detalles redundantes de las tablas redundantemente detalladas
La llegada de la CSS incorrecta
Un paso adelante

8. Ejemplos de XHTML: un diseño híbrido (parte I)
Ventajas de los métodos de transición utilizados en estos capítulos
Hojas de estilo en lugar de JavaScript
Enfoque básico (resumen)
Tablas separadas: ventajas de accesibilidad y CSS
El qué y el por qué del vínculo para ignorar la navegación
Atributos id adicionales
Marcado de primera pasada: igual que el marcado de última pasada
Marcado de navegación: la primera tabla
Presentación, semántica, pureza y pecado
Marcado de contenido: la segunda tabla

9. Conceptos básicos de CSS
Presentación de CSS
Ventajas de CSS
Anatomía de estilos
Selectores, declaraciones, propiedades y valores
Declaraciones múltiples
Espacio en blanco y diferencia entre mayúsculas y minúsculas
Valores alternativos y genéricos
Selectores agrupados
La herencia y sus descontentos
Selectores contextuales (descendientes)
Selectores id y selectores id contextuales
Selectores de clase
Combinación de selectores para crear sofisticados efectos de diseño
Estilos externos, incrustados y en línea
Hojas de estilo externas
Estilos en línea
El método de diseño 'El mejor caso posible'
De estilos incrustados a estilos externos: el método de las dos hojas
Referencias de archivo absolutas y relativas
Ventajas de ambos métodos

10. CSS en acción: un diseño híbrido (parte II)
Preparación de las imágenes
Establecimiento de parámetros básicos
Estilos generales, más sobre abreviaturas y márgenes
Cómo ocultar y bloquear
Aplicación de color a los vínculos (presentación de las pseudoclases)
Introducción de otros elementos comunes
Información adicional sobre tamaños de fuente
Disposición de la división de las páginas
Elementos de navegación: primera pasada
CSS de la barra de navegación: primer intento, segunda pasada
CSS de la barra de navegación: pasada final
Últimos pasos: estilos externos y el efecto 'Usted está aquí'
11. Cómo trabajar con navegadores (parte I). Conmutaciónde DOCTYPE y modo Estándares
La saga de conmutadores DOCTYPE
Un interruptor para activar y desactivar estándares
La aparición del interruptor
Control del rendimiento de los navegadores: el conmutador DOCTYPE
Tres modos para la hermana Sara
DOCTYPE completos e incompletos
Listado completo de DOCTYPE XHTML completos
Celebremos la diversidad de navegadores (o al menos aprendamos a vivir con ella)
El problema del hueco de las imágenes en Gecko
De 'Viva la diferencia' a 'Esto es una mier...'
12. Cómo trabajar con navegadores (parte II). Modelosde cuadro, fallos y soluciones
El modelo de cuadro y sus descontentos
Funcionamiento del modelo de cuadro
Fallos del modelo de cuadro
El problema del modelo de cuadro: seguridad de las CSS por motivos democráticos
El error del espacio en blanco en IE/Windows
El error float en IE6/Windows
Aférrese a los viejos valores
Corregido con una secuencia de comandos
Flash y QuickTime: ¿objetos de deseo?
Objetos incrustados: una historia de orgullo y venganza
Incrustación de objetos multimedia y compatibilidad con estándares
Una pega: fallos de objetos
Un mundo de soluciones
13. Cómo trabajar con navegadores (parte III). Tipografía
El tamaño importa
Control de usuario
Miedos de la vieja escuela
Puntos de diferencia
Al fin un tamaño estándar pero, ¿por cuánto tiempo?
Todo lo bueno desaparece con un clic
La reacción equivocada al cambio en los navegadores
Chimera y Safari: magnífico rendimiento, avergonzados por el tamaño
La angustia de las emes
Opciones del usuario y unidades eme
Los píxeles demuestran que los píxeles funcionan
La unidad más pequeña: absolutamente relativo
El problema con los píxeles
El método de las palabras clave de tamaños de fuentes
Por qué las palabras clave superan a emes y porcentajes
Problemas iniciales con las implementaciones de palabras clave
Las palabras clave crecen: el método Fahrner
En busca de la fuente utilizable
14. Conceptos básicos de accesibilidad
Acceso mediante libros
Confusión extendida
El genio metió el pie
La ley y el diseño
La Section 508
Mitos de accesibilidad desenmascarados
Mito: la accesibilidad obliga a crear dos versiones de un sitio
Mito: una versión de sólo texto satisface el requisito de acceso igualitario o equivalente
Mito: la accesibilidad cuesta demasiado
Mito: la accesibilidad obliga a crear diseños primitivos y simples
Mito: según la Section 508, los sitios deben tener el mismo aspecto en todos los navegadores y agentes de usuario
Mito: la accesibilidad es sólo para discapacitados
Mito: Dreamweaver MX, Bobby de Watchfire o cualquier otra herramienta resuelve todos los problemas
Mito: los diseñadores pueden ignorar las leyes de accesibilidad si los clientes se lo piden
Consejos de accesibilidad, elemento a elemento
Imágenes
QuickTime de Apple y otros medios de reproducción de vídeo
Macromedia Flash 4/5
Macromedia Flash MX
Color
CSS
Imágenes cambiantes y otros comportamientos de secuencia de comandos
Formularios
Mapas de imágenes
Diseños de tablas
Uso de tablas para datos
Marcos, subprogramas
Elementos intermitentes o parpadeantes
Herramientas de la profesión
Cómo utilizar Bobby
Listas de comprobación
Nuestro buen amigo el atributo tabindex
Cómo planificar el acceso: ventajas
El acceso a nuestro servicio
15. Cómo trabajar con secuencias de comandos basadas en DOM
Presentación del DOM
Un método estándar para que las páginas Web se comporten como aplicaciones
¿Dónde funciona?
Desaparecidos en la interacción: entornos no basados en DOM
Los detalles del DOM
Por favor DOM, no les hagas daño
Cómo funciona
Cómo mostrar y ocultar
Combinación de mostrar/ocultar con otras técnicas
Menús dinámicos (desplegables y expandibles)
Conmutadores de estilo: ayudan en el acceso y ofrecen opciones
¿Más DOM por venir?
16. Un cambio de diseño en CSS
Definición de objetivos
Carácter de marca
Los diez principales objetivos
Método y locura
Definición de los parámetros básicos
Instalación de la barra lateral
La parte de posicionamiento
Creación de barras de color
Un espacio para el contenido
Diseño basado en reglas
Un botón Inicio con efectos CSS de imagen cambiante
La sustitución de imágenes de Fahrner (FIR)
Usos adicionales de FIR
Una barra de navegación CSS/XHTML
Cómo añadir el estilo
Puntos de clic y rellenos de color: estética y accesibilidad
Retoques finales

Parte III. Apéndice

Navegadores modernos: el bueno, el feo y el malo
Navegadores compatibles: la primera ola
Opera 7
MSIE5+/Macintosh
Netscape 6+
Mozilla 1.0
Safari
MSIE6/Windows
MSIE5.5/Windows
MSIE5/Windows
Netscape 4
MSIE4

Índice alfabético