Ćwiczenie 3 Interaktywność na stronach WWW Dr inż. Robert Banasiak 1
Plan ćwiczeń W trakcie niniejszych ćwiczeń zapoznacie się Państwo z przykładowymi, wybranymi możliwościami wzbogacania stron WWW w elementy interaktywne. Ze względu na kolorystykę budowanych serwisów polecam korzystać również z elektronicznej wersji instrukcji dostępnej na stronie WWW prowadzącego zajęcia. 1. Utworzenie struktury serwisu ćwiczeniowego Korzystając z edytora Adobe Dreamweaver CS6 oraz umiejętności z Ćwiczenia 2 utworzyć ręcznie przy pomocy kodu HTML (znaczniki <div> oraz reguły CSS) nowy projekt serwisu WWW o następującym wyglądzie: Przykładowy wygląd makiety bez grafik i kolorowania z podaniem wymiarów (rysunek pomocniczy - wskazówka): Szerokość kontenerów <div> należy określić na podstawie przygotowanych i udostępnionych w materiałach na stronie prowadzącego grafik ćwiczeniowych. Wys. 100 px Kont: naglowek Wys. 400 px Kont: treść 100 px Kont: stopka Pamiętajcie Państwo o zbudowaniu dla serwisu odpowiedniej struktury katalogów: w której koniecznie!!! utwórzcie foldery: film, flash, js, css, muzyka, obrazy. Będą one nam potrzebne w dalszej części ćwiczenia. 2
2. Animacja Marquee Uwaga: Na początku tego ćwiczenia została zamieszczona teoria z którą należy się zapoznać. Zadanie praktyczne znajduje się w dalszej części ćwiczenia. Znacznik: <marquee>tu wpisz tekst</marquee> Wewnątrz znacznika <marquee>...</marquee> można umieścić nie tylko tekst, ale również inne elementy (np.: grafikę). Różne zachowania animacji Marquee można określać atrybutem typ : <marquee behavior="typ"> Tu wpisz tekst </marquee> gdzie jako "typ" zachowania (ang. behavior) animacji można wpisać: scroll - tekst przesuwa się od prawej do lewej (domyślnie) alternate - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca slide - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy Określanie kierunku przesuwania: <marquee direction="kierunek">tu wpisz tekst</marquee> gdzie jako "kierunek" można wpisać: 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ół <marquee bgcolor="kolor">tu wpisz tekst</marquee> gdzie "kolor" oznacza definicję w języku HTML. Określanie rozmiarów animacji na ekranie: <marquee width="x" height="y">tu wpisz tekst</marquee> <marquee width="x%" height="y%">tu wpisz tekst</marquee> gdzie "x" oznacza szerokość w pikselach, a "y" wysokość (również w pikselach). Natomiast "x%" oznacza szerokość w procentach ekranu, a "y" wysokość (również w procentach). Określanie odległości od tekstu: <marquee hspace="x" vspace="y">tu wpisz tekst</marquee> gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (również w pikselach). Określanie ilości powtórzeń: <marquee loop="n">tu wpisz tekst</marquee> gdzie "n" oznacza ilość powtórzeń. Określanie szybkości przesuwania się tekstu: <marquee scrollamount="n">tu wpisz tekst</marquee> 3
<marquee >Tu wpisz tekst</marquee> <marquee truespeeed="truespeeed" scrolldelay="ms">tu wpisz tekst</marquee> Gdzie jako "n" należy podać szybkość przesuwania w pikselach. Natomiast jako "ms" należy podać szybkość przesuwania w milisekundach (1 milisekunda = 0.001 sekundy, 1000 milisekund = 1 sekunda). Atrybut scrollamount="..." określa, o ile pikseli ma "przeskoczyć" tekst podczas jednego kroku animacji, natomiast scrolldelay="..." pozwala ustalić odstęp czasu pomiędzy tymi skokami. łącząc oba parametry, mamy możliwość pełnej kontroli płynności ruchu (scrollamount) oraz jego szybkości (scrolldelay). Mniejsze wartości scrollamount="...", to mniej szarpany ruch, natomiast niższe scrolldelay="...", to szybsza animacja. W ostatnim przypadku podanie atrybutu logicznego truespeed="truespeed" spowoduje, że wartość scrolldelay="..." będzie ściśle określała prędkość przesuwania. Bez tego atrybutu wszystkie wartości mniejsze lub równe 59 (milisekund), są automatycznie zaokrąglane w górę do 60 (czyli wpisanie: 5, 30 czy 60 da taki sam efekt). Atrybut truespeed="truespeed" jest zatem przydatny dla scrolldelay < 60. Jeśli chcemy określić scrolldelay > 59, podawanie atrybutu truespeed="truespeed" nie ma sensu (chociaż oczywiście można to zrobić). Ćwiczenie do samodzielnego zrobienia: 1. Dodaj do serwisu animację tekstu To jest animowany tekst z szybkością scrollamount=10 i scrolldelay=10, od prawej do lewej. 2. Dodaj do serwisu animację obrazka buzka.png (znajdziecie go Państwo w materiałach do ćwiczeń) od lewej do prawej z szybkością scrollamount=1 i scrolldelay=50. W zależności od docelowej rozdzielczości strony proszę dopasować rozmiary obrazu w pikselach do rozmiarów nagłówka (należy zachować proporcje obrazka). Przykładowy docelowy rozmiar obrazka to np. 47x48 pikseli. Animację proszę umieścić w kontenerze <div> przechowującym nagłówek strony WWW. 3. Budowanie prostego menu przy wykorzystaniu mechanizmu Spry. W Zadaniu 3 do przygotowywanego w poprzednich punktach serwisu dodamy pierwsze menu dynamiczne posługując się technologią widżetów Spry. W tym celu skupimy się jedynie na umieszczeniu menu w obszarze serwisu oraz jego prostej modyfikacji, która zostanie w instrukcji przeprowadzona krok po kroku. W celu zbudowania menu dynamicznego: 1. Ustawiamy się w kontenerze treść (najlepiej wykorzystać do tego tryb Kod). 2. Wybieramy z zakładki Spry ikonę Pasek Menu Spry : 3. Następnie wybieramy pożądany układ menu (w naszym przypadku będzie to układ poziomy). 4
4. Naciskamy Ok. W miejscu, w którym aktualnie byliśmy pojawi się następujący kod html: <ul id="menubar1" class="menubarhorizontal"> <li><a class="menubaritemsubmenu" href="#">element 1</a> <ul> <li><a href="#">element 1.1</a></li> <li><a href="#">element 1.2</a></li> <li><a href="#">element 1.3</a></li> </li> <li><a href="#">element 2</a></li> <li><a class="menubaritemsubmenu" href="#">element 3</a> <ul> <li><a class="menubaritemsubmenu" href="#">element 3.1</a> <ul> <li><a href="#">element 3.1.1</a></li> <li><a href="#">element 3.1.2</a></li> </li> <li><a href="#">element 3.2</a></li> <li><a href="#">element 3.3</a></li> </li> <li><a href="#">element 4</a></li> 5. Automatycznie wygenerowany w punkcie 4 przez kreator kod należy zmodyfikować do następującej postaci: <ul id="menubar1" class="menubarhorizontal"> <li><a href="#">film</a></li> <li><a href="#">mapa Polski</a></li> <li><a href="#">galeria</a></li> 6. Pozostawiamy menu w miejscu, w którym się znajduje tj. lewy górny róg kontenera <div> o nazwie tresc; 7. Ustawmy centrowanie dla tekstu wewnątrz elementów menu modyfikując regułę: ul.menubarhorizontal li (uwaga: wszystkie reguły dla menu poziomego Spry znajdziecie Państwo w zakładce style CSS po prawej stronie ekranu); 8. Modyfikujemy kolorystykę domyślnego wyglądu menu poprzez zmiany koloru tekstu i koloru tła w regule CSS: ul.menubarhorizontal a. Proszę dobrać kolory (według uznania) pasujące do całościowej szaty graficznej serwisu; 9. Modyfikujemy kolor tła dla elementów menu zmieniający się wraz z najazdem kursora myszy. W tym celu wprowadzamy zmianę dla koloru tła w regule CSS (cała nazwa reguły jest dłuuuga!): ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuhover, ul.menubarhorizontal a.menubarsubmenuvisible; Kolor zmiany dobieramy według uznania. 10. Efekt naszych działań (rysunek poglądowy): 5
4. Definiowanie łącza w postaci wydzielonego fragmentu pliku graficznego Mapy obrazów Dodamy teraz do naszego serwisu prostą stronę WWW opartą na nowym pustym dokumencie HTML. Dokument należy nazwać mapa_polski.html i zapisać w głównym katalogu serwisu. Dla tego dokumentu przedefiniujcie Państwo znacznik <body> tak, by cała zawartość strony była wycentrowana na białym tle. Na stronie osadź plik graficzny przedstawiający mapę Polski (rozmiar 800 x 800 pikseli). Zadanie: Zadaniem Państwa jest zdefiniowanie trzech map obrazka dla trzech wybranych województw przekierowujących Internautę do stron internetowych związanych tematycznie z tymi województwami 6
(mogą być np. urzędy). Wykorzystajmy w tym celu panel Wspólne -> Obrazy -> Rysuj punkt aktywny. Mapy narysujmy korzystając z trzech dostępnych figur (wielokąt, prostokąt, okrąg). Dla utworzonych map proszę uzupełnić pola dotyczące celu (_blank) oraz łącza (należy odszukać odpowiedni serwis przy pomocy wyszukiwarki Google). Uwaga: Plik strony WWW mapa_polski.html należy podłączyć jako hiperłącze do pozycji menu o nazwie Mapa Polski wprowadzając odpowiedni kod HTML dla odpowiedniego elementu zbudowanego wcześniej dynamicznego menu Spry: <li><a href="mapa_polski/mapa_polski.html">mapa Polski</a></li> 5. Publikowanie plików wideo. Na potrzeby tego ćwiczenia musimy utworzyć pusty dokument html o nazwie film.html i podłączyć go pod odpowiednią pozycję menu Spry (podobnie jak dla Mapy Polski z poprzedniego ćwiczenia). W ramach tego ćwiczenia musimy również przedefiniować znacznik <body> dla tego dokumentu i ustawić w nim kolor tła na czarny bądź ciemnoszary (#333) (optymalne kolory tła dla wyświetlania plików wideo na monitorze). Plik film.html zapisujemy w katalogu głównym serwisu. Zadanie: Korzystając z przykładowego wzorca kodu: <object type="video/x-ms-wmv" data="nazwa_pliku.wmv" width="rozmiar_x" height="rozmiar_y"> <param name="src" value="plik.wmv" /> <param name="autostart" value="true" /> <param name="controller" value="false" /> </object> osadź w przygotowanym wcześniej pustym pliku film.html plik wideo o nazwie w formacie Windows Media Video (plik zasypiam.wmv znajduje się wśród materiałów ćwiczeniowych na stronie WWW prowadzącego zajęcia). Uwaga: Z racji problematycznej obsługi klipów wideo przez przeglądarki firm innych niż Microsoft zalecam przeprowadzenie tego ćwiczenia przy pomocy przeglądarki Internet Explorer. 6. Dodawanie animacji Flash! do struktury strony WWW. W celu dodania animacji Flash! można wykorzystać zarówno specjalną, przeznaczoną do tego opcję programu Dreamweaver: Wspólne -> Multimedia -> SWF. Zadanie: Zagnieźdź animacje Flash!, korzystając z pliku behappy.swf, w kontenerze <div> o nazwie tresc. Osadź animację Flash! tuż za kodem html dla menu Spry. Animację be happy znajdziecie Państwo w materiałach ćwiczeniowych na stronie WWW prowadzącego zajęcia. 7
Uwaga: W celu wykonania tego ćwiczenia można również spróbować wykorzystać własne animacje zbudowane na zajęciach z Flash! 7. Dodawanie podkładów dźwiękowego w tle strony WWW Komenda <bgsound> z języka HTML pozwala na odtwarzanie dźwięku w tle - jako podkład muzyczny. Nie jest przy tym wyświetlany żaden panel kontrolny. Polecenie <bgsound> można zastosować z uwzględnieniem różnych atrybutów: <bgsound src="ścieżka dostępu do pliku dźwiękowego" loop="n" /> (n-ilość powtórzeń) lub (jeżeli w danym systemie nie działa powyższa metoda można zastosować również bardziej uniwersalne rozwiązanie wykorzystujące znacznik <embed> ): <embed hidden=true loop=true src=" ścieżka dostępu do pliku dźwiękowego " type="application/x-mplayer2"> </embed> Zadanie: 1. Wykorzystaj zamieszczony w materiałach temat muzyczny z sitkomu Benny Hill przygotowany w postaci pliku MIDI i podłącz go jako tło dla dokumentu index.html. 2. Wykonaj ten sam krok dla dokumentu mapa_polski.html, dla zamieszczonego w materiałach utwór Fryderyka Chopina w postaci pliku chopin.mp3. Uwaga: pliki z muzyką podłączamy jako ostatnią linię naszego kodu strony tuż przed zamknięciem znacznika </body> 8. Licznik odwiedzin W tym ćwiczeniu podłączymy do naszej strony licznik odwiedzin oferowany jako dynamiczny obiekt JavaScript zarządzany zdalnie przez serwis: http://www.licznikinastrone.pl. Aby tego dokonać należy: wybrać licznik w zakładce Rejestruj licznik, a następnie poniżej dokonać jego rejestracji. Po rejestracji uzyskamy kod zbliżony do poniższego. <a href="http://www.licznikinastrone.pl" title="liczniki na stronę"><img src = http://www.licznikinastrone.pl/licz.php?id=rbanasi alt="darmowe liczniki" border="0"></a> Wstawiamy ten kod do kontenera <div> o nazwie stopka. 9. Dodawanie dynamicznych obiektów JavaScript W tym ćwiczeniu wykorzystamy jeden z gotowych dynamicznych obiektów JavaScript, jakie można znaleźć w Internecie, czyli moduł galerii internetowej o nazwie Lightbox dostarczony w materiałach ćwiczeniowych w postaci pliku galeria.zip (najnowszą wersję można pobrać ze strony WWW: http://www.huddletogether.com/projects/lightbox2/). Aby zainstalować i podłączyć mechanizm galerii 8
Lightbox napisanej w języku skryptowym JavaScript do naszego serwisu WWW musimy wykonać następujące kroki: 1. Tworzymy nowy pusty plik HTML o nazwie galeria.html. 2. Pobieramy ze strony prowadzącego plik o nazwie galeria.zip, rozpakowujemy i kopiujemy wszystkie pliki z katalogu js do katalogu js naszego serwisu, katalog obrazy do katalogu obrazy oraz plik lightbox.css do naszego folderu css. 3. Pobieramy ze zasobów grafika Google pięć dowolnych fotografii. Dopasowujemy ich rozmiar do około 640x480 przy pomocy pakietu Photoshop (lub inną metodą). Dodatkowo, zmieniając wielkość danej fotografii, utwórzmy również na jej miniaturę o rozmiarach około 150x100. 4. W strukturze naszej strony WWW w sekcji nagłówka <head> </head> dodajemy wpisy niezbędne do uruchomienia mechanizmów JavaScript galerii oraz podłączamy arkusz styli lightbox.css. Ten punkt należy wykonać pracując w trybie Kod. Poniżej przykład: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>galeria</title> <link href="css/lightbox.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> </head> 5. Modyfikujemy znacznik <body> zmieniając kolor tła na czarny. 6. Mając wcześniej przygotowane fotografie i ich miniatury dodajemy do sekcji body kolejno linie powodujące wyświetlenie obrazów po kliknięciu na ich miniatury. Schemat dodawania jest następujący: <p><a href="obrazy/fotografia.jpg" rel="lightbox" title="fotografia 1"><img src="obrazy/ fotografia _th.jpg" width="150" height="100" /></a></p> 7. Mając wcześniej przygotowany zestaw fotografii możemy je zgrupować poprzez dodanie nazwy grupy w nawiasach kwadratowych dla atrybutu rel: <p><a href="obrazy/fotografia.jpg" rel="lightbox[galeria2010]" title="fotografia 1"><img src="obrazy/ fotografia _th.jpg" width="150" height="100" /></a></p> Zgrupowanie obrazów pod wspólną nazwą umożliwia zastosowanie mechanizmu przełączania kolejnych fotografii poprzez kliknięcie na [Prev] bądź [Next]. Ćwiczenie do samodzielnego zrobienia: Proszę zbudować galerię obrazów (wybranych przez Państwa np. z grafiki Google) opartą na dynamicznym obiekcie Lightbox 2.0 i podłączyć ją pod odpowiednią pozycję Menu (Galeria) naszego serwisu WWW. 9