Mobius 網站設計

在這篇11個小於4K的好用jQuery外掛裡面，介紹了Lazy，它可以讓瀏覽器只下載有用到的jQuery外掛檔案，以減少HTTP request（請開啟範例網頁後，使用Firebug觀察網路）。用法是：

$.lazy('jquery.elastic.js','elastic');
$.lazy('jquery.validation.js','validate');
$.lazy('jquery.ajaxdotnet.js','ajaxDotNet');

// 照常使用外掛
$('textarea').elastic();

當然這類用途的外掛並不新穎，重點是Lazy非常地輕巧，只有不到1K的大小。

有意思的是在Google這個外掛的時候，另外發現了jEditable作者的另一個作品：Lazy Load（Image Lazy Loader）。它可以加速瀏覽器讀入整個網頁的速度，讓瀏覽器在顯示可視範圍內的圖片後，就算完成網頁的載入；當使用者拉動捲軸繼續瀏覽網頁的其他部份時，圖片才會依序載入。請直接看作者一目了然的範例。

David Walsh的文章：Tips for Protecting Querystring Keys & Values in PHP，建議了以下五種保護Querystring參數和值的方法：

1. 整數需指定資料型態（Typecast Value when Expecting Numbers）：確保整數不會被當成字串而造成錯誤。

$id = (int) $_GET['i'];

2. 淨化輸入值（Sanitize Input）：建立各種類型資料的處理函式，確保資料傳遞時的一致性與安全性。類似在Dreamweaver裡面的GetSQLValueString函式。
3. 關閉REGISTER_GLOBALS（Make Sure REGISTER_GLOBALS is Off）。
4. 不使用有意義的變數名稱（Don’t Make Variable Names Meaningful）：David原本的建議如下，但是有一位仁兄在回應中則持反對的意見，認為這並無助於安全性（還是可以從數值的一致性猜出變數的意義）。

<!-- no! -->
<a href="/profile.php?user_id=<?php echo $user_id; ?>">Your Profile</a>
<!-- yes! -->
<a href="/profile.php?q=<?php echo $user_id; ?>">Your Profile</a>

5. 將數值加密（Encrypt Querystring Values）：使用md5來加密參數值。

<a href="/profile.php?i=<?php echo md5($user_id); ?>">Click here</a>

最後，請問有人知道「Querystring」的中文怎麼翻譯嗎？

補記：jaceju在我的部落格建議Querystring可譯為「網址參數列 (字串) 」，裡面的變數就稱為「網址參數」 (例如 ?abc=123 裡的 abc)

Jeditable是一個用來達成「就地編輯」（Edit In Place）目的的jQuery plugin，以下簡單介紹這個外掛的用法，以及如何將編輯完成的內容更新到MySQL資料表中。

在本文的範例中，要更新的是如下的資料表：

通常我們會把資料表的資料拉到網頁裡，如下圖，前兩個欄位即是要利用Jeditable來編輯的資料。第一欄（對應資料表category欄）要使用文字框（text input）來編輯，第二欄（對應資料表parent欄）則是用下拉選單（select）編輯。

將要更新的資料以div包住，並加上class和id屬性。請注意id值的數字是用php動態產生的，即是資料表的cId欄位值：

使用這個外掛的語法如下：

$(document).ready(function() {
$(”.category”).editable(”save.php”, {
cancel: ‘取消’,
submit: ‘修改’,
indicator: “儲存中…”,
tooltip: ‘滑鼠點此可編輯…’,
width: “70px”
});

$(”.parent”).editable(”save.php”, {
loadurl : “parents.php”,
type: “select”,
cancel: ‘取消’,
submit : “修改”,
indicator: “儲存中…”,
});
});

在這幾個參數裡面，第一個參數「save.php」即是將更新內容存入資料庫的後端處理程序，其他的參數應該不難理解；比較值得介紹的是「loadurl」這個參數，如果我們希望動態產生下拉選單的內容，就必須使用loadurl來加入外部資料。這個部份請參閱Jeditable官方網頁的「How to use selects?」一節。

完成上述步驟後，就地編輯就會開始作用了。點擊可編輯的文字時，Jeditable會自動產生一張表單，在本例中會依照「type」參數的設定，出現文字框或下拉選單：

按下「修改」送出表單時，Jeditable預設後端（save.php）會接收到兩個POST變數：$_POST['id']和$_POST['value']（變數名稱也是預設的，可以使用id和name兩個參數修改）。$_POST['id']的值等於前述放在div裡的id值，$_POST['value']則是在表單欄位內輸入的值。

後端（save.php）更新資料表的程式碼如下（參考來源：DeviLib.com）：

< ?php
$id = $_POST['id'];
$value = $_POST['value'];

//將$_POST['id']用explode函式拆解為$field和$id兩個變數
list($field, $id) = explode('_', $id);

//mysql query
mysql_query("UPDATE tb_category SET $field='$value' WHERE cId='$id'");

//將值傳回前端
echo $value;
?>

完成後的成品網頁請按此測試。有個缺憾是，這個外掛無法直接搭配jQuery Validation一起使用，必須另行客製（有善心人士可以提供嗎？），所以我是用php在後端做資料驗證的。想了解更多資訊，請務必到Jeditable官方網頁一遊。有任何的問題指教，也歡迎與我討論。

Danny Dover在SEOmoz整理了一份給網站開發人員看的SEO小抄，滿滿兩張A4，應該稱得上是大抄，而且真的很實用。

我比較感興趣的是其中兩個部份：

• 建議的Title標籤寫法（Recommended Title Tag Syntax）：

5/8補記：經過一連串的討論，Danny在5/1修改了Title寫法。基本上順序就是按照行銷的優先性來排列的：

關鍵字 < 分類 | 網站標題

網站名稱 | 分類 > 次分類 - 網頁主題

• 避免以下會將搜尋引擎機器人拒於門外的情況（Common Robot Traps to Avoid）：
• 表單（Input Forms，不過Google前不久已經宣佈會開始爬GET方法送出的表單）
• 網址中帶有Session ID（Session IDs in URL）
• 用Cookie限制瀏覽的頁面（Pages Restricted by Cookies）
• 頁框（Frames）
• 登入限制（Logins）

依照前者的建議，我使用All in One SEO Pack這個外掛修改了Idea Grapes的Title寫法；也一併更新了Permalink格式（多虧了Dean’s Permalinks Migration幫忙做301轉向）。目前使用的Permalink格式是/%year%/%monthnum%/%postname%/，之所以不使用一般建議的/%category%/%postname%/是因為我自己做的分類沒有太大的SEO意義，而我在Google如果看到搜尋結果列出部落格的文章，通常會看一下它是什麼時間發表的，避免看到太舊的資料浪費時間，所以還是保留了發文的時間在URL中。

很久以前在Smiley Cat看過一篇教學，將整個區塊元素變成可連結，並且在滑鼠移過時變換背景顏色：

要完成這個效果，有兩個重點：

• 必須讓整個區塊產生滑鼠移過會改變背景顏色的hover effect。
• 必須讓整個區塊可以連結。

在Smiley Cat的教學中，利用CSS設定將 a 元素改為display:block，因為 a 元素除了可以連結之外，在CSS中，又能使 :hover 這個偽類別（pseudo-classes）產生作用（:hover如果不用在 a 元素，而用在其他區塊元素如 li:hover，IE 6是不支援的）。

而最近Web Designer Wall則有一篇jQuery十大特效的教學（jQuery Tutorials for Designers），裡面的第六項：Entire block clickable，提到如何用jQuery來達成相同的效果。我借用了它的XHTML原始碼與部份的CSS，並做了一點修改，讓區塊變換背景顏色與連結的效果都採用JQuery控制，成果請見demo頁面。

和Smiley Cat一樣，Web Designer Wall也是採用 li 元素來排列這三個區塊，XHTML的原始碼結構如下：

• Web Designer Wall

  A wall of design ideas, web trends, and tutorials

• Best Web Gallery

  Featuring the best CSS and Flash web sites

• N.Design Studio

  Blog and design portfolio of Nick La

而CSS的相關設定則為：

.pane-list {
margin: 0;
padding: 0;
list-style: none;
}
.pane-list li {
background: #ecfad7;
padding: 10px 20px 10px;
border-top: solid 1px #c4df9b;
cursor: pointer; //修改滑鼠游標
}

至於重頭戲jQuery的部份，原始碼如下：

$(document).ready(function(){
$(”.pane-list li”).hover(function(){
$(this).css(”background-color”, “#f6ffe9″);
}, function(){
$(this).css(”background-color”, “#ecfad7″);
});
$(”.pane-list li”).click(function(){
window.location=$(this).find(”a”).attr(”href”);return false;
});
});

上面的動作，要處理的有兩件事情：

• 當滑鼠移過 li 區塊時會變化背景顏色：使用 .hover事件，修改 li 的background-color。
• 點擊整個 li 區塊即可以連結：使用 .click事件，並利用$(this).find("a").attr("href");取得連結網址。

這篇jQuery Tutorials for Designers裡面的十大特效都非常簡單實用，一定能幫助有XHMTL和CSS基礎的網頁設計師做出互動性更強的網頁，快去看看吧。

測試 offsetHeight, scrollHeight, clientHeight:

測試環境示意圖：

測試結果：

結論：

1. firefox 中 scrollHeight 比較接近實際值

2. IE7 中 offsetHeight 比較接近實際值

3. 可以以 window.innerHeight 或 contentDocument 判斷 FireFox 或 window