Zašto je glupo praviti web stranice pomoću tabela:

definisani problemi, ponudjena rešenja

Tabele su postojale u HTML-u iz jednog jedinog razloga: Da prikazuju tabularne informacije. Ali onda je border="0" omogućio dizajnerima da prave mrežu pomoću koje su mogli da slažu slike i tekst. Kao još uvek najdominantniji način vizuelnog dizajniranja bogatih web sajtova, upotreba tabela sada već onemogućava pravljenje boljeg, pristupačnijeg, fleksibilnijeg and funkcionalnijeg Web-a. Saznajte gde je osnova problema i naučite rešenja pomoću kojih možete praviti tranzicioni model ili kompletno uredjenje web stranice bez tabela.

Idite po šefa

Ima li funkcionera u publici? Jesu li vaši šefovi ovde u Seybold-u, ali prisustvuju drugoj sesiji trenutno? Idite po njih. Oni su ljudi koji trebaju da znaju kako Web standardi mogu da uštede novac vašem preduzeću.

Pregled: Šta ja imam od svega toga?

Daćemo vam uvod u način rada koji će vam:

• pomoći da se web stranice preuzimaju brže
• smanjiti troškove hostovanja
• pomoći da radite re-dizajnove efektivnije i jeftinije
• pomoći da održite visualnu doslednost kroz ceo sajt
• dati bolje rezultate na Internet čitačima
• napraviti sajtove dostupnijim svim posetiocima i korisničkim klijentima
• dati kompetitivnu prednost (to jest, budući posao) kako se sve više korisnika okreće upotrebi Web standardá

Isto tako ćemo pričati u tome kako oblikovanje stranica pomoću Kaskadne Liste Stilova (Cascading Style Sheets - CSS) zahteva neznatno drugačiji način razmišljanja o sadržaju i oznakama, na koji ste do sada navikli.

Impresivni Web Sajtovi: umetnute tabele i providni GIF-ovi

U početku, Internet je primarno bio medijum raspodele informacija za akademike, istraživače i vojsku. Ipak, nije dugo potrajalo da privrednici sa vizijom shvate da je ovaj novi medijum idealan za prodaju svega od svežeg voća i povrća, pseće hrane do polovnih kola i prenosa sportskih utakmica.

Uostalom, kao sa bilo kim drugim medijem u začetku, rani Internet je bio estetski ‘grub’ (i ne nešto preterano privlačan potrošačima) sve dok Dejvid Sigel (David Siegel) nije objavio svoju poznatu knjigu, koja je ponudila neke od sjajnih zaobilaznica oko nedostataka postojećih Internet čitača i W3C specifikacije 1997 godine. (Pričamo o Netscape 2 i 3, narode).

Ove zaobilaznice su bile tako briljantne da su, u stvari, i dan danas preovladavajući metod za prikaz i kreiranje Web stranica.

Problemi pri upotrebi tabela:

• Mešanje prezentacionih podataka sa sadržajem.
  • Vodi ka nepotrebnom povećanju veličine stranica, tim što korisnici preuzimaju ove prezentacione podatke za svaku stranicu koju posete.
  • Propusna moć se plaća (bandwidth).
• Vodi ka ekstremno intenzivnom i skupocenom procesu kod re-dizajniranja i menjanja sadržaja postojećih web sajtova.
• Veoma otežava (poskupljava) održavanje vizualne doslednosti kroz ceo web sajt.
• Stranice bazirane na tabelama su manje dostupne invalidima i posetiocima koji koriste mobilne telefone i PDA uredjaje prilikom pristupa Internetu.

Stiže spasenje

Moderni web čitači su dosta bolji u predstavljanju Web standardá i više nije potrebno da koristimo ove arhaične metode.

Umesto umetanja tabela u tabele i popunjavanja praznih ćelija sa providnim GIF-ovima, možemo koristiti dosta jednostavnije oznake i CSS da kreiramo lepe web sajtove koji su brži za preuzimanje, lakši za re-dizajniranje i pristupačniji za sve.

