Developing Sugar Activities using HTML5: Part #1


Resumen en español al final del artículo

One of the goals at OLPC France is to develop or adapt French contents for Sugar and the XO. For example, in the past we worked on a Nutrition Activity with Danone, on a poetry Activity with Fondation Carla Bruni-Sarkozy and we consolidated a library of free French e-books for children.

One of major teacher's feedback in our recent experimentation at Saint-Denis was the lack of Sugar of Activities to learn to read. These posts explain how we tried to fill the gap, both providing contents and trying to expand community of developers using HTML5.

Where to find contents?

In the beginning of February, ILearn4Free an editor of iStory nice interactive stories for iPad, met Walter Bender to the USAID seminar.

They told quickly about ways to work together. Because ILearn4Free was founded by a Francophone people, Walter sent us the contact. We found that it could be a great opportunity to enhance Sugar contents. So, two OLPC France guys, Bastien and Pierre spent time to exchange with them. Due to the specific way of working of Sugar (all content should be open), we convinced ILearn4Free to open a part of its contents. Finally they decided few weeks ago to distribute freely (under CC BY-SA) a large database of professionally recorded audio and images on a dedicated website, Art4apps.

Because developers have rarely artistic knowledge. We're sure that the Art4Apps database it's a good start to conceive new reading Activities.

How to develop Activities?

Having contents is the first step, the second step is to develop Activities.

Sugar Activities, like Sugar itself, are thought to be developed in Python. Python is a very nice dynamic language. Python has a very clear and readable syntax and is both powerful and simple to learn. More, Python is an interpreted language that allows Sugar Activities to be natively portable on multiple platform (from XO-1/1.5 based on x86 architecture to XO-1.75/XO-4 based on ARM architecture).

But Python is not the most popular programming platform today so all programmers don't know Python. Consequently, it's sometimes complex to find developers interested to contribute to Sugar with a sufficient knowledge in Python. It's why I've worked on a way to develop a Sugar activity using HTML5/JavaScript.

Using HTML in a Sugar Activity is not new. By nature, the Wikipedia Activity embeds HTML contents from years. To do that the idea is to integrate into the activity two things: the Sugar browser to render HTML and, a HTTP server to react to user click by calling Python code. We experimented this architecture for our Nutrition Activity using the Flask framework.

However we've not fully satisfied with this architecture. First because it's relatively complex: three paradigms is in the same application (client code, embedded HTML and HTTP server code). Second because the initial version of Sugar browser is based on an old version of Gecko (the HTML engine from Firefox), so the HTML rendering has very limited capacity.

The solution described above use an alternate way that allow to write Sugar Activities in HTML5/Sugar without any compromise on HTML rendering and on Sugar integration.

To do that, the first thing to do is to use a recent version of Sugar: Sugar 0.96. Sugar 0.96 is now officially available as a signed release for XO 1, XO-1.5 and XO 1.75. Sugar 0.96 came with two very important features:

  • Porting of Sugar to Gtk3 that allow to Sugar to have a powerful and up-to-date graphic framework,
  • Using of WebKit as HTML rendering engine that allow a high-level support of HTML5 features (WebKit is the rendering engine for Chrome and Safari browsers).

The second thing to do is to use the Enyo JavaScript Framework. There are plenty of Open Source JavaScript frameworks on the market today. By the way, Enyo is very simple, elegant, component-oriented and, portable. "Portable" means that an application developed with Enyo could work easily on lot of different devices (smartphones, tablets, ...). So a developer could write an application not only for Sugar but at the same time for other systems. It's very important for developer which could else view Sugar as a "limited market".

Lionel Laské is the president and co-founder of OLPC France.

The second part of Lionel's article will be published on Friday.

Resumen en español: En esta primera mitad de un artículo con dos partes Lionel Laské (el presidente y co-fundador de OLPC Francia) describe sus esfuerzos en cuanto a generar Actividades y contenidos para Sugar con HTML5.


Get OLPC News daily - enter your email address:

Related Entries

2 TrackBacks

Resumen en español al final del artículo

(Editor's Note: This is the second - and last - part of a 1600 word saga on how to develop Sugar Activities using HTML5 and in particular the Enyo framework. You can find ... [more]

In two previous posts here on OLPC News (post #1, [more]


Html5 developers are making the most out of this Geo-location feature offered by HTML5 application development.

it's very cool aplication from HTML, sugar activity become much easier now. just how to make a good interface with HTML