Courses/Hybrid publishing/Q8

From Publication Station

<slidy theme="a" />

Professional development workshop on Hybrid Publishing

practicals

Plan

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


publishing in WdKA

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

Multipleouptus.svg

Print book Electroni book ebook trailer

Ebook trailer of From Print to Ebooks

Tools for hybrid publishing

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


Hands-on exploration of strategies and tools

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: [1] 

# 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



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

Pandoc diagram.png



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 -o 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;
  • -o - option for file output

editing the HTML file

Add a CSS file [2] to the HTML file, so it can be styled

Here I'll be adding the file style.css: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="pandoc">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

      <link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
  <h1>my html file</h1>
</body>
</html>

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 CSS to make different sketches for the digital (html) identity of this book
  • convert it to: an HTML & 1 ICML (import it into inDesign):
  • use inDesign styles to create different sketches of the paper identity of this book

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;


  1. ↑ Markdown Syntax in http://daringfireball.net/projects/markdown/syntax
  2. ↑ Learn more on CSS in the pages: Courses/Design & Technique-Essential Web Design/03, Courses/Design & Technique-Essential Web Design/04
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Hybrid_publishing/Q8&oldid=3374’