Principles and Practices & Project Management 🖥


weekly assignaments💬

the purpose is to acquire skills in using a version control system such as Git, develop a website and begin to capture the ideas of the final project in visual form.

First and foremost, I set a soundtrack to accompany my work throughout the process(4.-"day one" by hanz zimmer is my favorite song on the soundtrack).

references link to start my website⬇

    Links Function
    Git Git is a distributed version control system used to track changes in code files and coordinate work among multiple individuals in software development projects.
    Template Templates are models I used to create my HTML page, simplifying the process by standardizing formats and enhancing efficiency in all aspects.
    Fabcloud Fab Lab Cloud is a cloud-based platform for managing Fab Labs, enabling users to access and share designs, control machines, manage inventory, and collaborate on digital fabrication projects remotely.
    Visual studio code Visual Studio Code is a Microsoft code editor used for programming and software development. It offers advanced editing features, Git integration, and high customization through extensions.

Steps for create my git repository🚶‍♂️

Git commands: Function
1.-git init initialize repository📟
2.-git clone copy repository💽
3.-git add . add all documents untracked🗂
4.-git commit -m "message" package📦
5.-git push upload to cloud🌥
6.-git status review pendient actions❗❓
7.-git config --global user.email "you@example.com" Configure your account by accessing the cloud.🔐
8.-git config --global user.name "Your Name" Enter your username.🗃🧞‍♂️

Commands that will be used for our terminal📟

command Function
cd "folder name" Open folder📂
mkdir "folder name" Create folder🗂
ls Show directory🗄
cd .. back🔙

How to upload your repository to the cloud?🌥

1. First, we use the ls command in CMD to display our folders.
2. Next, we type the cd/ command and in quotes the folder we want to access (we can also use the TAB key).
3. We enter the mkdir "name" command to create a folder.
4. We type the cd "name" command for the newly created folder.
5. Then, we create a "file name".txt file using the type null > command.
6. We initialize the repository with the git init command.
7. We check our actions with git status to see what actions we can take next. We observe that we haven't added anything to our repository yet, so we are suggested to use the git add . command.
8. We check the status again and notice that it is still unpackaged, so we use git commit -m "my_first_commit", where the text in quotes is the name of our commit.

How I created my webpage?🌐

My site was created using a template and trying to use mostly HTML and CSS there are also some effects with JavaScript Here is how to create a website in three easy steps:

  1. First than ever i chose a template:
    I went to html5up.net and picked a template that I liked, then downloaded it.
  2. I extracted the files:
    I unzipped the downloaded file and copied the folder with the template files into my project.

  3. edited the content:
    I opened the index.html file in my text editor and looked for sections that allowed me to change the content, such as titles, texts, and links. I customized the content according to my needs.
  4. To start editing the template I started using a div id=intro to be able to create a special section for the introduction to my html page. I added an image that I designed using an img tag with an src attribute to be able to specify the path where the image is located in my files and it will be displayed on the web page, in case I wanted to add a description to the image I would use the alt= attribute and for the image size use the width= attribute and add how big you wanted the image in pixels. To set the title of the web page, use an h1 tag and a class=animate_animate that takes me from a page called animate.css to be able to apply specific styles or behaviors to my tag. I did the same process for the subtitles, only I replaced the h1 with an h4 so that the lyrics do not overshadow the title.
  5. With an ul tag I could group elements in an unordered way to create a list of which I could order with the li tag to define each element within the list. inside the list I placed a label to be able to create a link to the menu and I closed the /div to make that section of the code end.
  6. In the next section I created an unordered list with ul, which I sorted with li and added an a tag to create a link to other tabs in my code
  7. For the next section of the code, add a header element to define the header of the part where my process will be shown and I added a class=major. I added a title with an h2 and then added a p element to be able to add a paragraph and under that I added my name with an h3 making it a little smaller than normal. I added a ul and added a special class= actions Below that class place a link that leads to my about me adding a class=button large. I used a center to center the or and after that I placed another header to define another header and I did the same process for that section of the code
  8. To separate a new section, use a div and add a title with an h1 and center it with the center tag. I created a section tag to group related and thematically similar content within the web page, adding a class=posts. Adding an article tag since it is used to represent independent and autonomous content and a header to define the independent section. When adding a span tag used to apply specific styles or behaviors to a part of a text which I will also add a class=date to add the dates and make it look good aesthetically, I added an h2 tag for subtitle and adding a br for insert a line break add an h3 for slightly smaller letters. I closed the h2, h3 tags and the header element and then added an img tag with an src to direct me to the desired image, an alt if I wanted to put a footer on the image and a width in px to define the size. I added a p tag to describe what will be done this week. Finally, create a list with ul with a class= action special and order this with a li tag adding a link with an href to locate the file in jpg and a class=button so that this button can direct to another tab called week 1 and I closed all the tags, I did the same process 17 times, changing the images, titles and paragraphs.
  9. saved and previewed:
    I saved my changes [command S] and opened the index.html file in a browser to see my page.

How use Git?🤷‍♂️

1. Git Clone 💽

The clone command creates a local repository of the folder that is in git on our computer.

2. Git Add . 🗂
After modifying the files the command add adds the changes we want to keep on sight to update the local copy of the repository

3. Git Commit📦
Commit is the command used to save a checkpoint of our work. Is important to mention that these only saves the changes made on our computer.

4. Git Push🌥
This command sincs all the changes we made locally to the cloud file system.



Final project idea💡

Green hydrogen for energy alternative🔋

For my final project, I aim to develop a hydrogen generator using a prototype electrolysis system with a storage tank for the produced hydrogen. The objective is to harness this hydrogen to generate electrical energy.

Why i'll do this?🧑‍🌾

For several years, the world has been generating substantial greenhouse gas emissions. Consequently, global warming is escalating, underscoring the importance of contemplating the future and understanding the long-term impacts of these emissions. It is crucial to explore cleaner alternatives and initiate an energy transition to meet the goals outlined in the Paris Agreement. This international accord emphasizes the need to eliminate greenhouse gas emissions by 2050. Thinking proactively about sustainable solutions is essential for mitigating the long-term effects of climate change.

How does my project help?🌎

This project will have a positive impact on numerous individuals for future research and endeavors. Additionally, it aims to contribute to the reduction of carbon emissions, thereby fostering a cleaner and healthier planet for all species.

How can i'll do that?🧑‍🔬

The electrolysis generator will employ an anode (-) and a cathode (+) to facilitate the separation of molecules in the substance (H2O+Cu). This process allows for the extraction of hydrogen through the cathode. A research investigation will be conducted to determine the optimal materials for safely storing such a volatile element as hydrogen. Additionally, the system will feature an air gate that opens whenever the generator is operational. The gate will close automatically using a gas meter to prevent hydrogen leakage once the tank reaches full capacity. Furthermore, a converter will be integrated to not only store the gas but also convert it into electrical energy, aiming to enhance the efficiency of the gas utilization. The goal is to develop a system that not only securely stores hydrogen but also maximizes its conversion into electrical power.


Time Management

Useful links🌻