HTML5 + CSS3 + JavaScript = Revolution!!!

HTML5 zna już chyba każdy czytelnik DP. A to ktoś kogoś posądza o sabotaż. A to ktoś idzie na wojnę z inną firmą z jego powodu. Ktoś zmienia swoje kluczowe strony aby do niego pasowały, lub kiedy indziej piekło zamarza a okrzyki niedowierzania obiegają świat.

Cały ten hałas, o standard który ma zacząć obowiązywać dopiero za 12 lat!! A prace nad nim zaczęły się 6 lat temu. Prawie dwadzieścia lat to więcej niż jedna Era w informatyce. A szczególnie poziom emocji oraz sporów na 12 lat przed wydaniem wersji ostatecznej jest bezprecedensowy.

Ale, czy my wiemy Co ma HTML5 do zaoferowania? Czy jego zalety przebiły się do zwykłego użytkownika w zgiełku korporacyjnych (i nie tylko) przepychanek?

Zanim wyliczę nowości HTML5 chcę pokazać parę już istniejących stron-aplikacji www zbudowanych na HTML5 w wersji roboczej dostępnej publicznie.

Prosta strona domowa. Polecam najechać na logo aby zobaczyć efekt cieni, oraz na link aby zobaczyć jak się zmienia. To wszystko bez pomocy obrazków, dzięki czemu strona ładuje się minimalnie szybciej ale i wyszukiwarka ma dostęp do całego tekstu zamieszczonego na stronie.

Stronka wygląda jak rozprawa naukowa napisana przy użyciu specjalnego edytora do składu tekstu lub jak obrazek. Ale to jest zwykły tekst! Czcionka jest wczytywana ze strony więc będzie ona wyglądała tak samo na każdym systemie, nie ważne czy jest zainstalowana czy nie!

Przewiń stronę na dół i podziwiaj efekty!

HTML5 Canvas czyli malowanie w HTML5.

Prosta aplikacja. Ruszaj kursorem i podziwiaj.

Galerie stronzgodnych z HTML5

Nie działa mi!!! Nie wszystkie przeglądarki są obecnie zdolne do interpretowania HTML5. Dlatego polecam tymczasową zmianę przeglądarki jeżeli efekty o których mówię nie działają na Twojej przeglądarce, tak aby wiedzieć co się traci. Ale również mam dobrą wiadomość. Wszystkie przeglądarki szybko zyskają zadowalający poziom wsparcia aby poprawnie wyświetlać obecnie istniejące strony HTML5. http://a.deveria.com/caniuse/

Sam HTML5 to nie jedyna nowość jaka nam się szykuje. Czeka nas też MathML oraz SVG osadzane bezpośrednio w plikach HTML5.

SVG to grafika wyświetlana na podstawie wzorów matematycznych, dzięki temu wygląda tak samo w dowolnej rozdzielczości. Podczas gdy "zwykła" grafika ma na sztywno zdefiniowany rozmiar przez co trzeba ją skalować gdy chcemy aby była wyświetlona w innej rozdzielczości, co odbija się na jakości. Dodatkowo HTML5 nakłada obowiązek obsługi animacji SVG na przeglądarki.

Mała prezentacja możliwości SVG w niby paincie.

MathML to z kolei standard zapisu wyrażeń matematycznych. Dzięki niemu nie trzeba będzie zamieszczać skomplikowanych wzorów w postaci obrazków, oraz będzie je można bezproblemowo kopiować do edytorów tekstu w celu dalszej edycji.

Inne nowości, które przyniesie nam HTML5 to:

+ możliwość zapisywania informacji po stronie przeglądarki czyli praca po zerwaniu internetu + możliwość odtwarzania audio i wideo bez dodatkowych pluginów + możliwość 'przeciągnij i upuść' np. dodawanie załączników czy upload przez upuszczanie plików + możliwość zarządzania historią odwiedzanych stron jak i zmian na stronie (typu stan z przed uzupełnienia formularza, zapobieganie ponownemu wysłaniu danych) +zapisywanie danych na stałe w bazie danych po stronie przeglądarki +instrukcje jak reagować na błędy składni, czyli koniec z frywolnym podejściem do zepsutych stron

nowe znaczki jak article, nav, dialog, progress... aby upodobnić strony www do aplikacji nowe metody wprowadzania danych tel, search, url, date, month... (czyli Web Forms 2.0)

Dla chcących więcej technicznych szczegółów

Podsumowując. Po wdrożeniu pełnego HTML5 wraz z towarzyszącymi technologiami możemy oczekiwać bogatszych aplikacji. Bardziej przypominających działaniem aplikacje desktopowe gdy tego oczekujemy. Z wyglądem bardziej odpowiadającym preferencjom ludzkiego oka i mózgu (zaokrąglone przyciski). Z grafiką wyglądającą dobrze w każdej rozdzielczości. Włącznie z możliwością edycji. Bez utraty danych w razie zerwania połączenia z internetem, oraz możliwością przechowywania danych po stronie użytkownika. Gwarancją identycznego wyglądu strony gdy jest ona napisana zgodnie z dobrymi praktykami jak i gdy nie spełnia standardów.

Aby dopełnić szczęście należy wspomnieć o jeszcze jednej technologi. WOFF odpowiada za osadzanie czcionek na stronach internetowych, dzięki czemu nie muszą one być zainstalowane w komputerze odwiedzającego. Aby zobaczyć małe demo polecam stronę HTML5 do której link zamieściłem nieco wyżej, a o której napisałem, że wygląda jak rozprawa naukowa. Tą technologię też wszyscy chcą implementować w przeglądarkach.