Independent Study Deep Linking for AJAX  Li Wing Ho Andy Statement of Academic Honesty This assignment/paper represents my...
What is Deep Linking <ul><ul><li>URL that point to a specific resource </li></ul></ul><ul><ul><li>bypassing &quot;home&quo...
Why is Deep Linking Important <ul><ul><li>a build-in function of the web, enabling the web pages to be interconnected </li...
Usability! more likely to satisfy users' needs
The Situation of AJAX <ul><ul><li>contents loaded by script in client side </li></ul></ul><ul><ul><li>AJAX intended to do:...
How to Implement Deep Linking for AJAX <ul><li>Concept </li></ul><ul><li>  </li></ul><ul><ul><li>Use of '#' (hash) </li></...
Procedure <ul><ul><li>When the page loaded, check the URL to see if there is any hash value. </li></ul></ul><ul><ul><li>Li...
Use of Libraries <ul><ul><li>SWFAddress  http://www.asual.com/swfaddress/ </li></ul></ul><ul><li>  </li></ul><ul><li>  </l...
SWFAddress <ul><ul><li>originally made for Flash </li></ul></ul><ul><ul><li>supporting both Flash and AJAX </li></ul></ul>...
<ul><li><script type=&quot;text/javascript&quot;> function handleChange(evt){     if (evt.pathNames[0] == 'info'){        ...
Live demo http://blog.onthewings.net/page/deep-linking-for-ajax-demo/SWFAddress/
History, JQuery plug-in <ul><ul><li>plug-ins written for jQuery </li></ul></ul>
<ul><li><script type=&quot;text/javascript&quot;> function pageload(hash) {     if(hash) {         //load some page     } ...
Live demo http://blog.onthewings.net/page/deep-linking-for-ajax-demo/jQuery-History/
Limitation <ul><ul><li>SEO problem  </li></ul></ul><ul><li>  </li></ul><ul><li>workaround: non-AJAX version of the web sit...
 
 
 
 
 
Reference <ul><ul><li>&quot;Deep Linking&quot; in the World Wide Web, W3C http://www.w3.org/2001/tag/doc/deeplinking.html ...
Upcoming SlideShare
Loading in …5
×

Deep Linking For Ajax Presentation

13,480 views
13,710 views

Published on

A presentation of independent study for the course Web 2.0 technologies in City University of Hong Kong.
For more information please go to http://blog.onthewings.net/2009/04/08/deep-linking-for-ajaxdeep-linking-for-ajax/

Published in: Technology, Design
1 Comment
4 Likes
Statistics
Notes
  • Hello,
    Can you expand on 'workaround: non-AJAX version of the web site.' If I'll refer my clients to the ajax view page and will have an identical view page that don't use ajax but no one is enter it, will it resolve the SEO issues?
    Thanks, Yael
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,480
On SlideShare
0
From Embeds
0
Number of Embeds
9,557
Actions
Shares
0
Downloads
45
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Deep Linking For Ajax Presentation

  1. 1. Independent Study Deep Linking for AJAX  Li Wing Ho Andy Statement of Academic Honesty This assignment/paper represents my own work. I have not incorporated into this assignment/paper any unacknowledged material from the work of another person, including papers, words, ideas, information, computer code, data, evidence-organizing principles, or style of presentation taken from the Internet, books, periodicals, or other sources.
  2. 2. What is Deep Linking <ul><ul><li>URL that point to a specific resource </li></ul></ul><ul><ul><li>bypassing &quot;home&quot; or &quot;portal&quot; page </li></ul></ul>
  3. 3. Why is Deep Linking Important <ul><ul><li>a build-in function of the web, enabling the web pages to be interconnected </li></ul></ul><ul><ul><li>bookmarking </li></ul></ul><ul><ul><li>Search engines, SEO </li></ul></ul>
  4. 4. Usability! more likely to satisfy users' needs
  5. 5. The Situation of AJAX <ul><ul><li>contents loaded by script in client side </li></ul></ul><ul><ul><li>AJAX intended to do: to prevent reloading of the whole page </li></ul></ul><ul><ul><li>back button not functional </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>Most of the time it does not matter. </li></ul>
  6. 6. How to Implement Deep Linking for AJAX <ul><li>Concept </li></ul><ul><li>  </li></ul><ul><ul><li>Use of '#' (hash) </li></ul></ul><ul><li>  </li></ul><ul><li>originally used for links that link to the same page. </li></ul><ul><li>  </li></ul><ul><li>For example: </li></ul><ul><li><a href=&quot;#C4&quot;>See also Chapter 4.</a> </li></ul>
  7. 7. Procedure <ul><ul><li>When the page loaded, check the URL to see if there is any hash value. </li></ul></ul><ul><ul><li>Listen for the change of the hash in the navigation bar. </li></ul></ul><ul><ul><li>Append some hash value in the links, like 'http://someURL/#info' </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>Implement by </li></ul><ul><li>window.location.hash </li></ul><ul><li>  </li></ul>
  8. 8. Use of Libraries <ul><ul><li>SWFAddress http://www.asual.com/swfaddress/ </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><ul><li>History, JQuery plug-in http://plugins.jquery.com/project/history   </li></ul></ul>
  9. 9. SWFAddress <ul><ul><li>originally made for Flash </li></ul></ul><ul><ul><li>supporting both Flash and AJAX </li></ul></ul><ul><ul><li>sharing the same core JavaScript to detect and change hash values </li></ul></ul>
  10. 10. <ul><li><script type=&quot;text/javascript&quot;> function handleChange(evt){     if (evt.pathNames[0] == 'info'){         //load info page     } else if (evt.pathNames[0] == 'contact') {         //load contact page     } else {         //load default page     } } SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange); </script> </li></ul>
  11. 11. Live demo http://blog.onthewings.net/page/deep-linking-for-ajax-demo/SWFAddress/
  12. 12. History, JQuery plug-in <ul><ul><li>plug-ins written for jQuery </li></ul></ul>
  13. 13. <ul><li><script type=&quot;text/javascript&quot;> function pageload(hash) {     if(hash) {         //load some page     } else {             //load default page     } } </li></ul><ul><li>$(document).ready(function(){     // Initialize history plugin.     $.history.init(pageload);          $(&quot;a&quot;).live(&quot;click&quot;,function(){         if ($(this).attr(&quot;href&quot;).charAt(0) == '#'){             var hash = $(this).attr(&quot;href&quot;);             hash = hash.replace(/^.*#/, '');             $.history.load(hash);             return false;         } else {             return true;         }     }) }); </script> </li></ul><ul><li>  </li></ul>
  14. 14. Live demo http://blog.onthewings.net/page/deep-linking-for-ajax-demo/jQuery-History/
  15. 15. Limitation <ul><ul><li>SEO problem </li></ul></ul><ul><li>  </li></ul><ul><li>workaround: non-AJAX version of the web site. </li></ul>
  16. 21. Reference <ul><ul><li>&quot;Deep Linking&quot; in the World Wide Web, W3C http://www.w3.org/2001/tag/doc/deeplinking.html </li></ul></ul><ul><ul><li>Deep Linking is Good Linking, useit.com http://www.useit.com/alertbox/20020303.html </li></ul></ul><ul><ul><li>Deep Linking in Flash and AJAX Applications, Christian Cantrell http://weblogs.macromedia.com/cantrell/archives/2005/06/deep_linking_in.html </li></ul></ul><ul><ul><li>Unique URLs - Ajax Patterns http://ajaxpatterns.org/Unique_URLs </li></ul></ul><ul><ul><li>SWFAddress, Asual http://www.asual.com/swfaddress/ </li></ul></ul><ul><ul><li>History, JQuery Plug-in http://plugins.jquery.com/project/history </li></ul></ul><ul><ul><li>Deep Linking, Wikipedia http://en.wikipedia.org/wiki/Deep_linking </li></ul></ul>

×