Technologie » MyEgo.cz - Radek Hulán webzine

Za pomoci JavaScriptu je možno navrhnout dynamickou navigaci na webu, která je jak jednoduchá na vytvoření, tak přínosná pro čtenáře (například zvýrazněná aktivní položka menu), protože web jej nezahlcuje množstvím nevyžádaných informací (přitom si ovšem, pokud chce, dané informace rychle zobrazí). Kód je pochopitelně funkční v IE, Mozille i Opeře.

V případě, že je JavaScript vypnutý, jsou zobrazeny všechny položky, "rozbalené". Pokud je JavaScript povolen, je zobrazeno menu se zvýrazněnou aktivní položkou, a pouze daný, zvolený, blok textu, náležející k danému menu. Ostatní bloky jsou za pomoci display:none skryty. V tomto příkladu je použita jen jedna úroveň menu, není ovšem problém vytvářet i sub-menu.

Jak to funguje, pokud by jste si chtěli tento skript zařadit i na svoje stránky? Základem je funkce switchCells(), která jako parametr dostává:

• currentitem - číslo divu a nadpisu h2, který má být aktuálně viditelný
• itemtext - text v id divu
• totalitems - celkový počet divů, prvků, které se přepínají, v daném bloku

S touto funkcí tak můžete přepínat neomezené množství bloků, u mě je to konkrétně:

• statistika článků
• statistika komentářů
• blogroll
• lokální a google hledání

Stíny pod písmem, obrázkem, či citací jsou, a vždy budou, designérsky nesmíně populární. Je to technika jak plochý prostor webových stránek oživit. Tento článek Vám ukáže jak na stíny jen v CSS, aniž by jste museli měnit (X)HTML kód!

1976design.com je blog, který přichází s mnoha zajímavými technikami ohledně využití CSS. Zatímco někteří dělají stíny pod obrázkem pomocí 6 vnořených divů, každý s marginem +1px, , Dunstan navhl řešení mnohem lepší, které, navíc, umožní jen změnit CSS soubor a Vaše obrázky není nutné obalovat 6 divy či sázet je do poziciovaných tabulek.

Je to velice pěkné a čisté řešení, jedná se pouze o změnu CSS a není nutné doplňovat nic do kódu Vašich článků!

Řešení 1976design.com, spočívá ve vytvoření pozadí s background obrázkem, obrázek má velikost cca 3.5kB, při velikosti 800x800px, což postačí na veškeré běžné ilustrace (prakticky nikdy nemají větší rozměry). Obrázek je definován jako background-image v CSS, natáhne se tudíž jednou do cache prohlížeče, a pak je použit na každou ilustraci.

Interface:

• Ctrl+B: zobrazí klávesové zkratky.

Okna:

• pravým tlačítkem myši na odkaz + dolů: otevře odkaz v novém aktivním okně.
• pravým tlačítkem myši na odkaz + dolů + nahoru: otevře odkaz v novém okně na pozadí.
• pravé tlačítko myši + pohyb dolů: nové okno.
• Ctrl+N: nové okno.
• Ctrl+Alt+Shift+N: duplikát stávajícího okna.
• Ctrl-Tab: přepínání mezi okny!
• pravé tlačítko myši + nahoru + dolů: refresh stránky.
• Ctrl+R: refresh stránky.
• Ctrl+Shift+klik: otevře odkaz v novém okně na pozadí.
• pravé tlačítko myši + dolů + doprava: zavření aktuálního okna.
• Ctrl+W: zavření aktuálního okna.

Na css.maxdesign je volně dostupný velice povedený pokročilý tutorial CSS, jsou zde vysvětleny velmi názorně veškeré CSS selektory a jejich použití. Doporučuji!

Taky jsem začal používat Style Master 3.5, povedený program, lepší než TopStyle Pro, umožňuje vizuální tvorbu a návrh CSS souborů, s tím, že vytváří dynamické preview, a to i pro pokročilé selektory, umí také velice dobře pracovat s barvami a ladit v něm barevné palety je... zábava.

Stále zvyšující se počet návštěvnosti na mém blogu tvoří search engines, s tím, jak se zvyšuje počet článků, a to zejména google.com, seznam.cz a jyxo.cz.

Nicméně, jak zjišťuji z logů, občas google, seznam, či jyxo zalinkuje přímo titulní stránku blogu, tedy myego.cz. A zde je problém, čtenář totiž nehledá, typicky, titulní stránku blogu, ale něco jiného, nicméně, search engine jej poslal na titulku, protože tam, před nějakým časem, ten článek byl...

