Máster en diseño y programación UX/UI

TEMA 1. LA PERCEPCIÓN VISUAL
- Introducción.
- Fundamentos del lenguaje plástico.
- Principios de organización de la percepción: la Gestalt.
- Factores culturales.

TEMA 2. ESTRUCTURA GEOMÉTRICA DEL PLANO
- Introducción.
- El rectángulo: proporciones y tipos.
- Divisiones geométricas del campo.
- Estructura modular: composición.

TEMA 3. FORMATOS DE PAPEL
- Los orígenes del papel.
- Los formatos.
- El papel: tipos y características.

TEMA 4. LA TIPOGRAFÍA
- Un poco de memoria.
- El tipo.
- Clasificación.
- Sistemas de medidas.
- Tipografía digital.

TEMA 5. LA RETÍCULA
- Antecedentes.
- Estilo clásico.
- Estilo suizo.
- La retícula en el diseño actual.

TEMA 6. LA PÁGINA
- Introducción.
- Elementos de una página.
- Elementos gráficos y ornamentales.
- Estructura del párrafo.
- Tipografía: cuerpo, fuente y color.
- Legibilidad y comunicación.

TEMA 7. LA IMAGEN
- Las primeras imágenes: la Fotografía.
- La Trama.
- Los Originales.
- La reproducción de la imagen.

TEMA 8. EL COLOR
- Un poco de historia.
- Clasificación del color.
- Cualidades del color.
- Dinámica del color, visibilidad y retención
- Psicología del color.

TEMA 9. LA IMPRESIÓN
- Introducción.
- Sistemas de impresión.
- Emulsión de los fotolitos.
- Técnicas de Preimpresión.
- Impresión del color sobre papel.
- Ganancia de punto.

TEMA 10. LA PERSPECTIVA
- Introducción.
- Geometría descriptiva: sistemas de Proyección.
- Sistemas de Proyección Ortogonal.
- Sistemas de Proyección Cligonal.
- Sistemas de Proyección Cónico.

TEMA 11. MODELADO 3D
- Introducción.
- Tipos de geometrías.
- Primitivas estándar.
- Elementos del modelado 3D.

TEMA 12. ILUMINACIÓN, MATERIALES, TEXTURIZACIÓN Y RENDERIZACIÓN
- Tipos de iluminación.
- Materiales
- Texturización.
- Renderización.

TEMA 1. INTRODUCCIÓN A REACT
- Breve historia
- Instalar Node.js
- Configurar el editor de texto

TEMA 2. JAVASCRIPT EN REACT
- Variables
- Funciones
- Compilación
- Objetos y Arreglos
- JavaScript asíncrono
- Módulos ES6
- Programación funcional en JavaScript

TEMA 3. ANATOMIA DE REACT
- Configuración de la página
- El DOM en React
- Elementos y componentes

TEMA 4. INTRODUCCIÓN A JSX
- Comprendiendo JSX
- Babel
- Intro a webpack

TEMA 5. HOOKS EN REACT
- ¿Qué es un Hook?
- Hooks indiscpensables
- Creando Hooks a la medida

TEMA 6. STATE MANAGEMENT CON REACT
- El useState Hook
- Creando un componente de medición
- El useContext Hook
- Configurando MongoDB
- Conectando MongoDB a nuestra aplicación
- Creando un modelo de usuario
- Autenticación de cuentas

TEMA 7. PROCESO DE CONSTRUCCIÓN DE UNA API
- Reestructuración del flujo de datos
- Creando una función AJAX
- Vinculando la API con el usuario

TEMA 8. REACT NATIVE
- Vinculando la API con el usuario
- Aplicaciones para móviles
- Introducción a Styles en React Native

TEMA 9. INTERACTIVIDAD
- Diferentes gestos en los touch screen
- Aplicaciones

TEMA 10. IMPLEMENTACIÓN
- Construcción de la aplicación
- Implementación online

TEMA 1. LA ACCESIBILIDAD
- Qué es la accesibilidad
- Legislación sobre accesibilidad
- Estándares de la web
- Pautas de accesibilidad al contenido
- Componentes esenciales de accesibilidad web
- Web semántica
- Evaluación de la accesibilidad
- Relación entre accesibilidad y SEO

TEMA 2. LA USABILIDAD WEB
- Concepto de usabilidad
- Los cinco pilares de la usabilidad
- Posicionamiento Web y usabilidad
- Diseño Centrado en el Usuario
- La interacción persona-ordenador
- Accesibilidad y usabilidad
- Usabilidad y analítica Web
- La usabilidad Web orientada al usuario

TEMA 3. DESARROLLO
- Introducción
- Planificación y test de usuario
- Diseño y arquitectura de la información
- Evaluación
- Lanzamiento
- Seguimiento

TEMA 4. ELEMENTOS WEB CON USABILIDAD
- Formularios
- Cabecera
- Colores que ayudan.
- Menús de navegación
- Crear Newsletter (Boletines de información)
- Buscador de nuestra Web.
- Elementos animados

TEMA 5. REALIZACIÓN DE UN TEST HEURÍSTICO DE USABILIDAD WEB
- Instrucciones
- Bloque Preguntas I
- Bloque de Respuestas I
- Bloque Preguntas II
- Bloque de Respuestas II
- Bloque Preguntas III
- Bloque de Respuestas III
- Bloque Preguntas IV
- Bloque de Respuestas IV

TEMA 6. USABILIDAD WEB MÓVIL
- Uso Web móviles
- Factores de usabilidad Web móvil
- Decálogo de la usabilidad Web Móvil.
- Validador W3C Web móviles
- Usabilidad Web Móvil y Marketing Mobile

TEMA 7. REALIZACIÓN DE UN TEST DE USABILIDAD PRÁCTICO SENCILLO
- Introducción
- Creación de un test con Usabilidad
- Realización del Test por parte de los usuarios
- Evaluación de los resultados

TEMA 8. REALIZACIÓN DE UN TEST DE USABILIDAD PRÁCTICO COMPLETO (USABILITYHUB)
- Introducción
- Registro en UsabilityHub
- Diseño de tests

TEMA 1. CARACTERÍSTICAS DE SEGURIDAD EN LA PUBLICACIÓN DE PÁGINAS WEB
- Seguridad en distintos sistemas de archivos
- Permisos de acceso
- Órdenes de creación modificación y borrado

TEMA 2. HERRAMIENTAS DE TRANSFERENCIA DE ARCHIVOS
- Parámetros de configuración
- Conexión con sistemas remotos
- Operaciones y Comandos / órdenes para transferir archivos
- Operaciones y Comandos / órdenes para actualizar y eliminar archivos

TEMA 3. PUBLICACIÓN DE PÁGINAS WEB
- Buscadores genéricos
- Buscadores especializados
- Descriptores: palabras clave y sistemas normalizados de «metadatos»
- Aplicaciones de publicación automatizada
- Procedimientos de publicación

TEMA 4. PRUEBAS Y VERIFICACIÓN DE PÁGINAS WEB
- Técnicas de verificación
- Herramientas de depuración para distintos navegadores
- Navegadores: tipos y plugins

TEMA 1: INTRODUCCIÓN A INTERNET Y AL DESARROLLO WEB
- ¿Qué es internet?
- ¿Qué es la web?
- Hipervínculos
- Dominios
- Breve Historia de internet

TEMA 2: INTRODUCCIÓN AL DISEÑO WEB
- Introducción al diseño
- Introducción al diseño web
- Introducción al diseño UI (User Interface) o diseño de interfaces
- Introducción al diseño UX (User Experience) o de experiencia de usuario
- Colores
- Tipografía
- Composición
- Imágenes y resolución

TEMA 3: INTRODUCCIÓN AL DISEÑO RESPONSIVE
- Adaptación de elementos
- Mobile-First design

TEMA 4: MI PRIMER DISEÑO WEB
- Estructura web básica: Práctica Diseño 1 – Estructura Web
- Secciones de una página web: Práctica Diseño 2 – Contenido Web
-

TEMA 5: INTRODUCCIÓN AL HTML
- ¿Qué es HTML?
- Etiquetas HTML5: Head
- Etiquetas de HTML 5: Navegación
- Etiquetas HTML5: Insertar imágenes
- Etiquetas HTML5: Contenido
- Etiquetas HTML5: Footer
- La estructura de la página web

TEMA 6: INTRODUCCIÓN AL CSS
- ¿Qué es CSS
- Propiedades CSS
- Añadir CSS
- Ejemplo HTML y CSS
- Recursos CSS

TEMA 7: RECURSOS, HERRAMIENTAS Y PROGRAMAS.
- Recursos
- Portales de imágenes y vectores
- Webs de ejemplos de código
- CMS: WordPress

