Pomůcky ke kurzu 4it383 Web design

Literatura související s přednáškami je uložena jako PowerPoint prezentace v systému semestr.vse.cz. Ukázky nemusí být součástí prezentace. Přednášená látka je zkoušena testem.

Návody a postupy

Petra Větrovská: Web·Tvorba - velmi pěkně připravené materiály - [Doporučuji jako základní literaturu]
Petr Staníček: Pixylophone - Příspěvky z mého zápisníku - hacky a finty CSS, CSS řešení apod.
K XHTML:
- Pravidla zápisu elementů a atributů
- Znakové entity - vložení znaků, které nejsou na klávesnici
- Document Type Definition
- Meta informace - rozšíření popisu dokumentu o další důležité informace
- Element link - vytváření specifické vazby mezi soubory, ale také element pro připojení tabulky kaskádových stylů
- Adresujeme - URI, URL a URN
- Zalomení - jak fungují nevýznamné mezery a autorem vložený Enter
- Atributy id a class
- Hypertextový odkaz
- Zdůraznění - zvýšení významové síly textu
- Citace - elementy, projekt Bibliografické citace, Jak zpracovávat bibliografické citace
- Formulář - základní informace, elementy, ukázka
- Jak poslat email z WWW
- Seznamy - uspořádané, neuspořádané a definiční
- Události - co se má provést po načtení dokumentu, kliknutí na nějaký obsah apod.
- Kolektiv autorů na serveru interval.cz XHTML -- Webdesign - různé články orientované na řešení problémů v XHTML - doporučuji, abyste předtím než aplikujete poznatky z nějakého článku, pročetli také komentáře pod článkem, protože ne vždy je vše tak jednoduché, jak se na první pohled zdá
K CSS:
- Inspirujte se možnostmi kaskádových stylů - css Zenová zahrada: Krása CSS designu nebo CSS Vault » The Web's CSS Site
- Různé styly pro různá média
- Typomil.com - Písmo, fonty, sazba ...
- Typo.cz - Česká a světová typografie na internetu
- Reichenstein, O. 2007. Webdesign je z 95 % typografie - základní myšlenky. interval.cz [Doporučuji]
Ke grafice:
- GIF, JPEG a PNG - jak a kdy je použít?
- Zdroje obrázků - Microsoft.cz, Iconfactory
- Servery o grafice - Grafika on-line, Tutorials.cz, photoshopLab
- Obrázky s popiskami
- Sdělení nebo ilustrace
- Kde vzít fotky a nekrást
- Smashing Magazine - inspirace, grafika, případové studie, nástroje, postupy. [Doporučuji]
- Tutorials.cz - Nejen o grafice, ale také o návrhu vzhledu
IE-Brouci - Jak se vyrovnat s implementačními chybami Internet Exploeru [Doporučuji]

Elektronické nástroje

Pokud potřebujete získat text, kterým byste cvičně naplnili dokument, abyste mohli otestovat jeho chování, pak navštivte Lorem Ipsum.
Volba vhodného fontu:
- TypeTester - odzkoušejte si on-line, jak bude vypadat písmo ve zvoleném fontu při definovaných vlastnostech [Doporučuji]
Tvorba navigace:
- Listamatic - Jeden seznam mnoho voleb [Doporučuji]
- List-o-matic - Generátor navigace [Doporučuji]
Barevná schémata:
- Paleta bezpečných barev pro HTML stránky
- Generátor barevných schémat a palet [Doporučuji]
- ColorZilla - Doplněk k prohlížeči Firefox, pomocí kterého můžete zachytit barvu v daném bodě okna vaší aplikace.
- Colorlovers - Palety barev, barvy, tapety (vzorky).
Validátory:
- Validátor platnosti kódu ve značkovacím jazyce (HTML, XHTML)
- Validátor platnosti kódu v jazyce CSS
- Web Developer Toolbar - Doplněk do prohlížeče Firefox, který obsahuje možnost přímé validace kódu (XHTML, CSS)
- FireBug - Doplněk do prohlížeče Firefox, který umožňuje detaině kontrolovat kód dokumentu. (český komentář k doplňku)
- IETester - program umožňuje otestovat vzhled stránky v prohlížeči IE (5.5, 6, 7, 8)
- Browsershots - on-line služba, která vytváří screenshoty vašich stránek v různých prohlížečích.
Kontrola platnosti přístupnosti:
- Seznam nástrojů
- Cynthia Says
- WAVE 3.0 Accessibility Tool
- Kontrast barev - Nástroj na kontrolu kontrastu barev
Pomůcka pro návrh klíčových slov:
- Doporučí ze zadaného dokumentu klíčová slova
- Google Adwords
Editory (poslední verzi produktů vyhledejte např. na serveru www.slunecnice.cz nebo www.stahuj.cz):
- Non-WYSIWYG
  - NotePad++ - editor kódu s podporou zvýrazňování syntaxe
  - HTML editor Yugie 4.3 - editor kódu s podporou zvýrazňování syntaxe
  - PSPad - editor kódu s podporou zvýrazňování syntaxe
- WYSIWIG
  - FrontPage - produkt, který je součástí MS Office
  - TopStyle - vizuální editor kaskádových stylů

Weby orientující na problematiku spojenou s Webdesignem

Ucelená kolekce článků, které se vztahují k problemům spojeným s návrhem webu (User experience design resources (Dey Alexander Consulting)) - [Doporučuji],
Přístupnost a použitelnost
- Web Accessibility Initiative (WAI) - iniciativa, která se orientuje na vývoj strategie, postupů a zdrojů, které umožní, aby web byl přístupný lidem s hendikepy
- Euro Accessibility Consortium
- Přístupnost- Web a weblog věnovaný přístupnosti webových stránek [Doporučuji]
- H1.cz - kolekce článků s tématy Budování firemního webu, Internetový marketing, Optimalizace pro vyhledávače, Psaní textů pro web (copywriting), Přístupnost [Doporučuji]
- Použitelnost na serveru Wikipedia.org
- Useit.com - Web J. Nielsena věnovaný použitelnosti
Martin snížek o webdesignu - Web M. Snížka Web zaměřený na použitelnost webu, internetový marketing, copywriting, SEO, informační architekturu a dosahování cílů webu.
Sova v síti - Weblog pro webmastery a webdesignéry
A LIST apart - pro lidi, kteří tvoří weby.

Specifikace a doporučení

Stránky jazyka XHTML:
Stránky jazyka CSS
- Cascading Style Sheets home page
- Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification
Doporučení Dogma W4 - strategie pro tvorbu webů podle přísně vymezených pravidel

Publikace

Jeffrey Zeldman: Tvorba webů podle standardů, Computer Press, 2005, ISBN 80-251-0347-1
Petr Staníček a kolektiv: CSS - Hotová řešení, Computer Press, 2006, ISBN 80-251-1031-1 (nahrazuje knihu Petr Staníček: CSS Kaskádové styly - Kompletní průvodce) [Doporučuji] (ukázka)
WEB STYLE GUIDE, 2nd edition - velmi pěkně zpracovaná on-line kniha, která vás seznámí s procesem tvorby www prezentace, [Doporučuji s tím, že kód příkladů již může být zastaralý]