Roztrhl se pytel s linkovacími službami?

Mezi zajeté koleje Linkuj.cz a Jagg.cz se nenápadně dostaly další obdobné projekty Topčlánky.cz a TOPodkazy.cz. Dnes mi přišel email o spuštění dalšího linkovacího projektu – TOPodkazy.cz, že by spam? Nebudu ho řešit, dělá to kde kdo, dokonce sám Seznam pouští do schránek svých uživatelů emaily od O2, T-Mobile a tak dále…

Nepochopím ale, proč vývojáři vyvíjejí minimálně čtvrtou službu stejného zaměření… přičemž poslední zmiňována na mě působí dost nedodělaně. Grafika nějaký tamplate, do hlavičky akorát plácnutý základní šejpz Photoshopu. S vlastním obsahem se taky moc netrápili…

Topčlánky nejsou alespoň zahlceny reklamou a mají také lépe propracován vlastní obsah… kdežto TOPodkazy se mi jeví moc lacině, využívá stejný systém zobrazování reklamy jako Linkuj… nepřijde mi prostě dost originální…

Zamyslet se stojí také nad názvy obou čerstvých služeb… obě mají v názvu TOP… mají snad něco společného? Parazituje jedna služba na druhé? Nebo je to snad jen pouhopouhá náhoda? hmm…

No uvidíme, kdo přežije. Bude záležet na komunitě uživatelů, jestli přeběhne, nebo setrvá na zlatém Linkuj.cz a Jagg.cz.

Pozor na chybějící identifikační údaje na firemních webech!

Slyšte slyšte, všichni majitelé webových stránek jakéhokoliv podnikatelského subjektu jsou povinni od 1. března 2008 umístit na firemní weby identifikační údaje, kdo takto neučiní tomu bude sťata hlava, respektive dostane pokutu 50 tisíc korun, v horším případě zákaz činnosti až na 1 rok.

Něco v tomhle smyslu hlásá novela zákona v obchodním zákoníku. Nic proti této novele nemám, firmy a živnostníci by měli na internetu vystupovat co nejvíce z anonymního stínu. Jistě důvěryhodnější se pro uživatele stane internetová prezentace firmy, která prezentuje vedle nabízených produktů/služeb také něco ze zákulisí (kontaktní informace, adresu, IČ, fotografie pracovního prostředí atp). Měli byste snad zájem o spolupráci s firmou, která není schopná vyvěsit na své webové stránky ani IČ(identifikační číslo)? Já tedy rozhodně ne. Internet se mění, už to není ten tajemný svět. Přirozený vývoj internetu se snaží co nejvíce přiblížit reálnému světu. Proto by bylo hloupé snažit se tyto identifikační údaje vědomě skrývat. Účelem mého článku je udělat v této otazníky oplétané novele zákona jasno :o).

Koho se novela zákona č. 344/2007 Sb. týká?!

Všech podnikatelských subjektů:

  • živnostníků (fyzické osoby)
  • firem zapsáných v obchodním rejstříku (právnické osoby)
  • osob podnikajících na základě jiného než živnostenského oprávnění
  • zemědělců, zapsaných do evidence dle zvláštních předpisů

Co všechno je třeba zveřejnit?!

  • jméno podnikatele/název firmy
  • místo podnikání/sídlo firmy
  • identifikační číslo[IČ], pro plátce daně také daňové ident. číslo[DIČ]
  • datum zápisu do živnostenského/ob­chodního rejstříku
  • evidenční číslo živnostenského listu/spisová značka v rejstříkovém sou­du
  • základní kapitál*

* Základní kapitál není povinnou položkou, uvádět se ovšem smí až je zcela splacen.

Kam je potřeba tyto identifikační údaje na web umístit?!

Zákon nijak nedefinuje umístění těchto údajů, díkybohu. Dokážete si představit, že by třeba napevno stanovil, že se tyto údaje musí objevit v hlavičce? Asi by se web designérům pěkně sevřely pěsti. :o ) Ideální je snad sekce Kontakt, O firmě a tak podobně. Nutné je také umístit tyto informace i na cizojazyčné weby, či jazykové verze webové prezentace.

Příklad umístění identifikačních údajů na webu fyzické osoby(živnostní­ka):

  • Pepa Dvořák
  • Místo podnikání: Dvořákova 68, 190 00 Praha 9
  • IČ: 34343434
  • (DIČ: CZ34343434)
  • Fyzická osoba zapsaná v Živnostenském rejstříku od DD.MM.RRRR (datum zápisu do rejstříku)
  • Evidenční číslo ŽL: 454545–454545454

Příklad umístění identifikačních údajů na webu právnické osoby(firmy):

  • SexyPixels a.s.
  • Sídlo firmy: Francouzská 99, 100 00 Praha 1
  • IČ: 34343434
  • (DIČ: CZ34343434)
  • Spisová značka: C 45454 vedená u rejstříkového soudu v Praze
  • Základní kapitál: 500 000 Kč (nemusí být uveden)

Perlička na závěr: Právníci se domnívají, že všechny tyto identifikační údaje není vůbec nutné na firemní web umístit, postačí prý jen odkaz na výpis z živnostenské­ho/obchodního rejstříku, jelikož jak už jsem zmínil, zákon nijak nespecifikuje umístění těchto identifikačních ú­dajů.

ČEZ utočí ostře na konkurenci, na etiku kašle…

Pokud nebydlíte někde přímo v divočině, museli jste si za poslední týden všimnout nasazení tvrdé reklamní kampaně kolosálního ČEZu, která se přímo strefuje do jeho dvou největších konkurentů – Pražské energetiky PRE a bývalé Jihočeské plynárenské, nyní EON. Tato strategie se nazývá srovnávací reklama, při níž napadající pochoduje po tenkém ledě české legislativy. V zákoně je totiž tato forma povolena, ale nesmí útočit na jiné společnosti a jejich produkty. O celou kauzu se už zajímá Rada pro reklamu, která ale nemůže zasáhnout, jelikož PRE ani EON prozatím nepodali žádnou stížnost.

Dle mého názoru jde z velké části jen o zviditelní ČEZu a o vyřizování si účtu tam nahoře mezi manažerskou vrchností, která ráda pošle pár desítek miliónů na takovou kampaň. Výsledkem je upoutaní médií, lehké šikanování slabší konkurence… noví zákazníci?! těžko… pochybuji, že by si někdo kvůli této reklamě běžel přepsat poskytovatele elektrické energie.

Každopádně je to dobrá sranda, ČEZ má peněz jak jistě všichni víme dost, mohl by je ovšem investovat jinak, třeba do svých zákazníků :o ). A co si o této reklamní kampani myslíte vy?

Obrázková klikací mapa snadno a rychle :o)

Určitě jste se už někdy na webu setkali s použitím image mapy, obrázkem, který odkazoval svými různými částmi na jiné stránky. Typickým příkladem je použití pro rozdělení nějaké mapy na státy, kraje a podobně. Vezměte si třeba že vlastníte velkou nadnárodní společnost v Evropě a v každém státě máte svou pobočku. Na vašem webu chcete mít Introduce site, neboli Úvodní stránku, na které bude mapa Evropy. Chcete realizovat, aby jednotlivé státy na mapce byly odkazem na Vaše dceřinné pobočky. Co tedy použijete? Klikací mapu.

Můžete se v tom patlat sami a počítat souřadnicové body, což je prakticky nereálné, nebo můžete použít nějaký z chytrých programů, který to udělá za vás za tisícinu času. Prohrabal jsem se mezi několika programy, které tuto dovednost slibují. Některé byly zbytečně složité, obalené dalšími, pro nás nechtěnými funkcemi. Některé byly méně, či více použitelné. Opravdu mě ale zaujal pouze jeden – Handy ImageMapper!

Nejprve bych chtěl ty, kteří o klikací mapě na obrázku slyší poprvé, odkázat na trochu teorie. Je totiž dobré chápat aspoň špetku z tohoto řešení.

Handy ImageMapper obsahuje pouze nástroje, které využijete k tvorbě klikací mapy na obrázku. Čeká vás tedy skvělá orientace a použitelnost, program pochopíte v mžiku vteřiny. Pro tápající je v pravém dolním rohu tlačítko Help.

Tento program umí dělat klikací oblasti ve tvaru circle, rectangle a polygon, neboli ve tvaru kolečka, obdélníku, čtverce a mnohoúhelníku, který je pro nás tím pravým, chceme totiž vytáhnout hranice států. Ty ale nejsou obdélníkové ani jinak symetricky stejné (bohužel války nebyly tak přesné). Mnohoúhelník je tedy naším nástrojem číslo jedna.

Určitě víte jak kostrbaté jsou hranice Evropy a určitě tušíte, že je nehodlám jen tak zbůhdarma na ukázku obkreslovat :o ) Našel jsem typický, již hotový příklad na webu Evropa.adam.cz. Pokud jste se už pokochali touto pracnou potvůrkou, dovolte mi ukázat vám rychlý a praktický příklad z jiného prostředí – z fotky.

Poslouží nám fotka sedadlového stolku Pendolina, na kterém leží časopisy, nějaké sladkosti a podobně. Otevřel jsem si tedy tuto fotku pomocí tlačítka Otevřít nahoře v pravé části.

Tak a začneme vybírat jednotlivé předměty (oblasti) na fotce. Později jim nastavíme kam mají linkovat a jejich titulek… Vybereme si tedy jeden z nástrojů (circle, rect, polygon) a začneme vytahovat cestu klikací oblasti předmětu. Kruh a obdélník a čtverec řešit myslím nemusíme, jen kliknout a táhnout. Mnohoúhelník je o něco složitější, klikněte a táhněte do strany, utvoří se vám čára. Chvíli jsem byl zoufalý nevěděl jsem proč nemůžu pokračovat dále dalším bodem pro obtáhnutí klikací oblasti.

Tlačítko Help dole vpravo mi prozradilo, že další body přidám kliknutím pravým tlačítkem myši. Přepněte se ale z nástroje Polygon zpátky na Moving cursor, obyčejnou šipku. Nyní tedy můžete začít přidávat další body a roztahovat je na místa kam potřebujete. Je to trošku podobné jako práce s perem v grafických programech. Zkuste to sami a uvidíte.

Tak teď ještě vytáhnu oblasti i pro další předměty a pustíme se k nastavení odkazů…

Když už máme tedy všechny oblasti, které chceme mít aktivní, na obrázku označené. Vybereme kliknutím kurzoru jeden z předmětů, já si vybral jako první Snickers tyčinku. Zaktivní se nám v pravé části políčka Coords, Tooltip a HREF. Coords jsou souřadnice bodů našeho předmětu, to nás nemusí moc zajímat. Tooltip je Title, klasický HTML popisek, jak jej už jistě dobře známe. HREF je cesta odkazu, na kterou kliknutí na předmět povede. Vyplníme tedy tyto vlastnosti všem předmětům na obrázku.

Teď když máme všechno vyplněno, doplňme ještě název naší klikací mapy, není to ale nic důležitého, klidně můžete nechat defaultní map1. Nyní klikněte na spodní tlačítko Place On Clipboard, HTML kód, který jste dosud neviděli se nyní zkopíroval do schránky… teď přejděte do vašeho HTML editoru a dejte CTRL+V nebo klikněte pravým a vyberte z nabídky Vložit.

Vygenerovaný kód se vám zkopíroval na vámi určené místo ve vašem HTML dokumentu. Popisovat si ho nebudeme, k tomu slouží odkaz na teorii, o kterém jsem se zmínil dříve…

Nakonec tedy servíruji odkaz na můj hotový pokus. A samozřejmě odkaz na program Handy ImageMapper, který je freeware a to se vyplatí, ne?

Dalo by se to samozřejmě pořádně vymazlit hover efektem a podobně… ale to už je zase jiný příběh. :o ) Možná příště ;-)

Pokud jste vlastníkem Adobe Dreamweaveru, tak se na tohle všechno vykašlete, tuto funkci má Dreamweaver v sobě, a je trošku více intuitivnější.

Tortillas muy buenas!

Díky Tanushko za překlad :o ) >>> Moc dobré tortily! přesně tohle hlásá uvedený nadpis textu. Dnes jsme měli k obědu opravdu vynikající tortily s restovaným kuřecím masem, kukuřicí, fazolemi a spoustou koření… celé to šikovná šéf kuchařka zalila zakysanou smetanou. Výsledkem byly několika násobné orgasmy mých chuťových pohárků a jedna rychlá fotografie.

Fotka byla vyfocena na automatický režim a moc jsem se s tím nepáral, chuť byla silnější. Po otevření v počítači byla fotka lehce přesvícena a zdaleka nezachycovala tu pochoutku, tak jak by si zasloužila. Proto jsem otevřel dobrého pomocníka od Adobe, který mnohokrát dokáže udělat z paseky pastvu pro oči. Úprava trvala opravdu jen minutku.

Fotka bez úpravy vypadá docela obyčejně. Je ale docela hodně osvícena přirozeným světlem, s kterým se dá hodně pracovat. Otevřel jsem si tedy tuto fotografii v Adobe Photoshopu.

puvodni_s.jpg

Provedl jsem s ní následující úpravy.

  • Doostření
  • Expozice
  • Odstín a sytost

Doostření

Na funkci Doostření se dostanete v nabídce Filtr>Zaostře­ní>Doostřit. Hodnoty jsem nastavil jen na lehké doostření, nezapomeňte, není nic horšího než přeostřená fotografie!

sharp.jpg

Expozice

Právě změna expozice ovlivnila to příjemné světlo ve výsledné fotce. Vlastnosti expozice můžete ovlivnit i po vyfocení fotografie, ideálně v CameraRAW, pokud ale fotíte pouze do formátu JPEG, samotný Photoshop vám dokáže také pomoci. Ovlivnit můžete hodnoty expozice, posun a korekce gama. Právě třetí zmíněná vlastnost si pohraje zásadně se světlem. Na funkci Expozice se dostanete v nabídce Obraz>Přizpůso­bení>Expozice. Každá fotka potřebuje individuální nastavení. Tak si s tím pěkně pohrajte.

expozice.jpg

Odstín a sytost

Nakonec jsem jenom lehce srazil sytost barev. Fotografie tak dostanete trochu jiné barvy, než na jaké je lidské oko zvyklé. :o)

Úpravy digitální fotografie k nakousnutí!

Klidné nedělní odpoledne v našem malém pražském příbytku narušil sladký host jménem Fragola. Vloudil se k nám z mlsotami přecpané cukrárny Erhart blízko Letenského náměstí. Dříve než jsem se pustil do nekontrolovatelné konzumace tohoto lahodného skvostu, cvakl jsem narychlo několik fotek. Když jsem je později prohlížel, nebyl jsem z nich zrovna na větvi. Vzpomněl jsem si na dřívější úpravu fotky mlsných mexických tortil, o kterých jsem psal dříve. Některé z úprav, které jsem na fotografii aplikoval jsou totožné s těmi na tortilách, silnou zbraní je úprava expozice, která zásadně ovlivní atmosféru snímku.Omáčky už snad stačilo, pojďme tedy s chutí do toho :o)

Nejprve vám ukážu původní fotografii, tak jak jsem ji dostal z paměťové karty fotoaparátu. Docela obyčejná, trošku neostrá fotografie, na které je více objektů než je zdrávo. Co ovšem dělá fotku zajímavou jsou proužky, které se na scéně objevují vícekrát (na samotném dortu, na podtácku, v dýze dřevěného stolu a v pozadí na přehozu křesla, ve kterém hypnotizuje Tanushka dort (čeká až dofotím, aby mohla začít ládovat). :o)

puvodni1.jpg

Zbavíme tedy fotku nedostatků a rušivých elementů. Já používám Adobe Photoshop CS3, ale věřím, že všechny úpravy budete schopni udělat obdobně v některém z alternativních programů. Na fotografii jsem aplikoval tyto úpravy:

  • Oříznutí rušivé části fotografie
  • Retuš USB kabelu v pozadí
  • Doostření fotografie
  • Úprava expozice, gama korekce
  • Stíny a světla
  • Drobná úprava sytosti barev
  • a nakonec přidání tmavých prolnutých okrajů ;o)

Oříznutí rušivé části fotografie

Na scéně této fotografie je zbytečně mnoho objektů, fotografoval jsem s ohniskem 18mm, takže se toho do záběru dostalo docela dost. Pravá část s monitorem a sklenicí vody může zbytečně oko zaujmout, navíc zakalená voda se šťávou trošku kazí dojem z luxusního dortíku. Provedeme tedy ořez pravé strany ;o)

crop.jpg

Retuš USB kabelu v pozadí

Na původní fotografii si můžete všimnout bílého USB kabelu, který se za černou klávesnicí line k zemi a zbytečně nám ruší fotografii. Jeho retuš nám nezabere víc než minutku, tak proč ho prostě nevymazat. Použijteklonovací razítko, nastavte jeho krytí na 50%, zvolte vhodnou stopu a vyretušujte jej z povrchu zemského :o)

Doostření fotografie

Fotografii jsem fotil z ruky na docela dlouhý čas (0.1 sec), kvůli horším světelným podmínkám. Mírné rozostření tedy opravíme funkcí Doostřit. Moc to nepřežeňte, aby zůstala fotka reálně ostrá a nezvýšil se moc šum fotografie.

ostreni.jpg

Úprava expozice, gama korekce

Toto je jedna z nejdůležitějších úprav, radikálně změní atmosféru fotografie. Dokáže vybabrat z fotografie s šedým povlakem kontrastní a silné barvy. Hodnoty, které jsem nastavil jsou subjektivní, klidně si s tím vícepohrajte a potvrďte až ve chvíli, kdy budou barvy a světlost vašemu oku nejpříjemnější.

expozice1.jpg

Stíny a světla

Občas se stane, že potřebujete nastavit Korekci gamy na silnější hodnoty a fotka příliš ztmavne. Nezoufejte, můžete to napravit použitím funkce Stíny a světla, která vám nabídne detailní úpravu stínů a světel ve fotce. Právě aplikace této funkce umocňuje naši fotografii, v části Přizpůsobení jsem nastavil záporné hodnoty korekce barev a kontrastu středních tónů. To způsobilo jemný „kávový“ filtr, který dává fotce tu správnou atmosféru nedělního odpoledne. ;o)

stiny.jpg

Drobná úprava sytosti barev

Barvy se mi zdají ještě trošku moc pestré a rušivé, shodíme tedy sytost barev [CTRL+U] do záporných hodnot. Opět je to dost subjektivní, tak si s tím pohrajte!

sytost1.jpg

Přidání tmavých – prolnutých okrajů

Fotka už je prakticky hotová, jen ji doladíme přidáním tmavých okrajů, aby nabrala ještě o trošku více atmosféry! Vytvoříme novou vrstvu a vyplníme ji černou barvou. Zvolíme nástroj Obdélníkový výběr a vybereme 70–85% z fotografie. Poté vybereme v nabídce Výběr > Změnit > Prolnout okraje [ALT+CTRL+D] a nastavíme poloměr prolnutí 50 pixelů, potvrdíme a zmáčkneme klávesu DELETE.

prolnout.jpg
black.jpg

Efekt tmavých okrajů zmírníme snížením krytí černé vrstvy v nastavení Volby prolnutí. Použil jsem 15% můžete i víc, ale nic se nemá přehánět ;o)

styl_vrstev.jpg

Výsledek je k sežrání, no řekněte, že by jste se nezakousli. ;o) Doufám, že byl pro vás článek alespoň trošku přínosný a polechtal vaše chuťové pohárky!

vysledek.jpg

Poznámka: Fotografování jídla, následná úprava a kochání se výsledkem mě začíná čím dál víc uspokojovat, uvidíme jak to se mnou dopadne xD.

Jednotný grafický styl Dopravního podniku Praha!

Už je tomu nějaký ten pátek kdy, Dopravní podnik hlavního města Prahy nasadil jednotný styl pro všechny druhy tištěné reklamy a informačních letáků. Musím uznat, že grafické oddělení dopravního podniku odvedlo opravdu skvělou práci. Dokázalo udělat z veřejné dopravy něco zábavnějšího a hravějšího. Mockrát jsem nebyl svědkem takovéhoto úspěšného omlazení firemního grafického stylu, který by byl tak jednotný a nebyl nudný. Přiložil jsem zde náhled na reklamu, v které dopravní podnik hledá nové kolegy – řidiče autobusů. Když jsem ji viděl poprvé, uchvátila mě! Ten sladkej retro autobus mě fakt dostal, hned jsem se chtěl stát řidičem autobusu. Těm, co nebydlí v dosahu Prahy a neměli tak možnost spatřit tento zdařilý kousek jednotného grafického stylu, nabízím k nahlédnutí měsíční časopis DP Praha (Prosinec, Leden), uděláte si tak obrázek o čem tady vlastně píšu. ;-) Přikládám také odkaz na výroční zprávu z roku 2006, která sice není v tomto novém stylu, ale lze z ní cítit ta lehkost a hravost díky dětským ilustracím.

Oddělte formu od obsahu, aneb vizuální orgasmy patří do CSS!

Pokusím se vám dostat pod kůži základní filozofii dobrého webdesignu! Tkví v jedné otřepané frází, kterou jste již určitě někde slyšeli – Oddělte formu od obsahu!… nic víc se od vás nechce! Co to ale znamená oddělit formu od obsahu?

Podívejte se na SexyPixely bez kaskádových stylů, tady máte odkaz. To co tam vidíte, je čisté HTML, čistý obsah, vše co tam je, má pro vás obsahovou hodnotu, nenutím vám v této verzi žádný vizuální vzhled, který bych sám definoval. Váš prohlížeč má v sobě, zakomponovány své vlastní styly, takzvaně defaultní (základní), pomocí kterých ostyluje HTML kód, nadpisy jsou velké, seznamy mají odrážky, odkazy jsou podtrhnuté a mají nastaveny barvy… dostanete tak syrovou stránku, bez jakéhokoliv zásahu mého grafického patlání.

Při nedodržení této filozofie se na stránce při vypnutých stylech stane, že vidíte najednou celou obrázkovou navigaci, dekorační obrázky a plno dalších kravin, které tam nepatří. Naučte se je proto dávat do kaskádových stylů, přiřaďte použitým HTML tagům třídy či identifikátory a na pozadí jim umístěte tyto dekorační vymazlenosti.

A komu tím prospějete? xD

  • Sobě samotnému – pročistí se vám kód, bude přehlednější a budete se lépe orientovat, navíc nebudete muset vytvářet speciální tiskové styly…
  • Handicapovaným – používají hlasové čtečky a jiné zařízení usnadňující jim prohlížení, pracují především s HTML a formátují je pomocí svých preferovaných sty­lů…
  • Uživatelům – dostane se jim tak skvělá tisková verze stránky, na které budou mít opravdu jen to, o co stojí… navíc se jim zrychlí načítání stránek…
  • Vyhledávačům, neboli zase sobě :o ) – Vyhledávače vidí stránky, přesně tak jako v naší ukázce, se správně strukturovaným HTML kódem se pak snadno můžete posunout ve výsledcích vyhledávání více nahoru…

Pochopením této základní kodérské filozofie se posunete mnohem blíže k vysněnému profesionálnímu kódu. Jsou to právě tyto back-end záležitosti, které oddělují profesionály od amatérů.

Tak si to zopakujeme ještě jednou! Do HTML zapisujeme pouze obsah, všechno, co slouží k vizuálním orgasmům patří kam? … No přece do kaskádových stylů! Oddělíme tak formu od obsahu! Komu tím pomůžeme? VŠEM!

Sexy obrázkové menu pomocí CSS!

Na webu se dost často setkávám s hlavní navigací, která je řešena obrázky. Ty ale většinou nemají textovou alternativu, maximálně ALT (alternativní popisek obrázku), při vypnutých obrázcích pak nastává situace, že jdou vidět „jakési“ alternativní popisky bez jakékoli formy. Při vypnutých stylech, se pravděpodobně zobrazí opět ono obrázkové menu, mnoho kodérů totiž jednotlivé odkazy na sekce umísťuje do HTML do tagu <img>, což ale není nejlepší řešení, obrázkově ztvárněná navigace totiž patří celá do kaskádových stylů, v kódu má být pouze obsahová část… tedy nečíslovaný seznam. Vychází to z oné základní koderské filozofie.

Připravil jsem si pro vás obrázkovou navigaci, která splňuje tyto požadavky, v HTML dokumentu je pouze obsah, vizuální podoba menu je v kaskádových stylech. K tomu všemu si pohrajeme s posouváním pozadíu prvků, ušetříme tím práci s dalšími soubory (obrázky) a zmenšíme tak i datový objem celé navigace. Pokud tedy máte čas, pohodlně se usaďte a pustíme se do toho;-)

Podíváme se nejdříve na hotové řešení, aby jste měli představu, co vás čeká. Jak vidíte zvolil jsem variantu horizontálního menu. Hover efekt není nic jiného, než změna barvy písma. Klidně si tam udělejte hezčí efekt, já se s tím moc nebabral. :o)

Rozebereme si, co pro takové přístupné menu musíme udělat:

  • Grafické ztvárnění navigace
  • Vytvoříme si holé HTML
  • A teď to všechno pořádně osolíme, teda ostylujeme :o)
  • Přidáme třídu .aktivni
  • Závěrečné oslavy a ohňostroj xD

Grafické ztvárnění navigace

Tohle nechám na vás, jistě máte svůj oblíbený grafický editor, v kterém jste jako ryba ve vodě, nebo alespoň jako v akvárku :o ). Udělejte si také hover variantu (při najetí myší na položku v menu). Umístěte jí pod vámi vytvořenou navigaci, nějak tak jako to dělám já ve svém příkladu.

Teď určitě čekáte, že to celé naporcujeme, pořádně to rozsekáme na jednotlivé sekce + jejich hover variantu. Uděláme z toho pořádný masakr, celé menu tak rozsekáme do 12 souborů (obrázků). Nikoliv! Celou navigaci uděláme pouze pomocí jednoho obrázku! No není to sexy? :o ) Doporučuji vám oddělit jednotlivé položky v menu vodítky, zjednodušíte si pak počítání při posouvání pozadí v CSS.

Obrázek Navigace

Vytvoříme si holé HTML

Připravíme si HTML kód, budeme se zabývat pouze části s naším menu, nadpisy a odstavce v našem příkladu jsou jen pro názornost, to snad zvládnete sami, pokud ne můžete nahlídnout do zdrojového kódu samotného příkladu. Nejprve si připravíme holý nečíslovaný seznam, nebo sémanticky trochu lépe – použijeme tag <menu>. Přiřadíme všem prvkům <li> a odkazům <a> stejnou třídu, pokud v tom máte teď trochu guláš tak se nebojte, všechno si vyjasníme při stylování :o).

<div id="wrapper">

 <menu>

  <li>
     <a href="index.html"> </a>
  </li>

  <li>
     <a href="product.html"> </a>
  </li>

  <li>
     <a href="sexy.html"> </a>
  </li>

  <li>
     <a href="templates.html"> </a>
  </li>

  <li>
     <a href="links.html"> </a>
  </li>

 </menu>

</div>

Takhle by nám to stačilo v případě, že bychom se vykašlali na bez-obrázkové zobrazení a na situaci s vypnutými styly. Jenže my přece nejsme žádní flákači a uděláme to pořádně. Přidáme tedy <span>, do kterého nacpeme textovou variantu názvů našich položek menu, do spanu dáme další odkaz <a>, který povede na stejnou adresu, jako první odkaz. Tento odkaz tam dáváme kvůli zobrazení bez CSS stylů, kdybychom ho tam nedali, viděli bychom pouze nečíslovaný seznam, bez odkazů. Span umístíme za každý tag <a> s předem definovanou třídou. Takhle:

<div id="wrapper">

 <menu>

  <li>
      <a href="index.html"> </a>
      <span> <a href="index.html"> Homepage </a> </span>
  </li>

  <li>
       <a href="product.html"> </a>
       <span> <a href="product.html"> Product </a> </span>
  </li>

  <li>
       <a href="sexy.html"> </a>
       <span> <a href="sexy.html"> Sexypixely </a> </span>
  </li>

  <li>
       <a href="templates.html"> </a>
       <span> <a href="templates.html"> Templates </a> </span>
  </li>

  <li>
       <a href="links.html"> </a>
       <span> <a href="links.html"> Links </a> </span>
  </li>

 </menu>

</div>

A teď to všechno pořádně osolíme, teda ostylujeme :o)

Zlehka pošimráme obecné styly a definujeme šířku a horizontální vycentrování divu #wrapper, který navigaci, nadpisy, odstavce… zkrátka celý obsah – obalí a vycentruje doprostřed stránky, ať jsme v jakémkoli rozlišení. Hvězdičkovou definicí si vynulujeme u všech prvků margin a padding, tím docílíme stejného zobrazení ve všech prohlížečích.

* {
        margin: 0;
        padding: 0;
}

body {
        text-align: center;
        font-family: sans-serif;
}

#wrapper {
        width: 770px;
        margin: 50px auto;
}

Teď nadefinujeme obecné styly pro <li> a taky ostylujeme všechny odkazy, kterým jsme dali třídu. Všimněte si dvou podstatných věcí… #wrapper menu li jsem nastavil position:rela­tive; to z důvodu, aby v každém <li> mohli být absolutně umístěny odkazy s námi přidanou třídou a později i spany, které jsou v kódu hned za nimi, budou tedy přelepeny přes sebe jako dvě nálepky, my jenom určíme z-indexem jejich pořadí na ose Z :o ). Druhá důležitá věc je právě to, že jsme všem těmto „otřídovaným“ odkazům definovali absolutní pozici a všem jsme také přiřadili stejné pozadí – navigace.png.

#wrapper menu li {
        height: 58px;
        float: left;
        list-style: none;
        position: relative;
        background: #1A1919;
}

#wrapper menu li a.home, a.product, a.sexypixely, a.templates, a.links {
        height: 58px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: url(navigace.png) no-repeat;
}

Každá položka v navigaci, kterou jsem navrhl má jinou šířku. Musíme tedy každému <li> a odkazu <a>, který je v něm, nastavit specifickou šířku.

#wrapper li.home, a.home {
        width: 155px;
}

#wrapper li.product, a.product{
        width: 158px;
}

#wrapper li.sexypixely, a.sexypixely {
        width: 166px;
}

#wrapper li.templates, a.templates {
        width: 163px;
}

#wrapper li.links, a.links {
        width: 128px;
}

Tak a teď začneme posunovat pozadí u odkazů, kterým jsme dali třídu podle názvu položky. Uděláme najednou posunutí i při hover efektu, ať to máme pěkně při sobě. Posouvání pozadí funguje na principu záporných hodnot na ose X a Y. Tady se vám budou parádně hodit ty vodítka, které jste si udělali ve vašem grafickém editoru. Snadno teď zjistíte, kolik pixelů mají na šířku jednotlivé položky. První položka – odkaz se třídou .homev našich stylech nemusí vůbec být, dal jsem ji tam jen názorně, aby jste nebyli zmateni, proč nám chybí. Pozice pozadí 0 0 je totiž auto! :o)

Při počítání posunutí pozadí vždycky přičtete k předchozí hodnotě tu, kterou jste si změřili v grafickém editoru. Vyjde vám tak místo na obrázku, od kterého se začne zobrazovat pozadí další položky. Chápete ne? :o ) Prostě 155px + 158px je přece –313px. :-)

#wrapper a.home {
        background-position: 0 0;
}

#wrapper a.home:hover{
        background-position: 0 -59px;
}

#wrapper a.product  {
        background-position: -155px 0;
}

#wrapper a.product:hover {
        background-position: -155px -59px;
}

#wrapper a.sexypixely {
        background-position: -313px 0;
}

#wrapper a.sexypixely:hover {
        background-position: -313px -59px;
}
#wrapper a.templates {
        background-position: -479px 0;
}

#wrapper a.templates:hover {
        background-position: -479px -59px;
}

#wrapper a.links {
        background-position: -643px 0;
}

#wrapper a.links:hover {
        background-position: -643px -59px;
}

Teď ještě ostylujeme <span> a chování odkazu v něm. Všimněte si, že spanu jsem taky definoval absolutní pozici a důležitou věc > z-index:0; který nám zajistí, že <span> se schová pod námi ostylovaný odkaz výše. Levý padding nám textovou variantu položek posune o 40px doprava, určitě by šlo tohle vyřešit i jinak.

Nastavíme taky chování textových odkazů uvnitř spanu. Vlastnost line-height nám pomůžeme vertikálně vycentrovat onen textový odkaz, dáme mu barvu… to samé pro hover… modrou… a nastavíme vlastnost cursor: na hodnotu pointer, tím pomůžeme Internet Exploreru pochopit to, že po něm chceme, při najetí myši zobrazit cursor ručičky :o)

#wrapper menu li span {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        padding-left: 40px;
}
#wrapper menu li span a {
        color: #FFFFFF;
        line-height: 58px;
        text-decoration: none;
}
#wrapper menu li:hover span a {
        color: #1C9FC4;
        cursor:pointer;
}

A to je ze stylování všechno milí přátelé xD. Ještě ale budeme muset něco málo přidat pro zobrazení třídy .aktivni.

Přidáme třídu .aktivni a třídy s příponou _aktivni

Třída .aktivni nám zvýrazní vybranou textovou položku v navigaci (při zobrazení bez obrázků), na které se zrovna nacházíme. Prostě zvýraznění aktuální stránky, znáte to ne? … třeba ze záložek… :o)

Budeme k tomu potřebovat přidat speciální třídy odkazům, které mají na pozadí právě to obrázkové menu, vytvoříme tak všem třídám příponu _aktivni… třídy pak budou vypadat takto >>> .home_aktivni,.sexypixely_ak­tivni a tak dále. Na každé stránce pak bude logicky jen jedna položka, která bude aktivní tudíž přidáme třídu .aktivni a příponu k odkazu _aktivni pouze té položce, která je na stránce. Pokud by šlo o dynamické menu, tak chytrým kolegům programátorům by nedělalo moc problém přidat proměnou, která by nám tam třídu .aktivní, či třídu home_aktivni atd. vložila. :oZapíšeme si to tedy do HTML.

