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

AJAX by Examples
馮彥文
tempofeng@yahoo.com
2007/03/23

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

參與社群活動
• HappyWeb
http://happyweb.tw
新網站相關聚會，每月一次
• Java User Group
http://www.javaworld.com.tw
Java使用者聚會，每月一次
• Ubi-Sunrise
http://groups.google.com.tw/group/Ubi-Sunrise
各式技術討論，每月一次


Questions
• 選用的執行平台
Windows
Linux
Others
• 選用的程式語言
PHP
.net
Java
Ruby
Others


Questions
var a = 3;
a = function() {
return 4;
}

• a=?
3
4
不知道
以上皆非


Questions
• 是否已經開始營運?
是
還在開發
還沒開發


Agenda

• AJAX
• AJAX Platform
Prototype, Dojo, …
GWT, ZK
.net, JSP, JSF, …
• AJAX By Examples


AJAX

• Asynchronous Javascript And XML
非同步的 JavaScript 與 XML 網站存取


傳統 Web Applications


AJAX Web Applications


AJAX Examples

• Yahoo Mail
http://mail.yahoo.com
• 推推王
http://funp.com
• Digg
http://digg.com


AJAX

• Roller skates for the Web ~Bruce Stirling
連續，不中斷的網站體驗
• 提升使用網站的流暢度
• 提供更直覺的操作介面
• 表面功夫
像真實生活的直排輪，不一定適用於所有狀況
• Browser History
• Search Engine 搜尋不到 AJAX 內容
• 瀏覽器的相容性問題


AJAX Frameworks

• Javascript Libraries
Prototype, Dojo, YUI, …
• Javascript Frameworks
GWT, ZK, …
• Web Frameworks
asp.net, java struts, …
• Flash


Javascript Libraries

• Prototype
http://www.prototypejs.org/
以簡化 Javascript 開發為目標
基礎的工具 library, 很多其他的 libraries 都建
構在這上面
• http://script.aculo.us/
提供
• DOM Manipulation
• XHR (AJAX) Functions
• JSON

• Dojo
http://dojotoolkit.org/
包羅萬象的 library/framework, 幾乎甚麼都有提供, 自
成一格
提供
• DOM Manipulation
• Events
• XHR (AJAX) Functions
• Widget Framework
• Offline
• More ….



• YUI (Yahoo UI Libraries)
http://developer.yahoo.com/yui/
以 UI 元件為主, 但同時有工具與網站版型等網
站開發需要的資源
提供
• 一大堆 UI 元件
• CSS頁面板型


Javascript Framework

• GWT (Google Web Toolkit)
http://code.google.com/webtoolkit/
利用 Java 開發 Javascript 應用
• 使用 Java 開發環境
• 物件導向
• 型態檢查
提供
• Client/Server RPC 呼叫
• UI 元件
• 其他很多東西, 足夠做個 Gmail 出來

Web Frameworks

• asp.net Framework
整合 AJAX 元件至原本的 asp.net 原件庫中
保留原來的開發模式
• Java Framework
Struts, JSP, JSF 都有專屬的 AJAX 元件
• 與GWT不同處
GWT是client 端執行 + RPC, 以上
Frameworks 是將UI 元件 AJAX 化


AJAX by Examples

• Digg Spy
• Continuous Paging
• Auto-Complete
• Drag & Drop
• Slider
• Slide Shows
• Animations
• Tooltips
• More


Digg Spy


Digg Spy

• 從天而降的最新資訊
• Demo
http://www.digg.com/spy
• Code
http://leftlogic.com/info/articles/jquery_spy


Continuous Paging


Continuous Paging

• 列表且自動動態讀取尚未讀取到的部份
• Demo
http://mail.yahoo.com.tw
• Code
http://openrico.org/rico/livegrid.page
http://www.extremecomponents.org/extremesi
te/index.jsp


Auto-Complete


Auto-Complete

• 自動完成使用者在 textfield 填入的資訊
• Demo
http://labs.google.com/suggest
• Code
http://demo.script.aculo.us/ajax/autocompleter


Drag & Drop


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/

Slider


Slider

• 透過 slider 篩選資訊
• Demo
http://www.kayak.com/
http://www.backbase.com/demos/travel/
• Code
http://wiki.script.aculo.us/scriptaculous/show/S
liderDemo


Slide Shows


Slide Shows

• Demo
http://www.bubbleshare.com/
• Code
http://billwscott.com/carousel/
http://www.huddletogether.com/projects/lightb
ox2/
http://www.doknowevil.net/litebox


Animations


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


Tooltips


Tooltips

• Demo
http://www.marketwatch.com/
• Code
http://tooltip.crtx.org/


Fading


Fading

• Demo
http://www.tadalist.com/
• Code
http://www.axentric.com/posts/default/7


Widget


Widget

• Demo
http://happyweb.tw
• Code
http://drnicwilliams.com/2006/11/21/diy-
widgets/


Unit Test & Debugging

• Unit Test !!!
JsUnit
• http://www.jsunit.net/
• Debugging
Firebug
• https://addons.mozilla.org/en-
US/firefox/addon/1843


太多選擇了, 我該怎麼辦?

• 先從熟悉的 framework 開始, 一步一步新增
AJAX 功能
• 同時考慮新增 AJAX 功能的優點與缺點
• 分割網站提供不同功能


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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (15)

Destaque

Destaque (16)

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

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

Último

Último (20)

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