HTML5 placeholder

Znate onu foru na web obrascima, kada u input poljima imate nekakav opisni tekst, npr. naziv polja ili uputu? Fokusom na polje, tekst nestane i možete upisivati u polje, a u slučaju da ništa ne upišete i pomaknete fokus s polja, opisni tekst se vraća. Evo primjer:

otvorite demo stranicu

Takvu funkcionalnost smo prije mogli postići isključivo javascriptom. HTML5 je uveo placeholder atribut za input polja koji funkcionira na poviše opisani način. Jednostavan i vrlo koristan novitet! Stariji browseri nemaju podršku za placeholder atribut, ali možemo je dodati javascriptom. Dobra placeholder skripta bi trebala imati sljedeće karakteristike: Continue reading

IE bold tekst i opacity

Možda ste primjetili da korištenje alpha opacity filtera u Internet Exploreru rezultira jako ružnim artefaktima na prikazu boldanog teksta? Recimo, ako na web stranici imate tekst koji se prikazuje s fadeIn efektom? Ako niste sigurni o čemu se radi, možete vidjeti kako to izgleda na priloženom screenshotu iz IE8, a ispod slike možete provjeriti korišteni HTML kod.

Slika 1. Prikaz bold teksta s uključenim alpha opacity filterom u IE8


<div style="filter:alpha(opacity=100); font-weight:bold;">Boldani tekst na kojem je korišten IE alpha opacity filter.</div>
<div style="font-weight:bold;">Boldani tekst bez IE alpha opacity filtera.</div>

Primjer 1. HTML kod korišten za sliku 1.

Ovaj bug se navodno pojavio kada je Microsoft uveo font-smoothing (ClearType) u IE. Rješenje je dosta jednostavno. Za HTML element koji sadrži tekst treba definirati pozadinsku boju ili sliku – i boldani tekst će se ispravno prikazati.


<div style="filter:alpha(opacity=100); font-weight:bold; background:#fff;">Boldani tekst na kojem je korišten IE alpha opacity filter.</div>
<div style="font-weight:bold;">Boldani tekst bez IE alpha opacity filtera.</div>

Primjer 2. HTML kod s primjenjenim rješenjem za alpha opacity IE bug.

Kompleksno grupiranje u MySQL-u

Danas ćemo proći primjer jednog kompleksnijeg grupiranja u MySQL-u pomoću ‘CASE’ naredbe. Za primjer ćemo koristiti jednostavnu tablicu ‘users’:

CREATE TABLE `users` (

`id` int(10) NOT NULL auto_increment,

`name` varchar(255) default NULL,

`age` int(10) default NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=17 DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

– Dumping data for table `users`

Continue reading

Ajax upload datoteka i prikaz podataka o tijeku slanja

Od dolaska XMLHttpRequest objekta popularno nazivan AJAX uviđeno je da isti ne podržava u potpunosti sve pretpostavljene funkcionalnosti standardnog HTTP-a – npr. upload datoteka.

Dugo se željeni efekt postizao skrivenim iframe-ovima, a kasnije raznim flash uploaderima i slično.

Tijekom 2008. godine W3C je izdao draft proširenih funkcionalnosti za XMLHttpRequest nazvan “Level 2″ među kojima se spominje i progress, cross-site requests, byte streams i FormData programsko sučelje.

Upravo progress i form data nam omogućuju slanje datoteka ajaxom te praćenje tijeka slanja tj. primanja podataka.

Datoteke s punim kodom i primjerima uz ovaj tekst možete preuzeti ovdje.

Ovaj primjer za jednostavnost koristi jQuery i podrazumijeva poznavanje JavaScript jezika. Continue reading

Novi HTML5 elementi & stari browseri

HTML5 je uveo niz novih elemenata kao što su: <header>, <footer>, <nav>, <article>, <section> i <time>. Korištenjem novouvedenih elemenata web stranica postaje semantički jasnija. Na primjer, ako navigaciju web stranice stavimo unutar za to predviđenog <nav> elementa – naš preglednik to može prepoznati i time olakšati snalažanje na web stranici slabovidnim i slijepim osobama. Osim toga semantički jasnija web stranica doprinosi optimizaciji sadržaja za tražilice (SEO). Međutim, ako ne koristimo suvremeni preglednik interneta koji ima podršku za HTML5, mogući su problemi s prikazom novih HTML5 elemenata.

Postavlja se pitanje kako će stari preglednici interpretirati nove, njima nepoznate HTML5 elemente? Continue reading

CSS3 text-shadow i prikaz u Google Chrome-u

U CSS3 je uvedena mogućnost definiranja sjena ispod teksta (CSS3 text-shadow). U trenutku pisanja ovog članka jedino Internet Explorer (IE9) ne podržava ovu opciju. Iako Google Chrome podržava text-shadows, pod određenim uvjetima na Windows operativnim sustavima postoje problemi s prikazom teksta sa sjenama.

Osnovni kod za definiranje sjena ispod teksta izgleda ovako:


p { text-shadow:3px 2px 3px rgba(0,0,0,0.5); }

Prve dvije vrijednosti određuju dužinu sjene, a moguće je koristiti i negativne vrijednosti. Treća vrijednost je opcionalna i definira zamućenost (blur) sjene. Posljednja vrijednost je boja sjene. Boja sjene se može definirati u heksadecimalnom kodu (#000000) ili u RGBA kodu kako je navedeno u primjeru. Prednost RGBA koda je mogućnost korištenja alpha kanala za određivanje stupnja transparencije sjene.

1. vrijednost: duljina sjene na X-osi
2. vrijednost: duljina sjene na Y-osi
3. vrijednost: blur sjene
4. vrijednost: boja i transparencija sjene Continue reading

Manipulacija dimenzijama Youtube video embeda i jos više

Radeći nedavno na jednom projektu pojavila se potreba da korisnik unosi video embed code koji se automatski, ovisno o prikazu, ispisuje u više dimenzija. Opcija višestrukog unosa za svaki od ispisa nije bila opcija te se javila potreba za “elegantnijim” rješenjem.

U spas dolaze regular expresions i string replacement. Uz korištenje ovog rješenja ide pretpostavka da uneseni embed za postavljanje dimenzija koristi html attribute width i height umjesto css atributa style. Za demo primjere uzeli smo 3 najčešće korištena embed koda: youtube iframe, stariji youtube embed/object te vimeo embed koji je također iframe.

Ovaj tekst će istovremeno ponuditi i jednostavno gotovo rješenje, a nadamo se i inspirirati nove ideje i načine za rješavanje nekih dosad nepoželjnih problema.

Datoteke s punim kodom i primjerima uz ovaj tekst možete preuzeti ovdje.
Ovaj tekst podrazumjeva poznavanje php regular expression i string funkcija. Za sav info o php funkcijama i generalno o php jeziku preporučamo PHP manual.

Continue reading

CSS3 i Internet Explorer

CSS3 je donio nekoliko inovacija koje web dizajnerima i frontend web programerima bitno olakšavaju posao. Nove opcije koje će se vjerovatno najčešće koristiti su zaobljeni rubovi (CSS3 border-radius) i generiranje sjena na block elementima (CSS3 box-shadow). Uz ove nove opcije nema više potrebe pažljivo slagati pozadinske sjene i zaobljene rubove od gif i png datoteka – sve je moguće napraviti s par linija css koda. Ako još niste dovoljno vješti u korištenju novih CSS3 opcija možete koristiti neki od online generatora CSS3 koda poput css3generator.com. Generator u realnom vremenu daje prikaz efekta koji ćete dobiti, te vam ispisuje i dodatni css kod za kompatibilnost sa starim verzijama Webkit i Gecko preglednika.

Nažalost Internet Explorer u inačicama prije IE9 ne podržava nove CSS3 opcije. Continue reading

Čitanje XML-a PHP-om – 2. dio

Da ukratko pokrijemo teoriju: XML je jedan od nakorištenijih načina prijenosa podatka putem tekstualnih datoteka i detaljno je opisan u XML 1.0 specifikaciji postavljenoj od strane W3C organizacije.
Službene informacije su dostupne na stranici http://www.w3.org/XML/.
U posljednjih nekoliko godina razvijeno je stotine XML baziranih formata kao što su RSS, SOAP, XHTML, Office Open XML (Microsoft office), OpenDocument (Open Office).

Ovaj tekst pretpostavlja da poznajemo osnove PHP i objektnog programiranja.

Čitanje XML-a PHP-om je moguće postići na dva načina:

  • korištenjem XML Parser funkcija
  • korištenjem DOM funkcija

Nastavljamo s drugim djelom vodiča Čitanje XML-a PHP-om. Prvi dio možete pročitati ovdje.
U ovom članku bavit ćemo se korištenjem DOM funkcija. Continue reading

Problem s prikazom PNG boja u IE

Prikaz PNG datoteka u IE je dugo vremena predstavljao problem zbog neispravnog prikaza transparentnih PNG datoteka. U novijim verzijama IE taj problem je manje-više riješen. Međutim, čak i u novim verzijama IE prikaz boja PNG datoteka ponekad nije ispravan. Problem je najlakše uočiti ako se uz PNG grafiku istovremeno koriste i .gif ili .jpg datoteke ili elementi kojima je boja definirana css-om. Gecko, Webkit i Opera browseri će PNG boje prikazati ispravno, ali u IE će boje biti uočljivo tamnije.

Što je dodatno zbunjujuće, ovaj problem se ne pojavljuje uvijek, nego ovisi o tome kako je spremljena PNG datoteka. Continue reading