e-Learning Project Tools

Listed below are  Models Tools , Layouts , ' Design Inspirations ' , Libraries for e-Learning  Project  

 JSFiddle good layout   http://graph.tk/  http://ie.microsoft.com/testdrive/Browser/LassoBirds/  http://www.lynda.com/Access-training-tutorials/140-0.html


Inspirational Quotes:
The winners have always been those who took average technology and reconfigured/repackaged it for mass market or different audiences. With google search, they achieved both a leap in technology and the ability to make it easy for people to use - which was quite a feat.(asr: we our html5 audio, video(Canvas render) e-learn we are going to do same )


 In my opinion winners win because not only do they have crazy good ideas, but they work hard to show the world it works.






1/ Content
Learning : Concept Mastery

2/ Interactions ( with user)
Main page Layout ( get from other ref links )
Component layouts 
Audio
Objects/Diagrams

3/ Components details
Layouts/Code : HTML5  sample projects

 -- editable table , and Pie charts shown for teaching fractions
 -- reminders example showing simple data input
 -- tiny links on top of Postit notes..



4/ Technical Architecture
Performance
Hosting
Khan Client architecture 
Khan Server architecture 






JS Libraries ( diff libraries , discuss lib size KB , licensing )
HTML5/CSS3 vs. supporting OLD Browsers

5/ Releated Works 
asr: see my notes at the bottom stating  a) shortcut b) amplification , most of these 10 startups are in shortcut , our E-learn is in Amplification ...

Education Incubator Imagine K12 Picks Ten Startups For Its First Class

The company sorted through some 200 applications, interviewed 36 startups and made offers to ten startups for the first class this summer. All accepted, took an average of $20,000 in funding for an average of 6% of their equity, and moved to Silicon Valley.


They’re also getting lots of attention and mentoring via a weekly dinner and office hours.
Screen Shots of al 10 Startups 
ImagineK12 hatches its first class of education tech startups 
grockit  ( state what to learn from them and how to improve )
khan acadmy
Lynda.com  Review (read full review very detailed) , Yelp users , Look at this INDEXDB video
  - Orielly video lessons (seems manual video ) , but from Books .... that is diff from Linda ...
  - I want to be able link to individual video topics.  ( photos are attached to below link page)
see e-learning-interaction-boards-pens-text


http://www.tutor.com/pricing/  - $30/hour
http://www.growingstars.com/algebra-online-tutoring  - $15/hour
http://www.tutorvista.com/ - $10/hour when bought 20 hour pack , addtional discount as $140 -> $7/hour
http://educomp.com/Products/SmartClass.aspx -  Material FOr schools  ,  Pearson invested in both
CD by same tutorVista company

6/ Building 
 --asr: But the key is to find passonate  HTML5/CSS/JS guy so that he can do the work. Expertise is extermly important to understand  Khan Academy 'Practice excercise Model '  using in  JS scrpits etc.
 a/ we got the guy ( ref. indian blogs )  9Lessons.com  Srinivas   .lots of tutorials , easy JS guy .
 -  This guy has Mac Book Pro and hosts on EC2 , so he may be expensive.
b/1 other possibilities: talk to Bokam to get  any known  Javascript, CSS guy
b2/ get from other Indian blogs (JS/CSS guy)

d/ ELance: 

-- shows how a small company getting projects done: https://www.elance.com/e/consumer/2?&t=1

-- HTML5 top1 tested: 

 Here is some Independent HTML5 guys list

1/ Learning : Concept Mastery

Learning : Concept Mastery ( details are here)

- And it explains the higher mathematical concepts in the way a younger child's mind would work! It's like the author remembers well how he thought when he was a kid and wrote the book from that POV. You can see the light go on in the child's eyes when that algebra or logic concept clicks


- I particularly liked this book because each unit (chapter) is all-inclusive. There is a great lesson at the beginning followed by practice and then three levelsof questions. The only supplement I needed to create was a method of assessing my studentsImagineK12 hatches its first class of education tech startups

