Différences

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

--- numero61:mon_histoire_p._38-41 [2012/06/15 12:37] – andre_domenech
+++ numero61:mon_histoire_p._38-41 [2012/06/15 15:15] (Version actuelle) – andre_domenech
@@ 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!