Web Design and Development, Mobile Application Development Company| Evincedev Development
Development For The New Mobile Web
-
Upload
harvard-web-working-group -
Category
Design
-
view
5.071 -
download
0
description
Transcript of Development For The New Mobile Web
![Page 1: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/1.jpg)
Development for the New Mobile WebNew
As performed by Fred LeBlanc
Wednesday, March 10, 2010
![Page 2: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/2.jpg)
Development for the New Mobile Web
Attacking Smartphones with HTML-Judo Chops, CSS-Roundhouse Kicks, JavaScript Death Grips & a
Boatload of Know-How
New- or -
As performed by Fred LeBlanc
Wednesday, March 10, 2010
![Page 3: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/3.jpg)
Great, And You Are…?
‣ In a word: Fred
‣ Graduated from NEIA in ’04 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
![Page 4: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/4.jpg)
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
![Page 5: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/5.jpg)
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
![Page 6: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/6.jpg)
Before the fun stuff, we have to go over a
couple of things.
Wednesday, March 10, 2010
![Page 7: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/7.jpg)
Audience Questions!
‣ How many people have mobile phones?
‣ How many have mobile Internet access?
‣ How many have...
‣ What kind of things do you use your mobile Internet access for?
‣ An iPhone?‣ An Android Phone?‣ A Palm Pre or Pixi?
‣ A BlackBerry?‣ A Nokia?
Wednesday, March 10, 2010
![Page 8: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/8.jpg)
Stop Me If You’ve Heard This One…
“It’s just a smaller, stripped down version of
our website.”“We’ll just throw a
mobile stylesheet on it.That’s good enough.”
“I thought the new phones could view the
web just like on a desktop computer.”
“Why bother? We don’t want people looking at
our site on their phones anyway.”
Wednesday, March 10, 2010
![Page 9: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/9.jpg)
You don’t use your phone the same way
that you use your desktop/laptop.
Wednesday, March 10, 2010
![Page 10: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/10.jpg)
You don’t use your phone the same way
that you use your desktop/laptop.
(Not yet, anyways.)
Wednesday, March 10, 2010
![Page 11: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/11.jpg)
Let’s Say You’re a Store...
Look up shipping on item I might buy onlineLook up store hours/address I want to visit
Review a product descriptionLook up product reviews
Check status of online orderLook for retailer/product coupons
Check if in-store pickup is availableCheck if price is a good deal
Purchase product after seeing it in-storePurchase product after not available in-store
Purchase product without seeing itCheck status of recently-submitted rebate $#%
$%%$%%
!#%!"%
#&%#!%#!%#'%
'$%"%%"%%
1,959 Smartphone owners asked
source: compete.com, from Q3 of 2009
How often do you perform each of the following shopping-related activities on your smartphone while shopping and away from your computer?
Wednesday, March 10, 2010
![Page 12: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/12.jpg)
Let’s Say You’re a Store...
Look up shipping on item I might buy onlineLook up store hours/address I want to visit
Review a product descriptionLook up product reviews
Check status of online orderLook for retailer/product coupons
Check if in-store pickup is availableCheck if price is a good deal
Purchase product after seeing it in-storePurchase product after not available in-store
Purchase product without seeing itCheck status of recently-submitted rebate $#%
$%%$%%
!#%!"%
#&%#!%#!%#'%
'$%"%%"%%
1,959 Smartphone owners asked
source: compete.com, from Q3 of 2009
How often do you perform each of the following shopping-related activities on your smartphone while shopping and away from your computer?
"%%
#'%
#!%
Look up store hours/address I want to visit
Look up product reviews
Look for retailer/product coupons
Wednesday, March 10, 2010
![Page 13: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/13.jpg)
A Tale of Two Cities
‣ I needed a chair mat,
& Their Mobile Presence
Wednesday, March 10, 2010
![Page 14: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/14.jpg)
figure 1: chair mat
Wednesday, March 10, 2010
![Page 15: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/15.jpg)
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
![Page 16: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/16.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
?
Wednesday, March 10, 2010
![Page 17: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/17.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
![Page 18: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/18.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
![Page 19: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/19.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
![Page 20: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/20.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
![Page 21: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/21.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
![Page 22: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/22.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
![Page 23: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/23.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
![Page 24: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/24.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
Wednesday, March 10, 2010
![Page 25: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/25.jpg)
A Tale of Two Cities & Their Mobile Presence
staples.com
?
Wednesday, March 10, 2010
![Page 26: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/26.jpg)
A Tale of Two Cities & Their Mobile Presence
officemax.com
Wednesday, March 10, 2010
![Page 27: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/27.jpg)
A Tale of Two Cities & Their Mobile Presence
officemax.com
Wednesday, March 10, 2010
![Page 28: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/28.jpg)
A Tale of Two Cities & Their Mobile Presence
officemax.com
Wednesday, March 10, 2010
![Page 29: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/29.jpg)
A Tale of Two Cities & Their Mobile Presence
officemax.com
Wednesday, March 10, 2010
![Page 30: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/30.jpg)
A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
![Page 31: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/31.jpg)
A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
![Page 32: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/32.jpg)
A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
![Page 33: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/33.jpg)
A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
![Page 34: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/34.jpg)
A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
![Page 35: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/35.jpg)
A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
![Page 36: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/36.jpg)
A Tale of Two Cities & Their Mobile Presence
officedepot.com
Wednesday, March 10, 2010
![Page 37: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/37.jpg)
Progressive enhancement
is awesome.
Wednesday, March 10, 2010
![Page 38: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/38.jpg)
“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
![Page 39: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/39.jpg)
‣ “The iPhone obsession,” posted February 8
‣ 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
PPK, iPhones & Putting Things in Orifices…
Wednesday, March 10, 2010
![Page 40: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/40.jpg)
2009 Smartphone SalesWorldwide, numbers in millions.
source: communities-dominate.blogs.com
Everyone Else35
HTC8
RIM35
Nokia68
Apple25
Wednesday, March 10, 2010
![Page 41: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/41.jpg)
Smartphone OS Stats
source: communities-dominate.blogs.com
Other10%
Android4%
WinMo6%
BlackBerry20%
Symbian45%
iPhone15%
Again, Worldwide
Wednesday, March 10, 2010
![Page 42: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/42.jpg)
Just Like the Desktop Web…
‣ Remember IE6?
‣ CSS3 & 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
![Page 43: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/43.jpg)
…Only It’s Harder…Desktop Browsers
Actively in use today.
‣ Internet Explorer 6, 7, 8‣ Firefox 2, 3, 3.5, 3.6‣ Safari 3, 4‣ Chrome 3, 4‣ Opera 9.5, 10
Wednesday, March 10, 2010
![Page 44: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/44.jpg)
…Only It’s Harder…Desktop Browsers
Actively in use today.Mobile Browsers
Actively in use on mobile devices today.
‣ Internet Explorer 6, 7, 8‣ Firefox 2, 3, 3.5, 3.6‣ Safari 3, 4‣ Chrome 3, 4‣ Opera 9.5, 10
‣ jB5‣ Polaris‣ Kindle‣ Android‣ webOS‣ BlackBerry‣ Blazer‣ Firefox for Mobile‣ IE Mobile‣ Iris‣ Myriad‣ NetFront‣ Nokia Series 40‣ Obigo‣ Opera Mobile‣ PSP Web Browser‣ Safari‣ Skyfire Mobile
‣ NetSailor‣ uZard Web‣ Vision Mobile‣ Browser for S60
Wednesday, March 10, 2010
![Page 45: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/45.jpg)
…Only It’s Harder…Desktop Browsers
Actively in use today.Mobile Browsers
Actively in use on mobile devices today.
‣ Internet Explorer 6, 7, 8‣ Firefox 2, 3, 3.5, 3.6‣ Safari 3, 4‣ Chrome 3, 4‣ Opera 9.5, 10
‣ jB5‣ Polaris‣ Kindle‣ Android‣ webOS‣ BlackBerry‣ Blazer‣ Firefox for Mobile‣ IE Mobile‣ Iris‣ Myriad‣ NetFront‣ Nokia Series 40‣ Obigo‣ Opera Mobile‣ PSP Web Browser‣ Safari‣ Skyfire Mobile
‣ NetSailor‣ uZard Web‣ Vision Mobile‣ Browser for S60
‣ BOLT‣ Deepfish‣ IbisBrowser‣ JOCA‣ Links2‣ Minimo‣ Opera Mini‣ Pixo‣ Skweezer‣ Steel‣ Teashark‣ ThunderHawk‣ UCWEB‣ WinWAP
Wednesday, March 10, 2010
![Page 46: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/46.jpg)
…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
![Page 47: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/47.jpg)
Webkit, YAAAAY :)
‣ Used by Safari & Chrome on the desktop
‣ CSS3, great JS rendering (on mobile too)
‣ In Mobile:‣ Safari (iPhone)‣ Android‣ webOS (Palm)‣ Iris (BlackBerry)
‣ Myriad (next version)‣ Nokia Series 40‣ Web Browser for S60
‣ But...
Wednesday, March 10, 2010
![Page 48: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/48.jpg)
There’s No “Webkit on Mobile”
‣ PPK compared 10 different WebKit versions (sans swearing this time)
‣ All were different from one another!
Wednesday, March 10, 2010
![Page 49: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/49.jpg)
figure 2: Fred, angry about this
Wednesday, March 10, 2010
![Page 50: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/50.jpg)
“There is No Mobile Webkit”
‣ PPK compared 10 different WebKit versions (sans swearing this time)
‣ All were different from one another!
‣ http://quirksmode.org/webkit.html
Wednesday, March 10, 2010
![Page 51: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/51.jpg)
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
![Page 52: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/52.jpg)
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
![Page 53: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/53.jpg)
So...we cool?
Wednesday, March 10, 2010
![Page 54: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/54.jpg)
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
![Page 55: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/55.jpg)
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
![Page 56: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/56.jpg)
The Screens
Wednesday, March 10, 2010
![Page 57: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/57.jpg)
The Screens
Wednesday, March 10, 2010
![Page 58: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/58.jpg)
The Screens
Wednesday, March 10, 2010
![Page 59: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/59.jpg)
The Screens
Wednesday, March 10, 2010
![Page 60: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/60.jpg)
The Screens
Wednesday, March 10, 2010
![Page 61: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/61.jpg)
The Screens
Wednesday, March 10, 2010
![Page 62: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/62.jpg)
The Screens
Wednesday, March 10, 2010
![Page 63: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/63.jpg)
The Screens
Wednesday, March 10, 2010
![Page 64: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/64.jpg)
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
![Page 65: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/65.jpg)
Will everyone please put on their
geek hats?
Wednesday, March 10, 2010
![Page 66: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/66.jpg)
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
![Page 67: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/67.jpg)
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' aboutalert("Uh, sorry. No dice.");
}</script>
Wednesday, March 10, 2010
![Page 68: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/68.jpg)
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' aboutalert("Uh, sorry. No dice.");
}</script>
Wednesday, March 10, 2010
![Page 69: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/69.jpg)
Step 2: Watch’em<script type="text/javascript">
var shortCircuit = false;
// called by the geolocation functionfunction 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
![Page 70: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/70.jpg)
listing 1: what gets passed in as “position”
position = {coords: {
latitude: 42.3667,longitude: -71.0596,accuracy: 400,altitude: null,altitudeAccuracy: null,heading: null,speed: null
}};
Wednesday, March 10, 2010
![Page 71: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/71.jpg)
Step 2: Watch’em<script type="text/javascript">
var shortCircuit = false;
// called by the geolocation functionfunction 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
![Page 72: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/72.jpg)
listing 2: some jQuery/ajax magic
$.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(":(");}
});
Wednesday, March 10, 2010
![Page 73: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/73.jpg)
listing 2: some jQuery/ajax magic
$.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(":(");}
});
Wednesday, March 10, 2010
![Page 74: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/74.jpg)
listing 2: some jQuery/ajax magic
$.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(":(");}
});
Wednesday, March 10, 2010
![Page 75: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/75.jpg)
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
![Page 76: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/76.jpg)
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
![Page 77: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/77.jpg)
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; // kmvar 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
![Page 78: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/78.jpg)
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; // kmvar 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
![Page 79: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/79.jpg)
It's OK.Deep breaths.
Wednesday, March 10, 2010
![Page 80: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/80.jpg)
Google “Haversine JavaScript”
Wednesday, March 10, 2010
![Page 81: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/81.jpg)
Step 3: From Here to There<script type="text/javascript">
// trust me, it calculates the distance between pointsfunction distance(from, to) {
var lat1 = from[0], lat2 = to[0];var lon1 = from[1], lon2 = to[1];var R = 6371; // kmvar 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
![Page 82: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/82.jpg)
listing 2 again: remember this? what a fantastic slide!
$.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(":(");}
});
Wednesday, March 10, 2010
![Page 83: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/83.jpg)
Step 4: Show’em!<script type="text/javascript">
function showStuff(km) {var dist = kmToMiles(km);var use = 0;var segments = [
{result: "Not at all.", upper: 1000000, lower: 1000},{result: "I don't think so.", upper: 1000, lower: 500},{result: "Not really, no.", upper: 500, lower: 150},{result: "Meh, sorta.", upper: 150, lower: 75},{result: "Kinda.", upper: 75, lower: 25},{result: "Actually, yes!", upper: 25, lower: 2},{result: "Yes yes, y'all.", upper: 2, lower: 0}
];
// ...
Wednesday, March 10, 2010
![Page 84: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/84.jpg)
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
![Page 85: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/85.jpg)
Stuff AmINearFred.com Does
‣ Rounds the distance to the nearest mile
‣ Shows a difference reference graphic depending on what segment was picked (they’re labeled 0.jpg, 1.jpg, 2.jpg, etc.)
‣ If distance is less than one mile, I tell you that you’re “right next to me”
‣ Uses JavaScript animations :)
// 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
Wednesday, March 10, 2010
![Page 86: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/86.jpg)
Those Screens Again
Wednesday, March 10, 2010
![Page 87: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/87.jpg)
Those Screens Again
Wednesday, March 10, 2010
![Page 88: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/88.jpg)
Those Screens Again
Wednesday, March 10, 2010
![Page 89: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/89.jpg)
Those Screens Again
Wednesday, March 10, 2010
![Page 90: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/90.jpg)
Those Screens Again
Wednesday, March 10, 2010
![Page 91: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/91.jpg)
Those Screens Again
Wednesday, March 10, 2010
![Page 92: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/92.jpg)
Those Screens Again
Wednesday, March 10, 2010
![Page 93: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/93.jpg)
Those Screens Again
Wednesday, March 10, 2010
![Page 94: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/94.jpg)
Web App Mode<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Wednesday, March 10, 2010
![Page 95: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/95.jpg)
Finally, Add Your Icon<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Wednesday, March 10, 2010
![Page 96: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/96.jpg)
See? That wasn’t so bad, now was it?
Wednesday, March 10, 2010
![Page 97: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/97.jpg)
Was it?
Wednesday, March 10, 2010
![Page 98: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/98.jpg)
Going Even Further
‣ JQTouch — http://jqtouch.comiPhone like interface with HTML & JavaScript
‣ webOS — http://palm.comApps are built in HTML & JavaScript
‣ PhoneGap — http://phonegap.comBuild native apps with HTML & JavaScript for Android, iPhone & BlackBerry
‣ JavaScript Geolocation Code — http://code.google.com/p/geo-location-javascript/
Wednesday, March 10, 2010
![Page 99: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/99.jpg)
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
![Page 100: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/100.jpg)
Time for questions & applause.
Wednesday, March 10, 2010
![Page 101: Development For The New Mobile Web](https://reader033.fdocuments.in/reader033/viewer/2022060107/5549faf2b4c905e56c8b4a57/html5/thumbnails/101.jpg)
Thank you! :)
@fredleblanc on Twitterhttp://fredhq.com on the web
[email protected] via email
Connect with me:
Wednesday, March 10, 2010