SPECIALIZAREA: MANAGEMENT ÎN TEHNOLOGIA INFORMAȚIEI [303300]

[anonimizat], TINERETULUI ȘI SPORTULUI

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

SPECIALIZAREA: MANAGEMENT ÎN TEHNOLOGIA INFORMAȚIEI

Managementul informației și multimedia

Coordonator:

Conf.univ. dr.ing. Gianina GABOR

STUDENT: [anonimizat] 2017

[anonimizat] o [anonimizat], audio, imagini, animații, conținut video și interactiv. [anonimizat].

[anonimizat] a [anonimizat], dar pot fi de asemenea parte din performanțele live. Dispozitivele multimedia sunt dispozitive media folosite pentru stocarea si folosirea continutului multimedia. Multimedia este diferita de alte diferite alternative media (arte) prin includerea de sunete si clipuri video si are un domeniu de aplicare mai larg. Termenul "rich media" este sinonim pentru multimedia interactiv.

Continut

2.1 Elementele unei prezentari multimedia si particularitatile acesteia

O prezentare multimedia este formata dintr-o combinatie a urmatoarelor elemente:

Text

Audio

Imagini

Animatii

Video

Continut interactiv

Multimedia se afla in 2 categorii: liniare si neliniare. [anonimizat] o prezentare de cinema. Continutul multimedia neliniar foloseste elemente interactive pentru a controla progresul.

Particularitatile unei prezentari multimedia:

constrangerile temporale date multimedia

dependentele temporale si de alta natura intre mediile componente

volum/rate de transmisie mari informatii multimedia

diferentele mari intre caracteristicile diferitelor mediilor componente

2.2. Limbajele utilizate pentru implementarea unei prezentari multimedia

XHTML + TIME

Formatul se specifică prin XHTML punând un număr de marcatori pentru formatare document. Poate fi incadrat in grupurile text/hml sau text/[anonimizat]-sensitive.

Tag-urile se încadrează între ‘<’ si ‘>’ cu posibilitatea de a [anonimizat].

Fișierele XHTML sunt fișiere text cu extensia .html sau .[anonimizat].

Partea de antet ofera posiblitatea de a definii rutine Javascript pentru a fi executate și definiții locale pentru stiluri (CSS). [anonimizat]:

Stiluri de afisare

Titluri

Sectiuni

Liste

Imagini

Tabele

Formulare

Metadate

Suport multimedia

Restrictiile pe care le are sunt: tag-urile trebuie sa se incheie cu />, valorile folosite pentru atribute sa fie incadrate intre ghilimele si comentariile intre <!– –>.

Limbajul XHTML+TIME este o extensie care ofera documentelor suport pentru temporizare si sincronizare web.

[anonimizat], [anonimizat].

Limbajul XHTML+TIME ofera o modalitate de a adăuga conținut multimedia și interactivitate paginilor Web. Prin modalitatea aceasta utilizatorul se poate concentra asupra conținutului paginii Web fără a fi nevoie de cunoștințe de programare. Se pot crea prezentări sub formă de slide-show, în cadrul lor fiind sincronizate elemente multimedia sub forma de text, video, audio sau grafice. Prezentările pot fi temporizate interactiv sau combinate.

Ce ofera XHTML+TIME consta în adăugarea unui set de noi atribute și elemente celor deja existente în limbajul XHTML. Prin atribute noi se poate preciza momentul in care sa apara unu element multimedia într-o pagină, cât timp urmează să fie afișat, sau modul în care elementele acestea afectează restul elemente HTML din pagină.

XHTML+TIME poate fi utilizat pentru a adăuga paginilor Web conținut dinamic, interactiv.

Pentru adaugarea de temporizare unui element se va importa spatiul de nume XML, se va preciza comportamentul time2 asociat cu XHTML+TIME. In interiorul tag-ului de html se defineste namespace-ul prin: xmlns:t=”urn:schemas-microsoft-com:time”. Elementele XHTML+TIME trebuie sa foloseasca prefixul t pentru ca ele sa fie identificate conform extensiilor.

