Embedding

REGIONALES RECHENZENTRUM
ERLANGEN [RRZE]
Embedding
Sharing is caring

2
• Daten werden nicht nur auf einer einzigen Website gepflegt.
• Daten einer Website kommen regelmäßig aus verschiedenen,
teils unabhängigen Systemen, mit Unterschieden in
• Systeminfrastruktur (Netzanbindung, Hardware & Software),
• Betreuungssituation,
• Prioritäten,
• Designs,
• APIs (wenn überhaupt vorhanden!)
Embedding
04.09.2017 | Embedding | Wolfgang Wiese

3
• Typische fremd verwaltete Inhalte auf einer ganz normalen
Website:
• Adressdaten (z.B. in Ansprechpartner, Kontaktseiten,
Impressum),
• Lagepläne und Karten (z.B. in der Anfahrtsbeschreibung oder
Kontaktseite),
• Bilder (z.B. bei Anfahrtsbeschreibung, Profilseiten, … ),
• Termindaten (z.B. Ausgabe eines Kalender).
Embedding

4
• Zusätzlich insbes. auf universitären Seiten:
• Vorlesungsfolien, Vorlesungsskripten,
• Videos (Vorträge),
• Daten zu Lehrveranstaltungen (vergangene und laufende)
• Forschungsdaten,
• Daten aus Projektverwaltungssystemen,
• Daten aus weiteren Dokumentenmanagementsystemen (z.B.
Protokolle aus Gremien, UL-Beschlüsse, u.a.).
Embedding

5
• Früher: HTML-Code finden, kopieren und hoffen, dass man
es richtig in ein CMS (!) einfügen kann.
Embedding

6
Anforderungen heute:
• Drag & Drop
• Niederschwellig nutzbar
• Kein HTML-Gefrickel!
Keine Gefahr, fehlerhaften Code zu erzeugen oder durch das
Zulassen von HTML-Code an anderen Stellen Gefahren zu
verursachen
Embedding

7
CMS verwalten Inhalt, Ausgabe und Logik => CMS müssen auch
Embeddings ermöglichen. Und zwar niederschwellig.
• Lösungen:
• Moderne WYSIWYG-Editoren mit Drag & Drop
• Beispiel: GitHub Issues, Slack/Mattermost, uvm.
• oEmbed (http://oembed.com/)
• „Shortcodes“ (CMS eigene Funktionen zum Import)
Embedding

8
 oEmbed Live Demo:
www.beta.wordpress.rrze.fau.de/t
ests/standard-oembeds/
Embedding

9
1. Autor möchte ein Objekt (z.B. Video, Vortrag, o.a.) von einem Portal
einbinden.
2. Autor kopiert die URL aus der Adresszeile des Browsers.
3. ..und fügt sie im Editor seines CMS ein.
4. Das CMS erkennt die URL anhand der Domain und des Aufbaus der URI
und einen „API Endpoint“ auf, der die URL (bzw. definierte Teile hiervon)
als Parameter erhält.
5. Der API Endpoint beantwortet die Anfrage mit einem JSON-String, der die
Daten des Objekts und optional auch einen HTML-Code-Fragment enthält.
6. Das CMS nutzt diese Daten um das Objekt in geeigneter Weise
darzustellen.
oEmbed-Prinzip

10
Beispiel Anfrage YouTube-Video
1. Autor will folgende URL einfügen:
https://www.youtube.com/watch?v=IcMkerb1Cnc
2. CMS erkennt URL mit Schema „www.youtube.com“.
API Endpoint: www.youtube.com/oembed
3. CMS ruft auf:
https://www.youtube.com/oembed?url=https://www.youtube.c
om/watch?v=IcMkerb1Cnc
oEmbed-Prinzip

11
Beispiel Anfrage YouTube-Video:
Antwort YouTube-API:
{"provider_name":"YouTube","thumbnail_height":360,"type":"video","version":"
1.0","width":480,"author_url":"https://www.youtube.com/channel/UC5E9-
r42JlymhLPnDv2wHuA","html":"u003ciframe width="480" height="270"
src="https://www.youtube.com/embed/IcMkerb1Cnc?feature=oembed"
frameborder="0"
allowfullscreenu003eu003c/iframeu003e","author_name":"Terra X Lesch
u0026
Co","height":270,"thumbnail_url":"https://i.ytimg.com/vi/IcMkerb1Cnc/hq
default.jpg","thumbnail_width":480,"provider_url":"https://www.youtube.com
/","title":"Ru00e4tselhafter kalter Fleck im Universum | Harald Lesch"}
oEmbed-Prinzip

12
Beispiel Anfrage YouTube-Video:
Antwort YouTube-API:
{"provider_name":"YouTube","thumbnail_height":360,"type":"video","version":"
1.0","width":480,"author_url":"https://www.youtube.com/channel/UC5E9-
r42JlymhLPnDv2wHuA","html":"u003ciframe width="480" height="270"
src="https://www.youtube.com/embed/IcMkerb1Cnc?feature=oembed"
frameborder="0"
allowfullscreenu003eu003c/iframeu003e","author_name":"Terra X Lesch
u0026
Co","height":270,"thumbnail_url":"https://i.ytimg.com/vi/IcMkerb1Cnc/hq
default.jpg","thumbnail_width":480,"provider_url":"https://www.youtube.com
/","title":"Ru00e4tselhafter kalter Fleck im Universum | Harald Lesch"}
oEmbed-Prinzip

13
 Variante 1: HTML
übernehmen und in
Webseite einbinden:
<iframe width=„480“
height=„270“
src=„https://www.youtube.c
om/embed/IcMkerb1Cnc?featu
re=embed“ ..></iframe>
oEmbed-Prinzip
 Variante 2: Nur JSON-Data
betrachten und als Input für
eigenen Player nutzen..
 Komplexer
 Vorteil: Kein Fremdcode in
der eigenen Website
eingebunden.

14
• Unterstützt durch mehrere Dutzend Provider; Darunter alle
großen Content-Plattformen (vgl. oembed.com);
• Umsetzung einfach;
• JSON-Code ist performant;
• JSON-Code kann eigene Attribute haben;
• Standard gibt lediglich einen Rahmensatz an Response
Parameter abhängig vom Medientyp vor.
oEmbed

15
• Vorhandene selbst entwickelte Daten-Portale können leicht
um eine oEmbed-Schnittstelle ergänzt werden: Es wird keine
neue Logik benötigt;
• Alle relevanten Programmiersprachen besitzen Libraries zum
lesen/erzeugen von JSON und von HTTP-Requests.
oEmbed

16
• Einsatz FAU:
• oEmbed wird als API gefordert von allen Portalbetreibern und
Entwicklern von eigenen Softwarelösungen, die wollen, dass
ihre Daten in Websites embedded werden;
• Bislang nur positive Erfahrungen:
• Vorhandene Systeme haben größere Akzeptanz;
• Entwickler von Eigenlösungen haben klare Vorgabe;
• Nutzen geht über Websites hinaus (z.B. andere Systeme und auch
Mobile Apps).
oEmbed an der FAU

17
• Entwickler können über oEmbed API Endpoint auch weitere Features
einbauen. Beispiel:
• https://www.cs12.tf.fau.de/lehrstuhl/kontakt/
• https://www12.informatik.uni-erlangen.de/oembed-objekte/vgn
oEmbed an der FAU

CRIS PLUGIN
Einbindung von Forschungsdaten aus
CONVERIS
Barbara Bothe

REGIONALES RECHENZENTRUM
ERLANGEN [RRZE]
Vielen Dank für Ihre Aufmerksamkeit!
Regionales RechenZentrum Erlangen [RRZE]
Martensstraße 1, 91058 Erlangen
http://www.rrze.fau.de

Embedding

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Embedding

Ähnlich wie Embedding (20)

Mehr von Wolfgang Wiese

Mehr von Wolfgang Wiese (15)

Embedding