Your SlideShare is downloading. ×
02 Building cross-platform mobile applications with jQuery Mobile / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,025
views

Published on

Building cross-platform mobile applications with jQuery Mobile. …

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,025
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 09 of 12 jQuery Mobile's navigation model HTTP Request index page2 page3 page4
  • 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. 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. 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