Google IO 2012年 HTML5 的投影片套件

GoogleIO 2012年演講時, 使用的投影片是 HTML5 寫的, 有 Open Source 出來可以讓大家修改使用. (線上 Demo 可見: Title Goes Here Up To Two Lines)

註: 如果想要製作 + 即時預覽, 建議安裝 gem、compass 來操作修改, 會比較方便. 不然直接 cp 套件的 js / css 也是可以使用.

Google IO 2012年 HTML5 的投影片套件

Google 2012年 HTML5 的投影片套件官方網址: HTML5 slide template for Google I/O 2012

Google IO HTML5 投影片套件 直接使用的方式

1. git clone https://code.google.com/p/io-2012-slides/
2. mkdir slides
3. cd io-2012-slides
4. cp -r images js slide_config.js template.html theme ../slides
5. 瀏覽器打開 ../slides/template.html , 就可以開始執行.

Google IO HTML5 投影片套件 使用 gem、compass 製作修改

1. sudo gem update --system # 此行在 Debian、Ubuntu 無法執行.(使用 APT 升級)
2. sudo gem install compass
3. git clone https://code.google.com/p/io-2012-slides/
4. cd io-2012-slides
5. # 修改 scss 即時更新 css 檔, 可執行下述 daemon
6. compass watch
7. compass watch -s expanded
8. 此時開啟 io-2012-slides/template.html 就可以邊改邊看了.

若是在外面 Demo, 可以開啟本機 Web server 來執行, 讓外部電腦連來使用此投影片. (本機直接開啟 local template.html 就可以執行了)

• $ ./serve.sh # 預設 8000
• $ ./serve.sh 8080 # 使用 8080 port

• 註1: 此套預設 template 於 IE 執行時, 位置會有些跑掉. (Chrome、Firefox 都一切正常)
• 註2: 如果有換頁特效, 要整個重新報告前, 要記得 reload page, 否則跑過一次後, 換頁特效會消失, 會變成全部直接顯示.