Creación, Programación y Diseño de paginas web con HTML5 Y CSS

DISEÑO DE INTERFAZ
• El proceso de Diseño de UX de un proyecto interactivo
• Aspectos esenciales de la Arquitectura de la información
• Diseñando un sistema de procesos compuestos por pantallas
• Ley de Hick/Hyman
• Ley de Fitts
• Principio de Pareto (Ley del 80/20)
• La UX y la usabilidad como agente primordial de las decisiones
• Fundamentos del diseño aplicados al diseño de interfaz
• Fundamentos del diseño Responsive. “Cambiando el chip”
• Guías de estilo
• Design Systems
• Fundamentos de la tipografía en proyectos digitales
• Diseño de textos en interfaces
• Representación de semántica y jerarquía visual
• Formas de generar contraste visual
• El espacio negativo
• Fundamentos del Color Luz
o Teoría del color
o Fundamentos técnicos del RGB
o Fundamentos de los perfiles de color
o Combinando colores
o Definiendo una paleta para nuestro proyecto
• Formatos de imagen en el diseño de interfaz
o Formatos Bitmap
o JPG, GIF y PNG
o Diferencias fundamentales de compresión
o El formato vectorial SVG
o Aplicaciones
o Ventajas
o Eligiendo correctamente el formato según el caso
• Trabajando para pantallas HDPi (Retina y similares)
• Diseño de elementos interactivos de una interfaz
• Diseño óptimo de un CTA (Call to Action)
• Diseñando “Componentes”
• Contenidos esenciales y habituales de una Homepage
• Diseño de iconos
o Fundamentos de Semiótica
o Conceptos esenciales en el diseño de un icono
o Creando sets de iconos
• Diseño de formularios
o Estructura y organización de un formulario
o Elementos de formulario
o Diseñando cada elemento maximizando su usabilidad
o Elementos de formulario en dispositivos táctiles
• Fundamentos esenciales de Adobe Photoshop
o Capas
o Formas
o Máscaras
o Ajustes de capa
o Técnicas no destructivas de trabajo con Photoshop
o Exportación
• Fundamentos esenciales de Adobe Illustrator
o Fundamentos del diseño vectorial en Illustrator
o Herramientas de creación
o Capas y mesas de trabajo
o El Buscatrazos
o Exportación de Assets

MAQUETACIÓN WEB Y ANIMACIÓN CON HTML5 Y CSS3
• Cómo funciona un navegador
• Tecnologías de desarrollo Front-end
• Sitios web estáticos VS sitios web dinámicos
• El Front-end como parte de una cadena de montaje no lineal
• Front-end + Back-end. Pipeline en un sitio dinámico
• Fundamentos y tecnologías de Back-end
• Organización de archivos del Front end de un proyecto web
• Maquetación web según estándares W3C
• Terminología, estructura y sintaxis de HTML5
• Etiquetas y atributos de HTML5
• La semántica como factor decisivo
• Principios de desarrollo basado en mejora progresiva

FUNDAMENTOS DE CSS
• Separando formato de contenido
• Cargando CSS en un archivo HTML
• Sintaxis de las reglas CSS
• La cascada de CSS
• Selectores CSS más comunes
• Selectores CSS avanzados (de niveles 2, 3 y 4)
• Pseudoelementos CSS «::before» y «::after»
• Jerarquía de selectores CSS
• Propiedades CSS para formato de textos
• Carga de tipografías desde servidor de terceros (como Google Fonts)
• Carga de tipografías en CSS con «@font-face»
• Los modelos de caja
o Componentes (ancho, alto, padding, borde y margen)
o Modelo de caja Clásico o «content-box»
o Modelo de caja «border-box»
• La propiedad CSS «display»
• Elementos flotantes. El uso del «float» hoy
• Visibilidad de las etiquetas
• Controlando el desbordamiento con «overflow»
• La propiedad «position». Ubicando elementos con CSS

DISEÑO RESPONSIVE
• Estructuras flexibles
• Media Queries
• Contenidos que se adaptan
• Imágenes en HTML
• Enlaces. La etiqueta «a»
• Estructuras de lista
• Construyendo menús
• Unidades de medida
• Bordes
• Maquetando estructuras
• Sombras de caja y de texto con CSS
• Filtros CSS
• Fondos con CSS
• Color de fondo
• Imágenes de fondo
• Degradados de fondo con CSS3
• Definiendo el área del fondo con «background-clip»
• Particularidades del fondo de la etiqueta «body»
• Modos de fusión de imagen y color mediante «background-blend-mode»
• Tablas. Tabulando datos
• Columnas con CSS
• Transformaciones CSS. Escalando, rotando, sesgando y trasladando etiquetas
• Transiciones CSS. Animando los cambios en las propiedades
• Animaciones CSS

FLEXBOX (CSS FLEXIBLE BOX LAYOUT)
• Sistema de ejes principal y cruzado
• Propiedades CSS Flexbox para el elemento contenedor
• Propiedades CSS Flexbox para los elementos contenidos

GRID (CSS GRID LAYOUT)
o Fundamentos de CSS Grid
o Jugando con fracciones. La unidad fr
o Grids implícitos y explícitos
o El algoritmo de colocación automática de CSS Grid: grid-auto-flow
o Definiendo el tamaño de las pistas en CSS Grid
o La función «repeat»
o Colocando elementos grid
o «auto-fit» y «auto-fill»
o Grids responsive con minmax()
o Grid Areas
o Grid Lines
o Alineación
o Reordenación
o Anidación
o Flexbox y/o CSS Grid
o Diferencias
o Diseños de una dimensión VS dos dimensiones
o Complementando Flexbox y Grid
• Vídeo con HTML5
• Audio con HTML5
• Incrustando otras webs dentro de nuestra página. «iframe»
• Formularios HTML5
• Fundamentos de librerías de componentes web
• Atributos data- de HTML5
• SVG inline
• Fundamentos de preprocesado de CSS con SASS
• Etiquetas Meta
• Técnicas de SEO on site
• Integración de capa social
o Twitter cards
o Facebook Open Graph
o Integración de botones «Me gusta» y «Retweet»

