1 / 22

Internetové publikování

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222 , 4167 ( sekretari át ústavu 111) e-mail: petr.zamostny @ vscht.cz. Internetové publikování Grafika pro web - Úvod. Grafika na webu - p ro a proti . Výhody multimédií Atraktivnější a zajímavější

baakir
Download Presentation

Internetové publikování

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D.místnost: A-72atel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz

  2. Internetové publikováníGrafika pro web - Úvod

  3. Grafika na webu - pro a proti • Výhody multimédií • Atraktivnější a zajímavější • Mnohdy účinnější přenos informace • Nevýhody • Nároky na přenosovou kapacitu • Náročnější na vytváření

  4. Umístění MM na stránku • Samostatný soubor s MM obsahem odkázaný v HTML • Interpretace MM dat • Prohlížeč • Externí aplikace • Plug-in

  5. Vkládání grafiky na stránku • Obrázek –grafická informace • Element <img> • Dekorativní grafika • CSS background-image

  6. Obrázky • Rastrová grafika • Obrázky složeny z matice bodů, kterým je přiřazena barva • GIF, JPEG, PNG • Vektorová grafika • Obrázky jsou složeny z objektů • SVG • http://podklady.interval.cz/hejral/451/priklad02.htm

  7. Základní pojmy rastrové grafiky • Rozlišení / velikost obrázku • Fyzické rozměry obrázku v pixelech (bodech), např 300x200 • Někdy se uvádí rozměry v délkových jednotkách např 3x2 cm ... • ... A rozlišení v dpi (dots per inch, body na palec) • 1 palec (inch) = 2,54 cm • 254 dpi = 100 bodů/cm

  8. Základní pojmy rastrové grafiky • Barevný režim černobílý Stupně šedi Barevný

  9. Základní pojmy rastrové grafiky • Barevná hloubka • TrueColor (24 bit) = 2^24 = 16777216 barev • HighColor (16 bit) = 2^16 = 65536 barev • 256 barev (8 bit) = 2^8 = 256 barev • Barevná paleta • Obrázek může být definován s malou barevnou houbkou, ale na optimalizované barevné paletě

  10. Velikost obrázků • Důležitá optimalizace kvalita/velikost • Snižování velikosti • Snížení rozlišení • Snížení barevné hloubky • Vhodná volba formátu • Komprese • Bezztrátová • Ztrátová • Použití vektorových formátů

  11. Snižování rozlišení původní 50% 25%

  12. Snížení počtu barev TrueColor 256 barev 32 barev 256 systémových barev 6 barev + "dithering"

  13. JPEG • Barevný režim TrueColor • Možnost progresivního formátování • Postupné zobrazování obrázku tak jak se načítá • Ztrátová komprese založená na nedokonalosti lidského zraku • Vhodné zejména pro fotografie • Volitelná kvalita

  14. Kvalita komprese JPEG

  15. GIF • Max. 256 barev • Vhodné pro většinu nefotografické grafiky • Nepříliš vhodné pro velké plochy s barevnými přechody • Podpora animace • Podpora průhlednosti (pouze dvojúrovňová)

  16. PNG • Nový formát, podpora až od NN, IE 4.0+ • http://www.libpng.org/pub/png/pngapbr.html • http://www.w3.org/Graphics/PNG/ • Mnoho různých barevných hloubek • Nepodporuje animaci • Výborná podpora průhlednosti • Alfa-kanál = Průhlednost

  17. Zdroje grafiky • Soubory klipartů, internetové galerie • Pozor na licenční podmínky • Fotografování, scanování + úprava • Vlastní "umělecká" tvorba • Adobe Photoshop, Illustrator • Correl Draw • Paint Shop Pro • GIMP • Paint.NET (instalován v učebnách) • free, ale jinak nic moc

  18. Vyhlazování hran

  19. Role obrázku na stránce • Obrázek • Odkaz (celý obrázek nebo klikací mapa) • http://www.w3schools.com/tags/tag_area.asp • Pozadí elementu • Pozor na využití dlaždicového skládání motivu pozadí • Pozor na velikost okna prohlížeče

  20. Zápočtové projekty z minulých let • http://www.pamatnik-svobody-hermanec.czechian.net/5.html • http://sweb.cz/E.Keindlova/Uvod.html • http://web.vscht.cz/horackoj/uvod.html • http://web.vscht.cz/hrotkovr/neil/index.html • http://www.sweb.cz/svhurka2/ • http://web.vscht.cz/cernochk/ • http://web.vscht.cz/kutnas/1/index.html • http://web.vscht.cz/nabelkoi/index.html • http://web.vscht.cz/durinap/IP%20zapocet/Site/Index.html • http://web.vscht.cz/pohunkop/index1.html

  21. Náměty na témata zápočtových projektů • Toxikologie: Způsoby zjišťování toxicity látek, stanovení úrovně expozice a expozičních limitů • Ekologie: Skleníkový efekt, emise skleníkových plynů a globální oteplování • Matematika: Přehled derivací elementárních funkcí a pravidel o derivování složených funkcí a výrazů s příklady • Chemie: Základní krystalové soustavy

  22. Náměty na témata zápočtových projektů • Chemie: Halogeny a jejich vlastnosti • Ekonomie: Zákon nabídky a poptávky • Podnikání: WWW prezentace mé firmy, firmy mých rodičů, známých • Internet: Porovnání jednotlivých webhostingů v doméně .cz

More Related