Ceci est une ancienne révision du document !
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, nos chers lecteurs, vous puissiez lire le magazine Full Circle sur votre tablette et les 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 à comprendre mon travail, au moins un peu. Ainsi, dans cet article, je vais décrire un exemple : l'émergence d'un article au sein du fichier EPUB. Et quel meilleur article que celui de Ronnie dans ce numéro anniversaire ?
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.
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.
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! 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. 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. 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. 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 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 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