網(wǎng)站開發(fā)領(lǐng)域飛速發(fā)展。仿佛每一天都有新的框架或者設(shè)計(jì)工具問世。本文會(huì)概括介紹網(wǎng)頁設(shè)計(jì)和開發(fā)領(lǐng)域的七種新興技術(shù)。借助這些技術(shù)就可以輕松方便地搭建一個(gè)美觀、實(shí)用的網(wǎng)站和web程序。讓我們開始吧！

Meteor是個(gè)相當(dāng)不錯(cuò)的編寫和部署Web程序的新平臺(tái)。據(jù)稱會(huì)成為未來幾十年內(nèi)構(gòu)建應(yīng)用程序的主要平臺(tái)！相當(dāng)大膽的說法，說不定成真了呢。

回顧歷史，網(wǎng)站工作原理大都是“在服務(wù)器上處理東西，然后把HTML發(fā)送給呆萌的瀏覽器”。Meteor開發(fā)小組質(zhì)疑這種技術(shù)已經(jīng)過時(shí)?，F(xiàn)代瀏覽器能做的遠(yuǎn)不止自行運(yùn)行程序，比如從服務(wù)器或者隨便什么地方的Web服務(wù)獲取數(shù)據(jù)。固守”所有的東西都交給服務(wù)器處理“的舊模式完全不合情理。讓瀏覽器自行請(qǐng)求所需數(shù)據(jù)，甚至是通過多個(gè)來源獲取數(shù)據(jù)，然后構(gòu)建自己的標(biāo)記語言來顯示應(yīng)用程序接口的新模式顯然更有意義。

編寫Meteor應(yīng)用只會(huì)用到HTML，CSS和JavaScript。Meteor的一大特點(diǎn)是，JavaScript既可以運(yùn)行在服務(wù)器上（用Meteor服務(wù)器和Node.js）也可跑在瀏覽器里。服務(wù)器端的Meteor負(fù)責(zé)打包客戶端JavaScript和其他資源，然后把它們當(dāng)作一個(gè)縮小的捆綁包發(fā)送到瀏覽器。

Meteor采用響應(yīng)式編程，也就是只要更新數(shù)據(jù)，網(wǎng)頁元素就會(huì)自動(dòng)更新。這意味著程序員的工作量大大減輕，同時(shí)用戶界面會(huì)更加強(qiáng)大。

Meteor還有需要不錯(cuò)的特性，包括多種模板引擎支持，跨服務(wù)器和瀏覽器的數(shù)據(jù)庫拷貝帶來的超高速數(shù)據(jù)庫訪問。部署應(yīng)用程序也非常方便，既可以用自己的服務(wù)器也可以用meteor.com免費(fèi)提供的服務(wù)器。

用Meteor可以優(yōu)雅地打造現(xiàn)代Web應(yīng)用。我迫不及待想親自嘗試一下。該平臺(tái)還處在“早期預(yù)覽”階段，1.0版本會(huì)在幾個(gè)月后發(fā)布。你可以參考一下薩沙格萊夫?qū)懙倪@篇介紹文章，作者只用了四十五分鐘就搞定了基于Meteor的軟件開發(fā)。

Tumult Hype 的Mac軟件已經(jīng)出來了好幾年了，但是直到最新的2.0版本才真正顯示出自己的價(jià)值。Hype讓你能夠用繪圖工具和時(shí)間線來設(shè)計(jì)并構(gòu)建交互式Web內(nèi)容和關(guān)鍵幀動(dòng)畫。然后只需輕點(diǎn)幾次鼠標(biāo)，就可以把工作成果導(dǎo)出為符合標(biāo)準(zhǔn)的HTML5，CSS，JavaScript和圖像，而且可以同時(shí)在桌面端和移動(dòng)端上運(yùn)行。這就像是用Adobe公司的Flash Professional制作HTML5，費(fèi)用卻少了不少。

這幾周我一直在陸陸續(xù)續(xù)使用Hype 2.0，盡管和Flash Professional比起來的確少了一些特性，但是用來為網(wǎng)站創(chuàng)建具有專業(yè)外觀的交互式內(nèi)容是完全夠用的。不妨來看看這些用Hype制作的游戲和信息圖表 。

Hype 2.0還有一些新特性，比如Hype Reflect，一款免費(fèi)的iOS應(yīng)用，可以用來在iPhone或者iPad上即時(shí)預(yù)覽你的作品。其他特性還有：更出色的移動(dòng)端內(nèi)容支持，更強(qiáng)大的音頻支持以及對(duì)曲線形運(yùn)動(dòng)路徑的支持。Macworld對(duì)這些新特性做了不錯(cuò)的總結(jié)，值得看看。