PROGRAMACIÓN DE INTERFACES CON JQUERY
• Lógica y abstracción aplicada a la programación
• Fundamentos básicos de la programación con JavaScript
• La importancia de dónde/cuándo cargo mi script
• Fundamentos y sintaxis de jQuery
• Creando objetos jQuery usando selectores CSS
• Efectos de animación con jQuery
o «Precocinados»
o Animando a medida
o Encadenado. La cola de animación
o Callbacks
o Usando jQuery para gestionar animaciones CSS
• Creando un sistema de pestañas
• Creando paneles desplegables
• Creando navegaciones “sticky”
• Estructura “interruptor”
• Manipulando el DOM
o Insertando etiquetas en el DOM
o Eliminando etiquetas
o Modificando los contenidos de una etiqueta
o Cambiando atributos de HTML
o Gestionando clases desde jQuery
o Modificando el CSS desde jQuery
• Creando dialogs (notificaciones) modales a medida
• Creando el front de una App de recordatorios (To-Do)
• Gestión de eventos
o Gestión de eventos con «on()» y «off()»
o Eventos de ratón
o Eventos de teclado
o Eventos de formulario
o Eventos de navegador
o Delegación de eventos
o El objeto «event»
• Usando las coordenadas del ratón
• Creando un tablón de post-it con jQuery
• El efecto bubbling (propagación)
• Animación del scroll de la ventana desde jQuery
• Scroll Parallax complejo con jQuery
• Traversing. Moviéndonos por el árbol del DOM
• Métodos de filtrado
• Expresiones regulares para validar formularios
• Carga asíncrona de información (AJAX) con jQuery
• Terminología y sintaxis
• Elementos estructurales de HTML5 y su valor semántico
• El modelo de caja y cómo ubicar elementos

• Funcionalidad y aplicación de propiedades CSS3
• Fondos y degradados usando CSS3
• Creación y modificación de estilos CSS3 de listas ordenadas, desordenadas y de definición
• Diseño y creación de formularios
• Datos tabulados con tablas
• Transiciones, transformaciones y animaciones CSS3
• Tipografías con @font-face
• Media-queries de CSS3. Creación de páginas web basadas en principios de responsive design
• Sprites y trabajo con imágenes en formato data-URI
• Principios de desarrollo basado en mejora progresiva
• Particularidades de las interfaces táctiles en el diseño de interacción
• Geolocalización con HTML5
• Audio y vídeo con HTML5
• Canvas
• Detección de capacidades del navegador
• Compatibilidad entre navegadores
• Optimización del rendimiento del sitio web
TÉCNICAS SEO
• Desarrollo de interactividad con jQuery
• Integración de capa social

INTRODUCCIÓN A CONCEPTOS
LA ATMÓSFERA DE UN WEBSITE
MINIMALISMO VS DETALLE

DISEÑO RESPONSIVE
EXPERIENCIA DE USUARIO (UX)
• Diseño de interfaces (UI)
• Wireframing
• Prototipos
• Repaso de Photoshop
• Photoshop vs. CMS
• Diseño completo de una página de moda
• Diseño completo de un home page creativo
CONCEPTOS BÁSICOS.
• Fundamentos en tecnologías web, interfaces de usuario y Apps.
• Diccionario de conceptos: UX, UI, IxD, UXC, Customer Journey Map, EH, AI.
• ¿Qué es la Usabilidad UX?. Referencias, recursos, libros, manuales.
• ¿Qué es la diseño de Interfaces UI?. Referencias, recursos.
• Cómo agilizar procesos (Lean start-up).
• Método de trabajo: Como Freelance o en Agencia.
• Herramientas colaborativas y administración de proyectos.
COSTUMER JOURNEY MAP.
• Workshop Inicial.
• Análisis de datos.
• Perfiles de usuario.
• Trabajo de campo.
• Customer Journey Map. UxCONSULTING.
• El UX y el consumidor (Consumer UX).
• El UX en la empresa (Enterprise UX).
• La observación.
• Realización de informes de UX.
CONTENIDO.
• Arquitectura de la Información (AI).
• Arquitectura de la Información como proceso.
• Documentación.
• Diseñar pensando en el Usuario. La usabilidad, Accesibilidad.
• Diseñar pensando en Google y en posicionamiento natural SEO.

DISEÑO.
• Diseño de interfaces.
• El diseño de la interacción.
• Sesiones creativas. Inspiración y referencias previas a un proyecto.
• Prototipado rápido: Wireframes. Balsamiq. Libreta.
• Crear y compartir prototipos: Invision, Adobe XD , Marvel.
ANALÍTICA WEB Y TEST DE USUARIOS.
• Evaluación heurística (EH).
• Test de usuarios.
• Google Analytics.
• Hotjar. Mapas de calor, grabaciones a usuarios, embudos de conversión.
• A/B testing. 5. Cambios de aplicaciones acordes a las mediciones.
PROYECTOS Creación de una app.
• 2. Creación de wireframes de un website.
• 3. Creación de inferfaces de usuario.
• 4. Trabajar con el cliente.
• 5. Trabajar con desarrolladores. Exportación de archivos.
• 6. Aplicar cambios que mejoren la usabilidad de los productos