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, 否則跑過一次後, 換頁特效會消失, 會變成全部直接顯示.

 

 

Tsung: 對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
Related Post
whatsapp
line