lt reveal js

25
A simple intrudoction to Reveal.Js by Han Xiao

Upload: xiao-han

Post on 04-Jul-2015

913 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lt reveal js

A simple intrudoction to

Reveal.Js

by Han Xiao

Page 2: Lt reveal js

What Is Reveal.Js?A to create presentations

Using HTML

FRAMEWORK

Page 3: Lt reveal js

Seriously, What Is It?It is just a bunch of , , and sJS CSS <section>

<head> <link rel="stylesheet" href="css/main.css"></head><body> <div class="reveal"> <div class="slides"> <section> <h2>Reveal.js</h2> </section>

<section> <h2>What is reveal.js?</h2> </section> </div> </div><script src="js/reveal.min.js"></script></body>

Page 4: Lt reveal js

And All Your Slides Is In A Single HTML File

Let's see it ALL!

Page 5: Lt reveal js

How Does It Work?It works

by Using CSS3 3D Transform

Page 6: Lt reveal js

Why Would I Use It?Why Not PPT Or Ooo?

It has many wonderful features

And,

It's FUN!

Page 7: Lt reveal js

Some Cool FeaturesNested slides.

Try sliding DOWN

Page 8: Lt reveal js

Vertical Slide 1

Page 9: Lt reveal js

Vertical Slide 2

Page 10: Lt reveal js

Now Goto Next Slide By Press RIGHT

Page 11: Lt reveal js

Markdown SupportWrite markdown directly in HTML code.

With bold, italic, , inline code and lists:

item1item2

by using

link

<section data-markdown> ## Markdown Support

Write markdown directly in HTML code.

With **bold**, _italic_, [link](), inline code and lists:

* item1 * item2</section>

showdown.js

Page 12: Lt reveal js

Code Highlight

Supported by .

function hight() { var prompt = "Hello world";

alert(prompt);}

highlight.js

Page 13: Lt reveal js

Pure WebWhich means

We can use anything as developing a website

Page 14: Lt reveal js

Like insert an img

<img width="375" height="300" src="img/success.jpg" alt="success">

Page 15: Lt reveal js

Or a GIF

<img width="210" height="158" src="img/voice.gif" alt="VoiceOfLab">

Page 16: Lt reveal js

And even a video

<iframe width="640" height="360" src="http://www.youtube.com/embed/u5X5cV-4LRo?rel=0" frameborder="0" allowfullscreen></iframe>

Page 17: Lt reveal js

Mobile SupportRuns well on Android 4.1 with default browser

and

3D transforms have been on iPhone since 2.0supported

Page 18: Lt reveal js

Using Any Javascript And CSSlike

AndAnd ofof causecause , wewe cancan useuse BootstrapBootstrap

jQuery

Page 19: Lt reveal js

If This Does Not Satisfy YouIt is easy to write our own library using Javascript/CSS

Page 20: Lt reveal js

Export To PDFIt can be printed to a PDF by using Chrome

Page 21: Lt reveal js

And Many Other FeaturesSpeaker notes by Node.jsTheme supportDifferent transitionsCustom eventsAuthoring tools. ...

rvl.io

Page 22: Lt reveal js

But, It Has Some ConsDepends on CSS3 3DNot easy to codeNot good to publishSometimes requires network

Page 23: Lt reveal js

ReferenceReveal.js on

of reveal.jsIntrudoction to Compare to

GithubDemo slides

CSS3 3D Transformimpress.js

Page 24: Lt reveal js

Thank You!

Page 25: Lt reveal js