Máster de Diseño Web

360 Horas (6 Meses)

El contenido de este programa es orientativo, pudiendo variar el mismo por razones de actualización o modificación de los contenidos.

Objetivos

El diseño web, como ya sabéis, es una de las profesiones más demandadas del mundo. Y es que cualquier empresa en la que vayáis a trabajar, o con la que vayáis a emprender, necesitará de una página web para mostrar su oferta de servicios o productos. Es aquí donde el trabajo de una persona que domine los conocimientos del mundo del diseño y desarrollo web cobran importancia. En este máster, que consta de dos módulos, el alumno aprenderá las bases de los lenguajes de programación más utilizados del mundo (HTML5 y CSS3) y también sobre el gestor de contenidos más usado en la actualidad, Wordpress.

En el primer módulo se trabajará sobre la base de la programación, específicamente con los lenguajes HTML5 y CSS3 que vienen a significar lo que podríamos llamar el esqueleto de todo sitio web. Una correcta formación en estos lenguajes permitirá al alumno afrontar cualquier tipo de proyecto con una base sólida. Se trabaja sobre la estructura de los sitios y la manera correcta de disponer la información de cara al usuario para que la navegación sea fácil, intuitiva y atractiva. También para lograr esa estética deseada se trabaja la inserción de contenido multimedia en todos sus formatos (vídeo, sonidos, imágenes), así como también la adaptación de las webs para todos los dispositivos desde los cuales se accede a internet hoy en día. Es lo que llamamos una web con diseño responsive o adaptativo, que se adapta de manera perfecta a cualquier dispositivo y tamaño de pantalla. En la ultima parte del primer módulo, el alumno se introduce en el uso de plugins sencillos con JavaScript/jQuery, con ejemplos prácticos reales.

En el segundo módulo de máster, el alumno aprende a dominar la gestión de contenidos a través de WordPress, un potente CMS de código abierto que es utilizado por un sinfín de páginas web en la actualidad gracias a su diseño intuitivo de cara al administrador y a sus extensas posibilidades de cara al usuario. Se trabajará en la creación e instalación de temas, la correcta configuración de la plataforma y la instalación de plugins de utilidad, el desarrollo de webs desde temas en blanco (y no con plantillas), etc., que ayudan a aumentar la funcionalidad de los sitios y a convertir cualquier web que te puedas imaginar en realidad.

Información

• Editor de texto plano especializado en web: Dreamweaver/Sublime/Notepad ++/Komodo Edit/Brackets
• HTML5 / CSS3
• Mobile-first Indexing. Bootstrap
• Posicionamiento web SEO. Accesibilidad y usabilidad
• JavaScript
• jQuery
• Diseño web con WordPress
• Conceptualización web y Sketch
• Cotización y planificación web
• Desarrollo web y optimización en WordPress

Duración

360 Horas Total

• Presencial u Online
• 280 Horas de Clases
• Lunes a jueves (+algún viernes)
• 80 Horas Proyectos finales

Horarios

Mañanas

• 09.00 - 12.00 horas
• 12.00 - 15.00 horas

Tardes

• 16.00 - 19.00 horas
• 19.00 - 22.00 horas

Oficial

• Nuestra escuela es uno de los cinco centros Adobe Authorized Training Center de España. Este hecho demuestra que CEI ha cumplido con todas las exigencias que solicita Adobe y, asimismo, constituye una garantía de calidad para todos nuestros alumnos.
• CEI es un Centro de Formación Autorizado por Apple. Por ello, nuestros alumnos podrán obtener la certificación profesional de Apple e impulsar su carrera en tecnologías del diseño y de la información, entornos empresariales y mercados B2B.
• IBM confía en nosotros y por ello nos ha otorgado la insignia IBM Education Partner. Este sello premia a centros de enseñanza que mantienen y fomentan una formación de calidad.
• Nuestra escuela se consolida como Centro de Formación de referencia de Maxon en España y nos convertimos en la 1ª escuela de Europa en ser Maxon Training Provider for R18.

Módulo Diseño Web con HTML5, CSS3 y Javascript

01- Diseño Web, HTML5 Y CSS3

Introducción al uso de equipos informáticos

Sistemas operativos:

• Windows
• Mac
• Linux

Instalación y gestión de software:

• Navegadores
• Editores de texto

Sistema de archivos y carpetas

• Creación de archivos y carpetas
• Organización de proyectos web
• Rutas absolutas, relativas y URL

Navegación por internet

Principios en Administración de Redes

Arquitectura cliente-servidor

Servidores y protocolos

• Certificados SSL
• HTTP/HTTPS
• FTP/SFTP/FTPS

Equipo cliente

Introducción a routers y switches

DNS (dominios e IPs)

• IP pública
• IP local
• Nombres de dominio

Hosting, housing & CPD

Principios básicos para la creación de sitios web estáticos

• Lenguajes utilizados (HTML5 y CSS3)
• Flujo de ejecución del código
• Estructura visual de una web

Principios de usabilidad y accesibilidad

Prototipado de una web (UX/UI)

• Interfaz de Usuario (Marvel)
• Experiencia de Usuario (InVision)

HTML5

• Etiquetas y atributos
• Semántica y uso
• Estándar y estructura de documentos HTML5
• Comentarios
• Párrafos, titulares y formatos de texto
• Multimedia (Imágenes, Audio y Vídeo)
• Enlaces y botones
• Listas
• Tablas
• Formularios
• iFrames
• Etiquetas meta
• Favicom

CSS3

Enlazar CSS

Selectores y pseudoselectores

Atributos

• Colores
• Fondos
• Formato y transformación de textos
• Alto/Ancho
• Bordes
• Márgenes
• Rellenos
• Posiciones
• Alineación
• Sombreados y degradados
• Opacidad
• Transformaciones
• Filtros

Pseudoclases (active, hover, checked, first-child, last-child, nth-child)

Pseudoelementos (after, before)

Importación e implementación de fuentes (media y font-face)

Importación e implementación de iconos (fuentes y SVG)

Variables CSS

Animaciones CSS (keyframes)

Mobile-first Indexing

• Estructuras generales (Floats)
• Estructuras Simples (Flexbox)
• Estructuras Complejas (CSS Grid)

Frameworks y APIs

• Bootstrap 4
• Materialize
• Material Design

Internet

• Creación de un dominio
• Creación de un alojamiento web
• Conexión y subida de una web al servidor

SEO

• Vincular web con Google Search Console
• Implementación de enlaces canónicos

02- Desarrollo Web (Front-End)

JavaScript

• Introduccion a la programación de front-end
• 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

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 Diseño Web con Wordpress

01- Diseño Web con Wordpress. Desde la conceptualización hasta el desarrollo

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 con Sketch
• Prototipado de la web con Invision
• 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
• LOPD. Instalación y regulación

Desarrollando nuestra web

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: Visual Composer y 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.

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

• 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

Técnicas de mantenimiento de WordPress