HTML5: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen

HTML5 (Quelltext anzeigen)

Version vom 2. März 2020, 20:08 Uhr

5.384 Bytes entfernt ,  2. März 2020
keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
==Anlieferung==
==Anlieferung==
Ob eine Werbeform als HTML5 (physisch oder via 3rd-Party-Redirect) bereitgestellt und welche Datei-Typen und -Gewichte enthalten sein können, ist den jeweiligen Einzelspezifikationen zu entnehmen.
Ob eine Werbeform als HTML5 (physisch als Zip-File oder via 3rd-Party-Redirect) bereitgestellt und welche Datei-Typen und -Gewichte enthalten sein können, ist den jeweiligen Einzelspezifikationen zu entnehmen.
</br>
</br>
===Bereitstellung physisch via HTML5-Zip-File===
===Bereitstellung physisch via HTML5-Zip-File===
Zeile 8: Zeile 8:
| style="height:50px; width:850px; text-align:left;font-size:16px" | 2. Auf oberster Zip-Archiv-Ebene muss eine index.html liegen, von der alle weiteren Komponenten (z.B. CSS-, JS-, Bild-Dateien) relativ referenziert werden - vermeiden Sie dabei das Referenzieren von externen Objekten
| style="height:50px; width:850px; text-align:left;font-size:16px" | 2. Auf oberster Zip-Archiv-Ebene muss eine index.html liegen, von der alle weiteren Komponenten (z.B. CSS-, JS-, Bild-Dateien) relativ referenziert werden - vermeiden Sie dabei das Referenzieren von externen Objekten
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 3. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Vermarkters verbleiben und dürfen sich nicht außerhalb positionieren. D.h. es ist keine DOM-Insertion bzw. der Zugriff von Werbekomponenten auf das Top-Window der ausspielenden Website erlaubt.
| style="height:50px; width:850px; text-align:left;font-size:16px" | 3. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Vermarkters verbleiben und dürfen nicht auf das Top-Window/Frame der ausspielenden Website zugreifen.
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 4. Das HTML5-Project wird über das Templating von iq digital via Cross-Domain-iFrame in die Website integriert.
| style="height:50px; width:850px; text-align:left;font-size:16px" | 4. Das HTML5-Project wird über das Templating von iq digital via Cross-Domain-iFrame in die Website integriert.
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 5. Videodateien können nicht innerhalb von HTML5-Zip-Files zum Host über iq digital angeliefert werden, anderfalls ist die Bereitstellung als 3rd-Party-iFrame erforderlich. Die max. Größe von 2 MB im Host Initiated Subload darf dabei nicht überschritten werden.
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 6. Alle Bestandteile einer Kampagne und Inhalte eines Creatives sind als HTTPS-kompatible Komponenten anzuliefern bzw. extern bereitzustellen - siehe auch [[SSL-Konformität (HTTPS)]].
|}
|}
Die verantwortliche Kreativagentur muss die im Banner verwendeten Techniken auf Browser- und Plattform-kompatibilität testen sowie die Lauffähigkeit der Inszenierung in den relevanten Umfeldern sicherstellen. Sie ist ebenfalls für eine entsprechende Fallbacklösung innerhalb der Inszenierung bei nicht kompatiblen Browser verantwortlich, so dass auf Ausschlüsse verzichtet werden kann.
Die verantwortliche Kreativagentur muss die im Banner verwendeten Techniken auf Browser- und Plattform-kompatibilität testen sowie die Lauffähigkeit der Inszenierung in den relevanten Umfeldern sicherstellen. Sie ist ebenfalls für eine entsprechende Fallbacklösung innerhalb der Inszenierung bei nicht kompatiblen Browser verantwortlich, so dass auf Ausschlüsse verzichtet werden kann.
Zeile 18: Zeile 22:
| style="height:50px; width:850px; text-align:left;font-size:16px" | 1. Anzuliefern ist ein 3rd-Party iFrame-Tag
| style="height:50px; width:850px; text-align:left;font-size:16px" | 1. Anzuliefern ist ein 3rd-Party iFrame-Tag
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 2. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Rich-Media-Hosts (3rd-Party-Hosts) verbleiben und dürfen sich nicht außerhalb positionieren. D.h. es ist keine DOM-Insertion bzw. der Zugriff von Werbekomponenten auf das Top-Window der ausspielenden Website erlaubt.
| style="height:50px; width:850px; text-align:left;font-size:16px" | 2. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Rich-Media-Hosts (3rd-Party-Host) verbleiben und dürfen nicht auf das Top-Window/Frame der ausspielenden Website zugreifen.
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 3. Es gelten generell die Voraussetzungen für die Anlieferung von 3rd-Party-Ressourcen.
| style="height:50px; width:850px; text-align:left;font-size:16px" | 3. Es gelten generell die Voraussetzungen für die Anlieferung von 3rd-Party-Ressourcen.
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 4. Alle Bestandteile einer Kampagne und Inhalte eines Creatives sind als HTTPS-kompatible Komponenten anzuliefern bzw. extern bereitzustellen - siehe auch [[SSL-Konformität (HTTPS)]].
|}
|}
Die verantwortliche Kreativagentur muss die im Banner verwendeten Techniken auf Browser- und Plattform-kompatibilität testen sowie die Lauffähigkeit der Inszenierung in den relevanten Umfeldern sicherstellen. Sie ist ebenfalls für eine entsprechende Fallbacklösung innerhalb der Inszenierung bei nicht kompatiblen Browser verantwortlich, so dass auf Ausschlüsse verzichtet werden kann.
Die verantwortliche Kreativagentur muss die im Banner verwendeten Techniken auf Browser- und Plattform-kompatibilität testen sowie die Lauffähigkeit der Inszenierung in den relevanten Umfeldern sicherstellen. Sie ist ebenfalls für eine entsprechende Fallbacklösung innerhalb der Inszenierung bei nicht kompatiblen Browser verantwortlich, so dass auf Ausschlüsse verzichtet werden kann.
</br>
</br>
HTML5-Projekte sind somit max. auf die Anlieferung als 3rd-Party-iFrame oder HTML5-Zip-Files beschränkt, insofern diese über Werbeformtemplates von iq digital in die Seite Implementiert werden. Bitte achten Sie ebenfalls auf SSL-kompatible Protokollierung (siehe [[Anlieferung 3rd-Party-Ressourcen]]).
Wird ein 3rd-Party-Redirect-Script bereitgestellt, gelten die Voraussetzungen für die Anlieferung von 3rd-Party-Ressourcen. Die Agentur bzw. der Werbemittel-Host ist dann angebotsübergreifend für die ordnungsgemäße Implementierung, ggf. Positionierung und Funktionalität der gesamten Werbeform auf den Seiten verantwortlich.
===Bereitstellung als 3rd-Party-iFrame===
Für die optimierte und standardisierte Verarbeitung ist die HTML5-Werbeanzeige als 3rd-Party-iFrame zur Verfügung zu stellen. Bitte beachten Sie im Folgenden die weiteren Informationen zur Synchronisation von kombinierten Werbemittel mittels "local-connect" sowie die Voraussetzung für das Vermarkter-Klick-Tracking.
Dabei muss das auf oberster Zip-Archiv-Ebene obligatorische Index-HTML-Dokument alle im Paket enthaltene Dateien final und "SelfContained" implementieren. D.h. alle erforderlichen Ressourcen sind mit relativer Pfadreferenzierung einzubinden, so dass die Implementierung eine selbständige und vom Host-System unabhängige Ausspielung der Anzeige ermöglicht. '''Eine Bearbeitung der Dateien von Seiten des Vermarkters ist nicht möglich.''' Insofern externe Ressourcen, die nicht physisch im Zip-Paket enthalten sind referenziert werden müssen, sind diese entsprechend mit absoluter Pfadreferenzierung zum eigentlichen Host-System einzubinden. Achten Sie in diesem Fall ebenfalls auf die Anforderung der HTTPS-Kompatibilität der Ressourcen und entsprechende Protokollverwendung zur Kennzeichnung.
Die HTML5 Werbeinszenierung wird bei Ausspielung auf der Seite innerhalb eines iFrames implementiert, so dass die Anforderungen zur Synchronisation von kombinierten Werbemittelen mittels "local-connect" sowie die Voraussetzung für das Vermarkter-Klick-Tracking, zu berücksichtigen sind.
===Video-Material===
Videodateien können derzeit nicht innerhalb von HTML5-Zip-Files angeliefert werden (Ausnahme sind die speziell durch iq digital definierten Video-Produkte – siehe Einzelspezifikationen). Sollte Ihre Werbeinszenierung Video-Material implementieren, ist die Anzeige als 3rd-Party-iFrame erforderlich. Die maximal Größe von 4 MB (für Online stationäres Web) im polite Download darf dabei nicht überschritten sowie die User-Experience durch das Laden des Banner-Materials im Rahmen einer geläufigen Rechnerkonfiguration nicht beeinflusst werden. iq digital behält sich in davon abweichenden Fällen vor das Werbemittel abzulehnen.
'''''Für Werbeinszenierungen im portablen Web auf mobilen Webseiten oder in nativen Apps, sind unsere Spezifikationen für "Tabletoptimierte Banner" und "Mobile" weiter unten in diesen Spezifikationen maßgeblich!'''''


