Zneužité pasy a ochrana osobních údajů v praxi.
Následující odkaz jsem objevil u Letinky a protože na její blog možná někteří z vás nechodí (což je lecky škoda), velmi rád se s vámi podělím o katastrofu, která proběhla bez povšimnutí našich jindy tak pohotových médií.
Na stránce International Passport je k dispozici celosvětová databáze cestovních pasů a dokonce i s fotkami. Věřím, že stejně jako já, objevíte se tam i vy v barvách vyvedeni a se všemi údaji, které tato magická knížka poskytuje.
Co s nastalou situací učiní naše odpovědné orgány je nabíledni – vyvolají vládní krizi, která není krizí, zmíní se plačky o nevytápěných vagonech na železnici a odhlasují si vyšší diety.
Webdesignérská miniatura
Včera k večeru jsem obdržel mimořádné volno, erotické radovánky se nekonaly a vysílané Banánové rybičky mě zprostily i nutnosti podvečerní komunikace s mou družkou. Ostatně, v této souvislosti jsem k svému překvapení zjistil, že boj zákeřných televizních stanic o co nejvyšší sledovanost nepřímo postihl i naši inteligentní domácnost. Má jinak vcelku rozumná přítelkyně naprosto propadla kouzlu sledování cizích osudů (nekonečná telenovela se jmenuje Rodinné chomouty, nebo nějak podobně) a na řízení svého vlastního osudu ji nezbývá čas. Pokud si vzpomínám, poslední smysluplný rozhovor jsme vedli někdy mezi jedenáctým a čtrnáctým lednem tohoto roku, tuším, že v odpoledních hodinách.
Ten se točil kolem záludné otázky týkající se takzvaných spořivých žárovek. Možná je znáte – stojí třikrát víc než Edisonovy standardky, ale spotřebují třikrát méně elektrické energie. Třikrát méně také svítí, ale zato pěkně nahlas, takže si občas připadám jako nešťastník bydlící v těsném sousedství elektrické trafostanice. To ale výrobci podobných hračiček vesměs taktně zamlčují.
Základní téma bouřlivé diskuse tkvělo v myšlence, která se mi dlouho honila hlavou. Vezmu-li v úvahu, že takováto spořivka má ušetřit elektrickou energii a to až třikrát oproti standardní žárovce, musí nutně SVÍTIT. Jinak řečeno – čím více svítí, tím více šetří, což mi přišlo logické, protože – je-li zhasnutá, ušetří přesně stejně tolik energie, jako její nesvítící levnější varianta a ekonomický přínos se tak díky vyšší pořizovací ceně stírá až do záporna.
Předchozí tři odstavce byl zbytečný úvod, který s tématem spotu nesouvisí. Takže k věci. Jistě jste zaznamenali, že zejména v poslední době tíhnou webdesigneři (ale i webdesignerské firmy či studia) k jakémusi minimalismu při tvorbě webových stránek. Minimalismus sám o sobě není špatný, jenže jak známo, nic se nemá přehánět. Čím jsem starší, tím více mi vadí nadprodukce prťavých nanopísmem šedého charakteru nejlépe na šedém pozadí (a zásadně s nepodtrhanými odkazy). Co k takové sabotáži na zrakové orgány uživatelů odpovědné osoby vede, bůh suď. Abych ale nevyčníval a nebyl prohlášen za staromila, který nedokáže být IN, rozhodl jsem se právě včera večer, v té volné chvilce, kterou mi poskytla upovídaná Halina Pawlovská, stvořit také jeden opravdu, ale opravdu minimalistický webík.
Tak si ho vychutnejte, ale dejte pozor – v JESPRPU (Internet Explorer) neuvidíte pravděpodobně nic, což je okamžik jako stvořený k nastartování Mozilly či Firefoxu a kroucení kolečkem (nebo CTRL +, jak je ctěná libost). Kdo nezkusí, neuvidí.
Negativisté versus pozitivisté.
Přijměte pokornou omluvu předem za tento spot, který bude více osobním, než u mě bývá zvykem. K obecnému zamyšlení nad podivnou českou povahou mě přinutilo několik ohlasů na mnou vymyšlený, s láskou stvořený a díky nezištné spolupráci dalších kolegů fungující Moderní web. Pominu-li fakt, že doména i webhosting něco stojí, což je skutečnost, který mi pravidelně má družka otlouká o hlavu, odmítnu-li s odkazem na tíživější finanční situaci sponzorovat její nový kožený kostýmek, zbývá ještě skutečnost, že celému projektu věnuji dost svého, někdy drahocenného času. A nejen já. Uvrtal jsem do něho dalších šest lidí. I ti mají jistě svých starostí dost.
Jediným cílem celého projektu bylo, je a bude prezentovat kvalitní práci webdesignerů, grafiků a kodérů (přičemž jako první uznám, že ne vždy je na zveřejněných webech vše v dokonalé harmonii, někdy zaujme vzhled, jindy technické zpracování, záleží na úhlu pohledu a svědomí každého „porotce“) a snažit se svým skromným dílem přispět ke zkvalitnění českého internetu. Možnost komentování vystavených webů návštěvníky (kterou jsem zpočátku odmítal) byla lidem dána proto, aby konstruktivně a pohledem třeba i laickým upozornili autory na nedodělky a prohřešky, jichž se při tvorbě dopustili. A tím jim poskytli užitečnou zpětnou vazbu.
Uvědomte si, že webdesign je jenom obyčejné řemeslo a grafická podoba webu je (nebo by měla být) pouhým bonbónkem, třešničkou na dortu. Kupříkladu informační web města Buštěhradu, který sice prolezl odbornou porotu s odřenýma ušima, splňuje svou základní funkci na sto procent. Byť je graficky mírně nedotažený, je přístupný, snadno použitelný a plný toho, co jeho návštěvníci od webu veřejné správy očekávají – informací. Z ostatních webů veřejné správy (nebudu jmenovat) prostě jednoznačně svou kvalitou vyčnívá. Nesmyslné až urážlivé komentáře typu „To je fakt humus“, „Co to tady dělá“, „Moderní web upadá“ budu propříště nemilosrdně mazat s doporučením, aby autor komentářového paskvilu vyrazil na cestu do svého nitra a zamyslel se nad sebou. Není přece takový problém napsat konkrétně a hlavně slušně, co přesně mi vadí. Ano, neoslovila mě grafika, ale hledám-li informaci, vím, že ji snadno najdu.
Webdesign totiž není jenom grafika, byť se mnohde právě tohle můžete dočíst. Webdesign je především skloubením zdánlivě nemožného a hlavně – věčným kompromisem mezi tím, co chci a mezi tím, co mohu. Primárním účelem grafiky na webu je pomoci uživateli se lépe orientovat, ale bez ní to jde taky (příkladem budiž Sova v síti Marka Prokopa, Yuhův weblog, ostatně i Pixyho Wellstyled). Každý web má své zaměření a tomu je podřízen grafický vzhled. Hodnotí-li tedy „porotci“ nějaký nominovaný projekt, přihlížejí především k tomu, jak je použitelný, jak je přístupný, zda je správně využita zvolená technologie a podobně. Nehodnotí tak přísně grafiku nebo validitu (která se poslední dobou stala modlou především mezi začínajícími tvůrci), ale webdesign. Tedy celý funkční celek. A protože v „porotě“ zasedají lidé různého zaměření (profesionál na přístupnost, špičkový webdesigner, skvělý kodér, sympatická kritička z lidu a podobně), je jasné, že občas se jejich pohled na nominovaný web mírně liší.
I proto jsme stanovili onu magickou hranici 60 procent, při jejímž dosažení (hodnotí všech sedm „porotců“) je inkriminovaný web zveřejněn i s vědomím, že mu k dokonalosti něco chybí. Ale tak to v životě chodí a dobrá práce, byť mírně nedotažená, si přece ocenění zaslouží.
Abych vysvětlil titulek spotu – negativista je tvor, který v čemkoliv, co je mu předloženo, hledá to špatné. Masové knedlíčky v polévce Knorr zdají se mu nějaké mrňavé a ještě jich je pomálu. Pozitivista naopak zakřepčí radostí pokaždé, když v pytlíku objeví alespoň jeden podvyživený drobeček. Hle, jak je na světě veselo. I jeden pitomý knedlíček může zajistit celodenní dobrou náladu, zvláště, když jste týden ani sousta nepozřeli.
Já i celý tým, který se mnou spolupracuje, se řadíme k lidem s pozitivním vztahem k životu a vězte, že dobrou náladu a optimistický přístup si nenecháme zkazit nějakým anonymním pofrkáváním, jak děláme všechno špatně. Ostatně každý z vás má možnost zasednout před klávesnici a stvořit něco, nad čím celá „odborná porota“ sedne na zadek. Rád bych se něčeho podobného dožil a budu první, kdo takovému dílu dá premiérovou desítku v hodnotící stupnici.
Amen.
Přístupná obrázková navigace. Aktualizováno.
Aktualizace na konci spotu.
Občas se stane, že konečná podoba webu vyžaduje trochu více grafické invence, zejména co se použitých fontů týká. Jistě víte, že na webu nemáte moc na výběr a tak jste leckdy vystaveni stresující situaci, kdy klient trvá v navigačním menu (ale třeba i nadpisech, sloganech a podobně) na písmu, které byste v operačních systémech uživatelů hledali marně. V takovém případě nezbývá nezbývá nic jiného, než sáhnout po oblíbeném grafickém editoru, navigaci si namalovat a pak řešit problém, jak ji zakomponovat do kódu stránky, abyste se nezpronevěřili základním pravidlům přístupnosti.
Ukáži vám dnes jedno ověřené a elegantní řešení, jak vyzrát na zapeklitý problém, ale předem si neodpustím jedno varování. Při komponování obrázkové navigace je třeba mít na paměti, že stále ještě existuje velké procento nešťastníků, jejichž jedinou možností, jak se připojit k internetu je poněkud dýchavičný obyčejný modem. Držte tedy na uzdě své grafické choutky a optimalizujte co nejlépe. Drobnou útěchou vám může být fakt, že obrázky se načtou jenom jednou a ještě dříve, než se tak stane, má uživatel k dispozici textové menu, takže může směle brouzdat, aniž by zbytečně čekal na načtení celé stránky. Jak toho dosáhnout vám dnes názorně předvedu. Skoukněte si předem tuto roztomilou ukázku a zkuste si přitom vypnout styly nebo zobrazování obrázků ve svém prohlížeči. Hned poté se střemhlav společně ponořme do kreslení obrázků, tvorby kódu stránky a sepisování stylového předpisu.
Především si nakreslíme obrázky, které chceme, aby fungovaly jako základní navigace. Asi takto pro jednotlivé odkazy:
Povšimněte si, že jeden jediný obrázek představuje hned tři stavy tlačítka – standardní, hover (ten se aktivuje při najetí myší nad obrázek) a aktivní (ten je k dispozici, když jste na zmíněné stránce a odkaz se nekoná). Pro sebe jsem si zvolil prostřední obrázek jako výchozí, levý bude vytvářet hover efekt a pravý se zobrazí, pokud se na stránce budu nacházet. Vše si můžete na výše zmíněné ukázce vyzkoušet. Ve vlastním kódu je pak využito Pixyho principu změny pozice obrázků na pozadí. O tom ale více dále.
Vlastní kód stránky je velmi, velmi jednoduchý.
Stylový předpis začneme základními definicemi:
* {
margin: 0;
padding: 0;
}
body {
font-family: Tahoma, Verdana, Arial, lucida, sans-serif;
background: #fff;
color: #000;
font-size: x-small;
text-align: center;
min-width: 770px;
padding: 50px 0;
}
html>body {
font-size: small;
}
#main {
width: 770px;
text-align: left;
margin: 0 auto;
}
Standardní definice pro BODY a hlavní prvek MAIN, který zajišťuje umístění prezentace na střed. Ten je zde jenom do počtu, s tématem navigace nesouvisí. Úvodní zápis s hvězdičkou je také navíc, tím si vynuluji výchozí hodnoty pro všechny blokové prvky (nadpisy, odstavce, seznamy atd.), čímž si do budoucna ušetřím spoustu starostí.
Dále už to bude zajímavější. Stvoříme si definici menu, které bude tvořeno obyčejným seznamem (tedy za pomoci elementů UL a LI). Výšku pro element UL nastavíme stejnou, jako je výška připravených obrázků. Jednotlivé položky seznamu LI pak obdaříme stejným rozměrem, jako je jedna třetina obrázku (300px / 3), tedy 100px a nastavíme i stejnou výšku jako pro nadřazený element UL. Nakonec necháme všechny položky pěkně plavat, čili jim přiřadíme vlastnost float, aby se umístily pěkně vedle sebe, zrušíme odrážky list-style a nastavíme nějaké pozadí, což se bude hodit, až bude váš web prohlížet někdo s vypnutými obrázky. Posledním činem je nastavení relativní pozice, což je nutná podmínka k tomu, abychom obrázky (a také odkazy) mohli pozicovat absolutně. Zjednodušeně řečeno, text umístěný v odkazu přeplácneme obrázkem, takže nebude viditelný.
Poznámka: nezapomeňte pak také ukončit obtékání nějakým prvkem s clear: both. V daném případě se tím nezabývám, protože záleží na okolnostech, jak máte postavený celý kód stránky.
#menu {
height: 100px;
}
#menu li {
width: 100px;
height: 100px;
float: left;
position: relative;
list-style: none;
background: #ececec;
}
Nyní si připravíme vlastnosti jednotlivých odkazů, umístěných v elementu A. Jeho součástí (a také jediným prvkem navíc) bude element SPAN, kterému pak budeme přiřazovat kýžené pozadí a překrývat tak text pod ním. Vlastnosti obou prvků budou téměř identické, takže vystačíme se složenou definicí takto:
#menu a, #menu span {
display: block;
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
#menu span {
z-index: 1;
cursor: pointer;
cursor: hand;
}
#menu span.active {
cursor: default;
}
Protože oba elementy jsou řádkové, nastavíme jim vlastnost display block a šířku a výšku nemlich stejnou, jako u nadřazeného elementu LI. Overflow: hidden nám pak zajistí, že text umístěný pod obrázkem nikam ven neuteče (zvláště bude-li delší, nebo si uživatel zvětší písmo) a umístíme všechny elementy A absolutně.
Pro element SPAN pak nadefinujeme mírně odlišné vlastnosti – především mu nastavíme vyšší z-index (z-index řídí vrstvy absolutně a relativně pozicovaných bloků – jednoduše řečeno říká, který prvek bude umístěn nejvýše, přičemž 0 je hodnotou výchozí, 1 znamená, že element SPAN bude umístěn „nad“ element A). Poslední drobností je nastavení cursoru, protože kupříkladu JESPRP (tedy Internet Explorer) vám nikde jinde, než nad odkazem ručičku nevyrobí, kdybyste se rozkrájeli. Cursor:pointer je určen pro kvalitní prohlížeče, pro nezbedu JESPRPA je k dispozici jeho vlastní výmysl hand. Čímž pohřbíte validitu CSS, ale to není žádná katastrofa. Poslední definice – span.active je určena pro stav, kdy se nacházíte na stránce a obrázek tak není odkazem. Čili – nastavíte kurzoru výchozí hodnotu, šipku.
Nyní nastala fáze, která je nejdůležitější pro výsledný efekt. Jak jste si jistě povšimli v kódu stránky, jednotlivé elementy LI mají přiřazen jedinečný identifikátor ID. Ten je důležitý proto, že každá z položek bude mít na pozadí obrázek jiný. Všimněte si, že pro span.active jenom změníme pozici obrázku na pozadí – z center top na right top, tedy nezobrazíme obrázek umístěný na středu ale pravý krajní.
#home span {
background: url("home.gif") no-repeat center top;
}
#home span.active {
background-position: right top;
}
#about span {
background: url("about.gif") no-repeat center top;
}
#about span.active {
background-position: right top;
}
#links span {
background: url("links.gif") no-repeat center top;
}
#links span.active {
background-position: right top;
}
Zbývá už jenom zajistit požadovaný hover efekt, čili opět změníme pozici obrázku na pozadí, tentokrát při najetí myši zobrazíme levý krajní.
#home a:hover span {
background-position: left top;
}
#about a:hover span {
background-position: left top;
}
#links a:hover span {
background-position: left top;
}
Poslední úprava, kterou uděláme, poslouží dvěma užitečným věcem: za prvé – nastavením různé barvy pozadí a textu dosáhneme hover efektu i při vypnutých obrázcích, ale především zajistíme bezproblémové překlápění obrázků i v JESPRPU, který si jinak s uvedenou konstrukcí neví příliš rady. Takže na tuto definici nikdy nezapomeňte, nebo se budou dít zajímavé věci.
#menu a:link, #menu a:visited {
color: #000;
text-decoration: underline;
background: #ececec;
}
#menu a:hover {
color: #ff0000;
background: #cecece;
}
A to je všechno. Snad jsem celý příklad podal dost srozumitelně a věřím, že prezentovaný postup vám občas bude k užitku. Nezapomeňte ale na varování z úvodu mého spotu – méně je někdy více a bombastické menu o velikosti stovek kilobajtíků žádného modemáře nenadchne. Spíše naopak.
Testováno pod IE 5, IE 5.5, IE 6, Opera 7.23, Opera 7.53, Netscape 6.2, Mozilla 1.6, Mozilla 1.8, K-meleon (bez obrázků).
Aktualizace
Problikávání pozadí v IE odstraníte bezva fintou. Jako pozadí elementů LI nenastavíte pouze barvu, ale stejný obrázek, jako pro prvek SPAN. Takže upravený kód by vypadal asi takto:
#menu {
height: 100px;
}
#menu li {
width: 100px;
height: 100px;
float: left;
position: relative;
list-style: none;
}
#home li {
background: #ececec url("home.gif") no-repeat center top;
}
#about li {
background: #ececec url("about.gif") no-repeat center top;
}
#links li {
background: #ececec url("links.gif") no-repeat center top;
}
Pro jaké rozlišení stavět web?
Otázka položená v titulku spotu se opakuje dnes a denně na různých fórech zabývajících se tak či onak tvorbou webu a mě občas přistane v emailové schránce dotaz obdobného znění. Usoudil jsem, že bude lepší celou problematiku shrnout jednou provždy na svém blogu a učinit nějaký rozumný závěr, který poslouží všem začínajícím webdesignerům ujasnit si základní pravidla tvorby layoutu.
Při volbě typu layoutu (pružný anebo s pevnou šířkou) je nutné přihlížet k několika základním aspektům. Těmi hlavními jsou:
- ergonomie
- typografická pravidla
- technická omezení zobrazovacího média (obrazovek)
- technická omezení uživatelských agentů (prohlížečů)
- statistika
Je známo, že text na onscreen mediu (na obrazovce) se čte hůře než text vytištěný na papíře. Dále – podle základních typografických pravidel ověřených historií by jeden řádek neměl obsahovat více než osmdesát znaků, protože delší řádky výrazně zhoršují schopnost koncentrace při čtení.
Dále je smutným faktem, že v pružném (plovoucím) layoutu nelze technicky spolehlivě řídit délku řádku. Ve specifikaci kaskádových stylových šablon sice existuje vlastnost max-width, tu ale pohříchu podporují pouze minoritní prohlížeče (Safari, Gecko, Opera apod.). Majoritní Internet Explorer (alias JESPRP – jediný správný prohlížeč) zmíněnou vlastnost vesele ignoruje, což lze sice obejít pomocí javascriptu (nebo expressions), jenže tento způsob může mít negativní vliv na výpočetní výkon zařízení (obecně vzato můžete zastaralé Pentium II v kombinaci s plovoucími prvky snadno poslat do kytek). Navíc javascriptové řešení (jako ostatně vše, co je postaveno na klientském skriptování) není právě nejspolehlivější (zvláště při četnějším použití v kódu stránky nebo v případě, že uživatel nemá k dispozici podporu javascriptu).
Není-li pak délka řádku řízena vůbec, hrozí nepříjemný výskyt extrémně dlouhých odstavců o jednom-dvou řádcích, přičemž takový text je obtížně čitelný a ani z vizuálního hlediska taková textová anakonda není právě nejideálnější.
Kromě toho je nutné (především u layoutu s náročnějším designem) uvnitř datových kontejnerů používat obtékání (tedy float prvky). Protože si však blokový obtékaný prvek vyhradí maximální dostupnou šířku, je třeba ji nějak omezit. V případě pružného (plovoucího layoutu) se obvykle definuje percentuální šířka, která, jak víme, se počítá ze šířky nadřazeného bloku. A tady máte další úskalí, jenž bez horolezeckých obezliček nezdoláte, především díky JESPRPu, který má leckdy podivuhodné problémy s počítáním šířky (občas se člověk setká s různými výsledky výpočtu u IE 5, IE 5.5 a IE 6 – a to se jedná pouze o jeden prohlížeč pro Windows).
Proto považuji za vhodnější – jak z hlediska ergonomického, tak z hlediska technického, realizaci layoutu s pevnou šířkou. Aby se zabránilo nevhodnému vizuálnímu efektu, kdy je obsah takzvaně nalepen k levému okraji a vpravo se rozkládá pustina, je vhodné a užitečné takto postavený layout vycentrovat. Výsledek je pak daleko příjemnější i pro uživatele větších zobrazovacích zařízení. Kromě toho je nutné počítat i s faktem (dle statistik), že majitelé velkých displejů obvykle nemají okno uživatelského agenta (prohlížeče) maximalizované na celou dostupnou plochu.
Rozhodneme-li se tedy pro fixní šířku layoutu, zbývá už jediné – definice této šířky. Záleží jen na nás, jaké rozlišení budeme považovat za minimální spodní hranici, ale je nutné poznamenat, že v současnosti je to stále 800x600 (je ověřeno statistikami, že toto rozlišení používá stále velké procento uživatelů). Rozumná minimální šířka by tedy měla být někde kolem 780px, protože však kupříkladu Windows XP disponuje poněkud širšími posuvníky (scrollbary), redukujeme šířku na 770px, abychom pokud možno zabránili vzniku vodorovného posuvníku, který spousta brouzdalů z hloubi duše nenávidí. Naprosto bezpečná šířka je pak nějakých 760px, bohužel však u třísloupcových layoutů vám těch titěrných 10px může chybět.
Zkrátka volba typu a případné šířky layoutu je (stejně, jako celý webdesign) kompromisem, a řešení vychází z know-how autora i jeho subjektivních pocitů a názorů. A samozřejmě i ze znalosti cílového uživatele a účelu projektu, v čemž musí autorovi pomoci především zadavatel.
Shrnuto a podtrženo – toužíte-li po klidném spánku, tvořte weby s pevnou šířkou 770px a nic nezkazíte a pokud budete hledět, aby se celý design drasticky nerozpadl při zvětšení velikosti písma, pak se neprohřešíte ani proti zásadám přístupnosti. Pevná šířka 1024x768 stále ještě není dostatečným standardem (i když si pánové z iDnes myslí své). Pustíte-li se pak do layoutu plovoucího (a leckdy není vyhnutí), snažte se zabezpečit, aby souvislý text nepřesáhl oněch výše zmíněných 80 znaků na řádek. Běžní návštěvníci, kteří navzdory předpokladům některých „webdesignerů“ na webu také čtou, jistě vaši snahu ocení.
Vše výše řečené platí pro drtivou většinu zobrazovacích zařízení, kterou tvoří počítačové monitory. Poněkud odlišná situace je u obrazovek – prcků (třeba PDA), kde vládne chaos a anarchie, protože část těchto mobilních zařízení kaskádové styly vypíná, část se je naopak snaží zpracovat (většinou neúspěšně) a převážná většina z nich naprosto ignoruje styl pro ně určený a nazvaný media:handheld a s optimismem sobě vlastním se snaží zpracovat stylový předpis určený pro jiný typ zobrazovacího zařízení.
Ale to už je kapitola sama pro sebe a pokud se týká mé osoby, vůbec se s tím netrápím. Jediné, co zajistím je, aby takovéto zařízení obdrželo logicky členěný a správně strukturovaný text fungující i bez jakéhokoliv formátování. Což jde se správným využitím CSS a (X)HTML překvapivě snadno.
Sepsali Pavel Kout a Plaváček v. k.