DISEÑO Y DESARROLLO DE WEBS PARA DISPOSITIVOS DE MOVILES

Transcripción

1 DISEÑO Y DESARROLLO DE WEBS PARA DISPOSITIVOS DE MOVILES ORGANIZA ESI Valladolid. DIRECCIÓN Sonia de la Calle Vicente INTRODUCCIÓN El curso de especialización en Diseño y desarrollo de webs para dispositivos móviles utilizará la tecnología Html5 y CSS3 que es la que tiene un presente y un futuro más claro en el mundo del desarrollo de contenidos para la web, dispositivos móviles y para los libros electrónicos para tablets. El curso mostrará los fundamentos del lenguaje Html5 y CSS3 aplicados al diseño y desarrollo de webs, así como el uso de librerías Javasript que nos ayuden a tener un control en el uso de Html5 y CSS3 cuando nuestra página web se muestra en navegadores que no soportan estas tecnologías. También se proporcionarán los conocimientos necesarios a los usuarios para ser capaz de definir una estrategia SEO y poder posicionar de forma orgánica su sitio web, así como establecer las bases de accesibilidad correctas, tanto para facilitar el trabajo del desarrollador como para mejorar la experiencia del usuario final. Posteriormente se utilizarán los conocimientos previos en Html5 y CSS3 enfocados al desarrollo de contenidos para la web móvil y para los libros electrónicos. Se abordarán las bases del desarrollo de webs para móviles basado en estándares, se ahondará en las implicaciones de la creación de un sitio web móvil y también en determinados aspectos clave a la hora de optimizar los contenidos para los terminales, como la detección de dispositivos, contenidos adaptados a cada terminal, optimización de ancho de banda, etc. De igual modo se abordarán las técnicas fundamentales para poder introducir vídeo, sonido y animaciones en los contenidos HTML, y añadir interactividad Javascript enfocada a tablets táctiles. Con estas aplicaciones informáticas y con los conceptos asociados, los asistentes estarán en disposición de incorporarse al mercado laboral con plenas garantías o de mejorar sus capacidades actuales y su rendimiento en el trabajo. El contenido de este curso se organiza en las siguientes áreas de conocimiento, fundamentales para los profesionales del diseño: Área de programación Web: Html5, CSS3 y Javascript 1 ESI

2 OBJETIVOS El curso pretende que los profesionales del diseño gráfico y del diseño y desarrollo de sitios web se incorporen al tren de las nuevas tecnologías, mejorando el rendimiento en su actual puesto de trabajo. Otro de sus objetivos es que aquellas personas con inquietudes en la materia accedan a una formación especializada, de nivel profesional, que les permita incorporarse al mercado laboral con la máxima preparación y garantía. LUGAR ESI Valladolid, situada en el Paseo de Filipinos, número 5, con código postal en Valladolid. PERFIL El curso va dirigido a profesionales del diseño o la programación de sitios o aplicaciones web, titulados o estudiantes de cualquiera de los módulos de formación profesional de grado medio o grado superior en artes gráficas o programación; comunicación, imagen y sonido; comercio y marketing y profesionales o estudiantes de cualquier disciplina con necesidad de dominar el diseño y el desarrollo de sitios web. PREINSCRIPCIÓN Hasta 29 de Febrero mediante alguno de los siguientes procedimientos: Entregando el boletín de inscripción debidamente cumplimentado en la secretaría de ESI Valladolid. Enviando el boletín de inscripción mediante el número de fax A través de la página web A través de contacta@esivalladolid.com. CERTIFICADOS Los alumnos que hayan asistido al 80 % de las clases y realicen las prácticas del curso podrán solicitar el diploma en Diseño Web. 2 ESI

