Introducción a Reveal.js

Primera diapositiva:

<div class="reveal">

<div class="slide"

<section></section>

</div>

Lo contenido dentro de nuestra primera etiqueta section será la primera diapositiva

Uso de markdown

<section data-markdown="../../diap1.md"></section>
<section data-markdown="">

<script type="text/template">

aqui pondriamos el codigo markdown

</script>

</section>

Crear una diapositiva de forma vertical

Para crear una diapositiva vertical tendremos que introducir etiquetas <section> dentro de otra etiqueta <section>

Encadenando todas las diapositivas que queramos

<section>

<section></section>

</section>

Aquí tendremos tres diapositivas verticales

1

2

3

Fragmentos de las diapositivas

Para que en una diapositiva se vayan mostrando fragmentos de lo que queremos mostrar en orden haremos:

<p class="fragment"> Y aquí el segundo fragemento>

<section id="fragments">

<h2>Hola que tal</h2>

<p class="fragment">Aquí mostramos nuestro primer fragmento</p>

</section>

Estilos de las diapositivas

Podemos definir el estilo de cada diapositiva

<section>

<p class="fragment tipo_diapositiva ">

</section>

Tipos de diapositivas:

grow
shrink
roll-in
fade-out
current-visible
highlight-red
highlight-blue

Cambiar el fondo

Se puede cambiar el color del fondo, introducir una imagen o crear un mosaico de una imagen

Color de fondo

<section data-background=#000>

</section>

Imagen de fondo

<section data-background="ubicacion imagen">

</section>

Incluso meter videos

<section data-background-video="ubicacion del video">

El fondo de las transiciones

Se puede modificar el fondo de las transiciones individualmente

<section data-background-transition="zoom">

Se pueden modificar distintas cosas a la vez

<section data-transition="slide" data-background="#000" data-background-transition="zoom">

El tipo de transiciones puede ser:

default
cube
page
concave

zoom
linear
fade
none

Opciones de teclado

Alt+click raton -->Se hará zoom donde hagamos click con el raton
B --> la pantalla se pone en estado de dormida
S --> se muestra una interfaz con hora, tiempo transcurso diapositivas, las diapositivas

Introducción de código

<section>
    <h2>Pretty Code</h2>
    <pre><code data-trim contenteditable>
                function linkify( selector ) {
                   if( supports3DTransforms ) {
                    var nodes = document.querySelectorAll( selector );
                        for( var i = 0, len = nodes.length; i < len; i++ ) {
                        var node = nodes[i];
                            if( !node.className ) {
                            node.className += ' roll';
                            }
                        }
                    }
                }
        </code></pre>
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>

<section>

<code data-trim contenteditable></code>

</section>

Conexión entre diapositivas

<section>

<a href="#/2/3">like this</a>

</section>

Elección de los temas

black
white
league
sky
beige

simple
serif
night
moon
solarized

Mas información en:

https://github.com/hakimel/reveal.js

http://slides.com

Si te parece difícil codificar tus propias diapositivas te recomiendo que hagas link sobre http://slides.com donde puedes encontrar un editor muy sencillo de manejar

Introducción a Reveal.js

1

2

3

reveal

More from Bernardo Martín