Différences

Ci-dessous, les différences entre deux révisions de la page.

--- numero61:mon_histoire_p._38-41 [2012/06/13 11:56] – auntiee
+++ numero61:mon_histoire_p._38-41 [2012/06/15 15:15] (Version actuelle) – andre_domenech
@@ Ligne 9: / Ligne 9: @@
 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, nos chers lecteurs, vous puissiez lire le magazine Full Circle sur votre tablette et vos appareils Android.
+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 :
+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
+* IrfanView ;
-* un éditeur de texte web
+* un éditeur de texte web ;
-* Sigil
+* 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 ?
+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.
@@ Ligne 29: / Ligne 29: @@
 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.
+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 ».
@@ Ligne 47: / Ligne 47: @@
 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 page de l'édition EPUB.
+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.
+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.
+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".
+**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:
@@ Ligne 73: / Ligne 73: @@
 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!
+Ok, then. That is enough theory. Let's layout an article!**
-Step # 1
+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 "-//W3C//DTD XHTML 1.0 Strict//EN"
+"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.
@@ Ligne 105: / Ligne 124: @@
 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.
+Ok, all things are set: We have our ODT, our editor, our CSS-Design, and our pictures ready. **
-Step # 2
+É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.
@@ Ligne 117: / Ligne 169: @@
 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.
+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.**
-Step #3
+É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.
+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.**
-Conclusion
+É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:
@@ Ligne 137: / Ligne 207: @@
 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
+e) Prepare a first (x)html Page with some <p> and <div> for Text and pictures**
-f) Copy all the Content into the <p>-tags, and link your pictures from the “Images”-folder into the <div>
+Conclusion
-g) Start Sigil and prepare some “Section.xhtml” chapters
+Pour ceux qui veulent pouvoir travailler avec une courte liste des tâches à faire, voici les choses les plus importantes :
-h) Copy and paste the generated HTML-Source Code from your Web-Editor into the Code-View of Sigil
+a) Redimensionnez vos images à une hauteur de 300 pixels maximum (il n'est pas recommandé d'en mettre plus ici !).
-i) Include your CSS File (into the “Styles”-Folder of Sigil) and Pictures (into the “Images-Folder of Sigil)
+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
+DONE**
-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!
+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