Fictizia formación especializada

Diseña y desarrolla interfaces web profesionales

Máster en

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

Estándares W3C, responsive design, diseño interactivo, usabilidad, maquetación web, programación cl

Con este máster aprenderás a diseñar y desarrollar con éxito un proyecto web basado en estándares W3C con las tecnologías HTML5 y CSS3, implementando, además, mejoras en la capa de interactividad mediante jQuery, la librería más utilizada de JavaScript.

Este Máster de Diseño de interfaz y Front-end con HTML5, CSS3 y jQuery parte desde cero e incluye tanto los conceptos teóricos y técnicos de diseño necesarios para crear una interfaz de usuario funcional y basada en conseguir la mejor experiencia de usuario posible, como todos los conocimientos de maquetación y programación front-end que se requieren para llevar a cabo su desarrollo de la forma más optimizada.

Programa de contenidos

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

Solicitar más información:

Ponte en contacto con nosotros y resolveremos tus dudas

Completa el formulario para recibir más información sobre un curso o taller de fictizia y si quieres plantearnos alguna otra cuestión puedes indicárnosla en los comentarios.
Te responderemos a la mayor brevedad posible. Recuerda que, si lo prefieres, también puedes contactar con nosotros por teléfono llamándonos al 91 172 33 13 ( 10:00 a 19:00 ).