Desarrollo Responsive con HTML5, CSS3 y JavaScript

Formato: Classroom, Online, Onsite | Duración: 5 días

Descripción general

Descripción general

Con las modernas propuestas de los estándares de internet y la multiplicación del uso de móviles, han aparecido tal variedad de dispositivos, que resulta prácticamente imposible conocer a priori el aspecto o el tamaño que un sitio o aplicación Web tendrá en la pantalla de destino.

La solución vino propuesta por el estándar HTML5 (y sus técnicas asociadas) que asumieron desde el principio esta necesidad, siendo una de las primeras características en implementarse, ya en 2010. No obstante, esto supone el conocimiento básico de las nuevas técnicas que proponen los estándares HTML5, CSS3 y JavaScript 5.

Además, para facilitar la tarea a los desarrolladores, han aparecido varias librerías que simplifican la labor adoptando desde el inicio un planteamiento “mobile first”: jQuery Mobile, BootStrap son ejemplos populares de estas soluciones. Se impone, por tanto, conocer las tecnologías de base, así como los principios básicos de aquellos “frameworks” de trabajo que facilitan la tarea, en forma de librerías y componentes bien construidos, que dispongan del suficiente apoyo empresarial y la necesaria
cobertura como para garantizar su continuidad y mantenimiento en el tiempo.

De ahí que el objetivo del curso sea aportar a los alumnos esos fundamentos, sus reglas, principios,
documentación y ejemplos suficientes, como para que puedan incorporar esta tecnología en sus
desarrollos.

Objetivos del curso

Objetivos del curso

Al finalizar el curso los alumnos podrán:

  • Revisar y comprender el alcance de la nueva oferta promovida por los estándares vinculados a HTML5 (+CSS3 y JavaScript)
  •  Comprender los cambios estructurales en las páginas y su significado semántico
  • Manejar las API asociadas con las nuevas etiquetas
  • Comprender y manejar el significado de CSS 3 en páginas estándar así como en el desarrollo para
    móviles
  • Identificar y manejar las nuevas propuestas de API’s asociadas a JavaScript 5
  • Entender los conceptos básicos en que se cimenta el diseño “responsive”
  • Conocer las herramientas de desarrollo idóneas para este tipo de proyectos y manejar sus recursos desde el inicio
  •  Modificar los sitios existentes para que se adapten a las necesidades actuales
  • Definir arquitecturas de desarrollo que sean actuales, potentes y extensibles, a la vez que de fácil
    mantenimiento
  • Comprender cómo aplicar los conocimientos previos de versiones anteriores de los estándares Web, al nuevo marco de trabajo
  • Aprender integrar los “frameworks” de tipo responsive en aplicaciones nuevas y existentes

Dirigido a

Dirigido a

Directores de informática, Directores de departamentos tecnológicos, Responsables de desarrollo de software o proyectos tecnológicos, Jefes de proyecto, Analistas con responsabilidad sobre proyectos y, en general, cualquier persona que por sus necesidades profesionales, deba conocer el funcionamiento de esta herramienta.

Prerrequisitos

Prerrequisitos

Los alumnos deben tener alguna experiencia en proyectos de desarrollo de software, y conocimientos básicos de los lenguaje de Internet: HTML, CSS y JavaScript.

Contenido del curso

Contenido del curso

Etiquetas estructurales en HTML5

  • Estructura de documentos Web
  • Aspectos semánticos
  • Elementos con API’s vinculadas

Fundamentos de CSS3

  • Nuevos selectores
  • Manejo de Capas
  • Media Queries
  • Mecanismos dinámicos: Transformaciones, Transiciones y animaciones
  • Optimización de recursos en CSS3

API’s de JavaScript

  • Geolocalización
  • LocalStorage y SessionStorage
  • Manejo de archivos
  • Drag & Drop
  • Web Sockets
  • Web Workers

Herramientas de desarrollo “responsive”

  • Visual Studio 2013/2015
    • Soporte de HTML
    • Soporte de CSS
    • Soporte específico de técnicas “responsive”
    • Soporte y depuración de código JavaScript
  • Herramientas de los navegadores
  • Web Essentials
  • Sublime Text
  • Aptana Studio

Diseño Responsive

  • Concepto básicos
  • Elementos que influyen en el diseño “responsive”
  • HTML5 Semántico
  • Los nuevos mecanismos de entrada

Validaciones de contenido

  • CSS3: Cambios importantes
  • Creación de “layouts responsive”
  • Ubicación de elementos
  • Media Queries y su papel en el diseño responsive
  • Tipografía y Glifos
  • Fallbacks

Los marcos de desarrollo “responsive”

  • Situación actual de los marcos “responsive”
  • Fundamentos de jQuery Mobile
    • Trabajo básico con jQuery Mobile
    • Adaptación de la interfaz de usuario
    • Ejemplos
  • Fundamentos de BootStrap
    • Diseño con BootStrap
    • Técnicas fundamentales
    • Adaptación al dispositivo
    • Manejo de la nueva interfaz de usuario

Interesante?

¿Quieres más información sobre este curso? Contacta con nosotros y te asesoraremos