雖然不少網(wǎng)頁設(shè)計(jì)師選擇Photoshop，還有許多人在尋找更精簡(jiǎn)，更便宜同時(shí)更適合網(wǎng)頁設(shè)計(jì)的替代品。

Bohemian Coding出品的Sketch由此應(yīng)運(yùn)而生。和Hype相仿，Sketch也是Mac軟件，也經(jīng)歷了從相對(duì)簡(jiǎn)單的設(shè)計(jì)工具到針對(duì)網(wǎng)頁交互設(shè)計(jì)進(jìn)行強(qiáng)化的全功能軟件的進(jìn)化。Sketch的獨(dú)特特性包括：

• 基于矢量的精確、非破壞性編輯操作和與分辨率無關(guān)的結(jié)果

• 內(nèi)置網(wǎng)格支持

• 在單個(gè)Sketch文檔中使用多個(gè)頁面和畫板

• 簡(jiǎn)單的切片操作自動(dòng)圖像裁切

• 使用圖層樣式輕松添加各種效果，比如填充，邊框和陰影

我們網(wǎng)站的西蒙這幾天的網(wǎng)頁設(shè)計(jì)的工作基本上都是用Sketch完成的?？纯催@篇今年早些時(shí)候他寫的關(guān)于Sketch的文章。

Emmet LiveStyle是一個(gè)近乎神奇的全新瀏覽器插件，可以實(shí)現(xiàn)CSS實(shí)時(shí)編輯。

你可能聽說過諸如LiveReload的插件，可以監(jiān)控本地的CSS文件的更改。只要修改并保存了CSS文件，插件就會(huì)自動(dòng)刷新瀏覽器，這樣就可以直觀展示修改的效果。

LiveStyle在此基礎(chǔ)上更進(jìn)了一步。啟用LiveStyle之后，甚至不需要保存CSS文件！只要用文本編輯器對(duì)CSS文件做出修改，修改的結(jié)果立即會(huì)在瀏覽器上呈現(xiàn)，甚至都不需要重新載入頁面。編輯操作甚至可以是反方向的，也就是說：在瀏覽器上通過元素審查來編輯頁面CSS的時(shí)候，LiveStyle就會(huì)自動(dòng)更新文本編輯器中的CSS文件。

你可以用這種方法編輯任何頁面的CSS，哪怕沒有CSS文件的本地拷貝，甚至CSS被壓縮也可以！這里有個(gè)演示視頻展示了如何使用LiveStyle來實(shí)時(shí)編輯Facebook和Google的首頁。

這一切之所以能夠?qū)崿F(xiàn)是因?yàn)長(zhǎng)iveStyle能夠在結(jié)構(gòu)層面分析CSS的變化，從而在瀏覽器和文本編輯器之間雙向傳遞那些真正發(fā)生變化的部分。真的非常贊。該插件還處在公測(cè)階段，而且暫時(shí)只支持Sublime Text編輯器。最終的付費(fèi)版據(jù)稱會(huì)馬上到來，屆時(shí)會(huì)支持更多的編輯器。

Bootstrap是一個(gè)最近廣受關(guān)注的Web前端框架。Bootstrap最初由Twitter開發(fā)，現(xiàn)在是一個(gè)發(fā)展迅速的開源項(xiàng)目。

今年發(fā)布的第3版帶來了一系列非?？蓯鄣男绿匦?，主要有：

• 移動(dòng)端優(yōu)先：你現(xiàn)在可以先為移動(dòng)端設(shè)計(jì)網(wǎng)站，隨后再將內(nèi)容放大從而適配桌面端更大的屏幕?？蚣苁峭耆憫?yīng)化設(shè)計(jì)的，所以網(wǎng)站可以自動(dòng)適配各種大小的屏幕。

• 超贊的網(wǎng)格系統(tǒng)：網(wǎng)格非常易于使用，而且對(duì)手機(jī)、平板電腦、桌面顯示器以及超大桌面顯示器都有相應(yīng)的斷點(diǎn)系統(tǒng)。

• 可愛的可選主題：默認(rèn)情況下Bootstrap搭建出來的網(wǎng)站外觀都不怎么樣，現(xiàn)在你可以在一些超美的主題的基礎(chǔ)上開發(fā)網(wǎng)頁了。看看這些賞心悅目的色彩！

• 全新的自定義程序：使用自定義程序來調(diào)整Bootstrap的方方面面?，F(xiàn)在可以根據(jù)自己的品味來構(gòu)建自定義版本了。這一切都在瀏覽器中即時(shí)編譯，可以直接下載到本地計(jì)算機(jī)讓部署網(wǎng)站變得更簡(jiǎn)單。

