<h1 style="background:blue; color:white">Präsentieren mit HackMD </h1>
---
### Hinweise für motivierte Einsteiger

<!-- Put the link to this slide here so people can follow -->
###### [Link zum Slide](https://hackmd.io/@XbX458BbSnSfsM4AUKPd8Q/r1jc3L1vw#/) : :left_right_arrow: : [Link zum kommentierbaren Modul](https://hackmd.io/f4LirLwWQP-jdRXm-wANkA?view)

:arrow_forward:

---

# Überblick
Die Markdown-Sprache ist eine simple Steuerzeichen-Sprache, die auch bei Wikis verwendet wird. Bei HackMD kann man in einem zweispaltigen Editor links die Eingaben machen und sieht in der rechten Spalte gleich das Ergebnis.

:arrow_backward: :arrow_forward:

---

So sieht das dann aus:

{%youtube E8Nj7RwXf0s %}

:arrow_backward: :arrow_forward:

---

###### Die auf der rechten Seite präsentierte Ansicht ist aber nicht die Präsentations- sondern eine Vorschau-Ansicht, die in erster Line für das Team der Autoren bestimmt ist (siehe unten, **Freigabe**).

:::info
Um den Slide "in Aktion" zu erleben,
- klickt man oben auf das Teilen-Symbol,
- wählt unterhalb des Dokumentlinks in dem Dropdownfeld **Slide mode** aus und
- klickt auf **Preview**.
:::

:arrow_backward: :arrow_forward:

---

:::info
Man muss ziemlich knifflige Kniffe kennen, um im Präsentationsmodus die Formate steuern zu können.
#####
* Manchmal mit **Markdown-Steuerzeichen**.
* Manchmal mit **HTML-Steuerbefehlen**.
#####
Innerhalb eines HTML-Blocks verlieren Markdown-Steuerzeichen ihre Wirkung, wie zB in diesem Text.
:::

<p style="text-align:left;font-size:12px">
Es macht aber verdammt wenig Sinn, Markdown-Präsentationsfolien in "normaler" 12px-Schrift anzuzeigen, weil man sie auf dem Smartphone so gut wie nicht mehr lesen kann!</p>

:arrow_backward: :arrow_forward:

---

Überhaupt sind die üblichen Markdown-Voreinstellungen sehr gut geeignet, um sowohl auf dem Desktop als auch auf Smartphones lesbar präsentiert zu werden.
**Darum sollte man es sich einfach machen, die Voreinstellungen so lassen, wie sie sind und sich auf das Erlernen der einfachen Markdown-Syntax beschränken.**

Das einzige, was fehlt, ist die Möglichkeit, mit einem Markdownbefehl die Textausrichtung zu ändern. :weary:

::: info
Weitere Hinweise zum Erstellen von Präsentationen findest du [**hier**](https://hackmd.io/s/how-to-create-slide-deck#Advanced-Usage-Customizing-individual-slides).
:::

:arrow_backward: :arrow_forward:

---

##### **Themes für Präsentationen**, die mir bekannt sind, heißen:

- white
- black
- [dark](https://github.com/titangene/hackmd-dark-theme)
- League
- Sky
- Beige
- Simple
- Serif
- Blood
- Night
- Moon
- solarized
:arrow_backward: :arrow_forward:

---

## Was für Symbole gibt es?

**Zum Beispiel:**
* :city_sunrise: Sonnenaufgang in der Stadt
* :keycap_ten: Zahlen
* :sunglasses: Smilies
Mehr davon [hier](https://gist.github.com/rxaviers/7360908).

:arrow_backward: :arrow_forward:

---


##### Man kann die Anzeigegröße von Grafiken einstellen, indem man nach dem Grafiklink die neue Grafikbreite so angibt: "=550x" - für eine Breite von 550 Pixeln.
##### Die Höhe wird automatisch angepasst, so dass das Breite-Höhe-Verhältnis erhalten bleibt.

:arrow_backward: :arrow_down_small: :arrow_forward:

----

[ ](https://www.bio.uni-kl.de)

##### Klar kann man eine Grafik auch mit einem Link hinterlegen...

:arrow_backward: :arrow_up_small: :arrow_down_small: :arrow_forward:

----

##### Um einen "Exkurs-Slide anzulegen, hängt man an den vorhandenen Slide noch einen Spiegelstrich an.

* Es gilt die Regel: "- - -" (ohne Leerzeichen zwischen den Spiegelstrichen) ist ein normaler Slide.
* "- - - -" ist der untergeordnete Slide.

:arrow_backward: :arrow_up_small: :arrow_forward:

---

## Teamarbeit mit HackMD: :grin: :grin: :grin:
- durch Registrierung bei HackMD
- durch das Einladen von Mitarbeitenden
- durch die Kommentierungs-Möglichkeit von Dokumenten
- durch die Freigabe von Dokumenten (auch zum Bearbeiten)

:arrow_backward: :arrow_down_small: :arrow_forward:

----

### Registrierung bei HackMD

###### Die Registrierung ist kostenlos, und man kann sich gleich mit der Arbeitsumgebung vertraut machen.
###### Am besten, man öffnet eines der Muster-Dokumentvorlagen und macht sein eigenes, erstes Dokument daraus.

:arrow_backward: :arrow_up_small: :arrow_down_small: :arrow_forward:

----

### Das Einladen von Mitarbeitenden ...

###### Um potentielle Mitarbeiter einzuladen, klickt man oben auf das **Teilen-Symbol**, wodurch sich dieses Menü öffnet:

###### Dort klicke man auf **More(Comment, Invitee) >**.

:arrow_backward: :arrow_up_small: :arrow_down_small: :arrow_forward:

----

### Das Einladen von Mitarbeitenden (Teil 2) ...

Dadurch öffnet sich ein zweites Menü, bei dem man in dem Feld **Invitee** die gewünschte(n) Mailadresse(n) eintragen kann:

:arrow_backward: :arrow_up_small: :arrow_down_small: :arrow_forward:

----

### Das Kommentieren von Beiträgen ...

###### Markdown-Dokumente können kommentiert werden, wenn man sie im **Ansicht-Modus** öffnet. Dazu muss man als Autor den Mitarbeitenden den entsprechenden Link geben.
###### Dies geschieht, indem man auf das Teilen-Symbol klickt, unterhalb des Dokument-Direktlinks den "View mode" auswählt und dann auf **Copy** klickt.
###### Den damit erzeugten Link kann man seinen Mitarbeitenden zusenden oder öffentlich ins Netz stellen.

:arrow_backward: :arrow_up_small: :arrow_down_small: :arrow_forward:

----

### Das Kommentieren von Beiträgen selber ...

###### geht ganz einfach:

:::warning
Man kann nur **Markdown-Textpassagen** kommentieren.
Es ist nicht möglich, Texte zu kommentieren, die mit CSS/HTML formatiert wurden!
:::

:arrow_backward: :arrow_up_small: :arrow_down_small: :arrow_forward:

----

### Das Freigeben von Beiträgen ...

###### HackMD ist eine der wenigen Plattformen, bei denen umfangreich formatierte Dokumente und Präsentationen **öffentlich (für alle)** zur Bearbeitung freigegeben werden können (!)
###### Daneben kann man die Bearbeitung auf registrierte Nutzer oder "Besitzer" des Dokuments beschränken.

:arrow_backward: :arrow_up_small: :arrow_forward:

---

<div style="background: linear-gradient(to bottom, #ffffcc 0%, #000066 50%, #ffffcc 100%);height:600px;">
<h3 style="strong">
HTML/CSS-Steuerbefehle in einem Markdown-Slide-Dokument
</h3>
<h5 style="color:white;text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000;">
Markdown-Slides sind schnell erstellt, weil viele Möglichkeiten fehlen, den Slide mit individuellen Hintergründen und anderen Gimmicks herauszuputzen und die von Office-Präsentationen gewohnten Formatierungsmöglichkeiten auszureizen.<br><br>
Wer das dennoch umsetzen will, sollte einige HTML- und vor allem <a href="http://de.html.net/tutorials/css/introduction.php"><strong>CSS-Grundkenntnisse</strong></a> besitzen.</h5>
<br>
<h4 style="text-align:right;font-weight:normal;font-size:20px; color:navy">
Um die Hintergrundfarbe für einen div-Bereich zu definieren, empfiehlt sich die Benutzung einer <a href="https://www.w3schools.com/colors/colors_picker.asp">HTML-Farbtabelle</a>.
</h4>
</div>

:arrow_backward: :arrow_forward:

---

## Mehr Infos

zu anderen Modulen und Kniffen (die ich zT selber nicht verstehe) und der Architektur der ("Slide-")Präsentationsmöglichkeit von HackMD (englisch) finden sich auf den folgenden Slides:

:arrow_backward: :arrow_forward:

---

### Usage flow

:arrow_backward: :arrow_forward:

---

digraph {
  compound=true
  rankdir=RL

  graph [ fontname="Source Sans Pro", fontsize=20 ];
  node [ fontname="Source Sans Pro", fontsize=18];
  edge [ fontname="Source Sans Pro", fontsize=12 ];


  subgraph core {
    c [label="Hackmd-it \ncore"] [shape=box]
  }
  
  c -> sync [ltail=session lhead=session]

  subgraph cluster1 {
     concentrate=true
    a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
    b [label="HackMD Editor"] [shape=box]
    sync [label="sync" shape=plaintext ]
    b -> sync  [dir="both"]
    sync -> a [dir="both"]
    label="An edit session"
  }
}

:arrow_backward: :arrow_forward:

---

### Architecture of extension

:arrow_backward: :arrow_forward:

---


:arrow_backward: :arrow_forward:

---

## Content script

- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things

:arrow_backward: :arrow_forward:

---

# :fork_and_knife:

:arrow_backward: :arrow_forward:

---

<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>

- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event

:arrow_backward: :arrow_forward:

---

# :bulb:

:arrow_backward: :arrow_forward:

---

- Dead simple API
- Only cares about application logic

:arrow_backward: :arrow_forward:

---

import * as Channeru from 'channeru'

// setup channel in different page environment, once
const channel = Channeru.create()

:arrow_backward: :arrow_forward:

---

// in background script
const fakeLogin = async () => true

channel.answer('isLogin', async () => {
  return await fakeLogin()
})

:arrow_backward: :arrow_forward:

<br>

// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true

---

# :100: :muscle: :tada:

:arrow_backward: :arrow_forward:

---

### Wrap up

- Cross environment communication
- A small library to solve messaging pain
- TypeScript Rocks :tada:

:end: