Jak vznikl tento web

Zadání

Web má dva cíle. Získat sponzory — proto je nejdůležitější stránka Spolupráce. A sloužit jako moje SEO portfolio, na kterém se učím, jak web dostat do vyhledávačů.

Od začátku jsem měl pár pravidel, která AI nesměla porušit:

• Fotky se neořezávají. Každá je celá, v původním poměru stran, a u každé je jméno fotografky.
• Žádná vymyšlená čísla. Výsledky jsou jen z databáze Mezinárodní kanoistické federace a Českého svazu kanoistů.
• Žádné ceny a žádné sliby, které nemůžu dodržet.
• Texty mým hlasem. Když něco znělo strojově, přepsal jsem to.

Jak to probíhalo

1. Návrh v Claude Design — vzhled, barvy, písma, rozvržení stránek.
2. Převod do kódu — čisté HTML, CSS a JavaScript. Bez frameworku, bez knihoven, bez build nástrojů.
3. Responzivita — návrh byl jen pro počítač, takže jsme ho přestavěli pro telefon a tablet.
4. Nasazení — nejdřív Netlify, pak přechod na Cloudflare. Každé nahrání na GitHub se samo nasadí na ostrý web.
5. Úklid kódu — jednotná kostra všech stránek, jeden soubor se styly, jeden se skripty, automatické formátování. Po úklidu jsme porovnali vzhled všech prvků ve třech šířkách obrazovky, aby se nic nezměnilo.
6. Rychlost, bezpečnost a přístupnost.
7. Texty — přepsal jsem je do svého stylu, aby nezněly jako od AI.
8. Články, časté otázky a Bing.
9. Lišta se souhlasem — statistika návštěvnosti se spustí, až když ji návštěvník povolí.
10. Videa z YouTube — přehrávač se načte až po kliknutí, do té doby se z YouTube nic nestahuje.
11. Nový vzhled — po šesti týdnech jsme web převlékli do světlého designu.

Nový vzhled

Po šesti týdnech jsem chtěl, aby web působil prémiověji. Tmavý design se mi líbil, jenže jsem chtěl něco světlého a vzdušného, co připomíná vodu.

Claude nejdřív udělal tři prototypy úvodní stránky: tyrkysovou vodu, levandulovou a teplý papír. Vybral jsem tyrkysovou, doladili jsme detaily na úvodní stránce a na Spolupráci a teprve potom jsme převedli celý web. Na ostrý web šlo všechno najednou.

• Voda v pozadí — světlo pomalu pluje a přes něj se vlní drobné odlesky jako na dně bazénu. Je to jen CSS, takže to web nezpomaluje.
• Odlesk na nadpisech — jednou za pár sekund přes ně přejede světlo jako slunce po hladině.
• Můj podpis — vyfotil jsem ho na papíře a Claude ho převedl do vektoru. Po načtení stránky se „dopíše“.
• Plynulé přechody mezi stránkami — hlavička zůstane na místě a nová stránka se vynoří zespodu.
• Fotky bez rámů, jen s měkkým stínem.

Na světlém pozadí jsme museli přepočítat i fialovou. Původní odstín neměl na bílé dost kontrastu pro text, tak je teď tmavší. Znovu vznikly i obrázky pro sdílení na sociálních sítích a media kit — obrázky teď vyrábí skript, takže nový článek má obrázek jedním příkazem.

SEO pod kapotou

Strukturovaná data

Vyhledávače a AI asistenti čtou web lépe, když mu rozumí. Proto má každá stránka strukturovaná data schema.org — přes 10 typů:

• Person — kdo jsem, klub, reprezentace, škola, partner, profily na sítích
• WebSite, ProfilePage, WebPage — co je která stránka
• BlogPosting, CollectionPage — články a jejich seznam
• FAQPage — časté otázky na Spolupráci
• BreadcrumbList — kde se stránka na webu nachází
• ImageObject — fotky i s autorkou

Indexace

• Google Search Console — ověřené celou doménou přes DNS, odeslaná sitemap.
• Bing Webmaster Tools — z indexu Bingu čerpá i hledání v ChatGPT a Copilot.
• IndexNow — po každém nasazení web sám nahlásí Bingu změněné stránky. Nečeká se týdny, až je vyhledávač najde.

Rychlost

Na počítači má web plný počet bodů ve všech čtyřech kategoriích. Na mobilu vyšel výkon 99 — Google měří na simulovaném pomalém telefonu a každé měření vyjde trochu jinak, obvykle mezi 90 a 99. Přístupnost jsme zvedli z 96 na 100. Co pomohlo:

• Filmové zrno přes celý web bylo živé SVG a prohlížeč ho přepočítával. Nahradil jsem ho malým obrázkem 22 kB — zpoždění vykreslení hlavní fotky kleslo z 1,9 s na 0,07 s.
• Fotky ve více velikostech — telefon si stáhne menší verzi než velký monitor.
• Mezipaměť na rok pro fotky a písma.
• Písma přímo na webu, ne z Google Fonts.
• Kontrast textu aspoň 4,5 : 1.

Zbytek výkonu na mobilu brzdí hlavně to, že web nemá build krok, který by kód zmenšoval. Tohle je vědomé rozhodnutí: web zůstává jednoduchý a každou změnu nahraju bez dalších nástrojů.

Měření z 3. listopadu 2026 (počítač 100 / 100 / 100 / 100, mobil 99 / 100 / 100 / 100): zpráva PageSpeed Insights (otevře se v novém okně).

Bezpečnost a soukromí

• HTTPS s HSTS a DNSSEC — doména i spojení jsou zabezpečené.
• Content Security Policy — web smí načíst jen vlastní soubory, nic cizího do něj nepronikne.
• Statistika jen se souhlasem (Cloudflare Web Analytics) — lišta se ukáže při první návštěvě a měření se spustí až po kliknutí na „Přijmout“. Volbu jde kdykoli změnit v patičce přes „Nastavení cookies“. Samotná statistika cookies nepoužívá.

Přístupnost

• Odkaz „Přeskočit na obsah“ pro ovládání klávesnicí.
• Všechny ovládací prvky jdou ovládat klávesnicí.
• Když má návštěvník v systému vypnuté animace, web se nehýbe.
• Popisky fotek a odkazů pro čtečky obrazovky.

Co web umí

• Filtr, graf a mapa závodů na Výsledcích se vytvářejí samy z tabulky výsledků. Nový závod dopíšu jednou a všechno se upraví.
• Závodní dráha — lodě jedou rychlostí mého osobního rekordu, 200 metrů za 39,149 sekund.
• Media kit v PDF se vyrábí automaticky ze zdrojové stránky ve stylu webu.
• Nákresy ploch pro logo podle skutečných rozměrů ze smlouvy se svazem. Loď je obkreslená z fotky závodní kánoe.
• Videa z YouTube se načtou až po kliknutí, takže YouTube o návštěvě neví, dokud si video někdo nepustí.
• Obrázky pro sdílení vyrábí skript ze stejného seznamu pro všechny stránky.
• Další články — pod každým článkem jsou dva související, aby žádný nezůstal schovaný.

Co mi to dalo

Naučil jsem se s AI pracovat jako s vývojářem. Jasně zadat, co chci, kontrolovat výsledek a neustoupit, když něco nesedí. Nákres lodi na Spolupráci jsme předělávali několikrát. Nejdřív vypadal jako kajak, pak jsem si všiml, že má prohozenou příď a záď.

A SEO jsem si osahal v praxi — od strukturovaných dat přes rychlost až po Search Console a Bing. Je to něco jiného, než o tom jen číst.

Co chci přidat

Web není hotový. Tohle mám v plánu:

• Čísla z Instagramu, která se aktualizují sama — teď je přepisuju ručně jednou za čas.
• Kalendář závodů na sezónu 2027, aby partneři věděli, kde bude jejich logo vidět.
• Novinky ze závodů během sezóny — krátce, hned po závodě.
• Celý web v angličtině pro zahraniční partnery a pořadatele.
• Stránku pro novináře — fotky ke stažení a krátký medailonek na jednom místě.

Použité nástroje

• Návrh: Claude Design
• Kód: Claude (Anthropic) — HTML, CSS, JavaScript
• Hosting: Cloudflare Workers, nasazení z GitHubu
• Doména: Wedos, DNS u Cloudflare
• Vyhledávače: Google Search Console, Bing Webmaster Tools, IndexNow
• Měření: PageSpeed Insights, Cloudflare Web Analytics