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 ...
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:
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 ...)
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
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 sh
ould 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'
( 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 )
- 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
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 , h
ere 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!
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
Writing Exercises: Home Exercise template ,
Formatting
4.3/ Khan Server architecture
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:
