Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Development For The New Mobile Web
1. Development for the
New Mobile Web
New
As performed by Fred LeBlanc
Wednesday, March 10, 2010
2. Development for the
New Mobile Web
New
- or -
Attacking Smartphones with HTML-Judo Chops,
CSS-Roundhouse Kicks, JavaScript Death Grips & a
Boatload of Know-How
As performed by Fred LeBlanc
Wednesday, March 10, 2010
3. Great, And You Are…?
‣ In a word: Fred
‣ Graduated from NEIA in ’
With highest honors, baby!
‣ I’ve been doing this stuff for years
‣ I’ve worked as both a developer and a
project manager on (mobile) web projects
‣ Currently a Senior Developer @ Hill Holliday
Wednesday, March 10, 2010
4. Neat, What Else?
‣ I oversaw development of Motorola’s
Solutions Catalog — both desktop- and
mobile-versions
‣ I’ve consulted on several other (not yet
released) mobile web projects
‣ I build random web stuff all the time…
Wednesday, March 10, 2010
5. For Example
‣ iPhone and Android people in the audience:
visit AmINearFred.com
‣ I’m going to show you how to make this…
It’s easier than you’d think!
Wednesday, March 10, 2010
6. Before the fun stuff,
we have to go over a
couple of things.
Wednesday, March 10, 2010
7. Audience Questions!
‣ How many people have mobile phones?
‣ How many have mobile Internet access?
‣ How many have...
‣ An iPhone? ‣ A BlackBerry?
‣ An Android Phone? ‣ A Nokia?
‣ A Palm Pre or Pixi?
‣ What kind of things do you use your mobile
Internet access for?
Wednesday, March 10, 2010
8. Stop Me If You’ve
Heard This One…
“It’s just a smaller,
stripped down version of “We’ll just throw a
our website.” mobile stylesheet on it.
That’s good enough.”
“I thought the new
phones could view the “Why bother? We don’t
web just like on a want people looking at
desktop computer.” our site on their phones
anyway.”
Wednesday, March 10, 2010
9. You don’t use your
phone the same way
that you use your
desktop/laptop.
Wednesday, March 10, 2010
10. You don’t use your
phone the same way
that you use your
desktop/laptop.
(Not yet, anyways.)
Wednesday, March 10, 2010
11. Let’s Say You’re a Store...
How often do you perform each of the following shopping-related activities
on your smartphone while shopping and away from your computer?
Look up shipping on item I might buy online %
Look up store hours/address I want to visit %
Review a product description %
Look up product reviews %
Check status of online order %
Look for retailer/product coupons %
Check if in-store pickup is available %
Check if price is a good deal %
Purchase product after seeing it in-store %
Purchase product after not available in-store %
Purchase product without seeing it %
Check status of recently-submitted rebate %
, Smartphone owners asked
source: compete.com, from Q of
Wednesday, March 10, 2010
12. Let’s Say You’re a Store...
How often do you perform each of the following shopping-related activities
on your smartphone while shopping and away from your computer?
Look up shipping on item I might buy online %
Look up store hours/address I want to visit %
Review a product description %
Look up product reviews %
Check status of online order %
Look for retailer/product coupons %
Check if in-store pickup is available %
Check if price is a good deal %
Purchase product after seeing it in-store %
Purchase product after not available in-store %
Purchase product without seeing it %
Check status of recently-submitted rebate %
, Smartphone owners asked
source: compete.com, from Q of
Wednesday, March 10, 2010
13. A Tale of Two Cities & Their Mobile Presence
‣ I needed a chair mat,
Wednesday, March 10, 2010
15. A Tale of Two Cities & Their Mobile Presence
‣ I needed a chair mat, and I knew that Staples
was the closest office-supply store near me
‣ I was already in my car, our for a drive
‣ So I pulled out my iPhone and headed to
Staples.com
Wednesday, March 10, 2010
16. A Tale of Two Cities & Their Mobile Presence
?
staples.com
Wednesday, March 10, 2010
17. A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
18. A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
19. A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
20. A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
21. A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
22. A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
23. A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
24. A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
25. A Tale of Two Cities & Their Mobile Presence
?
staples.com
Wednesday, March 10, 2010
26. A Tale of Two Cities & Their Mobile Presence
officemax.com
Wednesday, March 10, 2010
27. A Tale of Two Cities & Their Mobile Presence
officemax.com
Wednesday, March 10, 2010
28. A Tale of Two Cities & Their Mobile Presence
officemax.com
Wednesday, March 10, 2010
29. A Tale of Two Cities & Their Mobile Presence
officemax.com
Wednesday, March 10, 2010
30. A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
31. A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
32. A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
33. A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
34. A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
35. A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
36. A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
37. Progressive
enhancement
is awesome.
Wednesday, March 10, 2010
38. “Progressive enhancement is a strategy for web
design that emphasizes accessibility, semantic
markup, and external stylesheet and scripting
technologies. Progressive enhancement uses
web technologies in a layered fashion that
allows everyone to access the basic content
and functionality of a web page, using any
browser or Internet connection, while also
providing those with better bandwidth or
more advanced browser software an enhanced
version of the page.”
— Wikipedia
Wednesday, March 10, 2010
39. PPK, iPhones & Putting
Things in Orifices…
‣ “The iPhone obsession,” posted February
‣ We don’t all have iPhones
‣ In fact, most of us don’t
‣ Aside from the swearing, he makes some
great points
‣ But there’s a lot of swearing in there
Wednesday, March 10, 2010
40. 2009 Smartphone Sales
Worldwide, numbers in millions.
Apple
Everyone Else
25
35
HTC
8
RIM Nokia
35 68
source: communities-dominate.blogs.com
Wednesday, March 10, 2010
41. Smartphone OS Stats
Again, Worldwide
Other iPhone
10% 15%
WinMo
6% Android
4%
BlackBerry
20%
Symbian
45%
source: communities-dominate.blogs.com
Wednesday, March 10, 2010
42. Just Like the Desktop Web…
‣ Remember IE ?
‣ CSS & progressive enhancement
‣ We build for everyone, but we give those on
new browsers the best experience
‣ Mobile is the same way…
Wednesday, March 10, 2010
43. …Only It’s Harder…
Desktop Browsers
Actively in use today.
‣ Internet Explorer , ,
‣ Firefox , , . , .
‣ Safari ,
‣ Chrome ,
‣ Opera . ,
Wednesday, March 10, 2010
44. …Only It’s Harder…
Desktop Browsers Mobile Browsers
Actively in use today. Actively in use on mobile devices today.
‣ Internet Explorer , , ‣ jB ‣ NetSailor
‣ Firefox , , . , . ‣ Polaris ‣ uZard Web
‣ Safari , ‣ Kindle ‣ Vision Mobile
‣ Chrome , ‣ Android ‣ Browser for S
‣ Opera . , ‣ webOS
‣ BlackBerry
‣ Blazer
‣ Firefox for Mobile
‣ IE Mobile
‣ Iris
‣ Myriad
‣ NetFront
‣ Nokia Series
‣ Obigo
‣ Opera Mobile
‣ PSP Web Browser
‣ Safari
‣ Skyfire Mobile
Wednesday, March 10, 2010
45. …Only It’s Harder…
Desktop Browsers Mobile Browsers
Actively in use today. Actively in use on mobile devices today.
‣ Internet Explorer , , ‣ jB ‣ NetSailor ‣ BOLT
‣ Firefox , , . , . ‣ Polaris ‣ uZard Web ‣ Deepfish
‣ Safari , ‣ Kindle ‣ Vision Mobile ‣ IbisBrowser
‣ Chrome , ‣ Android ‣ Browser for S ‣ JOCA
‣ Opera . , ‣ webOS ‣ Links
‣ BlackBerry ‣ Minimo
‣ Blazer ‣ Opera Mini
‣ Firefox for Mobile ‣ Pixo
‣ IE Mobile ‣ Skweezer
‣ Iris ‣ Steel
‣ Myriad ‣ Teashark
‣ NetFront ‣ ThunderHawk
‣ Nokia Series ‣ UCWEB
‣ Obigo ‣ WinWAP
‣ Opera Mobile
‣ PSP Web Browser
‣ Safari
‣ Skyfire Mobile
Wednesday, March 10, 2010
46. …And More Expensive
‣ For desktop browsers, I can get all of them on
one machine relatively cheaply
‣ You can get one or two mobile browsers per
mobile phone
‣ Contracts expensive, emulators unreliable
‣ Check out PerfectoMobile.com
‣ Do we focus on rendering engines?
Wednesday, March 10, 2010
47. Webkit, YAAAAY :)
‣ Used by Safari & Chrome on the desktop
‣ CSS , great JS rendering (on mobile too)
‣ In Mobile:
‣ Safari (iPhone) ‣ Myriad (next version)
‣ Android ‣ Nokia Series
‣ webOS (Palm) ‣ Web Browser for S
‣ Iris (BlackBerry)
‣ But...
Wednesday, March 10, 2010
48. There’s No “Webkit on Mobile”
‣ PPK compared different WebKit versions
(sans swearing this time)
‣ All were different from one another!
Wednesday, March 10, 2010
49. figure 2: Fred, angry about this
Wednesday, March 10, 2010
50. “There is No Mobile Webkit”
‣ PPK compared different WebKit versions
(sans swearing this time)
‣ All were different from one another!
‣ http://quirksmode.org/webkit.html
Wednesday, March 10, 2010
51. So What Can We Do?
‣ We do our best
‣ Use progressive enhancement
‣ Convince family & friends to each get
different mobile devices?
‣ Remember that your mobile site is a different
experience than your desktop site
‣ Keep informed, read blogs, try things out;
things are constantly evolving
Wednesday, March 10, 2010
52. Designers Need to Know Too
‣ “A finger is not a mouse pointer.”
— The Palm User Interface Guidelines
‣ Provide plenty of room around links for
“tapping”
‣ Reorganize the content so that what a mobile
user might be looking for is first
‣ Always provide a link to your full site from
your mobile site
Wednesday, March 10, 2010
54. The Other Side of the Fence
‣ Android & iPhone are growing in the US
‣ Developing an iPhone app & an Android app
independently are time-consuming and
expensive
‣ Both use WebKit (the differences are there,
but not impossible to work with)
‣ Both can do geolocation
‣ Let’s make an app!
Wednesday, March 10, 2010
55. Exploring AmINearFred.com
‣ Two parts: your side and my side
‣ My side finds my location and sets it to a file
‣ Your side finds your location and compares it
to my last known whereabouts
‣ Some quick math, and we display the
distance, a visual representation of that
distance & something quirky for the user
Wednesday, March 10, 2010
64. The Plan & Concept
1. Check to make sure user can be located
2. Watch their location until their GPS is
accurate enough for our liking
3. Once accurate enough, determine the
distance between us
4. Render the display
Wednesday, March 10, 2010
65. Will everyone
please put on their
geek hats?
Wednesday, March 10, 2010
66. Step 1: Can I Find You?
<script type="text/javascript">
if (navigator.geolocation) {
// let's get our location on!
} else {
// no idea what you're talkin' about
}
</script>
Wednesday, March 10, 2010
67. Step 1: Can I Find You?
<script type="text/javascript">
if (navigator.geolocation) {
// let's get our location on!
} else {
// no idea what you're talkin' about
alert("Uh, sorry. No dice.");
}
</script>
Wednesday, March 10, 2010
68. Step 2: Watch’em
<script type="text/javascript">
var watch;
if (navigator.geolocation) {
// let's get our location on!
watch = navigator.geolocation.watchPosition(checkIt);
} else {
// no idea what you're talkin' about
alert("Uh, sorry. No dice.");
}
</script>
Wednesday, March 10, 2010
69. Step 2: Watch’em
<script type="text/javascript">
var shortCircuit = false;
// called by the geolocation function
function checkIt(position) {
if (position.coords.accuracy < 500) {
navigator.geolocation.clearWatch(watch);
if (shortCircuit === false) {
$.ajax(); // make ajax call
}
shortCircuit = true;
}
}
</script>
Wednesday, March 10, 2010
70. position = {
coords: {
latitude: 42.3667,
longitude: -71.0596,
accuracy: 400,
altitude: null,
altitudeAccuracy: null,
heading: null,
speed: null
}
};
listing 1: what gets passed in as “position”
Wednesday, March 10, 2010
71. Step 2: Watch’em
<script type="text/javascript">
var shortCircuit = false;
// called by the geolocation function
function checkIt(position) {
if (position.coords.accuracy < 500) {
navigator.geolocation.clearWatch(watch);
if (shortCircuit === false) {
$.ajax(); // make ajax call
}
shortCircuit = true;
}
}
</script>
Wednesday, March 10, 2010
72. $.ajax({
url: 'coords.txt',
dataType: 'text',
success: function(data) {
var from, to, distance;
from = [position.coord.latitude, position.coords.longitude];
to = data.split(',');
to = [parseFloat(to[0]), parseFloat(to[1])];
dist = parseInt(distance(from, to), 10); // step 3!
showStuff(dist); // step 4!
},
error: function(data) {
alert(":(");
}
});
listing 2: some jQuery/ajax magic
Wednesday, March 10, 2010
73. $.ajax({
url: 'coords.txt',
dataType: 'text',
success: function(data) {
var from, to, distance;
from = [position.coord.latitude, position.coords.longitude];
to = data.split(',');
to = [parseFloat(to[0]), parseFloat(to[1])];
dist = parseInt(distance(from, to), 10); // step 3!
showStuff(dist); // step 4!
},
error: function(data) {
alert(":(");
}
});
listing 2: some jQuery/ajax magic
Wednesday, March 10, 2010
74. $.ajax({
url: 'coords.txt',
dataType: 'text',
success: function(data) {
var from, to, distance;
from = [position.coord.latitude, position.coords.longitude];
to = data.split(',');
to = [parseFloat(to[0]), parseFloat(to[1])];
dist = parseInt(distance(from, to), 10); // step 3!
showStuff(dist); // step 4!
},
error: function(data) {
alert(":(");
}
});
listing 2: some jQuery/ajax magic
Wednesday, March 10, 2010
75. Step 3: From Here to There
<script type="text/javascript">
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
function kmToMiles(km) {
return km * 0.621371192;
}
</script>
Wednesday, March 10, 2010
76. Step 3: From Here to There
<script type="text/javascript">
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
function kmToMiles(km) {
return km * 0.621371192;
}
</script>
Wednesday, March 10, 2010
77. Step 3: From Here to There
<script type="text/javascript">
function distance(from, to) {
var lat1 = from[0], lat2 = to[0];
var lon1 = from[1], lon2 = to[1];
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c; // in km :)
}
</script>
Wednesday, March 10, 2010
78. Step 3: From Here to There
<script type="text/javascript">
function distance(from, to) {
var lat1 = from[0], lat2 = to[0];
var lon1 = from[1], lon2 = to[1];
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c; // in km :)
}
</script>
Wednesday, March 10, 2010
79. It's OK.
Deep breaths.
Wednesday, March 10, 2010
81. Step 3: From Here to There
<script type="text/javascript">
// trust me, it calculates the distance between points
function distance(from, to) {
var lat1 = from[0], lat2 = to[0];
var lon1 = from[1], lon2 = to[1];
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c; // in km :)
}
</script>
Wednesday, March 10, 2010
82. $.ajax({
url: 'coords.txt',
dataType: 'text',
success: function(data) {
var from, to, distance;
from = [position.coord.latitude, position.coords.longitude];
to = data.split(',');
to = [parseFloat(to[0]), parseFloat(to[1])];
dist = parseInt(distance(from, to), 10); // step 3!
showStuff(dist); // step 4!
},
error: function(data) {
alert(":(");
}
});
listing 2 again: remember this? what a fantastic slide!
Wednesday, March 10, 2010
84. Step 4: Show’em!
// ...
for (var i=0; i < segments.length; i++) {
var thisSeg = segments[i];
if (thisSeg.upper > dist && this.Seg.lower <= dist) {
use = i;
break;
}
}
// you're now ready to display things! you know:
// - distance (in miles)
// - segment to use (with wordy description)
// - value of 'i' you ended up with
}
</script>
Wednesday, March 10, 2010
85. Stuff AmINearFred.com Does
// you're now ready to display things! you know:
// - distance (in miles)
// - segment to use (with wordy description)
// - value of 'i' you ended up with
‣ Rounds the distance to the nearest mile
‣ Shows a difference reference graphic
depending on what segment was picked
(they’re labeled .jpg, .jpg, .jpg, etc.)
‣ If distance is less than one mile, I tell you that
you’re “right next to me”
‣ Uses JavaScript animations :)
Wednesday, March 10, 2010
98. Going Even Further
‣ JQTouch — http://jqtouch.com
iPhone like interface with HTML & JavaScript
‣ webOS — http://palm.com
Apps are built in HTML & JavaScript
‣ PhoneGap — http://phonegap.com
Build native apps with HTML & JavaScript
for Android, iPhone & BlackBerry
‣ JavaScript Geolocation Code — http://
code.google.com/p/geo-location-javascript/
Wednesday, March 10, 2010
99. What We Learned Today
‣ Mobile development is hard & expensive, but
worth taking the time to do right
‣ Use progressive enhancement, because we
don’t all have iPhones
‣ Developing a web-based app is cheaper &
easier than making independent apps for
each phone
‣ You’re all right next to Fred
Wednesday, March 10, 2010