Webdesign

Před pár dny jsem řešil blikající logo vložené jako background-image na tomto webu v MSIE, což je jedna z chyb toho browseru. Jedna varianta byla dát logo do textu přímo jako <img />, ale do toho se mi opravdu nechtělo, protože poté se horní logo o velikosti 80KB natahuje zároveň s hlavním textem, a pro uživatele s pomalým připojením to velice zdržuje. Logo definované v CSS se ovšem natáhne až poté, co je natažen hlavní text, a uživatel si již web v klidu čte.

Na to blikání mě první upozornil Flash animací a pomohl to otestovat Tomáš Hojgr (děkuji!), protože v mém MSIE nic neblikalo. Vtip „blikání“ je v tomto nastavení MSIE, kdy MSIE při každém pohybu myši nad logem toto neustále znovu a znovu tahá ze serveru, bez ohledu na cache:

Pro odstranění blikání nepomohlo ani dát background-image z tagu a na vnitřní tag span, jak navrhoval Chose.

Nakonec se schůdným a plně funkčním řešením ukázala rekonfigurace Apache serveru, a to pomocí instalace mod_expires (webhosting tojeono.cz jej na základě mé prosby instaloval vskutku bleskurychle) a aktivace ukládání obrázků do cache po dobu 30 dnů v takovémto .htaccess souboru:

# no flicker in MSIE
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

# set expires for images

	ExpiresActive On
	ExpiresDefault A2592000

Při vytváření libovolného nového designu mě vždy zarazí nějaká nová chyba MSIE, a to i ve striktním režimu MSIE 6.0. Myslel jsem si, že je už všechny dávno znám, ale tato parodie na prohlížeč mě vždy dokáže něčím novým (co dělá špatně) překvapit.

Například při této definici byl následující řádek za blockquote ujetý o 5px doprava a schovaný (a písmo bylo tudíž zcela nečitelné):

blockquote {
	border-left: 5px solid #F3E6B6;
	background: #F9F2DA;
	padding: 5px;
	margin: 10px 5px 10px 20px;
}

Řešením tedy bylo namalovat si 5px * 1px obrázek a nastavit jej jako pozadí pro MSIE, protože margin ani padding za to nemohl, chyba MSIE je v border:

* html blockquote {
	border:0 none;
	background: #F9F2DA url(blockquote.png) top left repeat-y;
}

S touto úpravou MSIE zobrazuje vše jak má, jen udělá o jeden HTTP request navíc oproti Opeře, Safari či Firefoxu.

Podobné problémy jsou i s pre, zde MSIE zjevně nerespektuje overflow:auto, a je potřeba mu natvrdo nastavit overflow:scroll, a nejlépe ještě šířku boxu, potom se třeba zde nerozpadne v MSIE layout stránky:

* html pre {
	overflow: scroll;
	width:460px;
}

Osobně se mi pro MSIE líbí jako řešení jeho chyb právě postup s * html, což je selektor který není nikdy splněn, ale MSIE jej přesto, díky další z jeho chyb, pokládá za existující. Je tak možné nadefinovat si funkční CSS styly dle norem W3C, a pro MSIE dodat jen doplňky, opravy jeho chyb.

Mimochodem, dva čtenáři mi říkali, že horní logo pod MSIE bíle bliká, nejsem schopen to nasimulovat, ale pokud Vy ano, napište mi prosím do komentářů jak máte MSIE 6.0 nastaven (nižší verze ignoruji). Nejprve si ale obnovte CSS, třeba pomocí Ctrl+R.

Po více než roce vládnutí studené modré barvy přichází na WELL.DONE nový design, který je podstatně veselejší a barvitější. Jeho zadání (skvělé grafičce) Ivaně Bednářové znělo slovy „radostně a jásavě“, a osobně si myslím, že se cíl podařilo splnit, nový design je nasycen řadou prvků, a přesto se na webu snadno a rychle orientuje.

Jak to probíhalo? Ve středu odpoledne byl vytvořen Ivanou první návrh, v noci jsme jej zpřipomínkovali, a Ivana jej bleskurychle pilovala, ve čtvrtek se na grafice nedělalo nic, měl jsem jinou práci, a v pátek jsem poměrně velice složitý návrh během 6 hodin převedl do validního XHTML 1.1 (včetně správně posílaného MIME type application/xhtml+xml, což nedělá v ČR nikdo, přestože je to požadavkem) a validního CSS 2.1.

Budu rád, když se k designu i návrhu webu v komentářích vyjádříte. Zatím není do nového designu převedena frontpage hulan.cz, ta bude následovat začátkem příštího týdne - již je převedena.

Vzhledem k množícímu se spamu, který přichází přes standardní kontaktní formulář, jsem si napsal cca 1.000 řádkovou knihovnu v PHP, která tomuto jednou provždy zamezí. Ono lze kontaktní formulář obecně zneužít k rozesílání spamu, a to velice snadno, aniž o tom autor původního skriptíku tuší.

Základem knihovny je třída CAPTCHA, a následný potomek CONTACT, které implementují veškeré akce nutné pro Captcha, tedy vygenerování Captcha klíče, jeho autorizaci, a následného poslání emailu.

Vlastní třída je velice dobře dokumentovaná přímo ve zdrojovém kódu, který si můžete stáhnout v souboru captcha.zip (36 KB), podívat se na něj online, a zde je vidět v praxi. Pokud tuto knihovnu někde použijete, budu rád, když mi pošlete email.

Vlastní použití třídy CONTACT je velice snadné, nejlépe je ilustruje následující příklad:

