Widget. Integrationshandbuch

Transkript

1 Widget Integrationshandbuch HTML5-Widget Version Gütersloh, Seite 1 von 40

2 Inhalt 1 Einleitung. 4 2 Nutzung und Nutzungsbedingungen HTML5-Widget Einfache Integration Die verschiedenen Darstellungen im Überblick PDF-Anzeige für Printtitel epub Anzeige für E-Books Audioausgabe (Hörprobe) Videoausgabe (Trailer) Veränderung der Darstellung Widget Standardansicht Menüauswahl Aktionen Menüauswahl Soziale Netzwerke In Facebook teilen Weiterempfehlen Menüauswahl Einstellungen Doppelseiten-Modus Die Integration im Detail - FAQ Die Menüleiste beim Aufruf automatisch einblenden Die Hintergrundfarbe ändern Die Breite/Höhe ändern Primär- und Sekundärnavigation Default/empfohlene Einstellungen (Aufruf nur mit ISBN) Das Widget Aussehen anpassen IconSets Die doppelseitige/einseitige Anzeige einschalten Einen Shop direkt verlinken Den Einkaufswagen ausblenden Eine sichere Verbindung (SSL) verwenden Den Klick-Teaser ausblenden Die Widgetsprache umstellen Die Darstellung der Menüpunkte beeinflussen Alle Konfigurationsparameter auf einen Blick 24 5 Die Implementierung in der Praxis. 28 Seite 2 von 40

3 5.1 Prüfung, ob ein Titel im BIC media Repository vorhanden ist Prüfung einer einzelnen ISBN mit der Funktion isinrepository.do Verfügbare Inhalte mit der Funktion availablemedia.do abfragen Implementierungsbeispiele Darstellung einer statischen Leseprobe im Tabreiter eines Browsers Beispielimplementierung Darstellung eines kleinen Widgets plus Pop-up-Widget Einfache Beispielimplementierung Beispielimplementierung mit der Abfrage der Verfügbarkeit sowie Timeout Darstellung Cover mit Pop-up-Widget Beispielimplementierung Leseprobe in einer Webseite integriert ohne Rahmen und Buttons Beispielimplementierung Audioplayer in eine Webseite integriert ohne Rahmen und Buttons Beispielimplementierung.. 40 Seite 3 von 40

4 1 Einleitung In diesem Handbuch wird die Integration des BIC media HTML5-Widgets in eine Webseite beschrieben. Das HTML5-Widget entspricht den aktuellen Bedürfnissen des Marktes und kann unter allen HTML5 fähigen Internetbrowsern wie z. B: IE10, Chrome oder Firefox angezeigt und genutzt werden. Darüber hinaus ist das BIC media HTML5-Widget sowohl auf mobilen ios als auch auf Android sowie mobilen Windows Geräten einsetzbar. Teil dieses Handbuchs ist ein FAQ-Bereich, in dem häufig auftretende Fragen zur Integration und deren Lösung beschrieben werden. 2 Nutzung und Nutzungsbedingungen Um das Widget nutzen zu können, müssen Sie zunächst die Nutzungsbedingungen akzeptieren. Die Vertragsbedingungen werden angenommen, indem dies ausdrücklich gegenüber arvato media erklärt wird, oder indem die Services tatsächlich genutzt werden, d.h. beispielsweise das Widget durch Integration des im Widget enthaltenen Links in den Quelltext einer Webseite oder die direkte oder indirekte Verlinkung auf das Widget oder dessen anderweitig hergestellte Abrufbarkeit. In diesen Fällen nimmt arvato media ab der Nutzung der Services die Anerkennung der Vertragsbedingungen an. Die vollständigen Nutzungsbedingungen finden Sie in einem gesonderten Dokument bzw. auch im Widget unter dem Punkt Zu meiner Webseite hinzufügen. Seite 4 von 40

5 3 HTML5-Widget Mit dem HTML5-Widget können die im BIC media System gespeicherten und aktivierten Inhalte (PDF, epub, Audio und Video) angezeigt werden. Sie benötigen hierfür lediglich die ISBN-Nummer des Inhalts. Ohne weitere Konfiguration präsentiert sich das Widget auf einer Homepage dann wie folgt: Menüleiste Abbildung 1: Startseite Alternativ können Sie das Widget in der aus vielen Shops bekannten Blick ins Buch Ansicht aufrufen. Dafür müssen Sie den Parameter clickteaser=yes setzten. Abbildung 2: Widget in der Blick ins Buch Ansicht Seite 5 von 40

