Dec 7 2009

Optimizarea pozelor pentru web

Pentru ca un website sa se incarce rapid in browser si sa nu ocupe mult spatiu pe server, trebuie sa-i optimizati cam toate pozele din alcatuirea sa. Spre exemplu, sa zicem ca o poza oarecare ocupa, neoptimizata, 7.44 Mb. Dupa o ajustare a dimensiunii si optimizare, ea va ocupa sub 1 Mb spatiu pe server.
Optimizarea se face de obicei cu ajutorul unui program grafic de editare a pozelor, in cazul de fata cel mai folosit, Adobe Photoshop, varianta CS 3, mai exact.
Deci, sa presupunem ca ati instalat programul, dar nu ati mai lucrat in el niciodata. Odata deschis, va afisa ceva de genul:

Pentru a deschide poza pe care doriti sa o optimizati, dati un simplu dublu-click oriunde pe suprafata gri din mijloc. Va aparea o fereastra de browse

Selectati poza si apasati butonul “open”. Odata poza deschisa, vom trece la optimizare, dar nu inainte de a o aduce la niste dimensiuni mai normale pentru un website, sa zicem ca o vom face de 700 pixeli latime – inaltimea se va stabili proportional de catre program. Pentru asta vom tasta Alt+Ctrl+I (sau click dreapta pe banda albastra de deasupra pozei)

Scriem la “width” 700, apoi ne asiguram ca unitatea de masura este fixata pe pixeli si ca am bifat casuta “Constrain proportions” , pentru o scalare proportionala a imaginii. Abia dupa ce am dat ok la aceasta fereastra, putem sa incepem optimizarea propriu zisa (aceasta redimensionare este necesara pentru ca altfel programul se va bloca la optimizare, poza fiind foarte mare).
Fereastra de optimizare se poate accesa in doua feluri: ori din meniul “File” si apoi apasati “Save for Web & Devices”, ori direct, cu ajutorul unui shortcut putin mai complicat, si anume Shift+Ctrl+Alt+S.

In aceasta fereastra trebuie sa va asigurati ca ati selectat tipul extensiei cu care vreti sa se salveze poza – JPEG, PNG sau GIF. La inceput recomand sa va “jucati” cu formatul JPEG, care necesita mai putine setari decat celelalte formate. Deci selecteti JPEG, bifati casuta “Optimized”, dati calitatea la 60 si apoi apasati “save”. Va aparea fereastra de browse si veti puta salva poza oriunde doriti.
Atentie! Daca aveti o poza cu spatii in titlu (nume poza.jpg – de exemplu), cand salvati pentru web CS3-ul o va transforma in nume_poza.jpg . Asigurati-va ca folositi pe site aceasta varianta, pentru ca altfel browser-ul nu va afisa imaginea deloc.
Cam atat, momentan. In viitor voi reveni si cu explicatii despre cum se optimizeaza si celelalte formate (PNG si GIF).


Dec 2 2009

Configurare Total Commander portabil

Pentru multi webdesigneri, Total Commander-ul este un program indispensabil. De ce? Pentru ca usureaza mult upload-ul de fisiere (apartinand unui site) pe server-ul unde sunt gazduite.
Pasul 1 – obtinerea programului.
Total Commander-ul este un program free, ce poate fi descarcat de la adresa producatorului. Eu personal prefer varianta portabila (la care ma voi si referi in articol),  ce se poate descarca de aici.

Pasul 2 – prima utilizare
Dupa ce ati descarcat programul, il puteti dezarhiva oriunde in calculator. Fiind un program portabil nu necesita instalare. Trebuie doar sa deschideti folderul dezarhivat si sa dati click pe iconita TC UP (sau TOTALCMD – este acelasi lucru)

Daca totul merge ok, ar trebui sa vedeti urmatoarea fereastra (click pe poza pentru zoom):

Pasul 3 – adaugarea unei conexiuni ftp (cu un site)
Tastati Ctrl+F si va aparea o fereastra; aici apasati butonul “new connection” si o a doua fereastra se va deschide

Aici trebuie sa completati cateva campuri:
- la “Session” treceti ce doriti – titlul sitelui de exemplu, pentru ca mai tarziu sa puteti sa-l recunoasteti usor dintre celelalte sesiuni;
- la “Host name” treceti ftp-ul siteului: ftp://siteultau.ro sau ftp.siteultau.ro ;
- la “User name” tastati userul cu care va conectati si la cpanel;
- la “Password” de asemenea, scrieti parola pentru cpanel
- la “Local Dir” dati click pe butonul de browse ( cel cu >>) si alegeti din calculatorul dvs. folderul unde se gaseste siteul pe care vreti sa-l uploadati.
Dati ok, ferastra se va inchide si apoi veti vedea in fereastra ramasa ca a aparut sesiunea dvs. (cu numele pe care la-ti trecut la “Session”. Selectati-o, apoi da-ti “Connect” de la butonul din dreapta-sus. Daca totul a fost facut cum trebuie, programul o sa se conecteze la server. Intr-o parte veti avea un frame cu ce este pe server, iar in cealalta un frame cu site-ul din calculator.
Pasul 4 – upload-ul unui site
Pentru a uploada un site (sau un fisier), selectati frame-ul cu siteul din calculator, selectati fisierele dorite, apoi apasati tasta F5, sau dati click pe butonul din bara de jos. Imediat fisierele se vor transfera pe serverul unde aveti siteul. Acum nu mai trebuie decat sa da-ti un refresh la site in browser si sa vedeti efectele uploadului respestiv. Succes!


?>