TNPW2-2011-02

1,557 views

Published on

Trendy moderního web designu

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,557
On SlideShare
0
From Embeds
0
Number of Embeds
107
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TNPW2-2011-02

  1. 1. TNPW2<br />2010/2011<br />02 – Moderní webdesign<br />Mgr. Lukáš Vacek<br />lukas.vacek@uhk.cz<br />
  2. 2. 2<br />Agenda2<br /><ul><li>Trendy moderního web designu
  3. 3. Co by měly splňovat WWW stránky?
  4. 4. Používání webových standardů
  5. 5. Výhody CSS layoutu
  6. 6. SEO
  7. 7. Nejčastější chyby při návrhu WWW stránek
  8. 8. Rady a doporučení
  9. 9. Internet, doporučená literatura</li></li></ul><li>Trendy moderního web designu<br />Informační architektura <br /><ul><li>Hledání takových uspořádání a forem informací, které umožňují jejich nejefektivnější využití.</li></ul>Použitelnost (usability)<br /><ul><li>Přímo podmiňuje úspěšnost, s jakou uživatel dosáhne svého cíle.</li></ul>Přístupnost (accessibility)<br /><ul><li>Správná funkčnost stránek v různých zařízeních na různých platformách,
  10. 10. Bezbariérový přístup pro osoby s různou povahou i mírou zdravotního postižení.</li></ul>Důraz na ekonomickou návratnost a efektivitu<br /><ul><li>Moderní metody tvorby založené na maximálně jednoduchém, standardizovaném a modulárním kódu stránek (striktní XHTML, CSS, DOM).</li></ul>3<br />
  11. 11. Obsah webu<br />Musíte návštěvníky zaujmout! Teprve potom z nich budou uživatelé… <br />Naprostá většina návštěvníků Vašeho webu (až 95 %) Vám stejně uteče jinam <br />Obsah NESMÍ vypadat jako reklama, ale jako<br />komentář, posudek, rada nebo případová studie –> užitečné informace<br />Obsah MUSÍ být přehledný!<br />Použijte jednoduchý, přehledný design s intuitivní navigací bez slepých uliček…<br />Dejte jasně najevo, co nabízíte! <br />Každá stránka musí mít svůj cíl<br />Jestliže po uživateli něco chcete, musíte mu za to taky něco nabídnout<br />Nebuďte agresivní – uživatel je Váš důležitý partner<br />Zásadní podmínky pro úspěšný web… *<br />Plnit sliby<br />Budovat vztah s uživatelem<br />Poskytovat služby<br />*) Maria Veloso – Web Copy That Sells… 2nd Editon; AMACOM 2009<br />4<br />
  12. 12. 5<br />Agenda2<br /><ul><li>Trendy moderního web designu
  13. 13. Co by měly splňovat WWW stránky?
  14. 14. Používání webových standardů
  15. 15. Výhody CSS layoutu
  16. 16. SEO
  17. 17. Nejčastější chyby při návrhu WWW stránek
  18. 18. Rady a doporučení
  19. 19. Internet, doporučená literatura</li></li></ul><li>Co by měly splňovat WWW stránky?<br />Existuje celá řada různých úhlů pohledu na tuto problematiku. <br />Nejčastěji se zohledňují:<br />Použité technologie a standardy<br />Přístupnost, použitelnost<br />Informační architektura<br />Aktuální „módní“ trendy (např. barevné palety, Flash, Ajax, vše co je in)<br />Jakékoliv jiné metodiky, které se zrovna někomu hodí <br />Tyto různé pohledy se velmi často prolínají.<br />V žádném případě se nedá říct, že existuje jediný všeobecně uznávaný standard!<br />Hodně populární jsou dnes např. pohledy z hlediska:<br />Uživatele a jeho potřeb (Steve Krug)<br />Používání webových standardů (Russ Weakly)<br />6<br />
  20. 20. Co by měly splňovat WWW stránky? (SteveKrug) – I.<br />7<br />SteveKrug – Web design – Nenuťte uživatele přemýšlet, ComputerPress 2003, 2006<br />Vytvořte jasnou vizuální hierarchii<br /><ul><li>Vztah mezi objekty na stránce, jejich souvislost a význam… Uživatelé stránky nečtou, většinou je pouze prohlížejí. Umožněte jim to!</li></ul>Rozdělte stránky na jasně definované oblasti<br /><ul><li>Umožněte uživateli rychle se zorientovat (menu, novinky, titulek…)</li></ul>Dejte jasně najevo, na co lze na stránce klepnout<br /><ul><li>Barevné a jednoznačné odlišení URL odkazů od ostatních prvků.</li></ul>Potlačte informační šum<br /><ul><li>Přílišné zahlcení uživatele informacemi je kontraproduktivní.Vynechejte zbytečná slova!</li></li></ul><li>Co by měly splňovat WWW stránky? (SteveKrug) – II.<br />8<br />Vytvořte jasnou a srozumitelnou navigaci<br /><ul><li>Uživatel musí mít na každé stránce možnost poznat, kde se právě nachází a kam se odtud může dostat.</li></ul>Odpovězte návrhem WWW stránek uživateli na jeho nejčastější otázky:<br /><ul><li>Co to je?
  21. 21. Co mi nabízejí?
  22. 22. Co tady můžu dělat?
  23. 23. Proč bych zde měl zůstat a nejít někam jinam?
  24. 24. Kde mám začít?</li></li></ul><li>9<br />Agenda2<br /><ul><li>Trendy moderního web designu
  25. 25. Co by měly splňovat WWW stránky?
  26. 26. Používání webových standardů
  27. 27. Výhody CSS layoutu
  28. 28. SEO
  29. 29. Nejčastější chyby při návrhu WWW stránek
  30. 30. Rady a doporučení
  31. 31. Internet, doporučená literatura</li></li></ul><li>Používání webových standardů – I.<br />10<br /><ul><li>Dodržování standardů není cíl, ale prostředek k jeho dosažení…
  32. 32. Jejich dodržením se vyhnete celé řadě možných problémů</li></ul>RussWeakley – Web standards – more than just 'table-free sites'<br />http://www.maxdesign.com.au/presentation/checklist.cfm<br />Kvalita kódu <br /><ul><li>Korektní Doctype, kódování, validita, strukturovaný kód, funkční odkazy, rychlost stahování/načítání, chyby v JavaScriptu...</li></ul>Stupeň oddělení formy od obsahu<br /><ul><li>Použití CSS pro prezentační prvky...</li></ul>Přístupnost pro uživatele<br /><ul><li>Alternativní popisky, relativní jednotky, možnost zvětšení, přístupné formuláře a tabulky, kontrastní barvy, popisné odkazy...</li></li></ul><li>Používání webových standardů – II.<br />11<br />Přístupnost pro zařízení<br /><ul><li>Funkčnost v moderních i starších verzích prohlížečů, přístupnost při vypnuté podpoře CSS, obrázků, skriptů, podpora pro tisk, další zařízení, velikost okna prohlížeče... </li></ul>Základní použitelnost<br /><ul><li>Jasná vizuální hierarchie, srozumitelná a konzistentní navigace, kontaktní stránka, mapa webu, podtržené a barevně odlišené odkazy, možnosti vyhledávání, odkaz na titulní stránku...</li></ul>Správa webu<br /><ul><li>Podoba URL, chybová stránka...</li></li></ul><li>12<br />Agenda2<br /><ul><li>Trendy moderního web designu
  33. 33. Co by měly splňovat WWW stránky?
  34. 34. Používání webových standardů
  35. 35. Výhody CSS layoutu
  36. 36. SEO
  37. 37. Nejčastější chyby při návrhu WWW stránek
  38. 38. Rady a doporučení
  39. 39. Internet, doporučená literatura</li></li></ul><li>Výhody CSS layoutu<br />13<br /><ul><li>Stránky se zobrazují rychleji (u tabulek se čeká na celý obsah!)
  40. 40. Menší kód
  41. 41. Strukturovanější kód
  42. 42. Změna na jednom místě
  43. 43. Není třeba zasahovat do zdrojového kódu stránek
  44. 44. Rozdílné pořadí prvků v kódu a na stránce, logický vzhled v lineárních prohlížečích
  45. 45. Dá se tím udělat totéž, co tabulkami
  46. 46. Validita
  47. 47. Je to módní!</li></ul>http://www.jakpsatweb.cz/clanky/skutecne-vyhody-css-layoutu.html<br />
  48. 48. 14<br />Agenda2<br /><ul><li>Trendy moderního web designu
  49. 49. Co by měly splňovat WWW stránky?
  50. 50. Používání webových standardů
  51. 51. Výhody CSS layoutu
  52. 52. SEO
  53. 53. Nejčastější chyby při návrhu WWW stránek
  54. 54. Rady a doporučení
  55. 55. Internet, doporučená literatura</li></li></ul><li>SEO (Search Engine Optimalization)<br />15<br />SEO – Optimalizace stránek pro vyhledávače (Google, ...)<br />Oddělte obsah od formy<br />Nepodceňujte sílu tagutitle<br />Vhodné nadpisy, polovina úspěchu<br />Mapa webu, pastva pro vyhledavače<br />Inteligentní odkazy, tahák pro návštěvníky<br />Uvítací text s klíčovými slovy, dvě mouchy jednou ranou! <br />Přívětivé adresy mají rádi návštěvníci i vyhledavače<br />Návštěvník je důležitější, než optimalizace<br />Lež má krátké nohy<br />Článek 9 tipů k vylepšení on-page faktorů (Vít Dlouhý, DlouhýWeb, 18. 1. 2004)<br />http://seo-servis.cz/source-zdrojovy-kod/<br />http://seo.webber.cz/<br />http://wiki.tvorime.net/Základy_SEO<br />
  56. 56. 16<br />
  57. 57. 17<br />Agenda2<br /><ul><li>Trendy moderního web designu
  58. 58. Co by měly splňovat WWW stránky?
  59. 59. Používání webových standardů
  60. 60. Výhody CSS layoutu
  61. 61. SEO
  62. 62. Nejčastější chyby při návrhu WWW stránek
  63. 63. Rady a doporučení
  64. 64. Internet, doporučená literatura</li></li></ul><li>Nejčastější chyby při návrhu WWW stránek – I. <br />18<br /><ul><li>Použita nevhodná barva pozadí, resp. není definována vůbec
  65. 65. Není sladěna barva pozadí a písma –> kontrola http://www.checkmycolours.com/
  66. 66. Nevhodná písma ve stránce, včetně velikosti – používejte relativní jednotky a dostatečně velké čitelné písmo
  67. 67. Velikost stránky, počet obrázků (objektů) – spíše desítky KB, v MB je to špatně i dnes!
  68. 68. Chybí alternativní popis obrázků a objektů s obsahem (alt, title)
  69. 69. Chybí definice rozměrů obrázků
  70. 70. Různé výchozí hodnoty pro vlastnosti prvků v prohlížečích –> řeší to reset CSS
  71. 71. Rozlišení stránky 800*600, resp. 1024*768 –> dnes čím dál vyšší rozlišení</li></li></ul><li>Nejčastější chyby při návrhu WWW stránek – II. <br />19<br /><ul><li>Chybí alternativní navigace, mapa webu, drobečková navigace apod.
  72. 72. Menu na stránkách není na stejném místě
  73. 73. Chybí údaj o aktualizaci obsahu (měl by být aspoň na úvodní stránce nebo RSS)
  74. 74. Na stránce jsou odkazy se stejným textem, které odkazují na různé dokumenty
  75. 75. Chybí šablona pro tisk!
  76. 76. Stejný element title na všech stránkách –> má negativní dopad i na SEO
  77. 77. Chybně uvedené (nebo neuvedené) kódování stránky
  78. 78. U CSS vlastností definujících rozměry chybí jednotky</li></li></ul><li>Nejčastějších chyby v designu webových aplikací<br />20<br />http://www.useit.com/alertbox/application-mistakes.html(Jakob Nielsen)<br /><ul><li>Obecné chyby ve fázi návrhu designu webu
  79. 79. Nedostatečná analýza požadavků a cílů
  80. 80. Nepoužívají se prototypy
  81. 81. Nesleduje se způsob, jak uživatelé používají prototyp – interaktivní design</li></ul>Nestandardní ovládací prvky GUI <br />Nedůslednost v používání pojmů – stejné jméno pro stejnou věc na stejném místě<br />Intuitivní použití prvků na stránce – není jasné, co má uživatel dělat<br />Chybí zpětná vazba pro uživatele – ten neví, co se na stránce právě děje<br />Nesrozumitelné chybové zprávy – obecná chyba, null pointer exception apod.<br />Vícenásobné dotazování na stejné informace<br />Nepoužívání výchozích (defaultních) hodnot<br />Přístup uživatelů bez kontextu<br />Nejasnost použití nabízených informací nebo služeb<br />Centristické vlastnosti systémů – vnitřní pohled systému na data neodpovídá potřebám uživatelů dané problémové oblasti<br />
  82. 82. 10 nejčastějších chyb web designu – 2005<br />21<br />Jakob Nielsen – „TopTen Web Design Mistakes of 2005“<br />http://www.useit.com/alertbox/designmistakes.html<br />Čitelnost textu<br />Nestandardní odkazy<br />Flash (Flash v navigaci, zbytečná flashováintra)<br />Obsah není psán pro web<br />Špatné vyhledávání<br />Nekompatibilita prohlížečů<br />Těžkopádné a složité formuláře<br />Chybějící informace o firmě, absence kontaktu<br />Layouty s pevnou šířkou<br />Neadekvátní zvětšování fotek<br />http://petr.vaclavek.com/article/293/jakob-nielsen-10-nejvetsich-chyb-webdesignu-2005<br />
  83. 83. 10 nejčastějších chyb web designu – 2007<br />22<br />http://www.useit.com/alertbox/9605.html<br />Špatné vyhledávání na webu<br />On-line čtení PDF souborů<br />Rozlišení barev u navštívených dotazů<br />Nepřehledný text na stránkách<br />Pevná velikost písma<br />Nevhodné titulky stránek<br />Cokoliv co připomíná reklamu<br />Nedodržování konvencí pro design<br />Otevírání nových oken v prohlížeči<br />Uživatelské dotazy bez odpovědi.<br />
  84. 84. 23<br />Agenda2<br /><ul><li>Trendy moderního web designu
  85. 85. Co by měly splňovat WWW stránky?
  86. 86. Používání webových standardů
  87. 87. Výhody CSS layoutu
  88. 88. SEO
  89. 89. Nejčastější chyby při návrhu WWW stránek
  90. 90. Rady a doporučení
  91. 91. Internet, doporučená literatura</li></li></ul><li>Pojmenování souborů<br />Základní věc!<br />V názvech souborů nepoužívejte diakritiku a mezery!<br />Dejte si pozor na velikost písmen v názvech, na straně web serveru jsou některé platformy Case Sensitive!<br />V relativních odkazech je vhodné používat unixovou konvenci...<br />24<br /><link rel="stylesheet" href="test.css" type="text/css" /><br /><link rel="stylesheet" href="./test.css" type="text/css" /><br />
  92. 92. Režimy zobrazování stránek v prohlížeči<br />Webové prohlížeče určují podle nastavení parametrů DTD a DOCTYPE způsob, jakým budou zobrazovat různé verze (X)HTML.<br />Jsou dva režimy zobrazení – standardní a tzv. quirk režim.<br />Standardní režim – snaha o maximální dodržování standardů,<br />Quirk režim – snaha o kompatibilitu.<br />Pokud chcete u aktuálně zobrazované stránky zjistit, v jakém režimu je renderována, vložte do adresní řádky prohlížeče následující příkaz v JavaScriptu:<br />25<br />javascript:alert(document.compatMode)<br /><ul><li>Pomůcka: Rozšíření Web Developer Toolbar (pro MozillaFirefox) má ikonu detekující režim renderování přímo v hlavním panelu.</li></ul>http://wellstyled.com/html-doctype-and-browser-mode.html<br />http://www.jakpsatweb.cz/css/mody-prohlizecu.html<br />
  93. 93. Odsazení obsahu stránky<br />Různé prohlížeče mají různé výchozí hodnoty pro odsazení obsahu stránky od okraje prohlížeče.<br />Lze řešit použitím blokového elementu div, do kterého se vloží celý obsah stránky.<br />Uvedenému elementu div se pak v CSS nadefinují příslušné hodnoty pro odsazení obsahu – margin a padding.<br />26<br />Příklad: 02-01-odsazeni.html<br /><body><br /> <div id="page"><br />obsah...<br /> </div><br /></body><br /><ul><li>Komplexně řeší problematiku výchozích nastavení CSS vlastností v prohlížečích různé frameworky… http://zdrojak.root.cz/clanky/css-frameworky-pro-masy-dil-prvni/</li></li></ul><li>Alternativní styly pro různé prohlížeče<br />V případě, že prohlížeč nepodporuje některou z vlastností CSS, je možné to obejít použitím alternativního stylu, který to bude ošetřovat.<br />K tomu se hodí použít podmíněné komentáře, je to validní řešení bez nutnosti používat CSS hacky!<br />27<br /><link rel="stylesheet" type="text/css" href="./default.css" /><br /><!--[if IE]><br /><link rel="stylesheet" type="text/css" href="./default-ie.css"/> <br /><![endif]--><br />http://www1.mraveniste.org/weblog/2006/03/16-msie-komentare.html<br />http://www.dgx.cz/trine/item/kouzlo-s-podminenym-komentarem<br />
  94. 94. Minimální a maximální šířka elementu<br />Minimální (maximální) šířku elementů lze v CSS definovat pomocí vlastností min-width (resp. max-width).<br />Starší verze prohlížeče Internet Explorer (do verze 6) uvedené vlastnosti nepodporují!<br />Toto omezení je možné obejít vložením elementu s pevnou šířkou (u min-width), stylem v podmíněném komentáři nebo je nutné použít tzv. expressions.<br />28<br />min-width: 770px;<br />width:expression(document.body.clientWidth < 800? "770px": "auto" );<br />
  95. 95. Definice písma v CSS<br />Při definování písma v CSS je nutné vždy uvést na konci definice tzv. generickou skupinu, která se použije v případě, když na počítači uživatele není k dispozici žádné písmo uvedené v předcházejícím výčtu.<br />Víceslovné názvy písem obalujte do uvozovek nebo apostrofů!<br />29<br />font-family: Verdana, "Geneva CE", lucida, sans-serif;<br />http://www.jakpsatweb.cz/css/font-family.html<br />http://www.pixy.cz/pixylophone/2003_06_archiv.html#1054764639<br />http://www.dgx.cz/tools/fonts/ (fontotéka s náhledy v různých OS)<br />
  96. 96. Používání výplňového textu při návrhu<br />Při návrhu layoutu webové stránky je možné použít LoremIpsum – tzv. výplňový text, ve kterém rozložení písmen ve větách zhruba odpovídá psanému textu.<br />Existují generátory pro LoremIpsum, buď v on-line podobě nebo jsou součástí lepších editorů.<br />http://www.pixy.cz/pixylophone/2004_01_archiv.html#1074036428<br />http://wellstyled.com/tools/dummy-cz/<br />30<br />LoremipsumdolorsitametconsectetuerAliquamPellentesquepretiumporttitorQuisque. Atet ante interdumtristiquejustotinciduntPhasellus elit AeneanCurabitur. Tortor semper Suspendissenibh semper magnaac non dolorscelerisqueNulla. RisusFuscemetussollicitudin id venenatisateulacuscursus In.<br />
  97. 97. Matrjoška, boxmodel<br />Prohlížeč Internet Explorer někdy chybně interpretuje vlastnost widthu blokových elementů!<br />http://www.pixy.cz/pixylophone/2003_08_archiv.html<br />31<br />obsahwidth<br />Internet Explorer<br /><ul><li>Řešením je použití obalovacího elementu div, který bude mít definovaný požadovaný rozměr width a hodnoty padding a border budou nastaveny na 0.
  98. 98. Do tohoto elementu pak vložte element s obsahem, kterému už můžete nastavit padding a border podle potřeby.</li></li></ul><li>100% šířka tabulky<br />V některých prohlížečích je u tabulek problematicky implementována vlastnostwidth: 100%;<br />Lze to vyřešit použitím obalovacího elementu div pro tabulku, který má uvedenou vlastnost definovanou.<br />32<br />.div-table {margin:0; padding:0; width: 100%; border: 0;}<br />table {width: 100%; ... }<br /><div class="div-table"><br /> <table><br /> <tr><td>aaaa</td><td>bbbb</td></tr><br /> <tr><td>cccc</td><td>dddd</td></tr><br /> </table><br /></div><br />
  99. 99. Horizontální zarovnání bloku na střed<br />CSS vlastnost text-align by měla být prohlížečem použita pouze u řádkových prvků! Internet Explorer (včetně IE7) ji ale chybně aplikuje také na blokové elementy. <br />Horizontální vycentrování blokového elementu se provádí pomocí vlastnosti margin: 0 auto. Vzhledem k tomu, že Internet Explorer (do IE6) tuto vlastnost naopak nepodporuje, je nutné si vypomoci jeho předchozí chybou.<br />33<br />Příklad: 02-02-centrovani.html<br />body{ padding: 0; margin: 0; background-color: white; color: black; font: 1em sans-serif; text-align: center; } <br />#page { margin: 0 auto; border: solid 1px black; padding: 0.5em; width: 80%; text-align: left; } <br />
  100. 100. Obtékání obrázku<br />Zarovnání obtékaného obrázku k okraji se v CSS provádí pomocí vlastnosti float. Tato vlastnost však vyjme obrázek z normálního toku dokumentu, proto je třeba použít tzv. čistící prvek.<br />34<br />Příklad: 02-03-obtekani.html<br />img{float: left;margin: 0.5em;}<br />.clean {clear: both; border: 0; margin: 0; padding: 0; heigh: 1px;}<br /><div id="page"><br /><h1>Obtékání obrázků na stránce</h1><br /> <p><imgsrc="./images/obrazek.jpg" ... />Loremipsum... </p><br /> <div class="clean" /><br /></div><br />
  101. 101. 35<br />Agenda2<br /><ul><li>Trendy moderního web designu
  102. 102. Co by měly splňovat WWW stránky?
  103. 103. Používání webových standardů
  104. 104. Výhody CSS layoutu
  105. 105. SEO
  106. 106. Nejčastější chyby při návrhu WWW stránek
  107. 107. Internet, doporučená literatura</li></li></ul><li>Odkazy na Internetu<br />36<br />Validátory (X)HTML<br /><ul><li>http://validator.w3.org
  108. 108. http://www.htmlhelp.com/tools/validator/</li></ul>Validátor CSS<br /><ul><li>http://jigsaw.w3.org/css-validator/</li></ul>Přístupnost<br /><ul><li>http://pristupnost.nawebu.cz/weblog/
  109. 109. http://www.blindfriendly.cz/
  110. 110. http://www.sovavsiti.cz/cynthia.html - testování přístupnosti
  111. 111. http://www.checkmycolours.com/
  112. 112. http://zdrojak.root.cz/clanky/pochopil-by-einstein-vas-web/</li></ul>SEO<br /><ul><li>http://seo.webber.cz/
  113. 113. http://seo-servis.cz/source-zdrojovy-kod/</li></ul>Ukázky CSS designu<br /><ul><li>http://www.csszengarden.com/
  114. 114. http://www.cssbeauty.com/</li></li></ul><li>Doporučená literatura<br />37<br /><ul><li>Staníček, Petr – CSS Kaskádové styly Kompletní průvodce, ComputerPress 2003
  115. 115. Staníček, Petr a kol. – CSS Hotová řešení, ComputerPress 2006
  116. 116. Prokop, Marek – CSS kaskádové styly pro webdesignéry, Mobil Media 2003
  117. 117. Krug, Steve – Web design: Nenuťte uživatele přemýšlet!, 2. aktualizované vydání, ComputerPress 2006
  118. 118. Špinar, David – Tvoříme přístupné webové stránky, ZonerPress 2004
  119. 119. Zeldman, Jeffrey – Tvorba webu podle standardů, CP Books 2005 </li></li></ul><li>38<br />Souhrn2<br /><ul><li>Trendy moderního web designu
  120. 120. Co by měly splňovat WWW stránky?
  121. 121. Používání webových standardů
  122. 122. Výhody CSS layoutu
  123. 123. SEO
  124. 124. Nejčastější chyby při návrhu WWW stránek
  125. 125. Rady a doporučení
  126. 126. Internet, doporučená literatura</li>

×