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

TEMA 1. EL DISEÑO

• Definición de Diseño
• La práctica del diseño
• Disciplinas del diseño
• Signo y Símbolo
• Elementos básicos del diseño
• Teoría de la percepción

TEMA 2. EL COLOR

• Teoría del color
• El círculo cromático
• La armonía
• Contrastes de color
• Psicología del Color

TEMA 3. TIPOGRAFÍA

• Definición de tipografía
• Características de los tipos
• Clasificación de los tipos
• Clasificación histórica
• Clasificación por forma
• Elementos tipográficos
• Tipografía digital
• La tipografía en el diseño

TEMA 4. TÉCNICAS DE COMPOSICIÓN

• ¿Qué es la composición?
• Estructuras compositivas
• El espacio
• La Sección Áurea
• Las figuras geométricas
• Los planos compositivos
• Ritmo visual
• Equilibrio visual
• Equilibrio estático
• Equilibrio dinámico

TEMA 5. DISEÑO PUBLICITARIO

• La publicidad
• Objetivos de la publicidad
• Medios publicitarios
• Identidad corporativa
• Logotipo y marca
• Estrategias de diseño
• Publicidad impresa
• Publicidad en televisión
• Packaging
• Del diseño a la realización

TEMA 6. MAQUETACIÓN

• ¿Qué es la maquetación?
• Preparar un documento para la maquetación
• Ocupando el espacio de la página
• Texto e imagen
• Composición del texto
• Errores frecuentes

TEMA 7. FOTOMECÁNICA E IMPRESIÓN

• ¿Qué es la fotomecánica?
• Pasos de una impresión
• Escaneado
• El escáner
• Filmación
• Fotolitos
• Las tintas
• Tipos de impresión

TEMA 8. DISEÑO WEB

• Qué implica el diseño Web
• Planificación de una página Web
• Tipos de sitios Web
• Análisis demográfico
• Definir el estilo
• Maquetación
• Creación del sitio
• Nociones básicas
• HTML
• CSS
• Flash
• Colgar el sitio en la red
• Promoción del sitio web

TEMA 9. DISEÑO 3D

• El diseño tridimensional
• Fundamentos
• Interfaces de navegación
• Modelado
• Animación
• Imagen final
• Materiales y texturas
• Iluminación y render
• Formatos
• Atajos de teclado

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. INTRODUCCIÓN A LOS FUNDAMENTOS DEL DISEÑO VISUAL

• Principios de composición y diseño visual
• Principios de la Gestalt aplicados al diseño
• Jerarquía visual

TEMA 2. INTRODUCCIÓN A FIGMA

• ¿Qué es?
• ¿Qué usos tiene?
  • Diseño colaborativo
  • Diseño de productos digitales
  • Comunidad Figma
  • Planes
• La comunidad Figma
  • Archivos
  • Plugins

TEMA 3. CREACIÓN DE UNA CUENTA EN FIGMA E INSTALACIÓN

TEMA 4. LA INTERFAZ DE FIGMA 

• Creación de proyectos
• Guardar Proyectos

TEMA 5. PRIMEROS PASOS CON FIGMA 

• Herramienta Frame
• Herramienta Rectángulo y sus propiedades
• Importar elementos e imágenes SVG
• Grid, Grupos y Textos
• Alineación en Figma
• Herramienta Pluma.
• Trazados y rellenos

TEMA 6. ELEMENTOS VISUALES EN FIGMA 

• Composición básica
• Tipografías y Google Fonts
• Paletas de colores
• Gráficos e Iconos

TEMA 7. CONFIGURACIÓN DE ESTILOS

• Guías de estilos
• Crear estilos de texto y párrafo
  • Aplicar Estilos
  • Modificar
  • Eliminar Estilos

TEMA 8. PLUGINS EN FIGMA 

• Instalación de Plugins
  • Lorem Ipsum o Content Reel
  • Get Waves

TEMA 9. WIREFRAMES

• ¿Qué es un Wireframe?
• Planificación previa del prototipo
  • Del papel a Figma
• Creación de la Página de Inicio
• Componentes del Wireframe:
  • Cabecera
  • Menú
  • Pie de página
• Wireframe Responsive

TEMA 10. COMPONENTES EN FIGMA 

• Creación de componentes
• Duplicar componentes
• Modificar o eliminar componentes

TEMA 11. APLICACIÓN DE MÁSCARAS EN FIGMA 

TEMA 12. PROTOTIPADO EN FIGMA 

• ¿Cómo darle vida al prototipo?
  • Interacciones de botones
  • Vinculaciones a páginas y modales
• Prototipado colaborativo

TEMA 13. MOCKUPS EN FIGMA

• ¿Qué es un mockup?
• Mockups en figma
  • Artboard Studio Mockups
  • Vectary 3D Elements

TEMA 1. PRESENTACIÓN

• Presentación
• Funcionalidades no aptas en Adobe Experience Design
• Funcionalidades principales (Experiencia de uso)
• Flujo de trabajo
• Novedades

TEMA 2. SOFTWARE

• Descarga e instalación
• Instalación en varios equipos
• Administración de cuentas
• Actualización o cambio de inscripción

TEMA 3. INTERFAZ DE TRABAJO

• Pantalla principal
• Herramientas
• Menú superior
• Paneles laterales

TEMA 4. DISEÑOS BÁSICOS

• Creación de mesa de trabajo (Artboard) y rejillas (Grids)
• Dibujos con formas
• Herramienta texto
• Creación de objetos
• Distribución
• Movimiento de objetos
• Herramientas de color y gradientes
• Edición de objetos duplicados y agrupación
• Símbolos
• Uso de imágenes

TEMA 5. ADOBE XD PARA LA CREACIÓN DE NUESTRA WEB

• Edición de figuras
• Imágenes enmascaradas
• Estructuración de Web con rejillas
• Creación de columnas
• Importación de mapas de bits
• Importación de vectores 
• Uso de CSS en Illustrator
• Flujo de navegación

TEMA 6. ADOBE XD EN IOS Y ANDROID

• Previsualización en dispositivo IOS
• Previsualización en dispositivo Android
• Eliminación de archivos en tu dispositivo

TEMA 7. COMPARTIR PROYECTO Y EXPORTACIÓN

• Previsualización
• Compartir nuestro prototipo
• Uso de contraseña para publicar
• Borrar contenido publicado
• Exportación de gráficos
• Publicaciones para desarrolladores

TEMA 8. APLICACIONES PARA MAC Y WINDOWS

• Consejos y trucos generales
• Dibujo y texto
• Importación de contenido
• Controles de teclado
• Artboards
• Repetición de rejilla
• Creación de prototipos 
• Vista previa
• Publicaciones

TEMA 9. DESARROLLO PRÁCTICO

• Diseño de pantalla de inicio
• Diseño de identificación y registro
• Diseño de la aplicación
• Prototipo de la aplicación
• Final de la aplicación

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