Iata, am mai facut un site. Daca ati ajuns la aceasta sectiune, probabil vreti sa aflati detaliile tehnice ale site-ului si procesul de construire. Nu voi intra in toate amanuntele, nu pentru ca imi place sa fiu secretuos, ci tocmai, oricine poate da click pe "view page source".

Pentru realizarea meniului putem folosi div-uri, tabel, sau elemente de lista afisate inline. Div-urile le folosesc la meniuri cu mult design, care au imagine ca fundal. Ca sa obtin meniuri alineate in stanga si in dreapta, am ales tabelul si am utilizat cate-unul la meniu si la submeniu, ca sa fie impartite individual. Aceasta solutie este optima atat pentru IE si Firefox cat si pentru Opera, browsere in care am urmarit dezvoltarea site-ului pe parcurs.

Din primul rand al meniului vizitatorul poate sa aleaga vizionarea pozelor (Galerie), prezentarea artistei (Despre mine) sau descrierea construirii lui Fotoland (ghici ce, va aflati chiar aici).

"Galerie" are submeniurile in randul al doilea, care reprezinta diferite modalitati de vizualizare. Efectul :hover folosit in submeniu confera dinamism paginii, prin miscarea usoara in jos a butonului, invitand vizitatorul sa-l apase. Pentru o functionare optima, link-ul nu cuprinde doar textul, ci intregul buton pana la chenar, iar butonul mai portocaliu arata unde ne aflam.

Cei mai multi vizitatori vor sa vada toate pozele pe o "foaie", apoi sa aleaga una si s-o mareasca. Asta face butonul "Toate pozele" si acest mod am ales ca index.php al site-ului. De aici, apasand pe Galerie ajungem la afisarea marita a unei singure poze. Acelasi lucru obtinem din "Toate pozele" apasand pe poza dorita. In mod asemanator, Albume (albume_general.php) arata toate pozele din album, iar apasand pe o poza, o vedem marita (albume_larg.php). Tot asa, Cele mai bune poze (best_general.php) insira pozele cu voturi bune incepand de la 5 pana la 3,5 ; click pe una dintre ele si ajungem la vizualizarea marita a cate-unei poze dintre cele mai bune (best_larg.php). Daca ma voi satura sa folosesc engleza, voi schimba "best" in "cele_mai_bune_poze(_facute_vreodata)".

Pe galerie_larg.php avem un obiect cu poza precedenta si urmatoare si sageti pentru deplasare. (Toata constructia aceasta am numit-o navigator, puteti citi in engleza sau romana, e indiferent. Oricum eu de obicei l-am pronuntat in maghiara.) Pe orice site tip galerie foto navigatorul e la fel: Apasa poza si apare in mare. Apasa sageata si navighezi mai departe, poza mare ramanand neschimbata. Mi-a trebuit un pic de tactica sa fac spatii in care si pozele cu pozitie verticala se comporta frumos. Cand ajungem la ultima poza (sau la marginea stancii) apare un inger care ne avertizeaza (ca sa nu cadem in prapastie). Aceasta ultima poza poate fi capatul bazei de date, sau sfarsitul unui album, respectiv ultima poza dintre "cele mai bune", dupa caz.

Dar de unde stim ca sunt cele mai bune? Vizitatorii ne zic, ce poze le-au placut. Initial poza are vote=0 si apare cu zero stelute. In urma unui vot, poza va primi exact valoarea data, acesta este norocul celui care voteaza primul. Insa nu se poate bucura mult timp, ca vine altul si mai da o nota, iar PHP incepe sa calculeze:

• Extrage prin query valoarea votes (media voturilor pana acum)
• Extrage si numarul voturilor
• Matematic vorbind: rezultat = media * num_votes / (num_votes+1) + value / (num_votes+1) ...value este votul pe care il adaugam acum
• Tradus in PHP: $media=$media*$num_votes++/$num_votes+$value/$num_votes;
• Apoi stocam in baza de date noile valori pentru media si num_votes

Bineinteles, inainte de toate acestea s-a verificat utilizatorul, pentru a nu vota de doua ori aceeasi poza.

Articolele "Despre mine" si "Realizarea site-ului" au in plus optiunea de a schimba marimea fontului. Aici ne vine de ajutor o functie JavaScript care utilizeaza un "closure".

Pozele in original aveau marimea 2048 x 1536 pixeli (sau invers in unele cazuri) insa pe site le puteti gasi micsorate: 512 x 384 pixeli. Cele cu rezolutie mare se pot cere contra cost.

Clienta, care este mama mea, si-a dorit un hosting gratuit si fara elemente publicitare. Dap. Cu aceasta ocazie trebuie sa felicit gazduirea oferita de Dap, pentru viteza mare, marimea spatiului de stocare potrivita, unelte, facilitati. In timpul zilei merge fara probleme. Domeniul dap nu suna prea bine, dar alternativele erau "ingashka", "mandrakenation" si "dracula-club"... Prin urmare am ales forma care parea mai eleganta si din fericire aceasta era una scurta.

O pagina web trebuie sa apara estetic pe orice monitor, diferenta majora fiind intre normal (3:4) si wide (9:16). Totodata nu strica sa apara cat mai asemanator in cele doua variante. Pentru a contrabalansa diferenta, am pozitionat continutul la mijloc si am limitat largimea paginii la 1008 de pixeli, valoarea standard pentru monitoarele "normale" fiind 1024 de pixeli din care am scazut 16 pentru scroll-bar. Am facut scroll-bar-ul vertical permanent (overflow-y: scroll) ca sa nu sara pagina ba la stanga ba la dreapta intre clickuri. Apoi am umplut spatiile laterale cu decor (disponibil in principiu numai in "wide"). Daca pe un monitor wide marim pagina cu 30% (Ctrl si '+' de 3 ori), scapam de aceste fasii laterale si marginea nimereste fix la chenarul browserului. (La faza asta unii cititori incep sa se joace cu Ctrl"+" si Ctrl"-".)

Pentru a defini ca fundal modelul cu frunze de toamna si cu icoana pictata pe geam din stanga si dreapta paginii, a trebuit sa le pun pe o singura imagine, impreuna cu fundalul monocrom (galben) la mijloc. Insa in IE incetina mult incarcarea paginii si aparea total desfigurat. Punand alb la mijloc, s-a remediat problema. Incapatanat ce sunt, tot am pus fundal galben pentru <div>-ul #bodyIndent si toate celelalte elemente mostenesc acesta.

Cu siguranta ati vizualizat deja toate pozele dar dupa citirea prezentarii sper ca v-am facut pofta sa o luati de la inceput. Cine stie? Poate au fost incarcate poze noi intre timp.