De ce nu sunt bune tabelele pentru prezentare:

problemele sunt definite, soluţii oferite

Tabelele au existat în HTML cu un scop: Pentru a prezenta informaţia tabelară. Dar apoi border="0" a permis designerilor să amplaseze imagini şi text în aceste tabele. Încă fiind cel mai predominant stil de a crea pagini vizual-bogate, utilizarea tabelelor acum de fapt este o piedică pentru crearea a unui Web mai bun, mai accesibil, mai flexibil şi mai funcţional. Aflaţi unde apare problema şi aflaţi cum să creaţi pagini tranzitive în întregime fără tabele.

Aduceţi şeful

Sunt persoane "la costum" în audienţă? Şefii D-stră sunt acum la Seybold, însă la alt seminar? Aduceţi-i chiar acum. Ei sunt cei care trebuie să cunoască cum standardele Web pot salva banii companiei.

Generalizare: Ce am eu din aceasta?

Noi Vă vom arăta un mod de a lucra care

Pe lîngă aceasta, noi vom mai vorbi despre cum prezentarea paginilor cu ajutorul a Cascading Style Sheets (CSS) necesită o gîndire despre conţinutul şi marcare diferită de cea cu care te-ai obişnuit.

Web situri ucigaşe: tabele cuibărite şi separatori GIF

La început, Internetul a fost elaborat pentru ca academicienii, cercetătorii şi militarii să împartă informaţii specifice. Însă, nu a durat mult pînă antreprenorii au văzut acest mediu ca ideal pentru a vinde orice, de la legume proaspete şi mîncare pentru cîini pînă la automobile de mîna a doua.

Însă, cum şi cu alte medii în perioada sa infantilă, Internetul tînăr era estetic ‘crud‘ (şi nu chiar atrăgător pentru consumatori) pînă cînd David Siegel a publicat cartea sa, care a oferit nişte înconjurători sclipitoare a limitărilor browserelor existe şi a specificaţiilor W3C circa 1997. (Vorbim despre Netscape 2 şi 3)

Aceste înconjurători erau atît de remarcabile, încît ele pînă astăzi prevalează în prezentarea paginilor Web.

Problema cu utilizarea tabelelor:

Salvarea e în mîinile noastre

Browserele moderne sunt mult mai bune la prelucrarea standardelor Web şi noi nu mai avem nevoie de metodele arhaice.

În locul să cuibărim tabele în interiorul altor tabele şi să punem separatori GIF în celulele pustii, noi putem utiliza o marcare mult mai simplă şi CSS pentru a prezenta siturile mai frumos, mai rapid, mai uşor de modificat şi mult mai accesibile pentru toţi.

Soluţia: CSS şi marcarea structurală

Utilizînd marcarea structurală în documentele noastre HTML iar CSS pentru a prezenta paginile noastre, noi putem păstra conţinutul paginilor separat de modul în care acesta este afişat.

Aceasta are mai multe avantaje faţă de metoda tabelelor....

Re-designul este mai uşor şi mai ieftin

Prin înlăturarea marcării prezentaţionale din paginile D-stră, re-designul devine mult mai simplu şi necesită mai puţină muncă (şi este mult mai ieftin ). Pentru a modifica modul de prezentare a paginilor, tot ce este nevoie să faceţi este să modificaţi codul CSS; nu este nevoie să modificaţi însăşi paginile cu conţinut.

De exemplu, priviţi situl CSS Zen Garden, sau schimbarea CSS-ului pe pagina lui Eric Meyer. Pentru a afla mai multe, vezi Alternative Style de Paul Sowden.

Traficul nu este gratuit

Utilizarea standardelor Web reduce mărimea fişierilor a paginilor sitului, deoarece utilizatorii nu mai sunt nevoiţi să descarce aceeaşi informaţie prezentaţională de fiecare dată. CSS-ul ce răspunde de reprezentarea grafică se păstrează de către browserul utilizatorului în cache.

Fişiere mai mici rezultă în deschiderea mai rapidă a paginilor şi mai puţin trafic folosit.

