itAcademia.com

HTML5 到底是什麼?

除非你與世隔絕,否則,一定聽到過關於HTML5的各種聲音,HTML5表面上看是用來取代Flash Web視頻的,然而,它的使命遠不止此。HTML5是下一代Web語言,它不單單是一種標記語言,更為下一代Web提供了全新功能,並將引領下一代Web實現類似桌面的應用體驗。

Sorry, this article is for Chinese only at the moment.

HTML5 主要新功能

  • 本地音頻視頻播放
  • 動畫
  • 地理信息
  • 硬件加速
  • 本地運行(即使在Internet 連接中斷之後)
  • 本地存儲
  • 從桌面拖放文件到瀏覽器上傳
  • 語義化標記

HTML5 應用現狀

現今,各大瀏覽器對HTML5的支持各有千秋,我們期待著他們在一兩年內趨向一致,你可能以為,既然這樣,現在大概很少人在使用這個未來的標準,事實並不如此,HTML5現在已經被廣泛應用,正如William Gibson所言,未來的Web已經來臨,只是還沒有被廣泛採用。
你可能不知道,Google的首頁也使用HTML5,不過,目前,他們還僅僅使用了HTML5的doctype,頁面的其它部分還是舊代碼,但Google在他們的各種應用中已經在廣泛採用HTML5。最典型的例子是Gmail,HTML5的離線存儲使用戶即使在離線狀態下也可以使用Gmail,另外,Google Docs也使用離線存儲,同樣使用離線存儲的其它廠商的類似應用還包括Zoho的辦公套件和Wordpress的博客平台。如果你對HTML5的離線存儲功能感興趣,可以看一看Mark Pilgrim的how to add offline support to your apps一文。

Scribd 基於HTML5 的文檔閱讀器

上圖是Scribd 的新文檔閱讀器,全部基於Web 標準,並未借助Flash。
除了 ​​視頻,HTML5還可以在多個方面取代Flash,文檔共享站點Scribd最近宣布,他們將使用HTML5取代Flash實現文檔閱讀器,Scribd是HTML5結合CSS所能實現的驚人功能的最好例子,他們還使用@font-face實現個性化字體,另外,在翻頁時的變換效果也完全基於CSS3。這些Web標準工具的結合使用,使Scribd實現了從Flash向純HTML的過度,同時並沒有犧牲文檔在結構,字體,內嵌圖片,圖層等方面的功能。Scribd的最新文檔閱讀器甚至支持IE6,這裡有一個實例,使用純HTML輸出複雜的公式。
可惜被牆了- 譯者

HTML5 Canvas 與HTML5 視頻

基於HTML5 Canvas 對象的Invaders 經典遊戲
雖然,Scribd對Canvas的應用已經出神入化,我們還能找到更多這樣的站點。Canvas Demos有一系列關於Canvas的應用,從各種在線遊戲,到從網頁上提取顏色的Rainbow應用。
關於視頻,最典型的例子莫過於YouTube和Vimeo,他們都提供了HTML5版本。

HTML5 地理信息定位

點擊地圖中,黃色小人上方的圓圈,可以告訴Google 地圖你的地理位置
HTML5的另一個功能是地理信息定位功能,一些瀏覽器提供了geolocation API,這個API也由W3C管理,可以結合HTML5實現你當前地理位置定位。Google Maps在使用該功能,在Google地圖上,有一個小圓圈,點擊一下,就能告訴Google地圖你現在的地理位置。目前,Geolocation API並沒有被眾多桌面瀏覽器廣泛採用(只有Chrome和Firefox 3.6+採用了),但Google Gears插件可以幫助那些舊瀏覽器實現該功能。
Twitter藉此實現地理信息感知的tweets消息,當瀏覽器支持geolocation API的時候,會自動使用該API,否則,則使用Google Gears。

HTML5 的更多意義

HTML5 的意義遠不止上面這些,它最大的意義在於改變了Web 文檔的結構方式,借助header, footer, section, article 這些標籤,我們可以實現更具結構化,語義化的Web 文檔。這樣,搜索引擎可以更容易索引Web 站點,我們也可以搜索到更快,更準確的信息。
已經有數不清的站點在使用HTML5新標籤,你可以在HTML5Gallery找到大量這樣的站點。
另外,借助Microdata, HTML5還可以實現更強大的語義結構,這個標準化的數據格式(類似microformats),可以讓你的站點不僅能夠提供數據,還能提供數據定義。Microdata對瀏覽器和搜索引擎都意義深遠,搜索引擎可以藉助Microdata發現你網絡中的好友,而瀏覽器則可以藉此連接到你的社會網絡好友站點,你可以在Google的Rich Snippets Testing Tool對此進行體驗。

相關活動及課程

[list style=”arrow” color=”black”]

[/list]

About itAcademia

itAcademia.com, fully supported by Form.Welkin Creative Technology Training, is a knowledge exchange network for everyone to get the latest IT skills, and further be certified by professional credential.

itAcademia: Learn it, share it and Certified it.

Who’s Online

Profile picture of LydiaelorIY

Join us on Facebook

Facebook By Weblizar Powered By Weblizar

Contact Us

phone-white (852) 3605 3322 | 3605 3377
phone-white (852) 3605 3399 | 3605 3398
phone-white (852) 5415 7749
phone-white info@formwelkin.com

phone-white Central Address :
2/F, Chinachem Tower, 34-37 Connaught Road Central, Hong Kong
phone-white Mongkok Address :
3/F, Righteous Centre, 585 Nathan Road, Mongkok, Kowloon

phone-white Form.Welkin :
http://www.formwelkin.com
phone-white Welkin Training :
http://www.welkin.com.hk
phone-white Welkin Events :
http://wevents.hk

top
2015 Form.Welkin Limited. All Right Reserved.