Web Designer

作為一個(gè)網(wǎng)頁設(shè)計(jì)師，有一個(gè)有效的、組織良好的工作流程十分重要。而其中的訣竅在于選擇一個(gè)合適的工具。因此，我們匯總了50 個(gè)工具，使設(shè)計(jì)師能夠更輕松地開始網(wǎng)頁設(shè)計(jì)之旅。

設(shè)計(jì)網(wǎng)頁不僅僅是繪出美麗的圖畫。作為一名網(wǎng)頁設(shè)計(jì)師，你會(huì)發(fā)現(xiàn)50%的時(shí)間都用在了策劃、測(cè)試和推廣方面，文書工作更是占了大量的時(shí)間。這份工作大多需要多方面的技能，但是如果你遠(yuǎn)離自己熱愛的工作而去執(zhí)行你不喜歡的任務(wù)，那真是讓人非常沮喪。令人欣慰的是，有一個(gè)可以削弱這種影響的簡(jiǎn)單方法，并且你今天就可以開始。

擁有一個(gè)高效的，有序的工作流程對(duì)任何工作來說都至關(guān)重要，網(wǎng)頁設(shè)計(jì)更是如此。網(wǎng)頁設(shè)計(jì)師的工作內(nèi)容涉及很多方面：你可能這一分鐘在制作網(wǎng)頁的線框，下一分鐘又可能在測(cè)試一個(gè)完全不同的網(wǎng)站。這些重要的工作便將一系列程序添加到網(wǎng)頁設(shè)計(jì)和發(fā)展當(dāng)中。當(dāng)然需要做的還有策劃、開發(fā)、推廣，但最重要的部分還是設(shè)計(jì)本身。

為工作找到適合的工具

想要完成一個(gè)網(wǎng)站，還有更多的工作需要完成。有一套非常高效的工具來幫助你節(jié)省時(shí)間和精力將會(huì)非常有用。請(qǐng)記住，你花費(fèi)越多的時(shí)間來優(yōu)化工作流程和減少不必要的體力勞動(dòng)，你就會(huì)有更多的時(shí)間來設(shè)計(jì)出色的網(wǎng)站。

明智的選擇你的工具

你的工具越好，你就可以把更多的時(shí)間放在設(shè)計(jì)上，這就為穩(wěn)健的設(shè)計(jì)提供了穩(wěn)定的框架和基礎(chǔ)。而難點(diǎn)就在于我們擁有這么多不同的工具和服務(wù)，如果想要保持更新各種選項(xiàng)，那么這將會(huì)是一個(gè)很大的雷區(qū)。你需要正確選擇一系列節(jié)省時(shí)間和精力的工具。這就是為什么我們搜集了50種對(duì)網(wǎng)頁設(shè)計(jì)師來說最好的工具。它將會(huì)在5個(gè)重要方面幫助你：策劃、設(shè)計(jì)、開發(fā)，測(cè)試和推廣。

在我們的列表中，我們有原尺寸的桌面工具、在線選項(xiàng)、網(wǎng)絡(luò)服務(wù)、框架和工具。它們的共同特點(diǎn)就是能夠幫助你節(jié)省寶貴的時(shí)間，確保最好的結(jié)果。如果在你的工作流程中使用這些工具，那么它們將形成一個(gè)完整的套件來幫助你建立一個(gè)優(yōu)秀的網(wǎng)站。

Part 1 策劃

通過選擇合適的規(guī)劃和線框圖制作工具，讓你的網(wǎng)頁設(shè)計(jì)有一個(gè)好的開始。

DROPBOX

www.dropbox.com

Dropbox是跨越不同設(shè)備來分享和備份文件的一種簡(jiǎn)單方式，它可以擴(kuò)展你的硬盤驅(qū)動(dòng)器，在電腦和設(shè)備之間提供基于云的儲(chǔ)存和自動(dòng)同步功能。作為協(xié)作工具，它可以允許不同用戶之間的文件共享。其基礎(chǔ)版本完全可以免費(fèi)使用，但你必須支付額外的儲(chǔ)存，還可以通過和非網(wǎng)絡(luò)隨身儲(chǔ)存的用戶一起分享，并且把這種服務(wù)推薦給你的朋友和同事，從而慢慢建立自己的空閑儲(chǔ)存區(qū)。

DIA

www.live.gnome.org/Dia

