Úvod

HTML Meme

Vývojové prostředí

Vývojové prostředí je software, který nám umožňuje rychlejší a kvalitnější vývoj aplikací. Pro tento kurz (KMI/WEB a KMI/INFS) nás budou zajímat vývojová prostředí, dále jen IDE, která jsou vhodná pro tvorbu webových stránek.

Od IDE budeme minimálně vyžadovat zvýraznění syntax, upozornění na špatnou syntax a formátování zdrojového kódu. Vhodné bude aby IDE umělo i pokročilejší věci jako doplňování kódu nebo Emmet.

Pro tento kurz je doporučeno Visual Studio Code.

Visual Studio Code

Visual Studio Code Logo

Visual Studio Code, dále jen VS Code, je bezplatný open-source software vyvíjený společností Microsoft. VS Code je ideální a velice populární nástroj pro tvorbu webových stránek. VS Code je vhodný pro začínající kodéry a vývojáře, disponuje širokou podporou programovacích jazyků.

Instalace Visual Studio Code

VS Code je podporováno na všech hlavních operačních systémech, tedy Windows (Win 7, 8, 10, 11 pro 32bit, 64bit a ARM), Linux (.deb a .rpm pro 64bit, ARM a ARM64) a macOS (10.11+ pro Intel a Apple Silicon). Systémové požadavky naleznete zde.

Pokyny pro instalaci naleznete zde pro tyto operační systémy: Linux, macOS, Windows.

Pokud máte nějaké problémy se stažením, instalací nebo spuštěním VS Code kontaktujte mě na MS Teams.

Rozšíření

VS Code disponuje integrovanou funkcí pro instalaci rozšíření a jejich správu. Rozšíření expandují funkce IDE, přidávají podporu programovacích jazyků, mění vzhled IDE atd...

Nám se budou hodit následující rozšíření pro tento kurz:

Instalace rozšíření

Rozšíření lze nainstalovat dvěma způsoby. První způsob je přímo z webového prohlížeče a druhý způsob je přímo z VS Code. My si ukážeme způsob instalace rozšíření z VS Code.

Panel VS Code

Ve výchozím nastavení správa rozšíření se nachází na levé straně (čtyři čtverečky vedle sebe, pravý horní čtvereček je posunutý). Kliknutím na ikonku správy rozšíření nebo pomocí klávesové zkratky Ctrl + Shift + X se dostaneme ke správě rozšíření.

Vyhledávací pole rozšíření VS Code

Do vyhledávacího pole můžeme napsat název rozšíření a VS Code nám sám nabídne rozšíření která se shodují s vyhledaným názvem.

Vyhledané rozšíření 'Live Server'

Jako první rozšíření, které nám VS Code nabízí je Live Server. Rozšíření Live Server nám jedním kliknutím umožní spustit lokální webový server s funkcí automatické změny obsahu při úpravě zdrojového kódu.

Rozšíření, která nejsou nainstalována mají při sobě tlačítko pro instalaci. Rozšíření, které u sebe tlačítko pro instalaci nemají jsou již nainstalována. Rozšíření, která jsou zašedlá, výše například rozšíření Live Sass Compiler, značí že rozšíření je nainstalováno ale není aktivní.

Použití Live Server

Ukázka použití rozšíření Live Server

Použití rozšíření Live Server je velice jednoduché, stačí ve VS Code nad daným souborem vyvolat kontextovou nabídku a zvolit Open with Live Server. Rozšíření spustí lokální webový server a ve webovém prohlížeči se vám otevře daný .html soubor. Po úpravě zdrojového kódu se v prohlížeči projeví změna.

Další tři rozšíření (Auto Close Tag, Auto Rename Tag, IntelliSense for CSS class names in HTML) proberu pouze na cvičení.

Další IDE

Vývojářské nástroje

Chrome Developer Tools

Chrome Developer Tools je sada vývojářských nástrojů. Sada obsahuje prohlížení zdrojového kódu, ladění css stylů a css animací, náhled kontrastu textu, konzoli, prohlížení request požadavků a lighthouse.

