Agamotto zweckentfremdet
Auf dieser Seite zeige ich, dass sich der H5P Inhaltstyp Agamotto auch als Tutorial nutzen lässt. In Visuelle Exploration habe ich bereits über die Eigenschaften von Agamotto geschrieben. Mir ist natürlich klar, dass die Nutzung als ein bildlich unterstütztes How-To nicht den eigentliche Verwendungszweck von Agamotto darstellt.
Meine Idee ist aus der Not geboren: Schon seit längerer Zeit suche ich einen WordPress Plugin, der mich beim Schreiben eines reich mit Bildern (screenshots) versehenen einfachen Tutorials unterstützt. Überraschenderweise habe ich unter den derzeit fast 58.000 Erweiterungen mit Step-by-Step überhaupt nur eine gefunden, die in meine gewünschte Richtung geht. Step-by-Step hat nur etwas über 100 Installation und ist leider aus mehreren Gründen für mich unbrauchbar.
Agamotto als eine Serie von kommentierten Screenshots
Die ursprünglich Idee von Agamotto als Imageblender ist es, eine Serie von Bilder miteinander zu vergleichen. Auch auf der h5p.org-Seite wird der Nutzen ähnlich definiert:
A free HTML5-based content type that allows users to compare and explore a sequence of images interactively. Authors can decide to add a short explanatory text for each image.
Aus h5p.org
Agamotto als Tutorial zu verwenden, nutzt nicht Bildüberblendung als zentrale Funktionalität, sondern stellt stattdessen die Schrittfolge der Bilder mit dem Schieberegler zusammen mit einer individuellen Bildbeschreibung in den Mittelpunkt.
H5P 1: Agamotto
Entscheidend für eine erfolgreiche Nutzung von Agamotto als Tutorial ist es, dass unterschiedliche Bildgrößen und Textlängen verarbeitet werden können. Agamotto passt seine Darstellung den jeweils größten Bildformat und dem jeweils längsten Textfeld an. Es ist daher wichtig eine geeignete Farbe festzulegen, mit der leerer Raum bei den kleineren Bilder aufgefüllt wird. Standardmäßig ist schwarz eingestellt.
Nachteile einer Tutorial-Nutzung von Agamotto
Glücklich bin ich mit dieser Lösung nicht. Sie hat mindestens drei Nachteile:
- Das Tutorial kann nicht als Handout ausgedruckt werden.
- Vorhergehende und nachfolgende Schritte können nicht mit einem Blick eingesehen werden, sondern fordern ein Handlung der Lernenden (Verschieben des Schiebereglers).
- Abhängig von den unterschiedlichen Bildformaten und Textlängen kann ein unruhiger, disparater Eindruck entstehen.
Erweiterungsfantasien
Es wäre natürlich sehr schön, wenn es eine Möglichkeiten zum Ausdrucken gäbe.
Eine andere Erweiterungsfantasie wäre, wenn der H5P Inhaltstyp Image Hotspots integriert werden könnte. Dann könnten nämlich Lernende auf bestimmte Stellen in den Bildern klicken, um weitere – kontextabhängige – Informationen zu erhalten.
17 Antworten auf „H5P Agamotto als Tutorial“
Drucken, ja, hmm. Habe ich einmal für ein nicht-öffentliches Projekt mal direkt über die Browser implementiert. Geeeht so. Macht einem Entwickler nicht wirklch Freude. Und Drucken ist sowieso doof 😉 Ich sage mal, ich sperre mich nicht Pull-Requests …
Ich halte es aus verschiedenen Gründen nicht für sinnvoll, den Inhaltstyp nachträglich so umzubauen, dass er für andere Inhaltstypen geeignet ist. Aber, da hat jemand einen Content Slider auf seiner Liste …
Na ja, ich war mir sowieso nicht sicher, ob meine Ideen sinnvoll zu realisieren sind. Deshalb habe ich auch „Fantasien“ geschrieben.
Gegenüber dem „Nachteil“, dass das Tutorial sich nicht drucken lässt, steht übrigens auch ein Vorteil: Es wird online wenig Platz gebraucht.
Ein weiterer Nachteil, der mir jetzt beim mehrmaligen Testen meines Beispiels aufgefallen ist und den ich nicht bloß als „Fantasie“ ansehe: Es ist ein wenig mühsam, immer mit der Maus den Schieber auf die nächste Marke zu positionieren oder mit der Maus auf diese Marke zu klicken. Ich wünsche mir da eine größere Fläche (z.B. vielleicht Pfeile links und rechts, ähnlich wie bei Image Slider) und auch eine Steuerung mit der Tastatur (ebenfalls wie bei Image Slider als Vorbild). Allerdings sollten die Pfeile wahlweise ein- und ausgeschaltet werden können, da sie manchmal wichtige Bildinhalte überdecken können und dann stören würden.
Tastatursteuerung ist von Anfang an drin gewesen und ist auch nicht rausgenommen worden 😉
Extra-Pfeile konterkarieren die Idee desjenigen, der sich den Inhaltstyp mal gewünscht hat: das von den Nutzer:innen kontrollierte, graduelle Überblenden der Bilder. Das macht die Tastatursteuerung auch schon, aber sie ist ein Tribut an die Barrierefreiheit.
Mhhh, bei mir funktioniert die Tastatursteuerung bei Agamotto nicht. Bei Image Slider aber schon. Was mach ich falsch?
Ich weiß, dass Pfeile und Tastatursteuerung der ursprünglichen Idee von Image Blender widerspricht. Deshalb der Vorschlag, es als eine (zuschaltbare) Option anzubieten. Hängt aber alles davon ab, inwieweit Du die Idee Agamotto auch für Tutorials zu verwenden, brauchbar findest.
Übrigens: Habe gerade gesehen, dass Dein Advent Kalender „offiziell“ ist. Super! Logo fehlt allerdings.
Was du falsch machst? Keine Ahnung. Dafür müsste ich ja wissen, was du (bei beiden unterschiedlich) machst 😀
Ich versuche, wie Joubel oder Unix, den Einsatzzweck eines einzelnen Werkzeugs eng zu halten. Ich glaube, für Tutorials würden die meisten eher Course Presentation (da hast du dann auch gleich Aufgaben mit drin und den Slide-Effekt) oder inzwischen Interactive Book benutzen. Aber falls hier noch Stimmen auftauchen: Neeein, ich brauche das unbedingt, soll’s mir recht sein.
Ich mache nichts unterschiedlich. Habe zwei Sachen probiert:
Keyboard-Steuerung funktioniert in keinem der beiden Fälle. Provozierende Frage: Hast Du es bei Dir auch schon mal aktuell wieder probiert? Bei meinem Tutorial-Beispiel?
Ja, geht hervorragend, egal wo. Per Browserstack auch mit Safari. Provozierende Gegenfrage: Du weißt, dass man sich mit der Tabulatortaste zu Elementen mit Interaktionsmöglichkeit auf einer Website vorarbeitet?
Aha! Das mit der Tabulatortaste habe ich schon gewusst, aber ich habe auf das Bild (wie bei Image Slider auch) geklickt. Allerdings muss ich direkt auf den Schieberegler klicken, damit es mit der Pfeiltaste geht. Ok, Danke! Problem gelöst!
Aha! Nee, noch nicht gelöst. Das kann ich auch ergänzen.
Vielleicht gibt dir das aber einen kleinen Einblick, warum ich ständig mit Bezug auf Open-Source-Software jammere und was ich neulich im Webtalk angesprochen habe. Die Info, was du gemacht hast um den „Fehler“ zu erzeugen, mussten wir jetzt erst durch Ping-Ping rausfinden. Das kostet mich Freizeit. Ja, ich weiß sogar, wie meine Fragen hätten besser ausfallen können, aber ich habe gerade keine Lust mehr dazu.
Ich weiß, worauf Du mit Deiner Bemerkung anspielst. Aber ich bin mir nicht sicher, ob unser Diskurs ein gutes Beispiel für die von Dir angesprochene Problematik ist. Es war zuerst gar nicht klar, dass da ein Problem vorliegt. Erst wie ich angefangen habe, Tests auszuführen, war klar, dass da irgend etwas nicht stimmt. Dann gab es nur mehr einmal eine Rückfrage von mir und Dir. Also nur einmal: Ping-Pong->Lösung. Bei einer Situation, wo wir beide von einem Fehler ausgegangen wären, hätten wir beide gleich zu Beginn anders reagiert.
Aber ja: Ich verstehe, was Du meinst. Ich sehe diese Schwierigkeit auch bei anderen Foren. Im Open Source Statistik-Paket R wurde ein eigenes Package entwickelt, das helfen soll ein sogenanntes REPREX (Reproducible Example) zu produzieren. Und es gibt laufend und geduldig Hinweise, Tutorials etc., warum ein REPREX wichtig ist und wie dies in der Praxis zu handhaben ist, z.B. aktuell hier.
Ich weiß: Es gibt etwas ähnliches auch in H5P. Allerdings werden die 11 Regeln bei H5P gegen Ende immer schwieriger und für Laien unverständlicher: ich beziehe mich auf die Regeln 7-11 mit Ausnahme von 9 = screenshot. (Übrigens: Ich frage mich auch, ob Nummer 6 – h5p-Datei anfügen – nicht die weiteren Punkte obsolet macht. Das weiß ich aber zu wenig.)
Was aber bei H5P aus meiner Sicht auf jeden Fall fehlt, ist eine immer wieder helfende, lehrende und einspringende Community. Eine Community, die erklärt, warum die Fehlermeldung nicht gut war, was noch fehlt etc. (Und wie z.B. in StackOverflow schlecht gestellte Fragen auch negativ bewertet.) Einzelne Entwickler:innen können die Bildung der H5P-Neulingen nicht alleine stemmen. – Aber das wäre ein Thema für einen eigenen Blogpost…
Hiho!
O) Tastatursteuerung ist von Anfang an drin gewesen
P) Mhhh, bei mir funktioniert die Tastatursteuerung bei Agamotto nicht. Bei Image Slider aber schon. Was mach ich falsch?
O) Dafür müsste ich ja wissen, was du (bei beiden unterschiedlich) machst
P) Ich mache nichts unterschiedlich. Hast Du es bei Dir auch schon mal aktuell wieder probiert?
O) Du weißt, dass man sich mit der Tabulatortaste zu Elementen mit Interaktionsmöglichkeit auf einer Website vorarbeitet?
P) ich habe auf das Bild (wie bei Image Slider auch) geklickt
Das empfinde ich schon als viel Ping-Pong.
Über die Unverständlichkeit der Liste brauchen wir nicht zu reden. Ob du meinen Webtalk genau dazu gesehen hast (https://www.youtube.com/watch?v=Ugc9iStwiik), weiß ich nicht. Und trotzdem will es mir auch so nicht in den Kopf, dass manche Leute (hier meine ich jetzt nicht explizit dich!) meinen, mit „Ist kaputt, warum?“ sei eine qualifizierte Antwort zu erwarten. Zumindest doch das „Detailed steps to reproduce the bug (exactly how and when did it happen)“ sollte nicht so schwierig zu verstehen sein, und das wird schon häufig ignoriert.
Wir beide drehen uns hier aber unnötig im Kreis und wissen um unseren „Plan B“ 😉
Ok, hast recht: War ping-pong-ping-pong-ping-pong (3x ping-pong)
Nein, den Webtalk kenne ich noch nicht. Von welcher Serie ist der? Habe ich da was bei einer Serie übersehen oder gibt es eine ganze Serie, die ich nicht kenne?
Ob „Detailed steps to reproduce the bug (exactly how and when did it happen)“ wirklich für Laien einfach zu erfüllen ist, darüber muss ich noch nachdenken. Ich vermute schwer, dass da auch bereits Kontextwissen vorausgesetzt wird. Nur ein paar erste Ideen: „Ich starte Inhaltstyp XY, klicke dann auf Z und bekomme die Fehlermeldung A.“ Das erfüllt zwar die Forderung, berichtet aber nicht über alle gewählte Einstellungen des Inhaltstyps. Vielleicht wäre es besser eine detaillierte Schritt-für-Schritt Anleitung in die Hand zu geben?
Wenn ich sage „besser“ dann meine ich damit, dass es nie eine absolute Lösung, die völlig ohne Voraussetzungen ist, geben wird.
Es gibt da in der Philosophie eine schon jahrzehntelange Diskussion darüber, die sich meistens auf die Philosophischen Untersuchungen von Wittgenstein beziehen. Das siehst Du z.B. wenn due „philosophy rule following“ in Deine Suchmaschine eingibst. Nachfolgend einige Gusto-Stückerl aus Wittgenstein’s Überlegungen: (Oft wird nur der erste Teil von §201 (das Paradox) zitiert. Aber ich glaube es wird klarer, was Wittgenstein meint, wenn der Zusammenhang des berühmten Zitats ebenfalls dargestellt wird.)
Was meine Schlussfolgerung daraus ist: Für nachvollziehbare Regeln braucht es bereits eine eingeübte Gepflogenheit oder Praxis, also genau das, was Anfänger:innen noch nicht haben. Daher müssen sie in die Praxis/Gepflogenheit eingeführt werden. Das geht aber nicht mit (besonders gut ausformulierten) Regeln, sondern durch eigene praktische Erfahrungen. Im Vorfeld hilft Vorzeigen (z.B. Video) oder detaillierte HOW-TOs mit vielen Beispielen, bis dann auch irgendwann die (schriftliche) Regel/Anweisung greift. Regeln sind also nicht zwecklos, haben aber den Makel, dass sie bereits auf gemeinsame Deutungen (= eingeübte Praxis, Gepflogenheiten) aufbauen bzw. voraussetzen.
https://github.com/otacke/h5p-agamotto/commit/1dc6a02cb763481fbd2b13d6e1159a76d65aaf0c 😀
Na super! Da hat unsere Diskussion ja sogar ein ganz praktisches Ergebnis. Bin nur gespannt, ob bzw. wann dieser Pull Request integriert wird
Das klingt für mich alles schlüssig, aber die meisten versuchen es ja nicht einmal, sondern ignorieren die Hinweise komplett. Ist mir jetzt ehrlich gesagt auch egal.
Einen Pull-Request braucht es nicht – ich bin Herr meines eigenen Repositories – aber Pål weiß auf jeden Fall, dass Agamotto auf h5p.org aktualisiert werden muss.
Das ist gut, habe mich eh schon etwas darüber gewundert.
Zum Abschluss aber noch: Mir ist noch immer nicht ganz klar, worin unser Missverständnis bestand. Wieso hast Du gedacht, dass es mit Keyboard-Pfeilen funktioniert? Hast Du Dich mit Tabs bis zum Slider vorgearbeitet? (Für mich war es ganz natürlich auf das Bild zu klicken. Habe gar nicht daran gedacht, dass es eine andere Möglichkeit gibt.)
Und aus welcher Reihe stammt Dein Video bezüglich Fehlermeldungen?
Ja. So ist’s gelaufen. Und den Slider habe ich alternativ angeklickt – vermutlich, weil ich weiß, dass nur solche Elemente mit der Tastatur bedient werden können, die auch den Fokus bekommen können (einen „tabIndex“ haben und so mit der Tabulatortaste zu erreichen sind).