ITseer - 資訊知識分享 | 程式技術討論: 3月 2012

2012年3月31日

Youtube - 詳細介紹

這部影片中有很詳細的介紹，甚麼是CDN以及為時麼要使用CDN。

投影片下載 :
https://docs.google.com/present/view?id=0AWHocwCRARczZGNmZG53ZmZfMTE4OXd3azdkM2Rk&hl=en_US&pli=1

簡介

Mustache是一個相當著名的模板引擎，所謂的模板引擎就是為了將使用者介面(HTML)與業務邏輯(JS)分離而產生的，它可以生成特定格式的文件，這樣可以讓美術/程式設計師分工處理上更佳的流暢。

今天要介紹的Mustache它提供許多種語言的版本，詳細細節請參考官方網站。


 http://mustache.github.com

今天使用的範例是Mustache在jQuery上提供的插件，所以在說明接下來的範例前，必須先下載下列檔案

jquery.min.js
jquery.mustache.js


http://code.jquery.com/jquery-1.7.2.min.js
https://github.com/janl/mustache.js/blob/master/mustache.js

範例一簡單樣板


// 範例一
var sample1 = "";
sample1 += 'Hello {{name}}';
sample1 += 'You have just won ${{value}}!';

var data1 = {
 name : "Chris",
 value : 10000,
}

var result1 = $.mustache(sample1, data1);

console.log(result1);

輸出


Hello Chris
You have just won $10000!

在mustache中，我們將模板以外的參數使用小鬍子{{}}包住，呼叫mustache時，自動會去獲取對應的物件的key及value值，然後塞入到模板中，這個範例將data1提供的name屬性的值塞入模板的{{name}}裡頭。

範例二 true/false判斷


// 範例二 ture/false 判斷
var sample2 = "";
sample2 += 'Hello {{name}}';
sample2 += 'You have just won ${{value}}!';
sample2 += '{{#in_ca}}';
sample2 += 'Well, ${{taxed_value}}, after taxes.';
sample2 += '{{/in_ca}}';
var data2 = {
 name : "Chris",
 value : 10000,
 taxed_value : 10000 - (10000 * 0.4),
 in_ca : true
}

var result2 = $.mustache(sample2, data2);

console.log(result2);

輸出


Hello Chris
You have just won $10000!
Well, $6000.0, after taxes.

