Na téma Designu Webu (čeština)

Vítejte na hodině úpravy vzhledu webu. První pravidlo takovýchto úprav zní: Nemluvte o Comic Sans MS. Druhé pravidlo zní: NEMLUVTE o Comic Sans MS. Třetí pravidlo zní: Barva se v angličtině („color“) NIKDY nepíše s U.

• Na obrazovce modulu se zobrazí část souboru CSS.
• Na základě zadaných informací, máte Akceptovat (✓), Zvážit (Δ), nebo Odmítnout (✗) kód webu.

Krok 1: Vyberte webovou stránku

Najděte webovou stránku, ze které cituje kód webu. Použijte Rozhodující část kódu (jedná se o část před {), abyste zjistili, o jakou webovou stránku se jedná a zapište si její Prahovou hodnotu.

Edison Daily (zpravodajství) Prvky: body, a, h3, blockquote ID: #header, #comments Třídy: .post, .title, .author Prahová hodnota: #00FF00	Buddymaker (sociální síť) Prvky: div, span, img, a ID: #msg, #cover, #content, #sidebar Třídy: .post, .title, .share Prahová hodnota: #8040C0
PNGdrop (přenos obrázků) Prvky: div, img ID: #main, #comments, #fullview Třídy: .username, .share, .large Prahová hodnota: #BADA55	BobIRS (povídací místnost) Prvky: ul, ol, img, b, i ID: #sidebar Třídy: .avatar, .username Prahová hodnota: #03E61E
Vidhost (přenos videa) Prvky: div, iframe, b, i ID: #main, #rating, #comments Třídy: .username, .share, .channel Prahová hodnota: #60061E	Go Team Falcon online (online hra) Prvky: body, iframe ID: #rating, #comments Třídy: .rating, .fullscreen Prahová hodnota: #501337
Stufflocker (cloudové úložiště) Prvky: div, h3, img, iframe ID: #sidebar, #download Třídy: .menu, .author Prahová hodnota: #B020E5	Steel Nexus (fórum) Prvky: body, div, img, blockquote ID: #header, #content, #sidebar Třídy: .avatar, .reply Prahová hodnota: #BEA61E

Krok 2: Najděte cílovou barvu

V CSS souboru najděte první zmínku o barvě. Poté použijte následující tabulku k určení hexadecimální hodnoty dané barvy. Tato hodnota je vaší Cílovou Barvou, kterou budete potřebovat později. Pokud zde není žádná zmínka o barvě, použijte #7F7F7F.

Barva	Hex. hodnota	Barva	Hex. hodnota	Barva	Hex. hodnota
Modrá	#0000FF	Žlutá	#FFFF00	Červená	#FF0000
Zelená	#00FF00	Bílá	#FFFFFF	Oranžová	#FFA500
Fialová	#800080	Purpurová	#FF00FF	Šedá	#808080

Poznámka 1: Hexadecimální hodnota barvy je značena ve formátu #RRGGBB, kde RR je hexadecimální hodnota pro červenou, GG je pro zelenou a BB pro modrou barvu. Poznámka 2: Barvy na modulu jsou napsány v angličtině následovně (Blue, Yellow, Red, Green, White, Orange, Purple, Magenta, Gray).

Krok 3: Spočítejte skóre webové stránky

Spočítejte skóre webové stránky následovně:

• Začněte s počtem řádků kódu uvnitř {složených závorek}. Počítání středníků je dobrým způsobem, jak řádky spočítat, protože jsou vždy na konci jedné řádky.
• Přičtěte +3 za každou větu, která platí (+3):
  • R hodnota Cílové barvy je menší než R hodnota prahové hodnoty.
  • G hodnota Cílové barvy je větší nebo rovna G hodnotě prahové hodnoty.
  • B hodnota Cílové barvy je větší než B hodnota prahové hodnoty.
• Přičtěte 2 (+2) za každý margin nebo padding.
• Přičtěte 1 (+1) za každý border nebo border-radius, pokud se nejedná o 0px nebo 50%.
• Odečtěte 1 (-1) za každý z-index, pokud kdekoliv na modulu není position.
• Přičtěte 1 (+1) za každý font-family, pokud se nejedná o „Comic Sans MS“. Pokud ano, odečtěte 5. (-5)
• Přičtěte 2 (+2) za každý box-shadow nebo text-shadow, pokud se nejedná o none.
• Vynásobte 2 (×2) pokud tlačítka na modulu jsou barevná. Pokud jsou šedá odečtěte 3 (-3).
  • Pokud je zapnutý mód pro zrakově postižené, vynásobte 2 (×2), pokud jsou tlačítka bílá nebo odečtěte 3 (-3), pokud jsou tlačítka černá.
• Pokud je vaše skóre záporné nebo rovno 0, přičítejte 16 (+16), dokud nebude číslo kladné.
• Provádějte ciferaci (sčítání cifer) do doby, dokud vám nezůstane jediná cifra. Poté použijte následující tabulku, abyste zjistili, které tlačítko máte zmáčknout.

Akceptovat (✓)	Zvážit (Δ)	Odmítnout (✗)
2, 3, 5, 7	6, 8	1, 4, 9