Andre: /* Markups in Hybrid Publishing */

2017-04-06T23:22:11Z

Markups in Hybrid Publishing

← Older revision		Revision as of 23:22, 6 April 2017
Line 49:		Line 49:

	== Markups in Hybrid Publishing ==		== Markups in Hybrid Publishing ==
	[[File:hybrid-workflow.png]]		[[File:hybrid-workflow.png\|600px]]

Andre at 21:38, 4 August 2015

2015-08-04T21:38:54Z

@@ Line 14: / Line 14: @@
 # constant connection between source-content and outcome
 # avoiding repeating tasks
 == Markup languages ==

Andre: Andre moved page Hybrid publishing/web to print to Courses/Web to Print

2015-06-24T15:38:12Z

Andre moved page Hybrid publishing/web to print to Courses/Web to Print

← Older revision	Revision as of 15:38, 24 June 2015
(No difference)

Andre at 11:56, 13 March 2015

2015-03-13T11:56:57Z

← Older revision		Revision as of 11:56, 13 March 2015
Line 275:		Line 275:
	* [http://johnmacfarlane.net/pandoc/installing.html '''pandoc'''] - markup converter software		* [http://johnmacfarlane.net/pandoc/installing.html '''pandoc'''] - markup converter software
	* '''plain-text editor''': [http://www.sublimetext.com/ Sublime Text] or [https://wiki.gnome.org/Apps/Gedit Gedit]		* '''plain-text editor''': [http://www.sublimetext.com/ Sublime Text] or [https://wiki.gnome.org/Apps/Gedit Gedit]
			* http://brew.sh/ Home Brew -command line programs for Mac Osx

	[[Category:teaching]]		[[Category:teaching]]

Andre: Created page with " == publicationstation.wdka.hro.nl/wiki == '''Hybrid Publishing''' ==Focus== '''Web to Print''' '''In a Hybrid P..."

2015-03-11T14:35:07Z

Created page with " <slidy theme="a" /> == publicationstation.wdka.hro.nl/wiki == '''Hybrid Publishing''' ==Focus== '''Web to Print''' '''In a Hybrid P..."

New page

<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

==Situation A: you are a content creator ==

''Imagine yourself as a content creator. You are the editor or designer of Beyond Social.''

Your content is gathered by content aggregator like [https://www.instapaper.com/ Instapaper] or [https://www.readability.com/ Readibility].

In that translation all your visual information is discarded in favor of the aggregators visual identity.

== Situation A: Question #1 ==
How to make sure your message comes '''as much''' across to audiences accessing your content through aggregators?

== Situation A: Question #2 ==
The visual information is discarded, what remains essential information that remain?

(BS article in Readability https://www.readability.com/articles/ixnhj0vf )

== Situation A: Question #3 ==
How do you create structure in electronic text?

== Situation A: Question #4 ==
Can your text's structure withstand a transformation of container?

<s>explicit structure</s>
== Situation A: Question #5 ==
How do achieve an explicit structure in electronic text(e.g a webpage)?

== Situation A: Answer #5 ==
An explicit structure is achieved by '''marking the text''' with structural information.

(Example: 2 BS pages through [https://www.readability.com/reading-list Readability] )

== Markup languages ==
[http://en.wikipedia.org/wiki/HTML HTML]:

<source lang="html4strict">
<h1>Revenge of the Text</h1>
There is a room in the Musée d’Orsay that I call the room of possibilities.
That room contains:
<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/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>

[http://en.wikipedia.org/wiki/Markdown Markdown]

[http://en.wikipedia.org/wiki/XML XML]

== Markups in Hybrid Publishing ==
[[File:hybrid-workflow.png]]

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

[https://raw.githubusercontent.com/DigitalPublishingToolkit/Hybrid-Publishing-Toolkit-for-the-Arts/master/trailer-From_Print_to_Ebooks:_a_Hybrid_Publishing_Toolkit_for_the_Arts.gif 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
* [http://johnmacfarlane.net/pandoc/installing.html '''pandoc'''] - markup converter software
* '''plain-text editor''': [http://www.sublimetext.com/ Sublime Text] or [https://wiki.gnome.org/Apps/Gedit 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.'''

<pre>pandoc -f html -t icml -s input.html -o output.icml</pre>

'''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 <code>html/</code> 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 <code>icml/</code> 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 [http://en.wikipedia.org/w/api.php 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|url|size&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
* [http://johnmacfarlane.net/pandoc/installing.html '''pandoc'''] - markup converter software
* '''plain-text editor''': [http://www.sublimetext.com/ Sublime Text] or [https://wiki.gnome.org/Apps/Gedit Gedit]

[[Category:teaching]]

Courses/Web to Print - Revision history

Andre: /* Markups in Hybrid Publishing */

Andre at 21:38, 4 August 2015

Andre: Andre moved page Hybrid publishing/web to print to Courses/Web to Print

Andre at 11:56, 13 March 2015

Andre: Created page with " == publicationstation.wdka.hro.nl/wiki == '''Hybrid Publishing''' ==Focus== '''Web to Print''' '''In a Hybrid P..."