MANAGEMENT ÎN TECHNOLOGIA INFORMAȚIEI MANAGEMENTUL INFORMAȚIEI ȘI MULTIMEDIA Implementarea unei aplicații multimedia Coordonator științific Dr. Ing…. [308294]

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TECHNOLOGIA INFORMAȚIEI

MANAGEMENT ÎN TECHNOLOGIA INFORMAȚIEI

MANAGEMENTUL INFORMAȚIEI ȘI MULTIMEDIA

Implementarea unei aplicații multimedia

Coordonator științific

Dr. Ing. Gianina Gabor

Masterand: [anonimizat]2017-

ORADEA

Introducere

Multimedia reprezintă capacitatea de manevrare / obținere, prelucrare, stocare, transfer, prezentare/ într-o forma numerică integrată a informațiilor reprezentate prin mai multe mijloace media dintre care cel puțin unul este continuu (periodic, isocron, dependent de timp) și unul este discret (asincron, independent de timp) [BS97]. [anonimizat] a indica manevrarea integrata a mai multor medii informatice.

Tema proiectului prezentat în cadrul acestei lucrări constă în realizarea unei aplicații web de prezentare folosind elemente de tip multimedia. Aplicația în sine este alcătuită din 3 secțiuni corespunzătoare unor produse diferite; fiecare secțiune ilustrează particularitățile produsului prezentat folosind elemente vizuale interactive.

Principalul obiectiv imediat al aplicației este de ilustra viabilitatea construcției unei prezentări multimedia folosind caracteristici ale limbajelor de programare moderne. Pentru realizarea platformei sunt utilizate tehnologii de ultimă generație. Întregul proces de dezvoltare s-a axat în jurul limbajelor de programare(JavaScript) și prezentare(CSS, HTML) urmărindu-se implementarea celor mai noi concepte pentru dezvoltarea de aplicații Web moderne.

Această abordare a [anonimizat] a aplicației pe un număr cât mai mare de navigatoare Web.

Astfel, aplicația își propune să demonstreze viabilitatea tehnologiilor și a [anonimizat].

Conținut

2.1. [anonimizat].

HTML (HyperText Markup Language) este un limbaj de marcare folosit de navigatoarele Web pentru a determina modul de afișare a conținutului paginilor Web. Elemente de bază ale HTML sunt o [anonimizat]-uri sau etichete HTML. O altă caracteristică esențială a HTML o constituie posibilitatea realizării de legături (link-[anonimizat]) spre alte documente/pagini Web.

[anonimizat] a cincea sa revizuire . HTML5 aduce numeroase modificări la nivel sintactic prin introducerea de elemente noi( printre care <header>, <nav>, <section>, <article>, <nav>, <footer> ) sau prin alterarea unor elemente existente( <a>, <cite>, <menu> ). În cadrul proiectului, s-a urmărit conformarea cu specificațiile HTML5 și evitarea elementelor depreciate pentru a asigura o funcționare în parametri normali pentru o perioada cât mai îndelungată.

Dezvoltatorii web au urmărit utilizarea elementelor de tip video și audio în cadrul aplicațiilor Web încă de la începutul anilor 2000. Inițial, [anonimizat]ght au devenit populare ca și metode de prezentare ale acestor formate audio/video. Versiunea a cincea a limbajului HTML a permis adăugarea elementelor video și audio native și de asemenea a permis manipularea acestora folosind un API pentru JavaScript.

Elementele multimedia disponibile folosind HTML5 nu se rezumă doar la conținut audio si video. Introducerea elementului <canvas> a permis adăugarea de conținut dinamic care este accelerat la nivel hardware. Astfel, în conjuncție cu limbajul JavaScript, se pot adăuga elemente de tip text, video și audio dinamice, care pot fi prelucrate și modificate în timp real.

WebGL (Web Graphics Library) a reinventat modul de abordare al dezvoltării aplicațiilor web prin adăugarea de conținut 3D si 2D ce poate fi manipulat de către dezvoltator în cadrul navigatorului Web.

Deși limbajul HTML stă la baza construcției interfețelor web, modificările care pot fi aduse aspectului acestor interfețe, în cadrul limbajului, sunt limitate.

Limbajul CSS este utilizat pentru îmbunătățirea prezentării paginilor Web. CSS este un acronim pentru Cascading Style Sheets( foi de stil în cascadă ). Acest limbaj are rolul unui instrument avansat destinat proiectării unor site-uri Web profesionale care nu pot fi construite folosind atribute HTML obișnuite.

