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=150 width=300 autostart=true>

Spowoduje to wyświetlenie interfejsu RealPlayera, jeśli jest on zainstalowany w systemie użytkownika (Netscape może mieć kłopoty).

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.mp2" autostart=true>