Technology does two things for us;  shortcuts and amplifiers  ( from the above link)
 - it either provides a shortcut to accomplishing something, 
 - or it amplifies that which we want to do. 

Using this framework, where and how can shortcuts and amplifiers aid us in teaching and learning?

At the individual level, learning is an inherently incremental, evolutionary process. There are no shortcuts really. Sure, this varies by individual student. Some only need access to the info in order to absorb it. Giving this type of student a shortcut to the content is useful. But most non-future-hedge-funders learn gradually, incrementally and experientially.

Case in point: much of our collective knowledge is on the Internet already, but this has made little difference in student learning outcomes. Real learning experiences take time and guidance.

That’s not to say that shortcut technology doesn’t have its place in schools. It does. 

- Data processing,
- student tracking,
- gaming,
- testing,
-  instant messaging,
 - and content distribution will help us save some time and track what’s trackable. Money will be made and engagement may see at least a short-term boost.

asr: based on this blog post author , therese startup do either a) Shortcut  or b) Amplification asr: our E-Learning is in Amplification ( one on one , tracking progress based based on what is teaching in class romms these days and master with from the Best Material ...)

1) Shortcut startups: Eduvant, Goalbook, ClassDojo, Nunook and Remind101 

2) Amplification startups: Then comes the question of amplification. Here there is more promise, certainly! Of the 10 ImagineK12 startups, Educreations and FormativeLearning are amplifiers

The case against Khan Academy and for 3.5 million Sal Khans insteadWhere to hack education and where to stack it

2.1 / Mainpage Layout

This Plurk UI seems good , small fonts ,   good Hide button  for language
-This Left menu Dim seems is a UI standard , I saw it many places .

for explaining 'math Word' problems , to hand draw pictures use this code base http://ie.microsoft.com/testdrive/Browser/LassoBirds/  ( Have a separate pallete items to draw this and  write Text below it )
  -  complete List of MS demos are here ( we may find some other good ones here )

See this Lynda tutorials http://www.lynda.com/Access-training-tutorials/140-0.html

a) JSFiddle good layout ,  ( use processing.Js to draw Canvas object to show )
  - Have F11 full-screen mode by default when user enters application so that User is immersered with material no TABS and other things on the TOP side of the browser.
b/ study this we may need this kind of HAND DRAW .: http://mbostock.github.com/protovis/ex/splines-full.html  ( asr: we may develop small lib to show HAND Drawn style diagrams such as circles , Cat , set of Cats/dogs , house , Candies, boys, girls etc.. ( light weight , colored )

c/ JQuery key based Canvas Draw   Theory  ;  JQuery Key Navigation 
d/ good fonts, expand collapse Chapter List ,  Look at bottom Yellow Tabs , very tight and good .  Top A-Z ribbion is good

e/ good smooth drag/drop of images , we can use it : http://chessvenue.net/pages/chess/

2.2 / Component  Layout

Component Templates:  we can have similar templates on Web for sale around $10 ) , get and modify
MySQL console :  we may use this kind as part of  MYSQL class ... , I tried CONSOLE it worked .

- good Time Line based UI ...
- good FAQ page layout

Site Templates:  , good Site Template ( with no flicker Documentation ) ,  show/Hide options ( like Indeed.com )
 - Horizantal/vertical Tab pages, Nice options box  , Mega Menus ..


Top author List here , 5 star rated..
Events Calender ,
Category Tree on RHS - good color , we may choose this kind of tree for cat. .
Santu Setty - from Hyderabad


Good UX interaction when selected item: It is close to ( Trello Cards ... ) , may be we use this one .
  - good tabs , smooth transition from  '4 col grid to 2 col grid'
------

------

http://graph.tk/  - all Algebra is based on this one .
See this Lynda tutorials http://www.lynda.com/Access-training-tutorials/140-0.html

a/ good tiny fonts Rect. box with links
b) Also check Wofrafram alpha site UI ( good fonts , hide/show )
c) blogger.com  post view ( on mouse over show Edit/View/Delete , this is latest 2011 design of blogger )
 - Icons and buttons are great , Icon change color when selected .
d) we should you this kind of arrow with  Html5 canvas/css  while explaining audio, this seems natural arrows than straight lines  ( find how , this is a image of it )
The Evolution of Privacy on Facebook : good to Viz to show 'Changes over time'

----
Best UI: http://keith-wood.name/gChart.html - I want my blog this way single page and Editable link which saves change content to Server ...

( all web sites android/Python/... learning sites should be like this , except ADs spoiled the web pages for #of Page views so for Dollars )

1) for us stick with 'Jquery UI' , this works great across all browsers and HTML 4 based .. but still great verity of tools and Ton of plug-ins ( see pulg-in list )

http://jqueryui.com/demos/datepicker/

- we can use this JQuery Lib for now our 'course Project ' , you can not Canvas/SVG with out MS support on WIN 7 of IE 9 ( as of now Beta ..)

2.3/ Audio

We need to contral Audio in sync with learing materiala painted on the screen, timing is important , here are tools to help.
a/ Buzz  - HTML5 JS Audio library .. ( asr: this is what we want ...)
b/ Sound Mager 2:  What, Why, How
 - The soundmanager2.js core can get down to 10 KB over the wire, -  Api demo - good audio demos : loops , timers etc.. this what we need for e-Learner ..,  HTML5 based API  ( see nice debugger on right )

c/ HTML5 fallbacks  Modernizer

2.4 / Objects/Diagrams 

a/ We need these light weight HTML5/CSS  components for drawing/diagarms  instead of  Images/flash
  - so they are FAST to download
  - responsive ( user can manipulate )
http://csspiffle.com/ - No more photo editing software for web design! . 

  --  Wireframe: You can create interactive wireframes with CSS Piffle easily. Just using HTML5 and CSS3.

  -- Animations:Animations in CSS Piffle are really easy to create. You design and CSS Piffle makes all the work for you. (asr: they may provide TEXT Animation with Timing for our Course Content )


b/ study this we may need this kind of HAND DRAW .: http://mbostock.github.com/protovis/ex/splines-full.html ( This simple editor demonstrates the various methods of spline interpolation supported by Protovis. Drag the control points to see how the shape of the spline changes. Click to add new points, and use the DELETE key to delete the selected control point.) [ these guys say new one D3.Js ) ,  Pivotvis to D3.js  
 - also check this http://mbostock.github.com/protovis/docs/scale.html , check these features where are these in D3.js  ,  Pivotis Documentation

3.3/  Layouts/Code :HTML5  sample projects 

Design Inspirational  Sites: http://line25.com/category/inspiration

Another Big list here  , all good ones
wow MindMaps   clean Layout  , HTML5  Canvas games

All Entries: http://10k.aneventapart.com/Entry/Gallery   , Nishant is On this Panel of judges 
  - $3k first prize , good response worldwide ,  all HTML5 base  ,  good Rules see here , all under 10K code size , here is what you can be assured about these apps
 -  good  limited JS libs  as per rules ( 4)
 - Rules says they need to work on IE9+ , FireFox 3.5+ , Safari , Chrome . So well tested on modern Browsers so we can base the code on top of these apps.

First prize - good graphics  ,
PostIt Notes - wow simple  asr: we can use this in e-learn ( for drawing comparison bars etc.. )

Lean /Clean  pages
3D Graph - wow
Calender  -  lean
Reminders  - wow simple  ( we can extend this with  Voice Alert when time hit ,  send this info to calenders Google/Microsoft .)
Symbol game:  simple/clean  ( author said available for consulting ) ,  JUMP game: http://www.paulbrunt.co.uk/ : we can have these inside free for Kids ...
table - we can use this table for students to create new table from a simple menu ..

Card Game:
PastChart -  Needs to parameterize  of   Time line ( month/Year/Days/Hours ) , Store locally as file or to Google Docs as XML etc..

Clock - Param for  Color , Hands , Roman/Numarals etc.. - we can use for Kids Test in E-Learn ....
Good Font and chart 
Rows and Columns  , SUN Calc 3D
 Beatiful page Reader( see next/prev ) HTML editor     , good YouTube Viewer

