Einführung in remark

# Einführung in remark
	
.footnote[Vortrag "Einführung in remark", Jo Bager]

---

#remark - was ist das?

---

class:left

#remark

remark ist ein Browser-basiertes Präsentationssystem. Es setzt komplett auf offene Technik: Eine remark-Präsentation ist nichts anderes als eine HTML-Datei mit CSS und JavaScript. Das System steht kostenlos als Open Source unter der MIT-Lizenz bereit.

???

Erfunden vom Norweger Ole Petter Bang

mittlerweile größere Community

---

## Einige Besonderheiten von remark

1. MarkDown zur Auszeichnung von Folien, mit einigen smarten Erweiterungen

2. Syntax-Hervorhebung

3. Präsentationsmodus

4. Automatische Skalierung der Slides

5. Touch-Support für mobile Geräte

6. Ein Ökosystem mit Erweiterungen

---

##MarkDown zur Auszeichnung
Einfacher geht es nicht

---

##MarkDown zur Auszeichnung

Die Definition der letzten Folie sah so aus:

```markdown
class: center, middle, inverse
##MarkDown zur Auszeichnung
Einfacher geht es nicht
```

MarkDown ist sehr einfach:

```markdown
#, ##, ### markiert Überschriften,
[Text](Bild.png) bettet ein Bild ein
```

---

#MarkDown-Besonderheiten

.left-column[
  Folien können Properties erhalten, um sie zu benennen und zu stylen - hier zum Beispiel wird der Text zentriert angeordnet.
]

```markdown
.right-column
```
zugewiesen bekommen, die mit einer entsprechenden CSS-Klasse korrespondiert.

]

---

#Syntax-Hervorhebung

Sehr praktisch für Entwickler: remark kann in Listings einiger Dutzend Programmiersprachen die Syntax markieren, hier zum Beispiel CSS:

```css
h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: 400;
        margin-bottom: 0;
      }
```

---

##Mehrspaltige Layouts und HTML
Inhalte übersichtlich strukturieren

---

#Mehrspaltige Layouts

remark kann Inhalte auch in Folien nebeneinander anordnen.
]
.right-column[
![catcontent](http://placekitten.com/400/300?image=2)
]

---

#HTML einbinden

.center[
<iframe width="560" height="315" src="https://www.youtube.com/embed/JSqBHrq7f3A" frameborder="0" allowfullscreen></iframe>
]

</br>
HTML-Widgets einbinden, wie hier den YouTube-Player? Check.

---

##Bilder
Nicht so viel schreiben, zeigen

---

# Folie mit Hintergrundbild

---

# Folie mit Hintergrundbild

Folien mit Hintergrundbild eignen sich gut, um neue Kapitel einzuleiten. Aber man muss aufpassen: Wenn die Bildabmessungen nicht dem Verhältnis 4:3 entsprechen, können unerwünschte Effekte auftreten, siehe folgende Folie.

---

# Folie mit Hintergrundbild

---

# Logo

Kleines Goodie unseres Beispiel-CSS: Die Klasse .logo ermöglicht es, oben rechts ein Logo einzubinden - zum Beispiel für die erste oder die abschließende Folie. Besser als das Katzenfoto eignet sich ein Firmenlogo, idealerweise freigestellt.

---

# Weitere Infos

... auf der remark-GitHub-Seite: https://github.com/gnab/remark

</br>

Alle Bilder stammen von placekitten.com