Kaz’hack - Tag - smilNo ducks were harmed in the making of this weblog.2016-03-22T08:11:52+01:00Kazéurn:md5:a9f47af44d37c17f59ac5db8d567a80dDotclearDocEng2011urn:md5:2039c5c51b6d874e9ed51b89b84715032011-09-17T00:29:00+02:002011-09-17T00:49:08+02:00Kazéhtml5smiltimesheets <p>Next week I’ll be in Mountain View for <a href="https://sites.google.com/site/doceng2011/">DocEng2011</a> — a symposium on Document Engineering, which is hosted by Google this year.</p>
<p>I’ll present my work on <a href="http://wam.inrialpes.fr/timesheets/">timesheets.js</a> (= JavaScript implementation of SMIL Timing and SMIL Timesheets), which has been nominated for the <a href="https://sites.google.com/site/doceng2011/symposium/best-paper-award">best paper award</a>. Wish me luck!</p>One Year At INRIAurn:md5:3858033b332d1dd105d2b6d077ecd9c82011-06-13T20:41:00+02:002011-06-13T20:41:00+02:00Kazéeditorlibremozillasmiltimesheets <p>I have been working for <a href="http://wam.inrialpes.fr/">INRIA</a> for one year now. I am still alive, though extremely busy… and it is high time to give a quick update.</p>
<h3>About My Work</h3>
<p><a href="http://wam.inrialpes.fr/timesheets/">timesheets.js</a>: I have been hired to develop a FLOSS, cross-browser implementation of <a href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL Timing</a> and <a href="http://www.w3.org/TR/timesheets/">SMIL Timesheets</a>. I learned a lot about SMIL and I believe that we are bringing a modern approach of SMIL, reusing HTML/SVG and CSS wherever possible. Most use cases so far are related to multimedia annotations but I think the true power of this technology is to design interactive slideshows in a declarative way — i.e. relying on a standard W3C markup.</p>
<p>My contract has just been extended a bit to work on a wysiwyg editor for timesheets. I am rushing to deliver something usable, I hope I will be able to write another blogpost about this when it is ready.</p>
<p>As this work was a research program focussing on XML edition, I learned a lot on XML and XML editors. I am pretty disappointed by most XML editors so far, mainly because they are often misused — I am more and more convinced that an HTML-based, template-oriented document processing tool-chain would suit most needs.</p>
<h3>Unexpected Side-Effects</h3>
<p>I was accepted as a <strong>member of the SYMM Working Group at W3C</strong>. Not as fancy as being part of the HTML5 WG but still, that means something to me.</p>
<p>I wrote a paper that has been <strong>accepted by the <a href="http://sites.google.com/site/doceng2011/">DocEng2011</a> conference</strong>, which will take place in Mountain View in September.</p>
<p>I learned much more than I would have liked to on cross-browser compatibility issues — read: IE-related issues. I thought I was a good JavaScript developer, but writing JS for Mozilla applications is very different than writing a JS library. As a result, I spent more time struggling with IE (<a href="http://mediaelementjs.com/">MediaElement.js</a> was a rescuer to me) or designing demos than working on the JavaScript library itself… *sigh*</p>
<p>I have been working a whole year with a non-free OS! Now, I have a lot to say about MacOSX… and I am happily getting back to GNU/Linux. I have to admit that there are a few OSX features that I would like to see in GNU/Linux, though.</p>
<h3>The Bad Part</h3>
<p>I thought I could still work on <a href="http://kompozer.net">Kompozer</a> while at INRIA. Unfortunately, I had absolutely no time to take any vacation during this year and very little free time to work on other free projects.</p>
<p>Just to make it clear:</p>
<ul>
<li>yes, the KompoZer project is stalled at the moment since I am the only regular developer and I am too busy;</li>
<li>no, there is no so-called “successor” for KompoZer; there are other projects which address the same needs but with another codebase…</li>
<li>yes, I am still interested in finishing the job I have been doing on KompoZer, i.e. backporting the codebase to comm-central / SeaMonkey.</li>
</ul>
<p>I think dom2text editors are not relevant any more for modern web development. They are still useful and appreciated to learn the basics of web design, a wysiwyg CSS editor can be useful as well, but they will never be an alternative to text2dom editors like DreamWeaver™ or Komodo.</p>
<p>I am convinced that wysiwyg HTML editors should be focussed on <strong>content</strong> instead of presentation. I am thinking of a <strong>“Web Processing Suite”</strong> that could be a real-world alternative to word processors and slideshow editors, and we need a modern, stable, community-maintained editor for that. This has always been my main motivation with KompoZer, and after my work at INRIA I have a pretty sharp idea of what a “Web Processor” should look like.</p>
<h3>The Best Part</h3>
<p>I am not looking for any job at the moment. <strong>I have just signed a 6-month contract with Mozilla</strong> and I will start working with <a href="http://ehsanakhgari.org/">Ehsan Akhgari</a> on the &lt;editor&gt; back-end in mid-July.</p>
<p>Needless to say, I am more than thrilled about this new challenge. More on this subject soon. :-)</p>HTML Timingurn:md5:2275f3fa556c669ba855434dc94bf0612010-08-26T20:30:00+02:002010-09-03T08:54:28+02:00Kazéeditorhtml5mozillasmiltimesheets<p>I’ve just been hired by <a href="http://wam.inrialpes.fr/">INRIA</a> to develop a Mozilla-based, multimedia-dedicated, web authoring tool. I’m working in a team that has been very active in the SVG and SMIL working groups and that has developed <a href="http://www.w3.org/Amaya/">Amaya</a> a while ago. After three months working here, I came up with two conclusions:</p>
<ul><li>the full SMIL spec (≠ SVG animations) is completely overkill for web browsers</li>
<li>the SMIL/Timing module is magic: simple to use and offers a lot of cool features to web pages like timing, media synchronization and user interaction management. I wish this could be part of HTML5!</li>
</ul>
<p>I’m currently working on a JavaScript implementation of the SMIL/Timing module. I’ve had the opportunity to give a lightning talk about this project at the Mozilla Summit in Whistler, and I’ve made significant progress since.</p>
<p>Here’s a quick overview of SMIL/Timing and how we can use it in web pages. The full story and all the demos are on <a href="http://labs.kompozer.net/timesheets/">labs.kompozer.net/timesheets</a>.</p>
<h3>Timesheet Scheduler (Demo!)</h3>
<p>I’ve started to implement the SMIL/Timing and SMIL/Timesheets specs in a JavaScript <a href="http://labs.kompozer.net/timesheets/index.xhtml" hreflang="en">Timesheet Scheduler</a>: with this small JS lib (less than 4KB for the minified/gzipped version), a lot of timing features and user interactions can be described without writing any specific JavaScript code. This can be easily used to design an slideshow like this one:</p>
<iframe src="http://labs.kompozer.net/timesheets/index-frame.xhtml" scroll="no" style="width: 670px; height: 420px; margin-left: -30px; border: medium none; overflow: hidden;">
<a href="http://labs.kompozer.net/timesheets/"><img alt="HTML Timing" src="http://kazhack.org/public/screenshots/htmlTiming.png" title="Your browser doesn’t support iframes — click to see the demo!"></a>
</iframe>
<p> The full demo is available here: <a href="http://labs.kompozer.net/timesheets/">labs.kompozer.net/timesheets</a>. </p> <p> Instead of trying to implement the whole SMIL/Timing spec, I’ve focused on four basic use cases:</p>
<dl>
<dt>
<a href="http://labs.kompozer.net/timesheets/banner.xhtml">Rotating Banner</a>
</dt>
<dd>
a simple example to demonstrate the basic concepts of time containers
</dd>
<dt>
<a href="http://labs.kompozer.net/timesheets/video.xhtml">HTML Subtitles</a>
</dt>
<dd>
synchronizing rich subtitles with a video stream <br />
<em>(requires &lt;video&gt; support)</em>
</dd>
<dt>
<a href="http://labs.kompozer.net/timesheets/audio.xhtml">Annotated Audio</a>
</dt>
<dd>
synchronizing textual descriptions of musical sections
and introducing declarative user interaction <br />
<em>(requires &lt;audio&gt; and SVG support)</em>
</dd>
<dt>
<a href="http://labs.kompozer.net/timesheets/slideshow.xhtml">Slideshow Engine</a>
</dt>
<dd>
nesting time containers to create a highly flexible slideshow engine</dd>
</dl>This is the very first release of this Timesheet Scheduler (v0.1, MIT license). The next version should support event-values and open up a lot of user interaction possibilities.<br /><h3>Browser Requirements</h3>
<p>This demo works with all modern browsers: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.60+.</p>
<p><strong>Firefox users</strong>: these demos work with Firefox 3.x but you’ll get a better experience with Firefox 4 (read: with
CSS transition support).</p>
<p><strong>Internet Explorer users</strong>: I’m
afraid your browser isn’t supported yet — the IE9 support should come
soon, though.</p>
<h3>Timing Markup</h3>
<p>Here’s an overview of the markup used in the first slideshow:</p>
<pre>&lt;<span class="tagName">div</span> <span class="attrName">class</span>="<span class="attrValue">highlight</span>" <span class="attrName">smil:<em>timeContainer</em></span>="<span class="attrValue">excl</span>" <span class="attrName">smil:<em>first</em></span>="<span class="attrValue">restart.click</span>"&gt;<br /><br /> &lt;<span class="tagName">div</span> <span class="attrName">id</span>="<span class="attrValue">slide1</span>" <span class="attrName">smil:<em>begin</em></span>="<span class="attrValue">0:00</span>" <span class="attrName">smil:<em>timeContainer</em></span>="<span class="attrValue">par</span>"&gt;<br /> &lt;<span class="tagName">p</span>&gt; Ever wanted to… &lt;/<span class="tagName">p</span>&gt;<br /> &lt;<span class="tagName">ul</span> <span class="attrName">smil:<em>timeContainer</em></span>="<span class="attrValue">par</span>"&gt;<br /> &lt;<span class="tagName">li</span> <span class="attrName">smil:<em>begin</em></span>="<span class="attrValue">0:02</span>"&gt;<br /> create your own slideshow in HTML?<br /> &lt;/<span class="tagName">li</span>&gt;<br /> &lt;<span class="tagName">li</span> <span class="attrName">smil:<em>begin</em></span>="<span class="attrValue">0:04</span>"&gt;<br /> synchronize HTML content with multimedia streams?<br /> &lt;<span class="tagName">small</span>&gt;(subtitles, transcriptions, annotations…)&lt;/<span class="tagName">small</span>&gt;<br /> &lt;/<span class="tagName">li</span>&gt;<br /> &lt;<span class="tagName">li</span> <span class="attrName">smil:<em>begin</em></span>="<span class="attrValue">0:06</span>"&gt;<br /> animate HTML elements?<br /> &lt;/<span class="tagName">li</span>&gt;<br /> &lt;/<span class="tagName">ul</span>&gt;<br /> &lt;<span class="tagName">h2</span> <span class="attrName">smil:<em>begin</em></span>="<span class="attrValue">0:08</span>"&gt;<br /> …without writing any single line of JavaScript?<br /> &lt;/<span class="tagName">h2</span>&gt;<br /> &lt;/<span class="tagName">div</span>&gt;<br /><br /> &lt;<span class="tagName">div</span> <span class="attrName">id</span>="<span class="attrValue">slide2</span>" <span class="attrName">smil:<em>begin</em></span>="<span class="attrValue">0:12</span>" <span class="attrName">smil:<em>timeContainer</em></span>="<span class="attrValue">par</span>"&gt;<br /> […] <br /> &lt;/<span class="tagName">div</span>&gt;<br /><br /> &lt;<span class="tagName">div</span> <span class="attrName">id</span>="<span class="attrValue">slide3</span>" <span class="attrName">smil:<em>begin</em></span>="<span class="attrValue">0:24</span>" <span class="attrName">smil:<em>timeContainer</em></span>="<span class="attrValue">par</span>"&gt;<br /> &lt;<span class="tagName">dl</span> <span class="attrName">smil:<em>timeContainer</em></span>="<span class="attrValue">par</span>"&gt;<br /> […] <br /> &lt;/<span class="tagName">dl</span>&gt;<br /> &lt;<span class="tagName">p</span> <span class="attrName">smil:<em>begin</em></span>="<span class="attrValue">0:04</span>" <span class="attrName">class</span>="<span class="attrValue">menu</span>"&gt;<br /> &lt;<span class="tagName">a</span> <span class="attrName">href</span>="<span class="attrValue">about.xhtml</span>"&gt;Learn more…&lt;/<span class="tagName">a</span>&gt;<br /> &lt;<span class="tagName">a</span> <span class="attrName">href</span>="<span class="attrValue">#download</span>"&gt;Download!&lt;/<span class="tagName">a</span>&gt;<br /> &lt;<span class="tagName">button</span> <span class="attrName">id</span>="<span class="attrValue">restart</span>"&gt;Restart&lt;/<span class="tagName">button</span>&gt;<br /> &lt;/<span class="tagName">p</span>&gt;<br /> &lt;/<span class="tagName">div</span>&gt;<br /><br />&lt;/<span class="tagName">div</span>&gt;</pre>
<p>The markup is rather self-explanatory and relies on two basic concepts</p>
<ul><li>time containers define the timing model of child nodes (&lt;par&gt;allel, &lt;seq&gt;uential or &lt;excl&gt;usive);</li>
<li>the "begin" and "dur" attributes provide a basing timing description. Yes, this is the same syntax as the one used in SVG Animations.</li>
</ul>
<p>That’s simple and efficient. The four examples on <a href="http://labs.kompozer.net/timesheets/">labs.kompozer.net/timesheets</a> should be a step-by-step tutorial, and I have a few other demos in mind that I’ll add with the next release of our timesheet scheduler.</p>
<h3>References: SMIL Timing and Timesheets</h3>
<p>
The <a href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-IntegrationAttributes">SMIL/Timing</a>
recommendation specifies two attributes, <code><a href="http://labs.kompozer.net/timesheets/timeContainer.xhtml">timeContainer</a></code> and <code><a href="http://labs.kompozer.net/timesheets/timeAction.xhtml">timeAction</a></code>, to integrate timing and
synchronization features into HTML documents:
</p>
<blockquote>
<p>
The modularization of SMIL 3.0 functionality allows language designers
to integrate SMIL Timing and Synchronization support into any XML
language. In addition to just scheduling media elements as in SMIL
language documents, timing may be applied to the elements of the host
language. <strong>For example, the addition of timing to HTML (i.e.
XHTML) elements will control the presentation of the HTML document
over time, and to synchronize text and presentation with continuous
media such as audio and video.</strong>
</p>
<p>
Two attributes are introduced to support these integration cases. The <a href="http://www.w3.org/TR/SMIL3/smil-timing.html#adef-timeContainer">timeContainer</a>
attribute allows the author to specify that any XML language element has
time container behavior. E.g., an HTML <code>&lt;ol&gt;</code> ordered
list element may be defined to behave as a sequence time container. The <a href="http://www.w3.org/TR/SMIL3/smil-timing.html#adef-timeAction">timeAction</a>
attribute allows the author to specify what it means to apply timing to
a given element.
</p>
</blockquote>
<p>
The <a href="http://www.w3.org/TR/timesheets/#smilTimesheetsNS-Introduction">SMIL/Timesheets</a>
draft suggests another way to use SMIL/Timing (and SMIL/BasicAnimation)
with HTML documents:
</p>
<blockquote>
<p>
<strong>This language allows SMIL timing to be integrated into a wide
variety of a-temporal languages</strong>, even when several such
languages are combined in a compound document. Because of its similarity
with external style and positioning descriptions in the Cascading Style
Sheet (CSS) language, this functionality has been termed SMIL
Timesheets.
</p>
<p>
<strong>SMIL Timesheets can be seen as a temporal counterpart of
CSS.</strong> Whereas CSS defines the spatial layout of the document and
formatting of the elements, SMIL Timesheets specify which elements are
active at a certain moment and what their temporal scope is within a
document. And as with CSS, SMIL Timesheets can be reused in multiple
documents, which can provide a common temporal framework for multimedia
presentations with different contents but identical storylines.
</p>
</blockquote>
<p>In other words, we’re not re-inventing the wheel or thinking of another slideshow engine: we’re just implementing an official W3C recommendation.</p>
<h3> What's The Point? </h3>
<p><strong><q> Web Browsers Already Support SMIL </q></strong></p>
<p>
No they don't.
</p>
<p>
Modern web browsers (read: all except Internet Explorer) support
<em>declarative SVG Animations</em>, which rely on the SMIL/BasicAnimation
module — hence the (common) confusion — but can't be used for HTML timing.
They don't support the whole SMIL recommendation.</p>
<p><strong><q> Why Don't You Implement SMIL Instead? </q></strong></p>
<p>
The SMIL spec is huge, it includes a specific box-model which is very far
from the HTML/CSS one, and it's only partially implemented by a few media
players. It might be possible to implement SMIL in modern web browsers,
too, but we think it would be inadequate:
</p>
<ul>
<li>
web authors would have to learn SMIL, which is much more difficult to
use than HTML
</li>
<li>
we don't want to include a SMIL section in a web page: we want to
control the timing of the whole web page!
</li>
<li>
HTML5 and CSS3 are already fine to describe the content and layout;
all we need is a standard, declarative timing language.
</li>
</ul>
<p>
SMIL has been designed for <em>advanced</em> synchronization tasks. Some
SMIL aspects have already been ported to web standards (e.g. SVG
animations and CSS transitions), our project is about porting
SMIL/Timing and Timesheets to web documents.
</p>
<p><strong><q> I Can Already Do That With Flash/JavaScript </q></strong></p>
<p>
That's right. And you can still use JavaScript to get some rollover
effects if you don't want to use the CSS <code>:hover</code>
pseudo-class. ;-)
</p>
<p>
The point is precisely to use a <strong>declarative</strong> language for
all the common tasks that currently require JavaScript development:
</p>
<ul>
<li>
that's much easier for web authors (and for web authoring tool
developers);
</li>
<li>
that's a much better way to achieve a good accessibility / indexability;
</li>
<li>
that's easier to maintain, since no specific JavaScript code is used.
</li>
</ul>
<p>
As this declarative language is (almost) standard, web browsers could
implement it eventually. Until then, we'll provide a free, generic,
JavaScript implementation.
</p>
<p><strong><q> IE Already Supports HTML+Time And Nobody Cares </q></strong></p>
<p>True: Microsoft started supporting HTML+TIME 10 years ago with IE 5.5;
but without SVG, &lt;audio|video&gt; elements and CSS transitions, there
hasn't been many real-life use cases so far.</p>
<p>
We think it's more than time to bring a modern, standard equivalent of
HTML+Time to the web. Especially for multimedia-related tasks.
</p>
<h3>Roadmap</h3>
<p><strong>Bugfixing</strong>: before starting to work on the new editor, I have to get a stable Timesheet Scheduler first. In case you want to contribute: this JS lib is open-source (MIT license), code reviews and patches are welcome.</p>
<p><strong>Event-values support</strong>: I’m not planning to implement the whole SMIL/Timing spec but at the very least, I need a better <a href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-EventValueSyntax">event-values</a> support to describe more complex user interactions. Our goal is to get a full-featured web documentary engine.</p>
<p><strong>Internet Explorer support</strong>: IE9 should be relatively easy to support (though CSS transitions will probably not work on this browser), but for older IE versions this is gonna be tricky as this SMIL/Timing implementation focuses on media synchronization, and requires &lt;audio|video&gt; support. A solution would be to use &lt;object&gt; fallbacks targetting the Windows Media Player plugin and design a JavaScript layer that would expose an HTML5-like API to control these object nodes (i.e. play/pause and the “timeupdate” event). If you heard about such a library, please ping me.</p>
<p><strong>Timesheet Editor</strong>: the final goal of this project is to get an easy-to-use, multimedia page authoring tool. It will be based on Kompozer / SeaMonkey Composer, which will leave me some time to port Kompozer to Gecko 2 and backport most of its code to SeaMonkey. Yes, somehow I’ll get paid to work on Kompozer! *\o/*</p>
<p>Many thanks to <a href="http://hanblog.info/blog/">Anthony Ricaud</a> for his tips, and to Kompozer contributors for their early feedback.</p>