Jakub Goldmann a Martin Kopta

Byznys

Design

Marketing

Umění

Zmatení v jednotkách na webu. Řekni si o web #37

Řekni si o web – Podcast pro majitele a designéry webů

Jakub Goldmann a Martin Kopta. Specialisté na webdesign a digitální strategie. Tipy a triky pro designéry, manažery i podnikatele, kteří spravují své vlastní weby. Sledujte nové techniky a trendy ve světě webu → 📒 75 tipů, jak si říct o web <a href="https://www.reknisioweb.cz?utm_medium=podcast">www.reknisioweb.cz</a>

(00:00) Řekni si o web #37(00:18) Telegraficky(00:47) Linkodrom(03:40) Život s technologiemi(07:16) Na čem právě pracujeme(07:23) Kapitola z naší knížky(07:54) Ötzi a rozloučení---TelegrafickyDIA převezme do péče registr obyvatel a registr osob. * Seznam.cz prodává předplatné. * Věra Pohlová by před 25 lety zakázala internety a počítače. * Amazon nařídil návrat do kanceláře. * Rival Twitteru Bluesky má 10 milionů uživatelů. * Google nebude platit pokutu EU za AdSense. * Meta blokuje ruská státní média. * Konference eXperience for Business otevřela call for papers.Každý den vám připravujeme jednohubky na našem webu (RSS feed).---LinkodromAI už umí generovat web. Tomáš Kapler se ptá, jestli už jste někdy zkusili vytvořit web s AI. Je to no-code, ale s textovým zadáním. Tomáš zkouší službu Dora, která nabízí generování webu s AI poměrně nově, ale už dříve umožňovala importovat návrh z Figmy nebo remixovat šablony. Tomáš s promptem vytvořil web o fiktivním měřáku ovzduší. Dora kromě webu zařídila i obsah a obrázky.Kromě Dory Tomáš vyzkoušel postavit web s Claude AI. I v tomhle případě je výsledkem web o čidlech měření kvality ovzduší, i když výrazně méně výpravný. Spojení s Claude vypadá slibně hlavně při představě, že by výsledný web nespočíval jen ve statických stránkách, ale že by také zapojil AI do aplikační logiky.My jsme nedávno ukazovali službu Relume, která sama přímo nestaví weby, ale připravuje mapu webu, content priority guide a wireframe, který pak umí exportovat do Figmy nebo WebFlow.Umělá inteligence může programátorům a designérům pomáhat, nebo je úplně nahradit. Koho ale nenahradí, je člověk s nápadem, se zadáním. Všímá si toho Martin Michálek ve své úvaze a dospívá k tomu, že produkťáci s AI dostávají do rukou mocný nástroj.---Design tokeny usnadňují udržování konzistentnosti návrhu. Jakub se nedávno na Linkedin dělil o postřehy k design tokenům. Doporučoval plugin pro Figmu Tokens Studio, který umí rovnou design tokeny commitovat na GitHub, kde s nimi rovnou mohou pracovat vývojáři. Pokud byste ocenili trochu více informací o tokenech, k čemu je použít a jak s nimi pracovat, přijde vám vhod playbook na webu The Design System Guide.---Jak vytvořit čitelný text v čínské typografii? Čínská typografie je specifická díky logografickému systému písma, který klade důraz na jednotlivé znaky tvořící slova a věty. Francouzská UX designérka Juliette Xing připomíná, že klíčovou součástí čínské typografické školy je vyvážení čitelnosti a estetiky.Juliette doporučuje zarovnání textu vlevo, automatický rozestup mezi znaky a výšku řádku okolo 150—160 %. Pro základní text je potřeba zvolit alespoň o polovinu větší písmo než u latinkového textu – 24 px a pro nadpisy na mobilu přibližně 44 px. Mezi běžně rozšířené čínské fonty patří 宋体 (Songti) pro serif a 黑体 (Heiti) pro sans-serif. Pro zdůraznění používejte tučné písmo, velikost a barvy, ale vyhněte se kurzívě a podtrhávání, protože snižují čitelnost čínských znaků.---Je to na středu? Už jsme tu spolu hráli spoustu her, které nás cvičily v barvách, písmu nebo kompozici, ale ještě jsme nezkoušeli postřeh na vycentrování prvků. Přesně k tomu je dnešní hra. Vyzkoušejte si své schopnosti a posuďte, zda jsou tečky skutečně uprostřed obrazců. Je pro vás připraveno deset tvarů, ze kterých si můžete vybrat, ale abyste vyhráli, musíte mít všech deset správně. Dokážete to?---Baví vás tenhle příspěvek? Řekněte o něm ostatním!---Život s technologiemiZmatení v jednotkách na webu. Pokud jde o míry a váhy, užijeme si hodně legrace při srovnávání metrických a imperiálních jednotek. U něčeho tak technického, jako je web, bychom ale čekali, že odborníci přijdou s něčím smysluplným. To by ale bylo příliš snadné.Dnes se pojďme podívat na obrazový bod – pixel. Obrazovky jsou složené z obrazových bodů. Jejich počet se udává jako rozlišení. Třeba FullHD je 1920×1080 obrazových bodů. Na 15" displeji s FullHD je pak pixel velký asi 0,173 mm, na promítacím plátně o šířce 240 cm je stejný pixel ale velký už 1,25 mm. S tím se asi dá žít.Kromě FullHD máme i jiná rozlišení. U retinových displejů dokonce hodně jiná. Takový iPhone 16 Pro je sice hodně malý – má úhlopříčku 6,3 palce – ale jeho rozlišení je 2622×1206 bodů a jeho pixel velký asi 0,055 mm. Pokud bychom tedy chtěli na telefonu i v notebooku stejně velký obrázek, měli bychom do telefonu poslat více než třikrát větší. Potřebujeme znát obrazovou hustotu zařízení a podle toho posílat buď kvalitnější, nebo méně kvalitní obrázky.Nemůžeme ale pořád přepočítávat obrazovou hustotu kvůli každému rozměru. Proto chytré hlavy vymyslely virtuální pixely, které se s velikostí a obrazovou hustotou zařízení nemění. Smůla je, že jako jejich značku zvolili px, takže se to často plete s těmi fyzickými pixely. Jeden pixel v kaskádových stylech je ¹⁄₉₆ palce (≈0,265 mm). Pokud se ptáte, který notebook má rozlišení 96 ppi (pixel/palec), tak už čtvrt století asi žádný. A proč to není setina nebo proč se to nepočítá z metrických jednotek, to se snad radši ani neptejte.Podobný problém, ale s jiným výsledkem řešili vývojáři mobilních aplikací. Na Androidu zavedli jednotku density-independent pixel: 1 dp = ¹∕₁₆₀ palce. Jejich pixel je tedy ≈0,159 mm velký. A ano, ani na mobilech už se skoro patnáct let s obrazovou hustotou 160 ppi nesetkáváme.Vývojáři Apple používají jednotku bod – point. Odmítají říct, jak velký jejich bod je. Jen říkají, že někdy jeden point odpovídá jednomu, jindy dvěma nebo třem pixelům – určuje se to pro každé zařízení a cvičně si můžeme představit, že dva pixely jsou to u zařízení s ≈320 ppi a tři u ≈480 ppi. Zmiňovaný iPhone 16 Pro má obrazovou hustotu 460 ppi takže na něm jeden point odpovídá třem fyzickým pixelům, to je 0,165 mm.Opatrně ale u písma! Až někomu řeknete, že chcete text napsat šestnáctkou, vždycky řekněte, jakou má použít jednotku. Aby zmatení bylo dokonalé, typografický bod má stejnou značku jako point v iOS, ale jeho velikost je ¹∕₇₂ palce, tedy ≈0,353 mm. A pozor: v typografii se velikost bodu ustálila až před třiceti lety.Shrneme si to:Pixel na webu: 1 px = 1/96 palce ≈ 0,265 mmDensity-independent pixel na Androidu: 1 dp = 1/160 palce ≈ 0,159 mmPoint na iOS: 1 pt ≈ 1/160 nebo 2/320 nebo 3/480 palce ≈ 0,159 mmTypografický bod: 1 pt = 1/72 palce ≈ 0,353 mm---Na čem právě pracujemePracujeme na nabídce školení. Možná už v příštím newsletteru vám představíme první z nich.---Tip z naší knihyCo měříte, to se má tendenci samo zlepšovatZvolte si pravidelný časový interval, během kterého budete hodnotit výkonnost svého webu.Různé metriky mohou vyžadovat odlišné intervaly pro jejich hodnocení. Zvažte, které ukazatele zvládnete měřit a analyzovat sami, a kdy je vhodné obrátit se na odborníka. Dohodněte si pravidelné reportování. Uvažte také, zda je pro danou metriku vhodnější živý přehled v nástroji jako je Google Data Studio, Power BI nebo jiné BI řešení, nebo jestli postačí pravidelný report.---A to je ze třetího zářijového zpravodaje Řekni si o web roku 2024 všechno. V roce 1991 tento den Ötzi po pěti tisících letech potkal živáčka. Díky všem za feedback. Pokud pro nás máte nějaký tip, co příště vylepšit nebo udělat jinak, těšíme se.Hezký týden,Jakub Goldmann a Martin Kopta.---Líbí se vám newsletter Řekni si o web? Přihlaste se k pravidelnému odběru do e-mailu nebo přes Substack. This is a public episode. If you would like to discuss this with other subscribers or get access to bonus episodes, visit www.reknisioweb.cz

(00:00) Řekni si o web #37(00:18) Telegraficky(00:47) Linkodrom(03:40) Život s technologiemi(07:16) Na čem právě pracujeme(07:23) Kapitola z naší knížky(07:54) Ötzi a rozloučení---Telegraficky<a target="_blank" href="https://x.com/agentura_dia/status/1835954649205026837">DIA převezme do péče registr obyvatel a registr osob.</a> * <a target="_blank" href="https://www.reknisioweb.cz/p/predplatne-seznamcz-bez-reklam">Seznam.cz prodává předplatné.</a> * Věra Pohlová by před 25 lety <a target="_blank" href="https://www.reknisioweb.cz/p/vera-pohlova-25-let">zakázala internety a počítače</a>. * <a target="_blank" href="https://www.reknisioweb.cz/p/amazon-rusi-praci-z-domova">Amazon nařídil návrat do kanceláře.</a> * Rival Twitteru Bluesky má <a target="_blank" href="https://www.reknisioweb.cz/p/modre-nebe-je-desetimilionove">10 milionů uživatelů</a>. * <a target="_blank" href="https://www.lupa.cz/aktuality/soud-zrusil-miliardovou-pokutu-googlu-za-adsense/">Google nebude platit pokutu</a> EU za AdSense. * <a target="_blank" href="https://www.lupa.cz/aktuality/meta-zablokovala-ruska-media-na-vsech-svych-platformach/">Meta blokuje ruská státní média.</a> * <a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSfZtwxH4qWmNMifIlRUCzvuGMN2sM7VbdcwEUec6V7JA6ojDw/viewform">Konference eXperience for Business otevřela call for papers.</a>Každý den vám připravujeme <a target="_blank" href="https://www.reknisioweb.cz/s/jednohubky/archive?sort=new">jednohubky</a> na našem webu (<a target="_blank" href="https://www.reknisioweb.cz/feed?sectionId=130962">RSS feed</a>).---LinkodromAI už umí generovat web. <a target="_blank" href="https://x.com/tkapler/status/1836447290929680646">Tomáš Kapler se ptá</a>, jestli už jste někdy zkusili vytvořit web s AI. Je to no-code, ale s textovým zadáním. Tomáš <a target="_blank" href="https://www.dora.run/ai?utm_campaign=867112_867513&signature=ba7640f7f90d8d3e8515026e373cd1fc">zkouší službu Dora</a>, která nabízí generování webu s AI poměrně nově, ale už dříve umožňovala importovat návrh z Figmy nebo remixovat šablony. Tomáš s promptem vytvořil <a target="_blank" href="https://conspiro.dora.run/">web o fiktivním měřáku ovzduší</a>. Dora kromě webu zařídila i obsah a obrázky.Kromě Dory Tomáš vyzkoušel postavit web s <a target="_blank" href="https://claude.ai">Claude AI</a>. I v tomhle případě je výsledkem <a target="_blank" href="https://claude.site/artifacts/90852101-fde8-42f1-a4f9-202a586f61de">web o čidlech měření kvality ovzduší</a>, i když výrazně méně výpravný. Spojení s Claude vypadá slibně hlavně při představě, že by výsledný web nespočíval jen ve statických stránkách, ale že by také zapojil AI do aplikační logiky.My jsme nedávno <a target="_blank" href="https://www.reknisioweb.cz/p/relume-ai-wireframe?utm_source=publication-search">ukazovali službu Relume</a>, která sama přímo nestaví weby, ale připravuje mapu webu, content priority guide a wireframe, který pak umí exportovat do Figmy nebo WebFlow.Umělá inteligence může programátorům a designérům pomáhat, nebo je úplně nahradit. Koho ale nenahradí, je člověk s nápadem, se zadáním. Všímá si toho Martin Michálek ve své úvaze a dospívá k tomu, že <a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7241810067568619521/">produkťáci s AI dostávají do rukou mocný nástroj</a>.---Design tokeny usnadňují udržování konzistentnosti návrhu. Jakub se nedávno na Linkedin dělil o <a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7239923997092577280/">postřehy k design tokenům</a>. Doporučoval plugin pro Figmu <a target="_blank" href="https://tokens.studio/">Tokens Studio</a>, který umí rovnou design tokeny commitovat na GitHub, kde s nimi rovnou mohou pracovat vývojáři. Pokud byste ocenili trochu více informací o tokenech, k čemu je použít a jak s nimi pracovat, přijde vám vhod <a target="_blank" href="https://thedesignsystem.guide/what-are-design-tokens">playbook na webu The Design System Guide</a>.---Jak vytvořit čitelný text v čínské typografii? Čínská typografie je specifická díky logografickému systému písma, který klade důraz na jednotlivé znaky tvořící slova a věty. Francouzská UX designérka <a target="_blank" href="https://www.linkedin.com/in/juliette-xing/overlay/about-this-profile/">Juliette Xing</a> připomíná, že klíčovou součástí čínské typografické školy je vyvážení čitelnosti a estetiky.<a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7241672238255476736/">Juliette doporučuje</a> zarovnání textu vlevo, automatický rozestup mezi znaky a výšku řádku okolo 150—160 %. Pro základní text je potřeba zvolit alespoň o polovinu větší písmo než u latinkového textu – 24 px a pro nadpisy na mobilu přibližně 44 px. Mezi běžně rozšířené čínské fonty patří 宋体 (Songti) pro serif a 黑体 (Heiti) pro sans-serif. Pro zdůraznění používejte tučné písmo, velikost a barvy, ale vyhněte se kurzívě a podtrhávání, protože snižují čitelnost čínských znaků.---Je to na středu? Už jsme tu spolu hráli spoustu her, které nás cvičily v barvách, písmu nebo kompozici, ale ještě jsme nezkoušeli postřeh na vycentrování prvků. Přesně k tomu je dnešní hra. Vyzkoušejte si své schopnosti a posuďte, zda jsou tečky skutečně uprostřed obrazců. Je pro vás připraveno deset tvarů, ze kterých si můžete vybrat, ale abyste vyhráli, musíte mít všech deset správně. <a target="_blank" href="https://avark.agency/designers-eye/">Dokážete to?</a>---Baví vás tenhle příspěvek? Řekněte o něm ostatním!---Život s technologiemiZmatení v jednotkách na webu. Pokud jde o míry a váhy, užijeme si hodně legrace při srovnávání metrických a imperiálních jednotek. U něčeho tak technického, jako je web, bychom ale čekali, že odborníci přijdou s něčím smysluplným. To by ale bylo příliš snadné.Dnes se pojďme podívat na obrazový bod – pixel. Obrazovky jsou složené z obrazových bodů. Jejich počet se udává jako rozlišení. Třeba FullHD je 1920×1080 obrazových bodů. Na 15" displeji s FullHD je pak pixel velký asi 0,173 mm, na promítacím plátně o šířce 240 cm je stejný pixel ale velký už 1,25 mm. S tím se asi dá žít.Kromě FullHD <a target="_blank" href="https://en.wikipedia.org/wiki/Display_resolution">máme i jiná rozlišení</a>. U retinových displejů dokonce hodně jiná. Takový iPhone 16 Pro je sice hodně malý – má úhlopříčku 6,3 palce – ale jeho rozlišení je 2622×1206 bodů a jeho pixel velký asi 0,055 mm. Pokud bychom tedy chtěli na telefonu i v notebooku stejně velký obrázek, měli bychom do telefonu poslat více než třikrát větší. Potřebujeme znát <a target="_blank" href="https://en.wikipedia.org/wiki/Pixel_density#Calculation_of_monitor_PPI">obrazovou hustotu</a> zařízení a podle toho posílat buď kvalitnější, nebo méně kvalitní obrázky.Nemůžeme ale pořád přepočítávat obrazovou hustotu kvůli každému rozměru. Proto chytré hlavy vymyslely virtuální pixely, které se s velikostí a obrazovou hustotou zařízení nemění. Smůla je, že jako jejich značku zvolili px, takže se to často plete s těmi fyzickými pixely. Jeden <a target="_blank" href="https://drafts.csswg.org/css-values/#absolute-lengths">pixel v kaskádových stylech</a> je ¹⁄₉₆ palce (≈0,265 mm). Pokud se ptáte, který notebook má rozlišení 96 ppi (pixel/palec), tak už čtvrt století asi žádný. A proč to není setina nebo proč se to nepočítá z metrických jednotek, to se snad radši ani neptejte.Podobný problém, ale s jiným výsledkem řešili vývojáři mobilních aplikací. Na Androidu zavedli jednotku <a target="_blank" href="https://developer.android.com/training/multiscreen/screendensities#TaskUseDP">density-independent pixel</a>: 1 dp = ¹∕₁₆₀ palce. Jejich pixel je tedy ≈0,159 mm velký. A ano, ani na mobilech už se skoro patnáct let s obrazovou hustotou 160 ppi nesetkáváme.Vývojáři Apple používají jednotku bod – point. Odmítají říct, jak velký jejich bod je. Jen říkají, že někdy jeden point odpovídá jednomu, jindy dvěma nebo třem pixelům – <a target="_blank" href="https://developer.apple.com/design/human-interface-guidelines/layout#Specifications">určuje se to pro každé zařízení</a> a cvičně si můžeme představit, že dva pixely jsou to u zařízení s ≈320 ppi a tři u ≈480 ppi. Zmiňovaný iPhone 16 Pro má obrazovou hustotu 460 ppi takže na něm jeden point odpovídá třem fyzickým pixelům, to je 0,165 mm.Opatrně ale u písma! Až někomu řeknete, že chcete text napsat šestnáctkou, vždycky řekněte, jakou má použít jednotku. Aby zmatení bylo dokonalé, <a target="_blank" href="https://en.wikipedia.org/wiki/Point_(typography)">typografický bod</a> má stejnou značku jako point v iOS, ale jeho velikost je ¹∕₇₂ palce, tedy ≈0,353 mm. A pozor: v typografii se velikost bodu ustálila až před třiceti lety.Shrneme si to:Pixel na webu: 1 px = 1/96 palce ≈ 0,265 mmDensity-independent pixel na Androidu: 1 dp = 1/160 palce ≈ 0,159 mmPoint na iOS: 1 pt ≈ 1/160 nebo 2/320 nebo 3/480 palce ≈ 0,159 mmTypografický bod: 1 pt = 1/72 palce ≈ 0,353 mm---Na čem právě pracujemePracujeme na nabídce školení. Možná už v příštím newsletteru vám představíme první z nich.---Tip z naší knihyCo měříte, to se má tendenci samo zlepšovatZvolte si pravidelný časový interval, během kterého budete hodnotit výkonnost svého webu.Různé metriky mohou vyžadovat odlišné intervaly pro jejich hodnocení. Zvažte, které ukazatele zvládnete měřit a analyzovat sami, a kdy je vhodné obrátit se na odborníka. Dohodněte si pravidelné reportování. Uvažte také, zda je pro danou metriku vhodnější živý přehled v nástroji jako je Google Data Studio, Power BI nebo jiné BI řešení, nebo jestli postačí pravidelný report.---A to je ze třetího zářijového zpravodaje <a target="_blank" href="https://reknisioweb.cz/">Řekni si o web</a> roku 2024 všechno. V roce 1991 tento den <a target="_blank" href="https://cs.wikipedia.org/wiki/%C3%96tzi">Ötzi po pěti tisících letech potkal živáčka</a>. Díky všem za feedback. Pokud pro nás máte nějaký tip, co příště vylepšit nebo udělat jinak, těšíme se.Hezký týden,Jakub Goldmann a Martin Kopta.---Líbí se vám newsletter Řekni si o web? Přihlaste se k pravidelnému odběru do e-mailu nebo přes Substack. This is a public episode. If you would like to discuss this with other subscribers or get access to bonus episodes, visit <a href="https://www.reknisioweb.cz?utm_medium=podcast&utm_campaign=CTA_1">www.reknisioweb.cz</a>

Aplikace Youradio Talk

Zmatení v jednotkách na webu. Řekni si o web #37

Poslechněte si podcast