Co z tym HTML5?

Coraz częś­ciej Klien­ci w zapy­ta­ni­ach ofer­towych wskazu­ją na HTML5 jako na pożą­dany ele­ment specy­fikacji w ich pro­jek­cie. Nic dzi­wnego – HTML5 jest coraz bardziej pop­u­larny i coraz więcej ser­wisów i aplikacji inter­ne­towych wyko­rzys­tu­je jego możli­woś­ci. Póki co jed­nak o zmi­an­ie sił na rynku jeszcze mówić nie moż­na – wciąż bardziej pop­u­lar­na jest np. tech­nolo­gia Adobe® Flash®.

Nie ule­ga jed­nak wąt­pli­woś­ci, że z biegiem cza­su nowa specy­fikac­ja tego języ­ka będzie wyp­ier­ać wer­sję 4.01 i może w jakiejś częś­ci zastąpić to, co było do tej pory imple­men­towane w JavaScript lub Adobe® Flash®. I jest bard­zo praw­dopodob­ne, że HTML5 zdomin­u­je rynek już niebawem… w każdym razie wcześniej niż przed 2022 (bardziej optymisty­cz­na data w tym artykule). Dobrze, ponieważ tech­nolo­gia ta niesie ze sobą nowe ele­men­ty, które ter­az wyda­ją się niezbędne a których konieczność uży­cia trud­no było przewidzieć w drugiej połowie lat 90-tych, kiedy defin­iowano specy­fikację 4.01. Wtedy więk­szość stron inter­ne­towych 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 tech­nologii w kon­tekś­cie użytecznoś­ci nie jest łat­wo, to przeglą­da­jąc szkic nowej specy­fikacji na stron­ie W3C, nie moż­na oprzeć się wraże­niu, że zaw­iera ona kil­ka nowych ele­men­tów, które nie tylko u pro­gramistów budzą duże nadzieje. Co nowego wnosi HTML5 dla osób, które zaj­mu­ją się pro­jek­towaniem ser­wisów inter­ne­towych?

Z punk­tu widzenia architek­tu­ry infor­ma­cji (i SEO oczy­wiś­cie) przy­datne będą znaczni­ki seman­ty­czne, takie jak nav, head­er czy aside. Ele­men­ty seman­ty­czne infor­mu­ją o przez­nacze­niu i charak­terze treś­ci – np. które ele­men­ty są częś­cią nagłówka – i mogą być tym samym właś­ci­wie zin­ter­pre­towane i przed­staw­ione w odpowied­ni do zawartoś­ci sposób. Obec­nie do oznaczenia ele­men­tów takich jak nagłówek czy stop­ka strony uży­wa się odpowied­nio zdefin­iowanych ele­men­tów div. Zas­tosowanie dedykowanych tagów to lep­sze seman­ty­cznie uporząd­kowanie ele­men­tów, co potenc­jal­nie przełoży się na lep­sze ich indek­sowanie i czytel­ność infor­ma­cji. Seman­ty­czne znaczni­ki pomoc­ne mogą być również przy gen­erowa­niu spisu treś­ci oraz przy naw­igowa­niu po ser­wisie. Ele­ment nav przykład­owo może być uży­ty zarówno do oznaczenia ele­men­tów naw­igacji glob­al­nej jak i spisu treś­ci, pag­i­nacji, ścież­ki naw­iga­cyjnej.

Zin­te­growanie seman­ty­cznych ele­men­tów z HTML pozwala na przekazanie infor­ma­cji przeglą­darce czym jest dany ele­ment na stron­ie. W HTML5 to seman­ty­ka ele­men­tów będzie określała znacze­nie treś­ci danego ele­men­tu a nie sposób w jaki treść jest przed­staw­iona w kodzie.

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

Nowa specy­fikac­ja wspiera pop­u­larne sposo­by inter­akcji i pra­cy użytkown­i­ka z dany­mi – tagi takie jak progress czy meter infor­mu­ją o aktu­al­nym stanie pro­ce­su lub danych.  Nie jest to nowość – takie ele­men­ty są częs­to imple­men­towane za pomocą np. JavaScript, ale w HTML5 będzie to część specy­fikacji i od strony devel­op­er­skiej będzie to znacznie prost­sze do zas­tosowa­nia.

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

Określone są również nowe typy pól tek­stowych – np. email, url, tel, search oraz ich atry­butów – np. aut­o­fo­cus, required, max. W chwili obec­nej wspier­ane są co praw­da tylko przez część przeglą­darek:

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

HTML5 ofer­u­je szereg możli­woś­ci, które częs­to przed­staw­iane są w opozy­cji do Adobe® Flash® – sztan­darowym przykła­dem jest tag can­vas, dzię­ki które­mu może­my np. tworzyć bogate ani­mac­je bez koniecznoś­ci wyko­rzys­ta­nia Adobe® Flash® czy wiz­ual­i­zować dane bez koniecznoś­ci instalowa­nia dodatkowej wty­cz­ki (plug­inów).

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

Wiele entuz­jaz­mu wzbudz­iło dodanie do specy­fikacji możli­woś­ci osadzenia video w HTM­Lu. Takie tagi jak audio i video pozwala­ją na unieza­leżnie­nie od zewnętrznych dodatków (koniecznoś­ci instalowa­nia dodatkowych plug­inów do odt­worzenia video) i zostaw­ia­ją w rękach twór­ców stron wygląd inter­fe­j­su odt­warza­cza. Dodatkowo – ele­men­ty te pod­da­ją się sty­lowa­niu CSS w takim samym stop­niu jak inne ele­men­ty. Atry­but con­trols tagu video pozwala przeglą­darce na dodanie do mate­ri­ału wideo stan­dar­d­owego zestawu kon­trolek. Ist­nieje możli­wość pod­pię­cia plików źródłowych w różnych for­mat­ach – właś­ci­wy for­mat jest wybier­any na pod­staw­ie typu oraz zain­stalowanych kodeków. Możli­we jest również bardziej zaawan­sowane kon­trolowanie mate­ri­ału video i audio a określa­jące sposób ich odt­warza­nia.

Uwzględ­niony został drag&drop – funkcjon­al­ność znana z aplikacji desk­topowych – choć mówiąc oględ­nie mechani­ka dzi­ała­nia niekoniecznie musi wzbudzać zach­wyt. Sposób skon­struowa­nia mod­ułu drag&drop wyma­ga praw­dopodob­nie prze­for­mułowa­nia lub zdefin­iowa­nia od początku (więcej w tym artykule), co nie zmienia fak­tu, że uwzględ­nie­nie obsłu­gi drag&drop jest krok­iem w dobrym kierunku.

Warto wspom­nieć również o tagach spellcheck (pozwala na sprawdze­nie poprawnoś­ci wprowad­zonego tek­stu) oraz con­tente­d­itable (pozwala na edy­towanie dowol­nego tek­stu oznac­zonego tym atry­butem).

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

Nowa specy­fikac­ja wprowadza ele­men­ty pozwala­jące na budowanie w Internecie aplikacji, które ofer­owany­mi funkcjon­al­noś­ci­a­mi będą coraz bardziej upod­ab­ni­ały się do aplikacji desk­topowych. Dostęp­ne będą w końcu typowe ele­men­ty wzięte z tego typu aplikacji – możli­wość korzys­ta­nia ze skrótów klaw­is­zowych czy menu kon­tek­stowego (dzię­ki znacznikowi menu i jego typom: tool­bar, con­text, list). Poz­woli to na zbliże­nie w zachowa­niu do typowych aplikacji desk­topowych, moc­niej akcen­tu­jąc ich inter­ak­ty­wność.

HTML5 niesie ze sobą wiele zmi­an – powoli ewolu­u­jąc w kierunku, który dobrze odd­a­ją ter­miny: respon­sive­ness, func­tion­al­i­ty, inter­ac­tiv­i­ty. Specy­fikac­ja może być intere­su­ją­ca nie tylko dla pro­gramistów, lecz również dla osób pro­jek­tu­ją­cych ser­wisy i aplikac­je webowe – choć­by tylko po to aby mieć świado­mość nowych możli­woś­ci, które są w niej zawarte.

W ramach cieka­wost­ki – aby sprawdz­ić poziom wspiera­nia HTML5 przez przeglą­darkę, wystar­czy prze­jść na stronę http://html5test.com/. Wnios­ki może­cie wyciągnąć sami 🙂

4 odpowiedzi
  1. Roman Cieciuch
    Roman Cieciuch says:

    Ja bym się wstrzy­mał z tym HTML-em 5. To super narzędzie w rękach pro­gramisty, ale na razie nie ma sen­su w to inwest­ować, bo nawet najnowsze przeglą­dar­ki nie radzą sobie z poprawnym jego wyświ­et­laniem…

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

    Nie wstrzymy­wać się tylko korzys­tać, bo prześpicie! Z powodze­niem śmi­ga cała skład­nia na każdej współczes­nej przeglą­darce, jeśli nie naty­wnie to za pomocą lekkiego wspar­cia JSowego. Gorzej z niek­tóry­mi 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 *