色胚子部落 » Web開發 http://blog.colorbase.tw 訊息多變的時代裡，需要多學習多思考 Mon, 15 Aug 2011 03:29:59 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 解決使用 jQuery.getJSON 時 Session 卻過期期的問題 http://blog.colorbase.tw/web-development/1141 http://blog.colorbase.tw/web-development/1141#comments Sun, 20 Jun 2010 10:06:25 +0000 阿育 http://blog.colorbase.tw/web-development/1141 當我們在做具有權限控管的網頁時，將會用到Session來做為是否已登入的紀錄及處理，通常在判斷為尚未登入時，將直接顯示錯誤訊息頁面或轉到登入表單頁面，但如果使用jQuery.getJSON()來做AJAX應用的話這樣的處理就不恰當了，因為這樣一來Session因為閒置過久而過期的話 getJSON() 將會得到非預期的結果而導致程式發生錯誤。

當然這種問題的解決的辦法有許多個，我們也可以在getJSON()取得資料後再判斷目前得到的資料是否正確，但這樣一來前端的程式碼將會顯得很囉嗦，因此解決辦法中有一個簡單又實用的就是直接取代 jQuery 的 getJOSN()，並搭配後端的對於不同請求給予不同的回應，來統一簡化整個判斷流程。

這裡主要用到了之前所提「使用 PHP 判斷 jQuery 傳來的 AJAX 請求類型」及「取代jQuery內置函數」兩種技巧。

在Javascript中寫入取代jQuery.getJSON()的函數：

(function($) {

	/**
	 * 取代 jQuery 的 JSON
	 */
	$.getJSON = function(url,paramData,callback){

		if($.isFunction(paramData)) {
			callback = paramData;
			paramData = null;
		}

		var opt = {
			url: url,
			dataType: 'json',
			cache: false,
			data: paramData,
			success: function(data, textStatus, XMLHttpRequest){

				if(null === data) return opt.error(XMLHttpRequest,textStatus);

				var handleError = false;

				if(data.TimeoutError != undefined ){
					if(data.TimeoutError == true){
						handleError = true;
						//提示錯誤訊息
						alert('您可能閒置過久，請重新登入系統再重試');
						//進一步轉向登入頁面
						window.location = '登入頁面URL';
					}
				}

				if(!handleError && callback != undefined) {
					callback(data, textStatus, XMLHttpRequest);
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				//提示錯誤訊息
				alert('連線發生錯誤！請檢查您的連線並重新嘗試');
			}
		};

		$.ajax(opt);

	};

})(jQuery);

在PHP中給予不同回應：

session_start();
if(!isset($_SESSION['login'])){ // 尚未登入
	if('application/json, text/javascript, */*' == $_SERVER['HTTP_ACCEPT']){
		//回應給取代後的getJSON()
		echo json_encode( array('TimeoutError' => true) );
	}else{
		//轉向登入頁面表單
		header('location: 登入頁面URL');
	}
}else{
	// 已登入的其他處理......
	echo json_encode( array('msg' => '取得訊息') );
}

之後一樣使用jQuery.getJSON()完全不變：

$(function(){

	$('#test').click(function(){
		// 取得 JSON資料
		// 若已登入將顯示「取得訊息」
		// 若未登入或Session過期將顯示「您可能閒置過久，請重新登入系統再重試」
		$.getJSON('/index.php',function(data){
			alert(data.msg);
		});
	});

});
]]> http://blog.colorbase.tw/web-development/1141/feed 5 檢測訪客瀏覽器對 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 有趣的 jQuery 快速顯示隱藏元素技巧 http://blog.colorbase.tw/web-development/1063 http://blog.colorbase.tw/web-development/1063#comments Fri, 14 May 2010 10:54:00 +0000 阿育 http://blog.colorbase.tw/?p=1063 今天在 Now you see me… show/hide performance 一文中，看到該文作者分析了各種jQuery顯示、隱藏的作法及其效能比較，最後還提到了一個非常有趣的好方法，他利用禁用、啟用<style>元素的方法來達到套用顯示、隱藏效果，在頁面中需要大量套用情況下效能特別好。

首先利用<style>來定義樣式為隱藏：

<style id="special_hide">
	.special_hide {	display: none;}
</style>

接著在將該<style>元素的disabled屬性設為true使其失去作用，也就是讓他變為顯示，例如jQuery中可以這麼寫：

 $('#special_hide').attr('disabled', true);  // 禁用指定<style>元素

 $('#special_hide').attr('disabled', false); // 啟用指定<style>元素

以下為完整的範例 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
	</script>
	<script type="text/javascript">
	$(function (){
		$('#disableBtn').click(function(){
			$('#special_hide').attr('disabled', true); // 禁用樣式
		});

		$('#enableBtn').click(function(){
			$('#special_hide').attr('disabled', false); // 啟用樣式
		});
	});
	</script>

    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style id="special_hide">.special_hide { display: none; }</style>
  </head>
  <body>

    <button id="disableBtn">取消樣式</button>
    <button id="enableBtn">啟用樣式</button>

    <div class="special_hide">這個元素預設會因為樣式而隱藏</div>

  </body>