Chrome Developer Tools lze otevřít pomocí klávesy F12.

Prohlížení zdrojového kódu

V průběhu semestru se seznámíme s Chrome Developer Tools.

Can I Use

Webová stránka Can I Use nabízí aktuální seznam podpory technologií napříč všemi webovými prohlížeči. 

Can I Use ukázka pro webp formát

Vhodný nástroj na zjištění stavu podpory technologie, zda je vhodné používat technologii, kterou je potřeba použít. Například můžeme zjistit jakou podporu má obrázek formátu .webp. Dle Can I Use obrázek formátu .webp má podporu napříč všemi moderními webovými prohlížeči, jen u Safari je částečná podpora.

MDN Web Docs

Webová stránka MDN Web Docs obsahuje dokumentaci k webových standardům a technologiím. Webové stránky jsou provozované Mozilla Foundation. Vhodný dodatečný materiál ke studiu.

Nedoporučuji, dokonce zakazuji, používat W3school. Webová stránka W3school není vhodný studijní materiál a obsahuje zastaralé či nevhodné informaci / příklady.

MDN Web Docs Input tag ukázka

Pro snadné vyhledávání, doporučuji ve webovém vyhledávači přidat prefix MDN.

Úkoly v průběhu semestru

V průběhu semestru na každém cvičení vám budou zadané úkoly. Úkoly budou jak povinné, tak i dobrovolné úkoly.

Povinné úkoly je potřeba splnit do třech týdnů ode dne zadání. Tedy dnešní (15. 2. 2022) povinné úkoly je třeba splnit nejpozději do 1. 3. 2022 (včetně). Povinné úkoly je třeba splnit pro splnění zápočtu.

Některé povinné úkoly budeme plnit přímo na cvičení. Dobrovolné úkoly není potřeba plnit v rámci kurzu. Přesto budou zadány.

Pokud úkol není zadán na platformě GitHub. Je potřeba úkol odevzdat na cvičení.

GitHub

GitHub Logo

V rámci tohoto kurzu budeme používat GitHub, který vnitřně používá Git pro správu verzí zdrojového kódu.

Pro odevzdávání úkolu není potřeba znát Git. Vše co budeme potřebovat si ukážeme.

Veškerou potřebnou komunikaci s GitHub, přijet úkolu, klonování repozitáře a následné odevzdání úkolu budu demonstrovat na úkolu číslo 2 z tohoto cvičení.

Přijmutí úkolu

Abychom mohli přijmout úkol a započít práci na úkolu je potřeba mít vytvořený účet na GitHub. Vytvořit GitHub účet si můžete zde.

Úkol který vyžaduje odevzdání na GitHub má na konci svého zadání odkaz Přijmout úkol.

Seznam identifikátorů studenta

Ze seznamu identifikátorů studenta vybereme ten svůj (pokud nejste na seznamu, ozvěte se mi). Pokud neznáte svůj studentský identifikátor, můžete identifikátor nalézt v systému STAG.

Po výběru svého studentského identifikátoru můžeme přejít k samotnému kroku přijetí úkolu.

Přijmutí úkolu v GitHub Classroom

Úkol přijmeme kliknutím na Accept this assignment.

Automatické vytváření repozitáře

Po přijmutí úkolu, GitHub nám začne vytvářet repozitář. Tahle akce chvíli trvá, je tedy nutné abychom chvíli vyčkali.

Jak nám samotná stránka napovídá, musíme stránku aktualizovat abychom viděli stav vytváření repozitáře.

Automaticky vytvořený repozitář

Po té, co se automaticky vytvoří repozitář, můžeme vidět odkaz našeho repozitáře do kterého budeme kódovat úkol.

Po otevření adresy budeme přesměrování k čerstvě vytvořenému repozitáři.

Repozitář

Abychom mohli provést úpravy, je třeba provést klonování repozitáře do počítače.

Klonování repozitáře a následné odevzdání úkolu popíšu pro aplikace GitHub Desktop.