DIA是一款用來生成圖表的免費(fèi)桌面工具，在Windows、Mac OS和Linux操作系統(tǒng)上都有相應(yīng)的版本。它和微軟的Visio大致相同，可以提供不同的方法來完成實(shí)體聯(lián)系圖，同時(shí)在開始設(shè)計(jì)和編寫網(wǎng)站之前，提供很好的籌劃方法。它可以用創(chuàng)建圖表的方式提供一個(gè)大型圖書館的預(yù)構(gòu)建的形狀。通過使用SVG和XML來生成自己的圖表，并且讓其適合任何工作流程和顯示風(fēng)格。

MOQUPS

www.moqups.com

MOQUPS是一款非常棒的免費(fèi)網(wǎng)絡(luò)框架工具，它可以幫你創(chuàng)建互動(dòng)模型，與你的同事以及客戶分享。

完成模型可以導(dǎo)出PDF和PNG格式，因此很容易把你的線框包括進(jìn)你的項(xiàng)目文件中。關(guān)鍵是在瀏覽器中運(yùn)作的整個(gè)系統(tǒng)中使用了HTML5，一系列設(shè)備都可以使用。這對(duì)于每天早上上班的網(wǎng)頁設(shè)計(jì)師來說是一個(gè)理想的選擇。

BASECAMP

www.basecamp.com

Basecamp是一個(gè)在線項(xiàng)目管理系統(tǒng)，它提供內(nèi)置的用戶控制和管理功能。該系統(tǒng)提供代辦事項(xiàng)列表、討論地區(qū)、資產(chǎn)存儲(chǔ)和共享日歷。Basecamp是一組在線應(yīng)用程序的一部分，它包括Highrise、Backpack和Campfire。它們一起構(gòu)成了一個(gè)完整的項(xiàng)目管理工具。每月只要30美元，你就可以計(jì)劃和管理多達(dá)15個(gè)并行工程。

YUUGUU

www.yuuguu.com

Yuuguu是一個(gè)屏幕分享和桌面協(xié)作工具，它讓你快速看到你同事桌面上的東西，進(jìn)行交互展示，舉行網(wǎng)絡(luò)會(huì)議。這個(gè)服務(wù)融合了你現(xiàn)有的軟件并且不需要下載插件。這樣你就可以舉行網(wǎng)絡(luò)會(huì)議，就像每個(gè)人都坐在同一個(gè)房間。價(jià)格是69美元每年，會(huì)議次數(shù)不限，功能包括屏幕分享、網(wǎng)絡(luò)會(huì)議以及音頻電話服務(wù)。

Part 2 測(cè)試

人們常常忽略測(cè)試，但是它是網(wǎng)頁設(shè)計(jì)項(xiàng)目中最重要的環(huán)節(jié)，因?yàn)樗梢源_保設(shè)計(jì)師的設(shè)計(jì)成果是否能夠在現(xiàn)實(shí)情況下得到合理的應(yīng)用。

Firebug

www.getfirebug.com

Firebug基于火狐瀏覽器平臺(tái)，并支持所有的主流瀏覽器版本。Friebug可以讓你和DOM中的成分直接互動(dòng)，中斷和放置代碼，并且覆蓋在頁面的CSS環(huán)境下。這種把工具、網(wǎng)絡(luò)分析和控制臺(tái)結(jié)合起來的方式，使它成為開發(fā)者測(cè)試和評(píng)估自己網(wǎng)頁的必備工具。對(duì)于查看其他的開發(fā)者如何實(shí)現(xiàn)一些特質(zhì)技巧方面非常有幫助。它可以運(yùn)用到整個(gè)開發(fā)過程當(dāng)中，而不僅僅是在測(cè)試階段。

SAUCELABS

www.saucelabs.com

在多種瀏覽器中進(jìn)行測(cè)試對(duì)于網(wǎng)絡(luò)設(shè)計(jì)師來說很有必要。眾所周知，不同的網(wǎng)頁瀏覽器產(chǎn)生不同的結(jié)果。SauceLabs提供了一套解決方案，這種付費(fèi)服務(wù)讓你完全測(cè)試兩個(gè)視覺呈現(xiàn)和交互元素的設(shè)計(jì)頁面的同時(shí)，不用刻意維護(hù)你自己的測(cè)試平臺(tái)。這里有免費(fèi)可用的選項(xiàng)，可以給你一個(gè)簡(jiǎn)單的瀏覽器截圖，SauceLabs的產(chǎn)品會(huì)更進(jìn)一步地允許你查看每個(gè)測(cè)試的視頻會(huì)話。

W3C VALIDATORS

www.w3.org/2013/validatorsuite/beta/

W3C是負(fù)責(zé)網(wǎng)頁標(biāo)準(zhǔn)的發(fā)展和維持的機(jī)構(gòu)，包括HTML5和CSS3，它提供了各種各樣的驗(yàn)證工具，可以用來測(cè)試用戶制作代碼的有效性。雖然這可能看起來隨意，并不一定反映了一個(gè)特定的瀏覽器頁面呈現(xiàn)方式，努力朝著符合標(biāo)準(zhǔn)的代碼來確保未來的兼容性是非常重要的。W3C為HTML5和CSS3代碼驗(yàn)證做好保障，目前所有的驗(yàn)證器套件都在進(jìn)行Beta測(cè)試，不久就可以迎來正式版。

響應(yīng)設(shè)計(jì)測(cè)試

www.mattkersley.com/responsive

隨著網(wǎng)頁用戶界面設(shè)計(jì)朝著響應(yīng)方式發(fā)展，一系列的測(cè)試工具開發(fā)出來了，其中簡(jiǎn)單有效的工具當(dāng)屬M(fèi)att Kersley網(wǎng)站。進(jìn)入U(xiǎn)RL，你就可以測(cè)試，頁面產(chǎn)生的內(nèi)容會(huì)模仿不同平臺(tái)的屏幕，通過比較工具里的頁面布局和測(cè)試，你的響應(yīng)設(shè)計(jì)方法就有可能奏效，并且不需要和其他更深層次的工具聯(lián)系起來。

JSLINT

www.jslint.com

JSLINT是一種JavaScript測(cè)試以及優(yōu)化平臺(tái)，可以讓你進(jìn)行平穩(wěn)測(cè)試并對(duì)腳本進(jìn)行評(píng)估，輸出信息會(huì)顯示你的JavaScript哪里出了問題，并且提供指示器幫你解決問題。JSLINT會(huì)在檢測(cè)過程中發(fā)現(xiàn)在瀏覽器當(dāng)中運(yùn)行良好的代碼，并將其保存，在之后的使用中會(huì)對(duì)這種方式進(jìn)行推廣，確保用戶寫出的代碼更緊湊，并得到更好的優(yōu)化。

Part 3 設(shè)計(jì)

讓你的設(shè)計(jì)工作流程速度加快并且更有效率，用下面這些重要工具來幫你完成設(shè)計(jì)工作吧。

ADOBE DREAMWEAVER CS6

www.wordpress.org

Dreamweaver是Adobe創(chuàng)意組件的一部分，它包括一個(gè)完整的設(shè)計(jì)和發(fā)展環(huán)境，可以讓你創(chuàng)建網(wǎng)站代碼或者設(shè)計(jì)新的網(wǎng)頁。整合服務(wù)器端和客戶端語言預(yù)覽和測(cè)試，并直接從編輯器實(shí)現(xiàn)先進(jìn)的用戶交互。它最好的價(jià)值來自于創(chuàng)造性的云服務(wù)。每月花費(fèi)46.88英鎊（約合430元人民幣）就會(huì)得到Adobe的其它工具，包括Phootoshop、Illustrator以及Muse、Typekit等等。

WORDPRESS

www.wordpress.org

Wordpress最開始是為了博客平臺(tái)創(chuàng)建博客并且把你的觀點(diǎn)分享給世界而設(shè)計(jì)的，但是最近已經(jīng)發(fā)展成熟，成為完全為創(chuàng)建和管理內(nèi)容而制定、擴(kuò)展的解決方案，它包括通過使用插件管理音頻和視頻內(nèi)容，使得它成為網(wǎng)站管理和調(diào)配的領(lǐng)頭兵。許多有活力的開發(fā)者開發(fā)了成千上萬相關(guān)的插件，有免費(fèi)的和商業(yè)的，包括電子商務(wù)、電子學(xué)習(xí)、門戶網(wǎng)站，以及其他一些應(yīng)用程序。

GOOGLE DOCS

www.docs.google.com

Google DOCS是一種基于云計(jì)算的免費(fèi)產(chǎn)品，可以代替微軟的Word和Excel，在調(diào)配到你的網(wǎng)站之前提供一個(gè)很好的儲(chǔ)存空間。運(yùn)用WYSIWYG就可以在一個(gè)瀏覽器頁面展示，它同時(shí)也是不同用戶之間協(xié)作的理想的選擇，允許所有方都來觀看內(nèi)容，同時(shí)做出調(diào)整。它可以付費(fèi)升級(jí)，但最基礎(chǔ)的版本是免費(fèi)的。

INKSCAPE

www.Inkscape.org

Inkscape是一種開放的可縮放矢量圖形（SVG）編輯器，為創(chuàng)造網(wǎng)站模型提供理想的環(huán)境。這種工具箱和Adobe的繪畫包相似。Inkscape創(chuàng)建的矢量圖形適合網(wǎng)頁的快速響應(yīng)，軟件有對(duì)應(yīng)Windows系統(tǒng)和Mac系統(tǒng)的版本。

