高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

書摘:slide:ology中文版

image
書名: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

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

CoffeeScript @ 20th Ruby Tuesday

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

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

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

幫你的類別增加功能

CoffeeScript很有趣也很好寫,雖然它提供了許多的語法糖衣(Syntactic sugar),讓你用短短的幾行程式碼就能換來原來你在JavaScript要做的事。但說白了它本質上還是JavaScript,JavaScript做不到的事,用CoffeeScript一樣也做不到。

不過有些很常做的工作,例字串變換大小寫,雖然JavaScript的字串本身已經有toUpperCase()以及toLowerCase()的功能,但我已經寫習慣Ruby的upcasedowncase,要記那麼多個名字實在很辛苦,每次都得去google一才下知道要怎麼寫;又如果我想把某個字串重複10次,在Ruby有*可以用,但在JavaScript似乎沒有原生的function可以用.. 有沒有辦法也自己做一些讓自己順手的小工具,讓自己寫程式的時候順利一些呢?

如果你曾經寫過Python或Ruby,就會知道其實它們的類別裡的方法是可以很簡單的被打開再新增或覆寫(open class),在JavaScript/CoffeeScript也有類似的做法,在CoffeeScript就是使用::來幫原來已經定義好的類別再增加功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
String::repeat = (n) ->
  Array(n + 1).join @

String::downcase = ->
  @toLowerCase()

String::upcase = ->
  @toUpperCase()

String::find = (str) ->
  @indexOf str

String::has = (str) ->
  (@indexOf str) > 0

編譯出來的JavaScript長這樣:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
String.prototype.repeat = function(n) {
  return Array(n + 1).join(this);
};
String.prototype.downcase = function() {
  return this.toLowerCase();
};
String.prototype.upcase = function() {
  return this.toUpperCase();
};
String.prototype.find = function(str) {
  return this.indexOf(str);
};
String.prototype.has = function(str) {
  return (this.indexOf(str)) > 0;
};

其實那個::,用的就是prototype啦,這樣一來,你就可以寫出這樣的程式:

1
2
3
4
console.log "a".repeat 10                     # aaaaaaaaaa
console.log "this is a book".upper()          # THIS IS A BOOK
console.log "this is a book".find "book"      # 10
console.log "this is a book".has "book"       # true

程式看起來乾淨多了,也習慣多了,心情也會比較好一些。

PS: 不知道會不會有善心人士會把Python或Ruby一些好用的功能也port一份過來? 還是早就已經有了.. :)

CoffeeScript 裡的全域變數

在CoffeeScript裡,即使是一個空的.coffee檔,它也會被編譯成這樣:

1
2
3
(function() {

}).call(this);

你在.coffee寫的任何變數或function,都是被宣告為區域變數包在裡面,只會在裡面有作用而已。這其實是好事,因為這樣一來與外界隔離,你寫的東西不會去污染到別人寫的,相對的別人寫的東西也不會去弄髒你寫的。但假設因為某些不可抗力,硬是要把變數或function弄成global好讓所有頁面都可以直接使用,也不是沒辦法,你可以直接把變數或function掛在window物件底下:

1
2
window.logout = ->
  alert "You've already logout!" if confirm "Are you sure to logout?"

或是這樣做:

1
2
3
root = exports ? this
root.logout = ->
  alert "You've already logout!" if confirm "Are you sure to logout?"

第二種寫法看起來比較麻煩,但比較通用。exports是在Node.js裡定義的物件,上面第1行的意思是指會先檢查exports是不是已經有定義了,如果這段程式是在Node.js裡執行的話,因為exports是存在的,所以會定義一個root變數並指向它;如果是在一般的網頁上執行,因為沒有exports,所以會定義一個root指向this,也就是window物件 ,所以這樣的寫法的好處就是在網頁或是Node.js都行得通。

這樣一來,你在頁面上的按鈕就可以這樣寫:

1
<input type="button" value="logout" id="Logout" onclick="logout();" />

但是,如果可以的話,建議還是儘量避免用這種global變數的方式來寫程式,現在的JavaScript越寫越複雜,沒人知道你寫的東西會不會剛好就去衝到誰家寫的library,或是衝到你自己或同事寫的程式碼 :)