Ultimul standard al limbajului (CSS3 ) a fost utilizat pentru dezvoltarea proiectului întrucât această revizie introduce și extinde funcționalitatea a numeroase stiluri (animații, borduri, efecte) care s-au dovedit a fi esențiale pentru construcția interfeței aplicației.

JavaScript este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor, utilizat de programatorii de aplicații Web pentru a construi pagini Web dinamice . Utilitatea acestui limbaj este vizibilă în special la interfețele aplicațiilor web unde pot fi create noi funcționalități printre care: crearea de formulare interactive, validarea informațiilor, răspunsul la diverse evenimente.

Programarea orientată pe obiecte (POO) este o paradigmă de programare, axată pe ideea încapsulării, adică gruparea datelor și a codului care operează asupra lor, într-o singură structură. Un alt concept important asociat programării orientate obiect este polimorfismul, care facilitează abstractizări ce permit o descriere conceptuală mai simplă a soluției.

JSON este un format de reprezentare a datelor și de interschimbare a acestora între aplicații informatice. Numele de JSON este un acronim pentru JavaScript Object Notation. Este un format text, inteligibil pentru oameni, utilizat pentru reprezentarea obiectelor și a altor structuri de date și este folosit în special pentru a transmite date structurate prin rețea printr-un proces numit serializare. Un avantaj al acestui format îl reprezintă faptul că există implementări ale procesului de serializare și deserializare în aproape orice limbaj de nivel înalt. Astfel poate fi folosit pentru vehicularea datelor între aplicații care folosesc limbaje diferite și are o reprezentare mai simplificată decât principalul concurent: limbajul XML .

2.2. Biblioteca PEX

Biblioteca PEX a fost creata cu scopul de simplifica modul de dezvoltare al paginilor Web interactive ce conțin elemente multimedia. În cadrul bibliotecii, există numeroase unelte și componente care pot fi utilizate atât de dezvoltatori experimentații cât și de artiști pentru a crea experiențe multimedia fără a fi nevoie de cunoștințe bogate în domeniul programării.

PEX este dezvoltat folosind limbajul Typescript iar codul este apoi convertit prin procesul de transpiling în cod JavaScript care poate fi utilizat în cadrul navigatoarelor Web. Dimensiunea și complexitatea codului dezvoltat este gestionată folosind PureMVC, o platformă de tip MVC (Model-View-Controller).

Biblioteca este alcătuită din mai multe componente, din care doar câteva sunt vizibile utilizatorilor aplicației dezvoltate.

Astfel, principala componentă este nucleul PEX care este încărcat în cadrul navigatorului Web sub forma unui script generat. Rolul acestei componente este de a citi și interpreta configurația principală și de a genera elementele multimedia prin care se va prezenta conținutul interactiv. Nucleul include de asemenea toate sub-componentele necesare pentru a asigura o experiență multimedia consistentă în toate navigatoarele Web populare.

O altă componentă a bibliotecii este platforma de abstractizare PEX. Aceasta a rolul de gestiona complexitatea arhitecturii DOM utilizate de nucleu și de asemenea oferă accesul la modalități abstracte de administrare a conținutului.

Sistemul API reprezintă o extensie a nucleului PEX și este totodată o componentă importantă a bibliotecii. Rolul acestui sistem este de a oferi dezvoltatorilor de aplicații bazate pe PEX o modalitate prin care să extindă funcționalitatea bibliotecii.

2.3. Configurația PEX

În cadrul bibliotecii PEX, există mai multe metode prin care se pot manipula anumite elemente ale nucleului înainte ca acesta sa încarce configurația principală.

În cadrul aplicațiilor Web există posibilitate de adăugare a unor obiecte JavaScript la nivel global (window) care precizează numărul de configurații și locația acestora.

Astfel, obiectul window["pexConfig"] are rolul de a preciza punctele(breakpoint) la care se vor încărca configurațiile și are următorul format:

Obiectul ConfigurationDescription are următoarele proprietăți:

De asemenea, in afara elementelor specifice fiecărei configurații, este posibilă adăugarea unei imagini de fundal care va fi prezentată utilizatorului în perioada de timp scursă până în momentul încărcării paginii prin obiectul window["pexBootstrap"]

Configurațiile principale sunt specificate folosind formatul JSON în cadrul unor fișiere care vor fi încărcate de nucleul PEX. Nucleul va interpreta această configurație iar apoi va crea elemente DOM în mod dinamic. Aceste elemente sunt poziționate absolut, iar interacțiunea utilizatorului este controlată de nucleu.

Intervenția bibliotecii PEX în modul de funcționare a paginii nu se oprește însă doar la adăugarea de elemente in DOM. Nucleul va executa o rutină de control a elementelor multimedia la începutul fiecărui interval de desenare folosind apeluri succesive ale navigatorului asupra window.requestAnimationFrame().

Structura unei configurații PEX este următoarea:

În cadrul configurației, elementele sunt organizate în module iar modulele pot avea mai multe stări, în funcție de gradul de interacțiune al utilizatorului. Modulele pot fi considerate paginile aplicației. Stările pot fi catalogate în stări interactive sau statice iar în cadrul acestora se afla conținutul.

Conținutul specificat poate fi, de asemenea, de mai multe tipuri. Valori suportate în ultima versiune sunt: ContentHotspot, ContentImage, ContentVideo și ContentHTML.

Structura unui modul este prezentată în figura 2.3.3.

În cadrul configurației se pot specifica stiluri care vor fi aplicate obiectelor. Aceste stiluri pot de asemenea sa fie scalabile. Valorile scalabile se vor calcula în funcție de rezoluția pentru care a fost proiectat conținutul față de rezoluția curentă a ecranului.

2.4. PureMVC

Biblioteca PEX a fost dezvoltată folosind platforma PureMVC care oferă o arhitectură de tip MVC (Model View Controller). În cadrul platformei, fiecare componentă are un rol prestabilit astfel încât sa poată fi asigurată comunicarea optimă între elementele aplicației.

Modelul are un rol dublu, este în primul rând o clasă care poate fi extinsă dar în același timp reprezintă și o regiune a aplicației. Acesta are rolul de a gestiona clasele de tip Proxy, care se preocupă cu diferitele date care sunt prelucrate de aplicație. O clasa de tip Proxy va comunica cu clasele View și Controller.

Clasele de tip View au rolul de a gestiona clasele de tip Mediator, iar acestea la rândul lor au fost create cu scopul de a gestiona evenimentele și datele trimise și primite de componentele unui View. Clasele de tip Mediator vor actualiza modelul și vor notifica Controller-ul.

Clasele de tip Controller au rolul de a gestiona clasele de tip Command, locul unde rezidă logica de tip business a aplicației. Comenzile vor notifica clasele de tip View și vor actualiza modelul.

Avantajul oferit de PureMVC în comparație cu alte soluții de tip MVC este faptul că acesta facilitează dezvoltarea modulară oferind posibilități de scalare a aplicației.

Diagrama conceptuală este ilustrată în figura 2.4.1.

Studiu de caz – Implementarea unei aplicații multimedia

Proiectul dezvoltat în cadrul acestei lucrări constă în realizarea unei aplicații web de prezentare folosind elemente de tip multimedia. Aplicația în sine este alcătuită din 3 secțiuni corespunzătoare unor produse diferite; fiecare secțiune ilustrează particularitățile produsului prezentat folosind elemente vizuale interactive.

Pagina principală prezintă legături spre fiecare produs. Aceste legături se vor deschide în ferestre noi cu scopul de a menține contextul primei pagini. Structura principală a proiectului este prezentată în figura 3.1.

Secțiunea corespunzătoare SHD MRI Machine folosește un mod de prezentare de tip stacked iar structura paginii este ilustrată în figura 3.2.

Structura secțiunii corespunzătoare AEG Washing Machine este ilustrata in figura 3.3.

Ultima secțiune are o structură diferită față de paginile existente deoarece întreg conținutul apare afișat pe o singura pagină.

De menționat este faptul că, datorită utilizării bibliotecii PEX, toate secțiunile sunt constrânse într-o singură pagină, legăturile din bara de adresare fiind generate automat fără a fi nevoie de a naviga către o pagină diferită.

3.1. Pagina principală

Rolul paginii principale este de a oferi legături spre celelalte secțiuni ale aplicației. La interacțiunea utilizatorilor, aceste legături se vor deschide in ferestre noi ale navigatoarelor Web.

Structura HTML a primei pagini este una simplă deoarece elementele DOM sunt adăugate ulterior de biblioteca PEX.

