PowerPoint Presentation

Multimedialect. dr. Cristian IoniStructura cursObiectivnsuirea elementelor teoretice i practice care s permit dezvoltarea de aplicaii multimediaCuprinsNoiuni generaleImagine i animaieSunetVideoEvaluare: proiect i lucrare scrisContactCristian Ioni cristian.ionita@softmentor.roMateriale: http://ase.softmentor.ro

I. Noiuni generale1. Conceptul de multimedia

2. Clase de aplicaii multimedia

3. Condiii hardware / software

4. Multimedia n context WEB1. Conceptul de multimediaMultimedia din punct de vedere informatic este:o combinaie de text, imagine, sunet, animaie, video accesibil utilizatorului prin intermediul sistemului de calcul

Tehnologii care au stat la baza dezvoltrii conceptului de multimedia:conversia analog digitalcompresia datelor

Conversia analog - digitalResursele utilizate trebuie convertite n format digital pentru:stocare procesareincludere n aplicaiiResursele sunt convertite n format analog la redare

Compresiaapariia algoritmilor specifici (cu pierdere de informaie)exemple: JPEG, MPEG Audio / Videopierdere de informaie controlat exploateaz limitrile percepiei umaneproces asimetricTehnologii- periferice specializate pentru captur imagine / sunet / video- medii de stocare de mare capacitate- tehnologii de comunicare la distan cu band larg- procesoare specializate pentru compresie / decompresie la nivel hardwareAplicaie multimedia- componentele sunt accesibile prin intermediul unui sistem de calcul- datele utilizate sunt n format digital (NU analogic)- elementele sistmeului sunt integrate ntr-o interfa unitar- grad ridicat de interaciune cu utilizatorulModaliti de dezvoltareMultimedia authoringinclud componenete preprogramate ce permit recunoaterea mai multor formate de resurse multimedia, instrumente pentru generarea animaiilor, pentru implementarea conceptelor de hypertext, hypermediaaccentul cade pe scenariul de derulare a aplicaiei i pe sincronizarea resurselorExemple: Flash, PowerPointMultimedia programming: accentul se pune pe procesarea direct a resurselor prin intermediul unui limbaj de programare i a unor biblioteci specializate2. Clase de aplicaii multimediaCriterii multiple de clasificare

Cele mai importante criteriidomeniu de utilizaregrad de interaciunelocalizarea componentelor

Clasificare n funcie de domeniuEconomie vizualizarea datelorEducaie aplicaii de e-learning, enciclopediiPublicitate aplicaii de prezentareMedicin procesarea i vizualizarea interactiv a datelor medicaleIndustrial instrumente de proiectare asistatEntertainment jocuri, realitate virtualaSisteme informatice geografice GIS sisteme pentru vizualizarea datelor geo-spaialeComunicaii aplicaii de tip videoconferinAlte criteriiGrad de interaciuneaplicaii interactiveprezentri statice

Localizarea componentelorlocalela distan

3. Condiii hardware / softwareEchipamente hardware pentru achiziie / procesare:imaginesunetvideoComponente software necesare pentru redarea coninutului multimediaHardware specializatDispozitive periferice pentru achiziia de imagini fixe:Scannertransform informaia luminoas n informaie electric, iar ulterior aceasta este convertita i salvat sub form digitaltipuri: flatbed / rotativAparat foto digitalfolosete lentile asemntoare aparatului foto clasic i un senzor digital pentru transformarea informaiei luminoase n informaie electricHardware specializatDispozitive periferice pentru achiziia de sunet:placa de sunet: convertor analog digital i digital analog

Dispozitive periferice pentru achiziia de imagini video:placa de achiziie i numerizare video: preluare i numerizare fluxuri audio - videocamera video digital: captur direct n format digital (similar aparat foto digital)placa TV tunner: preia semnal TV, decodific i numerizeaz semnalul

Software specializatDrivereAsigur controlul i comunicarea cu perifericele specializateSpecifice pentru dispozitivul i sistemul de operarePermit sistemului de operare s ofere aplicaiilor o interfa uniform

Extensii ale sistemului de operareBiblioteci specializate pentru controlul resurselor multimediaInstrumente de baz pentru redarea coninutului multimediaSoftware specializatProduse software specializate pe medii de comunicareAchiziie i prelucrare de imaginiPermit prelucrarea imaginilor n format raster sau vectorialExemple: Adobe PhotoShop, Corel DrawAchiziie i prelucrare de sunetExemple: Adobe Audition, Sony Sound ForgeAchiziie i editare videoExemple: Adobe Premiere, Sony VegasSoftware specializatProduse software pentru creaie de aplicaii multimedia

Clasificare bazat pe filozofia de organizare:principiul crii - Microsoft PowerPointaxa timpului - Adobe Flashdiagrame de flux - Adobe Authorware

4. Multimedia n context WEBSe dezvolt odat cu apariia standardului HTML5Elemente multimedia suportateTextImaginiAnimaieGrafic raster elementul canvasGrafic vectorial SVGSunet elementul audioVideo elementul videoGrafic 3D WebGLAvantajeArhitectur client-serverClient Web BrowserTrimite cererile ctre serverGestioneaz afiarea coninutului multimedia i interaciunea cu utilizatorulServer Web ServerPreia cererile de la Web BrowserTrimite coninutul (static sau generat dinamic) ctre browserComunicare protocolul Hypertext Transfer ProtocolProtocol textMesaje de tip request i responseMesajele sunt trimise prin intermediul protocolului TCP/IPHTTP RequestFormat: comanda (GET / POST / )/ parametri / eventual coninutCereri iniiate de ctre browser:Introducere adres de ctre utilizatorNavigare ctre pagin nouObinere resurseSolicitat din codExemplu:GET /index.html HTTP/1.1Host: www.test.comUser-Agent:Mozilla/5.0

HTTP ResponseFormat: status (200 / 404 / 500 /)/ parametri / coninutRspunsul este generat:Static (coninutul este preluat din fiier)Dinamic (coninutul este generat de ctre un program)Exemplu:HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Content-Length: 131

Limbaje utilizateHTML - HyperText Markup LanguageStructura documentuluiConinutul (de tip text)Referine la alte resurseCSS - Cascading Style SheetsDescrie modalitatea de prezentare a coninutuluiJavaScriptManipularea dinamic a coninutului i a modalitii de prezentareGestioneaz interaciunea cu utilizatorulDOM Document Object ModelAplicaia este reprezentat intern sub form de arboreTipuri de noduriElementeTextNodurile - create din HTML sau JavaScriptConin: atribute parametri de stilfuncii JavaScript

Limbajul HTMLTagInstruciunea de creare a unui nodFormat: coninutConinutul poate fi:TextAlte tag-uriAtributPerechi denumire valoare ataate nodurilorconinut

Structura unui document HTML

titlureferine i parametri

coninut

Tipuri de elementeElemente de tip block i inlineTextFormatare: p, em, strong, div, span, h1 h6, br, aListe: ul, ol, liTabele: table, thead, tbody, tfoot, tr, th, tdFormulare: form, inputImagine rasterimg, canvasImagine vectorial: svgAudio i video: audio, videoCascading Style SheetsModificarea modului de afiare a elementelor din DOMFormat dintr-o serie de reguli de forma:selector{proprietate 1 : valoare 1;proprietate 1 : valoare 1;.}

SelectoriIdentific nodurile din arbore asupra crora se vor opera modificrileSelectori simpli:Element: NUME_ELEMENTIdentificator: #IDClas: .NUME_CLASAli selectori:Universal: *Atribut: selector[atribut=valoare]Nod copil sau descendent: selector > selector sau selector selectorGrupare: selector, selectorCombinare selectori

Reguli de aplicareMotenirePropagarea valorilor de la un nod printe la nodurile copilNu toate proprietile sunt motenibileCascadareMecanismul de alegere aplicat n cazul n care avem mai multe valori n conflictReguli de cascadareImportanSpecificitateOrdinea n fiierul sursFormatare textProprieti:font-familyfont-sizefont-weightfont-styleColorUniti de msur: %, em, pxExemplubody {font-family: tahoma;font-size: 11pt;}Setare margini

Alte proprietiSetare dimensiuni: width, height, min/max-width/height, overflowControl layout: displayfloatPoziionare n cadrul paginiiposition: static / relative / absolute / fixedz-index

Limbajul JavaScriptCaracteristiciDinamicLimbaj funcionalBazat pe obiecteUtilizareManipulare noduri DOMEvenimenteComunicare la distan

Tipuri de dateTipuri de date de bazNumber: -3.14, 6, 2Boolean: true, falseString: testnull, undefinedObject: { nume: Ana, varsta:7 } referinObiecte specialeFunction: function f() {}Array: [1, 2, trei]Variabile i expresiiDeclararePrin atribuire valoare: a = 8; a =false;Folosind var: var a = 3; var b;ScopeGlobal sau localFunction vs block basedEvaluare expresiiOperatori similari cu C# (n plus === - egalitate strict)

FunciiDeclarare: function suma(a,b) { return a + b; }var suma = function(a,b) { return a + b; }Parametri:Transmii prin valoareAccesibili prin argumentsApel - nume_funcie / expresie(parametri):var rezultat = suma(7,3);var test = function(val) { return val + 1;}();Closure

ObiecteObiect = colecie de proprieti (perechi nume = valoare)Declarare obiecteLiterali: var ob = { nume: Ana, varsta:7 }new: var ob = new Object(); Accesare proprietiCitire: var v = ob.varsta; sau var v = ob[varsta]; for (v in ob) {...}Modificare / adugare: ob.varsta = 8; ob[varsta] = 8; ob.clasa = 2;Metodeadugare: ob.test = function() { console.log(test);}this: ob.afisare = function() { console.log(Nume: + this.nume); }Apel: ob.afisare();

Constructori i motenireFunciile JavaScript pot fi utilizate pentru construirea de obiecteExemplu: function Persoana(nume) { this.nume = nume; this.varsta = 1; }Apel: var ob2 = new Persoana(Maria); prototype Proprietate a funciei constructorDefinete proprietile disponibile n toate obiectele (instanele create)Exemplu: Persoana.prototype.afisare = function() { console.log("Nume: " + this.nume); };Folosit i pentru implementarea motenirii:function Student() { this.facultate = CSIE; }Student.prototype = new Persoana(-);var s = new Student(); s.afisare();DOM - StructuraArbore construit din obiecte JavaScriptFiecare nod:Este un obiect derivat din NodeConine o colecie de referine ctre nodurile copil: childNodesConine referine ctre nodul printe (parentNode) i nodul urmtor (nextSibling)Conine metode pentru manipularea nodurilor copil: appendChild(nod), removeChild(nod), Rdcina: document.documentElementNodurile au metode i proprieti specifice n funcie de tag-ul HTML utilizat pentru construirea nodului

Sursa: http://web.stanford.edu/class/cs98si/slides/the-document-object-model.htmlRegsire noduriPe baz de identificatorelem = document.getElementById(identificator)Pe baz de selector CSSelem = element.querySelector(selector CSS);lista = element.querySelectorAll(selector CSS);Alte metodelista = element.getElementsByClassName("clasa CSS");lista = element.getElementsByTagName("tag HTML");Manipulare noduriConstruire nod:elem = document.createElement("tag HTML");Accesare atribute:elem.numeAtribut accesare valoare atribut individualelem.attributes colecia de atributeAccesare atribute CSS:elem.style.numeAtributCSSExemplu:var p = document.createElement("p");p.innerText = "test";document.querySelector("body").appendChild(p);p.style.color = "red";Tratare evenimenteAdugare event handler:Prin atribute HTML:Exemplu: testPrin proprieti nod:element.proprietateEveniment = funcie;Exemplu: document.getElementById(test).onclick = function() {console.log(un mesaj);}Prin metoda addEventListener:element.addEventListener(tip, funcie[, captur]);Exemplu: document.getElementById(test). addEventListener("click", function() {console.log(un mesaj);});Eliminare event handler: element.removeEventListener(tip, funcie[, captur]);

Biblioteca jQueryColecie de funcii JavaScript pentru:Regsire elemente din DOMManipulare elemente, atribute i proprieti CSSnlnuire operaii pe seturi elementeAnimaieComunicare HTTP

Funcia jQuery / $1. Regsire elemente DOM: $(selector CSS)var leg = $(a.test);2. Construire obiect jQuery: $(element)var a = document.getElementById(leg1);var aJQuery = $(a);3. Construire elemente noi: $(cod HTML)var p = $(paragraf nou);4. Execuie cod dup iniializarea DOM: $(funcie)$(function(){// operaii care utilizeaz DOM})

Exemple de operaiiCitire / modificare atribute HTML$("#idTest").attr("href", "doc.html");var url = $("#idTest").attr("href");Citire / modificare proprieti CSS$(#idTest).css(color, red);Manipulare noduri DOM$(#idTest).append($(test));Tratare evenimente$(#idTest).click(function(){})Comunicare HTTP$.getJSON(url, funcie); / $.post(url, date)

II. Imagine1. Modele de culoare

2. Grafic raster

3. Grafic vectorial

4. Animaie1. Modele de culoareModel de culoareModel matematic care descrie modalitatea de reprezentare a culorilor sub form de tupluri numericeExemple: RGB, CMYSpaiu de culoriModelul de culoare mpreun cu instruciunile de reprezentare fizicExemple: sRGB, AdobeRGB, PantoneCaracteristiciin seama de modalitatea de percepere a luminii de ctre ochiul umanCulori de baz albastru (S), verde (M) i rou (L)

Tipuri de modele

Model aditivModel substractivModelul RGBModel aditiv Bazat pe culorile de baz rou, verde i albastruCuloarea variaz n funcie de dispozitiv (n lipsa unui spaiu de culoare)Reprezentare numeric: Aritmetic (0-1)Procent (0-100%)Digital pe 8 / 16 bii (0-255, 0-65535)

Modelul HSB(L,V)Reprezentare sub form de coordonate cilindriceBazat pe aceleai culori de baz:Red - 00Green - 1200Blue - 2400Axa central tonuri de griUtilizat n special pentru selecie de culoare

Modelul CMY(K)Model substractivCulori utilizate: cyan, magenta, yellowMascheaz culorile pe o suprafa alb

Utilizare: materiale tiprite

Palete de culoriTabel de corespondenindex tuplu (R, G, B)UtilizareReducerea cantitii de informaie necesar pentru reprezentarea culorilorPretabil pentru imagini cu un numr redus de culori (exemplu: diagrame fr gradieni)

2. Grafic rasterTipuri principale de grafic: raster i vectorialGrafica raster (bitmap, matriceal)Reprezentare sub form de matrice de puncteFiecare punct (denumit pixel) stocheaz informaia de culoareCulorile sunt stocate conform unui model de culoare direct prin intermediul unei palete de culori

Sursa: http://commons.wikimedia.org/wiki/File:Rgb-raster-image.svgInformaii generaleCaracteristici principale imagine rasterRezoluie (numrul de linii i coloane stocate n matrice, numrul total de pixeli sau densitate)Adncime de culoare (cantitatea de informaie stocat de ctre fiecare pixel)UtilizareReprezentare imagine pe monitorCaptare imagini din surse externeAvantaje i dezavantajePoate reprezenta orice imagineCodaj srac n informaie (nu ia n considerare semantica imaginii)Dimensiune mareNu se pot adapta unei scri variabile de vizualizareFormate de stocareBMP (Microsoft Windows Bitmap)Formatul standard de stocare pe platforma Microsoft WindowsSuport date necomprimate sau comprimate folosind algoritmul RLEMonocrom sau n culori pe 4, 8, 16, 24 sau 32 de biiSuport palete de culoriJPEG (Joint Photographics Experts Group)Stocare comprimat cu pierdere de informaie conform standardului JPEGRate de compresie diferite selectabile de ctre utilizatorUtilizat pentru imagini fotografice (cu gradaii fine de culoare)Nu este potrivit pentru text, linii sau alte imagini care prezint un contrast foarte mareEditri multiple (se pierde calitate la fiecare etap de compresie / decompresie)

Formate de stocareGIF (Graphics Interchange Format)Folosit n special pentru transferul imaginilor de maxim maxim 64K x 64KPretabil pentru diagrame, text logo-uri (contrast puternic i numr limitat de culori)Suport maxim 256 culori prin intermediul unei palete de culoriPoate stoca mai multe cadre (pentru animaie)Algoritm de compresie fr pierdere de informaie Lempel-Ziv-Welch (LZW)TIFF (Tag Image File Format)Format portabil i extensibil utilizat n special pentru imagini scanateSuport stocarea mai multor imagini ntr-un singur fiierSuport mai muli algoritmi de compresie (RLE, LZW sau JPEG)Alte formate: ICO - Icon Resource File, PNG - Portable Network Graphics, DIB - Device Independent Bitmap, PCX - PC PaintBrush File Format

Compresia Run-length encoding (RLE)Secvenele de valori identice consecutive sunt nlocuite cu perechi de forma(valoare, numr apariii)Exemplu:AAAAAAAAAAAAAABBBBBBBBBBAAAAAAAAAAAAABBBBBBCCC14A10B13A6B3CCaracteristiciRat mic de compresieSe preteaz pentru imagini cu zone mari de aceeai culoareUtilizat n special pentru fiiere BMP cu palet de culori

Compresia LempelZivWelch (LZW)Algoritm de compresie universal bazat pe dicionarDescriere compresie:Se construiete dicionarul iniial (toate irurile de lungime 1)Se caut cel mai lung ir W din dicionar care se potrivete cu irul de la intrareSe elimin W din irul de intrareSe adaug W urmat de urmtorul caracter n dicionarSe continu cu pasul 2Decompresie: se parcurge irul codificat i se reconstruiete dinamic dicionarulVariante: coduri de lungime variabil, cod pentru reiniializare dicionarUtilizat pentru fiiere de tip GIF

Compresia HuffmanAlgoritm universal de compresieCodificare optim de lungime variabil pentru fiecare simbol n funcie de frecvena de apariieDatele salvate: dicionaruldatele originale recodificateDecodificare: translaie simbol cu simbol pe baza dicionarului salvat

Compresia JPEGCompresie specializat cu pierdere de informaie pentru imagine rasterRezultate foarte bune pentru fotografii (variaii fine de luminozitate i culoare)Tipuri de compresie:secvenial codaj bazat pe transformarea cosinus discret cu blocurile procesate n ordinea apariieiprogresiv codaj bazat pe transformarea cosinus discret cu blocurile procesate prin mai multe treceri asupra imaginii progresiv fr pierdere folosete doar algoritmi de compresie fr pierdere de informaieprogresiv ierarhic codific imaginea la rezoluii din ce n ce mai mari

Etapele compresiei JPEGEtapele de compresie JPEG File Interchange Format (JFIF)1. Translatarea modului de culoare din RGB n Y'CBCR2. Reducerea rezoluiei pentru componentele CB i CR3. Imaginea se descompune n blocuri de dimensiune 8x8 pixeli4. Se aplic transformata cosinus discret pe fiecare bloc n parte5. Aplicarea matricei de cuantizare (pierdere de informaie)6. Blocurile rezultate n urma cuantizrii sunt comprimate folosind RLE i HuffmanDecodificare: se aplic paii n ordine invers

JPEG -Transformata cosinus discret

JPEG -Transformata cosinus discret

JPEG - Cuantizare

Cq(u,v)=round[C(u,v)/N(u,v)]235.6/16 -> 15-22.6/12 -> -2Imaginea raster n context WebAfiarea imaginilor n HTML: Tipuri raster suportate: JPEG, GIF, BMP, PNGUtilizare nod DOM (HTMLImageElement)width, height: dimensiunea obiectului n fereastrnaturalWidth, naturalHeight: dimensiunea matricei rastersrc: URL-ul imaginii surs; modificarea determin nceputul procesului de ncrcare (asincron)eveniment loadExemplu: var image = $("") .load(function () { $("body").append($(this)); }) .attr("src", "media/Penguins.jpg");

Elementul canvasHTML includere n document:

JavaScript obinere referin context grafic:var canvas = document.getElementById('test'); // sau var canvas = $(test)[0];var w = canvas.width, h = canvas.height;var ctx = canvas.getContext('2d');canvas Modaliti desenareDesenare direct dreptunghiuri:fillRect(x, y, width, height) umplere suprafastrokeRect(x, y, width, height) desenare conturclearRect(x, y, width, height) tergere suprafaDesenare folosind ci:beginPath() deschide o cale nouinstruciuni de desenare / poziionareclosePath() nchide calea (unete cu punctul de nceput)fill() umple calea sau stroke() deseneaz liniile

canvas Instruciuni desenareDeplasare:moveTo(x,y) modific poziia curentDesenare:lineTo(x, y) adaug o linie de la poziia curent la punctul specificatrect(x, y, width, height) adaug un dreptunghiarc(x, y, radius, startAngle, endAngle, anticlockwise) adaug un arc de cercquadraticCurveTo(cp1x, cp1y, x, y) adaug o curb cvadratic (un punct de control)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) adaug o curb Bzier (dou puncte de control)Desenare text: fillText sau strokeText(string, x, y)canvas AtributeSalvare i restaurare atribute context folosind stiva: save() i restore()Atribute:fillStyle sau strokeStyle = culoare modific culoarea de desenarectx.fillStyle = "#FFA500";ctx.strokeStyle = "rgba(255,165,0,1)";lineWidth = dimensiune modific grosimea liniilorlineCap, lineJoin, miterLimit modific proprietile liniilor (rotunjire capete, mbinri)font = specificaie font modific caracteristicile textului (exemplu: "bold 18px Arial")textAlign, textBaseline aliniere textcanvas Desenare imaginiDesenare fr scalare:drawImage(image, x, y) Desenare cu preluare poriune imagine si scalare:drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)Surse posibile:element imgalt element canvaselement videoTipuri de transformri 2D

OriginalEuclidian(translaie, rotaie)Afin(+deformare)Proiectiv(+paralelism)Polinomial(+proprieti geometrice)Helmert(+scalare)canvas TransformriOperaii de transformare simpl:translate(x, y) translateaz sistemul de coordonate cu numrul de pixeli specificairotate(angle) rotete sistemul de coordonate cu unghiul specificat (n radiani)scale(x, y) scaleaz sistemul de coordonate cu factorii specificai (n [01])

canvas - TransformriForma general pentru transformri afine:

Compunere transformare (prin nmulire):transform(m11, m12, m21, m22, dx, dy)nlocuire transformare curent:setTransform(m11, m12, m21, m22, dx, dy)

canvas - TransformriSemnificaie parametri:m11: scalare pentru axa Oxm12: rotire pentru axa Oxm21: rotire pentru axa Oym22: scalare pentru axa Oydx: translatare pentru axa Oxdy: translatare pentru axa Oy

canvas Acces rasterStocare raster obiect ImageData:width, height: dimensiunile matriceidata: vector care conine matricea liniarizat

Operaii:getImageData(left, top, width, height): extrage o poriune din imagine ca obiect ImageDataputImageData(imageData, x, y): aplic datele pe imaginea afiat n canvas

Restricii de originecanvas Access rasterParcurgere elemente:var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

for (var y = 0; y < canvas.height; y++) { for (var x = 0; x < canvas.width; x++) { var i = (y * canvas.width * 4) + x * 4;

var rosu = imageData.data[i]; // [0..255] var verde = imageData.data[i+1]; // [0..255] var albastru = imageData.data[i+2]; // [0..255] var transparenta = imageData.data[i+3]; // [0..255] }}Efecte simple de culoareFiltrare culoareExemplu pentru rou: r = r; g = 0; b = 0Negativr = 255 r; g = 255 g; b = 255 b;Transformare n tonuri de grir = g = b = 0.299 * r + 0.587 * g + 0.114 * bModificare strlucirer = r + valoare; if (r > 255) r = 255 else if (r < 0) r = 0;similar pentru celelalte dou componenteModificare contrastr' = (((r / 255) - 0.5) * valoare + 0.5) * 255; if (r > 255) r = 255 else if (r < 0) r = 0;similar pentru celelalte dou componente

Transformare RGB HSL

Transformare HSL RGB

Filtre de convoluieCalculeaz valoarea fiecrui pixel n funcie de valorile pixelilor alturai

Filtre de convoluieAlgoritm general:pentru fiecare valoare v(x,y) din matricea originalacumulator = 0pentru fiecare valoare k(i,j) din matricea de convoluieacumulator = acumulator + v(x,y)*k(i,j)v'(x,y) = acumulator (trunchiat la 0..255)Observaii:se aplic pe fiecare canal de culoare n partetratare special pentru pixelii din margine

Filtre de convoluie Exemplu emboss

Filtre de convoluie Alte exempleGaussian Blur

Sharpen

Edge Detection

3. Grafic vectorialBazat pe descrierea matematic a obiectelor componente ale imaginiiAvantaje:Menine semantica editare la nivel de obiect graficDimensiune redusIndependente de scara de vizualizareDezavantajNu poate reprezenta fidel orice fel de informaieFormate de reprezentare i stocareSVG (Scalable Vector Graphics)Format generic bazat pe XML pentru reprezentri vectoriale 2DSuport animaie i interactivitateDXF (Drawing Exchange Format) formatul vectorial lansat de firma Autodesk pentru produsul software AutoCADEPS (Encapsulated Post Script) formatul firmei Adobe pentru imagini vectoriale se bazeaz pe un limbaj de descriere numit Post ScriptSHP (Shapefile) formatul firmei ESRI pentru descrierea datelor spaiale de tip: punct, polilinie i poligonutilizat la reprezentarea elementelor geografice n sisteme de tip GIS

SVG Scalable Vector GraphicsPoate fi:inclus direct ntr-o pagin HTMLcontrolat prin intermediul CSS i JavaScriptExemplu:

SVG Elemente de bazLinii

Dreptunghiuri

SVG Elemente de bazElipse

Poligoane

Poli-linii

Textconinut

SVG Grupare i reutilizareGrupare elemente Definire elemente fr afiare Reutilizare

SVG - AtributeSetate prin intermediul CSSAtribute de bazstroke culoare liniestroke-opacity opacitate liniestroke-width dimensiune linie

fill culoare suprafafill-opacity opacitate suprafaSVG Manipulare din JavaScriptSimilar cu manipularea elementelor HTMLParticularitila construirea elementului trebuie specificat namespace-ul pentru SVG:document.createElementNS("http://www.w3.org/2000/svg", TAG_SVG")n jQuery se utilizeaz funcia attr pentru modificarea atributelor (n loc de .width, .height, )Exemplu: $(document.createElementNS("http://www.w3.org/2000/svg", "rect")) .attr({x:160, y:160, width:12, height:12}) .appendTo($("#desen"));

4. AnimaieModificarea rapid a imaginii vizualizate prin modificarea poziiei, formei sau dimensiunii unui obiect din imagineStocarea numeric a animaiei presupune reinerea elementelor independente ce compun micarea n raport cu factorul timp.Crearea iluziei de micare se realizeaz prin afiarea rapid de imagini statice uor modificateTehnici principale:Tehnica filmuluiCadre cheieSchimbarea culoriiAnimaie - JavaScriptMODELBROWSERactualizareModel()desenare()tratareEveniment()Apelate la un anumit interval de timp prin intermediul uneia dintre funciile:setInterval(funcie, interval_ms)setTimeout(funcie, interval_ms)requestAnimationFrame(funcie)III. Sunet1. Noiuni generale

2. Numerizarea sunetului

3. Formate audio

4. Compresia sunetului

5. Sunetul n context Web1. Noiuni generaleSunetul este o vibraie propagat printr-un mediu material sub forma unei unde mecanice.Din punct de vedere fiziologic: senzaia produs asupra organului auditiv de ctre vibraiile materiale ale corpurilor i transmise pe calea undelor acustice;Urechea uman percepe vibraii n intervalul 20-20000HzZgomot: caz particular de sunet caracterizat prin lipsa ncrcturii informaionaleRedare / receptare sunetPrin intermediul difuzorului i microfonuluiAmbele fac conversie semnal electric vibraie mecanicFolosesc principiile induciei electromagnetice

Reprezentare i caracteristiciReprezentare:Axa X: timpAxa Y: presiune (0 presiunea aerului n repaus)

Amplitudine: msoar dimensiunea vibraiei / volumul sunetului

Frecven: msoar viteza vibraiei / tonul sunetului

Compunere / descompunere

2. Numerizarea sunetuluiPresupune stocarea i prelucrarea sunetului n format digitalEtape:Convertirea sunetului n semnal electricEantionarea i cuantificarea semnaluluiStocarea informaiei numerice pe un suport de memorie extern conform unui format

AvantajeStocare mai uoarPermite analiza i procesarea numeric a sunetuluiNu se degradeaz n timp sau la copieri repetate

EantionarePrin eantionare se nelege procesul de segmentare, cu o perioadicitate fix, a semnalului audio analog.Frecvena de eantionare rezoluia orizontalSe determin pe baza teoremei lui Nyquist (minim dublul frecvenei maxime a sunetului)Rate de eantionare uzuale: 8 kHz semnal telefonic11 kHz radio AM22 kHz radio FM44 kHz audio CD

CuantificareCuantificarea presupune asocierea unei valori numerice corespunztoare amplitudinii semnalului pentru fiecare interval de timp.Calitatea este influenat de numrul de bii alocai pentru fiecare eantion (uzual 8 sau 16 bii pentru stocare i 16 32 pentru procesare)

Redarea sunetului digital:Se reconstruiete sinusoida original prin interpolarea valorilor numerice stocatePrin intermediul unui convertor digital - analog

3. Formate audioWAVE formatul standard de fiier audio pentru Microsoft i IBM; conine sunet n reprezentare PCM necomprimat;AIFF (Audio Interchange File Format) formatul standard pentru audio digital utilizat pe platformele Apple (variante: necomprimat / comprimat);MPEG (Moving Picture Experts Group) Audio - format standard pentru sunetul digital comprimat; parte a standardului MPEG de codificare a semnalului audio-video; cea mai cunoscut variant a lui este MP34. Compresia sunetuluiCel mai utilizat algoritm de compresie: MPEG-1 sau 2 Audio Layer III (MP3)Folosete codificare perceptualElimin din rezultat sunetele care nu pot fi percepute de ctre urechea umanSunetele imperceptibile sunt eliminate pe baza unui mode psihoacustic care exploateaz fenomenele de:Mascare a frecvenelorMascare temporal

Compresia sunetului - mascareaMascarea frecvenelorSunt eliminate sunetele cu frecvena mai mare de 16-18 KHzSunt eliminate sunetele de intensitate scazut, care apar concomitent cu sunete de intensitate inalt, dac sunt n benzi de frecven alturate (cele cu intensitate scazut sunt mascate de cele cu intensitate nalt)

Mascarea temporalSe elimin sunetele de intensitate mic care urmeaz dup sunete de intensitate puternic n cadrul unui interval de timpSunetele de intensitate mic nu pot fi percepute dup sunete de intensitate puternica datorit ineriei timpanului

Compresia MP3 - Etape1. Utilizarea de filtre pentru separarea sunetului n 32 sub-benzi de frecven2. Aplicarea modelului psiho-acustic pentru eliminarea sunetelor imperceptibile3. Determinarea numrului de bii pentru coeficieni4. Prelucrarea valorilor obinute i compunerea fluxului final de bii5. Sunetul n context WebLa nivel de HTML tag Exemplu:

Formate suportate:mp3 type = audio/mpegwav type = audio/wavogg type = audio/oggAudio - atributeElementul :autoplay (bool) redarea automat a sunetuluicontrols (string) controalele de redare sunt afiate dac atributul este prezentloop (bool) permite redarea continu a sunetuluisrc (string) permite specificarea sursei fr utilizarea de tag-uri de tip sourcevolume (numeric) permite modificarea volumului (n intervalul 0 1)Elementul src (string) adresa (URL) fiierului audiotype (string) tipul MIME pentru fiierul audioAudio obiectul HTMLMediaElementProprieti:currentSrc URL-ul absolut al fiierului redatcurrentTime poziia (n secunde) n cadrul fiierului (poate fi modificat)duration durata total a fiierului audio (n secunde)ended boolean setat pe true la terminarea redriierror ultima eroare (obiect MediaError) sau null dac nu a aprut nici o eroarepaused boolean setat pe false la oprirea redriireadyState indic starea curent a elementuluivolume permite citirea / modificarea volumului

Audio obiectul HTMLMediaElementMetode:canPlayType(type) permite aplicaiei s determine dac browser-ul curent suport un anumit tip de fiier audio

load() pornete procesul de descrcare a fiierului audio de pe server; este obligatoriu s fie apelat nainte de nceperea redrii folosind metoda play()

pause() oprete redarea (cu pstrarea poziiei curente)

play() pornete redarea de la poziia curentAudio obiectul HTMLMediaElementEvenimente:canplay a fost ncrcat o parte din fiier i poate fi pornit redareaended redarea s-a terminatpause redarea a fost opritplay redarea a nceputvolumechange modificare de volumwaiting operaia curent este suspendat pentru a ncrca date de pe serverIV. Video1. Noiuni generale2. Compresia video3. Video n context web1. Noiuni generaleVideo digital cuprinde totalitatea tehnicilor de captur, procesare i stocare a imaginilor n micare (precum i a sunetului asociat) prin intermediul unui dispozitiv de calcul.

Avantaje video digital:Poate fi procesat prin intermediul calculatoruluiPstrare n timp i rezisten la copieri repetatePoate fi transmis la distanCaracteristici videoRezoluiaSpaiul de culoare i numrul de bii per pixelNumrul de cadre pe secundModul de afiare (ntresut sau progresiv)Calitatea compresieiFormate videoContainer specific structura de stocare a componentelor video (imagine + audio) i a datelor asociate (metadate, subtitrri, )Advanced Systems Format ASF: container dezvoltat de Microsoft care poate conine fluxuri codate cu orice codec (Extensii: .asf, .wma, .wmv)Audio Video Interleave AVI: container mai vechi dezvoltat de Microsoft pe baza Resource Interchange File Format RIFF (stocheaz datele n seciuni identificate prin markere FourCC)MP4 MPEG-4 Part 14: dezvoltat de ctre Motion Pictures Expert Group i utilizat iniial de ctre QuickTime (video H.264, audio AAC)AVCHD format utilizat n special de ctre camerele video (video H.264 AVC i sunet AC3 sau PCM)Matroska / OGG: formate deschise; pot conine mai multe fluxuri audio / videoFormate videoCodec specific modalitatea de compresie / decompresie pentru un flux video / audio n cadrul unui container

H.264 / MPEG-4 AVC cel mai popular (utilizat pentru Web, BluRay, camere video)

H.262 / MPEG-2 formatul standard pentru DVD

Windows Media Video format dezvoltat de ctre Microsoft

MJPEG (Motion JPEG) format mai vechi bazat pe compresia JPEG

2. Compresia videoSe bazeaz pe reducerea redundanei din cadrul fluxului videoRedundana spaial (intra-cadru)tipul de redundan identificat i eliminat de algoritmii de compresie a imaginilorRedundana temporal (inter-cadru)redundan identificat ntre dou cadre consecutive (de exemplu, prin compararea a dou cadre se observ c majoritatea pixelilor i pstreaz valoarea)Compresia MPEGAlgoritm de compresie video HibridTransformata Cosinus Discret similar JPEG pentru reducerea redundanei spaialeCodaj Huffman pentru comprimarea coeficienilor TCDCodificarea micrii pentru reducerea redundanei temporaleCodaj RLEAsimetricTimpul de codare este mult mai mare dect cel de decodare

Etapele de compresiemprirea imaginii n blocuri 16x16 luminan8x8 crominan (culoare)Compresie pe baza DCT pentru reducere spaial

Aplicarea tehnicilor de compensare a micrii pentru reducere temporal

Faza final de codare pe dou dimensiuni folosind Run Length Encoding

Tipuri de cadre Intra-picture/frame/imageCadrele cheieNecesare pentru cutare i poziionareCompresie moderat Predicted picturesCodate cu referin la un cadru anteriorFolosite ca referin pentru cadre ulterioare Bi-directional prediction (interpolated pictures) Necesit cadre anterioare i viitoare pentru refacereCompresie mareTipuri de cadre4. Video n context WebLa nivel de HTML tag Exemplu: Formate suportate:webm type = video/webmmp4 type = video/mp4.ogg type = video/oggAtribute / manipulare din JavaScriptSimilar cu elementul audioAtribute: autoplay, controls, src, volume, ...Reprezentat la nivel DOM prin obiecte de tip HTMLMediaElementProprieti: currentSrc, currentTime, duration, ended, error, paused, readyState, volumeMetode: canPlayType, load, pause, playEvenimente: canplay, ended, pause, play, volumechange, waitingExemple: ncrcare dinamic video var v = $("") .attr({ "controls": "hidden", "autoplay": "autoplay", "src": "media/movie.mp4" }) .load() .appendTo($("body")); // modificare sursv[0].src = "media/test.mp4";v[0].load();v[0].play();Exemple: Procesare cadru - 1var video = $("#video")[0];var canvas = $("#canvasProcesare")[0];var context = canvas.getContext("2d");function procesareCadru() { // requestAnimationFrame(procesareCadru);};requestAnimationFrame(procesareCadru);Exemple: Procesare cadru - 2var W = canvas.width = video.clientWidth;var H = canvas.height = video.clientHeight;context.drawImage(video, 0, 0, W, H);var imageData = context.getImageData(0, 0, W, H);for (var y = 0; y < H; y++) { for (var x = 0; x < W; x++) { var i = (y * W * 4) + x * 4;// modificare valori imageData.data[i+...] } }}context.putImageData(imageData, 0, 0);// alte operaii de desenare pe canvasExemple: Playlist simplu $(function () { var lista = ["movie.mp4", "v2.mp4"]; var index = 0; var video = $("#myVideo"); video.on("ended", function () { index = index + 1; if (index >= lista.length) { index = 0; } video[0].src = lista[index]; video[0].load(); video[0].play(); }); });