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!

Odpowiedz na „Piotr JańczakAnuluj pisanie odpowiedzi

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