Studii de caz

Fotomagazin.ro

Postat de Florin Cojocaru la 8 05 2005 - 15:36

Revista online Fotomagazin.ro a fost infiintata in anul 2000 din initiativa unui grup de fotografi profesionisti si amatori din Romania.
Screenshot Fotomagazin - versiune initiala -169Kb Colectivul redactional este compus din fotografi locali profesionisti si amatori, cu vasta experienta in domeniu. Sloganul revistei, “Fotomagazin.ro, o revista realizata de fotografi, pentru fotografi”, defineste scopul revistei si dorinta de a promova fotografia pe plan local.
De la infiintare, Fotomagazin.ro a cunoscut o crestere a audientei remarcabila. Datorita continutului bogat si mereu improspatat, audienta actuala a ajuns la peste 20,000 cititori unici pe luna, trafic comparabil cu tirajul unor reviste publicate traditional.

Analiza site-ului

Prin acest studiu de caz doresc sa prezint beneficiile dezvoltarii site-ului conform standardelor web. Analiza si refacerea acestui site au fost facute in perioada octombrie – decembrie 2004, de atunci site-ul suferind modificari substantiale, insa acest lucru nu afecteaza scopul propus.

Ce mi-a atras atentia in primul rand a fost timpul mare de incarcare al primei pagini, iar testul de la Web Page Speed Analysis
 a aratat cauzele: 46 de obiecte si un total al paginii incarcate de 301969 bytes! De asemenea, la verificarea codului paginii au fost evidentiate 248 erori.

Tip conexiune Timp incarcare
14.4K 234.24 sec.
28.8K 117.22 sec.
33.6K 100.50 sec.
56K 60.38 sec.
ISDN 128K 18.63 sec.
T1 1.44Mbps 1.80 sec.

Serverul care gazduieste site-ul rula Apache 1.3.31 si PHP 4.3.8, fiind situat in New York – USA cu un timp mediu de acces de 156ms. Datele despre trafic le-am obtinut de la Trafic.ro aratand o crestere constanta din Iulie 2004 pana in Septembrie 2004 cu o medie lunara de 24.700 vizitatori unici. In Google existau 73 de linkuri catre site (backlinks), iar in Yahoo 14.

Modificarea codului

Versiunea conform standardelor W3C a site-ului Fotomagazin.ro este disponibila on-line sau arhivata in sectiunea download

Spre deosebire de varianta originala, layout-ul paginii este dinamic si ocupa intregul ecran, fiind format din antet, subsol si trei coloane verticale:

<html>
  <head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<link media="screen" rel="stylesheet" type="text/css" href="./normal.css" />
<title>Fotomagazin</title>
</head>
<body>
<!-- Antet -->
<div id="antet"> </div>
<!-- coloane -->
<div id="coloane">
<!-- coloana stanga - legaturi -->
<div class="meniu_principal">  </div>
<!-- coloana dreapta - poza, ultimele articole  -->
<div class="continut_altedate">   </div>
</div>
<!-- Continutul principal (mijloc) -->
<div id="continut">  </div>
<!-- Subsol -->
<div id="subsol">  </div>
</body>
</html>

Antetul cuprinde trei div-uri: unul contine logo-ul, unul imaginea aliniata la dreapta iar ultimul navigarea orizontala.
Coloana stanga contine meniul principal de navigare. La ambele meniuri de navigare am optat pentru inlocuirea elementului grafic care sa preceada legaturile cu :&#183; pentru a pastra cat mai redusa marimea fisierului. Coloana din partea dreapta ce contine ultimele articole foloseste doar tag-uri p si div pentru formatare. Fotografia “Pamant sucit” a fost optimizata cu IrfanView si am reusit o reducere a ei de la 102.759 bytes la 26.172 bytes!

Formatarea continutului principal este realizata astfel incat sa usureze extragerea stirilor din baza de date, de exemplu se poate folosi:

while (...) {
echo '<dt>titlu_stire</dt>';
echo '<dd>rezumat_stire, (data, autor) link</dd>';
}

Pentru a imbunatati accesibilitatea site-ului, am stabilit marimea fonturilor in doua fisiere separate (font.css si large.css). Selectarea fisierului dorit se poate face de catre utilizatorii de Firefox si Opera, insa nu si cei cu Internet Explorer.

<link media="screen" rel="stylesheet" type="text/css" href="./normal.css" />
<link media="screen" rel="stylesheet" type="text/css" href="./font.css" title="Normal" />
<link media="screen" rel="stylesheet alternative" type="text/css" href="./large.css" title="Font mare" />
<style type="text/css">
@import url(print.css) handheld, print;
</style>

Versiunea tiparita a site-ului coincide cu versiunea pentru accesarea de pe dispozitive mobile (handheld), zonele “ascunse” fiind definite de clasa .netiparit.

Date comparative intre versiuni

Eliminand codul HTML redundant, noua versiune este valida XHTML si are un total de 69012 bytes – ceea ce inseamna o prima pagina mai mica de 4 ori decat originala!

Tip conexiune Versiunea originala Versiunea SW
14.4K 234.24 sec. 54.29 sec.
28.8K 117.22 sec. 27.54 sec.
33.6K 100.50 sec. 23.72 sec.
56K 60.38 sec. 14.55 sec.
ISDN 128K 18.63 sec. 5.01 sec.
T1 1.44Mbps 1.80 sec. 1.17 sec.

Beneficiile sunt evidente pentru vizitatorii site-ului (timp mai mic de incarcare al paginii) dar si pentru server, reducandu-se traficul generat de numarul mare de vizitatori.
Noua versiune este compatibilia cu numeroase browsere de pe diferite platforme. In arhiva din sectiunea download se gasesc 10 screenshot-uri, incluzand versiunea pentru tiparire si palm (emulator).

Concluzii

La realizarea noii versiuni am folosit TopStyle Lite si SciTE pentru editarea codului si IrfanView pentru editarea grafica.

In concluzie, trecerea la o versiune care sa respecte standardele W3C nu prezinta decat avantaje, modificarile necesare nefiind deloc costisitoare.