Astfel, în secțiunea de conținut a paginii este inclus un set de comenzi JavaScript care precizează locația configurațiilor JSON ce vor fi încărcate de PEX după cum urmează:

window["pexConfig"] = {

"loader":"resources/loader_no_aa.gif",

"configurations": [

{ "url" : "resources/main/main.json",

"resources" : "resources/main/",

"breakpointWidth" : 960,

"breakpointHeight" : 0

}

]

};

window.humboldtBaseUrl = "resources/";

window.pexBootstrap = [

{

"bg":"resources/main/module1/background.jpg",

"loader":"resources/loader_no_aa.gif",

"size":[960,540]

}

];

In cadrul obiectului pexConfig se poate observa faptul că pagina fost optimizată pentru rezoluția de 960×540. Biblioteca PEX va scala toate elementele de pe pagină în funcție de aceasta rezoluție originală dacă utilizatorul va vizita pagina folosind o dimensiune mai mare sau mai mică a ferestrei. De asemenea, în configurație se precizează imaginea de fundal care va fi afișată utilizatorului în cadrul procesului de încărcare a paginii.

Secțiunea de definire a configurației este urmată de referirii externe de programe Javascript ale căror ordine de declarare este foarte importantă. Astfel, întâi este necesară încărcarea platformei PureMVC care este utilizată de toate elementele bibliotecii PEX. În continuare se încărca librăria de abstractizare a DOM-ului, iar aceasta declarație este urmata de programul PexBoot care, în funcție de variabilele specificate în secțiunea de definire a configurației, va încărca nucleul PEX și va începe prelucrarea paginii.

În cadrul configurației JSON, inițial se definește tipul interfeței. PEX va determina moduri de afișare diferite ale conținutului atunci când interfața e de tip scroll sau de tip stacked.

În cazul de față interfața aleasă e una de tip scroll, fără pagini suplimentare, iar conținutul e optimizat pentru o rezoluție de 960×540:

"layout": {

"type": "scroll",

"responsive": "scaleToWidth",

"size": [960, 540]

},

În continuare, în cadrul configurației JSON, se defineșc modulul principal și stările acestuia. În starea interactiva sunt adăugate 3 butoane de tip imagine. Această abordare permite utilizatorului să interacționeze cu butoanele ți permite lansarea de evenimente și animații. Elementele interactive sunt interpretate de PEX iar apoi sunt transformate în instanțe ale clasei ContentHotspot. Structura unui astfel de buton este următoarea:

{

"type": "hotspot",

"x": 100,

"y": 160,

"w": 274,

"h": 166,

"align": [1, 1],

"action": {

"type": "linkNew",

"target": "alluraclarity/index.html"

},

"style": "image",

"src": "module1/hotspot-alluraclarity.png",

"src_over": "module1/hotspot-alluraclarity-over.png",

"animate": {

"in": {

"reference": "upIn",

"delay": 1,

"duration": 0.3

}

}

}

În configurație, poziționarea este specificată folosind atributele x,y iar dimensiunile folosind w și h. Aceste valori sunt scalate în funcție de rezoluția la care rulează navigatorul utilizatorului.

Acțiunea care va avea loc în momentul în care utilizatorul interacționează cu butonul este specifictă folosind atributul action, iar în acest caz, se specifică faptul că se dorește navigarea la următoarea pagina, folosind o fereastră nouă pentru a deschide legătura.

Efectele vizuale sunt specificate folosind atributul animate. Astfel, după o secunda din momentul în care utilizatorul declanșează evenimentul de hover, imaginea specificată folosind atributul src va fi înlocuită cu cea din src_over în mod animat, timp de 0,3 secunde.

Interfața generată de această configurație JSON în conjuncție cu nucleul PEX este ilustrată în figura 3.1.1.

3.2. Prima secțiune – SHD

Secțiunea dedicată scanerului IRM Imagistică prin rezonanță magnetică este tot o configurație bazata pe biblioteca PEX. Diferența față de prima pagină o reprezintă natura informației multimedia care este transpusă utilizatorului.

Modul de pregătire al configurației și ordinea de încărcare a fișierelor Javascript este similară cu abordarea utilizată pe pagina principală.

În ceea ce privește configurația JSON, elementele acestei paginii sunt diferite față de cele prezente în arhitectura paginii principale. Astfel, această pagină utilizează o organizare a modulelor de tip stacked. O organizare de tip stacked semnifică faptul că doar un modul este vizibil utilizatorului la un moment dat, iar modulul inițial este cel care apare primul în listă; în acest caz modulul inițial este 360.

