Grafika i multimedia

Uwagi og≤lne

Grafika i inne elementy multimedialne s▒ jednymi z najbardziej charakterystycznych element≤w World Wide Web, ogromnie ubarwiaj▒c i uprzyjemniaj▒c pracΩ w sieci, ale tak┐e dostarczaj▒c sporej dawki informacji. Im strona bogatsza graficznie, tym bardziej atrakcyjna w odbiorze. ZrΩczne wykorzystywanie grafiki czy d╝wiΩku podczas tworzenia dokumentu internetowego jest umiejΩtno╢ci▒ niezmiernie przydatn▒, choµ nale┐y pamiΩtaµ, ┐e to w│a╢nie te elementy s▒ g│≤wn▒ przyczyn▒ ogromnego wzrostu ruchu w sieci i zatykania siΩ │▒cz. Konieczne jest zatem wybranie z│otego ╢rodka miΩdzy estetyk▒ i no╢no╢ci▒ informacyjn▒ grafiki z jednej, a twardymi realiami technicznymi z drugiej strony.

Autorzy regularnie odwiedzanych stron (zawieraj▒cych sta│e aktualizacje) mog▒ jednak liczyµ na fakt, ┐e dobrze skonstruowane przegl▒darki pozwalaj▒ wykorzystywaµ cache, kt≤ry gromadzi (jednorazowo) elementy graficzne i d╝wiΩkowe, pozwalaj▒c przegl▒darce siΩgaµ do zasob≤w na dysku lokalnym, a nie do sieci, co wydatnie zmniejsza ruch na │▒czach. Z tego te┐ powodu w Internecie zosta│y przyjΩte dwa podstawowe standardy graficzne - GIF i JPG - kt≤re charakteryzuj▒ siΩ znaczn▒ kompresj▒, a tym samym relatywnie niewielkimi rozmiarami plik≤w graficznych.

Zaprezentujmy zatem podstawowe metody pos│ugiwania siΩ grafik▒ w procesie budowania dokument≤w internetowych.

Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma nastΩpuj▒c▒ postaµ: <IMG SRC="plik_graficzny">

IMG jest skr≤tem od Image (obraz), natomiast SRC jest skr≤tem od Source (┐r≤d│o). Efekt zastosowania konstrukcji jest nastΩpuj▒cy:

Je╢li nie stosujemy ┐adnych dodatkowych parametr≤w, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielko╢µ orygina│u. Mo┐emy jednak u┐yµ szeregu parametr≤w, kt≤re zmieni▒ po│o┐enie, wielko╢µ i inne cechy obrazka.

Wielko╢µ obrazka mo┐emy regulowaµ za pomoc▒ parametr≤w HEIGHT (wysoko╢µ) i WIDTH (szeroko╢µ). Na przyk│ad:

<IMG SRC="tucows.gif" HEIGHT=150>

<IMG SRC="tucows.gif" WIDTH=200>

Mo┐emy r≤wnie┐ zdeformowaµ obrazek, podaj▒c arbitralne warto╢ci wysoko╢ci i szeroko╢ci obrazka:

<IMG SRC="tucows.gif" WIDTH=200 HEIGHT=50>

Przy zwiΩkszaniu wymiar≤w w stosunku do warto╢ci oryginalnych pamiΩtajmy o malej▒cej rozdzielczo╢ci obrazka na ekranie przegl▒darki.

Parametr BORDER=x pozwala wy╢wietliµ wok≤│ obrazka ramkΩ o grubo╢ci r≤wnej x pikseli:

<IMG SRC="tucows.gif" WIDTH=120 HEIGHT=160 BORDER=5>

Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalaj▒ ustaliµ odleg│o╢µ obrazka, w pikselach, od oblewaj▒cego go tekstu:

<IMG SRC="tucows.gif" HSPACE=50>

Ten tekst jest odsuniΩty od obrazka o 50 pikseli w poziomie.

A ten, o 100 pikseli

<IMG SRC="tucows.gif" VSPACE=50>

Ten obrazek jest odsuniΩty od akapitu poprzedzaj▒cego i nastΩpuj▒cego po nim o 100 pikseli w pionie

