HTML5 to termin dla wielu kojarzący się z nową semantyką języka HTML. Tak. To prawda. HTML to też nowa semantyka, która została znacząco uproszczona, a także rozszerzona o wiele elementów, dzięki którym budujemy strukturę strony internetowej w sposób mający znaczenie między innymi dla robotów indeksujących wyszukiwarek, a także dla czytników ekranów dla osób niewidomych.
HTML5 to także wiele nowych elementów, które pozwalają tworzyć w prosty sposób zaawansowane interfejsy użytkownika, dzięki np. nowym elementom formularzy takim jak <input type="date">, a zatem bez użycia dodatkowych bibliotek JavaScript.
HTML5 to także łatwe osadzanie audio oraz video na stronie bez użycia zewnętrznych pluginów, takich jak Flash czy Microsoft Silverlight.
Ale czy HTML5 to tylko nowa semantyka i nowe znaczniki? Nie.
HTML5 to zbiór bardzo wielu dodatkowych technologii, które odkrywamy dopiero krok dalej - poprzez interfejsy programistyczne, które przeglądarki udostępniają nam poprzez język JavaScript.
Wspomniane interfejsy pozwalają nam tworzyć zaawansowane aplikacje internetowe, które coraz bardziej upodabniają się do tych znanych nam do niedawna wyłącznie na urządzeniach mobilnych lub desktopach. A zatem z pomocą HTML5 możemy tworzyć gry, odtwarzacze mediów, edytory zdjęć, aplikacje do przesyłania wiadomości, aplikacje świadome położenia użytkownika i wiele wiele innych.
Specyfikacji w ramach HTML5 jest mnóstwo. Rozwijane są zarówno pod okiem W3C jak i grupy WHATWG. Zanim przyjrzymy się krótko kilkunastu z nich, warto jeszcze zaznaczyć, że nie wszystkie specyfikacje są oficjalnie ujęte w specyfikacji HTML5. To znaczy, że np. Geolokalizacja nie jest ujęta jako HTML5, natomiast w branży jest również do HTML5 zaliczana. Dlatego przyjmiemy, że wszystkie nowe możliwości, które oferują nam przeglądarki internetowe, nazywać będziemy po prostu językiem HTML5, czyli przyszłością sieci.
Przyjrzyjmy się zatem po krótce kilkunastu ciekawszym specyfikacjom:
1. Nowe możliwości DOM
DOM, czyli Obiektowy Model Dokumentu udostępnia nam wiele metod do pracy z obiektami HTML z poziomu kodu JavaScript. Możemy do takich elementów się odwoływać, przypisywać im wartości czy też treść, dodawać lub usuwać klasy i atrybuty, a także dynamicznie tworzyć nowe elementy i wstawiać je na stronę.
W HTML5 dostajemy kilka ciekawych rozwiązań, które wspomniane wyżej czynności znacząco ułatwiają.
Są to m. in. nowe metody do wybierania konkretnych elementów z drzewa DOM, czyli document.querySelector oraz document.querySelectorAll, dzięki którym w bardzo łatwy sposób, znany wszystkim dobrze z biblioteki jQuery, wybierzemy stosowne elementy podając selektory CSS lub CSS3.
Do tej pory również nie najprostszym zadaniem było dodawanie i usuwanie klas z konkretnych elementów. Mam oczywiście na myśli robienie tego bez użycia dodatkowych bibliotek takich jak jQuery. Teraz i to zostało zmienione, dzięki obiektowi classList, który zawiera szereg metod, pozwalających wspomniane czynności wykonywać z łatwością.
Innym, oczywiście nie ostatnim, ciekawym rozwiązaniem jest tworzenie własnych atrybutów typu data-\*, w których do konkretnych elementów możemy przypisywać specyficzną treść lub wartości, a następnie odczytywać je w kodzie JS za pomocą udostępnionego obiektu dataset.
2. Forms API
To specyfikacja, która oferuje nam wspomniane we wstępie nowe elementy formularzy, ale także bardzo ciekawy interfejs zwany Constraint Validation API. Dzięki niemu możemy tworzyć zaawansowane walidatory formularzy w prostszy niż do tej pory sposób. Dotychczas, kiedy chcieliśmy zwalidować poprawność pola przeznaczonego do wpisywania adresu e-mail, niezbędne było do tego celu wyrażenie regularne.
Dzięki nowym metodom, nie jest to już konieczne. Wystarczy odwołać się do pola stworzonego za pomocą zapisu <input type="email">, następnie do jego właściwości validity.valid i już wiemy, czy zostało poprawnie uzupełnione, czy też nie.
Oczywiście Constraint Validation API to jeszcze bardzo wiele innych metod i właściwości, z których warto korzystać.
3. Geolokalizacja
To zbiór metod pozwalających z poziomu kodu JavaScript, na ustalenie fizycznej pozycji urządzenia, z którego użytkownik połączył się z naszą witryną lub aplikacją internetową.
Specyfikacja nie jest skomplikowana, natomiast pozwala tworzyć nowoczesne aplikacje, które mogą dostosowywać wyświetlaną treść adekwatnie do miejsca, w którym znajduje się w danym momencie użytkownik. Z uwagi na dokładność pobieranych danych, geolokalizacja jest przydatna głównie w przypadku urządzeń mobilnych.
4. Web Storage
Cookies, cookies, cookies. Do tej pory jedyna możliwość na przechowywanie danych po stronie klienta. I choć przeznaczenie ciasteczek mija się często z ich faktycznym użyciem, to jednak używane są do zapisywania niewielkich informacji na dysku użytkownika, by po powrocie na stronę, móc takiego użytkownika zindentyfikować.
Co jednak, jeśli nasza aplikacja wymaga zapisania jakichś danych, lecz nie ma żadnej potrzeby, by te dane z każdym żądaniem HTTP przesyłać na serwer? Wówczas bardzo pomocne okazują się nowe rozwiązania, dostępne dzięki HTML5.
Web Storage jest jednym z nich i pozwala (wg specyfikacji) na zapisanie do 5MB danych tekstowych dla jednej domeny na dysku użytkownika. Jeśli dane zostaną zapisane poprzez interfejs localStorage, to można je bez problemu odczytać po ponownym otwarciu okna przeglądarki. A zatem możemy personalizować wygląd witryny zapisując ustawienia użytkownika lub w przypadku gier online, zapisać ich stan.
5. Canvas
To interfejs z pozoru dość prosty, jednak przy bardziej zaawansowanych aplikacjach, wymagający wiedzy z programowego tworzenia grafiki 2D lub w przypadku WebGL - 3D.
Dzięki zestawowi metod, możemy rysować obiekty wprost w przeglądarce. Interfejs ten otwiera nowe możliwości przed twórcami gier lub np. aplikacji do edycji fotografii.
Warto zadać sobie tutaj pytanie: "czym różni się Canvas od SVG?". Choć obie te technologie pozwalają tworzyć obiekty geometryczne i w obu możemy stworzyć np. grę, to o obiektach tworzonych za pomocą SVG należy myśleć jak o obiektach HTML. To znaczy, że jeżeli dodamy na stronę kwadrat, to jest on fizycznym elementem HTML, widocznym w kodzie jako <rect width="300" height="300">. Do elementu takiego możemy przypisać zdarzenie kliknięcia lub ten element ze strony usunąć. W przypadku Canvas wszystko jest natomiast płaskie. To znaczy, że jeżeli narysujemy kwadrat, a następnie kolejny, to w efekcie po prostu zapełniliśmy siatkę pikseli odpowiednimi kolorami. Wszystko pozostaje płaskie i nie ma wspomnianej w SVG "fizyczności".
6. Audio i Video
Wspomniane również we wstępie, nowe możliwości osadzania plików dźwiękowych i filmów na stronie bez użycia dodatkowych pluginów takich jak np. Flash.
Z poziomu JavaScriptu jednak, to wiele metod, które pozwalają nam tworzyć m. in. odtwarzacze mediów. W kodzie HTML możemy stworzyć własny odtwarzacz filmów z potrzebnymi kontrolkami (play, pause, volume itd.), a w kodzie JavaScript przypisać im stosowne zdarzenia, które sterować będą poprawnym działaniem odtwarzacza.
To także możliwość odtwarzania dźwięków, np. w tworzonych grach.
7. File API
Operacje na plikach to do niedawna temat, który mogliśmy poprawnie obsłużyć głównie po stronie serwera. HTML5 wprowadza jednak wiele nowych możliwości pracy z plikami.
Specyfikacja File API zawiera kilka modułów: FileReader, FileWriter i FileSystem. Dwa ostatnie nie są jeszcze zbyt dobrze wspierane, natomiast pierwszy owszem.
Dzięki udostępnianym metodom, możemy po stronie klienta odczytywać informacje o plikach wybranych przez użytkownika, takie jak rozmiar, typ MIME, data ostatniej modyfikacji, a także treść. Treść plików możemy odczytywać na wiele sposobów np. w formacie Data URI, który pozwoli nam z wybranego zdjęcia utworzyć miniaturkę i wstawić ją bezpośrednio na stronę.
FileWriter w teorii ma pozwalać na tworzenie w locie i zapisywanie plików, a FileSystem na tworzenie w obrębie danej domeny systemu plików (katalogi, pliki), który będzie przydatny przy bardziej zaawansowanych aplikacjach.
8. Web Workers
To specyfikacja, dzięki której damy popalić przeglądarce, nie blokując w tym czasie głównego wątku strony.
Być może wiele razy przeglądając jakąś stronę doświadczyłeś jej "zamrożenia", które było spowodowane wykonującym się w tle skomplikowanym skryptem. W takich sytuacjach przeglądarka zawiesza cały interfejs użytkownika, gdyż czeka na ukończenie aktualnej operacji.
Wszystko to zmieniają Web Workery. Dzięki tej technologii, możemy zaawansowane obliczenia lub odbieranie danych z serwera przekazać do osobnego wątku, a gdy dane będą dla nas dostępne, przesłać je do głównego wątku i wyświetlić na stronie. Dzięki temu "ciężkie" operacje będą wykonywane asynchronicznie w tle, a aplikacja nie będzie blokowana.
9. Drag and Drop
To ciekawa specyfikacja, która miała swoje początki jeszcze za czasów prechistorycznego Internet Explorera. Nie jest niestety w 100% poprawnie wspierana we wszystkich przeglądarkach.
Umożliwia nam natomiast przeciąganie w obrębie strony internetowej elementów HTML i upuszczanie ich w innym miejscu. Do zdarzenia przeciągania elementu możemy przypisać dane, które następnie możemy odczytać nad elementem, nad którym został on upuszczony.
Wyobraźmy sobie np. sprawdzenie, czy użytkownik nie jest botem spamującym. Możemy stworzyć prostą aplikację, gdzie po lewej stronie będzie boks z rożnymi elementami, np. zwierzęta i rośliny, a po prawej pusty boks, do którego należy przenieść wszystkie zwierzęta. Za pomocą D'n'D będziemy mogli to zrobić bez problemu. Warto tutaj jednak zauważyć, że nie działa to w sposób, o jakim standardowo myślimy, tj. że po przeciągnięciu jakiegoś elementu i upuszczeniu go gdzieś indziej, znika on z pierwotnego miejsca. Tak się nie dzieje, po prostu przenosimy przypisane go niego dane. Natomiast po przeciągnięciu i poprawnym upuszczeniu takiego elementu gdzieś indziej, możemy z pomocą kodu JS usunąć go z pierwotnego miejsca i wstawić do docelowego.
Innym, bardziej popularnym zastosowaniem Drag and Drop jest przeciąganie plików z systemu użytkownika do przeglądarki. Możemy w ten sposób przeciągnąć z Pulpitu np. zdjęcia, a następnie przesłać je na serwer.
10. Web Sockets
To niesamowita technologia, która jest ogromnym ulepszeniem względem standardowego modelu żądań i odpowiedzi dostępnego w protokole HTTP.
Dzięki nowym protokołom ws:// oraz wss:// możemy tworzyć aplikacje internetowe czasu rzeczywistego. Po podłączeniu do serwera, nasz klient jest zapamiętywany i możemy swobodnie przesyłać informacje na trasie klient-serwer bez dodatkowych, niepotrzebnych nagłówków HTTP. Co ciekawe, dane mogą być przesyłane w dwóch kierunkach jednocześnie, a zatem od klienta do serwera i w tym samym czasie od serwera do klienta.
Dzięki Web Sockets, możemy porzucić wiele stosowanych przez lata praktyk opartych na AJAXie, takich jak polling czy long polling, które wysyłają co jakiś czas informacje do serwera, by sprawdzić, czy ten ma już dla nas odpowiedź. Jeśli odpowiedź jest pusta, ponawiają żądanie. W przypadku Web Sockets, to serwer decyduje, kiedy wyśle do nas wiadomość, a my po prostu na nią czekamy.
11. Browser History API
To prosta specyfikacja, dzięki której możemy programowo dodawać punkty do historii przeglądarki, a także przypisywać im i odczytywać z nich stosowne informacje.
Nie martw się, nie pozwala ona na odczytywanie historii przeglądanych stron, a po prostu na użycie przycisków Wstecz oraz Do przodu i wywoływania po ich kliknięciu akcji, które odczytają dodane wcześniej informacje i np. zaktualizują część strony, pobierając jej kod z serwera poprzez AJAX.
12. Offline AppCache
Dzięki tej specyfikacji przeniesiemy stworzone aplikacje działające online do offline.
Jeśli zatem użytkownik podczas korzystania z naszej witryny lub aplikacji utraci połączenie z serwerem lub nasz serwer mówiąc brzydko padnie, to możemy na takie zdarzenie zareagować. Dzięki Offline AppCache możemy nakazać przeglądarce użytkownika pobranie wybranych plików HTML, CSS, JavaScript i np. obrazków, a następnie wyświetlenie ich wtedy, gdy połączenie z serwerem nie jest możliwe.
Dzięki temu możemy przenosić aplikacje do offline i pozwolić im działać tak, jak podczas połączenia, lub wyświetlić je w nieco innej formie, gdy połączenie nie jest możliwe.
Inne specyfikacje w ramach HTML5:
- SVG
- WebGL
- GamePad API
- Content Editing
- Full Screen API
- WebRTC
- Notification API
- Battery Status
- i kilka innych
Podsumowanie
Jak zatem widzisz, HTML5 to nie tylko nowe znaczniki, ale przede wszystkim nowe możliwości programowania z użyciem języka JavaScript. Opisane wyżej technologie wyśmienicie się ze sobą łączą, pozwalając na tworzenie świetnych aplikacji po stronie klienta.
