Když Česká republika získala roli čestného hosta (Czechia2026) na Frankfurtském knižním veletrhu 2026, Moravská zemská knihovna potřebovala web, který důstojně představí českou literaturu mezinárodnímu publiku. Výsledkem je komplexní prezentační platforma s pokročilými filtry, třemi jazykovými mutacemi a stovkami akcí rozložených do tří programových celků. Web spojuje technické řešení s vizuální identitou projektu - včetně charakteristické animované vlny, která doprovází navigaci.

Zadání

Web má sloužit jako hlavní informační zdroj pro knižní profesionály, média i širokou veřejnost z celého světa.

Klíčové požadavky projektu:

• Prezentace autorů pozvaných na veletrh, jejich knih přeložených do němčiny a překladatelů.
• Komplexní kalendář akcí rozdělený do tří programových celků: Rok české kultury (před veletrhem), Frankfurt 2026 (hlavní program) a ECHO (akce po veletrhu).
• Tři plnohodnotné jazykové mutace (čeština, němčina, angličtina).
• Pokročilé filtrace a vyhledávání napříč všemi sekcemi.
• Postupné spouštění webu v několika fázích podle přípravy obsahu.
• Moderní design s charakteristickou animovanou vlnou z vizuální identity projektu.

Webdesign vytvořilo grafické studio Bušek+Dienstbier. Mým úkolem byla technická realizace - převedení návrhu do funkční webové aplikace s důrazem na výkon, použitelnost a snadnou správu obsahu pro několik editorů.

Řešení

Organizace obsahu pomocí Custom Post Types

Projekt vyžadoval strukturovanou prezentaci různých typů obsahu s vazbami mezi nimi. Pro každou kategorii jsem vytvořil vlastní typy příspěvků:

Autoři a Překladatelé - profily s medailonky, fotografiemi a seznamy děl. Vazba na jejich účast v programových akcích.

Současné knižní překlady do němčiny - databáze knih přeložených do němčiny v letech 2024–2026. Každá kniha obsahuje informace o autorovi, překladateli, českém a zahraničním nakladateli včetně odkazů na jejich e-shopy.

Dramaturgická rada a Tým - členové dramaturgické rady a organizačního týmu. Jednodušší struktura s fotografií, medailonkem a kontakty.

Nakladatelství - česká nakladatelství.

Všechny post types jsou plně integrovány s překladovým pluginem Polylang. Každá jazyková mutace má synchronizovaný obsah s možností drobných lokalizačních úprav podle cílového publika.

Pokročilý systém filtrace programu

Akce – nejkomplexnější stránka s bohatou strukturou ACF polí. Obsahuje datum a čas, typ akce (čtení, divadlo, výstava, koncert, debata, přednáška, festival), místo konání, vystupující autory (jako vazbu na jejich medailonky) a externí účastníky (textové pole se středníkem jako oddělovačem). Každá akce generuje odkaz pro přidání do Google Calendar.

Program akcí představoval největší technickou výzvu. Stovky událostí rozložených do tří časových období (Rok české kultury, Frankfurt 2026, ECHO) vyžadovaly intuitivní rozhraní pro orientaci.

Vytvořil jsem AJAX filtrační systém se čtyřmi současně fungujícími kritérii:

• Typ akce - select box s možností výběru mezi čtením, divadlem, výstavou, koncertem, debatou, přednáškou a festivalem.
• Vystupující - dynamicky generovaný seznam všech autorů z databáze i externích účastníků, abecedně seřazený.
• Datum - kombinace select boxů a Flatpickr kalendáře pro přesný výběr časového rozsahu.
• Lokace - filtrování podle místa konání.

Nad rámec těchto filtrů je checkbox „pouze aktuální", který automaticky skrývá proběhlé akce. Všechny filtry fungují společně - uživatel může například najít všechna čtení s konkrétním autorem v Berlíně v určitém období.

Technická implementace využívá:

AJAX načítání - změna jakéhokoli filtru okamžitě aktualizuje výpis akcí bez přenačtení stránky. Request obsahuje všechny aktivní filtry a vrací pouze relevantní výsledky.

• URL tracking - stav filtrů se ukládá do URL parametrů. Uživatelé mohou sdílet odkaz na konkrétní filtrovaný výpis. Při načtení stránky se filtry automaticky nastaví podle URL.
• Inteligentní paginace - při procházení stránek se zachovávají všechny aktivní filtry. Odkazy na stránkování obsahují URL parametry filtrace, takže uživatel nepřijde o nastavení.
• Vzájemné vylučování s vyhledáváním - při použití vyhledávání se filtry resetují a naopak, aby nedocházelo k matoucím kombinacím.
• Podobný filtrační systém jsem v jednodušší podobě implementoval i na stránkách autorů, překladatelů a současných překladů - všude s AJAX načítáním a zachováním uživatelského nastavení.

Animovaná vlna v menu

Vizuální identita projektu Czechia2026 pracuje s motivem vlny - odkazem na slogan projektu "země na pobřeží". Grafický návrh počítal s animovanou vlnou v navigačním menu, která musela fungovat plynule bez zatížení webu.

Implementoval jsem vlastní java script animaci, kde tvar vlny je počítán jakou součet několika sinusovek - vlna není statický SVG soubor, ale dynamicky generovaná křivka. Po každém sjetí/vyjetí menu se generuje trochu jiný průběh animace.

Navigační systém a přístupnost

Menu webu má víceúrovňovou strukturu - hlavní položky obsahují několik úrovní vnořených podnabídek. To vyžadovalo pečlivé řešení ovládání a přístupnosti:

• Různé chování podle zařízení - na desktopu se submenu otevírá při najetí myší (s 300ms timeoutem proti náhodnému otevření), na mobilech vyžaduje kliknutí. Detekce probíhá podle dotykových schopností zařízení.
• Klávesová navigace - kompletní podpora ovládání šipkami nahoru/dolů pro procházení položek, Enter pro otevření/aktivaci a Escape pro zavření menu. Správně nastavené ARIA atributy pro čtečky obrazovky.
• Paměť pozice při scrollování - když uživatel otevře mobilní menu, stránka si zapamatuje jeho pozici. Po zavření se vrátí přesně tam, kde byl.
• Automatické zavírání - menu se zavře při scrollování (na desktopu) nebo kliknutí mimo navigaci, aby nepřekáželo prohlížení obsahu.

Optimalizace výkonu

S velkým množstvím java scriptu pro animace, filtraci a navigaci bylo kritické zajistit, aby se načítal pouze tam, kde je potřeba.

Implementoval jsem selektivní enqueue systém:

• Menu + animovaná vlna: na všech stránkách (součást globální navigace).
• Carousel: pouze homepage.
• Filtrace programu: pouze stránka programu.
• Filtrace novinek: pouze stránka novinek.
• Filtrace autorů/překladatelů/knih: pouze na příslušných stránkách.

Java script je strukturován jako ES6 moduly s importy a exporty. Hlavní soubor detekuje přítomnost konkrétních HTML elementů a podle toho inicializuje pouze potřebné komponenty. Zbytečný kód se nenačítá.

Web běží na WordPressu s Oxygen Builderem pro vizuální stavbu stránek podle designu. Pro správu komplexních datových struktur používám Advanced Custom Fields - všechna pole pro custom post types (autoři, knihy, akce atd.) jsou definovaná přes ACF.

Vícejazyčnost řeší Polylang, který vytváří oddělené verze každého post type pro češtinu, němčinu a angličtinu. ACF pole jsou synchronizovaná napříč jazyky, ale obsah lze podle potřeby lokalizovat.

Pro výběr data v kalendáři akcí používám Flatpickr - lehkou a flexibilní JavaScript knihovnu s českou lokalizací.

Export akcí do Google Calendar řeším přes speciální formát odkazu - není potřeba žádná knihovna, pouze správně sestavený URL string s parametry události.

Výsledek

Web Czechia 2026 byl spuštěn postupně ve čtyřech fázích:

• Únor 2025 - nultá verze s jednou statickou stránkou informující o projektu.
• Květen 2025 - první fáze se statickými stránkami.
• Červen 2025 - spuštění dynamických částí: program akcí s pokročilou filtrací, databází autorů a překladatelů, současné překlady. AJAX filtrace plně funkční napříč všemi sekcemi.
• Červenec 2025 - dokončení všech tří jazykových mutací, doladění překladů a finální optimalizace výkonu.

K prosinci 2025 web obsahuje desítky akcí ve třech programových celcích, desítky profilů překladatelů a kompletní databázi překladů české literatury do němčiny z let 2024-2026.

Moravská zemská knihovna získala moderní prezentační platformu, která důstojně reprezentuje českou literaturu v mezinárodním kontextu. Editoři snadno přidávají nový obsah přes intuitivní WordPress rozhraní s ACF poli. Návštěvníci se orientují díky pokročilým filtrům a vyhledávání.

Web běží na vlastním VPS s dostatečným výkonem, který lze při větší zátěži navýšit.

Potřebujete web pro kulturní instituci nebo mezinárodní projekt?

Pokud hledáte web s pokročilými filtracemi, strukturovanou prezentací obsahu nebo vlastními funkcemi nad rámec standardních šablon, rád vám pomůžu s realizací.

Kontaktujte mě a probereme váš projekt.