## Willkommen zum Online-Tutorial für den Einstieg in *Twine*
<i>Für einen umfassenden Einstieg schaust Du Dir die folgenden Einheiten am besten chronologisch an. Ansonsten kannst Du auch je nach Interesse direkt zu einer bestimmten Frage springen.</i>
1. [[Was ist Twine und wie kann ich es nutzen?|unit1]]
2. [[Wie gestalte ich ein Online-Angebot mit Twine?|unit2]]
3. [[Wie lässt sich das Design meines erstellten Twine-Angebots ändern?|unit3]]
4. [[Wie kann ich mein Twine-Angebot veröffentlichen?|unit4]]
5. [[Warum ist Twine ein ziemlich großartiges Tool für zeitgemäße Bildung?|unit5]]
### Hinweis zur Weiternutzung
Dieses Online-Tutorial wurde im <a href=https://www.ebildungslabor.de target=blank>eBildungslabor</a> erstellt. Es ist im Interesse einer möglichst einfachen Weiternutzung unter CC0 veröffentlicht. Du kannst es somit ohne Lizenzhinweis beliebig weiternutzen, verändern und anpassen. Feedback und Fragen gerne <a href=mailto:nele@ebildungslabor.de>via Mail</a> oder <a href=https://twitter.com/eBildungslabor target=blank>Twitter</a>.
Link zum Code: <a href=https://github.com/eBildungslabor/twinetutorial target=blank>https://github.com/eBildungslabor/twinetutorial</a>
<hr>
<div align=center>< zurück | Übersicht | [[vor> |unit1]]</div>
## 1. Was ist Twine und wie kann ich es nutzen?
Schau Dir das Video an, um zu erfahren, was Twine ist und wie Du es nutzen kannst.
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/taObPAV7AFc' frameborder='0' allowfullscreen></iframe></div>
Wir halten fest: Twine ist ein Tool, das direkt im Browser genutzt oder als Software installiert werden kann. Es ist gebührenfrei nutzbar. Der Code ist Open Source. Es eignet sich, um Online-Angebote in unterschiedlichen Formaten zu gestalten. Wesentliches Merkmal ist eine einfache Verküpfung zwischen unterschiedlichen Text- und/ oder Audio-/Video-/Bild-Einheiten.
In der nächsten Einheit lernst Du, [[wie Du ganz einfach ein erstes Online-Angebot mit Twine erstellen kannst|unit2]]
<hr>
<div align=center>[[< zurück|start]] | [[Übersicht|start]] | [[vor> |unit2]]</div>
## 2. Wie gestalte ich ein Online-Angebot mit Twine?
Schau Dir das Video an, um zu lernen, wie Du ganz einfach ein erstes Online-Angebot mit Twine erstellen kannst:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/eCvTgpFoCPc' frameborder='0' allowfullscreen></iframe></div>
Wir halten fest: Um ein Online-Angebot mit Twine zu erstellen, sind folgende Schritte nötig:
1. Du öffnest die <a href=http://twinery.org/ target=blank>Twine-Website</a>
2. Du öffnest den Link 'Use it online' (im 'Zettel' auf der rechten Seite)
3. Du klickst auf den grünen Button '+Geschichte'
4. Du gibst den gewünschten Titel ein und klickst auf 'Hinzufügen'
5. Du bearbeitest die erste automatisch erstellte Passage durch Klick auf das Stiftzeichen.
6. Um eine weitere Passage zu erstellen, kannst Du einen Link zu ihr setzen. Sie wird dann automatisch erstellt. Der Code dazu sieht folgendermaßen aus:
Link zum Anklicken|titel-passage
(Du musst ihn nur noch in zwei eckige Klammern setzen.)
Der Text lässt sich ansonsten relativ einfach mittels Markdown/HTML & Formatauswahl & CSS gestalten. Mehr über die Möglichkeiten zu Design und Gestaltung lernst du [[in der nächsten Einheit|unit3]]
<hr>
<div align=center>[[< zurück|unit1]] | [[Übersicht|start]] | [[vor> |unit3]]</div>## Wie lässt sich das Design meines erstellten Twine-Angebots gestalten?
Es gibt verschiedene Möglichkeiten, um das Design Deines Twine-Angebots zu gestalten. Schau Dir dazu das Video an:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/uf9qmvqGTiI' frameborder='0' allowfullscreen></iframe></div>
Wir halten fest:
Du kannst das Design Deines Twine-Angebots
a) direkt im jeweiligen Textfeld mit Markdown und HTML Befehlen gestalten.
b) dir ein bestimmtes Format auswählen.
c) mittels CSS ein eigenes Stylesheet gestalten.
Schön daran ist, dass Du durch Ausprobieren und Experimentieren vorankommst und zu Beginn noch keine Kenntnisse in HTML oder CSS haben musst.
Wie Du Dein Twine-Angebot dann schließlich noch veröffentlichen kannst, erfährst Du [[in der nächsten Einheit|unit4]]
<hr>
<div align=center>[[< zurück|unit2]] | [[Übersicht|start]] | [[vor> |unit4]]</div>
## Wie kann ich mein Twine-Angebot veröffentlichen?
Ein erstelltes Twine-Angebot kannst Du als HTML-Datei herunterladen und auf diese Weise beliebig auf einen Server hochladen. Wer keinen eigenen oder gehosteten Server hat, für den gibt es kostenfreie und einfach umsetzbare Alternativen:
1. Via Philome.la (super simpel und einfach!)
2. Via Github (etwas komlexer, aber toll für Weiternutzung; deshalb mein Favorit!)
In diesem Video erhältst Du eine Schritt-für-Schritt-Anleitung für beide Varianten:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/ILKmNf0SOII' frameborder='0' allowfullscreen></iframe></div>
Wir halten fest:
1. Der erste Schritt zur Veröffentlichung ist, das erstellte Twine als HTML zu speichern. Dazu klickt man im Menü des Twine den Link 'Als Datei veröffentlichen' an.
2. Variante A zum einfachen Upload des Twine ohne eigenen Server ist das Tool <a href=http://philome.la/ target=blank>Philome.la</a>. Einfach mit Twitter-Account anmelden, die gespeicherte HTML-Datei hochladen und veröffentlichen. Wichtig: Die Veröffentlichung wird von Philomela automatisch getwittert. Wenn man das nicht möchte, den entsprechenden Haken vor Veröffentlichung entfernen.
3. Variante B ist die Veröffentlichung über einen Github Account. Dieser lässt sich via <a href=https://www.github.com target=blank>Github.com</a> kostenfrei anlegen. Die Schritte zur Veröffentlichung sind:
* ein neues Repository erstellen (z.B. meintwine)
* unter 'Settings' 'GithubPages' aktivieren.
* unter Code die HTML-Datei neu hochladen.
* den Namen der Datei in 'index.html' ändern.
Wenn Du nun auf den unter 'Settings' bei GithubPages angegebenen Link klickst, erscheint dort Dein Twine (manchmal kann das wenige Minuten dauern).
Du hast nun schon gelernt, was Twine ist und wie Du ein eigenes Twine erstellst, gestaltest und veröffentlichst. In der [[nächsten und abschließenden Einheit fasse ich das Potential für zeitgemäße Bildung dieses Tools zusammen und erläutere didaktische Nutzungsmöglichkeiten|unit5]]
<hr>
<div align=center>[[< zurück|unit3]] | [[Übersicht|start]] | [[vor> |unit5]]</div>## 5. Warum ist Twine ein ziemlich großartiges Tool für zeitgemäße Bildung?
Ich bin vor allem aus 5 Gründen von Twine als Bildungs-Tool überzeugt:
### 1. ein Tool zum Lernen
Twine ist ein Lern-Tool im besten Sinne: man kann sofort ganz simpel loslegen - und sich zugleich auch tiefer einarbeiten und komplexere Twine-Angebote gestalten.
### 2. vielfältige Einsatzmöglichkeiten
Twine eignet sich zum Lehren und Lernen gleichermaßen und bietet zahlreiche didaktische Einsatzmöglichkeiten: Lehrende können Tutorials oder anderes für Lernende gestalten (z.B. im Rahmen von Flipped Classroom Angeboten). Lernende können eigene Twines für sich selbst und/ oder Mitlernende gestalten, um sich intensiver mit einem Thema zu beschäftigen und etwas zu präsentieren. Neben der hier vorgestellten Einsatzmöglichkeit eines Online-Tutorials eignet sich Twine natürlich vor allem auch für das kreative Schreiben mit interaktiven Elementen - und in diesem Sinne insbesondere für den Deutsch-, den Fremdsprachen- oder den Ethik/Religions-Unterricht.
### 3. niedrigschwelliger Erwerb von Medienkompetenz
Twine ist ein Tool für den Erwerb von Medienkompetenz - mit niedrigschwelligem Einstieg. Man kann ohne Webgestaltungs-Kenntnisse einfach drauflos tippen - und erhält eine ansehliche Website. Ganz einfach lässt sich ausgehend von solch einem Grundgerüst mit Markdown, CSS und HTML experimentieren - und sofort betrachten, was dann bei der Anzeige passiert. Erfahrbar ist auf diese Weise sowohl die grundsätzliche Gestaltungsmöglichkeit des Internets, als auch - ganz praktisch und durch Ausprobieren - Grundlagen in HTML und CSS.
### 4. Potential für OER
Twine hat ein großes Potential für freie Bildungsmaterialien (OER). Denn die erstellten Twines können einfach heruntergeladen und weitergenutzt werden. Besonders gut gelingt dies bei einer Veröffentlichung via GitHub. Auf diese Weise kann Weiterbearbeitung und Remix von offenen Bildungsinhalten vorangebracht werden. Bislang mangelt es daran noch häufig.
### 5. einfach nutzbar
Twine ist einfach nutzbar: Das Tool ist Open Source, es steht allen gebührenfrei zur Verfügung und es lässt sich im Unterricht ohne Installation direkt im Browser nutzen.
### Abschluss
Mit diesen 5 Gründen sind wir am Ende unseres kleinen Tutorials angelangt. Ich wünsche Dir viel Erfolg und Freude beim Ausprobieren von Twine und freue mich sehr <a href=mailto:nele@ebildungslabor.de>über Feedback per Mail!</a> oder via <a href=target=blank>Twitter</a>
Wenn Du dieses (mit Twine erstellte) Tutorial weiternutzen willst, dann findest Du die html-Datei dazu <a href=https://github.com/eBildungslabor/twinetutorial target=blank>in meinem Github-Account</a>: einfach herunterladen, in Twine neu hochladen und passend für Deine Bedürfnisse weiter gestalten. Die Datei ist unter CC0 veröffentlicht. Du musst keinen Lizenzhinweis angeben.
<hr>
<div align=center>[[< zurück|unit4]] | [[Übersicht|start]] | vor ></div>