…meie igapäevast IT’d anna meile igapäev…

2007-07-28

IBM’i (X)HTML DOCTYPE: plussid ja miinused

Rubriigid: CSS, Firefox, HTML, Infotehnoloogia — dukelupus @ 17:49:38

Ilmselt on ka paljudele profesionaalsetele veebiseppadele üllatuseks, et peale W3C‘poolt soovitatavatele DOCTYPE’dele – ehk siis siin nimekirjas olevatele – olemas ka muud, teiste organisatsioonide poolt loodud DOCTYPE’d. Nendest üks levinumaid on IBM’i XHTML’i versioon, mis on ka mitmes mõttes huvitav.

Kõigepealt – miks on DOCTYPE oluline ja misasi see üldse on?

DOCTYPE on üks instruktsioonidest, mis ütleb SGML või XML dokumendis – näiteks tavalises veebilehes – millist Document Type Definition‘i kasutada ja kuidas seda renderdada. Iga hästi tehtud veebilehe päisest võib leida sarnase teksti:

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

See ütleb brauserile, et tegemist on Transitional XHTML versioon 1.0 tüüpi dokumendiga, mida tuleb sellel aadressil oleva Document Type Definition faili instruktsioonide järgi käsitleda. Tegelikult on tegemist lihtsalt süntaktiliste reeglite koguga.

Mis siis on aga IBM’i XHTML DOCTYPE’s teistmoodi?

See baseerub tavalisel W3C XHTML 1.0 Transitional DTD‘l – aga järgmiste muudatustega:

  • <noscript></noscript> on lubatud <head></head> sees
  • border, width ja height on lubatud <input> tagile
  • <form> ja <input> võivad olla tagide <table>,<tr> ja <td> sees
  • Atribuudid marginheight, marginwidth, topmargin ja leftmargin võivad olla tagil <body>

Ei paista nagu midagi erilist? Kuid pööra tähelepanu esimesele punktile – <noscript></noscript> on lubatud <head></head> sees – ning tänu sellele saad sa teha:

<noscript>
<meta http-equiv="Refresh" content="0;URL=noajax.php">
</noscript>

Ehk teisisõnu saad sa teha soft redirect‘i kasutajatele, kellel JavaScript keelatud, juba lehe head‘is, suunates neid tähelepandamatult teisele lehele! Oh miks ometi ei luba seda W3C?

Muud kolm muudatust on eelkõige kujunduslikud, lubades teha asju mis on saavutatavad ka CSS’iga.

Miinused?

Eelkõige see, et eriti vähemlevinud brauserid ei oska IBM’i DTD’ga suurt midagi peale hakata. Mozilla Firefox’i on sisse kooditud konkreetne käsk, et IBM’i DTD tuleb renderdada quirks mode’s, IE6′l on nagunii viga XML’i deklaratsiooniga – ükskõik mis peale whitespace‘i enne doctype deklaratsiooni paneb lehe renderduma quirks mode’s, kuid IE on tuntud selle poolest et suudab igasugust pahna korralikult renderdada.

Peab tunnistama et ei tea, kuidas Opera – see pirtsakas renderduse priimabaleriin – ja Safari saavad IBM’i DTD’ga hakkama. Oletan, et probleemideta – see on siiski piisavalt levinud dokumenditüübi deklaratsioon. Samuti kasutatakse üsna tihti eelpool kirjeldatud soft redirect‘i veebilehtedes, mis tavalisi W3C DTD’sid kasutavad – peab tunnistama, et ka mu oma inglise-eesti sõnastik kasutab seda W3C loose DTD’ga.

2006-12-26

<label> – unustatud HTML tag?

Rubriigid: HTML — dukelupus @ 12:45:47

label.pngHiljaaegu jäi silm peale ühele ingliskeelsele postitusele, mis rääkis “unustatud” HTML-tagidest – so, tagid, mida veebisepad ei kasuta. Minu üllatuseks olid nende seas sellised tagid nagu <fieldset>, <legend>, <optgroup> – ja eriti suure ootamatusena ka <label>.

