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í:
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!
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í
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.
Although flash is the most spread active element of webpages, a
lot of designers still don't know the correct way to insert it into HTML
document.. The standard concept, advertised by Macromedia is absolutely
unusable.
…pokračování
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í
Updated December 11, 2007: I’m happy to say that Microsoft has now
licensed the technologies from Eolas Technologies and removing the “click to
activate” requirement in Internet Explorer. Read Knowledge Base
945007.
Recently, I wrote that soon it
will be necessary to click on every Flash application in Internet Explorer in
order to activate it. It looks like this:
…pokračování
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í
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
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.