Archive for the ‘www’ Category

Klausimas numeris: 64

Monday, April 11th, 2005

Prieš gerą savaitę slankiodamas po Lietuvos valstybinių institucijų svetaines, Lietuvos Informacinės Visuomenės Plėtros Komiteto "Klausimų" puslapyje radau šį perliuką:

Klausimas numeris: 64

Sveiki, Kodel savo virsininko portreta idejote 1 MB dydzio? Atsidaro per puse minutes! Uztektu keletos kilobaitu!
( 2005-01-24 09:35 )

Atsakymas į klausimą:

Dėkoajame už pastabą, nuotraukos bylos charakteristikos pakeistos. Dabar minėta nuotrauka yra 232 KB dydžio.
( 2005-01-24 09:47 )

Sužavėtas tokios nerealios optimizacijos greitai nubėgau pažiūrėti — tikra tiesa, kukli 109 x 148 px nuotrauka, o užima 232 KB.

Kaip ir reikėjo tikėtis, pati nuotrauka yra ne tokių kuklių matmenų, tiesą sakant, labai nekuklių: 2000 x 3008 px, tik HTML’e jai nurodyti kiti matmenys: height="148" width="109".

Tipiška pradedančiųjų klaida. "Mažinti" nuotraukų tokiu būdu nėra jokios prasmės, nes:

  1. Naršyklė vis vien siunčiasi originalų paveikslėlį, taigi perduodamų duomenų kiekio taip nesumažinsi;
  2. naršyklė tai ne specializuota grafinė programa, tad taip "sumažinta" versija gaunasi labai prastos kokybės (beje, šiuo atveju dar blogiau, nes HTML’e nurodyti neproporcingi dydžiai — jei nuotraukos plotis yra 109 pikseliai, tai jos aukštis tūri būti ne 148, o 164 pikseliai).

Belieka prisidėti prie informacinės visuomenės plėtros šiuo iš tiesų 109 x 148 px dydžio paveikslėliu. Failas užima mažiau nei 6KB. Imkite ir naudokite.

Sveikame <body> — sveika dvasia. Pirma dalis.

Friday, February 25th, 2005

Žvilgsnis į šių metų lietuviškų tinklalapių kodą priminė man istoriją apie tai, kaip romėnų arklio užpakalio plotis įtakojo JAV kosmines technologijas.

Konkrečiai kalbu apie <body> atributus.

Va tipiškas pavyzdys:

  1. <BODY bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Atkreipę dėmesį į faktus, kad:

  1. dabar XXI amžius;
  2. teoriškai visi moka naudotis CSS;
  3. praktiškai visi naudoja CSS, net jei nemoka, taigi, vienoks ar kitoks CSS failas jau yra.

darome išvadą — viskas, kas parašyta už BODY HTML’e yra reikalinga kaip kiaulei balnas.

Normaliai čia tereikia <body>, idealiai — <body lang="lt"> (jei tekstas nelietuviškas — tada teksto kalbos kodas)(žr. Vlado komentarą).

Su bgcolor susitvarkyti lengva:

  1. body{
  2. background-color: #fff;
  3. color: #000; /* tiesiog tvarkingiau yra nurodyti abi spalvas -- ir fono ir teksto */
  4. ... /* kitos jūsų taisyklės skirtos <body> */
  5. }

Dabar grįžkim prie mūsų avinų, t.y. romėnų arklio užpakalio, kurio vaidmenį atlieka leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" atributai.

Ką jie daro dauguma (tikuosi) žino — jie panaikina tuos bjaurius tarpus, kuriuos palieka naršyklės tam atvejui, jei autorius netyčia nepasirūpino paraštėmis. Be gudriųjų programų rūpesčio tekstas būtų prilipęs prie kraštų — labai nepatogu skaityti. Kodėl gi aš burnoju prieš tokį naudingą dalyką?

Pirmiausia, ne visi tokį kodą naudojantys yra matę naršykles, kurioms jis skirtas — taigi, technologija gerokai pasenusi. Antra, šių atributų niekada nebuvo jokiame HTML standarte, nekalbant jau apie XHTML. Validatorius, aptikęs tokį niekalą pagrįstai keiksis there is no attribute "…".

leftmargin="0" topmargin="0" (ir rečiau pasitaikantys rightmargin="0" bottommargin="0") yra skirti Internet Explorer 3-čiai versijai. IE4+ puikiai supranta atitinkamą CSS ir gali išgyventi be tokių šiukšlių.

marginwidth="0" marginheight="0" skirti Netscape Navigator 4.x, kuris seniai yra gražus lavonėlis. Zeldmanaspasiuntė velniop dar prieš ketverius metus. Ir gerai padarė, nes NN4 turėjo stebėtinai kreivą CSS palaikymą (prieš porą metų kažkur mačiau siūlymą NN4.x uždrausti įstatymu :).

Lengvu rankos judesiu, t.y. dviem papildomomis CSS taisyklėmis išvalome mūsų <body>:

  1. body{
  2. background-color: #fff;
  3. color: #000;
  4. margin:0;/* viso gero, paraštės! */
  5. padding:0; /* Opera turi savo būdą atsisveikinti su paraštėm */
  6. ...
  7. }

Pastaba dėl NN4.x: margin: 0; šiai naršyklei negalioja, bet margin: -10px; turėtų suveikti. Ar jau sakiau, kad ši naršyklė turi kreivą CSS palaikymą?

Vat taip, greitai ir nebrangiai mūsų gražiajam <body> nusiurbti riebalai. Nežinau, kaip visokie leftmargin,topmargin etc. dar randa kelią į HTML kodą; ar juos sukiša naudojama programinė įranga, ar čia stebime copy-paste stebuklą, ar maniakai-nekrofilai (tuoj kolekciją surinksiu — viename poste buvo paminėta zoofilija, dabar, prašau — nekrofilija. Iš paieškos sistemų pradės būriais eiti visokie iškrypėliai, o aš juos išmokysiu tvarkingo HTML’o…) įrašo rankomis. Įpratimas — antras prigimimas, bet prastų įpročių reikia atsikratyti.

Su senobiniu kodu susitvarkėme, dabar pora žodžių apie modernias atmainas. Tai šen tai ten pasitaiko <body style="margin:0px 0px 0px 0px"> (o vienos lietuviškos TVS vizitinė kortelė yra <body style="margin:0 0 0 0">). Geriau, nei nestandartiniai atributai, bet neidealu.

Pirmiausia blogai inline CSS. Nors pats esu naudojęs style="...čia-kažkoks-CSS,-kurį-tingėjau-įrašyti-į-atskirą-failą..." bet kuo toliau, tuo labiau galvoju, kad style= atributo visai nereikėjo įtraukti į standartus, jis prieštarauja pačiai CSS esmei — atskirti turinį nuo atvaizdavimo. Taip, pro validatorių praslysti lengviau, bet košė yra košė…

Antra, rašyti "margin:0px 0px 0px 0px"> visai nebūtina, pakanka "margin: 0"> — jei nurodoma viena reikšmė, tai ji taikoma ir viršui, ir apačiai, ir abiems šonams. Be to, nuliniams dydžiams nereikia nurodyti vienetų.

Ir trečia — neatsižvelgta į Operą, kuri paraštėms naudoja ne margin, o padding.

Viskas, galit eiti valyti kodo ir laukti antros ir trečios dalies.