Jax 的工作紀錄

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

Jax 的工作紀錄

2010-05-24 09:09

[ActionScript] 嵌入 SWF 和影像檔

2010-05-23 17:27