1. HTML5TX 2011
HTML5
GEOLOCATION
❦
Christopher Schmitt | http://twitter.com/@teleject

2. THINGS ARE GOOD
BETWEEN 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’S
YOUR 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 #1
Muck-N-Dave's Texas BBQ
1603 South Congress
Austin, TX 78704 USA
512-590-3387
Old School BBQ and Grill
2326 E Cesar Chavez St
Austin, TX, 78702 USA
512-974-6830
The Shed BBQ Rolling Joint
1816 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 #5
http://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 #7
http://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 SEE
ANOTHER 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 Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
47