• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The State of the Web
 

The State of the Web

on

  • 365 views

 

Statistics

Views

Total Views
365
Views on SlideShare
364
Embed Views
1

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

The State of the Web The State of the Web Presentation Transcript

  • The State of the Web@keithpitt
  • Who Am I?
  • Who Am I?
  • Who Am I?Keith
  • Who Am I?KeithKeith Pitt
  • Who Am I?KeithKeith PittMagic Keith
  • Who Am I?KeithKeith PittMagic KeithSteve (long story)
  • First Technical Talk. Be Gentle...
  • First Technical Talk. Be Gentle...(Ok, if you want, rough me up a little)
  • State
  • Web State
  • Web State
  • Web StateWeb Pages/Applications are Stateful
  • Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestate
  • Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestateThe URL is a link to the state
  • Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestateThe URL is a link to the stateSearch engine crawlers take a snapshot of eachpossible state, and indexes them
  • AJAX Breaks This
  • AJAX Breaks ThisSomebody please think of the children!
  • How AJAX breaks state
  • How AJAX breaks stateThe back & forward buttonsno longer behave asexpected
  • How AJAX breaks stateThe back & forward buttonsno longer behave asexpectedLinks no longer workcorrectly
  • How AJAX breaks stateThe back & forward buttonsno longer behave asexpectedLinks no longer workcorrectlySearch engines can nolonger crawl
  • Solution?
  • Hack the # Anchor
  • Hack the # AnchorLots of ugly hacks, especially in IE where we need to use an iFrame.
  • Better Solution?
  • HTML5 History API
  • HTML5 History APIOnly works in Webkit. Firefox 4is supposed to have it.
  • HTML5 History API
  • HTML5 History API2 new methods:
  • HTML5 History API2 new methods: pushState
  • HTML5 History API2 new methods: pushState replaceState
  • HTML5 History API2 new methods: pushState replaceState1 new event on the window object:
  • HTML5 History API2 new methods: pushState replaceState1 new event on the window object: onpopstate
  • pushState// This object is passed to the onpopstate event when it is fired. You// can fill this object with what ever you like.var stateObject = { title: This Awesome Post, createdAt: 2010-10-10, author: keithpitt};// At the moment, most browsers are ignoring this property, so just fill it with// the title of the new page. According to Firefox, they _may_ use it in the// future.var title = This Awesome Post;// The full URL of the new page.var url = /posts/this-awesome-post;history.pushState(stateObject, title, url);
  • replaceStateSame API as pushState, but doesn’t add anything tothe history stack.
  • onpopstate$(window).bind(popstate, function(event) { alert(ZOMG, State Changed!);})
  • JIZZ IN MY PANTS Solution?
  • HTML5 History API ANDThe # Anchor Hack
  • jQuery Address
  • jQuery AddressHTML5 History API where supported. Reverts back to the # Anchor hack. Works in IE6http://www.asual.com/jquery/address/
  • Example$.address.state(/);$.address.change(function(event) { alert(ZOMG, State Changed!);});$.address.value(/some/random/url);
  • Demo
  • @keithpitty
  • @keithpitt
  • Thats It!See more at my blog at keithpitt.com