Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

New Technologies


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:

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

Published in: Technology, News & Politics
  • Be the first to comment

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:
  5. 5. Why do you care? First Movers Get Benefits from GoogleRecipes:
  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 Links Ranking Factors:
  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:
  10. 10. HTML 5: Graphic.lyA beautifully presented HTML5 graphic-novel interface, with Frank Miller-esque touches.
  11. 11. HTML 5: Mag.Reevoo.ComA weekend hack project to demonstrate some HTML5/CSS3 features.
  12. 12. CSS3 Third time lucky.
  13. 13. CSS3: Beautiful Sites
  14. 14. CSS3: Text StrokeLots more at: and
  15. 15. CSS3: Transitioning
  16. 16. CSS3: New Stuff
  17. 17. CSS3: 39 Box Shadows, No Good ReasonA sample of the demos available at:
  18. 18. AJAX Looks more complicated than it ought to be.
  19. 19. Use jQuery. You can thank me later.
  20. 20. AJAX: The Old Way Sucks sucks: link juice doesn’t go to the correct places.
  21. 21. AJAX: The Interim Way Kind of Sucks!DVDs + Demo:
  22. 22. AJAX: Twitter’s Implementation 302 Google indexes the content here.!/RobOusbey 200 ROBOTS USERS Google translates it to: See the page here. NON-JS USERS Not so much.Why? Why would anyone do this? It really f/#!/ng sucks.
  23. 23. AJAX: Gawker’s Implementation 302!12345/post-title 200 ROBOTS USERS Google translates it to: See the page here. 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: info:
  27. 27. APIs Helping us get to the future, faster.
  28. 28. APIs: Contacting People –$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 // //
  30. 30. APIs:
  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 Kit
  32. 32. APIs: Robots
  33. 33. APIs: Robots
  34. 34. SPeeDY
  35. 35. SPDY
  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!
  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:<script src=""></script>var pusher = new Pusher(API_KEY);var myChannel = pusher.subscribe(MY_CHANNEL);myChannel.bind(thing-create, function(thing) { alert(A thing was created: +;});
  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 account.
  45. 45. Thank you. @RobOusbey