Multimédia v e-learningu Centrum distančního vzdělávání Univerzita Palackého v Olomouci

Co jsou multimédia Odborně pojem Multimédia definujeme jako integraci textu, obrázků, grafiky, zvuku, animace a videa za účelem zprostředkování informací. Při jejich použití na počítači musí být uživateli umožněno, aby se zúčastnil tohoto zprostředkování interaktivně, tzn. Aby měl možnost zasáhnout do průběhu multimediálního programu.

Multimediální komponenty Vektorový obraz Rastrový obraz Počítačová animace Video Text Audio (zvuk, hudba…) Synchronizovaná multimédia

Nezapomeňte! Použití multimédií ve studijních oporách má své výhody a nevýhody. K výhodám patří atraktivnější a zajímavější studijní materiály, pohodlnější a účinnější vstřebávání informací. Mezi nevýhody se pak řadí náročnost na přenosovou kapacitu sítě, zvýšené nároky na výkon počítače, jsou finančně i časově náročné na vytváření, musíme najít vždy kompromis mezi množstvím přenesených dat a požadavky na estetiku opory.

MM komponenty na stránce element <embed> <embed src =“URL k souboru“ type=“MIME typ dat“ width=“šířka objektu“ height=“výška objektu“> </embed>

MM komponenty na stránce element <object> <object data =“URL k souboru“ type=“MIME typ dat“ classid=“jednoznačná identifikace přehrávače“ codetype="MIME typ záznamu“ width=“šířka panelu na přehráváni“ height=“výška panelu na přehrávání“ align=“určuje zarovnání panelu“ autostart=“automatické spuštění záznamu“ standby=“text, který se zobrází během nahrávání“ name=“jméno objektu“ – pro skripovací jazyky> Pak nasledují elementy <param>, které mohou mít své další atributy. <param name="…..." value="……" id=“identifikátor pro skriptovací jazyky“/> Mohou existovat elementy se jménem: src – připojuje vlastní multimediální soubor autostart – při hodnotě „true“ se spouští automaticky controls – při hodnotě „ImageWindow“ nejsou žádná tlačítka k ovládání přehrávání, při hodnotě „All“ jsou k dispozici všechna a další Nakonec následuje vlastní verze objektu (obrázek, text, zvuk…) – umožňuje vnořování </object>

ClassId a MIME type atribut CLASSID elementu OBJECT. Tento atribut jednoznačně identifikuje software, použitý na přehrání záznamu. Například classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" jednoznačně identifikuje WindowMediaPlayer 6.4. Tento kód vlastně identifikuje prvek ActiveX, který musí být nainstalován na PC předtím, než bude záznám přehráván. Pokud jej uživatel nemá ještě nainstalovaný, prohlížeč jej automaticky stáhne a nainstaluje. MIME (Multipurpose Internet Mail Extensions) je internetový standard, který popisuje druh obsahu (text, obrázky, audio, video…) Například: audio/mpeg očekává soubor *. mp3 MIME typy jsou uvedeny v dokumentu : RFC-2046:MIME Part2:Media Types …standard IETF(Internet Engineering Task Force) Různé aplikace podporují různé MIME typy.

Grafické formáty Rastrové – GIF, JPEG, PNG Vektorové – SVG Jaké výhody obecně přináší vektorová grafika oproti rastrové: je datově mnohem menší objekty nejsou rozměrově nijak limitovány (mohou být zvětšovány bez roztřepení a ztráty kvality) výplně a čáry mohou být průsvitné, nebo vybarvené přechodovou výplní s minimálním zvětšením souboru. Ale i vektorová grafika má své nevýhody: vektorová grafika se nehodí na příliš složité obrazce (velké množství barev, složitý tvar – třeba fotky)

Využití obrázků Jednoduchý obrázek Pozadí stránky Obrázek jako odkaz Klikací mapy Animovaný obrázek

Umístění obrázku na stránky <img src="jméno_souboru"> Příkaz má parametry, které určují některé vlastnosti obrázku. Např.: Align="left" (right, center) - umístění obrázku na řádce v dokumentu (u levého, pravého okraje stránky nebo v jejím středu). Implicitně = left Width="číslo" - šířka obrázku v pixelech. Není-li uveden, obrázek se zobrazí v původní šířce Height="číslo" - výška obrázku v pixelech. Není-li uveden, obrázek se zobrazí v původní výšce Alt="text" - popisek, který se "objeví" při ukázání myší na obrázek. Nepovinný. Border="číslo" - rámeček okolo obrázku a jeho tloušťka v pixelech. Nepovinný, pokud obrázek není zároveň odkazem. Jestliže se jedná o odkaz, zobrazí se modrý rámeček o tloušťce 2 pixelů. Většinou se jedná o rušivý prvek stránky, proto se do parametru udává hodnota "0" - rámeček zmizí. Hspace="číslo" - velikost volného prostoru okolo obrázku v pixelech po jeho levé a pravé straně. Text není "nalepený" na okraj obrázku Vspace="číslo" - velikost volného prostoru nad a pod obrázkem v pixelech

Obrázek jako pozadí element <body>…… atribut background Atribut background je složená vlastnost: bacground-image: definuje obrázek tvořící pozadí, hodnota je url bacground-repeat: udává, jak se má obrázek tvořící pozadí přes prvek body opakovat, hodnoty jsou: repeat, repeat-x(opakované vodorovně), repeat-y(opakované svisle), no-repeat (neopakuje se) bacground-position: nastavuje polohu obrázku tvořícího pozadí, hodnoty tvoří dvojici souřadnic x a y. bacground-attachment: udává, zda je obrázek na pozadí fixně nebo se posouvá s obsahem, hodnoty jsou scroll (posouvá se), fixed(neposouvá se). Platí pouze pro Internet Explorer.

Obrázek jako odkaz <a href="http://adresa_počítače"><img src="jméno_souboru" parametry...></a>

Klikací mapy <map name="mojemapa"> navigace.gif – plan.html, tisk.html, help.html, uvod.html <map name="mojemapa"> <area href="plan.html" alt="Pracovní plán" shape=rect coords="22,16,96,90"> <area href="tisk.html" alt="Tisk plánu" shape=rect coords="111,16,182,90"> <area href="help.html" alt="Nápověda" shape=poly coords="200,16,272,16,272,90,200,90"> <area href="uvod.html" alt="Zpět na hlavní stránku" shape=circle coords="322,52,37"></map> <img src="navigace.gif" usemap="#mojemapa">

Animované obrázky

Programy pro tvorbu grafiky Rastrové programy na prohlížení, správu a úpravy fotografií Prohlížeč obrázků (Windows XP). Jen prohlížení a tisk, bez úprav obrázků. IrfanView - prohlížeč + základní úpravy - freeware. XnView - prohlížeč + základní úpravy - freeware. Adobe Photoshop Album 2.0 Starter Edition - základní verze zdarma Ulead Photo Express - existuje verze zdarma. Pouze v angličtině.  Zoner Media Explorer 6.0 - licencován. Rastrové programy na úpravy fotografií a koláže Adobe Photoshop, stačí i LE nebo Elements - vynikající na úpravy a koláže. Corel Photo Paint 9 nebo 11 – Paint Shop Pro 8. -obsahuje i nástroj na tvorbu animovaných GIFů Animation Shop. GIMP - vynikající na úpravy a koláže, trochu svérázné, ale logické ovládání - Open Source Rastrové programy na tvorbu animovaných GIFů Zoner GIF animator. Animation Shop. Součást Paint Shop Pro 8. Editory vektorové grafiky: Open Office Draw 1.1- Open Source - legálně volně dostupný. Corel Draw 9.0 CZ nebo 11 CZ Zoner Callisto 4.0 Tvorba a čtení PDF souborů: OpenOffice verze Adobe Acrobat 6.0 CZ - komfortní profesionální nástroj na tvorbu PDF, vysoká cena. Adobe Acrobat Reader - čtení PDF souborů, volně dostupný program.

Videoklipy Nabízí se několik řešení ke snížení objemu dat, ale všechny snižují kvalitu zpracovávaného a zobrazovaného video signálu. A. Nejjednodušším řešením je zobrazení v menším okně, než je plná. B. Další možností je snížení rychlosti promítání snímků. Původní rychlost 30 obrázků za sekundu se sníží na 15 - 10 obrázků. Toto se však projeví v trhaném pohybu, který je již okem viditelný. Ještě nižší rychlost se používá při videokonferencích. C. Třetí možností je komprese v kódování obrazu. Většina kompresních metod je ale ztrátová, takže při zpětné dekomprimaci obraz neobsahuje všechna původní data. Dochází tím ke zhoršení kvality obrazu. Formáty videa: MPEG (MovingPicturesExpertGroup) (*.mpg nebo *.mpeg ) AVI ( Audio Video Interleave) - (*.avi) QuickTime formát firmy Apple (*.mov) Real Video Format firmy RealMedia (*.rm nebo *.ram ) Shokwave (Flash) format firmy Macromedia ( *.swf

Vložení videa do stránky Použitím odkazu <a href="jméno_souboru">Název videa</a> Použitím <img> <img dynsrc="jméno_souboru"> Parametry: Loop="číslo" – číslo udává počet opakování videoklipu. Je možné číselný údaj nahradit slovem "infinite", které určuje nekonečné opakování. Implicitně = 1; Controls - parametr zobrazí sadu ovládacích tlačítek (přehrávání, stop, pauza). Nepovinný Start="mouseover" - určuje, na jaký pokyn se začne soubor přehrávat. Uvedený příklad spouští přehrávání při přejetí myší nad klipem. Není-li uveden, spouští se přehrání po načtení stránky. Tento způsob nám ale nedovoluje přehrávání videa příliš ovlivňovat a hlavně funguje jen v Internet Exploreru.

Vložení videa do stránky Použitím <embed> - např. pro QuickTime formát <embed src="sample.mov" width="160" height="144"autoplay="true" controller="false"pluginspage="http://www.apple.com/quicktime/download/"></embed> Použitím <object> <object data="video.avi" název souboru classid=“jednoznačná identifikace přehrávače“ codetype="video/avi" typ záznamu width=“šířka panelu na přehráváni“ height=“výška panelu na přehrávání“ align=“určuje zarovnání panelu“ autostart=“automatické spuštění záznamu“ standby=“text, který se zobrází během nahrávání“ name=“jméno objektu“ – pro skripovací jazyky />

Odkazy Jiný dokument téže aplikace <a href="jméno dokumentu">slovo</a> Dokument na jiném počítači <a href="http://doménový název/jméno dokumentu">slovo</a> nebo <a href="http://IP adresa/jméno dokumentu">slovo</a> Odkaz na jinou část téže stránky <a href="jméno_dokumentu#místo_v_textu">slovo</a> Na uvedeném místě textu v dokumentu, kam je odkaz směřován, musí být "protějšek" odkazu ve tvaru : <a name="#místo_v_textu">slovo</a>

Zvuk a jeho formáty WAVE (*.wav) formát vyvinuly firmy IBM a Microsoft: Jedná se o formát používaný na zvukových CD. Jeho kvalita je velmi vysoká a také jeho pořízení je velmi náročné. Pořizuje se v nahrávacích studiích. MIDI (Musical Instrument Digital Interface)(*.mid nebo *.midi ), který slouží k výměně informací (dat) mezi elektronickým hudebním nástrojem a zvukovou kartou v počítači a umožňuje tak vytvářet a skládat hudbu na počítači. MIDI formát je velmi výhodný. Pro uložení jedné hodiny stereo záznamu použije cca 400 kB paměti, zatímco wav záznam potřebuje více než 600 MB. To je velmi výrazná úspora paměti a místa na archivačním médiu. MP3(MPEG) (*.mp3 nebo *.mpga). Tento formát je velmi rozšířený a byl původně vyvinut pro video. Dá se říct, že MP3 je zvuková část MPEG (MPG Audio). Velikost zvukového záznamu je téměř shodná s formátem MIDI, kvalita vynikající a pořízení jednoduché. Dnes je možné záznam v tomto formátu pořídit i pro laika. Program AudioGrabber toto zvládne během několika málo minut. Je to jen jeden zástupce z mnoha. Různá vydavatelství, např. Chip, PC World, aj., vydávají na svých nosičích podobné shareware programy nebo dokonce freeware. Zájemce jen program nainstaluje a už může "vyrábět" MP3.

Vložení zvuku do stránky Použití odkazu <a href="jméno_souboru">Název skladby</a> Použití elementu <bgsound> <head> <bgsound src="jméno_souboru" loop="..." balance=“…“ volume=“…“> </head> Po spuštění této stránky v prohlížeči bude zvukový záznam automaticky přehrán tolikrát, kolikrát je uvedeno v parametru loop. Při hodnotě parametru „infinite“ bude přehráván donekonečna. Parametr balance ovlivňuje stereováhu (-10000 … 10000). Parametr volume ovlivňuje hlasitost (10000 … 0). Použití elementu <img> <img dynsrc="jméno_souboru" > Parametry jsou analogické jako u videa. Podporován jen v Internet Exploreru!

Vložení zvuku do stránky Použití elementu <embed> <embed src =“skladba.wav“ loop=“počet opakování“ autostart=“automatické spuštění záznamu“ starttime=“na jakém místě záznamu začíná přehrávání (mm:ss)“ (pouze NN) endtime=“na jakém místě záznamu končí přehrávání (mm:ss)“ (pouze NN) volume=“hlasitost zvuku“ pouze v NN, IE přehrává standartně hlasitostí 50 hidden – zapříčiní schování ovládacího panelu při hodnotě „true“ </embed>

Vložení zvuku do stránky Použití elementu <object> <objectclassid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="song.wav" /> </object> atributy: <object classid=“…“ codetype="typ záznamu“ autostart=“automatické spuštění záznamu“ standby=“text, který se zobrází během nahrávání“ name=“jméno objektu“ > <param name="FileName" value="song.wav" id=“identifikátor pro skriptovací jazyky“/>

Streaming multimédií Soubory, u kterých je možné tuto technologii používat, mají příponu ASF (Advanced Streaming Format). Kromě toho ještě může být přítomen soubor s příponou ASX (Advanced Stream Redirector), který specifikuje, jak se má soubor ASF přehrávat. To nám dovoluje jednoduše sladit přehrávání záznamu s ostatními ději na stránce. Příklad souboru ASX: <asx version="3.0"> <title>Prázdniny 2005</title> <entry><ref href="prazdniny-1.avi"/></entry> <entry><ref href="prazdniny-2.avi"/></entry> <entry><ref href="prazdniny-3.avi"/></entry> </asx>

Vkládání proudových MM do stránky <html> <head> <title>Stránka s použitím proudových médií</title> <script type="text/JavaScript"> // Kód potřebný v NN if ( navigator.appName == "Netscape" ){ navigator.plugins.refresh(); document.write("\x3C" + "applet MAYSCRIPT Code=NPDS.npDSEvtObsProxy.class" ); document.writeln(" width=5 height=5 name=appObs\x3E \x3C/applet\x3E");} </script> </head> <body> <object id="mp" width=275 height=153 type="application/x-oleobject„ classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95„ standby="Nahrává se záznam..."> <param name="filename" value="streamovany_soubor.asx"> <!-- Kód potřebný v NN --> <embed type="video/x-ms-asf-plugin" name="mp" width=275 height=153 filename="streamovany_soubor.asx"> </embed> </object> </body> </html>

Speciální efekty Běžící text <marquee>TEXT</marquee Běžící obrázek <marquee> <img src=“obrazek.gif“ width="16“ height="17"> </marquee> Běžící linka <marquee><hr size="1" width="50%"></marquee> Rolující text <marquee bgcolor="#999999" behavior=alternate scrolldelay=250 width=50%> <b><font face="verdana" color="#ffffff">rolující text</font></b> </marquee> Měnící se obrázek <img src="imga.gif" onmouseover="this.src='imgb.gif';" onmouseout="this.src='imga.gif';"> Přechodové efekty <head> <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"> </head>

Synchronizovaná multimédia Skládají se z více typů multimediálních objektů, které spolupracují podle nějaké časové závislosti nebo na základě interakce s uživatelem. U jednotlivých objektů můžeme určit jejich umístění na obrazovce a čas spuštění. Synchronizovaná multimédia mají menší nároky na přenosovou kapacitu než třeba samotné video. Formáty: SMIL(Synchronized Multimedia Integration Language) FLASH

Příklad použití SMIL <smil> <head> <meta name="title" content="SMIL – demonstrace "/> <meta name="copyright" content = "(c) 1998 RealNetworks, Inc."/> <!--Oddíl „layout“ definuje velikost a umístění oblastí (regionů) pro přehrávání. --> <layout> <root-layout height="250" width="400" background- color="black"/> <region id="background" left="5" top="30" height="146" width="154" background-color="blue" z-index="1"/> <region id="pix" left="11" top="40" height="126" width="142" z-index="2"/> <region id="animation" left="164" top="0" height="207" width="236" fit="fill"/> <region id="text" left="0" top="214" height="36" width="400"/> </layout> </head> <body> <!—Oddíl body specifikuje klipový soubor a přiřazuje jej k oblasti . --> <par title="SMIL - demonstrace" copyright="(c) 1998 RealNetworks" author="by RealNetworks"> <ref src="embed.rp" region="pix" fill="freeze"/> <animation src="animate1.swf" region="animation" fill="freeze" begin="8s"/> <audio src="thanks.rm" repeat="2"/> <textstream src="embed.rt" region="text" fill="freeze"/> </par> </body> </smil>

Celé stránky ve Flash? Nedělejte všechno ve Flashi Flash je mocný nástroj, ale nehodí se na všechno. Zejména ne: dlouhé texty výtvory půjdou obtížněji aktualizovat, obtížněji tisknout a na starších počítačích vaši úchvatnou grafiku nahradí bílá plocha celé stránky ve Flash jsou větší než HTML, i přes jeho úspornou grafiku. vyhledávací služby neumějí flashové stránky indexovat odkazy na jednotlivé části prezentace. Velké soubory jsou tabu! Hlavní předností vektorové grafiky je její malá datová velikost. Využívejte toho! Velikost animace zvětšují zvuky - někdy i desetkrát! Videosoubory snad není nutné ani komentovat. Myslete na zátěž procesoru Co šetří vektorové objekty na velikosti souboru, to užírají procesoru. Ten totiž musí obdržené informace vyhodnotit a správně zobrazit. Nejnáročnější je vykreslování průhledných objektů - nejhůř, když se jich několik překrývá a navzájem se pohybují. Myslete proto na pomalejší počítače - to co vám běží plynule, může způsobit nemalé problémy jinde. Žádné kýčovitosti Fonty Flash umožňuje přibalit použitý font do animace a zobrazit ho tak na všech počítačích správně. Přesto však nedoporučuji používat víc než 2 druhy písem a i tyto volit s rozmyslem. Zejména se vyvarujte exotickým písmům. Nikdo nebude číst texty napsané písmem ala "grafiti" nebo "matrix". Nesnažte se být chytřejší, než uživatel především jde o nekontrolovatelné přehrávání zvuků a podobné "znásilňování" uživatelů.

Vložení Flash do stránky <embed src="animace.swf" play="false" loop="false" quality="high" scale="noborder" devicefont="true" bgcolor="#FFFFFF" width="550" height="400" wmode="opaque" type="application/x-shockwave-flash“ pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed>

Vložení Flash do stránky <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="550" height="400"> <param name="movie" value="animace.swf"> < param name ="play" value="false"> < param name ="loop" value ="false"> < param name ="quality" value ="high"> < param name ="scale" value ="noborder"> < param name ="devicefont" value ="true"> < param name ="bgcolor" value ="#FFFFFF"> < param name ="wmode" value ="opaque"> Zde je alternativní obsah - často varianta s EMBED kvůli kompatibilitě se staršími prohlížeči. </object>

Vlastní tvorba MM aplikace Příprava – ujasnění cílů Scénář- jako při nátáčení filmu musíme mít přesně jasno jak budou MM v prezentaci sesynchronizována Tvorba prvků- zvážit, které uděláme sami a které svěříme odborníkům Tvorba vlastní prezentace- tady uplatníte svůj vynikající výtvarný cit, který hlavně odlišuje prezentace amatérů od profesionálů Prezentace- synchronizace výkladu přednášejícího s obsahem prezentace

Na co nesmíme zapomenout „V jednoduchosti je síla“ Multimédia jsou velká a zpomalují práci Forma nenahrazuje obsah: sebelepší grafika a zvuk nezakryje to, že nezprostředkováváte zajímavé informace! Multimédia nesmí překážet: efektní klip možná upoutá při první návštěvě stránky, v budoucnu ale jen zdržuje přístup studenta k informacím!