Embedding

Sharing is caring

Transcript

1. REGIONALES RECHENZENTRUM ERLANGEN [RRZE] Embedding Sharing is caring
2. 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. 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 04.09.2017 | Embedding | Wolfgang Wiese
4. 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 04.09.2017 | Embedding | Wolfgang Wiese
5. 5 • Früher: HTML-Code finden, kopieren und hoffen, dass man es richtig in ein CMS (!) einfügen kann. Embedding 04.09.2017 | Embedding | Wolfgang Wiese
6. 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 04.09.2017 | Embedding | Wolfgang Wiese
7. 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 04.09.2017 | Embedding | Wolfgang Wiese
8. 8 § oEmbed Live Demo: www.beta.wordpress.rrze.fau.de/t ests/standard-oembeds/ Embedding 04.09.2017 | Embedding | Wolfgang Wiese
9. 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 04.09.2017 | Embedding | Wolfgang Wiese
10. 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 04.09.2017 | Embedding | Wolfgang Wiese
11. 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\" allowfullscreen\u003e\u003c\/iframe\u003e","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":"R\u00e4tselhafter kalter Fleck im Universum | Harald Lesch"} oEmbed-Prinzip 04.09.2017 | Embedding | Wolfgang Wiese
12. 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\" allowfullscreen\u003e\u003c\/iframe\u003e","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":"R\u00e4tselhafter kalter Fleck im Universum | Harald Lesch"} oEmbed-Prinzip 04.09.2017 | Embedding | Wolfgang Wiese
13. 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. 04.09.2017 | Embedding | Wolfgang Wiese
14. 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 04.09.2017 | Embedding | Wolfgang Wiese
15. 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 04.09.2017 | Embedding | Wolfgang Wiese
16. 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 04.09.2017 | Embedding | Wolfgang Wiese
17. 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 04.09.2017 | Embedding | Wolfgang Wiese
18. CRIS PLUGIN Einbindung von Forschungsdaten aus CONVERIS Barbara Bothe
19. REGIONALES RECHENZENTRUM ERLANGEN [RRZE] Vielen Dank für Ihre Aufmerksamkeit! Regionales RechenZentrum Erlangen [RRZE] Martensstraße 1, 91058 Erlangen http://www.rrze.fau.de