269

9

              Pliki zewnętrzne, multimedia i animacja

Rozdział 13.

Multimedia: dodawanie dźwięków, obrazów wideo i innych elementów multimedialnych

Poznanie sposobów integracji multimediów ze stronami WWW jest tak proste, jak tworzenie połączeń z plikami dźwiękowymi oraz wideo. A zatem, do dzieła! Dodałeś do swojej witryny pliki multimedialne. Oczywiście to nie wszystko. Oprócz dołączania plików multimedialnych do witryny, można je także umieszczać bezpośrednio na stronach WWW. Niestety umieszczanie multimediów na stronach WWW jest nieco trudniejsze. Choć wymaga to poznania jedynie kilku znaczników HTML, to jednak może się wydawać, iż cierpią one na coś, co można by porównać ze schizofrenią. Znaczniki te działają bowiem inaczej w Internet Explorerze, inaczej w Netscape Navigatorze lub w ogóle nie działają w jednej z tych przeglądarek, stanowią także część standardu języka HTML, którą nikt nie wydaje się przejmować. Co więcej, aktualnie dostępnych jest kilka konkurujących ze sobą formatów zapisu dźwięku i obrazu. Poznanie wszystkich tajników każdego z tych formatów, nim pojawi się jakiś nowy format stwarzający nadzieję, iż będzie „tym jedynym i najlepszym”, jest niemal zupełnie niemożliwe.

Nawet pomimo postępu, jaki się ostatnio dokonał w dziedzinie szybkości komunikacji (aktualnie średnia prędkość modemu wynosi 56 Kbps), rozwoju technologii kompresji i dekompresji dźwięku i obrazu (takich jak format dźwiękowy MP3) oraz pojawieniu się kart dźwiękowych i graficznych o niezwykle wysokich możliwościach, wciąż jednak WWW nie jest takim medium, o jakim zwolennicy multimediów mogliby marzyć. A przynajmniej — jeszcze nie.

Częścią rozwiązania tego problemu jest rozbieżność pomiędzy znanymi możliwościami aktualnie wykorzystywanych komputerów oraz możliwościami jakie, według nas, powinna mieć WWW. Wystarczy włożyć do napędu dysk CD lub DVD i po chwili, oszałamiający wybuch trójwymiarowej grafiki, stereofonicznego, otaczającego dźwięku oraz obrazu o wymiarach całego ekranu, odtwarzanego z szybkością 30 klatek na sekundę, atakuje nasze zmysły, aż do czasu, gdy pogrążymy się w całkowitym multimedialnych przesycie. Porównaj to z większością multimediów dostępnych na WWW, a może się okazać, że będziesz gorzko rozczarowany. Dźwięk o niskiej jakości, małe wymiary obrazów wideo, długie czasy pobierania plików są czymś całkowicie normalnym.

Jednak sytuacja się powoli poprawia. Byliśmy świadkami pojawienia się plików dźwiękowych zapisywanych w formacie MP3 oraz animacji Macromedia Flash, a teraz obserwujemy ich rosnącą popularność. Oba te rozwiązania zapewniają dostęp do multimediów o wysokiej jakości i wymagających transmisji o niewielkiej przepustowości. Jest jednak cena, jaką trzeba zapłacić za ten postęp. Otóż, jako użytkownicy WWW jesteśmy zalewani przez różne formaty zapisu dźwięku i obrazu, z których każdy wymaga zastosowania innego dodatku lub aplikacji pomocniczej. Jako autorzy stron WWW musimy natomiast wydawać czasami znaczne sumy pieniędzy na zakup sprzętu i oprogramowania, które pozwoli nam na tworzenie własnych plików multimedialnych.

Teraz, gdy napisałam te wszystkie informacje, postaram się zachować w tym rozdziale równowagę pomiędzy przedstawieniem technologii, które możesz wykorzystać bezzwłocznie oraz takich, których zastosowanie będzie wymagało poświęcenia znacznych ilości czasu i energii. W tym rozdziale nauczysz się:

·         tworzyć połączenia do plików dźwiękowych oraz obrazów wideo, które użytkownicy będą mogli pobrać i odtworzyć,

·         wykorzystywać znaczniki <EMBED> oraz <OBJECT>, umożliwiające umieszczanie dźwięków i obrazów na stronach WWW,

·         umieszczać na stronach WWW pliki QuickTime, Shockwave, Flash, RealAudio oraz RealVideo,

·         wykorzystywać niektóre spośród unikalnych, multimedialnych możliwości przeglądarki Microsoft Internet Explorer,

·         rozpoznawać najpopularniejsze typy plików multimedialnych i dowiesz się, jakie dodatki oraz aplikacje pomocnicze są konieczne do ich odtwarzania.

Przedstawienie sposobów prezentacji dźwięków oraz obrazów wideo

Pomimo wszelkich zawiłości związanych ze stosowaniem plików multimedialnych oraz ogromnej ilości dostępnych formatów, cały problem sprowadza się do wyboru metody integracji tych plików ze stronami WWW. Możesz zastosować metodę polegającą na tworzeniu połączeń pomiędzy stronami WWW i plikami multimedialnymi lub bezpośrednio umieścić je na stronach. Tworzenie połączeń jest stosunkowo bezpiecznym rozwiązaniem, natomiast osadzanie ich w stronach jest raczej problematyczne.

Dołączony plik dźwiękowy oraz wideo, niezależnie od jego typu, wymaga utworzenia na stronie połączenia wskazującego na plik źródłowy. Gdy użytkownik kliknie taki dołączony plik, może zajść jedno z trzech zdarzeń. Po pierwsze, możesz pobrać plik i zapisać go na dysku własnego komputera. Ta metoda pozwala odtwarzać pobrany plik w późniejszym czasie i przy wykorzystaniu dowolnie wybranej aplikacji. Po drugie, przeglądarka może pobrać plik, a następnie automatycznie uruchomić aplikację pomocniczą lub dodatek konieczny do odtworzenia pliku. Może się to zdarzyć, jeśli przeglądarka rozpozna typ pobieranego pliku, a odpowiedni program lub dodatek został skonfigurowany w taki sposób, iż może odtworzyć plik. I w końcu ostatnia możliwość, jeśli plik zostanie rozpoznany jako dźwięk lub obraz przekazywany strumieniowo, odpowiedni program zostanie uruchomiony jako niezależny proces i rozpocznie odtwarzanie pliku podczas jego pobierania.

Osadzone dźwięki lub obrazy wideo są integrowane z samą przeglądarką WWW i odtwarzane przez dodatki lub aplikacje pomocnicze. Osadzone pliki multimedialne dają użytkownikom mniej możliwości, gdyż są integrowane z samą przeglądarką. Zazwyczaj interfejs aplikacji pomocniczej lub dodatku odtwarzającego plik jest wyświetlany w oknie przeglądarki.

Jednak nie chcę wprowadzać dodatkowego zamieszania, a zatem podwiń rękawy i dodaj do swoich stron dźwięki i obrazy wideo.

Stare, lecz użyteczne rozwiązanie — dołączanie

Bezpiecznym sposobem dodawania plików multimedialnych do stron WWW jest umieszczanie na stronach połączeń to tych plików. Połączenia działają bowiem we wszystkich przeglądarkach. Osoby oglądające stronę mogą zdecydować, czy chcą pobrać plik i odtworzyć go, gdy będą miały ochotę.

Najczęściej stosowaną techniką jest umieszczenie na stronie połączenia, miniaturki pliku multimedialnego, jego opisu oraz wielkości. Takie rozwiązanie jest powszechnie traktowane jako przejaw grzeczności wobec użytkowników, dzięki niemu będą w stanie ocenić czas konieczny do pobrania pliku. Należy także dodać połączenia ze wszelkimi programami koniecznymi do odtworzenia pliku, gdyż może się zdarzyć, że użytkownik nie będzie dysponował tym programem i będzie musiał go pobrać i zainstalować.

Załóżmy przykładowo, że dysponuję filmem wideo zapisanym w formacie QuickTime, który chciałabym udostępnić. W tym celu mogę się posłużyć następującym fragmentem kodu:

<div align="center">

<h1>Wideo Apollo 17</h1>

<h2>-- na powierzchni Księżyca --</h2>

<p><a href="Apollo_17_Flag.qt">Astronauci zatykający flagę na powierzchni Księżyca</a>

<br />

[2.75Mb]</p>

<img src="Apollo_17_Flag.gif" align="texttop" height="120" width="160" />

<p>Do odtworzenia tego filmu potrzebny będzie program <a href="http://www.apple.com/quicktime">QuickTime</a> <a href="http://www.apple.com/quicktime"><img src="getquicktime4.gif" border="0" align="absmiddle" height"31" width="88" /></a>

firmy Apple</p>

</div>

Wynikowa strona została przedstawiona na rysunku 13.1.

W dobrym tonie jest umieszczanie na stronie połączeń do plików multimedialnych różnych typów. Dzięki temu użytkownik może pobrać jeden z nich, zależnie od osobistych preferencji.

<html>

<head>

<title>Multimedialne archiwum programu Apollo</title>

</head>

<body>

<div align="center">

<h1>Apollo 17 - Wideo</h1>

<p>Astronauci zatykający flagę na powierzchni Księżyca</p>

<table border="0">

    <tr>

        <td rowspan="3"><img src="Apollo_17_Flag.gif" width="160" height="120" /></td>

        <td><a href="Apollo_17_Flag.qt">QuickTime</a> [2.75Mb]</td>

    </tr>

    <tr>

        <td><a href="Apollo_17_Flag.mpg">MPEG</a> [2.45Mb]</td>

    </tr>

    <tr>

        <td><a href="a01607av.avi">AVI</a> [3.11Mb]</td>

    </tr>

</table>

<br />

<a href="http://www.apple.com/quicktime">

<img src="getquicktime4.gif" width="88" height="31" border="0"

alt="Pobierz QuickTime" vspace="7" /></a>

<br />

<a href="http://microsoft.com/windows/mediaplayer/download/default.asp">

<img src="getmedia_white.gif" width="65" height="57" border="0"

alt="Pobierz Windows Media Player" vspace="7" /></a>

<br />

</div>

</body>

</html>

Ćwiczenie 13.1: Tworzenie multimedialnego archiwum rodzinnego

Do wykonania

Jednym z popularnych typów stron WWW są archiwa multimedialne. Są to strony, których jedynym przeznaczeniem jest zapewnienie szybkiego dostępu do obrazów lub innych plików multimedialnych przeznaczonych do oglądnięcia lub pobrania.

Zanim WWW stała się popularna, multimedia, takie jak obrazy, dźwięki oraz obrazy wideo były przechowywane w archiwach FTP lub Gopher-a. Tekstowa natura takich archiwów utrudniała odnalezienie poszukiwanych materiałów, gdyż w takich przypadkach nazwa pliku była jedynym opisem jego zawartości. Nawet całkiem opisowe nazwy plików, na przykład, drzewa_ostatniej_jesieni.gif lub Ave-Maria.wav nie są zbyt użyteczne w przypadku dźwięków i obrazów. Choć opisują one pliki, to jednak jedynym sposobem jakiegokolwiek sprawdzenia jego zawartości pobranie i odtworzenie go.

Umieszczając na stronie WWW miniaturowe wersje obrazów i dzieląc pliki dźwiękowe oraz obrazy wideo na krótkie „przykładowe” klipy, można stworzyć na WWW archiwum multimedialne, które będzie znacznie bardziej użyteczne niż archiwa tekstowe.

Notatka

Pamiętaj, że z archiwów tego typu, wykorzystujących wiele obrazów i dużych plików multimedialnych, najlepiej jest korzystać w przeglądarkach graficznych dysponujących szybkimi połączeniami z Internetem.

W tym ćwiczeniu stworzysz prosty przykład archiwum multimedialnego zawierającego kilka obrazów GIF i JPEG, kilka plików dźwiękowych WAV oraz obrazów wideo zapisanych w formatach MPEG i AVI.

Korzystając ze swojego ulubionego programu graficznego, możesz stworzyć miniatury obrazów, które następnie umieścisz na stronie i wykorzystasz jako graficzne połączenia do odpowiednich plików archiwum multimedialnego.

Pracę rozpocznij od stworzenia szkieletu archiwum, a następnie dodaj do niego tabelę, w której umieścisz miniatury obrazów. Poniżej przedstawiłam stosowny kod strony:

Wpisz

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Historia mojej rodziny</title>

</head>

<body>

<h1>Multimedialne Archiwum Rodzinne</h1>

<div align="center">

<table border="0">

<tr>

    <td width="80"><h2>Obrazy</h2></td>

    <td><p>Wybierz obraz, który chcesz zobaczyć w powiększeniu.</p></td>

</tr>

<tr>

    <td width="80">Grupa krewnych na początku lat 1950-tych.</td>

    <td><img src="groupoldsmall.gif" height="103" width="150" alt="Stare zdjęcie rodzinne" /></td>

</tr>

<tr>

    <td width="80">Ciotki Betsy i Phyllis siedzące na ganku.</td>

    <td><img src="auntssmall.gif" height="96" width="150" alt="Dwie ciocie na ganku" /></td>

</tr>

<tr>

    <td width="80">Don jako dziecko.</td>

    <td><img src="donoldsmall.gif" height="100" width="61" alt="Młody Don" /></td>

</tr>

</table>

</div>

</body>

</html>

Zwróć uwagę, iż w znacznikach <IMG> umieściłam atrybuty ALT; ich treść zostanie wyświetlona zamiast obrazów w przeglądarkach, w których wyświetlenie tych obrazów nie będzie możliwe. Choć zapewne nie planujesz, aby ta strona była wyświetlana w przeglądarkach, które nie mogą wyświetlać obrazów, to jednak umieszczenie takich informacji będzie grzecznym gestem w kierunku osób, które przypadkiem zajrzą na Twoją witrynę. Dzięki temu każdy, kto odwiedzi witrynę, będzie w stanie pobrać udostępniane pliki multimedialne.

Wygląd powyższej strony został przedstawiony na rysunku 13.3.

Wynik
 

Kolejnym etapem będzie zamienienie każdego z miniaturowych obrazów umieszczonych na stronie na połączenie umożliwiające wyświetlenie pełnej wersji obrazu. Klikając te połączenia, użytkownicy będą mogli bądź to wyświetlić te obrazy w przeglądarce, bądź zapisać je na lokalnym komputerze.

Wpisz

...

<tr>

    <td width="80">Grupa krewnych na początku lat 1950-tych.</td>

    <td><a href="groupoldlarge.jpg"><img src="groupoldsmall.gif" height="103" width="150" alt="Stare zdjęcie rodzinne" /></a></td>

</tr>

<tr>

    <td width="80">Ciotni Betsy i Phyllis siedzące na ganku.</td>

    <td><a href="auntslarge.jpg"><img src="auntssmall.gif" height="96" width="150" alt="Dwie ciocie na ganku" /></a></td>

</tr>

<tr>

    <td width="80">Don jako dziecko.</td>

    <td><a href="donoldlarge.jpg"><img src="donoldsmall.gif" height="100" width="61" alt="Młody Don" /></a></td>

</tr>

...

Wygląd zmodyfikowanej wersji strony przedstawiłam na rysunku 13.4.

Wynik

Jeśli zostawię archiwum w obecnej postaci, to będzie ono wyglądało całkiem ładnie, jednak złamię jedną ze swoich własnych zasad, gdyż nie podałam jeszcze wielkości każdego z plików dołączonych do strony. Informacje te można podać w różny sposób, jednak najłatwiejszym z nich jest po prostu podanie wielkości pliku, tak jak to pokazałam na poniższym przykładzie:

Wpisz

<tr>

    <td width="80">Grupa krewnych na początku lat 1950-tych. [103k]</td>

    <td><a href="groupoldlarge.jpg"><img src="groupoldsmall.gif" height="103" width="150" alt="Stare zdjęcie rodzinne" /></a></td>

</tr>

<tr>

    <td width="80">Ciotni Betsy i Phyllis siedzące na ganku. [83k]</td>

    <td><a href="auntslarge.jpg"><img src="auntssmall.gif" height="96" width="150" alt="Dwie ciocie na ganku" /></a></td>

</tr>

<tr>

    <td width="80">Don jako dziecko. [284k]</td>

    <td><a href="donoldlarge.jpg"><img src="donoldsmall.gif" height="100" width="61" alt="Młody Don" /></a></td>

</tr>

A oto rezultaty wprowadzonych modyfikacji.

Wynik

Przejdźmy teraz do części strony zawierającej połączenia z plikami dźwiękowymi oraz obrazami wideo. Postać tej części strony można określić na dwa sposoby. Możesz umieścić zawartość w tej samej tabeli, w której wcześniej zostały umieszczone miniatury zdjęć oraz ich opisy lub możesz stworzyć dwie nowe tabele. Każde z tych rozwiązań jest równie dobre. W tym ćwiczeniu zdecydowałam się stworzyć dwie nowe tabele, niemal zupełnie identyczne, jak tabela zawierająca miniatury zdjęć.

Tworzenie tej części strony rozpocznij od dodania do niej trzech plików dźwiękowych oraz dwóch plików z obrazami wideo. Plików dźwiękowych nie da się zredukować, tak jak obrazów, a zatem będziesz je musiał dokładniej opisać w tekście tworzonego archiwum. Jeśli natomiast chodzi o wideo, to zazwyczaj program używany do jego odtwarzania pozwala na skopiowanie jednej klatki i zapisanie w formie obrazu, który następnie będzie można wyświetlić na stronie jako miniaturę. Poniżej przedstawiłam kod części strony zawierającej połączenia z plikami dźwiękowymi:

Wpisz

<div align="center">

<table border="0">

<tr>

    <td width="150"><h2>Dźwięki</h2></td>

    <td><p>Wybierz plik dźwiękowy, którego chcesz posłuchać.</p></td>

</tr>

<tr>

    <td width="150">Dźwiękowa wersja historii rodzinnej opisująca jak przeżyliśmy tornado z roku 1903. [1192k]</td>

    <td><a href="tornado.wav"><img src="soundicon.gif" height="29" width="33" /></a></td>

</tr>

<tr>

    <td width="150">Don opisujący swoją pierwszą pracę. [1004k]</td>

    <td><a href="donjob.wav"><img src="soundicon.gif" height="29" width="33" /></a></td>

</tr>

<tr>

    <td width="150">Prababcia Jo opisująca jak przybyła do Ameryki. [2459k]</td>

    <td><a href="jo.wav"><img src="soundicon.gif" height="29" width="33" /></a></td>

</tr>

</table>

</div>

Wygląd tego fragmentu strony został przedstawiony na rysunku 13.6.

I w końcu dodaj do strony fragment zawierający połączenia z plikami wideo, przypominający jej poprzednie części. Powoli zadanie staje się coraz prostsze!

Wpisz

<div align="center">

...