2023年11月29日 星期三

DIY : 以 3DP 鐵氟龍管補救上弦枕

2023年11月29日 星期三

前一陣子發現三十多年的古典吉他的上弦枕有裂痕(圖1),難怪彈空弦時老聽到雜音,一開始只有一根弦有這樣的問題,剪了一小片塑膠片墊在上弦枕的凹槽中,雜音就沒了;後來其它弦也有類似的情形,索性以 3D printer 用的鐵氟龍膠帶貼了兩層在弦枕上方,又暫時解決了雜音的問題。不過鐵氟龍膠帶畢竟還是薄,久了就被弦給壓破了。好吧!再發揮一下 DIY 的精神,鐵氟龍膠帶太薄了是不是!那我請出 3D printer 必備的鐵氟龍(PTFE)管,夠滑、夠硬了!

先來看看上弦枕上這明顯的裂痕:

[圖1] 在上弦枕中央有裂痕(半透明的為鐵氟龍管)

鐵氟龍管原來是 3D printer 拿來送塑料用的,

[圖2] 鐵氟龍管與已處理好的上弦枕

切一小段鐵氟龍管,並剪開後盡量攤平,讓它穩穩地蓋住上弦枕。因為鐵氟龍管用力壓是稍可塑形,所以能壓出淺淺的凹糟,凹糟雖淺,還是能固定琴弦。

[圖3] 蓋上鐵氟龍管的上弦枕

簡單的加工一下,又讓我的吉他沒惱人的雜音了。哈哈哈~剩下的雜音就是自己琴弦沒壓好的問題了 XDDD





2023年11月25日 星期六

HTML5 雷達圖產生器

2023年11月25日 星期六

上週江明勳老師提到他找到一個滿不錯的「雷達圖產生器」,但是它無法更改文字的字型大小,也無法由網址帶預設的參數......;前幾天 HTML5 圓面積小教具完成了,就開始在 GitHub 中找有沒有可以參考的程式。GitHub 中用「radar chart」的關鍵字可以找到不少專案,其中 D3.jsChart.js 相關的專案還不少。本來我已經動手用 JavaScript Canvas API 在畫雷達圖,一接觸了 Chart.js,它超強的程式庫,讓我完全不想自己「造輪子」了,直接用 Chart.js 搭配自己的前後端輸入、輸出程序就滿有樣子了,能有網路中眾高手打造的利器可用,真是件幸福的事呢!這個 HTML5 雷達圖產生器截圖如下:

HTML5雷達圖產生器截圖

使用 HTML5 雷達圖產生器

想要體驗一下這個簡易旳雷達圖產器,按一下底下的紅色按鈕,即可開啟工具:


功能簡介

底下簡單地介紹一下HTML5 雷達圖產生器的功能:

  • 可自訂圖例標題、資料向度數、字型大小、曲線張力及雷達圖片的尺寸大小。
  • 可匯出成透明背景的 PNG 圖形檔。
  • 可產生帶有參數設定值的網址,只要使用該網址,即可重現原圖的內容。

相關連結

更新記錄

  • 2023.11.27 支援多類別。
  • 2023.11.25 初版。

×
本程式使用 Chart.js 產生雷達圖
2023.11.25 v0.1 by gsyan

 

2023年11月22日 星期三

HTML5 : 圓面積小教具

2023年11月22日 星期三

 上週朋友問到 HTML5 FUN 的數學小白板有推導圓面積公式的元件可用嗎?

小學高年級數學,會利用圓的切割與拼接活動,察覺圓的面積、平行四邊形與長方形的關係。印象中曾看過類似的數位模擬工具,可以解決手工無法輕易將圓切割到很小份後拼接的問題,找了一下,在 GeoGebra 中的這個,由 Bed Prasad Dhakal 所分享的「Area of Circle」,很接近朋友提出的需求:

第一次接觸 GeoGebra 是2002年在交大上研究所課時的事,早已忘得一乾二淨了。摸索了好幾天,以 HTML5 寫了一個可以獨立運作,用來找出圓面積公式的小工具。

HTML5 圓面積小教具截圖

使用圓面積小教具

想要立即玩玩看,就按一下底下的按鈕來啟動工具:


這個圓的面積小工具簡單的功能介紹如下:

  • 可設定圓的分割數:以拉桿的方式操作,可以將圓等分為 8~120 個扇形(為了簡化程式,總數均為四的倍數)。
  • 按「等分 ? 份」鈕,可以重新將圓等分。
  • 按「展開扇形」鈕,可以將圓的扇形展開為上、下兩個物件;展開後的物件可以拖曳,也可以拉到畫面右下角的「回收區」刪除。
  • 按「全部清除」鈕,可以將展開的物件全部刪除,並依現有的分割設定,產生新的圓。
  • 按「啟用畫筆」鈕,可以在畫面以畫筆塗鴨;按「停用畫筆」則是回到扇形物件的拖曳模式;畫筆可以換顏色,也可以按「清除塗鴨」鈕來清除所有塗鴨內容。

建議可以設定不同的「等分數」,並將扇形展開,以多組拼接的扇形,在同一個畫面來觀察。

影片示範

以下的影片簡單地介紹 HTML5 圓面積小教具的操作:

相關連結

更新記錄

  • 2023.11.27 修正在手機直拿時,物件尺寸過大的問題;修正在 iOS 中換顏色後,畫筆未即時更換顏色的問題;按了工具列非塗鴉相關的按鈕後,會自動關閉畫筆的功能。
  • 2023.11.21 發布。


回收區
  

2023年11月16日 星期四

Life : 掃地掃到外面去

2023年11月16日 星期四

今年第一次在河堤上走 4km ,由景美溪左岸下階梯往堤外便道時,看到滿地的落葉,與整潔的堤頂及往河堤內的階梯相比,實在差太多了。當時有一個疑問,市府應該有請人打掃才對,為什麼往堤內,跟往堤外的階梯會有這樣大的差別待遇?另外,心想,掃地也是一種滿好的運動,其實我可以騎著自行車,「路見不平(心不平),拔『帚』相助!」,不過,也只有閃過那念頭而已,並未實踐。

早上又路過這都是落葉的階梯:

走到河堤上時,看到斜坡有一把掃帚,就這麼「拔帚相助」了!底下這是成果:



由於沒有畚斗,只好將落葉都集中在不會影響行進的角落了。現在看起來不但清爽,走起來也安心。之前雨天時,走在溼滑的落葉上,總覺得弄髒鞋子事小,要是摔一下,那可嚴重了!

雞婆完,坐在河堤上的椅子,頂著弱弱的陽光,涼風拂面;汗水不但浸溼了衣褲,連眼鏡上也滴得都是了:

想想,人還能這樣子勞動著,也是一種幸福呢!




2023年11月9日 星期四

以 Faster Whisper 將影音辨識為文字檔案(字幕或逐字稿)

2023年11月9日 星期四

前言

為了方便製作影片或是音檔的字幕檔、逐字稿文字檔, 2023年2月底,我在 Google Colab 筆記本中,結合了 OpneAI Whisper 及 yt-dlp,搭配 Colab 簡單的網頁界面,可輸入像是影音網址(或是檔案路徑)、Whisper 的語音辨識模型大小、輸出格式......等自訂的參數;設定完參數,按個「執行」鈕,就可以不用管程式的安裝及享用 Colab 提供的 GPU 運算力,輕鬆坐等接收語音辨識的結果 (詳見舊文「雄:使用 OpenAI Whisper 製作影音的字幕或逐字稿」)。

好一陣沒錄教學影片,前幾天為了幫新錄的影片加上字幕,才發現在 Colab 中安裝 OpenAI Whisper 似乎要多花很多倍的時間,以我片長不到五分鐘的影片來說,語音辨識只要幾秒鐘,等待安裝卻要幾分鐘,實在不成比例(註:2023.11.22 再次使用 OpenAI Whisper,安裝時間要很久的問題已不存在,看起來應該是相關套件的版本已跟上,不用樣樣都需要重新編譯,回復到可以順順地使用 OpenAI Whisper的狀態。)。於是開始找是否有更好的方案,找到了 guillaumekln (Guillaume Klein) 的 Faster Whisper 專案:

Faster Whisper 是使用 CTranslate2 的界面加上 OpenAI Whisper 開放出來的模型,可以大幅減少記憶體及其它資源的耗用,又能有 OpenAI Whisper 的輸出結果,這樣是不是很讚!

經過這幾天的實測,至少安裝程序等候的時間是少很多~很多~很多~~,輸出的內容又和 OpenAI Whisper 的結果差不多,真的是小而美。要說缺點的話,大概是因為它目前沒有提供直接輸出成字幕格式的檔案,不過,這算是小事,只要用其它的套件,多寫幾行程式碼來補足功能,轉換一下輸出格式就好了,哈!相關程序我都在底下放在 Colab 中的工具處理好了。

工具網址

整合在 Colab 中的「Faster-Whisper-語音辨識-輸出文字檔」工具,放在這個短網址中,開啟後就能使用:

使用方法

先開啟工具的網址,進入頁面,往下捲,在說的的下方,應該會有如 [圖一] 的輸入區:

[圖1] Faster Whisper 的操作程序

1.上載檔案:如果想上載電腦中的影片或是音檔,就按 [圖1] 箭頭1所指的 [檔案] 圖示,就可以將要進行語音辨識的影音檔案上載。上載完的檔案或是使用 Google 雲端硬碟的檔案,如何複製檔案的路徑,請自行參考「操作示範影片」中的示範。

2.在「url」中填入影音的來源:

  • 存放在網路的「公開」影音,就貼入網址,YouTube(影片或是播放清單)、FB、雲端硬碟、Vocaroo......等的「公開分享」網址。
  • 在放在電腦中的檔案則需要先上載到 Colab 中,然後再「複製路徑」,將檔案的路徑貼到「url」的欄位中。
  • 如果想批次進行語音辨識,則是將前述的網址,通通先貼到一個文字檔(檔名 xxx.txt),一行一個網址或是路徑,儲存後,再將文字檔上載到 Colab 中,最後再「複製路徑」,將檔案的路徑貼到「url」的欄位中;這樣子,程式會依照文字檔的內容,一行行的進行語音辨識。
3.執行程式:填完「url」的欄位後,可以再看看底下的一些選項有沒有要更改的,確定沒問題,要開始執行語音辨了,就按 [圖1] 綠色箭頭所指的執行圖示。接著就等程式自動安裝及執行語音辨識的程序完成。

詳細的過程請參考底下的操作示範影片。

操作示範影片

底下的影片中介紹如何將影音檔案上載到 Colab 或是利用雲端硬碟中的影片來辨識為文字檔:

相關連結


    2023年10月20日 星期五

    HTML5 : 筆順練習第三版(2019版)習寫筆跡存為圖片

    2023年10月20日 星期五

     HTML5 FUN 筆順練習第三版(2019版)的字練習過後,可以重播習寫的筆跡動畫,如果將筆跡資料匯出為檔案後,還可以在日後匯入重播,習寫結果匯出與匯入詳細的說明可以參考這篇「雄 : HTML5 : 筆順練習第三版(2019版)習寫結果匯出與匯入」。

    八月中在水里國小,有老師問到可以將筆跡資料直接變成 GIF 動畫嗎?哈!這個功能我也曾想做,但是要動到滿底層的技術,只能再研究了。不過,我先讓「匯出習寫結果」多一個功能,可以將所有習寫過的字,手寫筆跡匯出一張圖片,就像底下 [圖1] 這樣:

    [圖1] 匯出的習寫筆跡圖片

    跟播放習寫動畫一樣,黑色的筆跡是正確的,紅色的筆跡則是寫錯的,如果練習多次,只會記錄最後一次正確的。

    要怎樣將習寫筆跡圖匯出呢?

    [圖2] 匯出習寫結果的選單

    如 [圖2] 的紅色箭頭所示,先按「匯出習寫結果」的圖示,出現選單以後,再按「下載筆跡為圖片」,即可將筆跡匯出為 PNG 圖片檔。

    如果是在 iPad 上操作可能還要再依個人需要,選擇儲存的方式與位置

    [方法一] iPad 中,是由主畫面啟動筆順練習的,是這樣儲存習寫筆跡圖:

    [圖3] iPad 中以「分享」的選單來儲存圖片

    [圖4] iPad 中儲存圖片

    [方法二] iPad 中,由 Safari 瀏覽器中執行筆順練習的,則是將圖片儲存到「下載」:

    [圖5] 用 Safari 的「下載」儲存圖片

    [圖6] 在「下載」中找儲存好的筆跡圖

    如果是直接使用瀏覽器開啟筆順練習工具的,應該就是到「下載」的資料夾中找儲存好的圖片即可;反正按「下載」或是「儲存」鈕時,務必看一下、記一下檔案儲存到哪裡去,就對了。

    以上是簡單地介紹筆順練習第三版(2019版)習寫筆跡儲存為圖片檔案的方法,使用上如果有任何問題,歡迎在底下留言反應。

    示範影片

    底下的影片示範如何在電腦中操作,將習寫筆跡儲存為圖片:

    相關連結






    2023年10月5日 星期四

    有說有笑(效):HTML5 我說你猜教學應用

    2023年10月5日 星期四

    2023年8月15日和16日應邀去南投縣水里國小,上了兩場 HTML5 FUN 的研習,個人除了是講座,也當了短暫的路人甲觀課。分享到「我說你猜」時,是由好友江明勳老師帶領大家體會什麼是「有效」的教學,讓我以第三者的角度觀察到遊戲不但要好玩、有趣以外,還要思考如何達到教學目標,讓整個教學活動是「有效的教學」,著實收穫不少。底下簡單地記錄一下這個應用「我說你猜」的教學活動如何進行。

    如何玩?

    活動開始,先簡單地介紹「我說你猜」的遊戲界面,及在平板上如何使用裝置感應方向的功能來控制「下一題」與「跳過」兩個動作指令:

    • 回答問題時,平板要舉在頭頂,讓它「直立」(復位的姿態)。
    • 遊戲開始或是答對了,就「鞠躬」後復位,謝謝大家!(平板向前傾時是「開始」或是「下一題」)。
    • 猜錯答案或是想跳過該題時,就「向後仰」後復位(平板向後傾時是「跳過」)。
    [圖1] 我說你猜的起始畫面

    [圖2] 我說你猜正確的畫面

    [圖3] 我說你猜跳過的畫面

    玩法一:大家一起玩

    請一位學員出來拿平板,並負責猜謎題;其它學員負責依答案內容說出提示(或是表演動作),但不能講到答案的任何一個字;如果猜的人答對,就跟他說「答對」,猜錯了,跟他說「答錯」,拿平板的人,依對錯讓平板做「動作」。

    經過大家七嘴八舌、比手畫腳,結束一輪好玩、有趣的遊戲。

    玩法二:分組輪流玩

    明勳老師介紹「我說你猜」的「預覽題目」功能,啟用該功能(圖4),即以在畫面上,一次顯示所有的答案(圖6),並讓學生在限定的時間內進行討論,討論要如何提示,讓猜的人能夠在最短的時間內猜出答案。「我說你猜」可以設定討論時間,時間終了會有警示訊息及音效。我們可以將學生分組,然後各組輪流到台前,請一個人猜,其他人負責提示,老師則將各組最後的得分記錄在黑板上,最後來比較各組的得分情形。

    [圖4] 我說你猜設定畫面

    另外也介紹了「我說你猜」可以在電腦上玩,並以鍵盤的右方向鍵來控制「下一題」,以左方向鍵控制「跳過」的功能;減低老師擔心平板在玩的時候,掉到地板而損壞的壓力。

    最後明勳老師將學員依電腦教室電腦上的編號來分組,將學員分為四組;電腦編號除以四,餘數1者為第一組,餘數2者為第二組,餘數3者為第三組,整除者為第四組。

    各組先到指定的位置集合,然後老師在「我說你猜」右下角設定要「預覽題目」(圖4),選定畫面中央遊戲時間 60 秒,題目選單中則選擇「節慶」(圖5),揭示題目後,按「舉牌小人」圖示上方的5(圖6),設定討論時間五分鐘。接著各組就開始進行討論。


    [圖5] 我說你猜題庫選單

    [圖6] 我說你猜預覽題目的畫面

    討論時間結束後,先請第一組派一個人負責扮演老師的角色,以兩根手指放在電腦鍵盤的左右方向鍵上,控制「下一題」及「跳過」(答對時按右鍵,答錯時按左鍵);另一人負責猜題,站在台前,面向大家(背對螢幕);其它人則負責提示。

    [圖7] 我說你猜等待遊戲開始的畫面

    [圖8] 我說你猜遊戲開始

    [圖9] 我說你猜題目卡片

    就這樣開始了一組玩「我說你猜」,其它各組「看戲」的活動。

    [圖10] 我說你猜遊戲結束的畫面

    每一組結束,明勳老師示範講評與在黑板記分的「技巧」。凡是違反遊戲規則者(例如:說出答案的某個字......),當然只能扣分;哈!所謂的「技巧」就是有時可以利用該組的特殊表現而給予加分,並盡量讓各組能「同分」。

    有笑?有效?

    在有說有笑的「全體一起玩」、「分組輸流玩」,兩種遊戲模式的體驗活動以後,明勳老師問大家:

    剛剛玩遊戲時,老師做什麼事?

    老師只要在電腦用兩根手指按左右方向鍵,跟在黑板記分。

    這樣子,老師是不是可以比較輕鬆一點?


    大家覺得這個遊戲好不好玩?

    大家異口同聲的回答:「好玩!」。

    有沒有「效」?

    「有『笑』」、「哈哈哈~好笑」......兩場研習中總會有人會說出這樣的回應。

    明勳老師會回應並追問:

    是的,好笑,好好笑,那有沒有「教學效果」呢?

    有沒有「效」在分組輪流玩的過程中,學員有深刻的體驗,也自然地驗證了教學成效,

    • 當別組在台前玩時,你在做什麼?
    • 會不會跟著思考答案?
    • 會不會想「唉呀!這樣、那樣......就可以了啊!」?
    • 會不會想,等一下輪到我們時,可以怎麼提示?

    我們進行分組討論與報告時,經常是,台上的人報告,其他人變成路人甲乙丙丁......,甚至根本已經不知神遊到何處去了,學生也是類似的狀況。玩「我說你猜」時,絕大部份的人都盯著畫面中的謎題,情緒激昂地跟著動腦,跟著歡呼,跟著哀聲惋惜.....。這樣「有趣、有效」的課堂才是每個老師期待的情景與氛圍。

    如果您也想玩一玩「HTML5 我說你猜」,可以參考底下的相關連結。

    相關連結


    2023年9月8日 星期五

    HTML5 FUN : 數學小白板時鐘元件

    2023年9月8日 星期五

    來囉~ HTML5 FUN 數學小白板的時鐘元件來囉~可以讓它自己走,也可以使用手動模式來自己拖曳指針。

    底下整理一下它的功能選單:

    • 變大、變小:改變時間的尺寸。
    • 秒針顯示、秒針隱藏:可以用來控制是否顯示秒針。不顯時秒針時,會將它固定在12的位置後隱藏,這樣子就能讓分針可以對準刻度上的格子。(2023.10.15有異動)
    • 數字顯示切換:每按一次會讓刻度上的數字有以下的改變(循環切換)
      • 內圈加 13~24 的數字(與時針同色),供 24 小時制的對照。
      • 內圈加 0 ~55 每大格增加 5 的數字(與分針同時),供分鐘與秒鐘對照。
      • 清空所有數字。
      • 只有數字 1~12。
    • 24小時制:顯示24小時制的數字鐘。(2023.10.15有異動)
    • 12小時制:顯示12小時制的數字鐘。(2023.10.15有異動)
    • 穩藏數字鐘
    • 自動:讓時鐘可以持續更新為現在的時間。
    • 手動:指針需拖曳才會動。
    • 對時:抓取現在的時間。
    • 複製:製作一個目前時鐘的副本。

    指針對應到刻度上都有一個同色的小方塊,它除了是一個「指示器」可以更清楚地顯示指針所在的刻度外,如果拖曳「指示器」,可以用與指針同色的扇形,及虛線箭頭標示出經過的時間。如果直接拖曳指針(不要在指示器上),就可以取消現有的經過時間標示。

    更新補充(2023.10.15)

    功能選單有以下的異動:

    • 「24小時制」、「12小時制」兩個按鈕合併為「12/24小時制」,以一個按鈕來切換。
    • 「秒針顯示」、「秒針隱藏」兩個按鈕合併為「秒針開/關」。並新增「分針開/關」「時針開/關」兩個按鈕;所以能用這三個按鈕來控制三根指針的顯示與否。
    操作的新功能:
    • 當三根指針只剩一根時,拖曳指外側端點「指示器」時,旋轉角會有箭頭;拖曳指針則只有虛線的圓弧,無箭頭
    • 當指針只剩時針時,盤面上的刻度會只剩下12大格,拖曳的角度會鎖定在這12格刻度上。
    • 分享時鍾時,已可以匯出指針是否隱藏,及旋轉角的設定;開啟分享的網址時,亦可正常重現。

    示範影片

    底下是數學小白板時鐘元件的操作影片:

    章節的清單如下,按時間可以直接跳到該章節:

    00:00 新增時鐘元件及基本操作

    00:48 功能選單介紹

    01:00 秒針及刻度顯示設定

    01:31 數字鐘的顯示與隱藏

    02:11 複製時鐘

    02:25 標示經過的時間

    03:13 利用五格板放多個時鐘提問


    相關連結


    2023年9月4日 星期一

    JavaScript : html2canvas 的擷圖參數測試

    2023年9月4日 星期一

    前一陣子因為想幫「HTML5 FUN 數學小白板」加上匯出成圖片的功能,找到了一個名為「html2canvas」的工具,試了一下,滿強的一個工具,利用 JavaScript 將網頁中,指定的元件整個分析後,輸出成 cavas,我只要加上轉成 PNG 圖片的程式,就完全符合我的需求;於是決定花一點時間研究 html2canvas 就好,不用花很多時間從最底層研究起。

    html2canvas 可以在這個網址中找到:

    在沒有加任何選項的情形下,用著,用著,發現幾個問題:

    1. 如果帶有圖片(非使用 DataURL)時, 在本機無法順利匯出,最後要將 canvas 使用 dataURL() 轉為 base64 編碼的資料時,會出現類似這樣的錯誤訊息「DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.」。
    2. 因為「HTML5 FUN數學小白板」的圖片是放在 GitHub 中,而程式是在 Google Blogger 中執行,會有「跨域」存取圖片的問題(CORS),所以原有的圖片空白一片。
    3. 如何讓 html2canvas 自動跳過某些地方不輸出?
    4. 「HTML5 FUN數學小白板」中的骰子元件,只有六點可以輸出成圖片,其它點數在輸出結果中,都只有空白一片。

    第一個問題應該只有我會遇到,因為數學小白板都放在網路中執行,不會有本機存取圖片的問題。以前是一不做二不休,直接將要用的圖片通通轉成 Base64URI 的格式 ,就能避掉 Tainted 的問題,在考慮要不要將數學小白板的16張圖捨圖檔,直接轉資料。

    第二個「跨域」CORS 的問題,因為 GitHub 並沒有禁止跨域存取,所以只要在 html2canvas 中啟用「useCORS」的選項,將它設為 true 即可解決;後面的測試中,可以比較一下,有勾選「useCORS」,跟沒勾選,擷取的結果中,沒有小狗的圖案就知道該選項的效果。

    第三個問題,如何跳過某些地方不輸出?html2canvas 的說明中有提到,我們可以將不想要放在輸出(擷取)結果中的物件,加上名為「data-html2canvas-ignore」的屬性,這樣子,它就會自動跳過該內容。底下的測試中,可以用勾不勾選「包含圖片上方的標題」來控制要不要出現在小狗上方那行「html2canvas 網頁擷(戳)圖測試」的標題字。

    第四個骰子元件空白一片的問題,html2canvas 的功能說明中有提到「transform (Limited support)」,而骰子的動畫及結果呈現,正是使用 transform 所製造的效果。空白的部份可以使用選項設定「"foreignObjectRendering": true」,但它並沒有正確地顯示內容。沒關係,山不轉,路轉,路不轉,人轉;修改了骰子的程式,在擲骰子的動畫播畢,將原有的內容變完全透明,然後再加一張最後結果的點數圖片,完全地過渡,畫面有顯示,使用 html2canvas 匯出的結果也看得到骰子(不完美的大概是位置稍偏右下方一點點)。

    來玩一下,並比較不同選項,輸出結果的不同吧!

    html2canvas 網頁擷(戳)圖測試

    啟用選項

    allowTaint    useCORS
    由第1層開始擷取(含橙色邊框)
    由第2層開始擷取(不含橙色框)
    擷取整個網頁的內容
    包含圖片上方的標題

    請設定選項後按 [下載擷(戳)圖]

    圖片來源

    相關連結


     
    雄::gsyan © 2009. Design by Pocket