JQuery Mobile Denver Ignite 2011

666 views
610 views

Published on

A quick overview of Jquery Mobile given at the 2011 Ignite talks for Denver Open Source User's Group and Denver Java User's Group

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
666
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JQuery Mobile Denver Ignite 2011

  1. 1. Jquery MobileMay 2011<br />Scott Ryan Soaring Eagle LLC.<br />scott@theryansplace.com<br />www.soaringeagleco.com<br />
  2. 2. Challenges<br />
  3. 3. Mobile Challenges<br />Bandwidth<br />Connectivity<br />Time to Market<br />Delivery Mechanisms<br />Distribution<br />
  4. 4.
  5. 5. Mobile Challenges<br />Operating Systems<br />Devices<br />Native Feature access<br />Orientation related issues<br />Real Estate<br />Events<br />Input<br />Window depth<br />
  6. 6. There is a market !!!<br />
  7. 7. There is an Answer<br />
  8. 8. Jquery Mobile<br />Late Beta<br />Leverages Jquery<br />Integrates HTML 5, JavaScript and CSS<br />Lightweight (12K)<br />Progressive Enhancement<br />Accessibility<br />
  9. 9. Support<br />
  10. 10. Events<br />
  11. 11. Events<br />Tap<br />Tap and hold<br />Swipe (any, left and right)<br />Orientation change (media queries and CSSsupport)<br />Scroll Events (start and stop)<br />Page Events <br />(before show, show, before hide, hide, before create, create)<br />
  12. 12. Themes<br />
  13. 13. Themes<br />Leverages CSS 3 to reduce size<br />Gradients, Corner Rounding etc.<br />Object oriented with 26 swatches<br />Large variety of swatch combinations<br />Icon set included<br />
  14. 14. Page Structure<br />
  15. 15. Pages<br />Combination Pages<br />Leverage the data attribute (i.e. data-role)<br />Header , Content and Footer<br />Multiple logical pages per physical pages<br /><div data-role="page"><br /><div data-role="header"> <br /><h1>Page Title</h1> <br /></div><!-- /header --> <br /><div data-role="content"> <br /><p>Page content goes here.</p> <br /></div><!-- /content --> <br /><div data-role="footer"> <br /><h4>Page Footer</h4> <br /></div><!-- /footer --> <br /></div><br />
  16. 16. Forms<br />
  17. 17. Form Elements<br />
  18. 18. And the Kitchen Sink<br />Transitions<br />Ajax and History<br />List support<br />Dialogs<br />Menus<br />Toolbars<br />Grids<br />Content Blocks<br />
  19. 19. Bridging the Gap<br />
  20. 20. Detailed Presentations<br />Upcoming<br />Denver HTML 5 User’s Group (July 2011)<br />Boulder Java User’s Group (July 2011)<br />Denver Open Source User’s Group (October 2011)<br />Colorado Springs Open Source User’s Group (October 2011)<br />Cold Fusion User’s Group (June 7, 2011)<br />
  21. 21. Photo Credits<br />Highway Photo <br />Phone Image Phonegap.com<br />Phone Gap Image phonegap.com<br />Crowd Photo by alexkess<br />Disney Photo by Express Monorail<br />Building Structure by Del~Uks<br />Cat in Sink by sunside<br />

×