Technische Spezifikationen

Billboard mit Reminder: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(10 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{TechSpecsOnline
{{TechSpecsOnline
|galerie=[[Datei:Billboard_reminder.png|300px]]
|galerie=
<gallery mode="packed" heights="200px">
Online_Billboard_mit_reminder1.png|1. Initialer Zustand
Online_Billboard_mit_reminder2.png|2. Billboard bleibt beim Scrollen für 5s am Bildschirmrand sticky
Online_Billboard_mit_reminder3.png|3. Nach 5s Transformation zu einer sticky Reminder-Leiste
Online_Billboard_mit_reminder4.png|4. Nach Expandieren sind Billboard + Reminder-Leiste sichtbar und sticky
</gallery>
|beschreibung=Das Billboard ist für 5 Sek. Immer in voller Größe sichtbar, auch beim Scrollen. Danach zieht es sich zu einer Sticky-Reminder-Leiste zusammen, die jederzeit wieder zu voller Billboard-Größe expandiert werden kann.
|beschreibung=Das Billboard ist für 5 Sek. Immer in voller Größe sichtbar, auch beim Scrollen. Danach zieht es sich zu einer Sticky-Reminder-Leiste zusammen, die jederzeit wieder zu voller Billboard-Größe expandiert werden kann.
|3rdParty={{3rdParty|erlaubt=nein}}
|3rdParty={{3rdParty|erlaubt=nein}}
Zeile 13: Zeile 19:
}}
}}
|besondereInformation=
|besondereInformation=
{{Baustein|titel=Interaktion|text=Scroll-Event des Users fixiert (Sticky-Funktion) das Billboard sichtbar für 5 Sek. am oberen Viewport des Browsers. Nach Ablauf der Zeit kollabiert das Billboard zu einer weniger hohen Reminder-Leiste, die ebenfalls fixiert am oberen Viewport des Browsers verbleibt. Durch Klick kann dieser erneut auf das initiale Format geöffnet werden (die Reminder-Leiste bleibt dauerhaft unterhalb am Billboard angedockt). Durch Klick auf Schließen-Buttons wird das Fixierung bzw. stickiness aufgelöst und das Billboard mit itialem Format im originären Werbeplatz zurückgesetzt und verbleibt dort. Die Features zur Steuerung werden von iq digital umgesetzt - siehe nachfolgende Anforderung zur Umsetzung Creation .}}
{{Baustein|titel=Interaktion|text=Scroll-Event des Users fixiert das Billboard sichtbar für 5 Sek. am oberen Viewport des Browsers. Nach Ablauf der Zeit kollabiert das Billboard zu einer weniger hohen Reminder-Leiste, die ebenfalls fixiert am oberen Viewport des Browsers verbleibt. Durch Klick kann dieser erneut auf das initiale Format geöffnet werden (die Reminder-Leiste bleibt dauerhaft unterhalb am Billboard angedockt). Durch Klick auf Schließen-Buttons wird das Fixierung bzw. stickiness aufgelöst und das Billboard mit itialem Format im originären Werbeplatz zurückgesetzt und verbleibt dort. Die Features zur Steuerung werden von iq digital umgesetzt - siehe nachfolgende Anforderung zur Umsetzung Creation .
{{ReminderSteuerungBaustein}}
}}
 
 
 
