Future Technologies       @RobOusbey
The Future   Where we’re going,    we don’t need roads.
Why doyou care?
Why do you care? Build Faster WebsitesExample data via: http://ezlocal.com/blog/post/page-speed-vs-pages-crawled.aspx
Why do you care? First Movers Get Benefits from GoogleRecipes: http://www.google.com/support/webmasters/bin/answer.py?answ...
Why do you care? First Movers Get LinksAny link building tactic diminishes in effectiveness over time. New technologies ar...
Why do you care? First Movers Get Linkshttp://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svgSVG ...
HTML5   It’s easy, once you’ve     read the directions.
Why do you care? First Movers Get LinksApp launch website at: http://benthebodyguard.com/
HTML 5: Graphic.lyA beautifully presented HTML5 graphic-novel interface, with Frank Miller-esque touches.http://graphic.ly
HTML 5: Mag.Reevoo.ComA weekend hack project to demonstrate some HTML5/CSS3 features.http://mag.reevoo.com
CSS3       Third time lucky.
CSS3: Beautiful Siteshttp://www.zurb.com/playground/sliding-vinyl
CSS3: Text StrokeLots more at: http://www.css3files.com/ andhttp://www.smashingmagazine.com/2011/05/11/the-future-of-css-e...
CSS3: Transitioninghttp://media.24ways.org/2009/14/5/index.html
CSS3: New Stuffhttp://webdesignerwall.com/trends/47-amazing-css3-animation-demos
CSS3: 39 Box Shadows, No Good ReasonA sample of the demos available at: http://www.viget.com/uploads/file/boxshadows/Info:...
AJAX   Looks more complicated    than it ought to be.
Use jQuery.    http://jquery.com/  You can thank me later.
AJAX: The Old Way Sucks www.example.com/shop www.example.com/shop#cameras www.example.com/shop#DVDs www.example.com/shop#l...
AJAX: The Interim Way Kind of Sucks www.example.com/shop#!DVDs www.example.com/shop?_escaped_fragment_=DVDsInfo + Demo: ht...
AJAX: Twitter’s Implementation    twitter.com/RobOusbey                  302                     Google indexes           ...
AJAX: Gawker’s Implementation gawker.com/category/post-title-12345.php                  302     gawker.com/#!12345/post-ti...
AJAX: Gawker’s ImplementationGawker resolved URLs at the ?_escaped_fragment_ stage, and they were indexed withhashbangs.
AJAX: The New Implementation$(nav a).click(function(e) {                      When someone clicks the link…   url = $(this...
history.pushState()     history.replaceState()Very basic .pushState() demo published at http://html5.gingerhost.comSee the...
APIs   Helping us get to the future,    faster.
APIs: Contacting People – Twilio.com$response = $client->request("/v1/Accounts/id123/SMS/Messages",   "POST", array(      ...
APIs: User Datawww.rapleaf.com // code.google.com/apis/socialgraph // qwerly.com
APIs: Qwerly.com
APIs: Google’s APIs Android Rendering API                     Honeycomb API Android Accessibility API                 Near...
APIs: Robots
APIs: Robotshttp://www.youtube.com/watch?v=FxXBUp-4800http://code.google.com/p/rosjava/
SPeeDY
SPDYhttp://www.chromium.org/spdyhttp://www.chromium.org/spdy/spdy-data
Polling   Let’s be honest,    it’s kind of old fashioned.
Polling: Server to Server                                  Anything new?                                  Anything new?   ...
Polling: Publisher / Subscriber                                    1: Anything new?                                 Hub   ...
Polling: Browser to Server                                  Anything new?                                  Anything new?  ...
WebSockets  They’re not safe,    but they’re really effective.
WebSockets: Pusher.com<script src="http://js.pusherapp.com/1.8/pusher.min.js"></script>var pusher = new Pusher(API_KEY);va...
Go and Win    HTML5 + CSS3     Make your site faster & cooler
Go and Win                 Qwerly• Parse your email subscription list• Reach out to the Twitter / Facebook users• Create s...
Go and Win           WebSocketsMake life a lot easier for yourself:     sign up for a Pusher.com account.
Thank you. www.distilled.net  @RobOusbey
Upcoming SlideShare
Loading in...5
×

New Technologies

4,729

Published on

Presented at Distilled's ProSEO (now called 'SearchLove') conference in Boston, May 2011.

The focus was on why new technologies can help you win in the SEO game - and some particularly useful tech that you can start using straight away.

This was also the presentation where I formally announced my own webapp, Linkstant - the instant link alert tool. It's available for you to use at:
http://www.linkstant.com

Feel free to get in touch if you have any particular questions about this presentation.

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

No Downloads
Views
Total Views
4,729
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

New Technologies

  1. 1. Future Technologies @RobOusbey
  2. 2. The Future Where we’re going, we don’t need roads.
  3. 3. Why doyou care?
  4. 4. Why do you care? Build Faster WebsitesExample data via: http://ezlocal.com/blog/post/page-speed-vs-pages-crawled.aspx
  5. 5. Why do you care? First Movers Get Benefits from GoogleRecipes: http://www.google.com/support/webmasters/bin/answer.py?answer=173379Events: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506
  6. 6. Why do you care? First Movers Get LinksAny link building tactic diminishes in effectiveness over time. New technologies are a smart way toattract the interest of the Linkerati.
  7. 7. Why do you care? First Movers Get Linkshttp://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svgSVG Ranking Factors: http://www.andyjamesdavies.com/experiments/svg-two/
  8. 8. HTML5 It’s easy, once you’ve read the directions.
  9. 9. Why do you care? First Movers Get LinksApp launch website at: http://benthebodyguard.com/
  10. 10. HTML 5: Graphic.lyA beautifully presented HTML5 graphic-novel interface, with Frank Miller-esque touches.http://graphic.ly
  11. 11. HTML 5: Mag.Reevoo.ComA weekend hack project to demonstrate some HTML5/CSS3 features.http://mag.reevoo.com
  12. 12. CSS3 Third time lucky.
  13. 13. CSS3: Beautiful Siteshttp://www.zurb.com/playground/sliding-vinyl
  14. 14. CSS3: Text StrokeLots more at: http://www.css3files.com/ andhttp://www.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/
  15. 15. CSS3: Transitioninghttp://media.24ways.org/2009/14/5/index.html
  16. 16. CSS3: New Stuffhttp://webdesignerwall.com/trends/47-amazing-css3-animation-demos
  17. 17. CSS3: 39 Box Shadows, No Good ReasonA sample of the demos available at: http://www.viget.com/uploads/file/boxshadows/Info: http://www.viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows/
  18. 18. AJAX Looks more complicated than it ought to be.
  19. 19. Use jQuery. http://jquery.com/ You can thank me later.
  20. 20. AJAX: The Old Way Sucks www.example.com/shop www.example.com/shop#cameras www.example.com/shop#DVDs www.example.com/shop#laptopsThis sucks: link juice doesn’t go to the correct places.
  21. 21. AJAX: The Interim Way Kind of Sucks www.example.com/shop#!DVDs www.example.com/shop?_escaped_fragment_=DVDsInfo + Demo: http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content
  22. 22. AJAX: Twitter’s Implementation twitter.com/RobOusbey 302 Google indexes the content here. twitter.com/#!/RobOusbey 200 ROBOTS USERS Google translates it to: See the page here. twitter.com/?_escaped_fragment_=/RobOusbey NON-JS USERS Not so much.Why? Why would anyone do this? It really f/#!/ng sucks.
  23. 23. AJAX: Gawker’s Implementation gawker.com/category/post-title-12345.php 302 gawker.com/#!12345/post-title 200 ROBOTS USERS Google translates it to: See the page here. gawker.com/?_escaped_fragment_=12345/post-title 200 NON-US USERS Allows Google to indexRedirects to home page. content here.
  24. 24. AJAX: Gawker’s ImplementationGawker resolved URLs at the ?_escaped_fragment_ stage, and they were indexed withhashbangs.
  25. 25. AJAX: The New Implementation$(nav a).click(function(e) { When someone clicks the link… url = $(this).attr("href"); $.getJSON("content.php", {cid: url, format: json}, function(json) { $.each(json, function(key, value){ … load content in with AJAX … $(key).html(value); }); }); window.history.pushState(object, New Title, url); … change the URL … $(li).removeClass(current); $(a[href="+url+"]).parent().addClass(current); e.preventDefault(); … but don’t refresh the page.}
  26. 26. history.pushState() history.replaceState()Very basic .pushState() demo published at http://html5.gingerhost.comSee the technology in use on any blogspot blog, eg: thesartorialist.blogspot.com/view/sidebar/More info: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
  27. 27. APIs Helping us get to the future, faster.
  28. 28. APIs: Contacting People – Twilio.com$response = $client->request("/v1/Accounts/id123/SMS/Messages", "POST", array( "To" => $cellNumber, "From" => "206-965-9265", "Body" => "Hi $customerName, your order is ready for collection at $location" ));
  29. 29. APIs: User Datawww.rapleaf.com // code.google.com/apis/socialgraph // qwerly.com
  30. 30. APIs: Qwerly.com
  31. 31. APIs: Google’s APIs Android Rendering API Honeycomb API Android Accessibility API Near Field Communications API Android Marketplace API Brain API Buzz API Google eBooks API Latitude API In-App Payments API Translate API Google Shopping API * Google Places API App Engine Pipeline API Blogger Admin API Google Fusion Tables API Google Apps APIs App Engine Task Queue API Google Maps API * Machine Learning Prediction API Google Earth API YouTube Caption API App Engine Full Text Search API YouTube Data API Google Checkout API Google Charts API * Google One Pass: Paywall API * Google Page Speed API Google Tasks API * Android Open Accessory API & Development Kithttp://developer.android.com/guide/topics/usb/adk.htmlhttp://www.google.com/enterprise/prediction/
  32. 32. APIs: Robots
  33. 33. APIs: Robotshttp://www.youtube.com/watch?v=FxXBUp-4800http://code.google.com/p/rosjava/
  34. 34. SPeeDY
  35. 35. SPDYhttp://www.chromium.org/spdyhttp://www.chromium.org/spdy/spdy-data
  36. 36. Polling Let’s be honest, it’s kind of old fashioned.
  37. 37. Polling: Server to Server Anything new? Anything new? Anything new? Publisher Reader Anything new? Anything new? For the love all that is good, YES. Anything new?This type of repeated polling is unnecessary; it puts additional load on thepublisher, and the subscriber has to downloads lots of data that it doesn’t need to.
  38. 38. Polling: Publisher / Subscriber 1: Anything new? Hub 2: I’ll letPublisher you know. Subscriber 3: I’ve got new content! 4: There’s something new!http://code.google.com/p/pubsubhubbub/http://code.google.com/apis/pubsubhubbub/
  39. 39. Polling: Browser to Server Anything new? Anything new? Web Anything new? Web Server Anything new? Browser Anything new? For the love all that is good, YES. Anything new?Examples: Twitter, webmail, etc.In this case, solutions include clever things like long-polling and websockets.
  40. 40. WebSockets They’re not safe, but they’re really effective.
  41. 41. WebSockets: Pusher.com<script src="http://js.pusherapp.com/1.8/pusher.min.js"></script>var pusher = new Pusher(API_KEY);var myChannel = pusher.subscribe(MY_CHANNEL);myChannel.bind(thing-create, function(thing) { alert(A thing was created: + thing.name);});
  42. 42. Go and Win HTML5 + CSS3 Make your site faster & cooler
  43. 43. Go and Win Qwerly• Parse your email subscription list• Reach out to the Twitter / Facebook users• Create some niche-site content
  44. 44. Go and Win WebSocketsMake life a lot easier for yourself: sign up for a Pusher.com account.
  45. 45. Thank you. www.distilled.net @RobOusbey
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×