See ei saa ju võimalik olla, mõtlesin. Olgu veel fieldset, legend ja optgroup – aga label‘it kasutavad ju kõik?

Siis möödusid mõned päevad, mille jooksul pöörasin võrgus kohatud HTML-vormidele rohkem tähelepanu. Midagi spetsiaalselt välja ei otsinud, lihtsalt asjad millele peale juhtusin. Ja ootamatult avastasin, et ca 80% nähtud vormidest ei kasutagi label-tagi kohtades kus võiks kasutada. Postimehe vormid, The Registeri kasutajaküsitlus, Amazon,… , … – ei üheski neist ei ole seda tagi kasutatud.

Aga mida <label> teeb?

Label on HTML-vormi elementide juurde kuuluv tag, mis määrab ära selle elemendi juurde kuuluva teksti. Eriti hea on see, et raadionuppude ja checkboxide labelil klikkimine linnutab vastava elemendi – nagu see on kõikjal Windowsi ja Linuxi kasutajaliidestes. Ehk teisisõnu, label annab oma fookuse edasi sellele vormi elemendile, millega ta seostatud on. Samuti on label’i kasutamisel mõned muud boonused – aga selle juurde jõuan hiljem.

Aga miks on labeli peal klikkimisega raadionupu linnutamine hea? Vaata seda pilti:

Punasega on märgitud ala, millel klikkimine linnutaks vastava checkboxi. Mis sa arvad, kas lihtsam on hiireklikiga tabada pisikest nelinurka – või ilusat suurt ala? Kui enamikule selle blogi lugejatest tundub vahe üsna väike, siis tegelikult enamiku inimeste jaoks see nii ei ole. Oled sa kunagi näinud, kuidas algaja arvutikasutaja kramplikult hiirt pigistab ja järske rabavaid klikke teeb? Nende jaoks on selline vorm õnnistus. Ja vaielda ei saa – omalgi on oluliselt mugavam.

Usability ehk kasutatavus on siinkohal märksõna – ja lisaks veel consistency ehk järjepidevus. Kasutaja ootab, et raadionupp käituks ühtemoodi nii operatsioonisüsteemis kui ka veebivormis. Ja sinu kui programmeerija asi on teha asjad kasutajasõbralikult – seda nii fat client programmis kui ka kõige elementaarsemal veebilehel. Kui sa sellest ei hooli, siis oled sa lihtsalt halb programmeerija/kujundaja/veebisepp/inimene.

Nii see näide, kui ka teised on üleval aadressil http://www.hot.ee/dukelupus/labeltest.html

Teine hea labeli omadus on, et sa saad võimaldada kasutajal visuaalselt näha milline raadionupp/checkbox on parasjagu hiire all. Pane labelle külge CSS klass, millele tee :hover‘i abil väike tekstivärvi muudatus (või lihtsalt label:hover) – ja kasutaja näeb täpselt milline raadionupp saab linnutatud, kui ta klikib:

Nagu on näha, hoiab kasutaja hiirt raadionupu “Teine valik” kohal – kiri on hallikas. Pildil on näha ka üks Internet Explorer 7 meeldivamaid omadusi – raadionupu või tema labeli kohal hiirt hoides muudab raadionupp automaatselt värvi. Taaskord, see ei tööta juhul kui labeli asemel kasutada tavateksti – sel juhul muudab raadionupp värvi ainult siis kui hiirt otse tema kohal hoida. Aga, see ei ole selline killer feature et selle pärast IE7 peamise brauserina kasutusele võtta…

Kolmas hea omadus ei ole nii otseselt labeli omadus – seda saab rakendada ka teiste tag’idega, kuid mitte nii lihtsalt.

Pahatihti on vaja kasutajal valida kümnete või isegi sadade valikute seast – näiteks valida elukohariik – või linn. Üks võimalus selleks on muidugi drop-down valik – kuid selles navigeerimine ei ole just kõige lõbusam tegevus. Aga alternatiiviks on avanev dialoogiaken – kus näidata kõik valikud ilusti ära. Veidike CSS’i-maagiat ja tulemuseks on kasutajasõbralik valikudialoog:

