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

Rafał Pieszczek, Symetria.pl 31-05-2011, 18:24

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:


Komentarze
comments powered by Disqus
To warto przeczytać










  
znajdź w serwisie

RSS - Interwencje
RSS - Porady
Porady  
RSS - Listy
Listy  
Jak czytać DI?
Newsletter

Podaj teraz tylko e-mail!



RSS
Copyright © 1998-2017 by Dziennik Internautów Sp. z o.o. (GRUPA INFOR PL) Wszelkie prawa zastrzeżone.