Your SlideShare is downloading. ×
0
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
jQuery Mobile Introduction
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

jQuery Mobile Introduction

1,240

Published on

jQuery Mobile Introduction …

jQuery Mobile Introduction
Presented at Dutch Mobile Conference, June 9, 2012
www.mobileconference.nl
Level: beginner

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,240
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
89
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. jQuery Mobile!Dutch Mobile Conference 2012! June 9!
  • 2. Introduction!•  Joris Graaumans!•  Lecturer @ Fontys University of Applied Sciences!•  Bachelors program ICT & Media Design! –  web development! –  interaction & visual design! –  media strategy!!
  • 3. What  keeps  me  busy?  
  • 4. Agenda  •  Teaching  web  development  •  What  is  jQuery  Mobile?  •  jQuery  Mobile  Demo  
  • 5. Teaching  Web  Development  •  HTML  /  CSS  /  JavaScript  •  PHP  /  Web  APIs  •  Mobile  web  •  Augmented  /  Virtual  Reality  •  Flash  AcJonScript  3.0  
  • 6. What is jQuery Mobile?   "A  unified  user  interface  system  that  works   seamlessly  across  all  popular  mobile  device   pla4orms,  built  on  the  rock-­‐solid  jQuery  and  jQuery   UI  foundaJon."    •  Started  in  August  2010  •  Current  version:  1.1.0  –  April  13,  2012  •  jquerymobile.com   6  
  • 7. Design  principles  •  User  Interface  System   –  Mobile  Web  ApplicaJons   –  HTML5  based  •  One  single  app  or  site   –  All  popular  mobile  device  plaorms   –  Tested  on  a  large  set  of  devices  and  plaorms  
  • 8. Design  principles  •  "Super  easy  to  use"   –  SemanJc  markup   –  Use  regular  HTML  with  data-­‐*  a^ributes  •  Flexible   –  Themes   –  CSS  styles   –  ScripJng  
  • 9. Examples ...!
  • 10. jQuery  Mobile  Examples  
  • 11. m.venraybloeit.nl/test  
  • 12. cultuurbewust.nl  
  • 13. All platforms?!
  • 14. Test  setup  ...  
  • 15. Cultuurbewust.nl  
  • 16. test.bertvanelswijk.nl  
  • 17. jQuery Mobile How To!
  • 18. jQuery  How  To  •  pages   –  content   –  header   –  footer  •  list  views  •  page  transiJons  •  navigaJon  bars  •  forms  •  events    
  • 19. index.html  •  Simple  page  •  Fixed  header  and  footer  •  Theming    
  • 20. index2.html  Typically  used  for  navigaJon  between  pages  •  Basic  <ul>  and  <li>  elements    •  Listviews   –  data-­‐role="listview"   –  inset  appearance:  data-­‐inset="true"  •  Listheaders   –  data-­‐divider-­‐theme  (on  the  <ul>  element)  
  • 21. index3.html  •  TransiJons  between  pages  •  Links:    <a href="#idOfThePage"> ... </a>!•  Links  are  loaded  with  Ajax  by  JQM   –  page  transiJons  •  Dialogs:  no  history  &  pop-­‐up  •  Different  transiJon  types  (pop,  slide,  etc)  
  • 22. index4.html  •  NavigaJon  bar:  data-role="navbar"  •  NavigaJon  bu^ons,  Go  back,  Go  Home  •  Icons   –  data-­‐icon="home"   –   data-­‐icon="arrow-­‐l"   –  data-­‐icon="plus"   –  data-­‐icon="back"   –  etc.  
  • 23. index5.html  •  Forms  •  Use  regular  HTML5  Forms  •  Improve  styling   –  data-­‐role="fieldcontain"  •  Group  a  set  of  controls   –  data-­‐role="controlgroup"  
  • 24. ScripJng  •  Pageinit  /  pageshow  events  •  Form  submit  •  Page  transiJon  •  index6.html  
  • 25. LimitaJons  of  jQuery  Mobile  •  Try  it  and  find  out  •  Performance  •  jQuery  Mobile  does  not  try  to  mimic   –  iOS   –  Android   –  Windows    •  NaJve  app?   –  Use  PhoneGap  as  a  wrapper.  
  • 26. Conclusions  •  jQuery  Mobile  is  super  easy  to  use   –  declaraJve  style   –  not  very  different  from  wriJng  regular  HTML  •  Builds  on  HTML  /  JQuery  /  jQuery  UI  •  Go  and  give  it  a  try!  
  • 27. References  •  h^p://jquerymobile.com/demos/1.1.0/docs/ about/gemng-­‐started.html  •  h^p://jquerymobile.com/themeroller/  •  Tool  for  a  quick  GUI  setup:  h^p://codiqa.com/  
  • 28. Please  fill  in  this  survey   h^p://Jnyurl.com/appuex  
  • 29. Contact  •  j.graaumans@fontys.nl  •  @JorisGraaumans  

×