Rešenje: CSS i strukturne oznake

Koristeći strukturne oznake u našim HTML dokumentima i Kaskadne Liste Stilova prilikom kreiranje web stranica, možemo razdvojiti sadržaj naših stranica od načina na koji su one prikazane.

Ovo ima nekoliko prednosti u odnosu na upotrebu tabela...

Re-dizajn je lakši i jeftiniji

Eliminisanjem prezentacionih podataka iz vaših stranica, re-dizajn postojećih sajtova postaje jednostavniji i jeftiniji. Da promenite izgled web sajta, sve što treba da uradite je da promenite listu stilova; ne treba da menjate same stranice uopšte.

Na primer, pogledajte CSS Zen Garden, ili promenu stilova na Erik Mejerovom web sajtu (Eric Meyer). Da bi naučili još više, pogledajte Alternative Style od Pol Sodena (Paul Sowden).

Propusna moć se plaća

Upotreba Web standardá smanjuje veličine datoteka (fajlova) vaših stranica, tim što korisnici više ne moraju da preuzimaju prezentacione podatke prilikom svake posete stranici. Liste Stilova koji kontrolišu izgled su skladištene od strane web čitača.

Smanjena veličina datoteke znači brže preuzimanje i jeftiniji hosting.

Hej, ove stranice liče jedna na drugu!

Upotreba Web standardá uslovljava jednostavno održavanje vizuelne doslednosti u celom Web sajtu. Sve stranice izgledaju istovetno, jer upotrebljavaju isti CSS dokument za prikaz.

Ovo jača vaš brend i čini vaš sajt upotrebljivijim.

Jednom piši, svuda upotrebi, svakome daj

Upotreba Web standardá čini naše stranice pristupačnijim korisnicima sa invaliditetima, kao i korisnicima koji upotrebaljavaju mobilne telefone i PDA uredjaje da pristupe Internetu.

Korisnici koji upotrebljavaju čitače ekrana (kao i oni sa sporim vezama) ne moraju da gaze po bezbrojnim ćelijama tabela i providnim GIF-ovima da bi došli do stvarnog sadržaja na našim stranama.

Drugim rečima, razdvajanje sadržaja od načina na koji je on predstavljen čini vaš sadržaj nezavistan od uredjaja.

Google je slep

Kada govorimo o pristupačnosti, minimiziranje vaših oznaka i pravilna upotreba oznaka u zaglavlju, znatno pomaže u rangiranju na Internet pretraživačima.

Smanjenje količine koda u odnosu na sadržaj, upotreba ključnih reči u zaglavljima, i zamena GIF-ova u zaglavljima sa tekstom pomaže da vaš sajt dobije bolje rezultate na Internet pretraživačima.

I dalje možeš koristiti tabele ako su potrebne, ali ne previše

Sve ovo pokazuje korisnicima (i šefovima), koji su ograničeni i naviknuti da upotrebljavaju Web čitače verzije 4 sve do smrti, prihvatljivu aproksimaciju šta to vidi ostatak sveta.

Prilično lepa tabela

		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.

A sad, pogledajte ispod površine

		Ovo je moglo da se uradi mnogo jednostavnije.				Pogodite koliko oznaka ima u ovoj maloj tabeli? 13.7k. Ovde ima tačno 17 redova i 9 kolona. A jesam li pomenuo providne GIF-ove?
		Ovde ima previše tabelarnih ćelija i providnih GIF-ova.				Sve tačkaste ivice su uradjene sa background atributom na svakoj ćeliji, koji se nikada neće validirati. • Umetnuta tabela? Zašto? • Da bi napravili listu nabrajanja? Šalite se?
		Sve bi ovo moglo da se uradi sa 8 tabularnih ćelija i 4 CSS pravila.				Najozbiljnije. 8 ćelija i 4 CSS pravila, to je sve što je potrebno. • Oh ne, još jedna tabela maskirana kao lista nabrajanja. • Sve što je potrebno je da markirate vašu listu nabrajanja kao takvu i CSS će da završi sve ostalo.
		Treba ti jedno pravilo za <table>, jedno za <td>, jedno za <ul> i jedno za <li>.				To je to. Jednom kad uradite tako, onda ste car. • To je bolje nego koristiti još 8 tabularnih ćelija da bi napravio lažnu listu nabrajanja, koja na kraju bude manje pristupačna. • Odlično! To bi bilo to.

Sledeći kod pokazuje strukturu tabele:

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

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

Ovo je mnogo bolje

A ovo je CSS kod koji eliminiše nepotrebne oznake:

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 }

Sumiranje tranzicionog dizajna

Koristite margine i blokove umesto dodatne ćelije i providne GIF-ove.

Koristite vezu i uvezite stilove (@import). Prvi za stare čitače, drugi za moderne.

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

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

Stvarni primer:

• Santa Cruz Montessori School
• k10k
• Fox Searchlight Pictures

Ali čekate, ima još:

Za više informacija o tranzicionom dizajnu pogledajte prvo poglavlje u Eric Meyer on CSS i većinu Jeffrey Zeldman’s Designing with Web Standards.

CSS prikaz: budućnost je ovde

Čitači koje koristi većina današnjih korisnika imaju dobru CSS podršku. Svi oni imaju svoje bubice, ali jednom kad se naviknete na njih, lako možete da ih zaobidjete.

CSS kodiranje je lako. Čak i za tipa kao ja, što misli da većina JavaScript-a liči na psovanje.

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

Svako CSS pravilo ima selektor i deklaraciju. Deklaracija je sastavljena od osobine i vrednosti. Osobine koje zvuče kao dve reči su razdvojene crticom.

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}

Strukturne oznake: kodiraj ono što misliš, misli ono što kodiraš

Dok je pisanje CSS koda jednostavno, upotreba istog za prikaz zahteva neznatno drugačiji način razmišljanja od onoga na koji smo navikli.

Radije nego misliti o stvarima kao što je "ovo ide ovde, ono ide onde" dok radimo na prikazu, moramo misliti o vrsti informacija na našim stranicama i strukturi istih.

Dajemo najvažnijem naslovu <h1> oznaku; podnaslov označavamo sa <h2> , itd.; paragrafi su paragrafi.

Ovo je poznato kao "strukturne" ili "semantičke" oznake.

Umesto stavljanja sadržaja unutar tabela i tabelarnih ćelija, zavij ga u div elemente. Dajte vašem div elementu id ili klasu (class) koja opisuje sadržaj i/ili funkciju, umesto prikaz.

Izbegavaj <b> i <br> oznake

Mislite o tome zašto hoćete nešto prikazati na odredjeni način; šta to znači? Vaše oznake mogu i trebaju preneti značenje, čak i nekome ko ne može da vidi stranicu. Semantičke oznake prave naše strane pristupačnijim svima, uljučujući i pretraživače.

Kada nešto stavljate u kurziv, je li to zato što hoćete da ga naglasite <em>, ili zato što je to naslov knjige, <cite>?

Ako je nešto bold, verovatno bi trebalo da bude označeno kao <strong>.

Ako vam treba prelom reda posle nečega, šanse su da to treba da bude označeno kao element u zaglavlju. Ako to nije element u zaglavlju, je li to deo klase (class) koje se pojavljuje u vašem sajtu? Ako je to slučaj, onda koristite CSS umesto <br>.

.foo {display:block}

Ako hoćete da naučite više, pogledajte Bed and BReakfast markup (B&BR) od Tantek Çelik.

Šta su to Navigacione Trake?

Razmislite: vaša navigacija je u stvari lista nabrajanja hiperveza (links).

Označite ih unutar <ul> oznake.

• hiperveza1
• hiperveza2
• hiperveza3
• hiperveza4
• hiperveza5

Horizontalna Navigaciona Traka

Možemo koristiti CSS za kontrolu prikaza lista nabrajanja na našim stranicama.

Upotrebom display:inline možemo kreirati horizontanu navigacionu traku.

Ispod je kod upotrebljen za ovu navigacionu traku:

#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;
}

Vertikalna Navigaciona Traka

Evo i koda:

#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
}

Za više informacija, pogledajte Mark Newhouse-ov članak, Kroćenje Lista (Taming lists), na "A List Apart", i "Stilizovanje lista (Styling lists)" na CSS-Discuss wiki.

Stvari koje tabele rade bolje nego CSS

Postoje stvari koje CSS ne radi tako dobro kao tabelarni prikaz.

Na primer, recimo da imate crnu navigacionu traku na levoj strani web stranice i hoćete da bude dugačka koliko i sadržaj. Sa tabelarnim prikazom, to je lako: samo dajte toj <td> crnu pozadinu.

Možemo to uraditi i sa CSS, ali to zahteva drugačiji način mišljenja.

Ako damo našoj navigacionoj div oznaci crnu pozadinu, crna boja će ići samo do kraja navigacije. Na većini stranica sadržaj je duži nego navigacija, znači to ne valja.

Umesto toga, možemo redjati crni GIF u našem sadržajnom div-u i dati mu dovoljan levi razmak, ali ako je naša navigacija duža od sadržaja, ni to neće da valja.

Još jedan način je da redjamo crni GIF na pozadini naše <body> oznake, što je u redu ako ne želite da upotrebljavate neko drugu sliku za pozadinu cele stranice.

Ili čak, možemo za uvijemo sadržaj u 'uvijač' div i redjamo sliku u taj div. Ali to znači dodavanje nesemantičkog sadržaja našim oznakama.

I naravno, redjanje pozadinskih slika neće raditi uopšte ako hoćemo da imamo dinamičku širinu navigacije.

Kao što rekosmo, postoje stvari koje tabele rade bolje nego CSS. Ali posle svega treba da se zapitate, da li je sav taj nepotrebni kod koji dolazi sa tabelama vredan toga.

Migracija sa tabelarnih trikova na Web standarde: celokupna slika

Prvo, trabe da odlučite koju migracionu stragiju hoćete. Hoćete li da migrirate ceo sajt od jednom, ili deo po deo?

Identifikujte sekcije i stranice kojima će najviše koristiti konverzija. Naslovne stranice, obaveštenja o novim proizvodima, i slično bi bilo logično za početak.

Identifikujte tip sadržaja/informacija u vašem sajtu

• Informacije o proizvodima
• Cenovnici
• Informacije o firmi/organizaciji
• Portfolio
• Usluge koje se nude
• Informacije za investitore
• Kolica za kupovinu (Shopping cart)
• Korisničke diskusione grupe
• i tako dalje

Organizovanje stranica

Kada budete rezumeo tip sadržaja u vašem sajtu, vreme je da analizirate postojeće stranice i po potrebi logički podelite njihov sadržaj.

• Glavna navigacija
• Podnavigacija
• Zaglavlja i podnožja
• Sadržaj
• Srodne informacije
• Ostalo

Analizirajte strukturu tabela u smislu umetnutih tabela, providnih GIF-ova i ivičnih ćelija. (Treba da zamenimo sve ovo sa div oznakama ili sa daleko jednostavnijom strukturom tabele).

Pregledajte vaše oznake

Kada ste analizirali strukturu vaših stranica, vreme je da pogledate ispod haube i analizirate postojeće prikazne oznake u HTML-u koje se mogu zameniti sa strukturnim oznakama.

• U ime svega što je čisto i dobro, otarasite se <font> oznaka i providnih GIF-ova!
• Isto tako, brišite <b> i <br> oznake.
• Otarasite se prikaznih oznaka za tabele (bgcolor, background, i slično).
• Zamenite čist prikazni CSS kod (stvari kao što su <span class="header">) sa odgovarajućim strukturnim oznakama. (Tantek Çelik opisuje to u detalje u njegovom A Touch of Class).

Zamenite opisne sa strukturalnim oznakama

