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-imageblockBildstreifen und Werbebanner0.9
dropapp-newsDarstellung von redaktionellen Beiträgen1.1
dropapp-glossarDamit werden Begriffe als Links umgebaut und mit einem Tooltip versehen.0.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-eventEvent Darstellung (noch nicht fertig)0.1
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 Widget sollten den “search”-Parameter auswerten, was extrem flexible Suchseiten ermöglichst.

Photo-Gallery Widget

Dieses Widget stellt zum Beispiel ein Album aus DropPhoto als Galerie dar. Es kann aber auch News aus DropNews als Galerie darstellen. Die Bilder werden immer auf 100% Breite skaliert. Die Thumbnails werden bewusst mit einem separaten img-Tag platziert, damit man flexibler ist. Aus der Grösse des Bildes wird ein Verhältnis berechnet. Dieses Verhältnis wird auf allen Screens beibehalten.

<img class="dropapp-photo" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="/dropnetapps/photo/api.php" data-category="/tennisschule-galerien" title="Kontakt" alt="" width="1174" height="537">
<img class="dropapp-photo-carpet" src="">

ParameterBeschreibungPflichfeld
classMuss „dropapp-photo“ seinJa
srcAbsoluter Pfad zum ersten Bild. Läuft das JavaScript nicht, so wird dieses Bild angezeigt. Der Pfad muss in das Verzeichnis /dropbox/photo/ gehen.
https://www.dropnet.ch/dropbox/photo/technik/mysize/004.jpg
Ja
widthMaximale Breite des Bildes. Diese beiden Parameter werden hauptsächlich für die Berechnung des Verhältnisses benötigt (z.B. 600).Ja
heightMaximale Höhe des Bildes (z.B. 400).Ja
data-interfaceGibt an, woher die Daten geholt werden (z.B. '/dropnetapps/photo'). Wenn nicht definiert, wird ein Standardwert angenommen.Nein
data-linkHier kann ein default-Link eingetragen werden.Nein
data-titleEntspricht dem Subject in der E-Mail bei EmpfehlungenNein
data-diaspeedSoll eine automatisch laufende Diashow erstellt werden, so muss hier in ms die Zeit zwischen den Wechseln angegeben werden (z.B. 2000).Nein
data-diafadespeedHier kann die Geschwindigkeit für den Überblendeffekt angegeben werden (z.B. 1000).Nein

Bildgrösse

Die Höhe und Breite muss immer angegeben werden auch wenn diese später mit CSS oder JavaScript überschrieben wird. Wenn die Grösse des Bildes im CSS angegeben werden soll, dann muss das für die ID #dropapp-photo-web angegeben werden, weil anhand dieser Grösse alle abhängigen Grössen im Javascript berechnet werden.

Das Photo-Gallery Widget im Einsatz

Photo-Slideshow Widget

Die Slideshow stellt die Daten in einer automatisch wechselnden Slideshow dar. Das eignet sich vor allem für Fotoalben aber auch für eine attraktive Darstellung von News.

Photo-Imageblock Widget / Ads

Dieses Widget stellt die Daten der Item-Schnittstelle als mehrspaltige Icons dar. Die Grösse der Thumbs kann im img-Tag angegeben werden. Der Rest ist wie überall. Die Verteilung wird mit Flexbox gelöst, damit es immer ein schöner Block wird.

<img class=”dropapp-imageblock" src="/dropnetimages/dropbox/standard/status-wait-big.gif" data-interface="/dropbox/photo/index.php" data-category="schiffe" data-title="Ads" data-rows="7" data-limit="13" width="" height="80">

Address Widget

Mit diesem Widget lassen sich Adressangaben einfach darstellen. So können zum Beispiel Tourenleiter und der Vorstand ansprechend aufgelistet werden.

<img alt="" class="dropapp-address" data-category="12" data-interface="https://www.dropnet.ch/dropnetapps/tours/api.php" data-limit="10" data-type="getAddresses" height="16" src="/dropnetimages/dropbox/standard/status-wait.gif" width="16" />

Parameter im img-Tag

ParameterBeschreibungPflichfeld
class"dropapp-address" (Selektiert das Address-Widget)Ja
srcURL zum Ersatzbild bis das Javascript fertig ist.Ja
data-interfaceWoher sollen die Daten bezogen werden?Ja
data-typeWelche Daten sollen geholt werden?Nein
data-categoryKategorie ID der AdresseNein
data-searchFilter nach SuchbegriffNein
data-startcharacterFilter nach Anfangsbuchstabe des NachnamenNein
data-limitMax. Anzahl zurück gegebener AdressenNein
data-offsetAb dieser Adresse anzeigenNein

Parameter im img-Tag

ParameterBeschreibungPflichfeld
class"dropapp-ads" (Selektiert das Ads-Widget)Ja
srcURL zum Ersatzbild bis das Javascript fertig ist.Ja
data-interfaceWoher sollen die Daten bezogen werden?Ja
data-categoryKategorie ID der AdresseNein
data-limitMax. Anzahl zurück gegebener AdressenNein
widthBreite des ThumbsNein
heightHöhe des ThumbsNein

 

Darstellung von News

Die News werden in den unterschiedlichsten Darstellungen ausgegeben. Der “type” gibt an, wie die Ausgbe aufgebaut ist.

<img class="dropapp-news" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="https://www.dropnet.ch/webdesign/templates/sierra/firma/api-test.xml" data-max="10" data-language="de" data-category="" alt="" width="16" height="16">
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.

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.

Event Widget

Für die Darstellung der Events existiert unterdessen auch ein Widget. Es stellt die Events als Item-Objekte dar.

<img class="dropapp-event" id="dropapp-event-01" data-type="archiv" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface=”/dropnetapps-dev/event/api.php" data-category="460" data-language="de" data-link="/demo/veranstaltungen/details.php" alt="" width="16" height="16">

data-typestart, archive
data-interface/dropnetapps/event/api.php
data-categoryID der Event Kategorie
data-languagede, en ...
data-linkAuf diese Seite wird nach dem Klick gesprungen. Im Moment ist das der öffentliche Bereich aus DropEvent.

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.