這第二個範例中使用了{{#in_ca}}，這個表示如果in_ca的值為true時就會將{{#in_ca}}content{{/in_ca}}內的模板輸出，相反的若為false將不輸出。所以要判斷true/false使用{{#}}及{{/}}

範例三啟用/禁止Mustache編碼


// 範例三 啟用/禁止Mustache編碼機制
var sample3 = "";
sample3 += '{{name}}';
sample3 += '{{age}}';
sample3 += '{{company}}';
sample3 += '{{{company}}}';
sample3 += '{{&company}}';

var data3 = {
 name : "Chris",
 company : "<b>GitHub</b>"
}

var result3 = $.mustache(sample3, data3);

console.log(result3);

輸出


* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>

在範例三中，我們會發現使用{{}}塞入模板的內容會被編碼，如果要避免被mustache編碼我們的內容時可以使用{{{content}}}，或是使用{{&content}}的方法保持不變。

範例四 Non-Empty List


// 範例四 Non-Empty List
var sample4 = "";
sample4 += '{{#repo}}';
sample4 += '{{name}}';
sample4 += '{{/repo}}';

var data4 = {
  repo: [
    { name: "resque" },
    { name: "hub" },
    { name: "rip" },
  ]
}

var result4 = $.mustache(sample4, data4);

console.log(result4);

輸出


<b>resque</b>
<b>hub</b>
<b>rip</b>

在範例四中，我們使用與true/false相同的寫法來處理陣列的迴圈(mustache會自己判斷)，這個範例我們塞入迴圈的是個物件陣列，所以我們可以在回圈內多使用一層mustache表達式將陣列物件的值取出。

範例五使用Lambda


// 範例五 使用Lambda
// 甚麼是 Lambda? http://stackoverflow.com/questions/16501/what-is-a-lambda-function
var sample5 = "";
sample5 += '{{#wrapped}}';
sample5 += ' {{name}}';
sample5 += '{{/wrapped}}';

var data5 = {
  name: "Willy",
  wrapped: function() {
    return function(text) {
      return "" + text + ""
    }
  }
}

var result5 = $.mustache(sample5, data5);

console.log(result5);

輸出


<b>Willy is awesome.</b>

在範例五中我使用了Lambda function的方式將模板的內容包上(wrap)一層外皮，通常處理包皮這樣的函式稱作Lambda。

範例六 Empty list catch


// 範例六 Empty List Catch
var sample6 = "";
sample6 += '{{#repo}}';
sample6 += '{{name}}';
sample6 += '{{/repo}}';
sample6 += '{{^repo}}';
sample6 += 'No repos :(';
sample6 += '{{/repo}}';

var data6 = {
  repo: [
  ]
}

var result6 = $.mustache(sample6, data6);

console.log(result6);

輸出


No repos :(

範例六中，我們可以針對空的陣列使用不同的模板處理，例如"Sorry,找不到您要的資料，如有相關問題請..."，而不是"搜尋到0筆資料"，捕捉空陣列的方式為{{^}}。

大致上mustache常用的功能介紹到這邊，至於網路上其他很多文章可能會介紹如何在mustache加入許多複雜的功能，筆者認為這並不是模板引擎該處理的事情，這樣會讓模板更加的複雜，所以強烈否定，因為模板引擎的目的就是把業務等複雜邏輯切開而生的呀!

簡介

Pidgin本身就有提供XMPP協議方式讓我們可以使用XMPP聊天協議，但是今天再設定的時候卻遇到了許多的問題，最後解決後正常使用Facebook正常聊天，因此做了這篇筆記，希望對大家有所幫助。

廢話不多說! 直接進入我們今天的旅程

步驟一 : 設定Facebook使用者名稱

要使用XMPP協議聊天，首先必須取得Facebook的使用者名稱，還沒申請的請到此連結設定，這個名稱並不是我們email，所以一定要去申請。

申請網址


https://www.facebook.com/username

申請完畢後，你會發現你的FB個人首頁網址變為
https://www.facebook.com/{username}

步驟二 : 允許Pidgin進行連線

這個步驟也是非常必要的，網路上許多的教學文章都遺漏了這個步驟，所以這此要特別強調。Pidgin就像是其他FB的應用程式一樣，必須與權限給它使用。

進入以下網站，並點擊【Pidgin】


https://www.facebook.com/sitetour/chat.php

接下來Facebook會要求擬進行重新登入帳號
在次進入，這時候會出現XMPP協議的相關訊息，記下這些訊息，因為等等的設定會使用上。


https://www.facebook.com/sitetour/chat.php

步驟三 : Pidgin新增FB帳號

這時候我們就可以一路順暢地進行Facebook帳號設定之路啦!!

1.點擊帳號管理

2.新增帳號

3.選擇XMPP或Facebook(XMPP)

4.輸入Facebook告訴你的資訊

5.勾選SSL/TLS加密

6.開始聊天吧^^

結語

Pidgin是一個非常好用的聊天工具，不僅不帶有任何廣告，最重要的是可以讓我們同時登入多種帳號進行聊天，筆者自己本身就使用Pidgin一個軟體登入了GTalk, Yahoo, MSN以及Facebook呢!

最後希望這篇文章能夠幫助你順利並暢快的設定Facebook帳戶到Pidgin上囉~

2012年3月30日

QT GUI視窗程式關閉的函式

問題：
在QT上，若使用GUI視窗程式開發時，有時會遇到不想使用右(左)上角的叉按鈕
而是另外設定一個Button或別的方是關閉，此時你就會需要用到SIGNAL-SLOT方式

但是對應的SLOT函式是什麼呢? 然後傳入的類別又是什麼呢?　

2012年3月29日

給所有筆者 > Code block 使用方法

http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx

使用方式


filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;                /* Moz + FF */
opacity: 0.5;                     /* 支持CSS3的瀏覽器（FF 1.5也支持）*/

內容程式碼必須經過encode
encode方法，開啟此網站
將程式碼貼上將轉碼部分放入區塊中即可

範例


filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;                /* Moz + FF */
opacity: 0.5;                     /* 支持CSS3的瀏覽器（FF 1.5也支持）*/

2012年3月27日

簡介

有的時候我們需要在網頁頁面上些效果，需要將部分元件設定透明，最常使用的方法就是使用rgba(red, green, blue, alpha)或是opacity的方法去設定，但這式樣在IE中會無法正常地顯示，因此本文提供一個通用的寫法，讓各種瀏覽器都可以支援透明值的設定


filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;                /* Moz + FF */
opacity: 0.5;                     /* 支持CSS3的瀏覽器（FF 1.5也支持）*/

其中IE與Firefox都使用了自己定義的屬性，而標準的屬性是opacity，值可以為小數點，範圍0.0~1.0。

簡介

相信很多的前端工程師喜歡將資料塞到html的標籤裡面，當作屬性的方式存放，這樣子實在很方便，先將資料塞入目標節點在往後需要使用的時候直接呼叫 $('selector').attr('key') 拿取，但這並不是很好的做法，這樣會使得我們的html程式過長過大，降低了SEO中的內容代碼比。

更多SEO細節，可以參考維基百科、網路行銷第一步-SEO。

解決辦法

其實如果需要將某些資料塞入DOM Tree某的節點上，可以不用真正的寫入它的標籤屬性中，jQuery提供了一種解決的辦法，$.data()，這個方法提供了三個參數，我們將下面做說明:

jQuery.data( element, key, value )

element - 必要的參數，這個屬性就是我們要塞入資料的節點。
key - 欲塞入資料的鍵值，往後取得資料使用。
value - 欲塞入的資料，可為任何的資料型態。

透過一些範例來瞭解如何使用吧!

範例一 :


<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    The values stored were 
    <span></span>
    and
    <span></span>
  </div>
<script>var div = $("div")[0];
    jQuery.data(div, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(div, "test").first);
    $("span:last").text(jQuery.data(div, "test").last);</script>

</body>
</html>

輸出 :
The values stored were 16 and pizza!

範例二 : 使用Selector的data


$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;

範例三 : 在非DOM元素中塞入資料(詳解data方法)
其實在JavaScript中每個DOM Tree Element都是一個object，不信 ? 來看看下面的圖片吧

在chrome開發工具中可以看到DOM Element擁有許多的屬性，也就是一個，還可以發現它是一個HTMLElement Object，所以jQuery.data()說穿了就是在某個object上加上了新的值。下面我們使用一個最簡單的例子，大家看完就會一目瞭然囉 !


// Simple object
var myObject = {myProperty : 'myValue'};

// using jQuery append property
$.data(myObject, 'newProperty1', 'newValue1');
$.data(myObject, 'newProperty2', 'newValue2');

最後來看看myObject長甚麼樣子吧

完畢! 關於jQuery data()方法的介紹大致上就到這邊，關於這個方法如果你有更妙的應用請你不吝告知。

參考資料 :
jQuery官方講解

2012年3月25日

簡介

科技日新月異，各式各樣的電子3C產品被開發出來，Web面臨了一個重大個挑戰，那就是如何針對不同的設備來設計我們的網頁。如果是手機跟PC，是得我們可以很明確地拆分兩個版本的網頁來設計，本篇文章主要探討為在相同類型設備中，面對不同size的螢幕必須自動的改變可是的範圍，這邊我們以當前正紅的Friendsheet作為範例 :

2012年3月19日

jQuery mobile 手動建立form元素

jQuery Mobile dynamic form element
(動態載入表單元素)

簡介

jQuery Mobile是jQuery團隊針對移動裝置所開發的一款For Mobile Device Library，其主旨仍然與jQuery不變，即『寫得少、做的多』。

詳細介紹參考 jQueryMoblie

問題

我們時常會使用ajax動態將資料組裝成Html元件並載入頁面，但在jQueryMobile中，每個頁面只會在pagecreate時將html標籤屬性帶有其認知者修改為jQueryMobile的UI元素，這些屬性包含data-role, data-rel等，在已經固定的html頁面中所有元素都會被初始化，但若為ajax後來加入的元素會發生甚麼事情呢?

2012年3月16日

jQuery Scroll Path

jQuery Scroll Path

官方網站https://github.com/JoelBesada/scrollpath

簡介

jQuery Scroll Path是一個jQuery插件，可以用來自定義想要的軌跡(Path)，透過Scroll的方式呈現動態捲動的動畫效果，

Isotope 動態排版

使用Isotope排版

Iostope官方網站http://isotope.metafizzy.co/

2012年3月15日

甚麼是on()，為什麼要改用on()?

在jQuery 1.7改版中，其中一項非常重要的改版就是取消了live()方法，為什麼要取消live方法呢?

這是因為效能上的問題，也許你現在正在使用live做動態DOM Element事件綁定，你若懶得修改，那也不要緊，因為jQuery並沒有強制刪除該方法，但jQuery強烈建議使用新的方法，也就是今天要介紹的on(),off()方法。

就字面上的翻譯，grep可以瞭解為在某文件中逐一尋找某個字詞，在jQuery，grep用來篩選某陣列的內容，該方法會返回一個新的陣列。

怎麼使用grep?

假如我們要在某陣列中列出值大於1000的整數，此時grep方法就可以很輕易的派上用場，如下範例:
var array = [1, 10 ,100, 1000, 10000]; $.grep(array, function(obj){ return (obj > 100); });

更多範例

除了上面簡單的型態的方法，grep還能夠處理更複雜的型態，例如自己定義的object，如下範例:

<script> var objectArray = [ {name : "augus", tel : "123"}, {name : "john", tel : "456"}, {name : "jack", tel : "789"}, ]; var grepArray = $.grep(objectArray, function(obj){ return (obj.name.indexOf("a") != -1); }); console.log(grepArray); </script>

output :

有了grep這樣的方法，往後在處理陣列內容篩選的時候就可以輕易的解決了!!

參考

jQuery-Utils
http://api.jquery.com/jQuery.grep/

Posts by 奧格士(Augus)

Hi,I my name is Augus. I am a author of this blog.I love blogging and I like to share things which I know.
Follow Me On Twitter Or Facebook

2012年3月1日

CSS優化技巧總整理

談CSS優化

使用重置樣式表(reset css)

為瞭解決不同瀏覽器對css渲染方式不同的問題，可以是用重置樣式表來解決。重置樣式來保證瀏覽器渲染的結果是一致的，以下是Yahoo YUI所推薦使用的重置表： http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css

/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html { color: #000; background: #FFF } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0 } table { border-collapse: collapse; border-spacing: 0 } fieldset, img { border: 0 } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal } ol, ul { list-style: none } caption, th { text-align: left } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal } q:before, q:after { content: '' } abbr, acronym { border: 0; font-variant: normal } sup { vertical-align: text-top } sub { vertical-align: text-bottom } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit } input, textarea, select {* font-size: 100% } legend { color: #000 }

這樣的方法讓我們可以保證瀏覽器之間的初始值不同導致的問題，解決許多在css編寫上的困擾。

用類選擇器代替內嵌style程式碼

如果直接在html標籤中直接使用style屬性來賦予css樣式，這樣也許會造成HTML程式碼過多的問題，例如下面範例

<ul> <li style="color:red; font-size:large"> SEO is important issues! </li> <li style="color:red; font-size:large"> SEO is important issues! </li> <li style="color:red; font-size:large"> SEO is important issues! </li> </ul>

如果將這個範例的style屬性拉出撰寫在css中，這樣可以節省更多的html程式碼

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>new_file</title> <meta name="author" content="Augus" /> <style> li.red { color: red; font-size: large; } </style> </head> <body> <ul> <li class="red"> SEO is important issues! </li> <li class="red"> SEO is important issues! </li> <li class="red"> SEO is important issues! </li> </ul> </body>

這樣的好處除了簡化了html複雜度以外，還提高了內容代碼比這個重要的SEO優化的技巧呢！

& 註：

所謂內容代碼比就是實際網頁的內容與網頁程式碼的比值，這會影響搜尋引擎爬蟲程式認定是否為關鍵網站十分重要的議題。

使用後代選擇器

後代選擇器又叫Contextual Selectors，只的是選擇某元件內的DOM元素，適時的使用後代選擇器（不濫用類選擇器）可以節省大量的程式碼量並且也提高了內容代碼比。

<head> <style> li p{ color: red; font-size: large; } </style> </head> <body> <ul> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> </ul> </body>

除了使用後代選擇器之外，也可以使用精細度更高的子選擇器（Children Selector）來選取直接後代，使用方法為div > p。

將含有相同的選擇器合併

CSS中可以將共同宣告的多個選擇器使用逗號的方式合併，這樣優化的技術可以讓更多的選擇器共享同樣的樣式節省了程式碼量。
<head> <style> li p, .myfont{ color: red; font-size: large; } .myfont { text-align: center; } </style> </head> <body> <h2 class=」myfont」>SEO is important issues!</h2> <ul> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> </ul> </body>

將相同選擇器的不同宣告合併

CSS允許相同選擇器而不同宣告合併為一個組，使用逗號分隔，讓多個選擇器可以放入一個宣告中，縱而節省空間
ul { background-color: black; font-size: 1em; } ul { padding: 10px; } ul li { background-color: black; font-size: 1em; } ul li p { font-size: 1em; color: red; }

修改後
ul, ul li, ul li p { background-color: black; font-size: 1em; color: red; }

將相同的樣式合併為共享類

利用繼承來消除重複宣告

Posts by 奧格士(Augus)

Hi,I my name is Augus. I am a author of this blog.I love blogging and I like to share things which I know.
Follow Me On Twitter Or Facebook

訂閱：文章 (Atom)

2012年3月31日

Youtube - 詳細介紹

簡介

範例一 簡單樣板

範例二 true/false判斷

範例三 啟用/禁止Mustache編碼

範例四 Non-Empty List

範例五 使用Lambda

範例六 Empty list catch

簡介

步驟一 : 設定Facebook使用者名稱

步驟二 : 允許Pidgin進行連線

步驟三 : Pidgin新增FB帳號

結語

2012年3月30日

2012年3月29日

2012年3月27日

簡介

簡介

解決辦法

2012年3月25日

簡介

2012年3月19日

簡介

問題

2012年3月16日

簡介

2012年3月15日

甚麼是on()，為什麼要改用on()?

2012年3月1日

ShareThis

範例一簡單樣板

範例三啟用/禁止Mustache編碼

範例五使用Lambda