Dark Wood

Multi webmasteri se lovesc frecvent de urmatoarea problema: fac un site, cu mai multe pagini, si la un moment dat, clientul vrea sa faca o modificare in header (sau footer), iar modificarea sa se produca pe absolut toate paginile site-ului.
Daca site-ul are doar 4-5 pagini, modificarea se poate face manual, dar daca ai 10, 20, 30 de pagini, atunci modificarea poate da mari dureri de cap, webmasterul trebuind sa dea copy/paste la un numar mare de pagini. Din cauza aspectului repetitiv al metodei de mai sus, pot aparea greseli in cod, ca sa nu mai punem la socoteala timpul pierdut si nervii consumati aiurea.
Pentru a evita o astfel de situatie, trebuie sa apelam la putin PHP, mai exact la functia “include”. Pe scurt, aceasta functie include intr-o pagina de tip pagina.php bucati de cod html din alt document (header.php de exemplu).
In primul rand trebuie sa retineti ca nu se schimba cu nimic afisarea unei pagini web daca schimbati extensia .htm cu .php.
Cu ce ne ajuta functia php “include”? Simplu: sa presupunem ca vrem ca atunci cand clientul ne cere sa schimbam ceva in header, de exemplu, vrem sa facem schimbarea o singura data in cod, iar efectul sa apara in fiecare pagina a site-ului.
Sa zicem ca avem urmatorul cod:

<div id=”header”>

<div id=”meniu_header”>HOME</div>

</div>

si in loc de “HOME” vrem sa apara “DESPRE NOI”, iar modificarea sa se propage in toate paginile ce contin divurile “header” si “meniu_header”. Mai intai, vom creea un folder nou in radacina site-ului, numit “includes” (fara ghilimele), sau oricare alt nume doriti. Aici vom crea cu un editor de texte, documentul “header.php”, care va fi la inceput gol, fara cod in el. Ne intoarcem la codul de mai sus, il selectam si il copiem in nou creatul “header.php”, efectuam modificarea de text (“DESPRE NOI” in loc de “HOME”),  si il inlocuim in pagina initiala cu functia “include”:

<?php
include (‘includes/header.php’);
?>

Salvam pagina si verificam site-ul in browser. Daca totul a mers bine, pagina ar trebui sa arate la fel ca inainte, doar ca in loc de “HOME” va afisa “DESPRE NOI”  (nu uitati sa uploadati si folderul “includes” !). Acum nu va mai ramane decat sa inlocuiti in toate paginile divul “header” cu functia “include”. Urmatoarea data cand clientul va va cere o modificare in header (sau footer, side bar, etc.), nu trebuie decat sa faceti modificarea respectiva in documentul “header” din folderul “includes”, si asta-i tot! Modificarea se va face automat in toate paginile ce contin respectiva functie. Puteti folosi cat de multe functii de “include” doriti intr-o pagina, singura conditie fiind ca pagina sa aiba extensia .php.

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).