html5 + js: the future of open education

HTML5 + JS: The Keys to Open Education

HTML5 + JS:The Keys to Open Education

The Karma Projecthttp://[email protected]: CC-BY 3.0

Demo First, Talk Later

Before you wade your way though 55+ slides, please take a look at the demo. If you are a web developer, please take a look at the code.

http://karma.sugarlabs.org/examples/adding_up_to_10/index.html

Everybody wants Education 2.0

Lots of universities, schools, governments want to use software in education

Kids around the world, particularly in poor countries, need interactive, free materials

The current method of education in much of the developing world is:

Teacher Speaks, Kids Repeat

An Education Myth

Rote Learning is good for you, look at all those successful asians in the USLarge percentage of those asians attended private schools or special public schools that look a lot like western schools, but often more rigorous

Those who attended public schools have largely succeeded on their own merits not because they had to memorize whole books as children

The Missing Teachers

Who is going to teach all these kids algebra?

Talented teachers won't move to rural India, Pakistan, Nepal, Africa for another generation. Vast majority of people who know maths, English, good writing emigrate or go into private sector NOT teaching in a village

The Missing Teachers



We need to fill this gigantic learning void

We need to empower good teachers and accommodate those learners that don't have access to good teachers

And You Can Help!

Bryan Berry, CTO of OLE Nepal, had interesting experience on one visit to a Nepali school. He asked a 3rd grader what the sum of 3 + 1 is. The child enthusiastically responded 4! Bryan then asked the child what the sum of 1 + 3 is. The child had no idea. He had memorized addition problems but had no actual understanding of arithmetic

Bryan Berry, CTO of OLE Nepal, had interesting experience on one visit to a Nepali school. He asked a 3rd grader what the sum of 3 + 1 is. The child enthusiastically responded 4! Bryan then asked the child what the sum of 1 + 3 is. The child had no idea. The child had memorized addition problems but had no actual understanding of arithmetic

Anecdote

Bryan Berry, CTO of OLE Nepal, had interesting experience on one visit to a Nepali school. He asked a 3rd grader what the sum of 3 + 1 is. The child enthusiastically responded 4! Bryan then asked the child what the sum of 1 + 3 is. The child had no idea. He had memorized addition problems but had no actual understanding of arithmetic

Problems with Current Approaches

Most interactive educational software today suffers from one or more problems:

Proprietary (Flash)

Tied to a particular platform

KDEedu (KDE)

Pygame +PyGTK (gnome)

Very small educational dev communities gcompris, KDEedu, Squeak

But Flash is the Standard!

Flash is the standard for developing proprietary educational software

But the open-source Flash communityis small and not very activeEven Worse:i18n mechanism too complicated

Doesn't render indic fonts properly sorry 2 billion people!

PyGame+PyGTK are great but . . .

Time consuming to set up development environment

You can't show off your creations through the browser

Separate markup, presentation, and code? Nope

Very, very few programmers in developing countries know these technologies

If You hadn't Guessed

HTML5 + Javascriptare the answerLots of programmers in developing countries know these technologies due to outsourcing boom

Great unicode and font-rendering support

Low barrier to entry, new coder only needs text editor and browser to get started

A Lot of Work Ahead

JS still lacks standard high-level drawing functions

Browser performance is very inconsistent, particularly for certain kinds operations

Lack of good i18n mechanisms that don't require a server

Road to Karma 1

Open Learning Exchange Nepal (OLE Nepal) is a Nepali NGO implementing the OLPC project in Nepal

2000 XO laptops deployed so far

More importantly, several hundred teachers trained how to use XO's in classroom

Educational content aligned with curriculum critical to project success

Road to Karma 2

OLE Nepal has been producing open-source educational software for 2 years now

Tried squeak and pygame + pyGTK but development too time-consuming

OLE Nepal has been using Flash for last 18 months and happy with it, BUT . . .

Lack of External Support

To date, not one single developer outside of OLE Nepal team has submitted a patch despite our best efforts

Relative to the huge # of devs working w/ flash

IRC, mailing list traffic low

Limited open-source tooling and supporting documentation

The Open-Source Flash Community will likely remain small

Despite the great work of the free software community on projects like Gnash and the GameSWF library, there is very little in terms of sharing and collaboration of free software Flash projects.

Lack of External Support



Insult to Injury

OLE Nepal has to use images for Nepali text because Flash Player 10 does not render unicode indic fonts properly

All the Same

OLE Nepal has created some amazing content using Flash

It will take a ton of work to implement the same functionality in html5+js

OLE Nepal's Mission

To provide comprehensive, high-quality education to every Nepali child.Must cover grades 1-8 with teacher training and interactive, high-quality, digital content aligned with national curriculum

That's a lot of Content

OLE Nepal will never, ever, ever be able to create all this content on its own

Creating an international movement around standard tools is a more realistic goal

Good News

There are lots of people around the world interested in creating this content

Uruguay

Paraguay

UK

USA, etc

They just need a common, open, easy toolset

Karmic Inspiration

OLE Nepal needs to move from Flash to openweb technologies => Karma

Karma has generated more interest in just 4 months of existence than did 2 years of flash work

And there is only one basic example . . .

A SugarLabs Subproject

Karma is a subproject of Sugarlabs

Started as Googe Summer of Code project thanks Google!

But Karma lessons designed to run within any html5 compliant browser, not just within Sugar

Code is MIT-licensed, content CC-BY-SA

OLE Nepal and others in Sugar community realize that to maximize amount of content created, karma can't be specific to a particular desktop environment

A SugarLabs Subproject



Who's Working on It?

Created by Bryan Berry, CTO of OLE Nepal

Main contributors so far

GsoC student Felipe Lpez Toledo

Christoph Derndorfer, co-founder of OLPC Austria

A group of passionate people who know relatively little about web tech

OLE Nepal has a full-time paid development team consisting of 3 teachers, 3 graphic designers, and 6 programmers

Why aren't they all working on Karma?

The government of Nepal has contracted OLE Nepal to produce a certain amount of content according to a set schedule. Shifting all development resources to Karma would jeopardize that schedule

Who's Working on It?







More Requirements

Everything must work both offline and online

Only dependency should be a browser with good html5 support

Browse and Surf under the XO

EASY i18n, gettext doesn't play well w/ MVC

Text in markup needs to be easily localized

We won't have server-side templates, forget Gears

Helper scripts like the django admin.py and rails rails script

Why not use google gears?The same code should work seemlessly when accessed on your local machine and when accessed thru a website. This makes karma lessons much more portableAdditionally, gears is not a standard. Including it wille bring dependence

Requirements for Toolset

Use only open-source components

Libraries for high-level drawing functions, audio manipulation, common bits of lesson functionality, etc.

Low Barrier to Entry

Use webdev paradigms

Convention-over-configuration a la ruby-on-rails, django

Web dev paradigms

Separate presentation, markup, and code

Unobtrusive javascript

Use utf-8

Requirements for Toolset

Web dev paradigmsSeparate presentation, markup, and code


Use utf-8

Web dev paradigms

Separate presentation, markup, and code


Use utf-8

What We Don't Need

Exciting 3D GraphicsHigh-quality video

Simple 2D is enoughAnd this needs to run on cheap computing devicesAnd 3D doesn't make that much of a difference, think gameplay, gameplay, gameplay

How You Can Help

High-Level libraries to ease manipulation of html5 , ,

Better i18n mechanism

A JS rockstar to step up and advise the Karma project

More Specifically

Optimizing animation performance in the browser

Help with web workers

Help w/ local storage to store student progress

Lesson-specific functionality

i18n

without server-side template

Capture text in the markup and html attributes like and

Logical Layout of a Karma Bundle

The base unit of karma is the lesson

Lessons are organized by grade, subject, and optional time component in a Karma bundle

Each lesson includes

Lesson Plan and Teacher's Note for teacher

Tutorial introduce concept

Exercise do exercises to test knowledge

Optional game more free form opportunity to work with ideas in the lesson

Anatomy of Karma codebase

Jquery plugins

Helper scripts presently using narwhal + rhino

Example lessons

Templates

Starting page Chakra

Lesson Navigation

Karma lesson

Chakra is the given name to index.html

Anatomy of Karma cont'd

A formal specification (under rapid development): wiki.sugarlabs.org/go/Karma/Specifications

Set of conventions for most common configurations very much in the style of ruby-on-rails and django

No server-side components or even server-side emulation like Gears

The Kurrent Karma Plugin

Karma Animation

Canvas manipulation

Presently not using SVG. When should we use svg? When use canvas?

The content must run under OLPC XO-1

SVG tests crashed the XO-1

Canvas tests works better under XO-1

Created own plugin: jquery.karma.js

Felipe used RaphaelJS (http://raphaeljs.com/) demos to test SVG animatios using Browse and Surf,results:under surf: the XO crashed several times :(under Browse: the animations look really good, but the performance is really bad (you will get a several lag when clicking something, etc...)

canvas is low level so, canvas drawing is faster than SVG drawing.about manipulation, well, It's really easy to manipulate SVG Objects (everything you draw is an object) but canvas is just a box where you can draw, Karma provides (some of) that objects.

Karma Animation

Felipe tried RaphaelJS (http://raphaeljs.com/) demos to test SVG animations on the XO but it either crashed or suffered horrible performance

Since canvas is low level, better performance But it's really easy to manipulate SVG Objects

Karma doesn't support SVG as of version 0.1 but we would like to in the future

Felipe used RaphaelJS (http://raphaeljs.com/) demos to test SVG animatios using Browse and Surf,results:under surf: the XO crashed several times :(under Browse: the animations look really good, but the performance is really bad (you will get a several lag when clicking something, etc...)

canvas is low level so, canvas drawing is faster than SVG drawing.about manipulation, well, It's really easy to manipulate SVG Objects (everything you draw is an object) but canvas is just a box where you can draw, Karma provides (some of) that objects.

Karma Animation 2

Need something simple and high-level

processing.js great but complex to use

It uses processing syntax.

It uses a parser, so its slower than JS.

Its not designed to work on low-power machines like the XO (433 Mhz processor, 256 MB RAM).

you can use javascript to access processingjs objects, but.. the actual processingjs library is not designed to work under the XO, neither to work as a jQuery plugin.

Browser Optimization

Karma lessons must run on the XO-1.

Default browser: Sugar Browse ( based on Gecko )

Experimental: Surf ( based on webkit )

No problem rendering HTML common elements

Canvas rendering may be slow Quadrilaterals demo

Several lag on Browse (unusable)

Works nice on Surf

Surf-106 is faster than Browse-102, should we use Surf/Webkit or Browse/Gecko?Or both?--how does Quadrilaterals work?2 canvasesthe first canvas:for temporal drawing of the current linecleared and re drawn when "mousemove"

the second canvas: it has the drawn polygon, background, etc..

Browser Optimization 2

Its preferable to spend cpu than spend memory.

Emphasize rendering speed over quality

image-rendering / firefox 3.6 alpha

webkit has nothing

1 big canvas is better than multiple canvases:We eat cpu and not memory

Web Workers

An animation core as web worker?

Trying to combine actions with predictable behaviour.

Problems

it's not possible to send functions as worker messages, so, it's hard to use callbacks.

how to share memory (variables) between the root document and the worker thread without copying that data?

The animation core would be running as a worker thread: doing the neccesary calculations for the animated objects and sending messages to the root document to manipulate (update) the neccesary html elements (canvas...)

Local Storage

We need to store results from exercises in Karma lessons

Later synchronize them with moodle or another learning management system next time student can connect

i18n

i18n is too hard

Current i18n mechanisms require a server-side template smarty, erb, django's?

Or putting all your strings in js code

Gettext's _() works for js code but not for markup

We need something more intuitive

Specific i18n Needs

Need to translate text in markup not just stuff marked _(), even including inline markup

Need to use native numerals Arabic, Hindi, Nepali use different symbols for digits

Need to change out audio, images, and even numerals per locale

More i18n

Gettext should translate all strings in unless marked explicitly otherwise perhaps using lang attribute?

The markup still needs to be valid html5!

Plus, need to translate certain attributes such as and tags in header such as title, meta

CSS background images and fonts

Doing Everything on document.ready()

Since we can't use something like a server-side template, all localization has to happen in function called on document.ready()

Switching out images

Audio

Text

Will this actually work for a complex pages on machines with limited resources like the OLPC XO-1?

Inline markup is a headache

the Highest score is

We need grab everything between . . . , put it in the .pot file, and later write back the translated HTML on page load, not just text

Anyone got a better idea?

Could you help?

Animation core

Translation

Rotation

Skew

Masks

Image sprite support

TimeLine

Mechanish to resize the whole html content when resizing the window

Could you help?

i18n:

Html2po (supporting inline elements)

Html2json?

Internationalizing javascript code is much easier that internationalizing HTML

Could you help?

Web collaboration:

using only JS

Only under XO?

Have to rely on frameworks like Telepathy?

Early ideas on http://wiki.sugarlabs.org/go/WebCollab

Request for Counsel

We could really use advice from 1+ JS Rockstars on a biweekly basis

Not just for Rockstars

We are a bunch of monkeys ourselves.

We would love help from any interested parties

Getting Started

Join our Launchpad Project http://launchpad.net/karma

We use the main sugar-developers mailing list

there is a lot of traffic so if you only want to know about karma, filter for messages w/ [Karma] in the subject lineIRC: #sugar on irc.freenode.net

Getting Started

Web site: http://www.karmaeducation.org

Wiki page: http://wiki.sugarlabs.org/go/karma

Code: http://git.sugarlabs.org/project/karma

Contact: [email protected]

Thanks to: OLE Nepal, SugarLabs, Googlefor their support

html5 + js: the future of open education

Technology