Temario Curso Universitario Especialización Diseño Web

Indice Arquitectura Web, usabilidad y accesibilida…

1. Introducción

✅1.1 Ejercicio Análisis Usabilidad
✅1.2 Test Introducción

2. Usabilidad

✅2.1 Ejercicio La Usabilidad y el Usuario
✅2.2 Test Usabilidad

3. Accesibilidad Web

✅3.1 Ejercicio Análisis Accesibilidad Web
✅3.2 Test Accesibilidad Web

4. Arquitectura Web

✅4.1 Ejercicio Arquitectura Web
✅4.2 Test Arquitectura Web

5. El Diseño Web

✅5.1 Ejercicio El Diseño Web
✅5.2 Test El Diseño Web

Bibliografía del temario.
Ejercicio Final Usabilidad
Test Final Usabilidad
Control de calidad

1. HTML I Básico

✅ Anexo I. Libro HTML
✅ Materiales
✅ 1.1 Estructura
✅ Test Estructura HTML
✅ 1.2 Sintaxis
✅ Test Sintaxis HTML
✅ 1.3 Atributos
✅ Test Atributos HTML
✅ 1.4 Conceptos básicos
✅ 1.5 Conceptos básicos
✅ Test Conceptos básicos

2. HTML II Elementos

✅ 2.1 Cabeceras
✅ 2.2 Párrafos
✅ 2.3 Líneas horizontales
✅ 2.4 Comentarios
✅ Test Elementos HTML I
✅ 2.5 Salto de línea
✅ 2.6 Formato de texto
✅ 2.7 Atributos estilo
✅ 2.8 Link
✅ Test Elementos HTML II
✅ 2.9 Imágenes
✅ 2.10 Background
✅ 2.11 Flotar
✅ 2.12 Sizes
✅ 2.13 Botón
✅ Test Elementos HTML III
✅ Ejercicio Elementos HTML

3. HTML II Medio

✅ 3.1 Tablas
✅ 3.2 Tablas complejas
✅ Test Tablas HTML
✅ 4. Listas
✅ 4.1 Listas
✅ 4.2 Ejercicio Tablas Complejas y Listas HTML
✅ Test Listas HTML
✅ 5. Formularios
✅ 5.1 Formularios
✅ 5.2 Envío formulario.
✅ 5.3 Ejercicio Formulario HTML
✅ Test Formulario HTML
✅ 6. Color
✅ 6.1 Color
✅ 6.2 Colores por nombre
✅ 6.3 Web safe color
✅ 6.4 Colores hexadecimales
✅ Test Color en HTML
✅ 7. Etiqueta iframe
✅ Test iframe

4. HTML5

✅ 4.1.1 Por qué HTML5?
✅ 4.1.2 Novedades
✅ 4.1.3 Novedades II
✅ 4.1.4 Novedades III
✅ 4.2 Doctype y directiva html
✅ 4.2.1 Header
✅ 4.3 Directiva Nav
✅ 4.4 Directiva SECTION
✅ 4.5 Directiva ARTICLE
✅ 4.6 Directiva ASIDE
✅ 4.7 Directiva FOOTER
✅ Test HTML5 Básico I
✅ 4.8 MICRODATOS
✅ 4.9 Directiva ADDRESS
✅ 4.10 Directiva MARK
✅ 4.11 Directiva CITE, BLOCKQUOTE y Q
✅ 4.12 Directiva SMALL, STRONG, EM
✅ 4.13 Directiva WBR
✅ 4.14 Directiva VIDEO
✅ Test HTML5 Básico II
✅ 4.15 Directiva AUDIO
✅ 4.16 Directiva FIGURE y FIGCAPTION
✅ 4.17 Directiva DIV
✅ 4.18 Uso de Listas en HTML5
✅ 4.19 Carga de un documento en cache con Manifest
✅ 4.20 Contenido editable
✅ 4.21 Directiva Canvas
✅ Test HTML5 Básico III
✅ 5.1 Definición de un esquema
✅ 5.2 Directiva HGROUP
✅ 5.3 Creación de un Esquema
✅ Ejercicio Esquema Web HTML5
✅ Test HTML5 Esquema
✅ 6.1 Introducción a Formularios
✅ 6.2 Campos requeridos
✅ 6.3 Campos invalidos
✅ 6.4 Creando encuestas con Sliders
✅ 6.5 Fechas con DATE
✅ 6.6 Creando campo color
✅ 6.7 Opciones valores numéricos
✅ Ejercicio Formulario HTML5
✅ 7.1 Reset css compatibilidad
✅ 7.2 Compatibilidad con navegadores antiguos
✅ Ejercicio Compatibilidad Navegadores y Hoja de Reset
✅ Test HTML5 Avanzado
✅ Ejercicio Final XHTML
✅ Control de Calidad

1. Introducción

✅ 1.1 ¿Que es UX design
✅ 1.1.1 Ejercicio: ejemplo app.
✅ 1.1.2 Debate: ¿que es UX Design?2
✅ 1.2 Creación de una persona
✅ 1.3 Creación de un escenario de evento
✅ 1.3.1 Ejercicio: creación de un perfil
✅ 1.4 Fundamentos diseño móvil
✅ 1.5 Proceso de desarrollo de una aplicación

2. Mapa de la aplicación

✅ 2.1 Definiendo el contenido de nuestra aplicación
✅ 2.2 Test de organización de contenidos en usuarios
✅ 2.3 Creación del mapa de la aplicación
✅ 2.3.1 Ejemplo mapa de navegación1
✅ 2.3.1 Ejercicio: realización sitemap + test

3. Wireframe

✅ 3.1 Wireframe y materiales
✅ 3.1.1 Materiales para la creación de un Wireframe
✅ 3.1.2 Ejercicio: envío foto wireframe
✅ 3.2 Prototipado rápido
✅ 3.3 Interactividad wireframe con marvelapp
✅ 3.3.1 Ejercicio: Test del wireframe en usuarios

4. UI

✅ 4.1 Moodboard
✅ 4.2 Azulejo de Estilo
✅ 4.3 Diseño interface con Photoshop
✅ 4.3.1 Ejercicio: guía visual e interface

5. Prototype

✅ 5.1 Experiencie Design – Intro
✅ 5.2 Experiencie Design – Interactividad
✅ 5.3 Experiencie Design – Repeat Grid
UX-UI Proyecto. Prototipo Interactivo

Anexos

✅ Diseñando apps para móviles
✅ 1001freedownloads.com
✅ UX-UI: Google fonts Lato
✅ UX-UI: Designing for iOS 9
✅ UX-UI: iPhone 6 – 4.7” vector for …
✅ UX-UI: Resources – iOS Human Interface Guidelines
✅ UX-UI: iOS 8 GUI PSD (iPhone 6)
✅ What’s new in Adobe XD | Adobe Creative Cloud

1. CSS básico

✅ 1.1 Sintaxis
✅ Test Sintaxis
✅ 1.2 ID y Class
✅ Test id y class
✅ 1.3 CSS en html
✅ Test CSS en html
✅ Ejercicio CSS Básico

2. Estilos

✅ 2.1 Background
✅ Test Background
✅ 2.2 Texto
✅ Test Texto
✅ 2.3 Fuentes en CSS
✅ Test Fuentes
✅ 2.4 Links
✅ Test Links
✅ 2.5 Listas
✅ Test Listas
✅ 2.6 Tablas
✅ Test Tablas
✅ Ejericicio Estilos CSS

3. Cajas

✅ 3.1 Cajas en CSS
✅ Test Cajas
✅ 3.2 Margin
✅ Test Margin
✅ 3.3 Padding
✅ Test Padding
✅ Ejercicio Cajas

4. Avanzado

✅ 4.1 Grouping
✅ Test Agrupación y Anidación
✅ 4.2 Dimension
✅ Test Dimensión
✅ 4.3 Display
✅ Test Display y Visibility
✅ 4.4 Positioning
✅ Test Positioning
✅ 4.5 Float
✅ Test Float
✅ 4.6 Align
✅ Test Align
✅ Ejercicio CSS Avanzado
✅ 4.7 Pseudo class
✅ Test Pseudo Clases
✅ 4.8 Barranav
✅ 4.9 Imágenes
✅ 4.10 Media types
✅ Ejercicio Barra de Navegación

