MyEgo.cz - Radek Hulán webzine

MyEgo.cz

home foto blogy mywindows.cz kontakt

Grafik, programátor, kodér - takové je jejich pořadí!

Technologie 08.04.2004
design 1

Magambi píše zajímavý článek o Dinosaurech v českém webdesignu. Úsměvné, zajímavé, a vcelku i pravdivé.

Podle mého názoru je je nejdůležitější grafik! Třeba tento web. Čím Vás zaujme? Má XHTML 1.0 Strict validní kód? Nevím. Validitu jsem nekontroloval. A nebudu. Je mi to jedno. Validita je zatím jen profesionální čest začínajících a menších firem, než praktická nutnost reálného života. Dinosauři na ni pragmaticky kašlou!

Ten zmíněný web Vás zaujme. Tím, že má (aspoň mírný) nápad! Tím, že to není jen pár obarvených obdélníků, ale je tam, aspoň nějaká, grafika. A je Vám naprosto jedno, jaké má nitro. I proto mohou dinosauři dnes tak dobře prodávat. Klient nitru webu nerozumí. A dinosaurus sází na to, že ONI se zajímají hlavně o vnější slupku. A má pravdu.

To, že se špatně vnitřně navržený web objeví až na tisícím místě vyhledávače, popřípadě, že se nezobrazí v alternativních prohlížečích, to je klientovi z velké části jedno.

Access keys v prohlížečích

Technologie 06.04.2004

Ovládám browser zejména klávesnicí, plus gesty myší, je to ta nejrychlejší volba. Před pár dny jsem psal o efektivním používání Opery pomocí klávesnice. A následně mi začalo chybět ovládání mého webu klávesovými zkratkami. Proto jsem je doplnil!

Jak se klávesové zkratky používají? No, záleží, jaký máte browser…

  • Mozilla + Firefox: Alt+písmeno, Mozilla i Firefox po stisknutí této kombinace přímo přejdou na daný link a vykonají jej.
  • Opera: nejdříve musíte aktivovat klávesové zkratky kombinací Shift+Esc, a potom již stačí stisknout jen písmeno, tedy třeba [a] pro archívy. Nicméně, pokud Vám toto nevyhovuje, předefinujte si v Opeře klávesové zkratky jak potřebujete…
  • Internet Explorer: Alt+písmeno vybere danou položku, a potom Enter na ni konečně přejde.

Přístupná navigace webu pomocí JavaScriptu!

Technologie 05.04.2004
navigace

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í

CSS Drop Shadows - stíny u obrázků v CSS jednoduše!

Technologie 04.04.2004
ilustrace

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.

How to install Apache, PHP 4, and MySQL under Windows?

PHP 04.04.2004
windows

This article aims to provide a full reference for installing and configuring Apache 2 web-server, with mod_rewrite, PHP 4.3.5 scripting language, iconv PHP extension, and MySQL 4 database under Windows. PHP 4 will can be installed / configured as Apache 2 module or CGI script, but installing it as a module is a recommended approach. This "How To Manual" was fully tested under Windows XP SP1, but shall work with any Windows version.

First, you will need to download following files:

  • binary form of Apache 2.0.49 (file apache_2.0.49-win32-x86-no_ssl.msi).
  • PHP 4.3.5, I also recommend to download a PHP manual (in .chm file format).
  • MySQL 4.0/4.1, including its manual and documentation.
  • I also recommend to download from mysql.com utility called MySQL Control Center (current version 0.9.3), which is more comfortable to use than phpMyAdmin (which your web-hosting probably provides).

Download binary form of all files from links provided.

If you do not want to configure anything, especially httpd.conf a php.ini, you can download a prepared configuration of all these files ;) Everything will work immediately, just unpack and copy over you existing files.

Klávesové zkratky pro efektivní práci s Operou

Technologie 03.04.2004

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.

Tutorial pokročilého CSS; Stylemaster - lepší než TopStyle

Technologie 01.04.2004

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.

April Fool Poem

Small April sobbed I'm going to cry
Please give me a cloud to wipe my eye
Then April Fool she laughed instead
And smiled a rainbow overhead.

Nebo taky jinak:

"The first of April
is the day we remember
what we are the other 364 days of the year."
~By Mark Twain~

Search Engines - lepší servis pro Vaše čtenáře

Technologie 31.03.2004

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>

Fantastický Web-Developer-Toolbar pro Operu

Technologie 31.03.2004

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 :)