Ajax大賽第二輪公告

Ajax大賽第二輪公告

一.評分標準及結果

代碼的質量                        

Web標準的符合程度          

作品的創意                        

作品的複雜程度                 

作品的可用性的質量

 

一等獎:何鑫   800元書

二等獎:王嘉  金錦雲   600元書

三等獎:谷祖林  趙立國 刁黎雅 何進 蘇維斯 白冬立 陶達其 朱晟昊  500元書

 

名次和分數如下:

姓名        分數    名次

何鑫        70      1

王嘉        58      2

金錦雲      57      3

谷祖林      55      4(並列)

趙立國      55      4(並列)

刁黎雅      50      6

何進        49      7

蘇維斯      46      8

白冬立      45      9

陶達其      42      10

朱晟昊      37      11

 

二.作品點評

一等獎何鑫作品:鑫鋒五子棋

李錕:

a) 評分

代碼的質量                  4

Web標準的符合程度           5

作品的創意                  5

作品的複雜程度                  5

作品的可用性的質量           5

b) 點評

這是一個用來展示Ajax優點的極好的例子。

Jetty 5.1.8上部署很順利。作品沒有任何可感覺到的bug,在IEFirefox下運行均完全正常,功能考慮也很周到,界面佈局很清爽,使用體驗非常流暢。唯一缺憾是智能太低,人機對戰很容易把機器搞定。然而在如此短的時間做出這樣產品級的作品,實屬不易,可謂瑕不掩瑜。另外值得一提的還有作品的文檔——用戶手冊寫的非常好,雖然文檔的質量這次並沒有作爲評分標準之一。建議評爲一等獎。

 

趙澤欣:

a) 評分

代碼的質量                  4

Web標準的符合程度           4

作品的創意                  5

作品的複雜程度                  5

作品的可用性的質量           4

b) 點評

優秀的Ajax參賽作品,利用遊戲很好的展示了Ajax的應用方式。看到demo的時候讓我感覺很驚喜。

 

代碼質量很高,展示了參賽者雄厚的技術基礎。在各主流瀏覽器中都運行良好,參賽者對XMLHttpRequest/CSS/DOMAjax技術的使用很純熟,JSON/XML等數據格式也很熟悉。

 

在使用感受上,畫面精美,提供了人機對戰/玩家對戰兩種遊戲模式,同時還支持在線聊天,接近了產品級的水平。玩家對戰使用很流暢,我發現的唯一一個缺憾就是參賽者使用一個窗口關閉的hack來退出遊戲,而Firefox不支持該hack,導致使用上有一些疑惑。在測試人機對戰時,則感覺電腦邏輯處理略有些慢。

 

我只有少量的一些建議:

*可以將部分JavaScript代碼引入Prototype/Dojo等類庫適當的做一些對象封裝,這樣JS代碼將更爲整潔。

*html代碼中有少量的大寫標籤,另外混雜了重複的css定義,建議可以從html中分離出來。

 

暇不掩瑜,參賽作品整體而言很成功。

 

莊表偉:

a)    評分

代碼的質量                  4

Web標準的符合程度           5

作品的創意                  5

作品的複雜程度                  5

作品的可用性的質量           5

b)    點評

何鑫的作品,令人印象非常深刻,這是一個令人讚歎的Ajax應用,這樣的作品被評爲一等獎,是當之無愧的。

Resin中不能正確部署,但是在Tomcat 4.1下,就完全沒有問題。

啓動以後,我開了兩個窗口,一個IE 6,一個FireFox 1.5,然後在兩個窗口之間切換,下棋,操作都非常都順暢,完全感覺不到這是一個瀏覽器裏的應用。

更加出色的是,他還實現了人機對戰的部分,一不小心,我還輸了一盤。這是一個幾乎沒有bug的程序,除了一個小問題,當我第二次換了一個名字登錄的時候,看到了上一局的另外兩個玩家的對話記錄。

在看他的源代碼,也是非常的漂亮,乾乾淨淨,清清楚楚,只有一個小問題,在每個程序頭的版權聲明前的文件名,忘記改過來了~~~

 

二等獎王嘉作品:Ajax 考試系統

 

李錕:

a) 評分

代碼的質量                         4

Web標準的符合程度           5

作品的創意                         3

作品的複雜程度                  3

作品的可用性的質量           4

b) 點評

這是一個簡明扼要的Ajax應用,很容易稍加修改用在在線答題的場合。目前的功能還比較簡單,建議多蒐集一些需求,對現有功能加以擴充,可以發展爲一個很有實用價值的在線答題系統。

 

 

趙澤欣:

a) 評分

代碼的質量                         4

Web標準的符合程度           4

作品的創意                         3

作品的複雜程度                  3

作品的可用性的質量           4

b) 點評

小巧精緻的參賽作品,即體現了Ajax 的異步應用的特性又包含了Ajax技術各組成部分的內容。

 

