2012年6月24日星期日

這兩天

平時一個人住的地方,變了十個人住...

2012年3月27日星期二

網頁設計筆記(二十四) 一頁式網頁 HTML5′s pushState


原文:How to use HTML5′s pushState

如我所承諾,我將會寫一個關於使用HTML5′s pushState的教程。
如果你不懂得HTML 或 pushState,這篇網誌不適合你。這個教程是為了那些對HTML 或JavaScript有相關經驗的人。在我開始之前,我需要確認你已經準備好使用HTML5和pushState,這裏的程式是我寫的,在  Github 上有一檔案助我想出如何使用popState。上一次我使用pushState,我使用了iFrames記錄下來。你需要知道這裏的代碼是不完整的。這表示你需要學會使用你的代碼來使它可以運行。

甚麼是 pushState?

事實上,它叫history.pushState,但我會叫它作 pushState,寫起來較方便。pushState是用來在沒有重新載入頁面的情況下改變URL。 Github and Facebook使用pushState。它和 location.hash相似,但更酷。但我還是建議使用location.hash,因為一些蹩腳的瀏覽器不支援pushState,例如IE。除了pushState,還有個叫 replaceState的東西,它會改變URL但又不加進瀏覽器記錄,但這教程只會聚焦於pushState。

pushState的重點?

PushState是十分酷的,它使瀏覽網頁的速度更快,感覺更棒。

history.pushState的相容性

PushState works in Google Chrome, Firefox 4 and up(doesn’t work in Firefox 3 or lower) and Safari. PushState does not work in Internet Explorer 9 or lower nor does it work on iPhones.
PushState 能在Google chrome,Firefox 4和Safari等瀏覽器下執行。但不相容於IE9及以下。

你需要的東西:

  •  一個html編輯器例如Dreamweaver 或 notepad++。當然你可以用windows內置的文件編輯器notepad 或蘋果電腦的wordpad,總之將檔案儲成html即可。
  • 一個好的瀏覽器,不要使用IE,IE不支援 PushState 。
  • JQuery程式庫。 
  • 一些編程經驗。
  • 耐心,因為你要明白一些門外漢不會明白的東西。
  • .HTACCESS 和 PHP. 這不是必需,但如果有人重新載入頁面(按F5),會得到404錯誤。.HTACCESS能重導向到正確的地方。
  • 一個真的網頁。
當你有以上的東西,可以開始了,首先你要有一個網頁,如果沒有,做一個。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<a href="link1">Link 1</a> <a href="link2">Link 2</a>
</body>
</html>
這十分簡單。第二,加入JQuery 函式庫。

<script src="path/to/your/jquery.js" type="text/javascript"></script>
第三,開始加入JavaScript代碼。我將會解釋每一句代碼。我的最終目的是取得連結和劫持它。如果你不明白我的話可以 看這個網頁 ,閱讀一下有關劫持連結。以下是代碼:
<script language="javascript" type="text/javascript">
<!--
// The following script was created by Dakota Wyatt from Dcoinc.net.
$(document).ready(function(e) {
    $("#nav a").click(function(e){
  e.preventDefault();
  var url = $(this).attr("href");
  history.pushState({page:url}, url, url);
  updateSite(url);
 });
});
-->
</script>
Don’t worry about the “updateSite()” function. We’ll get to that later.
不要擔心“updateSite()” 這個函式,我會在下面完成它。

Now to explain the code. Everything in bold requires JQuery.現在解釋一下代碼。粗字是用到JQuery的。

$(document).ready(function(){...}); 是當DOM準備好就執行JQuery事件,沒有這句,代碼沒法運作。
$("a").click(function(e){..}); 是一個函式,當你點擊連結,它就會執行,呼叫pushState事件。
e.preventDefault(); 是JQuery事件用來防止瀏覽器旳預設行為,即停止瀏覽器去連結的原來目的地。
var url = $(this).attr("href"); 是用來儲存URL,這是需要的,因為我們要告訴瀏覽器我們要去哪個頁面。
history.pushState(state object, title(useless), url); 是用來改變瀏覽器上網址列的URL,但同時不會重新載入頁面。第一個參數是狀態(我不太懂它),第二個參數是標題,但好像太部份瀏覽器都不理會它。第三個數就是改變的URL。
updateSite(); 是客製函式用來改變網頁的內容,如你所見,我們未完成它。

使用 popState.

PopState 是一個事件,每當瀏覽器的瀏覽記錄改變,它就會行。沒有PopState,pushState 形同廢物。用以下代碼就可以偵測到記錄的改變。
 
$(window).bind("popstate", function(e){
 var state = = event.state;
 if(state){
  updateSite(state.page);
 }else{
  updateSite("home");
 }
 });
這代碼使用JQuery bind事件來檢查popState。
解釋:
這個教程裏沒有使用到狀態物件,僅從URL取得內容。
$(window).bind("popstate", function(e){..});是用來偵測瀏覽記錄的改變。
var state = event.state; 用來讀取由pushState產生的狀態物件。
if(state){..}else{…} 這個if else 判斷用來檢查有沒有狀態物件,沒有這句會產生error。
updateSite(state.page); 是未完成的客製函式,state.page 部份包含了頁面物件(來自狀態變數)。如果你看看看pushState的第一個參數,你會發現我們設定了物件為URL。
狀態→變數
頁面→物件
這應該較易理解。
這十分簡單,接著我們寫updateSite函式。當你按上一頁/下一頁時可以注意到 pushState 的執行。
function updateSite(currentPage){
 // load your pages using the currentPage variable. To test it first, add an alert function like:
        // alert(currentPage);
}
alert(currentPage);這代碼十分簡單,完全根據你的需要,如你所見,函式中沒有沒有東西,你需要加上自己需的東西。如果你想測試它是否正常執行,你可以加一句: alert(currentPage);

你要用pushState就是這裏的一切。

很簡單是吧?Facebook令它十分難以理解。恭喜你,你現在知道Facebook如何做到那樣炫的效果了。這都不是魔法,是pushState和popState。在完結之前,等我展示所有的代碼。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="path/to/your/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
// The following script was created by Dakota Wyatt from Dcoinc.net.
$(document).ready(function(e) {
    $("#nav a").click(function(e){
  e.preventDefault();
  var url = $(this).attr("href");
  history.pushState({page:url}, url, url);
  updateSite(url);
 });
});
$(window).bind("popstate", function(e){
 var state = event.state;
 if(state){
  updateSite(state.page);
 }else{
  updateSite("home");
 }
 });
function updateSite(currentPage){
 // load your pages using the currentPage variable. To test it first, add an alert function like:
        // alert(currentPage);
}
-->
</script>
</head>

<body>
<a href="link1">Link 1</a> <a href="link2">Link 2</a>
</body>
</html>
複製以上代碼,貼在編輯器,儲蓄和測試它。
我希望這個教程能幫助你,如果它成功,請向你的編程朋友傳遞開去,我會寫更多教程覆蓋更多的未寫過的題目。
如果你有困難請留下評論。

2012年2月27日星期一

喜歡的對白

有時想用記不起,POST出來。


  • 奇蹟只會發生在相信夢想的人身上。
  • 能力愈大,責任愈大。
  • 你是一個怎樣的人並不重要,重要的是你所做的事情。
  • 我沒有夢想,但我可以守護別人的夢想。
  • 力是是用來守護所愛的人和事,而不是用來打怪物而已,擁有越大的力量就要背負更大的責任,只懂殺戮就和怪物沒有分別。
  • 所謂英雄,是在遇到無法抵抗的逆境時,能找到勇氣,繼續奮鬥,堅持下去的人。
  • 我記得,我黎呢個世界既時候,我喺度喊,身邊既人喺度笑,我希望我走既時候,我同我身邊既人一齊笑。
  • 我要守護每個人的笑容!請看清楚!我的變身!
  • 男子要胸懷正義。
  • 生命係一個過程,可悲既係佢不能重新黎過,可喜既係它不需要重新黎過。
  • 曾經有一段至真摯既愛情擺係我面前,但係我冇珍惜到,到失去左既時候已經追悔莫及,塵世間最痛苦莫過於此。如果個天比我再黎過,我會同個女仔講,我愛你。如果係都要係呢份愛上加上一個期限,我希望係一萬年。
  • 人如果有夢想,感同條鹼魚有咩分別呀?
  • 劃清黑白。
  • 因為我想信,緣起不滅。
  • 人既存在,對別人來說,已經係一種傷害。
  • 未來是未知數,沒有命運,一切事在人為。
  • 你知道喜歡和暗戀的分別嗎?喜歡是勇敢,暗戀是懦弱。
  • 出手時不要心懷慈悲。心懷慈悲的時候不要出手。
  • The world ain't all sunshine and rainbows. It is a very mean and nasty place and it will beat you to your knees and keep you there permanently if you let it. You, me, or nobody is gonna hit as hard as life. But it ain't how hard you hit; it's about how hard you can get hit, and keep moving forward. How much you can take, and keep moving forward. That's how winning is done.
  • 人,一定要找到屬於自己的世界。這樣,人生才有意義。
  • 快樂有限怎可能浪費,世界太多討厭東西。
  • 天行健,君子以自強不息。地勢坤,君子以厚德載物。
  • 遇強即屈,借花敬佛。
  • 殭屍最大的力不是仇恨或憤怒,而是愛。
  • 如果你不能像英雄般轟轟烈烈的犧牲,就會活著眼看自己慢慢變成一個壞蛋。
  • 一日都可以係一生一世。
  • 愛情冇對與錯,只係一種選擇。


2012年2月25日星期六

網頁設計筆記(二十一) 一頁式網頁 location.hash

原文:How to use location.hash

甚麼是 location.hash?

Location.hash是一些 JavaScript,能夠製造動態同時保留瀏覽記錄的一頁式網頁。如果你仍未了解我說的什麼,那就容我詳細一點解釋,畢竟這是我第一個教學文章。比方說你有一個網站,包含20頁內容,但你並不想每一頁也從新製作,又或是你的網站伺服器沒有足夠的空間儲存20頁內容?如果你用其中某一頁網頁就能動態地載入指定的網頁,而且能夠使用"上一頁"、"下一頁"的功能?又如果你正製作一個網頁應用程式,你不想一按下f5重新載入,網頁就會亂成一團。Location.hash能夠助你解決以上種種。
要製作一個動態一頁式網頁,你需要使用JavaScript來讀取URL上的hash(#)值來決定載入那一頁內容。

甚麼是hash值?

我不知道它的正確名稱,我一向就這麼稱它。hash值是指在URL中跟隨著#的字串。舉個例說,http://www.mywebsite.com/#hashvalue。當你在一個一頁式商務網站中點擊"關於我們"按鈕,URL就會由 http://www.bizsite.com 變成 http://www.bizsite.com/#about. 這個動作指示網站伺服器載入about那一頁的內容。

如何用location.hash?

別催我,我只是在開始前確保你明白所有東西。在我們認真開始前,你需要幾樣東西。第一,一個html編輯器例如Dreamweaver 或 notepad++。當然你可以用windows內置的文件編輯器notepad 或蘋果電腦的wordpad,總之將檔案儲成html即可。第二,你需要置入JQuery函式庫,其實它不是必需的,只是我的一部份程式使用了它。你可以到jquery.com下載JQuery。最後一樣你需要的(最重要)是一些有關html,css,JavaScript的編程經驗。如何你想要一個好樣的網站和明白我的鬼話連篇,這是必須的。
這個教程告訴你如何用location.hash。但我沒有展示如何建立一個完備的網站。如果你想學會如何做一個網站,那你去錯地方了!還有,我所展示的只是我的方法,世上還有其它方法去做到同樣的效果。
備註:這方法能在所有瀏覽器執行,除了iPhone。onHashChange不支援手機版的safari。未來的新iPhone 5 可能得,但現在的尚未可行。如果你在建立一個網頁應用程式,你需要取代onHashChange的程式碼去使iPhone順暢運行。我不懂有關網頁應用程式開發,請恕我無能為力。
準備好了?好,開始吧!
首先,我會做一個帶有hash 值的超連結。寫法如下:<a href="#myhash">這是一個超連結</a>  現在儲存檔案成.html的格式並在瀏覽器中測試。
當你按下連結,唯一會改變的就是URL。很厲害是吧?現在我們去真正的部份,你將會用普通的連結而非hash連結做到同樣效果。

真正使用location.hash

要用location.hash做一個一頁式網站,你首先需要做一個檢查看看網頁有沒有在使用hash值。這有助於當某人將該頁加入成書籤/我的最愛。這個檢查你可以用onLoad 事件或JQuery 的ready event(備妥處理器)。
以下是寫法:
<script src="path/to/your/jquery.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(e){
 if(location.hash){
  var newhash = window.location.hash.substring(1); 
        }else{
              // alert("No hash available.");
        }
});
</script>
這段代碼檢查有沒有hash值在運行中。如果有,我們能改變網頁容成我們想要的內容。如果沒有,可以不執行任何動作或載入主頁。我使用substring除去hash值的hash(#),即#xxx→xxx。如果你需要保留hash(#),你可以刪掉“.substring(1)”。你可以刪去註解前的//,以彈出式視窗盒子測試一下運行的結果,如果你的測試沒有反應,請重新載入網頁和確保代碼正確地輸入。 

解話時間

$(document).ready(…); 指示該段程式在DOM完成後才執行。如果不是這樣設定,程式就會執行得太早。如果你不想用JQuery的方法,可以用以下方法:
document.onLoad = function(){
     // The code in the middle goes here.
}
當然,這是只我的寫法,還有各種寫法。
if(location.hash){…}檢查有沒有hash值。如果有,它就會執行你想要的效果。
var newhash = window.location.hash.substring(1);
這段程式會用一個變數儲存要載入的內容的名稱。

接下來是劫持連結的部分。

劫持連結指停止網頁轉頁(瀏覽器原本的行為)並轉頁到你指定的地方。為什麼?好簡單,如果你想做一個動態一頁式網頁和一些混蛋不使用JavaScript去瀏覽你的網頁。如果使用了hash,URL會改變。同時,我們需要一個靜態網頁給那些關了JavaScript的混蛋。
代碼如下:
$("a").click(function(e){
  e.preventDefault();
  window.location.hash = $(this).attr("href");
 });
以上代碼,預防了連結的瀏覽器預設行為(離開及到目標頁),代碼只會改變hash值。

Now to explain this piece of code:

$(“a”).click(function(e){…}); 指明當連結被點擊,瀏覽器不會跳到原來指定的地方,瀏覽器會留在原來的頁面,繼而改變hash 值。
e.preventDefault();是jQuery的事件,用作防止瀏覽器的預設行為,即點擊連結時的跳頁。
這裡有關 preventDefault.的資料。
window.location.hash = $(this).attr(“href”);透過加上hash值改變了URL,如果URL上已經有hash值,它就會將新的hash值蓋過舊的hash值。
使用onHashChange偵測hash改變,onHashChange是一JavaScript的其中一個事件。在onHashChange事件出現之前,Google是利用iFrames去追蹤hash值的改變。現在則不需用iFrames了。
window.onhashchange = function(){
        // hash changed. Do something cool.
        if(location.hash){
             var hash = location.hash.substring(1);
             // load page
             // alert(hash);
        }else{
             // load home page
             // alert("home");
        }
}
onHashChange事件,你能使用一個function去改變網頁的內容。你能透過hash值去知道去改變的是什麼(就是要載入的頁),也可透過hash值知道當前的頁是那個。   onHashChange不能在iPhones上執行。(iPhones 4未經測試,有興趣請測試一下)

解釋:

window.onHashChange = function(){…} 用作偵測hash的改變,如例子所示,你點擊連結以前進或後退。 if(location.hash){…}檢查有沒有hash值。這是必需的。如果你不加入這代碼,你會得到錯誤的訊息。
這是基本的 location.hash。我沒有完成全部的工作,這裡只展示hash改變和對它反應,其它的,你必需獨自完成。 
完整代碼:

<script src="path/to/your/jquery.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// The following script was created by Dakota Wyatt from Dcoinc.net.
$(document).ready(function(e){
 if(location.hash){
                // We got a hash value! Lets take off the hash and smoke it.
  var newhash = window.location.hash.substring(1);
                // place your code here to change the content.
                // alert(newhash);
                // uncomment the above code to see if it works.
        }else{
               // alert("No hash available.");
              // no hash value
        }
        $("a").click(function(e){
  e.preventDefault();
  window.location.hash = $(this).attr("href");
 });
});
window.onhashchange = function(){
        // hash changed. Do something cool.
        if(location.hash){
             var hash = location.hash.substring(1);
             // load page
             // alert(hash);
        }else{
             // load home page
             // alert("home");
        }
}
</script>
以上程序不能單獨運行,你必需將它和你的網頁結合,如果你想測試它,請解除註解。

我應該在我的網頁用Location.hash嗎?

你應該應用它,但你需要確保那些不使用JavaScript的人能順利看到網頁。why?因為有20%的互聯網使用者是沒有啓用JavaScript引擎。Google,Facebook,Twitter等公司雖然也有用location.hash,但同時支援不使用JavaScript的人。我不知道它們的實際用法,但相信大同小異。 如果你想知道如何改變URL,而不單使用Hash值,那你需要HTML5 pushState,遲點我會補上一個教程。 希望你享受這個教程和學到點東西。我盡量使這教程簡單,遲些,我會做一個測試頁,好讓你們可以看到以上代碼的效果。

2012年2月5日星期日

網頁設計筆記(二十二) Google SEO 筆記

文件

  1. 理想程況下,每一網頁建立獨立的網頁標題。標題內容通常會出現在搜尋結果的第一行,首頁標題可列出網站/公司名稱,其它一些重要資訊。
  2. 中繼標記 Meta Tag,用其內容來產生網頁摘要,每一頁都加入中繼標記,但避免使用同一中繼標記。
  3. 網址優化
  4. 準備404重導向。(.htaccess設定)
  5. 準備兩種sitemap(訪客及搜尋引擎用)
  6. 使用文字連結更能提高網站的可用性
  7. 內容 
    • 撰寫容易閱讀的文字
    • 根據主題編排內容
    • 創作新穎而獨特的內容
    • 為使用者創作內容,而不是為搜尋引擎創作內容
  8. 撰寫更好的錨定文字(超連結)簡明,有意義,非普通文字樣式
  9. 圖片最佳化 "alt"屬性,儲存圖片於單一目錄中,避免使用image1等太過通用的名稱,提供圖片sitemap檔案。
  10. 適當使用標題標記 eg. <h1>,<h3>...
  11. <a> 包括 rel="follow",google 便不會追尋下去( eg.別人的垃圾)
    整頁不追尋下去可用 <meta name="robots" content="nofollow">