Are the smartphone wars wearing your out? When asked to choose between Objective-C and Java do you answer “None of the Above”? Do you think app stores are so 1995? Then there is good news for you and it’s called the mobile web. This isn’t about trying to port iFart to the browser, and it’s definitely not about tweaking an existing website so it doesn’t look awful on your mom’s iPhone. It is about writing full featured, engaging applications on the web. This talk is all about how to create killer web apps using HTML5, CSS3, as well as some other not-so-standard technologies available on a wide variety of popular smartphones. We’re talking about multi-threaded, high performance apps that can track your movement or even take pictures of whatever you think is interesting.

1. MOBILE WEB
5.0
Michael Galpin, eBay

2. WHO AM I?
Michael Galpin
Mobile Architect, eBay
Android & Mobile Web
Author, Android in Practice
@michaelg

3. WHY?

4. Mobile is the new HOTness

5. MO BILE
W E B
THE IPHONE MYTH

6. MO BILE 2 BIRDS, 1
STONE?
W E B

7. MO BILE
ONE WEBKIT TO
W E B
RULE THEM
ALL?

8. MO BILE
ONE WEBKIT TO
W E B
RULE THEM
ALL?
Android 2.2.1 iOS 4.1

9. MOBILE
PARTY LIKE IT’S
W E B
2022

10. WHAT?

11. WHAT ABOUT?

12. OMG! VIDEO TAG!!!

13. HTML

14. JavaScript
HTML
CSS 3.0

15. MO BILE
JUST ADD
W E B
VIEWPORT?

16. HOW?

17. MO BILE
W E B GEOLOCATION
geocoder = new google.maps.Geocoder();
if (navigator.geolocation){
var gps = navigator.geolocation;
gps.getCurrentPosition(function(pos){
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
var opts = {zoom:12, center:latLng, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map($("map_canvas"), opts);
theUser = new google.maps.Marker({
position: latLng,
map: map,
title: "You!"
});
});
trackerId = gps.watchPosition(function(pos){
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
map.setCenter(latLng);
theUser.setPosition(latLng);
});
}

18. MO BILE
W E B GEOLOCATION
OS/Browser Status/Version
3.0
2.0
6.0
X
X

19. MO BILE
W E B DOM STORAGE
if (window.localStorage){
localStorage.setItem("tweet" + tweet.id, JSON.stringify(tweet));
var index = localStorage.getItem("index::" + keyword);
if (index){
index = JSON.parse(index);
} else {
index = [];
}
index.push(tweet.id);
localStorage.setItem("index::"+keyword, JSON.stringify(index));
}

20. MO BILE
W E B DOM STORAGE
if (window.localStorage){
localStorage.setItem("tweet" + tweet.id, JSON.stringify(tweet));
var index = localStorage.getItem("index::" + keyword);
if (index){
index = JSON.parse(index);
} else {
index = [];
}
index.push(tweet.id);
localStorage.setItem("index::"+keyword, JSON.stringify(index));
}

21. MO BILE
W E B DOM STORAGE
OS/Browser Status/Version
3.0
2.0
6.0
7.0
X

22. MO BILE
W E B WEB WORKERS
var worker = new Worker("details.js");
worker.onmessage = function(message){
var responseXmlStr = message.data.responseXml;
var itemDetails = parseFromXml(responseXmlStr);
if (window.localStorage){
localStorage.setItem(itemDetails.id, responseXmlStr);
}
dealDetails[itemDetails.id] = itemDetails;
};
worker.postMessage(item.itemId);
onmessage = function(message){
var itemId = message.data;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
postMessage({responseXml: this.responseText});
}
};
var urlStr = generateUrl(itemId);
xhr.open("GET", "proxy?url=" + escape(urlStr));
xhr.send(null);
}

23. MO BILE
W E B WEB WORKERS
OS/Browser Status/Version
X
2.0
6.0
X
X

24. MO BILE
W E B WEBSOCKET
if (window.WebSocket){
var conn = new WebSocket("ws://my.server.com/socket");
conn.onopen = function(){
setStatusMessage('connecting...');
conn.send('connect');
};
conn.onmessage = function(msg){
setStatusMessage('connected');
updateItemStatus(JSON.parse(msg.data));
};
a
at
conn.onerror = function(err){
D
showError(err);
conn.close();
};
conn.onclose = function(evt){
setStatusMessage('connection closed');
};
}

25. MO BILE
W E B WEBSOCKET
OS/Browser Status/Version
4.2b
X
X
X
X

