Introduction to Reveal.js

Lighting talking about reveal.js

Transcript

1. A simple intrudoction to Reveal.Js by Han Xiao
2. What Is Reveal.Js? A to create presentations Using HTML FRAMEWORK
3. Seriously, What Is It? It is just a bunch of , , and s JS CSS <section> < h e a d > < l i n k r e l = " s t y l e s h e e t " h r e f = " c s s / m a i n . c s s " > < / h e a d > < b o d y > < d i v c l a s s = " r e v e a l " > < d i v c l a s s = " s l i d e s " > < s e c t i o n > < h 2 > R e v e a l . j s < / h 2 > < / s e c t i o n > < s e c t i o n > < h 2 > W h a t i s r e v e a l . j s ? < / h 2 > < / s e c t i o n > < / d i v > < / d i v > < s c r i p t s r c = " j s / r e v e a l . m i n . j s " > < / s c r i p t > < / b o d y >
4. And All Your Slides Is In A Single HTML File Let's see it ALL!
5. How Does It Work? It works by Using CSS3 3D Transform
6. Why Would I Use It? Why Not PPT Or Ooo? It has many wonderful features And, It's FUN!
7. Some Cool Features Nested slides. Try sliding DOWN
8. Vertical Slide 1
9. Vertical Slide 2
10. Now Goto Next Slide By Press RIGHT
11. Markdown Support Write markdown directly in HTML code. With bold, italic, , i n l i n e c o d e and lists: item1 item2 by using link < s e c t i o n d a t a - m a r k d o w n > # # M a r k d o w n S u p p o r t W r i t e m a r k d o w n d i r e c t l y i n H T M L c o d e . W i t h * * b o l d * * , _ i t a l i c _ , [ l i n k ] ( ) , ` i n l i n e c o d e ` a n d l i s t s : * i t e m 1 * i t e m 2 < / s e c t i o n > showdown.js
12. Code Highlight Supported by . f u n c t i o n h i g h t ( ) { v a r p r o m p t = " H e l l o w o r l d " ; a l e r t ( p r o m p t ) ; } highlight.js
13. Pure Web Which means We can use anything as developing a website
14. Like insert an img < i m g w i d t h = " 3 7 5 " h e i g h t = " 3 0 0 " s r c = " i m g / s u c c e s s . j p g " a l t = " s u c c e s s " >
15. Or a GIF < i m g w i d t h = " 2 1 0 " h e i g h t = " 1 5 8 " s r c = " i m g / v o i c e . g i f " a l t = " V o i c e O f L a b " >
16. And even a video < i f r a m e w i d t h = " 6 4 0 " h e i g h t = " 3 6 0 " s r c = " h t t p : / / w w w . y o u t u b e . c o m / e m b e d / u 5 X 5 c V - 4 L R o ? r e l = 0 " f r a m e b o r d e r = " 0 " a l l o w f u l l s c r e e n > < / i f r a m e >
17. Mobile Support Runs well on Android 4.1 with default browser and 3D transforms have been on iPhone since 2.0 supported
18. Using Any Javascript And CSS like And And of of cause cause , we we can can use use Bootstrap Bootstrap jQuery
19. If This Does Not Satisfy You It is easy to write our own library using Javascript/CSS
20. Export To PDF It can be printed to a PDF by using Chrome
21. And Many Other Features Speaker notes by Node.js Theme support Different transitions Custom events Authoring tools. ... rvl.io
22. But, It Has Some Cons Depends on CSS3 3D Not easy to code Not good to publish Sometimes requires network
23. Reference Reveal.js on of reveal.js Intrudoction to Compare to Github Demo slides CSS3 3D Transform impress.js
24. Thank You!