final ppt

Final PresentationDESIGN & DEVELOPMENT OF ONLINE REVIEW &

COLLABORATION SOFTWARE FRAMEBENCH

PRACTISE SCHOOL- II (2nd Semester) at [FRAME]BENCH (formerly Anaya Labs)

Ankit GuptaDevesh Aggarwal

TOPICS COVERED

• What is FRAMEBENCH?• Task assigned to us. (Our Challenge)• Features to be implemented• Our Work – UI: From wireframe to UI• Technologies Learnt & Overall Experience

Rich multimedia content has become one of the prominent means of engaging masses whether through online, broadcast

or mobile channels.

But, serious content production is a costly affair!

Advertising

TV Ads Viral Videos

Entertainment

Animation

SFXMusic Vids

Vis

ualiza

tion

Architecture

Products

Medical

Info

rmati

on

al

Documentaries

Educational Content Tr

ain

ing

Digital arts

Corporate

The content is highly visual and full of details. Plain text is simply not enough to convey creative ideas.

People can talk but not express. If you are talking about the same thing but not seeing the same thing it leads to frustration and confusion.

PROTEAN:

Experience meetings like never before!

OUR TASKS

• To work upon the blueprinting of the app.• Brainstorm and discussions over features

&options• Market Research• Architectural Decisions & Research• Design the UI/UX for the software• Photoshop & Code the UI

MAIN FEATURES

Synchronized View & Playback

Intelligent caching for low bandwidths

Access to recorded meetings anytime, anywhere

Access on mobile devices

Audio/Video chat from within your browser

Comparison of multiple assets in one work space

Conceptualising and Designing the front end for the application:

Wireframing:

FIGURE 1: WORKSPACE

 FIGURE2: USERS

FIGURE 3: FILE SPACE

FIGURE 4: WORK ENVIRONMENT

Making the App UI

Workspaces: UI

Review Interface

Things Learnt at PS-2• Overall software development process & stages• Startup Experience• HTML5• CSS3• Javascript/jQuery• Node JS• MySQL• Socket Programming

NODE JS

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Twitter bootstrap

Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.

Bootstrap is modular and consists essentially of a series of LESS stylesheets that implement the various components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. The developer can adapt the bootstrap file itself, selecting the components she wishes to use in her project.Adjustments are possible to a limited extent through a central configuration stylesheet. More profound changes are possible by the LESS declarations.

Code snippetOur basic Todo model has title, order, and done attributes.

var Todo = Backbone.Model.extend({

¶

Default attributes for the todo item.

defaults: function() { return { title: "empty todo...", order: Todos.nextOrder(), done: false }; },

¶

Ensure that each todo created has title.

initialize: function() { if (!this.get("title")) { this.set({"title": this.defaults.title}); } },

Toggle the done state of this todo item.

toggle: function() { this.save({done: !this.get("done")}); },

¶

Remove this Todo from localStorage and delete its view.

clear: function() { this.destroy(); } });

Features Implemented:

To work upon the blueprinting of the app. Brainstorm and discussions over features

&options Market Research Architectural Decisions & Research Design the UI/UX for the software Photoshop & Code the UI

Amazon S3• Amazon S3 is storage for the Internet. It is designed

to make web-scale computing easier for developers.

Amazon S3 provides a simple web services interface that can be used to store and retrieve any amount of data, at any time, from anywhere on the web. It gives any developer access to the same highly scalable, reliable, secure, fast, inexpensive infrastructure that Amazon uses to run its own global network of web sites. The service aims to maximize benefits of scale and to pass those benefits on to developers.

THANK YOU