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

Rozměr: px

Začít zobrazení ze stránky:

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

Františka Vaňková
před 9 lety
Počet zobrazení:

1 Grafika pro web

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

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

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

5 Možnosti grafiky v HTML IMG Vložení obrázku <IMG > SRC= jmeno_souboru NAME= znacka ALT= kratky_popis ALIGN= zarovnani WIDTH= sirka HEIGHT= vyska USEMAP= klientska_mapa CLASS= trida... ID, STYLE, BORDER, HSPACE, VSPACE, LONGDESC, ISMAP

zarovnani WIDTH= sirka HEIGHT= vyska USEMAP=

6 Možnosti grafiky v HTML OBJECT vložení obrázku jako objektu <OBJECT DATA= jmeno_souboru TYPE= image/gif NAME= znacka STANDBY= text_pri_nahravani HEIGHT= vyska WIDTH= sirka USEMAP= mapa TABINDEX= poradi... DECLARE, CLASSID, CODEBASE, CODETYPE, ARCHIVE... >

STANDBY= text_pri_nahravani HEIGHT= vyska WIDTH= sirka USEMAP=

7 Možnosti grafiky v HTML MAP Mapa aktivních oblastí <MAP > NAME= jmeno_mapy AREA definice oblasti <AREA SHAPE= default rect circle poly COORDS= souradnice,... HREF= odkaz ALT= kratky_popis... NOHREF, TABINDEX, ACCESSKEY, ONFOCUS, ONBLUR >

8 Možnosti grafiky v HTML <img src="balls.gif" width="652" height="216" usemap="#map" alt="lukáš Bařinka"> <map name="map"> <area shape="rect" coords="43,53,195,66" href="projects/index.html" alt="projects"> <area shape="rect" coords="252,7,369,20" href="photos/index.html" alt="photos"> <area shape="circle" coords="630,178,8" href="mailto:l.barinka@sh.cvut.cz" alt=" "> </map>

shape="rect" coords="43,53,195,66" href="projects/index.

9 Možnosti grafiky v HTML

10 Možnosti grafiky v HTML BACKGROUND obrázek na pozadí <BODY BGCOLOR= barva BACKGROUND= jmeno_souboru... > 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; }

.. > CSS obrázek na pozadí { background-color: barva transparent;

11 Možnosti grafiky v HTML JavaScript <script language="javascript"> function imgover(imgname) { imgname.src = imgname.name + "_a.gif"; } function imgout(imgname) { imgname.src = imgname.name + "_b.gif"; } </script> <a href= target.html" onmouseover="imgover(menu1)" onmouseout="imgout(menu1)"> <img src="menu1_a.gif name="menu1 > </a>

$gif"; } function imgout(imgname) { imgname.src = imgname.name + "_b.$

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

13 Formáty grafických souborů - JPEG Joint Photographic Experts Group Počet barev: Komprese: Animace: Průhlednost: Postupné v.: Použití: TrueColor DCT, kvantizace, aritmetické kód. NE NE ANO (progressive) Fotografie, velké soubory

14 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,...

: Použití: max 256 (paleta) LZW s dynam.

15 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,...

: Použití: 16b (grayscale) / 48b (truecolor) de/inflate with sliding window (LZ77)

16 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

17 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)

: Použití: 48b PNG, JPEG ANO ANO 0/1, Alfa kanál ANO

18 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

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

0% JPEG75 7.4% JPEG25 3.8% Fotografie TIFF 100% PNG 53.

20 Porovnání formátů Čárová grafika TIFF 100% PNG 1.8% PNGi 1.2% GIF 1.8% JPEG % JPEG % JPEG75 7.4% JPEG25 3.8% Fotografie TIFF 100% PNG 53.0% PNGi 22.7% GIF 24.2% JPEG % JPEG % JPEG75 4.7% JPEG25 1.8%

21 Stupeň komprese formátu JPEG Závislost velikosti souboru [%] na stupni komprese [%]

22 Stupeň komprese formátu JPEG 75% 50% 25% 10% 5% 0% 17.39% 11.24% 6.75% 3.39% 2.12% 1.71%

23 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

24 Budoucnost Podpora nových formátů SVG, MNG,... v prohlížečích Dokončení přechodu na HTML 4.01 a směřování k XHTML a XML reprezentaci Rozšíření podpory CSS1/CSS2 a příprava na CSS3 Rozvoj formátu SVG, podpora audio/video,...

25 Grafika na webu Děkuji za pozornost

Podobné dokumenty

Grafika na webu. Lukáš Bařinka barinkl@fit.cvut.cz

Grafika na webu. Lukáš Bařinka barinkl@fit.cvut.cz 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 Lukáš