Header/Footer Service - Partnerintegration für Partner

Der Bereich der Partnerintegration ist aufgeteilt in einen Layout-Teil und einen technischen Teil.

Layoutintegration

Der Teil der Layoutintegration dient zur grundsätzlichen Erläuterung des strukturellen Layouts für die Integration von Partnerinhalten in die Seite.

Möglichkeiten der Integration

Die Integration von Partnerinhalten auf Berliner Morgenpost / Hamburger Abendblatt erfolgt modular. Über die Fragmentschnittstelle werden dem Partner Header, Footer und optional eine Marginalspalte zur Verfügung gestellt. Somit kann der Partner aus diesen Bereichen und dem eigentlichen Partnerinhalt eine eigenständige Seite im Design von Berliner Morgenpost / Hamburger Abendblatt generieren.

Technische Spezifikationen finden sich im Abschnitt Technische Integration

Layout & Vermaßung

Dem Partner stehen grundsätzlich zwei verschiedene Layout-Varianten zur Verfügung. Entweder kann für den Partnerinhalt die volle Breite der Seite oder in Kombination mit einer von Berliner Morgenpost / Hamburger Abendblatt bereit gestellten Marginalspalte nur der linke Bereich verwendet werden.

Typ 01

Desktop (Typ 01)

Mobil (Typ 01)

Typ 01: Verfügbare Platzhalter

Inhalte	Output
###CONTENT###	Seiteninhalt des Partners

In dieser Version benutzt der Partner die volle Breite der Webseite. Berliner Morgenpost / Hamburger Abendblatt stellt dem Partner Header und den Footer zur Verfügung.

Partnerbereich: Breite 940 px

Typ 02

Typ 02 bietet zusätzliche Platzhalter zur Übergabe von Meta-Informationen.

Desktop (Typ 02)

Mobil (Typ 02)

Typ 02: Verfügbare Platzhalter

Inhalte	Output
###TITLE###	Titel der Seite
###DESCRIPTION###	Meta-Description der Seite
###KEYWORDS###	Meta-Keywords der Seite
###CONTENT###	Seiteninhalt des Partners

Typ 03

In dieser Version ist der nutzbare Bereich beschränkt auf den linken Content Bereich der Webseite. Zusätzlich zum Header und Footer wird die Marginalspalte von Berliner Morgenpost / Hamburger Abendblatt zur Verfügung gestellt. Die Marginalspalte wird dabei nicht durch Partnerinhalte bestückt.

Partnerbereich: Breite 620 px
Marginalspalte von Berliner Morgenpost / Hamburger Abendblatt

Desktop (Typ 03)

Mobil (Typ 03)

Typ 03: Verfügbare Platzhalter

Inhalte	Output
###TITLE###	Titel der Seite
###DESCRIPTION###	Meta-Description der Seite
###KEYWORDS###	Meta-Keywords der Seite
###CONTENT###	Seiteninhalt des Partners

Typ 04

In dieser Version benutzt der Partner die volle Breite der Webseite mit einem zusätzlichen Head Banner. Berliner Morgenpost / Hamburger Abendblatt stellt dem Partner Header und den Footer zur Verfügung.

Partnerbereich: Breite 940 px
Head Banner Bereich: Breite 940 px, Höhe 50 px

Head Banner Partner

Der Headbanner kann ebenfalls vom Partner eingesetzt werden. Neben der Möglichkeit den Headbanner nur zur Gestaltung zu benutzen, bietet dieser dem Partner die Option eine eigene Navigation zu realisieren. Die Gestaltung des Head Banners als grafisches Element oder zur Navigation ist der Beschreibung des Headbanners zu entnehmen.

Höhe des Head Banners

Die Höhe des Head Banners darf unter keinen Umständen von den Vorgaben abweichen. Siehe hierzu die Vermassungen in folgenden Schemata.

Desktop (Typ 04)

Mobil (Typ 04)

Typ 04: Verfügbare Platzhalter

Inhalte	Output
###TITLE###	Titel der Seite
###DESCRIPTION###	Meta-Description der Seite
###KEYWORDS###	Meta-Keywords der Seite
###BREADCRUMB###	Breadcrumb Navigation Zum Beispiel: aus home > politik > ###BREADCRUMB### wird home > politik > partner1hauptseite > partner1unterseite Somit kann der Partner auch die Breadcrumb zu Navigation innerhalb seines Bereichs nutzen.
###CONTENT###	Seiteninhalt des Partners

Typ 05

Auch in dieser Version erstreckt sich der Head Banner auf die volle Breite. Der nutzbare Bereich für den Partnerinhalt beschränkt sich jedoch auf den linken Bereich der Webseite. Zusätzlich zum Header und Footer wird die Marginalspalte von Berliner Morgenpost / Hamburger Abendblatt zur Verfügung gestellt. Die Marginalspalte wird dabei nicht durch Partnerinhalte bestückt.

Partnerbereich: Breite 620 px
Marginalspalte von Berliner Morgenpost / Hamburger Abendblatt
Head Banner Bereich: Breite 940 px, Höhe 50 px

Desktop (Typ 05)

Mobil (Typ 05)

Typ 05: Verfügbare Platzhalter

Inhalte	Output
###TITLE###	Titel der Seite
###DESCRIPTION###	Meta-Description der Seite
###KEYWORDS###	Meta-Keywords der Seite
###BREADCRUMB###	Breadcrumb Navigation Zum Beispiel: aus home > politik > ###BREADCRUMB### wird home > politik > partner1hauptseite > partner1unterseite Somit kann der Partner auch die Breadcrumb zu Navigation innerhalb seines Bereichs nutzen.
###CONTENT###	Seiteninhalt des Partners
###MARGINAL###	Inhalt in der Marginalspalte des Partners

Typ 06

Der Head Banner erstreckt sich über die volle Breite. Der nutzbare Bereich für den Partnerinhalt beschränkt sich jedoch auf den linken Bereich der Webseite. Zusätzlich zum Header und Footer wird die Marginalspalte von Berliner Morgenpost / Hamburger Abendblatt zur Verfügung gestellt. Die Marginalspalte wird dabei nicht durch Partnerinhalte bestückt.

Partnerbereich: Breite 620 px
Marginalspalte von Berliner Morgenpost / Hamburger Abendblatt
Head Banner Bereich: Breite 940 px, Höhe 50 px

Desktop (Typ 06)

Mobil (Typ 06)

Typ 06: Verfügbare Platzhalter

Inhalte	Output
###TITLE###	Titel der Seite
###DESCRIPTION###	Meta-Description der Seite
###KEYWORDS###	Meta-Keywords der Seite
###BREADCRUMB###	Breadcrumb Navigation Zum Beispiel: aus home > politik > ###BREADCRUMB### wird home > politik > partner1hauptseite > partner1unterseite Somit kann der Partner auch die Breadcrumb zu Navigation innerhalb seines Bereichs nutzen.
###CONTENT###	Seiteninhalt des Partners
###MARGINAL###	Inhalt in der Marginalspalte des Partners

Technische Integration

Der folgende Abschnitt beschreibt die Vorgaben für Partner und Aufgaben auf Seite des Partners im Hinblick auf die technische Integration von Seiten und Applikationen innerhalb von Berliner Morgenpost / Hamburger Abendblatt. Dabei werden Partnerinhalte generell über die sogenannte Fragmentschnittstelle eingebunden. Diese gewährleistet, dass alle Partner im entsprechenden Berliner Morgenpost / Hamburger Abendblatt Umfeld erscheinen.

Fragmentschnittstelle

Für jeden Partner wird eine auf diesen speziell abgestimmte Konfiguration angelegt. Dabei wird dem Partner eine URL zur Verfügung gestellt, über welche er das ihm zur Verfügung gestellte Template abrufen kann.

Das Template ist dabei mit bestimmten Platzhaltern gefüllt. Der Partner ruft das Template über die ihm zur Verfügung gestellte URL ab und überschreibt später die dort platzierten Platzhalter durch entsprechende Inhalte.

Jeder Partner kann in Absprache mit Berliner Morgenpost / Hamburger Abendblatt dabei Templates mit verschiedenen Platzhalter erhalten.

In der Fragmentschnittstelle werden alle Informationen durch Platzhalter in das Template geschrieben. Diese Platzhalter müssen dann vom Partner durch entsprechende Inhalte ausgetauscht werden.

Typ 06: Verfügbare Platzhalter

Inhalte Meta	Output
###TITLE###	Titel der Seite
###DESCRIPTION###	Meta-Description der Seite
###KEYWORDS###	Meta-Keywords der Seite

Inhalte Content	Output
###BREADCRUMB###	Breadcrumb Navigation Zum Beispiel: aus home > politik > ###BREADCRUMB### wird home > politik > partner1hauptseite > partner1unterseite Somit kann der Partner auch die Breadcrumb zu Navigation innerhalb seines Bereichs nutzen.
###CONTENT###	Seiteninhalt des Partners
###MARGINAL###	Inhalt in der Marginalspalte des Partners
###HEADBANNER###	Banner unterhalb der Breadcrumb

Tracking

Info Beispiel

Erfolgt automatisch durch das Laden der entsprechenden Skripte im Header.

Optional können hier Anpassungen in Abstimmung mit Berliner Morgenpost / Hamburger Abendblatt notwendig
sein.

                        <!-- WEBTREKK-PARAMS -->
                    
                        durch<script type=
                    
                        "text/javascript">
                    
                        <!--
                    
                        webtrekk.contentGroup[1] =
                    
                        "Wert1";
                    
                        webtrekk.contentGroup[4] =
                    
                        "123456";
                    
                        webtrekk.customParameter[3]
                    
                        = "noch irgend ein anderer
                    
                        Wert";
                    
                        webtrekk.customParameter[6]
                    
                        = "abcdef";
                    
                        -->
                    
                        </script>

Aufbau der Template URL

Die URLs, der einzelnen Layout Typen, sehen so aus:

Typ	Dev	Live	Verfügbare Platzhalter
01	http://funke-dev.abendblatt.de/?config=partner_typ01	http://www.abendblatt.de/?config=partner_typ01	###CONTENT###
02	http://funke-dev.abendblatt.de/?config=partner_typ02	http://www.abendblatt.de/?config=partner_typ02	###CONTENT###, ###TITLE###, ###DESCRIPTION###, ###KEYWORDS###
03	http://funke-dev.abendblatt.de/?config=partner_typ03	http://www.abendblatt.de/?config=partner_typ03	###CONTENT###, ###MARGINAL###, ###TITLE###, ###DESCRIPTION###, ###KEYWORDS###
04	http://funke-dev.abendblatt.de/?config=partner_typ04	http://www.abendblatt.de/?config=partner_typ04	###CONTENT###, ###TITLE###, ###DESCRIPTION###, ###KEYWORDS###, ###BREADCRUMB###, ###HEADBANNER###
05	http://funke-dev.abendblatt.de/?config=partner_typ05	http://www.abendblatt.de/?config=partner_typ05	###CONTENT###, ###MARGINAL###, ###TITLE###, ###DESCRIPTION###, ###KEYWORDS###, ###BREADCRUMB###, ###HEADBANNER###
06	http://funke-dev.abendblatt.de/?config=partner_typ06	http://www.abendblatt.de/?config=partner_typ06	###CONTENT###, ###MARGINAL###, ###TITLE###, ###DESCRIPTION###, ###KEYWORDS###, ###BREADCRUMB###, ###HEADBANNER###

Der Wert des URl Parameters config ist durch den mit dem Partner vereinbarten Wert zu ersetzen, z.B.:

http://funke-dev.abendblatt.de/?config=partner_branchenbuch

Step by Step ToDos

	ToDo	Beschreibung
1.	Template abrufen	Template über zur Verfügung gestellte URL abrufen
2.	Platzhalter ersetzen	Platzhalter im Template durch entsprechenden eigenen Inhalt tauschen
3.	Applikations-Programmierung	Applikation / Webseite auf dem Server des Partners erstellen unter Berücksichtigung der Style- und Technikrichtlinien
3.	Server-Konfiguration	Server Konfiguration auf Partnerseite: Der Partner teilt HAO/BMO die IP-Adresse des Servers mit, auf welchem die Partner-Apllikation gehostet wird. HAO/BMO erstellt damit eine Subdomain, welche auf die genannte IP Adresse zeigt. Der Partner muss in der VHOST Konfiguration seiner Partners die Subdaomain so eintragen, dass der Server auf diese Subdomain hört. Alle Links innerhalb der Partnerapplikation sollten zudem relativ sein.
5.	URL-Anlieferung	HAO/BMO eine URL zur Verfügung stellen, über welche die auf dem Server des Partner aufgerufen werden kann.
6.	Template-Aktualisierung	Das zur Verfügung gestellte Template von HAO/BMO soll mindestens alle 15 Minute aktualisiert werden

Info

Die regelmäßige Aktualisierung alle 15 Minuten ist essentiel. Nur so können zum Beispiel Inhaltsänderungen von Berliner Morgenpost / Hamburger Abendblatt auch über das Template zeitnah umgesetzt und ein identischer Stand auf Berliner Morgenpost / Hamburger Abendblatt selbst und allen Partner-Inhalten gewährleistet werden.

HTML/CSS Vorgaben

Der Partner soll für seine Inhalte eine eindeutig identifizierbare Kennzeichnung verwenden und ausschließlich CSS-Regeln mit dieser Kennung als Präfix schreiben. Dadurch wird sichergestellt, dass das CSS des Partners nicht den Rahmen von Berliner Morgenpost / Hamburger Abendblatt betrifft. Analog dazu werden Styles von Berliner Morgenpost / Hamburger Abendblatt ebenfalls nicht für globale Elemente, sondern für Klassen geschrieben. Der Partner muss sich also nach den von Berliner Morgenpost / Hamburger Abendblatt verwendeten Klassen richten. Diese sollen nicht geerbt werden, sondern im Falle eines ähnlichen Styles eher kopiert und in eine eigene Regel mit dem Präfix des Partners gekapselt werden. Dadurch bleiben die Styles bei Berliner Morgenpost / Hamburger Abendblatt änderbar, ohne Auswirkungen auf den Partner zu haben. Zu beachten sind bei der Entwicklung also auch schon vergebene Klassennamen seitens Berliner Morgenpost / Hamburger Abendblatt, die innerhalb des Partner-Bereichs nicht verwendet werden sollten.

Beispiel:

Der Partner "Müller" will eigenen Inhalt innerhalb des Platzhalters "Content" ausliefern.

HTML

            <div class="widget code html
            viziwyg-section-1014 inpage-widget-4833 widget-editable">
        
            ###CONTENT###
        
            </div>

wird ersetzt durch:

HTML

                <div class="widget code html
                viziwyg-section-1014 inpage-widget-4833 widget-editable">
            
                <div id="mueller">
            
                <p>Bestellen Sie hier unsere Produkte!</p>
            
                </div>
            
                </div>

Per CSS wird über die ID "mueller" auf das <p>-Tag zugegriffen. Also:

CSS

                    #mueller p {
                
                    margin:10px;
                
                    }

Technische Richtlinien für Partner

Browserkompatibilität

