Máster Avanzado en Conceptualización y Desarrollo Web - CEI Escuela de Diseño y Marketing

Conceder conocimientos acerca del diseño y prototipado con Sigma, el diseñador web como programador creativo, los elementos semánticos y estructurales, los degradados de color, y los modos de fusión.
Transmitir un completo programa de estudios, en el cual se profundiza sobre cómo añadir y eliminar elementos HTML, la naturaleza dinámica del contenido, el diseño web integral, y las medidas de dispositivos móviles.
Capacitar sobre el diseño de formularios, la arquitectura de la información, la manipulación del DOM, el concepto de bloque, la sintaxis del lenguaje PHP, y las conexiones asíncronas con el servidor.

Máster Avanzado en Conceptualización y Desarrollo Web - Full Stack Development

MÓDULO DISEÑO ENEXPERIENCIA DE USUARIO E INTERFACES (UX/UI)
INTRODUCCIÓN: UX/UI Y FIGMA
- Introducción Figma
- Animación Figma
EL CLIENTE
- Briefing
- Datos del negocio
- Toma de requisitos
- Análisis de la competencia
- Introducción UX/UI
- Introducción Figma
- Animación Figma
HEURÍSTICAS Y DISEÑO DE INTERACCIÓN
- Análisis Heurístico
- Diafragmas de flujo
- Principios de UX
- Desarrolo de Wireframes: Whimsical
DISEÑO VISUAL
- Principios de diseño
- Principios de color y tipografía
- Diseño de formularios
- 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
- Scrum
- Lean
- Design Thinking
DISEÑO DE APPS
- Medidas de dispositivos mobile
- Tipografías
- Colores
- Grid
- Diseño y prototipado con Figma
- Sistemas de diseño
DISEÑO VERSIÓN WEB
- Medidas web
- 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, CSS3 Y JAVASCRIPT
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, PRIMERA PARTE: INTRODUCCIÓN
- 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
HTML, SEGUNDA PARTE: FORMULARIOS
- Introducción a los formularios
- Elementos de entrada de datos
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 como pensar en CSS
- Todo diseño web será responsive
DINAMISMO Y FUNCIONALIDAD
JAVASCRIPT
- ¿Qué es JavaScript?
- Introducción a la programación
- Variables, condicionales, bucles y funciones
LA API DEL DOM, O LO QUE TRADICIONALMENTE ASOCIAMOS A JAVASCRIPT
- ¿Qué es una API?
- El DOM
- Distintas formas de capturar elementos del DOM
- Sintaxis de punto como piedra angular de la API del DOM, getters/setters
- Gestión de clases
- Gestión de atributos
- Añadir y eliminar elementos: HTML dinámico, primera parte
- El bucle de eventos, o cómo convertir HTML en un espacio interactivo
- Callbacks
- El objeto event y cómo gestionar los eventos básicos del navegador
AJAX, O CÓMO COMUNICARNOS CON EL BACKEND
- ¿Qué es el backend?
- Peticiones y respuestas, el protocolo HTTP
- Conexiones asíncronas con el servidor, el objeto XHR
- Strings que van y Strings que vienen, JSON como lengua franca entre lenguajes de programación
JQUERY
- Libraries, frameworks
- ¿Qué es jQuery?
- Manipulación del DOM
- AJAX
WORDPRESS, KIT DE SUPERVIVENCIA
- Naturaleza dinámica del contenido
- ¿Qué es WordPress?
- Introducción a PHP
- Ecosistema WordPress
- Al final, todo es HTML y CSS propiedades)
- Introducción a JavaScript, ¿qué es? Alcance y limitaciones
- Sintaxis del lenguaje JavaScript, su naturaleza funcional y su uso de la sintaxis de punto para
CURSO DESARROLLO WEB FULL STACK DEVELOPMENT
INTRODUCCIÓN Y HERRAMIENTAS
- Introducción al desarrollo web integral
- Elección de un editor de texto, factores a tomar en cuenta
- Uso de git como sistema de control de versiones
DESARROLLO FRONT-END
PRIMEROS PASOS
- Breve reseña de HTML (elementos, etiquetas, atributos) y CSS (reglas, selectores, propiedades)
- Introducción a JavaScript, ¿qué es? Alcance y limitaciones
- Sintaxis del lenguaje JavaScript, su naturaleza funcional y su uso de la sintaxis de punto para acceder a métodos y propiedades
- Conceptos básicos de programación y su aplicación en JavaScript: variables, condicionales, bucles, funciones
VARIABLES, CONSTANTES, TIPOS DE DATOS Y ESTRUCTURAS BÁSICAS
- Números y operadores aritméticos
- Strings (cadenas de caracteres), su longitud y métodos principales ¿es todo un string?
- Introducción a los Arrays, longitud y uso de índices
- Booleans y operadores lógicos
- Estructuras condicionales y concepto de bloque
- Bucles
- Objetos simples y su notación
FUNCIONES
- Funciones como objetos de primera clase y la naturaleza funcional de JavaScript
- Argumentos, longitud de una función y el objeto arguments
- Funciones como programas en miniatura y como generadores de datos, el uso de la palabra return
- Scope y clausuras
- Funciones anónimas y funciones invocadas inmediatamente
- Funciones flecha, primera parte
- Métodos como funciones
- Callbacks, primera parte
ARRAYS EN PROFUNDIDAD
- Operaciones básicas con arrays
- Métodos iterativos. Callbacks, segunda parte
- Introducción a la programación funcional
LA API DEL DOM, O LO QUE TRADICIONALMENTE ASOCIAMOS A JAVASCRIPT
- ¿Qué es una API?
- El DOM
- Distintas formas de capturar elementos del
DOM
- Sintaxis de punto como piedra angular de la API del DOM, getters/setters
- Gestión de clases
- Gestión de atributos
- Añadir y eliminar elementos: HTML dinámico, primera parte
- El bucle de eventos, o cómo convertir HTML en un espacio interactivo
- Callbacks, tercera parte: primer encuentro con el JavaScript asíncrono y this
- El objeto event y como gestionar los eventos básicos del navegador
PROGRAMACIÓN ORIENTADA A OBJETOS EN JAVASCRIPT
- Funciones constructoras y prototipos
- Sintaxis de clases moderna, métodos y propiedades
- ¿Qué es this? y sus múltiples significados
- Funciones flecha, segunda parte
- Herencia
AJAX, PRIMERA PARTE: LA FRONTERA DEL DESARROLLO FRONT-END
- Conexiones asíncronas con el servidor, el objeto XHR
- Strings que van y Strings que vienen, JSON como lengua franca entre lenguajes de programación
EN LA FRONTERA ENTRE EL FRONT-END Y EL BACK-END
PHP, PRIMERA PARTE
- Introducción a PHP, ¿qué es? Alcance y limitaciones
- Sintaxis del lenguaje PHP, sus dos grandes aplicaciones: HTML dinámico y lenguaje de back-end
- Números y operadores aritméticos
- Strings
- Arrays
- Booleans y operadores lógicos
- Estructuras condicionales
- Bucles
- Funciones
AJAX, SEGUNDA PARTE: CONTACTO ESTABLECIDO
- El protocolo HTTP, funcionamiento y métodos
- Peticiones y respuestas
- Cabeceras
NODE
- ¿Qué es Node?
- Procesos y la naturaleza modular de Node
- El sistema de ficheros
- Streams (flujos)
- El módulo HTTP y la posibilidad de usar
JAVASCRIPT COMO BACK-END
- NPM, el gestor de paquetes de Node
- Express
JAVASCRIPT ASÍNCRONO EN PROFUNDIDAD
- Timers
- Promesas, async y await
- AJAX, tercera parte: fetch
EXPRESIONES REGULARES
- ¿Qué son?
- Sintaxis
- Múltiples aplicaciones de las expresiones regulares
DESARROLLO BACK-END
PHP, SEGUNDA PARTE
- Uso de PHP como lenguaje de plantillas
- Gestión de formularios con PHP
BASES DE DATOS, MYSQL
- Motores de bases de datos
- SQL ¿Qué es? y su sintaxis
- Consultas
- CRUD, o crear, leer, actualizar y borrar
PHP Y MYSQL
- Distintas formas de comunicarse con la base de datos
- El objeto de datos de PHP
- Consultas preparadas
PROGRAMACIÓN ORIENTADA A OBJETOS EN PHP
- Objetos en PHP, sintaxis
- Métodos, propiedades
- Herencia
DESARROLLO FULL-STACK
- Navegación y gestión de rutas
- Páginas privadas y páginas públicas, gestión de cookies y sesiones
- Frameworks, libraries y el panorama a futuro: a manera de cierre