Différences

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

--- numero61:mon_histoire_p._38-41 [2012/06/13 17:40] – 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.
@@ Ligne 75: / Ligne 75: @@
 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 ».
+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 :
+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"
@@ Ligne 128: / Ligne 128: @@
 É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.
+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 !
@@ Ligne 155: / Ligne 155: @@
-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 stand, mais si vous voulez en apprendre davantage sur CDD/HTML, Google vous proposera plein de bons tutoriels comme SelfHTML.org ou W3C.
+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.
@@ Ligne 173: / Ligne 173: @@
 Étape n° 2
-C'est maintenant que commence le codage : pour chaque paragraphe du 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.
+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 aller-retour entre le ODT et l'éditeur pour copier/coller l'article dans le code source HTML que nous avons préparé.
+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.
@@ Ligne 181: / Ligne 181: @@
 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.
+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
@@ Ligne 191: / Ligne 191: @@
 É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 existant 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.
+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.
+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
@@ Ligne 211: / Ligne 211: @@
 Conclusion
-Pour ceux qu'ils veulent pouvoir travailler avec une courte liste des tâches à faire, voici les choses les plus importantes :
+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 !)
+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
+b) Rassemblez tout le contenu sous format texte.
-c) Créez un « projet web » qui contient trois dossiers : « Images », « Styles » et « Textes »
+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)
+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
+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>
+**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
+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
+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)
+i) Include your CSS File (into the “Styles”-Folder of Sigil) and Pictures (into the “Images-Folder of Sigil).
 j) Save your Ebook
@@ Ligne 235: / Ligne 235: @@
 DONE**
-f) Copiez tout le contenu à l'intérieur des balises <p> et liez les images dans le dossier « Images » au <div>
+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 »
+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
+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)
+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
+j) Enregistrer votre livre électronique.
-C'EST FINI
+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!