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

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

Cuprins
1. Introducere ………………………….. ………………………….. ………………………….. ………………………….. ……….. 1
2. Conținut ………………………….. ………………………….. ………………………….. ………………………….. ……………. 2
2.1. Tehnologii utilizate pentru aplicații Web multimedia ………………………….. ………………………….. ……… 2
2.2. Biblioteca PEX ………………………….. ………………………….. ………………………….. ………………………….. …….. 3
2.3. Configurația PEX ………………………….. ………………………….. ………………………….. ………………………….. …. 4
2.4. PureMVC ………………………….. ………………………….. ………………………….. ………………………….. ……………. 7
3. Studiu de caz – Implementarea unei aplicații multimedia ………………………….. ………………………….. . 9
3.1. Pagina principală ………………………….. ………………………….. ………………………….. ………………………….. . 10
3.2. Prima secțiune – SHD ………………………….. ………………………….. ………………………….. ……………………… 13
3.3. A doua secțiune – AEG ………………………….. ………………………….. ………………………….. ……………………. 20
3.4. A treia secțiune – YAMAHA ………………………….. ………………………….. ………………………….. …………….. 25
4. Concluzii ………………………….. ………………………….. ………………………….. ………………………….. ……………… 30
5. Bibliografie ………………………….. ………………………….. ………………………….. ………………………….. …………. 31

1
1. 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, de pendent de
timp) și unul este discret (asincron, independent de timp) [BS97]. Acest concept poate fi
asociat ca atribut aplicațiilor, serviciilor și sistemelor pentru 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 pla tformei sunt utilizate tehnologii de ultimă generație. Întregul proces
de dezvoltare s -a axat în jurul limbajelor de programare(Java Script) și prezentare(CSS,
HTML) urmărindu -se implement area celor mai noi concepte pentru dezvoltarea de
aplicații Web moder ne.
Această abordare a asigurat un grad mare de performanță și de compatibilitate cu cele
mai noi versiuni ale sistemelor de operare și în același timp, posibilitatea de vizualizare a
aplicației pe un număr cât mai mare de navigatoare Web .
Astfel, aplicați a își propune să demonstreze viabilitatea tehnologiilor și a platformelor de
dezvoltare moderne în construcția unei prezentări multimedia complex e și performant e,
alcătuit ă din componente care utilizează date dinamice .

2
2. Conținut
2.1. Tehnologii utilizate pentru aplicații Web multimedia
Pentru construcția interfeței și prezentarea informațiilor în cadrul aplicațiilor Web
moderne de tip multimedia se utilizează în principal limbajele HTML, CSS și JavaScript.
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 serie de câmpuri sau marcaje speciale, numite și tag -uri sau etichete
HTML. O altă caracteristică es ențială a HTML o constituie posibilitatea realizării de legături
(link -uri sau hyperlink -uri) spre alte documente/pagini Web.
La momentul scrierii acestei lucrări, standardul HTML se află la 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 elemen te existente( <a>, <cite>, <men u> ). Î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 200 0. Inițial , tehnologiile Web native nu
permiteau utilizarea acestor elemente, însă tehnologii terțe cum ar fi Flash și Silverlight
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 Jav aScript, 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 c are 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

3
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 dezvolt area 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 obi ect 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 intersc himbare 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 speci al 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 poa te 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 simpli fica modul de dez voltare 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 converti t prin procesul
de transpiling î n cod Jav aScript care poate fi utilizat î n cadrul navigatoarelor We b.
Dimensiunea și comp lexitatea codului dezvoltat este gestionat ă folosind PureMVC, o
platformă de tip MVC ( Model -View -Controller ).

4
Biblioteca este alcătuită din mai multe componente, din care doar câteva sunt vizibile
utilizatorilor aplicației dezvoltate.
Astfel, principala c omponentă 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
gesti ona 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 ace stui sistem este de a oferi dezvo ltatorilor 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 Java Script la nivel
global (window) ca re 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:
Numele proprietății Tipul de date Descriere
configurations ConfigurationDescription Configurațiile specifice
fiecărui breakpoint
loader Text Adresa web unde se află
imaginea care fi afișată
temporar, înainte de a se
încărca pagina

Figura 2.3.1. Specificația obiectului pexConfig

5
Obiectul ConfigurationDescription are următoarele proprietăți :
Numele proprietății Tipul de
date Descriere
url Text Adresa web unde se afl ă fișierul JSON de
configura re
resources Text Adresa web unde se afl ă resursele (imagini,
video, audio)
readyHandler Text Acest element permite specificarea unui
comportament care va fi executat în momentul
încărcării paginii
breakpointWidth Număr
întreg Lățimea maxima a documentului, în pixeli,
pentru care aceast ă configurație va fi
considerat ă
breakpointHeight Număr
întreg Lățimea maxim ă a documentului, î n pixeli,
pentru care aceast ă configurație va fi
considerat ă
De asemenea , in afara elementelor specifice fiecărei configurații , este posibil ă adăugarea
unei imagini de fundal care va fi prezent ată utilizatorului în perioada de timp scurs ă până
în momentul încărcării paginii prin obiectul window["pexBootstrap"]
Configurațiile principale sunt spec ificate 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țion are 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.requestAnimationFra me() .

