發現在 Octopress 似乎沒有現成可以放在 sidebar 的分類，於是便自己動手刻一個，順便練一下手感。程式碼短短的，使用方法也很容易，首先你可以按下面程式碼區塊右上角的 download，並將檔案存在 Octopress 的 plugins 資料夾：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

# encoding: utf-8
module Jekyll

  class Site

    def create_category_list
      write_to_tag_cloud if @config['category_tag_cloud']
      write_to_sidebar if @config['category_sidebar']
    end

    private
    # generate category tag list and write to 'source/_includes/asides/categories_tag.html'
    def write_to_tag_cloud
      puts ' => Creating Categories Tag Cloud'
      lists = {}
      max, min = 1, 1
      @categories.keys.sort_by{ |str| str.downcase }.each do |category|
        count = @categories[category].count
        lists[category] = count
        max = count if count > max
      end

      html = ''
      lists.each do | category, counter |
        url = get_category_url category
        style = "font-size: #{100 + (60 * Float(counter)/max)}%"
        if @config['category_counter']
          html << " <a href='#{url}' style='#{style}'>#{category.capitalize}(#{@categories[category].count})</a> "
        else
          html << " <a href='#{url}' style='#{style}'>#{category.capitalize}</a> "
        end
      end

      File.open(File.join(@source, '_includes/asides/categories_tag.html'), 'w') do |file|
        file << """{% if site.category_tag_cloud %}
<section>
<h1>#{@config['category_title'] || 'Categories'}</h1>
<span class='categories_tag'>#{html}</span>
</section>
{% endif %}
"""
      end
    end

    # generate category lists and write to 'source/_includes/asides/categories_sidebar.html'
    def write_to_sidebar
      puts ' => Creating Categories Sidebar'
      html = "<ul>\n"
      # case insensitive sorting
      @categories.keys.sort_by{ |str| str.downcase }.each do |category|
        url = get_category_url category
        if @config['category_counter']
          html << "  <li><a href='#{url}'>#{category.capitalize} (#{@categories[category].count})</a></li>\n"
        else
          html << "  <li><a href='#{url}'>#{category.capitalize}</a></li>\n"
        end
      end
      html << "</ul>"
      File.open(File.join(@source, '_includes/asides/categories_sidebar.html'), 'w') do |file|
        file << """{% if site.category_sidebar %}
<section>
<h1>#{@config['category_title'] || 'Categories'}</h1>
#{html}
</section>
{% endif %}
"""
      end
    end

    def get_category_url(category)
      dir = @config['category_dir'] || 'categories'
      File.join @config['root'], dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase
    end
  end

  class CategoryList < Generator
    safe true
    priority :low

    def generate(site)
      if site.config['category_list']
        puts "## Generating Categories.."
        site.create_category_list
      end
    end
  end

end

程式碼寫得有點髒，應該有更漂亮的寫法 :)

再來，請打開根目錄的_config.yml，加上一些設定：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# ----------------------- #
#    Categories           #
# ----------------------- #
# create categories page
category_list: true
# use counter after categories
category_counter: true
# category title
category_title: 分類
# create an include categories list in @source/_includes/asides/categories_sidebar.html
# and don't forget to add 'asides/categories_sidebar.html' into @default_asides if you want to enable it.
category_sidebar: true
# create an include categories tag cloud page in @source/_includes/asides/categories_tag.html
# and don't forget to add 'asides/categories_tag.html' to @default_asides if you want to enable it.
category_tag_cloud: true

其中，category_list就是用來啟用是否產生側類分類的；category_counter就是用來決定要不要秀出計數器，category_title是那個區塊的標題，category_sidebar跟category_tag_cloud打開的話，則各會產生兩個用來include的檔案。category_sidebar的效果就是一個一個的排下來，但如果你的文章分類很多可能會讓頁面拉很長，如果不喜歡，也可以改用category_tag_cloud的呈現效果。

產生完檔案還不夠，你還需要在_config.yml加一下你要include的區塊，以下是我自己的設定，請依個人需要修改：

1

default_asides: [asides/about.html, asides/recent_posts.html, asides/categories_tag.html, asides/googleplus.html, asides/plurk.html, asides/recent_comments.html, asides/twitter.html, asides/links.html, asides/advertise.html]

最後，重新rake generate之後應該就可以看到成果了，就如同你現在正在看的這篇文章的右手邊分類一樣的效果。

為了tag cloud看起來不會太擠，你可能會需要用CSS來調整一下line-height。

不確定這樣做是不是最好的做法，而且有些程式碼我還是硬寫在Ruby裡的，如果有更好的做法還請不吝告知 :)

2012/4/21 update: 課程將改為以screencast方式進行

話說在2007年的時候，我曾經很自以為是的辦過一次Flash/AS課程，那時候用的還是AS2.0，來參加的朋友大概五、六位，地點一開始很克難的選在師大附近某家可以上網的簡餐店(後來才移往我自己公司裡上課)；2009年的年中有再辦過第二梯次，這次用的是AS3.0，地點則是商請某個同行友人幫忙借用他們公司大樓的會議室跟投影設備，這回環境比較好一些，參與人數比較多一點，記得最多有將近快10位朋友來參加。

這兩階梯次都是針對沒學過AS程式的朋友從頭講起的，沒有收費用。

沒意外的話，農曆年完之後再來個第三梯次，用的當然也是AS3.0，同樣也是不會收費用的(視場地規定，也許會有低消或場地費)，屆時再歡迎有興趣想學AS3，但卻不知道從何開始的朋友參加。

也許各位最近聽說"Flash快不行了，HTML5才是王道"之類的話，以我看來，Flash並沒有不行，目前大部份的web game都還是用Flash開發的，而且Flash現在還有AIR可以用，能做的事情幾乎跟一般native的應用程式差不多；更何況HTML5也還不是王道，它連標準都還沒定，而且還有最可怕的各家瀏覽器支援問題..雖然我自己也開始在練HTML5 + JavaScript的手感，但這跟Flash行不行無關，純屬個人興趣。

跟現在的AS讀書會有什麼不同?

AS讀書會目前是演講形式，我相信很多在讀書會聽完，大家只是聽一聽，回家很快就會忘光光，所以如果開課的話，我會要求大家想辦法帶電腦過來現場實作。因為是小班制，所以有問題馬上可以大家一起討論。

沒有什麼不可抗力的事情發生的話，上課頻率大概會是每週一次(可能會是在每週六的下午)，每次約2~3小時，全部上完大概一、二個月，所以如果沒把握能一週固定空出2~3小時的朋友就請把機會讓給別人囉。另外，我會準備每次上課的大綱，讓大家可以在現場練習，還可以帶回家複習。

對象

有心想學ActionScript 3.0但不知道從哪邊開始的人，至於想學動畫或設計的話我就幫不上忙了，那不是我的專長 :)

內容

從最簡單的基礎(變數、迴圈、function到OOP)，到套用好用的library/framework，可以實際做個小案子出來。

人數

大概10~15人

地點

應該會在台北市某個靠近捷運、有投影設備、麥克風，而且可以上網的地方(未定，如果有朋友可以推薦就更好了)。

會有錄影嗎?

不會 :)

費用

最多就是場地費吧 (當然如果有人要付我錢，我會很樂意收下的)

什麼時候報名?

應該農曆年過後一、二個月 :)

[2012.2.22 update] 最近不少朋友在問這個還有沒有要繼續，放心，當然有，目前正在編寫教材中。不過因為最近小的手邊的專案正在趕，所以可能進度會慢一些，預計應該可以在三月份開始(希望)。

真的這麼佛心? 有何目的?

當然有目的，我的目的很明顯也不怕大家知道：

• 複習我的AS3，程式很久沒寫會忘記
• 練習講話!!

我並沒有打算也沒那個本事要跟電腦補習班搶生意，我只是單純的因為我自己不是資訊相關科系畢業，在自學AS的路上吃過不少苦頭，也知道很多設計師在面臨程式碼的時候的痛苦，希望藉由我的一些經驗分享，讓大家少踩一些雷。

但修行最終還是得靠個人，千萬不要相信來了之後回去就會變強。之前有來參加過的朋友，有的已經在同行業界有不錯的成績，但也有的到現在還是什麼都不會。

屆時歡迎有興趣的朋友來參加，不過抱著只想來看看的心態的朋友就不歡迎了 :)

書名：slide:ology中文版
視覺溝通：讓簡報與聽眾形成一種對話

還好是中文版，不然我不知道要看多久才看得完。看完後覺得這真是本不錯的書，提出了許多實戰時候應該注意的"Do"跟"Do Not"，爾後再上台做簡報的時候可以用得上 :)

書摘

• “不知道為什麼當簡報軟體加進來時，我們便喪失說出好故事的能力” - 前言
• “我們天生就是視覺溝通者。想想幼稚園：我們的表達方式由蠟筆、黏土推動，不是文字處理機或試算表” - p.2
• “有些人就是不瞭解，簡報可以多麼有力和感人” - p.4
• “如果一張投影片超過75個字，就變成一份文件；如果在50字左右，就是大字報” - p.7
• “真正的簡報焦點應該放在簡報者，以及他們想要傳達的理念和概念” - p.7
• “聽眾不是閱讀你的投影片，就是聽你說話。他們不會同時做兩件事。所以，問問你自己：重要的是讓他們聆聽，還是讓他們閱讀比較有效?” - p.7
• “聽眾並不是來看你，他們是來看你能為他們做什麼” - p.15
• “簡報並不只是關於美學或把東西做得漂亮，而是關於創造意義” - p.18
• “簡報軟體這種工具，從來就不是設計來腦力激盪或繪圖” - p.26
• “精彩的簡報應該超越語言、地理、文化的界線。真理就是真理” - p.37
• “資料投影片要談的不是資料，而是資料的意義” - p.64
• “要有效傳達你的資料，就必須闡述你希望聽眾採取的結論” - p.68
• “投影片的目的不在於顯示所有的資料，而是傳達結論和見解” - p.72
• “使用未加工處理的真實圖像，將會提高聽眾的參與動機” - p.78
• “身為簡報者，想要成功，就必須像個設計師一樣思考” - p.83
• “把所有東西放在一張投影片上，是簡報者的懶惰” - p.93
• “沒有對比，你就死定了” - p.95
• “使用有人物的圖片時，要確認人看著內容，而非轉過頭或逃離內容” - p.97
• “如果連續三張投影片都有圖表，它們的軸線應該要一致，即使資料有所不同” - p.100
• “留白不一定是白色的” - p.106
• “保有淨空間是好事 – 擁擠代表設計的失敗” - p.106
• “將元素分散到多張投影片，每張投影片都獲得應有的注意力，聽眾也因能更好的理解概念而受益” - p.107
• “聽你演說的人，很可能早就知道你替哪家公司工作。在第一張和最後一張投影片指明自己或公司即可” - p.117
• “背景是平面、舞台、布景幕 – 不是主要焦點” - p.125
• “每個字形都有自己的個性” - p.142
• “每場簡報最好只結合兩種字型，一種用在大標和副標，另一種用於正文” - p.143
• “如果你計畫使用大型文字，或將之與圖像結合，請花時間排版文字” - p.146
• “進入投影片瀏覽模式，觀看66%大小的投影片。如果你還能看到，你的聽眾也可以” - p.152
• “照片應該要能組成有凝聚力的系統，彷彿是同一位投影師所拍下的作品” - p.160
• “在視覺資訊出場的那一瞬間，觀看者就會閱讀並處理資訊” - p.183
• “隱藏元素，直到提到時才讓它們出現” - p.183
• “不再將投影片當成枴杖，是個漫長的過程，需要時間、耐心、練習” - p.220
• “簡報者面臨最大的問題，可能在於沒有花時間預演” - p.220
• “放手的三R原則：刪減(Reduce)、錄音(Record)、重複(Repeat)” - p.221
• “想一想，如果斷電，你的簡報會發生什麼事” - p.230
• “單因為你的投影片看起來棒呆了，並不代表這些投影片能傳達有用的意義” - p.233
• “一旦聽眾發現你在讀文字，他們就會比你更早讀那些文字。結果就是：你跟聽眾不再同步” - p.234
• “每張投影片都只有一個論點。再多的話，就超過大部份聽眾的能力範圍了” - p.236

本文內容摘錄之文字及影片，其著作權屬原著作人或出版商所有。

這是在第一屆的PHPConf Taiwan上講的CoffeeScript的錄影，感謝辛苦的拍攝及後製人員，畫質及收音效果相當的好。

投影片在這裡： View on Speaker Deck | Download PDF

如果想要看得更清楚的話，可以到Youtube切換成HD 1080p模式觀賞。

全部PHPConf Taiwan 2011的影片播放清單

如果大家對於內容有什麼問題，也歡迎在這裡留言，大家一起研究討論 :)

感謝ihower的邀請，這是今天我在Ruby Tuesday上用到的投影片。雖然主題跟在PHPConf Taiwan的一樣，但因為聽眾們大多對Ruby已經很熟悉，而且CoffeeScript在新版的Rails已經是內建的功能了，沒辦法用同一招繼續騙吃騙喝(同一招不能對聖鬥士用兩次啊)，所以有再特別為Rubyist們調整了內容。 View on Speaker Deck | View on Slideshare
Download PDF | Download Screencast

因為Speaker Deck沒辦法全螢幕播放，所以另外也上傳了一份到Slideshare。不過傳到Slideshare的字型好像會跑掉，變超醜..

部份內容是screencast影片，所以沒辦法在slideshare線上看到，有興趣看的人可以另外下載。依舊沒有太多有趣的哏，希望大家會喜歡。