Co z tym HTML5?

Coraz częściej Klienci w zapytaniach ofertowych wskazują na HTML5 jako na pożądany element specyfikacji w ich projekcie. Nic dziwnego – HTML5 jest coraz bardziej popularny i coraz więcej serwisów i aplikacji internetowych wykorzystuje jego możliwości. Póki co jednak o zmianie sił na rynku jeszcze mówić nie można – wciąż bardziej popularna jest np. technologia Adobe® Flash®.

Nie ulega jednak wątpliwości, że z biegiem czasu nowa specyfikacja tego języka będzie wypierać wersję 4.01 i może w jakiejś części zastąpić to, co było do tej pory implementowane w JavaScript lub Adobe® Flash®. I jest bardzo prawdopodobne, że HTML5 zdominuje rynek już niebawem… w każdym razie wcześniej niż przed 2022 (bardziej optymistyczna data w tym artykule). Dobrze, ponieważ technologia ta niesie ze sobą nowe elementy, które teraz wydają się niezbędne a których konieczność użycia trudno było przewidzieć w drugiej połowie lat 90-tych, kiedy definiowano specyfikację 4.01. Wtedy większość stron internetowych wyglądała hmm.. mniej więcej tak:

Źródło: http://www.smashingapps.com/2009/08/13/how-popular-website-designs-looked-like-in-late-90s.html

Choć mówić o technologii w kontekście użyteczności nie jest łatwo, to przeglądając szkic nowej specyfikacji na stronie W3C, nie można oprzeć się wrażeniu, że zawiera ona kilka nowych elementów, które nie tylko u programistów budzą duże nadzieje. Co nowego wnosi HTML5 dla osób, które zajmują się projektowaniem serwisów internetowych?

Z punktu widzenia architektury informacji (i SEO oczywiście) przydatne będą znaczniki semantyczne, takie jak nav, header czy aside. Elementy semantyczne informują o przeznaczeniu i charakterze treści – np. które elementy są częścią nagłówka – i mogą być tym samym właściwie zinterpretowane i przedstawione w odpowiedni do zawartości sposób. Obecnie do oznaczenia elementów takich jak nagłówek czy stopka strony używa się odpowiednio zdefiniowanych elementów div. Zastosowanie dedykowanych tagów to lepsze semantycznie uporządkowanie elementów, co potencjalnie przełoży się na lepsze ich indeksowanie i czytelność informacji. Semantyczne znaczniki pomocne mogą być również przy generowaniu spisu treści oraz przy nawigowaniu po serwisie. Element nav przykładowo może być użyty zarówno do oznaczenia elementów nawigacji globalnej jak i spisu treści, paginacji, ścieżki nawigacyjnej.

Zintegrowanie semantycznych elementów z HTML pozwala na przekazanie informacji przeglądarce czym jest dany element na stronie. W HTML5 to semantyka elementów będzie określała znaczenie treści danego elementu a nie sposób w jaki treść jest przedstawiona w kodzie.

Źródło: http://www.alistapart.com/articles/previewofHTML5/

Nowa specyfikacja wspiera popularne sposoby interakcji i pracy użytkownika z danymi – tagi takie jak progress czy meter informują o aktualnym stanie procesu lub danych.  Nie jest to nowość – takie elementy są często implementowane za pomocą np. JavaScript, ale w HTML5 będzie to część specyfikacji i od strony developerskiej będzie to znacznie prostsze do zastosowania.

Źródło: http://wufoo.com

Określone są również nowe typy pól tekstowych – np. email, url, tel, search oraz ich atrybutów – np. autofocus, required, max. W chwili obecnej wspierane są co prawda tylko przez część przeglądarek:

Źródło: http://wufoo.com

HTML5 oferuje szereg możliwości, które często przedstawiane są w opozycji do Adobe® Flash® – sztandarowym przykładem jest tag canvas, dzięki któremu możemy np. tworzyć bogate animacje bez konieczności wykorzystania Adobe® Flash® czy wizualizować dane bez konieczności instalowania dodatkowej wtyczki (pluginów).

Źródło: http://www.rgraph.net

Wiele entuzjazmu wzbudziło dodanie do specyfikacji możliwości osadzenia video w HTMLu. Takie tagi jak audio i video pozwalają na uniezależnienie od zewnętrznych dodatków (konieczności instalowania dodatkowych pluginów do odtworzenia video) i zostawiają w rękach twórców stron wygląd interfejsu odtwarzacza. Dodatkowo – elementy te poddają się stylowaniu CSS w takim samym stopniu jak inne elementy. Atrybut controls tagu video pozwala przeglądarce na dodanie do materiału wideo standardowego zestawu kontrolek. Istnieje możliwość podpięcia plików źródłowych w różnych formatach – właściwy format jest wybierany na podstawie typu oraz zainstalowanych kodeków. Możliwe jest również bardziej zaawansowane kontrolowanie materiału video i audio a określające sposób ich odtwarzania.

Uwzględniony został drag&drop – funkcjonalność znana z aplikacji desktopowych – choć mówiąc oględnie mechanika działania niekoniecznie musi wzbudzać zachwyt. Sposób skonstruowania modułu drag&drop wymaga prawdopodobnie przeformułowania lub zdefiniowania od początku (więcej w tym artykule), co nie zmienia faktu, że uwzględnienie obsługi drag&drop jest krokiem w dobrym kierunku.

Warto wspomnieć również o tagach spellcheck (pozwala na sprawdzenie poprawności wprowadzonego tekstu) oraz contenteditable (pozwala na edytowanie dowolnego tekstu oznaczonego tym atrybutem).

Źródło: http://wufoo.com

Nowa specyfikacja wprowadza elementy pozwalające na budowanie w Internecie aplikacji, które oferowanymi funkcjonalnościami będą coraz bardziej upodabniały się do aplikacji desktopowych. Dostępne będą w końcu typowe elementy wzięte z tego typu aplikacji – możliwość korzystania ze skrótów klawiszowych czy menu kontekstowego (dzięki znacznikowi menu i jego typom: toolbar, context, list). Pozwoli to na zbliżenie w zachowaniu do typowych aplikacji desktopowych, mocniej akcentując ich interaktywność.

HTML5 niesie ze sobą wiele zmian – powoli ewoluując w kierunku, który dobrze oddają terminy: responsiveness, functionality, interactivity. Specyfikacja może być interesująca nie tylko dla programistów, lecz również dla osób projektujących serwisy i aplikacje webowe – choćby tylko po to aby mieć świadomość nowych możliwości, które są w niej zawarte.

W ramach ciekawostki – aby sprawdzić poziom wspierania HTML5 przez przeglądarkę, wystarczy przejść na stronę http://html5test.com/. Wnioski możecie wyciągnąć sami 🙂

4 odpowiedzi
  1. Roman Cieciuch
    Roman Cieciuch says:

    Ja bym się wstrzymał z tym HTML-em 5. To super narzędzie w rękach programisty, ale na razie nie ma sensu w to inwestować, bo nawet najnowsze przeglądarki nie radzą sobie z poprawnym jego wyświetlaniem…

    Odpowiedz
  2. Cyryl Kwaśniewski
    Cyryl Kwaśniewski says:

    Nie wstrzymywać się tylko korzystać, bo prześpicie! Z powodzeniem śmiga cała składnia na każdej współczesnej przeglądarce, jeśli nie natywnie to za pomocą lekkiego wsparcia JSowego. Gorzej z niektórymi API.

    Odpowiedz

Odpowiedz

Want to join the discussion?
Feel free to contribute!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *