HTML5 y CSS3 Revolucione el diseño de sus sitios web (3ª edición)

Transcripción

1 Introducción A. La creación de sitios web 18 B. Los lenguajes 18 C. El libro Para los diseñadores web El contenido 19 Capítulo 1: La evolución del HTML y del CSS A. Breve historia de Internet 22 B. La evolución del HTML Las investigaciones del W3C El HyperText Markup Language La evolución con el XHTML Los disidentes del WHATWG La llegada del HTML Los documentos HTML5 del W3C Podemos usar HTML5? Interpretación del HTML5 por los anteriores navegadores Este libro y la evolución del HTML5 37 C. La evolución del CSS La aparición del CSS La utilidad del CSS Las versiones del CSS La llegada del CSS La llegada del CSS4 39 1/21

2 Capítulo 2: La nueva sintaxis HTML5 A. El doctype La sintaxis en HTML 4 y XHTML La sintaxis en HTML5 42 B. El documento HTML La sintaxis en XHTML La sintaxis en HTML5 43 C. La codificación de los caracteres La sintaxis en HTML4 y XHTML La sintaxis en HTML5 43 D. Los scripts 44 E. Los estilos CSS 44 F. La sintaxis de los elementos Objetivos Las comillas Los elementos con una única etiqueta de apertura Los elementos con etiqueta de cierre facultativa Las mayúsculas y minúsculas Los atributos boleanos Los elementos HTML, HEAD y BODY La sintaxis recomendada 47 G. Los elementos obsoletos 47 H. Los elementos redefinidos 48 I. Los atributos obsoletos 48 2/21

3 J. Los nuevos elementos El elemento <time> El elemento <mark> El elemento <meter> Los elementos <details> y <summary> El elemento <wbr> El elemento <bdi> El elemento <progress> Los elementos relacionados con los idiomas asiáticos Los elementos <figure> y <figcaption> 53 K. Tipos de contenido de los elementos 53 L. La visualización de los elementos En HTML En HTML5 55 Capítulo 3: Los elementos de la estructura en HTML5 A. Los elementos de la estructura en HTML Las cajas <div> La "divitis" Un contenido no semántico 59 B. Los elementos de la estructura en HTML Los nuevos elementos de la estructura El elemento <header> El elemento <footer> El elemento <nav> El elemento <section> El elemento <article> El elemento <aside> 61 3/21

4 8. El elemento <main> Las cajas <div> 62 C. El atributo semántico "role" 63 D. Ejemplos de estructura en HTML Una estructura simple Una estructura más elaborada La estructura de un artículo 66 E. Las técnicas de formato 66 Capítulo 4: El camino hacia el CSS3 A. Análisis de la situación La evolución de los módulos Consultar las especificaciones 72 B. Los prefijos para los navegadores La implementación de las propiedades Los navegadores y el CSS Un generador de prefijos JavaScript 75 C. Cómo interpretan los navegadores el CSS Qué propiedades podemos usar? When can I use css3test 79 Capítulo 5: Los nuevos selectores de CSS3 A. Los selectores CSS Funcionalidad 82 4/21

5 2. Los selectores Las pseudo-clases Los pseudo-elementos La agrupación de selectores 83 B. Los nuevos selectores CSS3 83 C. El selector general de elementos adyacentes 84 D. El selector de atributo Funcionalidad Los vínculos hacia una dirección de Los vínculos de descarga 86 E. La pseudo-clase de vínculo Funcionalidad La aplicación Resultado 88 F. Las pseudo-clases estructurales Funcionalidad La raíz de la página El último elemento hijo Los elementos descendientes Los últimos hijos de un elemento Los primeros y los últimos elementos de un tipo determinado Los primeros elementos de un tipo determinado Los elementos únicos Los elementos hijo único de un tipo determinado Los elementos vacíos Todos los elementos excepto el elemento seleccionado 102 Capítulo 6: Los estilos de caja en CSS3 5/21

