1. týden: Úvod a dokumentace Week 1: Introduction and documentation

Během prvního týdne bylo úkolem vytvořit si osobní stránky a představit prvotní ideu závěrečného projektu. During the first week, the task was to create a personal website and introduce the initial idea for the final project.

Tvorba webových stránek Website creation

Poznámka: Právě si prohlížíte novější, upravenou verzi tohoto webu. Pokud by vás zajímalo, jak stránka vypadala ve své originální podobě z dob předmětu JVC, můžete navštívit původní verzi zde. Note: You are currently viewing a newer, updated version of this website. If you are interested in seeing how the site looked in its original form from the time of the JVC course, you can visit the original version here.

Vzhledem k tomu, že s tvorbou webů nemám žádné předchozí zkušenosti, nebylo mým cílem vytvořit nic přehnaně komplexního. Zvolil jsem radši minimalistický a přehledný design. Since I have no prior experience with web development, it was not my goal to create anything overly complex. Instead, I opted for a minimalist and clean design.

Začal jsem se základním návodem pro GitLab Pages a následně jsem zhlédl několik úvodních videí na YouTube, abych pochopil základy HTML a CSS. Při psaní kódu jsem využíval umělou inteligenci (Gemini). Snažil jsem se však kód slepě nekopírovat, ale pochopit ho, a používat AI spíše jako nástroj pro efektivnější práci. I started with a basic tutorial for GitLab Pages and then watched a few introductory YouTube videos to understand the basics of HTML and CSS. When writing the code, I used artificial intelligence (Gemini). However, I tried not to blindly copy the code, but rather to understand it, and use AI more as a tool for more efficient work.

Pro lepší udržitelnost jsem se snažil projekt logicky strukturovat. Zatímco HTML soubory tvoří samotný obsah stránek, jejich vzhled je dán souborem style.css. Všechny obrázky jsem přesunul do samostatné složky media. For better maintainability, I tried to structure the project logically. While the HTML files make up the actual content of the pages, their appearance is defined by the style.css file. I moved all images into a separate media folder.

Struktura webu

Jelikož by celková velikost webu neměla přesáhnout 100 MB a plánuji nahrávat velké množství obrázků a videí, bude nutné všechna média komprimovat. Fotografie z iPhonu, které mívají několik megabajtů, budu zmenšovat pomocí aplikace Výstřižky ve Windows - ta je dokáže zmenšit na 100 až 300 kB bez viditelné ztráty kvality. Videa pak budu upravovat v bezplatném programu Shotcut. Since the total size of the website should not exceed 100 MB and I plan to upload a large amount of images and videos, it will be necessary to compress all media. iPhone photos, which tend to be several megabytes in size, will be downsized using the Snipping Tool in Windows - it can reduce them to 100 to 300 kB without visible loss of quality. I will then edit the videos in the free program Shotcut.

Ke každému projektu budu přikládat jeho zdrojový kód. Pro lepší čitelnost a přehlednost využívám knihovnu Prism.js, která zvýrazňuje syntax. Kód tak vypadá podobně jako např. ve VS Code. I will attach the source code to each project. For better readability and clarity, I am using the Prism.js library, which highlights syntax. The code thus looks similar to, for example, VS Code.

HTML inserting_code.html 
<!DOCTYPE html>
<html lang="cs">
<head>
    <!-- ... -->
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
</head>
<body>
    <!-- ... -->

    <div class="code-container">
        <div class="code-header">
            <div class="code-info">
                <button class="toggle-btn" title="Rozbalit/Sbalit kód">▼</button>
                <span class="lang-badge">HTML</span>
                <span class="language-label">vkladani_kodu.html</span>
            </div>
            <button class="copy-btn">Kopírovat</button>
        </div>
        
        <div class="code-content">
<pre><code class="language-html">
<!-- Zdrojový kód -->
</code></pre>
        </div>
    </div>

    <!-- ... -->

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const codeContainers = document.querySelectorAll('.code-container');
            
            codeContainers.forEach(container => {
                const toggleBtn = container.querySelector('.toggle-btn');
                const copyBtn = container.querySelector('.copy-btn');
                const codeContent = container.querySelector('.code-content');
                const codeBlock = container.querySelector('code');
        
                codeContent.classList.add('collapsed');
                toggleBtn.textContent = '▶\uFE0E';
        
                toggleBtn.addEventListener('click', () => {
                    codeContent.classList.toggle('collapsed');
                    
                    if (codeContent.classList.contains('collapsed')) {
                        toggleBtn.textContent = '▶\uFE0E'; 
                    } else {
                        toggleBtn.textContent = '▼\uFE0E';
                    }
                });
        
                copyBtn.addEventListener('click', () => {
                    const textToCopy = codeBlock.innerText;
                    
                    navigator.clipboard.writeText(textToCopy).then(() => {
                        const originalText = copyBtn.textContent;
                        copyBtn.textContent = 'Zkopírováno';
                        copyBtn.style.color = '#28a745';
                        
                        setTimeout(() => {
                            copyBtn.textContent = originalText;
                            copyBtn.style.color = '';
                        }, 2000);
                    }).catch(err => {
                        console.error('chyba ', err);
                        copyBtn.textContent = 'Chyba!';
                    });
                });
            });
        });
    </script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>

</body>
</html>

Prvotní idea závěrečného projektu Initial idea for the final project

Jako závěrečný projekt se pokusím postavit hexapoda, tedy šestinohého robota. Tento projekt plánuji již delší dobu, jsem tedy rád, že mám konečně záminku ho zrealizovat. For the final project, I will attempt to build a hexapod, a six-legged robot. I have been planning this project for quite some time, so I am glad to finally have an excuse to realize it.

3D render návrhu hexapoda

Mým hlavním cílem je vytvořit hexapoda postaveného na Raspberry Pi 5, který bude splňovat následující: My main goal is to create a hexapod built on a Raspberry Pi 5, which will meet the following criteria: