phpFashion

Na navigaci | Klávesové zkratky

Rubrika Web

Čas optimalizovat pro zdravý rozum

Odborníci na webdesign nejsou schopni elementární logické úvahy. A to jaksi celosvětově.

Martin Snížek píše o optimalizaci pro rozlišení 1024×768. Že podle průzkumů přestává mít smysl brát ohled na rozlišení 800×600. Takové průzkumy jsou dobré leda do výročních zpráv výrobců monitorů. S webdesignem nesouvisí.

Webdesignéra absolutně nezajímá rozlišení monitoru. Hlavní panel dole, proměnlivá velikost okna prohlížeče, tloušťka jeho rámečku, záhlaví, menu, další pomocné lišty, posuvníky, případně záložky – to všechno zabírá na monitoru místo. Ale ze statistiky rozlišení nevíme jaké. Webdesignéra proto zajímají rozměry plochy, která zbývá pro webovou stránku (tzv. viewport). Nic jiného.

Zdá se vám to samozřejmé? Mně taky. Proč se ale neustále vyvozují závěry ze statistik rozlišení monitorů, namísto viewportů? Že by za tím byla touha si potvrdit, že lze weby dělat širší? I když to není pravda?

Měření vše prozradí

Při návrhu webů se držím rozměrů 770×420 pixelů. Jak jsem k těmto číslům přišel? Je to čistě odhad. Rád bych vycházel z odborných studií, jenže ony neexistují.

Kdysi viewport měřil Yuhů. Jeho výsledky prozrazují, že cca 30% uživatelů s rozlišením monitoru 1024×768 má viewport užší než 991px. Tedy nemá maximalizované okno, nebo používá nějakou postranní lištu.

Ale pozor, čísla se mohou výrazně lišit dle zaměření webu. Odhaduji, že u technických blogů bude viewport ještě menší, protože je lidé často čtou přes RSS čtečky. Naopak u netechnických blogů bych čtečky tolik nepředpokládal, nicméně situace se může změnit s masovým nástupem Internet Explorer 7.

Jak viewport změřit? Google Analytics vám nepomůže, jeho tvůrci holt nejsou schopni té zmíněné elementární logické úvahy. Umí to ve svém placeném tarifu Navrcholu.cz, ale výsledky promítá do intervalů s nepříjemně velkým rozpětím. Proto doporučuji vytvořit si vlastní měřící bod, nebo upravit kód pro Analytics.

Související:

Proč mít validní web

Zdá se, že Timy na to kápl:

Nakonec mít stránky validní je dobrá obrana proti bláznům, kteří projíždějí validátorem všechny stránky a rozzuří se pokaždé, když narazí na nějakou nevalidní konstrukci a mají tendenci to sdělit autorovi webu ;-).

A já si říkám, jestli třeba už nenastala ta doba, kdy bych sem mohl pustit sérii článků o tom, proč není XHTML žádná výhra, kde všude udělali autoři XML chybu a podobně. Jestli bych nebyl ukamenován. Nebo zaživa sněden. Bez chleba!

The magic with conditional comments

This articles is actually an answer to e-mail by Honza Bien, who was asking me about the manipulations I was doing with conditional coments. Say, generally accepted idea is, that one kind of a comments (downlevel-hidden) is valid and the other (downlevel-revealed) is not. I tried to adapt those invalid comments the way that they would be valid. I'll explain the whole sequence.

…pokračování

před 17 lety v rubrice Web

Kouzlo s podmíněným komentářem

Tento článkem je vlastně odpovědí na e-mail Honzy Biena, který se ptal na čachry, které jsem tuhle prováděl s podmíněnými komentáři. Totiž, obecně panuje představa, že jeden druh komentářů (downlevel-hidden) je validní a druhý (downlevel-revealed) nikoliv. A já se právě pokusil ty nevalidní upravit tak, aby validní byly. ;)

Nejprve se podívejme na oficiální dokumentaci (nebo článek v češtině).

Máme tu tzv. „downlevel-hidden“ nebo chcete-li „skrývající“ komentář:

<!--[if IE 5]>
Tohle vidí jen IE verze 5
<![endif]-->

