4 Dalla teoria alla pratica

(1)

4 Dalla teoria alla pratica

4.1 Proposta editoriale

Si sono finora affrontati quegli argomenti di maggior rilievo che in generale rappresentano il background teorico che si reputa essere necessario a un editore digitale. D’ora in avanti si tratterranno questioni più specifiche, al fine di inquadrare — per poi creare — culturalmente e tecnicamente, quello che vuole essere un possibile modello di libro digitale multimediale e cross-device.

Innanzitutto la proposta editoriale, ideata tenendo in considerazione i feedback emersi dalle interviste e gli eBook pubblicati dalle case editrici citate nel capitolo precedente. Tale proposta si proponeva la realizzazione di un eBook che dal punto di vista strutturale sarebbe stato suddiviso in tre differenti sezioni. La prima sezione sarebbe stata dedicata al portfolio personale del fotografo, completo di biografia, un’intervista video e fotografie scelte a tutto schermo; la seconda, a un genere fotografico specifico e caratterizzante, scelto dal fotografo, in cui ogni fotografia, completa di didascalia, avrebbe occupato un’intera pagina; la terza e ultima sezione sarebbe stata invece dedicata a un manuale tecnico che, a seconda del genere trattato nella sezione precedente, avrebbe dovuto contenere i consigli del fotografo stesso alla produzione e alla post produzione di fotografie personali. Si è inoltre pensato di creare una collana. Non solo per dare continuità al progetto, o per diminuirne le dimensioni, trattando per ogni eBook un solo fotografo; ma anche per promuovere all’acquisto, attraverso il libro precedente, quello successivo, e viceversa. Una collana inoltre, riferendoci al mercato digitale, permette di avere più visibilità, anche all’interno dei motori di ricerca, di Amazon e degli altri eBook store.

Successivamente, ci si è rivolti all’editore Luciano Simonelli per un

confronto. Simonelli Editore è una casa editrice fondata alla fine del 1995 che fin da subito, spiega lo stesso Simonelli, si è rivolta allo sviluppo online, immaginando che il futuro della editoria dei libri sarebbe stato un mix fra l’editoria tradizionale e quella multimediale.

Durante l’incontro si è molto discusso riguardo i contenuti dell’eBook in questione, fino all’approvazione per la realizzazione della collana. Tra i suoi

desiderata, Simonelli ha richiesto che ogni fotografia presentasse due didascalie: una tecnica e una descrittiva. La prima conterrà le informazioni tecniche sullo scatto — sul modello della fotocamera, sul tempo di otturazione, sulla lunghezza focale e così via — mentre la seconda una descrizione, scritta dal fotografo, che ne delinei il contesto e che ne dia un’interpretazione personale.

Dal confronto è poi emerso che tre diverse sezioni avrebbero potuto

(2)

due mascrosezioni. La prima parte raccoglierà il portfolio personale del fotografo in cui ogni pagina sarà interamente dedicata a uno scatto — scelto insieme al fotografo stesso. Ogni pagina conterrà le didascalie che occuperanno invece un livello

secondario, accessibile attraverso un bottone. Questa divisione permetterà al lettore di scegliere la modalità di lettura; personale oppure guidata attraverso la ‘voce’ — e in alcuni casi sarà proprio la voce, trattandosi di un Enhanced eBook (eBook

arricchito) — di chi ha realizzato la fotografia. Inoltre, i due differenti medium, testuale e iconografico, non si contamineranno l’un l’altro.

La parte manualistica invece, conterrà le note tecniche riguardanti il lavoro del fotografo. Servendosi anche delle fotografie proposte nella sezione precedente, il fotografo ‘svelerà i trucchi’, secondo quelle che sono le sue linee guida, per la produzione di fotografie professionali.

Ogni fotografia sarà quindi supportata da specifici interventi testuali. Le note tecniche permetteranno di indagare come è stata realizzato lo scatto, la didascalia descrittiva permetterà una partecipazione intima e personale col fotografo, mentre la parte manualistica fornirà gli approfondimenti teorici necessari. Attraverso la

narrazione — storytelling — e l’esempio dei grandi fotografi, sarà quindi possibile apprendere le tecniche e i principi per realizzare grandi fotografie. Nonostante la tecnologia abbia reso in gran parte l’aspetto tecnico automatico, è fondamentale conoscere le basi della fotografia manuale

per avere un ruolo da protagonista nel processo creativo. L’aspetto creativo, d’altro canto, libero da confini tecnologici, è dove fantasia e curiosità si traducono in puro divertimento, sia che si tratti di sondare territori inesplorati quanto di ripercorrere i passi dei grandi fotografi. 1

Oltre alle sezioni presentate, l’eBook conterrà una pagina di legenda in cui verranno spiegati, grazie al supporto testuale e grafico, i contenuti interattivi, una che conterrà la biografia del fotografo, con un video di presentazione, e una di collegamento ai social network — la pagina social dedicata all’eBook in questione, verrà incorporata, attraverso il codice di embed, affinché la fruizione da parte del lettore possa avvenire all’interno dell’eBook stesso.

4.2 Approcci al fixed layout

In Field Guide to Fixed Layout for Ebooks, scritto dalla Book Industry Study Group (BISG) , vengono suggeriti tre metodi per la creazione di eBook a layout fisso: 2

attraverso l’utilizzo di immagini vettoriali, di immagini raster oppure utilizzando il

Ian Farrell, Introduzione, in Corso completo di fotografia digitale, Novara, White star, 2015, p. 7

1

BISG, Field Guide to Fixed Layout for Ebooks, Book Industry Study Group, New York, 2015

(3)

codice HTML e CSS sfruttando l’absolute positioning . Le prime due soluzioni 3

vengono tuttavia reputate poco raccomandabili. Le immagini vettoriali infatti — vengo prese in considerazione le immagini in formato SVG — sono ancora poco supportate dai dispositivi di lettura e, se non modificate attraverso programmi specifici, è piuttosto difficile apportare delle correzioni. Per quando riguarda invece la creazione di documenti a layout fisso attraverso immagini raster, è stata riscontrata una “user experience insoddisfacente” , eccetto nei casi in cui la dimensione della 4

viewport non sia uguale o molto simile a quella del canvas virtuale. In questo caso infatti l’immagine si adatta in modo proporzionale al canvas senza che si deformi o che risulti troppo piccola.

La miglior soluzione sembra dunque essere quella suggerita anche dall’IDPF, ovvero lavorare direttamente in HTML e CSS.

4.2.1 FXL Package Metadata

Prima di iniziare nello sviluppo dell’eBook, si deve tenere in considerazione che il layout fisso permette più possibilità di visualizzazione. È infatti necessario dichiarare se costringere il lettore a una determinata visualizzazione o se potrà, attraverso le funzioni dell’applicazione o del dispositivo di lettura, scegliere lui stesso come fruire dei contenuti. Oltre all’orientamento verticale od orizzontale dei contenuti, è

possibile dichiarare se, all’interno del canvas virtuale, debba essere visualizzata una pagina intera o due pagine affiancate — esperienza simile al libro cartaceo o a una rivista.

Queste dichiarazioni devono essere inserite all’interno del file .opf — solitamente porta il nome di ‘content’ —, che descrive in xml la struttura del file .ePub. L’estensione .opf sta per ‘Open Packaging Format’, ovvero l’insieme di specifiche che definiscono il meccanismo con il quale sono collegate le varie componenti dell’eBook in ePub e che determinano la sua struttura e semantica. Al 5

suo interno, vengono dichiarati tutti i file utilizzati o a cui si fa riferimento nell’eBook.

L’elemento package, il root element, indica la versione dell’ePub (2 o 3) e dove si trova l’identificatore univoco del libro (solitamente l’isbn, dichiarato

successivamente). All’interno del nodo radice troviamo tre nodi figli — è possibile trovare un ulteriore nodo il cui inserimento non è obbligatorio.

Un metodo CSS per posizionare in modo assoluto gli elementi all’interno di un contenitore

3

preservando il padding del contenitore stesso BISG 2015, op.cit., p. 9

4

Cfr. Open Packaging Format (OPF), idpf, 2010, url: http://www.idpf.org/epub/20/spec/

5

(4)

Il primo, metadata, è la definizione dei metadati dell’ePub; contiene

informazioni, alcune delle quali obbligatorie, quali l’identificatore univoco, il file copertina, il titolo, l’autore, l’editore e la lingua. Il secondo elemento, manifest, è il manifesto dell’eBook. Al suo interno vanno dichiarati tutti i file che si trovano nel pacchetto, senza eccezione alcuna, come testi, immagini, font, foglio stile o indice (toc). Per ogni elemento bisognerà indicare un id (che verrà riutilizzato nello spine), la fonte e il tipo. Infine, l’elemento spine, rappresenta l’ordine di visualizzazione dei file richiamati attraverso l’id e, attraverso la proprietà linear, se devono essere ignorati durante lo scorrimento delle pagine — tuttavia non riconosciuta da Gitden

<?xml version="1.0" encoding="UTF-8"?> <package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="BookId"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf"> <dc:identifier opf:scheme="UUID" id="BookId">urn:uuid:3ef4aa00-7eb7-48c2-9b9f-fc688db46889</dc:identifier> <dc:language>it</dc:language> <dc:title>[No data]</dc:title> <meta property="rendition:layout">pre-paginated</ meta> <meta property="rendition:orientation">landscape</meta> <meta property="rendition:spread">none</meta> </metadata> <manifest>

<item id="Capitolo1.xhtml" href="Text/

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

Capitolo2.xhtml" media-type="application/xhtml+xml" /> </manifest>

<itemref idref="Capitolo1.xhtml"

properties="rendition:layout-reflowable" linear="yes"/> <itemref idref="Capitolo2.xhtml" linear="no"/> </spine>

Esempio 1 struttura minima di un file content.opf. Rappresenta un ePub,

versione 3, fisso con orientamento bloccato in orizzontale e senza spread. Il primo capitolo è tuttavia fluido, mentre il secondo non appare nel flusso

(5)

Reader. L’elemento facoltativo guide, serve a chiarire il ruolo di alcuni file ed è richiesto da Apple Store. Si usa per i file più importanti, per esempio l’indice e la 6

copertina.

Per il giusto inserimento dei metadati all’interno del file .opf, Sigil offre tra gli strumenti ‘Editor dei metadati’ attraverso il quale è possibile aggiungere i metadati sviluppati da IDPF con le opportune proprietà. Per ognuno di questi Sigil ha inoltre dedicato una breve descrizione.

Tornando al discorso iniziale, è proprio tra gli elementi contenuti all’interno del tag metadata che si trovano le istruzioni per i dispositivi di lettura e per i software su come dovrà essere visualizzato l’eBook in questione.

Nel caso del fixed layout, il file .opf svolge infatti la funzione fondamentale di comunicare al dispositivo di lettura che l’ePub da visualizzare ha un impaginato fisso. In questo caso va utilizzato il metadato rendition:layout. Questa stringa è di per sé sufficiente affinché le pagine dell’ePub appaiano di dimensioni fisse.

Per quanto riguarda invece l’orientamento della schermata, la proprietà da utilizzare è la rendition:orientation. Questa proprietà ci permette di ‘bloccare’ la rotazione automatica. Per esempio, se stiamo realizzando un ePub illustrato dal formato orizzontale, è preferibile che la schermata rimanga in modalità landscape (orizzontale) anche quando il lettore impugna il dispositivo in verticale (portrait), per evitare che la pagina appaia poco leggibile. Oltre ai valori landscape e portrait, è possibile assegnare auto per evitare blocchi alcuni.

Per gestire infine l’affiancamento delle pagine, si utilizza invece la

rendition:spread. Questa proprietà regola l’attivazione della visualizzazione a pagina doppia, che può rivelarsi essenziale per i testi o le immagini che si sviluppano su due pagine contigue. Lo spread può essere combinato con l’orientamento per ottenere particolari effetti di riempimento della pagina. La scelta del valore farà attivare lo spread: portrait nel caso si voglia uno spread in modalità verticale, landscape nel caso lo si voglia in orizzontale e both per entrambi. Nel caso in cui non si voglia alcuno spread, basterà dichiarare none. 7

Queste proprietà possono essere utilizzate in due differenti modalità. Quando dichiarate all’interno del pacchetto degli elementi meta, come descritto in

precedenza, le proprietà vengono applicata all’interno eBook. Se invece si volesse creare un eBook con pagine diverse, ad esempio se si volessero includere pagine fluide all’interno di un eBook a layout fisso, è possibile dichiarare le suddette proprietà all’interno del pacchetto degli elementi spine.

Guida all’opf, la spina dorsale dell’ePub, waytoepub , 2016, url: http://www.waytoepub.com/blog/

6

guida-allopf-la-spina-dorsale-dellepub

EPUB 3 Fixed-Layout Documents, idpf, 2012, url: http://www.idpf.org/epub/fxl/

(6)

Nel caso dello spread poi, è possibile dichiarare la posizione della pagina all’interno del canvas grazie alla proprietà page-spread-*.

