Skok na obsah [accesskey=1] | Skok na navigaci [accesskey=2]
Autor: Vít Dlouhý, čas: 21:13, Komentáře , Trvalý odkaz
Narozdíl od strohých a jednotvárných článků, působí tato 33 stránková prezentace opravdu poutavě. Jednotlivé kapitolky jsou krátké, čtivé a "nadupané" informacemi, v nichž nechybí nic podstatného. Vše je navíc doplněno moc hezkými komiksovými obrázky (za kterými pravděpodobně stojí Adam Pratt, ze společnosti Adobe Inc.), které se vždy váží k danému tématu.
Doplněno: Diskuse o článku se nachází na AccessifyForum.
(via web-graphics)
Autor: Vít Dlouhý, čas: 12:27, Komentáře , Trvalý odkaz
Relevantní odkazy:
Autor: Vít Dlouhý, čas: 12:00, Komentáře , Trvalý odkaz
Používání kaskádových stylů je elitářství, či
pokus o vyjádření své povýšenosti. K vidění jsou i taková nesmyslá spojení, jako
CSS fundamentalisté,
technická masturbacea kdo ví, co ještě. Osobně mě to nechává celkem chladným, je však zajímavé takové diskuze, případně články sledovat. Jeden takový článek tu dnes mám: Tables vs FULL CSS INTEGRATION (decloak Inc.).
Po jeho přečtení jsem se konečně dozvěděl, že standardy W3C jsou nepoužitelné, že používání kaskádových stylů nemá žádné větší výhody, určitě neušetří traffic a rozhodně se také stránky nebudou načítat rychleji -- proč jsem jen tohle nevěděl dřív? ;-)
Důležité pro tvorbu vlastního názoru je: Celé věci porozumět a pochopit ji
, není to o tom, někde si něco přečíst a říct si: Ano, oni to tak dělají, tak my také!
(klasický to argument firemního zadavatele webové prezentace). Podstata tkví v tom, vše si sám vyzkoušet
a na základě toho si udělat vlastní názor. Při pohledu do zápisu stylů na inkriminované stránce je mi jasné, že autorovi CSS jasné není - neříká mu nic hromadná deklarace, či "pravidlo nejbližšího tagu". Není tedy divu, že na dalších místech v článku je zcela mimo mísu.
Neméně podstatnou záležitostí je uvědomit si také, že tvorba stránek, potažmo práce s CSS není jednoduchá
(tzv. "Yuhůovské pravidlo" ;-). Důležitá je vytrvalost (a někdy i pevné nervy). Bohužel vyjímkou není názor: Blbý styly, nejdou mi tam udělat tři stejný sloupce, tak jako s tabulkama, tak proč bych se jimi měl zabývat?!
.
Samozřejmě, podpora kaskádových stylů ze strany prohlížečů ještě není všude zcela dokonalá (na druhou stranu, problém nespočívá vždy pouze v browseru), a nějaký čas ještě určitě nebude, to ví každý, kdo se styly pracuje, stejně tak jako ví, že: Už v tomto stádiu použitelnosti je CSS mnohem dál, než by se tabulky (rozuměj tabulkový layout) mohly kdy dostat
. Příkladů je celá řada...
Závěrem. Je jasné, že enormní prosazování kaskádových stylů, kterého jsme svědky se někomu (např. lidem, kteří "ovládli" FrontPage, případně "old-school" webmasterům) nelíbí -- a tak jsou na druhé straně barikády dvě silné skupiny. Zatímco tu první byste na CSS nalákali "pěkně" barevným (max. 16 barev) posuvníkem v Internet Exploreru, ta druhá má "svou hlavu" a pokud ze zkušeností dospěla k názoru, že tabulkový layout je lepší, tak JE TO V POŘÁDKU, pokud k tomu názoru dospěla ze strachu z pokroku (nebo z lenosti učit se něco "navíc"), tak se někde stala chyba...
Přeji pěkný den!
Doplněno: 1.11.2003, tímto tématem se zaobírá i Jeffrey Zeldman.
Autor: Vít Dlouhý, čas: 11:32, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 10:21, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 21:01, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 20:55, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 21:13, Komentáře , Trvalý odkaz
Z trochu jiného soudku je rozhovor s Jeffrey Zeldmanem (Lounge72), týká se především jeho práce, připravovaného redesignu webu A List Apart a v neposlední řadě se také Jeffrey rozpovídal o Microsoftu a jeho prohlížečové podpoře standardů. Vcelku zajímavé čtení.
Autor: Vít Dlouhý, čas: 15:59, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 15:55, Komentáře , Trvalý odkaz
:after
(opakem k ní je :before
). Zatímco první z nich pracuje s "oblastí" za nadřazeným tagem, druhá z nich před ním. Následující příklad má za úkol při tisku stránky zobrazit v hrantané závorce za obsahem odkazu také samotnou URL (velice užitečná vlastnost):
@media print {
a:after {
content : " [" attr(href) "] ";
}
}
V praxi pak může vytisknutá stránky vypadat třeba takto: Více příkladů najdete na stránce Example [http://www.example.com]
. Tagem div
můžete ohraničit pouze obsahovou oblast tak, aby se při tisku nezobrazovala URL např. u navigace, či patičky stránky. Již tradičně si bohužel na tomto místě musím postesknout nad IE, který tyto pseudo třídy nezná a tudíž ignoruje.
Relevantní odkazy:
Autor: Vít Dlouhý, čas: 10:05, Komentáře , Trvalý odkaz
position: fixed
panel, který bude neustále na jednom místě a nebude scrollovat z dalším obsahem stránky. To by samo o sobě nebyl problém, nebýt Internet Exploreru, který již tradičně na tomto místě selhává. Markovo řešení s využitím JavaScriptu však funguje docela dobře (ne zcela ideálně, ale dobře) a tak je tento postup úspěšný jak na IE/Windows, tak na IE5/MAC (který sice tento příkaz zná a zvládá, obsahuje však jinou chybu, která brání v jeho použití). Celý postup, včetně dalších informací můžete vidět na Floating layer demonstration.
Alternativní řešení pak nabízí Petr Paul Koch.
Autor: Vít Dlouhý, čas: 10:37, Komentáře , Trvalý odkaz
*.swf
vynechávám záměrně) - GIF, PNG a JPEG. V článku se jednak dozvíte něco z historie všech tří kompresních algorimtů, dále se dočtete, jak a kde je nejlépe používat a nechybí ani pár malých ukázek komprese. Povedené!Autor: Vít Dlouhý, čas: 10:21, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 10:18, Komentáře , Trvalý odkaz
Jak udělat nejlépe třisloupcovou strukturu bez tabulek?, se co do počtu dotazů může rovnat snad jen:
Jak udělat tři stejně dlouhé sloupce?. Ať tak nebo tak, člověk stejně nikdy neví, kdy se to může hodit -- což je ten druhý důvod, proč vás dneska odkáži na stránku CSS Enterprise, jejíž podtitulek:
NN4-compatible XHTML/CSS 3 column layouts, mluví asi za vše. Předpřipravené šablony můžete navíc pomocí vloženého formuláře mírně modifikovat.
No a vzhledem k tomu, že bych rád toto téma alespoň na nějakou dobu uzavřel, tak vás pro úplnost odkáži ještě na Craiga Sailu a jeho CSS Layouts for Netscape 4, které ale většina z vás již asi dávno zná.
Těm, kteří si raději vytvoří vše sami by mohl být užitečný výborný článek CSS a Netscape 4 od Marka Howellse.
Relevantní odkazy:
Autor: Vít Dlouhý, čas: 12:17, Komentáře , Trvalý odkaz
<script language="JavaScript">
<!--
if(-1 != navigator.userAgent.indexOf("MSIE"))
{
// Internet Explorer
document.write('<link rel="stylesheet" type="text/css" href="ie.css">');
}
else if (-1 != navigator.userAgent.indexOf("Mozilla"))
{
// Netscape a Mozilla
document.write('<link rel="stylesheet" type="text/css" href="netscape.css">');
}
else
{
// ostatní prohlížeče
document.write('<link rel="stylesheet" type="text/css" href="other.css">');
}
//-->
</script>
Obdobným skriptem lze odlišit i platformu Windows od platformy MAC (ačkoliv po pravdě nevím, k čemu by to mohlo být dobré):
<script language="JavaScript">
<!--
// styl pro MAC
if (navigator.platform.indexOf('Mac') != -1) {
document.write('<link rel="stylesheet" type="text/css" href="mac.css">');
// styl pro Windows
} else{
document.write('<link rel="stylesheet" type="text/css" href="windows.css">');
}
//-->
</script>
Relevantní odkazy:
Autor: Vít Dlouhý, čas: 12:04, Komentáře , Trvalý odkaz
:focus
do formulářů (kde také má své hlavní opodstatnění) mi přijde jako výborný nápad. Stačí pro formulářové prvky přidat do zápisu stylů příkaz input:focus, textarea:focus { background-color: #fea; }
, což bude mít za následek změnu barvy pozadí aktivního pole. Výhoda tohoto řešení spočívá především v lepší orientaci mezi poli (a to hlavně v případech, kdy není na první pohled zřejmá jejich hierarchie a skáče se mezi nimi na přeskáčku).
Jednoduché, dle mého názoru velice užitečné, bohužel nijak zvlášť používané - svou vinu na tom nese jistojistě i majoritní prohlížeč, který "nefokusuje" (šestá verze pouze použije pseudo třídu :active
). Mozilla bez problémů, Opera jakbysmet! Není tedy důvod, proč toho nevyužít - radost bude mít při práci s takto ošetřeným formulářem minimálně několik procent návštěvníků.
Autor: Vít Dlouhý, čas: 17:13, Komentáře , Trvalý odkaz
(via Digital Web News)
Autor: Vít Dlouhý, čas: 21:45, Komentáře , Trvalý odkaz
Chytrý, hezký, nepoužitelný, tak takhle mimo jiné počastoval weblog Jump the Gap pokus McGoogle. Pokud vás již omrzel klasický vzhled fulltextu Google, tak nyní si můžete nechat zobrazit jeho výsledky hledání na obalu z menu firmy McDonald -- kdo neviděl neuveří... Jen podotknu, že je to celé postaveno na Google API a ke shlédnutí tohoto šíleného nápadu budete potřebovat Flash plug-in.
Nevím zda-li to byl záměr, ale právě ono spojení Google-McDonald mi přijde jako docela trefný pokus upozornit na ohromný monopol v internetovém vyhledávání, který si chlapci z Kalifornie svým fulltextem vytvořili. Používáte někdo třebas AllTheWeb? Přijde mi, že je docela nedoceněný. Jaký je váš názor?
Autor: Vít Dlouhý, čas: 16:54, Komentáře , Trvalý odkaz
background-position
se zápornými hodnotami, jenž zobrazí vždy pouze požadovaný úsek podkladového obrázku. Výhody i nevýhody jsou jasné, já jen dodám, že autorem je Jan Hutař. Testováno na všech novějších prohlížečích.Autor: Vít Dlouhý, čas: 16:47, Komentáře , Trvalý odkaz
.exe
souboru stáhnout na disk a patřičné výpočty po té dělat v klidu, bez nutnosti připojení na internet.
Nuže, program naleznete na stránce Color Visibility Test Program (jeho velikost je zhruba 230kB), autorem je Chris Ridpath a v podstatě umí to samé, co zmíněný skript, navíc má snad jen možnost nastavení vlastních minimálních hodnot pro rozdíl ve světlosti a barvě (doporučené hodnoty jsou dle programu 125 a 500). Jediná nevýhoda, která však dost zamrzí je nemožnost vložit barvu ve formátu #RRGGBB, přípustný je pouze zápis RGB v rozsahu 0-255.
Relevantní odkazy:
Autor: Vít Dlouhý, čas: 09:55, Komentáře , Trvalý odkaz
Pokud souhlasíte s názorem světového odborníka na použitelnost webových stránek Vincenta Flanderse, který na svých stránkách Web Pages That Suck hlásá, že: Dobrý web design se naučíte tím, že se budete dívat na ten špatný
, tak po shlédnutí tohoto žebříčku již budete vytvářet jen dokonalé stránky! Tedy alespoň po stránce kódu ;-)
(via Jim Mangan)
Autor: Vít Dlouhý, čas: 03:23, Komentáře , Trvalý odkaz
Ctrl+Enter
po té zajistí dosazení www.
a .com
Shift+Enter
dosadí .net
Ctrl+Shift+Enter
dosadí příponu .org
Alt+Enter
, zobrazí se stránka v záložce (přechod mezi záložkami je řešen pomocí Ctrl+PageUp
a Ctrl+PageDown
)Ctrl+K
zajistí rychlý skok do pole pro vyhledáváníF6
se přemístíte do adresového řádkuJá přidám ještě pár (dle mého názoru neméně užitečných) kombinací:
Ctrl++
, zvětší písmo (zmenšení pomocí Ctrl+-
), pokud máte myš s kolečkem, můžete téhož výsledku docílit pomocí Ctrl+WheelUp
a Ctrl+WheelDown
Ctrl+T
, zavřít Ctrl+F4
Více kombinací pro klávesnici a pro myš naleznete na webu Texturizer.
(via Simon Willison)
Autor: Vít Dlouhý, čas: 02:55, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 21:59, Komentáře , Trvalý odkaz
Ať tak nebo tak, to hlavní je stejně jenom v Google Information for Webmasters... :-)
PS: Čistě pro zajímavost -- stránky http://wolfram.org/ mi připomínají nějakou hooodně navštěvovanou stránku, jen si nemůžu vzpomenout jakou ;-)))
Relevantní odkazy:
Autor: Vít Dlouhý, čas: 17:22, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 16:54, Komentáře , Trvalý odkaz
Relevantní odkazy:
Autor: Vít Dlouhý, čas: 19:21, Komentáře , Trvalý odkaz
max-width
a min-height
, které již dlouhoU dobu úspěšně ignoruje. Zajímavý postup představuje Svend Tofte v článku max-width in Internet Explorer (Svendtofte.com, 20.8.2003).
Jak autor sám říká: "Klíčem je v Internet Exploreru použití realtivně málo známé vlastnosti expression()
", která zajistí požadovaný efekt. Ne, neděste se! Konkurenční prohlížeče, které tuto vlastnost neznají, řádek automaticky přeskočí a použijí hodnotu následující - výsledek pak funguje (alespoň dle mých skromných testů) na všech novějších prohlížečích.
Pro úplnost článku přidávám Pixy's min-height-hack, který pro změnu řeší minimální výšku.
Autor: Vít Dlouhý, čas: 11:55, Komentáře , Trvalý odkaz
Jako užitečnou funkci jsem také shledal převod R:G:B barvy na hexadecimální (šestnáctkový) zápis, který v poslední době používám docela často. Pokud si chcete EasyPad ozkoušet, navštivte jeho domovskou stránku www.elka.cz/easypad.
Autor: Vít Dlouhý, čas: 10:40, Komentáře , Trvalý odkaz
V jistém kontrastu k tomuto článku si můžete pro změnu přečíst Joe Gillespieho, resp. jeho článek CSS-P in Current Browsers. Joe v něm testoval, jak si poradí široká škála prohlížečů s nástrahami pozicování - zde (dle jeho výsledků) IE6.X nezaostává (stejně tak jako Mozilla 1,4 a Camino 0,7 dostal maximální známku), velice chabě si dle výsledků vedl prohlížeč iCab 2.9.5...
(via Jim Mangan)
Autor: Vít Dlouhý, čas: 00:07, Komentáře , Trvalý odkaz
Relevantní odkazy:
PS: Jirka Bureš byl opět rychlejší... ;-)
Autor: Vít Dlouhý, čas: 18:13, Komentáře , Trvalý odkaz
Autor: Vít Dlouhý, čas: 18:07, Komentáře , Trvalý odkaz
abbr
a acronym
) jsem našel na (pro mě do té doby neznámém) weblogu Larse Holsta - Abbreviations, Acronyms, Initialisms (Larsholst.info, 29.9.2003). Článek svým rozsahem postihuje vše, od čiré teorie (rozlišení zkratky od akronymu), přes řadu příkladů až po ukázky ideálního ošetření těchto tagů v CSS.Autor: Vít Dlouhý, čas: 17:58, Komentáře , Trvalý odkaz
Aktualizováno: 12.12.2003, 22:25
Copyright © 2003 Vít Dlouhý ml., mailbox@vitdlouhy.cz, Všechna práva vyhrazena ®
Příručka: Weblog o tvorbě webu je tvořen pomocí offline editoru EasyBlog 2.2.0.24, děkuji Liboru "eLKa" Krayzelovi