Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Mobile: Progressive Enhancement with HTML5

19,401 views

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
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ◆◆◆ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×