Web munduaren berrikuntzak: HTML5

Html5-aren inguruan asko hitz egiten ari dela eta guk ere gure ikuspegitik ikusi nahi genituen berrikuntza horiek. Html5-ek ziurrenik eduki hobeak eta erabiltzailearekin interaktibitate handiagoko webguneak ekarriko dizkigu.

Gehienbat, web munduan programazioan gabiltzanon aldetik datoz aldaketak. Gure nabigatzaileek ere izango dute zeresana horretan, baina azkartasuna eta eraginkortasunean irabaziko dugu denok. Adibide nagusia Gmail da, html5 bertsioan askoz ere azkarragoa baita.

Programatzaileak soilik ez, baita diseinatzaileek ere: euren lana asko erraztuko du Html5-CSS3 binomioak. Lehen diseinu aldetik lan asko hartzen zituen elementuen posizio, kolore, etabarrek, orain askoz ere azkarrago eta kodeketa sinple batekin bidera daitezke.

Hiru atal nagusitan banatuko ditugu ikusitako aldaketak, batetik Javascript eta HTML edukien atzitzeak, bestetik HTML aldetik datozen elementu berriak eta azkenik CSSen gauza berriak.

Javascript API's:

• Client Side Storage (Web SQL Database, App Cache, Web Storage)
• Communication (Web Sockets, Worker Workers)
• Desktop experience (Notifications, Drag and Drop API)
• Geolocation

Egonkortasuna ere, Html5-aren aurrera pauso garrantzitsua da, erroreen kudeaketa gauzatu genezake eta datuak gorde, atzera, horri horretara itzuli eta datuak bertan izan genezake.

Web SQL Database izenpean, datuak datu-base batean gordetzeko aukera emango digu. Inolako datu base eskaera eta transferentziarik gabe, gure web zerbitzaritik beharrezko datuak, erabiltzailearen nabigatzaileko datu basean kargatu eta uneoro atzigarri izango zaizkigu, azkartasunean eta erabilgarritasunean asko irabaziz.

Cache sistema berriztatzaile batek ere atentzio deitu digu, bertan elementu bloke bat adieraziz, elementu kopuru guztiaren cacheatzea egiten da. Baldin eta bloke hau aldatzen ez bada, bloke guztiaren cache ez da galtzen. Orain artekoaren antzerakoa ezta? ba ez, oraingo cache sistema honekin, nahiz eta sarera ez konektatuta izan, eta baldin gure aplikazioan cacheatzeko esan  badiogu, orria errefraskatzen badugu, eduki guztia kargatuko dela ikusiko dugu. Hau zertarako? Offline moduan lan egin ahal izateko aukera bultzatzen du HTML5 berriak.

Workers atal interesgarria iruditu zait, Javascript-ekin lan egin dugunontzat batipat. Askotan prozesamendua eskatzen duen atazak deitzen ditugu eta honek nabigatzailea erdi hilda uzten du. Worker atal berri honekin, pisu handiko prozesuak horrelako baten pean exekutatuko ditugu, baina nabigatzaileak berdin-berdin jarraituko du funtzionatzen, worker honek prozesua amaitu bitartean. Mapa kontuetan edota eragiketa matematiko konplexuak exekutzatzeko aproposa berau.

Askotan nabigatzaile eta zerbitzariaren arteko hartu-emanak JSON edo AJAX bitartean bideratzen ditugu. Orain nabigatzaileek socket sistema bat dakarte bien arteko komunikazioa bideratzeko. Ez dugu horren demorik ikusi.

Notifikazio edota alerta sistema berria ere badu Html5 sistemak. Mezu pertsonalizatuak eta gauza politak egin daitezke, beti ere erabiltzaileari, adibidez: konektibitateari edota etorri berri den mezuren bati buruz informazioa emateko .

Drag and Drop moduko mogimendu konplexuak (Javascript) orain erabateko simpletasunera eraman dituzte. Erabiltzailearen erabilgarritasuna asko erraztuko du honek, batez ere datuak lortu edota erabiltzailearen beharrak lortzeko. Modu oso errexean.

Guretzat behintzat, pisu handia duen puntua Geolokalizazioa da (Tagzaniarrontzat). Eta Html5-en aurrera pauso handia izango da, beti ere erabiltzaileak hau balioztatzen badu. Mapen edozein api-rekin elkarlotuz, mapa batean gure uneko posizioa bereala ikusgai izango dugu.

HTML aldetik:

• Semantics (New tags, Link Relations, Microdata)
• Accessibility (ARIA roles)
• Web Forms 2.0 (Input Fields)
• Multimedia (Audio Tag, Video Tag)
• 2D and 3D drawing (Canvas, WebGL, SVG)

Html tag berriak ezarri dira, (header, section, article, header, aside, nav, footer). Hauek lehen CSS bidez eta estiloak ezarriz dena txukuntzen genituen, baina orain etiketa hauekin askoz hobeto egituratuko dugu gure webgunea eta bilatzaileek ere hobeto ezagutuko dituzte bertan dauden edukiak.

<a>-etan ezartzen diren Rel: atalean hobe espezikatu ahalko dugu LINK atal berri honekin, lotura horrek zer dakarren eta nondik datorren ezarriz. Ulerterrazagoa nabigatzaile eta bilatzaileentzako.

Aspaldiko kontua da microdata-n kontu hau, baina azkenean ulertu dute, microdaten beharra bilatzaileentzat. Gure edukien nondik norakoak hobeto ulertzeko eta anbiguetate puntu hori kentzeko. Bilatzaileen bilaketak askoz ere ziurragoak eta gaiarekin zerikusi handiagoarekin loturik izango ditugu.

Html5 berri honetan, elementu bildumak askoz hobeto elkartu eta roll zentzua emateko aukera izango dugu (ARIA roles), javascript eta kodeketa berezirik egin gabe.

Gure formularioetan aurrezarritako modelatutako datuak lortzeko aukera izango dugu. Datuak txukunago eta modu berri hauetan izango dira (TYPE): range, search, placeholder, ...

Balidazioetarako hauek : (color, number, email, tel...)

Denon belarritan izan da azken aldiko Adobe eta HTML5-aren arteko liskarra, bideo eta audio edukien flash-aren beharrarengatik. Orain, bai bideo eta audio streaming-ak flash gabe funtzionatzeko aukera izango du gure nabigatzaileak. Beti ere, manejurako beharrezkoak estandarrak dira, baina polit jartzeko aukera guztiekin.

Canvas-ekin lortu dena ikaragarria da. Erabateko erraztasuna lortu da Html5 berriarekin. Canvas-en erabateko kontrola eduki genezake, mugitu aldatu etab...baita 3D ko elementuak ere erakusteko aukera.

Kolorekin bakarrik ez, oraingo honetan, diseinatzaileek argitasun, saturazio, zoom eta hainbat svg baliorekin jolastu ahalko da.

CSS aldetik:

• Typography
• Visuals
• Transitions, transforms and animations

Asko hobetu da, CSS edukien kudeaketa eta erabilgarritasuna, hau da gauza nabarmenetako bat.

Selekzio, atributuen espezifikazio eta negatibotasunek, elementuen CSS atributuen kudeaketa ikaragarria dakarte.

Edukien maneju hobea, semeen atzitzea, bideratzeak bata bestearen barrenean eta sorrerak. Adibidez:

• h2:first-child { ... } 
• div.text > div { ... } 
• h2 + header { ... }

Elementu berdinean letra tipo bat baina gehiago izateko aukerak, estilizazio eta letrekin jokatzeko aukera askoz ere irekiagoa ematen digu.

Beste atal oso erabakior bat, Wrapping-a da (Eduki bat atal bati egokitzea). Orain arte diseinatzaileek bereak eta bi izaten zituzten edukiak txukun jartzeko, idatziaren arabera flotatzeko eta bestelako trikimailuekin, orain aldiz askoz hobeto kudeatuko dugu Html5ak dakarren CSS kontrol berriekin.

Atalak edo zutabeak. Orain arte JSen beharra zegoen eduki baten kudeaketa bideratzeko, orain aldiz zutabeak sortu eta kendu ahalko dira , edukiaren luzapenaren arabera, modu automatikoan.

Testu baten zabalera ere kontrolatu ahalko dugu, letra tipoa aldatu gabe, zuzenean testuaren stroke atributua aldatuz.

Oinarrizko kolore (RGB) aldaketetatik aparte, saturazio, iluminazio eta tonua aldatzeko aukerek ere ezarri dira.

Estilo kontuekin jarraituz, oso modan dagoen elementu baten erpin borobilduen sorkuntza, CSS erabiliz modu errazean nola egiten den ere deigarria da.

Irudien gradienteak eta itzalak estilo kontuetan eratorri berriak ekarriko dituzte.

Background irudien kontrolak ere gehitu dira. Irudi hauen tamainen editatzeak, irudi bat baina gehiago izateak ,eta abar.

Transition edota mugimenduen kontrolak. Elementu bat mugitu nahi bagenuen , Javascript erabiliz egiten genuen orain arte, orain aldiz, CSS ikutu sinple batekin egin daiteke. Baita Transformazioak ere, edukien mugimendu berriak eta ikusgarritasuna gehituz. Animazioak ere egin daitezke , transformazioak bezala, guzti honek lehengo flash edota GIF animatuak bezalako ikutuak egiteko baliagarri izango zaigu (diseinatzaileei asko gustatu ez arren).

IE6/7/8:

Programatzaileek kontutan izan dituzte IE (Internet Explorer) dituen arazoak edukien kudeaketa eta bisualizazioekin, ala, ez programatzaile eta ezta diseinatzaileak ez daitezen erotu, nabigatzaile batean ez dela ikusten eta bestean bai... kontutan izan dituzte zenbait ikutu, IE ondo ikus daitezen ere.

Konklusioak:

Html berri honek aplikazio berri eta eduki original berriak ikusteko aukera emango digu denbora laburrean, beraz aldaketa-puntu izango da Html5, aurreko eta hemendik aurrerako edukien artean.

Bestalde, web nabigatzaileetatik aparte, aurrez ere esan dugu telefono mugikorretako aplikazioen programazio berria ere izan daitekeela. Html5-i buruzko informazioa bilatzen baduzue, askok badarabilte gai hau. Beraz denbora gutxira ere telefonoetako aplikazio berriak ez dira aplikazio izango web-aplikazioak (offline/online) baizik.

Esteka interesgarri bi:

• Brad Neuberg izeneko Googleko programatzaile batek emandako aurkezpena oso interesgarria da. 50 minutuko bideoa da, HTML5ak dakartzan berrikuntza guztiak oso modu argian azaltzen baititu:

• Aurkezpena: Aurreko bideoan azaltzen den aurkezpen interaktiboa ere lortu dugu, baina bertan dauden edukiak ondo ikusteko behar beharrezkoa da Html5 darabilen nabigatzaile bat izatea. Internet explorer 8-ak , firefox 3.5etik aurrerakoak eta Google Chrome berriek badakarte, html5-erako soportea. Hona hemen aurkezpena.

Zurean ikus al daiteke HTML5-a duen edukirik ? hemen aztertu zenezake.