:: Freinet-Online ::

Statt Iframe: Verbesserte Einbindung durch ›Webomponents‹

Mittels unserer Webcomponents (oder Webkomponenten) können Sie die veröffentlichten Datensätze auf Ihrer Homepage zu präsentieren.
Erfahren Sie hier einige Vorteile von Webkomponenten gegenüber Iframes

Auf Ihrer Homepage können Sie (bzw. Ihr Webmaster) an passender Stelle folgenden Quellcode einbauen:

<script type="module" src="https://www.freinet-online.de/js/webcomponent/app/v1/freinet-suche-web-component.esm.js"></script>

An der Stelle an der die Freinet Ehrenamtssuche integriert werden soll, kann das Custom-Tag <freinet-verwaltete-suche> verwendet werden. Üblicherweise wird das Tag im <body> Bereich der Webseite integriert. Es können beliebige andere HTML Elemente davor oder danach verwendet werden. Ebenso die Integration des Custom-Tags in andere Elemente (z.B. ein <div> o.ä.) ist möglich.

<freinet-verwaltete-suche></freinet-verwaltete-suche>

Das einfachste Setup wäre z.B.

<html>
   <head>
      <script type="module" src="https://www.freinet-online.de/js/webcomponent/app/v1/freinet-suche-web-component.esm.js"></script>
   </head>
   <body>
      <freinet-verwaltete-suche api-key="IHR_API_KEY"></freinet-verwaltete-suche>
   </body>
</html>

Konfiguration der Ehrenamtssuche

Es stehen folgende Attribute bereit, die mit dem Tag verwendet werden können.

Attributname	Datentyp und Beispiel	Beschreibung
`backend-url` (Optional)	Ist vom Datentyp `string`. Ein Beispiel für eine Konfiguration ist z.B. `https://freinet-online.de/query/webcomponents/`	Dieses Optionale Attribut ermöglicht es die Suchkonfiguration von einer bestimmten URL nachzuladen. Üblicherweise bleibt dieses Attribut unkonfiguriert, da die Web Component der Ehrensamtssuche bereits ohne explizit Angabe eine gültige Konfiguration mitliefert.
`api-key` (Optional)	Ist vom Datentyp `string`.	Ist bei jeder load-module-Option, bis auf `load-module="eak"` ein Pflichtattribut!
`eak-agid` (Optional)	Ist vom Datentyp `number`.	Wird nur bei `load-module="eak"` benötigt!
`load-module` (Optional)	Ist vom Datentyp `string`. Default: angebot Kann folgende Werte annehmen: `angebot` [api-key pflicht] `veranstaltung` [api-key pflicht] `veranstalter` [api-key pflicht] `eak` [eak-agid pflicht]	Dieses Attribut ändert je nach Option den Endpunkt, an dem die Daten zu dem jeweiligen Modul abgeholt werden. Je nach Option wird ein zusätzliches Attribut, wie api-key oder eak-agid pflicht.
`avoid-iframe-modal` (Optional)	Ist vom Datentyp `boolean`. Default: false.	Dieses Attribut ermöglicht es Ihnen das Verhalten der Weiterempfehlungslink’s anzupassen. Standardmäßig öffnen diese in einem iFrame-Modal. Wird diese Option gesetzt, öffnen diese danach in einem neuen Tab.
`disable-load-spinner` (Optional)	Ist vom Datentyp `boolean`. Default: false.	Das Attribut ermöglicht es Ihnen die Ladeanzeige der Web-Component zu deaktivieren.
`disable-autoscroll` (Optional)	Ist vom Datentyp `boolean`. Default: false.	Ermöglicht das Deaktivieren des Auto-Scrolling-Features, womit der Nutzer zum Anfang der Ergebnisliste/des Angebots gescrollt wird, falls dieses nicht im Sichtfeld des Nutzers liegt.

Restriktionen auf der eigenen Website

URL-Parameter

Das Verhalten der Web-Component wird, bis auf einen GET-Parameter fos-module, größtenteils mit dessen Fragement-Identifikator z.B. #/suche? und folgendem beeinflusst.

Die Verwendung der selbigen GET-Parameter und auch Fragmente sollten auf Ihrer Seite vermieden werden, um die Funktionalität der Web-Component zu gewährleisten.

CSS und JS

Allgemeine Selektoren ihrer Seite, wie z.B. auf ein <a>-Tag können das Verhalten/Aussehen auch von selbigen Elementen innerhalb der Web-Component beeinflussen.

Diese Web-Component lädt dynamisch Javascript und CSS von Freinet-Servern nach.

Angewandt werden diese Inhalte jedoch größtenteils auf Elemente innerhalb der Web-Component.

Vorteile von Webkomponenten gegenüber Iframes

Die Verwendung von Webkomponenten statt Iframes bietet einige praktische Vorteile, die besonders nützlich sind, wenn Sie eine Webseite aufbauen oder verbessern möchten:

Einfachere Anpassung: Webkomponenten fügen sich nahtlos in eine Webseite ein, als wären sie von Anfang an ein Teil davon. Sie sehen nicht nur besser aus, sondern funktionieren auch besser mit dem Rest der Seite.
Schnelleres Laden der Webseite: Webkomponenten sind in der Regel leichter und schneller zu laden als Iframes. Dies bedeutet, dass Ihre Webseite schneller bereit ist, wenn jemand sie besucht, was zu einer angenehmeren Benutzererfahrung führt.
Mehr Sicherheit: Webkomponenten sind sicherer in der Anwendung als Iframes. Sie bieten besseren Schutz vor bestimmten Arten von Online-Angriffen, die darauf abzielen, Benutzerinformationen zu stehlen.
Leichter zu warten: Wenn Teile Ihrer Webseite aktualisiert oder geändert werden müssen, sind Webkomponenten einfacher zu handhaben. Sie können wie Bausteine betrachtet werden, die leicht ausgetauscht oder aktualisiert werden können, ohne dass die ganze Seite neu gestaltet werden muss.
Bessere Unterstützung durch moderne Werkzeuge: Viele Werkzeuge, die beim Webdesign helfen, sind besser auf den Umgang mit Webkomponenten eingestellt. Das bedeutet, dass weniger technische Probleme auftreten und weniger technisches Know-how benötigt wird, um sie zu verwenden.

Kurz gesagt, Webkomponenten machen es einfacher, schnellere, sicherere und schöner aussehende Webseiten zu erstellen und zu pflegen. Sie sind eine moderne Alternative zu Iframes, die viele praktische Vorteile bietet. zum Anfang des Artikels