Desarrollo de Aplicaciones Cross-
Platform para Dispositivos Moviles
Building Cross-Platform Mobile Applications
M.S.C. Ra...
Contenido	
  
•  Manejo	
  de	
  Base	
  de	
  Datos	
  (Client	
  Side)	
  
•  Almacenamiento	
  Local	
  
– Permanente	
...
HTML 5: Data Storage
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 03 of 15
HTML5 offers two types of...
Permanent Storage and Session Storage
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 04 of 15
Para hab...
Permanent Storage
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 05 of 15
localStorage.lname = “Sarrio...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 06 of 15
Session Storage
sessionStorage.lname = “Sarrio...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 07 of 15
Usando una Base de Datos
Como se puede observa...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 08 of 15
Creando la Base de Datos
var	
  db	
  =	
  ope...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 09 of 15
Transaction
db.transacKon	
  (funcKon	
  (tran...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 10 of 15
Usando la Base de Datos
•  Crear Base de Datos...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 11 of 15
CREATE TABLE
db.transacKon	
  (funcKon	
  (tra...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 12 of 15
DROP TABLE
db.transacKon	
  (funcKon	
  (trans...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 13 of 15
INSERT INTO
db.transacKon	
  (funcKon	
  (tran...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 14 of 15
Base de Datos Server Side (Elementos)
var	
  s...
Conclusiones	
  
•  jQuery provee los elementos necesarios para
desarrollar aplicaciones para dispositivos móviles
•  Desa...
Upcoming SlideShare
Loading in …5
×

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

376
-1

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
376
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  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   •  Manejo  de  Base  de  Datos  (Client  Side)   •  Almacenamiento  Local   – Permanente   – Sesión   – Usando  Base  de  Datos   •  Conclusiones   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 02 of 15
  3. 3. HTML 5: Data Storage Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 03 of 15 HTML5 offers two types of data storage on the client: •  Storage via a database containing the tables described in SQL •  Storage through localStorage and sessionStorage objects, to store information made up of strings.
  4. 4. Permanent Storage and Session Storage Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 04 of 15 Para habilitar el “Storage” se utilizan dos objetos de JavaScript: •  localStorage: Permite el almacenamiento permanente •  sessionStorage: Permite el almacenamiento en la sesión
  5. 5. Permanent Storage Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 05 of 15 localStorage.lname = “Sarrion”; localStorage.fname = “Eric”;
  6. 6. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 06 of 15 Session Storage sessionStorage.lname = “Sarrion”; sessionStorage.fname = “Eric”;
  7. 7. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 07 of 15 Usando una Base de Datos Como se puede observar el almacenamiento temporal y permanente no provee las facilidades de las bases de datos SQL. Gracias a HTML 5 es posible usar bases de SQL de forma local.
  8. 8. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 08 of 15 Creando la Base de Datos var  db  =  openDatabase  (“Test”,  “1.0”,  “Test”,  65535);  
  9. 9. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 09 of 15 Transaction db.transacKon  (funcKon  (transacKon)     {          var  sql  =  SQL  query;          transacKon.executeSql  (sql,  [parameters]  /  undefined,            funcKon  ()          {                    //  JavaScript  code  to  execute  if  the  query  was  successful          },            funcKon  ()          {                    //  JavaScript  code  to  execute  if  the  query  failed          }  );   });  
  10. 10. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 10 of 15 Usando la Base de Datos •  Crear Base de Datos •  Insertar •  Listar (SELECT) •  Eliminar Tabla
  11. 11. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 11 of 15 CREATE TABLE db.transacKon  (funcKon  (transacKon)        {          var  sql  =  "CREATE  TABLE  customers  "  +                  "  (id  INTEGER  NOT  NULL  PRIMARY  KEY  AUTOINCREMENT,  "  +                  "lname  VARCHAR(100)  NOT  NULL,  "  +                    "fname  VARCHAR(100)  NOT  NULL)"          transacKon.executeSql  (sql,  undefined,  funcKon  ()          {                alert  ("Table  created");          },  error);      });  
  12. 12. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 12 of 15 DROP TABLE db.transacKon  (funcKon  (transacKon)        {          var  sql  =  "DROP  TABLE  customers";          transacKon.executeSql  (sql,  undefined,  ok,  error);      }  
  13. 13. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 13 of 15 INSERT INTO db.transacKon  (funcKon  (transacKon)        {          var  sql  =  "INSERT  INTO  customers  (lname,  fname)  VALUES  (?,  ?)";          transacKon.executeSql  (sql,  [lname,  fname],  funcKon  ()          {                alert  ("Customer  inserted");          },  error);      }  
  14. 14. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 14 of 15 Base de Datos Server Side (Elementos) var  sql  =  "SELECT  *  FROM  customers";   transacKon.executeSql  (sql,  undefined,…    
  15. 15. Conclusiones   •  jQuery provee los elementos necesarios para desarrollar aplicaciones para dispositivos móviles •  Desarrollo Ágil •  Si se desea sincronizar datos con un servidor, se requiere usar una base de datos local y sincronizar cuando se disponga de conexión mediante una consulta constante del estado de la conexión (Push?) •  Optimización de Aplicaciones Web Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 15 of 15
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×