</html>

執行範例：

延伸思考

透過禁用、啟用<style>元素的方法，不只可以應用在大量套用顯示、隱藏效果，其實很多效果都可以利用此方法來完成，特別是大量套用時，因為瀏覽器原生的CSS Selector解析，理論上總是會比jQuery Selector來的快。

參考文章

]]> http://blog.colorbase.tw/web-development/1063/feed 4 兩款用於開發 iPhone Web 應用的 UI Framework http://blog.colorbase.tw/web-development/1010 http://blog.colorbase.tw/web-development/1010#comments Wed, 05 May 2010 10:42:04 +0000 阿育 http://blog.colorbase.tw/web-development/1010 最近在雜誌上看到了關於手機平台開發的專欄，裡面提到了手機平台Web上很難做出如同本機應用程式所能做出的使用者體驗(User experience)，雖然這是事實，但透過Framework的輔助多少可降低難度及開發成本。

iUI: iPhone User Interface Framework

image

為iPhone Web UI提供完整的解決方案，只需利用Javascript與標準的HTML就能開發出長得很像iPhone應用程式的Web應用。

網址：http://code.google.com/p/iui/

概觀：http://www.k10design.net/articles/iui/

範例：http://www.k10design.net/articles/iui/demo/

jQTouch

image

這是一個jQuery Plugin，如果熟悉jQuery的話是個不錯的選擇。

網址：http://www.jqtouch.com/

範例：http://www.jqtouch.com/preview/demos/main/

]]> http://blog.colorbase.tw/web-development/1010/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 與你的夥伴線上討論設計或概念 – Cacoo http://blog.colorbase.tw/web-development/881 http://blog.colorbase.tw/web-development/881#comments Sun, 18 Apr 2010 13:09:17 +0000 阿育 http://blog.colorbase.tw/web-development/881 Cacoo是一款很像Visio的免費線上工具，它可以用來繪製網站地圖、wireframe、UML、流程圖、網路圖等類型的圖表，其最大的特的點是它可以即時多人同時編輯。

以往當與夥伴處於異地而無法面對面直接溝通時，我們可能會用即時通訊軟體，你在那端、我在這端各自描述著自己的想法，遇到需要用圖形表示時只能透過即時通訊軟體或E-mail把編輯好的圖檔寄過去或用MSN之類的即時通訊軟體傳過去，這樣的過程不僅耗費不必要的時間，溝通起來也挺憋腳的，甚至還可能出現雞同鴨講的窘境。

現在透過Cacoo同時且即時的功能，我們將可以與夥伴的盡情的溝通，讓網路的溝通障礙減到最低，如果再搭配語音通訊的話，相信就更完美了。

image

Cacoo主要功能與特色

  • 多人線上「即時」且「同時」編輯圖表。
  • 可繪製網站地圖、wireframe、UML、流程圖及網路圖等類型的圖表。
  • 內建簡易螢幕截圖工具，可直接擷取螢幕畫面並加入圖表中。
  • 線上工具，走到哪用到哪。
  • 提供多種圖形素材可直接套用，也可上傳自己的圖片。
  • 內建即時通訊功能，就算沒裝MSN也能用溝通。

Screenshot

可繪製多種圖形，例如下圖的網路架構圖。

image

可繪製wireframe與夥伴溝同版面設計。

image

可邀請夥伴編輯同一份文件，當夥伴已經在編輯時，於文件列表中將會以「Editing」提示。

image

內建的即時通訊功能，沒有安裝MSN或Skype也能線上即時溝通(文字溝通)。

image

當對方在編輯內容時，可「即時」看到對方正在編輯的動作。

image

Cacoo官方的介紹影片

Cacoo – Real-time Collaborative Diagramming & Design from Nulab Inc. on Vimeo.

相關連結

Cacoo 線上即時協作繪圖工具

]]> http://blog.colorbase.tw/web-development/881/feed 1 我一個半途夭折的想法 http://blog.colorbase.tw/web-development/767 http://blog.colorbase.tw/web-development/767#comments Tue, 06 Apr 2010 10:33:51 +0000 阿育 http://blog.colorbase.tw/?p=767 在2008年底，我突發奇想的開始做了一個名為「拓客基地」的網站，這是一個聊天室網站，大約在2009一月底完成一個簡易的beta版，但卻在辛辛苦苦做完之後一直擺著沒去裡它，也從未對外公開它的網址。

與一些聊天室不同的是，這個聊天架構不是由Client(Browser)不斷送出Request，而是由Server在有需求時才送出訊息或通知。

直到最近pigo大在他的部落格中提到一種叫做Comet架構的概念，我才發現原來有這樣一種架構概念，在這之前我倒是沒有聽過，真是後知後覺啊。

