https://wiki.sugarlabs.org/api.php?action=feedcontributions&feedformat=atom&user=BryanWB 2026-05-30T01:28:02Z User contributions MediaWiki 1.43.0 https://wiki.sugarlabs.org/index.php?title=Karma&diff=51469 2010-04-26T08:31:29Z

<p>BryanWB: </p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.olenepal.org/karma/karma get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> * UI Widgets<br /> ** [[Scoreboard]]<br /> ** Dialog -- use standard jQuery UI one?<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * [[Karma/Anti-conventions|Anti-Conventions]] -- coding no-nos<br /> * [[Karma/Layout_Converted_Squeak_Lessons|Layout for converted Squeak Lessons]]<br /> * Source Code stored in http://git.olenepal.org/karma/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use sadCamelCase for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> * Coding Pattern - We generally try to follow this coding pattern as it makes it easier to browse your code<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.olenepal.org/karma/karma main karma repository]<br /> <br /> <br /> &lt;strike&gt;<br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> &lt;/strike&gt;<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Completed mid-December 2009<br /> <br /> * unit testing added to karma.js using QUnit<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation <br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas<br /> ** Quadrilaterals <br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.3 &quot;niño&quot; ====<br /> <br /> Due 31 March 2010<br /> <br /> * Full i18n support<br /> * All Squeak lessons converted to Karma<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Activity_Team/Project_Ideas&diff=50327 2010-03-29T07:51:21Z

<p>BryanWB: /* New activity requests */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCright}}<br /> [[Category:Activity Team]]<br /> &lt;/noinclude&gt;<br /> [[Category:Participate]]<br /> [[Category:Idea]]<br /> <br /> == New activity requests ==<br /> ''Please sign these as you add them.''<br /> * [[Activity Team/Project Ideas/Micro Messages]] --[[User:TimClicks|TimClicks]] 21:31, 1 October 2009 (UTC)<br /> * [[Activities/Spelling]].<br /> * [[Activities/Quiz]].<br /> * Translate activity - consider sugarizing http://translate.sourceforge.net/wiki/virtaal/index Also consider investigating cscott's Click2Trans. Also consider a View Source like View Translations UI.<br /> * See also a list of activity ideas here: [[Development Team/Project Ideas]]<br /> * A Feedback item on the Control Panel. http://dev.sugarlabs.org/ticket/340 [[User:Wade|Wade]] 18:19, 19 February 2009 (UTC)<br /> * A '''clock''' for the frame. (See [[Design Team/Proposals/Frame#Frame Clock]].)<br /> : Some challenges:<br /> :* suspend/resume friendly (maybe updates only on frame view and resume),<br /> :* links to the settings (control) panel to update system/local time,<br /> :* links to [http://wiki.laptop.org/go/Clock_activity Clock activity] for learning to tell time, to [http://wiki.laptop.org/go/Stopwatch Stopwatch] for timing events and setting alarms, and [http://wiki.laptop.org/go/Time Time] for learning more about time (which might eventually have a link to [http://wiki.laptop.org/go/Moon Moon]). ''--[[User:FGrose|FGrose]] 05:37, 31 January 2009 (UTC)''<br /> * A '''calendar''' for the frame. ''--[[User:FGrose|FGrose]] 05:37, 31 January 2009 (UTC)''<br /> * Blogging activity for Sugar.<br /> * Blog aggregator for a mesh network.<br /> * Create Drupal/Wordpress sugar compatible themes and modules.<br /> * Sugarize PiTiVi, uses pygtk and gstreamer so seems like something quite doable.<br /> * Competitive/collaborative &quot;trivia&quot; activity -- there's a synchronized countdown, and then you get points for answering questions correctly and quickly. Could use groupthink for scoring, maybe share data with assimilate/memorize? [[User:Cjb|Cjb]] 21:31, 26 January 2009 (UTC)<br /> * [[Activities/Elect]] [http://www.openvotingconsortium.org/ Open Voting Consortium] secure, auditable, easy-to-use GPLed election suite.<br /> * [http://lists.sugarlabs.org/archive/sugar-devel/2010-March/023168.html Pootle Integration for Karma] [[User:BryanWB|BryanWB]] 08:00 29 March 2010 (UTC)<br /> <br /> == Activity HIG (Human Interface Guidelines)==<br /> <br /> * tweak [[Human_Interface_Guidelines | Sugar HIG]]'s sections [[User:Alsroot|alsroot]] 14:01, 17 January 2009 (UTC)<br /> ** what screen resolution should be minimal for activities? [[User:Alsroot|alsroot]] 14:01, 17 January 2009 (UTC)<br /> ** I think 1024x768 is a good minimum. is this too low?<br /> ** thats enough for desktops, but netbooks may have something like 1024x600(Eee PC 900)<br /> ** Ok, 1024x600 sounds good. I contacted Eben Eliason to ask about his involvement. [[User:Wade|Wade]] 21:37, 28 January 2009 (UTC)<br /> ** Response from Eben: No need for a new HIG but he plans to look over the regular HIG to make sure it is relevant to activities.<br /> <br /> *Further suggestions: [[User:satellit]]<br /> ** Resume for browse on a shared activity from an icon: Start as private with drop down to make shared. The resume shared from the top icon may not be required or wanted.<br /> ** Display of shared browse site name from icon on Neighborhood(F1)view raises privacy issues?<br /> <br /> == Infrastructure ==<br /> <br /> * Create activities@sugarlabs.org mailing list.<br /> *: Questionable - I tend to think additional mailing lists just add additional barriers.[[User:Wade|Wade]] 01:34, 14 January 2009 (UTC) <br /> ** or rather, migrate http://lists.laptop.org/listinfo/activities over to SL mailman<br /> <br /> == sugar-widgets library ==<br /> <br /> See [[Development Team/sugar-port]]<br /> <br /> ==See Also==<br /> <br /> * [[Development Team/Project Ideas|a list of project ideas]]<br /> ==Subpages==<br /> {{Special:PrefixIndex/{{PAGENAME}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Activity_Team/Project_Ideas&diff=50326 2010-03-29T07:49:57Z

<p>BryanWB: /* New activity requests */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCright}}<br /> [[Category:Activity Team]]<br /> &lt;/noinclude&gt;<br /> [[Category:Participate]]<br /> [[Category:Idea]]<br /> <br /> == New activity requests ==<br /> ''Please sign these as you add them.''<br /> * [[Activity Team/Project Ideas/Micro Messages]] --[[User:TimClicks|TimClicks]] 21:31, 1 October 2009 (UTC)<br /> * [[Activities/Spelling]].<br /> * [[Activities/Quiz]].<br /> * Translate activity - consider sugarizing http://translate.sourceforge.net/wiki/virtaal/index Also consider investigating cscott's Click2Trans. Also consider a View Source like View Translations UI.<br /> * See also a list of activity ideas here: [[Development Team/Project Ideas]]<br /> * A Feedback item on the Control Panel. http://dev.sugarlabs.org/ticket/340 [[User:Wade|Wade]] 18:19, 19 February 2009 (UTC)<br /> * A '''clock''' for the frame. (See [[Design Team/Proposals/Frame#Frame Clock]].)<br /> : Some challenges:<br /> :* suspend/resume friendly (maybe updates only on frame view and resume),<br /> :* links to the settings (control) panel to update system/local time,<br /> :* links to [http://wiki.laptop.org/go/Clock_activity Clock activity] for learning to tell time, to [http://wiki.laptop.org/go/Stopwatch Stopwatch] for timing events and setting alarms, and [http://wiki.laptop.org/go/Time Time] for learning more about time (which might eventually have a link to [http://wiki.laptop.org/go/Moon Moon]). ''--[[User:FGrose|FGrose]] 05:37, 31 January 2009 (UTC)''<br /> * A '''calendar''' for the frame. ''--[[User:FGrose|FGrose]] 05:37, 31 January 2009 (UTC)''<br /> * Blogging activity for Sugar.<br /> * Blog aggregator for a mesh network.<br /> * Create Drupal/Wordpress sugar compatible themes and modules.<br /> * Sugarize PiTiVi, uses pygtk and gstreamer so seems like something quite doable.<br /> * Competitive/collaborative &quot;trivia&quot; activity -- there's a synchronized countdown, and then you get points for answering questions correctly and quickly. Could use groupthink for scoring, maybe share data with assimilate/memorize? [[User:Cjb|Cjb]] 21:31, 26 January 2009 (UTC)<br /> * [[Activities/Elect]] [http://www.openvotingconsortium.org/ Open Voting Consortium] secure, auditable, easy-to-use GPLed election suite.<br /> * [http://lists.sugarlabs.org/archive/sugar-devel/2010-March/023168.html Pootle Integration for Karma]<br /> <br /> == Activity HIG (Human Interface Guidelines)==<br /> <br /> * tweak [[Human_Interface_Guidelines | Sugar HIG]]'s sections [[User:Alsroot|alsroot]] 14:01, 17 January 2009 (UTC)<br /> ** what screen resolution should be minimal for activities? [[User:Alsroot|alsroot]] 14:01, 17 January 2009 (UTC)<br /> ** I think 1024x768 is a good minimum. is this too low?<br /> ** thats enough for desktops, but netbooks may have something like 1024x600(Eee PC 900)<br /> ** Ok, 1024x600 sounds good. I contacted Eben Eliason to ask about his involvement. [[User:Wade|Wade]] 21:37, 28 January 2009 (UTC)<br /> ** Response from Eben: No need for a new HIG but he plans to look over the regular HIG to make sure it is relevant to activities.<br /> <br /> *Further suggestions: [[User:satellit]]<br /> ** Resume for browse on a shared activity from an icon: Start as private with drop down to make shared. The resume shared from the top icon may not be required or wanted.<br /> ** Display of shared browse site name from icon on Neighborhood(F1)view raises privacy issues?<br /> <br /> == Infrastructure ==<br /> <br /> * Create activities@sugarlabs.org mailing list.<br /> *: Questionable - I tend to think additional mailing lists just add additional barriers.[[User:Wade|Wade]] 01:34, 14 January 2009 (UTC) <br /> ** or rather, migrate http://lists.laptop.org/listinfo/activities over to SL mailman<br /> <br /> == sugar-widgets library ==<br /> <br /> See [[Development Team/sugar-port]]<br /> <br /> ==See Also==<br /> <br /> * [[Development Team/Project Ideas|a list of project ideas]]<br /> ==Subpages==<br /> {{Special:PrefixIndex/{{PAGENAME}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Bundle_layout&diff=49544 2010-03-10T04:55:14Z