FLEZILLA

www.filezilla.project.org

FileZilla 是一種開放的FTP客戶資源，它運(yùn)用于Windows、Mac和Linux。盡管它是免費(fèi)的，你會(huì)發(fā)現(xiàn)它的所有標(biāo)準(zhǔn)和商業(yè)中的是一樣的，包括FTP、FTP超過SSL/TLS、SSH。連接UogongnengFTP服務(wù)器之后，你可以很容易地創(chuàng)建連接快捷方式。對(duì)于網(wǎng)頁設(shè)計(jì)師來說，F(xiàn)TP是非常重要的工序，而FileZILLA在這方面會(huì)提供較好的服務(wù)。

WEB FONT SPECIMEN

www.webfontspecimen.com

這種免費(fèi)服務(wù)會(huì)讓你預(yù)覽網(wǎng)頁上的字體，包括有一系列行距和字體大小的段落，還有標(biāo)題和字體樣式，這使得瀏覽器上的頁面字體變得更加準(zhǔn)確和理想。

BOOTSTRAP

www.twitter.github.com/bootstrap/

這種快速的應(yīng)用發(fā)展工具會(huì)節(jié)省你很多時(shí)間。它會(huì)為你提供樣板文件包括JavaScript.CSS和優(yōu)化不同設(shè)備工作的響應(yīng)代碼標(biāo)記，包括平板電腦和智能手機(jī)，而不需要手動(dòng)操作集合和垂直所有能成為豐富應(yīng)用和網(wǎng)站工作的典型代碼，以及一些能夠提供出發(fā)點(diǎn)的有效的模板。它包括一個(gè)網(wǎng)站系統(tǒng)和排版導(dǎo)向功能，以及高級(jí)Javascript部件CSS組成部分。

HandBrake

www.Handbrake.fr

HandBrake讓設(shè)計(jì)師迅速轉(zhuǎn)化視頻，并且這個(gè)服務(wù)是免費(fèi)的。在你添加工作之前，僅僅需要選擇一個(gè)硬盤驅(qū)動(dòng)和輸出設(shè)置，包括正常的網(wǎng)絡(luò)選項(xiàng)。選擇同樣的文件最后導(dǎo)出不同的格式，快捷而不繁瑣。

Magento

www.magentocommerce.com

雖然Magento對(duì)一般用戶來講比較復(fù)雜和難學(xué)，但它仍為構(gòu)建企業(yè)的網(wǎng)上購(gòu)物平臺(tái)提供了極高的靈活性，并且可靠又安全。其特點(diǎn)包括，為構(gòu)建多線上購(gòu)物平臺(tái)、多種產(chǎn)品類型和幾百個(gè)支付服務(wù)提供商的系統(tǒng)提供支持。

GOOGLE WEB FONTS

www.google.com/fonts

如同其他的服務(wù)器一樣，谷歌的頁面字體在已經(jīng)過去的幾年發(fā)展起來，成為一個(gè)可以取代網(wǎng)頁安全字體的可靠替代物。這種舊式字體讓許多網(wǎng)站看起來趨于同化。它包括624中免費(fèi)使用的字體——其安裝程序也非常簡(jiǎn)單。把他們運(yùn)用到你的網(wǎng)站上很零散，所有的字體也不盡相同，但是商業(yè)用途的確一樣的。每一個(gè)網(wǎng)頁設(shè)計(jì)師都需要把谷歌免費(fèi)提供的字體收藏在工具箱中。

Part 4 樣式

讓你的設(shè)計(jì)工作流程速度加快并且更有效率，用下面這些重要工具來幫你完成設(shè)計(jì)工作吧。

ADOBE KULER

www.kuler.adobe.com

Adobe提供了一種瀏覽網(wǎng)頁并為其選擇色系的方法。那就是Adobe Kuler它包括上傳圖片和提供顏色樣本功能，而且該應(yīng)用整合到標(biāo)準(zhǔn)的Adobe設(shè)計(jì)工具中，從而減少了工作流程。

LAYER STYLES

www.layerstyle.org

Layer Styles是一種非常簡(jiǎn)單的網(wǎng)絡(luò)工具，它就像Photoshop的版面樣式工具箱。但是它沒有在Photoshop里面產(chǎn)生面板樣式。而是借助于CSS3代碼。你可以運(yùn)用到你的網(wǎng)站上，并且不需要注冊(cè)——只是當(dāng)你想要的時(shí)候把它標(biāo)記出來然后就可以訪問了，它會(huì)產(chǎn)生視覺上的版面樣式代碼。

ALOHA EDITOR

www.Aloha-editor.org

Aloha是一種兼容HTML5即視即所得（WYSIWYG）編輯器。這種編輯器可以跨瀏覽器工作，可以從用戶輸入信息產(chǎn)生標(biāo)注你的HTML代碼。通過可控組用戶選擇屬性，搜集豐富的用戶輸入信息，并且不會(huì)出現(xiàn)混亂無用的代碼以及跨度較大的代碼，而這往往就是老WYSIWYG編輯器往往產(chǎn)生的。

SPRITEBOX

www.spritebox.net

這種簡(jiǎn)單的在線應(yīng)用程序可以上傳CSS 樣式表貼圖定位，并且在上面畫線，以界定將用于CSS的不同區(qū)域。然后，該工具輸出CSS代碼并與所在區(qū)域進(jìn)行匹配，從而簡(jiǎn)化這個(gè)產(chǎn)生清晰畫面布局的過程。

SPLASHUP

www.splashup.com

Splashup是一種基于瀏覽器的免費(fèi)圖像編輯器，它可以讓你的電腦在不安裝任何軟件的情況下產(chǎn)生位映像圖形。這種應(yīng)用軟件融合了一些在線照相網(wǎng)址，包括Picasa 和flickr，并且提供與Photoshop類似的工具，可以免費(fèi)下載。

Part 5 開發(fā)

獲得這些現(xiàn)成工具、語言和框架可以讓你的開發(fā)進(jìn)程運(yùn)行得更順利。

JUICER

www.Bit.ly/xDXhW

這個(gè)命令行工具可以把JavaScript和CCS文件進(jìn)行組合、合并和優(yōu)化，減少你對(duì)網(wǎng)頁的依賴性，加快載入時(shí)間。最關(guān)鍵的一點(diǎn)在于，它讓你繼續(xù)用獨(dú)立文件來進(jìn)行開發(fā)，依照你的喜好將不同邏輯和水平的表現(xiàn)區(qū)分開來。重要的是最后它只會(huì)輸出一個(gè)單獨(dú)的CCS文件或者JS文件。

ANIMATE.CSS

www.daneden.me/animate/

Animate.CSS是一個(gè)使用標(biāo)準(zhǔn)CSS3規(guī)格，進(jìn)行完全渲染的預(yù)置CSS動(dòng)畫庫，它可以在任何支持CSS3的瀏覽器上工作。

VIDEO JS

www.Videojs.com

使用標(biāo)準(zhǔn)代碼可以給你的個(gè)人網(wǎng)站創(chuàng)造視頻元素，Video JS庫會(huì)自動(dòng)使用Adobe Flash，為不支持HTML5的瀏覽器生成后備代碼。即使瀏覽器不支持你的視頻解碼，這些后備代碼也可以使用，這樣就使用H264渲染HTML5的視頻，但這些解碼不可用的時(shí)候會(huì)回到Flash。

CAKEPHP

www.Cakephp.org

這是快速應(yīng)用程序開發(fā)的一款軟件，它為服務(wù)器端開發(fā)提供基礎(chǔ)，你不需要抓狂于創(chuàng)造所有的標(biāo)準(zhǔn)通道。對(duì)數(shù)據(jù)庫存取、確認(rèn)、認(rèn)證和轉(zhuǎn)化都提供支持。還有一系列樣板“腳手架”，它可以幫助你快速開發(fā)應(yīng)用原型，你不再需要擔(dān)心如何架構(gòu)系統(tǒng)。

HTML5 BOILERPLATE

www.html5boilerplate.com

這個(gè)簡(jiǎn)單的模版可以讓你快速開發(fā)一個(gè)HTML5使用的網(wǎng)頁設(shè)計(jì)。它還為響應(yīng)布局、智能手機(jī)觸摸圖標(biāo)和谷歌分析提供預(yù)建支持。除此之外還附帶有快速應(yīng)用程序開發(fā)最通用的庫——包括jQuery、Modernizr和Normalize.css。對(duì)于任何新的HTML5工程都是一個(gè)理想的開始，它可以省下你許多時(shí)間。

JQUERY

www.jQuery.com

jQuery是一個(gè)JavaScript框架和庫，它宣告了富用戶界面的到來，而且是網(wǎng)頁中不需要插件的高級(jí)用戶交互。

它讓創(chuàng)造動(dòng)畫、確認(rèn)和使用最少代碼的UI控制變得簡(jiǎn)單。

同樣非常功利的是它還對(duì)提取不同瀏覽器實(shí)現(xiàn)JavaScript和DOM的差別進(jìn)行提取，使得它自身運(yùn)行得更快。

GIT

www.git-scm.com

Git是一個(gè)免費(fèi)、開源的分布式版本控制系統(tǒng)，你可以用它控制你的網(wǎng)頁資產(chǎn)。它支持本地分支，分階段和部署。當(dāng)和線上資源庫GitHub進(jìn)行組合時(shí)，Git提供了一個(gè)特別可靠和有效的方法來注意代碼變化、控制通路和出版。許多的設(shè)計(jì)者從來不操心分布板式控制，但是如果你發(fā)現(xiàn)你自己儲(chǔ)存的文件都是用version2finalr3這樣的名字，你就會(huì)立刻感受到Git控制帶來的益處。

SENCHA TOUCH

www.sencha.com/products/touch

它可以幫助你開發(fā)移動(dòng)優(yōu)化網(wǎng)站，這樣讓你的網(wǎng)站看起來就像App一樣。

Sencha Touch提供了一個(gè)完全的開發(fā)環(huán)境——包括對(duì)智能手機(jī)的支持——這里只列出了觸摸屏和加速計(jì)。

雖然它使用特定的方法來生成視圖，還要求對(duì)于JavaScript要有充分的理解，但是它依舊是一個(gè)功能強(qiáng)大的平臺(tái)。

THREE.JS

www.Mrdoob.github.com/three.js/

網(wǎng)頁中的高級(jí)3D可視化渲染，如果使用three.js這樣的庫就會(huì)快很多也會(huì)容易很多。這個(gè)功能強(qiáng)大的框架可以處理更復(fù)雜的WebGL語言，讓網(wǎng)頁可以使用相機(jī)、燈光和基本形狀直接生成由簡(jiǎn)單到復(fù)雜的3D畫面。它還可以在不同的設(shè)備和渲染引擎上使用。

CHART.JS

www.chartjs.org

在瀏覽器內(nèi)生成圖表已經(jīng)變得越來越重要了，使用實(shí)時(shí)數(shù)據(jù)資源進(jìn)行解讀，并用視覺方式展示數(shù)據(jù)相比其他的資源庫。Chart.js可以在網(wǎng)頁開發(fā)中通過提供結(jié)構(gòu)框架來開發(fā)富界面圖表，讓開發(fā)過程變得更加簡(jiǎn)單和易上手。

Part 6 代碼

獲得這些現(xiàn)成工具、語言和框架可以讓你的開發(fā)進(jìn)程運(yùn)行得更順利。

ECSSTENDER

www.ecsstender.org

eCSStender是一個(gè)非常便利的工具，它允許你單獨(dú)編寫一段符合CSS標(biāo)準(zhǔn)的代碼，而不用去擔(dān)心前綴、瀏覽器特定解決方案和技巧問題。eCSStender會(huì)自動(dòng)拓展你的代碼，讓你的代碼可以適應(yīng)不同瀏覽器的特點(diǎn)。

COFFEESCRIPT

www.Jashkenas.github.com/coffee-script/

CoffeeScript是JavaScript中一種解釋語言。CoffeeScript編寫復(fù)雜程序時(shí)更輕松快捷，你不需要處理JavaScript中罕見的語法。它為快速應(yīng)用功能開發(fā)提供了一個(gè)更好的方式，從此以后你不會(huì)再被代碼本身所困。

GRID

www.Hashgrid.com

在你需要給網(wǎng)頁鑲?cè)胍粋€(gè)布局網(wǎng)格時(shí)，#grid會(huì)是一個(gè)很方便的工具。它允許你創(chuàng)建一個(gè)像素完美的布局，并且在不同瀏覽器上進(jìn)行測(cè)試。只需要一個(gè)鍵盤快捷鍵進(jìn)行激活，jQuery插件會(huì)自動(dòng)適應(yīng)你的首選網(wǎng)格大小，其中還包括了槽和多列。

PRIMER

www.primercss.com

這個(gè)簡(jiǎn)單又優(yōu)雅的小工具將你的HTML粘貼到一個(gè)空的CSS樣式表中，給你提供一個(gè)視覺效果的準(zhǔn)備。把標(biāo)記復(fù)制和粘貼到屏幕上的框里面，Primer會(huì)輸出一組空白的CSS節(jié)點(diǎn)。這些節(jié)點(diǎn)是基于IDs并由你的HTML進(jìn)行分類，并準(zhǔn)備應(yīng)用在相關(guān)類型中。這軟件適合那些喜歡編寫他們網(wǎng)站的代碼結(jié)構(gòu)，然后應(yīng)用相關(guān)類型的設(shè)計(jì)師。

