Scarica Epub con layout fluido. e più Appunti in PDF di Computer Graphics solo su Docsity!
Progettazione grafica per il digitale
Libro cartaceo e digitale: 2 tecnologie. Interazioni nel web così come nel cartaceo, esempio interazioni con note, richiami, glossario, Ovviamente epub con layout fisso e mobile. Nell’ebook si lavora e si progetta in blocchi, che rimandano all’iper testo, e permettono all’utente di poter utilizzare un sistema di lettura diverso da quello originale. Anche link esterni. Il lettore ha sempre una grande importanza, può modificare tutto, dal corpo del carattere, al carattere diverso, tramite anche link ipertestuali. La lettura dell’ebook su più dispositivi, che mettono in atto altri meccanismi. INDESIGN FILE PER LA STAMPA (Creare gli Stili paragrafo o carattere per poter fare poi dei fogli stile per poi la realizzazione dell’e-pub) Dalla cornice di testo nel nostro documento, inserire il testo. File > Inserisci > Scelgo documento > Apri Stili di paragrafo e stili di carattere (stili di oggetto, dopo). Per i numeri di pagina, o per i titoli a giro conviene usare e creare un’altra pagina Mastro. La MASTRO B, basandola sulla Mastro A, per inserire elementi diversi. Poi nelle pagine fare applica mastro B o altri. Se nel mio documento ci sono degli stili ben definiti e voglio cambiarli, oppure voglio vedere se nel documento c’erano parti in corsivo: Modifica > Trova e sostituisci > Clicco nella lente per cercare > Trova impostazione formato > Formati base carattere > Stile font > italic o bold o ecc. e poi > Trova successivo e vedo tutte le parti in corsivo Per cambiare le parti in corsivo, andrò a crearmi uno stile di carattere per cambiarle, questo perché nell’applicazione del mio stile di paragrafo, non mi cambierà poi quello di carattere. Creo lo stile di carattere. Trova e sostituisci Cerca > Impostazione formato, formato stile base > italic > Ok e poi faccio di sotto > Sostituisci formato > Lente (casella trova) > Opzioni stile > Stile di carattere > quello che ho creato e poi faccio trova e sostituisci. Nell’ E-pub, tutto quello che c’è nella pagina mastro non viene riprodotto e né visualizzato.
Non troviamo dei numeri di pagina, nemmeno delle testatine, e non troviamo nemmeno una gabbia precisa o specifica. Abbiamo solo alcuni parti viste come indice. Ma è importante l’utilizzo della nostra cornice di testo, per far scorrere fluidamente tutto il nostro testo. FILE E-pub (ricordati che si lavora in px) File > Nuovo documento > Dispositivo mobile > Formato iPad: 1024x768 > non ha senso mettere le pagine affiancate (lavoreremo sulla pagina singola) > Margini: 100px > NO margini al vivo > NO altre indicazioni > Spazio tra colonne: 12px > crea File > Inserisci Come si esporta un file? File > Esporta > Salva come > E-pub con scorrimento del testo, stabilire nelle impostazioni che programma si vuole usare per visualizzare il file subito dopo l’esportazione (Adobe Digital Edition) Poco importa se il testo in InDesign sembra far iniziare i capitoli dopo, ricorda sempre degli stili paragrafo che hai, e che quindi nell’E-pub non verranno visualizzati così. Andiamo a modificare il nostro stile di paragrafo riferimento, non più di quello precedente. Doppio click sullo Stile Normal che importo con il file, e cambio le mie varie. Modifica > Trova e Sostituisci con l’italic come prima. Verifica preliminare del documento? Pannello di verifica preliminare in basso. Cerchiamo gli errori di riferimento, anche errori del testo. Apro pannello > clicco nelle 3 linee e facciamo > Definisci profili > faccio + > E-book > e segno COLLEGAMENTI, TESTO TUTTE E DUE, > Salvo e faccio > Ok. E se poi riapro il pannello, vedo che nel mio nuovo profilo, mi dice se ho applicato lo stile o meno, quindi mi segna tutti gli errori (impostazione locale testo). Mi creo uno stile di carattere (corsivo). E poi, o clicco sullo stile nel pannello preliminare e clicco quello che mi dà sbagliato e vado ad applicare lo stile carattere, oppure uso la funzione Trova e Sostituisci. Adesso dobbiamo fare altre modifiche. Come dare le giuste impostazioni agli stili di paragrafo? Gli stili del nostro documento, li convertiremo tutti in foglio stile. Adesso prepariamo i nostri stili per essere importati. Andiamo nello stile di paragrafo normal > doppio click > si aprono le opzioni > Tag per l’esportazione > Tag per l’esportazione: p > Classe: (qua possiamo mettere poi se abbiamo fatto una pagina web) body , > Spuntato: genera CSS > Spuntiamo anche: dividi documento (solo EPUB) e > faccio OK Stessa cosa per lo stile di carattere > Tag per l’esportazione: em > Classe: italic > Genera CSS > e faccio OK Per quanto riguarda i titoli e sottotitoli, conviene creare degli stili di paragrafo per il Sommario , infatti nella finestra altri stili troviamo quelli relativi allo stile di paragrafo.
Possiamo anche inserire un nostro indice interno, sempre o all’inizio oppure alla fine del nostro documento. Il testo giustificato non va assolutamente bene. Anche la possibilità di poter vedere la cover. Le colloco così a caso nel documento portandola nelle pagine. Faccio una prima prova con Esporta. Quando apro il documento su Adobe Digital Edition, vediamo che le immagini saranno tutte collocate alla fine del documento di riferimento, ma non è un errore di Indesign. Vado su Indesign per lavorare sulle immagini. Come dobbiamo inserirle? Dobbiamo ancorare l’immagine in quel specifico posto. Inseriamo l’immagine nel nostro documento, ma portiamola non all’interno delle pagine, ma fuori. Cliccando sulle immagini, vediamo che c’è un quadratino azzurro collocato in alto all’immagine verso l’angolo destro > quindi tenendo premuto SHIFT trasciniamo l’immagine nel testo dove vogliamo collocarla, il testo in automatico scenderà a sua volta. E facciamo una prova di Esportazione. Vediamo al solito cosa succede su Adobe Digital Editions. Da dispositivo a dispositivo le cose possono cambiare. Su qualsiasi oggetto che andremo a inserire nel nostro documento, dobbiamo necessariamente creare dei criteri per il loro giusto inserimento. Che tipo di risoluzione deve avere la mia immagine? Selezioniamo l’immagine > Oggetto > Opzioni di esportazione oggetto > EPUB e HTML, tutte le voci sono disattivate, > Conserva l’aspetto di layout: Rasterizza contenitore > Risoluzione: 150 > Qualità: Alta > Metodo: Linea di Base > Formato: stesso formato dell’immagine che abbiamo importato > Dimensione: Rispetto al flusso del testo. (In questo modo rasterizzeremo le immagini), facciamo al solito le prove su Esporta e per vedere su Adobe Digital Editions, fai lo stesso procedimento in tutte le immagini, compresa anche l’immagine di copertina. Se voglio inserire un’immagine al centro, creo uno Stile paragrafo per le immagini > Rientri e spaziatura > Allineamento al centro. Col cursore poi scendo sotto l’immagine tenendolo attivo e applico al cursore lo stile paragrafo delle immagini, vedrò che il cursore mi si porta al centro, e poi porto e trascino l’immagine. Faccio sempre una prova su Esporta. Adesso sotto le immagini voglio mettere una didascalia, e applicandomi lo stile delle immagini sempre col cursore, potrei scrivere didascalia img4, quindi metterla sotto la immagine, poi vediamo cosa succede su Adobe Digital Edition, ma sarà ovviamente tutto sballato, potrei anche trovarmi la didascalia nella pagina seguente. Dobbiamo fare qualcosa , quindi possiamo pensare di collegare le immagini alla didascalia, creiamo una cornice di testo sempre fuori dalle pagine > testo da inserire “didascalia immagine 4” > adattiamo la cornice al contenuto, > allineiamo fuori dalla pagina la didascalia all’immagine > Allinea al centro > Allinea all’oggetto chiave > possiamo anche già stabilire che distanza dare dall’immagine alla didascalia, adesso dovremmo > Raggruppare i due oggetti e creare un unico gruppo e poi ancorare tutto all’interno del nostro documento, ancorandolo al testo. Poi vado sulla finestra Oggetto > Opzioni di esportazione oggetti, e dato che ho un gruppo tra immagine e testo, devo mettere > Risoluzione a 300, così almeno il testo è ben visibile. Faccio Esporta e vedo che succede, in questo caso la didascalia sarà collegata all’immagine. Ovviamente dobbiamo però anche creare uno Stile di Paragrafo alla didascalia per dargli le impostazioni che vogliamo. Come distanziare le immagini e le didascalie dal testo?
Vado sullo stile di paragrafo del sottotitolo (nel caso in cui ho l’immagine sotto il sottotitolo) > Sottotitoli (nello stile di paragrafo già creato) > Rientri e spaziatura > Spazio dopo: 10px, anche senza immagini ovviamente devo fare quest’operazione, per distanziare così le porzioni di testo nel documento. Per distanziare le immagini anche quelle senza didascalia, dobbiamo creare un altro Stile paragrafo per immagini per distanziare le stesse > Nuovo stile di paragrafo > Immagini margini > Rientro e spaziatura > sotto e sopra 10px. Selezioniamo l’immagine di riferimento e applichiamo lo stile. Poi facciamo la prova di Esporta. OPPURE dove troviamo l’ancora nelle immagini clicchiamo col tasto destro e facciamo > Opzioni oggetto ancorato > Allineamento: Allineamento testo > Sopra la riga di testo > Spazio prima e dopo 10px. Oggetto da inserire in un altro documento = Tabelle negli Ebook? Tabella > Crea Tabella > Quante righe, quante colonne, e poi crearla. Anche a questa tabella si possono applicare degli stili ed inserire degli elementi testuali. Finestra > Stili > Stili di tabella > E dare le varie impostazioni > Applichiamo il nostro stile, possiamo comunque intervenire in qualsiasi caso, la possiamo trattate come oggetto, e mi incollo di volta in volta le porzioni di testo. Possiamo ovviamente anche intervenire dal lato codice. Poi faccio la prova con Esporta. Faccio una prova di duplicazione e faccio Oggetto > Opzioni di esportazione oggetto > EPUB e HTML > Formato: PNG > Conserva aspetto di layout: Rasterizza Contenitore > Risoluzione: 300 > Dimensione: Rispetto al flusso del testo. E poi faccio sempre una prova con Esporta per vedere come si vede. (Tutto questo se dobbiamo rasterizzare la tabella, e quindi se vogliamo usarla come immagine). Dal lato codice > Apriamo con SIGIL > Abbiamo più pagine in formato XHTML che corrispondono ai capitoli di riferimento del nostro documento, basta selezionare nell’anteprima di Sigil l’elemento di riferimento che ci riporta al testo. Possiamo anche utilizzare il tag di riferimento per modificare i vari elementi del documento. Aggiungendo o modificando i tag. Andando sulla cartella Styles e modificando i vari tag anche e codici, per ottimizzare il tutto. Dobbiamo anche rasterizzare l’immagine di copertina. Non fare ulteriori modifiche per la copertina. Collegamenti ipertestuali? Per il Sommario e varie, per avere dei rimandi. Aggiungo alla fine una pagina > mi creo un mio Sommario e vado a copiare all’interno le voci dei titoli dei vari capitoli > Finestra > Interattività > Collegamenti ipertestuali > selezione la porzione del testo che voglio collegare, genero la mia destinazione > 3 lineette in alto del pannello > Nuova destinazione collegamento ipertestuale > Tipo: Ancoraggio testo > Nome di quello selezionato e di quello che voglio collegare > Ok. > Poi scendo nel mio Sommario creato > seleziono il mio titolo di riferimento > Collegamenti ipertestuali > 3 lineette > Nuovo collegamento ipertestuale > Collegato a: Ancoraggio testo > Ancoraggio testo: A quello di riferimento > Stile che prendo dagli stili di Collegamento ipertestuale che mi si crea in automatico negli stili di carattere (questo crea in automatico uno stile di carattere denominato così). Se clicco sull’ancora che ci sono nelle voci del pannello Collegamenti ipertestuali, vedo che già mi collegherà alla parte di testo collegata al sommario, in questo caso quello che ho fatto sarà corretto. Prova su Esporta. Dallo Stile di carattere posso ovviamente fare tutte le modifiche che voglio, formattandolo a mio piacere. In tag di esportazione > non fare alcune operazione.
(Esperimento > Scrivo “collegamento google” > Sul pannello dei collegamenti ipertestuali > Faccio le 3 lineette orizzontali > Nuovo collegamento ipertestuale > Collega a: URL > URL: www.google.it > OK > Vedo così che potrò anche collegare direttamente una pagina. Esporta e faccio così la prova.) Adesso Tornando a Indesign > Layout > Stili Sommario > Elimino quello che già mi dà e faccio Nuovo > Stile Sommario: e-book > Clicco sulla sezione Altri stili > Capitolo e sottotitolo faccio Aggiungi > Sotto in Livello:2 > in Tra la voce e il numero: scegli quello che più ti piace. E faccio OK Poi > Layout > Sommario > Ok, e mi crea il sommario e lo trascino nel testo, poi Salva ed Esporta > Generali > Sommario per navigazione: Livelli multipli (Stile sommario) > Stile sommario: e-book > OK (Da Adobe Digital Edition) posso vedere nell’indice dalle 3 lineette che sarà strutturato tutto il sommario con i rispettivi sottotitoli e capitoli. Su Adobe c’è il livello primo del capitolo che prevale sull’altro, e il secondo del sottotitolo che è accollassato al 1. Oppure Se poi faccio > Vado nel mio Sommario creato manualmente dove ci sono le voci dei sottotitoli e a tutte le voci, do lo stile paragrafo non di sottotitolo, ma quello di paragrafo base, la situazione cambierà. Vado quindi dopo su Esporta > in questo caso su Adobe Digital Edition mi darà soltanto le voci dei capitoli e dei sottotitoli. Oppure Un’altra variante su Indesign > Layout > Stili Sommario > Nuovo > Stile Sommario: e- book2 > Stile: nessuno > Aggiungi capitolo e sottotitoli > Livello:1 > Ok > Layout > Sommario > OK > me lo trascino e vedo poi che cambiamenti mi farà con Esporta > Generali > Stile sommario: ebook2 > in questo caso l’indice non farà nessuna distinzione tra capitoli e sottotitoli avendo messo come livello 1, e quindi non facendo nessuna distinzione. Poi se Aggiungo uno stile sommario nello stile paragrafo, potrò anche formattarlo come voglio io, in Tag per esportazione > Tag: Automatico > Classe: sommario > OK. Poi ritorno su Layout > Stili Sommario e modifico il sommario che ho scelto, mettendo negli stili, lo stile che mi sono appena creata > Modifica stile sommario > Stile: stile sommario > ok > poi faccio Esporta > in Stile Sommario > metterò quello in cui ho applicato il mio stile paragrafo del sommario, su Adobe Digital Edition, questo stile che abbiamo dato sarà visibile soltanto nel sommario che metteremo fisicamente all’interno del documento (quello che abbiamo messo alla fine).
- Tabella che raffigura i corrispettivi pixel in punti tipografici, e quindi la giusta scelta per una migliore visualizzazione del testo. Le percentuali rappresentano l’aumento e l’ingrandimento del testo nei vari dispositivi. (Con la copertina vedremo il max-width: 100% ). Sulla fase di Esporta, non abbiamo ancora analizzato la voce Metadati (che analizzeremo dopo). Se andiamo su File > Info file > vediamo che ci sono delle info importanti da aggiungere al nostro documento, come chi è l’autore, il titolo, la copertina ecc. Quindi su Info file > Titolo del documento: L’isola del tesoro > Autore: Robert Louis Stevenson > Descrizione: breve di cosa è e a quali categorie appartiene > Parola chiave: Narrativa, romanzo… > Stato Copyright: coperto da copyright > OK > Poi vado su Esporta > in Metadati > ritroviamo quello che abbiamo fatto > ritroviamo anche un Identificatore, titolo, descrizione, data, Editore, Oggetto > OK, quando vado su Adobe Digita Edition vedo nella libreria che ci sono le info messe da indesign. Adesso manca la copertina > Su Esporta > Generale > Copertina: Scegli immagine > Posizione file > Scelgo l’immagine che ho. (Possiamo anche spingersi ad un’altezza di 1000px, anche se sono corretti 800px per la larghezza no). Nel codice, in relazione alla copertina ci sono dei vari codici, come il max-width 100%, che se non lo fa indesing, lo potremo aggiungere e sistemare noi in Calibre. Metto l’immagine. > OK e metterà l’immagine come copertina. Verifichiamo poi nella libreria di Adobe Digital Edition, e Adobe Digital ce la fa vedere anche come prima pagina. (Porzione di codice da mettere su Calibre per la giusta risoluzione dell’immagine di copertina
Dopo. Selezioniamo tutto il testo (Modifica > Seleziona tutto) clicco su Normal tasto destro: Applica Normal e cancella impostazioni locali. Il pannello di verifica preliminare darà 0 errori. Tutti gli altri stili che sono presenti nel pannello degli stili di paragrafo potremo così cancellarli tutti, dato che abbiamo applicato il nostro normal. Nei collegamenti ipertestuali: potremo anche cancellarli se non funzionano, o se funzionano. Impostazione in MODALITÁ LIBRO: conviene lavorare sui singoli capitoli. Quindi, suddividiamo già in diversi file di testo, ovvero i diversi file per capitolo, dopo di che, il prof ha creato, dei vari capitoli su indesign, e anche uno per l’indice. Apre i 3 capitoli e l’indice, quindi i 4 file indesign contenenti queste informazioni. Quindi per ogni capitolo, creare dei vari stili di paragrafo e di carattere. Capire come lavorare in modalità libro. Quindi prendiamo per esempio un capitolo, creiamo ad esempio gli stili in un unico capitolo. Stili per testo principale, titolo, sottotitolo ecc…, stile di carattere per corsivo, bold, ecc. Ricorda sempre di selezionare poi tutto il testo e applicare il nostro stile col tasto destro da normal. Negli stili di carattere, abbiamo degli stili di elenchi, e potremo anche cancellarli non incidendo sul testo stesso. Ma dobbiamo fare questa cosa per ogni capitolo? NO, indesign ci aiuta molto. Prendo un altro capitolo, e non ho nessuno stile, o meglio tutti col paragrafo base, possiamo sfruttare tutti gli stili che abbiamo usato nel primo capitolo, quindi nel primo capitolo facciamo bene tutto quello concerne il capitolo stesso per poterlo poi riportare negli altri capitoli. Decidere praticamente tutto nel primo capitolo. Andiamo nell’altro capitolo. Vado negli stili di paragrafo > 3 lineette orizzontali > Carica stili di paragrafo > scelgo il file che mi serve per importare gli stili di paragrafo e di carattere (Quindi il primo capitolo) > Apri > seleziono quali stili io voglio importare > Ok > e così mi saranno riportati tutti, e potrò così poi applicare gli stili, quindi prima applico con il trova e sostituisci il corsivo, e poi quelli di paragrafo, quindi poi farò la stessa cosa per tutti i capitoli. Poi creiamo i collegamenti ad un ipotetico indice > Creiamo l’indice su un nuovo documento indesign, con i vari collegamenti ipertestuali > Scrivo quindi: capitolo 1 e titolo, capitolo 2 e titolo, capitolo 3 e titolo e così via. Dobbiamo collegare questo sommario ai vari capitoli e quindi alle varie sezioni del mio documento > vado su capitolo 1 nel documento > seleziono testo del titolo > collegamenti ipertestuali > 3 lineette > Nuova destinazione collegamento ipertestuale > Tipo: Ancoraggio testo > Nome: quello/ > Stessa cosa nel secondo capitolo/ stessa cosa nel terzo capitolo > poi mi sposto nel documento dell’indice > seleziono il titolo > collegamenti ipertestuale > lineette > Nuovo collegamento ipertestuale > Collega a: ancoraggio testo > Documento: capitolo 1 > Ancoraggio testo o il titolo e faccio Ok/ stessa cosa sulle altre voci del sommario. Salva, e se clicco nelle ancore del pannello, mi riporta nel capitolo di riferimento. Stiamo lavorando in documenti diversi: adesso dobbiamo realmente collegare i vari documenti, e quindi crearne uno solo > File > Nuovo > Libro (definiamo tutto il nostro epub) > Salva con nome e dove salvarlo > il documento spunta vuoto > Clicco su + , seleziono i vari documenti indesign: capitolo 1 2 3 e indice > (sarà messa in evidenza una sorgente degli stili anche). Dopo > nel documento/pannello del Libro > 3 lineette orizzontali > Esporta libro come Epub > e diamo poi tutte le nostre opzioni al pannello di Esporta. E su Adobe Digital Edition vedremo che funzionerà tutto.
Ora dobbiamo modificare ovviamente le varie componenti dello stile di sommario, nella creazione del libro durante la fase di esportazione dell’epub, indesign crea un indice di suo, prendendo come voce i titoli dei documenti. Bisogna scegliere le immagini inerenti al documento, Come immagine di copertina? ATTENZIONE, TUTTI GLI STILI DI PARAGRAFO DEVONO AVERE GLI STESSI NOMI.
