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.

1. Future Technologies
@RobOusbey

2. The Future
Where we’re going,
we don’t need roads.

3. Why do
you care?

4. Why do you care? Build Faster Websites
Example data via: http://ezlocal.com/blog/post/page-speed-vs-pages-crawled.aspx

5. Why do you care? First Movers Get Benefits from Google
Recipes: http://www.google.com/support/webmasters/bin/answer.py?answer=173379
Events: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506

6. Why do you care? First Movers Get Links
Any link building tactic diminishes in effectiveness over time. New technologies are a smart way to
attract the interest of the Linkerati.

7. Why do you care? First Movers Get Links
http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
SVG Ranking Factors: http://www.andyjamesdavies.com/experiments/svg-two/

8. HTML5
It’s easy, once you’ve
read the directions.

9. Why do you care? First Movers Get Links
App launch website at: http://benthebodyguard.com/

10. HTML 5: Graphic.ly
A beautifully presented HTML5 graphic-novel interface, with Frank Miller-esque touches.
http://graphic.ly

11. HTML 5: Mag.Reevoo.Com
A weekend hack project to demonstrate some HTML5/CSS3 features.
http://mag.reevoo.com

12. CSS3
Third time lucky.

13. CSS3: Beautiful Sites
http://www.zurb.com/playground/sliding-vinyl

14. CSS3: Text Stroke
Lots more at: http://www.css3files.com/ and
http://www.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/

15. CSS3: Transitioning
http://media.24ways.org/2009/14/5/index.html

16. CSS3: New Stuff
http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

17. CSS3: 39 Box Shadows, No Good Reason
A 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. AJAX
Looks more complicated
than it ought to be.

19. Use jQuery.
http://jquery.com/
You can thank me later.

20. AJAX: The Old Way Sucks
www.example.com/shop
www.example.com/shop#cameras
www.example.com/shop#DVDs
www.example.com/shop#laptops
This sucks: link juice doesn’t go to the correct places.

21. AJAX: The Interim Way Kind of Sucks
www.example.com/shop#!DVDs
www.example.com/shop?_escaped_fragment_=DVDs
Info + Demo: http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

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. 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 index
Redirects to home page. content here.

24. AJAX: Gawker’s Implementation
Gawker resolved URLs at the ?_escaped_fragment_ stage, and they were indexed with
hashbangs.

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. history.pushState()
history.replaceState()
Very basic .pushState() demo published at http://html5.gingerhost.com
See 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. APIs
Helping us get to the future,
faster.

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. APIs: User Data
www.rapleaf.com // code.google.com/apis/socialgraph // qwerly.com

30. APIs: Qwerly.com

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
http://developer.android.com/guide/topics/usb/adk.html
http://www.google.com/enterprise/prediction/

32. APIs: Robots

33. APIs: Robots
http://www.youtube.com/watch?v=FxXBUp-4800
http://code.google.com/p/rosjava/

34. SPeeDY

35. SPDY
http://www.chromium.org/spdy
http://www.chromium.org/spdy/spdy-data

36. Polling
Let’s be honest,
it’s kind of old fashioned.

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 the
publisher, and the subscriber has to downloads lots of data that it doesn’t need to.

38. Polling: Publisher / Subscriber
1: Anything new?
Hub 2: I’ll let
Publisher 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. 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. WebSockets
They’re not safe,
but they’re really effective.

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. Go and Win
HTML5 + CSS3
Make your site faster & cooler

43. Go and Win
Qwerly
• Parse your email subscription list
• Reach out to the Twitter / Facebook users
• Create some niche-site content

44. Go and Win
WebSockets
Make life a lot easier for yourself:
sign up for a Pusher.com account.

45. Thank you.
www.distilled.net
@RobOusbey