Tehnici de implementare a [629404]

Tehnici de implementare a
unei aplicații multimedia

Managementul informației și multimedia
Ștefan Alexandra -Anamaria, MTI II

1. Introducere
Disponibilitatea componentelor hardware și software multimedia a dus îmbunătățirea
aplicațiilor existente la a fie mai ușor de utilizat (fapt cunoscut sub numele de re -engineering).
De asemenea, a inițiat dezvoltarea continuă a noilor aplicații multimedia. Aplicațiile sunt foarte
importante pentru întregul domeniu de calcul multimedia și a comunicațiile, deoarece a cestea
sunt singurul motiv pentru care ar dori cineva să investească în acest domeniu. Cu toate acestea ,
până în prezent nu s-a făcut nici o încercare serioasă de a clasifica aceste aplicații.
Numărul de aplicații multimedia este în continuă creștere, din acest motiv prezenta lucrare își
propune să prezinte o imagine struturată asupra domeniului aplicațiilor multimedia cât și să
prezinte în detaliu tehnicile de creare a unei astfel de aplicații .

2. Aplicații multimedia în detaliu
Acest capitol își propune să prezinte particularitățile unei aplicații multimedia, cât și
instrumentele, limbajele, soft -urile folosite pentru a crea o asemenea aplicație.
2.1 Elementele unei aplicații multimedia
Multiplele modalități pentru componente text, audio, imagini, desene/schițe, animații și
videoclipuri în aplicațiile multimedia s unt puse în folosință în diverse feluri precum [1]:
 teleconferințe video;
 lecții distribuite pentru educație superioară;
 telemedicină;
 medii de lucru cooperative care permit oamenilor de afaceri să editeze documente
partajate sau școlarilor să partajeze un singur joc utilizând doi șoareci care preiau
controlul pe rând;
 căutarea videoclipurilor și imaginilor mari și foarte mari pentru obiecte vizuale țintă;
 realitate augmentată; plasarea un ei grafice pe calculator care par reale și a unor obiecte
video în scene în așa fel încât să se ia în considerare fizica obiectelor și a luminii (de
exemplu umbrele);
 semnale audio pentru locul unde sunt așezați participanții la conferințele video, cât și
luarea în considerare a direcției privirii și atenția participanților;
 construirea caracteristicilor care se pot căuta în videoclipuri noi și îngăduirea utilizării
unui bitrate foarte mare sau foarte mic pentru produse multimedia noi, scalabile;

 construire a de componente multimedia editabile – permiterea utilizatorului să decidă
ce componente, video, grafice și așa mai departe sunt văzute și permiterea clientului să
mute componente sau să le șteargă – construirea de componente distribuite;
 construirea de ap licații care permit recrearea procesului prin care s -a creat un video,
permițând vizualizarea în stil storyboard sau a unei sumarizări;
 utilizarea recunoașterii vocale pentru a construi un mediu interactiv – cum ar fi un
browser web pe peretele unei bucătă rii.
Pentru cercet ătorul obișnuit, multimedia constă într -o varietate largă de subiecte [2]:
 Procesarea multimedia și codarea. Acest subiect include analiza conținutului
multimedia, securitatea multimedia, procesarea de audio/imagine/video, compresie și
așa mai departe;
 Suportul sistemelor multimedia și networking -ul.
 Tool -uri/Instrumente multimedia și aplicații. Acestea includ sisteme hypermedia,
interfețe utilizator, sisteme de creație, interacțiuni multimodale, și integrare.
Ted Nelson a inventat termen ul de „HyperText” prin anul 1965. Pe când ne gândim la o carte
ca fiind un mediu liniar, adică este menit spre a citit de la început până la sfârșit, un sistem
hypertext este menit să fie citit nonliniar, prin urmare avem link -uri care pointează la alte p ărți
al documentului, sau într -adevăr la alte documente. Figura 1 ilustrează această idee.

Figura 1. Hypertext -ul este nonliniar

Hypermedia nu este restricționat la a fi bazat pe text. Poate să includă alte media, cu ar fi
grafice, imagini și în mod special sunete sau video. Aparent tot Ted Nelson a fost primul care
a folosit acest termen. World Wide Web -ul este cel mai bun exemplu al unei aplicații
multimedia.
Așa cum am văzut , multimedia înseamnă că informația computerizată poate fi reprezentată pri n
audio, grafice, imagini, video și animații pe lângă media tradițională (text și grafice).
Hypermedia poate fi considerată o aplicație multimedia particulară.
Exemple de aplicații multimedia tipice includ: sistemele de editare și producere a
videoclipuril or digitale, ziarele și revistele electronice, World Wide Web -ul, enciclopedii,
jocuri, TV -ul interactiv etc.
2.2 Limbaje și i nstrumente utilizate pentru aplicații multimedia

Imagine 2.1. World Wide Web
World Wide Web – este cel mai mare și mai folosită aplicație hypermedia. Popularitatea sa
este dată din cauza cantității informațiilor accesibile de pe serverele web, capacitatea de posta
astfel de informații și ușurința navigării prin asemenea informații utilizând browserele web.
Tehnologia WWW este întreținută și dezvoltată de către World Wide Web Consortium (W3C),
deși Internet Engineering Task Force (IETF) standardizează aceste tehnologii. W3C are
următoarele țințe pentru WWW: accesul universal al resur selor web (de către oricine, de
oriunde), eficacitatea navigării informațiilor disponibile, și utilizarea responsabilă a acestor
materiale.

HyperText Transfer Protocol (HTTP) – este un protocol care a fost proiectat pentru a transmite
hypermedia, dar permite, de asemenea, transmiterea a oricărui tip de fișier. HTTP nu are stare,
este un protocol cerere/răspuns „stateless”, în sensul în care un client deschide o conexiune la
serverul HTTP, cere o informație, server -ul răspunde și conexiunea este închisă – nici o
informație nu este păstrată sau stocată pentru următoare cerere.
Formatul de bază este:
Method URI Version
Additional -Headers
Message -body

Uniform Resource Identifier (URI) identifică resursa accesată, cum ar fi numele host -ului,
întotdeauna pre cedat de token -ul „http://” . Un URI poate fi o resursă uniformă de localizare –
Uniform Resource Locator (URL), de exemplu. Aici, URI -ul poate să includă string -uri de
interogare (unele interacțiuni necesită trimiterea de date). Method – este o modalitate de a
schimba informații sau de a realiza sarcini pe URI. Două metode populare sunt GET și POST.
GET specifică faptul că informația cerută este în șirul de caractere de cerere în sine, iar metoda
POST specifică că resursa aratată în URI ar trebui să consid ere corpul (body) mesajului. POST
este în general folosit pentru submiterea de formulare HTML. Additional -Headers specifică
parametri adiționali despre client.
Formatul de baz ă este:
Version Status -Code Status -Phrase
Additional -Headers
Message -body

Statu s-Code este un număr care identifică tipul de răspuns ( sau eroarea care s -a întâmplat), și
Status -Phrase este textul care descrie ce reprezintă acest număr. Cele mai comune coduri de
status și fraze sunt 200 OK când cererea a fost procesată cu succes și 40 4 Not Found când URI –
ul nu există.
HyperText Markup Language (HTML) – este un limbaj pentru publicarea hypermedia pe
World Wide Web. Este definit utilizând SGML și derivă elemente care descrie o structură și

formatare de document generică. De când utilizea ză ASCII, este portabil pe orice fel de
hardware (chiar și pe cele incompatibile binar), ceea ce îngăduie interschimbarea globală de
informații. Noua generație de HTML este XHTML, o reformulare a HTML utilizând XML.
HTML utilizează tag -uri care descriu el ementele document. Tag -urile sunt în formatul <token
params> pentru a defini un punct de start pentru un element al documentului și </token> pentru
a defini sfârșitul elementului. Unele elemente au doar parametri în linie și nu necesită un tag
de închidere . HTML împarte documentul într -o parte HEAD și BODY după modelul următor:
<HTML>
<HEAD>
…
</HEAD>

<BODY>
…
</BODY>
</HTML>
HEAD -ul descrie defini țiile de document, care sunt parsate înaintea oricărei randări de
document. Acestea includ titlurile de pagină, link -uri resursă, și meta informații pe care autorul
decide să le specifice. Partea de BODY descrie structura și conținutul documentului.
Elementele de structură comune sunt paragrafe, tabele, formulare, ancore, liste de iteme, și
butoane.
Un exemp lu de o pagină simplă HTML este:
<HTML>
<HEAD>
<TITLE>
Un exemplu de pagină web
</TITLE>
</HEAD>

<BODY>
<p>Text exemplu</p >
</BODY>

