Rozvržení vzhledu

Generátory rozvržení vzhledu:

• CSS Layout Generator
• ATCK theme builder

Jednosloupcové

• výchozí vlastnost bloků

Vícesloupcové

• HTML
  • tabulka
    • 
    • rozvržení je realizovatelné i bez CSS a tudíž funkční ve všech prohlížečích
    • nevýhodná pro přenostná zařízení (horizontální posun)
    • problémy při formátování tisku (vypnutí postranních sloupců)
    • neumožňuje změnu pořadí prvků stránky bez zásahu do zdrojového kódu nebo použitím CSS tj. obsah bude většinou až za navigací
    • zobrazí se až po načtení celého obsahu tabulky (dá se vyřešit více tabulkami)
• CSS2
  • absolutní pozicování
    • 
    • vyjme blok z toku textu
    • jednoduchá změna pořadí prvků stránky tj. obsah může být před navigací
    • důležitý obsah patičky nemůže být širší než hlavní obsah, aby jej nepřekryly postranní sloupce
  • plovoucí bloky
    • 
    • využívá se funkce obtékání
    • jednoduchá změna pořadí prvků stránky tj. obsah může být před navigací
    • ukončení plovoucího boxu
      • prvkem obsahující alespoň 1 znak (např.  ) s CSS vlastnosmi (ne vždy je takový prvek k dispozici):

        • clear: both;
          font-size: 1px /* NN7+ */
          height: 1px

      • pouze pomocí CSS vlastností

        • /*  
           * http://perishablepress.com/new-clearfix-hack
           * (http://www.positioniseverything.net/easyclearing.html)
           */
          .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
          }
          * html .clearfix             { zoom: 1; } /* IE6 */
          *:first-child+html .clearfix { zoom: 1; } /* IE7 */

        • univerzální řešení
          • vychází z principu 3-col layout via CSS, ale navíc upravuje pořadí na "content first" 
          • výhoda: kromě .clearfix není potřeba znát šířku sloupce s osahem 
          • nevýhoda: je třeba pomocný prvek
          • 

          • #section-header { }
            
            #section-content {
              /* obtekani ukonceno pomoci .clearfix */
            }
            #content-wrapper {
              float: left;
              width: 100%;
            }
            #content {
              margin-left: 300px; /* %, em */
              margin-right: 200px; /* %, em */
            }
            #sidebar-left {
              float: left;
              width: 300px; /* %, em */
              margin-left: -100%;
            }
            #sidebar-right {
              float: left;
              width: 200px; /* %, em */
              margin-left: -200px; /* %, em */
            }
            
            #section-footer { }

        • řešení vhodné pouze pro GRID
          • výhoda: kromě .clearfix není potřeba žádný pomocný prvek
          • nevýhoda: je třeba znát šířky všech sloupců 

          • /* http://www.palantir.net/blog/responsive-design-s-dirty-little-secret */
            #section-header,
            #section-content,
            #section-footer {
              width: 960px; /* %, em */
            }
            #section-content {
              /* obtekani ukonceno pomoci .clearfix */
            }
            #content {
              float: left;
              width: 460px; /* %, em */
              margin-left: 300px; /* %, em */
              margin-right: -100%;
            }
            #sidebar-left {
              float: left;
              width: 300px; /* %, em */
              margin-left: 0;
              margin-right: -100%;
            }
            #sidebar-right {
              float: right;
              width: 200px; /* %, em */
              margin-right: 0;
              margin-left: -100%;
            }

        • Flexbox (Flexible reordering) – "řešení budoucnosti"?
          • 

          • <header>...</header>
            <main>
              <article>...</article>
              <nav>...</nav>
              <aside>...</aside>
            </main>
            <footer>...</footer>

            • main {
                display: flex;
              }
              nav {
                width: 13em;
                flex: none;
              }
              article {
                width: auto;
                flex: auto;
                order: 2;
              }
              aside {
                width: 20%;
                flex: none;
              }

              • Podpora: IE 10+, Opera 12.1+, Chrome, Firefox, Safari, iOS, Android
                • planningforaliens.com/blog/2014/03/11/real-world-flexbox
                • css-tricks.com/using-flexbox
                • philipwalton.github.io/solved-by-flexbox
                  • Better, Simpler Grids
                  • The Media Object
                  • Input Add-ons
                  • Sticky Footer
                  • Holy Grail Layout
                  • Vertical Centering

  Poznámka: CSS vlastnosti marginse dá využít také jako "relativní pozicování"

  Pevná šířka

  • v současnosti zpravidla 960 px (dříve 740 px)
  • jednoduchý návrh rozvržení vzhledu (layout)
  • vhodné pro komplikované grafické návrhy
  • u menšího rozlišením (velikosti okna) se zobrazí horizontální posuv
  • u většího rozlišením (velikosti okna) není využita celá dostupná plocha okna prohlížeče
  • při zvětšení písma hrozí rozpad layoutu nebo se zobrazí horizontální posuvníky

  Přizpůsobivá šířka

  • je udávána v jednotkách em
  • přizpůsobuje velikosti textu, sož je výhoda pro uživatele s horším zrakem
  • odstraňuje nevýhodu nevyužité plochy prohlížeče u velkého rozlišení (okna prohlížeče)

  Pružná šířka

  • je udávána v %
  • komplikovanější grafický návrh
  • přizpůsobuje se velikosti okna prohlížeče a využívá tak celou jeho dostupnou plochu, což ocení uživatelé s větší obrazovkou
  • ve většině případů se nastavuj minimální (usnadňuje návrh layoutu) a maximální (usnadňuje čtení) hodnotou šířky.

  Šablony se většinou navrhují buďto s pevnou nebo pružnou šířkou. Pružná šířka ovšem bývá kombinací přizpůsobivé a pružné varianty v kombinaci se záporným pozicováním plovoucích bloků.

  Při rozvržení obsahu je vhodné dle typografie dodržovat šířku odstavce (bloků) 30-80 znaků.

  Pevnou nebo minimální šířku grafického návrhu je možné odhadnout ze statistik návštěvnosti.