Řešení? Využít header("Location: $url");, kde parametrem URL bude ?query=hledana+slova. Čtenář, který přijde na titulku ze search engine, je tedy automaticky přesměrován na hledání těch samých slov na mém blogu.

Chcete si to vyzkoušet? Zkuste na google.com vyhledat slovo "občasný" a klikněte na první link. Ocitnete se nikoliv na myego.cz, ale na myego.cz/?query=občasný ! Přitom hledaná slova jsou kódována v UTF-8, blog v ISO-8859-2... ;)

PS: přesměrování záměrně nefunguje pro slova "hulan", "hulan.info" nebo "o'blog". Pokud někdo hledá tato slova, předpokládám, že jej zajímá právě titulní stránka blogu ;)

Již dříve jsem implementoval to, že pokud hledáte třeba "Jak na Apache", přivítá Vás na mém blogu hláška, ze kterého search engine jdete, a, navíc, hledaná slova na google, seznam, či jyxo, se přes ereg_replace zvýrazní za pomocí <span class='highhlight'>...</span>

• Hledej na jyxo.cz.
• Hledej na seznam.cz.
• Hledej na google.com.

NonTroppo zvěřejnil nový WebDeveloperToolbar, pro Operu, je to řádově lepší věc než obdobný toolbar dostupný pro Mozillu. Instalaci provedete jednoduše kliknutím na The Web Dev Toolbar a The Web Dev Menu. Screenshot?

Hlavní části toolbaru:

• změna velikosti okna
• emulace PDA
• form info, page info
• práce s obrázky
• validace, emulace textového browseru
• odkazy na web-standardy od HTML 2.0 po XHTML 2.0, Apache, PHP, CSS, a mnohé další
• autorský versus uživatelský mód stránky
• unicode entity
• zobrazování URI odkazu pod myší v adresním řádku

a mnohé další.... Naprosto nezbytné pro veškeré web-designéry :)

LiteStep je prostředí pro Windows 2k/XP, které funguje jako kompletní náhrada shellu explorer.exe. Na rozdíl od zbytečností typu StyleXP či WindowBlinds má LiteStep zcela jiný cíl, a to sice přinést do OS Windows nové UI, které se podobá prostředí AfterStep, Motif, a další, a které není jen "obalem" exploreru, ale jeho kompletní náhradou. A daří se mu to!

Výhody LiteStepu:

• minimální nároky na pamět, oceníte to, i když Váš počítač má gigabajt RAM a běží v něm nejrychlejší Athlon či Pentium-IV.
• menu a správce souborů ala Motif.
• totální konfigurovatelnost přes *.rc soubory.
• neomezeně konfigurovatelné "horké klávesy", včetně kombinace Win+něco.
• neustávající vývoj.
• překvapující stabilitu.
• virtuální desktopy.
• podporu DLL extensions pro rozšíření možností.
• instalační balíčky témat, které si hlídají verze extensions, a umožňují je natahovat v reálném čase v potřebné (otestované) verzi.
• update a auto-update.

Screenshot LiteStepu na mém počítači (140kb).

Pokud by se Vám LiteStep nelíbil (není to pravděpodobné, ale přesto), v menu zvolte LiteStep :: Utilities :: SetShell - tato volba provede náhradu LiteStepu v registrech opět za Explorer.exe.

Většina webů má titulku kolem desítek až stovek kilobajtů. To je moc. Moje titulka má jen 10kb (mluvím tu o textu, ne o obrázcích a CSS, ty jsou v cache prohlížeče; naprostá většina čtenářů je stálých, mají tedy vše co jde v cache), titulka Yuhůa 24kb, Pixyho 33kb, a to já mám, na rozdíl od nich, na titulce i řadu statistik článků, statistik komentářů, blogroll 6 webů a další věci. Oni tam mají jen články a nic jiného. Přesto mám titulku 3x menší, při více informacích...

Doplnění:

Někteří lidé argumentují, že mít články na titulce celé je... dobré. No, podle mě je to hrubá demagogie. Vydávat neexistující, chybějící funkci nějakého jiného systému než Nucleus vlastně za výhodu, je... podivné. Já taky mohu mít články celé na titulce. Nicméně, když mám rozsáhlý článek, co má 50kB, mám jej mít celý na titulce? To je hloupost! Od toho existuje kliknutí na nadpis, či na "pokračování článku"..

Rovněž, když jsou rozsáhlé články celé na titulce, a přechází se jen přes anchor, blbě se v tom vyzná, titulka je 30 "obrazovek" dlouhá, a pro lidi, co čtou blog denně, což je většina čtenářů, se u mě načítá 10kb, a jinde 20-100kb... To je jasná a objektivní výhoda pro stálé čtenáře.

Musím odkázat na spot Yuhůa, s nímž nelze nesouhlasit, a především na jeho mimořádně zajímavý anglický zdroj (Jason Fried).

Potom, co jsem já psal o přeceňování formy (CSS) v článku "černá nebo bílá, nic mezi tím", a dočkal se pár flames od lidí, co ani nemají svůj web (kvůli mé bystré a pokrokové úvaze o tom, že CSS je pouze nástroj, ale někteří lidé jej spolu s validitou používají jako výmluvu pro jejich totálně nudné a neužitečné weby, které jsou dobré jen v té validitě), tak, Yuhů přichází s podobnou myšlenkou.

Cituji (v překladu Yuhůa):

Máme tady trend příliš mnoho hovořit o CSS a o XHTML a o standardech a o přístupnosti, ale nemluvíme dostatečně o lidech. CSS a kód psaný podle standardů jsou pouze nástroje -- musíte ale vědět, co s těmito nástroji chcete postavit. Fajn, mám radost, že vaše uživatelské rozhraní nepoužívá tabulky. Ale co z toho? Koho to zajímá, když lidé stále nemohou dosáhnout svých cílů?

A v anglickém originále:

There's way too much talk about CSS and XHTML and Standards and Accessibility and not enough talk about people. CSS and Standards Compliant Code are just tools -- you have to know what to build with these tools. Great, I'm glad your UI doesn't use tables. So what? Who cares if it still doesn't let people achieve their goals. Web standards are great, but people's own standards include getting things done (and that's still too hard to do online).

K této noční úvaze mě přivedl, tak trošku, Yuhů. V jednom předchozím emailu krátce poukazoval na (ne)smysl validity. Yuhů má v určitém smyslu pravdu. Zkusím to v tomto článku rozvést, v čem je validita, v dnešní době, nesmírně přeceňována.

Doplnění: Webdesign jde špatným směrem!.

Dnešní pohled mnoha lidí na web je buď černý nebo bílý. Nic mezi tím. Ten bílý, nový pohled, říká, že jen CSS je dobré. Ten druhý názor, černý, oponuje, že i tabulky jsou dobré, a validita je prakticky k ničemu.

Skutečnost je ale taková, že ať už černá či bílá, ti lidé jsou.. naprosto mimo. Přesto se dnes a denně, na mnoha (inter)fórech, setkávám s naprostým odsouzením lidí, co jsou černí. Proboha proč??

Nevládne tu totiž ani černá, ani bílá (jo, i uctívaný Pixyho blog je příkladem "profesionálně nudného" webu a ryze vyhraněného bílého postoje... web třeba Yuhůa, taky sice formou nudný, je mi ale, subjektivně, mnohem sympatičtější v tom, že si na "něco nehraje", na (jakousi) "dokonalost", je zaměřen na praktičnost poskytování informací...). Jsou tu i lidi, co mají rádi červenou, žlutou a zelenou barvu. Jak to souvisí s webem? No, dost... Spousta mladíků se v poslední době shlédla v CSS, a jakkoliv navržený web je pro ně dobrý pouze tehdy, je-li kompletně bílý, tedy pokud je celý layout dělaný v CSS, barvy a obrázky rovněž, a je to celé navíc validní minimálně XHTML 1.0 STRICT.

Spousta mladíků začala dělat web složený s poskládaných čtverečků a obdélníků, s obarveným pozadím, a s případně tečkovanou (dotted) linkou kolem. Někteří si dokonce, vrchol kreativity, namalovali obrázek, tečkovaný, aby to vypadalo stejně i v Internet Exploreru.

Nicméně, jaký je rozdíl tohoto pojetí, oproti 3-4 roky starší, obrázkové mapě, velké záplavě barev, a spousty použitých stylů a fontů? Proč je, tato, bílá forma, pro řadu lidí ta jediná přijatelná? No, jediný skutečný důvod je, že ...ono je to módní...

A pozor, o módě se nedá říci, že je dobrá či špatná, je prostě jen odrazem své doby. Móda pomine!

Vždyť, ono nejde o formu, ono jde o to, jak se web prezentuje klientům. Jak vypadá zvenku. Jaké nabízí služby. Jaké nabízí informace. Na "střeva" nikdo normální nekouká.

A dnešní záplava nudných designů ve stylu levý sloupec (div) s menu, pravý sloupce (div) další informace, prostřední sloupec (div) hlavní, okolo (div) na matrjošku, nahoře nějaká hlavička a logo, dole patička a tiráž, je pořád stejně nudná. Jen pár webů je skutečně skvělých, inovativních. Jen pár webů má myšlenku.