epub3 e le altre futuribili forme degli ebook

Epub Annalisa Guerisoli

3

e le altre futuribili forme dell’ebook

1

Accadema di Belle Arti di Carrara Corso di laurea triennale in Arti Multimediali Tesi di Laurea ePub3 e le altre futuribili forme dell’ebook di Annalisa Gueriosoli

Relatore Enrico Bisenzi 2

Epub Annalisa Guerisoli

3

e le altre futuribili forme dell’ebook

3

4

Uno dei mali della nostra epoca consiste nel fatto che l’evoluzione del pensiero non riesce a stare al passo con la tecnica, con la conseguenza che le capacità aumentano, ma la saggezza svanisce.

(Bertrand Russell) a Emi

5

Indice

9 Introduzione I

L’evoluzione del libro

11 12 17 18 23 24 26 31

E-book E-book e libro cartaceo E-book ed ambiente E-book e il mondo del lavoro Gli e-book e le scuole sperimentali Il boom degli e-book I DRM Formati e-book

II Creare un e-book 35 35 37 38 41 44 44 73 74 75

Tipi di e-book Standard La codifica del linguaggio Leggibilità Accessibilità Usabilità Creare un e-book ex novo Software per la creazione di e-book Convalidare Visualizzare la nostra pubblicazione

III Il nuovo HTML5 77 79 80 84 85 94 103 104 105

6

Storia HTML HTML5, tutto un altro web!

Markup semantico Microdati Le Api CSS3 Un browser migliore HTML5 e accessibilità Imparare l’HTML5

IV L’esordiente ePub3 107 107 118 120 132 133

Storia ePub Formati che cambiano Arricchimento semantico Esperienza multimediale Pubblicazioni digitali accessibili ePub e il mercato

V Progetto sito internet 135 135 143 145 147

Il progetto Organizzazione del lavoro Considerazioni cross-browser Test finali Conclusioni

VI Obiettivo e-book 149 149 154 170 170

Scopo del progetto Impostare il lavoro Inserire i contenuti Impacchettamento Conclusioni

VII Un futuro di libri 171 172 174 175 177 178 180 181

Ieri e oggi Potere agli autori Nuovi modelli di business Social reading Biblioteche e digital lending E-book e social learning Nuove figure professionali Pensieri analogici per produzioni digitali

83 Bibliografia 185 Sitografia 7

8

Introduzione

Tutti i cambiamenti hanno sempre fatto parte della vita dell’uomo suscitando paure e preoccupazioni. Lo stato di rivoluzione indotto da questi cambiamenti diventa stato di evoluzione quando questi vengono assorbiti e integrati nelle proprie abitudini.

La rivoluzione ebook sta facendo evolvere rapidamente il mondo dell’editoria e, come uno tsunami, sta stravolgendo le abitudini del lettore abituale.

La rivoluzione e-book è l’oggetto di questa tesi che va ad analizzare cosa siano gli ebook e come vengono strutturati, oltre ai fattori dell’impatto degli e-book nel mondo dell’editoria e della scuola fino ad ipotizzare alcuni scenari futuri..

La mia tesi si soffermerà principalmente sullo studio del nuovo epub3, il formato standard per gli ebook, che potrà migliorare notevolmente la qualità del libri digitali rendendoli multimediali ed interattivi.

L’ePub3 viene strutturato con html5 e CSS3, di seguito ho analizzato approfonditamente questi due linguaggi tanto attesi nel web.

Nella tesi esporrò due miei progetti, un sito internet appositamente creato in html5 e css3 e un eBook in formato ePub3.

I due progetti sono interconnessi fra loro, il sito internet ha la funzione prettamente esplicativa di cosa sia un ebook in formato ePub e dal sito stesso il navigatore potrà scaricare il mio secondo progetto: un eBook in formato ePub3.

Quest’ultimo è stato realizzato per dimostrare alcune delle concrete potenzialità multimediali di questo formato.

9

10

L’evoluzione del libro 1 Dal libro “4° Rivoluzione” di Gino

Roncaglia. L’uomo ha attraversato 4 importanti rivoluzioni nel modo di comunicare: 1° passaggio dall’oralità alla scrittura, 2° passaggio del supporto dalla forma rotolo alla forma libro, 3° invenzione della stampa a caratteri mobili di guttemberg, 4° E-book e book reader

1.1 E-book E-book è il diminutivo inglese utilizzato al posto di elettronic book ed è attraverso l’impiego del termine elettronic che si nasconde tutta la magia di quest’oggetto.

Un libro elettronico è un supporto fisico, senza carta e senza copertina rigida.

Gli e-book sono file di vari tipi di formato eseguibili sia con il computer sia con dispositivi mobili e possono rappresentare testi, romanzi, manuali o guide.

Ormai da anni siamo abituati a leggere testi in un formato elettronico tramite computer o messaggi sul cellulare, ma con l’introduzione dell’e-reader stiamo assistendo ad una vera e propria rivoluzione.

All’interno di un piccolo dispositivo, largo al massimo come un libro, è possibile infatti inserire migliaia e migliaia di testi.

Il filosofo greco Platone diffidava della parola scritta su carta affermando che“le parole scritte sono in silenzio e non possono parlare nè rispondere alle domande”, oggi rimarrebbe stupito di fronte alle capacità di ricreare testi in formato digitale capaci anche di contenere file audio e video.

Ciò che si trova alle nostre porte è un cambiamento radicale delle nostre abitudini.

Oggi possiamo immaginare, ed in parte già sta accadendo, studenti che, attraverso l’uso di appositi dispositivi, portano nella propria aula di lezione un tablet in sostituzione dei pesanti libri di carta e libri tecnici che, oltre a tutorial, possano contenere lezioni con testo e video.

L’e-book è considerato la “4° rivoluzione1”, perchè sta cambiando non solo il mondo dell’editoria, ma anche il mondo degli usi e dei consumi delle persone.

L’introduzione di questa nuova tecnologia sta creando però non pochi problemi che vanno affrontati e tenuti in considerazione.

11

1.2 E-book e libro cartaceo Gli amanti del libro cartaceo sostengono che il libro digitale non sarà mai al pari del libro fisico in quanto il primo è freddo e privo di materia; chi poi come me ama i libri, non riesce nemmeno ad immaginare una vita senza essi, perchè con un libro si crea un rapporto tattile. È importante, secondo il mio punto di vista, non perdere questo contatto con il libro; poterlo toccare, annusare, sfogliare, il poterlo tenere tra le mani sono tutti gesti che fanno amare ancora di più la lettura tradizionale.

Ogni cambiamento tecnologico avvenuto negli ultimi anni, ha sempre portato con sé scompliglio e confusione, almeno inizialmente. Pensiamo a quando noi giovani abbiamo incominciato ad utilizzare i lettori cd per ascoltare la musica, o chiediamo ai nostri genitori e nonni come è stato per loro utilizzare le prime volte la lavatrice. A loro sembrava un “mostro” rettangolare che faceva un gran rumore e girava velocemente ed il vero vantaggio del suo utilizzo è stato chiaro con il passare del tempo.

Credo quindi che, pur continuando ad amare il libro cartaceo, con il passare del tempo impareremo ad accettare ed a capire la comodità dell’uso dell’e- book e lo si utilizzerà sempre più.

2 Marketing e Research Resources Inc ha intervistato 1200 persone possessori di Kindle, Sony e iPad. L’indagine è stata commissionata da Sony Inc

12

L’ ebook vanta quindi notevoli vantaggi dal punto di vista pratico.

Come già scritto precedentemente, è infatti imbattibile per quanto riguarda lo spazio, notevolmente ridotto, e per la comodità di trasporto.

Il prezzo, inoltre, sarà inferiore rispetto a quello proprio dei libri cartacei, questo aspetto sarà fondamentale per incentivare lo sviluppo di questo mercato soprattutto tra i giovani. La prospettiva verso cui si sta lavorando è che, attirati dal costo accettabile del prodotto e dal fatto della sua facile reperibilità, aumenti tra i giovani la media annuale di libri letti.

Secondo una recente intervista si è dimostrato che, chi possiede un e-reader legge il 40% in più rispetto a quando non lo possedeva2 e che il numero medio di ebook letti in un mese è di 2.6 per i proprietari di un e reader, contro la media di 1,9 di chi continua a leggere il libro carta.

1.2.1 Gli e-Book Reader Con il termine inglese “book reader” parliamo di un dispositivo portatile che consente all’utente di leggere, in modo confortevole, i libri digitali.

Spesso erroneamente vengono chiamati semplicemente e-book non tenendo conto che, definendoli invece Book reader, si intende definirne sia la parte hardware, intesa come tutto ciò che compone il dispositivo stesso ( microchip, plastica, schermo etc), sia il software, intesa come “mente interna”, che permette la lettura del file in oggetto.

1.2.2 Caratteristiche di un book reader Come possiamo capire quando un book reader ha tutte le caratteristiche per essere acquistato?

A mio personale giudizio, dopo un’attenta analisi del prodotto, sono giunta alla conclusione che un buon book reader, per considerarlo tale, deve possedere molteplici elementi, ma quello fondamentale è che l’utente, mentre lo utilizza, deve avere l’impressione di avere tra le mani un libro cartaceo.

Cercherò di elencare quelle che, a mio avviso, sono le caratteristiche fondamentali che deve possedere.

13

Lo schermo Il dispositivo deve possedere uno schermo non riflettente, in modo da rendere la lettura meno stancante e per rendere l’esperienza della lettura paragonabile al modo in cui siamo stati abituati a leggere fino ad oggi.

Lo schermo è il motivo per cui si acquista un book reader dato che fa sembrare le pagine di un e-book simile a un foglio di carta, dunque è visto come caratteristica fondamentale.

Come nella carta ci sono libri con qualità di carta diverse a cui corrisponde anche un colore diverso dal bianco al giallo, anche negli book reader vale lo stesso discorso.

Più uno schermo è performante, più lo sfondo sarà tendente al bianco altrimenti si avvicinerà sempre più al colore grigio.

3 dal post “E-Ink: cosa è l’Inchiostro Elettronico degli Ebook Reader” [ h t t p : / / w w w. g i a c o m o b r u n o . i t / index.php/2008/10/06/e-ink-cosa-elinchiostro-elettronico-degli-ebookreader/]

Illustrazione 1: inchiostro e-ink

Per riuscire nell’intento di ricreare una illuminazione il più naturale possibile, viene utilizzata la tecnologia e-ink caratterizzata dall’utilizzo di uno schermo ad inchiostro elettronico nel quale i caratteri vengono “scritti” elettronicamente, presentandosi quindi quasi esattamente come una pagina stampata, tecnologia questa che ha migliorato notevolmente il contrasto dei colori nel display.

La carta elettronica (e-Ink) è rappresentata da sfere caricate elettricamente; una semisfera è positiva e colorata di nero mentre l’altra semisfera è caricata negativamente e colorata di bianco. Tramite campi elettrici si possono orientare le sfere per ottenere il cambio di colore nei vari punti dello schermo3.

Funzionamento

La risoluzione è migliore di un normale schermo LCD e , non essendo retroilluminato, si legge molto bene anche in piena luce solare, mentre , come un normale libro, non si legge al buio.

14

Gli e-book possiedono anche il grande vantaggio di consumare pochissimo,in pratica solo quando si sfoglia il libro per cambiare pagina. Anche da spenti conservano l’ultima schermata, sostituendosi perfettamente al “vecchio” segnalibro.

Le Dimensioni Un buon reader deve avere dimensioni e peso limitate.

Esistono in commercio ebook reader a partire da 5’ pollici fino ad arrivare quasi a 10’.

I dispositivi più utilizzati,e forse da preferire, sono quelli da 6’ che riproducono esattamente la dimensione di un classico libro di lettura, pur essendo sicuramente più leggeri.

Il consumatore che invece cerca nel prodotto maggior compattezza e facilità nel trasporto, opterà per un lettore da 5’ equivalente circa alle dimensioni di uno smartphone, solo un po’ più largo.

Infine c’è chi usa gli ebook reader per lo studio e per la lettura di pdf, giornali, riviste e fumetti e,in tal caso, la scelta obbligata è per un modello da 9.7’ pollici.

Connettività 4 Con il termine download si definisce l’azione di acquisire dalla rete un file.

Gli e-book reader di ultima generazione presentano anche la connessione a internet che permette con più immediatezza l’acquisto o il download4 dei testi digitali.

Ulteriori caratteristiche Facilità di utilizzo user-friendly. Il software è intuitivo grazie alla gestione autonoma dei caratteri di lettura che l’utente può modificare a seconda delle proprie esigenze personali.

Anche la durata della batteria è una caratteristica da tenere in considerazione.

Ovviamente la ricarica durerà in funzione delle caratteristiche proprie di ogni singolo e-book e dalle qualità della batteria stessa, dallo schermo e- ink e dagli schermi a colori. Ho cercato di districarmi, navigando su internet, tra le varie offerte di ereader in commercio e mi sono accorta che esistono reader che permettono al lettore di leggere tra le 5.000 e le 16.000 pagine; questo paragone è valevole se si prendono in considerazione e reader con la funzione di wi-fi spento.

15

1.2.3 E-Book Reader e Tablet Ancora oggi alla maggior parte degli utenti non sono chiare le differenze che esistono tra i due oggetti in esame e, troppo spesso, si commettono errori per la mancata o sbagliata informazione.

Navigando su internet mi sono imbattuta in una richiesta di una ragazza portatrice di handicap visivo che aveva fatto domanda alla sua Asl di competenza di un buon book reader per poter leggere i formati di lettura più comunemente utilizzati. Per cavilli burocratici le era stato proposto l’utilizzo di un tablet; lei chiedeva quali fossero le principali differenze tra i due hardware.

Giustamente le è stato risposto che un tablet è uno strumento poliedrico e multifunzionale,capace di soddisfare innumerevoli funzioni paragonabili a quelli di un notebook, mentre il book reader viene utilizzato esclusivamente per la lettura di testi digitali.

Un tablet non è un book reader e un book reader non è un tablet perché soddisfano esigenze differenti e le loro caratteristiche, anche se ad una superficiale analisi possono sembrare uguali, non lo sono affatto.

Ciò che rende diverso un tablet dal book reader è la retroilluminazione dello schermo che, essendo attiva, non solo lo rende non adatto alla lettura in qualsiasi ambiente, ma il suo utilizzo scarica in tempi rapidi la batteria dello stesso (la maggiore illuminazione comporta un forte dispendio di energia e quindi un abbassamento in tempi brevi della ricarica dello strumento in esame).

Sulla spiaggia, d’estate, con un tablet si fa molta fatica a vedere lo schermo, e dopo poche ore, la batteria è scarica.Tutto questo non accade utilizzando un book reader.

A mio avviso il rapporto che intercorre tra questi due prodotti di ultimissima generazione è, per molteplici aspetti, simile a quello che c’è tra il cellulare e la macchina fotografica. Il cellulare, come il tablet, possiede tante funzioni tra le quali quella di scattare delle fotografie, mentre la macchina fotografica è prodotta unicamente per fare foto, e le fa molto meglio, con una risoluzione decisamente maggiore Tablet ed book reader non sono quindi prodotti in alternativa, fanno cose diverse e, con il passare del tempo, quando prenderanno piede sul mercato, sicuramente li possederemo entrambi.

16

1.3 E-Book ed ambiente 5 Dal sito JackTech nel post: “Sony:ebook meglio della carta in 5 anni” del 10 giugno 2010 [http:// www.jacktech.it/news/hi-tech/ business/sony-e-book-meglio-deilibri-di-carta-entro-5-anni]

Ci troviamo di fronte ad una generazione che si evolve, con usi e costumi in continuo mutamento. Una previsione della multinazionale Sony sostiene che l’e-book sostituirà quasi completamente l’uso del libro cartaceo entro 5 anni5.

Questi sono dati molto importanti se li valutiamo anche dal punto di vista ecologico.

La discussione tra e-book e libri cartacei è un dibattito molto acceso.

Produrre meno libri cartacei ridurrà l’abbattimento di alberi e l’utilizzo di inchiostro e di acqua, ma è altresì vero che l’uso di book reader sarà una vera e propria bomba ecologica sia dal punto di vista della sua produzione che del suo smaltimento.

Ad una prima analisi superficiale si potrebbe credere che utilizzare l’e-book sia un modo per definirsi ambientalisti, ma si cade in errore.

Un ebook e il suo supporto producono e consumano infatti diossido di carbonio, acqua e prodotti chimici pari a quelli che vengono prodotti dal supporto cartaceo.

6 Da Pianetaebook.com, post “Salva l’ambiente, leggi un eBook!” del 25 agosto 2010 [http://www. pianetaebook.com/2010/08/salvalambiente-leggi-un-ebook-1616]

L’unico modo per cercare di essere il più ecologici possibile è di comprare un reader, magari a pannelli solari, per sfruttarlo e tenerlo un paio di anni6.

Il WWF si è schierato totalmente dalla parte degli e-book e, per ricordarci quanto sia importante lasciare un ambiente sano alle nuove generazioni, ha creato il formato .wwf, un formato pdf limitato ovvero non stampabile per frenare la mania, ormai sempre più diffusa, di stampare per poi cestinare subito dopo.

Questo è un modo per farci riflettere sui nostri gesti, anche quelli che crediamo più scontati, ma che hanno invece un grande peso sul nostro ambiente.

17

1.4 E-Book e il mondo del lavoro Il libro cartaceo, per arrivare nella mani del lettore, deve attraversare molteplici passaggi.

Inizialmente deve essere accettato (fatto non semplice) dalla casa editrice, per poi passare attraverso diversi canali di distribuzione.

Questo complesso e articolato funzionamento porta ad inflazionarne notevolmente il prezzo e ad allungarne il tempo di messa in vendita.

Il progresso tecnologico a cui stiamo assistendo cambierà del tutto la struttura del mondo dell’editoria; i passaggi, i tempi ed il prezzo saranno dimezzati, per cui gli e-book potranno essere subito immessi sul mercato e potranno essere venduti ovunque.

Il carattere fisico del libro di carta richiede,inoltre,una struttura produttiva e distributiva molto onerosa e complessa, perché si deve tener conto sia della quantità di libri da stampare, sia delle copie ferme in magazzino (le rimanenze) e il risultato finale che si ottiene è un prezzo di listino molto elevato.

1.4.1 Vecchie e nuove professioni L’utilizzo di e-book comporta, ovviamente, anche cambiamenti dal punto di vista delle figure professionali impegnate nella loro creazione, andando scomparendo quelle classiche che da sempre lavorano nell’editoria tradizionale come i tipografi e i magazzinieri.

7 Dalle slide di Carlo Alberto Baroni [http://www.slideshare.net/ ebooklabitalia/carloalberto-baroniebook-lab-italia-2011]

18

Al loro posto sta crescendo la figura professionale dell’impaginatore digitale, un web designer programmatore che, oltre a saper fare il lavoro del grafico, utilizzando un programma di publishing, sà utilizzare gli stessi linguaggi che si usano per le pagine web7.

La natura digitale del prodotto obbliga, inoltre, le case editrici a dotarsi di un supporto informatico interno o esterno.

Questo nuovo tipo di assetto potrà andare a beneficio delle piccole case editrici e dei nuovi autori.

Questi ultimi si sono visti troppe volte negare la pubblicazione di un loro libro, con il metodo tradizionale, proprio per paura delle giacenze di magazzino invendute.

8 Il prezzo dei libri cartacei è dato dalla somma dei passaggi di distribuzione e la percentuale di guadagno dell’editore. L’autore speso non riesce a percepire neanche la metà del prezzo del libro e questo succede perchè ha pochissimi diritti.

Da “Elogio degli e-book” di Mauro Sandrini

Anche il ruolo dell’editore muta notevolmente perché viene ridimensionato il suo essere detentore dei diritti d’autore8 e dovrà sapersi adeguare alle nuove esigenze di mercato.

L’editore dovrà sapersi evolvere verso una figura più marketing oriented, rinunciando quindi ai suoi antichi privilegi e costruendo con l’autore un rapporto di fiducia e di supporto e meno di sudditanza.

Come ho precedentemente descritto, il carattere del libro cartaceo è dispendioso e, per rientrare delle spese sostenute, spesso e volentieri l’editore diventa anche il detentore della proprietà intellettuale dell’autore, vincolandone le scelte e la capacità di “azione” al momento della stipula del contratto.

I protagonisti di questa rivoluzione sono prima di tutto i lettori e i professionisti del settore, quali gli autori, gli editori e i librai.

Chi vivrà un occasione d’oro saranno le case editrici di media e piccola dimensione in quanto potranno vendere autori anche poco conosciuti e, anche per loro sarà un’ottima occasione sia perché potranno essere conosciuti e letti a prezzi contenuti, sia perchè diventeranno gli imprenditori di se stessi.

E’ chiaro che il rischio che si corre è quello di trovare in vendita anche e-book di scarsa qualità, ma saranno i lettori ed il mercato stesso a selezionarne le vendite.

Una casa editrice famosa predilige pubblicare un libro non in base alla qualità dello stesso, ma in funzione del futuro guadagno per cui i testi che vengono promossi sono quelli che porteranno nelle casse della casa editrice in questione facili e sicuri guadagni a discapito di chi veramente ama la scrittura e l’ha scelta come professione di vita. Questi scrittori sono costretti ad autofinanziarsi per poter vedere la propria opera sugli scaffali di una libreria.

Ad oggi una persona “sconosciuta” che decide di pubblicare un romanzo dovrà “pagare” la casa editrice. In media, poter stampare 1000 copie costa non meno di 5.000 euro. I guadagni sono minimi e, solo se poi il libro piacerà al pubblico, la casa editrice deciderà di investirci del proprio denaro per una nuova stampa e per dare il via alla pubblicità dello stesso.

Ancora una volta quello che “tira” un prodotto non è la qualità dello stesso, ma il guadagno che dalla vendita dell’oggetto in questione si può avere.

19

Con l’avvento degli e-book tutto questo sta per cambiare drasticamente. Il mondo digitale offre infatti tutto quello che serve per la creazione e la condivisione dei testi.

Non dovendo più fare i conti con il guadagno delle case editrici che, come ho già accennato precedentemente spesso hanno impedito la pubblicazione di libri per paura di non aver un tornaconto economico adeguato, il rapporto tra lo scrittore e il lettore sarà più diretto e meno dipendente da fattori esterni.

Non solo l’ebook darà l’opportunità agli autori di diventare imprenditori di se stessi grazie all’auto pubblicazione e alle offerte date dalla rete, come la piattaforma Barnels & Noobles che permette, in tre “semplici” passaggi, la vendita on line del proprio libro.

1.4.2 Librerie (come reiventarsi) Per incentivare la vendita dei libri cartacei, già da svariato tempo, viene utilizzato il mondo virtuale di internet e intere catene di distribuzione si sono riversate online.Le stesse,oggi,si sono adeguate ai cambiamenti tecnologici e hanno cominciato a mettere in vendita anche e-book a prezzi competitivi. Vi si trovano una varietà di testi, suddivisi in categorie esattamente alla stregua di una libreria reale e il pagamento avviene tramite carte di credito e carte prepagate. La fruizione di questi siti è abbastanza intuitivo e, anche chi non è abituato a utilizzare internet, può riuscire tranquillamente nell’acquisto dei testi desiderati.

Le librerie tradizionali dovranno essere in grado di “mettersi in gioco” e cambiare totalmente poiché, trovandosi svuotati gli scaffali, prenderanno il posto dei libri molte cianfrusaglie del tutto diverse dai libri.

Già ormai da molto tempo stanno vivendo una forte crisi e, con l’avvento degli e-book, dovranno essere in grado di mutare velocemente per stare al passo con i cambiamenti e non rimanerne schiacciati.

Oggi il libraio è considerato un semplice commesso.

Come reinventarsi? Come riuscire a stare al passo con le nuove tecnologie digitali?

Un buon metodo potrebbe essere il creare, all’interno del negozio, una postazione dedicata dove il lettore potrà scaricare l’e-book con la supervisione magari di un commesso, senza problemi di reso o di libri fuori catalogo.

20

I librai dovranno ritornare ad essere i “consiglieri” dei lettori, e non più solo semplici commessi. Dovranno essere in grado di conoscere testi e autori anche frequentando corsi di formazione per imparare a sfruttare la tecnologia e-book. Le librerie dovranno dotarsi di uno schermo per la consultazione dei testi digitali.

Le opportunità che si aprono all’orizzonte per quelle librerie che saranno in grado di aprirsi al digitale, sono molteplici.

Il capitale d’investimento iniziale per aprire l’attività sarà bassissimo, lo spazio necessario sarà piccolo e non servirà neppure la fornitura iniziale di testi per svariate migliaia di euro (e quindi non sarà più possibile rischiare di avere del materiale invenduto in magazzino.)

Matteo Ulrico Hoepli,della famosa casa editrice Hoepli,sostiene che siamo di fronte ad una situazione di lento cambiamento per cui, entro il 2015, ci sarà un 5% delle librerie che si apriranno al digitale, percentuale che andrà aumentando velocemente entro il 2020, anno in cui le librerie Hoepli aspireranno a diventare e-librerie, con una fruizione 24 ore su 24, con un hardware non di proprietà della libreria e vendita al pubblico di accessori per e-book.

9 Dall’evento Ebook Lab Italia del Marzo 2011

I libri cartacei? Saranno un lusso9 di difficile reperimento e la diminuzione della stampa delle copie cartacee inciderà molto sul prezzo di copertina.

Personalmente credo e voglio sperare che questa sia la visione più drastica ma probabilmente sarà solo questione di tempo e ci abitueremo ad acquistare libri come uno snack a un distributore automatico.

1.4.3 Le biblioteche

10 Ebook reader

Anche le biblioteche potenzialmente potranno svolgere un ruolo fondamentale in questa partita.

La biblioteca di Cologno Monzese ha attivato,ad esempio, un servizio di prestito di device10 copiando sui supporti una piccola biblioteca digitale sia con testi esenti oramai da diritti sia con testi presi da e-book acquistati sul mercato.

A seguire l’esempio della biblioteca di Cologno Monzese, è stata la biblioteca di Empoli, seconda in Italia ad aver attivato il prestito di e-reader. Per ora la biblioteca ha acquistato un numero limitato di ebook, ma, considerando che un reader può arrivare a contenere anche oltre 10.000 ebook, il numero è destinato a crescere.

21

Questo favorirà l’incremento della lettura perchè il cittadino avrà a disposizione una grande quantità di libri e la loro fruizione sarà più rapida rispetto a quella cartacea.

La biblioteca di Empoli ha dato l’esempio affittando, oltre il reader, anche le cuffiette in modo da poter ascoltare gli audio libri e aprire le porte anche alle persone con disabilità visive.

11 Dal post “Empoli è digitale” del sito [http://www.intoscana.it/ intoscana2/opencms/intoscana/ sito-intoscana/Contenuti_intoscana/ Canali/Arte-e-Cultura/visualizza_ asset.html?id=1048453] 12 Dal post “La generazione Internet cresce: l’ebook ha un’altra chance” del sito [http://www.ciaoblog.net/lagenerazione-internet-cresce-lebookha-unaltra-chance//intoscana2/ opencms/intoscana/sito-intoscana/ Contenuti_intoscana/Canali/ Arte-e-Cultura/visualizza_asset. html?id=1048453] 13 Dal sito Teamworld nel post “Amazon - Libri di testo a noleggio” [http://www.teamworld.it/ news/5277/amazon-libri-di-testo-anoleggio.aspx] 14 Si è preso in esempio l’app per ipad “Inkling” 15 Dal post “Inkling: il libro di testo nel tablet “ [www.solotablet.it/tabletimpresa/soluzioni-editoriali/inklingil-libro-di-testo-nel-tablet]

22

“Diffondere o rendere disponibili le nuove tecnologie per la lettura non compromette il valore del libro, ma valorizza l’attività del leggere -dicono dalla biblioteca empolese- e la diffusione degli e-book e dei relativi lettori apre anche nuove prospettive alle biblioteche, considerato che molte collezioni potranno esser acquisite, consultate o scaricate a costi più bassi e soprattutto senza occupare grandi spazi”11.

L’avvento della crisi e l’elevato costo dei libri cartacei, potrebbero far aumentare l’utenza delle biblioteche che, a questo punto, potrebbero diventare protagoniste di una scena vissuta fino a questo momento in modo marginale. Per non soccombere le biblioteche dovranno adeguarsi a questi cambiamenti innovarsi verso il digitale riavvicinando la comunità e magari anche nuovi lettori.

Gli utenti, soprattutto quelli cresciuti a pane, iphone e facebook12, si abitueranno senza alcuna fatica a leggere e-magazine e e-newspaper con la veste grafica identica a quella cartacea e , probabilmente presto anche in Italia, “noleggeremo” i nostri e-book in biblioteca o direttamente sul sito di distribuzione13.

Un nuovo modo di studiare si profila quindi all’orizzonte con dispositivi o applicazioni14 che permettono non solo di sottolineare, e di annotare a margine del testo dell’e-book,ma anche con la possibilità di scambiare gli appunti connettendosi alla rete sempre tramite e-reader15.

1.5 Gli e-book e le scuole sperimentali Gli e-book potrebbero,con il tempo,arrivare a sostituire i libri di testo dei ragazzi in età scolastica e essere un’ancora di salvezza per le tasche delle famiglie strette nella morsa del “caro libri”, incentivato anche dal fatto che, all’inizio di ogni anno scolastico, i libri di testo vanno ricomprati nuovi perché gli insegnanti ne adottano, sempre più spesso, l’ultima edizione disponibile.

Mentre in America si digitalizzano intere biblioteche e il reader in classe non fa più notizia, in Italia inizia a muoversi qualcosa.

Dal 2008 le case editrici hanno iniziato a pubblicare libri scolastici digitali, scaricabili dalla rete, e il governo sta cercando, almeno per alcuni istituti, di dotarli delle rete internet e dei vari strumenti indispensabili per rendere la scuola all’avanguardia tecnologica.

Le volontà del governo di estendere l’adozione degli e-book a tutte le scuole, deficit permettendo, sono state espresse anche dalla legge del 6 agosto 2008 creata per favorire l’assunzione degli e-book a partire dal 2009 poi prorogata al 2014.

16 Il digital divide è il divario esistente tra chi ha accesso effettivo alle tecnologie dell’informazione (in particolare personal computer e internet) e chi ne è escluso, in modo parziale o totale. I motivi di esclusione comprendono diverse variabili: condizioni economiche, livello d’istruzione, qualità delle infrastrutture, differenze di età o di sesso, appartenenza a diversi gruppi etnici, provenienza geografica

Dall’anno scorso ci sono stati diversi istituti che hanno iniziato ad usare ebook e tablet, in maniera sperimentale, tra questi possiamo ricordare Liceo Lussana di Bergamo che l’anno scorso ha fornito a una classe sedici iPad e sei reader. Secondo la Professoressa Dianora Baldi, responsabile del progetto, il bilancio di questa sperimentazione è più che positivo.

Ci si accinge ad evolversi verso una didattica laboratoriale che motiverà maggiormente lo studente e lo renderà più attento.

Probabilmente sarà complicato avvicinare i professori a queste nuove tecnologie.

Da quest’anno prenderà il via la prova su una classe di prima elementare di Sondrio che dovrà sostituire gli e-book al posto dei libri cartacei. Ad ogni alunno sarà affidato un book reader, completamente sovvenzionato dal comune e dalla regione.

Mentre gli alunni non vedono l’ora di salutare l’era Gutemberg, ci sono ancora tanti “se” e tanti “ma” da risolvere nella scuola italiana prima di avere l’adozione completa degli e-book.

La strada è tutta in salita soprattutto dando uno sguardo al dissesto in cui si trova la scuola italiana e il rischio del Digital Divide16 che questa crisi potrebbe portare.

Ma la sperimentazione è importante e gli insegnati dovranno incominciare ad aprirsi a queste nuove tecnologie e a diventare di nuovo studenti.

23

1.6 Il boom degli e-book 17 Dal post “Ebook, questo splendido quarantenne” [http:// www.ebookreaderitalia.com/ebookquesto-splendido-40enne/] 18 Dal post “Buon compleanno ebook” [http://www.pianetaebook. com/2011/02/buon-compleannoebook-5415]

19 Dal post “La Storia dell’Ebook: dal 1968 al 2009” [http:// w w w. g i a c o m o b r u n o . i t / i n d e x . php/2009/02/22/la-storia-dellebookdal-1968-al-2009/]

La modalità di scrivere libri in formato elettronico può essere considerata erroneamente una attività recente , mentre proprio quest’anno l’e-book compie 40 anni!17 Il primo fu creato dal visionario Michael Hart che nel 1971 ricopiò in digitale la “Dichiarazione d’indipendenza degli Stati Uniti d’America”18, inserendola come primo libro digitale del Progetto Gutenberg, che aveva come iniziativa la diffusione di libri elettronici liberamente riproducibili,senza i diritti d’autore o copyright.Negli anni seguenti si cominciò ad immagazzinare libri digitali con le tecnologie proprie del tempo; si è passati dall’uso di floppy disk a quello dei cd-rom.

La più importante svolta si ebbe con la diffusione della rete che vide i primi pionieri lanciarsi nella distribuzione, gratuita e a pagamento, dei primi e-books.

Il 2000 è stato definito “ anno zero” per quanto riguarda i libri digitali,. È stato infatti l’anno del primo caso editoriale, con rilascio esclusivo in e-book, del libro “Riding the bullett” di Stephen King e del premio letterario internazionale riservato agli e-book, il “Frankfurt eBook Awards”19.

Il gran fermento per il fenomeno e-book è dato anche dalla ascesa in campo dei giganti dell’editoria, Mondadori e Rizzoli per l’Italia, e della distribuzione come Amazon negli Usa. Fu chiaro fin da subito che il mercato non era ancora maturo per quel tipo di prodotto digitale.

Illustrazione 2: Statistica Vendite e-book nel mercato Usa dal 2002 al 2008 - International Digital Publishing Forum

Tra il 2008 e il 2009 i quotidiani americani cominciarono ad affiancare alla versione cartacea anche quello digitale grazie anche all’introduzione da parte di Amazon del suo reader “Kindle”e di altri reader con tecnologia e-Ink e la presentazione dell’Ipad della Apple (non specifico per gli e-book).

24

Infatti negli ultimi 2 anni le vendite degli e-book risultano uguali a quelle dei libri di carta.

Illustrazione 3: Vendita degli ebook in Europa dal 2007 fino alla prospettiva futura del 2013 (fonte AIE)

Mentre negli Stati Uniti l’utilizzo del book reader è ormai popolare, in Italia il mercato stenta a decollare, soprattutto per la nostra lentezza nel recepire le rivoluzioni tecnologiche, ma anche perchè, da una visione romantica, siamo lo “stato culla” dell’umanesimo e del rinascimento legati al libro cartaceo come forte simbolo della nostra storia e cultura.

Illustrazione 4: Dati del mercato Italiano delle vendite degli eBook

Lo sviluppo di questo nuovo mercato ha bisogno, oltre che dei dispositivi, anche di piattaforme digitali dove poter scaricare gratuitamente o a pagamento gli ebook.

La reperibilità dei testi deve essere allargata a titoli non solo classici. L’utente deve avere la possibilità di poter scegliere tra una vasta gamma di letture, di tutti i tipi.

20 Dal post “Ebook cerca identità” [ h t t p : / / w w w. i l s o l e 2 4 o r e . c o m / art/tecnologie/2010-10-28/ ebook-cerca-identita-064258. shtml?uuid=AYpi6seCo]

L’economia legata agli e-book ha cominciato a movimentarsi quando i colossi di Amazon.com, Google Books, Ebookstore della Apple e Biblet della Telecom20 hanno deciso di investire in questa nuova sfida tecnologica e il Natale 2010 è stato ribattezzato il Natale degli ebook.

25

Non possiamo ancora giungere a delle conclusioni certe su quanto effettivamente questo nuovo metodo di lettura riuscirà ad espandersi, anche perchè non possiamo esimerci dal ricordare che, in alcuni casi, un e-book costa quanto un libro cartaceo, ma con l’aggiunta, per quello digitale, di una aliquota iva del 21% perchè nell’ U.E.un e-book viene considerato un servizio. Oltre agli e-book che dovrebbero costare la metà del prezzo di copertina c’è da aggiungere anche la spesa iniziale del book reader che varia dai 99 € ai 300 €.

Dobbiamo anche tenere conto della presenza di sistemi DRM, Digital Rights Management, che costano molto ed incidono pesantemente sul prezzo del libro digitale quando questo dovrebbe avere un prezzo competitivo soprattutto se confrontato con il libro cartaceo di cui è diretto concorrente e di cui vorrebbe prendere il posto.

1.7 I DRM Nello sviluppo del mercato degli e-book, come ho appena accennato, non aiuta neanche la limitazione DRM. Cercherò di spiegarne le ragioni.

21 Dal pdf [http://www. mondodigitale.net/Rivista/03_ numero_uno/ebook.pdf]

I DRM, dall’inglese Digital Rights Management, sono sistemi di gestione dei diritti per dispositivi mobili, o, cercando di dirlo con altre parole, sono i sistemi che gestiscono i diritti e le licenze per la fruizione dei contenuti digitali21.

Pensiamo ad una cassaforte. I DRM agiscono come essa e, al suo interno, vengono immessi i “tesori”, in questo caso gli e- book.

Illustrazione 5: Funzionamento dei DRM

26

I Digital Rights Management, tramite accorgimenti tecnici, proteggono o limitano l’uso di un contenuto digitale dalla cosiddetta pirateria digitale, definendo con questo termine l’acquisizione illegale di materiale multimediale senza il pagamento di copyright, diritti d’autore ecc.

I Drm per e-book dovrebbero evitarne la copia e la circolazione gratuita oltre ad impedirne la lettura tramite dispositivi e-reader di aziende concorrenti.

22 Dall’articolo di Stallman “The Danger of Ebooks” [http://stallman. org/articles/ebooks.pdf] 23 Fondatore del movimento GNU 24 Amazon nel 2009 ha cancellato da remoto, nei sui Kindle, milioni di copie legalmente acquistate senza dare alcuna spiegazione.

Copie acquistate e di “proprietà” dei lettori!

Esistono diversi tipi di DRM, quello che un utente può fare con il suo e-book dipende dal DRM che l’editore vi ha installato sopra ed anche dal formato e dal tipo di reader che un utente possiede.

Ci sono Drm che non sono compatibili con certi lettori digitali e per leggere il file è necessario installare software specifici .

Lo scopo dei DRM sarebbe anche legittimo, perchè è importante proteggere le opere dell’ingegno umano, ma si rischia di limitare un mercato molto potente poiché vengono ostacolati i legittimi acquirenti. I sistemi vigenti di protezione limitano le potenzialità degli ebook.

Chi infatti acquista legalmente un ebook non può fare copiaincolla, non può stamparlo su carta, non può trasferirne i file da un supporto all’altro e, se accidentalmente il dispositivo si dovesse rompere, l’e-book potrebbe andar perso.

La limitazione nella condivisione di un e-book fa capire quanto un libro digitale non possa essere considerato del tutto proprietà di chi lo ha comprato.

Se un oggetto è di mia proprietà, dovrei poter essere libera di imprestarlo a chiunque ed, invece, le cose non funzionano in questo modo; se il mio “amico” infatti non possiede lo stesso identico dispositivo, non potrà utilizzarlo.

Spesso quindi potrà accadere che l’utente,stanco delle difficoltà che gli si prospettano nell’utilizzo dell’e book, sceglierà la via più semplice e si affiderà al mercato della pirateria.

In una recente nota22, intitolata “The Danger of E-books”, Richard Stallman23 si scaglia contro i libri digitali e contro Amazon che, oltre a richiedere l’identificazione dell’utente e a far accettare una licenza restrittiva sull’uso dell’ ebook, potrebbe arrivare persino a cancellarlo da remoto24.

27

1.7.2 I DRM: protezione contro l’hackeraggio 25 Pirateria Informatica

26 Tratta da “Remix. Il futuro del copyright (e delle nuove generazioni)”, Lawrence Lessig, fondatore di Creative Commons

Gli editori e le aziende distributrici utilizzano le protezioni per tutelare i propri interessi contro l’ hackeraggio25 e per impedirne la lettura tramite dispositivi per ebook di aziende concorrenti. Tutte queste misure di sicurezza vengono applicate per far fronte al mercato della pirateria, già nota e temuta nel campo cinematografico e musicale, tanto diffusa da averli mandati fortemente in crisi. Legittimo il cercare di salvaguardare,quindi, i diritti d’autore per evitare il download illegale dei file di testi digitali.

Gli studi presentati allo “ebook lab del 2011” hanno dimostrato che il costo contenuto di vendita degli ebook sarà il primo freno al mercato della pirateria.

Come disse Lawrence Lessing “Anche le brave persone diventano pirati in un mondo in cui le regole appaiono assurde26”, ed è proprio così, con questi meccanismi proprietari e macchinosi , si sta provocando una lenta crescita del mercato e danni ingenti alle stesse case editrici.

Il mercato digitale degli ebook può rivolgersi a 4 tipi differenti di Drm: - nessun DRM o DRM free; - Social DRM o watermark; - Apple FairPlay DRM; - Adobe Content Server DRM.

DRM free Adottare un DRM Free significa non applicare all’ebook nessun sistema di controllo. L’utente sarà in grado di fare copiaincolla e di trasferire il libro digitale senza alcuna limitazione, offrendo all’utente la migliore esperienza d’uso. L’altra faccia della medaglia sta nel fatto che l’editore non ha alcun controllo sulla pubblicazione e sulla distribuzione dell’ebook.

Il Social DRM

Il Social DRM, o watermark termine inglese per identificare la filigrana , è un DRM che implica l’inserimento all’interno del libro di una specie di ex-libris in cui compaiono i dati personali del legittimo proprietario. Queste credenziali vengono memorizzate al momento dell’acquisto dell’ebook e sono utilizzate per marcare la pubblicazione, in modo da poter risalire al proprietario con facilità in caso di utilizzo illecito dell’e-book, come se fosse una carta d’identità.

28

Sono DRM che permettono di condividere gli ebook, ma nello stesso tempo condividono anche i dati personali del primo utente che ha acquistato il libro digitale. E’ chiaro quindi che, se un lettore acquista un ebook coperto dal Social Drm, condividerà lo stesso solo con persone fidate.

Il rischio che corre l’acquirente è quello di cadere nella rete dela pirateria informatica e che i suoi dati circolino senza protezione tra milioni di utenti.

Il sapere di avere impresse sull’e-book le informazioni personali, dovrebbe scoraggiare l’utente dall’utilizzare il suo e-book in modo improprio, senza alcuna autorizzazione, sulle reti della pirateria informatica. Questo Drm, a mio avviso il migliore, cerca di instaurare, tra editore e lettore, un rapporto di fiducia.

Il watermark può essere rimosso con molta facilità dall’e-book con un po’ di pazienza e un minimo di conoscenza di html.

Il FairPlay Il FairPlay è il sistema di protezione della Apple e consente la lettura degli e-book solo sui dispositivi marcati Apple dotati dello specifico software iBooks a cui è associato l’account della persona che lo ha acquistato.

L’utente può comprare l’e-book solo sulla piattaforma iTunes della Apple, che prima di permetterne l’acquisto, ne verificherà le credenziali. FairPlay non impedisce la copia dei file protetti, ma non consente la riproduzione su disposivi o software non Apple.

Adobe DRM In commercio è sicuramente il dispositivo più conosciuto ed utilizzato. È infatti supportato da diversi ereader e da diverse piattaforme di distribuzione ebooks (Amazon, Ibs, ecc.) e permette al distributore o all’editore di controllare e di consentire solo determinate operazioni al lettore. La fruizione del contenuto è possibile solo su alcuni dispositivi e su alcuni software associati all’account di Adobe.

29

Quali sono gli svantaggi legati a questo DRM? Non è compatibile con alcuni reader ed è macchinoso nel suo utilizzo.

L’utente, prima di poter vedere l’e-book sul proprio device, deve seguire una procedura di autenticazione, che varia da alcuni secondi ad alcuni minuti, durante la quale avviene una “conversazione” tra il server dell’e-book, il server dell’adobe e il computer dell’utente, conversazione per la quale si richiede una connessione internet ad alta velocità per velocizzarne lo scambio dei dati. Solo se la verifica andrà a buon fine si potrà inizare il download del e-book acquistato.

Prima dell’ acquisto di un e-book è sempre consigliabile,quindi, verificarne la compatibilità con il proprio reader e, nel caso si scelga Adobe o Apple, si deve tener presente che è necessario possedere un account registrato sul sito dell’azienda stessa.

Anche per quanto riguarda l’uso di queste nuove tecnologie già vengono utilizzate azioni atte a rimuovere, craccare in gergo tecnico, le protezioni DRM. Non è mia intenzione dilungarmi nel parlare di questo modo illegale di utilizzare gli e-book ma, essendo purtroppo un fenomeno in continua crescita, mi è sembrato giusto almeno nominarlo.

Il problema privacy Il problema della privacy e della condivisione potrebbe rivelarsi un impedimento insormontabile per molti utenti, che possono non esserne a conoscenza al momento dell’acquisto di un e-book. Facciamo un esempio. Un cliente, recandosi in libreria, per poter mantenere il proprio anonimato durante un acquisto di un qualsiasi libro di testo cartaceo, pagherà in contanti. Al contrario, se un cliente oggi acquista un e-book, è costretto a pagare attraverso una transazione telematica e i suoi dati personali, come primo acquirente, rimarranno nella memoria storica dello stesso. Il cliente non potrà quindi mantenere l’anonimato.

30

1.8 Formati e-Book Ad oggi possiamo trovare nel mercato del libro digitale molti formati di e-book, ognuno frutto di combinazioni diverse di DRM; le stesse aziende concorrenti hanno sviluppato diversi sistemi per la realizzazione di file e-book. La possibilità di scegliere tra molteplici opportunità, ad una prima visione, può sembrare una opportunità per il lettore, ma in realtà sta creando molti problemi.

Facciamo un esempio. Gli e-reader creati da Amazon, per ora, sono compatibili con un solo formato file del quale Amazon stessa ne è proprietaria. L’utente che possiede il reader kindle si vedrà quindi costretto, durante l’acquisto del proprio e-book, a collegarsi esclusivamente ad Amazon.com. Siamo in una fase di transizione e per ora i Kindle non supportano altri formati, ma all’orizzonte sembra aprirsi uno spiraglio....

I conflitti creati dai meccanismi proprietari sono tutti a discapito dell’utente finale che, prima dell’acquisto del proprio reader, dovrà informarsi ed essere consapevole con quali formati il proprio dispositivo potrà essere compatibile e quale dovrà essere la tipologia di DRM dell’e-book per essere visionato sul proprio schermo. I principali formati per creare e-book sono PDF, MobiPocket ed ePub. Un e-book può essere letto in diversi modi,e lo si crea attraverso i formati, intesi come un insieme di regole che stabiliscono come il testo dell’e-book deve presentarsi quando viene trasformato in versione digitale.

Il motivo principale per il quale vengono usati i formati è per rendere l’e book il più similare possibile al libro cartaceo.

Ne esistono di vario tipo. Alcuni sono “proprietari”, ossia legati a dispositivi o a particolari software, altri sono “aperti”, ovvero pubblici.

Questi ultimi vengono solitamente gestiti da enti che hanno come fine promuovere e sviluppare settori dell’editoria digitale sostenendo la creazione e l’adozione di standard condivisi e rendendone l’utilizzo libero da restrizioni legali.

31

I formati più diffusi

Sono molteplici i formati. Ho scelto di approfondire quelli che, secondo le stime di mercato, risultano essere i più utilizzati. I formati vengono usati per far sì che l’e-book sia il più similare possibile al libro cartaceo, esistono diversi formati alcuni sono formati proprietari legati a dispositivi o particolari software, altri sono chiamati formati aperti ovvero nel senso che non sono di proprietà di nessuno e per questo sono facilmente compatibili con diversi software/device.

Tra i formati più usati dalle case editrici e dai distributori troviamo questi determinati formati: - Formato Txt; - Formato Adobe PDF; - Formato ePub; - Formato Amazon AZW;

Formato TXT

Il formato Txt ha un estensione .txt, non è un formato molto usato perchè non è considerato come un vero e proprio formato e-book, in quanto non contiene alcuna regolazione per quel che riguarda la suddivisione in paragrafi e capitoli.

E’ un file che contiene solo caratteri e per questo motivo ha il grandissimo vantaggio di adattarsi perfettamente a qualsiasi tipo di dimensione dello schermo.

Formato Adobe PDF

Adobe Pdf è un prodotto creato appositamente per preparare i file alla stampa dalla software house Adobe.

Un documento .pdf è costituito da elementi di formattazione (virgole, grassetti, spazi ecc.), elementi di paragrafo (paragrafi, capitoli, intestazione ecc..), immagini e link.

Lo scopo di questo formato è quello di mantenere il layout originale infatti per avere una visualizzazione del file ottimale dobbiamo utilizzare uno schermo di dimensioni uguali o superiori a quelle del file.

Il .pdf è un vero e proprio formato per e-book. Con il giusto device può regalare, infatti, al lettore un esperienza pari a quella data dal libro cartaceo.

32

Formato ePub

Il formato ePub (acronimo che sta per eletronic Pulication) è un formato aperto creato dall’IPDF (International Digital Publishing Forum, essendo supportato da tutti i produttori di ereader e-ink attualmente in commercio, si sta affermando come lo standard per la realizzazione di e-book.

La caratteristica dell’ePub è il reflow, cioè la capacità di adattare l’impaginazione del testo alla dimensione del display del dispositivo con cui è letto (in questo è uguale al formato testo), quindi adattarsi a qualsiasi medium sia impiegato per leggere (ereader, smartphone, tablet, ecc.) il file .ePub è un archivio .zip che contiene determinati file che si basano su linguaggi ben conosciuti e diffusi (html, xml e css) ovvero i codici che vengono usati per la creazione delle pagine di internet.

Formato AZW

Il formato Azw (o Mobi) è stato creato da Amazon, una delle più grandi librerie del web che ha anche dato vita al Kindle, il lettore e-ink ad oggi più venduto in assoluto.

Questo tipo di formato è figlio del vecchio formato per e-book MobiPocket.

E’ un formato chiuso, questo significa che i file AZW teoricamente possono essere letti soltanto su Kindle, è possibile infatti leggere questo tipo di formato su altri dispositivi convertendo il file grazie al software on line che mette a disposizione l’omonima azienda.

Il Kindle però può leggere anche ebook in formato PDF, Txt, Doc (Microsoft Word) ma, ad oggi, non l’ePub.

Quale formato utilizzare?

A stabilire in quale formato pubblicare l’ebook è la casa editrice a farlo, è però possibile convertire un formato ebook in un altro per renderlo compatibile con il proprio formato ma questo può far perdere all’ebook qualità a discapito dell’utente.

In questo momento tutti gli editori e le librerie italiane on line che vendono ebook hanno deciso di privilegiare i formati ePub e PDF. Chi non ha dimestichezza con queste tecnologie non riesce facilmente a districarsi tra tutti i prodotti su cui poter scegliere.

33

Prima di acquistare un e-book su uno store on line è necessario verificare: - verificare se il formato dell’e-book è adatto al dispositivo di lettura (hardware e software); - verificare la limitazione geografica, infatti alcuni e-book vengono venduti solo per alcuni paesi di provenienza; - prima di acquistare un e-book protetto da un drm, verifica la compatibilità del tuo device con questo sistema.

- accettare le condizioni d’uso imposte dai drm.

27 Dal post “Epub contro AZW” [http://www.ebook-reader.it/news/ epub-contro-azw-formato-dikindle/]

34

Esistono dei convertitori, indispensabili per chi “maneggia” con gli e-book, ovvero dei software che permettono di trasformare un formato in altro. Tra i più importanti possiamo citare Calibre e Sigil, che oltre a trasformare il nostro e-book in qualsiasi formato ci permettono di organizzare la nostra collezione di ebook. Con questi strumenti possiamo catalogare i nostri libri digitali per titolo, autore, data di pubblicazione, dimensione ebook ecc...

La maggior parte dei consumatori, cerca in un formato la qualità della lettura e il numero di libri che si possono trovare.

L’epub è avvantaggiato in questo, perchè oltre alla possibilità di ridimensionare l’ebook alle esigenze, vanta anche milioni di testi che si possono scaricare e leggere sugli book reader.

Anche il formato di Kindle AZW ha un’ottima qualità di lettura e sappiamo tutti che Amazon vanta la più vasta libreria del mondo online, quindi sicuramente non mancheranno i testi a disposizione27.

Creare un e-book 28 Dal post “Cosa sono gli ebook” [http://www.comuniclab.it/23483/ cosa-sono-gli-ebook]

2.1 Tipi di e-book Quando parliamo di e-book intendiamo ipertesti interattivi o testi tradizionali, con un inizio e una fine, fatti di scrittura e di immagini statiche come i libri su carta? Si possono creare entrambe le modalità di e-book sia con una forma testuale lineare o una forma ipertestuale oppure una forma ipermediale28.

La forma testuale lineare è quell’aspetto per cui in ogni racconto e in ogni documento esistono di regola un inizio ben determinato e una fine da raggiungere dopo una sequenza prefissata di pagine e un susseguirsi ordinato di ragionamenti o di vicende narrate.

L’ebook a forma d’ipertesto è una raccolta non sequenziale organizzata in modo da consentire al lettore di scegliere il punto di partenza della sua lettura, il percorso che gli interessa sul momento e la sua conclusione.( es. enciclopedie) Infine la forma di e-book ipermediali si ha quando ai contenuti ipertestuale e al testo scritto si aggiungono apporti multimediali: tipo immagini statiche o in movimento (video, animazioni) sia componenti sonore (brani testuali recitati in audio, effetti sonori d’ambiente e musiche).

2.2 Standard

29 Dalla presentazione di Simonetta Pillon per Ebook Lab Italia del 2011

L’ePub è il formato scelto, dal 2007, per essere il linguaggio standard dell’ International Digital Publishing Forum (IDPF), organismo internazionale per lo sviluppo delle pubblicazioni digitali al quale lavorano università, centri di ricerca e società in ambito sia informatico ed editoriale.

Ma cosa significa essere uno standard?

Con il sostantivo «standard» si definisce un insieme di linee guida,norme e regole che costituiscono il contesto di riferimento condiviso in uno specifico ambito di applicazione29.

Usando questo termine non uniformiamo l’aspetto digitale del libro, bensì la sua struttura composta da metadati, indice, gestione della copertina e struttura dei capitoli, in modo che qualsiasi software, utilizzato nel book reader, sappia come comportarsi per interpretarli in modo corretto.

35

E’ importantissimo creare e-book basandosi su uno standard perché questo ci garantisce la sopravvivenza di questi contenuti nel tempo e il loro utilizzo su diverse piattaforme.

Il formato ePub è il linguaggio più utilizzato dai grandi distributori on line e da numerosi altri dispositivi e applicazioni per lettori.

30 Dal post “ePub” [http:// w w w. u n o e u n o l a b . i t / c m s / index.php?option=com_ content&view=article&id=48]

Quasi tutti gli e-book in vendita oggi sono in formato EPUB, tranne su Amazon e di conseguenza sul Kindle dell’azienda medesima.

Un ebook in formato ePub può essere creato a mano o con un apposito software perché ha di base XML, XHTML per le pagine di testo e il CSS per il layout, i linguaggi usati per creare le pagine web.

L’utilizzo di questi codici, anch’essi Open Source, permette il controllo del testo attraverso gli stili CSS modificabili a piacere.

L’ePub consente di creare e-book con varie funzioni di impaginazione e può contenere immagini in formato PNG,JPEG, GIF e SVG. Ciò significa che il testo può essere ottimizzato a seconda del dispositivo di lettura scelto, come un e-reader, un netbook, un tablet, un pc o uno smartphone30.

Tecnicamente un ePub è uno archivio compresso ZIP, composto da file specifici che servono per la descrizione del contenuto del libro e file che contengono il testo che si andrà a leggere sul reader .

Caratteristiche del formato ePub: - formato aperto; - testo re-flowable; - metadati inclusi; - supporto drm; - utilizzo stili css - possibilità di incorporare font Siamo alla versione ePub 2.0 e per ora i maggiori difetti di questo formato sono legati essenzialmente al fatto che sia ottimizzato per la formattazione semplice di testi (testo a una colonna) e per una grafica essenziale, mentre non è l’ideale per eBook dalla grafica avanzata (es. i fumetti o magazine).

36

2.3 La codifica del linguaggio

31 Presentazione PPT del corso “Informatica per le Scienze Umane”

32 Dalle slide del corso della Prof. Alessandra Zampelli [http:// people.lett.unitn.it/zamparelli/corsi/ IUC/07-08/corsoC08-lez3.pdf]

33 Un programma di desktop publishing (DTP) permette di di creare, impaginare e produrre materiale dedicato alla produzione editoriale (come libri, giornali, riviste o depliant), con possibilità di stampa di ottima qualità. Il termine significa letteralmente “editoria da scrivania” e si riferisce a programmi che rendono veloce ed alla portata raccogliere ed impaginare i contenuti composti di testo e immagini. In pratica permettono di creare precise strutture di pagina, di gestire gli spazi inserendo gli elementi grafici con facilità e di esportare il prodotto in un file adatto alla stampa in proprio o presso una tipografia.

L’e-book rappresenta un testo codificato elettronicamente.

La codifica a livello elettronico, ovvero la rappresentazione digitale di un testo assegnandogli ad ogni carattere una sequenza binaria di 0 e 1 viene definita di livello zero.

Il livello zero rappresenta il primo stadio per la realizzazione di un e-book, ma ciò da solo non basta mentre la codifica di alto livello trasforma il dato testuale grezzo in fonte esplicita di informazione31.

Per passare al livello alto di codifica dobbiamo organizzare il flusso di caratteri e parole in un entità altamente strutturata32: - struttura del testo (l’ articolazione in sezioni, capitoli, titoli, ecc.)

- struttura del contesto (l’autore, la data di produzione, la finalità del testo, ecc) - struttura linguistica (implicita nel testo) Una volta organizzato il testo esso deve essere codificato in modo da renderlo comprensibile al device che dovrà interpretarlo e visualizzarlo e, per questo, sono necessari linguaggi di marcatura del testo, i cosiddetti markup language.

Per codificare il testo utilizziamo i linguaggi di marcatura.

Mediante i tag marchiamo i blocchi testuali e gli assegnamo una particolare interpretazione.

Sembra un operazione complicatissima, ma non è così. Per associare il testo alla codifica abbiamo bisogno di un software come OpenOffice o come i programmi d’impaginazione (Desktop Publishing33) Fino ad oggi l’editoria digitale ha maltrattato il layout del libro digitale svuotandolo della sua parte progettuale e stilistica, anche se in realtà la prima cosa che colpisce il lettore non è tanto il contenuto quanto l’aspetto.

Quando decidiamo di creare un ebook dobbiamo valutare attentamente vari aspetti quali la leggibilità, l’accessibilità e l’usabilità perché dobbiamo ricreare tutte le condizioni necessarie per far si che un testo digitale sia fruibile alla stessa identica maniera di un testo cartaceo e come dice Antonio Tombolini di Simplicissimus Book, se hai bisogno di stamparlo non è un ebook!

37

2.4 Leggibilità Il fattore leggibilità è un criterio fondamentale quando si parla di e-book poiché, quando un libro digitale è illeggibile, è un e-book da buttare.

Quando un libro sarà pronto per essere trasformato in e-book dovrò tener presente alcune caratteristiche fondamentali.

Un libro digitale dovrà essere comprensibile a tutti i tipi di device e per raggiungere questo scopo si dovranno utilizzare specifici accorgimenti atti a rendere leggibile il testo. Esistono due tipi di leggibilità, dall’inglese, legibility e readability: la leggibilità del tipo di carattere tipografico usato e la leggibilità come fluidità della lettura in funzione della struttura linguistica utilizzata.

Illustrazione 6: Principio di Gestalt: vedete un calice o due profili? dalle slide di Vladimir Carrer

Se il secondo è un problema a carico dell’autore e dei correttori, il primo è a carico dell’impaginatore dell’ebook, egli dovrà ottimizzarlo in modo che non sussistano problemi di lettura tra i diversi dispositivi in uso.

Cosa rende una lettura di un ebook difficile o illeggibile? Sicuramente per prima cosa la dimensione dei caratteri e il tipo di font utilizzato.

Senza trascurare la spaziatura tra lettere/parole e righe e l’ordinamento generale della pagina.

A seconda del tipo di book reader potrebbe nascere il problema di scambiare una lettera per il principio di Gestalt.

34 Dal post: “I principi della Gestalt [http://grafica.html.it/articoli/ leggi/300/i-principi-della-gestalt-elimpaginazione-di-una-pagina-web/] Illustrazione 7: A seconda del tipo di carattere possiamo scambiare una lettera per un altra - principio di Gestalt dalle slide di Vladimir Carrer

La Gestalt è una corrente di pensiero secondo la quale la percezione di ciò che ci circonda non è la semplice somma di elementi, ma un unità strutturata di esse34.

La nostra percezione completa le parole e quindi un tipo di font può farci per esempio leggere una O al posto della C. E’ importantissimo per una velocità di lettura ottimale che l’occhio percepisca correttamente le lettere.

L’impaginatore di e-book dovrà tenere in considerazione vari aspetti, ogni device ha il suo punto forte, ci sono reader impostati interamente sulla grafica e altri sul un sistema paragonabile a quello di stampa.

38

Ogni e-book ha quindi una resa a schermo diversa a seconda del reader, questo perché ogni reader interpreta il carattere utilizzato a seconda delle sue funzionalità e caratteristiche.

Fare di un e-book tante versioni quanto i tipi di reader sarebbe da pazzi oltre oltre che dispendioso.

La soluzione ottimale è quella di creare un e-book ottimizzato per qualsiasi ereader e questo può essere fatto usando vari accorgimenti.

S’incomincia proprio dal ragionare in modo diverso rispetto al libro cartaceo, non possiamo usare lo stesso font che usiamo per la carta, ma dovremo utilizzare un font lineare e compatto che lascia il meno possibile margine di errore. Con un e-book di formato ePub possiamo ricorrere al linguaggio CSS, ovvero delle regole che possiamo creare per personalizzare il layout grafico di un testo modificando i font, i colori, i colori di sfondo ecc..

Lo stile di un font può essere modificato usando la regola dei CSS @font-style.

Illustrazione 8 Tipi di font - dalle slide di Vladimir Carrer

Esistono moltissimi tipi di font, ma ci sono due filoni principali che interessano il nostro problema: i font sans-serif e i font serif.

I font sans-serif sono più adatti e leggibili per i monitor che sono a bassa risoluzione (72 dpi). Sono una tipologia di font compatta e robusta. I Serif invece si distinguono per le grazie, ovvero i gambetti, amati dai tipografi per la loro leggibilità su carta sono adatti a un supporto ad alta risoluzione (300 dpi).

Oltre alla tipologia dei font anche la loro grandezza è importante ai fini della leggibilità, la dimensione minima ottimale per un book reader sarebbe 16px. Non possiamo dare per scontato la possibilità di mettere lo zoom, gli e-book vanno creati già ottimizzati.

39

Illustrazione 9 Dimensioni font dalle slide di Vladimir Carrer

Non si deve trascurare neanche il contesto d’uso del carattere, non tanto ai fini della leggibilità, ma rispetto agli attori che giocano intorno al mondo del libro: 1) autore (rispetto, esempio “Promessi Sposi” scegliere un carattere elegante consono alla tipologia dello scritto) 2) editore (identità marchio, a seconda del marchio della casa editrice adatto anche al target a cui è rivolto esempio comics sans – ragazzi) 3) lettore (leggibile/consultabile).

Utilizzare un determinato tipo di font non basta a rendere un testo leggibile, ma bisogna tener conto anche dell’interlinea e dello spazio tra caratteri e paragrafi.

Bisogna lavorare anche sull’interlinea e sullo spazio tra caratteri. Più interlinea e più spazio tra i caratteri danno leggibilità, senza esagerare perché si rischia di fare l’esatto contrario e di rovinare il layout del libro.

Bisogna lavorare anche con lo spazio tra paragrafi soprattutto con gli e-book che riguardano guide o libri di testo,non abbiamo problemi di lunghezza del documento quindi investiamo su queste opportunità semplicemente impostando gli stili CSS.

Illustrazione 10 Spaziatura dalle slide di Vladimir Carrer

Il futuro ci permetterà di creare e-book fantastici che potranno combinare design e leggibilità!

40

2.5 Accessibilità Quando parliamo di accessibilità indichiamo una qualità dei documenti. L’accessibilità ha come obbiettivo la fruizione universale dei contenuti, anche a persone con disabilità cognitive e fisiche che vogliono accedervi grazie all’aiuto di particolari hardware e software anche di vecchio tipo.

Come nel mondo fisico anche in quello digitale esistono delle barriere digitali, ovvero l’impossibilità di poter navigare semplicemente su internet o di leggere un buon ebook.

Rendere il mondo dell’informazione accessibile vuol dire permettere la fruizione di questi contenuti a tutti gli utenti, indipendentemente dalle loro disabilità fisiche o cognitive, e a tutti gli hardware e software utilizzati per accedervi, è una qualità definita dai consorzio internazionale W3C e a livello nazionale dalla Legge Stanca.

In pratica sia il W3C che la Legge Stanca definiscono in questi due criteri come dovrebbero essere costruite le pagine: - consentire una trasformazione della pagina quando si usano strumenti particolari; - i contenuti dovrebbero essere usabili ovvero facilmente comprensibili e navigabili.

Per far sì che un documento sia accessibile bisogna rispettare dei requisiti, non può esserci parziale accessibilità di un testo, o c’è o non c’è.

I requisiti sono delle misure e accorgimenti che bisogna applicare ai nostri documenti, senza entrare nel dettaglio tecnico che si vedrà in seguito, questi requisiti sono delle piccole regole che dobbiamo seguire e che fanno riflettere per quanto sia importante poter rendere un documento fruibile a tutti.

Esempio alla mano: Ho fatto questo semplice testo con un programma di videoscrittura, come p otete vedere c’è un titolo, un titoletto e un corpo di testo con un immagine (Illustrazione n.11).

A livello grafico visuale è immediato vedere qual’è il titolo, il sotto titolo e la parte del testo riguardante il paragrafo poiché è tutta una codifica semantica visuale.

41

Illustrazione 11 Esempio di testo con titoli e titoletti

Le persone non vedenti percepiscono in maniera lineare e consecutiva i contenuti non riuscendo inoltre a poter apprezzare le codifiche grafiche dei titoli e dei titoletti.

E’ necessario aggiungere al documento le informazioni che possono essere fruite dal computer o dalla tecnologia assistiva35. La rappresentazione grafica va allacciata alla grammatica formale.

35 Dalla Legge Stance “«tecnologie assistive»: gli strumenti e le soluzioni tecniche, hardware e software, che permettono alla persona disabile, superando o riducendo le condizioni di svantaggio, di accedere alle informazioni e ai servizi erogati dai sistemi informatici.”

Mentre creiamo il nostro documento dobbiamo assegnare esplicitamente al documento i vari codici standardizzati (Intestazione 1, Intestazione2, Corpo del testo ecc...) che assegnano nomi agli elementi, ruoli e relazioni, le immagini hanno bisogno di un canale alternativo, è necessario inserire una descrizione dell’immagine.

La presenza di questi elementi permette che la tecnologia assistiva e il computer possano ricostruire la pagina e il nostro documento potrà essere considerato accessibile. Questa è solo una parte della mole di lavoro che bisogna fare per rendere accessibile un documento, l’importante è incominciare fin da subito ad avere un occhio per l’accessibilità, una delle prime cose da fare è strutturare il documento in questo modo.

Il web ha già affrontato questa problematica agli inizi degli anni ‘90, quando si è sentito parlare per la prima volta di accessibilità. Sono passati 20 anni da allora, e ancora oggi, si vedono molti siti non accessibili.

Con l’avvento dell’editoria digitale non dobbiamo fare lo stesso errore, non si può restare indietro per pigrizia dicendo: “..perché tanto se non abbiamo messo i codici tag nessuno lo vede..”.

42

Illustrazione 12 E-book reader in braille concepito dai designer SeonKeun Park, Byung-Min Woo, SunHye Woo e Jin-Sun Park

36 Dalla lettera aperta di Donato Taddei [http://www.internettabile. org/iable/main/artView.asp?ID=74]

Gli e-book sono un opportunità enorme per le persone disabili, poiché i libri cartacei in braille sono costosissimi e poco comodi da trasportare mentre l’e-book è sicuramente la soluzione ottimale e apre le porte al mondo dell’informazione e dello studio a utenti rimasti sempre ai margini perché svantaggiati.

Come spiega Donato Taddei nella lettera aperta agli editori di Edigita: “..gli e-book possono essere la tecnologia che abbatterà la barriera che non fa avvicinare gli utenti con disabilità alla cultura, all’informazione, alla scuola.

L’utilizzo del formato aperto ePub potrà essere uno strumento per una migliore fruibilità proprio per le sue ottime caratteristiche..”

Proseguendo con la lettura della lettera si deduce che ciò che preoccupa sono da una parte i DRM, che rendono inaccessibile l’e-book, e dall’altra l’impossibilità di trasferire, anche solo parzialmente e selettivamente, i contenuti a devices alternativi, per esempio software per la stampa braille o a caratteri ingranditi o altro software ingrandente36. Per fortuna, molti reader in commercio sono dotati di casse per ascoltare l’ebook come fosse un audio-libro.

Per un utente con disabilità è molto importante poter scegliere la grandezza e il tipo di carattere, poter mettere un grassetto o levare il corsivo, è necessario fornirgli tutti gli strumenti per poter personalizzare il documento.

Molte case editrici hanno proposto di creare appositi reader per la lettura braille, questo però non è una risoluzione del problema anzi questo non potrebbe neanche essere considerato accessibile in quanto è specifico per una determinata situazione, noi dobbiamo lavorare per cercare di dare le stesse possibilità a tutti..lo stesso livello di opportunità.

43

2.6 Usabilità L’usabilità può essere intesa come la proprietà d’interazione soddisfacente tra utente e oggetto ovvero la capacità di essere compreso e fruito con facilità dagli utenti che lo utilizzano.

Un qualsiasi testo, che sia digitale o cartaceo, deve rispettare le necessità del lettore che ha bisogno di un testo facilmente leggibile e comprensibile.

Per usabilità non intendiamo solo la qualità del testo e della forma linguistica, ma anche tutti quei fattori che riguardano l’impaginazione, gli spazi, l’allineamento ecc..

Ciò non va confuso, come spesso succede con l’accessibilità.

L’usabilità lavora per determinate categorie di utenti, ovvero il target a cui è destinato il libro elettronico lavorando sull’interfaccia e l’interazione, non sul codice come avviene con l’accessibilità.

L’usabilità si può verificare tramite user-experience. Test che vengono fatti con gli utenti e in cui viene raccolta l’esperienza dell’utente più che altro le sue difficoltà nella fruizione del prodotto.

2.7 Creare un e-book ex-novo Esistono due metodi per creare un ePub da ex-novo: - Metodo Bottom-up - Metodo Top-Down Il metodo Bottom-Up è una soluzione che ci permette di avere il pieno controllo della pubblicazione in quanto l’ePub viene creato da zero e al software rimane solo i compiti compilativi e di assemblaggio. Questo metodo richiede una buona conoscenza del linguaggio HTML e CSS. Per iniziare a creare un ePub “a mano” armiamoci di un code editor come Notepad++, distribuito gratuitamente su internet.

Il metodo Top-Down consiste nella creazione di un e-book in formato ePub tramite l’ausilio di un software di publishing.

Si tratta della pratica molto diffusa nelle case editrici, anche se non è una scelta ottimale perché alla fine della conversione l’impaginatore digitale dovrà comunque intervenire sul codice soprattutto su pubblicazioni molto complesse. Più avanti si andrà con la tecnologia più le cose si semplificheranno e i software di publishing arriveranno a un punto in cui non avranno più bisogno di rimetterci le mani.

44

Entrambe le soluzioni hanno dei pro e dei contro, utilizzare un software impaginatore facilita in parte il lavoro e da una parte invece c’è bisogno di intervenire sul codice soprattutto in link complessi dove ci sono immagini e tabelle.

Creare l’ebook da un editor HTML spesso fa risultare il codice sporco e ridondante e questo si traduce in incongruenze di interlinee, margini ecc... Comunque è la soluzione più profonda e professionale perché consente un controllo completo sulla struttura del testo.

2.7.1 Linguaggi Xml

Xml è un linguaggio che ci permette di definire con precisione la struttura di un documento.

Acronimo di eXtensible Markup Language (linguaggio di marcatura estensibile), definito dal W3C, utilizza dei marcatori per descrivere le caratteristiche di un documento.

Un marcatore, detto anche tag, viene rappresentato da questi due simboli: “<”, nome del marcatore e ”>” (<nome marcatore>).

L’acronimo definisce anche la parola eXtensible che è la peculiarità più importante dell’Xml, che non è un vero linguaggio ma un metalinguaggio cioè un linguaggio che permette di creare dei nuovi marcatori specifici.

Questo insieme di marcatori è definito applicazione XML definiti dalle grammatiche XML o DTD (Document Type Definition). Queste grammatiche sono estendibili, di fronte a una nuova esigenza possiamo inserire dei nuovi marcatori e descriverli nel DTD. Da questo si può comprendere quanto sia importante e potente l’XML.

La sintassi <tag1> testo inserito dentro il tag1 </tag1>

<tag1> è il tag di apertura e </tag1> è quello di chiusura, è una formula che va rispettata per indicare con precisione dove comincia e finisce una marcatura. L’insieme del tag di apertura, del contenuto e del tag di chiusura è detto elemento di un documento XML.

45

Possiamo dotare un tag degli attributi che aggiungono informazioni e valore al marcatore e al suo contenuto.

L’attributo viene posizionato nel tag di apertura con il simbolo di uguale (=) e gli apici (“ ”) <tag1

nome_attributo=”valore”>....</tag1>

Oltre a una sintassi corretta è necessario formattare perfettamente il documento xml.

Esistono delle semplici regole da seguire: I nome dei marcatori non devono cominciare con numeri e non devono contenere spazi o caratteri speciali Nessun tag deve rimanere aperto e devono seguire l’ordine di apertura e chiusura: <tag 1> <tag 2> <tag3> </tag3> </tag2> </tag1>

le coppie di marcatura devono essere aperte e chiuse sempre in minuscolo.

Html

Html è l’acronimo di Hyper Text Matkup Language, è un linguaggio basato sui marcatori e su ipertesti, famoso per essere il linguaggio delle pagine web.

La struttura di una pagina in HTML sarà la seguente: <!DOCTYPE attributi che specificano il tipo del documento> <html> <head> <title>titolo del documento</title> </head> <body> tag e testo che personalizzeranno la pagina </body> </html>

Oltre ai marcatori una pagina HTML contiene gli ipertesti che ci consentono di navigare in documenti diversi senza passare dalla struttura sequenziale.

Gli ipertesti sono segnalati grazie a link sulle immagini, sulle parole o su intere frasi.

46

Per la pubblicazione di ebook sono molto importanti alcuni marcatori. I marcatori di titolo “h” che sta per Header: <h1> <h2> <h3> <h4> <h5> <h6>

Titolo Titolo Titolo Titolo Titolo Titolo

1 2 3 4 5 6

</h1> </h2> </h3> </h4> </h5> </h6>

<h1> Questo è il Titolo del mio ebook </h1>

Il marcatore di paragrafo <p> è il tag che rappresenta il paragrafo: <p> Prove tecniche per creare un ebook </p>

Altri tag importanti sono le liste, le tabelle e le immagini.

Le liste sono degli elenchi ordinati, come l’indice di un libro, e nell’html vengono segnalati dal marcatore <ul> per indicare l’inizio della lista e <li> per indicarne ogni elemento.

La struttura di una lista è la seguente: <li>

<ul> elemento 1 </ul> <ul> elemento 2 </ul> <ul> elemento 3 </ul> </li>

Le tabelle servono per contenere dati, il tag che indica le tabelle è <table>. Il marcatore table è composto da righe <tr> e colonne <td>, quindi la struttura html di una tabella con 1 riga e 2 colonne sarà così impostata: <table> <tr> <td> dato 1 </td> <td> dato 2 </td> </tr> </table>

In una pubblicazione non possono mancare le immagini. Per inserirne una all’interno di una pagina html useremo questa dicitura: <img src=”../immagini/copertina.jpg” />

In questa stringa <img> è il tag per l’immagine e src è il percorso che il browser deve fare per andare a prendere l’immagine stessa.

47

Xml + Html = Xhtml

Il web è nato con il linguaggio HTML ma, con il passare del tempo, ci si rese conto che questo tipo di marcatura era ormai obsoleta e non riusciva a rappresentare a pieno le potenzialità grafiche e strutturali che internet e le nuove tecnologie richiedevano.

L’ XHTML, acronimo di “eXtensible HyperText Markup Language”, nasce proprio come integrazione dell’HTML, utilizzandone i tag con l’aggiunta di alcune proprietà del XML e con l’introduzione dei fogli di stile a cascata (Css) che imposteranno la resa grafica.

Dal 2000 ad oggi l’IDPF ha introdotto diverse versioni dell’XHTML: XHTML 1.0, XHTML basic, XHTML 1.1 e XHTML 2.0 quest’ultimo abbandonato a favore dell’HTML 5.

Una pagina XHTML tipo: <?xml version=”1.0” encoding=”utf-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title> La mia prima pagine XHTML </title> </head> <body> <h1>Titolo</h1> <p>Paragrafo</p> </body> </html>

Siamo in un momento di grandissimo cambiamento per i linguaggi del web che vedono l’introduzione del tanto atteso HTML5.

48

2.7.2 Anatomia di un file ePub Un file .ePub è un file compresso nel formato .zip, al suo interno troviamo vari file e directory con caratteristiche specifiche che permettono il funzionamento di una pubblicazione.

La costruzione di file .ePub è descritto in 3 specifiche: - OPF (Open Packaging Format): può essere paragonato a una guida di riferimento per il lettore, questo file con estensione .opf descrive ed elenca i contenuti che compongono una pubblicazione, il sommario, i metadati diventa quindi una sorta di leggenda anche per il reader che sa dove reperire i vari file.

- OPS (Open Packaging Structure): descrive la struttura e i contenuti ovvero la sintassi dell’epub.

- OCF (Open Container Format): descrive come i file che compongono la pubblicazione devono essere archiviati per creare un unico file pronto per la lettura.

Scompattando la cartella .zip troveremo al suo interno questi file e directory: - mimetype (file) - META-INF (directory) - OEBPS (directory)

Illustrazione 13 Struttura ePub di 1° livello

49

Mimetype

Questo file deve essere sempre presente e non può avere un nome diverso, il suo scopo è quello di permettere la corretta identificazione di un file ePub, praticamente è un certificato di riconoscimento a cui i computer e i software fanno riferimento per capire l’identità del formato e in modo da poterlo visualizzare correttamente.

Al suo interno è contenuta una semplice stringa: application/epub+zip

Questo importante file non deve mai essere inserito all’interno di una cartella e non deve essere mai compresso, è per questo che è consigliabile utilizzare dei specifici programmi di compressione: tipo ePub Zip per Mac OS X e ePub Pack per gli ambienti Windows.

Cartella META-INF

E’ di fondamentale importanza per il corretto funzionamento della pubblicazione.

In questa cartella deve esserci obbligatoriamente un file chiamato container.xml che ha come scopo quello di specificare la posizione del file radice (root file).

Se all’ebook è stato applicato all’interno un DRM, in questa cartella potrà esser presente il file rights.xml attraverso il quale potremo avere informazioni sui diritti e obblighi a cui dobbiamo attenerci per la pubblicazione.

Illustrazione 14 Struttura interna di un ePub

50

Il file container.xml ha lo scopo di posizionare un altro file “content.opf”, il più importante, e lo possiamo posizionare nella cartella OEBPS o dentro una cartella con qualsiasi nome nella parte principale dell’archivio.

Cartella OEBPS

Il suo nome è un acronimo di Open eBook Pubblication Structure, ma ormai è convenzione chiamarla così; In realtà questa cartella la si può chiamare come si preferisce.

OEBPS contiene tutti i file che compongono l’ebook, organizzati in cartelle: - i file di testo nella cartella testo/ - i file delle immagini nella cartella immagini/ - il foglio di stile CSS nello style.css - i file dei Font inclusi nella cartella font/ - il file dell’indice NCX nel toc.nxc - il file OPF nel content.opf Il file content.opf contiene: - i metadati dell’ePub ovvero il titolo, autore, lingua, copyright e il codice unicativo dell’ePub (metadati) - Il manifesto dell’ebook cioè l’elenco di tutti i file presenti nell’archivio dell’ePub (manifest) - L’ordine di visualizzazione dei file (spine) Il file toc.ncx ha lo scopo di fornire un indice dell’ebook, viene creato dell’impaginatore ed è a sua discrezione far rientrare o meno dei file all’interno di questo sommario.

2.7.3 Gestione dei contenuti: testo e immagini La gestione dei testi e delle immagini della nostra pubblicazione andranno nelle sotto cartelle di OEBPS, precisamente nella cartella testo/ e nella cartella immagini/ (vedi illustr. n.14).

Il grafico deve trasformare le indicazioni per la grafica e l’impostazione della pubblicazione in markup html e deve preparare un foglio di stile.

Il testo

Il testo è ciò che rende interessante un pubblicazione, nel ePub la buona organizzazione del testo costituisce la base per un buon libro elettronico.

Tutto ciò che che rende una testo cartaceo organizzato con frontespizi, prefazioni, glossari, appendici ecc rimane nell’ebook, l’unico elemento che verrà a mancare è l’indice analitico che viene sostituito dalla funzione di ricerca del book reader.

51

Il file container.xml ha lo scopo di posizionare un altro file “content.opf”, il più importante, e lo possiamo posizionare nella cartella OEBPS o dentro una cartella con qualsiasi nome nella parte principale dell’archivio.

Il testo andrà suddiviso in file XML, con estensione .html, .xhtml o .xml.

Questa suddivisione la troviamo nella cartella testo/ in cui vengono suddivisi per cartelle: cover/ introduzione/ capitolo 1/ capitolo 2/ conclusioni/ Dividere la pubblicazione in più cartelle è buona consuetudine per non rendere la lettura lenta o addirittura illeggibile, perché alcuni device sono programmati per caricare un singolo file alla volta.

Definita la suddivisione bisogna codificare il testo in maniera comprensibile al device tramite i marcatori o tags del linguaggio xhtml.

Il formato ePub non garantisce la resa visiva uguale per tutti i device. Purtroppo ogni reader ha un software diverso installato all’interno, ognuno di questi interpreta (renderizza) la pubblicazione a suo modo mostrandola a schermo in maniera diversa e a seconda delle sue peculiarità.

L’impaginatore di eBook dovrà costruire l’ePub perdendo il controllo totale del media poiché bisogna considerare che oltre al device che renderizza a modo suo anche l’utente potrà cambiare allineamento, la dimensione e il tipo di carattere.

Illustrazione 15 1° Pagina del Cap 1 vista con il software iBooks.Immagini di Sharon Talbot Illustrazione 16 1° Pagina del Cap 1 vista con il software Stanza. Immagini di Sharon Talbot

52

Lo stile

Lo stile che viene applicato a una pubblicazione è definito attraverso il linguaggio CSS. Questo tipo di linguaggio controlla il layout della pagina, tramite alcune regole di stile possiamo definire l’aspetto della pagina (come la dimensione del testo, l’allineamento, il tipo di font ecc..) intervenendo sugli elementi di un documento html.

Anche questo linguaggio è definito dal W3C,in questo momento siamo alla versione CSS2.

Esistono 2 modi per inserire gli stili: inline e internal.

Si dice inline quando le caratteristiche di stile sono inserite all’interno del tag: <h1 style=”color:red”> Il titolo è di colore rosso </h1> Quando le caratteristiche di stile sono posizionate nell’header del file html diciamo che lo stile è internal.

E’ consigliabile, per avere un codice più pulito appoggiarsi, a un foglio di stile esterno collegato al file html con questo codice: <link rel=”stylesheet” type=”text/css” href=”foglio_ di_stile.css” />

Questa stringa di codice andrà posizionata all’interno del head della pagina html.

Sintassi del foglio di stile La sintassi di un foglio di stile è molto semplice, si basa su tre componenti con cui possiamo definire per ciascun attributo dei valori da associare a dei tag nel file html. selettore{ proprietà: valore; } body{ font-famiy: aril; } In questo caso h1 è il selettore, quello che c’è tra le parentesi graffe sono proprietà o attributi del foglio di stile.

Le proprietà indicano dei valori, in questo esempio red e verdana sono i valori dell’attributo color e font-family.

53

E’ importante sottolineare che alcuni device potrebbero non fornire una completa renderizzazione di tutti i valori definiti in una proprietà. Per non imbattersi in problemi di visualizzazione, non potendo testare l’epub in ogni device in commercio, bisogna utilizzare la semplicità.

I selettori Il selettore indica l’elemento HTML su cui deve essere applicata la regola di stile.

La maggior parte dei selettori che utilizzano gli elementi HTML, chiamati selettori tipo, prevedono la semplice indicazione del nome dell’elemento.Es. h1, p, div, body p{ }

text-align: left;

Quando si vuole applicare un regola universale utilizziamo il simbolo asterisco (*) per impiegare una regola indifferentemente a tutti gli elementi di un documento.

I selettori possono usare due differenti tipi di attributi: - le classi (class), indicate con il simbolo del cancelletto (#) - identificatori (id), indicati con il simbolo del punto (.)

Nel file css: .verde{ color: #ffffff; } #box{ background-color: #000000; } Nel file html: <div id=”box”> <p class=”verde”>Il testo è verde</p> </div> Con il selettore class possiamo definire degli attributi che possono essere utilizzati per qualsiasi tipo di tag. L’id invece, a differenza del class, si tende ad utilizzare per parti del testo che si utilizzano una volta sola.

54

Le proprietà Le proprietà che possiamo applicare a un selettore sono veramente tantissime, in questo caso prenderemo in considerazione solo alcune di quelle caratterizzanti un testo.

37 L’elenco completo di tutte le proprietà e valori previsti nella specifica OPS si può trovare presso http://bit.ly/opcss.

In una pubblicazione è importante conoscere le proprietà del testo37: - font-style: definisce la presentazione del font, possiamo scegliere tra italic e normal - font-weght: stabilisce il peso del font, bold o normal - font-size: con questa proprietà definiamo la misura del font, possiamo inserire la misura in pixel o percentuali oppure scegliere tra le parole chiave small, medium e large - font-variant: permette di applicare il maiuscoletto (small-caps) e normal.

Spesso questa proprietà non è supportata da alcuni device.

- color: proprietà che definisce il colore del testo, può essere espressa in rgb oppure con le parole chiave (es. red, white, blue....)

-text-align: stabilisce l’allineamento del testo left,right,center o justify. E’ importante ricordarsi che su alcuni device l’allineamento justify rende difficile la lettura in quanto non viene sillabato il testo. Si consiglia di utilizzare un testo con allineamento a sinistra (left) - text-indent: permette di stabilire il rientro della prima riga di un blocco di testo, possiamo definire il valore in percentuali o pixel; - text-decoration: permette di definire la decorazione da usare sul testo. None per nessuna, underline per il testo sottolineato e line-through per quello barrato. Questa proprietà è molto usata per i link <a> che vengono spesso associati alle parole o frasi sottolineate - color: permette di definire il colore del testo.

Per la creazione di una pubblicazione è importante osservare alcune regole: - non utilizzare immagini di background - non utilizzare un posizionamento assoluto e ne il giustificato - usare la semplicità come regola basilare.

Non essendo possibile testare l’effettiva resa della pubblicazione per ogni device dobbiamo cercare di creare un epub semplice a livello stilistico.

55

Non collegare un foglio di stile a un file a un file ePub comporta la rappresentazione del documento con stili di default sufficienti a consentirne la lettura, testi in nero con sfondo bianco con allineamento a sinistra e un font graziato.

Flusso di testo Il testo di una pubblicazione è codificato attraverso i marcatori html. Questi marcatori si dividono in due tipologie che influenzano il flusso del testo.

La tipologia di un elemento viene modificata attraverso la proprietà display.

Questa proprietà ammette diversi valori ma i più importanti sono: block, inline e none: - block: trasforma l’elemento in un blocco - inline: trasforma l’elemento in un elemento in linea - none: rende un elemento invisibile, presente nel codice html ma assente nella visualizzazione della pagina.

Queste proprietà sono importanti perché non avendo controllo sui device non possiamo sapere come si disporrà il testo nelle varie “pagine” ( es. titoli separati dai paragrafi o immagini separate dalla didascalia), questo evento viene chiamato fenomeno delle vedove e delle orfane.

La soluzione per ovviare a questo problema è di utilizzare la proprietà display con valore inline-block.

Questo accorgimento non è ancora supportato dalle specifiche OPS ma viene supportato dai maggiori software di rendering degli ebook, come Adobe Digital Editions e iBooks.

Non essendo nelle specifiche OPS questa tecnica va usata con molta attenzione perchè potrebbe causare problemi durante la lettura anche se è la tecnica più usata.

Un altro valido aiuto per contenere il problema delle orfane e delle vedove è quello di inserire nel foglio di stile la famiglia delle proprietà page-break: - page-break-before: permette di definire quando un elemento deve incominciare su una nuova pagina. Tra i valori possiamo trovare always (sempre esempio tra un titolo e il primo paragrafo seguente) e avoid (mai usato per esempio tra un immagine e una didascalia) - page-break-after: permette di definire quando un elemento deve essere seguito da una nuova pagina indipendentemente dallo spazio disponibile. Tra i valori si usa always per dire sempre e avoid per dire mai - page-break-inside: ammette come solo valore avoid che dichiara che un elemento non deve essere mai spezzato tra due o più pagine ( es. una tabella)

56

Naturalmente queste regole sono sempre soggette alla misura dello schermo del device su cui l’ePub viene visualizzato, un paragrafo che non può essere contenuto in una sola pagina sarà spezzato indipendentemente dalle regole applicategli.

Illustrazione 17 Esempio di box-model

38 Distanza tra il contenuto e il bordo 39 Distanza tra il bordo e gli altri elementi

Un singolo blocco di testo può essere personalizzato andando a modificare i suoi elementi caratterizzanti come i margini i filetti e gli sfondi.

Un blocco di testo può essere definito box model ed è definibile tramite le proprietà dell’altezza, larghezza, bordo, padding38 e il margine39.

File XHTML: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>Esempio box-model</title> <link href=”senza titolo.css” rel=”stylesheet” type=”text/css” /> </head> <body> <div class=”box-model”> <p>Hello Word</p> </div> </body> </html>

57

l foglio di stile del nostro box-model: @charset “UTF-8”; .box-model { background-color: #FFFFFF; border: 1px solid #333333; } p {

}

margin: 10px; padding: 15px; border: thin dotted #666666; background-color: #CCCCCC;

Il font Molti device, soprattutto quelli di ultima generazione, permettono all’utente di scegliere il tipo di carattere con cui leggere la pubblicazione.

Tramite il foglio Css e la specifica OPS possiamo inserire la proprietà font-family, che utilizza i nomi dei font (Arial, Times New Roman, ecc...) e nomi delle famiglie di font (San Serif, Serif, Monospace), per assegnare il tipo di font con cui vogliamo il testo della nostra pubblicazione. p { }

font-family:”Times New Roman”,Georgia,Serif;

Bisogna ricordare che i device cercano di applicare il primo font dopo i “:” e se questo non è possibile vanno al successivo e così via...è buona norma inserire nel font-family uno dei tre nomi delle famiglie. In questo modo il device applicherà un font molto simile a quello richiesto.

Per abbellire graficamente la pubblicazione o per dare più enfasi al testo spesso si usa inserire nella pubblicazione uno o più font. Questo è possibile grazie alla speciale regola @ font-face.

Per applicare la regola del @font-face è necessario prima di tutto possedere le opportune licenze , in caso di font coperto da copyright, oppure inserire font con licenze open.

Secondariamente è bisogna dichiarare all’interno della speciale regola @font-face del CSS le quattro proprietà del font: - font-family, il nome del font incluso - font-style, con valore Italic o normal - font-weght, con valore bold o normal - src, introdotto da url per indicare dove si trovano i font da caricare all’interno della pubblicazione 58

Ecco come installare un nuovo font nella nostra pubblicazione, nel CSS richiamiamo il nuovo font: @font-face { font-family: Delicious; src: url(‘Delicious-Roman.otf’); } @font-face { font-family: Delicious; font-weight: bold; src: url(‘Delicious-Bold.otf’); } h3 { font-family: Delicious, sans-serif; }

40 I formati dei font sono: PostScript Type 1, True Type e Open Type Illustrazione 20 Esempio di pagina con un interlinea troppo stretta

La specifica OPS ricorda che i device potrebbero non supportare il font incluso,quindi è necessario includere i diversi formati dei font40. E’ buona regola inserire un font alternativo per prevenire l’eventualità che nessun formato sia valido, è quindi utile inserire nella proprietà CSS un font valido e la relativa famiglia.

Lo spazio tra una riga e un altra Per ritornare al problema della leggibilità di un documento abbiamo alcuni utili strumenti con cui possiamo lavorare per aumentare lo spazio tra le righe.

Per impostare l’interlinea utilizziamo la proprietà line-height.

E’ importante utilizzare sempre valori relativi per il problema dell’imprevedibilità del device, sia dal punto di vista delle dimensioni che del software. Intervenire sull’interlinea è importantissimo soprattutto per quelle pubblicazioni che prevedono numeri di apice, un interlinea scorretta potrebbe provocare una sovrapposizione di caratteri che renderebbero illeggibile il testo.

59

Per avere un testo armonioso e leggibile bisogna lavorare con i css sul tipo di carattere, sull’altezza delle righe e sui caratteri di apice. p {

font-family: Georgia, “Times New Roman”, Times, serif; font-size: 18px; font-style: italic; text-align: left; line-height: 25px; }

Le immagini Le immagini vanno inserite nella cartella immagini/ all’interno di OEPBS/.

Il formato ePub supporta diversi tipi di formato di immagini: - jpeg - png - gif Questi formati sono utilizzati nel web perché hanno una buona risoluzione e poco peso per questi motivi vengono utilizzati anche negli e-book. E’ importante che le immagini usate siano in RGB e non in quadricromia CMYK come per la stampa.

La possibilità di inserire immagini all’interno di una pubblicazione ePub è garantita dal tag <img>, un marcatore vuoto che indica dove inserire l’immagine all’interno del testo e dove reperirla.

Il file .xhtml che contiene l’immagine avrà all’interno del <body> questa stringa: <img class=”cover” alt=”Copertina” scr=”../immagini/copertina.jpg”/> Analizzando questa stringa troviamo questi attributi: - class assegna uno stile all’immagine definito nel css - alt che è la descrizione alternativa all’immagine - src serve per specificare l’indirizzo dove si trova l’immagine da caricare nella pagina, in questo caso in quella della copertina.

60

Le immagini contenute all’interno della pubblicazione saranno immagazzinate all’interno della sottocartella immagini/ contenuta in OEBPS/ E’ importante utilizzare immagini con dimensioni non superiori a 550 px, questa dimensione è molto funzionale per schermi “ampi” mentre i device più piccoli sono soliti ridimensionare automaticamente l’immagine. Questa dimensione è un giusto compromesso tra il peso dell’immagine e la prestazione della stessa a schermo.

Alcuni device potrebbero non essere in grado di ridimensionare automaticamente l’immagine, per ovviare a questo problema potrebbe essere utile applicare all’elemento img la proprietà width:100%. In questo modo le immagini verranno ridimensionate alla misura effettiva dello schermo.

Possiamo utilizzare la proprietà width per ridimensionare le immagini a una misura relativa alla porzione della pagina. Per esempio se utilizziamo width:50% vogliamo che l’immagine sia ridimensionata alla metà della dimensione dello schermo.

Immagini e testo In una pubblicazione possiamo inserire le immagini affianco a un blocco di testo utilizzando la proprietà float.

Un blocco che ha come proprietà float si sposta a destra o a sinistra all’interno dell’elemento che lo contiene, influenzando tutti gli altri elementi contenuti nello stesso box.

Questa proprietà ammette tre valori: - left (spostamento a sinistra) - right (spostamento a destra) - none (valore di default).

Per interrompere l’effetto del posizionamento flottante è necessario utilizzare la proprietà clear.

Clear viene utilizzato sugli elementi che seguono il blocco flottante, questa proprietà ammette quattro parole chiave: - none, valore di default - left, annulla la proprietà float con valore left - right, annulla la proprietà float con valore right - both, annulla la proprietà float sia con valore right che left.

61

Tabelle Può capitare di inserire all’interno di una pubblicazione una tabella, per crearla e inserirla correttamente all’interno di un file HTML utilizzeremo molte delle proprietà del foglio di stile viste fin ora.

Le tabelle si inseriscono nel file attraverso il tag <table>, all’interno ci saranno righe <tr> e colonne <td>.

Le tabelle potrebbero causare svariati problemi di leggibilità soprattutto perché spesso le celle devono contenere molto testo in spazi limitati.

Esistono diversi accorgimenti da adottare: - utilizzare la proprietà text-align serve per eliminare le fastidiose tra le parole e allineare i testi a sinistra - min-width e max-width possono essere dei validi aiuti per controllare la larghezza di una cella, utilizzando valori percentuali il testo potrà espandersi indipendentemente dalle dimensioni dello schermo - possiamo utilizzare border e background-color per evidenziare la griglia della tabella e un colore di sfondo magari per mettere in rilievo le celle dell’intestazione padding staccherà il testo dal bordo delle celle La gestione delle tabelle è una parte molto difficile nelle pubblicazioni ePub soprattutto per tabelle ricche di contenuti.

In alcuni casi è consigliabile utilizzare un immagine grafica o cambiare il tipo di formato della pubblicazione (es. pdf).

62

2.7.4 Creare la copertina La pagina di copertina cover.xhtml sarà strutturata in questa maniera: <?xml version=”1.0” encoding=”utf-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML “http://www.w3.org/TR/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”>

1.1//EN”

<head> <title> Copertina </title> </head> <body> <p class=”cover”> <img style=”max-width: 100%” class=”cover” alt=”Copertina” src=”../immagini/copertina.jpeg” /> </p> </body> </html>

Dovrà avere la dimensione massima di 600x800 pixel, in modo da essere vista in qualsiasi schermo.

Illustrazione 21 Visuale della copertina dell’ebook

Per essere precisi e non cadere in confusione il file cover.xhtml è costituito da 2 elementi: il markup della pagina xhtml e l’immagine in svg o jpeg che sarà posizionata nella cartella immagini/ della cartella OEPBS/

63

2.7.4 Creare il 1° capitolo Fin’ora abbiamo visto tante regole su come impostare il nostro testo. Ora vediamo come creare il capitolo: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>Capitolo 1</title> <link href=”style.css” rel=”stylesheet” type=”text/ css” /> </head> <body> <h1>IL CAVALIERE</h1> <p> L’uomo in nero fuggì nel deserto e il pistolero lo seguì.Il deserto era l’apoteosi di tutti i deserti, sconfinato, vasto.....</p> <p>....</p> <p>....</p> </body> </html>

Il foglio di stile del primo capitolo h1 {

font-family: Arial, Helvetica, sans-serif; }

Illustrazione 22 Visuale del 1° capitolo sul reader

64

p { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; text-align: left; letter-spacing: 0px; line-height: 25px; text-indent: 30px; margin-bottom: -15px; }

2.7.4 Il file NCX - toc.ncx Il file NCX, è l’acronimo di Navigation Center eXtended, deve essere collocato nella cartella OEPBS/, la specifica OPF prevede per questo file lo scopo di mettere a disposizione dell’utente un indice della struttura gerarchica della pubblicazione che permetta all’utente di raggiungere qualsiasi punto di essa (un capitolo, un paragrafo, una tabella o semplicemente un immagine). <?xml version=”1.0” encoding=”utf-8”?> <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE ncx PUBLIC “-//NISO//DTD ncx 2005-1//EN” “http://www.daisy.org/z3986/2005/ncx-2005-1.dtd”> <ncx xmls=”http://www.daisy.org/z3986/2005/ncx/” version=”2005-1”> <head> ….metadati.... </head> <docTitle> …..titolo.... </docTitle> <docAuthor> ….autore.... </docAuthor> <navmap> ….Indice....</navmap> </ncx>

All’interno dell’elemento radice <ncx> sono presenti gli elementi che ci permettono di descrivere la struttura dell’ebook: <head> <meta <meta <meta <meta </head>

name=”dtb:uid” content=”ID pubblicazione”/> name=”dtb:dept” content=”3”/> name=”dtb:totalPageCount content=”0”/> name=”dtb:maxPageNumber” content=”0”/>

<docTitle> <text>Titolo</text> </docTitle> <docAuthor> <text>Nome Autore</text> </docAuthor> <navMap> <navPoint playOrder=”1” id=”I_navPoint”> <navLabel><text>Capitolo 1</text></navLabel> <content src=”capitolo1.xhtml”/> </navPoint> <navPoint playOrder=”2” id=”II_navPoint”> <navLabel><text>Capitolo 2</text></navLabel> <content src=”capitolo2.xhtml”/> </navPoint> </navMap>

65

Il primo <navpoint> punterà al capitolo 1: selezionandolo, il lettore si troverà alla prima pagina del capitolo 1 mentre il secondo navpoint andrà al <h1> del secondo capitolo.

Illustrazione 23 Visione dell’indice dal book reader

66

E’ veramente molto importante inserire le intestazioni di capitolo giuste e non affidarsi al semplice grassetto.

2.7.4 Il file OPF - content.opf Precedentemente abbiamo detto che il file OPF è una sorta di leggenda importantissima per il funzionamento dell’ePub poiché al suo interno sono fissate le informazioni identificative della pubblicazione e la descrizione di tutti i file che la compongono.

Quando un device vuole visualizzare un pubblicazione va a cercare la posizione del file OPF nel file container.xml. E’ una fase delicatissima poiché se qualcosa va storto in questa fase, la validità del file ePub è intaccata e anche la lettura può diventare instabile.

Content.opf è un file XML con estensione .opf e deve essere collocato nella cartella OEBPS. La struttura base di un file content OPF è: <?xml version=”1.0” encoding=”UTF-8”?> <package xmls=”http://www.idpf.org/2007/opf” uniqueidentifier=”BookID” version=”2.0”> <metadata xmlns:dc=”http://purl.org/dc/elements/1.1/” xmlns :opf=”http://www.idpf.org/2007/opf”> <dc:title> Titolo della pubblicazione </dc:title> <dc:identifier id=”BookID” opf:scheme=”ISBN”> 978-99-509-1100-2 </dc:identifier> <dc:language> it </dc:language> <dc:publisher>Casa editrice</dc:publisher> <dc:creator> Nome del autore</dc:creator> <dc:contributor>Persone secondarie</dc:contributor> <dc:date>2003-03-06</dc:date> <meta name=”cover” content=”cover_id”/> </metadata> <manifest> <item id=”cover_id” href=”immagini/cover.jpeg” media-type=”image/jpeg”/> </manifest> <spine> <itemref idrem=”cap1”/> ... </spine> <guide> .... </guide> </package>

67

La struttura del file OPF è composta da: - L’elemento radice <package>

41 Dublin Core è un importante specifica con l’obiettivo di creare uno standard internazionale per la catalogazione, la condivisione e il ritrovamento delle informazioni

42 Per convenzione viene utilizzato BookID 43 ISBN è il valore standard del mercato librario

44 IIETF, Internet Engineering Task Force. Organismo che ha come scopo il migliore funzionamento e la comunicazione dei servizi di internet.

45 Lo standard Marc è stato sviluppato per comunicare informazioni bibliografiche in campo informatico. La lista completa dei codici si può trovare a questo indirizzo http://www.loc.gov/marc/relators/

68

- Dal tag <metadata> che elenca i metadati della pubblicazione e per farlo utilizza una serie di elementi importanti della specifica Dublin Core41, vediamo quali: - <dc:title> è un metadato che descrive il titolo della pubblicazione, i device fanno riferimento a questo per mostrare al lettore il titolo della pubblicazione.

- <dc:identifier> deve essere sempre presente e definisce un codice che identifica la pubblicazione in maniera univoca, è composto dall’attributo id che deve essere uguale all’attributo unique-identifier=”BookID”42 dell’elemento <package>.

- L’attributo opf:scheme=”ISBN”43 definisce con un codice l’ente che ha assegnato in numero identificativo.

- <dc:language> deve essere sempre presente e definisce la lingua con cui è scritta la pubblicazione.

In questo caso IT che definisce la lingua italiana come specificato dalla codifica dell’IETF44.

- <dc:publisher> è un metadato opzionale e definisce l’editore della pubblicazione.

- <dc:creator> è opzionale e può essere presente una o più volte quante le persone che hanno contribuito alla creazione della pubblicazione.

- <dc:contributor> e’ un metadato opzionale che definisce enti o persone che hanno contribuito per una parte della pubblicazione. A questo metadato può essere associato un attributo opzionale opf:role che definisce il ruolo di queste persone tramite i codici formalizzati dallo standard MARC45. (es. opf:role=”aui” ovvero autore dell’introduzione) - <dc:date> definisce la data della pubblicazione e deve essere espressa nella forma YYYY-MM-DD - <dc:source> è un metadato opzionale che viene usato quando un libro cartaceo diventa digitale, all’interno bisogna inserire il codice ISBN della pubblicazione cartacea.

- <dc:rights> è il metadato del copyright o di qualsiasi altra forma di tutela a cui è soggetto l’ebook.

- <dc:rights> Copyright © 2011 Casa Editrice S.r.l. </ dc:rights> -Essenziale è l’inserimento di <meta name=”cover”> che aiuta il device a identificare la copertina.

Questo metadato è strettamente collegato ad un altro <item> inserito all’interno di <manifest>.

La corretta scrittura sarebbe questa: <metadata> <meta name=”cover” content=”cover_id”/> </metadata> <manifest> <item id=”cover_id” href=”immagini/cover.jpg” media- type=”image/jpeg”/> </manifest>

46 Tranne il file OPF stesso.

47 Le estensioni MIME, Multipurpose Internet Mail Extensions, permettono di descrivere il contenuto di un file senza ambiguità 48 Elenco di tutte le estensioni MIME [http://www.mario-online. com/mime_types.html]

Dopo <metadata>, nel file .opf, va sempre l’elemento <manifest>. Lo scopo di questo elemento è elencare e descrivere tutti i file che compongono la pubblicazione e che sono contenuti nella cartella OEBPS46.

Per enumerare tutti i file della cartella OEBPS viene usato il tag <item>. Questo elemento utilizza tre attributi per svolgere la sua funzione: - id identificatore univoco - href è l’attributo che indica l’indirizzo del file all’interno della cartella OEBPS - media-type definisce la tipologia del file espressa con le estensioni MIME47 Alcuni esempi di estensioni MIME48: Media Type

File

application/vnd.font-truetype

Font in formato TrueType Font in formato OpenType Il file NCX Documenti in formato XHTML Immagini in formato .gif Immagini in formato .jpeg Fogli di stile in formato CSS

application/vnd.ms-opentype application/x-dtbncx+xml application/xhtml+xml image/gif

image/jpeg Text/css

Dopo <metadata> non può mancare l’elemento <spine> con lo scopo di definire l’ordine di lettura dei vari elementi che compongono la pubblicazione. Praticamente a questo punto andremo a ordinare la sequenza dei file che il lettore si troverà davanti pagina dopo pagina.

Non saranno qui considerati i file immagine e i file CSS perchè discendono dai file XHTML che li richiamano.

69

All’elemento spine deve sempre essere associato l’elemento toc il cui valore deve coincidere con quello dell’elemento id dell’elemento <item> del file NCX, elencato nel <manifest>: <manifest> <item id=”ncx” href=”toc.ncx” mediatype=”application/x-dtbncx-xml”/> … … </manifest> <spine toc=”ncx”> … </spine>

Questo crea una sorta di collegamento tra l’indice, definito dal file NCX, e l’ordine di lettura definito dall’elemento <spine>. Per far si che una pubblicazione sia completamente raggiungibile è importante che ogni file XHTML sia elencato in entrambi i file.

L’ordinamento dei file avviene tramite l’elemento <itemref> con all’interno l’attributo <idrem> che deve essere uguale all’attributo id dell’elemento <item> contenuto in <metadata>: <manifest> <item id=”cap1” href=”testo/capitolo1.xhtml” media-type=”application/xhtml+xml”/> <item id=”cap3” href=”testo/capitolo3.xhtml” media-type=”application/xhtml+xml”/> <item id=”cap2” href=”testo/capitolo2.xhtml” media-type=”application/xhtml+xml”/> </manifest> <spine toc=”ncx”> <itemref idrem=”cap1”/> <itemref idrem=”cap2”/> <itemref idrem=”cap3”/> </spine>

Questo crea una sorta di collegamento tra l’indice, definito dal file NCX,

70

A chiudere il file content.opf è l’immancabile elemento <guide>. Il suo scopo è quello di fornire alcuni elementi specifici della pubblicazione ovvero di tutti quei contenuti definiti “extra”.

L’elemento <guide> conterrà elementi <reference> quanto sono i contenuti extra. A ogni <reference> saranno associati gli attributi href, title, type: <manifest> ... <item id”intro” href=”testo/introduzione.xhtml” media-type=”application/xhtml+xml”/> ... </manifest> <guide> ... <reference type=”preface” title=”Introduzione” href=”testo/introduzione.xhtml”/> ... </guide>

acknowledgements bibliography colophon copyright-page cover dedication epigraph foreword glossary loi lot notes prefaces text title-page toc

Ringraziamenti Bibliografia Colophon Pagina del Copyright Copertina Dedica Epigrafe Prefazione Glossario Tavola delle Illustrazioni Tavola delle Tabelle Note Introduzione Prima vera pagina di contento, il punto in cui è consigliabile iniziare la lettura Frontespzio Indice, in Formato xhtml non confondere con il file .ncx

71

2.7.5 Controllare e impacchettare Quando abbiamo finito di creare tutti i file del nostro ePub dobbiamo convalidarlo, ma prima è giusta norma ricontrollare tutti i file e fare una check-list del lavoro svolto.

E’ la parte più noiosa ma è necessario ricontrollare tutto: - ogni file è inserito nel modo e nella posizione corretta - la formattazione del testo è precisa - le immagini sono nella loro cartella OEPBS/immagini e sono in formato RGB - il metadata è compilato con tutte le informazioni importanti sul nostro ebook - l’indice nel file NCX è completo e leggibile Gli errori di scrittura del codice verrano fuori al momento della convalida, questi a grandi linee sono gli errori più grossi che possiamo risolvere prima di impacchettare il nostro lavoro.

Una volta che abbiamo verificato la correttezza e la giusta posizione dei nostri file dobbiamo creare l’ archivio compresso.

I passaggi per la compressione sono: 1) coprimere il solo file mimetype 2) trascinare la cartella META-INF e la cartella OEPBS all’interno di mimetype.zip 3) cambiare l’estensione da .zip a .epub

72

2.8 Software per la creazione di e-book Creare un ottimo ePub necessita di grandi conoscenze in campo informatico/grafico che non tutti possiedono. Se non siamo affermatissimi di codice XHTML e di grafica possiamo creare il nostro eBook partendo da programmi semplici e gratuiti.

OpenOffice è un elaboratore di testi Open Source distribuito in rete gratuitamente.

Quando abbiamo finito di scrivere il nostro testo con OpenOffice dobbiamo formattarlo attraverso gli strumenti messi a disposizione dell’editor, ogni parte del testo dovrà avere la sua funzione (intestazione, corpo del testo, contenuto tabella ecc...).

A questo punto dobbiamo convertire il nostro documento in ePub, abbiamo due strade che possiamo percorrere: utilizzare Write2ePub o affidarci a Calibre.

Write2ePub è una macro distribuita gratuitamente da Simplicissimus,per creare i nostri testi in formato ePub.Bisogna scaricarla dal sito e installarla sul nostro Open Office. Con il file correttamente formattato in formato .odt e Write2ePub possiamo procedere verso l’ePub.

Illustrazione 24 Schermata rappresentante il tool Write2ePub in OpenOffice

Write2ePub mette a disposizione delle funzioni che permettono di gestire i metadati, le preferenze riguardo alla divisioni dei capitoli e il file di copertina e l’indice.

Quando abbiamo finito ed esportato in ePub possiamo andare a convalidare la nostra pubblicazione tramite i software di convalida.

Questa macro è utilissima per creare ebook con un codice pulito e editabile senza perdersi nel codice di programmazione.

Volendo possiamo saltare tutti i passaggi e convertire la nostra pubblicazione in ePub con un click grazie a Calibre. Questo programma è un ebook management cioè un software per la gestione e la conversione degli ebook.

73

Documenti in formato .html, .doc, .rtf o .pdf possono essere convertiti semplicemente con un tasto, ma non è tutto oro ciò che luccica e se questa è la strada più breve per creare un ePub è anche quella più impervia. La conversione, infatti, potrebbe andare a buon fine risultando perfetta o completamente illeggibile!

Calibre va benissimo per un ePub a uso personale ma se vogliamo distribuire la nostra pubblicazione non risulterà la scelta migliore. Per creare un e-book leggibile e professionale dobbiamo avvalerci di tutta la nostra pazienza e precisione e scrivere il nostro codice a mano con un code editor. Ma anche questa soluzione nasconde delle insidie legate al codice XML, è per questo che prima di creare un e-book è bene studiare bene le regole dell’XHTML 1.0.

Un altro interessante strumento è eCub, un software multipiattaforma gratuito che permette la creazione di ebook in formato ePub. Con questo programma possiamo importare ed editare testi e file in XHTML. Direttamente dall’interfaccia dell’utente è anche possibile inserire file audio.

Come per Calibre anche con eCub è possibile creare file ePub in pochissimi minuti.

2.9 Convalidare Sia che vogliamo distribuirlo in rete o tenerlo per noi è necessario che il nostro ePub venga convalidarlo per riscontrare eventuali errori che potrebbero comprometterne la lettura e per verificarne il rispetto di tutte le regole dello standard ePub. La convalida potrà essere fatta tramite ePubCheck uno strumento gratuito online e offline, questo programma esaminerà la nostra pubblicazione e potrà restituire la lista degli errori riscontrati o ci comunicherà la buona idoneità del nostro ePub.

Illustrazione 25 Immagine del tool ePub Check per indicare gli errori della pubblicazione

74

In caso di errori bisognerà rimettere le “mani in pasta” ed andare a modificare i file o le stringhe di codice con inesattezze rilevate da ePubCheck.

Senza decomprimere il nostro ePub possiamo utilizzare Sigil che è un programma gratuito multipiattaforma.

Sigil permette di andare a modificare il codice della nostra pubblicazione potendo vedere in anteprima il risultato essendo un programma WYSIWYG “what you see is what you get”.

Finita la correzione bisognerà ritornare su ePubCheck per riesaminare la nostra pubblicazione.

2.10 Visualizzare la nostra pubblicazione Il nostro ePub è finito e convalidato per poterlo visualizzare possiamo avvalerci dei vari prodotti che vengono offerti gratuitamente dalla rete.

Se lavoriamo con prodotti della Apple come un Mac, un iPhone o un iPad possiamo scaricarci gratuitamente dal sito dell’azienda il software Stanza o iBooks.

Su ambiente Windows possiamo affidarci al programma Adobe Digital Edition distribuito gratuitamente dall’azienda medesima.

Indistintamente dal sistema operativo usato possiamo utilizzare il programma Calibre che ci permette di visualizzare, convertire e catalogare i nostri ePub. Degno di nota è anche il tools ePubReader,messo a disposizione da Firefox, che apre gli ePub direttamente dal browser come se fossero siti internet.

Esistono anche comodi lettori on line che oltre a visualizzare un ePub, permettono di creare una biblioteca virtuale on line e di poter leggere e condividere i nostri e-book.

Tra questi ricordiamo: BookWorm, Ibis Reader, Magic Scroll.

75

76

Il nuovo HTML5 49 Per navigare su internet abbiamo bisogno di un browser, ovvero di un programma che svolge il compito di scaricare i file contenuti in un server di un preciso indirizzo e Legge i documenti e li rappresenta a schermo a seconda delle indicazioni contenute nei tags definiti anche ‘marcatori’. I browser più comuni sono: Internet Explorer, FireFox, Chrome, Safari e lo storico Netscape Navigator.

3.1 Storia HTML La nascita di Internet è da ricercarsi nel lontano 1969 nel progetto ARPANET, un nuovo sistema di difesa e spionaggio americano durante la guerra fredda. L’intenzione di questo progetto era quella di collegare tutti i computer in una rete continentale.

In pochi anni ARPANET si diffuse a livello mondiale e nel 1991, presso il Cern di Ginevra, il ricercatore Tim Berners Lee definì un sistema di comunicazione ipertestuale con protocollo HTTP, ovvero il Word Wilde Web. Da allora il WWW vide una progressiva crescita che rivoluzionò il modo di comunicare grazie anche alla creazione di un applicazione del linguaggio SGML, un sistema standard chiamato HTML..

In parallelo alla diffusione di Internet si vide la nascita di numerosi browser49, il primo fu Mosaic seguito da Netscape Navigator e Internet Explorer. La concorrenza tra questi browser provocò la cosiddetta “Guerra dei Browser” che portò, in quei anni, a un altissimo livello di confusione con numerose escalation di caratteristiche incompatibili con gli standard.

La guerra dei browser portò gli sviluppatori a creare varie versioni dei sito compatibili per ogni browser o addirittura a creare siti compatibili con un solo tipo di browser tagliando fuori molti utenti.

Questo terribile modo di lavorare portò, Tim Berners Lee, a fondare l’associazione W3C ovvero il World Wide Web Consortium con l’obbiettivo di guidare il web fruibile a tutti al suo massimo esponenziale.

Per far questo è stata necessaria la standardizzazione dei linguaggi, fin’ora il W3C ha pubblicato numerose raccomandazioni per creare nuove esperienze utili e coinvolgenti al passo con le richieste e i bisogni degli utenti.

HTML 2.0, HTML 3.2, HTML 4.0 evoluto poi in XHTML 1.0 e nello sfortunato XHTML 2.0 fino al tanto atteso HTML5!

77

Illustrazione 26 Infografica “Evolution of the Web” [http://evolutionofweb.appspot. com/?hl=en]

78

3.2 Html5, tutto un altro web!

Illustrazione 27 Logo HTML5

50 WHATWG acronimo di “Web Hypertext Application Technology Working Group”

51 Dal commento di Jeffrey Zeldman (guru del web design a prova di standard): <<....the only version of HTML designed for a web of applications, not just documents...>>

Html5 è un linguaggio sviluppato per risolvere alcuni problemi del vecchio html4 e xhtml, consentendo allo stesso tempo di creare un web più sofisticato in grado di soddisfare i maggiori livelli d’interazione e d’esperienza richiesti dagli utenti.

L’HTML5 nasce dal scisma di un gruppo di ricercatori delW3C che formarono un gruppo di lavoro chiamato WHATWG50, l’obbiettivo di abbandonare l’insoddisfacente XHTML e di espandere il linguaggio HTML verso lo sviluppo di applicazioni web e al miglioramento cross browser.

Questo nuovo linguaggio va al di là del semplice markup, da considerare come una combinazione di Html5, Css3 e Javascript con una potenzialità enorme che non ci porterà ad avere un semplice documento ipertestuale ma un vero e proprio sistema per le web application51.

Le nuove caratteristiche introdotte dall’HTML5 sono: - sostituzione del lungo doctype di apertura con uno cortissimo <!doctype html> - nuove regole per un layout più semantico che separa i contenuti dalla struttura e dal comportamento - gli elementi in disuso sono stati deprecati - introduzione di elementi multimediali - supporto di animazioni e grafica vettoriale grazie all’introduzione dell’elemento <canvas> - drag and drop per il trascinamento e il rilascio di elementi all’interno di un documento - geolocalizzazione - HTML5storage, nuovo sistema di memorizzazione locale dei dati scaricati via browser, permette l’utilizzo delle applicazioni web-based anche senza il collegamento internet. Andrà a sostituire il sistema dei cookie.

79

A differenza del vecchio Doc Type <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML “http://www.w3.org/TR/html4/ strict.dtd”>

4.01//EN”

non ci sono indicazioni sul Doc Type Definition o sul linguaggio utilizzato infatti la pagina HTML5 dovrà iniziare con questa istruzione: <!DOCTYPE html> La struttura di base della pagina rimane la stessa: <html> che contiene il tag <head> e <body>; i collegamenti a file esterni contenuti all’interno del tag <head> useranno sempre <script> o <style> a differenza che si potrà omettere l’attributo type.

Sono state introdotte delle novità che potrebbero lasciare un attimo smarriti: - è stato abolito il case-sensitive, con l’html5 il markup può essere scritto sia in minuscolo che in maiuscolo - alcuni tag contenitori, come <head> <body> possono essere omessi o possono essere scritti senza la particella di chiusura rendendo comunque valida la pagina web - gli attributi possono essere scritti anche senza virgolette <div class=box>, <div class=’box’> o <div class=”box”> hanno tutti e tre una sintassi corretta.

3.3 Markup semantico Molte delle sue novità possiamo ricercarle nel vecchio HTML4, si può quindi dire che stiamo assistendo a una sorta di evoluzione del vecchio HTML4 (fermo dal 1999).

Fin’ora le pagine venivano strutturate con nomi ben identificativi come <div id=”header”> o <div id=”footer”>, il consorzio del W3C ha preso spunto da questo “fenomeno” per creare un nuovo tipo di markup più semantico e preciso.

La scelta dei nomi dei tag semantici dell’HTML5 si basa su un osservazione fatta sulla marcatura più usata dagli sviluppatori web; è per questo che il tag <header> sia la descrizione del vecchio tag <div id=”header”>, non solo,i tag dell’html5 sono in strettissima correlazione con il loro contenuto,utilizzare tag più semantici significa far capire agli spider dei motori di ricerca quali sono le parti e i contenuti più importanti per l’indicizzazione e per il posizionamento sui motori di ricerca.

80

Illustrazione 28 Differenza dei tag tra la vecchia e la nuova versione dell’HTML5

<header> è il tag che contiene l’intestazione di qualsiasi elemento introduttivo <nav> l’elemento <nav> rappresenta la parte della pagina destinata a contenere link interni o esterni ad altri documenti. L’uso di questo tag porta a un aumento della semanticità del markup e dal punto di vista dell’accessibilità si può dire che questo elemento sarà di grandissimo aiuto agli screenreader. <nav> <ul> <li><a href=”/”>Home</a></li> <li><a href=”/events”>Current Events</a></li> ...more... </ul> </nav>

Il tag <nav> può essere usato per contenere la navigazione principale del documento, per l’impaginazione del documento (tasti avanti e indietro), come contenitore del modulo di ricerca soprattutto per i siti di grandi dimensioni e per le briciole di pane.

Da non confondere con il nuovo tag <menu> che è un elemento utilizzato per le applicazioni web interattive, come una lista di comandi in un gioco on line.

81

<footer> il suo utilizzo classico è quello a piè di pagina, ma con le nuove specifiche il tag <footer> acquista più utilità potendolo usare alla fine di ogni articolo come note finali. Un esempio di applicazione potrebbe essere alla fine di ogni articolo in un e-magazine. <section> questo tag ha lo scopo di raggruppare tematiche in unico contenitore.

Questo specifico tag può essere utilizzato per indicare dei capitoli, delle sezioni o per raggruppare le categorie ‘sport’ ‘politica’‘cronaca’ ecc.. di un quotidiano on-line, va visto come un macro-contenitore per i contenuti della pagina. <section> <h1>titolo della sezione </h1> <article> <h2>titolo articolo numero 1</h2> <p>contenuto articolo numero 1</p> </article> <article> <h2>titolo articolo numero 2</h2> contenuto articolo numero 2 </article> </section>

<article> rappresenta una parte di contenuto semanticamente indipendente dal resto del documento. E’ la parte dove è presente il corpo della nostra pagina e può essere suddivisa in <header> <section> e <footer>.

Può essere utilizzato insieme al tag <section> per rendere la pagina più completa strutturalmente parlando (vedi codice sopra).

52 Dal sito html5today.it nel post “il tag <aside>”

<aside> la specifica definisce questo tag come lo spazio in cui andranno inseriti contenuti tangenti rispetto al resto del documento posizionato in una barra laterale. In pratica il tag <aside> potrà contenere link, sidebar con banner sponsorizzati e testi secondari rispetto al ciò che è contenuto nel <section>.52 <aside> <h1>Che cos’è la semantica</h1> <p> definizione generale del concetto di semantica </p> </aside>

82

<hgroup> Uno dei nuovi tag è l’elemento <hgroup> con il ruolo di raggruppare sono un “unico tetto” i titoli dal <h1> al <h6>. La funzione di questo elemento è quella di creare l’intestazione di una sezione, i titoli all’interno di <hgroup> saranno più importanti rispetto a quelli inseriti nel corpo della pagina creando degli elementi indipendenti. <hgroup> <h1>Questo è il titolo</h1> <h2>Questo è un sottotitolo</h2> </hgroup>

3.3.2 Form Fin’ora per creare form di contatto abbiamo sempre avuto bisogno di appoggiarci al Javascript, soprattutto quando era necessaria la validazione dei campi o l’obbligatorietà d’inserimento di determinati caratteri speciali. Con la nuova specifica assistiamo all’introduzione di nuove estensioni e di nuovi attributi che ci permetteranno di creare form anche molto complessi con il solo uso del markup.

53 La lista delle nuove estensioni è possibile trovarla nel sito www. w3schools.com con numerosi esempi di applicazione

I vari campi di un form erano prima indicati genericamente con input, l’introduzione di nuove estensioni53, come email, number, data, search e di nuovi attributi come autofocus, placeholder, required (solo per citarne alcune) daranno una valorizzazione a ogni campo: <form> <label>Quando sei disponibile per un incontro? <input type=”datetime” name=”mydatetime”> </label> <input type=”reset” value=”Resetta il form”> <input type=”submit” value=”Invia”> </form>

Questo è un piccolo esempio di quanto sia facile inserire un calendario in form, prima era necessario associare codice e codice di js, ma ben spiega il potenziale di utilizzo di queste estensioni che renderanno i forms molto accessibili anche per gli utenti mobile.

83

3.4 Microdati Il nuovo standard HTML5 punta moltissimo alla semantica e all’accessibilità delle informazioni. Quest’impegno l’abbiamo visto nell’introduzione dei nuovi tag <header> <article> <section> ma c’è un altro elemento introdotto con una potenzialità enorme: i microdati.

I microdati possono essere idealmente spiegati come delle etichette che vengono assegnate per spiegare in modo specifico i contenuti, se correttamente compilati hanno il pregio di fornire preziose informazioni aggiuntive al nostro sito. Questo è elemento può essere considerato un passo in più verso la comprensione del nostro linguaggio da parte delle macchine.

Per applicare i microdati utilizziamo tre attributi molto importanti e il data-vocabulary: - itemscope, definisce l’elemento a cui è applicato - itemtype, definisce il vocabolario che specifica il tipo di oggetto - itemprop, definisce la proprietà che verrà valorizzata con il testo contenuto nel tag, le proprietà sono da ricercare all’interno del data-vocabulary Esempio di applicazione di microdati: <div itemscope itemtype=”http://data-vocabulary.org/Person”> Mi chiamo <span itemprop=”name”>Roberto Sacchi</span> ma tutti mi chiamano <span itemprop=”nickname”> Bob </span>.

Questa è la mia home page: <a href=”http://www.example.com” itemprop=”url”> www.example.com </a> Ho una casa ad Albenga, (Liguria) e lavoro come <span itemprop=”title”> ingegnere </span> per la <span itemprop=”affiliation”> ACME Corp </span>. </div>

Per verificare la validità dei microdati è possibile testare la nostra pagina grazie al tools di google.

84

54 Seo è l’acronimo di Search Engine Optimization ed è una disciplina che si occupa del posizionamento dei siti internet nei motori di ricerca sulla base delle parole chiave digitate dagli utenti 55 Serp, è l’acronimo di Search Engine Response Page, sta ad indicare le pagine di risposta che il motore di ricerca visualizza dopo che è stata effettuata la richiesta tramite l’apposito form.

56 Dal sito html.it nella guida html5

I microdati sono importantissimi non solo dal punto dell’accessibilità ma anche dal punto di vista del SEO54 in quanto sono dati che vengono utilizzati dalle SERP55 di Google e sono visibili direttamente al momento della ricerca. Questo porterà a un miglioramento dei risultati di ricerca in quanto il motore di ricerca darà un vero valore al contenuto, questa evoluzione è il futuro ed è stata battezzata web 3.0

3.5 Le api L’html5 nasce come linguaggio per soddisfare un filone di mercato a tutt’oggi distante dal mondo del solo ipertesto: le Api ovvero le applicazioni web. La motivazione di questo studio, da parte del W3C e del WHAT, risiede nel cercare di frenare il diffondersi di numerose tecnologia ‘poco standard’ nate dalla sempre più richiesta di applicazioni web.

Nella specifica vengono proposte due tipi di categorie di api: quelle volte alla multimedialità, quindi gestione di video, audio e grafica, e api di arricchimento che rendono fruibile un applicazione web come una normale finestra del nostro desktop, come il drang&drop e la GeoLocalizzazione56, emulando le applicazioni native (desktop) con la sola differenza che queste vengono effettuate all’interno del browser, ovvero un altra applicazione desktop.

3.5.2 <Audio> e <Video>

57 Dal sito next-tv.it nel post “La guerra dei codec” e dalle dispense di Enrico Dell’Oste “HTML5 Introduzione alle principali novità”

Una delle novità più interessanti di HTML5 è la possibilità d’inserire video all’interno di una pagina web con il solo tag <video> e senza più l’ausilio di plugin come Flash Player.

I video su internet funzionano grazie a tre elementi: un contenitore (mpeg4, video, flash), un codec audio (Wav – MP3 - Ogg Vorbis ecc..) e un codec video57 (h.264,VP8, Ogg Theora ecc..)

Questa entusiasmante novità ha già un piccolo ostacolo ovvero la guerra fra i codec.

I codec sono software che comprimono il segnale video e audio in modo da renderlo accessibile per la visione in streaming.

85

Il problema sta nel fatto che i browser più diffusi adottano per la visione in streaming codec diversi obbligando così il progettista a caricare nella pagina diversi tipi di file video, come nell’esempio con il tag <source>, si spera che questa guerra termini con l’introduzione di codec crossbrowser.

Grazie al tag <audio> e l’aggiunta di alcuni attributi è possibile controllare il comportamento del contenuto: <video poster=”big_buck_bunny/poster.jpg” controls> <source src=”big_buck_bunny/trailer.mp4” type=”video/mp4”> <source src=”big_buck_bunny/trailer.ogg” type=”video/ogg”> <source src=”big_buck_bunny/trailer.webm” type=”video/webm”> </video>

in questo codice di esempio poster è un attributo che fa visualizzare un immagine in caso di mancato funzionamento del video, controls visualizza i controlli del video come ‘play’ ‘stop’ ‘avanti’ ecc.. oltre a questi la specifica propone altri attributi come: autoplay, loop, preload, audio insieme naturalmente agli attributi che specificano l’altezza e la larghezza del contenuto.

58 Dalla guida HTML5 del sito html.it

Nella specifiche il tag <audio> viene inserito, nella sezione HTML Media Elements, insieme al tag <video> perchè i due elementi vengono trattati allo stesso modo sia per quanto riguarda il markup che le API58. <audio controls=”controls”> <source src=”song.ogg” type=”audio/ogg” /> <source src=”song.mp3” type=”audio/mp3” /> Your browser does not support the audio tag. </audio>

gli attributi che si possono inserire all’interno del tag <audio> sono gli stessi del tag <video>.

86

3.5.3 <Canvas> La parte più innovativa delle specifiche dell’HTML5 è forse quella riguardante la parte grafica.

Con il nuovo elemento <canvas> sarà possibile avere un area di disegno dove con l’ausilio del Js si potrà creare effetti e movimenti fin’ora possibili solo con la tecnologia proprietaria di Flash e Silverlight.

L’elemento <canvas>, crea sulla nostra pagina web, una tela invisibile che consente il rendering dinamico delle bitmap: <canvas id=”cavasID” width=”300px” height=”200px”> Contenuto di ripiego, nel caso in cui il browser non supporta Canvas. </canvas>

Il codice html definisce l’altezza e la larghezza dell’area di disegno, all’interno di essa una matrice avrà il punto di coordinate 0,0 in alto a sinistra. Il Javascript lavorerà nell’area di disegno attraverso particolari funzioni.

In questo caso nel file js abbiamo definito le proprietà per creare un ombra al nostro elemento, il risultato sarebbe questo:

Illustrazione 29 Immagine Canvas con ombra

context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = ‘RGBA (255, 0, 0, 0,5)’; context.fillStyle = ‘# 00F’; context.fillRect (20, 20, 150, 100);

Un ombra esterna di colore rosso (context.shadowColor) con un certo tipo di sfumatura (context.shadowBlur), spostata di 5 px a destra e 5px in basso ( context.shadowOffsetX - context. shadowOffsetY) Ciò che si può fare direttamente dall’html è veramente unico, con pochi passaggi possiamo: - trasformare le immagini, scalandole di dimensione, rotearle e dargli un effetto di transazione; - creare trasparenze - disegnare immagini 2d e 3d - creare animazioni

87

3.5.4 Svg Nella costruzione di una pagina web abbiamo spesso bisogno di utilizzare immagini per rendere più attraente il layout all’occhio dell’utente.

Fin’ora i formati più utilizzati dono stati .jpg .png .bmp, con la diffusione di grandi e piccoli monitor la limitazione di questi formati si è resa ben evidente in problemi di sgranatura dovuti al ridimensionamento delle stesse.

SVG è l’acronimo di Scalable Vector Graphic, la sua tecnologia è in grado di visualizzare oggetti vettoriali scalabili dimensionalmente, la possibilità di fare ciò deriva direttamente dal linguaggio XML. Introdotto dal W3C nel 2001, dopo una serie di controversie, ora può essere utilizzato liberamente in quanto ampiamente supportato dai browser ma ancora poco utilizzabile per i siti che richiedono il requisito di accessibilità anche con l’aggiunta del tag <desc> e le longdesc. <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”> <circle cx=”100” cy=”50” r=”40” stroke=”black” stroke-width=”2” fill=”red” /> </svg>

Con questo esempio di codice abbiamo creato un cerchio: - fill, definisce il colore della figura (in questo caso rosso) - stroke è il colore del bordo, stroke-width lo spessore del bordo - cx e cy sono le coordinate del piano cartesiano dal centro della circonferenza (questi attributi sono specifici per la circonferenza) - r è il raggio della circonferenza

58 Altri esempi dell’uso del SVG si possono trovare a questo indirizzo [http://www.w3schools.com/svg/svg_ examples.asp]

88

La potenza delle immagini descritte in SVG è veramente incredibile: le figure possono essere dinamiche e interattive e la loro geometria è definita dai vettori e non da pixel quadrati, da tutto ciò si può ben capire quanto la qualità della figura rimanga invariata durante il ridimensionamento59.

Questa tecnologia è anche aperta ovvero non necessità di software o linguaggi proprietari, chiunque può può creare siti con immagini vettoriali scalabili con la sola conoscenza del linguaggio XML.

Non solo SVG permette di rimodellare e animare le immagini mentre costruiamo la pagina: <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”> <g transform=”translate(100,100)”> <text id=”TextElement” x=”0” y=”0” style=”fontfamily:Verdana;font-size:24”> It’s SVG! <animateMotion path=”M 0 0 L 100 100” dur=”5s” ill=”freeze” /> </text> </g> </svg>

L’esempio in questione crea un animazione di una scritta, all’interno del tag SVG possiamo definirne le caratteristiche, il movimento e la durata: - g transform definisce le coordinate di partenza dell’animazione - il tag text descrive il tipo di font del testo e la dimensione (style) - animateMotion è il tag che descrive il movimento - dur è la durata dell’animazione - path, definisce le coordinate di movimento La lista degli attributi e degli elementi da associare a SVG è possibile trovarla a questo indirizzo: [http://www.di.uniba.it/~ig/svg/ElemGrafici.html]

89

3.5.5 <mathML> Nelle nuove specifiche HTML5 troviamo l’adozione del Mathml, acronimo di Mathematical Markup Language, ovvero un linguaggio che permette di ricevere ed elaborare le formule matematiche dal web.

59 Dal sito html.it nel post “Svg & MathML”

Più di 200 tag specifici permettono di creare un espressione algebrica senza bisogno di utilizzare immagini in quanto il problema maggiore era rappresentato dalla composizione della formula con numeri di apice, frazioni e caratteri speciali59.

La formula ax2+bx+c è così realizzata: <math> <apply> <plus/> <apply> <times/> <ci>a</ci> <apply> <power/> <ci>x</ci> <cn>2</cn> </apply> </apply> <apply> <times/> <ci>b</ci> <ci>x</ci> </apply> <ci>c</ci> </apply> </math>

Grazie a questi tag possiamo costruire qualsiasi tipo di formula rendendola completamente accessibile.

Non è facile creare formule matematiche, soprattuto con tutti questi nuovi tags, per ovviare a questo problema esistono vari strumenti disponibili: - FireMath, un editor on line che permette facilmente di creare formule complesse - Easyme invece propone un sito per l’apprendimento con diversi modelli di strutture aritmetiche.

Mentre per testare il nostro codice possiamo appoggiarci alla versione sperimentale del browser WebKit. 90

3.5.6 Geolocalizzazione Quando parliamo di GeoLocalizzazione parliamo di un API che identifica nel mondo reale la posizione di un computer o un dispositivo mobile connesso a internet., questa funzione avviene attraverso diversi sistemi come il GPS, l’indirizzo IP, le celle della linea telefonica e il wi-fi.

60 L’utilizzo della geolocalizzazione implementata normalmente da Social Network come Facebook, Foursquare, oppure da motori di ricerca come Google

L’utilizzo della GeoLocalizzazione è un fenomeno molto diffuso soprattutto dopo l’avvento dei social network60, come fenomeno di web marketing, e degli smartphone.

Anche il nuovo HTML5 implementa la GeoLocation che grazie all’utilizzo del javascript consente di ottenere la longitudine e la latitudine e altri dati degli utenti tracciati.

Per prima cosa per ottenere la posizione dell’utente abbiamo bisogno di due cose che sono indipendenti dal nostro operato: - un sistema operativo che supporti questa funzionalità - il consenso esplicito dell’utente ad accedere a questa applicazione.

La funzione per accedere a questi dati:

Dove gotPosition è la funzione per richiamare i dati quando vengono reperiti e errorGettingPosition è la funzione che viene eseguita quando si verifica un errore.

La funzione gotPosition potrebbe essere così composta: function gotPosition(pos) { var outputStr = “latitude:”+ pos.coords.latitude +”\n”+ “longitude:”+ pos.coords.longitude +”\n”+ “accuracy:”+ pos.coords.accuracy +”\n”+

“altitude:”+ pos.coords.altitude +”\n”+ “altitudeAccuracy:”+ pos.coords.altitudeAccuracy +”\n”+ “heading:”+ pos.coords.heading +”\n”+ “speed:”+ pos.coords.speed +””;

alert(outputStr); }

91

Mentre la funzione di errore: function errorGettingPosition(err) { if(err.code == 1) { alert(“L’utente non ha autorizzato geolocalizzazione”); } else if(err.code == 2) { alert(“Posizione non disponibile”); } else if(err.code == 3) { alert(“Timeout”); } else { alert(“ERRORE:” + err.message); } }

la

Esistono svariati contesti per un utile utilizzo di questa funzione, per esempio sarebbe interessante associare la GeoLocalizzazione all’interno della sezione “ Come raggiungerci” di un sito internet o per le applicazione di GeoTagging come flickr che associa allo foto pubblicata la località dove è stata scattata.

3.5.6 Drag and Drop

61 Jquery è una libreria di funzioni Javascript 62 Dal sito html.it nel post “HTML5 Drag and Drop” 63 Dal sito html5today.it nel post “Il Drag and Drop in html5”

Il Drag&Drop è una funzione molto usata, è quel movimento che si fa regolarmente per trascinare con il mouse un documento (drag – trascinamento) all’interno di una cartella (drop – rilascio).

Su internet questa tecnica è molto diffusa grazie all’utilizzo del Jquery61, con le nuove API potremo creare però un ambiente nativo molto più performante dove qualsiasi oggetto potrà essere trascinato62.

Implementare il Drag&Drop è possibile in quattro fasi63: 1. Indicare gli oggetti da trascinare 2. definire cosa fare dell’oggetto da trascinare 3. decidere dove trascinare gli oggetti sul browser 4. indicare le azioni da compiere dopo il drop <div id=”columns”> <div class=”column” draggable=”true”> <header>A</header> </div> <div class=”column” draggable=”true”> <header>B</header> </div> <div class=”column” draggable=”true”> <header>C</header> </div> </div>

92

In questo piccolo esempio abbiamo impostato agli elementi div column l’attributo draggable=”true” ovvero che sono elementi trascinabili.

Nel file .js andiamo a definire tutto il resto: il luogo dove rilasciare gli oggetti e le azioni dopo il drop.

3.5.7 Localstorage

64 Dal sito html5today.it nel post “Il Drag and Drop in html5”

Html5 ha introdotto il concetto di Localstorage ovvero un nuovo modo per la gestione e la memorizzazione dei dati che andrà a sostituire i vecchi cookies.

Questo nuovo strumento è utile per gli utenti che hanno una connessione ballerina e può essere utilizzato per le webapps da utilizzare anche in offline. Il localstorage memorizza fino a 5 mega e al momento del ritorno on line l’utente vedrà aggiornarsi automaticamente con i dati più recenti64.

L’esempio più lampante è quello di un sito contenente news, l’utente online potrà visualizzare le news normalmente ma in caso saltasse la linea o la rete l’utente potrebbe comunque accedere a queste informazioni memorizzate nella cache. Nel momento della riconnessione, l’utente vedrà aggiornarsi le news più fresche.

93

3.6 Css3

65 Dal sito Onsitus nel post “Proprietà css3 alla prova”

I fogli di stile nascono nel 1996 permettendo d’iniziare a separare i contenuti dalla formattazione.

L’integrazione dei fogli di stile portò numerosi vantaggi: pagine più leggere e più pulite dal punto di vista del codice, una migliore accessibilità e una maggiore flessibilità di lavoro per sviluppatori.

Con la diffusione dei dispositivi mobile e dei numerosi problemi dovuti al mancato supporto da parte dei browser, nel 1999, fu necessario un miglioramento delle funzionalità dei css avvenuto grazie al’ introduzione del CSS2 seguito dal CSS2.1 Attualmente stiamo assistendo alla raccomandazione da parte del W3c della versione css3 dei fogli di stile, la specifica non è stata ancora rilasciata ma puntualmente vengono fatti aggiornamenti sui moduli css3 proposti65.

3.5.2 Nuove proprietà Opacity Con la proprietà opacity possiamo impostare l’opacità di qualsiasi elemento all’interno della nostra pagina. Per regolarne la trasparenza dobbiamo modificare il valore della sua scala opacity, di default è pari a 1 e può arrivare fino a 0.0 ossia completamente trasparente.

Illustrazione 30 Esempio di opacity

div {opacity: 0.5} Border-radius Questa proprietà permette di arrotondare gli angoli dei div della nostra pagine senza bisogno di ricorrere a immagini o a complesse nidificazioni di div.

Le proprietà coinvolte sono 5: - border-top-left-radius - border-top-right-radius - border-bottom-left-radius - border-bottom-right-radius - border-radius

94

Illustrazione 31 esempio di borderradius

.div{ border-top-left-radius: 20px; border-top-right-radius: 40px; border-bottom-right-radius: 60px; border-bottom-left-radius: 80px; }

Naturalmente questa proprietà non è supportata da Internet Explorer e per alcune precedenti versioni di altri browser basta aggiungere il prefisso -moz- (per Firefox) e -webkit(per Safari e Chrome).

Box-shadow Insieme a boder-radius questa proprietà migliora sensibilmente la qualità e la leggerezza delle nostre pagine web, Box-shadow permette di creare ombre con diversi tipi di sfumature. .box {box-shadow:5px 5px 10px 2px #333333} La proprietà è composta da 5 valori e ogni valore crea una caratteristica alla sfumatura del box: - il 1° valore imposta l’ombra in senso orizzontale, i valori positivi impostano l’ombra sul lato destro del box e viceversa valori negativi generano l’ombra sul lato sinistro - il 2° valore imposta l’ombra in senso verticale, i valori positivi generano l’ombra sul lato inferiore mentre i valori negativi impostano l’ombra su lato superiore - la sfocatura dell’ombra è data dal 3° valore, impostare il valore allo 0 l’ombra appare netta e senza sfocatura, un valore alto crea un ombra molto sfocata, non sono accettati valori negativi - il 4° valore imposta il livello di diffusione dell’ombra, valori negativi tendono a contrarre l’ombra fino a farla scomparire mentre valori positivi tenderanno ad espanderla.

- Il colore è dato dal 5° valore Per creare l’ombra all’interno del box basterà inserire insert come 6° valore nella proprietà box-shadow: .box {box-shadow:5px 5px 10px 2px #333333 insert} Per vedere la proprietà supportata su ogni browser bisognerà inserire i suffissi -moz- e -webkit.div{ -moz-box-shadow: 0 0 25px #333333; -webkit-box-shadow:0 0 25px #333333; box-shadow: 0 0 25px #333333; }

95

Sfondi potenziati Con i CSS3 abbiamo una ridefinizione e un potenziamento della proprietà background-image. I CSS2 prevedevano una sola immagine di sfondo, con la nuova specifica possiamo definire più immagini di sfondo per ogni elemento. #div{ background-image: url(sfondo1.png), url(sfondo2.png), url(sfondo3.jpg); background-position: top left, bottom left; background-repeat: no-repeat, no-repeat, norepeat; background-color: white; } Quando impostiamo le due o più immagini di sfondo, queste vengono separate su più livelli sovrapposti, la prima immagine sarà al livello più alto, l’ultima definita nella proprietà sarà al livello più basso. Ogni immagini deve essere divisa da una virgola e per ognuna di esse è possibile definire i valori di posizione e di ripetizione.

Web fonts Questa proprietà non è del tutto nuova agli sviluppatori web, siamo già stati abituati all’uso dei web font dalla specifica CSS2. @font-face { font-family: ‘TangerineRegular’; src: url(‘Tangerine_Regular-webfont.eot’); } I web font vengono caricati dalla proprietà @font-face, a semplificarci il lavoro ci vengono in aiuto servizi on-line come Font Squirrel o Google Web Font che ci permettono di scegliere on-line il tipo di carattere e di scaricarci uno zip contenente il carattere nel formato TTF, EOT, WOFF, SVG e un file html di esempio d’applicazione del web font.

96

Layout multicolonna Il CSS3 definisce un gruppo di proprietà chiamate multicolumn layout che rendono possibile la distribuzione del testo su più colonne replicando ciò che avviene per la carta stampata.

Le proprietà presentate da questo modulo sono molte ma alcune non sono ancora supportate dai browser, le principali proprietà sono: - column-width, con cui definiamo la larghezza delle colonne - column-count, in questa proprietà noi definiamo il numero di colonne, il browser definisce automaticamente la larghezza - column-gap, definisce lo spazio tra colonne - column-rule, crea una linea divisoria tra colonne - column-span, espande il titolo sulle colonne, per esempio inserendo all vogliamo che il titolo si espanda sopra tutte le colonne #container { width: 750px; margin: 20px auto; column-width: 350px; -webkit-column-width:350px; -moz-column-width:350px; column-gap: 25px; -moz-column-gap:25px; -webkit-column-gap:25px; column-rule: 1px solid black; -moz-column-rule: 1px solid black; -webkit-column-rule: 1px solid black; } h1 {font-size: 18px; -webkit-column-span:all; -moz-column-span:all; column-span:all; }

Illustrazione 31 Esempio di multicolumn

97

Flexible box layout Un altra importante novità, ancora in fase di sperimentazione, è il Flexible Layout Module. Questa proprietà rende flessibili i box all’interno di un contenitore o del body stesso, facendo occupare lo spazio vuoto sia in senso verticale che in senso orizzontale. <div id=”container”> <div id=”box1”> <p>1. Lorem ipsum dolor sit amet.</p> </div> <div id=”box2”> <p>2. Lorem ipsum dolor sit amet.</p> </div> <div id=”box3”> <p>3. Lorem ipsum dolor sit amet.</p> </div> </div> #container { width: 760px; height: 400px; margin: 20px auto; border: 1px solid black; display: box; box-orient: horizontal; box-pack: justify; } #box1 { background: #bababa; padding: 10px; }

Illustrazione 32 Visualizzazione dell’esempio proposto dal codice

#box2 { background: #a1f3ff; padding: 10px; } #box3 { background: #d2fe90; padding: 10px; }

In questo esempio di markup abbiamo un box genitore chiamato ‘container’ e tre figli box1, box2 e box3.

Impostando a container la proprietà display:box, attiviamo au questo contenitore il modulo di layout flessibile.

98

Al box genitore abbiamo aggiunto altre proprietà: - box-orient,definisce l’orientamento dei box orizzontale o verticale - box-pack, ripartisce lo spazio intorno ai box, possiamo scegliere 4 valori di questo box start, end, justify e center.

Nel nostro esempio abbiamo stabilito justify, e lo spazio rimasto vuoto si è ripartito tra le colonne - box-align, definisce l’allineamento sull’asse verticale o sull’asse orizzontale a seconda del tipo di box-orient scelto Quelle viste fin’ora sono tutte proprietà che possono caratterizzare la flessibilità del box genitore, ne esiste però una che può rendere flessibili anche i box figli: box-flex. #box1 { background: #bababa; padding: 10px; width: 100px; }

Illustrazione 33 Visualizzazione dell’esempio proposto dal codice

#box2 { background: #a1f3ff; padding: 10px; width: 100px; } #box3 { background: #d2fe90; padding: 10px; -ms-box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }

In quest’esempio abbiamo stabilito una larghezza fissa per i primi due box, mentre per il secondo abbiamo assegnato la caratteristica di flessibilità.

E’ ben chiara l’evoluzione che farà il layout con l’introduzione di queste nuove novità che andranno, fra qualche anno, a sostituire completamente le proprietà come float e tutte le altre tecniche di posizionamento.

99

Acss media query Palmari, smart phone, web tv sono tutti mezzi per poter navigare su internet e sono tutti schermi di diverse dimensioni e con funzionalità diverse. Fruire allo stesso modo di un sito internet su più piattaforme diverse non è molto facile, il CSS3 viene incontro agli sviluppatori con uno strumento molto potente capace di collegare stili diversi a seconda del tipo e della funzionalità del media con cui navighiamo.

I media queris sono delle dichiarazioni che indicano al browser di utilizzare un tipo di css a seconda del media con cui l’utente è collegato. <link rel=”stylesheet” href=”colore.css” />

66 La lista completa dei tipi di media è possibile trovarla al link del W3.org

media=”screen

and

(color)”

I tipi di media previsti dalla specifica sono diversi tra cui la stampa, il braille, dispositivi di sintesi vocale ecc66..

3.5.3 Trasformazioni e animazioni Transition Negli ultimi anni i siti internet sino sono riempiti di effetti di transizioni d’immagini o di colori che di solito vengono fatti con il javascript o con flash. La nuova specifica ha introdotto un modulo chiamato CSS3 transitions, un modulo dedicato a transizioni completamente in css senza alcun bisogno di script esterni. div { width: 200px; height: 200px; background-color: 98d925#; transition-property: background-color; transition-duration: 2s; } div:hover { background-color: #ff5c00; }

Nell’esempio proposto abbiamo creato un quadrato di dimensione 200X200 px a cui assegnamo le proprietà di transition, nel momento in cui il mouse sarà sopra l’immagine questa cambierà colore (div:hover) .

Questa transizione avrà la durata di soli 2 secondi (transition-duration).

100

67 L’elenco delle proprietà di transizione è possibile trovarla nel Modulo Transition 68 I valori della proprietà sono elencati nel sito del w3.org

Questo modulo si basa sul principio del rollover a cui aggiunge delle proprietà: - transition-property, specifica la proprietà a cui verrà assegnata la transizione67 - transition-duration, definisce la durata della transizione in secondi, da quando inizia a quando finisce, di default è pari a 0 transition-timing-fuction,questa proprietà descrive l’andamento della transizione utilizzando i 4 punti di controllo della curva di Bézier, - transition-delay, impostando secondi desiderati ritarda l’esecuzione della transizione68 Trasformazioni

Il modulo CSS 2D trasforms mette a disposizione una proprietà per creare manipolazioni 2D sugli elementi.

Attraverso la proprietà trasform e al sistema di coordinate cartesiane è possibile ruotare, traslare, inclinare gli elementi di una pagina web.

Le proprietà a disposizione sono due: - trasform, che definisce il tipo di trasformazione da applicare all’elemento - trasform-origin, indicando la posizione X e Y del piano cartesiano definiamo il punto di origine da cui parte la trasformazione #object { transform: rotate(40deg); transform-origin: left bottom; }

Il modulo propone diversi tipi di trasformazione che si possono effettuare sugli oggetti della pagina: - matrix, consente di creare una matrice come quella contenuta nella specifica SVG - traslate, consente di traslare l’oggetto in base ai valori inseriti - translateX – translateY, traslano l’oggetto prendendo come valore solo l’asse delle X o delle Y - scale, ridimensiona l’oggetto in base ai valori inseriti - scaleX – scaleY, scala l’oggetto in base al valore inserito del solo asse delle X o delle Y - rotate, impostando il numero di gradi l’oggetto viene ruotato - skew, questa funzione distorce l’oggetto a seconda del numero di gradi impostato come parametro - skew x, skew y, la distorsione dell’oggettto avviene solamente in uno solo degli assi 101

Animazioni Le animazioni all’interno del foglio di stile sono state un autentica innovazione. La loro struttura è divisa in blocchi all’interno di una dichiarazione chiamata @-webkitkeyframes seguito dal nome dell’animazione che possiamo impostare a piacere. @-webkit-keyframes ‘pulse’ { from { background-color: red; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); } 33% { background-color: blue; opacity: 0.75; -webkit-transform: scale(1.1) rotate(-5deg); } 67% { background-color: green; opacity: 0.5; -webkit-transform: scale(1.1) rotate(5deg); } to { background-color: red; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); } }

I blocchi si riferiscono a un keyframe dell’animazione e descrivono lo stato delle stessa in quel determinato momento.

Nell’esempio abbiamo un elemento di colore rosso poi diventa blue e ruota di -5 gradi, prima di tornare alla posizione e al colore originario, ruota di 5 gradi e diventa di colore verde.

Per far partire l’animazione è necessario collegare al div,contenente l’animazione, le proprietà fondamentali del modulo: -webkit-animation-name, definisce il nome dell’animazione e deve essere uguale a quello impostato nel @-webkit-keyframes -webkit-animation-duration, espresso in secondi indica la durata dell’animazione -webkit-animation-iteration-count, questo valore vuole indicare il numero di volte che l’animazione si ripeterà, di default è 1 fino a infinite ovvero un animazione in loop.

-webkit-animation-timing-function, indica come si muoverà l’animazione sulla base della curva di Bèzier 102

3.6 Un browser migliore Il nuovo linguaggio html5 non sarà un big bang che cambierà internet dal giorno alla notte ma sarà un processo lungo stimato quasi 10 anni. La lentezza è dovuta dal fatto che il w3c lavora per ottenere l’approvazione da parte di tutti ed essendoci molti antagonismi e interessi economici in ballo è chiaro che sarà un processo lungo e difficile.

Il principale problema per chi crea contenuti web è la renderizzazione dei proprio codice da parte del browser.

Infatti ogni browser elabora e renderizza i contenuti a modo suo.

E’ necessario che uno sviluppatore web crei un sito che dia la medesima esperienza per ogni utente proveniente da qualsiasi tipo di browser o di ‘macchina’.

Un linguaggio non ancora diventato standard potrà creare numerosi problemi a chi crea il web, soprattutto se i browser non sono aggiornati (da parte dell’utente) e non hanno le potenzialità per eseguire le funzionalità dell’html5.

Ma ci arriveremo, le cose si stanno già muovendo sul web, si sta assistendo a un cambiamento in cui i browser saranno parte fondamentale dell’esperienza degli utenti. I grandi colossi operativi nel web, come youtube e facebook, si sono convertiti all’html5 e sono queste decisioni ad indirizzare il mercato del futuro.

Le potenzialità dell’html5 come la possibilità di creare animazioni in CSS3 dirà addio all’utilizzo di script esterni e a flash ottenendo un codice più leggero e richiedendo meno sforzo al browser per il caricamento della pagina.

Ad oggi i browser più aggiornati supportano maggiormente il flash (al 99%) rispetto all’html5 (40%), siamo comunque sicuri che l’html5 avrà la strada spianata soprattuto dopo l’appoggio di Apple che qualche mese fa dichiarò bandito il flash dai suoi prodotti.

Per ottenere una versione completa e finale dell’HTML5 bisognerà aspettare il 2014, ma questo non significa non testare fino a quella data...anzi! Più questo linguaggio verrà testato più si accelererà il lavoro del W3C perché si potranno scoprire velocemente bug e punti di sviluppo, è anche per questo che l’html5 è un open source.

103

Un linguaggio nuovo e ancora poco standard, come l’html5, ha un supporto parziale o ancora assente per alcune delle sulle funzionalità, è chiaro quanto sia importante avere sotto mano strumenti per testare i propri lavori in html5.

Oltre ad inserire sempre i suffissi -moz (per Firefox) o -webikt (Chrome e Safari), -o (Opera) nel css è buona cosa utilizzare questi strumenti messi a disposizione del web: - Modernizer, utili strumento che aiuterà lo sviluppatore nelle features non supportate dal browser - Caniuse, guida veloce sul supporto di funzionalità html5 e css3 nei browser - FindmebyIp, analizza il proprio browser di navigazione ed elenca i suoi punti di supporto dell’html5 e del css3 - Html5tester, funzione identica al precedente sito ma valuta in punti!

- Online dal 2008, Html5readiness analizza sei browser in diverse versione e il loro supporto all’html5

3.7 Html5 e accessibilità L’html5 avrà un ottimo potenziale per facilitare la vita ai diversamente abili soprattutto quando la specifica sarà passata da draft a specifica approvata e quando i browser supporteranno completamente le infinite funzioni di questo linguaggio.

69 Html5accessibility indica in una tabella gli accorgimenti per ottenere un markup in html5 accessibile

Utilizzare tag o moduli dell’HTML5 non ancora implementati significa rischiare di tagliar fuori parte di utenti soprattutto quelli diversamente abili che necessitano di apparecchiature specifiche come gli screenreader, usando vari accorgimenti69 (come i suffissi nel css o le longdesc per le immagini nella pagina web) potremo riuscire a far funzionare determinati moduli HTML5 ostici ma non è detto che si riesca ad ottenere un sito completamente accessibile.

Per siti in cui si richiede l’accessibilità come requisito, come quelli della pubblica amministrazione, bisognerà aspettare l’approvazione della specifica per poterli realizzare in html5.

104

3.8 Imparare l’html5 I costanti aggiornamenti non consentono una precisa descrizione in quanto è tuttora soggetto a modifiche.

Link utili: - Initializr, utilissimo tool per iniziare a creare la struttura di un sito web in html5 - Html5rock, il team di Google ha creato questo progetto come se fosse un parco giochi per iniziare a sperimentare tutte le potenzialità del nuovo linguaggio - Diveintohtml5, un ottima guida sulle novità dell’html5 - Il sito dei developers del WHATWG - Periodic-Table, una tabella periodica per ogni tag!

- Introducinghtml5 - Html5snippets, raccolta di codici e demo per iniziare a testare il nuovo linguaggio del web

105

106

L’esordiente ePub3

4.1 Storia ePub L’ePub ha le sue radici nel lontano e obsoleto 1999 quando l’ Open eBook Forum approvava uno standard chiamato OEB, un formato aperto e libero da diritti per la creazione di ebook.

L’Open eBook Forum divenne in seguito l’International Digital Publishing Forum (IDPF) e al OEB 1.0 seguirono successive revisioni, la 1.1 e la 1.2 tra il 2001 e il 2002.

La crisi e l’immaturità del settore dell’editoria digitale portarono a un periodo di anarchia dei vari formati fino al 2007, anno in cui venne rispolverato il vecchio OEB e rinominato ePub dal gruppo IPDF. Ad oggi la versione 2.0.1 del formato ePub è sottoposto ad una significativa revisione con il nome ePub 3 iniziata nell’estate del 2010.

4.2 Formati che cambiano La necessità di una nuova revisione deriva dal desiderio di creare ebook sempre più accattivanti che possano andare oltre la funzione di libro con solo testo.

Strutturalmente parlando troviamo l’esigenza di layout a più colonne per riviste e quotidiani, non solo, ma nell’attuale specifica c’è la mancanza totale di supporto per le formule matematiche, annotazioni e di strutture per bibliografie, glossari, note ; strutture necessarie per la diffusione del formato ePub come pubblicazione scolastica.

Il nuovo rilascio aprirà la porta a nuove esperienze cercando di soddisfare un maggiore numero di lettori ed editori, introducendo inedite forme di multimedialità e di accessibilità.

70 XHTML5 è una nuova versione di HTML che andrà a sostituire l’XHTML, sviluppato dal WHATWG, questo tipo di linguaggio prende le regole dalla specifica XML e il vocabolario dall’HTML5, per questo viene definito un linguaggio poliglotta. La necessità di utilizzare XHTML5 per la creazione degli ePub3 è dovuta al fatto che ha la capacità di estendere l’html5 a certe funzionalità ( come formule matematiche e immagini scalabili).

IDPF ha basato la nuova specifica su due nuove tecnologie in via di sviluppo: XHTML570 e CSS3.

L’utilizzo di questi due nuovi linguaggi avrà come risultato una maggiore diffusione del formato ePub in quanto supportato ottimamente dagli ebook reader di nuova generazione.

107

L’HTML5, che sarà il futuro standard del web, è un ottima base per la creazione di ePub in quanto promette importanti cambiamenti accoppiandolo al CSS3 e al JavaScript.

A rendere veramente innovativo il formato ePub sarà proprio l’utilizzo di quest’ultimo, un linguaggio che permette di far eseguire al dispositivo funzionalità interattive avanzate.

Un esempio di queste funzionalità possiamo trovarlo nella possibilità d’inserire all’interno di una pubblicazione grafici o formule matematiche che fin’ora potevano essere implementati solo sotto forma di semplici immagini. Il supporto di questo linguaggio di scripting aprirà la porta al mercato degli ebook per testi scolasti o tecnici e scientifici.

71 Per le caratteristiche multimediali non supportate da alcuni reader e alcune tecnologie assitive

108

Un importante obiettivo per gli sviluppatori del formato era quello di migliorarne l’accessibilità, con le nuove specifiche possiamo dire di aver raggiunto questo piccolo step, le nuove caratteristiche renderanno le pubblicazioni in questo formato veramente più accessibili grazie a un markup semantico (html5), layout dinamici, utilizzo del Text To Speech e ai meccanismi di fallback71: - passaggio da XHTML 1.1 a HTML5 per il contenuto dell’ebook - possibilità s’inserimento d’intestazioni e piè di pagina grazie ai tag semantici dell’html5 - supporto di differenti modalità di scrittura e dei caratteri non romani (orientamento verticale, Ruby); - supporto proprietà avanzate CSS3; - miglioramenti nella gestione dei metadati; - miglior supporto per dizionari e glossari; - adozione del linguaggio javascript; - supporto di MathML; - multimedialità con i tag <audio> e <video> dell’html5; - raffinamento dei requisiti richiesti per la conformità allo standard.

I grandi cambiamenti che si avranno con l’ePub 3 avverranno grazie alle nuove quattro specifiche che gestiscono le tecnologie applicate: - Epub Pubblications, è il documento che definisce la semantica e i tipi di contenuti richiesti, i metadati ed elenca tutte le risorse utilizzate per il funzionamento del epub.

Nella versione 2.0 questa specifica era chiamata Open Packaging Format (OPF) - Epub Content Documents 3.0, è la specifica che spiega i profili di utilizzo delle tecnologie HTML 5, SVG, fogli di stile in CSS3, la motivazione di questa specifica sta nell’ambiguità che si potrebbe creare nell’utilizzo di questi linguaggi. L’ePub3 prevede un utilizzo ristretto proprio per evitare queste incertezze. Nella versione 2.0 questa specifica era chiamata Open Publication Structure (OPS) - Epub Media Overlays 3.0, é una nuova specifica non presente nella versione 2.0 del ePub, definisce gli oggetti multimediali della pubblicazione: audio, video e sincronizzazione del testo. Sono regole specifiche per chi ha disabilità visive.

- Epub Open Container Format 3.0 (OCF), definisce il processing per la creazione dei file e la compressione dell’ePub container in formato .zip . Questo documento è identico a quello definito per la versione 2.0 Strutturalmente parlando le nuove pubblicazioni in ePub3 saranno costituite alla solita maniera della vecchia versione.

La pubblicazione dovrà essere custodita all’interno di uno .zip (poi rinominato con estensione .epub).

Illustrazione 34 pacchetto ePub

Esempio

di

71 Nella versione 2.0 il file di navigazione TOC aveva con estensione .ncx, con la nuova versione questo file deve essere fatto in in xhtml

All’interno della cartella contenitrice troveremo: - il file mimetype - la cartella META-INF che ha come scopo principale quello di contenere un file chiamato container.xml che punta al file content.opf - la cartella OEBPS contiene tutti i file xhtml, i fogli di stile, il file di navigazione dei contenuti nav.xhtml72, il file content.opf, la cartella / immagini e /video.

109

Mimetype Il file mimetype, come nella versione 2.0, avrà lo scopo di ricordare al sistema operativo di essere un file epub. Il contenuto del file sarà la semplice scritta: application/epub+zip Cartella META-INF L’elemento più importante in questa cartella è il file obbligatorio container.xml che indica al software del device dove si trova il documento .opf all’interno della cartella OEBPS: <?xml version=”1.0” encoding=”UTF-8”?> <container xmlns=”urn:oasis:names:tc:opendocument:xmln s:container” version=”1.0”> <rootfiles> <rootfile full-path=”OPS/package.opf” mediatype=”application/oebps-package+xml”/> </rootfiles> </container>

Le nuove specifiche hanno definito dei nuovi file da inserire all’interno della cartella META-INF: - rights.xml, file opzionale per le informazioni sui diritti digitali - encryption.xml è un file opzionale che contiene le informazioni sui diritti digitali - signatures.xml contiene le firme digitali ed è un file facoltativo - metadata.xml è un file utilizzato per memorizzare i metadati - manifest.xml è il manifesto dei contenuti Cartella OEBPS All’interno di questa cartella troveremo il file .opf, le cartelle con le immagini e i contenuti multimediali, i capitoli della nostra pubblicazione e i fogli di stile.

110

4.2.2 File .opf Il file .opf è la principale fonte di descrizione della nostra pubblicazione poichè descrive gli elementi strutturali e descrittivi del nostro ebook; è un documento .XML composto da un insieme di elementi ognuno con le proprie funzioni: - metadati, è l’elemento che descrive attraverso degli identificatori le informazioni sulla pubblicazione e sugli autori.

- il manifest elenca e descrive tutti gli elementi che compongono la nostra pubblicazione - spine è la spina dorsale dell’ePub, il suo compito è quello di elencare in ordine sequenziale l’ordine di lettura delle risorse della nostra pubblicazione.

- fallback chains, elenca tutte le risorse che hanno bisogno di avere un ripiego alternativo in caso fossero inaccessibili

Metadati

Un’altra importante novità all’interno della specifica epub3 sono l’ampliamento dei metadati ovvero tutti quei tag identificativi di un opera, come il titolo, l’autore e tutto quello che serve per catalogare un testo.

72 Per i libri cartacei si parla di “Numero di edizione” per gli ebook digitale di “Versione”

Fin’ora le specifiche Dublin Core non consentivano una corretta catalogazione dei libri digitali, necessaria per gli utenti in quanto esigenti d’informazioni riguardanti la versione72 dell’ebook on-line, che può cambiare molto rapidamente e senza troppe notifiche, e per gli editori che necessitano di queste informazioni per migliorarne la vendita e la catalogazione degli ebook on line.

Le varie versioni dei libri elettronici possono cambiare ed essere immesse sul mercato senza alcuna notifica, la velocità di questo processo crea un gap informativo che con questa nuova specifica è stato molto colmato.

111

73 Sono obbligatori non solo per un ebook usabile ma anch edal punto di vista della retrocompatibilità con i reader di vecchia generazione

La specifica 3.0 prevede la presenza obbligatoria73 degli elementi del set Dublin Core: dc:identifier, dc:title,dc:language74.

74 Vedere Capitolo 2

<package… unique-identifier=”pub-id”> <metadata xmlns:dc=”http://purl.org/dc/ elements/1.1/”> <dc:identifier id=”pub-id”> urn: uuid: A1B0D67E </ dc: identificatore> <dc:title id=”t1”>Breaking Down</dc:title> <meta refines=”#t1” property=”title-type”>main</ meta> <dc:title id=”t2”>Twilight</dc:title> <meta refines=”#t2” property=”title-type”> collection </meta> <meta refines=”#t2” property=”group-position”>1</ meta> <dc:title id=”t3”>Twilight, Parte tre: Breaking Down</dc:title> <meta refines=”#t3” property=”title-type”> extended</meta> … </metadata>

75 I termini del vocabolario di default, mentre DCTERMS, MARC, MEDIA, ONIX, XSD

Questi elementi obbligatori sono stati ampliati per dare maggiore informazioni possibili; è stata introdotta la possibilità d’inserire un titolo e i sottotitoli e se fa parte di una collezione e che numero di volume è della stessa (come nell’esempio).

La nuova specifica ha previsto la possibilità di descrivere nei metadati tutti i dati riguardanti l’ autore, i collaboratori, i diritti di pubblicazione e anche elementi descrittivi lcome a presenza di script MathML o di immagini SVG. Per poter inserire le nostre informazioni all’interno dei metadati abbiamo bisogno di diversi vocabolari: uno di default e uno di metadati riservati come DCTERMS, MARC, MEDIA, ONIX, XSD75.

Autore <dc:creator id=”creator”>Stephenie Meyer</dc:creator>

In caso di autori orientali sarà possibile scrivere anche il nome occidentalizzato e il nome con idiomi, indicarne il ruolo e la proprietà artistica della pubblicazione.

112

Fonte

<dc:identifier id=”isbn-id”> urn: isbn: 9780101010101 </ dc: identificatore>

<meta refines=”#isbn-id” scheme=”onix:codelist5”> </meta>

property=”identifier-type”

Con l’elemento fonte si potrà collegare l’ePub alla pubblicazione cartacea da cui è derivato inserendo il numero identificativo per i libri isbn.

Meta Gli elementi meta possono essere considerati come delle specificazioni dei metadati, nei precedenti esempi il tag <meta ...> dava una spiegazione ulteriore al metadata a cui era collegato.

Link Oltre ai dati riferiti alla pubblicazione, possiamo includere nei metadati le risorse interne ed esterne della nostra pubblicazione, questo elemento collega la pubblicazione a una risorsa esterna <link rel=”onix-record” onix/12389347”/> <link rel=”xmp-record” xmp/12389347”/> <link rel=”foaf:homepage” book-info/12389347” />

href=”http://example.org/ href=”http://example.org/ href=”http://example.org/

Pensiamo ad esempio di dover acquistare una guida turistica su una piattaforma di vendita on line, senza poterla sfogliare come possiamo essere sicuri che descriva i luoghi e gli itinerari che sto ricercando??

I metadati potrebbero contenere quelle parole chiave utili per una corretta catalogazione e per consentire agli utenti di cercare con precisione ciò che vogliono.

113

Manifest L’elemento manifest, all’interno del file .opf, fornisce un elenco di tutte le risorse della pubblicazione, ogni elemento item deve elencare un documento e la tipologia dello stesso (media-type) insieme al collegamento della posizione del file (href).

Non è importante l’ordine di elencazione ma è importante che ogni elemento sia incluso La mancata registrazione di un file all’interno dell’elemento manifest potrebbe rendere una pubblicazione diversa da quella immaginata. <manifest> <item id=”intro” href=”intro.xhtml” media-type=”application/xhtml+xml”/> <item id=”c1” href=”chap1.xhtml” media-type=”application/xhtml+xml”/> <item id=”c2” href=”chap2.xhtml” media-type=”application/xhtml+xml”/> <item id=”f1” href=”./images/fig1.jpg” media-type=”image/jpeg”/> <item id=”css” href=”./style/book.css” media-type=”text/css”/> … </manifest>

Nel manifest andranno definite anche le ricadute di fallback: <manifest> <item id=”item1” href=”chap1_docbook.xml” media-type=”application/docbook+xml” fallback=”fall1”/> <item id=”fall1” href=”chap1.xml” media-type=”application/z3986-auth+xml” fallback=”fall2” /> <item id=”fall2” href=”chap1.xhtml” media-type=”application/xhtml+xml”/> … </manifest>

114

Analizzando il codice possiamo notare il sistema di ricaduta, nel primo item abbiamo il collegamento al file chap1_docbook. xml e l’indicazione del fallback=fall1, questa indicazione fa partire il sistema di ricaduta; infatti nel momento in cui il primo file non funzioni il software andrà a caricare il chap1. xml con id=”fall1”, in caso di mancato funzionamento il software attraverserà tutti gli elementi del sistema di ricaduta fino a quando non incontrerà una risorsa supportata al posto di quella non supportata, nell’esempio il sistema di ricaduta cadrà fino al terzo item con id=”fall2” .

Il file che contengono elementi MathML o immagini SVG devono essere elencati distintamente, specificando il tipo di media: <manifest> …. <item id=”cover” href=”./images/cover.svg” properties=”cover-image” media-type=”image/svg+xml”/> … </manifest>

Properties è un attributo dell’elemento manifest che specifica il tipo di risorsa: cover-image, mathml,nav, remote-resorce, script, svg e switch.

76 Sia il nuovo file di navigazione nav. xhtml sia quello previsto dalle specifiche del vecchio formato toc.nc

In questo momento di transizione, tra il nuovo e il vecchio formato, è necessario elencare e inserire entrambi i file di navigazione76 per creare un meccanismo di fallback retrocompatibile per i reader di vecchia generazione: <manifest> <!-- Qua andremo a linkare il file toc.xhtml con il tag <nav> --> <item id=”toc” properties=”nav” href=”toc.xhtml” media-type=”application/xhtml+xml”/> <!-- Questa sarà la stringa per collegare il file per il meccanismo di fallback --> <item id=”ncx” href=”toc.ncx” media-type=”application/x-dtbncx+xml”/> </manifest> <!-- La retrocompatbilità richiede l’attributo toc=”ncx” nel tag <spine> --> <spine toc=”ncx”>

115

Spine

L’elemento spine definisce l’ordine sequenziale di lettura della nostra pubblicazione di tutti gli elementi elencati nel manifest: <manifest> ... <item id=”cap1” href=”cap1.xhtml” media-type=”application/xhtml+xml”/> ... </manifest> <spine> ... <itemref idref=”cap1”/> <itemref idref=”cap2”/> ... </spine>

Ogni elemento elencato all’interno dello spine deve essere presente all’interno del manifest, questi elementi saranno collegati dall’attributo id nel manifest e idref nello spine.

116

4.2.2 File nav 77 Chiamato per comodità toc.ncx

La specifica 2.0 prevedeva, all’interno del nostro epub, un documento con estensione .ncx77 con la funzione di documento di navigazione, questo elemento è stato deprecato e sostituito dal tag <nav> e inserito all’interno di un file con estensione .xhtml .

Il nuovo documento di navigazione si basa sulla specializzazione del tag <nav> introdotto dall’html5, un elemento altamente semantico per i contenuti di navigazione.

Con tale cambiamento si è voluto dare la possibilità a tutti gli utenti di accedere e navigare facilmente tra i documenti della pubblicazione in maniera più usabile e accessibile.

Il file nav.xhtml si apre come tutti i documenti con estensione .xhtml: <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> , tramite i tag <li> di lista andremo ad elencare i nostri contenuti. <nav epub:type=”toc” id=”toc”> <h1>Tabella dei contenuti</h1> <ol> <li> <a href=”chap1.xhtml”>Chapter 1</a> </li> <li> <a href=”chap2.xhtml”>Chapter 2</a> </li> …. </ol> </nav>

Per migliorare l’esperienza dell’utente è opportuno elencare tutte le immagini, tabelle e video e tutti gli altri elementi che potrebbero essere al centro dell’interesse dell’utente.

117

4.3 Arricchimento semantico 78 Vedere capitolo n.3

La nuova versione dell’epub3 ha ottenuto un arricchimento semantico grazie all’utilizzo dei tag78 html5 ‘altamente specializzati’ in cui il nome identifica il contenuto e ciò che rappresenta.

Utilizzando questo linguaggio si elimineranno alcuni problemi presenti nelle precedenti specifiche, come la mancanza dell’intestazione e il piè di pagina, ora presenti con due tag ben definiti <header> e <footer>.

Al markup semantico dell’HTML5 è stato introdotto l’attributo epub:type, elemento che permette di aggiungere significati e ruoli agli elementi interni alla pubblicazione. <html … xmlns:epub=”http://www.idpf.org/2007/ops”> … <section epub:type=”dedication”> … </section> … </html>

79 EPUB 3 Structural Semantics Vocabulary [idpf.org/epub/vocab/ structure/#]

Attraverso l’uso del ‘vocabolario di semantica strutturale’79 possiamo specificare il ruolo di divisioni, sezioni e componenti di un documento ( come il preambolo, l’indice, il glossario ecc...), note e contenuti complementari e molto altro.

Nell’esempio abbiamo definito che la parte <section> abbia come scopo la dedica.

118

4.3.2 Documenti con un certo stile L’editoria digitale richiedeva una struttura di layout più complessa, questo obiettivo è stato raggiunto con l’assunzione delle nuove regole css3 che permettono di raggiungere un livello avanzato di formattazione della pagina: - page-break imposta la rottura della pagina dopo il comportamento di un oggetto, il fenomeno delle vedove e delle orfane. table {page-break-after:always;}

Nell’esempio, dopo una tabella interrompere sempre la pagina.

- word-break, definisce la sillabazione delle parole all’interno di un box p.test {word-break:hyphenate;} - word-spacing, imposta lo spaziatura tra le parole p { word-spacing:30px;} - sillabazione, nuova proprietà per il css3 che permette la suddivisione delle parole per migliorare la suddivisione fra paragrafi. .class {hyphens: auto;} 80 Questo elemento viene trattato nel capitolo 3

- multicolonna, imposta il testo selezionato su più colonne80, questo elemento incrementerà l’uso del formato ePub che per ora è utilizzato solo per pubblicazioni a un unica colonna.

- font incorporati, l’incorporamento dei font OpenType e WOFF - scrittura verticale per lingue straniere - incorporamento di fogli di stile multipli all’interno di una pubblicazione

119

4.4 Esperienza multimediale 81 Questo elemento viene trattato nel capitolo 3 Per dispositivi intendiamo tablet o smartphone con sistema operativo come Android, iOS, Windows Mobile

Ad oggi un ebook“multimediale”si può ottenere solo creandolo come applicazione con un costo di sviluppo notevole e in formato chiuso in quanto creato per uno specifico dispositivo81 su cui andrà a girare.

L’attuale versione del formato epub non supporta nativamente i contenuti digitali, solo per il fatto che epub3 sia basato sull’html5 ci fa capire quanto da un semplice ebook si possa passare a un libro digitale coinvolgente a 360° con audio e video integrati al testo, per una vera esperienza interattiva a costi contenuti e senza diritti proprietari.

Immaginiamo per un secondo di studiare su un ebook di storia, dove non solo possiamo leggere gli avvenimenti storici ma possiamo anche viverli, sentirli sulla pelle come emozioni.

Credo che non ci sia niente di meglio di uno studio che riesca a coinvolgerci interamente andando a stimolare più parti della nostra mente.

Per creare una pubblicazione interattiva possiamo inserire audio e video grazie ai tag forniti dall’html5: <audio> attributo file </audio> <video> attributo file </video> basterà inserire questi tag all’interno del file xhtml5 del capitolo e inserire i file all’interno della cartella OEBPS - audio/ o nella cartella video/.

Il file supportati sono per i video H.264 e VP8 mentre per l’audio MP3 e AAC LC MP4.

Per ora i file video andranno caricati come file fisici al’interno dello .zip in quanto per ora non è possibile fare un embedding caricando i video in streaming.

Questo oltre ad essere un reale problema di pesantezza della pubblicazione ci sobbarca di tutti i problemi relativi ai diritti proprietari del video.

Un accorgimento,proposto dalla nuova specifica,per migliorare l’accessibilità dei documenti con contenuti multimediali è quello di dichiarare, all’interno del documento contenente audio e video, l’elemento epub:trigger. Questo attributo crea un interfaccia utente per il controllo della riproduzione degli oggetti multimediali (come pausa, play, stop ecc...) senza bisogno di includere un ulteriore oggetto di scripting per creare una funzionalità simile.

120

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops” xmlns:ev=”http://www.w3.org/2001/xml-events”> <head> <epub:trigger ev:observer=”pause” ev:event=”click” action=”pause” ref=”test”/> <epub:trigger ev:observer=”resume” ev:event=”click” action=”resume” ref=”test”/> <epub:trigger ev:observer=”mute” ev:event=”click” action=”mute” ref=”test”/> <epub:trigger ev:observer=”mute” ev:event=”click” action=”show” ref=”muted”/> <epub:trigger ev:observer=”unmute” ev:event=”click” action=”unmute” ref=”test”/> <epub:trigger ev:observer=”unmute” ev:event=”click” action=”hide” ref=”muted”/> </head> <body> <video id=”test” src=”birds.mp4” width=”320” height=”240”/> <p> <span class=”button” id=”resume”>Play/Resume</ span> <span class=”button” id=”pause”>Pause</span> <span class=”button” id=”mute”>Mute</span> <span class=”button” id=”unmute”>Unmute</span> <span id=”muted”>MUTED</span> </p> </body> </html>

82 Per applicazioni generate a modello di pubblicazioni

L’integrazione multimediale all’interno di una pubblicazione è stata attesa da tempo e renderà la lettura di un ebook un esperienza veramente fantastica mai avuta dai libri cartacei, non solo molti esperti del settore definiscono la nuova versione ePub come il sostituto perfetto alle app82, anche se molti dubbi restano per quanto riguarda la compatibilità dei book reader....

121

4.4.2 Text to Speech Con la nuova versione di ePub 3 si è fatto molto per migliorare l’accessibilità dei libri elettronici, infatti con l’adozione della specifica MediaOverlay3.0 possiamo integrare file multimediali direttamente all’interno dei nostri documenti html tramite un meccanismo che permette la sincronizzazione del testo e contenuti audio all’interno di una pubblicazione chiamato Text To Speech (TTS).

Il sistema di sintesi vocale TTS utilizza diversi linguaggi Il TTS analizza il testo scritto e lo trasforma in suono utilizzando diversi linguaggi: - PLS, acronimo di Pronunciation Lexicon Specification è il documento del W3C che regola la pronuncia del testo parlato consentendo agli autori di fornire regole di pronuncia - SSML, letteralmente Speech Synthesis Markup Language W3C, specifica pronuncia fonemica / fonetica del testo rappresentato dall’elemento a cui è collegato.

- CSS3 Speech. È un modulo del W3C che permette di controllare, tramite css, l’altezza, la velocità e il volume del tipo di voce oltre alle proprietà visive di evidenziazione del testo che viene letto.

L’audio di narrazione può esser rappresentato da una serie di clip audio, per collegarli al nostro testo abbiamo bisogno di fare un paio di passaggi: 1. All’interno del nostro capitolo andremo a collegare l’audio, per esempio, di un paragrafo <p> <text src=”chapter1.xhtml#sentence1”/> <audio src=”chapter1_audio.mp3” clipBegin=”23s” clipEnd=”30s”/> </p>

Il tag <audio> ha come attributi clipBegin e clipEnd che indicano l’inizio e la fine dell’audio del paragrafo all’interno del chapter1_audio.mp3 2. Documento Media Overlay .smil, per ogni capitolo contenente audio bisogna creare un documento con estensione .smil, questo file elencherà tutti i file audio che vogliamo collegare ai vari paragrafi del capitolo.

122

<smil xmlns=”http://www.w3.org/ns/SMIL” xmlns:epub=”http://www.idpf.org/2007/ops” version=”3.0”> <body> <seq id=”id1” epub:textref=”chapter1. xhtml#sidebar” epub:type=”sidebar”> <par id=”id2”> <text src=”chapter1. xhtml#sidebartitle”/> <audio src=”chapter1_audio.mp3” clipBegin=”0:24:15.000” clipEnd=”0:24:18.123”/> </par> <par id=”id3”> <text src=”chapter1. xhtml#sidebartext1”/> <audio src=”chapter1_audio.mp3” clipBegin=”0:24:18.123” clipEnd=”0:24:38.530”/> </par> <par id=”id4”> <text src=”chapter1. xhtml#sidebartext2”/> <audio src=”chapter1_audio.mp3” clipBegin=”0:24:38.530” clipEnd=”0:25:00.515”/> </par> </seq> </body> </smil>

Abbiamo diviso il capitolo in parti di paragrafo e abbiamo associato l’audio di ogni piccola parte, il tag <seq> indica la sequenza di lettura. L’attributo epub:textref che collega questa sequenza di audio a quella elencata all’interno del documento .opf .

3. All’interno del manifest del documento pacchetto .opf collegheremo il file in questo modo <manifest> <item id=”ch1” href=”chapter1.xhtml” media-type=”application/xhtml+xml” media-overlay=”ch1_audio”/> <item id=”ch1_audio” href=”chapter1_audio.smil” media-type=”application/smil+xml”/> </manifest>

123

4. I file multimediali dovranno essere elencati anche all’interno dei <metadata> <package> <metadata> … <meta property=”media:duration” refines=”#ch1_audio”>0:32:29</meta> <meta property=”media:duration” refines=”#ch2_audio”>0:34:02</meta> <meta property=”media:duration” refines=”#ch3_audio”>0:29:49</meta> <meta property=”media:duration”>1:36:20</meta> <meta property=”media:narrator”>Joe Speaker</ meta> <meta property=”media:active-class”>-epubmedia-overlay-active</meta> … </metadata> … </package>

All’interno dei metadata, nell’attributo property, andremo ad indicare il valore di durata dell’audio di un singolo capitolo e dell’intera pubblicazione (definito SMIL clock), nell’attributo refines indicheremo l’id dell’audio.

Per arricchire le informazioni si potrebbe aggiungere informazioni sul narratore (media:narrator) e il collegamento alla proprietà css impostata per creare un effetto visivo come per esempio un evidenziazione gialla di sfondo al testo letto dalla voce automatica al momento. .-epub-media-overlay-active{ background-color: yellow; }

Questa è una grandissima occasione dal punto di vista dell’accessibilità ed è anche un occasione per utilizzare gli ebook per lo studio di una lingua straniera visto che si potrà conoscere immediatamente il tipo di pronuncia.

124

4.4.3 Internazionalizzazione

83 In oriente molte parole hanno più di un significato e spesso alcune di esse hanno bisogno di un certo livello d’istruzione

Il nuovo linguaggio html5 ha introdotto il tag <ruby>, questo tag ha la funzione di creare annotazioni sopra o sotto la linea di testo. L’origine di questo tag deriva dalla lingua cinese e giapponese dove è solito inserire i caratteri di annotazione per indicare i caratteri sillabari ovvero il tipo di pronuncia e il loro significato.83 Il tag <ruby>, supportato dalla nuova versione dell’epub3, fornisce un grande occasione per unificare e globalizzare questo tipo di formato sul mercato globale, si potranno aprire le porte ai linguaggi linguaggi arabi, con scrittura da destra a sinistra e quelli orientali in senso verticale.

Il tag rubino permetterà d’inserire i caratteri non romani come veri e propri font accessibili a tutti, fin’ora inseriti sotto forma d’immagine .jpg.

Uscendo dal contesto delle lingue orientali possiamo trovare applicazione del tag <ruby> nella traduzione di parole e in testi in lingua straniera come annotazioni del tipo di pronuncia. Il Codice: L’alfabeto in lingua inglese:</br> <ruby> <rb>A</rb> <rt>ei</rt> </ruby> <ruby> <rb>B</rb> <rt>bi</rt> </ruby> <ruby> <rb>C</rb> <rt>si</rt> </ruby> <ruby> <rb>D</rb> <rt>di</rt> </ruby>

84 Di default l’annotazione viene inserita sopra alla parola ma tramite css possiamo indicare la posizione a nostro piacimento.

<ruby> <rb>E</rb> <rt>i</rt> </ruby>

Con l’apertura del tag <ruby>, indichiamo che stiamo inserendo un testo con annotazione84.

125

Illustrazione 35 Esempio di scrittura verticale

84 Queste proprietà sono ancora in fase esplorativa in quanto non ancora in modalità raccomandazione 85 Esistono lingue che vengono lette da destra a sinistra altre sono lette in senso verticale da destra verso sinistra o viceversa

All’interno del tag <ruby> troviamo: - <rb> che serve per indicare il testo che sarà annotato - <rt> indica il testo rubino ovvero l’annotazione vera e propria - possiamo nidifcare i tag <rb> e <rt> all’interno di un tag chiamato <rp>, questo tag indica una parentesi e serve per i browser che non hanno il supporto rubino e anche per consentire il copia e incolla dell’annotazione.

La posizione delle annotazioni può essere personalizzata tramite css con le proprietà ruby-align e ruby-position per definire l’allineamento e la posizione della sola annotazione rubino.

Possiamo associare al tag <ruby> la proprietà introdotta dal CSS3: rotation, text-orientation e writing-mode che gestiscono la direzione del testo84.

Le proprietà variano a seconda del tipo delle caratteristiche della lingua85: - se vogliamo gestire la direzione usiamo dir che ha come valori ltr (da sinistra a destra) e rtl (da destra a sinistra); - la gestione dell’allineamento verticale ha bisogno della proprietà writing-mode che ha come valori horizontal-tb (modalità orizzontale), vertical-rl (allineamento verticale da destra a sinistra) e vertical-lr (allineamento verticale da sinistra a destra) <div style writing-mode: vertical-rl;> <p> </div>

</p>

Il tag ruby aprirà le porte internazionali al epub3 ma anche a grandi occasioni per pubblicazioni didattiche per lo studio delle lingue straniere o di guide turistiche con annotazioni rubino di pronuncia o di traduzione del significato.

126

4.4.4 Javascript

86 Ideatore e sviluppatore del software Sigil

87 Pensiamo ad esempio all’utilizzo della libreria MathMl che permette di creare formule matematiche o grafici interattivi senza l’uso di immagini poco accessibili 88 Accostando il tag <canvas> dell’ html5

L’utilizzo del javascript è veramente una novità che permetterà di creare ebook di alto livello, un’ evoluzione inimmaginabile fino a poco tempo fa!

L’adozione dello scripting ha alzato molte discussioni, tra queste possiamo ricordare il “post di Malcovìck186” che avanza la paura di vedere un ebook trasformato in una sorta di applicazione con mille effetti speciali, tagliando fuori utenti con reader di vecchia generazione o utenti con tecnologia assistiva.

Questa visione è fin troppo pessimistica, l’adozione del linguaggio di scripting va visto come grande opportunità per il formato ePub in quanto l’uso di questa libreria aumenterà la qualità e la tipologia delle pubblicazioni in distribuzione.

Con un uso sapiente si renderanno completamente accessibili87 libri che fin’ora erano privilegio di pochi, si potranno realizzare magazine con cruciverba e minigiochi88 o semplicemente libri con esercizi da fare, come quelli che vengono assegnati agli scolari durante l’estate.

4.4.5 MathML

Illustrazione 35 Grafico cartesiano

89 Dal sito inteligentwriting.com nel post “Digitally Displaying Math Formulas with MathML” del 29 ottobre 2011

Una delle più grandi sfide poste all’epub3 è stata quella di rendere accessibili le formule matematiche, fin’ora inserite all’interno di un testo sotto forma d’immagine con una leggibilità veramente precaria.

Il problema maggiore era rappresentato dalla composizione delle formule costituite da numeri in apice, in pedice, frazioni e linee accompagnati da caratteri speciali89.

Per colmare questo gap si è pensato di sfruttare il linguaggio javascript, precisamente MathJax. Utilizzando questa libreria possiamo riuscire a realizzare complesse formule matematiche all’interno del codice html5.

Mathml, acronimo di Mathematical Markup Language, è un linguaggio che permette di ricevere ed elaborare le formule matematiche dal web.

127

90 Tutorial e spiegazioni sul sito https://developer.mozilla.org/en/ MathML

Più di 200 tag specifici permettono di creare e specificare un espressione algebrica90: <epub:switch id=”mathmlSwitch”> <epub:case required-namespace=”http://www.w3.org/1998/ Math/MathML”> <math xmlns=”http://www.w3.org/1998/Math/MathML”> <mrow> <msqrt> <mi>x</mi> <mo>-</mo> <mn>3</mn> </msqrt> <mo>+</mo> <msqrt> <mrow> <mi>x</mi> <mo>-</mo> <mn>3</mn> </mrow> </msqrt> </mrow> </math> </epub:case> <epub:default> <img src=”immagine-della-formula.jpg”/> </epub:default> </epub:switch>

Analizzando la formula matematica: - epub:switch, è un attributo del nuovo epub3 e svolge la funzione di interruttore per la retrocompatibilità, nell’esempio abbiamo impostato la visualizzazione di un immagine in caso di mancato supporto alle formule Mathml - <mrow> è l’elemento che serve per indicare l’inizio di un espressione algebrica, è un elemento fondamentale per una formula accessibile a tutti.

- <msqrt> è il tag che rappresenta le radici quadrate - <mi> è il contenitore di costanti e variabili o nomi di funzioni - <mo> è l’elemento che segnala gli operatori come i segni aritmetici, le parentesi, gli uguali ec...

- <mn> è il tag che contiene i valori numerici

128

Non è facile creare formule matematiche, soprattuto con tutti questi nuovi tags, per ovviare a questo problema esistono vari strumenti disponibili: - FireMath, un editor on line che permette facilmente di creare formule complesse - Easyme invece propone un sito per l’apprendimento con diversi modelli di strutture aritmetiche.

La possibilità di tradurre formule matematiche in linguaggio formale renderà le pubblicazioni didattiche molto più accessibili, sarà comunque necessario affiancare alla formula testi descrittivi ed immagini alternative.

L’elemento MathML può essere affiancato al tag <canvas> dell’html5 che permette di creare uno spazio nuovo e infinito all’interno della pagina, dove poter creare e modificare grafici, forme geometriche o artistiche giocando con gli elementi in un prezioso ebook per la didattica.

4.4.6 Geolocalizzazione La geolocalizzazione proposta dall’HTML5 potrebbe essere interessante per un utilizzo all’interno di guide turistiche dove a seconda della nostra localizzazione potremo vedere cosa c’è d’interessante intorno a noi oppure a seconda del codice ISBDN potremo vedere quale libreria ha il nostro libro cartaceo, adattando i propri contenuti in base alla geolocalizzazione dell’utente.

Si potrebbero fare altri esempi ma possiamo affermare che esplorare questa realtà è una scommessa vincente, basta vedere il successo di tripadvaisor come applicazione per iphone.

4.4.5 SVG Uno dei difetti attribuito alla versione 2.0 era quello di non essere adatto a pubblicazioni come manga o fumetti. La specifica Epub Content Documents 3.0 definisce la possibilità d’inserire all’interno della nostra documentazione immagini e oggetti dal formato SVG ovvero elementi vettoriali scalabili che hanno la capacità di adattarsi alle dimensione dello schermo senza perdere di qualità, non sgranando mai.

129

Le immagini e gli elementi SVG sono elementi basati sul linguaggio xml, questo significa che l’immagine prodotta tramite codice è codificata come se fosse testo.

La struttura e la scalabilità rendono la tecnologia SVG particolarmente utile per utenti ipovedenti, daltonici e ciechi soprattutto completandola con descrizioni e metadata.

La tecnologia SVG consente tre tipi di oggetti grafici: forme, immagini e testo. <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”> <ellipse cx=”240” cy=”50” rx=”220” ry=”30” style=”fill:green” /> <ellipse cx=”220” cy=”50” rx=”190” ry=”20” style=”fill:red” /> </svg>

91 E’ possibile creare Circoli, Ellissi, Linee, Poligoni e Testi 92 Effetti di ombra e sfocatura

Analizzando il codice possiamo vedere come la creazione di un ellisse sia codificata tramite il tag <ellipse>, gli attributi cx – cy gestiscono la circonferenza della forma, rx – ry il raggio, tramite questi 4 attributi possiamo trasformare e sformare l’ellisse.

Queste tipi di immagini hanno il pregio di memorizzare le informazioni strutturali sulle forme grafiche come parte integrante dell’immagine.

L’html5 permette di giostrarsi tra vari tipi di forme91 e filtri92 per poter personalizzare la nostra immagine anche se creare disegni complessi tramite codice xml-svg non è facilissimo.

La soluzione è creare la nostra immagine tramite un software di grafica vettoriale come Inkscape che permette di esportare direttamente il disegno creato in formato .svg inserendolo nella nostra pagina all’interno del tag <object>: <object data=”circle1.svg” type=”image/svg+xml”> </object>

130

4.4.5 Fixed Layout

Illustrazione 36 Esempio di Fixed Layout

L’ ePub è reflowable, ossia il testo si adatta perfettamente a qualsiasi tipo di schermo. In caso di stanchezza possiamo aumentare o diminuire la dimensione del carattere senza bisogno di scrollare la pagina, poiché essa ha la capacità di riadattarsi a qualsiasi modifica.

Esistono però delle pubblicazioni che perderebbero di qualità con il reflow, infatti il punto debole del vecchio formato degli ebook era quello di non essere un alternativa valida per le pubblicazioni dedicate ai fumetti e alle illustrazioni.

Questi tipi di pubblicazioni hanno bisogno di un layout fisso che non crei perdite dovute al riadattamento dinamico reflowable.

Il primo a muoversi con questa esigenza è stata Apple che ha creato l’estensione del formato ePub chiamato Fixed Layout ePub. Questa estensione permette di creare e leggere layout a dimensione fissa, molto bello sicuramente per le pubblicazioni illustrate a discapito però della pesantezza dell’ePub stesso.

Per ora questo tipo di pubblicazione può essere vista solo sui prodotti Apple.

Il 25 ottobre 2011 si è concluso il workshop del IPDF a Taipei dove si è lavorato per creare un estensione Fixed Layout libera da device proprietari.

131

4.5 Pubblicazioni digitali accessibili Creare un pubblicazione digitale accessibile non è cosa facile, esistono però molti metodi per migliorarne l’accessibilità: - utilizzare correttamente i tag semantici fornitici dall’html5 che definiscono le varie parti del corpo della pagina - utilizzo degli attributi epub:type per aggiungere significati e ruoli agli elementi della pubblicazione, epub:trigger che inserisce senza l’utilizzo di script un interfaccia di controllo degli oggetti multimediali, epub:switch ovvero l’attributo che ha il ruolo di retro-compatibilità.

- Non tutte le pubblicazioni avranno un andamento di lettura molto sequenziale è importante quindi l’utilizzo del tag <nav> che ci permette di creare un menu con importanti informazioni di navigazione, questo nuovo tag andrà a sostituire il vecchio file NCX (che dovrà essere incluso lo stesso per far sì che la nostra pubblicazione sia retrocompatibile) - Inserire sempre meccanisimi di fallbacks e immagini e testi sostitutivi a oggetti multimediali per rendere un pubblicazione visibile a vecchi e nuovi reader e a strumenti ausiliare - associare alla pubblicazione la sintesi vocale per il Text To Speech

93 Per ora in Italia non esiste una vera e propria legge sulle pubblicazioni digitali accessibili

132

L’accessibilità di una pubblicazione non va presa alla leggera per far sì che uno strumento così importante sia fruibile a tutti è necessario attuare questi piccoli accorgimenti veramente preziosi senza contare che in alcuni paesi l’accessibilità è un vero requisito di legge93.

4.5 ePub e il mercato

94 La Coreana Kyobo Book Center ha appena immesso sul mercato un ereader dotato di schermo Mirasol a colori, che supera i più moderni schemi e-ink basandosi sulla modulazione interferometrica ovvero il principio che rende coloratissime le ali delle farfalle, grazie alla modulazione dei livelli di luminosità e frequenza dei vari pixel nei colori primari che rende lo schermo leggibile in condizioni di pieno sole o di scarsa luminosità.

95 Il New Nook Color è stato definito ‘sistema di lettura ibrido’, metà tablet – metà ereader

Illustrazione 37 Kindel Format 8

Il nuovo formato ePub porterà un po’ di sconvolgimento all’interno del mercato editoriale: le case editrici dovranno rivedere il loro processo produttivo creando ebook retrocompatibili, aggiornando gli ebook già sul mercato e creando nuove ebook sfruttando le potenzialità offerte dal formato appena rilasciato.

Anche i produttori di reader avranno le loro grane perchè dovranno garantire aggiornamenti di software per i vecchi reader e dovranno creare sistemi di lettura con le capacità proposte dall’epub3 in quanto book reader in commercio non sono ancora pronti per il supporto video94.

Per ora le pubblicazioni con contenuti multimediali dovranno accontentarsi di girare su un tablet aspettando nuovi modelli... ibridi95 a quanto pare!

A confondere ancora le carte ci pensa Amazon che pochi giorni fa ha presentato il suo nuovissimo formato per ebook: Kindel Format 8 che sostituirà il vecchio formato Mobi 7.

KF8 basato completamente sugli standard HTML5 e CSS3 ed è dotato di nuove funzionalità come layout fisso, font incorporati, supporto immagini svg e molte altre che aiuteranno a creare ebook strutturalmente complessi adatti sia per riviste e quotidiani che per pubblicazioni scolastiche e fumetti con grafica avanzata (utilissimo dopo l’acquisto dei diritti sulle graphic novel di Batman e Superman).

Anche la struttura sarà modificata in quanto il vecchio Mobi7 era composto da un singolo file in html4 contenente tutte le informazioni, dai metatag al testo fino alle immagini. Il nuovo formato invece si rifarà alla struttura dell’ePub ovvero un insieme di file inglobati in un unico contenitore.

Amazon ha dichiarato di non voler sfruttare per ora i tag <audio> e <video> ma di voler puntare su una formattazione elevata ed immagini a colori ad alta risoluzione sul mercato dei manga e dei fumetti digitali.

Siamo quindi di nuovo a una spaccatura nel mondo dei formati sempre più lontani da uno standard unico e il mercato dei reader che si spaccando tra reader per la sola lettura e reader ibridi.

133

Queste scelte imprenditoriali renderanno il mercato degli ebook sempre più innovativo mettendo in difficoltà l’utente finale che dovrà scegliere un reader non solo per le sue capacità tecnologiche ma anche per i contenuti che troverà disponibili nella varie piattaforme di vendita online.

Ora che le tecnologie ci sono dovranno essere le case editrici a dover investire nel nuovo mercato dotandosi degli strumenti per la creazione di prodotti nuovi e innovativi.....

134

Progetto sito internet 96 Esistono programmi on line e off line specializzati per la creazione di wireframe come: OmniGraffle [http:// www.omnigroup.com/products/ OmniGraffle/] o Gimp [http://www. gimp.org/] 97 Esistono programmi on line e off line specializzati per la creazione di wireframe come: OmniGraffle [http:// www.omnigroup.com/products/ OmniGraffle/] o Gimp [http://www. gimp.org/]

5.1 Il progetto L’idea di questo progetto nasce dalla voglia di creare un sito che introduca in maniera semplice ma efficace le novità apportate dal nuovo formato epub3.

Lo scopo di questo progetto è quello di evidenziare i punti salienti del nuovo formato per libri digitali, il sito sarà diviso su più pagine, ognuna di essere tratterà un aspetto del nuovo formato.

5.2 Organizzazione del lavoro Per organizzare il lavoro sono partita dalla realizzazione del wireframe96 grafico su un pezzo di carta e in seguito su uno specifico tool online chiamato Mockflow97.

Lo scopo di questa bozza è quello di definire la struttura del sito visivamente e la logica dei vari elementi che lo compongono.

Di solito viene creato in bianco e nero e riesce a dare un panoramica di ciò che sarà il sito.

In seguito al wireframe, il lavoro passa al software grafico creando la stesura definitiva del sito che inseguito andrò a ‘tagliare’ per creare il sito in html costruito su più pagine.

La prima cosa da fare al momento del taglio del sito sarà quella di delineare la struttura della pagina, in questo caso andremo ad utilizzare i nuovissimi tag dell’html5: - <article> che farà da contenitore a tutta la pagina - <header> ovvero l’intestazione contenente il logo - <nav> per il menu di navigazione Ho impostato la larghezza della pagina a una dimensione pari a 960px in modo che sia visibile anche per gli utenti collegati con i tablet, mentre non ho progettato il sito per una visione ottimale da dispositivi mobili come smartphone.

Per quanto riguarda i font usati, ho usato Google Api Fonts che senza scaricare fonts su fonts mi da la possibilità di collegare tutti i caratteri che voglio con il semplice link al suo foglio di stile in remoto. Questa stringa viene inserita all’interno del tag <head> in ogni pagina del sito. <link href=’http://fonts.googleapis. com/css?family=Varela’ rel=’stylesheet’ type=’text/css’>

135

5.2.1 Home Page

Illustrazione 38 Home page

L’header è costituito da un logo sulla sinistra e un menu sulla destra, un div centrale contenente il tag <hgroup> e una paragrafo in cui ho potuto sperimentare la proprietà columncount del css3 per dividere il testo su più colonne. <header> e il menu di navigazione <nav> <header> <div class=”logo”> <a href=”index.html”> <img src=”img/logo-2.jpg”” alt=”ePub3 il nuovissimo formato per creazione di ebook multimediali”> </a> </div> <nav class=”menu”> <ul> <li class=”active”> <a href=”index.html” class=”active”>Home</a> </li> <li> <a href=”epub3.html”>Specifiche</a> </li> <li> <a href=”composizione.html”>Composizione</a> </li> <li><a href=”demo.html”>Demo</a></li> </ul> </nav> </header>

136

Ho applicato al tag <nav> la classe .menu <nav> è costituito da un semplice menu orizzontale con un effetto rollover sul colore e la sottolineatura del testo. .menu { float: right; text-align: right; } .menu

}

ul li { float: left; list-style-type:none; margin-top: 0; margin-right: 0px; margin-bottom: 0; margin-left: 0;

.menu

}

ul li a { color: #fff; font: normal 400 20px/70px ‘Kameron’, serif; text-decoration: none; margin-left:20px;

.menu ul li a:hover {

color:#7DB19E;

text-decoration: underline; } .menu ul li a.active { color:#009966; text-decoration: underline; }

L’immagine centrale gioca con lo sfondo e con l’immagine de dispositivo che visualizza la copertina del mio ebook: <div class=”wrap”> <div class=”base”> <hgroup> <h1 class=”titolone”> Epub3 è il nuovo formato standard per i tuoi ebook </h1> <h2 class=”titolone2”>Multimedialità e interattività sono le parole d’ordine per i libri digitali del futuro!</h2> </hgroup> </div> </div>

137

Ho utilizzato il nuov tag dell’html5 <hgroup> per riunire i due tag centrali <h1> e <h2>.

Di seguito ho inserito un paragrafo con la proprietà del css3 “column-count” per dividere il testo in colonne, nel codice html: <div class=”epub3”> <h2 class=”riga”>Una rivoluzione fantastica!</h2> <p class=”column”> E-book è il diminutivo inglese utilizzato al posto di elettronic book ed è attraverso... </p> </div>

Dal styleshett.css: .epub3{ width:960px; margin:auto; margin-top:30px; }

.riga{ border-bottom:#666666 thin ridge; }

.column{ -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ column-count:2;

}

-moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px;

Come si può vedere dal codice ho creato una classe per il tag <h2> che definisca una linea di fondo al titolo.

Le due colonne (column-count:2)sono state impostate con uno spazio divisorio di 40px (column-gap), nel css ho inserito anche le estensione richieste dai browser per il supporto dei css3.

138

5.2.2 Specifiche

Illustrazione 38 Pagina specifiche. html

Questa pagina è completamente dedicata alla spiegazione delle specifiche e delle novità introdotte dall’ePub3.

Il primo div introduce le novità insieme al tag <h1>, di seguito ho impostato 4 div per la spiegazione delle nuove specifiche.

Il tag <h2> “Le caratteristiche spettacolare dell’ePub3” introduce alcune delle più importanti novità: multimedia, scripting, MathML, Texto Speech.

Queste sezioni sono divise in maniera molto particolare, ogni novità ha un cerchio personalizzato posto alternativamente a destra e a sinistra: <div class=”carsix”> <div class=”box300”> <img src=”img/multimedia.jpg” alt=”Multimedia”> <h3>Multimedia</h3> </div> <p class=”p660”>L’attuale v....</p> </div> <div style=”clear:both”></div> <div class=”carsix”> <p class=”p660r”>L’utilizzo...</p> <div class=”box300r”> <img src=”img/scripting.jpg” alt=”Scripting”> <h3>Scripting</h3> </div> </div> </div>

139

Illustrazione 39 Particolare pagina specifiche.html

Nel stylesheet.css ho indicato il differenziato il div a sinistra da quello a destra: .carsix{ /*box centrale contenitore*/

width:960px;

height:170px;

margin-bottom:0px;

}

.box300{/*box immagine a sinistra*/

width:200px;

height:170px;

float:left;

margin-right:10px;

text-align: center;

padding-top: 20px;

}

.p660{ /*classe impostata al paragrafo che va a destra*/

width:750px;

height:180px;

float:right;

padding-top: 20px;

}

.box300r{ /*box immagine a destra*/

width:200px;

height:170px;

float:right;

margin-left:10px;

text-align: center;

}

.p660r{ /*classe impostata al paragrafo che va a sinistra*/

width:750px;

height:auto;

float:left;

padding-top: 20px;

}

140

5.2.3 Struttura

Illustrazione 40 Pagina struttura. html

La terza componente del mio sito è la pagina struttura.html.

Questa pagina ha lo scopo di descrivere quali file compongono una pubblicazione ePub3, i file descritti sono i seguenti mimetype, container.xml, content.opf, nav.xhtml e il deprecato toc.ncx .

L’animazione centrale non ha l’opzione di navigazione ma è solo come elemento estetico. Questi cerchi sono sovrapposti uno sull’altro con un margin-left: -48px, ogni cerchio ha impostata l’animazione di rollover, in quel momento il cerchio oltre ad ingrandirsi cambia colore e si sovrappone agli altri cerchi.

Per creare l’animazione vengono usate le proprietà di style del css3: .ca-menu li:hover{ border-color: #333; z-index: 999; transform: scale(1.1); } .ca-menu li:hover .ca-icon{ color: #000; font-size: 60px; text-shadow: 0px 0px 1px #000; animation: moveFromBottom 300ms ease; } .ca-menu li:hover .ca-main{ color: #000; animation: moveFromBottom 500ms ease; }

Nel momento del hover, il cerchio viene scalato ed ingrandito e cambiato di colore. La proprietà animation regola il tempo di azione dell’animazione e definisce la modalità della curva di animazione tramite l’elemento ease, questa animazione sarà prima lenta, poi a metà veloce e per finire di nuovo lenta.

141

5.2.4 Demo

Illustrazione 41 Pagina demo.html

Questa pagina è dedicata alla dimostrazione del lavoro fatto, tramite un video caricato grazie al tag dell’html5 <video>: <video width=”420” height=”315” controls=”controls”> <source src=”video/1.mp4” type=”video/mp4” /> <source src=”video/1.ogg” type=”video/ogg” /> Il suo browser non supporto i video! </video>

Il tag <source> definisce in caso di mancato supporto da parte dei browser i fallback a cascata. Accanto al video ho inserito un immagine, con la funzione di bottone, per il download dell’eBook.

142

5.3 Considerazioni crossbrowser Una delle caratteristiche fondamentali che ogni sito web dovrebbe avere è quella di poter dare ad ogni utente la possibilità di utilizzo nella stessa identica maniera, di poter usufruire della stessa identica grafica su qualsiasi sistema operativo e su qualsiasi browser.. Il problema si fa ancora più arduo quando si utilizzano tecnologie non ancora standard, come l’html5 e il css3, e i browser interpretano questi nuovi tag in maniera differente uno dall’altro.

L’utilizzo delle proprietà del CSS3 obbliga all’uso delle specifiche estensioni abbinate alle proprietà originali definite dalla specifica: transition-property:height;/*modalità trransizione */ -moz-transition-property:height; -o-transition-property:height; -ms-transition-property:height; -webkit-transition-property:height;

La sigla -webkit- è l’estensione di safari, -moz- di firefox, -odi Opera e -ms- di Internet Explorer.

Queste estensioni non sono valide dal punto di vista del W3C ma sono necessarie per chi vuole iniziare a sperimentare con il nuovo markup.

Per testare il proprio sito a livello di cross-browsing possiamo utilizzare i vari tool offerti dalla rete che ci permettono di provare il sito su diversi browser di nuova e vecchia generazione.

Ho testato il sito epub3.it su Adobe Browser Lab, posso ritenermi soddisfatta, il sito non ha riscontrato gravi problemi sul test di cross-browser.C’è soltanto qualche problema grafico con Internet Explorer 6 e 7, problemi che non pregiudicano la navigazione ma l’usabilità si.

143

Illustrazione 42 Test con i browser Internet Explorer 7 e 6 della pagina home.html

Illustrazione 43 Test con i browser Internet Explorer 7 e 6 della pagina struttura.html

Illustrazione 44 Test con i browser Firefox 5 della pagina struttura.html

Illustrazione 45 Test con i browser Chrome 13.0 e Safari 5.1 della pagina struttura.html

144

5.4 Test Finali Esistono diversi aspetti che vanno valutati e testati al momento della creazione di un sito web e della sua messa online. L’aspetto grafico è certamente importante ma anche l’accessibilità e l’usabilità sono due problematiche che vanno sicuramente affrontate, senza cascare nell’errore dell’autocompiacimento di quanto da noi sviluppato e neanche nel conforto di alcuni eventuali benevoli giudizi di strumenti di analisi semiautomatici: l’unico giudizio finale che conta è quello dell’utenza finale con la quale dobbiamo necessariamente avere il coraggio di mantenere un canale aperto di comunicazione per raccogliere commenti quantunque negativi al lavoro svolto.

Oltre all’user-experience possiamo eseguire dei test in postproduzione per verificare l’utilizzazione delle “buone tecniche” stabilite dalle raccomandazioni del W3C per siti usabili, di buona comprensione ma soprattuto accessibili: 1. Validare il codice HTML per verificare che ogni pagina sia conforme alle specifiche imposte dal W3C, presso il loro sito è possibile verificare se sono stati fatti errori a livello di markup html e di css

Illustrazione 46 Risultato Validatore codice HTML [http://validator. w3.org/]

Illustrazione 47 Risultato Validatore codice CSS [http://jigsaw.w3.org/ css-validator/]

145

Gli errori evidenziati dal validatore css sulle mie pagine sono dovuti alle estensioni per implementare le proprietà css3 nei vari browser..

2. Validare l’accessibilità tramite l’uso di validatori come “The Wave” che verificheranno l’uso di alt, accessKey e il corretto utilizzo degli elementi di titolo <h1>, <h2>, <h3> all’interno di un testo, questi devono essere inseriti rispettando l’ordine di discendenza (es. prima un <h2> e poi un <h3> e non viceversa). C’è qualche problema anche nella renderizzazione dei web-font di google API.

Illustrazione 48 Risultato Test accessibilità con tool “The Wave” [http://wave.webaim.org/] della pagina index.html

Illustrazione 49 Risultato Test accessibilità con tool “The Wave” della pagina specifiche.html, in questo caso ho disabilitato il CSS

Dalla verifica in questo tool non sembra che ci siano particolari problemi di accessibilià , anche disabilitando lo style possiamo vedere come risulta composta la pagina.

L’unica cosa che potrebbe causare problemi è l’utilizzo del Symbol Web Font, un font che crea simboli anziché lettere, a schermo vengono visualizzati gli elementi simbolo mentre disabilitando lo style questi prendono la forma delle lettere come se fossero degli errori di battitura (Illustrazione n.49).

146

3. Sono stati previsti comandi di navigazione da tastiera come gli accessKey e ho controllato che il sito sia fruibile con il solo tasto di navigazione tabs.

4.Testare il sito per non vedenti tramite il tool “WebAnyWhere”.

Grazie a questo tool ho potuto verificare la navigazione del sito con l’uso di un screen-reader, a verifica ultimata su tutte le pagine mi posso considerare soddisfatta anche se permane il problema del Symbol Web Font che vengono lette giustamente come lettere mentre a schermo sono simboli grafici.

5. Testare il sito per utenti con problemi di ipovisione come diminuzione della vista o daltonisimo. Per questa categoria di utenti non ho previsto comandi per l’ingrandimento del tipo di font ma ho solo verificato il giusto contrasto tra le scritte e lo sfondo tramite il tool VisCheck

Illustrazione 50 Risultato del test per le disabilità visive con il tool VisCheck

5.4 Conclusioni

Questo progetto è stato per me un po’ un banco di prova, pensavo che l’html fosse un po’ come una lingua che quando s’impara non si dimentica più, ma mi sbagliavo, senza un esercizio abituale mi sono ritrovata a litigare con margini e posizioni per non parlare del controllo cross-browser.

C’e’ sicuramente bisogno di molto studio e pratica per maneggiare adeguatamente il markup e predisporre layout esteticamente accattivanti e funzionali al fine di realizzare un sito che si possa considerare professionale.

147

148

Obiettivo eBook Illustrazione 51 Contenuto della cartella del mio ePub

6.1 Scopo del progetto Questo progetto consiste nella creazione di un ebook in formato ePub3 con elementi di multimedialità. Gli obiettivi che mi sono posta sono quelli d’imparare come si crea un ePub utilizzando strumenti OpenSouce e di dimostrare le potenzialità di una pubblicazione digitale.

6.2 Impostare il lavoro Per prima cosa ho creato lo scheletro del mio epub, impostando i file fissi: - la cartella META-INF/ - il file mime-type - la cartella OEBPS/ Una delle cose che ho capito creando un eBook dal codice è che bisogna stare veramente molto attenti perchè basta una piccola dimenticanza può non far funzionare più nulla.

Non essendo in possesso di un book reader (con supporto ePub) ho potuto testare il mio eBook grazie a due strumenti: Calibre e l’estensione di firefox “EPUBReader”

File Mimetype

Il file mimetype è essenziale per una pubblicazione in formato .epub in quanto specifica al software di reading che è un formato .zip con estensione .epub.

Questo file deve essere al primo livello della cartella della mia pubblicazione e deve contenere questa stringa: application / epub + zip

Meta-inf/container.xml

A livello principale dovrà esserci una directory chiamata meta-inf/, questa cartella contiene uno dei file essenziali per la pubblicazione: il file container.xml Questo file ha lo scopo di indicare la posizione del file content. opf, il file più importante del nostro epub.

149

<?xml version=”1.0”?> <container version=”1.0” xmlns=”urn:oasis:names:tc:ope ndocument:xmlns:container”> <rootfiles> <rootfile full-path=”OEBPS/content.opf” media-type=”application/oebps-package+xml”/> </rootfiles> </container>

File OEBPS/content.opf

Illustrazione 52 Contenuto della cartella OEBPS del mio ePub

Ho creato successivamente la directory OEBPS/, la cartella che contiene il file per la nostra pubblicazione e il file content.opf, ogni contenuto della pubblicazione deve essere elencato in

questo file.

Questo file ha estensione ..opf per poterci lavorare è necessario cambiare l’estensione in .xhtml, l’importante è ricordarsi di ricambiare l’estensione alla fine del lavoro.

Ho creato il documento .opf impostando la sua struttura composta da metadata, manifest e spine.

I <metadata> forniscono le informazioni sulla nostra pubblicazione, il manifest ha il compito di elencare tutti i file della nostra pubblicazione, e lo spine, letteralmente spina dorsale della nostra pubblicazione, serve per definire come verranno definiti i nostri file in maniera sequenziale.

Scheletro file content.opf: <?xml version=”1.0”?> <package version=”3.0” xml:lang=”it” xmlns=”http://www.idpf.org/2007/opf” unique-identifier=”pub-id”> <metadata xmlns:dc=”http://purl.org/dc/ elements/1.1/”>.......... </metadata> <manifest>.......... </manifest> <spine toc=”ncx”> .......... </spine> </package>

150

File TOC.ncx

Questo file è stato deprecato nella nuova versione 3.0, l’inserimento però viene considerato di buona norma per preservare una retro-compatibilità con reader di vecchia generazione. In questo documento andranno inseriti i file che vogliamo far comparire in una sorta di indice di navigazione.

A seconda del tipo di reader possiamo visualizzare questo indice sul lato sinistra o cliccando su un apposito menu. <?xml version=”1.0” encoding=”UTF-8”?> <ncx xmlns=”http://www.daisy.org/z3986/2005/ncx/” version=”2005-1” xml:lang=”en-US”> <head> <meta name=”dtb:uid” content=”p9780316000000”/> <meta name=”dtb:depth” content=”1”/> <meta name=”dtb:totalPageCount” content=”0”/> <meta name=”dtb:maxPageNumber” content=”0”/> </head> <docTitle> <text>Epub3, il nuovo modo di fare ebook</text> </docTitle> <docAuthor> <text>Annalisa Guerisoli</text> </docAuthor> <navMap> <navPoint id=”cover” playOrder=”1”> <navLabel> <text>Cover</text> </navLabel> <content src=”cover.xhtml”/> </navPoint> </navMap> </ncx>

Questo file è costituito da tre principali tag: - <navMap>,indica la mappa di navigazione - <navPoint>,come una lista questo tag indica un punto del menu - <navLabel>,Etichetta associata ad ogni <navPoint>

151

All’interno del <navPoint> sono essenziali due elementi: id e playOrder, il primo indica il nome identificativo del file che deve essere uguale a quello indicato nel file content.opf, il secondo indica l’ordine sequenziale di lettura.

Naturalmente questo documento, essendo parte della pubblicazione dovrà essere indicato nel <manifest> del file content.opf: <item id=”ncx” <!--elemento identificativo--> href=”toc.ncx” <!--collegamento--> media-type=”application/x-dtbncx+xml”/> <!--tipo di media-->

Anche per questo file è necessario cambiare l’estenzione in .txt o . html e ricambiarla al momento della conclusione del lavoro.

File nav.xhtml

Ogni pubblicazione ePub3 deve contenere il documento di navigazione nav.xhtml che utilizza il nuovo tag html5 <nav>, questo file sostituisce il documento .ncx deprecato nella nuova versione 3.0.

Lo scopo di questo file è lo stesso del file .ncx, definire un documento di navigazione umana e leggibile dal reader: <?xml version=”1.0” encoding=”UTF-8”?> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops”> <head> <title>Epub3, il nuovo modo di fare ebook</title> <meta charset=”utf-8”/> </head> <body> <section> <header> <h1>Indice</h1> </header> <nav xmlns:epub=”http://www.idpf.org/2007/ops” epub:type=”toc” id=”toc”> <ol> <li id=”toc-titlepage”> <a href=”chap_000.xhtml”>Video per contenuti multimediali</a> </li> </ol> </nav> </section> </body> </html>

152

All’interno del tag <nav> indichiamo: l’attributo epub:type=”toc” (tabella di contenuti) come definito dal Vocabolario semantico strutturale dell’ePub3 l’id che deve essere uguale a quello contenuto nel documento .opf All’interno della lista ordinata <ol> andremo ad elencare i nostri file in ordine sequenziale, ogni <li> conterrà il collegamento al file e il testo di link indicativo del file.

Il file nav.xhtml andrà indicato nel manifest del content.opf: <manifest> <item id=”nav” properties=”nav” href=”nav.xhtml” media-type=”application/xhtml+xml”/> </manifest>

153

6.3 Inserire i contenuti Creati i file essenziali possiamo incominciare a creare i contenuti e a vedere come questi devo essere inseriti all’interno del documento .opf e dei due file toc.ncx e nav. xhtml.

6.3.1 Creare la cover Per creare la copertina della nostra pubblicazione possiamo usare il testo o un immagine, io ho utilizzato un immagine di dimensioni 768x1024 e ho creato un documento chiamato cover.xhtml Il file della cover è un documento .xhtml con l’immagine all’interno del body: <?xml version=”1.0” encoding=”UTF-8”?><html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops”> <head> <title>Epub3, il nuovo modo di fare ebook</title> <meta charset=”utf-8”/> <link rel=”stylesheet” href=”css/style.css” type=”text/css”/> </head> <body> <div> <img src=”img/cover.jpg” alt=”Epub3, il nuovo modo di fare ebook” /> </div> </body> </html>

Sia l’immagine che il file cover.xhtml andranno indicati nel documento .opf: <manifest> <item id=”cover” href=”cover.xhtml” media-type=”application/xhtml+xml”/> <item id=”coverimg” href=”img/cover.jpg” properties=”cover-image” media-type=”image/jpeg”/> </manifest> <spine toc=”ncx”>

<itemref idref=”cover”/> </spine>

154

All’interno del <manifest> andremo ad indicare nel <item> il file cover.xhtml e l’immagine cover. jpg, a quest’ultima ho assegnato la proprietà “cover-image” per specificare meglio il tipo di risorsa.

Mentre nello spine collegheremo solo la pagina .xhtml attravero l’attributo idref=”cover”che riprende l’id assegnato nel <manifest>.

Illustrazione 53 Copertina del mio ePub vista dal software Calbre

La pagine di copertina andrà segnata anche nei documenti toc.ncx e nav.xhtm.

Nel toc.ncx: <navPoint id=”cover” playOrder=”1”> <navLabel> <text>Cover</text> </navLabel> <content src=”cover.xhtml”/> </navPoint>

All’interno del navPoint riprenderemo l’id assegnato nel manifest e indicheremo tramite il playOrder l’ordinamento di visualizzazione, in questo caso il numero “1” visto che è la copertina, nel <text> indicheremo l’etichetta di testo che l’utente visualizzerà nell’indice e attraverso il tag <content> ci sarà il collegamento alla risorsa.

Nel nav.html il collegamento è più semplice perchè basterà inserire il link nella lista: <nav xmlns:epub=”http://www.idpf.org/2007/ops” epub:type=”toc” id=”toc”> <li id=”toc-titlepage”> <a href=”cover.xhtml”>Cover</a> </li> </nav>

155

6.3.2 Stile .css Lo stile si crea mano a mano che la pubblicazione prende forma, con l’inserimento di nuovi font e di nuove classi per personalizzare le varie pagine. Il file .css sarà all’interno della cartella OEBPS/, la sua posizione dovrà essere indicata nel <manifest>: <manifest> <item id=”style” href=”css/style.css” media-type=”text/css”/> </manifest>

98 Per identificare i tipi di supporto fare riferimento a questa tabella “EPUB Core Tipi di media” [ h t t p : / / i d p f . o rg / e p u b / 3 0 / s p e c / epub30-publications.html#secpublication-resources] 99 Epub3 supporta solo due tipi di caratteri WOFF e OTF 100 FontSquirell è un ottimo sito ricco di font

All’interno del item indicheremo il nome identificativo della risorsa tramite id, il collegamento href e il tipo di mediatype98 per indicare il tipo di file.

Implementare i web font

Con la nuova specifica è possibile inserire dei nuovi font99 che si possono trovare facilmente in rete liberi da diritto d’autore100. Quando inseriamo un font all’interno della nostra pubblicazione dobbiamo indicarlo sia nel documento css che nel documento opf.

Nello style indicheremo i font attraverso il costrutto @fontface{..}: @font-face { font-family: Otama-ep; font-weight: normal; font-style: normal; src:url(../fonts/Otama-ep.otf); }

Dove indicheremo il nome del font (font-family), il tipo di spessore del carattere (font-weight), lo stile (font-style) e la posizione all’interno della nostra cartella /fonts.

I font implementati andranno indicati anche all’interno del file .opf nel <manifest> attraverso queste stringhe di codice: <manifest> <item id=”font.Otama-ep.regular” href=”fonts/Otama-ep.otf” media-type=”application/vnd.ms-opentype”/> ….. </manifest>

Nell’item andremo ad indicare nell’id che si tratta di un font chiamato “Otama-ep” ed è di tipo regolare, il collegamento alla risorsa e andrà specificato il media-type.

156

6.3.3 Video Integrato Questa pagina della mia pubblicazione ha come particolarità di aver inserito nel testo un video, incorporato utilizzando il tag html5 <video>. <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops” xmlns:ev=”http://www.w3.org/2001/xml-events”> <head> <link rel=”stylesheet” href=”css/style.css” type=”text/css”/> <title>Il libro del futuro</title></head> <body> <div class=”videolibro2”> <h1 class=”otama-nero”>Il libro rivoluzionario</h1> <video width=”400” height=”233” controls=”true” preload=”preload”> <source type=”video/ogg” src=”video/libro.ogv”/> <source type=”video/mp4” src=”video/libro.mp4”/> <img src=”img/libro.jpg” alt=”Il libro non passerà mai di moda”/> </video> <p>La nuova specifica ePub3....</p> <p>All’interno del tag....</p> </div> </body> </html>

All’interno del tag <video> ho inserito i meccanismi di fallbacks a cascata tramite il tag <source>.

Illustrazione 54 Visualizzazione del eBook con Firefox eReader che supporta gli oggetti multimediali e Calibre in cui si può vedere il meccanismo di falbacks in azione

157

Gli elementi utilizzati all’interno di questo file vengono indicati nel manifest: <manifest> <item id=”chap_000” href=”chap_000.xhtml” media-type=”application/xhtml+xml”/> <item id=”video-mp4” href=”libro.mp4” media-type=”video/mpeg4”/> <item id=”video-ogv” href=”libro.ogv” media-type=”video/ogg”/> <item id=”libro-img” href=”img/libro.jpg” media-type=”image/jpg”/> </manifest> <spine> <itemref idref=”chap_000” linear=”yes”/> </spine>

Nel file nav.xhtml di andrà ad indicare il solo collegamento al file dell’articolo: <li id=”toc-titlepage”> <a href=”chap_000.xhtml”>Video per contenuti multimediali</a> </li>

Nel toc.ncx: <navPoint id=”chap_000” playOrder=”2”> <navLabel> <text>Video per contenuti multimediali</text> </navLabel> <content src=”chap_000.xhtml”/> </navPoint>

158

6.3.4 Audio La seconda pagina presenta una un player audio, inserito grazie al tag html5 <audio>: <?xml version=”1.0” encoding=”UTF-8”?><html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops”> <head> <title>Audio per contenuti multimediali</title> <link rel=”stylesheet” href=”css/style.css” type=”text/css”/> <meta charset=”utf-8”/> </head> <body> <div class=”videolibro2”> <h1 class=”otama”>Audio incorporato</h1> <div> <img src=”img/note.jpg” alt=”audio incorporato alla pagina” /> <audio controls=”controls” > <source src=”audio/audio1.ogg” type=”audio/ogg” /> <source src=”audio/audio1.mp3” type=”audio/mp3” /> <p>Non è possibile ascoltare il brano musicale</p> </audio> </div> <p>Fino ad ora.....</p> </div> </body> </html>

Grazie all’uso di questo tag ho potuto inserire il collegamento al file mp3 e inserire il fallback a cascata su una scritta d’avvertimento.

Illustrazione 55 Visualizzazione del la pagina “Audio Incorporato” con Firefox eReader che supporta gli oggetti multimediali e Calibre in cui si può vedere il meccanismo di falbacks in azione

159

Grazie all’uso di questo tag ho potuto inserire il collegamento al file mp3 e inserire il fallback a cascata su una scritta d’avvertimento.

Il file presenti in questa pagina dovranno essere indicati nel manifest del documento .opf: <manifest> <item id=”chap_001” href=”chap_001.xhtml” media-type=”application/xhtml+xml”/> <item id=”note.jpg” href=”img/note.jpg” media-type=”image/jpeg”/> <item id=”audio1” href=”audio/audio1.mp3” media-type=”audio/mp3”/> <item id=”audio2” href=”audio/audio1.ogg” media-type=”audio/ogg”/> </manifest> <spine> <itemref idref=”chap_001” linear=”yes”/> </spine>

Il collegamento alla pagina sarà presente nel documento di navigazione nav.xhtml: <li id=”toc-titlepage”> <a href=”chap_001.xhtml”>Audio per contenuti multimediali</a> </li>

Nel toc.ncx: <navPoint id=”chap_001” playOrder=”3”> <navLabel> <text>Audio per contenuti multimediali</text> </navLabel> <content src=”chap_001.xhtml”/> </navPoint>

160

6.3.5 Grafici interattivi La terza pagina del mio ebook è costituita da un grafico interattivo costruito grazie alla libreria javascript JSXGraph.

Una libreria creata ad hoc per la creazione di grafici ed elementi matematici distribuita in Creative Commons.

Il mio grafico è un piano cartesiano con la possibilità di spostare la retta e i due punti che la compongono. <head> <title>Grafici interattivi</title> <meta http-equiv=”content-type” content=”text/html; charset=utf-8”/> <link rel=”stylesheet” href=”css/style.css” type=”text/css”/> <link rel=”stylesheet” href=”css/jsxgraph.css” type=”text/css”/> <script type=”text/javascript” src=”javascript/ jsxgraphcore.js”></script> <script type=”text/javascript”> JXG.Options.text.display = ‘internal’; var Mathe = { isRunning: false, initMath: function() { Mathe.isRunning = true; // Two global objects brd = JXG.JSXGraph.initBoard(‘jxgbox1’, {boundingbox:[-5,5,5,-5], keepaspectratio:false, axis:true, showNavigation:false}); p = []; p.push(brd.create(‘point’, [-1,2], {face:’o’, size:10, withLabel:false})); p.push(brd.create(‘point’, [3,-3], {face:’o’, size:10, withLabel:false})); brd.create(‘line’, p); } }; </script> </head> <body> <div class=”videolibro2”> <h1 class=”otama”>Grafici interattivi</h1> <div id=”jxgbox1” class=”jxgbox” style=”width:300px; height:300px; marginbottom:20px; margin:auto;”></div> <p >Quante volte a scuola......</p> <script type=”text/javascript” > mathematik = Mathe.initMath(); </script> </div> </body>

161

Illustrazione 56 Visualizzazione della pagina “Grafici Interattivi” tramite il tool Firefox eReader e il software Calibre

All’interno del <head> troviamo la dichiarazione del codice javascript. Mentre all’interno della pagina c’è il vero grafico all’interno del div ”jxgbox1”.

Il file .xhtml e i file di javascript verranno dichiarati all’interno del file .opf specificando bene la proprietà del documento: <manifest> <item id=”chap_002” href=”chap_002.xhtml” media-type=”application/xhtml+xml” properties=”scripted mathml”/> <item id=”style” href=”css/stylesheet.css” media-type=”text/css”/> <item id=”jsxgraph.css” href=”css/jsxgraph.css” media-type=”text/css”/> <item id=”jsxgraphcore.js” href=”javascript/jsxgraphcore.js” media-type=”text/javascript”/> </manifest> <spine> <itemref idref=”chap_002” linear=”yes”/> </spine>

162

Il collegamento alla pagina sarà presente nel documento di navigazione nav.xhtml: <li id=”toc-titlepage”> <a href=”chap_002.xhtml”>Grafici interattivi</a> </li>

Nel toc.ncx: <navPoint id=”chap_002” playOrder=”4”> <navLabel> <text>Grafici interattivi</text> </navLabel> <content src=”chap_002.xhtml”/> </navPoint>

6.3.6 Formule matematiche Questa pagina è costituita da una formula matematica utilizzando la libreria di scripting MathML.

Illustrazione 57 Visualizzazione della pagina “Formule Matematiche” tramite il tool Firefox eReader e il software Calibre

Purtroppo la mia conoscenza di questa libreria non è molro approfondita ed è per questo che non sono riuscita a creare un meccanismo di fallbacks.

L’utilizzo di mathML consentirà di rendere accessibili le formule matematiche poichè le formule sono codificate tramite un linguaggio di marcatura estensibile.

Nella pagina seguente la formula inclusa nella pagina.

163

164

<math display=”block” xmlns=”http://www.w3.org/1998/ Math/MathML” altimg=”formula matematica con radice quadrata e frazione”> <mrow> <mi>p</mi> <mo stretchy=”false”>(</mo> <mi>x</mi> <mo stretchy=”false”>)</mo> <mo>=</mo> <munderover> <mo>&#8721;</mo> <mrow> <mi>i</mi> <mo>=</mo> <mn>0</mn> </mrow> <mi>n</mi> </munderover> <msub> <mi>y</mi> <mi>i</mi> </msub> <mo>&#8901;</mo> <munderover> <mo>&#8719;</mo> <mrow> <mi>j</mi> <mo>=</mo> <mn>0</mn> <mo>,</mo> <mi>i</mi> <mo>&#8800;</mo> <mi>j</mi> </mrow> <mi>n</mi> </munderover> <mfrac> <mrow> <mi>x</mi> <mo>-</mo> <msub> <mi>x</mi> <mi>j</mi> </msub> </mrow> <mrow> <msub> <mi>x</mi> <mi>i</mi> </msub> <mo>-</mo> <msub> <mi>x</mi> <mi>j</mi> </msub> </mrow> </mfrac> <mo>.</mo> </mrow> </math>

Anche questa pagina andrà elencat anel file .opf con l’indicazione del tipo di proprietà, che sarà in questo caso “mathml”: <manifest> <item id=”chap_003” href=”chap_003.xhtml” media-type=”application/xhtml+xml” properties=”mathml”/> </manifest> <spine> <itemref idref=”chap_003” linear=”yes”/> </spine>

e nel file nav.xhtml <li id=”toc-titlepage”> <a href=”chap_003.xhtml”>Formule matematiche</a> </li>

e nel toc.ncx <navPoint id=”chap_003” playOrder=”5”> <navLabel> <text>Formule matematiche</text> </navLabel> <content src=”chap_003.xhtml”/> </navPoint>

165

6.3.6 Fumetti in formato SVG 101 Vedere capitolo 3

Questa pagina ha la particolarità di avere un immagine che è stat creata tramite Svg101, ovvero il linguaggio per la descrizione di immagini vettoriali basato sul XML. Questa immagine è molto complessa, in quanto si tratta di un fumetto ma è stata molto semplice da fare usando un software per la grafica vettoriale Per creare l’immagine si usano determinati marcatori specifici per questo linguaggio, un pezzetto dell’immagine nella pagina: <svg version=”1.1” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” width=”400px” height=”340px” viewBox=”0 0 400 340” enable-background=”new 0 0 400 340” xml:space=”preserve”> <g id=”_x32_Linus-biblioteca_x5F_bordo_xA0_ Immagine_1_”> <g> <g> <path fill-rule=”evenodd” clip-rule=”evenodd” fill=”#FFFFFF” d=”M197,0c2,0,4,0,6,0c-1.024,52.4740.421,121.756-2,165 c68.285,1.731,126.135,1.998,196,2 c2.188-11.145,0.612-26.055,3-37 c0,56.05,0,126.433,0, 189c0,4.08,0.469,9.08,0,13c-0.872,7.287,1.287,9.0358,8c5.434-4.644,2.73-12.506,3-19 c0.854-20.583,0.52747.455,1-65c0.031-1.143,2.108-2.545,2-4c-0.138-1.8512.057-2.141-2-4c0.01-0.312,0.929-2.232,1-3c1.88220.327-0.323-50.318,1-71c-53.055-0.237-133.001,0.156196,0c0.358,55.239-0.887,121.433,1,166c-2.333,04.667,0-7,0c0.078-51.311-0.056-110.44,0-165c-63.3342.333-131-0.333-196-1c0-2.667,0-5.333,0-8c65.333,0, 130.667,0,196,0C195.906,93.273,196.179,45.448,197,0 z”/> ... </g> </g> <g id=”Livello_2”> </g> </svg>

166

Illustrazione 58 Visualizzazione della pagina “Fumetti in formato SVG” tramite il tool Firefox eReader e il software Calibre

All’interno del documento .opf dove bisogna indicare anche la proprietà “svg” del documento. <manifest> <item id=”chap_005” href=”chap_005.xhtml” media-type=”application/xhtml+xml” properties=”svg”/> </manifest> <spine> <itemref idref=”chap_005” linear=”yes”/> </spine>

Nel documento di navigazione nav.xhtml: <li id=”toc-titlepage”> <a href=”chap_005.xhtml”>SVG per fumetti</a> </li>

e anche nel toc.ncx: <navPoint id=”chap_005” playOrder=”6”> <navLabel> <text>SVG per fumetti</text> </navLabel> <content src=”chap_005.xhtml”/> </navPoint>

167

6.3.7 La potenza del CSS3 Con questa piccola dimostrazione ho voluto illustrare quanto l’uso del css3 sia un alleato prezioso per la creazione di pubblicazioni multimediali.

Ho fatto una banalissima gallery con effetto fade: <?xml version=”1.0” encoding=”UTF-8”?><html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops”> <head> <title>La potenza del CSS3</title> <link rel=”stylesheet” href=”css/style.css” type=”text/css”/> <meta charset=”utf-8”/> </head> <body> <div class=”videolibro2”> <h1 class=”otama”>La potenza del CSS3</h1> <div id=”CSS3Slideshow”> <img class=”img1” src=”img/1.jpg” <img class=”img2” src=”img/2.jpg” <img class=”img3” src=”img/3.jpg” <img class=”img4” src=”img/4.jpg” </div> </div> </body> </html>

Illustrazione 59 Visualizzazione della pagina “La potenza del CSS3” tramite il tool Firefox eReader e il software Calibre

168

alt=”” alt=”” alt=”” alt=””

/> /> /> />

L’integrazione del CSS3 ha anche i suoi contro, per esempio quando si creano effetti rollover bisogna considerare anche l’effetto touch dei reader, per il buon funzionamento è necessario integrare del codice javascript.

Anche questa pagina e le immagini che contiene andranno elencate nel file .opf: <manifest>

<item id=”chap_004” href=”chap_004.xhtml” media-type=”application/xhtml+xml”/> <item id=”1” href=”img/1.jpg” media-type=”image/jpeg”/> <item id=”2” href=”img/2.jpg” media-type=”image/jpeg”/> <item id=”3” href=”img/3.jpg” media-type=”image/jpeg”/>

<item id=”4” href=”img/4.jpg” media-type=”image/jpeg”/> </manifest> <spine> <itemref idref=”chap_004” linear=”yes”/> </spine>

e nel file nav.xhtml <li id=”toc-titlepage”> <a href=”chap_004.xhtml”>La potenza del CSS3</a> </li>

e nel toc.ncx <navPoint id=”chap_004” playOrder=”7”> <navLabel> <text>La potenza del CSS3</text> </navLabel> <content src=”chap_004.xhtml”/> </navPoint>

169

6.4 Impacchettamento Per trasformare la nostra cartella in un file epub3 ho seguito questa procedura: 1. ho controllato di aver cambiato le estensioni ai file content.opf e toc.ncx 2. ho compresso il file mimetype 3. ho draggato all’interno di mimetype.zip le cartelle META-INF/ e OEBPS/ 4. conclusa l’operazione di compressione ho cambiato estensione da .zip a .epub

6.5 Conclusioni Questo progetto è stato molto interessante mi ha permesso di avvicinarmi a una realtà lavorativa nuova fatta di grafica e codice.

E’ necessario per questo tipo di lavoro avere un occhio grafico esperto, per creare dei layout piacevoli, e una buona conoscenza di codice e di scripting per l’impaginazione e la creazione di animazioni; queste mansioni sono di solito fatte da più persone, ognuno con un background di esperienze alla spalle.

Il mio progetto è sicuramente un inizio di ciò che potrei riuscire a fare ma ora non ho tutte queste conoscenze, considerando anche che il formato ePub3 come l’html5 sono due linguaggi nuovi e ancora in fase di assestamento.

Queste sfaccettature si aggiungono ai problemi, più volte indicati nella tesi, di reader di vecchia e nuova generazione con schermi che si possono roteare sia in orizzontale che in verticale, cambiando quindi la dimensione disponile.

Malgrado possa apparire macchinosa la creazione di un epub scrivendo il codice manulmente non è escluso che molto presto vengano offerte della applicazioni che semplificano notevolmente la produzione di un ebook (vedi succitate applicazioni Apple). Peraltro, e similmente alle esigenze di editing html per il Web, sarà molto importante mantenere una coscienza tecnica del linguaggio per poterlo applicare professionalmente.

In conclusione mi posso ritenere soddisfatta delle performance narrative-multimediali del mio primo ebook in formato ePub3.

170

Un futuro di libri

7.1 Ieri & oggi Immaginando di scattare un fotografia, dello stato attuale del mondo degli ebook, possiamo renderci conto di quanti passi da gigante si siano fatti in questi ultimi anni. Finalmente i libri digitali sono una realtà che sta cambiando il mondo dell’editoria in modo significativo, costruendo nuovi processi produttivi e nuove abitudini di lettura, aprendo porte a nuove strade.

Il 2011 si è concluso con un 10% di vendite di ebook rispetto ai libri cartacei, un dato ancora timido ma molto significativo, gli utenti stanno conoscendo il prodotto e lo stanno apprezzando complici nuovi dispositivi a prezzi irrisori e a un contorno di nuovi servizi e strumenti veramente entusiasmanti.

Il cambiamento rivoluzionario è in atto e se nel 2007 non esistevano ancora né iPad né kindle, nel 2012 vediamo introdurre nel paniere ISTAT eBook ed eReader. Nuovi hardware sempre più potenti e coinvolgenti saranno in arrivo sul mercato che renderanno necessaria la creazione di ebook curati dal punto di vista dell’aspetto e dell’impaginazione oltre a ottimi contenti accessibili e fruibili da tutti.

All’alba del 2012 è legittimo chiedersi come si evolverà il mercato dei libri e come si adatteranno i soggetti del mondo editoriale, la transazione al digitale sta creando non pochi problemi alle case editoriali che ora più che mai hanno bisogno di una mentalità agile e flessibile, la diffusione del self-publishing farà crollare le barriere all’ingresso di questo ostico mondo che andrà sempre più verso un ambiente libero, accessibile e sociale.

Gli attori del mondo editoriale dovranno quindi pensare a un nuovo modello di business improntato sulla creatività, l’innovazione e la trasformazione; L’approccio al lettore sarà su nuovi canali di comunicazione on line, come blog e social network, che ridisegneranno nuovi ruoli professionali.

La strada del libro digitale sarà sempre più simile a quella intrapresa dal mondo dalla musica.

Anche se quest’anno la parola d’ordine sarà sperimentazione nelle biblioteche e nelle scuole dal 2013 probabilmente gli ebook diventeranno una pura realtà per tutti.

171

7.2 Potere agli autori 104 Sergio Covelli è uno dei fondatori di Self Publishing Lab, la comunità degli autori e dei lettori liberi.

105 Dall’inglese “L’ebook è mio ed è affar mio” 106 Tra le piattaforme di selfpublishing “made-in-italy” possiamo citare “eBook Vanilla”, “ilmiolibro. it” e “Narcissus” 107 Dall’inglese richiesta”

“stampa

su

108 Termine usato in campo industriale per indicare il compenso derivante da brevetti o come in questo caso proprietà intellettuali

Qualche giorno fa Sergio Covelli104 si faceva immortalare nudo con la scritta My Ebook is my Own105, questa citazione può essere benissimo presa come slogan per identificare il movimento del self-publishing. Ma cos’è il self-publishing?

Più che di movimento possiamo parlare di un interessante opportunità per gli autori che vogliono gestire le varie fasi di pubblicazione del proprio libro senza l’ausilio di una casa editrice, diventando “editori di se stessi”.

Seppur con una certa lentezza anche in Italia esistono da qualche anno le prime piattaforme di self-publishing106 che offrono servizi di pubblicazione gratuita on line, accompagnati da servizi editoriali tradizionali come l’impaginazione, la grafica e la stampa on demand107.

La scelta di autopubblicarsi offre allo scrittore innumerevoli vantaggi che vanno da un fattore prettamente economico, come quello delle royalties108, a un fattore di controllo che si ha sull’opera che per quanto riguarda l’auto-pubblicazione è un controllo totale. L’autore può decidere come vuole la propria pubblicazione e con quali contenuti, in tempi molto più rapidi di quelli offerti dalle case editrici tradizionali.

Non è tutto oro ciò che luccica, questa attività ha anche molti risvolti“negativi”sia per il lettore che per l’autore stesso; il primo dovrà imparare a districarsi tra le innumerevoli proposte che si aggirano tra la rete, a volte anche di bassa qualità, fatte da scrittori della domenica senza alcuna cura nell’impaginazione e nella correzione del testo o dai cosiddetti ebook spam, ebook totalmente inutili o addirittura copiati. L’autore invece dovrà imparare ad offrire un alto livello di qualità sia nei contenuti sia nell’aspetto grafico, non solo ma dovrà anche sobbarcarsi di tutta quella delicata fase di promozione, necessaria per poter uscire dall’oscurità provocata dall’infinita concorrenza in rete, una fase importantissima per la vendita del libro.

Con l’auto-promozione non voglio intendere la mera pubblicità del proprio e-book ma tutti gli aspetti che renderanno la nostra pubblicazione di facile reperibilità come la cura nei metadati o nelle descrizioni che se accattivanti renderanno, agli occhi dei potenziali lettori, una pubblicazione interessante come una copertina dalla grafica curata. Senza dimenticare l’utilità di esser presente sui motori di ricerca come Google!

172

109 Proviene dal gergo del social network Twitter e si usa per indicare gli utenti che decidono di seguirti come fans

110 Il marketing convenzionale definiva il consumatore come soggetto passivo impossibilitato dal confrontarsi con altri consumatori in un canale di trasmissione concentrato e facilmente controllabile.

Con l’avvento dei blog e dei form i consumatori hanno imparato a dialogare tra loro e a ragionare sui propri acquisti, passando da soggetto passivo a soggetto attivo che ha bisogno di misurarsi e di comunicare ciò che piace o che non piace. E’ per questo che le aziende stanno puntando tantissimo sull’ascolto di blog e recensioni sul web.

Gli scrittori, quindi, dovranno affidarsi agli innumerevoli strumenti offerti dalla rete come i social network, i blog e gli advertising on line che permettono di farsi conoscere e di creare un filo diretto con i propri followers109, o potranno rivolgersi ai servizi di promozione e diffusione on line e offline forniti dalla piattaforme di self pubblishing.

Un caso eclatante di auto-produzione e auto-promozione è quello dello scrittore John Locke diventato famoso per essere balzato nella prima posizione della classifica di Amazon con un e-book a 99 centesimi e una aggressiva strategia di marketing.

Il signor Locke ha intascato ben 350.00 dollari non tanto con l’ebook a prezzo regalo ma per come è riuscito a distinguersi e a promuoversi grazie alla rete e senza il supporto di nessuna casa editrice.

Il caso di questo scrittore è un caso raro, non è facile riuscire a scrivere un buon libro e ad avere competenze da esperto web marketing ma può far capire che miniera d’oro ci sia dietro al self-publishing per chi sa cogliere a proprio favore le opportunità offerte dalla rete; senza dimenticare che nell’era del web 2.0 è il pubblico che sceglie il prodotto e non più viceversa110!

Il self-publishing può essere un ottimo trampolino di lancio per chi ha un buon manoscritto in mano e non viene preso minimamente in considerazione dalle case editrici che rivolgono l’attenzione a casi più commerciali come la biografia di un calciatore o della starlette di turno.

Me se gli autori possono trovarsi il loro pubblico da soli senza l’editore c’è da chiedersi che fine farà quest’ultimo che invece ha un vitale bisogno degli autori?

Per non rischiare una totale estinzione le case editrici dovranno sicuramente cambiare i contratti per la cessione del diritto d’autore sui diritti digitali, il self-publishing potrebbe essere per le case editrici un cappio al collo in quanto i diritti che gli autori prendono dal mondo digitale si aggirano intorno al 70% contro i 17% delle case editrici. Tra le due percentuali il divario è veramente molto grande che potrebbe far emigrare gli autori, magari quelli di fama già nota al pubblico, dalle case editrici all’auto pubblicazione, come faranno in questo caso gli editori ?

173

111 Dall’intervista “Il punto di vista di un editore (e discografico): intervista a Maurizio Rugginenti” da selfpubblishinglab.com

In un certo senso sembra di ripercorrere la strada che sta subendo la musica, infatti molte band prima di un contratto discografico iniziano dall’autoproduzione. Come racconta111 l’editore/discografico Rugginetti: << ..Molti artisti cominciamo a distribuirli in digitale, perché nessuna major ha voglia, tempo e denaro da investire su un nuovo progetto, prendono quello che arriva dai vari reality e lo pubblicano e anche se farà poco successo non importa perché l’anno prossimo ci sarà la nuova edizione del reality di punta.

Io lavoro tutti i giorni con giovani artisti davvero bravi, dei talenti, cha “spaccano” ma nessuna major li vuole perché non arrivano dalle blasonate trasmissioni televisive. Ma, quando le major poi vedono le vendite online che vanno alla grande – che da poco sono entrate nelle classifiche di vendite ufficiali anche in Italia – allora cominciano a chiamare e, guarda caso, sono molto interessati all’artista...>>

7.3 Nuovi modelli di business

112 [http://www.exeo.it]

174

Il futuro delle case editrici non è tutto così nero a patto che ci sia una ristrutturazione all’interno delle aziende stesse.

Si possono notificare due atteggiamenti particolari tra le piccole e medie case editrici, uno di completa chiusura e di rifiuto verso queste nuove tecnologie e uno di apertura e di diversificazione.

E’ ben chiaro quanto un atteggiamento attivo verso il problema dia speranze di sopravvivenza proprio grazie all’opportunità del digitale. In Italia abbiamo molte case editrici di media e piccola di mensione che hanno deciso di buttarsi totalmente o in parte su questo nuovo canale di vendita: E’ il caso di Exeo Edizioni112 che nel settore di nicchia delle edizioni giuridiche professionali sta uscendo dalla ‘crisi della carta’ e dell’editoria in generale proprio sfruttando il nuovo media ebook adattandosi, come già detto, a questo nuovo tipo di rapporto autore-editore in cui si riconosce maggiori margini di guadagno all’autore ma contemporaneamente si assicura al medesimo la struttura distributiva online, le necessarie procedure burocratiche per la distribuzione secondo le norme vigenti e soprattutto un adeguata promozione dell’ebook in Rete adattandosi velocemente al linguaggio del marketing della comunicazione digitale basato perlopiù sul fenomeno social e sulla indispensabile visibilità sui motori di ricerca.

Di aziende come questa ce ne sono molte,sono tutte case editrici indipendenti di medie e piccoli dimensioni, come Delirium House che permette di leggere i libri in streaming o Castello Volante che punta sugli ePub o la casa editrice Chiare Lettere totalmente orientata al web 2.0. Queste aziende hanno capito l’importanza del web e del rapporto con il lettore. Case editrici che non sono state inermi davanti a questo cambiamento. Se la logica aziendale punta al lungo periodo, cosa succederà alle case editrici che non hanno voluto rinnovarsi nel momento in cui le nuove generazioni digitali vorranno leggere e saranno abituati a leggere sul solo supporto digitale?

Il futuro dell’editoria digitale indipendente è in mano alle piccole medie case editrici che possono solo cogliere in positivo questa rivoluzione, prendendola come spunto per un miglioramento e un evoluzione interna.

7.4 Social reading

113 I Social Reading nascono intorno al 2005 come piattaforme per lo scambio di opinioni su libri prevalentemente cartacei, il social reading più famoso è sicuramente Anobii seguito da Booklines

114 Questa funzionalità si chiama Reading Life che permette di segnalare luoghi, personaggi e annotazioni trovate nei nostri testi sui social network

Poche esperienze sono personali e solitarie come quelle della lettura sia di un libro cartaceo che di quello digitali, entrambi i formati potranno essere sempre letti o studiati nel nostro più isolato angolo di casa ma grazie a internet e ai nuovi dispositivi si potrà vivere un ambiente tra lettori con le nostre stesse passioni o interessi ricreando i circoli e i festival letterari.

Questi nuovi spazi di condivisione nascono in parallelo alla diffusione degli ebook e dei book reader sotto il nome di social reading113, dall’inglese lettura sociale, dei veri e propri social network dedicati al mondo della lettura.

Il significato della parola libro è quindi superato da un significato più ricco in cui l’esperienza di lettura è accompagnata dalla possibilità di condividere in tempo reale l’esperienza stessa, diventando da attività individuale a attività collettiva!

Oggi i social reading entrano dentro il dispositivo per integrarsi con l’ebook che stiamo leggendo, stiamo parlando di piattaforme dove, oltre alla recensione, possiamo condividere le nostre sottolineature, dove poter discutere su singoli passi di un libro come se fossimo ad un circolo di lettura utilizzando lo stesso strumento che usiamo per leggere...il nostro e-reader!

L’evoluzione di questi dispositivi arricchiranno la nostra esperienza di lettura in una sorta di “lettura aumentata”, pensiamo anche ai meccanismi di geo e cronoreferenziazione114 narrativa grazie ai quali potremo segnalare di essere nel posto dove il libro è ambientato oppure ancora uno studente potrà chiedere aiuto se ha difficoltà a comprendere un testo di filosofia o semplicemente grazie a un tasto potremo avere più informazioni sull’autore o sulla sua biografia e con un click acquistare degli altri ebook!

175

Questi strumenti dovranno necessariamente essere presi in considerazione dai soggetti coinvolti nel mondo editoriale come autori, case editrici e librai.

Gli autori e gli editori potranno utilizzare queste funzioni come un metaforico cordone ombelicale con i lettori, da cui prendere preziosi consigli e per uno studio del loro comportamento. Il motore dell’economia è sempre stato il passaparola e ora più che mai questo potrebbe essere d’aiuto alle case editoriali.

Amazon è stato il primo ad utilizzare con successo questa funzione sul kindle grazie al quale i lettori si possano collegare al sito per recensire il libro acquistato in precedenza o per acquistare degli altri ebook.

115 Dal sito pubblicitàitalia. it [http://www.pubblicitaitalia.it/ news/Media-e-Multimedia/Stampaperiodica/gruppo-24-ore-presentaebookevolution_20120348.aspx]

Le librerie, già martoriate dalla presenza delle piattaforma di vendita on line, dovranno rinnovarsi con un nuovo spirito d’iniziativa imprenditoriale per imparare a vendere in un mercato che va al di là dei confini comunali: è il caso dell’interessante iniziativa presa dal Sole 24 Ore con “eBook Evolution” in collaborazione con numerose librerie sparse su tutto il territorio nazionale, un progetto volto a portare gli ebook e i lettori digitali in libreria.

Lo scopo di questa iniziativa è quello di unire le caratteristiche del canale di vendita tradizionale a quello on line, accanto alla copia cartacea, il cliente può trovare, esposto in un totem, un semplice coupon: una volta rotto il sigillo di sicurezza e aperto il coupon, dovrà andare all’indirizzo internet indicato e digitando il codice univoco scaricare il libro in formato pdf o epub. Tre semplici operazioni: scegli, scarica, leggi115.

Niente di più e niente di meno delle semplici operazioni che facciamo quando andiamo ad acquistare una ricarica telefonica o un tessera prepagata iTunes.

L’innovazione delle librerie dovrà passare anche in rete, obbligatoria è la presenza sul web con il duo blog/social network per coinvolgere anche lettori delle propria città e per ricreare luoghi di aggregazione, creando appuntamenti di confronto e di incontro, ritrovando il vero spirito del libraio... quello del consigliere in stile web 2.0!

176

7.5 Biblioteche e Digital lending

116 I problemi principali riscontrati nel noleggio è stato quello dei DRM che rendono inaccessibile l’ebook letto tramite gli ausili tecnologici per le disabilità visive, come screen reader, text-to-speech o tastiera braile.

117 Il Cloud è uno spazio virtuale dove l’utente può inserire tutti i suoi file o programmi in modo da potervi accedere su qualsiasi computer senza la necessità di un dispositivo tipo hard-disk 118 Tutto quello che puoi leggere

Il 2012 si apre con entusiasmanti novità per il mondo delle biblioteche che si vedono impegnate in progetti sperimentali sul prestito di ebook. Le biblioteche, su tutto il territorio nazionale e in particolarmente in Toscana, hanno aderito al network MediaLibrary, una piattaforma per le biblioteche italiane per il noleggio ebook; da oggi in biblioteca si potranno leggere ebook, quotidiani on line, scaricare mp3, visionare video, immagine e banche dati.

Opportunità veramente preziosa per le biblioteche che potranno rinnovare la propria immagine rispolverando il loro scopo principale, quello di dare massima diffusione della cultura aprendo le porte a vecchi e a nuovi utenti entrando nelle case di ognuno di essi.

Da segnalare anche il progetto LIA (Libro Italiano Accessibile) dedicato agli utenti con disabilità visive, attivo dal 2013, che permetterà a 360 mila non vedenti e un milione di ipovedenti di poter fruire di prodotti editoriali digitali in formato accessibile per la propria disabilità nel pieno rispetto del diritto d’autore116.

Nel 2012 si creeranno nuovi metodi e nuovi modelli di noleggio ebook come quello proposto da 24symbols.com, con un ammontare mensile di 10 € si potrà accedere a uno spazio virtuale definito cloud117, dove avremo a disposizione l’intero catalogo on line di ebook con la formula “all you can read”118, naturalmente tutto condito in chiave social e senza utilizzo di DRM! Queste innovative piattaforme di letture in streaming potrebbero essere un ottima soluzione al sempre più crescente mercato della pirateria dei libri digitali.

177

7.6 eBook e social learning In una scuola straziata da riforme e controriforme , macellata da governi che cercano di tenere in piedi la baracca utilizzando la parola “tagli” come parola d’ordine, è necessario incentivare le scuole e gli insegnanti a creare nuovi modelli di apprendimento basati sulla realtà attuale; una realtà dove la tecnologia e l’innovazione sono il futuro.

L’apprendimento come lo conosciamo da 150 anni è ormai troppo chiuso e troppo stretto per studenti che usano internet come fonte d’ aiuto e di arricchimento allo studio, è necessaria una rivoluzione degli strumenti e dei contenuti.

L’adozione degli ebook potrebbe essere una ventata fresca in questa scuola malandata, ebook che oltre ad essere leggeri ed economici porteranno con sé un nuovo modo d’impostazione allo studio,ideale per i giovani abituati fin da bambini all’utilizzo di queste tecnologie.

Stiamo parlando di una scuola che fra qualche anno utilizzerà reader o tablet per la creazione di nuovi testi scolastici semilavorati, nel senso che saranno testi che gli insegnanti e gli alunni stessi potranno modificare, rimodellare e arricchire durante l’anno scolastico.

Gli studenti potranno studiare su ebook multimediali collegati ad ambienti che favoriscono la partecipazione e il coinvolgimento degli stessi, in un processo di co-costruzione dei contenuti.

Il Social Learning è l’evoluzione del nostro modello di studio, non più basato su un ambiente chiuso e finito come un testo stampato ma un testo digitale aperto creato ad hoc senza più confini che facilita lo scambio e la condivisione del sapere nel tempo.

Veramente tutto entusiasmante ma la realtà è ben diversa... almeno in Italia.

Paesi come la Corea del Sud e l’India hanno istituito un piano per la digitalizzazione totale della scuola con tablet in comodato d’uso o a prestiti agevolati agevolati; in Italia la scuola è in crisi ed è difficile pensare a un cambiamento su così vasta scala tranne realtà ormai sempre dove presidi e insegnanti hanno intrapreso progetti pilota diventando loro stessi autori dei libri scolastici, mettendosi in gioco su ciò che la rete e la scuola può offrire..

119 Progetto visionabile al sito [http://www.bookinprogress.it/ index.php]

178

E’ il caso dell’istituto brindisino “Itis Majorana” che quest’anno ha dato vita al progetto “Book in Progress119” che coinvolge 300 docenti su scala nazionale intenti a migliorare significativamente l’apprendimento degli allievi e i problemi economici del caro libri.

L’interessante iniziativa si basa principalmente sul selfpublishing didattico dove ebook creati dai docenti vengono utilizzati sui reader e sulle lavagne elettroniche in classe.

Iniziative come queste stanno dilagando su tutto il territorio nazionale ma sempre su scala di una o due classi per istituto.

Il problemi sono molti come la diffusione di device su vasta scala, la sicurezza che ogni alunno abbia a casa un accesso ad internet. Aggiungiamoci anche la scarsa preparazione degli insegnanti che andrebbero aggiornati e la scarsa partecipazione delle case editoriali. Questi ultimi infatti stanno latitando nella creazione di contenuti digitali tranne realtà sporadiche come Zanichelli e Rcs Libri, che stanno affiancando la versione cartacea a quella multimediale on line o in formato .pdf o come Garamond che sta puntando tantissimo sul social learning.

Per una esperienza di apprendimento uguale per tutti è necessario un uso corretto dei DRM per libri accessibili e l’uso di un formato aperto fruibile su i diversi tipi di reader o su sistemi di scrittura e lettura alternativi per non vedenti o ipovedenti. E’ comunque fondamentale affiancare l’uso di materiali digitali a quelli tradizionali per non perdere l’uso della scrittura e magari per non impigrirsi mentalmente troppo a colpi di tabs.

Il caso vuole che la strada verso una didattica nuova e aperta a tutti sia sempre più tortuosa e piena di barricate, il 19 Gennaio 2012 sono stati presentati dalla Apple dei bellissimi prodotti per la scuola: iBooks Author e iTunes U. Il primo permette di creare con pochi gesti ebook multimediali innovativi e coinvolgenti con video e gallerie d’immagini. Il secondo è un app che offre a insegnanti e studenti un mondo dove poter accedere a un vastissimo catalogo di contenuti didattici e di pubblicare note e persino di far lezione in streaming.

Di logica sono prodotti fantastici che stanno portando avanti l’idea di una cultura digitale e in linea su quello che ci si aspetta nella scuola del futuro basata sul “social learning”; prodotti che farebbero voglia di studiare anche al più sfaticato scolaro ma che oltre alla patina lucida e al tutto gratuito evidenziano i tentacoli di una azienda che ha pratiche di aggressione del mercato spietate.

La pubblicazione creata con iBooks Authors è basata su un formato proprietario, creato su un estensione dell’ePub3, che allontana sempre di più il mondo degli ebooks a un unificazione di formati. Ma la apple non era per gli standard aperti? Senza dimenticare che stiamo parlando di un software che gira esclusivamente su prodotti marchiati mela.

179

Non solo, le pubblicazioni vendute saranno attentamente controllate dall’azienda di Cupertino prima di essere immesse sul canale di vendita, è quindi da chiedersi se è proprio questa la strada su cui vogliamo dirigerci?

Con una punta d’invidia verso gli studenti di domani, penso che con mezzi proprietari e controllati da multinazionali si vada solamente a perdere quel briciolo di libertà che abbiamo nei contenuti.

Fra poco, quando l’entusiasmo iniziale per iBooks sarà svanito ci si accorgerà di quanto questo metodo sia limitato1 e magari sarà necessaria la creazione di un tool di conversione da iBook2 a ePub3.

7.7 Nuove figure professionali La conseguenza di questi cambiamenti innovativi è l’introduzione di nuove figure professionali polifunzionali.

Le case editrici, che vorranno puntare su edizioni digitali diverse dal formato cartaceo, dovranno rielaborare la loro organizzazione interna introducendo programmatori esperti in html5 e in javascript per la creazione di ebook multimediali e interattivi ma anche di eBook Director, figure con il compito di progettare esteticamente la pubblicazione, lasciando ai programmatori il compito di realizzarla.

Il nuovo mondo dell’editoria sta cambiando modello di business che si affiancherà a una politica più social e più orientata al mondo del web 2.0 con la necessità di esperti in online marketing e social networking. Professionisti che si occupano di blog, forum e social network non solo per le case editrici ma anche da associare al self-publishing poiché la promozione offline è ben diversa da quella fatta in rete. Le interazioni con i social network, che idealmente portano gli utenti a sentirsi vicini a personaggi famosi, creeranno nuove forme d’interazione, attaccamento e fedeltà tra gli autori e i lettori.

Esperti del settore saranno necessari in questo momento di transizione per la creazione di corsi di formazione e apprendimento alle scuole e alle biblioteche...

180

7.8 Pensieri analogici per produzioni digitali Il percorso che ho tracciato è stato lungo, a volte tortuoso ma entusiasmante come quelle scampagnate che si fanno alla domenica in montagna... Sono partita con un book reader dimenticato nel cassetto, sono arrivata al punto di non volermene più staccare.

Ho capito che il supporto non è importante, l’ importante sono i contenuti e come questi vengono trasmessi, ogni cambiamento ha portato con se critiche e turbamenti ma basta abituarsi e capire che nel nuovo non c’è qualcosa di spaventoso ma c’è anche qualcosa di vantaggioso con quel valore aggiunto, che ora accecati dallo scetticismo non vediamo.

Sono partita con dei pregiudizi e delle frasi di luogo comune “ come si fa a non sentire più l’odore della carta”“ a non sfogliare più le pagine ingiallite” ...sono arrivata a capire quanto siano importanti questi nuovi strumenti per i giovani, a quanto sarà bello studiare su questi reader multimediali e quanto sia grande questa opportunità per le persone con disabilità visive.

Fra qualche anno avremo abitudini diverse con ricordi vaghi su come si leggeva in passato ma avremo sempre voglia di raccontare e di leggere storie senza un supporto materiale, solo allora saremo arrivati all’evoluzione che non ci aspettavamo.

181

182

Bibliografia

Mauro Sandrini, 2011, Elogio degli e-book, Homeless Book Fabio Brivio e Giovanni Trezzi, 2011, ePub per autori, redattori, grafici, Apogeo Matt Garrish, 2011, What Is EPUB 3?, Oâ&#x20AC;&#x2122;Reilly Media

183

184

Sitografia

http://www.ebook-reader.it/ http://epubpublishing.wordpress.com/ http://blog.bookrepublic.it/ http://www.guidaebook.com/ http://semanticweb.com/ http://www.apogeonline.com/ http://www.selfpublishinglab.com/ http://www.casarini.org/ http://futureofthebook.blogspot.com/ http://www.ebooklearn.com/ http://idpf.org/epub http://www.ebooklabitalia.com/ http://www.html5today.it/ http://www.html.it/ http://book.pressbooks.com/ http://www.pianetaebook.com/ http://leggoergosum.wordpress.com/ http://eletteratura.wordpress.com/ http://www.itespresso.it/ http://editoria-digitale.com/ http://www.simplicissimus.it/ http://www.ebooklabitalia.com/ http://www.booksblog.it/ http://www.biroblu.info/ http://www.libridibit.it/ 185

186

http://webaccessibile.org/ http://www.scritturadigitale.net/ http://www.mediamente.rai.it/ http://www.marcovalerio.it/ http://www.italianalistapart.com/ http://www.unoeunolab.it/ http://lukesblog.it/ http://radar.oreilly.com/ http://www.kepub.org/ http://www.passwordincorrect.com http://www.useragentman.com/blog/

187

188

189

190