HTML5 – rewolucja czy ewolucja? cz. 2 - lukasz

HTML5 – rewolucja czy ewolucja? cz. 2 - lukasz

Plik pobrano z www.lukasz-socha.pl
Tytuł: HTML5 – rewolucja czy ewolucja? cz. 2
Ostatnia aktualizacja: 3.09.2011
HTML5 – rewolucja czy ewolucja? cz. 2
Wstęp
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 znajduję się lista używanych kodeków.
Przykład osadzania pliku wideo:
<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ć.
Materiał przeznaczony tylko do własnego użytku. Publikacja na innych stronach wyłącznie za zgodą autora.
[email protected]
1/3
Plik pobrano z www.lukasz-socha.pl
Tytuł: HTML5 – rewolucja czy ewolucja? cz. 2
Ostatnia aktualizacja: 3.09.2011
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.
Materiał przeznaczony tylko do własnego użytku. Publikacja na innych stronach wyłącznie za zgodą autora.
[email protected]
2/3
Plik pobrano z www.lukasz-socha.pl
Tytuł: HTML5 – rewolucja czy ewolucja? cz. 2
Ostatnia aktualizacja: 3.09.2011
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.
Materiał przeznaczony tylko do własnego użytku. Publikacja na innych stronach wyłącznie za zgodą autora.
[email protected]
3/3