3 MÓDULOS 1-Html5 y CSS 45 H Novedades Html5 Uso de librerías Javascritp para el control de webs sin Html5 Estructura semántica Esqueleto estructural Truco Auto-refresh Título y metaetiquetas Etiquetas estructurales Esbozo de contenido en el Header Contenido inicial del Body y el Footer 0 Cambio de UTF a ISO Ayudas para la estructuración con DIV Añadido de contenido a la página índex Semántica Marcado de tiempo con Time Preparación para microdatos: fotografía Añadido de microdatos Añadido de microformatos: Tarjeta de visita virtual Trabajo fuera de línea Multimedia Gráficos en Html5: canvas y SVG. Formularios Configuración del archivo PHP y variables para formulario. CSS3 Bordes Border Radius Múltiples radios en las esquinas Shadow Fondos Tamaño Origen Fondos Múltiples Efectos de Texto Sombra Word-wrapping Transformaciones Transformación de posición Transformación de rotación Transformación de escala Transformación de distorsión Transiciones, animaciones y efectos Transiciones de opacidad y sombra de caja Transición de escala Transición de color Animación Múltiples fondos y transparencias Sombra en el texto Animaciones Primera animación Múltiples fotogramas clave Animación de posición Columnas múltiples Creación de múltiples columnas Separación entre columnas Línea separadora Inserción de imágenes Diseñar un blog Diseñar una web con animaciones Integración de aplicaciones web Accesibilidad y posicionamiento SEO10 H Investigación y estrategia: Palabras Claves Evaluación completa de páginas SEO Optimización de nuestras páginas SEO Promocionando nuestra web Informes de seguimientos y mejoras Google Sitemap Google Analytics Pautas de accesibilidad y herramientas 3 ESI

4 3-Diseño y desarrollo de webs para dispositivos móviles 30 H. Introducción Diseño Modos de interacción. Aproximaciones para el diseño multi-pantalla. Miniaturizar o Movilizar. Arquitectura de contenidos. Creación de layouts Preparación de layouts para dispositivos móviles. Desarrollo básico XMTML mobile profile Introducción: Doctype, codificación, cacheado, transcoding o reformateo Sintaxis básica y comparativa con WML. Listado de etiquetas soportadas. Estructura básica de un documento. Elementos de XHTML MP Preparando nuestro entorno de desarrollo: fichero base con includes en PHP. Encabezados y textos. Enlaces. Imágenes. Formularios. Depuración XHTM MP en navegador. Hojas de estilos Hojas de estilos Textos: fuentes y medidas Modelo de caja y posicionamiento Desarrollo avanzado Contenidos personalizados y estrategias de detección de dispositivos. Alternativas existentes para la detección de dispositivos. Servicio: Handset Detection. Imágenes a la carta. Flash y vídeo. Movilizando con WordPress. Mapas. Seguimiento desde Google Analytics. Diseño de microsites Qué es un microsites? Partes de un microsite. Testeo y validación Validación Emuladores Testeo en real en dispositivos reales y grupos de prueba. 4-Maquetación para tablets, ipad y libros electrónicos 15 H Aspectos básicos Creación de contenidos multiplataforma y Resoluciones de pantallas. publicación Formatos con CSS Media Queries. Qué es una webapp. Maquetación fluida vs maquetación fija. Cómo hacer un webapp. Viewport y audio. Demostración de webapp en emulador. Multimedia con Html 5 Uso de la tipografía y efectos en medios Añadir vídeo. multiplataforma. Añadir audio. Overflow y frames. Añadir gráficos. Gradientes, máscaras, reflection, transiciones y Geolocalización. animaciones. Almacenamiento local. Librerías Webapps. Diseño y animación con CSS3 Eventos de Multitouch y de gesto. Baker Framework. Preparación de layouts para tablets. Adobe Digital Publishing DPS. Efectos gráficos estáticos y animados. ebooks en formato EPUB de maquetación fija Transformaciones 2D y 3D. para ibooks Animaciones. Visualización en ipad. Efectos adicionales. Safari extensions de iphone. 4 ESI

5 5 ESI