Spuneam în postul intitulat 10 Lucruri care-mi Plac ca Blogger că obişnuiesc să-mi bag degetele în codul HTML sau CSS al blogului meu. Am învăţat câteva chestii interesante, unele le-am introdus în blog, altele am încercat şi mai mult rău am făcut, dar aşa înveţi, experimentând. Nimeni nu s-a născut atotştiutor!
Ceea ce am reuşit totuşi să fac e să folosesc CSS Sprites. Nu sunt în măsură să vă explic pe îndelete ce este această metodă de optimizare a unui site dar mai multe detalii găsiţi pe site-ul A List Apart. Ceea ce vă pot spune în câteva cuvinte e faptul că atunci când aveţi pe site mai multe imagini care se repetă e bine să combinaţi acele imagini într-una singură, astfel browserul va face mai puţine cereri (requests) către serverul unde e pagina web deci blogul vostru se va încărca mai rapid.
Un exemplu de Sprites folosit la mine pe blog e acesta de mai jos (pe gare o să o găsiţi parţial - numai Facebook şi Twitter - la baza acestui post):
Ceea ce am reuşit totuşi să fac e să folosesc CSS Sprites. Nu sunt în măsură să vă explic pe îndelete ce este această metodă de optimizare a unui site dar mai multe detalii găsiţi pe site-ul A List Apart. Ceea ce vă pot spune în câteva cuvinte e faptul că atunci când aveţi pe site mai multe imagini care se repetă e bine să combinaţi acele imagini într-una singură, astfel browserul va face mai puţine cereri (requests) către serverul unde e pagina web deci blogul vostru se va încărca mai rapid.
Un exemplu de Sprites folosit la mine pe blog e acesta de mai jos (pe gare o să o găsiţi parţial - numai Facebook şi Twitter - la baza acestui post):
În loc să folosesc cinci imagini diferite pentru fiecare site (Facebook, Reddit, Digg, Twitter sau Stumbleupon) am folosit doar o singură imagine. Veţi observa de-altfel că atunci când da-ţi click pe partea cu F , de la Facebook, se va deschide o pagină specifică Facebook. Acelaşi principiu e şi pentru toate celelalte.
Nefiind un specialist în HTML, CSS sau web design nu-mi permit să explic cum să creaţi un CSS Sprites cu toate că eu am reuşit şi am înţeles cum se face. De aceea am să vă îndrum doar la unele pagini web care vă explică această metodă foarte bine şi am să vă fac cunoştinţă cu câteva instrumente ajutătoare pentru a putea crea sprites.
- Creating easy and useful CSS Sprites - un tutorial unde vă explică cum să creaţi CSS Sprites
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them - un articol foarte bun în care vă explică beneficiile folosirii CSS Sprites, de ce ar trebui să folosiţi aşa ceva şi mai ales CUM să folosiţi această metodă de optimizare
- The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - Smashing Magazine e unul dintre cele mai bune site-uri de web design deci nu vă aşteptaţi ca articolul acesta să fie unul de proastă calitate
Tool-uri pentru crearea de CSS Sprites:
- CSS Sprite Generator
- Spritebox - e foarte uşor de folosit
- CSS-Sprit.es - şi acesta e un tool uşor de folosit care-ţi oferă şi un preview la ceea ce ai creat înainte de a pune pe site sau blog
- Canvas CSS Sprite - un tool creat în HTML5 (cred) deoarece foloseşte tag-ul canvas
- Command Line CSS Sprites - iubitorii liniei de comandă vor fi mulţumiţi de acest tutorial.
Lectură plăcută! Şi ca un ultim sfat, înainte de a pune codul pe blog ar fi bine să încercaţi offline ceea ce aţi creat deoarece sigur nu vreţi să vă stricaţi tot template-ul doar pentru că aţi vrut să faceţi o mică modificare. Eu folosesc Dropbox (link cu referral, în caz că vă faceţi cont de pe acest link capăt şi eu în plus 250MB spaţiu) pentru a uploada fişierele test pe Internet şi pentru a le încerca cu toate că le-aş fi putut lăsa direct pe calculator.
Sper să vă ajute cumva acest post şi dacă nu vă merge această metodă pe blogul vostru să nu aruncaţi cu roşii stricate în mine, eu doar v-am îndrumat spre unele resurse de informare...
Baftă!