TEMA 1. INTRODUCCIÓN
- Recursos para diseñar y optimizar nuestra web
- Recursos para crear mockups y prototipos
- Recursos para SEO y Marketing digital

TEMA 2. COLOR
- Crear paletas de color
- Paletas de color predefinidas: Brand Colors; htmlcolorcodes; Adobe Color CC; Coolors.co.

TEMA 3. IMÁGENES, VECTORES Y VIDEOS
- Bancos de imágenes y vídeo: Pixabay; Unsplash.com.
- Vectores y otros recursos gráficos: Freepik; Vecteezy.
- Creación online de logotipos

TEMA 4. TIPOGRAFÍAS
- ¿Cómo elegir tipografía?
- Buscar tipografías: Google Fonts; WhatFontIs; Dafont.
- Importar tipografías para web
- Importar tipografías en WordPress
TEMA 5. ICONOS
- Cómo diseñar iconos
- Librerías de iconos: Flaticon.es; Icon-icons.com; Collecticons.io

TEMA 6. OTROS RECURSOS Y LIBRERÍAS
- Introducción a Librerías y Frameworks
- CSS3 Button Generator
- Otros recursos
- GitHub

TEMA 7. MOCKUPS Y PROTOTIPOS
- Herramientas para creación y edición de Mockups
- Buscar y editar free-mockups
- Cómo modificar Mockups predefinidos

TEMA 1. DISEÑO WEB CON FIGMA
- Introducción a Figma
- Crear una cuenta
- Interfaz de Figma
- Herramienta Frame
- Grids
- Páginas

TEMA 2. DISEÑO UI
- Tu primer mockup.
- Las formas: Rectángulo; Polígonos; Líneas; Círculos
- Propiedades
- Herramienta pluma
- Trazado y relleno
- Imágenes y elementos SVG
- Alineación
- Agrupación
- Tipografías
- Google Fonts
- Enlaces
- Selección de colores

TEMA 3. ESTILOS
- Crear y configurar estilos
- Aplicar estilos
- Modificar estilos

TEMA 4. PLUGINS DE FIGMA
- Como instalar plugins
- Utilizar plugins
- Plugins más utilizados
- Prototipado
- Sistemas de diseño

TEMA 5. WIREFRAMES CON FIGMA
- Planeando el sitemap
- Creando el wireframe de la homepage
- Wireframe Componentes: Header; Menú; Footer
- Wireframing your Features Page and Contact Page
- Mobile Responsive Wireframes

TEMA 6. EXPORTACIÓN Y PROTOTIPADO
- Cómo exportar
- De Figma al código CSS

TEMA 7. DOCUMENTOS COLABORATIVOS
- Compartir documentos
- Editando en directo

TEMA 8. CASOS DE USO
- Ejemplos prácticos

TEMA 9. CREACIÓN DE MOCKUPS PARA WEB Y APP
- Sitemap
- Homepage
- Servicios
- Contacto: Diseñar Formularios
- Blog
- Tienda online: Listado de productos; Producto individual.
- Extras

TEMA 1. INTRODUCCIÓN A ADOBE EXPERIENCE DESIGN
- Diseño web con Adobe XD
- Instalación Adobe XD y primeros pasos

TEMA 2. CREAR Y CONFIGURAR PROYECTOS
- Crear documentos
- Interface
- Grids y layouts

TEMA 3. DISEÑANDO CON ADOBE XD
- Herramientas de creación de formas
- Crear gráficos y textos
- Importar gráficos
- Herramienta de pluma
- Capas y fusión de capas
- Alineación de elementos
- Herramienta de repetición de elementos
- Exportando elementos y artboards
- Símbolos
- Componentes
- Crear columnas

TEMA 4. DISEÑAR APLICACIONES INTERACTIVAS CON ADOBE XD
- Crear múltiples pantallas y diferentes tamaños
- Añadir interacción entre elementos
- Crear transiciones entre pantallas
- Exportar mesas de trabajo y assets

TEMA 5. EXPORTACIÓN
- Métodos de exportación
- Compartir proyectos
- Plugins para Adobe XD
- Free toolkits

TEMA 6. CREACIÓN DE MOCKUPS PARA APP
- Crear el Sitemap: Homepage; Servicios; Contacto; Formularios; Blog; Tienda online; Extras

TEMA 1. HERRAMIENTAS NECESARIAS
- Introducción
- Editor de texto
- Navegadores

