Preskoči na sadržaj
Svi projekti

Sa Biologijom Na Ti

kopija

Migracija sajta na Astro, verifikacija vizuelne vernosti, deploy · 2026

Sajt škole za pripremnu nastavu i časove iz hemije i biologije, prepisan sa zatečenog stacka na statički Astro sajt bez ijedne vidljive promene.

sabiologijomnati.darjandrugarinovic.com

Sajt je verna kopija živog originala sahemijomnati.rs, objavljena na poddomenu dok se ne prebaci na produkcioni domen. Indeksiranje je blokirano, a analitika klijenta isključena, da kopija ne konkuriše originalu u pretrazi i ne puni njegove izveštaje.

Zadatak nije bio redizajn nego migracija: pet stranica plus custom 404 trebalo je prebaciti na Astro tako da se novi sajt vizuelno ne razlikuje od originala — isti layout, razmaci, boje, fontovi, tekst, slike i URL-ovi. Original je bio kompajlirani Tailwind uz veliki inline stil po stranici, sav responsive raspored početne vođen iz JavaScript resize handlera, a slike lekcija hotlinkovane sa poddomena aplikacije. Pošto se izgled ne sme promeniti, vernost se nije procenjivala na oko — merena je, i svako odstupanje je moralo da ima broj iza sebe.

Šta je urađeno

Vernost merena, a ne procenjena

Original i kopija se snimaju istom skriptom na 1440 i 390 piksela, pa se porede piksel po piksel. Rezultat je između 0.26 i 1.28 odsto razlike po stranici, a visina stranice se poklapa u piksel na svih pet stranica i obe širine. Snimanje je moralo da bude determinističko — čeka učitane fontove, forsira reveal animacije, zamrzava keyframe animacije i pauzira šest video snimaka — jer je bez toga svaki prolaz merio drugu fazu animacije, a ne razliku u izgledu.

Fontovi bajt-identični originalu

Gotov paket za Inter je druga verzija fonta — metrike su iste do treće decimale, ali obrisi glifova nisu, pa je razlika skakala na 2.62 odsto na 1440 i 5.00 odsto na 390 piksela, razmazana po celom telu teksta. Umesto njega se skidaju tačni woff2 fajlovi koje original dobija sa Google Fonts-a i generiše se sopstveni fonts.css: 13 fajlova i 54 font-face pravila, koliko ih original i učitava.

Responsive raspored iz JavaScripta u CSS

Original je 31 grid na početnoj postavljao iz resize handlera, pa se layout nije formirao dok se JS ne izvrši, a bez JavaScripta je telefon dobijao desktop raspored. U kopiji to rade CSS media upiti sa istim breakpointima i istim vrednostima. Prvo mapiranje je promašilo 15 gridova jer se postavljaju kroz petlju umesto direktnim pozivom — greška je bila merljiva, zaglavlje 1387 umesto 1546 piksela, pa je provera prebačena na poređenje izračunatih vrednosti umesto pretrage po kodu.

Slike lekcija odvezane sa poddomena aplikacije

Original je 77 slika lekcija i ikona kategorija vukao sa poddomena aplikacije, pa web strana nije bila samostalna. Te slike su prebačene lokalno, uz očuvanu strukturu foldera, a imena prevedena u bezbedan ASCII jer je original imao razmake i naša slova u imenima fajlova. Link ka portalu za polaznike je namerno ostao eksterni — to je aplikacija, ne asset.

Kopija koja ne šteti originalu

Poseban staging build gasi indeksiranje na tri nivoa — robots.txt, meta oznaka i HTTP zaglavlje — jer sama meta oznaka nikad ne bude pročitana kada je obilazak zabranjen, a briše i klijentove prave GA4 i Meta Pixel identifikatore, da posete kopiji ne ulaze u njegove izveštaje. Oba kvara izgledaju savršeno u pretraživaču, pa ih pred svaki deploy proverava skripta koja obara build ako išta nedostaje.

Zatečene greške popisane, ne tiho prepravljene

Na originalu je nađeno jedanaest problema: canonical na stranici hemije pokazivao je na adresu koja vraća 404, og:image je na svih pet stranica bio relativna putanja pa preview slika pri deljenju linka nije radila, jedan CTA je vodio na nepostojeću stranicu, a footer anchori su bili mrtvi na podstranicama. Očigledne ispravke su urađene i dokumentovane, uz redirekcije za stare adrese; ono što traži odluku vlasnika, poput kontrasta koji bi promenio izgled, ostavljeno je kako jeste i javljeno.

Tehnologije