26. MOBILE
W E B CANVAS
var ctx = $("graph").getContext("2d");
ctx.font = "bold 12px sans-serif";
ctx.textAlign = "start";
for (i=0;i<data.length;i++){
ctx.fillStyle = "rgba(0, 0, 200, 0.9)";
ctx.fillRect(x, maxHeight - (data[i][report.y] / 2), width,
(data[i][report.y] / 2));
ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
ctx.fillText(data[i][report.x], x + (width / 4),
maxHeight + 15);
x += width + buffer;
}
ctx.moveTo(axisBuffer, maxHeight);
ctx.lineTo(axisBuffer+maxWidth, maxHeight);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.moveTo(axisBuffer,0);
ctx.lineTo(axisBuffer,maxHeight);
ctx.stroke();

27. MO BILE
W E B CANVAS
OS/Browser Status/Version
1.0
1.0
6.0
X
v2

28. MOBILE
W E B CSS 3.0
$("formSection").style["-webkit-transform"] = "rotateZ(-5deg)";
$("formSection").style["-webkit-transition"] =
"-webkit-transform 2s ease-in-out";
$("rtBtn").innerHTML = "Undo";
$("rtBtn").onclick = function() {
$("formSection").style["-webkit-transform"] = "";
$("rtBtn").innerHTML = "Rotate";
$("rtBtn").setAttribute("onclick", "rotate()");
}

29. MORE CSS 3.0
.abc {
tr:nth-child(4n+1) { color: navy; } border: 1px solid #000;
tr:nth-child(4n+2) { color: green; } border-radius: 9px;
tr:nth-child(4n+3) { color: maroon; } -webkit-column-count:4;
tr:nth-child(4n+4) { color: purple; } -webkit-column-rule: 1px solid #a00;
header > h1{ -webkit-column-gap: 0.75em;
color: yellow; }
background: -webkit-gradient(linear, left top, h2 {
left bottom, from(blue), to(white)) -webkit-text-fill-color: blue;
} -webkit-text-stroke-color: yellow;
.xyz{ -webkit-text-stroke-width: 1.5px;
text-shadow: #6374AB 4px -4px 2px; background: -webkit-gradient(radial, 430 50, 0,
overflow: hidden; 430 50, 200, from(red), to(#000));
text-overflow: ellipsis; -webkit-box-reflect:below 5px -webkit-gradient(
border: 1px solid #bbb; linear, left top, left bottom,
border-radius: 9px; from(transparent),
background-color: #fff; color-stop(0.5, transparent), to(white));
} }

30. MO BILE
W E B CSS 3.0
OS/Browser Status/Version
3.0
2.0
X
X
X

31. MO BILE
APPLICATION
W E B
CACHE <!DOCTYPE html>
<html manifest="manifest.mf">
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
CACHE MANIFEST
# Version 0.2
CACHE:
offline.html
json2.js
/images/gym.jpg
/images/soccer.jpg
/images/online.jpg
NETWORK:
http://search.twitter.com/

32. MO BILE
W E B APPLICATION
OS/Browser Status/Version
2.0
2.0
6.0
X
X

33. DEVICE
MOBILE
W E B
if (navigator.device.captureImage){
device.captureImage(function(data){
var file = data[0];
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
updateStatusBar(percentage);
}
}, false);
xhr.open("POST", "http://my.server.com/upload");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.sendAsBinary(file.getAsBinary());
});
}

34. MO BILE
W E B DEVICE
OS/Browser Status/Version
X
3.0
X
X
X

35. MO BILE
W E B TOUCH EVENTS
logo.ontouchmove = function(event){
if (event.touches.length == 1){
event.preventDefault();
var touch = event.touches[0];
var node = touch.target;
node.style.position = "absolute";
node.style.left = touch.pageX + "px";
node.style.top = touch.pageY + "px";
}
}
var angle = 0;
logo.ongesturechange = function(event){
var node = event.target;
node.style.webkitTransform = "rotate("+
((angle + event.rotation) % 360)+"deg)";
}
logo.ongestureend = function(event){
angle = (angle + event.rotation) % 360;
}

36. MO BILE
W E B TOUCH EVENTS
OS/Browser Status/Version
2.0
1.0
6.0?
X
X

37. MO BILE
W E B AUDIO/VIDEO
<video controls="controls" preload="true"
width="720" height="640">
<source src="feature.ogg" type="video/ogg" />
<source src="feature.mp4" type="video/mp4" />
Your browser sucks
</video>

38. MO BILE
W E B AUDIO/VIDEO
OS/Browser Status/Version
1.0
2.0
X
X
X

39. MO BILE
W E B META
<meta name="viewport" content="width=device-width; user-
scalable=no;"/>
<meta name="apple-touch-fullscreen" content="YES" />
<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="rice-and-bones.png"/>

40. NO REALLY,
HOW?

41. MOBILE
BEST
W E B
PRACTICES
• Servers are for data
• Orientation matters
• Cache, cache, cache
• Frameworks (not really mobile): SproutCore, Cappuccino
• Frameworks (mobile): Sencha, jQTouch