Grafika

Pro práci s grafikou je vhodné mít:

• zkalibrovaný monitor, projektor, tiskárnu, skener, fotoaparát atd. (např. kalibrační sonda x-rite)
  • při předávání dokumentů předávat i barevný profil monitoru (ICC, ICM)
  • při úpravách fotografií používejte příslušný Minilab ICC (ICM) profil prostřednictvím kterého budete fotografie tisknout
• osvětlení 5200 K
• co možná největší zobrazovací plochu
• tablet (tablet notebook, tablet pc, apple tablet)

Pro média je vhodné na web umístit logo ve vektorové grafice společně s informacemi o barvách a písmu (např. Loga a grafický manuál | Česká pojišťovna)

Rastrová grafika

V rastrové (bitmapové) grafice je celý obrázek popsán pomocí jednotlivých barevných bodů (pixelů) uspořádaných do pravoúhlé mřížky. Každý bod má určen svou přesnou polohu a barvu. Kvalitu záznamu obrázku ovlivňuje především rozlišení (zobrazení 96 dpi, tisk 300 dpi) a barevná hloubka (počet barev).

Výhody:

• obrázek je možné vytvořit pomocí digitálního fotoaparátu nebo skeneru

Nevýhody:

• velké nároky na výkon počítače (plocha m² ≈ souboru o velikosti 1 GB)
• při změně velikosti dochází ke zhoršování kvality

Použití:

• úprava digitálních fotografií
• webová grafika
• vlastní grafická díla

Editory:

• Gimp (XCF)
• Adobe Photoshop (PSD)
• Corel PHOTO-PAINT (CPT)

Ukázka: Dove Evolution

Otázky

Jaký bude obrázek při změně rozlišení monitoru z 1024x768 px na 800x600 px?