6 3.1 Einfache Integration Die einfachste Möglichkeit zur Einbindung des Widgets in eine Website ist das Einbinden des erforderlichen Quellcodes in den HTML-Code einer Webseite: <script type='text/javascript' src=' <script type='text/javascript'> try { new DMRWidgetHTML5(' '); }catch (e) {} </script> Nachdem Sie das Widget in einer Webseite eingebunden und konfiguriert haben und eventuell den gleichen Quelltext auf einer anderen Seite einbinden möchten, können Sie den Quellcode direkt aus dem Widget kopieren und in den HTML Code der Webseite einbinden. Dazu wählen Sie in der Menüleiste den Menüpunkt Einstellungen aus und klicken dann auf den Button Zu meiner Webseite hinzufügen. Es öffnet sich ein Auswahlfenster, in dem der relevante Quelltext dargestellt wird. Bitte kopieren Sie den Quelltext in die Zwischenablage und fügen ihn anschließend in den HTML Code der gewünschten Webseite ein. Abbildung 3: Widget Anbindung Menüpunkt Einstellungen Zu meiner Webseite hinzufügen <script type='text/javascript' src=' <script type='text/javascript'> try { new DMRWidgetHTML5(' '); }catch (e) {} </script> Beschreibung Menüpunkt: Einstellungen Auswahl: Zu meiner Webseite hinzufügen HTML-Code der in eine Webseite eingefügt werden kann Seite 6 von 40

7 3.2 Die verschiedenen Darstellungen im Überblick PDF-Anzeige für Printtitel Die PDF-Anzeige wird üblicherweise für die Darstellung von Print-Büchern verwendet. Sie hat ein fixed layout, mit den seitlichen Pfeiltasten kann in der Leseprobe vor und zurück geblättert werden. Die Darstellung kann mit dem Mausrad vergrößert werden. Mit dem Menüleisten-Symbol wird die Navigationsleiste angezeigt, die Ihnen weitere Funktionen zur Verfügung stellt epub Anzeige für E-Books Die epub-anzeige eignet sich besonders gut für die Darstellung von E-Books. Im Gegensatz zur PDF- Anzeige kann hier die Schriftgröße und der Schriftstil angepasst werden. Diese Anzeige ist immer einseitig. Mit den seitlichen Pfeiltasten können die einzelnen Kapitel aufgerufen werden. Innerhalb eines Kapitels wird der Inhalt von oben nach unten gescrollt. Seite 7 von 40

8 3.2.3 Audioausgabe (Hörprobe) In dem Widget ist ein Audioplayer integriert, mit dem vorhandene Hörproben (.mp3) abgespielt werden können Videoausgabe (Trailer) Für Leseproben/Hörproben können YouTube-Links für Videotrailer hinterlegt und im YouTube- Mediaplayer abgespielt werden. Seite 8 von 40

9 3.3 Veränderung der Darstellung Das Aussehen und Verhalten des Widgets ist vielseitig konfigurierbar. Die Konfigurationsparameter werden im JavaScript-Quellcode übergeben: new DMRWidgetHTML5 (' ','<Konfigurationsparameter>'); Im Folgenden werden die wichtigsten Einstellungen dargestellt und erläutert: Widget Standardansicht Die unten abgebildete Ansicht des Widgets entspricht der Minimalkonfiguration des Widgets. Dabei werden die wichtigsten Menüpunkte angezeigt. Je nachdem ob PDF oder epub Leseprobe, Audio bzw. Videodatei zu diesem Titel aufgeladen wurden, erscheinen auch die entsprechenden Menüpunkte in der Auswahlleiste. Leseprobe Audio Audio Video Aktionen Warenkorb Soziale Netzwerke Einstellungen Fullscreen Abbildung 4: Widget Standardansicht Seite 9 von 40

10 Funktionsbeschreibung der Buttons auf der Navigationsleiste Bezeichnung Parameter Werte Beschreibung Leseprobe book yes/no Aktiviert/deaktiviert die Anzeige der PDF-Leseprobe epub Leseprobe ebook yes/no Aktiviert/deaktiviert die Anzeige der epub-leseprobe Audio audio yes/no Aktiviert/deaktiviert die Hörprobe Video video yes/no Aktiviert/deaktiviert die Videoanzeige wenn im Onix übergeben Aktionen Menüpunkt: Aktionen Warenkorb buybutton yes/no Aktiviert/deaktiviert die Anzeige des Einkaufswagens Soziale Netzwerke Menüpunkt: Soziale Netzwerke Einstellungen Menüpunkt: Einstellungen Fullscreen Ansicht showfullscreenbutton yes/no Aktiviert/deaktiviert die Anzeige der Fullscreen-Ansicht Seite 10 von 40

11 3.3.2 Menüauswahl Aktionen Abbildung 5: Aktionen Abbildung 6: Über den Inhalt Abbildung 7: Seitenübersicht Bezeichnung Parameter Werte Beschreibung Über den Inhalt Zeigt den Inhalt der Onix Datei an (siehe Abbildung 6) Cover Zeigt das Cover an Seitenübersicht Zeigt die Seitenübersicht an (siehe Abbildung 7) Buch durchsuchen search yes/no Aktiviert/deaktiviert den Dialog Buch durchsuchen Einkaufswagen buybutton yes/no Aktiviert/deaktiviert die Anzeige des Einkaufswagen Link-Button links yes/no Zeigt den Button Links-Icon an wenn entsprechende Links im Backend definiert sind Seite 11 von 40

12 3.3.3 Menüauswahl Soziale Netzwerke Abbildung 8: Soziale Netzwerke Bezeichnung Parameter Werte Beschreibung In Facebook teilen showextrafacebookbutton yes/no Keine Funktion Weiterempfehlen showtafbutton yes/no Verschiebt den Button zur Weiterempfehlung aus der Sekundärnavigation in die Primärnavigation Seite 12 von 40

13 3.3.4 In Facebook teilen Der Button In Facebook teilen erzeugt in Facebook nachfolgenden Dialog, der es dem Anwender ermöglicht, den Titel inkl. Widget-Link in der eigenen Chronik zu veröffentlichen. Abbildung 9: In Facebook teilen Für und sind vergleichbare Funktionen im Menü soziale Netzwerke verfügbar Weiterempfehlen Dieser Menüpunkt erzeugt eine Mail inkl. Widget-Link, die an einen beliebigen Empfänger als Empfehlung verschickt werden kann. Abbildung 10: Weiterempfehlen Seite 13 von 40

14 3.3.6 Menüauswahl Einstellungen Abbildung 11: Einstellungen Bezeichnung Parameter Werte Beschreibung Zu meiner Website hinzufügen Informationen zu BIC media showlanguagebutton <yes no> Aktiviert/deaktiviert die Anzeige der Sprachumschaltung Zeigt den Quelltext für die Anbindung in eine Homepage an Zeigt Informationen zu BIC media an Die Einbindung des in Abbildung 11 dargestellten Widgets sieht wie folgt aus: <script src=" <script> try { new DMRWidgetHTML5( ' ', 'width=195,bgcolor=e9e8e8,icontype=rh,icontypesecondary=rh,clickteaser=yes,buyurl=h ttp:// s,widthpopup=800,heightpopup=600,buybuttontarget=_self'); } catch (e) {} </script > Die jeweiligen Konfigurationsparameter müssen immer durch <Name>=<Wert> übergeben werden. Bitte beachten Sie: Bei mehreren Konfigurationsparametern sind diese durch ein Komma zu trennen, nach dem Komma darf kein Leerzeichen enthalten sein. Seite 14 von 40

15 3.3.7 Doppelseiten-Modus Im Doppelseiten-Modus des Widgets (nur PDF-Anzeige) werden jeweils zwei Seiten gleichzeitig dargestellt. Abbildung 9: Widget im Doppelseiten-Modus Ohne Parameterangabe versucht das Widget immer den passenden Modus (single/doublepage) darzustellen (empfohlener Aufruf). Seite 15 von 40

16 3.4 Die Integration im Detail - FAQ In diesem Kapitel werden allgemeine Fragestellungen und deren Lösung zur Integration des Widgets beschrieben. Die Konfiguration des Widgets wird durch Übergabe zusätzlicher Parameter beim JavaScript-Aufruf vorgenommen. new DMRWidgetHTML5 ('<ISBN>', '<Parameter>'); Beachten Sie bitte, dass mehrere Parameter durch Komma getrennt angegeben werden müssen. Achten Sie auch darauf, dass zwischen den Parametern kein Leerzeichen enthalten ist Die Menüleiste beim Aufruf automatisch einblenden Um die Menüleiste automatisch beim Aufruf des Widgets einzublenden, fügen Sie folgenden Parameter der Parameterliste hinzu. In der kleinen Ansicht new DMRWidgetHTML5 ('<ISBN>','openIPN=yes'); In der Fullscreen-Ansicht new DMRWidgetHTML5 ('<ISBN>','openFSIPN=yes'); Die Hintergrundfarbe ändern Fügen Sie als Parameter bgcolor=<farbcode> hinzu. Der Farbcode muss als hexadezimale Zahl in der Form RRGGBB angegeben werden. Im Beispiel wird die Hintergrundfarbe auf Rot gesetzt. new DMRWidgetHTML5 ('<ISBN>','bgcolor=FF0000'); Die Breite/Höhe ändern Fügen Sie die Parameter width=xxx (Breite) und/oder height=xxx (Höhe) hinzu. Die Angaben werden in der Einheit Pixel angegeben. new DMRWidgetHTML5 ('<ISBN>','width=200,height=300'); Die Breite und Höhe im Popup-Fenster wird durch die Parameter widthpopup=xxx bzw. heightpopup=xxx gesteuert. new DMRWidgetHTML5 ('<ISBN>','widthPopUp=600,heightPopUp=750'); Seite 16 von 40

17 3.4.4 Primär- und Sekundärnavigation Unter der primären Navigation versteht man die erste Ebene der Navigation. Aus der Primärnavigationsleiste kann dann die Sekundärnavigation aufgerufen werden. Primärnavigationsleiste Sekundärnavigationsleiste Seite 17 von 40

18 3.4.5 Default/empfohlene Einstellungen (Aufruf nur mit ISBN) Bei dem Aufruf des Widgets nur mit der ISBN werden folgende Parameter standardmäßig gesetzt: Parameter Werte Beschreibung lang de deutsche Sprache bgcolor E9E8E8 Hintergrundfarbe layout auto Automatische Anpassung für Einzel/Doppelseite optimizesize yes Empfehlung, Parameter nicht setzen sondern die Automatik im Widget nutzen! yes - Die Bilder werden in der niedrigsten Auflösung an den Client gesendet und minimal vom Browser gerendert (niedriger Trafik/ aber bessere Qualität im IE) no - Der Browser bekommt die höchste Auflösung und rendert es selbst (bessere Qualität im Firefox, Chrome und Mobile Browsern aber langsam - da höhere Datenmengen ) metadata yes Der Navigationspunkt Über den Inhalt wird angezeigt links yes Der Navigationspunkt Links wird angezeigt search yes Der Navigationspunkt Buch durchsuchen wird angezeigt showlanguagebutton yes Die Menüauswahl Menüsprache wird angezeigt showfullscreenbutton yes Der Navigationspunkt Fullscreen wird angezeigt buybutton yes Der Navigationspunkt Einkaufswagen wird angezeigt tellafriend yes Der Navigationspunkt Weiterempfehlen wird angezeigt download yes Der Navigationspunkt Download als PDF wird angezeigt clickteaser no Blick ins Buch Ansicht wird nicht dargestellt uitheme a Sekundäre Navigation: Hintergrundfarbe weiß / Schrift schwarz icontype rh Primärnavigation-Icons in der Farbe anthrazit icontypesecondary rh Sekundärnavigation-Icons in der Farbe anthrazit showextrasearchbutton no Anzeige Buch durchsuchen Icon in der Sekundärnavigation showextrashopbutton yes Anzeige Einkaufswagen Icon in der Primärnavigation showtafbutton no Anzeige Weiterempfehlen Icon in der Sekundärnavigation showextrafacebookbutton no Anzeige Facebook Icon in der Sekundärnavigation Seite 18 von 40

19 Parameter Werte Beschreibung showextrafullscreenbutton yes Anzeige Fullscreen Icon in der Primärnavigation flipbook yes Sanftes Blättern in der doppelseitigen Darstellung Achtung, der Erstaufruf des Widgets dauert Initial länger, da alle Seiten der Leseprobe vorgeladen werden. epubscrolling no Das Kapitel-Blättern durch scrollen nicht erlauben Das Widget Aussehen anpassen Die in der Sekundärnavigation enthaltenen Menüs können in zwei unterschiedlichen Farb-Sets dargestellt werden. Durch das Setzten des Parameters uitheme = a wird die Hintergrundfarbe weiß und die Schrift schwarz angezeigt. Die umgekehrte Darstellung - Hintergrund schwarz und Schrift weiß erreichen Sie durch das Setzen des Parameters uitheme = b IconSets Mit den Parametern icontype und icontypesecondary können Sie aus den vorgegebenen IconSets wählen und das Aussehen und die Farbe der Icons verändern. Der Parameter icontype steuert dabei das IconSet für die Primärnavigation und der Parameter icontypesecondary das IconSet für die Sekundärnavigation. new DMRWidgetHTML5 ('<ISBN>', 'uitheme=a,icontype=a,icontypesecondary=b'); Im Widget sind 3 IconSets vorgegeben: Set Set a Beschreibung Set b Set rh Seite 19 von 40

20 Darüber hinaus besteht die Möglichkeit, eigene IconSets zu kreieren und diese in BIC media einzubinden. Somit können Sie das Aussehen des Widgets Ihren individuellen Bedürfnissen anpassen. Bei Fragen zur Anbindung der Custom-Icons wenden Sie sich bitte an den BIC media Support Die doppelseitige/einseitige Anzeige einschalten Wenn das Widget ohne Layout-Parameter aufgerufen wird, versucht das Widget den passenden Modus automatisch zu wählen (einseitig/doppelseitig). Wenn Sie es explizit beeinflussen möchten, können Sie den Parameter entsprechend setzen. new DMRWidgetHTML5 ('<ISBN>','layout=doublepage'); Soll die doppelseitige Anzeige auch im Popup-Fenster greifen, fügen Sie den Parameter layoutpopup=doublepage hinzu. new DMRWidgetHTML5 ('<ISBN>','layout=doublepage,layoutPopUp=doublepage'); Einen Shop direkt verlinken Durch den Parameter buyurl=<link> können Sie einstellen, welche URL aufgerufen werden soll, wenn der Benutzer auf den Einkaufswagen klickt. new DMRWidgetHTML5 ('<ISBN>','buyUrl=<Ihr Link>'); Info: Ihr individueller Link muss mit dem Protokoll bzw. beginnen. Links ohne dieses Präfix können vom BIC media Widget nicht interpretiert werden. Sie können weiterhin steuern, in welchem Fenster der Link für den Shop geöffnet werden soll. Dieser Parameter ist ein Standard-HTML-Parameter für Hyperlinks (_self, _top, etc ). Das folgende Beispiel zeigt, wie Sie den Shop in einem neuen Fenster öffnen: new DMRWidgetHTML5 ('<ISBN>','buyButtonTarget=_blank'); Seite 20 von 40

21 Haben Sie mehrere Inhalte für eine ISBN aufgeladen (z.b. zusätzliche Audio/Video), dann haben Sie die Möglichkeit die URL für den Einkaufswagen je nach angezeigtem Inhalt zu steuern: Bücher new DMRWidgetHTML5 ('<ISBN>','buyUrlBook=<Ihr Link>'); E-Books new DMRWidgetHTML5 ('<ISBN>','buyUrlEBook=<Ihr Link>'); Hörproben new DMRWidgetHTML5 ('<ISBN>','buyUrlAudio=<Ihr Link>'); Videos new DMRWidgetHTML5 ('<ISBN>','buyUrlVideo=<Ihr Link>'); INFO: Bitte beachten Sie, dass die Angabe eines speziellen Parameters den Wert von buyurl überschreibt Den Einkaufswagen ausblenden Das Symbol für den Einkaufswagen wird über den Parameter buybutton=yes/no gesteuert. Möchten Sie das Symbol für den Einkaufswagen ausblenden, geben Sie folgenden Parameter an: new DMRWidgetHTML5 ('<ISBN>','buyButton=no'); Eine sichere Verbindung (SSL) verwenden Möchten Sie das Widget in eine Webseite integrieren, die selbst mit HTTPS aufgerufen wird, dann müssen Sie das JavaScript wie folgt einbinden. <script type='text/javascript' src=' und folgenden Parameter beim Widgetaufruf setzen. try { new DMRWidgetHTML5('<ISBN>','https=yes'); }catch (e) {} Den Klick-Teaser ausblenden Das Verhalten des Klick-Teasers wird über den Parameter clickteaser=hover/yes/no angegeben. Seite 21 von 40

