-  Week 1  +

principles and practices, project management

Tasks

  • Build a personal website and upload it through git hub to the class archive
  • Plan, sketch and describe your potential final project along with a brief introduction about you

    • Website Development

    I learned brackets, a free open source code editor, focused on HTML, CSS and JavaScript, for developing my personal website and followed tutorials embedded below. Having no experience of working with any web developing application before, it was very difficult for me to get hold of html coding/editing.

    After downloading and installing brackets this is how it looks like.

    After this, I downloaded a theme -phantom- from HTML5 Up. And found it's design quite appropriate for my website and very close to what I have imagined and sketched before referring it.

    Now the next step is to make suitable changes in the template for which I referred W3Schools to understand the basics. Firstly, I edited the menu section and added following tabs to it:

    1. Home page briefly talks about my research interests and poster of my final project.
    2. About page has a detailed information about me and my work.
    3. Assignments page comprises weekly work done during the fab academy, which is basically a Fab Folio.
    4. Final Project sums up my documentation for final project, from inception to execution.
    5. Files tab directly takes you to all my project files, stored in a google drive.

    In brackets, quick commands like 'ctrl e' allowed me to quickly tweak the CSS, related to the code of the theme that I had downloaded. I made couple of changes like text image alignments, background colors, text color etc to suit my taste and bring some clarity to my documentation. Following screen-shot shows the changes made to the background color of the weekly thumbnails on assignment and homepage. Originally in all thumbnails, styles had different colors assigned to them (left in the screen-shot), which I changed to white (right in the screen-shot).

    In the following image, I have high-lighted the location in the css file where I changed the color of the menu background from grey (background: #5858585) to blue (background: #00ccff).

    To keep the consistency, I used same shade of blue (#00ccff) for weekly assignment text on assignment page and home page. But kept the same text appear white (#ffffff) when cursor hovers over it.

    After giving title to the page, in the header and footer section, I linked important websites like fab academy, fab lab cept and other social networking sites such as facebook and linkedin to the respective logos.

    Then in menu section I linked all pages I had created -homepage, about page, assignment page, final project and project links. Also, added some text in the main section. Everything is highlighted in the following

    In the main section of week 1 page, another important thing that I incorporated is links to previous and next page using '-' and '+' sign, this is done for easy navigation.

    Typically, in the downloaded theme, all images are aligned to the left. But at most of the places I have aligned them with the center of the page using simple <center> </center> tag, that is also used for aligning weekly assignment headings.

    I have used generic.html file, originally came with the downloaded package, for creating 'About me' page and 'Final Project' page.

    For the assignment page I am using index.html file which is also used for my home page.

    In the whole process of creating a new site, Live development Button which brings code editing and browser inspection together helped me see changes instantly.

    Git Setup

    I never had any experience working with Git, it is an unknown platform for me. With little research, I learned that it is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. Git tutorials helped me understand its interface and more importantly its usage. After installing Git and creating UserId, I signed in at GitLab- Fab Academy.

    The next step is to clone all the files, library/repository of our lab to my system using HTTPS link sequentially following the commands in git bash:

    1. Open git bash

    2. Git Global Setup
      git config --global user.name "ashish17"
      git config --global user.email "ar.ashishtiwari@gmail.com"

    3. Cloning an Existing Repository
      git clone http://git.fabacademy.org/fabacademy2017/fablabcept.git
      cd fablabcept

    4. Adding HTML files remote repository
      After cloning, I moved all website HTML files to my folder in fablabcept folder. Then, through Git I pushed website data to get in sync with the class archives. Followings steps demonstrates the process:
      fablabcept -> students -> 227 (227 is my student id)
      git pull
      git status
      git add -A
      git commit -m "first commit"
      git push
      After publishing the files from local repository to the remote repository, I could see my website linked with the fab academy 2017 student webpage.

    Final Project sketch

    For my final project, I will be making Light Curtains which will be used as a shadding device, with buttons both manual and LDR module as an input device and servo motor as an output device. The initial idea is to celebrate natural light in built environment. To me, my final product is not merely a shading device, but an experiment to appreciate daylight and its lost nuances. Following sketch shows how I am imagining my final product. For detailed information please go to the final project page.

    Tools and Techniques to be employed in the process of making would involve: 3D printing, laser cutting, CNC milling, electronics, motors, and sensors.

    Links

    Week 1 Files
    Git
    Brackets
    HTML5 Up
    W3Schools