specs maxiarche HTML5 desktop 04202016 (1) .pdf


Nom original: specs_maxiarche_HTML5_desktop_04202016 (1).pdfTitre: Le contexteAuteur: vtbn7306

Ce document au format PDF 1.5 a été généré par Acrobat PDFMaker 10.1 pour Word / Adobe PDF Library 10.0, et a été envoyé sur fichier-pdf.fr le 13/10/2016 à 21:25, depuis l'adresse IP 194.12.x.x. La présente page de téléchargement du fichier a été vue 351 fois.
Taille du document: 42 Ko (4 pages).
Confidentialité: fichier public


Aperçu du document


Maxi Arche HTML5 Desktop - Spécifications techniques

Maxi Arche HTML5 Desktop - Spécifications
techniques
Caractéristiques
Le format Maxi Arche est un assemblage de bannières de grande taille permettant de composer
un habillage autour de la page web. La bannière « supérieure » propose une surface d’expression
maximale en poussant le contenu vers le bas lors de son affichage. Le format est doté des
caractéristiques suivantes :








Format uniquement disponible sur la HP Orange.fr.
Associé au rectangle medium.
Bannière « supérieure » à 2 états : ouvert / fermé.
Cliquable sur l’ensemble de sa surface (url unique).
Tracking des clics et des impressions par un tiers possible (clic command + pixel).
Le format Maxi Arche sera diffusé avec une ouverture automatique cappée à 1.
Le format Maxi Arche sera uniquement diffusé dans un contexte « Desktop ».

Ergonomie








Ouverture et fermeture automatique de la bannière « supérieure ouverte » (990x250).
Bouton FERMER impératif sur les bannières « supérieure ouverte ET fermée» (990x250 ET
990x115).
Bouton REVOIR optionnel sur la bannière « supérieure fermée » (990x115).
Affichage automatique et permanent de toutes les autres bannières.
Si la bannière « supérieure » est sonore, le son doit être désactivé par défaut (dérogation
sous réserve de validation éditoriale).
L’activation / désactivation du son peut se faire par clic ou rollover. La présence d’un
bouton de désactivation du son est impérative.
Le format Maxi Arche nécessite, dans sa création et sa mise en page, la prise en compte
des résolutions écran 1024x768 et 1280x960 afin de laisser toujours visibles les messages
importants de l'annonceur (logo, titre, baseline, etc).
o En 1024x768, les colonnes de l'arche disparaissent.
o En 1280x960, les 2 colonnes de l'arche sont tronquées d'environ 50px de chaque
côté.
Ce problème est intrinsèque à la nature de ce format. Il est recommandé d'utiliser la
bannière haute de la Maxi Arche pour incruster les messages indispensables à la
campagne.

Contenu
La Maxi Arche peut embarquer différents types de contenu :



Animation
Vidéo (uniquement dans la « bannière supérieure ouverte »).

Dans le cas où la « bannière supérieure ouverte » exploite de l’animation, la durée de cette
dernière ne devra pas excéder 10 secondes. Dans le cas d’un contenu vidéo dans la « bannière
supérieure ouverte», la durée de la vidéo ne pourra pas excéder 30 secondes.

Orange Advertising - Page 1 sur 4 - 04/02/2016

Maxi Arche HTML5 Desktop - Spécifications techniques

Livraison







1 format HTML haut « ouvert » 990x250 de 200 ko maximum, hors vidéo.
1 format HTML haut « fermé » 990x115 de 150 ko maximum.
1 format HTML gauche 200x1000 de 100 ko maximum.
1 format HTML droite 200x1000 de 100 ko maximum.
1 format HTML rectangle 300x250 de 100 ko maximum.
1 format GIF animé, GIF ou JPG de backup rectangle 300x250 de 35 ko maximum.

Si la « bannière supérieure ouverte » (format HTML haut « ouvert » 990x250) exploite de la vidéo,
ce dernier devra respecter les caractéristiques suivantes :




1 fichier MP4.
30 secondes maximum.
2000 ko maximum.

Vous pouvez, de façon optionnelle, fournir également un code couleur au format hexadécimal qui
sera utilisé pour remplir les zones restées blanches (fond de page). Idéalement, les différents
formats constitutifs de la Maxi Arche doivent fondre vers cette couleur, afin d’obtenir un
ensemble homogène, sans « coupures ».
L’ensemble des éléments doit être livré 1 semaine avant mise en ligne.

Réalisation
Couleur de fond
La couleur de fond de chaque bannière ne pourra pas être la même que celle de la HP du
portail orange.fr (#EEEEEE). Ceci s’explique par le souci de différencier contenu et publicité.

Balise <head>
L’ensemble des fonctionnalités décrites ci-après repose sur un script unique qui doit être ajouté à
la partie <head> du fichier .html, dans chaque élément constitutif du format (5 bannières) :
<script type="text/javascript"
src="http://images.orangepublicite.fr/assets/js/orange_html_ads.js"></scrip
t>

Zones cliquables
Les zones cliquables de toutes les bannières doivent être implémentées de la façon suivante
(exemple sur une balise <a> ) :
<a href="javascript:void(0);" onclick="window.open(OA.getClickTag());return
false;"></a>

Ouverture et fermeture de la « bannière supérieure ouverte » (990x250)
La « bannière supérieure ouverte » doit s’ouvrir et se fermer automatiquement. Pour ce faire, Il
s’agira ensuite d’appeler la fonction suivante, quand la bannière est censée s’ouvrir, en général au
tout début du format :
OA.open();
et quand elle est censée se fermer automatiquement :
OA.close('auto');
Pour que la fermeture automatique du format intervienne au bon moment, il est impératif de
déclencher la fonction lorsque l’animation est terminée. Dans le cas de la diffusion d’une vidéo, il sera

Orange Advertising - Page 2 sur 4 - 04/02/2016

Maxi Arche HTML5 Desktop - Spécifications techniques

alors nécessaire de détecter la fin de la vidéo pour déclencher la fonction de fermeture
automatique.
Cette même fonction sera aussi utilisée pour implémenter le bouton FERMER obligatoire. Les
dimensions de ce bouton ne doivent pas être inférieures à 80x20 pixels. Le code à implémenter est le
suivant :
OA.close('bt_250');
A noter que l’utilisation de ce bouton « FERMER » va replier la « bannière supérieure ouverte »
mais aussi supprimer de la page la Maxi Arche dans sa totalité (à l’exception du rectangle
medium).

Bouton FERMER et bouton REVOIR de la « bannière supérieure fermée » (990x115)
L’ouverture et la fermeture de la bannière « supérieure » est réalisée par substitution des formats
« bannière supérieure fermée » et « bannière supérieure ouverte ». Lorsque la « bannière
supérieure ouverte » arrive à sa fin, cette dernière disparaît pour laisser place à la « bannière
supérieure fermée ». Doivent donc être implémentés dans cette bannière, un bouton FERMER et un
bouton REVOIR (option). Pour ce faire, Il s’agira d’appeler la fonction suivante, lorsque l’on clique
sur le bouton FERMER :
OA.close('bt_115');
et lorsque l’on clique sur le bouton REVOIR :
OA.replay();
L’utilisation de ce bouton « FERMER » va supprimer de la page la Maxi Arche dans sa totalité
(à l’exception du rectangle medium). A noter qu’à chaque ouverture / fermeture, les formats
« ouvert » et « fermé » sont « rembobinés ».

Appel du fichier vidéo
Si la « bannière supérieur ouverte » exploite de la vidéo, le fichier MP4 à livrer sera hébergé dans
le même répertoire que le fichier HTML appelant. Le nom du fichier MP4 doit donc être codé « en
dur » dans le HTML et il ne doit comprendre ni majuscules, ni espaces, ni caractères spéciaux
(accents, symboles, etc …).

Réalisation HTML5
La Maxi Arche HTML5 est compatible avec les technologies dites « HTML5 » et peut exploiter, de
manière générale, tout contenu compatible avec les navigateurs web candidats à la diffusion (cf.
paragraphe Compatibilité).
La Maxi Arche HTML5 sera hébergée par nos soins dans un répertoire unique. Il est donc
indispensable que toutes références vers des éléments externes dans le fichier principal, soient
faites de manière relative.
Nous recommandons d’avoir un minimum de fichiers externes afin de limiter les requêtes http et
diminuer le temps de chargement du format.
La Maxi Arche HTML5 sera diffusée sur une combinaison d’OS et de navigateurs (cf. paragraphe
Compatibilité). Il est donc indispensable d’utiliser des technologies compatibles avec cette
combinaison dans le développement du format.

Orange Advertising - Page 3 sur 4 - 04/02/2016

Maxi Arche HTML5 Desktop - Spécifications techniques

Compatibilité
La Maxi Arche HTML5 sera diffusée en ciblant les systèmes et navigateurs suivants :

Windows




Internet Explorer 11+
Firefox 24+
Chrome 28+

Mac




Firefox 24+
Safari 4+
Chrome 28+

Redirect
Ce format peut être livré en redirect. Si tel est le cas, les seules contraintes à appliquer sont celles
figurant dans les paragraphes caractéristiques, ergonomie et contenu. Tous types de redirects
peuvent être acceptés. Ils doivent cependant pouvoir être testés et intégrer un champ de tracking
des clicks et de cachebuster, pour les macros adserver (DFP).
Un redirect unique, gérant à la fois la Maxi Arche et le Rectangle Medium, sera exigé.
Il est également impératif que le redirect implémente le bouton fermer décrit dans le paragraphe
ergonomie. Ce bouton Fermer (présent pour chaque état de la bannière haute : ouvert et fermé)
supprime le format principal (la Maxi Arche) de la page en cours (seul le 300x250 reste affiché).
Cette fermeture doit être persistante : sur les expositions suivantes seul le 300x250 s’affichera.
Enfin, il est nécessaire de gérer l’aspect responsive de la page. Pour y parvenir, le code suivant
doit être implémenté dans le scope de la page principale :
A l’affichage de l’arche, pour bloquer l’affichage fluide :
document.body.className = document.body.className + ' une-arche';
document.getElementById('div_footer').style.width = '990px';
Hp.main.pubResize('arche', true);
A la fermeture de l’arche (utilisation du bouton fermer), pour revenir à un affichage fluide :
document.body.className = document.body.className.replace('une-arche', '');
document.getElementById('div_footer').style.width = '100%';
Hp.main.pubResize('arche', false);

Orange Advertising - Page 4 sur 4 - 04/02/2016


Aperçu du document specs_maxiarche_HTML5_desktop_04202016 (1).pdf - page 1/4

Aperçu du document specs_maxiarche_HTML5_desktop_04202016 (1).pdf - page 2/4

Aperçu du document specs_maxiarche_HTML5_desktop_04202016 (1).pdf - page 3/4

Aperçu du document specs_maxiarche_HTML5_desktop_04202016 (1).pdf - page 4/4




Télécharger le fichier (PDF)





Documents similaires


specs maxiarche html5 desktop 04202016 1
specs formats applications natives 28012015
specs formats web mobile 13012015
frontpage
sonvideo
presentation windows groupe 3 nassima

Sur le même sujet..




🚀  Page générée en 0.008s