我愛Bootstrap！現(xiàn)在讓我從頭搭建一個(gè)網(wǎng)站的話，它一定是我的第一選擇。要進(jìn)一步了解Bootstrap都能做些什么，不妨看看這些例子 。

雖然網(wǎng)頁設(shè)計(jì)師都應(yīng)該對(duì)HTML和CSS略知一二，還有很多人更傾向于純?cè)O(shè)計(jì)，而不是敲代碼。如果設(shè)計(jì)工具可以利用設(shè)計(jì)師給的設(shè)計(jì)稿生成相應(yīng)的HTML和CSS的話，生活會(huì)多美好啊。

諸如Firewords的眾多圖像編輯器已經(jīng)可以直接輸出HTML和CSS了，但是實(shí)際結(jié)果往往比較糟糕，HTML代碼寫得繁瑣差勁，CSS類也沒有語義可言。

用一下Macaw 吧。這是一款懂代碼的設(shè)計(jì)軟件，宣稱可以在語義層面理解設(shè)計(jì)元素，其生成的HTML和CSS代碼簡(jiǎn)潔易懂，非常接近前端程序員親自編寫的效果。

Macaw的殺手級(jí)特性包括：

• 全局類：將常用的風(fēng)格保存成一個(gè)全局類。這樣做的好處是只需要修改這個(gè)全局類，就可以輕松修改使用這個(gè)類的所有元素的風(fēng)格。

• 整合：Macaw的Alchemy引擎能夠用最簡(jiǎn)潔、最高效的方式組織CSS選擇器，從而生成精美、易于閱讀的CSS代碼。

• 絕對(duì)定位轉(zhuǎn)換為靜態(tài)定位：使用Macaw設(shè)計(jì)網(wǎng)頁的布局就像使用絕對(duì)定位一樣。Macaw通過合理使用margin, padding和float，自動(dòng)將元素的定位方式轉(zhuǎn)換為瀏覽器中的標(biāo)準(zhǔn)靜態(tài)定位

• 流式網(wǎng)格和響應(yīng)式布局：Macaw使用支持流式網(wǎng)格的可調(diào)整畫布，可以設(shè)置響應(yīng)式斷點(diǎn)并據(jù)此調(diào)整CSS屬性以適應(yīng)不同的視見區(qū)寬度。

• 輸出風(fēng)格指南：Macaw可以自動(dòng)生成一個(gè)風(fēng)格指南頁面，可以充分展示你的設(shè)計(jì)中使用的字體、顏色、網(wǎng)格和類。非常贊！

Macaw目前尚未發(fā)布，不妨先看看這個(gè)視頻。值得一看！

我們最后要介紹的工具同樣非常重要。Famo.us是一個(gè)出色的JavaScript渲染引擎，有望徹底改變web應(yīng)用程序及其用戶界面。從原理上講，F(xiàn)amo.us繞過了瀏覽器渲染3D動(dòng)畫的傳統(tǒng)方式，而是直接使用GPU，從而帶來了超流暢、硬件加速的3D圖像。

這樣做真正的好處在于，這一切都是用JavaScript實(shí)現(xiàn)的。也就是說，JavaScript，CSS和DOM的強(qiáng)大功能觸手可及。而這些對(duì)開發(fā)者完全是免費(fèi)的（Famo.us公司主要通過和硬件廠商的合作來盈利）。Famo.us可以在眾多瀏覽器上流暢運(yùn)行，從現(xiàn)代臺(tái)式電腦到iPhone 3GS無不如此，這一點(diǎn)令人印象深刻。

我覺得對(duì)于Famo.us的實(shí)際使用場(chǎng)景大家還有很多誤解。從他們的演示來看，F(xiàn)amo.us好像是專門為創(chuàng)建3D圖形（盡管是超光滑圖形）而設(shè)計(jì)的，用來可以取代Flash。實(shí)際上它同樣適用于2D界面，而我認(rèn)為短期內(nèi)這都會(huì)是Famo.us的主要使用場(chǎng)景。想想我們?cè)趇OS7上看到的那些有趣的、有觸控交互動(dòng)畫的應(yīng)用程序接口吧。下面這個(gè)視頻（使用iPad）充分展示了這項(xiàng)技術(shù)的可能性。

https://www./watch?v=NdAvOE3SyrU

我已經(jīng)迫不及待地期待開發(fā)者利用這項(xiàng)技術(shù)開發(fā)出流暢性可以和原生應(yīng)用相媲美的web軟件了。多么激動(dòng)人心呀！

有什么讓你感到驚喜的新技術(shù)、新框架或者軟件嗎？或許本文介紹的一些技術(shù)你已經(jīng)在用了？

歡迎點(diǎn)開閱讀原文，查看具體相關(guān)信息。