OdrΩbny, specjalny zesp≤│ parametr≤w, ALIGN=abc, steruje pozycj▒ obrazka w stosunku do oblewaj▒cego go akapitu.

Konstrukcja ma postaµ <IMG SRC="obrazek" ALIGN=abc>

ALIGN=left abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=right abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=top abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=bottom abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=middle abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

Przypomnijmy sobie r≤wnie┐ uwagi na temat roli parametru CLEAR, kt≤ry pozwala regulowaµ wzajemne po│o┐enie obrazka i tekstu (polecenie <BR> w Blokach).

Je╢li chcemy, aby osoby korzystaj▒ce z Internetu w trybie tekstowym wiedzia│y, co zawiera obrazek, mo┐emy wstawiµ dodatkowo parametr ALT="informacja". Napis ten zostanie wy╢wietlony na ekranie przegl▒darki tekstowej. Informacja jest wa┐na w≤wczas, gdy grafika zawiera odsy│acze do innych stron.

Gdyby╢my chcieli umie╢ciµ obrazek na ╢rodku wiersza, musimy obj▒µ go znacznikami <CENTER></CENTER>

Obrazek mo┐na oczywi╢cie umie╢ciµ w kom≤rce tabeli, wstawiaj▒c miΩdzy znacznikami kom≤rki <TD></TD> definicjΩ obrazka, co mo┐na wykorzystaµ do tworzenia efektownie wygl▒daj▒cych obramowa±, na przyk│ad:

Zagnie┐d┐anie grafiki

Mo┐liwe jest zagnie┐d┐enie grafiki w dokumencie HTML (podobnie jak w przypadku obiektu OLE). S│u┐y do tego polecenie:

<EMBED SRC=grafika>

Wstawiony w ten spos≤b obrazek mo┐e nie byµ bezpo╢rednio widoczny w przegl▒darce, gdzie pojawiµ siΩ mo┐e jego szkieletowa reprezentacja, w postaci ikony zawieraj▒cej podpis z nazw▒ pliku. Na przyk│ad:

Dwukrotne klikniΩcie na zagnie┐d┐onym obiekcie uruchomi skojarzony z danym typem pliku program. Na przyk│ad, je╢li macierzyst▒ aplikacj▒ dla pliku BMP jest program Paintbrush (Paint), zostanie on uruchomiony z wczytanym automatycznie plikiem. Gdy w systemie jest zainstalowana wtyczka QuickView Plus (i zintegrowana z przegl▒dark▒), obiekt jest bezpo╢rednio widoczny w przegl▒darce.

Zagnie┐d┐ony obiekt mo┐na obj▒µ ramk▒, za pomoc▒ parametru BORDER=x, a tak┐e ustawiaµ w stosunku do akapitu za pomoc▒ ALIGN. Parametry WIDTH i HEIGHT pozwalaj▒ zdefiniowaµ wymiary ikony.

Animacja Marquee

Uwaga: animacja Marquee jest interpretowana jedynie przez Microsoft Internet Explorer i nie wchodzi w zakres standardu HTML 4.0.

Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions, jest animacja Marquee. Jest to "p│ywaj▒cy" w poprzek ekranu napis.

Animacji mo┐na przypisaµ wiele parametr≤w, kt≤re bardzo urozmaicaj▒ zachowanie napisu.

Minimalna definicja Marquee ma postaµ <MARQUEE>Tekst animacji</MARQUEE>. Na przyk│ad:

Tekst sobie p│ywa

Dodatkowe parametry s▒ wstawiane w ramach otwieraj▒cego znacznika, tj. <MARQUEE parametr>

AnimacjΩ mo┐na wstawiaµ tak┐e do kom≤rki tabeli, miΩdzy znaczniki <TD> </TD>:

Tekst mo┐e siΩ poruszaµ na trzy sposoby:

BEHAVIOR=SCROLL powoduje, ┐e tekst porusza siΩ od jednego brzegu strony w kierunku drugiego, znika za nim i wyp│ywa ponownie zza pierwszego brzegu.

behavior=scroll

BEHAVIOR=SLIDE powoduje, ┐e tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje siΩ.

behavior=slide

BEHAVIOR=ALTERNATE powoduje, ┐e tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija siΩ", powracaj▒c w kierunku pierwszego.

behavior=alternate

BGCOLOR=kolor pozwala okre╢liµ kolor t│a, czyli drogi, po kt≤rej porusza siΩ napis. Kolor mo┐na podaµ w postaci numerycznej lub s│ownej (16 barw). Opis s│owny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.

Kolor Red

Kolor Yellow

Kolor Fuchsia

Pocz▒tkowy kierunek ruchu jest okre╢lany za pomoc▒ parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domy╢lny jest kierunek w lewo.

Ruch w lewo

Ruch w prawo

Fizyczne wymiary drogi s▒ wyznaczone przez parametry HEIGHT=x (wysoko╢µ) i WIDTH=y (szeroko╢µ). Mo┐na je wyraziµ w pikselach lub procencie wysoko╢ci i szeroko╢ci ekranu.

Wysoko╢µ 50 pikseli

Szeroko╢µ 50 procent

Parametr LOOP=x pozwoli powt≤rzyµ ruch tekstu x razy.

Ten napis przesunie siΩ 20 razy i zatrzyma siΩ

Parametry HSPACE=x i VSPACE=y pozwalaj▒ okre╢liµ odleg│o╢µ pola animacji w poziomie i/lub w pionie od s▒siaduj▒cych element≤w, np. tekstu.

Tekst przed animacj▒Ta animacja jest oddalona o 100 pikseli od s▒siaduj▒cego tekstuTekst za animacj▒

Tekst nad animacj▒
Ta animacja jest oddalona o 30 pikseli od s▒siaduj▒cych akapit≤w
Tekst pod animacj▒

Uwaga: akapity nad i pod animacj▒ nale┐y oddzieliµ od animacji znakiem ko±ca akapitu <P> lub ko±ca wiersza <BR>.

Skoro mo┐emy definiowaµ kolor t│a animacji, konieczna jest tak┐e niekiedy zmiana koloru tekstu animacji, aby uzyskaµ nale┐ny kontrast. Mo┐emy r≤wnie┐ wprowadziµ atrybuty tekstu - pogrubienie, pochylenie lub podkre╢lenie. Odpowiednie parametry nale┐y wstawiaµ na zewn▒trz definicji MARQUEE.

Jak wiemy, definicja koloru fragmentu tekstu ma postaµ <FONT COLOR=kolor> Tekst </FONT>.

Kilka przyk│ad≤w:

Bia│y tekst na czerwonym tle

Zauwa┐my, ┐e w polu animacji mo┐na wstawiµ wiΩcej spacji, w przeciwie±stwie do zwyk│ego tekstu.

Czerwony tekst na ┐≤│tym tle

Bia│y, pogrubiony tekst na zielonym tle

Bia│y, pochylony tekst na zielonym tle

Bia│y, podkre╢lony tekst na zielonym tle

Uwaga: z nieznanych powod≤w nie jest mo┐liwe zdefiniowanie bia│ego tekstu na czarnym tle!

Pola animacji mo┐na bezpo╢rednio ze sob▒ │▒czyµ. W poni┐szym przyk│adzie ka┐de pole zajmuje 50% szeroko╢ci ekranu, a definicje zosta│y podane jedna po drugiej.

Parametr SCROLLAMOUNT=x pozwala okre╢liµ w pikselach skoki tekstu (ruch odbywa siΩ skokami po x pikseli). Przy niewielkiej warto╢ci ruch jest p│ynny i wolniejszy, przy du┐ych - nieco szarpany i szybszy.

Scrollamount=5

Scrollamount=30

Scrollamount=50

Parametr SCROLLDELAY=y pozwala okre╢liµ w milisekundach odstΩpy czasowe miΩdzy kolejnymi skokami. 1000 = 1 sekunda.

Scrolldelay=500 - skok co 0,5 sekundy

Scrolldelay=2000 - skok co 2 sekundy o 50 pikseli

Parametr ALIGN=abc (top, middle, bottom) pozwala ustaliµ, gdzie (na jakiej wysoko╢ci pola) znajduje siΩ tekst s▒siaduj▒cy z animacj▒:

Tekst u g≤ry pola Animacja

Tekst w po│owie pola Animacja

Tekst u do│u pola Animacja

D╝wiΩk, wideo, VRML