<menu>

  <li>
      <a href="index.html"> </a>
      <span> <a href="index.html"> Homepage </a> </span>
  </li>

  <li>
       <a href="product.html"> </a>
       <span> <a href="product.html"> Product </a> </span>
  </li>

  <li>
       <a href="sexy.html"> </a>
       <span> <a href="sexy.html"> Sexypixely </a> </span>
  </li>

  <li>
       <a href="templates.html"> </a>
       <span> <a href="templates.html"> Templates </a> </span>
  </li>

  <li>
       <a href="links.html"> </a>
       <span> <a href="links.html"> Links </a> </span>
  </li>

</menu>

Přiřadíme třídě .aktivni styl, který odkazu ve spanu přiřadí modrou barvu, nic jiného na tom není.

#wrapper menu li.aktivni span a {color:#1C9FC4;}

Tyto třídy, s příponou _aktivni, budou mít úplně stejně definované vlastnosti jako ty stejné třídy bez přípony, kromě posunutí pozadí, to musí být nastaveno právě tak stejně, jako při hover efektu. Doufám, že to chápete :o ) Přidáme tedy tuto definici za hover zmiňovaných tříd .home, .sexypixely atd.

#wrapper a.home:hover, a.home_aktivni {
        background-position: 0 -59px;
}

#wrapper a.product:hover, a.product_aktivni {
        background-position: -155px -59px;
}

#wrapper a.sexypixely:hover, a.sexypixely_aktivni {
        background-position: -313px -59px;
}

#wrapper a.templates:hover, a.templates_aktivni {
        background-position: -479px -59px;
}

#wrapper a.links:hover, a.links_aktivni {
        background-position: -643px -59px;
}

Závěrečné oslavy a ohňostroj xD

Tak to by mělo být vše, neprovedl jsem tam připsání těch aktivních tříd k těm odkazům se třídou, to uvidíte až v posledním finálním přehledu celého CSS. Doufám, že jste pochopili podstatu věci. Pokud ne, podívejte se do závěrečného přehledu níže. Pokud vám to nebude ani tak jasné, zeptejte se v komentářích! Tohle je můj první vysvětlovací článek, omluvte tak jakousi nepřehlednost a neučesanost. :o)

Výsledek tady!

Závěrečný přehled:

<menu>

  <li>
      <a href="index.html"> </a>
      <span> <a href="index.html"> Homepage </a> </span>
  </li>

  <li>
       <a href="product.html"> </a>
       <span> <a href="product.html"> Product </a> </span>
  </li>

  <li>
       <a href="sexy.html"> </a>
       <span> <a href="sexy.html"> Sexypixely </a> </span>
  </li>

  <li>
       <a href="templates.html"> </a>
       <span> <a href="templates.html"> Templates </a> </span>
  </li>

  <li>
       <a href="links.html"> </a>
       <span> <a href="links.html"> Links </a> </span>
  </li>

</menu>
* {
        margin: 0;
        padding: 0;
}

body {
        text-align: center;
        font-family: sans-serif;
}

#wrapper {
        width: 770px;
        margin: 50px auto;
}

#wrapper menu li {
        height: 58px;
        float: left;
        list-style: none;
        position: relative;
        background: #1A1919;
}

#wrapper menu li a.home, a.product, a.sexypixely, a.templates,
a.links, a.home_aktivni, a.product_aktivni, a.sexypixely_aktivni,
a.templates_aktivni, a.links_aktivni {
        height: 58px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: url(navigace.png) no-repeat;
}

#wrapper menu li span {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        padding-left: 40px;
}

#wrapper menu li span a {
        color: #FFFFFF;
        line-height: 58px;
        text-decoration: none;
}

#wrapper menu li:hover span a {
        color: #1C9FC4;
        cursor:pointer;
}

#wrapper menu li.aktivni span a {color:#1C9FC4;}

#wrapper li.home, a.home, a.home_aktivni {
        width: 155px;
}

#wrapper li.product, a.product, a.product_aktivni {
        width: 158px;
}

#wrapper li.sexypixely, a.sexypixely, a.sexypixely_aktivni {
        width: 166px;
}

#wrapper li.templates, a.templates, a.templates_aktivni {
        width: 163px;
}

#wrapper li.links, a.links, a.links_aktivni {
        width: 128px;
}

#wrapper a.home {
        background-position: 0 0;
}

#wrapper a.home:hover, a.home_aktivni {
        background-position: 0 -59px;
}

#wrapper a.product  {
        background-position: -155px 0;
}

#wrapper a.product:hover, a.product_aktivni {
        background-position: -155px -59px;
}

#wrapper a.sexypixely {
        background-position: -313px 0;
}

#wrapper a.sexypixely:hover, a.sexypixely_aktivni {
        background-position: -313px -59px;
}

#wrapper a.templates {
        background-position: -479px 0;
}

#wrapper a.templates:hover, a.templates_aktivni {
        background-position: -479px -59px;
}

#wrapper a.links {
        background-position: -643px 0;
}

#wrapper a.links:hover, a.links_aktivni {
        background-position: -643px -59px;
}

Toto řešení jsem vymyslel sám, nepátral jsem, jestli něco podobného existuje… podle mě určitě ano, určitě i lepší řešení. Pokud něco takového najdete, budu rád, když hodíte do komentářů odkaz ;-).