|
平穩(wěn)退化
下一條原理大家應(yīng)該都很熟悉了，那就是平穩(wěn)退化。畢竟，我們已經(jīng)遵守這條規(guī)則好多年了。漸進(jìn)增強(qiáng)的另一面就是平穩(wěn)退化。
有關(guān)HTML5遵循這條原理的例子，就是使用type屬性增強(qiáng)表單。下面列出了可以為type屬性指定的新值，有number、search、range，等等。
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
最關(guān)鍵的問題在于瀏覽器在看到這些新type值時(shí)會(huì)如何處理。現(xiàn)有的瀏覽器，不是將來的瀏覽器，現(xiàn)有的瀏覽器是無法理解這些新type值的。但在它們看到自己不理解的type值時(shí)，會(huì)將type的值解釋為text。
無論你寫的是input type=”foo”還是input type=”bar”，現(xiàn)有的任何瀏覽器都會(huì)說：“嗯，也許作者的意思是text。”因而，你從現(xiàn)在開始就可以使用這些新值，而且你也可以放心，那些不理解它們的瀏覽器會(huì)把新值看成type=”text”，而這真是一個(gè)瀏覽器實(shí)踐平穩(wěn)退化原理的好例子。
比如說，你現(xiàn)在輸入了type=”number”。假設(shè)你需要一個(gè)輸入數(shù)值的文本框。那么你可以把這個(gè)input的type屬性設(shè)置為number，然后理解它的瀏覽器就會(huì)呈現(xiàn)一個(gè)可愛的小控件，像帶小箭頭圖標(biāo)的微調(diào)控件之類的。對(duì)吧？而在不理解它的瀏覽器中，你會(huì)看到一個(gè)文本框，一個(gè)你再熟悉不過的文本框。既然如此，為什么不能說輸入type=”number”就會(huì)得到一個(gè)帶小箭頭圖標(biāo)的微調(diào)控件呢？
當(dāng)然，你還可以設(shè)置最小和最大值屬性，它們同樣可以平穩(wěn)退化。這是問題的關(guān)鍵。
再看input type=”search”。你也可以考慮一下這種輸入框，因?yàn)檫@種輸入框在Safari中會(huì)被呈現(xiàn)為一個(gè)系統(tǒng)級(jí)的搜索控件，右邊還有一個(gè)點(diǎn)擊即可清除搜索關(guān)鍵詞的X。而在其他瀏覽器中，你得到的則是一個(gè)文本框，就像你寫的是input type=”text”一樣，也就是你已經(jīng)非常熟悉的文本框。那為什么還不使用input type=”search”呢？它不會(huì)有什么副作用，沒有，對(duì)不對(duì)？
HTML5還為輸入元素增加了新的屬性，比如placeholder（占位符）。有人不知道這個(gè)屬性的用處嗎，沒有吧？沒錯(cuò)，就是用于在文本框中預(yù)先放一些文本。不對(duì)，不是標(biāo)簽（label）——占位符和標(biāo)簽完全不是一回事。占位符就是文本框可以接受的示例內(nèi)容，一般顏色是灰色的。只要你一點(diǎn)擊文本框，它就消失了。如果你把已經(jīng)輸入的內(nèi)容全部刪除，然后單擊了文本框外部，它又會(huì)出現(xiàn)。
使用JavaScript編寫一些代碼當(dāng)然也可以實(shí)現(xiàn)這個(gè)功能，但HTML5只用一個(gè)placeholder屬性就幫我們解決了問題。
當(dāng)然，對(duì)于不支持這個(gè)屬性的瀏覽器，你還是可以使用JavaScript來實(shí)現(xiàn)占位符功能。通過JavaScript來測(cè)試瀏覽器支不支持該屬性也非常簡(jiǎn)單。如果支持，后退一步，把路讓開，樂享其成即可。如果不支持，可以再讓你的JavaScript來模擬這個(gè)功能。
現(xiàn)在，我不得不提到另一個(gè)話題了：HTML5對(duì)Flash。也許你早聽說過了，或者在哪里看到了這方面的討論。說實(shí)話，我一點(diǎn)也不明白。我搞不懂人們?cè)趺磿?huì)僅僅憑自己的推測(cè)來展開爭(zhēng)論。
首先，他們所說的HTML5對(duì)Flash，并不是指的HTML5，也不是指的Flash。而是指HTML5的一個(gè)子集和Flash的一個(gè)子集。具體來說，他們指的是視頻。因此，不管你在哪里聽到別人說“HTML5對(duì)Flash”，那很可能說的只是HTML5視頻對(duì)Flash視頻。
其次，一說HTML5對(duì)Flash，就好像你必須得作出選擇一樣：你站在哪一邊？實(shí)際上不是這樣的。HTML5規(guī)范的設(shè)計(jì)能夠讓你做到魚和熊掌兼得。
好，下面就來看看這個(gè)新的video元素；真是非常貼心的一個(gè)元素，而且設(shè)計(jì)又簡(jiǎn)單，又實(shí)用。一個(gè)開始的video元素，加一個(gè)結(jié)束的video元素，中間可以放后備內(nèi)容。注意，是后備內(nèi)容，不是保證可訪問性的內(nèi)容，是后備內(nèi)容。下面就是針對(duì)不支持video元素的瀏覽器寫的代碼：
<video src="movie.mp4">
<!-- 后備內(nèi)容 -->
</video>
那么，在后備內(nèi)容里面放些什么東西呢？好，你可以放Flash影片。這樣，HTML5的視頻與Flash的視頻就可以協(xié)同起來了。你不用作出選擇。
<video src="movie.mp4">
<object data="movie.swf">
<!-- 后備內(nèi)容 -->
</object>
</video>
當(dāng)然，你的代碼實(shí)際上并沒有這么簡(jiǎn)單。因?yàn)檫@里我使用了H264，部分瀏覽器支持這種視頻格式。但有的瀏覽器不支持。
對(duì)不起，請(qǐng)不要跟我談視頻格式，我一聽就心煩。不是因?yàn)榧夹g(shù)。技術(shù)倒無所謂，關(guān)鍵是會(huì)牽扯到一大堆專利還有律師、知識(shí)產(chǎn)權(quán)等等，這些都是Web的天敵，對(duì)我建網(wǎng)站一點(diǎn)好處都沒有。
可你實(shí)際上要做的，僅僅就是把后備內(nèi)容放在那而已，后備內(nèi)容可以包含多種視頻格式。如果愿意怕話，可以使用source元素而非src屬性來指定不同的視頻格式。
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
上面的代碼中包含了4個(gè)不同的層次。
1、如果瀏覽器支持video元素，也支持H264，沒什么好說的，用第一個(gè)視頻。
2、如果瀏覽器支持video元素，支持Ogg，那么用第二個(gè)視頻。
3、如果瀏覽器不支持video元素，那么就要試試Flash影片了。
4、如果瀏覽器不支持video元素，也不支持Flash，我還給出了下載鏈接。
不錯(cuò)，一開始就能考慮這么周到很難得啊。有了這幾個(gè)層次，已經(jīng)夠完善了。
總之，我是建議你各種技術(shù)要兼顧，無論是HTML5，還是Flash，一個(gè)也不能少。如果只使用video元素提供視頻，難免搬起石頭砸自己的腳，我個(gè)人認(rèn)為。而如果只提供Flash影片，情況也好不到哪去，性質(zhì)是一樣的。所以還是應(yīng)該兩者兼顧。
為什么要兼顧這兩種技術(shù)呢？假設(shè)你需要面向某些不支持Flash的手持設(shè)備——只是舉個(gè)例子——提供視頻，你當(dāng)然希望手持設(shè)備的用戶能夠看到視頻了，不是嗎？
至于為什么要使用不同的格式，為什么Flash視頻和音頻如此成功，我想可以歸結(jié)為另一個(gè)設(shè)計(jì)原理，即梅特卡夫定律(Metcalfe’s Law)：
網(wǎng)絡(luò)價(jià)值同網(wǎng)絡(luò)用戶數(shù)量的平方成正比。
梅特卡夫的這個(gè)定律雖然是針對(duì)電話網(wǎng)提出來的，但在很多領(lǐng)域里也是適用的。使用網(wǎng)絡(luò)的用戶越多，網(wǎng)絡(luò)的價(jià)值也就越大。人人都上Facebook，還不是因?yàn)槿巳硕忌螰acebook嘛。雖然Facebook真正的價(jià)值不在于此，但只有人人都上才會(huì)讓它的變得如此有價(jià)值。
梅特卡夫定律也適用于傳真機(jī)。如果只有一個(gè)人購(gòu)買了傳真機(jī)，當(dāng)然沒有什么用處。但如果其他人也陸續(xù)購(gòu)買了傳真機(jī)，那么他的投資會(huì)就得到回報(bào)。
當(dāng)然，面對(duì)競(jìng)爭(zhēng)性的視頻格式和不同的編碼方式，你感覺不到梅特卡夫定律的作用，我也很討厭以不同的方式來編碼視頻，但只向?yàn)g覽器發(fā)送用一種方式編碼的視頻是行不通的。而這也正是Flash在視頻/音頻領(lǐng)域如此成功的原因。你只要把Flash影片發(fā)送給瀏覽器就好了，然后安裝了插件的瀏覽器都能正常播放。本質(zhì)上講，F(xiàn)lash利用了梅特卡夫定律。
出處：
責(zé)任編輯：bluehearts
上一頁 HTML5設(shè)計(jì)原理 [8] 下一頁 HTML5設(shè)計(jì)原理 [10]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 9 頁 HTML5設(shè)計(jì)原理 [9]
