experientebucovina.ro: Bucovina pe o singură hartă, cusută ca o ie

Ca să afli ce se întâmplă vara în Bucovina, aveai nevoie de răbdare. Festivalul de blues din Suceava, folclorul de la Câmpulung Moldovenesc, trufele de la Cacica și muzica de la marginea pădurii, de la Corlata, se anunțau fiecare pe site-ul sau pe pagina de Facebook a organizatorului. Le găseai pe rând, dacă știai ce să cauți.

Acum sunt într-un singur loc. Doar în iulie 2027, experientebucovina.ro are șapte experiențe pe hartă și în calendar, unele cu date încă estimate, și fiecare are un buton care te duce direct la organizator.

Sunt Dan (Dumitru Mihăilă), fondatorul DanBlocks. Am construit platforma de la cap la coadă pentru Fundația de Caritate și Întrajutorare „ANA”: cercetarea și textele, designul, codul, SEO-ul, măsurarea și lansarea. Am lucrat 3,5 ani în echipa Google Ads, așa că măsurarea a intrat în proiect din prima zi, nu la final.

Mai jos îți arăt ce am ales și de ce, ce a picat pe drum și cifrele din ziua lansării. Unde o cifră e estimare, o spun.

De unde am pornit

Fundația ANA voia un singur loc pentru experiențele culturale din județul Suceava: simplu de folosit, care să trimită oamenii la organizatori.

Brief-ul de la prima discuție, din 27 august 2026, era scurt: minimul necesar, dar funcțional. O hartă pe prima pagină, patru categorii (festivaluri, tradiții, gastronomie și patrimoniu construit) și câte o pagină pentru fiecare experiență, cu descriere, fotografii, clipuri și linkuri spre organizator.

Din prima zi am stabilit și regulile pe care nu le negociam:

• Date verificabile. Informațiile vin din surse publice și de la organizatori. O ediție neconfirmată apare ca estimată, nu ca sigură.
• Fotografii cu acord. Fotografiile organizatorilor apar doar cu acordul lor scris, iar copiii recognoscibili nu apar.
• Măsurare doar cu acord. Nimic nu se măsoară înainte ca vizitatorul să accepte cookie-urile de analiză.
• Pagini ușoare. Site static, cu JavaScript doar unde e nevoie.
• Română corectă. Diacritice cu virgulă (ș, ț) și texte fără superlative goale.

Prima versiune a fost gata pe 19-20 octombrie: structura, modelul de date și primele festivaluri, documentate din surse publice. Pe 27 octombrie seara am decis să refac designul, ca site-ul să aibă o personalitate puternică, a Bucovinei: elemente reale din ia bucovineană și un ac care coase pe pagină când derulezi. Redesign-ul, completarea de la 18 la 31 de experiențe și lansarea au durat trei zile.

Ce am construit

Totul pornește de la o singură acțiune: vizitatorul găsește o experiență și ajunge la organizator. Site-ul nu vinde bilete și nu încearcă să țină oamenii pe pagină. Restul deciziilor au pornit de aici.

Ca o aplicație de călătorii, mai ales pe telefon

Structura e cea a unei aplicații de călătorii, ca Airbnb. Căutarea e o pastilă, categoriile sunt pastile, iar calendarul are taburi doar pentru lunile în care se întâmplă ceva. Căutarea se deschide din orice pagină, cu rezultate pe loc, inclusiv cu tasta „/” pe desktop.

Pe telefon, pagina unei experiențe are sus butonul de înapoi, numele și căutarea, iar jos data și butonul „Mergi la organizator”. Butonul se retrage doar când ajungi la panoul organizatorului. Fiecare experiență se termină cu „Tot prin apropiere”: cele mai apropiate 10 locuri, ordonate după dată, cu distanța.

Date care spun ce e sigur și ce e estimat

Cele 31 de experiențe sunt 13 festivaluri, 6 tradiții, 3 experiențe gastronomice și 9 locuri de patrimoniu construit, printre ele cinci biserici pictate din patrimoniul UNESCO. Au în total 91 de ediții pe ani.

Fiecare ediție e confirmată, estimată sau neanunțată. Când organizatorul a anunțat data, pagina arată data exactă. Când nu, arată perioada estimată după edițiile trecute, de exemplu „mijlocul lui iulie 2027”, și spune că e estimare.

Secțiunea „Ce urmează” nu e scrisă de mână: se calculează din date. Site-ul se reconstruiește singur în fiecare luni dimineață, ca o ediție trecută să nu rămână pe prima pagină fără ca cineva să intervină.

Fiecare experiență are și o secțiune „De unde știm”, cu sursele la vedere. Așa am prins și greșeli de-ale mele: festivalul de teatru din Fălticeni e Festivalul Internațional de Teatru pentru Tineret „Grigore Vasiliu Birlic”, după actorul născut acolo, nu „Vasile Birlic”, cum îl notasem eu.

Harta cusută

Prima hartă, una clasică, arăta „din alt film” lângă restul paginii. Așa că harta de pe prima pagină e desenată tot în cusătură, la build, din conturul județului și din cinci râuri mari luate din OpenStreetMap: Suceava, Moldova, Bistrița, Siret și Moldovița. Pinii sunt rozete, un motiv din albumul de broderie din 1910 despre care scriu mai jos.

Prima pagină nu încarcă nicio bibliotecă de hărți. Pe pagina fiecărei experiențe, unde contează drumul, apare o hartă OpenStreetMap obișnuită, încărcată doar când ajungi la ea.

Designul: o pagină croită ca o ie

Voiam ca site-ul să arate a Bucovina fără clișee. Culorile mănăstirilor pictate, cu albastrul de Voroneț în frunte, nu au intrat în paletă: studiile de pigmenți pe care le-am găsit nu le confirmau pe toate. Le-am lăsat să se vadă în fotografii.

În schimb, pagina e croită ca o ie și se citește la fel, de sus în jos: altița și numele cusut sus, încrețul sub ea, râurile pe margini, brâul cu categoriile și catrința în subsol.

Motivele vin din două albume de acum mai bine de o sută de ani:

• „Colecție de cusături naționale românești din diferite județe”, de Maria I. Panaitescu, București, 1910, planșa Suceava-5. În 1910, județul Suceava era cel din Vechiul Regat, cu reședința la Fălticeni; Bucovina era atunci austriacă.
• „Motive der hausindustriellen Stickerei in der Bukowina”, de Erich Kolbenheyer, Viena, 1912, planșa 9, din Capu Codrului, districtul Gura Humorului. Scanarea e a bibliotecii Muzeului de Etnografie din Viena, publicată pe Internet Archive.

Niciun motiv nu e desenat din mână. Planșa lui Kolbenheyer e scanată la 600 de puncte pe inch. Am detectat liniile grilei tipărite, am citit culoarea din mijlocul fiecărei celule și am pus repetițiile motivului să „voteze” între ele, ca petele de tipar să nu treacă drept cusătură.

În cod, fiecare motiv e un izvod scris cu litere: „x” e fir roșu, „o” e fir negru, punctul e pânză goală. Acul citește izvodul rând cu rând și coase exact ce scrie acolo.

Un singur ac, desenat pe canvas, coase tot. La încărcare coase numele și altița, apoi coboară pe marginea paginii și coase garoafele cât derulezi. Coase după metoda daneză: întâi un rând de jumătăți de cruce, de la stânga la dreapta, apoi îl închide de la dreapta la stânga. Dacă ai cerut sistemului mai puțină mișcare, pagina vine deja cusută și acul nu mai apare.

Numele de sus și cel din subsol sunt cusute cu un alfabet făcut pe aceeași grilă, cu nouă rânduri pe literă și loc pentru diacritice. Restul textului e în Alegreya și Alegreya Sans, găzduite pe domeniu, nu încărcate de la Google Fonts.

Am lăsat deliberat deoparte semnificațiile inventate pentru motive (le spunem pe numele din album), motivele din alte zone ale țării și imaginile generate sau fotografiile de stoc pentru locuri reale.

Ce nu se vede, dar contează

Partea asta nu apare în nicio captură, dar e cea care ține un site public în picioare după lansare: drepturile fotografiilor, cine scrie conținutul, cum îl găsește Google și ce măsori fără să încalci acordul vizitatorului.

Fotografii cu acte în regulă

La începutul redesign-ului, circa 120 din cele 174 de fotografii veneau de pe site-urile organizatorilor, fără acord confirmat. Am pus regula direct în cod: o fotografie ajunge pe site doar dacă are licență liberă sau acordul scris al organizatorului ori al instituției și nu are copii recognoscibili.

La build, orice imagine nefolosită e scoasă din fișierele publicate, deci o fotografie neaprobată nu există online nici la o adresă ghicită. Până la acord, paginile au avut imagini de rezervă. Pe 29 octombrie aveam acordul tuturor organizatorilor.

Fețele copiilor sunt estompate în 12 fotografii de grup, cu mențiunea „fețe estompate” în credit. Pagina Credite foto le listează pe toate, cu autor, sursă și licență.

Din 190 de fotografii sursă au ieșit 556 de fișiere WebP, în până la trei mărimi: 1.600, 800 și 400 de pixeli. Pe telefon, cardurile descarcă varianta de 400.

Un blog pe care Fundația îl scrie singură

Blogul e în Sanity, un editor online, la adresa studio.experientebucovina.ro. Editorul e găzduit chiar de Sanity, deci nu e niciun server de întreținut, nici pentru Fundație, nici pentru mine. Dacă Sanity nu răspunde, build-ul merge mai departe cu ce are.

Un articol cere ce cere și site-ul: o descriere de 70-160 de caractere, surse, experiențe legate și, opțional, întrebări frecvente. Fiecare fotografie are câmpuri pentru text alternativ, credit, sursă, licență și o bifă pentru copii, deci regula fotografiilor se aplică și pe blog.

La lansare, blogul are 4 ghiduri cu surse: calendarul festivalurilor din 2027, cum se citește o ie bucovineană, bisericile pictate și obiceiurile de iarnă. Deocamdată sunt fișiere în cod; trec în Sanity în perioada următoare.

Găsit de Google și de asistenții AI

• Adrese curate. Fiecare pagină are o adresă canonică, iar sitemap-ul are 115 adrese. Paginile încă incomplete au noindex. Adresa cu www trimite permanent (301) spre cea fără www.
• Date structurate. Event pentru cele 79 de ediții cu date confirmate, TouristAttraction pentru cele 11 locuri fără ediții, BreadcrumbList pe toate experiențele și Article pe blog. O ediție estimată nu primește Event: Google cere o dată de început, iar o dată inventată ar fi o promisiune falsă.
• Asistenții AI. Am publicat /llms.txt, un rezumat în text simplu al tuturor experiențelor, generat la fiecare build din aceleași date. Nu toți asistenții îl folosesc, dar costă puțin și nu rămâne niciodată în urmă. Secțiunile „De unde știm” pun sursa lângă fiecare informație.

Măsurare doar cu acord

• Consent Mode v2. Google Tag Manager și GA4 pornesc cu totul refuzat, iar analiza începe doar după „Accept”.
• Acțiunea care contează. Clicul spre organizator e un eveniment separat (click_organizator), cu experiența și tipul linkului. Pornirea unui clip e alt eveniment (video_play).
• Clipuri fără cookie-uri. Clipurile YouTube se încarcă de pe youtube-nocookie.com și abia după clic. Până atunci, pagina arată doar o imagine.
• Vizitele trimise, vizibile și la organizator. Linkurile spre organizatori au parametri UTM (utm_source=experientebucovina), deci orice organizator cu statistici pe site vede câți vizitatori i-a trimis platforma.

Restul e igienă: Cloudflare servește paginile din nodul cel mai apropiat de vizitator, inclusiv din București, fiecare modificare primește întâi o adresă de previzualizare, fonturile de rezervă ocupă exact locul fonturilor finale, ca textul să nu sară, iar pagina respectă setările de sistem pentru mai puțină mișcare, mai puțină transparență și contrast mai mare.

Ce a picat pe drum și cum am reparat

Între 28 și 29 octombrie am notat 32 de probleme. Iată cele din care am învățat ceva, inclusiv greșelile mele.

Elementul principal al paginii apărea după 8,7 secunde. Așa a arătat Lighthouse, unealta Google care simulează un telefon pe o rețea mobilă lentă, la indicatorul LCP, pe build-ul local. După ce scosesem textul din hero, harta urcase în primul ecran, iar imaginile ei deveniseră elementul principal. Am pornit harta doar când intră în ecran, iar cuvântul „BUCOVINA”, invizibil până termina acul, se vede acum stins de la prima afișare, înainte ca acul să-l acopere cu cruciulițe. LCP-ul simulat a scăzut la 5,0 secunde, tot local. Apoi harta clasică a plecat de tot de pe prima pagină, înlocuită de cea cusută.

HTML-ul primei pagini avea 762 KB. Pictogramele categoriilor erau desenate cu câte un dreptunghi pe fiecare punct de cusătură, repetate de zeci de ori. Comprimat, fișierul avea doar 27,9 KB, deci transferul nu era problema; browserul tot trebuia să construiască fiecare dreptunghi. Le-am rescris ca o singură formă pe culoare, cu punctele vecine unite, iar HTML-ul a scăzut la 214 KB.

Textul sărea când se încărcau fonturile. Generatorul de fonturi din Astro calcula greșit fonturile de rezervă și preîncărca peste 10 fișiere. Am calculat metricile manual, din fișierele de font: Alegreya Sans e la 87,67% din Arial, iar Alegreya la 85,94% din Georgia. Apoi am observat că fișierele latin-ext, de circa 22 KB fiecare, se descărcau doar pentru ș și ț. Am păstrat din ele doar literele românești: 2-4 KB pe fișier.

Garoafele alunecau la derulare rapidă. Cusătura era desenată pe un canvas fix, care urmărea derularea. Prima corectură a oprit dublarea, dar nu și alunecarea. Soluția finală: cusătura stă în canvas-uri din interiorul paginii, în bucăți de circa 2.048 de pixeli, iar acul își calculează poziția față de document, nu față de ecran.

Bara de categorii a avut patru variante pe telefon. Am mutat-o jos, ca bară de taburi, ca într-o aplicație, fără să țin cont că Safari pe iPhone are bara de adrese tot jos. Varianta finală stă sus, cu căutarea scurtă și categoriile ca pastile. Pe telefon am testat fiecare ecran și am făcut, în total, peste 20 de corecturi de interfață, din capturi și dintr-un video.

Detecția automată a fețelor a estompat un dinozaur. În cele 12 fotografii de grup cu copii am rulat detecția de fețe (OpenCV, modelul YuNet) la două scări, apoi am verificat fiecare cadru. Detecția a luat o mascotă, un dinozaur, drept față. Am scos-o manual și am refăcut estomparea. Fețele întoarse de la cameră nu sunt găsite automat, așa că le-am verificat cu ochiul.

Lista ordonată după dată punea primul un loc închis. Cetatea de Scaun a Sucevei e închisă pentru restaurare din 12 octombrie 2026, dar apărea prima. Prima corectură căuta cuvântul „închis” și a prins și „lunea e închis”, din programul Muzeului Arta Lemnului. Regula finală caută doar „închis temporar” și „închisă temporar”.

Două greșeli mici la lansare. Oprisem adresa tehnică workers.dev din panoul Cloudflare, dar publicarea automată o repornea, pentru că opțiunea e activă implicit. O a doua adresă cu tot site-ul e o copie pe care nu o vrei indexată, așa că am oprit-o din configurare și am verificat că răspunde 404. Apoi am verificat subdomeniul studio înainte să fie salvată înregistrarea DNS. Routerul a ținut minte răspunsul negativ, iar subdomeniul părea inexistent, deși serverele DNS publice îl găseau.

Cifrele

Toate cifrele sunt din 28 și 29 octombrie 2026, ultimele două zile de lucru. Sunt măsurate cu un instrument, în afară de cele marcate „estimare”.

Ce s-a livrat

Înainte și după

Serverul răspunde în 0,11-0,16 secunde (TTFB, trei măsurători de pe rețeaua mea), din nodul Cloudflare din București.

Viteza: 61 sau 96, după cum numeri scriptul de măsurare

Lighthouse simulează un telefon pe o rețea mobilă lentă, iar scorul de performanță variază de la o rulare la alta: la 15:56, două rulări pe prima pagină, făcute la scurt timp una după alta, au dat 50 și 71. De aceea, tabelul arată o singură serie de rulări pe site-ul live, toate pe 29 octombrie, la 18:14. O diferență de câteva puncte nu spune mare lucru.

La rularea de la 15:56, accesibilitatea, bunele practici și SEO au avut 100 pe prima pagină, pe pagina Amestec Fest și pe un articol de blog.

Între primele două rânduri s-a schimbat un singur lucru: Google Tag Manager, cu GA4, a fost blocat. Fără el, prima pagină transferă cu circa 300 KiB mai puțin și are LCP de 2,1 secunde în loc de 7,7. Și pe build-ul local, aceeași pagină a avut 78 cu GTM și 91 fără, deci diferența nu vine dintr-o singură rulare.

Pot amâna încărcarea GTM până la prima interacțiune sau câteva secunde după afișare. Câștig viteză, dar pierd o parte din măsurarea vizitatorilor care pleacă repede. Decizia e încă deschisă și o iau cu cifrele reale în față.

Ce n-am măsurat încă

• Traficul și numărul de vizitatori.
• Clicurile spre organizatori.
• Core Web Vitals de la vizitatori reali. Apar în Chrome UX Report și în Search Console doar după ce site-ul strânge destul trafic, pe o fereastră de 28 de zile.
• Pozițiile în Google și mențiunile în asistenții AI.

Le adaug aici când le am.

Ce aș face diferit

• Aș verifica întâi cum arată navigarea în Safari pe iPhone, înainte să propun o bară jos pe telefon. Ar fi scutit două variante.
• Aș rula Lighthouse pe site-ul live după fiecare schimbare mare de layout, nu doar la final. Harta urcată în primul ecran ar fi apărut imediat.
• Aș citi setările implicite ale uneltelor de publicare înainte să automatizez ceva. Adresa workers.dev n-ar fi rămas deschisă.
• Aș verifica o înregistrare DNS abia după ce e salvată. O verificare făcută prea devreme rămâne în cache și te trimite pe o pistă falsă.
• Aș cere acordurile pentru fotografii de la început, odată cu materialele, nu după ce paginile erau gata.

Ce urmează

• Decizia despre încărcarea amânată a Google Tag Manager (61 față de 96 pe telefon, pe prima pagină).
• Cele 4 ghiduri trec în Sanity, iar Fundația primește acces de editor.
• Core Web Vitals din date reale, după primele patru săptămâni de trafic.
• Imaginile și în format AVIF, pe lângă WebP.
• Două detalii mici pe telefon: pinul grupat de lângă Rădăuți acoperă parțial numele orașului, iar firul acului poate traversa ecranul dacă sari brusc în pagină în primele 2-3 secunde.

Mulțumesc Fundației ANA pentru încredere și organizatorilor care au răspuns cu date, fotografii și acorduri.