HTML5 Y CSS3 Revolucione el diseño de sus sitios web (4a edición)

Presentación

Es necesario que los diseñadores web dominen dos lenguajes fundamentales a la hora de crear sitios web: el HTML (HyperText Markup Language) y el CSS (Cascading Style Sheets). Las últimas versiones de estos dos lenguajes, el HTML5 y el CSS3, revolucionarán la forma de crear sitios web ofreciendo nuevas posibilidades de estructura, formato y composición.

Este libro va dirigido a diseñadores de sitios web y diseñadores gráficos con conocimientos sobre HTML 4 y CSS 2.1 que quieran evolucionar en su manera de trabajar en la creación de sitios que integren esos nuevos estándares.

En el apartado dedicado al HTML5 se estudiará la nueva sintaxis, los nuevos elementos de estructura semántica (para el encabezado, las secciones, el menú de navegación, etc.), así como los formularios interactivos.

En el apartado de CSS3, el lector aprenderá a usar los nuevos selectores, el formato de texto y los contenedores (sombras, bordes redondeados, degradados, bordes con diseños, etc.).

También podrá descubrir el enorme potencial de los nuevos efectos de transformación, transición y animación y la inserción nativa de elementos multimedia (audio y vídeo).

Se ha dedicado un capítulo al Diseño web flexible (Responsive Web Design), que permite adaptar los sitios web a los diferentes soportes de difusión (pantallas de ordenador, tabletas táctiles y smartphones).

Por último, se abordará una de las novedades de las CSS3: el uso del módulo Flexbox que va a revolucionar la concepción de los sitios web facilitando la creación de diseños evolucionados y flexibles. Terminaremos con los futuros y muy prometedores módulos CSS y muy prometedores para el diseño de sus páginas web: el diseño con rejillas, la utilización de las máscaras y el justificado del texto alrededor de imágenes.

Índice

Introducción

A. La creación de sitios web
B. Los lenguajes
C. El libro
1. 1. Para los diseñadores web
2. 2. El contenido

Capítulo 1: La evolución del HTML y del CSS

A. Breve historia de Internet
B. La evolución del HTML
1. 1. Las investigaciones del W3C
2. 2. El HyperText Markup Language
3. 3. La evolución con el XHTML
4. 4. Los disidentes del WHATWG
5. 5. La llegada del HTML5
6. 6. Los documentos HTML5 del W3C
7. 7. ¿Podemos usar HTML5?
8. 8. Interpretación del HTML5 por los anteriores navegadores
9. 9. Este libro y la evolución del HTML5
C. La evolución del CSS
1. 1. La aparición del CSS
2. 2. La utilidad del CSS
3. 3. Las versiones del CSS
4. 4. La llegada del CSS3
5. 5. La llegada del CSS4

Capítulo 2: La nueva sintaxis HTML5

A. El doctype
1. 1. La sintaxis en HTML 4 y XHTML 1.0
2. 2. La sintaxis en HTML5
B. El documento HTML
1. 1. La sintaxis en XHTML 1.0
2. 2. La sintaxis en HTML5
C. La codificación de los caracteres
1. 1. La sintaxis en HTML4 y XHTML 1.0
2. 2. La sintaxis en HTML5
D. Los scripts
E. Los estilos CSS
F. La sintaxis de los elementos
1. 1. Objetivos
2. 2. Las comillas
3. 3. Los elementos con una única etiqueta de apertura
4. 4. Los elementos con etiqueta de cierre facultativa
5. 5. Las mayúsculas y minúsculas
6. 6. Los atributos boleanos
7. 7. Los elementos HTML, HEAD y BODY
8. 8. La sintaxis recomendada
G. Los elementos obsoletos
H. Los elementos redefinidos
I. Los atributos obsoletos
J. Los nuevos elementos
1. 1. El elemento <time>
2. 2. El elemento <mark>
3. 3. El elemento <meter>
4. 4. Los elementos <details> y <summary>
5. 5. El elemento <wbr>
6. 6. El elemento <bdi>
7. 7. El elemento <progress>
8. 8. Los elementos relacionados con los idiomas asiáticos
9. 9. Los elementos <figure> y <figcaption>
10. 10. Los atributos srcset y sizes para el elemento img
11. 11. El elemento dialog
K. Tipos de contenido de los elementos
L. La visualización de los elementos
1. 1. En HTML4
2. 2. En HTML5

Capítulo 3: Los elementos de la estructura en HTML5

A. Los elementos de la estructura en HTML4
1. 1. Las cajas <div>
2. 2. La "divitis"
3. 3. Un contenido no semántico
B. Los elementos de la estructura en HTML5
1. 1. Los nuevos elementos de la estructura
2. 2. El elemento <header>
3. 3. El elemento <footer>
4. 4. El elemento <nav>
5. 5. El elemento <section>
6. 6. El elemento <article>
7. 7. El elemento <aside>
8. 8. El elemento <main>
9. 9. Anidación de los elementos <header> y <footer>
10. 10. Las cajas <div>
C. El atributo semántico "role"
D. Ejemplos de estructura en HTML5
1. 1. Una estructura simple
2. 2. Una estructura más elaborada
3. 3. La estructura de un artículo
E. Las técnicas de formato

Capítulo 4: El camino hacia el CSS3

A. Análisis de la situación
1. 1. La evolución de los módulos
2. 2. Consultar las especificaciones
B. Los prefijos para los navegadores
1. 1. La implementación de las propiedades
2. 2. Los navegadores y el CSS3
3. 3. Un generador de prefijos JavaScript
C. Cómo interpretan los navegadores el CSS3
1. 1. ¿Qué propiedades podemos usar?
2. 2. When can I use
3. 3. css3test

Capítulo 5: Los nuevos selectores de CSS3

A. Los selectores CSS 2
1. 1. La declaración del CSS
2. 2. Los selectores
3. 3. Las pseudo-clases
4. 4. Los pseudo-elementos
5. 5. La agrupación de selectores
B. Los nuevos selectores CSS3
C. El selector general de elementos adyacentes
D. El selector de atributo
1. 1. Funcionalidad
2. 2. Los vínculos hacia una dirección de e-mail
3. 3. Los vínculos de descarga
E. La pseudo-clase de vínculo
1. 1. Funcionalidad
2. 2. La aplicación
3. 3. Resultado
F. Las pseudo-clases estructurales
1. 1. Funcionalidad
2. 2. La raíz de la página
3. 3. El último elemento hijo
4. 4. Los elementos descendientes
5. 5. Los últimos hijos de un elemento
6. 6. Los primeros y los últimos elementos de un tipo determinado
7. 7. Los primeros elementos de un tipo determinado
8. 8. Los elementos únicos
9. 9. Los elementos hijo único de un tipo determinado
10. 10. Los elementos vacíos
11. 11. Todos los elementos excepto el elemento seleccionado

Capítulo 6: Los estilos de caja en CSS3

A. Las nuevas propiedades CSS3
B. El tamaño de las cajas
1. 1. Con CSS 2.1
2. 2. Con CSS3
C. El desbordamiento de contenido
D. Los colores de fondo
1. 1. El módulo de los colores
2. 2. El modo HSB
3. 3. El modo HSB con transparencia
4. 4. El modo RGB con transparencia
5. 5. Un editor RGBA en línea
6. 6. La transparencia
E. Situación actual de fondos y bordes
F. Los bordes redondeados
1. 1. Bordes idénticos
2. 2. Bordes redondeados diferentes
3. 3. Elipses en las esquinas
4. 4. Los generadores en línea
G. Los bordes imaginativos
1. 1. La sintaxis del W3C
2. 2. Los generadores en línea
H. Las sombras
1. 1. Situación actual
2. 2. Crear una sombra
3. 3. Varios ejemplos de sombras
4. 4. Aplicar varias sombras
5. 5. Los generadores en línea
I. Los degradados
1. 1. Situación actual
2. 2. Los degradados lineales
3. 3. Los degradados radiales
4. 4. Los degradados repetitivos
5. 5. Los generadores en línea
J. Los fondos múltiples
1. 1. Funcionalidad
2. 2. Un ejemplo sencillo
K. Otras propiedades del fondo
1. 1. Las propiedades
2. 2. La posición inicial de una imagen
3. 3. Recortar una imagen
4. 4. El tamaño del fondo
L. Los generadores CSS3 en línea
1. 1. Funcionalidad
2. 2. WestCIV
3. 3. CSS 3.0 Maker
4. 4. CSS3 Playground
5. 5. CSS3 Generator
6. 6. Layer Style
M. Ejemplo de una tabla con bordes redondeados
1. 1. Funcionalidad
2. 2. La estructura de la tabla
3. 3. El diseño de la tabla
4. 4. Las celdas de la tabla
5. 5. Las celdas del encabezado
6. 6. Celdas redondeadas
7. 7. La activación de las filas
N. Ejemplo de sombra para una página

Capítulo 7: HTML5 y CSS3 aplicados al texto

A. Los elementos de texto obsoletos
1. 1. La especificación del HTML5
2. 2. Los elementos en desuso o mal utilizados
3. 3. El formato del texto
B. Los elementos de texto redefinidos
1. 1. La especificación del HTML5
2. 2. El elemento <b>
3. 3. El elemento <strong>
4. 4. El elemento <i>
5. 5. El elemento <em>
6. 6. El elemento <small>
7. 7. El elemento <cite>
8. 8. El elemento <dl>
9. 9. El elemento <ol>
10. 10. El elemento <hr>
11. 11. El elemento <a>
12. 12. El elemento <s>
13. 13. El elemento <u>
C. Distribución del texto en columnas con CSS3
D. La maquetación del contenido con las CSS3
1. 1. El módulo CSS3
2. 2. Las propiedades reconocidas
3. 3. Las propiedades no reconocidas
4. 4. Dividir palabras
5. 5. La cesura
6. 6. La cesura y el desbordamiento
E. Embellecer el texto con CSS3
1. 1. Módulo CSS
2. 2. Las líneas de decoración
3. 3. Propiedades de línea no reconocidas
4. 4. Enfatizar el texto
5. 5. Sombra sobre el texto
F. La tipografía con CSS3
1. 1. El módulo CSS
2. 2. Las familias de caracteres
3. 3. El grosor de los caracteres
4. 4. El ancho de los caracteres
5. 5. Los estilos de caracteres
6. 6. El tamaño de los caracteres
7. 7. Ajustar el tamaño de los caracteres
8. 8. Las fuentes tipográficas
9. 9. La regla @font-face
10. 10. Las tipografías web en línea
11. 11. Las propiedades avanzadas

Capítulo 8: HTML5 y CSS3 para los formularios

A. Funcionalidad
B. Los métodos de envío
C. El elemento <form>
D. Los grupos de campos
E. Los nuevos campos
1. 1. La visualización de los nuevos campos
2. 2. Los campos para las direcciones de e-mail
3. 3. El campo para los números de teléfono
4. 4. El campo para las URL
5. 5. Los campos para las fechas y las horas
6. 6. El campo para los valores numéricos
7. 7. Las barras de selección con cursor
8. 8. Los campos de búsqueda
9. 9. El campo de introducción de datos con sugerencias
10. 10. La selección de un color
11. 11. Las claves públicas
F. La validación de los formularios
1. 1. La validación del lado del cliente
2. 2. Insertar un campo obligatorio
3. 3. Los valores autorizados
G. Las expresiones regulares
1. 1. Las letras autorizadas
2. 2. Un intervalo de letras autorizadas
3. 3. Otras letras a excepción de
4. 4. Las mayúsculas y minúsculas
5. 5. La condición O
6. 6. Las palabras autorizadas
7. 7. Autorizar cifras
8. 8. Un número limitado de caracteres
9. 9. Los valores múltiples
10. 10. Los parámetros especiales
H. Las ayudas para los usuarios de un formulario
1. 1. La ayuda para completar
2. 2. Activar un campo
3. 3. El completado automático
4. 4. Redimensionar un campo
I. Las pseudo-clases para los formularios
1. 1. Las funcionalidades de las pseudo-clases
2. 2. El formulario y los estilos CSS
3. 3. Resultado
4. 4. Otra pseudo-clase
5. 5. Los campos obligatorios y facultativos
6. 6. El formato de :focus
J. La validación de los datos introducidos
1. 1. Funcionalidad
2. 2. El formulario
3. 3. El diseño del formulario
4. 4. Los campos no válidos
5. 5. Los mensajes de error
6. 6. Los campos válidos
7. 7. Los valores fuera de los límites
K. Un primer ejemplo de formulario sencillo
1. 1. Objetivo
2. 2. La estructura del formulario
3. 3. Los estilos generales
4. 4. El fondo de la página
5. 5. El formulario
6. 6. Las etiquetas
7. 7. Los campos de inserción de datos
8. 8. El campo multilínea
9. 9. Los campos activos
10. 10. El botón de envío
L. Un segundo ejemplo de formulario muy sobrio
1. 1. Objetivo
2. 2. La estructura inicial del formulario
3. 3. La sombra del formulario
4. 4. El efecto punteado
5. 5. El título del formulario
6. 6. Los trazos decorativos
7. 7. Los campos de inserción de datos
8. 8. El botón de conexión
9. 9. El uso del botón
10. 10. Los demás vínculos
11. 11. El resultado final
M. Un ejemplo de formulario interactivo
1. 1. Objetivo
2. 2. La estructura inicial del formulario
3. 3. Las opciones adicionales
4. 4. El botón de envío
5. 5. El mensaje de confirmación
6. 6. Los estilos generales
7. 7. El diseño del formulario
8. 8. Las etiquetas
9. 9. Los campos de inserción de datos
10. 10. El menú desplegable
11. 11. El botón de envío
12. 12. La gestión de las opciones
13. 13. La visualización inicial
14. 14. Visualizar las opciones
15. 15. Ocultar las opciones
16. 16. El mensaje de confirmación
N. Un último ejemplo de formulario elaborado
1. 1. Objetivo
2. 2. La estructura del formulario
3. 3. Los objetos HTML5
4. 4. El código completo del formulario
5. 5. La visualización sin estilos
6. 6. El diseño general
7. 7. El diseño del formulario
8. 8. El formato de las secciones
9. 9. El diseño de los elementos de la lista
10. 10. El diseño de las etiquetas
11. 11. Los campos de tipo <input>
12. 12. El botón de envío del formulario
O. Crear botones con símbolos
1. 1. Objetivo
2. 2. El formulario
3. 3. Crear una clase para los botones
4. 4. El pseudo-elemento ::before
5. 5. El contenido del pseudo-elemento ::before
6. 6. Aplicar las clases
7. 7. La visualización del formulario
8. 8. Otros ejemplos similares
P. Los generadores de botones en línea
1. 1. Funcionalidad
2. 2. CSS3 Button
3. 3. CSS3 Button Generator
4. 4. CSS Drive Button Generator

Capítulo 9: Las transformaciones CSS3

A. Situación actual y objetivos
B. La transformación
1. 1. La propiedad
2. 2. El punto de referencia
C. El desplazamiento
1. 1. En los dos ejes
2. 2. En un eje solamente
D. El cambio de escala
1. 1. La escala proporcional
2. 2. La escala no proporcional
3. 3. El cambio de escala en una única dirección
E. La rotación
F. La deformación
1. 1. La deformación en los dos ejes
2. 2. La deformación en un único eje
G. Aplicar todas las transformaciones
H. Los generadores en línea
1. 1. CSS 3.0 Maker
2. 2. CSS3 Generator
3. 3. WestCIV
I. Un menú de ejemplo
1. 1. Objetivo
2. 2. La estructura del menú
3. 3. El diseño
4. 4. El resultado visual:
J. Ejemplo de una galería Polaroid
1. 1. Objetivo
2. 2. La estructura de la galería
3. 3. El diseño de la galería
4. 4. Los estilos para las fotografías
5. 5. La transformación
6. 6. El resultado visual
K. Ejemplo de una imagen con relieve
1. 1. Objetivo
2. 2. La fotografía
3. 3. La sombra bajo la fotografía

Capítulo 10: Las transiciones con CSS3

A. Situación actual y objetivos
B. Aplicar transiciones
1. 1. Las transiciones
2. 2. Las propiedades CSS
C. Aplicar una transición de desplazamiento
1. 1. Objetivo
2. 2. El código necesario
3. 3. Las propiedades de la transición
4. 4. El resultado
D. Otras propiedades de las transiciones
1. 1. El movimiento
2. 2. El inicio de la transición
3. 3. La sintaxis abreviada
4. 4. Las transiciones múltiples
E. Los generadores en línea
1. 1. CSS3 Generator
2. 2. CSS 3.0 Maker
3. 3. Crear las curvas de Bézier
F. Ejemplo de un menú de navegación interactivo
1. 1. Objetivo
2. 2. El diseño del formulario
3. 3. Las transiciones
4. 4. La visualización
G. Ejemplo de un diaporama interactivo
1. 1. Objetivo
2. 2. La estructura del diaporama
3. 3. Las transformaciones
4. 4. Las transiciones
5. 5. La visualización
H. Ejemplo de un menú de navegación "con cajones"
1. 1. Objetivo
2. 2. La estructura del menú de navegación
3. 3. El diseño del menú
4. 4. El diseño de los cajones
5. 5. La visualización inicial
6. 6. Las transiciones
7. 7. La visualización
8. 8. Los menús de navegación "flashy"
I. Ejemplo de interfaz en "acordeón"
1. 1. Objetivo
2. 2. La estructura del "acordeón"
3. 3. El diseño del "acordeón"
4. 4. El diseño de las zonas de visualización desplegables
5. 5. La visualización

Capítulo 11: Las animaciones en CSS3

A. Situación actual y objetivos
B. La creación de una animación
C. Un desplazamiento simple
1. 1. Objetivo
2. 2. La estructura
3. 3. La animación
4. 4. La visualización
D. Rotación y transparencia
1. 1. Objetivo
2. 2. La estructura
3. 3. La animación
4. 4. La visualización
E. Un formulario que parpadee
1. 1. Objetivo
2. 2. La estructura del formulario
3. 3. El diseño
4. 4. La animación
5. 5. La visualización
F. Una ventana modal
1. 1. Objetivo
2. 2. El botón
3. 3. La ventana modal
4. 4. El botón de cierre
5. 5. Ocultar el cuerpo de la página
6. 6. La animación de apertura
7. 7. Activar la animación de apertura
8. 8. Aplicar la ocultación
9. 9. La animación de cierre
10. 10. Activar la animación de cierre
11. 11. El código completo
12. 12. La visualización de la página

Capítulo 12: Los elementos multimedia: audio y vídeo

A. Situación actual
1. 1. Insertar elementos multimedia
2. 2. Los formatos y los códecs para la Web
B. Insertar audio
1. 1. El elemento audio
2. 2. Los controles de audio
3. 3. La apariencia del reproductor de audio
4. 4. Los atributos para el audio
5. 5. La fuente del audio
6. 6. Diseñe sus propios controles de audio
7. 7. Los antiguos navegadores
C. Insertar vídeo
1. 1. El elemento vídeo
2. 2. Los atributos para el vídeo
3. 3. La apariencia del reproductor de vídeo
4. 4. Los formatos de vídeo
5. 5. Convertir vídeos

Capítulo 13: El diseño web flexible

