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
- various outcomes from one workflow
- constant connection between source-content and outcome
- 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>
= 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
Markups in Hybrid Publishing
*********
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
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"
Or the categories to which that page belongs:
Or all the images:
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:
- pandoc - markup converter software
- plain-text editor: Sublime Text or Gedit
- http://brew.sh/ Home Brew -command line programs for Mac Osx