✅ Anexos CSS

✅ Anexo I. Introducción CSS
✅ Anexo II. CSS avanzado
✅ Anexo III: Chuleta CSS

✅ Ejercicio Final CSS
✅ Test Final CSS
✅ Control de Calidad

✅ WD_0201_Proyecto_PSD
✅ WD_0201_Proyecto_PSD Mockup
✅ WD_0202_Planificar
✅ WD_0203_SublimeText
✅ WD_0204_SublimeText_personalizar
✅ WD_0205_Snippet
✅ WD_0206_Package_Control
✅ WD_0207_Emmet
✅ WD_0208_Emmet_sintaxis
✅ WD_0209_Emmet_HTML
✅ WD_0210_Emmet_CSS
✅ WD_0211_Emmet_atajos
✅ WD_0212_PSD_Template
✅ WD_0212_PSD-I
✅ WD_0213_PSD-II
✅ WD_0214_PSD_III
✅ WD_0215_Cortes_rectangular
✅ WD_0216_Cortes_sectores
✅ WD_0217_HTML_cabecera
✅ WD_0218_HTML_contenido
✅ WD_0219_CSS_cabecera
✅ WD_0220_CSS_contenido
✅ WD_0221_Anexo_CSS
✅ WD_0222_Anexos
✅ WD_0203_Ej_Proyecto

✅ Bases Diseño Web
✅ WD_0101_intro
✅ WD_0102_Estructura_web
✅ WD_0103_Estructura_maquetadores
✅ WD_0104_Div_y_Secciones
✅ WD_0105_Manual_HTML
✅ WD_0106_Manual_CSS
✅ WD_Filezilla_Descarga
✅ WD_FileZilla Client Tutorial
✅ WD_0107_ej_maq_1Col
✅ WD_0107_Ej_Maquetación_1Col
✅ WD_0108_ej_maq_2Col
✅ WD_0108_Ej_Maquetación_2Col
✅ WD_0109_ej_Maqueta_cabecera
✅ WD_0110_ej_Maqueta_contenido
✅ WD_0111_ej_Maqueta_pie
✅ WD_0112_ej_Maqueta_CSS-I
✅ WD_0113_ej_Maqueta_CSS-II
✅ WD_0113_ej_Maqueta_CSS-III
✅ WD_0114_Ej_Maqueta Web

1. Introducción

1.1 Introducción a la programación – Intro.
✅ 1.2 Introducción a la programación – HTML.
✅ 1.3 Introducción a la programación – CSS.
✅ 1.4 Introducción a la programación – JavaScript.
✅ 1.5 Color hexadecimal.
✅ 1.6 Color Indexado.
✅ 1.7 Color lab.
✅ 1.8 Daltonismo.
✅ 1.9 Sincronizar color.
✅ 1.10 Operaciones con color.
✅ 1.11 Decodificación de tamaño y resolución de pantalla.
✅ 1.12 Utilizar Photoshop para el diseño Web.
✅ 1.13 Documento. Mesas de trabajo.
✅ 1.14 Espacio de trabajo de diseño Web.

2. Diseño Responsive.

✅ 2.1 ¿qué es el diseño responsive?
✅ 2.2 Seleccionar breakpoints
✅ 2.3 Creación de plantillas responsive en Photoshop.

3. Desarrollo Wireframe, desarrollo del proyecto.

✅ 3.1 Creación de un boceto.
✅ 3.2 Planificar un proyecto.
✅ 3.3 Grid Systems.
✅ 3.4 Bootstrap Photoshop templates
✅ 3.5 Divisiones. Estructura.
✅ 3.6 Creación de wirerfame
✅ 3.7 Desarrollo de un tema de color.
✅ 3.8 Elecciones de las fuentes correctas.
✅ 3.9 Estilos de carácter y párrafo.
✅ 3.10 Selección de imágenes para la maqueta.
✅ 3.11 Temas para la interfaz. Iconos.
✅ 3.12 UI theme
✅ 3.13 Mockup

