Arhiva za decembar, 2009

Predstavljamo: Ana Fitness Klub Online

petak, 25. decembar 2009.

Poslednjih 15-ak dana sam bio angažovan oko sajta fitness kluba iz Zaječara, koji vodi Ana Belivuk. Ovo mi je do sada bio jedan od najzahtevnijih projekata – ne zato što je Ana tražila nešto specijalno, već zato što sam u potpunosti ostavio svoj stil i radio po šemi koju je ona sama napravila.

Ana je veoma pozitivna osoba i obožava jarke boje. Od samog starta, kada smo planirali celu priču oko sajta, naglasila mi je da želi belu pozadinu sa što više sličica i boja. Ja, lično, preferiram što manje boja na sajtu, gde dominiraju siva i još jedna, osnovna boja. Međutim, ovde se to nije tražilo.

Nakon par dana od skiciranja i ugovaranja posla, napravio sam jedan template, sa grubo definisanim elementima. To je bilo okej, ali kako je Ana rekla, u glavi je ipak imala neku drugačiju sliku. Zamolio sam je da do detalja sve nacrta na papiru i prosledi Darku, koji je takođe bio uključen u ovaj posao, s obzirom da sam ja već tada bio u Beogradu.

Skicu sam vrlo brzo dobio i shvatio sam da se ono, što smo prvi put napravili, zaista nije mnogo podudaralo sa pravom Aninom željom. Ali, ništa lepše nego kada imate gotovu skicu, definisane boje, raspored i veličine svih elemenata – na vama je da samo to sprovedete u delo. Kada smo odradili redizajn prvobitnog template-a, Ana je bila veoma zadovoljna, jer je to upravo bilo ono što je ona želela. U tom trenutku jedino što nije valjalo je bila pozadina body-a. Iz tog razloga, linkovao sam Ani sajt sa vrlo dobrim izborom pattern-a, i ona je sutradan poslala link do pozadine koju je želela. S obzirom da smo dobili tačno onakav template kakav je ona zamislila, ostale stvari smo vrlo brzo i u hodu rešavali. Tu bih, na kratko, skrenuo temu sa dizajna na funkcionalnost.

Pre svega, želeo bih da kažem da je ovo u stvari mini CMS, prilagođen Aninim potrebama. Za one koji ne znaju, CMS je skraćeno od Content Management System, što zapravo predstavlja sistem za upravljanje sadržajem. Ana je želela da može sama da objavljuje vesti (od kojih će se samo dve, najnovije prikazivati na početnoj strani), dok bi se starije vesti prikazivale u arhivi (koja ne uključuje najnovije dve vesti, vidljive na početnoj). Svaka vest treba da u sebi sadrži i sličicu, koja se takođe bira sa lokalnog računara odakle se objavljuje vest. Isto tako, Ana je osetila potrebu da sama uređuje raspored treninga, kao i početni i krajnji termin održavanja, a sve to je dostupno sa leve strane sajta u ljubičastom pravougaoniku. Tako da se i taj deo direktno preuzima iz baze sajta. Sve ostalo je kodirano ručno u html-u.

Prosto ne mogu, a da ne spomenem problem sa kojim sam se susreo prilikom pravljenja ovog sistema – srpska latinična slova (ž, š, itd) koja su u bazi normalno zapisana se nisu videla na sajtu. E sada, šta je bilo najsmešnije u celoj situaciji (ovo je malo advanced level, pa ko se ne bavi web programiranjem, neće razumeti o čemu govorim, pa ovaj pasus može slobodno da preskoči):

Ukoliko dodam vest preko admin panel-a, a zatim odem na početnu stranicu sajta da pogledam kako ta vest izgleda, imam šta i da vidim – sadržaj vesti se ispisuje sve dok ne dođe do nekog našeg slova i tu stane. Dakle, bukvalno ispred prvog našeg slova koje treba da echo-uje, on prestaje. Pogledam odmah phpmyadmin i vidim da vest nije lepo upisana ni u bazu – umesto naših slova, vide se oni konvertovani znakovi. Proveravam dalje i vidim da su mi sve tabele u bazi lepo podešene – encoding utf8_unicode_ci. Hm…Čudno!

Testiram dalje i uradim INSERT nad news tabelom u okviru phpmyadmin-a, i tada su se sva slova lepo videla u bazi. Međutim, kada pogledam početnu stranu sajta, i dalje sve isto – naša slova ne vidi, pa to ti je. Neko bi rekao – pa problem je u encodingu početne strane – sigurno nije podešena na UTF8. Međutim, nije ni to u pitanju – stranica ima upravo taj encoding, a kao dodatni dokaz mi je bio fakt da su se naša slova na indeksu, kucana u html-u, lepo videla. Razmišljam, proveravam sve po ko zna koliko puta – ne vidim gde je greška. Odustajem, šaljem mail Nemanji Avramoviću i odlazim na spavanje (u 04.00h), nadajući se da će me sutra ujutru čekati mail sa nekim savetom. Naravno, to se i desilo. Linkovao mi je TOP temu sa ES-a, u kojoj je bio odgovor na sve moje muke. Pri samom konektovanju na bazu, dopisao sam dve linije (kao što je tamo naglešeno) i voila….indeks strana RADI!!! Podaci iz baze ( sa naglaskom na naša slova) se prikazuju korektno. Ali, waaaait! Problem je samo polovično rešen. Zapravo, vesti se prikazuju dobro ako i samo ako se upisuju u bazu iz phpmyadmin-a. Ukoliko se to radi preko formulara iz admin panela sajta, i dalje dolazimo do istog problema.