Hey, toate aceste pagini se aseamănă între ele!

Utilizarea standardelor Web simplifică păstrarea consistenţei vizuale pe întregul sit. Deoarece paginile utilizează acelaşi document CSS pentru afişare, ele toate sunt formatate la fel.

Aceasta întăreşte brandul D-stră şi face situl mai comod.

Scrii o singură dată, utilizezi oriunde, pentru toţi

Utilizînd standardele Web paginile devin mult mai accesibile utilizazorilor cu deficienţe şi persoanelor ce utilizează telefoanele mobile sau PDA pentru a accesa Internetul.

Utilizatorii nu mai sunt nevoiţi să descarce nenumărate tabele şi celule pentru a vedea conţinutul pentru care şi au intrat pe sit.

În alte cuvinte, prin separarea conţinutului de modul de prezentare, situl devine accesibil pe orice platformă.

Google este orb

Vorbin despre accesibilitate: micşorarea numărului de tag-uri utilizate şi utilizarea corectă a acestora va îmbunătăţi poziţia sitului în motoarele de căutare.

Reducerea raportului cod/conţinut, utilizînd cuvinte cheie în headers, înlocuind imaginile ce conţin text cu textul curat, toate acestea vor ajuta situl să fie plasat mai bine în rezultatele căutării.

Încă mai puteţi utiliza tabele, însă nu atît de multe

Aceasta va arăta cititorilor (şi şefilor) care sunt determinaţi să utilizeze a 4-a versiune a browserilor pînă la sfîrşitul zilelor sale cam ce vede restul lumii.

Un tabel ce arată destul de plăcut

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
• At vero eros et accumsan et iusto odio dignissim qui blandit
• Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
• Epsum factorial non deposit quid pro quo hic escorol.
• Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
• Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
• Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Priviţi ce este la bază

Aceasta într-adevăr poate fi realizat mai simplu . Ghiciţi cît cod inutil conţine acest tabel? 13.7k. În total sunt 17 rînduri şi 9 coloniţe. Şi să nu mai menţionăm GIF-urile transparente!
Aici sunt mult prea multe celule şi separatori. Şi acest linii punctate sunt create prin atributul background în celule, ceea ce nu va fi validat.
• Încă un tabel cuibărit? Pentru ce?
• Pentru a face o listă punctată? Glumiţi, nu?
Toate acestea pot fi realizate cu 8 celule de tabel şi 4 reguli în CSS. Serios. 8 celule şi reguli în css, doar atît.
• O nu, încă un tabel mascat drept o listă punctată.
• Doar marcaţi lista ca o listă punctată şi CSS-ul se va ocupa de restul.
Aveţi nevoie de o regulă pentru <table>, una pentru <td>, una pentru <ul> şi una pentru <li>. Atît. După aceasta totul va fi gata.
• E mai bine decît să folosiţi 8 celule pentru a simula o listă punctată, rezultînd în ceva foarte inaccesibil.
• Excelent! Ultima bulină simulată.

CSS Codul ce arată structura tabelului:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }

Acum e mult mai bine

mult mai bine Ghiciţi cît cod avem în acest tabel? 2.1k. Avem 4 rînduri şi 2 coloniţe. Şi nici un GIF transparent.
tocmai cum trebuie Şi toate aceste linii punctate sunt realizate prin CSS şi sunt perfect valide.
  • Acesta este un element din listă
  • Tocmai aşa cum trebuie să fie
Aceasta este realizat prin 8 celule şi 4 reguli css. Serios. 8 celule şi 4 reguli CSS, e tot de ce este nevoie.
  • Ura pentru listele punctate
  • De ce să nu marcăm listele punctate drept liste punctate, şi să lăsăm CSS să se ocupe de restul?
Aveţi nevoie de o regulă pentru <table>, una pentru <td>, una pentru <ul> şi una pentru <li>. Atît. Acum avem totul necesar.
  • Eu iubesc listele punctate!
  • Excelent! nu mai avem buline false.

Iată codul CSS ce face toate aceste minuni:

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }

Designul tranzitiv

Utilizaţi margin şi padding în loc de celulele adăugătoare şi separatori GIF.

Utilizaţi link şi @import pentru stiluri. Prima pentru browserele vechi, a doua pentru cele moderne.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Exemple reale:

Dar staţi, mai este ceva:

Pentru mai multe informaţii despre designul tranzitiv, citiţi capitolul 1 al cărţii Eric Meyer on CSS şi multe ale lui Jeffrey Zeldman's Designing with Web Standards.

Prezentarea în CSS: viitorul este aici

Majoritatea utilizatorilor se folosesc de browsere ce interpretează documentele CSS foarte bine. Toate au specificul său, dar odată ce te obişnuieşti, te vei isprăvi cu toate.

Să codezi în CSS este simplu. Chiar şi pentru un băiat ca mine, care consideră că o bună parte din JavaScript seamănă cu nişte înjurături.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Fiecare regulă CSS are un selector şi o declaraţie. Declaraţia este alcătuită din proprietate şi valoare. Proprietăţile care sună ca două cuvinte trebuie separate prin cratimă.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}

#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}

Marcarea structurală : codează ce înţelegi, înţelege ce codezi

În timp este simplu să scrii un document CSS, să utilizezi CSS pentru prezentare necesită o gîndire puţin diferită de cea cu care majoritatea din noi s-a obişnuit.

În loc să gîndim "aceasta va fi aici, iar aceea acolo " în timp ce ne ocupăm de o pagină, noi trebuie să ne gîndim la tipurile de informaţie în pagina noastră şi la structura acestei informaţii.

Celui mai important titlu de pe pagină îi alocăm tag-ul <h1>; sub-capitolele sunt marcate cu <h2>, etc.; iar paragraful este paragraf.

Aceasta este cunoscută drept marcare "structurală" sau "semantică".

În loc să plasaţi conţinutul în tabele şi în celule de tabel, plasaţi înăutrul unui element div. Alocaţi acestui element div un id sau o clasă care mai mult descrie conţinutul sau funcţia elementului decît aparenţa acestuia.

Evitaţi marcajul <b> şi <br>

Gîndiţi-vă de ce doriţi ceva să fie prezentat într-un mod anumit; ce semnifică? Marcajul poate şi trebuie să fie însoţit de un sens, chiar şi pentru cineva care nu poate vedea pagina D-stră. Marcajul semantic uşurează accesul la sit pentru toţi, inclusiv pentru motoarele de căutare.

Cînd înclinaţi ceva, motivul e că doriţi să evidenţiaţi, <em>, sau deoarece e titlul unei cărţi, <cite>?

Dacă ceva este accentuat, probabil că ar trebui marcat cu <strong>.

Dacă doriţi o linie nouă după ceva, există o probabilitate că trebuie acest ceva să marcaţi ca un element de titlu (header). Dacă nu este un titlu, acest element face parte dintr-o clasă care se repetă mai des pe întregul sit? Dacă da, atunci utilizaţi CSS în loc de <br>.

.foo {display:block}

Pentru a afla mai multe, citiţi Bed and BReakfast markup (B&BR) de Tantek Çelik.

Ce sunt barele de navigare?

Gîndiţi-vă: navigarea D-stră este de fapt o listă neordonată.

Marcaţi totul într-un tag <ul>.

  • link1
  • link2
  • link3
  • link4
  • link5

Barele orizontale de navigare

Noi putem utiliza CSS pentru a controla cum aceste liste sunt afişate pe paginile noastre.

Utilizînd display:inline noi putem crea bare orizontale de navigare.

Iată codul utilizat pentru această bară:

#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}

#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}

#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}

#nav1 li:first-child {
border: none;
}

Bare verticale

Iată codul utilizat pentru această bară:

#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}

#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}

#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li {
width: auto;
}

#nav2 li:first-child {
border: none
}

Pentru mai multe informaţii, vedeţi articolul lui Mark Newhouse, Taming lists, la A List Apart, şi "Styling lists" pe CSS-Discuss wiki.

Unde tabelele sunt mai bune decît CSS

Sunt unele lucruri unde CSS nu se isprăveşte atît de bine ca tabelele.

De exemplu, să presupunem că avem o bară laterală de navigare care doriţi să se extindă pe întreaga înălţime a conţinutului. Cu ajutorul tabelelor, aceasta este foarte simplu: acelei celule <td> îi aplicăm un background negru.

Noi putem face aceasta şi prin CSS, însă este necesar să gîndim puţin altfel.

Dacă noi atribuim elementului nostru div un background negru, culoarea neagră se va extinde numai pînă la 'sfîrşitul' elementului. Pe majoritatea paginilor, conţinutul este mai mare decît navigarea, deci acest mod nu ne convine.

Ca alternativă, noi am putea repeta un GIF de culoare neagră în conţinutul elementului div şi să atribuim acestui div destul spaţiu din stînga, dar dacă navigarea va fi mai înaltă decît conţinutul, tot nu este bine.

Încă o modalitate ar fi să repetăm acest GIF de culoare neagră pe backgroundul elementului <body>, ceea ce este o soluţie bună, atîta timp cît nu doriţi să utilizaţi o altă imagine pentru elementul <body>.

Sau, putem înfăşura conţinutul nostru într-un div şi să repetăm acea imagine în div. Însă, aceasta creează murdărie non-semantică în marcajul nostru.

Şi, desigur că, repetarea unei imagini ca background nu va funcţiona corect dacă dorim ca bara noastră de navigare să fie elastică.

Cum am mai spus, sunt unele chestii unde tabelele sunt mai puternice decît CSS. Dar în final, fiecărui îi aparţine decizia dacă tot bagajul care vine odată cu utilizarea tabelelor justifică puţinele avantaje al utilizării acestora.

Migrarea de la tabele la standardele Web: întreaga perspectivă

În primul rînd trebuie să elaboraţi o strategie de migrare. Doriţi să migraţi îndată întregul sit, sau acest proces va decurge în mai multe etape, fiecare secţiune separat?

Identificaţi secţiunile şi paginile care vor benifia cel mai mult în urma migrării. Paginile de start, anunţarea produselor noi şi pagini asemănătoare reprezintă un bun început.

Identificaţi tipul de conţinut/informaţie pe sit ca un tot întreg

  • Informaţie despre produse
  • Informaţie despre preţuri
  • Informaţie despre companie
  • Portofoliu
  • Servicii oferite
  • Informaţie pentru investori
  • Coşul cu cumpărături
  • Forum
  • şi aşa mai departe

Separarea paginilor

După ce cunoaşteţi tipurile de conţinut pe sit, e timpul să analizaţi paginile existente pentru a găsi secţiuni logice

  • Navigarea principală
  • Navigarea secundară
  • Titlu şi subsol
  • Conţinut
  • Informaţie ajutătoare
  • Altele

Analizaţi structura tabelelor, localizaţi tabelele cuibărite, separatorii GIF, celulele pustii. (Noi dorim să le înlocuim pe acestea cu elemente div sau cu o structură tabelară mult mai simplă)

Analizaţi marcajul

După ce am analizat structura paginilor, e timpul să ne uităm la codul HTML existent şi să localizăm elementele ce pot fi înlocuite cu marcaj structural.

  • De dragul a tot ce este pur şi bun, scăpaţi de <font> şi separatorii GIF!
  • Scăpaţi de marcajul <b> şi <br>.
  • Scăpaţi de marcajul prezentativ pentru tabele (bgcolor, background, şi restul).
  • Înlocuiţi codul CSS pur prezentativ (chestii ca <span class="header">) cu marcaj structural potrivit. (Tantek Çelik scrie mai detailat în A Touch of Class.)

Înlocuiţi marcajul prezentativ cu cel structural

Puteţi utiliza 'caută şi înlocuieşte' (şi expresii simple), dar cel mai simplu ar fi să deschideţi pagina existenţă în browser şi să copiaţi tot textul într-un HTML editor.

Gîndiţi-vă la structura documentului! Doar să înlocuiţi <b> cu <strong> nu este suficient.

Care este cel mai important titlu? Marcaţi-l cu <h1>. Titlurile secundare marcaţi-le cu <h2> ş.a.m.d. Paragrafele le marcaţi cu <p>. Marcaţi navigarea ca o listă neordonată.

Alegeţi DOCTYPE şi utilizaţi. (Noi recomandăm XHTML transitional, însă dacă sunteţi foarte hotărît, puteţi încerca şi XHTML strict.)

Divizaţi pagina logic în divs

Puneţi navigarea principală într-un div cu id mainnav; puneţi navigarea secundară într-un div cu id sau clasa subnav, puneţi subsolul într-un <div id="footer">, iar conţinutul de bază al sitului în <div id="content">.

Acum nu pare cine ştie ce, însă cînd începeţi să adăugaţi regule în CSS, totul va deveni mai calitativ foarte curînd.

E timpul să scrieţi CSS-ul

La început, daţi fiecărui div un cadru. De exemplu, div {border: 1px dotted gray; padding: .5em} Aceasta Vă va ajuta să vedeţi unde elementul începe şi unde se termină, şi dacă careva elemente se unesc între ele.

La început scrieţi CSS pentru selectorii elementari (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.)

Utilizaţi selectori contextuali sau descendenţi cît mai frecvent. Aceasta va păstra marcajul D-stră mai curat. De exemplu, #subnav li {border: 1px solid black; padding: .5em; display: inline} va afecta numai elementele dintr-o listă din div cu id 'subnav'.

Testaţi în cît mai multe browsere posibil şi rugaţi prietenii să testeze în browserele lor.

Exemple de situri care sunt prezentate prin CSS

Citiţi totul despre aceasta

Este evident că noi nu putem acoperi tot ce trebuie să cunoaşteţi despre designul siturilor cu ajutorul CSS într-o oră, dar aceste cărţi Vă pot ajuta să înţelegeţi mai bine utilizarea standardelor Web pentru a crea pagini mai uşoare, curate şi accesibile.

Hîrtie? Noi nu avem nevoie de hîrtie: Surse online

CSS-Discuss

  • mailing list: Foarte activ, foarte folositor.
  • Wiki: "Pe lîngă altele, wiki mai serveşte ca o memorie colectivă pentru participanţii mailing listului." Doriţi să încărcaţi în Internet Explorer pentru Windows ceva ce acest browser înţelege, iar în alte browsere mai bune reprezentarea 'cea bună'? Aceasta şi mai multe ve-ţi afla aici.
  • Archives: Aveţi o problemă cu CSS din cauza căreia sunteţi blocat? Fără griji, cineva a mai avut (şi a primit ajutor) această problemă. Găsiţi răspunsurile aici.

zeldman.com The Daily Report: Informativ, provocător şi conţinut bine-scris.

A List Apart Pentru oamenii ce creează situri web

The Web Standards project Binecuvîntaţi aceşti oameni.

CSS: A guide for the unglued O pagină foarte bună cu linkuri

CSS Layout Techniques: for Fun and Profit Layouturi pe care le puteţi utiliza în proiectele personale, de la Eric Costello. Surse şi lecţii.

Real World Style CSS layouturi, sfaturi, şiretlicuri, şi tehnici de la Mark Newhouse.

The Business Benefits of Web Standards Bazele standardelor Web care pot fi înţelese nu doar de programatori.

Mulţumesc. Aveţi întrebări?

; Scott Design, Inc.

; Adobe Systems Incorporated

Nu ne învinuiţi pe noi!

Cu toate că am încercat să traducem acest articol cît mai corect, totuşi posibil doriţi să citiţi versiunea originală în engleză.

Dacă a-ţi găsit ceva greşeli în traducerea mea, scrieţi-mi o scrisoare şi voi efectua corectările necesare!

Tradus în limba română de: Brînzan Dumitru.

Versiuni internaţionale

Noi devenim globali! Dacă aceasta nu este limba maternă, verificaţi pagina cu traduceri. Dacă doriţi să traduceţi acest articol în limba maternă a D-stră, .

Creative Commons LicenseThis work is licensed under a Creative Commons License.