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.

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.

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').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 kann 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

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-ads" 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

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.

 

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.