mindsoul: blog

Recent am lucrat la un proiect de site si la care am facut niste schimbari majore in design Chamonix, la am facut niste optimizari frontend pentru incarcarea mai rapida a sitului in diferitele browsere care exista. Paginile web se incarca greu din cauza elementelor frontend si nu backend, deci un server web raspunde foarte repede la cereri, ca sunt ele http ca este vorba de php sau asp, ca este vorba de query catre un database etc. Problemele de incarcare a unei pagini apar din cauza designului paginii si a elementelor care o compun, javascript, css, imagini layout, html, imagini content, flash etc. Nu o sa intru in detalii la toate optimizarile care le-am facut eu, o sa ma opresc doar la cererile http. Un tool cu care se pot vedea cate pagini http sunt facute intr-o anumita pagina este Yslow .
Browserele fac cereri http limitate in functie de browser si de versiune, care face 4 cereri odata care face 8 etc...nu intru in detalii la cate cereri face internet explorer sau firefox. Daca noi avem multe elemente de incarcat, (de exemplu 4 scripturi js, 30 de imagini pentru layout 4 fisiere css html, 20 de poze content, banere s.a.m.d. ), elementelor astea le corespund o cerere http, deci daca browserul are limita de 4 cereri http se vor incarca 4 scripturi js, ulterior 4 imagini, alte 4 imagini si tot asa.
O tehnica pe care am folosito la proiectul de mai sus, este CSS Sprites, am combinat mai multe imagini de layout, circa 50 de imagini .png intr-un singur fisier .png (imaginea atasata), deci doar facind asta am redus 50 de cereri http la 1 singura. Care sunt avantajele? Multe, enorme. Reducind cererile in felul asta, pagina web se incarca mult mai repede, ramine spatiu pentru cereri http a altor elemente, cum ar fi scripturi javascript, html si altele. Un alt aspect pe care l-am observat este ca 50 de imagini de layout separate (cind e vorba de layout cu putine colori, mai simplu) cintaresc mai mult(de 3-4 ori mai mult) decat imaginea pentru CSS Sprites. Tot pentru a avea mai putine cereri http e bine sa avem un singur fisier mai mare css, decit mai multe. Binenteles ca realizarea unui fisier css folosind o imagine CSS Sprites este un pic mai complex, dar rezultatele finale demonstreaza ca se merita efortul.

Intr-un program precum Photoshop cu mouse-ul poti face orice.
Incet incet insa am observat ca unele actiuni sunt destul de enervante daca folosesti mouse-ul sa le faci cum ar fi salvarea unui document .psd sau salvarea pentru web a unei imagini, mai ales cand trebuie sa faci actiunea asta la 70-100 de imagini intr-o ora sau mai putin. Binenteles ca folosesc shortcut-uri cam in toate programele pe care le folosesc: de la ctrl+c, ctrl+v la cele cu mai multe combinatii de taste.
Ideea este urmatoare, daca esti un designer bun si iti place sa faci chestii interesante, atractive, noi, nu inseamna ca tot timpul poti face asta. Se intampla de multe ori sa trebuiasca sa faci si chestii in serie, adica trebuie sa tai 100 de imagini de aceasi dimensiune, cu aceasi greutate(biti), in acelasi format, lucru care nu e tocmai placut ci destul de plictisitor. Pentru asta ca sa-ti faci "suferinta" sa dureze mai putin, iti salvezi niste action in photoshop si inveti niste shortcut-uri, in felul asta faci totul automatic si-ti scurtezi timpul in care trebuie sa faci munca asta plictisitoare. Puteti chiar sa tipariti shortcut-urile din programele care le utilizati mai des, pentru a avea un acces imediat la ele: Macintosh keyboard shotcuts for Photoshop, Illustrator, 3DSMax and Cinema 4D. sau Photoshop CS2 Shortcuts Cheatsheet.
Pe mine m-au salvat mult pentru ca e destulde incomod sa folosesti doar mana dreapta(in general) la design, in felul asta se echilibreaza folosirea mainilor, pentru ca la shortcut-uri ai nevoie si de mana stanga.

Acrobat Connect este un puternic instrument interactiv de comunicare, colaborare si conferinta la distanta :Acrobat Connect Demo

In domeniul webdesignului este ideal pentru ca poti face o conferinta, poti sa prezinti un nou software dezvoltat cu toate functiile lui, poti chata fara sa intrerupi prezentarea si multe alte lucruri destul de utile noua designer-ilor.

Google Webmaster Tools adauga un nou serviciu: Links. Nu am mai folosit pana acum aceste servicii puse la punct de Google, am citit mai nou ca au adaugat o optiune noua si am zis hai sa-l incerc.
Destul de interesant. Poti vedea daca ai pagini cu erori, vezi fisierul robots.txt daca ai asa ceva, vezi cu ce frecventa vin crawlerii la tine pe site (Google Bot) si multe altele.