Reveal.js - Žiga Kralj

# Reveal.js
Žiga Kralj R4B

---

## Kaj je reveal.js?
- Odprtokodno HTML, CSS in JS ogrodje
- Razvil Hakim El Hattab
/# zapisek

---

## Zakaj se uporablja?
- Spletne predstavitve
- Odprtokodnost
- Hiter in preprost

---

[Demo](https://www.zigakralj.com/reveal/demo.html)

---

## Kako jo uporabljam jaz?
- Hitra izdelava predstavitev
- Generacija iz markdown datotek
- Enostaven spletni vmesnik

---

```
/?p=reveal
```
index.php
```php [|2|4|5-6]
<?php
$predstavitve_dir = "p/";

if(!isset($_GET["p"]) || !file_exists($predstavitve_dir.$_GET["p"].".md")){
	include("dir.php");
	exit;
}
?>
```

---

dir.php
```php [|4|6|7-8]
<h1>Predstavitve</h1>
<ul>
<?php
$datoteke = glob($predstavitve_dir."*.md");

foreach($datoteke as $datoteka){
    $tmp = explode(".", explode("/", $datoteka)[1])[0];
    echo "<li><a href='?p=".$tmp."'>".$tmp."</a></li>";
}
?>
</ul>
```

---

```html []
<div class="reveal">
	<div class="slides">
		<section 
			data-markdown="<?php echo $predstavitve_dir.$_GET['p'] ?>.md"
			data-separator="^---"
			data-separator-vertical="^--"
			data-separator-notes="^/#"
		></section>
	</div>
</div>
```

```html [|1-5|7-20]
<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/zoom/zoom.js"></script>

plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom]
	});
</script>
```

---

## Ali se splača?
Izvorne kode
- [Ta predstavitev](https://www.zigakralj.com/reveal/p/reveal.md) - 40 min
- [Učinek opazovalca](https://www.zigakralj.com/reveal/p/ucinek_opazovalca.md) - 25 min

---

Več informacij:
- [https://revealjs.com/](https://revealjs.com/)
- [https://github.com/hakimel/reveal.js](https://github.com/hakimel/reveal.js)

---

<div class="kartica">
<h1>Hvala za pozornost</h1>
</div>