jQuery Mobile:Progressive Enhancement withHTML5
jQuery Mobile    jQuery Mobileand Progressive Enhancement        with               or really                             ...
Who?                                            Todd Anderson                                                   Progressiv...
What?                 http://jquerymobile.com• 1.0 Alpha 4.1• Built on jQuery + jQuery UI* (Widget)• Cross Platform• A-gra...
jQM Graded Browser Support                                         http://jquerymobile.com/gbs/jQuery Mobile: Progressive ...
How?                 http://jquerymobile.com• Progressive Enhancement• HTML5 dataset attribute (data-)• CSS3 & Themes• Uno...
Progressive Enhancement:             Content              http://www.flickr.com/photos/bamawester/97776370/jQuery Mobile: P...
Progressive Enhancement:      Content + Presentation              http://www.flickr.com/photos/bamawester/97776370/jQuery M...
Progressive Enhancement: Content + Presentation + Behavior              http://www.flickr.com/photos/bamawester/97776370/  ...
How?!    data-rolejQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile Pagesdata-role=”page”      <!DOCTYPE html>      <html>        <head>             <title>Hello World</title> ...
jQuery Mobile Pages                       Page Anatomy                                             required<!DOCTYPE html>...
jQuery Mobile pages page demojQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile Pages               Internal vs. ExternalInternalhref : #anotherpagemultiple internal pagesExternalhref : an...
jQuery Mobile pagespages demojQuery Mobile: Progressive Enhancement with HTML5
blah blah mist blah blah hungry blah                   dialog                      Messagesi think my presentation is goin...
jQuery Mobile pagesdialog demojQuery Mobile: Progressive Enhancement with HTML5
$.mobile                     methods & propertiesAPI                 • $.mobile.pathconfiguration     • $.mobile.base      ...
$.mobile                                  configurationAPI                 • nsconfiguration     • defaultTransition        ...
.jqmData()            data accessjQuery$(elem).data( key );$(elem).data( key, value );jQuery Mobile$(elem).jqmData( key );...
itʼs our time, down here.             real world$(50).find(“:jqmData(hideout=ʻfratelliʼ)”);          jQuery Mobile: Progres...
this is so sandwich right now                  UI Widgetsbuttoncontrolgroupnavbartoolbarsform elementslist                ...
buttons and such                    data-role=”button”                      <a href=”#stop” data-role=”button”>no whammy!<...
jQM button group layout: inline                   organization• data-inline true          eep              quack          ...
jQM button group layout: controlgroup                        organization• data-inline• data-role=”controlgroup”  • data-t...
jQM button group layout: ui-grid            organization• data-inline• data-role=”controlgroup”  • data-type• data-role  •...
jQuery Mobile buttons!button demojQuery Mobile: Progressive Enhancement with HTML5
jQM button group layout: navbar            organization• data-inline• data-role=”controlgroup”  • data-type• data-role  • ...
jQM button navbah          data-role=”navbar”• data-grid                       <div data-role="navbar" data-grid="b">     ...
jQuery Mobile buttons!navbar demojQuery Mobile: Progressive Enhancement with HTML5
lost password?        forms!jQuery Mobile: Progressive Enhancement with HTML5
form markup and makeup                                 forms• declaration <form id=”myform” action=”login.php” method=”pos...
demoform demo: jQM docshttp://jquerymobile.com/demos/1.0a4/#docs/forms/forms-all.html           jQuery Mobile: Progressive...
form elements              form element widgets             http://jquerymobile.com/demos/1.0a4/docs/forms/docs-forms.html...
native data attributes                      native*• provides no enhancement• data-role=”none”• data-native-menu=”true” * ...
listsdata-role=”listview”   jQuery Mobile: Progressive Enhancement with HTML5
jQM item renderers                  list item renderersno extra data-roles!inspects the children declaration within a list...
jQuery Mobile lists   lists demojQuery Mobile: Progressive Enhancement with HTML5
themes                 themes• jQM provides 5 color swatch schemes  • -a through -e; allows up to 26• DO NOT DOUBLE-UP WRA...
themes       beyond color swatches• valencia http://jquerymobile.com/test/themes/valencia/• ThemeRoller http://jqueryui.co...
accessibility                          WAI-ARIA                        http://www.w3.org/WAI/intro/aria.php• Roles, States...
accessibilityscreen reader demo**shamelessly re-presented as seen in a Scott Jehl presentation  http://dayofjs.com/videos/...
cʼmon already!      enhancement loadfile                                           min-gzipjquery.min.js                   ...
perception techniques<head>    ...                                     css    <link rel="stylesheet" href="style/jquery.mo...
perception techniques                                 LabJS                                    http://labjs.com/<html>    ...
outta the browser... sorta     web-appjQuery Mobile: Progressive Enhancement with HTML5
home                        home screen• metadata <meta name="viewport" content="width=device-width; initial-scale=1.0; ma...
we bappweb-app demojQuery Mobile: Progressive Enhancement with HTML5
jQM home applications     web-app considerations                                        higgins!• use AJAX on change page ...
native deploymentnative (easily)existing jQM application -> native installjQuery Mobile: Progressive Enhancement with HTML5
native deployment - PhoneGap               PhoneGap                 http://www.phonegap.com/• project templates• JS API fo...
native deployment - Adobe AIR                        Adobe AIR           http://labs.adobe.com/technologies/flashplatformru...
native deployment - others                            native: others                            existing jQM application -...
i do like the shirt, though.              questions?** except from you in the blue shirt. 3rd row. you know who you are.  ...
jquery mobile                             thank you!                          todd anderson / todd@custardbelly.com@bustar...
Upcoming SlideShare
Loading in...5
×

