Styleguide:Techn. Integration via Durchschleifung: Unterschied zwischen den Versionen

Aus Imperia Support Wiki
K (Vorgehen)
Zeile 1: Zeile 1:
 
'''[[Howto: Implementation via Reverse Proxy|ENGLISH VERSION]]'''
 
'''[[Howto: Implementation via Reverse Proxy|ENGLISH VERSION]]'''
  
Berlin.de / BerlinOnline verfügt über einen sog. Layoutserver, der die Funktion eines Reverse-Proxies übernimmt. Damit können Fremdinhalte ohne großen Aufwand durch B.de/BO komplett übernommen werden.
+
Berlin.de / BerlinOnline stellt die Möglichkeit zur Verfügung Angebote für einen geschlossenen URL Bereich direkt von einem externen Server einzubinden. Dies wird technisch über ein eigenständiges Backend im [https://varnish-cache.org/Varnish HTTP Cache] gelöst.
  
=== Funktion ===
+
== Funktion ==
  
 
[[Bild:layoutserver.png|right|Schematischer Ablauf Durchschleifung|350px]]
 
[[Bild:layoutserver.png|right|Schematischer Ablauf Durchschleifung|350px]]
 
Technisch funktioniert das wie folgt:
 
Technisch funktioniert das wie folgt:
* Ein Nutzer fragt eine Seite bei B.de / BO an, die als Durchschleifung realisiert wird.
+
* Ein WWW-Browser fragt eine URL bei www.berlin.de an
* B.de / BO leitet diese Anfrage komplett (inkl. GET / POST / Cookie / etc.) an Ihren Server weiter
+
* Im Varnish HTTP Cache wird für diesen HTTP-Request geprüft, ob gültiger zwischengespeicherter Inhalt verfügbar ist und liefert gegebenenfalls diesen zurück
* Ihr Server antwortet mit einer kompletten Seite, die der Layoutserver entgegennimmt
+
* Varnish HTTP Cache leitet den Request an den Server der Applikation weiter. Im Normalfall wird der Request dabei nicht verändert. Es werden lediglich die Cookies gefiltert. 
* Der Layoutserver fügt Header und Footer ein und liefert die Seite an den Nutzer als originärer B.de / BO-Inhalt aus
+
* Der Server der Applikation antwortet mit einer kompletten Seite, die im Varnish HTTP Cache zwischengespeichert wird, wenn das möglich ist.
 +
* Das Portallayout von Berlin.de wird über die Auswertung von [https://varnish-cache.org/docs/6.0/users-guide/esi.html?highlight=esi Edge Side Includes] in die Seite eingefügt
 +
* Der Varnish HTTP Cache anwortet mit dem jetzt vollständigen Inhalt dem WWW-Browser
  
Die Layoutersetzung erfolgt dabei von unserer Seite wie folgt:
+
== Vorgehen ==
* vor <code></head></code> laden wir eigene Stylesheet etc.
 
* Nach <code><body></code> setzen wir unseren Header und Navigation ein
 
* Vor <code></body></code> setzen wir unsere Servicespalte und Footer ein
 
  
=== Vorgehen ===
+
=== Integration des Portallayouts ===
  
* Bauen Sie einen Internetauftritt. Die Seiten müssen...
+
Das Portal-Layout besteht aus drei HTML Teilen die an bestimmten Stellen einzufügen sind. Beispielhaft für ein Anwendung die unter www.berlin.de/rbmskzl/aktuelles/ liegt:
** ...vollständiges, valides XHTML 1.0 sein. Ggf. können Sie auch auf valides HTML 4 ausweichen. Um die Validität Ihrer Seiten zu überprüfen benutzen Sie ggf. die [http://www.getfirefox.com Firefox]-Extension [https://addons.mozilla.org/firefox/249/ HTML-Validator]
 
** Alle Verlinkungen innerhalb der Anwendung müssen relativ sein (außer, sie wollen das Angebot von B.de / BO verlassen)
 
** Alle zugehörigen Ressourcen wie Bilder / Javascripte / Stylesheets müssen direkt in dem von uns durchzuschleifenden Ordner bzw. darunter liegenden Unterordnern liegen.
 
** Ihr Server muss via regulärem HTTP/HTTPS-Port im Internet verfügbar sein. Dies schließt Intranet-URLs und Spezial-Ports aus.
 
** Alle Seiten sind im Zeichensatz UTF-8 zu liefern.
 
* Sie nennen uns die URL - daraufhin nennen wir Ihnen eine URL, unter der Sie Ihre Seiten bei uns ansehen können. Dabei wird auf unserer Seite alles, was  unterhalb einer gewissen Ordnerebene liegt, immer an Sie weitergereicht - also auch Stylesheets, Javascripte, und weitere Seiten.
 
* Passen Sie dann bitte das Layout an. Die techn. Abteilung von BerlinOnline steht Ihnen dabei jederzeit beratend zur Seite.
 
  
==== Layout ====
+
* Unmittelbar vor dem schließenden ''</head>'' – [https://www.berlin.de/rbmskzl/aktuelles/__i9/std/head.inc /rbmskzl/aktuelles/__i9/std/head.inc] – enthält Code zum laden der benötigten Stylesheet und Javascript Dateien
 +
* Unmittelbar nach dem öffnenden ''<body>'' –  [https://www.berlin.de/rbmskzl/aktuelles/__i9/std/top.inc /rbmskzl/aktuelles/__i9/std/top.inc] – enthält den Portalkopf und die linke Navigation
 +
* Unmittelbar vor dem schließenden ''</body>'' – [https://www.berlin.de/rbmskzl/aktuelles/__i9/std/foot.inc /rbmskzl/aktuelles/__i9/std/foot.inc] – enhält den unteren Bereich (evtl. mit rechter Seitenspalte)
 +
 
 +
Die allgemeine Seitenstruktur sieht damit in etwa so aus:
 +
 
 +
<pre>
 +
<!doctype html>
 +
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 +
<head>
 +
    <meta charset="UTF-8"/>
 +
    <title>…</title>
 +
    <esi:include src="/rbmskzl/aktuelles/__i9/std/head.inc" />
 +
</head>
 +
<body>
 +
    <esi:include src="/rbmskzl/aktuelles/__i9/std/top.inc" />
 +
    …
 +
    <esi:include src="/rbmskzl/aktuelles/__i9/std/foot.inc" />
 +
</body>
 +
</pre>
 +
 
 +
=== Technische Voraussetzungen ===
 +
 
 +
* Das HTML Markup der Applikation entspricht dem oben stehenden Beispiel
 +
* Als Seitenkodierung folgt dem UTF-8 Standard
 +
* Alle der Applikation verwendeten Resourcen unterhalb des Pfades der Applikation. Für dieses Beispiel, unterhalb von ''/rbmskzl/aktuelles/''
 +
* Die Applikation ist direkt vom Varnish HTTP Cache erreichbar. Dabei ist die Applikation unter dem Virtual-Hostnamen www.berlin.de, stg.berlin.de, test.berlin.de unter dem einzubindenen Pfad erreichbar.
 +
* Die Applikation stellt eine URL für einen HEALTH-Check durch den Varnish zur Verfügung.
 +
* Die Applikation beantwortet typische Requests unter einer Sekunde bis in Ausnahmen fünf Sekunden
 +
* Die Inhalte entsprechen den Berlin.de Styleguides
 +
* Die Inhalte sollten zwischenspeicherbar sein und anderenfalls das Zwischenspeichern mittels ''Cache-Control'' steuern
 +
* Alle durch die Applikation serverseitig benutzten Cookies müssen bekannt gegeben werden. Dabei sollten die Cookie-Namen applikationsspezifisch sein. Allgemeine Cookies, wie ''PHPSESSID'' und ähnliches sind unzulässig. Cookies sollten nur für den Pfad der Applikation gültig sein.
 +
 
 +
=== Layout ===
  
 
Bei der Layoutanpassung sind folgende Informationen für Sie wichtig:
 
Bei der Layoutanpassung sind folgende Informationen für Sie wichtig:
 +
* Das Berlin.de Layout basiert auf Twitter Bootstrap 2.3.
 
* Bitte konsultieren Sie den [[Styleguide:Portal|Styleguide]] für das Portal
 
* Bitte konsultieren Sie den [[Styleguide:Portal|Styleguide]] für das Portal
 
* Definieren Sie keine globalen CSS-Regeln, sondern wickeln Sie ggf. um Ihre Inhalte einen identifizierbaren Container, wie z.B. <code><nowiki><div id="partner"></div></nowiki></code>, und gestalten Sie Ihre CSS-Angaben entsprechend: <code><nowiki>#partner a {color:blue;}</div></nowiki></code>.
 
* Definieren Sie keine globalen CSS-Regeln, sondern wickeln Sie ggf. um Ihre Inhalte einen identifizierbaren Container, wie z.B. <code><nowiki><div id="partner"></div></nowiki></code>, und gestalten Sie Ihre CSS-Angaben entsprechend: <code><nowiki>#partner a {color:blue;}</div></nowiki></code>.
  
Sollten Sie innerhalb einer Durchschleifung Pop-Ups erzeugen wollen und dementsprechend nicht die Standard-Navigation um Ihre Seite gewickelt haben wollen, kontaktieren Sie uns.
 
 
=== Vorteile ===
 
 
Mit diesem Weg sind sie komplett von unserer Serverumgebung unabhängig, und brauchen sich keinerlei Gedanken um unsere Einstellungen zu machen. Die komplette Anwendung würde bei Ihnen bleiben, inklusive der Datenhaltung, und wir wären nur das verlängerte Frontend davon.
 
  
Der Vorteil einer solchen Einbindung ist die Vererbung unseres Google-Pageranks auf die betreffenden Seiten sowie die Möglichkeit, die Seiten für uns über die IVW zu zählen. Ihre Seiten werden als originärer Inhalt unserer Plattform integriert, wird also (im Gegensatz zu Iframe-Lösungen) von Suchmaschinen auch erfasst.
+
== Beispiel==
 
 
=== Beispiel ===
 
  
 
* Vor der Durchschleifung: http://berlinonline.stadtplandienst.de/stadtplan/map.asp
 
* Vor der Durchschleifung: http://berlinonline.stadtplandienst.de/stadtplan/map.asp
 
* Nach der Durchschleifung: http://www.berlin.de/stadtplan/map.asp
 
* Nach der Durchschleifung: http://www.berlin.de/stadtplan/map.asp
 
  
 
[[Kategorie: Dokumentation]]
 
[[Kategorie: Dokumentation]]
[[Kategorie: Styleguide]][[Kategorie: Integration]][[Kategorie:Entwickler: fboes]]
+
[[Kategorie: Styleguide]][[Kategorie: Integration]]
 
 
=== Probleme? ===
 
 
 
Im Layoutserver existiert ein bekannter Bug, der in äußerst seltenen Fällen auftritt. Dabei wird ein einziges, beliebiges Zeichen auf der Seite gelöscht. Dies kann u.U. einen HTML-Fehler verursachen.
 
 
 
Als Workaround für diesen Bug empfehlen wir, an einer beliebigen Stelle vor dem Fehler (z.B. gleich nach <code>body></code>) einen HTML-Kommentar einzusetzen. Dies verändert die Content-Länge und der Fehler tritt nicht mehr auf.
 

Version vom 23. März 2018, 12:40 Uhr

ENGLISH VERSION

Berlin.de / BerlinOnline stellt die Möglichkeit zur Verfügung Angebote für einen geschlossenen URL Bereich direkt von einem externen Server einzubinden. Dies wird technisch über ein eigenständiges Backend im HTTP Cache gelöst.

Funktion

Schematischer Ablauf Durchschleifung

Technisch funktioniert das wie folgt:

  • Ein WWW-Browser fragt eine URL bei www.berlin.de an
  • Im Varnish HTTP Cache wird für diesen HTTP-Request geprüft, ob gültiger zwischengespeicherter Inhalt verfügbar ist und liefert gegebenenfalls diesen zurück
  • Varnish HTTP Cache leitet den Request an den Server der Applikation weiter. Im Normalfall wird der Request dabei nicht verändert. Es werden lediglich die Cookies gefiltert.
  • Der Server der Applikation antwortet mit einer kompletten Seite, die im Varnish HTTP Cache zwischengespeichert wird, wenn das möglich ist.
  • Das Portallayout von Berlin.de wird über die Auswertung von Edge Side Includes in die Seite eingefügt
  • Der Varnish HTTP Cache anwortet mit dem jetzt vollständigen Inhalt dem WWW-Browser

Vorgehen

Integration des Portallayouts

Das Portal-Layout besteht aus drei HTML Teilen die an bestimmten Stellen einzufügen sind. Beispielhaft für ein Anwendung die unter www.berlin.de/rbmskzl/aktuelles/ liegt:

Die allgemeine Seitenstruktur sieht damit in etwa so aus:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta charset="UTF-8"/>
    <title>…</title>
    <esi:include src="/rbmskzl/aktuelles/__i9/std/head.inc" />
</head>
<body>
    <esi:include src="/rbmskzl/aktuelles/__i9/std/top.inc" />
    …
    <esi:include src="/rbmskzl/aktuelles/__i9/std/foot.inc" />
</body>

Technische Voraussetzungen

  • Das HTML Markup der Applikation entspricht dem oben stehenden Beispiel
  • Als Seitenkodierung folgt dem UTF-8 Standard
  • Alle der Applikation verwendeten Resourcen unterhalb des Pfades der Applikation. Für dieses Beispiel, unterhalb von /rbmskzl/aktuelles/
  • Die Applikation ist direkt vom Varnish HTTP Cache erreichbar. Dabei ist die Applikation unter dem Virtual-Hostnamen www.berlin.de, stg.berlin.de, test.berlin.de unter dem einzubindenen Pfad erreichbar.
  • Die Applikation stellt eine URL für einen HEALTH-Check durch den Varnish zur Verfügung.
  • Die Applikation beantwortet typische Requests unter einer Sekunde bis in Ausnahmen fünf Sekunden
  • Die Inhalte entsprechen den Berlin.de Styleguides
  • Die Inhalte sollten zwischenspeicherbar sein und anderenfalls das Zwischenspeichern mittels Cache-Control steuern
  • Alle durch die Applikation serverseitig benutzten Cookies müssen bekannt gegeben werden. Dabei sollten die Cookie-Namen applikationsspezifisch sein. Allgemeine Cookies, wie PHPSESSID und ähnliches sind unzulässig. Cookies sollten nur für den Pfad der Applikation gültig sein.

Layout

Bei der Layoutanpassung sind folgende Informationen für Sie wichtig:

  • Das Berlin.de Layout basiert auf Twitter Bootstrap 2.3.
  • Bitte konsultieren Sie den Styleguide für das Portal
  • Definieren Sie keine globalen CSS-Regeln, sondern wickeln Sie ggf. um Ihre Inhalte einen identifizierbaren Container, wie z.B. <div id="partner"></div>, und gestalten Sie Ihre CSS-Angaben entsprechend: #partner a {color:blue;}</div>.


Beispiel