開發設計人員開始使用HTML5的十大原因

  你難道還沒有考慮使用HTML5? 當然我猜想你可能有自己的原因;它現在還沒有被廣泛的支持,在IE中不好使,或者你就是喜歡寫比較嚴格的XHTML代碼。HTML5是web開發世界的一次重大的改變,事實上不管你是否喜歡,它都是代表著未來趨勢。其實HTML5並不難理解和使用。我們這裡能列出許多原因為什麼現在要開始使用HTML5。

  目前有很多的文章介紹使用HTML5並且介紹瞭使用它的優勢和好處,沒錯,我們這篇文章也類似。隨著更多這樣的文章,以及Apple的支持, Adobe圍繞HTML5的產品開發,以及移動flash的死亡,如此多網站的支持,我想對那些仍舊沒有或者不想接受它的人說一些話。我認為主要得原因是,它看起來像一個神秘的東西。很多感覺它像噴氣背包或者飛行汽車。一個未經驗證的非凡想法但是並不實際。但是事實上現在已近非常的實際瞭。

  為瞭解密HTML5並且幫助頑固的開發設計人員,我這裡寫瞭列出瞭使用HTML5的幾大原因,希望對大傢有幫助!

  第十大原因:易用性

  倆個原因使得使用HTML5創建網站更加簡單:語義上及其ARIA。新的HTML標簽像.header., .footer.,.nav.,.section., .aside.等等,使得閱讀者更加容易去訪問內容。在以前,即使你定義瞭class或者ID你的閱讀者也沒有辦法去瞭解給出的一個div究 竟是什麼。使用新的語義學的定義標簽,你可以更好的瞭解HTML文檔,並且創建一個更好的使用體驗。

  ARIA是一個W3C的標準主要用來對HTML文章中的元素指定角色,通過角色屬性來創建重要的頁面地形例如,header,footer,navigation或者aritcle很有必要。這一點曾經被忽略掉瞭並且沒有被廣泛使用,因為事實上並不驗證。然而,HTML5將會驗證這樣屬性。同時,HTML5將會內建這些角色並且無法不覆蓋。更多的HTML5和ARIA討論,請大傢查看這裡。

  第九大原因:視頻和音頻支持

  忘瞭flash和其它第三方應用吧,讓你的視頻和音頻通過HTML5標簽.video.和.audio.來訪問資源。正確 播放媒體一直都是一個非常可怕的事情,你需要使用.embed.和.object.標簽,並且為瞭它們能正確播放必須賦予一大堆的參數。你的媒體標簽將會非常復雜,大堆得令人迷惑的代碼。而且HTML5視頻和音頻標簽基本將他們視為圖片:.video src=/.。但是其它參數例如寬度和高度或者自動播放呢?不必擔心,隻需要像其它HTML標簽一樣定義:.video src=url width=640px height=380px autoplay/.。

  實際上這個過程非常簡單,然而我們的老瀏覽器可能並不喜歡我們的HTML5,你需要添加更多代碼來讓他們正確工作。但是這個代碼還是比.embed.和.object.來的簡單的多。

  第八大原因:Doctype

  沒錯,就是doctype,沒有更多內容瞭。是不是非常簡答?不需要拷貝粘貼一堆無法理解的代碼,也沒有多餘的head標簽。最大的好消息在於,除瞭簡單,它能在每一個瀏覽器中正常工作即使是名聲狼藉的IE6。

  第七大原因:更清晰的代碼

  如果你對於簡答,優雅,容易閱讀的代碼有所偏好的話,HTML5絕對是一個為你量身定做的東西。HTML5允許你寫出簡單清晰富於描述的代碼。符合語義學的代碼允許你分開樣式和內容。看看這個典型的簡單擁有導航的heaer代碼:

  .div id=header.

  .h1.Header Text./h1.

  .div id=nav.

  .ul.

  .li..a href=#.Link./a../li.

  .li..a href=#.Link./a../li.

  .li..a href=#.Link./a../li.

  ./ul.

  ./div.

  ./div.

  是不是很簡單?但是使用HTML5後會使得代碼更加簡單並且富有含義:

  .header.

  .h1.Header Text./h1.

  .nav.

  .ul.

  .li..a href=#.Link./a../li.

  .li..a href=#.Link./a../li.

  .li..a href=#.Link./a../li.

  ./ul.

  ./nav.

  ./header.

  使用HTML5你可以通過使用語義學的HTML header標簽描述內容來最後解決你的div及其class定義問題。 以前你需要大量的使用div來定義每一個頁面內容區域,但是使用新 的.section.,.article.,.header.,.footer.,.aside. 和.nav.標簽,需要你讓你的代碼更加清晰易於閱讀。

  第六大原因:更聰明的存儲

  HTML5中最酷的特性就是本地存儲。有一點像比較老的技術cookie和客戶端數據庫的融合。它比cooke更好用因為支持多個windows存儲,它擁有更好的安全和性能,即使瀏覽器關閉後也可以保存。

  因為它是個客戶端的數據庫,你不用擔心用戶刪除任何cookie,並且所有主流瀏覽器都支持。

  本地存儲對於很多情況來說都不錯, 它是HTML5工具中一個不需要第三方插件實現的。能夠保存數據到用戶的瀏覽器中意味你可以簡單的創建一些應用特性例如:保存用戶信息,緩存數據,加載用戶上一次的應用狀態。

  第五大原因:更好的互動

  我們都喜歡更好的互動,我們都喜歡對於用戶有反饋的動態網站,用戶可以享受互動的過程。輸入.canvas.,HTML5的畫圖標簽允許你做更多的互動和動畫,就像我們使用Flash達到的效果。

  除瞭.canvas.,HTML5同樣也擁有很多API允許你創建更加好的用戶體驗並且更加動態的web應用程序。 這裡有一個列表:

  Drag and Drop (DnD)

  Offline storage database

  Browser history management

  document editing

  Timed media playback

  第四大原因:遊戲開發

  沒錯, 你可以使用HTML5的.canvas.開發遊戲。HTML5提供瞭一個非常偉大的,移動友好的方式去開發有趣互動的遊戲。如果你開發Flash遊戲,你就會喜歡上HTML5的遊戲開發。

  Script-tutorials目前提供瞭4個不部分的HTML5遊戲開發教程,這裡看看他們開發的有趣遊戲:

  HTML5 Gaming Development Lesson One

  HTML5 Gaming Development Lesson Two

  HTML5 Gaming Development Lesson Three

  HTML5 Gaming Development Lesson Four

  第三大原因: 遺留及其跨瀏覽器支持

  你的現代流行瀏覽器都支持HTML5(Chrome,Firefox,Safari,IE9和Opera),並且創建瞭HTML5 doctype這樣所有的瀏覽器,即使非常老非常令人厭惡瀏覽器像IE6都可以使用。但是因為老的瀏覽器能夠識別doctype並不意味它可以處理 HTML5標簽和功能。幸運的是,HTML5已經使得開發更加簡單瞭,更多支持更多瀏覽器,這樣老的IE瀏覽器可以通過添加javascript代碼來使 用新的元素:

  .!–[if lt IE 9]. .script src=/svn/trunk/html5.js../script. .![endif]–.

  第二大原因: 移動,移動還是移動

  你可以稱之為直覺,但是我認為移動技術將會變得更加的流行。我知道,這裡有些非常瘋狂的猜測,有些可能你也想到瞭 – Mobile是一個時尚!移動設備將占領世界。更多的接受移動設備將會增長的非常迅速。這意味著更多的用戶會選擇使用移動設備訪問網站或者web應用。 HTML5是最移動化的開發工具。隨著Adobe宣佈放棄移動flash開發,你將會考慮使用HTML5來開發webp應用。

  當手機瀏覽器完全支持HTML5那麼開發移動項目將會和設計更小的觸摸顯示一樣簡單。這裡有很多的meta標簽允許你優化移動:

  viewport: 允許你定義viewport寬度和縮放設置;

  全屏瀏覽器: ISO指定的數值允許Apple設備全屏模式顯示;

  Home screen icons: 就像桌面收藏,這些圖標可以用來添加收藏到IOS和Android移動設備的首頁。

  第一大原因: 它是未來,開始用吧!

  最大的原因今天你就開始使用HTML5是因為它是未來,不要掉隊瞭!HTML5不會往每個方向發展,但是更多的元素已經被很多公司采用,並且開始著手開發。HTML5其實更像HTML,它不是一個新的技術需要你重新學習!如果你開發XHTML strict的話你現在就已經在開發HTML5瞭。為什麼不更完整的享受HTML5的功能呢?

  你實際上沒有任何借口不接受HTML5。事實上我唯一一個原因使用HTML5是因為它書寫代碼簡單清晰。其它的特性其實我也沒有真正使用。你可以考慮現在開始使用HTML5書寫代碼,它能幫助你改變書寫代碼的方式及其設計方式。開始用HTML5代碼編寫web應用吧,說不定下一個移動應用或者遊戲應 用就是用HTML5開發的!