<p>BryanWB: /* Lesson */</p> <hr /> <div>== The Main Karma Package ==<br /> <br /> ''A set of tools that will help you start working with Karma quickly''<br /> <br /> This is what is contained in the repository at http://git.sugarlabs.org/projects/karma/<br /> <br /> * Includes script for Karma activity generation, xo bundle generation<br /> * includes &quot;platform&quot; files, i.e. a basic html5-capable browser that can be used to create an xo bundle<br /> <br /> ROOT/ ( ROOT is not actually a directory name, it just labels the top-level of this package )<br /> assets/ ( images, audio, and text common to karma.html, examples, and the lessons for the launch page for all lessons )<br /> image/<br /> audio/<br /> locale_name/<br /> image/ <br /> locale_name.json ( karma actually needs the .po file to be converted to .json )<br /> audio/<br /> AUTHORS ( Should include names of everyone that has contributed to Karma main package )<br /> css/ ( css/ and js/ contain the code common to all examples, lessons )<br /> COPYING ( Licensing information, should default to MIT License ? how distinguish b/w code licensing and content licensing )<br /> docs/<br /> examples/ ( working examples of karma lessons )<br /> index.html ( The starting page for accessing Karma lessons, should include links to the examples, known as the CHAKRA )<br /> js/ ( css/ and js/ contain the code common to all examples, lessons, and karma.html )<br /> README<br /> tests/ unit tests<br /> <br /> == Karma XO bundle ==<br /> <br /> * similar to E-Paath layout and uses the standard [[Development_Team/Almanac/Activity_Bundles|Sugar bundle structure]]<br /> * It is still undecided whether karma will default to using Browse which is based on Firefox or [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] which based on webkit (Safari/Chrome). Surf requires that you install the rpms for pywebkitgtk and webkitgtk<br /> <br /> The '''Below information is out-of-date'''<br /> &lt;strike&gt;<br /> activity/<br /> activity.info (activity info file)<br /> activity-web.svg (icon for activity as specified in activity.info)<br /> mimetypes.xml (map documents to MIME types)<br /> text-plain.svg (icons for documents, e.g. &quot;text-plain.svg&quot; for &quot;text/plain&quot;)<br /> text-html.svg<br /> contents (manifest for bundle contents)<br /> contents.sig (credentials for signed bundle)<br /> permissions.info (optional; '''not a stable API''')<br /> assets/<br /> AUTHORS<br /> bin/<br /> launch.sh (launcher script)<br /> browser.dtd<br /> browser.py<br /> cert8.db<br /> clickToView.xml<br /> COPYING<br /> css/<br /> downloadmanager.py<br /> edittoolbar.py<br /> globalhistory.py<br /> icons<br /> index.html<br /> js/<br /> linkbutton.py<br /> karma<br /> karmaactivity.py<br /> lessons/<br /> locale<br /> MANIFEST<br /> messenger.py<br /> model.py<br /> palettes.py<br /> places.py<br /> po/ <br /> promptservice.py<br /> README<br /> securitydialogs.py<br /> sessionhistory.py<br /> sessionstore.py<br /> setup.py<br /> viewtoolbar.py<br /> utils/<br /> webtoolbar.py<br /> &lt;/strike&gt;<br /> == Lesson ==<br /> <br /> ''consists of a single lesson''<br /> <br /> lesson_name/<br /> assets/<br /> {langCode}/ (files specific to langCode: en-US, en, es-MX, es, ....) and not the default locale<br /> image/<br /> audio/<br /> svg/<br /> video/<br /> <br /> css/<br /> lesson.css<br /> index.html <br /> js/<br /> lesson.js main logic of program<br /> kDoc.html (viewer for lesson plan and teacher's Note)<br /> lessonPlan.html<br /> teachersNote.html<br /> start.html (start page)<br /> <br /> <br /> *Notes:<br /> # {langCode} represents the lang code and country code <br /> # which will be the template language for assets/docs/* ?, English suggested<br /> # suggestion: rename assets/{langCode}/docs/ to docs/{langCode}/ . This is based that at this moment there are no other kind of files under assets/ than 'docs'<br /> <br /> The following is out of date but kept for history<br /> &lt;strike&gt;<br /> <br /> == Reading, Game and Exercise ==<br /> ''consist of a single 'reading', 'game' or 'exercise' ''<br /> <br /> {type}/<br /> index.html (valid html5 -- markup only includes visual elements and links in other resources, no inline code or styling )<br /> css/{type}.css ( css files -- specific to the lesson )<br /> js/{type}.js ( javascript controlling logic for the lesson )<br /> po/ ( translation files )<br /> ne-NP.po ( example translation file for Nepal - Nepali )<br /> sp-ES.po ( example translation file for traditional Spanish )<br /> {langCode}.po ( translation file )<br /> assets/<br /> generic/ ( for language independent assets (e.g. arrows, background images, etc.) )<br /> images/<br /> preview.jpg ( screenshot for Chakra )<br /> sounds/<br /> videos/<br /> docs/<br /> ne/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> en/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> {langCode}/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> * Notes<br /> # {type} represents 'game' or 'exercise' or 'reading'<br /> # does docs/ is used?<br /> &lt;/stike&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Bundle_layout&diff=49543 2010-03-10T04:52:49Z

<p>BryanWB: /* The Main Karma Package */</p> <hr /> <div>== The Main Karma Package ==<br /> <br /> ''A set of tools that will help you start working with Karma quickly''<br /> <br /> This is what is contained in the repository at http://git.sugarlabs.org/projects/karma/<br /> <br /> * Includes script for Karma activity generation, xo bundle generation<br /> * includes &quot;platform&quot; files, i.e. a basic html5-capable browser that can be used to create an xo bundle<br /> <br /> ROOT/ ( ROOT is not actually a directory name, it just labels the top-level of this package )<br /> assets/ ( images, audio, and text common to karma.html, examples, and the lessons for the launch page for all lessons )<br /> image/<br /> audio/<br /> locale_name/<br /> image/ <br /> locale_name.json ( karma actually needs the .po file to be converted to .json )<br /> audio/<br /> AUTHORS ( Should include names of everyone that has contributed to Karma main package )<br /> css/ ( css/ and js/ contain the code common to all examples, lessons )<br /> COPYING ( Licensing information, should default to MIT License ? how distinguish b/w code licensing and content licensing )<br /> docs/<br /> examples/ ( working examples of karma lessons )<br /> index.html ( The starting page for accessing Karma lessons, should include links to the examples, known as the CHAKRA )<br /> js/ ( css/ and js/ contain the code common to all examples, lessons, and karma.html )<br /> README<br /> tests/ unit tests<br /> <br /> == Karma XO bundle ==<br /> <br /> * similar to E-Paath layout and uses the standard [[Development_Team/Almanac/Activity_Bundles|Sugar bundle structure]]<br /> * It is still undecided whether karma will default to using Browse which is based on Firefox or [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] which based on webkit (Safari/Chrome). Surf requires that you install the rpms for pywebkitgtk and webkitgtk<br /> <br /> The '''Below information is out-of-date'''<br /> &lt;strike&gt;<br /> activity/<br /> activity.info (activity info file)<br /> activity-web.svg (icon for activity as specified in activity.info)<br /> mimetypes.xml (map documents to MIME types)<br /> text-plain.svg (icons for documents, e.g. &quot;text-plain.svg&quot; for &quot;text/plain&quot;)<br /> text-html.svg<br /> contents (manifest for bundle contents)<br /> contents.sig (credentials for signed bundle)<br /> permissions.info (optional; '''not a stable API''')<br /> assets/<br /> AUTHORS<br /> bin/<br /> launch.sh (launcher script)<br /> browser.dtd<br /> browser.py<br /> cert8.db<br /> clickToView.xml<br /> COPYING<br /> css/<br /> downloadmanager.py<br /> edittoolbar.py<br /> globalhistory.py<br /> icons<br /> index.html<br /> js/<br /> linkbutton.py<br /> karma<br /> karmaactivity.py<br /> lessons/<br /> locale<br /> MANIFEST<br /> messenger.py<br /> model.py<br /> palettes.py<br /> places.py<br /> po/ <br /> promptservice.py<br /> README<br /> securitydialogs.py<br /> sessionhistory.py<br /> sessionstore.py<br /> setup.py<br /> viewtoolbar.py<br /> utils/<br /> webtoolbar.py<br /> &lt;/strike&gt;<br /> == Lesson ==<br /> <br /> ''consists of a single lesson''<br /> <br /> lesson_name/<br /> assets/<br /> {langCode}/ (files specific to langCode: en-US, en, es-MX, es, ....) and not the default locale<br /> image/<br /> audio/<br /> svg/<br /> video/<br /> <br /> css/<br /> lesson.css<br /> docs/<br /> activity text<br /> lesson plan<br /> teachers note <br /> index.html <br /> js/<br /> lesson.js main logic of program<br /> <br /> tests/ unit tests if u have them<br /> assets/<br /> index.html<br /> js/<br /> <br /> <br /> *Notes:<br /> # {langCode} represents the lang code and country code <br /> # which will be the template language for assets/docs/* ?, English suggested<br /> # suggestion: rename assets/{langCode}/docs/ to docs/{langCode}/ . This is based that at this moment there are no other kind of files under assets/ than 'docs'<br /> <br /> The following is out of date but kept for history<br /> &lt;strike&gt;<br /> <br /> == Reading, Game and Exercise ==<br /> ''consist of a single 'reading', 'game' or 'exercise' ''<br /> <br /> {type}/<br /> index.html (valid html5 -- markup only includes visual elements and links in other resources, no inline code or styling )<br /> css/{type}.css ( css files -- specific to the lesson )<br /> js/{type}.js ( javascript controlling logic for the lesson )<br /> po/ ( translation files )<br /> ne-NP.po ( example translation file for Nepal - Nepali )<br /> sp-ES.po ( example translation file for traditional Spanish )<br /> {langCode}.po ( translation file )<br /> assets/<br /> generic/ ( for language independent assets (e.g. arrows, background images, etc.) )<br /> images/<br /> preview.jpg ( screenshot for Chakra )<br /> sounds/<br /> videos/<br /> docs/<br /> ne/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> en/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> {langCode}/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> * Notes<br /> # {type} represents 'game' or 'exercise' or 'reading'<br /> # does docs/ is used?<br /> &lt;/stike&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Bundle_layout&diff=49542 2010-03-10T04:51:53Z

