EN
Log in
(no ratings)

Hilfe zum Plugin Eingebettetes HTML

Entsprechende Kenntnisse vorausgesetzt, kannst du diesem Plugin du Spiele über eine kleine statische Webseite in einer Sandbox direkt in ein Dokument der Open Music Academy einbinden.

Inhalt

Die Idee

Das Plugin Embedded-HTML ist ein Tool für Nutzerinnen und Nutzer, die genau wissen, was sie tun. Die Idee dazu entstand auf Wunsch eines Studenten, der fragte, ob sich ein kleines HTML-Spiel zu den Griffen auf einem E-Bass in die OMA integrieren lasse. Technisch wäre das über das iFrame-Plugin möglich gewesen, jedoch hatte der Student keinen eigenen Webspace, um sein Tool zu veröffentlichen. Seine Arbeit bestand aus einer statischen HTML-Seite sowie der dazugehörigen Stylesheet- (CSS) und JavaScript-Datei (JS). Genau für dieses Problem entstand das Embedded-HTML-Plugin als Lösung: Es beitet die Möglichkeit, kleine interaktive Anwendungen (< 1 MB) direkt in die OMA zu integrieren. Das folgende Beispiel zeigt das Plugin in Aktion:

Verwendungen

Um das Plugin Embedded-HTML nutzen zu können, benötigt man drei Dateien, die ohne Server funktionieren müssen, die vom Plugin zusammengebaut über eine Sandbox bereitgestellt werden:

  • eineHTML-Datei
  • eine CSS-Datei. und ggf.
  • eine JavaScript-Datei.

Diese Dateien können über die entsprechende Schaltfläche des Plugins im Editier-Modus auf den OMA-Server hochgeladen werden:

Mit dem Feld Höhe lässt sich – wie beim iFrame-Plugin – die Höhe der Ansicht im Ansichts-Modus steuern. Wird diese passend gewählt, integriert sich das Plugin nahtlos in ein OMA-Dokument, ohne sichtbare Ränder oder störende Abstände.

Anmerkung:
Wird im Handy die Ansicht gedreht, kann es sein, dass die Höhe des Embedded-HTML-Plugin nicht mehr korrekt angezeigt wird. Eine Aktualisierung der Ansicht löst das Problem.

Profi-Modus

Der Profi-Modus erlaubt direkten Zugriff auf das HTML des eingebetteten Dokuments. Mit den entsprechenden Kenntnissen ist diese Funktion sehr mächtig und zwar im positiven wie im negativen Sinn. Das folgende Beispiel zeigt eine Zitat-Eingabe im Markdown-Plugin:

Achtung!
Dieses Plugin ermöglicht bei entsprechenden Kenntnissen Eingaben, die mit den Compliance-Regeln der OMA nicht kompatibel sind und das einheitliche Erscheinungsbild der Seite stören. Bitte informieren dich hier und besprich dein Vorhaben ggf. mit einem Maintainer oder Administrator. Sollten deine Eingaben in dem Plugin das Erscheinungsbild der OMA stören, werden sie (auch in Zweifelsfällen) von der Redaktion gelöscht!

Im folgende Beispiel zeigt dieselbe Texteingabe, diesmal jedoch mit einer Manipulation des Document Object Models (DOM) durch das Embedded-HTML-Plugin:

Das Beispiel veranschaulicht, wie weitreichend die Möglichkeiten sind, über das Embedded-HTML-Plugin in das Layout der einzugreifen. Es zeigt aber auch, wie schnell sich das einheitliche Erscheinungsbild der OMA zerstören lässt, wenn man nach persönlichem Geschmack an Farben und Layout herumspielt. Dafür wurde dieses Plugin nicht entwickelt!

Das Plugin ist für Anwendungsfälle gedacht, die einen echten Mehrwert für das Lernen bieten, also für Funktionalitäten, die sich sinnvoll in die OMA integrieren lassen. Es ist für Personen gedacht, die HTML-, CSS- und JavaScript-Kenntnisse haben, die sich jedoch nicht an die Aufgabe heranwagen, ein eigenes Plugin für die OMA zu entwickeln.

Beispiele

Ein Tutorial zur Funktionsweise eines Plattenspielers könnte z.B. über das Embedded-HTML-Plugin eine interaktive Möglichkeit bereitstellen, die das Starten und Stoppen eine Schallplatte zu erkunden:

Weitere Beispiele, die sich mit dem Plugin Eingebettetes HTML anzeigen lassen, findest du hier: static-oma-pages

Wenn du deine eigene Anwendung dem Repository hinzufügen möchtest, gehe folgendermaßen vor:

  • Erstelle dir einen GitHub-Account und installiere dir GIT auf deinen Rechner.
  • Gehe dann auf die Seite des Original-Repositorys und klicke oben rechts auf den Fork-Button. Damit erstellst du eine eigene, unabhängige Kopie des Repositorys in deinem GitHub-Account.
  • Kopiere (klone) dir den Fork lokal auf deinen Rechner mit
    • git clone https://github.com/musikisum/static-oma-pages
  • In diesem Ordner kannst du nun einen Ordner mit deiner eigenen Entwicklung dem Repository hinzufügen. Das speicherst du wie folgt in deinem Fork
    • git add .
    • git commit -m "Beschreibung der Anwendung"
    • git push origin name-des-neuen-features
  • Als letztes erstellst du einen Pull Request. Gehe dazu auf die GitHub-Seite deines Forks. Oben wirst du einen gelben Balken sehen, der vorschlägt, einen Pull Request zu erstellen. Dann kannst du im Tab Pull Requests auf New pull request klicken und stelle sicher, dass das base repository das Original-Repositorium und das head repository dein Fork ist. Füllen Titel und Beschreibung aus und klicken anschließend auf Create pull request Der Autor wird sich dann deine Entwicklung anschauen und kann es ins Repositorium übernehmen.