Form. And Content

Steven Pemberton, CWI, Amsterdam

Data-driven Display: A Presentation Manager

CSS presentation mode allows a different set of rules to apply when projecting on a screen.

@media projection {
 ...
}

Advantages:

• the content is easily repurposable
• choice of editing software,
• platform independent,
• a lot of control,
• guarantees a long life for the content: proprietary software has the risk of the content no longer being readable after several years.

Alas, CSS presentation mode is now effectively dead.

New presentations

This has caused the emergence of dozens of Javascript packages to do the same job, such as reveal, remark, webslides, deck, shwr, ...

Disadvantages:

• Not standardised: you can't swap between packages;
• To repurpose content, you have to edit the content files;
• If support for the package disappears (which has happened), you are in trouble: this is like using proprietary software.

Solution: Data-driven form

Very easy: it is a surprisingly small amount of markup;

Allows the continued use and repurposing of existing content without change;

Continues to give the power of XHTML+CSS for styling.

Slides

Get the slides from some source, and create a bind that identifies what a slide is:

<instance id="slides" 
          src="http://www.cwi.nl/~steven/Talks/2018/prague/"/>
<bind id="slide" ref="h:body/h:div[position()=instance('i')/index]"/>

Using an admin instance:

<instance id="i">
    <admin xmlns="">
        <index>1</index>
    </admin>
</instance>

Display one slide:

<group bind="slide">
   ...
</group>

Controls

Slide clicker remotes act like keyboards, and send the characters Page Up and Page Down:

<action ev:event="keydown" ev:defaultAction="cancel">
    <setvalue ref="instance('i')/index"
              if="event('key')='PageUp' or
                  event('key')='ArrowLeft'"
              value=". - 1"/>
    <setvalue ref="instance('i')/index"
              if="event('key')='PageDown' or
                  event('key')='ArrowRight'"
              value=". + 1"/>
</action>

One slide

<group bind="slide">
   <repeat ref="*">
      <output class="h1"  ref=".[name(.)='h1']"/>
      <output class="h2"  ref=".[name(.)='h2']"/>
      <output class="pre" ref=".[name(.)='pre']"/>
      <group  class="p" ref=".[name(.)='p'">...
      ...
   </repeat>
</group>

Only one is matched, so only one is displayed.

Shorter:

<group bind="slide">
   <repeat ref="*">
      <output class="{name(.)}"
              ref=".[name(.)='h1' or name(.)='h2' or name(.)='pre']"/>
      <group  class="p"   ref=".[name(.)='p'">...
      ...
   </repeat>
</group>

More complicated case

<group class="p" ref=".[name(.)='p']">
    <repeat ref="node()">
        <output class="text"
                ref=".[name(.)='#text']"/>
        <output class="{name(.)}"
                ref=".[name(.)='em' or
                       name(.)='strong' or
                       name(.)='code' or
                       name(.)='a']"/>
        <output class="img"
                ref=".[name(.)='img']"
                value="concat(instance('i')/base,@src)"
                mediatype="image/*"/>
    </repeat>
</group>

Analysis

Such an approach is not a perfect replacement for CSS presentation mode, BUT

• the content is still easily repurposable
• you still have the choice of editing software,
• it is still platform independent,
• you still have a lot of control,
• it still guarantees a long life for the content.
• It is only around 100 lines of XForms.
• Compared with for instance shower, to take one example, which is around ten thousand lines, 100Kbytes of Javascript alone.

Source