campus icon

FICTIZIA — Formación de alto rendimiento en diseño, tecnología y arte digital

(+34) 91 172 33 13 info@fictizia.com Plaza de España 12, Madrid

tecnologías de desarrollo

Curso de maquetación y animación web con HTML5 y CSS (en remoto)

Aprende en remoto a desarrollar a medida cualquier maquetación con HTML5 y CSS con técnicas como Flexbox o Grid y a animar con CSS cualquier microinteracción.

tecnologías de desarrollo

Curso de maquetación y animación web con HTML5 y CSS (en remoto)

  • HTML5
  • CSS
  • maquetación
  • W3C
  • responsive
  • animación CSS
  • semántica
  • SEO on site
  • flexbox
  • Grid CSS
  • mobile first
Duración 60 horas
máx. plazas 15 personas
Coste
900 €
595 € promoción especial #eneroenremoto
Modalidad de la formación Formación en remoto en nuestras aulas virtuales.
Requisitos No se necesitan conocimientos previos
Bonificable Esta es una formación bonificable por FUNDAE (Fundación Estatal para la formación en el empleo). Si eres trabajador/a por cuenta ajena tu empresa puede bonificar tu formación. Además Fictizia puede gestionar todo el papeleo si tu empresa así lo prefiere.
Próximas ediciones
25 de enero de 2021 EN REMOTO lunes, miércoles y viernes de 19:00 a 22:00 (UTC+1)

Enfoque y objetivos

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.

Profesorado del curso

El equipo de profesores de Fictizia está formado por expertos profesionales en activo y con una larga y rica trayectoria profesional 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 más exigente. Cada integrante del profesorado de Fictizia es un/a 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.

Alejandro Mur

Alejandro Mur

UI developer especializado en el desarrollo semántico y accesible siguiendo estándares web con HTML + CSS (SASS) + JS. Muy centrado en la arquitectura CSS. Maneja con soltura varias metodologías de trabajo según el tipo de proyecto (BEM, ITCSS o Utility Classes). Gran apasionado de las microinteracciones y de animar las interfaces en general siempre que la animación aporte valor al usuario. Defensor del enfoque Mobile First y de la importancia de mejorar la performance de cada proyecto. A lo largo de sus más de 14 años de trayectoria profesional en el desarrollo Frontend, Alejandro ha trabajado para clientes como Fundación Telefónica, Páginas Amarillas, L’oreal, Casa Real, IE Business School, Sanitas, Wi Zink, Enaire o BP.

Ángel Corral Arias

Ángel Corral Arias

Diseñador de productos digitales, UX Engineer y consultor con más de 15 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 director de formación en Fictizia.

El programa de contenidos

  1. «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
  2. Cómo funciona un navegador
  3. Organización de archivos del Front end de un proyecto web
  4. Terminología, estructura y sintaxis de HTML5
  5. Etiquetas y atributos de HTML5
  6. La semántica como factor decisivo
  7. Principios de desarrollo basado en mejora progresiva
  8. Fundamentos de CSS
    • Separando formato de contenido
    • Cargando CSS en un archivo HTML
    • Sintaxis de las reglas CSS
    • Especificidad
    • La cascada de CSS
  9. Selectores CSS más comunes
  10. Selectores CSS avanzados (de niveles 2, 3 y 4)
  11. Pseudoelementos CSS «::before» y «::after»
  12. Jerarquía de selectores CSS
  13. Propiedades CSS para formato de textos
  14. Carga de tipografías desde servidor de terceros (como Google Fonts)
  15. Carga de tipografías en CSS con «@font-face»
  16. Los modelos de caja
    • Componentes (ancho, alto, padding, borde y margen)
    • Modelo de caja Clásico o «content-box»
    • Modelo de caja «border-box»
  17. La propiedad CSS «display»
  18. Visibilidad de las etiquetas
  19. Controlando el desbordamiento con «overflow»
  20. La propiedad «position». Ubicando elementos con CSS
  21. Responsive. La presentación de contenidos se adapta
    • Estructuras flexibles
    • Media Queries
    • Contenidos que se adaptan
  22. Imágenes en HTML
    • El atributo «alt». Optimizando accesibilidad, SEO y usabilidad
    • Haciendo responsive las imágenes
    • El atributo «srcset»
  23. Elementos flotantes. El uso del «float» hoy
  24. Enlaces. La etiqueta «a»
    • Creando hipervínculos. La esencia de la web
    • Anclas
    • Vínculos de correo (mailto)
  25. Estructuras de lista
    • Listas ordenadas
    • Listas desordenadas
    • Listas de descripción
  26. 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
  27. Unidades de medida
    • Unidades px
    • Unidades %
    • Unidades em
    • Unidades rem
    • Unidades vw
    • Unidades vh
    • Unidades ch
  28. Bordes
  29. 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
  30. Sombras de caja y de texto con CSS
  31. Filtros CSS
  32. 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»
  33. Modos de fusión de imagen y color mediante «background-blend-mode»
  34. Tablas. Tabulando datos
  35. Columnas con CSS
  36. Transformaciones CSS. Escalando, rotando, sesgando y trasladando etiquetas
  37. Transiciones CSS. Animando los cambios en las propiedades
  38. 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
  39. 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»
  40. 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
  41. Vídeo con HTML5
    • Atributos
    • Formatos de vídeo
    • Guerra de codecs
    • Añadiendo subtítulos
    • Haciendo responsive un vídeo HTML5
  42. Audio con HTML5
  43. Incrustando otras webs dentro de nuestra página. «iframe»
    • Incrustando videoplayers de Youtube, Vimeo…
    • Incrustando Google Maps
    • Haciendo responsive los iframes
  44. Formularios HTML5
    • Elementos de formulario
    • Soporte a etiquetas HTML5
    • Estilando elementos de formulario con CSS
  45. Web semántica y accesibilidad
    • Accesibilidad
    • Semántica
    • Principios de accesibilidad
    • Guidelines de accesibilidad
  46. Fundamentos de librerías de componentes web
    • Bootstrap
    • Foundation
    • Otras (UIKit, Skeleton, SemanticUI…)
  47. Atributos data- de HTML5
  48. 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
  49. Fundamentos de preprocesado de CSS con SASS
  50. Etiquetas Meta
  51. Técnicas de SEO on site
  52. Etiquetas meta para integración con redes sociales
    • Twitter cards
    • Facebook Open Graph