De asemenea, conținutul aceste pagini este optimizat pentru o rezoluție(1024×704) relativ diferită față de cea a paginii de pornire:

"layout": {

"type": "stacked",

"responsive": "scaleToFill",

"size": [1024,704]

},

Totodată, creșterea complexității conținutului a dus la necesitatea declarării de stiluri globale care vor fi reutilizate in conținut. Aceste stiluri definesc culoarea, alinierea si tipografia textului. De asemenea sunt prezente si stiluri scalabile care asigura o consistenta in cea ce privește dimensiunea elementelor si a textului conținut în acestea:

"styles": {

"BlueCopy": {

"color": "#252f47",

"textAlign": "left",

"fontFamily": "centralesanslight"

},

…

},

"scalableStyles": {

"BlueCopy": {

"fontSize": 16,

"width": 190,

"height": 350,

"lineHeight": 21

},

…

},

Modulul inițial este unul de tip rotator; acesta este singurul modul care necesita un comportament specializat din partea nucleului PEX. In momentul in care un obiect de tip rotator e adăugat unui modul, orice interacțiune de tip drag folosind mouse-ul sau atingeri ale ecranului este interceptata de nucleul PEX. Nucleul va controla apoi setarea cadrului curent pentru fiecare conținut multimedia din straturile modulului.

Această abordare permite utilizarea imagini sau conținut video care sunt controlate de schimbări ale secvențelor de cadre.

Toate elementele din PEX care utilizează conceptul de rotație, folosesc o valoare normalizata intre 0,0 si 1,0 pentru a mapa rotațiile, unde 1,0 reprezintă o rotație completa prin secvența de cadre.

În cazul de fata se specifica faptul ca modulul numit 360 va avea 100 de cadre de rotație, iar PEX va decide, in funcție de performantele si natura navigatorului Web curent, daca va utiliza imagini sau un fișier video pentru a reda conținutul.

"rotator": {

"range": 100

},

Încărcarea dinamica a conținutului se specifica prin intermediul proprietății formats, PEX având reguli interne pentru a decide numele real al fișierelor care vor fi utilizate pentru fiecare rotație.

{

"formats": [

{

"format": "mp4",

"duration": 4,

"bandwidth": "300"

},

{

"format": "webm",

"bandwidth": "300"

},

{

"format": "jpg"

}

],

"src": "360/360-default/360-default_%{range}.%{format}"

}

Pe pagina inițială este de asemenea prezent un buton care va permite schimbarea modului curent la interacțiunea cu utilizatorul. Butonul va dicta o tranziție de tip video înspre următorul modul, forțând nucleul PEX sa utilizeze o animație video in momentul intermediar celor 2 module:

{

"type":"hotspot",

"x":233,

"y":639,

"w":180,

"h":39,

"align":[

0.5,

0.9

],

"action":{

"type":"module",

"transition":{

"type":"video",

"videoContent":{

"formats":[

{

"format":"mp4",

"bandwidth":"300"

},

{

"format":"webm",

"bandwidth":"300"

},

{

"format":"jpg"

}

],

"align":[

0.5,

0.15

],

"scale":1,

"src":"360/Transition_360.%{format}"

},

},

"target":"SHD1"

},

"style":"image",

"src":"360/SHD1.png"

},

Interfața generata utilizând configurația JSON descrisa mai sus este ilustrata in figura 3.2.1.

Al doilea modul, numit SHD, este încărcat in urma interacțiunii utilizatorului si conține in total 28 de stări. Fiecare stare poate definii propriul conținut alături de elementele interactive.

Exista anumite elemente interactive in cadrul celui de-al doilea modul care sunt declarate doar o dată, in secțiunea stării interactive, cu scopul de a reduce cantitatea de cod. Astfel, fiecare element interactive conține un atribut suplimentar numit states unde se specifica stările in care elementul va fi vizibil in DOM. Un astfel de exemplu este săgeata dreapta care permite utilizatorului sa navigheze la starea următoare:

{

"type":"hotspot",

"x":897,

"y":243,

"w":34,

"h":34,

"states":[

"SHD1-01"

],

"align":[

0.5,

0.15

],

"action":{

"type":"stateClick",

"transition":{

"type":"fade"

},

"target":"SHD1-02"

},

"style":"image",

"src":"SHD1/next.png",

"src_over":"SHD1/next_color1.png"

}

