[Tutorial] Tehnologie pentru pagini web rapide – Tutorial CSS

[Wizy. 24]

Acest tutorial css prezinta cum se folosesc sprite-urile pentru a obtine un design care se incarca mai repede decat in mod obisnuit, rezultand in pagini web mai rapide. Denumirea sprite desemneaza de fapt o tehnologie in css prin care putem folosi o imagine de background in mai multe feluri, mai exact – putem sa afisam in anumite div-uri doar anumite parti ale unei imagini.

Pentru a prezenta acest lucru, eu aici voi folosi poza de mai jos prin care va vor demonstra aceasta tehnica, dar inainte voi explica si avantajul si functionarea tehnicii.

 

 

Avantajul si functionarea sprite-urilor

Inainte de a prezenta cum se folosesc sprite-urile explic pentru cei care “poate nu stiu” ce se intampla de fapt cand se incarca o pagina web, mai exact elementele de design de pe o pagina. Deci, browserul trimite o comanda, o cerere catre server, ca “vreau documentul X!” Serverul raspunde: “da am documentul, poftim”. Dupa ce s-a downloadat documentul, care este un fisier html, browserul incepe sa interpreteze codul html, care contine elemente de design, imagini etc. De fiecare data cand in cod browserul ajunge la o imagine, trimite iarasi o cerere catre server (un Request Http), “vreau imaginea X”, iar serverul dupa aceea trimite imaginea si tot asa. Nici nu trebuie sa zic – cu cat sunt mai multe imagini si de dimensiune mai mare, cu atat se incarca mai greu o pagina web. Ideea de baza este: majoritatea browserelor niciodata nu cer mai mult decat 6 imagini dintr-o data, si numai cand se downlodeaza total o imagine, si se goleste un loc trimit iarasi o cerere. Acest lucru inseamna multe cereri http, (http requests), si timp. Aici intervin sprite-urile Css, care fac posibil ca prin downloadarea unei singure imagini sa avem mai multe elemente de design, pe care le aranjam pe pagina cum vrem. Sa va dau un exemplu: Daca pagina incarca sa zicem 5 imagini, 5 imagini pentru butoane sa zicem, inseamna ca serverul se va ocupa cu 10 cereri HTTP. Daca combinam cele 5 imagini intr-o singura imagine, vom economisi 9 cereri HTTP – si vom obtine un load time mai bun pentru pagina, ceea ce inseamna o experienta mai buna pentru utilizator.

 

 

Cum se face?

E foarte simplu. Definim un div cu o anumita dimensiune in care sa incape doar o parte din imagine, partea pe care vrem sa folosim ca si element de design. Tot ce este de facut, adaugarea imaginii ca si background si pozitionarea acestuia, multe ori si cu valori negative.

Iata un exemplu de cod pentru a arata doar ochii fetei din imaginea de mai sus:

 

Quote

 

 

 

<style type="text/css">

#ochi {

width:490px;

height:100px;

background-image:url(‘http://it.webdesign-...css/fata.jpg’);

background-position:0px 320px;"

}

</style>

<div id="ochi"></div>

 

 

Directiva background-position: poate sa ia doua valori. Prima valoare se refera la pozitionarea orizontala, iar al doilea la pozitionarea verticala. Dupa cum vedeti in exemplul de mai sus eu am folosit doar pozitionarea verticala.

Cu aceasta tehnica css puteti face paginile web mai rapide, si trebuie mentionat si faptul ca butoanele cu efectele roll-over care pana acum erau realizate cu doua imagini de obicei, de acum pot fi realizate sa se miste mult mai bine, contribuind si astfel la experienta vizitatorilor.