Máster en Diseño Gráfico y UX/UI - CEI Escuela de Diseño y Marketing

Proporcionar conocimientos acerca de los tipos de selectores, la vinculación de ficheros, los modos de fusión, las unidades de medida, los elementos de entrada de datos, y las conexiones asíncronas con el servidor.
Dictar un destacado programa formativo, en el cual se profundiza sobre los lenguajes de programación, las técnicas de análisis, la optimización de medios, el manual de estilos web, y la generación de contenido en WordPress.
Capacitar sobre la protección de los accesos a WordPress, el diseño y prototipado con Figma, el sistema de diseño, las medidas web, y el diseño de interacción.

Máster en Diseño Gráfico y UX/UI - Oficial de Adobe.

MÓDULO DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT
CONTENIDO, ESTRUCTURA Y APARIENCIA
INTRODUCCIÓN Y HERRAMIENTAS
- Introducción al desarrollo web integral
- El diseñador web como programador creativo, el lenguaje de la web
- Herramientas de apoyo
- Elección de un editor de texto, factores a tomar en cuenta
- Todo diseño web debe ser responsive
HTML, primera parte: introducción
- Introducción a los lenguajes de etiquetas
- Elementos, etiquetas y atributos
- HTML semántico, el contenido como guía
- Elementos semánticos y elementos estructurales
- Títulos, párrafos, listas, tablas, enlaces e imágenes... el contenido es el rey
- Flujo normal (normal flow), elementos block e inline
CSS, PRIMERA PARTE: INTRODUCCIÓN
- Reglas, selectores y propiedades
- Tipos de selectores
- Interludio HTML: elemento style, identificadores únicos y clases
- Vinculación de ficheros CSS a ficheros HTML
CSS, SEGUNDA PARTE: EL NAVEGADOR COMO HERRAMIENTA DE DISEÑO
- Diseñando en el navegador, inspector de elementos + editor de texto, o cómo dejar atrás las simulaciones
- CSS y su relación a los programas de diseño tradicionales
TIPOGRAFÍA
- Introducción a la tipografía
- Elección de tipografías para web y las distintas alternativas a nuestra disposición
- Unidades de medida, absolutas y relativas
- Propiedades tipográficas
- Contenido dinámico vs. contenido estático y sus consecuencias a la hora de estilizar la tipografía
COLOR
- Distintas formas de hablar en RGB
- Color de fondo y color del texto
LAYOUT, PRIMERA PARTE: HTML + CSS
- Relación de las etiquetas estructurales a los típicos “bloques” de un programa de diseño, todo es un rectángulo
- Unidades de medida
- Márgenes, por dentro y por fuera
- Modelo de caja
- Posicionamiento estático, o lo que está detrás del flujo normal
- Rompiendo el flujo normal: posicionamiento relativo, absoluto y fijo
- Introducción al diseño responsive, media queries
CSS, TERCERA PARTE: LA CAJA DE HERRAMIENTAS GRÁFICAS
- Bordes
- Imágenes de fondo y su diferencia con las imágenes de contenido
- Degradados de color
- Sombras
- Modos de fusión
- Filtros
- Transformaciones
HTML, SEGUNDA PARTE: FORMULARIOS
- Introducción a los formularios
- Elementos de entrada de datos
LAYOUT, SEGUNDA PARTE: FLEX
- El modelo de caja flexible
- Flex vs. flujo normal
- Opciones de Flex
- Flex y su relación al diseño responsive
- Limitaciones de Flex
LAYOUT, TERCERA PARTE: GRID
- Cuadrículas a la hora de diseñar una web
- Grid vs. Flex vs. flujo normal
- Opciones de Grid
LAYOUT, GRAND FINALE: DISEÑANDO EN EL NAVEGADOR
- Todo es combinable
- Maquetación idiomática, o como pensar en CSS
- Todo diseño web será responsive
JAVASCRIPT
DINAMISMO Y FUNCIONALIDAD
WORDPRESS, KIT DE SUPERVIVENCIA
- Naturaleza dinámica del contenido
- ¿Qué es WordPress?
- Introducción a PHP
- ¿Qué es JavaScript?
- Introducción a la programación
- Variables, condicionales, bucles y funciones
LA API DEL DOM, O LO QUE TRADICIONALMENTE ASOCIAMOS A JAVASCRIPT
- ¿Qué es una API?
- El DOM
- Distintas formas de capturar elementos del DOM
- Sintaxis de punto como piedra angular de la API del DOM, getters/setters
- Gestión de clases
- Gestión de atributos
- Añadir y eliminar elementos: HTML dinámico, primera parte
- El bucle de eventos, o cómo convertir HTML en un espacio interactivo
- Callbacks
- El objeto event y cómo gestionar los eventos básicos del navegador
AJAX, O CÓMO COMUNICARNOS CON EL BACKEND
- ¿Qué es el backend?
- Peticiones y respuestas, el protocolo HTTP
- Conexiones asíncronas con el servidor, el objeto XHR
- Strings que van y Strings que vienen, JSON como lengua franca entre lenguajes de programación
JQUERY
- Libraries, frameworks
- ¿Qué es jQuery?
- Manipulación del DOM
- AJAX
- Ecosistema WordPress
- Al final, todo es HTML y CSS
MÓDULO DISEÑO WEB CON WORDPRESS
INTRODUCCIÓN
- La web. Tipos y estructuras
- Google Mobile First Index
- WordPress. ¿Qué es?
- El Diseño web. Proceso creativo
INVESTIGANDO
- Proceso de investigación
- Técnicas de análisis
COTIZANDO Y PLANIFICANDO
- ¿Cuánto vale mi página web?
- Planificación temporal del trabajo
- Sistemas de gestión para trabajar el diseño web
CONCEPTUALIZANDO LA WEB
- La inspiración y toma de referencias
- La identidad visual. Manual de estilos web
- Creación del árbol de contenidos
- Boceteo o wireframes
- Creación de mockups
- Prototipado de la web
- Presentación al cliente y preparación de contenidos
CREANDO CONTENIDOS
- Copywriting
- Tipos de contenidos
- La generación de contenidos en WordPress.
- Post y páginas
- Las imágenes. Tipos y tratamiento para web
- Política de Privacidad y la Política de Cookies
DESARROLLANDO NUESTRA WEB I
- Conociendo WordPress
- Instalación en local y servidor
- Preparación de un WordPress. Pasos esenciales
- Estructura de WordPress y su interfaz
- Los plugins
- Biblioteca de medios: optimización de imágenes
- Los temas
- Tipos de temas
- Explicando un tema
- Trasladando nuestro diseño a WordPress
- Diseñando el body
- Compositores visuales: Elementor
- Addons y complementos
- Creando web en Mobile first
- Formularios de contacto
- Diseñando headers personalizados.
- Los menús
- Diseñando footers personalizados
- Creación propia de plantillas y snippets
- Creación de layouts personalizados para post
- Creación de post types personalizados y sus layouts
- Creación de campos personalizados
- Ecommerce: WooCommerce
- Explicación y configuración de una tienda online
- Creación de plantillas de producto personalizadas
- Modificación y configuración del checkout
- Plugins necesarios
- Gestión de usuarios en WordPress
- Roles de usuarios
- Registro de usuarios
- Creación de áreas privadas y membrecías
- Visualización de contenidos según roles
- Traducción de páginas web
- Uso del plugin
- Traducción de temas y plugins
- Exportación y copias de seguridad de WordPress
- Otros plugins de interés: sliders, compartir en redes sociales, feeds, chats, etc.
- Desarrollando la Web: Introducción al editor visual (Gutenberg).
- Integración de WordPress con servicios de terceros como por ejemplo: Recaptcha,
- Mailchimp, Google Analytics, Google Search Console
DESARROLLANDO NUESTRA WEB II
- Introducción al Inbound marketing para WordPress
- Creación de mapas del site
- Instalación y configuración de plugin de SEO
DESARROLLANDO NUESTRA WEB III
- Técnicas de mantenimiento de WordPress
OPTIMIZANDO Y PROTEGIENDO NUESTRA WEB
- Optimización de rendimiento de nuestro WordPress
- Optimización del código
- Instalación de cachés
- Protección del WordPress
- Protección de los accesos a WordPress
- Protección de contenidos y carpetas
- Protección contra ataques exteriores
MÓDULO DISEÑO EN EXPERIENCIA DE USUARIO E INTERFACES (UX/UI)
INTRODUCCIÓN: UX/UI Y FIGMA
- Introducción UX/UI
- Introducción Figma
- Animación Figma
EL CLIENTE
- Briefing
- Datos del negocio
- Toma de requisitos
- Análisis de la competencia
HEURÍSTICAS Y DISEÑO DE INTERACCIÓN
- Análisis heurístico
- Diagramas de flujo
- Principios de UX
- Desarrollo de wireframes: Whimsical
DISEÑO VISUAL
- Principios de diseño
- Principios de color y tipografía
- Diseño de formularios
- Uso de la Grid o Retícula
- Accesibilidad
METODOLOGÍAS ÁGILES
- Design Sprint
- Scrum
- Lean
- Design Thinking
DISEÑO DE APPS
- Medidas de dispositivos mobile
- Tipografías
- Colores
- Grid
- Diseño y prototipado con Figma
- Sistemas de diseño
- Árbol de contenidos
ARQUITECTURA DE LA INFORMACIÓN
- Medidas web
- Tipografías
DISEÑO VERSIÓN WEB
- Sistemas de organización
- Sistemas de etiquetado
- Sistemas de navegación
- Sistemas de búsqueda
FIGMA AVANZADO
- Auto layout
- Componentes y variaciones
- Atomic Design y Sistema de diseño
- Colores
- Grid
- Diseño y prototipado con Figma
- Sistemas de diseño
UX Y SEO
- Similitudes entre UX y SEO
- Factores SEO (Web)
- Factores ASO (apps)