Difference between revisions of "Courses/Hybrid publishing/Q8"

From Publication Station
(Created page with "<slidy theme="a" /> __TOC__ <div style="background:#ABE9F4;width:70%; padding:3px"> '''Professional development workshop on Hybrid Publishing''' =practicals= * #Feedbac...")
 
Line 6: Line 6:
'''Professional development workshop on Hybrid Publishing'''  
'''Professional development workshop on Hybrid Publishing'''  
=practicals=
=practicals=
* [[#Feedback]]
* software used '''(download to your computer)''':
* pad: http://pzwart1.wdka.hro.nl/pad/p/prof_workshop_publishing
* room: [https://wdka.asimut.net/public/event.php?id=17069&url=https%3A//wdka.asimut.net/public/index.php%3Fdato%3D20160308%26akt%3Dvisgruppe%26id%3D19 BL.00.10a]
* duration: 3 hours
* date: March 8 afternoon (1.30-16.30+ drinks until 5).
* software used:
** [http://calibre-ebook.com/ Calibre],  
** [http://calibre-ebook.com/ Calibre],  
** [http://pandoc.org/ Pandoc],  
** [http://pandoc.org/ Pandoc],  
** plain-text editors ( [http://www.sublimetext.com/ Sublime Text], [https://wiki.gnome.org/Apps/Gedit Gedit] )
** plain-text editors ( [http://www.sublimetext.com/ Sublime Text], [https://wiki.gnome.org/Apps/Gedit Gedit] )
** Base64 encoder: ( [http://www.motobit.com/util/base64-decoder-encoder.asp Online encoder], [http://www.macupdate.com/app/mac/31983/convert64 Convert64 (Mac OS X, commercial)]
** [https://developer.apple.com/xcode/download/ Xcode] (mac)  
 
</div>
</div>




== Plan ==
== Plan ==
* Hybrid publishing.
* Full concentration
* Motivations, concepts, tools, strategies, formats that have been present in hybrid publishing efforts of WdKA.
* Hybrid publishing
* Role and possibilities for publishing in an art school.
* concepts,  
* Presentation of developed and in-progress publications .
* examples
* Inauguration the Device Lab.
* formats (markups)
* tools and strategies
 


==Why ''publishing''?==  
==''publishing''?==  
* hybrid publishing as an extension of efforts from Publication station - establishing dialog between analog &amp; digital  
* 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 [http://monoskop.org/log/?p=4165 Alessandro Ludovico's research on Post-Digital Print at WdKA]
Line 34: Line 30:
* publishing as a learning tool
* publishing as a learning tool


==Possibilities and constraints==
==''hybrid publication''?==
Plain text + poor visuals vs. rich visuals + interactivity
A publication that inhabits both analog and digital worlds.
 
[[File:E-publishing_richness.png]]
 
==How ''hybrid''?==
"a single 'entity' that would extensively implement both worlds (analogue and digital), we might call this entity a 'hybrid' – a publication which would 'perform the networks' in depth"<br/><small>Ludovico, Alessandro. “Networks as Agents in the Clash Between Personal and Industrial Post-Digital Print.” Progetto Grafico, August 2015.</small>
 
<small>[https://vimeo.com/96574475 Video] from Ludovico's presentation of “Networks as Agents in the Clash Between Personal and Industrial Post-Digital Print.”</small>


==hybrid publishing works==
==hybrid publishing works==
Line 49: Line 38:
[http://traumawien.at/ghostwriters/]
[http://traumawien.at/ghostwriters/]
http://rlv.zcache.com/traumawien_button-rb0a7981400224870838ec6aaa582161c_x7j3i_8byvr_512.jpg
http://rlv.zcache.com/traumawien_button-rb0a7981400224870838ec6aaa582161c_x7j3i_8byvr_512.jpg


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


[http://www.julienlevesque.net/books-scapes/ Books Scapes], Julien Levesque, 2012
[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/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/work/e-book-backup/ E-Book Backup], Jesse England, 2012
Line 72: Line 57:


* ePub
* ePub
* PDF  
* PDF (print book)
* self-contained single-file HTML e-books 
* website
* Comic book Archive
* ebook trailer   
* ebook trailer   
'''Ebook trailer for From Print to Ebooks'''


[[File:multipleouptus.svg]]
[[File:multipleouptus.svg]]


[[File:Trailer-From_Print_to_Ebooks-_a_Hybrid_Publishing_Toolkit_for_the_Arts.gif|ebook trailer]]
[[File:Trailer-From_Print_to_Ebooks-_a_Hybrid_Publishing_Toolkit_for_the_Arts.gif|ebook trailer of From Print to Ebooks]]


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


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


* [https://en.wikipedia.org/wiki/Wiki Wikis] aka Quick
* [http://calibre-ebook.com/ Calibre]
* [http://calibre-ebook.com/ Calibre]
* [http://pandoc.org/ Pandoc]
* [http://pandoc.org/ Pandoc]
Line 104: Line 85:
Can be displayed using the terminal <code>cat myfile.txt</code> will print the content of myfile.txt
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  
'''Markings are done using special (meta)characters'''


[http://textfiles.com/directory.html Historical examples of plain text file undeground publishing]
[http://textfiles.com/directory.html Historical examples of plain text file undeground publishing]


==Markups==
==Markups languages==
"In electronic processing of texts, this '''hierarchical ordering''' <nowiki>[...]</nowiki> as well as additional '''reading aids''' such bold or italic text, is made possible by using specific formatting codes. This process is called '''markup''' and the codes are called markup element"<small>[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]</small>
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 




==Different Markup languages==
==Markup languages examples ==
Each markup uses a different marking syntax
Each markup uses a different markings


[http://en.wikipedia.org/wiki/HTML HTML]:
[http://en.wikipedia.org/wiki/HTML HTML]:
Line 127: Line 113:
</source>
</source>


[http://en.wikipedia.org/wiki/Wiki_markup Wiki markup]:
[http://en.wikipedia.org/wiki/Markdown Markdown]: <ref>Markdown Syntax in http://daringfireball.net/projects/markdown/syntax</ref>
<pre>
<pre>
= Revenge of the Text =
# Revenge of the Text
There is a room in the '''Musée d’Orsay''' that I call the ''room of possibilities''.
There is a room in the **Musée d’Orsay** that I call the *room of possibilities*.


That room contains:
That room contains:
Line 137: Line 123:
* a bit of nothing
* a bit of nothing
</pre>
</pre>
 
[http://en.wikipedia.org/wiki/Markdown Markdown]:
 
[http://en.wikipedia.org/wiki/Wiki_markup Wiki markup]:
<pre>
<pre>
# Revenge of the Text
= Revenge of the Text =
There is a room in the **Musée d’Orsay** that I call the *room of possibilities*.
There is a room in the '''Musée d’Orsay''' that I call the ''room of possibilities''.


That room contains:
That room contains:
Line 149: Line 136:
</pre>
</pre>


[https://en.wikipedia.org/wiki/Text_Encoding_Initiative TEI XML]:


<pre>
==Hands on==
p> <hi>A New yeares guift for shrews</hi> is a diminutive sheet engraved c.1630 and signed by the relatively unknown Thomas Cecill, who seems to have been active between 1625 and 1640. It bears the imprint of the even less known Edward Lee, whose only other issue is a large equestrian portrait of Charles I. </p>
* '''download''' the repository of texts for this project: https://github.com/wdka-publicationSt/editorial_design/archive/master.zip
<p>In a series of unified scenes, it depicts the traditional nagging wife eventually beaten by her husband, and ultimately chased off by the devil. It is accompanied by the following rhyme of a traditional type, reminiscent of the ditty about <hi>Solomon Grundy</hi>, who was <hi>Born on Monday</hi>, and then on successive days christened, married, taken fatally ill and <hi>Buried on Sunday</hi>: </p>
* unzip
<q>
* from all its files there '''choose 1 file, you'll be working on''', for today
<lg rend="italics">
* copy it to a folder dedicated to today's class
<l>Who marieth a wife uppon a Moneday,</l>
* open in a text editor: sublime, gedit,etc
<l>If she will not be good uppon a Tewesday, </l>
* Look at the markdown syntax
<l>Lett him go to the wood uppon a Wensday, </l>
 
<l>And cutt him a cudgell uppon the Thursday, </l>
More on Markdown syntax in http://daringfireball.net/projects/markdown/syntax
<l>And pay her soundly uppon a Fryday; </l>
 
<l>And<note><hi>And</hi>: if</note> she mend not, the Divil take her a Saterday </l>
 
<l>Then may he eate his meate in peace on the Sonday.</l>
==convert this file into other formats==
</lg>
Using '''[http://pandoc.org/ Pandoc]''':
</q>
* html
</pre>
* docx
* mediawiki
[[File:Pandoc_diagram.png|600px]]
 
==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'''.


[https://en.wikipedia.org/wiki/DocBook Docbook XML]
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<book xml:id="simple_book" xmlns="http://docbook.org/ns/docbook" version="5.0">
  <title>Very simple book</title>
  <chapter xml:id="chapter_1">
    <title>Chapter 1</title>
    <para>Hello world!</para>
    <para>I hope that your day is proceeding <emphasis>splendidly</emphasis>!</para>
  </chapter>
  <chapter xml:id="chapter_2">
    <title>Chapter 2</title>
    <para>Hello again, world!</para>
  </chapter>
</book>
</pre>


Reference: Petr van Blokland, [http://www.petr.com/index/-/p-358 Het boek als object], Items, 2004 (!)
==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 ===
{{Terminal_cheat_sheet}} from [[Terminal_cheat_sheet]]
===Command line exercise===
TO DO<ref> Command line exercise</ref>


==Create one plain-text file==
Using either in '''HTML''' or '''Wiki''' syntax:
* write it from scratch
* copy HTML content from any website with "View Source"
* copy Wiki content from any wiki: [http://publicationstation.wdka.hro.nl/wiki Publication Station], [http://beyond-social.org/wiki/ Beyond Social], [http://wikipedia.com/ Wikipedia], etc
* edit its content


Save it dedicated folder.
http://flossmanuals.net/command-line/


==turn this file into into other formats==
...with '''[http://pandoc.org/ Pandoc]'''


==Pandoc - a markup converter ==
''If you need to convert files from one markup format into another, pandoc is your swiss-army knife''


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


== Pandoc - Convert from Wiki to HTML==
== Pandoc - Convert from Markdown to HTML==
<pre>pandoc --from mediawiki --to html5 --standalone input.mw -o output.html</pre>
<pre>pandoc --from markdown --to html5 --standalone input.mw -o output.html</pre>


* <code>--from</code> - option standing for “from”, is followed by the input format;
* <code>--from</code> - option standing for “from”, is followed by the input format;
Line 210: Line 187:
* <code>--standalone </code> - option standing for “standalone”, produces output with an appropriate header and footer;
* <code>--standalone </code> - option standing for “standalone”, produces output with an appropriate header and footer;
* <code>-o</code> - option for file output
* <code>-o</code> - option for file output
===editing the HTML file===
Add CSS files <ref>Learn more on CSS in the pages: [[Courses/Design & Technique-Essential Web Design/03]], [[Courses/Design & Technique-Essential Web Design/04]]</ref>
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>my html file</h1>
</body>
</html>
</source>
== Pandoc - converting to ICML==
TO DO<ref> What is ICML?</ref>
<pre>pandoc --from markdown --to icml input.html --output=ouput.icml</pre>




=== Pandoc - Convert from HTML to wiki===
<pre>pandoc --from html5 --to mediawiki input.html -o output.wiki</pre>


== Pandoc - converting to ePub==
== Pandoc - converting to ePub==
'''Simple''':  
'''Simple''':  
<pre>pandoc --from html --to epub3 input.html --output=mybook.epub</pre>
<pre>pandoc --from html --to epub3 input.html --output=mybook.epub</pre>


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


Line 228: Line 224:
* <code>--epub-cover-image</code> - cover file - can either be .jpg or .png
* <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
* <code>--epub-chapter-level</code> - at what heading level will the chapter brakes occur
</s>
==Importing ICML to inDesign==
==inDesign: designing with styles==


==Epub An editable format ==


Calibre's edit book function to  
=ASSIGNMENT=
<span style="background:yellow">For May 27:
Choose 1 publication you want to work in. From the 3 possible publications (https://github.com/wdka-publicationSt/editorial_design/archive/master.zip)


* open an epub
Using  at least '''1 file''' from the chosen one
* navigate structure
* convert it to: an HTML file &  an ICML file
* change content, style, metadata
* the issue of good reader apps


==Self-contained HTML==
* '''use '''CSS''' to make '''different sketches for the digital (html)''' identity of this book'''
* '''use inDesign style to create '''different sketches of the paper identity of this book'''
''This will be the starting points for the publication you will do in quarter 8.''


* Example of a [http://cramer.pleintekst.nl/deplayer-impro-snodge/de_player-vroom-impro_snodge-2015-12-17.html multimedia e-zine] with animated GIFs and sound
'''Bring these sketches to next class, on May 27; '''
* Look at the source code
* What is a data URI?
* What can you do better with self-contained HTML, what can you do better EPUB?


==converting to PDF==
</span>
A complicated case.


Different approaches tried:
* [[Research/Web-to-print/ICML|Research on ICML & inDesign]]
* Pandoc via LaTeX/XeTeX
* [http://weasyprint.org/ Weasyprint](HTML + CSS)  [[Research/Web-to-print/WeasyPrint|Research on Weasyprint]]


==Feedback==
</references>
<iframe name='embed_readwrite' src='http://pzwart1.wdka.hro.nl/pad/p/prof_workshop_publishing?showControls=true&showChat=true&showLineNumbers=true&useMonospaceFont=false' width=600 height=400></iframe>


[[Category:Courses]]
[[Category:Courses]]

Revision as of 17:12, 9 May 2016

<slidy theme="a" />

Professional development workshop on Hybrid Publishing

practicals


Plan

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


publishing?

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

Multichannel publishing workflows

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

Multipleouptus.svg

ebook trailer of From Print to Ebooks

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


Hands on

More on Markdown syntax in http://daringfireball.net/projects/markdown/syntax


convert this file into other formats

Using Pandoc:

  • html
  • docx
  • mediawiki

Pandoc diagram.png

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.


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

Template:Terminal cheat sheet from Terminal_cheat_sheet

Command line exercise

TO DO[2]


http://flossmanuals.net/command-line/



Pandoc - Convert from Markdown to HTML

pandoc --from markdown --to html5 --standalone input.mw -o output.html
  • --from - option standing for “from”, is followed by the input format;
  • --to - option standing for “to”, is followed by the output format;
  • --standalone - option standing for “standalone”, produces output with an appropriate header and footer;
  • -o - option for file output

editing the HTML file

Add CSS files [3]

<!DOCTYPE html>
<html>

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

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

Pandoc - converting to ICML

TO DO[4]


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


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


Importing ICML to inDesign

inDesign: designing with styles

ASSIGNMENT

For May 27: Choose 1 publication you want to work in. From the 3 possible publications (https://github.com/wdka-publicationSt/editorial_design/archive/master.zip)

Using at least 1 file from the chosen one

  • convert it to: an HTML file & an ICML file
  • use CSS to make different sketches for the digital (html) identity of this book
  • use inDesign style to create different sketches of the paper identity of this book

This will be the starting points for the publication you will do in quarter 8.

Bring these sketches to next class, on May 27;


</references>