Kontam dalje – okej, mora da postoji neki problem u prenosu podataka iz aplikacije do baze. Jedino logično u ovoj situaciji jeste da strana u admin panel-u, na kojoj se nalazi formular za dodavanje vesti nije propisno encodovan. Što zapravo i jeste bio slučaj – pogledam prvo u Firefox-u opcijom View->Еncoding, gde stoji Western. Dalje, pogledam source te stranice, gde između head tagova nigde meta tagova za character encoding. Nakon dodavanja i te linije – sve je konačno proradilo.

Ah…Zamalo da zaboravim. Postojao je još jedan problem (više vezan za dizajn) koji mi je bespotrebno oduzeo bar sat vremena. kao što se vidi, ceo sajt je centriran. Tačnije, smešten je u div-u pod nazivom container, koji ima margin: 0 auto. Međutim, dragi Internet Explorer 6 to nije umeo da protumači i umesto da centrtira sajt, on ga je prilepio uz levu ivicu. Gledao sam i gledao i nikako da shvatim zbog čega JEDINO IE6 ne centrira sajt kao i svi ostali brauzeri. Nakon nekoliko pokušaja, došao sam do odgovora preko Google-a (jaaaaako bitno):

Da bi margin: 0 auto radilo u IE6, na početku tog dokumenta mora da stoji DOCTYPE deklaracija!!! Pogledam svoj source – naravno, ja to i nisam napisao, već mi ceo kod počinje html  tagom. Ubacim traženo i naravno, centriranje je proradilo i u IE6.

Ovo su sitnice, koje znaju da debelo zagorčaju život. Priznajem, delimično i mojom krivicom, jer sve mora pravilno biti definisano na strani. Ali, iz cele situacije sam izvukao neka nova znanja i pouke, tako da mi neće pasti na pamet da ostavljam neku stranu bez jasno napisanih tagova.

Nakon 15-ak dana rada, veoma sam zadovoljan kako sajt izgleda, kako radi itd. Boje su, po mom mišljenju, veoma dobro uklopljene, a sa time se slaže i ciljna grupa posetioca – kako mi je Ana rekla, njeni vežbači su prezadovoljni sajtom, te na naš račun stižu samo pozitivne kritike. U nadi da će se i Vama dopasti i da ćete pronaći korisne informacije na njemu, ostaje mi da još jednom samo zabeležim adresu: www.ana-fitness.com. Dobro došli.

P.S.  Zahvaljujem se sledećim ljudima koji su sve vreme davali savete i ideje, ali i radili testove funkcionalnosti:

Darko Stratijev, co-worker.

Vukašin Sadžak, koji je bio i ostao moj glavni kritičar u svim projektima na kojima sam radio.

Stefan Jocić, nemoguće je reći u jednoj rečenici koliko saveta sam za ovaj projekat dobio od njega, kao i veliku podršku u kasnim noćnim satima prilikom rešavanja pomenutih problema.

Vladimir Stoiljković, koji je posebno pomogao oko izrade kontakt forme.

Nemanja Veljković, Aleksandar Mitrović, Martać Ivan koji su svakodnevno komentarisali dizajn celokupnog sajta i davali konkretne savete za određene dizajn dileme.

Direktno editovanje fajlova preko FTP-a pomoću Notepad++

četvrtak, 10. decembar 2009.

notepadSvako ko se bavi Web developmentom je došao u situaciju da, kada postavi gotov sajt na server, vremenom opazi da neki deo treba da se prepravi. Dug i dosadan način za to bi bio da se nakačite preko nekog FTP klijenta na server, zatim da sačuvate u kompjuteru fajl koji želite da uredite, uradite potrebne modifikacije i na kraju – ponovni upload fajla na server.

Nedavno sam, zahvaljujući Aleksandru Babiću, otkrio mnogo jednostavniji način – direktno editovanje na serveru pomoću Notepad++. Inače, ovo je svakako moj omiljeni text-editor i nije mi jasno kako mi još ranije nije palo na pamet da iskoristim ovu fenomenalnu mogućnost. Umesto toga, ja sam radio online prepravke iz cPanel-a. Ali, sada je tome kraj.

Prvo što treba da uradite je da skinete dodatak za Notepad++ koji se zove FTP_Synchronize i isti prekopirate u Notepad++ plugins folder. Nakon toga, pokrenite Notepad++, i videćete ikonicu kao na slici.

np++

Klikom na tu ikonicu, pojavljuje se prozor gde ćete videti novu ikonicu sa nazivom Open settings dialog gde treba da unesete:

Profile Name: Bilo šta, što će Vama lično služiti za prepoznavanje te konekcije,

Address: standarna FTP adresa Vašeg servera (hostname),

Port: 21,

i naravno username i password.

Nakon ovoga bi trebalo da sve lepo funkcioniše.  Vratite se jedan prozor unazad i u FTP Folder prozoru kliknite na prvo dugme sa leve strane, koje služi za konekciju i woilaaaa…..Ući ćete u root vašeg hosta!

Happy coding & editing! :)