More Related Content
Similar to HTML5 and the dawn of rich mobile web applications pt 2
Similar to HTML5 and the dawn of rich mobile web applications pt 2 (20)
More from James Pearce (19)
HTML5 and the dawn of rich mobile web applications pt 2
- 1. HTML5 and the dawn of rich
mobile web applications
@ jamespearce
- 6. “A unified user interface
system that works seamlessly
across all popular mobile
device platforms”
- 7. Key features
Built on jQuery
Modular library
Markup-driven configuration
Progressive enhancement
- 9. <!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>
- 11. 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>
...
- 12. 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>
...
- 13. 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>
...
- 14. 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>
...
- 15. Transitions
...
<body>
<div data-role="page" id="home">
<a href="#products" data-transition="fade">Products</a>
</div>
<!--
slide, slideup, slidedown, pop, fade, flip
-->
</body>
...
- 16. Dialogs
...
<body>
<div data-role="page" id="home">
<a href="#products" data-rel="dialog">Products</a>
</div>
</body>
...
- 17. Themes
...
<body>
<div data-role="page" id="home" data-theme="b">
...
</div>
</body>
...
- 19. 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>
- 23. 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>
- 26. 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>
- 41. <!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>
- 42. 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!'
});
}
});
- 44. Lists
var
list
=
new
Ext.List({
store:
store,
itemTpl:
'{firstName}
{lastName}',
grouped:
true,
indexBar:
true
});
- 45. Nested Lists
var
list
=
new
Ext.NestedList({
store:
store,
displayField:
'name',
title:
'My
List',
updateTitleText:
true,
getDetailCard:
function(record,
parent)
{..}
});
- 47. Sheets
var
sheet
=
new
Ext.ActionSheet({
items:
[
{
text:
'Delete
draft',
ui:
'decline'
},
{
text:
'Save
draft'
},
{
text:
'Cancel',
}
]
});
sheet.show();
- 48. Common patterns
1
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]
});
- 49. Common patterns
2
var
panel
=
new
Ext.Panel({
fullscreen:
true,
layout:
'fit',
items:
[{
xtype:
'list',
store:
store,
itemTpl:
'{firstName}
{lastName}',
grouped:
true,
indexBar:
true
}]
});
- 55. Hybrid apps
UIWebView WebView
HTML
CSS Stores
JS
Device APIs
- 64. $>
phantomjs
confess.js
http://mysite.com/
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.js
app/yelp.js
http://cdn.sencha.io/touch/1.1.0/sencha-‐touch.js
http://maps.google.com/maps/api/js?sensor=true
http://maps.gstatic.com/intl/en_us/mapfiles/api-‐3/6/4/main.js
theming/app.css
NETWORK:
*
http://github.com/jamesgpearce/confess
