Courses/Hybrid publishing/Q8

Professional development workshop on Hybrid Publishing

practicals

• planning page: https://mywdka.nl/15kw8go/onderwijsenlesaanbod/planning/#post-7
• Room: BL.00.10a

• Reading List
  • From Print to Ebooks: a Hybrid Publishing Toolkit for the Arts
    • chapters 02,
    • chapert 6.3 3. "Do-it-yourself EPUB using Pandoc"

• Publications we'll work on:
  • repository: https://github.com/wdka-publicationSt/editorial_design/
  • zip: https://github.com/wdka-publicationSt/editorial_design/archive/master.zip

• software used (download to your computer):
  • Calibre,
  • Pandoc download for mac,
  • plain-text editors ( Sublime Text, Gedit )
  • Xcode (mac)

Plan

• Presentations
• Hybrid publishing
• concepts,
• examples
• formats (markups)
• tools and strategies

publishing in WdKA

• hybrid publishing as an extension of efforts from Publication station - establishing dialog between analog & digital
• continuation of Alessandro Ludovico's research on Post-Digital Print at WdKA
• continuation of Digital Publishing Toolkit project & From Print to Ebooks – a Hybrid Publishing Toolkit for the Arts
• publishing as a way to expose the research undertaken within WdKA
• publishing as a learning tool

hybrid publication?

A publication that inhabits both analog and digital worlds.

hybrid publishing works

Traumawien [1] [2] http://rlv.zcache.com/traumawien_button-rb0a7981400224870838ec6aaa582161c_x7j3i_8byvr_512.jpg

Badlands Unlimited http://badlandsunlimited.com/wp-content/uploads/2013/06/book_small.gif http://badlandsunlimited.com/books/phaedrus-pron/

Books Scapes, Julien Levesque, 2012

http://p-dpa.net/wp-content/uploads/2015/03/Screen-Shot-2014-02-15-at-17.17.18-600x150.png

E-Book Backup, Jesse England, 2012

http://p-dpa.net/wp-content/uploads/2015/03/9_ebookbackup4-300x225.jpg

More hybrid publishing works in Post-Digital Publishing Archive

Publications we'll work on

repository: https://github.com/wdka-publicationSt/editorial_design/ zip: https://github.com/wdka-publicationSt/editorial_design/archive/master.zip

• Radical Tactics of the Offline Library - Henry Warwick
• The Radiated Book - ed. Femke Snelting
• About Bugs Bots & Bytes - Hackers & Designers

Multichannel publishing workflows

• ePub
• PDF (print book)
• website
• ebook trailer

Ebook trailer of From Print to Ebooks

Tools for hybrid publishing

open source, simple tools that work in combination, forming publishing pipelines

• Calibre
• Pandoc
• [3]

plain text files

Are only constituted by text. No images, no visual markings.

Are edited using plain text editors and NOT word processors.

Can be displayed using the terminal cat myfile.txt will print the content of myfile.txt

Markings are done using special (meta)characters

Historical examples of plain text file undeground publishing

Markups languages

Markups languages are ways of marking text, giving with words specific hierarchical and visual rendering.

By marking the text according to markup languages it is possible to:

• add reading aids, such bold, italic, blockquotes
• add a clear text hierarchy: section titles, sub-section titles, sub-sub-sub section titles
• convert between different markup languages - as they mostly compatible

Markup languages examples

Each markup uses a different markings

HTML:

<h1>Revenge of the Text</h1>
 <p>There is a room in the <strong>Musée d’Orsay</strong> that I call the <em>room of possibilities</em>.</p>
 <p>That room contains:</p>
 <ul>
  <li>a snow flake</li>
  <li>the end of a cloud</li>
  <li>a bit of nothing</li>
 </ul>

Markdown:

# Revenge of the Text
There is a room in the **Musée d’Orsay** that I call the *room of possibilities*.

That room contains:
* a snow flake
* the end of a cloud
* a bit of nothing

Wiki markup:

= Revenge of the Text =
There is a room in the '''Musée d’Orsay''' that I call the ''room of possibilities''.

That room contains:
* a snow flake
* the end of a cloud
* a bit of nothing

Why Markdown ?

• simple
• only one way to create a structure
• compatible with HTML, but easier to read and write
• allows the inclusion of HTML tags.
• any plain text editor such as Sublime Text or Gedit can edit Markdown files.
• there are WYSIWYG Markdown editors such as MacDown.

How to write in Markdown http://daringfireball.net/projects/markdown/syntax

Hands on

• download the repository of texts for this project: https://github.com/wdka-publicationSt/editorial_design/archive/master.zip
• unzip
• from all its files there choose 1 file, you'll be working on, for today
• copy it to a folder dedicated to today's class
• open in a text editor: sublime, gedit,etc
• Look at the markdown syntax

Pandoc - a markup converter

If you need to convert files from one markup format into another, Pandoc is your swiss-army knife. But it runs on the command line.

With Pandoc is possible to convert between different formats:

For instances: docx <-> markdown <-> html







Command Line or Shell

• a text-based interface to your computer's file system
• popularized before the period of personal computers,
  • when computers where shared (time-sharing) by many users
  • accessed by a dumb terminal (screen and keyboard interface to the main computer) File:Dumbterminal.jpg
• centeral to UNIX and descendant operating systems: Linux, Mac
• constituted by small programs that do one thing only and well

Command line cheat-sheet

CORE COMMANDS

cd [folder]	Change directory
~/	shortcut for your home directory. ~/Documents, ~/Downloads, ~/Desktop
cd ~	Change to Home directory, e.g. ‘cd ~/Documents/’
cd /	Root of drive
	‘cd ../’ = Move 1 level up
	‘cd ../../’ = Move 2 levels up
ls	List files and folder inside current folder
pwd	Full path to working directory
cat [file]	print content (concatenate) of file to screen
less [file]	read into content (concatenate) of file to screen
rm [file]	Remove a file, e.g. rm [file] [file]
rm -r [dir]	Remove a directory and contents
cp [file] [newfile]	Copy file to file
cp [file] [dir]	Copy file to directory
mv [file] [new filename]	Move/Rename file or dirtory, e.g. mv -v [file] [dir]
clear	Clear screen

COMMAND HISTORY

history

Shows the stuff typed previously

DIRECTORY MANAGEMENT

mkdir [dir]	Create new directory
mkdir -p [dir]/[dir]	Create nested directories
rmdir [dir]	Remove directory ( only operates on empty directories )
rm -R [dir]	Remove directory and contents

PIPES - Allows to combine multiple commands that generate output

more	Output content delivered in screensize chunks
> [file]	Push output to file, keep in mind it will get overwritten
>> [file]	Append output to existing file
<	Tell command to read content from a file

HELP

man [command]	Show the manual for ‘command’
whatis [command]	Gives a one-line description of ‘command’
[command] -h	Offers help
[command] —help	Offers help
[command] help	Offers help
reset	Resets the terminal display

~ from Terminal_cheat_sheet

Command line exercise

create directory Game: mkdir ~/Documents/Game

write to file: echo 'Can you find me?'> ~/Documents/Game/caca.txt

Now, using only the command line, you have to :

• change to directory Game, which is inside Documents
• copy the file caca.txt from the Game folder to the Desktop

Pandoc - Convert from Markdown to HTML

pandoc --from markdown --to html5 --standalone input.mw --css style.css --output output.html

• --from - option: format to convert “from”;
• --to - option: format to convert “to”;
• --standalone - option: standing for “standalone”, produces HTML file with an appropriate html, head, body tags;
• --css - option: option for CSS style file
• --output - option for file output

on EPUB and HTML

The EPUB format is essentially a bundled archive of HTML files.

To try out sketches for the identity of an EPUB, it is simpler to:

• use a HTML file instead of an EPUB
• use a CSS file - for style
• try out the sketches using the CSS

Pandoc - converting to ICML

ICML is a (XML based) file format, from InCopy(Adobe’s own text processor), which can be imported into Adobe InDesign, and maintain its structures (bolds, italics, section titles), etc.

