Protože psaní na NiceOne řadím mezi ty nejméně zábavné činnosti – někam vedle vynášení koše a čtení komentářů na YouTube, tak to tu taky podle toho vypadá. Udělat se to ale jednou za čas musí, tak o čem jiném bych mohl povyprávět, než právě o WebExpu, které jsem navštívil ten poslední krásný teplý letní den, a ten den po něm (myslím, že to bylo koncem září). Jaké tedy bylo WebExpo?
Měl-li bych být stručný, bylo hodně o mobilním webu. Je fajn, že se o něm začalo mluvit i u nás, a to nejen českými přednášejícími. Pokud bych se měl trochu rozepsat, tak asi takto:
Začalo to objížděním Prahy po nové části Pražského okruhu (super), pokračovalo jízdou mezi poli (to jsem ještě v Praze?), kde to mělo i pomalu končit, jenže následovalo bloudění po Dejvicích a po nalezení suchdolského areálu zemědělské univerzity bylo završeno frontou parkujících aut a následném (velice akčním, btw) těsném podjíždění pod zavírající se závorou. Když už jsem se začal bát, že nestihnu opening keynote, hodinová fronta na registraci mě přesvědčila, že to nevypadá ani na první přednášku. Ne, že bych Suchdolu nefandil, ale vzhledem k tomu, že už ani Dejvice v podstatě nejsou v Praze, tak tohle mi přijde až moc z ruky (na to, že to má být fakt pražská konference).
Dorazil jsem do druhé půle přednášky od Evy-Lotty Lamm o tzv. sketchnotes, nebo česky vizuálních kreslených poznámkách. Přednáška měla pozitivní ohlasy a bylo to rozhodně docela zajímavé. Na závěr každý dostal skvrnu od čaje, do které jsme měli dokreslit co se nám zlíbí a odeslat do patřičné Flickr group. Inu, webdesignéři 
.
Před polednem jsem ještě prchal do developer hall, kde přednášel kolega ze SSŠVT, Lukáš Hurych. Chvíli ukazoval hýbající se okýnka, šermoval s terminálem a gitem, ukázal něco v kódu, nakonec mu to napsalo Hello World a tomu celému říkal Cappuccino. Teď o tom píše i na Zdrojáku.
Po skvělém řízku s bramborovým salátem jsme šli obhlédnout, zdali by se v job hall (nechápu, proč “job hall”, když to bylo open-air) nenaskytla příležitost na smluvení nějaké školní praxe. Zřejmě jsme ale vystavující překvapili vzdáleným datem (květen) a tak vůbec účelem naší návštěvy. Jo, být tak fulltime Javista, to by se o mě přetrhli.
Skvělá byla přednáška od letošní webexpácké superstar Petera-Paula Kocha. Ukázal nám, jak je vzrušující vyvíjet pro 100 různých mobilních prohlížečů, ukázal příklady, které fungují pouze v MobileSafari na iOS a tak vůbec nastínil budoucnost internetu.
Nemohl jsem chybět na představení nového Nette 1.0 aka 2.0 od nejvtipnějšího českého programátora a zároveň nejlepšího bloggera u nás. Po přednášce pak k němu naběhli Petr Mára s Honzou Březinou, aby s ním natočili další live verzi Digitu. Už kvůli tomu se vyplatilo jít na WebExpo 
.
Druhý den, protože bylo hnusně, jsem první dvě přednášky vyměnil za delší spánek (údajně jsem udělal dobře). Přiběhl jsem až na druhou půlku Epických zlyhaniach na Centrum.cz (což jsem měl údajně vidět celé). Takovýhle druh přednášky mám rád – lessons learned, srdcervoucí příběhy, velká zodpovědnost atd. Hezké a docela i vtipné. Ještě lepší bylo živé testování použitelnosti. To musím někdy vyzkoušet, kromě praktického přínosu to musí být docela sranda.
O polední přestávce se bojovalo o Super Swarm badge. V dešti a přesně na mávnutí. Škoda, že nás bylo málo, tak si někteří pomohli přizváním kamarádů “fnpieuhea” a “lubecjaldkhsr” a dalších, tak jsme to nakonec zvládli .
Milovníci mobilního webu si dosytosti užili pár dalších přednášek, které mě tak trochu inspirovaly k vytvoření něčeho vlastního (stále je to ve fázi “naskečované na papíře,” ale chci to dotáhnout do konce). Kluci Sládek s Válkou vypadají jako nadšení webdesignéři, ostatně jako už loni.
Po ne úplně vyvedené Startup Show, při které jsem učil Toma Krchu správně fotit (má stejný foťák jako já, i se stejným objektivem!) spustila přednášení další superstar, a to Ryan Singer, lead UI designer z 37 Signals. To byla tak trochu povinnost. Nikdy jsem webovou aplikaci nenavrhoval, ale Ryanův postup mi přišel velice vhodný na designování nějaké fakt dobře použitelné. Bottom line? Dobrý designér musí umět dobře kódovat. Jo, a jak jsem posléze zjistil, ta terminálová šílenost, ve které Ryan psal HTML, se nazývá vim, umí ho používat velmi málo lidí a je to hrozně cool. Asi se chtěl ukázat nebo co. Trochu jsem se bál, co nastane, až Ryan odprezentuje – o zahraničních konferencích je tak nějak známo, že polovinu času se prezentuje a další dvě poloviny se diskutuje, což u nás není až tak moc tradičním zvykem. Pár lidí to ale zachránilo a nebyli jsme za příliš velké blbce.
Co dodat? Na WebExpu jsem se byl podívat loni, a příští rok to rozhodně plánuju taky. Možná z toho někdy bude hezká tradice. Některé loňské nedostatky se podařilo odstranit, některé ne, ale za rok to určitě bude opět stát za to.
A teď dovolte, musím jít vynést koš.
Dnes to bylo oficiálně stvrzeno registrací (konečně), takže se 24. a 25. září budu pohybovat v suchdolské Zemědělské univerzitě. Přijďte mě pozdravit, rád vám dám hi5, případně stisknu “follow” u vašeho Twitteru. Podle všeho se budu nejvíce pohybovat v Aule na přednáškách o designu, taktéž bych rád zavítal do Job Hall, kde budu shánět školní praxi, jestli něco takového půjde. A tohle jsou přednášky, na kterých bych nerad chyběl:
- Eva-Lotta Lamm – Visual Note Taking / Sketchnotes – údajně velmi zajímavé téma, navíc od UX designérky z UK. Jako warmup ideální. Alternativa: byznysmeny a markeťáky bude určitě mnohem víc zajímat výborná přednáška od samotného Davida Špinara běžící ve stejný čas.
- Peter-Paul Koch – Fronteers: the first three years – o tom moc nevím, ale přednášet bude Peter-Paul Koch a bude to o UX, takže tak
.
- Lukáš Plíhal – Kreativec je kdekdo
- Peter-Paul Koch – The Touch Events – Povídání o rozhraní pro dotyková zařízení i s konkrétní implementací nápadů v JS. Pokud vás nezajímají mobily, vřele doporučuji výborného Toma Krchu, který se vás bude snažit přesvědčit o kvalitách některého z cool produktů od Adobe. Můj názor na Flash znáte, ale Tom za to stojí, fakt.
- Digit Live – Tohle je no-brainer. Kdo by nechtěl vidět živě natáčení předního českého videopodcastu?
- David Grudl – Nette Framework 1.0: příští VELKÁ věc – Tohle je no-brainer. Kdo by nechtěl vidět naživo předního českého bloggera a PHP programátora?
- Séamus Byrne – What’s the Story? Infusing websites with the craft of storytelling – Povídání o vyprávění příběhů na webu, přijede kvůli tomu Séamus Byrne.
- Richard Fridrich – Čo ma naučili epické zlyhania na Centrum.cz – “několik zajímavých chyb” při tvorbě nového Centra.cz. Příběh s ponaučením, takové přednášky mám nejraději
- Lukáš Zaplatílek – Kašlete na uživatele – Provokativní titulek, přednáší člověk s provokativním avatarem. Třeba to bude stát za to, uvidíme.
- Petr Douša, Lukáš Marvan – Testování použitelnosti – LIVE! – O testování použitelnosti se u nás moc nemluví, zatímco v zahraničí je to běžná praxe. Může to být zajímavá sranda.
- Tomáš Hajzler – Snaž se to daleko dotáhnout! vs. Dělej, co miluješ! – 4 lekce, který jsem dostal od života – souběžná Startup show mě loni nějak nebrala, a tohle by mohlo být jakési dojemné, nebo něco v tom smyslu.
- Ryan Singer – Designing from start to finish – “Headliner” konference, UX bůh z legendární 37signals. Těším se velmi.
To by bylo tak nějak vše. See ya.
Mimochodem, loňský obor zaměření webdesigner jsem letos vyměnil za kreativec. Přijde mi to o mnoho vhodnější.
Tuhle útlou knížečku jsem dočetl teprve nedávno, ač jsem si ji předobjednával několik týdnů předem a docela se na ni i těšil. Chvíli jsem ale ležel v nemocnici, tak i na ni došlo.
Tato poměrně nová knížka je prvním počinem nakladatelství A Book Apart (komunita lidí tvořící A List Apart, známá i velkou konferencí An Event Apart), napsal jí renomovaný britský webdesigner Jeremy Keith a je zde i předmluva od samotného Jefferey Zeldmana. Je první v sérii knih „for web designers,“ neboli krátkých knih spíše pro designéry, než pro technicky orientované. Na nakladatelský debut to není špatný kus práce.
Kniha je velmi krátká. Kratší, než jsem si představoval (i když jsem byl varován). Podle citace na zadní straně obálky je tak akorát na let z Bostonu do Chicaga. Od knihy bych sice čekal, že mě zabaví na děle, než jako několik běžně dlouhých článků na internetu, ale údajně to má svůj účel.
Autor se věnuje takovému „general overview“ HTML5 – proč vzniklo, na čem si zakládá a proč místo HTML5 nemáme nové XHTML. Nejzásadnější novinky jsou obohaceny jednoduchými příklady a patřičně úderným vysvětlením. Nikde nepřebývá žádné slovo navíc a nikde vyloženě nechybí.
Dozvíme se vše, co by nás v dnešní době mělo v HTML5 zajímat, a to velmi jednoduchou, stručnou a vcelku vtipnou formou. Bohužel, většinu věcí jsem se už dočetl různě po internetu, a hlavně ve skvělém Dive Into HTML5, který bude po dokončení vydán taktéž knižně, a to u O’Reillyho nejspíš už 26. srpna. A upřímně vypadá o dost lépe a vybaveněji, ale zas bude o mnoho delší.
Na stejné téma a se stejným rozsahem by se dala napsat 2-3x tak dlouhá kniha. Ta by už ale sloužila k něčemu jinému. V HTML5 for Web Designers se dočtete, co je v HTML5 nového, co s ním lze udělat, co nového na to lze použít, a zda jsou na to prohlížeče připraveny. Je to takový quickstart do HTML5 s tím, že při samotném vytváření kódu spíš nahlédnete někam jinam (třeba do Dive Into HTML5). Po přečtení dostanete obecný obrázek o možnostech HTML5 a v praxi si v mnohém usnadníte první implementaci.
Nerdi a nároční čtenáři ale spíše sáhnou po Dive Into HTML5, aka HTML5: Up and Running. Já jim to nevyčítám, ale mě stačí HTML5 for Web Designers.
Pokud chcete zpříjemnit čtení blogu vašim drahým návštěvníkům používající mobilní zařízení, máte hned několik možností:
- Nechat web tak, jak je
- Stáhnout plugin typu WPTouch (samostatná šablona)
- Vytvořit zcela samostatnou webapp
- Posílat přeformátovaný CSS styl
Všímaví čtenáři si jistě všimli, že jsem jednu z těchto variant na tenhle blog nedávno nasadil (po delší existenci pouze varianty 1). Není to ovšem varianta 2.
Myslím si, že web jako takový by se neměl snažit napodobovat UI nějakého konkrétního operačního systému (s drobnou výjimkou pro formulářové prvky), a to ani mobilní zařízení, protože web je jaksi ze své podstaty multiplatformní (nebo “otevřený”, jak je teď v módě říkat) a tak nějak to celé nedává úplně smysl. Takhle neelegantně se chová WPTouch – napodobuje vzhled iPhone OS. Kromě toho, že by můj blog vypadal jako “další WordPress s WPTouchem”, ještě mi budou nadávat uživatelé Androidu a jiných mobilních OS, protože budu v jejich očích ovce Steva Jobse s žádným smyslem pro otevřenost. Pro tyto účely je vhodné najít nějakou kreativnější a méně arogantní možnost.
Pokud opravdu nechcete ztrácet čas optimalizací a nelíbí se vám ošklivý plugin, ve většině případů je OK nechat web být tak jak jste ho napsali pro desktop. Moderní WebKit prohlížeče se s úspěšností prokousávají vším možným, co jim předhodíte a pokud váš web není extrémně datově či layoutově náročný, tak se dá z iPhonu docela pohodlně používat (údajně i z Androidu).
Variantu 3 na blog spíše nevyužijete. Hodí se spíš na velké sociální weby typu Last.fm a Facebook, u kterých spousta features na mobilním zařízení nedává smysl a nabízí více focused rozhraní. Tyhle specifické mobilní aplikace jsou v zásadě napsané od začátku pro mobilní browsery a využívají vlastní, optimalizované přístupy k databázím, nebo třeba se službou komunikují přes veřejná API. Pro blog je to holt overkill.
Jak správně tušíte, používám poslední variantu. Do hlavičky stačí přidat referenci na CSS styl s atributem media="handheld, only screen and (max-device-width: 480px)", čímž zahrnete většinu mobilních zařízení a zároveň chytře vypustíte iPad, na kterém vypadá plný web úplně akorát. Inspiroval jsem se u blogu TapTapTap (prohlížejte na mobilu a porovnávejte s desktopem), kde mobilní verze vypadá prakticky stejně jako ta plná, jen je šikovně přeformátovaná a optimalizovaná pro 320px na šířku (nojo, dělají iPhone aplikace).
Tak nějak vypadá i NiceOne, obsah je o něco užší, obrázky trochu menší a je to príma. Slepí mohou otočit na šířku – tam se nepřepočítává šířka, jen se zvětšuje font.
Odzkoušeno mám na iPhonu, dokonce jsem si i stáhnul emulátor Android browseru a na obou N1 šlape tak, jak by mělo. Pokud máte nějakou minoritní platformu (Nokii, Palm, WinMobile, exotické rozlišení Androidu?), ozvěte se prosím s chybami na můj Twitter.
Příjemná věc při tvoření na mobilní browsery je, že WebKit prohlížeče (iPhone, Android, Palm WebOS a snad i BlackBerry) jsou zdaleka nejdál v implementaci HTML5 a CSS3, takže se nemusíte při vývoji nijak omezovat. Podívejte se třeba na citace z Twitteru v článku o iPadu, které mají nastavenou transformaci, stín a kulaté rohy. Na iPhonu se nejenom zobrazí správně, ale taky se šikovně přeformátují na šířku. Baví mě to.
Pro shrnutí – mobilní verze webových stránek jsou rozhodně přínosná věc, jen nesmí být na úkor kreativity vložené do původního layoutu, je-li to alespoň trochu možné. Také by si web neměl hrát na nativní rozhraní OS, protože to prostě dost dobře nejde, nativní UI má všude prostě jiný feeling (a kromě toho jde proti principům otevřeného webu).
Poznámka: Je velice pravděpodobné, že jste už článek na podobné téma minimálně jednou četli, tak ten můj s klidem přeskočte.
Tento článek jsem chtěl původně napsat jako novoroční zamyšlení, ovšem od té doby uběhlo relativně hodně času, tak to bude zamyšlení skoro pololetní. Bude to zamyšlení o webových technologiích, nebo jak by se to dalo nazvat.
V budoucnosti (jestli blízké nebo vzdálené ukáže čas) nás čeká několik významných milníků ve značkování a stylování webů. Mezi nimi to bude například HTML5, CSS3… Ale ten největší bude příchod (a doufejme rozšíření) Internet Exploreru 8. Jsou to věci tak zajímavé, že jsem se o nich odvážil i cosi napsat pro případné neznalce.
(more…)
Byl to sraz jako každý jiný. Měl svou tradici, dnes tomu bylo již více než patnáct let od prvního setkání podobně zaměřených nadšenců.
Jako první se na pódiu objevil pán v červeném, s tlustými brýlemi a mastnými vlasy, kterého znala jen skupinka podobně vypadajících podivínů. Pán se pohodlně usadil na volné křeslo předstírajíc nepřítomnost s komunikátorem v ruce.
Následoval mladík oblečený do džín a značkového trička. Vyskočil na pódium a uklonil se. Podobně jako pán v červeném, znala ho pouze malá skupinka přihlížejících, opět vzhledově velmi podobná jemu, která při mladíkovo skoku na pódium začala nadšeně pištět. Po chvilce sebepředvádění se usadil vedle staršího pána (stále zarytého do telefonu) a dal si nohu přes nohu mávajíc na přítomné dámy. To už byli na pódiu dva.
Jakmile se objevil další mladík v ohnivě oranžovém tričku s motivem dinosaura a se silně nagelovanými vlasy, dav začal šílet a vřele vítat nového příchozího. Hopsavým krokem přišel slušně pozdravit oba přítomné, obzvlášť srdečně pozdravil pána v červeném. Přišel k prázdnému křeslu a pohodlně se uvelebil. Taktéž si dal nohu přes nohu.
Jako každý rok, i nyní zde bylo rezervované místo, kam nesměl nikdo jiný, než stále opožděný pán v modrém. Bylo to křeslo stojící uprostřed, vypodložené stodolarovkami a opletené pavučinami. Pán v nepřirozeně modrém saku a kravatou nakřivo se dostavil, usadil se a schytal nevraživé pohledy téměř všech přítomných. Bylo vidět, jak se cítí nesvůj, každým rokem víc a víc. Ten den jeho nervozita vyvrcholila, obával se toho nejhoršího.
Doteď byla jeho přítomnost ve společnosti v rámci možností tolerována a díky tvrdé a únavné práci tisíců lidí částečně skryta, popřípadě byly zmírněny následky jeho nevypočítatelného chování. Evidentně byl z celé čtveřice nejhloupější, ale měl největší výhodu – naprosto každý s ním musel být alespoň jednou seznámen. Někdo ho toleroval, další nevnímal, někdo o něm ani nevěděl. Hůře na tom byli ti, kteří s ním museli být seznámeni, či s ním pracovat. Zhruba polovina lidí už ho ale s radostí opustila.
Nastal ten okamžik, na který všichni čekali. K muži v modrém přistoupil o něco sympatičtější chlapík opět v modrém saku, zlatou stužkou a úsměvem na tváři. I když ho obecenstvo také nemělo dvakrát v lásce, rozhodně byl více tolerovaný a jeho chování více vypočítatelné. Dav začal znovu šílet když si muži vyměnili místo. Pán s kravatou nakřivo vyčerpaně padl na všechny čtyři, ale dlouho se neudržel. Když se na něj rozeběhl početný dav, sebral poslední síly a utekl neznámo kam.
Král zemřel, ať žije král.
…
A od té doby jsem přestal optimalizovat weby pro IE6.
Čím víc jsem se zavrtával do možností tvorby webů, tím víc mě lákal, ale i zároveň odpuzoval JavaScript. Základy v programování v PHP vcelku ovládám, pustil jsem se do něj hlavně kvůli jeho prohlížečové nezávislosti, neb běží někde nahoře na obláčku na jednom serveru. S JavaScriptem to nikdy nebylo tak jednoduché, slýchal jsem velké stížnosti na různé JS implementace v různých browserech a s tím spojené značné nepříjemnosti. Dále je potřeba mít v JavaScriptu určitou úroveň znalostí, protože i zdánlivě velmi jednoduché věci se zpravidla zapisují velmi složitě. Přesto jsem se konečně do něho pustil. Proč?
jQuery,
to je ten důvod. Pokud alespoň trochu víte, jak vypadá kód v čistém JS (což byla taky jedna z věcí, které mě odpuzovaly), musíte souhlasit, že to je něco úplně jiného než HTML/CSS. Právě jQuery se snaží vtisknout JavaScriptu trochu více CSS, pokud mi dovolíte trochu přehánět, tak je to vlastně jeho větší nadstavba. No řekněte, není geniální zapsat jednoduchou věc jednoduše, logicky, a hlavně “CSS-like”? Chcete příklad? #("div#ramecek").addClass("cervene"). Tenhle kousek skriptu musí pochopit i CSS kodér, který JavaScript v životě neviděl, tedy alespoň u mě se tak stalo.
Co víc – všechno tohle funguje stejně ve všech prohlížečích!
A víte, kdo mě k tomu dokopal? Jiří Zralý s jeho jednoduchou, polopatickou sérií článků. Stačilo mi přejet pár řádků z prvního dílu a bylo jasno.
Na tomto místě se většinou píše, co jsem už udělal. No, je to jen jeden z mála pokusů, který jsem dělal přímo do HTML souboru: je tady, složitější skripty třeba ještě přijdou ale teď spíš zkouším různé postupy v jQuery Zkoušečce.
Ne, žádný tutoriál či seriál nehodlám psát, protože by to bylo snad ještě horší, než házet hrách na strom doufajíc že spadne. Více k věci se hodí doporučit ostatní, například toto video, nebo několik článků, jako je například tento, nebo tenhle, a taky doporučuji sledovat seriál článků na Digitálním Citronu počínaje tímto.
Doufám že jsem vás na jQuery alespoň trochu navnadil a zkusíte něco málo napsat ve Zkoušečce. V JavaScriptu a AJAXu je budoucnost webových aplikací, bohužel pro webové vývojáře…
Původně jsem měl v plánu napsat nějaký opravdu poučný a hodnotný příspěvek. Návštěvnost by se zvýšila o 1000% a spisovatelé by se mi klaněli tak hluboko, jak jen by to šlo. Byl by to článek, který by změnil svět, nebo tak něco.
Já se na to ale vykašlal a napsal tohle.
Určitě se vám někdy stalo, že jste potřebovali vypsat pomocí PHP z databáze nějaká data způsobem podobným tomuto:
mysql_query("SELECT * FROM tabulka WHERE jmeno=$jmeno")
Že ne? Zkuste to. Tento zdánlivě logický a syntakticky správný dotaz má jednu chybu – nefunguje. Přesněji řečeno vyhazuje naprosto nelogický a nesmyslný error podobný tomuto:
Unknown column ‘Obsah proměnné $jmeno’ in ‘where clause’
Cože? Kde se nám vzal sloupec v databázi se stejným názvem jako hodnota naší proměnné? A proč neexistuje? Skoro bych řekl, že tenhle bug je vložený schválně. Asi aby odradil nováčky a otravoval experty. Nebo to může být dávno zapomenutý vtípek, nicméně to je velmi diskutabilní. Podobně, jako nás ve škole učili, že je nejdřív třeba vypočítat to, co je v závorkách, tak otrlí programátoři vědí, že proměnné se v takovýchto případech uzavírají do uvozovek.
mysql_query("SELECT * FROM tabulka WHERE jmeno='$jmeno'")
Já myslel, že mě to snad zabije, půl dne hledání chyby, upravování a zálohování databáze… Ale nakonec jsem se jen plácl do čela. Silně.
A co jako?
Já vím, mí bystří čtenáři. Je to jen moje drobná nápověda pro příští programování. Tak ten zbytek alespoň naplním nějakým relevantním obsahem.
(more…)
Zajímavý titulek, ne? Mě se tedy líbí, ale nevím jestli ho každý pochopí. Jen napovím, že druhé slovo nemá co dočinění s divením se, nebo podivováním nad něčím, nýbrž se užívá ve webdesignu.
Tedy dělám teď jedny stránky. Nejsou to ale obyčejné stránky, potřebuji totiž, aby se levý sloupeček s modrým pozadím natahoval podle délky pravého sloupečku (i s pozadím). Po bohatých zkušenostech s tabulkovým layoutem jsem si myslel, že to nemůže být problém, ale trochu jsem se spletl. Tato operace vyžaduje speciální, až nelogické myšlení ve výsledku s jedním malým paradoxem.
Při studování několika návodů, jak provést něco podobného, či dokonce stejného, jsem podstatu pudla jaksi příliš nechápal. Přišlo mi vhod až nekolikeré přečtení náhodných článků tohoto tématu. No být tím, kdo to vymyslel, tak se stydím, je to nehezká layoutová prasárna, ale budiž, funguje to. Takže v kostce podstata toho, co se všude píše:
Dejme tomu, že máte dvousloupcový layout v obalovém divu. Že byste nejraději oboum sloupečkům nastavili float na left? Omyl. nastavíte jej pouze prvnímu sloupci. A co ten druhý? Tomu stačí nastavit levý margin o šířce levého sloupce (třeba dvěstě pixelů).
Protože chceme, aby levý sloupeček byl celý modrý (tedy až úplně, neboli úplně dolů, či podle délky pravého sloupce (vše znamená to samé)), musíme pro to něco udělat. Že byste nejraději použili background-color: blue;? Znovu špatně. A teď nastává další prasárna. Pozadí musí být obrázkové ať chceme, nebo ne. Navíc ho nenastavujeme levému sloupečku, ale obalovému divu (!), takže si musíme vytvořit proužek o šířce levého sloupce a výšce nejlépe 1px, poté nastavíme background: top left repeat-y; samozřejmě s URL obrázku. Že je to ale nehezký postup?
A nakonec ten slibovaný paradox. Zkusili jste v klasickém dvousloupcovém (dvakrát floatovaném) layoutu nastavit height: 100%; levému sloupečku společně s background-color: blue;? A zkoušeli jste to i v Internet Exploreru?
Dnes trochu prakticky – nějakou dobu se snažím vymyslet nějaký jednoduchý, funkční a kompatibilní způsob, jak vytvořit obrázkový hover efekt v CSS. Jeden hezký návod jsem našel zde, ovšem cosi mi na něm vadilo, tak ho malinko rozšířím a poupravím, takže teď si návod přečtěte, ať tak nějak víte. Budete to potřebovat k dalšímu postupu. Opravdu. A jak říkají mí američtí bratři: for real!
Opravdu si to přečtěte.
Nejprve si upravíme HTML kód do modernější varianty, a upravíme popisky na tlačítkách (jinak nejsou moc kúl), tedy použijeme moderní seznamy (<ul> <li>) a výběr popisků nechám na vás. HTML kód zde:
<ul id="menu">
<li><a href="#">První věc</a></li>
<li><a href="#">Super věc</a></li>
<li><a href="#">Přjíemná věc</a></li>
<li><a href="#">Nechtěl bych</a></li>
<li><a href="#">Atakdále</a></li>
</ul>
Hlavní nedostatek v originálním návodu pro mě představuje nemožnost výstavby horizontálního menu. Proto tedy již od začátku tvořím menu právě horizontální.
Protože bez CSS kódu by to jaksi nebylo ono, přikládám jej zde též. Podrobněji popíši níže.
#menu li {
list-style-type: none;
padding: 0; margin: 0;
float: left;
}
#menu a {
display: block;
width:108px;
margin: 0;
padding:18px 0 22px 5px;
font-size: 12px;
color: white;
background: url("button.png") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover {
background-position: -113px 0;
}
Hover funguje na principu posouvání jednoho obrázku, tedy jeden obrázek obsahuje rovnou oba stavy a má dvojnásobnou šířku. Toto opatření je zde hlavně kvůli rychlosti načítání, kompatibilitě a v extrémních případech i rychlosti prohlížeče (posunout obrázek je méně náročné, než jej vyměnit).
Nyní k CSS: Protože máme seznam, který chceme uspořádat vedle sebe, hned po odstranění nežádoucích prvků seznamu uvedeme vlastnost float: left;. V definici #menu a musíme nastavit display: block;. Ani moc nevím proč, ale bez toho to moc nefunguje. Nejspíš to bude něco s šířkou elementu =). Dále odkazu musíme nastavit fixní šířku, a samozřejmě pozadí (nezapomeňte na posunutí pozadí – 0 0 no-repeat;). Dále je na vás volba fontu, barvy atd.
V dalším kroku (stav :hover) je potřeba jen nastavit posunutí pozadí o určitý počet pixelů – background-position: -113px 0;.
Že je to jednoduché?
Tento způsob je zaměřen hlavně na jednoduchost, praktičnost, a hlavně kompatibilitu (bez potřeby JavaScriptu v IE). Kód je krátký a přehledný a doufám, že někomu pomohl. Dříve jsem se s takovým kódem trápil pěkně dlouho a bezúspěšně. Dnes jsem si řekl, že bych už na to měl přijít. No a přišel =).