Co z tym HTML5?

Coraz czę­ściej Klien­ci w zapy­ta­niach ofer­to­wych wska­zu­ją na HTML5 jako na pożą­da­ny ele­ment spe­cy­fi­ka­cji w ich pro­jek­cie. Nic dziw­ne­go – HTML5 jest coraz bar­dziej popu­lar­ny i coraz wię­cej ser­wi­sów i apli­ka­cji inter­ne­to­wych wyko­rzy­stu­je jego moż­li­wo­ści. Póki co jed­nak o zmia­nie sił na ryn­ku jesz­cze mówić nie moż­na – wciąż bar­dziej popu­lar­na jest np. tech­no­lo­gia Ado­be® Flash®.

Nie ule­ga jed­nak wąt­pli­wo­ści, że z bie­giem cza­su nowa spe­cy­fi­ka­cja tego języ­ka będzie wypie­rać wer­sję 4.01 i może w jakiejś czę­ści zastą­pić to, co było do tej pory imple­men­to­wa­ne w Java­Script lub Ado­be® Flash®. I jest bar­dzo praw­do­po­dob­ne, że HTML5 zdo­mi­nu­je rynek już nie­ba­wem… w każ­dym razie wcze­śniej niż przed 2022 (bar­dziej opty­mi­stycz­na data w tym arty­ku­le). Dobrze, ponie­waż tech­no­lo­gia ta nie­sie ze sobą nowe ele­men­ty, któ­re teraz wyda­ją się nie­zbęd­ne a któ­rych koniecz­ność uży­cia trud­no było prze­wi­dzieć w dru­giej poło­wie lat 90-tych, kie­dy defi­nio­wa­no spe­cy­fi­ka­cję 4.01. Wte­dy więk­szość stron inter­ne­to­wych 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­no­lo­gii w kon­tek­ście uży­tecz­no­ści nie jest łatwo, to prze­glą­da­jąc szkic nowej spe­cy­fi­ka­cji na stro­nie W3C, nie moż­na oprzeć się wra­że­niu, że zawie­ra ona kil­ka nowych ele­men­tów, któ­re nie tyl­ko u pro­gra­mi­stów budzą duże nadzie­je. Co nowe­go wno­si HTML5 dla osób, któ­re zaj­mu­ją się pro­jek­to­wa­niem ser­wi­sów inter­ne­to­wych?

Z punk­tu widze­nia archi­tek­tu­ry infor­ma­cji (i SEO oczy­wi­ście) przy­dat­ne będą znacz­ni­ki seman­tycz­ne, takie jak nav, header czy asi­de. Ele­men­ty seman­tycz­ne infor­mu­ją o prze­zna­cze­niu i cha­rak­te­rze tre­ści – np. któ­re ele­men­ty są czę­ścią nagłów­ka – i mogą być tym samym wła­ści­wie zin­ter­pre­to­wa­ne i przed­sta­wio­ne w odpo­wied­ni do zawar­to­ści spo­sób. Obec­nie do ozna­cze­nia ele­men­tów takich jak nagłó­wek czy stop­ka stro­ny uży­wa się odpo­wied­nio zde­fi­nio­wa­nych ele­men­tów div. Zasto­so­wa­nie dedy­ko­wa­nych tagów to lep­sze seman­tycz­nie upo­rząd­ko­wa­nie ele­men­tów, co poten­cjal­nie prze­ło­ży się na lep­sze ich indek­so­wa­nie i czy­tel­ność infor­ma­cji. Seman­tycz­ne znacz­ni­ki pomoc­ne mogą być rów­nież przy gene­ro­wa­niu spi­su tre­ści oraz przy nawi­go­wa­niu po ser­wi­sie. Ele­ment nav przy­kła­do­wo może być uży­ty zarów­no do ozna­cze­nia ele­men­tów nawi­ga­cji glo­bal­nej jak i spi­su tre­ści, pagi­na­cji, ścież­ki nawi­ga­cyj­nej.

Zin­te­gro­wa­nie seman­tycz­nych ele­men­tów z HTML pozwa­la na prze­ka­za­nie infor­ma­cji prze­glą­dar­ce czym jest dany ele­ment na stro­nie. W HTML5 to seman­ty­ka ele­men­tów będzie okre­śla­ła zna­cze­nie tre­ści dane­go ele­men­tu a nie spo­sób w jaki treść jest przed­sta­wio­na w kodzie.

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

Nowa spe­cy­fi­ka­cja wspie­ra popu­lar­ne spo­so­by inte­rak­cji i pra­cy użyt­kow­ni­ka z dany­mi – tagi takie jak pro­gress czy meter infor­mu­ją o aktu­al­nym sta­nie pro­ce­su lub danych.  Nie jest to nowość – takie ele­men­ty są czę­sto imple­men­to­wa­ne za pomo­cą np. Java­Script, ale w HTML5 będzie to część spe­cy­fi­ka­cji i od stro­ny deve­lo­per­skiej będzie to znacz­nie prost­sze do zasto­so­wa­nia.

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

