1. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
Liebe Kolleginnen und Kollegen,
dieses Dokument soll ihnen als Hilfe dienen, um die dpa-SportsLive Formel 1-Applikation nach ihren ganz
speziellen Layoutwünschen zu modifizieren. Schritt für Schritt wird ihnen erklärt, wie sie der Applikation ihr ganz
eigenes „Renn-Outfit“ verpassen können.
Sollten sie darüber hinaus noch Fragen haben, wenden sie sich gern an uns:
Tel: Sebastian Zilles, 040 4113 32247 / Mail: sebastian.zilles@dpa-info.com
Tel: Thomas Karl, 040 4113 32153 / Mail: thomas.karl@dpa-info.com
Tel: Sebastian Possin, 040 4113 32278 / Mail: sebastian.possin@dpa-info.com
Tel: Danny Fritz, 040 4113 32393 / Mail: danny.fritz@dpa-info.com
Diese Kollegen und das gesamte Team von dpa-InfoActive erreichen sie auch über folgende Sammeladresse:
Mail: infocom.active@dpa-info.com
Inhaltsverzeichnis
1. Anlegen ihres individuellen Layoutverzeichnisses ..................................................................................................................2
2. Voreinstellungen .....................................................................................................................................................................3
3. Erstellen und publizieren des eigenen Hintergrundbildes .......................................................................................................3
4. Konfiguration der Farben ........................................................................................................................................................4
5. Konfiguration der Navigationszeilen........................................................................................................................................5
6. Allgemeine Einstellungen........................................................................................................................................................5
6.1 Start-Team ........................................................................................................................................................................5
6.2 Automatische Aktualisierung .............................................................................................................................................6
6.3 Zeitzone ............................................................................................................................................................................6
7. Erstellen einer Schaltfläche im Grafik-Header für einen externen Link ...................................................................................7
8. Verwendung von DeepLinks bzw. Festlegung der Startansicht ..............................................................................................9
9. IVW-Pixel und Tracking ........................................................................................................................................................12
1
2. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
1. Anlegen ihres individuellen Layoutverzeichnisses
Bitte legen sie zuerst ein weiteres Verzeichnis auf ihrem Webserver an. Dieses muss parallel zum
Standardverzeichnis liegen. Bevor sie also ihre Layoutwünsche umsetzen, entpacken sie bitte die mitgelieferte zip-
Datei „my_ms_mfo“, die die notwendige Ordnerstruktur des Parallelverzeichnisses bereits beinhaltet.
Anschließend sollten sie folgende Ordnerstruktur auf ihrem Webserver besitzen (siehe auch Screenshot unten):
Verzeichnisstruktur auf Webserver Unterverzeichnis Inhalte
my_ms_mfo individuelles Layoutverzeichnis
feed ms_mfo_config.xml
js click.js
html_php index.html, dpa_sharedFonts.swf
layouts Hintergrundbild
ms_mfo Standardverzeichnis
feed Alle Feeds die in der Applikation dargestellt
werden.
js u.a. Plugincheck
layouts Hintergrundbild für die Standardversion
swf *.swf Dateien
html_php html Datei für die Standardversion,
dpa_sharedFonts.swf
images Bilder
Screenshot der Serverstruktur
Verlinken sie auf die index.html Datei in:
my_ms_mfo html_php
um ihr individuelles Layout anzuzeigen.
Die Applikation lädt weiterhin alle Dateien, die während
der Rennen aktualisiert werden und in ms_mfo enthalten
sind.
Wichtig: Alle Anpassungen und Veränderungen ihrerseits nehmen sie bitte nur in ihrem individuellen
Layoutverzeichnis my_ms_mfo vor, denn dieses Parallelverzeichnis wird von unserem Promoter auch im Falle
einer notwendigen Synchronisation niemals überschrieben. So ist gewährleistet, dass alle von ihnen
vorgenommenen Anpassungen nicht verändert werden.
2
3. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
2. Voreinstellungen
Ihre eigene Applikation müssen sie zunächst personalisieren. Dazu finden sie im Verzeichnis my_ms_mfo
html_php die Datei index.html. Klicken sie mit der rechten Maustaste auf die Datei. Öffnen sie diese mit dem
Editor. Hinter der Variablen flashvars.customer müssen sie ihren Kundennamen (ohne Sonderzeichen, ß und
Umlaute) eintragen, damit eine eindeutige Zuordnung möglich ist. Legen sie mit der Variablen flashvars.language
die von ihnen bestellte und vertraglich abgestimmte Sprache fest. Die dpa-infocom bietet den dpa-SportsLive
Formel 1-Dienst derzeit in vier Sprachen an:
de = deutsch
en = englisch
es = spanisch
it = italienisch
Wichtig: Beide Variablen müssen nach dem Gleichzeichen in Anführungsstriche gesetzt werden und mit einem
Semikolon enden.
Beispiel: Das Unternehmen “Musterkunde“, das den deutschen Dienst bestellt hat, würde folgende
Voreinstellungen wählen:
flashvars.customer = “musterkunde”;
flashvars.language = “de”;
3. Erstellen und publizieren des eigenen Hintergrundbildes
Eine Musterdatei (layout.psd) für ihr eigenes Layout finden sie im Verzeichnis my_ms_mfo layouts.
Diese Vorlage können sie nach ihren Wünschen gestalten und somit an ihr CI anpassen. Die Farbe der
Hauptnavigation wird erst später in der Konfigurations-Datei festgelegt.
Wichtig: Wenn ihr eigenes Layout fertig ist, muss es mit folgender Namenskonvention im jpg-Format neben die
Musterdatei im Verzeichnis my_ms_mfo layouts exportiert werden:
Namenskonvention für das Hintergrundbild: customer_language.jpg
• “customer” muss dabei der Kundenvariable entsprechen (siehe 2. Voreinstellung)
• “language” muss dabei der gewählten Sprache entsprechen (siehe 2. Voreinstellung)
Beispiel: Der Kunde mit der customer-Variablen “musterkunde” und gewählter deutscher Sprache (de) würde
das Hintergrundbild auf diese Weise abspeichern: musterkunde_de.jpg
3
4. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
4. Konfiguration der Farben
In diesem Abschnitt wird ihnen erklärt, wie sie die Farbgebung in der Hauptnavigation anpassen können und
welche Farbvariable welchen Bereich des Layouts betrifft. Für ihre persönliche Konfiguration der Farben finden sie
im Verzeichnis my_ms_mfo feed die Datei ms_mfo_config.xml.
Die Zeile zur Konfiguration der Farbgebung beginnt mit “<colour backGround=...”.
Diese erste Variable (backGround) beschreibt die Kontrast-Farbe für die gepunktete Hintergrundschattierung der
Hauptnavigation. Je nach Festlegung ihrer Hintergrundfarbe können sie sich für eine hellere (backGround=”White”)
oder dunklere (backGround=”Black”) Variante entscheiden.
Es folgen elf weitere Parameter, die ihnen für die Farbdefinitionen zur Verfügung stehen. Tragen sie dort bitte ihre
gewünschte Farbe als sechsstelligen RGB-Wert (mit einem „0x“ vorangestellt) ein.
Die Variablen im Detail:
(1) mycolor1 Farbwert für Hintergrund des Live-Tickers
(2) mycolor2 Farbwert für Schrift und Rahmen bei MouseOver in der Live-Navigation
(3) mycolor3 Farbwert für zweiten Hauptgrund (nach Hintergrundfarbe) in allen Bereichen
(4) mycolor4 Farbwert für zweiten Hauptgrund (neben Hintergrundfarbe) in der Fahrer-Statistik
(5) mycolor5 Farbwert für den Hintergrund aller Scrollbars
(6) lineListMenu Farbwert für Rahmen der Dropdown-Menüs
(7) colorContentFont Farbwert für die Hauptschrift im Content-Bereich (z.B. Fließtext)
(8) colorContentFont1 Farbwert für die alternative Hauptschrift im Content-Bereich (z.B. Fließtext)
(9) colorGradient1 Anfangs-Farbwert für den Verlauf in den Kopfzeilen innerhalb der Navigation
(10) colorGradient2 End-Farbwert für den Verlauf in den Kopfzeilen innerhalb der Navigation
(11) colorGradient3 Farbwert für den Hintergund-Verlauf bei den Streckeninfos
Beispiel: Das Unternehmen “musterkunde” möchte für die eigene Applikation eine helle Hintergrundschattierung,
die Variable “mycolor1” in schwarz (RGB-Wert=0x000000) und “colorGradient3” in weiß (RGB-
Wert=0xFFFFFF) haben (die weiteren Variablen vernachlässigen wir in diesem Beispiel, können
allerdings mit gleichem Vorgehen verändert werden). In diesem Fall sieht die Farbdefinition so aus:
<colour backGround=quot;Whitequot; myColour1=quot;0x000000quot; ... colorGradient3=quot;0xFFFFFFquot;></colour>
4
5. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
5. Konfiguration der Navigationszeilen
Schriftgröße und Farben der beiden Navigationszeilen lassen sich ebenfalls anpassen. Dies geschieht auch in der
Datei ms_mfo_config.xml. Direkt nach den Farbdefinitionen folgen die Zeilen zur Gestaltung der Primär-
(<fontPrimNavi...) und Sekundär-Navigationszeile (<fontSekNavi...). Für die Variable “size” ist die Schriftgröße als
Zahl anzugeben, die Variablen für die Schriftfarben sind wieder mit dem RGB-Wert zu füllen.
Die Variablen im Detail:
(1) normal Farbwert für inaktive Menüpunkte
(2) rollOver Farbwert für Mouse-Over inaktiver Menüpunkte
(3) click Farbwert für aktive Menüpunkte
Beispiel: Das Unternehmen “musterkunde” möchte für die eigene Applikation die Sekundär-Navigation ändern.
Die Schriftgröße soll 11 betragen, die inaktive Farbe weiß (RGB-Wert=0x000000), die rollOver-Farbe
grau (RGB-Wert=0xCCCCCC) und die aktive Farbe rot (RGB-Wert=0xFF0000) sein. In diesem Fall
sieht die Navigationsdefinition so aus:
<fontSekNavi size=quot;11quot; normal=quot;0x000000quot; rollOver=quot;0xCCCCCCquot; click=quot;0xFF0000quot;></fontSekNavi>
6. Allgemeine Einstellungen
6.1 Start-Team
Die Datei ms_mfo_config.xml bietet ihnen neben der Farbanpassung noch weitere Einstellungsmöglichkeiten.
Mit der Variablen startTeam können sie festlegen, welches Team angezeigt werden soll, wenn der User in der
Primär-Navigation auf „Teams“ klickt.
Die Variablen im Detail:
(1) t1 McLaren Mercedes
(2) t2 Ferrari
(3) t3 BMW Sauber
(4) t4 Renault
(5) t5 Toyota
(6) t6 Red Bull
(7) t7 Toro Rosso
(8) t8 Williams
(9) t9 Brawn GP
(10) t10 Force India
5
6. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
Beispiel: Das Unternehmen “musterkunde” möchte immer zunächst mit dem Team BMW Sauber starten.
In diesem Fall sieht die Teamstart-Definition folgendermaßen aus:
<startTeam>t3</startTeam>
6.2 Automatische Aktualisierung
Mit den Parametern autoRefreshTime und autoRefresh können sie das Intervall definieren, in denen sich der Live-
Ticker automatisch aktualisiert. Dafür muss der Parameter autoRefresh auf “true“ gesetzt werden (siehe unten).
Die Angabe des Intervalls erfolgt als Sekundenzahl.
Beispiel: Das Unternehmen “musterkunde” möchte, dass sich der Live-Ticker alle 1:30 Minuten aktualisiert. In
diesem Fall sieht die Aktualisierungs-Definition so aus:
<autoRefreshTime>90</autoRefreshTime>
Wichtig: Wenn sie die Funktion eines automatischen Aktualisierens wünschen, dann muss die Folgezeile in der
ms_mfo_config-Datei so aussehen:
<autoRefresh>true</autoRefresh>
Sie können sich auch dafür entscheiden, die automatische Aktualisierung zu unterbinden und den Refresh nur
durchzuführen, wenn der User auf den Aktualisieren-Button klickt. In diesem Fall muss die Zeile so aussehen:
<autoRefresh>false</autoRefresh>
Damit wird der Wert der Variable autoRefreshTime ignoriert.
6.3 Zeitzone
Damit im Kalender die für ihre Zeitzone relevanten Startzeiten angegeben werden, müssen sie die gewünschte
Zeitzone in Relation zur Weltzeit (UTC) setzen. Die UTC ist dabei mit 0 definiert. Bei einer negativen Abweichung
der Local Time von der UTC wird ein Minus vorangestellt (-1).
Beispiel: Das Unternehmen “musterkunde” möchte, dass sich die Startzeiten nach der Mitteleuropäischen
Sommerzeit (MEZ) richtet. In diesem Fall sieht die Zeitzonen-Definition folgendermaßen aus:
<timeZone>1</timeZone>
6
7. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
7. Erstellen einer Schaltfläche im Grafik-Header für einen externen Link
Sie haben die Möglichkeit, ihre Applikation mit externen Links zu versehen. Wenn sie einen externen Link
einbauen wollen, dann müssen sie die Schaltfläche zunächst layouten. Dazu öffnen sie nochmals ihr
Hintergrundbild und zeichnen den Button. Ob sie dabei lediglich einen Schriftzug wählen, oder ein Logo, bleibt
ihnen frei überlassen.
Sie möchten einen externen Link einfügen, der bspw. auf die Homepage eines Partner-Unternehmens
Beispiel:
führt. Dazu wählen sie zum Beispiel einen einfachen Schriftzug (hier als “musterlink“ bezeichnet) in der
Kopfzeile der Applikation.
Nachdem sie ihren neuen Hintergrund inklusive gewünschter Schaltfläche gestaltet haben, generieren sie eine
unsichtbare Schaltfläche über dem Schriftzug. Dazu öffnen sie die Datei ms_mfo_config.xml aus dem Verzeichnis
my_ms_mfo feed. Mit den Variablen xStart, xEnd, yStart und yEnd können sie die Eckpunkte eines
quadratischen Buttons angeben. Folgende Grafik zeigt ihnen die Maße der Applikation:
7
8. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
Entsprechend dieser Maße können sie ihre Schaltfläche positionieren. Damit sie besser sehen können, wie groß
die Schaltfläche ist und wo sie liegt, können sie die Variable ref alpha editieren. Steht dieser Parameter auf 0, so
ist die Schaltfläche unsichtbar. Wenn sie den Wert bspw. auf 50 (<ref alpha=quot;50quot;>) setzen, so wird die Fläche, die
sie mit den vier x- und y-Parametern beschreiben, als grünes durchsichtiges Rechteck angezeigt.
Wenn sie mit der Ausrichtung der Schaltfläche zufrieden sind, stellen sie die Variable ref alpha wieder auf 0 zurück
(<ref alpha=quot;0quot;>) und geben bei der Variable url die gewünschte Ziel-URL ein. Eine Verlinkung zur Homepage des
Unternehmens “musterlink“ könnte so aussehen: <url>http://www.musterlink.com</url>
In ihrer Applikation verändert sich der Mauszeiger nun dort, wo sie ihre Schaltfläche positioniert haben, zu einer
Maushand und öffnet bei einem Mausklick die Ziel-URL in einem neuen Fenster.
8
9. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
8. Verwendung von DeepLinks bzw. Festlegung der Startansicht
Sie können frei entscheiden, welcher Content der Flash-Applikation beim Start angezeigt werden soll. Um ihre
gewünschte Startansicht festzulegen, gehen sie in das Verzeichnis my_ms_mfo html_php. Dort klicken sie mit
der rechten Maustaste auf die Datei index.html und öffnen diese mit dem Editor. Die Variable flashvars.deepLink
muss auf die von ihnen gewünschte Startseite verweisen.
Wichtig: Auch der Deeplink muss in Anführungsstriche gesetzt werden und mit einem Semikolon enden.
Beispiel: Das Unternehmen “musterkunde” möchte, dass stets der Kalender zu Beginn angezeigt wird. In diesem
Fall sieht die deepLink-Definition wie folgt aus:
flashvars.deepLink = quot;calendarquot;;
Für ihre redaktionelle Arbeit kann es vielleicht Sinn machen, DeepLinks vorzubereiten, so dass sie die Flash-
Applikation mehrfach auf ihrer Seite einbinden können. Denkbar ist der Einsatz von DeepLinks zum Beispiel in
folgenden Szenarien.
(A) Sie haben einen Artikel auf ihrer Seite, der die neue GP-Strecke in Abu Dhabi beschreibt.
Dementsprechend lautet der DeepLink “track_17“. Die Variable müsste folgendermaßen editiert werden:
flashvars.deepLink = quot;track_17quot;;
(B) Sie haben einen Artikel auf ihrer Seite, mit dem die aktuelle WM-Fahrerwertung in Verbindung gebracht
werden kann. Der DeepLink lautet “resultDrivers“. Die Variable müsste folgendermaßen editiert werden:
flashvars.deepLink = quot;resultDriversquot;;
Eine komplette Liste der DeepLinks finden sie auf den nächsten beiden Seiten. Zusammen mit ihren Technikern
überlegen wir gerne, welche Lösung für ihren Redaktionsalltag die einfachste ist. Ansprechpartner finden sie am
Anfang dieses Dokuments. Folgende Varianten haben wir vorbereitet:
Übergabe der DeepLink-Variable mit PHP
Übergabe der DeepLink-Varibale mit JS über die URL
Einmaliges Anlegen diverser HTML-Dateien mit unterschiedlichen DeepLinks
9
10. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
Die Variablen im Detail:
Navigationpunkt Seite Deeplink
Live Ticker live
Ticker Qualfikation qualiTicker
Startaufstellung startingGrid
Fahrer-Statistik lapsStatistic
Strecke track
Bilder pictureGallery
WM-Ergebnisse Rennen results oder resultRace
Fahrer-WM resultDrivers
Konstrukteurs-WM resultConstructors
Qualifying resultQuali
1. Freies Training Practice1 oder resultPractice1
2. Freies Training Practice2 oder resultPractice2
3. Freies Training Practice3 oder resultPractice3
F1-Kalender Kalender calendar
GP Australien calendar_1
GP Malaysia calendar_2
GP China calendar_3
GP Bahrain calendar_4
GP Spanien calendar_5
GP Monaco calendar_6
GP Türkei calendar_7
GP England calendar_8
GP Deutschland calendar_9
GP Ungarn calendar_10
GP Europa calendar_11
GP Belgien calendar_12
GP Italien calendar_13
GP Singapur calendar_14
GP Japan calendar_15
GP Brasilien calendar_16
GP Abu Dhabi calendar_17
Tracks Strecken tracks
GP Australien track_1
GP Abu Dhabi track_17
10
11. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
Teams Teams Teams
McLaren Mercedes – Das Auto team_1
Ferrari – Das Auto team_2
BMW Sauber – Das Auto team_3
Renault – Das Auto team_4
Toyota – Das Auto team_5
Red Bull – Das Auto team_6
Toro Rosso – Das Auto team_7
Williams – Das Auto team_8
Brawn GP – Das Auto team_9
Force India – Das Auto team_10
McLaren Mercedes – Das Team team_1_0
McLaren Mercedes – Fahrer 1 team_1_1
McLaren Mercedes – Fahrer 2 team_1_2
Force India – Das Team team_10_0
Force India – Fahrer 1 team_10_1
Force India – Fahrer 2 team_10_2
11
12. Anpassung dpa-SportsLive Formel 1
Stand: 17.03.2009, 09:11 Uhr
9. IVW-Pixel und Tracking
Die Flash-Applikation ist so angelegt, dass jeder Klick in der Grafik gezählt werden kann. Auch in diesem Fall
haben wir zwei Varianten angelegt. Mit der ersten Variante ist es möglich, zwei verschiedene IVW-Pixel in der
Konfigurationsdatei anzulegen. Dazu öffnen sie wieder die Datei ms_mfo_config.xml aus dem Verzeichnis
my_ms_mfo feed. Tragen sie einfach ihre(n) IVW-Pixel in den Attributen pixel1 und/oder pixel2 ein.
<ivwPixel pixel1='http://ivwbox.de/cgi-bin/ivw/CP/' pixel2=''></ivwPixel>
Die zweite Variante nutzt das vorbereitete click.js im Verzeichnis my_ms_mfo js. Diese wird aufgerufen, wenn
die Variable flashvars.callClickJs in der index.html-Datei auf “true“ gesetzt ist:
flashvars.callClickJs = quot;truequot;;
Beispiel: function click(trackVar){
var IVW=quot;http://ivwbox.de/cgi-bin/ivw/CP/quot;;
var zeit=quot;&zeit=quot;+new Date().getTime();
var zaehlpixelIVW = new Image();
zaehlpixelIVW.src = IVW+quot;?r=quot;+escape(document.referrer)+quot;quot;+zeit;
}
Diese js-Funktion können sie frei editieren. Somit steht ihnen eine Schnittstelle zur Verfügung, um noch weitere
Aktionen, wie zum Beispiel den Austausch eines Werbebanners auf Klick, auszulösen. Darüber hinaus können die
Klicks in der Flash-Applikation mit dieser Funktion getrackt werden. Damit können sie die Häufigkeit der Aufrufe
folgender Inhalte auswerten.
Navigation Seite trackVar
Live Ticker live-commentary
Startaufstellung live-startingGrid
Fahrerstatistik live-lapsStatistic
Kurs live-track
Bildergalerie live-pictureGallery
WM-Ergebnisse Rennen results-race
Fahrerwertung results-drivers
Konstrukteurswertung results-constructors
Qualifying results-quali
1. Freies Training results-fp1
2. Freies Training results-fp2
3. Freies Training results-fp3
Kalender Kalender calendar
Kurse Kurse tracks
Teams Teams teams
Archiv Archiv archive
12