Spezifikationen digitale Editionen manager magazin Harvard Business Manager 1
Inhalt 1. ios - ipad 1.1. Allgemeines 1 1.2. Statische Anzeigen 1 1.3. Statische Anzeigen mit Video 3 1.4. Interaktive Anzeigen 6 1.5. Tracking 10 2. Web Reader 2.1. Allgemeines 11 2.2. Statische Anzeigen 11 2.3. Interaktive Anzeigen 12 3. Windows 8 3.1 Allgemeines 16 3.2 Statische Anzeigen 16 3.3 Interaktive Anzeigen 16 2
1. ios ipad 1.1. Allgemeines Die ipad-apps im SPIEGEL-QC Portfolio ermöglichen es, den wöchentlichen das monatliche manager magazin und den monatlichen Harvard Business Manager in digitaler Form auf dem ipad zu lesen. Dazu können innerhalb der App für den jeweiligen Titel sowohl die aktuelle, als auch zurückliegende Ausgaben heruntergeladen werden. Wenn eine Heft-Ausgabe einmal auf das ipad des Nutzers heruntergeladen ist, bleibt sie unverändert auf dem ipad und wird nicht mehr aktualisiert. Es gibt drei verschiedene Formen der Werbung in den ipad-apps: - Statische Anzeigen - Statische Anzeigen mit Video - Interaktive Anzeigen Für jede gewählte Werbeform muss jeweils eine Variante im Hoch- und Querformat angeliefert werden. Beim Drehen des ipads wird automatisch das jeweils korrekte Anzeigeformat angezeigt. Da es auf dem ipad keinen Flash-Player gibt ist darauf zu achten, dass bei Verlinkungen die Zielseite keine Flash-Elemente enthält, die zwingend zur Nutzung der Zielseite erforderlich sind. Da Ausgaben (analog zu Printheften) auch zu einem späteren Zeitpunkt als ihrem Erscheinen noch heruntergeladen bzw. gelesen werden können, sollten Ziel-URLs mindestens 6 Monate lang erreichbar bzw. Clickcommands entsprechend lange haltbar sein. Wichtig: Die Anlieferung muss mindestens 9 Werktage vor Erscheinen erfolgen! ipad-anzeigen sind aufgrund ihrer Heftgebundenheit konzeptionell eher wie Print- Anzeigen zu sehen, und nicht wie Online-Anzeigen. Dies bedeutet, dass eine verspätete Anlieferung gegebenenfalls dazu führen kann, dass die Anzeige nicht in der gebuchten Ausgabe erscheint. Im Folgenden werden die einzelnen Werbeformen inklusive ihrer technischen Spezifikationen beschrieben. 1.2. Statische Anzeigen Allgemeines Bei statischen Anzeigen handelt es sich um Anzeigen, die aus einem statischen Bild bestehen, welches gegebenenfalls verlinkt werden kann. Als Besonderheit dabei ist zu sehen, dass unterschiedliche Bereiche des Bildes unterschiedliche Ziel-URLs bekommen können. Realisiert wird dies mittels einer HTML-Imagemap, deren "area"-elemente jeweils die linke obere Ecke und die rechte untere Ecke eines Rechtecks beschreiben, hinter welches der gewünschte Link gelegt wird. Es sind nur rechteckige Bereiche möglich. 1
ios - ipad Formate Hochformat:768 x 960 Pixel Querformat:1024 x 704 Pixel Dateiformat: JPG Maximale Dateigröße: 200 KB pro Bild Die Imagemap bekommen wir entweder als HTML-Datei oder als Freitext (bitte klar kennzeichnen, welche URL zu welchem Bereich gehört). Wenn wir nur eine URL erhalten, verlinken wir das Bild vollflächig. Die URLs können Clickcommands sein. Eine Integration von Zählpixeln ist allerdings nicht möglich! Ein Beispiel für eine entsprechende HTML-Datei im Querformat finden Sie hier die fett markierten Einträge sind anzupassen. Bitte beachten Sie auch, dass wir für beide Formate eine separate HTML-Datei benötigen: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>anzeige</title> </head> <body> <img src="sp-2010-25-00-t-1024x704-kunde.jpg" alt="querformat" width="1024" height="704" border="0" usemap="#imagemap" /> <map name="imagemap" id="imagemap"> <area shape="rect" coords="346,524,1004,656" href="http://www.kunde.de" alt="home" /> <area shape="rect" coords="50,550,272,655" href="http://www.kunde.de/sub" alt="sub" /> </map> </body> </html> Anlieferung (mindestens 9 Werktage vor Erscheinen) Folgendes benötigen wir bei der Anlieferung: - jeweils ein Bild im Hoch- und Querformat - jeweils eine HTML-Datei im Hoch- und Querformat oder alternativ eine Ziel- URL bei ganzflächiger Verlinkung bzw. die beiden(!) Imagemaps als Freitext 2
ios - ipad 1.3. Statische Anzeigen mit Video Allgemeines Bei statischen Anzeigen mit Video handelt es sich um statische Anzeigen, bei denen zusätzlich ein Video abgespielt werden kann, sofern der User online ist (anderenfalls bekommt er einen Hinweis). Zum Abspielen des Videos wird von der ipad-app ein Play-Button in das statische Bild integriert (siehe Bild 1). Beim Drücken des Play-Buttons wird das Video im Vollbild-Modus abgespielt (Bild 2). Bild 1 Bild 2 Der User hat die Möglichkeit, den Vollbildmodus zu verlassen, während das Video abspielt. Das Video wird dann in einer vorher mittels Imagemap festgelegten Größe und Position über der Anzeige dargestellt (Bild 3). Der Play-Button sitzt dabei immer in der Mitte dieser definierten Fläche (vergleiche Bild 4 und Bild 1). Nachdem das Video abgespielt wurde, kehrt die App wieder zum Zustand wie auf Bild 1 zurück. 3
ios - ipad Bild 3 Bild 4 Wie aus Bild 4 ersichtlich ist, definiert die anzugebende Fläche für das Video, wo der Play-Button sitzt. Daraus ergibt sich, dass bestimmte Positionen des Play-Buttons auch die mögliche Größe und Position des Videobereichs einschränken. Ein Beispiel zur Verdeutlichung: Wenn der Play-Button z.b. unten links angesiedelt sein soll, dann würde das Video ebenfalls in der linken unteren Ecke sitzen, und aufgrund des Bildschirmrahmens in seiner Größe beschränkt sein (Bild 5): 4
ios - ipad Bild 5 Bei der Gestaltung des Anzeigenmotivs bzw. bei der Definition der Videofläche sollte dies beachtet werden. Unabhängig von Position und Größe der definierten Videofläche wird das Video aber grundsätzlich im Vollbildmodus abgespielt, der nur auf User-Aktion bzw. am Ende des Videos wieder verlassen wird. Formate Hochformat:768 x 960 Pixel Querformat:1024 x 704 Pixel Dateiformat: JPG Maximale Dateigröße: 200 KB pro Bild Video: Das Video kann entweder an uns geschickt werden (Spotmaterial in hoher Qualität - vorzugsweise Windows Media oder mp4-16:9 mit 1024x576px bzw. 4:30 mit 1024x768 oder größer, 24-25 Frames/Sekunde, 4Mbit Encodingrate, Stereo Sound 44KHz Sampling), oder wir bekommen eine URL zu dem Video, auf die dann verwiesen wird. Die Imagemap bekommen wir entweder als HTML-Datei oder als Freitext (bitte klar kennzeichnen, welche URL zu welchem Bereich gehört). Wenn wir nur eine URL erhalten, verlinken wir das Bild vollflächig. Das Video selbst kann nicht verlinkt werden. Die URLs können Clickcommands sein. Eine Integration von Zählpixeln ist allerdings nicht möglich! 5
ios - ipad Ein Beispiel für eine entsprechende HTML-Datei im Querformat finden Sie hier die fett markierten Einträge sind anzupassen. Bitte beachten Sie, dass die Fläche für das Video durch ein alt-attribut mit dem Wert Video gekennzeichnet sein muss, und dass wir für beide Formate eine separate HTML-Datei benötigen: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>anzeige</title> </head> <body> <img src="sp-2010-25-00-t-1024x704-kunde.jpg" alt="querformat" width="1024" height="704" border="0" usemap="#imagemap" /> <map name="imagemap" id="imagemap"> <area shape="rect" coords="346,524,1004,656" href="http://www.kunde.de" alt="home" /> <area shape="rect" coords="24,280,744,685" href="http://adserv.qualitychannel.de/images/flashvideos/1077413_960x540_h264_1400.mp4" alt="video" target="_blank"/> <area shape="rect" coords="50,550,272,655" href="http://www.kunde.de/sub" alt="sub" /> </map> </body> </html> Anlieferung (mindestens 9 Werktage vor Erscheinen) Folgendes benötigen wir bei der Anlieferung: - jeweils ein Bild im Hoch- und Querformat - ein Video - jeweils eine HTML-Datei im Hoch- und Querformat oder alternativ eine Ziel-URL bei ganzflächiger Verlinkung bzw. die beiden(!) Imagemaps als Freitext 1.4. Interaktive Anzeigen Allgemeines Interaktive Anzeigen bieten weitreichende Möglichkeiten zur Integration von Video und Sound, sowie für Animationen und Interaktionen mit dem User. Erreicht wird dies dadurch, dass es sich bei einer interaktiven Anzeige um eine HTML-Seite handelt, die alle Möglichkeiten, die HTML5 auf dem ipad im Mobile Safari zur Verfügung stellt, nutzen kann. Diese HTML-Seite wird dann beim Blättern auf die Anzeigenseite in der App geladen und dargestellt. Konkret bedeutet dies, dass praktisch alles, was sich im Mobile Safari darstellen lässt, auch in einer Anzeige Verwendung finden kann. Alle Elemente der Anzeige werden komplett auf das ipad mit dem Heft zusammen runtergeladen, so dass die Anzeige auch komplett funktioniert, wenn der User offline ist. 6
ios - ipad Zusätzlich zu der interaktiven HTML-Seite gibt es noch sogenannte Default- und Transition-Bilder. Die Default-Bilder werden Usern angezeigt, die noch eine ältere Version der App haben, die nicht alle interaktiven Features unterstützt. Darüber hinaus werden sie beim Blättern durch die Heftnavigation zur Darstellung einer Anzeigen-Vorschau verwendet. Transition-Bilder werden dem Nutzer gezeigt, während im Hintergrund die HTML- Anzeige geladen und aufgebaut wird. Sobald der Aufbau abgeschlossen ist, wechselt die Darstellung dann zu der HTML-Anzeige. Sollten die Motive der Transition-Bilder und des ersten Bildes des interaktiven Motivs gleich sein, ist es sinnvoll, dass die Anordnung aller Elemente pixelgenau übereinstimmt, da es sonst deutliche Sprünge im Motiv gibt, wenn die Anzeige von Transition auf Interaktiv wechselt. Die oben beschriebenen drei Elemente (interaktive HTML-Seite, Default-Bilder, Transition-Bilder) müssen innerhalb eines Containers angeliefert werden, der den in Bild 6 gezeigten Aufbau hat: Bild 12 Die Unterordner defaults und transition beinhalten dabei die bereits beschriebenen Bilddateien jeweils im Quer- und Hochformat. Der Unterordner ad muss zwingend zwei index-dateien haben eine für das Querformat (index_landscape.html), und eine für das Hochformat (index_portrait.html). Die genannten Dateien in den drei Unterordnern müssen so wie in Bild 6 benannt sein. Darüber hinaus können in dem Unterordner ad noch beliebige weitere Dateien oder Unterordner, die Teil der HTML-Seite sind (z.b. Bilder, Sounds, Videos, CSS- oder JavaScript-Dateien), angelegt werden. Der Einsatz von CSS und JavaScript ist problemlos möglich; ebenso der Einsatz von JavaScript-Bibliotheken und - Frameworks wie z.b. jquery. Generell gilt die Faustregel: Wenn es im Mobile Safari auf einem ipad läuft, dann läuft es mit sehr hoher Wahrscheinlichkeit auch in der ipad-app als Anzeige. 7
ios - ipad Unter http://adserv.quality-channel.de/images/example-container.zip gibt es einen Beispiel-Container zum Herunterladen. Der HTML-Container kann zudem noch die Datei ad_config.plist erhalten, die das Nutzen einiger ipad-funktionalitäten ermöglicht. So kann die App der Anzeige folgendes mitteilen: - das ipad wurde geschüttelt - die Veränderung des Neigungswinkels - die geographische Ausrichtung (Kompass) - ein Drehen des ipads wird ignoriert, d.h. die Darstellung der Anzeige wird beim Drehen des ipads nicht in das jeweils andere Format gewechselt (diese Funktionalität darf nicht auf der Umschlagseite/ Opening Page verwendet werden!). Wenn diese Datei nicht mit angeliefert wird, wird die Anzeige über keinen der oben genannten Punkte informiert. Mehr zum genauen Inhalt und der Verwendung von ad_config.plist findet sich unter dem Punkt Sonstiges weiter unten. Wichtig: Bei allen interaktiven Anzeigen muss gewährleistet sein, dass der User auch mittels Wischen zur nächsten Heftseite gelangen kann, d.h. eine W ischfunktion innerhalb der Anzeige muss gegebenenfalls erst durch einen Button o.ä. in der Anzeige aktiviert werden. Formate Hochformat:768 x 960 Pixel Querformat:1024 x 704 Pixel Maximale Dateigröße (inkl. Defaults- und Transition-Bildern): 5 MB Default- und Transition-Bilder: - Dateiformat: JPG - Maximale Dateigröße: 200 KB pro Bild Anlieferung (mindestens 9 Werktage vor Erscheinen) Folgendes benötigen wir bei der Anlieferung: - den HTML-Container wie oben beschrieben, inkl. aller zur Darstellung der Anzeige nötigen Dateien, sowie der Default- und Transition-Bilder (jeweils Hoch- und Querformat). - Wenn Sie Clickcommands verwenden möchten, integrieren Sie diese bitte vor der Zusendung an uns in Ihre Anzeige. 8
ios - ipad Sonstiges Metatags Um eine korrekte Darstellung der Anzeige zu gewährleisten, sollte folgender Metatag im Kopf der beiden index-dateien enthalten sein: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> ad_config.plist Die Datei ad_config.plist hat den unten stehenden Inhalt. Wird sie nicht mit angeliefert, werden alle unten aufgeführten Flags mit "false" angenommen. Beispiel: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/dtds/propertylist-1.0.dtd"> <plist <dict> </dict> </plist> <key>notify_shake</key> <true/> <key>update_accelerometer</key> <false/> <key>update_teslameter</key> <false/> <key>prevent_autorotation</key> <false/> version="1.0"> Um eine der oben genannten ipad-funktionalitäten für die Anzeige zu aktivieren, muss der entsprechende Key auf den Wert true gesetzt werden. Im Falle des obigen Beispiels ist nur die Funktion notify_shake (das ipad wurde geschüttelt) aktiviert. Wenn eine der oben genannten Funktionalitäten aktiviert wurde, ruft sie die folgende JavaScript-Funktion auf, die dann im JavaScript-Code der Anzeige mit der gewünschten Aktion versehen werden muss: ipad wurde geschüttelt: passshakeevent() Veränderung des Neigungswinkels: passacceleration(x,y,z) Kompass: passheading(magneticheading, trueheading) Unterdrücken der Rotation: keine Rückmeldung Die ipad-app teilt der Werbung die Neigung 30mal pro Sekunde mit, Kompassänderungen werden übergeben, wann immer das ipad eine Veränderung feststellt. Bei passacceleration(x,y,z) werden die drei Neigungsrichtungen übergeben; bei passheading(magneticheading, trueheading) entsprechend die Kompassausrichtung. 9
ios - iphone JPEG-Pixelanzahl Bitte beachten Sie, dass das ipad alle JPEGs mit mehr als 2.000.000 Pixeln skaliert. Breite und Höhe werden dabei durch die kleinste Zweierpotenz dividiert, die notwendig ist, um die Pixelzahl unter 2.000.000 zu drücken. (Siehe: http://developer.apple.com/library/safari/#documentation/appleapplications/referenc e/safariwebcontent/creatingcontentforsafarioniphone/creatingcontentforsafarioni Phone.html) 1.5. Tracking Die Frage nach den Trackingmöglichkeiten wird naturgemäß häufig gestellt, daher hier ein paar generelle Worte dazu. Der Einsatz von Clickcommands oder Redirects zum Mittracken der Clicks ist bei allen genannten Werbeformen ausser dem Download Ad möglich; allerdings dürfen diese Clickcommands/Redirects keinerlei dynamisch zu ersetzenden Zufallszahl/Zeitstempel enthalten. Was leider aus technischen Gründen nicht geht, ist das Mittracken der Werbeaufrufe, d.h. Zählpixel oder ähnliches können nicht eingesetzt werden. Ungeachtet der technischen Möglichkeiten würde es aber auch wenig Sinn machen, die Werbeaufrufe mitzutracken, da der User nicht zwangsläufig online sein muss, wenn er eine ipad-app aus dem SPIEGEL-QC Portfolio nutzt. Anders ausgedrückt: Die Werbeaufrufe, die der User macht, während er offline ist, würden nicht mitgetrackt werden, so dass die tatsächliche resultierende Summe der Aufrufe schlichtweg keinerlei Aussagekraft hätte, weil eben nur solche User mit in die Zählung einfließen würden, die zum Zeitpunkt des Aufrufs der Werbung auch online waren. 10
Web-Reader 2. Web-Reader 2.1. Allgemeines Der Web-Reader für die digitalen Ausgaben von manager magazin und Harvard Business Manager ermöglicht es, die jeweilige Publikation in digitaler Form auf einem Tablet, Laptop oder PC/Mac zu lesen. Für eine Anzeige muss jeweils eine Variante im Hoch- und Querformat angeliefert werden. Da Ausgaben (analog zu Printheften) auch zu einem späteren Zeitpunkt als ihrem Erscheinen noch heruntergeladen bzw. gelesen werden können, sollten Ziel-URLs mindestens 6 Monate lang erreichbar bzw. Clickcommands entsprechend lange haltbar sein. Der Einsatz von Clickcommands oder Redirects zum Mittracken der Clicks ist möglich; allerdings ist zu beachten, dass diese keinerlei dynamisch zu ersetzende Inhalte wie z.b. Zeitstempel enthalten dürfen. Was leider aus technischen Gründen nicht geht, ist das Mittracken der Werbeaufrufe, d.h. Zählpixel oder ähnliches können nicht eingesetzt werden. Wichtig: Die Anlieferung muss mindestens 12 Werktage vor Erscheinen erfolgen! Die Anzeigen sind aufgrund ihrer Heftgebundenheit konzeptionell eher wie Print-Anzeigen zu sehen, und nicht wie Online-Anzeigen. Dies bedeutet, dass eine verspätete Anlieferung gegebenenfalls dazu führen kann, dass die Anzeige nicht in der gebuchten Ausgabe erscheint. 2.2. Statische Anzeigen Allgemeines Bei statischen Anzeigen für den Web-Reader handelt es sich um Anzeigen, die aus einem Bild bestehen, welches gegebenenfalls verlinkt werden kann. Als Besonderheit dabei ist zu sehen, dass unterschiedliche Bereiche des Bildes unterschiedliche Ziel-URLs bekommen können. Realisiert wird dies mittels einer HTML-Imagemap, deren "area"-elemente jeweils die linke obere Ecke und die rechte untere Ecke eines Rechtecks beschreiben, hinter welches der gewünschte Link gelegt wird. Es sind nur rechteckige Bereiche möglich. Formate Hochformat:768 x 960 Pixel Querformat:1024 x 704 Pixel Dateiformat: JPG Maximale Dateigröße: 200 KB pro Bild Die Imagemap bekommen wir entweder als HTML-Datei oder als Freitext (bitte klar 11
Web-Reader kennzeichnen, welche URL zu welchem Bereich gehört). Wenn wir nur eine URL erhalten, verlinken wir das Bild vollflächig. Die URLs können Clickcommands sein. Eine Integration von Zählpixeln ist allerdings nicht möglich! Ein Beispiel für eine entsprechende HTML-Datei im Querformat finden Sie hier die fett markierten Einträge sind anzupassen. Bitte beachten Sie auch, dass wir für beide Formate eine separate HTML-Datei benötigen: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>anzeige</title> </head> <body> <img src="sp-2010-25-00-t-1024x704-kunde.jpg" alt="querformat" width="1024" height="704" border="0" usemap="#imagemap" /> <map name="imagemap" id="imagemap"> <area shape="rect" coords="346,524,1004,656" href="http://www.kunde.de" alt="external" /> <area shape="rect" coords="50,550,272,655" href="http://www.kunde.de/sub" alt="external" /> </map> </body> </html> Anlieferung (mindestens 12 Werktage vor Erscheinen) Folgendes benötigen wir bei der Anlieferung: - jeweils ein Bild im Hoch- und Querformat - jeweils eine HTML-Datei im Hoch- und Querformat oder alternativ eine Ziel-URL bei ganzflächiger Verlinkung bzw. die beiden(!) Imagemaps als Freitext 2.3. Interaktive Anzeigen Allgemeines Interaktive Anzeigen für den Web-Reader bestehen aus zwei Elementen: HTML- Content für die interaktive Anzeige, sowie einem statischen Fallback-Bild bei Offline- Nutzung des Heftes. Der WebReader stellt den HTML-Content der Anzeige in einer geschützten Umgebung innerhalb der Seite dar. Der HTML-Content wird dabei in einen Iframe geladen, damit es keine Konflikte zwischen dem externen JavaScript und der WebReader-App geben kann. Dennoch kann der Benutzer mit den ihm gebräuchlichen Gesten (Maus, Touch, Tastatur) weiter im Heft navigieren, auch wenn der Browserfokus auf dem Iframe-Inhalt liegt. Hierzu muss mittels JavaScript das sogenannte Remote-Kit in die Anzeige geladen werden. 12
Web-Reader Der HTML-Content steht nur zur Verfügung, wenn der Benutzer online ist und ist nie Teil einer heruntergeladenen Ausgabe. Wenn der Benutzer offline ist und in einem gespeicherten Heft liest, wird anstelle des HTML-Contents ein statisches Bild als Alternative gezeigt. Die oben beschriebenen zwei Elemente - interaktive HTML-Content und statische Fallback-Bilder - müssen innerhalb eines Containers angeliefert werden, der den in unten gezeigten Aufbau hat: Die Unterordner transition beinhaltet dabei die bereits beschriebenen Fallback- Bilddateien jeweils im Quer- und Hochformat. Der Unterordner ad muss zwingend zwei index-dateien haben eine für das Querformat (index_landscape.html), und eine für das Hochformat (index_portrait.html). Die genannten Dateien in den Unterordnern müssen so wie im Bild oben benannt sein. Darüber hinaus können in dem Unterordner ad noch beliebige weitere Dateien oder Unterordner, die Teil der HTML-Seite sind (z.b. Bilder, Videos, CSS- oder JavaScript-Dateien), angelegt werden. Der Einsatz von CSS und JavaScript ist problemlos möglich; ebenso der Einsatz von JavaScript-Bibliotheken und - Frameworks wie z.b. jquery. Format HTML-Content: flexibel Fallback: 1024x704 (Querformat), 768x960 (Hochformat) Bei einer Schaltung ausschließlich im Web-Reader beträgt die maximale Dateigröße 30 MB. Transition-Bilder: 13
Web-Reader Dateiformat: JPG Maximale Dateigröße: 200 KB pro Bild Programmierung Folgende Punkte sind bei der Erstellung der HTML-Seiten zu beachten: Einbettung des Remote-Kit: Als erstes Element im <body> der Seiten muss folgendes JavaScript integriert werden, damit das Remote-Kit des WebReaders geladen und benutzt wird: <script type="text/javascript" src="/reader/remote/remote.nocache.js"></script> Der Benutzer kann das Fenster frei skalieren, die Werbung sollte also flexibel die Breite und Höhe des zur Verfügung stehenden Platzes nutzen. Man kann aber von einer Mindestgröße von 758x356 Pixeln ausgehen. Die Seitenfarbe ist ein reines Weiß (#FFFFFF), wenn die Werbung also ebenfalls auf weiß steht, integriert sie sich am Besten in das Look & Feel des WebReaders. Der WebReader wird in allen modernen Browsern benutzt. Es ist daher erforderlich, dass die Anzeige mindestens in den folgenden Browsern fehlerfrei funktioniert: Safari, Chrome, Firefox, Opera, Internet Explorer (ab Version 7), MobileSafari auf ipad, WebKit auf Android. Das Remote-Kit bietet optional folgende Möglichkeiten: Werbung mit fester Größe auf der Seite zentrieren Hierzu kann man den Inhalt der Werbe-Seite mit einem <div> Element mit der id center umschließen. Beispiel: <div id="center" style="width: 800px; height: 500px; "> hier kommt der inhalt </div> Gesten für die Werbung nutzen Wenn in bestimmten Teilen der Werbung die Swipe-Geste genutzt werden soll, ohne dass der WebReader in den nächsten Artikel weiter blättert, kann die Interaktion mit dem WebReader blockiert werden. Hierzu setzt man auf den entsprechenden Elementen die CSS-Klasse blind. Interaktionen mit diesen Elementen werden vom WebReader dann nicht interpretiert. Neben blind kann man auch blindall verwenden, dann gilt die Sperre auch für alle Kinder des entsprechenden Elements. Beispiel: <div class="blindall"> In diesem Bereich kann nicht umgeblättert werden. Hier kann die Werbung tolle Interaktionen ausführen. </div> 14
Web-Reader Navigation in der Ausgabe Über einen JavaScript-Funktionsaufruf kann aus der Werbung ein Umblättern in den nächsten, bzw. vorigen Artikel ausgelöst werden.beispiele: <a href="#" onclick="spiegel.remote.previousarticle(); return false; ">klick</a> <a href="#" onclick="spiegel.remote.nextarticle(); return false; ">klick</a> Anlieferung (mindestens 12 Werktage vor Erscheinen) Folgendes benötigen wir bei der Anlieferung: - den HTML-Container wie oben beschrieben, inkl. aller zur Darstellung der Anzeige nötigen Dateien, sowie der Transition-Bilder (jeweils Hoch- und Querformat). Wenn Sie Clickcommands verwenden möchten, integrieren Sie diese bitte vor der Zusendung an uns in Ihre Anzeige. 15
Windows8 3. Windows 8 3.1. Allgemeines Der Web-Reader für die digitalen Ausgaben von manager magazin und Harvard Business Manager ermöglicht es, die jeweilige Publikation in digitaler Form auf einem Tablet, Laptop oder PC/Mac zu lesen. Für eine Anzeige muss jeweils eine Variante im Hoch- und Querformat angeliefert werden. Da Ausgaben (analog zu Printheften) auch zu einem späteren Zeitpunkt als ihrem Erscheinen noch heruntergeladen bzw. gelesen werden können, sollten Ziel-URLs mindestens 6 Monate lang erreichbar bzw. Clickcommands entsprechend lange haltbar sein. Der Einsatz von Clickcommands oder Redirects zum Mittracken der Clicks ist möglich; allerdings ist zu beachten, dass diese keinerlei dynamisch zu ersetzende Inhalte wie z.b. Zeitstempel enthalten dürfen. Was leider aus technischen Gründen nicht geht, ist das Mittracken der Werbeaufrufe, d.h. Zählpixel oder ähnliches können nicht eingesetzt werden. Wichtig: Die Anlieferung muss mindestens 12 Werktage vor Erscheinen erfolgen! Die Anzeigen sind aufgrund ihrer Heftgebundenheit konzeptionell eher wie Print-Anzeigen zu sehen, und nicht wie Online-Anzeigen. Dies bedeutet, dass eine verspätete Anlieferung gegebenenfalls dazu führen kann, dass die Anzeige nicht in der gebuchten Ausgabe erscheint. 3.2. Statische Anzeigen Allgemeines Bei statischen Anzeigen für den Web-Reader handelt es sich um Anzeigen, die aus einem Bild bestehen, welches gegebenenfalls verlinkt werden kann. Als Besonderheit dabei ist zu sehen, dass unterschiedliche Bereiche des Bildes unterschiedliche Ziel-URLs bekommen können. Realisiert wird dies mittels einer HTML-Imagemap, deren "area"-elemente jeweils die linke obere Ecke und die rechte untere Ecke eines Rechtecks beschreiben, hinter welches der gewünschte Link gelegt wird. Es sind nur rechteckige Bereiche möglich. Formate Hochformat:768 x 960 Pixel Querformat:1024 x 704 Pixel Dateiformat: JPG Maximale Dateigröße: 200 KB pro Bild Die Imagemap bekommen wir entweder als HTML-Datei oder als Freitext (bitte klar kennzeichnen, welche URL zu welchem Bereich gehört). Wenn wir nur eine URL erhalten, verlinken wir das Bild vollflächig. 16
Windows8 Die URLs können Clickcommands sein. Eine Integration von Zählpixeln ist allerdings nicht möglich! Ein Beispiel für eine entsprechende HTML-Datei im Querformat finden Sie hier die fett markierten Einträge sind anzupassen. Bitte beachten Sie auch, dass wir für beide Formate eine separate HTML-Datei benötigen: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>anzeige</title> </head> <body> <img src="sp-2010-25-00-t-1024x704-kunde.jpg" alt="querformat" width="1024" height="704" border="0" usemap="#imagemap" /> <map name="imagemap" id="imagemap"> <area shape="rect" coords="346,524,1004,656" href="http://www.kunde.de" alt="external" /> <area shape="rect" coords="50,550,272,655" href="http://www.kunde.de/sub" alt="external" /> </map> </body> </html> Anlieferung (mindestens 12 Werktage vor Erscheinen) Folgendes benötigen wir bei der Anlieferung: - jeweils ein Bild im Hoch- und Querformat - jeweils eine HTML-Datei im Hoch- und Querformat oder alternativ eine Ziel-URL bei ganzflächiger Verlinkung bzw. die beiden(!) Imagemaps als Freitext 5.3. Interaktive Anzeigen Allgemeines Interaktive Anzeigen für den Web-Reader bestehen aus zwei Elementen: HTML- Content für die interaktive Anzeige, sowie einem statischen Fallback-Bild bei Offline- Nutzung des Heftes. Der WebReader stellt den HTML-Content der Anzeige in einer geschützten Umgebung innerhalb der Seite dar. Der HTML-Content wird dabei in einen Iframe geladen, damit es keine Konflikte zwischen dem externen JavaScript und der WebReader-App geben kann. Dennoch kann der Benutzer mit den ihm gebräuchlichen Gesten (Maus, Touch, Tastatur) weiter im Heft navigieren, auch wenn der Browserfokus auf dem Iframe-Inhalt liegt. Hierzu muss mittels JavaScript das sogenannte Remote-Kit in die Anzeige geladen werden. Der HTML-Content steht nur zur Verfügung, wenn der Benutzer online ist und ist nie Teil einer heruntergeladenen Ausgabe. Wenn der Benutzer offline ist und in einem 17
Windows8 gespeicherten Heft liest, wird anstelle des HTML-Contents ein statisches Bild als Alternative gezeigt. Die oben beschriebenen zwei Elemente - interaktive HTML-Content und statische Fallback-Bilder - müssen innerhalb eines Containers angeliefert werden, der den in unten gezeigten Aufbau hat: Die Unterordner transition beinhaltet dabei die bereits beschriebenen Fallback- Bilddateien jeweils im Quer- und Hochformat. Der Unterordner ad muss zwingend zwei index-dateien haben eine für das Querformat (index_landscape.html), und eine für das Hochformat (index_portrait.html). Die genannten Dateien in den Unterordnern müssen so wie im Bild oben benannt sein. Darüber hinaus können in dem Unterordner ad noch beliebige weitere Dateien oder Unterordner, die Teil der HTML-Seite sind (z.b. Bilder, Videos, CSS- oder JavaScript-Dateien), angelegt werden. Der Einsatz von CSS und JavaScript ist problemlos möglich; ebenso der Einsatz von JavaScript-Bibliotheken und - Frameworks wie z.b. jquery. Format HTML-Content: flexibel Fallback: 1024x704 (Querformat), 768x960 (Hochformat) Bei einer Schaltung ausschließlich im Web-Reader beträgt die maximale Dateigröße 30 MB. 18
Windows8 Transition-Bilder: Dateiformat: JPG Maximale Dateigröße: 200 KB pro Bild Programmierung Folgende Punkte sind bei der Erstellung der HTML-Seiten zu beachten: Einbettung des Remote-Kit: Als erstes Element im <body> der Seiten muss folgendes JavaScript integriert werden, damit das Remote-Kit des WebReaders geladen und benutzt wird: <script type="text/javascript" src="/reader/remote/remote.nocache.js"></script> Der Benutzer kann das Fenster frei skalieren, die Werbung sollte also flexibel die Breite und Höhe des zur Verfügung stehenden Platzes nutzen. Man kann aber von einer Mindestgröße von 758x356 Pixeln ausgehen. Die Seitenfarbe ist ein reines Weiß (#FFFFFF), wenn die Werbung also ebenfalls auf weiß steht, integriert sie sich am Besten in das Look & Feel des WebReaders. Der WebReader wird in allen modernen Browsern benutzt. Es ist daher erforderlich, dass die Anzeige mindestens in den folgenden Browsern fehlerfrei funktioniert: Safari, Chrome, Firefox, Opera, Internet Explorer (ab Version 7), MobileSafari auf ipad, WebKit auf Android. Das Remote-Kit bietet optional folgende Möglichkeiten: Werbung mit fester Größe auf der Seite zentrieren Hierzu kann man den Inhalt der Werbe-Seite mit einem <div> Element mit der id center umschließen. Beispiel: <div id="center" style="width: 800px; height: 500px; "> hier kommt der inhalt </div> Gesten für die Werbung nutzen Wenn in bestimmten Teilen der Werbung die Swipe-Geste genutzt werden soll, ohne dass der WebReader in den nächsten Artikel weiter blättert, kann die Interaktion mit dem WebReader blockiert werden. Hierzu setzt man auf den entsprechenden Elementen die CSS-Klasse blind. Interaktionen mit diesen Elementen werden vom WebReader dann nicht interpretiert. Neben blind kann man auch blindall verwenden, dann gilt die Sperre auch für alle Kinder des entsprechenden Elements. 19
Windows8 Beispiel: <div class="blindall"> In diesem Bereich kann nicht umgeblättert werden. Hier kann die Werbung tolle Interaktionen ausführen. </div> Navigation in der Ausgabe Über einen JavaScript-Funktionsaufruf kann aus der Werbung ein Umblättern in den nächsten, bzw. vorigen Artikel ausgelöst werden.beispiele: <a href="#" onclick="spiegel.remote.previousarticle(); return false; ">klick</a> <a href="#" onclick="spiegel.remote.nextarticle(); return false; ">klick</a> Anlieferung (mindestens 12 Werktage vor Erscheinen) Folgendes benötigen wir bei der Anlieferung: - den HTML-Container wie oben beschrieben, inkl. aller zur Darstellung der Anzeige nötigen Dateien, sowie der Transition-Bilder (jeweils Hoch- und Querformat). Wenn Sie Clickcommands verwenden möchten, integrieren Sie diese bitte vor der Zusendung an uns in Ihre Anzeige. 20