2014 - adobe digital publishing suite (dps)

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

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

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

Flusso di lavoro

4

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

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

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.

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.

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.

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

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.

Progettazione

Digital Publishing Suite


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.

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

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

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

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

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

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

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

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

• 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

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

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.

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.

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

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.

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.

Interattività

Digital Publishing Suite


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.

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

Funzioni interattive supportate

41

A Azioni supportate per i pulsanti dei

collegamenti ipertestuali

B Azioni supportate per i pulsanti delle

presentazioni

Funzioni per articoli

42

Funzioni per visualizzatore

43

Funzioni per visualizzatore

44

Funzioni Interattive

45

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)

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)



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

http://itunes.apple.com/linkmaker/

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

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

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

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”

Per ulteriori approfondimenti

pratici

53

• L’app “DPS tips” scaricabile dallo store, contiene tutorial sull’uso

di adobe digital publishing suite

Contatti

Matteo Ziviani

[email protected]

[email protected]

Tw: @matteoziviani

In: Matteo Ziviani 54

mailto:[email protected]

mailto:[email protected]

https://twitter.com/matteoziviani

it.linkedin.com/pub/matteo-ziviani/5a/b82/288