用網頁做簡報

簡介

  1. 參觀一下網頁式簡報 s5 (點 "introductory slide show") 注意: 將滑鼠移到畫面下方, 會出現選單讓你直接跳到某一頁。
  2. 參觀一下改良版 presntacular (點 "slide show demo"), 及一些例子: Microformats, ...

基本 s5

  1. 從 s5 首頁下載最新的穩定版 (例如寫講義的當時是 s5-11.zip ; 不要抓到研發版 development release), 並且用 unzip -v ~/s5-11.zip | less 看一下裡面有那些東西。
  2. 如果直接解開來, 所有檔案會放在家目錄, 太亂。 建一個空目錄, 解在裡面: mkdir ~/s5 ; cd ~/s5 ; unzip ~/s5-11.zip
  3. 其實真正需要用到的, 只有 s5-blank.zip 裡面的東西。 unzip -v s5-blank.zip | less 看一下裡面有那些東西。 這次它底下已經分成兩個子目錄, 而且其中的 __MACOSX 我們用不到, 所以我們就不另外在 ~/public_html 底下建立目錄了: 直接到那裡去解壓縮, 並且改一下名字: cd ~/public_html/ ; unzip ~/s5/s5-blank.zip ; mv s5-blank s5 ; rm -rf __MACOSX
  4. 進入 s5 子目錄。 然後複製一份: cp s5-blank.html hw3.html 並用瀏覽器看檢查一下是否成功放入你的帳號。 應該要可以自己猜得出來 ~/public_html/s5/hw3.html 這個檔案的網址是什麼; 或請老師給網址。
  5. 另外開一個視窗, 進 vim hw3.html 編輯, 把投影片的標題, 講者, ... 等等資訊改一下, 存檔 (但不要跳出 vim) 並在瀏覽器裡面重新整理, 確認生效。
  6. 複製幾張空白投影片: 把遊標移到第二個 (也是最後一個) <div class="slide"> 那一列, 按 shift-v 進入 visual line mode, 再將遊標移到下面的空白列, 按 y 複製。 然後按幾次 P (大寫!) 貼在遊標之前。
  7. 開始隨便打一點東西吧。
  8. 嚴格來說, 應該要在 <title> 那句之下加上: <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 表示文件是正體中文, 以 big5 編碼。

Presentacular

  1. 其實 Presentacular 可以獨立使用, 不必先安裝 s5; 不過這裡為了讓大家更清楚究竟那些檔案很重要, 所以採取稍微麻煩的步驟。
  2. 下載 presentacular-example.zip
  3. 用 unzip -v ~/presentacular-example.zip | less 看一下裡面有那些東西。 它自己就已經有一個最上層目錄 "example", 所以我們不必另外再建目錄。
  4. 在家目錄底下將它解壓縮: cd ~ ; unzip ~/presentacular-example.zip
  5. 進去 example 子目錄看一下。 更改一個檔名: mv index.html presentacular.html
  6. 特別注意到, 這裡面的 ui/default 子目錄, 與 s5 的重複; 但其實內容又不完全一樣。 所以把它搬過去相同的位置, 但更改名稱: mv ui/default ~/public_html/s5/ui/pt
  7. 清理一下垃圾。 刪除 ui 子目錄: rmdir ui 咦, 它怎麼說不是空的? 再仔細看: ls -a ui 原來有隱藏檔。 暴力遞迴刪除: rm -rf ui
  8. 把所有東西搬到網頁目錄的 s5 底下, 並且移到那邊工作: mv * ~/public_html/s5/ ; cd ~/public_html/s5/
  9. 正在 vim 編輯檔案的視窗, 請改編輯 presentacular.html : 按 :e preTAB 可能還要再手動將檔名敲完。
  10. 找到 <!-- Presentacular theme --> 從這裡開始, 進入 visual line mode, 接下來這十列左右 (不要到 </head>) 全部標示起來, 用 y 鍵複製。 這些指令的功用是把 presentacular 的特效檔叫進來。 任何想用 presentacular 的網頁, 都要有這些指令。
  11. 按 ctrl-shift-6 切換回剛才的 hw3.html, 把遊標移到 </head> 按 P (大寫!) 貼上
  12. 現在隨便挑一頁, 把 <div class="slide"> 改成 <div class="slide appear"> 再挑另一頁的 <ul> 改成 <ul class="incremental">, 最後將某個 <li> 改成 <li class="shake">
  13. 用瀏覽器看一下 ~/public_html/s5/presentacular.html (自己想一下網址...) 發現怪怪的 ... (待續)

特效摘要:

  1. 適用於整頁的效果: appear, grow, blinddown
  2. 與上述各項相反的 "消失" 效果: fade, shrink, fold
  3. 適用於單項的效果: incremental, shake, pulsate
  4. 其他: puff

結語

其實 s5 及 presentacular 並不需要 Linux 作業系統, 也不需要網頁伺服器 apache。 請自行在 Windows 底下下載 presentacular, 解壓縮後, 直接用瀏覽器開啟 index.html。 然後用記事本 (notepad) 打開 index.html 修改, 並重新整理網頁。

用網頁做簡報的缺點是花俏度比較低; 優點則是:

  1. 不依賴任何作業系統
  2. 除了瀏覽器與文字檔案編輯器之外, 不依賴任何應用軟體
  3. 視障者或較舊的瀏覽器還是可以看得見靜態的圖文
  4. 相較於真正的簡報系統, 檔案小很多; 如果許多份簡報放在一起, 省更多
  5. 符合 組合的原則, 多學一點點 html, 可以讓你在任何用到 html 的場合多佔一點便宜
  6. 特別是如果未來的資訊技術真的朝 Microformats 發展, 略通 html (不必精通; 我自己也不精通) 將是很基本, 具有長遠投資價值的技能。

其他參考資料:

  1. 勤益技術學院電算中心朱孝國: 網頁式簡報