jQuery Mobile Introduction
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobile Introduction

on

  • 1,552 views

jQuery Mobile Introduction

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

Statistics

Views

Total Views
1,552
Views on SlideShare
1,551
Embed Views
1

Actions

Likes
0
Downloads
87
Comments
0

1 Embed 1

http://us-w1.rockmelt.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Mobile Introduction jQuery Mobile Introduction Presentation Transcript

  • jQuery Mobile!Dutch Mobile Conference 2012! June 9!
  • Introduction!•  Joris Graaumans!•  Lecturer @ Fontys University of Applied Sciences!•  Bachelors 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  plaorms   –  Tested  on  a  large  set  of  devices  and  plaorms  
  • 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