4. Composiciones de capas.

✅ 4.1 Composiciones de capas.
✅ 4.2 Selección de grupo.
✅ 4.3 Copia de CSS a partir de capas.

5. Tratamiento del texto.

✅ 5.1 Tipos de texto.
✅ 5.2 Opciones de texto.
✅ 5.3 Estilos de Párrafo
✅ 5.4 Estilos de carácter.
✅ 5.5 Fuentes compatibles.
✅ 5.6 Servicios de fuentes.
✅ 5.7 Efectos de textos.
✅ 5.8 Controlar el borde de los textos.
✅ 5.9 Operaciones de estilos tipográficos.
✅ 5.10 Estilos de Hipervínculos.
✅ 5.11 Controlar el borde de los textos.

6. Creación de imágenes Sprite.

✅ 6.1 ¿Qué es un sprite de imágenes?
✅ 6.2 Desarrollo y montaje de un sprite.
✅ 6.3 Optimización de sprite.

7. Utilización de otras aplicaciones en el flujo de trabajo.

✅ 7.1 Organización del documento.
✅ 7.2 Creación y uso de CSS con Photoshop.
✅ 7.3 Exportación de HTML de Photoshop a un entorno de desarrollo integrado (IDE)
✅ 7.4 Archivos de Photoshop en sitios Web de Muse.

8. Optimización, automatismos y sectorización.

✅ 8.1 Sectores. Modificación de sectores.
✅ 8.2 Contenido de un sector.
✅ 8.3 Guardar para Web.
✅ 8.4 Formato Web GIF.
✅ 8.5 Formato Web JPG.
✅ 8.6 Formato Web PNG.
✅ 8.7 Exportación de mesas de trabajo.
✅ 8.8 Exportación de capas
✅ 8.9 Cuándo utilizar imágenes o CSS.
✅ 8.10 Creación de un droplet.
✅ 8.11 Secuencia de comandos.
✅ 8.12 Creación de galerías fotográficas Web

Sección 1: Dreamweaver CC

✅ Introducción a novedades
✅ Novedades
✅ Espacio de trabajo
✅ Cambios en el panel nuevo

Sección 2: Diseñador CSS

✅ Organización generales
✅ Opciones de filtros css

Sección 3: Nuevo flujo de trabajo

✅ Añadir fuentes
✅ Añadir medios
✅ Añadir selectores y propiedades

Sección 4: Diseño de cuadricula fluida

✅ Crear nueva cuadricula fluida
✅ Edición de cuadriculas

Sección 5: HTML5 y jQuery

✅ Estructura del panel insertar
✅ Panel estructura

Sección 6: Formularios

✅ Etiquetas de formularios
✅ Inserción y propiedades

Sección 7: Panel medios

✅ Vídeo HTML5
✅ Audio HTML5
✅ Objetos edge animate

Sección 8: Panel jQuery UI

✅ Nuevos widgets jquery
✅ Ejemplos basicos
✅ Personalización de un acordeon
✅ Personalización de tabs
✅ Propiedades del resto de elementos

Sección 9: Efectos jQuery

✅ Efectos
✅ Efectos disponibles

Sección 10: Web fonts

✅ Cuestiones básicas
✅ Incrustación de web fonts
✅ Inscrustación de fuentes locales
✅ Añadiendo nuevos conjutos de fuentes

Sección 11: Proyecto web – Catering

✅ Presentación de la plantilla
✅ Cortes/Slides y exportación de la plantilla
✅ Estructura HTML5
✅ Estilos CSS 1/3
✅ Estilos CSS 2/3
✅ Estilos CSS 3/3

1. ¿Qué es WordPress?

✅ 1.1 Obtener la información necesaria
✅ 1.2 Descarga de WordPress
✅ 1.3 Instalación de WordPress en 5 minutos
✅ 1.4 Instalación manual
✅ 1.5 Modificar el directorio de WordPress
✅ Test ¿Qué es WordPress?

2. Trabajar con WordPress en modo local

✅ 2.1 Instalar XAMPP en Window
✅ 2.2 Instalar XAMPP en MacOS
✅ 2.3 Obtener la información necesaria
✅ 2.4 Instalación de WordPress
✅ Test Trabajar con WordPress en modo local

3. Comenzando con WordPress

✅ 3.1 Escritorio
✅ 3.2 Ajustes de WordPress
✅ 3.3 Modos de contenido Entradas y Páginas
✅ Test Comenzando con WordPress

4. Gestión de Usuarios

✅ 4.1 Editor de usuarios
✅ Test Gestión de Usuario

5. Multimedia

✅ 5.1 Ajustes
✅ Test Multimedia

6. Gestión de Enlaces

✅ 6.1 Editor de enlaces
✅ 6.2 Categorías
✅ Test Gestión de Enlaces

7. Editor de contenidos

✅ 7.1 Añadir imágenes
✅ 7.2 Crear una galería de imágenes
✅ 7.3 Creación de enlaces
✅ 7.4 Añadir videos de Youtube
✅ 7.5 Publicación
✅ 7.6 Paneles comunes
✅ Test Editor de contenidos

8. Entradas en WordPress

✅ 8.1 Gestión de Entradas
✅ 8.2 Creación y gestión de Categorías
✅ 8.3 Uso de Etiquetas
✅ 8.4 Otros paneles
✅ Test Entradas en WordPress

9. Páginas en WordPress

✅ 9.1 Gestión de Páginas
✅ 9.2 Jerarquía
✅ 9.3 Cómo hacer que una página aparezca en el inici…
✅ Test Páginas en WordPress

10. Herramientas

✅ 10.1 Importar y exportar contenido
✅ Test Herramientas

11. Comentarios

✅ 11.1 Gestión de comentarios
✅ 11.2 Ajustes
✅ Test Comentarios

12. Plugins

✅ 12.1 Plugins básicos en WordPress
✅ 12.2 Creación de un formulario de contacto
✅ Test Plugins

13. Apariencia

✅ 13.1 Instalar Temas
✅ 13.2 Buenas prácticas
✅ 13.3 Uso de Widgets
✅ 13.4 Menús de secciones
✅ Test Apariencia

14. Tema Twenty Eleven

✅ 14.1 Formatos de Entrada
✅ 14.2 Plantilla de páginas
✅ 14.3 Customize
✅ 14.4 Widgets
✅ 14.5 Opciones del tema
✅ 14.6 Cabecera personalizada
✅ 14.7 Fondo personalizado
✅ Test Tema Twenty Eleven

15. Indexación en buscadores y redes sociales

✅ 15.1 Uso de enlaces permanentes
✅ Test Indexación en buscadores y redes sociales

16. Mantener actualizado WordPress

✅ 16.1 Archivos de WordPress
✅ 16.2 Copias de Seguridad
✅ Test Mantener actualizado WordPress

17. Proyecto Final WordPress Esencial
✅ Control de Calidad

✅ Descargar brackets.io

✅ 1. HMTL-CSS-JS
✅ 2. HMTL-CSS-JS
✅ 3. HTML-CSS-JS

✅ Materiales de la Asignatura
✅ 1. Instalación de WordPress
✅ 2. Temas en WordPress
✅ 3. Activación del Tema Bici Travel
✅ 4. Datos básicos del Tema
✅ 5. Carga de Contenido
✅ 6. Menú principal
✅ 7. Cabecera
✅ 8. Pie de página
✅ 9. Sidebars
✅ 10. Plantilla de la página principal
✅ 11. Plantilla de página
✅ 12. Entrada individual
✅ 13. Archivos
✅ 14. Comentarios
✅ 15. Resultados de la búsqueda
✅ 16. Error 404 (página no encontrada)
✅ Test Final WordPress Diseño Theme
✅ Anexos
✅ Imágenes destacadas: plugins y snippets
✅ Chuleta WP
✅ Control de Calidad