jquery mobile: progressive enhancement with html5

jQuery Mobile:Progressive Enhancement with HTML5

jQuery Mobileand Progressive Enhancement

jQuery Mobile: Progressive Enhancement with HTML5

jQuery Mobile

+JS

with

or really

but never

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.

Senior Software Engineer

[email protected]

@bustardcelly

100% Centaur

Author

Who?

kitchenphoto_3421.jpeg

http://twitter.com

http://infrared5.com

mailto:[email protected]




http://twitter.com

http://twitter.com

http://twitter.com

http://twitter.com


What?

• 1.0 Alpha 4.1• Built on jQuery + jQuery UI* (Widget)• Cross Platform• A-grade browser support

http://jquerymobile.com




jQM Graded Browser Support

http://jquerymobile.com/gbs/

http://twitter.com

http://twitter.com


How?

• Progressive Enhancement• HTML5 dataset attribute (data-)• CSS3 & Themes• Unobtrusive JavaScript





Progressive Enhancement: Content

http://www.flickr.com/photos/bamawester/97776370/

http://twitter.com

http://twitter.com



Progressive Enhancement: Content + Presentation

http://twitter.com

http://twitter.com



http://selleckwaterfallsandwich.tumblr.com/

Progressive Enhancement:Content + Presentation + Behavior

http://twitter.com

http://twitter.com

http://twitter.com

http://twitter.com


How?!

data-role


jQuery Mobile Pages

data-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 Pages

Page Anatomy<!DOCTYPE html><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>

required

optional


jQuery Mobile pages

page demo

[rel=”external”] : multiple internal pages


jQuery Mobile Pages

Internal vs. External

href : #anotherpage

Internal

multiple internal pages

href : anotherpage.html

External

[data-ajax=”true”] : 1 internal page

[data-ajax=”false”] : multiple internal pages


jQuery Mobile pages

pages demo


blah blah mist blah blah hungry blah

dialogMessages

i 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 pages

dialog demo


methods & properties$.mobile

API

configuration

• $.mobile.path• $.mobile.base• $.mobile.silentScroll()• $.mobile.addResolutionBreakpoints()• $.mobile.activePage• $.mobile.pageLoading()• $.mobile.changePage()


configuration

<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>

$.mobile

configuration

API • ns• defaultTransition• gradeA()• ajaxEnabled• more...

* custom namespace requires change to .ui-mobile in css


.jqmData()

data access

$(page).find(“div:jqmData(role=ʼcontentʼ)”);

$(elem).data( key );

jQuery

$(elem).jqmData( key );

jQuery Mobile

$(elem).data( key, value );

$(elem).jqmData( key, value );


itʼs our time, down here.

$(50).find(“:jqmData(hideout=ʻfratelliʼ)”);

real world


this is so sandwich right now

UI Widgets

button

controlgroup

navbar

toolbars

form elements

list

data-iconpos=”right”


buttons and such

data-role=”button”

data-iconpos

data-icon

rate

waddle

<a href=”#stop” data-role=”button”>no whammy!</a>

<button><button type=”submit” name=”submit” value=”submit-stop”>no whammy!</button>

swimdata-iconpos=”left” data-iconpos=”notext”

data-icon=”star”

false [default]


jQM button group layout: inline

organization• data-inline

true

eep

quack

ow

eep quack ow

• data-inline• data-role=”controlgroup”• data-type


jQM button group layout: controlgroup

organization

horizontalvertical [default]

home

favorites

settings

home favorites settings

• data-inline• data-role=”controlgroup”• data-type• data-role• ui-grid-[a to d]• ui-block-[a to d]

home favorites settings


jQM button group layout: ui-grid

organization


jQuery Mobile buttons!

button demo


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”

$(“div:jqmData(role=ʼnavbarʼ)”).bostonize();


jQM button navbah

data-role=”navbar”

cah mayah tonic

car mayor soda

<div data-role="navbar" data-grid="b"> <ul> <li><a href="#">home</a></li> <li><a href="#">settings</a></li> <li><a href="#">favorite</a></li> </ul></div>

• data-grid• column count • a(2) - d(5)


jQuery Mobile buttons!

navbar demo


lost password?

forms!


form markup and makeup

forms

<form id=”myform” action=”login.php” method=”post”>...

</form>

• declaration

• content<label for="name">Username:</label><input type="text" name="name" id="name" value="" />

$(“myform”).bind( “submit”, function( event ) {...

});

• event


demo

form demo: jQM docshttp://jquerymobile.com/demos/1.0a4/#docs/forms/forms-all.html

http://jquerymobile.com/demos/1.0a4/#