jQuery Mobile: Progressive Enhancement with HTML5

17,820

Published on

An overview of the jQuery Mobile framework and its foundation on Progressive Enhancement, as well as a few techniques on breaking a jQM application from the "traditional" browser.

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

No Downloads
Views
Total Views
17,820
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
263
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Mobile: Progressive Enhancement with HTML5"

  1. 1. jQuery Mobile:Progressive Enhancement withHTML5
  2. 2. jQuery Mobile jQuery Mobileand Progressive Enhancement with or really +JS but never jQuery Mobile: Progressive Enhancement with HTML5
  3. 3. Who? Todd Anderson Progressively Enhanced from NJ. Currently resides in Boston. Shows displeasure for right-aligned fields. Took a picture of himself in a kitchen at least once. kitchenphoto_3421.jpeg Senior Software Engineerhttp://infrared5.com todd@custardbelly.com @bustardcelly http://twitter.com 100% Centaur Author jQuery Mobile: Progressive Enhancement with HTML5
  4. 4. What? http://jquerymobile.com• 1.0 Alpha 4.1• Built on jQuery + jQuery UI* (Widget)• Cross Platform• A-grade browser support jQuery Mobile: Progressive Enhancement with HTML5
  5. 5. jQM Graded Browser Support http://jquerymobile.com/gbs/jQuery Mobile: Progressive Enhancement with HTML5
  6. 6. How? http://jquerymobile.com• Progressive Enhancement• HTML5 dataset attribute (data-)• CSS3 & Themes• Unobtrusive JavaScript jQuery Mobile: Progressive Enhancement with HTML5
  7. 7. Progressive Enhancement: Content http://www.flickr.com/photos/bamawester/97776370/jQuery Mobile: Progressive Enhancement with HTML5
  8. 8. Progressive Enhancement: Content + Presentation http://www.flickr.com/photos/bamawester/97776370/jQuery Mobile: Progressive Enhancement with HTML5
  9. 9. Progressive Enhancement: Content + Presentation + Behavior http://www.flickr.com/photos/bamawester/97776370/ http://selleckwaterfallsandwich.tumblr.com/jQuery Mobile: Progressive Enhancement with HTML5
  10. 10. How?! data-rolejQuery Mobile: Progressive Enhancement with HTML5
  11. 11. jQuery Mobile Pagesdata-role=”page” <!DOCTYPE html> <html> <head> <title>Hello World</title> <link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" /> </head> <body> <div data-role=”page”> <p>This is so selleck.</p> </div> </body> <script src="script/jquery-1.6.1.min.js"></script> <script src="script/jquery.mobile-1.0a4.1.js"></script> </html> jQuery Mobile: Progressive Enhancement with HTML5
  12. 12. jQuery Mobile Pages Page Anatomy required<!DOCTYPE html> optional<html> <head> <title>I am sure to mistype something when I show code.</title> <link rel="stylesheet" href=”style/jquery.mobile-1.0a4.1.min.css"/> </head> <body> <div data-role=”page”> <div data-role=”header”><h3>jQuery Mobile Pages</h3></div> <div data-role=”content”> <p class=”content-header”>Page Anatomy</p> </div> <div data-role=”footer”> <p class=”footer-right”>jQuery Mobile: ProgEnhan with HTML5</p> <img src=”fatc-logo.png” alt=”FATC” /> </div> </div> </body> <script src="script/jquery-1.6.1.min.js"></script> <script src="script/jquery.mobile-1.0a4.1.js"></script></html> jQuery Mobile: Progressive Enhancement with HTML5
  13. 13. jQuery Mobile pages page demojQuery Mobile: Progressive Enhancement with HTML5
  14. 14. jQuery Mobile Pages Internal vs. ExternalInternalhref : #anotherpagemultiple internal pagesExternalhref : anotherpage.html[data-ajax=”true”] : 1 internal page[data-ajax=”false”] : multiple internal pages[rel=”external”] : multiple internal pages jQuery Mobile: Progressive Enhancement with HTML5
  15. 15. jQuery Mobile pagespages demojQuery Mobile: Progressive Enhancement with HTML5
  16. 16. blah blah mist blah blah hungry blah dialog Messagesi think my presentation is going well!do you, now?*sigh* whatʼs happened between us?you keep complaining about “mist”. itʼs annoying. jQuery Mobile: Progressive Enhancement with HTML5
  17. 17. jQuery Mobile pagesdialog demojQuery Mobile: Progressive Enhancement with HTML5
  18. 18. $.mobile methods & propertiesAPI • $.mobile.pathconfiguration • $.mobile.base • $.mobile.silentScroll() • $.mobile.addResolutionBreakpoints() • $.mobile.activePage • $.mobile.pageLoading() • $.mobile.changePage() jQuery Mobile: Progressive Enhancement with HTML5
  19. 19. $.mobile configurationAPI • nsconfiguration • defaultTransition • gradeA() • ajaxEnabled • more... <script src="script/jquery-1.5.2.min.js"></script> <script type="text/javascript"> (function( $, document ) { $(document).bind( "mobileinit", function() { $(document).unbind( "mobileinit"); $.extend( $.mobile, { ns: “custom-" }); }) })( jQuery, document ); </script> <script src="script/jquery.mobile-1.0a4.1.min.js"></script> * custom namespace requires change to .ui-mobile in css jQuery Mobile: Progressive Enhancement with HTML5
  20. 20. .jqmData() data accessjQuery$(elem).data( key );$(elem).data( key, value );jQuery Mobile$(elem).jqmData( key );$(elem).jqmData( key, value );$(page).find(“div:jqmData(role=ʼcontentʼ)”); jQuery Mobile: Progressive Enhancement with HTML5
  21. 21. itʼs our time, down here. real world$(50).find(“:jqmData(hideout=ʻfratelliʼ)”); jQuery Mobile: Progressive Enhancement with HTML5
  22. 22. this is so sandwich right now UI Widgetsbuttoncontrolgroupnavbartoolbarsform elementslist jQuery Mobile: Progressive Enhancement with HTML5
  23. 23. buttons and such data-role=”button” <a href=”#stop” data-role=”button”>no whammy!</a> <button> <button type=”submit” name=”submit” value=”submit-stop”>no whammy!</button>data-icon rate data-icon=”star”data-iconpos swim waddledata-iconpos=”left” data-iconpos=”right” data-iconpos=”notext” jQuery Mobile: Progressive Enhancement with HTML5
  24. 24. jQM button group layout: inline organization• data-inline true eep quack ow false [default] eep quack ow jQuery Mobile: Progressive Enhancement with HTML5
  25. 25. jQM button group layout: controlgroup organization• data-inline• data-role=”controlgroup” • data-type vertical [default] horizontal home home favorites settings favorites settings jQuery Mobile: Progressive Enhancement with HTML5
  26. 26. jQM button group layout: ui-grid organization• data-inline• data-role=”controlgroup” • data-type• data-role • ui-grid-[a to d] • ui-block-[a to d] home favorites settings jQuery Mobile: Progressive Enhancement with HTML5
  27. 27. jQuery Mobile buttons!button demojQuery Mobile: Progressive Enhancement with HTML5
  28. 28. jQM button group layout: navbar organization• data-inline• data-role=”controlgroup” • data-type• data-role • ui-grid-[a to d] • ui-block-[a to d]• data-role=”navbar” jQuery Mobile: Progressive Enhancement with HTML5
  29. 29. jQM button navbah data-role=”navbar”• data-grid <div data-role="navbar" data-grid="b"> <ul> <li><a href="#">home</a></li> • column count <li><a href="#">settings</a></li> <li><a href="#">favorite</a></li> • a(2) - d(5) </ul> </div> car mayor soda $(“div:jqmData(role=ʼnavbarʼ)”).bostonize(); cah mayah tonic jQuery Mobile: Progressive Enhancement with HTML5
  30. 30. jQuery Mobile buttons!navbar demojQuery Mobile: Progressive Enhancement with HTML5
  31. 31. lost password? forms!jQuery Mobile: Progressive Enhancement with HTML5
  32. 32. form markup and makeup forms• declaration <form id=”myform” action=”login.php” method=”post”> ... </form>• content <label for="name">Username:</label> <input type="text" name="name" id="name" value="" />• event $(“myform”).bind( “submit”, function( event ) { ... }); jQuery Mobile: Progressive Enhancement with HTML5
  33. 33. demoform demo: jQM docshttp://jquerymobile.com/demos/1.0a4/#docs/forms/forms-all.html jQuery Mobile: Progressive Enhancement with HTML5
  34. 34. form elements form element widgets http://jquerymobile.com/demos/1.0a4/docs/forms/docs-forms.htmltextinput$(“input[type=’text’]”).textinput(“disable”);checkboxradio$(“#myform”).find(“input”) .filter(“[type=’checkbox’], [type=’radio’]”) .attr(“checked”, false) .checkboxradio(“refresh”);slider$("input[type=range]").val(100).slider("refresh");selectmenu var myselect = $("select#myselect");var myselect = $("select#myselect"); myselect[0].selectedIndex = 0;myselect[0].selectedIndex = 0; myselect.selectmenu("refresh");myselect.selectmenu("refresh"); jQuery Mobile: Progressive Enhancement with HTML5
  35. 35. native data attributes native*• provides no enhancement• data-role=”none”• data-native-menu=”true” * Must be declared on element prior to load of jQuery Mobile. Cannot be assigned and refreshed at runtime. jQuery Mobile: Progressive Enhancement with HTML5
  36. 36. listsdata-role=”listview” jQuery Mobile: Progressive Enhancement with HTML5
  37. 37. jQM item renderers list item renderersno extra data-roles!inspects the children declaration within a list item (<li>)icon list item renderers, split button listseasy to create own custom list item rendererslook sorta like this by default jQuery Mobile: Progressive Enhancement with HTML5
  38. 38. jQuery Mobile lists lists demojQuery Mobile: Progressive Enhancement with HTML5
  39. 39. themes themes• jQM provides 5 color swatch schemes • -a through -e; allows up to 26• DO NOT DOUBLE-UP WRAP-AROUND! • eg. ui-bar-aa jQuery Mobile: Progressive Enhancement with HTML5
  40. 40. themes beyond color swatches• valencia http://jquerymobile.com/test/themes/valencia/• ThemeRoller http://jqueryui.com/themeroller/ jQuery Mobile: Progressive Enhancement with HTML5
  41. 41. accessibility WAI-ARIA http://www.w3.org/WAI/intro/aria.php• Roles, States and Properties• Keyboard navigation with tabIndex• Live Regions for dynamic content Introduction to WAI ARIA Gez Lemon, August 1 2008 http://dev.opera.com/articles/view/introduction-to-wai-aria/ jQuery Mobile: Progressive Enhancement with HTML5
  42. 42. accessibilityscreen reader demo**shamelessly re-presented as seen in a Scott Jehl presentation http://dayofjs.com/videos/22152945/jquery-mobile_scott-jehl jQuery Mobile: Progressive Enhancement with HTML5
  43. 43. cʼmon already! enhancement loadfile min-gzipjquery.min.js 31KBjquery.mobile.min.js 19KBjquery.mobile.min.css 7KB 57KB jQuery Mobile: Progressive Enhancement with HTML5
  44. 44. perception techniques<head> ... css <link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" /> <style type="text/css"> body { display: none; visibility: hidden; } </style></head><body>...</body><script src="script/jquery-1.6.1.min.js"></script><script src="script/jquery.mobile-1.0a4.1.min.js"></script><script type="text/javascript"> function showPage() { $("body").css( "visibility", "visible").css( "display", "inherit" ); } $().ready( showPage );</script> eh...... jQuery Mobile: Progressive Enhancement with HTML5
  45. 45. perception techniques LabJS http://labjs.com/<html> <head> <title>labjs</title> <link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" /> </head> <body> <p>loading...</p> </body> <script src="script/LAB.min.js"></script> <script> $LAB .script("script/jquery-1.6.1.min.js") .script("script/jquery.mobile-1.0a4.1.min.js").wait( function() { $("body").load("jqm_page.html"); }); </script></html> better! jQuery Mobile: Progressive Enhancement with HTML5
  46. 46. outta the browser... sorta web-appjQuery Mobile: Progressive Enhancement with HTML5
  47. 47. home home screen• metadata <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum- scale=1.0; minimum-scale=1.0; user-scalable=false;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />http://developer.apple.com/library/safari/#documentation/appleapplications/reference/ SafariHTMLRef/Articles/MetaTags.html• webclips & appearance <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" /> <link rel="apple-touch-startup-image" href="start-up-image.png" />http://developer.apple.com/library/safari/#documentation/appleapplications/reference/ safariwebcontent/configuringwebapplications/configuringwebapplications.html jQuery Mobile: Progressive Enhancement with HTML5
  48. 48. we bappweb-app demojQuery Mobile: Progressive Enhancement with HTML5
  49. 49. jQM home applications web-app considerations higgins!• use AJAX on change page • else will launch the browser• include Back buttons in header• use window.navigator.standalone• cache.manifest http://diveintohtml5.org/offline.html jQuery Mobile: Progressive Enhancement with HTML5
  50. 50. native deploymentnative (easily)existing jQM application -> native installjQuery Mobile: Progressive Enhancement with HTML5
  51. 51. native deployment - PhoneGap PhoneGap http://www.phonegap.com/• project templates• JS API for native access (limited)• PhoneGap Build (Beta invite) jQuery Mobile: Progressive Enhancement with HTML5
  52. 52. native deployment - Adobe AIR Adobe AIR http://labs.adobe.com/technologies/flashplatformruntimes/• SDK compiler tools• StageWebView• JS <--> AS = iffy on device Making the most of StageWebView Sean Voisen, October 29 2010 http://voisen.org/blog/2010/10/making-the-most-of-stagewebview/ jQuery Mobile: Progressive Enhancement with HTML5
  53. 53. native deployment - others native: others existing jQM application -> native installNimbleKithttp://www.nimblekit.com/QuickConnectFamilyhttp://quickconnectfamily.org/Titanium*http://www.appcelerator.com/Rhodes**http://rhomobile.com/products/rhodes/ * in theory, using ** havenʼt tested Titanium.UIWEbView jQuery Mobile: Progressive Enhancement with HTML5
  54. 54. i do like the shirt, though. questions?** except from you in the blue shirt. 3rd row. you know who you are. jQuery Mobile: Progressive Enhancement with HTML5
  55. 55. jquery mobile thank you! todd anderson / todd@custardbelly.com@bustardcellyhttp://github.com/bustardcellyhttp://www.custardbelly.com/blog jQuery Mobile: Progressive Enhancement with HTML5
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×