kanone

Widgets für Ihre dynamische Homepage

Mit den Widgets erstellen Sie im Nu eine sehr dynamische Site. Artikel, Menüpunkte, Photos und vieles mehr können Item-Objekte sein. Die Daten mit dem Inhalt werden dynamisch beim Server angefragt und von dort geliefert. Im Bild-Tag können einige Parameter angegeben werden, die auf die Antwort des Servers und auf das Design einen Einfluss haben. Um es einfach zu halten, ist der Aufbau und die Parameter fast bei allen Widgets gleich. So können die Widgets auch problemlos ausgetauscht werden.

Widget-NameBeschreibungVersion
dropapp-photoDarstellen einer Fotogalerie1.0
dropapp-sliderSlidshow1.0
dropapp-imageblockDas Item-Widget für allerlei Darstellungen wie imageblock, masonry und draggable und Werbebanner0.95
dropapp-newsDarstellung von redaktionellen Beiträgen (inkl. Glossar und Assistent)1.1
dropapp-keywords-filterDieses Widget filtert die Einträge anhand von Keyword von anderen Apps.1.0
dropapp-socialshareMit Social Media teilen1.0
dropapp-addressDarstellung der Adressen für Websites (z. B. Mitglieder)0.9
dropapp-search-fieldSuchfeld anzeigen0.9
dropapp-search-resultsSuchresultate anzeigen1.0
dropapp-accountZur Auflistung von Dokumenten1.0
dropapp-account-filterEine praktische Filterung der Dokumente, damit auch grosse Mengen an Dokumenten übersichtlich dargestellt werden können.1.0
dropapp-eventDas Widget stellt die Events als Item-Objekte dar. Im Moment ist nur die Darstellung als Widget, das Anmelden usw. funktioniert noch in PHP.0.3

Der Einbau der Widgets

Die Widgets sind Javascript Schnipsel, welche auf jeder Seite integriert werden können. Dazu braucht es das Javascript und einen IMG-Tag. Das Javascript wird vom DropNet CDN-Server geliefert und am besten im Head eingebaut. Der IMG-Tag kann dann irgendwo auf der Seite integriert werden. Die Widgets sind auf jQuery v1.9.1 und Bootstrap v3.3.4 aufgebaut, was folgende Bibliotheken voraussetzt.

<link href="https://cdn.dropnet.ch/dropnetcss/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<script src="https://cdn.dropnet.ch/dropnetjavascript/jquery.js" type="text/javascript"></script>
<script src="https://cdn.dropnet.ch/dropnetcss/bootstrap/js/bootstrap.js" type="text/javascript"></script>

Dann braucht es die DropNet-Apps.

<link href="https://cdn.dropnet.ch/dropnet.min.css" type="text/css" rel="stylesheet" media="all">
<script src="https://cdn.dropnet.ch/dropnet.min.js" type="text/javascript"></script>

Für Kunden der DropNet AG mit DropEdit ist es noch viel einfacher, weil DropEdit die Bibliotheken automatisch einbaut und im Editor die Möglichkeit bietet, die Widgets direkt einzubauen.

Parameter in den Widgets

Die Widgets werden immer als IMG-Tag eingebaut. Im IMG-Tag können die üblichen Parameter wie gewohnt gefüllt werden. Weitere Parameter werden mit “data-xxx” im IMG-Tag definiert und dann automatisch von den Widgets ausgelesen. Einige Parameter werden von allen Widgets ausgewertet und einige sind sehr individuell. Arrays können in den Parametern mit | getrennt übergeben werden. Hier ein Beispiel:

<img class="dropapp-photo" src="/dropnetimages/dropbox/standard/status-wait.gif" data-template=”preview_responsive-r1|product_responsive-r1”>

Es können aber nicht nur Parameter vom IMG-Tag an das Widget übergeben werden, sondern auch die Parameter der URL werden übernommen. Sind beide Parameter definiert, so überschreibt der Parameter der URL den Parameter im IMG-Tag. Ein gutes Beispiel ist der “search”-Parameter. Alle Widgets sollten die Parameter, die in der folgenden Tabelle “an Item” markiert sind, direkt an die Item-Schnittstelle weiter geben. So können sehr einfach komplexe Abfragen erstellt werden.

