anistar的HTML5懶人包

HTML5在現在這個時代(時間點)也不算是什麼新玩意了,
那麼為什麼我又跳出來生了一個HTML5懶人包呢?
這是因為與許多企業與開發者接觸過後發現,
許多人對於HTML5有許多的錯誤認知,
為了愛與和平還有宇宙的和諧,所以我決定發了這個懶人包。
(迷之音:其根本是自己愛寫)

HTML5之所以可以吵的沸沸揚揚又滿城風雨的,
這都要歸功於Steve Jobs對於HTML5與Flash的一番言論:

About Adobe: They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don’t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash, he says. The world is moving to HTML5. (引用於Steve Jobs公開言論)

當年可以是眾人都期盼Flash可以在iPhone上面跑,
但是卻被Steve Jobs潑了整整一大盆冷水,
至於Adobe的Flash是否真的那麼爛,我也不多作評論,
讀者可以自行去搜尋一下Steve Jobs和Adobe之間的恩恩怨怨,
我只能說事情並不是像表面上這麼簡單啊。

但是以目前的幾個觀點來看, HTML5似乎是一股不可忽略的趨勢:

1. 2015年預估全球行動上網裝置將達74億台
我簡單的列出幾個數據:全球的行動上網裝置在2011年底達到56億台,2015更預估達到74億台,而在目前的app store(Apple)已有80萬個軟體,營收超過29億美元,Apple股價超過600美元,台灣電子股股王股后皆為行動上網裝置供應鏈,從這些數據來看,行動上網裝置可以說得上是一股不可逆的激烈化學反應。 

2. HP惠普宣布分拆出售PC事業群
HP惠普可是PC的龍頭廠商,其市占率高達18.2%,卻於2011年宣布考量分拆個人電腦事業群,震撼全球科技圈,「後PC時代」來臨的耳語在國內科技廠間流竄,對於龍頭不玩這件事情,也可以看得出HP對於PC市場後續的獲利擔憂不言而喻。

3. Adobe宣布Flash Player不再支援Mobile平台
2011年Adobe公開發表了針對Flash在行動上網這塊領域的策略:

Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores. We will no longer adapt Flash Player for mobile devices to new browser, OS version or device configurations. Some of our source code licensees may opt to continue working on and releasing their own implementations. We will continue to support the current Android and PlayBook configurations with critical bug fixes and security updates.

好吧,從這些有力又有趣的數據來看,
行動上網(Mobile)的確是個未來重要的一個趨勢,
當你無法寄望在Flash身上(沒紅過的JavaFX就更不用說了),
那也只能寄望在HTML5身上了,
所以當你問我未來會是HTML5發揚光大的年代嗎?
我必須肯定的回答你是,至少在現階段來說Mobile網頁我們也只能寄望HTML5了。



當你開始使用HTML5時,我相信您應該可以得到一些好處:

  1. 技術門檻相對較低容易上手
  2. 開發工具多元,工具軟體成本低
  3. 快速開發,快速結案
  4. 開發一次可以發布在多個平台上
沒錯,這些的確都是HTML5可以帶來的優點,
但是光看這些短短的幾個字可能造成的誤會可大了,
所以在這份懶人包當中我要提出五點大家對HTML5開發最大的迷失。

1. HTML5只不過是HTML4多了20%的標籤
許多人會以為HTML5只比HTML4多了一個號碼,所以差異並不大,只是多了一些新的HTML5標籤而已,只要認識一下這些標籤就能學會HTML5,老實說這個觀點可是說是大錯特錯了,一般大眾會誤解HTML5是單一解決方案,其實大家心裡認知的HTML5是由3個解決方案所構成的,分別是:
  1. HTML5 Tag + API
  2. CSS3
  3. JavaScript
沒錯,所有號稱HTML5網站的都是由這三個技術為基底構成的,在HTML5的解決方案中,我們會大量的依賴CSS3與JavaScript,甚至你可能會在一個HTML5活動頁中看到多則上萬行JavaScript的程式,在CSS3上使用的概念也有很大的出路,而HTML5會多出許多API供您做各式各樣的應用,而這些應用都完全要依賴JavaScript程式碼來進行控制,所以千萬別再認為HTML5只是標籤而已,否則你還沒有搞清楚他就開始應用在專案上,那可不是鬧著玩的。

2. HTML5可以完全取代APP的需求
這個迷思也很多人有,認為HTML5出來以後可以用來取代Mobile APP的,很可惜這是辦不到的,行動上網裝置上面有許多的感應器(Sensor),我們常會透過這些感應器來取回一些資訊並且拿來應用在我們的idea上,HTML5畢竟需要活在瀏覽器的框架中,是無法直接跟裝置進行溝通的,更不用說對於其他硬體上的應用例如GPU或是螢幕亮度控制,也無法進行應用程式內購買(Purchase In Application) ,這些都是原生APP(Native APP)的天下,所以HTML5是用來開發APP的選項之一,而不是讓你取代APP的,當您的客戶要你開發一套強大的攝影APP或是3D遊戲,而當你選擇使用HTML5恐怕不是一個明智的選擇。

