Bootcamp de Desarrollo Web, UX y UI - CEI Escuela de Diseño y Marketing

Impartir conocimientos acerca de los elementos semánticos y estructurales, los tipos de selectores, el navegador como herramienta de diseño, la elección de tipografías, las unidades de medidas, y el posicionamiento estático.
Aportar un interesante método de aprendizaje, en el cual se profundiza sobre la caja de herramientas gráficas, los degradados de color, los modos de fusión, el proceso de investigación, y las técnicas de análisis.
Aprender sobre la planificación temporal del trabajo, la preparación de un WordPress, el prototipado de la web, la creación de campos, y la política de privacidad.

Titulación de Bootcamp en Desarrollo Web y UX/UI.
Diploma de Máster Universitario en Diseño Web por la Universidad a Distancia de Madrid (UDIMA) - Título propio.

MÓDULO DISEÑO EN EXPERIENCIA DE USUARIO E INTERFACES (UX/UI)
NTRODUCCIÓN: UX/UI Y FIGMA
- Introducción UX/UI
- Introducción Figma
- Animación Figma
EL CLIENTE
- Briefing
- Datos del negocio
- Toma de requisitos
- Análisis de la competencia
HEURÍSTICAS Y DISEÑO DE INTERACCIÓN
- Análisis heurístico
- Diafragmas de flujo
- Principios de UX
- Desarrollo de wireframes: Whimsica
DISEÑO VISUAL
- Principios de diseño
- Principios de color y tipografía
- Uso de la Grid o Retícula
- Accesibilidad
ARQUITECTURA DE LA INFORMACIÓN
- Árbol de contenidos
- Sistemas de organización
- Sistemas de etiquetado
- Sistemas de navegación
- Sistemas de búsqueda
FIGMA AVANZADO
- Auto layout
- Componentes y variaciones
- Atomic Design y Sistema de diseño
METODOLOGÍAS ÁGILES
- Design Sprint
- Design Thinking
DISEÑO DE APPS Y WEB
- Medidas de dispositivos mobile
- Tipografías
- Colores
- Grid
- Diseño y prototipado con Figma
- Sistemas de diseño
DISEÑO VERSIÓN WEB
- Medidas de dispositivos mobile
- Tipografías
- Colores
- Grid
- Diseño y prototipado con Figma
- Sistemas de diseño
UX Y SEO
- Similitudes entre UX y SEO
- Factores SEO (Web)
- Factores ASO (apps)
MÓDULO DISEÑO WEB CON HTML5 Y CSS3
CONTENIDO, ESTRUCTURA Y APARIENCIA
Introducción y Herramientas
- Introducción al desarrollo web integral
- El diseñador web como programador creativo, el lenguaje de la web
- Herramientas de apoyo
- Elección de un editor de texto, factores a tomar en cuenta
- Todo diseño web debe ser responsive HTML
- Introducción a los lenguajes de etiquetas
- Elementos, etiquetas y atributos
- HTML semántico, el contenido como guía
- Elementos semánticos y elementos estructurales
- Títulos, párrafos, listas, tablas, enlaces e imágenes... el contenido es el rey
- Flujo normal (normal flow), elementos block e inline CSS, primera parte: introducción
- Reglas, selectores y propiedades
- Tipos de selectores
- Interludio HTML: elemento style, identificadores únicos y clases
- Vinculación de ficheros CSS a ficheros HTML CSS, segunda parte: el navegador como herramienta de diseño
- Diseñando en el navegador, inspector de elementos + editor de texto, o cómo dejar atrás las simulaciones
- CSS y su relación a los programas de diseño tradicionales
Tipografía
- Introducción a la tipografía
- Elección de tipografías para web y las distintas alternativas a nuestra disposición
- Unidades de medida, absolutas y relativas.
- Propiedades tipográficas
- Contenido dinámico vs. contenido estático y sus consecuencias a la hora de estilizar la tipografía
Color
- Distintas formas de hablar en RGB
- Color de fondo y color del texto
Layout, primera parte: HTML + CSS
- Relación de las etiquetas estructurales a los típicos “bloques” de un programa de diseño, todo es un rectángulo
- Unidades de medida
- Márgenes, por dentro y por fuera
- Modelo de caja
- Posicionamiento estático, o lo que está detrás del flujo normal
- Rompiendo el flujo normal: posicionamiento relativo, absoluto y fijo
- Introducción al diseño responsive, media queries
CSS, tercera parte: la caja de herramientas gráficas
- Bordes
- Imágenes de fondo y su diferencia con las imágenes de contenido
- Degradados de color
- Sombras
- Modos de fusión
- Filtros
- Transformaciones
Layout, segunda parte: Flex
- El modelo de caja flexible
- Flex vs. flujo normal
- Opciones de Flex
- Flex y su relación al diseño responsive
- Limitaciones de Flex
Layout, tercera parte: Grid
- Cuadrículas a la hora de diseñar una web
- Grid vs. Flex vs. flujo normal
- Opciones de Grid
Layout, grand finale: diseñando en el navegador
- Todo es combinable
- Maquetación idiomática, o cómo pensar en CSS
- Todo diseño web será responsive
MÓDULO DISEÑO WEB CON WORDPRESS
INTRODUCCIÓN
- La web. Tipos y estructuras
- Google Mobile First Index
- WordPress. ¿Qué es?
- El Diseño web. Proceso creativo
INVESTIGANDO
- Proceso de investigación
- Técnicas de análisis
COTIZANDO Y PLANIFICANDO
- ¿Cuánto vale mi página web?
- Planificación temporal del trabajo
- Sistemas de gestión para trabajar el diseño web
CONCEPTUALIZANDO LA WEB
- La inspiración y toma de referencias
- La identidad visual. Manual de estilos web
- Creación del árbol de contenidos
- Boceteo o wireframes
- Creación de mockups
- Prototipado de la web
- Presentación al cliente y preparación de contenidos
CREANDO CONTENIDOS
- Copywriting
- Tipos de contenidos
- La generación de contenidos en WordPress. Post y páginas
- Las imágenes. Tipos y tratamiento para web
- Política de Privacidad y la Política de Cookies
DESARROLLANDO NUESTRA WEB I
- Conociendo WordPress
- Instalación en local y servidor
- Preparación de un WordPress. Pasos esenciales
- Estructura de WordPress y su interfaz
- Los plugins
- Biblioteca de medios: optimización de imágenes
- Los temas
- Tipos de temas
- Explicando un tema
- Trasladando nuestro diseño a WordPress
- Diseñando el body
- Compositores visuales: Elementor
- Addons y complementos
- Creando web en Mobile first
- Formularios de contacto
- Diseñando headers personalizados.
- Los menús
- Diseñando footers personalizados
- Creación propia de plantillas y snippets
- Creación de layouts personalizados para post
- Creación de post types personalizados y sus layouts
- Creación de campos personalizados
- Ecommerce: WooCommerce
- Explicación y configuración de una tienda online
- Creación de plantillas de producto personalizadas
- Modificación y configuración del checkout
- Plugins necesarios
- Gestión de usuarios en WordPress
- Roles de usuarios
- Registro de usuarios
- Creación de áreas privadas y membrecías
- Visualización de contenidos según roles
- Traducción de páginas web
- Uso del plugin
- Traducción de temas y plugins
- Exportación y copias de seguridad de
WordPress
- Otros plugins de interés: sliders, compartir en redes sociales, feeds, chats, etc.
- Desarrollando la Web: Introducción al
- editor visual (Gutenberg).
- Integración de WordPress con servicios de terceros como, por ejemplo: Recaptcha, Mailchimp, Google Analytics, Google Search Console
OPTIMIZANDO Y PROTEGIENDO NUESTRA WEB
- Optimización de rendimiento de nuestro WordPress
- Optimización del código
- Instalación de cachés
- Protección del WordPress
- Protección de los accesos a WordPress
- Protección de contenidos y carpetas
- Protección contra ataques exteriores
DESARROLLANDO NUESTRA WEB II
- Introducción al Inbound marketing para WordPress
- Creación de mapas del site
- Instalación y configuración de plugin de SEO
DESARROLLANDO NUESTRA WEB III
- Técnicas de mantenimiento de WordPress
MÓDULO FRONTEND CON JAVASCRIPT Y JQUERY
JAVASCRIPT
- Introduccion a la programación de frontend
- JavaScript. Sintaxis general
- Incluir JavaScript en documentos HTML
- JavaScript en archivos adjuntos
- JavaScript dentro del código HTML
- JavaScript. Variables y operadores
- Variables locales y variables globales
- Variables numéricas
- Metodos para variables numéricas
- Operadores de asignación
- Operadores de incremento y decremento
- Operadores matemáticos
- Cadenas de texto (strings)
- Métodos para cadenas de texto
- Variables Undefined
- Variables NULL
- Variables NaN
- Operadores lógicos en JavaScript
- Operadores relacionales
- Funciones en JavaScript
- Funciones en JavaScript
- Sintaxis y uso
- Scope de JavaScript
- Trabajo con funciones
El DOM
- JavaScript. El DOM
- Introducción al DOM
- Objeto Notation
- Crear nodos
- Agregar nodos
- Modificar, reemplazar y eliminar nodos
- Acceso a los atributos del DOM
- Modificar estilos de elementos
- Eventos del DOM
- AJAX en JavaScript
- Primeros pasos
- Primera aplicación
- Funcionamiento de una aplicación AJAX
- Métodos y propiedades del objeto
- XMLHttpRequest
- Objetos para AJAX
- Trabajo con AJAX. Listas desplegables
- Trabajo con AJAX. Autocompletar formulario
- Trabajo con AJAX. Lector RSS
- Trabajo con AJAX. Google maps
JQUERY
- Introducción a Jquery
- Pasos para utilizar jQuery
- Primer script con jQuery
- Básicos de jQuery: añadir y quitar clases CSS
- Básicos de jQuery: mostrar y ocultar elementos de la página
- Básicos jQuery: efectos rápidos con jQuery
- Básicos jQuery: callback de funciones jQuery
- Básicos jQuery: uso de Ajax básico con jQuery
- Básicos jQuery: Ajax jQuery con mensaje de carga
MÓDULO BACKEND CON PHP7 Y MYSQL
PRIMEROS PASOS 01 CON PHP7
- Introduccion a la programación de backend
- Estructura básica de una página PHP
- Las etiquetas PHP
- La función echo
- Separador de instrucciones
- Comentarios
- Mezclar PHP y HTML
- Normas de denominación
- Configuración de PHP
- El archivo de configuración php.ini
- Información sobre la configuración
- Juego de caracteres
- Utilizar PHP desde la línea de comandos
- Las bases del lenguaje PHP
- Constantes. Definición y alcance
- Variables. Inicialización y asignación
- Variables. Alcance y duración
- Variables dinámicas (o variables variables)
TIPOS DE DATOS EN PHP7
- Tipos de datos
- Tipos disponibles
- Tipos de datos escalares y especiales.
- Arrays
- Arrays. Creación, manipulación y alcance
- Operadores
ESTRUCTURAS DE CONTROL EN PHP7
- Estructuras de control en PHP 7. Condicionales
- La estructura if
- La estructura switch
- Estructuras de control en PHP 7. Ciclos
- La estructura while
- La estructura do ... while
- La estructura for
- La estructura foreach
- Las instrucciones continue y break
- Incluir un archivo
- Funcionamiento y utilización
- Interrumpir el script
FUNCIONES EN PHP7
- Utilizar las funciones PHP
- Preámbulo
- Manipular las constantes, las variables y los tipos de datos
- Constantes
- Variables
- Tipos de datos
- ·Conversiones
- Manipular variables numéricas
- Manipular variables strings
- Manipular arrays
- Utilizar expresiones regulares
- Estructura de una expresión regular
BASES DE DATOS MYSQL
- Gestión de los formularios y los enlaces
- Rápido recordatorio sobre los formularios
- Construir un formulario de forma dinámica
- Procesar un formulario utilizando un script PHP
- Recuperar los datos de una URL o de un formulario
- Recuperar los datos pasados por la URL
- Utilizar una matriz para pasar datos en la URL
- Transferir caracteres especiales
- Recuperar los datos introducidos en el formulario
- Usar un array para recuperar los datos introducidos
- Pasar información en un campo de formulario oculto
- Los diferentes tipos de campos
- Controlar los datos recuperados
- Limpieza de los espacios deseados
- Datos obligatorio
ADMINISTRAR SESIONES