EPUB - a workshop for beginners

  • 813 views
Uploaded on

Presented at the ADL Working Group Meeting. Vienna, Austria: 11/06/2012

Presented at the ADL Working Group Meeting. Vienna, Austria: 11/06/2012

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
813
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
43
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. EPUB a Workshop by Beat Oderbolz
  • 2. Standard from the IDPF (International Digital Publishing Forum) An arrangement of several other standards, mainly: XHTML, CSS, XML and some more. 3 parts, addressing • Content (OPS - Open Publication Structure) • Package Metadata (OPF - Open Packaging Format) • Archive (OCF - OEBPS Container Format) It is powerful, straightforward, and non-proprietary What is EPUB?
  • 3. + Mimetype + META-INF + OEBPS EPUP - Structure Text file: “application/epub+zip” - Folder - Folder (Open eBook Publication Structure) TASKS • Get the file Example.epub from the folder Workpackage-EPUB. • Change its extension from .epub to .zip • Expand it – open the expanded folder.
  • 4. + Mimetype + META-INF + container.xml + OEBPS EPUP - Structure Text file: “application/epub+zip” - Folder Points to the content.opf file - Folder (Open eBook Publication Structure)
  • 5. + Mimetype + META-INF + container.xml + OEBPS + content.opf + toc.ncx + Text + Images + Styles EPUP - Structure Text file: “application/epub+zip” - Folder Points to the content.opf file - Folder (Open eBook Publication Structure) Metadata, file manifest, linear reading order (spine) Hierarchical Table of Contents - Folder - Folder - Folder
  • 6. + Mimetype + META-INF + container.xml + OEBPS + content.opf + toc.ncx + Text + chapter_001.xhtml + chapter_002.xhtml + chapter_003.xhtml + … + Images + image_001.png + image_002.jpg + image_003.gif + … + Styles + styles.css EPUP - Structure Text file: “application/epub+zip” - Folder Points to the content.opf file - Folder (Open eBook Publication Structure) Metadata, file manifest, linear reading order (spine) Hierarchical Table of Contents - Folder Chapters (xhtml files) - Folder Pictures (png / jpg / gif) - Folder CSS Stylesheet(s)
  • 7. EPUB - Sigil
  • 8. EPUB - Sigil TASKS •Please open the file Example-for-Sigil.epub in Sigil •Confirm that it contains: •3 chapters •1 big image in the first chapter, 1 small image in the second •1 stylesheet linked to the chapters
  • 9. The general form of an HTML element <tag attribute1="value1" attribute2="value2">content</tag> <a href=http://www.w3schools.com target="_blank">link</a> CSS - Cascading Style Sheets selector { property1: value1; property2: value2; ...; propertyn: valuen; } EPUB – Sigil, HTML & CSS p { font-weight: bold; margin-left: 1em; margin-right: 1em; text-align: justify; }
  • 10. EPUB – Sigil, HTML & CSS www.w3schools.com HTML / HTML5 / CSS / JavaScript / XML / … Tutorials & References O’Reilly Pocket References For HTML/XHTML and CSS
  • 11. EPUB – Sigil, HTML & CSS TASKS Make the following changes to the EPUB: • Change the color of the <h1> tag • Reduce the indent of the main text to zero • In the stylesheet, create a class .bold (use .italic as basis) • Change all text in italic to bold • Create your own class(es) and use them on the content
  • 12. 3 basic possibilities: - Write directly into Sigil - Copy / Paste - Import HTML file EPUB – Getting Text into Sigil
  • 13. EPUB – Getting Text into Sigil TASKS • Open the folder Import into Sigil • Copy/paste the text of the first page of the pfd-file A short History of NATO.pdf into the chapter section0003.xhtml • Import the html-file NATO – The Washington Treaty.html into your eBook
  • 14. • Clear out unnecessary code and text • Link the stylesheet into your new chapter • Headlines inside the correct <h> tags • Body-text inside <p> tags (no <div>, no <span>) • Format the text using the stylesheet formats • Add formats to the stylesheet if needed • Validate your EPUB and fix Errors EPUB – Cleaning up & Formating
  • 15. EPUB – Cleaning up & Formating TASKS Clean up the code of the two imports and reformat it. 1. Clear out unnecessary code and text 2. Link the stylesheet into your new chapter(s) 3. Headlines inside the correct <h> tags 4. All Body-text inside <p> tags (no <div>, no <span>) 5. Format the text using the stylesheet formats 6. Add formats to the stylesheet if needed 7. Validate your EPUB and fix Errors
  • 16. EPUB formating is like HTML coding in the early days… …only worse.
  • 17. EPUB – The Golden Rule of Formating Keep it simple! Stay away from elaborate design ideas Use a stylesheet with a limited set of styles Clean code is nice code
  • 18. • Pictures / Coverpage • Creating a TOC • Metadata • Advanced Stuff • Embedding Fonts • Using EPUB3 EPUB – Sigil: the Remains of the Day…
  • 19. EPUB – Sigil: the Remains of the Day… TASKS • Import the pictures sign_warning.png & IntroToEPUB-Cover.png into Sigil • Use sign_warning.png somewhere in your eBook: aligned on the left side, with text floating around it. • Use IntroToEPUB-Cover.png as a Cover Image for your eBook • Enter some more titles - <h1>, <h2> and <h3> and create a TOC • Enter the mandatory metadata
  • 20. Or: How to get your eBook onto reading devices EPUB - Distribution
  • 21. www.w3schools.com HTML / HTML5 / CSS / JavaScript / XML / … Tutorials & References Resources… http://code.google.com/p/sigil/ Multi-platform EPUB ebook editor «Sigil» Download & Documentation http://calibre-ebook.com/ Multi-platform and open source e-book format conversion & library management application «Calibre» Download & Documentation