Die Webseite muss voll kompatibel zu folgenden Browsern sein:

Mozilla Firefox in aktuellen Versionen ab Version 3.6

Apple Safari ab Version X (4/5+)

Google Chrome

Opera (10+)

Microsoft Internet Explorer ab Version 7

Nicht unterstützte Features sollen dabei durch sinnvolle Fallback-Lösungen realisiert werden.

Browsern, die nicht voll unterstützt werden, soll trotzdem bestmöglicher Zugang zu den Inhalten von Berliner Morgenpost / Hamburger Abendblatt ermöglicht werden.

Bibliotheken

Folgende Bibliotheken werden verwendet:

jQuery (v1.6.2)

PlugIns

Lightbox (Eigenentwicklung)
VideoPlayer (Eigenentwicklung)

Zeichensatz

Die Inhalte der Webseite verwenden als Zeichensatz UTF-8.

SEO Vorgaben

Die Struktur soll so flach und so einfach wie möglich gehalten werden. Unterstützend kann HTML5-Semantik verwendet werden, um bestimmten Bereichen auch eine Kennzeichnung oder Funktion zu geben.

Grundsätzlich sollten die folgeden SEO Regeln beachtet werden.

Hinweis für Partner: Der Einsatz von Cannonical-Tags ist soweit nicht anders vereinbart, nicht erlaubt.

Nr.	SEO Regel
1.	Auf jeder Seite darf nur 1x das H1-Tag verwendet werden. Es muss verwendet werden. Das H1-Tag darf nur Informationen beinhalten, die fur genau diese eine Seite relevant sind Startseite z.B. "Aktuelle Nachrichten", Ressortseite z.B. "Aktuelle Politik Nachrichten", Artikel z.B. "Dachzeile: Titelzeile"
2.	H2-Tags sollen nur vorkommen, wenn sie eine Unterinformation der H1 sind (Zwischenuberschriften) - dann jedoch gern.
3.	H3-Tags können relevante Zusätze zum Artikel beinhalten: Bilder, Videos, Text-Galerie
3.	Rechte Spalte sollte keine H-Tags beinhalten, sondern nur per CSS gestylt werden
5.	Content und Überschriften möglichst nah am <body>-Tag positionieren
6.	Performance: Möglichst alle CSS-Styles und Javascripte auslagern und referenzieren (Verwendung von Sprites sehr sinnvoll)
7.	Images: Bei Artikel-Bildern/Content-Bildern immer Height und Width-Attribut verwenden, bei möglichst allen Bildern das Alt-Attribut befüllen
8.	Title-Tag: Ressortname/Dachzeile: Titelzeile - Berliner Morgenpost / Hamburger Abendblatt Individuelles Meta-Description-Tag mit möglichst < 150 Zeichen
9.	Meta-Keywords sind fur SEO fast nutzlos geworden. Falls Verwendung, bitte maximal 5-7 unterschiedliche Wörter
10.	Möglichst viele Links sollten "sprechend" sein Nicht gut: mehr, weiter, alles, aktuelles Gut: mehr aus Politik, alle Infos zum Dschungelcamp, aktuelles zum Hochwasser
11.	Einlesen ins HTML 5 hier gibt es http://boblet.tumblr.com/post/134732913/html5-structure3 / https://html5.org/ Semantisch korrekte Verwendung von Text-Styling (em-Tag, b-Tag, ins-Tag, strike-Tag,...)
12.	Möglichst nicht zuviele <div> Ebenen. Zusammengehörige <div> Kästen sollten in einem Parent-<div> eingschlossen sein Schlecht: <div>Überschrift</div><div>Absatz 1</div><div>Absatz 2</div> Besser: <div class=>content"><div>Überschrift</div><div>Absatz 1</div><div>Absatz 2</div></div> Perfekt: <div class=>content">Überschrift<p>Absatz 1</p><p>Absatz 2</p></div>