UX

Frame works/tools , UX,  Infographics 

1/ Frame works/tools

20 JavaScript Frameworks Worth Checking Out - 

SproutCore: 

http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/

http://stackoverflow.com/questions/4133543/gwt-sproutcore-or-cappuccino

SproutCore Guides , Example Sites , StateCharts , When to Use SproutCore


Using SproutCore means moving your business logic client side

HTML5 & Pandora: JS libs used ,  Pandora HTML5 roll out 

We switched from jQuery to SproutCore, since jQuery offers a small set of utilities and SproutCore offers a nice high-level architecture.

Using SproutCore 2.0 with jQuery UI

Sproutcore VS jQuery + backbone.js  -- critic of SproutCore

Facebook Acquries SproutCOre

SproutCore Vs. Sancha:  SproutCore is more of a framework (like Rails). Sencha is a little of this too, but it lies somewhere in between SproutCore and jQuery UI (leaning more towards jQuery UI). 

 - asr: in this sense , Asana.com guys build on top of SproutCore ... check 

Mixing Frame Works:

1/ Personal blog Layouts

http://vis.stanford.edu/people/   - very simple one , no clutter 
http://vis.stanford.edu/jheer/bio/  -- good no flicker , no clutter page : we wanted some thing like this .
http://www.abhishekkant.net/  -- simple search box on top filters topics , popup detail screen 

1/ UX

Good UI layout: Idea is to have a  holy grail  documentation system , which can vastly improve the accessibility/usage of documents in a  company/education institute etc..

Get Content from this UI post

Good UI Layout  for: Collaborative Online Docs ( Wikis )
0) now we got DokuWiki (see software ) , all these below may be one or two specific pages in a site, else Doku will takecare of all other Documentation .

a)   OpenJDK http://openjdk.java.net ( Adv:  no flicker , huge prod. tested documentation sytle ( big openjdk community )
b)  Single Page Tabs (Jquery gcharts)
c)  Android SDK :  good filtering UI layout 

d) term.ly  -- good dict. layout , good for look up apps , by adding one more vertical tab content you can view Ton of content

e) compare with SVG open 2011 workshop page ( no flicker, no links )

f) chrome extensions:  good  one esp.  you tube one ...

g) good Code layout  
e) only  Right half Scrolls , good for filtering .... at USV.com

Good UI Layout  for: Online web applications/sites

a) Astrid  ( nice clean 3 pane layout , good Ajax  clender repeat event)

b) Asana  ( nice clean 3 pane layout )

c) blogger.com ( edit posts page: simple mouse over edit/delete highlight , different views UI sidebar/timeline ....)

d) schoolloop.com  - nice layout for enterprise apps.

Tools: http://www.uxforthemasses.com/free-ux-tools/
http://www.uxforthemasses.com/rapid-prototyping/

Blogs:

  Rapid prototying  

1/ Best User Experiences (UX)  through 

  a) good  UI layouts

  b) interaction with user 

      blogger.com edit page , simple mouse over edit/delete highlight , different views UI sidebar/timeline ....

Key requirements to satisfy:

  - fast to access ( most of the content as one web page with href  # ?)

 - well organised ( easy to comprehend )

 - easy to author (   )

 - easy to edit ( on the page itself , with a popup window? / Ajax call to server )

some good templates to consider

  3/ Sphinx ( for content Authoring ) : http://sphinx.pocoo.org/tutorial.html#documenting-objects ( it has server , Docutil )

      - used by our fav. PhD student

 4/ wikia : http://japaneserecipes.wikia.com/wiki/Azuki_Ice_Cream

     - this this kind of  too many edit may not be good for Programmers

- JDOM  http://jdom.org/docs/faq.html  ( some other simple Styles )

- http://planetjdk.org/

features of above Doc Styles:

1/ openJDK

    http://openjdk.java.net/guide/producingChangeset.html#merge

      - has TOC for this kind of docs ( improvement: we may need TOC as open/Collapse DIV to see contens instead of click to new page , see Quora.com  comments collapse div )

    http://openjdk.java.net/projects/jdk7/builds/

      -  menu at top of the page << features  build ...>> this is one kind of template for TOC lists

      -  Build Google calender , nice calender integration when involved big teams

2/  JQuery gcharts:

      - improvement: if used for TOC style documentation , have TOC section once user clicks on ' 2nd level tab' , and also 'top' image icon on each section so that user can go top TOP of the page any time with our much of mouse click wheel UP .

Table of Contents

3/ Sphinx: 

Sphinx uses reStructuredText as its markup language, and many of its strengths come from the power and straightforwardness of reStructuredText and its parsing and translating suite, the Docutils.

  Docutils is an open-source text processing system for processing plaintext documentation into useful formats, such as HTML or LaTeX. It includes reStructuredText, the easy to read, easy to use, what-you-see-is-what-you-get plaintext markup language.