Ćw5. Multimedia

Ć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.
2.
3.
4.
5.
względna ścieŜka dostępu do pliku graficznego
naleŜy wpisać drogę uwzględniając wszystkie foldery
wchodząc do folderu wpisujemy jego nazwę/
wychodząc z folderu wpisujemy ../
na końcu podajemy nazwę pliku z rozszerzeniem
tekst alternatywny:
1. tekst zastępczy, kiedy nie wyświetla się obrazek
x:
1.
2.
3.
4.
szerokość obrazka podana w pikselach
lub w procentach - koniecznie ze znakiem: %
naleŜy podawać rzeczywiste rozmiary
nie powiększać grafiki zwiększając jej rozmiary
y:
1.
2.
3.
4.
wysokość obrazka podana w pikselach
lub w procentach - koniecznie ze znakiem: %
naleŜy podawać rzeczywiste rozmiary
nie powiększać grafiki zwiększając jej rozmiary
sposób:
1.
2.
3.
4.
5.
"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)
m:
1. pozioma odległość od obrazka w pikselach
n:
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.
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).
Krok 4. Wstawić duŜy obrazek z rozmiarami 100%x100%.
Krok 5. Wstawić akapit tekstu i obrazek po prawej stronie.
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.
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.
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:
1.
2.
3.
4.
"left" - tekst będzie przesuwał się w lewo (domyślnie)
"right" - tekst będzie przesuwał się w prawo
"up" - przesuwanie w górę
"down" - przesuwanie w dół
kolor:
1.
2.
3.
4.
5.
6.
kolor tła w bannerze
aby uzyskać dokładny kolor i odcień to wartość szesnastkową
#rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru
w systemie szesnastkowym jest szesnaście podstawowych cyfr:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
przykładowe kolory:
nazwa
#rrggbb kolor
black
#000000
silver
#c0c0c0
gray
#808080
white
#ffffff
maroon
#800000
red
#ff0000
purple
#800080
fuchsia
#ff00ff
green
#008000
lime
#00ff00
olive
#808000
yellow
#ffff00
navy
#000080
blue
#0000ff
teal
#008080
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
p:
1. ilość powtórzeń
s:
1. szybkość przesuwania się bannera w pikselach
2. wartość podaje o ile pikseli banner ma przeskakiwać
ms:
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.
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.
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.
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:
1.
2.
3.
4.
5.
względna ścieŜka dostępu do pliku multimedialnego
naleŜy wpisać drogę uwzględniając wszystkie foldery
wchodząc do folderu wpisujemy jego nazwę/
wychodząc z folderu wpisujemy ../
na końcu podajemy nazwę pliku z rozszerzeniem
x:
1. szerokość wyświetlanego obrazu podana w pikselach
y:
1. wysokość wyświetlanego obrazu podana w pikselach
typ:
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
opcja:
1. "0" - panel kontrolny zostanie ukryty
2. "1" - panel kontrolny będzie wyświetlony na ekranie
stan:
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.
Zadania do wykonania z plikami audio i video.
Krok 22. Wstawić pliki audio: mid, mp3, wav z róŜnymi rozmiarami panelu.
Krok 23. Wstawić plik audio: wma dwa razy - drugi z ukrytym panelem kontrolnym, powtarzaniem w nieskończoność i autostart: true
Krok 24. Wstawić pliki video: avi z róŜnymi rozmiarami obrazu, autostart: false
Krok 25. Wstawić plik video: wmv dwa razy - drugi z ukrytym panelem kontrolnym, powtarzaniem w nieskończoność i autostart: true.
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.
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="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
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="http://www.microsoft.com/Windows/MediaPlayer/"
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.