iT邦幫忙

0

豐富網頁應用程式實戰經驗大募集,你有什麼精彩的開發經驗嗎?

由於頻寬與網頁開發技術的進步,利用網頁開發出高互動性,充滿影音效果的門檻已經不如以前高。

像是Flash、Silverlight、Ajax等技術,都能開發出具有動畫效果的長條圖、圓餅圖,或是拖拉網頁物件進行互動,甚至是線上影音教學或財會系統,讓網頁用起來就像桌面應用程式一樣。

你曾經用過哪些豐富網頁技術解決問題呢?有什麼好用的現成套件呢?你又用了這些技術來開發什麼呢?有什麼獨門開發、應用技巧或偏方嗎?

本題邀請的實戰專家是劉仲濱先生,由他選出回答得最有參考價值、最精彩的「實戰王」,iT邦小財神將贈送1000元pchome線上購物金給這位獲選的最佳實戰經驗回答者。

另外,實戰專家也將挑選兩位認真回答的邦友,分別致贈IT書籍一本。

本題贈送的認真獎書籍是《極意之道ASP.NET AJAX/Silverlight聖典》。


(本次活動認真獎書籍由微軟贊助)

本題最後回答時間訂於7/18(五),超過該日的回答均不列入評選名單。實戰專家將於7/20日選出「實戰王」,並公佈結果。

各位邦友們,快來亮出你們的實戰經驗吧~

看更多先前的討論...收起先前的討論...
davistai iT邦大師 1 級 ‧ 2008-07-10 10:06:34 檢舉
感覺這幾次實戰經驗大募集的活動,大家都很謹慎,因為不想誤人子弟,是嗎? 不過,既然小財神只是邀大家說說自己的經驗而已,何況有專家評審,他的壓力才大吧?(萬一選得不好,不被'頂金'的邦友給念爆了嗎? 真都沒有好答案,或許只有認真獎,而最佳獎從缺吧??)

所以只要有實驗過的經驗都是可以大家一起分享的嘛!! 這不就是這兒希望讓邦友自由自在的園地嗎??
fishk iT邦大師 1 級 ‧ 2008-07-11 12:32:23 檢舉
很想看看大家有什麼開發經驗與心得.
等有空的時候, 再整理一些曾經參與過的經驗.
fillano iT邦超人 1 級 ‧ 2008-07-11 18:23:23 檢舉
嗯嗯,我也是...

做過兩個案子,雖然用了ajax,但是資料流向主要是單向的,所以也不能算「豐富網頁應用程式」吧?(而且....兩個流向還相反,哈哈。不過完全沒用現成的solution,c/s都從底層coding,也頗有趣。)
jerry640 iT邦新手 1 級 ‧ 2008-07-11 19:10:53 檢舉
這個經驗值不夠,繼續打怪!
小財神 iT邦好手 1 級 ‧ 2008-07-21 09:12:10 檢舉
豐富網頁應用程式實戰經驗大募集由fillano奪下實戰王寶座,在此恭禧fillano。

實戰專家劉仲濱認為fillano得獎的理由是:

舉例類型有二類,並將自己親身做過的案子把內容描述較為完整外,從業主的要求到製作過程之重點、到最後為什麼考慮用哪個方式來解決的理由,都有寫上,
除了過程記錄較為流暢外,另一方面也將實際網站連結點貼出,唯獨沒有完整的圖片展示來補充說明系統的精華處。



另外認真獎兩名分別是jamesjan與fishk,我們的實戰專家也給了評選的理由哦,他認為jamesjan:

圖文輔助己能感覺其Ajax系統上的操作方式,也告知所採取技術與工具、開發者應具備哪些基本能力,才能勝任其任務,若能在困難度說明、流程及實戰上多作補充,較可能讓讀者吸取前人經驗,學習到更多。

至於fishk提供的實戰經驗,專家認為:

除了描述製作系統有其特殊與創意應用外,也補上實際連結的內容與畫面,但因在實作與解決系統上並無太大著墨,所以若能完整說明,整篇實戰經驗就能更詳盡。


iT邦小財神在此恭禧三位得獎者,也會儘快發出得獎通知給各位。
davistai iT邦大師 1 級 ‧ 2008-07-21 11:11:05 檢舉
也是值得恭喜之事^_^
jamesjan iT邦高手 1 級 ‧ 2008-07-21 13:31:56 檢舉
就甘心ㄟ ~^o^~
實在是因為時間太趕,說實在的開發系統學習新技術,粉累
但是也是很有趣的一件事,尤其是把困擾多天的寫法解決掉的時候