1. menší
2. stejně velký
3. větší

Kolik pixelů má 12 Mpx foťák?

1. 120 milionů
2. 12 milionů
3. 12 tisíc

Vektorová grafika

Vektorový obrázek je složen ze základních geometrických útvarů jako jsou body, přímky, křivky a mnohoúhelníky.

Výhody:

• změna velikosti bez ztráty kvality
• obrázek je rozdělen na samostatné objeky, se kterými je možné pracovat odděleně
• mnohem nižší nároky na výkon počítače než u rastrové grafiky

Nevýhody:

• pracné vytvoření obrázku
• příliš složiné objekty zvyšují nároky na výkon počítače (nevhodné pro fotografie)

Použití:

• logo
• počítačová sazba
• diagramy
• animace
• vlastní grafická díla

Editory:

• Inkscape (SVG)
• Adobe Illustrator (AI)
• CorelDraw (CDR)

Bézierova křivka

Obrázek není složen z jednotlivých bodů, ale z křivek – vektorů.

Křivky spojují jednotlivé kotevní body a mohou mít definovanou výplň (barevná plocha nebo barevný přechod). Tyto čáry se nazývají Bézierovy křivky, které umožňují pomocí čtyř bodů popsat libovolný úsek křivky.

Křivka je popsána pomocí dvou krajních kotevních bodů a dvou editačních bodů, které určují tvar křivky. Spojnice mezi kotevním a editačním bodem se nazývá směrová úsečka a je tečnou k výsledné křivce.

Grafické formáty

Rastrové (bitmapové) formáty

Přehled základních rastrových formátů

Vlastnost	GIF	JPEG	PNG	TIFF
Model RGB	256 barev (8 bitů)	16 milionů (24 bitů)	16 milionů (24 bitů)	16 milionů (24 bitů)
Model CMYK		4 miliardy (32 bitů)		4 miliardy (32 bitů)
Gama korekce
Průhlednost	2 úrovně (1 bit)		256 úrovní (8 bitů)	256 úrovní (8 bitů)
Komprese	bezztrátová	ztrátová	bezztrátová	bezztrátová
Proklad
Animace
Vrstvy

GIF (Graphics Interchange Format)

• určení: archivace, webová grafika, nadpisy, plakáty, loga
• nevhodné pro: barevné fotografie

JPEG (Joint Photographic Experts Group)

• určení: fotografie, hladké přechody v tónu a barvě
• nevhodné pro: mnohonásobné zpracování a fotomontáže, perokresbu, text, ikonky (rušivé artefakty)

PNG (Portable Network Graphics)

• určení: archivace, text, čárová grafika, čisté barevné plochy a ostré rozhraní barev
• nevhodné pro: fotografie (5-10x větší soubor oproti JPEG)
• průhlednost PNG umí až IE7+
  • pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku

TIFF (Tag Image File Format)

• určení: tisk, archivace obrázků

ICO

Ikona favicon.ico (Favorite Icon – favicon) usnadňuje uživateli vizuální odlišení jednotlivých webů. Obsahuje několik vrstev stejného obrázku v různé kvalitě.

1. Vrstva (adresní řádek prohlížeče, minimalizované okno atd.):
   • velikost: 16x16 px
   • počet barev: 16 (4 bity)
2. Vrstva (hlavní panel systému atd.):
   • velikost: 32x32 px
   • počet barev: 256 (8 bitů)
3. Vrstva (pracovní plocha atd.):
   • velikost: 48x48 px
   • maximální počet barev: 2³² (32 bitů)

Asi nejrychleji můžete vytvořit ale hlavně zkontrolovat funkčnost favicony pomocí online služby Realfavicongenerator. 

Další rozměry:

• Favicon
  • favicon-16x16.png - The classic favicon, displayed in the tabs
  • favicon-32x32.png – Main panel, Safari on Mac OS
  • favicon-48x48.png – Desktop
  • favicon-96x96.png - Google TV
  • favicon-160x160.png - Opera Speed Dial
  • favicon-192x192.png - Android Chrome M36+
• Apple Icons
  • apple-touch-icon.png
  • apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch
  • apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7
  • apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS ≤ 6
  • apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS ≥ 7
  • apple-touch-icon-114x114.png - iPhone (with 2× display) iOS ≤ 6
  • apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS ≥ 7
  • apple-touch-icon-144x144.png - iPad (with 2× display) iOS ≤ 6
  • apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS ≥ 7
  • apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS ≥ 8
  • apple-touch-icon-precomposed.png (180x180)
• Windows 8 Icons
  • mstile-70x70.png - Windows 8.1 / IE11
  • mstile-144x144.png - Windows 8 / IE10
  • mstile-150x150.png - Windows 8.1 / IE11
  • mstile-310x150.png - Windows 8.1 / IE11
  • mstile-310x310.png - Windows 8.1 / IE11
• Apple Startup Images
  • apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait)
  • apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape)
  • apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait)
  • apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape)
  • apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5
  • apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina)
  • apple-touch-startup-image-320x460.png - iOS 6 iPhone

Odkaz na ikonu umístěte do hlavičky (X)HTML dokumentu:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Nejlepším místem pro soubor favicon.ico je kořenový adresář (root) webu.

apple-touch-icon.png

Apple zařízení iPhone, iPod a iPad hledá pro zobrazení ikony webu na plože níže uvedené soubory:

1. apple-touch-icon-57×57-precomposed.png
2. apple-touch-icon-57×57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png (129x129 px)
5. použije se náhled webu (ovšem v logu webu budou chybová hlášení 404 – soubor nenalezen)

Obrázky se umisťují buď přímo do kořene webu nebo se pomocí meta tagu k nim definuje cesta (jedna):

<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

nebo více cest pro každý rozměr (57x57, 72×72, 114×114 a 129x129 px) zvlášť:

<link rel="apple-touch-icon" sizes="57×57" href="images/apple-touch-icon-ipad-57.png" />
<link rel="apple-touch-icon" sizes="72×72" href="images/apple-touch-icon-ipad-72.png" />
<link rel="apple-touch-icon" sizes="114×114" href="images/apple-touch-icon-iphone-114.png" />
<link rel="apple-touch-icon" sizes="129×129" href="images/apple-touch-icon-iphone-129.png" />

V nejjednodušší variantě stačí pouze umístit do kořene webu apple-touch-icon.png o rozměrech 129x129 px.  Zařízení si velikosti přizpůsobí dle potřeb (k zakulacení rožků dochází automaticky). Při použítí pouze souboru apple-touch-icon.png nebudou použity žádné další efekty.

Tvorba a editace

Asi nejrychleji můžete vytvořit favicon pomocí online služby Bradicon. Pro vytváření a editaci je možné použít např. aplikaci Gimp.

Poznámka:
V Internet Exploreru se ikona zobrazuje až po přidání webové stránky do oblíbených položek.

XCF

• nativní formát aplikace Gimp
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

PAT

• formát obrázků používaných nástrojem Plechovka a Razítko pro výplně vzorkem
• v aplikaci Gimp se ukládají do adresáře patterns

ABR

• formát pro stopy štětce

GBR

• formát pro stopy štětce
• mód:
  • RGB – otisk štětce je barevnou kopií stopy
  • odstíny šedi – pro otisk se použije aktuální barva popředí

GIH

• formát pro animované stopy štětce citlivé na směr pohybu štětce

PSD

• nativní formát aplikace Adobe Photoshop
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

CPT

• nativní formát aplikace Corel PHOTO-PAINT
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

TGA

• textury 3D modelovacích programů

Vektorové formáty

SVG

• nativní formát aplikace Inkscape
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• založen na jazyce XML
• příklad využití SVG formátu na webu: Demonstration of the SVG Checkbox and Radio Button Object
• jednoduchý on-line SVG editor
• podpora v prohlížečích: IE9+ (IE6+ s Chrome Frame rozšířením), Firefox 1.5+, Opera 9.50+, Safari 4+, Chrome 1+