When a Reading System is rendering synthetic spreads, the default behavior is to populate the spread, which conceptually consists of two adjacent viewports, by rendering the next Content Document in the next available unpopulated viewport, where the location of “next” is determined by the given page progression direction, or by local declarations within content documents. By providing one of the page-spread-* properties on the spine itemref element, the author can override this automatic population behavior by forcing the given Content Document to be placed in a particular viewport. 8

Se si volesse quindi visualizzare una singola immagine su due diverse pagine, sarà possibile dichiarare per la pagina di sinistra la proprietà page-spread-left e per quella di destra page-spread-right. In aggiunta, esiste anche la possibilità di avere una sola pagina al centro del canvas.

which indicates that the synthetic spread mode should be overridden such that instead of two adjacent viewports, a single viewport must be used, and positioned at the center of the screen. Note that the presence of rendition:page-spread-center does not in itself affect the content dimensions. 9

Elizabeth Castro suggerisce, per una corretta visualizzazione sui sistemi iOS degli ePub3, l’inserimento all’interno della cartella META-INF, di un file XML aggiuntivo denominato com.apple.ibooks.display-options.xml. Il file contiene poche righe in cui vengono elencate le proprietà già dichiarate nei metadati all’interno del file .ops e a

Matthew, Fixed Layout in ePUB 3.0 Draft: Metadata Property Definitions, ePUBSecrets, 2012, url:

8

http://epubsecrets.com/fixed-layout-in-epub-3-0-draft-metadata-property-definitions.php Ibidem

9

Esempio 2 struttura di un file com.apple.ibooks.display-options.xml

<?xml version="1.0" encoding="UTF-8"?> <display_options> <platform name="*"> <option name="fixed-layout">true</option> <option name="specified-fonts">true</option> <option name="open-to-spread">true</option> <option name="orientation-lock">landscape-only</ option> <option name="interactive">true</option> </platform> </display_options>

(7)

quale dispositivo, platform, iOS dovranno essere applicate — indicando ‘*’, verranno prese in considerazioni tutte le piattaforme. 10

4.2.2 Book content

Come si è più volte menzionato, gli eBook a layout fisso non scorrono. Il contenuto di una pagina specifica viene sempre e solo mostrato in quella pagina, senza

overflow. È dunque necessario creare un documento XHTML per ogni pagina del libro inserendo, per ognuna, la stessa dimensione.

È la viewport a determinare le proporzioni di una pagina (ma non sempre la sua esatta dimensione) così come le dimensioni degli oggetti rispetto alla pagina. 11

Nel nostro caso, si è scelto di rispettare le proporzioni delle fotografie, essendo queste il più delle volte a tutto schermo. Così facendo non si correrà il rischio di avere parti delle immagini fuori dal canvas oppure che vangano ridimensionate in modo sproporzionato — provocando perdite di qualità o deformazioni. In generale, comunque, si cerchi di rispettare le dimensioni delle risoluzioni più popolari al momento della creazione dell’eBook. Come riportato da deviceAtlas,

Many new phones released in 2015 featured a Full HD resolution, even in mid-range price categories. Some flagship phones, such as Samsung Galaxy S6, Samsung Galaxy Note 5, Sony Xperia Z5 Premium, featured a qHD (1440 x 2560) screen resolution. Again the iPhone was an exception with the 750 x 1334 (6S) and 1080 x 1920 px (6S Plus) screen resolutions. 12

Una volta scelte le dimensioni della pagina, si può procedere a specificarle nel codice. In particolare, nella sezione head di ogni singolo documento XHTML dell’eBook, va aggiunto un elemento meta con name viewport il cui content specifichi la larghezza (width) e l’altezza (height) in pixel in questo modo:

Si noti che le virgolette includono contemporaneamente, e non separatamente, entrambe le misure. È poi possibile, per una più corretta scrittura del codice, aggiungete le misure della pagina all’interno della pagina CSS, in px al body. È importante che la dichiarazione sia presente in ciascuna pagina XHTML e che risulti sempre uguale — diversamente verranno riscontrati errori durante la validazione o all’apertura per alcune app, per esempio Gitden Reader.

Elizabeth Castro, EPub a layout fisso, goWare, 2012

10

Ibidem

11

Pawel Piejko, Most popular viewport size statistics for 2016, deviceatlas, 2016, url: https://

12

(8)

Inserito quindi il meta tag riguardante la viewport, si può iniziare con l’inserimento dei contenuti. Anche in questo caso Sigil offre alcuni strumenti per l’inserimento di file come immagini, audio, video, tag di chiusura, id o caratteri speciali. In questo modo le possibilità di commettere errori di battitura o di sintassi si abbassa notevolmente. Inoltre Sigil, ogni volta che verrà creato un nuovo file

XHTML, genererà automaticamente la dichiarazione e la sua codifica , e si 13

occuperà del corretto inserimento, come di ogni altro file, all’interno delle cartelle apposite.

Nell’intestazione del file, è sufficiente inserire il titolo del file — più che altro per nostra comodità, perché il titolo visualizzato sarà quello mostrato nei file .opf; dare un titolo a ogni pagina sarà utile per organizzare il contenuto e orientarci nei casi in cui si abbiano molti file —, il riferimento al foglio stile o ad altri eventuali file. La path di questi file è relativa, quindi se è contenuta in una sottocartella è necessario indicarla.

Le specifiche XML/XHMTL richiedono che in questo file vi siano solamente i contenuti e le indicazioni strutturali, mentre ogni particolare o indicazione sulla forma, deve essere demandato al foglio stile. Sia per una corretta riproduzione, sia per una buona compatibilità con i diversi reader e software di lettura, sia per una nostra interpretazione del codice per eventuali modifiche, è importante che la pagina sia chiaramente strutturata e che le diverse parti siano chiaramente contrassegnate. Occorre anche che la struttura sia omogenea in tutto l’eBook, quindi in tutti i file. 14

Un utile consiglio riguardante il testo, è di evitare l’uso del tag <br/> come fine di paragrafo. I diversi paragrafi devono essere contenuti in diversi tag <p>, con gli id o le classi opportune, e i diversi tipi di testo devono essere compresi nei <div> che li qualificano per posizione e funzione; il tutto con le opportune formattazioni all’interno del foglio di stile.

Quindi, iniziando a creare i file è opportuno domandarsi quali e quanti tipi di testo si abbiano e che formattazioni debbano avere. Ciascun tipo di testo e ciascun insieme di formattazione porta alla definizione di una ‘class’ differente.

Ad esempio, abbiamo un testo corrente che ha determinate caratteristiche, ma abbiamo bisogno che, ad un certo punto, vi sia uno spazio bianco nel testo che separi il testo anche senza la presenza di alcun sottoparagrafo. Non possiamo usare, come faremmo nell’HTML od in “Word”, dei ritorni a capo con paragrafo vuoti, perché potrebbero essere interpretati in modo diversi da diversi software o reader, od addirittura ignorati. Dobbiamo creare nel foglio stile una

In Realizzare il contenuto di un ePub, Guida eBook, 2012, url:

http://www.guidaebook.com/guida-13

epub/realizzare-contenuto-epub/, si legge: “La codifica da usare è ‘UTF-8’ o ‘UTF-16’, anche se non è garantita la resa dell’intero set di caratteri, e non vanno usate altre codifiche (come la codifica

‘iso-8859-1’ che viene usata spesso nei file HTML).”

per un utilizzo corretto del codice HTML e CSS si rimanda a W3S, url: http://www.w3schools.com

(9)

“class” apposita che preveda un “margin-top” od un “margin-bottom” a seconda se vogliamo lo spazio sopra o sotto. 15

A questo proposito, è giusto descrivere brevemente come creare un corretto file CSS — Sigil in questo non ci viene in aiuto.

4.2.3 Il foglio di stile

Per funzionare correttamente il foglio di stile deve richiamare tag, classi e id della pagina XHTML. Il tag e la classe costituiscono ciascuno un selettore, servono cioè a indicare a quali parti di testo ci si riferisce. All’interno delle parentesi graffe, si trova prima la proprietà, e poi, dopo i due punti, il valore.

Studiando le innumerevoli proprietà del CSS, si ha l’impressione di poter fare, con il proprio ePub, qualunque cosa. In realtà prima di applicare una proprietà CSS in un ePub bisogna sempre tener conto di tre variabili. Prima di tutti, assicurarsi che la proprietà sia accettata dalle specifiche dell’IDPF. Se così non fosse, l’ePub potrebbe non superare la validazione. In secondo luogo, capire empiricamente o attraverso le specifiche delle case produttrici se la proprietà è letta in modo adeguato dagli eReader. Terzo ma non ultimo, considerare sempre la libertà dell’utente di cambiare aspetto al testo attraverso il device, avendo rispetto della caratteristica principale dell’ePub, lo scorrimento del testo e il suo adattarsi allo schermo. 16

È chiaro come quest’ultima variabile, nel caso di layout fisso, sia da soprassedere. Per quanto invece riguarda le prime due, sembra opportuno fornire un elenco di proprietà del CSS che possono essere utilizzate con una certa tranquillità.

Prime fra tutte le proprietà riguardanti la formattazione del testo. Innanzitutto, font-family indica la scelta del font. Grazie alle specifiche ePub3 del’IDPF, è

possibile inserire all’interno dell’eBook un qualsiasi carattere OTF o TTF, possedendo ovviamente i dovuti permessi. La maggior parte dei produttori di

caratteri infatti non permettono la distribuzione commerciale, tuttavia esistono molte font senza questo genere di restrizioni. È possibile aggiungere il file del carattere inserendolo direttamente all’interno della cartella Fonts — utilizzando Sigil, è sufficiente cliccare col destro sulla cartella Fonts e poi selezionare ‘aggiungi file esistente’; deve però trattarsi di un carattere Open Type (OTF), True Type (TTF) o (WOFF) . 17

Successivamente, all’interno del foglio di stile, va definita la regola @font-face per il carattere che si intende utilizzare.

Realizzare il contenuto di un ePub, Guida eBook, url cit.

15

Alba Carella, 2014, op.cit., p. 37

16

Le nuove specifiche ePub3.01 abbandonano il supporto dei font TrueType. Non è possibile inserire

17

TrueType; sono concessi gli OpenType e i WOFF. Non che i lettori abbiano effettivamente problemi a visualizzare i TrueType, ma – essendo fuori dalle specifiche – i validatori ePub potrebbero non validare l’EPUB3 che contenesse font TrueType. L’argomento verrà approfondito successivamente.

(10)

Fondamentalmente, la regola @font-face mette in relazione un nome, uno stile e uno spessore (weight) con il file indicato nel percorso (src). Potete chiamare il carattere come volete (anche se sarebbe sensato utilizzare il vero nome del carattere, non dovete preoccuparvi di conoscere il suo nome ufficiale). Lo stile (style) e lo spessore (weight) sono gli stili effettivi del carattere (bold, italic, normal). Infine src contiene, fra virgolette, l’URL del file del carattere, il percorso […]. 18

Una volta definito il carattere in questo modo, è possibile richiamarlo semplicemente citando lo stesso nome che si è usato in @font-face nella regola CSS in cui volete usare il carattere.

Oltre alla font, altre proprietà utili alla formattazione del testo sono la font-weight (indicando bold, si imposta il grassetto), la font-style (indicando italic, si imposta il corsivo), font-size e line-height (dimensione del corpo del testo e interlinea).

Dato che il carattere e le dimensioni del testo di un eBook a layout fisso non si possono cambiare, è molto importante scegliere i valori più adeguati già in fase di progettazione. Più avanti verrà approfondito l’argomento.

Per quanto riguarda invece i vari blocchi, del testo o delle immagini, sono utili le proprietà margin, che indica la spaziatura sopra, sotto, a destra e a sinistra del testo, e position. Per quest’ultimo, se indicato absolute, viene impostato il

posizionamento assoluto dell’elemento all’interno della pagina. Questa proprietà è molto utile nel caso di layout fisso poiché l’elemento in questione si distacca dal flusso gerarchico imposto dall’HTML e, attraverso le proprietà top, bottom, left e right, seguite da valori assoluti (in pixel) o relativi (con un valore percentuale riferito alla larghezza della pagina, o dell’elemento in cui il testo è inserito), se ne specifica la posizione sulla pagina. Utile a questo proposito è anche la proprietà z-index, il cui valore indica il posizionamento dell’elemento sull’asse Z.

Esistono poi altre proprietà “molto diffuse ma che creano frequenti problemi di compatibilità e che quindi è bene usare con cautela” . orphan e widows, con valori 19

superiori a 1, servono a evitare le righe orfane o vedove; break-after, page-break-before e page-break-inside, invece, indicano l’interruzione di pagina prima, dopo o all’interno di un elemento. font-variant, con il valore small-caps, indica il maiuscoletto, mentre word-spacing e letter-spacing, indicano quelli che

tipograficamente vengono chiamati track e kerning, ossia spaziatura insolita tra le pagine o tra i caratteri.

Per ogni tag e classe possono essere quindi assegnate delle proprietà, anche se il tag è quello di un’immagine o di una cornice div. Una volta definita la classe nel foglio di stile, le sue proprietà verranno applicate a tutti gli elementi della pagina che

Castro 2012, op.cit.

18

Ibidem

(11)

presentano quella classe. In questo modo la mappatura creata in precedenza, per dare al testo una struttura, si rivela utile anche per gestire l’aspetto.

Una problematica da considerare riguarda i problemi di priorità che possono presentarsi anche all’interno di un unico foglio di stile o tra più fogli di stile dichiarati nella pagina XHTM. In questo caso vince sempre la regola più vicina al testo di riferimento. In tal senso, è decisamente sconsigliato l’utilizzo di stili in linea, ossia dall’attributo style all’interno della pagina XHTML — questo perché gli stili in linea hanno sempre la priorità ma mescolano aspetto e struttura creando casi di conflitto. 20

4.2.4 Adaptive layout e responsive design eBook

Trattandosi di un “sito web in una scatola”, una conseguenza naturale per l’editore digitale è di controllare le tecniche più influenti che circolano nel campo del web design. Come si è più volte descritto,

A text-heavy fixed-layout title can generate an unfriendly user experience because the customer continually has to pinch/zoom/pan the pages on the tablet in order to view the content. There can be a loss of some of the features available in reflowable ebooks — for example, text-search functionality can be lost if the text is flattened as part of an image file. Additionally, a customer who expects a reflowable experience but encounters instead the print replica may experience confusion and disappointment. 21

L’IDPF ha suggerito come possibile soluzione l’utilizzo delle tecniche del web design adaptive, nella creazione di libri in formato ePub.

This EPUB specification defines a model for template-based adaptive paginated layouts as an extension to CSS. The features described in the specification allow authors to describe precise page appearances that adapt to a wide range of device sizes and custom user settings. Its primary focus is interactive display environments in which the page size and user-defined font metrics are unknown at the time of document authoring and layout has to be done on the fly. 22

L’ePub Adaptive Layout fornisce un buon equilibrio tra i contenuti reflowable e quelli a layout fisso. Questo tipo di modello non è tuttavia in grado di sostituire il fixed layout poiché comunque dipendente dal sistema di lettura dell’utente e quindi non del tutto controllato dall’editore.

Le possibilità offerte, infatti, si adattano appropriatamente all’interno di eBook in cui il contenuto iconico fa da supporto estetico; considerando per di più che la maggior parte dei libri elettronici sono puramente, o principalmente, a contenuto

Ibidem

20

BISG 2015, op.cit., pp. 8-9

21

EPUB Adaptive Layout, idpf, 2012, url: http://www.idpf.org/epub/pgt/

(12)

testuale. Tuttavia, come si è già descritto, molti tipi di pubblicazione richiedono un layout più ricco — per ragioni di marketing o per la natura stessa del contenuto. In questo senso, l’adaptive layout risulta povero, rispetto a ciò che si incontra

navigando per il web. Ciò che il fixed layout richiede, è un design avanzato ma che sia al contempo crossdevice. Grazie al combinarsi della tecnica del responsive layout di CSS3 e del design del fixed layout di ePub3 è possibile giungere a risultati

particolarmente soddisfacenti.

The missing component […] is a focus on responsive design: the methodology that web developers and designers began cultivating at the advent of the smartphone era to facilitate creation of a universal set of web assets that yield high-quality results optimized for all devices. There’s no reason publishers shouldn’t strive to achieve these same goals, to commit to an analogous philosophy of responsive ebook design. 23

Cardine del responsive eBook design sono i moduli Media Query del CSS3.

Media queries are CSS conditionals, which allow you to selectively apply styling based on two categories of user-agent parameters: the output medium (called media type), and its display properties, called media features. 24

Sanders Kleinfeld, Responsive Ebook Design: A Primer, Medium, 2015, url: https://medium.com/

23 @sandersk/responsive-ebook-design-a-primer-8bba01328219#.7cwb1rvds Ibidem 24 <container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" xmlns:rendition="http://www.idpf.org/2013/ rendition" version="1.0"> <rootfiles> <rootfile full-path="Sandman.opf" media-type="application/oebps-package+xml"/> <rootfile full-path="Sandman-large.opf" media-type="application/oebps-package+xml" rendition:media="(min-width: 1920px)"/> </rootfiles> </container>

Esempio 3 il file container.xml riportato, mostra due rendition di ‘The Sandman

bundle’ nello stesso contenitore, una ottimizzata per schermi 1920 pixel o più ampio, mentre la seconda, come impostazione predefinita, per schermi di dimensioni inferiori a 1920 pixel. L’esempio è stato preso dal sito IDPF alla

(13)

In pratica, consentono agli autori di specificare che un insieme di regole e di

proprietà vengano applicate esclusivamente a una particolare condizione. Nel nostro caso, si sono usate medie queries per le parti testuali, ingrandendo il testo laddove le dimensioni del dispositivo diminuivano. Inoltre, si sono utilizzate misure relative per indicare le dimensioni dei vari blocchi creati.

Una soluzione del tutto interna al formato ePub, è la specifica che prende il nome di ePub Multiple-Rendition. In questo caso si tratta di fornire al file container.xml più rese, rendition, a seconda di determinate condizione, come il tipo di device — si veda Esempio 3.

An issue of a magazine, for example, could include a fixed layout version (print replica) for rendering on tablet-sized screens with a reflowable version for smaller cellphone screens where the fixed layout would be scaled to illegibility (or automatically reflowed in unwanted ways if fixed layouts are not supported). 25

Nonostante la specifica sia stata pubblicata dall’IDPF nel 2015, ad oggi non è ancora ben superata dai sistemi di lettura.

4.2.5 Le immagini

Una della principali ragioni per cui viene scelto il layout fisso è la possibilità di poter controllare la posizione e la dimensione delle immagini all’interno di una pagina. Inoltre, permette di riempire con un’immagine un’intera pagina oppure due pagine affiancate.

Il primo passo è creare l’immagine che si vuole inserire nel libro. Non è possibile controllare la risoluzione delle immagini, ma è possibile controllare le dimensioni assolute in pixel. Lo spazio della pagina occupato dall’immagine dipende dalla sua dimensione relativa con riferimento al viewport e al body (valori che dovrebbero essere uguali). Potete inserire nella pagina il numero d’immagini che volete. Dato che si lavora con uno spazio a dimensione fissa, probabilmente vorrete anche posizionare le immagini esattamente in quel determinato spazio. 26

È comunque necessario porre attenzione alla dimensione totale della pagina.

Purtroppo per alcune applicazioni, come Digital Edition di Adobe, una pagina troppo pesante, oltre a creare rallentamenti durante il caricamento della stessa, può bloccare la pagina, impedendo la visualizzazione di elementi interattivi o altro, fino a far chiudere l’applicazione. Si raccomanda dunque di avvicinare il più possibile la dimensione delle immagini a quelle scelte per la viewport così da diminuire il peso della pagina. L’applicazione Gitden Reader, invece, blocca la funzione ‘sfoglia’

EPUB Multiple-Rendition Publications, idpf, 2015, url: http://www.idpf.org/epub/renditions/

25

multiple/

Castro 2012, op.cit.

(14)

attraverso lo swipe delle pagine, costringendo il lettore a dover utilizzare i tasti volume per proseguire nella lettura — riguardo a questa problematica si sono contattati gli sviluppatori dell’app i quali hanno risposto che avrebbero rimediato.

Utilizzando Sigil per inserire un’immagine nel flusso dell’HTML basta servirsi dell’apposito bottone e selezionare il file opportuno.

Non specificate i valori di width e height. È obbligatorio includere anche le informazioni nel tag alt, anche se sono informazioni che, dato il formato, non si useranno mai. 27

Vanno poi aggiunte all’interno del CSS le informazioni necessarie in modo da poter collocare l’immagine con precisione nella parte desiderata della pagina. Si consiglia di inserire l’elemento img in un blocco div. Se infatti si volesse riempire una pagina con un’immagine, sarebbe sufficiente dare al blocco div una larghezza e un’altezza pari alla dimensione della viewport — o in termini assoluti il 100% a entrambe le proprietà — e posizionarlo in modo assoluto così da collocarlo automaticamente nell’angolo in alto a sinistra della pagina. In questo modo il blocco occuperà l’intera pagina. Sempre nel CSS, nel caso in cui l’orientamento dell’eBook sia orizzontale, dovrà essere impostata una max-height, o una max-width nel caso invece di un orientamento verticale, pari a 100%. In questo modo l’immagine non andrà mai oltre il lato più corto del canvas, così da risultare non solo sempre proporzionata, ma anche nelle sue dimensioni massime possibili. Gli spazi bianchi che potrebbero presentarsi nel caso in cui le dimensioni dell’immagine non siano proporzionali a quelle della viewport, potranno essere riempiti o di colore (come ad esempio il nero), oppure diminuendo in percentuale le dimensioni dell’immagine, creando così una cornice attorno a essa.

Se si desiderasse poi sovrapporre all’immagine testi o altri elementi, è preferibile posizionarla alla base della pila (stack) di oggetti, paragonabile a un livello controllato dalla proprietà z-index — il valore di default è 0, un qualsiasi valore negativo porterebbe l’immagine al di sotto degli altri elementi.

4.2.6 Video e audio

Una delle nuove funzioni introdotte dal formato ePub3 riguarda la possibilità di inserire file audio o video all’interno del testo. Questa operazione può presentare, come vedremo, alcuni svantaggi a livello di dimensioni dell’ePub e di accessibilità ai contenuti. Se si stesse lavorando con Sigil, la procedura per inserire un elemento audio o video all’interno del file ePub è identica a quella descritta per le immagini.

Ibidem

(15)

Alcuni device tuttavia potrebbero non leggere i formati inseriti. A questo proposito esiste la possibilità di inserire una o più istruzioni di fallback. 28

<p>Video non supportato dal lettore</p> </video>

Come si può vedere, l’elemento video contiene due file video di diverso formato, come specificato dall’attributo type. Il lettore esegue il primo file del formato che supporta e se non ne trova rimanda all’istruzione di fallback contenuta nel tag p. Lo stesso vale per l’elemento audio. Per controllare l’esecuzione del file sono disponibili alcuni attributi. controls, ad esempio, visualizza una barra di controllo con i bottoni per l’esecuzione del file, autoplay, avvia l’esecuzione automatica, mentre loop ripete l’esecuzione in ciclo.

Un’alternativa interessante all’inclusione dei file audio o video nel pacchetto è quella di utilizzare dei link diretti a file remoti, non presenti all’interno dell’eBook ma disponibili in rete. 29

Questa scelta comporta diversi vantaggi. Innanzitutto il file ePub risulta più ‘leggero’. Inoltre, il fatto che i contenuti audio e video siano presenti in rete, consente agli autori di apportarvi modifiche e aggiornamenti — mantenendo il link così come è stato inserito nell’ePub.

Un ultimo vantaggio riguarda la possibilità di accedere a diversi formati dello stesso video o audio. Il formato

ePub3 è infatti in grado di scegliere tra i contenuti che meglio si adattano al dispositivo di lettura sul quale viene visualizzato, e quindi optare per il formato più compatibile con il device in uso. 30

D’altro canto, ci sono alcuni aspetti negativi da tenere a mente. I link esterni, infatti, necessitano sempre di una connessione a internet e comportano il download del contenuto a cui rimandano ogni volta che il lettore vorrà accedervi. Inoltre, i file multimediali non gestiti direttamente da chi ha realizzato l’eBook potranno subire modifiche o addirittura venire rimossi dalla rete. Per questo è importante tenere

Si veda Matt Garrish, Multimedia Support in EPUB 3, epubzone, 2014, url: http://epubzone.org/

28

news/multimedia-support-in-epub-3

Inserire link a video o audio esterni in un epub3, waytoepub, 2015, url: http://www.waytoepub.com/

29

blog/inserire-link-a-video-o-audio-esterni-in-un-epub3 Ibidem

(16)

sempre sotto controllo lo stato e la disponibilità del materiale multimediale a cui il libro è collegato — creando ad esempio una pagina web apposita.

Si seguiranno ora le indicazioni fornite da Matt Garrish e Markus Gylling in Epub 3 Best Practices per l’inserimento dei link esterni a file audio e video in un ePub3.

Innanzitutto, va creato nella pagina XHTML il collegamento al video utilizziamo il tag <video> come descritto in precedenza — mentre per l’audio si utilizza il tag <audio>.

<video controls="controls" poster="../Images poster.jpg" width="384" height=“276"> <source src="http://www.ilmiosito.com/epub/

video.mp4"/>

</video>

Si consiglia l’utilizzo dell’attributo controls per consentire al lettore di visualizzare i comandi per avviare o interrompere la riproduzione del file — che altrimenti partirebbe in automatico.

Successivamente, all’interno del file content.opf, va dichiarato il file video, o audio, nel manifest, come se fosse contenuto nel pacchetto ePub — per i file remoti Sigil non dichiarerà l’elemento in modo automatico non essendo contenuto realmente nel pacchetto.

Sempre nel manifest, vanno inoltre specificate quali pagine XHTML utilizzano risorse esterne dichiarando come media-properties, remote-resources.

<item id="paginaconvideo" href=“paginaconvideo.xhtml" properties="remote-resources"

media-type="application/xhtml+xml"/>

Infine, è possibile formattarlo tramite il CSS.

Se si utilizza iBooks o qualsiasi altra applicazione di lettura che consente di attivare e disattivare l’accesso ai contenuti online, bisogna assicurarsi che questa opzione sia impostata su ‘on’. Se così non fosse, il file audio o video apparirà ‘congelato’ e non sarà riproducibile.

4.2.7 Javascript

(17)

Attraverso Javascript è possibile scrivere veri e propri ‘programmi’ (script) attraverso i quali interagire con l’utente e con il sistema; in questo senso si parla di linguaggio di scripting lato client per distinguerlo dai linguaggi lato server dove l’interpretazione del codice è compito del server e non del client.

Da un punto di vista formale Javascript è tecnicamente un linguaggio di scripting in quanto si definisce ‘di programmazione’ un linguaggio in grado di creare programmi stand-alone cosa che con Javascript non è possibile fare, essendo necessario un altro programma (il browser) per eseguirne i comandi. 31 Un linguaggio di scripting è un’esemplificazione di un linguaggio di

programmazione, dove il codice viene interpretato da un browser e non è direttamente eseguibile.

Javascript può dunque essere utilizzato per controllare quasi tutte le componenti del client e per rispondere a varie azioni dell’utente. Risulta quindi particolarmente utile perché tutti i compiti di elaborazione sono scritti nello script, e quindi l’intero processo definito è eseguito sul lato del client, senza la necessità di fare riferimento a un server. In altri termini, invece di fare eseguire al server dei compiti e fornire i risultati al client, quest’ultimo può gestire localmente alcuni compiti, dando così all’utente tempi di risposta più brevi e riducendo il traffico di rete.

Con l’utilizzo di Javascript, in poche parole, è possibile dinamizzare una pagina HTML, interagire con l’utente ed automatizzare alcuni processi sulla base del verificarsi di taluni eventi legati al comportamento dell’utente, alle caratteristiche del sistema o ad eventi temporali. 32

L’enorme diffusione di Javascript è dovuta anche al fiorire di numerose librerie nate allo scopo di semplificare la programmazione. Tra le librerie più conosciute e utilizzate si cita jQuery . 33

All’interno di un eBook in formato ePub è possibile inserire semplici script per dinamizzare alcune sue parti, come le parti testuali, oppure modificare l’html

aggiungendo, sostituendo o eliminando classi, nodi o anche parti testuali. Javascript funziona anche con le immagini in formato svg, grazie al quale è possibile interagire con i vari elementi grafici che la compongono, creando così immagini in movimento o, come è stato creato per l’eBook in allegato, evidenziare alcune sue parti a seconda della pagina di provenienza.

Massimiliano Bossi, Introduzione a Javascript, Mr.Webmaster, 2016, url: http://

31

www.mrwebmaster.it/javascript/introduzione-javascript_9434.html Ibidem

32

jQuery Tutorial, w3schools, url: http://www.w3schools.com/jquery/default.asp

(18)

4.2.8 La validazione

L’ultimo passaggio prima della pubblicazione è la validazione. Spesso questa operazione viene sottovalutata, quando non completamente dimenticata, dando per scontato che un eBook prodotto da un software o da un tool non contenga errori. Sigil offre una convalida durante il lavoro, ma è sempre meglio controllare con gli strumenti ufficiali dell’IDPF prima di trovarci tra le mani un eBook in commercio mal funzionante.

Come si è già descritto, un file in formato ePub deve rispettare una serie di regole che lo renderanno conforme allo standard messo a punto dall’IDPF. Attraverso la validazione viene controllato che queste regole siano state rispettate. Un ePub non conforme, sarà rifiutato da molti store, e potrà dare problemi di visualizzazione all’utente.

IDPF e DAISY hanno sviluppato EpubCheck. Si tratta di uno strumento open 34

source che consente di convalidare gli eBook in formato ePub. Con EpubCheck è possibile verificare che il proprio libro soddisfi le specifiche dell’IDPF e rintracciare in modo immediato eventuali errori all’interno del codice. Al momento, è possibile eseguire il test in due modi: il primo è online, ossia sulla pagina apposita del sito dello IDPF, il secondo è sul proprio computer, scaricando le librerie dello

EpubCheck. 35

La nostra validazione non ha riscontrato errori, ma degli avvisi sulle font incorporate e corrispondente al seguente messaggio: “Il riferimento ‘font-face’ ‘OEBPS/Fonts/Montserrat-Bold.ttf’ punta a una font non standard ‘application/x-font-ttf’.”

Il problema sembra che derivi dalla dichiarazione delle font nel manifest del file .opf.

All’interno delle specifiche ad oggi più recenti, pubblicate il gennaio 2016, 36

tra i media-type supportati — ovvero la radice degli avvisi di EpubCheck — si legge: “The application/font-sfnt media type supersedes application/vnd.ms-opentype.” Inoltre, questa specifica risulta essere valida contemporaneamente anche per le font Truetype.

Tuttavia, la più recente versione di ePubCheck è stata rilasciata prima della data di pubblicazione di tali specifiche, ovvero il 23 ottobre 2015.

EPUB Validator (beta), idpf, url: http://validator.idpf.org

34

Le librerie sono file JAR e non possiedono alcuna interfaccia grafica: è quindi necessario utilizzarle

35

dalla linea di comando attraverso il terminale. Inoltre, essendo state programmate in Java, richiedono che sul vostro computer sia installato Java, per poter funzionare. Una volta lanciato il terminale, si scriva: java -jar /percorso del file ‘epubcheck.jar’ percorso del file .epub da validare.

EPUB 3.1, idpf, 2016, url: http://www.idpf.org/epub/31/spec/epub-spec-20160130.html

(19)

Si sono così verificate le Core Media Types precedenti alla data dell’uscita 37

dell’ultima versione di ePubCheck. Al loro interno, si legge invece che, come media-type per il file .opf, è stata inserita solamente la specifica per l’Openmedia-type

(‘application/vnd.ms-opentype’), tralasciando quella per il formato Truetype (‘application/x-font-ttf’).

Poco dopo il 23 ottobre, sul blog di WAYTOePUB, un sito dedicato alle pubblicazioni in formato ePub e sempre aggiornato sulle ultime novità dell’editoria digitale, in merito al problema riscontrato si legge:

Il 4 settembre è stata rilasciata l’ultima versione di EpubCheck che include l’aggiornamento alle nuove estensioni di epub3 introdotte lo scorso 26 agosto […]. Le novità sembrano però riguardare anche altre specifiche del formato: rivalidando alcuni ebook che prima dell’ultimo aggiornamento non davano problemi, abbiamo notato che sia la versione online di EpubCheck che quella per desktop (EPUB-Checker) riportano alcuni errori finora mai riscontrati. 38 La soluzione proposta è la seguente:

Si è provato a seguire tale consiglio. La modifica del media-type della font ha risolto sicuramente il problema in fase di validazione, ma sembra questa non sia più

accessibile alle applicazioni di lettura. Una volta ‘risolti’ i problemi riscontrati durante la validazione, è comunque necessario controllare il proprio eBook su

diverse app come si è fatto nelle fasi di produzione. In questo caso, comunque, non si tratta certo di una soluzione ottimale, la modifica esclusiva del media-type

assomiglia a un palliativo più che a una reale soluzione. Il problema tuttavia è un altro. Quali specifiche vanno seguite? Una possibile — logica — soluzione è evitare di utilizzare le font TrueType — si consiglia di usare il formato Opentype.

Dimenticanza o ripensamento, sono problemi a cui purtroppo bisogna fare attenzione. La tecnologia ePub è in continua evoluzione, e spesso, tra la moltitudine di validatori o applicazioni disponibili, diventa complesso fornire ai propri lettori un prodotto perfetto.

4.3 Perché un libro dovrebbe essere interattivo?

Parafrasando quanto descritto in Epub3 Best Practices, per molti lettori

l’immutabilità di un libro è un pregio, non un difetto. Un libro non richiede l’essere cliccato, commentato, condiviso o twittato, ma solo di rispondere ai bisogni e ai

Core Media Types, idpf, url:

http://www.idpf.org/epub/301/spec/epub-publications.html#sec-core-37

media-types

Cosa cambia nell'ultima versione di EpubCheck, WAYTOePUB, 2015, url: http://

38

(20)

pensieri del lettore. Questo è un elemento da tenere in considerazione, ovviamente, ma non deve essere un freno: ci sono casi in cui la natura statica di un libro è una costrizione dovuta al formato cartaceo, e se la tecnologia ci aiuta e il progetto lo richiede, grazie all’ePub un libro può diventare interattivo. Nel nostro caso, infatti, è stato possibile includere nella stessa pagina elementi iconici e testuali su due livelli differenti. Al di sotto della fotografia è stato posto un bottone il cui evento associato richiama una funzione che fa apparire dall’alto la descrizione. Si tratta di una funzione che scambia un nome della classe dell’elemento contenente il testo in questione, con un’altra formattata per apparire sullo schermo. Oppure, toccando le fotografie a dimensioni ridotte, è possibile ingrandirle a tutta pagina permettendo inoltre di mostrare la didascalia a esse associate.

L’interazione è una delle potenzialità più affascinanti in un ePub, ma è anche uno degli elementi più insidiosi, proprio perché si tratta di avanguardia. Tanto per cominciare, lo standard ePub3, pur supportando l’interazione, non garantisce la leggibilità su tutti i device, con tutti i problemi che ne derivano. 39 L’IDPF fornisce delle specifiche ben precise da seguire, ma molti sono coloro che, tra sviluppatori di app o creatori di eBook in formato ePub, non le rispettano.

Ad esempio, un editore digitale nella fase di elaborazione di uno script, deve tenere in considerazione anche gli eventi esterni a quelli creati appositamente per la pagina. Questa infatti è inserita all’interno di un’applicazione, inserita poi all’interno di un device. Ogni scatola ha quindi una personale risposta alle interazioni fornite dall’utente. Per esempio, se si volesse creare un gallery, si deve tenere in

considerazione che gli swipe left e right per lo slittamento delle immagini, andranno a sovrapporsi agli swipe letti dall’applicazione per il cambiamento di pagina. Ad oggi, solo iBooks riconosce la gallery come tale, ma è necessario crearla tramite iBooks Author. Oppure, un semplice touch a un bottone o a un blocco sensibile, provocherà sia l’evento a esso collegato, sia la comparsa del menù dell’applicazione, oscurando così parte della pagina.

Come già accennato, più ci si spinge in là con le interazioni, più si restringe la possibilità che l’ePub sia egualmente fruibile su più device.

Per evitare di dover produrre un ePub leggibile su un’unica piattaforma, la strategia consigliata è quella di operare a strati: partire cioè da un contenuto accessibile a tutti, e da lì aggiungere ‘strati’ di interattività sempre più complessi basandosi non solo sulle caratteristiche del device ma anche sulle capacità del lettore e sul pubblico di riferimento. In questo modo avremo un prodotto di base adatto a tutti, che però su determinati device acquisterà caratteristiche aggiuntive.

Epub interattivi: i consigli dell’IDPF, waytoepub, 2014, url:

http://www.waytoepub.com/blog/epub-39

(21)

Questo ‘lavorare a strati’, è in realtà un principio di design coniato da Steven Champeon nel 2003 che prende il nome di progressive enhancement.

Progressive enhancement is a design principle in which the goal is to develop the most accessible version of content first, as the primary version, and gradually add layers of enhancement based on the capabilities of the reading system, device, and end user. While the final product of a progressive enhancement workflow can be indistinguishable from one arrived at via a graceful degradation approach, the intent behind progressive enhancement is to view the accessible version of the content as the canonical one, rather than designing a high-resolution, heavily visual, interactive experience as the ‘real’ content and then downgrading that presentation to an accessible version as an afterthought. 40

In particolare, per il nostro progetto sono stati creati due diversi fogli di stile: il primo, default.css, per gli eReader eInk, contiene le proprietà basilari per la formattazione del testo e delle immagini, a cui poi si è aggiunta la proprietà

display:none ai blocchi non leggibili dagli eReader dedicati; il secondo, stile.css, 41

contiene invece tutte le formattazioni per il layout fisso. Per quest’ultimo, le proprietà sono state inserite in un media query a cui come parametro è stato

dichiarato un orientation:landscape così da risultare escluse per gli eReader dedicati. I due fogli di stile sono stati poi inseriti all’interno delle pagine XHTML secondo l’ordine di presentazione. In questo modo, per la gerarchia a cui i fogli CSS sono sottoposti, le proprietà contenute in stile.css vengono soprascritte da quelle contenute in default.css esclusivamente dai dispositivi che leggeranno correttamente la media query.

Tutti gli autori di contenuti ePub3 sono fortemente incoraggiati a prendere in considerazione lo sviluppo di pubblicazioni interattive in un approccio progressive enhancement, limitando anche gli script di ‘qualità’ nei soli casi necessari;

garantendo così che la presentazione statica contenga tutti i contenuti necessari alla corretta fruizione del libro.

Garrish 2014, url cit.

40

In questo modo l’elemento non viene mostrato; o meglio, è come se non fosse nemmeno presente

41

nel documento, in quanto non genera alcun box. L’uso del valore none, è uno dei mezzi con cui, nei CSS, si può nascondere un elemento. Per approfondire si legga CSS Layout - The display Property, w3schools, url: http://www.w3schools.com/css/css_display_visibility.asp