Jax 的工作紀錄: 2010-05

2010-05-24 09:09

EclipseColorer 不錯的語法加亮外掛

最近又找到一個不錯的 Plugin 來用
EclipseColorer 支援 150 種語言的語法標記
讓我在用 Eclipse 寫 PL/SQL 的時候至少是彩色的

但除了支援多種語言以外本身沒什麼特色
就像一個有顏色的筆記本
既然已經有詞庫了為什麼沒有語法提示呢？
美中不足暫時堪用一下吧！

線上安裝網址：http://colorer.sf.net/eclipsecolorer/

2010-05-22 23:32

CSS3 圓角

*{

/* Gecko browsers */
-moz-border-radius: 20px; /*all*/
-moz-border-radius: 20px 0; /*TL&BR, TR&BL*/
-moz-border-radius: 20px 0 20px; /*TL, TR&BL, BR*/
-moz-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
-moz-border-radius: 20px/ 10px; /*(X)/ (Y)*/
-moz-border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 0;


/* Webkit browsers */
-webkit-border-radius: 20px; /*all*/
-webkit-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;


/* Konqueror (KDE) */
-khtml-border-radius: 20px; /*all*/
-khtml-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/

-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
-khtml-border-bottom-left-radius: 20px;
-khtml-border-bottom-right-radius: 20px;


/* ??? browsers */
-goog-ms-border-radius: 20px; /*all*/
-goog-ms-border-radius: 20px 0 20px 0;/*TL, TR, BR, BL*/

-goog-ms-border-top-left-radius: 20px;
-goog-ms-border-top-right-radius: 0;
-goog-ms-border-bottom-right-radius: 20px;
-goog-ms-border-bottom-left-radius: 0;


/* W3C syntax */
border-radius: 20px; /*all*/
border-radius: 20px 0; /*TL&BR, TR&BL*/
border-radius: 20px 0 20px; /*TL, TR&BL, BR*/
border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
border-radius: 20px/ 10px; /*(X)/ (Y)*/
border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius:  20px;

}

參考來源：
CSS Backgrounds and Borders Module Level 3
CSS Border Radius :: Richard A. Johnson
border-radius與圓角 - wowbox blog (網頁設計知識庫)

2010-05-22 13:40

CSS 偽類與偽元素

:link: 未被訪問過的連結; IE6, FF3, Safari3, Chrome5, Opera
:visited: 已被訪問過的連結; IE6, FF3, Safari3, Chrome5, Opera
:hover: 滑鼠重疊時(mouse over); IE7, FF3, Safari3, Chrome5, Opera
:active: 元素被按下時(mouse down); IE6, FF3, Safari3, Chrome5, Opera
:focus: 元素被選擇時; IE8, FF3, Safari3, Chrome5, Opera
:first-line: 區塊內的第一行; IE7, FF3, Safari3, Chrome5, Opera
:first-letter: 區塊內的第一個字; IE7, FF3, Safari3, Chrome5, Opera
:first-child: 元素為第一個項目時; IE7, FF3, Safari3, Chrome5, Opera
:last-child: 元素為最後一個項目時; IE9, FF3, Safari3, Chrome5, Opera
:lang: 指定元素中使用的語言; IE6, FF3, Safari3, Chrome5, Opera
:before: 區塊內最前面加入一個虛擬元素; IE8, FF3, Safari3, Chrome5, Opera
:after: 區塊內最後面加入一個虛擬元素; IE8, FF3, Safari3, Chrome5, Opera

參考來源：
CSS Selectors and Pseudo Selectors and browser support
Web Browser CSS Support

2010-05-19 21:56

在 Blogger 加上各種推文按鈕(最終版)

經過多次的修修改改
我想我應該不會再改了
這裡我只提供我目前的程式碼
詳細教學請至在 Blogger 加上各種推文按鈕


/*Social Icon*/
.social{
    background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat;
    /*16*16按鈕的圖片網址*/

    display: -moz-inline-box;
    display: inline-block;
    height:16px;
    margin:0 4px;
    text-indent:-999999px;
    vertical-align:middle;
    width:16px;
    opacity:0.75;
    overflow:hidden;
}
.social:hover{
    opacity:1;
}

