Eucaly61's DIY World: 部落客工具

顯示具有 部落客工具 標籤的文章。顯示所有文章

2009年7月18日星期六

Eucaly61 相片工具箱 3 –- 從 Picasa 大量貼圖到部落格文章

分享最近使用在單車小徑和大樓工程業餘筆記等文章的貼圖方式 -- 從 Picasa 大量貼圖到部落格文章

請先參考前文相片工具箱 2 -- 網路相簿, 上傳, 貼圖, 先了解從 Picasa 相簿的貼圖到部落格的幾種方式, 尤其是 :

Picasa 網路相簿
Fire Uploader 大量上傳
s288, s400, s800 …… 的說明
快速插入 HTML 到 Windows Live Writer

從 Picasa 貼圖到部落格 (方式五) -- 大量貼圖

適用場合 :	限制 :
快速取得大量貼圖 (不用進入個別照片的網頁)	只有幾種照片大小可供選擇必須了解 HTML 語法, 並使用 RegEx (正規表示式) 代換工具

步驟 :

取得 Picasa 相簿網頁的全部 (或其中幾張) 相片的 HTML, (下列方式擇一)
- 選取網頁中的相片, 在 Firefox 按右鍵 => 檢視選取範圍原始碼
- 選取網頁中的相片, 利用 Firebug 取得 HTML
- 直接在相簿 網頁的原始碼 找到相關的 HTML

將 HTML 貼到有『RegEx 代換功能』的編輯器
注意 HTML 區塊是否完整, 例如 <a href="…"> 要有對應的 </a>
用 RegEx (Regular Expression, 正規表示式) 刪除多餘的 HTML 語法, 例如 :

尋找	取代	說明
<div[^>]+>	無內容	刪除全部的 <div …>
</div>	無內容	刪除全部的 </div>
class="[^"]+"	無內容	刪除全部的 class="…"
style="[^"]+"	無內容	刪除全部的 style="…"

(選用) 用 RegEx (正規表示式) 修改 HTML 語法, 例如 :

尋找	取代	說明
<a [^>]+>	無內容	刪除全部的 <a …> ** 選用, 移除『連結』
</a>	無內容	刪除全部的 </a> ** 選用, 移除『連結』
s128 (視 Picasa 實際狀況, 可能是別的值)	s288, s400, s800	** 選用得到不同大小的縮圖
s128/ (視 Picasa 實際狀況, 可能是別的值)	無內容	** 選用刪除 s128/ 得到原圖大小

順利的話, 會得到類似下面的 HTML 內容, 再貼到文章即可

(...繼續閱讀.../...CONTINUE...)

2009年4月23日星期四

HSL 色彩空間的視覺效果

接下來的『相關度』和『標籤雲』都會加上 HSL 的方式來處理顏色。在改版發表之前, 可以到我的『HSL 測試頁』先體驗一下。

一般的作法線性內差得到的『色彩漸層』中間的部分常常是灰色

但是, 在 HSL 色彩空間 得到的卻是彩虹般的『紅橙黃綠藍』

HSL 色彩空間的注意事項

設定的 minColor, maxColor 還是以 RGB 表示的
直接從 .colorHSL = 0, 1, 2 選一個滿意的『視覺效果』就可以了

簡單吧 !!

好奇寶寶分隔線

是的, 使用者只需要以 RGB 來設定顏色, 程式內部會自動換算 RGB 到 HSL,

如果你還是好奇, 希望以下這些『應用面的觀念』可以幫助進一步了解 ……

HSL 和 RGB 色彩空間 (色座標) 有何不同?
HSL 和 RGB 色彩空間為何會影響『視覺效果』?
HSL 色彩空間的其他細節

最後, 才是給程式設計者的參考資料:

HSL 的程式設計參考資料

HSL 和 RGB 色彩空間的不同

RGB 色彩空間

R : Red = 紅色
G : Green = 綠色
B : Blue = 藍色

類似『直角座標』的方式

HSL 色彩空間

H : hue= 色相
S : saturation = 飽和度
L : lightness = 亮度

類似『極座標』的方式

此外, 還有和 HSL 類似的 HSV (色相 hue, 飽和度 saturation, 明度 value), 詳情請看 :

HSL和HSV色彩空間 (維基百科)
三原色光模式 (RGB) (維基百科)
色彩空間 (維基百科)
色彩分析[七]HSL Color space (VB6/VB2008/Server2008 程式部落格)

096_K書

HSL 和 RGB 色彩空間的視覺效果

一般的作法從青色 RGB=#00FFFF 線性內差到 紅色 #FF0000, 得到的『色彩漸層』中間的部分是 灰色 #808080

但是, 在 HSL 色彩空間 得到的卻是彩虹般的『紅橙黃綠藍』

下面的圖示可以幫助理解,

路徑 0 : 一般 RGB 的作法, 兩個顏色的內差路徑常常會經過中間灰色的部份

路徑 1 : HSL 色彩空間, 使用角度來表示 hue (色相), 所以內差路徑會呈現『弧線』或『螺旋線』, 而經過比較多的顏色
路徑 2 : HSL 採用極座標系統, 所以同樣兩個顏色之間的內差路徑可以有兩個方向

路徑 A : 更複雜, 但是可以自訂經過的顏色, 這是之前採用的作法, 詳情請見依相關度排序的『相關文章』的 optionRGB = […]

099_鞭

HSL 色彩空間, 使用角度來表示 hue (色相)

R : Red = 紅色 (0度)
G : Green = 綠色 (120度)
B : Blue = 藍色 (240度)
Y：Yellow ＝黃色 (60度)
C：Cyan ＝青色 /青綠色 (180度)
M：Magenta ＝洋紅色 / 品紅色 (300度)

把對應的 RGB 變化也一起畫出來 (在 HSL 測試頁 可以自己輸入顏色)

0: 傳統 RGB 運算方式	(左圖) 在簡單的線性內差之下, RGB 一起變化, 產生的視覺效果並不理想 (下左, 下圖) 經過 HSL 的換算之後, RGB 依序變化, 就變得非常精彩
1: HSL不跨過0度	2: HSL 經過0度 (紅/紫色)

HSL 色彩空間的其他細節

還有一些細節, 不見得每個人都會遇到, 下面先簡單帶過, 建議到我的『HSL 測試頁』去『實際體驗』一下, 會更有感覺, 或是隨時提出來討論

擔心被搞混的人, 就不一定要往下看囉~~

項目	測試參數
HSL 採用極座標系統, 所以同樣兩個顏色之間的內差路徑可以有兩個方向, 目前的定義是 1: HSL 內差路徑不跨過0度 2: HSL 內差路徑經過0度 (紅/紫色) 0: 傳統 RGB 運算方式	任意兩個顏色, 觀察 0, 1, 2 的不同
紅色 (0度) 附近的紅偏橙 #FFxx00 和紅偏紫 #FF00xx, 可以產生出不一樣的效果	maxColor = (255, 1, 0) 或 (255, 0, 1), 搭配任意的 minColor maxColor = (255, 1, 0), minColor = (255, 0, 1), 或對調
非常接近的灰色 (或黑色), 可以因為 hue (色相) 的不同, 而有不同的效果	任意顏色, 搭配 (33, 32, 32), (32, 33, 32), (32, 32, 33), (33, 33, 32) 或其他不同的灰/黑色

HSL 的程式設計參考資料

之前在處理『相關度』和『標籤雲』的顏色時, 就在思考如何呈現出更理想的『色彩漸層』

當時所使用的方法, 效果雖然還不錯, 但設定上比較麻煩, 也不容易理解。

所以, 除了依相關度排序的『相關文章』功能提到 optionRGB = […] 之外, 並沒有做太多的介紹。

這些程式, 都還沒有使用 HSL 色彩空間來處理顏色

Advanced Label Cloud - 內建『標籤雲』的『標籤文章選台器』 (2008-07)
相關文章點播台 -- RPS 1.0 beta 測試 (2008-07)
依相關度排序 ---- 更有看頭的『相關文章』功能 (2008-07)

後來, 有機會和『標籤文章選台器』的作者 LVCHEN 討論到這方面的問題, 提到或許可以將 色座標改用 HSL (色調，飽和度，亮度）, 又不約而同找到類似的 RGB <=> HSL 轉換程式 ……

現在, 在我的程式裡看到的是『改寫的 RGB <=> HSL 轉換函數』, 產生的 HSL 只適合程式內部使用。如果要用作其他用途, 建議還是參考下面的『原出處』:

RGB to HSL and RGB to HSV color model conversion algorithms in JavaScript

另外, HSL 測試頁 還用到了 JavaScript Vectorgraphics Library 來繪圖

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

(...繼續閱讀.../...CONTINUE...)

2009年4月11日星期六

洋蔥頭的表情符號 ---- 分類整理大集合

花了一點時間, 將『洋蔥頭的表情符號』依照『喜怒哀樂……』分類整理在這一篇,

http://blog.roodo.com/onion_club/

同時『洋蔥酷樂部』還有每個表情符號的的精彩解說哦~~!!

貼圖的 CSS / Style 設定

請注意張貼的網頁是否有 img 的 padding 或 border 等 CSS / Style 設定,
以使『連檔表情』可以無縫接合, 舉例如下 :

部落格原始 CSS	022_撞飛
style="padding: 0pt;"	022_撞飛
style="border: 0pt none ; padding: 0pt;"	022_撞飛

另外, 在 img 加上 width="50" height="50" 可能也會有幫助

或請參考下列 CSS 參考資料

快速學習修改Blogger CSS筆記 (通達人筆記)
Firebug ---- 部落客『玩網頁』的『神器』---- ( CSS 篇 ) (Eucaly61)
觀察 Blogger 版型 CSS 式樣 -- 實例說明 (Eucaly61)

洋蔥頭的表情符號 ---- 分類整理大集合

主菜來囉 , 沒有功勞也有苦勞, 來得掌聲吧!!

喜	020_ bingo	026_ 幸福御守	032_bye	052_ 鬼點子	059_微笑	058_遠目
	061_ 吃太飽	066_Hi	070_ Good Job	072_蔥寶恭喜樣	073_洋蔥妹恭喜樣	086_茶
笑裡藏刀	013_貴婦之笑		016_ 萬年奸臣	044_ 笑裡藏刀	060_ 推眼鏡	099_鞭
樂	035_嘲笑	051_爽	053_XD	054_ 好心情	084_樂奔	089a_噴
	089b_噴	100_加油 (拉拉隊)	101_ 藍藍路	103_ 畢業了	113_帥	114_驕傲
愛	002_ 臉紅紅	007_ 讚美主	008_ 水汪汪	017_ 三八萌	021_ 水草舞	034_ 愛的轟炸
	056_害羞扭扭	087_ 想入非非	104_ 偽可愛	106_ 親一個
欲	067_ 交出來	055_ 完美計畫
怒	004_ 狂暴	030_ 翻桌	041_ 怒火中燒	076_ 打小人	089_指	111_ 一臉肅殺
哀/落寞	009_倒地	015_ Orz銅鈴眼	015_v2 orz	018_ 不要啊 (瓊遙跪求)	024_ 畫圈圈	027_淒涼(落寞)
	033_ 無力感	039_ 跪拜禮	042_高處不勝寒	071_嘆息	074_裝死	075_放空
	080_ 搞自閉	085_壓力	090_ 鼻青臉腫	094_ 烏鴉飛過	107_ 無盡漩渦	108_窮
	109_阿飄	115_ 不行了
惡/哭哭	005_哭哭	006_崩潰	064_ 我不依	068_淚奔
疑	011_無言	019_咦	057_沒什麼嘛
懼	001_驚	001_v2 驚	010_失魂	031_ 印堂黑黑	036_Oh my god	038_jolin
	062_石化	069_ 冷吱吱	077_ 冷汗直流	078_ 被咬了	079_溼	081_ 蔥不聽
	110_怕怕
累/暈	003_昏	014_ 擦擦汗	029_ 漫不經心	045_ 頭暈目眩	083_熱	037_ 打瞌睡
睡/ 放鬆	028_好夢	043_泡澡	095_ 捲心被	098_洗澡
嘔/病	040_感冒	063_吐	082_01 吐血	082_02 吐血
足球	047_ 舉紅牌	048_ 舉黃牌	046_ 衝刺運球	049_射門	050_守門員之魂
其他	023_苦惱的煙狂	025_ 阿彌陀猴	065_ 挖鼻孔	092_催眠	096_K 書	102_ 壞大叔
	105_賊