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，沒有更多内容了。是不是非常簡答？不需要拷貝粘貼一堆無法了解的代碼，也沒有多餘的head标簽。最大的好消息在于，除了簡單，它能在每一個浏覽器中正常工作即使是名聲狼藉的IE6。

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

　　是不是很簡單？但是使用HTML5後會使得代碼更加簡單并且富有含義：

　　使用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（Chrome，Firefox，Safari，IE9和Opera），并且建立了HTML5 doctype這樣所有的浏覽器，即使非常老非常令人厭惡浏覽器像IE6都可以使用。但是因為老的浏覽器能夠識别doctype并不意味它可以處理HTML5标簽和功能。幸運的是，HTML5已經使得開發更加簡單了，更多支援更多浏覽器，這樣老的IE浏覽器可以通過添加javascript代碼來使用新的元素：

　　你可以稱之為“直覺”，但是我認為移動技術将會變得更加的流行。我知道，這裡有些非常瘋狂的猜測，有些可能你也想到了 – 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開發的！

　　1.HTML5可以讓你擺脫對平台的依賴，使用者打開浏覽器，直接就可以通路你的應用，而不需要經過各種Store的稽核。

　　2.實時更新，通常平台的稽核都需要七個工作日左右的時間，如果你釋出之後發現問題怎麼辦？Web方式就不存在這種問題。

　　3.Write once, run anywhere?

　　這是多少程式員的夢想，也曾經是Java讓人心動的地方，但真正做過跨平台解決方案的人都知道，這隻是一句口号而已，跨平台沒那麼容易玩轉的。沒錯，HTML5可以實作Write once, run anywhere，但我們總不能寫一個Hello World來run anywhere吧。不同平台有自己的特性，不同平台使用者也有自己的操作習慣，如果你想讨好所有人，也就意味着你無法讨好任何人。

　　4.減少開發工作量或者讓開發變得更簡單？

　　對老闆來說，這是一個非常誘人話題，因為工作量的減少就意味着節省更多的錢，沒有老闆不喜歡用更少的錢辦更多的事。而且目前一個非常大的問題是，移動裝置開發人員特别是iOS開發人員非常不好找，因為技術好的都自己做應用了，人家自己也能賺個月薪上萬甚至更多，為什麼要進你的公司？怎麼說也是自己的事業，擁有無限可能，還可以充分享受自由。但如果可以充分利用HTML5，那麼我們就可以招聘Web前端的開發人員來建構移動應用，這樣就不愁招人的有問題。因為在許多人的眼裡，HTML5/CSS/Javascript都是沒多大技術含量的東西，實在找不到人，找些實習生學學也就會了。

　　但問題是，工作量真的會減少嗎？技術門檻真的那麼低麼？答案是NO！

　　我曾經花了半年的時間去開發一個基于HTML5的移動架構，用來模拟Native應用，讓HTML5應用看起來盡可能看起來像本地應用，注意：是像。這有點像jTouch，但不一樣的是，它能和Native程式很好地互動，并且能調用本地資源等等特性。但最後結果确不是那麼令人滿意，比如HTML5在動畫切換的時候，有時候候會有一些莫名其妙的問題，當然你可以告訴我把動畫效果關了，但這看起來很死闆，最後我不得不關閉某些動畫。而用Objective-c編寫程式就沒這麼多事了，幾句簡單的代碼可以實作很酷的動畫，用HTML5需要更多的代碼，甚至根本無法實作。

　　而且移動裝置上的HTML5開發對開發人員的技術有非常高的要求，不是一般的Web前端人員能解決的，通常擁有這樣技術的人才，工資水準也不會比Native開發人員低多少。如果你僅僅是要開發一個移動裝置上的網站，這會簡單很多，但如果你希望模拟Native應用，并且擁有較高的效率和優雅的使用者體驗，這就很有技術含量了。不要小看Javascript這類Web開發語言，通常我的看法是越簡單的語言越會展現出技術人員的水準，特别是規劃設計能力。

　　5.其它問題，資源調用的限制，比如說在iOS中有Javascript運作不能超過15秒的限制，不能調用本地硬體裝置(如相機等)，無法使用推送服務等。

　　是否這樣，我們就不要選擇HTML5了呢？我在前面說過：“要根據企業自身的情況、團隊的構成、公司的戰略以及産品的特點來綜合選擇”，我最近在關于HTML5讨論的微網誌上也有談到：“HTML5是戰略性方向，Facebook和Google已經布局，Google Mobile在iPhone上的體驗可以媲美Native。基本上Native+Web App可以秒殺多數應用，如果不願意受制于各種Store，單獨的Web App也是一個不錯的方向。對于遊戲類和對硬體環境依賴嚴重的應用，隻能是是Native”。僅管有這樣那樣的問題，但HTML5是一種趨勢，在未來三至五年，HTML5将會取代很多本地應用，但就像多年前我們一直在談B/S架構取代C/S架構一樣，這需要一個過程。

