Difference between revisions of "SOCR HTML5 TestProjects 2013"
(→Project goals) |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 4: | Line 4: | ||
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. | 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]. | + | 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=== | ===Projects Descriptions=== | ||
| Line 28: | Line 28: | ||
====Project 4: Example of converting a SOCR Simulation to AngularJS/New SOCR Interface==== | ====Project 4: Example of converting a SOCR Simulation to AngularJS/New SOCR Interface==== | ||
| − | *Goal: Wrap up the | + | *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] | * Technologies used: [http://angularjs.org AngularJS], [http://nvd3.org/ nvd3], [http://distributome.org/ Distributome] | ||
Latest revision as of 16:43, 19 March 2013
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 HTML5/JavaScript framework.
Before diving into these projects, its essential to learn and practice with JadeJS, CoffeeJS and AngularJS. The 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 JSON/csv/xls formatted data.
- Tools/languages to be used:
- AngularJS - base JavaScript (JS) framework
- ng-grid for AngularJs - makes it very easy to build a HTML5 grid from data.
- 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 JSON files.
- Tools/languages to be used: AngularJS
- See: 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 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 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: wiki-text-to-html and Wiky: A Bidirectional Markup Converter
Project 4: Example of converting a SOCR Simulation to AngularJS/New SOCR Interface
- Goal: Wrap up the Beta-Binomial Distribution Simulation into angularJS framework. Create angular Js modules for nvd3,js first and use it to plot the graphs.
- Technologies used: AngularJS, nvd3, Distributome
See also
Translate this page:
