Post on 06-Dec-2014
description
Future Technologies
@RobOusbey
The Future
Where we’re going,
we don’t need roads.
Why do
you care?
Why do you care? Build Faster Websites
Example data via: http://ezlocal.com/blog/post/page-speed-vs-pages-crawled.aspx
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
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.
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/
HTML5
It’s easy, once you’ve
read the directions.
Why do you care? First Movers Get Links
App launch website at: http://benthebodyguard.com/
HTML 5: Graphic.ly
A beautifully presented HTML5 graphic-novel interface, with Frank Miller-esque touches. http://graphic.ly
HTML 5: Mag.Reevoo.Com
A weekend hack project to demonstrate some HTML5/CSS3 features. http://mag.reevoo.com
CSS3
Third time lucky.
CSS3: Beautiful Sites
http://www.zurb.com/playground/sliding-vinyl
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/
CSS3: Transitioning
http://media.24ways.org/2009/14/5/index.html
CSS3: New Stuff
http://webdesignerwall.com/trends/47-amazing-css3-animation-demos
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/
AJAX
Looks more complicated
than it ought to be.
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.
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
AJAX: Twitter’s Implementation
twitter.com/RobOusbey
twitter.com/#!/RobOusbey
ROBOTS Google translates it to:
twitter.com/?_escaped_fragment_=/RobOusbey USERS
See the page here.
NON-JS USERS Not so much.
302
200
Why? Why would anyone do this? It really f/#!/ng sucks.
Google indexes the content here.
AJAX: Gawker’s Implementation
gawker.com/category/post-title-12345.php
gawker.com/#!12345/post-title
ROBOTS Google translates it to:
gawker.com/?_escaped_fragment_=12345/post-title USERS
See the page here.
NON-US USERS Redirects to home page.
302
200
Allows Google to index content here.
200
Gawker resolved URLs at the ?_escaped_fragment_ stage, and they were indexed with hashbangs.
AJAX: Gawker’s Implementation
AJAX: The New Implementation
When someone clicks the link…
… load content in with AJAX …
… change the URL …
… but don’t refresh the page.
$('nav a').click(function(e) { url = $(this).attr("href"); $.getJSON("content.php", {cid: url, format: 'json'}, function(json) { $.each(json, function(key, value){ $(key).html(value); }); }); window.history.pushState('object', 'New Title', url); $('li').removeClass('current'); $('a[href="'+url+'"]').parent().addClass('current'); e.preventDefault(); }
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
APIs
Helping us get to the future,
faster.
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"
)
);
APIs: User Data
www.rapleaf.com // code.google.com/apis/socialgraph // qwerly.com
APIs: Qwerly.com
APIs: Google’s APIs
Android Rendering API
Android Accessibility API
Android Marketplace API
Buzz API
Latitude API
Translate API
* Google Places API
Blogger Admin API
Google Apps APIs
Google Maps API
Google Earth API
App Engine Full Text Search API
Google Checkout API
* Google One Pass: Paywall API
Google Tasks API
Honeycomb API
Near Field Communications API
Brain API
Google eBooks API
In-App Payments API
Google Shopping API
App Engine Pipeline API
Google Fusion Tables API
App Engine Task Queue API
* Machine Learning Prediction API
YouTube Caption API
YouTube Data API
Google Charts API
* Google Page Speed API
* Android Open Accessory API & Development Kit
http://developer.android.com/guide/topics/usb/adk.html http://www.google.com/enterprise/prediction/
APIs: Robots
APIs: Robots
http://www.youtube.com/watch?v=FxXBUp-4800 http://code.google.com/p/rosjava/
SPeeDY
SPDY
http://www.chromium.org/spdy http://www.chromium.org/spdy/spdy-data
Let’s be honest,
it’s kind of old fashioned.
Polling
Polling: Server to Server
Publisher Reader
Anything new?
Anything new?
Anything new?
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.
Polling: Publisher / Subscriber
Publisher Subscriber
1: Anything new?
Hub 2: I’ll let you know.
3: I’ve got new content! 4: There’s
something new!
http://code.google.com/p/pubsubhubbub/ http://code.google.com/apis/pubsubhubbub/
Polling: Browser to Server
Web Server
Web Browser
Anything new?
Anything new?
Anything new?
Anything new?
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.
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'); var myChannel = pusher.subscribe('MY_CHANNEL'); myChannel.bind('thing-create', function(thing) { alert('A thing was created: ' + thing.name); });
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 some niche-site content
Go and Win
WebSockets
Make life a lot easier for yourself:
sign up for a Pusher.com account.
Thank you.
www.distilled.net
@RobOusbey