　　通常在HTML與Native之間，我們有三種選擇——HTML5、Native App以及HTML5+Native，HTML5就是指純Web的移動應用，使用者需要打開浏覽器，然後輸入應用的網址通路。Native指的是基于特定平台開發的應用。Native+HTML5實際上是一種加殼的方式，将HTML5用和浏覽器封裝起來，但這對使用者是不可見的，使用者沒有任何異物感，和Store上下載下傳的App沒有什麼兩樣。

　　就我個人而言，我是比較推崇HTML5+Native的，這種加殼的方式，可以讓你享受Native與HTML5的雙重好處，但缺點是對技術含量要求較高。當然我這裡指的不是簡單地把HTML5封裝到一個浏覽器裡面，Native與HTML5會有許多的互動，實際上這有點像混合硬碟，我們即便享受SSD的快速，但我們又想獲得機械硬碟的高成本效益。我認為在5-10年内，這都會是一種不錯的解決方案，當HTML5和硬體發展到一定水準之後，我們再完全轉向HTML5成本也會非常低的。

　　假定現有一個對本地環境依賴不那麼嚴重的項目，如微部落格戶端，各種社交美食甚至LBS應用，我們都可以采用HTML5+Native。如圖所示，我們可以将核心的代碼Core層用封裝起來，這個代碼和平台無關，主要是業務邏輯以及和Shell的互動，代碼用Web語言編寫。在Core層上我們再根據不同的移動平台制作不同的UI。最後我們将上述兩層放到各平台的Shell中，這個Shell主要是由浏覽器來完成工作，當然還包括一些硬體操作和讀取本地資源，如GPS、重力感應、相機調用、地圖、推送通知或者IAP等。

　　我們可以把Web的更新部分部署到伺服器上，使用者運作App後，App會向伺服器講求擷取最新的Web程式并下載下傳運作，這樣可以達到跳過各種Store的更新稽核，達到快速更新的目的。而且假如使用者無法通路網際網路，我們可以讓使用者使用上一個版本的程式，不會像純Web App那樣要求使用者一定要聯網

　　1.使用者可以離線使用

　　2.更新下載下傳量及少，可以全部更新，也可以選擇替換部分檔案

　　3.代碼很安全安全，衆所周知Web應用有一個很大的問題就是代碼安全的問題，但現在我們可以将Web代碼全部加密，本地應用解密後再運作，大大的提供了代碼的安全性。

　　4.可以通過浏覽器作為中介充分利用Native的好處，比如說可以使用GPS、照相機、本地相冊、讀取本地聯系人，也可以使用推送功能等，最重要的是，某些Web無法實作的功能，我們可以利用Native來實作。

　　5.跨平台，多數核心代碼不用重寫，Javascript的代碼用得好的話，在許多地方都可以用到，包括移動應用、移動網站、PC網站、各種浏覽器插件，甚至可以用WebKit封裝作為跨平台的應用程式。誠然，這種方式并非完全跨平台，但這樣也足以減少很多工作量了，特别是後期的維護。而且完全的跨平台是沒有意義的，不同平台有自己的風格，為了更好的使用者體驗，界面層還是需要針對性開發的。

　　我覺得最大的壞處是技術難度高，如果僅僅是簡單的浏覽器封裝幾個HTML檔案，那沒什麼技術難度，但如果要打造一個系統級的東西，這就很有技術難度了。這要求有人要了解三個主流平台的浏覽器特性，通曉Native程式的開發，要精通HTML5/CSS3/Javascript，最重要的是，要有較強的架構設計能力。

　　如果要再找一個壞處的話，就是它不能滿足所有的需要，它并不能代替Native，但我認為他可以替代大部的Native。

　　首先從産品的角度考慮，你的産品是否嚴重依賴于本地環境，比如說圖像處理和華麗的遊戲之類的。第二要考慮的是你的技術團隊的構成，如果你們的團隊有一個能解決這些問題的牛人，并且有一些清通Web前端的人，那我覺得你可以考慮用這種方式。技術選型非常重要，稍有不慎，後患無窮。第三個要考慮你們公司的戰略，對HTML5未來發展的看法，願意在移動網際網路上付出多少代價，是否願意做前瞻性的事，是否願意在前期投入較多的資源，是否允許試錯等等。