Sova v síti - 1/5 - vydáno 23.4.2001 Dobrý den, je zde pondělí a s ním vaše Sova v síti :-) OBSAH -- Jak zvolit šířku stránky -- Výhody a nevýhody rámců -- Výzva ke spolupráci na zajímavém experimentu -- Odpovídáme na dotazy čtenářů Čtenářům, kteří na domovské stránce Sovy v síti sledují, co bude v příštím čísle, a tudíž dnes očekávali článek o bannerové reklamě, se omlouváme. Aktuálně jsme místo něho zařadili výzvu ke spolupráci na zajímavém experimentu, který chceme podniknout ve spolu s webzinem Interval.cz. Článek Zásady bannerové reklamy bude zveřejněn v příštím čísle. JAK ZVOLIT ŠÍŘKU STRÁNKY (Příklad k tomuto článku naleznete na adrese http://www.sovavsiti.cz/samples/samp0105.html) Jak dimenzovat šířku stránky - to je, nebo by alespoň mělo být, velké dilema každého webového návrháře. Uživatelé internetu používají různě veliké monitory s různým nastavením grafického rozlišení. Některé stránky by navíc měly jít i vytisknout. Navzájem protichůdných požadavků je příliš mnoho a ideální univerzální řešení neexistuje. Co tedy s tím? Zkusme si nejprve shrnout hlavní požadavky, které mají na rozhodování o šířce stránky vliv: -- Nejdůležitější informace by se měly nacházet v tzv. bezpečné oblasti. Tou je myšlen výřez stránky, kterou po jejím otevření uživatel uvidí bez rolování (horizontálního i vertikálního). Američané mají pro bezpečnou oblast přiléhavý název "above the fold", tedy "nad přehybem". Tento název vychází z novinářské praxe, kde označuje horní polovinu titulní stránky, viditelnou na stáncích i pro ty, kteří si noviny nekoupí. Právě tato část musí zaujmout natolik, aby si čtenář noviny koupil (a dostal se tak tedy i k informacím "below the fold"). -- Jakákoli významově souvislá oblast textu musí být zobrazena na šířku celá bez nutnosti horizontálního rolování. -- Je-li stránka určena k tisku, musí se vejít na šířku A4. -- Nejčitelnější jsou řádky 30-70 znaků dlouhé - viz klasické novinové sloupce a knihy. Nad 80 znaků se řádek stává čitelný obtížně a 150 znaků široké řádky (normální velikost písma na celé šířce monitoru v rozlišení 800x600) už čte jen masochista. Nyní se podívejme, jaké možnosti dimenzovat šířku při návrhu stránky máme k dispozici. 1) Plovoucí šířka Zdálo by se, že se jedná o nejpřirozenější volbu. V každém případě se nejsnáze realizuje, neboť prostý HTML text neumístěný do tabulek a neovlivněný CSS se samovolně přizpůsobuje šířce vnitřního zobrazovacího prostoru prohlížeče. Při vyšším rozlišení jsou však problém příliš dlouhé řádky, které se od 80 znaků výše stávají obtížně čitelnými. 2) Pevná šířka Pevnou šířku stránky docílíme jejím umístěním do tabulky s explicitně uvedenou šířkou v pixelech, např. Problém ovšem je, jakou šířku zvolit. Příliš veliká šířka přinutí majitele malých monitorů k nežádoucímu horizontálnímu rolování, o příliš dlouhých řádcích textu nemluvě a příliš malá šířka zase způsobí ve velikých oknech prohlížečů ošklivý prázdný prostor na straně. 3) Vícesloupcová sazba Lékem na výše uvedené problémy může být vícesloupcová sazba. Šířku stránky totiž můžeme pomocí tabulky rozdělit na více sloupců. Jak samotná tabulka, tak jednotlivé sloupce přitom mohou mít buď pevnou, nebo plovoucí šířku. Příkladem je tato struktura, která vytvoří 2 sloupce, první široký 130 pixelů a druhý celý zbytek obrazovky:
4) Varianty pro různé šířky Poslední možností je si pomocí JavaScriptu zjistit šířku uživatelovi obrazovky a pak mu předložit stránku šitou přímo na míru. Je to sice způsob ideální, ale velmi náročný jak na realizaci, tak na následný provoz a údržbu stránek. Samozřejmě zůstává otázka, který z uvedených způsobů zvolit. Jak jsem již napsal, univerzální odpověď neexistuje. Vždy je třeba vyjít z cíle stránek, předpokládaného publika, povahy obsahu a možností rozpočtu. Nejčastěji se dnes stránky asi navrhují s pevnou šířkou pro rozlišení 800x600. Je to logické, neboť dle dostupných statistik má toto rozlišení nastaveno cca. 50% uživatelů a již pouze minimum používá rozlišení nižší. Zde jsou aktuální čísla statmarket.com ze 17.2.2001 získaná ze statistik návštěvnosti více než 50 milionů webů: 640x480: 7% 800x600: 53% 1024x768: 31% 1152x864: 2.5% 1280x1024: 2.5% jiné: 4% Málokdo si ale uvědomuje, že rozlišení obrazovky ovlivňuje velikost zobrazovací plochy jen nepřímo. Ne každý má prohlížeč roztažen na celou obrazovku. Ve skutečnosti čím vyšší rozlišení, tím spíš je prohlížeč stažen do menšího okna. Kromě toho menu, nástrojová lišta a stavová řádka prohlížeče mohou vertikálně ubrat až 120 pixelů a další část z výšky obrazovky sebere lišta Windows, která však někdy může být orientovaná i vertikálně. MSIE 5 a NN 6 mohou mít vlevo zobrazený boční panel, který horizontálně ubere asi 160 pixelů. Všechny tyto ztráty šířky a výšky se navíc násobí, pokud má uživatel nastavené ve Windows velké systémové fonty, což má na vyšším rozlišení mnoho starších lidí se slabším zrakem. Z těchto důvodů i v dnešní době velkých monitorů zůstává bezpečná oblast široká jen 600 a vysoká cca. 350 pixelů. Vše ostatní je "za přehybem" a pokud tam umístíte důležitou informaci, riskujete, že ji uživatel nikdy neuvidí. Tato úvaha vede nejčastěji k řešení pomocí vícesloupcové sazby. Zůstává sice pevná šířka optimalizovaná pro rozlišení 800x600 (což znamená šířku max. 780 pixelů, neboť něco zaberou okraje a posuvník prohlížeče), avšak nejpodstatnější informace se umístí do sloupce (či sloupců) nepřesahující šířku 600 pixelů. Zároveň se vytvoří speciální, užší stránky určené výhradně pro tisk. Protože je grafický návrh vícesloupcové sazby dosti náročný, často se pro čistě informační stránky omezené nízkým rozpočtem používá pevná šířka 600 pixelů. Aby v tomto případě na větších monitorech nevznikal ošklivý okraj vpravo od textu, celá tabulka se vycentruje. Okraje tak sice vzniknou dva, avšak poloviční velikosti a působí tedy méně rušivě. Tento trik využívá např. Yahoo, nebo Seznam. Jednosloupcová sazba o plovoucí šířce, tj. nijak neovlivněný HTML text se hodí spíše pro stránky s nejnižším rozpočtem obsahující hodnotné informace určené zkušenějším uživatelů (např. pro universitní prostředí). Bude-li obsah takových stránek opravdu stát za to, čtenáři si ho buď vytisknou, nebo si zmenší okno svého monitoru na velikost z hlediska čitelnosti optimální. Máte-li naopak peněz nadbytek a tvoříte-li např. firemní prezentaci, která musí být za každých okolností graficky dokonalá, můžete vyzkoušet dynamickou šířku stránky (případně počet sloupců) přizpůsobenou individuálnímu nastavení každého uživatele. K tomu však již budete potřebovat JavaScript a nejlépe i nějakou technologii dynamického generování stránek na straně serveru. Na adrese http://www.sovavsiti.cz/samples/samp0105.html naleznete příklady k tomuto článku a velmi praktický obrázek, který si můžete zkopírovat a během návrhu svých stránek umístit na pozadí. Tak budete mít k dispozici přesné měřítko ukazující bezpečné oblasti pro různá rozlišení obrazovek i pro tisk na základní formáty papíru. Zdroje k článku: Michael Kay: Designing for Different Resolutions - http://hotwired.lycos.com/webmonkey/99/33/index0a.html?tw=design Lisa Rowe: Getting A Perfect Fit - http://www.webdesignclinic.com/ezine/v1i9/perfectfit/index.html James Kalbach: The Myth of 800x600 - http://webreview.com/2001/03_16/webauthors/index01.shtml Adrian Roselli: Real-World Browser Size Stats, Part II - http://evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20 /2297/index.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Šéfredaktor známého webzinu Interval.cz a zkušený webdesigner Miroslav Kučera právě vydal knížku HTML: tipy triky od profesionálů. Její elektronickou verzi naleznete na adrese http://www.interval.cz/books/tipy-triky-profesional.asp?z=157 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VÝHODY A NEVÝHODY RÁMCŮ Při své poradenské činnosti často narážím na stránky nevhodně používající rámce (frames). Vysvětlováním, proč jsou rámce obvykle nevhodné, resp. za jakých okolností mohou být užitečné trávím mimořádně velikou část svého času. Rozhodl jsem se tedy sepsat toto shrnutí výhod a nevýhod rámců. Rozhodování zda použít či nepoužít rámce by nemělo vycházet pouze z toho, zda se vám rámce líbí, či zda jste jejich rozhodný odpůrce. Při návrhu stránek je vždy třeba vzít v úvahu mnoho faktorů, zejména: -- předpokládané publikum (cílová skupina) -- struktura webu a navigace s ohledem na optimální prezentaci obsahu -- důležitost kompatibility s vyhledávacími službami -- rozpočet na vytvoření a rozpočet na provoz a průběžnou údržbu -- předpokládané rozšiřování stránek v budoucnu Rámce mohou mít tyto výhody: -- snadná údržba opakujících se částí stránek (záhlaví, zápatí, bočních navigačních pruhů); oceníte zejména v případě mnohastránkových webů, (nebo plánujete-li větší rozšiřování) a nemáte k dispozici skriptování na straně serveru umožňující vkládat opakující se části stránek s jednoho zdrojového souboru -- v případě větších opakujících se částí se vlastní obsah stránek načítá rychleji; to platí i v případě, že máte možnost vkládat opakující se části do všech stránek na straně serveru -- lze vytvořit oblast stránky, která je trvale viditelná, nezávisle na rolování; toho lze jinak dosáhnout jen pomocí DHTML technik, jejichž kompatibilita s prohlížeči je obvykle mnohem menší než rámce -- v případě některých složitějších aplikací (např. webových obchodů) lze rámce využít k předávání dat při přechodu mezi jednotlivými stránkami Častěji však převažují tyto nevýhody: -- absolutní nekompatibilita se staršími prohlížeči; je tedy třeba dělat a udržovat verzi bez rámců -- problémy s použitelností, zejména pro méně zkušené uživatele - bývá obtížné stránku s rámci vytisknout či uložit na disk; uložit do záložek (oblíbených položek) lze zpravidla jen úvodní stránka, nikoli tu, kterou by uživatel chtěl; rolování kurzorovými klávesami (znám uživatele, kteří sahají na myš jen v nejnutnějším případě) někdy nefunguje -- nutí uživatele vidět něco, co vidět nechce, na úkor toho, co vidět chce -- pomalejší natahování -- nelze se z venku odkazovat na konkrétní stránky, což mívá fatální důsledky pro možnosti propagace -- problémy s vyhledávacími službami; vyhledávací služby buď určitou stránku nenajdou vůbec, nebo pošlou návštěvníka na stránku bez kontextu ostatních rámců a tedy např. bez jakékoli navigace; důsledky pro propagaci jsou opět fatální -- nelze přiřadit samostatný titulek jednotlivým stránkám; tím se znepřehledňuje navigace (příkazy prohlížeče zpět a vpřed) a opět to nesvědčí indexování vyhledávacími službami -- u nerolovatelných rámců hrozí, že uživatel skryté části vůbec neobjeví, protože mají menší okno prohlížeče, než se kterým autor počítal -- nadbytečné posuvníky zabírají cenné místo a matou méně zkušené uživatele -- obtížněji se realizují externí odkazy Zdroje k článku: WDG: Guide To Frames Usage - http://www.htmlhelp.com/design/frames/ W3C: Frames in HTML Documents - http://www.w3.org/TR/REC-html40/present/frames.html SKDesign: To Frame Or Not To Frame: That Is The Question - http://www.websitetips.com/info/frames.html Some Caveats with Using Frames - http://evolt.org/article/Some_Caveats_with_Using_Frames/22/293/in dex.html Shirley E. Kaiser: To Frame Or Not To Frame: That Is The Question - http://www.websitetips.com/info/frames.html VÝZVA KE SPOLUPRÁCI NA ZAJÍMAVÉM EXPERIMENTU Pokud jste majiteli či správci nějakých, nejlépe firemních stránek, naskýtá se vám výjimečná příležitost. Ve spolupráci s webzinem Interval.cz jsme se rozhodli uspořádat velmi zajímavý experiment. Zcela zdarma navrhneme a pomůžeme zrealizovat takové úpravy vašich stránek, které povedou k výraznému zvýšení jejich obchodní úspěšnosti. Podstata celého projektu je následující: 1) Ze vhodných kandidátů budou vybrány stránky, na kterých se něco nabízí, ať již k prodeji, či zdarma. Může se jednat o celý webový obchod, nebo jen jednoduché firemní stránky s objednávkovým, či obdobným formulářem. 2) Zjistíme úspěšnost stránek před experimentem. Úspěšností se rozumí poměr počtu návštěvníků, kteří provedou požadovanou akci (pošlou objednávku, poptávku, atd.), ku počtu všech návštěvníku. 3) Zcela zdarma navrhneme a pomůžeme zrealizovat takové úpravy stránek (textového obsahu, struktury, navigace, grafického designu), které povedou k výraznému zvýšení jejich úspěšnosti. 4) Změříme úspěšnost stránek po experimentu a celý jeho průběh zdokumentujeme sérií článků na Intervalu. Máte-li zájem se experimentu s vašimi stránkami zúčastnit, pošlete na adresu mailto:redakce@sovavsiti.cz jejich URL a bližší komentář (jejich cíl, historii, návštěvnost, atd.). Čím více informací, tím lépe. Ze všech kandidátů bude vybrán jen jeden! Nepromeškejte tuto ojedinělou příležitost zdarma zvýšit úspěšnost vašeho webu. Při výběru budou mít přednost stránky, splňující co nejvíce z následujících kritérií: -- vůle a ochota majitele i webmastera zúčastnit se experimentu a věnovat mu po určitou dobu potřebný čas, -- stabilní, statistikou podložená návštěvnost za posledních několik měsíců, přesahující průměr 20 UIP denně (pracovní dny) -- libovolně vedená statistika dosavadní úspěšnosti, nejlépe pohybující se stabilně okolo 1%, -- technická bezchybnost HTML kódu, -- dostatek podkladů (textových i obrazových) o prezentované nabídce -- umístění ve vlastní doméně druhé úrovně. Nabídky stránek, či případné dotazy k projektu posílejte na adresu mailto:redakce@sovavsiti.cz. ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ Dotaz: Z formuláře na domovské stránce Sovy v síti nám přišel tento dotaz: "Proč se mi zobrazují veliká písmena textů? Rolování je nepříjemné!" Tazatel měl asi na mysli právě domovskou stránku Sovy, takže doufám, že si ji zaregistroval a může si tedy tuto odpověď teď přečíst. Odpověď: Stránky Sovy v síti plně respektují doporučení tvůrce normy HTML konsorcia W3C a velikost písma je definována výhradně pomocí CSS v procentech (např. h1 {font-size: 140%}). Díky tomu je skutečná velikost písma dána výhradně tím, co si uživatel nastaví ve svém prohlížeči. Navíc je domovská stránka Sovy navržena tak, aby se při rozlišení 800x600, v prohlížeči roztaženém na celou obrazovku a s implicitní střední velikostí písma MSIE, přesně vertikálně vešla na 2 obrazovky. Dotaz: Potřeboval bych poradit, jestli existuje nějaká možnost k stáhnutí FLASH animací přímo z www stránky? Pokud ano, jak! Také by mě zajímaly nějaké, k tomu určené, programy. Dále bych Vám chtěl navrhnout téma k dalším článkům! Ty by mohly být právě o tvorbě v programu Macromedia Flash 5. Také by mě potěšily nějaké články o tvorbě videí. Odpověď: O možnosti stáhnout Flash animaci přímo ze stránky nevím. Nejsem ovšem na Flash odborník, takže nevylučuji, že taková možnost existuje. Opět bych doporučil e-mailovou konferenci serveru Interval.cz, ve které odpověď určitě naleznete. Přihlásit se lze na adrese http://www.interval.cz/konference.asp. Co se týče článků o Flashi. Jak jsem již napsal, osobně se k psaní takových článků povolán necítím. Pokud však nalezneme erudovaného a ochotného autora, proč ne... Dotaz: Jak nadefinovat formular na uploadovani souboru pres Internet. Pracuji s ASP a zacnu v nejblizzsi dobe take s PHP, ale zatim nevim jak na to. Co se formuláře týče, je důležité aby vlastní tag
byl definován takto: Dále je třeba aby obsahoval vstup pro název souboru, např.: Na straně serveru je pak nejlepší použít vhodnou komponentu. Zkuste výše uvedenou konferenci, kde vám dále ochotně poradí jak pro ASP, tak pro PHP. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Nechcete, nebo naopak chcete dostávat Sovu v síti? Odběr lze odhlásit odesláním zprávy na unsubscribe@sovavsiti.cz. Přihlásit se lze odesláním zprávy na subscribe@sovavsiti.cz, nebo formulářem na adrese http://www.sovavsiti.cz/. Chcete nám cokoli sdělit? Uvítáme vaše náměty, připomínky, kritiku, atd. na adrese mailto:redakce@sovavsiti.cz. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Není-li v konkrétním případě uvedeno jinak, je autorem všech publikovaných článků Marek Prokop. Tento ezin, nebo jeho libovolnou část můžete volně šířit dále, pokud současně uvedete zdroj následujícím způsobem: ________________________________________________________________ Sova v síti -- (c) 2001 Marek Prokop -- http://www.sovavsiti.cz/