Možete da nadjete i promenite (bilo koji regularni izraz), ali najlakši način da to uradite je da otvorite postojeću stranicu u čitaču i kopirate i prenesete tekst u vaš HTML program za uredjivanje.

Držite na umu strukturu dokumenta! Jednostavna zamena <b> sa <strong> oznakama nije dovoljna.

Koji je najvažniji naslov? Označite ga sa <h1> oznakom. Označite podnaslove sa <h2> oznakama i tako dalje. Označite paragrafe sa <p> oznakama. Označite navigaciju kao liste nabrajanja.

Upotrebljavajte DOCTYPE. (Mi preporučujemo XHTML transitional, sem ako niste hard core, u kom slučaju koristite XHTML strict).

Podelite stranice i logičke divs

Stavite glavnu navigaciju u div sa id mainnav; stavite podnavigaciju u div sa id ili class subnav, stavite podnožje u <div id="footer">, i uvijte sadržaj unutar <div id="content">.

Još uvek ne izgleda ništa naročito, ali kada počnete dodavati pravila vašim stilovima, stvari brzo postaju bolje.

Vreme je da počnete da pišete vaš CSS

Na početku postavite okvir svakom div-u. Na primer, div {border:1px dotted gray; padding:.5em}.

Ovo će da vam pomogne da vidite gde počinju, a gde se završavaju, i takodje da li postoji umetanje ili ne.

Prvo pišite CSS za birače elemenata (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, itd.)

Koristite kontekstualne ili nasledničke birače što je više moguće. To će činiti sav vaš kod čistijim. Na primer, #subnav li{border:1px solid black; padding:.5em; display: inline}će afektirati samo liste nabrajanja koje se pojavljuju unutar podnavigacionog div-a.

Testirajte u što više čitača i dajte prijateljima da testiraju u njihovim čitačima.

Primeri sajtova koji su opisani sa CSS-om

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Pročitajte još više o svemu ovome

Očigledno je da ne možemo pokriti sve što treba da znaš o CSS dizajnu za jedan sat, ali ove knjige vam mogu pomoći da steknete praksu u upotrebi Web standardá i kreiranju stranica koje su "mršavije", čistije i brže.

Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002

• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content from Presentation; Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee and Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000

Papir? Ne treba nam smrdljivi papir: Internet izvori

CSS-Discuss

• mailing list: Vrlo aktivna, vrlo poučna.
• Wiki: "Izmedju ostalog, wiki služi kao kolektivna i trajna memorija za članove listi." Hoćete da Internet Explorer-u za Windows date nešto što razume, a u isto vreme date boljim čitačima 'pravu stvar'? Saznaćete to i mnogo više ovde.
• Archives: Imate CSS problem koji vas pravi kretenom? Ne brinite, nako drugi je već imao (i dobio pomoć) takav isti problem. Pronadjite odgovore ovde.

zeldman.com Dnevni Izveštaj: pronicljiv, provokantan, i dobro napisan sadržaj i hiperveze servirane uredno

A List Apart Za ljude koji prave Web sajtove

• Taming lists, Mark Newhouse. Nezamenljive informacije i pomoć za kodiranje vaše navigacije semantički.
• CSS: Going to Print, Eric Meyer. Nikad više nećete morati da pravite verziju stranice za štampanje.
• Alternative Style: Working With Alternate Style Sheets, Paul Sowden. Dozvolite vašim posetiocima da odluče kako da vide vaše stranice.
• Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. Strukturalne oznake će vam takodje pomoći da dobijete bolje rangiranje na pretraživačima.

The Web Standards project Neka su blagosloveni.

CSS: A guide for the unglued Odlična stranica sa hipervezama

CSS Layout Techniques: for Fun and Profit Prikazi koje možete upotrebiti u vašim projektima od Eric Costello-a. Izvori i praktični vodiči takodje.

Real World Style CSS opis, saveti, trikovi i tehnike od Mark Newhouse-a.

The Business Benefits of Web Standards Dobre vesti za privrednike. Jevandjelje Web standardá predstavljeno na način koji čovek za biznis školom može razumeti.

Hvala. Ima li pitanja?