<p>BryanWB: /* The Main Karma Package */</p> <hr /> <div>== The Main Karma Package ==<br /> <br /> ''A set of tools that will help you start working with Karma quickly''<br /> <br /> This is what is contained in the repository at http://git.sugarlabs.org/projects/karma/<br /> <br /> * Includes script for Karma activity generation, xo bundle generation<br /> * includes &quot;platform&quot; files, i.e. a basic html5-capable browser that can be used to create an xo bundle<br /> <br /> ROOT/ ( ROOT is not actually a directory name, it just labels the top-level of this package )<br /> assets/ ( images, audio, and text common to karma.html, examples, and the lessons )<br /> image/<br /> audio/<br /> locale_name/<br /> image/ <br /> locale_name.json ( karma actually needs the .po file to be converted to .json )<br /> audio/<br /> AUTHORS ( Should include names of everyone that has contributed to Karma main package )<br /> css/ ( css/ and js/ contain the code common to all examples, lessons )<br /> COPYING ( Licensing information, should default to MIT License ? how distinguish b/w code licensing and content licensing )<br /> docs/<br /> examples/ ( working examples of karma lessons )<br /> index.html ( The starting page for accessing Karma lessons, should include links to the examples, known as the CHAKRA )<br /> js/ ( css/ and js/ contain the code common to all examples, lessons, and karma.html )<br /> README<br /> tests/ unit tests<br /> <br /> == Karma XO bundle ==<br /> <br /> * similar to E-Paath layout and uses the standard [[Development_Team/Almanac/Activity_Bundles|Sugar bundle structure]]<br /> * It is still undecided whether karma will default to using Browse which is based on Firefox or [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] which based on webkit (Safari/Chrome). Surf requires that you install the rpms for pywebkitgtk and webkitgtk<br /> <br /> The '''Below information is out-of-date'''<br /> &lt;strike&gt;<br /> activity/<br /> activity.info (activity info file)<br /> activity-web.svg (icon for activity as specified in activity.info)<br /> mimetypes.xml (map documents to MIME types)<br /> text-plain.svg (icons for documents, e.g. &quot;text-plain.svg&quot; for &quot;text/plain&quot;)<br /> text-html.svg<br /> contents (manifest for bundle contents)<br /> contents.sig (credentials for signed bundle)<br /> permissions.info (optional; '''not a stable API''')<br /> assets/<br /> AUTHORS<br /> bin/<br /> launch.sh (launcher script)<br /> browser.dtd<br /> browser.py<br /> cert8.db<br /> clickToView.xml<br /> COPYING<br /> css/<br /> downloadmanager.py<br /> edittoolbar.py<br /> globalhistory.py<br /> icons<br /> index.html<br /> js/<br /> linkbutton.py<br /> karma<br /> karmaactivity.py<br /> lessons/<br /> locale<br /> MANIFEST<br /> messenger.py<br /> model.py<br /> palettes.py<br /> places.py<br /> po/ <br /> promptservice.py<br /> README<br /> securitydialogs.py<br /> sessionhistory.py<br /> sessionstore.py<br /> setup.py<br /> viewtoolbar.py<br /> utils/<br /> webtoolbar.py<br /> &lt;/strike&gt;<br /> == Lesson ==<br /> <br /> ''consists of a single lesson''<br /> <br /> lesson_name/<br /> assets/<br /> {langCode}/ (files specific to langCode: en-US, en, es-MX, es, ....) and not the default locale<br /> image/<br /> audio/<br /> svg/<br /> video/<br /> <br /> css/<br /> lesson.css<br /> docs/<br /> activity text<br /> lesson plan<br /> teachers note <br /> index.html <br /> js/<br /> lesson.js main logic of program<br /> <br /> tests/ unit tests if u have them<br /> assets/<br /> index.html<br /> js/<br /> <br /> <br /> *Notes:<br /> # {langCode} represents the lang code and country code <br /> # which will be the template language for assets/docs/* ?, English suggested<br /> # suggestion: rename assets/{langCode}/docs/ to docs/{langCode}/ . This is based that at this moment there are no other kind of files under assets/ than 'docs'<br /> <br /> The following is out of date but kept for history<br /> &lt;strike&gt;<br /> <br /> == Reading, Game and Exercise ==<br /> ''consist of a single 'reading', 'game' or 'exercise' ''<br /> <br /> {type}/<br /> index.html (valid html5 -- markup only includes visual elements and links in other resources, no inline code or styling )<br /> css/{type}.css ( css files -- specific to the lesson )<br /> js/{type}.js ( javascript controlling logic for the lesson )<br /> po/ ( translation files )<br /> ne-NP.po ( example translation file for Nepal - Nepali )<br /> sp-ES.po ( example translation file for traditional Spanish )<br /> {langCode}.po ( translation file )<br /> assets/<br /> generic/ ( for language independent assets (e.g. arrows, background images, etc.) )<br /> images/<br /> preview.jpg ( screenshot for Chakra )<br /> sounds/<br /> videos/<br /> docs/<br /> ne/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> en/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> {langCode}/<br /> images/<br /> sounds/<br /> videos/<br /> docs/<br /> * Notes<br /> # {type} represents 'game' or 'exercise' or 'reading'<br /> # does docs/ is used?<br /> &lt;/stike&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/i18n&diff=47117 2010-02-24T14:32:50Z

<p>BryanWB: </p> <hr /> <div>Rough plan for implementing i18n for Karma<br /> <br /> === Requirements === <br /> * Integrate with pootle<br /> * Handle strings inside code and html markup<br /> Examples <br /> $(&quot;#someDiv&quot;).text(gettext(&quot;Hello World&quot;));<br /> &lt;nowiki&gt;<br /> &lt;div&gt;Hello &lt;strong&gt;W&lt;/strong&gt;orld&lt;/div&gt;<br /> &lt;/nowiki&gt;<br /> <br /> * All strings stored in one file per locale, messages.json<br /> * All message identifiers must be unique within an a lesson<br /> * Accommodating numeric, currency, and date formatting is not an immediate requirement<br /> <br /> === General Strategy ===<br /> * Use a modified version of gettext, where the key for getting translations, we will use an arbitrary message identifier. This will remove the need for managing translation contexts.<br /> * We will try to use the [http://en.wikipedia.org/wiki/Internationalization_Tag_Set Internationalization Tag Set] for handling strings inline with html. The [http://okapi.sourceforge.net/ Okapi] tool may be able to parse out strings marked with ITS.<br /> * We will use this lesson for prototyping examples/6_Maths_matchingAnglesAndShapes/<br /> * For the immediate future we will dynamically change out strings per locale on page load</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/i18n&diff=47116 2010-02-24T14:32:09Z

<p>BryanWB: </p> <hr /> <div>Rough plan for implementing i18n for Karma<br /> <br /> === Requirements === <br /> * Integrate with pootle<br /> * Handle strings inside code and html markup<br /> Examples <br /> $(&quot;#someDiv&quot;).text(gettext(&quot;Hello World&quot;));<br /> &lt;div&gt;Hello &lt;strong&gt;W&lt;/strong&gt;orld&lt;/div&gt;<br /> <br /> * All strings stored in one file per locale, messages.json<br /> * All message identifiers must be unique within an a lesson<br /> * Accommodating numeric, currency, and date formatting is not an immediate requirement<br /> <br /> === General Strategy ===<br /> * Use a modified version of gettext, where the key for getting translations, we will use an arbitrary message identifier. This will remove the need for managing translation contexts.<br /> * We will try to use the [http://en.wikipedia.org/wiki/Internationalization_Tag_Set Internationalization Tag Set] for handling strings inline with html. The [http://okapi.sourceforge.net/ Okapi] tool may be able to parse out strings marked with ITS.<br /> * We will use this lesson for prototyping examples/6_Maths_matchingAnglesAndShapes/<br /> * For the immediate future we will dynamically change out strings per locale on page load</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/i18n&diff=47115 2010-02-24T14:31:46Z

<p>BryanWB: </p> <hr /> <div>Rough plan for implementing i18n for Karma<br /> <br /> === Requirements === <br /> * Integrate with pootle<br /> * Handle strings inside code and html markup<br /> Examples <br /> <br /> $(&quot;#someDiv&quot;).text(gettext(&quot;Hello World&quot;));<br /> <br /> &lt;div&gt;Hello &lt;strong&gt;W&lt;/strong&gt;orld&lt;/div&gt;<br /> <br /> * All strings stored in one file per locale, messages.json<br /> * All message identifiers must be unique within an a lesson<br /> * Accommodating numeric, currency, and date formatting is not an immediate requirement<br /> <br /> === General Strategy ===<br /> * Use a modified version of gettext, where the key for getting translations, we will use an arbitrary message identifier. This will remove the need for managing translation contexts.<br /> * We will try to use the [http://en.wikipedia.org/wiki/Internationalization_Tag_Set Internationalization Tag Set] for handling strings inline with html. The [http://okapi.sourceforge.net/ Okapi] tool may be able to parse out strings marked with ITS.<br /> * We will use this lesson for prototyping examples/6_Maths_matchingAnglesAndShapes/<br /> * For the immediate future we will dynamically change out strings per locale on page load</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/i18n&diff=47114 2010-02-24T14:16:57Z

<p>BryanWB: </p> <hr /> <div>Rough plan for implementing i18n for Karma<br /> <br /> === Requirements === <br /> * Integrate with pootle<br /> * Handle strings inside code and html markup<br /> <br /> === Technical Requirements ===<br /> * All strings stored in one file, messages.json<br /> * <br /> <br /> === General Strategy ===<br /> <br /> Lesson to use for prototyping<br /> examples/6_Maths_matchingAnglesAndShapes/</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/i18n&diff=47113 2010-02-24T14:07:08Z

<p>BryanWB: </p> <hr /> <div>Rough plan for implementing i18n for Karma<br /> <br /> == Requirements == <br /> * All strings stored in one file, messages.json<br /> * <br /> <br /> <br /> Lesson to use for prototyping<br /> examples/6_Maths_matchingAnglesAndShapes/</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Layout_Converted_Squeak_Lessons&diff=43520 2010-01-26T07:53:38Z

<p>BryanWB: /* Feedback */</p> <hr /> <div>==Overrall Considerations==<br /> We are converting the Squeak lessons for the XO, which has peculiar display characteristics<br /> * 96 DPI (dots per inch) instead of the usual 126 or 134<br /> * 1200x900 screen resolution<br /> <br /> The header and footer both use 75 pixels of vertical space.<br /> <br /> Your working area is roughly (0, 75px) to (1200px, 1125px).<br /> <br /> We are trying to make the Converted Squeak lessons look as much as possible like the flash-based EPaath lessons.<br /> <br /> ==Background Image==<br /> <br /> Your background image should 1200px by 900px<br /> The best way to designate the background image is in your css/lesson.css file<br /> <br /> body {<br /> background-image: url(./path/to/file.png);<br /> }<br /> <br /> ==Header==<br /> The following items are on the header bar from left to right:<br /> * Back button - returns to the lessons list (left aligned)<br /> * Activity title (position to the right of back button)<br /> * OLE logo button – A short description of OLE Nepal pops up (position to the left of help button)<br /> * Help button – help text appears (right aligned)<br /> <br /> ==Footer==<br /> The following items should appear on the footer bar from left to right:<br /> Score board (left aligned)<br /> Level indicator – if required (position to the right score board)<br /> Start button (position to the left of play again button)<br /> Play again button (right aligned)<br /> <br /> ==Feedback==<br /> <br /> TODO<br /> <br /> ==Help==<br /> <br /> TODO <br /> <br /> ==Page Navigation==<br /> <br /> The next page button should be positioned just above the footer bar to the right of the screen.<br /> <br /> Previous page button should be positioned just above the footer bar to the left of the screen<br /> <br /> Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page). To the left and right of the lesson area for back and next respectively, vertically centered to the page.<br /> <br /> ==Text==<br /> <br /> * Size – Big enough so that its clearly readable on a XO screen<br /> * Color – Contrasting from the background so that its distinctly visible</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Layout_Converted_Squeak_Lessons&diff=43519 2010-01-26T07:52:48Z

<p>BryanWB: </p> <hr /> <div>==Overrall Considerations==<br /> We are converting the Squeak lessons for the XO, which has peculiar display characteristics<br /> * 96 DPI (dots per inch) instead of the usual 126 or 134<br /> * 1200x900 screen resolution<br /> <br /> The header and footer both use 75 pixels of vertical space.<br /> <br /> Your working area is roughly (0, 75px) to (1200px, 1125px).<br /> <br /> We are trying to make the Converted Squeak lessons look as much as possible like the flash-based EPaath lessons.<br /> <br /> ==Background Image==<br /> <br /> Your background image should 1200px by 900px<br /> The best way to designate the background image is in your css/lesson.css file<br /> <br /> body {<br /> background-image: url(./path/to/file.png);<br /> }<br /> <br /> ==Header==<br /> The following items are on the header bar from left to right:<br /> * Back button - returns to the lessons list (left aligned)<br /> * Activity title (position to the right of back button)<br /> * OLE logo button – A short description of OLE Nepal pops up (position to the left of help button)<br /> * Help button – help text appears (right aligned)<br /> <br /> ==Footer==<br /> The following items should appear on the footer bar from left to right:<br /> Score board (left aligned)<br /> Level indicator – if required (position to the right score board)<br /> Start button (position to the left of play again button)<br /> Play again button (right aligned)<br /> <br /> ==Feedback==<br /> <br /> ==Help==<br /> <br /> TODO <br /> <br /> ==Page Navigation==<br /> <br /> The next page button should be positioned just above the footer bar to the right of the screen.<br /> <br /> Previous page button should be positioned just above the footer bar to the left of the screen<br /> <br /> Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page). To the left and right of the lesson area for back and next respectively, vertically centered to the page.<br /> <br /> ==Text==<br /> <br /> * Size – Big enough so that its clearly readable on a XO screen<br /> * Color – Contrasting from the background so that its distinctly visible</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Layout_Converted_Squeak_Lessons&diff=43518 2010-01-26T07:48:54Z

<p>BryanWB: /* Background Image */</p> <hr /> <div>==Overrall Considerations==<br /> We are converting the Squeak lessons for the XO, which has peculiar display characteristics<br /> * 96 DPI (dots per inch) instead of the usual 126 or 134<br /> * 1200x900 screen resolution<br /> <br /> The header and footer both use 75 pixels of vertical space.<br /> <br /> Your working area is roughly (0, 75px) to (1200px, 1125px).<br /> <br /> We are trying to make the Converted Squeak lessons look as much as possible like the flash-based EPaath lessons.<br /> <br /> ==Background Image==<br /> <br /> Your background image should 1200px by 900px<br /> The best way to designate the background image is in your css/lesson.css file<br /> <br /> &lt;nowiki&gt;<br /> body {<br /> background-image: url(./path/to/file.png);<br /> }<br /> &lt;/nowiki&gt;<br /> <br /> ==Header==<br /> The following items are on the header bar from left to right:<br /> * Back button - returns to the lessons list (left aligned)<br /> * Activity title (position to the right of back button)<br /> * OLE logo button – A short description of OLE Nepal pops up (position to the left of help button)<br /> * Help button – help text appears (right aligned)<br /> <br /> ==Footer==<br /> The following items should appear on the footer bar from left to right:<br /> Score board (left aligned)<br /> Level indicator – if required (position to the right score board)<br /> Start button (position to the left of play again button)<br /> Play again button (right aligned)<br /> <br /> Page navigation controls<br /> Next page button should be positioned just above the footer bar to the right of the screen<br /> Previous page button should be positioned just above the footer bar to the left of the screen<br /> <br /> Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page)<br /> To the left and right of the lesson area for back and next respectively, vertically centered to the page.<br /> <br /> Text<br /> Size – Big enough so that its clearly readable on a XO screen<br /> Color – Contrasting from the background so that its distinctly visible</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Layout_Converted_Squeak_Lessons&diff=43517 2010-01-26T07:48:16Z

