Příručka: Weblog o tvorbě webu

Weblog pro webmastery, zaměřeno na XHTML, CSS, SEO, použitelnost a přístupnost webových stránek

ú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.

Autor: Vít Dlouhý, čas: 21:46, Komentáře , Trvalý odkaz

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...

Autor: Vít Dlouhý, čas: 21:36, Komentáře , Trvalý odkaz

pondělí, 29. září 2003

Pár CSS užitečností

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

Autor: Vít Dlouhý, čas: 15:53, Komentáře , Trvalý odkaz

neděle, 28. září 2003

Link Summarizer

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.

Autor: Vít Dlouhý, čas: 16:25, Komentáře , Trvalý odkaz

CSS stínování

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>

Autor: Vít Dlouhý, čas: 15:24, Komentáře , Trvalý odkaz

sobota, 27. září 2003

CSS layouty na počkání

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)

Autor: Vít Dlouhý, čas: 12:46, Komentáře , Trvalý odkaz

16 CSS layoutů

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)

Autor: Vít Dlouhý, čas: 10:15, Komentáře , Trvalý odkaz

středa, 24. září 2003

Přehled článků z webu XII.

Autor: Vít Dlouhý, čas: 20:45, Komentáře , Trvalý odkaz

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ů...

Autor: Vít Dlouhý, čas: 20:35, Komentáře , Trvalý odkaz

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:

Autor: Vít Dlouhý, čas: 10:21, Komentáře , Trvalý odkaz

neděle, 21. září 2003

Slovník typografie

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.

Autor: Vít Dlouhý, čas: 10:18, Komentáře , Trvalý odkaz

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)

Autor: Vít Dlouhý, čas: 21:26, Komentáře , Trvalý odkaz

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:

Autor: Vít Dlouhý, čas: 13:54, Komentáře , Trvalý odkaz

středa, 17. září 2003

Šestá část SimpleQuizu

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:

Autor: Vít Dlouhý, čas: 21:36, Komentáře , Trvalý odkaz

Co mi uniklo...

Autor: Vít Dlouhý, čas: 21:17, Komentáře , Trvalý odkaz

sobota, 13. září 2003

Kam pro inspiraci?

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:

Autor: Vít Dlouhý, čas: 10:54, Komentáře , Trvalý odkaz

středa, 10. září 2003

Sitemap a Site index

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:

Autor: Vít Dlouhý, čas: 15:46, Komentáře , Trvalý odkaz

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:

Autor: Vít Dlouhý, čas: 15:36, Komentáře , Trvalý odkaz

ú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).

Autor: Vít Dlouhý, čas: 18:42, Komentáře , Trvalý odkaz

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.

Autor: Vít Dlouhý, čas: 14:45, Komentáře , Trvalý odkaz

Nové kousky v blogrollu

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.

Autor: Vít Dlouhý, čas: 14:26, Komentáře , Trvalý odkaz

sobota, 6. září 2003

Jyxo mě má rádo :o)

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?

Autor: Vít Dlouhý, čas: 23:03, Komentáře , Trvalý odkaz

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:

Autor: Vít Dlouhý, čas: 01:05, Komentáře , Trvalý odkaz

pátek, 5. září 2003

Hledám

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!

Autor: Vít Dlouhý, čas: 13:18, Komentáře , Trvalý odkaz

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)

Autor: Vít Dlouhý, čas: 15:14, Komentáře , Trvalý odkaz

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)

Autor: Vít Dlouhý, čas: 14:55, Komentáře , Trvalý odkaz

Přehled článků z webu XI.

Autor: Vít Dlouhý, čas: 14:48, Komentáře , Trvalý odkaz

Přečtěte si také:

Odkazy:

Přehled článků z webu:

Aktualizováno: 12.12.2003, 22:25

Archív weblogu:

České weblogy:

Zahraniční weblogy:

Zahraniční magazíny:

Agregátory:

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

Toplist