Aprende a desarrollar a medida cualquier maquetación con HTML5 y CSS con técnicas como Flexbox y Grid Layout así como a animar con CSS cualquier microinteracción o pieza publicitaria.

UX y Desarrollo Web

Curso de maquetación y animación web con HTML5 y CSS

HTML5
CSS
maquetación
W3C
responsive
animación
semántica
SEO on site
flexbox
Grid CSS
mobile first

Duración 60 horas

Coste

1.350 €

1.200 €

Modalidad Teleformación en nuestras aulas virtuales. #fictiziaentucasa #quédateencasa

Requerimientos No se necesitan conocimientos previos

Bonificable Formación bonificable por Fundae (Fundación Estatal para la formación en el empleo).

Comienzo de próximas ediciones ¡Próximamente!

Enfoque y objetivos de este Curso

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 todo sobre la semántica implícita en HTML5, técnicas de SEO on site, las distintas técnicas de maquetación web más versátiles y actuales aplicables en producción y todos los secretos de la creación de animaciones, transiciones y transformaciones utilizando CSS, algo vital para la creación de piezas de publicidad aplicables al mundo mobile y de microinteracciones en elementos de la interfaz que ayudan a mejorar la experiencia del usuario.

Tu profesorado

El equipo de profesores de Fictizia está formado por profesionales con una larga trayectoria profesional, lo que les capacita para reconocer las necesidades reales de un sector tan cambiante y exigente y cumplir el objetivo de Fictizia de ofrecer una formación que responda a la realidad del mundo laboral. Cada profesor de Fictizia es un gran especialista en su campo que además comparte sus conocimientos, sus enorme experiencia, sus tropiezos, sus aciertos y la pasión por su trabajo en nuestras aulas.

Ángel Corral Arias

Diseñador de productos digitales, UX Engineer y consultor con más de 14 años de experiencia profesional trabajando para clientes como Movistar, LG, Qbicom, Galp, Hitachi, Dyson, Cohética digital, Micronet, el sindicato de petróleo y gas privado argentino o el Dpto. de infografía de El Mundo. Ángel además compagina su trabajo con la docencia desde hace 13 años y ha sido ponente en diversos eventos y congresos de desarrollo como FrontFest y OpenExpo Europe. También es coautor de dos guías prácticas editadas por Anaya Multimedia y es director del área de UX y Desarrollo Web de Fictizia.

Cristina Ponce

Frontend Developer en Kairós DS. Cristina se ha centrado desde sus principios en analizar y aplicar los estándares web desde la base con HTML, CSS y JavaScript. Dispone de sólidos conocimientos en semántica aplicada al correcto desarrollo de layout y de accesibilidad web y también tiene la capacidad de moverse tanto en el ámbito del desarrollo Frontend más puro con Web Components como con diversas tecnologías como Angular, Ember, React y Vue.js. Aunque siente cierta preferencia por Vue y la comunidad que lo rodea, en su día a día no le supone ningún problema cambiar de tecnología ya que, por encima de todo, lo que más le motiva es el aprendizaje continuo. Cristina además disfruta participando activamente en la comunidad de desarrollo asistiendo a eventos y compartiendo su conocimiento, por lo que es muy probable que la hayas visto hablando en FrontFest, JSDay, VueDay, T3chFest o también como Chapter Leader en Vue Vixens ESP.

El programa de estudios

«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
Cómo funciona un navegador
Organización de archivos del Front end de un proyecto web
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
- Especificidad
- La cascada de CSS
Selectores CSS más comunes
Selectores CSS avanzados (de niveles 2, 3 y 4)
Pseudoelementos CSS «::before» y «::after»
Jerarquía de selectores CSS
Propiedades CSS para formato de textos
Carga de tipografías desde servidor de terceros (como Google Fonts)
Carga de tipografías en CSS con «@font-face»
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»
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»
Elementos flotantes. El uso del «float» hoy
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 descripció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
Maquetando estructuras
- 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
Sombras de caja y de texto con CSS
Filtros CSS
Fondos con CSS
- Color de fondo
- 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
- Definiendo el área del fondo con «background-clip»
- 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
Flexbox (CSS Flexible Box Layout)
- 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»
Grid (CSS Grid Layout)
- Fundamentos de CSS Grid
- Jugando con fracciones. La unidad fr
- Grids implícitos y explícitos
- El algoritmo de colocación automática de CSS Grid: grid-auto-flow
- Definiendo el tamaño de las pistas en CSS Grid
- La función «repeat»
- Definiendo tamaños de elementos grid
- Colocando elementos grid
- «auto-fit» y «auto-fill»
- Grids responsive con minmax()
- Grid Areas
- Grid Lines
- Alineación
- Reordenación
- Anidación
- Flexbox y/o CSS Grid
  - Diferencias
  - Diseños de una dimensión VS dos dimensiones
  - Complementando Flexbox y Grid
Vídeo con HTML5
- Atributos
- Formatos de vídeo
- Guerra de codecs
- Añadiendo subtítulos
- Haciendo responsive un vídeo HTML5
Audio con HTML5
Incrustando otras webs dentro de nuestra página. «iframe»
- Incrustando videoplayers de Youtube, Vimeo…
- Incrustando Google Maps
- Haciendo responsive los iframes
Formularios HTML5
- Elementos de formulario
- Soporte a etiquetas HTML5
- Estilando elementos de formulario con CSS
Web semántica y accesibilidad
- Accesibilidad
- Semántica
- Principios de accesibilidad
- Guidelines de accesibilidad
Fundamentos de librerías de componentes web
- Bootstrap
- Foundation
- Otras (UIKit, Skeleton, SemanticUI…)
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
Fundamentos de preprocesado de CSS con SASS
Etiquetas Meta
Técnicas de SEO on site
Etiquetas meta para integración con redes sociales
- Twitter cards
- Facebook Open Graph

Las opiniones de los alumnos son la mejor garantía.

Las experiencias y vivencias y los resultados que han obtenido las personas que han estudiado en nuestras aulas, con nuestros profesores son la prueba más evidente del éxito de nuestra forma de entender la formación y de nuestro método educativo.

He terminado el curso de maquetación y animación con HTML5 y CSS3 y puedo decir que lo recomiendo totalmente. Las instalaciones son estupendas... y qué decir del profe (Ángel Corral), además de saber muy bien de lo que habla, sabe enseñar y hace las clases muy amenas.

Ana Álvarez

Acabo de terminar un curso de maquetación y animación HTML y CSS y me ha encantado la escuela. El profesor Ángel the best. Muy recomendable.

Alberto Noheda