20個將JavaScript推到極致的網(wǎng)站
那些喜歡冒險體驗前沿技術(shù)的開發(fā)者現(xiàn)在應該會非常開心。瀏覽器正變得越來越強大，上面有各種豐富的功能可以供開發(fā)者選擇，一些在幾年前幾乎難以想象的功能都已經(jīng)一一實現(xiàn)。有了這些新功能，開發(fā)者現(xiàn)在能夠開發(fā)出更精細、更復雜、更有想象力的用戶界面了。這為網(wǎng)站開發(fā)掃清了障礙，網(wǎng)站能夠擁有讓人驚喜的用戶界面了。
有時候，這種技術(shù)的運用是非常精妙的，它無聲無息地改變了應用的用戶體驗。有時結(jié)果就像是加入櫻桃可樂中的跳跳糖，悄悄地給人們帶來驚喜。
這里有20個特別突出的網(wǎng)站，他們在定位、技巧或者是JavaScript的使用上有各自的獨到之處。
演示網(wǎng)站
先看一些有趣的東西。這些網(wǎng)站利用JavaScript將Canvas，WebGL，CSS3和HTML5元素這些瀏覽器技術(shù)融合在了一起。通常這些技術(shù)只是用來取悅用戶，或是在現(xiàn)代的瀏覽器中顯示一些新的功能。雖然大多數(shù)的功能都很不錯，但有些會占用大量的處理器或是顯卡，所以筆記本電腦用戶常常需要關注他們的筆記本溫度，以免溫度過高而出現(xiàn)異常。
1. Baroque.me
Baroque.me是一個簡單，但是能夠催眠的網(wǎng)站，它就用到了HTML5 Canvas元素，并使用JavaScript巧妙地控制了一個簡單的虛擬巴赫大提琴設備的渲染工作。網(wǎng)站的聲音是由Flash提供的，并且使用JavaScript控制。你可以控制頁面上那些跳動的圓點，但是卻很難控制大提琴的時間節(jié)奏。
它的開發(fā)者Alexander Chen來自Google Creative Labs，也參與了非常受歡迎的Les Paul Google Doodle開發(fā)，在早些時候，還開發(fā)了一個非常棒的可視化NY地鐵系統(tǒng)。
2. Beercamp
Beercamp 2011的界面非常有趣，可以自由縮放，它非常巧妙地使用了CSS3和JavaScript技術(shù)，這一點吸引了許多人的關注。網(wǎng)站大量采用了CSS3轉(zhuǎn)換和變形效果，你還會發(fā)現(xiàn)它劫持了瀏覽器的滾動事件用來控制網(wǎng)頁的縮放效果。今年的早些時候David DeSandro曾分享了相關效果實現(xiàn)的技術(shù)細節(jié)。
3. Three.js
Canvas和WebGL這些技術(shù)為瀏覽器帶來了強大的渲染功能。Mr. Doob開發(fā)的Three.js項目是一個3D JavaScript引擎，能夠利用瀏覽器上的這些新功能渲染頁面。下面是一個利用Three.js渲染動畫或是3D模型的例子。
***消息：Web將覆蓋移動設備!老實說，這個消息確實對使用JavaScript技術(shù)的移動市場來說是一個好消息。這還只是推動移動市場發(fā)展的***步。
為了演示新的Windows移動設備界面，Microsoft開發(fā)了一個Windows mobile上的演示示例。用戶確實能夠發(fā)現(xiàn)它的界面播放的動畫非常流暢，并且響應相當及時。這也是CSS和JavaScript的功勞(***是通過iPhone或是Android設備訪問——目前還不支持Windows Phone!)。
#p#
工具
這一節(jié)介紹的技術(shù)可能不會直接給用戶帶來驚艷的感覺(雖然有些可能可以做到)，但他們確實非常重要。其中有些是開發(fā)者可能會頻繁使用的JavaScript資源，而有些是人們開發(fā)瀏覽器應用時的***工具。
5. Workflowy
Workflowy可以幫助人們整理自己的想法。在2010年十一月推出了他們的測試版本，僅僅用了30天的時間，它就擁有了一百萬條記錄了。它是由 Jesse Patel和Mike Turitzin共同開發(fā)的，Workflowy使用JavaScript處理DOM操作和存儲，并且能夠在大量的本地記錄中快速查找目標記錄。如果你需要整理自己的記錄或是想查找新的GTD 工具，Workflowy會是一個不錯的選擇。最近它還增加了對移動設備和平板電腦的支持，方便用戶分享文檔。
雖然現(xiàn)在移動web開發(fā)正變得越來越熱，但是移動設備的開發(fā)工作還是相當困難的。jQuery JavaScript庫的目標就是想在瀏覽器上實現(xiàn)一個通用的JavaScript開發(fā)方法。而 jQuery Mobile的目標則更加遠大：簡化各種移動設備平臺上的web開發(fā)工作。這個庫已經(jīng)推出了1.0版本，jQuery Mobile網(wǎng)站就是一個很好的示例，展示了如何使用jQuery Mobile開發(fā)一個能夠在各種移動設備和傳統(tǒng)瀏覽器設備上運行的網(wǎng)站。
7. Spritecow
Spritecow是由Jake Archibald開發(fā)的，它能夠幫助用戶解決許多繁瑣費時的問題。前臺開發(fā)人員都知道，創(chuàng)建spritesheets的目標就是使得界面響應更加及時并盡量減少HTTP請求的次數(shù)。Spritecow將JavaScript，Canvas和一些數(shù)學邏輯算法融合在一起，為用戶提供了一個好用的CSS生成工具。
將整個開發(fā)環(huán)境整合到云和瀏覽器里面已經(jīng)成為了我們這個時代的標志。在過去的幾年里面，Cloud 9一直在開發(fā)他們的集成開發(fā)工具(IDE)，但是今年，它變成一個令人期待的項目并且成為一個可用的web開發(fā)資源。創(chuàng)始人兼CTO Rik Arends表示，與其他類似項目(如Bespin)相比，使用JavaScript來管理DOM，在編輯環(huán)境中控制文檔性能更好。 通過配置和擴展JavaScript，還可以為這個開發(fā)環(huán)境帶來更多的提升和功能。都相當值得期待。
9. Reveal.JS
Reveal.JS是Hakim El Hattab開發(fā)的一個演示文稿制作工具，能夠制作絢麗的演示文稿并生成HTML格式，將它發(fā)布到web上。它使用了CSS3變換功能和JavaScript，這個工具大受web開發(fā)者的青睞。
10. Pusher
Pusher是一個很棒的工具，在此不得不提。雖然它已經(jīng)推出一年多了，但最近提升了Web Sockets對瀏覽器的支持，Node使得Pusher受到了更多的關注。
Pusher提供了一組API用來提升實時apps和服務。有許多非常棒的網(wǎng)站都使用了Pusher。
Pusher最初是由New Bamboo的幾個員工開發(fā)的，雖然規(guī)模不大，但是做的工作卻相當了不起，New Bamboo需要實現(xiàn)實時通訊來提升web游戲和工具，所以Pusher自身用到了Node。
11. Speakerdeck
來自Ordered List的Speakerdeck最近被收錄到Github上，它利用JavaScript和web技術(shù)在web上展示演示文稿。雖然許多其他類似的服務都利用了大量的Flash技術(shù)，Speakerdeck相比之下則較少用到Flash，而是利用JavaScript實現(xiàn)幻燈片預覽功能。這里有許多豐富的功能和技術(shù)。
12. Gauges
既然已經(jīng)提到了Speakerdeck，就不得不提一下Ordered List的另一個精彩服務——Gauges。它是一個分析工具，有點類似于Google Analytics，使用了常用的JavaScript插件獲取用戶的訪問數(shù)據(jù)。Gauges有豐富的API，并且能夠很好地渲染實時數(shù)據(jù)。JavaScripty相當?shù)木省?/p>
#p#
改進界面
13. BBC主頁
最近關于BBC更新的主頁有一些爭論。有些人喜歡它，而有些則對它感到反感。就個人而言，作者開始覺得新的主頁看起來有點瘋狂，但慢慢地也覺得它其實也挺可愛的。它的交互看起來非?？?，并且有許多的改進。即使在不支持JavaScript的環(huán)境中，這個主頁也考慮得非常周到。但是，它還是顯得有點擁擠和正正方方了。
14. BBC iPlayer
雖然已經(jīng)介紹過BBC了，但是BBC iPlayer的確值得拿出來再說一說。它有一個非常了不起的JavaScript驅(qū)動界面，能夠非常有效地呈現(xiàn)豐富的內(nèi)容信息(不僅僅是視頻信息，還包括圖片信息)。使用BBC的主頁和開源的Glow JavaScript庫能夠做許多新穎的工作。
15. Facebook
必須承認，F(xiàn)acebook在界面設計上做了大量復雜、精細的工作，使得它真實。上面有豐富的實時資訊，通知和聊天功能，雖然它的風格可能無法迎合所有人的口味，但是它的確對web設計產(chǎn)生了影響，并且影響了許多人。
#p#
背后的美麗
雖然作者非常關注視覺效果和代碼庫(代碼庫確實相當重要)，但他最關心的其實是如何巧妙地利用這些技術(shù)。***幾個例子很好地展示了如何靈活地使用現(xiàn)有的技術(shù)。
16. Github
Github在用戶交互方面做得相當出色并且非常注重細節(jié)的設計。在代碼導航樹中，用戶能夠在項目的目錄樹中平滑地切換，網(wǎng)站記錄了各個頁面的地址信息并且可以對地址進行標記，內(nèi)嵌了編輯器，可以直接在瀏覽器中修改代碼(使用Cloud 9 editor)。使用Canvas實現(xiàn)網(wǎng)站的可視化工作，包括搜索預覽，彈出菜單和界面元素，這個列表還在不斷增加。Github做得非常棒。
17. Google Doodle
Google Doodles提供了非常有趣的動畫，用戶能夠與這些動畫交互。有時，這些設計會讓用戶會心一笑，有時也許人們還沒發(fā)現(xiàn)它們，它們就已經(jīng)消失了。Marcin Wichary是Google的這個“delighters”項目的負責人之一，為了推廣這個項目，必須 掃清JavaScript優(yōu)化技術(shù)中的障礙。這個團隊使用了sprite-crunch技術(shù)，用來壓縮它們在動畫中使用的sprites的。處理方法相當妙。這些涂鴉非常巧妙地利用了瀏覽器API和JavaScript。Google的開發(fā)人員太聰明了!
Nike團隊的這個網(wǎng)站常常被復制和討論。這個網(wǎng)頁將JavaScript和CSS結(jié)合起來，當用戶滾動頁面時，營造出一種有趣的視覺差。即使瀏覽器不支持JavaScript，這個網(wǎng)站也能優(yōu)雅地降級顯示，將視覺差效果移除，但并不會影響頁面的正常顯示，作者建議將導航鏈接保留下來。可以用JavaScript劫持這個鏈接，這樣無論應用環(huán)境是否支持JavaScript，這個導航都能夠工作。
19. Mobile Beetle
作者在今年早前曾對Volkswagen Beetle的新網(wǎng)站提出了一些批評。在此不會重復這些批評，而只是介紹這個網(wǎng)站在將JavaScript推向***的幾個方面。它也是一個旋轉(zhuǎn)效果做得相當不錯的網(wǎng)站。這個網(wǎng)站的移動版本做得相當精巧。當你在iPhone上訪問這個網(wǎng)站時，它充分利用了觸摸和旋轉(zhuǎn)事件提升服務的用戶體驗(盡管如果不是使用的WIFI的話，網(wǎng)頁中的圖片可能顯得有點過大)。
20. Twitter移動網(wǎng)站
其實移動設備上已經(jīng)有許多非常棒的Twitter客戶端了，以至于大家可能會忽略今年Twitter推出的移動優(yōu)化版本的web客戶端，盡管它相當不錯。Twitter的開發(fā)團隊采納了iPhone Twitter apps上的許多UI慣例，并且在自己的web框架中重新設計了一些UI。結(jié)果相當不錯，在智能手機上訪問瀏覽器中的頁面就像是native app一樣。在Android和iPhone上的效果都相當出色。真的是一個很棒的工作。
…這就是全部的20個網(wǎng)站
這就是作者挑選出來的20個將JavaScript推到***的網(wǎng)站。當然，其實應該還有許多其他的網(wǎng)站也有資格出現(xiàn)在這個列表上，但是web太大了，而列舉出20個網(wǎng)站只是一個很小的集合。雖然許多其他的網(wǎng)站也有一些突出的特點，但也各有不足。JavaScript讓開發(fā)者能夠在瀏覽器中做許多了不起的工作，但這里列出的20個網(wǎng)站中，有些為了實現(xiàn)某些特色犧牲了網(wǎng)站的訪問性、地址性和其他性能或功能，這是一個優(yōu)秀的web應用應該克服的。不過，它們確實在今年，給web開發(fā)者帶來了不少新的想法。
原文：http://www.webapptrend.com/2011/12/1123.html
【編輯推薦】