A také „downlevel-revealed“ aneb „odhalující“ komentář:

<![if !IE 5]>
Tohle vidí všichni kromě IE verze 5
<![endif]>

Nenechte se zmást tím, co se nachází mezi hranatýma závorkama, a zobecněme, že pro otevření komentáře existují dva oficiální zápisy <!--[if ???]> a <![if ???]>, a dále pro uzavření opět dva <![endif]--> a <![endif]>. To je důležitý výchozí bod.

Tedy ten podmíněný komentář s negací lze bezpochyby zapsat i takto:

<!--[if !IE]>
Tohle vidí všichni kromě IE
<![endif]-->

Perfektní službu nám nyní prokazuje zvýrazňovač syntaxe FSHL, díky kterému jasně vidíme zádrhel zmíněného zápisu. Totiž větu „Tohle vidí všichni kromě IE“ sice ostatní prohlížeče vidí, ale bohužel jako součást velkého komentáře. Což je nám vcelku houby platné, že?

Dobře, proč tedy ten načatý komentář nepřerušit?

<!--[if !IE]>
komentář --> tohle už ne <!-- opět komentář
<![endif]-->

Odsud už je jen krůček k optimalizaci:

<!--[if !IE]> -->
Tohle vidí všichni kromě IE
<!-- <![endif]-->

Jak prozrazuje FSHL, syntaxi jsme učinili za dost a výsledkem je plně validní a funkční podmíněný komentář, kterým lze vložit kód, jenž IE nevidí, ať se snaží sebevíc.

Můžete si to vyzkoušet.

Děkuji za pozornost.

Jak správně vložit Flash do stránky

Ač je Flash nejrozšířenějším aktivním prvkem webových stránek, mnoho webdesignérů neví, jak jej správně do stránky vložit. Výchozí způsob, které propaguje Macromedia, je totiž naprosto nepoužitelný.

Připomeňme si jej:

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  width="550" height="400">
  ...
  <param name="movie" value="movie.swf" />
  <param name="quality" value="high" />
  ...
  <embed src="movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
	type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/go/getflashplayer">
  </embed>
</object>

Atributy elementu <object> jsou podřízeny potřebám Internet Exploreru a v jiných prohlížečích Flash nezobrazí. Což zachraňuje element <embed>, který však není součástí HTML ani XHTML. Kód je tedy nevalidní, plný proprietárních obezliček.

V čem vidím největší problém, tak že nelze vytvořit alternativní obsah, jenž bude zobrazen uživatelům, kteří Flash nemají (cca 10 %).

…pokračování

Dean Edwards a jeho IE7

Geniální udělátko o kterém se u nás kupodivu moc neví. Některým webdesignérům prý natolik usnadnilo život, že začali fetovat a krást, aby zase nějaké problémy měli. Takže opatrně s tím!

Už to budou dva roky, co Dean Edwards začal psát záplatu pro Internet Explorer, která umožní webdesignerům používat pokročilé CSS vlastnosti. A nejen je. Nazval ji vyloženě nešťastně IE7, nejspíš nevěřil ve vznik další verze Microsoftího prohlížeče.

…pokračování

Color mixer aneb míchátko

Právě jsem vytvořil dvě jednoduchá míchátka barev. Jsou určena pro uživatele webových aplikací (nikoliv webdesignéry, jako třeba Pixyho generátor schémat). Slouží tedy k interaktivní volbě barvy. Dávám je volně k dispozici pod licencí GPL.

Download ColorMixer Michatko:

Míchátka používají několik fikaných kouzel pro manipulaci s barvami. Díky nim jsem v DHTML dosáhl podobné funkčnosti, jaká je známá spíše z desktopových aplikací. Tedy nechci se tu naparovat, jen že jsem nic podobného na webu zatím neviděl.

Míchátko s barevným proužkem

Připomíná „Color Picker“ z Adobe Photoshopu. Funguje pod IE 6, Mozillou a Operou (ostatní prohlížeče jsem neměl možnost ověřit, můžete zkusit sami a poslat report). (odkaz)

(aktualizováno: s míchátkem na stejném principu přišel už o měsíc dříve Dalton Lloyd, patří mi tedy krásné druhenství)

