利用HTML/CSS/Javascript来制作slides

现在一般都是用powerpoint来制作slides, 但是如果能利用HTML、CSS以及JavaScript的力量来制作slides,那是一件看起来很酷的事情。
这里收集了一些这方面的工具:

1. reveal.js
code: https://github.com/hakimel/reveal.js/
demo: http://lab.hakim.se/reveal-js/
在线编辑工具: http://www.rvl.io/

2. deck.js
code: https://github.com/imakewebthings/deck.js
demo: http://imakewebthings.com/deck.js/introduction/

3. impress.js
可以制作出令人眩目的内容展示效果,主要里利用了CSS 3D Transforms 里的旋转,扭曲,缩放等特性
把所有幻燈片畫在一個面上可以指定座標等
code: https://github.com/bartaz/impress.js/
demo: http://bartaz.github.com/impress.js/#/bored
doc: https://github.com/cubewebsites/Impress.js-Tutorial

4. html5slides
A Google HTML5 slide template
code: http://code.google.com/p/html5slides
demo: http://html5slides.googlecode.com/svn/trunk/template/index.html

5. landslide
Landslide generates a slideshow using from markdown, ReST, or textile. It builds off of Google’s html5slides template
code: https://github.com/adamzap/landslide
demo: http://adamzap.com/misc/presentation.html

6. S5, rst2s5
S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well
code: http://meyerweb.com/eric/tools/s5/
demo: http://meyerweb.com/eric/tools/s5/s5-intro.html

7. HTML Slideshow
code: https://github.com/robflaherty/html-slideshow
demo: http://www.ravelrumba.com/code/demos/html-slideshow/example/slideshow.html

8. rst2slides
code: http://pypi.python.org/pypi/rst2slides
demo: http://packages.python.org/rst2slides/

其他的工具:
pinpoint: https://live.gnome.org/Pinpoint
prezi.com:

Print Friendly

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>