網(wǎng)站重構(gòu)：應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)譯者序

時(shí)間：2023-02-18 07:54:01 | 來(lái)源：營(yíng)銷百科

時(shí)間：2023-02-18 07:54:01 來(lái)源：營(yíng)銷百科

網(wǎng)站重構(gòu)：應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)譯者序：一本好書，不僅僅帶來(lái)知識(shí)，更重要的是傳達(dá)一種理念、一種思想，引起我們更多的思考?！毒W(wǎng)站重構(gòu)》無(wú)疑就是這樣一本好書。它的出版猶如一聲春雷打破了網(wǎng)頁(yè)設(shè)計(jì)行業(yè)的沉寂，傳統(tǒng)技術(shù)方式受到挑戰(zhàn)并逐步被淘汰，Web標(biāo)準(zhǔn)技術(shù)成為行業(yè)新的標(biāo)準(zhǔn)和開(kāi)發(fā)指南。

n如果說(shuō)六年前，本書第1版出版時(shí)，我們還需要大聲呼喊，我們要重視和推廣Web標(biāo)準(zhǔn)理念。那么六年后，當(dāng)本書即將出版第3版的時(shí)候，Web標(biāo)準(zhǔn)已經(jīng)成為網(wǎng)頁(yè)設(shè)計(jì)行業(yè)的共識(shí)，成為Web開(kāi)發(fā)通用的技術(shù)標(biāo)準(zhǔn)，成為網(wǎng)頁(yè)設(shè)計(jì)師入門的基礎(chǔ)知識(shí)。

n關(guān)于作者

n作者Jeffrey Zeldman 是老牌的網(wǎng)頁(yè)設(shè)計(jì)師，也是Web標(biāo)準(zhǔn)技術(shù)的捍衛(wèi)者和'傳教士'。他在1998年創(chuàng)立的Web標(biāo)準(zhǔn)組曾經(jīng)幫助Netscape公司和微軟公司結(jié)束了瀏覽器私有技術(shù)之戰(zhàn)；他的工作小組長(zhǎng)期幫助和推進(jìn)瀏覽器（例如IE5、IE7等版本）對(duì)Web標(biāo)準(zhǔn)的支持。本書自2004年第1版出版以來(lái)已經(jīng)被翻譯為 15種語(yǔ)言，成為成千上萬(wàn)網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)網(wǎng)頁(yè)技術(shù)的重要指南書籍。由于Jeffrey Zeldman對(duì)Web標(biāo)準(zhǔn)技術(shù)的長(zhǎng)期推廣和堅(jiān)持，被《商業(yè)周刊》譽(yù)為'Web標(biāo)準(zhǔn)國(guó)王'。

n這是一本什么樣的書

n這是一本介紹Web標(biāo)準(zhǔn)的書籍。它是具有'里程碑'意義的書，已經(jīng)在Web發(fā)展過(guò)程中開(kāi)創(chuàng)一個(gè)嶄新的時(shí)代！

n它的'里程碑'意義對(duì)于中國(guó)的網(wǎng)站項(xiàng)目開(kāi)發(fā)者和網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)尤為深刻。在本書出版之前，中國(guó)幾乎所有的網(wǎng)頁(yè)開(kāi)發(fā)都采用表格布局法，《網(wǎng)站重構(gòu)》出版后，以'CSS布局'為典型代表的Web標(biāo)準(zhǔn)技術(shù)逐步為大家接受，直到今天被廣泛采用。Web標(biāo)準(zhǔn)技術(shù)不僅僅是一種技術(shù)的進(jìn)步和更替，更重要的是它的這種思想和理念，深深影響了這一代網(wǎng)頁(yè)設(shè)計(jì)師，讓我們開(kāi)始學(xué)會(huì)思考，在'漂亮'的頁(yè)面背后，我們長(zhǎng)期忽略并應(yīng)該關(guān)注的東西，包括：網(wǎng)站的成本、易用性、可維護(hù)性、SEO以及可訪問(wèn)性。

n《網(wǎng)站重構(gòu):應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)》的第1部分介紹了Web標(biāo)準(zhǔn)思想的產(chǎn)生、發(fā)展和推廣，讓我們了解采用Web標(biāo)準(zhǔn)的好處；書的第2部分結(jié)合實(shí)例，從技術(shù)細(xì)節(jié)上講解了如何采用Web標(biāo)準(zhǔn)技術(shù)進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)。通過(guò)閱讀本書，你可以了解：

