HTML5TX                 2011         HTML5         GEOLOCATION                        ❦Christopher Schmitt | http://twitte...
THINGS ARE GOODBETWEEN US, XHTML,RIGHT?I MEAN. WE GET ALONG WELL.AND WE BOTH LIKE STUFF.               2               3
http://dev.opera.com/articles/view/mama-markup-validation-report/                                3
4
“THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML,INCLUDING QUOTES AROUND   ATTRIBUTE VALUES AND SLASHES IN EMPTY TAGS AND  N...
http://www.flickr.com/photos/teleject/432030263/                       6
7
http://microformats.org/           8
9
10
11
BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966                      12
“TAKE CARE   OF THE LUXURIES AND THE NECESSITIES WILL TAKE  CARE OF THEMSELVES.”FRANK LLOYD WRIGHT            13
AGENDA ITEMS• What’s     different from XHTML to HTML5• Building   with HTML5 (You are here.)• Geolocation    ... and mayb...
HTML5 GEOLOCATION        15
OH, PATHOS!         16
17
HEY, WHAT’SYOUR PROBLEM?     http://youtu.be/_naLuRykun8                 18
19
20
21
22
23
if (navigator.geolocation) {	 navigator.geolocation.getCurrentPosition(show_coordinates);	function show_coordinates(positi...
25
THAT’S GREAT, BUT•I   don’t read longitude and latitude.     • More  importantly, my clients or site visitors don’t compre...
http://2010.incontrolconference.com/eats/                   27
http://atxwebshow.com/coffeeshops/                28
http://atxwebshow.com/coffeeshops/                29
STEP #1Muck-N-Daves Texas BBQ1603 South CongressAustin, TX 78704 USA512-590-3387Old School BBQ and Grill2326 E Cesar Chave...
STEP #2• Convert   addresses to hCard microformats            http://microformats.org/code/hcard/creator                  ...
<div class="vcard">	 <a class="url fn n" href="http://www.theqcard.com/">	 <span class="given-name">Jane</span>	 <span cla...
STEP #3  hCard  hCard  hCard  hCard    33
STEP #3<ol>   <li>            hCard                    </li>   <li>            hCard                    </li>   <li>      ...
STEP #4<div id="locations">	 <ol>	 	 <li><!-- Microformats address 1 --></li>	 	 <li><!-- Microformats address 2 --></li>	...
STEP #5http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin                            36
STEP #6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><scr...
STEP #7http://code.google.com/apis/maps/signup.html                     38
STEP #8<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><scri...
STEP #9 PROFIT!       40
ONE MORE THING...        41
<div class="vcard">	 <a class="url fn n" href="http://www.theqcard.com/">	 <span class="given-name">Jane</span>	 <span cla...
$(#locations).location(	 {	 	 apiKey: YOUR_API_KEY_HERE,	 	 geodata: #geodata, // site visitor’s location	 	 notification: ...
XHTML, ...I THINK I WANT TO SEEANOTHER MARKUP SPEC.                  44
RECOMMENDED         Design for Web Applications by Matt May and Wendy• Universal Chisholm• Bulletproof Ajax   by Jeremy Ke...
UPCOMING E4H EVENTS• Online, live   3rd Annual online, live jQuery Summit on Nov. 15-16th  • Designer  Track on Nov. 15 - ...
THANK YOU!   Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject             47
Upcoming SlideShare
Loading in …5
×

[HTML5tx] HTML5 Geolocation For People Who Don't Love to Code

51,277 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
51,277
On SlideShare
0
From Embeds
0
Number of Embeds
115
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

[HTML5tx] HTML5 Geolocation For People Who Don't Love to Code

  1. HTML5TX 2011 HTML5 GEOLOCATION ❦Christopher Schmitt | http://twitter.com/@teleject
  2. THINGS ARE GOODBETWEEN US, XHTML,RIGHT?I MEAN. WE GET ALONG WELL.AND WE BOTH LIKE STUFF. 2 3
  3. http://dev.opera.com/articles/view/mama-markup-validation-report/ 3
  4. 4
  5. “THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML,INCLUDING QUOTES AROUND ATTRIBUTE VALUES AND SLASHES IN EMPTY TAGS AND NAMESPACES ALL AT ONCE DIDN’T WORK.” SIR TIM BERNERS-LEE 5
  6. http://www.flickr.com/photos/teleject/432030263/ 6
  7. 7
  8. http://microformats.org/ 8
  9. 9
  10. 10
  11. 11
  12. BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966 12
  13. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.”FRANK LLOYD WRIGHT 13
  14. AGENDA ITEMS• What’s different from XHTML to HTML5• Building with HTML5 (You are here.)• Geolocation ... and maybe more! (Probably not. Just Geolocation.)• Prizes! http://interactwithwebstandards.com/ 14
  15. HTML5 GEOLOCATION 15
  16. OH, PATHOS! 16
  17. 17
  18. HEY, WHAT’SYOUR PROBLEM? http://youtu.be/_naLuRykun8 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(show_coordinates); function show_coordinates(position){ alert(Your latitude is + position.coords.latitude + + and your longitude is + position.coords.longitude +.); }} Modernizr.load({ test: Modernizr.geolocat ...or use Modernizr! yep : geo.js, nope: geo-polyfill.js 24 });
  25. 25
  26. THAT’S GREAT, BUT•I don’t read longitude and latitude. • More importantly, my clients or site visitors don’t comprehend longitude and latitude.• And I don’t love the code! 26
  27. http://2010.incontrolconference.com/eats/ 27
  28. http://atxwebshow.com/coffeeshops/ 28
  29. http://atxwebshow.com/coffeeshops/ 29
  30. STEP #1Muck-N-Daves Texas BBQ1603 South CongressAustin, TX 78704 USA512-590-3387Old School BBQ and Grill2326 E Cesar Chavez StAustin, TX, 78702 USA512-974-6830The Shed BBQ Rolling Joint1816 E 6th Street.Austin, TX, 78702 USA 30
  31. STEP #2• Convert addresses to hCard microformats http://microformats.org/code/hcard/creator 31
  32. <div class="vcard"> <a class="url fn n" href="http://www.theqcard.com/"> <span class="given-name">Jane</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Old School BBQ and Grill</div> <div class="adr"> <div class="street-address">2907 E MLK Jr Blvd.</div> <span class="locality">Austin</span>, <span class="region">TX</span>, <span class="postal-code">78702</span> <span class="country-name">USA</span> </div> <div class="tel">512-974-6830</div> <div class="note distance"> </div> http://microformats.org/code/hcard/creator</div> 32
  33. STEP #3 hCard hCard hCard hCard 33
  34. STEP #3<ol> <li> hCard </li> <li> hCard </li> <li> hCard </li> <li> hCard 34 </li>
  35. STEP #4<div id="locations"> <ol> <li><!-- Microformats address 1 --></li> <li><!-- Microformats address 2 --></li> <li><!-- Microformats address 3 --></li> <li><!-- Microformats address 4 --></li> ... </ol></div> 35
  36. STEP #5http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin 36
  37. STEP #6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.js"></script> 37
  38. STEP #7http://code.google.com/apis/maps/signup.html 38
  39. STEP #8<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.1.0.0.js"></script><script type="text/javascript"> $(document).ready(function() { $(#locations2).location({ apiKey : YOUR_API_KEY_HERE }); });</script> 39
  40. STEP #9 PROFIT! 40
  41. ONE MORE THING... 41
  42. <div class="vcard"> <a class="url fn n" href="http://www.theqcard.com/"> <span class="given-name">Jane</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Old School BBQ and Grill</div> <div class="adr" data-longitude="-97.723410" data-latitude="30.262098"> <div class="street-address">2907 E MLK Jr Blvd.</div> <span class="locality">Austin</span>, <span class="region">TX</span>, <span class="postal-code">78702</span> <span class="country-name">USA</span> </div> <div class="tel">512-974-6830</div> <div class="note distance"> </div> http://geocoder.us/</div> 42
  43. $(#locations).location( { apiKey: YOUR_API_KEY_HERE, geodata: #geodata, // site visitor’s location notification: .notification, // progress indicator recheck: .recheck, distance: .distance, //where the distance appears geoAdr: .geoAdr, // longitude and latitude listElement: li // different listing element? } ); 43
  44. XHTML, ...I THINK I WANT TO SEEANOTHER MARKUP SPEC. 44
  45. RECOMMENDED Design for Web Applications by Matt May and Wendy• Universal Chisholm• Bulletproof Ajax by Jeremy Keith• Designing with Progressive Enhancement by Filament Group• Microformats Made Simple by Emily Lewis• HTML5 Cookbook by a whole bunch of people! 45
  46. UPCOMING E4H EVENTS• Online, live 3rd Annual online, live jQuery Summit on Nov. 15-16th • Designer Track on Nov. 15 - HTML5 Video, Responsive Web Design, jQuery UI, and more... • Developer Track on Nov. 16 - iFrame Programming, Deferreds, Backbone,js, and more... • http://jquerysummit.com/ 46
  47. THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 47

×