1. Final Presentation
DESIGN & DEVELOPMENT OF ONLINE REVIEW &
COLLABORATION SOFTWARE FRAMEBENCH
PRACTISE SCHOOL- II (2nd Semester) at
[FRAME]BENCH (formerly Anaya Labs)
Ankit Gupta
Devesh Aggarwal

2. 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

7. 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.

8. PROTEAN:

10. 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

13. Conceptualising and Designing the front end for the application:

14. Wireframing:

15. FIGURE 1: WORKSPACE

16. FIGURE2: USERS

17. FIGURE 3: FILE SPACE

18. FIGURE 4: WORK ENVIRONMENT

19. Making the App UI

20. Workspaces: UI

21. Review Interface

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

26. 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.

27. Twitter bootstrap
Twitter Bootstrap is a free collection of Bootstrap is modular and consists essentially
tools for creating websites and web of a series of LESS stylesheets that
applications. It contains HTML and implement the various components of the
CSS-based design templates for toolkit. A stylesheet called bootstrap.less
typography, forms, buttons, charts, navi includes the components stylesheets. The
gation and other interface developer can adapt the bootstrap file
components, as well as optional itself, selecting the components she wishes
JavaScript extensions. 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.

28. Code snippet
Our basic Todo model var Todo = Backbone.Model.extend({
has title, order, and done
attributes.
¶
Default attributes for the defaults: function() { return { title: "empty todo...", order: Todos.nextOrder(), done: false }; },
todo item.
¶
Ensure that each todo initialize: function() { if (!this.get("title")) { this.set({"title": this.defaults.title}); } },
created has title.
Toggle the done state of toggle: function() { this.save({done: !this.get("done")}); },
this todo item.
¶
Remove this Todo clear: function() { this.destroy(); } });
from localStorage and
delete its view.

29. 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

30. 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.

31. THANK YOU