用網頁製作你的簡報:reveal.js

用網頁製作你的簡報:reveal.js

試著想像一個情境,你是一名工程師,需要跟他人分享你的創意,你希望雙方認知建立在相同的基礎上,當說到「狗」時,聽眾明白你指的是拉不拉多,而不是吉娃娃。投影片是個簡單有效的同步工具,但 Windows 的 PowerPoint 有幾個惱人的問題:

  • 僅具備簡單畫面編輯工具
  • 版型固定
  • 沒有 Quote
  • 沒有 Code Section
  • 沒有 Syntax Highlight

投影片應該要像攝影機,講者使用它來專注說故事。而 PowerPoint 設計的目標,是讓不具備程式能力的人,也能將畫面放上電腦。它有基礎的視覺設計能力,但並不足以應付進階應用。

reveal.js 是以 HTML 為基礎的簡報框架,藉由 CSS 跟 HTML 分離,講者可以更專注在內容,將設計交由第三方庫來處理。由於本質上是由 HTML、CSS 跟 JavaScript 組成,reveal.js 可以成為網站,只要使用者能上網,就能進行播放。本文會用 reveal.js 來設計簡報,嘗試體驗它的魅力。

需要 Clone 程式碼的,可以到這裡

Install reveal.js

依照官方說明,reveal.js 有三個安裝方式

We provide three different ways to install reveal.js depending on your use case and technical experience.

The basic setup is the easiest way to get started. No need to set up any build tools.

The full setup gives you access to the build tools needed to make changes to the reveal.js source code. It includes a web server which is required if you want to load external Markdown files (the basic setup paired with your own choice of local web server works too).

If you want to use reveal.js as a dependency in your project, you can install from npm.

JavaScript 是手稿語言,下載檔案等同完成安裝。對普通使用者來說,Basic Setup 已經夠用,習慣使用 Git 的人,也可以 Clone 整個專案,再依照自己的需求修改。

我會建議將 reveal.js 的檔案複製到自己的專案,結構如下

revealjs
├── dist
├── plugin
├── index.html
├── package.json
└── README.md

dist 跟 plugin 是 reveal.js 的資源,可以看成是程式主體,在執行時會引用。index.html 是投影片本體。在 reveal.js 的設計中,使用者只需要修改 index.html,其他的事會由 reveal.js 的庫來處理。

Establish HTTP Server

reveal.js 可以用瀏覽器開啟,但如果想將簡報變成網站,還是需要 http server 來提供服務。我們用 node.js 來建立 server,在專案目錄下新增啟動腳本 index.js

revealjs
├── dist
├── plugin
├── index.html
├── index.js
├── package.json
└── README.md

內容是

const http = require("http");
const url = require("url");
const path = require("path");
const fs = require("fs");

// setting user-defined type
const mimeTypes = {
  html: "text/html",
  jpeg: "image/jpeg",
  jpg: "image/jpg",
  png: "image/png",
  js: "text/javascript",
  css: "text/css",
  mp4: "video/mp4",
  woff: "text/woff",
};

// create http server
var server = http.createServer(function (req, res) {
  var uri = url.parse(req.url).pathname;
  var fileName = path.join(process.cwd(), unescape(uri));
  var stats;

  // check if the file is enter
  try {
    stats = fs.lstatSync(fileName);
  } catch (e) {
    res.writeHead(404, { "Content-type": "text/plain" });
    res.write("404 Not Found!\n");
    res.end();
    return;
  }

  // get the file type to check is html type
  if (stats.isFile()) {
    var mineType = mimeTypes[path.extname(fileName).split(".").reverse()[0]];
    res.writeHead(200, { "Content-type": mineType });
    var fileStream = fs.createReadStream(fileName);
    fileStream.pipe(res);
  } else {
    res.writeHead(500, { "Content-type": "text/plain" });
    res.write("500 Internal Error\n");
    res.end();
  }
});
server.listen(8888);

一行一行看。

簡報檔內可能包含不同的媒體,像是 HTML、CSS、JS,用 mimeTypes 來告知客戶端報文類別

const mimeTypes = {
  html: "text/html",
  jpeg: "image/jpeg",
  jpg: "image/jpg",
  png: "image/png",
  js: "text/javascript",
  css: "text/css",
  mp4: "video/mp4",
  woff: "text/woff",
};

建立 http server,並解析客戶端輸入的 URL,每個 URL 可看成對應到不同的檔案,伺服器收到 URL 的要求後,會將檔案回給客戶端

var server = http.createServer(function (req, res) {
  var uri = url.parse(req.url).pathname;
  var fileName = path.join(process.cwd(), unescape(uri));
  var stats;

如果檔案不在,回覆 404 Not Found

  //check if the file is enter
  try {
    stats = fs.lstatSync(fileName);
  } catch (e) {
    res.writeHead(404, { "Content-type": "text/plain" });
    res.write("404 Not Found!\n");
    res.end();
    return;
  }

如果檔案存在,回覆 200,報文是檔案內容

  //get the file type to check is html type
  if (stats.isFile()) {
    var mineType = mimeTypes[path.extname(fileName).split(".").reverse()[0]];
    res.writeHead(200, { "Content-type": mineType });
    var fileStream = fs.createReadStream(fileName);
    fileStream.pipe(res);
  } else {
    res.writeHead(500, { "Content-type": "text/plain" });
    res.write("500 Internal Error\n");
    res.end();
  }

監聽 Port 8888,用 8888 來提供服務

server.listen(8888);

執行

node index.js

伺服器就開好了。

First Page and Vertical Slides

有伺服器後,來建立投影片。如前面講的,投影片本體是 index.html,修改它

<body>
    <div class="reveal">
        <div class="slides">
            <section>
                <a href="[https://nodejs.org/en/](https://nodejs.org/en/)">
                    <img src="[.](https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg).." class="demo-logo" />
                </a>
                <p>reveal.js ...</p>
            </section>

修改處是 body 內的 tag section,每個 tag section 可以當成一頁投影片。在上方程式碼中,section 內加入了一則連結 <a>;一張圖片 <img>;還有一段文字 <p>

啟動瀏覽器,輸入 hostname:port/index.html,看到投影片

右下角箭頭代表可以向右翻頁。

reveal.js 除單純向右翻頁外,也支援向下翻頁,讓使用者能用二維的角度,來聚合他要講的內容。只要在 section 中再加入 section,就有 vertical page 的效果

<section>
  <section>
    <h2>Vertical Slides</h2>
    <p>We can use vertical slides.</p>
    <br />
    <a href="#" class="navigate-down">
      <img class="r-frame" ... alt="Down arrow" />
    </a>
  </section>
  <section>
    <h2>Vertical Slides</h2>
    <p>This is page 2.</p>
    <br />
    <a href="#" class="navigate-up">
      <img class="r-frame" style="... alt="Up arrow" />
    </a>
  </section>
</section>

加入兩頁 vertical page,效果是

右下角顯示能向上或向下翻頁。

Syntax Highlight and Background

工程師常需要跟他人講解程式碼,因此少不了語法凸顯,reveal.js 支援語法凸顯的寫法是

<section data-auto-animate>
    <h2>Pretty Code</h2>
    <pre><code class="hljs" data-trim data-line-numbers>
      import React, { useState } from 'react';
      function Example() {
        const [count, setCount] = useState(0);
        return (
          ...
        );
      }
    </code></pre>
    <p>Code syntax highlighting courtesy of highlight.js.</p>
</section>

hljs 是跟 Syntax Highlight 相關的 style,data-line-numbers 用於顯示行號。效果是

這絕對是 PowerPoint 辦不到的事情。

當然,也可以修改背景

<section data-background="[kazetachinu003.jpg](http://www.ghibli.jp/gallery/kazetachinu003.jpg)">
    <div style="
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 20px;
    ">
    <h2>Image</h2>
    </div>
</section>

用 data-background 來設定背景,用 div 建立區塊來放置文字,區塊的背景顏色是黑色,透明度 70%。效果是

是不是簡單大方!

小結

除前面提到的功能外,reveal.js 還有許多功能,可以自行挖掘。reveal.js 不僅支援 Chrome、Firefox 等主流瀏覽器,還支援 RWD,更可以進行各種細微調整,如果需要特殊動畫,只需要引入相關的 JavaScript 函式庫即可。對開發者來講,它不像 PowerPoint 是面向終端的產品,而是將工具交由開發者,由開發者自行配置需要的效果。

我認為對商務簡報來講,因為有保存與傳播資訊的需求,可能還是要使用 PowerPoint 之類的傳統工具;但在技術簡報的情境裡,reveal.js 等 HTML 簡報框架能賦予開發者更大的自由,具備更好的使用者體驗。

Reference

Read more

Weekly Issue 第 18 期:OpenAI 發布 AI 瀏覽器 Atlas

OpenAI 最近發布 AI 瀏覽器,加上稍早的 Sora 2,在技術圈中引起一些討論。 我認為 OpenAI 嘗試將模型領域的優勢帶到應用面,但這也讓它顯得更像是一家營利公司,而非研究單位(雖然現在沒人會把 OpenAI 當成研究單位了)。 🗞️ 熱門新聞 Dane Stuckey (OpenAI CISO) on prompt injection risks for ChatGPT Atlas Simon Willison 聊了他對 OpenAI Altas 的看法,主要是資安方面。 幾個點:1) 提示詞注入問題依然存在,而且還沒有好解法;2) OpenAI 設計了登出模式與監視模式,讓使用者更容易意識到安全性。 在我看來第二點很重要,好設計應該要避免使用者犯錯,如果 AI 瀏覽器可以在登出狀態下執行,能避免掉很多麻煩的狀況,當然這意味著沒辦法自動購物。

