Elektronika 2012-04 I.pdf - Instytut Systemów Elektronicznych ...

H.264 wspieranego przez Microsoft. Format H.264 nie jest w pełnibezpłatny i nie znajduje poparcia Google. W tabeli pominiętezostały formaty, które mogą być odtwarzane przez przeglądarkipo zainstalowaniu wtyczek (np. WebM w Internet 9, lub H.264w Chrome).Rozwiązaniem problemu braku jednolitych kodeków dla wideoi audio jest przygotowywanie plików wideo i audio w formatachwspieranych przez przeglądarki. Trzeba skonstatować, żeHTML5 nie ułatwia producentom procesu przygotowania wideoi audio. Natomiast upraszcza użytkownikom końcowym korzystanieze stron utworzonych w HTML5 zawierających wideo lubaudio, ponieważ HTML5, bez względu na urządzenie dostępowejest dla nich transparentny pod warunkiem, że zostaną uprzedniozrobione wersje plików wideo/audio i podane jako wartości atrybutówsource (rys. 3) tagu video i/lub audio.Grafika rastrowaTag canvas definiuje kontener grafiki – jest to prostokątny obszargrafiki rastrowej, w którym można rysować za pomocą JavaScript.Funkcjonalność oferowana przez canvas:• rysowanie prostokątów i ścieżek (linie, łuki, krzywe Beziera lubkrzywe drugiego stopnia),• wypełnianie figur kolorem (przezroczystość), wzorem lub gradientem(liniowym lub radialnym),• rysowanie napisów (lider),• przekształcenia (przesuwanie, skalowanie, obracanie, przekrzywianieitp.),• osadzanie obrazów rastrowych (PNG, JPEG, GIF),• cieniowanie,• style kompozycji określające, jak nowe treści są rysowane naistniejących składnikach canvas.Typowe zastosowania canvas:♦ grafy i wykresy,♦ gry,♦ aplikacje.Tag canvas wprowadza wiele możliwości, wymaga jednakprogramowania w JScript i dla edukatorów, aby mogli bezpośredniowykorzystywać ten silnik animacji jest trudny, użytkownikmusi operować na zbyt niskim poziomie technicznym, aby osiągaćefekty. Powstające biblioteki JSscript, np. LiquidCanvas czyRgraph, w ramach modelu DOM ułatwiają pracę, dają już gotowefunkcje rysowania, animowania grafiki i inne funkcje. Przykłademjeszcze jednej biblioteki jest slider.js. Jest to biblioteka jQuery,wykorzystująca style CSS Transition i tag canvas, przy pomocyktórej budowane są bardzo popularne obecnie „slajdery” – silnikido przeglądania obrazów/slajdów i nawigacji po nich. Przykład„slajdera” przedstawia rys. 6. Slidery służące do prezentowaniakolejnych obrazów, treści mają dostępne elementy nawigacji, takiejak wybór pozycji lub przyciski next/prev, przycisk pause orazbardzo pożyteczny hot spot – link do realizacji skoku na zewnątrz„slajdera”. Ten prosty stosunkowo silnik może być bardzo użytecznydla celów przekazywania treści szkoleniowych. Na przykładkolejne odsłony (slajdy) „slajdera” prezentują podstawowetreści, zaś ich rozszerzenie lub pomoce wykonywane mogą byćpoprzez skoki na zewnątrz. Przykłady „slajderów” i w różny sposóbzrealizowanych dla nich elementów interaktywnych przedstawiająrys. 7 i 8.„Slajdery” są analogiem interaktywnych wideo, np. nagranychz prezentacji Power Point i opatrzonych napisami i interaktywnymielementami Flasha lub XML z JScriptem (w zależności odużytych narzędzi produkcyjnych). Mają tę przewagę, że są transplatformowe,trans-przeglądarkowe.44Rys. 6. Przykład „slajdera” w momencie wykonywania przejścia miedzyslajdami (według CSS Transitions). Strzałki oznaczone przez „1”wskazują elementy nawigacji, strzałka na górze wskazuje link skokudo zewnętrznego URL [12]Fig. 6. Slider in the moment of the transition between slides (by CSSTransitions). Arrows marked by “1” indicates the navigation items,the arrow on the top indicates the link of the jump to an external URLRys. 7. Slider z naniesionym tekstem na grafikę, z przyciskami nawigacjii pauzy [12]Fig. 7. Slider with text to graphics, the navigation buttons and presspauseRys. 8. Przykład „slajdera” z zaznaczonymi elementami interaktywnymi,w tym menu (z lewej strony) [12]Fig. 8. Slider with marked interactive elements such as menu (left side)Elektronika 4/2012