Web presentations
Dvornik Andrew & Kiselev Eugeniy
Wat kind of monster is it?
Web-presentation are made with web-technologies
HTML
CSS
JavaScript
Usage
-
Web service presentation
- Introduction to web-site
- Online presentation
- etc.
REVEAL.JS
VERTICAL SLIDES
SlidesSlides can be nested inside of other slides, try pressing down.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/andrewdacenko/images/86606/arrow.png)
Base element 1
Press down or up to navigate.
Press ESC to enter the slide overview.
BAse element 2
Cornify
Base element 3
That's it, time to go back up.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/andrewdacenko/images/86618/arrow.png)
SLID.ES
Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/andrewdacenko/images/86635/slide.png)
Markdown support
For those of you who like that sort of thing. Instructions and a bit more info available here.
<section data-markdown>
## Markdown support
For those of you who like that sort of thing.
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
</section>
Transition Styles
You can select from different transitions, like:
Cube - Page - Concave - Zoom - Linear -Fade - None - Default
Cube - Page - Concave - Zoom - Linear -Fade - None - Default
THEMES
Reveal.js comes with a few themes built in:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/andrewdacenko/images/87028/themes.png)
Custom background
Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.
Image background
<section data-background="image.png">
Clever quotes and fragments
Inline quotes: "Lorem Ipsum" and blockquotes
"Lorem Ipsum"
Fade in
var fadeIn = function(){
this.animate(400);
}
Linkify to inner page
You can link between slides internally, like this.
<a href="#/2">this</a>
Export / share
Export to PDF with Pro Accaunt
Share with friends your decks
Or embed your presentation into web-site
<iframe src="http://slid.es/andrewdacenko/deck/embed"
width="576" height="420" scrolling="no"
frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
Have fun & use power
![](https://s3.amazonaws.com/media-p.slid.es/uploads/andrewdacenko/images/87055/vk_com_gif_fak.gif)
or not![](https://s3.amazonaws.com/media-p.slid.es/uploads/andrewdacenko/images/87056/4843.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/andrewdacenko/images/87056/4843.gif)
Sources
The end
Title
Titlehyggty
deck
By Andrew Dacenko
deck
- 14,521