¡Plazas limitadas! 8 alumnos por clase

Master en Diseño de interfaz y Front-end con HTML5, CSS3 y jQuery

FICTIZIA
En Madrid
Descuento por matrícula anticipada

2.250 € 2.115 
¿Quieres hablar con un asesor sobre este curso?

Información importante

Tipología Master
Lugar Madrid
Horas lectivas 150h
Duración Flexible
Inicio Octubre 2018
otras fechas
  • Master
  • Madrid
  • 150h
  • Duración:
    Flexible
  • Inicio:
    Octubre 2018
    otras fechas
Descripción

El centro Fictizia te ofrece un curso superior impartido en Madrid e incluido en el catálogo educativo de emagister.com. Se trata de una formación presencial compuesta por un total de 150 horas lectivas. Contarás con un equipo docente altamente cualificado y formado por profesores expertos en las materias que imparten.

El objetivo de este curso es que adquieras todos los conocimientos y las herramientas que necesitas para diseñar y elaborar una interfaz de usuario funcional. Para ello, aprenderás conceptos teóricos y técnicos que te permitirán maquetar y programar el proyecto web de manera que sea útil y coherente para las personas que lo visiten. Además, te enseñarán programación Font-end y sabrás implementar mejoras en la capa de interactividad mediante la utilización de jQuery, la librearía más importante de JavaScript.

Una vez hayas finalizado el curso con éxito, obtendrás un certificado otorgado por el centro, con el que podrás acreditar todos los conocimientos adquiridos. Además, se trata de una formación bonificada, por lo que, si estás trabajando actualmente, podrás acceder a estos estudios de manera gratuita.

Información importante

Earlybird: 6 % descuento

Bonificable: Curso bonificable para empresas
Si eres trabajador en activo, este curso te puede salir gratis a través de tu empresa.

Instalaciones y fechas

Dónde se imparte y en qué fechas

Inicio Ubicación
22 nov 2017
Oct-2018
Madrid
Eduardo Benot 2, 28008, Madrid, España
Ver mapa
Inicio 22 nov 2017
Oct-2018
Ubicación
Madrid
Eduardo Benot 2, 28008, Madrid, España
Ver mapa

Preguntas Frecuentes

· Titulación

Certificado de asistencia otorgado por Fictizia · Formación Especializada

Opiniones

No hay opiniones de este curso todavía
Pregunta a los Antiguos Alumnos qué les pareció.

Su experiencia te será de mucha ayuda para decidirte.

¿Qué aprendes en este curso?

Páginas web
SEO
Animaciones interactivas
Tipografía
Social Media
Proyectos sociales
Creación web
Técnico de sonido
Desarrollo web
Audio
Diseño de sonido
Gestión del diseño
Html5
jQuery
Arquitectura de la información
Principios del diseño aplicados a la interacción
Maquetación web según estándares HTML5 y CSS3
Organización del desarrollo de un proyecto web
Desarrollo de interactividad con jQuery

Profesores

Angel Corral Arias
Angel Corral Arias
Profesor

Diseñador de interfaz y programador Front-end con más de 8 años de experiencia que compagina su trabajo para clientes como Orona, docshare.com, LG, Micronet, MBO Publicidad, Abyssal Pictures, Freak Studios o jDownloader con la docencia desde hace 6 años. Es además coautor, junto con Martín Pereyra, de dos guías prácticas editadas por Anaya Multimedia sobre Adobe Flash.

Temario

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

Información adicional

Formación bonificable a través de la Fundación Estatal

Usuarios que se interesaron por este curso también se han interesado por...
Ver más cursos similares