Máster de diseño gráfico y web

MÓDULO DISEÑO GRÁFICO (ADOBE TOOLS)

01. 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

02. 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

03. 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 pié 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

• 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

MÓDULO - OPCIÓN 1 DISEÑO WEB CON HTML5, CSS3 Y JAVASCRIPT

01. 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

02. 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

MÓDULO - OPCIÓN 2

DISEÑO WEB CON WORDPRESS

01. INTRODUCCIÓN

• La web. Tipos y estructuras

• Google Mobile First Index

• WordPress. ¿Qué es?

• El Diseño web. Proceso creativo

02. INVESTIGANDO

• Proceso de investigación

• Técnicas de análisis

03. 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

04. 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

05. 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

06. 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

07. 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

08. 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

09. DESARROLLANDO NUESTRA WEB III

• Técnicas de mantenimiento de WordPress