Ajax by Examples 2

3,850 views
3,764 views

Published on

Collections of AJAX Effects in Chinese

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,850
On SlideShare
0
From Embeds
0
Number of Embeds
150
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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.

×