EPUB
a Workshop
by Beat Oderbolz
Standard from the IDPF (International Digital Publishing Forum)
An arrangement of several other standards, mainly:
XHTML, ...
+ Mimetype
+ META-INF
+ OEBPS
EPUP - Structure
Text file: “application/epub+zip”
- Folder
- Folder (Open eBook Publication...
+ Mimetype
+ META-INF
+ container.xml
+ OEBPS
EPUP - Structure
Text file: “application/epub+zip”
- Folder
Points to the co...
+ Mimetype
+ META-INF
+ container.xml
+ OEBPS
+ content.opf
+ toc.ncx
+ Text
+ Images
+ Styles
EPUP - Structure
Text file:...
+ Mimetype
+ META-INF
+ container.xml
+ OEBPS
+ content.opf
+ toc.ncx
+ Text
+ chapter_001.xhtml
+ chapter_002.xhtml
+ cha...
EPUB - Sigil
EPUB - Sigil
TASKS
•Please open the file Example-for-Sigil.epub in Sigil
•Confirm that it contains:
•3 chapters
•1 big ima...
The general form of an HTML element
<tag attribute1="value1" attribute2="value2">content</tag>
<a href=http://www.w3school...
EPUB – Sigil, HTML & CSS
www.w3schools.com
HTML / HTML5 / CSS / JavaScript / XML / …
Tutorials & References
O’Reilly Pocke...
EPUB – Sigil, HTML & CSS
TASKS
Make the following changes to the EPUB:
• Change the color of the <h1> tag
• Reduce the ind...
3 basic possibilities:
- Write directly into Sigil
- Copy / Paste
- Import HTML file
EPUB – Getting Text into Sigil
EPUB – Getting Text into Sigil
TASKS
• Open the folder Import into Sigil
• Copy/paste the text of the first page of the pf...
• Clear out unnecessary code and text
• Link the stylesheet into your new chapter
• Headlines inside the correct <h> tags
...
EPUB – Cleaning up & Formating
TASKS
Clean up the code of the two imports and reformat it.
1. Clear out unnecessary code a...
EPUB formating is like HTML
coding in the early days…
…only worse.
EPUB – The Golden Rule of Formating
Keep it simple!
Stay away from elaborate design ideas
Use a stylesheet with a limited ...
• Pictures / Coverpage
• Creating a TOC
• Metadata
• Advanced Stuff
• Embedding Fonts
• Using EPUB3
EPUB – Sigil: the Rema...
EPUB – Sigil: the Remains of the Day…
TASKS
• Import the pictures sign_warning.png & IntroToEPUB-Cover.png
into Sigil
• Us...
Or: How to get your eBook onto reading devices
EPUB - Distribution
www.w3schools.com
HTML / HTML5 / CSS / JavaScript / XML / …
Tutorials & References
Resources…
http://code.google.com/p/sig...
Upcoming SlideShare
Loading in...5
×

EPUB - a workshop for beginners

1,137

Published on

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

Published in: Education, Technology

Transcript of "EPUB - a workshop for beginners"

  1. 1. EPUB a Workshop by Beat Oderbolz
  2. 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. 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. 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. 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. 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. 7. EPUB - Sigil
  8. 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. 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. 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. 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. 12. 3 basic possibilities: - Write directly into Sigil - Copy / Paste - Import HTML file EPUB – Getting Text into Sigil
  13. 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. 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. 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. 16. EPUB formating is like HTML coding in the early days… …only worse.
  17. 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. 18. • Pictures / Coverpage • Creating a TOC • Metadata • Advanced Stuff • Embedding Fonts • Using EPUB3 EPUB – Sigil: the Remains of the Day…
  19. 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. 20. Or: How to get your eBook onto reading devices EPUB - Distribution
  21. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×