整體代碼結構清晰,質量較高,一個疑問就是代碼

<body οnlοad="createXMLHttpRequest()">

中,這裏的onload註冊事件似乎有些多餘。因爲 startExam() 函數會再次調用 createXMLHttpRequest() 函數。

 

Web標準支持優良,在主流瀏覽器中表現一致。不過建議javascript代碼和CSS樣式單能抽析出來,作爲分離的外連文件鏈入。另外主頁面佈局也不妨嘗試將使用Table修改爲CSS佈局。

 

 

莊表偉:

a)    評分

代碼的質量                         5

Web標準的符合程度           5

作品的創意                         4

作品的複雜程度                  3

作品的可用性的質量           4

b)    點評

這是一個相當乾淨的demo,一看就能懂,用起來也很順手。文檔清楚,註釋也很明白,在IEFireFoxOpera裏都能夠正確都運行。略微遺憾的是,相比其他的參賽作品,不夠複雜。而且每一道試題需要一個XML文件,而不是所有的試題放在一個XML文件,出題的順序還必須寫死在代碼裏,無法做到隨機出題。這些都是可以進一步改進的地方。

 

二等獎金錦雲作品:JSPackager

李錕:

a) 評分

代碼的質量                         5

Web標準的符合程度           5

作品的創意                         3

作品的複雜程度                  5

作品的可用性的質量           3

b) 點評

這是一個很有用的開發包,解決了目前JavaScript語言1.x版本中一個主要的問題:不支持package(在JavaScript語言2.0版本中將會加入這個支持)。對於開發大型的Ajax應用非常有價值。代碼寫的很清爽,質量很高。可以使用這個開發包來開發各種的UI組件,作者也提供了一些展示。不過,這個開發包本身與Ajax並沒有很直接的關係,因此作品作爲一個完整應用(大賽第二輪希望參賽者提交一個完整的應用,至少也是一個使用了Ajax功能的UI組件)的可用性方面無法得到較高的分數。

 

 

趙澤欣:

a) 評分

代碼的質量                      4

Web標準的符合程度           3

作品的創意                      3

作品的複雜程度                  3

作品的可用性的質量           3

b) 點評

package/Namespace 管理是 JavaScript 缺乏的一個重要語言特性。所以本參賽作品是一個較有深度的嘗試。

 

參賽者借鑑了 Prototype/Dojo 這些著名JS類庫框架的一些思想和代碼組織方式,同時也有自己的擴展,javascript代碼質量優良,註釋清晰,水平較高。但是感覺邏輯略顯複雜,同時和dojopackage管理形式有些雷同,新意上略顯不足。

 

JSPackager封裝得不錯,用戶使用還是比較簡單的。但對腳本類庫集成方面的擴展性有待優化,如果要集成第三方類庫,__$package.js 文件的定製比較麻煩。另外腳本相互依賴關係的設定也存有邏輯上的隱患。如果一個第三方類庫需要使用Prototype1.5.x版本,另一個第三方類庫需要Prototype 1.3.x 版本。而在web頁面中恰好同時需要同時使用兩個第三方類庫,那麼兩個版本的Prototype.js將會被加載。這仍然可能導致js變量環境污染。

 

參賽作品質量較高,同時參賽者將作品開源化的努力都值得鼓勵。

 

莊表偉:

a) 評分

代碼的質量                      5

Web標準的符合程度           4

作品的創意                      3

作品的複雜程度                  4

作品的可用性的質量           4

b) 點評

我是這麼理解這個作品的,他由兩部分組成,一部分是這個JSPackge,另一部分是介紹JSPackage的這個網站。

JSPackage是一個lib,介紹的網站是一個簡單的ajax特性演示的網站。整個作品的代碼質量都相當不錯,但是在HTML校驗方面有些問題。

創意這個方面,最難評價,因爲已經有不少JS包管理的類庫了,但是我認爲好的基礎類庫(尤其是Open Source的類庫),永遠都是需要的,不必擔心重複發明輪子這種事情,特此鼓勵。

 

 

三等獎谷祖林作品:彪哥1.1

 

李錕:

a) 評分

代碼的質量                         4

Web標準的符合程度           5

作品的創意                         4

作品的複雜程度                  3

作品的可用性的質量           3

b) 點評

可以作爲一個Ajax組件開發的例子來研究。

因爲採用符合標準的開發方式,並且基於成熟的組件庫Prototype做開發,因此在IEFirefox瀏覽器上獲得了完全一致的使用體驗。一個成熟的Grid組件操作非常複雜,特別是完全模擬ExcelGrid組件。這類組件一般是給進行大規模錄入的人員使用的,這類人員一般只使用鍵盤來進行快速的錄入,因此對於鍵盤的完善支持非常重要。在這方面,作品有所欠缺,例如,

