Styleguide:Berlin.de Subdomains: Unterschied zwischen den Versionen

Aus Imperia Support Wiki
 
(18 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
[[Kategorie: Styleguide]]
 
[[Kategorie: Styleguide]]
Subdomains für berlin.de werden häufig angelegt, wenn aus technischen Gründen nicht die Möglichkeit besteht, die anzubietenden Inhalte unter www.berlin.de darzustellen.
+
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 ==
 
== Wichtige Hinweise ==
  
<div style="background:#fff5ee; margin:1em auto; padding:1em; border:1px solid red;width:75%;">
+
<div class="alert alert-error">
  
* Der Einsatz des hier dargestellten Berlin.de Frieses ohne die gesamte Portalnavigation muss bei Nutzung für Auftritte der Verwaltung oder ähnlicher öffentlicher Einrichtungen mit der [[Landesredaktion |Landesredaktion]] abgestimmt werden.
+
* 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.
 
* 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.
 
* In der Regel müssen Subdomains der Landesverwaltung den normalen Fries verwenden.
* [http://support.berlin.de/wiki/index.php/Styleguide:Techn._Integration_im_Bereich_Landeslayout| Hinweise: Integration im Landesbereich]
+
* [http://support.berlin.de/wiki/index.php/Styleguide:Techn._Integration_im_Bereich_Landeslayout 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.
 
</div>
 
</div>
  
== Integration des "normalen" Berlin.de-Fries ==
+
== Technische Einrichtung ==
  
[[image:template_normal.jpg]]
+
Wenn die Absprachen mit der Landesredaktion erfolgt sind, schicken Sie bitte eine [mailto:support@berlin.de?cc=landesredaktion%40senatskanzlei.berlin.de&amp;subject=Antrag%20auf%20Berlin.de%20Subdomain&amp;body=Hallo%2C%0A%0Aich%20m%C3%B6chte%20im%20Auftrag%20meiner%20Beh%C3%B6rde%20oder%20Firma%20verbindlich%20eine%20oder%20mehrere%20Subdomains%20von%20berlin.de%20anfragen.%20%C3%9Cber%20die%20Kosten%20der%20Einrichtung%20%28siehe%20Preise%20am%20Ende%20dieser%20E-Mail%29%20bin%20ich%20informiert.%0A%0AAllgemeine%20Angaben%0A%0AWelche%20Subdomain%28s%29%20soll%20eingerichtet%20werden%3A%0ASoll%20die%20Subdomain%20inkl.%20%22www%22-Prefix%20eingerichtet%20werden%20%28ja%2Fnein%29%3A%0ASoll%20die%20Subdomain%20auf%20eine%20ander%20URL%20weiterleiten%20%28bitte%20absolute%20URL%20angeben%29%3A%0ASoll%20die%20Subdomain%20auf%20einen%20externen%20Server%20zeigen%20%28bitte%20IP-Adresse%20oder%20CNAME%20angeben%29%3A%0AKontakt%20f%C3%BCr%20R%C3%BCckfragen%20%28bitte%20E-Mail-Adresse%20oder%20Telefonnummer%20angeben%29%3A%0AFreigabe%20der%20Landesredaktion%20ist%20erfolgt%20%28ja%2Fnein%29%3A%0A%0AHTTPS%0A%0AWird%20die%20Subdomain%20f%C3%BCr%20einen%20externen%20Auftritt%20genutzt%2C%20ist%20zwingend%20ein%20SSL-Zertifikat%20f%C3%BCr%20die%20Auslieferung%20der%20Inhalte%20per%20HTTPS%20n%C3%B6tig.%20Das%20Zertifikat%20m%C3%BCssen%20Sie%20dabei%20selbst%20beschaffen.%20Die%20Zertifikatsanfrage%20wird%20durch%20den%20Aussteller%20an%20uns%20zur%20Freigabe%20weitergegeben%2C%20daf%C3%BCr%20ben%C3%B6tigen%20wir%20die%20folgenden%20Informationen%3A%0A%0AZertifikatsaussteller%20%28z.B.%20AlphaSSL%29%3A%0AVoraussichtliches%20Datum%20der%20Beschaffung%3A%0A%0ARechnungsadresse%0A%0ABitte%20nennen%20Sie%20uns%20Ihre%20Beh%C3%B6rde%2FFirma%3A%0ABitte%20nennen%20Sie%20uns%20eine%20Rechnungsanschrift%3A%0A%0APreise%0A%0AEinrichtung%20Subdomain%3A%2043%E2%82%AC%20zzgl.%20MwSt.%20pro%20Subdomain.%0AEinrichtung%20Weiterleitung%3A%2043%E2%82%AC%20zzgl.%20MwSt.%20pro%20Weiterleitung.%0A%0ABerlinOnline%20erstellt%20Ihnen%20-%20sofern%20alle%20notwendigen%20Angaben%20gemacht%20wurden%20-%20ein%20entsprechendes%20Angebot.%0A '''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.
  
Die Integration erfolgt über ein bereitgestelltes Template:
+
== Integration des "normalen" Berlin.de-Layouts ==
  
* http://www.berlin.de/template/land/
+
=== Layout mit Navigation und Servicespalte eines Bereichs ===
 +
 
 +
Variante 1:
 +
[[Bild:Template_i9_mit_Schnipseln.png|500px]]
 +
 
 +
Variante 2:
 +
[[Bild:Template_i9_ohne.png|500px]]
 +
 
 +
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
 +
 
 +
<pre>
 +
<!-- TITLE ersetzen -->
 +
<!-- HEAD -->
 +
<!-- CONTENT -->
 +
</pre>
 +
 
 +
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 ===
 +
 
 +
[[image:template_i9_normal.png]]
 +
 
 +
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:
 
In diesem Template gibt es zwei Kommentare, die mit eigenen Inhalten ersetzt werden können:
Zeile 30: Zeile 60:
 
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.
 
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-Fries ==
+
== Integration des vereinfachten Berlin.de-Layouts ==
  
Eine einfache Integration im Rahmen von berlin.de stellt die Einbindung des Fries von berlin.de dar. Dieser kann über zwei standardisierte Includes auf die eigene Seite eingebunden werden:
+
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.  
  
* http://www.berlin.de/template/head.php (Fries mit Berlin.de-Logo)
+
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.
* http://www.berlin.de/template/foot.php (Footer, vor allem Zählpixel)
 
  
Der Einbau der '''head.php''' sollte in der Regel direkt nach dem öffnenden Body-Tag '''&lt;body&gt;''' erfolgen. Die '''foot.php''' dementsprechend direkt vor dem schließenden Body-Tag '''&lt;/body&gt;'''. Sollten Sie die Includes lokal zwischenspeichern wollen, wäre es empfehlenswert, sind mindestens einmal in der Woche ein Update zu holen, da wir uns vorbehalten, jederzeit Änderungen an den Includes vorzunehmen.
+
''' head.inc '''
  
Der unangepasste Fries wird in etwa so aussehen:
+
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.
  
[[image:template_head_einfach.png]]
+
''' top.inc '''
  
==== Den Fries anpassen ====
+
In der top.inc befindet sich die komplette Navigation. Die genauen Bereiche, die damit generiert werden, sind im Screenshot rot umrandet.
  
Im Fries kann man an einigen Stellen eigene Inhalte einbauen, das betrifft:
+
[[Bild:Template_i9_mit_Schnipseln_Navi.png|200px]]
  
* einen Titel neben dem Berlin.de-Logo
+
'''foot.inc'''
* Navigationspunkte links von der Suche
 
  
Der Titel ist mit dem HTML-Kommentar &lt;!--BO_HEAD--&gt; markiert. Diesen Kommentar kann man gegen einen eigenen Titel austauschen. Eigene Navigationspunkte kann man für den Kommentar &lt;!--BO_METANAVI--&gt; einbauen. Jeder Navigationspunkt hat in etwa folgenden HTML-Syntax:
+
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.
  
&lt;li class="bom"&gt;&lt;a href="/"&gt;Navigationspunkt&lt;/a&gt;&lt;/li&gt;
+
[[Bild:Template_i9_mit_Schnipseln_Footer.png|200px]]
  
Beim Einbau von Navigationspunkten ist zu beachten, dass in einer kleineren Auflösung wie 800x600 Punkte die Navigation noch in den blauen Balken passt.
+
== Twitter Bootstrap ==
  
Ein angepasster Fries könnte z.B. so aussehen:
+
Die Seiten im neuen Layout werden aus Basis von Twitter Bootstrap erstellt.
  
[[image:template_head_angepasst.png]]
+
Hilfestellung für die Umsetzung in Twitter Bootstrap finden Sie unter http://twitter.github.com/bootstrap/base-css.html .

Aktuelle Version vom 17. Januar 2019, 11:31 Uhr

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: Template i9 mit Schnipseln.png

Variante 2: Template i9 ohne.png

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

Template i9 normal.png

Diese Integration erfolgt über ein bereitgestelltes Template:

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.

Template i9 mit Schnipseln Navi.png

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.

Template i9 mit Schnipseln Footer.png

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 .