Dyspraxia is a serious learning disability for 250.000 children in elementary schools in France. Not that French children are particularly disadvantaged. It just happens that it seems to be a very wide spread kind of disability and the proportion of dyspraxic children should roughly be the same from country to country. In order to overcome this obstacle, the nonprofit organization I currently work for is leading the way toward adapting the ergonomy of existing paper textbooks and helping textbook editors creating the accessible (and digital) textbook of the future. Maybe you’ve heard of any similar initiatives ?
Their first attemps were made using a French e-learning authoring tool called Didapages. Up to version 1.1 it was free for non-commerciale uses. Version 2 is much more commercially oriented. And closed-source. And only runs on Windows. And despite its ease of use for educators and non-IT specialists, it has several drawbacks and limitations, partly due to the technology it uses, Flash, and partly because its developer does not think he can build a sustainable business model using free software licensing. Too bad. I am looking for an alternative solution, as some part of its user community does.
Free software packages such as Xerte, eXe, Scenari, Docebo and others look attractive. But none is the ideal solution : either they are also based on Flash, or their community is almost non-existant and their development may have stopped some time ago. Educators are not developers. And the crowd of educators might be missing a critical mass of developers in order for a very striving free software community to have developped around any elearning authoring tool. The bells and whistles of proprietary products have much more appeal to the average teacher.
From a technology perspective, I had a look at open standards for acessible, animated and interactive contents. W3C, please show me the way. The relevant standards seem to be :
- HTML 5 for content, with its Javascript-animated « canvas » element for sprite-based animations (for bitmaps graphics) ;
- SMIL for animated documents and for limited interactivity, possibly also combined/extended with Ecmascript for more interactivity ;
- CSS for styling, possibly some day with Webkit-like CSS animation but this option does not excite me much ; CSS animation may require Javascript or SMIL
- SVG for graphics : there is such a thing as SVG Animation, and Ecmascript can be embedded in a SVG file in order to provide more interactivity and to overcome some current interactivity limitation of SMIL ; SVG is for vector graphics but could also embed (and animate) bitmap graphics (used as sprites).
The advantage of SMIL and SMIL-animated SVG over Flash seems to be that SMIL is a declarative technology. This « document » model allows less dependency on scripting and more flexibility through earlier or further transformations (with templating, XSLT or content management engines). This allows the animation and, to a lesser extent, interactivity aspects of educational content to be a native part of the content itself and not to be an afterthought. It facilitate later and looser coupling with further technologies. It allows more ReSTfullness (restafari !). It does not cause cancer. Well, I don’t know. It tastes good. (note to myself : consider discarding this whole paragraph) :)
Flash applets, on the other hand, can be made somewhat accessible but this may not be an easy task for the average Flash developer, and SMIL sounds like a much more accessibility-friendly technology. There even is a DAISY profile for SMIL documents. I should have a deeper look into these profiles.
But interactivity with specific application logic seems to require a bit of scripting anyway, doesn’t it ? Here comes Ecmascript with SMIL, which should probably be limited to a minimum. Can you always provide accessibility-safe fallback mechanisms for a SMIL document if you introduce scripting for interactivity ? I am not sure. I will have to figure this out. Maybe the DAISY SMIL profile tells me more about this.
After a first glance at these standards and being an non-expert in animated contents, it seems to me that there ARE available and mature open standards which cover most of the accessible and digital textbook related concerns. There should be no need to develop any addiction for Flash authoring systems.
But the problem is that these standards are still « emerging ». They were proposed several years ago, are slowly maturing and their support in modern web browsers only starts to become a reality. The most advanced support for SMIL-animated SVG comes with Opera. And is said to be available in Firefox 3.6 as far as I understood. I’ll test this stuff with Opera until Firefox 3.6 comes to ubuntu. The lack of consistent support for SMIL and SVG animation can be overcome with the use of free software SDK or Javascript libraries which take SMIL elements as input and generate equivalent Javascript instructions as output. For instance, the RaphaelJS Javascript library allows browsers to support animated SVG even if such a support is not built-in for them. As far as I understand, the Ample SDK allows SMIL animations to be supported by non SMILable browsers, too.
The main problem is not in web browser support, though. The main problem is that there is almost no (free software) authoring tools for such animation and interactivity technologies. Limsee2 is a code editor/development environment for SMIL (does it support SVG animation ?) but its INRIA authors stopped working on it some time ago. And there seems to be no real community behind it. Limsee3 is not a further version of Limsee 2 (despite the name). It is a WYSIWYG SMIL authoring tool but it does not seem to support SVG animation (does it ?). And it may also probably stop being developed as soon as the governmental subsidies behind the corresponding research project end. Yet another research package soon to be dying on the labs shelves ?
This sends me back to my above observation about the non-existence of a sufficiently-big or proficient-enough community of educators who can use AND develop such advanced authoring tools with accessibility in mind. Too bad…
Madswatter and Ajax animator are very early prototypes for animation authoring environments. There are other free software attempts currently aiming at proposing a proper animation editor: clash/geesas (which is a fork of pencil) and moing… Maybe you’ve heard of other projects ? Inkscape has some plan for introducing SMIL authoring capabilities. There even is a mockup of the user interface for the timeline-based authoring of animations. This is work in progress. Well, maybe this is more than just a work on blueprints : the Inkscape roadmap mentions simple and limited animation authoring as a feature for their next release (version 0.48) ! The 0.49 version should focus on much more support for animated SVG. Exciting ! This topic is hot right now. Itches are starting to be scratched a lot !
That being said, I realize I already have a tool for authoring animations. It’s Open Office Impress. And the Impress wiki tells me that its animation are based on SMIL ! When I have a look at the xml file saved by Impress (inside its ODP zipped archive), I can indeed see SMIL element names and attribute names mixed with Open Office specific elements and attributes, even though the resulting document may not be SMIL compliant, strictly speaking. A limited effort (XLST or a custom extension) may allow to produce real SMIL documents.
Instead of using elearning-specific authoring tools (think Xerte, eXe, …), what if futur editing software for educational contents were tools I (or any educator) already have on my desk : Inkscape for the creation of bits of animated graphics and/or Open Office Impress for the layout and animation of the overall animated document? In Inkscape, the « properties » window of any object even reveals some event fields for Ecmascript/Javascript instructions (onclick, onmouseover, etc.). Too bad Impress can’t properly import SVG content. But maybe this is not required. In the end, e-learning specific tools would be required anyway for the packaging of the resulting animated and interactive content into Learning Management Systems such as Moodle. Such content packages would need to be made SCORM or AICC compatible so that they expose their navigational and educational structure to these platforms via a standard API. I read the SCORM is not ideal as such an API from an accessibility perspective because it heavily relies on Javascript (it is a Javascript API). But does the use of a scripting language always prevent accessibility ? I don’t know. SCORM may be nice for portability from LMS to LMS. But so nice for accessibility.
At the moment, I feel like the ideal authoring chain of tools for educational content / textbooks would be as follows :
- Inkscape in order to create the graphism, layout and animation of individual educational « applets » : cross words, coloring books, simulations, geometry tools, … the result being saved as an animated (and partial SMIL-interactivity) SVG file with event-hooks being defined so that we can go to the next step
- an ECMAscript code editor (I am not into this emacs thing… Eclipse anyone ?) in order to transform this animated SVG file into an animated AND interactive SVG piece of content
- Open Office Impress in order to create the layout, structure and general content of your course/manual/textbook chapter/whatever, inserting the SVG file and adding further animations as well as individual multimedia items (sound clips, videos, hyperlinks), the result being saved as a SMIL/HTML document
- More scripting edition of this document if needed (but would it be needed at this stage ? I can’t tell)
- CSS styling would be made ready for the document at this stage or earlier (can Open Office make any use of existing CSS stylesheets or would it always mix them into its own content format ?)
- a SCORM packager such as Reload Editor would import this content and allow the author to specify the SCORM relevant bits of information, the result being saved as a Moodle-ready package
- Your favority Moodle-like LMS platform would serve the content to users, possibly running on their laptop in an offline fashion
This whole chain of tools would probably benefit from being powered by a web content management system (Plone ? Drupal ?) so that the assembly line is smoother and allows widespread collaboration, with workflows, access control and so on. No need to get stuck back to the Dreamweaver era of the I-am-waiting-for-the-Dreamweaver-guy-to-update-my-textbook.
Now it’s your turn. What do you think ?
Ping : Tweets that mention SMIL-animated SVG for adapted textbooks « AkaSig -- Topsy.com
Bonjour Jean !
This blog post is full of interesting information. I see that your are involved with BrailleNet [1] as well as with DMF [2]. I hope the best for these projects.
I am currently working as a software engineer for the DAISY Consortium, so I obviously have a very strong interest in accessible multimedia technology. Publications authored in the DAISY open-standard contain synchronized text, images and audio, and as you found out, it is based on a subset of SMIL. I am involved in the specification work for the next version of the DAISY format, which will enable new media types such as video, and will use more advanced features of SMIL 3. However at this stage there are no plans to provide support for animated content (SVG is used for lossless scalable static images only).
Coincidentally, I was involved in the LimSee2 project. Just like you said, the lack of community and funding for this project means that it is not maintained anymore. Although the application actually provides some support for visual animations already, I doubt that it is sufficiently polished for real-world multimedia production.
There are a number of proprietary close-source solutions for authoring and distributing animated content, but I’d like to see more happening in the open-source domain and based on interoperable open-standards. It would be great to have HTML5 + SMIL implementations in mainstream web browsers, as this would lower the entry cost and open a new realm of possibilities for content designers. SVG animations are a good start, but I have yet to see the kind of document integration that would enable content producers to easily author educational material in an accessible form.
Kind regards, Daniel
[1]
http://www.wecena.com/beneficiaires/braillenet/adaptation-douvrages-numeriques-pour-les-personnes-empechees-de-lire
[2]
http://www.wecena.com/beneficiaires/dyspraxique-mais-fantastique-dmf/adaptation-de-manuels-scolaires-pour-enfants-ayant-des-troubles-de-lapprentissage
SMIL animation in Mozilla is scheduled for the release *after* Firefox 3.6, not for Firefox 3.6. See:
http://jwatt.org/svg-open/2009/slides.xhtml#%288%29
OK. Thanks for this.
Daniel,
I am helping with the coordination of volunteers for DMF. They are making some textbooks accessible for dyspraxic children. At the moment, I haven’t managed obtaining full-time volunteers for BrailleNet but I have good hope to succeed in the coming months.
You say that there is no DAISY plan to support animated content. Too bad… Animated content and, above all, interactive content is a must have for accessible textbooks. Very simple things are required like, for instance, being able to select the right answer for « 1+1= ? », given a list of possible answers. Mouse-clicking on « 2 » would let « 2 » appear in an answer box. Ideally, a TTS system would be allowed to be triggered by the mouse-clic and would read « 2 » aloud, using some accessibility-friendly standard. In more complex setups, clicking the « orange » color on a color palette which displays « 2 corresponds to orange » would fill the « 1+1 » SVG path of an image with the selected orange color, thus allowing « magic colouring » exercices. And the voice would say « 1+1 equals 2, corresponding to orange » for instance. Or clicking on a set of objects would trigger both an animation with these objects (being moved by a character into a box, for instance) and the reading of the number of objects aloud… Maybe animation is not as critical to making accessible textbooks for children as interactivity is. I don’t know if including some SMIL interactivity in DAISY would help a lot (because I don’t master SMIL nor DAISY at this point) but it may.
In the process of making children textbooks accessible with IT, we have identified three areas of work :
1) producing a library of highly interactive (and most often animated) components such as a « magic coloring » applet as described above, or a crossword applet ; a paper maths textbook for children the age of 6 or 7 may contain about 150 pages and 600 exercices which could be mapped to a basic library of about 45 templates ; the goal would be to produce this library of about 45 template exercices in the form of basic components or applets
=> (SMIL-)animated SVG + Javascript may be suitable for this part of our work, I think ; we would use Inkscape then a JavaScript IDE ; the library of templates would be a library of SVG document templates to be filled with parameters using some web content management software for instance
The most popular approach out there for this is to make Java applets (see jClic) or, even more often, to produce Flash applets.
2) assembling these template-based interactive exercices into a textbook, filling forms with fields describing the content and parameter of the exercices, possibly adjusting the layout of the exercice on the screen
=> I don’t know if SMIL would be required at this step ; maybe plain HTML documents embedding the SVG documents above would be enough for most of our cases ; and the production may be done using some web content management software, too ; either a web CMS would be enough or we would need a more flexible document-authoring tools which would support templates (Dreamweaver-like but with SVG support ? and maybe richer-templating support ?)
3) defining accessibility rulesets or maybe accessibility stylesheets : Given the disabilities of a child, the textbook would be rendered applying a series of accessibility rules such as : « use this font with this size », « double-sized line spacing », « text paragraph should alternate blue lines with red lines », « in numbers, units should be displayed in red, tens in blue, hundreds in green », and so on.
=> provided that text, numbers and other basic content elements are properly described in the first step (when producing template exercices), CSS styling may be the simple tool needed here, unless some of our accessibility rules happen to be unmanageable using CSS… not sure at the moment.
Somewhere in the process, some tool would care about making the textbook SCORM-ready.
Daniel, do you think some INRIA folks may be interested in working on such cases with DMF and with the INSERM lab which DMF partners with ?
Hello, I suggest that you contact Vincent Quint of the WAM project at INRIA:
http://www.inria.fr/personnel/Vincent.Quint.en.html
http://wam.inrialpes.fr/index.en.html
Kind regards, Daniel
I will contact Vincent Quint. Thanks !
As an update, here are some notes about the setup I am considering for the building of our accessible K-12 textbooks :
1) a set of open standards to use :
– WAI-ARIA for accessibility, and possibly DAISY when applicable,
– CSS for styling,
– HTML DOM storage for the persistence of the answers of children exercising with the textbook,
– SCORM for portability to Learning Management Systems
– Animated SVG for most content pieces (SMIL-animated whenever possible, Javascript animated only when required)
2) some tools and technologies :
– jQuery as a common Javascript framework
– Inkscape as the SVG editor
– Aptana Studio as the Javascript and CSS editor
– kompozer if we need an HTML WYSIWYG editor
– beebole.com’s PURE templating engine to allow SVG files to used as templates (or a Javascript implementation of TAL, such as Jugl)
– OpenOffice Impress if SMIL snippets are to be created then injected into the SVG files produced by Inkscape (or Powerpoint and the PowerPoint2SMIL converter ?)
3) an overall process
a) develop and maintain an accessible textbook library with Javascript, using jQuery as the underlying framework :
– takes care of persistence of answers in exercises
– takes care of accessibility of user interface widgets (ARIA)
– plugs into the templating engine
– connects to (JSON) structured datasources in order to retrieve description of the exercises
– animates SVG files using a Javascript framework whenever the browser does not support animated SVG (using an existing library such as svgweb, raphaeljs or ?)
b) create an (X?)HTML table of contents of the textbook to make
c) build template exercises for this textbook :
– identify those groups of exercises which share a very similar user interface (about 50 templates per textbook vs. 500 individual exercises per textbook)
– create a static SVG file (using Inkscape), with Javascript event hooks wherever needed
– animate it either (using Inkscape when it supports animation authoring or) using an XML editor or by inserting modified SMIL snippets taken from OpenOffice Impress .ODP archive-files (or using Powerpoint2SMIL)
– create an (X?)HTML container for the SVG file if needed, using kompozer (or any text editor)
– add WAI-ARIA declarations wherever needed
– add Javascript animations and interactivity functions to the SVG file (or to the X/HTML file?), maybe our library could take care of the some or all WAI-ARIA declarations at this step
– move styling instructions out of the SVG file to a corresponding CSS file whenever possible (using Aptana Studio for both the SVG file and the CSS file)
– add Javascript references to the X/HTML file header so that it refers to our textbook library and can be appropriately rendered
– add templating instructions (elements and attributes) to the SVG or X/HTML file as required
– find a way to have Inkscape preserve the additional (Javascript + SMIL + template declarations + ARIA + CSS references) bits inserted in the SVG file
d) describe exercises with structured data and content
– identify the corresponding template for every exercise in the textbook
– store the required bitmap files in a conventional folder hierarchy
– create a JSON file for this exercise in order to be able to fill the corresponding template
– test this exercise using the textbook library (i.e. using a web browser at the TOC X/HTML file).
e) develop and maintain the CSS file for the textbook
f) package the textbook
– using a SCORM packager such as ReLoad Editor
– test the package on Moodle or similar LMS
– also package it as a simple ZIP file or tarball…
That sould be it. I will now have to make a proof-of-concept or find some of my volunteers to do so.
Ping : SVG as an alternative to Flash, here comes bliotux « AkaSig
The earliest Firefox release to include SMIL will be the Firefox release that uses Gecko 1.9.3. It Probably will be Firefox 3.7!
If you’d like to test Mozilla’s SMIL support.. check this out: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-central/
Regards from Germany
Thanks Mario !
What an amazingly detailed post you’ve written there. Love the enthousiasm there. I’ve done some research and I think you might find the following article very interesting:
http://www.codedread.com/svg-support.php
I hope to read more of these posts soon!
What an amazingly detailed post you’ve written there. Thanx for this detailed post! thx!
Thanks Mario ! Well done!
Keep on the good work Mario.
Thanks Mario !
Thanks for the information !
Saw your post 6 months ago but can only comment now. I now have the tool that meets your criteria (animated, interactive, accessible, cross-browser, free…). Not 100% perfect (right now authoring in powerpoint windows only), but it is the best possible at the moment to build accessible textbook.
After exploring available technologies, I decided SVG/SMIL is not ripen yet. SVG is still not indexed with search engines, and SMIL support is still far. I went with CSS filter for IE (still works on IE9), and CSS transform for other browsers. HTML5 audio/video is used when possible, otherwise Flash.
If you still keep the interest, then try it out (http://www.slidego.com), or contact me for better understanding. I will be happy to offer the platform to your organization the way it suits best.