1. Project management

This week I worked on defining my final project idea and started to getting used to the documentation process.

Documentation

• Decided to start from section "About me".
• Edited photo, substituted.
• Edited information on page.
• For more organised structure added lines by "hr" and gaps by "br".
• Tried to add link to Linkedin, for some reason it did nit appear.
• Reason: did not add text that would be link, fixed it.
• Started make Final project page , decided add dot list to reaserch paragraph.
• Added link to video on switcher.
• Added "hr" and "br".
• Decided try make template for photos on left and text on right, tried for this "float:right".
• Added it in CSS style file in body, failed, all content moved on right.
• Decided to make text flowing around picture bu adding to CSS file ".leftimg" class and added to image characteristics.

.leftimg
   {
   float:left;
   margin: 0px 50px 5px 0;
   }
          

• For more nice view, changed gaps around picture.
• Decided try to make following navigation tab.
• Found class ".sticky" added to CSS file, did not work.

.sticky 
   {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   }
          

• Realised that forgot add class into HTML tag, added, did not work.
• Was mistake in syntax, Josep helped, started work.
• Hided materials table on final project page till it will need it.
• Decided to add net for week assignments links and cadens menu for it.
• Tried to use ".wrapper" class with items definition.

.wrapper 
   {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 100px;
   grid-auto-rows: 100px;
   grid-template-areas:
    "a b c"
    "d e f"
    "g h i"
    "j k l"
    "m n o"
    "p q r";
   }

.item1 
   { 
   grid-area: a;
   align-self: center;
   justify-self: center;
   }
.item2 
   {
   grid-area: b;
   align-self: center;
   justify-self: center;
   }
.item3 
   {
   grid-area: c;
   align-self: center;
   justify-self: center;
   }
          
        ...

.item18 
   {
   grid-area: r;
   align-self: center;
   justify-self: center;
   }
          

• It worked, but elements were not distributed evenly.
• Needed to change "grid-template columns: repeat ( 3 instead of 8 ,1fr)", started work correctly.
• Added "br" for text block looks better, tried to centralise text by adding "text-align:center" to CSS file, did not work.
• Understood that need to crerate class ".text" with "text-align:center".
• Started add ".text" class to each ".item", realized that possible just add it to ".wrapper" class to influense all included elements.
• For cadens menu added few classes:

/* Container - necessary for placing drop-down content */

.dropdown 
   {
   position: relative;
   display: inline-block;
   }

/* Drop-down content (hidden by default) */

.dropdown-content 
   {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 400px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   }

/* Links inside the drop-down list */

.dropdown-content a 
   {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   }

/* Changing the color of drop-down links when hovering the cursor */

.dropdown-content a:hover 
   {
   background-color: #ddd;
   }

/* Show the drop-down menu when hovering the cursor */

.dropdown:hover .dropdown-content 
   {
   display: block;
   }

/* Changing the background color of the drop-down list button when displaying the contents of the drop-down list */

.dropdown:hover .dropbtn 
   {
   background-color: #3e8e41;
   }
          

• In source example was used button, used link instead of it.
• Edited content and settings.
• Opening area was too tight, so changed in ".dropdown-content" class "min-width" on 400 px.
• Added code to other pages.
• Found that for some reason from "week01.html" links on "index.html" and "week01.html" did not work.
• Reason was that were neded "../" in links paths for "week01.html" page, because other files are located one level up in folders.

Github

• So, for local repository need to create folder with same name (as at remote repository) on computer, use command " git clone "__SSH_key___", it tooked from personal page on Gihub"


• Tried to upload changes on remote repo using "git add .", failed.
• Tried "git status", result: "fatal:not a git repository".
• Tried use "cd" command (for connection with remote repository), picked folder in teminal window, did not work.
• Wrongly created new repo by "git init", after that little bit caught panic and asked Josep for help.
• Delited new repo.
• Used "cd" command with repo folder path after it and it conected.
• Used "git add .", "git commit -m "___"", "git push" commands.
• For parallel developing first need command " git pull " for uploading changes made by other.


• During FabAcademy lots of mistakes were done, so learned few commands during solving problem.
• " git restore --staged ./ " - command for unstaging changes, if " git add " have to be canceled.
• " git reset --soft HEAD~ " - command for delitting last commit with changes saving.

Final Project idea & sketch

• Maximalist idea of my Final Project is interactive working table for computer and paperwork with interactive integrated ilumination.
• Since recommendation is to make our final projects with spiral method of incriasing complexity, basic idea is to create "input media switcher" for lightning, add lighting indication of state. Next stage to integtate it with photoresistor determining properties of light, add handy manual setting ability. Further step is to integtate it into lamp or table design.
• Eventually I decided focus on final aim - create interactive working table, just increase complexity of system step by step, adding "layers" of user experience. This is way to elaborate product holisticaly, taking into account planing and prioring aspects importance for product completeness.

Research draft plan

• "Raw" construction
• Research about mutual influation between light and human
• Light for computer and paper working
• UX computer and paper working
• Natural structure surfaces


• Lamp / Table
• Surface area functionality
• Construction + cirqute structure

After common research, I systematized "UX layers" structure and areas of further research.

Final realisation changed a lot.