InDesign XMl to HTML Presentation for IDEAlliance Educational Seminars

1. IDEAlliance XML Case Study
InDesign Tagging
to HTML Navigation
Presented for IDEAlliance Educational Seminars
on June 14, 2011 by:
Cathy Palmer
Senior Applications Instructor
New Horizons of Wisconsin
Consulting & Training for InDesign/XML

2. XML Case Study: InDesign Tagging to HTML Navigation
Approach XML from the graphic designer’s point of view…
Given existing print documents,
how do you get XML?
Given XML,
how to design with it?
The hands-on realities of tagging, extracting, using XML starting from InDesign files.
IDEAlliance XML Case Study 14 June 2011

3. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research –
Pest Management Directory
Example:
scientific reference directory
of detailed data and best practices
for using pesticides and herbicides
ent
anagem
Pest M Crops
in Field g wee
ds, inse
cts, an
g
d dise
rains
ases
anagin small
e to m s, and
A guid forage
eans,
, soyb
in corn
2011
IDEAlliance XML Case Study 14 June 2011

4. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research –
Pest Management Directory
Scenario:
• many authors,
uncoordinated content
Table 3-11. Fungicides registered for foliar soybean diseases in Wisconsin
• no standard tags
Trade name Active ingredient Chemical family FRACa Rate/a Remarks
Alto 100 SL cyproconazole triazole 3 2.75–5.5 fl oz Do not ex
• graphic designer lb ai/a of
to organize data per seaso
vest. Do n
Table 2-13. Fungicides labeled for leaf diseases of field corn (hybrid seed production and grain)
an applic
Active FRAC Amount of livestock
PRINCIPLES OF PEST
Trade name ingredient code product/a Remarks tion at th
Bravo Weather Stikchlorothalonil
Bravo chlorothalonil M5 0.75–2.0 pt M5 1.0–2.0Helminthosporium leaf
chloronitrile Common rust, pt Labeled f
MGMT
Weather Stik grown for seed. For14 days b
advance
—Do not exceed 12three (9 lb
pt/a app
within 14 days of harvest. (S
more tha
Bumper 41.8 EC propiconazole 3 2–4 fl oz Helminthosporium leaf blight. Appl
threshing
first appears and continue 6 w
within on
Rusts. Apply 4 fl oz/a when ru
Cuprofix Ultra 40 Copper sulfate inorganic M1 0.75–3.0 lb See label
on a 7- to 14-day schedule.
Domark 230 ME tetraconazole triazole 3 leaf spot, eyespot. Apply 4 app
Gray 4.0–5.0 fl oz Make fl o
CORN
IDEAlliance XML Case Study appears. If14 June 2011 (early po
conditions favorab
able for d

5. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research –
Pest Management Directory
Process:
• designer to tag the content based on type styles
without understanding too much code
• export XML and transform with XSLT
• create navigable mobile HTML view
IND XML XSL HTML
IDEAlliance XML Case Study 14 June 2011

6. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
Graphic designer
reverse-engineers
XML from layout file.
Typical InDesign
print layout with
type styles, no tags.
IDEAlliance XML Case Study 14 June 2011

7. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
Placeholder paragraph
styles (with no formatting
attributes) matching the
table headers are created.
Easy to select columns
and apply to the table text.
IDEAlliance XML Case Study 14 June 2011

8. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
Tags created to match
type styles, and mapped
styles to tags.
Table converted to
paragraph-delimited text.
IDEAlliance XML Case Study 14 June 2011

9. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
Export tagged text
from InDesign as XML.
Minor manual cleanup of tags,
to be scripted later.
/* Replace with r
to add line breaks*/
/* Replace chem with
rrchem to add line breaks*/
/* wrap each unit with chem */
/* add storyname at top and
chemlist as total wrapper*/
IDEAlliance XML Case Study 14 June 2011

10. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
Use XSL to reshuffle
and format the XML.
(shown in oXygen XML)
Iterate through the tags,
populate the text lead-ins
from the column headers
for each entry.
IDEAlliance XML Case Study 14 June 2011

11. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
XSLT transform converts
the XML to HTML
flexible enough to handle
various tag structures
from different sections
IDEAlliance XML Case Study 14 June 2011

12. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
CSS (Cascading Style Sheets)
formats the HTML tags
JavaScript adds
collapsible navigation
IDEAlliance XML Case Study 14 June 2011

13. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
multi-level HTML navigation of text lists
IDEAlliance XML Case Study 14 June 2011

14. XML Case Study: InDesign Tagging to HTML Navigation
Case Study:
Agriculture Research – Pest Management Directory
Benefits:
• Quick access to information
• Easy to navigate
• Portable to site
Drawbacks:
• Static HTML view,
not able to actively compare
• Not live data, but daily updates available
Risks:
• Summary info is not complete
• Need to reference complete
technical data for chemicals usage
IDEAlliance XML Case Study 14 June 2011

15. XML Case Study: InDesign Tagging to HTML Navigation
Thank You!
Cathy Palmer
Senior Applications Instructor
New Horizons of Wisconsin
Consulting Training for InDesign/XML
IDEAlliance XML Case Study 14 June 2011