As Ronnie mentioned already in the last issue, I'm responsible for ensuring that you, dear readers, can read our Full Circle Magazine on your tablet and Android devices But, what is needed to get you the finished product on your devices? Well, in short we need four different things: • IrfanView • a text-based Web editor • Sigil • Calibre. You will forgive me if I do not include all the details, for that I would need a completely separate issue. However, I would like to offer you a little insight into my work. Therefore, I will describe an example in this article, the emergence of an article within the EPUB file. And which article is to be better than Ronnie's Birthday article?
Comme Ronnie a dit dans le dernier numéro, c'est moi qui ai la responsabilité de m'assurer que vous, chers lecteurs, vous puissiez lire le magazine Full Circle sur votre tablette et vos appareils Android.
De quoi avons-nous besoin pour que le produit fini arrive sur vos appareils ? Eh bien, en résumé, nous avons besoin de quatre trucs différents : * IrfanView ; * un éditeur de texte web ; * Sigil ; * Calibre.
Vous me pardonnerez, j'espère, si je ne vous donne pas tous les détails ; pour cela j'aurais besoin d'un numéro entier. Toutefois, j'aimerais vous aider à comprendre mon travail, au moins un peu. Ainsi, dans cet article, je vais décrire un exemple : l'émergence d'un article à l'intérieur du fichier EPUB. Et quel meilleur article que celui que Ronnie a écrit pour l'anniversaire du FCM ?
OK! Let's get it on! Once I got the invitation from Ronnie that I may download the articles from the G-Docs. I do so normally in two versions: ODT, and HTML. But why in two variants you ask? A legitimate question, but one that we will be answering this within the article. Ok, the two downloads have been completed. Now we can proceed to the next step: the editing of the photos. This is necessary because the authors hand in their screenshots in JPG files as well as in PNG files. That is why I need the HTML download. Each article is located in a separate folder, so I can easily get the pictures from the “images” folder. Because we want our Full Circle Magazine Mobile Edition to be as small as possible, we have decided to minimize the images within the articles to a maximum height of 300 pixels.
Bon ! Commençons tout de suite ! Dès réception du mail de Ronnie m'informant que les articles sont disponibles au téléchargement sur G-Docs, je les télécharge, normalement dans deux formats : ODT et HTML.
Mais, dites-vous, pourquoi dans deux formats ? C'est une question légitime, à laquelle je répondrai dans cet article.
OK, les deux téléchargements sont terminés. Nous pouvons maintenant passer à l'étape suivante : les retouches photos. Ceci est nécessaire parce que les auteurs soumettent leurs captures d'écran dans des fichiers JPG, ainsi que dans des fichiers PNG. C'est pour cela que j'ai besoin du téléchargement HTML. Chaque article se trouve dans un dossier distinct et je peux facilement récupérer les photos du dossier « images ».
Puisque nous voulons que l'édition mobile du magazine Full Circle soit aussi réduite que possible, nous avons décidé de minimiser les images à l'intérieur des articles à une hauteur maximum de 300 pixels.
To achieve this, I use the software “IrfanView”. I open the file, use ctrl + r for resizing, and thereafter ctrl + s for saving as PNG. When I'm done, I must make one final preparation before I can begin the “real” work, the layout of the EPUB edition. But before I continue here, I would like to make a short detour. As mentioned earlier, we create our issues of FCM with a program called Sigil. A short visit with our friend Google will tell you that this is a so-called WYSIWYG (What you see, is what you get) editor. That means that we could – theoretically - create our issues solely with this software. But, if you look closer, you will recognize that the document markup source code is far from good. So I've decided to create the source code in a web editor (I use the editor Scriptly in Windows, and Blue Fish in Linux). For those who are not familiar with HTML Markup Language, there is also Kompozer, available in the Ubuntu Software Center. But enough of theory. Let's get back to the practice.
Pour ce faire, je me sers du logiciel « IrfanView ». J'ouvre le fichier, j'utilise ctrl + r pour redimensionner l'image et, après, ctrl + s pour l'enregistrer sous format PNG.
Quand j'ai terminé, je dois faire un tout dernier préparatif avant de pouvoir commencer le « vrai » travail, c'est-à-dire la mise en pages de l'édition EPUB.
Mais, avant de poursuivre, j'aimerais faire un petit détour. Comme j'ai dit ci-dessus, nous créons nos numéros du FCM avec un logiciel qui s'appelle Sigil. Si vous vous rendez brièvement chez notre ami Google, vous apprendrez que c'est un éditeur WYSIWIG (What you see is what you get ou Ce que vous voyez est ce que vous obtenez). Cela veut dire que, théoriquement, nous pourrions créer les numéros rien qu'avec ce logiciel. Mais si vous regardez de plus près, vous serez d'accord que le code source HTML du document n'est pas bon du tout.
Alors, j'ai décidé de créer le code source dans un éditeur Web (j'utilise Scriptly sous Windows et Blue Fish sous linux). Pour ceux qui ne connaissent pas le HTML, il y a Kompozer, disponible dans la Logithèque Ubuntu.
Mais c'est assez pour la théorie ; revenons à la pratique.
As I addressed earlier, we need one last little thing before we begin the real work. We create a small web project on our computer. What do we need? Three folders and a CSS file: the three folders bearing the following names: a) Images, b) Styles, and c) Texts. The CSS file, inside the Styles folder, we name “fcm-design.css”. Now we have it all together. Let us now have a new file in our Web Editor, which includes the following basic structure: <!DOCTYPE html PUBLIC “-W3CDTD XHTML 1.0 StrictEN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“de” lang=“de”> <head> <title>Title of the FCM Article</title> <link href=“../Styles/fcm-design.css” type=“text/css” rel=“stylesheet” /> </head> <body> </body> </html> As you can see, we link the CSS file directly in HTML style. That's no problem for Sigil. And it makes our job much easier. Ok, then. That is enough theory. Let's layout an article! Comme j'ai signalé un peu plus tôt, nous avons besoin d'un dernier petit truc avant de commencer le véritable travail. Il faut créer un petit projet Web sur notre ordinateur. De quoi a-t-on besoin ? De trois dossiers et d'un fichier CSS : les dossiers sont appelés : a) Images, b) Styles et c) Textes. Le fichier CSS, à l'intérieur du dossier Styles, sera nommé « fcm-design.css ». Nous avons maintenant tout rassemblé. Créons un nouveau fichier dans l'éditeur Web avec la structure de base suivante : <!DOCTYPE html PUBLIC “-W3CDTD XHTML 1.0 StrictEN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“de” lang=“de”> <head> <title>Titre de l'article du FCM</title> <link href=“../Styles/fcm-design.css” type=“text/css” rel=“stylesheet” /> </head> <body> </body> </html> Comme vous pourrez le voir, le fichier CSS est lié directement dans HTML style. Ce n'est pas un problème pour Sigil et cela rend notre boulot beaucoup plus facile. Bien. Assez de théorie. Faisons la mise en page d'un article ! Step # 1 Open your folder with the created “webproject”, your preferred web-editor (like bluefish), and the Article you want to layout in ODT. Why ODT and not the HTML Version? Well, I'll show you. As you can see from the image above, that is one hell of a mess to go through and format into proper HTML source! So Instead we take a clean ODT like the one shown below. That will save us a lot of time. Believe you me! So, with these three things open, we could create a new CSS-File with the Code given in the box below, and start our work. h1.headline { text-align: center; font-size: xx-large; font-family: monospace; font-weight: bold; text-decoration: underline; } p.text { text-align: justify; font-family: Tahoma; font-size:12pt; } div.photos { text-align:center; } These are the most important things you should have in your EPUB-Layout: The Headlines (h1.headline), the Paragraphs (p.text), and a box for screenshots / pictures you would like to insert. I'll skip the details for now, but, if you are interested in learning more about CSS / HTML, Google will show you a lot of good tutorials like SelfHTML.org or W3C. Ok, all things are set: We have our ODT, our editor, our CSS-Design, and our pictures ready. Étape n° 1 : Ouvrez le dossier qui contient le « projet Web » que vous venez de créer, votre éditeur Web préféré (comme BlueFish) et l'article en format ODT dont vous voulez faire la mise en page. Pourquoi la version ODT et non pas HTML ? Eh bien, je vais vous montrer. Comme vous pouvez voir dans l'image ci-dessus, ce serait incroyablement difficile d'analyser ce charabia, puis de le formater en tant que source HTML comme il faut ! À la place, donc, nous prenons un ODT propre comme celui ci-dessous. Cela va nous faire gagner beaucoup de temps. Croyez-moi ! Alors, ces trois éléments étant ouverts, nous pouvons créer un nouveau fichier CSS avec le code ci-dessous, puis commencer notre travail. h1.headline { text-align: center; font-size: xx-large; font-family: monospace; font-weight: bold; text-decoration: underline; } p.text { text-align: justify; font-family: Tahoma; font-size:12pt; } div.photos { text-align:center; } Ce sont les choses les plus importantes qu'il faudrait inclure dans votre mise en page EPUB : les Headlines ou titres (h1.headline), les paragraphes (p.text) et une boîte pour les captures d'écrans/images que vous aimeriez insérer. Je vous passe les détails à ce stade, mais si vous voulez en apprendre davantage sur CDD/HTML, Google vous proposera plein de bons tutoriels comme SelfHTML.org ou W3C. OK, tout est prêt : notre fichier ODT, l'éditeur, notre CSS-Design et nos images sont à portée de main. Step # 2 Now the actual coding begins: for every paragraph in the ODT, I prepare a line with <p class=”text”></p> and duplicate it several times, then I check on how many pictures there are, and insert <div class=”photos”></div> as often as needed. Now we can switch between the ODT and our editor to copy / paste the article into the HTML Source-Code we prepared. And when we are done, it looks like that shown below left. Once I am done copying and have the article ready in HTML Source Code, I start Sigil which looks very similar (right). Let me give you a short introduction into the software: As you can see, we can find our three folders Texts (in the picture referred to as “Text” because I am writing this article from a German system), Styles (“Formatierung”), and Images (“Bilder”) - on the left side. On the Upper Side, you see two buttons marked: the red one is for the source-code-view in the software. This is where you need to copy and paste the HTML source you created in your editor. But before you do this, you'll need to create a new “Section.xhtml” by clicking the blue marked button. Étape n° 2 C'est maintenant que commence le codage : pour chaque paragraphe du document ODT, je prépare une ligne avec <p class=“text”></p> et je la copie plusieurs fois. Puis je vérifie le nombre d'images et j'insère <div class=“photos⇒</div> autant de fois que nécessaire. Ayant fait tout cela, nous pouvons faire des allers-retours entre le document ODT et l'éditeur pour copier/coller l'article dans le code source HTML que nous avons préparé. Quand nous aurons terminé, cela ressemblera à l'image en bas à gauche. Une fois le copier-coller fini et l'article dans le code source HTML, je lance Sigil dont l'apparence est très similaire (à droite). Permettez-moi de vous faire une courte présentation du logiciel. Comme vous pouvez le voir, nous retrouvons les trois dossiers textes (dans l'image il s'appelle « Text », car j'écris cet article sur un système allemand), Styles (« Formatierung ») et Images (« Bilder ») à gauche. En haut, vous voyez deux boutons : le rouge est pour l'affichage du code source. C'est là qu'il faut copier/coller le code source HTML que vous avez créé dans l'éditeur. Mais auparavant, il vous faut créer une nouvelle « Section.xhtml » en cliquant sur le bouton bleu. Step #3 Ok, we have inserted our HTML Code into Sigil. But we forgot one – well, actually two – things that are rather important: our pictures AND our css-file which gives the layout-design to our article. So how do we get those things into Sigil? That is easy: Sigil has a function to include already existing files into the epub-project you are currently working in. Therefore you need to click on the folder “Styles” (“Formatierungen”) or “Images” (“Bilder”) once with your right mouse button, and say “include existing files”. That will open a popup window to enable you to browse to the location of the web project. So! WE ARE DONE! You just finished your first Ebook! Well, not a whole Ebook, but an article inside an Ebook. Just click File ⇒ Save (as) now, and give your Ebook a Title. Étape n° 3 OK, nous venons d'insérer notre code HTML dans Sigil. Mais nous avons oublié une - non, en fait, deux - choses qui sont assez importantes : les images ET notre fichier-CSS qui fournit la mise en page de notre article. Alors comment importer ces choses dans Sigil ? C'est facile : Sigil a une fonction pour inclure des fichiers existants dans le projet epub sur lequel vous êtes en train de travailler. Vous devez donc faire un seul clic droit sur le dossier « Styles » (« Formatierungen ») ou « Images » (« Bilder ») et indiquer « inclure les fichiers existants ». Une fenêtre s'affichera pour vous permettre de parcourir votre disque jusqu'à l'emplacement du projet Web. Et voilà ! Nous avons terminé ! Vous venez de créer votre premier livre électronique ! D'accord, pas un e-book en entier, mais un article à l'intérieur d'un e-book. Maintenant, il suffit de cliquer sur Fichier > Enregistrer sous.. et donner un titre à votre livre électronique. Conclusion For those of you who want a short list to work with, here are the most important things: a) Resize your pictures to max. 300 px of height (more is not recommended here!) b) Collect all Content in Plain Text c) Create a “web-project” with three folders named: “Images”; “Styles” and “Texts” d) Create a CSS-Design for your Ebook (For Help, see the W3C Short Reference via Google) e) Prepare a first (x)html Page with some <p> and <div> for Text and pictures Conclusion Pour ceux qui veulent pouvoir travailler avec une courte liste des tâches à faire, voici les choses les plus importantes : a) Redimensionnez vos images à une hauteur de 300 pixels maximum (il n'est pas recommandé d'en mettre plus ici !). b) Rassemblez tout le contenu sous format texte. c) Créez un « projet Web » qui contient trois dossiers : « Images », « Styles » et « Textes ». d) Créez un fichier CSS de mise en page (Css-Design) pour votre livre électronique (Si vous avez besoin d'aide, voyez la W3C Short Reference via Google). e)Préparez une première page (X)HTML avec quelques <p> et <div> pour le texte et les images. f) Copy all the Content into the <p>-tags, and link your pictures from the “Images”-folder into the <div>. g) Start Sigil and prepare some “Section.xhtml” chapters. h) Copy and paste the generated HTML-Source Code from your Web-Editor into the Code-View of Sigil. i) Include your CSS File (into the “Styles”-Folder of Sigil) and Pictures (into the “Images-Folder of Sigil). j) Save your Ebook DONE f) Copiez tout le contenu à l'intérieur des balises <p> et liez les images dans le dossier « Images » au <div>. g) Lancez Sigil et préparez quelques chapitres « Section.xhtml ». h) Copier/coller le code source HTML que vous aurez généré à partir de l'éditeur Web dans le « Code-View » (affichage du code) de Sigil. i) Incluez votre fichier CSS (dans le dossier « Styles » de Sigil) et vos images (dans le dossier « Images » de Sigil). j) Enregistrer votre livre électronique. C'EST FINI. Now you have a short insight into what I do every month to provide you an epub of Full Circle. I hope you enjoyed the article and will enjoy many issues of FCM as an e-publication! For now, I need to get to work converting this issue. But you can read the links I've included below. And, if there are any questions, please don’t hesitate to drop me an email to mobile@fullcirclemagazine.org! Useful Links: web.sigil.googlecode.com/git/intro.html#linux web.sigil.googlecode.com/git/toc_editor.html web.sigil.googlecode.com/git/contents.html Vous avez maintenant un bref aperçu de ce que je fais chaque mois pour vous fournir le Full Circle en format epub. J'espère que l'article vous a plu et que vous prendrez plaisir à lire de nombreux numéros du FCM dans ce format ! Pour l'heure, je dois me mettre à la conversion de ce numéro-ci. Mais vous pouvez lire les pages dont les liens suivent. Et, si vous avez des questions, n'hésitez pas à m'envoyer un mail à mobile@fullcirclemagazine.org ! Liens utiles : web.sigil.googlecode.com/git/intro.html#linux web.sigil.googlecode.com/git/toc_editor.html web.sigil.googlecode.com/git/contents.html