色胚子部落 » html5 http://blog.colorbase.tw 訊息多變的時代裡，需要多學習多思考 Mon, 15 Aug 2011 03:29:59 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 檢測訪客瀏覽器對 HTML5 與 CSS3 的支援程度 http://blog.colorbase.tw/web-development/1099 http://blog.colorbase.tw/web-development/1099#comments Sun, 23 May 2010 02:26:00 +0000 阿育 http://blog.colorbase.tw/web-development/1099 由於各主流瀏覽器對於 HTML5 與 CSS3 中支援的程度不一，如果我們想要搶先嘗試使用它們的的新功能，卻又想要在各種瀏覽器中保持一定的可用性，那麼勢必要在 Javascript 中撰寫相關的判斷程式碼來進行判斷瀏覽器是否支援新特性，如果訪客的瀏覽器支援，則使用新功能，而反之則執行替代的程式碼或者提示使用者所使用的瀏覽器將會有部分進階功能無法使用。

關於目前各主流瀏覽器的支援情況可參考之前的文章 HTML5 與 CSS3 準備好了嗎？

自行撰寫 Javascript 進行 HTML5 與 CSS3 的檢測

如果我們使用到的 HTML5 與 CSS3 新特性並不多，則可以自行撰寫相關的檢測碼來進行判斷，至於該如何檢測，則可參考：
The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything

文章中除了羅列一大堆 HTML5 等檢測的片段程式碼，也提到了一個很好用的函式庫 Modernizer。

Modernizr

modernizr

Modernizr 是一個非常小巧的函式庫 (大約 8 KB，gzip壓縮後大約3.9 KB)，它用於檢測瀏覽器對於 HTML5 與 CSS3 支援程度，其首頁也提供了一份即時的檢測表，當使用不同的瀏覽器進入該網站時，將可看到不同的檢測結果，這個檢測表其實也可以當做一種瀏覽器支援參考，當安裝了新版本的瀏覽器時只要進入這個網站就可以即時知道瀏覽器是否有增加了什麼 HTML5 或 CSS3 的新功能。

先讓  IE 支援 HTML5 的新標籤

由於 IE9 之後才認得 HTML5 的新標籤，因此若要讓舊版本的IE也認得 HTML5的新標籤，則可以使用html5shiv來讓 IE 支援 HTML5 的新標籤，使用方式為加入以下的語法於<head>之間。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

使用 Modernizr

Modernizr 的使用方式很簡單，只需於<head>之間使用<script>標籤引入這個函式庫即可：

<script src="modernizr.min.js"></script>

接著我們就可以在 Javascript 或 CSS 中做相對應的判斷及處理。

在 Modernizr 中使用 Javascript 判斷

Modernizr 載入後，即可使用 Modernizr.特性名稱的方式來判斷瀏覽器的支援，例如以下為判斷瀏覽器是否支援 canvas。

if (Modernizr.canvas) { //判斷瀏覽器是否支援 canvas
	alert("支援");
}else{
	alert("不支援");
}

在 Modernizr 中使用 CSS 判斷

Modernizr 使用了一個非常聰明的方法來達成 CSS 判斷的功能，它在載入完成後將會自動檢測瀏覽器的支援情況並將其寫入 <html> 標籤的 class 屬性，其類別名稱的格式為：

支援：特性名稱

不支援：no-特性名稱

例如當瀏覽器支援支援 canvastext 時，<html>標籤的 class 屬性中將會有一個 canvastext 值。

相反的當瀏覽器不支援 canvastext 時，<html>標籤的 class 屬性中將會有一個 no-canvastext值。

如此一來我們就可以輕易的使用 CSS Selector 來做出相對應的判斷，例如，在 HTML 中：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Modernizr Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script src="modernizr.min.js"></script>
</head>
<body>
	<div id="canvasContainer">
		 <canvas id="c"></canvas>
		 <p class="supported">瀏覽器支援 canvastext</p>
		 <p class="noSupported">瀏覽器不支援 canvastext！</p>
	</div>
</body>
</html>

在 style.css 中，透過以下的 CSS，在支援 canvastext 中將顯示「瀏覽器支援 canvastext」，反之則顯示「瀏覽器不支援 canvastext！」。

#canvasContainer p{
	display: none;
}

.canvastext #canvasContainer .supported {
	display: block;
}

.no-canvastext #canvasContainer .noSupported {
   display: block;
}

點我觀看 Modernizr CSS Selector 檢測範例

同理，若要利用 CSS 判斷瀏覽器是否支援 video 則可使用「.video / .no-video」兩個 CSS 類別。

更多 Modernizr 支援的 HTML5 與 CSS3 特性檢測，請參閱其使用手冊。