|besondereInformation={{Baustein|titel=Interaktion|text='''Einmalige''' Interaktion für Pushdown und Kollabieren via MouseOver/MouseOut. Nach erstmaligen Kollabieren der Anzeigenfläche auf das initiale Format, erscheint ein Button '''"nochmal abspielen"'''. Weitere Pushdowns sind nur noch per '''Klick''' auf den Button möglich. Ist ein Pushdown via Klick erfolgt, wird ein Button zum Schließen der Anzeigenfläche auf das initiale Format eingeblendet.
}}
}}
{{Baustein|titel=Push-Steuerung|text=
{{Baustein|titel=Feature-Steuerung|text=
Bei Anlieferung des Werbemittels als HTML5-Zip-File und 3rd-Party iFrame-Tag, müssen die Funktionen und Elemente für '''Klick-Interaktion''' nach obigen Interaktions-Regeln durch die Creative-Agentur umgesetzt werden (Das initiale Mouse-Over/Out wird durch iq digital umgesetzt). Da das HTML5-Project innerhalb eines Cross-Domain-iFrames in den Werbeplatz implementiert wird, sind abgestimmte '''Commands''' für das Messaging mit dem Anzeigen-Template von iq digital erforderlich.  
Bei Anlieferung des Werbemittels als HTML5-Zip-File müssen die Funktionen und Elemente für '''Klick-Interaktion''' nach obigen Interaktions-Regeln durch die Creative-Agentur umgesetzt werden. Da das HTML5-Project innerhalb eines Cross-Domain-iFrames in den Werbeplatz implementiert wird, sind abgestimmte '''Commands''' für das Messaging mit dem Anzeigen-Template von iq digital erforderlich.  
<br/><br/>   
<br/><br/>   
Folgende Code-Snippets zum Cross-Domain-Messaging bzw.Übersenden der Commands an das Anzeigen-Template der iq digital sollen Sie dabei unterstützen. Insofern der Creative-Code Ihrer Agentur eine eigene Implementierung vorsieht, so ist zu beachten, dass die Übermittlung der '''vorgegebenen''' Command-Attribute essentiell sind.     
<br/><br/>
'''Dieser Code muss in Ihr Werbemittel im Top-Level-Window "einmalig" eingefügt werden:'''
'''Dieser Code muss in Ihr Werbemittel im Top-Level-Window "einmalig" eingefügt werden:'''
<syntaxhighlight lang="html" line="line">
<syntaxhighlight lang="html" line="line">
Zeile 54: Zeile 52:
</script>
</script>
</syntaxhighlight>
</syntaxhighlight>
'''Implementieren Sie auf gleicher Ebene den "Messenger", der bei Aktivierung des Klick-Buttons eine Aktion meldet:'''<syntaxhighlight lang="html" line="line" highlight="3,6,12">
'''Implementieren Sie auf gleicher Ebene den "Listener", der bei Benachrichtigung durch das iq-Template eine Aktion ausführt:'''<syntaxhighlight lang="html" line="line" highlight="14-15">
<script type="text/javascript">
<script type="text/javascript">
   try {
   try {
     iqdNS.postCommand[iq-command] = function() {
     iqdNS.initAnimation=function(b){
       var msgData = {
       var a;
         info:"startAnimation"+iqdNS.creativeID,
      if(b.origin===iqdNS.postOrigin){
        command:"[iq-command]"
         a=JSON.parse(b.data);
      };
        if(a.info==="startAnimation"+iqdNS.creativeID){
      if (JSON.stringify){
          iqdNS.animationCallback(a.command)
        window.top.postMessage(JSON.stringify(msgData), iqdNS.postOrigin);
        }
       }
       }
     };  
     };  
     iqdNS.addEvent(iqdNS.getElm("[action-elmID]"),'click',iqdNS.postCommand[iq-command]);  
     iqdNS.animationCallback = function(command){
   }catch(e){}
      switch (command){
</script>  
              case "[iq-command]":
                    // Fügen Sie hier den Funktionsaufruf zum Start Ihrer Animation ein
          break;
      }
    };
    iqdNS.addEvent(window,'message',iqdNS.initAnimation);
   } catch(e){}
</script>
</syntaxhighlight>
</syntaxhighlight>
Für diese Werbeform sind mehrere "Commands" erforderlich. Die markierte Funktion ist dementsprechend in Ihrem Code zu duplizieren.<br/><br/>
{{ReminderSteuerungBaustein}}
Ersetzen Sie '''[iq-command]''' durch '''iqdExpandPB''' (Pushdown der Anzeigen-Fläche) <br/>
}}
Ersetzen Sie '''[iq-command]''' durch '''iqdCollapsePB''' (Kollabieren der Anzeigen-Fläche) <br/>
 
und binden diese an die '''Klick-Sensitiven''' Flächen zum Pushdown und Kollabieren via '''Button'''<br/>
|pagenameEN=Billboard with reminder
Ersetzen Sie '''[action-elmID]''' durch die Element-ID Ihres '''Klick-buttons'''. <br/>
<includeonly>|wirdReferenziert=true</includeonly>
}}
}}
Abgerufen von „https://techspecs.iqd-ao.de/de/index.php?title=Billboard_mit_Reminder“