Studiu de caz · 2025

Hope No Drugs — Platformă de prevenție cu finanțare europeană

O platformă multilingvă, scrisă de la zero pentru un proiect Erasmus+ KA210-ADU (2025–2027), care le oferă părinților din patru țări resurse practice și repere de dialog pentru discuțiile despre prevenirea consumului de droguri cu copii și adolescenți între 8 și 18 ani.

An
2025
Client
Stop Drogurilor — proiect Erasmus+ KA210-ADU (România, Portugalia, Italia, Bulgaria)
Rol
Strategie, design, dezvoltare temă proprie, configurare multilingvă, audit de accesibilitate
Sector
ONG · Program cu finanțare europeană · Educație parentală

Servicii

  • Strategie
  • Design
  • Dezvoltare temă proprie
  • Configurare multilingvă
  • Audit de accesibilitate

Stack

  • Arhitectură proprie tangled-design
  • Poppins (găzduit local)
  • GTranslate
  • hCaptcha
hopenodrugs.euStatus · Live
hopenodrugs.eu
Hope No Drugs — Platformă de prevenție cu finanțare europeană — site-ul complet
Hope No Drugs — Platformă de prevenție cu finanțare europeană — site-ul complet — mobil

Prezentare generală

Hope No Drugs este platforma publică a unui proiect Erasmus+ KA210-ADU care se desfășoară între 2025 și 2027 în patru țări UE (România ca țară coordonatoare, alături de Portugalia, Italia și Bulgaria). Proiectul le oferă părinților cu copii și adolescenți între 8 și 18 ani resurse practice și repere de dialog pentru prevenirea consumului de droguri, într-un limbaj clar și potrivit familiilor, care nu înlocuiește sprijinul medical, psihologic sau educațional specializat. Sloganul o spune direct: „Protejăm viitorul, educând prezentul”. Am scris platforma de la zero — cod propriu, cinci limbi, accesibilitatea tratată ca cerință de la început și cerințele tehnice și de comunicare stabilite pentru un proiect cofinanțat.

Provocarea

Programele de prevenție finanțate de UE au o problemă aparte: trebuie să vorbească pe limba familiilor reale și, în același timp, să respecte obligațiile de vizibilitate care vin la pachet cu finanțarea Erasmus+. Tonul trebuie să fie cald și practic — documentația de proiect e prea densă pentru lectura rapidă pe un site destinat familiilor. Structura, transparentă — platforma trebuie să prezinte clar proiectul, partenerii, activitățile și rezultatele publice. Accesibilitatea, tratată ca cerință esențială, nu ca retuș final. Și totul trebuie să funcționeze în patru țări partenere și cinci limbi, fără să se piardă coerența când treci de la română la italiană sau la bulgară.

A doua cerință ținea de direcția vizuală. Identitatea instituțională și vizibilitatea finanțării europene trebuiau păstrate, dar fără să domine resursele destinate părinților. Ne-am dorit ca site-ul să fie citit în primul rând ca o resursă pentru familii.

Abordarea

Am construit platforma pe aceeași arhitectură proprie tangled-design pe care o adaptăm proiectelor cu cerințe similare de administrare, performanță și accesibilitate — același cod care stă la baza site-ului Uroclinic Craiova și a platformei publice DGAUIS. Nu e întâmplător. O fundație tehnică internă matură înseamnă:

  • Accesibilitate verificată în proiecte reale, cu WCAG 2.2 AA ca reper de lucru
  • Performanță măsurată înainte de lansare, cu mai puține optimizări ulterioare
  • Administrare simplă (editorii de conținut întrețin platforma fără ajutorul nostru)
  • Aceeași structură, de la un proiect la altul

Partea multilingvă n-a fost o bifă pusă la final: selectorul de limbă e element principal de navigație, vizibil pe fiecare pagină, iar cele patru limbi ale țărilor partenere, plus engleza, sunt tratate la fel.

