Curso Superior de Diseño Web Profesional

En un momento en el que la tecnología se encuentra presente en múltiples ámbitos, internet
es un entorno de constante presencia en nuestras vidas en la actualidad, por ello, los diseñadores web son perfiles cada vez más demandados por el mercado laboral.
Según un informe del Instituto de Estudios Económicos (IEE), las profesiones, trabajos y perfiles digitales más demandados a partir de 2019 están orientados a responder a las nuevas necesidades de la sociedad, sobre todo, las que tienen que ver con la comunicación y el uso de las nuevas tecnologías dentro de la transformación digital.
El Curso Superior de Diseño Web Profesional, de enfoque práctico, habilita al alumno como un profesional autosuficiente en el mundo del diseño web.
Los contenidos del curso abarcan desde los fundamentos más básicos de los lenguajes HTML5 y CSS3 y el manejo de las bases del Front-End con JavaScript hasta el diseño de sitios webs de una forma sencilla mediante nociones fundamentales de diseño, como son la conceptualización de la idea de la web y su bocetado en papel, diseño y prototipado, de forma que le permitirán crear desde cero sitios web responsive, optimizados para cualquier tipo de dispositivo.
El alumno aprenderá en qué consiste la usabilidad y la experiencia de usuario para poder aplicarla a su propio proyecto. Asimismo, conocerá algunos conceptos básicos de posicionamiento en buscadores que le servirán para atraer visitas a su página.
Es un curso que sigue la metodología por proyectos. Cada Fase del proyecto tiene como objetivo realizar una parte del proceso necesario para la realización de una web de una forma práctica.
Para ello el alumno contará con una serie de materiales en papel, videotutoriales y actividades prácticas.

Módulos:
1: Usabilidad web y experiencia de usuario (UX)
1. Usabilidad frente a experiencia de usuario (UX)

• 1.1. ¿Qué es la usabilidad?
• 1.2. ¿Qué es la experiencia de usuario?

2. Los 10 principios heurísticos de la usabilidad de Jakob Nielsen

• 2.1. Decálogo de Jakob Nielsen sobre la usabilidad
• 2.2. ¿Qué conseguimos si mejoramos la experiencia del usuario?

3. Usabilidad en la web

• 3.1. ¿Cómo usamos la web?
• 3.2. ¿Cómo atrapar la atención del usuario?
• 3.3. Uso de clics mecánicos
• 3.4. Cómo escribir en la web
• 3.5. Los textos y tipografías, claros y con contraste
• 3.6. Navegación por la web
• 3.7. La página principal (home)
• 3.8. Enlaces o hipervínculos
• 3.9. Imágenes
• 3.10. Buscadores
• 3.11. Publicidad

4. Diseño basado en la experiencia de usuario

• 4.1. Criterios básicos de la experiencia de usuario
• 4.2. Metodología del diseño centrado en el usuario
• 4.3. Etapas del diseño basado en la experiencia de usuario
• 4.4. Técnicas de diseño de la experiencia de usuario
• 4.5. Herramientas de diseño para el desarrollo de un proyecto

5. Diseño de interacción (IxD)

• 5.1. Las 5 dimensiones del diseño de interacción
• 5.2. Consejos para realizar el diseño de interacción
• 5.3. Microinteracciones

6. La arquitectura de la información

• 6.1. Componentes de la arquitectura de la información
• 6.2. Arquitectura de la información y SEO
• 6.3. Herramientas para el prototipado

7. Responsive Web Design. Uso de media queries

• 7.1. Aumento del uso de los móviles en la navegación web
• 7.2. La web responsive es beneficiosa para el SEO
• 7.3. Consejos para crear y adaptar tu web a dispositivos móviles

8. Utilización de frameworks

• 8.1. Ventajas de utilizar un framework
• 8.2. Desventajas de utilizar un framework
• 8.3. Framework frente a CMS

9. Evaluación de la usabilidad

• 9.1. Evaluación automática
• 9.2. Evaluación heurística
• 9.3. Evaluación con usuarios
• 9.4. Elaboración de informes

2: Accesibilidad web
1. ¿Qué es la accesibilidad web?

• 1.1. ¿A quién beneficia la accesibilidad web?
• 1.2. Diseño universal
• 1.3. Tecnologías de apoyo

2. Aspectos que tener en cuenta para la conformidad de un sitio web

• 2.1. Tecnologías compatibles con la accesibilidad
• 2.2. Requisitos de conformidad
• 2.3. Declaración de conformidad
• 2.4. Declaración de conformidad parcial y contenido de terceras partes

3. ¿Cómo lograr que el sitio web sea accesible?

• 3.1. Aspectos que tener en cuenta para que nuestro sitio web sea accesible
• 3.2. Principios de las pautas WCAG 2.1

4. Recomendaciones técnicas para desarrolladores

• 4.1. Perceptibilidad
• 4.2. Operabilidad
• 4.3. Comprensibilidad
• 4.4. Robustez

5. Estructura de HTML y CSS
6. Validación en fase de desarrollo de un sitio web

• 6.1. Especificación del ámbito de evaluación
• 6.2. Análisis del diseño del sitio web
• 6.3. Selección de una muestra representativa
• 6.4. Validación de accesibilidad

7. Validación automática frente a validación manual

• 7.1. Herramientas de evaluación automática
• 7.2. Herramientas de ayuda en la evaluación manual

8. Validación de gramática y accesibilidad

• 8.1. Validación de la gramática
• 8.2. Validación de la accesibilidad

3: Diseño de interfaz
1. Concepto gráfico y teoría del color

• 1.1. Simbología del color
• 1.2. Colores cálidos
• 1.3. Colores fríos
• 1.4. Colores neutros
• 1.5. Luminosidad, matiz, tono y saturación

2. Tipografías

• 2.1. Serif
• 2.2. Sans serif
• 2.3. Script
• 2.4. Display

3. Diseño de la interfaz responsive

• 3.1. ¿En qué consiste un diseño responsive?
• 3.2. Conceptos claves del diseño responsive
• 3.3. ¿Cómo saber si es un diseño responsive?
• 3.4. Beneficios de un diseño responsive
• 3.5. Inconvenientes de un diseño responsive

4. Definición de los elementos gráficos: tamaño y resolución

• 4.1. Tipos de navegación
• 4.2. Disposición de elementos en función del dispositivo
• 4.3. Incluir imágenes en formato panorámico
• 4.4. Peso de los elementos
• 4.5. La importancia de los iconos
• 4.6. Touch
• 4.7. Tamaño de los botones
• 4.8. Carga secuencial
• 4.9. Responsive Web Design Server Side Components (RESS)

5. Diseño de diferentes tipos de pantalla: navegación y formularios

• 5.1. Diseño del menú de navegación
• 5.2. Diseño de formularios

6. Escribir para la web

• 6.1. Cambio de concepto en la escritura para internet
• 6.2. Estructura visual
• 6.3. Contar una historia
• 6.4. Evitar los preámbulos
• 6.5. Incluir textos destacados
• 6.6. Crear un personaje
• 6.7. Enfocar
• 6.8. Saber para quién escribimos
• 6.9. Utilizar el tono correcto
• 6.10. Optimizar titulares
• 6.11. Agregar información visual
• 6.12. Evitar detalles extravagantes en el diseño
• 6.13. Cuidar la ortografía

4: Introducción al desarrollo web
1. Internet y la web

• 1.1. ¿Qué es internet?
• 1.2. Direcciones de internet
• 1.3. Arquitectura cliente-servidor
• 1.4. Aplicaciones web
• 1.5. Accesibilidad
• 1.6. Usabilidad

2. Dominios y alojamiento web