Ca sa fie permisa utilizarea acestui spatiu de nume, elementele trebuie prefixate cu t, iar pentru setarea lui t atunci spatiul de nume trebuie importat prin urmatoarea sintaxa: <?import namespace=”t” implementation=”#default#time2”>.

Spatiul de nume este disponibil doar elementelor definite de catre XHTML+TIME, dar pentru a putea fi folosite si de catre elementele din XHTML atunci trebuie realizata o asociere explicita.

Exemplu pentru definirea inline: <p style=”behavior:url(#default#time2)”>

Comportamentul time2 dar si alte comportamente dinamic poate fi definite inline sau prin definirea de clase CSS.

Atribute de temporizare folosite de catre XHTML+TIME: begin, dur, repeatCount, repeatDur, end.

begin – precizează momentul sau momentele la care își începe execuția un element, relativ la linia temporală a părintelui său. Valoarea implicita folosita este 0 si unitatea de masura s. Se pot folosi prescurtarea h, min, s, ms dupa valore pentru a specifica unitatea de masura.

Valorile folosite pot fi negative sau pozitive sau valoare reala. Valorea indefinite precizeaza momentul de inceput e in viitor si poate fi declansat de un eveniment

Pot fi definite si legaturi cu alte elemente, prin begin=”element.begin” se defineste ca elementul incepe in acelasi timp cu elementul care are identificatorul “element”

dur – precizeaza durata pentru care un element este afisat

Imaginea definită prin secventa urmatoare va fi afișată pe ecran timp de 15 sec după ce începe derularea fișierului cu identificatorul “film”: <img src=”afis.jpg” begin=”film.begin” dur=”15”/>

repeatCount – atributul acesta definiteste numarul de repetitii ale duratei simple pe un elment. Ca si valori sunt permise si valori fractionale. Acest atribut are si o valore particulara indefinite pentru a definii repetitia la nesfarsit.

repeatDur – prin acest atribut se precizeaza cat timp se repeta durata simpla. Durata simplă in combinatie cu efectul oricăror repetiții definește durata activă a unui element.

end – acest atribut este folosit pentru a definii momentul de sfarsit al perioadei active a unui element. Se pot folosi mai multe valori separate prin virgula ca si la begin. Dacă dur specifică durata relativă la momentul de start al elementului atunci end precizează un moment absolut în raport cu linia temporala a părintelui elementului respectiv .

Exista un atribut in XHTML+TIME, timeAction, care poate fi folosit pe un element temporal pentru a specifica actiune care sa fie executata atata timp cat elementul va fi activ in cadrul liniei temporale.

Valorile care pot fi folosite pentru atributul timeAction pot fi: class:numeClasa, style, display, visibility. Primele doua valori class si style sunt folosite pentru a preciza o clasa css sau still css care sa fie folosit. Celelalte valori pentru atribut display si visibility sunt folosite pentru a preciza care elemente sunt afisate si sub ce forma pe durata derularii. Atributul display aloca spatiu pe ecran si restructureaza sablonul iar atributul visbility afiseaza un element pe ecran.

Exemplu:

<span class="atentie evidentiat" style="behavior:url(#default#time2)" begin="3" end="7" timeAction="class:atentie"> text </span>

XHTML+TIME pune la dispozitie urmatoarele elemente care pot fi folosite pentru redarea obiectelor multimedia:

<t:media> – element generic pentru a fi folosit pentru orice obiect multimedia

<t:video> – element folosit pentru video

<t:audio> – element folosit pentru continut audio

<t:img> – element folosit pentru imagini statice

<t:animation> – element folosit pentru fisiere grafice animate (GIF)

<t:ref> – element folosit pentru a face referinta la un fisier extern

Elementele multimedia pot contine si alte atribute pe langa cele obisnuite:

src – folosit pentru a specifica fisierul multimedia care urmeaza sa fie folosit

clipbegin – pozitia de unde va incepe rularea clip-ului

clipend – pozitia unde se va oprii rularea clip-ului

player – aplicatia folosita pentru rularea clipului

syncbehaviour, synctolerance – se foloseste pentru a preciza daca elementele se vor sincroniza si cum cu elementul parinte

Exemplu:

<button id="StartMedia"> Pornire</button>

<button id="StopMedia"> Stop</button>

<t:media begin="StartMedia.click"> end="StopMedia.click" src ="movies/OnlyTime.avi" mute="true" timeAction="display" style="height:150px; width:150px" />

Elementele pot folosi proprietatile canSeek pentru a verifica daca pentru un fisier se poate plasa intr-un anumit moment al derularii si doar dupa sa se apeleze metoda seekActiveTime()

Metode folosite pentru pozitionarea in cadrul liniei temporale

seekSegmentTime()

autoReverse()

seekTo()

seekActiveTime()

seekToFrame()

onSeek()

canseek()

Metodele se pot aplica doar asupra unui element activ, deci se indica verificarea in prealabil a starii prin isActive.

Un element poate devenii un container temporal pentru elementele copil daca acest element are setat atributul timeContainer cu una dintre urmatoarele valori: excl, par, seq.

Un element este container temporal care poate stabilii relatii temporale intre elementele sale controland durata activarii fiecaruia. Exista 3 elemente cu rol de container temporal:

<t:par> – copii vor rula in paralel

<t:seq> – copii vor rula secvential doar unu fiind activ la un moment dat

<t:excl>- copii vor rula in orice ordine, doar un copil poate fi activ la un moment dat

Container temporal paralel

Container temporal secvential

Container temporal exclusiv

Elementul t:priorityClass – folosit pentru a intrerupe momentan sau definitiva a executiei copiilor al unui excl . Nu se pot amesteca atributele priorityClass printre copii lui excl. Iar un element priorityClass nu poate sa contina alta elemente priorityClass. Valori posibile pentru priorityClass sunt:

higher

lower

peers

2.2.2 SMIL (Synchronized Multimedia Integration Language)

Folosit de utilizatori pentru a putea defini cu ușurință și sincroniza elemente multimedia (video, sunet, imagini statice) pentru prezentare web și interacțiune. Pe Web-ul de astăzi, cu toate că se pot anima și imagini statice și sunet la un utilizator web, fiecare element este separat de celelalte și nu pot fi coordonate cu alte elemente, fără programare elaborate. SMIL permite creatorilor de site de a trimite mai multe filme, imagini statice și sunet separat si coordona starea temporala a acestora. Fiecare obiect media este accesat cu un URL unic, ceea ce înseamnă că prezentările pot fi făcute de obiecte care sosesc din mai multe locuri și că obiectele pot fi ușor reutilizate în prezentări multiple.

Un document SMIL este o structură similară cu un document HTML în sensul că acestea sunt de obicei împărțite între un opțional secțiunea <head> și <body> secțiunea necesară. <Head> sectiune cuprinde dispunerea și metadate informații. Sectiunea <body> conține informațiile de sincronizare și este în general compus din combinații de trei tag-uri principale – secvențiale ("<seq>", liste de redare simple), paralele ("<par>", cu mai multe zone / redare multi-strat) și exclusive ("<>", cu excepția întrerupe declanșată de un eveniment). SMIL se referă la obiecte media prin URL-uri, permițându-le acestora să fie împărțită între prezentări și stocate pe servere diferite pentru echilibrarea încărcării. Limbajul poate asocia, de asemenea, diferite obiecte media cu cerințe diferite de lățime de bandă.

Pentru programarea de redare, SMIL suporta ISO-8601 wallclock () data / ora pentru a defini începe / evenimente finale pentru liste de redare.

SMIL, de asemenea, va permite utilizatorului de a stoca un obiect media în versiuni multiple, fiecare cu o altă lățime de bandă, astfel încât o versiune cu lățime de bandă mai mică a unei pagini web pot fi trimise utilizatorilor care au nevoie de ea. SMIL găzduiește, de asemenea, mai multe versiuni lingvistice ale coloanelor sonore.

Unul dintre lucrurile cele mai convingătoare pe care le oferă SMIL pentru mișcarea realistă în SVG este mișcare de-a lungul unui traseu. Foarte puține lucruri în mișcare viața reală de-a lungul unei linii drepte, deci de mișcare de-a lungul unei căi ne permite să imite ceea ce vedem în viața de zi cu zi. Anterior, ar trece un traseu SVG în animateMotion, cu o cale de a defini și datele de cale.

Exemplu: <animateMotion xlink:href="#id" dur="3s" repeatCount="indefinite" fill="freeze" path="M 25,50 C 37.5,25 37.5,25 50,0 75 Z" />

Pentru a oferi suport si pentru browser-ele mai vechi si pentru flexibilitate, este indicata folosirea unui plugin: GreenSock. GSAP’s Bezier-Plugin oferă sprijin înapoi la IE7 pentru elementele de bază non-SVG, și înapoi la IE9 pentru SVG.

2.2.3. HTML5

HTML este un format standard sau limbaj pentru crearea de site-uri web și HTML5 este a cincea repetare a acestui standard. Este o specificație publicată de standarde Web organism, W3C, care descrie ce sunt disponibile caracteristici și cum să le folosească. HTML5 este diferit de software-ul Web de proprietate, cum ar fi Adobe Flash sau Microsoft Silverlight în care caietul de sarcini este rezultatul contribuțiilor multor organizații, și pot fi puse în aplicare de către oricine, fără a fi nevoie să Pawe va fi în scurt timp vedem noi versiuni de la toti furnizorii mari de browser, inclusiv pe Internet Explorer și Firefox, care va pune în aplicare mai multe caracteristici HTML5. Este posibil ca cel puțin jumătate din populația web va actualiza la acestea destul de rapid, datorită actualizării automate în browsere. Aceasta va dura un pic mai mult pentru cealaltă jumătate, dar odată ce aceste browsere moderne de a ajunge la 80% și mai sus, folosind caracteristici HTML5 va fi modalitatea de crea pagini web.

Este demn de remarcat faptul că Apple a pus credința fermă în HTML5, lăsând Flash off populare dispozitivele sale iPhone și iPad, forțând mulți dezvoltatori web pentru a găsi alternative Flash mai devreme pe care le-ar fi fost altfel făcut pentru redevențe sau taxe de licențiere. În afară de problema punerii în aplicare și a browser-ului de compatibilitate (care nu este specifică HTML5, dar a fost o problemă de ani de zile), există în prezent o dezbatere în jurul codecul video pentru caracteristica HTML5 video.

Proiectat pentru a fi utilizat de către toți dezvoltatorii Web deschise, această referință pagină numeroase linkuri către resurse despre tehnologii HTML5, clasificate în mai multe grupuri pe baza funcției lor.

Semantici: premite descrierea mai exact ce fel de contint.

Suport conectare.

Offline și depozitare: permițând paginilor web pentru a stoca date pe partea de client la nivel local și să opereze mai eficient off-line.

Multimedia:.

grafica 2D / 3D și efecte: permițând o gamă mult mai variată de opțiuni de prezentare.

Performanță și integrare: oferind o mai mare optimizare a vitezei, și o mai bună utilizare a hardware-ului computerului.

Dispozitiv de acces: care permite utilizarea diferitelor dispozitive de intrare și de ieșire.

Stiluri: se pot crea un design mai complexe a paginilor.

HTML 5 face mult mai familiară practicile de programare, care au fost utilizate în versiunile anterioare ale HTML. Acesta are ca scop de a reduce nevoia de aplicatii proprietare plug-in bazate pe internet bogate în tehnologii (RIA), cum ar fi Adobe Flash, Microsoft Silverlight, și Sun JavaFX. HTML 5 simplifică de asemenea, codul prin eliminarea elementelor care au căzut din uz sau s-au dovedit a fi inutil. Din cauza unro serii de probleme de browser, cadrele nu vor mai fi permise, și tag-uri cum ar fi <font>, <center> și <strike> nu vor mai fi valabile.

O extensie flexibilă și feature-bogat pentru SOAP pentru a aplica securitatea serviciilor Web este WS-Security (Securitate Web Services, scurt AAC). Acest lucru a fost publicat de OASIS și este un membru al familiei WS- specificațiilor de servicii web. Trei mecanisme principale sunt descrise de WS-Security:

Cum de a semna mesaje SOAP pentru a asigura integritatea. Mesajele semnate, de asemenea

Cum se face criptarea mesajelor SOAP pentru a asigura confidențialitatea.

Cum se atașează token-uri de securitate.

O varietate de formate de semnături, algoritmi de criptare și domenii de încredere multiple este permisă de această specificație, și este deschisă la diverse modele simbolice de securitate, cum ar fi:

Certificate X.509

Kerberos tickets – protocol folosit pentru a permite comunicare pe un canal nesecurizat intre doua noduri pentru ca cele 2 sa se poate identifica pe baza unor identificatori (tickets)

Metode de autenficare folosind UserID & Password

SAML-Assertion

Token costumizat

2.2.4 Adobe Flash

Macromedia a fost achiziționată de Adobe Systems, în 2005, și întreaga linie de produse Macromedia, inclusiv Flash, Dreamweaver, Director / Shockwave și Authorware este acum manipulat de Adobe.

În 2007, Adobe a lansat Adobe Flash CS3 Professional, prima versiune a lansat sub Adobe, iar versiunea nouă majoră a Flash. Acesta a introdus limbajul de programare ActionScript 3.0, care a sprijinit practicile moderne de programare și aplicații de business au permis să fie dezvoltate cu Flash. Adobe Flex Builder (construit pe Eclipse) au vizat piața de dezvoltare a aplicațiilor enterprise, și a fost, de asemenea, lansat în același an. Flex Builder inclus Flex SDK-ul, un set de componente care au inclus diagrame, UI avansate și servicii de date (Flex Data Services).

În 2008, Adobe a lansat versiunea a zecea istorică a Flash, Adobe Flash CS4. Flash 10 capabilități îmbunătățite de animație în editorul Flash, adăugând un panou editor de mișcare (similar cu Adobe After Effects), cinematica inversă (oase), animație 3D de bază obiect, animație bazat pe obiecte, precum și a altor text și grafică caracteristici avansate. Flash Player 10 a inclus primul motor 3D încorporat (fără accelerare GPU), care a permis transformările obiectelor de bază în spațiul 3D (poziție, rotire, scalare).

Tot în 2008, Adobe a lansat prima versiune a Adobe Integrated Runtime (ulterior re-marca Adobe AIR), un motor de rulare care înlocuiește Flash Player, și cu condiția capabilități suplimentare la limba ActionScript 3.0 pentru a construi desktop și aplicații mobile. Cu AIR, dezvoltatorii ar putea avea acces la sistemul de fișiere (fișiere și foldere), și dispozitivele conectate (joystick, gamepad, senzori) pentru prima dată.

În 2011, Adobe Flash Player 11 a fost lansat, iar cu ea prima versiune a Stage3D, pentru a permite accelerarea GPU randare 3D pentru aplicații Flash și jocuri, pe platforme desktop, cum ar fi Microsoft Windows și Mac OS X. Adobe îmbunătățit în continuare capacitățile 3D din 2011 până în 2013, adăugând suport pentru randare 3D pe Android și iOS platforme, alfa-canale, texturi comprimate, atlase textura și alte caracteristici.Adobe AIR a fost actualizat pentru a suporta computerele pe 64 de biți, iar dezvoltatorii ar putea adăuga acum funcționalități suplimentare la runtime-ul AIR folosind AIR native Extensii (ANE).

În 2014, Adobe AIR a ajuns la un punct de referință, atunci când peste 100.000 de aplicatii unice au fost construite pe AIR, și peste 1 miliard de instalații de același tip au fost înregistrate de utilizatori din întreaga lume (mai 2014). Adobe AIR a fost votat ca cel mai bun produs de dezvoltare Mobile Application la Consumer Electronics Show timp de doi ani consecutivi (CES 2014 și CES 2015).

Fișierele Flash sursă sunt în formatul FLA, și conține grafică și animație, precum și active încorporate, cum ar fi imagini bitmap, fișiere audio și fișiere video FLV. Formatul de fișier sursă Flash este un format de proprietate și Adobe Animare este singurul instrument de creație disponibil capabil să editare astfel de fișiere. fișiere Flash sursă (FLA) pot fi compilate în fișiere film Flash (.swf) folosind Adobe Animare. Rețineți că fișierele FLA pot fi editate, dar fisierele de ieșire (.swf) nu pot.

Fișierele film Flash sunt în format SWF, numit în mod tradițional "Shockwave Flash" filme, "filme Flash" sau "aplicații Flash", de obicei, o extensie de fișier .swf, și poate fi utilizat sub forma unei pagini web plug-in , strict "jucat" într-un sine stătător Flash player sau încorporate într-un film proiector auto-executare (cu extensia .exe în Microsoft Windows). Flash fișierelor video [1] spec au extensia .flv și sunt folosite fișiere Fie .swf Din cadrul sau redate prin intermediul unui player FLV conștient, cum ar fi VLC ,:, sau QuickTime și Windows Media Player cu codec-uri externe adăugate.

Utilizarea graficii vectoriale combinate de cod de program permite, cu fișiere Flash să fie mai mici și AȘA Permite utiliza mai puține fluxuri de lățime de bandă la corespunzătoare decât bitmap-uri sau clipuri video. Pentru conținut într-un singur handler format (cum ar fi doar un text, audio sau video), alte alternative mai oferi performanțe mai bune și consumă mai puțină energie a procesorului decât filmul Flash corespunzătoare, de exemplu când se utilizează transparență sau de a face actualizări de mari dimensiuni ecran: cum ar fi fotografii sau text dispare.

În plus față de un motor de randare-vector, Flash Player include o mașină virtuală numită ActionScript Virtual Machine (AVM) pentru interactivitate scripting la run-time, cu video, audio bazate pe MP3, și grafica bitmap. Ca de Flash Player 8, oferă două codec-uri video: On2 Technologies VP6 și Sorenson Spark, și run-time JPEG, JPEG progresive, PNG, GIF și capacitate. În versiunea următoare, Flash este programat pentru a utiliza un compilator just-in-timp pentru motorul ActionScript.

Programul de creație Animare Adobe este utilizat pentru a proiecta grafica Primar și animație și să publice aceleași pentru site-uri web, aplicații web și jocuri video. Programul oferă suport limitat pentru audio simplă din trecut și integrare video, și ActionScript scripting.

Adobe a lansat Adobe LiveMotion, conceput pentru a crea conținut interactiv de animație și de export-l la o varietate de formate, inclusiv SWF.

2.2.5 Javascript

JavaScript a fost creat ințial sub denumirea de LiveScript de către compania Netscape, schimbarea numelui a fost doar o chestie de marketing.

Este folosit pentru crearea de pagini WEB interactive și pentru introducerea de funcționalități în paginile web (validarea unor formulare, navigare prin continut), codul Javascript fiind rulat de către browser.

Deși este un limbaj de programare orientat pe obiecte, JavaScriptul nu permite crearea sau extindera de clase, ci doar apelul metodelor specifice.

Cu toate că este un limbaj mult mai puternic decât HTML, introducând în pagini componenta dinamică , JavaScript are și unele limite, de exemplu nu poate

scrie și citi fișiere, nu poate scrie aplicații pe parte de server etc.

Un script JavaScript este un program inclus într-o pagina HTML. Deoarece este încadrat de tagul <script>, textul scriptului nu apare pe ecran, dar este rulat și interpretat de către browser. Tagul <script> este prezent cel mai frecvent în secțiunea <head> a paginii HTML, deși se pot pune și în secțiunea <body>. De obicei, scripturile care urmează să afișeze mesaje pe ecran sunt scrise în <body>.

JavaScript vă permite să creați o interfață activă cu utilizatorul, să dea o impresie vizuală plăcută în timp ce navigați prin paginile site-ului. Puteți verifica validitatea informațiilor introduse într-un formular înainte ca datele să fie trimise către server, puteți face calcule matematice, crea pagini HTML dinamice, personalizate în funcție de opțiunile utilizatorului sau al browserului. JavaScript controlează browserul, și prin intermediul scripturilor puteți deschide ferestre noi, puteți afișa mesaje de avertizare și puteți pune mesaje în bara de stare a ferestrei browserului. Puteți genera ceasuri, calendare și documente cu timpul înscris. Puteți chiar verifica prezența plug-in-urilor în browser, și puteți redirecta utilizatorul spre o pagină diferită în cazul în care browserul nu are un anumit plug-in.

2.2.6 JQuery

JQuery este o librărie Javascript de dimensiuni mici. Aceasta conține mai multe funcții pentru Ajax și lucrul cu elemente HTML și CSS.

Partea fundamentală în JQuery este selectarea unei părți din document, aceasta se face folosind construcția $() iar între paranteze se adaugă ca parametru un șir care poate fi orice selector CSS, id sau clasă.

După aceste construcții se adaugă, prin concatenare (folosind caracterul punct "."), ceea ce vrem să facem cu elementul selectat, se poate adăuga un efect,

exemplu: $("h3").slideToggle("slow")

sau un handle-event (click, hover, …) ce conține o altă funcție care se execută la apelarea respectivului handle-event,

exemplu: $("h3").click(function().

Funcțiile se adaugă folosind sintaxa function(). În interiorul funcțiilor se pot adăuga atât coduri Javascript cât si alte construcții și funcții pentru JQuery.

2.2.7 CSS

CSS este acronimul pentru Cascading Style Sheets si este un mecanism care permite formatarea documentului HTML, a fost proiectat astfel încât sã conlucreze cu HTML-ul.

CSS-ul este un limbaj robust, un limbaj pentru design – limbaj de stilizare al tagurilor html, care nu se aseamănă cu programarea sau cu limbajele de scripting.

Stilurile pot fi incorporate in sursa paginii WEB, in partea de head a documentului html sau pot fi scrise in fisiere externe cu extensia .css care vor fi apelate tot in partea de head, sau mai exista posibilitatea mai putin eleganta de a defini stilul in partea de body a documentului html, pe fiecare tag in parte.

„Utilizarea CSS asigura un control mai fin asupra paginii web, efecte mai sofisticate decât cele produse de codul HTML: suprapunerea unei imagini peste altã imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari decât h1 etc.

Pagina conținând cod CSS poate arăta diferit în navigatoare diferite, deoarece nu toate browserele interpreteaza codul CSS. Internet Explorer citeste corect și complet codul CSS, spre deosebire de Netscape Navigator.” [http://manuale.20m.com/CSS/1.htm].

Proiectanții CSS-ului au urmărit îndeosebi separarea între conținutul paginii (textul destinat vizitatorului și imaginile din pagină) și codul-sursă.

CSS este foarte util în Web design, deoarece le permite dezvoltatorilor să controleze stilul și chenarul mai multor pagini web în același timp.

Sintaxa CSS este alcătuită din trei părți: un selector – elementul/tagul pe care vreți să-l definiți, caracteristica – atributul pe care doriți să-l schimbați și o valoare – caracteristica poate lua o valoare. Caracteristica și valoarea sunt separate de semnul (:) și sunt încadrate de acolade.

Elemente multimedia folosite in HTML 5 pentru implementarea unei prezntari multimedia

2.3.1 HTML Video

Inainte de HTML5, nu exista o metoda standard de redare a fisierelor video in paginile web. Integrarea fisierelor video se face folosind tag-ul <video> . Proprietatea 'controls' a acestui tag va afisa un control HTML5 care are butoane pentru redare, pauza, volum si arata astfel:

<video width="320" height="240" controls>

<!–doar primul format recunoscut de browser va fi redat–>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

<!–textul e afisat doar daca browser-ul nu suporta HTML5–>

Your browser does not support the video tag.

</video>

sau

<!–type specifica codec-ul folosit si formatul fisierului–>

<video width="400" src="movie.ogg" type="video/ogg; codecs=dirac, speex" controls >

Your browser does not support HTML5 video.

</video>

2.3.2 HTML Audio

Inainte de HTML5, nu exista o metoda standard de redare a fisierelor audio in paginile web. Integrarea fisierelor audio se face folosind tag-ul <audio> . Proprietatea 'controls' a acestui tag va afisa un control HTML5 care are butoane pentru redare, pauza, volum si arata astfel:

<audio controls>

<!–doar primul format recunoscut de browser va fi redat–>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

<!–textul e afisat doar daca browser-ul nu suporta HTML5–>

Your browser does not support the audio element.

</audio>

sau

<audio src="audio.ogg" controls autoplay loop >

<p>Your browser does not support the audio element </p>

</audio>

controls : face ca player-ul sa fie afisat

autoplay : reda automat fisierul audio

loop : repeta fisierul automat

2.3.3. HTML Video YouTube

Versiunile diferite de browser-e suporta formate video diferite. Pentru a avea un video compatibil poate fi necesara convertirea acestuia in alt format. Acest proces este dificil si consuma foarte mult timp. O solutie mai simpla este redarea clip-urilor din pagina web de catre YouTube.

Exemplu folosind iFrame (metoda recomandata)

<iframe width="420" height="315"

src="http://www.youtube.com/embed/XGSy3_Czz8k">

</iframe>

Exemplu folosind <object>

<object width="420" height="315"

data="http://www.youtube.com/v/XGSy3_Czz8k">

</object>

Exemplu folosind <embed>

<embed width="420" height="315"

src="http://www.youtube.com/v/XGSy3_Czz8k">

Studiu de caz

Pentru studiul de caz am ales sa implementez o prezentare web care are la bază framework-ul revealjs împreună cu librăria de animații de la jQuery și animate.css.

Revaljs oferă posibilitatea de a crea pagini de prezentare folosind HTML. Slide-urile pot fi imbricate în interiorul celuilalt.

jQuery este o librărie de javascript care ajută la crearea de animații fiind compatibil pe mai multe browsere.

Animate.css este un fișier css care permite animarea de imagini și text.

Aplicația este alcătuită din 10 slide-uri, fiecare slide este o sectiune. Navigarea între slide-uri se face cu săgețile de la tastatură.

Fig 1. Structura aplicației

În fig. 1 se observă structura imbricată a aplicației: avem 4 splide-uri principale, 3 dintre ele conțin alte slide-uri, navigarea se poate face prin apăsarea săgetei de jos a tastaturii. Pentru trecerea de la un copil al slide-ului principal se folosesc săgețile de stînga-dreapta.

În prima parte am prezentat HTML general (definiția ei) fig3. HTML media si avantajele si dezavantajele HTML. Pentru trecerea la slide-ul următor se apasă săgeata de stânga.

În prima parte am prezentat CSS 3 general, exemple de folosire a CSS si un text animat cu ajutorul animate.css.

În a treia parte am prezentat JavaScript general, jQuery si o pagina cu exepmlu interactiv de animatie jQuery.

Fig2. Foaia de titlu

Fig.3 HTML 5

Fig.4 HTML media

Fig.5 Avantaje si dezavantaje HTML media

Fig.6 CSS 3

Fig.7 Exemple CSS

Fig.8 Exemplu de animatii CSS

Fig.9 JavaScript

Fig.10 jQuery

Fig.11 Exemplu de animatii jQuery

Concluzii

Multimedia, folosește o combinație de diferite forme de conținut, cum ar fi text, audio, imagini, animații, conținut video și interactiv. Care contrastează cu mass-media multimedia folosesc monitoare de calculator numai rudimentar cum ar fi text numai tradiționale sau forme de material imprimate sau fabricate manual.

HTML5 vine cu multe facilități surprinzătoare ce fac procesul de webdesign mai plăcut.

Bibliografie

https://github.com/etianen/html5media

https://github.com/etianen/html5media/wiki

http://www.mediawiki.org/wiki/Extension:HTML5video

http://www.mediawiki.org/wiki/Extension:HTML5Media

http://msdn.microsoft.com/en-us/magazine/hh561710.aspx

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

http://www.w3.org/2010/05/video/mediaevents.htm

http://www.w3schools.com/htmL/html_media.asp

https://tutorialehtml.com/ro/text-in-miscare-tagul-marquee/

https://greensock.com

https://daneden.github.io/animate.css/

http://www.w3schools.com/html/html5_intro.asp

https://en.wikipedia.org/wiki/HTML5

http://www.w3schools.com/html/html_xhtml.asp

http://profs.info.uaic.ro/~mihaela/teach/psw/curs05psw.pdf