George Geo

As a part of the M.Des industrial Design course at IIT-D, documenting every study, assignments and projects was necessary. For this purpose a website was to be designed to compile and arrange this information. To get to it, the following softwares had to be installed as a platform for the below mentioned purposes.

• Sublime text - a cross platform source code editor
• WinSCP - for secure file transfers between servers
• MAMP - for hosting local servers

The first step to designing the website was by learning basic HTML and CSS coding with the help of w3schools.com. After familiarising myself, a suitable template had to be downloaded. The template was decided based on its simplicity and ease of use both for the site user and for myself for the editing of code. From the site www.templated.co the "MONOCHROMED" template is used to create this site. To have a better understanding of how the code works, I used Google Chrome's Inspect tool to locate the code for elements in the html file. The biggest advantage of this tool was being able to edit the code inside Chrome itself and getting a constant live preview of the edits. Using this info, it was easier to address the changes in the design through Sublime Text.And with the help of CSS, it is effortless to makes changes on multiple pages at the same time as the css file is a common ground for all the pages. For the image files that needed to be linked, it was important to compress it before uploading it onto the servers. This was done using ImageMagick.

Basic commands used for HTML coding

<p></p>
Paragraph tag for adding text based output in paragraphs.

<h1></h1>

Heading tags which vary in sizes from h1-h6.

These can further be edited by creating a heading-tag based style.

<br>

Break Tag is used to push the text to the next line.

Further using two break-tags together like <br></br> will leave a line gap.

Listing can be done in two ways 

Ordered lists where the list is numbered <ol></ol>

Unordered lists where the list is bulleted <ul></ul>

Each of the listed item is denoted by the tag <li></li>

<a href="#"></a>

Anchor tag is used to attach a link to an elements such as text or images.

By substituting the # with any link the hyperlink is activated.

The honeycomb gallery design was a free CSS based template from http://www.templatemo.com. The code for every individual polygon was fixed in the css style file and added into the html

Image Compression

All the images that are used have been compressed through Photoshop and Illustrator. On these Adobe platforms, there is the tool to "Save for Web" in the software to have a visual comparison of the original image witht the compressed image side by side. This way it is convienient to adjust the quality of the final image based on the detail we require.

Uploading the website into the server

After editing the template to the required preferences, the site was then uploaded onto the IIT-D server for privately viewing it within the campus network. WinSCP to link that bridge, the template folder with all the media, css and js files were transfers securely into the IIT-D server

Log-in into the IIT-D server using the server name

Making a private_html folder and copying the webite files into that location