</HTML>
În mod normal, HTML are structuri mult mai complexe și poate fi îmbinat cu alte standarde.
Standardul a evoluat pentru a permite integrarea limbajelor de script, manipularea dinamică a
aproape tuturor elementelor și proprietăților după afișarea client side (HTML dinamic), și
customizarea modulară al tutoror parametrilor randate utilizând un limbaj markup numit
Casca ding Style Sheets (CSS). Cu toate acestea, HTML are o structură de elemente rigide,
nodescriptive și modularitatea este greu de obținut.
Extensible Markup Language (XML). Există nevoia de un limbaj markup pe WWW care deține
potențialul spre modularitate al datelor, al structurii și al afișării. Ceea ce înseamnă că se dorește
ca utilizatorul sau aplicația să poată să definească tag -urile îngăduite (structura) într -un
document și relațiile între ele, într -un loc, mai poi să definească datele utilizând aceste tag-uri
într-un al loc (fișierul XML) și, într -un final, să definească într -un alt document cum să fie
randate aceste tag -uri.
Să presupunem că s -ar dori să se aibă informații aduse dintr -o bază de dată într -un de o
interogare făcută de utilizator. Utilizâ nd XML, am putea folosi un Document Type Definition
global pe care l -am definit deja pentru datele dorite. Script -ul server -side va urma regulile DTD
pentr ua genera un document XML în funcție de interogare, utilizând datele din baza de date.
Într-un final , se vor trimite utilizatorilor un XML Style Sheet (XSL), depinzând de tipul
dispozitivului pe care utilizatorul îl folosește pentru a vizualiza datele, astfel încât documentul
arată bine oricare ar fi dispozitivul.
Sintaxa XML arată ca sintaxa HTML, deși cea din urmă este mult mai strictă. Toate tag -urile
sunt cu litere mici, și un tag care are doar date inline trebuie să se închidă, de exemplu, <token
params />. XML utilizeaz ă, de asemenea, namespace -uri, astfel încât multiple DTD -uri care
declară diverse elemente, dar cu nume de tag -uri similare pot fi separate. DTD -urile pot fi
importante din URI -uri, de asemenea. Ca un exemplu al unui structuri de document XML, aici
este o definiție a unui document XHTML mic:

<?xml version="l.0" encoding="iso -8859 -1"?>
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0"
"http://WVlW.w3.org/TR/xhtmll/DTD/xhtmll -transition.dtd">
<html xmlns="http: / /wvlW.w3 .org/1999/xhtml">

</htrnl>

Toate docume ntele XML încep cu <?xml version="ver"?><!DOCTYPE …> și acest tag
special utilizat pentru importarea de DTD -uri. Pentru că e o definiție DTD, nu aderă la
regulile XML. xmlns definește un namespace XML unic pentru elementele documentului. În
acest caz, n amespace -ul conține web site -ul pe care sunt specificațiile XHTML.

Pe lângă specificațiile XML, următoarele specificații legate de XML sunt standardizate:
 Protocolul XML – utilizat pentru interschimbarea de informa ții XML printre procese.
Este menit pentru a înlocui HTTP și pentru a -l extinde, cât și pentru a permite
comunicațiile între procese între rețele;
 XML Schema – este un limbaj mai puteric și mai structurat pentru definirea tipurilor
de date XML. Față de DTD, XML Schema utilizează tag -uri XML pentru definirea
tipurilor;
 XSL – un fel de CSS pentru XML. Cu toate acestea, XSL este mult mai complex, având
trei părți: XSL Transformations (XSLT), XML Path Language (XPa th), and XSL
Formatting Objects;
 SMIL sau Synchronized Multimedia Integration Langu age, pronunțat ca „smile” – este
o aplicație particulară a lui XML (un DTD predefinit global) care permite specificarea
unei interacțiuni temporar scriptate între orice tipuri de media și input de utilizator. De
exemplu, poate fi utilizat pentru a arăta un streaming de video sincronizat cu o
prezentare slide show, amândouă reacționând la navigarea utilizatorului prin slide show
sau video.
Synchronized Multimedia Integration Language (SMIL) . Așa cum a fost benefic să avem
HTML pentru a oferi publicare de doc ument text utilizând limbaj markup ușor de citit, este de
asemenea de dorit să avem posibilitatea de a publica prezentări multimedia utilizând un limbaj
markup. Prezentările multimedia au următoarele caracteristici adiționale: pe când în

documentele text, textul este citit secvențial și afișat totul deodată (în același timp), prezentările
multimedia pot include multe elemente, cum ar fi video și audio, care au conținut care se
schimbă în timp. Astfel, un limbaj markup multimedia trebuie să permită programar ea și
sincronizarea a mai multor elemente diferite și, de asemenea, să definească interactivitatea cu
utilizatorul a acestor elemente.
Așa cum HTML -ul a fost redefinit în XML (specificații XHTML), așa a făcut și SMIL 1.0,
aducând anumite îmbunătățiri.
SMIL 2.0 este specificat în XML utilizând o abordare de modularizare similară cu cea folosită
în XHTML. Toate elementele SMIL sunt împărțite pe module – seturi de elemente XML,
atribute, valori care definesc o funcționalitate conceptuală. În interesul modularizării, nu toate
modul ele disponibile trebuie incluse în toate aplicațiile. Din acest motiv, profilele de limbaj
sunt definite specificând un grup particular de module. Modulele particulare pot avea cerințe
de integrare care trebuie urmărite de un profil. SMIL 2.0 dispune de un profil principal de
limbaj care include aproape toate modulele SMIL, un profil de bază Basic care include doar
modulele necesare pentru a suporta funcționalitatea de bază, și un profil XHTML+SMIL
proiectat pentru a integra HTML și SMIL. Cel din urmă inclu de toate modulele XHTML, doar
cu modulele de temporizare (dar fără modulele de structură – XHTML are propriile sale
structuri de module) adăugate.
Structura limbajului SMIL este similară cu XHTML. Elementul rădăcină este smil, care conține
cele două elemen te head și body. head conține informații care nu sunt folosite pentru
sincronizare – metainformații, informații legate de layout, și control de conținut, cum ar fi
bitrate media. body conține toate informațiile care au legătură cu resursa care trebuie prez entată
și când.
Sunt disponibile trei tipuri de sincronizări (grupări) de resurse: seq, par și excl. Seq specifică
faptul că elementele grupate trebuie prezentate într -o ordine specifică (secvențială). Par
specifică faptul că toate elementele grupate trebu ie prezentate în același timp (adică în paralel),
excl specifică faptul că doar elementele grupate pot fi prezentate la un anumit timp (exclsuvi);
ordinea nu contează.

Exemplu de cod SMIL:
<!DOCTYPE smil PUBLIC " -//W3C//DTD SMIL 2.0"
"http://www.w3.org/200 1/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<meta name="Author" content="Orice" />
</head>
<body>
<par id="Carte">
<seq>
<video src="desprecarte.mpg" />
<img src="coperta.jpg" />
</seq>
<audio src="authorview.wav" />
</par>
</body>
</smil>
Un document SMIL poate, op țional, să utilizeze directiva <!DOCTYPE… > pentru a importa
DTD -ul SMIL, ceea ce va for ța interpretorul să verifice documentul cu ajutorul DTD -ului. Un
document SMIL începe cu <smil> și specifică un namespace implicit, utilizând atributul xmlns.
Secțiunea <head> descrie autorul documentului. Elementul body conține informațiile de
sincronizare și resursele pe care dorim să le prezentăm.

În exemplul dat mai sus, o sursă video numită „authorview.mpg”, și o sursă audio,
„authorview.wav” sunt prezentate simultan la început. Când videoclipul se închide, imaginea
„onagoodday.jpg” este arătată, cât timp resursa audio și documentul HTML încă sunt în
procesul de prezentare.
În următoarea par te dorim să trecem peste unele instrumente disponibile pentru diverse sarcini
în multimedia. Aceste instrumente sunt doar începutul – un proiect multimedia pe deplin
funcțional se poate să aibă nevoie de programare și de asemenea, de folosirea a mai multor
instrumente predefinite.
Cakewalk – este un nume foarte cunoscut pentru ceea ce acum se numește Pro Audio.
Compania care produce acest instrument de secvențiere și editare, Twelve Tone Systems, vinde
de asemenea CakeWalk Express. Cel mai nou produs CakeW alk se numește SONAR – Imagine
2.2.

Imagine 2. 2 Sonar – produs CakeWalk similar cu Pro Audio
Termenul de secvențiator vine de la dispozitivele mai vechie care stocau secvențe de note în
limbajul de muzică MIDI. Este de asemenea posibil să inserezi fișiere WAV și comenzi
Windows MCI (pentru animații și video) în piesele muzicale.

Cubase – este un alt program de secvențiare/editare cu capacități similare cu CakeWalk.
Acesta include, de asemenea, câteva instru mente de editare audio digitală. În Imagine 2.3 se
poate vedea felul în care arată acest program.

Imagine 2.3 Cubase – program de secvențiere și editare
Macromedia Soundedit – Soundedit este un program matur pentru creare de audio pentru
multiple proiecte. Web -ul se integrează bine cu alte produse Macromedia cum ar fi Flash și
Director.
Cool Edit – este un set de instrumente foarte puternic și popular cu capacitatea de a imita un
studio audio profesional, incluzând producții de mai multe piese muzicale și editare de fișiere
de sunet. Varianta Pro al acestui instrument poate fi vizualizat la Imaginea 2.4.

Imagine 2.4 Cool Edit Pro
Sound Forge – este un program PC foarte sofisticat pentru editarea de fișiere WAV. Permite,
de asemenea, adăugarea de efecte speciale.

Imagine 2.5 Aplicația Sound Forge

Adobe Illustrator – este un instrument de publicare pentru crearea și editarea graficelor
vectori ale, ca re pot fi exportate cu ușurință pentru a fi folosite pe web.

