Mobile DITA Content with jQuery

Hello ditaverse, I’ve started a new sourceforge project – creating a toolkit plugin to produce mobile- and tablet-friendly xHTML from DITA content. The plugin leverages the jQuery Mobile framework to create some pretty slick-looking pages. As it is currently set up, it takes a single map, with chunk set to-content, and produces a single HTML document with the appropriate jQuery Mobile markup to turn each topic into a mobile “page.”

I’ve also set up a few transforms to turn two-column tables and definition lists into collapsible div’s, which I think looks pretty nice. The plugin adds Home and Next buttons to the footer, though it isn’t smart enough yet to know when it has reached the end of the document (so the last page has a broken next button).

The project is still early in development, and may not work on your doc set without some tweaks. I’d love to have some help building this out, so if you are interested either comment below or send me a message on sourceforge.

16 thoughts on “Mobile DITA Content with jQuery

  1. Hi Patrick,

    When I sent an email to you earlier in the week, I had not realized that you had already pushed your JQM plugin to Sourceforge. I’ve downloaded the plugin and will integrate it into my build over the weekend for a test drive.

    I’m interested in JQM as a means of deploying DITA/rich media integrations to the web for mobile device consumption. In particular, I see a lot of blue sky for these types of deployments, especially with the accelerated adoption of HTML5. The DITA community seems slow in diving into HTML5 transtype development, given what could be leveraged from it. I’ve put together a small media integration demo that rides on the back on XHTML output processing, but takes advantage of HTML5 media tag upon arrival to an HTML5-aware browser.

    I think your contribution efforts re: JQM will help to more HTML5 development forward.

    Best,
    Sean Healy

    • Oh, forgot to mention. Let me know if you hit any snags with the JQM plugin. It’s pretty fragile at this point. There’s documentation on the sourceforge wiki page for the project.

    • Excellent! I was one of the key-note speakers at XML 2004 in Washington D.C. I would love to exnpad on and improve my story from two years ago. It would fit into the Enterprise XML Computing track. Also, I’ve just started with a new company, so I can add some new perspectives! Roll on Boston!

  2. Hi Sean,

    I haven’t had a chance to see the demo, but I will certainly check it out. I agree, there hasn’t been much work done on it yet. (Eliot Kimber was interested a while back.) I’m not terribly familiar with the details of HTML5, but JQM seems pretty straight forward.

    It’d be great if we can combine forces and get a solid HTML5/JQM plugin going.

  3. Patrick,
    The weekend came early, so I took the jqmdot plugin for a spin. Nice work — especially for it being so early in development. I ran a demo doc set against the plugin. As you noted above, it took some tweaks for my doc set’s “pages” to link. I’ve yet to roll these changes into the upstream XSL, but it may not be too difficult.

    Also, I mocked up the output as HTML5 and inserted video tags in the form they would appear if processed by the html5media plugin. It’s not perfect, but the content behaved surprisingly well for a first pass in an iPhone. You can find it here: http://lab.wildbasinmedia.com/dita/html5/ab8453/out1/.

    When I get a chance, I’ll run an end-to-end build with both plugins working together. Would you like me to note the snags in Sourceforge or offline?

    Again, good job!

    ~Sean

    • Is anyone still acelvtiy using this tool? My company is trying to export DITA into Confluence and tried out the dita2confluence that is posted on sourceforge, but got some errors. So if anyone is successfully using the tool and happens to read this, please reply, so that I’ll know it is worth our time to investigate further. Thanks.

  4. Although HTML5 gets emphasized for mobile devices, I’m a little curious about choices in Sean’s coding. I see where I expected , and where I expected . Are these just pragmatic nods to how the mobile jQuery CSS stylesheets are defined? Would it work to just add the data-role attributes to the standard syntax (ie, )? I ask because it would simplify transforms if the footer generator could just produce the standard HTML5 which would have normal behaviors if mapped to a standard user agent.

    Also, just a question about standard practice for mobile devices–the plugin seems to produce a multi-page stream, which implies load concerns for large chunks at 3G or slower speeds. My approach has been to serve a topic at a time, with the navigation effectively being API-coded requests for next targets, vs internal links to next viewing chunk in cache. There is a tension between up-front buffering of enough content to keep reading when the connectivity goes down vs lower bandwidth per fetch at risk of losing connectivity or suffering load lag at some point. Have you seen any best practice suggestions on chunking strategy for mobile content?

    Very useful discussion, by the way.

    • Bitten by the need for faux markup. Trying it again for these sentences in my previous post:

      I see [div data-role=”footer”] where I expected [footer], and [div data-role=”navbar”] where I expected [nav]. Are these just pragmatic nods to how the mobile jQuery CSS stylesheets are defined? Would it work to just add the data-role attributes to the standard syntax (ie, [nav data-role=”navbar”])?

      • Hi Don,

        I developed the jquery mobile plugin as a proof of concept to show how content could appear on mobile devices. It was rather low effort, my first experience with jquery, and far from robust or optimized. I didn’t even think about HTML5. That said, I set up the data-role divs according to the jquery mobile documentation. (http://jquerymobile.com/demos/1.0/docs/pages/page-anatomy.html) I will look into using footer and nav when I get back to this plugin (the QA and mypdf ones are in focus right now).

        I think it is absolutely right to serve individual topics. If I recall, I used the multi-page template because I thought it meant multiple html pages 🙂 lol. It worked for my purposes at any rate.

        Any and all suggestions are welcome, and as I said in my post, I’d love to have help developing the plugin further.

  5. To add to comment above…

    Yes, the JQM presentation still works if the JQM CSS hooks are injected into the standard XHTML rather than having to output as HTML5 — although the mocked up HTML5 is valid. After reading the first paragraph of “Mobile page structure”: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html, one might arrive at the conclusion that JQM does not work in any doctype other than HTML5.

    See comments within http://lab.wildbasinmedia.com/dita/html5/ab8453/out1/mount_up_1.0.html, which is not a mockup with video, but does contain tweaks in the XHTML to allow JQM to work, given the doc set I used. A slight technicality is that once the JQM CSS attrs have been rolled in, we no longer have valid XHTML.

    I mocked up the output of jqmdot as HTML5 because I’m interested in finding the best way(s) of pushing media-rich DITA compilations to mobile devices using HTML5 video, audio, and canvas tags. Currently, html5mobile
    (http://sourceforge.net/projects/html5media/) piggybacks on the XHTML transtype, then takes advantage of native media tags when displayed in an HTML5 capable browser. Its output is an an unholy mix of XHTML and HTML5.

  6. Hello Pacman 😉
    I’m trying the plugin and I’m experiencing some issues to generate the output for some content.
    I can’t report bugs via MantisBT (sourceforge), it seems that I need reporter privileges…

    — code omitted —-
    [xslt] /home/d0cster/work/DITA-OT/plugins/jqmdot/xsl/dita2jqmobile.xsl:47: Warning! Creating an attribute here will fail if previous instructions create any children
    [xslt] /home/d0cster/work/DITA-OT/plugins/jqmdot/xsl/dita2jqmobile.xsl:50: Warning! Creating an attribute here will fail if previous instructions create any children
    [xslt] /home/d0cster/work/DITA-OT/xsl/xslhtml/dita2htmlImpl.xsl:3834: Fatal Error! An attribute node (id) cannot be created after the children of the containing element
    [xslt] Failed to process null

    BUILD FAILED

    Else, in the dita2jqmobile you need to replace :
    “plugins/jqmdot/xsl/dita2jqmobile.xsl”
    by “${dita.dir}/plugins/jqmdot/xsl/dita2jqmobile.xsl”

    I’m interested in JQM, can I join the project ?

    • Hi Docster,

      I haven’t been able to get mantis configured properly, so now I’ve disabled it. Are you able to add a ticket to the normal Ticket system? If you’d like to send me a message through sourceforge or to paqdn@ditanauts.org with your sourceforge user name, I can add you to the project. I’d love to have more help. I have not been able to dedicate much time to this plugin – focusing on some new features for the QA plugin.

      Regarding the errors – the plugin is a little flaky at this point. I’m guessing it may have to do with the structure of your input map. The plugin works best with a single, regular map, with chunk set “to-content”.

      I will make that change in the build file – thanks!

  7. I have created a small DITA project (just 2 files/pages) using the jQuery Mobile plugin and have managed to get as far as producing one page of output with the jQuery Mobile markup (similar to the one above). However when I click “Go to next page” nothing happens. I have used the chunk=”to-content” in the ditamap but somehow the second page is not being recognised. Can someone give me some tips on how best to construct my ditamap, which at the moment looks like this?

  8. Hey Patrick,

    I’ve been trying to transform some simple maps into jQM with this plugin. My transforms break every time… I’m using DITA-OT 1.7.4 and I’m not sure if that’s the problem… can you tell me what version of the OT this should work with? The only changes I made to the code were to use updated versions of the jQM CSS and JS files.

    I’ve been writing help content for several mobile platforms by hand in jQM and I would be thrilled to use DITA instead… thanks!

    -Shahir

Leave a Reply

Your email address will not be published. Required fields are marked *


*