Development for the
                      New Mobile Web
                      New
                            As performe...
Development for the
                      New Mobile Web
                      New
                                       ...
Great, And You Are…?
                       ‣    In a word: Fred
                       ‣    Graduated from NEIA in ’
    ...
Neat, What Else?

                       ‣    I oversaw development of Motorola’s
                            Solutions Ca...
For Example

                       ‣    iPhone and Android people in the audience:
                                   vis...
Before the fun stuff,
               we have to go over a
                couple of things.

Wednesday, March 10, 2010
Audience Questions!

                       ‣    How many people have mobile phones?
                       ‣    How many ...
Stop Me If You’ve
             Heard This One…
          “It’s just a smaller,
      stripped down version of      “We’ll ...
You don’t use your
              phone the same way
               that you use your
                desktop/laptop.

Wedn...
You don’t use your
              phone the same way
               that you use your
                desktop/laptop.
     ...
Let’s Say You’re a Store...
     How often do you perform each of the following shopping-related activities
       on your...
Let’s Say You’re a Store...
     How often do you perform each of the following shopping-related activities
       on your...
A Tale of Two Cities                            & Their Mobile Presence




                       ‣    I needed a chair m...
figure 1: chair mat

Wednesday, March 10, 2010
A Tale of Two Cities                                & Their Mobile Presence




                       ‣    I needed a cha...
A Tale of Two Cities         & Their Mobile Presence




                                           ?



                 ...
A Tale of Two Cities         & Their Mobile Presence




                   staples.com
Wednesday, March 10, 2010
A Tale of Two Cities         & Their Mobile Presence




                   staples.com
Wednesday, March 10, 2010
A Tale of Two Cities         & Their Mobile Presence




                   staples.com
Wednesday, March 10, 2010
A Tale of Two Cities         & Their Mobile Presence




                   staples.com
Wednesday, March 10, 2010
A Tale of Two Cities         & Their Mobile Presence




                   staples.com
Wednesday, March 10, 2010
A Tale of Two Cities         & Their Mobile Presence




                   staples.com
Wednesday, March 10, 2010
A Tale of Two Cities         & Their Mobile Presence




                   staples.com
Wednesday, March 10, 2010
A Tale of Two Cities         & Their Mobile Presence




                   staples.com
Wednesday, March 10, 2010
A Tale of Two Cities         & Their Mobile Presence




                                           ?



                 ...
A Tale of Two Cities    & Their Mobile Presence




             officemax.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




             officemax.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




             officemax.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




             officemax.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




           officedepot.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




           officedepot.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




           officedepot.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




           officedepot.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




           officedepot.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




           officedepot.com
Wednesday, March 10, 2010
A Tale of Two Cities    & Their Mobile Presence




           officedepot.com
Wednesday, March 10, 2010
Progressive
                            enhancement
                             is awesome.

Wednesday, March 10, 2010
“Progressive enhancement is a strategy for web
              design that emphasizes accessibility, semantic
              ...
PPK, iPhones & Putting
             Things in Orifices…
                       ‣    “The iPhone obsession,” posted Februar...
2009 Smartphone Sales
                                              Worldwide, numbers in millions.



                   ...
Smartphone OS Stats
                                                 Again, Worldwide


                                  ...
Just Like the Desktop Web…

                       ‣    Remember IE ?
                       ‣    CSS & progressive enhanc...
…Only It’s Harder…
    Desktop Browsers
                            Actively in use today.
   ‣   Internet Explorer , ,
  ...
…Only It’s Harder…
    Desktop Browsers                                 Mobile Browsers
                            Active...
…Only It’s Harder…
    Desktop Browsers                                 Mobile Browsers
                            Active...
…And More Expensive

                       ‣    For desktop browsers, I can get all of them on
                          ...
Webkit, YAAAAY :)

                       ‣    Used by Safari & Chrome on the desktop
                       ‣    CSS , gr...
There’s No “Webkit on Mobile”

                       ‣    PPK compared     different WebKit versions
                     ...
figure 2: Fred, angry about this

Wednesday, March 10, 2010
“There is No Mobile Webkit”

                       ‣    PPK compared     different WebKit versions
                       ...
So What Can We Do?

                       ‣    We do our best
                       ‣    Use progressive enhancement
   ...
Designers Need to Know Too

                       ‣    “A finger is not a mouse pointer.”
                                ...
So...
                            we cool?


Wednesday, March 10, 2010
The Other Side of the Fence

                       ‣    Android & iPhone are growing in the US
                       ‣  ...
Exploring AmINearFred.com

                       ‣    Two parts: your side and my side
                       ‣    My sid...
The Screens




Wednesday, March 10, 2010
The Screens




Wednesday, March 10, 2010
The Screens




Wednesday, March 10, 2010
The Screens




Wednesday, March 10, 2010
The Screens




