HTML5: wszystko, co musisz wiedzieć o nowym standardzie opisu stron WWW

Ostatnio dużo mówi się o HTML5. Ale czym naprawdę to jest? Jakie technologie wchodzą w skład HTML5? Czego możemy spodziewać się po aplikacjach przyszłości, które wykorzystają ten standard? Ten artykuł wprowadzi cię w świat HTML5.

Spis treści

Nowe pola formularzy
Datalist
Keygen
Output
Inne pola
Nowe tagi
Renderowanie grafiki 2D
Obsługa wideo
Obsługa audio
Mechanizm przeciągnij i upuść
Budowanie aplikacji webowych
Obsługa geolokalizacji
Przechowywanie danych po stronie klienta
Długotrwałe procesy działające w tle
Komunikacja z serwerem w czasie rzeczywistym
Obsługa grafiki 3D
Podsumowanie

HTML5 to zbiór nowych tagów, które mają sprawić, że struktura strony internetowej będzie bardziej zrozumiała dla przeglądarek, oraz mechanizmy pozwalające na obsługę multimediów i innych nowych technologii.

HTML5 a przeglądarki

Przeglądarki już teraz obsługują część nowości z HTML5. W teście html5test najnowszy (w momencie pisania tego artykułu) Firefox zyskał 298 punktów (i 8 dodatkowych). Ty też możesz sprawdzić, jak bardzo Twoja przeglądarka jest zgodna z nowym standardem, w którym, jeśli wierzyć opiniom niektórych deweloperów, będzie rozwijania dalej sieć WWW. Na stronie html5test.com zobaczysz, jak inne przeglądarki radzą sobie z HTML5 (http://html5test.com/).

Nowe pola formularzy

Od dawna, budując formularze webowe, zazwyczaj dodajemy ciągle te same elementy: pole na liczbę, adres e-mail albo datę. Za każdym razem należy zaimportować odpowiednią bibliotekę obsługującą popularne pola. Proces ten jest na tyle żmudny i powtarzalny, że powstały nawet kreatory formularzy online oferujące gotowe komponenty (http://webhosting.pl/HTMLForm.test.kreatora.formularzy.HTML).

HTML5 definiuje nowe typy pól formularzy. Powstały one w wyniku obserwacji, jakie dane najczęściej podajemy w formularzach. W efekcie nie będą już potrzebne żadne dodatkowe biblioteki i wystarczy odpowiednio zdefiniowany tag, aby pojawił się kalendarz wyboru dnia albo koloru.

Datalist

Tag <datalist> jest odpowiednikiem starego dobrego wybieraka <select>, z tym że pozwala użytkownikowi wpisać też własną wartość, jeśli nie ma jej na liście.

Keygen

Kolejny ciekawy tag to <keygen>. Ma on w przyszłości zapewnić autoryzację użytkownika. Gdy dodamy takie pole do formularza, przeglądarka wygeneruje dwa klucze. Prywatny zostanie po stronie klienta, a drugi z formularzem trafi do serwera.

Tak jak certyfikat serwera pozwala zabezpieczyć się przed sytuacją, gdy ktoś podszywa się pod stronę banku, tak certyfikat klienta wygenerowany przez keygen pozwoli zapewnić bank, że nadal ma do czynienia z Tobą, a nie włamywaczem, który podszywając się pod Twoją przeglądarkę, stara się wydobyć z Twojego konta oszczędności na nowy wiatrak do karty graficznej.

Output

Pole <output> jest dosyć nietypowe. Możemy w nim umieścić jako wartość wynik różnych obliczeń wykonywanych na przykład na danych wprowadzonych w inne pola formularza. Nie jest to więc coś, czego nie mogliśmy robić wcześniej. Teraz jednak funkcję takiego pola możemy jasno zasygnalizować w kodzie HTML.

«poprzednia 1 2 3 4 ... 6 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

7 skomentuj »

Komentarze

#1 Bastian 2011-10-24 13:38:52 0
Czekamy zatem na ten kurs :)
IP: 213.238.96.[...] Mozilla/5.0 (Windows NT 6.0; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#2 HTD 2011-10-24 23:12:55 0
A tak na szybko, jeśli chodzi o formularze, jest wsparcie tego w przeglądarkach? To jest najważniejsza informacja i powinna pojawić się pogrubiona na samym wstępie artykułu. Chociaż po pobieżnym przeczytaniu odnoszę wrażenie, że to coś co dopiero kiedyś w nieokreślonej przyszłości być może będzie wdrażane. Z drugiej strony mowa o audio i wideo. A to przecież najmniejszy problem, serio, jest flash który na prawdę działa, i piszę to jako linuksiarz coraz więcej klikający ostatnio z Androida.

Za to formularze - to jest teraz zmora. Tak więc może ktoś sprawdzi co działa co nie i napisze. Albo sam sobie sprawdzę. Niby można wygooglać, ale już lepiej sprawdzić samemu. Ma się informację najbardziej bieżącą, ze świeżo zainstalowanych przeglądarek.
IP: 87.207.164.[...] Mozilla/5.0 (X11; Linux x86_64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1 Iceweasel/7.0.1
#3 mj. 2011-10-25 09:36:24 1
http://caniuse.com/#search=form validation
IP: 78.133.254.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1
#4 kowgli 2011-10-25 09:47:49 0
Wreszcie jakiś realny, pozbawiony hype'u tekst o HTML5. Widać wyraźnie, że żadna rewolucja to nie jest.

Głównym problemem w tworzeniu aplikacji przy pomocy HTML5 (pomijając słabe na razie wsparcie przeglądarek) to brak porządnych zestandaryzowanych bibliotek oraz słaby do dużych rozwiązań język JavaScript. Niestety ale napisanie dużej aplikacji w takim np. Silverlight (.NET) jest zwyczajnie dużo prostsze i mniej czasochłonne.
IP: 217.74.219.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1
#5 Splitfire^® 2011-10-28 08:35:18 0
Bardzo dobry Art! A co do HTML5... kupa ludzi tworzy peany w stosunku do czegoś, co właściwie... realnie nie istnieje... :D
IP: 78.133.207.[...] Mozilla/5.0 (Windows NT 5.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#6 pijany webdeveloper 2011-11-09 21:15:56 0
@HTD jeżeli chodzi o wideo i flasha to weź pod uwagę, że apple flasha niebardzo chce wspierać - dlatego m.in. youtube przechodzi powoli na html5. W ogóle HTML5 jest jeszcze nie sprecyzowane i dużo rzeczy może się zmienić. ostatnio chciałem wykorzystać znacznik color, ale okazało się że jest wspierany chyba tylko przez chrome(po części) i opere jak dobrze pamiętam i musiałem wykorzystać js.

@kowgil jak wyżej wspominałem HTML5 dopiero się rozwija, potrzeba jeszcze jemu trochę czasu. Nie wiem jakiego typu aplikacje tworzysz. Mi np. wystarcze ASP.NET MVC3 + to co oferuje w tej chwili HTML5 + js, chociaż wiem że w przyszłości, nie które rzeczy będę przepisywać z js na nowe wymysły HTML5. Mi to pasuje. Praca zapewniona dla mnie i wielu webdeveloperów
IP: 79.186.252.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.106 Safari/535.2
#7 hipertracker^® 2011-11-10 02:47:48 0
Wyniki testu http://html5test.com/ na Mac OS-X 10.7.2

Chromium 17.0.935.0 -> 343 pkt + 9 pkt bonus

Opera 12.00 alpha -> 336 pkt + 9 pkt bonus

Firefox 8.0 -> 314 pkt + 9 pkt bonus

Safari 5.1.1 -> 308 pkt + 8 pkt. bonus
IP: 109.77.137.[...] Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:8.0) Gecko/20100101 Firefox/8.0

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.