就如同 fishk 所說,目前站上比較少有人談到開發的經驗
有個想法,在IT Home 部落格上發表,並分享到 ITHelp上
應該是個不錯的作法

上 ITHelp 讓我驅使自己不斷向前

今天看商業周刊專訪周星馳

周星馳以「小強精神」出頭天

套句星爺的話,
做人如果沒夢想,那跟鹹魚有什麽分別?
星爺語錄集
gric iT邦高手 1 級 ‧ 2009-05-31 12:05:58 檢舉
一個不錯參考的問答!
30
fillano
iT邦超人 1 級 ‧ 2008-07-16 12:07:33
最佳解答

自己做過的案子,大概兩個比較有「豐富網頁應用」的味道。

第一個是一個襯衫訂製的網站,用php開發的

因為訂製的流程比較繁複,業主又要求瀏覽及操作的順暢,所以決定用ajax的方式來完成訂製部份的效果。
業主要求的訂製流程,包含了幾個過程:選擇布料、選擇樣式、決定size及特殊需求、配件採購及繡字/卡片等,接下來才確認訂購的內容、下單等等。
每個過程會牽涉到的資料模型複雜度不一,有時是同時有好幾個模型但是因為業主要求要放在同一個頁面操作,而且操作後無須跳轉就能生效,只要還沒下單,都可以隨時回頭改,改的時候原有的選擇狀態都要維持。
所以主要的是用一隻程式來做view,另外一支單獨接收ajax傳來的post資料,把資料寫入session。頁面render之前,會根據session來更新狀態,這樣可以確保與使用者的操作一致。所有頁面跳轉的動作都會先queue住,確定ajax資料送完,session正確建立。
資料模型層不想自己從頭開發,所以借用xoops的xoopsobject跟textsanitizer來做底層的資料模型,這有幾個好處,第一是php是動態型別的語言,用他的資料模型可以自己嚴格定義資料型別並且做檢查;第二是他的textsanitizer可以拿來過濾資料,不過為了使用方便,額外加了類似rail的資料關係操作方法以及後台表單產生器(包裝了jscookmenu、fckeditor以及自己寫的calendar)。view層則用smarty來實現。
其實並沒有花俏的介面,只是因應業主的要求,用ajax讓操作過程順暢,達成需求。

第二個是做基金投資組合建議與試算的軟體

因為考慮到要同時做桌面、網站的需求,所以為了避免做兩次工,全部都用網頁+javascript來做,桌面軟體則另外寫成應用軟體把瀏覽器包在裡面執行,讓資料有一些額外的保護。(不過資料來源都是公開資料,所以也不那麼有保密問題,只是希望桌面軟體的使用者必須依賴這個軟體來取得資料)
最底層的資料來源是用xmlhttprequest,他可以有兩種資料來源,包括遠端與近端,所以可以同時適用於桌面與網站,只要抽換資料來源就可以。
在這個之上主要是用decorator做的一些parser,適當組合以後就可以把資料parse成一致的格式。(資料做過幾次加密,zip及des靠應用軟體來解,base64及csv靠javascript來解,也許網站會另外使用json。桌面軟體的資料更新則是靠包裝瀏覽器的應用軟體來達成。)
之後,只要輸入投資金額,就可以根據建議的投資組合試算出獲利,另外可以根據這個獲利做額外的投資建議與計算。為了讓這裡的表現生動,則用陣列(動作間隔與動作函數構成)來維護動作,用setTimeout做出動態效果。(本來是寫死的,但是怕要求改動態效果,所以乾脆一次解決)
另外有一些動態flash圖表,則用現成open flash chart的解決方案,透過swfobject這個開放原始碼專案來操作。

不是案子的,以前有做好玩的一個isometric地圖,是用javascript跟html做出來的:
http://www.fillano.idv.tw/game.htm

有興趣的話,可以點選上方的「網頁遊戲測試 V0.12 」。(不過我很久沒維護了...最近的更新都在2006)

24
macosorawate
iT邦新手 2 級 ‧ 2008-07-08 12:57:59

我曾經下載過一次微軟網站開發程式.(用C++開發的).有點不明.waTER.0911115854.( macosorawater@pchome.com.tw ). http://www.macosorawater.pchome.com.tw .小禮.Thanks. 11111111 .

看更多先前的回應...收起先前的回應...

給推的人:
如此發言有值得推的價值嗎?

在沙漠中迷路了一星期後的人們
是分不出水或是沙子的

magita iT邦新手 3 級 ‧ 2008-07-10 08:28:02 檢舉

粉少人使用C++開發網頁 所以值得推......

kaiin323 iT邦高手 1 級 ‧ 2008-07-10 19:14:39 檢舉

用C++開發的應該是指該網站開發程式吧......= =

jease iT邦研究生 1 級 ‧ 2008-07-12 08:13:52 檢舉

應該只是消耗點數吧!加上他比較早就先回答了,所以路過的人就順手推一下...

john651216 iT邦研究生 1 級 ‧ 2008-07-17 17:54:41 檢舉

大家是這麼拉

42
魯大
iT邦高手 1 級 ‧ 2008-07-11 10:41:32

在安裝AJAX的元件之後
記得一定要去下載「AjaxControlToolkit」
這裡面已經包含有很多寫好的元件可以使用
以下例舉兩項小弟較為常用的元件做說明

一、AutoCompleteExtender
這個元件是可以搭配「TEXTBOX」使用
可直接藉由你所輸入的字元,連結資料庫做篩選
感覺上就像yahoo首頁上的搜尋
當你輸入幾個字,它就會SHOW出一些字串供你做選擇
不過它是需要寫一些程式做搭配使用的
一般AJAX的書籍上都會有介紹
可以把書上的程式拿來研究做修改成你所需要的

二、CalendarExtender
這個元件是做日期選擇用的,它可以搭配「TEXTBOX」使用
設定好「TagetControlID」,就是指向搭配使用的「TEXTBOX」
在網頁執行時,只要滑鼠點一下搭配的「TEXTBOX」
就會出現一個日曆,點選一下日期,就會在「TEXTBOX」上SHOW出你所選的日期
還可以藉由「Format」這個屬性做日期格式的設定
是個完全不用額外寫程式就可以使用的好元件

AJAX的好用真的不在話下
只不過,若是用AJAX元件所寫的網頁,若是不經過編譯使用
感覺上一開始開啟的時候會等很久
不知是小弟的電腦等級比較差還是..

請教 looney 大

1.AjaxControlToolkit 是 ASP.NET 專有的元件嗎?Java 能用嗎?
2.文末的「編譯」指的是編譯「什麼」?

謝謝

魯大 iT邦高手 1 級 ‧ 2008-07-11 23:59:30 檢舉

我沒有用過java,所以我不知道java是否能用
不過,我記得好像也有ajax for java還是ajax for jsp的書
如果有那或許也是有支援

用asp.net所編寫的網頁一般都是在client端開啟時才會做編譯,這樣會比較慢
若是能夠事先先編譯好,則在開啟時會比較快..

38
fishk
iT邦大師 1 級 ‧ 2008-07-12 01:47:17

提一個曾經參與過的影音專案開發經驗
這是並不是使用Flash、Silverlight、Ajax,但卻包含影音功能.
這個網站第一個特點是使用語音登入
https://www.gofree.tw/Member/audio00.aspx
註冊時重覆錄三次音檔, 以後就可以使用語音登入.
第二個特點是網站中上稿的文字會被轉換為音檔,
所以可以用聽的方式來瞭解網站的內容
http://www.gofree.tw/lp.aspx?ctNode=440&CtUnit=208&BaseDSD=7&mp=3&font=s
http://www.gofree.tw/cp.aspx?xItem=647&ctNode=440&mp=3&font=s
這個專案在開發過程中曾遇到許多困難, 諸如:語音辨識, 文字轉檔, 效能調整.
好不容易才完成一期專案的開發與記者會召開, 後來因為不符成本效益,
公司就沒有繼續參與第二期的專案開發了...

此外, 由於AJAX的風行, 也曾研究過一些整合平台,
其中印象最深刻的是Liferay這個portlet平台
http://www.liferay.com/
Demo畫面如后:

有興趣者可以自行到下列demo網址申請帳號試試
http://demo.liferay.net/web/guest/home

ps.抱歉,先前兩次都因為貼圖不成功,所以刪除重來,希望未來回答也有預覽功能

看更多先前的回應...收起先前的回應...
cfc iT邦新手 3 級 ‧ 2008-07-12 03:29:06 檢舉

語音登入... 如果我不小心嘴巴受傷或者本身有漏風現象、大舌頭者.. 怎辦?
而且就算錄音三次,剛好感冒的會有鼻音問題耶@@"

Liferay看起來真棒!

fishk iT邦大師 1 級 ‧ 2008-07-12 11:57:35 檢舉

可以重錄; 此外系統還是有提供帳號/密碼機制, 補足語音系統無法百分百成功的不足.

cfc iT邦新手 3 級 ‧ 2008-07-13 03:24:17 檢舉

那這套系統的確很讚!
我覺得這用於門禁管理應該比較適合吧 囧

fishk iT邦大師 1 級 ‧ 2008-07-14 10:16:11 檢舉

同樣的技術當然可以用在不同地方, 網站使用語音技術的用意在於提供使用者除了使用文字輸入外, 有另一種選擇.

24
makey
iT邦新手 4 級 ‧ 2008-07-15 09:59:10

我和朋友利用下班之餘,合作設計的網站,所採用的並非最新的
技術,我們只用 FrontPage 、Flash、Javascript來設計。

1.FrontPage:設計網頁,產生html檔,還有影音播放

2.Flash:產品動畫、產品輪撥效果

3.Javascript:功能按鈕效果

伺服器我們選擇網站代管,智邦生活館基本型費用為一年一千,
平均一個月還不到一百。

這網站因產品定位特殊,客戶為一般商家,或想舉辦活動的機關
單位,非一般消費者,所以不考慮購物車,沒有後端資料庫。有
需求或感到興趣的,自然會撥電話,寫Email 來詢問,每月約可
淨利十多萬。

我想,新的技術固然可帶來效率,現今是Web 2.0 的時代,但
回歸本質才是重點,了解到市場與客戶的供給、需求,再來思考
要採用開發的技術,一樣可以創造價值。

http://www.ur.url.tw/

brianc iT邦研究生 1 級 ‧ 2008-07-16 12:14:48 檢舉

每月淨利十多萬是指你們接案子的收入嗎?另外這個網站用Firefox看會亂掉

makey iT邦新手 4 級 ‧ 2008-07-16 15:58:12 檢舉

不是接案子的收入喔,是銷售網站上的產品。
用Firefox瀏覽會亂掉,嗯,多謝您的訊息,我們會測試改進。

laulau iT邦新手 2 級 ‧ 2008-07-16 18:40:21 檢舉

恩 點進去直接看原始碼 = = 酷.....

22
jamesjan
iT邦高手 1 級 ‧ 2008-07-18 11:59:49

都沒有人用過 extjs 嗎?
很多國外大廠都有使用耶,而且是 Open Source的
前身是跟 YUI Boundle 在一起,後來將 YUI 的部份自己改寫成 ext library
成立了目前 extjs 的官網,去看看他的 Demo 站相信你就會愛上他 http://extjs.com/deploy/dev/examples/samples.html

他也提供了一些 IDE 工具 javascript codeinsight 的整合方式(請到他網站找一下就知道了),搭配API及 framework 就可以開發出 Cross-Browser Rich Internet Application Framework,目前他也推出了 Ext GWT 整合到 Java Library,可以供 Java 程式或 Java Bean 使用

之前開發公司內部的簽核系統,用的介面就是這一套
我是用 .Net 做後端搭配 extjs 做前端來開發應用系統

22
alexc
iT邦高手 1 級 ‧ 2008-07-19 00:01:15

因為打從 ASP 1.0 就是使用微軟的開發工具來開發網頁,所以在現在 Web 2.0 的時代,當然也是使用微軟的 ASP.NET 搭配 ASP.NET AJAX Control Toolkit 這個免費且不定期更新的套件,之所以會選用 ASP.NET AJAX Control Toolkit 是因為他有個現成的網站,讓我可以知道說用他所提供的套件可以做到怎樣的效果。除此之外,對於 JavaScript 不熟的人來說,直接套用元件就可以做到一定程度的互動性網頁。當然啦,如果還熟 Silverlight 的話,那網頁介面看去一定更好看。

剛好最近在章立民研究室部落格有看到他們實作的範例,大家可以看看:
為什麼要使用 Ajax Control ToolKit ,能夠享有哪些好處呢?
使用 Ajax Control ToolKit ,能夠製作出哪些 RIA 效果呢? Part 1
使用 Ajax Control ToolKit ,能夠製作出哪些 RIA 效果呢? Part 2

自己在使用 ASP.NET AJAX Control Toolkit 的心得為:

  1. 儘量使用多個元件,這樣子才可以做到與眾不同的網頁
  2. 要知道元件提供了哪些屬性,這樣才不用自己花了很多額外的時間去寫 code behind 或是 JavaScript,到頭來,才發現說原來人家早就已經提供現成的屬性直接套用就好了
  3. 不管熟不熟 JavaScript,都應該要去看 ASP.NET AJAX Control Toolkit 的原始碼,學習人家寫程式的邏輯、方法,增強自己的功力
2
bigmotor
iT邦研究生 5 級 ‧ 2008-07-20 15:06:22

謝謝分享

我要發表回答

立即登入回答