• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery Mobile: Progressive Enhancement with HTML5
 

jQuery Mobile: Progressive Enhancement with HTML5

on

  • 17,256 views

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.

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.

Statistics

Views

Total Views
17,256
Views on SlideShare
13,603
Embed Views
3,653

Actions

Likes
11
Downloads
232
Comments
0

10 Embeds 3,653

http://custardbelly.com 3168
http://obsforandroid.wordpress.com 457
http://translate.googleusercontent.com 14
http://erotti.com 4
http://webcache.googleusercontent.com 3
http://localhost 2
https://twitter.com 2
http://paper.li 1
http://website-unblocker.appspot.com 1
http://www.slashdocs.com 1
More...

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: Progressive Enhancement with HTML5 jQuery Mobile: Progressive Enhancement with HTML5 Presentation Transcript

    • jQuery Mobile:Progressive Enhancement withHTML5
    • jQuery Mobile jQuery Mobileand Progressive Enhancement with or really +JS but never jQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • 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
    • jQM Graded Browser Support http://jquerymobile.com/gbs/jQuery Mobile: Progressive Enhancement with HTML5
    • How? http://jquerymobile.com• Progressive Enhancement• HTML5 dataset attribute (data-)• CSS3 & Themes• Unobtrusive JavaScript jQuery Mobile: Progressive Enhancement with HTML5
    • Progressive Enhancement: Content http://www.flickr.com/photos/bamawester/97776370/jQuery Mobile: Progressive Enhancement with HTML5
    • Progressive Enhancement: Content + Presentation http://www.flickr.com/photos/bamawester/97776370/jQuery Mobile: Progressive Enhancement with HTML5
    • Progressive Enhancement: Content + Presentation + Behavior http://www.flickr.com/photos/bamawester/97776370/ http://selleckwaterfallsandwich.tumblr.com/jQuery Mobile: Progressive Enhancement with HTML5
    • How?! data-rolejQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • 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
    • jQuery Mobile pages page demojQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • jQuery Mobile pagespages demojQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • jQuery Mobile pagesdialog demojQuery Mobile: Progressive Enhancement with HTML5
    • $.mobile methods & propertiesAPI • $.mobile.pathconfiguration • $.mobile.base • $.mobile.silentScroll() • $.mobile.addResolutionBreakpoints() • $.mobile.activePage • $.mobile.pageLoading() • $.mobile.changePage() jQuery Mobile: Progressive Enhancement with HTML5
    • $.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
    • .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
    • itʼs our time, down here. real world$(50).find(“:jqmData(hideout=ʻfratelliʼ)”); jQuery Mobile: Progressive Enhancement with HTML5
    • this is so sandwich right now UI Widgetsbuttoncontrolgroupnavbartoolbarsform elementslist jQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • jQM button group layout: inline organization• data-inline true eep quack ow false [default] eep quack ow jQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • 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
    • 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 • ui-grid-[a to d] • ui-block-[a to d]• data-role=”navbar” jQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • 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=”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
    • demoform demo: jQM docshttp://jquerymobile.com/demos/1.0a4/#docs/forms/forms-all.html jQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • 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
    • 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 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
    • 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 WRAP-AROUND! • eg. ui-bar-aa jQuery Mobile: Progressive Enhancement with HTML5
    • themes beyond color swatches• valencia http://jquerymobile.com/test/themes/valencia/• ThemeRoller http://jqueryui.com/themeroller/ jQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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; 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
    • we bappweb-app demojQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • 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 for native access (limited)• PhoneGap Build (Beta invite) jQuery Mobile: Progressive Enhancement with HTML5
    • 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
    • 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
    • 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
    • jquery mobile thank you! todd anderson / todd@custardbelly.com@bustardcellyhttp://github.com/bustardcellyhttp://www.custardbelly.com/blog jQuery Mobile: Progressive Enhancement with HTML5