How to Create presentation with HTML5

Press , scroll, or swipe to advance

Options

Made with Keydown

HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, and Semantics

How to Create presentation with HTML5


Mingxing Lai

Dept. Of Computer Science XiaMen University, China

Nov 15, 2012

Tips

  • <F11> full screen
  • <ctrl> + '+' zoom in
  • <ctrl> + '-' zoom out

Outline

  • Introduction
  • Install tools
  • Writing markdown document
  • Make
  • Play
  • Related articles

Why we create presentation with HTML5 ?

Because you're not this guy

You are this guy

Let's go

Nothing here; move on!

What's tool we use ?

Makrdown

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Keydown = Markdown + deck.js

A single-page HTML presentation maker

Step 1 install keydown


ruby

  #fedora
  sudo yum install ruby-devel.i686
  #ubuntu
  sudo apt-get install ruby

keydown

  sudo gem install keydown
  gem list --local

Step 2 generate files


  keydown generate my_presentation

Step 3 write your presentation in markdown


  cd my_presentation
  vim slides.md

Do you know markdown ?

There is some materials, you can master it in five minutes

Step 4 Customize with CSS


Nothing here; move on!

Step 5 keydown slides


let's witness the miracle of the moment

  keydown slides slides.md

The command will generate some files include slides.html

Congratutations

  firefox slides.html

very funny ?

Video embeds

Present anywhere

...you can launch a browser

Present anywhere

...you can launch a browser

Present anywhere

...you can launch a browser