Un método reflejo del día a día en la profesión

La metodología de la formación de Fictizia es teórico–práctica. En cada sesión formativa tu profesor/a irá avanzando en el desarrollo de la formación contigo y tus compañeros/as estudiantes mediante ejercicios prácticos que van involucrando progresivamente nuevos contenidos teóricos del programa de estudios. Todos los ejercicios se han diseñado específicamente como reflejo de las técnicas, procesos y situaciones reales más habituales y representativas que el alumno/a se va a encontrar después en su día a día de trabajo y de otras posibles situaciones menos comunes para que también aprendas a desenvolverte con criterio ante cualquier necesidad.

Asimismo, con esta formación el/la estudiante no solo se instruye en la mera ejecución de técnicas con el único fin de producir o ejecutar lo que le piden, también aprende los fundamentos teóricos y críticos tan importantes y que le permitirán tomar decisiones basadas en criterios objetivos y analíticos de forma autónoma.

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 FICTIZIA son la prueba más evidente del éxito de nuestra forma de entender la formación y de nuestro método educativo. También son nuestro mayor orgullo :) ¡Gracias!

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

Las mejores empresas contratan a nuestros alumnos

Al finalizar la formación, el/la estudiante recibe su titulación de Fictizia y tiene acceso al grupo privado de Fictizia en LinkedIn, Fictizia Alumni, donde se publican todas las ofertas de empleo y prácticas de las muchas empresas con las que tenemos acuerdos de colaboración.

La calidad de la formación que reciben las personas que se forman en FICTIZIA se refleja en el nivel de las empresas que las contratan. Es un orgullo que las mejores compañías confíen en las capacidades de nuestros alumnos y es la mejor prueba de la efectividad de la formación que ofrecemos.

  • Alumnos Fictizia en Google
  • Alumnos Fictizia en El Ranchito
  • Alumnos Fictizia en Ogilvy
  • Alumnos Fictizia en BBVA Next
  • Alumnos Fictizia en Lola Mullenlowe
  • Alumnos Fictizia en Ánima-Kitchent
  • Alumnos Fictizia en Atresmedia
  • Alumnos Fictizia en BQ
  • Alumnos Fictizia en DDB
  • Alumnos Fictizia en Mach
  • Alumnos Fictizia en Byte London
  • Alumnos Fictizia en indra
  • Alumnos Fictizia en The Cocktail
  • Alumnos Fictizia en *SCPF
  • Alumnos Fictizia en Ediciones SM
  • Alumnos Fictizia en Paradigma digital
  • Alumnos Fictizia en Panda Security
  • Alumnos Fictizia en Exit Consultores Audiovisuales
  • Alumnos Fictizia en Mediaset
  • Alumnos Fictizia en Everis
  • Alumnos Fictizia en JWT
  • Alumnos Fictizia en Lalivingston
  • Alumnos Fictizia en Kairos DS
  • Alumnos Fictizia en Twin Pines
  • Alumnos Fictizia en LUCA data driven solutions
  • Alumnos Fictizia en Redbility
  • Alumnos Fictizia en LeChuck
  • Alumnos Fictizia en Liquid Squad
  • Alumnos Fictizia en Social Mood
  • Alumnos Fictizia en Warner Bros International tV Production