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 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 žymos parašytos didžiosiomis raidėmis. Ką galima pasakyti apie kodą? Beveik nieko - flash įterpiamas naudojant ‘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 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 ‘o. Aš asmeniškai laikausi pozicijos, kad ‘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į 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 (netgi pamirštama naršyklei nurodyti, kad tai - ‘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 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ų:

  1. Jokių frames - tiek patogumo, tiek SEO požiūriu tai labai prastas pasirinkimas
  2. Lentelės skirtos lentelinių duomenų atvaizdavimui, o ne tinklapio sturktūrai.
  3. Pamirškite font tagą - tam yra
  4. style=”" taip pat patartina vengti - turinį reikia atskirti nuo išvaizdos aprašymų, todėl visi stiliai turėtų būti aprašyti atskirame faile.
  5. ‘us irgi geriausia laikyti atskirame faile, o jei tai neįmanoma, reikia pridengti juos komentarų žymėmis. Nepamirškite naršyklei nurodyti skripto tipo.
  6. Dideli flash intarpai yra blogis.
  7. Aklai laikytis validumo nėra reikalo, bet buvo sukurti ne be reikalo, todėl protingai jų prisilaikant, galima sutaupyti nemažai laiko, ypač jei kodą reikia taisyti praėjus ilgesniam laikui.
  8. 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ą.

Panašūs straipsniai


“Už švarų kodą… ir patogius tinklalapius” komentarų: 14

  1. asterisk

    Norėčiau papildyti dėl flash, jie nėra blogis. Blogis yra - DIDELI flash :) Juos galima puikiai optimizuoti, mačiau ne vieną pavyzdį.

  2. HEADSHOT

    Head blokas uziman ne 14 o 15 eilucia(na bet cia tai nesvarbu). Gerai pastebeta tiek klaidu tikrai baisu.

  3. IdeaG

    asterisk - as taip ir parasiau - ‘dideli’ :) bet siaip laikausi linijos, kad teisingiausias flasho panaudojimas - banneriai. Navigacijos ar ištiso saito gaminimas su flash (ką labai megsta gaumina kiek pastebejau) imho yra issidirbinejimas. Atsiprašau, yra viena kategorija tinklapių, kuriem tokie sprendimai yra teisingi - visiškai reklaminiams - kuriu vienintele paskirtis yra reklamuoti tarkim filma.

  4. Rimantas

    Šiaip viskas gerai ir teisingai, bet pora pastabų:
    Validuoti puslapius be nurodyto DOCTYPE nėra jokios prasmės, lygiai kaip ir taikyti kitą DOCTYPE, nei nurodyta.
    Nustebino patarimas dėl HTML komentarų JavaScript kode. Kam?
    Nekalbant apie tai, kad šie komentarai XHTML puslapyje pateikiamame kaip application/xhtml+xml reiškia vieną - skriptas bus ignoruojamas. Kita vertus, document.write šiuo atveju irgi neveiks…
    Geriausias sprendimas iš tiesų yra skriptus laikyti atskiruose failuose.

  5. Tomas

    Pagal teoriją HTML komentarai JavaScript kode reikalingi, kad senos naršyklės nerodytų šio kodo kaip teksto. Taip, XHTML kaip application/xhtml+xml tokį dalyką ignoruos, bet tam yra CDATA! Kaip ten bebūtų, tai naudojama išskirtiniams atvejams - geriausia kodą laikyt atskiruose failuose. Išvados geros.

  6. MaR

    Klausimas tik kiek pastangų reikės įdėti aprašant layout’ą su table ir kiek su CSS. Table žinių lygio užtenka labai nedidelio ir rodo visur +- vienodai, o dabartinis naršyklių CSS palaikymas turi daug spragų, kurias norint išspręsti reikia naudoti hack’us.

  7. asterisk

    apie tai rengiuosi parašyti straipsnį artimiausiu metu…

  8. Tomas

    MaR> Klausimas tik kiek pastangų reikės įdėti aprašant layout’ą su table ir kiek su CSS

    Kur kas mažiau pastangų prireiks dirbant su CSS. CSS, XHTML — tai ne vien tik kodas, tai mąstymo būdas ir nauja architektūra. Tad, jei puslapį rodo kreivai, tai nereiškia, kad reikia kuo skubiau taikyti hack’ą. Galbūt padėtų įsigilinimas į manipuliavimą kodu, kita architektūrinė prieiga arba pokyčiai dizaino prasme. Taip, kartais prireikia pasiaukoti standartams ir dirbti dėl jų, tačiau paaukojus vieną ar kitą galimybę, kurią gauname su TABLE’ais, turime kitų, kur kas didesnių galimybių su CSS. Siūlau jas pasverti.

    Dėl naršyklių. Senos gali rodyti tik HTML — to visiškai pakanka, kad būtų galima perskaityti tekstus. Neįžvelgiu jokių problemų su naršyklių palaikymu.

  9. Raigedas

    Šeip panorėjus tai būtų galima nesunkiai įžvelgt problemų su css palaikymu ant naršyklių… bet čia jau kalbama apie labai senas naršykles - NN4, IE3…. vienos išviso nesupranta css, kitos nesupranta @import (čia šitą galima panaudorti savo naudai - padarai du css failus - senesnėm naršyklėm pritaikytą varsiją dedi i link tagą, naujesnėm per @import). NN4 nemoka paveldėti body tagui priskirtų atributų (kaip apėjimą reikia naudoti “be kind ti NN4″ techniką t.y. viską rankom pakartoti kitiem (kurie ieis i body) tagam). Nuspaudus ant linko IE (priešingai nei kitos naršyklės) naudoja :active pseudoklasę, bet atleidus jį taip ir lieka :active , nepereina į :link. Na bet kaip minėjau, dauguma problemų kyla tik ant labai senų naršyklių.

  10. RQ

    Raigedai, o kam taikytis prie NN4? Kiek lankytojų tokias naršykles dar naudoja? Trys iš tūkstančio?

  11. » Pixel.lt ir 2006-ieji metai Archyvas » Pixel.lt

    […] Už švarų kodą… ir patogius tinklalapius (IdeaG) - 17 […]

  12. YOzaz

    > 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.

  13. IdeaG
  14. Už švarų kodą… ir patogius tinklapius | Arūnas Liuiza

    […] pirmą kartą publikuotas pixel.lt 2oo6 metų rugpjūčio 1 […]

Rašyti komentarą

Jūs privalote prisijungti jeigu norite rašyti komentarą.