Epub - Corso CIERRE Edizioni

34
Pubblicazion i digitali Breve introduzione al formato ePub Corso di aggiornamento Cierre Gruppo Editoriale Via Ciro Ferrari 5 Caselle di Sommacampagna (VR) “content presentation should adapt to the user rather than the user having to a particular representation of content” EPUB 3.0 Specification * Matteo Ziviani

Transcript of Epub - Corso CIERRE Edizioni

Page 1: Epub - Corso CIERRE Edizioni

Pubblicazioni digitaliBreve introduzioneal formato ePub

Corso di aggiornamento

Cierre Gruppo EditorialeVia Ciro Ferrari 5 Caselle di Sommacampagna (VR)

“content presentation should adapt to the user rather than the user having to a particular representation of content”

EPUB 3.0 Specification

“content presentation should adapt to the user rather than the user having to a particular representation of content”

EPUB 3.0 Specification**Matteo Ziviani

Page 2: Epub - Corso CIERRE Edizioni

Tipologie di e-book

Facciamo chiarezza su alcune definizioni

Page 3: Epub - Corso CIERRE Edizioni

Il formato epub

È un formato standardizzato per lo scambio e la distribuzione di pubblicazioni e documenti esclusivamente digitali.

Adatto dove l’elemento preponderante è il testo.

Un ePub definisce, rappresenta e codifica in modo semantico i contenuti e li distribuisce in un singolo file compresso (“.epub”) leggibile da diversi reader

Page 4: Epub - Corso CIERRE Edizioni

Confronto con il pdf

Page 5: Epub - Corso CIERRE Edizioni

Epub 2 vs Epub 3

Page 6: Epub - Corso CIERRE Edizioni

Epub 2 vs Epub 3 #2

Page 7: Epub - Corso CIERRE Edizioni

Comparazione tra device

Page 8: Epub - Corso CIERRE Edizioni

Anatomia di un epub

Un epub è creato utilizzando HTML (xhtml5), lo stesso linguaggio di descrizione utilizzato per le pagine web, CSS (Cascading Sheet Style) per la gestione grafica degli elementi e Javascript per poter aumentare eventualmente l’interazione con l’utente, invece tutti i file di configurazione per la visualizzazione della pubblicazione sono in formato XML.

Il vantaggio di utilizzare queste tecnologie già note nel mondo del web porta ad avere un ampio range di lettori e-reader hardware e software compatibili.

Page 9: Epub - Corso CIERRE Edizioni

Il futuro? Streaming book

• La filosofia di base è “books as data” cioè insieme di dati e “content negotiation” cioè il server invia i contenuti adattati alle condizioni del device

• Quindi è un libro dove i contenuti sono divisi in “pezzi” e che risiedono su un server

• I dati verranno inviati, tramite la rete, come pacchetto unico, il quale risponderà alle caratteristiche del reader

Page 10: Epub - Corso CIERRE Edizioni

Streaming book

Invio delle

caratteristiche

Ricezione

contenuti

Invio dellecaratteristiche

Ricezionecontenuti

Ricezione

contenuti

Invio delle

caratteristiche

Ricezionecontenuti

Invio dellecaratteristiche

Page 11: Epub - Corso CIERRE Edizioni

Tradotto

Il testo risiederà su un server, dove potrà contenere anche traduzioni in diverse lingue.

Quando un reader apre il “contenitore” del libro, il server invierà il testo in funzione della lingua settata nelle preferenze, invierà le immagini di formato, risoluzione e colore adeguati al reader, layout adattati alla dimensione del display e infine se presenta video e/o audio, file del formato corretto, dimensione e compressione

Page 12: Epub - Corso CIERRE Edizioni

Come lavorano gli editori?

Software di impaginazione

oppure

Software di impaginazione+ Plug-in terze parti

Conversione(manuale o automatica)

Page 13: Epub - Corso CIERRE Edizioni

Come lavorano gli editori?

DocBook XML, TEIAsciiDoc

Altre tipologie di formati

+ eventuali arricchimenti

Page 14: Epub - Corso CIERRE Edizioni

Dall’autore all’editore

Altre tipologie di formati

Autore

Redattore

.doc / .docx

XML + XSLT+ Framework

Page 15: Epub - Corso CIERRE Edizioni

Cos’è HTML?

• È un linguaggio di Markup. Cioè applicare delle etichette (tag) per descrivere gli elementi in modo corretto.

Perché?• Logica Semantica

• Formato standard e compatibilità

• Adattabile

Page 16: Epub - Corso CIERRE Edizioni

Esempio

<h1>Ebook, il declino degli eReader e l’ascesa dei tablet</h1>