6 A. Las nuevas propiedades CSS3 104 B. El tamaño de las cajas Con CSS Con CSS3 105 C. El desbordamiento de contenido 106 D. Los colores de fondo El módulo de los colores El modo HSB El modo HSB con transparencia El modo RGB con transparencia Un editor RGBA en línea La transparencia 111 E. Situación actual de fondos y bordes 111 F. Los bordes redondeados Bordes idénticos Bordes redondeados diferentes Elipses en las esquinas Los generadores en línea 115 G. Los bordes imaginativos La sintaxis del W3C Los generadores en línea 118 H. Las sombras Situación actual Crear una sombra Varios ejemplos de sombras Aplicar varias sombras 122 6/21

7 5. Los generadores en línea 123 I. Los degradados Situación actual Los degradados lineales Los degradados radiales Los degradados repetitivos Los generadores en línea 129 J. Los fondos múltiples Funcionalidad Un ejemplo sencillo 133 K. Otras propiedades del fondo Las propiedades La posición inicial de una imagen Recortar una imagen El tamaño del fondo 138 L. Los generadores CSS3 en línea Funcionalidad WestCIV CSS 3.0 Maker CSS3 Generator CSS3 Playground CSS3 Generator Layer Style 145 M. Ejemplo de una tabla con bordes redondeados Funcionalidad La estructura de la tabla El diseño de la tabla Las celdas de la tabla Las celdas del encabezado Celdas redondeadas 150 7/21

8 7. La activación de las filas 151 N. Ejemplo de sombra para una página 151 Capítulo 7: HTML5 y CSS3 aplicados al texto A. Los elementos de texto obsoletos La especificación del HTML Los elementos en desuso o mal utilizados El formato del texto 154 B. Los elementos de texto redefinidos La especificación del HTML El elemento <b> El elemento <strong> El elemento <i> El elemento <em> El elemento <small> El elemento <cite> El elemento <dl> El elemento <ol> El elemento <hr> El elemento <a> El elemento <s> El elemento <u> 158 C. Distribución del texto en columnas con CSS3 158 D. La maquetación del contenido con las CSS El módulo CSS Las propiedades reconocidas Las propiedades no reconocidas Dividir palabras 163 8/21

9 5. La cesura La cesura y el desbordamiento 166 E. Embellecer el texto con CSS Módulo CSS Las líneas de decoración Propiedades de línea no reconocidas Enfatizar el texto Sombra sobre el texto 171 F. La tipografía con CSS El módulo CSS Las familias de caracteres El grosor de los caracteres El ancho de los caracteres Los estilos de caracteres El tamaño de los caracteres Ajustar el tamaño de los caracteres Las fuentes tipográficas La Las tipografías web en línea Las propiedades avanzadas 183 G. La tipografía avanzada Situación actual Otras propiedades 184 Capítulo 8: HTML5 y CSS3 para los formularios A. Funcionalidad 186 B. Los métodos de envío 186 9/21

10 C. El elemento <form> 186 D. Los nuevos campos La visualización de los nuevos campos Los campos para las direcciones de El campo para los números de teléfono El campo para las URL Los campos para las fechas y las horas El campo para los valores numéricos Las barras de selección con cursor Los campos de búsqueda El campo de introducción de datos con sugerencias La selección de un color Las claves públicas 191 E. La validación de los formularios La validación del lado del cliente Insertar un campo obligatorio Los valores autorizados 192 F. Las expresiones regulares Las letras autorizadas Un intervalo de letras autorizadas Otras letras a excepción de Las mayúsculas y minúsculas La condición O Las palabras autorizadas Autorizar cifras Un número limitado de caracteres Los valores múltiples Los parámetros especiales 197 G. Las ayudas para los usuarios de un formulario La ayuda para completar /21

11 2. Activar un campo El completado automático Redimensionar un campo 199 H. Las pseudo-clases para los formularios Las funcionalidades de las pseudo-clases El formulario y los estilos CSS Resultado Otra pseudo-clase Los campos obligatorios y facultativos El formato de :focus 204 I. La validación de los datos introducidos Funcionalidad El formulario El diseño del formulario Los campos no válidos Los mensajes de error Los campos válidos Los valores fuera de los límites 210 J. Un primer ejemplo de formulario sencillo Objetivo La estructura del formulario Los estilos generales El fondo de la página El formulario Las etiquetas Los campos de inserción de datos El campo multilínea Los campos activos El botón de envío 217 K. Un segundo ejemplo de formulario muy sobrio Objetivo /21

12 2. La estructura inicial del formulario La sombra del formulario El efecto punteado El título del formulario Los trazos decorativos Los campos de inserción de datos El botón de conexión El uso del botón Los demás vínculos El resultado final 226 L. Un ejemplo de formulario interactivo Objetivo La estructura inicial del formulario Las opciones adicionales El botón de envío El mensaje de confirmación Los estilos generales El diseño del formulario Las etiquetas Los campos de inserción de datos El menú desplegable El botón de envío La gestión de las opciones La visualización inicial Visualizar las opciones Ocultar las opciones El mensaje de confirmación 236 M. Un último ejemplo de formulario elaborado Objetivo La estructura del formulario Los objetos HTML El código completo del formulario La visualización sin estilos /21

13 6. El diseño general El diseño del formulario El formato de las secciones El diseño de los elementos de la lista El diseño de las etiquetas Los campos de tipo <input> El botón de envío del formulario 249 N. Crear botones con símbolos Objetivo El formulario Crear una clase para los botones El pseudo-elemento ::before El contenido del pseudo-elemento ::before Aplicar las clases La visualización del formulario Otros ejemplos similares 253 O. Los generadores de botones en línea Funcionalidad CSS3 Button CSS3 Button Generator CSS Drive Button Generator CSS Button Me 257 Capítulo 9: Las transformaciones CSS3 A. Situación actual y objetivos 260 B. La transformación La propiedad El punto de referencia /21

14 C. El desplazamiento En los dos ejes En un eje solamente 262 D. El cambio de escala La escala proporcional La escala no proporcional El cambio de escala en una única dirección 263 E. La rotación 263 F. La deformación La deformación en los dos ejes La deformación en un único eje 265 G. Aplicar todas las transformaciones 265 H. Los generadores en línea CSS 3.0 Maker CSS3 Generator WestCIV 267 I. Un menú de ejemplo Objetivo La estructura del menú El diseño El resultado visual: 268 J. Ejemplo de una galería Polaroid Objetivo La estructura de la galería El diseño de la galería Los estilos para las fotografías /21

15 5. La transformación El resultado visual 271 K. Ejemplo de una imagen con relieve Objetivo La fotografía La sombra bajo la fotografía 273 Capítulo 10: Las transiciones con CSS3 A. Situación actual y objetivos 278 B. Aplicar transiciones Las transiciones Las propiedades CSS 279 C. Aplicar una transición de desplazamiento Objetivo El código necesario Las propiedades de la transición El resultado 282 D. Otras propiedades de las transiciones El movimiento El inicio de la transición La sintaxis abreviada Las transiciones múltiples 285 E. Los generadores en línea CSS3 Generator CSS 3.0 Maker Crear las curvas de Bézier /21

16 F. Ejemplo de un menú de navegación interactivo Objetivo El diseño del formulario Las transiciones La visualización 290 G. Ejemplo de un diaporama interactivo Objetivo La estructura del diaporama Las transformaciones Las transiciones La visualización 294 H. Ejemplo de un menú de navegación "con cajones" Objetivo La estructura del menú de navegación El diseño del menú El diseño de los cajones La visualización inicial Las transiciones La visualización Los menús de navegación "flashy" 301 I. Ejemplo de interfaz en "acordeón" Objetivo La estructura del "acordeón" El diseño del "acordeón" El diseño de las zonas de visualización desplegables La visualización 303 Capítulo 11: Las animaciones en CSS3 16/21

