Grafika na webu. Lukáš Bařinka

4 °TVEZE WXYHMNR°LS TVSKVEQY -RJSVQEXMOE NI TSHTSVSZ¤RE TVSNIOXIQ RERGSZERÀQ ^ )ZVSTWO¬LS WSGM¤PR°LS JSRHY E VS^TSÐXY LPEZR°LS QÞWXE 4VEL] 4VELE )9 -RZIWXYNIQI HS ZE%° FYHSYGRSWXM

Web a MultiMédia

Grafika na webu Lukáš Bařinka [email protected]

department of computer science and engineering

Funkce grafiky na webu Primární grafická informace Fotografie Schémata Diagramy Loga Bannery

Grafika na webu (2/34) department of computer science and engineering

Funkce grafiky na webu Sekundární grafická informace Dekorace Zvýraznění Šipky Oddělovače


Funkce grafiky na webu Alternativa textové informace Tlačítka Ikony Texty Navigační prvky


Funkce grafiky na webu


Možnosti grafiky v HTML – IMG IMG – Vložení obrázku


Možnosti grafiky v HTML – OBJECT OBJECT – vložení obrázku jako objektu Grafika na webu (8/34) department of computer science and engineering

Možnosti grafiky v HTML


Možnosti grafiky v HTML MAP – Mapa aktivních oblastí <MAP NAME=“jmeno_mapy“ >

AREA – definice oblasti Grafika na webu (10/34) department of computer science and engineering

Možnosti grafiky v HTML <map name="map"> <area shape="rect" coords="0,0,57,463" alt="Anketa" href="../index.html"> <area shape="rect" coords="123,0,667,50" alt="Seznam předmětů" href="cselect.html"> <area shape="rect" coords="127,103,662,139" alt="Předmět" href="course.html"> <area shape="rect" coords="117,183,671,279" . . <area shape="rect" coords="691,323,749,463" alt="Pořadí učitelů" href="teachers.html">


Možnosti grafiky v HTML/ASCII art


Možnosti grafiky v HTML/CSS BACKGROUND – obrázek na pozadí

CSS – obrázek na pozadí { background-color: barva | transparent; background-image: url("soubor") | none; background-repeat: repeat | {x,y,no}-repeat; background-position: pozice; background-attachment: scroll | fixed; } Grafika na webu (13/34) department of computer science and engineering

Určení polohy pozadí v CSS Poloha obrázku se zarovná k objektu Př: background-position: 25% 60%; bod ve 25% šířky a 60% výšky obrázku bude zarovnán k 25% šířky a 60% výšky objektu (např. stránky)


Možnosti grafiky v HTML/JavaScript JavaScript <script type="text/javascript"> function imgover(imgname) { imgname.src = imgname.name + "_a.gif"; } function imgout(imgname) { imgname.src = imgname.name + "_b.gif"; }


Formáty grafických souborů pro web Bitmapové JPEG, PNG, GIF, ICO

Vektorové SVG, SWF


Formáty grafických souborů – JPEG Joint Photographic Experts Group Počet barev: Komprese: Animace: Průhlednost: Postupné v.: Použití:

TrueColor DCT, kvantizace, Huffmanovo kód. NE NE ANO (progressive) Fotografie, velké soubory


JPEG – Postup komprese 1. Převod barev (např. z RGB) na YCbCr

(jas, rozdílová barevná složka B a R)

2. Podvzorkování barevých kanálů (4:2:2 nebo 4:2:0) 3. Rozdělení každého kanálu na bloky 8x8 hodnot 4. Diskrétní kosinová transformace (DCT) 5. Kvantizace DCT koeficientů (celočíselné dělení)

6. Linearizace a kódování koeficientů - aritmetický/Huffmanův kód 7. Uložení do JFIF souboru (záleží na formátu souboru) Obrázky převzaty z wikipedia.org Grafika na webu (18/34) department of computer science and engineering

Formáty grafických souborů – GIF Graphics Interchange Format Počet barev: Komprese: Animace: Průhlednost: Postupné v.: Použití:

max 256 (paleta) LZW s dynam. délkou kódu

(Unisys)

ANO ANO – 0/1 ANO (interlaced) Animace, navigační prvky, průhledná grafika, čárová grafika, schémata, diagramy, ... Grafika na webu (19/34) department of computer science and engineering

Formáty grafických souborů – PNG Portable Network Graphics [ping] Počet barev: Komprese: Animace: Průhlednost: Postupné v.: Použití:

16b (grayscale) / 48b (truecolor) de/inflate with sliding window

(LZ77)

NE ANO – Alfa kanál ANO (interlaced), gamma korekce navigační prvky, částečně průhledná grafika, čárová grafika, schémata, diagramy, ... Grafika na webu (20/34) department of computer science and engineering

