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

Otorgar conocimientos acerca del análisis de la competencia, los principios del diseño visual, el árbol de contenidos, la elección de un editor de texto, el contenido dinámico y estático, el diseño de formularios, y el ecosistema WordPress.
Crear un interesante método de aprendizaje, en el cual se enseña sobre el dinamismo y funcionalidad, la gestión de eventos básicos del navegador, la manipulación del DOM, y el proceso creativo del diseño web.
Enseñar sobre la optimización de imágenes, los formularios de contacto, el manual de estilos web, y la política de privacidad y política de cookies.

Máster en Diseño Web y UX/UI

MÓDULO - OPCIÓN 1
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 - OPCIÓN 2
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