Your SlideShare is downloading. ×
TNPW2-2011-02
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

TNPW2-2011-02

1,355
views

Published on

Trendy moderního web designu

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,355
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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