http://jquerymobile.com/demos/1.0a4/#


form elements

$(“input[type=’text’]”).textinput(“disable”);

var myselect = $("select#myselect");myselect[0].selectedIndex = 0;myselect.selectmenu("refresh");

$(“#myform”).find(“input”) .filter(“[type=’checkbox’], [type=’radio’]”) .attr(“checked”, false) .checkboxradio(“refresh”);

selectmenuvar myselect = $("select#myselect");myselect[0].selectedIndex = 0;myselect.selectmenu("refresh");

slider

$("input[type=range]").val(100).slider("refresh");

checkboxradio

textinput

form element widgetshttp://jquerymobile.com/demos/1.0a4/docs/forms/docs-forms.html

http://jquerymobile.com/demos/1.0a4/docs/forms/docs-forms.html

http://jquerymobile.com/demos/1.0a4/docs/forms/docs-forms.html


native data attributes

native*

* Must be declared on element prior to load of jQuery Mobile. Cannot be assigned and refreshed at runtime.

• provides no enhancement • data-role=”none”• data-native-menu=”true”


lists

data-role=”listview”


jQM item renderers

list item renderers

easy to create own custom list item renderers

no extra data-roles!

inspects the children declaration within a list item (<li>)

icon list item renderers, split button lists

look sorta like this by default


jQuery Mobile lists

lists demo


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


themes

beyond color swatches• valencia

http://jquerymobile.com/test/themes/valencia/

• ThemeRollerhttp://jqueryui.com/themeroller/



http://jqueryui.com/themeroller/

http://jqueryui.com/themeroller/


accessibility

WAI-ARIA

Introduction to WAI ARIAGez Lemon, August 1 2008

• Roles, States and Properties• Keyboard navigation with tabIndex• Live Regions for dynamic content

http://dev.opera.com/articles/view/introduction-to-wai-aria/

http://www.w3.org/WAI/intro/aria.php






accessibility

screen reader demo*

*shamelessly re-presented as seen in a Scott Jehl presentationhttp://dayofjs.com/videos/22152945/jquery-mobile_scott-jehl

http://dayofjs.com/videos/22152945/jquery-mobile_scott-jehl

http://dayofjs.com/videos/22152945/jquery-mobile_scott-jehl


cʼmon already!

enhancement load

file min-gzip

jquery.min.js 31KB

jquery.mobile.min.js 19KB

jquery.mobile.min.css 7KB

57KB


perception techniques

css<head> ... <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...


perception techniques

LabJS<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!

http://labjs.com/

http://labjs.com

http://labjs.com


outta the browser... sorta

web-app


home

home screen<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=false;"/>

• metadata

<meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" />

<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" />

• webclips & appearance

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/configuringwebapplications/configuringwebapplications.html

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

http://developer.apple.com/library/safari/#

http://developer.apple.com/library/safari/#


we bapp

web-app demo


jQM home applications

web-app considerations

• use AJAX on change page• else will launch the browser• include Back buttons in header• use window.navigator.standalone• cache.manifest

higgins!

http://diveintohtml5.org/offline.html




native deployment

native (easily)existing jQM application -> native install


native deployment - PhoneGap

PhoneGap

• project templates• JS API for native access (limited)• PhoneGap Build (Beta invite)

http://www.phonegap.com/

http://www.phonegap.com

http://www.phonegap.com


native deployment - Adobe AIR

Adobe AIR

• SDK compiler tools• StageWebView• JS <--> AS = iffy on device

Making the most of StageWebViewSean Voisen, October 29 2010http://voisen.org/blog/2010/10/making-the-most-of-stagewebview/

http://labs.adobe.com/technologies/flashplatformruntimes/

http://voisen.org/blog/2010/10/making-the-most-of-stagewebview/

http://voisen.org/blog/2010/10/making-the-most-of-stagewebview/




native deployment - others

native: othersNimbleKit

http://www.nimblekit.com/

QuickConnectFamily

http://quickconnectfamily.org/

Titanium*

http://www.appcelerator.com/

Rhodes**

http://rhomobile.com/products/rhodes/

* in theory, using Titanium.UIWEbView

** havenʼt tested

existing jQM application -> native install

http://www.nimblekit.com

http://www.nimblekit.com

http://quickconnectfamily.org

http://quickconnectfamily.org

http://www.appcelerator.com

http://www.appcelerator.com




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 / [email protected]

@bustardcellyhttp://github.com/bustardcellyhttp://www.custardbelly.com/blog



http://github.com/bustardcelly

http://github.com/bustardcelly

jquery mobile: progressive enhancement with html5

Technology