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

neděle, 29. červen 2003

Základní konvence použitelnosti

O tom, že WebmasterWorld je skvělým zdrojem pro všechny, kteří tvoří web anebo se zajímají o vyhledavače, asi není sporu. Narozdíl od většiny ostatních diskusních fór se však zde čas od času objeví výborné shrnující příspěvky, které by se v řadě případů daly pojmout jako samostatné články.

Jedním z takovýchto příspěvků je i jeden trochu starší - Usability conventions in web design, z fóra Webmaster General. Jedná se o vynikající souhrn, který velice krátkými body obsahuje celou řadu rad z oboru usability (překl. použitelnosti). Článek bych doporučil spíše začátečníkům, nebo mírně pokročilým, ti všichni se z něj dozvědí celou řadu užitečných informací, které pak mohou na svých stránkách uplatnit.

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

Jak zacházet s designérem

"Představ si, že jsi Kryštof Kolumbus", tak takhle nečekaně začíná vynikající článek How to (and not to) work with a designer od Willa Harrise. Jedná se o článek, který ve dvanácti bodech shrnuje, jak vůbec poznat a vybrat kvalitního designéra. Mně osobně se nejvíc líbí bod závěrečný, který říká: "Věř svému designérovi". Avšak, jedná se až o samotný závěr a věřit můžete, až když si projdete předchozích 11 užitečných rad...

(via Digital Web Magazine)

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

SEOChat.com v novém

Populární diskusní web SEOChat prošel docelý hezkým redesignem, je teď přehlednější a celkově vypadá o trochu veseleji (míň veseleji však působí skóre, které stránka dosáhla na W3C Validatoru - 619 chyb, to není špatné ;-). Zajímavější informace však je ta, že autoři chystají také vylepšení na jejich webu Google Dance, což je docela užitečný webík pro všechny, kteří se vyžívají v SEO.

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

čtvrtek, 26. červen 2003

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

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

Beta verze nového Google Toolbaru 2.0

Z konference seo.nawebu.cz jsem se dozvěděl o nové beta verzi "Gůglího" Toolbaru 2.0, naleznete jej na adrese http://toolbar.google.com/index-beta, škoda jen, že u mě nefungoval - snad budete mít více štěstí. Tři hlavní novinky by měly být blokování POP-UP oken, automatické vyplňování formulářů a funkce BlogThis, u té jsem však zatím nepochopil, jak bude fungovat ("Create a weblog post pointing to the page you are visiting").

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

středa, 25. červen 2003

Nové šablony pro EasyBlog II.

Po delší době jsem ušetřil trochu času, a tak jsem se pustil do tvorby nové šablony pro EasyBlog, který sám používám pro generování tohoto weblogu. Tentokrát jsem použil trochu více grafiky - celkem 10kB ;-) Snažil jsem se celou stránku tradičně co nejvíc odladit, zatím jsem ji testoval na IE 5.5, Mozille a Opeře a nevysktly se žádné problémy.

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

Optimální šířka odstavce II.

Zatímco pro Lukáše Oborského je poslední dobou zdrojem nápadů k zamyšlení SeldaBlog, pro mě je poslední dobou tímto zdrojem právě jeho blog Letem světem. Dovolil bych si souhlasit s jeho názorem vyřčeným v jeho článku Optimální šířka odstavce. Také zastávám ten názor, že čtenáři bychom neměli nic napevno předepisovat. Když jsem si představil tento weblog s definovanou šířkou 600px (což by odpovídalo oné optimální šířce 400px pro souvislý blok textu - která se obecně doporučuje), tak se mě zmocnila hrůza, nejen, že ve vyšším rozlišení by weblog vypadal opravdu hrozně, ale nabyl jsem dojmu, že pro čitelnost textu jsou důležitější některé jiné parametry - velikost, kontrastnost, typ, šířka mezer mezi řádky a případně i šířka mezi samotnými písmeny...

To jsou věci, které si čtenář obvykle nastavit nemůže, nebo neumí, zatímco změnit rozměr okna by měl umět snad každý...

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

Omluva za výpadky

Omlouvám se vám za výpadky, které v poslední době postihují provoz těchto stránek, bohužel není v mé moci jim zabránit. Stránky nyní běží z nového serveru, takže můžu jen doufat, že problémy jsou již překonány, kdyby tomu tak nebylo, tak mi prosím nepište, co se děje. Zatím nekončím, ani mi ty stránky nikdo nesmazal, jen prostě zlobí hardware.

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

