Web, zisk a Internet Explorer
Webdesignerskými kruhy se dnes a denně nesou nářky nad prapodivným a nevyzpytatelným chováním prohlížeče z dílny Microsoftu, neboli JESPRPu (JEdiného SPRávného Prohlížeče). Já s nimi souhlasím, neboť slavný Internet Explorer se mnohdy skutečně tváří jako rozmazlená pubertální panna a nikdy si dopředu nemůžete být jisti, čím vás zase překvapí. Nadávat na nespočet chyb, jež tento nenáviděný (či obdivovaný) prohlížeč sebou vláčí se stalo jakousi módou a neexistuje snad webdesigner, který by si občas nepřihřál svou polívčičku.
V řadách mých přátel se vyskytuje nejmenovaná mladá kamarádka, jejíž jedinou chybou je, že dosud neochutnala slasti dovolené na mořském pobřeží. I rozhodla se tento prohřešek napravit, nechala si od přátel doporučit velkou a významnou cestovní kancelář a za necelý měsíc poprvé v životě uvidí oceán, z něhož její předkové kdysi s velkou námahou vylezli. Cena se zdála přiměřená, papírový katalog vypadal velmi profesionálně a přinesl dostatek užitečných informací. Až do této chvíle šlo vše tak, jak má ve vyspělém tržním hospodářství fungovat.
Zádrhel nastal v okamžiku, kdy se mi s velkou slávou a radostným očekáváním chtěla pochlubit, neb sdílená radost je dvojnásobná radost, a v mé emailové schránce přistál odkaz na internetové stránky zmíněné cestovní kanceláře s připomínkou, že bude léčit svou unavenou duši i tělo v hotelu s honosným jménem Faraon.
Tak jsem neprodleně vyrazil na prohlídku webových stránek oné významné cestovky. Pánové a dámy, já se nestačil divit! Nejsem žádné ořezávátko, aby mě jeden nekvalitně zpracovaný web rozhodil, protože už jsem jich viděl stovky, ba tisíce, ale čeho je moc, toho je příliš. Nakoukl jsem zběžně také do kódu stránky a nezbylo mi nic jiného, než omluvit se v duchu JESPRPu a složit poklonu jeho programátorům. Čest a sláva jejich práci a to bez ironie.
Co všechno si totiž Internet Explorer musí nechat líbit, aby se tvůrci stránek vše zobrazilo, jak on si představuje, je nejen neuvěřitelné, ale nebál bych se říci až scifoidní. Skutečná špičková technologie nového tisíciletí. Prohřešky proti přístupnosti, grafický vzhled či zmatenou navigaci ponechávám bez komentáře. Zdrojový kód si prohlédněte sami a pak možná stejně jako já učiníte závěr, že nebýt Microsoftu, svět internetu by byl chudší minimálně o dvě třetiny webových stránek (a to je můj střízlivý odhad).
Berte, prosím, tento příspěvek jako perličku, ale také jako téma k malému zamyšlení. Všeobecně se totiž uznává názor, že cílem internetových stránek je generovat zisk, s čímž se dá naprosto souhlasit. Otázkou zůstává, kolik takto zpracovaných webů by ale zisk skutečně přineslo, nebýt zatracovaného, ale legendárního JESPRPu. Vcelku by mě i zajímalo, kolik zisku přinesla cestovní kanceláři FIRO TOUR šíleně zpracovaná internetová prezentace, která relativně dobře funguje právě jenom v Internet Exploreru.
P.S. Kdo najde hotel Faraon jako první, toho osobně pochválím před nastoupeným webdesignerským davem a jmenuji ho doživotně Jediným a Opravdovým Vládcem Chaosu.
Souvislosti:
Atraktivní rámečky obrázků trochu jinak. Díl druhý. Aktualizováno!
V minulém díle jsme si ukázali, jak vyrobit zajímavé rámečky uvnitř obrázků, dnes se naučíme, jak z rámečků udělat aktivní prvek, který bude zároveň sloužit jako odkaz.
Princip tvorby je stejný, jediná změna je v tom, že si připravíme rámeček, který v jednom obrázku bude obsahovat i vzhled, který chceme, aby se objevil při aktivaci prvku (jinak řečeno – přejetí myškou nad obrázkem dosáhneme změny rámečku). Vyjdeme při tom ze známého Pixyho řešení, kdy při události hover nebudeme měnit obrázek za jiný, ale zajistíme pouze změnu pozice obrázku na pozadí. Jak bude výsledek vypadat si můžete ověřit zde.
V první fázi si tedy připravíme rámeček, který bude vypadat nějak takto:
CSS předpis vlastní galerie máme připraven z minula, tudíž ho můžeme použít s jednou malou změnou:
#galerie .ilustration {
width: 120px;
min-height: 250px;
_height: 250px;
float: left;
margin: 0 25px 0 0;
}
#galerie .ilustration p {
position: relative;
width: 100%;
left: 0;
top:0;
}
#galerie .ilustration h4 {
text-align: center;
margin: 180px 0 3px 0;
padding: 0;
font-size: 94%;
width: 100%;
overflow: hidden;
}
#galerie .ilustration img {
display: block;
position: absolute;
left: 0;
z-index: 0;
}
Tou změnou je, že se obejdeme bez elementu SPAN. Z elementu A si vyrobíme blokový prvek a nastavíme mu nejvyšší z-index. Rámeček na pozadí pro událost hover jenom jednoduše přemístíme. A to je vlastně vše, nic složitého.
#galerie .ilustration p a {
display: block;
width: 120px;
height: 180px;
position: absolute;
left: 0;
z-index: 1;
background: url(hoveril.gif) no-repeat;
}
#galerie .ilustration p a:hover {
background: url(hoveril.gif) no-repeat right top;
}
#galerie h4 a:link, #galerie h4 a:visited {
color: #71403c;
font-weight: bold;
}
#galerie h4 a:hover {
color: #ff0000;
}
Vlastní kód pro jeden obrázek pak vyhlíží následovně:
<div class="ilustration">
<p>
<img src="img4.jpg“ width="120“ height="180“ alt="popis“ />
<a href="detail.html“ title="popis"></a>
</p>
<h4> <a href="detail.html">popis</a></h4>
</div>
Počítám, že spoustu dalších zajímavých možností, jak tento nápad využít, objevíte vlastními silami.
Aktualizováno
Testováno pod těmito prohlížeči:
- Netscape Navigator 6.2
- Mozilla 1.6
- Opera 7.23
- Internet Explorer 5.5 a 6 (v IE 5 toto řešení nefunguje)
Souvislosti:
Nepovedené weby v portfoliu webdesignera
Jistě to znáte sami z vlastní praxe. Předložíte klientovi návrh grafické podoby jeho webu a zákazník mívá připomínky. Leckdy připomínky tak zásadní, že z rozumného konceptu nezbude kámen na kameni ani tlačítko na tlačítku. Z původně elegantní a propracované podoby návrhu zbývá okleštěný a nepoužitelný paskvil. Jindy má zase klient svůj grafický návrh zpracován (a dost často i profesionálním grafickým studiem) a na jeho přesném dodržení trvá. Především proto, že je součástí jeho firemní kultury nebo se mu prostě lidsky líbí.
V jednom z komentářů na mém blogu se k tomuto tématu objevil zajímavý názor. Budu citovat:
Pokud se stane, že je požadavek udělat web podle špatného vzoru, existuje jediná možnost, jak s tím bojovat. Totiž zakázku zpracovat, ale neuvádět ji v referencích. Tam by se dle mého skromného názoru měly objevit především věci, za kterými si webdesigner stojí. Pokud se chce člověk prezentovat jako profesionál, měl by si rozmyslet, co uvede v referencích a ne se schovávat za to, že zákazník to tak chtěl.
Je to celkem zajímavá otázka – má se webdesigner stydět za dílko, které díky klientovi není tak úplně jeho krevní skupina? Nebo se má poctivě přiznat i k tomu a kontroverzní grafický vzhled zachránit alespoň bezchybným technickým zpracováním?
Filmový průmysl má něco podobného už dávno vyřešeno. I tam se stává často, že záměr režiséra a producenta se rozejde do té míry, až je chudák rejža nucen zapřít svou účast na následujícím propadáku. V Hollywoodu pak režisér (scénarista atd.) použije pro takové průšvihy pseudonym Alan Smithee. Vězte, že shlédnete-li film podepsaný tímto velikánem, máte absolutní jistotu, že se režisér za svou práci styděl, protože byl okolnostmi přinucen vyrobit něco, za čím si stát nemůže.
Zajímal by mě názor ostatních kolegů webdesignerů. Mám taková díla zazdít a nehlásit se k nim? Nebo zvolit nic neříkající přezdívku? Nebo být tvrďák a hrdě a sebevědomě přiznat, že jsem to spáchal já, i když si myslím své? Co vy na to, páni kolegové?
Webdesigner versus klient, díl první
Procházením různých diskusních fór zabývajících se tak či onak tvorbou webu jsem objevil zajímavou skutečnost. Převážná většina začínajících webdesignerů má, řečeno slovy prezidenta, falešnou představu o jeho skutečné práci. Představují si, že se na ně obrátí zákazník s prosbou o vytvoření webu. Webdesigner zasedne ke svému nádobíčku a vymyslí překrásný, umělecky úchvatný a graficky našlapaný návrh. Geniální dílko hodné Salvatora Dalí. Leonardo by puknul závistí a kreativci z dílny Walta Disneye hromadně dávají výpověď. Klient zachrochtá blahem, padne webdesignerovi k nohám a zvýší cílovou prémii o sto procent. Kde se tyto zcestné představy berou mi tak docela jasné není, ale faktem zůstává, že realita je na hony vzdálená prozaické skutečnosti.
Protože se pár kritických příspěvků (týkající se grafického vzhledu) dotklo i webů, na kterých jsem se tak či onak podílel, budu konkrétní a holou pravdu vám ukáži na existujících webech. Především si klienty webdesignerských firem rozdělíme do čtyř kategorií (zapamatujte si je, ve druhém dílu se k nim vrátíme a ukážeme si, jaká úskalí musí webdesigner zdolávat):
- objevitelé, skupina zákazníků, která objevila kouzlo internetu teprve nedávno a prozatím žádnou webovou prezentaci nevlastní. Pocházejí z řad malých firmiček či živnostníků, kteří neoplývají financemi, ale rozhodli se zkusit posbírat zákazníky i prostřednictvím moderního komunikačního média. Vesměs nechávají webdesignerovi volnou ruku, ale také ho nepřeplatí, takže si nemohou dovolit objednat si výrobu u kvalitní a ověřené firmy. Bohužel právě jejich weby doplatí na to, že je páchají začínající tvůrci nebo zapálení amatéři na koleně za směšný obolus (samozřejmě, najdou se i čestné výjimky). Jejich internetová prezentace pak připomíná spíše reklamní letáček a také podobný užitek přinese. Přečtu a zahodím. Pro jejich účely ale i taková prezentace postačuje, protože ctí přísloví – kdo není na internetu, neexistuje. Uznávám, že tyto malé firmy mají svých starostí dost, přesto trochu zamrzí, že se leckdy prezentují na světové síti nešťastným způsobem. Pro ilustraci přináším pár ukázek: Truhlářství Doležal, Sklenářství Žalud a syn.
- dobyvatelé – absolutně největší skupina klientů, která se stává kořistí malých či středních webdesignerských firem (ke kterým se řadí i můj skromný tým). Představují firmu středního rozsahu s již zaběhnutou firemní kulturou a oplývající kupou tištěných prospektů a letáků zpracovaných povětšinou menšími grafickými studii. Většinou vlastní i web vytvořený v objevitelských začátcích nějakým amatérem. Ti mají vyhraněnou představu o vzhledu celé webové prezentace a většinou trvají na tom, aby se na stránkách něco pěkného pohybovalo, točilo, utíkalo, skákalo, mlžilo či poletovalo, příkladmo (vybral jsem záměrně firmy se zajímavou doménou): A&A čalounictví. Občas ale natrefí na kvalitního webdesignera a pak už může výsledek vyhlížet jako moderní beztabulkový web, který neurazí, ale také neoslní. (kupříkladu Čalounictví T+B).
- vládci – velké české či mezinárodní firmy, které rozdělují práci převážně dinosaurům českého internetu a občas si svůj skromný díl koláče ukousne i menší webdesignerská firmička. Základním kamenem stavby takového webu bývá corporate identity dané společnosti, což je podrobný manuál říkající, jak se daná firma má na trhu prezentovat (obsahuje mimo jiného i podrobnou příručku pro vzhled a funkci webové prezentace). Umělecká duše kreativního webdesignera spláče nad výdělkem, protože se musí pedanticky držet podkladů, které jsou mu k práci předány. A to bez výjimky. Příklady vládců snad udávat nemusím, známe je všichni. Pro příklad nemusíme chodit daleko: Škoda Auto, z mých webů pak třeba Hauser
- císařové – to je skupina zákazníků, která ční jako Mount Everest nad námi všemi, protože se jedná o náš vlastní milovaný stát a jeho instituce. Zde se zdržím komentáře, protože jistě všichni víte, jak weby naší státní správy vypadají a fungují. Obyčejný smrtelník, a může být i uznávaným odborníkem, má pramalou naději, že si uhryzne svůj díl zákusku. Vše je předem rozděleno, předem naplánováno a také předem a dobře zaplaceno.
S císaři bohužel nemám vlastní zkušenosti, takže v příštím díle se omezím na popis toho, co práce webdesignera obnáší s ohledem na předchozí tři zmíněné kategorie a co vše musí poctivý webdesigner překousnout.
Jak také může vypadat pěkný web
Nešťastnou shodou okolností jsem byl nucen vyrazit na krátkou služební cestu do druhdy hornického města a protože se v autě cítím pokaždé osaměle, zapnul jsem si autorádio. Nedělám to příliš často, neboť nejsem typ kaskadéra. Z výtvorů některých reklamních agentur mi vstávají hrůzou vlasy na hlavě a poslední reklamní počin nábytkové firmy Europa Möbel mě nedávno tak vyděsil, že jsem málem vypadl ze slipů.
Ale proč o tom mluvím. V rámci jakéhosi výslechu kladl moderátor rádia Frekvence 1 zvídavé dotazy jednomu z našich nejlepších jazzmanů Jiřímu Stivínovi.
Poslouchám, poslouchám a vtom se dozvídám, že pan Stivín má skutečně pěkné webové stránky. Bohužel právě v okamžiku, kdy padla otázka, kdo je za výrobu zodpovědný, jsem byl z pracovních důvodů přinucen opustit příjemně vychlazený automobil, takže konečná odpověď mi zůstala utajena. Prosím všechny mé čtenáře, pokud náhodou tento rozhovor zaznamenali, aby mi v komentáři sdělili, kdo vlastně tak překrásný web vytvořil, protože na stránkách samotných o autorovi není ani zmínka.
Zajímalo by mě, zda jde o pokus zapáleného amatéra nebo fanouška, či zda je za tento pokus o web zodpovědný placený webdesigner. Chtěl bych to vědět z jednoho prostého důvodu. Muzikant formátu Jiřího Stivína by si zcela jednoznačně zasloužil elegantnější prezentaci, než má teď.
Pokud se týká moderátora rádia, pak buď ještě neviděl opravdu pěkný web nebo chtěl Jirkovi udělat radost. Těžko říct, co je lepší.
Záhada zpětných odkazů
Ve statistice návštěvnosti svého blogu jsem objevil, že na blábolník odkazuje tato stránka (v sekci zpětné odkazy). Kde a jak je odkaz umístěn netuším, ale je milé vědět, že mé bláboly čtou i v Japonsku 
I klienti jsou uživatelé
Následující veselou historku podávám, jak jsem koupil a slibuji vám i Yuhůovi, že protentokrát budu stručný. Stala se mému kolegovi, který v rámci výroby webové prezentace vyrazil ke klientovi doladit drobnosti a detaily, neboť není nad osobní setkání. První a vlastně jedinou vážnou výhradou zákazníka bylo postesknutí, že by si představovali raději nějaké jiné písmo. Kolega zírá a tiše žasne, protože celá stránka vypadá naprosto jinak než na počítači v jeho pracovně. Velikost písma i font se tváří nějak podezřele, ale především se ani vzdáleně nepodobá tomu, co původně ve stylech (a se znalostí věci, podotýkám) nadefinoval.
První tichý nával vzteku patřil obdivovanému i proklínanému prohlížeči z manufaktury Microsoftu, neboť při rozlišení 1024x768 na sedmnáctipalcovém monitoru písmenka vyhlížela trochu futuristicky a především se nedalo absolutně nic přečíst. A tak nastala fáze hledání a hrabání se v předimenzované rozbalovací nabídce inkriminovaného prohlížeče. První krok byl jasný a pochopitelný, ověřit si, zda nějakým nedopatřením nemá klient zvolené jako výchozí písmo to nejmenší, titěrné. Bingo! Rázem se dokument stal čitelným a pochopitelným. Přítomné ženy mimoděk vzdychly úžasem nad jeho zručností a umem.
Stále ale zůstával jiný problém – zvolený font vypadal tak trochu jako Arial, tak trochu jako Ariel ale ani vzdáleně se nepodobal nastylovanému fontu Verdana. Ten přece ve woknech být musí! A navíc – odkdy je Arial natolik velikostně odlišný než oblíbená Verdana?
Pátrání a bloudění v džungli nastavení prohlížeče pokračovalo a záhy přineslo své, poněkud nahnilé, ovoce. Jistě, vy už to tušíte. Nějaký dobrodruh v zákazníkově kanceláři nejspíš v záchvatu nudy laboroval a zkúšal, až se mu to podařilo zaškrtnout umně ukrytá nastavení: ignorovat nastavení fontu stránek a ignorovat nastavenou velikost písma.
Dva kouzelné kliky myškou a ejhle, web vypadal jak vypadat má. Opouštěje kancelář movitého klienta cítil můj kolega obdivné a tak trochu závistivé pohledy všech přítomných slečen a paní. Vida, jaký je to echt internetový odborník!
Ramena se pyšně narovnala, v duši kolegy se rozhostila úleva a uspokojení nad tím, že ve svých letech už přece jenom mezi počítačovými odborníky něco znamená.
Závěr žádný neučiním, ale v každém případě je z tohoto prožitku jasně patrné, jakým úskalím a nástrahám musí webdesigner čelit. A jak je vidět, podceňovat OUI (Obyčejné Uživatele Internetu) není radno.
Top ten pro tvorbu stránek
Když už nás Yuhů ve svém spotu vyzval, abychom se vzájemně pochlubili v čem pácháme naše leckdy výjimečná a výjimečně nepovedená dílka, rád se svěřím. Top ten asi nenaplním, protože jsem tvor skromný a vystačím s málem. Co mi stačí k tvorbě uvedu velmi stručně:
- Macromedia Dreamweaver MX , ovšem ne jeho Covidímtodostanu vymyšlenost, alébrž část nazvanou případně Code view. V tom tvořím i stylový předpis a víc vlastně nepotřebuji, neb všechno píšu ručně pro lepší kontrolu a pocit z dobře vykonané práce
- Jasc Paint Shop Pro, zatím ve verzi 7, ale plánuji nákup upgrade na verzi 9 až se objeví na trhu. Pro jednoduchou grafiku bohatě postačuje, Adobe Photoshop je pro mé potřeby předimenzován jak svou složitostí na pochopení, tak cenovou náročností
- Corel Draw 11, v české lokalizaci zakoupený v rámci jakési propagační akce za hubičku. Občas se bez něj nehnu a pro návrhy kupříkladu log je myslím bez konkurence
- LeechFTP, mírně zastaralý, leč dodnes vyhovující prográmek na přenos souborů na server
- Prot testování stránek vlastním IE 5, IE 5.5, IE 6, Mozillu 1.6, Operu 7.23, K-meleon 0.8.2 (ten se mi osvědčil pro testování mých výtvorů s vypnutými obrázky), Netscape 6.2. Nádavkem, protože nemám po ruce Maca používám webovou aplikaci pro prohlížeč Safafi (rulez, jak říká Pixy). A občasmo používám rozvětvenou rodinu svých přátel, kolegů a kamarádů, kteří mi má dílka provětrají na všech možných i nemožných prohlížečích. Nejsem si ale jist, jestli tito lidé patří do sekce software nebo hardware. Uvážím to snad někdy příště
A to je vlastně vše, víc snad aní není potřeba.
Atraktivní rámečky obrázků. Díl první.
Jak dodat fotogalerii punc výjimečnosti bez zbytečné námahy a patlání se v grafickém editoru to byl můj cíl při výstavbě nového webu. Jistě to znáte – desítky či stovky obrázků a klient si vymíní, že všechna ta umělecká dílka budou mít netradiční rokokový rámeček nebo podobnou zhůvěřilost. Ale ne jen tak ledajaké. Nevystačíte s tím, co nabízí většina návodů na internetu – totiž vyrobením zaobleného rámečku OKOLO obrázku. Protože vlastní obrázek zůstává nechutně hranatý a orámování kolem výsledný nudně geometrický dojem nezachrání.
Pokud ale chcete oblé rohy všech obrázků v celé fotogalerii, čeká vás únavná práce v oblíbeném grafickém editoru, kde jednomu obrázku po druhém vyvrbíte překrásně žensky tvarované obliny. Pokud jste to až do této chvíle činili, už nemusíte. Vymyslel jsem zajímavé řešení. Jistě to má, jako všechno co souvisí s tvorbou webu, svá jistá omezení, ale vše se dá nějak obejít. Abych přestal plácat prázdnou slámu, skoukněte ukázku oblých rámečků nebo jiných elegantnějších. Obrázky zůstávají původní, rámečky, které vidíte, na ně prostě jednoduše navléknete. Řešení je prosté a dost dlouho už známé, takže jsem neobjevil Ameriku. Jenom jsem tradiční řešení zkusil využít netradičním způsobem.
Pro každou CSS fotogalerii platí, že velikost náhledového obrázku, pokud si nechci naběhnout do neřešitelných problémů, je předem daná. Řekněme pro tuto chvíli, že víte, že náhledové obrázky budou o velikosti 120x180 českých pixelů. Tím si zjednodušíte život a z tohoto faktu budete nadále vycházet. Další, co musíte udělat, je připravit si rámeček obrázku o stejné velikosti. Je dobré si přitom uvědomit, že musíte splnit tři podmínky.
- pozadí rámečku musí být stejné jako barevné pozadí stránky (to abyste skryli hranaté rohy obrázku)
- kontrast mezi barvou rámečku a barvou, která bude průhledná (to aby byl obrázek viditelný), musí být co nejmenší, čímž zamezíte vzniku nepěkných zubatých okrajů
- pokud plánujete u obrázků popisky, musíte si zabezpečit rozumně velikou výšku omezujících bloků, ale to je vlastně základ každé beztabulkové galerie. S vědomím těchto tří zásad se můžeme pustit do práce
Čili – nakreslíte si požadovaný rámeček, stejně jako já tento:
Barva střední části rámečků je nastavena jako průhledná. A pak se rovnýma nohama vrhnete do tvorby kódu stránky a stylového předpisu.
Stejně jako u každé CSS galerie si vytvoříte blok pro jeden náhledový obrázek, do kterého vložíte obrázek v elementu P (odstavec) a element span. Ten je v celém kódu jaksi navíc, ale zajistí vám kýžený efekt pěkného a netradičního rámečku:
<div class="ilustration"> <p> <img src="img1.jpg“ width="120“ height="180“ alt="popis“ /> <span title="popis"></span> </p> <h4>Popisek obrázku</h4> </div>
Z hlediska sémantiky se nejedná o velký prohřešek a to hned ze dvou důvodů. Vkládáte totiž element, který je takzvaně neutrální. A také používáte element, který je předurčen pro definování vizuální informace a obsah vlastního textu nijak nenaruší. A o to jde především, že.
Teď přijde na řadu stylový předpis. Jednotlivé náhledy, kterých jistě bude povícero, by se měly na stránce pěkně rozprostřít, takže zvolíme systém zvaný plovoucí (ale není to dogma, záleží na tom, co si zvolíte). Tudíž pro blok s názvem ilustration nastavíme:
.ilustration {
width: 120px;
min-height: 250px;
_height: 250px; /* for IE */
float: left;
margin: 0 25px 0 0;
}
Min-height je určeno pro inteligentní prohlížeče (Mozilla, Opera, Safari), hack height je určen pro Internet Explorer. Záměrně zde neřeším chybný box model Internet Exploreru, to už jistě zvládne každý z vás sám. I když v případě fotogalerie to není nutné a nezbytné. Sem tam nějaký pixel prostě lze odpustit a kvůli tomu se vám layout nezboří.
Pro odstavec nastavíme:
.ilustration p {
position: relative;
width: 100%;
left: 0;
top:0;
}
Relativní pozice je důležitá pro to, abychom span definující rámeček obrázku mohli pomocí absolutního pozicování umístit takzvaně nad odstavec.
Obrázek umistíme absolutně do odstavce a nastavíme mu nejnižší z-index takto:
.ilustration img {
display: block;
position: absolute;
left: 0;
z-index: 0;
}
A konečně přijde na řadu vlastní rámeček s absolutní pozici a vyšším z-indexem než má vlastní obrázek:
.ilustration span {
position: absolute;
left: 0;
width: 120px;
height: 180px;
z-index: 1;
display: block;
background: url(hover.gif) no-repeat;
}
Pokud jste správně postupovali, máte nyní nad obrázkem elegantní rámeček. Nyní je třeba dostat popisek obrázku dolů. K tomu vám dopomůže jednoduchý padding-top o něco menší než je výška vlastního obrázku.
.ilustration h4 {
text-align: center;
margin: 0 0 3px 0;
padding: 175px 0 0 0;
font-size: 94%;
width: 100%;
overflow: hidden;
color: #fff;
}
Overflow a width u nadpisu H4 je definován proto, aby při vám při nadměrném zvětšení písma popisek nevylezl mimo omezující blok. Můžete si to vyzkoušet třeba v Mozille se zvětšením písma na 300%.
Následovně pak vyhlíží zdrojový kód pro jeden obrázek:
<div class="ilustration"> <p> <img src="img1.jpg“ width="120“ height="180“ alt="popis“ /> <span title="popis"></span> </p> <h4>Popisek obrázku</h4> </div>
U elementu span musíte použít TITLE nejlépe stejný jako ALT u obrázku. Příčina je jasná, vrstvou s rámečkem jste překryli níže položenou vrstvu s obrázkem.
Všechno funguje uspokojivě na všech nejpoužívanějších prohlížečích. Jistě vás teď napadlo, že by bylo dobré, aby náhled obrázku byl takzvaně klikací a nádavkem by se mohl rámeček při přejetí myší vhodně přebarvit. Samozřejmě to lze udělat, ale to bude námětem mého dalšího příspěvku.
Podnětné odkazy
Vždyť tisknout je tak snadné! Podruhé.
Jak jsem zmínil ve svém minulém příspěvku věnovanému problematice tiskových verzí, odhodlal jsem se přejít od teorie k praxi a zjistit, jak si se záludnostmi tisku webových stránek poradí Obyčejný Uživatel Internetu (zkráceně OUI). K dispozici jsem měl vzorek pěti různě internetem poznamenaných jedinců. Od naprostých laiků (je ženský rod laička?), zabývající se v rámci svého povolání evidencí ojetých pneumatik v přilehlém skladu, až po surfováním protřelé harcovníky, pro které google neznamená latinský název šestinohého pišišvora z tajuplných galapážských ostrovů.
Moje žádost byla jednoduchá – z již zmíněného téměř-ale-ne-úplně-webu www.central-group.cz vytisknout přehled dostupných rodinných domků v Praze pro opodál netrpělivě přešlapujícího a cholerického šéfa. Cholerického zaměstnavatele uvádím záměrně, protože nic tak neznejistí řadového pracovníka než nervozitou sršící dvoumetrový inženýr, který za pět minut musí být někde úplně jinde s úhledně vytisknutou nabídkou.
Nalezení správného odkazu netrvalo až tak dlouho, což mě samotného docela překvapilo. A pak to přišlo. Po zobrazení stránky čtyři z pěti pokusných osob naprosto automaticky chňápli po ikonce tiskárny dostupné v liště prohlížeče. Jsou tak zvyklí i z jiných programů (kupříkladu word, excel a jiné aplikace, se kterými dnes a denně pracují) a vcelku oprávněně se domnívají, že by to ani zde nemělo být jinak. Jak se dalo očekávat, výsledkem několikaminutové odmlky tiskárny byl absolutně nepoužitelný vzorek původně elegantně bílého papíru (to je ovšem ten lepší případ. Někteří webdesigneři jsou natolik záludní, že pokus o tisk stránky tímto způsobem leckdy skončí totálním zablokováním síťové tiskárny, což už zavání cílenou sabotáží).
Pátý testující (není to asi důležité, ale byl to muž) přistoupil k celému úkolu logicky a se znalostí věci. Bylo patrné, že s tiskem internetových stránek již má své zkušenosti. Spustil si Microsoft Word, myškou si ladným vertikálním pohybem omodřil text na stránce a pomocí kouzelné wokenní klávesové zkratky všechno pěkně přes schránku vložil do připraveného nového dokumentu. Celá akce netrvala déle než minutu a to je slušný výsledek. Následoval stisk ikonky v liště programu a ejhle – poměrně úhledný text i s obrázky byl na světě.
Uznávám sebekriticky, že se nejednalo o reprezentativní vzorek testerů, ale tak tristní výsledek jsem věru neočekával. Ani jednoho z nich nenapadlo rejdit kdesi myší po stránce a hledat odkaz Tisková verze. To je pro skupinu číslo dvě (viz můj minulý spot) zvanou Vykukové dost špatné vysvědčení. Nehledě na to, že i já, internetem protřelý borec, nejprve vyzkouším Náhled před tiskem a pokud mě výsledek neoslní, vydám se hledat tu zatracenou mrňavou ikonku tiskárny. Čtyři z pěti mých kolegů by přišli o prémie, ne-li o zaměstnání a propříště si dobře rozmyslí, zda budou důvěřovat tvůrci webu. Pátý kolega by uspěl, ovšem jenom a pouze vlastním přičiněním bez jakékoliv zásluhy webdesignera.
Co říci závěrem? Dle mého soudu je výsledek tohoto malého testíku dalším z pádných argumentů, proč přejít na beztabulkový layout s odděleným stylem pro tisk. Jestliže totiž sto procent mnou vyzkoušených uživatelů o nějakou ikonku tiskárny na stránce ani nezakoplo, je prostě něco shnilého v hlubinách českého internetu. Myslím si, že od většiny webdesignerských firem je takovéto polovičaté řešení čirým alibismem. Aby mohli tvrdit – my tam přece tiskovou verzi máme. Otázka, na kterou jsem částečně odpověděl ale je, kolik skutečných OUI ji také využije. Zvláště vezmete-li v úvahu, že neexistuje ani náznak jakéhokoliv standardu (jako například logo coby odkaz na domovskou stránku). Ikonky tiskáren různě poházené v houštině textu a grafiky pokaždé na jiném místě bez ladu a skladu jsou prostě k ničemu.
Protože naděje na zlepšení se, jak se zdá, nerýsuje, nemohu Obyčejným Uživatelům Internetu doporučit nic jiného, než nechat se zaměstnat u trpělivého, chápavého, tolerantního a usměvavého šéfa. Ale jak to po sobě čtu, předchozí věta patří spíše do žánru science-fiction. Jediné co asi zbývá, je čekat na vyhynutí dinosaurů (viz překrásný seriál na Mimozemském blogu, který mnohé objasňuje) a doufat, že to bude co nejdříve.
Co dodat. Nic. Nechám se překvapit vašimi zkušenostmi s OUI, jsou-li jaké.
Zajímavé odkazy pro ty, kteří nevědí, jak správně postupovat při tvorbě tiskové verze:
Vždyť tisknout je tak snadné! Nebo ne?
Původně jsem pro následující příspěvek měl připraven jiný úvod. Ale díky tomu, že jsem prožil poměrně náročný víkend začínající bujarou oslavou třicátých narozenin mé kamarádky (je to zajímavé, ale opět se jedná o šikovnou černovlásku) a druhého dne zákonitě pokračující bolehlavem a slušnou kocovinou, zapomněl jsem se v obývacím pokoji u svého televizního přijímače.
V jednom okamžiku, kdy jsem dumal nad nespravedlností světa všeobecně na mě vyjukla bombasticky zpracovaná reklama nabízející největší nabídku domů a bytů. Poletující otakárek, nejspíš fenyklový, pohádkové městečko zpracované jako překrásná 3d scéna a obrovským písmem provedený odkaz na webové stránky www.central-group.cz mi utkvěl v paměti. Až potud se jedná o skvělý výsledek práce reklamních odborníků. U vědomí faktu, kolik přibližně obnáší minuta televizní reklamy na naší nejsledovanější stanici jsem usoudil, že zmíněný web bude kromě jiného vhodný i k demonstraci problému tiskových verzí. Podotýkám předem, že jsem očekával všechno možné jenom ne to, co jsem pak na vlastní oči spatřil. Profesionálně zpracovaná televizní reklama doslova a do písmene zabitá tak amatérsky zpracovaným webem, až se mi udělalo mdlo. Zdá se, že jako obvykle zadavatel šetřil na nesprávném místě. Ale abych se vrátil k tématu.
Podle přístupu k dostupnosti tiskové verze a pro účely dalšího bádání jsem si webdesignery zkusmo rozdělil do čtyř kategorii:
- Profíci. Ti se rekrutují z řad webdesignerů, kteří prošli bolestným přechodem od tabulkového k CSS layoutu. Je jich prozatím jako šafránu, ale oni mají problém vyřešen – příprava tiskové verze u dobře zpracovaného webu zabere zřídkakdy více než patnáct minut čistého času. Nadějná skupina živořící na okraji zájmu a prozatím v opozici
- Vykukové. Množstvím největší podmnožina webdesignerů, kteří nehodlají opustit zaběhané postupy a doposud produkují tuny tabulkového a framesoidního kódu občas proloženého flashovou animací či elegantními javascritptovými triky. Přesto matně tuší, že možnost vytisknout si stránku by měli svým čtenářům nabídnout. Proto na jimi vytvořených webech naleznete tu textový odkaz, tu ikonku s tiskárničkou a podobné vymyšlenosti. Jejich problémem je, že v přehršli informací a grafických extravagancí na stránce se odkaz nebo ikonka velmi snadno přehlédne. Nehledě na fakt, že extra tisková verze přináší programátorům spoustu zbytečné práce
- Ignoranti. Webdesigneři (zdráhám se je takto oslovovat), kteří absolutně ignorují zásadu přístupnosti a možnost tiskové verze nejen že nenabízejí, ale opravdu upřímně se domnívají, že uživatel nemá právo si cokoliv tisknout. Případně doufají, že Obyčejný Uživatel Internetu (dále zase jen OUI) si nějak poradí. Smutnou skutečností je, že i tito lidé nabízejí tvorbu webů za peníze
- Neználkové. Ti pocházejí především z řad zapálených amatérů, pro které je vrcholem programátorského umění práce v editorech typu Front Page a kteří pracují zadarmo a výhradně pro sebe či své kamarády. Neználkové absolutně netuší, že tisková verze stránek může vypadat jinak, než barvami a grafickými symboly hýřící výstup toho, co vidí na obrazovce. Vzhledem k tomu, že pracují zdarma a většinou pro svou radost nepředstavují prozatím žádné velké nebezpečí. Prozatím.
Webdesignerská skupina DTP CONTI, Praha (web) zodpovědná za výrobu výše jmenovaného paskvilu (ano, není to web, určitě se mnou budete souhlasit) se suverénně řadí do skupiny číslo dvě. Po delším hledání jsem na konci stránky objevil obligátní ikonku, způsobující otevření tiskové verze do nového okna. Co se stane po stisknutí odkazu na miniaturním obrázku tiskárničky si raději vyzkoušejte sami. Možná budete také příjemně překvapeni.
Proč o tom ale mluvím. Díky takto rozvětvené rodině webesignerů s různorodými přístupy k dostupnosti tiskové verze vládne mezi OUI naprostý zmatek a chaos. Už jenom samotný fakt, že díky přístupu Vykuků musí kromě informací ještě HLEDAT, jak si informace vytisknout (pro sebe, pro šéfa, manželku nebo tchyni), je častokráte znechutí a leckdy toho ani nejsou schopni. Přitom se skromně domnívám, a jistě mi dáte za pravdu, že tisková verze je NEDÍLNOU součástí každého webu stejně jako navigace a dostatek smysluplných informací.
Provedl jsem si mezi svými ovečkami, kterým se starám o hladký chod počítačů a které používám jako laboratorní myši, malý testík. Frflali sice, ale nakonec se nechali přesvědčit, že svými zkušenostmi přispějí ke zkvalitnění českého internetu. Stálo mě to pouhé čtyři turecké kávy a jedno presso se smetanou. Což můj rozpočet vážně nenabouralo. Zatím. Protože ale musím být stručný, přinesu výsledky svého soukromého pokusu a jejich zevšeobecnění až v dalším příspěvku.
Jsou webdesigneři odtrženi od reality?
Tento netypický příspěvek (pozor – všechny následující příspěvky budou stejné, za typickými příspěvky budete muset zabloudit na jiné blogy) začnu netypickým zážitkem s takzvaným OUI (dále jen Obyčejným Uživatelem Internetu). Celý zážitek byl na druhou umocněn tím, že původcem a inspirujícím prvkem statě, kterou právě čtete, je půvabná pracovnice jednoho z mých klientů. Budu konkrétní, jednalo se o web www.landkas.cz, který dle přání platícího zákazníka i přes mé výhrady je koncipován výhradně jako internetová obdoba papírového katalogu. Ale budiž, kdo platí mívá zhusta pravdu. Jděme k věci.
V rámci dokončovacích prací jsem osobně navštívil malou sklepní místnost jinak poměrně honosného rodinného domku, která fungovala jako sídlo šéfkyně firmy, kancelář pro hosty, účetní oddělení a nádavkem jako malá vzorková prodejna. To všechno dohromady. Což mě utvrdilo v názoru, že v Čechách je opravdu nutné šetřit na všem. Dlouhonohá a černovlasá krasavice se mi představila jako asistentka majitelky firmy (ale z tónu hlasu bylo patrné, že fakticky je spíše děvečkou pro všechno) a sdělila mi, že k mé práci na zmíněném webu má několik výhrad. Tím se dostávám k tématu.
S bezelstným výrazem ve tváři mi sdělila, že web je zpracován přesně tak, jak si majitelka představovala, ale má jeden závažný nedostatek. Nedá se totiž vrátit zpět na hlavní stránku! Ano, tušíte správně. Nedávno se na několika blozích rozhořela vášnivá diskuse, zda logo má být klikací i na hlavní stránce či nikoliv. Jak už to tak bývá, sešla se spousta různorodých názorů, každý si přihrál svou polívčičku a v podstatě všichni měli pravdu. Dosud nic neobvyklého. Problém ale je, že tento měsíc se mi něco podobného stalo už potřetí. Nechci dělat všeobecné závěry, ale zdá se mi, že převážná většina OUI vůbec netuší, že logo firmy vůbec může být odkazem na hlavní stránku. Dokonce to vypadá, že drtivě vysoké procento OUI pokládá logo za ilustrační obrázek v rohu stránky umístěný tak, aby tam něco bylo.
Spanilá slečna, která mě na tento závažný problém upozornila navíc až do mé návštěvy netušila absolutně nic o tlačítku ZPĚT v internetovém prohlížeči. Předvedl jsem jí funkci tlačítka osobně a překvapil jsem ji možná více, než kdyby mimotělně otěhotněla (v rámci zachování stability svého bankovního účtu jsem si vysvětlení tlačítka VPŘED nechal na jindy). Přehlédla i patičku webu, kde sice titěrným, ale přesto čitelným písmem byl uveden terminus technicus Home i s patřičným odkazem. To mě zarmoutilo a donutilo překoncipovat hlavní navigaci a obligátní tlačítko HOME umístit tam, kam nejspíš patří. Do hlavního menu.
Z celého zážitku pro mě, jako samozvaného webdesignera, vyplynula jedna skutečnost, kterou bychom si my, profesionálové i poučení amatéři, měli rychle vzít k srdci. Nehrabejme se v nesmyslech, ale podívejme se skutečně objektivně a bez profesionálně zamlžených brýli, jak se obyčejní lidé, kteří o internetu vědí jenom to, že se jedná o jakousi informační dálnici, chovají a co od internetových stránek očekávají. Nenuťme je znát svůj prohlížeč, o němž ani netuší, že je to nějaký prohlížeč. Natož aby věděli, že existují jiné. Nenuťme je tápat a přemýšlet, jak se dostat k tomu, co hledají. Nenuťme je hledat logo jako odkaz (čímž neříkám, že nemá být). Nenuťme je hledat odkaz na hlavní stránku v patičce webu jako jsem to to učinil já (ale může tam být, nic tím nezkazíme).
Prostě, zkusme změnit náš přístup k tvorbě webu. Nechť je odkaz na hlavní stránku nedílnou součástí hlavní navigace každého webu. Nechť je z každé navigace patrné, že se jedná o navigaci. Ideálním řešením, které jsem si včera vyzkoušel a s úspěchem otestoval, je vyrobit hlavní menu webu nadprůměrně vyčnívající z celého layoutu a výrazným písmem k ní dopsat: PROSÍM, VYBERTE SI, CO HLEDÁTE. Nebo něco podobného, co pochopí i nadprůměrně nadaný lidoop. Zapomeňte na chvilku na SEO a podobné teoretické vymyšlenosti, které živí nemalou řadu společností, a začněte dělat weby skutečně pro lidi. Pro lidi, kteří něco hledají a proto na vašich stránkách jsou. Já jsem se tento týden poučil a budu se svou poučkou řídit. A to i přesto, že díky tomu možná mé weby ztratí na grafické přitažlivosti. Ale lidi se v nich budou snadno orientovat a nikdy nezabloudí. A když ano, nebudou mít problém vrátit se tam, kde začali.
Poznámka pod čarou: tento příspěvek se netýká těch, kteří se doposud mylně domnívají, že grafický vzhled internetové prezentace je to, co lidé nutně potřebují. Té překrásné slečně totiž bylo šumafuk, jak moje práce vypadá. Ona za čtrnáct dní nebyla schopna vrátit se na hlavní stránku! A není to chyba její, nýbrž moje.
V příštím příspěvku, který si určitě nenechte ujít, budu publikovat svou zkušenost s tiskem internetových stránek, což se navzdory názorům některých webdesignerů děje velmi často. Mívám zajímavé zážitky a je škoda se o ně nepodělit s komunitou, která se tak či onak internetem živí.
V životě jsem už byl lecčíms.
Namátkou – žákem, studentem, milencem, manželem, voličem, kuřákem, nekuřákem, opět kuřákem, zaměstnancem, nezaměstnaným, daňovým poplatníkem a v neposlední řadě člověkem. Vším, čím jsem byl, nebyl jsem pokaždé tak úplně rád, ale život už je takový.
Tímto prvním příspěvkem jsem se nyní, na stará kolena, stal bloggerem. Všichni milovníci Karla Čapka uznají, že jde o hrozné slovo. Slovo, pro které, pokud vím, neexistuje rozumný český ekvivalent. Národní obrozenci v době, kdy všeobecně uznávaným komunikačním prostředkem byla němčina, horlivě bojovali za čistotu a krásu české řeči. Cizácky znějící šnuptychl (existoval i necizácky znějící kapesník, ten ale přesně nevyjadřoval účel, ke kterému byl zmíněný kousek látky určen) nahradili půvabným novotvarem nosočistoplena. I klavír v jejich podání získal jiný význam a kouzlo nepoznaného. Uznejte sami – klapkobřinkostroj – no není to nádhera? Ale blogger? Mluvič? Blogger nemluví, blogger píše. Takže raději písač? Nepříliš libozvučné a málo vystihující jeho skutečné poslání. Blogger je tvor, který cítí potřebu ostatním něco důležitého (nebo zbytečného) sdělit. Takže – sdělovač? Jenže blogger většinou funguje opačně, rozděluje lidské postoje a názory. Vyšlo mi – rozdělovač. Pohříchu tento výraz si už na začátku minulého století rezervoval automobilový průmysl. Vážně nevím. Možná někoho z vás, kdo čte můj první, trochu schizofrenní, příspěvek napadne něco neotřelého až geniálního. Mě se to nepodařilo ani po dvou decilitrech karlovarského likéru.
Každopádně jsem tu mezi vámi. Netvrdím, že je to dobře a dokonce ani nemohu slíbit, že budu pravidelně psát smysluplné příspěvky. Nemohu zaručit ani to, co se na internetu všeobecně považuje za dogma. Totiž psát stručně a k věci. To já bohužel neumím a bohdá se to ani v životě, který mi ještě zbývá, nenaučím. Co vám ale slíbit mohu je, že bude legrace a občas vám nabídnu i poučení a zkušenosti z mého webdesignerského řemesla. A někdy, bude-li správná nálada a dostatek ušlechtilých nápojů, nabídnu vám pár perliček ze svého života, který určitě není a nebyl nudný. A věřím, že ani nebude.
Protože, přátelé, věřte mi, není většího zvěrstva na světě, než žít nudnou existenci. Každé zpestření, byť negativního rázu, dává celému našemu životu smysl. I pár facek po půlnoci od neznámého člověka vám může otevřít neznámé obzory. Obzory, na jejichž konci se nenápadně krčí tři zdánlivě nevinné otázky. Kdo jsem? Odkud jdu? Kam kráčím? Věřte mi, že těch pár facek, které jsem kdysi dávno inkasoval jedné podzimní pozdní noci za dveřmi útulné hospůdky v jihomoravském Vyškově, ze mě teprve udělaly skutečného muže. Muže, který se kromě jiného stává bloggerem. Držte mi palce, abych se někdy nestal něčím horším. Děkuji.