Máster online en desarrollo Frontend con HTML5, CSS, JavaScript y React
Información
FICTIZIA
Online
Curso
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 cidades 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. A quién va dirigido Personas con interés en trabajar en el sector del desarrollo interactivo. Requisitos No es necesario que tengas conocimientos previos sobre la materia. Temario completo de este curso · 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 siones con Git/GitHub Stack de tecnologías Front-End Principios para contirse 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 «oflow» · 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 Coall · 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 más
Otros cursos de esta academia
Máster en desarrollo Frontend con HTML5, CSS, JavaScript y React
(FICTIZIA)
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...
Máster en 3D y VFX con Autodesk Maya
(FICTIZIA)
Partes esenciales del programa de estudios de este máster también son la creación de diversos efectos de postproducción, la generación de efectos dinámicos, la animación...
Curso de JavaScript
(FICTIZIA)
El objetivo principal de este curso de js es que los alumnos aprendan la bases y fundamentos del lenguaje de programación más utilizado en el mundo del desarrollo...
Curso de maquetación y animación web con HTML5 y CSS3
(FICTIZIA)
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...
Curso de Angular
(FICTIZIA)
Al correr en equipos de escritorio también se notarán sustanciales mejoras en rendimiento y en tiempos de respuesta... angular está escrito en typescript, lo que...
Curso de Node.js
(FICTIZIA)
En este curso de node... basándose en el método learning by doing, el profesor va progresando en la formación, junto con sus estudiantes, mediante el desarrollo...
Curso de Python
(FICTIZIA)
El curso de python está ideado para aquellos desarrolladores que quieran empaparse en este lenguaje y su ecosistema... 8 y obteniendo una base sólida de los fundamentos...
Máster en Postproducción y VFX con Foundry Nuke
(FICTIZIA)
Con este máster en postproducción y vfx con foundry nuke los alumnos aprenden todos los fundamentos técnicos y artísticos necesarios para realizar los efectos especiales...
Máster en Motion Graphics con After Effects y Cinema 4D
(FICTIZIA)
Desde conceptos como capas, curvas de animación, modos de fusión o precomposición, técnicas de rotoscopia, espacios 2... gracias a este máster en motion graphics...
Curso de Etalonaje con DaVinci Resolve
(FICTIZIA)
Es necesario, por tanto, que este curso ofrezca las herramientas para aprender cómo interpretar la luz a través de las señales de un video scope, cuál es el secreto...