<p>BryanWB: </p> <hr /> <div>==Overrall Considerations==<br /> We are converting the Squeak lessons for the XO, which has peculiar display characteristics<br /> * 96 DPI (dots per inch) instead of the usual 126 or 134<br /> * 1200x900 screen resolution<br /> <br /> The header and footer both use 75 pixels of vertical space.<br /> <br /> Your working area is roughly (0, 75px) to (1200px, 1125px).<br /> <br /> We are trying to make the Converted Squeak lessons look as much as possible like the flash-based EPaath lessons.<br /> <br /> ==Background Image==<br /> <br /> Your background image should 1200px by 900px<br /> The best way to designate the background image is in your css/lesson.css file<br /> &lt;nowiki&gt;<br /> body {<br /> background-image: url(./path/to/file.png);<br /> }<br /> &lt;/nowiki&gt;<br /> <br /> <br /> ==Header==<br /> The following items are on the header bar from left to right:<br /> * Back button - returns to the lessons list (left aligned)<br /> * Activity title (position to the right of back button)<br /> * OLE logo button – A short description of OLE Nepal pops up (position to the left of help button)<br /> * Help button – help text appears (right aligned)<br /> <br /> ==Footer==<br /> The following items should appear on the footer bar from left to right:<br /> Score board (left aligned)<br /> Level indicator – if required (position to the right score board)<br /> Start button (position to the left of play again button)<br /> Play again button (right aligned)<br /> <br /> Page navigation controls<br /> Next page button should be positioned just above the footer bar to the right of the screen<br /> Previous page button should be positioned just above the footer bar to the left of the screen<br /> <br /> Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page)<br /> To the left and right of the lesson area for back and next respectively, vertically centered to the page.<br /> <br /> Text<br /> Size – Big enough so that its clearly readable on a XO screen<br /> Color – Contrasting from the background so that its distinctly visible</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Layout_Converted_Squeak_Lessons&diff=43516 2010-01-26T07:04:46Z

<p>BryanWB: Created page with &#039;We are converting the Squeak lessons for the XO, which has peculiar display characteristics * 96 DPI (dots per inch) instead of the usual 126 or 134 * 1200x900 screen resolution …&#039;</p> <hr /> <div>We are converting the Squeak lessons for the XO, which has peculiar display characteristics<br /> * 96 DPI (dots per inch) instead of the usual 126 or 134<br /> * 1200x900 screen resolution<br /> <br /> Position<br /> The following items should be on the header bar from left to right:<br /> Back button - returns to the lessons list (left aligned)<br /> Activity title (position to the right of back button)<br /> OLE logo button – A short description of OLE Nepal pops up (position to the left of help button)<br /> Help button – help text appears (right aligned)<br /> The following items should appear on the footer bar from left to right:<br /> Score board (left aligned)<br /> Level indicator – if required (position to the right score board)<br /> Start button (position to the left of play again button)<br /> Play again button (right aligned)<br /> <br /> Page navigation controls<br /> Next page button should be positioned just above the footer bar to the right of the screen<br /> Previous page button should be positioned just above the footer bar to the left of the screen<br /> <br /> Sequence control buttons (these are the buttons that you click to go to next or previous step of lesson on the same page)<br /> To the left and right of the lesson area for back and next respectively, vertically centered to the page.<br /> <br /> Text<br /> Size – Big enough so that its clearly readable on a XO screen<br /> Color – Contrasting from the background so that its distinctly visible</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=43515 2010-01-26T07:02:17Z

<p>BryanWB: /* Conventions */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> * UI Widgets<br /> ** [[Scoreboard]]<br /> ** Dialog -- use standard jQuery UI one?<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * [[Karma/Anti-conventions|Anti-Conventions]] -- coding no-nos<br /> * [[Karma/Layout_Converted_Squeak_Lessons|Layout for converted Squeak Lessons]]<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use sadCamelCase for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> * Coding Pattern - We generally try to follow this coding pattern as it makes it easier to browse your code<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Completed mid-December 2009<br /> <br /> * unit testing added to karma.js using QUnit<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation <br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas<br /> ** Quadrilaterals <br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.3 &quot;niño&quot; ====<br /> <br /> Due 31 March 2010<br /> <br /> * Full i18n support<br /> * All Squeak lessons converted to Karma<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Deployment_Team/Places&diff=43490 2010-01-25T14:49:48Z

<p>BryanWB: /* Asia */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TeamHeader|Deployment Team}}{{TOCright}}&lt;/noinclude&gt;<br /> === Introduction ===<br /> <br /> This page lists the places in the world where Sugar is used along with a contact person that will facilitate communication between the global and the local communities.<br /> <br /> The column &quot;# of members&quot; is intended to give a rough estimation of the size of the local community and may include children, educators, parents, volunteers, etc<br /> <br /> === Asia ===<br /> <br /> {| border=1 cellpadding=3 style=&quot;border: 1px solid white; border-collapse: collapse; background: #e3e4e5;&quot;<br /> |-style=&quot;background:#787878; color: white;&quot;<br /> ! Region<br /> ! Languages<br /> ! # of members<br /> ! Contact<br /> |-<br /> | India<br /> | English, Hindi, Marathi<br /> | 32<br /> | [[USER:Jpritikin|Joshua Pritikin]]<br /> |-<br /> | Nepal<br /> | Nepali<br /> | 50<br /> | Subir Pradhanang, Rabi Karmacharya<br /> |-<br /> | Quezon City, Philippines<br /> | Filipino, English<br /> | 30<br /> | [[USER:Jgotangco|Jerome Gotangco]]<br /> |-<br /> | BanSamka, Thailand<br /> | Thai<br /> | ~30 OLPC XO (beta-2 machines?)<br /> | Arnan Sipitakiat?<br /> |}<br /> <br /> === Africa ===<br /> <br /> {| border=1 cellpadding=3 style=&quot;border: 1px solid white; border-collapse: collapse; background: #e3e4e5;&quot;<br /> |-style=&quot;background:#787878; color: white;&quot;<br /> ! Region<br /> ! Languages<br /> ! Software<br /> ! Hardware<br /> ! # of members<br /> ! Contact<br /> |-<br /> | Ethiopia<br /> | Amharic<br /> | ?<br /> | OLPC XO-1<br /> | ?<br /> | ?<br /> |-<br /> | Rwanda<br /> | English?<br /> | ?<br /> | OLPC XO-1<br /> | ?<br /> | David Cavallo?<br /> |-<br /> | Nigeria<br /> | English?<br /> | ?<br /> | OLPC XO-1<br /> | ?<br /> | Schumberger?<br /> |}<br /> <br /> === America ===<br /> <br /> {| border=1 cellpadding=3 style=&quot;border: 1px solid white; border-collapse: collapse; background: #e3e4e5;&quot;<br /> |-style=&quot;background:#787878; color: white;&quot;<br /> ! Region<br /> ! Languages<br /> ! Software<br /> ! Hardware<br /> ! # of members<br /> ! Contact<br /> |-<br /> | Colombia<br /> | Spanish<br /> | Fedora 11/Sugar - LiveCDs - SOAS<br /> | Desktop PCs<br /> | 7<br /> | RafaelOrtiz<br /> |-<br /> | Peru<br /> | Spanish<br /> | ?<br /> | OLPC XO-1<br /> | ?<br /> | Hernan Pachas?<br /> |-<br /> | Uruguay<br /> | Spanish<br /> | ?<br /> | OLPC XO-1<br /> | ?<br /> | Pablo Flores?<br /> |-<br /> | Paraguay<br /> | Spanish<br /> | ?<br /> | OLPC XO-1<br /> | 4500<br /> | Raul Gutierrez S.<br /> |-<br /> | Chiapas, Mexico<br /> | Spanish, Tzotzil<br /> | SoaS Strawberry on SD cards + ejabberd server<br /> | Classmate Convertible<br /> | 44, three rural classrooms<br /> | [[User:Jose Icaza|Jose I. Icaza]]; [http://sites.google.com/site/tecnotzotzil TecnoTzotzil] project site in English<br /> |-<br /> | Bermingham, AL, USA<br /> | English<br /> | ?<br /> | OLPC XO-1<br /> | ?<br /> | ?<br /> |-<br /> | Boston, MA, USA<br /> | English<br /> | SoaS Strawberry (0.84)<br /> | HP EVO 500 desktops<br /> | ?<br /> | Caroline Meeks<br /> |}<br /> <br /> === Europe ===<br /> <br /> {| border=1 cellpadding=3 style=&quot;border: 1px solid white; border-collapse: collapse; background: #e3e4e5;&quot;<br /> |-style=&quot;background:#787878; color: white;&quot;<br /> ! Region<br /> ! Languages<br /> ! # of Sugar installations<br /> ! Hardware used<br /> ! Software version<br /> ! Project blog/wiki<br /> ! Contact<br /> |-<br /> | Graz, Austria<br /> | German<br /> | 25<br /> | XO-1<br /> | build 767<br /> | [http://elearningblog.phst.at/?cat=32 blog] (in German)<br /> | David Van Assche, [[User:ChristophD|Christoph Derndorfer]]<br /> |-<br /> | London, United Kingdom<br /> | English<br /> | 30<br /> | XO-1<br /> | build 802<br /> | [http://olpc.org.uk/ blog], [http://lists.laptop.org/listinfo/olpc-uk mailing list], [http://wiki.laptop.org/go/OLPC_UK wiki]<br /> | [[User:PeterRobinson|Peter Robinson]], [[User:MartinDengler|Martin Dengler]]<br /> |-<br /> | Brescia, Italy<br /> | Italian<br /> | ?<br /> | XO-1<br /> | ?<br /> | [http://escuola.provincia.brescia.it/olpc/ website] (in Italian)<br /> | ?<br /> |-<br /> | Milan, Italy<br /> | Italian<br /> | 30<br /> | XO-1<br /> | build 802<br /> | none<br /> | Comunità Nuova/Barrio's - Mario Lenelli (?)<br /> |}<br /> <br /> === Oceania ===<br /> <br /> {| border=1 cellpadding=3 style=&quot;border: 1px solid white; border-collapse: collapse; background: #e3e4e5;&quot;<br /> |-style=&quot;background:#787878; color: white;&quot;<br /> ! Region<br /> ! Languages<br /> ! # of members<br /> ! Contact<br /> |-<br /> | Solomon Islands<br /> | Pijin, Marovo<br /> | ?<br /> | David Leeming?<br /> |}<br /> <br /> <br /> === See also ===<br /> <br /> See also [[OLPC:Deployments]]</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=43320 2010-01-21T14:47:46Z

<p>BryanWB: /* Conventions */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> * UI Widgets<br /> ** [[Scoreboard]]<br /> ** Dialog -- use standard jQuery UI one?<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * [[Karma/Anti-conventions|Anti-Conventions]] -- coding no-nos<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use sadCamelCase for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> * Coding Pattern - We generally try to follow this coding pattern as it makes it easier to browse your code<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Completed mid-December 2009<br /> <br /> * unit testing added to karma.js using QUnit<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation <br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas<br /> ** Quadrilaterals <br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.3 &quot;niño&quot; ====<br /> <br /> Due 31 March 2010<br /> <br /> * Full i18n support<br /> * All Squeak lessons converted to Karma<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Anti-conventions&diff=43231 2010-01-18T12:22:17Z

<p>BryanWB: /* Putting style information inline */</p> <hr /> <div>==Not closing &lt;img /&gt; or &lt;meta /&gt; tags==<br /> <br /> You can usually get away with not closing these tags but they could cause weird rendering of elements that follow them. If you don't close &lt;img&gt;, the browser might think that any following elements are children rather than siblings and display them accordingly.<br /> <br /> ==Using document.write()==<br /> &lt;nowiki&gt;<br /> Using document.write('&lt;div&gt;some html&lt;/div&gt;'); instead of $('#parentDiv').html('&lt;div&gt; some html &lt;/div&gt;');<br /> &lt;/nowiki&gt;<br /> &lt;br /&gt;<br /> &lt;br /&gt;<br /> document.write is just bad in general. Some browsers don't like it (chromium) and in all browsers it freezes all other execution while it is writing to the page.<br /> <br /> ==Manually constructing an html sequence rather than passing a string==<br /> <br /> The former is not incorrect per se, but it is much, much slower than passing a string to .html(), at least according to the jQuery Cookbook.<br /> <br /> $parent = $(document.createElement('div'))<br /> .appendTo('#someId')<br /> .attr({id: 'foo', class: 'foobar baz'})<br /> .text('hello world');<br /> <br /> According to jQuery Cookbook this is much, much faster<br /> &lt;nowiki&gt; <br /> $parent = $('#someId').append($('&lt;div id=&quot;foo&quot; class=&quot;foobar baz&quot;&gt;Hello World&lt;/div&gt;'));<br /> &lt;/nowiki&gt;<br /> FYI, prefixing cached jQuery reference w/ a &quot;$&quot; is a good practice.<br /> <br /> ==Putting style information inline==<br /> &lt;nowiki&gt;<br /> &lt;div style=&quot;display:none;&quot;&gt; &lt;/div&gt;<br /> &lt;/nowiki&gt;<br /> <br /> This makes the lesson much harder to debug as you have to look both in the .css file<br /> and at the html. As the lesson grows, which it will, it gets harder and harder to <br /> pin down small bugs<br /> <br /> ==Mixing naming conventions, like camelCase and not_camel_case==<br /> <br /> Neither of these naming conventions is the &quot;correct&quot; convention but mixing them makes it hard for others to work w/ your code<br /> &lt;nowiki&gt;<br /> &lt;div id=&quot;topbtn_right&quot;&gt; would be better written as &lt;div id=&quot;topBtnRight&quot;&gt;<br /> &lt;/nowiki&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Anti-conventions&diff=43230 2010-01-18T12:21:48Z

<p>BryanWB: /* Manually constructing an html sequence rather than passing a string */</p> <hr /> <div>==Not closing &lt;img /&gt; or &lt;meta /&gt; tags==<br /> <br /> You can usually get away with not closing these tags but they could cause weird rendering of elements that follow them. If you don't close &lt;img&gt;, the browser might think that any following elements are children rather than siblings and display them accordingly.<br /> <br /> ==Using document.write()==<br /> &lt;nowiki&gt;<br /> Using document.write('&lt;div&gt;some html&lt;/div&gt;'); instead of $('#parentDiv').html('&lt;div&gt; some html &lt;/div&gt;');<br /> &lt;/nowiki&gt;<br /> &lt;br /&gt;<br /> &lt;br /&gt;<br /> document.write is just bad in general. Some browsers don't like it (chromium) and in all browsers it freezes all other execution while it is writing to the page.<br /> <br /> ==Manually constructing an html sequence rather than passing a string==<br /> <br /> The former is not incorrect per se, but it is much, much slower than passing a string to .html(), at least according to the jQuery Cookbook.<br /> <br /> $parent = $(document.createElement('div'))<br /> .appendTo('#someId')<br /> .attr({id: 'foo', class: 'foobar baz'})<br /> .text('hello world');<br /> <br /> According to jQuery Cookbook this is much, much faster<br /> &lt;nowiki&gt; <br /> $parent = $('#someId').append($('&lt;div id=&quot;foo&quot; class=&quot;foobar baz&quot;&gt;Hello World&lt;/div&gt;'));<br /> &lt;/nowiki&gt;<br /> FYI, prefixing cached jQuery reference w/ a &quot;$&quot; is a good practice.<br /> <br /> ==Putting style information inline==<br /> &lt;nowiki&gt;<br /> &lt;div style=&quot;display:none;&quot;&gt; &lt;/div&gt;<br /> &lt;/nowiki&gt;<br /> <br /> This makes the lesson much harder to debug as you have to look both in the .css file<br /> and at the html. As the lesson grows, which it will, it gets harder and harder to <br /> pin down small bugs<br /> <br /> ==Mixing naming conventions, like camelCase and not_camel_case==<br /> <br /> Neither of these naming conventions is the &quot;correct&quot; convention but mixing them makes it hard for others to work w/ your code<br /> &lt;nowiki&gt;<br /> &lt;div id=&quot;topbtn_right&quot;&gt; would be better written as &lt;div id=&quot;topBtnRight&quot;&gt;<br /> &lt;/nowiki&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Anti-conventions&diff=43229 2010-01-18T12:20:41Z

<p>BryanWB: </p> <hr /> <div>==Not closing &lt;img /&gt; or &lt;meta /&gt; tags==<br /> <br /> You can usually get away with not closing these tags but they could cause weird rendering of elements that follow them. If you don't close &lt;img&gt;, the browser might think that any following elements are children rather than siblings and display them accordingly.<br /> <br /> ==Using document.write()==<br /> &lt;nowiki&gt;<br /> Using document.write('&lt;div&gt;some html&lt;/div&gt;'); instead of $('#parentDiv').html('&lt;div&gt; some html &lt;/div&gt;');<br /> &lt;/nowiki&gt;<br /> &lt;br /&gt;<br /> &lt;br /&gt;<br /> document.write is just bad in general. Some browsers don't like it (chromium) and in all browsers it freezes all other execution while it is writing to the page.<br /> <br /> ==Manually constructing an html sequence rather than passing a string==<br /> <br /> The former is not incorrect per se, but it is much, much slower than passing a string to .html(), at least according to the jQuery Cookbook.<br /> <br /> $parent = $(document.createElement('div'))<br /> .appendTo('#someId')<br /> .attr({id: 'foo', class: 'foobar baz'})<br /> .text('hello world');<br /> <br /> According to jQuery Cookbook this is much, much faster<br /> &lt;nowiki&gt; <br /> $parent = $('#someId').append($('&lt;div id=&quot;foo&quot; class=&quot;foobar baz&quot;&gt;Hello World&lt;/div&gt;'));<br /> &lt;/nowiki&gt;<br /> FYI, prefixing cached jQuery reference w/ a &quot;$&quot; is a good practice.<br /> <br /> <br /> ==Putting style information inline==<br /> &lt;nowiki&gt;<br /> &lt;div style=&quot;display:none;&quot;&gt; &lt;/div&gt;<br /> &lt;/nowiki&gt;<br /> <br /> This makes the lesson much harder to debug as you have to look both in the .css file<br /> and at the html. As the lesson grows, which it will, it gets harder and harder to <br /> pin down small bugs<br /> <br /> ==Mixing naming conventions, like camelCase and not_camel_case==<br /> <br /> Neither of these naming conventions is the &quot;correct&quot; convention but mixing them makes it hard for others to work w/ your code<br /> &lt;nowiki&gt;<br /> &lt;div id=&quot;topbtn_right&quot;&gt; would be better written as &lt;div id=&quot;topBtnRight&quot;&gt;<br /> &lt;/nowiki&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Anti-conventions&diff=43228 2010-01-18T12:18:33Z

<p>BryanWB: </p> <hr /> <div>'''Not closing &lt;img /&gt; or &lt;meta /&gt; tags.''' <br /> <br /> You can usually get away with not closing these tags but they could cause weird rendering of elements that follow them. If you don't close &lt;img&gt;, the browser might think that any following elements are children rather than siblings and display them accordingly.<br /> &lt;br /&gt;<br /> &lt;nowiki&gt;<br /> Using document.write('&lt;div&gt;some html&lt;/div&gt;'); instead of $('#parentDiv').html('&lt;div&gt; some html &lt;/div&gt;');<br /> &lt;/nowiki&gt;<br /> &lt;br /&gt;<br /> document.write is just bad in general. Some browsers don't like it (chromium) and in all browsers it freezes all other execution while it is writing to the page.<br /> <br /> Manually constructing an html sequence rather than passing a string. <br /> <br /> The former is not incorrect per se, but it is much, much slower than passing a string to .html(), at least according to the jQuery Cookbook.<br /> <br /> $parent = $(document.createElement('div'))<br /> .appendTo('#someId')<br /> .attr({id: 'foo', class: 'foobar baz'})<br /> .text('hello world');<br /> <br /> According to jQuery Cookbook this is much, much faster<br /> <br /> $parent = $('#someId').append($('&lt;div id=&quot;foo&quot; class=&quot;foobar baz&quot;&gt;Hello World&lt;/div&gt;'));<br /> <br /> FYI, prefixing cached jQuery reference w/ a &quot;$&quot; is a good practice.<br /> <br /> <br /> Putting style information inline<br /> <br /> &lt;div style=&quot;display:none;&quot;&gt; &lt;/div&gt;<br /> <br /> This makes the lesson much harder to debug as you have to look both in the .css file<br /> and at the html. As the lesson grows, which it will, it gets harder and harder to <br /> pin down small bugs<br /> <br /> Mixing naming conventions, like camelCase and not_camel_case<br /> <br /> Neither of these naming conventions is the &quot;correct&quot; convention but mixing them makes it hard for others to work w/ your code<br /> <br /> &lt;div id=&quot;topbtn_right&quot;&gt; would be better written as &lt;div id=&quot;topBtnRight&quot;&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Anti-conventions&diff=43227 2010-01-18T12:17:34Z

<p>BryanWB: </p> <hr /> <div>Not closing &lt;img /&gt; or &lt;meta /&gt; tags. <br /> <br /> You can usually get away with not closing these tags but they could cause weird rendering of elements that follow them. If you don't close &lt;img&gt;, the browser might think that any following elements are children rather than siblings and display them accordingly.<br /> &lt;br /&gt;<br /> &lt;nowiki&gt;<br /> Using document.write('&lt;div&gt;some html&lt;/div&gt;'); instead of $('#parentDiv').html('&lt;div&gt; some html &lt;/div&gt;');<br /> &lt;/nowiki&gt;<br /> &lt;br /&gt;<br /> document.write is just bad in general. Some browsers don't like it (chromium) and in all browsers it freezes all other execution while it is writing to the page.<br /> <br /> Manually constructing an html sequence rather than passing a string. <br /> <br /> The former is not incorrect per se, but it is much, much slower than passing a string to .html(), at least according to the jQuery Cookbook.<br /> <br /> $parent = $(document.createElement('div'))<br /> .appendTo('#someId')<br /> .attr({id: 'foo', class: 'foobar baz'})<br /> .text('hello world');<br /> <br /> According to jQuery Cookbook this is much, much faster<br /> <br /> $parent = $('#someId').append($('&lt;div id=&quot;foo&quot; class=&quot;foobar baz&quot;&gt;Hello World&lt;/div&gt;'));<br /> <br /> FYI, prefixing cached jQuery reference w/ a &quot;$&quot; is a good practice.<br /> <br /> <br /> Putting style information inline<br /> <br /> &lt;div style=&quot;display:none;&quot;&gt; &lt;/div&gt;<br /> <br /> This makes the lesson much harder to debug as you have to look both in the .css file<br /> and at the html. As the lesson grows, which it will, it gets harder and harder to <br /> pin down small bugs<br /> <br /> Mixing naming conventions, like camelCase and not_camel_case<br /> <br /> Neither of these naming conventions is the &quot;correct&quot; convention but mixing them makes it hard for others to work w/ your code<br /> <br /> &lt;div id=&quot;topbtn_right&quot;&gt; would be better written as &lt;div id=&quot;topBtnRight&quot;&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Anti-conventions&diff=43226 2010-01-18T12:14:21Z

<p>BryanWB: </p> <hr /> <div>Not closing &lt;img /&gt; or &lt;meta /&gt; tags. <br /> <br /> You can usually get away with not closing these tags but they could cause weird rendering of elements that follow them. If you don't close &lt;img&gt;, the browser might think that any following elements are childrent rather than siblings and display them accordingly.<br /> &lt;nowiki&gt;<br /> Using document.write('&lt;div&gt;some html&lt;/div&gt;'); instead of $('#parentDiv').html('&lt;div&gt; some html &lt;/div&gt;');<br /> &lt;/nowiki&gt;<br /> document.write is just bad in general. Some browsers don't like it (chromium) and in all browsers it freezes all other execution while it is writing to the page.<br /> <br /> Manually constructing an html sequence rather than passing a string. <br /> <br /> The former is not incorrect per se, but it is much, much slower than passing a string to .html(), at least according to the jQuery Cookbook.<br /> <br /> $parent = $(document.createElement('div'))<br /> .appendTo('#someId')<br /> .attr({id: 'foo', class: 'foobar baz'})<br /> .text('hello world');<br /> <br /> According to jQuery Cookbook this is much, much faster<br /> <br /> $parent = $('#someId').append($('&lt;div id=&quot;foo&quot; class=&quot;foobar baz&quot;&gt;Hello World&lt;/div&gt;'));<br /> <br /> FYI, prefixing cached jQuery reference w/ a &quot;$&quot; is a good practice.<br /> <br /> <br /> Putting style information inline<br /> <br /> &lt;div style=&quot;display:none;&quot;&gt; &lt;/div&gt;<br /> <br /> This makes the lesson much harder to debug as you have to look both in the .css file<br /> and at the html. As the lesson grows, which it will, it gets harder and harder to <br /> pin down small bugs<br /> <br /> Mixing naming conventions, like camelCase and not_camel_case<br /> <br /> Neither of these naming conventions is the &quot;correct&quot; convention but mixing them makes it hard for others to work w/ your code<br /> <br /> &lt;div id=&quot;topbtn_right&quot;&gt; would be better written as &lt;div id=&quot;topBtnRight&quot;&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma/Anti-conventions&diff=43225 2010-01-18T12:03:59Z

<p>BryanWB: Created page with &#039;Not closing &lt;img /&gt; or &lt;meta /&gt; tags. You can usually get away with not closing these tags but they could cause weird rendering of elements that follow them. If you don&#039;t close…&#039;</p> <hr /> <div>Not closing &lt;img /&gt; or &lt;meta /&gt; tags. <br /> <br /> You can usually get away with not closing these tags but they could cause weird rendering of elements that follow them. If you don't close &lt;img&gt;, the browser might think that any following elements are childrent rather than siblings and display them accordingly.<br /> <br /> Using document.write('&lt;div&gt; some html &lt;/div&gt;'); instead of $('#parentDiv').html('&lt;div&gt; some html &lt;/div&gt;');<br /> <br /> document.write is just bad in general. Some browsers don't like it (chromium) and in all browsers it freezes all other execution while it is writing to the page.<br /> <br /> Manually constructing an html sequence rather than passing a string. <br /> <br /> The former is not incorrect per se, but it is much, much slower than passing a string to .html(), at least according to the jQuery Cookbook.<br /> <br /> $parent = $(document.createElement('div'))<br /> .appendTo('#someId')<br /> .attr({id: 'foo', class: 'foobar baz'})<br /> .text('hello world');<br /> <br /> According to jQuery Cookbook this is much, much faster<br /> <br /> $parent = $('#someId').append($('&lt;div id=&quot;foo&quot; class=&quot;foobar baz&quot;&gt;Hello World&lt;/div&gt;'));<br /> <br /> FYI, prefixing cached jQuery reference w/ a &quot;$&quot; is a good practice.<br /> <br /> <br /> Putting style information inline<br /> <br /> &lt;div style=&quot;display:none;&quot;&gt; &lt;/div&gt;<br /> <br /> This makes the lesson much harder to debug as you have to look both in the .css file<br /> and at the html. As the lesson grows, which it will, it gets harder and harder to <br /> pin down small bugs<br /> <br /> Mixing naming conventions, like camelCase and not_camel_case<br /> <br /> Neither of these naming conventions is the &quot;correct&quot; convention but mixing them makes it hard for others to work w/ your code<br /> <br /> &lt;div id=&quot;topbtn_right&quot;&gt; would be better written as &lt;div id=&quot;topBtnRight&quot;&gt;</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=43224 2010-01-18T12:02:08Z

<p>BryanWB: /* Conventions */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> * UI Widgets<br /> ** [[Scoreboard]]<br /> ** Dialog -- use standard jQuery UI one?<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * [[Karma/Anti-conventions|Anti-Conventions]] -- coding no-nos<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> * Coding Pattern - We generally try to follow this coding pattern as it makes it easier to browse your code<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Completed mid-December 2009<br /> <br /> * unit testing added to karma.js using QUnit<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation <br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas<br /> ** Quadrilaterals <br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.3 &quot;niño&quot; ====<br /> <br /> Due 31 March 2010<br /> <br /> * Full i18n support<br /> * All Squeak lessons converted to Karma<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Scoreboard&diff=42625 2010-01-06T09:15:49Z

<p>BryanWB: </p> <hr /> <div>Fields<br /> * Score<br /> * Total<br /> * ?# wrong?<br /> <br /> Methods<br /> * maxScore<br /> * .inc(val), .dec(val) to increment and decrement score, default change by one if no val supplied<br /> * reset()<br /> * start()<br /> <br /> Options<br /> * startBtn : true<br /> * resetBtn : true<br /> * stopBtn : true<br /> * incValue : 1<br /> * maxScore : 0<br /> <br /> Possibly For future<br /> * display difficulty level<br /> * .stop()<br /> * pause() score can't be changed</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Scoreboard&diff=42594 2010-01-05T05:23:57Z

<p>BryanWB: </p> <hr /> <div>Fields<br /> * Score<br /> * Total<br /> * ?# wrong?<br /> <br /> Methods<br /> * maxScore<br /> * .inc(val), .dec(val) to increment and decrement score, default change by one if no val supplied<br /> * reset()<br /> * start()<br /> <br /> Options<br /> * startBtn : true<br /> * restartBtn : true<br /> * stopBtn : true<br /> * incValue : 1<br /> * maxScore : 0<br /> <br /> Possibly For future<br /> * display difficulty level<br /> * .stop()<br /> * pause() score can't be changed</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Scoreboard&diff=42593 2010-01-05T05:22:08Z

<p>BryanWB: </p> <hr /> <div>Fields<br /> * Score<br /> * Total<br /> * ?# wrong?<br /> <br /> Methods<br /> * maxScore<br /> * .inc(val), .dec(val) to increment and decrement score, default change by one if no val supplied<br /> * pause() score can't be changed<br /> * reset()<br /> * start()<br /> <br /> Options<br /> * startBtn : true<br /> * restartBtn : true<br /> * stopBtn : true<br /> * incValue : 1<br /> * maxScore : 0<br /> <br /> Possibly For future<br /> * display difficulty level<br /> * .stop()</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Scoreboard&diff=42592 2010-01-05T05:16:16Z

<p>BryanWB: </p> <hr /> <div>Options<br /> * <br /> <br /> Fields<br /> * Score<br /> * Total<br /> * # wrong<br /> <br /> <br /> Methods<br /> * maxScore<br /> * .inc(val), .dec(val) to increment and decrement score, default change by one if no val supplied<br /> * pause() score can't be changed<br /> * reset()<br /> <br /> Possibly For future<br /> * difficulty level<br /> *</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Scoreboard&diff=42591 2010-01-05T05:10:26Z

<p>BryanWB: Created page with &#039; Methods * maxScore * .inc(val), .dec(val) to increment and decrement score, default change by one if no val supplied * pause() score can&#039;t be changed&#039;</p> <hr /> <div><br /> <br /> Methods<br /> * maxScore<br /> * .inc(val), .dec(val) to increment and decrement score, default change by one if no val supplied<br /> * pause() score can't be changed</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42590 2010-01-05T05:00:44Z

<p>BryanWB: /* Technical Architecture */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> * UI Widgets<br /> ** [[Scoreboard]]<br /> ** Dialog -- use standard jQuery UI one?<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> * Coding Pattern - We generally try to follow this coding pattern as it makes it easier to browse your code<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Completed mid-December 2009<br /> <br /> * unit testing added to karma.js using QUnit<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation <br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas<br /> ** Quadrilaterals <br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.3 &quot;niño&quot; ====<br /> <br /> Due 31 March 2010<br /> <br /> * Full i18n support<br /> * All Squeak lessons converted to Karma<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42589 2010-01-05T04:59:35Z