既然支持Enter鍵允許向下移動光標,爲何不支持某個鍵允許向上移動光標,還有支持Esc鍵使光標回到初始位置。上下左右箭頭鍵也應該支持。

還有跨行/跨列粘帖-拷貝的功能也可以考慮加入進來。

 

 

趙澤欣:

a) 評分

代碼的質量                         4

Web標準的符合程度           4

作品的創意                         4

作品的複雜程度                  3

作品的可用性的質量           3

b) 點評

Grid web開發中很常用但最複雜的一個控件,參賽作品是一個值得鼓勵的嘗試。

Tab鍵橫向移動光標,Enter鍵縱向移動光標這樣模擬Excel的行爲對於基於WEB的類MIS系統,確實是非常實用的。

參賽者經驗較爲豐富,js代碼功底不錯,引入了Prototype.js類庫並有比較熟練的應用。但js中較多的事件註冊可能導致IE的內存泄露問題,建議使用 Prototype.js 提供的事件處理機制,同時可以對JS代碼做一下對象封裝。另外建議jscss代碼獨立出來,在HTML中以外連形式鏈入。

建議在使用頁面提供較爲清晰的說明,比如 Insert 鍵是新增一行,但如果光標在某個cell中,那麼 Insert 鍵的行爲就沒有捕獲到。建議可以改善一下設計,比如給cell也註冊Insert鍵的事件處理,但將轉發給grid處理。Delete鍵刪除最後一行的設計可以再權衡一下,建議至少給用戶提供確認提示,因爲如果誤刪的話無法恢復。

參賽作品給人眼前一亮的感覺,如果能提供更豐富的功能,更友好的設計,將會是一個優秀的作品。

 

 

莊表偉:

a) 評分

代碼的質量                         3

Web標準的符合程度           5

作品的創意                         3

作品的複雜程度                  3

作品的可用性的質量           4

b) 點評

Ajax應用要能夠得到大面積的推廣,成熟的Web組件是必不可少的一部分,而這其中,Grid又是Web組件中必不可少的一部分。但是,這個“彪哥”還是有不少bug,舉例如下:

不能刪除最後一行;

打開表格的對話框在選擇表格之後沒有馬上關閉,而且在FireFox中會出現橫向的滾動條。

希望能夠做得更好!

三等獎趙立國作品:搜索傳奇

 

李錕:

a) 評分

代碼的質量                         4

Web標準的符合程度           3

作品的創意                         5

作品的複雜程度                  5

作品的可用性的質量           3

b) 點評

這是一個非常有價值的高度集成化的搜索系統。所有的操作全部在一個頁面中完成,除了搜索結果外,其餘的信息全部使用可拖拽的DIV來顯示。在可用性方面有一個問題是,新打開的DIV窗口顯示在已經打開的窗口之下,應該按照桌面應用的使用習慣顯示在已經打開的窗口之上。此外系統在Firefox中無法正常使用,影響到了作品的可用性。                                                                     

 

 

趙澤欣:

a) 評分

代碼的質量                     4

Web標準的符合程度           3

作品的創意                      3

作品的複雜程度                  4

作品的可用性的質量           3

b) 點評

代碼質量不錯,參賽者在Web開發方面比較熟練。

 

我在 IE7 Firefox 1.5 都未能完全通過測試,html代碼中 layout 部分還有大量table的使用,建議轉換爲css佈局。另外css js 都混合在HTML中,建議可以分離出來。

 

作品有一定的複雜度,但可用性方面有不少可以改善的設計,比如:

* UI 不直觀,不能馬上明白系統的用途與使用方式

* 部分操作不友好,比如數據更新後一定要手動點擊“更新”按鈕刷新頁面,而這是Ajax適用的場合。

 

參賽者提供了詳細的文檔和demo,態度很好。

 

莊表偉:

a) 評分

代碼的質量                     4

Web標準的符合程度           3

作品的創意                      4

作品的複雜程度                  4

作品的可用性的質量           3

b) 點評

有一個相當不錯的使用說明。因爲作者提供了演示的地址,就直接過去看了。FireFox下只能看到那個快速導航。在IE6下能夠正確顯示出來。但是在拖拽窗口的時候,還有一些bug,有時候只能夠往一個方向拖拽。在使用過程中出現了好些小窗口,互相重疊,並不舒服。考慮到作者主要想演示Ajax的特性,所以能夠理解。

作爲一個互動搜索的作品,創意還是不錯的。

查看代碼,發現代碼的質量還是不錯的,但是在tabContent目錄下,有3gentertainmentfavorites9個目錄,每一個目錄裏,都有不少類似的ASPXCS代碼,說明在歸併重複代碼方面,做得還不夠好。

如果能夠通過重構去掉重複代碼的話,這個項目不能算是非常複雜。

從可用性而言,還有待進一步提高。舉一個小例子:有些窗口有關閉按鈕,有些沒有,最大化和最小化按鈕的使用與普通的窗口又有所不同,令人迷惑。

 

