Editing Courses/Hybrid publishing/Q8


__TOC__

<div style="background:#ABE9F4;width:70%; padding:3px"> 
'''Professional development workshop on Hybrid Publishing''' 
==practicals==
* planning page: https://mywdka.nl/15kw8go/onderwijsenlesaanbod/planning/#post-7
* Room: [https://wdka.asimut.net/public/index.php?dato=20160527&akt=vislokale&id=81 BL.00.10a]

* Reading List
** [http://networkcultures.org/blog/publication/from-print-to-ebooks-a-hybrid-publishing-toolkit-for-the-arts/ 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)''':
** [http://calibre-ebook.com/ Calibre], 
** [http://pandoc.org/ Pandoc] [https://github.com/jgm/pandoc/releases/download/1.17.0.2/pandoc-1.17.0.2-osx.pkg  download for mac], 
** plain-text editors ( [http://www.sublimetext.com/ Sublime Text], [https://wiki.gnome.org/Apps/Gedit Gedit] )
** [https://developer.apple.com/xcode/download/ Xcode]  (mac)
</div>

== 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 &amp; digital 
* continuation of [http://monoskop.org/log/?p=4165 Alessandro Ludovico's research on Post-Digital Print at WdKA]
* continuation of Digital Publishing Toolkit project &amp; [http://www.publishinglab.nl/blog/publication/from-print-to-ebooks-a-hybrid-publishing-toolkit-for-the-arts/ 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==
[http://traumawien.at/prints/ Traumawien]
[http://www.zazzle.com/traumawien]
[http://traumawien.at/ghostwriters/]
http://rlv.zcache.com/traumawien_button-rb0a7981400224870838ec6aaa582161c_x7j3i_8byvr_512.jpg

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

[http://www.julienlevesque.net/books-scapes/ 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

[http://p-dpa.net/work/e-book-backup/ E-Book Backup], Jesse England, 2012

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


<small>More hybrid publishing works in [http://p-dpa.net/work/books-scapes/ Post-Digital Publishing Archive]</small>


==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  

[[File:multipleouptus.svg|500px]]

[[File:From_Print_to_Ebooks-print.jpg|300px|Print book]] [[File:From_Print_to_Ebooks-ebook.jpg|300px|Electroni book]] [[File:Trailer-From_Print_to_Ebooks-_a_Hybrid_Publishing_Toolkit_for_the_Arts.gif|ebook trailer]]

<small>Ebook trailer of From Print to Ebooks</small>

==Tools for hybrid publishing==
: open source, simple tools that work in combination, forming publishing pipelines

* [http://calibre-ebook.com/ Calibre]
* [http://pandoc.org/ Pandoc]
* [http://www.etherpad.org]



==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 <code>cat myfile.txt</code> will print the content of myfile.txt

'''Markings are done using special (meta)characters''' 

[http://textfiles.com/directory.html 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

[http://en.wikipedia.org/wiki/HTML HTML]:
<source lang="html4strict">
<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>
</source>

[http://en.wikipedia.org/wiki/Markdown Markdown]: <ref>Markdown Syntax in http://daringfireball.net/projects/markdown/syntax</ref> 
<pre>
# 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
</pre>


[http://en.wikipedia.org/wiki/Wiki_markup Wiki markup]:
<pre>
= 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
</pre>


== 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 [http://www.sublimetext.com/ Sublime Text] or [https://wiki.gnome.org/Apps/Gedit Gedit] can edit Markdown files. 
* there are WYSIWYG Markdown editors such as [http://macdown.uranusjr.com/ MacDown].
'''
How to write in Markdown''' http://daringfireball.net/projects/markdown/syntax

==Hands on==
* '''download''' the [https://github.com/wdka-publicationSt/editorial_design/ 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, '''[http://pandoc.org/ Pandoc]''' is your swiss-army knife''. But it runs on the '''command line'''.

With Pandoc is possible to convert between different formats:

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

[[File:Pandoc_diagram.png|600px]]




==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 ===
<div style="background:black; color:#0CF953; font-family:monospace; font-size:12pt;  ">
{{:Terminal cheat sheet}} from [[Terminal_cheat_sheet]]
</div>

===Command line exercise===
create directory Game: <code>mkdir ~/Documents/Game</code>

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

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==
<pre>pandoc --from markdown --to html5 --standalone input.mw --css style.css --output output.html</pre>

* <code>--from</code> - option: '''format to convert “from”''';
* <code>--to </code> - option: '''format to convert “to”''';
* <code>--standalone </code> - option: standing for '''“standalone”,''' produces HTML file with an appropriate html, head, body tags;
* <code>--css</code>  - option: option for CSS style file
* <code>--output</code> - 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. 

<pre>pandoc --standalone --from markdown --to icml input.html --output=ouput.icml</pre>


===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''': 
<pre>pandoc --from html --to epub3 input.html --output=mybook.epub</pre>

<s>
'''Advanced (including stylesheet, cover image, chapter level )''': 

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

* <code>--epub-stylesheet</code> - CSS file that will style the Epub
* <code>--epub-cover-image</code> - cover file - can either be .jpg or .png
* <code>--epub-chapter-level</code> - at what heading level will the chapter brakes occur
</s>




<div style="background:#EF5DF7; color:black; font-size:14pt;  ">

=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; '''

</div>

------

= Day 2=

==Revision: 1 source many outputs==
'''1 source many outputs''' 

[[File:Conversions.svg]]

=== 3 Conversions - using Pandoc === 
<pre>pandoc input.md --from markdown --to html5 --standalone --css style.css --output output.html</pre>
* markdown (source) -> HTML (website) 
** using CSS

* markdown (source) -> ICML (PDF of paper book)
** to be used with inDesign styles  
<pre>pandoc input.md --from markdown --to icml --standalone --output=ouput.icml</pre>

* markdown (source) -> epub3 (ebook) 
** '''Simple''': 
<pre>pandoc input.md --from markdown --to epub3 --output=mybook.epub</pre>

** '''using CSS and cover image'''
<pre>pandoc input.md --from markdown --to epub3 --epub-stylesheet=styles.css --epub-cover-image=cover.jpg --output=mybook.epub</pre>

==== options ====
* <code>--from</code> - option: '''format to convert “from”''';
* <code>--to </code> - option: '''format to convert “to”''';
* <code>--standalone </code> - option: standing for '''“standalone”,''' produces HTML file with an appropriate html, head, body tags;
* <code>--css</code>  - option: option for CSS style file
* <code>--output</code> - option for '''file output'''
* <code>--epub-stylesheet</code>  - option for CSS style file in ePub
* <code>----epub-cover-image</code>   - option for cover img in ePub

-------

<div style="background:#FFE972">

{{:Hybrid_publishing_resources}} 

== 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

<references/>

[[Category:Courses]]