Fictizia formación especializada

Curso de

Maquetación web con HTML5 y CSS3

Maquetación con estándares W3C, desarrollo responsive, animación HTML5

Con este Curso especializado en maquetación web con HTML5 y CSS3 aprenderás desde cero a desarrollar con éxito cualquier proyecto web basado en tecnologías HTML5, incluyendo aquellos que requieren ser "responsive" para adaptarse eficazmente a cada dispositivo.

En el curso los alumnos aprenderán, además de las distintas técnicas de maquetación web siguiendo estándares W3C, todos los secretos de la creación de animaciones, transiciones y transformaciones utilizando CSS, algo vital para la creación de banners aplicables al mundo mobile y de esos elementos de interfaz que ayudan a mejorar la experiencia del usuario.

Programa de contenidos

  • “Bienvenidos al mundo del desarrollo web”
    • Tecnologías de desarrollo Front-end
    • Sitios web estáticos VS sitios web dinámicos
    • El Front-end como parte de una cadena de montaje no lineal
      • Front-end + Back-end. Pipeline en un sitio dinámico
      • Fundamentos y tecnologías de Back-end
  • Organización de archivos del Front-end de un proyecto web
  • Maquetación web según estándares W3C
  • Terminología, estructura y sintaxis de HTML5
  • Etiquetas y atributos de HTML5
  • La semántica como factor decisivo
  • Principios de desarrollo basado en mejora progresiva
  • Fundamentos de CSS
    • Separando formato de contenido
    • Cargando CSS en un archivo HTML
    • Sintaxis de las reglas CSS
  • Selectores CSS comunes
  • Selectores CSS avanzados (de niveles 2, 3 y 4)
  • Pseudoelementos CSS «::before» y «::after»
  • Jerarquía de selectores CSS
  • Usando la cascada de CSS
  • Propiedades CSS para formato de textos
  • Carga de tipografías en CSS con «@font-face» y desde servidor de terceros (Google Fonts…)
  • Los modelos de caja
    • Componentes (ancho, alto, padding, borde y margen)
    • Modelo de caja Clásico o «content-box»
    • Modelo de caja «border-box»
  • La propiedad CSS «display»
  • Elementos flotantes. El uso del «float» hoy
  • Visibilidad de las etiquetas
  • Controlando el desbordamiento con «overflow»
  • La propiedad «position». Ubicando elementos con CSS
  • Responsive. La presentación de contenidos se adapta
    • Estructuras flexibles
    • Media Queries
    • Contenidos que se adaptan
  • Imágenes en HTML
    • El atributo «alt». Optimizando accesibilidad, SEO y usabilidad
    • Haciendo responsive las imágenes
    • El atributo «srcset»
  • Enlaces. La etiqueta «a»
    • Creando hipervínculos. La esencia de la web
    • Anclas
    • Vínculos de correo (mailto)
  • Estructuras de lista
    • Listas ordenadas
    • Listas desordenadas
    • Listas de definición
  • Construyendo menús
    • Menús en columna
    • Barras de navegación
    • Dropdowns (desplegables) con CSS
    • Menús responsive
    • Menús responsive con patrón «botón hamburguesa»
    • Menús offCanvas
  • Unidades de medida
    • Unidades px
    • Unidades %
    • Unidades em
    • Unidades rem
    • Unidades vw
    • Unidades vh
    • Unidades ch
  • Bordes
  • Sombras de caja y de texto con CSS
  • Filtros CSS
  • Fondos con CSS
  • Colores de fondo
  • Definiendo el área del fondo con «background-clip»
  • Imágenes de fondo
    • Cambiando el tamaño de la imagen de fondo
    • Ajustando el tamaño de la imagen de fondo con «cover» y «contain»
    • Patrones de fondo
  • Degradados de fondo con CSS3
    • Degradados lineales
    • Degradados radiales
    • Degradados en repetición
  • Particularidades del fondo de la etiqueta «body»
  • Modos de fusión de imagen y color mediante «background-blend-mode»
  • Tablas. Tabulando datos
  • Columnas con CSS
  • Transformaciones CSS. Escalando, rotando, sesgando y trasladando etiquetas
  • Transiciones CSS. Animando los cambios en las propiedades
  • Animaciones CSS
    • Propiedades de animación
    • Keyframes
    • Aceleraciones
    • Animaciones anidadas
    • Animaciones en bucle
    • Animaciones de entrada
    • Animaciones por pasos
    • Best practices de rendimiento en animación de propiedades CSS
    • Aplicando principios de animación a la UI con CSS
    • La animación como elemento que mejora la UX
  • Maquetando patrones de estructura
    • Estructura con contenidos de ancho fijo y centrado
    • Estructuras con columnas de ancho fijo
    • Estructuras con columnas de ancho flexible (adaptativo)
    • Estructura de ancho flexible con contenido de ancho fijo y centrado
    • Estructura en cuadrícula
    • Cards
    • Estructuras responsive
  • Flexbox
    • Sistema de ejes principal y cruzado
    • Propiedades CSS Flexbox para el elemento contenedor
      • Convirtiendo en elemento Flexbox con «display: flex» e «inline-flex»
      • Intercambiando los ejes con «flex-direction»
      • Envolviendo a los hijos con «flex-wrap»
      • La forma corta «flex-flow»
      • Colocando a los hijos sobre el eje principal con «justify-content»
      • Colocando a los hijos sobre el eje cruzado con «align-items» y «align-content»
    • Propiedades CSS Flexbox para los elementos contenidos
      • Alineación en el eje cruzado de un elemento concreto con «self-align»
      • Cambiando el orden de los elementos con «order»
      • Tamaño base con «flex-basis»
      • Límites de adaptación con «flex-grow» y «flex-shrink»
      • La forma corta «flex»
  • Video HTML5
    • Atributos
    • Formatos de vídeo
    • Guerra de codecs
    • Haciendo responsive los vídeos
  • Audio HTML5
  • Incrustando otras webs dentro de nuestra página. «iframe»
    • Incrustando videoplayer de youTube, Vimeo…
    • Incrustando Google Map
    • Haciendo responsive los iframes
  • Formularios HTML5
    • Elementos de formulario
    • Soporte a etiquetas HTML5
    • Estilando elementos de formulario con CSS
  • Atributos data- de HTML5
  • SVG inline
    • Introducción a los elementos y atributos de SVG
    • Modificando los atributos SVG con CSS
    • Usando símbolos e instancias SVG en HTML para usar set de iconos eficientemente
    • Optimización de SVG
    • Fallbacks a PNG
  • Etiquetas Meta
  • Técnicas de SEO on site
  • Integración de capa social
    • Twitter cards
    • Facebook Open Graph
    • Integración de botones «Me gusta» y «Retweet»
  • Introducción al desarrollo de interactividad con jQuery
    • Modificación y animación de propiedades CSS
    • Control de la visibilidad de los elementos
    • Eventos
    • Integración de plugins jQuery

Solicitar más información:

Ponte en contacto con nosotros y resolveremos tus dudas

Completa el formulario para recibir más información sobre un curso o taller de fictizia y si quieres plantearnos alguna otra cuestión puedes indicárnosla en los comentarios.
Te responderemos a la mayor brevedad posible. Recuerda que, si lo prefieres, también puedes contactar con nosotros por teléfono llamándonos al 91 172 33 13 ( 10:00 a 19:00 ).