GitHub Desktop

Abyste mohli postupovat v textu o GitHub Desktop, je zapotřebí mít nainstalovanou aplikaci GitHub Desktop.

Klonování repozitáře

Klonování repozitáře z webu GitHub pomocí GitHub Desktop

V otevřeném repozitáři klineme na Code a zvolíme možnost Open with GitHub Desktop.

Zvolení místa

V GitHub Desktop si zvolíme místo, kam se repozitář naklonuje (je vhodné repozitáře úkolů tohoto cvičení klonovat na jedno stejné místo).

Po úspěšném klonování, můžeme provádět hlavní úkony s repozitářem.

V tento moment můžeme úkol vypracovat.

Odevzdávání úkolu

Nyní máme zadání hotové a chceme odevzdat úkol. V aplikaci GitHub Desktop otevřeme příslušný repozitář s vypracovaným úkolem.

V levé části aplikace vidíme provedené změny (vytvoření, modifikaci a smazání souborů). Jelikož veškeré dosud provedené změny jsou pouze na našem počítači, je potřeba dát vědět GitHub o provedených změnách. 

Tyto změny můžeme popsat commitem. Před vytvořením commitu je potřeba provést kontrolu, zda máme vybrané veškeré soubory, které chceme zahrnout v commitu. Pro vytvoření commitu vyplníme název commitu a případně popis commitu a zvolíme Commit to main.

Commit máme vytvořený. Ale změny stále nejsou provedeny na straně GitHub. Vytvořený commit je pouze lokální. Je nutné zaslat veškeré commity na GitHub.

Abychom mohli poslat všechny commity musíme provést akci push. Tlačítko v pravém horním rohu Push origin za nás provede akci push a odešle veškeré lokální commity na GitHub.

Nyní vidíme změny v našem repozitáři.

Zpětná vazba

Feedback

Při vytváření repozitáře nám GitHub automaticky vytvořil pull request na zpětnou vazbu. Tenhle pull request, zkráceně PR, můžeme nalézt v repozitáři úkolu, v horní části záložek - Pull requests. PR má název Feedback.

V PR Feedback vám zhodnotím vypracované zadání.

Pokud odevzdané řešení bude bez problému, do zpětné vazby vám napíšu, že úkol máte uznaný. Po uznání PR uzavřu.

Pokud řešení bude obsahovat drobné nedostatky, napíšu vám výčet nedostatků ze kterých byste se měli do budoucna poučit, úkol vám uznám a PR uzavřu.

Pokud řešení nebude dostačovat uznání, napíšu vám výčet nedostatků které je potřeba opravit.

Pokud musíme provést úpravu našeho řešení, v IDE provedeme změny, v GitHub Desktop vytvoříme commit a provedeme push.

Tento koloběh se bude opakovat tak dlouho, než úkol bude uznán.

Zápočet

Pro splnění zápočtu je třeba mít uznané všechny povinné úkoly a uznaný zápočtový projekt.

Zápočtový projekt bude zadán přibližně v polovině semestru.

Užitečné odkazy

Úkoly

Úkol 1

Ve webovém prohlížeči Google Chrome vypněte cache.

Úkol 2

Vytvořte soubor index.html a zprovozněte vývojové prostředí společně pomocí Live Server. Pro testování použijte následující triviální HTML kód.

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>Lorem ipsum</title>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </body>
</html>

HTML značku body rozšiřte pro otestování automatické změny obsahu pomocí Lorem Ipsum.

Repozitář by měl obsahovat soubor index.html s testovacím, výše uvedeným, rozšířeným kódem.

Přijmout úkol.

Úkol 3

Zjistěte (nalezněte relevantní zdroj informací) k čemu slouží element p.

Úkol 4

Zjistěte jakou má element p podporu v prohlížečích.

Úkol 5 - Dobrovolný

Podívejte se na webovou stránku Fakultní nemocnice Olomouc. Zaměřte se na její design a identifikujte opakující se prvky.