Aprende con este Máster todos los conocimientos necesarios para desarrollar cualquier interfaz web y disponer de uno de los perfiles más demandados en el sector

UX y Desarrollo Web

Máster en desarrollo Frontend con HTML5, CSS, JavaScript y React

HTML5
CSS
JS
React
Testing
frontend
maquetación
responsive
flexbox
gridcss
animación
programación
aplicaciones_SPA
UI_DEV
SEO_on_Page
Accesibilidad
Componentes
MVC
Git
AJAX
TDD
testing

Duración 5 meses

Coste 3900 €

Financiable*

¡Descuento! 3500 €

En pago único.

Dirigido a Personas con interés en trabajar en el sector del desarrollo interactivo.

* Financia tu formación sin intereses Si quieres hacer uso de esta opción, por favor indícanoslo en tu solicitud de información para consultarnos las opciones que tenemos disponibles para ti.

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

Requerimientos No son necesarios conocimientos previos sobre la materia.

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

Comienzo de próximas ediciones

05 de Octubre de 2020

Enfoque y objetivos de este Máster

Aprende en el Máster en desarrollo Frontend con HTML5, CSS, JavaScript y React las técnicas profesionales de desarrollo Frontend más actuales que se aplican en la producción de cualquier web o App responsive a medida con HTML5 y CSS, a programar con JavaScript el comportamiento de los elementos de la interfaz de tu web y a desarrollar aplicaciones SPA basadas en MVC con React, la librería de JavaScript que facilita enormemente el desarrollo eficiente de interfaces de usuario fácilmente mantenibles.

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, el desarrollo con JavaScript nativo y adquieran las capacidades necesarias para crear profesionalmente sitios web a medida de las necesidades de cada proyecto y todos los detalles de la librería de JavaScript React.js para desarrollar interfaces eficientes y fácilmente gestionables y testeables de una forma eminentemente práctica.

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.

Antía Díaz

Frontend developer, diseñadora e ilustradora con 9 años de experiencia profesional. Experta en el desarrollo con estándares HTML5 y CSS. Amante del código semántico, limpio y claro, ha trabajado como desarrolladora a lo largo de los años en diferentes proyectos web en varios estudios y agencias para compañías de gran relevancia como Hyundai, Honda, Toyota, Leroy Merlin, el artista internacional Okuda o Seguros El Corte Inglés. Además, Antía es una apasionada ilustradora y autora de @antiadiaz, una de las tiras españolas con más éxito en instagram.

Fran Valdesoiro

Desarrollador Frontend en Intelygenz. Apasionado de las tecnologías JavaScript y especialista en React, tiene experiencia tanto con React-native como Vue-native. Fran es un enamorado de la tecnología, la enseñanza y de investigar el funcionamiento de la mente y cómo adquirimos nuevos conocimientos, inquietudes que le llevaron a adentrarse en nuevas tecnologías desarrollando también aplicaciones de realidad aumentada y virtual (AR y VR) con Unity y a jugar con herramientas de memorización o mnemotecnia. Además, es colaborador de diversas comunidades tecnológicas como OSW (Open Source Weekends) y participa activamente en HackMadrid 27%, comunidad dedicada a la Ciberseguridad.

El programa de estudios

Fundamentos del desarrollo Frontend
- Navegación y manejo de aplicaciones con la Terminal
- Cómo funciona un navegador
- 1969. El origen de internet y el W3C
- Comunicación entre Front-End y Back-End
- Google Chrome Dev Tools
- Extensiones indispensables
- Control de versiones con Git/GitHub
- Stack de tecnologías Front-End
- Principios para convertirse en Web Developer
  - Espacios, indexado y comentarios por la legibilidad
  - Abstracción y modularidad
  - KISS, sencillo
  - Principios de desarrollo basado en mejora progresiva
  - Mobile First
  - El caso de BEM
  - Organización de carpetas comprensible
Elementos estructurales y semánticos de HTML5
La semántica como factor decisivo
Sintaxis de HTML5
Anatomía de una página web
- HTML5: Estructura, elementos y semántica
- El head: Metadatos del HTML
- El body y los elementos estructurales
- La etiqueta script
Elementos de bloque y elementos en línea
Enlaces
Menús y listas
Imágenes
- El atributo «alt». Optimizando accesibilidad, SEO y usabilidad
- Haciendo responsive las imágenes
- El atributo «src-set»
Atributos HTML
Caracteres especiales (Entity References)
Semántica y SEO on Site
Fundamentos de CSS
- Aplicando estilos CSS al HTML
  - Inline
  - Interno
  - Externo
- La cascada de CSS
- Reglas de especificidad
- Valores por defecto (user agent) y Reset
- Selectores
- Modelos de caja
Propiedades CSS para formato de textos
Carga de tipografías en CSS con «@font-face»
Carga de tipografías en CSS desde servidor de terceros (como Google Fonts)
Fondos con CSS
Degradados CSS
Elementos flotantes. El uso del «float» hoy
Definiendo columnas con CSS
Controlando el desbordamiento con «overflow»
Dominando la propiedad «position». Ubicando elementos elementos con CSS
- Estática
- Relativa
- Absoluta
- Fija
Pseudoelementos «::before» y «::after»
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»
  - Permitiendo más de una ristra de hijos con «flex-wrap»
  - La forma corta «flex-flow»
  - Alineación y distribución de los hijos sobre el eje principal con «justify-content»
  - Alineación y distribución de los hijos sobre el eje cruzado con «align-items» y «align-content»
- Propiedades CSS Flexbox para los flex items
  - Alineación sobre el eje cruzado de un elemento concreto con «align-self»
  - Cambiando el orden de los elementos con «order»
  - Tamaño base con «flex-basis»
  - Definiendo 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
- 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»
- «auto-fit» y «auto-fill»
- Grid Areas
- Grid Lines
- Alineación
- Reordenación
- Anidación
- Flexbox y/o CSS Grid
  - Diseños de una dimensión VS dos dimensiones
  - Complementando Flexbox y Grid
Transiciones CSS
Transformaciones CSS
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 estructuras
- Estructura con contenidos de ancho fijo y centrado
- Estructuras con columnas de ancho fijo
- Estructuras con columnas de ancho flexible (adaptativo)
- Estructuras de ancho flexible con contenido de ancho fijo y centrado
- Estructura en cuadrícula
- Cards
- Estructuras responsive
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ú offCanvas
Unidades CSS: Absolutas VS Relativas
- px
- em y rem
- vw y vh
- %
Responsive. Un mundo donde estructura y contenidos se adaptan
- Estructuras flexibles
- Media Queries
- Contenidos que se adaptan
Preprocesado de CSS con SASS
Filtros CSS
Fundamentos de frameworks CSS
- Bootstrap
- Materialize
Atributos data-
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 en una página. El «iframe»
- Incrustando videoplayers de Youtube, Vimeo…
- Incrustando Google Maps
- Haciendo responsive los iframes
SVG inline
- Introducción a los elementos y atributos de SVG
- Modificando 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
Formularios
- Elementos de formulario
- Soporte a etiquetas HTML5
- Estilando elementos de formulario con CSS
Fundamentos de Accesibilidad web
- Cuidando la accesibilidad
- Semántica
- Principios de Accesibilidad
- Guidelines de Accesibilidad
La funcionalidad con JavaScript, el lenguaje de programación web
- Introducción a algoritmia y pseudocódigo
- Variables en JS
  - var
  - let
  - const
- Hoisting
- Global Scope y Block Scope
- Bucles e iteraciones
  - while
  - for
- Condicionales
- Tipos de datos en JavaScript
  - Booleanos
  - Strings
    - Concatenación, length, index y chartAt
  - Números
  - Arrays
    - length, pop y push, map
  - null y undefined
  - Funciones
    - Self-invoke
    - Closure
  - Objetos (Object Literals)
- Gestionando el DOM con JavaScript
  - Primeras interacciones: prompt, alert y confirm
  - Agregar elementos
  - Eliminar elementos
  - Modificar Atributos y contenido
  - Modificando el CSS con JS
Prototipos y herencia
Asincronía (HTTP Requests)
- Interacciones con el servidor
  - POST
  - GET
  - PUT
  - PATCH
  - DELETE
React + Redux
- El paradigma MVC y frameworks JS
- Desarrollo eficaz de interfaces con React
- Webs estáticas con React
  - Introducción a JSX
  - Renderizando elementos
  - Componentes y propiedades
  - El estado y el ciclo de vida
  - Gestionando eventos en React
  - Renderizado condicional
  - CSS in JS
- Añadiendo complejidad para mejorar la interfaz
  - Modularidad. Partiendo el código
  - El Contexto
  - Gestión de errores
  - Creando referencias a elementos DOM
  - Fragmentos
  - Componentes de primer orden
  - Integración con otras librerías
  - JSX en profundidad
  - Mejorando el rendimiento
  - Portales
  - Comparación de árboles virtuales
  - Modo estricto
  - Comprobación dinámica de tipos (PropTypes)
  - Componentes no controlados
  - Hooks
  - React.Suspense
  - React.Lazy
  - Accesibilidad
- Librerías imprescindibles
  - React-Router
- Redux. Gestión del estado global y la inmutabilidad
  - Motivaciones
  - Principios básicos de Redux
  - Middlewares
  - Redux-form
  - Redux-thunk
  - Redux-observable
TDD (Test-Driven Development)
- Jest y el testeo de aplicaciones web
- Principios del Test Driven Development (TDD)
- Configuración del entorno de testeo
- CSS Testing con PhantomCSS
- Test Unitarios con Jest y Enzyme
- Test Funcionales (End to End) con Cypress
- Cobertura de Código con Coverall
Preparación de entrevistas y empleabilidad
- Refactorización del CV infalible
- Glosario de términos clave
- Resolución de problemas. El día a día del desarrollador
- Preguntas de personalidad. Cómo dar en el clavo

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 realizado este Máster y que decir, el profesor 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 Frontend Developer junior BBVA IT España

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 front-end, cuyo programa me pareció de los más completos del mercado. Después de 5 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 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 como profe, como todo el equipo de Fictizia.

Daniel Helguera Campillo

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