三等獎刁黎雅作品: 超級數據查詢

李錕:

a) 評分

代碼的質量                         4

Web標準的符合程度           5

作品的創意                         4

作品的複雜程度                  3

作品的可用性的質量           4

b) 點評

作品很好的實現了數據的方便的展示,頁面上各個組件之間的聯動做得很好,同時可以以多種方式進行查詢(日期選擇組件、滑塊、排序、篩選),可用性較好。

 

趙澤欣:

a) 評分

代碼的質量                     3

Web標準的符合程度           3

作品的創意                      3

作品的複雜程度                  3

作品的可用性的質量           3

b) 點評

聯動select控件是Ajax的最經典應用,參賽作品中的聯動select實現得很成功。

Firefox1.5上, 左側[查詢條件]部分的顯示有一些異常。CSS上還是沿用傳統的Table佈局,建議可以嘗試一下CSS layout佈局。

參賽者的js都爲自己編寫,精神可嘉。從Javascript代碼中也可看出,參賽者應用了js的面向對象編程。這是一個正確的嘗試,但感覺經驗還不夠豐富,代碼較爲混亂。

猜測參賽作品應該也是參賽者工作中的項目內容,在真實項目中,不妨可以引入prototype或者dojo這些類庫作爲基礎,將javascript代碼整理,適當的進行對象封裝。

整個搜索界面較爲清晰,滑標日期選擇器有新意,二次搜索控制器對用戶再細緻檢索數據應該也很有幫助。兩個建議就是

* 設定了選擇條件後加載檢索數據時,能提供一個 loading 狀態提示。

* 如果沒有檢索數據,建議不要用 alert 來彈出信息。

另外,參賽者的態度很好,代碼有詳細的註釋,同時提供了豐富的說明文檔和製作精美的demo

 

莊表偉:

a) 評分

代碼的質量                     3

Web標準的符合程度           2

作品的創意                      2

作品的複雜程度                  4

作品的可用性的質量           4

b) 點評

代碼與作品質量比較一般。有一些小bug,在多選查詢與查詢條件同時出現時,查詢條件的含義不清。多選查詢的操作,當CheckBox被取消之後,有時還能夠多選查詢。查詢條件選回到“沒有”時,會報連接出錯。HTML校驗有42處錯誤。創意也只能算作平常。

複雜度比較高,多種查詢條件的組合,比較有實用價值。從可用性而言,增加一個“search”按鈕,會少很多bug,也會更加容易操作。

三等獎何進作品:基於Ajax的在線音樂播放器

 

李錕:

a)    評分

代碼的質量                         4

Web標準的符合程度           4

作品的創意                         5

作品的複雜程度                  4

作品的可用性的質量           3

b)    點評

這是一個基本的在線音樂播放器,界面模仿了常見的媒體播放器的界面,利用Ajax來加載歌詞和歌曲列表。展現了Ajax應用的一個重要類別——One Page應用,代表着Ajax逐漸蠶食桌面應用領地的趨勢。很遺憾作品由於使用了微軟Media PlayerActiveX控件來播放音樂,因此無法在Firefox上使用,這個問題影響了作品的可用性。

 

趙澤欣:

a) 評分

代碼的質量                      3

Web標準的符合程度           2

作品的創意                      3

作品的複雜程度                  4

作品的可用性的質量           3

b) 點評

後臺java代碼提供不多,從Servlet代碼來看,質量一般,使用了大量的System.out語句。

 

可以看出參賽者的JavaScript功底不錯,使用了Prototype.js和一些其他小工具庫,但有一些缺憾:

* 不是很有必要重新封裝自己的XMLHttpRequest調用。

* player.js 如果封裝成對象,代碼會更整潔,使用起來會更友好。

* 處理xml數據時使用ActiveX(MSXML2.DOMDocument),所以導致只適用於IE的情況。建議可以直接在Servlet中設置正確的HttpHeader輸出xml,然後在js中獲取 XMLHttpRequest.getResponseXML,然後用w3c的標準DOM方法處理返回的數據

 

應用性方面, 界面很精緻。播放列表的設計模擬本地文件選擇框的設計,比較友好。提供字幕的滾動顯示感覺也不錯。可以建議的就是,MSMediaPlayer ActiveX插件功能很強大,支持時間線的控制,所以如果歌詞字幕的顯示和音樂能實現同步的話,會給作品帶來更大亮點。

 

 

莊表偉:

a) 評分

代碼的質量                      2

Web標準的符合程度           2

作品的創意                      4

作品的複雜程度                  4

作品的可用性的質量           2

 

b) 點評

不太能夠理解作者只提供部分代碼的思路。一個不能在我自己的機器上成功跑起來的作品,他的質量就很難評價了。

Web標準的符合程度很低,W3CHTML校驗,有58error。作品的創意不錯,尤其是模擬Open File的對話框,令人印象深刻。

