3D Note Wiki

Introduction

3D printing technology has taken the world by storm. Carrying this trend forward is our tech-startup, 3D Note, that brings forward a 3D printing pen which will help users draw in three dimensions.

Aim

The aim of this project was to gain a greater depth of understanding of the steps involved in the creation of a website.

Team Members and Responsibilities

S.No. Name Responsibilities
1. Varnit Jain Site layout design, Coding, Web-hosting, Supervision
2. Abhijeet Singh Site layout, design Coding
3. Saumya Balodi Graphic Design, Content writing, Wiki-page
4. Katyayani Singh Content-writing, Coding, Wiki-page

Area and Initial Planning for the Website

With the startup culture gaining momentum in India, our team decided to develop a website for a tech-startup.

Initial Attempt

Our maiden attempt involved creating a standard multi-page website with a grey scale color scheme.

Initial.jpg

With working knowledge of html and very limited knowledge of css, we set about trying gain a better understanding of both these languages. The biggest challenge faced by the team was Javascript. None of us had ever experimented with Javascript before, but we decided to ahead with learning it from scratch.

Tools, Languages and Platforms

  • The coding was done in html (Hyper Text Markup Language): HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages.The basic coding was done in html.
  • Styles were added using css (Cascading Style Sheets): Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
  • JQuery was used to add smooth transitions and animations: JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation.
  • The website was made from scratch and therefore, aids like Drupal, Bootstrap etc were not used.

The Learning Process (and supplemental Code)

Our initial interface, involving multiple web pages, was up and running. However, the website lacked a touch of professionalism. In order to make the website simple and elegant, we decided to change the interface to a single page interface, with a smooth scroll. So we started from scratch and this time, we planned every little detail.

As_AXp_IF78_OOBeqn_10c_PXC22qh_Qo_DQ7_UJr_Lt3g_LJZAI4.jpg

We were back to square one. And this time, we had to come up with a simple, responsive and professional design. It was not about selling a product anymore; it was about selling an idea. We needed a design and an interface that would convey a crisp and clear message across to our targeted audience. With this in mind, we started working again. We worked upon the following features:

Smooth Scroll

The first obstacle we overcame was scrolling across the page smoothly. We achieved this by using JQuery, which is an extension of Javascript.

Enlarging Images on Hover

Avv_Gk_I5_WLy_Xdnv_MM9r_Aov_Plp2xg_UPiz0_G_N6i_OLC.jpg

Effects like enlarge on hover result in blinking of the image due to the overhead involved with the transport protocol. To avoid such flickering, the transition was made slower.

Webpage Nesting

An interesting feature that we discovered during this project was webpage nesting. In order to nest google forms into our website, we learned to use the <iframe> tag.

6_1_Screen_Shot_2015_10_25_at_11_37_46_PM.png

Code Snippets

/*GALLERY CODE*/
 
#photos {
  /* Prevent vertical gaps */
  line-height: 0;
 
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}
 
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
} 
 
img{
    -webkit-transition: scale 2s; /* Safari*/
    -moz-transition: scale 2s;
    transition: scale 2s;
    /*-webkit-transition: 0.5s; /* Safari 
    transition: 0.5s;  /*For smooth back trans */
 
}
 
img:hover{
    -webkit-transform: scale(1.5,1.5);
    -moz-transform:scale(1.5,1.5);
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 1s; /* Safari */
    transition: 1s;
}
/*END*/

The Outcome

screen.png
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License