Logiciel HYPE
Le logiciel Hype vous permet de créer facilement et rapidement des contenus animés et interactifs compatibles avec La Presse+ et cela, sans connaissance en programmation. Le contenu HTML5 généré par Hype fonctionne sur tous les navigateurs modernes ainsi que sur les tablettes tactiles et téléphones intelligents. Avec Hype, tout le monde peut créer du matériel riche en interactivité.
Guide d'utilisation
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
