Studija razvoja web platforme Udruženja e-Razvoj (2025) – Iskustvo razvoja moderne digitalne platforme iz prve ruke

1. Uvod: Šta smo želeli da postignemo

U svetu u kojem su veb šabloni jeftini, a generički sajtovi niču svakog dana poput gljiva posle kiše – mi smo želeli nešto sasvim drugo. Nismo želeli još jedan sajt. Želeli smo platformu. Ne estetski lepu fasadu iza koje nema sadržaja, već funkcionalni, dinamični i dugoročno održiv digitalni organizam Udruženja e-Razvoj.

Želeli smo prostor koji ne samo da komunicira vrednosti Udruženja, već ih praktično realizuje – kroz konkretne alate, sadržaje, funkcionalnosti i mogućnosti za umrežavanje i zajednički razvoj.

🎯 Ključne ambicije bile su:

• Objediniti sve segmente rada Udruženja na jednom mestu – transparentno, dostupno i efikasno.
• Otvoriti vrata digitalnoj transformaciji naših članova kroz kvalitetne resurse, blogove, forum i komercijalne alate.
• Napraviti sajt koji je skalabilan – spreman da raste, da se širi, da se menja sa Udruženjem.
• Povećati vidljivost, kredibilitet i angažovanost svih članova – i pravnih i fizičkih lica.
• Obezbediti moderno korisničko iskustvo, ali sa toplinom i autentičnošću zajednice koju predstavljamo.

🧭 Naš pristup nije bio uobičajen

Na samom početku smo doneli ključnu odluku:
👉 Nećemo koristiti gotove CMS platforme.
👉 Nećemo kupovati šablone.
👉 Nećemo žuriti.

Umesto toga, odlučili smo da sve radimo ručno i temeljno:

• svaku sekciju HTML koda,
• svaku stilsku klasu u CSS-u,
• svaku JavaScript funkciju,
• svaku ikonu, svako dugme, svaku mikro-animaciju.

Zašto? Jer samo tako možemo znati šta radimo, zašto to radimo i kako da to unapredimo.

Radili smo polako, ali precizno – svesni da pravimo nešto što ne sme da bude prolazno, već digitalni temelj budućnosti Udruženja.

❤️ Iznad svega: platforma s dušom

Ova platforma nije samo kod. Ona je plod:

• entuzijazma,
• neprospavanih noći,
• sitnih frustracija kad ne radi dugme na mobilnom,
• velikih pobeda kad SEO validacija pokaže “savršen rezultat”,
• i onih čajnih pauza kad ideja padne s neba, baš kad treba.

Kao takva, ona odražava ono što jeste Udruženje e-Razvoj – zajednicu ljudi sa vizijom, znanjem i voljom da svakim danom budu bolji.
Zato ovo nije bio samo projekat. Ovo je bio naš digitalni put.

2. Prva faza: Analiza i postavljanje osnova

Svaki uspešan digitalni projekat počinje postavljanjem dobrih temelja. U našem slučaju, to nije bila samo tehnička analiza – već sveobuhvatan strateški proces u kojem smo ispitivali, propitivali i planirali kako da od sajta napravimo pravu web platformu.

Znali smo da želimo funkcionalnost, ali ne po cenu jasnoće. Da želimo estetiku, ali ne bez smisla. Da želimo sadržaj, ali ne rasut u prazninu.

Zato smo krenuli sa dva osnovna pitanja:
👉 Gde smo sada?
👉 Gde želimo da budemo?

✅ Analiza postojećeg sajta: Realnost koju nismo želeli da zadržimo

Iako je prethodni sajt Udruženja služio svrsi tokom određenog perioda, vreme ga je sustiglo. Digitalne navike korisnika su se promenile, očekivanja su porasla, a mi smo želeli više.

🔍 Glavni problemi koje smo identifikovali:

• Zastareo dizajn: Vizuelni identitet nije bio u skladu sa modernim standardima i nije jasno prenosio poruku profesionalnosti i otvorenosti.
• Nepostojanje mobilne verzije: U vremenu kada preko 70% saobraćaja dolazi sa mobilnih uređaja, ovo je bila kritična tačka.
• Nepovezane i fragmentisane informacije: Važni podaci su bili rasuti po stranama bez jasne strukture, a korisniku nije bilo lako da pronađe ono što traži.
• SEO slabosti: Nedostatak prilagođenih meta tagova, duplikati sadržaja, loša struktura naslova i nedostatak internih linkova umanjivali su vidljivost sajta na pretraživačima.
• Nedostatak centralizovane digitalne platforme za članove: Članovi nisu imali poseban prostor za međusobnu interakciju, preuzimanje resursa, ni osećaj digitalne pripadnosti zajednici.

Shvatili smo da moramo krenuti od nule.

✅ Odgovor na ključno pitanje: Šta sve nova platforma mora da sadrži?

Kao i svaka ozbiljna organizacija koja se bavi razvojem – i mi smo želeli da razvijamo svoju platformu prema stvarnim potrebama korisnika, ne samo prema estetskom ukusu.

Zato smo definisali listu ključnih funkcionalnosti i sadržaja koje nova platforma mora da obuhvati:

🧱 1. Kompletne informacije o Udruženju

• Stranice poput Istorijat, Misija i Vizija, Tim, Fond e-Razvoj, CPP e-Razvoj, Inovacioni centar – jasno strukturirane i pisane u tonu koji kombinuje profesionalnost i bliskost.
• Svaka sekcija povezana logički i vizuelno sa celinom sajta.

