Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ajax by Examples 2

4,029 views

Published on

Collections of AJAX Effects in Chinese

Published in: Technology
  • Be the first to comment

Ajax by Examples 2

  1. 1. AJAX by Examples 馮彥文 [email_address] 2007/03/23
  2. 2. About Me <ul><li>馮彥文 </li></ul><ul><li>Enthusiastic Programmer </li></ul><ul><li>隨想行動科技 , Founder </li></ul><ul><ul><li>www.willmobile.com </li></ul></ul><ul><li>Blog </li></ul><ul><ul><li>http://www.pocketshark.com/blog/page/tempo </li></ul></ul><ul><ul><li>Google: run tempo run </li></ul></ul><ul><li>Javaworld.com.tw </li></ul><ul><ul><li>tempo </li></ul></ul><ul><li>Email </li></ul><ul><ul><li>mailto: [email_address] </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  3. 3. 參與社群活動 <ul><li>HappyWeb </li></ul><ul><ul><li>http://happyweb.tw </li></ul></ul><ul><ul><li>新網站相關聚會,每月一次 </li></ul></ul><ul><li>Java User Group </li></ul><ul><ul><li>http://www.javaworld.com.tw </li></ul></ul><ul><ul><li>Java 使用者聚會,每月一次 </li></ul></ul><ul><li>Ubi-Sunrise </li></ul><ul><ul><li>http://groups.google.com.tw/group/Ubi-Sunrise </li></ul></ul><ul><ul><li>各式技術討論,每月一次 </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  4. 4. Questions <ul><li>選用的執行平台 </li></ul><ul><ul><li>Windows </li></ul></ul><ul><ul><li>Linux </li></ul></ul><ul><ul><li>Others </li></ul></ul><ul><li>選用的程式語言 </li></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>.net </li></ul></ul><ul><ul><li>Java </li></ul></ul><ul><ul><li>Ruby </li></ul></ul><ul><ul><li>Others </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  5. 5. Questions <ul><li>a = ? </li></ul><ul><ul><li>3 </li></ul></ul><ul><ul><li>4 </li></ul></ul><ul><ul><li>不知道 </li></ul></ul><ul><ul><li>以上皆非 </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved. var a = 3; a = function() { return 4; }
  6. 6. Questions <ul><li>是否已經開始營運 ? </li></ul><ul><ul><li>是 </li></ul></ul><ul><ul><li>還在開發 </li></ul></ul><ul><ul><li>還沒開發 </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  7. 7. Agenda <ul><li>AJAX </li></ul><ul><li>AJAX Platform </li></ul><ul><ul><li>Prototype, Dojo, … </li></ul></ul><ul><ul><li>GWT, ZK </li></ul></ul><ul><ul><li>.net, JSP, JSF, … </li></ul></ul><ul><li>AJAX By Examples </li></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  8. 8. AJAX <ul><li>A synchronous J avascript A nd X ML </li></ul><ul><ul><li>非同步的 JavaScript 與 XML 網站存取 </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  9. 9. 傳統 Web Applications 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  10. 10. AJAX Web Applications 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  11. 11. AJAX Examples <ul><li>Yahoo Mail </li></ul><ul><ul><li>http://mail.yahoo.com </li></ul></ul><ul><li>推推王 </li></ul><ul><ul><li>http://funp.com </li></ul></ul><ul><li>Digg </li></ul><ul><ul><li>http://digg.com </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  12. 12. AJAX <ul><li>Roller skates for the Web ~Bruce Stirling </li></ul><ul><ul><li>連續,不中斷的網站體驗 </li></ul></ul><ul><ul><ul><li>提升使用網站的流暢度 </li></ul></ul></ul><ul><ul><ul><li>提供更直覺的操作介面 </li></ul></ul></ul><ul><ul><ul><li>表面功夫 </li></ul></ul></ul><ul><ul><li>像真實生活的直排輪,不一定適用於 所有狀況 </li></ul></ul><ul><ul><ul><li>Browser History </li></ul></ul></ul><ul><ul><ul><li>Search Engine 搜尋不到 AJAX 內容 </li></ul></ul></ul><ul><ul><ul><li>瀏覽器的相容性問題 </li></ul></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  13. 13. AJAX Frameworks <ul><li>Javascript Libraries </li></ul><ul><ul><li>Prototype, Dojo, YUI, … </li></ul></ul><ul><li>Javascript Frameworks </li></ul><ul><ul><li>GWT, ZK, … </li></ul></ul><ul><li>Web Frameworks </li></ul><ul><ul><li>asp.net, java struts, … </li></ul></ul><ul><li>Flash </li></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  14. 14. Javascript Libraries <ul><li>Prototype </li></ul><ul><ul><li>http://www.prototypejs.org/ </li></ul></ul><ul><ul><li>以簡化 Javascript 開發為目標 </li></ul></ul><ul><ul><li>基礎的工具 library, 很多其他的 libraries 都建構在這上面 </li></ul></ul><ul><ul><ul><li>http://script.aculo.us/ </li></ul></ul></ul><ul><ul><li>提供 </li></ul></ul><ul><ul><ul><li>DOM Manipulation </li></ul></ul></ul><ul><ul><ul><li>XHR (AJAX) Functions </li></ul></ul></ul><ul><ul><ul><li>JSON </li></ul></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  15. 15. Javascript Libraries <ul><li>Dojo </li></ul><ul><ul><li>http://dojotoolkit.org/ </li></ul></ul><ul><ul><li>包羅萬象的 library/framework, 幾乎甚麼都有提供 , 自成一格 </li></ul></ul><ul><ul><li>提供 </li></ul></ul><ul><ul><ul><li>DOM Manipulation </li></ul></ul></ul><ul><ul><ul><li>Events </li></ul></ul></ul><ul><ul><ul><li>XHR (AJAX) Functions </li></ul></ul></ul><ul><ul><ul><li>Widget Framework </li></ul></ul></ul><ul><ul><ul><li>Offline </li></ul></ul></ul><ul><ul><ul><li>More …. </li></ul></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  16. 16. Javascript Libraries <ul><li>YUI (Yahoo UI Libraries) </li></ul><ul><ul><li>http://developer.yahoo.com/yui/ </li></ul></ul><ul><ul><li>以 UI 元件為主 , 但同時有工具與網站版型等網站開發需要的資源 </li></ul></ul><ul><ul><li>提供 </li></ul></ul><ul><ul><ul><li>一大堆 UI 元件 </li></ul></ul></ul><ul><ul><ul><li>CSS 頁面板型 </li></ul></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  17. 17. Javascript Framework <ul><li>GWT (Google Web Toolkit) </li></ul><ul><ul><li>http://code.google.com/webtoolkit/ </li></ul></ul><ul><ul><li>利用 Java 開發 Javascript 應用 </li></ul></ul><ul><ul><ul><li>使用 Java 開發環境 </li></ul></ul></ul><ul><ul><ul><li>物件導向 </li></ul></ul></ul><ul><ul><ul><li>型態檢查 </li></ul></ul></ul><ul><ul><li>提供 </li></ul></ul><ul><ul><ul><li>Client/Server RPC 呼叫 </li></ul></ul></ul><ul><ul><ul><li>UI 元件 </li></ul></ul></ul><ul><ul><ul><li>其他很多東西 , 足夠做個 Gmail 出來 </li></ul></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  18. 18. Web Frameworks <ul><li>asp.net Framework </li></ul><ul><ul><li>整合 AJAX 元件至原本的 asp.net 原件庫中 </li></ul></ul><ul><ul><li>保留原來的開發模式 </li></ul></ul><ul><li>Java Framework </li></ul><ul><ul><li>Struts, JSP, JSF 都有專屬的 AJAX 元件 </li></ul></ul><ul><li>與 GWT 不同處 </li></ul><ul><ul><li>GWT 是 client 端執行 + RPC, 以上 Frameworks 是將 UI 元件 AJAX 化 </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  19. 19. AJAX by Examples <ul><li>Digg Spy </li></ul><ul><li>Continuous Paging </li></ul><ul><li>Auto-Complete </li></ul><ul><li>Drag & Drop </li></ul><ul><li>Slider </li></ul><ul><li>Slide Shows </li></ul><ul><li>Animations </li></ul><ul><li>Tooltips </li></ul><ul><li>More </li></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  20. 20. Digg Spy 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  21. 21. Digg Spy <ul><li>從天而降的最新資訊 </li></ul><ul><li>Demo </li></ul><ul><ul><li>http://www.digg.com/spy </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://leftlogic.com/info/articles/jquery_spy </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  22. 22. Continuous Paging 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  23. 23. Continuous Paging <ul><li>列表且自動動態讀取尚未讀取到的部份 </li></ul><ul><li>Demo </li></ul><ul><ul><li>http://mail.yahoo.com.tw </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://openrico.org/rico/livegrid.page </li></ul></ul><ul><ul><li>http://www.extremecomponents.org/extremesite/index.jsp </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  24. 24. Auto-Complete 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  25. 25. Auto-Complete <ul><li>自動完成使用者在 textfield 填入的資訊 </li></ul><ul><li>Demo </li></ul><ul><ul><li>http://labs.google.com/suggest </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://demo.script.aculo.us/ajax/autocompleter </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  26. 26. Drag & Drop 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  27. 27. Drag & Drop <ul><li>網頁上的拖拉功能 </li></ul><ul><li>Demo </li></ul><ul><ul><li>http://www.netvibes.com </li></ul></ul><ul><ul><li>http://projects.backbase.com/RUI/shop.html </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://openrico.org/rico/demos.page?demo=rico_drag_and_drop_custom_draggable </li></ul></ul><ul><ul><li>http://demo.script.aculo.us/shop </li></ul></ul><ul><ul><li>http://www.dojotoolkit.org/ </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  28. 28. Slider 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  29. 29. Slider <ul><li>透過 slider 篩選資訊 </li></ul><ul><li>Demo </li></ul><ul><ul><li>http://www.kayak.com/ </li></ul></ul><ul><ul><li>http://www.backbase.com/demos/travel/ </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://wiki.script.aculo.us/scriptaculous/show/SliderDemo </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  30. 30. Slide Shows 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  31. 31. Slide Shows <ul><li>Demo </li></ul><ul><ul><li>http://www.bubbleshare.com/ </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://billwscott.com/carousel/ </li></ul></ul><ul><ul><li>http://www.huddletogether.com/projects/lightbox2/ </li></ul></ul><ul><ul><li>http://www.doknowevil.net/litebox </li></ul></ul><ul><ul><li>http://www.dojotoolkit.org/ </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  32. 32. Animations 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  33. 33. Animations <ul><li>Demo </li></ul><ul><ul><li>http://www.zvents.com/ </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo </li></ul></ul><ul><ul><li>http://openrico.org/rico/demos.page?demo=rico_effect_position </li></ul></ul><ul><ul><li>http://www.dojotoolkit.org/ </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  34. 34. Tooltips 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  35. 35. Tooltips <ul><li>Demo </li></ul><ul><ul><li>http://www.marketwatch.com/ </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://tooltip.crtx.org/ </li></ul></ul><ul><ul><li>http://www.dojotoolkit.org/ </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  36. 36. Fading 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  37. 37. Fading <ul><li>Demo </li></ul><ul><ul><li>http://www.tadalist.com/ </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://www.axentric.com/posts/default/7 </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  38. 38. Widget 05/26/09 (c) willmobile Inc 2006. All rights reserved.
  39. 39. Widget <ul><li>Demo </li></ul><ul><ul><li>http://happyweb.tw </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>http://drnicwilliams.com/2006/11/21/diy-widgets/ </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  40. 40. Unit Test & Debugging <ul><li>Unit Test !!! </li></ul><ul><ul><li>JsUnit </li></ul></ul><ul><ul><ul><li>http://www.jsunit.net/ </li></ul></ul></ul><ul><li>Debugging </li></ul><ul><ul><li>Firebug </li></ul></ul><ul><ul><ul><li>https://addons.mozilla.org/en-US/firefox/addon/1843 </li></ul></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  41. 41. 太多選擇了 , 我該怎麼辦 ? <ul><li>先從熟悉的 framework 開始 , 一步一步新增 AJAX 功能 </li></ul><ul><li>同時考慮新增 AJAX 功能的優點與缺點 </li></ul><ul><li>分割網站提供不同功能 </li></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  42. 42. More !!! <ul><li>Books </li></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  43. 43. More !!! <ul><li>Tutorials </li></ul><ul><ul><li>http://www.javapassion.com/ajaxcodecamp/ </li></ul></ul><ul><ul><li>http://www.symfony-project.com/askeet </li></ul></ul><ul><li>Lists </li></ul><ul><ul><li>http://ajaxpatterns.org/ </li></ul></ul><ul><ul><li>http://www.dhtmlgoodies.com/index.html </li></ul></ul><ul><ul><li>http://www.dynamicdrive.com/ </li></ul></ul><ul><li>Forums & Blogs </li></ul><ul><ul><li>http://ajaxian.com/ </li></ul></ul><ul><ul><li>http://www.javaworld.com.tw </li></ul></ul>05/26/09 (c) willmobile Inc 2006. All rights reserved.
  44. 44. Thank you! 05/26/09 (c) willmobile Inc 2006. All rights reserved.

×