Wie kann ich interaktive Dateien mit Hoverfunktionen und Seitennavigation in meine Webseite einbinden?
Hallo und guten Tag.
Wie binde ich eine Datei nahtlos auf meiner Webseite ein (Grafik-Programm Export: HTML5-Code), die Fotos, Animationen, Hovertexte und die Seitennavigation (Branching über Klick-Buttons) enthält?
Ich möchte die Datei nahtlos auf der Seite laufen lassen, sodass nicht ein zusätzlicher Frame oder ein Popup/Lightbox aufgeht.
Beispiele sind Interaktive Infografiken oder E-Learning-Kurse mit Hover, mehrere Seiten, die über klickere Buttons erreichbar sind.
Ich bitte um Nachsicht, da ich Grafiker bin und diese Funktion nur von Programmen kenne und selbst nicht programmiere.
Manche schaffen das, aber wie?
Es gibt sogar die Möglichkeit, über ein beliebiges HTML5-Pugin eine solche interaktive Datei auf der Seite einzubinden und von einem dritten Ort auf einer Grafikplattform in Echtzeit auf der Webseite zu bearbeiten, während der Betrachter sich die Datei anschaut (Real-time Präsentationsfunktion). Wie funktioniert das?
Lieben Dank für alle Hinweise
1 Antwort
Wie binde ich eine Datei nahtlos auf meiner Webseite ein (Grafik-Programm Export: HTML5-Code), (...)
Zunächst müsste geklärt werden, welche Schnittstellen dir zur Verfügung stehen. Wenn du deine Webseite mit einem Webbaukasten verwaltest oder ein CMS benutzt, gibt es womöglich ein Tool (Insert HTML o.ä.), welches du nutzen kannst.
Wenn du direkten Zugriff auf die Dateien hast, in denen das HTML definiert wird, solltest du erst einmal die Stelle heraussuchen, an der deine neuen Inhalte platziert werden sollen. Außerdem müsstest du schauen, was dein HTML-Export beinhaltet und wie du ihn aufteilst (style-Tags kommen z.B. in den head). Bei einer Webseite, die dynamisch zusammengebaut wird, ist das unter Umständen nicht so einfach.
Eine Mindestvoraussetzung hierbei wäre das grundlegende Wissen über die Struktur von HTML-Dokumenten. Die ersten drei Kapitel auf SelfHTML zu HTML sind an dieser Stelle hilfreich.
Ich möchte die Datei nahtlos auf der Seite laufen lassen, sodass nicht ein zusätzlicher Frame (...) aufgeht.
Die Einbindung via iFrame wäre allerdings die einfachste Variante. Visuell kann man das auch leicht verbergen, indem man einfach den Rahmen ausblendet.
Beispiel:
<iframe height="100" src="some-document.html" style="border:0" width="100">
Deine Inhalte / dein Export würde in einem extra HTML-Dokument (im Beispiel some-document.html) liegen.
Es gibt sogar die Möglichkeit, über ein beliebiges HTML5-Pugin (...) Wie funktioniert das?
Das Plugin wird eine Socket-Verbindung zum Grafikprogramm herstellen und in Folge dessen Änderungen auf die Webseite transportieren. Browserplugins haben auch Zugriff auf das DOM einer Webseite.
Lass den iFrame auf ein HTML-Dokument verweisen, welches das Standbild repräsentiert. In diesem Dokument kannst du einen Link packen (ob nun als zentrierte Schaltfläche oder über die komplette Fläche), der auf ein zweites Dokument verweist, welches dann den Kurs beinhaltet.
Wie gesagt hebt sich ein iFrame visuell nur durch seinen Rand ab, den man, wie oben gezeigt, deaktivieren kann.
Hallo!. Lieben Dank für deine Antwort. Wenn ich dich richtig verstanden habe, ist es genau das, was ich im Moment mache. Dadurch dass ich auf ein Standbild verweise, muss der User letztlich 2x klicken bis die interaktive Datei läuft bzw. bis er an die Infografik gelangt, die beim hovern bzw. klicken Funktionen zeigt ... Es gibt Internetseiten, da gibt es diese 2 Klicks nicht bzw. kann man aus manchen Programmen heraus links erzeugen, die die interaktiven Grafiken gleich Inline auf einer beliebigen Webseite einbauen: Also Webseite --> Grafik --> User hat direkten zugriff auf Funktionen ohne ein 2. mal klicken zu müssen. Das ist cool... Nur leider läuft dieser html5 code/link nur mit direkter Verbindung zum Anbieter der Infografiken bzw. Software mit der die gebaut sind... Also: Kein Abo oder keine Firma mehr - ergo Funktion futsch
Um den zweiten Klick zu umgehen, müsste man erst in Erfahrung bringen, wie die Implementation deiner interaktiven Anwendung genau aussieht und ob es evt. Schnittstellen gibt, an die man z.B. mit JavaScript anknüpfen könnte.
Um es einmal am Beispiel eines Videos zu demonstrieren: Der Browser bietet zum Standardvideoplayer eine Schnittstelle, mit der man bspw. die Videowiedergabe starten kann. So könnte man mit HTML und CSS einfach ein Bildelement (Standbild) über dem Video platzieren und bei Klick via JavaScript zwei Aktionen gleichzeitig triggern: Das Entfernen des Bildes aus dem Sichtbereich und die Videowiedergabe.
Hey - lieben Dank! Da sind schon ein paar super Hinweise dabei, die ich jetzt erst mal testen werde.
I-Frame wäre echt das einfachste - nur wenn ich so einen interaktiven Kurs starte ist das nicht so elegant weil ich ein Standbild brauche und dann erst die Datei geladen wird, die man dann mit einem weiteren Klick starten muss .... Sieht nicht so professionell und smokt aus auf der Seite.