Guide Technique : Outils et gabarits
Bienvenue dans notre section dédiée aux développeurs ! Vous y trouverez une collection complète de codes de développement HTML/JS, des gabarits de départ pour accélérer vos projets, ainsi que des conseils pratiques pour vous guider vers les meilleures pratiques.
Specs Techniques
Les langages acceptés sont :
HTML,CSSetJavaScript(incluantjQuery).L'utilisation des codes
PHPouASPn'est pas autorisée.Jeu de caractères :
UTF-8Un seul fichier
HTMLest accepté.Le fichier HTML doit se nommer
index.html.Votre code
HTMLfinal ne doit pas faire référence à des fichiers inexistants. Laissez uniquement les fichiers (images, polices, etc.) utilisés dans le code de votre publicité.
Tous caractères spéciaux sont prohibés dans la nomenclature de vos fichiers. Assurez-vous de les retirer s'ils sont présents.
Seul les caractères suivants sont acceptés dans la nomenclature de vos fichiers:
A-Za-z0-9_-Les caractères spéciaux présents dans les URL doivent être encodés via un Uniform Resource Identifier (URI).
Les espaces ne sont pas permis dans la nomenclature de vos fichiers ou de vos URL.
L’application La Presse+ est sensible à la case. Veillez à garder la même mise en forme entre les noms des fichiers et leurs références dans le fichier
HTML.
Exemples de nomenclature acceptée:
nomDeVotreImage.jpgnom-de-votre-image.jpgnom_de_votre_image.jpg
Exemples de nomenclature refusée:
nom de votre image @x2.jpgnom de votre image @x2 (copie).jpgnom de votre image avec des caractères spéciaux & @x2.jpg
Aucun fichier, lien ou script externe n'est autorisé (y compris la librairie jQuery).
Exemple :<script src='//code.jquery.com/jquery-3.7.1.min.js'></script>Les librairies utilisées doivent se retrouver dans votre dossier assets.
Exemple :<script src='assets/script.js'></script>Aucun script ou appel à un script JavaScript ne doit être placé après la balise de fermeture
</body>.N’utilisez jamais la propriété
visibility: hidden;pour cacher du contenu audio (en CSS ou en JS).Tous les fichiers présents dans le code de votre publicité doivent être inclus dans le dossier final de votre publicité.
Si vous utilisez la librairie jQuery, nous vous recommandons de télécharger la dernière version de celle-ci sur le site de jQuery →.
Une copie de la librairie doit être intégrée dans le dossier final de votre publicité.
L'utilisation de
jQuery.noConflict()n'est recommandée que si vous utilisez plusieurs librairies utilisant le signe$.
Les ouvertures de liens dans les publicités doivent se faire avec la syntaxe suivante:
<a href='https://www.votresite.ca'></a>Les appels suivants ne seront pas acceptés (s’ils sont utilisés, ils seront ignorés par l'application et votre publicité ne pourra pas être activée) :
Code non autorisé :window.open('https://www.votresite.ca', '_self'); window.parent.location.href = 'https://www.votresite.ca'; window.location = 'https://www.votresite.ca';L'attribut
target="_blank"n'est pas supporté dans l'application. Veuillez les retirer de vos balises<a>avant la livraison de votre matériel.Lorsque le bouton Envoyer un courriel → est utilisé, assurez-vous d'utiliser le paramètre
mailtodans votre attributhref.
Par exemple :<a href="mailto:votreadresse@votredomaine.ca">
Outils et éléments conflictuels
Adobe Animate
Adobe Muse
Adobe Flash
Cocos Creator
Canva
Google Web Designer
GSAP / GreenSock
Phaser
Sencha Animator
Microsoft Silverlight
IMPORTANT
Pour vous assurer d'une compatibilité optimale de votre publicité sur nos plateformes
Téléchargez nos gabarits officiels →
L'attribut target="_blank" n'est pas supporté dans l'application. Veuillez les retirer de vos balises <a> avant la livraison de votre matériel.
Il n’est pas possible d’insérer un bouton permettant un partage ('Aimer', 'Envoyer', 'Suivre', 'S’inscrire' ou 'Commenter') sur les réseaux sociaux dans votre publicité. Vous pouvez toutefois diriger les lecteurs vers une page Facebook en utilisant l'icône Facebook disponible dans notre iconographie. Exemple d'URL acceptée :
http://www.facebook.com/VotreCompagnieLes liens menant vers des applications Meta ne sont actuellement pas compatibles avec La Presse+. Ces liens ont la forme suivante:
https://www.facebook.com/nom-du-compte/app_[serie de chiffres].
Google Maps impose des restrictions quant à l'utilisation de son API. Celles-ci sont en deçà du volume de lecteur quotidien de La Presse+, ce qui a pour effet de causer des pertes d'affichage si la limite est atteinte. Pour plus de renseignements, consultez la documentation officielle de Google →
Google Maps Geolocation impose des restrictions quant à l'utilisation de son API. Celles-ci sont en deçà du volume de lecteur quotidien de La Presse+, ce qui a pour effet de causer des pertes d'affichage si la limite est atteinte. Pour plus de renseignements, consultez la documentation officielle de Google →
Les restrictions du système d'exploitation d'Apple nous empêchent de pouvoir modifier le volume d'un média (audio ou vidéo) en JavaScript. Pour plus de renseignements, consultez la documentation officielle d'Apple →
Il est interdit d’utiliser la fonction de déclenchement automatique pour les extraits audio.
IMPORTANT
Il est possible d’utiliser l’option d’autoactivation de la vidéo dans le format plein écran. Voir l’information dans l’interaction vidéo. En savoir plus →
Il n’est pas possible d’encoder vos contenus vidéo, ou images en base64. Cette procédure entre malheureusement en conflit avec les autres médias de La Presse+.
Il n'est pas permis d’actualiser une publicité au moyen des codes suivants:
<a href='#'>Rejouer</a><a href='javascript:window.location.reload();'>Rejouer</a><a href='javascript:history.go(0);'>Rejouer</a>Il n’est pas permis d’utiliser une balise du type ancre avec un attribut href vide. Ceci peut entraîner des problèmes d’ouverture de liens externes qui sont placés ailleurs dans la publicité.
<a href='#'></a>
Pour procéder à une réinitialisation d'une publicité, il faut replacer les éléments et réinitialiser les variables de votre code javascript.
Les composantes de la tablette telles que la caméra, le micro et le gyroscope ne sont pas accessibles via l'application La Presse+. L'intégration de la réalité augmentée ou certains types d'interaction requérant ces composantes est donc impossible dans vos publicités.
Hype
Les publicités créées avec Hype sont acceptées dans tous les formats proposés et sont soumises aux mêmes spécifications techniques générales que les autres types d’annonces.
Les animations et les médias ne doivent pas se déclencher seuls. Les lecteurs doivent avoir le choix de les activer ou non lors de la consultation de leur édition.
En format plein écran, une zone équivalente à 20 % du format publicitaire doit présenter un visuel statique et libre de toute interaction.
Nous recommandons fortement d’intégrer le texte de votre publicité au moyen d'une image (
jpg,png, etc.).Les filtres (Flou, Sépia, Saturation, Teinte, Luminosité, Contraste, etc.) ne sont pas fonctionnels sur iOS. Veillez à ne pas les utiliser.
Évitez d'utiliser des polices personnalisées dans vos fichiers Hype. Si vous décidez d’utiliser une police personnalisée (
CSS) ou provenant de Google Fonts, celle-ci sera remplacée par une police « équivalente » au sein de la tablette du lecteur. Compte tenu du nombre de modèles de tablette compatibles avec La Presse+, nous ne pouvons malheureusement pas vous informer de la police qui sera présentée sur chaque type de tablette.Il est nécessaire de nous fournir le fichier source de votre projet. Ce dernier porte l'extension
.hype. Les fichiersPIE.htcetHYPE.ie.jsne sont pas pris en compte dans le poids de la publicité.Lors de l'exportation de votre projet en HTML5, il est important de décocher les cases « Create enclosing folder » et « Show Built with Hype ».
Vous devez également décocher l'option « Optimiser automatiquement à l'exportation » pour chacune des images présente dans votre publicité et disponible dans le panneau « Bibliothèques de ressources ».
Dans le format plein écran, cette zone formée d'une bande de 135 px placée au bas et d'une autre de 75 px placée sur la droite doit être libre d'interactivité.
Cette surface qui facilite le changement d’écran doit être statique et donc, sans interaction. De plus, les éléments utilisés en pied de page tels le logo, le « +WEB » et/ou l’appel à l’action doivent demeurer fixes.
Seule la dernière version disponible sur le site Tumult est compatible avec La Presse+. Vous pouvez télécharger cette version au http://tumult.com/hype →. Les précédentes versions et les versions Bêta de Hype ne sont malheureusement pas compatibles. Aucune rétrocompatibilité n'est assurée si vous utilisez une autre version du logiciel.
Dans les options Mobile (premier onglet Inspector), sélectionnez l'option « Don't set viewport » afin de vous assurer qu’aucun élément n’entre en conflit avec l’affichage de votre publicité dans La Presse+.
Pour ajouter un lien externe vers un site internet cochez la case « Ouvrir dans une nouvelle fenêtre ».
Pour ajouter un fichier vidéo dans votre publicité :
Enregistrez votre projet sous le nom
index.Double-cliquez sur l'icône permettant l'activation de la vidéo.
Cliquez sur l'icône crayon.
Ajoutez le code suivant:
<a onclick="playVideo('video')" data-prevent-touch="" style="width:100%; height:100%; display:block; background:transparent"></a>
N’ajoutez pas d'action sous OnMouse Click.
Nommez votre première scène "
1".Double cliquez sur l'icône qui renvoie vers la scène initiale (le x).
Cliquez sur l’icône crayon.
Ajoutez le code suivant:
<a onclick="closeVideo('video')" data-prevent-touch="" style="width:100%; height:100%; display:block; background:transparent"></a>
N’ajoutez pas d'action sous OnMouse Click.
Ajoutez à la boîte vidéo (dans la scène
MOVIE):
<video ontimeupdate="trackVideo()" width="100%" height="100%" controls="" preload="metadata" id="video" onended="closeVideo('video')">
<source src="index.hyperesources/Nomdevotrevideo.mp4">
Votre navigateur ne supporte pas la vidéo.
</video>Appuyez sur le bouton "Éditer la balise HTML
<head>" qui se trouve dans l’inspecteur de document. Entre les balises<head>et</head>, ajoutez ce code:
<script>
// Fonction qui permet de démarrer la vidéo */
function playVideo(id) {
// Instruction pour aller vers la scène où se trouve la vidéo
HYPE.documents['index'].showSceneNamed('MOVIE');
// Instruction pour démarrer la vidéo
setTimeout(function () {
document.getElementById(id).play()
}, 0);
resetTrackingVariables();
}
// Fonction qui permet de fermer la vidéo
function closeVideo(id) {
// Instruction pour arrêter la vidéo
document.getElementById(id).pause();
document.getElementById(id).webkitExitFullscreen();
// Instruction pour retourner vers la scène initial
HYPE.documents['index'].showSceneNamed('1');
}
var vidElm;
var tracked_1;
var tracked_25;
var tracked_50;
var tracked_75;
var tracked_100;
var videoCursor;
var videoDuration;
var firstSecond;
var firstQurt;
var secondQurt;
var thirdQurt;
var trackPerc;
var trackPercentage;
function myCallback(hypeDocument, element, event) {
// run code here
vidElm = document.getElementById('video');
tracked_1 = false;
tracked_25 = false;
tracked_50 = false;
tracked_75 = false;
tracked_100 = false;
//position de lecture de la video en secondes.
videoCursor;
videoDuration = 6;
firstSecond = videoDuration / videoDuration
firstQurt = videoDuration / 4;
secondQurt = firstQurt * 2;
thirdQurt = firstQurt * 3;
trackPerc = vidElm.currentTime * 100 / videoDuration;
trackPercentage = Math.trunc(trackPerc);
}
if ("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
"type": "HypeSceneLoad",
"callback": myCallback
});
function resetTrackingVariables() {
tracked_1 = false;
tracked_25 = false;
tracked_50 = false;
tracked_75 = false;
tracked_100 = false;
}
function trackVideo() {
videoCursor = Math.trunc(vidElm.currentTime);
videoDuration = vidElm.duration;
firstSecond = videoDuration / videoDuration;
firstQurt = videoDuration / 4;
secondQurt = firstQurt * 2;
thirdQurt = firstQurt * 3;
//position de lecture de la video en secondes et millisecondes.
//videoPreciseCursor = vidElm.currentTime.toFixed(2);
trackPerc = vidElm.currentTime * 100 / videoDuration;
trackPercentage = Math.trunc(trackPerc);
if (videoCursor >= firstSecond && videoCursor < firstQurt) {
if (!tracked_1) {
tracked_1 = true;
console.log("%c Custom_video_0.1sec", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_0.1sec');
}
}
if (videoCursor >= firstQurt && videoCursor < secondQurt) {
if (!tracked_25) {
tracked_25 = true;
console.log("%c Custom_video_25pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_25pc');
}
}
if (videoCursor >= secondQurt && videoCursor < thirdQurt) {
if (!tracked_50) {
tracked_50 = true;
console.log("%c Custom_video_50pc ", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_50pc');
}
}
if (videoCursor > thirdQurt) {
if (!tracked_75) {
tracked_75 = true;
console.log("%c Custom_video_75pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_75pc');
}
}
if (trackPercentage >= 98) {
if (!tracked_100) {
tracked_100 = true;
console.log("%c Custom_video_100pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_100pc');
}
}
}
</script>ATTENTION:index est le nom sous lequel vous avez créé votre projet.MOVIE est le nom de la scène où se trouve votre vidéo.
Il est important de respecter les noms attribués et la casse pour que l'intégration fonctionne.
Exportez votre publicité en respectant le nom de projet index.
Placez votre vidéo au format
.mp4dans le dossier index.hyperesources au nom donné préalablement. (ex:Nomdevotrevideo.mp4)Testez la publicité.
L'interaction Accordéon n'est pas compatible avec le logiciel Hype.
La fonctionnalité Audio du logiciel Hype n'est pas compatible avec l'application de La Presse+
La Presse+ vous propose de télécharger le plugin pour Hype 4 gratuitement.
Bouton légal intégré:
Ajouter un bouton légal directement dans votre publicité à même le logiciel Hype.Export facile pour La Presse+:
Le plugin vous permettra également d'exporter votre publicité enHTMLen passant par lemenuFichier>Exporter en HTML5>La Presse+...cette action créera votre publicité au format.zip.
Comment l'installer
Télécharger le fichier
.zipici→.
(ou prendre la dernier version disponible sur le site de Tumult →)Décompresser le fichier
.zip.Glisser et déposer le fichier obtenu dans le logiciel
Hype 4.Redémarrer Hype afin que les modifications soient prises en compte.
Contactez-nous
