ITseer - 資訊知識分享 | 程式技術討論

2012年3月31日

Pidgin 加入 Facebook方法

Pidgin 上加入 Facebook帳號聊天

簡介

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日

CSS 透明所有瀏覽器通用寫法

CSS 透明個瀏覽器通用解法

簡介

有的時候我們需要在網頁頁面上些效果，需要將部分元件設定透明，最常使用的方法就是使用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。

jQuery data()

jQuery.data()

簡介

相信很多的前端工程師喜歡將資料塞到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日

CSS and jQuery 自動判斷視窗大小改變排版

CSS and jQuery 自動判斷視窗大小改變排版

簡介

科技日新月異，各式各樣的電子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後來加入的元素會發生甚麼事情呢?