Courses/Web to Print

<slidy theme="a" />

publicationstation.wdka.hro.nl/wiki

Hybrid Publishing

Focus

Web to Print

In a Hybrid Publishing Workflow

Hybrid Publishing Workflow

1. various outcomes from one workflow
2. constant connection between source-content and outcome
3. avoiding repeating tasks

Markup languages

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>

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

Markdown

XML

Markups in Hybrid Publishing

http://networkcultures.org/blog/publication/from-print-to-ebooks-a-hybrid-publishing-toolkit-for-the-arts/

EPUB trailer

*********

http://fc05.deviantart.net/fs70/i/2012/005/c/e/cloud_close_png_by_digitalwideresource-d4ldq0t.png

Situation B: you are an interface

Imagine yourself as the designer of an interface that re-present the content provided by someone else.

Not unlike Readability or Instapaper you'll be giving a new visual identity to the foreign.

E.g.your service turns web-content into a sexy looking paper magazine.

Situation B: Question #1

How do you avoid replicating actions that were first created by the original the content authors?

In other words, how do you preserve not only the content, but also the structure of your source?

Situation B: Question #2

How do you allow dynamic content to be easily incorporated into your container, without having to design each of its "pages" individually?

Situation B: Answer #1 & #2

You develop design around the structure of the text.

Structure becomes the scaffolding that sustains the content, but also allows a visual layer to be place on top of it.

******

http://4.bp.blogspot.com/-fp9oKdMs6_8/UX6wdzT7qqI/AAAAAAAAANw/-NYVNCY209s/s1600/smoke_cloud.png

A Recipe for Hybrid Publishing

How to convert online content into a paper magazine?

An option is to converert the files from a markup(HTML) to into another markup (ICML (Adobe XML based markup)).

Once the conversion is completed the resulting ICML file can be placed in a inDesign document.

ICML files

ICML files are XML (another markup) files, usually created by InCopy, Adobe’s own word processor.

ICMLs can be easily imported into Adobe InDesign.

ICML has the advantage of keeping the structure from its source and remain updatable even when placed in inDesign.

Recipe Ingredients

• empty folder - to create the recipe
• content in a markup language: HTML (or wiki syntax)
• terminal - a text-based interface to your file system
• pandoc - markup converter software
• plain-text editor: Sublime Text or Gedit
• your favorite text layout software

Testing the Recipe step#1

In on empty folder in your computer save 1 BS article in HTML.

Testing the Recipe step#2

Convert that HTML file into an ICML file.

pandoc -f html -t icml -s input.html -o output.icml

pandoc - program dedicate to the conversion between different markups.

-f - option standing for “from”, is followed by the input format;

-t - option standing for “to”, is followed by the output format;

-s - option standing for “standalone”, produces output with an appropriate header and footer;

-o - option for file output;

input.html - html input filename - you need to replace it by its actual name

Testing the Recipe step#3

Open inDesign and ...

Place your output.icml in a inDesign project.

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

Testing the Recipe step#4

Style the content using paragraph and character styles.

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

Testing the Recipe step#5

Content updates

Using Sublime Text, edit the source html file adding something or extracting something to it.

Repeat the whole recipe, so that you see the content being updated in inDesign.

Recipe Warning

Content should 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.

Recipe Tips

Loading paragraph styles

Recipe Questions

Can CSS rules be imported and used as inDesign Paragraph/Character Styles ?

Can inDesign styles be exported as CSS style-sheets ?

+ ... ?

**********

http://www.scri8e.com/stars/PNG_Clouds/zc03.png

Banquet Recipe

Since computers are good at doing repetitive and boring task, let's take advantage from it.

Download scripts for this this task, from https://gitlab.com/Castro0o/wdka_editorial/repository/archive.zip (Download and unzip to your recipe folder)

Place .zip in your working, and unzip it

Banquet Recipe step#1

download all the HTML pages from BS.

./wdka_editorial.git/scripts/download_html

... and all the html files will be converted into ICML files inside the html/ folder

Banquet Recipe step#2

convert all the HTML pages into ICML files.

./wdka_editorial.git/scripts/convert_html2icml

... and all the html files will be converted into ICML files inside the icml/ folder

Importing ICML to InDesign

The generated ICML file is then imported into InDesign with File>Place

The following paragraph styles and chapter styles are automatically generated:

bold; italic; blockquotes; footnotes; headers; paragraphs; tables; lists.

Images are given an empty placeholder.

Using the wiki pages markup language

The same process achieved with HTML could have been accomplished with BS wiki.

For that we would need to use Mediawiki API and a few scripts.

Here is an example of an API call for content of the page "About Beyond Social"

http://beyond-social.org/wiki/api.php?format=json&action=query&titles=About_Beyond_Social&prop=revisions&rvprop=content

Or the categories to which that page belongs:

http://beyond-social.org/wiki/api.php?format=json&action=query&titles=About_Beyond_Social&prop=categories

Or all the images:

http://beyond-social.org/wiki/api.php?format=json&action=query&list=allimages&aiprop=mime%7Curl%7Csize&aisort=timestamp&aidir=descending&ailimit=5000

Advantage of using wiki pages + API

Access to information beyond the current content

• history of edits from an article - what, when, who
• categories the article belong to
• all media and their characteristics

Works based on (invisible) wiki content

...using Mediawiki API

Reference: Epicpedia http://www.epicpedia.org/ by Annemieke van der Hoek

Reference: The Iraq War: A History of Wikipedia Changelogs http://p-dpa.net/work/iraq-war-wikihistoriography/ by James Bridle

software used

• Shell terminal - a text-based interface to your file system. there are plenty of terminal tutorial online, here are some:
  • http://mac.appstorm.net/how-to/utilities-how-to/how-to-use-terminal-the-basics/
  • http://computers.tutsplus.com/tutorials/40-terminal-tips-and-tricks-you-never-thought-you-needed--mac-51192
  • http://pzwart3.wdka.hro.nl/wiki/Null/Terminal
• pandoc - markup converter software
• plain-text editor: Sublime Text or Gedit
• http://brew.sh/ Home Brew -command line programs for Mac Osx