HTML 5 i CSS 3 - rewolucja sieciowa


HTML 5 w akcji

html5rocks.com

html5rocks.com

Serwis przygotowany przez Google'a z przykładami wykorzystania HTML-a 5 i dokumentacją poświęconą nowemu standardowi.

thewildernessdowntown.com

thewildernessdowntown.com

Interaktywny teledysk wykonany przez inżynierów Google'a wspólnie z wielokrotnie nagradzanym zespołem Arcade Fire. Działa tylko w przeglądarce Chrome.

20thingsilearned.com

20thingsilearned.com

Witryna z animowaną książką. Całość przypomina animacje wykonane we Flashu, z tą różnicą że tutaj zastosowano sam HTML.

HTML5 Labs

HTML5 Labs

Własną witrynę poświęconą nowej wersji HTML-a przygotował także Microsoft. Zawarte tutaj przykłady przeznaczone są przede wszystkim dla osób zajmujących się programowaniem.

Nowości w HTML-u 5 - nowe znaczniki

Najważniejszą nowością w piątej wersji HTML-a jest zestaw nowych znaczników, dzięki którym można dokładniej opisać zawartość dokumentu, jakim jest strona WWW. Do tej pory podział miał charakter techniczny i obejmował np. kontener, tytuł, śródtytuły, czy akapity z tekstem, ale bez określania typu zawartości. Od teraz będzie możliwe zdefiniowanie każdego charakterystycznego elementu strony, tak aby witryny mogły być lepiej rozbierane na czynniki pierwsze przez roboty wyszukiwarek oraz inne aplikacje. Poprawi to obieg informacji w Internecie.

W praktyce wygląda to tak, że oprócz standardowego tagu <div> dla bloków z treścią będzie możliwe użycie tagu <header> lub <footer>, odpowiednio dla nagłówka lub stopki strony. Inne elementy to m.in. <nav> (odpowiada za blok nawigacyjny), <article> (wpis w blogu bądź artykuł na stronie serwisu informacyjnego), czy <figcaption> (cytat). Poza tagami określającymi strukturę dokumentu opracowano także tagi odpowiadające za elementy aplikacji. Przykładowo tag <time> wskazuje datę, a <progress> odpowiada za wyświetlanie informacji o postępie operacji, np. pobierania pliku.

Zyskały też formularze, które rozbudowano o nowe typy pól edycyjnych. Są to m.in. numer telefonu, adres URL, adres e-mail, data, miesiąc, numer oraz kolor. Ułatwia to tworzenie formularzy na stronie oraz weryfikację wprowadzanych przez użytkowników danych - przeglądarka zadba teraz sama o to, aby internauci nie wpisywali informacji które nie pasują do schematu (np. niepoprawnych dat). Wcześniej wymagało to dodatkowej pracy ze strony webmastera.

Natywna obsługa wideo

HTML 5 wprowadza również tak długo wyczekiwaną obsługę multimediów. Dzięki zaprezentowaniu znacznika <video> możliwe jest osadzanie na stronach filmów wideo bez konieczności korzystania z flashowych odtwarzaczy. Nie obyło się jednak bez sporów.

Poszło o wybór kodeka używanego do odtwarzania wideo z użyciem HTML 5. Sprawa była poważna, ponieważ kodek dla wideo jest czymś równie istotnym co metoda kompresji obrazu dla plików graficznych. I tu i tam dostępnych jest wiele technologii, z których część bazuje na chronionych patentach, nawet jeżeli są w powszechnym użyciu. Tymczasem aby móc w ogóle odtwarzać wideo w HTML 5, przeglądarka musi mieć wbudowany odpowiedni kodek wideo.

Obecnie w świecie sieciowego wideo rządzi niepodzielnie kodek H.264, stosowany także na nośnikach Blu-ray. Dzięki niemu kilkuminutowe nagrania w jakości HD nie zajmują kilkuset, a ledwie kilkadziesiąt megabajtów. Z powodzeniem korzystają z niego największe serwisy wideo, na czele z YouTubem i Vimeo. Jest on jednak oprogramowaniem zamkniętym, a patentami na niego zarządza amerykańska firma MPEG LA. Początkowo ogłosiła ona, że zezwala na bezpłatne wykorzystanie kodeka H.264 do końca 2010 r., aby potem przedłużyć okres ochronny do końca 2015 r. Eksperci wskazywali, że ta niepewność co do przyszłości formatu może zakończyć się wielomilionowymi odszkodowaniami wypłacanymi przez producentów przeglądarek internetowych i największe portale internetowe.

Mimo to kodek H.264 został dosyć szybko wbudowany w przeglądarki Google Chrome, Apple Safari oraz Internet Explorer 9. Wyłamały się Opera oraz Firefox, których producenci stawiali na open source'owy kodek Ogg Theora, charakteryzujący się jednak gorszą jakością obrazu.

Wszystko zmieniło się w połowie zeszłego roku, gdy Google ogłosił start projektu WebM mającego za cel zapewnienie dostępu do wolnych technologii przesyłu mediów w Sieci. W ramach projektu udostępniono format wideo WebM, zoptymalizowany pod kątem zastosowań internetowych. Można z niego korzystać bezpłatnie, nie jest on także obciążony żadnymi patentami. WebM opiera się na kodeku VP8, będącym dziełem firmy On2, którą Google przejął w 2010 r. Pod względem jakości jest on zbliżony do możliwości H.264.

Już teraz wiadomo, że nowy format obsługują lub będą obsługiwać Firefox 4, Google Chrome, Opera oraz Internet Explorer 9. Niezdecydowane pozostaje Apple z przeglądarką Safari, najmocniej optujące do tej pory za H.264. Możliwe jednak, że to się zmieni, ponieważ na początku tego roku Google podjął radykalną decyzję o rezygnacji z obsługi H.264 w kolejnych wersjach Chrome'a. To oznacza, że kodek H.264 będzie za jakiś czas wspierany wyłącznie przez Internet Explorera oraz Apple Safari, co nie pozostanie bez wpływu na jego popularność.

Wniosek z tego taki, że mimo iż wybór kodeka nie został odgórnie określony w specyfikacji HTML-a 5, i tak prawdopodobnie nieoficjalnym formatem wideo dla nowego standardu zostanie WebM.