Photos Around You

3,147 views

Published on

Photos Around You — Some YUI 3, YQL, Flickr, and Geolocation mashery. A Demo and the details of how I built this mashup all in JavaScript (and not much of it).

http://bit.ly/photos-around-you
http://925html.com/code/photos-around-you/

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

No Downloads
Views
Total views
3,147
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Photos Around You

  1. 1. Photos Around You http://bit.ly/photos-around-you Eric Ferraiuolo Twitter: @ericf Blog: 925html.com
  2. 2. Photos Around You is… • Written in JavaScript • Leveraging YUI 3.1,YQL, & Flickr • Determining the user’s location • Finding geo-tagged photos on Flickr • Optimizing thumbnails using data-URIs • Building a UI to view photos
  3. 3. YUI 3 Yahoo! User Interface Library • Yahoo!’s next-generation JavaScript library • Powers the new Yahoo! homepage • Current version: 3.1.0 • Open Source – on GitHub • http://github.com/yui/yui3/
  4. 4. YUI 3 – Cont. • Modular • Selector driven • Self-aware Dependency • Performant Management • Custom Events • YUI().use() only what you need • Component and Widget Infrastructure • YUI 2 in 3 • Custom Modules • Gallery Modules
  5. 5. YUI 3 Modules Used • node • gallery-jsonp • overlay • gallery-yql • substitute • gallery-markout YUI().use('node', 'overlay', 'substitute', 'gallery-jsonp', 'gallery-yql', 'gallery- markout', function(Y){ // Everything is ready! });
  6. 6. YQL Yahoo! Query Language • SELECT * FROM Internet SELECT * FROM flickr.photos.search WHERE text="cat" LIMIT 10 • SQL-like syntax • HTTP GET ➞ JSON(P) • Yahoo!’s pipes are bigger than yours • Open Data Tables: Plugin your own web services http://datatables.org/
  7. 7. YQL – Cont. • Supports: SELECT, INSERT, UPDATE, DELETE • JOIN web services together: SELECT * FROM upcoming.events WHERE woeid IN (SELECT woeid FROM geo.places WHERE text="Boston, MA") • Execute JavaScript on YQL’s Servers
  8. 8. Using YQL with YUI 3 var q = 'SELECT * FROM flickr.photos.search '+ 'WHERE text="cat"'; new Y.yql(q, function(r){ r.query.results // Results as JSON });
  9. 9. Flickr …is Photos
  10. 10. User’s Location • Need user’s location, client-side • Feature detect W3C Geolocation API • Fallback to IP-based • Gather info about location
  11. 11. User’s Location via W3C Geolocation API • Returns Lat/Lng • Black-box implementation • Firefox, iPhone, iPad, Android if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( locFromPos, locFromIP ); } else { locFromIP(); }
  12. 12. User’s Location via IP-based Lookup • Less accurate • All browsers • Get user’s IP in JavaScript? getIP = function (callback) { Y.jsonp('http://jsonip.appspot.com/', function(data){ callback(data.ip); }); };
  13. 13. User’s Location Gathering Info About Location • WOEID (Where On Earth IDentifer) • Locality (e.g. Boston, MA) YQL Query using Lat/Lon from Geolocation API SELECT * FROM geo.places WHERE woeid IN (SELECT place.woeid FROM flickr.places WHERE lat={lat} AND lon={lon}) Credit: Christian Heilmann (@codepo8)
  14. 14. User’s Location Gathering Info About Location • WOEID (Where On Earth IDentifer) • Locality (e.g. Boston, MA) YQL Query using IP SELECT * FROM geo.places WHERE woeid IN (SELECT place.woeid FROM flickr.places WHERE (lat, lon) IN (SELECT Latitude, Longitude FROM ip.location WHERE ip="{ip}")) Credit: Christian Heilmann (@codepo8)
  15. 15. User’s Location Gathering Info About Location Lat-Lon/IP Lat-Lon/IP WOEID Browser YQL Y! Geo Places API Loc Info Loc Info Internet
  16. 16. Geo-Tagged Flickr Photos Search Flickr via YQL Query • Paged result-sets • Use WOEID of the user’s location • Sort-by “interestingness” SELECT * FROM flickr.photos.search({start}, {num}) WHERE woe_id="{woeid}" AND radius_units="mi" AND sort="interestingness- desc" AND extras="path_alias"
  17. 17. Geo-Tagged Flickr Photos Search Flickr via YQL Query Photo Data Search API Browser YQL Flickr Internet
  18. 18. Thumbnail Data-URIs Too Many HTTP Requests Image Requests Browser Flickr Internet
  19. 19. Thumbnail Data-URIs Delegate YQL to Download Thumbnails Images Data URIs Browser YQL Flickr Internet
  20. 20. Thumbnail Data-URIs • Removed HTTP image requests to Flickr • YQL GETs Flickr images, Batches Data URIs • Reduced HTTP requests 10x • 1 YQL Request = 10 Image Data URIs
  21. 21. Photos UI • Loading indicators between YQL requests • Render grid of thumbnails • Use photo data to construct Overlay • ‘More’ Button to fetch additional photos
  22. 22. Photo UI – Cont. • Event Delegation • 1 Event Handler for all thumbnail clicks • Heavy use of CSS3 • Tested with: IE 8, Firefox 3.5, Safari 4, Chrome 4, iPhone, iPad
  23. 23. Questions? • http://925html.com/code/photos-around-you/ • Eric Ferraiuolo • http://925html.com • @ericf on Twitter
  24. 24. Photo Credits • http://www.flickr.com/photos/pearbiter/2075091856 • http://www.flickr.com/photos/leecullivan/399317018 • http://www.flickr.com/photos/beantown/3085045889 • http://www.flickr.com/photos/roncaglia/2481739143 • http://www.flickr.com/photos/28625089@N03/2923851272 • http://www.flickr.com/photos/colonnade/859769177 • http://www.flickr.com/photos/emdurso/402898976 • http://www.flickr.com/photos/riacale/1736524005 • http://www.flickr.com/photos/31332713@N04/3086715585 • http://www.flickr.com/photos/gershamabob/78717025

×