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

  • 3,984 views
Uploaded 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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,984
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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