Siin on raadionupud üldse peidetud – ja selle asemel näha labelid, mis display:block; abil kastikesteks muudetud. Eks kujundust saab igaüks muuta nii nagu soovib. Labeli peal klikkimisel linnutatakse raadionupp – ja siis on juba väike töö teha Javascripti abil vormile submit või edastada väärtus väljakutsunud aknasse (või teed kogu asja lihtsat layerina).

Muideks, testlehel on selle näitega seotud jupp Javascripti, mis lihtsalt näitab kus sa klikkisid. Algselt tegin selle fancy‘lt – raadionupule onclick event, mis luges raadionupu väärtuse ja näitas seda. Firefoxis oli kõik korras, aga nagu ilmnes, IE7 ei pea klikki labelil klikiks raadionupul – nii et tegelikult tuli asi teha hoopiski koledasti labeli onclickis. Aga võibolla ongi parem, algajatel lihtsam aru saada ja tegeliku vormi funktsionaalsust ei mõjuta see vähimalgi määral.

Loodetavasti suutsin siinkohal labeli kasulikkust selgitada – ning selle väärt tagi populaarsust veidigi tõsta.

2006-12-24

Tants ID-kaardi ümber (ehk, IIS’i ja ID-kaardi suhtlema panemine)

Rubriigid: HTML, ID-kaart — dukelupus @ 10:31:03

Klient nõudis, et veebilehele sisselogimine oleks tehtud ID-kaardiga. Riigiasutuse värk, mis seal ikka – neil esinevad sageli mingid tobedad nõuded ja arhitektuuripiirangud. Tuleb lihtsalt vait olla ja edasi teenida.

Samuti, mis seal erilist. Sertifikaat serverile pähe, sisselogimise osa on ActiveX/Java näol juba kliendi masinas… kõik ju ilus.

Välja arvatud üks asi. Seekord pidi asi IIS’i (Internet Information Services) peal jooksma. Windows Server 2003.

Tegelikult mulle IIS meeldib. Lihtne on konfida, mõistlikkuse piires turvaline, suhteliselt stabiilne… PHP kipub ta peal ainult hirmus aeglaselt jooksma, aga sellega ka juba tegeletakse – Microsoft ja Zend sõlmisid leppe, mille kohaselt MS teeb valmis IIS’i lisa FastCGI, mis hakkab olema interface IIS’i ja PHP vahel. Seda nii IIS 5.1 (XP, rohkem nali kui veebiserver), 6.0 (2003) kui ka 7.0 (Vista) jaoks.

Ega ikka pole veel midagi erilist. Nii IIS’i kui ka Apache jaoks on id.ee lehel konfigureerimisõpetused ju olemas, puust ja punaseks ette.

Või ei. “Puust ja punaseks” on Apache konfimise õpetus. Seal on korralik, punkt-punktilt ja linkidega õpetus – lisaks veel link Veiko Sinivee PDF‘ile, mis selgitab ID-kaardi ülespanekut Apachele – lisaks veel SSL/HTTPS seoseid , lühike tutvustus veebiserverite ajalukku ja muudki. Lausa rõõm on selle järgi teha.

Seevastu IIS’i konfigureerimine…. Lausa nutt tuleb peale, kui lugeda. See üllitis (muuks ei paindu keel seda kutsuma) tuleb siinkohal ära tuua. Arhiveerimise mõttes et ka tulevad põlvkonnad näeks – tavalugejal soovitan siinkohal lihtsalt edasi hüpata. Punasega märgitud lõigud on minu poolt – et paremaid kohti lihtsam leida oleks.