n什么是Web標(biāo)準(zhǔn)？

nWeb標(biāo)準(zhǔn)有什么好處？

n如何采用Web標(biāo)準(zhǔn)技術(shù)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)？

n適合什么樣的人看

n這本書適合的讀者是：所有的網(wǎng)站設(shè)計(jì)師、開(kāi)發(fā)者和網(wǎng)站管理者。

n不論你是這一行業(yè)的新手還是資深人士，閱讀本書都將讓你獲益匪淺。管理者可以了解如何降低網(wǎng)站成本，如何獲得更多用戶；設(shè)計(jì)師可以領(lǐng)悟到'表現(xiàn)和結(jié)構(gòu)相分離'的真諦，用CSS自由地控制布局；開(kāi)發(fā)者可以掌握如何降低維護(hù)成本，如何重用內(nèi)容，如何延長(zhǎng)網(wǎng)站的壽命。

n對(duì)于已經(jīng)了解和熟悉Web標(biāo)準(zhǔn)的開(kāi)發(fā)者來(lái)說(shuō)，本書第3版增加了更多實(shí)用的內(nèi)容：

nWeb標(biāo)準(zhǔn)技術(shù)的最新發(fā)展動(dòng)態(tài)和方向；

n最新技術(shù)的介紹（包括HTML5、CSS3和網(wǎng)頁(yè)字體），以及這些技術(shù)將對(duì)網(wǎng)站產(chǎn)生怎樣的影響；

n更多的實(shí)例應(yīng)用和技術(shù)解決方案。

n譯者感言

n從本書第1版出版到現(xiàn)在已經(jīng)六年了，從Web標(biāo)準(zhǔn)'零'概念到目前行業(yè)內(nèi)的普遍運(yùn)用，不得不說(shuō)是一個(gè)令人驚喜的變化。中國(guó)的網(wǎng)頁(yè)設(shè)計(jì)師、開(kāi)發(fā)者、管理者跟上了這一輪的技術(shù)變革。Web標(biāo)準(zhǔn)在快速發(fā)展，雖然Web標(biāo)準(zhǔn)的思想核心依然是網(wǎng)站可用性，但隨著更新的設(shè)備出現(xiàn)和技術(shù)的發(fā)展，許多老的Web標(biāo)準(zhǔn)開(kāi)始淘汰，許多新的規(guī)范開(kāi)始醞釀和發(fā)展，例如HTML5、CSS3等。學(xué)無(wú)止境，我們的設(shè)計(jì)師和開(kāi)發(fā)者依然須要迎頭趕上。

n↓展開(kāi)全部?jī)?nèi)容

n前言回到頂部↑

n當(dāng)我和同事們?cè)?998年創(chuàng)建The Web Standards Project（網(wǎng)頁(yè)標(biāo)準(zhǔn)計(jì)劃小組，WaSP）的時(shí)候，我們并不知道有效的（valid）、語(yǔ)義化的標(biāo)記（semantic markup）會(huì)讓你的網(wǎng)站內(nèi)容更容易被Google發(fā)現(xiàn)。是的，它確實(shí)有這個(gè)效果，但在Google出現(xiàn)之前，那并不是我們關(guān)注Web標(biāo)準(zhǔn)的原因。20世紀(jì)90年代，一個(gè)網(wǎng)頁(yè)設(shè)計(jì)高手的定義是：能夠用5套代碼方案為他的客戶設(shè)計(jì)網(wǎng)站，讓它在以下瀏覽器中都能正確顯示：Netscape 3、Netscape 4、IE3、IE4以及其他非主流瀏覽器。

n如果還希望你的網(wǎng)站能在Netscape和微軟的IE3、IE4瀏覽器里實(shí)現(xiàn)一些其他功能，那么你將不得不在同一個(gè)頁(yè)面里使用兩種不兼容的腳本語(yǔ)言，每種語(yǔ)言又有兩個(gè)版本，總計(jì)四種不兼容的腳本語(yǔ)言。這些代碼又混雜在使用復(fù)雜的表格布局（table layouts）的HTML代碼里，結(jié)果就是：頁(yè)面上至少多了60%不必要的代碼。當(dāng)網(wǎng)站改版，重新設(shè)計(jì)，或者需要調(diào)整你的網(wǎng)站內(nèi)容時(shí)，你會(huì)發(fā)現(xiàn)除了更高的成本之外，修改也非常困難，因?yàn)閮?nèi)容和布局完全混雜在一起。

n圖1 對(duì)于站點(diǎn)擁有者來(lái)說(shuō)，遵循Web標(biāo)準(zhǔn)的一個(gè)巨大

n好處是：他的站點(diǎn)內(nèi)容更容易被用戶和搜索引擎找

n到

n對(duì)于我們這些WaSP發(fā)起人來(lái)說(shuō)，所有瀏覽器的私有代碼都會(huì)嚴(yán)重威脅到Web發(fā)展。它導(dǎo)致每個(gè)網(wǎng)站至少浪費(fèi)25%的開(kāi)發(fā)時(shí)間，從而成本提高至少25%。而且，如果在1998年設(shè)計(jì)一個(gè)簡(jiǎn)單網(wǎng)站就需要寫5套代碼，那么未來(lái)的網(wǎng)頁(yè)設(shè)計(jì)會(huì)變成什么樣子？如果瀏覽器廠商為了競(jìng)爭(zhēng)，故意推出不兼容的私有代碼，那么我們這場(chǎng)自從印刷術(shù)發(fā)明以來(lái)最激動(dòng)人心的出版和通信技術(shù)進(jìn)步會(huì)不會(huì)倒退？10年以后，我們是不是制作一個(gè)簡(jiǎn)單網(wǎng)站，就需要花費(fèi)12倍的成本，寫12套代碼才能實(shí)現(xiàn)？

nWeb標(biāo)準(zhǔn)——語(yǔ)義（X）HTML標(biāo)記、CSS布局、基于JavaScript的不沖突腳本編程和DOM，是以上所有問(wèn)題的解決方案。而且，一直以來(lái)，WaSP和其他組織對(duì)標(biāo)準(zhǔn)的倡導(dǎo)，最終說(shuō)服了那些瀏覽器廠商支持標(biāo)準(zhǔn)，以及更多的專業(yè)人士來(lái)使用標(biāo)準(zhǔn)。

n使用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)的好處（如圖1所示），將在本書第1部分詳細(xì)解釋，它們包括如下內(nèi)容。

n恰當(dāng)?shù)恼Z(yǔ)義化標(biāo)記將使你的網(wǎng)站內(nèi)容更容易被用戶和搜索引擎找到。只要將代碼從無(wú)語(yǔ)義的表格布局轉(zhuǎn)換成結(jié)構(gòu)良好的語(yǔ)義標(biāo)記，網(wǎng)站就可以提高在搜索引擎結(jié)果列表中的位置，提升它們的Alexa排名，并提高其他可發(fā)現(xiàn)性（Findability）的指標(biāo)。（可發(fā)現(xiàn)性，是標(biāo)準(zhǔn)化的重要指標(biāo)，以衡量搜索引擎優(yōu)化（SEO）帶來(lái)的好處。）

n將網(wǎng)站的表現(xiàn)從結(jié)構(gòu)和行為中剝離出來(lái)，使你的開(kāi)發(fā)和測(cè)試更加容易，也更加便利，可以降低你的總預(yù)算，或者讓你在網(wǎng)站可用性和內(nèi)容開(kāi)發(fā)方面的現(xiàn)金投入更寬裕。

n將網(wǎng)站的表現(xiàn)從結(jié)構(gòu)和行為中剝離出來(lái)，使你的網(wǎng)站更輕量級(jí)，從而提高性能。

n將網(wǎng)站的表現(xiàn)從結(jié)構(gòu)和行為中剝離出來(lái)，使用適當(dāng)?shù)挠姓Z(yǔ)義的標(biāo)記，使你的網(wǎng)站更容易被各種瀏覽器和不同設(shè)備訪問(wèn)，包括移動(dòng)設(shè)備和給殘疾人士使用的瀏覽工具，例如屏幕閱讀器和其他輸入替代設(shè)備。使用Web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)站同樣有利于提供手機(jī)版本，如果你希望推出網(wǎng)站的手機(jī)版本，采用標(biāo)準(zhǔn)會(huì)使它變得更容易。而且在某些情況下可能根本就不需要推出手機(jī)版本，當(dāng)然這也取決于你的網(wǎng)站內(nèi)容。