Soluția

  • Platformă scrisă de la zero (pe arhitectura noastră proprie tangled-design)
  • Selector cu cinci limbi — română, engleză, italiană, portugheză și bulgară — prin GTranslate, cu etichete hreflang configurate
  • Metodologia de prevenție în trei pași, transformată într-o componentă dezvoltată pentru proiect, cu carduri numerotate:
    1. Conversații deschise — cum să vorbești cu copilul tău fără să se închidă în el
    2. Observă — care sunt semnalele de alarmă care contează cu adevărat
    3. Oferă alternative — ce faci în loc să spui doar „nu”
  • Bloc de statistici „Știați că?”, cu trei indicatori despre consumul de droguri în rândul adolescenților, preluați din materialele proiectului
  • Secțiune de întrebări frecvente, în format expandabil, cu răspunsuri la temele ridicate cel mai des de părinți
  • Formular de contact cu hCaptcha, fără integrarea Google reCAPTCHA
  • Prezentarea celor patru țări partenere, cu steaguri și detalii despre organizațiile din fiecare
  • „Cum te poți implica” — un parcurs în patru pași
  • Secțiunea Povestiri — texte anonimizate, publicate în forma stabilită de partenerii proiectului
  • Calendarul mobilităților — activitățile Erasmus+ programate în perioada următoare
  • Contoare animate (counters.js) pentru indicatorii publici ai proiectului
  • Îndemn secundar fix („Ghid pentru părinți”) vizibil pe fiecare pagină
  • Apel de urgență la 112 (linkuri tel:) accesibil de pe orice pagină
  • Fontul Poppins găzduit local (WOFF2, optimizat prin includerea caracterelor necesare)
  • Tipografie fluidă cu clamp()
  • Legături de salt la conținut, etichete ARIA, HTML semantic peste tot, cu verificări manuale de accesibilitate înainte de lansare
  • Declarația de finanțare Erasmus+ afișată la vedere

Momente-cheie

Metodologia în trei pași, transformată în componentă

Materialele de proiect descriu metodologia de prevenție într-un limbaj academic dens, prea greu de parcurs pe un site destinat familiilor. Am transformat-o în trei carduri numerotate, cu iconițe, titluri scurte pe limba oamenilor și rezumate de două propoziții. Informația cerută în proiect a rămas acolo, doar reorganizată într-un format care se citește repede. Conținutul de specialitate a fost furnizat și aprobat de partenerii proiectului.

Cinci limbi, administrate consecvent

La multilingv se greșește ușor. Aici, cele patru limbi ale țărilor partenere, plus engleza, au același statut: selectorul de limbă e vizibil pe fiecare pagină, nu ascuns în subsol, iar structura multilingvă e configurată astfel încât versiunile să poată fi revizuite și actualizate pe durata proiectului. Conținutul vine de la organizațiile partenere din fiecare țară.

hCaptcha în loc de reCAPTCHA

Pentru formularul de contact am ales hCaptcha, ca să nu adăugăm Google reCAPTCHA și să reducem dependența formularului de serviciile Google. hCaptcha rămâne un furnizor terț, care prelucrează date și care trebuie descris ca atare în politica de confidențialitate și de cookie-uri a site-ului. Pentru o platformă destinată familiilor, ni s-a părut alegerea potrivită.

Accesibilitate din start

Site-ul se poate parcurge integral de la tastatură, respectă regulile de contrast, iar textul se poate mări fără să se strice nimic. L-am testat manual cu un cititor de ecran, apoi doar din tastatură, apoi la zoom de 200%, iar problemele găsite au fost remediate înainte de lansare. WCAG 2.2 AA a fost reperul de lucru pe tot parcursul implementării. Proiectul are un coordonator din sectorul public și un public larg, așa că accesibilitatea a fost tratată ca o cerință esențială, nu ca un retuș final.

Tehnologiile folosite

Platformă scrisă de la zero (arhitectură proprie tangled-design)
Poppins găzduit local (WOFF2, optimizat)
Fișiere CSS proprii: header, hero, global, patterns
Încărcare amânată pentru scripturile neesențiale
counters.js și schema.js dezvoltate pentru proiect
Configurare multilingvă în cinci limbi · hCaptcha
Schema.org (Organization)
WCAG 2.2 AA ca reper de accesibilitate
Speculation Rules API pentru preîncărcare

Rezultatul

O platformă de prevenție live, multilingvă, destinată părinților din cele patru țări partenere, în cinci limbi. Lansată la timp pentru reuniunea de deschidere a proiectului Erasmus+. Indicatorii Core Web Vitals au fost măsurați în limitele recomandate la lansare, iar accesibilitatea a fost testată manual înainte de publicare.

Structura reunește prezentarea proiectului, partenerii, resursele pentru părinți, poveștile și activitățile într-un singur loc, iar conținutul furnizat de organizațiile partenere se adaugă prin câmpuri structurate, pe măsură ce proiectul continuă până în 2027.