ParameterBeschreibungan ItemPflichtfeld
classdropapp-widgetname Ja
srcDas ist das Bild, bis das Widget geladen ist. Ja
altDer alt-Parameter ist im img-Tag obligatrorisch. Machmal wird er vom Widget für einen alternativen Text verwendet. Ja
widthDie Breite für das Ersatzbild. Ja
data-typeEinige Widgets können unterschiedliche Darstellungen liefern. Mit dem Type wird angegeben, welche Darstellung angefordert wird. Das Widget macht dann die Anfrage an die Item-Schnittstelle selbständig korrekt. Nein
data-interfaceHier kann die Item-Schnittstelle angegeben werden. Woher die Daten kommen, ist völlig egal. Gibt man kein Interface an, so wird vom Widget ein Default eingesetzt. Das kann z.B. /dropnetapps/event/api sein. Nein
data-linkDieser Link wird den Parametern vorangestellt. So kann auch auf andere Seiten für eine Weiterverarbeitung gesprungen werden. Nein
data-languageDie Sprache kann vom Widget ausgewertet werden, muss aber auch an die Item-Schnittstelle.xNein
data-limitDieser Parameter gibt die maximale Anzahl Items an, die geliefert werden.xNein
data-offsetFür Paging kann ein Offset mitrgegeben werden.xNein
data-categoryIn vielen Widgets kann eine Kategorie übergeben werden. Diese Selektion wird direkt an die Item-Schnittstelle weitergegeben. Normalerweise wählt man die category über den Parameter in der URL. Mit diesem Parameter im Widget kann der Parameter der URL übersteuert werden. Lässt man ihn weg, so gilt der Parameter der URL.xNein
data-searchDiese Suchbegriffe werden an die Item-Schnittstelle weiter gegeben.xNein
data-searchmodeSo kann die Art der Suche festgelegt werden (AND, OR)xNein
data-sortHier können die Felder, nach welchen sortiert werden soll, angegeben werden (id, name).xNein

data-sort_direction

Das gibt die Sortierrichtung an (asc=aufsteigend, desc=absteigend).xNein

Je nach Widget können natürlich weitere Parameter hinzu kommen. Diese werden dann aber nicht von allen Widgets ausgewertet.

Darstellung von News

Die News werden in den unterschiedlichsten Darstellungen ausgegeben. Der “type” gibt an, wie die Ausgbe aufgebaut ist. Der data-link wird für die Detaildarstellung gebraucht.

<img id="blog" class="dropapp-news" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="/dropnetapps/news/api.php" data-link="/news/" data-limit="10" data-language="de" data-category="" alt="" width="16" height="16">

Typ

Der Typ beim News-Widget gibt an, ob die News ausgegeben werden oder ob es als Assistent funktioniert. Folgende Typen sind im Moment möglich.

startDas ist die normale News-Darstellung
assistentDann reagiert DropNews auf den Suchbegriff im Suchfeld.
? 

Keyword Filter

Alle News können mit dem Keyword-Filter eingeschränkt werden. Das Verhalten kann bei Swisscanto gut getestet werden. Mit dem Parameter data-results muss die ID des News-Widget angegeben werden, damit dieses mitbekommt, was geändert wird.

<img clas="dropapp-keywords-filter" data-interface="/dropnetapps/news/api.php" data-category="82" data-results="#blog" data-min="1">

Social-Media-Share Widget

Dieses Widget liefert die Facebook, Xing und andere Icons mit den passenden Links. Diese Share-Buttons können auf beliebigen Seiten eingebaut werden. Die Links werden automatisch korrekt angepasst.

Teilen 

<img class="dropapp-socialshare" src="/dropnetimages/dropbox/standard/status-wait.gif" data-services="xing, linkedin, facebook, twitter" width="16" height="16">

xing 
linkedin 
facebook 
twitter 
e-mail 
telegram 
whatsapp 

Suchfeld

Damit das Suchfeld einfach eingebaut werden kann und immer funktioniert, gibt es auch dazu ein Widget.

<img class="dropapp-search-field" src="/dropnetimages/dropbox/standard/status-wait.gif" data-class="fa fa-search" data-interface="/webdesign/templates/sierra/suche.php" data-title="Suchen ...">

Suchresultate

Die Resultate der Suche werden auch mit einem Widget dargestellt. Dieses Widget kann sogar mehrfach eingebaut werden und Daten auf der gleichen Seite von unterschiedlichen Quellen beziehen.

<img class=”dropapp-search-results" data-interface="/cgi-bin/dropnet/search/search.cgi" data-search-field="[name=search]" data-max-hits="8" height="16" src="/dropnetimages/dropbox/standard/status-wait.gif" width="16" alt="">
Auflisten von Dokumenten

Aus DropDocu oder anderen Applikationen können Dokumente aufgelistet und so praktisch heruntergeladen werden.

Filter für Dokumente

Bei einer grösseren Anzahl Dokumenten helfen Filter, die Suche einzuschränken. Beispiele findet man bei Hiwepa und Swisscanto.

Eigene Widgets programmieren

Diese Dokumentation hilft einerseits die Widgets der DropNet AG schnell zu verwenden aber es ist auch das Ziel, dass jeder externe Entwickler eigene Widgets programmieren darf. Wenn sich diese an die Schnittstelle von DropNet halten, stehen ihnen eine grosse Menge an Web Apps zur Verfügung.