Máster en Diseño de interfaz y Front-end con HTML5, CSS3 y jQuery

FICTIZIA — Centro de formación especializada en Artes Digitales & Nuevas Tecnologías

  • Con este Máster en Diseño de Interfaz y Front-end con HTML5, CSS3 y jQuery aprenderás a diseñar cualquier proyecto web a través de todas esas tecnologías básicas y fundamentales para su desarrollo en Internet. Sin necesidad de una base previa, serás capaz de implementar y mejorar la capa de interactividad gracias a los contenidos teóricos y prácticos de maquetación y programación que se imparten en el curso.

    Una vez finalizado, estarás capacitado para crear una interfaz de usuario funcional para su experiencia satisfactoria y plena. 
  • Objetivos

    Adquirir conocimientos de maquetación y programación front-end para llevar a cabo el desarrollo de una interfaz de la forma más optimizada posible.
  • Bloque 1: Diseño de interfaz

    • El proceso de Diseño de UX de un proyecto interactivo

    • Aspectos esenciales de la Arquitectura de la información

    • Diseñando un sistema de procesos compuestos por pantallas

    • Ley de Hick/Hyman

    • Principio de Pareto (Ley del 80/20)

    • La UX y la usabilidad como agente primordial de las decisiones

    • Fundamentos del diseño aplicados al diseño de interfaz

    • Fundamentos del diseño Responsive. “Cambiando el chip”

    • Fundamentos de la tipografía en proyectos digitales

      • Particularidades

      • Fundamentos de ortotipografía



    • Diseño de textos en interfaces

      • Formato óptimo de cuerpos de texto

      • Formato óptimo de titulares

      • Formato de otros elementos de contenido



    • Semántica y Jerarquía visual

    • Formas de generar contraste visual

    • El espacio negativo

    • Fundamentos del Color Luz

      • Teoría del color

      • Fundamentos técnicos del RGB

      • Fundamentos de los perfiles de color

      • Combinando colores

      • Definiendo una paleta para nuestro proyecto



    • Formatos de imagen en el diseño de interfaz

      • Formatos bitmap

        • JPG, GIF y PNG

        • Diferencias fundamentales de compresión



      • El formato vectorial SVG

        • Aplicaciones

        • Ventajas



      • Eligiendo correctamente el formato según el caso



    • Trabajando para pantallas HDPi (Retina y similares)

    • Adobe Photoshop. Fundamentos de trabajo para UI

      • Capas

      • Canales

      • Formas

      • Trazados

      • Máscaras

      • Ajustes de capa

      • Técnicas no destructivas de trabajo con Photoshop

      • Exportación



    • Diseño de elementos interactivos de una interfaz

    • Diseño óptimo de un CTA (Call to Action)

    • Diseñando “componentes”

    • Guías de estilos

    • Contenidos esenciales y habituales de una Homepage

    • Adobe Illustrator. Fundamentos

      • Fundamentos del diseño vectorial en Illustrator

      • Herramientas de creación

      • Capas y mesas de trabajo

      • El Buscatrazos

      • Exportación



    • Sketch App

      • Conociendo Sketch

      • Diseñando con Sketch

      • Particularidades del workflow con Sketch

      • Ventajas

      • Símbolos

      • Overrides

      • UI templates

      • Exportación



    • Diseño de iconos

      • Fundamentos de Semiótica

      • Conceptos esenciales en el diseño de un icono

      • Creando un sets de iconos



    • Wireframes y prototipado

      • Fundamentos de wireframing

      • AxureRP



    • Diseño de formularios

      • Diseño y estructura general de un formulario

      • Elementos de formulario

        • Diseñando cada elemento para maximizar su usabilidad

        • Elementos de formulario en dispositivos táctiles






    Bloque 2: Desarrollo y animación con HTML5 y CSS3


    • “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





    • 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



    • Selectores CSS comunes

    • Selectores CSS avanzados (de niveles 2, 3 y 4)

    • Pseudoelementos CSS «::before» y «::after»

    • Jerarquía de selectores CSS

    • Usando la cascada de CSS

    • Propiedades CSS para formato de textos

    • Carga de tipografías en CSS con «@font-face» y desde servidor de terceros (como Google Fonts)

    • 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 definició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

    • Sombras de caja y de texto con CSS

    • Filtros CSS

    • Fondos con CSS

    • Colores de fondo

    • Definiendo el área del fondo con «background-clip»

    • 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



    • 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



    • Maquetando patrones de estructura

      • 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



    • Flexbox

      • 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»





    • Video HTML5

      • Atributos

      • Formatos de vídeo

      • Guerra de codecs

      • Haciendo responsive los vídeos



    • Audio HTML5

    • Incrustando otras webs dentro de nuestra página. «iframe»

      • Incrustando videoplayer de youTube, Vimeo…

      • Incrustando Google Map

      • Haciendo responsive los iframes



    • Formularios HTML5

      • Elementos de formulario

      • Soporte a etiquetas HTML5

      • Estilando elementos de formulario con CSS



    • 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



    • 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»




    Bloque 3: Programación de la interfaz con jQuery


    • Fundamentos básicos de la programación con JavaScript

    • Best practices de programación

    • La importancia de dónde/cuándo cargo mi script

    • Fundamentos y sintaxis de jQuery

    • Creando objetos jQuery usando selectores CSS

    • Efectos de animación con jQuery

      • “Precocinados”

      • Animando a medida

      • Encadenado. La cola de animación

      • Callbacks

      • Usando jQuery para gestionar animaciones CSS



    • Creando un sistema de pestañas

    • Creando paneles desplegables

    • Creando navegaciones “sticky”

    • Estructura “interruptor”

    • Manipulando el DOM

      • Insertando etiquetas en el DOM

      • Eliminando etiquetas

      • Modificando los contenidos de una etiqueta

      • Cambiando atributos de HTML

      • Gestionando clases desde jQuery

      • Modificando el CSS desde jQuery



    • Creando dialogs (notificaciones) modales a medida

    • Creando el front de una App de recordatorios (To-Do)

    • Gestión de eventos

      • Gestión de eventos con «on()» y «off()»

      • Eventos de ratón

      • Eventos de teclado

      • Eventos de formulario

      • Eventos de navegador

      • Delegación de eventos

      • El objeto «event»



    • Usando las coordenadas del ratón

    • Creando un tablón de post-it con jQuery

    • El efecto bubbling (propagación)

    • Animación del scroll de la ventana desde jQuery

    • Scroll Parallax complejo con jQuery

    • Traversing. Moviéndonos por el árbol del DOM

    • Métodos de filtrado

    • Expresiones regulares para validar formularios

    • Carga asíncrona de información (AJAX) con jQuery


  • Convocatorias

    Inicio: 18 de Octubre de 2017
  • ¡Consulta promociones y descuentos!

    Formación bonificable por la Fundación Estatal, organismo gestor de los fondos dedicados a formación continua para los trabajadores. A través de esta fundación estatal, todas las empresas pueden beneficiarse de ayudas económicas a los distintos planes de formación a sus empleados que quieran llevar a cabo y que se hacen efectivas mediante bonificaciones en las cotizaciones a la Seguridad Social.

    Fictizia Empresas incluye, entre los servicios que ofrece, la gestión de los trámites con la Fundación Estatal para la bonificación de sus programas de formación a medida.
  • PROFESOR

    Ángel Corral Arias


    • Website

    • Linkedin


    Ángel Corral AriasDigital Product Designer y Desarrollador Front-end con más de 10 años de experiencia. Desde hace 9 años compagina con la docencia su trabajo para clientes como LG, Qbicom, MBO, Cohética digital, el Sindicato de Petróleo y Gas argentino, el Dpto. de infografía de El Mundo o jDownloader. Es además coautor de dos guías prácticas editadas por Anaya Multimedia y está certificado como Adobe Certified Expert.
  • Lugares

    Madrid

Instituto Europeo de Formación y Cualificación

Máster y Postgrado
A distancia / Online.
500 horas.
Todo el año
750 €/curso

INESEM Business School

Máster y Postgrado
A distancia / Online.
600 horas.
Todo el año
1.395 €/curso

ESNE. Escuela Universitaria de Diseño, Innovación y Tecnología

Máster y Postgrado
Presencial en Madrid
1 años. 60 ECTs.
1 de Octubre de 2017
50% del precio de la matrícula para aquellos estudiantes que se matriculen antes del 31 de mayo
A Consultar
También podemos ofrecerte otras alternativas similares a este curso
Ir arriba