HTML5 Workshop

Joi a fost un Workshop HTML5 organizat de Microsoft, la Hotel Pami. S-au prezentat multe chestii, printre care și câteva lucruri noi pentru mine, și câteva insider stuff de Microsoft.

Cel care a început workshopul a fost Petru Jucovschi, Developer Evangelist la Microsoft. A început cu un scurt istoric al WWW, de la Tim-Berners Lee, la WHATWG și W3C. Ne-a zis de două proiecte realizate de Microsoft cu scopul de  a promova HTML5, care vor fi lansate doar în ianuarie din păcate:  Robot și Presiune. Demourile prezentate păreau destul de in­tere­sante. Robot e un video de muzică similar cu ce au mai făcut cei de la Google, iar Presiune e ceva care măsoară cât de mult se vorbește despre ceva pe Internet (cred).

Apoi a continuat Cătălin Crivețeanu cu prezentarea schimbării celei mai bătătoare la ochi din HTML5: tagurile schimbate sau noi. A prezentat pe scurt structura unui site, bazându-se pe Orchard, un CMS pentru ASP.NET. Am fost im­pre­sion­at de faptul că el știe de culoarea fuchsia, și a folosit-o pentru un fundal de ::selection.

Desigur a zis și de fall­back­urile folosite pentru IE<9 (HTML5 Shiv) și de feature detection (Modernizr).

La webfonts am mai învățat câteva chestii: how to fix support for all the myriad browsers și că dacă oferi un font doar de pe web, unele browsere oferă posi­bil­i­tatea de a-l instala. Fix: src:local('NOTAFONT').

Apoi Petru ne-a prezentat mărețul tag video. Chestie ciudată:  nu are controale by default, trebuie să le activezi explicit prin atributul „controls”. Cea mai tare chestie e cum se verifică suportul pentru codecurile și encodările suportate:

var player = document.getElementById('myVideo');

            alert("Is <video> supported? " +
                     (player.canPlayType != null));

            if (player.canPlayType) {
                alert("Is mp4 supported? " +
                    player.canPlayType('video/mp4'));

                alert("Is H.264 Baseline supported? " +
                    player.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
            }

Într-un browser standards compliant, primul alert va scrie: „Is video supported? True”. Al doilea alert: „Is mp4 supported? Maybe”. Al treilea: „Is H.264 Baseline supported? Probably”. Maybe și probably sunt răspun­surile corecte conform speci­fi­cați­ilor =))) are sens (un format poate conține codecuri diferite și nu toate codecurile au fost făcute egale), dar tot e amuzant. S-a prezentat apoi pe scurt librăria Popcorn.js, de care am mai auzit, dar nu știam cât de awesome îi: îi super-mega-awesome. Păcat că nu prea am proiecte legate de video :)))

Next up: canvas. Mică explicație de ce avem doar context 2D (WebGL este o vul­ner­a­bil­i­tate de securitate, deoarece permite access direct la driverele plăcii video). Cătălin a zis despre canvas că un „obiect loser” pentru că nu are prea multe facilități și în momentul în care vrei să schimbi ceva, trebuie să redesenezi totul :)). A fost prezentat ceva demo cum se poate face o reflecție cu gradient spre trans­parență a unui video (din păcate nu merge în Chrome, dar în IE10 mergea). Petru a menționat o chestie foarte tare: Ai2Canvas. Acesta este un plugin pentru Adobe Il­lus­tra­tor care permite exportarea direct în cod Javascript pentru Canvas, cu tot cu animații.

S-a menționat un picuț și SVG, mai ales în contrast cu canvas. Sunt două diferențe majore între ele: la canvas trebuie explicit redesenat ecranul când modificăm scena, pe când în SVG aceasta se face automat (poți modifica obiecte din scenă); a două diferență e că SVG poate fi stilizat cu CSS și poate fi folosit în CSS (ca background de exemplu), pe când canvas e doar un tag care este folosit acolo unde este pus și atât.

La întrebări legate de fallback, Petru a zis că în România 78% din cal­cu­la­toare au instalat Sil­verlight. Wow, românii sunt mari fani Microsoft. Și apoi a mai dat o bombă: Internet Explorer se va updata automat, în fundal, la ultima versiune (după ce se anunță oficial asta). \:D/ No more IE6, no more IE6, no more IE6 \:D/

Și cu asta s-a terminat prezentarea despre HTML5 și a început cea de CSS3. Noi selectori, pseudo-selectori. Nothing new here.

Dar media queries au fost un pic mai in­tere­sante: diferența subtilă dintre device width și width simplu (mărimea ecranului vs mărimea browseru­lui) și un demo genial: la mărime maximă, era o mână deschisă complet, care arăta toate degetele, iar pe măsură ce se făcea mai mic browserul, se arătau tot mai puține degete :D (făcut cu imagini of course)

Și apoi s-a ajuns la transforms și de aici la blestemul CSS3: vendor prefixes. Aici Petru a zis o chestie in­tere­san­tă, care atunci nu am înțeles-o, dar ieri am mai citit-o și altundeva, sub o formă un pic diferită.  ChromeOS te obligă să folosești prefixul -webkit: nu există alt browser care să ruleze acolo. Pe Windows, -ms merge din start în IE, dar dacă vrei poți să foloseși orice alt browser.

Apoi noile elemente form (nu știu de ce erau aceastea incluse aici și nu la HTML5). O întrebare bună a fost pusă din audiență: ce facem cu lo­calizarea? Nu putem schimba mesajele de eroare pe care le dau browserele când ceva nu e corect (încă).

Ultimul subiect CSS3 a fost multiple columns. Meh. Cel mai interesant a fost că nu mergea la fel în Firefox, Chrome și IE :))

Ultima prezentare a fost de către Remus Pereni, despre Javascript Best Practices. Și el a început cu un mic istoric Javascript, cum acesta la început era folosit doar pentru a face meniuri care se deschid, dar acuma este destul de matur pentru aplicații complete enterprise, inclusiv stand-alone, care opțional folosesc un server doar pentru sin­cronizare.

A prezentat nevoia pentru diferite librării Javascript (new one for me: Underscore.js). De asemenea, a vorbit despre feature detection, browser detection și form factor detection. Despre primele două știam deja, dar al treilea este un concept relativ nou și care se referă la faptul că apli­cați­ile web de obicei ar trebui să funcționeze diferit pe desktop, pe mobil, pe tabletă sau pe televizor.

O altă chestie genială pe care a prezentat-o a fost JSON Select. Ce face această librărie? Ne permite să căutăm și să filtrăm prin JSON cu selectori similari cu cei din CSS3. This is awesome!!! Mind-blowingly easy to do things in it.

După aceasta, Remus a trecut la diverse patternuri de Javascript. Motivația: „După cum în natură, viermele evoluează spre un fluture, codul evoluează spre spaghetti code dacă are timp și spațiu destul. Desigur, nu și la Yonder”.

Primul pattern a fost cel de name­spacing. Două motive: pentru a evita con­flictele de nume și din motive de per­for­manță (vari­abilele globale sunt găsite cu vreo 30% mai încet). A urmat modulele (și cum simulezi metode și variabile private și publice în Javascript) împreună cu AMD (Asyn­chrounous Javascript Modules).

Aici s-a pus o întrebare legată de se­curizarea codului (obfuscarea lui). Răspunsul: minificare, cu mențiunea că e numai un minor in­con­ve­nience, pentru că având puțintică răbdare se poate totuși descifra codul.

Ultimul pattern prezentat a fost cel despre cum să folosești classical classes în Javascript. În opinia mea aceasta nu este necasar, deoarece Javascript are prototypal in­her­i­tance, care permite o flex­i­bil­i­tate mult mai mare. Și Douglas Crockford e de acord cu mine :D

La sfârșit, Remus a făcut un pitch sale pentru frame­workul Javascript dezvoltat de Yonder, Quarix, doar ca în final să apară posi­bil­i­tatea ca acesta să fie lansat open-source :)))

Acest workshop a fost interesant și util pentru mine. Nu îmi pare rău că am încasat încă o absență la cursul de BMC (profei îi place să facă prezența mai ales atunci când lipsesc eu :| ). Slideurile și demourile se pot descărca de aici.

Și la sfârșit, more free pizza :D. În timp ce mâncam, Petru a mai zis un lucru interesant: Windows 8 și Windows Phone Apollo (probabil 8) vor converge și se vor putea scrie aplicații cu aceleași tehnologii pentru ele (cum se scriu cele Metro-style). Deci și HTML5 și Javascript pe telefon. \:D/ Din păcate deocamdată sunt osândit să sufăr prin XAML și WPF și C# dacă vreau Windows Phone Ap­pli­ca­tion :(((