pandoc --standalone --from markdown --to icml input.html --output=ouput.icml

Importing ICML to inDesign

• import ICML file to a InDesign project with: File > Place
• Its paragraph and chapter styles remain intact:
• Images are given an empty placeholder.

Design with Styles in inDesign

Style the content only using paragraph and character styles.

Paragraph/Characters styles are in: Type > Paragraph/Character Styles

Updating content in inDesign

If you don't change the content inside a inDesign project.

• the ICML remains linked to the inDesign project,
• changes: in the performed on Markdown source file will be integrated into the inDesign project.

Pandoc - converting to ePub

Simple:

pandoc --from html --to epub3 input.html --output=mybook.epub

Advanced (including stylesheet, cover image, chapter level ):

pandoc --from html --to epub3 input.html --output=mybook.epub --epub-stylesheet=styles.css --epub-cover-image=cover.jpg --epub-chapter-level=1

• --epub-stylesheet - CSS file that will style the Epub
• --epub-cover-image - cover file - can either be .jpg or .png
• --epub-chapter-level - at what heading level will the chapter brakes occur

ASSIGNMENT

For May 27:

Choose 1 publication (does not have to be the final one you'll work with) from the 3 possible publications in https://github.com/wdka-publicationSt/editorial_design/archive/master.zip

Using at least 1 file from the chosen publication

• convert it to: an HTML file
  • use CSSing to make different sketches for the digital (html/epub) publication this book

• convert it to: an ICML file (to be Place in inDesign):
  • using inDesign paragraph and chapter styles: create different sketches for the paper publication.

These sketches will be the starting points for the publication you will develop during the quarter 8.

Bring these sketches to next class, on May 27;

---

Day 2

Revision: 1 source many outputs

1 source many outputs

3 Conversions - using Pandoc

pandoc input.md --from markdown --to html5 --standalone --css style.css --output output.html

• markdown (source) -> HTML (website)
  • using CSS

• markdown (source) -> ICML (PDF of paper book)
  • to be used with inDesign styles

pandoc input.md --from markdown --to icml --standalone --output=ouput.icml

• markdown (source) -> epub3 (ebook)
  • Simple:

pandoc input.md --from markdown --to epub3 --output=mybook.epub

• • using CSS and cover image

pandoc input.md --from markdown --to epub3 --epub-stylesheet=styles.css --epub-cover-image=cover.jpg --output=mybook.epub

options

• --from - option: format to convert “from”;
• --to - option: format to convert “to”;
• --standalone - option: standing for “standalone”, produces HTML file with an appropriate html, head, body tags;
• --css - option: option for CSS style file
• --output - option for file output
• --epub-stylesheet - option for CSS style file in ePub
• ----epub-cover-image - option for cover img in ePub

---

streamlining conversions

This same approach for converting between markups using Pandoc can be automated.

Since computers are good at doing repetitive and boring tasks, we can take advantage from it.

We can store commands in scripts and have them perform the same task on multiple source files, producing multiple outputs (E.G. EPUB, ICML, HTML).

Overview

In this process, from several .docx files we'll try to create two outputs:

• an ICML file for inDesign
• an EPUB

And we'll also try to keep a connection between the source and its outcomes.

Makefile

My proposal involves using a Makefile to automate the conversions between markups.

They are like recipe book, with instructions of how to process stuff and generate other stuff from it.

Read more about Makefiles in the context of hybrid publishing:

• blog post Make Book by Michael Murtaugh
• Report on the Don Marti's presentation at SCALE
• GNU Make official site

---

Recipe Preparation

Download Hybrid Publishing Resources

• Download the zip from Hybrid Publishing Resources code repository to your computer.
• Move the downloaded .zip to a dedicated folder.
• Unzip
• In terminal change directory cd to the unzip folder

---

Start Cooking

0. Folder structure

To create folder structure, which will be understood by the scripts from this repository, you need to run:

make folders

This script will generate the following folder structure, which you'll use to store the files essentially for the creation of the EPUB.

├── docx 
├── epub 
├── icml 
├── md 
│   └── imgs 
└── scripts

1. Manuscript: .docx

This is a preparatory stage. Yet it is important for the series of conversions that will lead to the different publication's outputs.

You need to edit the manuscript, handed by the author, using paragraph styles in MS Word/Libre Office/Open Office

2. Source: converting the manuscript files to Markdown files

Run: make markdowns to start this stage.

This command will convert all the .docx files inside the docx/folder into corresponding markdown files inside md/ folder.

The resulting markdown files are the source files, from which all of the publication's outputs will be generated.

2.1 Images in Markdown

At this stage you should insert the images onto the texts, now in markdown format.

First of all, you need to save all the images included in the essays in the folder md/imgs/ Then place the images on the markdown document: ![My image caption](imgs/myImage.jpg)

Don't forget to include captions, if the image has them. Markdown captions will become visible, and associated to the image in the EPUB output.

3. make icmls - ICML files for inDesign

Run: make icmls to start this stage.

The individual Markdown source files, stored in md/, can be converted into ICML files which can be imported into inDesign.

Read more on ICML files and inDesign in #working_with_ICML_files section

4. make book.epub

4.0 make book.md

You don't have to perform this step, the makefile does it for you.

It generates a single Markdown file book.md and save it it inside the md/ folder.

book.md consists of the content from all the individual Markdow files inside the md/ folder, in alphabetical order (00 to ZZ).

If you want to change the order the publication, you can change the filenames in order to do so.

Markdown filenames should NOT contain spaces or dots, except for the extension .md

4.1 make book.epub (EPUB)

Produce the epub file: make book.epub

4.1.1 Essential files for EPUB

To produce an EPUB a few files are needed, namely:

• cover image epub/cover.jpg
• metadata epub/metadata.xml
• CSS stylesheet epub/styles.epub.css

These files will strongly influence the EPUB's outcome, and consequently should be edited for each publication.

4.1.2 Fonts (optional) for EPUB

lib/ is folder for storing custom fonts, that will be used in the EPUB

If you choose to use fonts, make sure to change the makefile to include the use of fonts in the makefile epub rule, such as in the rule bellow, where --epub-embed-font=lib/UbuntuMono-B.ttf \ is added to allow for the use of the Ubuntu Mono font. Also include the font on the EPUB style-sheet with @font-face rule

4.1.3 EPUB check

The health of the created EPUB can be checked with http://validator.idpf.org/

4.1.5 make book.epub : An iterative process

This work is in many way as cyclical process, where you work in circles: changing the source files (markdown files, the EPUB's stylesheet, the EPUB's metadata) and seeing the results of those changes in Calibre (or other ebook-viwerer)

---

ICML files

ICML files are useful, since they ensure that the structural information of the Markdown source files is also present in the inDesign projects, which use them.

With ICML it is also possible to update the content and structure of the inDesign projects, by changing the Markdown source files, converting the once more to ICML. For this to happens is however necessary that inDesign remains linked to its source, and that the designers works with paragraph and chapter styles, instead of directly into the text.

Note: malformatted links in the markdown files will create problems when imported into inDesign.

Place ICMLs

Open inDesign and ...

Place your output.icml in a inDesign project.

The Place function is in: File > Place (shortcut: Apple+D)

Design with Styles

Style the content using paragraph and character styles.

Paragraph/Characters styles are in: Type > Paragraph/Character Styles

ICML Content updates

Using Sublime Text, edit one ICML file adding some text to it.

See the content being updated in inDesign.

Hands off content

In in inDesgin content shall remain untouched until the last moment

If you change the content of the articles inDesign, the link between the inDesign content and its source ICML file will be lost, and it no longer be able to be updated.

This "disconnection" should only be the last step to be done on your design workflow.

Hybrid Publishing Resources

An easier way to automate the process of converting and updating the content, style or metadata of a publication.

• using calibre viewer, also as prototyping tool
• using calibre editor to change

Todo

fix links and dowload images from Mondotheque