Máster en Diseño Web Centrado en el Usuario y Optimización de Experiencia Digital

MÓDULO 1. USABILIDAD UNIDAD DIDÁCTICA 1. INTRODUCCIÓN Introducción La usabilidad Qué es UI vs UX - interfaz de usuario vs Experiencia de usuario Atributos Complejidad e importancia de la usabilidad Pirámide de prioridades de la usabilidad Mejoras de la usabilidad al producto final Procesos y herramientas UNIDAD DIDÁCTICA 2. EXPERIENCIA DE USUARIO -UX Definición de Experiencia de Usuario Principios de la Experiencia de Usuario El papel del diseñador UX en el proceso de creación Etapas del diseño UX Técnicas para el diseño UX Herramientas UX UNIDAD DIDÁCTICA 3. DISEÑO CENTRADO EN EL USUARIO ¿Qué es el Diseño Centrado en el Usuario? ¿Para que sirve el Diseño Centrado en el Usuario? Las metodologías del Diseño Centrado en el Usuario El marketing centrado en el usuario Aplicación del Diseño Centrado en el Usuario Ejemplos del Diseño Centrado en el Usuario UNIDAD DIDÁCTICA 4. FORMAS DE ENFOCAR LA USABILIDAD Introducción Un proceso multidisciplinar La usabilidad aplicada El ciclo diseño-investigación UNIDAD DIDÁCTICA 5. INTERFAZ DE USUARIO -UI Definición de Interfaz de Usuario - UI Elementos de la interfaz de Usuario Optimización de las interfaces de Usuario Herramientas para el diseño UI Diseño basado en las percepciones Fundamentos del diseño de interacción Moodboards Qué es el IxD MÓDULO 2. PROTOTIPADO: DISEÑO Y CONSTRUCCIÓN CON ADOBE XD UNIDAD DIDÁCTICA 1. PRIMEROS PASOS EN ADOBE XD Introducción a Adobe XD Instalación y configuraciones principales Menú Herramientas Generación de Artboards y guía Ejercicios UNIDAD DIDÁCTICA 2. HERRAMIENTAS BÁSICAS Formas: creación, modificación, colores, gradiantes y paletas Textos: propiedades, línea o área, alineación, color y estilos Imágenes y exportación: importanción, modificaciones y exportación de artboards Ejercicios UNIDAD DIDÁCTICA 3. ORGANIZACIÓN DE ELEMENTOS I Organización de capas nombres y grupos Bloqueo y fusión Tipos de máscaras y aplicación en proyectos Ejercicios UNIDAD DIDÁCTICA 4. ORGANIZACIÓN DE ELEMENTOS II Alineación de elementos, márgenes y distribución de formas Funcionalidad de repetición Aplicación y configuración de componentes Ejercicios UNIDAD DIDÁCTICA 5. CUADRÍCULAS Creación y aplicación Diseño de páginas Prototipo Adaptación a mobile Ejercicios UNIDAD DIDÁCTICA 6. INTERFACES Constantes y variables de una interfaz Header, footer y menú Botones y galerías Ejercicios MÓDULO 3. INTRODUCCIÓN AL DISEÑO WEB UNIDAD DIDÁCTICA 1. INTRODUCCIÓN Breve historia del diseño Comunicación y publicidad Teoría de la percepción Elementos básicos que intervienen en el diseño La composición Fases del diseño Diseño impreso Diseño digital UNIDAD DIDÁCTICA 2. EL DISEÑO WEB FRENTE AL DISEÑO IMPRESO Interacción Espacio fluido, entorno cambiante Cambio de las limitaciones físicas por limitaciones técnicas Contexto indefinido Dispositivos Tipografías Unidades de medida Color RGB Editar es posible UNIDAD DIDÁCTICA 3. ELEMENTOS BÁSICOS PARA EL DISEÑO WEB Tipografía Color Formas Imágenes Contenido audiovisual Efectos (Sombras, d, flat y otros) UNIDAD DIDÁCTICA 4. BITMAPS Y VECTORES Bitmaps Imágenes rasterizadas Vectores Convertir imágenes de vectorial a bitmap y viceversa UNIDAD DIDÁCTICA 5. LAYOUT Rejilla Composición Elementos Espacios vacíos Coherencia y consistencia UNIDAD DIDÁCTICA 6. PROCESO Aproximación e investigación inicial Bocetos Planificación MÓDULO 4. TÉCNICAS Y HERRAMIENTAS DE DISEÑO UNIDAD DIDÁCTICA 1. DISEÑO GRÁFICO POR ORDENADOR El ordenador: hardware y software Orígenes del diseño gráfico por ordenador Software de diseño gráfico UNIDAD DIDÁCTICA 2. PLANTEAMIENTO DE UN PROYECTO Planteamiento inicial Métodos de trabajo Prototipos conceptuales Análisis de requerimientos Arquitectura de la información Los usuarios La accesibilidad El contenido Métodos para trabajar con el contenido Resolución de conflictos UNIDAD DIDÁCTICA 3. PROTOTIPADO Qué es un prototipo Ventajas y recomendaciones Métodos de prototipado Mapas de navegación La interacción UNIDAD DIDÁCTICA 4. PHOTOSHOP PARA DISEÑO WEB Conceptos básicos Área de trabajo Paneles y menús Herramientas de selección Herramientas de dibujo y edición Herramientas de retoque y transformación Capas Texto Herramientas de dibujo Reglas, acciones, filtros y canales Transformar imágenes y gráficos web MÓDULO 5. FRONTEND EN EL DISEÑO WEB: HTML Y CSS UNIDAD DIDÁCTICA 1. HERRAMIENTAS NECESARIAS Introducción Entornos de Desarrollo Navegadores UNIDAD DIDÁCTICA 2. INTRODUCCIÓN A HTML Introducción HTML ¿Cómo creamos documento HTML? Características básicas UNIDAD DIDÁCTICA 3. HTML: ESTRUCTURA DE UN DOCUMENTO Introducción Versión HTML HTML Head Body UNIDAD DIDÁCTICA 4. HTML: ELEMENTOS Textos en HTML Enlaces Listas en HTML Imágenes y objetos Tablas Formularios Marcos Estructuras y layout Otras etiquetas UNIDAD DIDÁCTICA 5. HTML: CONTENIDO AUDIOVISUAL Audio Video Animaciones UNIDAD DIDÁCTICA 6. HTML: METAINFORMACIÓN, ACCESIBILIDAD Y VALIDACIÓN ¿Qué es la Metainformación? Accesibilidad Validación UNIDAD DIDÁCTICA 7. INTRODUCCIÓN A 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 UNIDAD DIDÁCTICA 8. CSS: SELECTORES, UNIDADES DE MEDIDA Y COLORES Selectores CSS Unidades de medida Colores UNIDAD DIDÁCTICA 9. CSS: PSEUDOCLASES Y PSEUDOELEMENTOS CSS Pseudoclases Pseudo-elementos Otras pseudoclases y pseudoelementos UNIDAD DIDÁCTICA 10. CSS: MODELOS DE CAJA, 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 UNIDAD DIDÁCTICA 11. CSS: FLEXBOX En qué cosiste Visualización: Display Contenedores flexibles: flex e inline-flex Orientación: flex-box, flex-direction y flex-wrap La propiedad order Alineación de los elementos flexibles Soporte de los navegadores UNIDAD DIDÁCTICA 12. CSS: ANIMACIONES CSS Introducción Keyframes Subpropiedades de animación Iteración Curvas de animación Propiedades animables UNIDAD DIDÁCTICA 13. CSS: HOJAS DE ESTILOS Crear y vincular hojas de estilos Estructura Propiedades Css Selectores Posición y tamaño Texto Imágenes Listas, tablas, formularios UNIDAD DIDÁCTICA 14. PRE-PROCESADORES CSS: SASS Y LESS Qué es un preprocesador CSS Less Sass UNIDAD DIDÁCTICA 15. RESPONSIVE DESIGN Introducción Definición de Diseño Web Responsive ¿En qué consiste el diseño responsive? Ventajas del diseño responsive SEO y diseño responsive MÓDULO 6. PROGRAMACION BACKEND Y FRONTEND EN DISEÑO WEB CON PHP Y JAVASCRIPT UNIDAD DIDÁCTICA 1. INTRODUCCIÓN Introducción Programación del lado del cliente Programación del lado del Servidor ¿Qué utilizaremos? ¿Qué necesita saber? Nuestro primer ejemplo UNIDAD DIDÁCTICA 2. INTRODUCCIÓN A JAVASCRIPT La etiqueta SCRIPT Contenido Alternativo Variables Tipos de Datos Operadores Cuadros de diálogo UNIDAD DIDÁCTICA 3. CONCEPTOS BÁSICOS DE PROGRAMACIÓN Introducción Estructuras de decisión Estructuras lógicas Estructuras de repetición Definir funciones Llamadas a funciones Ámbito de las variables UNIDAD DIDÁCTICA 4. OBJETOS EN JAVASCRIPT Introducción La jerarquía de objetos Propiedades y Eventos Métodos UNIDAD DIDÁCTICA 5. LOS OBJETOS LOCATION E HISTORY ¿Qué es un URL? El Objeto Location Redirigir a otra página El Objeto History UNIDAD DIDÁCTICA 6. EL OBJETO DOCUMENT Introducción La propiedad Title Los colores de la página El método write El conjunto images UNIDAD DIDÁCTICA 7. EL OBJETO FORM Formularios HTML El conjunto forms La propiedad elements Validar la información ¿Cuándo realizar la validación? Tipos de Validación UNIDAD DIDÁCTICA 8. LOS OBJETOS FRAME, NAVIGATOR Y SCREEN El conjunto frames El objeto navigator El objeto screen UNIDAD DIDÁCTICA 9. INSTALACIÓN Introducción Obtener el paquete XAMPP Instalar el paquete XAMPP Apache y MySQL como servicios La directiva register_globals Ejercicio práctico UNIDAD DIDÁCTICA 10. CREAR UN SITIO WEB ¿Cómo funcionan las páginas PHP? Crear un alias en apache La página principal Ejercicio práctico UNIDAD DIDÁCTICA 11. INTRODUCCIÓN A PHP Las etiquetas PHP Variables Tipos de datos Constantes Ejercicio práctico UNIDAD DIDÁCTICA 12. ARRAYS Y ESTRUCTURAS DE CONTROL Arrays Estructuras de repetición Estructuras de decisión Combinar estructuras Arrays Asociativos El bucle foreach Arrays Multidimensionales Ejercicio práctico Ejercicio práctico UNIDAD DIDÁCTICA 13. FUNCIONES Introducción Crear Funciones Llamar a una función Paso de parámetros Parámetros por defecto Ejercicio práctico UNIDAD DIDÁCTICA 14. INCLUIR ARCHIVOS Ámbito de las variables Variables estáticas Uso de include y require Incluir solo una vez Seguridad de los archivos incluidos Ejercicio práctico UNIDAD DIDÁCTICA 15. PROGRAMACIÓN ORIENTADA A OBJETOS Introducción Clases Propiedades Métodos Visibilidad Crear Objetos Destructores Ejercicio práctico Ejercicio práctico UNIDAD DIDÁCTICA 16. HERENCIA Presentación Crear subclases Crear objetos de las subclases Sobrescribir métodos El acceso protected Ejercicio práctico UNIDAD DIDÁCTICA 17. RECOGER INFORMACIÓN DEL USUARIO Introducción El array $_GET El array $_POST Recogerlos en una página distinta Recogerlos en la misma página Entradas requeridas Ejercicio práctico Ejercicio práctico UNIDAD DIDÁCTICA 18. VALIDACIÓN DE FORMULARIOS Expresiones regulares Limpiando la información Comprobando el formulario de origen Ejercicio práctico UNIDAD DIDÁCTICA 19. COOKIES Y SESIONES Introducción Crear cookies Caducidad de la cookies Dependencia del navegador Características de los cookies ¿Qué es una sesión? El array $_SESSION La función od_start() y od_clean() Finalizar la sesión El identificador de la sesiones ¿Dónde se almacena la información? Ejercicio práctico Ejercicio práctico UNIDAD DIDÁCTICA 20. ACCESO A ARCHIVOS Introducción Crear el archivo Escribir en el archivo Leer de un archivo Ejercicio práctico UNIDAD DIDÁCTICA 21. ERRORES Y EXCEPCIONES Errores Excepciones Ejercicio práctico Ejercicio práctico UNIDAD DIDÁCTICA 22. CONFIGURACIÓN DE LA BASE DE DATOS MySql Contraseña para el root Extensión mysqli PHPMyAdmin Administración de usuarios Ejercicio práctico UNIDAD DIDÁCTICA 23. BASE DE DATOS Y SQL Tipos de tablas en MySQL Crear tablas Relaciones uno a muchos Relaciones muchos a muchos SQL Acceder a la base de datos Establecer la conexión Mostrar los datos en una tabla Cerrar la conexión Ejercicio práctico Ejercicio práctico Ejercicio práctico UNIDAD DIDÁCTICA 24. BUSCANDO MÁS FUNCIONALIDAD Ordenar el resultado Dividir el resultado en páginas Consultas preparadas Ejercicio práctico UNIDAD DIDÁCTICA 25. AUTENTIFICACIÓN DE LOS USUARIOS La página de login La página de registro Asegurar la confidencialidad Ejercicio práctico UNIDAD DIDÁCTICA 26. EL PROCESO DE COMPRA Introducción Modificar listaproductosphp La página comprarphp Identificar al cliente La página carritocompraphp Confirmar el pedido La página de desconexión Migrar el carrito de la compra Ejercicio práctico Ejercicio práctico UNIDAD DIDÁCTICA 27. INTEGRAR NUESTRO CARRITO A UNA PÁGINA WEB ACTUAL Introducción ¿Qué vamos a hacer? Construir la estructura HTML UNIDAD DIDÁCTICA 28. FORMAS DE PAGO Introducción Tipos de Formas de Pago Contrareembolso Transferencia Bancaria Domiciliación Bancaria Tarjetas Bancarias Tarjetas de Comercio Paypal ¿Qué Formas de Pago Utilizaremos? Modificando la Interfaz de Nuestra Tienda Modificando nuestra base de datos Modificando el Código Anterior Implementando el Contrareembolso Implementando la transferencia Implementando el Paypal UNIDAD DIDÁCTICA 29. RECURSOS PHP Archivos para las prácticas de PHP