Formación : HTML5 y CSS3, dominar la creación de sus páginas Web

HTML5 y CSS3, dominar la creación de sus páginas Web

Descargar en formato pdf Compartir este curso por correo electrónico 2


Aprenderás a crear páginas web basadas en HTML5 y CSS3. Implementarás el modelo de organización de contenidos y utilizarás los elementos estructurales propuestos por HTML5. Utilizarás CSS3 para hacerlas más atractivas y responsive.


Abierta
In-company
A medida

Curso práctico presencial o en clase a distancia

Ref. HTM
Precio : 1450 € I.E.
  3d - 21h00




Aprenderás a crear páginas web basadas en HTML5 y CSS3. Implementarás el modelo de organización de contenidos y utilizarás los elementos estructurales propuestos por HTML5. Utilizarás CSS3 para hacerlas más atractivas y responsive.

Objetivos pedagógicos
Una vez finalizada la formación, el participante podrá:
  • Diseño y desarrollo de aplicaciones web en HTML5 y CSS3
  • Configurar y validar la estructura HTML5 de las páginas web
  • Envolver las páginas web en CSS 3 para hacerlas más atractivas
  • Páginas web con diseño adaptable
  • Creación de imágenes vectoriales y animaciones

Público afectado
Desarrolladores web y gestores de proyectos.

Requisitos previos
Conocimientos básicos de HTML y CSS.

Programa de la formación

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.


Modalidades prácticas
Trabajo práctico
Debates, intercambio de experiencias, demostraciones, tutoriales y estudios de casos.
Métodos pedagógicos;
Enseñanza activa basada en ejemplos, demostraciones, intercambio de experiencias, estudios de casos prácticos y evaluación del aprendizaje a lo largo del curso.

Fechas y lugares
Selecciona tu ubicación u opta por la clase remota y luego elige tu fecha.
Clase a distancia