Web savjeti (2) – Naučite HTML 5 na vrijeme

Ovo je drugi dio Web savjeta, logičan nastavak na prvi dio. U ovom dijelu savjetujem vam da naučite HTML 5 i da budete spremni kada on bude u upotrebi.

HTML 5 nije teško naučiti, treba se samo naviknuti na korištenje novih elemenata, što naučite za koji dan. No, uvijek je dobro biti spreman, pa krenimo.

Novi strukturni elementi

Trenutno vam je normalno da strukturirate sadržaj pomoću DIV elemenata kojima onda dajete klase i ID-e. Tako za header imate npr. <div id=”header”>. HTML 5 uvodi niz novih, semantičkih (iako bi se o ovome dalo još raspravljati) elemenata, koje ću vam sada predstaviti.

  • <header> Trebao bi se koristiti za bilo kakva zaglavlja, uključujući header dokumenta (logo, navigacija, pretraga).
  • <nav> Ovaj element treba koristiti za dijelove stranice sa navigacijskim linkovima. Obuhvaća glavnu navigaciju, te bilo koje druge linkove koji pomažu u navigaciji siteom (npr. breadcrumb).
  • <section> Ovo je element dosta sličan DIV-u. Koristi se za grupiranje dijela sadržaja na web stranici (npr. <section id=”related-content”>).
  • <aside> Ovaj element, iako tako djeluje na prvu, uopće nije namijenjen za sidebare, iako se može koristiti i za njih. On bi se trebao koristiti za bilo kakav dodatan sadržaj koji je povezan sa sadržajem koji okružuje.
  • <footer> Ovaj element koristi se footer stranice i podnožja članaka gdje se prikazuje tko je autor, tagovi članka, broj komentara, itd.

Video i audio

Video (<video>) i audio (<audio>) novi su elementi HTML-a koji omogućuju ubacivanje video i audio sadržaja bez posredovanja Flash playera. Mislim da ćemo podršku za njih najduže čekati jer se proizvođači browsera ne mogu dogovoriti oko standardnog formata koji će svi podržavati.

Spremni ste…

Eto, u ovom kratkom članku, koliko-toliko ste spremni za tehnologiju koje dolazi u slijedećih nekoliko godina. Naravno, sada znate elemente, a pravo korištenje tih elemenata shvatit ćete nakon što neko vrijeme provedete u novom HTML-u. Možda još uvijek ne možete takve siteove objaviti, ali probajte privatno, za sebe, prekodirati neki dizajn u HTML 5.

I da, još sam vam zaboravio spomenuti, DOCTYPE novog HTML-a jako je jednostavan i lako pamtljiv:

<!DOCTYPE html>

Uživajte…

Oglasi

Web savjeti (1) Naučite CSS 3 na vrijeme

Ovo je prvi od mnogih (nadam se) kratkih web savjeta. Web savjeti su kratki članci u kojima vam dajem – vjerovali ili ne – savjete o mnogobrojnim aspektima web dizajna i programiranja.

Naučite CSS 3 na vrijeme

CSS 3 kuca na vrata, a vi još niste spremni? Znate li da sve više i više browsera svakim danom podržava sve više i više novih mogućnosti. I stvarno se ne pripremate za to? Iako znate da stalno dolaze nove stvari? E pa danas će se to promijeniti. Danas ćete naučiti nekoliko CSS 3 svojstava, za početak.

Sjene

Ne morate više koristiti Photoshop da biste dobili najjednostavniji drop shadow. Za to možete upotrijebiti dva nova CSS property-a.

Box Shadow

Box Shadow primjenjuje se na sve block elemente. Njegovo korištenje veoma je jednostavno . Evo vam jedan jednostavan primjer:

.element{
    -moz-box-shadow: 5px 5px 7px #777; /* Za Gecko browsere */
    -webkit-box-shadow: 5px 5px 7px #777; /* Za Webkit browsere */
    box-shadow: 5px 5px 7px #777; /*  Kada CSS 3 postane standardan, 
                               koristit će se samo ovaj property. */
}

Ovo je rezultat upotrebe box-shadowa. Stavili smo sjenu na DIV element bez ikakve upotrebe Photoshopa, background slika, i ostalih gluposti. Najjednostavnije, kako je uvijek i trebalo biti. Zbog lakše uočljivosti efekta, dodao sam i sivu pozadinu.

Dakle, format za korištenje je box-shadow: x-offset y-offset zamućenje sjene #boja.

Text Shadow

Text Shadow efekt isti je kao i box shadow s razlikom da se ovaj primjenjuje na tekst. Osnovni primjer veoma je sličan.

.element{
    text-shadow: 3px 3px 4px #AF333A;
}

Ovo je tekst sa sjenom. Namjerno nisam stavio crnu običnu sjenu, da vidite da se mogu koristiti i druge boje. Ako probate selektirati ovaj tekst, vidjet ćete da je to obični tekst, a ne slika.

Možete kombinirati i više sjena, pa dobiti još zanimljivije efekte. Samo dodajte još jedan text-shadow i postavite ga drugačije od prvog.

Format za korištenje: text-shadow: x-offset y-offset zamućenje sjene #boja.

Zaobljeni rubovi

OK, znam da vas dosta zna za ovo, ali da ponovimo gradivo. Za zaobljene rubove uvijek se trebalo pomučiti. Photoshop, rezanje, puno DIVova, floatanje, itd. Naravno postojali su i drugi načini tipa da u Photoshopu izrežete zaobljeni vrh i dno DIV elementa, pa onda iznad tog DIVa imate div-header, a ispod imate div-footer ili nešto slično. OK, dosta prisjećanja starih vremena, vrijeme je za nove tehnologije.

.element{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ddd; /* Da se primjeti efekt */
}

I evo ga, zaobljeni rubovi, sa samo jednim malim komadićem teksta u CSS-u :)

Prozirnost

Za kraj, jedan od najjednostavnijih – prozirnost. Njime možete “narediti” nekom elementu koliko će biti proziran. Evo i jednostavnog primjera.

.element{
    background-color: #0000FF; /* Čista plava boja */
    opacity: 0.4;
}

Kao što vidite, postavljena je čista plava boja, ali kako je element poluproziran, boja više nije plava. Što je jednostavan dokaz da je element poluproziran.

Ovo nije sve

Dakako, ovo nije sve od CSS-a 3. Proučavajte mogućnosti i pripremajte se za dan kada će IE6 biti skroz zaboravljen, a Microsoft će izraditi browser koji podržava sve ove elemente.

NAPOMENA: Nažalost, svi browseri ne podržavaju prikaz ovih elemenata pa ako ništa ne vidite, nabavite si pristojan browser. :)