HTML-Spiele, -Animationen, -Interaktionen, etc.
Mit dem HTML-Eintrag kann man gezippte HTML-Projekte hochladen, um diese im Frontend anzuzeigen. Das eignet sich insbesondere für kleine, interaktive Spiele und für Animationen etc.
Für die Erstellung der HTML-Projekte sind folgende Punkte zu beachten:
- In xpedeo darf auf einer Seite nur ein HTML-Eintrag verwendet werden; dieser wird im Vollbild angezeigt. Wir empfehlen flexible, responsive Layouts zu verwenden.
- Bilder und Skripte müssen mit relativen Pfaden adressiert werden.
- Die ID- und Class-Attribute der HTML-Elemente und die dazu passenden CSS-Selektoren sollten so eindeutig sein, dass sie nicht mit den Selektoren des xpedeo-Systems in Konflikt geraten. Die CSS-Regeln sollten in einer eigenen Datei eingebunden oder direkt in der HTML-Datei angegeben werden.
MEHRSPRACHIGKEIT: Dieser Eintrag ist sprachunabhängig, wird also in die Nebensprache(n) übernommen.
Wenn Sie Wünsche für HTML-basierte Spiele in xpedeo haben, können wir Ihnen bestimmt helfen. Vielleicht können wir ein Spiel aus unserer Kollektion für Sie anpassen oder etwas neu entwickeln.
Sie müssen dafür sorgen, dass man von der Seite wieder zurückkommen kann. Bei xpedeo werden nach ein paar Sekunden die Navigationselemente (Kopfzeile mit Hauptmenü, Zurück- und Weiter-Pfeil) ausgeblendet.
Am besten sorgen Sie dafür, das bei Touch-Events in Ihrer HTML-Anwendung die Navigationselemente wieder eingeblendet werden, so passiert dies auch bei anderen Seiten.
Nutzen Sie dazu Javascript und rufen Sie auf:
window.parent.postMessage({ method: 'touchstart' }, '*')
window.parent.postMessage({ method: 'touchend }, '*')
Darüber hinaus, können Sie folgende Funktionalitäten verwenden:
- Zurück zur vorherigen Seite:
window.parent.postMessage({ method: 'back' }, '*') - Weiter zu der nächsten Seite:
window.parent.postMessage({ method: 'goToNextPage' }, '*') - Zu einer bestimmten Seite zu wechseln:
window.parent.postMessage({ method: 'showPage', pageId: 123 }, '*') - Einen Link in einem neuen Tab öffnen:
window.parent.postMessage({ method: 'openLink', href: 'https://www.xpedeo.de/' }, '*')