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

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

on

  • 3,784 views

Building cross-platform mobile applications with jQuery Mobile.

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

Statistics

Views

Total Views
3,784
Views on SlideShare
3,784
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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