TEMA 2. INTRODUCCIÓN HTML
- Introducción HTML
- ¿Cómo creamos documento HTML?
- Características básicas

TEMA 3. TEXTO, ENLACES, LISTAS, IMÁGENES Y OBJETOS
- Textos en HTML
- Enlaces
- Listas en HTML
- Imágenes y objetos

TEMA 4. TABLAS, FORMULARIOS Y ESTRUCTURAS
- Tablas
- Formularios
- Estructuras y layout

TEMA 5. OTRAS ETIQUETAS IMPORTANTES
- Otras etiquetas importantes

TEMA 6. METAINFORMACIÓN, ACCESIBILIDAD Y VALIDACIÓN
- ¿Qué es la Metainformación?
- Accesibilidad
- Validación

TEMA 7. INTRODUCCIÓN CSS
- Introducción CSS
- Soporte de CSS en navegadores
- Especificación oficial
- Funcionamiento básico de CSS
- ¿Cómo incluir CSS en la Web?
- Estilo básico
- Medios CSS
- Comentarios
- Sintaxis de la definición

TEMA 8. SELECTORES, UNIDADES DE MEDIDA Y COLORES
- Selectores CSS
- Unidades de medida
- Colores

TEMA 9. MODELOS DE CAJAS, POSICIONAMIENTO Y VISUALIZACIÓN
- Modelo de cajas
- Propiedades de las cajas
- Margen, relleno, bordes y modelo de cajas
- Posicionamiento y visualización
- Posicionamiento
- Visualización

TEMA 10. ESTRUCTURAR UNA PÁGINA LAYOUT
- Introducción a layout
- ¿Cómo centrar una página horizontalmente?
- ¿Cómo centrar una página verticalmente?
- Estructura y layout
- Altura/anchuras máximas y mínimas
- Estilos avanzados

TEMA 11. TEXTO, ENLACES, IMÁGENES Y LISTAS
- Textos en CSS
- Enlaces
- Imágenes
- Listas

TEMA 12. TABLAS, FORMULARIOS Y SHORTHAND
- Tablas
- Formulario

TEMA 13. OTRAS UTILIDADES DE CSS
- Versión para imprimir
- Personalizar el cursor
- Hacks y filtros
- Prioridad en las declaraciones
- Validar CSS
- Recomendaciones Generales
- Recursos útiles

TEMA 14. FIREBUG
- ¿Qué es Firebug?
- ¿Cómo se instala?
- ¿Cómo usamos Firebug

TEMA 1. INTRODUCCIÓN HTML5
- ¿Qué es HTML5?
- ¿Cuáles son las mejoras?
- Etiquetas Obsoletas
- Etiquetas modificadas
- Lista de etiquetas HTML5
- Atributos eliminados
- Otros cambios
- Estructura HTML5
- Nueva estructuración del body
- Otros elementos nuevos de estructuración

TEMA 2. NUEVOS ATRIBUTOS, EVENTOS Y PSEUDO-CLASES
- Introducción a atributos globales
- Nuevos atributos
- Introducción a los nuevos eventos

TEMA 3. NUEVOS ELEMENTOS SEMÁNTICOS
- Elemento bdi
- Elemento command
- Elemento data
- Elementos details
- Elemento mark
- Elemento meter
- Elemento progress
- Elemento ruby
- Elemento time
- Elemento wbr

TEMA 4. MEJORAS EN LOS FORMULARIOS
- Nuevos elementos para los formularios
- Cambios en el atributo type (input)
- Nuevos atributos para form
- Nuevos atributos para fieldset
- Nuevos atributos para input
- Nuevos atributos para textarea

TEMA 5. OTRAS MEJORAS DE HTML5
- Introducción a los elementos multimedia
- Etiqueta source
- Etiqueta track
- Elemento video
- Elemento audio
- Elemento embed
- Elemento canvas
- Introducción a MathML
- Introducción a SVG
- Introducción a Drag and Drop
- Validador HTML5

TEMA 6. INTRODUCCIÓN A CSS3
- Introducción
- Unidades, colores y fuentes
- Nuevos Selectores y pseudo-clases

TEMA 7. ANIMACIONES, FONDOS Y BORDES
- Propiedades para la animación
- Nuevas propiedades para los fondos
- Nuevas propiedades para bordes

TEMA 8. CAJAS, CAJAS FLEXIBLES, COLORES Y FUENTES
- Propiedades de las cajas
- Propiedades de las cajas flexibles
- Propiedades del color
- Propiedades para las fuentes

TEMA 9. ENLACES Y MULTI-COLUMNAS
- Propiedades para los hiperenlaces
- Propiedades de las multi-columnas

TEMA 10. TEXTO Y 2D/3D TRANSFORMACIONES
- Propiedades para texto
- Propiedad 2D/3D Transform

TEMA 11. TRANSICIONES E INTERFAZ DE USUARIO
- Propiedades para las transiciones
- Propiedades para la interfaz de usuario
- Validación CSS

TEMA 1. INTRODUCCIÓN
- Diferencias entre navegadores
- Mejorar la compatibilidad
- Normalizar estilos
- Media Queries

TEMA 2. MEDIA QUERIES
- Objetivo y orígenes
- Sintaxis de las media Queries
- Ubicación de las media Queries en CSS
- Tamaños de pantalla: Móvil; Tablet; Escritorio PC; Pantallas de TV, HD y 4K
- Viewport
- Cuadrículas

TEMA 3. DISEÑO WEB RESPONSIVE
- Introducción
- Cuadrículas responsive
- Imágenes
- Tipografías
- Tablas

TEMA 4. FRAMEWORKS
- ¿Qué son los Frameworks?
- Bootstrap
- Foundation
- Descargar plantillas
- Librerías y ejemplos
- Más ejemplos
- Casos de uso

TEMA 5. GOOGLE DEVELOPER TOOLS
- Inspeccionar y examinar HTML y CSS
- Editar HTML/CSS
- Habilitar y deshabilitar estilos
- Mover y eliminar elementos
- Registros de la consola y otros comandos
- Símbolos especiales de la consola
- Examinar la red y los recursos
- Otros complementos

TEMA 1. INTRODUCCIÓN
- Conceptos fundamentales en JavaScript
- Desarrollo del código JavaScript sólido y legible
- Aprendizaje de las prácticas de desarrollo en JavaScript

TEMA 2. CONCEPTOS EN JAVASCRIPT
- Qué es JavaScript
- Qué representa JavaScript en el desarrollo web actual
- Despliegue del entorno de desarrollo, Aptana Studio
- Buenas prácticas y recomendaciones
- Variables: Diferencias entre ámbito local y global; Instrucciones Let y Var
- Constantes
- Tipos primitivos
- Tipado dinámico
- Objetos
- Arrays
- Funciones

TEMA 3. OPERADORES DE JAVASCRIPT
- Conceptos sobre operadores en JavaScript
- Operadores aritméticos
- Operadores de asignación
- Operadores de comparación
- Operadores de igualdad
- Operadores ternarios
- Operadores lógicos y booleanos
- Operadores BitWise
- Jerarquización de operadores

TEMA 4. CONTROL DE FLUJO DE EJECUCIÓN EN JAVASCRIPT
- Sentencia if…else
- Sentencia switch…case
- Sentencia for
- Sentencia for…in
- Sentencia for…of
- Sentencia while
- Sentencia do…while
- Cómo evitar bucles infinitos
- Sentencias break and continue

TEMA 5. OBJETOS EN JAVASCRIPT
- Definición de los objetos y de su naturaleza dinámica
- Referencias
- Tipos
- Enumeración de las propiedades de un objeto
- Uso de objetos en JavaScript
- Clonación de un objeto
- ¡Las funciones son objetos en JavaScript!
- Funciones Factory
- Funciones Constructor
- Propiedad del constructor
- Recolección de basura
- El objeto Math
- El objeto String
- Plantillas literales (plantillas de cadenas)
- El objeto Fecha

TEMA 6. ARRAYS EN JAVASCRIPT
- Conceptos de la gestión de arrays (matrices)
- Incorporación y eliminación de elementos en arrays
- Vaciado de un array
- Localización de elementos (primitivos)
- Búsqueda de elementos (tipos de referencia)
- Funciones Flecha (Arrow)
- Combinación y corte de arrays
- El operador de propagación (Spread)
- Iteraciones con arrays
- Clasificación de arrays
- Filtrado de un array con el método filter
- Mapeo de arrays
- Reducción de una matriz con el método reduce

TEMA 7. FUNCIONES EN JAVASCRIPT
- Diferencias entre expresiones y declaraciones
- Hoisting en JavaScript
- Argumentos de una función
- El operador Rest
- Parámetros predeterminados
- Getters y Setters
- Gestión de excepciones con la sentencia try…catch
- La palabra clave This