Date post: | 12-May-2015 |
Category: |
Technology |
Upload: | mikehostetler |
View: | 3,368 times |
Download: | 1 times |
@mikehostetler
Rapidly Develop Mobile Web Applications with
Wednesday, October 19, 11
@mikehostetler
Who am I?
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
http://learn.appendto.com
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
Many More ...
Wednesday, October 19, 11
@mikehostetler
The Mobile Frontier ...
Wednesday, October 19, 11
@mikehostetler
6.9 Billion People
Wednesday, October 19, 11
@mikehostetler
Mobile is available to 90%
Wednesday, October 19, 11
@mikehostetler
5.3 Billion+ Active Subscriptions
http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf
Wednesday, October 19, 11
@mikehostetler
7% of US Traffic comes from SmartPhones and
Tablets
http://www.comscore.com/Press_Events/Press_Releases/2011/10/Smartphones_and_Tablets_Drive_Nearly_7_Percent_of_Total_U.S._Digital_Traffic
Wednesday, October 19, 11
@mikehostetler
10+ billion by 2013
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
Know Better ... Do Better
?
Wednesday, October 19, 11
@mikehostetler
The is the webPeople expect it to work everywhere
Wednesday, October 19, 11
@mikehostetler
The Solution?
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
jQuery Philosophy ...
Wednesday, October 19, 11
@mikehostetler
Unified System
Universal Access
Easy Development
Wednesday, October 19, 11
@mikehostetler
One Codebase - Multiple Platforms
Wednesday, October 19, 11
@mikehostetler
Desktop Too!
Wednesday, October 19, 11
@mikehostetler
In <3 with Web Standards
Wednesday, October 19, 11
@mikehostetler
Built on jQuery Core ...
Wednesday, October 19, 11
@mikehostetler
Familiar API Style
It’s just jQuery!
$( document ).delegate( ".city", "click", function ( e ) { $( "#dialog" ).one( "pagehide", function () { $.mobile.changePage( 'cities.php' ); }).dialog( "close" ); });
Wednesday, October 19, 11
@mikehostetler
Small Filesize
Wednesday, October 19, 11
@mikehostetler
Mobile Browser Grades
Basic HTMLCBA
Enhanced experience without Ajax
Full experience with Ajax-based animated page transitions.
Wednesday, October 19, 11
@mikehostetler
Graded Browser Support
Wednesday, October 19, 11
@mikehostetler
Doesn’t Break the Web
Wednesday, October 19, 11
@mikehostetler
Unified Experience
Wednesday, October 19, 11
@mikehostetler
Accessible
Wednesday, October 19, 11
@mikehostetler
Normalizes Input Paradigms
Wednesday, October 19, 11
@mikehostetler
Compiles to Native
+ =
Wednesday, October 19, 11
@mikehostetler
The Con’s ...
Wednesday, October 19, 11
@mikehostetler
Perceived Performance
Wednesday, October 19, 11
@mikehostetler
Native Look & Feel
vs.
Wednesday, October 19, 11
@mikehostetler
Device API’s
Wednesday, October 19, 11
@mikehostetler
Offline Access
( )
Wednesday, October 19, 11
@mikehostetler
These are hard problems ...
Wednesday, October 19, 11
@mikehostetler
Choose the right tool ...
Wednesday, October 19, 11
@mikehostetler
Current Project Status
Wednesday, October 19, 11
@mikehostetler
Just released jQuery Mobile RC1
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
Wednesday, October 19, 11
@mikehostetler
More at http://jqmgallery.com
Wednesday, October 19, 11
@mikehostetler
Standard in Adobe CS5.5
Wednesday, October 19, 11
@mikehostetler
Shipping in Visual Studio Soon ...
Wednesday, October 19, 11
@mikehostetler
Lets dive in ...
Wednesday, October 19, 11
@mikehostetler
Download the code
http://jquerymobile.com/download https://github.com/jquery/jquery-mobile
or use a CDN ...
Wednesday, October 19, 11
@mikehostetler
Pages
Wednesday, October 19, 11
@mikehostetler
Your First Page!<!DocType HTML>
<html> <head> <meta charset=”utf-8”> <title>My first jQuery Mobile Page!</title> </head> <body> .... </body></html>
Wednesday, October 19, 11
@mikehostetler
Add the <script> tags ...<!DocType HTML><html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head> ....</html>
Wednesday, October 19, 11
@mikehostetler
Add the <script> tags ...<!DocType HTML><html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head> ....</html>
Wednesday, October 19, 11
@mikehostetler
Add the <script> tags ...<!DocType HTML><html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head> ....</html>
Wednesday, October 19, 11
@mikehostetler
Building your Page<body>
<div data-role=”page”>
<p>Hello World!</p>
</div>
</body>
Wednesday, October 19, 11
@mikehostetler
The role of data attributes ...<body>
<div data-role=”page”>
<p>Hello World!</p>
</div>
</body>
Wednesday, October 19, 11
@mikehostetler
Full Sample Page<body> <div data-role=”page”>
<div data-role=”header”> ... </div>
<div data-role=”content”> ... </div>
<div data-role=”footer”> ... </div>
</div></body>
Wednesday, October 19, 11
@mikehostetler
Lists
Wednesday, October 19, 11
@mikehostetler
Basic List<div data-role=”content”>
<h2>Hello World!</h2> <ul> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul>
</div>
Wednesday, October 19, 11
@mikehostetler
Add the List View Role<div data-role=”content”>
<h2>Hello World!</h2> <ul data-role="listview"> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul>
</div>
Wednesday, October 19, 11
@mikehostetler
Inset Style<div data-role=”content”>
<h2>Hello World!</h2> <ul data-role="listview" data-inset="true" > <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul>
</div>
Wednesday, October 19, 11
@mikehostetler
Add Links <ul data-role="listview" data-inset="true"> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul>
Wednesday, October 19, 11
@mikehostetler
More Examples ...
Wednesday, October 19, 11
@mikehostetler
Ordered Lists<div data-role=”content”>
<h2>Hello World!</h2> <ol data-role="listview"> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ol>
</div>
Wednesday, October 19, 11
@mikehostetler
Nested Lists = Drillable Pages
Wednesday, October 19, 11
@mikehostetler
Count Bubbles
<ul data-role="listview">
<li><a href=”http://jquery.com”> jQuery <span class="ui-li-count">1.6.4</span> </a></li>
...</ul>
Wednesday, October 19, 11
@mikehostetler
List Dividers<ul data-role="listview">
<li data-role="list-divider">Core</li> <li>jQuery</li>
<li data-role="list-divider">UI</li> <li>jQuery UI</li> <li>jQuery Mobile</li>
<li data-role="list-divider">Testing</li> <li>QUnit</li></ul>
Wednesday, October 19, 11
@mikehostetler
Filter Bar<div data-role=”content”>
<h2>Hello World!</h2> <ul data-role="listview" data-filter="true"> .... </ul>
</div>
Wednesday, October 19, 11
@mikehostetler
Adding List Items
Wednesday, October 19, 11
@mikehostetler
Append, then Refresh!$(‘ul#jquery’).
.append(
‘<li><a href=”http://sizzlejs.com”>Sizzle JS</a></li>’
).listview( ‘refresh’ );
Wednesday, October 19, 11
@mikehostetler
Theming
Wednesday, October 19, 11
@mikehostetler
Basic Theming<div data-role=”page” data-theme=”a”>
<div data-role=”content”> .... </div>
</div>
Wednesday, October 19, 11
@mikehostetler
Side by Side
Wednesday, October 19, 11
@mikehostetler
ThemeRoller
Wednesday, October 19, 11
@mikehostetler
Links & Navigation
Wednesday, October 19, 11
@mikehostetler
External Links <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul>
Wednesday, October 19, 11
@mikehostetler
Internal + Hijax + DOM Injection <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”jquery.html”> jQuery </a> </li> ... </ul>
Click!
Wednesday, October 19, 11
@mikehostetler
Internal + Hijax + DOM Injection
/index.html /jquery.html
Wednesday, October 19, 11
@mikehostetler
Internal + Hijax + DOM Injection
/jquery.html/index.html
Wednesday, October 19, 11
@mikehostetler
Internal + Hijax + DOM Injection
/jquery.html/index.html
Wednesday, October 19, 11
@mikehostetler
Transitions
Wednesday, October 19, 11
@mikehostetler
External Links <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”http://jquery.com” data-transition="pop"> jQuery a’ Poppin </a> </li> ... </ul>
Wednesday, October 19, 11
@mikehostetler
Multi-Page & Pre-Fetch
Wednesday, October 19, 11
@mikehostetler
Multiple Pages, One DOM<body>
<div data-role=”page” id=”page1”> <p>Hello World!</p> </div>
<div data-role=”page” id=”page2”> <p>Hello World!</p> </div>
</body>
Wednesday, October 19, 11
@mikehostetler
Pre-Fetching<body>
<div data-role=”page” id=”page1”> <p>Hello World!</p> <a href="prefetchMe.html" data-prefetch> ... </a> </div>
<div data-role=”page” id=”page2”> <p>Hello World!</p> </div>
</body>
Wednesday, October 19, 11
@mikehostetler
Forms
Wednesday, October 19, 11
@mikehostetler
Basic Form with Labels<div data-role="content">
<form action="#" method="get"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </form>
</div>
Wednesday, October 19, 11
@mikehostetler
Containers<div data-role="content"> <form action="#" method="get">
<div data-role="fieldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div>
</form></div>
Wednesday, October 19, 11
@mikehostetler
Optimized for Width Changes
Wednesday, October 19, 11
@mikehostetler
Progressive Enhancement
Wednesday, October 19, 11
@mikehostetler
Text Input<div data-role="content"> <form action="#" method="get">
<div data-role="fieldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div>
</form></div>
Wednesday, October 19, 11
@mikehostetler
Text Input Helpers
”password” ”email” ”tel”
Wednesday, October 19, 11
@mikehostetler
Text Area’s Grow
Wednesday, October 19, 11
@mikehostetler
Flip Switch<form action="#" method="get"> <div data-role="fieldcontain"> <label for="slide">Flip switch:</label> <select name="slide" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div> </form></div>
Wednesday, October 19, 11
@mikehostetler
Radio Buttons<form action="#" method="get"> <div data-role="fieldcontain"> <input type="radio" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form></div>
Wednesday, October 19, 11
@mikehostetler
Checkboxes Too<form action="#" method="get"> <div data-role="fieldcontain"> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form></div>
Wednesday, October 19, 11
@mikehostetler
Horizontal Set<form action="#" method="get"> <div data-role="fieldcontain" data-type=”horizontal”> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form></div>
Wednesday, October 19, 11
@mikehostetler
Select Lists<form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form></div>
Wednesday, October 19, 11
@mikehostetler
Select Lists<form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form></div>
Wednesday, October 19, 11
@mikehostetler
Select Lists - Non-Native<form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1" data-native-menu="false"> <option value="std">Standard: 7 day </option> ... </select> </div> </form>
Wednesday, October 19, 11
@mikehostetler
Extra’s
Wednesday, October 19, 11
@mikehostetler
Dialog’s<div data-role="content">
<a href="foo.html" data-rel="dialog">Open dialog</a>
</div>
Wednesday, October 19, 11
@mikehostetler
Button’s<div data-role="content">
<a href="#" data-role="button"> Link Button</a>
<a href="#" data-role="button" data-icon="star">Star Icon!</a>
</div>
Wednesday, October 19, 11
@mikehostetler
Toolbar’s<div data-role="page">
<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check">Save</a> </div>
</div>
Wednesday, October 19, 11
@mikehostetler
Navbar’s<div data-role="page"> .... <div data-role="footer">
<div data-role="navbar"> <ul> <li>Summary</li> ... </ul> </div> </div></div>
Wednesday, October 19, 11
@mikehostetler
Fixed Positioning<div data-role="page">
<div data-role="header" data-position="fixed"> <h1>Fixed toolbars</h1> </div>
</div>
Wednesday, October 19, 11
@mikehostetler
Persistent Footer Bar<div data-role="footer">
<div data-role="navbar" class="ui-state-persist"> <p><a href=”#”>Friends</a></p> </div></div>
Wednesday, October 19, 11
@mikehostetler
Events
Wednesday, October 19, 11
@mikehostetler
New Events
‣ tap, taphold
‣ swipe, swipeleft, swiperight
‣ scrollstart, scrollstop
‣orientationchange
‣ Page Load: pageloadbefore, pageload, pageloadfailed
‣ Page Change: pagechangebefore, pagechange, pagechangefailed
‣Many More!
Wednesday, October 19, 11
@mikehostetler
Virtual Mouse Events
‣ vmouseover
‣ vmousedown
‣ vmousemove
‣ vmouseup
‣ vmouseclick - WARNING!
‣ vmousecancel
Wednesday, October 19, 11
@mikehostetler
API Methods
Wednesday, October 19, 11
@mikehostetler
Changing Pages// Mimic’s a ‘tap’ or ‘click’$.mobile.changePage( ‘about/us.html’ OR $(‘#about’), { /* options */ }); // Fetches external URL, inserts it into the DOM$.mobile.loadPage( ‘about/us.html’, { /* options */ });
Wednesday, October 19, 11
@mikehostetler
Loading Message$.mobile.showLoadingMessage()
$.mobile.hideLoadingMessage()
Wednesday, October 19, 11
@mikehostetler
The Data Question ...
Wednesday, October 19, 11
@mikehostetler
Those data- attributes ...Don’t use:
$.data
Use:
jqmData() andjqmRemoveData()
Wednesday, October 19, 11
@mikehostetler
URL’s & Paths
Wednesday, October 19, 11
@mikehostetler
URL’s & Paths$.mobile.path
URL: http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content
obj = { domain: ‘http://jblas:[email protected]:8080’, host: ‘mycompany.com:8080’, pathname: ’/mail/inbox’, directory: ‘/mail/’}
Wednesday, October 19, 11
@mikehostetler
http://filamentgroup.com
Thanks to the Filament Group!
Wednesday, October 19, 11
@mikehostetler
Thanks to the jQuery Mobile Team!
Wednesday, October 19, 11
@mikehostetler
Thanks to the Sponsors!
Wednesday, October 19, 11
@mikehostetler
Thank You!@mikehostetler
http://mike-hostetler.comhttp://learn.appendto.com
Links: http://bitly.com/neWK0vRate: http://j.mp/nQgs8V
Wednesday, October 19, 11