Už švarų kodą… ir patogius tinklapius
Straipsnelis pirmą kartą publikuotas pixel.lt 2oo6 metų rugpjūčio 1 d.
Kaip tinklapių kūrėjas, negalėjau neperskaityti asterisk straipsnio Už gražų kodą. Deja, gažus kodas – toli gražu dar ne viskas, kaip kažkas pastebėjo komentaruose. Kaip pavyzdėlį paimkime tinklalapį su ‘gražiu kodu’ – ZipFM. Kodą validatorius sukramto be problemų, tačiau jų nemažai kyla vos pabandžius atidaryti tinklapį. Laukiau lygiai 5 minutes, bet tas grožis man iki galo taip ir neatsidarė. Nežinau, gal čia kaltas Tako (atsiprašau, dabar jau ‘Zebra’) bazinis internetas, dienos metu tikrai nepasižymintis dideliu greičiu, bet kažkodėl esu tikras, kad tikrai nedaugelis interneto vartotojų Lietuvoje turi didelės spartos interneto linijas (geek’ai nesiskaito 
).
Bet tiek to, pirmiausia pasižiūrėkime, koks gi tas kodas, kurį validatorius pripažino be priekaištų. Nieko nuostabaus – tik 21 eilutė, iš kurių 14 sudaro head blokas. Štai šis kodas:
http://paste.lt/paste/bddbee7308d43ffdb0d46e8c664e6561
Ką gi mes čia turim? O gi seną pažįstamą – frames. Tai jau galime vadinti pirmąja rimta problema, net nepažvelgus į patį puslapio vaizdą. Kodėl? Šiame straipsnyje pateikiama dešimt bene didžiausių frames keliamų accessibility (nerandu lietuviško atitikmens, bet toliau vadinsiu tai ‘patogumu’) problemų. Pradedant nuo to, kad Back, Refresh, PageUp ir PageDown mygtukai dažnai veikia ne taip kaip tikimasi ir baigiant prastais santykiais su paieškos varikliais.
Ir tai tik pradžia…
Antra rimta patogumo problema – griozdiškas flash puslapio viršuje. Ką ten viršuje – jis užima didesnę pusę naršyklės lango mano 1024×768 raiškos vaizduoklyje. Padidinus raišką santykis kiek pagerėja, bet paaiškėja, kad tinklapis vis tik kurtas 1024×768 raiškai, nes ją padidinus dešinėje lieka didelis baltas plotas. Tai verčia susimąstyti. Ir dėl to, kad šitas griozdas užsikrautų, aš laukiau 5 minutes. Ne dėkui, juo labiau kad vienintelės to daikto atliekamos funkcijos – elementarus meniu.
Žvilgtelėkime į kodą, kuriuo šis flash įterpiamas:
http://paste.lt/paste/cabf1a10a055b4dac1e771f608b91f99
Validatorius pasimetęs, nes nedeklaruotas doctype. Kai rankutėm nurodau, kad doctype yra HTML 4.01 Transitional, klaidų neranda. Šaunu, bet jei į 17 eilučių kodo dar būtų privelta klaidų, būtų jau visai prastai. Tiesa, dėl įdomumo dar patikrinau su XHTML 1.00 Strict – 53 klaidos, dauguma susiję su tuo, kad HTML žymos parašytos didžiosiomis raidėmis. Ką galima pasakyti apie kodą? Beveik nieko – flash įterpiamas naudojant javascript’a, taip pat čia pridėtas Google Analytics kodas – kiek keista, kad pačiame puslapio viršuje – aš stengiuosi dėti jį į galą, kad dirbdamas savo darbą netrukdytų vartotojams naudotis tinklapiu – dabar tenka laukti, kol skaitliukas nusiųs informaciją, o tai kartais užtrunka.
Dabar klaikioji dalis – pagrindinio rėmelio freimas. Pasižiūrėkite čia. Pirmiausia apie validatorių – 96 klaidos su HTML 4.01 Transitional, kurį nurodo patys kūrėjai (apie 562 klaidas tikrinant su XHTML 1.0 Strict nekalbėsim – tikrinau tik dėl smalsumo). Bet klaidų kiekis dar ne viskas, kaip minėjo kolega, aklai vaikytis validumo yra kvaila, nors naudojamas doctype šiaip leidžia labai daug. Panagrinėkime klaidas atidžiau. Pirmoji kyla dėl ne visai tvarkingai įterpto javascript’o. Aš asmeniškai laikausi pozicijos, kad javascript’us verta laikyti atskiruose failuose – tuomet ir dėl validatoriaus netenka galvos sukti, ir galima skriptą panaudoti keliuose puslapiuose nekopijuojant viso kodo, ir taisymas palengvėja. Bet jei jau nusprendėte dėti skriptą tiesiai į kodą – apgaubkite jį html komentaro ženklais ir nekils validumo problemų. Štai taip:
http://paste.lt/paste/ba1dda67052e37a33e15a13890cddd47
Taigi, žvelgiame toliau, ir matome table-based layout’ą. Man jau darosi gaila žmogaus, kuriam teks šį kodą taisyti. Naudojamas neegzistuojantis lentelės height atributas, toliau visa šūsnis praleistų paveikslėlio alt atributų. Nesuprantu, negi taip sunku prirašyti ten porą žodžių? Tai pagerintų puslapio informatyvumą žmonėms, naudojantiems screenreaderius ir panašią techniką. Vėliau vėl seka problemos dėl javascript (netgi pamirštama naršyklei nurodyti, kad tai – javascript’as). Daugybė pamirštų kabučių, sumaišyta tag’ų tvarka ir taip toliau… Kodui labai toli iki švaraus ar gražaus, o apimtis irgi didoka – 18,81 KB. Nelabai supratau, kam ten iš viso įtrauktas css failas, nes, kaip labai būdinga table based layout’ams, kodas mirga marga nuo font tagų ir pačiuose elementuose aprašomų stilių. Pabandykit jūs dabar pakeisti tarkim žodžių Zip FM salotinę spalvą į oranžinę. Visame puslapyje. Tai tikrai užtruktų, ir ko gero ne vieną valandą…
Apibendrindamas galiu pasakyti tik tiek – šis puslapis – puikus pavyzdys iš serijos “kaip nereikėtų daryti”. O MediaPro – gal ir geri dizaineriai, bet kalbant apie tinklapius, jų darbo technika ir kokybė atsilieka geru penkmečiu.
Pabaigai – keletas mano patarimų:
- Jokių frames – tiek patogumo, tiek SEO požiūriu tai labai prastas pasirinkimas
- Lentelės skirtos lentelinių duomenų atvaizdavimui, o ne tinklapio sturktūrai.
- Pamirškite font tagą – tam yra css
- style=”” taip pat patartina vengti – turinį reikia atskirti nuo išvaizdos aprašymų, todėl visi stiliai turėtų būti aprašyti atskirame css faile.
- Javascript’us irgi geriausia laikyti atskirame faile, o jei tai neįmanoma, reikia pridengti juos HTML komentarų žymėmis. Nepamirškite naršyklei nurodyti skripto tipo.
- Dideli flash intarpai yra blogis.
- Aklai laikytis validumo nėra reikalo, bet standartai buvo sukurti ne be reikalo, todėl protingai jų prisilaikant, galima sutaupyti nemažai laiko, ypač jei kodą reikia taisyti praėjus ilgesniam laikui.
- Ir svarbiausias patarimas – tinklalapis kuriamas ne meno parodai, ne validatoriui ir ne paieškos varikliui (na, čia būna ir išimčių), o žmogui – vartotojui, todėl patogumas turėtų būti svarbiau už neeilinį dizaino sprendimą ir įspūdingą vaizdą.
> Lentelės skirtos lentelinių duomenų atvaizdavimui, o ne tinklapio sturktūrai.
Pagal W3.org:
“Tables are used for information as well as for layout.”
Taip kad lentelė vizualiai yra lentelė, o TABLE žymė – struktūrinio išvedimo elementas.
YOzaz> Jei cituojate, būtu malonu tiesioginė nuoroda į šaltinį. Iš to paties w3.org: [1] “Tables should not be used purely as a means to layout document content…” ir [2] “Do not use tables for layout unless the table makes sense when linearized. “, “Layout, positioning, layering, and alignment should be done through style sheets “.
Labiausiai man patinka pastraipa iš evolt.org [3]:
“The HTML table was conceived as a means to display tabular data. Using tables for layout was mentioned in HTML 3.2, but only to acknowledge existing use—the concept didn’t appear in the original RFC. In future recommendations, the W3C said style sheets, not tables, should be used for layout. Using tables for layouts is like wearing dress shoes jogging—both work, but they’re the wrong tools for the job.”
[1] http://www.w3.org/TR/html401/struct/tables.html#h-11.1
[2] http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment
[3] http://www.evolt.org/article/Tables_or_CSS_Choosing_a_layout/25/21429/index.html