Homme on rahvusvaheline CSS Naked Day!

Homme, 9. aprillil 2009. aastal on rahvusvaheline CSS Naked Day! 2009. Üritus leiab aset veebiavarustes ning kõik osavõtta soovijad peaks esmalt registreeruma CSS Naked Day! veebis asuva vormi abil ja seejärel 9. kuupäeva kukkudes oma veebilehelt css seljast koorima.

Korrektsuse mõttes tuleks .css fail eemaldada kuni 48 tunniks, sest just niikaua kestab kokku 9. aprill kui erinevate ajatsoonide kaupa järge pidada.

Ja, et Uus-Meremaal ja Austraalias on tegelikult juba 9. kuupäev alanud, siis tuleb ka alustada...

Meenutusi 2008. aastast

Lisatud: 08.04.2009 18:30

Tagid: disain, html, css, webdesign, veebidisain, 2009,

HTML & CSS: Google Chrome ja input'id

Üks väike näpunäide neile kes vaevlevad Google Chrome poolt ümber input elemendi tekitatava piirjoone pärast:

Küll on tüütu, kuid lahendus õnneks lihtne:

:focus {outline: none}

Või siis kindlale elemedile määrates:

input.kindel_klass:focus {outline: none}

Ja voilaaa:

Lisatud: 29.10.2008 21:52

Tagid: css, disain, google, õpetused, webdesign, web 2.0, veebidisain, internet, html, xhtml,

HTML vs XHTML 1. osa

Minu kokkupuude veebiga (internet) oli aastal 2000, oma esimese HTML koodini jõudsin aastal 2004. Aasta pärast kribasin sinna ka teadlikult juurde dokumenditüübi deklaratsiooni (hea DOCTYPE),sest nii paistis leht lihtsalt parem kui seda erinevates veebilehitsejates võrrelda (IE vs Firefox) - tegelikult oli selle kõige kurja juur Internet Explorer mis dokumenditüübi defineerimiseta sattus segadusse ning kuvas nii nagu ise õigeks pidas. Kuid millist dokumenditüüpi tuleks kasutada, millised on nende erinevused, mida need mõisted üldse tähendavad?

DOCTYPE nagu juba ennist mainisin on iseenesest lühend sõnadepaarile "dokumenditüübi deklaratsioon". Sellega määratakse mis tüüpi html'i (xhtml'i) kirjutatakse, sellele vastavalt tuleb ka süntaks kribada. Seejuures tuleks tähelepanelikult jälgida, et süntakse vastaks ikka valitud DOCTYPE'ile, kindlasti tuleks vältida olukordi kus DOCTYPE'iks määratakse näiteks XHTML 1.0 Strict, aga tegelikult trükitakse HTML 4.0 Transitional'ile vastavat koodisüntaksit.
Nüüd natuke ka sellest arusaamatust DOCTYPE deklaratsioonist, näitena XHTML 1.0 Strict deklaratsioon:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ja lahtiseletatult tähendab see:

<!DOCTYPE juurelement kättesaadavus versioon/identifikaator url>

Juurelemendiks on "!DOCTYPE html", seejuures pole "html" tõusutundlik, samas korrektne oleks "html".

Kättesaadavus näitab mis sorti identifikaator ja mis versiooniga on tegu.

Võimalike valikuid kaks:

PUBLIC - märgib, et tegu on avaliku identifikaatoriga (FPI).
SYSTEM - märgib, et tegu on süsteemse identifikaatoriga, nagu näiteks failisüsteemi aadress, veebiaadress või mõni muu url.

Avaliku identifikaatori ülesehitus sisaldab samapalju erinevaid elemente kui DOCTYPE deklaratsioon ehk siis viis:

"registreeritus//organisatsioon//tüüp kirjeldus//keel"

Registreeritus on lihtsalt kas "+" või "-" märk mis märgib:

+ märgib, et tegu on ISO (International Organization for Standardization) poolt registreeritud organisatsiooniga.

- märgib, et organisatsioon pole ISO poolt registreeritud. Näiteks IETF (Internet Engineering Task Force) ning W3C (World Wide Web Consortium) pole registreeritud organisatsioonid.

Organisatsioon märgib DTD avaldanud organisatsiooni ametliku tunnuse, näiteks "W3C" või "IETF".

Tüüp (Public Text Class) määrab, millist tüüpi objektiga on tegu. Kuna HTML'i puhul toimub viitamine alati dokumenditüübi definitsioonile, siis on tüübiks alati "DTD".

Kirjeldus (Public Text Description) on viidatava materjali üldtuntud nimi. Näiteks "HTML 4.01 Strict" või "XHTML 1.0 Transitional".

Keel määrab, millises (inim-)keeles viidatav dokument on kirjutatud. W3C standardid on alati kirjutatud inglise keeles, seega "EN".

Url on aadress, mis viitab dokumenditüübi definitsiooni asukohale.

Lisatud: 27.10.2008 09:32

Tagid: xhtml, internet, html, internet explorer, valideerumine, web 2.0,

jQuery: onmouseover ja onmouseout

Lihtsate onmouseover ja onmouseout tabeliridade (ei mingeid tabeleid enam) värvide vahetamiseks tavalise primitiivse ja talupoegliku lahenduse:

<dl onmouseover="this.style.backgroundColor='#F8F8F8';"
onmouseout="this.style.backgroundColor='#FFF';">
<dt>Veerg 1</dt>
<dd class="competion">Veerg 2</dd>
<dd class="place">Veerg 3</dd>
<dd class="organizer">Veerg 4</dd>
</dl>

asemel kasutada hoopis jQuery pakutavat lahendust (mitme muutuva css attribuudi korral):

<dl class="row;">
<dt>Veerg 1</dt>
<dd class="competion">Veerg 2</dd>
<dd class="place">Veerg 3</dd>
<dd class="organizer">Veerg 4</dd>
</dl>

$(function(){$("dl.row").hover(function (){$(this).css({ "background": "#DFFFFF",
"color": "#00a7d8","border-bottom": "1px solid #9EE9FF" });
}, function (){var cssObj = {"background": "#FFF",
"color": "#2C2C2C", "border-bottom": "1px solid #CBCACA" }$(this).css(cssObj);
});
});

või pisut lihtsustatud varianti (ühe muutuva css attribuudi korral):

$(function(){$('dl.row').hover(function(){$(this).css("background","#DFFFFF"); },
function(){$(this).css("background","#FFF");});
});

Puhtam, kergem ja mugavam tunne :)
Peaks ka "Unobtrusive" olema!

Lisatud: 22.10.2008 21:44

Tagid: css, html, internet, javascript, jquery, library, õpetused, web 2.0, tutorials, teegid,

1 2 3 ... 6 >

Kes on kes?

Silver

HTML/CSS spetsialist (Advanced),PHP/MySQL & JavaScripti õppija ja taltsutaja (algaja),Ajaxi ja Adobe AIR austaja (rakenduste kasutaja)
Veebifirma UusWeb.ee eestvedaja

Kiirrulluisutamise (Inline speed skating) sõltlane, jooksudistantside läbija ja (maantee-) rattasõidu harrastaja
Sporditarvete e-poe Spordihai.ee taganttõukaja

Tagid