Considerazioni generali su installazione, progettazione e funzionamento della Digital Publishing Suite di Adobe

1. Adobe
Digital
Publishing
Suite
1. Installazione
2. Progettazione
3. Interattività
Matteo Ziviani – IUSVE
“We’re in the midst
of an interaction design
revolution”
Dan Saffer

2. Introduzione
• Adobe Digital Publishing Suite consente
agli utenti di dispositivi mobili di usare
contenuti interattivi in formato rivista
• Si possono arricchire le opere con
contenuti interattivi e consentire al
pubblico di visualizzare gli elementi
multimediali
2

3. Introduzione
• Tutti gli utenti che usano InDesign CS5 o
versioni successive possono creare,
ottenere l’anteprima e condividere
contenuti per la pubblicazione digitale.
• Solo gli utenti che dispongono di
un’iscrizione ad Adobe Digital Publishing
Suite o che ottengono una licenza Single
Edition possono creare visualizzatori
personalizzati per uso commerciale.
3

4. Flusso di lavoro
4

5. Installazione - step 1
5
• Fase 1: installare gli strumenti Folio Producer
 InDesign CS6, eseguire il programma di installazione di DPS Tools
Per InDesign CS5/CS5.5, installare sia gli strumenti Folio Producer che il
pannello Folio Builder
 È richiesto un ID Adobe verificato per accedere al pannello Folio Builder e al
Dashboard
 Se non si dispone di un ID Adobe verificato, visitate
https://digitalpublishing.acrobat.com/
 Se si dispone di un iPad o di un dispositivo Android, installare la versione più
recente di Adobe Content Viewer dallo store (Apple App Store, Google Play
o Amazon Appstore)
Creazione e verifica di un ID Adobe (utenti singoli)
Per creare ID Adobe individuali, visitate https://digitalpublishing.acrobat.com/ e fate clic su Creazione
account.
Registratevi per un account usando un indirizzo e-mail valido. Adobe vi invierà un messaggio di verifica.
Aprite il messaggio ed effettuate la verifica. Usate l’ID Adobe per accedere al pannello Folio Builder o al
Dashboard.

6. Installazione - step 2
6
• Fase 2: creare documenti sorgente in InDesign
 Create documenti InDesign come layout base per i contenuti digitali.
 Con InDesign CS5/CS5.5, per ciascun articolo potete si può creare un layout
verticale e uno orizzontale in documenti separati.
 Con InDesign CS6 si può creare un layout orizzontale e verticale nello stesso
documento.
 Si può limitare la progettazione a un solo orientamento.
 Si possono creare file per gli articoli basati su HTML

7. Installazione - step 3
7
• Fase 3: aggiungere gli oggetti interattivi
 Usare il pannello Folio Overlays per creare e modificare oggetti interattivi e le
finestre all’interno della voce Interattività

8. Installazione - step 4
8
• Fase 4: usare Folio Builder per creare folio e articoli
 Usare il pannello Folio Builder per creare o aprire un folio e aggiungere degli
articoli
 Ogni articolo può avere due layout, per gli orientamenti orizzontale e verticale.
 I folio creati vengono caricati sul Web.
 Adobe Digital Publishing Suite è fornito da Acrobat.com

9. Installazione - step 5
9
• Fase 5: anteprima degli articoli
 L’anteprima del folio può essere fatta sul desktop con Adobe Content Viewer ,
tramite la voce anteprima della finestra Folio Builder
 È possibile anche fare l’anteprima su dispositivi mobili come l’iPad, basta
installare il modulo gratuito Adobe Content Viewer sul dispositivo, quindi
effettuate l’accesso usando lo stesso ID Adobe che si usa per accedere al
pannello Folio Builder.

10. Installazione - step 6
10
• Fase 6: condividere il folio con altri utenti per
l’anteprima
 È possibile condividere con altri utenti che possiedono un ID Adobe il folio per
poterlo visualizzare e testare

11. Installazione - step 7
11
• Fase 7: rendere i folio disponibili ai clienti (solo per
utenti iscritti e Single Edition)
 Con Folio Producer Organizer si può finalizzare il folio e pubblicarlo sul
servizio di distribuzione
 Si può usare Viewer Builder per creare un’app visualizzatore personalizzata da
inviare ad Apple Store, Google Play o Amazon Appworld
 Con la Single Edition, si può creare un’app per edizione singola

12. Installazione - step 8
12
• Fase 8: analizzare i dati dei clienti e aggiungere e
aggiornare folio (solo per utenti iscritti)
 Dopo aver pubblicato il folio, usando la pagina Analisi del modulo Dashboard di
Digital Publishing Suite si può tenere traccia dei dati utente

13. Opzioni di prezzo
13
• Gratuito con InDesign CS5 o versione successiva, si possono installare gli
strumenti Digital Publishing gratuitamente. Creare un folio e visualizzare
l’anteprima sul desktop, su dispositivi mobili e condividerli con altre persone.
È previsto un prezzo solo se si pubblicano e creano app visualizzatore
personalizzate da inviare agli store.
• Single Edition pagando una tantum si può creare un applicazione
personalizzata per l’iPad, contenente un singolo folio.
• Professional Edition prevede una tariffa mensile e consente di creare un
numero illimitato di folio e app visualizzatore personalizzate. Si possono
creare delle app per le piattaforme Android, Amazon e PlayBook. Si
possono inoltre creare app per gli store iPad e Amazon. Nel pacchetto
sono comprese funzioni di reporting analitico di base con cui potete
tenere traccia dei dati utente.
• Enterprise Edition include tutto ciò che è compreso in Professional
Edition e inoltre la possibilità di personalizzare l’interfaccia utente del
visualizzatore, creare server di adesione personalizzati, creare app
enterprise per uso interno e ottenere report analitici dettagliati.

14. Installazione - step 8
14
• Fase 8: analizzare i dati dei clienti e aggiungere e
aggiornare folio (solo per utenti iscritti)
 Dopo aver pubblicato il folio, usando la pagina Analisi del modulo Dashboard di
Digital Publishing Suite si può tenere traccia dei dati utente

15. App visualizzatore
15

16. Esempio magazine
16

17. Progettazione
Digital Publishing Suite
Matteo Ziviani – IUSVE

18. Progettazione documenti
18
• Gli utenti possono ruotare i dispositivi mobili e visualizzare i
contenuti sia con orientamento orizzontale che verticale.
• In fase di progettazione bisogna scegliere se tenere una
visualizzazione orizzontale, verticale o entrambe.
• Questo deve essere tenuto in considerazione al
momento di prendere le decisioni di progettazione.
• Si possono progettare entrambi gli orientamenti in modo
diverso e offrire per ciascuno di essi un tipo di contenuto
differente.

19. Folio e articoli
19
• Un folio è una pubblicazione, come un’edizione di una
rivista mensile o i contenuti di un’app visualizzatore per
edizione singola. È composto di uno o più articoli digitali
• Un articolo è una sezione di un folio
• Un articolo può contenere più pagine e può essere un
documento di InDesign o HTML
• Un folio può contenere più articoli
• Folio Builder è utilizzato per creare folio e articoli
• Folio Overlays è utilizzato per aggiungere gli oggetti
interattivi

20. App visualizzatore
20

21. Layout
21
• In InDesign CS6, si possono includere i
layout orizzontale e verticale nello
stesso documento.
• In InDesign CS5/CS5.5, i layout
orizzontale e verticale devono trovarsi
in documenti separati
• Se un folio è impostato in verticale,
i video a schermo intero possono
anche essere riprodotti in modalità
orizzontale

22. Dimensioni Layout
22
• Per Dimensioni pagina, specificate le dimensioni del lettore del dispositivo.
• I modelli di iPad meno recenti utilizzano il formato 1024x768 pixel
• Il nuovo iPad usa il formato 2048x1536 pixel
• L’area di progettazione effettiva per iPad 1 e 2 è di 1018x768 (o
762x1024) pixel. L’area di progettazione effettiva per il nuovo iPad è di
2042x1536 (o 1530x2048) pixel.
• L’iPhone usa una dimensione di 480x320 e 960x640 pixel
• L’area di progettazione deve essere più piccola perché sul dispositivo
mobile viene ritagliata un’area di 6 pixel sul lato destro della pagina per lo
scorrimento (iPad)
• Per i dispositivi Honeycomb Android l’area di progettazione deve essere
ridotta invece di 48 pixel per la barra di scorrimento
• l visualizzatore per iPad visualizza solo i folio con proporzioni 4:3
• Il visualizzatore per iPhone visualizza solo i folio con proporzioni 3:2

23. iPad retina display
23
• Creare rappresentazioni da 1024x768 e 2048x1536 Quando create le
rappresentazioni dei folio, i modelli di iPad meno recenti visualizzano solo
la rappresentazione da 1024x1536, mentre il nuovo iPad visualizza solo la
rappresentazione da 2048x1536
• Creare solo folio da 1024x768 I folio da 1024x768 producono un buon
risultato visivo sul nuovo iPad, specialmente gli articoli nel formato
immagine PDF. Questo approccio è particolarmente utile per i visualizzatori
per edizione singola, che non supportano le rappresentazioni.
• Creare solo folio da 2048x1536 Questo approccio è sconsigliato. Nei
visualizzatori per più edizioni, i folio 2048x1536 sono visibili solo sul nuovo
iPad. Nei visualizzatori per edizione singola, il contenuto viene rasterizzato
in modo visibile e si possono verificare problemi di prestazioni.

24. Linee guida
24
• Nel documento sorgente non bisogna utilizzare le pagine affiancate ma
solo pagine singole
• Ricordare che per lo scorrimento dell’articolo si visualizzerò una barra di
scorrimento di 6px sul lato destro del dispositivo (o 48px per Android)
• Per evitare file di grandi dimensioni usare immagini di dimensioni
corrette
• Per le immagini interattive usare i formati JPG e PNG
• Per le immagini non interattive si può usare qualsiasi formato (inclusi
PSD, TIFF, AI e JPEG)
• Quando viene creato un articolo o layout, gli oggetti non interattivi pagina
vengono compressi e convertiti in un singolo file PNG, JPEG o PDF.
• Per ottenere la migliore fedeltà dei colori, usate immagini RGB anziché
CMYK o LAB.
• Il testo non deve essere inferiore ai 16 pt
• Gli elementi cliccabili (touch-target) non devono essere inferiori 44 x 44 px

25. Interfacce e gestures
25
• Con l’avvento della tecnologia multitouch, le regole del gioco stanno
cambiando
• L’interazione è più “naturale” e semplice (NUI, Natural User Interfaces)
• L’interazione è data da un insieme di gestures più o meno codificate che
permettono di manipolare gli elementi in modo semplice
• No scrollbar lo scorrimento del dito sullo schermo permette di scorrere il
contenuto in modo del tutto naturale. (i designer Apple hanno anche
introdotto l’inerzia nel movimento), non esiste più la barra di scroll
(point-and-click)
• Zoom In quasi tutti i dispositivi touch
di ultima generazione, i controlli
di zoom sono stati ormai sostituti
da una gesture standard
(avvicinamento/allontanamento
delle dita)
pinch spread

26. Interfacce e gestures
26
• Drag-n-drop I controlli di tipo drag-n-drop, sono ottimi esempi di
interazioni. Si possono trascinare gli oggetti e spostare con un semplice
spostamento del dito

27. Interfacce e gestures
27

28. Attenzione alla posizione delle
mani
28
• Nelle interfacce NUI (quelle touch per intenderci) il dispositivo di input
corrisponde al dispositivo di output (lo schermo in entrambi i casi) questo
rende il tutto più semplice, ma può anche creare problemi: le mani
possono infatti coprire elementi importanti dell’interfaccia.
• Evitate quindi di posizionare le etichette sotto gli elementi di
interazione

29. Non esiste l’hover
29
• Nei device multi-touch l’evento di hover non esiste quindi rendere
immediatamente evidente cosa è interattivo nell’interfaccia e cosa
no. Deve essere chiaro cosa può essere toccato, manipolato, trascinato,
ecc. e cosa no, senza affidarsi al passaggio del mouse sopra di esso.

30. Articoli per lo scorrimento
uniforme
30
• Per i singoli articoli si può attivare la funzione scorrimento uniforme che
è utile per layout lunghi a pagina singola (sommario, riconoscimenti ecc)
• Se la funzione di scorrimento uniforme viene attivata, progettate la pagina
di conseguenza. Ad esempio, per l’iPad, potete creare documenti in
orizzontale e verticale rispettivamente da 1024x2000 e 768x2000.
• Un documento con lo scorrimento uniforme può contenere una sola
pagina
• A causa di limitazioni di memoria, se si crea un articolo con scorrimento
uniforme si può utilizzare il formato immagine PDF solo se l’articolo non
supera due lunghezze di pagina, ad esempio 1024x1500. Se l’articolo è più
lungo di due lunghezze di pagina, ad esempio 1024x3000, viene utilizzato
il formato immagine PNG.

31. Articoli per lo scorrimento
uniforme
31
A scorrimento per la pagina in orizzontale
B scorrimento uniforme orizzontale
C scorrimento per la pagina in verticale
D scorrimento uniforme orizzontale

32. Scorrimento articoli
orizzontale
32
• Si può impostare che uno o più articoli scorrano soltanto in orizzontale, Per
scorrere gli “articoli appiattiti” l’utente dovrà passare il dito sullo schermo
verso sinistra e destra, anziché verso l’alto e il basso.

33. Utilizzo di HTML
33
• Collegamenti a siti Web Si possono utilizzare i collegamenti ipertestuali
o pulsanti per visualizzare un sito Web. Si possono visualizzare i siti Web
nel browser del dispositivo mobile esterno o in un browser in-app in cui gli
utenti fanno clic su un pulsante Chiudi per tornare al folio.
• Sovrapposizioni per contenuto Web Si può creare una sovrapposizione
di contenuto Web per visualizzare un sito Web o file HTML locali all’interno
di un’area di visualizzazione.
• Articoli HTML Invece di creare articoli con documenti InDesign, potete
creare una cartella contenente risorse HTML e importarla come un articolo.

34. Interattività
Digital Publishing Suite
Matteo Ziviani – IUSVE

35. Panoramica
35
• Quando si crea un folio, tutti gli elementi non interattivi presenti su
una pagina vengono compressi in un’unica immagine, di formato PDF,
JPG o PNG
• Se si mascherano o coprono le sovrapposizioni queste compariranno come
elementi superiori nel layout nel folio.

36. Funzioni interattive
supportate
36
• Oggetti con più stati si possono usare oggetti con più stati per creare
presentazioni.
• Collegamenti ipertestuali si possono creare collegamenti ipertestuali di
tipo URL, E-mail e Navto.
• Pulsanti È supportato solo l’evento Al rilascio. Le azioni supportate per
i collegamenti ipertestuali comprendono Vai a prima pagina, Vai a ultima
pagina, Vai a URL, Audio, Video e Vai a pagina. Le azioni supportate per le
presentazioni comprendono Vai a stato, Vai a stato precedente e Vai a
stato successivo.
• Audio Vengono riprodotti i file mp3 inseriti.
• Video Vengono riprodotti i file video supportati (mp4 con codifica h.264).
• Ulteriori sovrapposizioni interattive Potete anche creare
sovrapposizioni di contenuti Web, sequenze di immagini, immagini con
scorrimento e zoom, effetti panorama e cornici scorrevoli

37. Funzioni interattive
supportate
37
A Azioni supportate per i pulsanti dei
collegamenti ipertestuali
B Azioni supportate per i pulsanti delle
presentazioni

38. Funzioni interattive NON
supportate
38
• Animazioni in formato flash (animazioni solo HTML5)
• Alcuni collegamenti ipertestuali I collegamenti ipertestuali Ancoraggio
testo
• Alcune azioni di pulsanti Le azioni di pulsanti Vai a destinazione, Vai a
pagina successiva, Vai a pagina precedente e Mostra/nascondi pulsanti non
sono supportate. Gli eventi Al clic e Al passaggio del mouse non sono
supportati
• Altre funzioni di interattività non supportate I segnalibri, i rimandi e
le transizioni di pagina non sono supportati.

39. Collegamento
39
• I tipi di collegamenti possibili sono:
• Web (http://)
• un’applicazione App Store (itms://)
• un’applicazione Android Market (market://)
• un articolo diverso (navto://)
• Per i collegamenti all’App Store e Google play non selezionare
l’impostazione Apri nel folio
• Un collegamento ipertestuale navto:// consente di passare a un altro
articolo o un’altra pagina nello stesso articolo. Digitare navto:// seguito
dal nome dell’articolo. È possibile impostare anche un numero di pagina,
aggiungete # seguito da un numero. (Tenete sempre presente che la
prima pagina è 0, quindi aggiungendo #2 si passa alla pagina 3).
• Esempio: navto://newsarticle
• Esempio: navto://newsarticle#2 (per passare alla pagina 3)

40. Altri collegamenti compatibili
solo con IOS
40
• Telefono (tel:)
<a href="tel:1-408-555-5555">1-408-555-5555</a>
• Messaggio di testo (sms:)
<a href="sms:1-408-555-1212">New SMS Message</a>
• Per poter creare un collegamento ad un elemento di Itunes Music Store bisogna
utilizzare il tool gratuito online http://itunes.apple.com/linkmaker/ che permette di
recuperare il link desiderato

41. Gestione della memoria
41
• Gli overlay multimediali richiedono molta memoria e si può incorrere in
problemi durante la visualizzazione.
• L’applicazione può diventare lenta, bloccarsi o caricarsi in “tile”
• Il problema è dato dalle pagine con alti contenuti multimediali/overlay e dalle pagine
adiacenti.
• Quando si carica un articolo InDesign carica la pagina visualizzata, quella successiva
la pagina dell’articolo precedente e anche quella dell’articolo successivo. Questo
precaricamento migliora le prestazioni durante la fase di visualizzazioni degli articoli
per lo scorrimento rapido

42. Gestione della memoria #2
42
• Gli articoli a scorrimento uniforme sono divisi in “Tile” per
migliorare le prestazioni
• Le diverse tessere vengono caricate e rimosse dalla memoria come se
fossero singole pagine

43. Cause
43
• I problemi di memoria possono essere dati:
 Pan & zoom con immagini scorrevoli molti grandi e/o nidificate
 Pagine con più sovrapposizioni contemporanee
 Effetti di trasparenza
 Pagine adiacenti con overlay complessi

44. Javascript esterni e cambio
articolo
44
• Se si crea un animazione in javascript che dovrà essere
incorporata in DPS e che conterrà dei pulsanti con la funzione di
cambiare articolo bisogna utilizzare la seguente stringa:
window.location = “navto://nomearticolo”