==Synchronisation==
==Synchronisation==
===Local-Connect (SOP)===
===Local-Connect===
HTML5-Werbeinszenierungen, die mehrere Banner miteinander kombinieren und synchronisierte Animations-Sequenzen (local-connect) verwenden, müssen den Umstand berücksichtigen, dass die Implementierung der Werbebanner auf den Angebotsseiten in den beschriebenen Fällen mittels iFrame erfolgt. Um mögliche Einschränkungen der Banner-Kommunikation durch die Same-Origin-Policy (SOP) zu vermeiden, besteht die Möglichkeit zur Einbindung einer Message-Bridge, die die Kommunikation zwischen Werbe-iFrames unter Beachtung der SOP legitimiert.
HTML5-Werbemittel haben sich mittlerweile am Markt etabliert. Dennoch bereiten in der Praxis einige Funktionalitäten, abhängig von der umgebenden Webseite und Implementierung der Anzeige innerhalb Cross-Origin-iFrames, noch immer Probleme. Aus diesem Grund wurde seitens der Unit Ad Technology des OVKs, auf Basis internationaler Standards (IAB), HTML5 Snippets für diese Funktionalität als technische Empfehlung erarbeitet.
</br></br>
Unter folgendem Link stehen die einzelnen Funktionen, inklusive einer genauen Anleitung zur Verfügung:
{| class="wikitable"
| style="height:50px; width:850px; text-align:left;font-size:16px" | '''URL:''' https://github.com/Unitadtechnologystandards/HTML5Lib/tree/master/localConnect
|}
iq digital übernimmt keine Gewährleistung für die vom OVK im GIT-Project bereitgestellten


Insofern Sie ihre HTML5-Werbeinszenierung über einen Rich-Media-Dienstleister (RMV) hosten, empfehlen wir Ihnen die Frage des local-connects im Vorfeld mit diesem abzustimmen - ggf. hält dieser bereits eine Lösung bereit. Inwiefern diese durch iq digital unterstützt werden kann ist von der Art der Bereitstellung und Implementierung abhängig. iq digital geht dabei davon aus, dass das gelieferte Material dokumentiert ist und 1:1 ohne weiteren Eingriff verwendet werden kann sowie die Plausibilität der Code-Verarbeitung durch die Agentur gewährleistet ist. Ebenfalls verantwortet die Agentur oder der RMV die Abstimmung und den Einbau der Nachrichten-Handler innerhalb der eigenen Werbeinszenierung zum Empfangen, Verarbeitung und Senden der übermittelten Nachrichten. Der Einbau muss bereits vor Anlieferung der Werbeanzeige durchgeführt worden sein. Die gleichen Voraussetzungen gelten auch im Fall, dass eine Anlieferung über ein HTML5-Zip-File erfolgt und Sie die Synchronisation von Animations-Sequenzen innerhalb Ihrer Kreation selbst verantworten.


iq digital kann bei Bedarf eine exemplarische Vorlage zur Verfügung stellen, die im Rahmen der notwendigen "Commands" und "MsgData" durch die Agentur anzupassen sowie deren Kompatibilität zur Werbeinszenierung und eventuellen Komponenten des Rich-Media-Dienstleister sicherzustellen ist. Bitte fragen Sei beim zuständigen Traffic-Management von iq digital für weitere Informationen nach.
''<span class="underline">Dieser Punkt behandelt eine wesentliche Frage zur Organisation der eigentlichen Code-Struktur für die Animitations-Synchronisation innerhalb Ihrer Werbekreation, der möglichst früh vor Produktion geklärt sein muss. Die Anforderung ist insbesondere bei Verwendung von Flash-HTML5-Converter-Tools, die unter Umständen nachträgliche Code-Anpassungen zur Ablaufsteuerung erschweren, zu berücksichtigen.</span>''
==Interaktion==
===Banner-Expanding, -Collapse, -PushDown und -PushUp via "mouseover" und "mouseout"===
Die genannten Interaktionen via "Mouse"-Ereignis werden auch im Falle von HTML5 in den dafür vorgesehenen Werbeformen unterstützt, insofern die Integration des Banners als iFrame im Werbetemplate von iq digital möglich ist.
D.h. Mauszeiger initiierte User-Ereignisse im Top-Level des Browsers bewirken in den relevanten Werbetemplates ein Expanden (Kollabieren), PushDown (PushUp) der beim Start zu einem Teilausschnitt "geclippten" Werbefläche auf das in den Spezifikationen beschriebene max. Format. Bitte stellen Sie für den "agilen" Teil der Werbeinszenierung nur einen iFrame mit expandierten Format zur Verfügung (das ist äquivalent zu Anlieferung von "expandable" Flash-Dateien).
Unabhängig von iq-Templatefeatures zur Freigabe der initialen und expandierten Werbefläche, ist die Darstellung der Werbeanzeige innerhalb des iFrames (bzw. HTML-Zip-Files) im Teilausschnitt sowie nach Expandieren durch die Agentur für die eintretenden Ereignisse abzufangen und zu implementieren. Das Template von iq digital gibt in diesem Fall keine Information an das iFrame über das eintretende Ereignis weiter. Insofern Sie eine 3rd-Party-Umsetzung außerhalb der Template-Unterstützung von iq digital zur Verfügung stellen, ist die Agentur bzw. der Werbemittel-Host für die ordnungsgemäße Implementierung aller Funktionalitäten verantwortlich.
Wenn in der jeweiligen Einzelspezifikation nicht anders beschrieben, werden die oben bereitgestellten Funktionen derzeit nur für Ausspielungen im Bereich Display für das stationäre Desktop-Web unterstützt. D.h. im Falle von Ausspielungen in Systemen, die eine abweichende Gesten- und Touch-Steuerung erfordern, erfolgt kein Expanden des Anzeige-Teilauschnittes über das Werbetemplate (dies entspricht ebenfalls der derzeitigen Vorgehensweise bei Flash-Umsetzungen). Insofern Ihre Werbemittel hierfür einen Workaround vorsehen, teilen Sie das Vorgehen bitte dem verantwortlichen Traffic-Manager mit.


===Klickbare Interaktionsflächen innerhalb Ihrer Werbeform===
===Klickbare Interaktionsflächen innerhalb Ihrer Werbeform===
Zeile 77: Zeile 54:


''<span class="underline">Nachfolgend finden Sie exemplarische Vorlagen zum Domain-übergreifenden Nachrichtenaustausch. <span class="blue">Es ist zu beachten, dass es sich dabei um auf iq-Templates abgestimmte Lösungen handelt.</span> Die Plausibilität zur Verwendung in Ihrem Werbemittel-Code ist durch die verantwortliche Agentur sicherzustellen. Insofern abweichende Kommunikations-Schnittstellen in den jeweiligen Einzelspezifikation beschrieben sind, ersetzen diese die exemplarischen Vorlagen. Im Falle von interaktiven Werbeformen, die iq-Templates für die Implementierung Ihrer Werbemittel nutzen, ist das nachgelagerter Verfahren zum Nachrichtenaustausch zwingend erforderlich.</span>''
''<span class="underline">Nachfolgend finden Sie exemplarische Vorlagen zum Domain-übergreifenden Nachrichtenaustausch. <span class="blue">Es ist zu beachten, dass es sich dabei um auf iq-Templates abgestimmte Lösungen handelt.</span> Die Plausibilität zur Verwendung in Ihrem Werbemittel-Code ist durch die verantwortliche Agentur sicherzustellen. Insofern abweichende Kommunikations-Schnittstellen in den jeweiligen Einzelspezifikation beschrieben sind, ersetzen diese die exemplarischen Vorlagen. Im Falle von interaktiven Werbeformen, die iq-Templates für die Implementierung Ihrer Werbemittel nutzen, ist das nachgelagerter Verfahren zum Nachrichtenaustausch zwingend erforderlich.</span>''
Wenn in der jeweiligen Einzelspezifikation nicht anders beschrieben, werden die oben bereitgestellten Funktionen derzeit nur für Ausspielungen im Bereich Display für das stationäre Desktop-Web unterstützt. D.h. im Falle von Ausspielungen in Systemen, die eine abweichende Gesten- und Touch-Steuerung erfordern, erfolgt kein Expanden des Anzeige-Teilauschnittes über das Werbetemplate (dies entspricht ebenfalls der derzeitigen Vorgehensweise bei Flash-Umsetzungen). Insofern Ihre Werbemittel hierfür einen Workaround vorsehen, teilen Sie das Vorgehen bitte dem verantwortlichen Traffic-Manager mit.


===VORLAGE: <span class="blue">"Werbemittel"-initiierte Benachrichtigungen</span> an das iq-Template "function-calls"===
===VORLAGE: <span class="blue">"Werbemittel"-initiierte Benachrichtigungen</span> an das iq-Template "function-calls"===
Abgerufen von „https://techspecs.iqd-ao.de/de/index.php?title=Spezial:Mobiler_Unterschied/1777“

Navigationsmenü