home *** CD-ROM | disk | FTP | other *** search
/ PC World 2004 July & August / PCWorld_2004-07-08_cd.bin / novinky / interval / clanek06.htm < prev    next >
Encoding:
Extensible Markup Language  |  2004-06-08  |  14.0 KB  |  154 lines
  1. <?xml version='1.0' encoding='windows-1250'?>
  2. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='cs' lang='cs'>
  4. <head>
  5. <meta http-equiv='Content-Type' content='text/html; charset=windows-1250' />
  6. <meta http-equiv='Content-language' content='cs' />
  7. <meta http-equiv='Cache-control' content='no-cache' />
  8. <meta http-equiv='Pragma' content='no-cache' />
  9. <meta http-equiv='Expires' content='0' />
  10. <meta name='robots' content='index, follow' />
  11. <meta name='googlebot' content='index, follow, noarchive' />
  12. <meta name='description' content='Interval.cz - Internetov² magazφn o webdesignu, v²voji webov²ch aplikacφ a e-komerci. VÜe podstatnΘ o technologiφch XHTML, HTML, CSS, DHTML, JavaScript, XML, .NET, ASP, PHP, Java, J2ME, SQL, WAP...' />
  13. <meta name='keywords' content='Interval' />
  14. <meta http-equiv='imagetoolbar' content='no' />
  15. <meta http-equiv='MSThemeCompatible' content='no' />
  16. <meta name='MSSmartTagsPreventParsing' content='true' />
  17. <meta name='ICBM' content='49.1915, 16.626' />
  18. <meta name='DC.Title' content='Interval.cz' />
  19. <meta name='DC.Identifier' content='http://interval.cz' />
  20. <meta name='DC.Language' content='cs' />
  21. <link rel='alternate' type='text/xml' title='RSS' href='http://interval.cz/__rss/rss.asp' />
  22. <link rel='shortcut icon' href='favicon.ico' />
  23. <link rel='home' href='http://interval.cz' />
  24. <link rel='search' href='http://interval.cz/search_ex.asp' />
  25. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/html4.css' />
  26. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/basic_all.css' />
  27. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/homepage_all.css' />
  28. <link rel='stylesheet' type='text/css' media='all' href='__services/styles/articles_all.css' />
  29. <link rel='stylesheet' type='text/css' media='print' href='__services/styles/articles_print.css' />
  30. <title>Interval.cz - denn∞ o tvorb∞ webu a e-komerci</title>
  31. </head>
  32. <body class='interval interval-articles'>
  33. <div id='page-header'><div id='interval-logo'><h1 title='Interval.cz - denn∞ o tvorb∞ webu a e-komerci (logo & index link)'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz'>Interval.cz<span></span></a></h1></div><div id='advertising-page-header'></div><div class='page-maker'> </div></div>
  34. <div id='page-topmenu'><h2 class='textversion'>Navigace</h2><div id='page-mainmenu'><h3 class='textversion'>Hlavnφ menu</h3><ul><li class='first selected'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz'>Titulnφ strana</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=14'>Webdesign</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=15'>V²voj aplikacφ</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=18'>E-komerce</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=17'>Nßstroje</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=16'>Magazφn</a></li><li class='right selected'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.inshop.cz'>Knihkupectvφ</a></li><li class='right'><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interforum.interval.cz'>Interforum</a></li></ul></div><div id='page-mainmenu-maker'> </div></div>
  35. <div id='page-body'><div id='page-left'><div id='article'>
  36.  
  37.  
  38.  
  39. <h2>Kam pat°φ menu</h2>
  40. <p id='prepend'>Na internetu se Üφ°φ polemiky, kam vlastn∞ pat°φ menu. Vlevo, jak jsou u₧ivatelΘ zvyklφ, nebo vpravo, jak °φkajφ (a argumenty podklßdajφ) ti, kte°φ se nad problΘmem navigace zam²Ülφ. Polo₧me si tedy Nerudovskou otßzku: "Kam s nφm?" A zodpov∞zme ji.</p>
  41.  
  42.  
  43. <p>Pokud je menu krßtkΘ (obsahuje jen pßr polo₧ek), je patrn∞ nejvhodn∞jÜφ umφstit jej vodorovn∞ do hornφ p∞tiny strßnky. Menu tak nevytvo°φ hluch² sloupec (prßzdnΘ mφsto pod nφm), tak₧e celß Üφ°ka strßnky m∙₧e b²t pln∞ vyu₧ita pro textov² a obrazov² obsah prezentovanΘho dokumentu.</p>
  44. <p>Pokud je menu delÜφ (obsahuje vφce polo₧ek), je nerozumnΘ umis¥ovat jej vodorovn∞. Vφce°ßdkovΘ vodorovnΘ menu se stßvß nep°ehledn²m a navigaci spφÜe zt∞₧ujφcφm prvkem. Jsme tedy postaveni p°ed rozhodnutφ, zda umφstit menu doleva Φi doprava.</p>
  45.  
  46. <h3>ProΦ menu vpravo?</h3>
  47. <p>Pro volbu vpravo hovo°φ minimßln∞ Φty°i mn∞ znßmΘ d∙vody:</p>
  48.     
  49. <div class='list'>
  50. <ul>
  51. <li><strong>╚teme zleva doprava</strong> - Φtenß° nejd°φve uvidφ obsah strßnky a pokud nenφ obsahem strßnky to, co hledal, vÜimne si nabφdky menu a m∙₧e pokraΦovat v prßci.</li>
  52. <li><strong>OΦi jsou mΘn∞ namßhßny</strong> - v delÜφm textu se Φtenß° m∙₧e h∙°e orientovat, je li vlevo od textu ruÜiv² element v podob∞ menu.</li>
  53. <li><strong>MΘn∞ pohyb∙ myÜi</strong> - menu vpravo, svisl² posuvnφk vpravo.</li>    
  54. <li><strong>Pravßci ovlßdajφ vpravo</strong> - v∞tÜinu u₧ivatel∙ tvo°φ pravßci, kte°φ majφ myÜ napravo a je pro n∞ p°irozen∞jÜφ mφt vpravo i kurzor.</li>
  55. </ul>
  56. </div>
  57.  
  58. <p>S druh²m a t°etφm d∙vodem bych polemizoval a obΦas i nesouhlasil. Domnφvßm se, ₧e zaΦφt prosazovat a dogmaticky trvat na tezi <em>"menu pat°φ doprava"</em> je nerozumnΘ. ProΦ? Vysv∞tlenφ je nφ₧e.</p>
  59.  
  60. <h3>ProΦ menu vlevo?</h3>
  61.  
  62. <div class='list'>
  63. <ul>
  64. <li><strong>Menu vlevo je za₧itΘ.</strong> Je tomu tak, menu vlevo dominuje, u₧ivatelΘ jsou na n∞j zvyklφ, pokud ho uvidφ vlevo, nad niΦφm nep°em²Ülejφ a v∞dφ: "Ano, toto je menu a jß se dφky n∞mu probourßm na dalÜφ strßnky."</li>
  65. <li><strong>T°φsloupcov² design</strong> by menu vpravo asi neobhßjil. LidΘ by vid∞li nejprve reklamu, potΘ Φlßnek a pak menu. Pro inzerenty by to bylo lßkavΘ, ale netuÜφm, co by na to °ekli Φtenß°i.</li>
  66. <li><strong>Viditelnost navigace</strong> v menÜφm rozliÜenφ Φi v menÜφm oknu prohlφ₧eΦe je zaruΦena, je vlevo a tedy stßle na oΦφch. U navigace umφst∞nΘ vpravo se musφ na tuto drobnost pamatovat.</li>
  67. </ul>
  68. </div>
  69.  
  70. <h3>Vpravo nebo vlevo?</h3>
  71.  
  72. <div class='list'>
  73. <ul>
  74. <li><strong>Menu vlevo a oΦi</strong> - vlevo umφst∞nΘ menu vytvß°φ podle mne zdravou mezeru pro oΦi, dφky kterΘ neΦtu souvisl² text od hrany monitoru. Konec konc∙, knihy majφ takΘ odsazenφ textu. NicmΘn∞, pokud je design strßnek centrovan², je tento argument bezp°edm∞tn² (Φasto b²vß vhodn∞jÜφ umφstit menu vpravo). Dßle se vyskytujφ weby, kde centrovßnφ nenφ pou₧ito, menu je vpravo a p°esto se Φtou dob°e. Zßle₧φ tedy na konkrΘtnφm °eÜenφ a vzhledu.</li>
  75. <li><strong>Celistvß navigace.</strong> Jak je to s uÜet°en²m pohybem myÜi? Zßle₧φ na zam∞°enφ webu. Jednß-li se o blog, pln∞ chßpu umφst∞nφ navigace vpravo. Pohyb mezi strßnkami realizuji hlavn∞ pomocφ odkaz∙ v textu. Tyto odkazy vlastn∞ suplujφ funkci menu. Jednß-li se ale o web zpravodajsk² (p°φpadn∞ slo₧itostφ a obsahovou bohatostφ podobn²), bude u₧ivatel patrn∞ vφce vyu₧φvat tlaΦφtek Zp∞t, Vp°ed, Obnovit, Zastavit a panel Adresa - a tyto navigaΦnφ prvky jsou umφst∞ny v levΘ hornφ Φßsti prohlφ₧eΦe. Myslφm, ₧e nechat menu a tuto navigaci u sebe (tedy umφstit menu vlevo) je rozumnΘ. Navφc se nßm mezi u₧ivateli pomalu ale jist∞ mno₧φ myÜi s koleΦkem a tak je Φφm dßl menÜφ poΦet lidφ zßvisl² na posuvnφku (jß k n∞mu jezdφm v²jimeΦn∞). ProΦ tedy umis¥ovat menu k n∞Φemu, co nevyu₧φvßm. (Mimochodem, nerozdrobenß navigace je takΘ d∙vod, proΦ software typu CAD, o kterΘm se zmi≥uje <a href='http://www.mraveniste.org/weblog/2004-05.html#1084120940'>Jan Bien</a>, mß menu vpravo. Proto₧e navigace nenφ takto nßsiln∞ roztr₧ena.)</li>
  76. </ul>
  77. </div>
  78.  
  79. <h3>Kam s nφm</h3>
  80. <p>Kam pat°φ menu? Ptßm se vßs - a je to tak d∙le₧itΘ? Jist∞, umφstit menu nelogicky na spodnφ Φßst strßnky (a tφm sv²m zp∙sobem nutit u₧ivatele p°eΦφst cel² obsah a pak pokraΦovat), by nebylo nejmoud°ejÜφ. Ale Φtenß°i navÜt∞vujφ weby kv∙li obsahu, nikoli kv∙li tomu, kde je umφst∞no menu.</p>
  81. <p>Svat² grßl, tedy univerzßlnφ °eÜenφ, nemßm. Pokud ji₧ chceme polemizovat, kam umφstit menu, budeme muset vzφt v potaz i obsah webu a to, jak²m zp∙sobem s nφm bude u₧ivatel pracovat. PotΘ bude v jednom p°φpad∞ vhodnΘ menu vlevo, v dalÜφm vpravo. A co my vφme, ona i kombinace menu vodorovn∞ na zaΦßtku strßnky a na konci strßnky m∙₧e mφt svß pozitiva.</p>
  82.  
  83. <h3>Odkazy, zdroje</h3>
  84.  
  85. <div class='list'>
  86. <ul>
  87. <li><a href='http://www.jakpsatweb.cz/weblog/archiv/2004-04.html#130255'>╚teme zleva = menu doprava</a> - DuÜan Janovsk² (Yuh∙∙v weblog o webu, 13. 4. 2004)</li>
  88. <li><a href='http://www.sovavsiti.cz/c01191.html'>Levostrannß navigace - mß opodstatn∞nφ?</a> - Martin Kopta (Sova v sφti, 24. 5. 2003)</li>
  89. <li><a href='http://www.mraveniste.org/weblog/2004-05.html#1084120940'>Menu pat°φ doprava</a> - Jan Bien (MraveniÜt∞, 9. 5.2004)</li>
  90. <li><a href='http://www.lenco.cz/weblog/clanek/?clanek=53'>Navigace na pravΘ stran∞ a zvyklosti u₧ivatel∙</a> - Jan LenΦo (Lenco.cz, 14. 4. 2004)</li>
  91. <li><a href='http://usability.gov/guidelines/navigation.html#four'>Place Navigation On Right</a> (Usability.gov)</li>
  92. <li><a href='http://nitroblok.ic.cz/2004-04.html#132101'>Pravostrannß navigace</a> - Vßclav ètrupl (nitroblok, 13. 4. 2004)</li>
  93. <li><a href='http://jodi.ecs.soton.ac.uk/Articles/v04/i01/Kalbach/'>Web Page Layout: A Comparison Between Left- and Right-justified Site Navigation Menus</a> - James Kalbach, Tim Bosenick (Journal of Digital Information, 28. 4. 2003)</li>
  94. </ul>
  95. </div>
  96.  
  97.  
  98.  
  99. <div id='article-author'>
  100. <a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/autor.asp?author=234'>Ba₧ant, Jan</a> (26. 5. 2004)
  101.  
  102. </div>
  103.  
  104.  
  105.  
  106. </div></div>
  107. <div id='page-right'><h2 class='textversion'>Prav² sloupek</h2>
  108. <div id='search'><h3 class='textversion'>Vyhledßvßnφ</h3><form method='get' action='http://interval.cz/search.asp'><div><input type='text' name='hledej' class='text' /><input type='submit' class='submit' value='Najdi!' /></div></form><div><a href='http://interval.cz/search_ex.asp'>RozÜφ°enΘ vyhledßvßnφ</a></div></div>
  109.  
  110.  
  111.  
  112. <div class='page-right-box book'>
  113.     <h3>Kni₧nφ novinka</h3>
  114.     <div class='page-right-box-in'>
  115.         <div class='book-top'>
  116.             <h4><a href='http://interval.cz/__redirect/redirect.asp?what=interval_booknews&url=http://interval.inshop.cz/inshop/scripts/detail.asp?ItemID=266'>Eric Meyer o CSS - Ovlßdn∞te kaskßdovΘ styly!</a></h4>
  117.         </div>
  118.     </div>
  119.     <div class='image'>
  120.         <img src='podklady/knihy/image.jpg' alt='obßlka' title='obßlka' /></a>
  121.     </div>
  122.     <div class='book-bottom'>Cena: <span class='book-price-old'>390 KΦ</span> <span class='book-price-new'>351 KΦ</span></div>
  123. </div>
  124.  
  125.  
  126.  
  127. <div class='page-right-box reading'>
  128.     <h3>NejΦten∞jÜφ</h3>
  129.     <div class='page-right-box-in'>
  130.         <ul>
  131. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3380'>VyΦiÜt∞nφ tabulky z MS Wordu v MSIE JavaScriptem</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3383'>Kompletnφ pr∙vodce XSLT - °φzenφ toku transformace</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3385'>èt∞pßnka Sunkovß: Jeden za vÜechny, vÜichni za jednoho</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3379'>SMARTY - cache, WAP a bezpeΦnost</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3381'>╚eskß on-line reklama - internet a chu¥ na bagety</a></li>
  132.         </ul>
  133.     </div>
  134. </div>
  135.  
  136.  
  137.  
  138. <div class='page-right-box cauldron'>
  139.     <h3>Diskuznφ kotel</h3>
  140.     <div class='page-right-box-in'>
  141.         <ul>
  142. <li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3357' title='(57 komentß°∙)'>Se°azenφ tabulky JavaScriptem snadno a rychle</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3363' title='(29 komentß°∙)'>JavaScript, programujeme internetovΘ aplikace</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3364' title='(29 komentß°∙)'>Kam pat°φ menu</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3368' title='(20 komentß°∙)'>Eric Meyer o CSS - Ovlßdn∞te kaskßdovΘ styly!</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3380' title='(16 komentß°∙)'>VyΦiÜt∞nφ tabulky z MS Wordu v MSIE JavaScriptem</a></li>
  143.         </ul>
  144.     </div>
  145. </div>
  146.  
  147.  
  148.  
  149. <div class='page-right-box emailserv'><h3>Email servis</h3><div class='page-right-box-in'><form action='prihlaseni.asp' method='post'><div class='shell'><input class='text' type='text' name='adresa' /></div><div class='shell'><input class='radio' type='radio' value='1' name='co' checked='checked' />T²dennφ p°ehled Φlßnk∙</div><div class='shell'><input class='radio' type='radio' value='2' name='co' />HELP konference</div><div class='shell'><input class='submit' type='submit' value='P°ihlßsit' /></div></form></div></div>
  150. </div>
  151. <div class='page-maker'> </div><div class='page-maker-white'> </div></div>
  152. <div id='page-foot'><div id='page-foot-menu'><a href='http://interval.cz/reklama.asp'>Inzerce na Interval.cz</a> | <a href='http://interval.cz/redakce.asp'>Redakce Interval.cz</a> | <a href='http://interval.cz/autori.asp'>Hledßme novΘ autory</a></div><div id='issn'>ISSN 1212-8651</div><div id='page-foot-zoner'>© Zoner software, s.r.o., vÜechna prßva vyhrazena, tento server dodr₧uje <a href='http://interval.cz/privacy.asp'>prßvnφ p°edpisy</a>o ochran∞ osobnφch ·daj∙.</div></div>
  153. </body>
  154. </html>