easyTherm Webinhalte

Content Delivery Network v0.1.3

Mit dem neuen easyTherm CDN stellen wir Ihnen eine Möglichkeit zur Verfügung, von uns erstelle Inhalte auf Ihrer eigenen Website einzubinden.

Sie brauchen sich nicht mehr um die Pflege kümmern, sondern beziehen automatisch von uns einen oder mehrere Beiträge, welche direkt auf Ihrer Website an der von Ihnen gewünschter Stelle erscheinen, und versorgen so Ihre Kunden und Interessenten laufend mit aktueller Information zu bestimmten Themen.

Die Anzeige dieser Beiträge erfolgt durch das Einbinden von Code-Elementen in Ihrer Website. Dabei können Sie verschiedene Inhalte über eine bestimmte ID anfordern. Diese können in verschiedenen Layouts und Sprachen angezeigt werden. Die Inhalte folgen außerdem einem strikten Format, wodurch Sie die Möglichkeit haben, diese nach Ihren Wünschen entsprechend mittels CSS zu gestalten.

Inhaltsverzeichnis:

Technische Details

Die Funktionsweise dieses Service basiert auf einem in der eigenen Website eingebundenen JavaScripts, welches durch individuelle Variablen steuerbar ist.

  1. Dieses ermittelt im ersten Schritt, ob die Zielelemente für die angeforderten Inhalte ebenfalls verfügbar sind, und wird nicht weiter ausgeführt, wenn diese nicht gefunden werden konnten. Falls Ihnen die technische Möglichkeit fehlt, das JavaScript nur an der Seite ein zu binden an der die easyTherm-Inhalte angezeigt werden sollen, können Sie dieses auch global, also auf jeder Seite, verwenden (nicht empfohlen, denn wir alle wollen Ressourcen sparen!).
  2. Im zweiten Schritt, sofern die Ziel-Elemente gefunden werden konnten, wird ein GET-Request an das easyTherm CDN geschickt, welches, sofern die angeforderten Datensätze verfügbar sind, diese zurück liefert.
  3. Im dritten Schritt wird der fertig gelieferte HTML-Code in das Zielelement, sowie das Basis-CSS im <head>-Element eingefügt, welches durch eigene Stile überschrieben werden kann.

Einrichtung

Der für die Einbindung des Partner-Contents notwendiger Code besteht aus zwei Teilen.

  • Im <head> des HTML-Codes muss ein JavaScript platziert werden, das den gewünschten Inhalt anfordert
  • Im <body> muss ein Platzhalter-Element erstellt werden, an dessen Position der angeforderte Inhalt eingefügt wird

Im Folgenden Beispiel sehen Sie den Aufbau dieser zwei Elemente (Der Wert IDENTIFIER wird hier als Platzhalter für die durch easyTherm kommunizierte ID verwendet):

JavaScript im <head>

<script type="text/javascript">
/*<![CDATA[*/
  window.et=window.et||function(){(et.r=et.r||[]).push(arguments);};
  et({'items':['IDENTIFIER']});
/*]]>*/
</script>
<script type="text/javascript" src="//www.easy-therm.com/et_cdn.js" async></script>

Ziel-Element(e) im <body>

<div id="easytherm-IDENTIFIER"></div>

Layouts

Zusätzlich können pro Inhalt verschiedene Layouts angefordert werden.

Folgende Layouts stehen derzeit zur Auswahl

  • 0 = Großes Bild mit Text darunter (Standard)
  • 1 = Bild im Text Rechts
  • 2 = Bild im Text Links
  • 3 = Bild neben Text Rechts
  • 4 = Bild neben Text Links

Im folgenden Beispiel wird gezeigt, wie der Inhalt mit der ID news, im Layout 2 angefordert wird:

Beispiel Layouts

et({'items':['news:2']});

Überschriften

Falls Sie die Inhalte an einer bestimmten Position der Text-Struktur einbinden möchten, kann zusätzlich die Gewichtung der Überschrift beim Anfordern des Inhalts festgelegt werden.

Wollen Sie beispielsweise statt einer <h2>-Überschrift (Standard) eine <h3>-Überschrift, wird einfach ein zusätzlicher Parameter an die ID im JavaScript eingefügt.

Folgendes Beispiel zeigt, wie ein Inhalt mit der ID news, im Layout 2 und einer <h3>-Überschrift angefordert wird:

Beispiel Überschriften

et({'items':['news:2:3']});

Mehrere Inhalte

Sie können auch mehrere Inhalte zeitgleich für die Darstellung auf einer einzigen Seite anfordern.

Dazu wird einfach das JavaScript-Array um die entsprechenden Werte erweitert.

Folgendes Beispiel zeigt das Anfordern der Inhalte news und kundeninformation, einmal im Layout 1 und einmal im Layout 2:

Beispiel für mehrere Inhalte

et({'items':['news:1', 'kundeninformation:2']});

Zusätzlich müssen in diesem Beispiel zwei Platzhalter mit entsprechender ID als Ziel-Element im <body> des HTML-Codes platziert werden:

Ziel-Element(e) im <body>

<div id="easytherm-news"></div>
<div id="easytherm-kundeninformation"></div>

Alternative Sprachen

Des weiteren können Inhalte (sofern verfügbar) auch in anderen Sprachen angefordert werden.

Bitte erkundigen Sie sich bei Ihrem easyTherm-Ansprechpartner betreffend weitere Details dazu und ob eine Übersetzung des gewünschten Inhaltes verfügbar ist.

Grundsätzlich stehen folgende Sprachen bzw. Ländervarianten zur Verfügung:

  • Österreich
  • Deutschland
  • Schweiz
  • Frankreich
  • Slowenien
  • Polen
  • Ungarn
  • International (Englisch)

Individuelle Stile

Um die Inhalte perfekt an das Aussehen Ihrer Website anpassen zu können, steht es Ihnen frei, diese per CSS (Cascading Style Sheets) zu modifizieren.

Dazu binden Sie einfach auf Ihrer Website den Beispiel-Code ein (oder nur Teile davon) und bearbeiten diesen Ihren Wünschen entsprechend.

Beispiel CSS

/* easyTherm: Example CSS (Overrides default values) */
article.et-item {
  clear: both; display: inline-block; width: 100%;
}
article.et-item .et-content {
  margin-bottom: 15px;
}
article.et-item .et-header {
  margin-top: 0;
}
article.et-item .et-teaser {
  font-weight: bold;
}
article.et-item .et-media {
  padding-bottom: 15px;
}
article.et-item .et-media img {
  width: 100%; height: auto;
}
article.et-item .et-media figcaption {
  font-size: 80%;
}
/* Layout 0 */
article.et-item.et-layout-0 .et-media {
  width: 100%; margin: 0; padding: 0;
}
/* Layout 1/2 */
article.et-item.et-layout-1 .et-media,
article.et-item.et-layout-2 .et-media {
  width: 33%;
}
article.et-item.et-layout-1 .et-media {
  margin: 0 15px 10px 0; float: left;
}
article.et-item.et-layout-2 .et-media {
  margin: 0 0 10px 15px; float: right;
}
/* Layout 3/4 */
article.et-item.et-layout-3,
article.et-item.et-layout-4 {
  display: table;
}
article.et-item.et-layout-3 .et-media,
article.et-item.et-layout-4 .et-media {
  width: 50%; display: table-cell; vertical-align: top;
}
article.et-item.et-layout-3 .et-media {
  padding-right: 7px;
}
article.et-item.et-layout-4 .et-media {
  padding-left: 7px;
}
article.et-item.et-layout-3 .et-content,
article.et-item.et-layout-4 .et-content {
  display: table-cell;
}
article.et-item.et-layout-3 .et-content {
  padding-left: 7px;
}
article.et-item.et-layout-4 .et-content {
  padding-right: 7px;
}

Hilfe

Inhalte werden fehlerhaft angezeigt

Bitte vergewissern Sie sich, dass in Ihrer Website ein solides CSS verwendet wird, und überprüfen/optimieren Sie gegebenenfalls die Anwendung bestimmter Stile durch einen Webdesigner.

Inhalte werden nicht angezeigt

Die erfolgreiche Einbindung der Partner-Inhalte ist von zwei Punkten abhängig:

  • Die eigene Website muss frei von JavaScript-Fehlern programmiert sein, und sollte einem modernen Standard entsprechen
  • Der Browser des Besuchers muss als "zeitgemäßer Browser" eingestuft werden können, der einerseits moderne Web-Standards sowie CSS3/HTML5 unterstützt

Im Falle eines JavaScript-Fehlers oder eines veralteten Browsers wird unter Umständen kein Inhalt angezeigt. Bitte prüfen Sie daher sorgfältig die korrekte Einbindung und ermutigen Sie Ihre Besucher auf moderne und sichere Browser umzusteigen.

Sollten diese Voraussetzungen erfüllt sein und trotzdem kein Inhalt angezeigt werden, vergewissern Sie sich bitte, dass das JavaScript korrekt eingebunden wurde und Sie die korrekten ID(s) verwenden.

Ansprechperson

Als Ansprechperson betreffend easyTherm CDN steht Ihnen Alexander Dominkovics unter alexander.dominkovics@easy-therm.com oder +43 664 88659 613 zur Verfügung.