Subskrybuj newsletter o cyfrowej humanistyce i innowacjach w sektorze kultury

Budujemy muzealną grę tekstową z Twine i zbiorami Muzeum Emigracji (część III)

Okładka lekcji: samotny kot siedzący na nabrzeżu portu / Źródło: AI

Wprowadzenie

W poprzednich lekcjach poświęconych Twine (pierwszej i drugiej) pracowaliśmy dużo ze strukturą gry i jej mechanizmami. Pora na uzupełnienie naszej gry o materiały historyczne ze zbiorów Muzeum Emigracji w Gdyni.

Cele lekcji

Efekty

Dzięki tej lekcji uzupełnimy naszą grę o dynamicznie wczytywane materiały z publicznych zbiorów Muzeum Emigracji oraz poprawimy wygląd poszczególnych leksji. Praca ze składnią Harlowe będzie też dobrym wprowadzeniem do stosowania języków znaczników (markup language), zwłaszcza języka Markdown. Języki takie jak Markdown bardzo upraszczają budowanie struktury HTML stron internetowych.

Wymagania

Skorzystanie z bieżącej lekcji wymaga zapoznania się z poprzednimi lekcjami poświęconymi Twine. Będziemy pracować w przeglądarce. Do pracy z HTML i Harlowe możemy wykorzystać ChatGPT, który szybko wygeneruje nam składnię nawet skomplikowanych elementów.

Część merytoryczna

Treści umieszczane na stronach WWW publikowane są za pomocą elementów języka HTML. HTML (HyperText Markup Language) udostępnia zestaw znaczników (tagów), z których złożyć możemy strukturę strony internetowej oraz określić jej relacje z innymi stronami za pomocą linków - stąd skrót HTML rozwijamy jako Hipertekstowy Język Znaczników (HyperText Markup Language). Oto prosty przykład kodu HTML, w którym tworzy się link (odnośnik) za pomocą elementu a i atrybutów (href, title i target):

<a href="https://zbiory.muzeumemigracji.pl/" title="Zbiory Muzeum Emigracji" target="_blank">Zbiory Muzeum Emigracji</a>

W HTMLu definiujemy strukturę strony, umieszczając w niej nagłówki, akapity, obrazy, linki czy materiały multimedialne. Określamy za jego pomocą także metadane każdej strony (w sekcji head). Dzięki strukturze HTML przeglądarki wiedzą, jak wyświetlać (renderować) stronę, a my możemy korzystać z kwerend XPatch. Swoją drogą to dość niezwykłe, że nawet bardzo dynamiczne i skomplikowane strony czy aplikacje webowe są formalnie dokumentami, posiadającymi nagłówki i stopki.

HTML: struktura informacji i semantyka

HTML może - ale nie musi - być wykorzystywany także do formatowania tekstu dostępnego na stronie. Pojawia się tutaj problem semantyczności HTML. Semantyczność HTML polega na używaniu odpowiednich znaczników, które nie tylko definiują wygląd elementów na stronie, ale również precyzyjnie określają ich znaczenie i rolę w kontekście treści. Dzięki temu strony są bardziej zrozumiałe dla osób przeglądających, wyszukiwarek internetowych i technologii wspomagających dostępność stron dla osób ze specjalnymi potrzebami (np. osób niedowidzących, korzystających z czytających przeglądarek).

Weźmy paragraf tekstu ze zdaniem, w którym umieścimy pewne informacje:

<h2>Godziny otwarcia</h2>
<p>Z przyjemnością informujemy, że od dnia 1 kwietnia 2024 wydłużamy godziny otwarcia muzeum. Zapraszamy codziennie (oprócz poniedziałków) od <strong>9:00</strong> do <strong>21:00</strong>.</p>

Treść elementu HTML strong zostanie przez przeglądarkę wyboldowana. Zmieni się estetyka tekstu, ale też w pewnym stopniu zakres przekazywanych za jego pomocą informacji. Na stronie opisującej element strong czytamy, że:

Element <strong> służy do oznaczania treści o “dużym znaczeniu” (strong importance), włączając w to informacje o poważnym charakterze lub pilności (takie jak ostrzeżenia). Oznaczone tym elementem może być zdanie o dużym znaczeniu dla całej strony, możesz też po prostu chcieć zwrócić uwagę, że pewne słowa są ważniejsze w porównaniu z sąsiednimi.

