Ensure software is usable by Suzanne Pierce

Details on how to do this task: Ensure software is usable

MCSDSS workflows, data, and required packages or resources for a build

An initial User Manual and Set-up Guide is available as a word document

Selected case example datasets and gather together (see next section)

Technology Goals

The MCSDSS is a prototype system intended to demonstrate the potential capabilities of a single page application (SPA) running atop a web and cloud based architecture utilizing open source technologies. The application is implemented on current web standards while supporting human interface design that targets both traditional mouse/keyboard interactions and modern touch/gesture enabled interactions. The technology stack for the Heatseeker was selected with the goal of creating a robust and dynamic modular codebase that can be adjusted to fit many use cases and scale to support usage loads that range between simple data display to complex scientific simulation-based modelling and analytics. The application integrates current frameworks for highly performant agile development with unit testing, statistical analysis, data visualization, mapping technologies, geographic data manipulation, and cloud infrastructure while retaining support for traditional HTML5/CSS3 web standards.

Server Stack

The MCSDSS capitalizes on a recent evolution in the ECMA6 standard (the JavaScript language) and its comprehensive adoption rate across all web-enabled devices as the de facto language of the internet. The current approach is based on the traditional web stack (Apache Server, MySQL DB, Linux OS) technologies. The entirety of the MCSDSS application prototype runs on the Amazon Web Services (AWS) cloud on a single Elastic Compute Cloud (EC2) medium server instance running an Amazon Linux AMI and leveraging the AWS Route53 DNS service with Elastic Storage Blocks (EBS) for dynamic real-time data persistence and Simple Storage Service (S3) for read-only and archived data persistence.

Server Side Technology Stack • Linux OS (AWS version, though any will work, e.g. http://www.ubuntu.com/ ) • Apache Web Server (http://httpd.apache.org/ ) • MySQL Database (http://www.mysql.com/ )

Workflow • Ruby (https://www.ruby-lang.org/en/documentation/installation/ ) • Node JS and Node Package Manager (http://nodejs.org/ ) • Compass (http://compass-style.org/ ) • Yeoman (http://yeoman.io/ ) • Bower (http://bower.io/ ) • Grunt (http://gruntjs.com/ ) • Bitbucket (https://bitbucket.org/ ) • Git (http://git-scm.com/ )

Client Stack

The client-side framework implements Google’s AngularJS, one of the predominant modern web libraries which enables modular code development in a decoupled Model-View-Controller-Service structure. The decoupled structure allows for robust unit testing (via the Karma test runner coupled with the Jasmine behavior-driven development framework for testing JavaScript code), end-to-end testing (using the Protractor test framework), automated application builds, and separation of responsibilities within the application design and within the development team roles. Additionally the AngularJS framework provides support for 1) templating systems (such as Jade, Handlebars, MustacheJS, Underscore, etc.), 2) routing, state machines, 3) data binding, 4) AJAX requests, animations and transitions (both JavaScript and CSS based), and 5) the use of modern web-development workflows based on Yeoman IO. The Yeoman workflow adds additional fluidity to the development process. For example, through integration with the Node Package Manager (for using modular third party node based libraries), Bower (for using modular third party JavaScript-based libraries), GruntJS (for automated error and code checking, unit testing, code minification, code obfuscation, and any other automated task), and providing various scaffolding systems for erecting complex application structures in very short periods of time. The online repository and project management services of BitBucket (from Atlassian) and a Git based code repository were used for the codebase management (version control) and issue tracking. Several third party libraries are used to provide extended capabilities. Specifically D3 for data visualization and DOM manipulation, JQuery for DOM manipulation, SkrollrJS for parallax display effects (a visual display technique pioneered by Disney and in vogue on the modern web), WaypointsJS for linking to embedded content, GSAP for additional animations and transitions, KineticJS for additional touch and gesture support, LeafletJS for map technology integration, Bootstrap for responsive web design and user interface components, SASS & Compass for CSS styling and animations, HTML5 Boilerplate for consistent UI development, and ModernizrJS for feature detection and adaptive client capabilities.

Client Side Technology Stack • AngularJS (https://angularjs.org/ ) • KarmaJS (http://karma-runner.github.io/0.12/index.html ) • JasmineJS (http://jasmine.github.io/ ) • ProtractorJS (http://angular.github.io/protractor/#/ ) • ModernizrJS (http://modernizr.com/ ) • HTML5 Boilerplate (http://html5boilerplate.com/ ) • Bootstrap (http://getbootstrap.com/ ) • SASS (http://sass-lang.com/ ) • Compass (http://compass-style.org/ ) • Jade (http://jade-lang.com/ ) • Handlebars (http://handlebarsjs.com/ ) • MustacheJS (http://mustache.github.io/ ) • JQuery (http://jquery.com/ ) • D3 (http://d3js.org/ ) • LeafletJS (http://leafletjs.com/ ) • GSAP (https://greensock.com/gsap ) • SkrollrJS (http://prinzhorn.github.io/skrollr/ ) • WaypointsJS (http://imakewebthings.com/waypoints/ ) • KineticJS (http://kineticjs.com/ )