Informazioni generali all'utilizzo di Adobe inDesign e Digital publishing Suite. Adobe Digital Publishing Suite è una soluzione per creare, distribuire e ottimizzare contenuti e pubblicazioni coinvolgenti per dispositivi tablet.

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

2. Introduzione
• Adobe Digital Publishing Suite consente
agli utenti di dispositivi mobile 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/CS5/CS 5.5, eseguire il programma di installazione di DPS
Desktop Tools
 InDesign CC è integrato con Digital Publishing Suite e consente di passare
direttamente da InDesign a DPS App 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
Window Marketplace)
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 mobile come
l’iPad/Android/Window, 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 Apple 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, Amazon Appstore o Windows Store
 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
• Single Edition è inclusa in Adobe CC e consente agli abbonati di inviare un
numero illimitato di app solo per iPad all’Apple Store (non include la quota
annuale per il programma di Apple Developer)
Per i possessori di Adobe Indesign CS6 è necessario acquistare una licenza
disponibile a € 362.85
• Enterprise Edition offre una soluzione personalizzabile che soddisfa le
esigenze di publishing digitale di editori di contenuti multimediali aziendali,
aziende internazionali e importanti holding pubblicitarie, raggiungendo un
pubblico più ampio e favorendo un maggior coinvolgimento rispetto al
marchio, valore aziendale e visibilità digitale.
Richiedere un preventivo personalizzato

14. Opzioni di prezzo
14
• Professional Edition è la soluzione di publishing per tablet "chiavi in mano" rivolta
ad agenzie pubblicitarie, media ed editori professionali tradizionali. Crea contenuti
coinvolgenti dal design raffinato e pubblicali su numerosi mercati e dispositivi.
Professional Edition è disponibile in abbonamento a rinnovo annuale o mensile. Per
entrambe le opzioni, i prezzi includono i seguenti elementi:
• Tariffa per la piattaforma: quota per accedere ai servizi in hosting di Digital
Publishing Suite
• Tutte le testate di un portfolio editoriale per i clienti
• 5.000 (per l'abbonamento annuale) o 250 (per l'abbonamento mensile) file .folio per
il primo anno di servizio
• Supporto tecnico di livello Gold per accedere ai servizi di assistenza 24 ore su 24, 7
giorni su 7
• Tariffa per il download dei pacchetti .folio: tariffa per la distribuzione e l'esecuzione
delle pubblicazioni sulle varie piattaforme e dispositivi interessati ad ogni download di
file .folio da parte dell'utente
• Abbonamento mensile a € 355
• Abbonamento annuale a € 4.260

15. Tipi di App DPS
15
• App visualizzatore per folio singolo
• In’app visualizzatore per folio singolo, il folio viene integrato nell’app
visualizzatore. Il visualizzatore non dispone di librerie.
• Al momento, potete creare
un’app visualizzatore per
folio singolo per iPad
ma non per iPhone
o dispositivi Android o Windows.

16. Tipi di App DPS
16
• App visualizzatore per folio multiplo
• Per un’app visualizzatore per più folio, potete usare DPS App Builder per
creare un visualizzatore che è sostanzialmente un contenitore. L’app
visualizzatore che inviate non
include alcun contenuto.
• Con Folio Producer Organizer
potete quindi pubblicare i folio
sul servizio di distribuzione Adobe.
I clienti useranno la libreria
del visualizzatore per scaricare
i folio a cui hanno aderito.

17. Tipi di App DPS
17
• App visualizzatore per più folio con iscrizione
• Un’app visualizzatore con iscrizioni comprende un pulsante Accedi e
un’opzione Libreria che consente al cliente di selezionare il tipo di
iscrizione desiderata.

18. Tipi di App DPS
18
• App visualizzatore con firma Enterprise
• Gli utenti aziendali iscritti possono creare delle app per iPad
esclusivamente destinate alla distribuzione interna. Un’app visualizzatore
iPad con firma Enterprise viene distribuita solo all’interno dell’azienda e
non può essere scaricata dall’Apple Store

19. Tipi di distribuzione
19
• Tramite un app store pubblico: Create un'app e inviatela ad Apple App
Store, Google Play Store o Windows Store.
• Tramite app store pubblico con distribuzione limitata (solo
Enterprise) Create e inviate un’app con iscrizione allo store Apple, Google
o Windows. Usate un server di adesione per definire quali folio possono
essere scaricati e visualizzati dagli utenti in base al loro account di
accesso.
• Tramite server privato (solo Enterprise)
• Create un’app in-house e caricatela in hosting protetta da un firewall.

20. Progettazione
Digital Publishing Suite
Matteo Ziviani – IUSVE

21. Progettazione documenti
21
• Gli utenti possono ruotare i dispositivi mobile 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.

22. Folio e articoli
22
• 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

23. Layout
23
• 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

24. Multiple Device
• Per Dimensioni pagina, specificate le dimensioni del lettore del dispositivo.
• I modelli di iPad SD utilizzano il formato 1024x768 pixel
• Il nuovo iPad HD usa il formato 2048x1536 pixel
• Se si crea un folio di formato 1024x768 questo verrà visualizzato in tutti e
due i modelli
• Se si crea un folio di formato HD questo verrà visualizzato solo sui modelli
iPad display retina
Per creare una pubblicazione sia per modelli SD che HD ci sono due strade:
• Creare un singolo folio con articoli multi-rendition, cioè creare articoli con
formato PDF. Utile per le app single edition
• Creare due folio separati uno per SD e uno per HD (che devono avere lo
stesso nome folio). Disponibile solo per app multi-folio.
24

25. Folio multi-rendition
• Creare il folio con la dimensione del
dispositivo più piccola.
• La versione del visualizzatore deve
essere superiore a 23
• Il formato predefinito PDF
• Se per esempio vogliamo fare un app
per
iPad compatibile con tutte le versioni
creeremo un folio di dimensione
1024x768 px.
25

26. Folio multi-rendition #2
• Il formato dell’articolo deve essere PDF
(questa opzione, permette di ottimizzare
le immagini all’interno del pdf con una
risoluzione di 108 ppi a differenza delle
versioni precedenti)
• Usare, quando possibile elementi
vettoriali per slideshows e cornici
scorrevoli
• Includere asset in SD e HD
(utilizzando una cartella nidificata e
nominata “HD” contenente le
immagini ad alta risoluzione)
26

27. Multi folio
• Il secondo metodo è realizzare due folio con lo stesso ID ma dimensioni
diverse. Se si utilizza l’app visualizzatore con iscrizione, deve essere
identica anche la data di pubblicazione.
27

28. Linee guida
28
• 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

29. Interfacce e gestures
29
• 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

30. Interfacce e gestures
30
• 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

31. Interfacce e gestures
31

32. Attenzione alla posizione delle
mani
32
• 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

33. Non esiste l’hover
33
• 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.

34. Articoli per lo scorrimento
uniforme
34
• 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.

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

36. Scorrimento articoli orizzontale
36
• 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.

37. Utilizzo di HTML
37
• 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.

38. Interattività
Digital Publishing Suite
Matteo Ziviani – IUSVE

39. Panoramica
39
• 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.

40. Funzioni interattive supportate
40
• 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 o in streaming.
• Video Vengono riprodotti i file video supportati inseriti o in streaming
(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

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

42. Funzioni per articoli
42

43. Funzioni per visualizzatore
43

44. Funzioni per visualizzatore
44

45. Funzioni Interattive
45

46. Collegamento
46
• I tipi di collegamenti possibili sono:
• Web (http://)
• un’applicazione App Store (itms://)
• Library (goto://ApplicationViewState/library)
• un articolo diverso (navto://)
• Per i collegamenti gli store 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)

47. Collegamento
47
• È possibile utilizzare anche collegamenti relativi
• Saltare all’ultimo articolo (navto://relative/last)
• Saltare all’ultima pagina dell’ultimo articolo (navto://relative/last#last)
• Saltare al quinto articolo del folio (navto://relative/4)
• Saltare alla terza pagina del quinto articolo (navto://relative/4#2)
• Saltare all’ultimo articolo (navto://relative/last)
• Pagina precedente dello stesso articolo (navto://relative/current#previous)
• Ultima pagina dello stesso articolo (navto://relative/current#last)
• Ultima pagina dello stesso articolo (navto://relative/current#last)
• Ultima pagina dello stesso articolo (navto://relative/current#last)

48. Altri collegamenti compatibili
solo con IOS
48
• 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

49. Gestione della memoria
49
• 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

50. Gestione della memoria #2
50
• 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

51. Cause
51
• 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

52. Javascript esterni e cambio
articolo
52
• 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”

53. Per ulteriori approfondimenti
pratici
53
• L’app “DPS tips” scaricabile dallo store, contiene tutorial sull’uso
di adobe digital publishing suite

54. Contatti
Matteo Ziviani
m.ziviani@sanzeno.org
zivianimatteo@gmail.com
Tw: @matteoziviani
In: Matteo Ziviani 54