3. HTML5是個低成本的開發方法
就像我之前說的,HTML5必須活在瀏覽器的框架,因此以前使用HTML4所遇到的相容性問題,在HTML5中會顯得更加嚴重(尤其IE9到目前對HTML5的支援度還非常差),您必須常常要面對不同瀏覽器上的差異,並且寫許多的判斷程式確定該瀏覽器是否支援該功能,才能正確的將資訊或功能提供給使用者使用,因此這代表你必須耗費更多的工時再進行開發,維護,驗證與除錯。而對於開發者而言,以前在Server端開發只需要面對單一平台程式設計上的問題,但是現在除了要面對多個平台的程式設計差異,還必須了解HTML5結構,CSS3表示規則,這可不是一個輕鬆的工作,所以HTML5真的是一個最低成本的開發方式嗎?這值得您好好的思考這個問題。

4. 開發HTML5 APP與設計網頁相同
我們又回到Mobile APP上來了,雖然使用HTML5是可以開發Mobile Web APP的,而且跟以前開發網站一樣都是使用HTML的技術,但是在實作上可是有很大的出入的,我們簡單的舉幾個例子:

  1. 行動上網裝置上沒有滑鼠,因此設計行為不同。
  2. Web APP我們不再探討滑入滑出這樣的行為,這是不可被實現的內容。
  3. 您必須針對數十種以上不同的解析度(尤其是Android)來進行APP上的設計。
  4. Mobile APP必須具備良好的操作,而非將資訊全部塞入。

光是在這4點上您就無法將以前在網站設計上的思維完整的放入Web APP中,您必須重新思考我該如何建立一個正確可用的APP,而這對許多以往的網頁開發或設計然原都是一個全新的挑戰。

5. HTML5是Flash Killer
這幾乎是一個全世界最大的迷思,因為不論是專業論壇或是許多IT雜誌都常常告訴您HTML5是來幹掉Flash的,也只有HTML5才是王道,然而認識我的朋友都知道我從來不講王道這件事情,每個技術都有它的獨特之處,能夠混合其優點來幫助您完成專案,才是最好的做法。我們就來談談Steve Jobs最詬病Flash的原因吧,在他的說法中Flash是一個又吃效能又耗電的怪物,然而我們以實際數據來看,其實HTML5跟Flash相比大概只有30%的效能,所以這代表他沒有辦法執行複雜度相當高的運算,例如遊戲就是個例子,如果你想做一個複雜的網路遊戲,而採用HTML5來完成時,我相信你所面對的挑戰將會比Flash高出許多,同時您也會看到您NoteBook上的散熱風扇呈現了嗡嗡作響準備起飛的狀況,最慘的是當你盡力節省許多的資源想要提升效能或是做出一些特別的應用時,您卻發現愛莫能助。


 

千萬別誤會了,我不是說HTML5是個爛東西,
相反的HTML5的的確確是一個相當不錯的網頁解決方案,
而是要讓您更加認識HTML5的長處與缺點,
更加善用其輕量化與跨平台的優秀長處(同時也是短處),
只要您能正確的認識他並以正確的觀念去活用他,
我相信HTML5將會成為您專案開發上的得力助手,
尤其是在這個行動上網掛帥的年代,HTML5將會有機會能大放異彩。

希望這個HTML5懶人包有幫你快速的認識了HTML5的概念,
並且幫您打破許多關於HTML5開發上的種種迷思。

 

本篇發表於 HTML5 與標籤於 anistar固定網址書籤。
本文引用:
文章內容為ANISTAR BLOG所有,引用分享請以鏈結形式註明出處與原始作者。

關於 anistar

現任:台灣區 Yahoo! 專長: Objective C、iOS SDK、Android SDK、Flex 4、RIA、ActrionScript 3、HTML5、CSS3、JQuery、JQuery Mobile、C++、PHP、MySQL...等整合運用。 著作:《Run!PC雜誌》專欄作家、《CADesigner雜誌》專欄作家、《Flash CS3 Professional ActionScript 3.0 打造互動設計力與美》、《新一代互動體驗Flex+AIR程式開發》。 認證:Macromedia Certified Instructor in ColdFusion    Adobe Certified Expert in Photoshop    Adobe Certified Instructor in Flex

2 則迴響於《anistar的HTML5懶人包

  1. 你好
    想請教一下幾個問題?

    1.如果只是單純只是要用電腦瀏覽網頁(沒有想要在手機上瀏覽)
    那有需要使用HTML5嗎?

    2.HTML上多了一些新的功能(ex.用戶端資料儲存 ,讀取本機檔案 等等)
    這樣是不是代表我們在開發網頁的時候就不需要使用到php jsp等技術了(因為 我之前使用jsp也只是用來存取本地端資料以及資料庫處理等等)

    感謝~

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *