Codesyntaxen ez gara oso futbolzaleak, baina bai porrazaleak. Aitzolen eta Azpiren arteko tirabirei esker, azken horrek porra ederra sortu du. Etiam eta Mendicute izan dira kakati bakarrak; besteok hortxe dihardugu, jo-ta-sua, Paraguai, Ghana eta Eslovakia bezalako selekzioak animatzen. 

Uste dut porra horri esker inoiz baino sutsuago dihardugula mundiala jarraitzen. Bestela ere jarraituko genuke gutako gehienok, baina porrak beste zer bat ematen dio lehiari. 10 euro besterik ez ditugu jokatu, baina Aitzol eta Kere hor behean ikusteak... horrek ez dauka preziorik!

Porra egiteko bi alderdi landu behar genituen.

Alde batetik, taldeak aukeratzeko sistema eta puntuazioa. Eztabaida luuuze-luzeak izan ondoren, azkenean horrela egin dugu: Mundialeko 32 taldeak 4 multzotan banatu (onenetik txarrenetara) eta guztira 11 talde aukeratu behar izan ditugu (1, 3, 3, 4). Garaipen bakoitzeko, talde bakoitzak 3 puntu jasotzen ditu; gol bakoitzeko 1,5 puntu eta jasotako gol bakoitzeko -1. Fasea pasatzen den bakoitzean puntu extrak (8, 10, 12, 25) eta txapeldunari beste 20 puntu. Goleatzaile pare bat ere aukeratu behar izan ditugu eta gol bakoitzeko 2 puntu jasotzen ditugu.

Azpiegitura teknikoari dagokionez, hasiera batean Django gainean garatzea pentsatu genuen, baina azkenean Google Spreadsheets erabili dugu. Kalkulu eta grafika guztiak berak ematen dizkigu, CSko ingeniarien lanari esker. Azkar, arin eta zuzen.

Porrari egindako gainbegiratuarekin errepasoa emango diot mundialaren lehenengo zatiari. Hauek izan dira nire aukerak:

Faborito nagusiak (1 hartzeko): Brasil edo Espainia.

• Nik Espainia hartu dut. Mundiala irabazten badu, gutxienez puntu batzuk emango dizkit. Gaitzerdi.

Faboritoak (3 hartzeko): Argentina, Holanda, Portugal, Alemania, Frantzia, Ingalaterra, Italia.

• Alemania. Talde gazte eta kalitatekoa dauka. Dena normal joanda Argentina izango zuen finalerdietan (hala dirudi) eta Maradonak ez dit konfidantzarik ematen. Alemania hartu eta Argentina utzi nuen.
  
• Holanda. Sailkapen-talde erraza zeukan (Danimarka, Japonia eta Kamerun). Finalerako bidean Brasilen koadro berean dago, baina itxaropena neukan (eta daukat). Egia da azken urteotan ez direla fin-fin ibili, baina kalitatea daukate, talde orekatua, eta gola.
  
• Ingalaterra. Sailkapen-talde erraza zeukan eta koadro erraza finalerako bidean (Frantzia-Uruguai-Mexiko-Serbia-Ghana... izan zitekeen bere arerio finalerako bidean). Ia-ia finalista ikusten nuen. Baina sailkapen faseko bigarren geratu, Algeriaren aurka berdinduta, eta kaka. Dagoeneko kalean da. Hortxe galdu dut porra.
  
• Italia eta Frantzia ez nituen ondo ikusten. Eta Portugal Brasilen taldean zegoen eta Espainiarekin gurutzatuko zela zirudien (hala izan da).
  

Tartekoak (3 hartzeko): Serbia, Uruguai, Kamerun, AEB, Mexiko, Suitza, Nigeria, Txile, Paraguai, Grezia.

• Ez zitzaidan kostatu hiru aukeratzea: Paraguai, AEB eta Serbia. Lehenengo fasea aise gaindituko zutela pentsatzen nuen. Aukera asko zituztela. Batez ere, Paraguaik, Italiak sekula ez duelako lehenengo fase ona egiten. AEB ere bere mailan ibili da. Baina Serbiak huts egin dit. Azken partidako azken minutuan penaltia izan zuen sailkatzeko... eta kale!
  
• Txile ere ondo ikusten nuen, baina Brasilen aurka gurutzatu behar zenez zortzirenetan... ez nuen aukeratu.
  
• Uruguai edo Mexiko aukeratzekotan ere izan nintzen, baina euren multzoa ez nuen batere garbi ikusten (Frantzia eta Hegoafrika ere hortxe zeuden). Zein sailkatuko zen? Zein ez? Zalantza larregi. Gaizki egin nuen, garbi dago. Uruguaik egundoko puntu extra pila emango ditu porran. Ziurrenik, porrako txapeldunak Uruguai izango du bere taldeen artean.
  

Eskasak (4 hartzeko): Boli Kosta, Algeria, Ghana, Japonia, Danimarka, Hegoafrika, Australia, Hego Korea, Eslovenia, Eslovakia, Zeelanda Berria, Honduras, Ipar Korea. 

• Hego Korea sailkatuko zela iruditzen zitzaidan. Puntutxo batzuk eman dizkit.
  
• Hegoafrika ere hartu beharra zegoen. Herrialde antolatzaileak beti sailkatu izan dira bigarren faserako. Aurten izan ezik, jakina. Kaka.
• Eta beste biak? Ez zegoen aukera handirik. Zeelanda Berria hartu nuen, Italiaren taldean egonda punturen bat lortuko zuelakoan. Halaxe izan da. Eta Danimarkari ere aukeraren bat ikusten nion; bere taldean Japonia baino hobea zelakoan. Baina Japoniak ezustekoa eman zuen.

Eta horrelaxe gabiltza, mundialeko giroan erabat murgilduta. Algeria-Eslovenia edo Eslovakia-Paraguai bezalako partida interesgarriak ikusten.

Nolabait esateko, mundiala oraintxe hasten da, final-zortzirenetatik aurrera. Baina gutako batzuek, honezkero, jai daukagu. Talde asko kanporatuta, beste zenbait makal... Hala ere, puntuazio-sistema dela eta, uste dut final-aurreak arte emozioa izango dugula porran.

Hauxe da une honetan sailkapena. Neska bakarra porran eta bera nagusi. Dani ere gertu eta beste 5-6 tropelean:

Beste grafika honetan, berriz, talde bakoitzak eman digun puntu kopurua (kontuan izan horietako batzuek oraindik ez dutela final-zortzirenetako partidarik jokatu):

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.