{"id":140,"date":"2018-01-18T21:31:20","date_gmt":"2018-01-18T21:31:20","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=140"},"modified":"2018-01-30T18:03:18","modified_gmt":"2018-01-30T18:03:18","slug":"3-4-2-creacio-dun-arxiu-en-format-epub","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/3-4-2-creacio-dun-arxiu-en-format-epub\/","title":{"rendered":"3.4.2. Creaci\u00f3 d\u2019un arxiu en format EPUB"},"content":{"rendered":"<div class=\"featured featured-blue\"><\/p>\n<p>El proc\u00e9s de creaci\u00f3 d\u2019un EPUB \u00e9s pot dur a terme amb l\u2019edici\u00f3 directe dels arxius que el formen amb un editor de codi o de text (Atom, Brackets, Notepad++, etc.).<\/p>\n<p>De fet, podr\u00edem crear un EPUB sencer usant nom\u00e9s el Notepad del Windows, per exemple, ja que tots els llenguatges que usa es poden editar amb qualsevol editor textual.<\/p>\n<p>\n<\/div>\n<p>Evidentment, com en la majoria de formats i llenguatges, tenim algunes eines que ens ajudaran a automatitzar una part dels processos i assegurar una sintaxi correcta en els arxius que formen un EPUB. A la <a href=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/2-2-2-epub\/\" target=\"_blank\" rel=\"noopener\">secci\u00f3 2.2.2<\/a> ja hem vist l\u2019estructura d\u2019un EPUB i tots els arxius que el formen, sobretot els que s\u00f3n imprescindibles.<\/p>\n<p>De nou, de l\u2019eina que escollim per a treballar dependr\u00e0 el proc\u00e9s que haurem de seguir i els passos necessaris per a crear un EPUB, per\u00f2, en tots els casos, si volem obtenir un resultat \u00f2ptim haurem de treballar amb els llenguatges <strong>HTML<\/strong> i <strong>CSS<\/strong>. Si hem creat alguna p\u00e0gina web anteriorment, o coneixem aquests llenguatges, el proc\u00e9s de creaci\u00f3 d\u2019un EPUB ser\u00e0 molt senzill i nom\u00e9s haurem d\u2019entendre l\u2019estructura b\u00e0sica i gen\u00e8rica que han de tenir els diferents arxius del llibre.<\/p>\n<p>En els enlla\u00e7os <a href=\"http:\/\/epubzone.org\/epub-3-overview\/what-kind-of-content-is-epub-useful-for\" target=\"_blank\" rel=\"noopener\">EPUBZONE<\/a> i <a href=\"http:\/\/www.idpf.org\/epub\/31\/spec\/\" target=\"_blank\" rel=\"noopener\">IDPF<\/a> podeu trobar informaci\u00f3 detallada sobre els usos m\u00e9s habituals d\u2019EPUB i acc\u00e9s a l\u2019especificaci\u00f3 del format, on hi ha tota la informaci\u00f3 necess\u00e0ria per a entendre com funciona.<\/p>\n<p>En un primer moment, accedir al format directament per via de l\u2019especificaci\u00f3 d\u2019aquest pot resultar traum\u00e0tic per a qui no est\u00e0 avesat a aquest tipus de documents t\u00e8cnics, i \u00e9s interessant consultar informaci\u00f3 m\u00e9s introduct\u00f2ria.<\/p>\n<p>Per ampliar m\u00e9s informaci\u00f3, es pot consultar el llibre <a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"Adell, Ferran (2015). <em>Edici\u00f3n en EPUB<\/em>. Barcelona: Oberta Publishing.\" data-placement=\"top\" data-html=\"true\" >Edici\u00f3 en EPUB<\/a>, de l\u2019autor que escriu, que explica el proc\u00e9s de creaci\u00f3 d\u2019un EPUB pas a pas i amb una introducci\u00f3 molt detallada de les implicacions que t\u00e9 el format i les decisions que hem de prendre per a editar-lo correctament. Aquest llibre versa principalment sobre la versi\u00f3 2 del format, tot i que tamb\u00e9 fa una introducci\u00f3 a <a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"Per a con\u00e8ixer les particularitats i els canvis propis d\u2019EPUB3, dos recursos molt interessants s\u00f3n: Garrish, Matt. <em>What is EPUB 3?<\/em> O\u2019Reilly Media i Garrish, Matt. <em>Accessible EPUB 3<\/em>. O\u2019Reilly Media, El primer \u00e9s m\u00e9s introductori i el segon molt m\u00e9s complet.\" data-placement=\"top\" data-html=\"true\" >EPUB3<\/a>.<\/p>\n<h4><strong>Passos necessaris per a crear un arxiu EPUB<\/strong><\/h4>\n<figure id=\"attachment_78\" aria-describedby=\"caption-attachment-78\" style=\"width: 519px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-32\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_013.jpg\" alt=\"Passos necessaris per a crear un EPUB\" width=\"519\" height=\"651\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_013.jpg 519w, http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_013-239x300.jpg 239w\" sizes=\"(max-width: 519px) 100vw, 519px\" \/><figcaption id=\"caption-attachment-78\" class=\"wp-caption-text\"><strong>Figura 13.<\/strong> Passos necessaris per a crear un EPUB<\/figcaption><\/figure>\n<p>Podem separar el proc\u00e9s de creaci\u00f3 d\u2019un EPUB en quatre passos:<\/p>\n<p><strong>1. Crear els arxius de contingut que formen la publicaci\u00f3<\/strong>. Aix\u00f2 vol dir, al marge de tenir disponibles tots els arxius complementaris (imatges, v\u00eddeos, \u00e0udios, etc.), crear els arxius de contingut (<em>content documents<\/em>) que es creen en XHTML, una versi\u00f3 m\u00e9s restrictiva per\u00f2 molt similar a HTML 5, l\u2019est\u00e0ndard per a la publicaci\u00f3 web. Un cop tenim el contingut editat en aquests llenguatges, haurem definit el marcatge sem\u00e0ntic que determina l\u2019estructura del document i el valor sem\u00e0ntic de cada un dels elements que el formen (t\u00edtols, par\u00e0grafs, seccions, articles, enlla\u00e7os, imatges, etc.).<\/p>\n<p>En aquesta fase, i usant el llenguatge CSS, definirem tamb\u00e9 la visualitzaci\u00f3 del contingut: les fonts, els marges, la posici\u00f3 dels elements, els ressaltats, etc. Podeu trobar tota la informaci\u00f3 necess\u00e0ria, i un gran nombre de tutorials per a aprendre a usar aquests llenguatges, en la web del <a href=\"http:\/\/w3c.org\" target=\"_blank\" rel=\"noopener\">W3C<\/a>.<\/p>\n<p><strong>2. Creaci\u00f3 del <em>package document<\/em> (package.opf).<\/strong> \u00c9s un document que s\u2019usa per a donar informaci\u00f3 als lectors per tal que puguin mostrar el contingut en l\u2019ordre que toca i d\u2019acord amb el marcatge sem\u00e0ntic i els estils que hem definit com a arxius de contingut.<\/p>\n<figure id=\"attachment_33\" aria-describedby=\"caption-attachment-33\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-33\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_014.jpg\" alt=\"Exemple de package document\" width=\"800\" height=\"287\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_014.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_014-300x108.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_014-768x276.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-33\" class=\"wp-caption-text\"><strong>Figura 14.<\/strong> Exemple de <em>package document<\/em><\/figcaption><\/figure>\n<p>Per a crear aquest document, en primer lloc llistarem tots els recursos que formen el llibre: imatges, arxius XHTML, fulls d\u2019estil (CSS), fonts, etc. Tots els continguts que formen l\u2019EPUB han de ser llistats en aquest arxiu en una secci\u00f3 que s\u2019anomena \u00abMANIFEST\u00bb. Si usem contingut que est\u00e0 fora de la publicaci\u00f3, per exemple contingut en l\u00ednia, tamb\u00e9 ho indicarem en aquesta secci\u00f3 del document.<\/p>\n<p>A m\u00e9s a m\u00e9s, aquest document contindr\u00e0 les metadades del llibre: el t\u00edtol, l\u2019autor, la data de publicaci\u00f3 i tot el conjunt de metadades que podem afegir (localitzacions, tem\u00e0tiques, personatges, formats, caracter\u00edstiques, participants en la creaci\u00f3 del contingut, etc.). El fet que el contingut de les metadades sigui f\u00e0cilment localitzable afavoreix que altres sistemes inform\u00e0tics puguin extreure aquesta informaci\u00f3 per a identificar la publicaci\u00f3 i donar-ne informaci\u00f3 a l\u2019usuari.<\/p>\n<p>Finalment, en una secci\u00f3 anomenada \u00abSPINE\u00bb, determinarem en quin ordre s\u2019han de mostrar els diferents arxius XHTML que formen la publicaci\u00f3, per a mantenir l\u2019ordre correcte de lectura.<\/p>\n<p><strong>3. Crearem la taula de continguts<\/strong> en el moment que el llibre ja \u00e9s complet de continguts i estructura, per proporcionar al lector un \u00edndex interactiu de la publicaci\u00f3.<\/p>\n<p><strong>4. Empaquetarem tots els arxius necessaris en un contenidor ZIP amb extensi\u00f3 .epub.<\/strong> Aquest empaquetatge, tot i que es pot fer amb programari autom\u00e0tic, pot ser complex en els primers moments d\u2019\u00fas del format, ja que hem de garantir un cert ordre en els arxius:<\/p>\n<p><strong>a) <\/strong>Hem d\u2019incloure l\u2019arxiu mimetype, que identifica la carpeta ZIP com un arxiu EPUB.<\/p>\n<p><strong>b) <\/strong>Ens hem d\u2019assegurar que en l\u2019arbre d\u2019arxius del llibre hi ha el container.xml (en la carpeta META-INF), que indica al sistema lector on es troba, en l\u2019arbre d\u2019arxius de l\u2019EPUB, l\u2019arxiu package.opf.<\/p>\n<p>La part positiva d\u2019aquest proc\u00e9s \u00e9s que sempre \u00e9s igual i que si seguim l\u2019estructura est\u00e0ndard d\u2019un EPUB podrem usar sempre els mateixos, com una plantilla, ja que no varien, com tampoc l\u2019estructura i el proc\u00e9s de creaci\u00f3 de l\u2019empaquetatge final.<\/p>\n<p>\u00c9s un proc\u00e9s m\u00e9s t\u00e8cnic que el que requereix crear un llibre en format KF8, com veurem a continuaci\u00f3, o que usar programari de maquetaci\u00f3 com InDesign, per\u00f2 ens dona un control total sobre els resultats alhora que complim els est\u00e0ndards i assegurem que sempre controlarem el contingut i el seu format.<\/p>\n<h4><strong>Editors d\u2019EPUB<\/strong><\/h4>\n<p>Tot i que \u00e9s interessant, si un pret\u00e9n dedicar-se professionalment a crear EPUB, treballar directament amb els llenguatges inform\u00e0tics en qu\u00e8 es basa el format, tenim a la nostra disposici\u00f3 algunes eines interessants per a crear documents en format EPUB amb l\u2019ajuda d\u2019un programari editor.<\/p>\n<table>\n<tbody>\n<tr>\n<th width=\"20%\">Adobe InDesign<\/th>\n<td width=\"80%\"><a href=\"https:\/\/www.adobe.com\/es\/products\/indesign.html\" target=\"_blank\" rel=\"noopener\">InDesign<\/a> \u00e9s el programari l\u00edder per a maquetar publicacions i crear <em>page layouts<\/em>. Per tant, no \u00e9s un programari pensat, originalment, per a treballar amb el format EPUB. En tot cas, en les darreres versions s\u2019ha millorat molt el complement d\u2019exportaci\u00f3 d\u2019InDesign a EPUB i aix\u00f2 l\u2019est\u00e0 convertint en una opci\u00f3 viable; aix\u00f2 s\u00ed, en aquest cas haurem de sotmetre el llibre a un proc\u00e9s intens de postproducci\u00f3 amb la revisi\u00f3 i modificaci\u00f3 del codi per a adaptar-lo als est\u00e0ndards del format.<\/p>\n<p>Per\u00f2 si hem de treballar amb InDesign, perqu\u00e8 mantenim una publicaci\u00f3 que encara s\u2019imprimeix en paper o que produirem tamb\u00e9 en PDF, podem exportar el contingut directament d\u2019InDesign a EPUB i verificar <em>a posteriori<\/em> el codi. L\u2019acc\u00e9s a aquest programari, per\u00f2, t\u00e9 un cost for\u00e7a elevat i de pagament per subscripci\u00f3.<\/td>\n<\/tr>\n<tr>\n<th>\u00a0Sigil<\/th>\n<td><a href=\"https:\/\/github.com\/Sigil-Ebook\/Sigil\/releases\" target=\"_blank\" rel=\"noopener\">Sigil<\/a> \u00e9s un editor d\u2019EPUB <em>open source<\/em> que, tot i que est\u00e0 pensat per a treballar amb llenguatges HTML i CSS, ens permet editar un EPUB amb eines visuals molt similars a les que s\u2019usen en un processador de textos com Word. Aquest programa \u00e9s ideal per a accedir al format i entendre com funciona, alhora que creem un EPUB, mentre anem agafant expertesa en l\u2019\u00fas dels llenguatges web.<\/p>\n<p>Sigil generar\u00e0 un EPUB perfecte si seguim les indicacions del format i revisem el codi per assegurar-nos que cap de les funcionalitats de programa no afecta la seva integritat. Sigil \u00e9s un gran port de sortida per a aprendre a editar un llibre en format EPUB.<\/p>\n<p>Manual: <a href=\"http:\/\/sigil-ebook.com\/documentation\" target=\"_blank\" rel=\"noopener\">http:\/\/sigil-ebook.com\/documentation<\/a><\/td>\n<\/tr>\n<tr>\n<th>\u00a0Oxygen<\/th>\n<td>\u00a0<a href=\"https:\/\/www.oxygenxml.com\/\" target=\"_blank\" rel=\"noopener\">Oxygen<\/a> \u00e9s programari de pagament que t\u00e9 un cost for\u00e7a significatiu per a un usuari est\u00e0ndard. \u00c9s un editor d\u2019XML, un dels m\u00e9s potents, i suporta l\u2019edici\u00f3 d\u2019EPUB. Si b\u00e9 \u00e9s una opci\u00f3 de nivell professional avan\u00e7at, \u00e9s un entorn poc amigable per a comen\u00e7ar a treballar en aquest format.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Evidentment, com en la majoria de formats i llenguatges, tenim algunes eines que ens ajudaran a automatitzar una part dels processos i assegurar una sintaxi correcta en els arxius que formen un EPUB. A la secci\u00f3 2.2.2 ja hem vist l\u2019estructura d\u2019un EPUB i tots els arxius que el formen, sobretot els que s\u00f3n imprescindibles. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/140"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":17,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/140\/revisions"}],"predecessor-version":[{"id":1103,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/140\/revisions\/1103"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/media?parent=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}