• 2.1. ¿Qué se necesita para publicar una web?
• 2.2. Registradores de dominios gratuitos y de pago
• 2.3. Pasos para registrar un dominio propio de pago
• 2.4. Pasos para registrar un dominio gratuito
• 2.5. ¿En qué consiste el hosting o alojamiento?
• 2.6. Crear un servidor web con XAMPP
• 2.7. Actividades prácticas guiadas

5: Entornos de desarrollo y HTML
1. Entorno de desarrollo

• 1.1. Introducción
• 1.2. Editores de código
• 1.3. Clientes FTP
• 1.4. Herramientas de análisis (navegadores)
• 1.5. IDEs completos

2. HTML

• 2.1. Introducción
• 2.2. Estructura general
• 2.3. Estructura de body
• 2.4. Otras API y etiquetas

6: Introducción a CSS y DOM
1. Introducción al CSS

• 1.1. ¿Qué es CSS y para qué sirve?
• 1.2. Versiones de CSS
• 1.3. Navegadores que lo admiten
• 1.4. Hoja CSS de ejemplo
• 1.5. Propiedades de CSS
• 1.6. Selectores de CSS

2. ¿Qué es el Modelo de Objetos del Documento (DOM)?

• 2.1. Objeto nodo
• 2.2. Objeto document
• 2.3. Objeto element
• 2.4. Objeto attr
• 2.5. Moverse por el árbol

3. ¿Qué es el Modelo de Objetos del Navegador (BOM)?

• 3.1. Objeto window
• 3.2. Objeto navigator
• 3.3. Objeto screen

7: JavaScript (I)
1. Introducción a JavaScript

• 1.1. ¿Qué es JavaScript y para qué sirve?
• 1.2. Características de JavaScript
• 1.3. JavaScript Vs. Java

2. Primeros pasos en JavaScript

• 2.1. Hola Mundo
• 2.2. Entradas y salidas
• 2.3. Variables

3. Operadores y expresiones

• 3.1. Asignación
• 3.2. Incremento, decremento y resto
• 3.3. Operadores lógicos
• 3.4. Otros operadores
• 3.5. Expresiones

4. Flujo de datos

• 4.1. Estructura if, else y elseif
• 4.2. Switch
• 4.3. Try and catch
• 4.4. While
• 4.5. Bucle for y forEach
• 4.6. Funciones

8: JavaScript (II)
1. Funciones

• 1.1. Parámetros de entrada
• 1.2. Parámetros de salida

2. Objetos especiales

• 2.1. Math
• 2.2. Date

3. Manejo de eventos

• 3.1. Tabla de eventos más comunes
• 3.2. Eventos más usados

4. jQuery

• 4.1. Selectores
• 4.2. Eventos
• 4.3. Manipuladores y efectos en elementos

5. AJAX

• 5.1. Métodos más comunes
• 5.2. Mi primer request
• 5.3. Métodos de objeto XMLHttpRequest
• 5.4. Envío de parámetros

6. Llamadas a AJAX vía jQuery

• 6.1. AJAX
• 6.2. Funciones más usuales
• 6.3. FormData

9: SEO y eficiencia en buscadores
1. Introducción al SEO

• 1.1. Diferencias entre SEO y SEM
• 1.2. Ventajas de ser visible en buscadores

2. Factores internos (on-page)

• 2.1. Mejorando la estructura del sitio web
• 2.2. Optimizando el contenido
• 2.3. Tratando con los bots

3. Factores externos (off-page)

• 3.1. Estrategia de link building
• 3.2. Estrategia de link baiting
• 3.3. Estrategia de tiered link building

4. Técnicas penalizables

• 4.1. Cloaking
• 4.2. Texto oculto
• 4.3. Granja de enlaces
• 4.4. Páginas puerta
• 4.5. Contenido duplicado
• 4.6. Redirección HTML/JavaScript
• 4.7. NoScript/NoIframe
• 4.8. Sitios de contenido dudoso

