Planeta Srbija

Sigurno da među posetiocima postoji dobar broj onih koji su planirali da kad tad krenu sa učenjem programskog jezika PHP. Možda je ovo trenutak za to jer u prilog ide i Nenadov blog i zanimljiv online tutorijal. U pitanju su osnovne PHP -a : promenjive, funkcije, operatori… Motivacija : PHP je izuzetno dražen danas [...]

Skoro sam tražio forum aplikaciju napisanu u ASP VBScript jeziku, za jedan sajt na kojem trenutno radim. Našao sam ono što mi je trebalo i to je Snitz 2000 forum aplikacija. Znam, veoma je zastarela, i mogao sam da uzmem i neki drugi, ali mi trebaju samo osnovne stvari, ne tamo neke fancy gluposti (privatne poruke, rođendani i slično). Kako sam kod nije pisan da po XHTML standardu, očekivao sam da je ono što dobijem bude jako loše. To loše nije zbog toga što kod nije XHTML validan, ni zbog toga što je prepun tabela, već zbog toga što sadrži jako zastareo HTML kod (da, onaj što se ne koristi zbog CSS-a).

Pošto sam morao da se bakćem sa CSS-om kako bih poništio stare vrednosti (font, center, basefont tagovi, i neki atributi, kao bgcolor i slično), sledi tutorijal kako poništiti zastareo HTML korištenjem CSS-a. Verujem da će mnogima koristiti, jer i dalje ima dobro napisanih aplikacija sa veoma loše napisanim HTML-om.

Prvi korak - font tag

Font tag je najzastupljeniji u celoj aplikaciji. Realno, on je meni i najveći problem, jer zbog njega ne mogu da formatiram sadržaj onako kako bih želeo. Prvo što sam dodao u CSS kod je kratka deklaracija:

color: inherit;

To bi (u teoriji) trebalo da poništi bilo kakvo bojenje teksta font tagom. Naravno, Internet Explorer je (i) ovaj put zakazao (odnosno, nisam dobio ono što sam želeo). Tu kao spas dolazi mogućnost korišćenja neke vrste JavaScripta (ispravite me ako grešim) u CSS-u, kao “fantastični” feature IE-a.

color: inherit; color: expression(this.parentNode.currentStyle['color']);

Ovo rešava taj problem. Sledeći problem odnosi se na samo postavljanje fonta, jer je to i svrha font tag-a. Prvo što sam dodao u font selektor je resetovanje podešene familije fontova. Koristiću skraćenu varijantu (samo font), jer Opera ima problema sa čitanjem font-family atributa.

font: inherit; font-family: expression(this.parentNode.currentStyle['fontFamily']);

Rešen je i ovaj problem. Jedino što još ostaje je da resetujem veličinu fonta i to bi bilo to, barem što se font taga tiče.

font-size: 100%;

Ova deklaracija radi u svim browserima. Dakle, generalni reset font (i basefont) taga izgleda ovako:

font, basefont { color: inherit; color: expression(this.parentNode.currentStyle['color']); font: inherit; font-family: expression(this.parentNode.currentStyle['fontFamily']); font-size: 100%; }

Success! Uspeo sam da se rešim najdosadnijeg (i najrasprostranjenijeg ako mogu da dodam) zastarelog HTML koda.

Drugi korak - ostali zastareli tagovi

Za svaki slučaj, odlučio sam da poništim još par tagova, kao što su center, u, s, blink, strike, marquee i nobr. Kao i kod resetovanja font i basefont tagova, i ovde se koriste slične tehnike (reset za normalne browsere, a zatim reset i za Internet Explorer).

center { text-align: inherit; text-align: expression(this.parentNode.currentStyle['textAlign']); } s, strike, u { text-decoration: inherit; text-decoration: expression(this.parentNode.currentStyle['textDecoration']); } nobr { white-space: normal; } marquee { overflow: visible; -moz-binding: none; } blink { text-decoration: none; }

Dakle, ovim sam se rešio i uticaja ovih zastarelih tagova, iako ih u osnovnom kodu aplikacije nema (previše).

Treći korak - atributi

Pod ovime se podrazumeva reset HTML atributa, kao što su bgcolor, valign, border i slični tagovi, koje je zamenio CSS. Prvi od popravljenih je dosadni align atribut, kojeg sam se rešio na sledeći način:

*[align] { text-align: inherit; } * { text-align: expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); }

Prvi deo se odnosi na ostale browsere, dok se drugi odnosi na Internet Explorer (jer IE ne prepoznaje attribute selektore). Sledeći su atributi za img tagove. Sada želim da se otarasim border, hspace i vspace atributa, koji su postavljeni u HTML kodu.

img { border: none; margin: 0; }

Sada nastaje problem. Vidite, svi browseri čitaju hspace i vspace atribute kao margine, ali ne i Internet Explorer, pa je praktično nemoguće rešiti ovaj problem uz samo CSS, već se može rešiti pomoću JavaScript-a (ko zna kako, neka ostavi komentar).

Sledeće, u duhu popravke zastarelog HTML-a, resetovaću i pozadinsku boju stranice (bgcolor atribut):

body { background: transparent; }

To je sve što se tiče zastarelih atributa. Verovatno ih ima još, ali ovo su svi koji su mi trebali za popravku forum aplikacije.

Poslednji korak - tabele

Kao što sam napomenuo, source aplikacije je prepun tabela, i kao poslednji korak ostavio sam rešavanje i njih kao “minornog” problema. CSS je u ovom slučaju veoma jednostavan, i (za divno čudo) nema nikakvih expression-a.

table, tr, th, td { width: auto; height: auto; background: transparent; vertical-align: inherit; border: none; border-collapse: collapse; } Rezime

Ovo je u trenutnom vremenu veoma dobro rešenje. Ipak, trebalo bi razmisliti i stvarno popraviti kod (na pravi način), a ne CSS trikovima. Ipak, kada imate postojeći kod, koji je BTW tuđ i glomazan, ovakvo rešenje je i više nego dobrodošlo.

Možete preuzeti kompletno rešenje (sa komentarima).

Evo i prvog tutorijala kojeg sam ovde objavio. Kao što sam naslov kaže, radi se o stilizovanju “message box-ova”, odnosno mesta na kojima se ispisuju poruke. Te poruke su dosta korisne kada se prikazuju tokom ili nakon izvršavanja nekog upita, jer korisniku daju informaciju šta se dešava. Sada želim da podelim sa svima neka rešenja [...]

WordPress je u verziji 2.3 uveo podršku za tagove. Ali najverovatnije niste osvežili vašu WordPress temu tako da, i ako koristite tagove, oni se ne vide i vaši posetioci ne mogu da iskoriste ovu blagodet web 2.0 web-a. Mnogi ne vole tagove i ne vide ništa preterano korisno u njima, a ježe se na pomen tag oblačića (tag cloud). Ali ja sam ipak na strani tagova, oni će pomoći da vaši posetioci lakše pronađu vaše stare i zaboravljene postove (tekstove), koji su označeni sa istim tagom kao tekst koji upravo čitaju. Drugi argument u korist tagova je da vam neće škoditi, a čim ne škode to znači da koriste, pa da …

Sve što treba da uradite jeste da u single.php fajl, koji je deo vaše WordPress teme umetnete sledeći kod:

Ovo je funkcija koju ćemo koristiti

Code (php) <?php the_tags(‘before’, ’separator’, ‘after’);?>

Tako da vaš kod može izgledati ovako:

Code (php) <?php the_tags(‘Tagovi : ‘,‘ • ‘,‘ ‘);?>

Tagovi će na izlazu izgledati ovako Tagovi : WordPress • Djuki • Tutorijal

Ili na sledeći način:

Code (php) <?php the_tags(‘Tagovi : ‘,‘ | ‘); ?>

Izlaz će izgledati ovako: Tagovi : WordPress | Djuki | Tutorijal

Tagove možete da postavite upravo ispod sadržaja vašeg posta, pa će deo koda u single.php fajlu izgledati ovako

Code (php)   <h1><?php the_title(); ?></h1> <?php the_content(‘<p class="serif">Read the rest of this entry &raquo;</p>’);?> <p><?php the_tags(‘WordPress tagovi: ‘,‘ | ‘); ?></p>  

A za one koji žele da svoju temu ulepšaju sa tag oblačićem, samo treba da na pogodno mesto dodaju sledeći kod. Ovo može biti u vašem sidebaru (sidebar.php), ili možda u footeru (footer.php), ili gde god vi to želite.

Code (php) <?php wp_tag_cloud(’smallest=8&largest=36&number=150′);?>

Ovde je “smallest” veličina fonta za najmanji tag, koji se najmanje pojavljuje na vašem blogu, “largest” je font za najveći tag tj. tag koji se najviše pojavljuje na vašem blogu. “Number” je broj koji označava koliko tagova želite da prikažete u tag oblaćiču. Što je broj veći i oblačić će da raste. Počnite da koristite tagove i sledeće godine moćićete da vidite, šta je najzastupljenije na vašem blogu, i što je najvažnije videćete šta ste zapostavili tokom godine, a o čemu je vredelo pisati. Pa neka sada kažu da su oblačići beskorisni i da samo zauzimaju mesto.

WordPress je u verziji 2.3 uveo podršku za tagove. Ali najverovatnije niste osvežili vašu WordPress temu tako da, i ako koristite tagove, oni se ne vide i vaši posetioci ne mogu da iskoriste ovu blagodet web 2.0 web-a. Mnogi ne vole tagove i ne vide ništa preterano korisno u njima, a ježe se na pomen tag oblačića (tag cloud). Ali ja sam ipak na strani tagova, oni će pomoći da vaši posetioci lakše pronaČu vaše stare i zaboravljene postove (tekstove), koji su označeni sa istim tagom kao tekst koji upravo čitaju. Drugi argument u korist tagova je da vam neće škoditi, a čim ne škode to znači da koriste, pa da …

Sve što treba da uradite jeste da u single.php fajl, koji je deo vaše WordPress teme umetnete sledeći kod:

Ovo je funkcija koju ćemo koristiti

Code (php) <?php the_tags(‘before’, ’separator’, ‘after’);?>

Tako da vaš kod može izgledati ovako:

Code (php) <?php the_tags(‘Tagovi : ‘,‘ • ‘,‘ ‘);?>

Tagovi će na izlazu izgledati ovako Tagovi : WordPress • Djuki • Tutorijal

Ili na sledeći način:

Code (php) <?php the_tags(‘Tagovi : ‘,‘ | ‘); ?>

Izlaz će izgledati ovako: Tagovi : WordPress | Djuki | Tutorijal

Tagove možete da postavite upravo ispod sadržaja vašeg posta, pa će deo koda u single.php fajlu izgledati ovako

Code (php)   <h1><?php the_title(); ?></h1> <?php the_content(‘<p class="serif">Read the rest of this entry &raquo;</p>’);?> <p><?php the_tags(‘WordPress tagovi: ‘,‘ | ‘); ?></p>  

A za one koji žele da svoju temu ulepšaju sa tag oblačićem, samo treba da na pogodno mesto dodaju sledeći kod. Ovo može biti u vašem sidebaru (sidebar.php), ili možda u footeru (footer.php), ili gde god vi to želite.

Code (php) <?php wp_tag_cloud(’smallest=8&largest=36&number=150′);?>

Ovde je “smallest” veličina fonta za najmanji tag, koji se najmanje pojavljuje na vašem blogu, “largest” je font za najveći tag tj. tag koji se najviše pojavljuje na vašem blogu. “Number” je broj koji označava koliko tagova želite da prikažete u tag oblaćiču. Što je broj veći i oblačić će da raste. Počnite da koristite tagove i sledeće godine moćićete da vidite, šta je najzastupljenije na vašem blogu, i što je najvažnije videćete šta ste zapostavili tokom godine, a o čemu je vredelo pisati. Pa neka sada kažu da su oblačići beskorisni i da samo zauzimaju mesto.