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

UX y Desarrollo Web

Máster en desarrollo Frontend de interfaces con HTML5, CSS y JS

Aprende a maquetar, animar y programar la interfaz de cualquier web o webapp responsive a medida con HTML5, CSS y JS

UX y Desarrollo Web

Máster en desarrollo Frontend de interfaces con HTML5, CSS y JS

  • W3C
  • HTML5
  • CSS
  • JS
  • SEO_on_page
  • responsive
  • maquetación
  • animación
  • programación
  • ui
  • frontend
Duración 4 meses
Coste
2970 €
2820 € ¡Early Bird!
Plazas 8 alumnos
Modalidad Presencial
Requerimientos No se requieren conocimientos previos
Próximas ediciones
02 de Octubre de 2019 Lunes, Miércoles y Viernes

Enfoque y objetivos del Máster

Aprende en este Máster en Desarrollo Front-end de interfaces con HTML5, CSS y JavaScript las técnicas profesionales de maquetación más actuales aplicadas en la producción de cualquier web responsive a medida con HTML5 y CSS y a programar con JavaScript el comportamiento de los elementos de la interfaz de tu web o webapp.

Los asistentes a este máster aprenden todo sobre la semántica implícita en HTML5, técnicas de SEO on site y las técnicas profesionales más actuales aplicadas en producción para crear layouts responsive a medida por complejos que sean y a animar con CSS tanto microinteracciones como piezas publicitarias multidispositivo.

Programa de estudios

  1. Maquetación web y animación con HTML5 y CSS3
    • «Bienvenidos al mundo del desarrollo web»
      • Cómo funciona un navegador
      • 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
      • 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»
    • 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 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
      • 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
    • 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
    • Integración de capa social
      • Twitter cards
      • Facebook Open Graph
      • Integración de botones «Me gusta» y «Retweet»
  2. Programación de interfaces con JavaScript
    • Lógica y abstracción aplicada a la programación
    • La importancia de dónde/cuándo cargo mi script
    • Fundamentos y sintaxis de JavaScript
    • Usando JS para gestionar animaciones CSS
    • Manipulando el DOM
      • Insertando etiquetas en el DOM
      • Eliminando etiquetas
      • Modificando los contenidos de una etiqueta
      • Cambiando atributos de HTML
      • Gestionando clases de HTML desde JS
      • Creando navegaciones “sticky”
      • Modificando el CSS desde JS
      • Creando dialogs (notificaciones) modales a medida
      • Creando el front de una App de recordatorios (To-Do)
    • Gestión de eventos
      • Eventos de ratón
      • Eventos de teclado
      • Eventos de formulario
      • Eventos de navegador
      • Delegación de eventos
    • El efecto bubbling (propagación)
    • Creando un sistema de pestañas
    • Creando paneles desplegables
    • Estructura “interruptor”
    • Usando las coordenadas del ratón
      • Creando un tablón de post-it con JS
    • Animación controlada del scroll de la ventana
      • Scroll parallax complejo
    • Expresiones regulares para validar formularios
    • Carga asíncrona de datos dinámicos (AJAX)
    • Trabajando con un objeto JSON

Profesorado

En Fictizia tenemos muy claro que quién imparte la formación siempre es clave. Con el objetivo de ofrecer una formación que responda a la realidad del mundo laboral, 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 como el actual. Cada profesor de Fictizia es un especialista de alto nivel en su campo que además comparte en las aulas de Fictizia sus conocimientos, sus enorme experiencia, sus tropiezos, sus aciertos y la pasión por su trabajo. Por eso estamos tan orgullosos de nuestro profesorado.

Ángel Corral Arias

Á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.

La opinión de nuestros alumnos es la mejor garantía.

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

Recomendado 100% el Máster en Diseño de interfaz y Front-end con HTML5, CSS3 y jQuery, termine el curso muy contenta con la escuela y sobre todo con el profe Angel. Gracias !!!

He realizado el Máster en Diseño de Interfaz y Front-end con HTML5, CSS3 y jQuery y que decir, el profesor (Ángel) un profesional de 10; grupos reducidos, lo cual se agradece, ya que el profesor puede dedicar el tiempo necesario a cada alumno; que el horario sea 2 días en semana para mi es un plus, ya que, aunque se «tarde» más en hacer, puedes compatibilizarlo con tu día a día y además así puedes asimilar la materia dada y poder realizar los trabajos, ya que al estar trabajando por las mañanas, personalmente, no disponía de mucho tiempo. 100 % recomendable para todo aquel que quiera introducirse y/o perfeccionar en el mundo front-end.

Irene Gómez De la Fuente Maquetadora/Diseñadora gráfica

Por razones laborales tomé la decisión de cambiar de rumbo profesional y decidí lanzarme al mundo del desarrollo web. Elegí Fictizia por sus grupos reducidos y por su master en diseño de interfaz y front-end con HTML5, CSS3 y jQuery, cuyo programa me pareció de los más completos del mercado. Después de 6 meses puedo decir que no me he equivocado. El programa ha sido muy completo y al día de todas las novedades de este mundo, que no son pocas, de hecho algunas de ellas no estaban en programa y las hemos tocado. El profesor Ángel impecable, muy cercano, perfeccionista al máximo, imprescindible en este mundo del desarrollo web, y que ha hecho las clases muy amenas, lo cual se agradece siempre. Las clases son eminentemente prácticas y al ser grupos reducidos las exprimes al máximo. La muestra de lo contento que he terminado es que actualmente estoy realizando el curso de JavaScript para desarrolladores web como continuación del Master, esta vez con otro crack: Ulises, como todo el equipo de Fictizia.

Daniel Helguera Campillo Front End Developer

Mi experiencia fue completamente satisfactoria. El temario era muy completo y estaba actualizado. Además, profundizaba en los aspectos interesantes del mismo. Cabe destacar que éramos pocos alumnos en el aula, por lo que gozábamos de una atención personalizada. El material también resultó ser de mucha calidad, así como nuestro profesor. Era un experto en lo que impartía y un apasionado, muy atento. Como consejo personal me gustaría decir que, aunque el máster solo se imparta dos días a la semana, está bien tomárselo como si las tareas fueran diarias y trabajar el resto de la semana. De esta manera se aprovecha el máster al 100%

Jose María Velázquez Full-stack Developer Open Sistemas

Las mejores empresas confían en nuestros alumnos

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