0
Desarrollo de Aplicaciones Cross-
Platform para Dispositivos Moviles
Building Cross-Platform Mobile Applications
M.S.C. Ra...
Contenido	
  
•  Setup	
  jQuery	
  
•  Estructura	
  Básica	
  
•  Pagina	
  Interna	
  vs	
  Pagina	
  Externa	
  
•  Pa...
Setup jQuery
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 03 of 12
<link rel=”stylesheet” href=”js/j...
Estructura Básica
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 04 of 12
<div	
  id=“pagina”	
  data-...
Pagina Interna vs Pagina Externa
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 05 of 12
Note: #bar	
 ...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 06 of 12
Page transitions
The jQuery Mobile framework i...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 07 of 12
Page transitions
To set a custom transition ef...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 08 of 12
Creating Dialogs
Any page can be presented as ...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 09 of 12
jQuery Mobile's navigation model
HTTP Request
...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 10 of 12
jQuery Mobile's navigation model
HTTP Request
...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 11 of 12
Web Service Basics (RESTFul)
•  HTTP Request
•...
Ac<vidades	
  
•  Registrarse en Twitter
•  Crear una App en Twitter
•  Obtener Keys de Twitter
•  Analizar servicios REST...
Upcoming SlideShare
Loading in...5
×

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

4,048

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total Views
4,048
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "02 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   •  Setup  jQuery   •  Estructura  Básica   •  Pagina  Interna  vs  Pagina  Externa   •  Page  Transi<ons   •  Crea<ng  dialogs   •  jQuery  Mobile's  naviga<on  model   •  Web  Service  Basics  (RESTFul)   •  Ac<vidades   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 02 of 12
  3. 3. Setup jQuery Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 03 of 12 <link rel=”stylesheet” href=”js/jQueryMobile/ jQuery.mobile.theme-1.1.0.min.css” /> <script src=”js/jQuery-1.7.2.min.js”></script> <script src=”js/jQueryMobile/jQuery.mobile-1.1.0.min.js”></script> •  Include jQuery Mobile CSS File •  Include jQuery •  Include jQuery Mobile JS File
  4. 4. Estructura Básica Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 04 of 12 <div  id=“pagina”  data-­‐role=“page”/>            <header  data-­‐role=“header”  data-­‐posi<on=“fixed”></header>              <div  data-­‐role=“content“></div>     <footer  data-­‐role=“footer”  data-­‐posi<on=“fixed”></footer>   </div> Include data-role: •  page •  header •  content •  footer
  5. 5. Pagina Interna vs Pagina Externa Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 05 of 12 Note: #bar  =  page  id.   <p>View internal page called <a href="#bar">bar</a></p> <a href="multipage.html" rel="external">Multi-page link</a> Internal Page External Page
  6. 6. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 06 of 12 Page transitions The jQuery Mobile framework includes a set of six CSS-based transition effects: •  slide •  slideup •  slidedown •  pop •  fade •  flip Highlight: By  default,  the  framework  applies  the  right  to  leW  slide  transi<on.  
  7. 7. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 07 of 12 Page transitions To set a custom transition effect, add the data-transition attribute to the link. Possible values include: In addition, you can also force a "backwards" transition by specifying data- direction="reverse" on your link. <a href="index.html" data-transition="pop">I'll pop</a> Note: specifying data-direction="reverse"  was  formerly  data-­‐back="true",  which  will  remain   supported  un<l  1.0  
  8. 8. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 08 of 12 Creating Dialogs Any page can be presented as a modal dialog by adding the data- rel="dialog" attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page. <a href="foo.html" data-rel="dialog">Open dialog</a>
  9. 9. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 09 of 12 jQuery Mobile's navigation model HTTP Request index page2 page3 page4
  10. 10. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 10 of 12 jQuery Mobile's navigation model HTTP Request page1 page2 page4 Highlight: The  basic  workflow  with  page  loading  is  as  follows:  first,  a  page  is  requested  with  a  normal  HTTP   request,  and  subsequent  "pages"  are  then  requested  and  injected  into  that  page's  DOM.   page3 index
  11. 11. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 11 of 12 Web Service Basics (RESTFul) •  HTTP Request •  Unique Endpoint (1 Operation) •  Plain Data (XML, JSON… format) Case Study: Twitter API with OAuth
  12. 12. Ac<vidades   •  Registrarse en Twitter •  Crear una App en Twitter •  Obtener Keys de Twitter •  Analizar servicios REST de Twitter Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 12 of 12
  1. A particular slide catching your eye?

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

×