Formáty grafických souborů – ICO Icon Počet barev: Komprese: Animace: Průhlednost: Postupné v.: Použití:

16, 256 RLE (pro >4b barvy) NE ANO – 1/0 více velikostí ikony, favicon.ico


Formáty grafických souborů – MNG Multiple-image Network Graphics Počet barev: Komprese: Animace: Průhlednost: Postupné v.: Použití:

48b PNG, JPEG ANO ANO – 0/1, Alfa kanál ANO (interlaced), gamma korekce Rozšiřuje a kombinuje možnosti formátů GIF, PNG a JPEG (MPEG)


Formáty grafických souborů – SVG Scalable Vector Graphics zápis pomocí XML možnost přímé editace komprese GZIP podpora animací a událostí snadná rozšiřitelnost


Formáty grafických souborů – SVG příklad <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="744.09448" height="1052.3622" id="svg2"> <defs id="defs3" /> Grafika na webu (24/34) department of computer science and engineering

Formáty grafických souborů – SWF Macromedia Flash [swiff] proprietární formát binární zápis podpora animací a událostí „uzavřený formát“ podpora většiny SW platforem


Porovnání formátů Čárová grafika TIFF 100%

PNG 1.8%

PNGi 1.2%

GIF 1.8%

JPEG100 17.8%

JPEG95 12.0%

JPEG75 7.4%

JPEG25 3.8%

GIF JPEG100 24.2% 27.1%

JPEG95 11.4%

JPEG75 4.7%

JPEG25 1.8%

Fotografie TIFF 100%

PNG 53.0%

PNGi 22.7%


Stupeň komprese formátu JPEG

Závislost velikosti souboru [%] na stupni komprese/kvalitě obrázku [%]


Stupeň komprese formátu JPEG 75%

17.39%

50%

11.24%

25%

6.75%

10%

3.39%

5%

2.12%

0%

1.71% Grafika na webu (28/34) department of computer science and engineering

GIF animace Základní přístupy ke snímkům animace Replace – kompletní nahrazení snímku Combine – rozdíly mezi snímky (úspora místa) Časování pro každý ze snímků zvlášť Možnost nekonečného opakování animace


GIF animace – Vytvoření pomocí GIMPu Každá vrstva představuje jeden snímek Výběr metody (náhrada snímku / kombinace) Filtry > Animace > De/optimalizovat

Uložení jako animace (ne/cyklická) Změna časování – uložena v názvu vrstvy


GIF – antialiasing průhlednosti

Popředí / pozadí Výběr barvy Odebrání pozadí Uložení


GIMP – GUI Nástroje Barva | štětec, přechod | náhled Nastavení nástroje Záložky – je možné separovat (vrstvy, štětce, přechody, písma, ...)


Úpravy obrázku Ořez •Pomocí nože •Pomocí výběru Změna velikosti •Zachování proporcí •Kubická (lineární) interpolace [NE žádná!] Screenshot •Uložení do PNG/GIF, nikoli do JPEG Grafika na webu (33/34) department of computer science and engineering

Grafika na webu

Děkuji za pozornost

webing.felk.cvut.cz Grafika na webu (34/34) department of computer science and engineering

CSS – relativní Vs absolutní jednotky v designu Výhody a nevýhody jednotlivých jednotek % em +

nezávislost vzhledu stránky na velikosti okna velikosti písma

–

při nevhodném poměru okno/písmo nečitelné nehezké

px

stále stejná velikost nerespektuje přání uživatele

Ukázky designu webů, které jsou “nezávislé” na velikosti okna prohlížeče http://www.wikipedia.org/ http://www.gnome.org/projects/evolution/ http://www.wellstyled.com/ Grafika na webu (35/34) department of computer science and engineering

3-columns layout – HTML
headder

left column (e.g. navigation)

right column (e.g. related topics)

middle column (main content)

footer

3-columns layout – Design HEADDER [1]

NAVIGATION [2]

RELATED [3] CONTENT [4]

FOOTER [5] Grafika na webu (37/34) department of computer science and engineering

3-columns layout – CSS #navigation { float: left; width: 20%; margin: 0; padding: 0; background: yellow; } #related { float: right; width: 10%; margin: 0; padding: 0; background: blue; } #middle { margin:0px 10% 0px 20%; background: white; } Grafika na webu (38/34) department of computer science and engineering

3-columns layout – more DIVs HEADDER [1] RELATED

NAVIGATION

[2]

[3]

CONTENT [4]

FOOTER [5] Grafika na webu (39/34) department of computer science and engineering

Grafika na webu. Lukáš Bařinka

Recommend Documents