Figura 2.3.2. Specificația obiectului ConfigurationDescription

6
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ținu tul.
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.

Numele
proprietății Tipul de date Descriere
layout Obiect Layout Permite definirea rezoluției optime
și a modului de prezentare pentru
module
spritesheets Obiect Spritesheet Permite specificarea imaginilor de
tip sprite -sheet și segmentele
aferente
styles Obiect Style Permite specificarea de stiluri
reutilizabile pentru conținut
scalableStyles Obiect ScalableStyle Permite specificarea de stiluri
scalabile reutilizabile pentru
conținut
modules Lista de obiecte Module[] Permite specificarea paginilor
aplicației , alături de stările și
conținutul acestora
options Obiect
ConfigurationOptions Permite alterarea
comportamentului nucleului PEX la
nivel de aplicație
Figura 2.3.2. Specificația configurației JSON

7
Î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 model ul ș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 vo r notifica clasele de tip View și vor actualiza
modelul. ModulStare InteractivăConținut
Conținut
…
[Blocuri de
interacțiune]
Stare StaticăConținut
Conținut
… …Stare staticaConținut
Conținut
…
Figura 2.3.2. Structura configurației JSON

8
Avantajul oferit de PureM VC î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.

Figura 2.4 .1. Diagrama de funcționare PureMVC

9
3. 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ă . Pagina inițială
(/)
SHD MRI
Machine
(/alluraclarity)AEG Washing
Machine
(/wmmaster)Yamaha
(/yamaha)
Figura 3.1. Structura aplicației
Pagina Principală More InformationDecide
Guide
Confirm
Figura 3.2 . Structura secțiunii SHD MRI Machine

10
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 JavaS cript 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/", Pagina PrincipalăSoft WaterBenefits
Tehnology
OKOPower
SoftPlus
WoolMark
ProSteam
ProSense
OKOMix
Figura 3.3. Structura secțiunii AEG Washing Machine

11
"breakpointWidth" : 960,
"breakpointHeight" : 0
}
]
};

window.humboldtBaseUrl = "resources/";
window.pexBootstrap = [
{
"bg":"resources/main /module1/backg round.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 b ibliotecii 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",

12
"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 interpre tate 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 specific ată 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.

13
Acțiunea care va avea loc în momentul în care utilizatorul interacționează cu butonul este
specific tă 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 specifica te folosind atrib utul 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.
Figura 3.1 .1. Interfa ța paginii principale

14
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 folos ind 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.

15
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}"
}

16
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":[

17
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 a numite 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,

18
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.

19
Interfața paginii inițiale este ilustrata in figura 3.2.1 iar cea a paginilor secundare in figura
3.2.2 .
Figura 3.2 .1. Interfa ța paginii principale
Figura 3.2 .2. Interfa ța paginilor secundare

20
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.pexC onfig 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":5 40
}
]
};
window.pexBootstrap = [
{
"bg":"…",
"loader":"resources/loader.gif",
"size":[960,540]
},
{
"bg":"…",

21
"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,5
79,574,568,562,555,549,541,534,526,517,508,499,489,479,468,458,447,436,425,414,403,39
2,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,2
19,217,214,212,209,207,204,201,198,195,192,189,186,183,181,178,176,174,172,171,170,17
0,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,6
1,61,62,62,62,62,63,63,64,64,65,65,66,66,67,67,68,68,69,69,70,70,71,7 1,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,6
1,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 brea kthrough cleaning efficiency and unprecedented colour
preservation.",
…
show": ["frame=0 -20"],
"animate":"fade"

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

Figura 3.3 .1. Interfa ța paginii principale
Figura 3.3 .2. Elemente multimedia dinamice in cadrul paginii principale

23
Structura principala a modulelor care sunt legate de acest prim modul urmează un șablon
similar. In cadrul fiecăru i 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"
},

24
{
"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.

Figura 3.3 .3. Elemente multimedia dinamice în cadrul paginilor secundare

25
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 importa nt 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 cadru l 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":[

26
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",

27
"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"
}
],

28
"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 as cunde 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ă accel erarea 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 performan ta 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.

29
Interfața standard a acestei secțiuni este ilustrata in figura 3.4.1 iar interacțiunea cu
elementele care modifica caracteristicile documentului media re dat sunt surprinse in
figura 3.4.2 . Figura 3.4.3 prezinta mecanismul de interconexiune a elementelor de
interacțiune intre module diferite.
Figura 3.4 .1. Interfa ța paginii de pornire
Figura 3.4 .2. Modificarea in timp real a caracterisiticilor continutului multimedia

30
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 s e 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 si ne este alcătuită
din 3 secțiuni corespunzătoare unor produse diferite; fiecare secțiune ilustrează
particularitățile produsului prezentat folosind elemente vizuale interactive.
Figura 3.4.3. Modificarea în timp real a caracteristicilor conținutului multimedia

31
5. Bibliografie