Imagine 2.6 Programul Adobe Illustrator
Adobe Photoshop – este un instrument standard de pentru grafice, procesare de imagini și
manipulare de imagini. Diversele straturi de imagini, gra fice și text pot fi manipulare separat
pentru flexibilitate maximă, iar „filter factory” -ul permite crearea de efecte de lumini
sofisticate.

Imagine 2.7 Programul Adobe Photoshop pe platforma MacOS
Macromedia Fireworks – este un soft pentru creare de gra fice special făcute pentru web.
Include un editor bitmap, editor de grafică vectorială, și un generator de JavaScript pentru
butoane.

Imagine 2.8 Programul Macromedia Fireworks
Macromedia Freehand – este instrument de editare text și grafice web care suportă multe
formate bitmap, cum ar fi GIF, PNG, și JPEG. Acestea sunt formate bazate pe pixeli, ceea ce
înseamnă că fiecare pixel este specificat. Suportă, de asemenea, formate bazate pe vectori, în
care sunt specificate capetele de linii în loc de pixeli, ca exemplu fiind SWF (Macromedia
Flash) și FHC (Shockwave Freehand). Poate, de asemenea, să citească formate Photoshop.

Imagine 2.9 Programul Macromedia FreeHand
Adobe Premiere – este un instrument simplu și intuitiv de editare video pentru editarea
nonliniara – punerea de videoclipuri în orice ordine , așa cum se poate observa în Imaginea
2.10. Videoclipuri și audio -ul este aranjat în piese. Oferă o varietate largă de piese video și
audio, și clipur i virtuale. Deține, de asemenea, o bibliotecă de tranziții și filtre – acestea permit
crearea eficientă și ușoară de producții multimedia.

Imagine 2.10 Programul Adobe Premiere
Adobe After Effects – este un instrument de editare video foarte puternic ca re permite
utilizatorilor să adauge și să schimbe filme existente cu efecte cum ar fi lumini, umbre, și
motion blurring. Permite, de asemenea, stratificare ca și în Photoshop pentru manipularea
independentă a obiectelor.

Imagine 2.11 Programul Adobe After Effects.

Final Cut Pro – este un instrument de editare video de la Apple pentru platforma Macintosh.
Îngăduie capturarea de video și audio din numeroase surse. Oferă un mediu complet, de la
capturarea video la editare și corecție de culori, până la o utput -ul video final sau difuzare de pe
calculator.

Imagine 2.12 Programul Final Cut Pro
Putem enumera câteva interfețe de programare a aplicațiilor (API – Application Programming
Interface) multimedia:
 Java3D – este un API de la Java pentru a construi ș i randa grafice 3D, similar cu felul
în care manipulează fișierele Java Media Framework. Oferă un set de primitive de
obiect (de exemplu cub) peste care dezvoltatorul poate construi scene. Este un nivel de
abstractizare construit peste OpenGL sau DirectX ( utilizatorul poate selecta care)
pentru ca grafica să fie accelerated/accelerată;
 DirectX – un API Windows car suportă video, imagini, audio și animații 3D, și este cel
mai comun API utilizat de aplicațiile multimedia Windows moderne, cum ar fi jocurile;
 OpenGL – a fost creat în 1992 și a devenit cel mai popular 3D API folosit astăzi .
OpenGL este foarte portabil și rulează pe sistemele de operare populare cum ar fi
UNIX, Linux, Windows și MacOs.

În ceea ce privește instrumentele de randare putem enumera:
 3D Studio Max – include un număr mare de instrumente profesionale pentru animațiile
de caracter, dezvoltare de jocuri și producerea de efecte vizuale. Modelele produse
utilizând acest instrument pot fi văzute în multe jocuri populare, cum ar fi cele
dezvo ltate pentru Sony Playstation;
 Softimage XSI – este un pachet de modelare, creare de animații și randare pentru
anima ții și efe cte speciale în filme și jocuri;
 Maya – un produs care e în competiție cu Softimage XSI, este un pachet complet de
modelare. Conține o varietate largă de instrumente de modelare și animație , cum ar fi
haine și blană realistică;
 RenderMan – este un pachet de randare creat de Pixar. Excelează în creare de suprafețe
complexe și imagini. A fost utilizat în numeroase filme, cum ar f i Monsters Inc. și Final
Fantasy: The Spirits Within. Este capabil de importare de modele din Maya.
Instrumentele care oferă capacitatea pentru creare de prezentări multimedia, incluzând control
interactiv al utilizatorului, sunt numite programe de authoring sau creație. Următoarele
programe sunt astfel de instrumente:
 Macromedia Flash – Flash îngăduie utilizatorilor să creeze filme interactive.
