SOCR HTML5 TestProjects 2013

From Socr

(Difference between revisions)
Jump to: navigation, search
(Created page with '== SOCR Project - SOCR HTML5 Test Projects== ===Project goals=== The project descriptions below illustrates exemplary test projects rede…')
(Project goals)
 
(2 intermediate revisions not shown)
Line 3: Line 3:
===Project goals===
===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.
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===
===Projects Descriptions===
Line 26: 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 "Beta-Binomial Distribution Simulation" simulation into [http://angularjs.org angularJS] framework. Create angular Js modules for nvd3,js first and use it to plot the graphs.
+
*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]

Current revision as of 21:37, 19 March 2013

Contents

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

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

See also




Translate this page:

(default)

Deutsch

Español

Français

Italiano

Português

日本語

България

الامارات العربية المتحدة

Suomi

इस भाषा में

Norge

한국어

中文

繁体中文

Русский

Nederlands

Ελληνικά

Hrvatska

Česká republika

Danmark

Polska

România

Sverige

Personal tools