Mgr. Ludmila Urbášková CDV UP Olomouc 2006
Jak dostaneme MM ke studentům? Standardy HTTP, HTML (XHTML), CSS WYSIWYG editor nebo jiný editor (X)HTML Grafický editor Content Management System (CMS) případně Learn Management System (LMS)
HTTP protokol HyperText Transport Protocol (HTTP) definuje pravidla síťové komunikace mezi klientem a serverem. Je postaven na modelu dotazů a odpovědí (request, response) klient pošle serveru dotaz a ten na něj odpoví, čímž je HTTP transakce ukončena (bezestavová transakce) HyperText Transport Protocol Secure (HTTPS)
HTML (XHTML) HTML (HyperText Markup Language) je jazyk, pomocí kterého se zapisují WWW stránky. Vývoj tohoto jazyka byl zastaven a bude se odehrávat pouze na půdě jeho moderního nástupce XHTML (eXtensible Hypertext Markup Language). XHTML se od HTML příliš neliší. Používá se pro něj zkratka (X)HTML. Specifikace HTML 4.01 [ HTML 4.01 [ Specifikace XHTML 1.0 [ XHTML 1.0 [
XHTML versus HTML Mezi těmito dvěma jazyky existují následující nejvýznamnější rozdíly: XHTML požaduje v názvech značek, atributů i standardních hodnot malá písmena. U HTML na velikosti písmen nezáleží. V XHTML musí být všechny značky uzavřeny. Nepárové značky se zapisují ve tvaru (u HTML stačí jen ). V XHTML všechny atributy musí mít hodnotu. U „pravdivost- ních“ atributů se jako hodnota přiřazuje jméno atributu. Na- příklad u vypínačů v HTML stačí pro vyznačení zapnuté polohy uvést atribut checked, zatímco v XHTML musí být uveden ve tvaru checked=´checked´. V XHTML musít být hodnota atributu vždy uzavřena do uvozovek nebo apostrofů.
HTML (XHTML) Příklad pro HTML 4.01: Titulek Tělo dokumentu Příklad pro XHTML 1.0: <html xmlns=" 1999/xhtml" xml:lang="cs„ lang= "cs"> Titulek Tělo dokumentu
Umístění MM komponent element element element element Pak nasledují elementy, které mohou mít své další atributy. Mohou existovat elementy se jménem: src autostart controls a další Nakonec následuje vlastní verze objektu (obrázek, text, zvuk) - umožňuje vnořování
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.
Kaskádové styly CSS Cascading Style Sheets (CSS) slouží k předepsání výsledného vzhledu stránky. Popisuje, jak má vypadat která (X)HTML konstrukce (např. že nadpis stránky má být zobrazen tučným písmem Arial o velikosti 18 bodů v barvě červené). Používání CSS se prosazovalo poměrně pomalu, ale v současnosti zažíváme jeho výrazný nástup. Problémem při nasazení je jednak jeho jistá složitost (autoři stránek se musí učit další jazyk), jednak špatná implementace ve webových klientech (browserech). První problém lze obejít například tak, že všechny stránky serveru používají společnou definici CSS, kterou připravil odborník (např. na zakázku).
V čem můžeme kód (X)HTML psát? WYSIWYG editor Strukturní editor (X)HTML V textovém editoru a následně převést do (X)HTML Validátor W3C [
WYSIWYG editor What You See Is What You Get Zkratka What You See Is What You Get znamená, že stránka psaná v takovémto typu editoru se zobrazuje už při psaní tak, jak bude (přesněji měla by) vypadat později v prohlížeči. (X)HTML kód je tak před uživatelem ukryt a není tedy potřeba jeho detailní znalost. Editory skrývající se pod takto odpudivé pojmenování jsou ve skutečnosti pro začínající autory WWW stránek velice jednoduché. Alternativou ke zkratce WYSIWYG je „What You See Is What You Might Get“. Pokud je nějaká naděje, že by se mohla práce blížit ke konci, bude zkratka vysvětlována takto: „What You See Is What You Never Get“. „What You See Is What You Never Get“. Ondřej Neumajer,Praha 2004
Nabídka freeware editorů Nabídka editorů je velmi široká. Vybírám jen některé osvědčené zástupce.FCKeditor: vynikající WYSIWYG editor, který funguje v IE ale i v Mozille, Firefoxu a Netscapu (tzv. Gecko browsery), a to včetně přiložených JavaScriptů. lze jej zařadit do vlastní stránky (použitím konfiguračních souborů) má plnou podporu češtiny dokáže tvořit i XHTML kód obsahuje třídu pro použití ASP, Perl, PHP, Java, JSP, …
Začlenění do vlastní stránky <!-- var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.BasePath = '/fckeditor/' ; oFCKeditor.Value = 'Toto je ukázka textu při použití FCKeditoru.' ; oFCKeditor.Create() ; //-->
Nabídka freeware editorů NVU Původně pro Linux, dnes i pro Win a Mac WYSIWYG editor nemá českou lokalizaci Na internetu najdete další spoustu editorů, například na adrese naleznete odkazy na mnoho wysiwyg editorů, i když nejsou všechny zdarma a také nepodporují všechny browsery nebo operační systémy.
CMS nebo LMS systém Nalézt jednoduchou definici CMS nebo LMS systému se zdá být výrazně těžší, nežli najít někoho, kdo vám jej bude chtít prodat. 1.Jednou z výhod těchto systémů je fakt, že umožňují spolupráci více lidí. Práce lze tedy díky tomu rozdělit. Každý uživatel má přesně definovaná práva a může vykonávat pouze ty operace, které mu byly svěřeny. 2.Další výhodou tohoho systému je tzv. modularita. Každá stránka webu se skládá z několika bloků, které jsou výstupem jednotlivých modulů. Každý modul má na starosti konkrétní úkol.
Grafické formáty RastrovéRastrové – GIF, JPEG, PNG VektorovéVektorové – SVG Jaké výhody obecně přináší vektorová grafika oproti rastrové: 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
Jednoduchý obrázek 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 …… 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 Nezapomínejte na popis u parametru alt, pokud můžete rozumně předpokládat účast handicapovaných studentů!
Klikací mapy navigace.gif – plan.html, tisk.html, help.html, uvod.html
Animované obrázky Animace nejsou ničím jiným než sled rastrových (ale stále častěji i vektorových) obrázků.
Tipy pro použití obrázků Snažte se, aby byli co nejmenší Snažte se, aby byli co nejmenší Optimální velikost je 10K Optimální velikost je 10K o Používejte JPEG pro fotky a GIF pro obrázky s malými barevnými přechody o Zastřihněte fotky jen tak, aby tam byla důležitá část o U GIFů používejte nejmenší možnou barevnou hloubku o U JPEGů používejte největší kompresi, která ještě udrží dostačující kvalitu obrázku Upravujte velikost obrázků v grafickém editoru, ne změnou parametrů width a height v browseru Upravujte velikost obrázků v grafickém editoru, ne změnou parametrů width a height v browseru Vždycky používejte popisek v parametru alt Vždycky používejte popisek v parametru alt
Co najdeme na internetu… Grafické editory: XnView XnView: GIMP: Konvertor s podporou velkého Open source bitmapový množství formátů s efektovými grafický editor dostupný a editačními funkcemi (freeware) pro většinu operačních systémů (freeware).
Co najdeme na internetu… Grafické editory: Wondershare Photo Collage Studio: Wondershare Photo Collage Studio: editor na skládání grafických koláží z jednotlivých obrázků a fotografií (shareware, 30USD). more.html
Co najdeme na internetu… Grafické editory: Paint Buster: Paint Buster: Editor s podporou více než 200 grafických formátů, nabízí i optimalizaci JPG, GIF a PNG obrázků pro web.
Co najdeme na internetu… Grafické editory: Inkscape: Vynikající open source vektrorový editor, který je vybaven i pro práci s textem. Umí rovněž importovat několik bitmapových formátů.
Co najdeme na internetu… Freeware programy pro 3D modelování a animaci: Blender: Blender: freeware verze o velikosti asi jen 2MB obsahuje jednoduché nástroje pro 3D animaci a modelování, tutoriály k němu naleznete na adrese POV-Ray: POV-Ray: k dispozici je i zdrojový kód aplikace, velikost downloadu je asi 5,2MB Strata 3D: Strata 3D: je dostupný pro Win 98 a Mac, instalace má 24MB
Video 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 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: 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 Název videa Název videa Použitím 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 - např. pro QuickTime formát Použitím <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 slovo Dokument na jiném počítači slovo nebo slovo Odkaz na jinou část téže stránky slovo Na uvedeném místě textu v dokumentu, kam je odkaz směřován, musí být "protějšek" odkazu ve tvaru : slovo Murphyho počítačová definice: Čím naléhavěji potřebujete určitou internetovou stránku, tím pravděpodobněji už na serveru není.
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. 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é.
Vložení zvuku Použití odkazu Název skladby Použití elementu <bgsound src="jméno_souboru" loop="..." balance=“…“ volume=“…“> 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). Parametr volume ovlivňuje hlasitost (10000 … 0). Použití elementu Parametry jsou analogické jako u videa. Podporován jen v Internet Exploreru!
Vložení zvuku Použití elementu <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“
Vložení zvuku Použití elementu atributy:
Streaming multimédií aneb zvuk a video on-demand či v reálném čase Zjednodušeně řečeno funguje tak, že se proud dat načítá po fragmentech – na disku uživatele se tak nachází pouze nejbližší část vysílání. V průběhu jejího přehrávání se načítají data dalšího nejbližšího úseku. Pro přenos videa se nejčastěji používají dva protokoly: RTSP (Real Time Streaming Protocol)RTSP (Real Time Streaming Protocol) firmy RealNetwork, odkazy na tuto službu začínají rtsp://…. MMS (Microsoft Media Server)MMS (Microsoft Media Server) firmy Microsoft a zahrnuje varianty MMSU (pro UDP) a MMST(pro TCP), odkazy na tuto službu pak začínají mms://... Sdílené video Sdílené video v sítích P2P ….. Je nutné nainstalovat klienta, např. Coolstreaming, Sopcast, PPLive
Streaming multimédií aneb zvuk a video on-demand či v reálném čase Technické zázemí: Encodér – Encodér Jeho úkolem je komprimovat signál do podoby vhodné pro další přenos po síti (distribuční server) – (distribuční server) Přebírá data od encodéru (vysílání v reálném čase) nebo je načítá z úložiště (vysílání on-demand) a distribuuje je ke klientům, proto distribuční server. Klient – Klient Provádí dekomprimaci a posílá na výstup (např. obrazovka počítače) Formáty umožňující tuto technologii používat. –RealNetwork RealSystem (*.rm, *.ram) –WindowsMedia (*.asf, *.asx, *.wma, *.wmv) –AppleQuickTime –MPEG-4 Soubory jako *.ram nebo *.asx fungují jako pointry (ukazatele) na MM soubory. Příklad souboru ASX: Prázdniny 2005
Vkládání streamovaných MM Stránka s použitím proudových médií // 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");} <object id="mp" width=275 height=153 type="application/x-oleobject„ classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95„ standby="Nahrává se záznam...">
Speciální efekty Běžící text TEXT</marquee Běžící obrázek Běžící linka Rolující text rolující text Měnící se obrázek Přechodové efekty
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
Celé stránky ve Flash? Nedělejte všechno ve Flashi 1. dlouhé texty 2. 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 3.celé stránky ve Flash jsou větší než HTML, i přes jeho úspornou grafiku. 4.vyhledávací služby neumějí flashové stránky indexovat 5.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! Videa 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í Falsh do stránky
Vložení Falsh do stránky <object classid="clsid:D27CDB6E-AE6D-11cf-96B " codebase=" wflash.cab#version=6,0,0,0" width="550" height="400"> Zde je alternativní obsah - často varianta s EMBED kvůli kompatibilitě se staršími prohlížeči.
Nakonec to nejdůležitější - TEXT Rada od Steva Kruga : Zbavte se poloviny slov na každé stránce. A potom se zbavte poloviny z toho, co zbylo. Efektivita barev a barevných kontrastů Kompozice Typografická pravidla pro web
Používání a kombinování písem ( bezpatkové, patkové ) Vyznačování v textu ( Podtržení p r o s t r k á n í ) Vázání odstavců, sirotci a vdovy Předložky a spojky na koncích řádek, tvrdá mezera Dělení slov (kni-hovna) Umístění titulků a obrázků na stránce, členění dokumentu
Zásada 1: Pokud zarovnáváme několik řádků pod sebou na střed, musí být spodní řádek nejkratší. Zásada 2: Pokud strana obsahuje jeden dominantní prvek (název dokumentu atd.), měl by být umístěn v optickém středu, který je kousek nad středem geometrickým. Zásada 3: Nejdůležitější nadpisy nebo obrázky by měly být v textu umístěny na tzv. zlatém řezu. Zásada 4: Pokud je v textu více obrázků, měly by jejich okraje být v lince. Pokud je na obrázku pohybující se předmět nebo někam hledící člověk, měl by pohyb (pohled) vždy směřovat dovnitř knihy. Zásada 5: Popisky obrázků se dávají do textových polí pod obrázky, píší se menším písmem než je základní text (někdy i kurzívou) a nepíše se za nimi tečka. Popisky k zajímavým obrázkům si přečte skoro každý – mělo by v nich být uvedeno nejen, co je na obrázku, ale i stručně řečené důležité sdělení tiskoviny. Zásada 6: Dlouhé „šedé“ texty v dnešní uspěchané době lidé často vůbec nečtou. Text by měl být výrazně členěn nadpisy, měl by mít jasnou strukturu.
Efektivita barev a kontrastu Používejte kombinace vysokého kontrastu mezi textem a pozadím Používejte tmavší text na světlejším pozadí, NE jasná barva na sytém NE světlý text na světlém
Efektivita barev a kontrastu Použití textu a pozadí ze sousedních barev kruhu není dobře viditelné
Efektivita druhu a velikosti fontu
Efektivita mezer mezi písmeny a řádky
Kompozice – text v ploše Vzdálenost horního a dolního kraje nesmí být menší než mezery mezi slovy Řádkový proklad nesmí být větší než vzdálenost textu od okraje
Kompozice – optický střed a zlatý řez Obrázek 1 Obrázek 2 Obrázek 3
Kompozice na střed a zlatý řez
Vlastní tvorba MM aplikace PřípravaPříprava – ujasnění cílů ScénářScénář- jako při natáčení filmu musíme mít přesně jasno jak budou MM v prezentaci sesynchronizována Tvorba prvků-Tvorba prvků- zvážit, které uděláme sami a které svěříme odborníkům Tvorba vlastní prezentace-Tvorba vlastní prezentace- tady uplatníte svůj vynikající výtvarný cit, který hlavně odlišuje prezentace amatérů od profesionálů PrezentacePrezentace- 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!
Děkuji za pozornost a přeji hodně úspěchů ve vlastní práci!