Interactive Graphics – Simple and Special(ized)
No big surprise ─interactive graphics are great for conveying complex information. In the classic HTML/DITA image map, hotspots direct readers to separate target topics. But wouldn’t it be nice for readers to have graphics that don’t interrupt their exploration experience? Unfortunately, this is no out-of-the box HTML/DITA functionality. You’ll have to resort to JavaScript libraries and DITA specializations.
Nevertheless, we decided to go for it. In addition to the classic image map, we’ve enabled more advanced graphics in our DITA CMS:
Side by side ─details are displayed next to the graphic, the graphic does not disappear.
Overlaying image ─details are displayed via mouseovers in the graphic itself.
Here’s the technical perspective: Using DITA specialization, we’ve created a standard way to integrate interactive graphics into our DITA landscape and allow authors to enter the required data into the DITA code. To make the creation process easier, we now have an editor where authors can define the hotspots in a visual way. The DITA code is then created automatically. And finally, we use an open-source JavaScript library to publish the interactive graphics in the HTML output.
What can attendees expect to learn?
We will show:
─ Different examples of image maps and how they help improve the user experience
─ A DITA specialization that provides a standardized method for entering the content in the DITA code
─ A demo of our image map editor (how authors identify the hotspot coordinates, how the DITA code is generated and incorporated into the topic)
─ How to integrate interactive graphics into HTML output based on open source libraries
Meet the Presenter
Olivier Keimel is a Knowledge Architect working on user assistance in the Products & Innovation Technology Engineering Services department at SAP SE. In 18 years at SAP he has a long history driving cross-SAP projects. Since summer 2015 he has been leading the Interactive Graphics project.