Wednesday, March 10, 2010
The Screens




Wednesday, March 10, 2010
The Screens




Wednesday, March 10, 2010
The Screens




Wednesday, March 10, 2010
The Plan & Concept

                       1. Check to make sure user can be located
                       2. Watch their...
Will everyone
                   please put on their
                       geek hats?

Wednesday, March 10, 2010
Step 1: Can I Find You?
          <script type="text/javascript">
              if (navigator.geolocation) {
             ...
Step 1: Can I Find You?
          <script type="text/javascript">
              if (navigator.geolocation) {
             ...
Step 2: Watch’em
          <script type="text/javascript">
              var watch;

              if (navigator.geolocati...
Step 2: Watch’em
          <script type="text/javascript">
              var shortCircuit = false;

                    //...
position = {
                                   coords: {
                                      latitude: 42.3667,
       ...
Step 2: Watch’em
          <script type="text/javascript">
              var shortCircuit = false;

                    //...
$.ajax({
          url: 'coords.txt',
          dataType: 'text',
          success: function(data) {
             var fro...
$.ajax({
          url: 'coords.txt',
          dataType: 'text',
          success: function(data) {
             var fro...
$.ajax({
          url: 'coords.txt',
          dataType: 'text',
          success: function(data) {
             var fro...
Step 3: From Here to There
          <script type="text/javascript">
              Number.prototype.toRad = function() {
 ...
Step 3: From Here to There
          <script type="text/javascript">
              Number.prototype.toRad = function() {
 ...
Step 3: From Here to There
          <script type="text/javascript">
              function distance(from, to) {
         ...
Step 3: From Here to There
          <script type="text/javascript">
              function distance(from, to) {
         ...
It's OK.
                            Deep breaths.


Wednesday, March 10, 2010
Google “Haversine JavaScript”




Wednesday, March 10, 2010
Step 3: From Here to There
          <script type="text/javascript">
              // trust me, it calculates the distance...
$.ajax({
          url: 'coords.txt',
          dataType: 'text',
          success: function(data) {
             var fro...
Step 4: Show’em!
          <script type="text/javascript">
              function showStuff(km) {
                 var dis...
Step 4: Show’em!
                            // ...

                            for (var i=0; i < segments.length; i++) {...
Stuff AmINearFred.com Does
                       // you're now ready to display things! you know:
                       ...
Those Screens Again




Wednesday, March 10, 2010
Those Screens Again




Wednesday, March 10, 2010
Those Screens Again




Wednesday, March 10, 2010
Those Screens Again




Wednesday, March 10, 2010
Those Screens Again




Wednesday, March 10, 2010
Those Screens Again




Wednesday, March 10, 2010
Those Screens Again




Wednesday, March 10, 2010
Those Screens Again




Wednesday, March 10, 2010
Web App Mode
          <meta name="viewport"
                content="width=device-width;
                         initial...
Finally, Add Your Icon
          <link rel="apple-touch-icon"
                href="/apple-touch-icon.png" />




Wednesda...
See? That wasn’t so
                 bad, now was it?


Wednesday, March 10, 2010
Was it?


Wednesday, March 10, 2010
Going Even Further

                       ‣    JQTouch — http://jqtouch.com
                            iPhone like inter...
What We Learned Today

                       ‣    Mobile development is hard & expensive, but
                           ...
Time for questions
                     & applause.


Wednesday, March 10, 2010
Thank you! :)
                                 Connect with me:
                               @fredleblanc on Twitter
   ...
Upcoming SlideShare
Loading in …5
×

Development For The New Mobile Web

5,539 views

Published on

"Development For The New Mobile Web". Delivered by Fred LeBlanc, Senior Developer at Hill Holliday, on March 10th, 2010 at Lamont Library, Forum Room.

Published in: Design, Technology, Business
4 Comments
18 Likes
Statistics
Notes
No Downloads
Views
Total views
5,539
On SlideShare
0
From Embeds
0
Number of Embeds
532
Actions
Shares
0
Downloads
238
Comments
4
Likes
18
Embeds 0
No embeds

No notes for slide

Development For The New Mobile Web

  1. 1. Development for the New Mobile Web New As performed by Fred LeBlanc Wednesday, March 10, 2010
  2. 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. 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. 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. 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. 6. Before the fun stuff, we have to go over a couple of things. Wednesday, March 10, 2010
  7. 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. 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. 9. You don’t use your phone the same way that you use your desktop/laptop. Wednesday, March 10, 2010
  10. 10. You don’t use your phone the same way that you use your desktop/laptop. (Not yet, anyways.) Wednesday, March 10, 2010
  11. 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. 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. 13. A Tale of Two Cities & Their Mobile Presence ‣ I needed a chair mat, Wednesday, March 10, 2010
  14. 14. figure 1: chair mat Wednesday, March 10, 2010
  15. 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. 16. A Tale of Two Cities & Their Mobile Presence ? staples.com Wednesday, March 10, 2010
  17. 17. A Tale of Two Cities & Their Mobile Presence staples.com Wednesday, March 10, 2010
  18. 18. A Tale of Two Cities & Their Mobile Presence staples.com Wednesday, March 10, 2010
  19. 19. A Tale of Two Cities & Their Mobile Presence staples.com Wednesday, March 10, 2010
  20. 20. A Tale of Two Cities & Their Mobile Presence staples.com Wednesday, March 10, 2010
  21. 21. A Tale of Two Cities & Their Mobile Presence staples.com Wednesday, March 10, 2010
  22. 22. A Tale of Two Cities & Their Mobile Presence staples.com Wednesday, March 10, 2010
  23. 23. A Tale of Two Cities & Their Mobile Presence staples.com Wednesday, March 10, 2010
  24. 24. A Tale of Two Cities & Their Mobile Presence staples.com Wednesday, March 10, 2010
  25. 25. A Tale of Two Cities & Their Mobile Presence ? staples.com Wednesday, March 10, 2010
  26. 26. A Tale of Two Cities & Their Mobile Presence officemax.com Wednesday, March 10, 2010
  27. 27. A Tale of Two Cities & Their Mobile Presence officemax.com Wednesday, March 10, 2010
  28. 28. A Tale of Two Cities & Their Mobile Presence officemax.com Wednesday, March 10, 2010
  29. 29. A Tale of Two Cities & Their Mobile Presence officemax.com Wednesday, March 10, 2010
  30. 30. A Tale of Two Cities & Their Mobile Presence officedepot.com Wednesday, March 10, 2010
  31. 31. A Tale of Two Cities & Their Mobile Presence officedepot.com Wednesday, March 10, 2010
  32. 32. A Tale of Two Cities & Their Mobile Presence officedepot.com Wednesday, March 10, 2010
  33. 33. A Tale of Two Cities & Their Mobile Presence officedepot.com Wednesday, March 10, 2010
  34. 34. A Tale of Two Cities & Their Mobile Presence officedepot.com Wednesday, March 10, 2010
  35. 35. A Tale of Two Cities & Their Mobile Presence officedepot.com Wednesday, March 10, 2010
  36. 36. A Tale of Two Cities & Their Mobile Presence officedepot.com Wednesday, March 10, 2010
  37. 37. Progressive enhancement is awesome. Wednesday, March 10, 2010
  38. 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. 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. 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. 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. 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. 43. …Only It’s Harder… Desktop Browsers Actively in use today. ‣ Internet Explorer , , ‣ Firefox , , . , . ‣ Safari , ‣ Chrome , ‣ Opera . , Wednesday, March 10, 2010
  44. 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. 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. 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. 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. 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. 49. figure 2: Fred, angry about this Wednesday, March 10, 2010
  50. 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. 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. 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
  53. 53. So... we cool? Wednesday, March 10, 2010
  54. 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. 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
  56. 56. The Screens Wednesday, March 10, 2010
  57. 57. The Screens Wednesday, March 10, 2010
  58. 58. The Screens Wednesday, March 10, 2010
  59. 59. The Screens Wednesday, March 10, 2010
  60. 60. The Screens Wednesday, March 10, 2010
  61. 61. The Screens Wednesday, March 10, 2010
  62. 62. The Screens Wednesday, March 10, 2010
  63. 63. The Screens Wednesday, March 10, 2010
  64. 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. 65. Will everyone please put on their geek hats? Wednesday, March 10, 2010
  66. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 79. It's OK. Deep breaths. Wednesday, March 10, 2010
  80. 80. Google “Haversine JavaScript” Wednesday, March 10, 2010
  81. 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. 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
  83. 83. 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
  84. 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. 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
  86. 86. Those Screens Again Wednesday, March 10, 2010
  87. 87. Those Screens Again Wednesday, March 10, 2010
  88. 88. Those Screens Again Wednesday, March 10, 2010
  89. 89. Those Screens Again Wednesday, March 10, 2010
  90. 90. Those Screens Again Wednesday, March 10, 2010
  91. 91. Those Screens Again Wednesday, March 10, 2010
  92. 92. Those Screens Again Wednesday, March 10, 2010
  93. 93. Those Screens Again Wednesday, March 10, 2010
  94. 94. 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
  95. 95. Finally, Add Your Icon <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> Wednesday, March 10, 2010
  96. 96. See? That wasn’t so bad, now was it? Wednesday, March 10, 2010
  97. 97. Was it? Wednesday, March 10, 2010
  98. 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. 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
  100. 100. Time for questions & applause. Wednesday, March 10, 2010
  101. 101. Thank you! :) Connect with me: @fredleblanc on Twitter http://fredhq.com on the web fred@fredhq.com via email Wednesday, March 10, 2010

×