• 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.

Like this presentation? Why not share!

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

on

  • 8,823 views

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

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

Statistics

Views

Total Views
8,823
Views on SlideShare
8,819
Embed Views
4

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 4

http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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…
Post Comment
Edit your comment

Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo) Presentation 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