In diesem Mini-Tutorial kannst Du lernen, wie Du mit Twine eine interaktive Geschichte erstellst und diese auf Glitch veröffentlichst. (Das Mini-Tutorial ist zugleich ein praktisches Anschauungsbeispiel. Deine Geschichte wird aber hoffentlich spannender 😜)
[[Okay. Lass uns starten!|ueberblick]]
Eine interaktive Geschichte erstellst Du mit dem Tool Twine.
* Öffne die Website <a href="https://twinery.org" target="blank">Twinery.org</a>
* Klicke auf **Use it online**
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src=https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2Fstart.png?v=1561024509747">
👉 [[Und wie lege ich jetzt meine Geschichte an?|twine2]]🌟 Glückwunsch zu Deiner erstellten Twine-Geschichte 💫
Du kannst sie nun auf der Plattform **Glitch** veröffentlichen. (Ohne Anmeldung bleibt sie dort für eine Woche online. Sonst solange bis Du sie löschst.)
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/a29a05ab-0368-4775-8fa6-2d134b96cfab%2F1_D4PatAaU5Xu7BA5cFrNSjQ.png?v=1559166249046">
</style>
👉 [[Zeige mir, wie das geht!|glitch2]]
Eine Geschichte startest Du mit Klick auf den '+ Geschichte'-Button.
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2Fgeschichte.png?v=1561032323651">
</style>
👉 [[Das war einfach. Bitte weiter!|twine3]]
**Was möchtest Du lernen?**
* Ich habe noch keine interaktive Geschichte erstellt. [[Wie geht das?|twinestart]]
* Meine Twine-Geschichte ist schon fertig. [[Wie veröffentliche ich sie?|glitchstart]]Zuerst gibst Du Deiner Geschichte einen Titel (den kannst Du später auch wieder ändern).
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2Ftitel.png?v=1561032347284">
</style>
👉 [[Und wie dann weiter?|twine4]]Inhalte verpackst Du in so genannte Absätze. Jedem Absatz gibst Du eine Bezeichnung. Über die Bezeichnung kannst Du ihn verlinken. Und von jedem Absatz aus, kannst Du so viele neue Links setzen, wie Du möchtest. Du musst sie bis jetzt noch gar nicht erstellt haben.
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2Flinks.png?v=1561032380951">
</style>
👉 [[Wie sieht das dann aus?|twine5]]Ziemlich gut 👍
Jeder neu erstellte Link ist zu einem neuen Absatz geworden.
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2Fergebnis.png?v=1561032395902">
</style>
Alle Absätze kannst Du nun mit Doppelklick bearbeiten - so wie Du es [[schon gelernt hast|twine4]]
👉 [[Fertig? Dann geht es ans Veröffentlichen!|glitchstart]]Als erstes remixt Du das Projekt <a href="https://glitch.com/~meintwine">MeinTwine</a>
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2FCopyPasteDesign%202019-06-20%20at%2014.26.59.png?v=1561034422020">
</style>
👉 [[Und wie geht es dann weiter?|glitch3]]
Als nächstes öffnest Du die Datei index.html in Deinem remixten Projekt und löschst alle Inhalte, die sich darin befinden!
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2FCopyPasteDesign%202019-06-20%20at%2014.30.15.png?v=1561034422486">
</style>
👉 [[Okay, alles weg. Und dann?|glitch4]]
Jetzt müssen wir unsere Twine-Geschichte dort einfügen. Lade sie Dir auf Twinery.org herunter ("Als Datei veröffentlichen"). Öffne die erhaltene HTML-Datei mit einem Texteditor und kopiere alle Inhalte aus ihr in die index.html-Datei auf Glitch. (Das klingt etwas kompliziert, ist aber eigentlich ganz einfach 😎)
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2FCopyPasteDesign%202019-06-20%20at%2014.31.47.png?v=1561034422239">
👉 [[Ich habe es geschafft. Was jetzt?|glitch5]]
Deine Twine-Geschichte ist schon so gut wie online.
* Trage für sie noch eine passende URL ein.
* Und klicke dann auf 'Show'
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2FCopyPasteDesign%202019-06-20%20at%2014.37.01.png?v=1561034397528">
</style>
**Glückwunsch, sehr cool!**
Zeige jetzt am besten auch anderen Lernenden, wie es funktioniert.
👉 [[Okay, lass uns nochmals starten!|ueberblick]]
👉 [[Halt, ich will noch wissen, wie das mit Bildern geht|bilder]]
Bilder lädst Du auf Glitch unter 'assets' hoch, klickst dann drauf und kopierst Dir den Link - und setzt diesen (mit etwas mehr Code dazu, siehe Screenshot) bei Twine ein.
<style> img {
max-width: 100%;
max-height: 100%:
}
</style>
**Bilder hochladen**
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2FCopyPasteDesign%202019-06-20%20at%2014.55.50.png?v=1561035753367">
**Link kopieren**
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2FCopyPasteDesign%202019-06-20%20at%2014.57.43.png?v=1561035752095">
**Link und Code bei Twine ergänzen**
<img src="https://cdn.glitch.com/b43aa43d-82b0-45ca-a548-e870b4f6526e%2FCopyPasteDesign%202019-06-20%20at%2014.59.35.png?v=1561035752014">
👉 [[Okay, dann jetzt gerne zurück zum Überblick|ueberblick]]