a.toFacebook{ background-position: 0 0; }
a.toPlurk{ background-position: 0 -16px; }
a.toTwitter{ background-position: 0 -32px; }
a.toTechnorati{ background-position: 0 -48px; }
a.toDelicious{ background-position: 0 -64px; }
a.toBuzz{ background-position: 0 -80px; }
a.toDigg{ background-position: 0 -96px; }
a.toStumbleUpon{ background-position: 0 -112px; }
a.toDesignFloat{ background-position: 0 -128px; }
a.getAtomRSS{ background-position: 0 -144px; }
a.toReader{ background-position: 0 -160px; }


<div class='post-footer-line post-footer-line-99'><span class='post-social-icons'>
    分享至 &#65306;
    <a class='social toFacebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'>Facebook</a>
    <a class='social toPlurk' expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot;+ data:post.url + &quot; (&quot; + data:post.title + &quot;)&quot;' rel='external nofollow' target='_blank' title='分享至 Plurk'>Plurk</a>
    <a class='social toTwitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot;+ data:post.url' rel='external nofollow' target='_blank' title='分享至 Twitter'>Twitter</a>
    <a class='social toTechnorati' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot; &quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Technorati'>Technorati</a>
    <a class='social toDelicious' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot; &quot; + data:post.title' rel='external nofollow' target='_blank' title='儲存至 Delicious'>Delicious</a>
    <a class='social toDigg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Digg'>Digg</a>  
    <a class='social toStumbleUpon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Stumble Upon'>Stumble Upon</a>
    <a class='social toDesignFloat' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Design Float&quot;'>Design Float</a>
    <a class='social toReader' expr:href='&quot;http://www.google.com/reader/link?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot;+data:blog.homepageUrl' rel='external nofollow' target='_blank' title='分享至 Google Reader'>Google Reader</a>
    <a class='social toBuzz' expr:href='&quot;http://www.google.com/buzz/post?url=&quot;+ data:post.url' rel='external nofollow' target='_blank' title='分享至 Buzz'>Buzz</a>
    <a class='social getAtomRSS' href='/feeds/posts/default' title='訂閱 Atom / RSS' type='application/atom+xml'>Atom / RSS</a>   
</span></div>

圖片來源：

Social Media Network Icons | Komodo Media

2010-05-17 21:38

今天去參加了第二場 Nokia 辦得活動當然要來記錄一下
這一次的講師非常的 funny 分享了很多經驗
而且他的公司名稱也很妙有的放矢行動行銷股份有限公司
為了找他的公司網址無意間找到 Wiki 的解釋有的放矢 - 維基詞典

再來就是其實 Nokia 的手機大部分的硬體配備都不高
並沒有想像中的好，有些 CPU 可能只有 20MHz
可以跑這麼順主要的原因是他有一個優秀 OS (Symbian)
並且可以完全的多工多執行緒(難怪我不小心操一下就沒電了)
有一次開著 Google Map 再來一個全時 GPS 連線
我的 Nokia 6110n 在滿電的情況下只用了半小時就沒電了真是讓我傻眼的說
在沒有備用電源的情況下我現在都不太敢再全時 GPS 連線了

言歸正傳今天的 Workshow 到底再說什麼呢？？
Widget 基本上的架構就如我們大家所熟知的 HTML + CSS + JavaScript + Ajax
但不一樣的是這裡我們可以透過 Platform Services API 去存取手機上的裝置
從 GPS 位址﹑收發簡訊、通訊錄、行事曆等等… 一整個就很快樂
感覺就像在寫 Firefox 的 plugin
而且在 package 時也是用 zip 壓縮
但講師說硬體資源的有限會讓你很不快樂，它只是一台手機並不是一台電腦
以前在學校時寫過 PDA 所以這種切身之痛我非常瞭解
盡可能別在手機上做大量運算，要不然它就 crash 給你看