Tak więc używając strong nie tylko zmieniamy rodzaj fontu na pogrubiony (bold), ale też podkreślamy znaczenie informacji umieszczonej w tym tagu. Inny sposób wykorzystania HTML do oznaczania znaczenia przekazywanych informacji ilustruje poniższy przykład:

<p>Z przyjemnością informujemy, że od dnia <time datetime="2024-04-01T09:00">1 kwietnia 2024 roku</time> zmieniamy godziny otwarcia muzeum. Od tego dnia będziemy otwarczy codziennie od <time datetime="09:00">9:00</time> do <time datetime="21:00">21:00</time>.</p>

Użyliśmy tym razem tagu time, który reprezentuje wybrany czas.

Niedaleko stąd do semantycznych wydań cyfrowych w standardzie TEI (Text Encoding Initiative), w których poszczególne elementy tekstu oznacza się w podobny sposób. XML w standardzie TEI stosowany jest do publikowania w postaci cyfrowej źródeł historycznych, literatury czy transkrypcji. XML to uniwersalny i rozszerzalny język znaczników (Extensible Markup Language), dający - w odróżnieniu od HTMLa - większą swobodę w definiowaniu i stosowaniu tagów (elementów). Co ciekawe, XML i HTML pochodzą od tego samego języka, powstałego jeszcze pod koniec lat 80. SGML.

Markdown - łatwiejsza praca z HTML

Praca z HTML bywa uciążliwa, przede wszystkim przez koniczność otwierania i zamykania tagów (<p>Lorem Ipsum…</p>) czy budowania skomplikowanych struktur dla niektórych form prezentacji informacji. Przykładowo, zbudowanie prostej listy muzeów w HTML wymagać będzie korzystania z tagów ul i li oraz oczywiście ich otwierania i zamykania:

<ul>
    <li>Muzeum Narodowe w Warszawie</li>
    <li>Muzeum Historii Polski w Warszawie</li>
    <li>Muzeum Powstania Warszawskiego</li>
    <li>Muzeum Narodowe w Krakowie</li>
    <li>Muzeum Żydów Polskich POLIN w Warszawie</li>
</ul>

W 2004 roku John Gruber and Aaron Swartz zaproponowali język znaczników Markdown, który w radykalny sposób upraszczał pisanie kodu w HTML. Zbudowanie listy w Markdown nie wymaga otwierania i zamykania tagów ani tworzenia skomplikowanej struktury elementów - wystarczy użyć myślnika:

- Muzeum Narodowe w Warszawie
- Muzeum Historii Polski w Warszawie
- Muzeum Powstania Warszawskiego
- Muzeum Narodowe w Krakowie
- Muzeum Żydów Polskich POLIN w Warszawie

Podobnie prostsze jest tworzenie innych podstawowych elementów struktury strony:

Formatowanie Markdown Odpowiednik HTML Przykład
*Kursywa* <em>Kursywa</em> Kursywa
**Pogrubienie** <strong>Pogrubienie</strong> Pogrubienie
`Kod` <code>Kod</code> Kod
[Link](#) <a href="#">Link</a> Link
> Cytat <blockquote>Cytat</blockquote> > Cytat

W ten sposób pisze się HTML zdecydowanie szybciej. Korzystanie z Markdown można poćwiczyć w jednym z wielu edytorów.

Harlowe - format opowieści w Twine

Markdown nie jest jedynym rozwiązaniem, które pozwala na uproszczenie pracy z HTML. Przykładowo, Wikipedia także stosuje podobny, uproszczony język budowania struktury stron (haseł) - to wikitext. Twine, w którym pracujemy nad naszą grą tekstową, także korzysta z podobnych metod. Wpakowane są one w tzw. formaty opowieści (story formats), które udostępniają nie tylko różną składnię pisania leksji, ale też różne możliwości budowania interakcji czy inne estetyki wyglądu stron hipertekstu. Te style to Harlowe, SugarCube, Snowman i Chapbook. Do tej pory korzystaliśmy z Harlowe, który jest domyślnym stylem Twine. Podstawowe formatowanie tekstu w Harlowe jest bardzo proste:

Formatowanie Kod znacznika Wygenerowany HTML
Kursywa //tekst// tekst
Pogrubienie ''tekst'' tekst
Przekreślenie tekstu ~~tekst~~ tekst
Podkreślenie *tekst* tekst
Silne podkreślenie **tekst** tekst
Indeks górny metry/sekunda^^2^^ metry/sekunda2

Aby poznać zasady tworzenia innych elementów struktury, należy zapoznać się z dokumentacją Harlowe. W naszej grze wykorzystamy tylko niektóre z nich.

Zobaczmy, jak wygląda praktyka pracy z Harlowe. Aby otoczyć ramką tekst, wybieramy odpowiednie makro (border lub b4r) i wskazujemy odpowiedni styl (dotted wygeneruje ramkę zbudowaną z kropek, solid - gładką itp.). Makro podajemy w nawiasach okrągłych, a treść, która ma być przetwarzana przez makro, w nawiasach kwadratowych:

(b4r:"dotted")[23 września 1922 roku polski sejm uchwalił ustawę o budowie portu w Gdyni]

Jak wiemy już z poprzednich lekcji, Twine i Harlowe pozwalają na budowanie dynamicznej treści leksji. Wykorzystaliśmy już makra pozwalające na przypisywanie i modyfikowanie zmiennych oraz losowanie wartości. Dokumentacja Harlowe opisuje wiele dostępnych makr, warto z nich wybrać choćby makro live, które pozwala dodać trochę dynamiki do przygotowywanych przez nas leksji.

Makro (live)

Pamiętamy, że jedna z leksji naszej gry to symulacja bójki z pijanym marynarzem. Oto fragment kodu tej leksji:

Nie dajesz sobie w kaszę dmuchać, a pijany marynarz może mieć ze sobą jakieś cenne przedmioty. Stajesz do walki!

(set: $wynik_bojki to (either: 0, 0, 0, 1, 1, 2))

(if: $wynik_bojki is 1)[
  Wygrałeś! Portfel + 25, zdrowie -5.
 (set: $zdrowie to $zdrowie - 5)
  (set: $portfel to $portfel + 25)
]
(else-if: $wynik_bojki is 2)[
 Przegrałeś z kretesem! Nigdy nie bij się z pijanym marynarzem, bo zawsze zawoła po kolegów! Portfel - 25, zdrowie - 25.
  (set: $zdrowie to $zdrowie - 25)
  (set: $portfel to $portfel - 25)
]
 (else:)[
  Zanim zaczęliście bójkę na serio pojawiła się policja i wszyscy się rozbiegli.
  Zdrowie -2
  (set: $zdrowie to $zdrowie - 2)
]

Makro set definiuje losowo zmienną $wynik_bojki i w zależności od tego dodaje, zabiera lub nie zmienia nic w zasobach gracza (korzystamy z instrukcji warunkowych). Możemy tę leksję zrobić bardziej komiksową, jeśli skorzystamy z makra live:

(live: 0.5s)[
    (either: "Trach!", "Bum!", "Bam!", "Ciach!", "Bęc!")
]

Tak wykorzystane makro live co pół sekundy wyświetli kolejny napis z kolekcji komiksowych odgłosów walki. Zwróćmy uwagę na składnię: nazwa makra i parametr umieszczamy w nawiasach okrągłych, treści, które mają być wyświetlane - w kwadratowych. Treści te są także parsowane przez makro (either), wybierające z zestawu elementów jeden element.

Pokaz slajdów historycznych w Twine

Zależy nam jednak nie tyle na komiksowych efektach, ale prezentacji zbiorów Muzeum Emigracji. Makro live możemy wykorzystać do budowy prostego pokazu slajdów.

Jedna z leksji naszej gry opisuje nocleg bohatera w hotelu robotniczym. W zasobach udostępnianych przez Muzeum Emigracji znajdziemy fotografie dokumentujące wnętrza obozu emigracyjnego na Grabówku. Doskonale zilustrują one przestrzenie hotelu robotniczego z epoki. Przeglądamy zbiory muzeum cyfrowego i wybieramy interesujące nas reprodukcje. Możemy skopiować adresy URL stron obiektów, adresy ich wizerunków cyfrowych (pliki jpg) oraz tytuły (opisy). Wszystkie elementy oddzielamy przecinkiem, a dane dotyczące każdego obiektu wpisujemy od nowej linii:

https://zbiory.muzeumemigracji.pl/obiekty/4239,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/f4/fc/f4fcd73d847cfb952cea9163fe1a1d4a.jpg,Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4248,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/d4/85/d4854d6c564373beb9e7e2c1df7980c0.jpg,Fotografia przedstawiająca łazienki w obozie emigracyjnym w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4232,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/9a/f5/9af5dba712dc299597b5bcb72045464d.jpg,Fotografia przedstawiająca jadalnię w obozie emigracyjnym w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4240,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/66/d2/66d27371104bf39902c9f7806a536823.jpg,Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni

To nic innego jak dane w postaci CSV (comma-separated values) 😎. Wykorzystajmy teraz ChatGPT żeby przetworzyć te dane do postaci HTML, który będzie wyświetlany w leksji. Użyjmy następującego prompta:

przetwórz podane po dwukropku dane tak, aby wygenerować kod HTML zagnieżdżający obrazek i publikujący poniżej niego opis tego obrazka. Niech opis będzie podlinkowany: https://zbiory.muzeumemigracji.pl/obiekty/4239,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/f4/fc/f4fcd73d847cfb952cea9163fe1a1d4a.jpg,Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4248,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/d4/85/d4854d6c564373beb9e7e2c1df7980c0.jpg,Fotografia przedstawiająca łazienki w obozie emigracyjnym w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4232,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/9a/f5/9af5dba712dc299597b5bcb72045464d.jpg,Fotografia przedstawiająca jadalnię w obozie emigracyjnym w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4240,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/66/d2/66d27371104bf39902c9f7806a536823.jpg,Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni

W rezultacie otrzymamy:

<div>
    <img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/f4/fc/f4fcd73d847cfb952cea9163fe1a1d4a.jpg" alt="Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni" />
    <p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4239">Opis zdjęcia</a>: Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni</p>
</div>

<div>
    <img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/d4/85/d4854d6c564373beb9e7e2c1df7980c0.jpg" alt="Fotografia przedstawiająca łazienki w obozie emigracyjnym w Gdyni" />
    <p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4248">Opis zdjęcia</a>: Fotografia przedstawiająca łazienki w obozie emigracyjnym w Gdyni</p>
</div>

<div>
    <img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/9a/f5/9af5dba712dc299597b5bcb72045464d.jpg" alt="Fotografia przedstawiająca jadalnię w obozie emigracyjnym w Gdyni" />
    <p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4232">Opis zdjęcia</a>: Fotografia przedstawiająca jadalnię w obozie emigracyjnym w Gdyni</p>
</div>

<div>
    <img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/66/d2/66d27371104bf39902c9f7806a536823.jpg" alt="Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni" />
    <p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4240">Opis zdjęcia</a>: Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni</p>
</div>

Jak widać, także w taki sposób można ułatwiać sobie pracę z obszernymi strukturami HTML. Tak przygotowany kod musimy jeszcze odpowiednio sformatować, aby można go było włożyć do pętli makro live. W tym celu wpiszmy taki prompt:

sformatuj każdy kod zawierający obrazek i opis do jednej linii, otocz go pojedynczym cudzysłowem (') i po każdym z wyjątkiem ostatniego dodaj przecinek

W efekcie otrzymamy:

'<div><img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/f4/fc/f4fcd73d847cfb952cea9163fe1a1d4a.jpg" alt="Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni" /><p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4239">Opis zdjęcia</a>: Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni</p></div>',

'<div><img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/d4/85/d4854d6c564373beb9e7e2c1df7980c0.jpg" alt="Fotografia przedstawiająca łazienki w obozie emigracyjnym w Gdyni" /><p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4248">Opis zdjęcia</a>: Fotografia przedstawiająca łazienki w obozie emigracyjnym w Gdyni</p></div>',

'<div><img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/9a/f5/9af5dba712dc299597b5bcb72045464d.jpg" alt="Fotografia przedstawiająca jadalnię w obozie emigracyjnym w Gdyni" /><p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4232">Opis zdjęcia</a>: Fotografia przedstawiająca jadalnię w obozie emigracyjnym w Gdyni</p></div>',

'<div><img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/66/d2/66d27371104bf39902c9f7806a536823.jpg" alt="Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni" /><p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4240">Opis zdjęcia</a>: Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni</p></div>'

Zastosowanie pojedynczego cudzysłowa jest konieczne, ponieważ w naszym kodzie są już podwójne cudzysłowy ". Korzystanie tylko z podwójnych cudzysłowów wygenerowałoby błąd, ponieważ makro przetwarzające nasze kody HTML nie wiedziałoby, gdzie kończy się kolejny z czterech podanych przez nas elementów.

Wystarczy teraz usunąć ręcznie niepotrzebne puste linie i całą treść wrzucić do makra live. Parametr 4s określa, że slajdy zmieniać się będą co cztery sekundy:

(live: 4s)[
(either: 
'<div><img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/f4/fc/f4fcd73d847cfb952cea9163fe1a1d4a.jpg" alt="Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni" /><p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4239">Opis zdjęcia</a>: Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni</p></div>',
'<div><img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/d4/85/d4854d6c564373beb9e7e2c1df7980c0.jpg" alt="Fotografia przedstawiająca łazienki w obozie emigracyjnym w Gdyni" /><p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4248">Opis zdjęcia</a>: Fotografia przedstawiająca łazienki w obozie emigracyjnym w Gdyni</p></div>',
'<div><img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/9a/f5/9af5dba712dc299597b5bcb72045464d.jpg" alt="Fotografia przedstawiająca jadalnię w obozie emigracyjnym w Gdyni" /><p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4232">Opis zdjęcia</a>: Fotografia przedstawiająca jadalnię w obozie emigracyjnym w Gdyni</p></div>',
'<div><img src="https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/66/d2/66d27371104bf39902c9f7806a536823.jpg" alt="Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni" /><p><a href="https://zbiory.muzeumemigracji.pl/obiekty/4240">Opis zdjęcia</a>: Fotografia przedstawiająca sypialnię w obozie emigracyjnym w Gdyni</p></div>'
)]

Ten kod możemy umieścić w wybranej leksji.

Leksja z dynamicznym wyświetlaniem fotografii / Źródło: Twine

Podobny zabieg możemy wykonać dla leksji opisującej pracę w porcie:

https://zbiory.muzeumemigracji.pl/obiekty/4310,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/68/a5/68a5023e257a4c1103c29ba2ae00b960.jpg,Fotografia przedstawiająca statek S/S "Pułaski" w porcie w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4307,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/ac/0d/ac0dba8c7839e5dc70f164ad9a97fe6d.jpg,Fotografia przedstawiająca wpłynięcie statku S/S "Pułaski" do portu w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4172,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/1c/20/1c20fd130c64c240b257d3b949ba2b88.jpg,Fotografia przedstawiająca budynki portowe w Gdyni
https://zbiory.muzeumemigracji.pl/obiekty/4174,https://cdn-zbiory.muzeumemigracji.pl/upload/cache/multimedia_big/9f/cc/9fccca7087ba8e96c41d3fe78e497b15.jpg,Fotografia przedstawiająca widok na port w Gdyni

Podsumowanie

Udało nam się umieścić w naszej grze obiekty ze zbiorów Muzeum Emigracji, a dzięki odpowiedniemu makro możemy je dynamicznie wyświetlać w wybranych leksjach. Cała nasza praca została wykonana z wykorzystaniem Harlowe, uproszczonego języka znaczników. Pozwala on nie tylko na dodawanie elementów estetycznych (ramki, kursywy itp.) ale też dodatkowej mechaniki (losowanie, pętle, instrukcje warunkowe itp.). Nasza gra z pewnością wymaga jeszcze wiele pracy - dzięki lekcjom będziemy już wiedzieli, jak ją dalej rozwijać.

Wykorzystanie metod

Warto zainteresować się uproszczonymi językami znaczników, aby przyspieszyć i ułatwić sobie pracę z HTML. Markdown jest powszechnie wykorzystywany w pracy nad dokumentacją publikowaną online. Dokumentacja projektów programistycznych, aplikacji i narzędzi często udostępniana jest w postaci plików .md. Tak właśnie przygotowana została np. dokumentacja dla projektów cyfrowych Wellcome Collection dostępna na GitHubie.

Markdown pozwala autorom i autorkom koncentrować się na przygotowaniu treści, a nie na jej formatowaniu. Na użycie tego języka w pracy nad treścią witryny pozwalają też popularne platformy blogowe, takie jak Medium czy WordPress.

Twine wykorzystać można nie tylko do budowania gier tekstowych, ale też tworzenia interaktywnych fikcji czy prezentacji, przewodników, tutoriali czy podręczników.

Pomysł na warsztat

Niniejsza lekcja jest częścią warsztatu z budowania gier tekstowych w Twine. Jeśli chcesz ją wykorzystać poza tym kontekstem, możesz zaplanować ćwiczenie z edycji tekstu w Markdown z wykorzystaniem edytora Dillinger. Zwróć uwagę, że ten edytor pozwala zagnieżdżanie plików graficznych i eksport treści do PDF, dzięki czemu uczestnicy i uczestniczki warsztatu mogą przygotować prostą broszurę do druku.