Skip to Content

「HTML5.網路新勢力」研討會心得之 HTML5

11/29 去聽了「HTML5.網路新勢力」在高雄場的研討會

http://www.bnext.com.tw/2011webnext/index.html

主要的收獲有二點:

  1. 網站要升級至 HTML5 的方法及注意事項。
  2. 網站針對行動裝置的設計方法及注意事項。

相關的簡報檔可以在這裡下載 : http://bit.ly/w3CtZF

底下是網站要升級至 HTML5 的心得,該場是黃保翕 ( Will 保哥 ) 所主講的。

1. 想使用新功能時,要確認該功能在各瀏覽器支援是否足夠。

2. HTML5 有新增的語意元素,這些新元素在 IE6、IE7、IE8 會無法辨識,相關的 css 也無法順利套用,這點可以加入 html5shiv (http://code.google.com/p/html5shiv/)。

使用法就是在網頁的 <head> 中加入一段

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
原理我不是很清楚,大概就是將 IE 無法辨識的元素,例如 <header>,換成類似 <div id="header">,然後將原本要套用在 <header> 的 css 也套到此 div.header 上,就達到目的了。
 
3. 上面的方法是可以讓新增的元素可以正確的套用 css,不過若 css 是一些較新的功能時,例如呈現圓角或陰影,舊的 IE 依然無法正確處理,要如何補救?
 
保哥介紹了 Modernizr (http://www.modernizr.com),它能偵測瀏覽器的支援能力如何。
 
研討會的簡報中提到它的用途與說明:
  • 幫助舊版瀏覽器支援 HTML5 與 CSS3 的各種功能 
  • 包含一組能偵測瀏覽器 HTML5 支援能力的函式庫 
  • 功能強大,支援多種瀏覽器的相容性支援 
它主要的運作原理有二種,第一種是它會在網頁載入後將 <html> 標記中加入 class 屬性,例如 <html class="js no-touch no-history multiplebgs boxshadow opacity no-cssanimations no-csscolumns">
 
那些加入的名稱就是表示它有支援或沒有支援某些功能。如果要針對陰影這功能 boxshadow 有特別的安排,在 css 可以如下設計
 
.box {
   ......
}
 
.boxshadow div.box {
   ......
}
 
第一組表示是一般情況的設計,第二組是有支援 boxshadow 的設計,如此就可以依據不同的支援程度而設計不同的內容了。
 
第二個使用方法是直接由 Modernizr 物件的屬性來判斷瀏覽器的支援程度,底下是官網的一個例子,用來判斷瀏覽器本身有沒有支援螢幕觸控的功能。
 
if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}
 
4. 上面的方法是偵測了瀏覽器的功能,讓設計者可以針對支援的程度來調整呈現的結果。但如果偵測發現此瀏覽器沒有支援某功能,但又不想放棄,那要怎麼辦?
 
在 Modernizr 有提供一個功能叫 Polyfills (填充物) 的功能,這是指許多的 javascript,用來模擬 HTML5 的新功能。
 
 
詳細的使用方法我也不清楚,要再研究 Modernizr 官網的說明。研討會有介紹安裝 video.js 為例,我只知道如果你使用了 HTML5 原生的影音播放功能,當偵測到瀏覽器的版本沒有支援時,會自動啟用 video.js ,背後的動作就是自動以 Flash 來播放,達到自動提升舊版瀏覽器的功能。
 
5. HTML5 Reset
 
這個主題在談如何更細緻的調整網頁的畫面。因為不同的瀏覽器在不同的元素都有不同的預設值,若沒有設計好,會造成不同的瀏覽器呈現不同的結果。例如各瀏覽器的文字行距、div 的 margin、padding 等各部份的預設大小都不同,如果要一一設定也很麻煩。所以若全部先 Reset,再根據有需求的地方調整,如此一來就可以在各瀏覽器有一致的呈現結果了。
 
研討會中介紹了二個 Reset
 
 
 
保哥也在簡報中提供了一個加上了 HTML5 標籤的 Reset。
 
6. 如何學習 HTML5
 
學習的方法很多,可以從最基礎學起,也可以參考各種專案範本。
 
保哥介紹了一個網站 : http://www.initializr.com/
 
這網站會產生 HTML5 的網頁,也可以根據自己的需求來選擇要有什麼元素,大家就可以參考產生的內容來研究學習了。
 
7. 研討論也有介紹 HTML5 的測試工具,不過我就省略不談了。在 IE、Firefox、Chrome 等瀏覽器都可以找到開發者工具,相信一般的網頁設計師都有自己的習慣工具,有興趣的人請自行參考簡報中的一些介紹。
 
8. 最後附上保哥提供的「網站升級至 HTML5 的步驟」標準作業流程(SOP)
  • 變更 DOCTYPE / charset 
  • 套用 HTML5 Reset CSS ( 用精簡版 + 放置在 <head> 最前面 )
  • 變更 TAG ( 使用 HTML5 語意標籤 )
  • 新增 html5shiv
  • 新增 Modernizr 並依據特性偵測微調 CSS
  • 套用 HTML5 Polyfills 提升舊版瀏覽器相容性

【後續參考】

後來還寫了一篇則是網站針對行動裝置設計的心得整理,該場是黃忠成先生所主講的。

【補充】

影音瀏覽:

http://60.251.1.52/taiwan/events/learn/?id=4d7f5de1

簡報下載:(查 2011 年 11 月份)

http://60.251.1.52/taiwan/events/slides/download_1112.aspx

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 HTML 標籤:<a> <address> <b> <blockquote> <br> <caption> <center> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ins> <li> <ol> <p> <pre> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <th> <tr> <u> <ul>
    Allowed Style properties: background, background-attachment, background-color, background-image, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, caption-side, clip, color, direction, empty-cells, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, overflow, padding, padding-bottom, padding-left, padding-right, padding-top, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, white-space, width, word-spacing, z-index

更多關於格式選項的資訊

CAPTCHA
驗證碼只有阿拉伯數字, 這是躲廣告用的, 麻煩你輸入了.
Image CAPTCHA
Enter the characters shown in the image.


story | about seo