在實做時我又再一次的見證 Eclipse 的偉大(很好又是我熟悉的 SDK 平台)
上次的 QT 也是有 Eclipse 的 plugin 而這一次的 Widget 也有 plugin
而且有很多一鍵完成的功能(雖然在 Eclipse 上本來就是這樣了)
只是 Eclipse 一直都沒有很好的 Script debug 整合
雖然 Aptana 上的 JavaScript 即時除錯已經很好用了，但卻僅限於 JavaScript
最近拿來寫 ActionScript 也是不錯用，但還是覺得不夠好
可是目前還沒找到其他的替代方案

最後在跟講師換名片時幽默的說也想買一台 Tivo
對於 Tivo 名聲心裡小小高興一下
但忠小晞我對自己的孤陋寡聞也慚愧了一下

下次來寫一個 widget 來玩玩
如果老大可以給點 resource 就更好了

參考資料：
Nokia N97 SDK
Web Runtime Code Examples
Platform Services 2.0 JavaScript API reference
Nokia Platform Services 2.0 Download

PS：
既然參加免費的講習多少為對方打個廣告
Nokia 目前(2010/6/11止)有舉辦創意競賽最高獎金 20 萬
詳情請見：Symbian & Maemo中文資訊站

2010-05-16 14:21

三分鐘瞭解 XSS 攻擊原理

在看完酷壳寫的HTML 安全列表
突然很想寫一篇有關 XSS 的快速教學
讓更多人能瞭解何謂 XSS 安全漏洞

在瞭解 XSS 之前必須知道『網站登入(Session)』的原理

簡單的說當會員成功登入後網站會給瀏覽器一個『令牌』
之後只要拿著這個『令牌』到網站上就會被視為已經登入

再來下面是 XSS 最簡單的流程

簡單的說駭客透過 JavaScript 的程式碼將你的『令牌』偷走
透過這個『令牌』他也可以用你的身份順利登入網站
然後偷走你的相關資料（個人資料＆交易資料）
然後再將這些資料賣給詐騙集團

相關的參考資料：
跨網站指令碼 - 維基百科
Cross-site Scripting (XSS) - OWASP
XSS(Cross Site Scripting)攻擊會讓您遺失Cookie中的資料
詳解XSS攻擊 - 網路攻防戰
HTML5 Security Cheatsheet

2010-05-15 20:14

[ActionScript] 用 LoadVars 讀取 CSV 格式

之前在寫用 LoadVars 讀取外部資訊時就很想直接讀取 CSV 格式的文件
在多次查找說明文件時才發現原來 onLoad 的事件前面還有一層 onData
直接處理 onData 的事件就可以取得檔案的原始資料


1,小明,2010-10-10
2,小王,2010-5-15
3,小白,2010-2-18


/*建立 Vars()*/
loadVars_1 = new LoadVars();

/*載入完成時所執行的程式*/
loadVars_1.onData = function(thedata:String) {
   if (thedata == undefined) {
    trace('資料載入失敗'); return;
   }
  
   /*以換行符號(\n)切割字串*/
   var rows:Array = thedata.split("\n");
   for(i=0; i<rows.length; i++){
    /*以垂直符號(|)切割字串*/
       rows[i]=rows[i].split(",");
   }

   trace(rows);/*顯示載入的資料*/
};

/*開始載入 load_vars.txt*/
loadVars_1.load("load_vars.txt");

參考資料：
Flash CS4 Professional ActionScript 2.0 - LoadVars

2010-05-15 13:05

Blogger 的標題加上 Facebook 官方的推文按鈕

之前協助 Rogan 在他的 Blogger 上加上Facebook 計數推文按鈕
才知到原來沒什麼人寫這樣的文章
今天也為自己的 Blogger 加上推文按鈕
順便寫下教學文

首先先到 Facebook 分享選好需要的樣式
如果要選擇『自訂網址』請再輸入匡填入 data:post.url
所以你會看像這的 HTML 程式碼：


<a name="fb_share" type="button_count" share_url="data:post.url" href="http://www.facebook.com/sharer.php">分享</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