Elementele din din film sunt numite simboluri în Flash. Simbolurile sunt adăugate la
un repository central , numită librărie, și poate fi adăugat la timeline -ul filmului. Odată
ce simbolurile sunt prezentă la un anumit timp, ele apar pe Stage, ceea ce reprezintă
felul în care arată filmul la un moment dat și poate fi manipulat și mișcat prin
instrumentele gata existente în Flash;
 Macromedia Director – acesta utilizează un film pentru a crea prezentări interactive.
Acest program include un limbaj de scripting, Lingo, care îngăduie crearea de filme
interactive complexe. Programul în sine oferă multă interactivitat e, și Lingo, cu
debugger -ul său personal, îngăduie mai mult control asupra dispozitivelor externe, cum
ar fi VCR -uri. Director dispune, de asemenea, de abilitatea de a crea filme interactive
Shockwave care se pot juca pe web;
 Authorware – este un produs ma tur de creație și are o curbă de învățatre ușoară, fiind
astfel accesibil studenților. Este bazat pe ideea organigramelor. Permite hyperlink -uri
pentru text, filme digitalle, grafice și sunete. Oferă, de asemenea, compatiblitate între

versiuni de fișiere p roduse pe PC sau Mac. Aplicațiile Shockwave Authorware
încorporează fișierele Shockwave, inclusiv filmele Director, animațiile Flash, și audio;
 Quest – se bazează tot pe ideea de organigrama și este similar cu Authorware în multe
aspecte.
2.3 Elemente mul timedia în HTML5
HTML5 este ultima evoluție în ceea ce privește standardele care definesc HTML, iar termenul
reprezintă 2 concepte diferite [3]:
 este o nouă versiune a limbajului HTML, cu elemente, atribute și comportamente noi;
 un set mai larg de tehnolog ii care permite creare de aplicații web mai diverse, mai
puternice.
Conceptele noi pe care le -a adus și care sunt de interes acestei lucrări sunt cele legate de
multimedia și -anume adăugarea elementelor de video și audio, astfel încât construirea unor
aplicații multimedia a devenit mult mai ușoară și îndemâna tuturor.
Dezvoltatorii de aplicații web au dorit să utilizeze video și audio de foarte mult timp în
aplicațiile lor, în special după ce internetul a devenit suficient de rapid încât a devenit fezabil
să transmitem/vizualizăm videoclipuri. Înainte de HTML5, tehnologia HTML nu a deținut
instrumente pentru realizarea acestui lucru, iar dezvoltatorii au recurs la alte tehnologii (bazate
pe plugin -uri) cum ar fi Flash sau Silverlight. Aceste tehnologii funcț ionat în regulă, doar că
au fost departe de a fi fără probleme – dezvoltatorii au întâmpinat probleme de securitate și de
accesibilitate, iar câteodata acestea nici nu funcționau cum trebuie cu elemente HTML/CSS.
Astfel, a crescut nevoia de a avea o soluți e nativă, iar astăzi, cu HTML5, dispunem de aceste
două elemente: video și audio, care fac viața mai ușoară oricărui dezvoltător.
Elementul <video>
Acest element îngăduie adăugarea unui videoclip într -o pagină web cu ușurință. Un exemplu:

Caracteristicile cele mai importante sunt [4]:
 src – acest atribut conține o cale la un videoclip pe care dorim să -l încorporăm;
 controls – acesta permite controlul asupra elementului media; putem utiliza funcția
nativă sau putem să construim inferfața pr oprie de control utilizând API -ul JavaScript
corespunzător;
 textul din interiorul elementului – acesta reprezintă un text de atenționare în cazul în
care videoclipul nu a putut fi încorporat din vreun motiv;
 source – browserul se va uite prin elemente sour ce și va alege să ruleze primul pentru
care are support (incluzând mai multe ne asigurăm că videoclipul va funcția pe mai
multe browsere);
 width și height – pentru setarea mărimii videoclipului în pagină;
 autoplay – în cazul în care este folosit videoclipul va porni automat după ce se încarcă
pagina;
 loop – videoclipul se va rula din nou după ce se termină;
 muted – utilizat pentru a rula videoclipul fără sunet.
Elementul <audio>
Elementul audio funcționează în mod similar cu cel video cu câteva mici diferențe. Un
exemplu:

Acesta nu va ocupă un spațiu la fel de mare ca elementul video, iar acesta nu are atributele de
width și height din simplul motiv că nu există nicio componentă vizuală implicată.
În cazul în care dorim să oferim o transcriere a ce se pune în videoclip sau în audio, putem să
folosim elementul <track>. Acesta utilizează formatul WebVTT pentr ua scrie fișiere text care
conțin text împreună cu metadata legat de timpul la care ar trebui să apară în video.

Un fișier WebVTT ar arăta în felul următor [4]:
WEBVTT
1
00:00:22.230 –> 00:00:24.606
This is the first subtitle.
2
00:00:30.739 –> 00:00:34.074
This is the second.
Un exemplu de cod:

Există și alte elemente în HTML care ne ajută cu multimedia. Acestea sunt:
 iframe – acesta practic încorporează o pagină HTML în pagina curentă, Un exemplu:

În felul în care este folosit în exemplu se încarcă un videoclip YouTube în pagina
curentă;
 embed – reprezintă un punct de integrare pentru o aplicație externă sau content
interactiv. Un exemplu:

În acest fel încărcăm un joc interactiv cu extensia .swf în pagina noastră web;

 object – reprezintă o resursă externă care poate să fie tratată ca o imagine, sau o resursă
de care se ocupă un plugin. Un exemplu:

În acest fel încărcăm o resursă externă în pagina noastră web.
Construirea unei aplica ții multimedia tip prezentare cu HTML5
Avem la dispoziție numeroase instrumente pentru a construi o aplicație multimedia tip
prezentare. Primul lucru asupra căruia trebuie să ne hotărâm este dacă dorim sau nu un
framework JavaScript care să ne sprijine în construirea acestei aplicații.
În cazul al egerii unui framework avem la dispoziție multe biblioteci care facilitează creare de
prezentări. De exemplu, dacă alegem să utilizăm framework -ul Angular, avem la dispoziție
biblioteca angular -slidedeck [5] care ne ajută în crearea de slide -uri tipice Powe rPoint.
Dacă totuși nu dorim să ne complicăm viața cu un întreg framework JavaScript, dar dorim
totuși un suport – reveal.js [6] este unul dintre cele mai comprehensive instrumente de creare
prezentări utilizând HTML. Este considerat chiar un framework av ând în vedere că oferă suport
pentru orice fel de slide, cu orice tip de animație – inclusiv slide -uri verticale, oferă animații
bogate în detaliu și notițe pentru prezentator.
În cazul în care totuși nu dorim să ne bazăm pe framework de prezentări deja e xistente și am
dori noi să creăm o astfel aplicație este de recomandat să avem un suport, un framework
JavaScript pentru încărcarea dinamică de pagini html.
În cele ce urmează se va prezenta o astfel aplicație construită cu ajutorul framework -ului
Angular JS și este o versiune minimalistă a unei prezentări despre Multimedia. Acesta conține
animații CSS3 și elemente multimedia HTML5 pentru a exemplifica și da impresia unei
adevărate aplicații multimedia interactive.
Pentru realizarea aplicației s -au utilizat și alte tehnologii cum ar fi Grunt ca JavaScript task
runner și bower cu npm pentru a aduce biblioteci necesare precum bootstrap, jquery, angular
cu rapiditate, astfel ușurând procesul de dezvoltare.

3. Implementarea unei aplicații multimedia de prezentare
Tema aleasă pentru prezentare este: Multimedia, iar aplicația prezintă componentele
multimedia specifice HTML5, dar și alte componente care ne ajută în creare unei aplicații
multimedia.
Primul pas în realizarea prezentării a fost de a alege un framework c are să ajute cu randarea
template -urile și în general cu aducerea rapidă de a bibliotecilor utilizate:

Imagine 3.1 Fișierul de configure pentru biblioteci, bower
Pentru aplicație s -au importat bootstrap pentru a -i putea folosi clasele și icoanele de care
dispune împreună cu angular -bootstrap în eventualitatea faptului că ar avea nevoie aplicația de
componente bootstrap integrabile cu angular. În final am importat jquery și highlight pentru
interacțiuni mai bogate și pentru aducerea în evidență a codului d in cateva slide -uri html.
S-a ales framework -ul Angular și pentru faptul că ne oferă o rezolvare pentru tranziții de la un
slide la altul, astfel ușurând semnificativ logica care trebuie aplicată pentru acest proces.

Astfel structura aplicației arată în felul următor:

Imagine 3.2 Structura aplicației
Cele mai importante componente sunt modulul, configurarea și controller -ul. Prin modul
definim aplicația Angular, iar prin configurare specificăm felul în care se va încărca fiecare
slide în parte.

Imagi ne 3.3 Zona de încarcare principală din index.html

Imagine 3.4 Conținutului template -ului care încarcă slide -urile – main.tpl.html
În Imaginea 3.3 putem observa zona de încarcar e a template -ului din Imagine 3.4 . Angular
utilizează ui -view ca pun ct de încarcare a html -ului. În main.tpl.html specificăm, de asemenea,
săgețile de navigare și punctul de încarcare al fiecărui slide în div -ul: <div class=”slides” […].
Structura slide -urilor:

Imagine 3.5 Template -ul unui slide care conține text
Se ilustrează foarte bine în Imaginea 3.5 felul în care se structurează un slide care conține doar
text și este oarecum unul de introducere. S -au declarat clase care să marcheze fiecare slide,
clasa slide cuprinde generalități pentru toate slide -uri, de exemplu imagine de fundal,
poziționare etc. Clasa slideUp, slideDown și respectiv Left și Right se vor găsi pe acele slide –
uri care intră cu animație, animații declarate în fișierul less care este compilat în css de către
task runner -ul Grunt. Felul în care se ra ndează primul slide se poate vedea în Imaginea 3.6.

Imaginea 3.6. Primul slide al aplicației
Majoritatea slide -urilor cu text au structuri foarte similare alternând între title, text și title, list
de cele mai multe ori. Codul pentru un slide cu o listă poate fi observat în Imaginea 3.7, iar
felul în care arată acest slide randat se poate vedea în Imaginea 3.8.

Imaginea 3.7 Structura unui slide cu o listă

Imaginea 3.8 Slide cu o listă
După aceste slide -uri de bază și de prezentare urmează slide -urile care prezintă și aduc de fapt
componenta multimedia al aplicației. Un astfel de slide este cel cu elementul video și pe care –
l putem observa în Imaginea 3.9.
Acest stil de slide se repetă și el, prezentând în aplicațiile o varietate de feluri î n care poți
configura acest element HTML5 și felul în care se comportă în urma configurării. De
asemenea, s -a prezentat și codul care face să funcționeze fiecare element în parte. Acesta tip
de slide se poate observa în Imaginea 3.10.
Acest gen de slide -uri se repetă pentru elementul audio al HTML5 și din acest motiv nu le
prezentăm, dar aplicația conține și elemente interactive cu care prezentatorul poate interacționa
în timpul prezentării. Acestea se pot vedea în Imaginea 3.11, respectiv 3.12.

Imaginea 3.9 Slide cu video

Imaginea 3.10 Exemplu de slide cu cod

Imaginea 3.11 Cadran interactiv încorporat cu object
După cum se poate observa, Imaginea 3.11 arată un cadran interactiv și codul care generează
acest cadran. Extensia .swf este o abreviere pent ru small web format și este un format de fișier
Adobe Flash pentru multimedia, grafică vectorială etc.
Imaginea 3.12 ne arată un slide cu un joc interactiv, iar prezentatorul poate exemplifica, se
poate plimba cu caracterul și poate interacționa. Slide -ul este un exemplu de swf încorporat cu
elementul HTML embed și care ne ajută să avem o aplicație multimedia cu adevărat bogată și
interesantă.
Ultimul tip de slide este cel care conține un videoclip YouTube integrat și se poate vedea în
Imaginea 3.13. Acest a este integrat cu ajutorul lui iframe, tot element HTML.

Imagine 3.12 Slide cu joc interactiv

Imagine 3.13 Slide cu videoclip YouTube integrat

Concluzii
În urma dezvoltării aplicației putem să ne dăm seama că într -adevăr o aplicație de prezentare
făcută prin HTML este mult mai flexibilă decât orice prezentare am putea face în PowerPoint.
Numeroși prezentatori, evident în special programatori, optează să își creeze sau să utilizeze
framework -uri de creare prezentări. Nu este mereu fezabil să scriem o aplicație de acest gen de
la zero, astfel numeroasele tipuri de framework ne vin în ajutor.
Oferta fiind atât de mare poate să fie destul de copleșitor – care framework este alegerea cea
mai bună? Pentru cei mai inventivi, un framework ca și reveal.js sa u ceva scris chiar de ei este
o soluție foarte bună, iar cei mai neexperimentați sau care vor o soluție mai rapidă decât
înțelegerea unui framework sau scrierea de la zero se pot întoarce mereu la aplicații și
instrumente specializate.
Scopul lucrarii a fost să treacă prin ce înseamnă să construiești, să utilizezi aplicații multimedia
atât generale cât și foarte specializate, iar mai apoi să prezinte o implementare a unei aplicații
multimedia semi -interactivă. Nu este o aplicație complexă, dimpotrivă, a c ărui scop este să
prezinte elemente multimedia într -un mod plăcut și ușor de înțeles.

Bibliografie
1. Fundamental of Multimedia, Ze -Nian Li and Mark S. Drw, Pearson Education International,
2002 ;
2. Readings in Multimedia Computing and Networking , K. Jeffay and H. Zhang, Morgan
Kaufmann, CA, 2002 ;
3. HTML5, https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5 , Mozzilla;
4. Video and audio content, https://developer.mozilla.org/en –
US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content , Mozzilla;
5. Angular Slidedeck, https://paperhive.github.io/angular -slidedeck -example/ , Github;
6. Reveal.js, http://lab.hakim.se/reveal -js/#/.