-  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 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.

    In HTML file, highlighted in grey, I gave title to the page and linked fab academy, fab lab cept and my facebook page to the 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 was links to previous and next page using '-' and '+' sign, in order to ease site navigation.

    Live development Button brought code editing and browser inspection together. Since both are in sync, I am able see changes instantly by clicking on the button.

    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