SlideShare ist ein Scribd-Unternehmen logo
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
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
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
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
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
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
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
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
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
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
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
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

Weitere ähnliche Inhalte

Andere mochten auch

Exel
ExelExel
2007-juni Web20Klasse
2007-juni Web20Klasse2007-juni Web20Klasse
2007-juni Web20Klasse
Franz Strauss
 
Paradigmas emergentes copia
Paradigmas emergentes   copiaParadigmas emergentes   copia
Paradigmas emergentes copia
carlitoshernandez24
 
Dia de la mujer
Dia de la mujer Dia de la mujer
Dia de la mujer
Prof.Martin Cano Rodriguez
 
Ein.
Ein.Ein.
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
mbar196
 
Diapositivas jasmin
Diapositivas  jasminDiapositivas  jasmin
Diapositivas jasmin
Jasmin Cárdenas
 
Informatica enfermeria 1_ro (2)
Informatica enfermeria 1_ro (2)Informatica enfermeria 1_ro (2)
Informatica enfermeria 1_ro (2)
Jasmin Cárdenas
 
2008-Dez IKT Tag
2008-Dez IKT Tag2008-Dez IKT Tag
2008-Dez IKT Tag
Franz Strauss
 
Unaico presentation elg_ppt_approved_2010_ger
Unaico presentation elg_ppt_approved_2010_gerUnaico presentation elg_ppt_approved_2010_ger
Unaico presentation elg_ppt_approved_2010_gerteissl
 
Treppenlifte Lehrstuhl
Treppenlifte LehrstuhlTreppenlifte Lehrstuhl
Treppenlifte Lehrstuhlsabrinageli
 
#spanishrevolution
#spanishrevolution#spanishrevolution
#spanishrevolution
Jörg Reschke
 
Rene Valencia Fuentes
Rene Valencia FuentesRene Valencia Fuentes
Rene Valencia Fuentes
Rene Valencia Fuentes
 
Operadores y funciones
Operadores y funcionesOperadores y funciones
Operadores y funciones
Jasmin Cárdenas
 
Konzept Communitys des Empfehlungsbund.de mit technischen Details zur Suche
Konzept Communitys des Empfehlungsbund.de mit technischen Details zur SucheKonzept Communitys des Empfehlungsbund.de mit technischen Details zur Suche
Konzept Communitys des Empfehlungsbund.de mit technischen Details zur Suche
pludoni GmbH
 
Perspektiven von LMS als Plattform für soziale Interaktion
Perspektiven von LMS als Plattform für soziale InteraktionPerspektiven von LMS als Plattform für soziale Interaktion
Perspektiven von LMS als Plattform für soziale InteraktionMarc Widmer
 
Factura 1
Factura 1Factura 1
Factura 1
neo neo
 

Andere mochten auch (19)

Exel
ExelExel
Exel
 
2007-juni Web20Klasse
2007-juni Web20Klasse2007-juni Web20Klasse
2007-juni Web20Klasse
 
Paradigmas emergentes copia
Paradigmas emergentes   copiaParadigmas emergentes   copia
Paradigmas emergentes copia
 
Dia de la mujer
Dia de la mujer Dia de la mujer
Dia de la mujer
 
Ein.
Ein.Ein.
Ein.
 
Mechanismen
MechanismenMechanismen
Mechanismen
 
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
 
Diapositivas jasmin
Diapositivas  jasminDiapositivas  jasmin
Diapositivas jasmin
 
Informatica enfermeria 1_ro (2)
Informatica enfermeria 1_ro (2)Informatica enfermeria 1_ro (2)
Informatica enfermeria 1_ro (2)
 
2008-Dez IKT Tag
2008-Dez IKT Tag2008-Dez IKT Tag
2008-Dez IKT Tag
 
Scrum 2009 10_23
Scrum 2009 10_23Scrum 2009 10_23
Scrum 2009 10_23
 
Unaico presentation elg_ppt_approved_2010_ger
Unaico presentation elg_ppt_approved_2010_gerUnaico presentation elg_ppt_approved_2010_ger
Unaico presentation elg_ppt_approved_2010_ger
 
Treppenlifte Lehrstuhl
Treppenlifte LehrstuhlTreppenlifte Lehrstuhl
Treppenlifte Lehrstuhl
 
#spanishrevolution
#spanishrevolution#spanishrevolution
#spanishrevolution
 
Rene Valencia Fuentes
Rene Valencia FuentesRene Valencia Fuentes
Rene Valencia Fuentes
 
Operadores y funciones
Operadores y funcionesOperadores y funciones
Operadores y funciones
 
Konzept Communitys des Empfehlungsbund.de mit technischen Details zur Suche
Konzept Communitys des Empfehlungsbund.de mit technischen Details zur SucheKonzept Communitys des Empfehlungsbund.de mit technischen Details zur Suche
Konzept Communitys des Empfehlungsbund.de mit technischen Details zur Suche
 
Perspektiven von LMS als Plattform für soziale Interaktion
Perspektiven von LMS als Plattform für soziale InteraktionPerspektiven von LMS als Plattform für soziale Interaktion
Perspektiven von LMS als Plattform für soziale Interaktion
 
Factura 1
Factura 1Factura 1
Factura 1
 

Ähnlich wie Read Me Ms Mfo

JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome Anpassungshandbuch
JoomlaShine
 
JSN Tendo Anpassungshandbuch
JSN Tendo AnpassungshandbuchJSN Tendo Anpassungshandbuch
JSN Tendo Anpassungshandbuch
JoomlaShine
 
Config as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as CodeConfig as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as Code
DevOps Meetup Bern
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
Peter Müller
 
JSN Epic Anpassungshandbuch
JSN Epic AnpassungshandbuchJSN Epic Anpassungshandbuch
JSN Epic Anpassungshandbuch
JoomlaShine
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
webpard UG
 
JSN Teki Anpassungshandbuch
JSN Teki AnpassungshandbuchJSN Teki Anpassungshandbuch
JSN Teki Anpassungshandbuch
JoomlaShine
 
JSN Cube Anpassungshandbuch
JSN Cube AnpassungshandbuchJSN Cube Anpassungshandbuch
JSN Cube Anpassungshandbuch
JoomlaShine
 
Anleitung pdf destiller
Anleitung pdf destillerAnleitung pdf destiller
Anleitung pdf destiller
mrslide007
 
Joomla
JoomlaJoomla
Benutzerhandbuch
BenutzerhandbuchBenutzerhandbuch
Benutzerhandbucheturan
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Make Your IBM Connections Deployment Your Own - Customize it! German Version
Make Your IBM Connections Deployment Your Own - Customize it! German VersionMake Your IBM Connections Deployment Your Own - Customize it! German Version
Make Your IBM Connections Deployment Your Own - Customize it! German Version
Klaus Bild
 
Domino 9 - jetzt mit integrierten Features, die das Admin-Leben leichter machen
Domino 9 - jetzt mit integrierten Features, die das Admin-Leben leichter machenDomino 9 - jetzt mit integrierten Features, die das Admin-Leben leichter machen
Domino 9 - jetzt mit integrierten Features, die das Admin-Leben leichter machen
Belsoft
 
ORCA AVA 22 - Neue Features
ORCA AVA 22 - Neue FeaturesORCA AVA 22 - Neue Features
ORCA AVA 22 - Neue Features
ORCA Software GmbH
 

Ähnlich wie Read Me Ms Mfo (16)

JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome Anpassungshandbuch
 
JSN Tendo Anpassungshandbuch
JSN Tendo AnpassungshandbuchJSN Tendo Anpassungshandbuch
JSN Tendo Anpassungshandbuch
 
Config as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as CodeConfig as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as Code
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
JSN Epic Anpassungshandbuch
JSN Epic AnpassungshandbuchJSN Epic Anpassungshandbuch
JSN Epic Anpassungshandbuch
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
 
JSN Teki Anpassungshandbuch
JSN Teki AnpassungshandbuchJSN Teki Anpassungshandbuch
JSN Teki Anpassungshandbuch
 
JSN Cube Anpassungshandbuch
JSN Cube AnpassungshandbuchJSN Cube Anpassungshandbuch
JSN Cube Anpassungshandbuch
 
Anleitung pdf destiller
Anleitung pdf destillerAnleitung pdf destiller
Anleitung pdf destiller
 
Joomla
JoomlaJoomla
Joomla
 
P D F E X C E L D E
P D F  E X C E L  D EP D F  E X C E L  D E
P D F E X C E L D E
 
Benutzerhandbuch
BenutzerhandbuchBenutzerhandbuch
Benutzerhandbuch
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
Make Your IBM Connections Deployment Your Own - Customize it! German Version
Make Your IBM Connections Deployment Your Own - Customize it! German VersionMake Your IBM Connections Deployment Your Own - Customize it! German Version
Make Your IBM Connections Deployment Your Own - Customize it! German Version
 
Domino 9 - jetzt mit integrierten Features, die das Admin-Leben leichter machen
Domino 9 - jetzt mit integrierten Features, die das Admin-Leben leichter machenDomino 9 - jetzt mit integrierten Features, die das Admin-Leben leichter machen
Domino 9 - jetzt mit integrierten Features, die das Admin-Leben leichter machen
 
ORCA AVA 22 - Neue Features
ORCA AVA 22 - Neue FeaturesORCA AVA 22 - Neue Features
ORCA AVA 22 - Neue Features
 

Read Me Ms Mfo

  • 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