Conținutul de tip text prezent in fiecare stare a celui de-al doilea modul va utiliza referințele de stil declarate in partea de antet a configurației:

{

"html":"How will the lesion composition impact my treatment strategy?",

…

"style":{

"reference":"BlueCopy"

},

"scalableStyle":{

"reference":"BlueCopy"

},

}

Este de menționat faptul ca, in cadrul configurației JSON, straturile unei stări specifice modului trebuie adăugat in ordine inversa apariție lor pe ecran.

Interfața paginii inițiale este ilustrata in figura 3.2.1 iar cea a paginilor secundare in figura 3.2.2.

3.3. A doua secțiune – AEG

Secțiunea care corespunde mașinii de spălat AEG este similara cu cea anterioara, însă exista un număr de elemente multimedia care sunt utilizate doar in acest sub-proiect.

Configurația din fișierul principal index.html prezinta anumite caracteristici care nu sunt prezente pe pagina de pornire sau in secțiunea anterioara. Astfel, in cadrul acestui proiect este prezentata o forma customizata de specificare a modulelor care vor fi încărcate componenta PexBoot. De asemenea, după cum se poate observa in forma de construcție a configurațiilor window.pexConfig si window.pexBootstrap, acum exista doua configurații paralele care vor fi încărcate dinamic in funcție de rezoluția ferestrei navigatorului Web. Versiunea mobila este optimizată pentru rezoluția de 540×720 pixeli:

window["pexBootModules"] = ["pexID", "bootstrap", "pexScript", "tracking"];

window.pexConfig = {

"configurations":[

{

"url":"resources/WMMaster_web/WMMaster_web.json",

"resources":"resources/WMMaster_web/",

"breakpointWidth":960

},

{

"url":"resources/WMMaster_mobile/WMMaster_mobile.json",

"resources":"resources/WMMaster_mobile/",

"breakpointWidth":540

}

]

};

window.pexBootstrap = [

{

"bg":"…",

"loader":"resources/loader.gif",

"size":[960,540]

},

{

"bg":"…",

"loader":"resources/loader.gif",

"size":[540,720]

}

];

Modul de prezentare a acestei secțiuni este de tip stacked, iar primul modul, similar modelului anterior, include un video interactiv de tip rotator. Diferența fata de secțiunile anterioare o reprezintă faptul ca elementele interactive au poziții relative in funcție de cadrul curent. In cadrul configurației, acest comportament a fost specificat prin includerea unui sir de coordonate pentru fiecare cadru:

{

"type": "hotspot",

"adjustOffset":[-130,-330], "x":[624,625,624,623,622,621,619,617,615,613,610,607,604,601,597,593,589,584,579,574,568,562,555,549,541,534,526,517,508,499,489,479,468,458,447,436,425,414,403,392,381,370,359,347,336,324,313,302,291,280,270,261,252,243,236,229,224,220,217,215,214,214,216,219,223,227,232,238,244,249,254,259,263,265,266], "y":[238,238,238,237,237,237,236,235,234,233,232,231,229,228,226,225,223,221,219,217,214,212,209,207,204,201,198,195,192,189,186,183,181,178,176,174,172,171,170,170,170,171,173,175,178,181,186,190,195,201,207,214,221,229,236,244,252,260,267,275,282,288,294,298,303,306,309,312,314,317,319,321,323,325,325], "w":[55,55,56,56,56,56,57,57,57,57,58,58,58,58,59,59,59,59,60,60,60,60,61,61,61,61,62,62,62,62,63,63,64,64,65,65,66,66,67,67,68,68,69,69,70,70,71,71,72,72,73,75,76,78,79,80,82,83,84,85,85,86,87,87,87,88,88,87,87,87,87,87,86,86,85], "h":[55,55,56,56,56,56,57,57,57,57,58,58,58,58,59,59,59,59,60,60,60,60,61,61,61,61,62,62,62,62,63,63,64,64,65,65,66,66,67,67,68,68,69,69,70,70,71,71,72,72,73,75,76,78,79,80,82,83,84,85,85,86,87,87,87,88,88,87,87,87,87,87,86,86,85],

…

}

In cadrul acestei secțiuni se utilizează si capabilitatea de a adaugă text dinamic pe pagina pentru un interval de timp foarte bine definit. Cadrele din video pentru care textul trebuie sa fie vizibil sunt specificate folosind ["frame=inceput-sfarsit"].Un astfel de exemplu de structura dinamica este utilizat chiar pe prima pagina:

{

"html": "World first SoftWater Technology washing machines expertly purify and soften water to achieve breakthrough cleaning efficiency and unprecedented colour preservation.",

…

show": ["frame=0-20"],

"animate":"fade"

}

Interfața paginii de pornire este ilustrata in figura 3.3.1 iar comportamentul dinamic al elementelor de interacțiune este prezentat in figura 3.3.2.

Structura principala a modulelor care sunt legate de acest prim modul urmează un șablon similar. In cadrul fiecărui modul rulează un element multimedia de tip video iar fragmente de text dinamic sunt adăugate in momentele esențiale ale prezentării (figura 3.3.3). Pe lângă modul anterior de control al vizibilității folosind structura frame, in cadrul proiectului se utilizează si structuri de tipul ["videoTime=inceput-sfarsit"]. Diferența fata de abordarea anterioara o reprezintă faptul ca aceasta varianta permite control vizibilități elementelor in funcție de timpul scurs de la inițierea elementului video. Astfel, următorul exemplu demonstrează modul in care un text poate fi afișat deasupra unui video ca rulează in timp real, in intervalul [1 secunda-3secunde]:

{

"html": "water softening",

"offset": [335,250],

"style": {

"reference": "title"

},

"scalableStyle": {

"reference": "title",

"width": 800

},

"show": ["videoTime=0.5-3.1"],

"animate": "fade"

}

Spre deosebire de secțiunile anterioare, aceasta configurația JSON specifica si posibilitatea de încărcare a conținutului generat la rezoluții dinamice. In exemplul următor, nucleul PEX va încărca resursa optima in funcție de capabilitățile si rezoluția navigatorului Web:

{

"formats": [

{

"format": "mp4"

},

{

"format": "webm"

},

{

"format": "jpg"

}

],

"src":"USP1/USP1-02/USP1-02%{@1.333x|@1x|@0.666x|@0.5x}.%{format}",

"loop":true

}

Pentru a trata un caz concret, se considera faptul ca utilizatorul vizitează pagina utilizând o fereastra a navigatorului Web de mărimea 1920×1080 pixeli. De asemenea, se presupune faptul ca navigatorul Web este unul modern care suporta toate formatele specificate mai sus. Astfel, întrucât conținutul original a fost optimizat pentru rezoluția de 960×540 pixeli, nucleul PEX va considera indicele de scalare ca fiind 1920/960 = 2,00. In continuare, nucleul PEX va caută resursa optimizata pentru cea mai mare rezoluția, si, conform specificației anterioare va alege sa afișeze un elementul video a cărui sursa este fișierul USP1/USP1-02/USP1-02_1.333x.mp4.

3.4. A treia secțiune – YAMAHA

Ultima secțiune prezinta caracteristicele unei motociclete utilizând elemente interative care pot modifica anumite valori prestabilite pentru culorile dominante.

Acest comportament a fost implementat folosind capabilități native ale navigatoarelor Web moderne, fără a fi nevoie de soluții software terțe bazate pe Flash sau ActionScript.

Este de menționat faptul ca aceasta funcționalitate poate fi adăugată doar fișierelor video generate utilizând profele de export dezvoltate specific pentru nucleul PEX. Abordarea aceasta a fost necesara deoarece mecanismul de schimbare dinamica a culorii are nevoie de informații suplimentarea in ceea ce privește elementele afișate in fiecare cadru.

Implementarea acestei funcționalități in cadrul nucleului PEX a însemnat atât utilizarea elementului <canvas> introdus de HTML5 cat si a noului sistem API pentru gestionarea conținutului 3D.

Astfel, in momentul interpretării si validării configurației JSON, nucleul PEX va determina daca elementul video va fi redat in mod obișnuit sau daca va utiliza modulul 3D pentru a afișa conținutul.

Utilizarea modulului 3D (Video Configurator) presupune o configurația valida in specificația JSON. Dezvoltatorul trebuie sa specifica versiunea aplicațiilor vertex shader si pixel shader care va fi utilizata pentru a reda conținutul. Apoi, in cadrul configurației, trebuie specificate semnificația straturilor din cadrul fișierului video si poziția lor relativ fata de coltul stânga sus(poziția 0). Un element important in acest sens este si precizarea canalului de culoare utilizat pentru informațiile suplimentare din fișierul video. Aceste canale de culoare pot fi r,g,b,rg,rb,gb sau rgb. Tot in cadrul configurației, se vor specifica culorile care vor putea fi modificate de utilizator.

Configurația valida care a fost utilizata in cadrul acestui proiect este următoarea:

{

"configure":{

"engine":"v3",

"width":1200,

"height":1600,

"main":{

"name":"Main Render",

"channel":"rgb",

"rect":[

0,

0,

1200,

675

]

},

"layout":[

{

"id":"mask",

"type":"mask",

"name":"Colorize Mask",

"channel":"r",

"rect":[

0,

675,

1200,

675

]

},

{

"id":"color",

"type":"color",

"name":"Color",

"channel":"r",

"colorChoices":[

"8c0a22",

"e55521",

"e8bb17",

"d7e861",

"a3c6ec",

"4499ba",

"003e89",

"0f182f",

"819794",

"ffffff",

"030303"

]

},

{

"id":"delta",

"type":"delta",

"name":"Colorize Delta",

"rect":[

0,

1350,

320,

180

]

}

]

},

"formats":[

{

"format":"mp4",

"bandwidth":"300",

"vcolor":true

},

{

"format":"mp4",

"bandwidth":"300"

},

{

"format":"webm",

"bandwidth":"300"

}

],

"width":960,

"height":540,

"offset":[

0,

0

],

"align":[

0,

0

],

"autoplay":true,

"loop":true,

"src":"USP1/USP1%{_vcolor}.%{format}"

}

Astfel, in exemplu menținut mai sus, se specifica faptul ca se dorește utilizarea motorului grafic v3 iar culorile care vor putea fi modificate sunt: "8c0a22", "e55521", "e8bb17", "d7e861", "a3c6ec", "4499ba", "003e89", "0f182f", "819794", "ffffff", "030303".

Nucleul PEX va încărca elementul video in fundal iar apoi îl va ascunde si va copia cadrul actual într-un element canvas care folosește un context de desenare bazat pe WebGL. In momentul in care are loc redarea fișierului video, imaginea din canvas este reîmprospătată si prelucrată la fiecare cadru nou. Prelucrarea consta in schimbarea culorii secțiunilor precizate in configurația JSON si combinarea acestora pentru a obține imaginea finala.

Din punctul de vedere al performantei, aceasta metoda de redare a fișierelor video are nevoie de resurse sporite pentru a funcționa in parametrii normali; fiecare cadru trebuie prelucrat si redat înainte de a scurge un cadru de desenare (1000/60 = 16.667 ms). Majoritatea navigatoarelor moderne utilizează accelerarea de tip hardware pentru a putea reda acest tip de conținut iar impactul asupra performantei este unul minuscul, mai mic de 8ms.

De asemenea, pentru a asigura o performanta satisfăcătoare si pe dispozitivele mobile, in momentul încărcării paginii, nucleul PEX va efectua teste de performanta pentru a determina mărimea optima a texturilor ce vor fi desenate. Aceste texturi au dimensiuni corespunzătoare puterilor lui 2, iar fiecare creștere a rezoluției texturii va determina o dublare a resurselor utilizate.

Interfața standard a acestei secțiuni este ilustrata in figura 3.4.1 iar interacțiunea cu elementele care modifica caracteristicile documentului media redat sunt surprinse in figura 3.4.2. Figura 3.4.3 prezinta mecanismul de interconexiune a elementelor de interacțiune intre module diferite.

4. Concluzii

Avansarea continuă a tehnologiilor Web moderne a permis, în timp, dezvoltarea de aplicații complexe care utilizează în mod intensiv elemente de tip multimedia pentru a afișa un conținut relevant utilizatorului.

Folosirea bibliotecilor Web specializate a permis introducerea de capabilități multimedia noi fiind necesar doar un efort minim de dezvoltare.

Utilizarea tehnologiilor de ultima generație a avut ca si consecința dezvoltarea acestei aplicații moderne care se caracterizează prin performanta, rapiditate si o interfața ușor accesibila utilizatorilor.

Tema proiectului prezentat în cadrul acestei lucrări a constat în realizarea unei aplicații web de prezentare folosind elemente de tip multimedia. Aplicația în sine este alcătuită din 3 secțiuni corespunzătoare unor produse diferite; fiecare secțiune ilustrează particularitățile produsului prezentat folosind elemente vizuale interactive.

5. Bibliografie