01 Building cross-platform mobile applications with jQuery Mobile

851 views

Published on

Building cross-platform mobile applications with jQuery Mobile.
Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

01 Building cross-platform mobile applications with jQuery Mobile

  1. 1. Desarrollo de Aplicaciones Cross- Platform para Dispositivos Moviles Building Cross-Platform Mobile Applications M.S.C. Raquel Vásquez Ramírez M.S.C. Cristian A. Rodríguez Enríquez
  2. 2. Contenido   •  Cross-­‐Pla/orm   •  jQuery  Mobile  Framework   •  Tópicos  del  Curso  (jQuery)   •  $(“#Hello-­‐World”)   •  Chaining  in  jQuery   •  CSS  &  DOM   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 02 of 11
  3. 3. Cross-Platform Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 03 of 11 Pueden ser utilizados en distintas plataformas Métodos Software Conceptos  
  4. 4. jQuery Mobile Framework “A Touch-Optimized Web Framework for Smartphones & Tablets” Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 04 of 11
  5. 5. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 05 of 11 A-grade - Full enhanced experience with Ajax-based animated page transitions. Source: http://jquerymobile.com/demos/1.0rc3/docs/about/platforms.html B-grade - Enhanced experience except without Ajax navigation features. C-grade - Basic, non-enhanced HTML experience that is still functional Not Officially Supported - May work, but haven't been thoroughly tested or debugged jQuery Mobile Supported Platforms
  6. 6. Tópicos del Curso •  Introducción a jQuery Mobile •  Creación de la primera aplicación con jQuery Mobile –  Estructura básica •  Estructura de la aplicación y navegación –  Páginas •  Páginas internas •  Páginas externas •  Inicialización de páginas en jQuery Mobile •  Ocultar páginas y mostrar eventos –  Diálogos –  Navegación e historial –  Transiciones Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 06 of 11
  7. 7. Tópicos del Curso •  Elementos de una página •  List Views –  Basic List View –  List View buttons –  List View dividers –  Advanced list views –  List view Split buttons –  Thumbnails e íconos –  List View Count Bubbles •  Barra de herramientas •  Botones •  Elementos de un formulario •  Temas •  Bases de Datos (Client Side) •  Conectividad a Web Services (Twitter) Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 07 of 11
  8. 8. $(“#Hello-­‐World”)   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 08 of 11 •  jQuery Setup •  Estructura HTML 5 •  CSS 3 •  JS •  Paginas Internas y Externas
  9. 9. Chaining  in  jQuery   // No chaining $("#menu").fadeIn('fast'); $("#menu").addClass(".active"); $("#menu").css('marginRight', '10px'); // vs. with chaining $("#menu").fadeIn('fast’) .addClass("active”) .css('marginRight', '10px'); Highlight: Chaining in jQuery let’s you write code that is both faster to execute, and easier to maintain Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 09 of 11
  10. 10. CSS  &  DOM   •  Acceso  a  elementos  del  DOM  (Document   Object  Model)   •  JavaScript  No  Intrusivo   •  Alta  Velocidad   •  Código  Simple   •  Sigue  los  estándares  de  CSS  de  la  W3C   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 10 of 11 Highlight: jQuery uses XPath
  11. 11. AcTvidades   •  Comprender  el  árbol  del  DOM   •  Adquirir  las  nociones  básicas  de  JSON   •  Instalar  XAMPP  (Servidor  Web  Apache,  MySQL   y  PHP)   •  Instalar  un  browser  compaTble  con  HTML  5   (Firefox,  Opera  y  Chrome)   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 11 of 11

×