Category: Webdizajn

Veľmi dobrá prednáška od Lea Verou, grékine pracujúcej pre W3C, o zaujímavých trikoch ktoré sa dajú robiť s CSS3: More CSS Secrets: Another 10 things you may not know about CSS.

Prečo použiť štandardný kód:

<div class=„logo“><a href=„/“><img src=„/images/com­pany.png“ alt=„Company Ltd.“ />

keď to ide aj takto:

<div title=„Company Ltd.“ class=„logo“ onclick=„launchMe­nu(‚main‘);“ onmouseover=„this­.style.cursor=‚han­d‘; this.style.cur­sor=‚pointer‘;“ style=„background-image: url(/images/com­pany.gif)“></div>

Som už unavený, takže súvislosti na Spravodajovi. Dneska to tu proste bude holé.

Dnes sa „dalo“ hlasovať za nových obyvateľov do vily Vyvolených 2… Totiž J@Jka si nedokáže zaplatiť poriadny hosting, ktorý by zvládol nápor hlasujúcich. počas hodiny sa mi ani raz poriadne nenačítali obrázky súťažiacich, ich čísla, alebo hlasovacie tlačidlá.

Človek by si myslel, že stránky poskytujúce prenos TV vysielania cez internet niečo zvládnu. 

Tiež STV má v posledných dňoch veľké problémy s databázou. Často sa zobrazila len krátka správa o preťaženej databáze.

Práve teraz sa však stalo niečo lepšie… Zobrazila sa časť PHP skriptu… Samozrejme, že autor stránok používa skladané SQL skripty, plne vhodné na SQL injection.

Nie, takto sa stránky nerobia…

Pri testovaní použiteľnosti stránok sa niekedy používajú kamery, ktoré snímajú užívateľove oči a sleduje sa tak pohyb užívateľa po stránke, jeho zaujatie prvkami a dajú sa odhaliť problémové alebo nezaujímavé časti stránok.

Iný pohľad na prácu užívateľov so stránkami (jednotlivej stránke, nie celom webe) poskytuje pohyb myši. Sledovanie pohybu myši neposkytuje informácie o vizuálnom vneme stránok, môže však odhaliť chybne fungujúce rozbaľovacie menu, neatraktívne odkazy, ale rozhodovanie sa užívateľa pri odosielaní formuláru.

Pri čítaní stránky sa kurzor najskôr bude nachádzať mimo textu, pri vypĺnaní formuláru však je možné sledovať pohyb myši hlavne medzi odosielacími tlačidlami.

Napísal som si teda skript, ktorý sleduje zmenu pozície kurzora každú 0,5 sekundu. Keď užívateľ opustí stránku, dáta sa pomocou AJAX technológie odošlú na server. Zatiaľ mám hotový ukladací skript v PHP. V ASP.NET je pri AJAX veľmi výhodné využiť natívnu podporu pre XML formát a HTTP end-pointy v SQL 2005. Skombinovaním AJAX a SOAP je možné priamo pristupovať do databázy bez nutnosti písať server-side kód (v ASP.NET a pod.).

Druhú časť programu tvorí klientská aplikácia v C#, ktorá dokáže z dát vytvoriť mapu pohybu po stránke. Ide len o jednoduchú aplikáciu, ktorá nesťahuje dáta z databázy, ale je potrebné ich vložiť do textového poľa. Vie len zobraziť cestu pohybu po stránke. Bude treba dorobiť drag&drop pre nahratie obrázku do pozadia pod cestu (screen shot stránky). Tu by sa hodilo nové Gecko, ktoré by malo vedieť spraviť z celej stránky jeden veľký obrázok.

User tracker uchováva informcáie o pozícii myši v tomto formáte:

x,y,time[;x,y,time]

V prípade XML formátu sú pozície uložené v elemente p:

<p x="0" y="0" t="5" />

• x je x-ová súradnica kurzoru,
• y je y-ová súradnica kurzoru,
• time (t) je čas v milisekundách medzi 2 zaznamenanými pozíciami kurzoru vydelený 100 (kvôli zníženiu veľkosti dát). Najmenší interval snímania je 500ms.

Časový údaj o pozícii získate napr. takýmto kódom:

List data = ParseData(); // spracuje dáta
TimeSpan absTime = TimeSpan.Zero;
for(int i=0; i<data.Length; i++)
{
        // získanie údaju v milisekundách
        tmpTime = (int)(Convert.ToSingle(data.t) * 100);

        // pridanie k celkovému času
        // teraz obsahuje čas od začiatku snímania kuzoru
        absTime = absTime.Add(new TimeSpan(tmpTime));

        // ... prípadné použite absTime a pod.
}

// absTime obsahuje celkový čas snímania kurzoru

User tracker je uvoľnený pod GPL licenciou. Vyžaduje knižnicu lib.js, ktorá je obsiahnutá v balíku.

Zdrojové kódy User trackeru sú k dispozícii na stiahnutie. Obsahujú knižnicu lib.js, ajax.js, trackuser.js a trackuser.php. V súbore trackuser.js je potrebné upraviť cestu k trackuser.php na absolútnu a v trackuser.php nastaviť meno a heslo pre databázu.

Windows aplikáciu zobrazujúcu castu neuvoľním, kým nebudem mať k dispozícii nástroje pre vývoj aplikácií v .NET v2.0. Plná verzia .NETu v2.0 už bola vydaná, nechcem teda vypúšťať von aplikáciu, ktorá funguje pod beta verziu .NET v2.0.

Izsak's Website Suite prechádaza na LucidCMS systém a prechod si vyžiadal ďalšie komplikácie. Ako som písal, nastal veľký, krátky výpadok www.izsak.net. Teraz som objavil chybu, ktorá spôsobovala, že Apache poslal pre MSIE zdrojový kód PHP súboru!

Ako hlavný indexový súbor som mal nastavený index.xht s MIME typom application/xhtml+xml. Pre prehliadače nepodporujúce tento MIME typ bola hlavička upravená na text/html.

DirectoryIndex index.xht index.php index.htm

AddType 'application/xhtml+xml; charset=utf-8' .xht

RewriteEngine On

RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml
RewriteRule \.xht$ - [T=text/html;charset=utf-8]

Všetko fungovalo správne. Pokým som nenasadil LucidCMD systém a nechcel som prepisovať URL na adresu index.php?url=cesta&r=1. V tom čase nastal prvý výpadok, pretože som si nechal nastaviť zlé RewriteRules.

Technická podpora Českého Hotingu mi ochotne nastavila pravidlá tak, aby sa nebilo prepisovanie URL pre www.izsak.net a pre www.izsak.net/weblog.

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} -d
RewriteRule ^/([^/]*)$ - [L,S=1]

RewriteRule ^/([^/]*)$ /index.php?url=$1&r=1 [L]

Pri zadaní adresy www.izsak.net však Apache presmeroval interne URl na www.izsak.net/index.php?url=index.xht&r=1. Toto chovanie sa mi zdá dosť podivné, počítal som s tým, že parameter url= bude prázdy a nie index.xht.

Objevil som však záhadnú chybu v MSIE: Apache posielal zdrojový kód index.php súboru. Iba tohoto, žiadnych iných našťastie. Po zadaní priamej adresy www.izsak.net/index.php sa však zobrazila správna stránka.

Skúsil som teda použiť nástroj Fiddler Tool na prezretie hlavičiek, ktoré posiela MSIE na server a ich prípadné upravenie. Potom, čo som pridal do hlavičiek

Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5`

(cez Request Builder), server vrátil stránku a nie zdrojový kód. Objavil som teda chybu – prepisanie MIME typu pre .xht súbory.

Rýchlym riešením je odstránenie všetkých pravidiel pre .xht súbory (hlavne RewriteRule). Na iné riešenie som teraz neprišiel (a asi ani neprídem, pretože do rewrite pravidiel sa príliš nevyznám).

Ešte raz samusím poďakovať technickej podpore Českého hostingu za promptné a ochotné riešenie problému.

14.9. 2005 VÚB Banka spustila novú verziu Internet Bankingu. Aké nové služby prináša?

Na prvý pohľad pôsobí dizajn celkom príjemne, je čistejší ako v starom internet bankingu ale pôvodný dizajn vyzeral konzistentnejšie.

Úvodná stránka IB je rozšírená o informácie pre klientov o tejto službe – ako si nastaviť prehliadač pre certifikáty, čo je IB Plus a iné. Bohužiaľ, tu končia všetky novinky, ktoré sú na prospech užívateľovi. Ďalej je to len horšie a horšie s použiteľnosťou a prehladnosťou.

Internet Banking je čisto textový! Nechápem, prečo sa niekto rozhodol zrušiť ikonky – veď sprehľadňovali, zrýchlovali a uľahčovali navigáciu po stránke. Teraz treba stále len čítať texty na tlačidlách – a to len z jediného dôvodu – niekto sa rozhodol, že nebudú existovať klikateľné odkazy!!! ++(Názov konto nie je odkaz, po kliknutí sa zvýrazní riadok tabuľky a potom je potrebné použiť „akčné tlačidlo“)++

IB beží na ASP.NET technológii. Ako je známe programátorom v .NET, webové formuláre –často– vyžadujú postback cez POST ++(preto sa to volá postback)++. Realizátor IB sa rozhodol pre veľmi úžasnú vec: chcete si zobraziť informácie o účte? Naprv si kliknite na účet v zozname a potom kliknite na tlačidlo „Detail účtu“! Prečo to však nejde jednoduchšie? Len cez jednoduché kliknutie? Pretože sa niekto nedokázal vysporiadať s postbackom a pretože niekto iný odstránil ikonky.

Teraz sú všetky „akčné“ tlačidlá umiestnené pod zoznamom (napr. tabuľka s účtami). Vy si kliknete na ten, s ktorým chcete robiť a potom zvolíte akciu! Toto je nonsense! Naozaj nechápem dôvod odstránenia ikoniek – boli pekne v jednom riadku pri účte a len ste si klikli na požadovanú akciu. Teraz vďaka obrovským <button>om treba požívať tento debilný postup. ++Všetko beží pod JS, takže obrázky je možné použiť.++

V schránke správ použili obdobný postup. Ale načo? Veď je tam jediná akcia a to zobrazenie správy. Schránka tiež obsahuje chybu: Keď si otvoríte nejakú správu, odkaz „Schránka správ: 1/0“ nefunguje!

Výpis pohybov na účte je tiež prepracovaný k horšiemu. Farebne odlišuje len debety, kredity sú čiernou. A pritom tá zelená tam bola perfektná. Jediný prínos je v možnosti „Zadať rovnakú platbu“, čo zrejme predvyplní platobný formulár. Nemal som možnosť túto funkciu na niečom odskúšať.

Odstránili tiež tlačidlo „Cenník“. Teraz je absolútne nemožné si jednoducho zistiť, čo vás stoja jednotlivé položky (platba do zahraničia, SMS notifikácia, e-mailová notifikácia…). Najskôr to treba pracne hľadať na VÚB stránkach.

Jednotlivé sekcie IB sú farebne rozlíšené podľa farebnosti produktov – účty sú bledomodré, úvery červené atď. ++Toto je plus, ale menšie plus.++

Štandardom zostáva, že VÚB IB má dobrý tlačový výstup pomocou CSS.

Zhrnutie: je pekné, že IB zobrazuje teraz oveľa viacej informácií a niektoré sú aj prehľadné, ale je absolútne nepoužiteľný. Kým sa niekam dostanete, musíte si vyklikať myšku. Ako je zvykom (a hlavne v ASP.NET), všetko beží na JS. Je však funkčný v MSIE aj Mozille, Operu som neskúšal. V prerobení IB sa skrýval veľký potenciál. Firma, ktorá ho realizovala, to však maximálne pokazila a predchádzajúci IB bol oveľa lepší. Lepší však bol zrejme len z pohľadu ľudí, ktorí s ním pracovali a nie z pohľadu manažérskej stoličky. Produkt, kvôli ktorému som si zvolil banku sa zvrhol, takže sa môže začať prieskum trhu a napriek hroznému IB v SLSP budem zvažovať zmenu banky.

Zákazku zrejme realizovala rovnaká firma, ako tá, čo robila stránky VÚB, ktoré sú perfektne použiteľné a prehľadné. Prečo si zvolili takýto prístup k použiteľnosti nerozumiem. Úžívatelia si však budú musieť zvyknúť a MSIE-čkári sú na bezduché klikanie z podobných aplikácií už asi zvyknutí a nebudú teda proti novému IB protestovať…