By Ken Chen

Weekly Issue 第 17 期:n8n 在 C 輪募得 180m

現在新創企業已經離不開 AI 了。像 n8n 這樣的自動化工具,重新用 AI 話題包裝後,可以在自由市場上募得鉅款;Postman 也需要在它的口號中,強調對 AI 的重要性。 我相信 AI 讓生活變得更方便,我剛到新國家,對任何事情都不熟時,AI 給了我很多幫助。但市場的話題像一場無差別的風暴,每個公司都面對一支麥克風,麥克風傳出的經 AI 編輯過的聲音。 🗞️ 熱門新聞 n8n raises $180m to get AI closer to value with orchestration n8n C 輪募了 180M 美元,沒想到它可以這麼值錢。 基於 zapier 只有 5B 的估值,

By Ken Chen

Weekly Issue 第 16 期:Anduril 的 MVP

近期嘗試降低 AI 相關選文,主要是因為我在閱讀時,不容易判斷內容是正確還是錯誤。本次選的「AI Evals 大辯論」在這點上就做得很棒,正反意見並陳,讓讀者知道自己哪些論點也有人支持,哪些論點具有爭議。 🗞️ 熱門新聞 The Amusement Park for Engineers 原本看是 Anduril 嘀咕幾聲(我對國防工業沒興趣),但看到一半覺得太讚了,推薦所有做產品的人閱讀。 這句話開始點亮我的眼睛:「那座臨時搭建的塔,是我們自掏腰包、為了驗證可行性而做的,幫助攔截了近一千磅的大麻,並導致數十起毒品走私逮捕 」 業界都說要做 MVP,但到底什麼是 viable?沒有 viable 的 MVP 只能稱為 prototype 而已。合作的 PM 有次說的傳神:「別人要樣品屋,但我們只有沒屋頂的牆壁。」 這篇雖然沒有講到 agile,卻做到

By Ken Chen

Weekly Issue 第 15 期:Go 語言從 1.25 支援 Flight Recorder

最近安排旅遊計畫,會到 Brisbane 居住三個月,突然跟熟悉的環境分開,用陌生眼光看待周圍一切,真是個特別的體驗。 世界依然在轉動,只是用了不同速度,反映在每週週報上,是項目變少了,可是內容變長了。 🗞️ 熱門新聞 Flight Recorder in Go 1.25 Go 1.25 開始支援 Flight Recorder。 以前要抓 trace,都是要等到事發後才能抓,有沒有可能事發前抓呢?有,原理很簡單,配置一塊記憶體存放臨時的 trace,如果符合條件,輸出持久化,否則丟棄,這就是 Flight Recorder。 官方給的範例很讚,像 slow request 這類例子,常常是處理 request 時遇到問題,在沒有 Flight Recorder

By Ken Chen