Naš novi sajt | PC Press

Naš novi sajt

PC Press server primao je hiljade zahteva za pristup našem sajtu u vrlo kratkom vremenu. Ne, nije bio u pitanju (tako aktuelni) DOS napad, već završni radovi na novom sajtu časopisa „PC“.

002-1

Aleksandar Vacić je pre desetak godina u amanet autoru ovog teksta ostavio veliki posao brige za Web stranice časopisa „PC“. Sajt na (tadašnjoj) adresi www.pcpress.co.yu je bio jedan od prvenaca DHTML‑a i začetnik dinamičkog kreiranja sadržaja, nečega što je danas na Internetu uobičajeno. Mnogo je u međuvremenu urađeno na sajtu: prateći redizajne časopisa dodavane su razne rubrike i sekcije, ubacivani prateći sadržaji, doterivan izgled… Napravljen u vremenu kada je Windows 98 bio dominantan operativni sistem i kada su korisnici još pristupali Mreži preko Netscape Navigator‑a, sajt časopisa „PC“ je bez većih problema savladao sve izazove nastale tokom 13 godina, uz bezbrojne promene raznih Web tehnologija, pa i pojavu novih browser‑a poput Chrome‑a i Firefox‑a. U čemu je bila njegova snaga i šta smo iz nje mogli da naučimo pre nego što postavimo jednako snažne temelje novog sajta?

Poštovanje standarda

Kada sam davne 1998. pravio svoj prvi sajt – bila je to Sezamova (SezamPro) prognoza Svetskog prvenstva u fudbalu – učio sam nove stvari kao i svaki entuzijasta, da ne kažem kao dete koje je dobilo novu igračku. Isprobavao sam razne komande, stavljao sve što deluje interesantno i atraktivno. Ko se još seća midi‑melodija koje su znale da krase Web stranice devedesetih, Java applet‑a koji bi dočaravali efekte padanja snega, hrčaka koji igraju, potom unique IE komande marquee>> koja je omogućavala skrolovanje zadatog sadržaja preko stranice… U to doba sve je to delovalo kao vrhunac Web tehnologija, ali je ubrzo postajalo jasno da, kako vreme prolazi i kako kompanije izbacuju nove verzije browser‑a, neke stranice prestaju da rade kako su zamišljenje i prikazuju sadržaj razbacan po strani, te je potreba za održavanjem sajtova funkcionalnim uslovila usvajanje određenih konvencija.

Novi sajt časopisa PC, rađen u HTML5 tehnologiji uz kombinovanje PHP‑a, MySQL‑a i JavaScript‑a za brži i efikasniji prikaz sadržaja, u jednoj se  ključnoj stvari poklapa se sa starim – potpunom poštovanju standarda. Mnogi dizajneri, pa i sam autor ovog teksta, dugo nije zaista shvatao značaj standarda na Internetu. Glavno merilo da li je izrada bila uspešna bila je činjenica da se sajt prikazuje kako je zamišljen u svim browser‑ima. Bolje je misliti na budućnost – ako se držite usvojenih konvencija izrade stranice, vaš sadržaj će u svakom browser‑u, na svakoj platformi i za sva vremena biti prikazan isto, tačno onako kako želite.

Kao korisna alatka za dizajnere preporučuje se W3C Markup Validation Service (validator.w3.org) koji će parsirati vaš HTML kod i vratiti rezultate koji su u suprotnosti sa standardom, olakšavajući tako mukotrpnu potragu za greškama.

Kad sve radite sami…

Na samom početku se treba opredeliti za platformu na kojoj će sajt počivati. U doba široko rasprostranjenih i popularnih platformi kao što su WordPress, Joomla ili Drupal, teško je naći razloge za izradu sajta „od nule“. New York Post, CNN, NFL liga, Forbes i Time magazine samo su neki od preko 70 miliona korisnika WordPress‑a, koji je dovoljno moćna alatka da zadovolji potrebe kako Fortune 500 kompanija, tako i malih blogera. Neke procene čak govore da je u poslednje dve godine svaka četvrta objavljena stranica na Internetu upravo napravljena putem WordPress platforme. Njegovi kreatori su toliko ponosni na svoje mezimče da su čak predstavili interaktivnu mapu na kojoj možete pratiti aktivnost WordPress.com širom sveta, na adresi en.wordpress.com/stats/.

Zašto onda praviti kod sajta ručno, od nule? Postoji više razloga, a prvi i osnovni je uvek bila kontrola. Iako WordPress pruža naizgled bezbroj mogućnosti prilagođavanja, ako želite potpunu kontrolu nad vašim sadržajem od kreiranja do pojavljivanja na Internetu, uložićete trud da sami kreirate svoj sajt. Drugi i odlučujući faktor u našem slučaju bilo je očuvanje kontinuiteta sa starim sajtom i prikaz sadržaja u novom ruhu.

Izradu sajta započeli smo imajući ovo u vidu. Trebalo je iskoristiti sadržaj starog sajta, odvojiti korisno od beskorisnog i pripremiti ga za prikaz na novoj platformi, što nas vraća na početak ovog teksta. Umesto direktnog pristupanja bazi, kombinovanja SQL i MySQL platformi, čišćenja baze od starih BBcode‑type tagova, izabran je metod da se putem izrade Web crawler‑a i parsera skine kompletan sadržaj starog sajta, konvertuje u novi kodni raspored i potom filtrira ono što je potrebno i ubaci u novu bazu.

Čitav proces je dalje tekao tečno dok nije došlo na red usklađivanje nove Web baze sa bazom koja postoji u Redakciji. Ovaj deo je bio neophodan da bi se ispravile greške akumulirane tokom godina, ručnim prebacivanjem podataka iz jedne baze u drugu. A tek tu je počela prava noćna mora bagova i fikseva. Te jednom ispravkom se slučajno uklone prilozi uz tekstove, te sledećom se slučajno prepišu opisi tekstova, te su neki tekstovi greškom isečeni… Jedan za drugim, problemi su se nizali i pisan je skript za skriptom.

Autor ovog teksta otkrio je velike nedostatke obične MySQL UPDATE komande, koja je znala da izazove timeout pri ažuriranju velike količine podataka. Nekada se pribegavalo samo dodavanju set_time_limit() komande u skript, koja je sprečavala timeout tekuće operacije, ali za zahtevnije izmene na celoj bazi pisane su i odgovarajuće nested statements i kompleksniji join i unions koji su se pokazali neuporedivo bržim i efikasnijim u poređenju sa PHP skriptovima.

Završni radovi

Kako smo se bližili kraju posla, došlo je vreme za doterivanja i povezivanje sajta s društvenim mrežama uvođenjem Like i Share opcija. Zvuči jednostavno, ali najpopularnija mreža Facebook ujedno ima i najgori Help o tome kako postaviti i podesiti Share na sajtu. Ideja nije da samo stavite link koji će podeliti vašu stranicu na Facebook‑u, već da korisniku omogućite da sa što manje truda prenese što više korisnih informacija, te da se klikom na Share s vašeg sajta automatski preuzmu naslov teksta, opis i slika koja ide uz tekst. Da bi se to izvelo, ukratko rečeno, treba podesiti <meta> tagove u zaglavlju dokumenta koji će definisati ove varijable preko Open Graph protokola (opengraphprotocol.org).

macbook_air_mockup

Manjkavosti u Help‑u Facebook nadoknađuje alatkama, tako da smo korišćenjem Open Graph Debugger‑a (developers.facebook.com/tools/debug/) saznali da slike koje se koriste za preview teksta na PC sajtu (mahom preuzete sa starog sajta) veličine 100×100 piksela, nisu dovoljne za FB standarde i da on zahteva minimum 200×200 piksela. Kod je uspešno prilagođen, tako da se od sada prave veće sličice i forsira njihovo smanjivanje kroz CSS, a vama preporučujemo da uvažite ovu činjenicu pri dizajniranju sajta koji će imati opciju share‑ovanja na Facebook.

Na kraju puta, osim modernog dizajna koji je bio preko potreban našem sajtu, kao najvažnija izmena uveden je automatizovan sistem koji objedinjava put teksta od dolaska u PC do njegovog objavljivanja na Internetu. Dok čitate tekst, naši urednici već prave izbor članaka za novi broj, redakcijska baza je sinhronizovana sa Web bazom i sistem je spreman da sledeći „PC“ distribuira na Web i na kioske u istom trenutku.

Zato pregledajte detaljno novo izdanje broja, pronađite omiljenog autora ili pretražite bogatu arhivu časopisa i sve to podelite s vašim prijateljima uz samo jedan klik. Vidimo se na pc.pcpress.rs!

Kada je staro bilo novo

Naši redovni čitaoci se možda sećaju promocije prethodne verzije sajta, u januaru 2001. godine.

Ako želite da se podsetite, pročitajte tekst Aleksandra Vacića „PC na Web‑u“ iz PC#66 – raspoloživ je i online, na pc2.pcpress.rs/arhiva/tekst.asp?broj=66&tekstID=3016 (kako je nekad izgledao) ili na novom sajtu, pc.pcpress.rs/tekst.php?id=2990

Milan Basrak

(Objavljeno u časopisu PC#212)

Za ovaj tekst komentari su zakljuċeni.

Komentari

  1. Ana Maksimović
    16. July 2014. u 16:16

    Slažemo se sa vama, radimo na tome…

  2. Joe
    16. July 2014. u 15:07

    Tolika muka oko praćenja standarda a nije resonsive design.


Asus


Manpower

Enjoy.ing

Twitter