• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[HTML5tx] HTML5 Geolocation For People Who Don't Love to Code
 

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

on

  • 48,936 views

 

Statistics

Views

Total Views
48,936
Views on SlideShare
48,830
Embed Views
106

Actions

Likes
6
Downloads
0
Comments
0

7 Embeds 106

http://lanyrd.com 80
http://www.scoop.it 16
http://paper.li 5
http://a0.twimg.com 2
http://localhost 1
http://192.168.0.28 1
http://www.mefeedia.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • HTML5TX 2011 HTML5 GEOLOCATION ❦Christopher Schmitt | http://twitter.com/@teleject
    • 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 NAMESPACES ALL AT ONCE DIDN’T WORK.” SIR TIM BERNERS-LEE 5
    • 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 maybe more! (Probably not. Just Geolocation.)• Prizes! http://interactwithwebstandards.com/ 14
    • 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(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
    • 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
    • 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 Chavez StAustin, TX, 78702 USA512-974-6830The Shed BBQ Rolling Joint1816 E 6th Street.Austin, TX, 78702 USA 30
    • STEP #2• Convert addresses to hCard microformats http://microformats.org/code/hcard/creator 31
    • <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
    • STEP #3 hCard hCard hCard hCard 33
    • STEP #3<ol> <li> hCard </li> <li> hCard </li> <li> hCard </li> <li> hCard 34 </li>
    • 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
    • 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><script type="text/javascript" src="js/jquery-location.js"></script> 37
    • 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><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
    • 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 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
    • $(#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
    • 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 Keith• Designing with Progressive Enhancement by Filament Group• Microformats Made Simple by Emily Lewis• HTML5 Cookbook by a whole bunch of people! 45
    • 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
    • THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 47