由於頻寬與網頁開發技術的進步,利用網頁開發出高互動性,充滿影音效果的門檻已經不如以前高。
像是Flash、Silverlight、Ajax等技術,都能開發出具有動畫效果的長條圖、圓餅圖,或是拖拉網頁物件進行互動,甚至是線上影音教學或財會系統,讓網頁用起來就像桌面應用程式一樣。
你曾經用過哪些豐富網頁技術解決問題呢?有什麼好用的現成套件呢?你又用了這些技術來開發什麼呢?有什麼獨門開發、應用技巧或偏方嗎?
本題邀請的實戰專家是劉仲濱先生,由他選出回答得最有參考價值、最精彩的「實戰王」,iT邦小財神將贈送1000元pchome線上購物金給這位獲選的最佳實戰經驗回答者。
另外,實戰專家也將挑選兩位認真回答的邦友,分別致贈IT書籍一本。
本題贈送的認真獎書籍是《極意之道ASP.NET AJAX/Silverlight聖典》。
(本次活動認真獎書籍由微軟贊助)
本題最後回答時間訂於7/18(五),超過該日的回答均不列入評選名單。實戰專家將於7/20日選出「實戰王」,並公佈結果。
各位邦友們,快來亮出你們的實戰經驗吧~
自己做過的案子,大概兩個比較有「豐富網頁應用」的味道。
第一個是一個襯衫訂製的網站,用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)
我曾經下載過一次微軟網站開發程式.(用C++開發的).有點不明.waTER.0911115854.( macosorawater@pchome.com.tw ). http://www.macosorawater.pchome.com.tw .小禮.Thanks. 11111111 .
在安裝AJAX的元件之後
記得一定要去下載「AjaxControlToolkit」
這裡面已經包含有很多寫好的元件可以使用
以下例舉兩項小弟較為常用的元件做說明
一、AutoCompleteExtender
這個元件是可以搭配「TEXTBOX」使用
可直接藉由你所輸入的字元,連結資料庫做篩選
感覺上就像yahoo首頁上的搜尋
當你輸入幾個字,它就會SHOW出一些字串供你做選擇
不過它是需要寫一些程式做搭配使用的
一般AJAX的書籍上都會有介紹
可以把書上的程式拿來研究做修改成你所需要的
二、CalendarExtender
這個元件是做日期選擇用的,它可以搭配「TEXTBOX」使用
設定好「TagetControlID」,就是指向搭配使用的「TEXTBOX」
在網頁執行時,只要滑鼠點一下搭配的「TEXTBOX」
就會出現一個日曆,點選一下日期,就會在「TEXTBOX」上SHOW出你所選的日期
還可以藉由「Format」這個屬性做日期格式的設定
是個完全不用額外寫程式就可以使用的好元件
AJAX的好用真的不在話下
只不過,若是用AJAX元件所寫的網頁,若是不經過編譯使用
感覺上一開始開啟的時候會等很久
不知是小弟的電腦等級比較差還是..
提一個曾經參與過的影音專案開發經驗
這是並不是使用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.抱歉,先前兩次都因為貼圖不成功,所以刪除重來,希望未來回答也有預覽功能
我和朋友利用下班之餘,合作設計的網站,所採用的並非最新的
技術,我們只用 FrontPage 、Flash、Javascript來設計。
1.FrontPage:設計網頁,產生html檔,還有影音播放
2.Flash:產品動畫、產品輪撥效果
3.Javascript:功能按鈕效果
伺服器我們選擇網站代管,智邦生活館基本型費用為一年一千,
平均一個月還不到一百。
這網站因產品定位特殊,客戶為一般商家,或想舉辦活動的機關
單位,非一般消費者,所以不考慮購物車,沒有後端資料庫。有
需求或感到興趣的,自然會撥電話,寫Email 來詢問,每月約可
淨利十多萬。
我想,新的技術固然可帶來效率,現今是Web 2.0 的時代,但
回歸本質才是重點,了解到市場與客戶的供給、需求,再來思考
要採用開發的技術,一樣可以創造價值。
都沒有人用過 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 做前端來開發應用系統
因為打從 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 的心得為: