úterý, 30. září 2003
Weblog Letem světem končí
Lukáš Oborský nebyl hacknut, jak se řada z nás domnívala -- realita je bohužel horší,
Lukin se rozhodl činnost svého weblogu
Letem světem ukončit. Udělal to stylově - po vzoru
Vosy na jazyku, ve chvíli největšího zájmu čtenářů. Po web designérském blogu
Martina Michálka, který skončil již před časem je to další velká ztráta pro weblogovou komunitu.
Lukin mi k tomu řekl: "
Weblog mi ubíral denně spoustu času, který nyní trávím s manželkou a přáteli - posledních 14 dní bylo pro mne mnohem bohatších a intenzivních". Já k tomu mohu říci jen jediné: "
Díky za všechny čtenáře nejen za velký přínos do blogosféry, ale i za výborné spoty, které bylo radost číst. Díky!"....
PS: Jak to tak vypadá, archív weblogu nebude zpřístupněn.
Jak na přístupné obrázkové rollovery
Dan Cederholm ze
SimpleBits se ještě stále vyžívá v tvorbě všelijakých záložek pomocí kaskádových stylů, i tentokrát se mu podařilo vykouzlit opravdu
skvost (k vidění je v akci na
fastcompany.com), podrobnější informace jsou v jeho blogspotu
Accessible Image-Tab Rollovers. Jen pro zajímavost, četli jste dnešní
Pixy hýbe světem na
nitrobloku? Pokud ano, tak se možná nebudete divit tomu, že i
Dan se nechal
pixym inspirovat...
pondělí, 29. září 2003
Tři
CSS užitečnosti - obrázky bez preloaderu, 3 sloupce (plouvoucí i neplovoucí, případně stejně dlouhé) a kulaté rohy via kaskádové styly naleznete na stránce
http://www.redmelon.net/tstme/, spoustu obdobných užitečností skrývají také stránky
Newt Edge. A ještě jedna malá vychytávka na závěr (pochází z druhého jmenovaného zdroje) -- často se proti spambotům, kteří slídí po emailových adresách brání zápisem
jmeno@server.cz.nospam
(apod.), mnohem užitečnější by však mohla být jednoduchá metoda popsaná v článku
Hiding email address from spambots:
<address>© 2003 Lim Chee Aun</address>
address:after{
/* \40 je znaková entita zastupující '@' symbol */
content: " <cheeaun\40phoenity.com>";
}
Škoda, že to zvládá jen Mozilla a Opera, IE již tradičně nepochodí...
Doplněno:
Narychlo jsem přidal ještě odkaz na Listamatic 2: nested list options, rozepisovat jej nebudu, nestíhám :-)
neděle, 28. září 2003
Docela užitečný skriptík
Link Summarizer, nacházející se na adrese
http://www.dodgydom.com/webtools/aslinks, počítá všechny odkazy na zadané stránce, zobrazuje typ každého odkazu (textový nebo obrázkový) a vypisuje také alternativní popisek (
alt
) a titulek (
title
). Uplatnění nalezne třeba u delších stránek při dohledávání chybějících popisků u obrázků (tedy v případě, že fungují jako odkazy), nebo prostě k rychlému zjištění počtu odkazů na stránce.
Blog o tvorbě webu, který spravuje
Lukáš Mačí ukazuje hezký
příklad jednoduchého stínování pomocí kaskádových stylů. V prvním z příkladů předvádí pseudo stínování pomocí šedé tabulky, v druhém příkladu pak podobně jako
Ian Andolina v
Lurking in Shadows: CSS and drop shadow effects používá k docílení efektu průhledného
PNG obrázku.
Zde je příklad velice jednoduchého "stínování":
<div style="background: #ccc none; width: 250px">
<div style="background: #fff none; width: 250px;
border: 1px solid #555; position: relative; top: -5px; left: -5px">
...
</div>
</div>
sobota, 27. září 2003
Je to zhruba týden, co jsem psal o povedeném
List-o-matic a již je tu další projekt, který se jím nechal inspirovat. Jeho název -
Layout-o-matic mluví za vše, tentokrát se budou dle vašich požadavků generovat
CSS šablony. Autorem je
Kevin Tatroe z firmy
InkNoise a jeho dílko vám dle zadaných parametrů (šířka, mezery mezi sloupci, vnitřní okraje - zadané v pixelech, nebo procentech), a následného výběru mezi typem šablony (celostránková, dva sloupce, případně tři sloupce, to vše plus hlavička a patička), vygeneruje stránku a příslušný zdrojový kód.
Co se funkčnosti týče, tak autor uvádí, že layouty byly testovány na řadě prohlížečů a fungovaly dobře vyjma čtyřkových verzí. Pokud tedy potřebujete rychle nějakou šablonu jako základ pro svou stránku, případně jste začátečník a nechcete si s tím vším lámat hlavu, tak již víte, kde hledat...
(via Zeldman)
Little Boxes v podání serveru
The Noodle Incident, vám přináší celkem 16 různých
CSS layoutů, na výběr jsou šablony od úplně jednoduchých jednosloupcových, přes složitější dvousloupcové až po kompletní třisloupcový layout s hlavičkou. Autorem je
Owen Briggs.
(via WebApper)
středa, 24. září 2003
Přehled článků z webu XII.
Tradiční seznam odkazů, které uvízly v síti...
CSS design ve 12-ti krocích
Jeremy Keith napsal pro svůj weblog
Adactio článek
CSS Based Design, ve kterém pomocí dvanácti kroků shrnuje hlavní výhody designu postaveného na kaskádových stylech. Mimo jiné odpovídá na otázku, proč používat
XHTML/
CSS a začátečníkům radí, kde při redesignu začít. V několika následující krocích pak představuje to nejdůležitější - rozdíly mezi
div
a
span
,
class
a
id
, pozicování, plovoucí elementy a věnuje se i
box modelu. V závěru pak zhrnuje čtyř výhody mluvící pro
CSS design. Pro zkušenější v podstatě nic nového, pro začátečníky jeden z mnoha vhodných startů...
pondělí, 22. září 2003
Zase jedny mýty - přístupnost
Není to tak dávno, co nám zažité mýty o použitelnosti
vyvracel Jakob Nielsen a už nám zase někdo bude něco vyvracet ;-)
Dnešní pověry se týkají přístupnosti webových stránek a článek, který je uvádí na pravou míru zařazuji z toho důvodu, že vyvrací mýty, s kterými jsem se již sám několikrát setkal a tudíž je považuji za rozšířené. Již sumář článku
Accessibility Myths (
Rnib.org, 1.9.2003) mnohé naznačuje: "
Webová přístupnost není pouze o statických stránkách, s černo-bílým textem, jak si řada lidí myslí
". Z článku přímými odkazy vybírám to nejzajímavější:
Musíte poskytovat pouze text-only stránky,
nemůžete použít obrázky,
měli byste použít velké písmo,
barevný výběr je důležitější než kontrast případně
červená a zelená nesmějí být použity. Více informací v článku...
Relevantní odkazy:
neděle, 21. září 2003
Rozsáhlý
slovník typografie skrývají stránky
RedSun, všechny pojmy jsou řazeny dle abecedy a nechybí ani možnost vyhledávání. Autorem je
Kevin Woodward. U typografie ještě krátce zůstaneme, jen změníme doménu -
Web Page Design for Designers - Typography poskytuje velmi dobrý základ pro webovou typografii.
pátek, 19. září 2003
List-o-matic, CSS menu dle vašich představ
Od
Zeldmana jsem se právě dozvěděl o moc hezké aplikaci
List-o-matic na webu
Accessify, která slouží k online generování navigačních menu (s využitím
CSS). Musím přiznat, že mě tento aplikace dostala. Její funkce je jednoduchá, ale dokáže vám ušetřit dost času stráveného pracným klepáním příkazů. V několika krocích si vyberete počet položek, zarovnání menu (vertikální nebo horizontální), případně možnost zobrazování titulků u odkazů. V dalším kroku pak pouze vyplníte vygenerovaný formulář požadovanými hodnotami a v posledním kroku pak již jen zvolíte některou z předpřipravených verzí menu (k vidění jsou šablony od
Erica Meyera,
Jeffreyho Zeldmana ad.) - následně se vygeneruje kompletní zdrojový kód, který stačí vložit do stránky. Super!
(via Zeldman)
Kulaté záložky od Erica Meyera
V principu jednoduché, ale ve výsledku povedené
CSS záložky s kulatými rohy vytváří v článku
Rounding Tab Corners odborník na slovo vztatý -
Eric Meyer. Řešení používá klasické - seznam tvoří pomocí příkazů
ul
,
li
a
display: inline
- což má nespornou výhodu v tom, že se v případě vypnutí stylů zobrazí přehledný seznam odkazů. Pro "
geckaře" jsou pro zajímavost vytvořeny stejné záložky s použitím příkazu
-moz-border-radius
.
Relevantní odkazy:
středa, 17. září 2003
Dan Cederholm včera publikoval
šestou část svého
SimpleQuiz, tentokrát se jeho otázka týká formulářů (a také trochu formátování) - možnosti jsou opět tři a správná by měla být pouze jedna...
Relevantní odkazy:
Omlouvám se Vám za trochu delší neaktualizaci způsobenou problémy s webhostingem, vezměte tedy do "začátku" za vděk alespoň několika články, o kterých jsem nemohl podrobněji informovat...
sobota, 13. září 2003
Firmy
Webboy,
Max Design and
Purple Prodigy spustili již svůj 25. (plně kaskádových stylů využívající) web. Pokud chcete načerpat lehkou inspiraci, můžete se podívat na jejich
Twenty-five full CSS sites? (
Max Design, 18.7.2003). Při surfování jsem narazil na další pěkné stránky, které také neobsahují ani jedinou tabulku - např. německý vyhledávač
Fireball, spadající pod portál
Lycos (za zmínku stojí také smotný
Lycos.de -- i tak zdánlivě
složité stránky lze vystavět bez jediné tabulky). Mrkněte...
Relevantní odkazy:
středa, 10. září 2003
Chiara Fox se ve včerejším článku
Sitemaps and Site Indexes: What They Are and Why You Should Have Them (
Boxes and Arrows, 8.9.2003) velice obsáhle zabývá tématem mapy webu (angl. sitemap) a indexu webu (angl. site index). Co oba tyto pojmy zahrnují, k čemu jsou dobré a jak je nejlépe použít se dozvíte v článku. Pro názornost nechybí ani příklad vhodného použití.
Sitemap a site index jsou typy doplňkové navigace. Umožnují návštěvníkům navigaci po webu bez nutnosti použít globální navigaci. Vedou k lepšímu pochopení struktury a často pomáhají zmatenému uživateli najít správnou cestu.
Relevantní odkazy:
Nielsen boří mýty o použitelnosti
V zatím posledním
Alertboxu se
Jakob Nielsen věnuje svým článkem
Misconceptions About Usability boření některých letitých mýtů, vznašejících se okolo použitelnosti webových stránek. V článku se pozastavuje nad těmito čtyřmi, špatně pochopenými body, které uvádí na pravou míru:
- Použitelnost je drahá
- Studie použitelnosti oddalují datum spuštění projektu
- Použitelnost vylučuje kreativitu
- Netřeba použitelnosti, když nasloucháme zpětné vazbě zákazníků
Relevantní odkazy:
úterý, 9. září 2003
Fulltextové vyhledávání v Archive.org
Světoznámý internetový archív
Wayback Machine (spuštěný již v roce 1996), který uchovává miliony webových stránek, se konečně dočkal také skriptu pro fulltextové vyhledávání. Fulltext
Recall je přístupný přímo ze stránky archívu a prohledává neuvěřitelných 11 094 924 000 stránek, zvládá i víceslovné dotazy a kromě toho obsahuje také jednoduché rozhraní pro
rozšířené vyhledávání, v němž lze dotaz obohatit o možnost omezení rozsahu výsledků pomocí časových úseků
after (po) a
before (před). Čistě pro zajímavost přidávám
pohled na
Google (který mimochodem právě dnes
slaví 5. narozeniny), tak jak jej většina z nás asi nepamatuje (listopad 1998).
pondělí, 8. září 2003
Experimenty v CSS - CSS Destroy
Rád sleduji různé experimenty s kaskádovými styly -- pokud jste na tom stejně jako já, tak zkuste navštívit stránku
CSS Destroy. Její název mluví za vše, autor zkouší všelijaké krkolomné (i inspirativní) konstrukce a následně je prohání všemi dostupnými prohlížeči. Ke každému z jedenadvaceti dosud uskutečněných experimentů náleží i důkladná vysvětlivka problému, doplněná o informaci, kde to funguje a kde to naopak selhává (většinou to skřípe v případě
Internet Exploreru ;-). Pokud se vám někde na disku povaluje některá novější verze
Mozilly,
Opery a k tomu i
Explorer, tak se zkuste podívat sami.
Po delší době jsem se dostal k menší aktualizaci blogrollu (odkazy na weblogy v pravém panelu). Přidal jsem pár zahraničních kousků, které jsem již delší dobu sledoval a které mě vcelku zaujaly. Naopak jsem vyřadil pár odkazů, které přestaly být aktualizovány (nebo jejich aktualizace stagnovala). Průběžně bych chtěl tento seznam udržovat a rozšiřovat, aby byl pro vás (a koneckonců i pro mě) malým rozcestníkem v cestě za informacemi týkajícími se tvorby webu. Pokud vy sami máte nějaké tipy na kvalitní weblogy (případně magazíny), tak budu rád, když mi je zašlete na email (využít můžete samozřejmě i komentáře). Jedinou podmínkou je zaměření co možná nejbližší tomu mému.
sobota, 6. září 2003
Je to již docela dlouho, co jsem
Jyxu pokládal vyhledávací dotaz přímo z jeho webového formuláře (k tomuto účelu teď používám už jen výhradně
toolbar), dnes jsem však udělal (nevím proč) vyjímku, nemaje co dělat jsem zkusil zadat do vyhledávacího pole dotaz "weblog", abych si ověřil, jak si na tento dotaz vede můj blog. A musím uznat, že si vede velice dobře - na tento dotaz je totiž
na prvním místě (přes tlačítko "1.", což je obdoba googlovského "
I´m feeling lucky" se dokonce automaticky dostanete přímo sem).
Předchozí odstavec, však nepíšu pouze proto, abych se pochlubil, spíše mě zajímá, proč tomu tak je. Zkoušel jsem počítat, kolikrát se slovo "weblog" objevuje na stránce (v čisté šabloně), došel jsem k číslu 11 (velký podíl na tom má pravý panel s blogrollem), tudy tedy možná vede cesta k pravdě. Ze zkušeností se však domnívám, že hlavní důvod tkví v samotném předpisu hlavičky, kde jsou jednak obsažena všechna důležitá klíčová slova, především se zde však slovo "weblog" vyskytuje hned dvakrát (a to velice blízko u sebe), přičemž v obouch případech má vysokou váhu. Jednou je obsaženo v tagu H1
a podruhé je zvýrazněno tagem strong
. Kromě toho se nachází také v samotném titulku stránky.
Co z toho všeho plyne? Stará známá pravda, která potvrzuje důležitost několika prvních řádků na stránce, váhu tagu H1
, titulku a v neposlední řadě také hustotu klíčových slov...
Doplněno: U Google jsem třetí, hádejte za kým?
Co bychom měli vědět o XHTML 1.1
Před pár dny vyšel na webu
dionidium příspěvek
What You Should Know about XHTML 1.1, v němž se shromaždilo několik odkazů na nejkvalitnější články popisujíci nejdůležitější rozdíly mezi
XHTML 1.0 a
XHTML 1.1, to vše doplněné ještě o pár užitečných poznámek. Pokud tedy hledáte odpovědi na toto téma, tak zde jich je celá řada - pěkně pohromadě. Pro úplnost a klid duše doplním, že autory jsou
Wayne Burkett a
J.S. Bell.
Relevantní odkazy:
pátek, 5. září 2003
Hledám nějaký editor webových stránek, který by splňoval tyto mé požadavky:
- Nejlépe freeware (může být i shareware)
- Maximální jednoduchost a rychlost, nic komplexního typu Homesite, spíš takový vylepšený Notepad
- Zvýraznění syntaxe (v ideálním případě i syntaxe PHP)
- Možnost více kódování (min. windows-1250, iso-8859-2)
- Klávesové zkratky pro vkládání kódu
Máte nějaké tipy? Můžete se o ně podělit v komentářích pod článkem. Díky!
Doplněno: (8.9.2003, 15:02) Tak jsem si už vybral! Většina z vás mi doporučovala PSPad (řada se pak také zmiňovala o VIMu). Včera jsem si stáhnul PSPad s tím, že vyzkouším i druhý zmiňovaný -- avšak vypadá to, že se k němu již nedostanu, PSPad se totiž trefil přesně do toho, co jsem požadoval a zatím to vypadá doslova na ideální editor! Odhazuji tedy NotePad, který mi dobře sloužil řadu let a přecházím k jinému "Padu" - tomu s "PS" na začátku... Můj dík ale patří všem, kteří mi poradili!
středa, 3. září 2003
Vizuální a interaktivní úprava hyperlinků
Z
ia slash jsem se dočetl o novém webíku, nazvaném
Web Design Practices, který již zhruba měsíc píše
Heidi Adkisson. Na zmíněných stránkách mě zaujal mini-článek
Visual and Interactive Link Treatments, z něhož bych si dovolil ocitovat několik zajímavých čísel, které vzešly z průzkumu 315 webových stránek. Tento průzkum se týkal úprav hypertextových odkazů -- mimo jiné se v něm píše:
- 50% odkazů je modrých, 13% červených, 12% černých a šedých...
- 54% odkazů je podtržených, 34% bez podtržení a 12% odkazů je tvořeno pomocí grafiky
- 68% stránek nemá žádnou roll-over akci(!), 15% odkazů mění barvu textu, 10% přidává podtržení (které původně chybělo), 4% odkazů navíc přidávají změnu pozadí (
background-color
)
Novinky u Web Page Analyzeru
Výborný skript
Web Page Analyzer, ze stránek
Web Site Optimization se před pár dny dočkal několika hodnotných vylepšení (pokud tuto aplikaci zatím neznáte, tak vězte, že
Web Page Analyzer počítá velikost stránky, její složení a dobu potřebnou k jejímu stažení, následně pak dle
HCI průzkumu generuje vhodná doporučení, která by měla vést k rychlejšímu načítání stránky). A co že je nového? Zde je několik útržkovitých bodů:
- Skript již započítává i alternativní styly a styly vkládané metodou @import
- Započítávají se obrázky na pozadí stránky, tabulek a u dalších elementů
- HTTP komprese, je zobrazována velikost komprimovaných souborů
- ...
Relevantní odkazy:
(via Meryl Evans)
Přehled článků z webu XI.
Pár tradičních nekomentovaných odkazů na zajímavé články.
Přečtěte si také: