jquery mobile introduction

jQuery Mobile!

Dutch Mobile Conference 2012!June 9!

Introduction!•  Joris Graaumans!•  Lecturer @ Fontys University of Applied

Sciences!•  Bachelor's program ICT & Media Design!– web development!–  interaction & visual design!– media strategy!

!

What  keeps  me  busy?  

Agenda  

•  Teaching  web  development  •  What  is  jQuery  Mobile?  •  jQuery  Mobile  Demo  

Teaching  Web  Development  

•  HTML  /  CSS  /  JavaScript  •  PHP  /  Web  APIs  •  Mobile  web  •  Augmented  /  Virtual  Reality  •  Flash  AcJonScript  3.0  

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  

Design  principles  

•  User  Interface  System  – Mobile  Web  ApplicaJons  – HTML5  based  

•  One  single  app  or  site  – All  popular  mobile  device  pla\orms  – Tested  on  a  large  set  of  devices  and  pla\orms  

Design  principles  

•  "Super  easy  to  use"  – SemanJc  markup  – Use  regular  HTML  with  data-­‐*  a^ributes  

•  Flexible  – Themes  – CSS  styles  – ScripJng  

Examples ...!

jQuery  Mobile  Examples  

m.venraybloeit.nl/test  

cultuurbewust.nl  

All platforms?!

Test  setup  ...  

Cultuurbewust.nl  

test.bertvanelswijk.nl  

jQuery Mobile How To!

jQuery  How  To  

•  pages  –  content  –  header  –  footer  

•  list  views  •  page  transiJons  •  navigaJon  bars  •  forms  •  events    

index.html  

•  Simple  page  •  Fixed  header  and  footer  •  Theming    

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)  

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)  

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.  

index5.html  

•  Forms  •  Use  regular  HTML5  Forms  •  Improve  styling  – data-­‐role="fieldcontain"  

•  Group  a  set  of  controls  – data-­‐role="controlgroup"  

ScripJng  

•  Pageinit  /  pageshow  events  •  Form  submit  •  Page  transiJon  •  index6.html  

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.  

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!  

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/  

Please  fill  in  this  survey  

h^p://Jnyurl.com/appuex  

Contact  

•  j.graaumans@fontys.nl  •  @JorisGraaumans