👥 2. Kategorisano članstvo

• Poseban akcenat na prikaz članova po kategorijama (pravna lica, fizička lica, simpatizeri…).
• Vizit kartice članova sa logotipima, imenima, funkcijama, i eventualnim linkom ka firmi/organizaciji.
• Spremnost da u budućnosti platforma podrži i log-in za članove radi dodatnih pogodnosti.

📆 3. Prikaz događaja

• Jasna podela na formalna okupljanja, neformalne susrete i konferencije.
• Svaka vrsta događaja ima svoju strukturu – sa programom, mestom, vremenom, CTA dugmadi i galerijom prethodnih susreta.

🌐 4. Digitalna platforma kao posebna sekcija sajta

• Mesto gde članovi pristupaju: forumima, resursima, internim materijalima, alatima za saradnju.
• Ovo postaje centar za digitalnu komunikaciju i podršku članovima.

🧩 5. CPP e-Razvoj – poslovna podrška

• Nova sekcija za komercijalne usluge: konsalting, digitalna transformacija, mentorstvo, edukacije.
• CTA dugmad vode ka email kontaktima za direktnu saradnju (cpp@erazvoj.com).

📝 6. Blog – tematski, edukativan i SEO optimizovan

• Autorski tekstovi članova Udruženja.
• Razvrstani po temama (digitalizacija, AI, preduzetništvo, studije slučaja…).
• Svaki članak ima SEO-friendly naslov, description, slike sa alt tekstovima i internim linkovima.

📩 7. Kontakt sekcija sa naprednom validacijom

• Forma za kontakt sa reCAPTCHA zaštitom (v2).
• Jasna segmentacija: opšti upiti, mediji, partnerstva.
• Prikaz lokacije Udruženja, društvene mreže i brzi kontakti.

📱 8. Potpuno responzivan dizajn

• Dizajniran tako da radi savršeno na: mobilnim telefonima, tabletima i desktop računarima.
• Fiksna header-bar, hamburger meni za mobilne, intuitivna navigacija.
• Pojedinačne stilizacije za sve uređaje sa testiranjem u realnom vremenu.

🔧 9. Potpuna kontrola nad svakim elementom

• Nijedan deo sajta ne zavisi od trećih servisa (osim gde je to neophodno kao Google reCAPTCHA).
• Sva optimizacija (SEO, brzina, dizajn) u našim rukama – zahvaljujući razvoju od nule.

Ova analiza i planiranje su bile srž našeg pristupa – ništa nije prepušteno slučaju.
Kao što kuća ne počinje od krova, tako ni sajt ne počinje od banera.
Mi smo krenuli od temelja – strukturirano, promišljeno i posvećeno, s vizijom koja je jasno rekla:

„Ovo nije samo naš sajt. Ovo je digitalni dom cele zajednice.“

3. Izgradnja sistema od nule

Kako smo liniju po liniju izgradili sopstveni digitalni svet

U eri instant rešenja i gotovih CMS-ova, mi smo – svesno i tvrdoglavo – odabrali drugi put. Put potpunog ručnog razvoja, bez WordPress-a, bez šablona, bez zavisnosti od gotovih tema.

Zašto? Zato što smo želeli potpunu kontrolu, minimalan kod, maksimalnu fleksibilnost, i – ono najvažnije – duboko razumevanje svakog dela sajta koji gradimo.

🔧 HTML: Semantika, struktura i modularnost

Svaka stranica sajta rađena je ručno, sa pažljivo odabranom semantikom.
Od <!DOCTYPE html> do poslednjeg </footer>, kod je pisan tako da ima smisao, logiku i održivost.

Ključne karakteristike HTML pristupa:

• Modularna struktura svih stranica:
  Svaki HTML dokument sadrži standardne semantičke delove:
  <header>, <nav>, <main>, <section>, <footer>, sa konzistentnim redosledom i klasama.
• Kompletan set komentara:
  Koristili smo jasne komentare u svakom većem bloku (npr. <!– Sekcija: Hero slajder –>) radi lakšeg održavanja i timske saradnje.
• SEO opis za svaku stranicu:
  Svaka stranica ima svoj jedinstveni <meta name=“description“> pažljivo formulisan u idealnom rasponu 150–160 karaktera.

📄 Stranice: Obim, organizacija i modularna gradnja

Ukupno je izrađeno preko 40 zasebnih HTML stranica, od kojih je svaka razvijena ručno i nezavisno, bez uplitanja CMS-a ili automatski generisanog sadržaja. Svaka stranica je logički modularna, vizuelno dosledna i funkcionalno povezana sa celokupnim sistemom.

Organizaciona struktura sajta raspoređena je na tri jasno definisana segmenta:

1. Glavni domen – erazvoj.com
   Obuhvata primarni sadržaj sajta Udruženja, uključujući:
   • Naslovnu stranicu
   • Stranice o Udruženju, članstvu, događajima, CPP e-Razvoj, digitalnoj platformi, kontakt formu itd.
2. Poddomen za blog – blog.erazvoj.com
   Namenjen objavi autorskih tekstova, stručnih članaka, analiza i osvrta na aktuelne digitalne i društvene teme. Svaki blog članak ima svoju SEO-optimizovanu stranicu, sa pravilnom strukturom naslova, meta podacima i integrisanim Open Graph tagovima.
3. Poddomen za forum – forum.erazvoj.com
   Realizovan kroz phpBB, sa posebnim stilskim i tehničkim prilagođavanjima kako bi se uklopio u vizuelni identitet sajta. Forum funkcioniše kao mesto za razmenu znanja, interakciju među članovima i produbljivanje zajednice.

 

Sistemski pristup razvoju stranica: struktura, konzistentnost i odrivost

Od samog početka, bilo nam je jasno da ne gradimo samo vizuelnu fasadu — već sistemski front-end okvir, koji mora da bude dosledan, efikasan i lako održiv. Svaka pojedinačna HTML stranica tretirana je kao nezavisna jedinica, ali istovremeno i kao deo integrisanog sistema.

📌 Ključni principi:

• Dosledna struktura svih HTML stranica (<html lang=“sr“>, <meta charset=“UTF-8″>, <main> kao jezgro sadržaja).
• Precizna hijerarhija zaglavlja (h1–h6) – bez preskakanja nivoa.
• Funkcionalna navigacija na svim rezolucijama, bez obzira na kompleksnost stranice.
• Centralizovani CSS i JS linkovi koji se logički učitavaju u svakoj stranici.

🔷 Organizacija <head> sekcije: savršena ravnoteža između optimizacije i strukture

Jedna od stvari na koju smo posebno ponosni jeste način na koji smo koncipirali <head> deo svake stranice. Tu se susreću SEO, UX, performanse i standardi pristupačnosti.

Ključni elementi svakog <head> bloka:

html

CopyEdit

<head>

  <meta charset=“UTF-8″>

  <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

  <title>Konferencija e-Razvoj 2025 – Inovacije u poslovanju</title>

  <meta name=“description“ content=“Zvanična stranica Konferencije e-Razvoj 2025. Prijavite se, saznajte više o programu i govornicima. Tema: AI i održive tehnologije.“>

  <!– Open Graph meta –>

  <meta property=“og:title“ content=“Konferencija e-Razvoj 2025″>

  <meta property=“og:description“ content=“Zvanična stranica Konferencije e-Razvoj 2025. Tema: AI i održive tehnologije u poslovanju.“>

  <meta property=“og:image“ content=“https://erazvoj.com/assets/img/og-konferencija2025.jpg“>

  <meta property=“og:url“ content=“https://erazvoj.com/konferencija/erazvoj2025″>

  <meta name=“twitter:card“ content=“summary_large_image“>

  <!– Favicon i manifest –>

  <link rel=“icon“ href=“assets/favicon.ico“ type=“image/x-icon“>

  <link rel=“manifest“ href=“site.webmanifest“>

  <!– Preload kritičnih resursa –>

  <link rel=“preload“ href=“fonts/poppins.woff2″ as=“font“ type=“font/woff2″ crossorigin>

  <link rel=“preload“ href=“css/style.css“ as=“style“>

  <!– CSS –>

  <link rel=“stylesheet“ href=“css/style.css“>

</head>

🛠 Detaljna objašnjenja:

• <meta name=“description“>:
  Za svaku stranicu pažljivo je napisan jedinstveni opis, u skladu sa SEO smernicama — dužine 150–160 karaktera, sa ključnim pojmovima pozicioniranim ka početku rečenice.
  Ovaj opis ne samo da pomaže pretraživačima, već direktno utiče na CTR (click-through rate) u rezultatima pretrage.
• Open Graph i Twitter meta:
  Omogućavaju da se stranice pravilno prikazuju prilikom deljenja na društvenim mrežama, sa unapred definisanim naslovom, opisom i slikom.
• Preload za performanse:
  Preload linkovi za fontove, najvažnije stilove i čak slike u nekim slučajevima, omogućavaju brže učitavanje sajta i bolji korisnički osećaj.
• Manifest fajl (site.webmanifest):
  Postavljen za podršku „Add to Home Screen“ funkciji na mobilnim uređajima, čime platforma dobija ponašanje aplikacije.
• Favicon i fallback:
  Postavljeno u više formata (.ico, .png, .svg), uključujući i Apple Touch ikone.

📐 Doslednost i fleksibilnost:

Zahvaljujući tome što je <head> deo svake stranice imao standardizovanu osnovu, svaka nova stranica mogla se generisati sa minimalnim rizikom od zaboravljenih elemenata. Ujedno, omogućili smo sebi prostor za buduća proširenja (npr. dodavanje structured data u JSON-LD formatu, koji je već u planu).

✅ Zaključak ovog dela:

Ova vrsta sistemskog pristupa — od <head> sekcije pa sve do <footer> — nije samo estetska stvar. To je fundament skalabilnosti.

Zahvaljujući ovoj arhitekturi:

• lakše dodajemo nove stranice bez bojazni da nešto „pokvarimo“,
• SEO ocena sajta raste sa svakom optimizacijom, a ne nazaduje,
• svaka stranica radi brzo, stabilno i pouzdano,
• a korisnici i članovi Udruženja osećaju kvalitet koji ne moraju ni da imenuju – ali ga osećaju kroz brzinu, jasnoću i jednostavnost.

🎨 CSS: Precizna segmentacija i dokumentovana arhitektura

Možda najzahtevniji deo razvoja bio je dizajn i organizacija CSS fajlova – jer tu se najlakše gubi kontrola. Mi smo odlučili da ne pišemo sve u jedan fajl, već da sistem razložimo modularno i logično.

Glavni principi:

• Višefajlna struktura sa @import logikom:

css

CopyEdit

@import url(‘reset.css’);

@import url(‘body.css’);

@import url(‘accessibility.css’);

@import url(‘header.css’);

@import url(‘nav.css’);

@import url(‘footer.css’);

@import url(‘hero.css’);

…

@import url(‘responsive-pc.css’);

@import url(‘responsive-tablet.css’);

@import url(‘responsive-mob.css’);

• Preko 25 tematski organizovanih CSS fajlova, uključujući:
  • buttons.css, forms.css, intro.css, mission.css, news.css, gallery.css, privacy.css, scrolltop.css, traka.css, stats.css…
  • Svaki fajl nosi svoje ime po funkcionalnoj zoni – lak za održavanje i nadogradnju.
• Detaljna dokumentacija unutar svakog fajla:

css

CopyEdit

/* === Sekcija: CTA dugmad === */

.cta-button {

  background-color: #742d8a;

  …

}

• Finalna minifikacija CSS fajlova:
  Korišćeni alati za kompresiju i purge viškova kako bismo poboljšali performanse bez gubitka stila.

📱 Responsivnost: Dizajn koji ne puca ni na jednom ekranu

Testirali smo svaki piksel na:

• desktop rezolucijama (Full HD i veće),
• tablet uređajima (horizontalno i vertikalno),
• mobilnim telefonima različitih dijagonala.

Ključni elementi:

• Fiksirani header-bar visine 40px
• Hamburger meni koji se ponaša različito po uređaju:
  • Klik na mobilnim
  • Hover na desktopu
• Posebni fajlovi za različite uređaje:
  • responsive-pc.css
  • responsive-tablet.css
  • responsive-mob.css → najdetaljnije podešen fajl, optimizovan padding-top, font-size, z-index slojevi, pozicioniranje menija

Sve stranice su testirane u realnim browserima + dodatno u DevTools režimu za simulaciju ponašanja na različitim rezolucijama.

⚙️ JavaScript: Pametan, čist i lagan

Iako je bilo izazova, odlučili smo da JavaScript koristimo samo kad je neophodno, i to na minimalistički način.

Naša JS logika uključuje:

• Hero slajder (automatski prelazi + kontrole preko strelica)
• Dugme za skrol na vrh (vidljivo tek kad se korisnik pomeri)
• Mobilna navigacija sa dinamičkim prikazom podmenija
• Deferred loading svih JS fajlova koji nisu ključni za first paint

Tehnički detalji:

• Dilema: jQuery vs. vanilla JS → odlučili smo se za vanilla, uz pisanje čistih, razumljivih funkcija koje ne zavise od biblioteka.
• JS fajlovi razdvojeni po funkcijama:
  • slider.js, scrolltop.js, menu.js, form-validation.js, recaptcha-handler.js

🧩 Dodatne tehničke komponente: Sitnice koje čine razliku

• site.webmanifest za instalaciju sajta kao aplikacije na mobilne uređaje
• .htaccess pažljivo izrađen:
  • sigurnosne politike (HSTS, nosniff, referrer-policy)
  • redirekcije i fallback stranice
  • error handling sa stranicama: 400.shtml, 401.shtml, 403.shtml, 404.shtml, 500.shtml, 503.shtml
• robots.txt i XML sitemap pažljivo strukturisani za pravilno indeksiranje
• Preload kritičnih fontova i fajlova radi performansi (rel=“preload“)

🐛 Greške, lekcije i napredak

Svašta smo prošli:

• overflow: hidden; na pogrešnom mestu nam je zaklonio pola slajdera
• meta description na par stranica duži od 200 karaktera → penal u SEO alatima
• position: fixed; je ponekad znao da „odlepi“ sve što smo trudom poravnali
• z-index ratovi – dok ne postignemo konačni mir u header zoni

Ali najvažnije: nismo odustajali.

Za svaki problem, tražili smo sistemsko, dugoročno rešenje. Često i unapredili strukturu da bismo izbegli buduće greške.

Ova faza bila je najzahtevniji i najduži deo procesa, ali i najplodonosniji. Naučili smo više nego što se može preneti u jednom tekstu. I upravo zato – ovo poglavlje čini srž cele studije.

4. Borba sa izazovima

Kad ti linija koda pokvari veče – ali i napravi te boljim

Tokom pet meseci razvoja nove web platforme, ništa nije išlo glatko — ali sve je išlo napred. Svaki izazov je bio deo procesa učenja i dokaz da se istinska vrednost platforme ne nalazi samo u završnom proizvodu, već i u načinu na koji smo do njega stigli.

Ovo poglavlje beleži naše najveće „bitke“, one koje nisu vidljive na ekranu, ali su se vodile u svakoj liniji koda, svakom inspekcijskom alatu i svakom testiranju na tri različita uređaja istovremeno.

❗ Navigacija: Mali meni, velika glavobolja

Navigacija je bila prva i najtvrdoglavija prepreka. Delovalo je jednostavno: fiksiran header-bar, logo levo, meni desno, podmeniji ispod. A u praksi?

Problemi:

• z-index nesklad: meni se povremeno prikazivao iznad hedera, a zatim ispod hero sekcije, kao da se igra žmurke s korisnikom.
• Mobilni prikaz: hamburger dugme je „bežalo“ iz okvira, a klikom na stavke podmeniji se nisu otvarali – ili su otvarali sve, ili nijedan.
• Klik vs. hover dilema: ponašanje menija se razlikovalo na desktopu, tabletu i telefonu, što je dovodilo do nesigurne UX logike.

Rešenja:

• Implementiran reset CSS kako bi se izbegli nasleđeni stilovi browsera.
• Dodata JS logika za mobilni klik, dok desktop koristi čist CSS :hover.
• Fiksiranje nav pozicije u odnosu na visinu header-bar (40px).
• Reorganizacija strukture <ul><li> i jasno razdvajanje nivoa menija.

➡️ Naučili smo da je navigacija najkompleksniji deo sajta — ne po dužini koda, već po broju sitnih zavisnosti koje moraš pomiriti.

❗ Slajder: Magično nestajanje

Naš hero slajder (glavna vizuelna atrakcija na naslovnim i tematskim stranicama) je na početku radio… samo prvi slajd. Ostali su se sakrili kao da ih je sramota da se pojave.

Problemi:

• Samo prvi slajd se prikazivao – svi ostali su ostajali skriveni.
• Nakon jednog ciklusa, ekran bi ostao prazan — tzv. „bela rupa“.
• Navigacione strelice nisu reagovale, a setInterval funkcija se preklapala.

Rešenja:

• Ispravljen redosled display: none / block u CSS i JS logici.
• Dodata JS provera da se prvi slajd inicijalno postavi sa klasom active.
• Napravljen reset() deo funkcije koji vraća redosled nakon poslednjeg slajda.

➡️ Slajder je naučio nas – da ono što vizuelno izgleda jednostavno, iza scene zahteva preciznu logiku i savršeno tempiranje.

❗ Dugme za povratak na vrh: Kad se vrh ne vidi

Dugme koje vodi korisnika nazad na početak stranice (scroll-to-top) na papiru deluje jednostavno. A mi smo ga usavršavali – u fazama bola i pobeda.

Problemi:

• Dugme se nije prikazivalo – zaboravili smo z-index, ili ga position: absolute bukvalno „zaturilo“.
• U sledećoj verziji dugme se deformisalo – izgubilo border-radius i podsećalo na izduženu tabletu.
• Na mobilnim uređajima se preklapalo sa footerom.

Rešenja:

• Pozicionirano sa position: fixed i bottom: 30px; right: 20px, izvan bilo koje sekcije.
• Dodata transition animacija i opacity za mekši prikaz.
• Korišćen flexbox centar unutar dugmeta da bi ikonica bila savršeno centrirana.

➡️ Male stvari čine veliku razliku – a jedno dugme može ruinirati UX ako mu ne daš dovoljno pažnje.

❗ SEO: Pretraživači ne praštaju

Google PageSpeed Insights i Semrush bili su naši najstroži profesori. Svaki alt koji fali, svaki JS koji se učitava bez defer, svaka preteška slika — odmah ocena niža.

Google PageSpeed je tražio:

• Minifikaciju CSS i JS fajlova → postignuto bez gubitka funkcionalnosti.
• Lazy loading slika – uvedeno sa loading=“lazy“ atributom.
• Alternativni tekst (alt) za svaku sliku – što je uključivalo i ilustracije, ikone, banere, profile članova.
• Interno linkovanje: povezane sve tematski srodne stranice, bez praznih veza.
• XML sitemap – generisan ručno, sa prioritetima i ažuriranjima.

Dodatni izazovi:

• Dupli <title> tagovi na nekim stranicama zbog copy/paste grešaka.
• meta description duži od 180 karaktera – korigovan.
• canonical linkovi uvedeni gde je postojala mogućnost dupliranog sadržaja.

➡️ SEO nas je naterao da budemo detaljniji, pažljiviji i pametniji — i to u svakom detalju, čak i onima koje korisnik nikada ne vidi.

🔚 Zaključno o izazovima:

Svaki od ovih problema mogao je da se “zaobiđe” na brzinu. Ali mi nismo hteli prečice. Hteli smo da naučimo zašto nešto ne radi – i kako da ga popravimo na pravilan način.
To nas je, više nego bilo šta drugo, naučilo kako da razmišljamo kao sistemski graditelji, a ne samo kao dizajneri ili koderi.

Ova faza — iako najfrustrirajuća — bila je najobrazovnija.

5. Sadržaj i korisničko iskustvo: Balans između informativnog i privlačnog

U svetu u kojem je pažnja valuta, a “bounce rate” ne prašta, znali smo da moramo pronaći ravnotežu između bogatstva informacija i lakoće korišćenja. Cilj nam nije bio samo da prikažemo šta Udruženje e-Razvoj jeste, već da korisnika povedemo kroz priču, da oseti svrhu zajednice, a ne da je samo pročita.

📚 Struktura sadržaja: logično, pregledno, tematski povezano

Svaka stranica je pažljivo pisana sa sledećim principima na umu:

• Kratki uvodi, jasno istaknut naslov (<h1>), potom segmentirani sadržaj sa podnaslovima (<h2>, <h3>) i logičkim odeljcima (<section>).
• Lista i ikone tamo gde je potrebno skeniranje informacijama (npr. prednosti članstva, tipovi usluga, funkcije članova).
• Pozivi na akciju (CTA) su pozicionirani prirodno – na mestima gde korisnik ima najviše interesa da klikne.
• Unutrašnje povezivanje (internal linking): svaki deo sajta vodi ka drugom logički povezanom delu – bez zatvorenih ćorsokaka.

✍️ Kvalitet sadržaja: jasno, fokusirano i razumljivo

Znali smo da korisnik:

• nema vremena za čitanje „eseja“,
• ali ni koristi od praznih rečenica.

Zato smo pazili da svaka rečenica ima svrhu – da informiše, motiviše, ili vodi ka sledećem koraku.

Tonski balans smo postigli kombinacijom:

• institucionalnog glasa (gde je u pitanju predstavljanje Udruženja),
• prijateljskog tona (gde se korisnik poziva da se uključi),
• i stručnog izraza (u prezentaciji CPP e-Razvoj, digitalne platforme, usluga, konferencija…).

💡 Ključni sadržajni segmenti koji oblikuju iskustvo korisnika

🔹 Sekcija „O nama“

• Sadrži pregled misije, vizije, istorijata i tima Udruženja.
• Korišćen blag narativni ton, uz ključne podatke za kredibilitet (osnivanje, članstvo, upravni odbor).
• Povezana direktno sa segmentima kao što su „Fond e-Razvoj“, „CPP e-Razvoj“, „Inovacioni centar“.

🔹 Članstvo i članovi

• Kategorizovani prikazi članova po vrsti i veličini (fizička/pravna lica).
• Jasno definisani koraci za učlanjenje.
• Istaknute koristi za članove, uključujući promociju, popuste, pristup platformi i networking događaje.

🔹 Događaji

• Formalni i neformalni susreti sa sopstvenim vizuelnim identitetom.
• Stranice konferencija (npr. e-Razvoj 2025) sa sekcijama: o konferenciji, program, predavači, prijava, kontakt.
• CTA dugmad i PDF dokumenti sa agendom – jasno pozicionirani i funkcionalni.

🔹 CPP e-Razvoj – poslovne usluge

• Jasna prezentacija usluga po oblastima (pravne, finansijske, digitalne, marketinške…).
• Profesionalna terminologija, ali s merom – da klijent zna šta dobija.
• CTA dugmad vode direktno na kontakt e-mail: cpp@erazvoj.com.

🔹 Blog e-Razvoj

• Edukativni i inspirativni tekstovi članova i stručnjaka.
• Svaki članak: naslov, autor, datum, slika, podnaslovi, unutrašnje veze.
• Korišćen narativni stil – priče iz prakse, studije slučaja, komentari na aktuelna digitalna dešavanja.

🔹 Digitalna platforma

• Pristupni deo za buduće funkcionalnosti: log-in, biblioteka resursa, forum, alati za članove.
• Jasna vizija predstavljena jednostavnim jezikom, da korisnik zna šta ga čeka.

🧠 UX pravila kojih smo se držali

• Prvo što korisnik vidi = najvažnija informacija (princip inverzne piramide).
• Bez „tekstualnih blokova“ – umesto toga: kraći pasusi, vizuelna hijerarhija, bele površine.
• Navigacija kao sidro korisniku: uvek zna gde je i gde može dalje.
• Ikone i ilustracije kao pomoćna sredstva – ne kao ukrasi.

🧪 Testiranje sadržaja: korisnik je u centru

Pre objave svakog segmenta, pitali smo se:

• Da li korisnik zna gde se nalazi?
• Da li zna koji je sledeći korak?
• Da li može da dođe do željene informacije za manje od 3 klika?
• Da li bi pročitao tekst do kraja?

Odgovori su nas vodili u:

• skraćivanja,
• dodavanje alt opisa za slike,
• zamenu rečeničnih konstrukcija koje „zvuče lepo“ sa onima koje pomažu korisniku.

✅ Zaključak: Sadržaj i UX kao najvažniji savez

Možemo imati savršeno napisan kod, ali bez smislenog i korisniku prilagođenog sadržaja — platforma ne živi.

Zato smo ovom segmentu pristupili kao strateškom jezgru, ne kao dekoraciji. Sve što je napisano na sajtu — ima razlog, ima poziv i ima ritam.

Na kraju, kada korisnik ne kaže „sajt izgleda lepo“, već kaže „brzo sam pronašao sve što mi treba“, tada znamo da je UX pobedio.

6. Digitalni stubovi sajta

Blog i Forum kao temeljni kanali reputacije, znanja i dijaloga

Kada je Udruženje e-Razvoj krenulo u digitalnu transformaciju, jedna od ključnih ideja bila je:

„Ne samo prikazati ko smo – već pokazati kako razmišljamo.“

Upravo zato smo osmislili dva komplementarna kanala: Blog e-Razvoj i Forum e-Razvoj. Prvi služi da inspiraciju i znanje artikulišemo i podelimo, a drugi da članovi uzmu učešće i razgovaraju – u realnom vremenu, kao zajednica.

🧠 Blog e-Razvoj: Glas autoriteta, alat znanja

Blog nije ni PR ni reklama. On je dnevnik stručnosti, mesto gde članovi Udruženja mogu da podele svoje znanje, iskustva, uvide i analize.

🔹 Ključne karakteristike Bloga:

• Autorski sadržaj: svi tekstovi su napisani od strane članova Udruženja, saradnika ili pozvanih stručnjaka. Nema „generisanih“ tekstova – svaka reč ima lice, ime i biografiju.
• Tematska kategorizacija:
  • Digitalna transformacija
  • AI i održive tehnologije
  • Studije slučaja članica
  • Preduzetništvo i inovacije
  • Komentari i osvrt na aktuelnosti
• SEO optimizacija svakog posta:
  • Prilagođeni <title> i meta description za svaku objavu
  • alt opisi za sve ilustracije i grafike
  • Interno linkovanje ka povezanim temama na sajtu
  • Optimizovana struktura sadržaja: uvod, podnaslovi, CTA (npr. „Pratite nas na forumu“, „Pročitajte srodni članak“)
• Prepoznat kao alat za reputaciju i edukaciju:
  Blog je postao način da Udruženje istupi kao misaoni lider u oblasti digitalnog razvoja, AI transformacije i umrežavanja.
  Posebno se ističu članci koji prenose iskustva sa konferencija, projekata članica i razvojnih inicijativa Udruženja.
• Jednostavan CMS izgrađen ručno:
  Svaki članak je statička HTML stranica – ručno optimizovana, ali sa unapred definisanim šablonom za brzo dodavanje i održavanje.

➡️ Blog e-Razvoj nije marketinški dodatak – on je produžena ruka naše misije.

🗣️ Forum e-Razvoj: Mesto susreta i stvaranja dijaloga

Blog je jednokratan glas – ali Forum je stalni razgovor. On predstavlja prvi digitalni prostor za članove Udruženja da se međusobno upoznaju, razmenjuju mišljenja, postavljaju pitanja i stvaraju nove ideje.

🔹 Implementacija foruma:

• Platforma: phpBB (self-hosted), zbog stabilnosti, sigurnosti i širokih mogućnosti prilagođavanja.
• Poddomen: forum.erazvoj.com — jasno odvojen i posvećen prostor zajednici.

🔹 Struktura foruma:

• Predstavite se e-Razvoj zajednici  – forum za nove članove i upoznavanje
• Digitalni razvoj i AI teme – razmena znanja, novosti, trendova
• Networking i saradnja – povezivanje, poslovne ponude, zajednički projekti
• Pitanja i podrška – pomoć oko rada na sajtu, savetovanja, tehnička pitanja

🔹 Prilagođavanja i personalizacija:

• Stilizacija u skladu sa identitetom Udruženja:
  • Glavna boja foruma: #742d8a (brend boja Udruženja)
  • Avatar ikone u unificiranom vizuelnom stilu, bez teksta, uz lagani dizajn
  • Vizuelna integracija sa glavnim sajtom kroz prilagođeni stylesheet.css i header izgled
• Prava korisnika i sigurnost:
  • Detaljno podešene grupe korisnika (gosti, registrovani, administratori)
  • Antispam zaštita, aktivacija naloga, verifikacija email adresa
  • Pripremljena moderacija i smernice ponašanja

🔹 Značaj foruma:

• Forum je prvi interaktivni stub zajednice — mesto koje živi, koje se razvija kroz diskusije i koje pruža članovima priliku da budu deo priče, ne samo publika.
• Otvorio je prostor za buduće integracije: uvođenje privatnih poruka, tematskih podforuma, mesečnih online susreta.

➡️ Forum je tačka gde sajt prestaje da bude informacija – i postaje komunikacija.

✅ Zaključak: Zajednica nije gumb – to je prostor

Blog i Forum nisu dodaci, već stubovi digitalnog identiteta Udruženja e-Razvoj.
Oni predstavljaju prirodno proširenje vizije platforme: da se znanje deli, da se iskustvo dokumentuje, i da svako ima glas.

U vremenu društvenih mreža koje su brze, površne i često toksične — mi smo izgradili prostore koji su trajni, smireni i smisleni.

7. Tehnička infrastruktura

Stabilan, siguran i performantni temelj ispod digitalne arhitekture

Kao što nijedna zgrada ne stoji bez temelja i instalacija koje korisnici ne primećuju, tako ni web platforma ne može biti ozbiljna bez jake tehničke osnove. Sve ono što se nalazi „ispod haube“ — a nismo ga želeli prepustiti slučaju — pažljivo je implementirano kako bismo osigurali: brzinu, bezbednost i pouzdanost.

🔐 1. .htaccess sigurnosni i sistemski parametri

Jedan od prvih i najvažnijih zadataka u fazi produkcije bio je precizan rad na .htaccess fajlu. Nismo želeli samo redirekcije — želeli smo kontrolisanu, sigurnu i validnu komunikaciju na serverskom nivou.

Implementirani parametri:

apacheconf

CopyEdit

# Zabrana MIME-type sniffovanja

Header set X-Content-Type-Options „nosniff“

# HSTS – obavezni HTTPS na svim poddomenima

Header always set Strict-Transport-Security „max-age=31536000; includeSubDomains; preload“

# Referrer policy – zaštita korisničkih podataka

Header always set Referrer-Policy „strict-origin-when-cross-origin“

# Default charset

AddDefaultCharset UTF-8

# Error fallback stranice

ErrorDocument 400 /400.shtml

ErrorDocument 401 /401.shtml

ErrorDocument 403 /403.shtml

ErrorDocument 404 /404.shtml

ErrorDocument 500 /500.shtml

ErrorDocument 503 /503.shtml

Efekti:

• HTTPS je postao obavezan, čak i za najdublje podstranice i poddomene.
• Zloupotreba MIME-type rušenja formata onemogućena.
• Precizne fallback stranice: korisnici ne završavaju na praznom ekranu, već na stilizovanoj stranici sa objašnjenjem i opcijom za povratak.

📱 2. Favicon i Apple Touch ikonice

Detalj koji mnogi zanemaruju — ali koji čini razliku u utisku ozbiljnosti.

• Postavljeno više formata favicon ikonica (.ico, .png, .svg) za kompatibilnost sa različitim browserima i uređajima.
• Dodate apple-touch-icon varijante (120×120, 180×180) za savršeno prikazivanje na iOS home ekranima.

html

CopyEdit

<link rel=“icon“ href=“assets/favicon.ico“ type=“image/x-icon“>

<link rel=“apple-touch-icon“ sizes=“180×180″ href=“assets/icons/apple-touch-icon.png“>

➡️ Detalj koji omogućava da korisnik „instalira“ platformu na početni ekran svog mobilnog kao da je aplikacija.

⚡ 3. Preload ključnih fontova i resursa

Performanse nisu bile luksuz — bile su obaveza.

• Koristimo Google fontove Poppins i Lora — ali ih učitavamo lokalno, radi bržeg responzivnog vremena i nezavisnosti od CDN problema.
• Korišćen je rel=“preload“ za ključne fontove i CSS fajlove kako bi se ubrzao prvi vizuelni prikaz stranice (FCP – First Contentful Paint).

html

CopyEdit

<link rel=“preload“ href=“fonts/poppins.woff2″ as=“font“ type=“font/woff2″ crossorigin>

<link rel=“preload“ href=“css/style.css“ as=“style“>

➡️ Time se postiže efekat da korisnik vidi sadržaj već u prvoj sekundi učitavanja — bez flešovanja neformatiranog teksta (FOIT/FOUC efekti).

🔒 4. Potpuna HTTPS enkripcija sajta

• Sve stranice, poddomene i podfolderi funkcionišu isključivo pod HTTPS protokolom, sa validnim i automatski obnovljivim SSL sertifikatom.
• http varijante automatski se redirektuju (301 permanent redirect) na https.

To je garant:

• sigurnosti korisničkih podataka,
• poverenja pretraživača i browsera (nema „Not Secure“ oznaka),
• ispunjenja svih savremenih SEO i UX standarda.

🛑 5. Error fallback stranice: kad nešto ipak krene po zlu

Iako je sve testirano i funkcioniše besprekorno, spremili smo se i za neočekivano. Zato smo dizajnirali sopstvene fallback stranice za sve najčešće HTTP greške.

Implementirane stranice:

• 400.shtml – Loš zahtev (npr. pokvaren parametar u URL-u)
• 401.shtml – Neautorizovan pristup
• 403.shtml – Zabranjen pristup
• 404.shtml – Stranica ne postoji (personalizovana stranica sa CTA dugmetom za povratak)
• 500.shtml – Serverska greška (opet – sa uputstvom za korisnika)
• 503.shtml – Privremeno nedostupno (npr. u fazi održavanja)

➡️ I kad se nešto pokvari – korisnik se ne oseća izgubljeno.

✅ Zaključak: Tehnička tišina koja garantuje sigurnost

Sve što smo opisali u ovom poglavlju korisnik ne primećuje kad sve radi kako treba — i to je poenta.
Ove tehničke postavke čine razliku između sajta koji je „ok“ i sajta koji ima temelj za ozbiljan rast, održavanje i sigurnost.

Ovo je infrastruktura koja ne vrišti, već tiho i pouzdano podržava sve ostalo.

8. Zaključak: Naučene lekcije i ponos

Od prazne mape do funkcionalne digitalne teritorije

Pet meseci.
Skoro svakodnevnog rada, istraživanja, testiranja, rušenja i podizanja iznova.
Više od 50 HTML stranica.
Preko 30 CSS fajlova — pažljivo organizovanih, dokumentovanih i minifikovanih.
Funkcionalni JavaScript, reCAPTCHA, strukturalni SEO.
Tri poddomena, jedan sajt — naš sajt.

I ne, nije to bio samo „još jedan projekat“. Ovo je bila platforma u punom smislu te reči: digitalni temelj jedne zajednice, zamišljen i ostvaren sopstvenim rukama, red po red, sa dušom i svrhom.

🎯 Naučili smo mnogo — i to su lekcije koje ostaju

1. Kako napraviti čvrstu osnovu za budući razvoj

Nismo radili brže da bismo završili, već sporije da bismo gradili temelj. Sada znamo da sistem koji ima logiku i strukturu — raste lakše i bez straha od urušavanja.

2. Kako eliminisati višak i zadržati suštinu

Jedan od najvažnijih uvida: ne mora sve da piše — ali sve mora da se zna. Naučili smo da izbacimo ukrase koji ne služe svrsi, i zadržimo one koji pomažu korisniku, poruci, funkciji.

3. Kako se ne sme žuriti sa rešenjima

Bilo je trenutaka kad smo mogli „na brzinu“ da rešimo nešto. Ali nismo. Odabrali smo da razumemo, pa tek onda implementiramo. Taj put je sporiji — ali dugoročno nepobediv.

4. Kako da dizajn prati strategiju — a ne obrnuto

Previše sajtova danas izgleda lepo, ali ne zna zašto to radi. Mi smo krenuli od pitanja: Ko je korisnik? Šta želi? Gde klikće? Dizajn nije bio umetnost — bio je funkcionalna posledica misije Udruženja.

❤️ Iznad svega: Ponos

Ponos ne samo na kod. Nego na:

• sve bugove koje smo ispravili,
• sve mikroprobleme koje smo detektovali pre nego što postanu veliki,
• sve improvizovane kafe i čajeve u pauzama između z-index i media query,
• i sve male trenutke pobede kad „sve proradi kako treba“.

Ovaj sajt je više od tehničkog dostignuća. On je rezultat:

• saradnje bez prečica,
• vizije bez kompromisa,
• i učenja koje ne prestaje.

🔭 Šta dalje?

Ovo nije kraj. Ovo je verzija 1.0.

U budućnosti nas čekaju:

• funkcionalnosti za log-in članova,
• digitalne alatke u okviru platforme,
• napredne interaktivne komponente,
• i još više prostora za Blog i Forum kao jezgra zajednice.

Zato ovu studiju zatvaramo ne tačkom, već — dvotačkom.

Jer razvoj se ne završava. On se živi.

Autor studije: Slobodan Krstić, predsednik Udruženja e-Razvoj