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">