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