Jquery	  Mobile	  May	  2011	  Sco$	  Ryan	  Soaring	  Eagle	  LLC.	  sco$@theryansplace.com	  www.soaringeagleco.com	  
Challenges	  
Mobile	  Challenges	  •    Bandwidth	  •    Connec<vity	  •    Time	  to	  Market	  •    Delivery	  Mechanisms	  •    Dist...
Mobile	  Challenges	  •    Opera<ng	  Systems	  •    Devices	  •    Na<ve	  Feature	  access	  •    Orienta<on	  related	 ...
There	  is	  a	  market	  !!!	  
There	  is	  an	  Answer	  
Jquery	  Mobile	  •    Late	  Beta	  •    Leverages	  Jquery	  •    Integrates	  HTML	  5,	  JavaScript	  and	  CSS	  •   ...
Support	  
Events	  
Events	  •    Tap	  •    Tap	  and	  hold	  •    Swipe	  (any,	  leU	  and	  right)	  •    Orienta<on	  change	  (media	  ...
Themes	  
Themes	  •  Leverages	  CSS	  3	  to	  reduce	  size	  •  Gradients,	  Corner	  Rounding	  etc.	  •  Object	  oriented	  w...
Page	  Structure	  
Pages	  •  Combina<on	  Pages	     •  Leverage	  the	  data	  a$ribute	  (i.e.	  data-­‐role)	     •  Header	  ,	  Content...
Forms	  
Form	  Elements	  
And	  the	  Kitchen	  Sink	                            •  Transi<ons	                            •  Ajax	  and	  History	 ...
Bridging	  the	  Gap	  
Detailed	  Presentations	  •  Upcoming	     •    Denver	  HTML	  5	  User’s	  Group	  (July	  2011)	     •    Boulder	  Ja...
Photo	  Credits	  •    Highway	  Photo	  	  •    Phone	  Image	  Phonegap.com	  •    Phone	  Gap	  Image	  phonegap.com	  ...
JQuery Mobile
JQuery Mobile
Upcoming SlideShare
Loading in …5
×

JQuery Mobile

1,917
-1

Published on

Scott Ryan's DOSUG Ignite presentation on JQuery Mobile.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,917
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JQuery Mobile

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

×