在稍微了解過這種概念後發現與我當初想的好像頗為相似，重點似乎都是Server的主動，而不是不斷的請求，但我不是很確定是否有何不同，不過很恰巧的是Server端都是用C#寫的（硬要攀關係 XD）。

仔細想想這樣的運作架構或許有它的存在的價值，重點在於用在什麼地方。

因此今天又重新把這個網站整理一下搬了出來，有興趣的人不妨隨意玩玩，或許可以激起你另一個想法。

Screenshots

Web 聊天介面

室長端介面

網址：

http://tbase.colorbase.tw/

帳號：test  密碼：test

概念

這個聊天室架構不是由Client(Browser)不斷發送Request請求，而是讓聊天室成員與室長端建立一個固定的連線，換句話說是在有需求時訊息才會被傳遞，而室長端就是一個Server端，訊息流量都由使用者（室長與成員）自行承擔，缺點是使用者如果要當室長必須需要下載一個Client端軟體。

在這樣架構之下總共會有兩種Server端（HTTP Server不納入計算），一是中介Server，用於室長與聊天成員之間建立連線的媒介，處理一些狀態訊息等等，二是室長端。

但事實上，中介Server的角色在某些應用底下，它並不是一定要存在的，因此若單指聊天室長端的Server與聊天成員的運作來看，這樣的運作就會很像所謂的comet（希望我沒有會錯意）。

由於是固定連線的關係，因此在訊息的傳遞上非常即時，實測的結果，室長端使用一般家用網路其即時的效果跟MSN似乎不相上下，當然這取決於連線數量的多寡與頻寬條件。

如下簡圖：

圖示來自：

http://www.iconshock.com/

http://www.vistaicons.com/icon/i161s0/web_browsers_icons.htm

關於comet架構

這有一些文章可以參考：

PS. pigo大最近打算釋出他的原始碼，有興趣的人不妨留意一下他的消息。

]]> http://blog.colorbase.tw/web-development/767/feed 11 使用 PHP 判斷 jQuery 傳來的 AJAX 請求類型 http://blog.colorbase.tw/web-development/668 http://blog.colorbase.tw/web-development/668#comments Sun, 07 Mar 2010 08:49:35 +0000 阿育 http://blog.colorbase.tw/?p=665 今天看到 Detecting Ajax Events on the Server 這篇文章中提到一個有趣的好方法，當jQuery送出AJAX請求時會附上 X-Requested-With 請求檔頭，其值為「XMLHttpRequest」。

依據該文的描述在PHP中我們可以透過判斷 X-Requested-With 請求檔頭來分辨現在的請求是不是AJAX請求而給予不同的回應。

但這樣的判斷似乎不夠完整，在某些時候我們可能需要更進一步的判斷，jQuery所提供的AJAX方法不僅可以指定回傳的格式，它在送出AJAX請求時也會根據指定回傳格式的不同而傳出不同的Accept請求檔頭，因此在相同的概念下進一步聯想，其實我們還可以透過「Accept」請求檔頭來分辨現在的請求是什麼樣的類型。

以下依據該文的描述透過判斷 $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] 來分辨現在的請求是不是AJAX請求而給予不同的回應。
例如： 

if('XMLHttpRequest' === $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]){
	// 回應 AJAX 請求，例如JSON格式
	echo json_encode(array('message' => 'hello'));
} else {
	// 回應一般請求，例如HTML格式
	echo 'hello';
}

當需要更進一步區分請求類型的不同時，將可以透過「Accept」請求檔頭來分辨現在的請求是什麼樣的類型。

以下我整理出jQuery中各種不同的AJAX方法所傳出的「Accept」請求檔頭：

jQuery code Accept header
$.getJSON(URL);

$.ajax({url:URL, dataType :’json’});

 application/json, text/javascript, */*
$.getScript(URL);

$.ajax({url:URL, dataType :’script’}) ;

$.ajax({url:URL, dataType :’jsonp’}) ;

 text/javascript, application/javascript, */*
$.get(URL); */*
$(‘#result’).load(URL);

$.ajax({url:URL, dataType :’html’});

 text/html, */*
$.ajax({url:URL, dataType :’xml’}) application/xml, text/xml, */*

現在有了這個對照表，我們就可以根據Accept header來回應不同格式的結果：

switch ($_SERVER['HTTP_ACCEPT']){
	case 'application/json, text/javascript, */*':
		// 回應 JSON 格式
		break;
	case 'text/javascript, application/javascript, */*':
		// 回應 javascript 或 JSONP 格式
		break;
	case 'text/html, */*':
		// 回應 HTML 格式
		break;
	case 'application/xml, text/xml, */*':
		// 回應 XML 格式
		break;
}

參考文章：Detecting Ajax Events on the Serve

]]> http://blog.colorbase.tw/web-development/668/feed 0