tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger41125tag:blogger.com,1999:blog-5946530704742130970.post-68698866632108871882014-04-25T00:36:00.000+08:002014-04-25T00:36:46.078+08:00利用 Google Script 將 Blogger 備份到 Google Drive在 Google Drive 中建立『指令碼』<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj253QA-OE7-oN9HxbDYF0cVvbeXe5dWHirg__Os-KTGbTc1HkWfpThJGjy3fNnxP-3fnm6l68JH5xn3LvfhhMckPcbttRESsdCEhs_FTeLJ3HmNzUqWsAU_mcdB_AyYy7UdmVpfVpzGetp/s1600/blogger-backup-01.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj253QA-OE7-oN9HxbDYF0cVvbeXe5dWHirg__Os-KTGbTc1HkWfpThJGjy3fNnxP-3fnm6l68JH5xn3LvfhhMckPcbttRESsdCEhs_FTeLJ3HmNzUqWsAU_mcdB_AyYy7UdmVpfVpzGetp/s550/blogger-backup-01.png" /></a><br />
<br />
<br />
然後選擇『空白專案』<br />
<a href="http://3.bp.blogspot.com/-P3DtUjfuNwQ/U1k4v4RKuNI/AAAAAAAAM64/dvxVXBsymrY/s1600/blogger-backup-02.png"><img src="http://3.bp.blogspot.com/-P3DtUjfuNwQ/U1k4v4RKuNI/AAAAAAAAM64/dvxVXBsymrY/s550/blogger-backup-02.png" /></a><br />
<br />
<br />
貼上以下程式碼<br />
<pre class="js" name="code">/*
Ref:
https://developers.google.com/apps-script/reference/drive/drive-app
https://developers.google.com/apps-script/reference/drive/file
https://developers.google.com/apps-script/reference/drive/folder
https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app
https://developers.google.com/apps-script/reference/url-fetch/o-auth-config
https://developers.google.com/apps-script/reference/base/blob
https://developers.google.com/apps-script/reference/utilities/utilities
*/
var _backupKeepAmount = 10;
var _backupFolderName = 'blogger_backup';
var _backupFolder;
function main(){
var folders = DriveApp.getFoldersByName(_backupFolderName);
if(folders.hasNext()){
_backupFolder = folders.next();
}else{
_backupFolder = DriveApp.createFolder(_backupFolderName);
}
setAuth();
backupBlogger('{my_blog_1}', '{blog_id}', false);
backupBlogger('{my_blog_2}', '{blog_id}', false);
MailApp.sendEmail(Session.getActiveUser().getEmail(), 'Backup Blogger To Google Drive', Logger.getLog());
}
/**
* @param {String} prefixName 備份檔名的前綴
* @param {String} blogId
* @param {Boolean} isBigSize 如果備份的檔案超過 10M,請設為 true
*/
function backupBlogger(prefixName, blogId, isBigSize){
logMsg('Backup Start', prefixName);
/* 取得之前的備份清單 */
var files = _backupFolder.getFilesByType('application/xml');
var beforeFiles = [];
while (files.hasNext()) {
var file = files.next();
if(file.getName().indexOf(prefixName) == -1){ continue; }
beforeFiles.push(file);
}
beforeFiles.sort(function (a, b) {
return b.getName().localeCompare(a.getName());
});
/* 下載並儲存檔案 */
var isChange;
if(isBigSize){
isChange = downloadAndSaveBigSizeArchiveXml(prefixName, blogId, beforeFiles[0]);
}else{
isChange = downloadAndSaveArchiveXml(prefixName, blogId, beforeFiles[0]);
}
/*沒有異動結束處理*/
if(!isChange){ return; }
/* 刪除舊檔案 */
var oleFiles = beforeFiles.slice(_backupKeepAmount);
for(var i=0; i < oleFiles.length; i++){
oleFiles[i].setTrashed(true);
}
logMsg('Backup Complete', prefixName);
}
function logMsg(status, msg){
Logger.log('%s | %s', status, msg);
}
function setAuth(){
var scope = "https://www.blogger.com/feeds/";
var oAuthConfig = UrlFetchApp.addOAuthService("blogger");
oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
// oAuthConfig.setConsumerKey("anonymous");
// oAuthConfig.setConsumerSecret("anonymous");
}
function getArchiveXmlResponse(blogId){
var options = {
"oAuthServiceName" : "blogger",
"oAuthUseToken" : "always"
};
var url = 'https://www.blogger.com/feeds/' + blogId + '/archive';
var response = UrlFetchApp.fetch(url, options);
/*下載失敗,錯誤記錄*/
if(response.getResponseCode() != 200){
logMsg('Download Failed', response.getAllHeaders().toSource());
return null;
}
return response;
}
function downloadAndSaveArchiveXml(prefixName, blogId, beforeFile){
var response = getArchiveXmlResponse(blogId);
if(!response){ return false; }
var downloadContent = response.getContentText();
/* 檢查檔案異動 */
if(beforeFile){
var content = beforeFile.getBlob().getDataAsString();
if(beforeFile && Math.abs(content.length -downloadContent.length) < 100){
logMsg('Not Change', prefixName);
return false;
}
}
/* 儲存下載 */
var fileName = Utilities.formatDate(new Date(), "+8", "yyyyMMdd_HHmmss'.xml'");
_backupFolder.createFile(prefixName + '_' + fileName, downloadContent, 'application/xml');
return true;
}
function downloadAndSaveBigSizeArchiveXml(prefixName, blogId, beforeFile){
var response = getArchiveXmlResponse(blogId);
if(!response){ return false; }
/* 儲存下載 */
var fileName = Utilities.formatDate(new Date(), "+8", "yyyyMMdd_HHmmss'.xml'");
var downloadBlob = response.getBlob();
downloadBlob.setName(prefixName + '_' + fileName);
downloadBlob.setContentType('application/xml');
var downloadFile = _backupFolder.createFile(downloadBlob);
/* 檢查檔案異動 */
if(beforeFile && Math.abs(beforeFile.getSize() - downloadFile.getSize() ) < 1000){
downloadFile.setTrashed(true);
logMsg('Not Change', prefixName);
return false;
}
return true;
}
</pre><br />
<br />
修改 {my_blog_1} 及 {blog_id},{my_blog_1} 是備份檔名的前綴,{blog_id} 則可以在文章管理的網址上找到<br />
<a href="http://3.bp.blogspot.com/-3RYrRTPfphM/U1k4vkoCZjI/AAAAAAAAM6w/m2i64VNrZ_A/s1600/blogger-backup-03.png"><img src="http://3.bp.blogspot.com/-3RYrRTPfphM/U1k4vkoCZjI/AAAAAAAAM6w/m2i64VNrZ_A/s550/blogger-backup-03.png" /></a><br />
<br />
<br />
儲存檔案,並取名為『Backup Blogger To Google Drive』<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8bONzotuVp3usDNFadI-q9agr4qqbfpQEbyiV6MiUywS4UgTqx7MrOigOdXX_9OAc6c3naJG9ze3K8oAO36z5qmDMeU38HnNodgIQkNGzq9K9f7ldZcVsn6yyAPoaFvS0XAYltrYYPt4-/s1600/blogger-backup-04.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8bONzotuVp3usDNFadI-q9agr4qqbfpQEbyiV6MiUywS4UgTqx7MrOigOdXX_9OAc6c3naJG9ze3K8oAO36z5qmDMeU38HnNodgIQkNGzq9K9f7ldZcVsn6yyAPoaFvS0XAYltrYYPt4-/s550/blogger-backup-04.png" /></a><br />
<a href="http://4.bp.blogspot.com/-hJpUV9CeRgI/U1k4w-yZV2I/AAAAAAAAM60/d053hWgWhf8/s1600/blogger-backup-05.png"><img src="http://4.bp.blogspot.com/-hJpUV9CeRgI/U1k4w-yZV2I/AAAAAAAAM60/d053hWgWhf8/s550/blogger-backup-05.png" /></a><br />
<br />
<br />
先來測試一下備份是否能正常執行,請選擇執行的函數為『main』,並按下『執行』,然後先為此程式授權<br />
<a href="http://3.bp.blogspot.com/-XeaoC33U5xE/U1k4xlTxovI/AAAAAAAAM7Y/41G-Ht2yHVY/s1600/blogger-backup-06.png"><img src="http://3.bp.blogspot.com/-XeaoC33U5xE/U1k4xlTxovI/AAAAAAAAM7Y/41G-Ht2yHVY/s550/blogger-backup-06.png" /></a><br />
<a href="http://3.bp.blogspot.com/-9Yuy_iVCBkk/U1k4yKHmq_I/AAAAAAAAM7M/hCkPPJ3SXRo/s1600/blogger-backup-07.png"><img src="http://3.bp.blogspot.com/-9Yuy_iVCBkk/U1k4yKHmq_I/AAAAAAAAM7M/hCkPPJ3SXRo/s550/blogger-backup-07.png" /></a><br />
<a href="http://1.bp.blogspot.com/-k5JwTGNI4dQ/U1k4yPL881I/AAAAAAAAM7Q/gUKGPx-5Lr4/s1600/blogger-backup-08.png"><img src="http://1.bp.blogspot.com/-k5JwTGNI4dQ/U1k4yPL881I/AAAAAAAAM7Q/gUKGPx-5Lr4/s550/blogger-backup-08.png" /></a><br />
<br />
<br />
如果都沒問題,接著來設定排程,選擇『啟動程序』<br />
<a href="http://4.bp.blogspot.com/-YCh0pRaJ1eg/U1k4ylaMDwI/AAAAAAAAM7w/6a0rTA1ydQM/s1600/blogger-backup-09.png"><img src="http://4.bp.blogspot.com/-YCh0pRaJ1eg/U1k4ylaMDwI/AAAAAAAAM7w/6a0rTA1ydQM/s550/blogger-backup-09.png" /></a><br />
<br />
<br />
新增一個觸發程序<br />
<a href="http://4.bp.blogspot.com/-_NKTo78iMbY/U1k4zOmtrhI/AAAAAAAAM7g/Pa068OrWomg/s1600/blogger-backup-10.png"><img src="http://4.bp.blogspot.com/-_NKTo78iMbY/U1k4zOmtrhI/AAAAAAAAM7g/Pa068OrWomg/s550/blogger-backup-10.png" /></a><br />
<br />
<br />
選擇執行的函數『main』,然後時間定在晚上 11 點,接著選擇『通知』<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFgI4XXhdgzQ0bEBsVWnbm3twYAS3vda3naZe6VOvG3F1YHagpNQYybtz958Rte9ZqmMxCrgWW0-9DNlLiurRzT1x8dmZruqeD8_2t9RL_cOamKyesmUqu1S7PKaNIINF1BaiMdyrHAyA/s1600/blogger-backup-11.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFgI4XXhdgzQ0bEBsVWnbm3twYAS3vda3naZe6VOvG3F1YHagpNQYybtz958Rte9ZqmMxCrgWW0-9DNlLiurRzT1x8dmZruqeD8_2t9RL_cOamKyesmUqu1S7PKaNIINF1BaiMdyrHAyA/s550/blogger-backup-11.png" /></a><br />
<br />
<br />
這個設定主要是發生錯誤的時候可以寄送通知<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCl3TY66youPD2koRPU-I3l2HfIVpVatmDEDqDBhokG6OikWIUBKU0EQYiq240vjov5W3wOKkOWJRYMdfnKN2cRA2YOVjI8d9Sj08rW62GdBC9ZU0yuaETzFKV5rNezl7FfzTFvIZgFb84/s1600/blogger-backup-12.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCl3TY66youPD2koRPU-I3l2HfIVpVatmDEDqDBhokG6OikWIUBKU0EQYiq240vjov5W3wOKkOWJRYMdfnKN2cRA2YOVjI8d9Sj08rW62GdBC9ZU0yuaETzFKV5rNezl7FfzTFvIZgFb84/s550/blogger-backup-12.png" /></a><br />
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-36055306698634161272014-02-18T22:26:00.000+08:002014-02-19T01:34:55.349+08:00[jQuery] 製作 $.fn.delayAll<a href="http://jquery.com/" target="_blank">jQuery</a> 有提供 <a href="http://api.jquery.com/delay/" target="_blank">delay</a> 這個方法,可惜只能用在動畫操作上,想要做到下面的事情就只能用 setTimeout 了。<br />
<pre class="js" name="code">// not working
$('div').css('color','red').delay(200).css('color','blue');
// use setTimeout
$('div').css('color','red');
setTimeout(function(){
$('div').css('color','blue');
}, 200);
</pre><br />
<br />
稍微研究了一下,發現 <a href="http://jquery.com/" target="_blank">jQuery</a> 本身有製作 <a href="http://api.jquery.com/queue/" target="_blank">queue</a> 的功能,這個用來存放 delay 後要執行動作的紀錄器,最後只要對 jQuery Object 作一個代理器的包裝,就可以達到想要的目的了。<br />
<pre class="js" name="code">var queueName = 'delayAll';
/*定義 jQuery Delay 代理類別*/
function jQueryDelay(jqObject, duration){
/*將缺少的成員屬性補上*/
for(var member in jqObject){
if(!$.isFunction(jqObject[member]) || !this[member]){
this[member] = jqObject[member];
}
}
/*新增 delay 時間並啟動 queue*/
jqObject
.delay(duration, queueName)
.dequeue(queueName);
/*紀錄 jQuery 物件*/
this._jqObject = jqObject;
};
/*為所有的 jQuery 方法製作 proxy*/
for(var member in $.fn){
if(!$.isFunction($.fn[member])){ continue; }
jQueryDelay.prototype[member] = function(){
var jqObject = this._jqObject;
var args = Array.prototype.slice.call(arguments);
var mothed = arguments.callee.methodName;
/*將需要執行動作加入 queue*/
jqObject.queue(queueName, function(next) {
jqObject[mothed].apply(jqObject, args);
next();
});
return this;
};
/*紀錄方法名稱,在 proxy 時會需要參考到*/
jQueryDelay.prototype[member].methodName = member;
}
/*允許多次串接的可能*/
jQueryDelay.prototype.delayAll = function(duration){
this._jqObject.delay(duration, queueName);
return this;
};
/*用 jQueryDelay 將原本的 jQuery Object 包裝起來*/
$.fn.delayAll = function(duration){
return new jQueryDelay(this ,duration);
};
</pre><br />
<br />
使用範例:<br />
<pre class="js" name="code">$('div').css('color','#f00')
.delayAll(2000).css('color','#0f0')
.delayAll(2000).css('color','#00f');
</pre><br />
<br />
檔案下載:<a href="https://dl.dropboxusercontent.com/u/16784943/code-demo/jquery.delayAll.js" target="_blank">jquery.delayAll.js</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-85304044466838396972014-01-21T00:23:00.001+08:002014-01-21T00:23:41.999+08:00[Less] 簡單做到背景漸層對選顏色不擅長,又想在網頁做出 CSS 漸層效果,Less 提供了兩個方便的函數 lighten(加亮顏色)、darken(加深顏色),透過這兩個函數就可以輕鬆產生漸層所需要的色差,然後調整百比值就可以控制漸層的色階。<br />
<br />
<pre class="css" name="code">.toolbar {
@color: #914;
@lighten: lighten(@color, 3%);
@darken: darken(@color, 3%);
background-color: @color;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
background-image: -webkit-linear-gradient(top, @lighten, @darken);
background-image: -moz-linear-gradient(top, @lighten, @darken);
background-image: -ms-linear-gradient(top, @lighten, @darken);
background-image: -o-linear-gradient(top, @lighten, @darken);
background-image: linear-gradient(to bottom, @lighten, @darken);
}
</pre><br />
上面除了用 linear-gradient 來產生漸層,額外還加上了 background-color 這個保險,讓不支援 CSS3 的 browser 也能有基本的底色。<br />
<br />
<br />
這樣寫還是有點麻煩,如果包成 mixin 會更方便,如下:<br />
<pre class="css" name="code">.bg-vertical-gradient(@color, @amount:3%) {
@lighten: lighten(@color, @amount);
@darken: darken(@color, @amount);
background-color: @color;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
background-image: -webkit-linear-gradient(top, @lighten, @darken);
background-image: -moz-linear-gradient(top, @lighten, @darken);
background-image: -ms-linear-gradient(top, @lighten, @darken);
background-image: -o-linear-gradient(top, @lighten, @darken);
background-image: linear-gradient(to bottom, @lighten, @darken);
}
.toolbar {
.bg-vertical-gradient(#914);
}
.banner {
.bg-vertical-gradient(#702, 5%);
}
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-59681471593501217402013-08-25T16:43:00.000+08:002013-08-25T16:43:32.725+08:00[轉載] 字符串匹配的 Boyer-Moore 演算法轉載自:<a target="_blank" href="http://www.ruanyifeng.com/blog/2013/05/boyer-moore_string_search_algorithm.html">字符串匹配的Boyer-Moore算法 - 阮一峰的网络日志</a><br />
<br />
上一篇文章,我介绍了<a target="_blank" href="http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93Morris%E2%80%93Pratt_algorithm.html">KMP算法</a>。<br />
<br />
但是,它并不是效率最高的算法,实际采用并不多。各种文本编辑器的"查找"功能(Ctrl+F),大多采用<a target="_blank" href="http://en.wikipedia.org/wiki/Boyer%E2%80%93Moore_string_search_algorithm">Boyer-Moore算法</a>。<br />
<br />
<img src="https://lh5.googleusercontent.com/-cj-BzPEpKys/Uhm_WXiaFnI/AAAAAAAAMPE/pKpNPHJ_CTo/s550/bg2013050301.jpg" style="border:none;" /><br />
<br />
Boyer-Moore算法不仅效率高,而且构思巧妙,容易理解。1977年,德克萨斯大学的Robert S. Boyer教授和J Strother Moore教授发明了这种算法。<br />
<br />
下面,我根据Moore教授自己的<a target="_blank" href="http://www.cs.utexas.edu/~moore/best-ideas/string-searching/fstrpos-example.html">例子</a>来解释这种算法。<br />
<br />
<br />
<h3>1.</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7mZngN70WjsHTljQxjUtgi8SlnAeGGQ5DaUMxVoqpqbkolZX-jTxABtH4l9FZCY4f2NU4Siv_foQufrh95Dz7O6fctzDgqRwBvAM2wpxojLi_3WZUMuVe5kdNQnaLrphoOuTDbFEfBul/s550/bg2013050302.png" style="border:none;" /><br />
<br />
假定字符串为"HERE IS A SIMPLE EXAMPLE",搜索词为"EXAMPLE"。<br />
<br />
<br />
<br />
<h3>2.</h3><img src="https://lh3.googleusercontent.com/-50fKsYPIo6o/Uhm_WS8g--I/AAAAAAAAMPA/PW3VXJi7dy4/s550/bg2013050303.png" style="border:none;" /><br />
<br />
首先,"字符串"与"搜索词"头部对齐,从尾部开始比较。<br />
<br />
这是一个很聪明的想法,因为如果尾部字符不匹配,那么只要一次比较,就可以知道前7个字符(整体上)肯定不是要找的结果。<br />
<br />
我们看到,"S"与"E"不匹配。这时,<strong>"S"就被称为"坏字符"(bad character),即不匹配的字符。</strong>我们还发现,"S"不包含在搜索词"EXAMPLE"之中,这意味着可以把搜索词直接移到"S"的后一位。<br />
<br />
<br />
<br />
<h3>3.</h3><img src="https://lh4.googleusercontent.com/-P-goa4avPp8/Uhm_WwcXKaI/AAAAAAAAMPQ/2RZ9ieAIg9I/s550/bg2013050304.png" style="border:none;" /><br />
<br />
依然从尾部开始比较,发现"P"与"E"不匹配,所以"P"是"坏字符"。但是,"P"包含在搜索词"EXAMPLE"之中。所以,将搜索词后移两位,两个"P"对齐。<br />
<br />
<br />
<br />
<h3>4.</h3><img src="https://lh5.googleusercontent.com/-b_EfsHVnk5Q/Uhm_XEE7qQI/AAAAAAAAMPk/PCdBfqnZF5o/s550/bg2013050305.png" style="border:none;" /><br />
<br />
我们由此总结出<strong>"坏字符规则"</strong>:<br />
<br />
<blockquote>后移位数 = 坏字符的位置 - 搜索词中的上一次出现位置</blockquote><br />
如果"坏字符"不包含在搜索词之中,则上一次出现位置为 -1。<br />
<br />
以"P"为例,它作为"坏字符",出现在搜索词的第6位(从0开始编号),在搜索词中的上一次出现位置为4,所以后移 6 - 4 = 2位。再以前面第二步的"S"为例,它出现在第6位,上一次出现位置是 -1(即未出现),则整个搜索词后移 6 - (-1) = 7位。<br />
<br />
<br />
<br />
<h3>5.</h3><img src="https://lh4.googleusercontent.com/-0zgkPwRsT1E/Uhm_XDhy_MI/AAAAAAAAMPc/V4clsLFS62g/s550/bg2013050306.png" style="border:none;" /><br />
<br />
依然从尾部开始比较,"E"与"E"匹配。<br />
<br />
<br />
<br />
<h3>6.</h3><img src="https://lh3.googleusercontent.com/-pBuQM1N7Np8/Uhm_XV5cU5I/AAAAAAAAMPw/ARF5MP8pFco/s550/bg2013050307.png" style="border:none;" /><br />
<br />
比较前面一位,"LE"与"LE"匹配。<br />
<br />
<br />
<br />
<h3>7.</h3><img src="https://lh3.googleusercontent.com/-EyE3Zfy_pa4/Uhm_XzJKkyI/AAAAAAAAMQE/IAtporFTSUk/s550/bg2013050308.png" style="border:none;" /><br />
<br />
比较前面一位,"PLE"与"PLE"匹配。<br />
<br />
<br />
<br />
<h3>8.</h3><img src="https://lh3.googleusercontent.com/-Sr9RTs7fS-Y/Uhm_YEoZkBI/AAAAAAAAMP0/DiDA2GEi1zc/s550/bg2013050309.png" style="border:none;" /><br />
<br />
比较前面一位,"MPLE"与"MPLE"匹配。<strong>我们把这种情况称为"好后缀"(good suffix),即所有尾部匹配的字符串。</strong>注意,"MPLE"、"PLE"、"LE"、"E"都是好后缀。<br />
<br />
<br />
<br />
<h3>9.</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga33uWqMSPSCsQK6m6TGMwCGgujhWl2GwRTBBGjT-aRi-LLypF3QmCc2fxQEiNLwY9VWuLhpelVqQCwOWNqVqxL5a2C0MkmUOQOfIoje6WEBJRpIWlTkYq11CxNCeuToqIY0_zoTmbzW8G/s550/bg2013050310.png" style="border:none;" /><br />
<br />
比较前一位,发现"I"与"A"不匹配。所以,"I"是"坏字符"。<br />
<br />
<br />
<br />
<h3>10.</h3><img src="https://lh4.googleusercontent.com/-hv9P6LnBcLI/Uhm_YSVRb3I/AAAAAAAAMQQ/ZfbVSB58WVs/s550/bg2013050311.png" style="border:none;" /><br />
<br />
根据"坏字符规则",此时搜索词应该后移 2 - (-1)= 3 位。问题是,此时有没有更好的移法?<br />
<br />
<br />
<br />
<h3>11.</h3><img src="https://lh3.googleusercontent.com/-Sr9RTs7fS-Y/Uhm_YEoZkBI/AAAAAAAAMP0/DiDA2GEi1zc/s550/bg2013050309.png" style="border:none;" /><br />
<br />
我们知道,此时存在"好后缀"。所以,可以采用<strong>"好后缀规则"</strong>:<br />
<br />
<blockquote>后移位数 = 好后缀的位置 - 搜索词中的上一次出现位置</blockquote><br />
举例来说,如果字符串"ABCDAB"的后一个"AB"是"好后缀"。那么它的位置是5(从0开始计算,取最后的"B"的值),在"搜索词中的上一次出现位置"是1(第一个"B"的位置),所以后移 5 - 1 = 4位,前一个"AB"移到后一个"AB"的位置。<br />
<br />
再举一个例子,如果字符串"ABCDEF"的"EF"是好后缀,则"EF"的位置是5 ,上一次出现的位置是 -1(即未出现),所以后移 5 - (-1) = 6位,即整个字符串移到"F"的后一位。<br />
<br />
这个规则有三个注意点:<br />
<br />
<blockquote><ol><li>"好后缀"的位置以最后一个字符为准。假定"ABCDEF"的"EF"是好后缀,则它的位置以"F"为准,即5(从0开始计算)。</li>
<li>如果"好后缀"在搜索词中只出现一次,则它的上一次出现位置为 -1。比如,"EF"在"ABCDEF"之中只出现一次,则它的上一次出现位置为-1(即未出现)。</li>
<li>如果"好后缀"有多个,则除了最长的那个"好后缀",其他"好后缀"的上一次出现位置必须在头部。比如,假定"BABCDAB"的"好后缀"是"DAB"、"AB"、"B",请问这时"好后缀"的上一次出现位置是什么?回答是,此时采用的好后缀是"B",它的上一次出现位置是头部,即第0位。这个规则也可以这样表达:如果最长的那个"好后缀"只出现一次,则可以把搜索词改写成如下形式进行位置计算"(DA)BABCDAB",即虚拟加入最前面的"DA"。</li>
</ol></blockquote><br />
回到上文的这个例子。此时,所有的"好后缀"(MPLE、PLE、LE、E)之中,只有"E"在"EXAMPLE"还出现在头部,所以后移 6 - 0 = 6位。 <br />
<br />
<br />
<br />
<h3>12.</h3><img src="https://lh5.googleusercontent.com/-VSB9EwuQq2E/Uhm_YzCskfI/AAAAAAAAMQI/UAfcNWHT420/s550/bg2013050312.png" style="border:none;" /><br />
<br />
可以看到,"坏字符规则"只能移3位,"好后缀规则"可以移6位。所以,<strong>Boyer-Moore算法的基本思想是,每次后移这两个规则之中的较大值。</strong><br />
<br />
更巧妙的是,这两个规则的移动位数,只与搜索词有关,与原字符串无关。因此,可以预先计算生成《坏字符规则表》和《好后缀规则表》。使用时,只要查表比较一下就可以了。<br />
<br />
<br />
<br />
<h3>13.</h3><img src="https://lh4.googleusercontent.com/-noMwtArDrEQ/Uhm_ZZ0lAeI/AAAAAAAAMQc/hkMrYYwgL2o/s550/bg2013050313.png" style="border:none;" /><br />
<br />
继续从尾部开始比较,"P"与"E"不匹配,因此"P"是"坏字符"。根据"坏字符规则",后移 6 - 4 = 2位。<br />
<br />
<br />
<br />
<h3>14.</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_S2LQBdFViamHc4pfRR3d2JxJLAkYMlbGb1qCQvU3TvhzAqc2N7Z7tlySWOkyhIJuY757AVy4C6-ntK6JhuUN6Tm9huFzfF7yZriF-dEBI9CYBrenl4IhSGV47EBcQEhUNJJ9CFImqGkI/s550/bg2013050314.png" style="border:none;" /><br />
<br />
从尾部开始逐位比较,发现全部匹配,于是搜索结束。如果还要继续查找(即找出全部匹配),则根据"好后缀规则",后移 6 - 0 = 6位,即头部的"E"移到尾部的"E"的位置。<br />
<br />
(完)<br />
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-73330877161185483482013-08-25T16:07:00.000+08:002013-09-22T20:19:21.622+08:00[轉載] 虚数的意义轉載自:<a target="_blank" href="http://www.ruanyifeng.com/blog/2012/09/imaginary_number.html">虚数的意义 - 阮一峰的网络日志</a><br />
<br />
有人在<a target="_blank" href="http://math.stackexchange.com/questions/199676/what-are-imaginary-numbers">Stack Exchange</a>问了一个问题:<br />
<br />
<blockquote>"我一直觉得虚数(imaginary number)很难懂。<br />
<br />
中学老师说,虚数就是-1的平方根。<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzaZkSRdUmaEjjkeYfMDGJXX5abu_NWfZjcczvjelPfHoCYwEtf7x1kamq55fqeA_Pg-8fSa1bO4gujxfF1Mp8I66GBzzbUae4X-Wp8mgB5l68fgdTUAqdOZveAFosFQ7AhTxsXLsv0JPe/s550/chart.png" style="border:none;" /><br />
<br />
可是,什么数的平方等于-1呢?计算器直接显示出错!<br />
<br />
直到今天,我也没有搞懂。谁能解释,虚数到底是什么?<br />
<br />
它有什么用?"<br />
</blockquote><br />
帖子的下面,很多人给出了自己的解释,还推荐了一篇非常棒的文章<a target="_blank" href="http://betterexplained.com/articles/a-visual-intuitive-guide-to-imaginary-numbers/">《虚数的图解》</a>。我读后恍然大悟,醍醐灌顶,原来虚数这么简单,一点也不奇怪和难懂!<br />
<br />
下面,我就用自己的语言,讲述我所理解的虚数。<br />
<br />
<br />
<br />
<hr /><h3>一、什么是虚数?</h3><br />
首先,假设有一根数轴,上面有两个反向的点:+1和-1。<br />
<br />
<img src="https://lh6.googleusercontent.com/-9i0-vthAwa4/Uhm4DO8InhI/AAAAAAAAMNU/PfXm56D9j6c/s550/bg2012092401.png" style="border:none;" /><br />
<br />
这根数轴的正向部分,可以绕原点旋转。显然,逆时针旋转180度,+1就会变成-1。<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFQR7AwsUC83eTrg8Sps3lZ6SIq6lIsplgku4EH1B6FSb7_a5l-QqoKsE7eMXKIm_qv6e5E1lG-AnFowLbw20gZ8eMeQ5TfAujrCZr0021mzM7vdRhehdrlnkl58S5dfIisQ8MwXkxd5t0/s550/bg2012092402.png" style="border:none;" /><br />
<br />
这相当于两次逆时针旋转90度。<br />
<br />
<img src="https://lh6.googleusercontent.com/-Y7p7NhtqHsw/Uhm4DFGgf7I/AAAAAAAAMNY/buuCCnmTEzk/s550/bg2012092403.png" style="border:none;" /><br />
<br />
因此,我们可以得到下面的关系式:<br />
<br />
<blockquote>(+1) * (逆时针旋转90度) * (逆时针旋转90度) = (-1)</blockquote><br />
如果把+1消去,这个式子就变为:<br />
<br />
<blockquote>(逆时针旋转90度)^2 = (-1)</blockquote><br />
将"逆时针旋转90度"记为 i :<br />
<br />
<blockquote>i^2 = (-1)</blockquote><br />
这个式子很眼熟,它就是虚数的定义公式。<br />
<br />
所以,我们可以知道,<strong>虚数 i 就是逆时针旋转90度,i 不是一个数,而是一个旋转量。</strong><br />
<br />
<br />
<br />
<hr /><h3>二、复数的定义</h3><br />
既然 i 表示旋转量,我们就可以用 i ,表示任何实数的旋转状态。<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJOH61MT64tP6rLfQ3BJ4WMDge3mkoqz8WJudits64NjirP2j9dUaoPx18Ib-cOW6L_jPrIABRBExqO-wnIFWnTwIvrERERnV66s8AkcYb5UOUe25Yxktl5GhHgzRz7UZVb3iiLnSPsf7/s550/bg2012092404.png" style="border:none;" /><br />
<br />
将实数轴看作横轴,虚数轴看作纵轴,就构成了一个二维平面。旋转到某一个角度的任何正实数,必然唯一对应这个平面中的某个点。<br />
<br />
只要确定横坐标和纵坐标,比如( 1 , i ),就可以确定某个实数的旋转量(45度)。<br />
<br />
数学家用一种特殊的表示方法,表示这个二维坐标:用 + 号把横坐标和纵坐标连接起来。比如,把 ( 1 , i ) 表示成 1 + i 。<strong>这种表示方法就叫做复数(complex number),其中 1 称为实数部,i 称为虚数部。</strong><br />
<br />
为什么要把二维坐标表示成这样呢,下一节告诉你原因。<br />
<br />
<br />
<br />
<hr /><h3>三、虚数的作用:加法</h3><br />
虚数的引入,大大方便了涉及到旋转的计算。<br />
<br />
<img src="https://lh4.googleusercontent.com/-_MpG44yTN2g/Uhm4EAA6vsI/AAAAAAAAMN0/aTU0EzBN4JY/s550/bg2012092405.png" style="border:none;" /><br />
<br />
比如,物理学需要计算"力的合成"。假定一个力是 3 + i ,另一个力是 1 + 3i ,请问它们的合成力是多少?<br />
<br />
<img src="https://lh6.googleusercontent.com/-ASXsUPrTpf4/Uhm4EBv80iI/AAAAAAAAMOE/rE2f9yygqzw/s550/bg2012092406.png" style="border:none;" /><br />
<br />
根据"平行四边形法则",你马上得到,合成力就是 ( 3 + i ) + ( 1 + 3i ) = ( 4 + 4i )。<br />
<br />
这就是虚数加法的物理意义。<br />
<br />
<br />
<br />
<hr /><h3>四、虚数的作用:乘法</h3><br />
如果涉及到旋转角度的改变,处理起来更方便。<br />
<br />
<img src="https://lh6.googleusercontent.com/-Y8wdswRAi1c/Uhm4EYJHjJI/AAAAAAAAMN4/eujo8ZlK_gk/s550/bg2012092407.png" style="border:none;" /><br />
<br />
比如,一条船的航向是 3 + 4i 。<br />
<br />
如果该船的航向,逆时针增加45度,请问新航向是多少?<br />
<br />
<img src="https://lh6.googleusercontent.com/-_mPUhQR52fI/Uhm4Ems6P_I/AAAAAAAAMOI/t-IXaCwgygw/s550/bg2012092408.png" style="border:none;" /><br />
<br />
45度的航向就是 1 + i 。计算新航向,只要把这两个航向 3 + 4i 与 1 + i 相乘就可以了(原因在下一节解释):<br />
<br />
<blockquote>( 3 + 4i ) * ( 1 + i ) = ( -1 + 7i )</blockquote><br />
所以,该船的新航向是 -1 + 7i 。<br />
<br />
如果航向逆时针增加90度,就更简单了。因为90度的航向就是 i ,所以新航向等于:<br />
<br />
<blockquote>( 3 + 4i ) * i = ( -4 + 3i )</blockquote><br />
这就是虚数乘法的物理意义:改变旋转角度。<br />
<br />
<br />
<br />
<hr /><h3>五、虚数乘法的数学证明</h3><br />
为什么一个复数改变旋转角度,只要做乘法就可以了?<br />
<br />
下面就是它的数学证明,实际上很简单。<br />
<br />
<img src="https://lh3.googleusercontent.com/-rJ16vKJA2K4/Uhm4FHxJhsI/AAAAAAAAMOU/bnrZXgnBErg/s550/bg2012092409.png" style="border:none;" /><br />
<br />
任何复数 a + bi,都可以改写成旋转半径 r 与横轴夹角 θ 的形式。<br />
<br />
假定现有两个复数 a + bi 和 c + di,可以将它们改写如下:<br />
<br />
<blockquote>a + bi = r1 * ( cosα + isinα )<br />
<br />
c + di = r2 * ( cosβ + isinβ )<br />
</blockquote><br />
<br />
这两个复数相乘,( a + bi )( c + di ) 就相当于<br />
<br />
<blockquote>r1 * r2 * ( cosα + isinα ) * ( cosβ + isinβ )</blockquote><br />
<br />
展开后面的乘式,得到<br />
<br />
<blockquote>cosα * cosβ - sinα * sinβ + i( cosα * sinβ + sinα * cosβ )</blockquote><br />
<br />
根据三角函数公式,上面的式子就等于<br />
<br />
<blockquote>cos(α+β) + isin(α+β)</blockquote><br />
<br />
所以,<br />
<br />
<blockquote>( a + bi )( c + di ) = r1 * r2 * ( cos(α+β) + isin(α+β) )</blockquote><br />
<br />
这就证明了,两个复数相乘,就等于旋转半径相乘、旋转角度相加。<br />
<br />
(完)<br />
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-17281822509853364672013-08-17T14:55:00.001+08:002013-08-17T15:01:57.490+08:00[PHP] url, base64, sprite 三種格式的 icons.css 產生器先做一個假設,如果 icon 的檔名就是 css 的 class 樣式名稱,那麼我們只要掃瞄資料夾的 Icon 圖檔,然後產生對應的 CSS 檔案,這樣就可以省去製作 Sprite 圖檔跟維護 CSS 對應的問題。<br />
<br />
第一種 url 格式只是取得路徑的問題。<br />
<br />
第二種 base64 格式可以透過 <code>base64_encode(file_get_contents($path));</code> 就簡單的達成。<br />
<br />
第三種 sprite 格式則使用 <a target="_blank" href="http://php.net/manual/en/book.imagick.php">Imagick</a> 去處理,會比較快樂。<br />
<br />
<br />
接著以下就是如何達成的程式片段:<br />
<br />
<pre class="php" name="code"><?php
/*把目錄改變到當前文件下*/
chdir(dirname(__FILE__));
/*Sprite 圖與圖的間距*/
$spriteGap = 30;
/*=[ 取得圖檔資訊 ]=*/
$maxWidth = 0;
$maxHeight = 0;
$nextTop = 0;
$imageList = array();
foreach ( glob('icons/*.{png,jpg,gif}',GLOB_BRACE) as $path )
{
$image = new Imagick($path);
$name = pathinfo($path,PATHINFO_FILENAME);
if(isset($imageList[$name])){
throw new Exception("圖片名稱重複 [ $name ]");
}
$info = array(
'{top}' => $nextTop,
'{image}' => $image,
'{width}' => $image->getImageWidth(),
'{height}' => $image->getImageHeight(),
'{name}' => $name,
'{path}' => $path,
'{isAnimate}' => false
);
$header = '';
switch($image->getImageFormat()){
case "PNG":
$header = 'data:image/png;base64,'; break;
case "JPEG":
$header = 'data:image/jpeg;base64,'; break;
case "GIF":
$header = 'data:image/gif;base64,'; break;
default: break;
}
$info['{uri}'] = $header.base64_encode(file_get_contents($path));
$maxWidth = max($maxWidth, $info['{width}']);
$maxHeight = max($maxHeight, $info['{height}']);
/*檢查圖片是否為動畫*/
$frameNum = 0;
foreach($image->deconstructImages() as $i) {
$frameNum++;
if ($frameNum > 1) {
$info['{isAnimate}'] = true;
break;
}
}
if(!$info['{isAnimate}']){
$nextTop += $info['{height}'] + $spriteGap;
}
$imageList[$name] = $info;
}
/*=[ 製作 CSS Sprite 圖檔 ]=*/
$spriteImage = new Imagick();
$spriteImage->newImage($maxWidth, $nextTop, new ImagickPixel());
$spriteImage->setImageFormat('png');
$spriteImage->paintTransparentImage(new ImagickPixel(), 0.0, 0);
foreach ($imageList as $name => $info)
{
if($info['{isAnimate}']){ continue; } /* 忽略 GIF 動畫 */
/* 複製 Icon 圖檔到 Sprite */
$spriteImage->compositeImage(
$info['{image}'],
$info['{image}']->getImageCompose(),
0,
$info['{top}']
);
$info['{image}']->destroy();
unset($imageList[$name]['{image}']);
}
$spriteImage->writeImage('icons.sprite.png');
$spriteImage->destroy();
$spriteImage = null;
</pre><br />
<br />
下載完整程式: <a target="_blank" href="https://dl.dropboxusercontent.com/u/16784943/code-demo/php_make_icons_css.zip">php_make_icons_css.zip</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-36639650058254651692012-06-04T01:29:00.000+08:002013-06-10T22:36:08.628+08:00[轉載] 自適應網頁設計轉載自:<a target="_blank" href="http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html">自适应网页设计(Responsive Web Design)</a> <a target="_blank" href="http://www.ruanyifeng.com/">阮一峰</a><br />
<br />
随着 3G 的普及,越来越多的人使用手机上网。<br />
<br />
移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?<br />
<br />
<a href="https://lh5.googleusercontent.com/-BaYt_zlv9p0/T8uOr2QueOI/AAAAAAAALUA/-OjZ66K3vpg/s1600-h/1335922013593.jpg"><img src="https://lh5.googleusercontent.com/-BaYt_zlv9p0/T8uOr2QueOI/AAAAAAAALUA/-OjZ66K3vpg/s512/1335922013593.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846233219758306" /></a><br />
<br />
手机的屏幕比较小,宽度通常在 600 像素以下,PC 的屏幕宽度,一般都在 1000 像素以上(目前主流宽度是1366×768),有的还达到了 2000 像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。<br />
<br />
很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个 mobile 版本,或者 iPhone / iPad 版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个 portal(入口),会大大增加架构设计的复杂度。<br />
<br />
于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?<br />
<br />
<a href="https://lh5.googleusercontent.com/-uIH_p4AhHN4/T8uOrZZsOmI/AAAAAAAALT4/2EqPm_6-2j4/s1600-h/1335922013149.jpg"><img src="https://lh5.googleusercontent.com/-uIH_p4AhHN4/T8uOrZZsOmI/AAAAAAAALT4/2EqPm_6-2j4/s512/1335922013149.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846225472731746" /></a><br />
<br />
<br />
<strong>一、"自适应网页设计"的概念</strong><br />
<br />
2010 年,Ethan Marcotte 提出了"<a target="_blank" href="http://www.alistapart.com/articles/responsive-web-design/">自适应网页设计</a>"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。<br />
<br />
他制作了一个<a target="_blank" href="http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html">范例</a>,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于 1300 像素,则 6 张图片并排在一行。<br />
<br />
<a href="https://lh4.googleusercontent.com/-XAH8R976OOI/T8uOse7P1SI/AAAAAAAALUM/ExEs_IE2RAc/s1600-h/1335922013819.jpg"><img src="https://lh4.googleusercontent.com/-XAH8R976OOI/T8uOse7P1SI/AAAAAAAALUM/ExEs_IE2RAc/s512/1335922013819.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846244135523618" /></a><br />
<br />
如果屏幕宽度在 600 像素到 1300 像素之间,则 6 张图片分成两行。<br />
<br />
<a href="https://lh5.googleusercontent.com/-iSqeGMtM0UY/T8uOrpu3KeI/AAAAAAAALT8/RcqQgtaeoLc/s1600-h/1335922013300.jpg"><img src="https://lh5.googleusercontent.com/-iSqeGMtM0UY/T8uOrpu3KeI/AAAAAAAALT8/RcqQgtaeoLc/s512/1335922013300.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846229856496098" /></a><br />
<br />
如果屏幕宽度在 400 像素到 600 像素之间,则导航栏移到网页头部。<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZkypXxwuGsMhVb1Wh3khRsYcCK48r1uMLiYGUNpKKqluIgJfZx17-pZXbx77I2p3deRiC3kAd42j51kIBYFdWUKrNb4sn8vTfSPVZW1YGbY5MTNnQ5f391lpbG3-J4g_zc53M4tFCmk3/s1600-h/1335922013682.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZkypXxwuGsMhVb1Wh3khRsYcCK48r1uMLiYGUNpKKqluIgJfZx17-pZXbx77I2p3deRiC3kAd42j51kIBYFdWUKrNb4sn8vTfSPVZW1YGbY5MTNnQ5f391lpbG3-J4g_zc53M4tFCmk3/s1600/1335922013682.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846236187791842" /></a><br />
<br />
如果屏幕宽度在 400 像素以下,则 6 张图片分成三行。<br />
<br />
<a href="https://lh6.googleusercontent.com/-HtZ9oy6v99Y/T8uOsogAY-I/AAAAAAAALUU/xQS_hQHczMg/s1600-h/1335922013951.jpg"><img src="https://lh6.googleusercontent.com/-HtZ9oy6v99Y/T8uOsogAY-I/AAAAAAAALUU/xQS_hQHczMg/s1600/1335922013951.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846246705619938" /></a><br />
<br />
<a target="_blank" href="http://mediaqueri.es/">mediaqueri.es</a> 上面有更多这样的例子。<br />
<br />
这里还有一个<a target="_blank" href="http://www.benjaminkeen.com/misc/bricss/">测试小工具</a>,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。<br />
<br />
<br />
<strong>二、允许网页宽度自动调整</strong><br />
<br />
"自适应网页设计"到底是怎么做到的?其实并不难。<br />
<br />
首先,在网页代码的头部,加入一行 <a target="_blank" href="https://developer.mozilla.org/en/mobile/viewport_meta_tag">viewport元标签</a>。<br />
<br />
<pre class="xml" name="code"><meta name="viewport" content="width=device-width, initial-scale=1" />
</pre><br />
<a target="_blank" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">viewport</a> 是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为 1.0,即网页初始大小占屏幕面积的 100%。<br />
<br />
所有主流浏览器都支持这个设置,包括 IE9。对于那些老式浏览器(主要是 IE6、7、8),需要使用 <a target="_blank" href="http://code.google.com/p/css3-mediaqueries-js/">css3-mediaqueries.js</a>。<br />
<br />
<pre class="xml" name="code"><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</pre><br />
<br />
<strong>三、不使用绝对宽度</strong><br />
<br />
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。<br />
<br />
具体说,CSS代码不能指定像素宽度:<br />
<br />
<pre class="css" name="code">width: xxx px;
</pre><br />
只能指定百分比宽度:<br />
<br />
<pre class="css" name="code">width: xx%;
</pre><br />
或者<br />
<br />
<pre class="css" name="code">width: auto;
</pre><br />
<br />
<strong>四、相对大小的字体</strong><br />
<br />
字体也不能使用绝对大小(px),而只能使用相对大小(em)。<br />
<br />
<pre class="css" name="code">body {
font: normal 100% Helvetica, Arial, sans-serif;
}
</pre><br />
上面的代码指定,字体大小是页面默认大小的 100%,即 16 像素。<br />
<br />
<pre class="css" name="code">h1 {
font-size: 1.5em;
}
</pre><br />
然后,h1 的大小是默认大小的 1.5 倍,即 24 像素(24/16=1.5)。<br />
<br />
<pre class="css" name="code">small {
font-size: 0.875em;
}
</pre><br />
small 元素的大小是默认大小的 0.875 倍,即 14 像素(14/16=0.875)。<br />
<br />
<br />
<strong>五、流动布局(fluid grid)</strong><br />
<br />
"<a target="_blank" href="http://www.alistapart.com/articles/fluidgrids/">流动布局</a>"的含义是,各个区块的位置都是浮动的,不是固定不变的。<br />
<br />
<pre class="css" name="code">.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
</pre><br />
<a target="_blank" href="http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/">float</a> 的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向 overflow(溢出),避免了水平滚动条的出现。<br />
<br />
另外,绝对定位(position: absolute)的使用,也要非常小心。<br />
<br />
<br />
<strong>六、选择加载CSS</strong><br />
<br />
"自适应网页设计"的核心,就是 CSS3 引入的 <a target="_blank" href="http://www.w3.org/TR/CSS21/media.html">Media Query</a> 模块。<br />
<br />
它的意思就是,自动探测屏幕宽度,然后加载相应的 CSS 文件。<br />
<br />
<pre class="xml" name="code"><link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
</pre><br />
上面的代码意思是,如果屏幕宽度小于 400 像素(max-device-width: 400px),就加载 tinyScreen.css 文件。<br />
<br />
<pre class="xml" name="code"><link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
</pre><br />
如果屏幕宽度在 400 像素到 600 像素之间,则加载 smallScreen.css 文件。<br />
<br />
除了用 html 标签加载 CSS 文件,还可以在现有 CSS 文件中加载。<br />
<br />
<pre class="css" name="code">@import url("tinyScreen.css") screen and (max-device-width: 400px);
</pre><br />
<br />
<strong>七、CSS 的 @media 规则</strong><br />
<br />
同一个 CSS 文件中,也可以根据不同的屏幕分辨率,选择应用不同的 CSS 规则。<br />
<br />
<pre class="css" name="code">@media screen and (max-device-width: 400px) {
.column {
float: none;
width: auto;
}
#sidebar {
display: none;
}
}
</pre><br />
上面的代码意思是,如果屏幕宽度小于 400 像素,则 column 块取消浮动(float:none)、宽度自动调节(width:auto),sidebar 块不显示(display:none)。<br />
<br />
<br />
<strong>八、图片的自适应(fluid image)</strong><br />
<br />
除了布局和文本,"自适应网页设计"还必须实现图片的<a target="_blank" href="http://unstoppablerobotninja.com/entry/fluid-images">自动缩放</a>。<br />
<br />
这只要一行 CSS 代码:<br />
<br />
<pre class="css" name="code">img { max-width: 100%; }
</pre><br />
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:<br />
<br />
<pre class="css" name="code">img, object { max-width: 100%; }
</pre><br />
老版本的 IE 不支持 max-width,所以只好写成:<br />
<br />
<pre class="css" name="code">img { width: 100%; }
</pre><br />
此外,windows 平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用 IE 的专有命令:<br />
<br />
<pre class="css" name="code">img { -ms-interpolation-mode: bicubic; }
</pre><br />
或者,Ethan Marcotte 的 <a target="_blank" href="http://unstoppablerobotninja.com/demos/resize/imgSizer.js">imgSizer.js</a>。<br />
<br />
<pre class="js" name="code">addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
</pre><br />
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。<br />
<br />
(完)Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-13295502360347923762012-05-05T01:53:00.000+08:002013-06-10T22:34:10.512+08:00[轉載] 让PHP更快的提供文件下载作者:<a target="_blank" href="http://www.laruence.com/">Laruence</a><br />
本文地址:<a target="_blank" href="http://www.laruence.com/2012/05/02/2613.html">http://www.laruence.com/2012/05/02/2613.html</a><br />
<br />
一般来说, 我们可以通过直接让URL指向一个位于Document Root下面的文件, 来引导用户下载文件.<br />
<br />
但是, 这样做, 就没办法做一些统计, 权限检查, 等等的工作. 于是, 很多时候, 我们采用让PHP来做转发, 为用户提供文件下载.<br />
<br />
<pre class="php" name="code"><?php
$file = "/tmp/dummy.tar.gz";
header("Content-type: application/octet-stream");
header('Content-Disposition: attachment; filename="'
. basename($file) . '"');
header("Content-Length: ". filesize($file));
readfile($file);
</pre><br />
但是这个有一个问题, 就是如果文件是中文名的话, 有的用户可能下载后的文件名是乱码.<br />
<br />
于是, 我们做一下修改(参考: :<br />
<br />
<pre class="php" name="code"><?php
$file = "/tmp/中文名.tar.gz";
$filename = basename($file);
header("Content-type: application/octet-stream");
//处理中文文件名
$ua = $_SERVER["HTTP_USER_AGENT"];
$encoded_filename = urlencode($filename);
$encoded_filename = str_replace("+", "%20", $encoded_filename);
if (preg_match("/MSIE/", $ua)) {
header('Content-Disposition: attachment; filename="'
. $encoded_filename . '"');
} else if (preg_match("/Firefox/", $ua)) {
header("Content-Disposition: attachment; filename*=\"utf8''"
. $filename . '"');
} else {
header('Content-Disposition: attachment; filename="'
. $filename . '"');
}
header('Content-Disposition: attachment; filename="'
. $filename . '"');
header("Content-Length: ". filesize($file));
readfile($file);
</pre><br />
恩, 现在看起来好多了, 不过还有一个问题, 那就是readfile, 虽然PHP的readfile尝试实现的尽量高效, 不占用PHP本身的内存, 但是实际上它还是需要采用MMAP(如果支持), 或者是一个固定的buffer去循环读取文件, 直接输出.<br />
<br />
输出的时候, 如果是Apache + PHP mod, 那么还需要发送到Apache的输出缓冲区. 最后才发送给用户. 而对于Nginx + fpm如果他们分开部署的话, 那还会带来额外的网络IO.<br />
<br />
那么, 能不能不经过PHP这层, 直接让Webserver直接把文件发送给用户呢?<br />
<br />
今天, 我看到了一个有意思的文章: <a target="_blank" href="http://www.jasny.net/articles/how-i-php-x-sendfile/">How I PHP: X-SendFile</a>.<br />
<br />
我们可以使用Apache的module <a target="_blank" href="https://tn123.org/mod_xsendfile/">mod_xsendfile</a>, 让Apache直接发送这个文件给用户:<br />
<br />
<pre class="php" name="code"><?php
$file = "/tmp/中文名.tar.gz";
$filename = basename($file);
header("Content-type: application/octet-stream");
//处理中文文件名
$ua = $_SERVER["HTTP_USER_AGENT"];
$encoded_filename = urlencode($filename);
$encoded_filename = str_replace("+", "%20", $encoded_filename);
if (preg_match("/MSIE/", $ua)) {
header('Content-Disposition: attachment; filename="'
. $encoded_filename . '"');
} else if (preg_match("/Firefox/", $ua)) {
header("Content-Disposition: attachment; filename*=\"utf8''"
. $filename . '"');
} else {
header('Content-Disposition: attachment; filename="'
. $filename . '"');
}
header('Content-Disposition: attachment; filename="'
. basename($file) . '"');
//让Xsendfile发送文件
header("X-Sendfile: $file");
</pre><br />
X-Sendfile头将被Apache处理, 并且把响应的文件直接发送给Client.<br />
<br />
Lighttpd和Nginx也有类似的模块, 大家有兴趣的可以去找找看<br />
<br />
<hr />mod-xsendfile 在 Ubuntu 的安裝方法:<br />
<strong>sudo apt-get install libapache2-mod-xsendfile</strong>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-57973715503495346402012-05-05T01:27:00.001+08:002013-06-10T22:33:47.762+08:00[PHP] 使用 php5-ffmpeg 擷取影片圖片前幾天在玩 FFmpeg 的時後,突然發現 Ubuntu 上多了 php5-ffmpeg 這個擴充套件,就想來玩玩看,看好不好用,有兩個結論:<ol><li>讀取影片取決於 FFmpeg 的支援性,如果想要什麼格式都支援的話,建議自己重新編譯 FFmpeg。</li>
<li>效率並沒有我想像中的快,兩分鐘的影片取十張圖,大約 30 秒。</li>
</ol>安裝方法:<br />
<strong>sudo apt-get install ffmpeg php5-ffmpeg php5-gd</strong><br />
<br />
擷圖測試範例:<br />
<pre class="php" name="code"><?php
$page = 10;
$prefix = 'screencap';
$mov = new ffmpeg_movie('gt.avi');
$count = $mov->getFrameCount();
$range = (int)round($count/($page+1));
for($i=1; $i<=$page; $i++){
$frameNum = $range*$i;
$imgFile = $prefix.'_'.$i.'.png';
$frame = $mov->getFrame($frameNum);
if(!$frame){ continue; }
$gdImage = $frame->toGDImage();
if(!$gdImage){ continue; }
imagepng($gdImage, $imgFile);
imagedestroy($gdImage);
echo '<img src="'.$imgFile.'" border="1" /><br />';
}
</pre><br />
參考文件:<br />
<a target="_blank" href="http://ffmpeg-php.sourceforge.net/doc/api/ffmpeg_movie.php">ffmpeg_movie object methods</a><br />
<a target="_blank" href="http://www.sitepoint.com/forums/printthread.php?t=292670">FFmpeg and PHP</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-44483820110398779072011-07-11T17:43:00.003+08:002014-10-08T13:43:31.830+08:00為 Blogger 的地點標記加上 Google Maps 呈現Blogger 增加了一個標記地點的功能,但只有標記也不知道能拿來做什麼,後來想想用JS寫了一個呈現的小程式,讓文章中設定的資訊可以直接呈現。<br />
<br />
以下程式不支援 IE,因為我不想在我的 Blog 上用 Framework,所以 IE 就沒辦法呈現,哈!只要將以下其中一個的程式碼加在 <strong style="color:red;"></body></strong> 之前就可以了。<br />
<br />
<strong>在[文章]的最[前面]插入地圖</strong><br />
<pre class="js" name="code"><script type="text/javascript">
function showGoogleMap(pos){
var w=300,h=300,z=14;
try {
var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
for(var i=0; i&lt;postOuter.length; i++){
var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
if(!point){continue;}
var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];
switch(pos){
case &#039;loc-a&#039;:
postLocation.innerHTML+=mapIframe;
break;
case &#039;loc-b&#039;:
postLocation.innerHTML=mapIframe+postLocation.innerHTML;
break;
case &#039;post-a&#039;:
postBody.innerHTML+=mapIframe;
break;
case &#039;post-b&#039;:
default:
postBody.innerHTML=mapIframe+postBody.innerHTML;
break;
}
}
}catch(e){}
}
showGoogleMap(&#039;post-b&#039;);
</script>
</pre><br />
<strong>在[文章]的最[後面]插入地圖</strong><br />
<pre class="js" name="code"><script type="text/javascript">
function showGoogleMap(pos){
var w=300,h=300,z=14;
try {
var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
for(var i=0; i&lt;postOuter.length; i++){
var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
if(!point){continue;}
var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];
switch(pos){
case &#039;loc-a&#039;:
postLocation.innerHTML+=mapIframe;
break;
case &#039;loc-b&#039;:
postLocation.innerHTML=mapIframe+postLocation.innerHTML;
break;
case &#039;post-a&#039;:
postBody.innerHTML+=mapIframe;
break;
case &#039;post-b&#039;:
default:
postBody.innerHTML=mapIframe+postBody.innerHTML;
break;
}
}
}catch(e){}
}
showGoogleMap(&#039;post-a&#039;);
</script>
</pre><br />
<strong>在[地點]的[前面]插入地圖</strong><br />
<pre class="js" name="code"><script type="text/javascript">
function showGoogleMap(pos){
var w=300,h=300,z=14;
try {
var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
for(var i=0; i&lt;postOuter.length; i++){
var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
if(!point){continue;}
var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];
switch(pos){
case &#039;loc-a&#039;:
postLocation.innerHTML+=mapIframe;
break;
case &#039;loc-b&#039;:
postLocation.innerHTML=mapIframe+postLocation.innerHTML;
break;
case &#039;post-a&#039;:
postBody.innerHTML+=mapIframe;
break;
case &#039;post-b&#039;:
default:
postBody.innerHTML=mapIframe+postBody.innerHTML;
break;
}
}
}catch(e){}
}
showGoogleMap(&#039;loc-b&#039;);
</script>
</pre><br />
<br />
實際呈現樣式:<br />
<a href="http://4.bp.blogspot.com/-0BM7ftCBY98/ThrHVi3pAnI/AAAAAAAANHg/YnGEHPuZ-Fw/s1600/add%2Bgooglemaps%2Bin%2Bblogger%2B1.jpg"><img src="http://4.bp.blogspot.com/-0BM7ftCBY98/ThrHVi3pAnI/AAAAAAAANHg/YnGEHPuZ-Fw/s512/add%2Bgooglemaps%2Bin%2Bblogger%2B1.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBtEgvWg_I32E8936fT7EWBEBXK25soXxnxr_-I1tV31b3PDFM3Jxe917LwY8VRL-4oPDytZgyF_VM4h8OMyae1zD3TyAwt5cUfoL5tsOoqwk6CVGiZ0TESJtm_qb4IQBeczvtnjCyyzlC/s1600/add+googlemaps+in+blogger+2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBtEgvWg_I32E8936fT7EWBEBXK25soXxnxr_-I1tV31b3PDFM3Jxe917LwY8VRL-4oPDytZgyF_VM4h8OMyae1zD3TyAwt5cUfoL5tsOoqwk6CVGiZ0TESJtm_qb4IQBeczvtnjCyyzlC/s512/add+googlemaps+in+blogger+2.jpg" /></a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-43121937510927594232011-07-11T14:49:00.001+08:002015-02-02T14:27:15.755+08:00[轉載] 屬性(Attribute)與特性(Property)之前看到<a target="_blank" href="http://blog.darkthread.net/post-2011-05-13-jquery-1-6-1.aspx">jQuery 1.6.1上場救援,不用改寫attr()囉</a>這篇文章時,讓我很疑惑 Attribute 與 Property 到底是有什麼不同,在字典上查出來的結果都是<strong>屬性</strong>,爬了一些文章後找到一篇不錯的解釋文。<br />
<br />
<hr />轉載自:<a target="_blank" href="http://caterpillar.onlyfun.net/Gossip/JavaScript/AttributeProperty.html">屬性與特性</a><br />
<br />
在進入瀏覽器作為客戶端之後,屬性(Attribute)與特性(Property)這兩個名詞就不斷交相出現,到目前還沒正式解釋它們的意義。<br />
<br />
其實在正式進入瀏覽器作為客戶端前,對於JavaScript物件本身帶有的名稱,這邊的文件都用<strong>特性</strong>這個名詞,代表以某個JavaScript物件作為名稱空間的名稱。例如:<br />
<pre class="js:nogutter:nocontrols" name="code">var obj = {
x : 10,
y : 20
};
</pre><br />
以上文件都稱,物件obj擁有特性x與y,特性x的值為10,特性y的值為20。<br />
<br />
HTML本身可以擁有屬性。例如:<br />
<pre class="xml:nogutter:nocontrols" name="code"><input name="user" value="guest">
</pre><br />
文件中會稱,<input>標籤擁有<strong>屬性</strong>name與value,屬性值各為user與guest。<br />
<br />
<strong>瀏覽器會剖析HTML,為每個標籤建立對應的DOM物件,完成剖析後,對於HTML的<span style="color:red;">所有屬性</span>(無論標籤上是否有撰寫),<span style="color: red;">DOM物件上會建立對應的特性</span>,通常屬性名稱是什麼,特性名稱也會是什麼,如果標籤上有設定某個屬性,則屬性值為何,特性值也就為何,<span style="color: red;">如果標籤上沒有設置屬性,則DOM物件上的特性會有預設值</span>。</strong><br />
<br />
例如上例中,<input>對應的DOM元素上,name特性與value特性值分別是user與guest。你可以如下分別取得(假設是頁面中第一個<input>標籤):<br />
<pre class="js:nogutter:nocontrols" name="code">var input = document.getElementsByName('user')[0];
var name = input.name;
var value = input.value;
</pre><br />
像這時,DOM元素上的name、value特性,也可以稱之為name與value屬性。也就是說,屬性這個詞,可用來表示HTML中的屬性,也可用來表示DOM中相對應的特性。對於HTML中沒有設定的標籤屬性,DOM上也會有對應的特性(屬性),不過都是預設值,例如,上面的<input>標籤並沒有設置type屬性,但DOM物件上對應的特性(屬性),其值為"text"。<br />
<br />
不過,<strong>HTML的屬性名稱未必與DOM物件的特性(屬性)名稱相對應</strong>。例如class就是一個例子,因為class在JavaScript中是關鍵字,在DOM上要取得HTML的class屬性對應名稱必須使用<strong>className</strong>,<label>的for屬性,因為for是關鍵字,而必須使用<strong>htmlFor</strong>特性來取得。例如:<br />
<pre class="xml:nogutter:nocontrols" name="code"><img id="logo" src="images/caterpillar.jpg" class="logo" title="Caterpillar's Logo"/>
</pre><br />
<br />
若要以JavaScript取得HTML的class屬性值,則必須:<br />
<pre class="js:nogutter:nocontrols" name="code">var className = document.getElementById('logo').className;
</pre><br />
<strong>透過JavaScript特性存取方式取得HTML屬性的對應值,也未必是HTML屬性中真正設定的值。例如,透過JavaScript取得<img>的src,結果是絕對URL,即使屬性中設定的是相對URL。</strong><br />
<br />
<strong>瀏覽器在剖析完HTML後,對於HTML中有設置的屬性,其實會在DOM物件上建立attributes特性。</strong>你可以如下顯示attributes的元素值,每個元素的型態是<strong>Attr</strong>:<br />
<pre class="js:nogutter:nocontrols" name="code">var attributes = document.getElementById('logo').attributes;
for(var i = 0; i < attributes.length; i++) {
var attrName = attributes[i].nodeName;
var attrValue = attributes[i].nodeValue;
...
}
</pre><br />
以物件結構來表示的話:<br />
<pre class="js:nogutter:nocontrols" name="code">{
attributes : {
'0' : {nodeName : 'id', nodeValue : 'logo', ...},
'1' : {nodeName : 'src', nodeValue : 'images/src', ...},
'2' : {nodeName : 'class', nodeValue : 'logo', ...},
'3' : {nodeName : 'title', nodeValue : 'Caterpillar\’s logo', ...},
length : 4
...
},
id : 'logo',
src : 'http://caterpillar.onlyfun.net/images/caterpillar.jpg',
className : 'logo',
title : 'Caterpillar\'s logo',
…
}
</pre><br />
attributes上的特性值,是HTML上真正設定的屬性與值。<strong>在文件剖析完畢後,DOM物件上的屬性(特性)與attributes上的特性是對應的。</strong><br />
<br />
注意,上面是以物件結構來示意,並不是指真正的型態就是上面所表示的。attributes的型態會是 <a target="_blank" href="http://www.w3schools.com/dom/dom_namednodemap.asp">NamedNodeMap</a> ,而每個索引元素的型態會是 <a target="_blank" href="http://www.w3schools.com/dom/dom_attribute.asp">Attr</a>(如果你手邊有個JavaScript Debugger的話,可以很方便地觀察這些東西)。<br />
<br />
你可以使用DOM物件的getAttribute()來取得<strong>attributes中的屬性</strong>,使用setAttribute()設定<strong>attributes</strong>中的屬性(同時亦會改變DOM對應的特性),使用removeAttribute()來移除<strong>attributes</strong>屬性。<br />
<br />
<strong>移除屬性是指移除attributes上對應的特性值,而非移除DOM物件上對應的特性(屬性)值,DOM物件上對應的特性(屬性)值在使用removeAttribute()後,只是回到預設值,而不是直接將特性移除,<span style="color: red;">沒有任何操作可以將DOM上對應屬性的特性移除。</span>如果HTML上沒有設置該屬性,則使用getAttribute()指定該屬性會取得null,但並不表示DOM上沒有對應屬性的特性,而是該特性值會是預設值。使用setAttribute()可以在attributes中設定屬性,相對應的DOM特性值也會改變。</strong><br />
<br />
例如,以下的程式,只會將attributes的中src對應的特性移除,不會移除DOM上src特性(屬性),DOM上src只是回到''的預設值。<br />
<pre class="js:nogutter:nocontrols" name="code">var img = document.getElementById('logo');
img.removeAttribute('src');
// img.src 的值是 '',不是undefined
// img.attributes['src'] 是 undefined
</pre><br />
如果你直接改變DOM上的特性(屬性),attributes中對應的屬性並不會有變化。例如:<br />
<pre class="xml:nogutter:nocontrols" name="code"><input id="user" value="guest">
</pre><br />
使用以上的程式:<br />
<pre class="js:nogutter:nocontrols" name="code">document.getElementById('user').value = 'Justin';
var user1 = document.getElementById('user').value; // 值是'Justin'
var user2 = document.getElementById('user').getAttribute('value'); // 值是'guest'
</pre><br />
如果你要同時改變attribues上的屬性與DOM上的特性(屬性),則要使用setAttribute()。例如:<br />
<pre class="js:nogutter:nocontrols" name="code">document.getElementById('user').setAttribute('value', 'Justin');
var user1 = document.getElementById('user').value; // 值'Justin'
var user2 = document.getElementById('user').getAttribute('value'); // 值'Justin'
</pre><br />
<br />
其他參考資訊:<br />
<a target="_blank" href="http://www.cnblogs.com/winner/archive/2008/12/11/1353314.html">property和attribute的区别</a><br />
<a target="_blank" href="http://blog.xuite.net/vexed/tech/45260002">JavaScript property 、 DOM property 、 HTML attribute</a><br />
<a target="_blank" href="http://meebox.blogspot.com/2007/01/attributeproperty.html">翻譯名詞:attribute、property</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-1050612642494826882011-04-10T23:46:00.000+08:002013-06-10T22:59:46.173+08:00Facebook 推文按鈕 失效了之前寫過<a href="/2010/05/blogger-facebook.html">Blogger 的標題加上 Facebook 官方的推文按鈕</a>這篇文章<br />
最近 blogger 加了新功能用 ajax 換頁<br />
結果 Facebook 推文按鈕在第二頁就完全不會動了<br />
<br />
Google 一下找到 <a target="_blank" href="http://ticore.blogspot.com/2007/06/blogger-ajax-js.html">保留 Blogger Ajax 換頁功能,觸發自訂 JS 功能做法</a>這篇文章<br />
<br />
在範本中加入以下程式碼就好了:<br />
<pre class="xml" name="code"><img onload='if(FB){FB.Share.stopScan();}' src='http://www.blogblog.com/1kt/transparent/white80.png' width='0' />
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-78143669418442000412011-03-28T02:06:00.002+08:002014-11-30T17:40:49.879+08:00在 Blogger 加上各種推文按鈕(修正Plurk 的Bug)網友提出了 Plurk 的 bug<br />
說實在的找了半天的文件<br />
Blogger 並沒有可以直接使用的參數<br />
看來又只能依靠 JavaScript 來處理這種鳥問題了<br />
<br />
<a href="/2010/05/blogger_19.html">最終版程式碼</a><br />
<a href="/2010/05/blogger.html">在 Blogger 加上各種推文按鈕</a><br />
<br />
<a href="http://4.bp.blogspot.com/-xys0DaYHLn0/S_Qg___be2I/AAAAAAAANHg/xGlHKi5damk/social_icons.png"><img src="http://4.bp.blogspot.com/-xys0DaYHLn0/S_Qg___be2I/AAAAAAAANHg/xGlHKi5damk/social_icons.png" /></a><br />
<br />
<h4>CSS 程式碼</h4><pre class="css" name="code">/*Social Icon*/
.social{
background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat;
/*16*16按鈕的圖片網址*/
display: -moz-inline-box;
display: inline-block;
height:16px;
margin:0 4px;
text-indent:-999999px;
vertical-align:middle;
width:16px;
opacity:0.75;
overflow:hidden;
}
.social:hover{
opacity:1;
}
a.toFacebook{ background-position: 0 0; }
a.toPlurk{ background-position: 0 -16px; }
a.toTwitter{ background-position: 0 -32px; }
a.toTechnorati{ background-position: 0 -48px; }
a.toDelicious{ background-position: 0 -64px; }
a.toBuzz{ background-position: 0 -80px; }
a.toDigg{ background-position: 0 -96px; }
a.toStumbleUpon{ background-position: 0 -112px; }
a.toDesignFloat{ background-position: 0 -128px; }
a.getAtomRSS{ background-position: 0 -144px; }
a.toReader{ background-position: 0 -160px; }
</pre><br />
首先打開『版面配置』→『修改HTML』<br />
將『展開小裝置範本』打勾<br />
找到 <span style="color: rgb(255, 0, 0);">]]></b:skin></span> 將 CSS 的程式貼在上一行<br />
<span style="color: rgb(255, 0, 0);font-size:85%;" >小技巧:所有的瀏覽器都有搜尋功能 (Ctrl + F),只要搜尋 "skin" 就可以找到這行了</span><br />
<a href="http://1.bp.blogspot.com/_b8lN_UbLoEc/S-6ufim6_yI/AAAAAAAAHZg/nJbSSubYftI/s1600/blogger_social_buttons_code.png"><img src="http://1.bp.blogspot.com/_b8lN_UbLoEc/S-6ufim6_yI/AAAAAAAAHZg/nJbSSubYftI/s512/blogger_social_buttons_code.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5471502454190964514" /></a><br />
<br />
<br />
<h4>HTML 程式碼</h4>找尋 <span style="color: rgb(255, 0, 0);"><div class='post-footer'></span> 這一行<br />
然後向下找尋相對應的 </div><br />
這裡沒有比較清楚的標示<br />
找起來會比較困難一點<br />
將下面的程式貼在 <span style="color: rgb(255, 0, 0);"></div></span> 之前<br />
<pre class="xml" name="code"><div class='post-footer-line post-footer-line-99'>
<span class='post-social-icons' name='post-social-icons' expr:t='data:post.title' expr:u='data:post.url' expr:h='data:blog.homepageUrl'></span>
</div>
</pre><br />
<br />
<h4>JavaScript 程式碼</h4>找尋 <span style="color: rgb(255, 0, 0);"></body></span> 這一行,將 JavaScript 的程式貼在上一行<br />
<pre class="xml" name="code"><script type="text/javascript">
var data = [
{&quot;c&quot;:&quot;toFacebook&quot;, &quot;u&quot;:&quot;http://www.facebook.com/sharer.php?u=$url$&amp;t=$title$&quot;,&quot;t&quot;:&quot;Facebook&quot;},
{&quot;c&quot;:&quot;toPlurk&quot;, &quot;u&quot;:&quot;http://www.plurk.com/?qualifier=shares&amp;status=$url$ ($title$)&quot;,&quot;t&quot;:&quot;Plurk&quot;},
{&quot;c&quot;:&quot;toTwitter&quot;, &quot;u&quot;:&quot;http://twitter.com/home?status=$title$ $url$&quot;,&quot;t&quot;:&quot;Twitter&quot;},
{&quot;c&quot;:&quot;toTechnorati&quot;, &quot;u&quot;:&quot;http://technorati.com/faves?add=$url$ $title$&quot;,&quot;t&quot;:&quot;Technorati&quot;},
{&quot;c&quot;:&quot;toDelicious&quot;, &quot;u&quot;:&quot;http://del.icio.us/post?url=$url$ $title$&quot;,&quot;t&quot;:&quot;Delicious&quot;},
{&quot;c&quot;:&quot;toDigg&quot;, &quot;u&quot;:&quot;http://digg.com/submit?phase=2&amp;url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Digg&quot;},
{&quot;c&quot;:&quot;toStumbleUpon&quot;, &quot;u&quot;:&quot;http://www.stumbleupon.com/submit?url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Stumble Upon&quot;},
{&quot;c&quot;:&quot;toDesignFloat&quot;, &quot;u&quot;:&quot;http://www.designfloat.com/submit.php?url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Design Float&quot;},
{&quot;c&quot;:&quot;toReader&quot;, &quot;u&quot;:&quot;http://www.google.com/reader/link?url=$url$&amp;title=$title$&amp;srcURL=$home$&quot;,&quot;t&quot;:&quot;Google Reader&quot;},
{&quot;c&quot;:&quot;toBuzz&quot;, &quot;u&quot;:&quot;http://www.google.com/buzz/post?url=$url$&quot;,&quot;t&quot;:&quot;Buzz&quot;},
{&quot;c&quot;:&quot;getAtomRSS&quot;, &quot;u&quot;:&quot;/feeds/posts/default&quot;, &quot;t&quot;:&quot;Atom / RSS&quot;}
];
var list=document.getElementsByName(&#039;post-social-icons&#039;);
for (var li=0,ll=list.length; li&lt;ll; li++){
var title=encodeURIComponent(list[li].getAttribute(&#039;t&#039;));
var url=encodeURIComponent(list[li].getAttribute(&#039;u&#039;));
var home=encodeURIComponent(list[li].getAttribute(&#039;h&#039;));
var temp=&quot;分享至 &amp;#65306;&quot;;
for (var di=0,dl=data.length; di&lt;dl; di++){
var href=data[di].u.replace(&quot;$title$&quot;,title).replace(&quot;$url$&quot;,url).replace(&quot;$home$&quot;,home);
temp+=&quot;&lt;a class=&#039;social &quot;+data[di].c+&quot;&#039; href=&#039;&quot;+href+&quot;&#039; title=&#039;分享至 &quot;+data[di].t+&quot;&#039;&gt;&quot;+data[di].t+&quot;&lt;/a&gt;&quot;
};
list[li].innerHTML=temp;
};
</script>
</pre><br />
<br />
<h4>JavaScript 原始碼</h4><pre class="js" name="code">var data = [
{"c":"toFacebook", "u":"http://www.facebook.com/sharer.php?u=$url$&t=$title$","t":"Facebook"},
{"c":"toPlurk", "u":"http://www.plurk.com/?qualifier=shares&status=$url$ ($title$)","t":"Plurk"},
{"c":"toTwitter", "u":"http://twitter.com/home?status=$title$ $url$","t":"Twitter"},
{"c":"toTechnorati", "u":"http://technorati.com/faves?add=$url$ $title$","t":"Technorati"},
{"c":"toDelicious", "u":"http://del.icio.us/post?url=$url$ $title$","t":"Delicious"},
{"c":"toDigg", "u":"http://digg.com/submit?phase=2&url=$url$&title=$title$","t":"Digg"},
{"c":"toStumbleUpon", "u":"http://www.stumbleupon.com/submit?url=$url$&title=$title$","t":"Stumble Upon"},
{"c":"toDesignFloat", "u":"http://www.designfloat.com/submit.php?url=$url$&title=$title$","t":"Design Float"},
{"c":"toReader", "u":"http://www.google.com/reader/link?url=$url$&title=$title$&srcURL=$home$","t":"Google Reader"},
{"c":"toBuzz", "u":"http://www.google.com/buzz/post?url=$url$","t":"Buzz"},
{"c":"getAtomRSS", "u":"/feeds/posts/default", "t":"Atom / RSS"}
];
var list=document.getElementsByName('post-social-icons');
for (var li=0,ll=list.length; li<ll; li++){
var title=encodeURIComponent(list[li].getAttribute('t'));
var url=encodeURIComponent(list[li].getAttribute('u'));
var home=encodeURIComponent(list[li].getAttribute('h'));
var temp="分享至 :";
for (var di=0,dl=data.length; di<dl; di++){
var href=data[di].u.replace("$title$",title).replace("$url$",url).replace("$home$",home);
temp+="<a class='social "+data[di].c+"' href='"+href+"' title='分享至 "+data[di].t+"'>"+data[di].t+"</a>"
};
list[li].innerHTML=temp;
};
</pre><br />
<br />
<h4>圖片來源:</h4><a target="_blank" href="http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/">Social Media Network Icons | Komodo Media</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-55715341433220771532011-01-18T16:15:00.001+08:002013-08-20T20:27:44.234+08:00CSS 常用命名表<h3>版面類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>欄目</td><td>column</td></tr>
<tr><td>容器</td><td>container</td></tr>
<tr><td>內容</td><td>content</td></tr>
<tr><td>頁尾</td><td>footer</td></tr>
<tr><td>頁首</td><td>header</td></tr>
<tr><td>版型佈局</td><td>layout</td></tr>
<tr><td>首頁</td><td>index</td></tr>
<tr><td>頁面主體</td><td>main</td></tr>
<tr><td>側欄</td><td>sidebar</td></tr>
</table><br />
<h3>導航類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>主導航</td><td>main_nav</td></tr>
<tr><td>全域導航</td><td>global_nav</td></tr>
<tr><td>導航</td><td>nav</td></tr>
<tr><td>領行列</td><td>navbar </td></tr>
<tr><td>左導航</td><td>left_sidebar</td></tr>
<tr><td>右導航</td><td>right_sidebar</td></tr>
<tr><td>子導航</td><td>subnav</td></tr>
<tr><td>頂導航</td><td>topnav</td></tr>
<tr><td>工具條</td><td>toolbar</td></tr>
</table><br />
<h3>菜單類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>菜單</td><td>menu</td></tr>
<tr><td>子菜單</td><td>submenu</td></tr>
<tr><td>菜單內容</td><td>menu_content</td></tr>
<tr><td>菜單容器</td><td>menu_container</td></tr>
</table><br />
<h3>樣式類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>箭頭</td><td>arrow</td></tr>
<tr><td>橫幅廣告</td><td>banner</td></tr>
<tr><td>分界線</td><td>boundary</td></tr>
<tr><td>按鈕</td><td>btn</td></tr>
<tr><td>按鈕</td><td>button</td></tr>
<tr><td>轉角/圓角</td><td>corner</td></tr>
<tr><td>文字</td><td>font</td></tr>
<tr><td>標題</td><td>title</td></tr>
<tr><td>圖示</td><td>icon</td></tr>
<tr><td>項目</td><td>item</td></tr>
<tr><td>列表</td><td>list</td></tr>
<tr><td>主要的</td><td>master</td></tr>
<tr><td>頁面</td><td>page</td></tr>
<tr><td>標示</td><td>mark</td></tr>
<tr><td>分段</td><td>section</td></tr>
<tr><td>邊導航圖標</td><td>sidebar_icon</td></tr>
<tr><td>標籤頁</td><td>tab</td></tr>
<tr><td>樣式/主題</td><td>theme</td></tr>
<tr><td>閃爍</td><td>twinkle</td></tr>
<tr><td>小部件</td><td>widget</td></tr>
<tr><td>包裝器 </td><td>wrapper<br />
<em>頁面外圍控制整體佈局寬度</em></td></tr>
<tr><td>區域</td><td>zone</td></tr>
</table><br />
<h3>功能類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>檢舉</td><td>abuse</td></tr>
<tr><td>點擊這裡</td><td>click_here</td></tr>
<tr><td>收藏</td><td>coffin</td></tr>
<tr><td>塌陷</td><td>collapse</td></tr>
<tr><td>完成的,結束的</td><td>complete</td></tr>
<tr><td>改變,轉變</td><td>conversion</td></tr>
<tr><td>當前的</td><td>current</td></tr>
<tr><td>預設</td><td>default</td></tr>
<tr><td>下載</td><td>download</td></tr>
<tr><td>下拉</td><td>drop</td></tr>
<tr><td>編輯</td><td>edit</td></tr>
<tr><td>相等</td><td>equals</td></tr>
<tr><td>例外</td><td>exception</td></tr>
<tr><td>完成,結束</td><td>finalize</td></tr>
<tr><td>折疊</td><td>fold</td></tr>
<tr><td>雜湊</td><td>hash</td></tr>
<tr><td>局部的</td><td>localized</td></tr>
<tr><td>管理</td><td>manager</td></tr>
<tr><td>方法</td><td>method</td></tr>
<tr><td>即時通訊</td><td>messenger</td></tr>
<tr><td>提示信息</td><td>msg</td></tr>
<tr><td>註釋</td><td>note</td></tr>
<tr><td>通知,告知;報告</td><td>notify</td></tr>
<tr><td>語法分析</td><td>parse</td></tr>
<tr><td>語法分析器</td><td>parser</td></tr>
<tr><td>傳送</td><td>pass</td></tr>
<tr><td>位置</td><td>place</td></tr>
<tr><td>投票</td><td>poll</td></tr>
<tr><td>發表文章</td><td>post</td></tr>
<tr><td>預覽</td><td>preview</td></tr>
<tr><td>列印</td><td>print</td></tr>
<tr><td>發布</td><td>publish</td></tr>
<tr><td>查詢</td><td>query</td></tr>
<tr><td>收到,接到</td><td>receive</td></tr>
<tr><td>重填</td><td>reset</td></tr>
<tr><td>滾動</td><td>scroll</td></tr>
<tr><td>搜索</td><td>search</td></tr>
<tr><td>搜索框</td><td>search_box</td></tr>
<tr><td>進階搜尋</td><td>search_further</td></tr>
<tr><td>搜尋結果</td><td>search_results</td></tr>
<tr><td>統計</td><td>statistics</td></tr>
<tr><td>狀態</td><td>status</td></tr>
<tr><td>串流</td><td>stream</td></tr>
<tr><td>訂閱</td><td>subscribe</td></tr>
<tr><td>送出</td><td>submit</td></tr>
<tr><td>查詢訂閱</td><td>subscriptions</td></tr>
<tr><td>小技巧</td><td>tips</td></tr>
<tr><td>追蹤清單</td><td>track</td></tr>
<tr><td>指導</td><td>tutorial</td></tr>
<tr><td>上傳</td><td>upload</td></tr>
<tr><td>驗證碼</td><td>verification_code</td></tr>
<tr><td>觀看</td><td>view</td></tr>
<tr><td>投票</td><td>vote</td></tr>
</table><br />
<h3>內容類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>檔案/文件</td><td>archive</td></tr>
<tr><td>文章</td><td>article</td></tr>
<tr><td>所有文章</td><td>article_all</td></tr>
<tr><td>文章分類</td><td>article_folder</td></tr>
<tr><td>招呼語</td><td>blast</td></tr>
<tr><td>部落格</td><td>blog</td></tr>
<tr><td>部落格資料</td><td>blog_info</td></tr>
<tr><td>麵包屑</td><td>bread_crumb<br />
<em>頁面所處位置導航提示</em></td></tr>
<tr><td>行事曆</td><td>calendar</td></tr>
<tr><td>徵才</td><td>careers</td></tr>
<tr><td>社群家族</td><td>club</td></tr>
<tr><td>評論、評鑑</td><td>comment</td></tr>
<tr><td>社群家族</td><td>community</td></tr>
<tr><td>位置導航</td><td>crumb</td></tr>
<tr><td>娛樂</td><td>entertainment</td></tr>
<tr><td>電子報</td><td>epaper</td></tr>
<tr><td>活動</td><td>event</td></tr>
<tr><td>常見問題</td><td>faq</td></tr>
<tr><td>回覆意見</td><td>feedback</td></tr>
<tr><td>論壇</td><td>forum</td></tr>
<tr><td>友情鏈接</td><td>friend_link</td></tr>
<tr><td>強力搜尋</td><td>gd_search_tech</td></tr>
<tr><td>留言板</td><td>guestbook</td></tr>
<tr><td>指南</td><td>guide</td></tr>
<tr><td>公會</td><td>guild</td></tr>
<tr><td>熱門</td><td>hot</td></tr>
<tr><td>熱門連結</td><td>hot_link</td></tr>
<tr><td>學習</td><td>learning</td></tr>
<tr><td>介紹</td><td>introduce</td></tr>
<tr><td>徵才</td><td>job</td></tr>
<tr><td>知識</td><td>knowledge</td></tr>
<tr><td>新聞</td><td>news</td></tr>
<tr><td>記事本</td><td>notepad</td></tr>
<tr><td>即時訊息</td><td>online_news</td></tr>
<tr><td>作品</td><td>portfolio</td></tr>
<tr><td>活動比賽</td><td>promo</td></tr>
<tr><td>排行</td><td>rank</td></tr>
<tr><td>景點</td><td>scenic</td></tr>
<tr><td>服務</td><td>service</td></tr>
<tr><td>招呼語</td><td>set_blast</td></tr>
<tr><td>即時留言板</td><td>shoutbox</td></tr>
<tr><td>網頁導覽</td><td>sitemap</td></tr>
<tr><td>技術支援</td><td>support</td></tr>
<tr><td>旅遊</td><td>travels</td></tr>
<tr><td>視訊</td><td>video</td></tr>
</table><br />
<h3>網站類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>關於</td><td>about</td></tr>
<tr><td>關於我們</td><td>about_us</td></tr>
<tr><td>公司</td><td>company</td></tr>
<tr><td>公司簡介</td><td>company_profile</td></tr>
<tr><td>聯絡</td><td>contact</td></tr>
<tr><td>聯絡我們</td><td>contact_us</td></tr>
<tr><td>版權資訊</td><td>copyright</td></tr>
<tr><td>資訊</td><td>info</td></tr>
<tr><td>網站標誌</td><td>logo</td></tr>
<tr><td>商標</td><td>label</td></tr>
<tr><td>組織</td><td>organization</td></tr>
<tr><td>合作夥伴</td><td>partner</td></tr>
<tr><td>薪資福利</td><td>remuneration</td></tr>
<tr><td>摘要</td><td>summary</td></tr>
<tr><td>系統</td><td>system</td></tr>
<tr><td>網頁快訊</td><td>web_slices</td></tr>
</table><br />
<h3>購物類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>atm</td><td>atm</td></tr>
<tr><td>現折活動</td><td>allowance</td></tr>
<tr><td>配件</td><td>appendix</td></tr>
<tr><td>紅利折抵</td><td>bank_bonus</td></tr>
<tr><td>競標</td><td>bid</td></tr>
<tr><td>取消訂單</td><td>cancel</td></tr>
<tr><td>刷卡</td><td>card</td></tr>
<tr><td>換貨</td><td>change</td></tr>
<tr><td>推薦</td><td>commend</td></tr>
<tr><td>優惠卷</td><td>coupon</td></tr>
<tr><td>顧客</td><td>customer</td></tr>
<tr><td>顧客服務</td><td>customer_service</td></tr>
<tr><td>運送</td><td>deliver</td></tr>
<tr><td>折扣</td><td>discount</td></tr>
<tr><td>快速到貨</td><td>express</td></tr>
<tr><td>購物流程</td><td>flow</td></tr>
<tr><td>贈品</td><td>gift</td></tr>
<tr><td>集殺</td><td>group</td></tr>
<tr><td>詢價</td><td>inquire</td></tr>
<tr><td>服務中心</td><td>help</td></tr>
<tr><td>訂購單</td><td>order</td></tr>
<tr><td>訂單查詢</td><td>order_check</td></tr>
<tr><td>包裝</td><td>packing</td></tr>
<tr><td>付費</td><td>payment</td></tr>
<tr><td>集購</td><td>payshop_flow</td></tr>
<tr><td>價格</td><td>price</td></tr>
<tr><td>產品名稱</td><td>product_name</td></tr>
<tr><td>產品</td><td>products</td></tr>
<tr><td>嚴選保證</td><td>promise</td></tr>
<tr><td>估價</td><td>quotes</td></tr>
<tr><td>維修</td><td>repair</td></tr>
<tr><td>退貨</td><td>return</td></tr>
<tr><td>交易安全</td><td>safety</td></tr>
<tr><td>購物</td><td>shop</td></tr>
<tr><td>商店</td><td>store</td></tr>
<tr><td>超商取貨付款</td><td>store</td></tr>
<tr><td>補貨通知</td><td>supply_info</td></tr>
<tr><td>信用卡線上分期</td><td>time</td></tr>
<tr><td>統一編號</td><td>unified business no.</td></tr>
</table><br />
<h3>會員類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>通訊錄</td><td>abook</td></tr>
<tr><td>帳務</td><td>account</td></tr>
<tr><td>地址</td><td>address</td></tr>
<tr><td>相簿</td><td>album</td></tr>
<tr><td>申請</td><td>apply</td></tr>
<tr><td>審核</td><td>approval</td></tr>
<tr><td>黑名單</td><td>black_list</td></tr>
<tr><td>信箱</td><td>email</td></tr>
<tr><td>忘記密碼</td><td>forgot_password</td></tr>
<tr><td>忘記帳號</td><td>forgot_username</td></tr>
<tr><td>服務條款</td><td>legal</td></tr>
<tr><td>登入</td><td>login</td></tr>
<tr><td>登出</td><td>logout</td></tr>
<tr><td>登入條</td><td>login_bar</td></tr>
<tr><td>邀請朋友</td><td>invite</td></tr>
<tr><td>加入</td><td>join_us</td></tr>
<tr><td>會員</td><td>member</td></tr>
<tr><td>會員登入</td><td>member_login</td></tr>
<tr><td>個人</td><td>personal</td></tr>
<tr><td>個人資訊</td><td>personal_information</td></tr>
<tr><td>照片</td><td>photo</td></tr>
<tr><td>隱私權政策</td><td>privacy</td></tr>
<tr><td>個人簡介</td><td>profile</td></tr>
<tr><td>個人相片</td><td>profile_photo</td></tr>
<tr><td>註冊</td><td>register</td></tr>
<tr><td>轉寄好友</td><td>send_friend</td></tr>
<tr><td>註冊</td><td>sign_up</td></tr>
<tr><td>登入</td><td>sign_in</td></tr>
<tr><td>登出</td><td>sign_out</td></tr>
</table><br />
<br />
參考來源:<br />
<a target="_blank" href="http://www.pccode.net/info/2010/11/08/20101108-5962.html">CSS 常用命名参考 - PHP新手博客(phpabc‘s blog)</a><br />
<a target="_blank" href="http://www.blog.e-creative.tw/archives/3">css常用命名</a><br />
<a target="_blank" href="http://www.yangqixin.com/article.asp?id=1422">div+css命名规则 (注重SEO的朋友注意了)</a><br />
<a target="_blank" href="http://jane-wu.blogspot.com/2007/05/css.html">Jane’s Blog: CSS 命名規則</a><br />
<!--
css-nomenclature.textile
CSS 命名表(nomenclature)
h3. 版面類
| 欄目| column|
| 容器| container|
| 內容| content|
| 頁尾| footer
| 頁首| header|
| 版型佈局| layout|
| 首頁| index|
| 頁面主體| main
| 側欄| sidebar|
h3. 導航類
| 主導航| main_nav|
| 全域導航| global_nav|
| 導航| nav|
| 領行列| navbar |
| 左導航| left_sidebar|
| 右導航| right_sidebar|
| 子導航| subnav|
| 頂導航| topnav|
| 工具條| toolbar|
h3. 菜單類
| 菜單| menu|
| 子菜單| submenu|
| 菜單內容| menu_content|
| 菜單容器| menu_container|
h3. 樣式類
| 箭頭| arrow|
| 橫幅廣告| banner
| 分界線| boundary|
| 按鈕| btn|
| 按鈕| button|
| 轉角/圓角| corner|
| 文字| font
| 標題| title|
| 圖示| icon|
| 項目| item|
| 列表| list|
| 主要的| master|
| 頁面| page|
| 標示| mark|
| 分段| section|
| 邊導航圖標| sidebar_icon|
| 標籤頁| tab|
| 樣式/主題| theme|
| 閃爍| twinkle|
| 小部件| widget|
| 包裝器 | wrapper
_頁面外圍控制整體佈局寬度_|
| 區域| zone|
h3. 功能類
| 檢舉| abuse|
| 點擊這裡| click_here|
| 收藏| coffin|
| 塌陷| collapse|
| 完成的,結束的| complete|
| 改變,轉變| conversion|
| 當前的| current|
| 預設| default|
| 下載| download|
| 下拉| drop|
| 編輯| edit|
| 相等| equals|
| 例外| exception|
| 完成,結束| finalize|
| 折疊| fold|
| 雜湊| hash|
| 局部的| localized|
| 管理| manager|
| 方法| method|
| 即時通訊| messenger|
| 提示信息| msg|
| 註釋| note|
| 通知,告知;報告| notify|
| 語法分析| parse|
| 語法分析器| parser|
| 傳送| pass|
| 位置| place|
| 投票| poll|
| 發表文章| post
| 預覽 preview|
| 列印| print|
| 發布| publish|
| 查詢| query|
| 收到,接到| receive|
| 重填| reset|
| 滾動| scroll|
| 搜索| search|
| 搜索框| search_box|
| 進階搜尋| search_further|
| 搜尋結果| search_results|
| 統計| statistics|
| 狀態| status|
| 串流| stream|
| 訂閱| subscribe
| 送出| submit|
| 查詢訂閱| subscriptions|
| 小技巧| tips|
| 追蹤清單| track|
| 指導| tutorial|
| 上傳| upload|
| 驗證碼| verification_code|
| 觀看| view|
| 投票| vote|
h3. 內容類
| 檔案/文件| archive|
| 文章| article|
| 所有文章| article_all|
| 文章分類| article_folder|
| 招呼語| blast|
| 部落格| blog|
| 部落格資料| blog_info|
| 麵包屑| bread_crumb
_頁面所處位置導航提示_|
| 行事曆| calendar|
| 徵才| careers|
| 社群家族| club|
| 評論、評鑑| comment|
| 社群家族| community|
| 位置導航| crumb|
| 娛樂| entertainment|
| 電子報| epaper|
| 活動| event|
| 常見問題| faq|
| 回覆意見| feedback|
| 論壇| forum|
| 友情鏈接| friend_link|
| 強力搜尋| gd_search_tech|
| 留言板| guestbook|
| 指南| guide|
| 公會| guild|
| 熱門| hot|
| 熱門連結| hot_link|
| 學習| learning|
| 介紹| introduce|
| 徵才| job|
| 知識| knowledge|
| 新聞| news|
| 記事本| notepad|
| 即時訊息| online_news|
| 作品| portfolio|
| 活動比賽| promo|
| 排行| rank|
| 景點| scenic|
| 服務| service|
| 招呼語| set_blast|
| 即時留言板| shoutbox|
| 網頁導覽| sitemap|
| 技術支援| support|
| 旅遊| travels|
| 視訊| video|
h3. 網站類
| 關於| about|
| 關於我們| about_us|
| 公司| company|
| 公司簡介| company_profile|
| 聯絡| contact|
| 聯絡我們| contact_us|
| 版權資訊| copyright|
| 資訊| info|
| 網站標誌| logo|
| 商標| label|
| 組織| organization|
| 合作夥伴| partner|
| 薪資福利| remuneration|
| 摘要| summary|
| 系統| system|
| 網頁快訊| web_slices|
h3. 購物類
| atm| atm|
| 現折活動| allowance|
| 配件| appendix|
| 紅利折抵| bank_bonus|
| 競標| bid|
| 取消訂單| cancel|
| 刷卡| card|
| 換貨| change|
| 推薦| commend|
| 優惠卷| coupon|
| 顧客| customer|
| 顧客服務| customer_service|
| 運送| deliver|
| 折扣| discount|
| 快速到貨| express|
| 購物流程| flow|
| 贈品| gift|
| 集殺| group|
| 詢價| inquire|
| 服務中心| help|
| 訂購單| order|
| 訂單查詢| order_check|
| 包裝| packing|
| 付費| payment|
| 集購| payshop_flow|
| 價格| price|
| 產品名稱| product_name|
| 產品| products|
| 嚴選保證| promise|
| 估價| quotes|
| 維修| repair|
| 退貨| return|
| 交易安全| safety|
| 購物| shop
| 商店| store|
| 超商取貨付款| store|
| 補貨通知| supply_info|
| 信用卡線上分期| time|
| 統一編號| unified business no.|
h3. 會員類
| 通訊錄| abook|
| 帳務| account|
| 地址| address|
| 相簿| album|
| 申請| apply|
| 審核| approval|
| 黑名單| black_list|
| 信箱| email
| 忘記密碼| forgot_password|
| 忘記帳號| forgot_username|
| 服務條款| legal|
| 登入| login|
| 登出| logout|
| 登入條| login_bar|
| 邀請朋友| invite|
| 加入| join_us|
| 會員| member|
| 會員登入| member_login|
| 個人| personal|
| 個人資訊| personal_information|
| 照片| photo|
| 隱私權政策| privacy|
| 個人簡介| profile|
| 個人相片| profile_photo|
| 註冊| register|
| 轉寄好友| send_friend|
| 註冊| sign_up|
| 登入| sign_in|
| 登出| sign_out|
-->Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-48511870655953473942010-12-30T06:22:00.002+08:002014-11-30T17:47:14.444+08:00美化 Apache autoindex因為原始的 auto Index 的頁面實在太醜了<br />
也許五年前看起來還很新潮,但現在已經過時了<br />
所以我自己做的一個 Apache 美化套件<br />
<br />
檔案下載:<a target="_blank" href="https://sites.google.com/site/weskerjax/code-demo/fancy.zip?attredirects=0">fancy.zip</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcR4SIFN7kLTQcBsuommBSoKN2iOHw-ZO2j8rAWSc1BlksukJFY15zq0EBRTSOpQkcJWCk-2g9qLIwWtlCn8FiF8Bn8zdnEW4PgdYFpbPGW1xxbNtTEHzPqtUXz7YIGHsJtsIUr7r4TSFQ/s1600/screenshot.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcR4SIFN7kLTQcBsuommBSoKN2iOHw-ZO2j8rAWSc1BlksukJFY15zq0EBRTSOpQkcJWCk-2g9qLIwWtlCn8FiF8Bn8zdnEW4PgdYFpbPGW1xxbNtTEHzPqtUXz7YIGHsJtsIUr7r4TSFQ/s400/screenshot.png" /></a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-11608797341483273992010-10-07T18:04:00.002+08:002012-03-16T22:58:01.090+08:00讓 Eclipse Task tag 能用在任何文件類型上之前為了找能夠在 SQL File 中使用 Task tag 套件花了不少時間,最後發現 Mylyn 的套件中有一個針對所有專案下 DTD 跟 XML 的 Task tag 功能,索性利用這個功能讓 SQL 也支援 Task tag。<br /><br />因為這個功能只支援 XML 格式的註解 <!-- 至 -->,所以只要巧妙的利用這個特性就可以達到我們要的功能。<br /><br /><br />首先在『<strong style="color: rgb(255, 0, 0);">內容類型 → DTD</strong>』中加入 *.sql 。<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHirNqJoJthvU20ENG1juz3AbcGjW9nnXHAmCjHo3f3d1Zuc97KU9PE0oNE7RGmHKKzDE1KD_3G6OCGx0hy62X3XeRBGEsIbU6_ySSHvVdUMi8NRpkVhbkvFgHq-ZiBzps7coq5OJny_RP/s1600-h/eclipse-task-tag-01.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHirNqJoJthvU20ENG1juz3AbcGjW9nnXHAmCjHo3f3d1Zuc97KU9PE0oNE7RGmHKKzDE1KD_3G6OCGx0hy62X3XeRBGEsIbU6_ySSHvVdUMi8NRpkVhbkvFgHq-ZiBzps7coq5OJny_RP/s256/eclipse-task-tag-01.jpg" alt="" id="BLOGGER_PHOTO_ID_5524119782964222338" border="0" /></a><br /><br /><br />再來在 SQL file 的起始處加入 <strong style="color: rgb(255, 0, 0);">-- <!--</strong> 。<br /><a href="http://lh3.ggpht.com/_b8lN_UbLoEc/TKmds4GqBsI/AAAAAAAAH1E/8tjULFEKFfg/s1600-h/eclipse-task-tag-02.jpg"><img src="http://lh3.ggpht.com/_b8lN_UbLoEc/TKmds4GqBsI/AAAAAAAAH1E/8tjULFEKFfg/s256/eclipse-task-tag-02.jpg" alt="" id="BLOGGER_PHOTO_ID_5524119812246734530" border="0" /></a><br /><br /><br />在結尾處加上 <strong style="color: rgb(255, 0, 0);">-- --> </strong>。<br /><a href="http://lh4.ggpht.com/_b8lN_UbLoEc/TKmdsDwmRxI/AAAAAAAAH1A/SsBMrPv8854/s1600-h/eclipse-task-tag-03.jpg"><img src="http://lh4.ggpht.com/_b8lN_UbLoEc/TKmdsDwmRxI/AAAAAAAAH1A/SsBMrPv8854/s256/eclipse-task-tag-03.jpg" alt="" id="BLOGGER_PHOTO_ID_5524119798195570450" border="0" /></a><br /><br /><br />開啟『<strong style="color: rgb(255, 0, 0);">專案 → 內容</strong>』啟用 Task Tags,並將 『Filters』中的 XML 取消。<br /><a href="http://lh5.ggpht.com/_b8lN_UbLoEc/TKmdqrdxThI/AAAAAAAAH04/o4WxfiG1wEQ/s1600-h/eclipse-task-tag-04.jpg"><img src="http://lh5.ggpht.com/_b8lN_UbLoEc/TKmdqrdxThI/AAAAAAAAH04/o4WxfiG1wEQ/s256/eclipse-task-tag-04.jpg" alt="" id="BLOGGER_PHOTO_ID_5524119774494281234" border="0" /></a><br /><br /><br />我希望可以標出所有資料表的定義,所以在這裡我加入 TABLE 這個關鍵字。<br /><a href="http://lh4.ggpht.com/_b8lN_UbLoEc/TKmdqHVq2jI/AAAAAAAAH00/5OtMf1PkXEQ/s1600-h/eclipse-task-tag-05.jpg"><img src="http://lh4.ggpht.com/_b8lN_UbLoEc/TKmdqHVq2jI/AAAAAAAAH00/5OtMf1PkXEQ/s256/eclipse-task-tag-05.jpg" alt="" id="BLOGGER_PHOTO_ID_5524119764796627506" border="0" /></a><br /><br /><br />接著就可以看到很快樂的結果了。<br /><a href="http://lh4.ggpht.com/_b8lN_UbLoEc/TKmdpmncv7I/AAAAAAAAH0w/ENWLud68QVw/s1600-h/eclipse-task-tag-06.jpg"><img src="http://lh4.ggpht.com/_b8lN_UbLoEc/TKmdpmncv7I/AAAAAAAAH0w/ENWLud68QVw/s256/eclipse-task-tag-06.jpg" alt="" id="BLOGGER_PHOTO_ID_5524119756012830642" border="0" /></a><br /><br /><br />當然在 Task View 中也會列出所有的標記。<br /><a href="http://lh3.ggpht.com/_b8lN_UbLoEc/TKmdpM_hS4I/AAAAAAAAH0s/iZHKPAh1x4Q/s1600-h/eclipse-task-tag-07.jpg"><img src="http://lh3.ggpht.com/_b8lN_UbLoEc/TKmdpM_hS4I/AAAAAAAAH0s/iZHKPAh1x4Q/s256/eclipse-task-tag-07.jpg" alt="" id="BLOGGER_PHOTO_ID_5524119749134470018" border="0" /></a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-57858866629683277482010-09-12T02:12:00.003+08:002011-04-06T10:03:52.910+08:00用 PhotoShop JSX 製作 CSS Sprite 的使用方法自從上一篇 <a href="http://jax-work-archive.blogspot.com/2010/09/photoshop-css-sprite.html">利用 PhotoShop 製作 CSS Sprite</a> 發佈後我又改了 JSX 好幾次,現在終於修到讓我自己滿意了,順便來寫一下使用方法。<br /><br />由於我的 PhotoShop 是 CS2 的,太舊的版本可能會沒有 Script 的功能,在這裡先聲明一下。<br /><br />檔案連結:<a href="https://sites.google.com/site/weskerjax/code-demo/css_sprite_ps-script.jsx?attredirects=0&d=1">css_sprite_ps-script.jsx</a><br /><br /><br /><ol><li>先將所有需要組合的圖檔開啟<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWdnNMQm5D_p-ZU-ufUhGhe5eVAbZoBjaYdDHtC8x7rFP2rD3gPSSJCG1TOU6lVT5IoHO7eDJuulrWDh5ba4SKbWdFGXJXRxYK7ms0UQr9YIznoLlnjo8U2iPPwXpt6uXHL3bQudUE8D6/s1600-h/css_sprite_ps-script-01.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWdnNMQm5D_p-ZU-ufUhGhe5eVAbZoBjaYdDHtC8x7rFP2rD3gPSSJCG1TOU6lVT5IoHO7eDJuulrWDh5ba4SKbWdFGXJXRxYK7ms0UQr9YIznoLlnjo8U2iPPwXpt6uXHL3bQudUE8D6/s256/css_sprite_ps-script-01.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720207379368002" border="0" /></a><br /><br /></li><li>選擇『檔案 -> 指令碼 -> 瀏覽』<br /><a href="http://lh4.ggpht.com/_b8lN_UbLoEc/TIvGTbHr5II/AAAAAAAAHwE/eb7cyvcor6w/s1600-h/css_sprite_ps-script-02.jpg"><img src="http://lh4.ggpht.com/_b8lN_UbLoEc/TIvGTbHr5II/AAAAAAAAHwE/eb7cyvcor6w/s256/css_sprite_ps-script-02.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720205645112450" border="0" /></a><br /><br /></li><li>選擇下載後的 css_sprite_ps-script.jsx<br /><a href="http://lh6.ggpht.com/_b8lN_UbLoEc/TIvGS2sz-jI/AAAAAAAAHwA/Fqqh792RaWo/s1600-h/css_sprite_ps-script-03.jpg"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/TIvGS2sz-jI/AAAAAAAAHwA/Fqqh792RaWo/s256/css_sprite_ps-script-03.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720195868719666" border="0" /></a><br /><br /></li><li>接著馬上會要你選擇一個要參考的原始 CSS,這裡會解析你原本的樣式名稱跟檔案對應,當然不選也沒關係。<br />解析 CSS 是用正規表示式去解析的,可能要花一點時間,我餵了一個兩千行的 CSS file 都還可以正常執行,再多我就不敢保證了。<br /><a href="http://lh4.ggpht.com/_b8lN_UbLoEc/TIvGSdkrfFI/AAAAAAAAHv8/TIMq7nGo--Y/s1600-h/css_sprite_ps-script-04.jpg"><img src="http://lh4.ggpht.com/_b8lN_UbLoEc/TIvGSdkrfFI/AAAAAAAAHv8/TIMq7nGo--Y/s256/css_sprite_ps-script-04.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720189123722322" border="0" /></a><br /><br /></li><li>我原始的 CSS 看起來像是這樣,當然稍微複雜一點內容應該也沒問題。<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1T-oBveZ_MHA4WzzDBLiaDABVoDBRtxW7bNGWK56zsdF1z5FiQfDyRmy6n16-m03VyTN1t-LHko_-aEywdNEFmX7omNVhrbcZ_R8ERiGGldLennChIhkTGffwD6qv2BGtl4QQC168vtlG/s1600-h/css_sprite_ps-script-05.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1T-oBveZ_MHA4WzzDBLiaDABVoDBRtxW7bNGWK56zsdF1z5FiQfDyRmy6n16-m03VyTN1t-LHko_-aEywdNEFmX7omNVhrbcZ_R8ERiGGldLennChIhkTGffwD6qv2BGtl4QQC168vtlG/s256/css_sprite_ps-script-05.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720184178767730" border="0" /></a><br /><br /></li><li>在圖片處理完後,會要選擇一個輸出定位的 CSS file<br /><a href="http://lh3.ggpht.com/_b8lN_UbLoEc/TIvGRiOBAMI/AAAAAAAAHv0/6GzpHkY9Hmg/s1600-h/css_sprite_ps-script-06.jpg"><img src="http://lh3.ggpht.com/_b8lN_UbLoEc/TIvGRiOBAMI/AAAAAAAAHv0/6GzpHkY9Hmg/s256/css_sprite_ps-script-06.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720173190971586" border="0" /></a><br /><br /></li><li>輸出的內容看起來會像是這樣<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_c2cx2n-HQWwys3MWnrtYMKFLpq4QYF_gej4U076v_Iy4LXYp2Tu2DglTdDiBM5eAVdi1x7Z2zafKAGl9Hhfl7QM5SxyFtJvKfzS8XXpa9jzzCvrSllptXKdx5pnqfmETUBDTkh_Yc_EK/s1600-h/css_sprite_ps-script-07.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_c2cx2n-HQWwys3MWnrtYMKFLpq4QYF_gej4U076v_Iy4LXYp2Tu2DglTdDiBM5eAVdi1x7Z2zafKAGl9Hhfl7QM5SxyFtJvKfzS8XXpa9jzzCvrSllptXKdx5pnqfmETUBDTkh_Yc_EK/s256/css_sprite_ps-script-07.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720172326074066" border="0" /></a><br /><br /></li><li>最後再將製作完成的圖檔存成自己需要的格式就可以了<br /><a href="http://lh6.ggpht.com/_b8lN_UbLoEc/TIvGRGSu-QI/AAAAAAAAHvs/F_8EEU23WU0/s1600-h/css_sprite_ps-script-08.jpg"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/TIvGRGSu-QI/AAAAAAAAHvs/F_8EEU23WU0/s256/css_sprite_ps-script-08.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720165694568706" border="0" /></a></li></ol>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-25043879769921739262010-09-01T23:50:00.013+08:002011-04-06T10:03:52.911+08:00利用 PhotoShop 製作 CSS Sprite原本想用 PhotoShop 的巨集來製作 CSS Sprite 的圖片,但沒想到巨集沒辦法很方便的匯入圖片到圖層上,最後找到一個可行的方法就是寫 PhotoShop 的 Script。<br /><br />我只有兩個需求:<ul><li>處理圖檔組合</li><li>紀錄每張圖的起始定位</li></ul><del>雖然已經寫完了,但是還是有一些小小的 Bug,對於透明底色的 png 會有定位上的偏差,我的解決辦法就是在四個角畫上 1px 透明為 1% 的白色,雖然美中不足但勉強夠用。</del> <br />這個小 Bug 已經解決了。<br /><br /><br />這個 Script 的執行方式很簡單<br />只要將需要合併的圖檔全部開啟<br />接著『檔案 -> 指令碼 -> 瀏覽』選擇下載後的 css_sprite_ps-script.jsx<br />執行後會建立一個新圖檔,並且要選擇輸出的 CSS 的檔案名稱 <br /><br /><pre class="js" name="code"><br />// css_sprite_ps-script.jsx<br />#target photoshop<br /><br />/** 建立參考線<br /> * @param {Int} pixelOffSet 偏移像素<br /> * @param {String} orientation ["Vrtc" => 垂直 ,"Hrzn" => 水平]<br /> */<br />function makeGuide(pixelOffSet, orientation) {<br /> var id8 = charIDToTypeID( "Mk " );<br /> var desc4 = new ActionDescriptor();<br /> var id9 = charIDToTypeID( "Nw " );<br /> var desc5 = new ActionDescriptor();<br /> var id10 = charIDToTypeID( "Pstn" );<br /> var id11 = charIDToTypeID( "#Rlt" );<br /> desc5.putUnitDouble( id10, id11, pixelOffSet ); // integer<br /> var id12 = charIDToTypeID( "Ornt" );<br /> var id13 = charIDToTypeID( "Ornt" );<br /> var id14 = charIDToTypeID( orientation ); // "Vrtc", "Hrzn"<br /> desc5.putEnumerated( id12, id13, id14 );<br /> var id15 = charIDToTypeID( "Gd " );<br /> desc4.putObject( id9, id15, desc5 );<br /> executeAction( id8, desc4, DialogModes.NO );<br />}<br /><br />function main(){<br /> //判斷是否有開啟圖檔<br /> if (app.documents.length = 0) {return;}<br /><br /> //設定前景色為白色<br /> app.foregroundColor.rgb.hexValue = 'FFFFFF';<br /><br /> var atDoc;<br /> var list = [];<br /> var length = app.documents.length;<br /><br /> //新增目標圖片文件<br /> var newPic = app.documents.add(<br /> 1, 1, 72,<br /> "css_sprite",<br /> NewDocumentMode.RGB,<br /> DocumentFill.TRANSPARENT<br /> );<br /><br /> var height=0;<br /> var width = newPic.width;<br /> //複製所有圖檔至新建立的圖檔<br /> for (var i=0; i<length; i++){<br /> atDoc=app.activeDocument=app.documents[i];<br /> <br /> //記錄圖層資訊<br /> var newLayer={<br /> name: atDoc.name, //檔名<br /> width: atDoc.width,<br /> height: atDoc.height,<br /> top: height<br /> };<br /><br /> //累計高度<br /> height += app.documents[i].height.value;<br /> //最大寬度<br /> if(width < atDoc.width){ width=atDoc.width;}<br /> <br /> //新增圖層<br /> var aLayer = atDoc.activeLayer=atDoc.artLayers.add();<br /><br /> //複製背景底圖<br /> try {<br /> atDoc.backgroundLayer.duplicate(aLayer,ElementPlacement.PLACEAFTER);<br /> atDoc.backgroundLayer.remove();<br /> } catch (e){}<br /><br /> //將新圖層與下一層互換<br /> aLayer.move(atDoc.layers[1],ElementPlacement.PLACEAFTER);<br /><br /> //標註四周的定位點<br /> var w=atDoc.width.value, h=atDoc.height.value;<br /> atDoc.selection.select([[0,0],[1,0],[1,1],[0,1],[0,0]]);<br /> atDoc.selection.fill(app.foregroundColor)<br /> atDoc.selection.select([[0,h-1],[0,h],[1,h],[1,h-1],[0,h-1]]);<br /> atDoc.selection.fill(app.foregroundColor)<br /> atDoc.selection.select([[w-1,0],[w-1,1],[w,1],[w,0],[w-1,0]]);<br /> atDoc.selection.fill(app.foregroundColor)<br /> atDoc.selection.select([[w-1,h-1],[w-1,h],[w,h],[w,h-1],[w-1,h-1]]);<br /> atDoc.selection.fill(app.foregroundColor)<br /><br /> //設定透明度<br /> aLayer.fillOpacity=1;<br /> //合併可見圖層<br /> atDoc.mergeVisibleLayers();<br /> //複製圖層<br /> atDoc.selection.selectAll()<br /> atDoc.selection.copy()<br /><br /> //貼上圖層<br /> atDoc=app.activeDocument=newPic;<br /> newLayer.obj = atDoc.paste();<br /> list.push(newLayer);<br /> };<br /><br /> //變更圖片大小<br /> atDoc=app.activeDocument=newPic;<br /> atDoc.resizeCanvas(width,height,AnchorPosition.TOPLEFT);<br /><br /> //變更圖層定位<br /> for (var i=length-1; i>=0; i--){<br /> //關閉複製過的檔案<br /> app.documents[i].close(SaveOptions.DONOTSAVECHANGES);<br /><br /> //移動圖層<br /> list[i].obj.translate(0,list[i].top);<br /><br /> //建立參考線<br /> if(i>0){ makeGuide(list[i].top,"Hrzn"); }<br /> };<br /><br /> // 輸出 CSS 定位檔<br /> var mySavefile = File.saveDialog("輸出 CSS 定位檔","*.css");<br /> if(!mySavefile){return};<br /> if(mySavefile.exists && !confirm("你確定要覆蓋這個檔案?")){<br /> return false;<br /> }<br /> // 開啟檔案<br /> var fileRef = new File(mySavefile);<br /> if (!fileRef.open("w","","")){<br /> alert("無法開啟檔案!!");<br /> fileRef.close();<br /> return false;<br /> }<br /><br /> // 輸出 CSS 定位設定<br /> for (var i=0; i<list.length; i++){<br /> fileRef.writeln(<br /> list[i].name+'{ background-position: 0 -'+list[i].top+'px; }'<br /> );<br /> };<br /> fileRef.close();<br />}<br /><br /><br />//把Photoshop推到最上層<br />app.bringToFront();<br />//設定使用的單位為「像素(Pixel)」<br />app.preferences.rulerUnits = Units.PIXELS;<br /><br />main();<br /></pre><br /><br />檔案下載:<a href="https://sites.google.com/site/weskerjax/code-demo/css_sprite_ps-script.jsx">css_sprite_ps-script.jsx</a><br /><br /><br />有對這個興趣的朋友可以<strong style="color: rgb(255, 0, 0);">參考 PhotoShop 安裝目錄下的 "JavaScript Reference Guide.pdf" 的開發文件</strong>,雖然裡面全部都是英文的但還不置於看不懂。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-52990096370551263682010-08-28T19:42:00.007+08:002013-06-10T23:23:13.896+08:00Eclipse + PHPEclipse + Aptana 安裝要安裝 Eclipse 說實在的還需要一點經驗<br />
首先 Eclipse 是 Base 在 Java 上的應用程式,所以先到 <a target="_blank" href="http://www.java.com/zh_TW/">Java.com</a> 去下載 Java Runtime Environment。<br />
再來到 <a target="_blank" href="http://www.eclipse.org/downloads/">Eclipse Downloads</a> 去下載 Eclipse 主程式。<br />
<br />
<br />
這裡我還是用我熟悉 3.5 版本 <a target="_blank" href="http://www.eclipse.org/downloads/packages/release/galileo/r">Eclipse Galileo</a> 做範例,既然 Web 開發那就直接下載 <a target="_blank" href="http://www.eclipse.org/downloads/packages/eclipse-php-developers/galileor">Eclipse for PHP Developers</a> 這個有封裝 PDT 的 Package<br />
<span style="color: rgb(255, 0, 0);">Downloda : </span><a target="_blank" href="http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/galileo/R/eclipse-php-galileo-win32.zip">eclipse-php-galileo-win32.zip</a><br />
<br />
<br />
<br />
再來我們先來去找中文語言包 <a target="_blank" href="http://www.eclipse.org/babel/downloads.php">Eclipse Babel Project Downloads</a><br />
<span style="color: rgb(255, 0, 0);">Downloda : </span><br />
<a target="_blank" href="http://www.eclipse.org/downloads/download.php?file=/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-eclipse-zh_TW_3.5.0.v20100814074441.zip&url=http://ftp.cs.pu.edu.tw/pub/eclipse/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-eclipse-zh_TW_3.5.0.v20100814074441.zip&mirror_id=554">BabelLanguagePack-eclipse-zh_TW_3.5.0.v20100814074441.zip</a><br />
<a target="_blank" href="http://www.eclipse.org/downloads/download.php?file=/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-tools.mylyn-zh_TW_3.5.0.v20100814074441.zip&url=http://ftp.cs.pu.edu.tw/pub/eclipse/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-tools.mylyn-zh_TW_3.5.0.v20100814074441.zip&mirror_id=554">BabelLanguagePack-tools.mylyn-zh_TW_3.5.0.v20100814074441.zip</a><br />
<a target="_blank" href="http://www.eclipse.org/downloads/download.php?file=/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-tools.pdt-zh_TW_3.5.0.v20100814074441.zip&url=http://ftp.cs.pu.edu.tw/pub/eclipse/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-tools.pdt-zh_TW_3.5.0.v20100814074441.zip&mirror_id=554">BabelLanguagePack-tools.pdt-zh_TW_3.5.0.v20100814074441.zip</a><br />
<a target="_blank" href="http://www.eclipse.org/downloads/download.php?file=/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-tptp.platform-zh_TW_3.5.0.v20100814074441.zip&url=http://ftp.cs.pu.edu.tw/pub/eclipse/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-tptp.platform-zh_TW_3.5.0.v20100814074441.zip&mirror_id=554">BabelLanguagePack-tptp.platform-zh_TW_3.5.0.v20100814074441.zip</a><br />
<a target="_blank" href="http://www.eclipse.org/downloads/download.php?file=/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-rt.equinox-zh_TW_3.5.0.v20100814074441.zip&url=http://ftp.cs.pu.edu.tw/pub/eclipse/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-rt.equinox-zh_TW_3.5.0.v20100814074441.zip&mirror_id=554">BabelLanguagePack-rt.equinox-zh_TW_3.5.0.v20100814074441.zip</a><br />
<br />
下載好後將全部解壓縮就可以了,然後執行 eclipse.exe<br />
<br />
<br />
<br />
先來安裝 <a target="_blank" href="http://www.phpeclipse.com/">PHPEclipse</a>,進入 -> 說明 -> Install New Software<br />
在 Work with 貼上 PHPEclipse 的線上安裝路徑,然後按下 Enter,選項出現後選擇 PHPEclipse,下一步 下一步 同意 完成<span style="color: rgb(153, 153, 153);font-size:85%;" > <span style="color: rgb(102, 102, 102);">(因為是線上安裝,所以會有點久)</span></span><br />
<strong style="color: rgb(255, 0, 0);">http://phpeclipse.sourceforge.net/update/stable/1.2.x/</strong><br />
<br />
<br />
<br />
再來安裝 <a target="_blank" href="http://www.aptana.com/">Aptana</a>,進入 -> 說明 -> Install New Software<br />
在 Work with 貼上 Aptana 的線上安裝路徑,然後按下 Enter,選項出現後選擇 Aptana Studio,下一步 下一步 同意 完成<br />
<strong style="color: rgb(255, 0, 0);">http://download.aptana.com/tools/studio/plugin/install/studio</strong><br />
<br />
<br />
<br />
最後來安裝我常用的套件<ul><li>Database Developers:可以撰寫 SQL script 跟連接 Database<br />
</li>
<li>Subversive:用來連接 SVN 的 Client 套件<br />
</li>
<li>RSE:可以連接 SSH 跟 SFTP 的遠端連接套件</li>
</ul><br />
進入 -> 說明 -> Install New Software<br />
在 Work with 的選項中選擇 <strong style="color: rgb(255, 0, 0);">Galileo - http://download.eclipse.org/releases/galileo</strong>,然後按下 Enter,然後就會出現一堆官方套件選擇<br />
<ul><li>Data Tools Platform Enablement Extender SDK <br />
</li>
<li>Data Tools Platform Extender SDK<br />
</li>
<li>Subversive SVN Integration for the Mylyn Project<br />
</li>
<li>Subversive SVN Team Provider<br />
</li>
<li>Remote System Explorer End-User Runtime<br />
</li>
<li>Remote System Explorer User Actions</li>
</ul><br />
一樣 下一步 下一步 同意 完成<br />
<br />
重開之後會跳出 Subversive 的選項,OS 是 Windows 的話選擇下面的選項: <br />
<ul><li>JavaHL 1.5.4 Win32 Binaries<br />
</li>
<li>JavaHL 1.6.0 Win32 Binaries<br />
</li>
<li>Native JavaHL 1.5 Implementation<br />
</li>
<li>Native JavaHL 1.6 Implementation<br />
</li>
<li>Subversive SVN Connectors</li>
</ul><br />
<br />
<br />
因為額外多裝了一些官方套件,順便來去下載語言包<br />
<a target="_blank" href="http://www.eclipse.org/downloads/download.php?file=/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-datatools-zh_TW_3.5.0.v20100814074441.zip&url=http://ftp.cs.pu.edu.tw/pub/eclipse/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-datatools-zh_TW_3.5.0.v20100814074441.zip&mirror_id=554">BabelLanguagePack-datatools-zh_TW_3.5.0.v20100814074441.zip</a><br />
<a target="_blank" href="http://www.eclipse.org/downloads/download.php?file=/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-technology.subversive-zh_TW_3.5.0.v20100814074441.zip&url=http://ftp.cs.pu.edu.tw/pub/eclipse/technology/babel/babel_language_packs/R0.8.0/BabelLanguagePack-technology.subversive-zh_TW_3.5.0.v20100814074441.zip&mirror_id=554">BabelLanguagePack-technology.subversive-zh_TW_3.5.0.v20100814074441.zip</a><br />
<br />
<br />
<br />
<strong style="color: rgb(255, 0, 0);">最後最後中肯的建議,別在單一一個 Eclipse 上加太多套件,不然 Eclipse 會變成吃效能的怪物,最好依工作性質分成幾個不同類型的開發環境。</strong>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-24419530586459754452010-06-01T22:54:00.009+08:002013-06-10T23:31:09.730+08:00讓你的 Plurk 有天空的感覺最近開始接觸 Plurk 微網誌<br />
但第一個感覺就是要我天天看這不順眼的 UI 實在很難過<br />
於是想起 <a target="_blank" href="http://cyufred.blogspot.com/">fred</a> 一直提到<a target="_blank" href="http://zh.wikipedia.org/zh-tw/%E5%A4%8F%E6%97%A5%E5%A4%A7%E4%BD%9C%E6%88%B0">夏日大作戰</a>裡的 UI 介面<br />
所以參考 <a target="_blank" href="http://www.noaesthetic.com/">Josh Peterson</a> 為 <a target="_blank" href="http://www.blogger.com/">Blogger</a> 所設計的一個版型來製作 Plurk 的版面<br />
<br />
<br />
由於我並沒有覆蓋太多的原始樣式 所以請將佈景設定成下列選項:<br />
<a href="http://1.bp.blogspot.com/_b8lN_UbLoEc/TAVcSeA4QVI/AAAAAAAAHeM/9BIl8RwS7WQ/s1600/plurk_style_setting.jpg"><img src="http://1.bp.blogspot.com/_b8lN_UbLoEc/TAVcSeA4QVI/AAAAAAAAHeM/9BIl8RwS7WQ/s400/plurk_style_setting.jpg" alt="" id="BLOGGER_PHOTO_ID_5477885994130227538" border="0" /></a><br />
<br />
<a target="_blank" style="font-weight: bold; font-size: 130%;" href="http://www.plurk.com/installDesign/6396960-1a824dd3bc">Plurk 的樣式安裝連結</a><br />
<br />
<br />
底圖是使用 <a target="_blank" href="http://www.blogger.com/">Blogger</a> 所提供的圖片<br />
但由於直接連到 <a target="_blank" href="http://www.blogger.com/">Blogger</a> 會常常無法正常顯示 所以我另存一份到 <a target="_blank" href="http://picasaweb.google.com/">Picasa</a> 中去放<br />
有需要獨立存放的請參考以下連結:<br />
<span style="color: rgb(102, 102, 102);font-size:85%;" >Blogger 的原始連結:<a href="http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa">http://themes.googleusercontent.com/image?id=1OACC...</a> (JPEG 79KB)</span><br />
<span style="color: rgb(204, 0, 0);">建議不要直接連結 Blogger 的圖檔,Blogger 有阻擋不正當連結。</span><br />
<span style="color: rgb(102, 102, 102);font-size:85%;" >我個人的圖檔位址是:<a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/hide-file/bg_image.jpg">http://sites.google.com/site/weskerjax/code...</a> (JPG 70KB)</span><br />
<br />
由於我用了很多 box-shadow(陰影) 及 border-radius(圓角)還增加美感<br />
測試後在 IE7 及 Opera 上呈現會有點出入<br />
目前只有 <a target="_blank" href="http://moztw.org/">Firefox </a>及 <a target="_blank" href="http://www.google.com/chrome/index.html?hl=zh_tw&brand=CHMB&utm_campaign=zh_tw&utm_source=zh_tw-ha-apac-tw-sk&utm_medium=ha">Chrome</a> 能完整的呈現所有的 CSS 效果<br />
<br />
實際呈現效果:<br />
<a href="http://2.bp.blogspot.com/_b8lN_UbLoEc/TAViIE4uwDI/AAAAAAAAHeU/ZnTwHuM1Grc/s1600/plurk_style_show.jpg"><img src="http://2.bp.blogspot.com/_b8lN_UbLoEc/TAViIE4uwDI/AAAAAAAAHeU/ZnTwHuM1Grc/s400/plurk_style_show.jpg" alt="" id="BLOGGER_PHOTO_ID_5477892412656238642" border="0" /></a><br />
歡迎來到<a target="_blank" href="http://www.plurk.com/weskerjax">我的 Plurk</a><br />
<br />
<br />
參考來源:<a target="_blank" href="http://www.flickr.com/photos/m66660000/4627351230/in/pool-plurkthemes">hold on</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com1tag:blogger.com,1999:blog-5946530704742130970.post-68481678624949233592010-05-23T17:27:00.008+08:002013-06-10T23:28:58.149+08:00EclipseColorer 不錯的語法加亮外掛最近又找到一個不錯的 Plugin 來用<br />
<a target="_blank" href="http://colorer.sourceforge.net/eclipsecolorer/index.html">EclipseColorer</a> 支援 150 種語言的語法標記<br />
讓我在用 <a target="_blank" href="http://www.eclipse.org/">Eclipse</a> 寫 PL/SQL 的時候至少是彩色的<br />
<br />
但除了支援多種語言以外本身沒什麼特色<br />
就像一個有顏色的筆記本<br />
既然已經有詞庫了為什麼沒有語法提示呢?<br />
美中不足 暫時堪用一下吧!<br />
<br />
線上安裝網址:http://colorer.sf.net/eclipsecolorer/Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-28194837589167136642010-05-19T21:56:00.007+08:002010-05-27T00:09:33.515+08:00在 Blogger 加上各種推文按鈕(最終版)經過多次的修修改改<br />我想我應該不會再改了<br />這裡我只提供我目前的程式碼<br />詳細教學請至<a href="/2010/05/blogger.html">在 Blogger 加上各種推文按鈕</a><br /><br /><a href="http://picasaweb.google.com/lh/photo/unZUWaWS50Hc4zc6aLnZDhPOdhWj1fJ97NFksMXXP0o?feat=embedwebsite"><img src="http://lh3.ggpht.com/_b8lN_UbLoEc/S_Qg___be2I/AAAAAAAAHb0/nhqU4bKFvAA/social_icons.png" /></a><br /><pre class="css" name="code"><br />/*Social Icon*/<br />.social{<br /> background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat;<br /> /*16*16按鈕的圖片網址*/<br /><br /> display: -moz-inline-box;<br /> display: inline-block;<br /> height:16px;<br /> margin:0 4px;<br /> text-indent:-999999px;<br /> vertical-align:middle;<br /> width:16px;<br /> opacity:0.75;<br /> overflow:hidden;<br />}<br />.social:hover{<br /> opacity:1;<br />}<br /><br />a.toFacebook{ background-position: 0 0; }<br />a.toPlurk{ background-position: 0 -16px; }<br />a.toTwitter{ background-position: 0 -32px; }<br />a.toTechnorati{ background-position: 0 -48px; }<br />a.toDelicious{ background-position: 0 -64px; }<br />a.toBuzz{ background-position: 0 -80px; }<br />a.toDigg{ background-position: 0 -96px; }<br />a.toStumbleUpon{ background-position: 0 -112px; }<br />a.toDesignFloat{ background-position: 0 -128px; }<br />a.getAtomRSS{ background-position: 0 -144px; }<br />a.toReader{ background-position: 0 -160px; }<br /></pre><br /><pre class="xml" name="code"><br /><div class='post-footer-line post-footer-line-99'><span class='post-social-icons'><br /> 分享至 &#65306;<br /> <a class='social toFacebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'>Facebook</a><br /> <a class='social toPlurk' expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot;+ data:post.url + &quot; (&quot; + data:post.title + &quot;)&quot;' rel='external nofollow' target='_blank' title='分享至 Plurk'>Plurk</a><br /> <a class='social toTwitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot;+ data:post.url' rel='external nofollow' target='_blank' title='分享至 Twitter'>Twitter</a><br /> <a class='social toTechnorati' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot; &quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Technorati'>Technorati</a><br /> <a class='social toDelicious' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot; &quot; + data:post.title' rel='external nofollow' target='_blank' title='儲存至 Delicious'>Delicious</a><br /> <a class='social toDigg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Digg'>Digg</a> <br /> <a class='social toStumbleUpon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Stumble Upon'>Stumble Upon</a><br /> <a class='social toDesignFloat' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Design Float&quot;'>Design Float</a><br /> <a class='social toReader' expr:href='&quot;http://www.google.com/reader/link?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot;+data:blog.homepageUrl' rel='external nofollow' target='_blank' title='分享至 Google Reader'>Google Reader</a><br /> <a class='social toBuzz' expr:href='&quot;http://www.google.com/buzz/post?url=&quot;+ data:post.url' rel='external nofollow' target='_blank' title='分享至 Buzz'>Buzz</a><br /> <a class='social getAtomRSS' href='/feeds/posts/default' title='訂閱 Atom / RSS' type='application/atom+xml'>Atom / RSS</a> <br /></span></div><br /></pre><br /><br /><h4>圖片來源:</h4><a href="http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/">Social Media Network Icons | Komodo Media</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com5tag:blogger.com,1999:blog-5946530704742130970.post-4286845119770165652010-05-15T13:05:00.004+08:002010-05-20T02:14:14.001+08:00Blogger 的標題加上 Facebook 官方的推文按鈕之前協助 <a href="http://findingrogan.blogspot.com/">Rogan</a> 在他的 Blogger 上加上Facebook 計數推文按鈕<br />才知到原來沒什麼人寫這樣的文章<br />今天也為自己的 Blogger 加上推文按鈕<br />順便寫下教學文<br /><br /><br />首先先到 <a href="http://zh-tw.facebook.com/facebook-widgets/share.php">Facebook 分享</a> 選好需要的樣式<br />如果要選擇『自訂網址』請再輸入匡填入 <span style="color: rgb(255, 0, 0); font-weight: bold;">data:post.url</span><br />所以你會看像這的 HTML 程式碼:<br /><pre class="xml" name="code"><br /><a name="fb_share" type="button_count" share_url="data:post.url" href="http://www.facebook.com/sharer.php">分享</a><br /><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br /></pre><br />再來要符合 Blogger 樣版語法必須在 <span style="color: rgb(255, 0, 0); font-weight: bold;">share_url</span> 前面加上 <span style="color: rgb(255, 0, 0); font-weight: bold;">expr:</span><br />這樣我們才可以使用 <span style="color: rgb(255, 0, 0); font-weight: bold;">data:post.url</span> 這個樣版變數<br />再來為了讓 UI 有更清楚的標示再加上 <span style="color: rgb(255, 0, 0); font-weight: bold;">title="分享至 Facebook"</span> 這個屬性<br />最後修改就會像下面這樣:<br /><pre class="xml" name="code"><br /><a name="fb_share" type="button_count" expr:share_url="data:post.url" href="http://www.facebook.com/sharer.php" title="分享至 Facebook">分享</a><br /><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br /></pre><br /><br />打開『版面配置』→『修改HTML』<br />將『展開小裝置範本』打勾<br /><a href="http://4.bp.blogspot.com/_b8lN_UbLoEc/S-6Ly7QIM-I/AAAAAAAAHZI/U50KwPPiXHY/s1600/blogger_social_button.png"><img src="http://4.bp.blogspot.com/_b8lN_UbLoEc/S-6Ly7QIM-I/AAAAAAAAHZI/U50KwPPiXHY/s512/blogger_social_button.png" alt="" id="BLOGGER_PHOTO_ID_5471464304316789730" border="0" /></a><br />找到 <h3 class='post-title entry-title'>及 </h3><br /><span style="color: rgb(255, 0, 0);font-size:85%;" >小技巧:所有的瀏覽器都有搜尋功能(Ctrl + F),只要搜尋 <span style="font-weight: bold;">"post-title"</span> 就可以找到這行了</span><br />將 <a name="fb_share"... 這行貼在 </h3> 前面<br /><br />再去搜尋 </body> 這一行<br />將 <script src="http://static.ak.fb... 貼在 </body> 前面<br /><br /><br />這時候就可以先預覽如果沒問題就存檔<br />這時候應該會看起來會像這樣:<br /><img src="http://3.bp.blogspot.com/_b8lN_UbLoEc/S-8XjQNsHmI/AAAAAAAAHag/F3OH4wirBlc/blogger_social_button_show.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5471617966693686882" /><br /><br />下面是其他人寫的教學:<br /><a href="http://micnet.blogspot.com/2009/10/facebook-share.html">Blogger + facebook分享計數按鈕</a><br /><a href="http://steachs.com/archives/1451">如何在Wordpress或Blogger加上【Google Buzz推文分享按鈕】?</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-63737956187843874992010-01-27T02:34:00.003+08:002013-06-29T17:33:42.728+08:00將無名的備份檔匯入 Blogger之前幫 <a target="_blank" href="http://cyufred.blogspot.com/">fred</a> 寫了一個搬家的格式轉換器<br />
最近將標籤的解析加進去<br />
原本想將留言的解析也加進去<br />
但 Blogger 一直匯不進去<br />
還出現了格式錯誤的問題<br />
所以並沒有支援留言的轉換<br />
<br />
這是用 JavaScript 寫出來的<br />
為了增加效率<br />
我將原本用正規標示式的解析方式<br />
改成以 DOM 的方式解析<br />
但很遺憾的捨棄 IE 的支援<br />
<br />
格式轉換器:<a target="_blank" href="https://dl.dropboxusercontent.com/u/16784943/code-demo/wretch_to_atom.html">wretch_to_atom.html</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-83092925809640622332009-12-21T15:11:00.009+08:002012-03-16T22:58:01.081+08:00Blogger 文章匯入的格式Blogger 可以接受 <a href="http://www.w3.org/2005/Atom">Atom</a> 的格式匯入<br />至於 RSS 的格式就要去找轉換器轉成 <a href="http://www.w3.org/2005/Atom">Atom</a> 才可以匯入<br /><br />以下是 Blogeer 匯入時的最簡化的格式<br /><pre class="xml" name="code"><br /><?xml version='1.0' encoding='UTF-8'?><br /><?xml-stylesheet <br /> href="http://www.blogger.com/styles/atom.css" <br /> type="text/css"?<br />><br /><feed xmlns='http://www.w3.org/2005/Atom' <br /> xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' <br /> xmlns:georss='http://www.georss.org/georss'<br />><br /> <id>tag:blogger.com,1999:blog-4</id><br /> <generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><br /><br /> <entry><br /> <id>tag:blogger.com,1999:blog-4.post-2</id><br /> <published>2009-12-19T23:39:20.281+08:00</published><br /> <title type='text'>標題</title><br /> <content type='html'>文章內容</content><br /> <category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/><br /> <category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/><br /> </entry><br /><br /> <entry><br /> <id>tag:blogger.com,1999:blog-4.post-2</id><br /> <published>2009-12-19T23:39:20.281+08:00</published><br /> <title type='text'>標題</title><br /> <content type='html'>文章內容</content><br /> <category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/><br /> <category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/><br /> </entry><br /><br /></feed><br /></pre><ul><li><strong>generator</strong>:產生器識別,Blogger 只接受自己的標示</li><li><strong>id</strong>:可以重複,但必須符合格式</li><li><strong>published</strong>:發佈時間,格式為 ISO8601</li><li><strong>title</strong>:文章標題</li><li><strong>content</strong>:文章內文,可以允許換行符號"\n",內文的 HTML 必須實體逸出</li><li><strong>category</strong>:標籤<br /></li></ul>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0