Post on 19-Jul-2015
transcript
Fixed layout con
InDesign
Nozioni di base
Esportazione “pura”
Script per gestire il processo di lavoro
Metodi di esportazione
Nozioni di base
File da aggiungere vi è la necessità di indicare al device che l’ebook che
dovrà visualizzare dovrà avere un layout fisso
com.apple.ibooks.display-options.xml
<tag meta=“viewport” />
modifiche al CSS
ovviamente, il file non dovrà superare i 50 MB...
Riprendiamo l’xml...
com.apple.ibooks.display-options.xml
da inserire nella cartella “META-INF”, in cui sarà indicato che
l’opzione “fixed-layout” sarà settata al valore true
<meta> tag
Il meta tag viewport si mette solitamente all’interno del tag <head>,
in ogni pagina .xhtml che comporrà le parti del libro
Interessano due attributi: name e content
Nell’attributo name definiamo il valore “viewport”
nell’attributo content definiamo:
- la larghezza della gabbia (=width)
- l’altezza della gabbia(=height)
ATTENZIONE A NON METTERE LE MISURE IN PIXEL!
Proprietà body nel CSS la proprietà body deve contenere
NECESSARIAMENTE le stesse misure che abbiamo
specificato nei vari tag <meta name=“viewport” />
questo perchè il CSS complessivo gestisce il lavoro
complessivo, e differenti misure potrebbero far sballare
il risultato finale
Definire la misura
complessiva della pagina Si può utilizzare la finestra “Imposta documento” per
vedere rispettivamente la larghezza(=width) e la
lunghezza(=height), le stesse che poi andremo a
inserire come valori nella viewport e nel css
InDesign è fatto per il fixed? NO, la finestra di esportazione descritta prima è valida
solo per il “flusso scorrevole”.
Infatti, il fixed layout è indicato solo per gli eBook con sola grafica (cataloghi, photo-book, fumetti)
Quindi, partendo da un file .indd dobbiamo elaborareun’altra soluzione
se abbiamo a che fare con un photo-book, non curandocidel testo possiamo nascondere il testo ed esportare solo le immagini
negli altri casi, dobbiamo valutare le dimensioni precise dei frame con cui abbiamo a che fare
Esportazione “pura”
Ricorrere a un “template” Se sappiamo come è strutturato un ePub, possiamo
creare noi un piccolo ePub vuoto, che conterrà i nostri
contenuti che andremo a esportare con InDesign
o con Acrobat...
Concetto di “esportazione” Nel processo di lavorazione dell’ePub classico,
abbiamo studiato la finestra di esportazione che ci
consente di tramuntare un file .indd in un .epub
Adesso però dobbiamo esportare in altri modi i nostri
contenuti
utilizzando l’esportazione .jpeg, per trasformare le nostre
pagine in file immagini che poi andiamo a inserire nelle
pagine del nostro libro
utilizzando l’esportazione in .html
Ricorrere a un “template” ogni immagine viene ripresa all’interno dell’xhtml,
e riproposta come una singola pagina del nostro
fixed ePub
Ricorrere a un “template” ogni numero, quindi, corrisponde a un’immagine
Esportazione in HTML Stesse operazioni come visto nell’esportazione
classica in ePub
Esportazione in JPEG decidere la risoluzione
Esportazione in JPEG su CC
esportazione delle singole immagini dell’area di lavoro
inserimento in ogni pagina xhtml e “fissaggio” con il
CSS
Esempio Esempio di una pagina html: il contenuto è formato
da un’unica immagine che mostra il singolo contenuto
esportato
Questo vale anche per le caselle di testo
Problemi valutare attentamente l’esportazione in immagini,
confrontando la risoluzione finale sullo schermo del
device su cui testiamo il fixed ePub
bisogna strutturare la forma, scalando la gabbia che
contiene i nostri contenuti (l’esempio di prima mostra
una gabbia dal margine inferiore ampio)
Script per gestire il
processo di lavoro
Provare dei nuovi Script reflowable
ShowTextOverrides.jsx
PerfectPrepText_ASK.jsx
PerfectPrepText_DO.jsx
Fixed-layout CSSGeometry.jsx
consente di determinate le misure esatte di ogni text frame selezionata
Text_2_Layer.jsx
consente di trasportare tutte le text frame su un altro livelloautomaticamente
LinkRename.jsx
consente di rinominare tutti i collegamenti interni relativi a unasingola immagine
LinkRename.jsx il sito dove reperire lo script è tomaxxi.com
...si trovano altri interessanti script!
Selezioniamo l’immagine in questione
nella nuova finestra, inserire il nuovo percorso (o il
nome del file)
La finestra presenta scritte in inglese, poiché è stato
creato all’estero
l’immagine viene salvata di default in .tif (Tagged image
format)
Problemi... Se il collegamento all’immagine non è presente di
default, è probabile che lo script non parta, rimandando
sullo schermo la finestra seguente
Metodi di esportazione
Metodo 1: nascondere il testo Se abbiamo poche caselle di testo, possiamo farlo
manualmente, trascinando l’elemento interessato nel
nostro nuovo livello
Se abbiamo troppe caselle di testo dovremo ricorrere al
nostro script di fiducia Text_2_layer.jsx, che ci
consentirà di spostare tutte le caselle in un livello già
esistente oppure di crearne uno apposito
Text_2_layer https://github.com/GitBruno/Novelty/blob/master/Text_2
_Layer.jsx
Nel link sopra ritrovate tutto il codice sorgente,
andando sul link sotto cliccate su “Download Zip”
il risultato sarà un’enorme cartella contenente
molteplici script. A noi interessa lo script
Text_2_Layer
Creiamo un nuovo livello “Testo”
Clicchiamo sullo script “Text_2_layer”, che ci porta le
caselle di testo sul nuovo livello
Per nascondere il contenuto di un testo bisogna
cliccare sul simbolo dell’occhio(=“rendi visibile”)
accanto a ogni livello
Adesso sono visibili solo le immagini
Volendo, si potrebbe creare nuove caselle di testo sul
livello delle immagini, ed esportare quelle
Metodo 2: esportare le pagine Con CSSGeometry.jsx si prendono le misure esatte per
vedere dove andranno collocati i vari frame
Si esporta ogni singola pagina in formato .jpeg
Utilizzando una struttura “template”, si inseriscono
manualmente le varie foto esportate nelle singole
pagine
si definisce la misura complessiva della pagina
Nell’esempio, la composizione è formata da 7 singoli
cerchi: se dobbiamo fare un fixed epub dobbiamo
prendere la singola posizione di ognuno di essi e
scriverlo in un apposito CSS
Cliccando sullo script CSSGeometry.jsx, abbiamo in un
secondo tutte le misure (con relative a ogni singola
immagine contenuta nelle singole aree di lavoro
le misure sono contenute in una casella di testo
creata in automatico dallo script
Analisi struttura CSS
position: gestisce la posizione dell’elemento
top: posizione a partire dall’alto
left: posizione a partire da sinistra
width: lunghezza dell’elemento (in px)
nel commento, quello compreso tra
/* e */, è specificato se l’elemento
in questione è una casella di testo
o un’immagine
l’ID (nell’esempio, #p22-3) è segnato così:
- p22 si riferisce alla pagina
- i vari -1, -2, -3 si riferiscono all’elemento
Analisi struttura CSS
Due caselle di testo (la seconda è una casella di testo con due colonne).
Siamo a pag.8
in alto a sinistra, nella barra generale, troviamo le
misure relative a ogni singola casella, cliccando
sempre su di essa
Larghezza=widthX=LeftY=Top
Attenzione ai lavori già
impostati in alcuni casi, dipende dal settaggio impostato, le
misure possono “sballare” (come nel caso precedente),
ma di solito non vi sono problemi...
Metodo 3: importare un pdf
dentro un file .indd con lo script PlaceMultipagePDF.jsx possiamo inserire
i contenuti di un PDF all’interno dell’ambiente di lavoro
di InDesign; in particolare per ogni pagina del PDF
corrisponderà una pagina di ID
Se possibile, apriamo un’area di lavoro vuota
clicchiamo sullo script, e selezioniamo il file interessato
lo script ci consente di aprire il lavoro su un’altra area
di lavoro vuota (se non l’abbiama creata prima)
man mano i contenuti vengono importati come se ogni
pagina PDF fosse un’unica immagine
Risultato finale
Problemi... abbiamo solo un’unica pagina xhtml, che contiene le
nostre pagine importate da PDF
Extractpages.jsx utilizzare lo script per estrarre le singole pagine
Extractpages.jsx (per chi
utilizza la cs6 o più...) utilizzare lo script omonimo
risultato
Dopo.... creare una struttura libro apposita per mettere
all’interno i singoli file creati
si aggiorna in automatico
In definitiva... soluzione ottima per file complessi, poichè il contenuto
di n-caselle viene inglobato dentro una grande casella,
di conseguenza possiamo avviare l’esportazione delle
pagine HTML/JPEG
alcuni risultati non sono il massimo della risoluzione,
complice anche la “rasterizzazione forzata dei testi”...
Metodo finale: ePub Crawler uno script che ci consente di automatizzare tutto il
lavoro studiato finora
analizza le posizioni delle immagini e delle caselle di
testo, e crea un CSS automatico per ogni pagina
Importa il risultato dentro le pagina xhtml
infine, crea e mette il tutto dentro una “struttura ePub”
crea il file display-option.xml in automatico
lo script è disponibile su Rorohiko.com
prima di ogni cosa, controllare che ci sia il file
ePubCrawler.jsxbin
è lo script che avvia il processo, se non c’è scaricate
nuovamente lo .zip
Gli file che interessano (qui ho importato proprio tutti,
anche i superflui) sono
la cartella ePubCrawlerTemplate, che contiene la nostra
“struttura ePub”
formulas.jsx per personalizzare il nostro lavoro
eCanCrusher è una buona
alternativa di ePub Zip/Unzip
Due caselle di testo e due immagini (consideriamo lo
QRcode come un’immagine)
tre caselle di testo
...manca qualcosa?
Se il file non è salvato, ci pensa lo script a ricordarci di
farlo
Il processo di esportazione prevede diverse fasi
il testo
le immagini
lo sfondo
generazione delle pagine
il risultato non è il Fixed ePub completo, bensì la sua
struttura
ecco perchè “in omaggio” vi è il creatore dell’ePub
finito: possiamo utilizzare quello oppure ePub
zip/unzip
Struttura del fixed ePub la struttura è simile a
quella vista prima
nel template
ogni singolo CSS si
riferisce alla pagina
xhtml di ogni singola
area di lavoro
Notiamo le stesse strutture viste prima durante il lavoro
con CSSGeometry.jsx
Risultato
Risultato Altra struttura, ma il concetto rimane uguale...
Problemi... occhio a come vengono sistemate le caselle di testo
se possibile, lasciare un buon margine