RevealJs

TUTO REVEAL.JS CON MARKDOWN

Los powerpoint que tanto nos han traumatizado ya va mudando de piel. Más de unx ya se motiva en crear presentaciones animadas. Prezi quizás sea conocido para algunxs. Desafortunadamente, es privativo y eso no nos gusta.

Reavealjs is a framework for easily creating beautiful presentations using HTML. Check out the live demo.

reveal.js comes with a broad range of features including nested slides, markdown contents, PDF export, speaker notes and a JavaScript API. It's best viewed in a browser with support for CSS 3D transforms but fallbacks are available to make sure your presentation can still be viewed elsewhere.

http://lab.hakim.se/reveal-js/#/

Usando Reveal.js

Local

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

Online

También puedes http://slides.com/

Puedes clicar ESC para ver todos los slides en la pantalla.

Markdown

Las presentaciones se pueden crear con sintáxis de markdown.

lomaravilloso que es md

Para ello

It's possible to write your slides using Markdown. To enable Markdown, add the data-markdown attribute to your <section> elements and wrap the contents in a <script type="text/template"> like the example below.

This is based on data-markdown from Paul Irish modified to use marked to support Github Flavoured Markdown. Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

<section data-markdown>

   <script type="text/template">
       ## Page title

       A paragraph with some text and a [link](http://hakim.se).
   </script>

</section>

Puedes ver la sintáxis <a href="http://daringfireball.net/projects/markdown/syntax" title="sintáxis de markdown"> aquí</a>

Cuando termines de crear la presentación en markdown, lo exportas a html. Al final del tutorial, explicaré cómo se hace eso.

Creando slides

Niveles

Las puedo jerarquizar, es decir, ordenar por niveles. Las "destacadas" se pueden visualizar dando a las flechas derecha/izquierda.


Se crean usando un titulo de primer nivel

Title

==

Y, ramificando de cada uno de estos slides destacados, puedo crear otras

metiendo contenido entre tres guiones seguidos para abrir y cerrar el slide

--- blabla ---

Contenido

Dentro de los slides puedo introducir diferentes tipos de contenido siguiendo la sintáxis de markdown.

Sería maravilloso que uses formatos libres como <a href="https://en.wikipedia.org/wiki/Libtheora" title="Libtheora"> .ogv libtheora </a> para video , <a href="https://en.wikipedia.org/wiki/Vorbis" title="Vorbs"> .ogg/.oga vorbis </a> para audio

https://flossmanuals.net/ogg-theora/

texto =

le podemos meter onda:

para poner en negrita

• • estoestáennegrita**

para alinear en el centr

blabla

imágenes


ej. 

• iframes

<iframe class="stretch force" src="force_falso.html"></iframe>

audio

<audio src="assets/audio/nombre.oga" controls></audio>

video

<video src="assets/audio/nomrbe.ogv" controls></video>

tablas

Foo

Transiciones

Default - None - Fade - Slide - Concave - Zoom

1. 1. 1. Zoom

Enables a minimal JS API for zooming in on specific points or DOM elements. https://github.com/hakimel/zoom.js

Configuración

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

Dependencias

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

Tamaño presentación

https://github.com/hakimel/reveal.js#presentation-size

Autosliding

https://github.com/hakimel/reveal.js#auto-sliding

Atajos teclado

https://github.com/hakimel/reveal.js#keyboard-bindings

API

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

States

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

Fondos del slide

https://github.com/hakimel/reveal.js#slide-backgrounds

Exportar pdf

https://github.com/hakimel/reveal.js#pdf-export

Temas

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

Anotaciones presentación

https://github.com/hakimel/reveal.js#speaker-notes

y para ver anotaciones en otro dispositivo= https://github.com/hakimel/reveal.js#server-side-speaker-notes In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the required scripts by adding the following dependencies

Pasar la presentacion en los dispositivos del público

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