Category: Webdizajn

Jeden z dôvodov, prečo som si založil účet vo VÚB a nie v SLSP bola zaručená funkčnosť Interbet Bankingu (IB) i v prehliadačoch s jadrom Gecko.
Po polroku používania som zistil, že je oveľa prehľadnejší ako IB SLSP a jednoduchší. Dnes som v schránke správ našiel informáciu o spôsobe vypĺňania formulárov pri platbe do zahraničia a potreboval som si túto informáciu vytlačiť.

Vďaka kaskádovým štýlom netreba text, ktorý si chcete vytlačiť, označovať a pri tlači vyberať voľbu „tlačiť označený text“. Stránky sú navrhnuté tak, že pri tlačení je celá navigácia i hlavička skrytá, čiže sa tlačia iba potrebné informácie. Menšia nevýhoda je v neštandardne riešenom layoute, vďaka čomu sa tlačí i jedna voľná strana navyše.

I keď takéto funkcie by mali byť na stránkach samozrejmosťou, sú používané iba ojedinele aj napriek tomu, že výrazne uľahčujú ľudom prácu.

Aktualizácia: práve som vybral papier z tlačiarne. Modrá síce je štandardnou farbou VUB, ale webdizajnéri mohli nastaviť, aby sa text tlačil v čiernej . Predsa len míňať modrú farbu na takúto tlač nie je najlepšie.

Prišiel som na jedno vylepšenie, ktoré mierne zvyšuje prístupnosť formulárov (najmä pri publikovaní článkov). Ide o dynamické generovanie atribútu title tlačidlu pre uloženie článku – vždy bude obsahovať názov publikovaného článku.

Základný kód

Formuláre pre písanie článkov v redakčných systémoch obsahujú pole pre titulok článku a tlačidlo pre uloženie (publikovanie) článku.

<p>
  <input type="text" id="Title" />
  <textarea id="Body" />
</p>
<p>
  <input type="submit" id="Publish" />
</p>

JS kód

Úprava spočíva v pridaní JS kódu, ktorý po zmene titulku aktualizuje atribút title publikovacieho tlačidla.

document.getElementById('Publish').title = 'Publikuj '+ this.value;
// alebo
document.getElementById('Publish').setAttribute('title', 'Publikuj '+ this.value);

Celý „XHTML“ kód:

<p>
  <input type="text" id="Title"
    onchange="document.getElementById('Publish').title = 'Publikuj '+ this.value;"
   />
  <textarea id="Body" />
</p>
<p>
  <input type="submit" id="Publish" />
</p>

XForms

V XForms je možné takýto databinding vytvoriť natívne. Na ich podporu si však ešte chvíľu budeme musieť počkať.

Tak som si zisťoval, akí odborníci na tvorbu stránok sú na Pokeci. Niekto vie robiť stránky, iný zase prezentačky. Sú tu dosť megalomani: najprv ich prezentácia má 100MB, potom zrazu len 20MB (Zrejme nejaký Flash, ešte stále mi to nedorazilo do schránky).

Jeden user stránky píše, ale zrejme je lepšie ich tvoriť:

No, nemusi to byt hned. a to je akoze lacnejsi program? hmm, vobec sa tomu nerozumiem. a co take si uz vytvoril??
To take pre uja pre seba atd.....Nic moc ziadna slava bo to je pisane a nie tvorene

Sú tu aj odborníci na zabezpečenie:

a nebude tam virus?
nie…azet to vsetko detekuje

Pripomeniem len, že „Azet“ sa dá chápať ako engine, na ktorom beží celý Pokec, čiže PHP aplikácia a nie je to antivírus 

Žiadne odkazy, čo mi poslali, nefungovali. Nemôžem teda povedať, či vedia alebo nevedia na Pokeci robiť stránky. Do počítačových technológií sa však vôbec nevyznajú (ale okolie im určite verí, keď zadrú nejakú hovadinu).

---

Aktualizácia: Jeden týpek (DarkOmen1) sa údajne podielal na vývoji portálu www.mesto.sk a toto je jeho odpoveď na otázku, v čom sa to dá spraviť:

Môžeš použiť php, alebo sa dá aj vo worde, alebo mozzila vývoj a tak. Určite by si sa to naučila. Najjednoduchší je pawerpoint od microsoft

Strašné kaleráby vie niekto tlačiť.

Poznámka: keďže som bol prihlásený pod ženským kontom, je použitý v niektorých príspevkoch ženský rod.

Používam nočný build Firefoxu a v JavaScript konzole zobrazuje všetky chybné CSS deklarácie a čo s nimi spravil. Hlási chybné názvy vlastností ale aj nesprávne hodnoty.
Na výsledné chovanie si budeme musieť počkať (či to bude len potichu vypisovať, alebo bude ohlasovať chyby), ale je možné, že bude treba podtržníkové hacky presunúť do samostatného súboru a pripojiť v podmienenom komentári. Trochu paradoxne už ale nebude treba používať podtržník .