需注意的事情

  1. Modernizr 只能提供檢測而不能替瀏覽器增加新功能以達成兼容。
  2. 若要兼容 video 可使用 video4all來達成，更多詳情可參考 開始HTML5 – Video。
  3. 若要讓 IE 6, 7, 8 支援 CSS3 可使用CSS3 support for IE來達成。

相關連結與參考文章

]]> http://blog.colorbase.tw/web-development/1099/feed 6 HTML5 與 CSS3 準備好了嗎？ http://blog.colorbase.tw/web-development/1070 http://blog.colorbase.tw/web-development/1070#comments Sun, 16 May 2010 04:20:35 +0000 阿育 http://blog.colorbase.tw/web-development/1070 HTML5 與 CSS3 不斷出現各種令人驚艷的應用，引起了業界的高度關注，它把許多原本屬於 Flash 的特殊應用搬到了 Web 標準中，而標準化的好處在哪我想不需要我多說了，但 HTML5 與 CSS3 真的準備好了嗎？

從 HTML & CSS3 Readiness 這份圖表可以很容易看出一些關鍵，它把 HTML5 與 CSS3 從 2008 年到 2010 年各個主流瀏覽器的支援情形以扇形區色塊圖的方式呈現，每個瀏覽器及渲染引擎都有自己的色系。

  1. 目前支援度最高的新特性為 Drag and Drop / @font-face / contenteditable 。
  2. 目前支援度最佳的瀏覽器為 Chrome 與 Safari。
  3. 目前支援度最差的瀏覽器為 IE 系列。

html5_css3_readiness

HTML & CSS3 Reandiness

HTML5 與  CSS3 現在最需要什麼？

良好的集成式開發環境

我想對於開發人員而言，最需要的還是工具，因為純手工編製複雜的 Web 應用可真是一件吃力不討好的工作，但我相信只要有市場便不怕沒工具，之前 Adobe CTO Kevin Lynch 也已經說要為HTML5開發工具了，我也相信在公開的標準規範之下將會有更多軟體開發商投入精力創造出更好用的產品。

廣泛的普及

既然工具的問題排除了，那麼剩下的便是普及性的問題了，但很顯然的它們仍然還沒完全準備好，在 When can I use 裡面列出了目前HTML5個主流瀏覽器的支援情況，雖然這是一個支援度比較表，但命名更像是在抱怨。

幾種 HTML5 與 CSS3 支援度參考資料

]]> http://blog.colorbase.tw/web-development/1070/feed 0 開始HTML5 – Video http://blog.colorbase.tw/web-development/947 http://blog.colorbase.tw/web-development/947#comments Tue, 27 Apr 2010 10:04:44 +0000 阿育 http://blog.colorbase.tw/?p=947 在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的相關應用將更趨於豐富化。

現在就連 YouTube 也已經測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但了解一下新技術是有其必要的。

 html5_video

HTML 5  Video 基礎

基本的 HTML5 Video 標記如下，我們可以透過 src 屬性來標明影片的URL：

<video src=影片URL >很抱歉！您的瀏覽器不支援HTML5 Video</video>

雖然上面的方式很簡短，但可惜的是因為目前各家瀏覽器在HTML5 Video的影片格式方面支援不一致，而導致我們若我們想要影片能夠兼容各種主流瀏覽器，我們必須提供這兩種主要的HTML5 Video 格式的影片檔案：

  • Theora/Vorbis (*.ogg ; *.ogv)
  • H.264 / AAC (*.mp4 ; *.m4v)

所以我們必須提供兩種格式讓瀏覽器自行依照自己支援的格式下載並播放，因此我們加入 <source> 來定義多個影片來源，而不是用 <video> 的 src 屬性，例如：

<video>
	<source src="video.ogg">
	<source src="video.m4v">
	很抱歉！您的瀏覽器不支援HTML5 Video
</video>

<video> 的屬性

<video> 除了可以使用 src 屬性來標明影片的URL，我們還可以使用其他的屬性來定義 <video> 的基本樣式或行為。

src

影片的URL。

autoplay

影片是否自動播放，預設為 false。

controls

是否顯示播放控制列，若設定為ture將會顯示播放控制列，這個控制器的樣式是依據瀏覽器而定的，預設為 false。

width

<video> 所佔寬度。

height

<video> 所佔高度。

poster

這如同一些以Flash實現的播放器所提供的「預覽圖」功能一樣，可於此指定預覽圖的URL，當影片尚未開始播放時，將會先顯示這裡所指定的圖片。

其他的屬性

<video>的屬性還有 loopend / loopstart / playcount / start / end / loop 但這些屬性的各個瀏覽器的支援不一，因此目前不是很實用。

簡單的範例

以下的範例會在頁面載入完成後自動播放，並顯示瀏覽器內建的影片播放控制列，在載入完成並播放之前將會顯示所指定的預覽圖。

<video id="myvideo" autoplay controls poster="preview.png" >
	<source src="video.ogg">
	<source src="video.m4v">
	很抱歉！您的瀏覽器不知員HTML5 Video
</video>

<video> 與瀏覽器的支援

目前HTML5的 <video> 僅於以下瀏覽器版本支援：

Chrome4+ / Firefox 3.5+ / Opera 10.5+ / IE 9+ / Safari 4+

以及以下Mobile平台：

iPhone / iPod / iPad / Android OS

替代性的解決方案

在過度時期我們可以使用 video4all 這個開源專案讓更多瀏覽器版本也能支援<video>。

透過 video4all 我們只需要於HTML中加入它所提供的Javascript Library。

<script src="video4all.js" type="text/javascript"></script>

接著我們就可以正常的使用 <video> ，當訪客的瀏覽器不支援 <video> 時 video4all 會自動幫我們將<video>替換成使用Flash的播放器來播放所指定的影片。

<video>
  <source src="video.ogg" type="video/ogg" />
  <source src="video.mp4" type="video/mp4" />
</video>

HTML5 Video 成員

在HTML5中我們可以透過 Video所提供的屬性以及方法來控制影片的播放與取得播放資訊。

play()

開始播放影片。

pause()

影片暫停播放。

currentTime

numeric 目前的播放指標。

readyState

影片讀取狀態。

  • HAVE_NOTHING = 0
  • HAVE_METADATA = 1
  • HAVE_CURRENT_DATA
  • HAVE_FUTURE_DATA = 2
  • HAVE_ENOUGH_DATA = 3

paused

boolean 是否停止

muted

boolean 是否為靜音。

volume

numeric 取得或設定音量值。

ended

boolean 播放指標是否已經到最後。

搭配jQuery的簡單HTML5 Video 控制範例

請點我觀看範例

simple.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5 Video simple test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
		<script src="init.js"></script>
	</head>

	<body>
		<p><a href="http://blog.colorbase.tw/web-development/947">回文章</a></p>
		<video id="myvideo" poster="html5_video.png" >
			<source src="video.ogg">
			<source src="video.m4v">
			很抱歉！您的瀏覽器不支援 HTML5 Video
		</video>
		<div id="state"></div>
		<p><button id="play">Play</button><button id="pause">Pause</button></p>
		<ul id="statelist"></ul>
	</body>
</html>

init.js

$(function(){
	var video = $('#myvideo')[0];//取得video
	var statelist = $('#statelist');
	var videoStateTexts = [
		'HAVE_NOTHING','HAVE_METADATA','HAVE_CURRENT_DATA',
		'HAVE_FUTURE_DATA','HAVE_ENOUGH_DATA'
	];
	var pr = ['currentTime','readyState','paused','muted','volume','ended'];

	$('#play').click(function(){
		video.play(); //播放影片
	});

	$('#pause').click(function(){
		video.pause(); //停止播放
	});

	var t = setInterval(function(){
		statelist.empty();
		$('#state').text(videoStateTexts[video.readyState]);
		for(x in pr){
			statelist.append($('<li><storng>'+ pr[x]  + ' : ' + video[pr[x]] + '</strong></li>'));
		}
	},100);
});

播放介面的解決方案

雖然我們可以使用Javascript自行控制HTML5 Video的播放，也意味著我們可以自行開發更漂亮美觀的介面，但這終究會增加許多開發成本，目前已經有許多HTML5 Video Player，不僅提供漂亮的介面，甚至我們還可以根據需求自定播放器外觀。

Open Standard Media Player

非常專業且完整度極佳的HTML5 Video 播放器。

image

Video for Everybody!

簡單清爽的播放介面。

image

SublimeVideo

典雅的播放介面。

image 

Kaltura

能整合jQuery UI訂製介面。

image

OIPlayer jQuery plugin

jQuery的Plugin

image

參考資料

]]> http://blog.colorbase.tw/web-development/947/feed 5 開始HTML5 – Web Workers http://blog.colorbase.tw/web-development/888 http://blog.colorbase.tw/web-development/888#comments Fri, 23 Apr 2010 17:11:00 +0000 阿育 http://blog.colorbase.tw/?p=888 HTML5帶來了許多的改變，除了標記語意上的增強之外，最令人震撼的莫過於它所附屬的Javascript APIs。而 Web Workers 是 HTML5 提供的一個多執行緒(Multi-Thread)的解決方案，讓我們可以把需要大量運算的程式交由Web Workers去做背景執行，如此的好處就是其他的工作仍可以順利進行。

Web Workes 目前支援的瀏覽器有：Firefox 3.5+ / Safari 4.0+ / Chrome 5.0+

html5_web_workers

HTML5 的不同

標記的不同

HTML5在標記上有著相當大的變化，其中最為明顯的即是語意上的標籤，在HTML5中，結構化網頁的語意更加清晰了，除了移除許多不必要的標記之外也增加了許多標記及有用的屬性，本文只簡述範例中會用到的部份。

若想知道自己編寫的HTML5是否有錯誤可以利用HTML5 validator來驗證。

DOCTYPE 變簡潔了

現在DOCTYPE只需簡短的這樣寫：

<!DOCTYPE html>

標籤不一定要閉合

在XHTML裡標籤必須要閉合，例如：

<input type="text" id="name" />

而在HTML5中，以下的寫法也是正確的，而這也是比較建議的寫法：

<input type="text" id="name">

同樣的方法也適用於meta，而且在指定content-type時，也只需要指定charset而不必定義文件類型text/html，例如：

<meta charset="UTF-8">

Web Workers基本概念

在使用Web Workers時，我們必須建立一個Worker實體，並傳入要被呼叫的Javascript檔案所在URL，而我們必須把Worker要跑的程式寫在這個檔案中，例如：

var worker = new Worker("worker.js");

在worker.js中我們必須綁定onmessage來執行我們想要執行的動作，在這裡我們可以使用postMessage()來觸發Worker.onmessage事件，例如：

onmessage = function (evt) {
	for (var i=0; i<100000000; i++) {
		//執行大量迴圈
		postMessage(i); // 觸發 Worker.onmessage() 並傳入 i
	};
};

Worker.onmessage(event) 事件

當在被呼叫的javascript裡呼叫postMessage()時，將會觸發這個事件，在這個事件中我們可以透過event.data來取得傳入資料。

worker.onmessage = function (e){
	// 由於在 worker.js 中使用了 postMessage() 並傳入 i 值
	// 因此在這裡可以使用 event.data 來取得 i 值，並做出相關處理
	// 例如：
	console.log(e.data);
}

Worker.onerror(event) 事件

當呼叫失敗時，將會觸發此事件，在這個事件中我們可以透過event來取得事件相關資訊。

worker.onerror = function(e){
	alert("於第["+ e.lineno +"]行發生錯誤 : " + e.message); //顯示錯誤訊息
}

Worker.terminate()

用以停止Worker的執行的成員函數。

因此Web Worker簡單的操作流程圖如下：

html5-web-workers

搭配jQuery的簡單Web Worker範例

點我觀看Web Workers Demo

worker.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Worker Test</title>
		<link rel="stylesheet" href="worker.css" type="text/css" media="screen">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
		<script src="init.js"></script>
	</head>

	<body>
		<a href="#" id="startWorker">開始</a>
		<ul id="worker-list"></ul>
		<a href="#">回文章</a>
	</body>
</html>

worker.css

#worker-list {
	list-style-type: none;
	width: 400px;
}
#worker-list li {
	background-color: #FFE;
	margin: 3px;
	padding: 3px;
	border: 1px solid #C6BC9F;
	font-size: 16px;
	position: relative;
}

#worker-list .close {
	position: absolute;
	background-color: #FFF;
	display: block;
	height: 18px;
	width: 18px;
	border: 1px solid #CCC;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
	cursor:pointer;
	font-family: Arial, Helvetica, sans-serif;
	right: 3px;
	top: 3px;
}

worker.js

onmessage = function (e) {
	for (var i=0; i<e.data; i++) {
		//觸發 worker.onmessage 傳入 i
		if(0 === i % 10 ) postMessage(i);
	};
};

init.js

$(function(){

	function createWorker (msgObj) {

		// 建立 worker
		var worker = new Worker("worker.js");

		worker.onmessage = function (e){
			msgObj.html(e.data); // 更新資訊 (e.data可取得觸發傳入值)
		}

		worker.onerror = function(e){
			alert("於第["+ e.lineno +"]行發生錯誤 : " + e.message); //顯示錯誤訊息
		}

		return worker;
	}

	$("#startWorker").click(function(){
		for(var i=0;i<5;i++){
			addworker();
		}
		$(this).remove();
		return false;
	});

	function addworker(){
		var newItem = $('<li />');
		var msg = $('<span class="message">Waitting...</span>');

		//關閉鈕
		var close = $('<span class="close">X</span>').click(function(){
			var li = $(this).closest('li');
			li.data('worker').terminate(); //停止worker的執行
			li.remove();
		});;

		var worker = createWorker (msg);

		//儲存Worker在元素裡
		newItem.data('worker',worker);

		//執行Worker
		worker.postMessage(30000);

		$('#worker-list').append(newItem.append(msg).append(close))
	}
});
]]> http://blog.colorbase.tw/web-development/888/feed 6