adobe digital publishing suite (dps)
DESCRIPTION
Considerazioni generali su installazione, progettazione e funzionamento della Digital Publishing Suite di AdobeTRANSCRIPT
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”