final ppt
DESCRIPTION
TRANSCRIPT
![Page 1: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/1.jpg)
Final PresentationDESIGN & DEVELOPMENT OF ONLINE REVIEW &
COLLABORATION SOFTWARE FRAMEBENCH
PRACTISE SCHOOL- II (2nd Semester) at [FRAME]BENCH (formerly Anaya Labs)
Ankit GuptaDevesh Aggarwal
![Page 2: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/2.jpg)
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
![Page 3: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/3.jpg)
![Page 4: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/4.jpg)
Rich multimedia content has become one of the prominent means of engaging masses whether through online, broadcast
or mobile channels.
![Page 5: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/5.jpg)
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
![Page 6: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/6.jpg)
The content is highly visual and full of details. Plain text is simply not enough to convey creative ideas.
![Page 7: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/7.jpg)
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.
![Page 8: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/8.jpg)
PROTEAN:
![Page 9: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/9.jpg)
Experience meetings like never before!
![Page 10: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/10.jpg)
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
![Page 11: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/11.jpg)
![Page 12: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/12.jpg)
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
![Page 13: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/13.jpg)
Conceptualising and Designing the front end for the application:
![Page 14: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/14.jpg)
Wireframing:
![Page 15: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/15.jpg)
FIGURE 1: WORKSPACE
![Page 16: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/16.jpg)
FIGURE2: USERS
![Page 17: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/17.jpg)
FIGURE 3: FILE SPACE
![Page 18: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/18.jpg)
FIGURE 4: WORK ENVIRONMENT
![Page 19: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/19.jpg)
Making the App UI
![Page 20: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/20.jpg)
Workspaces: UI
![Page 21: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/21.jpg)
Review Interface
![Page 22: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/22.jpg)
![Page 23: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/23.jpg)
![Page 24: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/24.jpg)
![Page 25: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/25.jpg)
Things Learnt at PS-2• Overall software development process & stages• Startup Experience• HTML5• CSS3• Javascript/jQuery• Node JS• MySQL• Socket Programming
![Page 26: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/26.jpg)
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.
![Page 27: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/27.jpg)
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.
![Page 28: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/28.jpg)
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(); } });
![Page 29: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/29.jpg)
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
![Page 30: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/30.jpg)
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.
![Page 31: Final ppt](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5480f341b4af9f362d8b4623/html5/thumbnails/31.jpg)
THANK YOU