HTML5 + JS: The Future of Open Education

  • 4,589 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,589
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
68
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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
  • 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
  • Bryan Berry, CTO of OLE Nepal, had interesting experience on one visit to a Nepali school. He asked a 3 rd 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 3 rd 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
  • 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.
  • 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.
  • 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
  • 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
  • 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
  • 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
  • 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 portable Additionally, gears is not a standard. Including it wille bring dependence
  • Web dev paradigms Separate presentation, markup, and code Unobtrusive javascript Use utf-8
  • Web dev paradigms Separate presentation, markup, and code Unobtrusive javascript Use utf-8
  • Chakra is the given name to index.html
  • 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.
  • 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.
  • 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.
  • Surf-106 is faster than Browse-102, should we use Surf/Webkit or Browse/Gecko? Or both? -- how does Quadrilaterals work? 2 canvases the first canvas: for temporal drawing of the current line cleared and re drawn when "mousemove" the second canvas: it has the drawn polygon, background, etc..
  • 1 big canvas is better than multiple canvases: We eat cpu and not memory
  • 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...)

Transcript

  • 1. HTML5 + JS: The Keys to Open Education The Karma Project http://www.karmaeducation.org [email_address] License: CC-BY 3.0
  • 2. 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
  • 3. Everybody wants Education 2.0
    • Lots of universities, schools, governments want to use software in education
    • 4. Kids around the world, particularly in poor countries, need interactive, free materials
    • 5. The current method of education in much of the developing world is:
    Teacher Speaks, Kids Repeat
  • 6. An Education Myth ” Rote Learning is good for you, look at all those successful asians in the US”
    • Large percentage of those asians attended private schools or special public schools that look a lot like western schools, but often more rigorous
    • 7. Those who attended public schools have largely succeeded on their own merits not because they had to memorize whole books as children
  • 8. The Missing Teachers Who is going to teach all these kids algebra?
  • 9. The Missing Teachers 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
  • 10.
    • We need to fill this gigantic learning void
    • 11. We need to empower good teachers and accommodate those learners that don't have access to good teachers
    • 12. And You Can Help!
  • 13. Bryan Berry, CTO of OLE Nepal, had interesting experience on one visit to a Nepali school. He asked a 3 rd 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
  • 14. Problems with Current Approaches
    • Most interactive educational software today suffers from one or more problems:
    • 15. Proprietary (Flash)
    • 16. Tied to a particular platform
      • KDEedu (KDE)
      • 17. Pygame +PyGTK (gnome)
    • Very small educational dev communities – gcompris, KDEedu, Squeak
  • 18. But Flash is the Standard! ” Flash is the standard for developing proprietary educational software” But the open-source Flash community is small and not very active Even Worse:
    • i18n mechanism too complicated
    • 19. Doesn't render indic fonts properly – sorry 2 billion people!
  • 20. PyGame+PyGTK are great but . . .
    • Time consuming to set up development environment
    • 21. You can't show off your creations through the browser
    • 22. Separate markup, presentation, and code? Nope
    • 23. Very, very few programmers in developing countries know these technologies
  • 24. If You hadn't Guessed HTML5 + Javascript are the answer
    • Lots of programmers in developing countries know these technologies due to outsourcing boom
    • 25. Great unicode and font-rendering support
    • 26. Low barrier to entry, new coder only needs text editor and browser to get started
  • 27. A Lot of Work Ahead
    • JS still lacks standard high-level drawing functions
    • 28. Browser performance is very inconsistent, particularly for certain kinds operations
    • 29. Lack of good i18n mechanisms that don't require a server
  • 30. Road to Karma 1
    • Open Learning Exchange Nepal (OLE Nepal) is a Nepali NGO implementing the OLPC project in Nepal
    • 31. 2000 XO laptops deployed so far
    • 32. More importantly, several hundred teachers trained how to use XO's in classroom
    • 33. Educational content aligned with curriculum critical to project success
  • 34. Road to Karma 2
    • OLE Nepal has been producing open-source educational software for 2 years now
    • 35. Tried squeak and pygame + pyGTK but development too time-consuming
    • 36. OLE Nepal has been using Flash for last 18 months and happy with it, BUT . . .
  • 37. Lack of External Support
    • To date, not one single developer outside of OLE Nepal team has submitted a patch despite our best efforts
    • 38. Relative to the huge # of devs working w/ flash
      • IRC, mailing list traffic low
      • 39. Limited open-source tooling and supporting documentation
    The Open-Source Flash Community will likely remain small
  • 40. Lack of External Support 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.
  • 41. Insult to Injury OLE Nepal has to use images for Nepali text because Flash Player 10 does not render unicode indic fonts properly
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. Good News
      There are lots of people around the world interested in creating this content
      They just need a common, open, ”easy” toolset
  • 49. Karmic Inspiration
    • OLE Nepal needs to move from Flash to openweb technologies => Karma
    • 50. Karma has generated more interest in just 4 months of existence than did 2 years of flash work
    • 51. And there is only one basic example . . .
  • 52. A SugarLabs Subproject
    • Karma is a subproject of Sugarlabs
    • 53. Started as Googe Summer of Code project – thanks Google!
    • 54. But Karma lessons designed to run within any html5 compliant browser, not just within Sugar
    • 55. Code is MIT-licensed, content CC-BY-SA
  • 56. A SugarLabs Subproject
    • 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
  • 57. Who's Working on It?
    • Created by Bryan Berry, CTO of OLE Nepal
    • 58. Main contributors so far
      • GsoC student Felipe López Toledo
      • 59. Christoph Derndorfer, co-founder of OLPC Austria
    • A group of passionate people who know relatively little about web tech
  • 60. Who's Working on It?
    • OLE Nepal has a full-time paid development team consisting of 3 teachers, 3 graphic designers, and 6 programmers
    • 61. Why aren't they all working on Karma?
    • 62. 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
  • 63. More Requirements
    • Everything must work both offline and online
    • 64. 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
      • 65. We won't have server-side templates, forget Gears
    • Helper scripts like the django admin.py and rails ”rails” script
  • 66. Requirements for Toolset
    • Use only open-source components
    • 67. Libraries for high-level drawing functions, audio manipulation, common bits of lesson functionality, etc.
    • 68. Low Barrier to Entry
    • 69. Use webdev paradigms
    • 70. Convention-over-configuration a la ruby-on-rails, django
  • 71. Requirements for Toolset
    • Web dev paradigms
          • Separate presentation, markup, and code
          • 72. Unobtrusive javascript
          • 73. Use utf-8
  • 74. What We Don't Need Exciting 3D Graphics High-quality video Simple 2D is enough And this needs to run on cheap computing devices And 3D doesn't make that much of a difference, think gameplay, gameplay, gameplay
  • 75. How You Can Help
    • High-Level libraries to ease manipulation of html5 <audio>, <canvas>, <video>
    • 76. Better i18n mechanism
    • 77. A JS rockstar to step up and advise the Karma project
  • 78. More Specifically
    • Optimizing animation performance in the browser
    • 79. Help with web workers
    • 80. Help w/ local storage to store student progress
    • 81. Lesson-specific functionality
    • 82. i18n
      • without server-side template
      • 83. Capture text in the markup and html attributes like <img alt=””> and <meta tags=””>
  • 84. Logical Layout of a Karma Bundle
    • The base unit of karma is the ” lesson ”
    • 85. Lessons are organized by grade, subject, and optional time component in a Karma bundle
    • 86. Each lesson includes
      • Lesson Plan and Teacher's Note for teacher
      • 87. Tutorial – introduce concept
      • 88. Exercise – do exercises to test knowledge
      • 89. Optional game – more free form opportunity to work with ideas in the lesson
  • 90. Anatomy of Karma codebase
    • Jquery plugins
    • 91. Helper scripts – presently using narwhal + rhino
    • 92. Example lessons
    • 93. Templates
      • Starting page – Chakra
      • 94. Lesson Navigation
      • 95. Karma lesson
  • 96. Anatomy of Karma cont'd
    • A formal specification (under rapid development): wiki.sugarlabs.org/go/Karma/Specifications
    • 97. Set of conventions for most common configurations very much in the style of ruby-on-rails and django
    • 98. No server-side components or even server-side emulation like Gears
  • 99. The Kurrent Karma Plugin
  • 100. Karma Animation
    • Canvas manipulation
    • 101. Presently not using SVG. When should we use svg? When use canvas?
      • The content must run under OLPC XO-1
      • 102. SVG tests crashed the XO-1
      • 103. Canvas tests works better under XO-1
    • Created own plugin: jquery.karma.js
  • 104. 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
  • 105. Karma Animation 2
    • Need something simple and high-level
      • processing.js great but complex to use
        • It uses processing syntax.
        • 106. It uses a parser, so it’s slower than JS.
        • 107. It’s not designed to work on low-power machines like the XO (433 Mhz processor, 256 MB RAM).
  • 108. Browser Optimization
    • Karma lessons must run on the XO-1.
      • Default browser: Sugar Browse ( based on Gecko )
      • 109. Experimental: Surf ( based on webkit )
      • 110. No problem rendering HTML common elements
      • 111. Canvas rendering may be slow Quadrilaterals demo
      • 112. Several lag on Browse (unusable)
      • 113. Works nice on Surf
  • 114. Browser Optimization 2
    • It’s preferable to spend cpu than spend memory.
    • 115. Emphasize rendering speed over quality
    • 116. image-rendering / firefox 3.6 alpha
    • 117. webkit has nothing
  • 118. 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.
      • 119. how to share memory (variables) between the root document and the worker thread without copying that data?
  • 120. Local Storage
    • We need to store results from exercises in Karma lessons
    • 121. Later synchronize them with moodle or another learning management system next time student can connect
  • 122. i18n
    • i18n is too hard
    • 123. Current i18n mechanisms require a server-side template – smarty, erb, django's? –
    • 124. Or putting all your strings in js code
    • 125. Gettext's _(””) works for js code but not for markup
    • 126. We need something more intuitive
  • 127. Specific i18n Needs
    • Need to translate text in markup not just stuff marked _(””), even including inline markup
    • 128. Need to use native numerals – Arabic, Hindi, Nepali use different symbols for digits
    • 129. Need to change out audio, images, and even numerals per locale
  • 130. More i18n
    • Gettext should translate all strings in <body> unless marked explicitly otherwise – perhaps using lang attribute?
    • 131. The markup still needs to be valid html5!
    • 132. Plus, need to translate certain attributes such as <img alt=””> and tags in header such as title, meta
    • 133. CSS background images and fonts
  • 134. 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()
    • Will this actually work for a complex pages on machines with limited resources like the OLPC XO-1?
  • 137. Inline markup is a headache
    • <div>the <big>Highest<big> score is <label id=”highScore”></label></div>
    • 138. We need grab everything between <div> . . . </div>, put it in the .pot file, and later write back the translated HTML on page load, not just text
    • 139. Anyone got a better idea?
  • 140. Could you help?
    • Animation core
    • Mechanish to resize the whole html content when resizing the window
  • 146. Could you help?
    • i18n:
      • Html2po (supporting inline elements)
      • 147. Html2json?
      • 148. Internationalizing javascript code is much easier that internationalizing HTML
  • 149. Could you help?
    • Web collaboration:
      • using only JS
        • Only under XO?
        • 150. Have to rely on frameworks like Telepathy?
      • Early ideas on http://wiki.sugarlabs.org/go/WebCollab
  • 151. Request for Counsel
    • We could really use advice from 1+
    • 152. JS Rockstars on a biweekly basis
  • 153. Not just for Rockstars
    • We are a bunch of monkeys ourselves.
    • 154. We would love help from any interested parties
  • 155. Getting Started
    • Join our Launchpad Project http://launchpad.net/karma
    • 156. 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 line
    • IRC: #sugar on irc.freenode.net
  • 157. Getting Started
    • Web site: http://www.karmaeducation.org
    • 158. Wiki page: http://wiki.sugarlabs.org/go/karma
    • 159. Code: http://git.sugarlabs.org/project/karma
    • 160. Contact: [email_address]
    Thanks to: OLE Nepal, SugarLabs, Google
      for their support