Máster en Diseño y Programación Web 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 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 individua
• 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 CSS3

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

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