Grafika i multimedia na stronach WWW.

Prezentacja na temat: "Grafika i multimedia na stronach WWW."— Zapis prezentacji:

1 Grafika i multimedia na stronach WWW.

2 Wstawianie obrazka : Zwykły (domyślnie):
<img src="ścieżka dostępu" alt="Tekst alternatywny" /> gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej). Ponadto w MSIE może zostać wyświetlona po wskazaniu obrazka myszką.

3 O określonych rozmiarach:
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y" /> lub <img src="ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%" /> gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość i wysokość obrazka w pikselach. Natomiast jako "x%" oraz "y%" należy wpisać odpowiednio: długość i wysokość obrazka w procentach ekranu. Podawanie rozmiarów grafik może być przydatne przynajmniej z kilku powodów. Jeśli obrazek nie zostanie wczytany, symbol który zajmie jego miejsce będzie miał inne wymiary i może tym samym popsuć ułożenie innych elementów strony. Poza tym jeśli nie wstawimy rozmiarów grafik na stronie, to podczas wczytywania cała treść będzie się "rozjeżdżać". Jeżeli komuś to szczególnie przeszkadza, powinien zawsze określać te atrybuty - to bardzo dobry nawyk. Oczywiście aby obraz nie był zniekształcony, należy podać jego prawdziwe rozmiary w pikselach a nie w procentach (można je sprawdzić w dowolnym programie graficznym).

4 Z obramowaniem: <img src="ścieżka dostępu" alt="Tekst alternatywny" border="n" /> gdzie jako "n" należy wpisać grubość obramowania (w pikselach). O określonym ustawieniu względem tekstu: <img src="ścieżka dostępu" alt="Tekst alternatywny" align="rodzaj" /> gdzie jako "rodzaj" należy wpisać: "left" - obrazek ustawiony po lewej stronie względem otaczającego go tekstu "right" - obrazek po prawej stronie względem tekstu "top" - tekst ustawiony na górze obrazka "middle" - tekst ustawiony na średniej wysokości względem obrazka "bottom" - tekst ustawiony na dole obrazka (domyślnie)

5 O określonej odległości od tekstu:
<img src="ścieżka dostępu" alt="Tekst alternatywny" hspace="x" vspace="y" /> gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (również w pikselach). Wszystkie obrazki najlepiej powinny być zapisane w jednym z trzech formatów: GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość. JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości. PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia własność może nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0). Format BMP może nie być wcale lub jest bardzo słabo skompresowany, dlatego należy unikać jego stosowania! Nieodpowiedni dobór formatu graficznego może być przyczyną nawet kilkukrotnego zwiększenia rozmiaru pliku albo znacznego pogorszenia jakości obrazu. Dlatego jeśli nie wiesz który wybrać, przetestuj wszystkie.

6 Uniwersalny sposób odtwarzania plików
Polecenia multimedialne sprawiają wiele kłopotów. Na przykład: <embed /> ma tą zaletę, że skojarzony z nim plik, będzie odtwarzany bezpośrednio na stronie. Niestety jest to również jego wadą. Pliki multimedialne mają zwykle duże rozmiary, dlatego wczytywanie takiej strony może trwać potwornie długo. Poza tym polecenie <embed /> nie zawsze działa poprawnie, szczególnie jeśli chodzi o jego atrybuty dodatkowe. Ponadto niektóre formaty plików przestały być odtwarzane w Internet Explorerze 5.5 i 6.0. Jeszcze gorzej jest z pozostałymi dwoma poleceniami: <bgsound /> i <img dynsrc="..." />. Nie dość, że nie zawsze działają poprawnie, to jeszcze można je wykorzystywać tylko w Microsoft Internet Explorerze. Jeśli ktoś posiada inną przeglądarkę internetową, prawdopodobnie nie będzie mógł zobaczyć/usłyszeć efektów ich działania. Dlatego nie są one zalecane.

7 Zagnieżdżanie plików multimedialnych
Jeśli koniecznie zależy nam na tym, aby plik multimedialny był odtwarzany wprost na stronie, a jednocześnie chcemy, aby był on widoczny w różnych przeglądarkach, możemy użyć zagnieżdżania plików multimedialnych: <object id="MediaPlayer1„ width="szerokość" height="wysokość" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase= standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject"> <param name="FileName" value="ścieżka dostępu do pliku multimedialnego" /> <param name="animationatStart" value="true" /> <param name="transparentatStart" value="true" /> <param name="autoStart" value="false" /> <param name="showControls" value="true" /> <param name="Volume" value="0" /> <embed type="application/x-mplayer2" pluginspage= src="ścieżka dostępu do pliku multimedialnego„ name="MediaPlayer1" width="szerokość" height="wysokość" autostart="false"> <a href="ścieżka dostępu do pliku multimedialnego">Otwórz plik</a> </embed> </object>

8 gdzie zmodyfikować należy wyróżnione linijki, a kolejne wpisy w nich oznaczają: ścieżka dostępu do pliku multimedialnego na dysku, gdzie znajduje się żądany plik multimedialny szerokość" i "wysokość rozmiar wyświetlanego obrazu wtyczki (w pikselach), czyli okna na stronie w którym odtwarzany będzie plik Zamiast: <param name="autoStart" value="false" /> i autostart="false" można wpisać: <param name="autoStart" value="true" /> i autostart="true" co spowoduje automatyczne odtworzenie pliku, zaraz po wczytaniu strony. Jeśli posiadasz przeglądarkę Microsoft Internet Explorer pod Windows, powyższe polecenia spowodują automatyczne otwarcie na stronie programu Windows Media Player (polecenie <object>...</object>). Natomiast posiadacze przeglądarek Netscape/Mozilla/Firefox i Opera pod Windows będą mogli zobaczyć plik, dzięki wpisanemu dodatkowo poleceniu <embed>...</embed>.

9 Tło dźwiękowe : (tylko Internet Explorer i Opera 6!)
<bgsound src="ścieżka dostępu do pliku dźwiękowego" /> Polecenie to pozwala na odtwarzanie dźwięku w tle - jako podkład muzyczny. Nie jest przy tym wyświetlany żaden panel kontrolny. Pamiętaj, że wiele osób korzysta z Internetu późnym wieczorem i w nocy. Włączenie głośnej muzyki bez ich zgody może nie być mile widziane (szczególnie przez sąsiadów :-) Wielu internautów podczas surfowania słucha również własnej muzyki - wtedy wystąpi raczej mało ciekawy efekt nakładania się dźwięków. W takim momencie użytkownicy często opuszczają stronę, ponieważ w inny sposób nie potrafią wyłączyć odtwarzanej muzyki! Zatem zanim umieścisz we własnym serwisie tło dźwiękowe, zastanów się dwa razy. Jeśli już musisz to zrobić, daj użytkownikowi chociaż możliwość wyboru czy chce go słuchać, np. poprzez umieszczenie odsyłacza do strony z muzyką otwieraną w nowym oknie.

10 Dla tego znacznika możliwe są dodatkowe atrybuty:
Ilość powtórzeń: <bgsound src="ścieżka dostępu do pliku dźwiękowego" loop="n" /> gdzie "n" oznacza ilość powtórzeń (dla loop="infinite"" jest to nieskończoność). Poziom głośności: <bgsound src="ścieżka dostępu do pliku dźwiękowego" volume="v" /> gdzie "v" oznacza poziom głośności (od "-10000" do "0"). Balans głośników (w przypadku dźwięku stereofonicznego): <bgsound src="ścieżka dostępu do pliku dźwiękowego" balance="b" />

11 gdzie "b" oznacza balans między głośnikami (od "-10000" do "+10000").
Analogiczny efekt można uzyskać stosując polecenie <embed /> wraz z atrybutem hidden="true", które jest interpretowane również przez przeglądarkę Netscape (dlatego zaleca się raczej stosowanie EMBED). Ponadto należy pamiętać, że pliki dźwiękowe mają zwykle bardzo duże rozmiary (przeciętne MP3 to ok. 4 MB), a więc wczytywanie takiej strony w Internecie, może trwać potwornie długo! Zamiast *.mp3 raczej lepiej jest wykorzystać inny format muzyczny, np. *.mid. I ostatnia rada: chociaż sam Microsoft zaleca(ł) wstawianie <bgsound /> w nagłówku dokumentu, lepiej jest to zrobić na samym końcu strony. W takim przypadku najpierw wczyta się właściwa treść, a dopiero potem muzyka. Podczas wczytywania dźwięku użytkownik będzie już mógł czytać stronę, bez konieczności bezczynnego oczekiwania na doładowanie obszernego pliku muzycznego. Dźwięk w tle ucichnie, jeżeli przejdziemy na inną stronę. Aby stworzyć prawdziwy podkład muzyczny, który jest odgrywany przez cały czas, podczas przechodzenia pomiędzy stronami serwisu, powinniśmy umieścić tło dźwiękowe na osobnej stronie, a następnie odwołać się do niej poprzez następujący odsyłacz: <a target="muzyka" href="ścieżka do strony z muzyką">Włącz podkład muzyczny</a>