行動 + 堅持
每天都要更努力一點，更進步一點，在追求夢想的路途中，就是要馬上行動 + 堅持到底!!!!!!!! 上個星期周末很不巧地遇到下雨，而且還下著根本就是像是用倒的親盆大雨!!!!!!!! 不過呢，菜鳥我依然還是去朝聖了軟體界的大神保哥大大開的Web前端認證課程，再大的雨也澆不熄菜鳥我的熱情阿!!!!!!!!!!!!! 身為5irehands掌舵前端技術的菜鳥，任何有關前端技術的講座、課程或是研討會，菜鳥絕對都不會輕易放過!!!!!!!!! 這次的認證課程主要是在講授HTML5、CSS3以及一些Web開發和測試工具介紹，這門課真的是給菜鳥灌頂不少，而且保哥大大的講授真的都很深入人心，既實務又具體，不像一般傳統死硬的課程只有照本宣科，圖片就是傳說中的保哥大大!!!!!!!!! 保哥大大在課程中說了"以後就是browser統治世界"，且聽菜鳥的所見及所聞.......
HTML5
這次的課程重點之一就是HTML5!!!!!!!!! 菜鳥在這之前也有自學了一下HTML5，不管是從Google上找資料還是到書局翻書，或甚至是菜鳥還想找一本菜鳥覺得寫得不錯的HTML5的書來每天抱著研究，就這樣拼拼湊湊了一些基本概念，而菜鳥在這次課程徹底被灌頂，很多觀念都被連結起來了，而且也真正認識到HTML5的強大，在這裡菜鳥簡單的跟各位分享!!!!
簡介
HTML5是下一代主要的HTML規格，自從1999年制定HTML 4.01成為網頁開發標準後，於2004年首次由WHATWG這個組織提出HTML5，直到2007年被W3C採納後W3C隨即成立工作小組進行規格制訂，在這次的規格制定中不同的是，各家瀏覽器大廠也都參與了規格制訂，因此目前的主流瀏覽器(最新版：Chrome v26、FireFox v20、IE10、Safari v6、Opera v12)幾乎都已經有支援了HTML5，要利用HTML5著手進行網頁開發是沒問題的(當然要考量到老舊版本的瀏覽器相容問題，不過也已經有solution了)，至於何時才會發布HTML5成為正式的網頁設計語言標準??? 最近一次的W3C官方發布消息是說2014年就會有正式的版本出現，但是在近期的一些消息指出，HTML5要到2022年才會發布正式版本，這時間點真的是差很大...；事實上，目前HTML5雖然已經受到各家瀏覽器的支援，但是草案畢竟是草案，在尚未有正式版本發布之前，先不說瀏覽器新舊版本與跨瀏覽器的相容性，光是HTML5的語法本身就仍有變動的可能，在菜鳥來看，徒增不少前端技術開發的複雜度(這在CSS3更加明顯)，但不論如何，HTML5的趨勢是擋不了的了，擁抱它吧!!!!!哈~
HTML5 v.s HTML 4.01
究竟HTML5和現行的HTML 4.01差在哪呢???
- DOCTYPE的宣告方式變得簡單：DOCTYPE是用來定義此份網頁文件類型的標籤，使得瀏覽器可以辨別此份網頁文件是HTML或是XHTML，此外，也是告訴瀏覽器該用何種模式來解析顯示此網頁。以往HTML 4.01的DOCTYPE宣告如下所示
但是到了HTML5之後，簡化成下列所示
<!DOCTYPE html>
沒錯!!!!! 以往還要很嚴謹繁瑣的宣告一堆東西，在HTML5短短一行就搞定!!!!!
- 網頁編碼：要讓後端server回傳網頁到前端時能夠正確解析網頁，編碼格式就很重要了，只要在<head>標籤中加入<meta>標籤就可指定網頁編碼囉!!!但是HTML5和之前的版本宣告方式不同，分別為
HTML 4.01：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
HTML5： <meta charset="UTF-8">
一般來說，這兩個<meta>標籤都會同時加入，主要是為了要相容不支援HTML5的瀏覽器也能正確解析。此外，網頁編碼還有其他方式，像是直接在HTTP的Content-Type標頭設定「Content-Type: text/html; charset=UTF-8」，或是在網頁檔頭的地方加上BOM字元「EF BB BF」，當瀏覽器開始解析網頁時，認到這三個字元就知道要以Unicode來顯示網頁。
HTML5概要
廣義來說，HTML5可視為是HTML + CSS + JavaScript的技術組合，它除了希望能夠減少瀏覽器因應網頁內容與網路應用服務的日趨多元而需擴充支援的外掛安裝之外，更是要實踐將網頁架構與網頁呈現做到徹底分離，以網頁架構為出發點，HTML5包含了標籤和APIs兩個部分：
標籤
HTML5在標籤的制定上保留了大部分原本在HTML 4.01中存在使用的標籤，進而做了一些變化及調整，包括
- 新增語意標籤：HTML5所新增的標籤，這些標籤本身即被賦予意義，有助於網頁架構能夠增加其可讀性以及可用性，最重要的是，在SEO的表現上更為突出!!!!! 相關常用標籤有<header>(標記頁首的內容)、<footer>(標記頁尾的內容)、<article>(標記主要網頁內容)、<aside>(標記與主要內容相關的內容)、<nav>(標記網頁的導覽列)、<section>(代表一份網頁文件的範圍)、<figure>(標記圖片)。其中，<section>這個標籤的用法與<div>可以說是一模一樣，唯一的差別在於，<section>有其語意存在，而<div>並無代表任何意義。
- 新增各種功能標籤：包括了向量標籤(<MathML>、<svg>)、多媒體標籤(<audio>、<vedio>)、繪圖標籤(<canvas>)、外掛標籤(<embed>)、以及其他標籤如<kengen>、<mark>、<rp>、<progress>、<meter>等等。
- 原本用來表現樣式的標籤如<center>、<font>等等的標籤在HTML5皆已被移除，改以CSS取代，實現架構與樣式分離的目標。
還有其他一些新增或被移除的標籤，菜鳥在這裡僅列舉出常用的標籤。此外，在HTML5中，某些標籤有新增了一些屬性，如<input>，<input>通常會搭配<form>標籤使用，在<form>標籤中的屬性通常會指定HTTP的方法、表單動作等等，如下所示
<form method="post" action="XXX">
......
......
<input type="submit" value="送出">
</form>
在<input>標籤的新屬性中有一個屬性叫做"formaction"，這個屬性與<form>標籤的"action"相同，同樣都是指定表單動作，新增此屬性可以達到動態地指定當送出按鈕按下時要進行的動作，如下所示
<form method="post" action="XXX">
......
......
<input type="submit" value="送出" formaction="YYY">
</form>
當送出按鈕被按下的當下，表單動作會優先取用YYY而不是XXX，如此一來就能更有彈性地去動態調整表單動作。相關新增的屬性還有很多，這裡就族繁不及備載啦!!!!!!!
APIs
HTML5所提供的APIs也是很強悍吶!!!!!!!!!!!! 且聽菜鳥娓娓道來..............欸等等!!!!!!!在介紹APIs之前，菜鳥要先介紹一下在HTML5裡對於JavaScript之類的指令碼所新增的非同步執行屬性"async"!!!!!!!!!!!!!
我們直接利用這張圖來簡單描述一下。在瀏覽器解析(parser)一份網頁文件的過程，當解析到<script>這個標籤時，如果是正常情況，則會像圖片中最上面的執行情況，中斷解析，先去連線下載指令碼，接著執行，執行完成後才會繼續解析網頁，這樣的情況稱為「正常載入」；圖片中間的執行情況，可以發現有多加了一個"defer"屬性，這是在HTML 4.01舊友的屬性，加入這個屬性後，解析的過程不會因為下載指令碼而中斷，直到網頁全部解析完成後才去執行下載好的指令碼，這樣的情況稱為「延遲載入」；圖片最下方的執行情況就是加入了HTML5新增的屬性"async"，同樣地解析過程不會因為下載指令碼而中斷，一下載好就立刻執行指令碼，這時才會中斷解析，這樣的情況稱為「非同步載入」。
事實上，我們在使用的時候還是會用正常載入的方式，除非是指令碼所要取得的資料花費時間會太長或是資料來源的網路速度真的太慢，為了不影響網頁解析速度，才會去使用非同步。
接下來，菜鳥就要跟大家簡單分享一下HTML5有哪些強悍的APIs
- 網頁歷程記錄：可以控制網頁的瀏覽歷程、管理歷程記錄堆疊的URL與方法
- 離線網頁應用：使得網頁有離線瀏覽的能力，實作方式就是提供一份離線瀏覽所需要的檔案清單
- 網站儲存空間：以往的HTTP存取資訊都存放在cookie中，但是由於1個cookie的容量最大只有4KB、每一個domain最多也只能存300個cookies、且每進行一次HTTP Request都會送出cookie，會消耗過多頻寬而降低網頁整體效能，因此在HTML5提出了容量更大且效能更好的資料空間來解決這個問題
- NoSQL：HTML5捨棄了以往關聯式資料庫的概念，改以index的方式進行資料庫存取
- 全球定位資訊：提供行動裝置上的全球定位資訊
- Web音頻控制：常用於HTML5的遊戲開發，且利用此API可以做到很專業的音效處理
- Web Socket：透過HTTP模擬Socket使得前端到後端可以透過事件做到即時互動，線上聊天室的好solution
- 伺服器發送事件：透過HTTP實作專屬的Server Push協定
- Web Worker：可以使得前端會需要用到長時間執行的指令碼能夠以一個獨立的執行緒在背景執行，可提升網頁的回應速度
- canvas 2D繪圖：提供完整2D繪圖實作，瀏覽器會利用用戶端顯示卡的繪圖加速功能來處理2D繪圖，HTML5的遊戲幾乎都是透過此API做出來的
- 多媒體擷取：可用於擷取裝置上的相機與麥克風
- 檔案操作：允許用戶端直接進行本機檔案操作
- 觸控事件：用於行動裝置上，允許瀏覽器擷取在裝置上的觸控事件
- XMLHttpRequest level 2：更完整的XMLHttpRequest和Ajax功能
- 拖放API：讓瀏覽器支援與裝置桌面互動的拖曳功能支援
HTML5實在是太強大了，由於它提供的APIs太多，菜鳥也還在研究中，其實菜鳥覺得真正會實務用到應該就是像網頁歷程記錄、網站儲存空間、Ajax、Web Worker、觸控事件與拖放API這幾類，當然也是要評估網站類型、用途、目標客群、或是透過使用者經驗的角度來選擇要使用那些APIs來開發。
光是一個HTML5就可以說得天花亂墜，這還只是綜觀概述而已，真正的HTML5還有很多地方值得菜鳥和大家一起繼續研究，還是要繼續努力啊!!!!!!!! 最後菜鳥對於整體的心得會在下一篇文章跟大家分享，而下一篇菜鳥即是要跟大家分享課程的另外一個重點 - CSS3!!!!!!!!!!!!!!歡迎各位大神不吝指教~~~~~~~~~~
沒有留言:
張貼留言