Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Final PresentationDESIGN & DEVELOPMENT OF ONLINE REVIEW & COLLABORATION SOFTWARE FRAMEBENCH   PRACTISE SCHOOL- II (2nd Sem...
TOPICS COVERED•   What is FRAMEBENCH?•   Task assigned to us. (Our Challenge)•   Features to be implemented•   Our Work – ...
People can talk but not express. If you aretalking about the same thing but not seeingthe same thing it leads to frustrati...
PROTEAN:
OUR TASKS•   To work upon the blueprinting of the app.•   Brainstorm and discussions over features &options•   Market Rese...
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•   Javascrip...
NODE JSNode.js is a platform built on Chromes JavaScript runtime for easilybuilding fast, scalable network applications. N...
Twitter bootstrapTwitter Bootstrap is a free collection of Bootstrap is modular and consists essentiallytools for creating...
Code snippet    Our basic Todo model       var Todo = Backbone.Model.extend({    has title, order, and done    attributes....
Features Implemented:   To work upon the blueprinting of the app.   Brainstorm and discussions over features &options  ...
Amazon S3• Amazon S3 is storage for the Internet. It is designed  to make web-scale computing easier for  developers.  Ama...
THANK YOU
Final ppt
Final ppt
Final ppt
Final ppt
Final ppt
Final ppt
Final ppt
Final ppt
Final ppt
Final ppt
Upcoming SlideShare
Loading in …5
×

Final ppt

401 views

Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Final ppt

  1. 1. Final PresentationDESIGN & DEVELOPMENT OF ONLINE REVIEW & COLLABORATION SOFTWARE FRAMEBENCH PRACTISE SCHOOL- II (2nd Semester) at [FRAME]BENCH (formerly Anaya Labs) Ankit Gupta Devesh Aggarwal
  2. 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
  3. 3. People can talk but not express. If you aretalking about the same thing but not seeingthe same thing it leads to frustration andconfusion.
  4. 4. PROTEAN:
  5. 5. 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
  6. 6. Conceptualising and Designing the front end for the application:
  7. 7. Wireframing:
  8. 8. FIGURE 1: WORKSPACE
  9. 9. FIGURE2: USERS
  10. 10. FIGURE 3: FILE SPACE
  11. 11. FIGURE 4: WORK ENVIRONMENT
  12. 12. Making the App UI
  13. 13. Workspaces: UI
  14. 14. Review Interface
  15. 15. Things Learnt at PS-2• Overall software development process & stages• Startup Experience• HTML5• CSS3• Javascript/jQuery• Node JS• MySQL• Socket Programming
  16. 16. NODE JSNode.js is a platform built on Chromes JavaScript runtime for easilybuilding fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight andefficient, perfect for data-intensive real-time applications that run acrossdistributed devices.
  17. 17. Twitter bootstrapTwitter Bootstrap is a free collection of Bootstrap is modular and consists essentiallytools for creating websites and web of a series of LESS stylesheets thatapplications. It contains HTML and implement the various components of theCSS-based design templates for toolkit. A stylesheet called bootstrap.lesstypography, forms, buttons, charts, navi includes the components stylesheets. Thegation and other interface developer can adapt the bootstrap filecomponents, as well as optional itself, selecting the components she wishesJavaScript 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.
  18. 18. 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 anddelete its view.
  19. 19. 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
  20. 20. 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.
  21. 21. THANK YOU

×