Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)

4,957 views

Published on

3/23Web2.0創新服務系列講座,Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,957
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)

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

×