Muzeul Viu al Bucureștiului

Am lucrat la site-ul Muzeul Viu al Bucureștiului împreună cu o agenție parteneră. Designul și relația cu clientul au fost ale agenției, iar dezvoltarea WordPress a fost a mea, de la hartă și filtre până la panoul de administrare. Site-ul adună pe o hartă proiectele de mediu realizate în programul Platforma de Mediu pentru București, ca vizitatorii să meargă să le vadă și pe teren.

Provocarea

Programul Platforma de Mediu pentru București a fost lansat de Fundația Comunitară București și ING. Prin el, organizații neguvernamentale au realizat proiecte de mediu în oraș: grădini comunitare, puncte de compostare, spații verzi protejate, programe educaționale. Site-ul trebuia să le arate astfel încât oamenii să aibă chef să le viziteze. De aceea harta stă în centrul site-ului, iar tot restul se adaptează ei.

Contribuția mea

• Temă WordPress personalizată și un plugin propriu pentru hartă, după machetele din Figma, pentru mobil și desktop.
• Hartă pe bază de Leaflet, cu marcaje colorate după categorie. În zonele aglomerate, punctele apropiate se adună într-un grup numerotat, care se desface la mărire.
• Căutare după nume, filtrare după categoria tematică (categoriile sunt împărțite în două grupe), sortare, iar harta se restrânge la rezultate.
• Un proiect poate apărea în mai multe puncte. Rețeaua de compostare, de exemplu, înseamnă 25 de locații în oraș.
• Trasee tematice: butonul „Începe traseul” restrânge harta la opririle traseului și afișează o bară de traseu care se poate închide.
• Pagini de proiect cu galerie, organizația care l-a realizat și un buton care deschide în Google Maps traseul până la locație.
• Română și engleză cu Polylang, cu adrese separate pentru fiecare limbă.
• Toate textele, imaginile, meniurile și categoriile se editează din panoul de administrare. Pentru administratori am scris un ghid în română, în format PDF, iar editorii văd doar meniurile care îi privesc.
• Pagini de evenimente și o pagină „În curând” care se poate activa pentru perioada dinaintea lansării.

Rezultatul

Site-ul este live: 68 de proiecte în 85 de puncte, în șapte categorii tematice, cu patru trasee recomandate. Organizatorii adaugă proiecte noi fără programator, iar harta le arată imediat.

Harta cere doar date

Codul care desenează harta nu umblă în WordPress. Cere punctele și traseele de la o interfață de date proprie și documentată (REST API), cu nume de câmpuri stabile. Așa a cerut clientul, și pe bună dreptate: dacă harta se mută cândva pe altă platformă sau o aplicație mobilă vrea să o folosească, datele rămân în același loc.

Când se termină cota gratuită a hărții

Fundalul hărții venea la început de la un furnizor cu o cotă lunară gratuită. În octombrie traficul a atins această cotă, iar fundalul hărții a dispărut. Am trecut pe OpenFreeMap, care nu are o asemenea limită. La un site public, promovat prin campanii, merită ales așa încă de la început.

Modificările se văd imediat după salvare

Pe un site cu cache se întâmplă ușor ca editorul să salveze, iar vizitatorul să vadă încă ore întregi datele vechi. Aici cache-ul se golește singur când se schimbă conținutul hărții, iar adresele interfeței de date primesc o versiune după momentul ultimei modificări. Organizatorii își pot verifica astfel munca imediat după salvare.

Pe mobil, harta nu blochează derularea

Pe telefon, o hartă pe toată lățimea ecranului devine ușor o capcană: degetul trage harta, iar pagina nu mai derulează. De aceea, pe mobil harta se mișcă cu două degete, iar cu un deget pagina derulează mai departe.