n使用Web標(biāo)準(zhǔn)而不是瀏覽器私有的代碼設(shè)計(jì)網(wǎng)站，更加適應(yīng)未來(lái)的發(fā)展。如果你的網(wǎng)站正確采用HTML 4.01或者XHTML 1.0，并用CSS2布局，將得到各種瀏覽器的永久支持，即使HTML5、CSS3或者其他新的規(guī)范已經(jīng)確定下來(lái)，甚至它們得到將來(lái)新的瀏覽器的出色支持，你采用現(xiàn)在的Web標(biāo)準(zhǔn)制作的網(wǎng)站仍將完美工作。而非標(biāo)準(zhǔn)的網(wǎng)站則沒(méi)這么幸運(yùn)，在好一點(diǎn)的情況下，它們會(huì)出現(xiàn)混亂，不好的話，網(wǎng)站將停止工作。

n本書前兩個(gè)版本已經(jīng)翻譯成15種語(yǔ)言，從保加利亞到韓國(guó)，基于標(biāo)準(zhǔn)的設(shè)計(jì)概念和方法已經(jīng)被廣泛地介紹給世界上成千上萬(wàn)的設(shè)計(jì)師和開(kāi)發(fā)者，以及他們的客戶。自從本書2003年開(kāi)始銷售以來(lái)，幾乎所有承包商或自行開(kāi)發(fā)的公司都已經(jīng)有了至少一位Web標(biāo)準(zhǔn)的擁護(hù)者。這個(gè)行業(yè)在不斷發(fā)展，不再只是那些領(lǐng)先的設(shè)計(jì)師們擁抱Web標(biāo)準(zhǔn)了，也不再只有那些前衛(wèi)的承包商宣稱自己在基于標(biāo)準(zhǔn)的設(shè)計(jì)方面很專業(yè)了。

n而當(dāng)本書的第3版面世的時(shí)候，Web標(biāo)準(zhǔn)已經(jīng)成為了設(shè)計(jì)主流，設(shè)計(jì)師和開(kāi)發(fā)者開(kāi)始爭(zhēng)論CSS3，甚至不少人已經(jīng)開(kāi)始嘗試微格式（microformats）和HTML5；符合Web標(biāo)準(zhǔn)現(xiàn)已成為包括蘋果、Google、Opera、Adobe、微軟等公司以及開(kāi)源社區(qū)的軟件必備項(xiàng)目。

n這個(gè)版本經(jīng)過(guò)了大幅度修訂和重寫，并重新組成了以下兩個(gè)部分。

n書的第1部分解釋了傳統(tǒng)的設(shè)計(jì)方法帶來(lái)的問(wèn)題以及Web標(biāo)準(zhǔn)如何解決這些問(wèn)題。同時(shí)也提供了充足的論據(jù)給那些需要'推銷'基于標(biāo)準(zhǔn)設(shè)計(jì)方案給那些仍然對(duì)標(biāo)準(zhǔn)持懷疑態(tài)度的客戶、同事和老板的人。我們繼續(xù)探查不斷擴(kuò)展的Web標(biāo)準(zhǔn)體系，展示新老標(biāo)準(zhǔn)是如何將整個(gè)網(wǎng)絡(luò)變成一個(gè)動(dòng)態(tài)的、有著眾多的應(yīng)用和高可訪問(wèn)性、可發(fā)現(xiàn)性（以及漂亮的外觀）的內(nèi)容平臺(tái)。在第一部分的結(jié)尾我們展望一下Web的未來(lái)。

n書的第2部分為讀者介紹了XHTML、HTML5和CSS，以及（更重要的）結(jié)構(gòu)化，語(yǔ)義化的標(biāo)記原則；簡(jiǎn)潔的、健壯的、優(yōu)化的CSS布局，以及不沖突的腳本編程（unobtrusive scripting）。之后是側(cè)邊欄在布局和易用性上的重要性。在第2部分結(jié)尾，我們將深入一些網(wǎng)站設(shè)計(jì)項(xiàng)目去揭示它們關(guān)于標(biāo)準(zhǔn)的秘密。

n我很感激我的新合著作者Ethan Marcotte、我們的編輯Erin Kissane，以及技術(shù)編輯Aaron Gustafson，沒(méi)有比這更好的團(tuán)隊(duì)了。如果這是一本好書，那么就感謝這些伙計(jì)吧。

n第一次接觸Web標(biāo)準(zhǔn)的新朋友，歡迎你們！還有那些早已經(jīng)和我們共渡旅程的老朋友，歡迎你們回來(lái)！