Introducción
- DTD y sintaxis XML (estructuración, comentarios).
- La estructura de un documento HTML: imágenes, hojas de estilo CSS, JavaScript.
- Semántica HTML: títulos, párrafos, enlaces, tablas, formularios, etc.
- El modelo de documento (DOM). El protocolo HTTP.
- Optimización de la ruta crítica de renderizado.
- Topografía de los conceptos y aportaciones de HTML5.
- Herramientas de desarrollo HTML5.
- Pruebas de compatibilidad, método de detección de HTML5.
Demostración
Descubra las posibilidades de HTML5 y las herramientas de desarrollo.
Nueva estructura
- Los elementos tradicionales que estructuran un documento HTML (doctype, html, head, body, meta...).
- Los elementos estructurales <nav>, <section>, <article>, <aside>, <header> y <footer>.
- Categorías de contenido: Metadatos, Flujo, Seccionado, Encabezado, Fraseado, Contenido incrustado e Interactivo.
- Las ventajas de estructurar las etiquetas para el SEO.
- Anidamiento y tipo de contenido.
Trabajo práctico
Configuración y validación de la estructura de un documento HTML5.
Las nuevas etiquetas HTML
- Etiquetas y atributos obsoletos.
- Las etiquetas : <mark>, <meter>, <time>, <figure>, <picture>...
- Extensiones de etiquetas HTML existentes.
- Atributos: a, fieldset, iframe, area, button, etc.
- Microformatos. Visión general y ventajas para la optimización de motores de búsqueda.
- Nuevos campos y atributos de formulario: rango, autoenfoque, marcador de posición, menú, etc.
- Dibujos: Canvas frente a SVG.
- Formatos multimedia. Códecs multimedia y API.
- Gestión de vídeo y audio con las nuevas etiquetas <audio> y <video> en HTML5.
Trabajo práctico
Creación de plantillas HTML5. Posicionamiento de elementos en absoluto. Creación de un reproductor multimedia.
Selectores CSS3
- Recordatorio de sintaxis: selectores, reglas.
- Selectores para repetición nth-child(even), target target, older sibling ~, only-child.
- Consultas de medios para la carga condicional de CSS en función de la resolución u orientación del terminal.
Trabajo práctico
Integración de CSS3 en aplicaciones web. Selección de elementos de una página HTML5.
Colores y formato de texto
- Recordatorio de las declaraciones RGB y RGBA.
- Modelos HSL y HSLA.
- La propiedad de opacidad.
- Soporte para fuentes remotas @font-face.
- Formato del texto.
- Creación de un sistema de iconos.
- Gestión del desbordamiento de texto.
- Gestión de la cadena Wrap-option, tratamiento del espacio blanco...
- Efectos de color y sombra en el texto con text-fill-color, text-shadow...
- Modos multicolumna con recuento de columnas, anchura de columnas...
Trabajo práctico
Aplicación de colores. Formateo de texto. Gestión de varias columnas.
Formato de cuadros y fondos
- Sombras con box-shadow.
- Esquinas redondeadas con borde-radio...
- Gestión de múltiples fondos.
- Degradados de fondo (-webkit-gradient).
- Fondos ajustados por contenedor.
- Transformaciones: traslaciones, rotaciones, homotecias.
- Animaciones: animaciones y transiciones.
Trabajo práctico
Aplicación de sombras y redondeos. Animaciones y efectos de transición.
Disposición de la cuadrícula
- El principio de "rejilla".
- Cree un diseño de página por bloques.
- Posicionamiento de cada bloque en la página.
- Cambia la disposición y el tamaño de los bloques padre en función del tamaño de la pantalla del usuario.
Trabajo práctico
Diseño modular y adaptable.
Flexbox
- El fin de los flotadores.
- Distribución de sub-bloques dentro del bloque padre.
- Orden de visualización de los bloques.
- Los padres utilizan el espacio previsto a tal efecto.
- Centrar un bloque verticalmente en 2 líneas de código.
- Cambiar la disposición y el tamaño de estos bloques en función del tamaño de la pantalla del usuario.
Trabajo práctico
Diseño modular adaptado al diseño responsive
Elegir un framework CSS
- La oferta de la comunidad. (Bootstrap, Material Design, Foundation).
- Criterios comunes y conceptos compartidos.
- Marcos de componentes especializados.
- Marcos especializados en móviles.
Trabajo práctico
Introducción a diferentes frameworks CSS.
Imágenes SVG, vectoriales y receptivas
- Sintaxis SVG.
- Soporte e integración de imágenes SVG en el documento.
- SVG y fuentes.
- Optimización SVG.
- Animación de gráficos SVG.
- Bibliotecas para crear gráficos SVG: SVG.js, Velocity, Raphaël...
Trabajo práctico
Trabajar con archivos de imagen. Creación de una animación vectorial.