A. Situación actual y objetivos
B. Las búsquedas "Media queries"
1. 1. Objetivo
2. 2. Con el HTML 4 y las CSS 2.1
3. 3. Los criterios de búsqueda de Media Queries en CSS3
4. 4. La sintaxis de las búsquedas Media Queries
5. 5. Los valores máximos y mínimos
6. 6. Los operadores lógicos
C. El tamaño de las pantallas
1. 1. La problemática actual
2. 2. El tamaño del viewport
3. 3. El zoom de la pantalla
4. 4. El tamaño y la emulación de la pantalla
D. Las estructuras flexibles
1. 1. Las técnicas
2. 2. Un ejemplo sencillo
3. 3. Ejemplo de un sitio web sencillo
4. 4. Aplicar un diseño adaptable sencillo
E. Las imágenes flexibles
1. 1. El desbordamiento de las imágenes
2. 2. Imponer un ancho máximo
F. Crear un diseño flexible
1. 1. Las dos estrategias
2. 2. Diseñar un sitio web adaptable
3. 3. Otros ejemplos de diseño web adaptable
G. El sitio web Food Sense
1. 1. La visualización
2. 2. La estructura principal
3. 3. El viewport
4. 4. La visualización para las pantallas de mayor tamaño
5. 5. La visualización para las tabletas táctiles
6. 6. La visualización para los smartphones

Capítulo 14: El diseño con Flexbox

A. Los objetivos
B. Las propiedades para el contenedor Flexbox
1. 1. El contenedor
2. 2. La dirección de la vista
3. 3. El salto de línea o de columna
4. 4. La propiedad con sintaxis corta
5. 5. Alinear y centrar en el eje principal
6. 6. Alinear y centrar en el eje secundario
7. 7. La alineación y el salto de línea
C. Las propiedades para los ítems Flexbox
1. 1. El orden de presentación
2. 2. La alineación de un ítem Flexbox
3. 3. Aumentar el tamaño de los ítems Flexbox
4. 4. Disminuir el tamaño de los ítems Flexbox
5. 5. Especificar el tamaño de los ítems
6. 6. La propiedad con sintaxis abreviada
D. Elaboración de un diseño Flexbox
1. 1. Los objetivos
2. 2. El contenedor principal
3. 3. El encabezado
4. 4. La barra de navegación
5. 5. La parte principal
6. 6. Las sidebars
7. 7. El contenido de la parte central
8. 8. El pie de página
9. 9. El código completo
E. Elaboración de un diseño Flexbox adaptativo
1. 1. Los objetivos
2. 2. La regla @media
3. 3. La barra de navegación
4. 4. La vista de la parte principal
5. 5. La vista en las sidebars
6. 6. Las reglas CSS para una página adaptativa

Capítulo 15: Los otros módulos CSS3

A. La evolución de los módulos CSS
B. El diseño con una rejilla
C. Utilizar máscaras
D. Justificar texto alrededor de un objeto
índice

Autor

Christophe AUBRYMás información

Responsable pedagógico en un centro de formation y formador en las tecnologías Web y las Artes Gráficas durante más de quince años, Christophe Aubry es hoy directivo de la sociedad netPlume especializada en la redacción pedagógica y creación de sitio en internet. Autor de numerosos libros y vídeos de Ediciones ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), siempre está al corriente de las novedades en relación a la concepción de sitios Web gracias a su atenta mirando del entorno tecnológico.

Características

Nivel Iniciado a Medio
Número de páginas 446 páginas
Publicación noviembre 2019

Encuadernación rústica - 17 x 21 cm
ISBN: 978-2-409-02255-5
EAN: 9782409022555
Ref. ENI: OWT45HTM

Nivel Medio a Iniciado
Publicación noviembre 2019

HTML
ISBN: 978-2-409-02256-2
EAN: 9782409022562
Ref. ENI: LNOWT45HTM

Presentación

Índice

Autor

Christophe AUBRYMás información

Características

Novedades