|
求真務實 在所有設計原理中，這一條恐怕是最響亮的了——求真務實。不知道大家有沒有在公司里開會時聽到過這種口號：“開拓進取，求真務實?！睂嶋H上，除了作為企業(yè)的口號，它還是一條非常重要的設計原理，因為求真務實對于HTML的含義是：在解決那些令人頭痛的問題之前，先看看人們?yōu)閼獙@些問題都想出了哪些辦法。集中精力去理解這些“民間的”解決方案才是當務之急。 HTML 5中新的語義元素就是遵循求真務實原理的反映。新增的元素不算多，談不上無限的擴展性，但卻不失為一件好事。盡管數(shù)量屈指可數(shù)，但意義卻非同一般。這些新元素涉及頭部(header)、腳部(footer)、分區(qū)(section)、文章(article)……，相信大家都不會覺得陌生。我的意思是說，即便你不使用HTML 5，也應該熟悉這些稱呼，這些都是你曾經(jīng)使用過的類名，比如class=”header”/“head”/“heading”，或class=”footer”/“foot”。當然，也可能是ID，id=”header”，id=”footer”。這些不都是我們已經(jīng)司空見慣了的嘛。 好，舉個例子吧，假設你今天寫了下面這個文檔。
這里有一個div使用了id=”header”，另一個div使用了id=”navigation”，……。怎么樣，都輕車熟路了吧?在HTML 5中，這些元素都可以換掉。說起新增的語義元素，它們價值的一方面可以這樣來體現(xiàn)：“嘿，看啊，這樣多好，用HTML 5新增的元素可以把這些div都替換掉?！?/p>
當然了，你可以這樣做。在文檔級別上使用這些元素沒有問題。但是，假如新增這些元素的目的僅僅是為了取代原來的div，那就真有點多此一舉了。 雖然在這個文檔中，我們用這些新元素來替換的是ID，但在我個人看來，將它們作為類的替代品更有價值。為什么這么說呢?因為這些元素在一個頁面中不止可以使用一次，而是可以使用多次。沒錯，你可以為文檔添加一個頭部(header)，再添加一個腳部(footer);但文檔中的每個分區(qū)(section)照樣也都可以有一個頭部和一個腳部。而每個分區(qū)里還可以嵌套另一個分區(qū)，被嵌套的分區(qū)仍然可以有自己的頭部和腳部，是這樣吧? 這四個新元素：section、article、aside和nav，之所以說它們強大，原因在于它們代表了一種新的內容模型，一種HTML中前所未有的內容模型——給內容分區(qū)。迄今為止，我們一直都在用div來組織頁面中的內容，但與其他類似的元素一樣，div本身并沒有語義。但section、article、aside和nav實際上是在明確地告訴你——這一塊就像文檔中的另一個文檔一樣。位于這些元素中的任何內容，都可以擁有自己的概要、標題，自己的腳部。 其中最為通用的section，可以說是與內容最相關的一個。而article則是一種特殊的section。Aside呢，是一種特殊的section。最后，Nav也是一種特殊的section。 好，即便是現(xiàn)在，你照樣可以使用div和類來描述頁面中不同的部分，就像下面這樣：
其中包含可能是有關內容作者的元數(shù)據(jù)，而下面會給出一些鏈接，差不多就這樣。在HTML 5中，我完全可以說這塊內容就是一個文檔，通過對內容分區(qū)，使用section或article或aside，我可以說“這一塊完全是可以獨立存在的?！币虼耍耶斎豢梢允褂胔eader和footer。
請注意，即便是footer，也不一定非要出現(xiàn)在下面，不是嗎?這幾個元素，header、footer、aside、nav，最重要的是它們的語義;跟位置沒有關系。一想到footer這個詞，我們總會不由自主地想，“噢，應該放在下面?！蓖瑯樱覀儼補side想象成一個側邊欄?？墒牵绻憧匆豢匆?guī)范，就會發(fā)現(xiàn)這些元素只跟內容有關。因此，放在footer中的內容也可以是署名，文章作者之類的，它只是你使用的一個元素。這個元素并沒有說“必須把我放在文檔或者分區(qū)的下面?！?/p> 這里，請注意，最重要的還不是我用幾個新元素替換了原來的div加類，而是我把原來的H2換成了H1——震撼吧，我看到有人發(fā)抖了。我碰到過不少職業(yè)的Web開發(fā)人員，多年來他們一直認為規(guī)范里說一個文檔中只能有一個H1。還有一些自詡為萬能的SEO秘訣同樣說要這樣。很多SEO的技巧其實是很教條的。所謂教條，意思就是不相信數(shù)據(jù)。過去，這種教條表現(xiàn)為“不行，頁面中包含兩個以上的H1，你就會死掉的?！痹贖TML 5中，只要你建立一個新的內容塊，不管用section、article、aside、nav，還是別的元素，都可以在其中使用H1，而不必擔心這個塊里的標題在整個頁面中應該排在什么級別;H2、H3，都沒有問題。 這個變化太厲害了。想一想吧，這個變化對內容管理是革命性的。因為現(xiàn)在，你可以把每個內容分區(qū)想象一個獨立的、能夠從頁面中拿出來的部分。此時，根據(jù)上下文不同，這個獨立部分中的H1，在整個頁面中沒準會扮演H2或H3的角色——取決于它在文檔中出現(xiàn)的位置。面對這個突如其來的變化，也許有人的腦子會暫時轉不過彎來。不要緊，但我可以告訴你，我認為這才是HTML 5中這些新語義標記的真正價值所在。換句話說，我們現(xiàn)在有了獨立的元素了，這些元素中的標題級別可以重新定義。 我的文檔中可能會包含一個分區(qū)，這個分區(qū)中可能會嵌套另一個分區(qū)，或者一篇文章，然后文章再嵌套分區(qū)，分區(qū)再嵌套文章、嵌套分區(qū)，文章再嵌套文章。而且每個分區(qū)和文章都可以擁有自己的H1到H6。從這個意義上講，H元素真可謂“子子孫孫，無窮匱也”了。但是，在你在編寫內容或者內容管理系統(tǒng)的時候，它們又都是獨立的，完全獨立的內容塊。這才是真正的價值所在。 實際上，這個點子并不HTML 5工作組拍腦門想出來的，也不是W3C最近才提出來的。下面這幾句話摘自蒂姆·伯納斯-李1991年的一封郵件，郵件是發(fā)給丹·康納利(Dan Connolly)的。他在郵件中解釋了對HTML的理解，他說：“你知道……知道我的想法，我認為H1、H2這樣單調地排下去不好，我希望它成為一種可以嵌套的元素，或者說一個通用的H元素，我們可以在其中嵌套不同的層次?！钡髞?，我們沒有看到通用的H元素，而是一直在使用H1和H2——那是因為我們一直在支持已有的內容。20年后的今天，這個理想終于實現(xiàn)了。 平穩(wěn)退化 下一條原理大家應該都很熟悉了，那就是平穩(wěn)退化。畢竟，我們已經(jīng)遵守這條規(guī)則好多年了。漸進增強的另一面就是平穩(wěn)退化。 有關HTML 5遵循這條原理的例子，就是使用type屬性增強表單。下面列出了可以為type屬性指定的新值，有number、search、range，等等。
最關鍵的問題在于瀏覽器在看到這些新type值時會如何處理?，F(xiàn)有的瀏覽器，不是將來的瀏覽器，現(xiàn)有的瀏覽器是無法理解這些新type值的。但在它們看到自己不理解的type值時，會將type的值解釋為text。 無論你寫的是input type=”foo”還是input type=”bar”，現(xiàn)有的任何瀏覽器都會說：“嗯，也許作者的意思是text。”因而，你從現(xiàn)在開始就可以使用這些新值，而且你也可以放心，那些不理解它們的瀏覽器會把新值看成type=”text”，而這真是一個瀏覽器實踐平穩(wěn)退化原理的好例子。 比如說，你現(xiàn)在輸入了type=”number”。假設你需要一個輸入數(shù)值的文本框。那么你可以把這個input的type屬性設置為number，然后理解它的瀏覽器就會呈現(xiàn)一個可愛的小控件，像帶小箭頭圖標的微調控件之類的。對吧?而在不理解它的瀏覽器中，你會看到一個文本框，一個你再熟悉不過的文本框。既然如此，為什么不能說輸入type=”number”就會得到一個帶小箭頭圖標的微調控件呢? 當然，你還可以設置最小和最大值屬性，它們同樣可以平穩(wěn)退化。這是問題的關鍵。 再看input type=”search”。你也可以考慮一下這種輸入框，因為這種輸入框在Safari中會被呈現(xiàn)為一個系統(tǒng)級的搜索控件，右邊還有一個點擊即可清除搜索關鍵詞的X。而在其他瀏覽器中，你得到的則是一個文本框，就像你寫的是input type=”text”一樣，也就是你已經(jīng)非常熟悉的文本框。那為什么還不使用input type=”search”呢?它不會有什么副作用，沒有，對不對? HTML 5還為輸入元素增加了新的屬性，比如placeholder(占位符)。有人不知道這個屬性的用處嗎，沒有吧?沒錯，就是用于在文本框中預先放一些文本。不對，不是標簽(label)——占位符和標簽完全不是一回事。占位符就是文本框可以接受的示例內容，一般顏色是灰色的。只要你一點擊文本框，它就消失了。如果你把已經(jīng)輸入的內容全部刪除，然后單擊了文本框外部，它又會出現(xiàn)。 使用JavaScript編寫一些代碼當然也可以實現(xiàn)這個功能，但HTML 5只用一個placeholder屬性就幫我們解決了問題。 當然，對于不支持這個屬性的瀏覽器，你還是可以使用JavaScript來實現(xiàn)占位符功能。通過JavaScript來測試瀏覽器支不支持該屬性也非常簡單。如果支持，后退一步，把路讓開，樂享其成即可。如果不支持，可以再讓你的JavaScript來模擬這個功能。 現(xiàn)在，我不得不提到另一個話題了：HTML 5對Flash。也許你早聽說過了，或者在哪里看到了這方面的討論。說實話，我一點也不明白。我搞不懂人們怎么會僅僅憑自己的推測來展開爭論。 首先，他們所說的HTML 5對Flash，并不是指的HTML 5，也不是指的Flash。而是指HTML 5的一個子集和Flash的一個子集。具體來說，他們指的是視頻。因此，不管你在哪里聽到別人說“HTML 5對Flash”，那很可能說的只是HTML 5視頻對Flash視頻。 其次，一說HTML 5對Flash，就好像你必須得作出選擇一樣：你站在哪一邊?實際上不是這樣的。HTML 5規(guī)范的設計能夠讓你做到魚和熊掌兼得。 好，下面就來看看這個新的video元素;真是非常貼心的一個元素，而且設計又簡單，又實用。一個開始的video元素，加一個結束的video元素，中間可以放后備內容。注意，是后備內容，不是保證可訪問性的內容，是后備內容。下面就是針對不支持video元素的瀏覽器寫的代碼：
那么，在后備內容里面放些什么東西呢?好，你可以放Flash影片。這樣，HTML 5的視頻與Flash的視頻就可以協(xié)同起來了。你不用作出選擇。 當然，你的代碼實際
上并沒有這么簡單。因為這里我使用了H264，部分瀏覽器支持這種視頻格式。但有的瀏覽器不支持。 對不起，請不要跟我談視頻格式，我一聽就心煩。不是因為技術。技術倒無所謂，關鍵是會牽扯到一大堆專利還有律師、知識產(chǎn)權等等，這些都是Web的天敵，對我建網(wǎng)站一點好處都沒有。 可你實際上要做的，僅僅就是把后備內容放在那而已，后備內容可以包含多種視頻格式。如果愿意怕話，可以使用source元素而非src屬性來指定不同的視頻格式。
上面的代碼中包含了4個不同的層次。 1、如果瀏覽器支持video元素，也支持H264，沒什么好說的，用第一個視頻。 2、如果瀏覽器支持video元素，支持Ogg，那么用第二個視頻。 3、如果瀏覽器不支持video元素，那么就要試試Flash影片了。 4、如果瀏覽器不支持video元素，也不支持Flash，我還給出了下載鏈接。 不錯，一開始就能考慮這么周到很難得啊。有了這幾個層次，已經(jīng)夠完善了。 總之，我是建議你各種技術要兼顧，無論是HTML 5，還是Flash，一個也不能少。如果只使用video元素提供視頻，難免搬起石頭砸自己的腳，我個人認為。而如果只提供Flash影片，情況也好不到哪去，性質是一樣的。所以還是應該兩者兼顧。 為什么要兼顧這兩種技術呢?假設你需要面向某些不支持Flash的手持設備——只是舉個例子——提供視頻，你當然希望手持設備的用戶能夠看到視頻了，不是嗎? 至于為什么要使用不同的格式，為什么Flash視頻和音頻如此成功，我想可以歸結為另一個設計原理，即梅特卡夫定律(Metcalfe’s Law)： 網(wǎng)絡價值同網(wǎng)絡用戶數(shù)量的平方成正比。 梅特卡夫的這個定律雖然是針對電話網(wǎng)提出來的，但在很多領域里也是適用的。使用網(wǎng)絡的用戶越多，網(wǎng)絡的價值也就越大。人人都上Facebook，還不是因為人人都上Facebook嘛。雖然Facebook真正的價值不在于此，但只有人人都上才會讓它的變得如此有價值。 梅特卡夫定律也適用于傳真機。如果只有一個人購買了傳真機，當然沒有什么用處。但如果其他人也陸續(xù)購買了傳真機，那么他的投資會就得到回報。 當然，面對競爭性的視頻格式和不同的編碼方式，你感覺不到梅特卡夫定律的作用，我也很討厭以不同的方式來編碼視頻，但只向瀏覽器發(fā)送用一種方式編碼的視頻是行不通的。而這也正是Flash在視頻/音頻領域如此成功的原因。你只要把Flash影片發(fā)送給瀏覽器就好了，然后安裝了插件的瀏覽器都能正常播放。本質上講，F(xiàn)lash利用了梅特卡夫定律。
內容導航
|
|
|