17 A. Situación actual y objetivos 306 B. La creación de una animación 307 C. Un desplazamiento simple Objetivo La estructura La animación La visualización 310 D. Rotación y transparencia Objetivo La estructura La animación La visualización 311 E. Un formulario que parpadee Objetivo La estructura del formulario El diseño La animación La visualización 313 F. Una ventana modal Objetivo El botón La ventana modal El botón de cierre Ocultar el cuerpo de la página La animación de apertura Activar la animación de apertura Aplicar la ocultación La animación de cierre /21

18 10. Activar la animación de cierre El código completo La visualización de la página 323 Capítulo 12: Los elementos multimedia: audio y vídeo A. Situación actual 326 B. Insertar audio El elemento audio Los controles de audio La apariencia del reproductor de audio Los atributos para el audio Los formatos de audio Diseñe sus propios controles de audio Los antiguos navegadores 330 C. Insertar vídeo El elemento vídeo Los atributos para el vídeo La apariencia del reproductor de vídeo Los formatos de vídeo Convertir vídeos 333 Capítulo 13: El diseño web flexible A. Situación actual y objetivos 336 B. Las búsquedas "Media queries" Objetivo Con el HTML 4 y las CSS Los criterios de búsqueda de Media Queries en CSS /21

19 4. La sintaxis de las búsquedas Media Queries Los valores máximos y mínimos Los operadores lógicos Búsquedas para diferentes soportes 340 C. El tamaño de las pantallas La problemática actual El tamaño del viewport El zoom de la pantalla El tamaño y la emulación de la pantalla 345 D. Las estructuras flexibles Las técnicas Un ejemplo sencillo Ejemplo de un sitio web sencillo Aplicar un diseño adaptable sencillo Las plantillas flexibles 362 E. Las imágenes flexibles El desbordamiento de las imágenes Imponer un ancho máximo 363 F. Crear un diseño flexible Las dos estrategias Diseñar un sitio web adaptable Otros ejemplos de diseño web adaptable 368 G. El sitio web Food Sense La visualización La estructura principal El viewport La visualización para las pantallas de mayor tamaño La visualización para las tabletas táctiles La visualización para los smartphones /21

20 Capítulo 14: El diseño con Flexbox A. Los objetivos 384 B. Las propiedades para el contenedor Flexbox El contenedor La dirección de la vista El salto de línea o de columna La propiedad con sintaxis corta Alinear y centrar el eje principal Alinear y centrar en el eje secundario La alineación y el salto de línea 394 C. Las propiedades para los ítems Flexbox El orden de presentación La alineación de un ítem Flexbox Aumentar el tamaño de los ítems Flexbox Disminuir el tamaño de los ítems Flexbox Especificar el tamaño de los ítems La propiedad con sintaxis abreviada 404 D. Elaboración de un diseño Flexbox Los objetivos El contenedor principal El encabezado La barra de navegación La parte principal Las sidebars El contenido de la parte central El pie de página El código completo 412 E. Elaboración de un diseño Flexbox adaptativo Los objetivos /21

21 2. La La barra de navegación La vista de la parte principal La vista en las sidebars Las reglas CSS para una página adaptativa 418 Capítulo 15: Los otros módulos CSS3 A. Otros módulos CSS3 422 B. Módulos terminados (Completed) El módulo de los colores El módulo de los nombres de dominio El módulo de los estilos en línea 422 C. Módulos estables (Stable) El módulo de las reglas condicionales El módulo de las unidades El módulo de la cascada y la herencia 423 D. Módulos a prueba (Testing) El módulo para síntesis vocal El módulo para los tipos de escritura El módulo de las formas de disposición El módulo de las máscaras de imagen El módulo de los contadores El módulo de las particiones de página El módulo de las composiciones y mezclas El módulo de la sintaxis CSS El módulo de la interfaz de usuario El módulo de las formas de interfaz 424 índice /21