DITA's potential relationship with new HTML5 structures and recommendations for mappings. Presented at DITA North America, Rhode Island, April 2013

1. EXPLOITING LAYOUT AND CONTENT
D O N D A Y , C O N T E L L I G E N C E G R O U P
1
Mapping DITA to HTML5
11 February 2013Copyright © 2013 Contelligence Group, LLC

2. Agenda
2
 Isn’t HTML5 still being worked on?
 Which parts of HTML5 can I actually use?
 What are the options for DITA to HTML5?
 Transform frameworks
 Output implications
 Evaluating available tools
 Building/adapting your own transforms
 Layout level
 Content level
 Wrap up: Decision tree for options
11 February 2013Copyright © 2013 Contelligence Group, LLC

3. Status of HTML5
3
 Background: what it is, how it was developed
 A rollup of lessons learned from earlier, splintered directions
at W3C
 HTML4, XHTML1, DOM2, Xforms, others.
 Validation philosophy:
 W3C: XML-level validation, vs
 Web Hypertext Application Technology Working Group
(WHATWG): specify how all browsers can fix tag soup
 Independence from plugin tyranny
 Clean break for emerging capabilities
 Canvas, local storage, UX features, more
11 February 2013Copyright © 2013 Contelligence Group, LLC

4. Status of HTML5, cont’d
4
 Status:
 W3C maintains official Recommendation;
 HTML5 is an approved specification, in that sense
 WHATWG maintains “living document”, keeping up with
emerging technology, new devices
 Workarounds for older browsers
 “Enabling Scripts” inject basic tag awareness into old browsers
 Polyfill/shim libraries provide HTML5-like behaviors
 Support in current browsers
 Workarounds not needed for any current browser
 See how your browser does: http://html5test.com/ (400+ good!)
11 February 2013Copyright © 2013 Contelligence Group, LLC

5. HTML5 Benefits for DITA
5
 Improved support for new devices
 Technologies for Responsive page design:
 Media queries: conditional CSS based on device screen size
 Layouts: fluid, grid, CSS table (the good kind)
 Flexible images (to some extent)
 Techniques for content/page design
 Mobile first
 Unobtrusive JavaScript/Progressive enhancement
 Technically these are part of the emerging ecosystem
 Good, we can reach more devices
 But is DITA exploiting all that HTML5 can offer?
11 February 2013Copyright © 2013 Contelligence Group, LLC

6. Options for DITA to HTML5
6
 Why there is no “Easy” button for DITA to HTML5
 Static vs. dynamic publishing
 Static builds usually bracket one persona at a time
 What does “dynamic” actually mean?
 Static content in a configurable frame?
 Progressive disclosure?
 Deferred filtering?
 Local vs. hosted applications
 Different technology stacks, content pre-prep, scaling limits
 Preferences and personalization
 How much choice to give the user? Can my delivery architecture
give users more choice?
11 February 2013Copyright © 2013 Contelligence Group, LLC

7. The way we were…
7
 Limitations in the “compile” model of delivery
 Static pages are so 1990
 Frameset based tri-pane is so 2000
 Fixed-width templates are so… not mobile friendly
 Multiple sites for versioned content is so inefficient
 Disappointments of the “wiki” vision
 Curating and assimilating user-generated content is still no
cakewalk
 “High side/Low side” content barriers
 1% rule of Internet culture: in a group of 100 SMEs, 1 person is
doing all the writing (and maybe 9% will review or edit)
11 February 2013Copyright © 2013 Contelligence Group, LLC

8. The way forward…
8
 Convert DITA into static HTML5 Web pages
 Enhancement to existing processes
 Some benefit, not full
 Host those pages in a template (vs frameset or tri-
pane help system)
 Minor additional enhancement
 Minor additional benefit; HTML5 still underutilized
 OTOH, easier centralized branding, configurable navigation,
integrated search
11 February 2013Copyright © 2013 Contelligence Group, LLC

9. The way further forward…
9
 Render DITA at request time
 This content is most adaptive to current personalization cues
 But not practical for complex conditionality (limited “2-pass”)
 Modes:
 Server-side conversion
 Best for performance, scaling, and administration
 Browser-side conversion
 More content on the wire, but very high local semantic flexibility
 Browser-side CSS rendering
 Fastest, least flexible, no logic, no linking
11 February 2013Copyright © 2013 Contelligence Group, LLC

10. Transform Frameworks
10
 Open Source HTML5 producers
 DITA Open Toolkit plugins:
 Dita4publishers (active):
 http://dita4publishers.sourceforge.net/
 Electropubs (unsupported):
 http://electropubs2.blogspot.com/2012/06/my-dita-to-html5-
plugin-makes-progress.html
 http://tech.groups.yahoo.com/group/dita-
users/message/24224
 Late updates on any new activities
11 February 2013Copyright © 2013 Contelligence Group, LLC

11. Transform Frameworks, cont’d
11
 Commercial mobile
 Mobile DITA showcase: http://mobiledita.com/#about
 WebWorks Reverb and SuiteHelp+ use HTML5
 Latest updates here as well!
11 February 2013Copyright © 2013 Contelligence Group, LLC

12. Evaluating Available Tools
12
 More decision branches:
 Practical
 Cost: Free vs. Fee
 Community: Where can I get help?
 Compatibility: If you build it, will they come?
 Chronicled: Where’s the docs? Code, please?
11 February 2013Copyright © 2013 Contelligence Group, LLC

13. Evaluating, cont’d
13
 More branches!
 Architectural: FURPS
(http://www.ibm.com/developerworks/rational/library/4706.html)
 Functionality
 Usability
 Reliability
 Performance
 Supportability
11 February 2013Copyright © 2013 Contelligence Group, LLC

14. Building Your Own
14
 Design approaches
 Requirements gathering
 What is the end goal?
 The ROI question:
 I’ve got HTML5 (in name only?)
 I’ve got responsive/adaptive deliver
 I’ve got UX and media behaviors in my content
 I’m utilizing local storage, offline application caching, and
geolocation support in my browser solution
 Still time to bail for the commercial solution! 11 February 2013Copyright © 2013 Contelligence Group, LLC

15. End Use Considerations
15
 What you buy or build will depend on how your
customers will use the information.
 Options:
 Standalone browsing (for example, embedded help)
 Static web site
 Dynamic web site
 Local dynamic service
11 February 2013Copyright © 2013 Contelligence Group, LLC

16. Mapping DITA to HTML5
11 February 2013Copyright © 2013 Contelligence Group, LLC
16
Non-text content
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and
<audio>
<embed> Defines a container for an external application or
interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>
Semantic page areas
<article> Defines an article
<aside> Defines content aside from the page content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a
heading has multiple levels
<nav> Defines navigation links
<section> Defines a section in a document
Semantic content parts
<details> Defines additional details that the user can view
or hide
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<time> Defines a date/time
Generated UI in the content
<mark> Defines marked/highlighted text
<command> Defines a command button that a user can invoke
<meter> Defines a scalar measurement within a known range
<progress> Represents the progress of a task
<wbr> Defines a possible line-break
Ruby markup
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for
East Asian typography)
<rp> Defines what to show in browsers that do not support
ruby annotations
<bdi> Isolates a part of text that might be formatted in a
different direction from other text outside it

17. Parts of a Page
17
 Levels of style in a view:
 The page: the outer framing parts that provide branding and
navigation context
 The post: the individual topic content
 The paragraph: style that applies to markup within the content
11 February 2013Copyright © 2013 Contelligence Group, LLC

18. 18
 Zooming in:
The page The post The paragraph
11 February 2013Copyright © 2013 Contelligence Group, LLC

19. Layout level mapping
19
11 February 2013Copyright © 2013 Contelligence Group, LLC

20. Layout mapping discussion
20
 Layout—creating the context for the page:
 Standalone page
 Themed with pre-built content:
 Frameset inclusion
 JavaScript inclusion
 Server-side inclusion
 Themed with dynamic content:
 Same as above, but with on-demand transform for unique
personalization
 These hints may affect sidebar content as well as main post
11 February 2013Copyright © 2013 Contelligence Group, LLC

21. Page level mapping
21
11 February 2013Copyright © 2013 Contelligence Group, LLC

22. Page mapping discussion
22
 Other models are possible
 There is no prohibition on using <div>; it represents
valid containment in the absence of HTML5
semantic structure.
 Nesting hierarchy (as in eBook subheads) needs to
respect HTML5 “outlining” capability
 It is easy to put a lot of original DITA source cues
into an HTML5 topic (compare these structures);
 But difficult to author this structure in HTML5 or to
round-trip it back to DITA without SYITF.
11 February 2013Copyright © 2013 Contelligence Group, LLC

23. Content level mapping
23
11 February 2013Copyright © 2013 Contelligence Group, LLC

24. Content mapping discussion
24
 Content-level:
 Audio, Video, SVG, mathML inclusions
 Mapped from DITA’s elements:
 object for external content rendered by a control
 foreign for embedded vocabularies (SVG and mathML)
 Shortcodes/outputclasses for:
 Tabbed and reveal content (accordions, sliders)
 Message types
 Inline navigation
11 February 2013Copyright © 2013 Contelligence Group, LLC

25. Content mapping, more
25
 Semantic content:
 Figure and figcaption useful for image and video framing, but
browser behaviors may make these elements less useful for
other content we sometimes put in DITA figures
 Details and summary could be useful for inline footnotes
 Semantic data:
 Time element may have browser localization behaviors for its
content. Use only for time data.
11 February 2013Copyright © 2013 Contelligence Group, LLC

26. Content mapping, wrap up
26
 Non-text content
 Audio, video, source, embed take data from <object> element
 Track can hold playlist data (eg, DITA OT music plugin)
 Generated UI in the content
 Command, meter, and progress represent UX controls that can
be output in the context of a video or audio sample—you can
build your own player!
 Mark element is specifically for dynamically analyzed data
injected when page is sent: search hit terms, adsense
associative links, English terms not in the controlled
vocabulary, etc.
11 February 2013Copyright © 2013 Contelligence Group, LLC

27. Questions?
27
 Thank you!
11 February 2013Copyright © 2013 Contelligence Group, LLC

28. Contact
28
Don R. Day
Co-Founder, ContelligenceGroup.com
Co-Chair, OASIS DITA Technical Committee
LinkedIn: donrday Twitter: @donrday
About.me: Don R. Day Skype: don.r.day
"Where is the wisdom we have lost in knowledge?
Where is the knowledge we have lost in information?"
--T.S. Eliot
11 February 2013Copyright © 2013 Contelligence Group, LLC