5. Pequeños detalles que ayudan al posicionamiento

• 5.1. Densidad de palabras
• 5.2. Alta en motores de búsqueda
• 5.3. Sitemaps
• 5.4. Aumentar la velocidad de indexación
• 5.5. Enlaces y pagerank
• 5.6. Tiempo de permanencia
• 5.7. ¿Cómo saldré posicionado?

6. Búsquedas y etiquetas
7. SEO para blogs

• 7.1. Dominio y alojamiento
• 7.2. Los contenidos
• 7.3. ¿Categorías o etiquetas?

8. GeoSEO (SEO local)

• 8.1. Dominios, subdominios o carpetas
• 8.2. El dominio y la IP
• 8.3. Mapas de negocios

9. Search Engine Reputation Management (SERM)
9.1. Detección
9.2. Comienza el movimiento
9.3. Ocupar resultados
10. Social Media Optimization (SMO)

• 10.1. Detalles
• 10.2. Marcadores sociales
• 10.3. Sitios de recomendación
• 10.4. Preguntas y respuestas
• 10.5. AJAX

11. SEO para PPC (pago por clic)
12. Cómo funciona un buscador
13. Herramientas

• 13.1. Buscadores
• 13.2. Palabras clave
• 13.3. Ranking en internet

10: Gestores de contenidos
1. ¿Qué es un sistema de gestión de contenidos (CMS)?

• 1.1. Funciones básicas de un gestor de contenidos
• 1.2. Características generales de los CMS
• 1.3. Necesidad de un CMS
• 1.4. Aplicaciones de los gestores de contenido
• 1.5. Ventajas de los gestores de contenidos
• 1.6. Historia de los CMS
• 1.7. Presente y futuro de los CMS

2. Tipos de gestores de contenido

• 2.1. Por el lenguaje de programación empleado
• 2.2. Por el tipo de licencia
• 2.3. Por tipo de uso o funcionalidad
• 2.4. Criterios de selección de un CMS
• 2.5. Los CMS en el e-learning

3. Los mejores CMS

• 3.1. Cómo escoger el mejor CMS
• 3.2. Gestores de contenido más populares
• 3.3. Nuevos CMS
• 3.4. ¿Qué condiciones ha de cumplir el CMS perfecto?

4. Instalación de un CMS

• 4.1. Requisitos del servidor
• 4.2. El cliente FTP
• 4.3. Crear una base de datos
• 4.4. Instalar una base de datos
• 4.5. ¡A trabajar!

5. Fases de un proyecto web sobre un sistema CMS

• 5.1. Definición inicial de la estructura general del sitio web
• 5.2. Bocetado de la web
• 5.3. Desarrollo de la plantilla base de página
• 5.4. Desarrollo individual de cada página
• 5.5. Pruebas y correcciones

• Profesionales del sector como diseñadores web o programadores que quieran actualizar su perfil o profundizar en aspectos concretos del temario
• Profesionales de otras áreas como responsables de marketing o diseñadores gráficos que quieran adquirir conocimientos complementarios a su perfil profesional actual
• Personas que, por motivos profesionales o personales, quieran adentrarse en el mundo del diseño web y adquirir las competencias necesarias.

Con el curso de Diseño Web Profesional conseguirás:

• Desarrollar un conocimiento global y completo de la programación y el desarrollo Web.
• Adquirir los conocimientos básicos de HTML5 y CSS3 con los que crear páginas web.
• Asentar la base del Frontend con Javascript, lenguaje versátil, necesario no solo para el ámbito web, si no para aplicaciones móviles, automatizar sistema operativo etc.
• Conocer en profundidad cómo funcionan los Gestores de Contenidos, como Drupal y WordPress. Conocer el lenguaje HTML y familiarizarse con sus opciones.
• Optimizar el diseño, la usabilidad y la accesibilidad de las páginas; transformar un diseño o un concepto en un documento HTML; diseñar y mantener fácilmente páginas web.