Specifiche - RCS Communication Solutions

 PRINT DIGITAL INTERACTIVE – Specifiche tecniche Dichecosasitratta:
Il Print Digital Interactive (PDI) è un arricchimento di un materiale pubblicato sull’edizione stampa ed è una creatività che sfrutta le caratteristiche offerte da HTML5, CSS3 e le potenzialità offerte da Javascript. E’ possibile utilizzare diversi strumenti e tecniche all’interno del PDI ma è importante seguire le specifiche ed i suggerimenti indicati in questa guida. I Device interessati a questo prodotto sono i tablet ed in particolare IPAD 2+ Supportoetest
Vi ricordiamo che per eventuali richieste di chiarimento è previsto un supporto help desk: dal lunedì al venerdì dalle ore 10.30 alle ore 13.00 e dalle ore 14.00 alle ore 18.30 e risponde al numero 02 2584 6074 I tecnici sono a disposizione per la supervisione della creatività in ambiente di test in modo da dare una valutazione su eventuali criticità o problemi prima della pubblicazione . Tempiemodi
I materiali devono essere inviati entro cinque giorni lavorativi prima rispetto alla data di pubblicazione. I materiali multimediali relativi all’offerta Print Digital Interactive (piattaforma Tablet) devono essere inviati, come tutti i materiali destinati alle edizioni cartacee, al portale: http://inpagina.rcs.it Requisiti

Il formato atteso è un file zip standard in cui sono presenti tutti i file che fanno parte della creatività (è possibile organizzare i file in sottocartelle) e non deve pesare più di 4Mb.  Il file principale deve essere chiamato “index.html” e non deve essere contenuto in nessuna cartella.  Il formato HTML5 deve essere compatibile con il browser Mozzila 5.0  All’interno dei file html i riferimenti alle risorse esterne (immagini, css, javascript, video, ecc) devono puntare a file presenti nell’archivio per permetterne la visualizzazione anche offline.  L’eventuale video deve essere fornito in formato MPEG‐4 (.mpg) con le seguenti specifiche tecniche:  Codec video: HS264  Dimesioni: si veda la tabella dei formati (al max 640x360)  Data Rate: 600 Kbps  Frame Rate: 25 fps (pal)  Audio: AAC, H264  Data Rate: 48Kbps  Sample Size: 16  Sample Rate: 22050  Channels: Stereo N.B: La visualizzazione delle pagine è differente a seconda dell’orientamento utilizzato sul Device. In verticale (portrait) verrà visualizzata una sola pagina mentre in orizzontale (landscape) verrà visualizzata l’accoppiata.. [PDI] Print Digital Interactive Maggio 2016 PRINT DIGITAL INTERACTIVE – Specifiche tecniche Realizzazionemateriali
Quando il Device viene ruotato, la WebView che contiene il PDI viene ridimensionato ed è per questo che non è possibile utilizzare le media queries. E’ possibile utilizzare un metodo responsive tenendo conto dell’aspetto (aspect ratio) dell’ingombro, gestire tramite script l’adattamento o, nel caso più semplice ma efficace, produrre due creatività da gestire come suggerito in seguito con le dimensioni riportate nella seguente tabella: Formati per Corriere della Sera verticale in px orizzontale in px
Formato Cod.Form. Torre 0314 135,5
201
292
432
214
316
Quadrotto 0310 135,5
143
292
308
214
225
Maxi quadrotto 0414 182
201
391
432
286
316
Junior page 0418 182
259
391
556
286
407
Piede 0607 275
99,5
590
215
432
157
Pagina PG 275
404
590
866
432
634
Mezza pagina orizz. PGMO 275
201
590
432
432
316
Finestrella di 1a pagina* X004 68
79
148
171
108
125
Doppia finestrella di 1a pagina* X112 138
79
297
171
218
125
1,325 BaseMM
AltezzaMM
width
1,811
height width height
Formati per La Gazzetta dello Sport verticale in px orizzontale in px
Formato Cod.Form. Torre = ¼ pagina 0314 135,5
201
292
432
214
316
Quadrotto 0310 135,5
143
292
308
214
225
Maxi quadrotto 0414 182
201
391
432
286
316
Piede 0607 275
99,5
590
215
432
157
Pagina PG 275
404
590
866
432
634
Mezza pagina orizz. PGMO 275
201
590
432
432
316
Finestrella di 1a pagina* X004 68
79
148
171
108
125
Doppia finestrella di 1a pagina* X112 138
79
297
171
218
125
1,325 BaseMM
AltezzaMM
width
1,811
height width height
*ATTENZIONE: in caso di finestrella o doppia finestrella in prima pagina, non può essere accettato il formato video in quanto non sarà possibile avviarlo automaticamente. [PDI] Print Digital Interactive Maggio 2016 PRINT DIGITAL INTERACTIVE – Specifiche tecniche ## ATTENZIONE ## Se il materiale viene creato come suggerito, aggiungere la seguente stringa all’interno del tag head: <meta name="viewport" content="user‐scalable=no, width=XXX" /> Dove XXX sta per la larghezza indicata per il formato da utilizzare. Esempiodigestionedellarotazione(Javascript):
Dopo aver creato i layout per le due visualizzazioni differenti, utilizzare il seguente script all’interno del tag head di un file index.html vuoto facendo le opportune modifiche e inserendo il framework jquery per esempio in una cartella js che permetterà di far caricare successivamente il file html corretto per l’orientamento attuale : <script src="./js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
function carico() {
switch(window.orientation) {
case 0://portrait
window.location.replace('index_p.html');
break;
case -90://landscape
window.location.replace('index_l.html');
break;
case 90://landscape
window.location.replace('index_l.html');
break;
case 180:// portrait
window.location.replace('index_p.html');
break;
case undefined:// portrait
window.location.replace('index_p.html');
break;
}
}
</script>
All’interno del file index.html inserire nel tag body il caricamento della funzione precedentemente riportata. <body onLoad="carico()">
</body>
Per completezza, inseriremo in entrambe le versioni di file (portrait e landscape) il seguente codice nel tag head: <script src="./js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
function ricarico() {
window.location.replace('index.html');
}
</script>
All’interno del tag body inserire il caricamento della funzione precedentemente riportata. <body onorientationchange="ricarico()">
</body>
In presenza del video, è necessario che sia inserito lo script di Stop Animation al fine di rendere automatico fermarlo ed avviarlo durante lo sfoglio delle pagine. A titolo di esempio, di seguito le due funzioni, da inserire nell’HTML5, per effettuare lo start e stop del video: function startAnimation(){
document.getElementsByTagName('video')[0].play();
}
function stopAnimation(){
document.getElementsByTagName('video')[0].pause();
[PDI] Print Digital Interactive Maggio 2016 PRINT DIGITAL INTERACTIVE – Specifiche tecniche document.getElementsByTagName('video')[0].currentTime=0; // torna all’inizio
return true;
}
[PDI] Print Digital Interactive Maggio 2016