AI

• nativní formát aplikace Adobe Illustrator
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• lepší vektory než EPS

CDR

• nativní formát aplikace CorelDraw
• umožňuje ukládat společně rastrovou i vektorovou grafiku

PS (PostScript)

• nezávislý na zařízení, na kterém se má tisknout
• tisknutelná oblast je celý list papíru

EPS (Encapsulated PostScript)

• nezávislý na zařízení, na kterém se má tisknout
• tisknutelná oblast je pouze obrázek
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• lepší barvy než AI

Digitální negativ

RAW [ro:] (surový, nezpracovaný)

• data digitálního snímače, která nejsou nijak zpracovaná (soubor RAW není jako obrázek přímo použitelný, ale obsahuje všechny potřebné informace k jeho vytvoření)
• vlastnosti fotografie (např. vyvážení bílé) se dají upravit ještě stažením do počítače
• každý výrobce používá svoji vlastní příponu RAW soboru (RAW, NFG, DNG, CRW, CR2, NEF, ORF, MRW atd.)

 

Barvy

Při volbě barev grafického návrhu je možné využít:

1. logo společnosti
2. zaužívaná barevná schémata společnosti
3. generátory barevných schémat (Color Scheme Designer) usnadňují u grafického návrhu určit barvu:
   • pozadí
   • textu
   • nadpisů
   • nenavštívených odkazů
   • navštívených odkazů
   • aktivních odkazů

Zadavatel by měl určit:

1. alespoň jednu oblíbenou barvu
2. nevhodné barvy

Objem dat

Objem přenášených dat (zdrojové kódy, CSS, skripty, obrázky, přílohy, multimédia atd.) by měl být co nejmenší.

Doporučený postup optimalizace grafického návrhu

1. Grafický návrh vzhledu webové stránky ukládejte v nativním formátu aplikace ve které jej vytváříte SVG, CDR, AI, XCF, PSD, CPT atd.
2. Návrh exportujte do formátu PNG a rozdělte na opakující se části.
3. Vytvořte prvotní návrh webové stránky s PNG obrázky.
4. Jakmile jste s návrhem spokojeni optimalizujte obrázky:
   • uložte PNG obrázky do formátu GIF a JPG s 85% kvalitou (nejlépe dávkově např. aplikací Gwenview nebo IrfanView)
   • porovnejte velikost a kvalitu stejného obrázku ve všech třech formátech
   • opravte přípony zvolených obrázků v CSS souborech se vzhledem

Uživatelské rozhraní

Uživatelské skupiny

• BFU (běžný Franta uživatel), Lama, Lamer – nezkušený uživatel (úplně neschopný a zároveň všeho schopný)

• Geek, Guru – uživatel, který má hluboké technické nebo odborné znalosti, talent a obzvláštní zapálení pro svůj obor

Uživatelské rozhraní by měl být schopen ovládat i běžný uživatel, ale např. administrace webu již předpokládá více zkušeností (např. auto také může řídit jak profesor, tak i skladník, ale bagr pouze osoba s příslušným speciální zaškolením).

Při návrhu uživatelského rozhraní používejte standardní prvky (podtržené odkazy, menu, formulářové prvky, tlačítka atd.), které uživatelé očekávají. Inovace je možná, ale ne na úkor zvyklostem (např. posuvné dveře místo klasických mohou pro někoho představovat neočekávanou překážku). Uživatelské rozhraní by se mělo blížit spíše dálkovému ovladači televize, než kokpitu letadla.

Požadavky

• jednoduchost
• přehlednost
• čitelnost (kontrast mezi textem a pozadím)
• použitelnost
• minimum grafiky
• maximum funkčních prvků
• vyhledávací služba
• co nejméně nespokojených uživatelů

Odkazy:

• collections favorite design elements