Cod semantic și cod tableless

Chiar dacă a trecut mult timp de la buzz-ul cu renunțarea la tabele pentru designul unui site, am observat că încă sunt destui care nu înțeleg pe deplin acest … concept. Scriu acest post din două motive: am avut de curând un client (de fapt un intermediar) ce a cerut în mod express să NU folosesc tabele, chiar dacă datele erau tabulare și, mai deunăzi, m-a întrebat cineva pe messenger ce tag-uri ar putea folosi în locul table.

Wtf?! Tabele pentru design???

Dacă ești un pic mai vechi în domeniu sau ai avut tangențe constante cu dezvoltarea web, probabil ai observat că în urmă cu aproximativ 5-6 ani a început un adevărat jihad împotriva tabelelor. De ce? Pentru că un site era „modelat” pe un tabel uriaș în care erau inserate alte tabele, în care erau inserate alte tabele și tot așa, nefiind decât o limită a bunului simț în ceea ce privește nivelul tabelelor.

Avantajul major? 90% din browsere interpretau codul în mod identic (sau cu diferențe foarte mici). Desigur, asta se întâmpla când CSS-ul era ceva proaspăt, iar suportul în browserele momentului (IE 5.0/IE5.5/IE5 pentru Mac și Netscape 4) era la un nivel minim, făcând scrierea unui cod corect un adevărat chin.

Dezavantajele tabelelor se făceau simțite în diverse situații: persoanele cu probleme de vedere ce foloseau un screen reader aveau probleme în citirea paginii (un screen reader citește „cu voce tare” ce apare pe ecran), lățime de bandă consumată inutil (dimensiunea unei pagini cu tabele fiind considerabil mai mare; se spune că traficul – în kb – microsoft.com s-a înjumătățit după renunțarea la tabele pentru design ), întreținere greoaie (din moment ce nu se folosea CSS, stilizarea se făcea inline; atribute precum bgcolor încă mai există :D ) șamd.

CSS ce?

CSS-ul are avantaje din toate punctele de vedere, mai ales acum, când toate browserele oferă un suport cel puțin decent (da, inclusiv IE6!):

  • Trafic mai mic în kb (așa cum am zis mai sus. De ce? Majoritatea fișierelor externe (css, js) sunt descărcate o singură dată. După aceea sunt citite din cache. Desigur, cu mici excepții, în care utilizatorul/administratorul de rețea a setat browserul altfel. În plus, folosești mai puțin cod html.
  • Poți face rapid și foarte ușor modificări în fișierul CSS pentru tot site-ul.
  • Site-ul va fi mult mai accesibil persoanelor cu dizabilități.

Extrema!

Problema cea mai mare la css este următoarea: sunt mulți coderi care au sărit un pas. Acela în care învățau DE CE e bine să folosești css dar mai ales CUM. Prin urmare, au apărut tot felul de combinații: de la boldarea unui text folosind:

<div class="bold">text</div>
.bold {
display:inline;
font-weight:bold;
}

ajungând până la folosirea altor elemente pentru tabele decât… tabelele. E posibil să ți se pară incredibil exemplul de mai sus, dar l-am întâlnit de curând într-un site. Amuzant sau nu, te las pe tine să decizi.

Dacă e valid….

Dacă ai un cod valid (conform w3c) nu înseamnă neapărat că totul e ok. Poți face un site exclusiv cu span-uri ? Poți (desigur, mai puțin pentru link-uri)! E corect?

Un cod semantic înseamnă să:
1) Folosești denumiri ce sugerează conținutul unui element, nu aspectul. Ce înseamnă asta? div id="right" pentru un sidebar (de exemplu) este greșit. div id=sidebar" în schimb, este corect. De ce este greșit? În urmă cu câțiva ani, trendul general era să se poziționeze sidebar-ul în partea stângă. De când au apărut blogurile, sidebar-ul s-a mutat în partea opusă. Imaginează-ți că ai un div id="left" și vrei să-l muți în dreapta. Se poate, cu schimbări minime în css. Dar după aceea va mai avea sens?
2) Folosești tag-urile corecte. Așa cum am zis mai sus, poți face un site exclusiv folosind tag-ul span: la fiecare span îi dai o clasă, stilizezi fiecare clasă după necesități și gata. Ce înseamnă să folosești tag-urile corespunzătoare? Pe lângă clasicile (deja) h1h6 pentru titluri/subtitluri/sub-sub-….-titluri, p pentru paragrafe, span pentru evidențierea/stilizarea separată a unei porțiuni dintr-un text (de exemplu), mai este încă un tag. Care, dacă faci parte din dezvoltatorii de care am pomenit mai sus, îți va provoca un șoc:

FOLOSEȘTE TABLE!

Când folosești tabele? Răspunsul cel mai simplu, ce ți-l poate da 95% din cei ce au văzut mai mult de 5 linii de cod este: „când ai de afișat date tabulare”. Dar ce înseamnă date tabulare? Cum le identifici?

De fiecare dată când sunt întrebat acest lucru (și crede-mă, nu se întâmplă foarte rar!), răspund, invariabil în următorul fel:

