HTML 5: Niech serwer przemówi do przeglądarki

Obecnie na rynku reklamy, marketingu i szeroko pojętego IT coraz częściej słyszy się o HTML5. Nowo powstała technologia zgromadziła już spore grono zwolenników, jak i przeciwników.

Praktycznie każda przeglądarka internetowa, która liczy się w tej
chwili na rynku (od najnowszej wersji Internet Explorer 9, Mozilla
Firefox 4, Opera, Google Chrome czy Safari), zarówno pod względem ilości
użytkowników, jak i ich przychylności, coraz mocniej wspiera nowy
(rozwijany już od 2 lat) projekt W3C oraz WHATWG.

Technologie internetowe wciąż się rozwijają i unowocześniają, kolejna
rewolucja nie powinna być więc zaskoczeniem. Kiedy w 1990 roku została
uruchomiona sieć Web, nikt nie przypuszczał, że aplikacje internetowe
będą wielkimi animacjami w Action Script 3.0 Adobe Flasha czy też zaczną
rozrastać się do rozmiarów Facebooka.

HTML5 nie różni się diametralnie od swoich poprzedników – posiada
kompatybilność wsteczną, dzięki czemu rozwija skrzydła, w
przeciwieństwie do XHTML 2.0, który został wycofany w 2009 roku m.in.
dlatego, że odrzucał poprzednie wersje, przez co wymagał nauki nowego
języka.

Piąta wersja wprowadza kilkadziesiąt nowych tagów i elementów, które
uporządkowują m.in. składnię pisania kodu źródłowego aplikacji webowych,
począwszy od jednego doctype <!doctype html>, przechodząc przez element <header></header> – określający miejsce nagłówka witryny, poprzez element <nav></nav>- który pokazuje nam, gdzie powinna leżeć nawigacja, jak i specjalne miejsce dla głównej treści <section></section>.

Grono osób związanych z tworzeniem stron WWW najbardziej cieszyć może
walidacja formularzy jako integralna część języka, bez zbędnych
skryptów JavaScript. Aby sprawdzać poprawność adresu e-mail, wystarczy
dodać jeden z argumentów tagu <input> jak np. mail.

Obecnie zarówno w HTML, jak i XHTML całą treść witryny umieszczamy w znacznikach <body></body>.

Kwestie nawigacji, dodatkowych elementów graficznych oraz audio i
wideo pozostawione są dodatkowym znacznikom które mogą uniwersalnie
służyć większości operacji.

Przykładowo:

  • nawigacja może być listą – <ul><li>Txt</li></ul>,
  • wideo może być Playerem Flash <embed>.

Jednakże tych samych znaczników możemy użyć do wyświetlenia animacji bądź też zwykłej listy.

Innowacje

Do tej pory kwestia obsługi mediów takich, jak audio i wideo, w
większości przypadków wymagała stosowania dodatkowych odtwarzaczy lub
wtyczek. W celu zapisywania informacji bezpośrednio i na stałe po
stronie użytkownika czy przeglądarki konieczne było tworzenie plików
cookies, które nie były zbyt przyjemne podczas tworzenia nawet małej
bazy danych.

Funkcje, które znamy z innych programów, polegające na przeciąganiu i
upuszczaniu plików (drag’n’drop) na okno programu, w przypadku
przeglądarki skutkowały wyświetleniem tego pliku w oknie. Natomiast
lokalizacja internauty odbywała się poprzez sprawdzenie w zewnętrznej
bazie danych adresu IP użytkownika. „Rysowanie” w przeglądarce za pomocą
HTML było całkowicie niemożliwe. Dziś język HTML5 ułatwia pracę
front-end developerów przy większości wyżej wymienionych kwestii.

Jeśli chcemy w standardzie HTML5 dodać odtwarzacz, w którym zobaczymy
nasz film, po prostu używamy specjalnego znacznika (tagu) – <video src=”movie.ogg” controls=”controls”></video>.
Wyświetlenie odtwarzacza, który będzie posiadał kontrolki danej
przeglądarki, jest banalnie proste. Problemy zaczynają się przy
pogodzeniu formatów plików z przeglądarkami i naszymi końcowymi
odbiorcami. Aby film zadziałał we wszystkich obecnie wyposażonych w
obsługę HTML5 przeglądarkach, musimy go udostępnić w standardach H.264,
AAC, MP4 lub Theora, Vorbis, Ogg. Podobna sytuacja występuje w przypadku
obsługi odtwarzacza dźwięku, gdzie formaty standardowe różnią się w
zależności od przeglądarki. Przykładowo: <audio src=”audio.ogg” controls=”controls”></audio>.

Kolejną, nową opcją jest tzw. local storage, czyli lokalna baza
danych przechowywana u użytkownika, dzięki której można tworzyć
aplikacje offlinowe zapisujące informacje i odczytujące je w
przeglądarce. Google Mail pozwala m.in na obsługę drag’n’drop z HTML5 w
przypadku dodawania załączników – wystarczy przeciągnąć plik
bezpośrednio na okno przeglądarki.

Geolokalizacja aktualnie wykorzystywana może być zarówno w
przeglądarkach desktopowych, jak i mobilnych opartych o WebKit, jednakże
w urządzeniach mobilnych z wbudowanym urządzeniem GPS jesteśmy w stanie
dokładniej określić położenie użytkownika. Oczywiście korzystając tylko
i wyłącznie z HTML5.

Canvas, czyli płótno, po części oddaje sens i funkcję kolejnego
znacznika HTML5. Umożliwia on rysowanie grafiki bezpośrednio w
przeglądarce.

Przyszłość czy teraźniejszość?

Powstaje pytanie, kiedy wszystkie te opisywane nowinki pojawią się w
naszych domach, komputerach, telefonach komórkowych i staną się
standardem globalnym. Według organizacji W3C będzie to w 2022 roku, w
praktyce już dziś możemy korzystać z wielu elementów HTML5.

Bazując na największych gigantach internetu, takich jak Google,
Gmail czy Youtube, gdzie możemy oglądać na co dzień HTML5,  twórcach
przeglądarek, którzy wciąż dążą do perfekcji, a kończąc na coraz
większej ilości serwisów, które starają się opierać na nowych
standardach – możemy stanowczo stwierdzić, że HTML5 zamieszkał już na
stałe w świecie internetu.

SymetriaRafał
Pieszczek, programista PHP, Symetria
(www.symetria.pl)

Źródła:

Anna Wasilewska-Śpioch