Máster Avanzado de Diseño y Desarrollo Web - CEI Escuela de Diseño y Marketing

Otorgar conocimientos acerca de la preparación de imágenes para maquetación, la previsualización de separaciones y acoplamiento, la elección de un editor de texto, y los elementos semánticos y estructurales.
Impartir un interesante programa formativo, en el cual se profundiza sobre la caja de herramientas gráficas, la manipulación del DOM, las unidades de medida, y las conexiones asíncronas con el servidor.
Estudiar sobre los programas de diseño tradicionales, las propiedades tipográficas, los principios de la programación con JavaScript, las herramientas de apoyo, y los lenguajes de etiquetas.

Máster Avanzado de Diseño y Desarrollo Web - Oficial de Adobe, Full Stack Development y Posibilidad de titulación universitaria

DISEÑO GRÁFICO (ADOBE TOOLS)
ADOBE ILLUSTRATOR
- Modos y perfiles de color
- Espacio de trabajo
- Formas básicas
- Propiedades de objeto: Trazos y Rellenos
- Herramientas de Selección
- Muestras/Color
- Temas de color mediante reglas de armonías de color
- Degradado lineal, radial y de forma libre
- Mesas de trabajo
- Capas
- Grupos
- Motivos y editor avanzado de Motivos
- Modo de aislamiento de objetos
- Panel Apariencia
- Transformaciones
- Alinear y distribuir
- Buscatrazos
- La pluma
- El lápiz
- Pinceles: caligráfico/dispersión/arte/cerdas/ motivos
- Herramienta Anchura/Perfil de anchura variable de trazo
- Texto/Texto de área/Texto en trazado
- Borrador/Tijeras/Cuchilla
- Expandir/Rasterizar
- Pintura interactiva
- Herramienta Shaper
- Creador de formas
- Distorsión de envolvente/malla/objeto superior
- Herramienta Fusión
- Estilos gráficos
- Símbolos
- Insertar imágenes
- Calco de imagen
- Cuadrícula de perspectiva
- Transparencia y máscaras
- Máscara de recorte
- Malla de degradado
- Efectos: Efectos de Illustrator/Photoshop
- Efecto 3D
- Empaquetado, impresión y salida
ADOBE PHOTOSHOP
- Modos de color
- Espacios de trabajo
- El pÍxel
- Capas
- Herramientas de selección geométrica
- Herramientas de selección a mano alzada
- Herramientas de selección automática
- Selectores de color y muestras
- Bote de pintura
- Degradados
- Transformaciones
- Objeto inteligente
- Modos de fusión
- Pinceles y dinámicas de pincel
- Técnicas de ilustración y coloreado digital
- Cuentagotas
- El lápiz
- Tapón de clonar
- Parches y pinceles correctores
- Ajustes de imagen
- Ajustes de imagen con Camera Raw
- Tonos HDR
- Capas de relleno y ajuste
- Escala según el contenido
- Rellenar según contenido
- La pluma
- Capas de trazado
- Capas de forma
- Capas de texto
- Máscara rápida
- Máscaras de recorte
- Máscaras de capa bitmap y vectoriales
- Selección avanzada con gama de colores
- Filtros
- Filtros inteligentes
- Neural Filters
- Automatización de tareas
- Canales
- Uso de tintas planas con Duotono y Multicanal
- Impresión y salida
ADOBE INDESIGN
- Documento/Libro/Biblioteca
- Páginas y pliegos
- Espacio de trabajo
- Márgenes y columnas
- Reglas
- Guías y cuadrículas (retícula)
- Muestras de color
- Herramientas de creación vectorial
- Capas
- Cajas de imagen
- Encajes
- Transformación
- Alineaciones
- Efectos
- Estilos de objeto
- Panel Vínculos
- Preparación de imágenes para maquetación
- Herramientas recopilar y colocar contenido
- Páginas maestras
- Cajas de texto
- Herramientas de Texto y Tipografía
- Opciones de carácter
- Opciones de párrafo
- Estilos de texto
- Tabulaciones y tablas
- Ceñido de texto
- Objetos anclados
- Notas a pie de página
- Composición editorial y uso de retículas
- Editor de artículos
- Paginado automático
- Elementos interactivos, hipervínculos y referencias cruzadas
- Previsualización de separaciones y acoplamiento
- Comprobación preliminar
- Empaquetado
- Impresión y salida
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
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