Respectivele date pot fi inserate cu ușurință într-un document excel?

Dacă răspunsul este afirmativ, în 99% din cazuri vei avea nevoie de tag-ul table și de tot ce ține de tabele: tr, th, td etc. Etc? De ce etc? Pentru că astea nu sunt singurele tag-uri specifice tabelelor !

Cum verifici codul?

Cea mai mare problemă cu codul semantic este că… nu se poate verifica. Nu există (sau cel puțin nu din câte știu eu) un validator pentru semantică. Prin urmare, cea mai bună validare se face în următorul fel:

  1. Instalezi web developer toolbar (presupun că folosești firefox);
  2. După ce încarci pagina care vrei să o validezi apeși Ctrl+Shift+S. Ca prin farmec, stilurile vor fi dispărute.

După ce ai procedat în acest fel, încearcă să utilizezi pagina respectivă. Dacă toate elementele spun ceea ce ar trebui să spună, felicitări! Ai un site semantic! (încearcă pe această pagină să dezactivezi stilurile)

Când încalci regulile?

Teoretic (și recomandat), niciodată. Practic însă, ești nevoit, în unele cazuri să calci și strâmb. De exmplu, butoanele sliding doors. Da, merge, e ok. Dar span-ul din interiorul linkului nu „spune” nimic.

O soluție pentru a evita astfel de probleme de semantică ar fi injectarea respectivelor tag-uri în DOM folosind js sau o librărie js (jQuery, prototype, moo etc). Mie mi se pare o măsură ușor extremă, dar… pentru unii poate părea o idee bună :D

O altă situație în care de voie, de nevoie, încalci regulile ar fi în cazul tag-ului hr și a elementelor de formular. Acestea arată diferit pe fiecare browser (inclusiv pe versiuni diferite ale aceluiași browser!). Aici folosesc, aproape în toate cazurile, js fără să stau prea mult pe gânduri.

Linkuri utile/interesante

http://www.hotdesign.com/seybold/everything.html
http://www.csszengarden.com/

Exemplu. Negativ (editare ulterioară)

De cum m-am trezit, Andrei mi-a arătat un site: lucrurigratis.ro. Nu comentez despre utilitatea site-ului (pentru că unii îl pot considera folositor). Dar dacă te uiți în cod, s-ar putea să ai un șoc. Este greșit din atâtea puncte de vedere încât mi-e și frică să fac un review. Așadar, te las să te delectezi cu un cod. Enjoy!

Btw, cred că este al țâșpelea site care îmi confirmă că măcelarii programatorii ASP habar n-au html.

8 Comentarii to “Cod semantic și cod tableless”

  1. Mi-a prins bine articolul asta.
    Inainte eram de parere ca un cod valid w3c e automat perfect ( semantic inclus ). O perioada am folosit divuri pentru titluri, asta pana cand am dat peste un articol SEO. Acum vad ca pe langa SEO mai e chestia si de semantica.

    Ideea este ca am invatat prin incercare + greseala, niciodata nu am stat sa citesc, prin urmare le-am folosit doar avand in minte “afisarea”, nu si “cand, de ce”. Initial mi se parea mai usor sa folosesc un div decat sa fac reset la H1/2 etc.

    Stiam de Web Developer dar nu si de chestia cu CTRL + SHIFT + S si semantica. Daca am inteles bine, ca sa fie semantic 100% nu e suficient sa fie functional dupa “No styles” ci si sa aibe clase descriptive.

    Am incercat sa fac asta pentru datele despre care te-am intrebat aseara. Pare ok : http://i36.tinypic.com/24nohf4.png .

  2. Staicu Ionuț-Bogdan

    Stiam de Web Developer dar nu si de chestia cu CTRL + SHIFT + S si semantica.

    Iar Ctrl+Shift+A îți validează HTML-ul ;)

    Daca am inteles bine, ca sa fie semantic 100% nu e suficient sa fie functional dupa “No styles” ci si sa aibe clase descriptive.

    Exact :)

  3. Super fain articolul. Nu sunt maestru in css dar ma pricep si eu ici colo. Da-mi o solutie pentru problemele din http://www.pixiemag.com/chiar-asa/
    Merci.

  4. Staicu Ionuț-Bogdan

    Nu înțeleg, ce probleme?
    Dacă nu e legat de articol, trimite-mi te rog un email.

  5. Frumos articolul. Foarte bine descris. Dar sa faci din CSS un doar pentru a pune bold e o prostie mare zic eu. Poate ca nu stia altfel. Ideea e ca i-a iesit pana la urma :)

  6. Staicu Ionuț-Bogdan

    Ideea e ca i-a iesit pana la urma :)

    Nu, nu asta e ideea. Mai încearcă ;)

  7. Merge si asa, dar e aiurea. Asa e cand esti incepator.

Show trackbacks
  1. […] Gratis este un site ce l-am prezentat în articolul anterior la exemple de „așa nu”, fiind „wrong on so many levels” încăt nu m-am obosit să-i fac o […]

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter