HTML5 and the dawn of rich mobile web applications pt 2
-
Upload
james-pearce -
Category
Technology
-
view
4.557 -
download
5
description
Transcript of HTML5 and the dawn of rich mobile web applications pt 2
![Page 1: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/1.jpg)
HTML5 and the dawn of rich mobile web applications
@ jamespearce
![Page 2: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/2.jpg)
Part II
jQuery MobileSencha Touch
![Page 3: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/3.jpg)
![Page 4: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/4.jpg)
jQuery Mobile
![Page 5: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/5.jpg)
http://jquerymobile.com/
![Page 6: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/6.jpg)
“A unified user interface system that works seamlessly
across all popular mobile device platforms”
![Page 7: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/7.jpg)
Key features
Built on jQueryModular library
Markup-driven configurationProgressive enhancement
![Page 8: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/8.jpg)
![Page 9: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/9.jpg)
<!DOCTYPE html><html> <head> <title>jQuery Mobile</title> <script src="jq.js"></script><script src="jqm.js"></script> <link rel="stylesheet" href="jqm.css" /> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Hello World</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Continents</li> <li><a href="na.html">North America</a></li> <li><a href="sa.html">South America</a></li> <li><a href="eu.html">Europe</a></li> </ul> </div> </div> </body></html>
![Page 10: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/10.jpg)
![Page 11: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/11.jpg)
Page...<body>
<div data-role="page" id="home">
<div data-role="header"> ... </div>
<div data-role="content"> ... </div>
<div data-role="footer"> ... </div>
</div>
</body>...
![Page 12: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/12.jpg)
Multiple Pages
...<body>
<div data-role="page" id="home"> <a href="#products">Products</a> </div>
<div data-role="page" id="products"> ... </div>
<div data-role="page" id="about"> ... </div>
</body>...
![Page 13: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/13.jpg)
Disable AJAX
...<body>
<div data-role="page" id="home">
<a href="#products" data-ajax="false">Products</a>
<a href="http://google.com" rel="external">Google</a>
</div>
<div data-role="page" id="products"> ... </div>
</body>...
![Page 14: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/14.jpg)
Back buttons
...<body>
<div data-role="page" id="home">
<a href="#products">Products</a>
</div>
<div data-role="page" id="products">
<a href="#home" data-rel="back">Home</a>
</div>
</body>...
![Page 15: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/15.jpg)
Transitions
...<body>
<div data-role="page" id="home">
<a href="#products" data-transition="fade">Products</a>
</div>
<!-- slide, slideup, slidedown, pop, fade, flip -->
</body>...
![Page 16: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/16.jpg)
Dialogs
...<body>
<div data-role="page" id="home">
<a href="#products" data-rel="dialog">Products</a>
</div>
</body>...
![Page 17: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/17.jpg)
Themes...<body>
<div data-role="page" id="home" data-theme="b"> ... </div>
</body>...
![Page 18: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/18.jpg)
Toolbars
<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>
![Page 19: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/19.jpg)
Footer
<div data-role="footer" class="ui-bar">
<a href="delete.html" data-icon="delete" >Remove</a> <a href="add.html" data-icon="plus" >Add</a> <a href="up.html" data-icon="arrow-u">Up</a> <a href="down.html" data-icon="arrow-d">Down</a>
</div>
![Page 20: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/20.jpg)
Fixed footer
<div data-role="footer" data-position="fixed"> ...</div>
![Page 21: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/21.jpg)
Buttons
<a href="index.html" data-role="button">Link button</a>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
![Page 22: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/22.jpg)
Grouped buttons
<div data-role="controlgroup"> <a href="yes.html" data-role="button">Yes</a> <a href="no.html" data-role="button">No</a> <a href="maybe.html" data-role="button">Maybe</a></div>
![Page 23: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/23.jpg)
Grouped buttons 2
<div data-role="controlgroup" data-type="horizontal"> <a href="yes.html" data-role="button">Yes</a> <a href="no.html" data-role="button">No</a> <a href="maybe.html" data-role="button">Maybe</a></div>
![Page 24: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/24.jpg)
Icons
![Page 25: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/25.jpg)
Forms
![Page 26: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/26.jpg)
Lists
<ul data-role="listview">! <li><a href="acura.html">Acura</a></li>! <li><a href="audi.html">Audi</a></li>! <li><a href="bmw.html">BMW</a></li> ...</ul>
![Page 27: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/27.jpg)
jQuery Mobile Demo
![Page 28: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/28.jpg)
Sencha Touch
![Page 29: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/29.jpg)
A JavaScript frameworkfor building
rich mobile appswith web standards
![Page 30: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/30.jpg)
http://sencha.com/touch
![Page 31: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/31.jpg)
Components
![Page 32: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/32.jpg)
Data access & MVC
![Page 33: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/33.jpg)
Forms
![Page 34: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/34.jpg)
Scrolling
![Page 35: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/35.jpg)
Touch Events
![Page 36: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/36.jpg)
Theming
![Page 37: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/37.jpg)
Charts
![Page 38: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/38.jpg)
Kitchen Sink
http://sencha.com/x/5e
![Page 39: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/39.jpg)
![Page 40: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/40.jpg)
![Page 41: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/41.jpg)
<!DOCTYPE html><html> <head> <title>Hello World</title>
<script src="lib/touch/sencha-‐touch.js"></script> <script src="app/app.js"></script> <link href="lib/touch/resources/css/sencha-‐touch.css" rel="stylesheet" type="text/css" /> </head> <body></body></html>
![Page 42: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/42.jpg)
new Ext.Application({
launch: function() {
new Ext.Panel({ fullscreen: true, dockedItems: [{xtype:'toolbar', title:'My First App'}], layout: 'fit', styleHtmlContent: true, html: '<h2>Hello World!</h2>I did it!' });
}
});
![Page 43: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/43.jpg)
![Page 44: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/44.jpg)
Lists
var list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true});
![Page 45: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/45.jpg)
Nested Lists
var list = new Ext.NestedList({ store: store, displayField: 'name', title: 'My List', updateTitleText: true, getDetailCard: function(record, parent) {..}});
![Page 46: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/46.jpg)
Carousels
var carousel = new Ext.Carousel({ direction: 'horizontal', indicator: true, items: [ .. ]});
![Page 47: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/47.jpg)
Sheets
var sheet = new Ext.ActionSheet({ items: [ { text: 'Delete draft', ui: 'decline' }, { text: 'Save draft' }, { text: 'Cancel', } ]});
sheet.show();
![Page 48: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/48.jpg)
Common patterns1
var list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true});
var panel = new Ext.Panel({ fullscreen: true, layout: 'fit', items: [list]});
![Page 49: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/49.jpg)
Common patterns2
var panel = new Ext.Panel({ fullscreen: true, layout: 'fit', items: [{ xtype: 'list', store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true }]});
![Page 50: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/50.jpg)
Sencha Touch Demo
![Page 51: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/51.jpg)
Closing thoughts
![Page 52: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/52.jpg)
Embrace hybrid
![Page 53: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/53.jpg)
Nativeness
Com
prom
ise
Nativeapps
Websites
Webapps
Hybridapps
![Page 54: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/54.jpg)
Embrace the device
![Page 55: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/55.jpg)
Hybrid apps
UIWebView WebView
HTMLCSS
JSStores
Device APIs
![Page 56: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/56.jpg)
e.g. PhoneGap
FileGeolocationMediaNetworkNotificationStorage
AccelerometerCameraCompassContactsDeviceEvents
![Page 57: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/57.jpg)
e.g. NimbleKit
![Page 58: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/58.jpg)
http://sencha.com/x/cy http://sencha.com/x/de
![Page 59: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/59.jpg)
Embrace the tools
![Page 60: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/60.jpg)
http://phonegap.github.com/weinre
![Page 61: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/61.jpg)
Embrace responsiveness
![Page 62: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/62.jpg)
http://sencha.com/x/cv
![Page 63: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/63.jpg)
Embrace o!ine
![Page 64: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/64.jpg)
CACHE MANIFEST
# This manifest was created by confess.js# Time: Wed Sep 14 2011 10:14:45 GMT-‐0700 (PDT)# User-‐agent: Mozilla/5.0 ...
CACHE:app/app.jsapp/yelp.jshttp://cdn.sencha.io/touch/1.1.0/sencha-‐touch.jshttp://maps.google.com/maps/api/js?sensor=truehttp://maps.gstatic.com/intl/en_us/mapfiles/api-‐3/6/4/main.jstheming/app.css
NETWORK:*
http://github.com/jamesgpearce/confess
$> phantomjs confess.js http://mysite.com/
![Page 65: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/65.jpg)
Embrace mobile
![Page 66: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/66.jpg)
Apps vs web technologybuilt with
![Page 67: HTML5 and the dawn of rich mobile web applications pt 2](https://reader031.fdocuments.in/reader031/viewer/2022020217/553bb1e64a795951348b46f4/html5/thumbnails/67.jpg)
James Pearce @ jamespearce