• Like
  • Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

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

  • 4,655 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,655
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. AJAX by Examples 馮彥文 tempofeng@yahoo.com 2007/03/23
  • 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. 參與社群活動 • 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. Questions • 選用的執行平台 Windows Linux Others • 選用的程式語言 PHP .net Java Ruby Others 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 4
  • 5. Questions var a = 3; a = function() { return 4; } • a=? 3 4 不知道 以上皆非 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 5
  • 6. Questions • 是否已經開始營運? 是 還在開發 還沒開發 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 6
  • 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. AJAX • Asynchronous Javascript And XML 非同步的 JavaScript 與 XML 網站存取 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 8
  • 9. 傳統 Web Applications 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 9
  • 10. AJAX Web Applications 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 10
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Digg Spy 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 20
  • 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. Continuous Paging 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 22
  • 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. Auto-Complete 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 24
  • 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. Drag & Drop 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 26
  • 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. Slider 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 28
  • 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. Slide Shows 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 30
  • 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. Animations 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 32
  • 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. Tooltips 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 34
  • 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. Fading 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 36
  • 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. Widget 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 38
  • 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. 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. 太多選擇了, 我該怎麼辦? • 先從熟悉的 framework 開始, 一步一步新增 AJAX 功能 • 同時考慮新增 AJAX 功能的優點與缺點 • 分割網站提供不同功能 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 41
  • 42. More !!! • Books 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 42
  • 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. Thank you! 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 44