Webdesign, CMS » MyEgo.cz - Radek Hulán webzine

Narazil jsem na velice zajímavý javascriptový XHTML 1.0 WYSIWYG editor, který funguje nejenom v obligátním MSIE a Firefoxu, ale nově také v Opeře 9.0 TP1 a Safari (to je to Applem ukradené KHTML). Je to TinyMCE (via Luca Lani, my friend from Italy), stabilitou se sice zatím nevyrovná FCKEditor.net, ale je to velice zajímavý počin.

Můžete se podívat i na online demo.

TinyMCE pod Operou 9.0 TP1

V pátek byla vydána Opera 9.0 TP1 (Technology Preview 1). Nepsal jsem o tom dříve, protože jsem ji poslední 2 dny testoval, a vzhledem k naprosté stabilitě ji mohu vřele doporučit všem uživatelům. Opera je nejlepší a nejbezpečnější internetový browser na světě, je také bezkonkurenčně nejrychlejší, obsahuje největší množství funkcí, je naprosto stabilní, a je zdarma pro soukromé i komerční použití. Prostě ideál krásy.

Download pro špičkové Windows, vynikající Linux a podivíny s Masoxem.

Zajímavé ovšem je, jak rapidně se leader trhu, tedy Opera 9.0, dále rozvíjí, zatímco open-source kopírák Firefox se potácí na místě a nenabízí žádné nové funkce.

O kvalitě browseru svědčí nejen jeho rychlost a funkce, ale i jeho jádro, porovnejte si například Acid2 test:

Opera 9.0 TP1	Firefox 1.0.7

Opera nemá konkurenci. A je dobře, že díky zaostalému Firefoxu je dnes Opera zdarma pro všechny, nikoliv za €39 jako před půl rokem :-) Když dnes u někoho pracuji na počítači, už se nemusím trápit s pomalým a nic neumějícím Firefoxem, prostě tam nainstaluji z 3.5MB souboru vynikající Operu.

Pro instalaci Opery se Vám bude hodit:

• Dokonalá konfigurace Opery 8
• Opera 8.0 - další užitečné tipy
• Klávesové zkratky Opery

Když jsem včera zveřejnil návod na odstranění problikávání obrázků v MSIE, neuvědomil jsem si, že originální postup má jednu závažnou vadu. Podívejte se na to znovu:

ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

Problém je v tom, že vše bude cachováno po dobu 18.000 sekund, tedy 5 hodin. A to pro rychle měnící se weby rozhodně není košer. Možnosti jsou dvě, buď snížit ExpiresDefault z 5 hodin na třeba 1 minutu, popřípadě mod_expires zapnout v .htaccess jen pro potřebné věci, tedy obrázky, a případně CSS a JavaScript.

V tomto druhém případě jsem nastavil cache pro obrázky na 1 měsíc a CSS a JavaScript na 6 měsíců, zbytek není cacheován (respektive, je to ponecháno na nastavení browseru):

# set expires for images

	ExpiresActive On
	ExpiresDefault A2592000


# set expires for CSS and JavaScript

	ExpiresActive On
	ExpiresDefault A15552000


# do not steal images
SetEnvIfNoCase Referer "^http://hulan\.cz/" local_ref=1

	Order Allow,Deny
	Allow from env=local_ref

Toto řešení bude, na rozdíl od originálního, fungovat přesně tak, jak potřebujeme. Ve skriptu je doplněna i ochrana proti „kradení obrázků“ (linkování z cizích webů).

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.

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