Či je podtržníkový hack validný podľa štandardu, alebo nie, je teraz vlastne jeho. Dôležité je, ako ho spracujú prehliadače a podľa tohoto správania je nevalidný.

PS: Po kliknutí na súbor sa zobrazí zdrojový kód a zvýraznený chybný zápis.

V súčastnosti je vývoj stránok neskutočne nákladný. Teraz sa mi nejedná o rôznu (a hlavne chybnú) interpretáciu CSS v prehliadačoch, ale o to, čo sú niektoré firmy ochotné vyvýjať a iné sú ochotné si to kúpiť.

Ako som písal v predchádzajúcom článku.(Prístupné rozbalovacie menu) existuje spôsob, ako vytvoriť rýchle a prístupné rozbalovacie menu i napriek stupidite najrozšírenejšieho prehliadače MSIE.

Stránka, ktorú som redesignoval mala neskutočne rozsiahly zdrojový kód JS-only rozbalovacieho menu: 154kB!!! (s odtránenými tzv. bielymi znakmi) Ďalších 7kB tvoril iný JS súbor, ktorý definoval samotné položky. To sú takmer 3 sekundy čistého načítavania na dial-upe.

Najviac by ma zaujímalo, kto dokáže zaplatiť programátorov na vývoj nepoužiteľného menu, ktoré má neuvertieľných 154kB v komprimovanej podobe?

Vývoj prístupného menu mi zabral necelé poobedie a najdlhšie na tom bolo napísať všetky položky v <ul> zozame :-O. Stačilo (naozaj) chvíľu stráviť na Google a dostal som sa k súboru csshover.htc.
Veľkosť CSS je približne 1,6kB, HTML kód definujúci menu zaberá 3,5kB a HTC súbor, ktorý sťahuje iba IE, je 3kB. Spolu o niečo viacej ako len definovanie položiek v pôvodnom, neprístupnom, menu.

Oplatí sa tvoriť a nechať si vytvoriť prístupné webové stránky.

Pri redesigne stránok Bauchemia T. B. som musel vytvoriť rozbalovacie menu, ktoré však bude prístupné. Nechcel som použiť JS, lenže IE nepodporuje pseudo vlastnosť :hover na iných elementoch, ako je <a>.

Elegantným a prístupný riešením sú behaviors pre IE. Podarilo sa mi objaviť HTC script, ktorý pridáva pomocou behavior: podporu pre :hover. Autorom csshover.htc je Peter Nederlof.

Pridanie podpory pre CSS pseudo vlastnosť :hover do Internet Exploreru:

body { behavior:url("csshover.htc"); }

Prípadne môžete použiť _hack:

body { _behavior:url("csshover.htc"); }

Po objavení hacku pre fixné umiestnenie položiek na stránke aj v IE je za necelého polroka táto technika ďalšou perfektnou možnosťou, ako vytvoriť prístupnejšie, rýchlejšie a netradičné WWW stránky.

Doplnenie: .htc súbory je potrebné posielať s MIME typom text/x-component, pretože IE6 SP2 ich nemusí spracovať. Zatiaľ mi .htc súbory bežia v IE6 SP2 aj s MIME typom text/plain, ale je lepšie dodržať uvedený typ..[note]

Plaváček predviedol, že sa dá vytvoriť klasický layout stránky len s pomocou sémantických elementov a s použitím iba 1 <div>u a 1 <span>u.

Ukážka layoutu: http://klient.plavacek.net/div/

Nad týmto projektom sa profesionálni webdesignéri môžu len pousmiať, a tí ostatní uvedené pravidlá aj tak nebudú dodržiavať.

BlindFriendly.sk nedodržiava veľké množstvo vlastných odporúčaní (ktoré sú vlastne slovenským prekladom WCAG, doplnené o chybné príklady HTML kódu). Stretnutie Ronyho s tvorcom BlindFriendly.sk by mohlo tento projekt vylepšiť. Celkovo tento web je totiž horší ako niektoré začiatočnícke weby z Diskusie Jak Psát Web, alebo prezentácie umiestňované na Level CD/DVD.

Médiá: záznam z Novín STV.

Aj zlá reklama, je reklama. Už dlho som nevidel takto odfláknuté firemné stránky. Ešte k tomu sa táto firma zaoberá profesionálnou tvorbou stránok. Pokiaľ chcete vidieť, ako sa robia skutočné, profesionálne prezentácie, pozrite si môj aktuálny projekt M Studio.at.

Aktualizácia: stránky už majú vynovené, avšak žiadna sláva. Tuctový preplácaný layout . Screenshot pôvodných stránok nemám (nemám ani iné staré obrázky z weblogu ).

Denník SME som navštívil po veľmi dlhej dobe a milo ma prekvapil: adresy článkov sú už užívateľsky prívetivé. Obsahujú celý titulok nadpisu, s odstránenou diakritikou.

Nový odkaz: http://www.sme.sk/…borskej.html
Starý odkaz: http://www.sme.sk/clanok.asp?…