Mo┐liwe jest tworzenie odsy│aczy do plik≤w d╝wiΩkowych, aczkolwiek nie wchodz▒ one w zakres HTML 4.0. Zazwyczaj stosuje siΩ dwa typy odsy│aczy - styl Netscape i styl Microsoftu. Przyk│ady:

Plik d╝wiΩkowy WAV (styl Netscape) - <embed src="../wav/complete.wav" border=0 width=x height=y>

Plik d╝wiΩkowy WAV (styl Microsoft) <bgsound src="../wav/complete.wav" loop=infinite>

Plik d╝wiΩkowy MIDI (styl Netscape) - <embed src="../midi/airwolf.mid" border=0>

Przyk│ad d╝wiΩku zagnie┐d┐onego:

loop=x okre╢la liczbΩ powt≤rze± d╝wiΩku
width=x height=y okre╢la rozmiary wy╢wietlanego obrazka wtyczki (np. dla Crescendo jest to 200x55)
hidden=true|false nakazuje schowaµ|wy╢wietliµ obrazek wtyczki
palette=foreground|background pozwala unikn▒µ ewentualnego migotania palety kolor≤w, gdy przegl▒darka pracuje w trybie 256 kolor≤w
pluginspace="url" wskazuje miejsce, gdzie znajduje siΩ wtyczka, je╢li u┐ytkownik jej jeszcze nie zainstalowa│. Adres ten powinien byµ zgodny ze wskazaniami producenta wtyczki.

U┐ycie hidden=true pozwala symulowaµ d╝wiΩk w tle (podobnie jak w przypadku BGSOUND dla IE). Zaleca siΩ wtedy umieszczenie polecenia EMBED na samym ko±cu dokumentu, gdy┐ wtedy wcze╢niej wczyta siΩ tekstowa zawarto╢µ strony.

Plik d╝wiΩkowy MIDI (styl Microsoft) - <bgsound src="../midi/antartic.mid" loop=1>

Przyk│ad d╝wiΩku w tle (IE):

loop=x oznacza liczbΩ powt≤rze±. Loop=infinite nakazuje powtarzaµ d╝wiΩk bez ko±ca.
balance=x (x=-10000;10000) okre╢la r≤wnowagΩ miΩdzy g│o╢nikami w przypadku d╝wiΩku stereofonicznego
volume=x (x=-10000;0) wyznacza g│o╢no╢µ. Warto╢µ tΩ nale┐y samodzielnie wypraktykowaµ.

Jedynie Internet Explorer obs│uguje konstrukcjΩ BGSOUND. Navigator ignoruje j▒ i "milczy". Z kolei polecenie EMBED jest obs│ugiwane przez obie przegl▒darki - Navigator obs│uguje zagnie┐d┐ony w ten spos≤b plik d╝wiΩkowy przez wtyczkΩ (standardowo jest to LiveAudio), natomiast Internet Explorer korzysta z instalowanego razem z przegl▒dark▒ ActiveMovie. Obie przegl▒darki mog▒ tak┐e korzystaµ z innych wtyczek - szczeg≤lnie popularny jest program Cresendo (http://www.liveupdate.com), ale istniej▒ te┐ inne wtyczki, np. WebTracks, firmy WildCat Software (http://www.wildcat.com). WebTracks obs│uguje pliki MIDI, ale w pierwszym rzΩdzie sw≤j w│asny format WTX.

Szczeg≤lnie interesuj▒c▒ nowo╢ci▒ jest wtyczka Beatnik, firmy Headspace, kt≤ra obs│uguje format RMF, czyli Rich Music Format (proszΩ zauwa┐yµ podobie±stwo do RTF - Rich Text Format). Jest to zaawansowana technika, pozwalaj▒ca uzyskaµ bardzo bogate brzemienie, przy niewielkiej objΩto╢ci pliku.

Przyk│adowe polecenie zagnie┐d┐aj▒ce plik RMF mo┐e wygl▒daµ nastΩpuj▒co:

<EMBED SRC="affectio.rmf" TYPE="audio/rmf" WIDTH=144 HEIGHT=60 DISPLAY=SONG MODE=SCOPE AUTOSTART=TRUE LOOP=FALSE VOLUME=100>

A oto przyk│ad (je╢li dysponujesz wtyczk▒ Beatnik)

Beatnik jest dostΩpny w postaci wtyczki dla Navigatora lub ActiveX dla Inernet Explorera. najlepiej jest skopiowaµ z witryny Headspace program instalacyjny, kt≤ry zawiera obie wtyczki jednocze╢nie.

Przegl▒darka Mosaic akceptuje polecenie <SOUND SRC="filename.wav">

Plik wideo AVI (styl Netscape) - <embed src="../DRAGDROP.AVI" border=0>

Przyk│ad

Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../DRAGDROP.AVI" loop=infinite start=FILEOPEN>

dynsrc=url podaje adres pliku AVI
loop=x okre╢la liczbΩ powt≤rze±, loop=infinite oznacza powtarzanie bez ko±ca
loopdelay=n okre╢la w milisekundach op≤╝nienie miΩdzy kolejnymi powt≤rzeniami
start=fileopen|mouseover wskazuje, czy plik AVI jest odtwarzany po wczytaniu strony czy po przesuniΩciu kursora nad ikonΩ odtwarzacza
controls wy╢wietla panel kontrolny odtwarzacza AVI

Przyk│ad

Uwaga: styl Microsoftu nie jest zalecany.

Plik VRML (styl Netscape)

<EMBED SRC="vrlm.wrl" WIDTH="200" HEIGHT="150">

Przyk│ad (za "HTML Reference Library")

Pliki VRML jest obs│ugiwany przez wtyczki, np. Live3D lub CosmoPlayer dla Netscape'a albo ActiveVRML dla Internet Explorera.

Plik RealAudio

Na stronie mo┐emy te┐ umie╢ciµ plik RealAudio. Pliki takie mo┐na sporz▒dziµ za pomoc▒ popularnego programu do obr≤bki d╝wiΩku, CoolEdit, albo za pomoc▒ oryginalnego RealAudio Encoder, dostΩpnego za darmo na stronie Real Networks. Program przetwarza na format RA pliki zapisane w formacie WAV.

Wystarczy umie╢ciµ na stronie bezpo╢redni odsy│acz do pliku RA, np. <a href=plik.ra>kliknij tutaj</a>

Przyk│ad

Innym, wygodnym sposobem umieszczenia pliku RA na stronie jest u┐ycie polecenia EMBED, np.:

<embed src="plik.ra" height=134 width=300 autostart=true type=audio/x-pn-realaudio-plugin>

Spowoduje to wy╢wietlenie interfejsu RealPlayera, je╢li jest on zainstalowany w systemie u┐ytkownika.

Przyk│ad

Plik EchoSpeech

Jeszcze jednym formatem d╝wiΩkowym na stronach WWW jest format ES firmy Echo Software. Jest to wysoce skompresowany format d╝wiΩku, kt≤ry mo┐na wykorzystaµ zar≤wno dla mowy, jak i muzyki. Darmowy dla os≤b indywidualnych Encoder pozwala przekszta│ciµ pliki WAV (koniecznie 16-bitowe, mono, 11 KHz) w pliki ES. Darmowy odtwarzacz (achiwum liczy zaledwie 100 KB w wersji 32-bitowej) wsp≤│pracuje z 16- i 32-bitowymi przegl▒darkami.

Wstawienie pliku ES na stronΩ jest bardzo proste:

<embed src=plik.es width=120 height=40>

Wymiary s▒ potrzebne, aby wy╢wietliµ ikonΩ odtwarzacza na stronie. KlikniΩcie lewym przyciskiem myszki na ikonie powoduje wy╢wietlenie interfejsu EchoCast Playera, gdzie mo┐emy zatrzymaµ, chwilowo wstrzymaµ i wznowiµ odtwarzanie, a tak┐e zmieniµ g│o╢no╢µ za pomoc▒ suwaka.

Przyk│ad

Plik MPEG

Pliki MPEG mo┐emy umieszczaµ na stronie w postaci zwyk│ego odsy│acza, albo zagnie┐d┐aµ je za pomoc▒ polecenia EMBED, np.

<embed src="plik.mp3" autostart=true>

Plik MOV (QuickTime)

<embed src="charriot.mov" border=0 width=200 height=17>