View source for SOCR HTML5 TestProjects 2013

==[[Available_SOCR_Development_Projects | SOCR Project]] - SOCR HTML5 Test Projects==

===Project goals===
The project descriptions below illustrates exemplary test projects redesigning, transforming and upgrading various SOCR resources to a modern platform- and browser-independent [http://en.wikipedia.org/wiki/HTML5 HTML5]/[http://en.wikipedia.org/wiki/JavaScript JavaScript] framework.

Before diving into these projects, its essential to learn and practice with [http://jade-lang.com/ JadeJS], [http://coffeescript.org CoffeeJS] and [http://angularjs.org AngularJS]. The [http://github.com/SOCRedu SOCR GitHub project] provides the necessary framework foundation and appropriate source code.

===Projects Descriptions===
====Project 1: JSON HTML5 Grid====
* Goal: Build an interactive HTML5 grid from [http://www.json.org/ JSON]/csv/xls formatted data.
* Tools/languages to be used: 
: [http://angularjs.org AngularJS] - base JavaScript (JS) framework 
: [https://github.com/angular-ui/ng-grid ng-grid] for AngularJs - makes it very easy to build a HTML5 grid from data.
: [http://twitter.github.com/bootstrap/ Twitter Bootstrap] - the look and feel

==== Project 2: AngularJS Service for table parsing====
* Goal: To build an angular service which converts tables in an URL to [http://www.json.org/ JSON] files.
* Tools/languages to be used: [http://angularjs.org AngularJS]
* See: [http://stackoverflow.com/questions/6271856/html-table-to-json html-table-to-json example]

It should parse an URL and find out tables containing data in the HTML page. Once all tables are discovered, parse and retrieve all data (all tables), ask the user to choose one table, and create a JSON object out of it. Structure of the JSON should be discussed with the mentor. 

====Project 3: SOCR Wiki page Facelift====

* Goal: Propose and implement a new infrastructure modernizing current [http://wiki.stat.ucla.edu/socr/ SOCR Wiki resources]. The new architecture should consume the meta-data from the current SOCR MediaWiki DB and the interface should be mobile ready. There are existing scripts to convert markdown [http://www.mediawiki.org/wiki/Manual:Database_access MediaWiki] syntax to HTML. Use these scripts and bootstrap to modernize the SOCR Wiki interface. The new frameworks should also allow easy editing (with limited access only to trusted SOCR personnel).
* Tools/languages to be used: Examples: [http://www.ffnn.nl/pages/projects/wiki-text-to-html.php wiki-text-to-html] and [http://goessner.net/articles/wiky/ Wiky: A Bidirectional Markup Converter]

====Project 4: Example of converting a SOCR Simulation to AngularJS/New SOCR Interface====

*Goal: Wrap up the [http://distributome.org/js/sim/BetaBinomialSimulation.html Beta-Binomial Distribution Simulation] into [http://angularjs.org angularJS] framework. Create angular Js modules for nvd3,js first and use it to plot the graphs.
* Technologies used: [http://angularjs.org  AngularJS], [http://nvd3.org/ nvd3], [http://distributome.org/ Distributome]

===See also ===
*[[Available_SOCR_Development_Projects]]
*[[SOCR_ProposalSubmissionGuidelines]]

<hr>

{{translate|pageName=http://wiki.stat.ucla.edu/socr/index.php?title=SOCR_HTML5_TestProjects_2013}}