Maretul Cezar a spus ceea ce a ramas in istoria ca o strategie de succes in rezolvarea multor probleme(de razboi, de calcul, de viata...): "Divide et impera!". Intr-o traducere adaptata, foloseste div-urile si vei avea de castigat.
Cei care se indeletnicesc cu editarea HTML stiu cam care este treaba cu tag-urile div si table. Am vazut in articolele anterioare ca se cauta ca codul HTML sa fie cat mai simplu si curat, acest lucru oferind o serie de avantaje, printre care o indexare superioara in motoarele de cautare, o mai buna administrare a continutului site-ului, posibilitatea refolosirii anumitor bucati de cod, etc. In jurul aceleiasi idei se invarte si articolul de fata: optimizarea codului. Multa lume, mai ales cei mai newbies, folosesc inca tag-urile pentru a formata informatia in cadrul site-ului. De fapt, pana de curand, site-uri "respectabile" precum www.microsoft.com foloseau tables pentru layout. Desi in ziua de azi situatia este mult mai roz decat acum 3-4 ani, poate mai este cineva acolo care are ce invata de pe urma acestui articol. Si daca nu, tot e material bun pentru o discutie/analiza in domeniul interfetelor si site-urilor. Asa ca, here we go...
Cronologic vorbind, tag-ul table are intaietate, fiind mai batran, dar nu neaparat mai intelept. Aparut in HTML 3.2 si suportat inca de pe vremea lui Netscape 2.0, descrierea lui table scrie ca acesta poate fi folosit pentru a marca (nu stiu exact traducerea lui "mark up" din domeniul tipografic) date tabelare sau pentru layout. Desi utilizarea tabelelor pentru layout-ul unui site este permisa de definitia tag-ului, ea nu este indicata(discutii pe tema aceasta se pot gasi pe forum-uri, cu opinii pro si contra; ca exemple va ofer un forum de pe bytes.com si unul de pe killersites.com). Problema majora cu table apare cand este necesara folosirea tabelelor imbricate, nivelul de imbricare putand depasi usor limita anumitor browsere, pe langa faptul ca rezulta un cod foarte incalcit si greu de descifrat. De asemenea, datorita folosirii elementelor de layout, cum ar fi border, position, etc, continutul site-ului, textul propriu-zis, se departeaza tot mai mult de capul fisierului html. Aici intervine div-ul. Acest tag defineste o diviziune a site-ului, o portiune separata de restul codului, ce poate fi identificata dupa un id si apoi editata utilizand CSS (remember Zen Garden?). Daca folosim un fisier CSS extern, obtinem 2 avantaje: reutilizarea layout-ului CSS pentru diferite pagini, fara nevoia de e rescrie codul, si aducerea continutului site-ului mai aproape de header. Avand in vedere ca crawler-ele motoarelor de cautare au o limita de text pe care o pot parcurge, acest fapt permite micilor "gandacei" sa citeasca si sa indexeze o portiune mai mare de continut din site-ul vostru. Pentru ca tot codul de layout se gaseste intr-un fisier extern, pe pagina .html se va gasi decat continutul si tag-urile de definire a continutului (practic ajungem iar la problema separarii functiilor de definitie a continutului si definitie a formei unei pagini web). Alt avantaj care deriva din folosirea magicului div este o reducere consistenta a bandwith-ului folosit de server(aplicabil site-urilor intes accesate, gen www.microsoft.com). Poate va intrebati de ce am dat de doua ori ca exemplu site-ul baietilor lui Bill Gates... Pentru ca vreau sa va prezint un articol interesant, desi mai vechi(2004), despre starea in care se gasea site-ul Microsoft acum 4 ani, se gaseste pe www.stopdesign.com. In caz ca va este lene sa cititi sau sunteti ocupati cu tocatul legumelor pentru salata de bouef, va fac un rezumat. Site-ul inventatorilor Windows-ului se gasea intr-o stare jalnica, printre carentele sale enumerandu-se marimea fisierelor, diferenta de afisare intre browsere(preferat fiind, desigur, IE), codul greu de descifrat. Articolul demonstreaza clar cum se poate face o economie masiva de latime de banda daca se reformeaza site-ul si se renunta la costisitoarele "spacer gifs" si a tabelelor(vezi imaginea de dedesubt).
Un calcul sumar, 38,7 milioane accesari pe zi, 25 kb salvati per accesare, rezulta 924 Gb pe zi, respectiv 329 Tb(da, Terabytes) pe an (aviz amatorilor, nu am verificat corectitudinea calculelor). Doamne, cand ma gandesc cate as putea face cu atata banda. Recomand calduros tuturor firmelor cu o puternica latura web-oriented sa isi faca un control la site-uri, ca nu e de glumit cu criza asta financiara. In loc sa se reduca salariile (ahem, sefu, ma citesti?), mai bine s-ar reduce consumul de latime de banda la internet si alte astfel de cheltuieli, prin metode inteligente. Ca o remarca, am incerca sa vad in ce stare se afla astazi site-ul celor de la Microsoft, poate or fi citit si ei articolul, dar am renuntat rapid, deoarece codul era scris pe 3 linii. Am observat ca multe site-uri ale unor mari corporatii au site-ul scris pe cateva linii lungi cat o zi de post. Recunosc ca motivul pentru o astfel de asezare in pagina ma depaseste. Oricum, cu un mic search am descoperit ca intr-adevar, lipsesc tabelele. Deci oamenii s-au conformat intr-o oarecare masura.
Acum, am tot laudat div-ul, dar nu e bine nici daca trecem in extrema cealalta. Am aflat, pe cand ma documentam pentru articol, de existenta unei noi boli, o boala a designer-ilor de site-uri, DIVITITA(divitis in limba engleza). Pe csscreator.com aflam ce este aceasta boala si cum se trateaza.
Pe site-ul css-discuss.incutio.com gasim un articol ce promoveaza un compromis intre div si table pentru o armonie a codului html. Ceea ce este si normal, deoarece table are si el scopul lui, nu trebuie renuntat in totalitate la el in favoarea noului venit.
Ca incheiere, va las cu un filmulet ce arata bazele tag-ului div, asa ca aperitiv pentru cei interesati, si cu inca un link catre un articol pe tema div vs table:
In concluzie, folositi div si CSS pentru layout, si table doar pentru marcare date tabulare. Craciun fericit, si sa va aduca Mosul multe accesari si un loc cat mai fruntas pe motorul Google.