Okre­ślo­ne są rów­nież nowe typy pól tek­sto­wych – np. ema­il, url, tel, search oraz ich atry­bu­tów – np. auto­fo­cus, requ­ired, max. W chwi­li obec­nej wspie­ra­ne są co praw­da tyl­ko przez część prze­glą­da­rek:

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

HTML5 ofe­ru­je sze­reg moż­li­wo­ści, któ­re czę­sto przed­sta­wia­ne są w opo­zy­cji do Ado­be® Flash® – sztan­da­ro­wym przy­kła­dem jest tag canvas, dzię­ki któ­re­mu może­my np. two­rzyć boga­te ani­ma­cje bez koniecz­no­ści wyko­rzy­sta­nia Ado­be® Flash® czy wizu­ali­zo­wać dane bez koniecz­no­ści insta­lo­wa­nia dodat­ko­wej wtycz­ki (plu­gi­nów).

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

Wie­le entu­zja­zmu wzbu­dzi­ło doda­nie do spe­cy­fi­ka­cji moż­li­wo­ści osa­dze­nia video w HTM­Lu. Takie tagi jak audio i video pozwa­la­ją na unie­za­leż­nie­nie od zewnętrz­nych dodat­ków (koniecz­no­ści insta­lo­wa­nia dodat­ko­wych plu­gi­nów do odtwo­rze­nia video) i zosta­wia­ją w rękach twór­ców stron wygląd inter­fej­su odtwa­rza­cza. Dodat­ko­wo – ele­men­ty te pod­da­ją się sty­lo­wa­niu CSS w takim samym stop­niu jak inne ele­men­ty. Atry­but con­trols tagu video pozwa­la prze­glą­dar­ce na doda­nie do mate­ria­łu wideo stan­dar­do­we­go zesta­wu kon­tro­lek. Ist­nie­je moż­li­wość pod­pię­cia pli­ków źró­dło­wych w róż­nych for­ma­tach – wła­ści­wy for­mat jest wybie­ra­ny na pod­sta­wie typu oraz zain­sta­lo­wa­nych kode­ków. Moż­li­we jest rów­nież bar­dziej zaawan­so­wa­ne kon­tro­lo­wa­nie mate­ria­łu video i audio a okre­śla­ją­ce spo­sób ich odtwa­rza­nia.

Uwzględ­nio­ny został drag&drop – funk­cjo­nal­ność zna­na z apli­ka­cji desk­to­po­wych – choć mówiąc oględ­nie mecha­ni­ka dzia­ła­nia nie­ko­niecz­nie musi wzbu­dzać zachwyt. Spo­sób skon­stru­owa­nia modu­łu drag&drop wyma­ga praw­do­po­dob­nie prze­for­mu­ło­wa­nia lub zde­fi­nio­wa­nia od począt­ku (wię­cej w tym arty­ku­le), co nie zmie­nia fak­tu, że uwzględ­nie­nie obsłu­gi drag&drop jest kro­kiem w dobrym kie­run­ku.

War­to wspo­mnieć rów­nież o tagach spel­l­check (pozwa­la na spraw­dze­nie popraw­no­ści wpro­wa­dzo­ne­go tek­stu) oraz con­ten­te­di­ta­ble (pozwa­la na edy­to­wa­nie dowol­ne­go tek­stu ozna­czo­ne­go tym atry­bu­tem).

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

Nowa spe­cy­fi­ka­cja wpro­wa­dza ele­men­ty pozwa­la­ją­ce na budo­wa­nie w Inter­ne­cie apli­ka­cji, któ­re ofe­ro­wa­ny­mi funk­cjo­nal­no­ścia­mi będą coraz bar­dziej upo­dab­nia­ły się do apli­ka­cji desk­to­po­wych. Dostęp­ne będą w koń­cu typo­we ele­men­ty wzię­te z tego typu apli­ka­cji – moż­li­wość korzy­sta­nia ze skró­tów kla­wi­szo­wych czy menu kon­tek­sto­we­go (dzię­ki znacz­ni­ko­wi menu i jego typom: tool­bar, con­text, list). Pozwo­li to na zbli­że­nie w zacho­wa­niu do typo­wych apli­ka­cji desk­to­po­wych, moc­niej akcen­tu­jąc ich inte­rak­tyw­ność.

HTML5 nie­sie ze sobą wie­le zmian – powo­li ewo­lu­ując w kie­run­ku, któ­ry dobrze odda­ją ter­mi­ny: respon­si­ve­ness, func­tio­na­li­ty, inte­rac­ti­vi­ty. Spe­cy­fi­ka­cja może być inte­re­su­ją­ca nie tyl­ko dla pro­gra­mi­stów, lecz rów­nież dla osób pro­jek­tu­ją­cych ser­wi­sy i apli­ka­cje webo­we – choć­by tyl­ko po to aby mieć świa­do­mość nowych moż­li­wo­ści, któ­re są w niej zawar­te.

W ramach cie­ka­wost­ki – aby spraw­dzić poziom wspie­ra­nia HTML5 przez prze­glą­dar­kę, wystar­czy przejść na stro­nę http://html5test.com/. Wnio­ski może­cie wycią­gnąć sami 🙂