22 Konfigurieren Sie das Widget wie folgt: Ausblenden new DMRWidgetHTML5 ('<ISBN>','clickTeaser=no'); Einblenden, wenn der Benutzer die Maus auf dem Widget bewegt new DMRWidgetHTML5 ('<ISBN>','clickTeaser=hover'); Immer einblenden new DMRWidgetHTML5 ('<ISBN>','clickTeaser=yes'); Die Widgetsprache umstellen Das Widget ist mehrsprachig und kann entsprechend konfiguriert werden. Geben Sie dazu den Parameter lang=<code> an. Derzeit mögliche Sprachen sind: Code de en es Sprache Deutsch Englisch Spanisch Die Sprache auf Englisch umstellen new DMRWidgetHTML5 ('<ISBN>','lang=en'); Die Sprachunterstützung gilt nur für die Texte und Menüpunkte innerhalb des BIC media Widgets. Die Sprache wirkt sich daher nicht auf ein importiertes deutsches PDF oder epub aus; es wird weiterhin in Deutsch angezeigt, obwohl die Sprache umgestellt wurde Die Darstellung der Menüpunkte beeinflussen Die einzelnen Menüpunkte innerhalb des Widgets können separat ein- oder ausgeschaltet werden. In den folgenden Beispielen werden die Einträge im Menü jeweils ausgeschaltet. Benutzen Sie anstatt des Wertes no den Wert yes, um einen Menüpunkt explizit anzuzeigen. Ausschalten des Weiterempfehlen Icons new DMRWidgetHTML5 ('<ISBN>','tellafriend=no'); Ausschalten der Links new DMRWidgetHTML5 ('<ISBN>','links=no'); Seite 22 von 40

23 Ausschalten des Download-Icons new DMRWidgetHTML5 ('<ISBN>','download=no'); Bitte beachten Sie: Wenn Sie die Option im Backend Beispielseiten als PDF nicht aktiviert haben, so wird dieser Menüpunkt nicht angezeigt, auch wenn Sie download=yes explizit angeben. Des Weiteren haben Sie die Möglichkeit, die Menüpunkte aus der Sekundärnavigation in die Primärnavigation zu übernehmen. Dazu können Sie folgende Parameter setzen: Buch durchsuchen-icon verschieben new DMRWidgetHTML5 ('<ISBN>','showExtraSearchButton=yes'); Shop-Icon verschieben new DMRWidgetHTML5 ('<ISBN>',' showextrashopbutton=yes'); Weiterempfehlen-Icon verschieben new DMRWidgetHTML5 ('<ISBN>','showTAFButton=yes'); Seite 23 von 40

24 4 Alle Konfigurationsparameter auf einen Blick In der nachfolgenden Liste sind alle Konfigurationsparameter des HTML5-Widgets beschrieben. Parameter Werte Beschreibung layout singlepage/doublepage/auto Bestimmt das Seitenlayout des Widgets width Eine Zahl; Default: 195 Die Breite des Widgets in Pixeln height Eine Zahl; Default: 315 Die Höhe des Widgets in Pixeln bgcolor Hexadezimaler Farbwert <RRGGBB> Die Hintergrundfarbe des Widgets layoutpopup <auto singlepage doublepage> Bestimmt das Seitenlayout des Widgets im PopUp-Fenster widthpopup Eine Zahl Die Breite des Widgets im PopUp-Fenster in Pixeln heightpopup Eine Zahl Die Höhe des Widgets im PopUp-Fenster in Pixeln showtooltip yes/no Bestimmt, ob der Tooltip angezeigt wird lang <de en es> Setzt die Widget-Sprache buyurl URL Die URL, auf die beim Klick auf den Buy- Button in allen Bereichen gesprungen werden soll buyurlbook URL Die URL, auf die beim Klick auf den Buy- Button im Leseprobenbereich gesprungen werden soll. Überschreibt den Parameter 'buyurl' für den Bereich 'Leseprobe' buyurlebook URL Die URL, auf die beim Klick auf den Buy- Button im Leseprobenbereich gesprungen werden soll. Überschreibt den Parameter 'buyurl' für den Bereich 'Ebook' buyurlaudio URL Die URL, auf die beim Klick auf den Buy- Button im Hörprobenbereich gesprungen werden soll. Überschreibt den Parameter 'buyurl' für den Bereich 'Hörprobe' buyurlvideo URL Die URL, auf die beim Klick auf den Buy- Button im Videobereich gesprungen werden soll. Überschreibt den Parameter 'buyurl' für den Bereich 'Video' buybuttontarget Text, z.b. _self, _top Bestimmt den Namen des Fensters, in dem der Buy-Link aufgeht startingpage Eine Zahl Die Seite, die bei Aufruf des Widgets angezeigt werden soll (nur PDF) buybutton yes/no Bestimmt, ob das Buy-Icon angezeigt wird tellafriend yes/no Bestimmt, ob das Tell-a-friend-Icon ( ) angezeigt wird Seite 24 von 40

25 Parameter Werte Beschreibung links yes/no Zeigt den Button Links-Icon an wenn entsprechende Links im Backend definiert sind download yes/no Zeigt den Button PDF-Download an wenn die Funktion im Backend freigeschaltet ist book yes/no Zeigt den Button 'Leseprobe PDF' an wenn eine Leseprobe zur ISBN vorhanden ist epub yes/no Zeigt den Button 'epub' an wenn eine Leseprobe zur ISBN vorhanden ist search yes/no Zeigt den Button 'Suche' an audio yes/no Zeigt den Button 'Hörprobe' an video yes/no Zeigt den Button 'Video' an wenn Links im Onix vorhanden sind metadata yes/no Zeigt den Button 'Über den Inhalt' an clickteaser yes/no Zeigt den "Klick"-Teaser an showtafbutton yes/no Zeigt den Button Weiterempfehlen in der Primärnavigation buttonorder book/ ebook/ audio /video Legt die Reihenfolge der verschiedenen Medien fest, sofern diese verfügbar sind. Es stehen zur Auswahl die Optionen audio, video, book, ebook. Diese sind in folgenden Formaten gültig: audio-video-book book-audio video-audio Das zu Beginn stehende Medium wird auch initial angezeigt. showlanguagebutton yes/no Zeigt den Button Sprachauswahl an showfullscreenbutton yes/no Aktiviert bzw. deaktiviert die Schaltfläche Vollbildmodus showextrasearchbutton yes/no Zeigt den Button Suche in der Primärnavigation an showextrashopbutton yes/no Zeigt den Button Shop in der Primärnavigation an https yes/no Wenn auf yes gesetzt, werden alle Anfragen des Widgets via HTTPS gesandt. Dies ist nützlich, wenn man das Widget in eine Seite einbindet, die vom Benutzer via HTTPS angesprochen wird, um Warnmeldungen zu unterdrücken. Seite 25 von 40

26 Parameter Werte Beschreibung showextrafacebookbutton yes/no Ohne Funktion epubscrolling yes/no Schalte in der PC-Version den "Kapitelwechsel" per Scrollen ein (epub) optimizesize yes/no Lädt die Leseprobenseiten mit (ungefähr) vorberechneter Größe (Default: für IE = yes / sonst = no) icontype <a b rh> Steuert das IconSet für die Primär- Navigation icontypesecondary <a b rh> Steuert das IconSet für die Sekundär- Navigation iconsize < > in Pixel Setzt die Icon-Größe in der Navigationsleiste (Default wird versucht, die optimale Icon - Größe zu der Größe des Widgets zu ermitteln) uitheme <a b> Setzt die Hintergrundfarbe (jquery-theme) für die Sekundäre und Tertiäre Navigation maxreaderwidth <Breite in Pixel> Setzt die Breite des Anzeigebereichs für die epub-darstellung (Default=850 Pixel) flipbook yes/no Aktiviert/deaktiviert bei der doppelseitigen Anzeige den Modus sanft Blättern borderwidth <Breite in Pixel> Breite des Rahmens um den iframe des HTML5-Widgets (Default=1) bordercolor <RGB-Hex-Wert> <RRGGBB> Farbe des Rahmens openfsipn yes/no Sichtbarkeit der Navigationsleiste beim Aufruf des Widgets navigationcontext book/ebook/audio Bestimmt den anfänglichen Navigationskontext. Üblicherweise startet das Widget mit einer Leseprobe (Print oder E-BOOK). Man kann aber mit diesem Parameter erzwingen, dass z.b. mit einer Hörprobe gestartet wird. In Verbindung mit weiteren Parametern wie playaudioonstart und nonavi kann die Hörprobe automatisch gestartet und die Navigation unterdrückt werden. playaudioonstart yes/no Erzwingt die automatische Wiedergabe der Hörprobe im Audio Context. (s. auch navigationcontext ) nonavi yes/no Unterdrückt die Navigation nomobileprecover yes/no Die Darstellung eines zusätzlichen Covers auf mobilen Geräten wird unterdrückt. showextradownloadbutton yes/no Der Download-Button wird in die primäre Navigation verschoben Seite 26 von 40

27 Parameter Werte Beschreibung resizable yes/no Ermöglicht das Vergrößern des Widgets auf den mobilen Geräten mit Gesten. utm_source utm_medium utm_campaign utm_term utm_content Es wird nicht empfohlen diesen Parameter zu setzen. Die derzeitigen Browser behandeln diese Funktion unzureichend und es kommt ggf. zu unerwünschten Effekten bei der Rückkehr zum Ausgangspunkt. Google-Analytics-Campagne Parameter wie in Google-Analytics beschrieben. Diese Parameter werden vom Widged an Google- Analytics unverändert durchgereicht. openipn yes/no Sichtbarkeit der Navigationsleiste beim Aufruf der kleinen Widgetdarstellung navigationtype manga Schaltet den Mangamode ein (von hinten nach vorn Lesen) Seite 27 von 40

28 5 Die Implementierung in der Praxis 5.1 Prüfung, ob ein Titel im BIC media Repository vorhanden ist Bevor ein Widget auf einer Webseite aufgerufen und angezeigt werden kann, muss geprüft werden, ob der Titel im BIC media Repository vorhanden ist. Für die Prüfung bietet BIC media zwei Methoden an: Prüfung einer einzelnen ISBN mit der Funktion isinrepository.do Dieser Webservice überprüft, ob ein Titel/ISBN vorhanden ist. Empfohlen wird die Nutzung dieser Funktion für Blogger oder Webshops. Hinweis: Die unsachgemäße bzw. übermäßige Nutzung dieses Webservices in einem kurzen Zeitfenster kann die Performance der BIC media-server negativ beeinflussen. Deshalb sollten überflüssige Abfragen auf jeden Fall vermieden werden. Aufruf: Ist der Titel vorhanden ist das Ergebnis <dmr> <true/> </dmr> Ist der Titel nicht vorhanden ist das Ergebnis dmr> <false/> </dmr> Verfügbare Inhalte mit der Funktion availablemedia.do abfragen Mit diesem Webservice können alle verfügbaren Inhalte des BIC media Repositories ermittelt werden. Erfolgt der Aufruf ohne Filter, werden alle Inhalte (bis zu ISBN s) zurückgegeben. Die Ausführung dieser Funktion kann dann einige Sekunden in Anspruch nehmen. Daher ist sie für eine Ad-Hoc-Abfrage nicht geeignet. Empfohlen wird die Filterung über den jeweiligen Verlag. Bei Bedarf kann die jeweilige Verlagsnummer vom BIC media Support erfragt werden. Üblicherweise wird der Titelbestand einmal pro Tag abgefragt und lokal gespeichert. Seite 28 von 40

29 Aufruf: liefert den Gesamtinhalt der BIC media Datenbank in der Form: <dmr> <availablemedia> <books> <book isbn=" " author= Paul Litt title= The great hunger clientname="arvato systems" remote="false" activationdate=" " modified=" t14:02: :00" removed="false"/> <!-- more books --> </books> <audios> <audio isbn=" " author= Paul Litt title= The great hunger clientname="arvato systems" remote="false" activationdate=" " modified=" t14:02: :00" removed="false"/> <!-- more audio --> </audios> <videos> <video isbn=" " author= Paul Litt title= The great hunger clientname="arvato systems" remote="false" activationdate=" " modified=" t14:02: :00" removed="true"/> <!-- more video --> </videos> <ebooks> <ebook </ebooks> </availablemedia> </dmr> Aufruf mit Verlagsfilter: liefert den Inhalt der BIC media Datenbank für Verlag1, Verlag2 und Verlagxx zurück. Seite 29 von 40

30 6 Implementierungsbeispiele 6.1 Darstellung einer statischen Leseprobe im Tabreiter eines Browsers Klick auf Hier geht s zur Leseprobe öffnet einen neuen Tabreiter im Browser Beispielimplementierung Seite 30 von 40

31 6.2 Darstellung eines kleinen Widgets plus Pop-up-Widget Die Webseite stellt das Buch als voll funktionsfähiges Widget im Kleinformat da. Ein Doppelklick auf das kleine Widget öffnet ein neues Fenster. Seite 31 von 40

32 6.2.1 Einfache Beispielimplementierung Diese Implementierung setzt voraus, dass im Vorfeld überprüft wurde, ob der Titel in dem BIC media Repository vorhanden ist. Siehe 5.1 (Webservices availablemedia.do bzw. isinrepository.do) <script src=" <script>try { } catch (e) { }; </script> new DMRWidgetHTML5(' '); Diese einfache Implementierung wird auch im Konfigurator dargestellt. Dort können auch die entsprechenden Parameter live ausprobiert werden. Konfigurator-Aufruf: Seite 32 von 40