作者說:“目前在IE下順利測試通過,FF存在一些問題”

但是在我的IE6裏,也有JavaScript的報錯,在FF下完全不能使用,而不是存在一些問題。所以,可用性也是相當低的。

 

三等獎蘇維斯作品:影音在線系統

 

李錕:

a) 評分

代碼的質量                         4

Web標準的符合程度           5

作品的創意                         3

作品的複雜程度                  3

作品的可用性的質量           4

b) 點評

一個具有Ajax界面的在線影音播放系統,符合Web標準,因此在IEFirefox上都可以正常運行。所有的交互都在同一個頁面中完成,用DIV取代了彈出式窗口,用戶體驗更加流暢。創意上沒有太多亮點,算是一箇中規中矩的Ajax應用。

 

 

趙澤欣:

a) 評分

代碼的質量                     3

Web標準的符合程度           3

作品的創意                      2

作品的複雜程度                  3

作品的可用性的質量           3

b) 點評

參賽作品較爲龐大,但其中參賽的基於Ajax的部分主要在電影圖片和電影詳細信息的(分頁)加載這兩個方面。這樣的應用也是Ajax的典型應用方式。

 

主流瀏覽器上都能通過測試,在瀏覽器兼容方面做得不錯。頁面基本使用table佈局,色彩的定義在固定在td中。如果善用CSS可以頁面可以調整得更爲漂亮,同時靈活性和可維護性上會有不少提高。另外很多inline形式的js散佈在頁面中,比如圖片的onmouseover效果的事件註冊;html代碼中有些標籤屬性使用了大寫或者沒有引號。這些小的細節不妨調整一下。

 

由於頁面較爲粗糙,用戶體驗上效果一般。電影詳細信息彈出層色調和站點整體風格不太符合,因爲彈出層較寬,所以在1024x768的屏幕分辨率下時常會擠出屏幕外。雖然參賽者細心的提供了拖動功能,不過如果能根據屏幕寬度判斷使得彈出層自動向左偏移以避免滾動條的出現,應用起來會更流暢。

 

 

莊表偉:

a) 評分

代碼的質量                     3

Web標準的符合程度           3

作品的創意                      2

作品的複雜程度                  2

作品的可用性的質量           3

b) 點評

這是所有的作品中最龐大的一個,136ASP12JS6HTML14CSS。這爲我們的評分工作帶了了相當大的工作量。還好,從修改日期我們可以猜測出,作者爲了參賽,大概只修改了其中的18個文件,而其餘的代碼都是原本就有的。而且,按照作者的說法:“其作了一次大改動,把頁面徹底ajax化了”,但是能夠找到的2006年修改的JS文件,只有3個,其中dom-drag.js還是來自於“www.youngpup.net”的。其餘的兩個文件,myadd.js一眼可以看出是作者增加的,common.js也相當簡單。而且代碼的質量並不算高,變量、函數的命名也不夠規範。

看着其餘的ASP文件,很難分辨出哪些是原來的代碼,哪些是作者修改過的代碼,所以只能看執行的效果了。

一句話,用起來不是很方便,使用體驗一般。

值得提出表揚的是,作者的系統基本上沒有bug,而且做程序的態度相當的認真。

三等獎白冬立作品:XMS

 

李錕:

a) 評分

代碼的質量                         4

Web標準的符合程度           5

作品的創意                         3

作品的複雜程度                  3

作品的可用性的質量           1

b) 點評

系統使用起來不夠直觀,同時缺乏必要的使用說明。新聞信息中添加了欄目後,再次打開新聞信息無法直接顯示添加的欄目,而要點擊了某個欄目後纔會出現添加的欄目,讓人摸不到頭腦。展開某一級欄目後,其子欄目顯示位置與父欄目處於相同級別,顯然是一個bug。同時展開的欄目也無法重新收起。由於作品的完成度很低,可用性也就無從談起了。

 

 

趙澤欣:

a) 評分

代碼的質量                      3

Web標準的符合程度           3

作品的創意                      2

作品的複雜程度                  2

作品的可用性的質量           2

 

b) 點評

代碼基本工整,略顯粗糙。

 

可以通過 IE7 Firefox 1.5 測試,但使用的domfunc.js類庫通過增強Firefox的對象來兼容ie

jscript私有語法和特性。建議還是遵循W3c dom規範。

 

在可用性方面,因爲很多功能尚未完成,使用體驗比較糟糕,一些建議就是:

* 配置默認的webcome-file,或者一個簡單的index.html進行轉向。

* 登錄界面對鍵盤支持不好,必須鼠標點擊‘登錄’按鈕方能登錄。

 

 

莊表偉:

a) 評分

代碼的質量                      4

Web標準的符合程度           5

作品的創意                      3

作品的複雜程度                  3

作品的可用性的質量           2

 

b) 點評

使用起來,相當的暈,不知道能夠用這個XMS做些什麼。當然,界面上有區分欄目和文章,但是欄目只能添加,不能修改、刪除。從XML的數據結構來看,這些欄目是支持無限級別的子欄目的,但是在顯示的效果上,卻只分出了兩級。

文章管理就更加奇怪,因爲他表現出來的效果,是可以管理欄目,而不能管理文章,無論是增加、修改還是刪除。

可以看得出作者在努力向Web標準靠攏,這方面值得鼓勵。

但是從創意而言,我認爲並不成功,如果大批量的數據都是以這樣的XML文件方式進行管理的話,相信效率會相當低。

作品的複雜程度和可用性,都不算高,尤其是可用性,只能說bug多多,很難使用。

三等獎陶達其作品:動股 0.02

 

李錕:

a) 評分

代碼的質量                         3

Web標準的符合程度           5

作品的創意                         3

作品的複雜程度                  4

作品的可用性的質量           2

b) 點評

從整個系統(客戶端、服務器端)而言,目前代碼中有不少bug,作品中存在的bug對於可用性的影響很大。而作者本人寄來的demo,裏面關於展示應用本身功能的內容很少,可以說是一次完全失敗的演示。在後臺通過對圖片進行切割,然後比較小圖片的hash值來確定圖片哪些部分發生了變化,將需要更新的圖片區域降到最小,這是一個相當巧妙的設計。然而這些功能與Ajax技術無關,Ajax代碼本身的複雜度很低,我爲作品複雜度打的分數是按照整個作品而言的。

 

 

趙澤欣:

a) 評分

代碼的質量               3

Web標準的符合程度           2

作品的創意                      3

作品的複雜程度                  3

作品的可用性的質量           2

b) 點評

利用XMLHttpRequest 獲取股票數據,無刷新更新圖片,這是對Ajax的一個比較好的應用展示。

 

但本項目除了使用XMLHttpRequest傳輸JSON格式數據,Ajax其他相關的DOM/CSS/的部分基本沒有涉及。所以不能算是一個具備Ajax特色的應用。HTML(main.php)html標籤使用大寫字符、JavaScript代碼中使用document.write來動態產生html,這些都是web標準中不推薦的做法。

 

如果項目功能設計的的更爲複雜一些,比如增加股票的選擇等,相應的html重構,加入DOMCSS佈局等Ajax的內容,這將是一個很有競爭力的參賽作品。

 

另外,demo的質量不高,項目的意圖我還沒有完全弄明白。

 

 

莊表偉:

a) 評分

代碼的質量                         2

Web標準的符合程度           4

作品的創意                         3

作品的複雜程度                  2

作品的可用性的質量           1

b) 點評

在看到作者寄來的demo演示之後,我終於知道這個Ajax應用會是什麼效果了。我在自己的機器上始終沒有運行起來,非常失敗。通過閱讀代碼,我算是基本上理解了程序的目標,但是Bug實在是多,而且還有很多變量是寫死了的,按照作者的意思,我必須將這個demo放在Web Server的根目錄下運行,而我則希望他能夠運行在/demo1/這樣的相對路徑下,但是失敗了,令人相當沮喪。作者聲稱:“用tindy CSE HTML Validator 檢查html 通過”。但是,事實上他的應用中幾乎沒有什麼複雜的HTMLCSS,除了<IMG><BR>。而且,我還在代碼裏找到了一行沒有註釋掉的alert語句,於是我必須不斷的點確定鍵,以關閉alert窗口……

三等獎朱晟昊作品:WISBlog

 

李錕:

a) 評分

代碼的質量                         3

Web標準的符合程度           5

作品的創意                         4

作品的複雜程度                  3

作品的可用性的質量           1

b) 點評

這是一個基本的blog發佈系統,目前還沒有完成,所以只能根據界面對功能進行一些想象。作品本身有一些嚴重的bug,一個最主要的bug是無法正確處理中文,因此發表的blog全部顯示爲亂碼。在鼠標停在按鈕之上的時候,鼠標形狀應該改爲手的形狀,提示用戶可以點擊。另外,現在的很多按鈕點擊之後都沒有任何效果,顯然是屬於功能缺陷。因爲作品的完成度連半成品都談不上,所以可用性就無從談起了。

 

 

趙澤欣:

a) 評分

代碼的質量                     2

Web標準的符合程度           3

作品的創意                      2

作品的複雜程度                  2

作品的可用性的質量           1

b) 點評

因爲參賽作品完成度不高,所以體驗很不完整。

代碼方面servlet的應用建議直接用jsp代替。JavaScript代碼部分引自《Ajax in Action》,學以致用,值得鼓勵。

CSS方面也勇於嘗試CSS佈局,在主流瀏覽器中兼容性良好。細看HTML代碼中,<span>標籤中套嵌<div>是一個不正確的用法,因爲<span>inline元素,不應該套嵌<div>block(塊級)元素。

 

 

莊表偉:

a) 評分

代碼的質量                     3

Web標準的符合程度           4

作品的創意                      2

作品的複雜程度                  1

作品的可用性的質量           1

b) 點評

拿到作品以後,先看其中的圖片“blog_main.psd”,非常漂亮,用PhotoShop打開這個文件,發現其中的分層,都有非常清楚的中文命名,相信作者是一個PhotoShop的高手,印象不錯。

部署war文件以後,發現無法運行,查看代碼,發現作者將連接“MySQL”的代碼,直接寫入了代碼中,而且寫了4遍。再看他的servlet的代碼,感覺質量不高,歸入初學者級別。李錕提到的中文支持的問題也能夠理解了,因爲他要求MySQL必須是GBK編碼的。

再看HTMLCSSJS的代碼,基本還算合格。但是有點把“Table/TR/TD換成DIV”,就算是符合Web標準的意思,還需要進一步提高。

 

 

Ajax大賽總結(李錕)

 

由人民郵電出版社牽頭主辦的國內第一屆Ajax大賽已經順利結束了,這次大賽分成兩輪,第一輪的時間爲317415,第二輪的時間爲416630,共歷時3個半月。很榮幸我們Ajax中國網站(ajaxcn.org)的三位核心成員李錕、趙澤欣和莊表偉被邀請作爲這次大賽的評委。大賽第一輪爲答題的形式,參賽者爲250名,最終獲獎者爲75名。第二輪要求參賽者提交自己的作品,最終獲獎者11名,按照作品質量獲得了相應的獎勵。

 

單從人數上來看,這次大賽參賽者似乎並不是很多。但是考慮到Ajax是一種新的技術,目前國內精通Ajax的開發人員非常稀缺,而且新手掌握這種技術需要一段較長時間的學習。舉辦Ajax大賽的目的是爲了宣傳、推廣這種技術,我們所做的是一件開創性的工作。這次大賽在Ajax開發者和愛好者羣體中獲得了廣泛的關注,取得了非常好的宣傳效果。這次大賽的大部分參賽者的態度都非常認真,通過參與比賽與大賽的主辦方和大賽的評委開展了良好的互動,學到了知識,結交了朋友。參與這次大賽對於大部分參賽者來說都是一次愉快的經歷。

 

Ajax技術的價值比很多人想象的還要大,它的價值將會隨着時間的推移而日益展現出來。Ajax技術並不是曇花一現的時髦玩藝兒,而是能夠爲最終用戶和軟件廠商帶來巨大價值的實用技術。Ajax技術的流行可以稱爲是遲來的春天,其實它早就應該流行了(在2001年作爲Ajax基石的絕大部分技術就都已經成熟了)。Ajax技術有着深厚的理論基礎和實踐基礎,它的背後有兩個推動力:Web標準(XHTML/CSS/DOM/JavaScript/XMLHttpRequest/XML/XSLT/...)的成熟、軟件可用性和交互設計理論的成熟,並且Ajax技術還會隨着這兩方面理論和實踐的發展而不斷髮展。現在大家都在熱烈議論Web 2.0,感覺Web應用進入了一個新的紀元。Web 2.0有兩個主要的特點:更加舒適的用戶體驗,更加註重軟件作爲一種服務所能提供的價值。在我看來,拋開所有的商業炒作不說,Web 2.0其實就是一種新的價值交換手段。以Web作爲媒介,通過爲用戶提供更加貼心和更好的服務,換取軟件廠商自身價值的實現。Web 2.0體現了軟件從賣license到賣服務的轉變。Ajax正是承載着實現Web 2.0這些目標的核心技術,沒有好的技術,Web 2.0的目標只能是鏡中月水中花空中樓閣。Ajax是關於開發下一代Web應用的技術,可以這樣說,我們現在正處在建造下一代Web應用的門口。然而,掌握、應用好Ajax技術並不是一件容易的事情,它要求開發人員和設計師在技術、交互設計、美學等各方面知識的綜合運用,因此深入的學習和廣泛的交流是非常有必要的,這次Ajax大賽很大地促進了Ajax技術在中國的交流和普及。

 

人民郵電出版社是中國Ajax技術出版方面的領跑者,已經出版了大量Ajax方面的譯著和原創的著作。譯著方面包括《Ajax基礎教程》、《Ajax實戰》、《Ajax高級程序設計》,還有後續將要出版的一些著作。原創方面包括《征服Ajax--Web 2.0開發技術詳解》、《征服Ajax——Web 2.0快速入門與項目實踐(Java)》、《征服Ajax——Web 2.0快速入門與項目實踐(.net)》、《征服Ajax+Lucene——構建搜索引擎》等等。目前人民郵電出版社的Ajax系列圖書已經取得了非常好的口碑和市場反響,後續還會有進一步的規劃和舉措,全力推動Web 2.0時代的早日到來。

 

 

以下是另外兩位評委對於此次大賽的感受

 

趙澤欣:

扎穩馬步 目視前方

 

很榮幸成爲此次大賽評委中的一員,看到Ajax在國內被越來越多的朋友關注,感到由衷的高興。

在做評委的過程中,感覺Web標準在國內的推廣還需要更多的努力,我可以感受參賽選手作品中體現出來的苦心和努力,但AjaxJS/CSS/DOM的和諧結合對設計和編碼都有較高的要求,所以作品中還有不少完善的空間。

 

通過此次Ajax大賽,不少的參賽選手也提到他們在參賽過程中認識到了Web標準的重要性。我想本次大賽最大的意義我覺的也就在於此。我也相信也有不少的朋友對Ajax持有懷疑觀望的心理。層出不窮的新技術和朝興晚衰的更迭難免讓我們變的小心翼翼。

 

Web標準是Web開發先驅們經驗和教訓的整理和提煉,是已經被證明的先進的技術思想和規範。這些標準如同HTTP協議一般,對它們的理解對每個Web開發人員都是有益的。

 

先扎穩馬步,邁步時纔會健步沉着,胸有成竹。目視前方,邁步時就會目標明確,一往直前。

其實學習任何東西大概都是這番道理,熱門的Ajax難免也會有快餐推銷式的鼓吹或者商業競爭性質上的詆譭。而我們只要努力打好基礎,同時培養技術上的敏銳嗅覺,技術的更迭又有何畏懼呢?

 

Ajax給沉悶的Web開發帶來一份清新的氣息,革命性的創新甚至讓它的影響延伸到更多的技術應用領域,它還在帶給我們無限想像的可能。在學習和探索Aajx的過程中,我樂在其中,也希望更多朋友體會到Ajax帶來的思想釋放的快樂。

 

 

莊表偉:

如果和超級女生這樣的大賽相比的話,Ajax大賽應該被稱之爲“Ajax小賽”吧。250名初賽選手,10多名複賽選手,三個來自於一個網站“Ajax中國”的評委。這樣的比賽意義在哪裏呢?

 

僅僅看數量,是看不出來的。

 

AjaxWeb應用的一種,而且可以肯定的說,是Web應用中最爲複雜的一種,一個Web項目,我們通常都會分爲“美工”、“Web靜態頁面製作”、“Server端系統開發”這樣幾個工種。而Ajax應用則同時需要Server端與Client端複雜的端到端編程技術。

 

對於參賽選手而言,這些工作,都得靠一己之力來完成,在2個多月之內,做出來的作品,要美觀,要好用,要有創意,要符合W3C組織的Web標準,還得正確有效的作爲一個程序在瀏覽器裏運行。真的,不容易!這11位(可能會修改)參賽選手,每一位都不容易!

 

我們(大賽組織者、評委和參賽選手)都非常確切的意識到,我們正處在一場變革剛剛起步的階段。Ajax可能僅僅是這場革命開始時,最響亮的一個名字。激動人心的發展將會接踵而來,而我們這些人將會自豪的宣稱,我們從一開始就不是旁觀者,而是實實在在的參與者,和有力的推動者!

 

看着選手們的代碼,我們的信心更加充足,這些Ajax的愛好者和參與者們,不僅是熱忱的,更是踏實的。不但是嚴肅認真的,更是勇於創新的。由這樣的一羣人來推動Ajax在中國的發展,實在是一個極好的開始。

 

Ajax大賽,正是這樣一個機會,使得這一羣中堅力量,能夠集結、凝聚,進而取得更加卓越的成就。這就是我對於這個比賽意義的理解。

大賽在722邀請評委之一李錕現場與讀者交流

地址:北京市海淀區紫竹院路66號賽迪大廈二層     

嘉賓:李錕

演講題目:AJAX基礎與實戰

 

 

獨立軟件諮詢顧問,有多年軟件開發和軟件項目管理的經驗,在J2EEAjax、敏捷軟件開發方法等領域有獨到的見解。
從事軟件行業10年來,曾經擔任過電信軟件工程師、網站開發人員、售前工程師、軟件項目經理、公司負責人等等不同的角色。
有超過三年的Ajax開發經驗。在兩年之前,Ajax這個名詞尚未誕生時,就曾經在JavaEye論壇(http://forum.javaeye.com)以及很多技術交流活動中大力宣傳基於XMLHttpRequest和異步請求的開發方式。引導了國內第一波關於這些技術的大討論。
Ajax
技術成型後,創立了Ajax中國網站(ajaxcn.org),擔任站長。
最近主持翻譯Ajax in Action,力求將這本Ajax領域的名著原汁原味地奉獻給讀者。
個人BLOG—http://www.blogjava.net/dlee

 

 
發佈了55 篇原創文章 · 獲贊 1 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章