<p>Non sempre l’innovazione tecnologica paga. Lo sa bene l’americana <strong>Barnes &amp; Noble</strong>, che nel suo ultimo trimestre ha visto le perdite nel mercato digitale mangiarsi i profitti delle sue storiche (nonché fisiche) librerie.</p>

Page 17: Epub - Corso CIERRE Edizioni

Come si scrive un tag

ELEMENTI<tag />

TAG ELEMENTO CON ATTRIBUTI

<tag attributo=“valore” […] />

CONTENITORI<tag > contenuto vario </tag>

TAG CONTENITORI CON ATTRIBUTI

<tag attributo=“valore” […] > contenuto vario </tag>

Page 18: Epub - Corso CIERRE Edizioni

Cos’è CSS?

• È un insieme di regole che applicano la veste grafica a uno o più documenti HTML

Perché?• Selettori diversi per applicare la grafica (id,

classi, tag)

• Usa il concetto di cascata

• È possibile creare elementi e layout responsivi

Page 19: Epub - Corso CIERRE Edizioni

Esempio

h1 {

color: #F00;

text-align: center;

page-break-before: always;

}

p {

font-size: 1em;

line-height: 1.3em;

text-align: right;

}

.evidenziazione {

background-color: #FF0;

padding: 2px;

}

Page 20: Epub - Corso CIERRE Edizioni

Come si scrive uno stile

SELETTORE {

attributo: valore;

attributo: valore;

attributo: valore;

[…]

}

Page 21: Epub - Corso CIERRE Edizioni

HTML e HTML+CSS

Page 22: Epub - Corso CIERRE Edizioni

File di configurazione opf

• È chiamato Package Document

• Ha estensione “.opf”

• Diviso in tre parti

Metadata: contiene le informazioni riguardanti la pubblicazione ed è utile per le biblioteche/librerie per classificare la pubblicazione

Manifest: è lista di risorse che compongono la pubblicazione

Spine: determina l’ordine di visualizzazione e di lettura delle risorse

Page 23: Epub - Corso CIERRE Edizioni

Esempio

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" version="2.0">

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">

<meta name="cover" content="copertina.jpg" />

<dc:title>Epub 3.0 Guida</dc:title>

<dc:creator>Matteo Ziviani</dc:creator>

<dc:description>Fasi per realizzare una pubblicazione elettronica</dc:description>

<dc:publisher>Narcissus Self Publishing</dc:publisher>

[…]

</metadata>

<manifest>

<item id="CoverImage" href="CoverImage.xhtml" media-type="application/xhtml+xml" />

<item id="frontespizio" href="frontespizio.xhtml" media-type="application/xhtml+xml" />

<item id="capitolo-1" href="capitolo-1.xhtml" media-type="application/xhtml+xml" />

<item id="capitolo-2" href="capitolo-2.xhtml" media-type="application/xhtml+xml" />

[…]

</manifest>

<spine toc="ncx">

<itemref idref="CoverImage" linear="no"/>

<itemref idref="frontespizio" />

<itemref idref="capitolo-1" />

<itemref idref="capitolo-2" />

[…]

</spine>

</package>

Page 24: Epub - Corso CIERRE Edizioni

Media Type riconosciuti

Media type immagini Applicazione

Image/gif Immagini GIF

Image/jpeg Immagini JPEG

Image/png Immagini PNG

Image/svg+xml Documenti/sintassi SVG

Media type Applicazioni Applicazione

Application/xhtml+xml Documenti XHTML

Application/x-dtbncx+xml Documenti NCX

Application/vnd.ms-opentype Font OpenType

Application/font-woff Font WOFF

Application/smil+xml Documenti SMIL

Application/pls+xml Text-to-speech (TTS)

Page 25: Epub - Corso CIERRE Edizioni

Media Type riconosciuti

Media type Testo Applicazione

text/mathml Sintassi mml

Text/css File/sintassi CSS

Text/javascript File/sintassi Javascript

Media type Audio/Video Applicazione

Audio/mpeg File mp3

Audio/webm File webm (vorbis codec)

Audio/ogg File Ogg (vorbis codec)

Video/webm File webm (VP8 video codec)

Video/ogg File Ogg (Theora video codec)

Video/mp4 File MP4 (H.264 video codec e AAC audio codec

Non tutti i reader supportano tutti i codec, quindi sarebbe buona norma inserire entrambi i formati specificando ambedue le <source> attraverso il tag <video>

Page 26: Epub - Corso CIERRE Edizioni

Cover size ottimali

Copertina interna: Usare una risoluzione di almeno 72 dpi, la larghezza deve essere larga almeno 1400px ed è consigliato mantenere una proporzione tra i lati di 6:9 o 6:9,6 con una dimensione di peso inferiore ai 2Mb

Copertina esterna: è la copertina che si va a piazzare sugli scaffali delle varie librerie. Il file di copertina deve essere in formato JPG, in alta risoluzione. Esso deve essere di almeno 1875x2500 pixel affinché l’ebook vada in vendita su Amazon ed Apple. 

Page 27: Epub - Corso CIERRE Edizioni

Cover size

Page 28: Epub - Corso CIERRE Edizioni

Test epub

Il test di un epub sarebbe opportuno farlo sia a livello hardware, cioè testarlo direttamente sui device e-reader ma anche a livello software, provandolo sulle app di lettura più utilizzate, previo una verifica di conformità del file.

1)Per verificare la conformità del file (preflight) si possono utilizzare tre strumenti:

Epub Check Il servizio online dell’IDPF Flight Crew

Page 29: Epub - Corso CIERRE Edizioni

Test epub

2) Per verificare il risultato finale visivo è utile testare la pubblicazione su diverse applicazioni di lettura come: Readium Adobe Digital Edition Ibooks (app nativa di IOS) Kobo (app scaricabile dal sito) Kindle Previewer (se si pensa di venderla anche

tramite amazon convertendola nel suo formato proprietario)

È consigliato testarla anche su un e-ink reader per vedere la resa cromatica in B/N (16 livelli di grigio)

Page 30: Epub - Corso CIERRE Edizioni

Test epub

2) Per verificare il risultato finale visivo è utile testare la pubblicazione su diverse applicazioni di lettura come: Readium Adobe Digital Edition Ibooks (app nativa di IOS) Kobo (app scaricabile dal sito) Kindle Previewer (se si pensa di venderla anche

tramite amazon convertendola nel suo formato proprietario)

È consigliato testarla anche su un e-ink reader per vedere la resa cromatica in B/N (16 livelli di grigio)

Page 31: Epub - Corso CIERRE Edizioni

Test epub

2) Per verificare il risultato finale visivo è utile testare la pubblicazione su diverse applicazioni di lettura come: Readium Adobe Digital Edition Ibooks (app nativa di IOS) Kobo (app scaricabile dal sito) Kindle Previewer (se si pensa di venderla anche

tramite amazon convertendola nel suo formato proprietario)

È consigliato testarla anche su un e-ink reader per vedere la resa cromatica in B/N (16 livelli di grigio)

Page 32: Epub - Corso CIERRE Edizioni

Tips per la creazione

1. Aumenta la conoscenza di HTML e CSS

2. Seleziona un font adeguato e utilizza font free. Ricorda che spesso i reader non tengono in considerazione la tua scelta di font e la sostituiscono con le loro font di sistema.

3. Stilizzare i link e differenziarli da altri elementi.

4. I lettori aggiungono automaticamente i margini destro e sinistro, quindi non forzarli.

5. Per i testi utilizzare unità di misura proporzionali (em)

6. Quando è possibile usare SVG che sono scalari.

7. Utilizza i giusti strumenti. Adobe Indesign può essere un punto di partenza ma non è adatto per il fine tuning.

8. Separa il contenuto dalla presentazione. Il codice deve essere semanticamente corretto. I lettori che fanno uso di riproduzione TTS devono essere in grado di interpretare il contenuto. Attenzione all’utilizzo di immagini che contengono testo e ricorda l’attributo alt alle immagini.

Page 33: Epub - Corso CIERRE Edizioni

Tips per la creazione #2

9. Con iOS prova a disattiva le impostazioni di default di ibooks per valutare le differenze e rendersi conto delle scelte stilistiche e cromatiche.

10. Usa colori ad alto contrasto, perché alcuni reader usano display e-ink (B/N)

11. Valuta correttamente se per gli elementi audio e video è meglio l’inserimento, lo streaming o link a repository dedicati.

12. Non inserire numeri di pagina o riferimenti fissi. Il layout e reflowable.

13. In funzione del prodotto valuta correttamente il layout, se Fixed o reflow.

14. Gli elementi cliccabili non devono essere più piccoli di 45 pixel, il puntatore non è visibile perché nei tablet c’è il tocco (touch) e la precisione nell’uso del dito e minore della precisione nell’uso di un puntatore

Page 34: Epub - Corso CIERRE Edizioni

Contatti

Matteo Ziviani

Scuola Grafica Cartaria «San Zeno»

Via Don G. Minzoni 50 - Verona

[email protected]

[email protected]

@matteoziviani