Styleguide:Berlin.de Subdomains

Subdomains für berlin.de werden häufig angelegt, um Kampagnen-Auftritte oder technische Applikationen im Berlin.de Namensraum einzubinden. Eine Subdomain ist immer ein Präfix von berlin.de, bspw. luftdaten.berlin.de. Aus technischer Sicht befinden sich die Inhalte der Subdomain auf eigenen Servern, die von der jeweiligen Verwaltung beschafft und betrieben werden müssen. Das Betreiben von fremden Anwendungen wird nicht von BerlinOnline durchgeführt.

Wichtige Hinweise

• Der Einsatz des hier dargestellten Berlin.de Layouts ohne die gesamte Portalnavigation muss bei Nutzung für Auftritte der Verwaltung oder ähnlicher öffentlicher Einrichtungen mit der Landesredaktion abgestimmt werden.
• Hier wird geklärt, ob der "normale" Fries oder der vereinfachte Fries verwendet werden darf.
• In der Regel müssen Subdomains der Landesverwaltung den normalen Fries verwenden.
• Hinweise: Integration im Landesbereich
• Holen Sie sich die Templates bzw. Includes jede Stunde ab und cachen Sie lokal bei sich auf dem Server. Vermeiden Sie unbedingt bei jeden Aufruf die Dateien von unserem Server abzurufen.
• Bitte denken Sie daran, dass Sie für eine Subdomain immer ein SSL-Zertifikat für die verschlüsselte Übertragung von Daten bestellen müssen. Die Anzeige von Inhalten im Namensraums von berlin.de erfolgt immer verschlüsselt.

Technische Einrichtung

Wenn die Absprachen mit der Landesredaktion erfolgt sind, schicken Sie bitte eine E-Mail an BerlinOnline, den technischen Dienstleister vom Land Berlin, damit die Subdomain eingerichtet werden kann. Bitte nutzen Sie die im Link hinterlegte Vorlage und füllen alle Felder aus.

Integration des "normalen" Berlin.de-Layouts

Layout mit Navigation und Servicespalte eines Bereichs

Variante 1:

Variante 2:

Diese Integration erfolgt über ein bereitgestelltes Template. Da die URL je nach Bereich in Imperia 9 variiert, wird die URL auf Anfrage mit Angabe der URL des Auftritts bereitgestellt.

Es gibt verschiedene Kommentare, die durch den Inhalt der Applikation ersetzt werden bzw. wo Inhalt eingefügt werden können. Dazu gehören folgende

<!-- TITLE ersetzen -->
<!-- HEAD -->
<!-- CONTENT -->

Der Bereich "HEAD" befindet sich im HTML-Kopfbereich und kann Angaben wie die Beschreibung oder weitere Referenzen auf CSS- und Javascript-Dateien enthalten.

Im Bereich "CONTENT" kann der eigentliche Inhalt platziert werden. Beachten Sie bitte dabei, dass im Dokument die CSS-Regeln für Angebote des Landes unter berlin.de gelten.

Layout ohne Navigation und Servicespalte eines Bereichs

Diese Integration erfolgt über ein bereitgestelltes Template:

• http://www.berlin.de/template/land9/

In diesem Template gibt es zwei Kommentare, die mit eigenen Inhalten ersetzt werden können:

<!-- HEAD -->

<!-- CONTENT -->

Der Bereich "HEAD" befindet sich im HTML-Kopfbereich und kann Angaben wie Titel und Beschreibung oder weitere Referenzen auf CSS- und Javascript-Dateien enthalten.

Im Bereich "CONTENT" kann der eigentliche Inhalt platziert werden. Beachten Sie bitte dabei, dass im Dokument die CSS-Regeln für Angebote des Landes unter berlin.de gelten.

Integration des vereinfachten Berlin.de-Layouts

Es gibt auch für das neue Layout die Möglichkeit einzelne Code-Schnipsel zu verwenden. Diese sind jeweils an die Verwaltung angepasst, in der das Angebot integriert werden soll. Dadurch erhält die Applikation immer den aktuellen Stand von Header, Navigation und Footer aus Imperia 9.

Es gibt insgesamt drei Dateien, die eingebunden werden können. Da sich die URLs nach den Vorgaben in Imperia 9 richten, werden diese auf Anfrage geschickt. Hier werden nur die allgemeinen Inhalte der Dateien erläutert.

head.inc

In der head.inc befinden sich die Meta-Angaben. Hier werden die CSS und JavaScript Dateien eingebunden und die benötigten Icons für Browser, iPhone und Facebook.

top.inc

In der top.inc befindet sich die komplette Navigation. Die genauen Bereiche, die damit generiert werden, sind im Screenshot rot umrandet.

foot.inc

Im foot.inc befinden sich die rechte Seitenspalte (genannt Servicespalte oder Sidebar), die Links am Ende der Seite und die Footerangaben unterhalb des weißen Bereichs.

Twitter Bootstrap

Die Seiten im neuen Layout werden aus Basis von Twitter Bootstrap erstellt.

Hilfestellung für die Umsetzung in Twitter Bootstrap finden Sie unter http://twitter.github.com/bootstrap/base-css.html .