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:

• animacja
• gra
• kolejna gra
• aplikacja

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

• HTML5 – rewolucja czy ewolucja? cz. 3
• HTML5 – rewolucja czy ewolucja? cz. 1

Print PDF