Ćwiczenie 5 Multimedia

Transkrypt

1 Ćwiczenie 5 Multimedia W ćwiczeniu tym zajmujemy się multimediami i osadzaniem ich na stronach WWW. Poprzez multimedia rozumiemy pliki graficzne, muzyczne, video i inne ozdobniki umieszczone na stronie. Zalecałbym jednak ostroŝność przy uŝywaniu tych elementów poniewaŝ mogą znacznie powiększyć objętość strony, a tym samym wydłuŝyć jej wczytywanie. Ponadto nie wszyscy uŝywają tych samych przeglądarek i wszystkich wtyczek, więc mogą mieć problemy z odtwarzaniem tych plików. Koniecznie naleŝy umieszczać alternatywny tekst, który wyświetli się w tym przypadku zamiast multimediów. Warto teŝ się zastanowić czy przeładowywać strony niepotrzebnymi dodatkami, nie zawsze ładnie wyglądającymi, a prawie zawsze przeszkadzającymi. DuŜo lepszym wyjściem jest odnośnik do pliku z podaną jego objętością. Spakowane pliki do zadań do pobrania ze strony w pliku pliki_cw5.zip Na początku zajmiemy się plikami graficznymi. Do umieszczania na stronie grafiki słuŝy znacznik: <img />. MoŜna go uŝywać z takimi atrybutami: <img src="ścieŝka dostępu do obrazka" alt="tekst alternatywny" width="x" height="y" align="sposób" hspace="m" vspace="n" />. Atrybuty src i alt są wymagane. Wymiary teŝ warto podać, poniewaŝ przeglądarka zarezerwuje odpowiednie miejsce na stronie, nawet gdy obrazek się nie wyświetli. Atrybuty align, hspace, vspace są zdeprecjonowane, ale tu z nich skorzystamy... ścieŝka dostępu do obrazka: 1. względna ścieŝka dostępu do pliku graficznego 2. naleŝy wpisać drogę uwzględniając wszystkie foldery 3. wchodząc do folderu wpisujemy jego nazwę/ 4. wychodząc z folderu wpisujemy../ 5. na końcu podajemy nazwę pliku z rozszerzeniem tekst alternatywny: x: 1. tekst zastępczy, kiedy nie wyświetla się obrazek 1. szerokość obrazka podana w pikselach 2. lub w procentach - koniecznie ze znakiem: % 3. naleŝy podawać rzeczywiste rozmiary 4. nie powiększać grafiki zwiększając jej rozmiary

2 y: 1. wysokość obrazka podana w pikselach 2. lub w procentach - koniecznie ze znakiem: % 3. naleŝy podawać rzeczywiste rozmiary 4. nie powiększać grafiki zwiększając jej rozmiary sposób: m: n: 1. "left" - obrazek ustawiony po lewej stronie względem otaczającego go tekstu 2. "right" - obrazek po prawej stronie względem tekstu 3. "top" - tekst ustawiony na górze obrazka 4. "middle" - tekst ustawiony na średniej wysokości względem obrazka 5. "bottom" - tekst ustawiony na dole obrazka (domyślnie) 1. pozioma odległość od obrazka w pikselach 1. pionowa odległość od obrazka w pikselach Wszystkie obrazki najlepiej powinny być zapisane w jednym z trzech formatów: gif, jpg, png. Formatu bmp naleŝy unikać, poniewaŝ jest słabo skompresowany.

3 Zadania do wykonania z grafikami. Krok 1. Wstawić mały obrazek (120x100), bez atrybutów. Krok 2. Wstawić mały obrazek (120x100) z wymuszonymi większymi rozmiarami (300x200). Krok 3. Wstawić średni obrazek (300x200).

4 Krok 4. Wstawić duŝy obrazek z rozmiarami 100%x100%. Krok 5. Wstawić akapit tekstu i obrazek po prawej stronie.

5 Krok 6. Wstawić akapit tekstu i obrazek po lewej stronie. Krok 7. Wstawić obrazek z tekstem przy obrazku pośrodku. Krok 8. Wstawić obrazek z tekstem przy obrazku u dołu.

6 Krok 9. Wstawić obrazek z tekstem oddalonym od obrazka i pośrodku. Krok 10. Wstawić obrazek z tekstem oddalonym od obrazka i u dołu obrazka.

7 Kolejna grupa dodatków na stronę to ruchome bannery. MoŜna je uzyskać za pomocą znacznika <marquee>...</marquee>. Znacznik ten nie wchodzi w skład specyfikacji HTML 4.01, ale jest obsługiwany przez przeglądarki: Internet Explorer, Opera, Mozilla Firefox. Znacznik ten posiada kilka atrybutów: <marquee behavior="typ" direction="kierunek" bgcolor="kolor" width="x" height="y" hspace="m" vspace="n" loop="p" scrollamount="s" scrolldelay="ms">...</marquee>. typ: 1. "scroll" - tekst przesuwa się od prawej do lewej (domyślnie) 2. "alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca 3. "slide" - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy kierunek: kolor: 1. "left" - tekst będzie przesuwał się w lewo (domyślnie) 2. "right" - tekst będzie przesuwał się w prawo 3. "up" - przesuwanie w górę 4. "down" - przesuwanie w dół 1. kolor tła w bannerze 2. aby uzyskać dokładny kolor i odcień to wartość szesnastkową 3. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru 4. w systemie szesnastkowym jest szesnaście podstawowych cyfr: 5. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 6. przykładowe kolory: nazwa #rrggbb kolor black # silver #c0c0c0 gray # white #ffffff

8 maroon # red #ff0000 purple # fuchsia #ff00ff green # lime #00ff00 olive # yellow #ffff00 navy # blue #0000ff teal # aqua #00ffff x: 1. szerokość bannera na ekranie w pikselach 2. lub w procentach - koniecznie ze znakiem: % y: 1. wysokość bannera na ekranie w pikselach 2. lub w procentach - koniecznie ze znakiem: % m: 1. odległość bannera w poziomie od tekstu w pikselach n: 1. odległość bannera w pionie od tekstu w pikselach

9 p: 1. ilość powtórzeń s: ms: 1. szybkość przesuwania się bannera w pikselach 2. wartość podaje o ile pikseli banner ma przeskakiwać 1. szybkość przesuwania się bannera w milisekundach 2. jeŝeli poniŝej 60ms to naleŝy dodać atrybut truespeed="truespeed" Zadania do wykonania z bannerami: Krok 11. Wstawić banner bez atrybutów. Krok 12. Wstawić banner z dowolnym atrybutem behavior.

10 Krok 13. Wstawić banner z dowolnym atrybutem direction. Krok 14. Wstawić banner z atrybutem bgcolor. Krok 15. Wstawić banner z atrybutami width i height. Krok 16. Wstawić banner z atrybutami width, height i bgcolor.

11 Krok 17. Wstawić tekst i banner z atrybutem hspace. Krok 18. Wstawić tekst i banner z atrybutem vspace. Krok 19. Wstawić banner powtórzony kilka razy.

12 Krok 20. Wstawić następny banner z prędkością w pikselach (scrollmount= 20 ) zrzut ekranu wyŝej Krok 21. Wstawić następny banner z prędkością w milisekundach (scrolldelay= 250 ) zrzut ekranu wyŝej Kolejne dodatki na stronę to pliki audio i video. Do osadzania ich na stronie WWW słuŝy znacznik <embed />. Znacznik ten nie wchodzi w skład specyfikacji HTML 4.01, ale jest obsługiwany przez przeglądarki: Internet Explorer, Opera, Mozilla Firefox. Znacznik ten posiada kilka atrybutów: <embed src="ścieŝka dostępu do pliku" width="x" height="y" autostart="typ" hidden="wartość" showcontrols="opcja" loop="stan" /> ścieŝka dostępu do pliku: x: y: typ: 1. względna ścieŝka dostępu do pliku multimedialnego 2. naleŝy wpisać drogę uwzględniając wszystkie foldery 3. wchodząc do folderu wpisujemy jego nazwę/ 4. wychodząc z folderu wpisujemy../ 5. na końcu podajemy nazwę pliku z rozszerzeniem 1. szerokość wyświetlanego obrazu podana w pikselach 1. wysokość wyświetlanego obrazu podana w pikselach 1. "true" - plik zostanie automatycznie odtworzony, zaraz po wczytaniu strony 2. "false" - plik nie zostanie odtworzony po wczytaniu (trzeba go uruchomić "ręcznie" - poprzez wyświetlony panel kontrolny) wartość: 1. "true" - obraz zostanie ukryty 2. "false" - obraz będzie wyświetlony na ekranie

13 opcja: stan: 1. "0" - panel kontrolny zostanie ukryty 2. "1" - panel kontrolny będzie wyświetlony na ekranie 1. "true" - powtarzanie w nieskończoność 2. "false" - brak powtarzania NaleŜy pamiętać, Ŝe pliki multimedialne mają zwykle duŝe rozmiary, dlatego najlepiej na początku strony umieścić tekst, a dopiero na końcu polecenie <embed />. W takim przypadku w pierwszej kolejności wczyta się tekst. Pliki multimedialne mogą być zapisane w następujących formatach - pliki audio: mid, mp3, ra, wav; pliki video: avi, mov, mpeg, asf. Aby umoŝliwić dotarcie do plików multimedialnych w przeglądarkach, które nie obsługują polecenia <embed />, wskazane jest umieszczenie na stronie znaczników: <noembed>...</noembed> na przykład z taką treścią: <noembed> Niestety Twoja przeglądarka nie odtwarza plików multimedialnych, ale <a href="ścieŝka dostępu do pliku">tutaj</a> moŝesz zobaczyć ten plik! </noembed> NaleŜy jedynie podać właściwą ścieŝkę do pliku.

14 Zadania do wykonania z plikami audio i video. Krok 22. Wstawić pliki audio: mid, mp3, wav z róŝnymi rozmiarami panelu.

15 Krok 23. Wstawić plik audio: wma dwa razy - drugi z ukrytym panelem kontrolnym, powtarzaniem w nieskończoność i autostart: true

16 Krok 24. Wstawić pliki video: avi z róŝnymi rozmiarami obrazu, autostart: false

17 Krok 25. Wstawić plik video: wmv dwa razy - drugi z ukrytym panelem kontrolnym, powtarzaniem w nieskończoność i autostart: true.

18 Krok 26. Na koniec naleŝy wykonać odsyłacz do dokumentu pdf, który otworzy się w przeglądarce, (pod warunkiem, Ŝe w systemie jest program do odczytu pdf-ów). Przy odsyłaczach do plików mających większą objętość (np. większą niŝ 100 KB), dobrze jest podać ich rozmiar. W ten sposób uŝytkownik będzie mógł zdecydować, czy chce uruchomić taki odnośnik.

19 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 Zainteresowanym podaję uniwersalny skrypt do zagnieŝdŝania plików multimedialnych, dzięki któremu plik będzie widoczny w róŝnych przeglądarkach: <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> NaleŜy jedynie zmodyfikować wyróŝnione poprzez wcięcie linijki: podać lokalizację pliku multimedialnego oraz szerokość i wysokość obrazu w pikselach. MoŜna teŝ w linijkach: <param name="autostart" value="false" /> i autostart="false"> false zmienić na true, co spowoduje automatyczne odtworzenie pliku zaraz po wczytaniu strony. Oceniany będzie plik multimedia.html z umieszczonymi w nim po kolei, zgodnie z instrukcjami, wszystkimi grafikami, bannerami, plikami audio i video oraz pdf-em.