HTML5 – rewolucja czy ewolucja? cz. 2
W ostatnich latach nastąpił gwałtowny rozwój stron www – to już nie tylko statyczne witryny z tekstem, ale w pełni multimedialne treści wykorzystujące wideo i dźwięk. HTML5 wprowadza możliwość osadzania plików multimedialnych za pomocą samego HTML. Nie będą już do tego wymagane technologie takie jak Flash.
Dźwięk i wideo
Obsługa dźwięku i wideo wymaga odpowiednich kodeków. Niestety, obecnie przeglądarki korzystają z różnych kodeków (póki co nie istnieje jeden standard dla stron www). Na stronach Wikipedii znajduje się lista używanych kodeków.
<video controls="controls" width="360" height="240" poster="obrazekNaStarcie.jpg">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
<source src="movie.ogv" type="video/ogg"> />
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4">
<param name="movie" value="player.swf?file=movie.mp4"> />
<a href="movie.mp4">Pobierz plik</a>
</object>
</video>
A tak osadza się plik audio w HTML5:
<audio controls="controls">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
<object type="application/x-shockwave-flash" data="player.swf?soundFile=audio.mp3">
<param name="movie" value="player.swf?soundFile=audio .mp3" />
<a href="audio.mp3">Pobierz plik</a>
</object>
</audio>
Umieszczając wewnątrz znacznik <object> zapewniamy odtworzenie pliku z wykorzystaniem technologii Flash, gdy przeglądarka nie obsługuje znaczników <video> i <audio>. Ponadto warto dodawać type MINE – dzięki temu przeglądarka wie, który plik jest w stanie obsłużyć.
A tak wygląda to w praktyce:
Canvas
Canvas jest zupełnie nowym elementem wprowadzonym w HTML5 – jest to prostokątny obszar grafiki 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 lub krzywe drugiego stopnia),
- wypełnianie figur kolorem (z kanałem alfa – przezroczystość), wzorem lub gradientem (liniowym lub radialnym)
- rysowanie napisów (lider)
- przekształcenia (przesuwanie, skalowanie, obracanie, przekrzywianie itp.)
- osadzanie obrazów rastrowych (PNG, JPEG, GIF)
- cieniowanie
- style kompozycji określające jak nowe treści są rysowane na istniejących składnikach canvas
Typowe zastosowania Canvas:
- grafy i wykresy
- gry
- aplikacje
Element Canvas wprowadza wiele możliwości, jednakże jest dość trudny w używaniu z racji jego niskopoziomowości. Na szczęście powstały biblioteki JS ułatwiające to (LiquidCanvas czy Rgraph).
Przykład użycia:
<canvas id="myCanvas" width="360" height="240">
Tekst wyświetlany gdy przeglądarka nie obsługuje canvas.
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "blue";
context.fillRect(50,25,150,100);
</script>
Canvas w praktyce:
Canvas może wprowadzić prawdziwą rewolucję w świecie technologii www. Pozwala tworzyć interaktywne aplikacje, które mogą z powodzeniem konkurować z odpowiednikami deskopowymi.
Zakończenie
Nowa wersja HTML wprowadza wiele nowości w korzystaniu z multimediów. Najbardziej istotną nowością wydaje się Canvas, który może zrewolucjonizować korzystanie z grafiki w aplikacjach www. W trzeciej, a zarazem ostatniej części omówię nowe sposoby przechowywania danych po stronie klienta.
Powiązane tematy
