Difference between revisions of "Single-source workflow"

From Publication Station
 
(5 intermediate revisions by the same user not shown)
Line 106: Line 106:




t
 
==Word styles in manuscript (.docx)==
==Word styles in manuscript (.docx)==


This is a preparatory stage. Yet it is important for the series of conversions that will lead to the different publication's outputs.


If changes to the manuscript are needed the use '''paragraph styles''' in MS Word/Libre Office/Open Office '''"mark" the text, so as to allow those structural markings to propagate to ICML(inDesign) and HTML(website)'''.  
If changes to the manuscript are needed, use '''paragraph styles''' in MS Word/Libre Office/Open Office to '''"mark" the text, so as to allow those structural markings to propagate to ICML(inDesign) and HTML(website)'''.  


Some existing paragraph and characters styles:
Some existing paragraph and characters styles:
Line 124: Line 123:


Save in '''.docx'''. Pandoc cannot read .doc, only .docx
Save in '''.docx'''. Pandoc cannot read .doc, only .docx


==Pandoc==
==Pandoc==
Line 132: Line 129:
Pandoc has a text-based interface, which can be challenging to use, to those unused to use the command-line terminal.  
Pandoc has a text-based interface, which can be challenging to use, to those unused to use the command-line terminal.  


Luckily there are a few Web interfaces to Pandoc, such as '''[https://tools.xpub.nl/hybrideditor/index.html Hybrid Publishing Editor]''' by [http://automatist.org/ Michael Murtaugh]
Luckily there are a few Web interfaces to Pandoc, such as '''[http://artserver.org/~andre/hybrideditor/ Hybrid Publishing Editor]''' by [http://automatist.org/ Michael Murtaugh]


[[File:Hype.png|thumbnail|Hybrid Editor]]
[[File:Hype.png|thumbnail|Hybrid Editor]]




 
-----
 
==ICML==
{{:ICML}}
{{:ICML}}


=Updatable Website=
How to integrating changing content & website creation?
Our problem: like in inDesign '''we want to work on the identity and navigation of our website, while keeping the content updatable'''.


inDesign addresses this issue with the use of chapter styles.


'''How can it work for the website creation?'''


[[File:website-inner_outer.svg]]


https://github.com/wdka-publicationSt/book-website/archive/master.zip
----
=Updatable Website=
{{:Updatable Website}}

Latest revision as of 10:08, 17 September 2019

Singlesource.svg

goal

Create ICML and HTML files from a styled docx manuscript file.

  • The ICML is the content of the inDesing project that will originate the print publication
  • The HTML is the content of the Website project

why

  • updatable: changes to the manuscript are propagated to the outputs
  • reusable: structure (headings, bloque quotes) and paragraphs styles (bold, italics) are maintained from manuscript to outputs

how:Pandoc / Hybrid Publishing Editor

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


ICML (xml):

<ParagraphStyleRange AppliedParagraphStyle="ParagraphStyle/Header1">
  <CharacterStyleRange AppliedCharacterStyle="$ID/NormalCharacterStyle">
    <Content>Revenge of the Text</Content>
  </CharacterStyleRange>
</ParagraphStyleRange>
<Br />
<ParagraphStyleRange AppliedParagraphStyle="ParagraphStyle/Paragraph">
  <CharacterStyleRange AppliedCharacterStyle="$ID/NormalCharacterStyle">
    <Content>There is a room in the </Content>
  </CharacterStyleRange>
  <CharacterStyleRange AppliedCharacterStyle="CharacterStyle/Bold">
    <Content>Musée d’Orsay</Content>
  </CharacterStyleRange>
  <CharacterStyleRange AppliedCharacterStyle="$ID/NormalCharacterStyle">
    <Content> that I call the </Content>
  </CharacterStyleRange>
  <CharacterStyleRange AppliedCharacterStyle="CharacterStyle/Italic">
    <Content>room of possibilities</Content>
  </CharacterStyleRange>
  <CharacterStyleRange AppliedCharacterStyle="$ID/NormalCharacterStyle">
    <Content>.</Content>
  </CharacterStyleRange>
</ParagraphStyleRange>
<Br />
<ParagraphStyleRange AppliedParagraphStyle="ParagraphStyle/Paragraph">
  <CharacterStyleRange AppliedCharacterStyle="$ID/NormalCharacterStyle">
    <Content>That room contains:</Content>
  </CharacterStyleRange>
</ParagraphStyleRange>
<Br />
<ParagraphStyleRange AppliedParagraphStyle="ParagraphStyle/BulList &gt; first" NumberingContinue="false">
  <CharacterStyleRange AppliedCharacterStyle="$ID/NormalCharacterStyle">
    <Content>a snow flake</Content>
  </CharacterStyleRange>
</ParagraphStyleRange>
<Br />
<ParagraphStyleRange AppliedParagraphStyle="ParagraphStyle/BulList">
  <CharacterStyleRange AppliedCharacterStyle="$ID/NormalCharacterStyle">
    <Content>the end of a cloud</Content>
  </CharacterStyleRange>
</ParagraphStyleRange>
<Br />
<ParagraphStyleRange AppliedParagraphStyle="ParagraphStyle/BulList">
  <CharacterStyleRange AppliedCharacterStyle="$ID/NormalCharacterStyle">
    <Content>a bit of nothing</Content>
  </CharacterStyleRange>
</ParagraphStyleRange>



Word styles in manuscript (.docx)

If changes to the manuscript are needed, use paragraph styles in MS Word/Libre Office/Open Office to "mark" the text, so as to allow those structural markings to propagate to ICML(inDesign) and HTML(website).

Some existing paragraph and characters styles:

  • headings: heading1, heading2, etc
  • body text: regular text
  • block quotes: indented blocks of text
  • footnotes
  • hyperlinks
  • Preformatted text as in
    Hello world
  • Bold
  • Italics

Save in .docx. Pandoc cannot read .doc, only .docx

Pandoc

pandoc: is a software for converting text between different markups

Pandoc diagram.png


Pandoc has a text-based interface, which can be challenging to use, to those unused to use the command-line terminal.

Luckily there are a few Web interfaces to Pandoc, such as Hybrid Publishing Editor by Michael Murtaugh

Hybrid Editor



ICML

ICML files

ICML files are essentially XML files, usualy managed by InCopy, Adobe’s own word processor, which can be easily imported into Adobe InDesign.


Importing ICML to InDesign

An ICML file can be imported into InDesign with File>Place

The present paragraph styles and chapter styles that were present in the manuscript which gave origin to the ICML are kept and included in the HTML file.

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

Images are given an empty placeholder.

Updating content

If the ICML remains linked to the inDesign project, changes performed in manuscript, once converted to the ICML, will be integrated into the inDesign project.


inDesign Styles

See more in https://helpx.adobe.com/indesign/using/paragraph-character-styles.html


Importing styles from another inDesign project

To import character and paragraph styles from another inDesign project:

  • Choose Load All Text Styles from the Paragraph Styles panel menu
    • InDesign displays the Open a File dialog box.
  • Locate and select the InDesign project file containing the styles you want and click the Open button.
    • InDesign copies the character styles from that publication into the current document.

http://ptgmedia.pearsoncmg.com/images/art_0600indesign_b/elementLinks/styles07.gif


Importing/Exporting styles

According to Lynda.com course Exporting InDesign styles for CSS and HTML "InDesign writes and creates the CSS for you. This is not an option that I really recommend because InDesign, great as it is, does not write very good CSS. It tries to write CSS that is a very, very close match in appearance to your print layout and that's not necessarily Web-friendly."

Besides the design spaces - the page and the screen have different properties and behaviors.



Conversions to ICML

Pandoc can convert HTML and Markdown markups into ICML, since the file format is is essentially XML markup.

Example command:

pandoc -s -f markdown -t icml -o my.icml my.md

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

-f option, which stands for “from”, is followed by the source format;

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

-o option, which stands for “output”;;

my.md is the markdown source filename.

Links




Updatable Website

  • Download book-website structure
  • unzip master.zip
  • place `book-website-master/` in the folder dedicated to the publication


How to integrating changing content & website creation?

Our problem: like in inDesign we want to work on the identity and navigation of our website, while keeping the content updatable.

inDesign addresses this issue with the use of chapter styles.

How can it work for the website creation?

Website-inner outer.svg


book-website

The book-website try address this issue, with a quick'n'dirty JS+HTML system for loading html content from content.html into index.html, without a webserver.

NOTE: it will only work in Firefox; Chrome will refuse to so, due to same origin policies

The motivation to do so, is to allow content (in content.html) to be easily updatable, and decoupled from the rest of the webpage files.

Folder structure:

book-website/
├── content.html    ----> CONTENT
├── index.html      ----> LANDING PAGE 
├── jquery-3.1.1.min.js 
├── load.js         ----> JS where content is loaded, sections and TOC are created
├── README.md
└── style.css       ----> CSS style info


  • content.html will store updatable content
  • style.css stores the CSS Making changes to CSS can be done in
  • index.html receives the content from content.html allows HTML (such as menus) to be added
  • load.js besides loading content, also includes a function which generates a Table-of-contents generate_toc, using the h1 elements to create entries:
    <ul>
    <li><a href="#id_of_firsth1">First h1</a></li>
    <li><a href="#id_ofsecond_h1">Second h2</a></li>
    <ul>