Read Me Ms Mfo

581 views
520 views

Published on

Published in: Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
581
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Read Me Ms Mfo

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×