Míchátko s barevným prstencem

Ovšem tady si snad prvenství obhájím. Co ty na to, Daltone?

Implementace

Pro implementaci stačí nalinkovat do stránky příslušný CSS a JS soubor (viz jednotlivé příklady) a poté vytvořit a nakonfigurovat objekt mixéru.

<link rel="stylesheet" type="text/css"
   href="dgxcolormixer.css" />

<script type="text/javascript"
   src="dgxcolormixer.js"></script>

<script type="text/javascript">

// definujeme obsluhu událostí
function myChangeColorHandler(mixer) { ... }
function myConfirmHandler(mixer) { ... }

// vytvoříme objekt
var mixer = new DGXColorMixer();

// nastavíme handlery
// pro změnu barvy
mixer.onChange = myChangeColorHandler;
// pro povrzení změny
mixer.onConfirm = myConfirmHandler;

// barva
mixer.setColor('FF0030');
// nebo
mixer.setColor(new RGBColor(10, 20, 30));
// nebo
mixer.setColor(new HSVColor(280, 100, 50));

// případně včlenit do existujícího elementu
mixer.setParent('main1');
// nebo
el = document.getElementById('main1');
mixer.setParent(el);

// dosud je mixér skrytý, tak jej zobrazíme
mixer.show();

</script>

Mixér lze propojit s editačním políčkem input a také nastavit, zda bude fungovat jako vyskakovací okénko (automaticky se umístí hned vedle editačního políčka). Tady se můžete podívat na příklad.

// create mixer
mixer = new DGXColorMixer();

// propoj s prvkem s id 'color1'
// druhý parametr nastavuje popup režim
mixer.attachInput('color1', true);

Ovládání přes URL

V URL můžete zadat barvu. Pro RGB lze použít tří nebo šestiznakový HEX formát, dekadický zápis nebo dokonce slovní označení:

Podporován je též HSV (HSB) vstup, kde Hue je v rozsahu 0..360 a Saturation + Brightness v rozsahu 0..100

Statistika používání HTML značek

Která značka je nejpoužívanější? Je více formulářů POST nebo GET? A jak vypadá běžná událost onclick?

Pracuji na projektu, kvůli kterému jsem si vytvořil statistiku používání HTML značek, jejich atributů a hodnot. Výsledky jsou celkem zajímavé, takže se s vámi o ně podělím. Topten nejpoužívanějších značek vypadá následovně:

Jak v tabulce číst? V prvním řádku vidíme, že 18% značek v průměrném dokumentu představuje kotva <a>. Celých 99% kotev má uveden atribut href, 22% atribut title atd. Druhá nejpoužívanější značka je <td>, na obrázku vidíme i přehled nejčastějších hodnot atributu class (zobrazí se v moderních browserech po najetí myšky na buňku tabulky).

Dlouho jsem přemýšlel, jak pro měření získat objektivní vzorek dat. Nakonec jsem analyzoval prvních deset odkazů, které vrací Jyxo pro každé slovo z Top 1000. Po promazání atypických souborů vznikl různorodý vzorek cca 10.000 stránek. Pro zajímavost jsem vytvořil druhou statistiku, která zahrnuje titulní stránky všech webů umístěných v galerii CSS Vault (bohužel vzorek je docela malý).

Tady jsou:

Co lze vyčíst

Zajímavé je zejména srovnání obou tabulek. Rozdíly v popularitě značek asi neprozradí nic překvapivého, ale velmi krásně demonstrují odlišnost zastaralého a moderního pojetí webdesignu. Co dále… všimněte si, že obvyklé šířky tabulek jsou kolem 98% (jestlipak víte proč?). Kódování windows-1250 je cca 4× častější, než iso-8859–2. Velká spousta webů chybně uvádí kód jazyka ‚cz‘ namísto správného ‚cs‘. Perličkou je, že tučné písmo rádi barvíme do tmavě modré či červené.

A tak bych mohl pokračovat. Najdete-li sami něco zajímavého, můžete se zmínit v komentářích.

phpFashion © 2004, 2023 David Grudl | o blogu

Ukázky zdrojových kódů smíte používat s uvedením autora a URL tohoto webu bez dalších omezení.