Aufbau der Präsentation I

Die Seiten der Präsentation kommen nach dem <div> -Tag:

		<div  class="slides">
			Hier die Präsentation erstellen in HTML oder via Markdown
		</div>
						

Aufbau der Präsentation II

Jede Folie wird durch das <section> -Tag eingeklammert:

	<section>
		Hier entsteht eine Folie :-)
	</section>
					

Springen zwischen den Folien I

1. Die Folien sind durchnummeriert, beginnend bei 0
2. Die Folien können mit einer ID versehen werden
3. Beispiel: Zur letzten Folie

	<a href="#/last-slide">
		Zur letzten Folie
	</a>
					

Springen zwischen den Folien II

Auf der letzten Folie befindet sich unter section die entsprechende id:

	<section id="last-slide">
					

Vertikale Folien I

Neben der horizontalen Anordnung lassen sich Folien auch vertikal anordnen.

Vertikale Folien II

Im Quellcode innerhalb einer <section> eine weitere <section> einbetten:

<section>
	<section>
		→ Quellcode Verzweigungen . . .
	</section>
</section>
					

Folien-Übergang

Beachte die vertikale Folie ↘

→ Oder benutze das Menu links unten. ←

Folien-Übergang: concave

Folien-Übergang: convex-in fade-out

Folien-Übergang: none

Im Quellcode:

	<section data-transition="none">
		→ Quellcode Folien-Übergang
	</section>
					

Tastatur - Codes I

→ ESC-Taste: Übersichtsmodus

alternativ: o-Taste

Tastatur - Codes II

Tastatur - Codes III

Pfeil-Tasten → ↓ ↑ ← : Navigation innerhalb der Präsentation

Tastatur - Codes IV

Keyboard Shortcuts

Markdown-Syntax I

Beispiel: HvGG-Methodentage 2015

<section  data-markdown>
	<script type="text/template">
		### Markdown-Syntax!
		* Beispiel: **„Text formatieren"**
	</script>
</section>
				

Markdown-Syntax II

Am Ende der Seite das Plugin einbinden

// Optional reveal.js plugins
dependencies: [
	{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
	{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
]
				

PDF-Export I

in den Kopf (→ head) der HTML-Datei:

<script>
	
	var link = document.createElement( 'link' );
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
	document.getElementsByTagName( 'head' )[0].appendChild( link );
	
</script>
				

PDF-Export II

Aufruf im Browser: mein_verzeichnis/reveal_tutor.html?print-pdf

1. Aus dem Browser heraus in den Drucken-Dialog
2. Als Ziel Drucken in Datei wählen
3. Einstellungen: Skalierung 100%; Querformat

PDF-Export III

Druckvorschau:

→ Ergebnis