SVG apps:  home art  , Darg and Drop objects , objects/Walls   , Color Mix

Games:

4.1/  Old Notes

content:
   1. Stating Pre-requisites ( show on pre-requisites text some where when mouse over , so user can go there and do some exercises).
  ex: Gina has 15 candies which is 3 times as much as  Ria candies . How many candies  Ria has
 step 1:  ask question who has more candies
 step 2: draw a picture of 2 bars comparing ( name  bras G , R  and relative size  3x )
 step 3: now show examples   1/5   2/10  3/15  in a table
 step 4: now see what we know   Gina has 15 , let us write Gina Really has 15
 step 5:  now ask how many  Ria has ...
   for this pre-requisite is:    person A has 5 times as candies as Person B , so who has more candies ....
 ( asr: see Physics book/alagebra ordered to show  summary of topic at the begging )

4.1/  Performance

- Khan site linked to this Yahoo performance guide 
a/ Need this book for Google App Engine GAE archietcure understading 

b/ Performance Pfofiling with AppStats  3/2010 article
60 seconds is relatively high for data that may change often, but we figure users won’t be bothered by this on our site. Much shorter timeouts - as low as just a few seconds - can still save huge amounts of resources, especially on popular sites. Few users will worry about a 5 second cache timeout, but if you’re getting 100 queries a second, you’ve just eliminated 99.8% of your query overhead!

c/ Adventures in performance tuning on Google App Engine  : see Lesson Learned
d/ I intend on pushing ahead with AppEngine as there aren't too many cloud platforms that offer scalability to the point that AppEngine does

4.1/  Hosting

a/ Need this book for Google App Engine GAE archietcure understading 

b/  Pricing $9/month level should be fine till end of  VC pitch
b2/ Amazon EC2 Vs. RackSpace 
c/ support for GAE on StackOverflow
d/ Khan Academy is using it
e/ Nov 2011 Review - positive 
f/  it served about 3.4 million pageviews (1 million unique visitors) in the 12 days it was live. It grossed over $1.2 million. Depending on who you ask, this is quite a lot of traffic, and we exceeded the free App Engine quota. Google sent us a bill for a grand total of $71.56.
g/ This site is on GAE , response seems fine ,  founder say they will do it again on GAE 


asr final word:  Whole Stack  webserver , DB , memcache all is by Google , so they improve it over time , instead of going to RackSpace or Amazon or  eapps.com 
 - Scalability ( for once in a while peak demand ) is taken care by  App engine , instead of you worrying about it for RackSpace case ...

4.2/  Khan Client architecture

Khan Exercise Rewrite  ( by JQuery Creator )

 Writing Exercises: Home  Exercise template  , Formatting 

4.3/  Khan Server architecture

a/ Khan Academy runs on Google App Engine (GAE) which means they must either use Java or Python 2.5 (Python 2.5 in sandboxed mode also minus the ability to run C extension modules).

b/  Khan Academy uses Python 2.5 along with GAE's default webapp module. Since webapp does not include a template engine, they use the Django 0.96 template engine which the GAE runtime includes by default.

c/ GAE works off of a datastore which is automatically replicated and scaled and is based on BigTable and hence Google Filesystem (GFS). GAE does not allow for you to host a relational database. Instead of using SQL to tie into the datastore and having write access to your filesystem, you need to use the Google Query Language (GQL). 

d/ GQL looks exactly like SQL but you can't do joins and you can't select partial entities from your queries. You must either select just the keys or the entire entity.

e/ GAE works off of a datastore which is automatically replicated and scaled and is based on BigTable and hence Google Filesystem (GFS). GAE does not allow for you to host a relational database. Instead of using SQL to tie into the datastore and having write access to your filesystem, you need to use the Google Query Language (GQL). GQL looks exactly like SQL but you can't do joins and you can't select partial entities from your queries. You must either select just the keys or the entire entity.

f/ GAE applications such as Khan make use of caching so that the datastore does not need to be contacted on each page load. This caching is typically handled with the memcache service included in GAE API

f/ Other than GAE they use a few very cool Javascript libraries under the hood: