Czechitas-podklady-WEB · EvaMach · Sep 10, 2023 · Sep 9, 2023 · Sep 9, 2023 · Sep 9, 2023
diff --git a/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2011-2021.png b/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2011-2021.png
diff --git a/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2012-2023.png b/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2012-2023.png
diff --git a/html-a-css/bem-a-responzivni-design/assets/grid-gif.gif b/html-a-css/bem-a-responzivni-design/assets/grid-gif.gif
diff --git a/html-a-css/bem-a-responzivni-design/assets/meta-viewport.png b/html-a-css/bem-a-responzivni-design/assets/meta-viewport.png
diff --git a/html-a-css/bem-a-responzivni-design/assets/screen-sizes.png b/html-a-css/bem-a-responzivni-design/assets/screen-sizes.png
diff --git a/html-a-css/bem-a-responzivni-design/cvlekce/responsive-layout/exercise.md b/html-a-css/bem-a-responzivni-design/cvlekce/responsive-layout/exercise.md
@@ -6,11 +6,11 @@ demand: 1
 Použijte šablonu [cviceni-flexibilni-layout](https://github.com/Czechitas-podklady-WEB/cviceni-flexibilni-layout).
 Naklonujte si repozitář a spusťte si `npx serve`.
 
-Na stránce je připravený obsah stránky. V souboru `style.css` je nastylovaný typ písma (font).
+V HTML souboru je připravený obsah stránky. V souboru `style.css` je nastylovaný typ písma (font) a další základní styly. Vlastní styly doplňte dolů pod komentář.
 
-Nastylujte `header` tak, aby nadpis a podnadpis byly vedle sebe na opačných koncích stránky. Text podnadpisu zarovnejte doprava, tak aby na menších obrazovkách byl stále vpravo i na dvou řádcích.
+Nastylujte `header` tak, aby nadpis a podnadpis byly vedle sebe na opačných koncích stránky.
 
-Galerii nastylujte tak, aby obrázky byly ve svou sloupcích vedle sebe, které se flexibilně roztahují podle šířky stránky. Zkuste potom nastylovat i tři a čtyři sloupce.
+Galerii nastylujte tak, aby obrázky byly ve svou sloupcích vedle sebe, které se flexibilně roztahují podle šířky stránky. Potom si zkuste nastylovat 3 a 4 sloupce. Ty už se vám sice nevejdou na menší velikost obrazovky, ale příští hodinu si ukážeme, jak je zobrazovat jen na širších obrazovkách. Pokud už znáte media queries, můžete si rovnou vyzkoušet.
 
 Každou variantu si zkontrolujte v devtools a udělejte si printscreen celé stránky.
 
@@ -20,7 +20,7 @@ Podívejte se na výsledek:
 :::solution
 
 Varianty pro tři a čtyři sloupce jsou níže uvedeny v blocích `@media(…)` – co znamenají se dozvíte v příští lekci.
-Ve vašem řešení budete mít obsah příslušného bloku přímo u selektoru třídy `.foto`.
+Bez použití media queries by byl rozměr přímo u selektoru třídy `.foto`, jako je tomu v případě 2 sloupců.
 Když použijete níže uvedené řešení s `@media(…)`, bude se počet sloupců měnit v závislosti na šířce okna prohlížeče.
 
 Protože je v galerii _náhodou_ 12 obrázků, nemusíme extra řešit poslední řádek.

diff --git a/html-a-css/bem-a-responzivni-design/how-to-responsive.md b/html-a-css/bem-a-responzivni-design/how-to-responsive.md
@@ -2,7 +2,7 @@
 
 ### Meta značka viewport
 
-Meta značka `viewport` v hlavičce HTML zajišťuje, že obsah našeho webu se bude přizpůsobovat šířce zařízení a že standardní zobrazení je 1:1, tj. prohlížeč nebude stránku sám zvětšovat nebo zmenšovat (_zoomovat_).
+Prvním krokem pro tvorbu responzivního webu je přidat `meta` značku `viewport` v hlavičce HTML se správným nastavením atributu `content`. To zajistí, že se obsah stránky bude přizpůsobovat šířce zařízení a že nebude prohlížečem nijak _přizoomovaný_ nebo _odzoomovaný_. Bez použití této značky použije prohlížeč defaultní rozměr 980px a stránku dostatečně oddálí, aby se vmáčkla na menší zařízení. (HTML šablona generovaná přes emmet má toto nastavení automaticky a není třeba ho přidávat).
 
 ```html
 <html>
@@ -17,20 +17,43 @@ Meta značka `viewport` v hlavičce HTML zajišťuje, že obsah našeho webu se
 </html>
 ```
 
+::fig[Meta viewport]{src=assets/meta-viewport.png}
+
 ## Techniky responzivního webdesignu
 
 Máme tři hlavní techniky responzivního webdesignu:
 
-- flexibilní grid
+- flexibilní layout
 - flexibilní obrázky
 - media queries
 
-V této lekci si projdeme flexibilní grid.
+V této lekci si projdeme flexibilní layout.
+
+### Flexibilní layout
+
+Pro tvorbu flexibilního layoutu pomáhá designérům rozvržení stránky do gridu, neboli mřížky. Jde o systém sloupců a řádků, kde elementy zabírají vždy nějaký poměr stránky nehledě na velikost zařízení. Při změně velikosti zařízení si prvky na stránce drží svůj poměr, nebo se zalomí pod sebe, pokud už je prostor nedostačující. Oproti neresponzivním webům tak třeba několikasloupcový grid nepřeteče mimo viewport menšího zařízení, ale zmenší se jeho počet sloupců.
+
+::fig[grid-responzivni]{src=assets/grid-gif.gif}
+
+#### Relativní jednotky
+
+Pružného layoutu, který se přizpůsobí jakékoli velikosti stránek, dosáhneme pomocí relativních jednotek jako jsou procenta, `vw` a `vh`. Díky nim budou elementy na stránce zabírat stejný poměr prostoru nehledě na velikost zařízení. Mřížku např. tří sloupců, které budou na všech zařízeních zabírat 1/3 stránky, tak jednoduše vytvoříme pomocí procent a funkce `calc()`.
 
-### Flexibilní grid
+```
+width: calc(100% / 3);
+```
+
+#### Flexbox
 
-Grid, neboli mřížka, byla původně používaná pro tištěný design. Mřížku tvořil systém sloupců a řádků, na které se umisťuje obsah – představte si třeba staré papírové noviny. Je to ale i velice užitečný návod pro návrh webových designů. [Příklad komponent navrhovaných do grid systému.](https://dribbble.com/shots/15341964-Grid-System-UI-Components)
+Další nástroj pro tvorbu responzivního layoutu už znáte - je to flexbox. S ním snadno zařídíte např. responzivní galerii obrázků, které se budou zalamovat pod sebe při zmenšení obrazovky. Zásadní je tady vlastnost `flex-wrap`, pomocí které nastavíme automatické zalamování.
+
+```
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+```
 
-Protože nevíme, na jak velké obrazovce se bude náš web zobrazovat, je potřeba zajistit, aby se přizpůsobil všem. V našem kódu toho docílíme pomocí relativních jednotek (např. procenta).
+#### CSS Grid
 
-::codepen{user=marketaanezka id=RwxpYzY tab=html,result}
+Poslední nástroj, který musíme zmínit, ale který není součástí našeho kurzu je CSS Grid. V rámci samostudia si můžete pročíst, [jak se s ním nastavují řádky a sloupce layoutu](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).
diff --git a/html-a-css/bem-a-responzivni-design/mobile-first.md b/html-a-css/bem-a-responzivni-design/mobile-first.md
@@ -1,14 +1,14 @@
 ## Mobile first
 
-Správný přístup jak navrhovat a kódovat webové stránky je nejprve na mobilní zařízení, a teprve potom přidávat styly pro větší zařízení. Proč bychom měli postupovat tímto způsobem?
+Správný přístup, jak navrhovat a kódovat responzivní webové stránky je začít od mobilních zařízení, a teprve potom přidávat styly pro větší zařízení. Proč bychom měli postupovat tímto způsobem?
 
 ### Nějaká ta čísla
 
-::fig[Mobile traffic 2011-2021]{src=assets/Mobile-Traffic-2011-2021.png}
-[Zdroj obrázku](https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics)
-<br/>
+::fig[Mobile traffic 2012-2023]{src=assets/Mobile-Traffic-2012-2023.png}
+
+[Zdroj obrázku](https://www.oberlo.com/statistics/mobile-internet-traffic)
 
-- až 70 % návštěv webů pochází z mobilních zařízení
+- 60 % návštěv webů pochází z mobilních zařízení
 - 61 % uživatelů se na stránku už nevrátí, pokud neměli dobrou zkušenost na telefonu
 - 96 % vyhledávání na Google pochází z mobilních zařízení
 - 83 % mobilních uživatelů předpokládá bezvadný přístup na stránky i pokud je navštíví z mobilního zařízení
@@ -17,25 +17,27 @@ Správný přístup jak navrhovat a kódovat webové stránky je nejprve na mobi
 
 ### Proč kódovat _mobile first_
 
-Prostor na telefonu je omezený, proto je náročný na design. Vždycky je snazší věci přidávat, než je ubírat. Proto musíme prioritizovat to nejdůležitější. Na telefonu se uživatelé potřebují co nejrychleji dostat k užitečným informacím.
+Prostor na telefonu je omezený a náročný na design. Je lepší tedy začít tím těžším, vymezit si ty nejdůležitější informace a akce. Poté už bude snadnější přidávat další věci pro větší zařízení. Jde o dobrou praxi, protože se zaměřujeme primárně na obsah a dobrou použitelnost. Animace a sekundární obsah řešíme až v druhém kroku.
 
 ::fig[Display comparison czechitas mapy cz]{src=assets/mobile-first-czechitas.png}
-<br/>
+
 ::fig[Display comparison skyscanner]{src=assets/responsive-skyscanner.png}
-<br/>
 
-Zároveň na telefonu se uživatelé chovají jinak, nemají myš a klávesnici, ale většinou jen jeden palec. Proto při designu pro malé obrazovky mějme na paměti pár pravidel:
+### Jak postupovat při designu pro mobilní zařízení?
 
-- _content first_: obsah je klíčový, nezahlcujte uživatele množstvím informací
+- _content first_: obsah je klíčový, nezahlcujte uživatele množstvím informací a vyberte jen to nejdůležitější
 - jasná vizuální hierarchie, přehledná navigace
-- _call-to-action_ tlačítka jsou dobře viditelná, mají velkou klikatelnou plochu
+- _call-to-action_ tlačítka jsou dobře viditelná, mají velkou klikatelnou plochu a nespoléhají na _hover_
 - pouze jeden sloupec pro obsah, vyhýbejte se horizontálnímu scrollování
+- dosažitelnost elementu při držení telefonu v jedné ruce
 
 ::fig[Mobile reach]{src=assets/mobile-reach.png}
 <br/>
 
+Kromě devtools si můžete otestovat, zda je web mobile-friendly pomocí [Google nástroje](https://search.google.com/test/mobile-friendly).
+
 ### Jak rozšířit design na další zařízení
 
-V dnešní době je důležité nepřemýšlet nad responzivním designem tak, že navrhuji stránku pro mobil - tablet - desktop, ale tak, že design musí fungovat na všech šířkách od `360px` do `3840px` (a více). Design by měl být _flexibilní_ a _fluidní_.
+Jak už jsme zmiňovali v úvodu, v dnešní době nemůžeme přemýšlet nad responzivním designem tak, že navrhuji stránku pro mobil - tablet - desktop, ale tak, že design musí fungovat na všech šířkách od `360px` do `3840px` (a více). Design by měl být _flexibilní_ a _fluidní_.
 
 Dobrou stránkou pro inspiraci responzivními weby je třeba [mediaqueri.es](https://mediaqueri.es/).
diff --git a/html-a-css/bem-a-responzivni-design/responsivity-history.md b/html-a-css/bem-a-responzivni-design/responsivity-history.md
@@ -1,31 +1,34 @@
 ## Responzivní design
 
-Responzivní design je design webových stránek, který se přizpůsobuje velikosti zařízení. Tedy design, který se přizpůsobí jak telefonu, tak ultraširokému monitoru (a všemu mezi tím). Vytvářet responzivní weby je důležité, protože stránka je potom přehledná, příjemná na používání. Předejdeme tak tomu, že uživatele otrávíme a už se na stránku nebude chtít vrátit.
+Responzivní design je design webových stránek, který se přizpůsobuje velikosti zařízení. Tedy design, který se přizpůsobí jak telefonu, tak ultraširokému monitoru (a všemu mezi tím). Vytvářet responzivní weby je důležité, protože dnešní uživatel předpokládá příjemné uživatelské prostředí na jakémkoliv zařízení. Pokud zjistí, že stránka dobře nefunguje např. na telefonu nebo tabletu, může se stát, že se na ni už nikdy nevrátí.
 
-Je potřeba myslet nejen na mobily, ale i na tablety, laptopy, desktopy, ultraširoké monitory, televize. Na stránce [statcounter](https://gs.statcounter.com/screen-resolution-stats#monthly-202002-202102-bar) je možné vidět, jaká velikost zařízení je nejčastější.
+Typicky se dělí velikosti obrazovek na tři skupiny: mobil, tablet a desktop. Tato tři rozmezí pixelů slouží jako dobrý základ k testování a vývoji.
+
+::fig[3 základní breakpointy]{src=assets/screen-sizes.png}
+
+Pokud má být stránka plně responzivní, měla by být použitelná a uživatelsky přívětivá ve všech rozlišeních uvnitř těchto rozmezí. Pro představu, kolik rozlišení může být a která jsou nejčastější slouží statistika na stránce [statcounter](https://gs.statcounter.com/screen-resolution-stats#monthly-202301-202309-bar).
+
+#### Hardwarové pixely versus CSS pixely
+
+Je dobré mít na paměti, že když hovoříme o rozlišení a pixelech, nemluvíme o těch hardwarových, ale o referenční jednotce CSS pixelů. U zařízení s displeji s vysokým rozlišením (např. retina displej u Apple zařízení) může být jejich hardwarové rozlišení třeba 2x nebo i 4x větší. Nás vývojáře ale zajímá velikost v CSS pixelech, která odpovídá velikosti viewportu na daném zařízení. Nicméně je dobré mít na paměti, že tyto hodnoty nejsou 1:1, až budeme řešit tvorbu responzivních obrázků.
 
 ### Cíl responzivního webdesignu
 
 Cílem responzivního webdesignu je **zajistit optimální uživatelskou zkušenost na jakémkoliv zařízení**. To znamená:
 
 #### Stránka je dobře použitelná
 
-- na všechno jde pohodlně „kliknout“
+- na všechno jde pohodlně „kliknout“, např. tlačítka jsou dostatečně velké na palec
 - nikde není obsah přes sebe nebo není něco schované „za rohem“
-- na mobilu např. nevyžaduji stisknutí klávesy na klávesnici, apod.
-- nespoléhám na stav `hover` např. pro otevírání menu - na mobilu neexistuje
+- na mobilu např. nevyžadujeme stisknutí klávesy na klávesnici
+- nespoléháme na stav `hover` - na mobilu neexistuje
 
 #### Přizpůsobený obsah
 
 - upřednostňujeme obsah, který může být užitečný pro mobilní uživatele - např. kontaktní údaje, otevírací doba, moje letenka/jízdenka
-- části textu můžeme „zabalit“ - např. sekci časté otázky/odpovědi
+- části textu můžeme „zabalit“ - např. menu schováme pod ikonku hamburgeru
 - na mobilu nemusíme vidět všechno - ubereme animace, „kudrlinky“ (výkon mobilních zařízení je nižší a také nechceme uživateli _vyždímat_ baterii)
-
-#### Přizpůsobená navigace
-
-- zjednodušená navigace
-- ideálně jsou viditelné hlavní odkazy, zbytek schovaný a dostupný po rozkliknutí
-- často se používá „hamburger“ menu - ideálně ikonka plus popis
+- mobilním uživatelům nechceme ani _vyždímat_ data, a tak volíme menší obrázky
 
 ::fig[cesko digital responzivni]{src=assets/cesko-digital-responzivni.png}
 

diff --git a/html-a-css/responzivni-design/responsive-theory.md b/html-a-css/responzivni-design/responsive-theory.md
@@ -1,33 +1,31 @@
 ## Techniky responzivního webdesignu
 
-Máme tři hlavní techniky responzivního webdesignu, v minulé lekci jsme prošli flexibilní grid, dnes se zaměříme na další dvě:
+Máme tři hlavní techniky responzivního webdesignu, v minulé lekci jsme prošli flexibilní layout, dnes se zaměříme na další dvě:
 
 - flexibilní obrázky
 - media queries
 
 ### Flexibilní obrázky
 
-Obrázky na stránce často dostáváme v různých velikostech. Je potřeba, aby uživatel i na malém displeji viděl celý obrázek a ne jen roh nebo výřez.
+Obrázky na stránce často dostáváme v různých velikostech. Je potřeba, aby uživatel i na malém displeji viděl celý obrázek a ne jen roh nebo výřez, nebo aby obrázek nezabral celou stránku a nevytvářel nám zbytečné scrollbary.
 
-Fluidní obrázky jsou takové, které se přizpůsobují kontejneru, ve kterém jsou umístěny. Dosáhneme toho nastavením stylu obrázku na
+Fluidní obrázky jsou takové, které se přizpůsobují kontejneru, ve kterém jsou umístěny. Pokud chceme, aby obrázek zabíral celou šířku svého kontejneru, nastavíme:
 
 ```css
 img {
   width: 100%;
 }
 ```
 
-Pokud chceme, aby obrázek měl ideálně šířku 500px, a pokud se nevejde, tak se přizpůsobil obsahu, můžeme použít tento zápis.
+Toto ale znamená, že se při zvětšení kontejneru obrázek může roztáhnout nad svojí původní šířku, a mít tak horší kvalitu. Pokud chceme, aby se obrázek přizpůsobil obsahu, ale nepřekročil svoji původní velikost, použijeme `max-width`. Zároveň můžeme využít `width` pro specifikování jeho ideální šířky.
 
 ```css
 img {
-  width: 500px;
   max-width: 100%;
+  width: 500px;
 }
 ```
 
-::codepen{user=marketaanezka id=jOYBePP tab=html,result}
-<br/>
 Další možností jak přizpůsobit obrázek velikosti kontejneru je použití [background image](https://www.freecodecamp.org/news/css-background-image-with-html-example-code/).
 
 Pro případ, že potřebujeme ovlivnit i rychlost načítání, je možnost na menším displeji zobrazovat menší obrázek a na větším zase obrázek v lepší kvalitě. K tomu se používá [srcset](https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/).