• Artykuł

          

Przegląd nowości HTML5 w Internet Explorer 9  Udostępnij na: Facebook

Autor: Rafał Garbowski

Opublikowano: 2011-02-09

Wprowadzenie

Rozwój aplikacji internetowych sprawił, że dzisiejsze standardy języka HTML stały się przestarzałe i niewygodne dla deweloperów. Przyszłość Internetu, dostępna już dzisiaj, to HTML 5, który jest rozwinięciem języka HTML 4.01 i XHTML 1.1 (XHTML5).

HTML5, ze względu na budowę opartą na XML, jest przejrzysty oraz posiada większe wymogi co do poprawności dokumentu. Dzięki określeniu sposobu obsługi błędów jest kompatybilny wstecz, a co więcej – rozwiązuje konflikty w wyświetlaniu stron HTML w różnych przeglądarkach.

Już Internet Explorer 8 obsługiwał niektóre cechy HTML5,  jednakże Internet Explorer 9 obsługuje większość nowości HTML5:

  • znacznik <canvas>
  • znaczniki <audio> i <video>
  • usprawnienie parsowania HTML
  • SVG

Aby Internet Explorer 9 obsługiwał naszą stronę w trybie HTML5, niezbędne jest dodanie elementu <doctype! html> na początku dokumentu.

Przejdźmy teraz do omówienia poszczególnych nowości języka HTML5 w Internet Explorer 9.

Canvas – rysowanie na stronie

Nowością w Internet Explorer 9 jest znacznik <canvas>, który umożliwia renderowanie grafiki na stronach WWW. Na razie Internet Explorer 9 wspiera tylko rysowanie w 2D.

Dzięki canvas możemy rysować grafikę w czasie rzeczywistym na stronach sieci Web, używając kodu – np. JavaScript.  W canvas z łatwością narysujemy prostokąty, ścieżki, linie, krzywe. Canvas możemy również użyć do wyświetlania tekstu, obrazków, filmów,  tworzenia animacji oraz interakcji z użytkownikiem. Dodatkowo możemy wykonywać różnego rodzaju przekształcenia: translację, rotację, skalowanie, transformację macierzy oraz nakładanie maski.

Canvas w Internet Explorer 9,  jak i inne elementy graficzne, jest akcelerowany sprzętowo. Komendy rysowania są wysyłane bezpośrednio do karty graficznej. Niewątpliwą zaletą elementu <canvas> jest to, że nie wymaga on żadnych dodatkowych pluginów, gdyż całe API zaimplementowane jest w przeglądarce. 

Znacznik <canvas> – oprócz atrybutu „id”, który umożliwia odwołanie w kodzie JavaScript – posiada również atrybuty „width” i „height”, które definiują rozmiary płótna do rysowania:

<canvas id="mycanvas" width="100" height="100">Canvas nie jest obsługiwane</canvas>

Przed przystąpieniem do narysowania czegokolwiek należy upewnić się, że przeglądarka klienta obsługuje element <canvas>. W HTML5 nie sprawdzamy wsparcia dla konkretnych przeglądarek, lecz rozwiązujemy ten problem poprzez detekcję obsługiwanych elementów języka HTML. Do znacznika <canvas> odwołujemy się za pośrednictwem atrybutu „id”.  Następnie sprawdzamy, czy znacznik <canvas> jest obsługiwany za pomocą wywołania metody getContext():

var canvas  = document.getElementById("mycanvas");



if (canvas && canvas.getContext) {  



   var ctx = canvas.getContext('2d');  



   // jeśli przeglądarka obsługuje <canvas>



} else {  



   // jeśli przeglądarka nie obsługuje <canvas>



}

Prostym przykładem jest narysowanie prostokąta. Możemy do tego celu użyć dwóch funkcji: wypełnienia kolorem – fillRect, i narysowania krawędzi – strokeRect. Obydwie metody jako dwa pierwsze parametry przyjmują współrzędne punktu początkowego, a jako dwa kolejne – szerokość i wysokość. Kolor pędzla ustawiamy w fillStyle i strokeStyle.

ctx.fillStyle = 'red';



ctx.fillRect(50,50,50,50);



ctx.strokeStyle = 'black';



ctx.strokeRect(40,40,70,70);

Elementy <audio> i <video>

Nowością jest także wsparcie dla łatwego umieszczania muzyki i filmów na stronach HTML z wykorzystaniem znaczników <audio> i <video>.  Aby zamieścić film na naszej stronie, w atrybucie „src” podajemy ścieżkę do pliku. Ustalamy również wysokość i szerokość wyświetlanego odtwarzacza. We właściwości „poster” podajemy ścieżkę do obrazka, który będzie wyświetlany w trakcie ładowania filmu. Możemy ustawić również opcjonalne atrybuty:

  • autoplay – automatyczne odtwarzanie w trakcie ładowania,
  • controls – wyświetlenie panelu sterowania wideo przez użytkownika,
  • loop – zapętlanie się odtwarzania wideo,
  • autobuffer  – wideo zostanie automatycznie buforowane,
  • preload – wideo zostanie załadowane wraz z załadowaniem strony:
<video src="video.mp4" height="500" width="600" poster="frame.png"



    autoplay controls loop>



    Znacznik <video> nie jest obsługiwany!



</video>

Elementy audio są zdefiniowane podobnie do video, ale z wyłączeniem szerokości i wysokości  oraz atrybutu „poster”. Internet Explorer 9 wspiera także znaczniki <video> i <audio> element z wieloma źródłami, gdyż nie wszystkie przeglądarki obsługują te same formaty plików audio i video.

<audio controls>



    <source src="audio.ogg" type="audio/ogg" />



    <source src="audio.wav" type="audio/wav" />



    Znacznik <audio> nie jest obsługiwany!



</audio>

HTML5 nie tylko definiuje znacznik <video>, ale również zapewnia szerokie wsparcie DOM API. Dzięki temu w kodzie JavaScript można m.in. ustalić wspierane przez przeglądarkę formaty video, odtworzyć i zatrzymać film, wyłączyć dźwięk, jak również sprawdzić postęp ładowania wideo.

Należy też pamiętać, że nie każdy kodek jest darmowy, więc nie wszystkie są dostępne w każdej przeglądarce.

Internet Explorer 9 wspiera następujące formaty:

  • video:   MP4, H.264,
  • audio: AAC, MP3.

Nowe znaczniki semantyczne w HTML5

Znacznik semantyczny to taki znacznik, którego nazwa opisuje jego zawartość i nie posiada szczególnych atrybutów. Elementy semantyczne umożliwiają intuicyjny podział dokumentu i mogą być szczególnie pomocne dla wyszukiwarek.

Znaczniki dziedziczą po HTMLElement i mogą być dekorowane z użyciem stylów CSS. Obsługiwane są następujące elementy semantyczne:

  • section – ogólna sekcja dokumentu,
  • nav  – sekcja przeznaczona na nawigację,
  • article – samodzielna część zawartości strony, np. post lub artykuł,
  • aside – zawartość nieznacznie powiązana z resztą dokumentu,
  • hgroup – wprowadzenie,
  • header – nagłówek,
  • **footer  **– stopka,
  • figure – używany jako połączenie nagłówka z multimediami,
  • mark – wyróżniony tekst.

HTML5 wprowadza też użyteczne nowości w formularzach. Nowe semantyczne typy znacznika <input> to: color, date, datetime, email, month, number, range, search, tel, time, url, week.

Usprawnienie parsowania HTML

Parsowanie HTML w Internet Explorer 9 również zostało ulepszone, aby lepiej oddawać specyfikację HTML5:  

  • Wspierane jest umieszczanie SVG bezpośrednio w kodzie HTML.

  • Internet Explorer 9 parsuje dokumenty z „mime-type” ustawionym na „application/xhtml+xml” jako XHTML.

  • Internet Explorer 9, w przeciwieństwie do swojego poprzednika, pozwala na używanie własnych znaczników i przypisywania im stylów CSS:

    <powitanie>Hello!</powitanie>

  • Został również rozwiązany – zgodnie ze specyfikacją HTML5 – problem niezamierzonego efektu wykonywania skryptów na nakładających się znacznikach:

    <i> Ala <b> ma </i> kota. </b>

  • Bloki kodu JavaScript i stylów CSS są traktowane przez DOM jako węzły tekstu, co umożliwia dostęp do kodu źródłowego za pomocą DOM.

Scalable Vector Graphics (SVG)

SVG jest formatem grafiki wektorowej rozwijanym od 1999 roku przez W3C. W plikach formatu SVG da się również przechowywać grafikę rastrową i tekst.

SVG oferuje większe możliwości niż canvas, pozwalając na tworzenie zaawansowanych graficznie aplikacji internetowych. Nowością w Internet Explorer 9 jest wsparcie dla gradientów, wzorców, wycinków, maskowania.

Zalety SVG

W porównaniu z innymi formatami, SVG ma wiele zalet. Oto najważniejsze z nich:

  • Grafika SVG w Internet Explorer 9 jest w pełni akcelerowana sprzętowo, co zapewnia płynność jej przeglądania.
  • Atutem SVG jest też to, że nie wymaga on żadnych dodatkowych wtyczek. Nie trzeba instalować dodatków, więc jest to wygodne dla użytkowników.
  • SVG jest formatem bazującym na XML, dzięki czemu można na nim nawigować i używać JavaScript. Jest skalowalny i używany wszędzie tam, gdzie detal ma większe znaczenie niż całość obrazka. Czyni go to idealnym do zastosowania przy prezentacji map, wykresów i innych obrazów. Nie musimy już tworzyć grafiki w różnych rozdzielczościach, a przybliżanie mapy nie będzie stanowić problemu.
  • Budowa XML sprawia, że SVG jest skomponowany z elementów i atrybutów łatwych do analizowania i czytania. Tekst zapisany w SVG jest jak tekst w znacznikach. Format SVG umożliwia przeszukiwanie dokumentu w poszukiwaniu tekstu, co nie jest możliwe w popularnych formatach GIF i PNG. Indeksowanie w wyszukiwarkach jest przez to szybsze i skuteczniejsze.
  • Grafikę SVG można lepiej i bardziej szczegółowo opisywać, gdyż wystarczy dodać odpowiedni węzeł. W dokumentach rastrowych można dodać jedynie tytuł i opis.
  • Składni SVG można się bez trudu nauczyć, dzięki podobieństwu do  HTML. Z łatwością można podejrzeć kod strony, używając np. narzędzi do debugowania dołączonych w Internet Explorer 9.
  • Ze względu na powtarzanie się węzłów możliwa jest kompresja.
  • Internet Explorer 9 oferuje integrację SVG z kodem HTML, co ulepsza model programowania.  Wsparcie ze strony DOM umożliwia wykonywanie skryptów i tym samym manipulowanie SVG za pomocą JavaScript. Obrazek SVG może być generowany dynamicznie na serwerze. Na SVG można wykonywać zdarzenia, co pozwala na interakcję.

Jak utworzyć obrazek SVG?

Dzięki temu, że SVG jest zrozumiały dla człowieka, może być edytowany zarówno za pomocą notatnika, jak i programów graficznych.

Do tworzenia grafiki w formacie SVG można używać takich narzędzi graficznych, jak: Microsoft Visio, Adobe Illustrator czy darmowy Inkscape.

SVG w Internet Explorer 9 jest traktowane jak obrazek. Możliwy jest zapis do .svg, .png lub .bmp, skopiowane do Worda lub PowerPointa.

Jak umieścić obrazek SVG na stronie?

Możemy dodać SVG do naszej strony na kilka sposobów. Jednym z nich jest umieszczenie referencji do pliku, wykorzystując znaczniki <embed>, <object>, <iframe>, <img> lub w CSS jako „background-image” lub „list-style-image”. Przykład:

<img src="obrazek.svg" />

Jeśli chcemy bardziej zintegrować SVG ze stroną,  musimy to zrobić wewnątrz kodu HTML. Pozwoli to nam na używanie stylów CSS  dla obrazków SVG. Możliwe będą również różnego rodzaju operacje na SVG z wykorzystaniem JavaScript. Poniżej prosty przykład z narysowaniem prostokąta.

<svg xmlns="http://www.w3.org/2000/svg">



    <rect width="50" height="50" fill="red" />



</svg>

W SVG mamy też większe możliwości dekoracji tekstu, niż w HTML. Do poprawy prezentacji tekstu można użyć gradientów, wzorców, obramowania. Tekst w SVG, w przeciwieństwie do obrazków rastrowych, jest bardziej elastyczny do edytowania. W poniższym przykładzie kolor tekstu ustawiany jest za pośrednictwem CSS:

<style type="text/css">       



    text



    {



        fill: red;



    }



</style>



...



<text x="50" y="50">



    Ala ma kota.



</text>

Podsumowanie

Nowości HTML5 w Internet Explorer 9 wprawiają w zachwyt nie tylko użytkowników, lecz również deweloperów. Od teraz użytkownicy mogą nawigować po pięknych i bogatych w grafikę stronach z zaawansowaną animacją i interakcją. Z punktu widzenia dewelopera, HTML5 to potężne narzędzie do tworzenia prostych stron internetowych, aplikacji biznesowych, gier i animacji oraz przyszłość w rozwoju technologii internetowych.

Należy też pamiętać, że specyfikacja HTML5 jest ciągle rozwijana. Jednak dzięki wsparciu deweloperów i producentów przeglądarek, z technologii HTML5 możemy korzystać już dziś. Internet Explorer 9 jest jeszcze w fazie beta, więc zostaną w nim zaimplementowane jeszcze inne funkcjonalności HTML5.

Internet Explorer 9 doskonale radzi sobie ze standardami HTML5. Jeśli chcemy, aby nasza strona uwzględniała przeglądarki nieobsługujące HTML5, to wygodnie jest użyć z JavaScript biblioteki Modernizer, która umożliwia łatwe wykrycie wsparcia dla HTML5.