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

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

Cross-Platform

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 03 of 11

Pueden ser utilizados en distintas plataformas

Métodos

Software

Conceptos  

jQuery Mobile Framework

“A Touch-Optimized Web Framework for Smartphones & Tablets”

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 04 of 11

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

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

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

$(“#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

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

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

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