Web-Graphics.com slaví třetí narozeniny

Kolaborativní weblog Web-Graphics oslavil 23. června tři roky svého fungování.

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

pondělí, 23. červen 2003

Souhrn článků o architektuře vyhledávačů

Dušan 'Yuhů' Janovský mě opět mile překvapil, když na svém blogu sepsal moc hezký souhrn článků od Karla Pánka, týkající se architektury vyhledávačů. Jedná se o články, které již dříve uveřejnila Lupa. Většinu ze zmíněných článků jsem četl již v době vydání a musím říct, že na českém internetu byste články na toto téma a v této kvalitě hledali dost těžko (většinu z nich mám ještě pečlivě uloženou na disku), proto bravo oběma! Souhrn článků i s krátkými popisky, tak, jak je připravil Yuhů nalezente v příspěvku Architektura vyhledávačů.

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

Vyhledávání podle Julie Albertson

Po trochu delší době o sobě dala opět vědět Julie Albertson, svým článkem Advanced search interface. Kterým navazuje na tři předešlé články z jejího seriálu pojmenovaného Search design. Článek se tentokrát zaměřuje především na pokročilejší rozhraní vyhledávací stránky a obsahuje celou řadu užitečných rad, které se budou jistě hodit každému, kdo navrhuje vyhledávací stránku.

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

pátek, 20. červen 2003

Jak se dostat do Google za 30 dní? Nebo rychleji?

Poslední dobou čtu docela pravidelně Microdoc News, který denně informuje o novinkách ohledně největšího světového fulltextu Google, a tak mi neunikl docela zajímavý článek Get Listed in Google in 30 Days or Less, jinými slovy, jak se dostat do Google co nejrychleji.

  • Přidávejte nové stránky
  • Zajistěte si zpětné odkazy z weblogů a stránek, které jsou často aktualizované
  • Pište kvalitní články pro ostatní, kteří je budou rádi odkazovat
  • Vytvářejte si spřátelné weby, když někdo odkazuje na vás, oplaťte mu to - buďte šlechetní

Jedná se sice o docela typické rady, článek je však podrobněji rozebírá. Já osobně bych doplnil ještě jeden neméně důležitý bod: "Naveďte Google tím správným směrem, přes příslušnou stránku", dle mých zkušeností pak spider opravdu přijde a to docela rychle.

Pro lepší pochopení, jak se dostat do Google a hlavně, jak zlepšit svůj PageRank bych vám doporučil jeden starší, ale vynikající článek The Google Pagerank Algorithm and How It Works, který napsal zhruba před rokem Ian Rogers a který vám detailně popíše, jak se PageRank počítá, jaký je rozdíl mezi PR a Toolbar PR, jak se vypočítávají hodnoty z různých mezi stránkových vztahů a mnoho dalšího...

Mimochodem, včera jsem si přečetl u Dušana jeho příspěvek Jak vypadnout z Google, ve kterém si postěžoval na metodu 301 Moved Permanently, použitou při stěhování jeho webu. Ve zmíněném příspěvku doporučil k tomuto účelu "měkčí formu" v podobě meta refreshe, k tomuto názoru se také přikláním, u mě už Google i Jyxo pomalu vytlačují původní odkazy a nahrazují je novými - uvidíme, jak to všechno dopadne, až skončí aktuální dance Esmeralda...

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

Craig Saila zpovídá Marka Newhouse

Digital Web Magazine uveřejnil další ze série rozhovorů s velkými osobnostmi webdesignu, toto interview je o to zajímavější, že Craig Saila tentokrát není v roli zpovídaného, ale právě on se ujal rozhovoru s dalším velikánem, kterým není nikdo menší, než CSS kouzelník Mark Newhouse. Z článku An interview with Mark Newhouse jsem vybral jednu z otázek...

Jaké jsou tři hlavní rady při tvorbě webu postaveného na standardech?

Zapomeňte na tag font a nahraďte jej CSS, tím lze ušetřit až 50% velikosti stránky. Dále se snažte snížit počet vnořených tabulek sloužících k layoutu a nahraďte je CSS kopiemi. A za třetí - ověřujte funkčnost pomocí příslušných validátorů, které mohou být velmi nápomocné dohledávání případných chyb...

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

středa, 18. červen 2003

Error 404: Page Not Found

V posledních dnech řeším dilema s tím, jak vytvořit vhodnou chybou stránku 404 pro svůj web, při té příležitosti jsem se porozhlédl po radách odborníků a narazil jsem na jeden velice pěkně napsaný článek - Useful "Page not found" error pages který již před hodně dlouhou dobou uveřejnil evolt.org. Dovolil bych si z něj vytáhnout pár nejdůležitějších rad:

  • Nepřesměrovávejte uživatele automaticky na hlavní stránku
  • Zobrazte přátelštější chybovou hlášku, neomezte se pouze na strohé: "Page Not Found"
  • Vhodné je umístit na chybovou stránku vyhledávač
  • Případně by také neměl chybět kontaktní email nebo formulář na webmastera
  • Mapa webu je v tomto směru také velice užitečná

Další informace a příklady vhodně i nevhodně řešených "čtyři sta čtyřek" naleznete ve výše zmíněném článku. Na závěr ještě zmíním autora, kterého jsem v úvodu opomněl - Madhu Menon a jeho weblog naleznete na http://madman.weblogs.com...

Poznámka: Svou stránku 404 ještě nemám hotovou, takže to zbytečně nezkoušejte ;-)

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

Jak je to s podporou CSS3?

Je to zhruba 14 dní, co jsem odkazoval na stránku Abridged CSS2 Support Charts umístěnou na webu MacEdition, na stejném webu nyní vyšel navazující článek nazvaný MacEdition Guide to CSS3 Selector Support, který ve velice přehledné tabulce pro změnu shrnuje podporu CSS3 v majoritních i minoritních prohlížečích. Velice užitečné!

(via Digital Web Magazine)

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

Jak vytvářet seznamy definic?

K čemu je dobré vytvářet na stránce seznam definic popisuje ve svém včerejším článku Definition Lists. <DL>, <DT> and <DD> Ben Meadowcroft. V článku se dozvíte, které tagy budete k tomuto účelu potřebovat a jak s nimi správně zacházet, nechybí řada příkladů. Zde je ten nejjednodušší:

<dl>
  <dt>Cascading Style Sheets</dt>
    <dd>Style sheets are used to provide presentational 
    suggestions for structured documents marked up in 
    XML or HTML.</dd>
</dl> 

(via Brainstorms and Raves)

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

pondělí, 16. červen 2003

Další krok k lepší přístupnosti - accesskey

Jeffrey Zeldman dnes na svém webu odkazuje na článek Accesskeys: Unlocking Hidden Navigation od Stuarta Robertsona, uveřejněný v rámci A List Apart. Jeffrey ve svém blogu o tomto příspěvku píše:

Všechny aplikace mají klávesovou zkratku. Také na vašem webu můžete používat atribut accesskey, který dělá web mnohem více přístupný i pro návštěvníka, který nemůže používat myš. Bohužel téměř žádný designér toho nevyužívá...

Článek Vám mohu vřele doporučit, jako většina článků na A List Apart má vysokou informativní hodnotu. A i díky němu budete možná moci vytvořit web ještě více přístupný pro všechny...

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

10 tipů a technik pro přístupnější web

Na diskusním fóru WebmasterWorld se objevil před pár dny docela hezký příspěvek 10 tips and techniques for making your site accessible, jedná se o zjednodušený výtah z projektu Dive Into Accessibility, který loni vydal Mark Pilgrim. Zde je několik nejdůležitějších rad ze zmíněného fóra:

  • Definujte použitý jazyk
  • Používejte výstižné titulky stránek
  • Vytvořte přídavnou navigaci (tag link)
  • Hlavní obsah vypisujte hned v záhlaví stránky
  • Vložte odkaz, který umožní při vypnutých stylech přeskočit navigaci (přes display: none)
  • Volte vhodné barvy
  • Netvořte odkazy řešené JavaScriptem
  • Formulujte jasné a výstižné popisky odkazů
  • Používejte shrnující hlavičky u tabulek
  • Velikost písma definujte vždy v relativních hodnotách

Více naleznete ve zmíněném příspěvku z něhož ještě vybírám docela užitečnou informaci:

Různou vadu ve vnímání barev má až 8% lidí, například lidé s vadou nazvanou Deuteranope od sebe neodliší zelený text a červené odkazy, myslím, že je to jen další důkaz toho, že odkazy je nutné podtrhávat...

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

Zvyšte důvěryhodnost svého firemního webu

Důvěryhodnost je pro návštěvníka komerční, ale i nekomerční stránky velice důležitá, jedná se o jakýsi subjektivní pocit toho, jak na něj daná stránka působí. Důvěryhodnost si nemůžeme koupit, ale můžete si ji vybudovat svým přístupem a zpracováním svého webu, v tomto příspěvku se proto budu snažit představit vám pár základních tipů a triků jak na to, aby náš web působil důvěryhodněji.

  • O seriózním záměru může napovědět jak kvalita zpracování grafiky tak zdrojového kódu. Sama stránka by již na první pohled neměla obsahovat laciné prvky (animace, obrázky na pozadí apod.) z různých grafických databank
  • Pokud na stránce citujete někoho jiného, neměli byste opomenout uvést zdroj citátu
  • Mnoho dokáže napovědět styl zvoleného jazyka a vyjadřování
  • Na firemní stránky rozhodně nepatří reklamní bannery
  • Kvalitní stránka s níž to autor myslí vážně by měla mít vlastní doménu II. řádu, zejména u firemních stránek to platí dvojnásob
  • Na firemní stránce bychom neměl zapomenout na přesný popis nabízených služeb
  • ...totéž platí také o ukázkách již hotových prací
  • Pokud je to možné, neměl by rozhodně chybět co možná nejpodrobnější ceník
  • Velice důležité jsou kontaktní informace - email, či mobilní telefon jsou nedostačující informace

Pohled z druhé strany: Jakožto návštěvníci mějme na paměti, že i když stránka splňuje všechna tato pravidla není to v žádném případě 100% záruka její důvěryhodnosti! V řadě případů to však můžeme brát jako jakési prvotní vodítko...

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

Jsou Vám jasné významové elementy?

Na weblogu Zápisky se semináře IVT se objevil článek, snažící se objasnit některé významové elementy (angl. phrase elements), pokud vám tedy nejsou známy funkce příkazů jako je cite, code, ale i méně známé jako jsou dfn, var případně kdb, tak vysvětlení hledejte ve výše zmíněném článku.

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

sobota, 14. červen 2003

Vstupní stránka, má své opodstatnění?

Vstupní stránky - jistě je všichni znáte, právě ony jsou totiž jedním z neduhů celé řady webů. Jedná se o stránky, které jsou předřazeny před stránkou hlavní, jejich účel bývá různý - povětšinou však žádný. Nedávno jsem měl za úkol nahrát na FTP server stránky, které si jeden přítel sám vytvořil doma za pomoci editoru (nutno poznamenat, že v tomto směru nemá žádné zkušenosti a ani s internetem není moc velký přítel), docela mě překvapilo, že zcela intuitivně vytvořil i vstupní stránku. Z tohoto příkladu by se dala vystopovat jistá snaha začínajících tvůrců: "Snaha vytvořit z webové stránky papírový magazín a vstupní stránku pojmout jako jakousi obálku, která zastřešuje následný obsah".

Měli bychom si však uvědomit celou řadu aspektu mluvících proti tomuto postupu...

  • Vstupní stránka zdržuje svým načítáním a zbytečně tak komplikuje cestu k hlavní stránce
  • Grafické provedení této stránky se často liší od ostatních podstránek, což může po vstupu vést k pocitu, že se uživatel nachází na úplně jiném webu
  • Právě přechod přes vstupní stránku bývá často hlavním úskalím, věty typu: "Pro vstup klikněte na obrázek vlevo nahoře" jsou zcela nepřípustné
  • ...nemluvě o automatickém meta přesměrování po stanovené době
  • Při častých návštěvách působí neměnná vstupní stránka značně stereotypně

Jediný klad a účelné využití potenciálu vstupní stránky pochopili snad jen některé nejmenované weby, které ji používají jako reklamní plochu (teď mě neberte vážně :o) a stránky, které ji používají jako jazykový, případně formátový rozcestník - u nich se ale pro změnu nabízí otázka:

Proč v těchto případech obvykle nejsou pro zapamatování použity cookies?! Koho baví každý den klikat na stejné informace?! 99% návštěvníků si stejně zvolí češtinu a díky rychlosti (pomalosti?) modemů verzi bez Flashe...

K tomuto názoru a sepsání těchto řádek mě přivedlo bezcílené brouzdání českým internetem, vaše smysluplné názory rád přivítám v komentářích...

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

pátek, 13. červen 2003

Zamrzlý Pixy :o)

Pixy změnil výchozí barevné schéma svého Pixylophone, jeho původní khaki styl teď nahradily studené a melancholické barvy laděné do šedo-fialové, celkově to na mě působí jako zimní kabát - který se ale teď do těch veder moc nehodí ;-) Jedinou větší přednost vidím v barevném sladění ikonek, na které jsem již dříve poukazoval - skutečně to teď vypadá o dost líp! Jedna stížnost na závěr - zlobí přepínání stylů, takže se zdá, že na chvíli "zamrzneme" bez možnosti změny...

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

Interview s Jeffrey Zeldmanem

Brain Alvey na serveru Meet The Makers zpovídal Jeffreyho Zeldmana, celý opravdu dlouhý rozhovor (je rozdělen na šest stránek) si můžete přečíst v článku A Conversation With Jeffrey Zeldman On Web Standards (Meet The Makers, 6.5.2003). Rozhovor se týká především projektu WaSP, webové typografie - Jeffrey tu srovnává jednotky EM a pixely (což mi trochu nahrává k mému příspěvku uveřejněnému před pár dny), další část je věnována XHTML, CSS a standardům a v neposlední řadě je také řeč o Zeldmanově nové knize Designing with Web Standards. Je to celé dost dlouhé, ale poučné - prostě kvalitní čtení na víkend.

(via Brainstorms and Raves)

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

Další pěkné CSS záložky, tentokrát trochu jinak

V minulém článku jsem uvedl odkaz na záložky, jejichž autorem je Dan Cederholm, rád bych se k nim ještě krátce vrátil, protože mě docela zaujaly. Dle mého názoru jsou opravdu povedené, působí moderním a neokoukaným dojmem (nejedná se totiž o klasické záložky - je to spíš jistá modifikace) a zdá se, že fungují opravdu dobře. Sám Dan je testoval na všech novějších prohlížečích. K vašemu případnému ozkoušení jsou na samostatné ukázkové stránce.

Když už jsme u těch záložek, tak stojí za zmínku také ty u Seldy, které se objevily jako součást jeho nového letního kabátku. A pochopitelně nesmím zapomenout ani na "malou domů" v podobě svých záložek, které jsem zde ukazoval nedávno.

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

středa, 11. červen 2003

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

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

Velikost písma, v čem ji definovat?

V posledních dnech se na některých českých blozích hojně diskutovalo o tom, v jakých jednotkách definovat velikost písma, za všechno "může" Markův příspěvek Velikost písma - máte, co jste chtěli, který pak podrobněji rozebral zejména Lukáš Oborský ve svém článku Optimální velikosti písma. Ve výše zmíněných článcích se probírali především dvě základní jednotky a to pixely a procentuální vyjádření, já si beru za cíl tímto článkem poukázat ještě na dvě další (trochu opomíjené jednotky), Em a typografické body, přičemž se budu snažit poukázat na výhody a nevýhody obou.

Poznámka: Tento příspěvek je výtahem z celé řady článků, komentářů a diskusí, za vaše případné připomínky a komentáře budu jen rád...

Em [em]: EM je typografickou jednotkou měření, oficiálně se udává, že odpovídá svou šířkou písmenu "m" / "M", dle aktuálně použitého fontu, jedná se tedy o jednotky relativní. V standardním nastavení Internet Exploreru odpovídá hodnota 1em=12pt=16px. Hlavní výhoda je ta, že přes EM je možné vystavět "elastický" layout stránky, který se při změně velikosti písma nijak nerozsype. Toho využívá např. Pixy, který má svůj web vystavěný právě na těchto jednotkách, na což poukazuje i jeho ikonka Em-web Resizable. Neměl bych však zamlčet ani nevýhody, tak předně, velikosti se liší v závislosti na platformě (PC v poměru k Macu 3:2). Druhý známý problém se týká archaického IE 3.0 na Windows 95, text by údajně neměl být vůbec čitelný, protože IE 3.0 tyto jednotky nezná. I Mac verze tohoto browseru má mizivou podporu, řešení jsou pochopitelně nasnadě - odříznout tyto browsery přes CSS, případně použít externí JavaScript, který uvádí WebMonkey.

Dovolte mi krátce ocitovat Yuhůův komentář...

Jednotky em a ex mění svou velikost v závislosti na aktuální velikosti písma. Aktuální velikost písma je ovlivněna jednak formátovacími značkami (<big> apod.), jednak volbou uživatele. Většina prohlížečů totiž umožňuje nastavit velikost zobrazovaného písma (zobrazit / velikost textu). To je i základní význam těchto jednotek -- umožňují design, který se při změně tohoto nastavení nerozsype.

Již výše jsem říkal, že se rozměry liší v závislosti na platformě, zde je příklad...

Když nastavíte v CSS zápisu hodnotu "1.33em", tak to znamená, že při standardním nastavení 12pt nebo "střední velikosti" se na stránce zobrazí 16pt text, přičemž vezmeme-li v potaz 96dpi (klasické Windows) bude to celé odpovídat 21.33 pixelům - a aby to nebylo jednoduché, na Macu to bude odpovídat zhruba 16 pixelům...

V názoru Lukáše Oborského jsem narazil ještě na jednu drobnost, o které jsem nevěděl, a kterou bych zde v souvislosti rád zmínil, dá se totiž považovat zda nevýhodu: "U jednotek Em jsem zjistil, že míra zvětšování a zmenšování je příliš hrubá - největší písmo je nepoužitelné a nejmenší nečitelné", vyzkoušel jsem to a je to skutečně tak (poměr zvětšování i zmenšování je zhruba 2:1 oproti změnám procentuálních hodnot)...

Points [pt]: Nebo-li typografické body rozhodně nejsou vhodné pro počítačovou obrazovku, jak již jejich název napovídá, jedná se o jednotky vhodné pouze pro tisk stránek, kde také mají své jediné uplatnění. Jedná se o absolutní hodnoty - poměr mezi nimi a pixely je 1:4/3, přičemž 72pt odpovídá hodnotě 1in. Největší problém těchto jednotek v operačních systémech a v přeneseném významu pak i v prohlížečích, je ten, že Mac používá 72dpi, jenže operační systém Windows počítá s 96dpi, případně i se 120dpi (záleží na nastavení), poměr bodů a palců se tedy rázem mění. K tomuto se váže jeden velmi starý příklad (leč stále aktuální), který kdysi popsal Todd Fahrner - Why Points Suck. Jinými slovy, text velký 16pt bude 16pt velký, bude-li zobrazen v rozlišení 96dpi, ovšem při rozlišení 72dpi bude velký pouze 12pt (což odpovídá 12/72in)! Poměr zůstal zachován, ale byl přímo úměrně zmenšen! Ještě jeden obdobný příklad...

12pt text na Windows používající 17" CRT display a 96dpi bude při rozlišení 800x600 přibližně 13/72in velký, ale při rozlišení 1027x768 se bude jednat již pouze o 10/72in...

Závěr: Co z toho všeho plyne? Předně, body jsou jediné správné řešení při zadávání velikosti písma pro tisk, jiné účelné využití nemají! Em se zdají být silným konkurentem pro pixely a procenta, dle někoho jsou nejlepší, dle někoho nevhodné - své striktní stanovisko v této otázce vám bohužel nedám, neboť jej nemám, myslím, že vhodný závěr již tradičně vystihl Marek Prokop slovy: "Pokud jde o mne, ideální řešení pro tento případ neznám. Znám jen kompromisy".

Zdroje:

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

Eric Meyer změnil svůj vzhled

Eric Meyer, respektive jeho MeyerWeb před pár dny změnil svůj vzhled. Celý jeho web je nyní postaven na CSS-P a nabízí hned několik druhů skinů...

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

pondělí, 9. červen 2003

Interview s Markem Pilgrimem

Interview se známými osobnostmi světového webdesignu není nikdy dost a tak i já přidám svou trošku do mlýna. Na serveru Waffle jsem narazil na jeden trochu delší rozhovor s Markem Pilgrimem. Obsah rozhovoru těžko shrnovat, text je velice různorodý, takže bude nejlépe, když si jej přečtete sami. Za zmínku však bezpochyby stojí odstavec, v němž Mark shrnuje svůj názor na XHTML 2.0...

(via Mark Pilgrim)

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

Skutečně transparentní PNG pomocí JavaScriptu

