前言
"我的薪水卡是交通銀行的,但我經常在我家樓下的工商銀行提款機上取款;
我是上海人,我用國語可以和廣州的同學溝通;
今天水龍頭壞了,我去水暖商店買了一個新的換上;
我去法國旅遊,通知我法國的朋友在北京時間15:30分來接我。 "
生活中每天都發生類似的事情,這樣的事情似乎再正常不過的了,並沒有什麼特別之處。但是,你有沒有想過:
為什麼所有銀行卡的大小都是一樣的尺寸?
為什麼我用國語就能跟廣州同學交流?
為什麼買來的新水龍頭的螺口正好與老的水管能接上?
為什麼法國朋友不會接錯時間?
對於日常的很多事情,我們並沒有註意到這背後都有一個隱藏的「因素」在起作用,這個因素就是:標準。
有了“銀行卡的標準”,你就不用擔心不同銀行的卡大小不一樣,所有提款機的入卡口都一樣;
有了“普通話標準”,全國人民可以方便的進行語言交流;
有了“螺口的工業標準”,你買個6分的水龍頭就絕對可以可6分的水管接上;
有了“格林威治標準時間”,全世界的人們都不會接錯班機時間。
生活中各行各業都有自己對應的標準與規範,標準可以方便交流、促進協作、提升效率。
對於IT產業,設備的多樣性與資訊的多樣性更需要標準來確保它們之間的溝通與協作。我們可能在手機、印表機、數位相機之間互動資料;我們可能在網站、郵件和辦公室軟體之間傳遞訊息;我們可能要在未來新裝置(例如機上盒、資訊家電)中應用現有資源。如果沒有統一的標準,那麼現在所有的資訊都是孤立的、不可分享、不可重用的;我們需要浪費大量的人力物力重新為新設備建立數據;我們需要為每一次的多系統應用做專門的開發。
還好我們已經找到了解決的方案,這就是---XML。
XML簡單說就是一種“有規定格式的文件”,只要我們的設備或系統產生的資料都遵守這種格式,就可以實現互相的資料交換、分享與協作。
自從1998年國際萬維網組織(W3C.org)推出XML 1.0規範以來,已經有大量的XML標準在我們的生活中應用,例如我們用手機訂閱的天氣預報、股票行情,這些數據都是從相應的系統獲得然後透過XML格式轉換發送給你的;我們透過QQ或MSN上發送訊息到不在線的朋友手機上,這其中的信息也是透過XML轉換實現的;還有更多的商業應用,例如公司內部的CRM、ERP、內容管理系統之間的資料互動、整合與共享都應用了XML。
那麼,你自然會想到:網頁(web)是否也應該遵循XML標準呢?答案是肯定的。
萬維網出現以後,大大改變了人們的信息獲取方式,以前從報紙、電視、廣播上獲取信息,現在可以更方便的通過網絡,通過瀏覽器瀏覽獲得。 web上的信息也日益豐富,從一開始簡單的、靜態的文檔和圖片信息,到現在動態的、可交互的多媒體信息,web上的信息已經多到可以用“恐怖”來形容。去年底,google搜尋引擎已經能夠搜尋到82億張網頁和21億張圖片。這麼多的數據是財富,但是如果不能有效利用和搜尋就是「資訊垃圾」。而事實上,已經產生了資料冗餘和資訊無法有效共享、查詢的情況。
我們有99%的網站是採用HTML製作的,而HTML並不符合XML格式。因此這些網頁資訊都很難適應未來新設備和資料共享的要求。怎麼辦呢?國際萬維網組織(W3C.org)已經提出了解決辦法,他們在HTML基礎上,按照XML格式製定了新的規範XHTML1.0,只要透過簡單的改變,就能將HTML轉為XHTML,從而實現向XML的過渡。同時,為了讓你的頁面資訊更容易被搜尋和重複使用、XHTML的程式碼需要結構更清楚、標籤更有語義,W3C推薦使用CSS來控製表現,以實現內容與表現的相分離。
這也就是我們這本書要講的主題:用web標準技術重構你的網站。
一:了解web標準
1.什麼是web標準?
首先要明確一個概念。我們本書講的web標準,不是指XML,而是指為了實現大量HTML資訊向XML標準的過渡,W3C和ECMA制定的一系列的技術規範,目前主要包括XHTML1.0、CSS2.0、DOM1. 0和ECMA JavaScrit。 web標準不只是一個規範,而是一系列規範的總稱。
依照這些規範製作的網頁,符合XML格式規範,內容與表現相分離,將使你的頁面資料在以後可以被分享、交換和重複使用。
下面,讓我們一起了解一些重要的基礎知識。如果你已經掌握,可以跳過直接閱讀第二節。
2. 什麼是w3c?
W3C是「World Wide Web Consortium」的縮寫,中文稱萬維網組織。是一個專注於「領導和發展web技術」的國際工業產業協會。它由萬維網發明者Time Berners-Lee領導,成立與1994年。 W3C已經有超過500家的會員--包括微軟、美國線上(Netscape的母公司)、蘋果電腦、Adobe、Macromedia、SUN 以及各類主流硬體、軟體製造商和電信公司。學會主要研究由三家學術機構主理--美國麻省理工學院(MIT)、法國的歐洲資訊與數學研究論壇(ERCIM)、日本的應慶大學(KEIO)。
W3C主要工作是研究和製定開放的規範(事實上的標準),以便提高web相關產品的互用性。 W3C的推薦規範的製定都是由來自於會員和特別邀請的專家組成的工作小組完成。工作小組的草案(Drafts)在通過多數相關公司和組織同意後提交給W3C理事會討論,正式批准後才成為「推薦規範(Recommendations)」發布。更多的資訊您可以訪問W3C的網站: www.w3.org
3.W3C發布的標準
3.1 HTML4.0
HyperText Markup Language(HTML,超文本識別語言)廣泛用於現在的網頁,HTML目的是為文件增加結構信息,例如表示標題,
表示段落;瀏覽器可以解析這些文件的結構,並以對應的表現形式表現出來。例如:瀏覽器會將...之間的內容以粗體顯示。
設計師也可以透過CSS(Cascading Style Sheets)來定義某種結構以什麼形式表現出來。
3.2 XML1.0
XML是Extensible Markup Language(可擴充標識語言)的簡寫。 XML類似HTML也是識別語言,不同的地方是:HTML有固定的標籤,而XML允許你自己定義自己的標籤,甚至允許你透過XML namespaces為一個文件定義多套設定。看一個XML範例:
<addressbook>
<entry>
<name>AJIE</name><email>[email protected]</email>
</entry>
<entry><name>ALLAN</name><email>[email protected]</email>
</entry>
<entry><name>YAHOO</name><email>[email protected]</email>
</entry>
</addressbook>
一些XML的應用,例如XHTML和MathML,已經成為W3C推薦規範。你同樣可以透過樣式規範(CSS和XSL),來定義XML標籤的表現形式。 XML文件目前還無法直接用瀏覽器顯示,頁面展現仍採用HTML或XHTML,XML現在大多用於伺服器與伺服器(系統與系統)之間的資料交換。
3.3 CSS2.0
CSS是Cascading Style Sheets層疊樣式表的縮寫。透過CSS可以控制HTML或XML標籤的表現形式。 W3C建議使用CSS佈局方法,使得web更加簡單,結構更加清晰。
3.4 XHTML1.0
XHTML其實就是將HTML依照XML規格重新定義一次。它的標籤與HTML4.0一致,而格式嚴格遵循XML規範。因此,雖然XHTML與HTML在瀏覽器中一樣顯示,但如果你要轉換成PDF,那麼XHTML會容易的多。
XHTML有三種DTD定義:嚴格的(strict),過渡的(Transitional),框架的(Frameset)。 DTD是Document Type Definition文件類型定義的縮寫。它寫在XHTML檔案的最開始,告訴瀏覽器這個文件符合什麼規範,用什麼規範來解析。
3.5 DOM1.0
DOM是Document Object Model文檔物件模型的縮寫。 DOM給了腳本語言(類似ECMAScript)無限發揮的能力。它使腳本語言很容易存取整個文件的結構、內容和表現。
4 什麼是ECMA?
是「European Computer Manufactures Association」的縮寫,中文稱歐洲電腦製造聯合會。是1961年成立的旨在建立統一的電腦操作格式標準--包括程式語言和輸入輸出的組織。
ECMA位於日內瓦,和ISO(國際標準組織)以及IEC(國際電工標準化機構)總部相鄰,主要任務是研究資訊和通訊技術方面的標準並發布有關技術報告。 ECMA並不是官方機構,而是由主流廠商組成的,他們經常與其他國際組織合作。
4.1 ECMA發布的標準ECMAscript
ECMAscript是一種基於Netscape javaScript的標準腳本語言。它也是一種基於物件的語言,透過DOM可以操作網頁上的任何物件。可以增加、刪除、移動或改變物件。使得網頁的互動性大大提高。
上述標準是我們目前從HTML轉換成XML時期的主要標準,也是本書主要討論的範疇。
5.web標準的優勢
5.1 易用性
用web標準製作的頁面,對搜尋引擎更加“透明”,因為良好清晰的結構使得搜尋引擎能夠方便的判斷與評估信息,從而建立更精確的索引。以web標準製作的頁面也可以在較舊版本的瀏覽器中正常顯示基本結構,即使CSS/XSL樣式無法解析,它也能顯示完整的資訊和結構。
符合web標準的頁面也很容易被轉換成其他格式文檔,例如資料庫或word格式,也容易被移植到新的系統--硬體或軟體系統,例如網路電視、PDA等等。這是XML天生就具有的優勢。
符合web標準的頁面也具有天生的「易用性(accessibility)」,不僅僅是普通瀏覽器可以閱讀,那些有殘疾的人們也可以透過盲人瀏覽器、聲音閱讀器正常使用。
5.2 向後相容性
使用web標準建立的頁面,將在未來的新瀏覽器或新網路設備中很好的工作。我們只要修改CSS或XSL客製對應的表現形式就可以了。
二:web標準的思考與爭論
透過上文的介紹,我們已經初步了解為什麼W3C要建立XML標準,為什麼各大廠商都願意支援XML。也了解到為了向XML標準過渡,我們目前階段需要學習掌握的web標準有那些,接下來就是具體應用了。但我們發現應用也不如想像中那麼順利,依然有一堆的困難擺在我們面前:
有99%採用HTML4.0或更舊規範建立的網頁需要轉換到XHTML;
每天依然有大量的新的頁面採用不符合web標準的技術在發布;
缺乏易用的、強大的支援web標準的頁面開發軟體;
主流瀏覽器IE對web標準的支援不完善;
大批的設計師需要了解web標準,改變觀念;
其中「轉變觀念」是最重要、最困難的。許多設計師還不理解web標準,依然在觀望甚至反對。這裡我們來分析web標準推廣過程中遇到的典型問題與爭論:
(一)關於web標準
1.web標準並不是“標準”,我為什麼要遵守?
的確,web標準並不是標準,它只是W3C制定的建議規範,W3C並沒有強制要求和監督業界去執行。 web標準組織(webstandards.org)為了方便這些規範的推廣,才把它們統稱為「web標準」。雖然W3C制定的只是“推薦規範”,但它已經是事實上的標準,世界前500家大IT企業會員都認可的規範,你沒有理由懷疑它的廣泛性和可行性。微軟也是W3C的主要會員,它自己通過的規範一定會支持,但出於商業競爭的考慮,微軟通常都會做一些細節調整來綁定用戶,但這並不影響W3C規範的方向性和權威性。
2.DIV+CSS就是web標準嗎?
DIV+CSS只是具體的實現技術手段,並不能涵蓋web標準。 web標準不僅是HTML轉換到XHTML的,更重要的是資訊結構清晰、內容與表現分離,而DIV+CSS技術能較好的實現這種想法。因此,我們看到的多數符合標準的頁面都是採用DIV+CSS製作。
(二).關於web標準的好處
1.科技在進步,網路頻寬越來越大,速度越來也快,節省那點字節有意義嗎?
web標準的優點之一是:用web標準製作的頁面程式碼量小,可以節省頻寬。這只是web標準附帶的好處,因為DIV的結構本身就比TABLE簡單,TABLE佈局的層層嵌套造成程式碼臃腫,檔案尺寸膨脹。通常情況下,相同表現的頁面用DIV+CSS比用TABLE佈局的節省2/3的程式碼。這是web標準天生的好處。 至於節省頻寬的意義並不主要針對一般用戶,而主要針對網站經營者,特別是中大型網站,類似新浪、網易這樣的網站。一個新聞首頁從500K縮小到170k,假設一天的pageview是3000萬(保守數字),那麼節省的伺服器流量就是330k*30000000=9440G,這個成本的節約是可觀的。
2.我需要考慮殘障人士(盲人和弱視)嗎?
提供殘障人士網頁瀏覽方便是美國及歐洲一些國家的法律規定,由於web標準頁面的清晰結構、語意完整,一些相關設備能很容易的正確提取資訊給殘障人士。因此,方便盲人閱讀資訊也成為web標準的天生好處之一。至於有人說中國目前還有很多人為解決溫飽發愁,哪有時間考慮殘障人士。這是社會文明和社會道德問題,不在本書討論範疇。但如果你頁面以web標準製作了,就能達到這個效果,何樂而不為呢?
(三).關於佈局
1.web標準就不能用表格了嗎?
首先要澄清一個概念:web標準並不是不允許用TABLE標籤,TABLE也是XHTML1.0中的標準標籤。我們只是提倡用DIV+CSS佈局來取代傳統的table佈局。原因是:原來的TABLE佈局將表現和內容混雜在一起,結構不清晰、內容不完整,不利於內容的重複使用。而且從語意上講,W3C制定TABLE標籤時候只是用它來做表格結構定義的,文件中如果有表格,那麼就應該用TABLE。而排版、定位這些表現的東西應該由CSS來控制。
2.我用table版面改版也很方便,你用CSS不一定就比我效率高。
個別情況或個別項目,有可能像你說的,用table佈局改版也很快。但這不是長遠之計,我們需要透過現像看本質,web標準將內容與表現相剝離,所有樣式、風格、佈局等等表現的東西獨立出來,由CSS或者XSLT來單獨控制,這樣的剝離後,改版才是真正的方便。而且「改版」並不僅僅是瀏覽器上的改版,同樣的頁面如果我需要發佈到手機上,符合web標準的頁面就只需要修改樣式文件,而table佈局的則需要完全重做,未來如果還需要再發佈到網路電視上或其它新設備上呢? CSS的效率一定比table高。
3.用web標準能製作出漂亮的頁面嗎?
由於一開始研究和推廣web標準的人士做得頁面都比較“樸素”,因此引起大家的誤解,以為web標準的頁面就是簡潔、輕圖形、輕視覺效果的。實際上,用TABLE佈局能夠實現的頁面效果,用CSS基本上也能實現。這個問題不需要多解釋,看看國內外新成立的web標準網站就清楚了。例如: www.macromedia.com , www.mp3.com
(四).關於瀏覽器相容
1.我不需要關心web標準,IE佔有99%的市場,我做的頁面只要IE看就好了。
「以使用者為核心」通常都是反對web標準者的檔箭牌,實際上這是虛偽的「以使用者為核心」。你不能保證IE永遠是壟斷瀏覽器市場,你也不能保證IE不做任何改變(事實上,微軟的IE7已經開始改善對web標準的支援)。堅持用html+table佈局製作的頁面將是「死」的信息,不方便搜索,無法重用與共享,從長遠來講,這才是對用戶最大的傷害。
2.為什麼web標準的頁面相容性並不好?
我們說web標準的優點是相容性好,這個相容是指向後相容,向新瀏覽器、新裝置相容。對現有的瀏覽器來說,因為它們對web標準的支援程度不一樣,因此會出現不同瀏覽器下方頁面變形的情況。我們必須採用一些"hack"技巧來實現不同瀏覽器的兼容。這是無奈、也是不可避免的,是web技術發展必然經歷的過程,是我們向XML過渡必須克服的一個困難。
(五).其它
1.沒有好用的開發工具,難道要我手寫程式碼?
是的。我們建議你手寫程式碼,可以促進你更加深刻理解web標準。事實上,許多開發軟體已經開始支援web標準。你可以看看最新版的Dreamweaver 8,還有Adobe的Golive,微軟的Visual Studio.NET 2005,這些工具都已經很好的支援web標準頁面的開發。當新科技出現時,我們的態度應該是去了解、實踐和評估,而不是盲目反對或坐等其成,那樣你永遠都是落後者。
2.老闆不懂,客戶也沒要求,我為什麼要用web標準?
在自己或開發團隊都不熟悉web標準技術的情況下,新專案採用web標準的確有風險(技術與成本風險),可以評估後再決定是否採用web標準。但如果有能力採用標準依然蒙混老闆和客戶,這就屬於職業道德和敬業精神的問題。
三:未來與方向
我想你跟我一樣,都關心WEB的未來會是怎麼樣的,下一輪的新科技熱點在什麼方向。其實,要回答這個問題,沒有誰比W3C更有權威了。只要看看W3C在做什麼,正在研究什麼規範就知道WEB的走向與趨勢了。
W3C明確告訴我們:XML是未來的趨勢毋庸置疑,開放和分享是網路的精神和根本動力。
貝納斯-李(Tim Berners-Lee) ,W3C領導人,萬維網之父,說到:XML提供了資訊交換的手段,但這僅僅只是開始。我們的目標是web的語意化,即:使得web上的資訊內容更容易理解、更便於交換和分享,RDF和OWL語言將在這方面提供更強大的支援。
web技術即將迎接新一輪的變革和發展,如果你還在猶豫是不是需要學習web標準,那麼你將失去這次機會。