JS BIN

www.Jsbin.com

JS Bin是在線JavaScript、HTML、CSS的開發(fā)和測(cè)試包，它幫助你快速地開發(fā)圓形和功能。你不再需要一般的標(biāo)準(zhǔn)標(biāo)記，或者手動(dòng)下載庫。它幫助你保存原型，并把原型轉(zhuǎn)換成許多的格式，然后可以在不同的庫中使用。你所需要做的只是點(diǎn)擊你的鼠標(biāo)。

Part 7 應(yīng)用程序

讓你的設(shè)計(jì)工作流程速度加快并且更有效率，用下面這些重要工具來幫你完成設(shè)計(jì)工作吧。

ADOBE AIR

www.adobe.com/products/air.html

Adobe Integrated Runtime（AIR）允許開發(fā)者打包為標(biāo)準(zhǔn)網(wǎng)頁技術(shù)編寫本地應(yīng)用程序，讓使用者可以在不同的設(shè)備中使用，包括Windows、Mac安卓APP市場(chǎng)、Kindle、iPhone和iPad。這讓網(wǎng)頁設(shè)計(jì)者可以使用現(xiàn)有的技術(shù)來創(chuàng)造復(fù)雜的電腦和手機(jī)應(yīng)用程序，同時(shí)讓設(shè)計(jì)者不需要再培訓(xùn)即可進(jìn)入新的收入流并賣出機(jī)遇。

EVERNOTE

www.evernote.com

Evernote是一個(gè)在線剪貼簿服務(wù)。你可以用它儲(chǔ)存、注釋和檢索廣泛資源中的一個(gè)片段。當(dāng)你研究一個(gè)特定工程的時(shí)候，這是一個(gè)理想的計(jì)劃和準(zhǔn)備工具。但是它也是在網(wǎng)頁設(shè)計(jì)和開發(fā)階段記錄和提交靈感的一個(gè)絕佳解決方案。

DOCHUB

www.dochub.io

DocHub是一個(gè)簡(jiǎn)便的參考文檔庫，其中包括在大量常規(guī)網(wǎng)頁技術(shù)有CSS、HTML、JavaScript、文檔對(duì)象模型（DOM）、jQuery和PHP。只要選擇一個(gè)技術(shù)，然后輸入搜索項(xiàng)來篩選文件列表并選取明確的解釋和代碼。

WEB DEVELOPER TOOLBAR

www.Chrispederick.com/work/web-developer/

Web Developer Toolbar曾是開發(fā)者們?cè)陂_發(fā)Chrome和Firefox網(wǎng)頁時(shí)很流行的軟件，不過現(xiàn)在依然值得在每個(gè)開發(fā)者的工具盒中。它提供大范圍的工具來幫助開發(fā)者詢問和分析瀏覽器中的網(wǎng)頁。這個(gè)工具的功能包括概括和辨認(rèn)DOM元素、直接在網(wǎng)頁上編輯風(fēng)格和控制腳本。

SPLASHUP

www.splashup.com

Splashup是一個(gè)基于瀏覽器的免費(fèi)圖片編輯器。你不需要安裝任何軟件就可以用它生成位圖表格。這個(gè)應(yīng)用軟件結(jié)合了大量在線圖片網(wǎng)站，比如Picasa和Flickr，還免費(fèi)提供了許多類似Photoshop一樣的工具下載。

Part 8 推廣

一旦建立了自己的網(wǎng)站，你需要做一些工作促使用戶瀏覽網(wǎng)站，并對(duì)網(wǎng)站有所期待。以下這些工具可以幫助你做到這些！

Facebook Developers

www.developer.facebook.com/

Facebook不僅僅是一種社交網(wǎng)絡(luò)，越來越多以用戶為中心的網(wǎng)站開始開發(fā)Facebook應(yīng)用。用戶可以點(diǎn)擊Facebook平臺(tái)提供的網(wǎng)頁內(nèi)容，可以更方便地分享內(nèi)容，幫助網(wǎng)站設(shè)計(jì)師進(jìn)入一個(gè)全新的市場(chǎng)，這是以前很難做到的事情。因此，開發(fā)者可以注冊(cè)Facebook開發(fā)程序，并借助Facebook平臺(tái)更好地完善獨(dú)立網(wǎng)頁開發(fā)。

ADD THIS

www.addthis.com

AddThis插件可以為用戶提供定制化的工具套件，并有意將其整合到網(wǎng)站設(shè)計(jì)中。該插件在操作上十分簡(jiǎn)單易懂，只需要選擇代表你所需功能和風(fēng)格的按鈕，然后將代碼復(fù)制/粘貼到相應(yīng)位置就完成了。你也可以查看分析和使用情況統(tǒng)計(jì)來幫助你提高網(wǎng)站社交網(wǎng)絡(luò)的作用，從而使AddThis成為有價(jià)值的推廣工具。

Google Analytics

www.google.co.uk/analytics/

谷歌分析工具提供全套分析和優(yōu)化數(shù)據(jù)，可以幫助你追蹤和監(jiān)測(cè)使用情況，管理轉(zhuǎn)換和目標(biāo)，同時(shí)改善用戶體驗(yàn)。和標(biāo)準(zhǔn)工具箱一樣，谷歌分析工具同樣適用于所有網(wǎng)站統(tǒng)計(jì)軟件。用戶點(diǎn)擊網(wǎng)站后可以通過該分析工具瀏覽實(shí)時(shí)數(shù)據(jù)，利用關(guān)鍵詞追蹤到最活躍的訪問者以及花在google上的錢都用在了哪些地方。AdWords可以提供最佳的投資回報(bào)。

SEO DOCTOR

www.addons.mozilla.org/en-us/firefox/addon/seo-doctor/

SEO DOCTOR每種擴(kuò)展程序都可以提供相同的功能，但需要通過處理共同的搜索引擎優(yōu)化（SEO）故障和錯(cuò)誤改善搜索引擎的網(wǎng)站性能，從而提高網(wǎng)站的流量。SEO DOCTOR的功能包括追蹤不可搜索的內(nèi)容、鏈接統(tǒng)計(jì)以及反饋HTML代碼中SEO功能的健康狀況。總的來說，這款入門級(jí)工具可以幫助開發(fā)者避免最常見的錯(cuò)誤。

HOOTSUITE

www.Hootsuite.com

由于社交網(wǎng)絡(luò)對(duì)市場(chǎng)營(yíng)銷和在線商業(yè)促銷起到越來越重要作用，因此現(xiàn)在必須積極利用網(wǎng)絡(luò)來為客戶提供更好的服務(wù)、更新網(wǎng)站訪問者、客戶以及推廣網(wǎng)站。HootSuite可以有效地把各種主流社交網(wǎng)絡(luò)融合到一個(gè)界面中，這樣可以監(jiān)測(cè)并追蹤網(wǎng)站上的互動(dòng)，推出狀態(tài)更新以及服務(wù)信息，可以更方便地維護(hù)客戶關(guān)系。

UX設(shè)計(jì)

在設(shè)計(jì)階段把精力集中在用戶體驗(yàn)路徑和網(wǎng)址結(jié)構(gòu)上可以避免最后出現(xiàn)不好的結(jié)果。畫出框架和流程圖，可以在這個(gè)階段節(jié)省很多時(shí)間。只要你貼上HTML標(biāo)簽，客戶便會(huì)在最終產(chǎn)品下線前對(duì)其有更明確的認(rèn)識(shí)。

首尾相連

最簡(jiǎn)單有效的測(cè)試方式是在開發(fā)過程中進(jìn)行檢查，而不是在項(xiàng)目最后，你需要首尾相連的檢查，但是太激進(jìn)的話會(huì)減少出故障的數(shù)目和檢測(cè)階段的時(shí)間。

框架

運(yùn)用框架來節(jié)省時(shí)間并且避免白費(fèi)力氣的重復(fù)工作。我們將會(huì)選擇一些普通卻很受歡迎的框架把它們列入我們50個(gè)必備的工具中。但事實(shí)上，還有許多框架有相同的優(yōu)點(diǎn)，因此，找到一個(gè)適合你的會(huì)加速你的開發(fā)。

資產(chǎn)

設(shè)想一下你怎樣再次使用你之前產(chǎn)生的資產(chǎn)，并且開始管理見的圖表和圖形文件在密茨進(jìn)行新的項(xiàng)目的時(shí)候方便尋找或者搜集新的資產(chǎn)。

社交

過去幾年內(nèi)，網(wǎng)站發(fā)展越來越以社交為導(dǎo)向，而且這種趨勢(shì)在短期內(nèi)不太可能改變。基于這個(gè)原因，網(wǎng)站開發(fā)者絕對(duì)有必要結(jié)合目前主要的一些社交網(wǎng)絡(luò)，并將其作為一種必要的手段來增加網(wǎng)站流量。

TIPS5——重新使用

在你開發(fā)的過程中給你的代碼添加一個(gè)好的評(píng)論，會(huì)便于你以后重新使用你代碼里面的元素。你可以在推出網(wǎng)頁之前利用預(yù)處理程序腳本刪除保留在開發(fā)文件中的評(píng)論。