Skip to content

1. State of the art, project management and documentation

Portada

The Importance of Documenting

Documentation is a fundamental tool in any field, whether personal, academic, professional, or business-related. Its importance lies in the fact that it allows us to record, organize, and preserve valuable information for future reference. Below are some key reasons why documentation is essential:

Preserving knowledge: Documentation ensures that knowledge and information are not lost over time. By recording processes, decisions, learnings, and results, it facilitates the transmission of that knowledge to others and future generations, preventing the loss of valuable information.

Facilitating decision-making: Having access to well-documented information allows for informed decision-making based on facts. In both work and academic settings, clear and precise documentation contributes to more effective decision-making and fewer errors.

Increasing efficiency and productivity: When documentation describes procedures, methodologies, and best practices, it reduces errors and the need to repeat tasks. This also optimizes time, as people can quickly refer to existing documents instead of recreating information.

The tools

To make this whole experience work we will use 3 key tools. And i used this tutorial to understand how to use each one

GITLAB PLATFORM - To the repository

NUEVAL - To the evaluation local and global

MATTERMOST - To communicate

First steps to edit your page

Once I logged into my account, I was able to see the main gitLab window, where the logins and updated information about my site are displayed. To start editing my website template, I selected the "Edit-Web IDE" option to open the code window.

Laser cut

I made the first changes to the template by selecting the "mkdocs.yml" section and modifying the basic options such as the site name and colors.

NOTE: To explore more color options you can click here

Laser cut

To create a new folder you must select the "+" sign and click on "New Directory". This way you can edit the basic information of the new item.

To start uploading images, create a folder corresponding to each week and in each one select the "+" sign, but unlike the folders, I used the "Upload file" option.

NOTE: In each folder you can repeat the same process.

Laser cut

It is possible that files need to be changed during the documentation process, so these can be replaced by selecting them and clicking on the "Replace" option.

Laser cut

Markdown's editing window allows you to see a preview of the information you are editing in real time, which is very convenient to avoid updating the site all the time.

To open this window, just click on the "OPEN Preview" option located in the upper right corner.

Laser cut

Now, the most important part of the whole editing process is updating information and that is achieved in the "Source control" option where you can see the number of changes you have made and a red button with the option "Commit and push to main" which you must press to make the changes on the page.

Remember: the information update may take a couple of minutes and you can see its progress in the main GITLAB window (when a green arrow appears, it means that the changes are ready.)

Laser cut

HOW TO ADD ELEMENTS

Images

Documentation through images will be a constant in this process, so it must be considered that the images must have a weight less than 400 KB.

If you want to reduce the size of your images without losing quality, you can use the platform Tiny PNG

If you want to remove the background from your photos you can use the platform Remove BG

To add cover images

![Name of image](../images/folder name/file name)

To add align images

![Description image](../images/folder name/file name){ width=(image size in number) align=(right or left) }

To add centered images

<figure markdown>
 ![name of image](../images/Folder name/file name){ width=(Image size in number)}
  <figcaption></figcaption>
</figure>



Tables

|Title|Title|Title|
|:-----------------|:---------------:| ---------------:| 
|Text align left|Text align center|Text align right|

How i change the assignment menu

|||
|---|---|
|[![](../images/folder name/file name){ width=300 }](./page name.md)|[![](../images/Folder name/file name){ width=300 }](./page name.md)|
|[![](../images/folder name/file name){ width=300 }](./page name.md)|[![](../images/Folder name/file name){ width=300 }](./page name.md)|



Videos

Laser cut

<div style="text-align: center;">

VIDEO CODE

</div>


<a href="LINK">TEXT to identify the link</a>



Codes

   ```
   To inlcude a simple code
   ```

     ```cpp
     To inlcude a programation code
     ```


Main differences between markdown and html

Laser cut