Your SlideShare is downloading. ×

jQuery Mobile Introduction

1,226

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,226
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  

×