Deep Linking For Ajax Presentation
Upcoming SlideShare
Loading in...5
×
 

Deep Linking For Ajax Presentation

on

  • 14,144 views

A presentation of independent study for the course Web 2.0 technologies in City University of Hong Kong. ...

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/

Statistics

Views

Total Views
14,144
Views on SlideShare
6,365
Embed Views
7,779

Actions

Likes
3
Downloads
43
Comments
1

8 Embeds 7,779

http://blog.onthewings.net 7735
http://www.slideshare.net 17
http://translate.googleusercontent.com 14
http://localhost 7
http://webcache.googleusercontent.com 3
http://www.lmodules.com 1
http://www.google.de 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

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…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Deep Linking For Ajax Presentation Deep Linking For Ajax Presentation Presentation Transcript

  • 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.
  • What is Deep Linking
      • URL that point to a specific resource
      • bypassing "home" or "portal" page
  • Why is Deep Linking Important
      • a build-in function of the web, enabling the web pages to be interconnected
      • bookmarking
      • Search engines, SEO
  • Usability! more likely to satisfy users' needs
  • The Situation of AJAX
      • contents loaded by script in client side
      • AJAX intended to do: to prevent reloading of the whole page
      • back button not functional
    •  
    •  
    •  
    • Most of the time it does not matter.
  • How to Implement Deep Linking for AJAX
    • Concept
    •  
      • Use of '#' (hash)
    •  
    • originally used for links that link to the same page.
    •  
    • For example:
    • <a href=&quot;#C4&quot;>See also Chapter 4.</a>
  • Procedure
      • When the page loaded, check the URL to see if there is any hash value.
      • Listen for the change of the hash in the navigation bar.
      • Append some hash value in the links, like 'http://someURL/#info'
    •  
    •  
    • Implement by
    • window.location.hash
    •  
  • Use of Libraries
      • SWFAddress http://www.asual.com/swfaddress/
    •  
    •  
    •  
      • History, JQuery plug-in http://plugins.jquery.com/project/history  
  • SWFAddress
      • originally made for Flash
      • supporting both Flash and AJAX
      • sharing the same core JavaScript to detect and change hash values
    • <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>
  • Live demo http://blog.onthewings.net/page/deep-linking-for-ajax-demo/SWFAddress/
  • History, JQuery plug-in
      • plug-ins written for jQuery
    • <script type=&quot;text/javascript&quot;> function pageload(hash) {     if(hash) {         //load some page     } else {             //load default page     } }
    • $(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>
    •  
  • Live demo http://blog.onthewings.net/page/deep-linking-for-ajax-demo/jQuery-History/
  • Limitation
      • SEO problem
    •  
    • workaround: non-AJAX version of the web site.
  •  
  •  
  •  
  •  
  •  
  • Reference
      • &quot;Deep Linking&quot; in the World Wide Web, W3C http://www.w3.org/2001/tag/doc/deeplinking.html
      • Deep Linking is Good Linking, useit.com http://www.useit.com/alertbox/20020303.html
      • Deep Linking in Flash and AJAX Applications, Christian Cantrell http://weblogs.macromedia.com/cantrell/archives/2005/06/deep_linking_in.html
      • Unique URLs - Ajax Patterns http://ajaxpatterns.org/Unique_URLs
      • SWFAddress, Asual http://www.asual.com/swfaddress/
      • History, JQuery Plug-in http://plugins.jquery.com/project/history
      • Deep Linking, Wikipedia http://en.wikipedia.org/wiki/Deep_linking