DefaultMessage = '[zprava]';
 $email->doFormExtras();
 $email->doMail();
?>
 
Kontakt
  
Jmeno: 
   
  
E-mail: 
   
  
Telefon: 
   
  
<?php if (isset($_POST['message'])) echo htmlspecialchars($_POST['message']); else echo $email->DefaultMessage; ?>
  

 

Uvedený skript vyžaduje pro svoji práci PHP verze 5.X, včetně podpory pro SQLite. Skripty pro PHP 4.x již nepíšu.

Vlastní CAPTCHA třídu samozřejmě můžete použít i pro jiné účely než kontaktní formulář, třída CONTACT je jen jedním z mnoha možných příkladů její implementace.

DGX zkouší jeden trik sociálního inženýrství. Nevím zda mu na to někdo skočí, ale pokud Vám není na první pohled jasné, komu skutečně patří email adresa get.password@seznam.cz, na níž máte zaslat Váš Seznam.cz email a heslo k němu (se zábavným cílem získat heslo na jiný Seznam.cz email, který Vás zajímá), poté se tomuto článku prosím vyhněte. Jediné, čeho docílíte bude, že si DGX přečte či smaže veškeré Vaše emaily.

Na rovinu, moc košer mi toto od DGX nepřipadá, nechci DGX vnucovat nekalé úmysly, ale chápat to jako špatný vtip je poměrně těžké, toto se mi opravdu vtipné nezná, protože podobné emaily a aktivity se dají klasifikovat jako trestná činnost, a místo „sociálního inženýrství“ bych je nazval podvodem na lidi, co postrádají zdravý úsudek, popřípadě jsou příliš naivní…

Není to od DGX ani nový nápad, podobná trestná činnost se praktikuje už desítky let…

Používat v URL webů www. je zastaralé a neopodstatněné. Nemá to smysl. Řada lidí si přitom myslí, že používání www. je povinné. Není tomu tak, jakákoliv URL adresa zadaná do prohlížeče mlčky předpokládá http:// protokol (což je vlastní World Wide Web) a port 80. Specifikovat u toho navíc www. je zcela zbytečné, klidně si totiž na www.hulan.cz mohu provozovat FTP server na portu 21, ono www. v URL neznamená vůbec nic.

Některé technické weby to již dávno pochopily, například takový Interval.cz či hulan.cz. Je pravda, že Vilém Málek v tomto byl ještě před rokem dokonce mimořádně konzervativní, takže pokud jste do prohlížeče zadali adresu www.interval.cz, objevila se hláška, že daný server neexistuje. Dnes to již řeší stejně jako já, tedy dotazy na www.doména.cz přesměruje na doména.cz, což je asi ideální stav.

Druhý opak mimořádně špatně zvládnuté domény je PCTuning.cz, pokud nezadáte zcela zbytečnou předponu www., zobrazí se Vám tato hláška:

Bad Request (Invalid Hostname)

Většina webů není naštěstí dělána až takto nesmyslně (vzhledem ke svým klientům), nicméně, do dokonalosti mají daleko, protože u nich fungují obě domény, tedy jak www.doména.cz, tak doména.cz. A to je problém, protože to jsou dvě různé věci i pro vyhledávače, a zbytečně si tím snižují svůj Page Rank.

Přitom stačí vytvořit následující .htaccess soubor, a vše je vyřešeno:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.domain\.com$ [NC]
RewriteRule ^(.*)$ http://domain.com/$1 [R=301,L]

Na kolaps Firefoxe 1.0.6 stačí stránka s velikostí 16 bajtů, třeba po kliknutí na tento odkaz Vám spadne Firefox:

<A HREF= >

Update: podle komentářů stačí na kolaps Opery tento kód (display: table-cell pro label).

Macromedia je společnost známá svými vynikajícími a inovativními produkty pro potřeby webdesignu, ať už je to Flash, Dreamweaver, Fireworks či Freehand. Její současná produktová řada je dosud v podstatě bez konkurence, přestože je již 2 roky stará.

Příští týden se bude v Kongresovém centru (Praha 4) konat prezentace nové řady produktů Studio 8, pokud se jí chcete rovněž zúčastnit, můžete se zdarma zaregistrovat.

Zajímavé nebudou jen nové technologie, ale pro mě osobně i ceny Studia 8, dosavadní Studio MX 2004 bylo totiž prodáváno za velice rozumné ceny. Nicméně Macromedia byla odkoupena společností Adobe, která je naopak známá extrémně předraženými produkty. Nechme se tedy překvapit.

Osobně jsem se na prezentaci registroval, a to nejen proto, že mám kancelář ve stejné budově, co se bude prezentace konat 🙂

Amatéři z Centrum.cz hrubě nezvládají přenos pro pár stovek lidí (ne že bych si chtěl něco kupovat, jen mě to zaujalo):

Podíl Firefoxu se konečně zase mírně zmenšuje ve prospěch MSIE 6.0 a Opery 8.0. Na vině je samozřejmě fakt, že poté, co si jej řada uživatelů vyzkoušela, a objevila svých prvních 100 chyb v něm, jako je třeba zabírání 360MB RAM při 4 otevřených tabech, jeho extrémní pomalost, a špatnou cache, zase jej smazala.

Jak je na případu Firefoxu vidět, pokud je produkt špatný, ani bombastická reklama či virální marketing nepomáhá. Svoji daň si zjevně vybírá i řada objevených bezpečnostních chyb v tomto open-source produktu.