【行動網頁規劃】HTML5 實行可行性概述

Hi! 各位朋友好,我是小蔡老師,最近小蔡老師寫了很多篇與網站製作相關的文章,所以有很多朋友詢問小蔡老師說,是否可以提供一些網站製作的基本概念尤其是最新技術的HTML5 & CSS3的製作基本概念。故小蔡最近會寫幾篇簡單的製作概念,今天為首篇HTML5的架構與製作格式說明

在一開始,我們先會歸最近很多網路新聞整天都吵著說HTML5,HTML5是什麼?我的網站需要HTML5嗎?用HTML5做網站會比較貴嗎?用HTML5做網站會比較被搜尋找到嗎?這邊簡單的說明一下。

HTML5書寫架構標準

Sublime Text 2ScreenSnapz001

什麼是HTML5

一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個部分,不單單只是HTML部分而已,CSS 3和JavaScript也有許多的創新,讓整個網頁程式功能更加繽紛。

HTML5技術涵蓋範圍

1. 離線瀏覽功能(offline)
2. 檔案存取功能(File Access):支援在網頁中拖拉檔案,例如直接拖拉照片檔案至瀏覽器中上傳。
3. 多媒體功能(Multimedia):提供新的Video標籤功能
4. 效能(Performance) :提供更加的效能
5. 多樣化的畫面展示(Presentation) :以CSS3為基礎,強化網頁版面更多樣化的呈現,如div的360度選轉,偏移,可以呈現出更多類3d的效果。
6. 圖形處理(Graphic):提供新的元件支援2D繪圖、WebGL程式設計(Game方面等應用)、 3D CSS特效、其他還有SVG、SMIL等等圖形技術。
7. 儲存技術(Storage): 可使用下列相關技術:
i. Web Storage: 提供簡單的 參數-數值 相對應的儲存表,類似cookie 的運作
ii. Web SQL Database: 提供關聯式資料庫的功能。
iii. Indexed Database: 此方式介於Web Storage 與 Web SQL Database 之間,操作方式與Web Storage類似, 但是額外提供像關聯式資料庫一般的索引鍵來存取資料。
iv. File Access: 此功能使用javascript的元件來讀取檔案的內容。
8. 行動平台支援(Mobile):提供手機、平板電腦上的網頁支援,支援觸控功能等等的操作事件,並提供更快速的瀏覽經驗,等等的優點。

HTML5跟HTML4最大的差別

以HTML4能顯示的東西來看,基本上就是只能顯示傳統的HTML元素,像是文字和圖片若想要使網站更好看,就會搭配CSS來製作,但是我們有時候會需要顯示動畫、播放音樂、影片等等……依照目前的技術則會已Flash動畫或者jQuery的雙向配合來達到互動無法單一靠HTML來直接達成。

所以得透過將其他的程式封裝成Active X的方式,嵌入HTML中使用透過安裝Active X,進而允許網頁透過指令碼和控制項互動產生更加豐富的效果(Flash player也是其中之一)。

但HTML5擺脫了這些影音外掛程式的束縛,支援使用多媒體Audio、Video的標籤,輕易的就使網頁豐富化未來,不需要安裝相關的影音外掛程式,就可以滿足能在網頁上觀看影音的需求。但是看似完美的語法仍舊有所謂的不完美存在

HTML5的優點與缺點

優點:
> 使用語意化的Tag,有利於SEO(footer、header和main等取代div,讓電腦能夠更加理解網頁的內容,容易被搜尋引擎找到)。
> 若HTML5成為網頁標準技術,則即使瀏覽器不同,也不會再出現不同的網站看起來不一樣的情形,也可跨平台瀏覽(如:手機)
> 雖說目前還是有部分瀏覽器無法支援全部格式,但都還是持續的更新技術與支援。
> 支援使用多媒體Audio、Video的標籤,輕易使網頁豐富化,大幅減少外掛程式,就算沒有外掛程式一樣可以在網頁上瀏覽豐富的影音內容。
> 將Web帶入一個成熟且完整的應用平台。
> Google與Youtube等一些世界性的大型網站也都選擇開始使用HTML5,這些都是HTML5為未來趨勢的佐證。

缺點:
> 雖說所有主流瀏覽器 (Internet Explorer, Chrome, Firefox, Opera, Safari等) 不斷的更新技術,但目前還是有部分瀏覽器無法全部支援其格式。
> 若是不支援 HTML 5,只支援 Flash Player 的瀏覽器(像一些不再提供更新的瀏覽器),就無法在瀏覽器內播放HTML 5影音。audio 和 video 常常還是需要有 Javascript 支援,才能正常使用操作面板。無法像Flash 以及Silverlight般把資源封裝,影音檔案或其他相關連結可能會很容易被抓出來,得靠些方式擋直接連結或暴力下載。

HTML5瀏覽器支援圖表

001

簡單的了解HTML5的歷史與架構後,在一篇文章我們要說明CSS的基本概念

(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問