<p>BryanWB: /* Project Roadmap */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> * Coding Pattern - We generally try to follow this coding pattern as it makes it easier to browse your code<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Completed mid-December 2009<br /> <br /> * unit testing added to karma.js using QUnit<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation <br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas<br /> ** Quadrilaterals <br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.3 &quot;niño&quot; ====<br /> <br /> Due 31 March 2010<br /> <br /> * Full i18n support<br /> * All Squeak lessons converted to Karma<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42486 2010-01-02T03:54:06Z

<p>BryanWB: /* Conventions */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> * Coding Pattern - We generally try to follow this coding pattern as it makes it easier to browse your code<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42464 2010-01-01T11:01:59Z

<p>BryanWB: /* Status */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42463 2010-01-01T11:01:10Z

<p>BryanWB: /* Status */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development as a part of a [[Karma#GSoC_Project| Google Summer of Code project]]. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> The current focus of development is to convert Nepal's set of lessons coded in Squeak smalltalk. You can find the list of lessons to be converted [http://spreadsheets.google.com/pub?key=tweUJyn1BkEciHqVtSvCYDA&amp;output=html here]. This is a good place for new contributors to get started<br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42167 2009-12-22T10:15:15Z

<p>BryanWB: /* Version Control */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development as a part of a [[Karma#GSoC_Project| Google Summer of Code project]]. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> '''Tagging''' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42166 2009-12-22T10:14:01Z

<p>BryanWB: /* Version Control */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development as a part of a [[Karma#GSoC_Project| Google Summer of Code project]]. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> ''Tagging'' -- a karma lesson can be in only one of two states, stable or unstable. Any commit tagged 'stable' is the stable version of your code. Every other version of your code is unstable. We will not use numeric versioning such as 0.1, 1.0, 1.2, etc. for the foreseeable future.<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42165 2009-12-22T10:07:46Z

<p>BryanWB: </p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development as a part of a [[Karma#GSoC_Project| Google Summer of Code project]]. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Each lesson must be in a folder named according to the schema &quot;karma_Grade_Maths_title_WeekNo&quot; where the week number is optional <br /> The following are valid names<br /> karma_3_Maths_LargestNumber_15<br /> karma_2_English_MatchingPuzzle<br /> karma_6_Maths_AddingUpTo10_4<br /> * Version Control and repository management see the [[Karma#Version_Control|Version Control]] section of this page<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> <br /> == Version Control == <br /> Currently all lessons are stored in the examples/ folder of [http://git.sugarlabs.org/projects/karma/repos/mainline main karma repository]<br /> <br /> We plan to move all lessons into individual repositories at git.sugarlabs.org but only once we have a process to automatically build bundles.<br /> <br /> When we do move to individual repos we shall use the [http://git.sugarlabs.org/projects/karma_lesson karma_lesson template] for each new lesson repository <br /> <br /> <br /> Here is how you can use the karma_lesson template to create a new repository from scratch<br /> <br /> $ git clone git://git.sugarlabs.org/karma_lesson/mainline.git<br /> $ mkdir ../karma_3_English_3 # create a new lesson directory following our naming convention<br /> $ cp -r * ../karma_3_English_3 <br /> $ cd ../karma_3_English_3<br /> $ rm -r .git # make sure you get rid of the old git directory<br /> $ git init<br /> $ git add .<br /> $ git commit -a -m &quot;first commit&quot;<br /> <br /> Now go to the http://git.sugarlabs.org/projects/new, make sure you are logged in<br /> Create a new project, use the same name as you did for your lesson's main folder<br /> then,<br /> $ git remote add origin git://... # the pubic push url<br /> <br /> Then on to coding your lesson ;)<br /> <br /> From then on <br /> $ git push origin master # will sync your local tree w/ the server<br /> <br /> <br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42164 2009-12-22T09:48:59Z

<p>BryanWB: </p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development as a part of a [[Karma#GSoC_Project| Google Summer of Code project]]. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Version Control and repository management see [[Karma#Version_Control]]<br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> <br /> == Version Control == <br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42163 2009-12-22T09:47:43Z

<p>BryanWB: /* Conventions */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development as a part of a [[Karma#GSoC_Project| Google Summer of Code project]]. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Version Control and repository management see <br /> * Unit testing is required for the karma.js library but not for individual lessons http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** boolean variables should be prefixed with &quot;is&quot;, &quot;has&quot;, &quot;can&quot;, or &quot;should&quot;<br /> ** counters should be prefixed with &quot;num&quot; or &quot;count&quot;<br /> ** Whenever possible, use [http://www.jslint.com/ jslint]<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma:Meeting_21_December_2009&diff=42145 2009-12-21T11:22:52Z

<p>BryanWB: </p> <hr /> <div>Agenda<br /> # Coding Style <br /> when in doubt, use camelCase<br /> constants in all CAPS, w/ _ separating multiple words --&gt; COUNT_ERRORS = 10;<br /> boolean variables should be prefixed w/ &quot;is&quot; &quot;can&quot; or &quot;should&quot;<br /> prefix counters with &quot;count&quot; or &quot;num&quot;<br /> # common HTML mistakes<br /> # Let's try to use a common js coding pattern<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> Unobtrusive JavaScript -- let's try to stick to it<br /> # common js problems, no blocks around ifs, ' ' eval, ==, var methodName = function(){}<br /> # managing code for lessons in repos, versioning<br /> Bryan will create karma-lesson repo<br /> lessons will have two states &quot;stable&quot; or &quot;unstable&quot;, the &quot;stable&quot; commit is tagged &quot;stable&quot;<br /> everything else is unstable<br /> will use repo-naming convention from E-Paath but prefixed w/ &quot;karma_&quot; <br /> # Using draggable()?<br /> Vaibhaw will take look at jquery UI's draggable and see if useful<br /> # Create common widgets? Scorebox? timer? -- yes we need all of them<br /> Bryan will look at dialog for help, playAgain<br /> Bryan will add shuffle() to Karma<br /> # timeline? milestones?<br /> Vaibhaw will complete all 60 by March<br /> # We need resolution help! at least I do<br /> Bryan will check w/ Om to see if lesson dimensions will be part of UI design<br /> # Workflow - have Om review it?<br /> opyadav will review the finished activities</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma:Meeting_21_December_2009&diff=42144 2009-12-21T11:15:46Z

<p>BryanWB: </p> <hr /> <div>Agenda<br /> # Coding Style <br /> # common HTML mistakes<br /> # Let's try to use a common js coding pattern<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> Unobtrusive JavaScript<br /> # common js problems, no blocks around ifs, ' ' eval, ==, var methodName = function(){}<br /> # managing code for lessons in repos, versioning<br /> # Using draggable()?<br /> Vaibhaw will take look at jquery UI's draggable and see if useful<br /> # Create common widgets? Scorebox? timer? -- yes we need all of them<br /> Bryan will look at dialog for help, playAgain<br /> Bryan will add shuffle() to Karma<br /> # layout of karma lesson<br /> # timeline? milestones?<br /> Vaibhaw will complete all 60 by March<br /> # We need resolution help! at least I do<br /> Bryan will check w/ Om to see if lesson dimensions will be part of UI design<br /> # Workflow - have Om review it?</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma:Meeting_21_December_2009&diff=42143 2009-12-21T10:39:16Z

<p>BryanWB: </p> <hr /> <div>Agenda<br /> # Coding Style <br /> # common HTML mistakes<br /> # Let's try to use a common js coding pattern<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> Unobtrusive JavaScript<br /> # common js problems, no blocks around ifs, ' ' eval, ==, var methodName = function(){}<br /> # managing code for lessons in repos, versioning<br /> # Using draggable()?<br /> # Create common widgets? Scorebox? timer? -- yes we need all of them<br /> # layout of karma lesson<br /> # timeline? milestones?<br /> # We need resolution help! at least I do<br /> # Workflow - have Om review it?</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma:Meeting_21_December_2009&diff=42142 2009-12-21T10:30:00Z

<p>BryanWB: </p> <hr /> <div>Agenda<br /> # Coding Style <br /> # common HTML mistakes<br /> # Let's try to use a common js coding pattern<br /> Put code in following order<br /> 1) variable declarations<br /> 2) method declarations<br /> 3) method calls<br /> <br /> Unobtrusive JavaScript<br /> # common js problems, no blocks around ifs, ' ' eval, ==<br /> # managing code for lessons in repos, versioning<br /> # Using draggable()?<br /> # Create common widgets? Scorebox? timer? -- yes we need all of them<br /> # layout of karma lesson<br /> # timeline? milestones?<br /> # We need resolution help! at least I do<br /> # Workflow - have Om review it?</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma:Meeting_21_December_2009&diff=42141 2009-12-21T10:15:13Z

<p>BryanWB: </p> <hr /> <div>Agenda<br /> # Coding Style <br /> # common HTML mistakes<br /> # Let's try to use a common js coding pattern<br /> # common js problems, no blocks around ifs, ' ' eval, ==<br /> # managing code for lessons in repos, versioning<br /> # Using draggable()?<br /> # Create common widgets? Scorebox? timer? -- yes we need all of them<br /> # layout of karma lesson<br /> # timeline? milestones?<br /> # We need resolution help! at least I do<br /> # Workflow - have Om review it?</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma:Meeting_21_December_2009&diff=42140 2009-12-21T10:11:06Z

<p>BryanWB: </p> <hr /> <div>Agenda<br /> # Coding Style <br /> # common HTML mistakes<br /> # Let's try to use a common js coding pattern<br /> # common js problems, no blocks around ifs, ' ' eval, ==<br /> # managing code for lessons in repos, versioning<br /> # Using draggable()?<br /> # Create common widgets? Scorebox? timer?<br /> # timeline? milestones?<br /> # We need resolution help! at least I do<br /> # Workflow - have Om review it?</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma:Meeting_21_December_2009&diff=42139 2009-12-21T09:53:37Z

<p>BryanWB: Created page with &#039;Agenda # Coding Style # common HTML mistakes # Let&#039;s try to use a common js coding pattern # managing code for lessons in repos, versioning # Using draggable()? # Create common …&#039;</p> <hr /> <div>Agenda<br /> # Coding Style <br /> # common HTML mistakes<br /> # Let's try to use a common js coding pattern<br /> # managing code for lessons in repos, versioning<br /> # Using draggable()?<br /> # Create common widgets? Scorebox? timer?<br /> # timeline? milestones?<br /> # We need resolution help! at least I do<br /> # Workflow - have Om review it?</div>

BryanWB https://wiki.sugarlabs.org/index.php?title=Karma&diff=42138 2009-12-21T09:52:31Z

<p>BryanWB: /* Meetings */</p> <hr /> <div>&lt;noinclude&gt;{{GoogleTrans-en}}{{TOCleft}}<br /> [[Category:GSoC]]<br /> [[Category:Project]]&lt;/noinclude&gt;<br /> [[Image:Karma.png|right]]<br /> <br /> == The Karma Project ==<br /> <br /> Karma is a framework for creating educational software using JavaScript, html5, and SVG. The Karma team is primarily focused on developing Sugar activities but you can also Karma to create lessons that run in any web browser that supports html5. The best ways to get involved are to join the [http://groups.google.com/group/karmajs mailing list] and [http://git.sugarlabs.org/projects/karma/repos/mainline get the code]<br /> <br /> === Rationale ===<br /> <br /> Anyone with a modern standards-compliant web browser and a text editor should be able to create learning activities that can be used by anyone with a computer. Sugar should not be a walled garden that only allows learning activities expressly designed for it and it alone but rather gives extra power and depth to learning activities. Karma uses a specialized vocabulary that features a number of specialized terms. Please refer to the [[Karma/Dictionary|Karma Dictionary]] early and often.<br /> <br /> === Status ===<br /> <br /> Karma is a sub-project of Sugar Labs that is under active development as a part of a [[Karma#GSoC_Project| Google Summer of Code project]]. The latest examples can be seen at [http://karma.sugarlabs.org http://karma.sugarlabs.org]. You can also check out the [http://karmaproject.wordpress.com Karma Project blog] for updates.<br /> <br /> To try out the karma examples you need to have an html5-capable browser. The Browse activity within Sugar does not currently support html5. To try out karma within Sugar you need to install [http://dev.laptop.org/~bobbyp/surf/Surf-106.xo Surf] and its webkit dependencies or run Firefox 3.5 from the command-line (yum install pywebkitgtk WebKit-gtk gnome-python2-gconf).<br /> <br /> <br /> === What Karma Is ===<br /> <br /> * Karma is a simple framework to create simple interactive learning activities primarily for Sugar but also to be viewable through any web browser that supports html5<br /> * Karma is used to create simple activities that run off-line w/out access to the Internet<br /> * Karma is for web developers who want to contribute to Sugar using their current skills<br /> * Karma is built on top of open web standards such as html5, javascript, and CSS.<br /> * Karma is built to run on top of web browsers that support html5, particularly the canvas element.<br /> * Karma is built around the concept of individual &quot;lessons&quot; and multiple lessons can be aggregated into a sugar activity<br /> * Karma is the evolution of OLE Nepal's work on the EPaath suite of lessons in Nepal<br /> * Karma is designed with pervasive and easy internationalizaton in mind and integration with moodle, particularly for monitoring student progress<br /> * Karma is pedagogically agnostic. Pedagogical choices are left to the lesson author.<br /> <br /> === What Karma Isn't ===<br /> <br /> * Karma is not compatible with Internet Explorer because Internet Explorer does not support html5 apis such as canvas, svg, localStorage, etc.<br /> * Karma is not meant to replace pyGTK as the dominant toolset for creating Sugar activities<br /> * Karma is not a tool for creating activities with complex 3D graphics. Karma is a tool for creating activities with simple 2D graphics<br /> * Karma is not meant as a basis for a WYSIWG programming environment like TurtleArt, EToys, or Logo<br /> * Karma is not built to support browsers that do not support html5, such as Internet Explorer and Firefox &lt; version 3.5 <br /> * Karma is not intended to teach programming to children though it could be used as such<br /> <br /> === Design Philosophy ===<br /> <br /> A Karma lesson is composed of a valid html5 document, javascript code, and css stylesheets and optional assets such as images, audio, video and lesson plans. Karma should be very easy for inexperienced developers to understand and work with. Even non-programmers should be able to make visible changes by tweaking the code and liberal use of cut-and-paste. Complexities such as integration with pootle, local storage, and certain types of animation should be abstracted so that novice developers don't have to understand them in order to effectively use Karma. Karma strictly adheres to the Model-View-Controller Pattern and similarly to unobtrusive JavaScript. In essence. you should be able to substantially change the look and feel of a Karma lesson by modifying the CSS or you could translate the activity, without having to understand the JavaScript code.<br /> <br /> === Design Goals ===<br /> * Unobtrusive JavaScript<br /> * No globals<br /> * No extension of native objects<br /> <br /> === Technical Architecture ===<br /> <br /> * Run-time - Karma will work with basic functionality on any W3C standards-compliant browser that supports HTML5 tags canvas, audio, and svg. This notably excludes Microsoft's Internet Explorer. Karma will be particularly tailored to work with Sugar's Journal and collaboration through Telepathy. Longer-term we hope to extend Karma to take advantage of Sugar's collaboration features.<br /> * Primary Programming language - [https://developer.mozilla.org/en/New_in_JavaScript_1.6 Javascript 1.6] <br /> * [[Karma/i18n|i18n]] -- Pervasive internationalization is a critical part of Karma<br /> ** Supported types of i18n -- ToDo<br /> *** Output of Native Digits<br /> *** Image switching per locale<br /> *** Regular text, though it is unclear how to support plural forms, grammar shifts, and gender<br /> *** Audio switching per locale<br /> ** Integration with pootle<br /> * [[Karma/Utilities|Utilities]] -- we primarily use [http://www.narwhaljs.org narwhal] for command-line scripting and [http://code.google.com/p/jsdoc-toolkit/ jsdoc] for documentation<br /> * Journal, Telepathy Integration -- method to be determined, perhaps using html5's offline storage feature, some resources [https://developer.mozilla.org/en/Offline_resources_in_Firefox here] and [http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial here] <br /> * Moodle Integration -- method to be determined<br /> * [[Karma/Bundle_layout|Repo and Bundle layout]]<br /> <br /> === Conventions ===<br /> <br /> * [[Karma:Anatomy_of_Lesson|Anatomy of a Karma Lesson]]<br /> * The [[Karma/Dictionary|Karma Dictionary]]<br /> * [[Karma/Specifications|Karma Specifications]] (early draft)<br /> * Source Code stored in http://git.sugarlabs.org/projects/karma<br /> * Working demos at http://karma.sugarlabs.org<br /> * Unit tests http://karma.sugarlabs.org/tests/<br /> * Project Documentation kept in the Sugar Labs wiki<br /> * Coding conventions: Based on [http://www.dojotoolkit.org/developer/StyleGuide Dojo Style Guide] <br /> ** Use camel-case for function names and variables<br /> ** Exception to above -- object constructors should start with a capital letter<br /> ** Set column-width to 79 characters (from Python standard practice)<br /> ** Whenever possible, use jslint and then teach the rest of us how<br /> ** Anything Doug Crockford advises in &quot;JavaScript: The Good Parts&quot;<br /> * File naming conventions: lowercase letters, underscore instead of spaces (need to write more about it)<br /> <br /> == Meetings ==<br /> [[Karma:Meeting 21 December 2009]]<br /> <br /> == GSoC Project ==<br /> <br /> Karma started as a GSoC project with Felipe Lopez Toledo &quot;SubZero&quot; as the student participant and [[USER:BryanWB| Bryan Berry]] as mentor. <br /> <br /> === GSoC Meetings ===<br /> <br /> Notes from GSoC meetings - kept for archival purposes<br /> * [[Karma:Meeting 12 May 2009]]<br /> * [[Karma:Meeting 02 Jun 2009]]<br /> * [[Karma:Meeting 09 Jun 2009]]<br /> * [[Karma:Meeting 23 Jun 2009]]<br /> * [[Karma:Meeting 30 Jun 2009]]<br /> * [[Karma:Meeting 21 Jul 2009]]<br /> * [[Karma:Meeting 4 Aug 2009]]<br /> * [[Karma:Meeting 11 Aug 2009]]<br /> * [[Karma:Meeting 18 Aug 2009]]<br /> * [[Karma:Meeting 24 Aug 2009]]<br /> * [[Karma:Meeting 08 Sep 2009]]<br /> * [[Karma:Meeting 14 Sep 2009]]<br /> * [[Karma:Meeting 21 Sep 2009]]<br /> <br /> == Project Roadmap ==<br /> <br /> ==== 0.1 &quot;Osito&quot; ====<br /> <br /> Was completed September 11, 2009<br /> <br /> * 1 Working example in &quot;adding_up_to_10&quot;<br /> * cleaned up documentation with jsdocs api documentation and cleaned up README.txt<br /> * integrate chakra and &quot;adding_up_to_10&quot; and knavbar<br /> * adding_up_to_10 works on the XO<br /> ** Surf<br /> ** Browse<br /> <br /> ==== 0.2 &quot;Gatito&quot; ====<br /> <br /> Due mid-December 2009<br /> <br /> This release is timed to coincide with Bryan's visit to Google HQ for the GSoC Mentor's Summit<br /> <br /> * unit testing added to karma.js using QUnit -- DONE<br /> * API documented w/ jsdoc-toolkit<br /> * support for SVG and canvas animation -- DONE<br /> * 3 working examples<br /> ** Adding_Up_to_10 using both SVG and canvas -- DONE<br /> ** Quadrilaterals -- 50% done<br /> ** &quot;Conozco A Uruguay&quot; done with karma -- 50% done<br /> <br /> <br /> <br /> ==== 0.4 &quot;niño&quot; ====<br /> <br /> Due 31 January 2010<br /> <br /> * Full i18n support<br /> * Integrate all of the existing E-Paath lesson into chakra <br /> * narwhal build script to build one giant karma bundle w/ all the E-Paath lessons inside it and chakra<br /> * At least 6 lessons ready that have been translated into 3 languages each<br /> * Version 0.1 draft of karma specification done<br /> <br /> ==== 1.0 &quot;Muchacho&quot; ====<br /> <br /> This release may also be called &quot;Karma 1000&quot; and is a big wishlist<br /> <br /> * Full moodle integration<br /> * Offline storage and synchronization with moodle<br /> * Integration with the Sugar Journal<br /> * Integration with Telepathy on Sugar<br /> * fully functional &quot;kpages&quot;<br /> <br /> === Library ===<br /> <br /> here lies a lot of links to resources specific to karma<br /> <br /> UI<br /> * Iphone Human Interface Guide http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf<br /> * Palm Pre interface guide http://developer.palm.com/images/palm/pdf/palm_webos_hi_guidelines.pdf<br /> * 30 Usability Issues To Be Aware Of http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/<br /> * 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/<br /> * &quot;The Design of Everyday Things&quot; book by Don Norman<br /> * &quot;Don't Make me think&quot; by Steve Krug, guide to usability for web apps<br /> <br /> HTML5<br /> * http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br /> * http://www.w3.org/TR/html5-diff/ Differences between html4 and html5<br /> * [http://diveintohtml5.org/ Dive Into HTML5]<br /> <br /> General Web Design<br /> * &quot;Web Design in a Nutshell&quot; from O'Reilly<br /> * Apple &quot;Web Page Development: Best Practices&quot; http://developer.apple.com/internet/webcontent/bestwebdev.html<br /> <br /> Canvas<br /> * demos: http://html5demos.com/<br /> * basics: http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br /> * painting web app: http://dev.opera.com/articles/view/html5-canvas-painting/<br /> * mozilla canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial<br /> * using canvas on webkit: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html<br /> * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<br /> <br /> SVG<br /> * The [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html SVG Primer] a very detailed and in-depth resource<br /> * [http://raphaeljs.com/reference.html Raphaeljs documentation]<br /> * https://developer.mozilla.org/en/svg<br /> <br /> Javascript<br /> * [http://eloquentjavascript.net Eloquent Javascript] best beginning javascript resource<br /> * &quot;Javascript: The Good Parts&quot; book by Doug Crockford<br /> * &quot;jQuery in Action&quot; book<br /> * &quot;Pro Javascript Techniques&quot; by john resig<br /> * All the tutorials at www.ejohn.org, esp.<br /> ** http://ejohn.org/blog/how-javascript-timers-work/<br /> <br /> <br /> Coding Tools and Conventions<br /> * Firebug --- http://www.getfirebug.com<br /> * Web-Inspector --- webkit's answer to firebug<br /> * Browsers --- We primarily work with Chromium and Firefox &gt; 3.5<br /> * For emacs users -- nxhtml mode and magit.el for working w/ git<br /> * [http://www.jslint.com/ jslint]<br /> * [http://www.inkscape.org inkscape]<br /> * [http://narwhaljs.org narwhal]<br /> <br /> == Subpages ==<br /> <br /> {{Special:PrefixIndex/{{PAGENAMEE}}/}}</div>

BryanWB