IIS-i konfigureerimine ID-kaarti küsima
(esialgse juhendi autor: Mihkel Ütt, Seesam Elukindlustus)Taustainfoks vt ka Microsofti saidist SSL-sessiooni loomise kirjeldus.

  • Windows 2000 server, sh Internet Information Services, servicepackid
  • installeeri Juur-SK veebiserverisse, trusted root store
  • võiks ka installeerida ESTEID-SK sertifikaadi veebiserverisse, intermediate CA store
  • NB: lisades veenduda, et lisad ikka Masina (Computer) certificate store’sse, mitte kasutaja tasemel. Seega tasub certmgr.msc-ga asjad üle vaadata.
  • Veebiserverile võiks-peaks installsertifikaadi määramine käib tolle virtuaalhosti propertiesist, kahtlemata jaotisest Directory security.
  • Sealtsamast ja just virtuaalserveri tasemelt saab määrata ka CTLi (Certificate trust list), see teeb edasise elu ja kontrollimise lihtsamaks. Listi peab lisama Juur-SK ja ESTEID-SK sertifikaadid. Enable CTL.
  • Kogu saidi ulatuses võiks jaotisest Client Certificates valida Ignore, siis pole iga suvalise lehe küsimisel sertifikaat oluline.

Oletame, et sertifikaadi järgi tuvastamiseks kasutame ainult üht faili (sisuliselt logon). Teeme näiteks faili logon.asp kasvõi serveri juurkataloogi. Faili sisuks võiks panna midagi sellist (VBscript — NB: siin ja allpool koodinäidetes < ja % vahelt vaja üks tühik ära koristada, kohalik sisuhaldus ei luba muidu lihtsalt lehel kommentaari-märgendust)


Kas ei tundugi nii hull? Ürita siis selle järgi IIS konfida… ja siis hakkab see hull tunduma. Parimal juhul on need märkmed selleks, et nende järgi konfigureerimisõpetust kirjutada.

Õnneks ei olnud antud IIS’i konfimine sellel hetkel enam minu rida – aga teiste inimeste Kolgata teekond alles algas.Sõna-sõnalt selle õpetuse järgi tehes ei õnnestunud midagi mõistlikku saada. Pärast paljusid telefonikõnesid, emaile ja (üldjuhul ignoreeritud) postitusi id.ee foorumisse õnnestusid serdid lõpuks peale saada… Kunagi lähitulevikus saab sellest korralik juhend kirjutatud – nii firmasiseseks kasutamiseks kui saab see ka id.ee’le saadetud… loodetavasti panevad nad selle üles.See oli siis esimene osa. Serdid olid peal, testkaart töötas id.ee’s toodud VBScriptiga… aga kui sai seesama asi kirjutatud ümber ASP.NET’i – katsetades nii C# kui VB.NET’i – siis ei töödanud enam midagi.

Taaskord sai kaastöötaja istuda telefoni otsas ja paluda abi id.ee’st – ning talle vastati ülbelt “Helistage <insert tundmatu arvutifirma nimi>, nemad on seda teinud”.

Tjahh… Olgu pealegi. Helistati, meiliti… vastust vähemalt siiani (ca 2 nädalat ei ole). Veidi abi sai Hinnavaatluse foorumist – aga mitte oluliselt.

Lõpuks saigi asi ajutiselt kokku traageldatud ASP’ist ASP.NET’i sessiooni üle viies. Need, kes teavad, ohkasid siinkohal….

Mõni ime, et ID-kaarti ei kasutata kuigi laialdaselt. Sellel oleks potensiaali kõikjal Eestis – ja pikemas perspektiivis ilmselt ka välismaal – identimised, sisselogimised, digiallkirjad, krüpteerimine. Kuid riigi jaoks on taaskord tegemist projektiga, millele sai linnukese ette panna – “tehtud” – ja siis unustada.

Tore oleks, kui ID-kaart siiski ametnike süüdimatuse-hoolimatuse tõttu unustusse ei vajuks.

Lisaks veel ühe väikese halina veebilehe id.ee teemal. Kas tõesti on raske teha menüüsid, mis ise sulguksid? Liiguta hiirt kogemata üle menüü – ja sul on suur lärakas rippmenüüd mis enne ei sulgu, kui selles olevas lingis klikid. Õnnetus, mitte menüü.

Järgmine lehekülg »

Blog at WordPress.com.