Bob Osola připravil článek, v němž řeší problém transparentního obrázku ve formátu PNG ve chvíli, kdy přechází přes křižovatku další barvy. V článku používá jednoduchý JavaScript, pomocí něhož řeší tento nedostatek v Internet Exploreru 5.5 a vyšším, dle autora by však měl být skript funkční ve všech novějších prohlížečích. Docela zajímavé, více informací i názorný nástin problému naleznete v článku PNGs working in Windows IE...

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

neděle, 8. červen 2003

Pár rad pro tisk WWW stránek s využitím CSS

Poohlédl jsem se po některých obecných radách souvisejících s tiskem webových stránek. Níže uvádím malý výtah těch nejdůležitějších rad, na které jsem narazil a kterých je vhodné se při nastavování stylu držet. Jedná se o výtah z několika článků najednou, zdroje uvádím v zápatí článku...

  • Šířku stránky pro tisk nastavuje vždy na 100%, hodnoty v pixelech jenž jsou širší, než klasický formát A4 by totiž mohly dělat neplechu
  • Pokud nepodtrháváte odkazy (což je základní chyba), tak na to nezapomeňte alespoň v zápisu pro tisk - při černobílém tisku totiž odkazy splynou s okolním textem
  • Velká výhoda je ta, že můžete některé, pro tisk neužitečné části (např. panely, reklamy apod.) skrýt (příkaz display: none) a přímo tak ovlivnit vzhled vytisknuté stránky, tuto možnost bohatě využívám u svých článků
  • Pro tisk na papír je vhodnější patkové písmo (např. Times, Georgia ad. - obecně však je nejlépe nastavit pouze "serif"), které navíc může být o něco menší, než na monitoru
  • ...totéž platí i o vertikálních mezerách mezi řádky
  • Skryjte všechny nepotřebné grafické prvky (zejména obrázky na pozadí), tisknutá stránka musí být na bílém pozadí a černým písmem, jinak se text může velmi lehce stát nečitelným. Je sice pravda, že standardně má prohlížeč nastavenu možnost netisknout barvy a obrázky na pozadí, ale pro jistotu to nastavte i ve svém stylu
  • Nezapomeňte kontrolovat stránku přes menu Soubor » Náhled (v IE)

Externí soubor se styly určenými pro tisk můžete ke stránce připojit např. takto: <link rel="stylesheet" media="print" href="print.css" type="text/css" />

Zdroje:

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

sobota, 7. červen 2003

Dva nové kvalitní blogy

Pavel Francírek má svůj nový weblog, umístěný na adrese http://blog.lide.cz/franci/, dozvěděl jsem se o něm přes conBlog - který ovšem zapomněl uvést odkaz (ještě že tam jsou komentáře), takže jsem se k němu dostal trochu oklikou. Přes weblog Letem světem jsem pro změnu narazil na weblog Jiřího Doubka, alias Potápníka... Zdá se, že oba blogy jsou docela na úrovni, takže je zde tímto zmiňuji a přeji hodně štěstí v práci!

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

Barvičky a použitelnost po sté

GrokDotCom uveřejnil článek nazvaný Color and Usability, v němž jsou v několika bodech shrnuty všechny (nebo alespoň většina) základní rady související s používáním a volbou barev pro webové stránky. Toto téma je sice už takovou klasikou v článcích o použitelnosti, ale jak se říká: "Opakování je matka moudrosti", takže pokud si chcete osvěžit své znalosti, tak Váš těch pár minut čtení nezabije ;-)

Pro obohacení příspěvku jsem vybral jeden docela zajímavý poznatek...

Protože modré receptory v oku jsou nejméně zastoupeny, vyhněte se malému modrému textu a tenkým modrým čarám v diagramech...

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

čtvrtek, 5. červen 2003

Vizionář Yuhů

Pravidelně čtu Yuhůův weblog o webu, a tak mi neunikl jeho vizionářský příspěvek Seznam a Pů, v němž autor odhaduje reakci Pooha na změnu vzhledu největšího českého portálu - a v němž mimo jiné píše: "V první řadě se pozastaví nad barvami hlavní stránky a nového hledání". No, dneska jsem se podíval na Pooha a zdá se, že se Yuhů trefil opravdu do černého...

Proč o tom všem ale píšu? Mám totiž pocit, že Pů (rozuměj Pooh.cz Dane...) opravdu poslední dobou ryje do všeho a do všech - a mně osobně se to nelíbí! Zvláště podívám-li se na vzhledové kvality jeho samotného. Vzkaz autorovi "článku" - raději si to po sobě přečti, chybek tam je na ty čtyři řádky docela dost...

PS: Omlouvám se za malý off-topic, ale docela mě to pobavilo...

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

Google, SEO a něco o vyhledávačích...

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

úterý, 3. červen 2003

Jak je to s podporou CSS2?

Moc hezky zpracovanou, a velice přehlednou tabulku podpory CSS2, respektive jejich vlastností naleznete v článku Abridged CSS2 Support Charts, uveřejném na webu MacEdition. Článek obsahuje IE 6.0 (Win), IE 5.0 (Mac), Gecko, Opera 7 a některé další "Macovské" prohlížeče, např. Safari, Konqueror, Omniweb a další. Rychlé orientaci v rozsáhlé tabulce napomáhají barvy informující o tom, zda prohlížeč danou funkci podporuje zcela, z části, s chybami nebo vůbec...

(via Digital Web Magazine)

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

pondělí, 2. červen 2003

Interview s Andy Kingem o rychlostní optimalizaci stránek

Náhodou jsem narazil na jeden starší článek umístěný na serveru WebWord, jedná se o interview s Andy Kingem, autorem knihy Speed Up Your Site: Web Site Optimalization (WebWord, leden 2003). Přesto, že se jedná o trochu starší článek, myslím, že stojí za to se o něm zmínit. Z mnoha otázek a odpovědí obsažených v článků vybírám:

Jaký je nejčastější problém při optimalizaci stránek?

Příliš mnoho HTTP dotazů. Jedná se především o obrázky a jiné externí soubory. Trendem je například hodně externích JavaScriptů a CSS stylů obsažených v hlavičce stránky. Tyto objekty brání zobrazení obsahu, protože se musí načíst před samotným obsahem...

(volně přeloženo, zkráceno)

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

Rozsáhlý popis layoutu pro CSS Zen Garden

Doug Bowman vytvořil nový layout pro CSS Zen Garden, nazvaný Golden Mean. Na svém weblogu Stopdesign pak poměrně obsáhle a velice zajímavě popisuje celý proces návrhu a zpracování designu, nevynechává ani technické CSS detaily. Zajímavé čtení i pro pokročilé...

(via Simon Willison)

Aktualizováno: aneb, nevýhoda offline bloggování - všichni vás předběhnou ;-)

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

neděle, 1. červen 2003

Důležité informace

Rád bych poprosil všechny čtenáře i přátele, kteří na mě odkazují, případně autory RSS agregátorů, aby si změnili své bookmarky. Díky!

Důležité: Stará verze umístěna na serveru www.poeta.cz/prirucka/weblog již nebude aktualizována!

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

Jak na "Error 301 Moved Permanently"?

V souvislosti s přesouváním celého webu jsem se na internetu podíval na pár tipů, jak nejlépe celý proces zautomatizovat, na české konferenci SEO příznivců jsem narazil na docela pěkný PHP skript, jehož autorem je Ondrej Ivanič...

<?php

urlList = array( '/subor.html' => '/nove/url/k/soubor.html'; // atd pro ostatní soubory );

if(isset(urlList[$_SERVER['REQUEST_URI']]) { // pre php > 4.3 header('Location: '.urlencode(urlList[[$_SERVER['REQUEST_URI']]), true, 301);

// pre php < 4.3 //header('Location: //'.urlencode(urlList[[$_SERVER['REQUEST_URI']])); //header('Status: 301 Moved Permanently'); } else { // skutečná 404 }

?>

Celý skript se umístí jako chybová stránka 404 (Stránka nebyla nenalezena). Skript pak pomocí několika PHP příkazů "vyparsuje" název souboru a podle něj zvolí z pole novou URL. Docela elegantní řešení, navíc asi jediné opravdu správné (tento postup doporučuje i Google). Škoda jen, že na starém hostingu nemám povoleno modifikovat chybové stránky, takže mi asi nezbude nic jiného, než přesměrovávat pomocí meta tagů... :-(

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

Nové šablony pro EasyBlog

Libor Krayzel plánuje do příštích distribucí svého Easyblogu přibalení nových šablon. První dvě jsou již umístěny na jeho webu - http://www.elka.cz/easyblog/templates.htm. Mám tu čest, že jsem jedním z autorů - moji první template si ale můžete stáhnout i zde...

Autor: Vít Dlouhý, čas: 11:13, 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