Responsive Web Sites with Certified Adobe Dreamweaver CC

Transcripción

1 Dirigido a: Diseñadores gráficos e ilustradores interesados en crear web Programadores y diseñadores Web. Profesionistas, docentes y estudiantes relacionados con el área. Profesionistas interesados o publico en general Requisitos: Conocimientos de html. Interés por crear sitios Web responsivo. Llevar laptop. El curso incluye: Diploma de participación del curso. Examen de certificación con 2 oportunidades. Simulador de examen. CD de recursos digitales. Objetivo: En este curso se proporciona al estudiante un panorama general de las consideraciones que se deben tener en el ambiente del desarrollo orientado a la Web, tomando como inicio desde los conocimientos básicos necesarios para el desarrollo Web hasta llegar a la implementación de un sitio Web que integre las características y tendencias más utilizadas en la Web. El estudiante obtendrá los conocimientos fundamentales del uso de HTML5 y CSS3 para su lograr la lectura, comprensión e implementación en el desarrollo de sitios Web. Obtener el conocimiento para crear sitios Web orientadas a una visualización adaptable en dispositivos móviles de nueva generación, equipos de cómputo y tabletas de gama alta. Introducir a la creación de diseños Web adaptables cross-platform haciendo uso de frameworks Web que permiten que las Web adaptativas luzcan y se sientan como aplicaciones nativas, pero con todas los recursos que la Web ofrece. Módulos: 1. Introducción a HTML5 y CSS3. 2. Planeación y diseño con Dreamweaver CC. 3. Proyecto final. 4. Taller de preparación para el examen de certificación.

2 Módulo 1 Introducción a HTML5 y CSS3 Unidad I.- Introducción Qué es HTML5?. Ventajas. Limitantes. Unidad II.- Fundamentos Definición de un documento HTML5. Etiquetas semánticas. Encabezado y navegación. Nuevos elementos para formularios. Validación de formularios. Unidad III.- CSS3 Modos de color. Bordes y fondos. Manejo de texto. Insertar fuentes. Sombras y otros filtros. Animación y transiciones. Unidad IV.- Diseño responsivo Atributo media. Uso de rejillas para diagramación. Metaetiqueta viewport. Unidad V.- Animación y multimedia Etiqueta <audio>. Etiqueta <video>. Etiqueta <canvas>. SVG. Módulo 2 Planeación y diseño con Dreamweaver CC Unidad I.- Planeación del sitio web Comprensión de las tareas y responsabilidades de la gestión de proyectos. Público objetivo y sus necesidades. Relación del público objetivo con el contenido de la página Web. Impacto de las normativas estándar de Copyright en la planeación del sitio Web y en el uso de recursos. Consideraciones de los principios básicos de usabilidad, legibilidad y accesibilidad del sitio Web. Unidad II.- Estructuración del sitio Herramientas y entorno de trabajo de Dreamweaver. Definición y edición de un sitio. Configuración y estructura básica de un sitio. Creación de nuevos documentos. Configuración de preferencias en los nuevos documentos y opciones de accesibilidad.

3 Trabajando de forma local y remota en Dreamweaver. Manejo de archivos y carpetas en el sitio. Configuración de capetas predeterminadas de un sitio. Configuraciones en archivos de operación de un sitio. Estructura y semántica de un documento en HTML5. Importancia del uso de las etiquetas <meta>. Agregar contenido HTML5. Unidad III.- Diseñando el sitio. Conceptos y principios del diseño de páginas. Introducción a las formas de diseño Web. Diseño Web fijo. Diseño Web fluido o diseño Web líquido. Diseño Web elástico. Diseño Web responsivo. Sistema de columnas o rejillas y su implantación en el diseño Web. Introducción a las hojas de estilo en cascada (CSS). Uso de páginas prediseñadas de Dreamweaver. Opciones de visualización de un documento en Dreamweaver. Vista en vivo. Vista en código. Vista dividida. Maquetación de un sitio con herramientas en la Web. Medias Queries y su implementación en un sitio. Crear diseños para sitios Web que funcionen correctamente en distintos sistemas operativos, configuraciones o versiones del navegador, y dispositivos. Consideraciones importantes para los navegadores Web. Estilos CSS. Color. Fondos. Degradados Efectos en el texto. Efectos de sombra. Transformaciones. Transiciones. Animaciones. Plantillas en Dreamweaver. Uso, creación y reutilización de plantillas en Dreamweaver. Implementación de Bootstrap en el sitio. Uso del modelo de rejillas con Bootstrap. Componentes de Bootstrap. Diseñando con Bootstrap el sitio. Uso de la Documentación de Bootstrap. Unidad IV.- Administración del sitio. Definición del sitio. Explorando la convención de nombres en un sitio Estructura del sitio y definición de carpetas predeterminadas utilizando HTML5 Boilerplate.

4 Configuración local y remota del sitio. Opciones de sincronización. Gestión de múltiples sitios. Unidad V.- Añadiendo y estructurando texto. Adición de contenido Uso del panel Insertar. Uso del menú insertar Uso del Quick Tag Editor. Inserción de texto. Encabezados. Párrafos. Listas. Formatos de importación de documentos Documentos Word. Documentos de Excel. Trabajando con tablas. Trabajando con datos tabulares. Unidad VI.- Navegación del sitio Tipos de enlaces. Insertar enlaces. Uso de hipervínculos Uso de anclas Hipervínculos a recursos. Estructuración de la navegación. Estilos CSS en la barra de navegación. Diseño de página única. Diseño multipágina Unidad VII.- Formulario y Contenido multimedia. Como funcionan los formularios. Diseño de formularios. Formularios accesibles. Configurando opciones de formularios. Usando fieldsets y tags. Insertando campos de texto. Insertando items a listas de menús. Inserando checkboxes. Insertando Radio buttons. Unidad VIII.- Widgets del panel Insertar. Widgets de jquery UI Uso del componente acordeón. Uso del componente autocompletado. Uso del componente botón. Uso del componente selector de fechas. Uso del componente diálogo. Uso del componente menú. Uso del componente barra de progreso. Uso del componente menú de selección. Uso del componente Slider. Uso del componente Spinner. Uso del componente pestañas. Uso del componente descripción emergente.

5 Widgets de jquery Mobile Roles de datos. Páginas. Cabecera, contenido y pie de página. Botones. Vistas de lista. Navegación. Transiciones. Iconos. Configuración de jquery Mobile. Módulo 4 Taller de preparación para el examen de certificación Registro a Certiport. Uso de Dreamweaver. Simulador de examen grupal (1 intento). Training grupal. Simulador de examen individual (2 intentos). Aplicación del examen de certificación (2 intentos) Módulo 3 Proyecto final Definición del sitio. Configuración del sitio. Maquetación el sitio. Codificación del sitio. Aplicando el diseño responsivo al sitio. Aplicando estilos CSS. Inserción de contenido multimedia. Prueba del sitio en navegadores Web. Entrega del proyecto final.