IIT-B TECHFEST '20
Landing page for M-68 Development continued by @Gizmotronn
khan ocw cern hsf
Inspire With .ORG - A Website Challenge
ABOUT
You work as a web designer/developer for an amazing organization that is dedicated to making a majorimpact on the world. The company has just performed a rebranding initiative and wants to develop asingle-page website as their central online presence.You have been tasked with designing and building this web page from scratch.
PROBLEM STATEMENT
●Develop a single page website for your ‘organization’. Your organization can be real or fictional.●Website should be developed on a content management platform (such as Wordpress). Noprebuilt or purchased templates/themes should be used.●Site must be a simple HTML file or on the .ORG domain (either option is acceptable)
●Site should include the following elements:1.Top-level navigation system implementing dynamic element(s) - ie: scrolling to anchor sections,active rollovers, etc.2.At least five content sections, including (but not limited to):
●Hero Spot/Company tagline/identity
●News area that highlights at least three recent news items
●About Us section that details the organization and its mission
●Contact/Donate section that incorporates a form
●Video/Image Gallery that allows visitors to view various media3.Site should be easily administrated – content sections should be editable4.Feeds and/or links to social platforms (LI, Twitter, Facebook, IG)5.Site should be mobile-ready and employ a responsive framework6.Site needs to fully articulate the mission/objective of the real/imaginary organization and showexamples of the impact the organization is making on the world.
Participants can use non copyright images and icons for creatives purposes
Participants are free to use any extend of Bootstrap.
Inspire With .ORG - A Website Challenge
ABOUT
You work as a web designer/developer for an amazing organization that is dedicated to making a majorimpact on the world. The company has just performed a rebranding initiative and wants to develop asingle-page website as their central online presence.You have been tasked with designing and building this web page from scratch.
Abstract Submission–Teams will be required to submit
one report to inspirewithorg@techfest.org. This report should containthe idea they are looking forward to work on.Submission Format-The project report should be emailed to inspirewithorg@techfest.org with the subject Inspire with .ORGReport: Team Id (For example: Inspirewith.ORG: OR123).
Submission Format-
The project report should be emailed to inspirewithorg@techfest.org with the subject Inspire with .ORGReport: Team Id (For example: Inspirewith.ORG: OR123).Teams must follow the following details for the submission:1.The abstract must be submitted in pdf format only2.Font: Arial3.Size: 114.Spacing between two lines: 6 pts5.Spacing between two paragraphs: 10 pts6.Bottom margin: 1 inch
Stage 1: Initial Scope and Development Plan - Submission of a detailed plan for building out the site,including infrastructure (CMS environment) specifications. Teams will be shortlisted on the basis of their Plan.
Planned Single Page Website design for:
-Khan Academy(https://www.khanacademy.org/) Khan Academy is a non-profit educational organization created in 2008 by Salman Khan with the goal of creating a set of online tools that help educate students. The organization produces short lessons in the form of videos. Its website also includes supplementary practice exercises and materials for educators.
-MIT OCW(OPEN_COURSEWARE; www.ocw.mit.edu ) MIT OpenCourseWare is an initiative of the Massachusetts Institute of Technology to publish all of the educational materials from its undergraduate- and graduate-level courses online, freely and openly available to anyone, anywhere.
-CERN HEP SOFTWARE FOUNDATION(https://hepsoftwarefoundation.org/) The HEP Software Foundation facilitates cooperation and common efforts in High Energy Physics software and computing internationally.
PLANNED TECHNOLOGY STACK TO BE USED: Content Management Platform:Siteleaf(www.siteleaf.com) + Github Pages Support
Server Deatils/Hosting: Site hosting support on Github Pages.
HTML5: HTML5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it. HTML5 is the fifth and current major version of HTML, and subsumes XHTML.
CSS3: CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.
Bootstrap-4: Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
jQuery 3.3.1: jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License.
INNOVATIONS/PROCESS:
Firstly we plan to have background music on each of these single page websites,which we believe would be a differentiating factor form other websites,also we plan to have dynamic elements on the webpage which would change every time the user visits the website; also we are looking into techniques how to personalize he webpage for each vising user; also planning to add a newsletteer subscrbtion option,which would run on a third party service like Mailchimp so we can keep the interested users to keep them updates about the latest new from these organzations along with a redirect option to th foundations/organization's webpage, along with redirection to official donations website of that organzation, additionally we plan to implement a message box to write a short message to the organization.
The site will be cros platform and will be mobile-ready; additionally to increase the outreach of our organizaton(s) we plan to include an assiting Alexa skill to complement the single page website.
Our site would also include a soial media feed where all the mentions about the organization as well as the official updates directly form the the organization would be posted, aside from the NEWS section which would include deatiled updaes.
For this we would ry and implement an API servce so that the site is updated with the latest information without having to manually push each update,along with social media share button to share the webpage on multiple social media platforms.
We plan to have responsive navigation at the top of our first section and in the background of section using particle.js library.The other sections will be having parallax images in background and the switching between the sections will involve dynamic transitions.
We plan to include Gnerative art elements in our website this includes geenerative art designs(ref:https://www.artnome.com/news/2018/8/8/why-love-generative-art) and dynamic generative elements (ref: http://refikanadol.com/works/melting-memories/ http://refikanadol.com/) to furthur engage the users of the website and spread the message and the WHAT these organizations stand for, the work that they are doing,what they stand for and spread awareness about the same and how one can contribute.
Our primary reason to select these organizations being that we are really passionate abpout these, having used it some way or other in our lives for academic or personal Development, we find this platform as a means to give back for all the value we have received from the resources from these organizations and the open contributions that they have made for the development of million of people.
We truly would be happy if we caould even increase the awareness of these large organzations by a small factor, a small contribution from our side.
Allof the aboove mentioned is in addition to the the specifications alredy mentioned in the problem statement. TEAM MEMBERS: RISHABH CHAKRABARTY KARTIK GOEL