再來要符合 Blogger 樣版語法必須在 share_url 前面加上 expr:
這樣我們才可以使用 data:post.url 這個樣版變數
再來為了讓 UI 有更清楚的標示再加上 title="分享至 Facebook" 這個屬性
最後修改就會像下面這樣：


<a name="fb_share" type="button_count" expr:share_url="data:post.url" href="http://www.facebook.com/sharer.php" title="分享至 Facebook">分享</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

打開『版面配置』→『修改HTML』
將『展開小裝置範本』打勾

找到 <h3 class='post-title entry-title'>及 </h3>
小技巧：所有的瀏覽器都有搜尋功能(Ctrl + F)，只要搜尋 "post-title" 就可以找到這行了
將 <a name="fb_share"... 這行貼在 </h3> 前面

再去搜尋 </body> 這一行
將 <script src="http://static.ak.fb... 貼在 </body> 前面

這時候就可以先預覽如果沒問題就存檔
這時候應該會看起來會像這樣：

下面是其他人寫的教學：
Blogger + facebook分享計數按鈕
如何在Wordpress或Blogger加上【Google Buzz推文分享按鈕】？

2010-05-15 02:12

[Oracle] 基礎 Table Schema 指令


-- 建立資料表
CREATE TABLE table_name(
    column1 NUMBER,
    column2 CHAR,
    column3 VARCHAR2,
    column4 DATE,
    
    -- 主鍵(PRIMARY KEY)
    CONSTRAINT pk_table_name PRIMARY KEY(column1,column2),
    -- 唯一鍵(UNIQUE KEY)
    CONSTRAINT unique_table_name UNIQUE(column1,column2),
    -- 外來鍵(FOREIGN KEY)
    CONSTRAINT fk_table_name_column1
        FOREIGN KEY(column1, column2)
        REFERENCES parent_table(column1, column2)
        [ON DELETE [CASCADE|SET NULL]]
        -- 當參考鍵刪除時，相對應做的處理：
        -- 預設 UPDATE No Action & DELETE No Action
        -- ON DELETE CASCADE： 刪除參考鍵時連同刪除
        -- ON DELETE SET NULL： 刪除參考鍵時將外鍵設為 NULL
);


-- 為資料表標示註釋
COMMENT ON TABLE table_name IS '資料表註釋';

-- 為資料欄位標示註釋
COMMENT ON COLUMN table_name.column1 IS '資料欄位註釋';


-- 附加主鍵(PRIMARY KEY)
ALTER TABLE table_name
ADD CONSTRAINT pk_table_name PRIMARY KEY(column1,column2);


-- 附加唯一鍵(UNIQUE KEY)
ALTER TABLE table_name
ADD CONSTRAINT unique_table_name UNIQUE(column1,column2);


-- 附加外來鍵(FOREIGN KEY)
ALTER TABLE table_name
ADD CONSTRAINT fk_table_name_column1
    FOREIGN KEY(column1, column2)
    REFERENCES parent_table(column1, column2)
    [ON DELETE [CASCADE|SET NULL]];


-- 建立索引(Index)  
CREATE [UNIQUE] INDEX idx_table_name ON table_name(column1, column2);

最近剛剛接觸 Oracle
很多觀念一時轉不過來
雖然 SQL 都大同小異
但就是這些被這些小異搞翻掉

整體架構跟 MySQL 差蠻多
只能說 MySQL 真的很容易上手
而且社群跟文獻都很多
所以要找參考資料比較容易

參考連結：
Oracle Commands
Oracle SQL
Oracle/PLSQL Topics
Oracle 開發筆記
Oracle基本语法集锦
oracel 數據完整性

2010-05-15 01:12

[Oracle] 快速建立使用者


CREATE USER user_name IDENTIFIED BY user_password; -- 建立使用者
GRANT dba TO user_name; -- 授與最大權力

為了這個簡單的指令上 google 找半天
最後還是去請教 MIS 的前輩

2010-05-10 21:02

Nokia Qt平台實作講堂

今天去參加這個活動
在講解人解說 QT 的架構後
想起四年前的專題會議中
『Yuren』曾經分享過這個內容
雖然當時聽聽就過去了
沒想到今天會重新預見

QT 是一種 Base 在 C++ 上的程式架構
感覺像是一個 Framework
特長是跨平台與嵌入式系統
與 Java 不同的是它是以 compile 的方式做到跨平台
雖然這樣感覺還蠻麻煩的
但它的執行效率會比 Java 來得好

QT 在被 Nokia 收購後內容變得更豐富了
而且還有很好用的 SDK 一整個就感覺很快樂
雖然還沒想到要用來做什麼
但先記著吧！

2010-05-03 15:22

[ActionScript] 用 LoadVars 讀取外部資訊


vars=1|小明|2010-10-10
2|小王|2010-5-15
3|小白|2010-2-18


/*建立 Vars()*/
loadVars_1 = new LoadVars();

/*載入完成時所執行的程式*/
loadVars_1.onLoad = function() {
    /*以換行符號(\n)切割字串*/
    var rows = this.vars.split("\n");
    for(i=0; i<rows.length; i++){
     /*以垂直符號(|)切割字串*/
        rows[i]=rows[i].split("|");
    }

    trace(rows);/*顯示載入的資料*/
};

/*開始載入 load_vars.txt*/
loadVars_1.load("load_vars.txt");

參考資料：
Flash CS4 Professional ActionScript 2.0 - LoadVars

2010-05-03 14:40

[ActionScript] 讀取 XML 資料格式

1.資料欄位以子節點方式載入與解析


<!-- load_1.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<xmltest>
  <parentnode>
    <id>1</id>
    <name>小明</name>
    <date>2010-10-10</date>
  </parentnode>
  <parentnode>
    <id>2</id>
    <name>小王</name>
    <date>2010-5-15</date>
  </parentnode>
</xmltest>


/*建立 XML()*/
LoadXml_1 = new XML();

/*捨棄只包含空白字元的文字節點*/
LoadXml_1.ignoreWhite=true;

/*載入完成時所執行的程式*/
LoadXml_1.onLoad = function(){
    articleList = this.firstChild.childNodes;
    var txt = "";
    for (i=0; i<articleList.length; i++) {
        elementList = articleList[i].childNodes;
        for (j=0; j<elementList.length; j++) {
            elementTag = elementList[j];
            switch(elementTag.nodeName){
                case "id":
                    txt += elementTag.firstChild.nodeValue+',';
                    break;
                case "name":
                    txt += elementTag.firstChild.nodeValue+',';
                    break;
                case "date":
                    txt += elementTag.firstChild.nodeValue+',';
                    break;
            }
        }
        txt += '\n';
    }

    trace(txt); /*顯示載入的資料*/
}

/*開始載入 load_1.xml*/
LoadXml_1.load("load_1.xml");

2.資料欄位以屬性方式載入與解析


<!-- load_2.xml -->
<?xml version="1.0" encoding="utf-8"?>
<xmltest>
  <parentnode id="1" name="小明" date="2010-10-10" />
  <parentnode id="2" name="小王" date="2010-5-15" />
</xmltest>


/*建立 XML()*/
LoadXml_2 = new XML();

/*捨棄只包含空白字元的文字節點*/
LoadXml_2.ignoreWhite=true;

/*載入完成時所執行的程式*/
LoadXml_2.onLoad = function(success) {
    var articleList = this.firstChild.childNodes;
    var txt = "";
    for (i=0; i<articleList.length; i++){
        txt += articleList[i].attributes.id+','
                +articleList[i].attributes.name+','
                +articleList[i].attributes.call+','
                +articleList[i].attributes.channel+"\n";
    }
    
    trace(txt);/*顯示載入的資料*/
};

/*開始載入 load_2.xml*/
LoadXml_2.load("load_2.xml");

參考資料：
Flash CS4 Professional ActionScript 2.0 - XML

訂閱：文章 (Atom)

Jax 的工作紀錄