Adobe Digital PublishingSuite

1. Installazione

2. Progettazione

3. Interattività

Matteo Ziviani – IUSVE

“We’re in the midst of an interaction design revolution”

Dan Saffer

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

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, eseguire il programma di installazione di DPS ToolsPer 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.

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

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à

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

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.

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

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

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

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.

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

App visualizzatore

15

Esempio magazine

16

Progettazione

Digital Publishing Suite

Matteo Ziviani – IUSVE

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.

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

App visualizzatore

20

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

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

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.

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

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

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

Interfacce e gestures

27

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

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.

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.

Articoli per lo scorrimento uniforme

31

A scorrimento per la pagina in orizzontaleB scorrimento uniforme orizzontaleC scorrimento per la pagina in verticaleD scorrimento uniforme orizzontale

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.

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.

Interattività

Digital Publishing Suite

Matteo Ziviani – IUSVE

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.

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

Funzioni interattive supportate

37

A Azioni supportate per i pulsanti dei collegamenti ipertestuali

B Azioni supportate per i pulsanti delle presentazioni

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.

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)

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

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

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

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

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”