Lucrare de laborator Nr.

1
Tema: Manipularea imaginilor
Scopul lucrrii: familiarizarea cu produsul Director, studierea principalelor componente
necesare dezvoltrii unei aplicaii multimedia.
Produsul de creaie multimedia Director
Produsul de creaie multimedia Director lucreaz cu mai multe componente identificabile de
ctre utilizator prin prisma unor ferestre de vizualizare. Aceste componente sunt utile pentru a
construi o prezentare multimedia i se invoc prin selecia unei opiuni ce indic componenta din
meniul Window.
Componenta Stage definete fereastra (zona client) n care se deruleaz prezentarea multimedia
dup cum se poate observa n figura 1.1.

Fig. 1.1 Componenta Stage

Vizualizarea coninutului ferestrei se poate face la diferite scale. n figura 1.1 scala de vizualizare
este 100% dar se poate schimba utiliznd controlul de tip combobox din partea de jos a cadrului
ferestrei. Redimensionarea ferestrei se face prin intermediul proprietii Stage Size a obiectului
Movie care identific prezentarea (aplicaia) multimedia n Director. Tot n partea de jos a
cadrului ferestrei exist butoane pentru controlul derulrii prezentrii. Funcionalitatea lor va fi
prezentat n cadrul componentei Control Panel.
Componenta Cast este utilizat pentru a stoca actorii unei aplicaii. Ea se poate configura
(View/Cast/Thumbnail) astfel nct s prezinte actorii sub forma unor mici ferestre de
vizualizare. Actorii se pot aduga n componenta Cast prin selecia urmtorului membru cast
neocupat apoi Click Dreapta/Import dac ei provin din afara mediului de programare sau se
pot genera de ctre alte componente ale produsului software.

Fig. 1.2 Componenta Cast

n figura 1.2 se poate observa c, n componenta Cast sunt doar doi membrii, unul (europe) este
obinut prin importul unei imagini, n timp ce al doilea membru este un script.
Componenta Cast poate fi privit ca fiind o baz de date ce memoreaz actorii unei aplicaii.
Aceast component poate fi stocat independent de aplicaia n care a fost creat. In acest fel,
actorii unei aplicaii pot fi folosii de ctre o alt aplicaie. In figura 5.2 se prezint o component
cast intern aplicaiei (Internal).
Dac se dorete crearea unei componente independente n vederea refolosirii ei n alte aplicaii se
procedeaz astfel:
- se creaz un nou cast (File/New/Cast);
- se furnizeaz un nume, se seteaz opiunea External, dup care se apas butonul Create;
- apoi se populeaz componenta Cast cu actori.
Dac se nchide fereastra, atunci se iniiaz dialogul de salvare pe disc, componenta se va stoca
ntr-un fiier avnd extensia cst. Deschiderea componentei cast se face cu File/Open i se alege
fiierul corespunztor cu extensia cst. Un membru Cast se refer prin construcia member(n)
unde, n este numrul sau numele membrului Cast dac membrul aparine componentei Cast
interne (Internal) sau prin construcia castlib(nume).member[n] dac membrul aparine unei
componente Cast externe identificabile prin nume.
Componenta Tools conine instrumente utile n dezvoltarea de aplicaii Director cum ar fi:
butoane de diferite tipuri, containere de texte, obiecte grafice, dup cum se poate observa n
figura 1.3.

Fig. 1.3 Componenta Tools

Componenta Score definete n Director axa timpului. Ea se utilizeaz pentru a secvenializa

de-a lungul axei timpului actorii n funcie de scenariul aplicaiei. Aceast component este
organizat ca o matrice:
- liniile reprezint canale (sprite) i folosesc pentru a instania actorii din componenta cast;
- coloanele reprezint cadrele (frame) i folosesc pentru a marca durata de vizibilitate a unui
actor n raport cu ntregul film.

Fig. 1.4 Componenta Score

Se observ n figura 1.4 c pe canalul 1 membrul cast europe este instaniat i dureaz de la
primul cadrul pn la cadrul 20. Pe canalele numerotate cu 1, 2, ..., n se pot instania membri
din cast dup cum dorete utilizatorul. Canalele din partea de sus a ferestrei au destinaii bine
precizate:
- utilizat pentru stabilirea tempo-ului aplicaiei (tempo-ul precizeaz viteza de afiare a cadrelor);
- stabilete paleta de culori;
- canal pentru stabilirea efectelor de tranziie dintre cadre;
- i canale specializate pentru membrii de tip sunet;
- canal destinat pentru a asocia comportamente cadrelor.
n figura 1.4 se observ o linie vertical de culoare roie care reprezint cursorul componentei
Score i identific cadrul care este vizibil pe scen.
Componenta Control Panel este specializat pentru controlul derulrii prezentrii multimedia n
Director. Ea permite trecerea aplicaie din modul construcie n modul execuie.
Funcionalitatea controalelor din componenta Control Panel este ilustrat n figura 1.5.

Fig. 1.5 Componenta Control Panel

Componenta Script este vizibil sub forma unui editor de texte i se utilizeaz pentru a scrie
scripturi. Scripturile n Director se pot scrie fie n limbajul de tip script Lingo, propriu produsului
software, fie n Java Script. Prin intermediul scripturilor se definete interaciunea dintre
utilizator i aplicaie i se implementeaz funcionalitatea acesteia.
5.2. Etapele de dezvoltare ale unei aplicaii multimedia
Indiferent de compexitatea unei aplicaii, pentru construirea ei, n Director, este necesar s se
parcurg urmtoarele etape:
A. Identificarea actorilor ce se vor utiliza n aplicaia respectiv. Aceast etap implic utilizarea
componentei Cast n sensul c ea va fi populat cu elemente. Actorii pot s provin din exteriorul
mediului de dezvoltare (Director), cum ar fi imagini, secvene de sunet sau secvene video
achiziionate independent i existente n formate acceptate n Director sau pot fi create utiliznd
componentele produsului software.
De exemplu, dac dorim s construim o aplicaie simpl care s afieze un mesaj ntr-o csu de
mesaje cnd se d click pe un buton atunci prima etap se concretizeaz n trasarea butonului din
bara de instrumente (Tools) pe scen n locul dorit. Se scrie textul dorit pe buton, n exemplu
Mesaj, iar n Cast se poate observa c obiectul a fost adugat ca membru. Figura 1.6 ilustreaz
aceast operaie.

Fig. 1.6 Popularea componentei Cast

B. Secvenializarea actorilor presupune utilizarea componentei Score (axa timpului). Actorii
existeni n Cast, conform unui scenariu sunt instaniai n Score, li se fixeaz durata de timp n
care ei sunt vizibili i momentul ntrrii lor n scen. In cazul exemplului prezentat, trasarea
butonului pe scen determin includerea lui ca membru n Cast ct i secvenializarea lui n
Score. Implicit actorul se secvenializeaz de la frame-ul indicat de cursorul componentei Score

i dureaz 30 frame-uri (implicit). Dup cum se poate observa din figura 1.7 butonul ntr n
scen ncepnd cu primul frame si dureaz 30 frame-uri.

Fig. 1.7 Secvenializarea actorilor

C. Definirea interfeei cu utilizatorul este etapa n care se utilizeaz componenta Script pentru a
scrie secvene de cod ca rspuns la evenimentele ce se intercepteaz pe perioada execuiei
aplicaiei. Prin aceast etap dezvoltatorul permite utilizatorului s aleag scenariul de derulare a
aplicaiei multimedia. Dac se execut aplicaia n forma prezentat atunci va apare pe scen
butonul pe durata a 30 de frame-uri dup care derularea ei se va opri sau se va relua de la primul
frame n funcie de opiunea setat n componenta Control Panel. Dac se apas pe buton n timp
ce aplicaia este n derulare nu se va ntmpla nimic pentru c nu a fost definit nici o
funcionalitate pentru evenimentul de click pe butonul mouse-ului.
Pentru aplicaia definit anterior se vor scrie dou scripturi avnd funcionalitile:
- la frame-ul 30 se va pstra aplicaia n execuie pentru ca utilizatorul s apese pe butonul Mesaj
sau s termine aplicaia:
function exitFrame(me)
{ _movie.go(_movie.frame);}
- pentru obiectul buton identificat prin Mesaj se rspunde la evenimentul de click pe butonul
snga al mouse-ului prin scriptul:
function mouseUp (me)
{ _player.alert ("Mesaj la apasare pe buton!");}
Interceptarea mesajului de ctre buton va determina apariia unei casue de mesaje de tip
atenionare n care va fi scris mesajul: Mesaj la apasare pe buton!
D. Distribuirea produciei multimedia este etapa n care aplicaia multimedia se transform astfel
nct s poat fi utilizat independent de mediu Director. Astfel se poate obine din producia
multimedia o aplicaie Windows de tip desktop sau o aplicaie de tip Web. Se alge din meniul
File opiunea Publish Setings iar n caseta de dialog din figura 1.8 se bifeaz categoria Projector
i se obine o aplicaie desktop prin apsarea pe butonul Publish.

Fig. 1.8 Distribuirea aplicaiei

Pentru a obine o aplicaie Web care s poat fi rulat ntr-un Browser Web (de exemplu Internet
Explorer) se bifeaz opiunea Shockwave File mpreun cu HTML. Pentru ca operaia s aib
succes trebuie ca pe calculator s fie instalat un control de tip ActiveX denumit Shockwave
Player care execut aplicaia Director n format Shockwave ntr-o pagin Web.
Dintr-o aplicaie Director se mai pot exporta cadre sau chiar secvene video digitale n format
AVI sau MOV. In acest sens, se alege opiunea Export din meniul File i se completeaz
corespunztor dialogul din figura 1.9.

Fig. 1.9 Exportul de imagini sau video din Director

Prin aceast operaie interactivitatea cu aplicaia multimedia nu se mai poate realiza.
5.3 Tipuri de scripturi i comunicarea prin mesaje

Prin script se nelege o secven de cod realizat pentru a rspunde la mesajele interceptate de
obiecte ca urmare a declanrii unor evenimente, pentru a defini clase sau funcii de utilizator.
Principala structur de program existent n scripturi este handler-ul care are forma:
function nume (argumente)
{
//corpul_handler-ului
}
Un script poate conine unul sau mai multe handler-e. Intr-o aplicaie Director pot exista mai
multe tipuri de scripturi:
1. Script de tip behavior, cel mai utilizat tip de script ntr-o aplicaie Director, care se ataeaz
obiectelor instaniate n score sau cadrelor; aceste scripturi sunt vizibile n componenta Cast, ca
membrii i sunt marcai cu iconia ;
2. Script de tip movie care vizeaz aplicaia n ansamblul ei, prin intermediul lui se trateaz
evenimente specifice aplicaiei (de exemplu: startmovie, stopmovie) sau se definesc funcii de
utilizator cu vizibilitate n toat aplicaia; aceste scripturi sunt vizibile n componenta Cast, ca
membrii i sunt marcai cu iconia ;
Pentru a genera un script de tipul celor doua menionate, se selecteaz urmtorul membru
neocupat din Cast i se activeaz componenta Script (opiunea Script de la meniul Window).
La proprieti, se selecteaz tab-ul Script i se alege tipul de script dorit pentru a fi generat
dup cum se ilustreaz n figura 1.10.

Fig. 1.10 Selecia tipului de script

3. Script ataat membrului Cast, este singurul tip de script care nu se memoreaz ntr-un membru
Cast de sine stttor ci se asociaz cu membrul Cast pentru care a fost definit; pentru a genera un
astfel de script se selecteaz membrul Cast, click dreapta i se alge opiunea Cast Member Script
dup care apare fereastra de editare a scriptului. Membrii Cast crora li s-au asociat astfel de
scripturi sunt marcai i cu iconia pe lng iconia afiat n concordan cu tipul membrului
Cast.
Se poate observa c, unui actor i se poate asocia un script att n Score ct i n Cast. Actorul
ataat unui canal, n Score, este o instan a actorului existent n Cast, de aceea, scriptul lui de tip
behavior este asociat instanei actorului n timp ce scriptul membrului Cast este aplicabil tuturor
instanelor actorului respectiv.
n Director este important a se cunoate ordinea n care un mesaj este interceptat pentru a se
rspunde la el, dat fiind faptul c un handler, pentru un anumit mesaj, poate exista n diferite
tipuri de scripturi. Ordinea n care unui mesaj interceptat i se caut handler-ul de rspuns este
urmtoarea:
- prima dat, mesajul se transmite spre a fi tratat la scriptul de tip behavior ataat obiectului care
a interceptat evenimentul;
- apoi, mesajul se transmite spre a fi tratat scriptului asociat membrului Cast din care a provenit
obiectul;
- mesajul se transmite, n ordine, scriptului asociat frame-ului aferent momentului cnd
evenimentul a fost declanat;

- n ultim instan mesajul se trimite spre a fi tratat scriptului de tip Movie.

Spre exemplificare s presupunem c avem un membru Cast de tip buton instaniat pe canalul 1
n Score i care are asociat un script de tip behavior ce are un handler de rspuns la mesajul
mouseUp de forma:
function mouseUp (me)
{
_player.alert ("executie script behavior");
}
iar scriptul asociat membrului Cast corespunztor este de forma:
function mouseUp ()
{
_player.alert ("executie script asociat membrului cast");
}
Cnd se intercepteaz evenimentul de mouseUp de ctre buton, se execut conform ordinii de
interceptare a mesajelor handler-ul corespunztor din scriptul de tip behavior i se va afia n
casua de mesaje, mesajul executie script behavior. Pentru ca mesajul s fie trimis spre a fi tratat
i n alte scripturi, conform ordinii prezentate, se folosete comanda pass. Dac n scriptul de tip
behavior asociat butonului, handler-ul de rspuns la evenimentul mouseUp ar avea forma:
function mouseUp ()
{
_player.alert ("executie script asociat membrului cast ");
pass();
}
atunci, la apsarea pe buton ar apare o casu de mesaje avnd mesajul: executie script behavior
iar apoi ar apare o csu avnd mesajul executie script asociat membrului cast.
Evenimentele care sunt interceptate pe parcursul derulrii unei aplicaii se pot mpri n dou
categorii:
- evenimente de sistem care sunt predefinite i denumite in Director (de exemplu: ExitFrame,
MouseUp etc);
- evenimente de utilizator definite i gestionate de dezvoltatorul aplicaiei.
Exist evenimente de sistem pe care o aplicaie ntotdeauna le intercepteaz pe parcursul
derulrii ei, ntr-o ordine prestabilit:
A. la startarea aplicaiei:
o prepareMovie;
o prepareFrame;
o beginSprite;
o startMovie.
B. la accesarea unui frame:
o beginSprite;
o stepFrame;
o prepareFrame;
o enterFrame / exitFrame;
o endSprite.
C. la oprirea aplicaiei:
o endSprite;
o stopMovie.

In JavaScript mesajele de utilizator se definesc prin literali. Spre exemplificare, s se coloreze o

elips cu culoarea roie la apsarea unui buton. Aceast operaie se va efectua prin trimiterea
unui mesaj de utilizator (coloreaza) elipsei la apsarea butonului. Elipsa, la primirea mesajului
coloreaza se va colora cu culoarea roie.
Scriptul butonului are forma:
function mouseUp (me)
{
_movie.sendsprite(1,coloreaza,255,0,0);
}
Funcia sendsprite trimite un mesaj unui obiect aflat pe canalul indicat de primul parametru. Al
doilea parametru reprezint numele mesajului iar n exemplu, urmtorii parametri precizeaz
culoarea prin culorile fundamentale ale spectrului RGB.
n scriptul elipsei se rspunde la mesajul coloreaza i se coloreaz elipsa:
function coloreaza (me, v1,v2,v3)
{
sprite(1).color=color(v1,v2,v3)
}
Se observ c informaiile trimise odat cu mesajul se preiau prin parametrii formali v1, v2 i v3.
Parametrul me identific obiectul care primete mesajul i ocup ntotdeauna prima poziie n
lista de parametrii. In script el nu este utilizat dar trebuie pus n list pentru a se recepiona
corect ceilali parametrii ce nsoesc mesajul. Funcia color formeaz culoarea pornind de la
cele trei valori asociate culorilor fundamentale din spectrul RGB.
Sarcina:
Dezvolt o aplicaie Desktop care ncarc una sau mai multe imagini dintr-un fiier i le
vizualizeaz ntr-o fereastr. Asupra acestor imagini pot fi executate careva aciuni, utiliznd
controale UI (butoane, cmpuri de introducere a textului, etc.)
Lista cu aciuni posibile:
1. ntoarce imaginea pe vertical; rotete imaginea la un unghi divizibil cu 90 ; salveaz
imaginea rezultat.
2. Regleaz contrastul (0-100%); regleaz luminozitatea (0-100%); salveaz imaginea
rezultat.
3. Scaleaz imaginea; decupeaz imaginea; salveaz imaginea rezultat.
4. Regleaz Nuana de culoare / Saturaia; salveaz imaginea rezultat.
5. Modific imaginea surs (itereaz prin mai multe imagini) prin date introduse de
utilizator; schimb-le ntr-un mod "slide show" (pe un interval de timp); salveaz
imaginea rezultat.
6. Deseneaz pe imaginea ncrcat (de exemplu, cu un instrument de tip "creion"); regleaz
culoarea stiloului; salveaz imaginea rezultat.
7. Convertete imaginea la tonuri de gri; Coloreaz imaginea (se aplic o culoare pentru
imaginea n tonuri de gri ); salveaz imaginea rezultat.
8. Inverseaz culorile la o scar reglabil; salveaz imaginea rezultat.
9. Distorsioneaz imaginea cu un efect de lentil (parametri reglabili ai lentilei); salveaz
imaginea rezultat.
10. Aplic efectul de oglind asupra imaginii de-a lungul unei linii specificabile de utilizator;
salveaz imaginea rezultat.

Fig. Exemple de aplicaii

ntrebri de control:
1. Ce reprezint componenta Stage?
2. Pentru ce este utilizat componenta Cast?
3. Ce elemente conine componenta Tools?
4. Ce definete componenta Score, ce reprezint liniile i coloanele?
5. Care este destinaia componentei Control Panel?
6. Cum pot fi scrise scripturile n Director?
7. Care sunt etapele de dezvoltare ale unei aplicaii mutimedia?
8. Ce reprezint un script?
9. Ce tipuri de evenimente sunt interceptate pe parcursul derulrii unei aplicaii?
10. Care este ordinea de interceptare a evenimentelor de sistem de ctre o aplicaie?

Lucrare de laborator Nr. 2

Tema: Manipularea Audio
Dezvolt o aplicaie Desktop care ncarc un sunet (cntec) dintr-un fiier i este capabil de a-l
reda, cu o [modificare], precum i fr ea. Parametrii numerici ai modificrii trebuie s fie
reglabili prin UI.

List de modificri:
1. Sunetul este inversat
2. Pasul (pitch) mutat n sus sau n jos. (parametri: valoare)
3. Schimb viteza de redare n sus sau n jos. (parametri: valoare)
4. Echo adugat. (parametri: amplitudine, ntrziere)
5. Egalizator (5 pasi)
6. Adaug zgomot (parametri: amplitudine, de tip zgomot)
7. Volumul oscileaz de-a lungul unei LFO (oscilaie de frecven joas), parametri: perioada
LFO, LFO amplitudine (0-100, 0-100)
8. Se amestec dou fiiere mpreun (se redau concomitent dou fiiere)
9. Adaug sunet metronom (parametri: frecvena, periodicitatea)
10. Schimbarea balanei de sunet (poziia perceput)

Fig. Exemple de aplicaii

Lucrare de laborator Nr. 3

Tema: Manipularea Video
Dezvolt o aplicaie desktop care face oricare dintre urmtoarele (alege unul):
1. Arat n timp real input-ul de la webcam
2. Red un fiier video stocat pe computer.
3. Red un video stream de la o surs stream. (URI)

Fig. Exemple de aplicaii

Lucrare de laborator Nr.4

Tema: Aplicaii Web multimedia. HTML, XHTML, CSS
Scopul lucrrii: familiarizarea cu limbajele HTML, XHTML, CSS.
Reeaua de resurse globale de informare Web are la baz noiunea de hipertext. Prin hipertext se
ntelege un document care conine, pe lng text, grafic, imagini, animaie, nregistrri audio
i legturi (referine) ctre alte documente. Ulterior acesta a fost extins la termenul de
hipermedia, acesta avnd un sens mai larg. Conotaia este ns aceiai i anume semnific
resurse care conin legturi la alte resurse media.
4.1. HTML
Limbajul HTML (HyperText Markup Language), a fost proiectat s poat opera cu
functionalitile multimedia ale reelei Web. El este un limbaj de marcare care permite
editarea sau transformarea oricrui text sub form de hipertext prin introducerea unor
marcaje, care vor indica pe lng modul cum se efectueaz legturile documentului cu alte
resurse externe i modul cum vor aprea formatate paginile documentului. Un document

HTML poate fi fcut public prin instalarea lui pe un server Web. Marcajele introduse de
HTML poart numele de tag-uri HTML.
Versiunile cele mai importante de HTML:

HTML 1.0 (~1991) - draft CERN, 20 de taguri

HTML 2.0 (~1995) - standard, 49 taguri
HTML 3.2 (~1997) - standard, adopt mare parte din tagurile propuse de Netscape,
asigur suport pentru tabele, a fost propus extinderea prin MathML pentru a permite includerea
de formule matematice
HTML 4.0 (~1998) - standard, primul conform International Standard ISO 8879, suport
CSS, obiecte multimedia, limbaj script extins, faciliti pentru tiprirea paginilor etc.
HTML 5.0 (~2008) - draft, include MathML si SVG n documente HTML, adaug tag-uri
pentru dialog,video, audio, embed, progress, canvas etc.
Exemplu de document HTML:
<!doctype html>
<html>
<head>
<title>Exemplul1 HTML</title>
</head>
<body>
<p>Textul meu!</p>
</body>
</html>
Tipuri de taguri HTML:

1. Taguri pentru descrierea structurii:

document: <html><head><title></title></head> <body></body></html>
text: paragrafe (<p></p>), rnd nou (<br>), text preformatat (<pre></pre>), subscript
(<sub></sub), superscript (), citate (<blockquote
cite="adresa_citat"></blockquote>)
liste: neordonate (<ul> <li></li>... </ul>), ordonate (<ol> <li></li>... </ol>), list
definiii (<dl> <dt></dt><dd></dd> ... </dl>)
tabele: <table><caption></caption><tr> <th></th> ... </tr><tr> <td></td> ...
</tr></table>
Exemplu:
<table border="1">
<caption>
<em>Iepuri de casa (merged cells)</em>
</caption>
<tbody>
<tr>
<th rowspan="2">
<th colspan="2">Media
<th rowspan="2">Blana<br>maro
<tr>
<th>lungime
<th>greutate

<tr>
<th>Masculi
<td>0.93
<td>4.5
<td>80%
<tr>
<th>Femele
<td>0.91
<td>4.2
<td>67%
</tr>
</tbody>
</table>
Iepuri de casa (merged cells)
Media

Blana
ma
lungime greutate
ro

Masculi 0.93

4.5

80%

Femele 0.91

4.2

67%

legturi: <a href="adresa">text</a>, adresa poate fi un URL sau o ancor

"#numeAncora", definit cu ajutorul tagului <a name = "numeAncora"></a>. Numele ancorelor
nu este case-sensitive.
imagini: <img src="adresaImg" alt="text alternativ">
appleturi: <applet code="numeFisier.class" width="dx" height="dy">Titlu
applet.</applet> sau <object codetype="application/java"
classid="java:numeFisier.class"
width="dx" height="dy"> Titlu applet.</object>
2. Taguri pentru descrierea prezentrii:
style sheets:<tag class="numeClasaCSS" ...>, poate fi defint cu <style type="text/css">
tag.numeClasaCSS {atribute}</style>
fonturi, culori, alinieri : <b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small>, <font size="2" color="#ff0000"
face="Verdana">... </font>
frame-uri:
<frameset cols="20%, 80%">
<frameset rows="100, 200">
<frame src="frame1.html">
<frame src="frame2.gif">
</frameset>
<frame src="frame3.html">
<noframes>
<p>Documentul contine:
<ul>
<li><a href="frame1.html"> pag1</a></li>
<li><img src="frame2.gif" alt="img2"></li>
<li><a href="frame3.html">pag3</a></li>
</ul>

</noframes>
</frameset>

3. Taguri pentru implementarea interactivitii:

formulare (HTML forms):
<form action="URL(php, asp ...)" method="post">
<p>
<label for="prenume">Prenume: </label>
<input type="text" id="prenume"><br>
<label for="nume">Nume: </label>
<input type="text" id="nume"><br>
<label for="email">email: </label>
<input type="text" id="email"><br>
<input type="radio" name="tip" value="barbat"> Barbat<br>
<input type="radio" name="tip" value="femeie"> Femeie<br>
<input type="submit" value="Trimite">
<input type="reset" value="Initializeaza">
</p>
</form>
scripturi: <script type="text/vbscript" src="URLVBScript"> sau <script type="text/javascript">
...program Javascript...
</script>
4.2. XHTML
XHTML = EXtensible HyperText Markup Language
Este o versiune strict i "curat" de HTML 4.01. Este un standard W3C. Se bazeaz pe XML.
Nu accept marcaje incorecte. Tagurile sunt scrise cu litere mici i nu se accept lipsa marcajelor
de nchidere. Nu se accept imbricarea incorect a tagurilor (ex. <b><i>Acest text este bolditalic</b></i>). Tagurile singulare trebuie de asemenea nchise (ex. <br /> sau <img
src="img.gif" alt="My image" />).
Documentul trebuie s fie inclus ntr-o structur fix (trebuie s existe un "root element")
<html>
<head> ... </head>
<body> ... </body>
</html>
Nu este permis minimizarea atributelor (ex. <input disabled> se va scrie <input
disabled="disabled" />).
Sprijin specificarea limbajului n care sunt scrise datele (ex. <div lang="it" xml:lang="it">Ciao
bella!</div>).
Documentul trebuie s aib precizat tipul prin specificarea unui DTD (Document Type
Definition). Exist 3 DTD-uri specifice pentru XHTML i anume:
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Un document XHTML poate fi validat la adresa:
http://validator.w3.org/ .
4.3. CSS
Tehnologia CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML. Ea a aprut n primul rnd din dorina de a putea formata unitar toate
paginile unei aplicaii ntr-o manier uoar i flexibil.
Menirea pricipal este aceea de a specifica cum vor fi afiate diversele entitati HTML. CSS a
aprut odata cu HTML 4.0. Stilurile CSS pot fi definite n pagina sau ntr-un fi ier separat
(de obicei cu extensia .css). Exemplu de CSS utilizat n pagina:
<head>
...
<style type="text/css">
ol.roman { list-style-type: lower-roman }
</style>
</head>
<body>
<ol class="roman">
<li> Step one ...
<li> Step two ...
</ol>
...
Prin utilizarea unor fiiere .css se poate schimba foarte usor modul de afiare a informaiei n
aceiai pagin: exemplu CSS.
Din punct de vedere sintactic CSS este format din trei prti: un selector, o proprietate i o
valoare: selector {property:value}. Pentru a crete lizibilitatea mai multe proprieti pot fi
grupate pentru acelai element:
p
{
text-align:center;
color:black;
font-family:arial
}
De asemenea se permite i gruparea mai multor selectori pentru aceleai proprieti:

h1,h2,h3,h4,h5,h6
{
color:green
}
Pentru a putea varia definiia pentru un selector a fost introdus noiunea de clas. n felul acesta
dou entiti HTML de acelai tip pot fi formatate diferit dac se va preciza o clas diferit
pentru fiecare.
n fiierul css:
p.right {text-align:right}
p.center {text-align:center}
n fiierul html:
<p class="right">Acest paragraf va fi aliniat la dreapta.</p>
<p class="center">Acest paragraf va fi aliniat central.</p>
Dac la definiia unei clase este omis selectorul atunci clasa se va putea aplica la orice
entitate html care suport acea proprietate:
.center {text-align:center}
.green {color:green}
Dac se dorete, unei entiti html i se pot aplica simultan mai multe clase:
<p class="center green">Textul paragrafului.</p>
Exist 3 moduri diferite de a aduga elemente css la un document:

Internal Style Sheet

Se definete cu ajutorul tagului <style> n interiorul seciunii <head> din document.
Inline Style
Se definete ca atribut n interiorul unui tag:
<p style="color:sienna;margin-left:20px">Text paragraf.</p>
Nu se recomand utilizarea acestui stil pentru c se pierde din lizibilitate.
Extenal Style Sheet
Se definete n fiiere externe paginii html i are avantajul c este aplicabil mai multor pagini
prin simpla incluziune a unelui fiierului prin intermediul unui tag <link>. Ex:
Fiierul stil1.css
hr {color:green}
p {text-align:center}
Fiierul p.html
<html><head>
<link rel="stylesheet" type="text/css" href="stil1.css" />
</head> ...
Dac mai multe stiluri sunt definite pentru acelai element html ordinea prioritilor este
urmtoarea:
1. Inline style
2. Internal style sheet
3. External style sheet
4. Browser default

Sarcina: realizarea unei aplicaii web multimedia utiliznd noiunile din HTML, XHTML, CSS.

ntrebri de control:
1. Cum se descifreaz HTML?
2. Cum poate fi fcut public un document HTML. Cum se numesc marcajele introduse de
HTML?
3. Care sunt versiunile de HTML?
4. Ce tipuri de taguri exist?
5. Ce reprezint XHTML?
6. Ce reprezint tehnologia CSS?
7. n cte moduri pot fi adugate elementele css la un document?

Lucrare de laborator Nr.5

Tema: Limbaje Client Side Script
Scopul lucrrii: familiarizarea cu limbajele JavaScript i Action Script.
Aplicaiile de tip Client Side Script se refer n general la acele programe Web care ruleaz pe
client (browser), dup sau n timpul ncrcrii paginii Web de ctrea acesta. Limbajele de
programare Client Side Script sunt acele limbaje care permit scrierea unor astfel de aplicaii.
Aceste limbaje fie sunt integrate n limbajul HTML i suportate direct de ctre browser (ex.
JavaScript), fie necesit un plug-in extern (ex. ActionScript - Flash). n afar de utilizarea de
limbaje de tip script, pentru implementarea aplicaiilor Client Side se pot utiliza i limbaje de
programare (ex. Java prin Java Applet). Acest capitol se va concentra pe dou limbaje foarte
rspndite i anume JavaScript i ActionScript.
5.1. Limbajul JavaScript
Limbajul JavaScript (sau ECMAScript) este un limbaj de tip script suportat de browserele Web
care poate fi integrat direct ntr-o pagin HTML. Fa de alte limbaje el are cteva avantaje
importante, cum ar fi:

nu necesit instalarea unor aplicaii suplimentare pentru a rula.

este simplu de nvat (sintaxa este asemntoare cu cea a limbajelor C i Java)
permite implementarea unor aplicaii complexe ntr-o manier simpl
din el se poate accesa i controla direct toate elementele unei pagini HTML (text,
imagini, formulare, frame-uri etc)
sprijin validarea datelor din formularele HTML
permite programarea bazat pe evenimente

Cea mai important facilitate oferit de JavaScript este aceea de a aduga dinamism i
interactivitate n paginile Web clasice. Un exemplu elocvent este oferit de Dave Tau n
pagina de prezentare a crtii JavaScript 3nd Ed.:

Exemplu de pagin animat folosind JavaScript

Elemente de limbaj JavaScript

Limbajul JavaScript este case sensitive. Declaraiile vor fi (opional) desprite de ";". La fel ca
i n limbajul C secvenele de cod pot forma instruciuni compuse dac sunt plasate ntre
acolade. Pentru comentarii poate fi utilizat sintaxa Java pentru comentarii pe o singur linie
(//) sau pe mai multe linii (/*...*/). Pentru a include o secven JavaScript ntr-o pagin
HTML se va folosi tagul (>>> Ex 4.1 <<<):
<script type = "text/javascript">
// cod JavaScript
</script>
Dei majoritatea browserelor accept i forma mai veche (<script language = "JavaScript">)
nu se recomand folosirea acesteia.
Plasarea codului n pagin se poate face n funcie de momentul n care dorim ca acesta s
ruleze. n seciunea <head> se vor scrie funciile apelabile la nevoie i cele declanate de
evenimente. Codul scris n seciunea <body> se va executa n timpul ncrcrii paginii n
browser. Pot exista oricte seciuni de cod JavaScript att n <head> ct i n <body>. Pentru
secvene lungi de cod sau pentru cod reutilizabil se poate folosi includerea unui fiier
JavaScript extern:
<script type="text/javascript" src="fisierCod.js">
</script>
Variabile: variabilele JavaScript sunt case sensitive. Varibilele nu au asociat un tip de date de la
declarare ci pot s-i schimbe tipul funcie de valoarea stocat. Numele poate ncepe cu o
liter sau cu caracterul "_". Pentru declararea unor variabile se va folosi construcia var.
Ex: var x=2, y;
Operatori:
Operator
matematic
+
*
/
%

Descriere

Examplu

Rezultat

adunare
scadere
multiplicare
impartire
modul (rest)

x=y+2
x=y-2
x=y*2
x=y/2
x=y%2

x=7
x=3
x=10
x=2.5
x=1

++
--

incrementare
decrementare

x=++y
x=--y

x=6
x=4

Oparatorii de asignare (=, +=, -=, *=, /=, %=).

Operatorul de concatenare iruri (+). Dac se concateneaz un ir cu un numr rezult un ir.
Operator
logic
==
===
!=
>
<
>=
<=

Descriere

Examplu

egal ca valoare
egal si ca tip

x==8 fals
x===5 adevarat
x==="5" fals
x!=8 adevarat
x>8 fals
x<8 adevarat
x>=8 fals
x<=8 adevarat

diferit
mai mare
mai mic
mai mare sau egal
mai mic sau egal

Operatorii logici (&&, ||, !).

Operatorul condiional (var=condition?val1:val2).
Instruciuni
1. Instruciunea if
if (conditie) {
cod executat pentru conditie adevarata
}
else {
cod executat pentru conditie falsa
}
(>>> Ex 4.2 <<<):
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time < 10) {
document.write("Buna Dimineata!");
}
else
{
document.write("Buna Ziua!");
}
</script>
2. Instruciunea switch
switch(n)
{
case 1:
cod executat daca n==1
break;
case 2:
cod executat daca n==2

break;
default:
cod executat daca n!=1 si n!=2
}
Ex:
<script type="text/javascript">
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 0:
document.write("duminica");
break;
case 1:
document.write("luni");
...
case 6:
document.write("sambata");
default:
document.write("zi gresita!");
}
</script>
3. Instruciunea for
for (var=start;var<=end;var=var+pas)
{
cod de executat
}
Ex:
<script type="text/javascript">
var n=1,i;
document.write("<h2>n factorial </h2><br>");
for(i=1;i<=10;i++) {
n=n*i;
document.write(i"! = "+n+"<br>");
}
</script>
4. Instruciunea while/do while
while (var<=endval)
{
code de executat
}
do
{
code de executat
}
while (var<=endval);
Ex:
<script type="text/javascript">
var n=1, i=1;
document.write("<h2>numere impare </h2><br>");
while(i<=10) {
document.write(n,", ");

n+=2;
}
</script>
5. Instruciunea for in
for (variable in object)
{
code de executat
}
Ferestre de avertizare
1. Alert box
alert("mesaj");
2. Confirm box
confirm("mesaj");
3. Prompt box (>>> ex4_3 <<<)
prompt("mesaj","valoare implicita");

Funcii
Funciile sunt secvene de cod care se execut fie prin apelarea explicit fie prin legarea de
un eveniment. De obicei funciile sunt plasate n seciunea <head>.
Funciile au un nume, o list de parametrii de apel i un bloc de cod. Dac codul funciei
calculeaz o valoare atunci aceasta poate fi returnat prin aplelul return val;.
function numeFunctie(var1,var2,...,varN)
{
codul functiei
}
Evenimente
Evenimentele sunt aciuni care sunt detectate de ctre browser i pot declana execuia unor
funcii.
Evenimentele captate de JavaScript: onLoad, onUnload, onFocus, onBlur, onChange,
onSubmit, onMouseOver, onMouseOut.
Ex:
function verificSuma() {
if(document.getElementById("suma").value<0) {
alert("Suma nu poate fi negativa!");
document.getElementById("suma").value=0;
}
}
...
<input type="text" size="30" id="suma" onchange="verificSuma()">
O list cu evenimentele specifice entitilor javascript se gsete laElated.

Mecanisme de tratare a erorilor

Pentru tratarea erorilor se pot folosi contruciile try..cartch pentru captarea lor, respectiv
throw pentru generarea lor.
Obiecte JavaScript
JavaScript este un limbaj orientat pe obiecte. Obiectele au proprieti i metode. Pentru
crearea obiectelor se va folosi operatorul new. Proprietile obiectului pot fi create dinamic
prin atribuirea unor valori:
p=new Object();
p.nume = "Ion";
p.varsta = 25;

5.2. Modelul DOM

(sursa: Wikymedia)
Exemplu de DOM:

Fiecare obiect definit de modelul DOM are o serie de proprieti i metode prin care poate fi
controlat:

window proprieti: screen.height, screen.width, metode: addEventListener(eventType,

listener, useCapture)/IE:attachEvent(eventType, function), resizeBy(dx, dy), resizeTo(x y),
scrollByLines(lines), sizeToContent()
document - proprietti: ownerDocument, title, URL, metode:
createAttribute("attrname"), createDocumentFragment(), createElement(tagName),
createTextNode(text), getElementById(id), getElementsByName(name),
getElementsByTagName(tagname)
dom element proprieti: attributes[], childNodes[], className, id, innerHTML,
nodeType, nodeValue, parentNode, style, metode: appendChild(node), blur(), focus(),
getAttribute(attrname), hasChildNodes(), removeAttribute(attrname), removeChild(child)
dom table proprieti: bgColor, border, caption, cells[], width, metode: createCaption(),
InsertRow(index), moveRow(fromIndex, toIndex)
5.3. Action Script
ActionScript este un limbaj asemntor cu JavaScript, folosit n principal pentru dezvoltarea
de functionaliti n cadrul animaiilor Adobe Flash prin generarea fiierelor cu extensia .swf
ce ruleaz n Adobe Flash Player. A fost dezvoltat iniial de compania Macromedia, iar acum
aparine Adobe, care a achiziionat Macromedia n 2005. Limbajul de programare are la baz
standardul ECMA. El a fost creat pentru desenarea i controlarea animaiilor vectoriale 2D
dar de-a lungul vremii s-a dezvoltat pentru a realiza aplicaii WEB complexe sau chiar jocuri.
ActionScript este case-sensitive.(wikipedia). Versiunea actual: Actionscript 3.0.

Tipuri de date: Boolean, Int, Uint, Object, Number, String, Null, Void.
Variabile:
var a:int = 10, b:int = 20;
var numArray:Array = ["zero", "one", "two"];
Constante predefinite: null, undefined, true, false.
Declararea constantelor: const MIN:int = 0;
Obiecte:
declarare: var someObj:Object;
instantiere: var myBirthday:Date = new Date();
var someArray:Array = new Array(1,2,3);
Clase dinamice:
dynamic class Persoana
{
private var adresa:String;
public var nume:String = "Ion";
function Persoana()

{
this.adresa="nu are";
}
}
var pers:Persoana = new Persoana();
pers.inaltime = 180;
Instruciuni condiionale: if..then..else, switch la fel ca i la JavaScript
Instruciuni ciclice:
- for
var i:int;
for (i=0; i<5; i++) { trace(i); }
- for..in
var myObj:Object = {x:20, y:30};
for (var i:String in myObj)
{
trace(i + ": " + myObj[i]);
}
// output: x: 20 y: 30
- for each..in
var myObj:Object = {x:20, y:30};
for each (var num in myObj)
{
trace(num);
}
// output: 20 30
- while
var i:int = 0;
while (i < 5)
{
trace(i);
i++;
}
- do while
var i:int = 5;
do
{
trace(i);
i++;

} while (i < 5);

// output: 5
Sarcina: realizarea unei aplicaii web multimedia utiliznd noiuni din limbajele JavaScript
i Action Script.

ntrebri de control:
1. Care sunt avantajele limbajului JavaScript?
2. Variabile JavaScript, operatori, instruciuni.
3. Tipuri de ferestre de avertizare.
4. Care este sintaxa de declarare a funciilor. Care sunt evenimentele captate de JavaScript?
5. Ce mecanisme JavaScript se utilizeaz pentru tratarea erorilor, captarea lor?
6. Ce operator se utilizeaz pentru crearea obiectelor?
7. Dai exemplu de model DOM.
8. Ce reprezint Action Script, care este versiunea actual?
9. Elemente utilizate n Action Script.

Lucrare de laborator Nr. 6

Tema: Limbaje Server Side Script
Scopul lucrrii: familiarizarea cu limbajul PHP.
Tehnologiile Server Side Scripting permit crearea de aplicaii Web complexe prin procesarea
datelor pe server i generarea unor pagini n mod dinamic. n felul acesta se pot interfaa
aplicaiile Web cu servere de baze de date sau servere de pot electronic. Limbajele
Server Side Script au posibilitatea de a accesa datele citite n formulare HTML i
implementeaz biblioteci de acces la resurse externe cum ar fi o baz de date. Spre
deosebire de tehnologii mai vechi care realizau acelai deziderat (Ex. CGI) server side
scripting asigur o vitez i o securiatate sporite. n general interpretoarele limbajelor SSS
sunt integrate sub form de module chiar n serverul de Web. Exemple de limbaje SSS: ASP,
ColdFusion Markup Language, JSP, PHP, Perl, Phyton, Rubi etc.
6.1. Limbajul PHP
Limbajul PHP este un un limbaj de tip server side script creat special pentru Web. Liniile de cod
PHP trebuie incluse n interiorul unei pagini Web scris n HTML. Utiliznd PHP pot fi
construite uor:
o
o
o
o
o
o

mecanisme de autentificatre utilizatori

sisteme de gestiune a coninutului
sisteme de tip "web based e-mail"
gestionare de liste de mesaje
forumuri Web
generarea automat de documente pdf

Serverul Web ncarc pagina din sistemul de fiiere propriu si, constatnd c este vorba de o
pagin PHP o trimite interpretorului PHP. Interpretorul PHP parcurge pagina i execut
instruciunile PHP ntlnite. Instruciunile PHP au ca i scop principal acela de a genera cod
HTML. De asemenea, codul HTML din fiierul original este copiat pur i simplu la ie ire.
Interpretorul PHP transmite napoi ctre server fiierul transformat prin interpretarea codul
PHP. Acest fiier va conine doar cod HTML (eventual i Client Side Script etc.) dar nu i
cod
PHP.
Fa de aceste limbaje SSS, PHP are cteva avantaje importante:
o
performan bun
o
interfee cu o mare varietate de sisteme de gestiune a bazelor de date
o
biblioteci puternice care acoper toate operaiile Web uzuale
o
gratuit (http://www.php.net) /cost scazut (http://www.zend.com)

uor de nvat i utilizat

portabil
disponibil ca i cod surs
Pentru includerea codului PHP ntr-o pagin HTML se prefer de obicei stilul XML:
<?php ... ?>
o
o
o

Tipuri de date PHP

Integer - utilizat pentru numere ntregi
Double - utilizat pentru numere reale
String - utilizat pentru iruri de caractere
Array - utilizat pentru a stoca serii de date
Object - utilizat pentru a reine obiecte
Pdfdoc, Pdfinfo - vezi seciunea 5.2
Specific: numele variabilelor PHP sunt prefixate de semnul $ ( $var1 = "sirul 1"; ).
Ca i n C, identificatorii PHP sunt "case sensitive".
Pentru definirea constantelor se poate folosi instruciunea define (define("PI",3.14); $alfa =
2*PI;).
La PHP domeniul de vizibilitate pentru variabile poate fi:
o
Global - varibilele globale, definite n afara funciilor sunt vizibile n tot fiierul
curent, mai puin n interiorul funciilor.
o
Local unei functii - variabilele create n funcii sunt vizibile doar n interiorul
acestora.
o
Global n interiorul unei funcii - acest tip de varibile sunt folosite pentru a
accesa variabilele globale cu acelai nume.
Accesarea datelor din formularele HTML
Accesarea varibilelor din formularele HTML se face prin intermediul tablourilor predefinite
$_POST si $_GET (dependent de metoda declarata de formular). Exemplul 5.1: citire din
formular.
Operatori PHP
Operatorii PHP sunt n general identici cu cei din limbajul C cu cteva exceptii:
Operatorul de concatenare iruri "." ($sir1." abc").
Substituia de variabile n ir "" ("$var" fata de '$var').
Operatorul de referire "&" ($b = &$a;).
Operatorul de testare a identitatii "===" ($a===123).
Operatorul de suprimare a erorilor "@" ($a = @($b / 0 );).
Operatorul de executie "`" (`dir c:\`).
Instruciuni PHP
Instruciunea if:
if (expr)
instructiuneAdevarat;
else
instructiuneFals;
Instruciunea elseif:
if (expr1)
instructiune1
elseif (expr2)
instructiune2
...
else

instructiuneN
Instruciunea switch:
switch (expr) {
case valoare_1:
instructiune_1;
break;
case valoare_2:
instructiune_2;
break;
...
case valoare_n:
instructiune_n;
break;
defaut:
instructiune_default;
}
Instruciunea while:
while (expr)
instructiune;
Instruciunea do-while:
do
instructiune
while (expr);
Instruciunea for:
for (expr1; expr2; expr3)
instructiune;
Instruciunea foreach:
$tablou = array (el0, el1, ... el_n);
foreach (tablou as val_el_crt)
instructiune;
$tablou = array( "cheie1" => el1, "cheie2" => el2, ... "cheie_n" => el_n);
foreach (tablou as cheie=>val_el_crt)
instructiune;
Exemplul 5.2: utilizare tablouri.
Instruciuni control repetiii: continue, break sireturn.
Funcii PHP
Funciile sunt utilizate pentru a grupa instruciunile care execut un anumit algoritm. Ele
permit refolosirea codului ori de cte ori este nevoie.
O funcie este un modul de cod care ofer o interfa de apel, rezolv un anumit algoritm i
opional, returneaz o valoare.
Declararea unei funcii se face n felul urmtor:
function nume_functie(lista_par) {
// secventa instructiuni
// (corpul functiei)
// daca este cazul: return exp;
}
Exemplu:
function afis_tablou( $t, $nume)
{
echo "Continut tablou $nume<BR>";
echo "<UL>";

foreach ( $t as $ind => $el )

echo "<LI> $ind - $el</LI>";
echo "</UL>";
}
// apel functie
$tPers = array( "Ionescu" => 1962, "Popescu" => 1967, "Vasilescu" => 1978);
afis_tablou("anul nasterii", $tPers);
Se pot declara si functii cu parametrii de apel optionali:
function afiseaza_titlu( $titlu, $marime = "H1", $culoare = "#000000")
{
echo "<$marime> <FONT color=\" $culoare\">".$titlu."</FONT></$marime><P>";
}
Implicit parametrii sunt transmii prin valoare. Dac se dorete transmiterea prin adres se va
utiliza referine:
function schimba( &$a, &$b )
{
echo "Apel schimba(a=$a, b=$b)";
$c = $b;
$b = $a;
$a = $c;
}
Limbajul PHP suport i funcii recursive:
function afis_inversat($sir)
{
if (strlen($sir)>0)
afis_inversat(substr($sir,1));
echo substr($sir, 0, 1);
}
Reutilizarea codului
Pentru a crete eficiena dezvoltrii aplicaiilor se prefer reutilizarea codului gata scris.
O prim modalitate o reprezint crearea i utilizarea de biblioteci de funcii.
Aceste bibilioteci sunt scrise n fiiere externe care pot fi incluse in aplicatia curenta prin
instructiunile include sau require. Spre deosebire de include, instructiunea require este
inlocuita cu fisierul referit la incarcarea paginii, indiferent daca executia codului va ajunge
sau
nu
la
aceasta
instructiune.
O a doua modalitate este reprezentata de posibilitatea crearii ierarhiilor de clase (incepand cu
PHP 5.0). Pentru mai multe informatii accesatiPHP: Classes and Objects.
Controlul Sesiunilor
Protocolul HTTP este un protocol lipsit de informatii de stare. Acest lucru se traduce prin
faptul ca acest protocol nu are nici un mecanism propriu prin care sa trasmita datele intre
doua tranzactii (pagini). La cererea succesiva a doua pagini de catre un utilizator catre un
server de Web, nu exista nici o posibilitate de a transmite spre cea de a doua pagina faptul ca
este vorba de catre acelasi utilizator. Ideea de la care pleaca controlul sesiunilor este tocmai
acela de a permite urmarirea actiunilor unui utilizator pe parcursul unei sesiuni de accese
catre respectivul server de Web.
Sesiunile PHP sunt gestionate prin intermediul unui numar unic (session ID) generat aleator
pe baza unui algoritm criptografic. Acest numar este generat de catre PHP si mentinut de

o
o
o
o

catre clientul de Web care a acceseaza pagini pe tot parcursul sesiunii de lucru.
Pasii care se fac la utilizarea unei sesiuni sunt urmatorii:
crearea unei sesiuni (session_start();)
inregistrarea variabilelor sesiune (session_register( "var");)
utilizarea variabilelor sesiune pentru controlul accesului sau personalizarea
paginii ($_SESSION["var"];)
stergerea variabilelor sesiune si distrugerea sesiunii (session_destroy();).
O alternativa la utilizarea sesiunilor o reprezinta tehnologia coockies, caz in care datele
specifice utilizatorului sunt pastrate pe calculatorul acestuia (in fisiere cookies gestionate de
browser).

6.2. GD
Biblioteca GD este folosite pentru crearea dinamica a imaginilor (GIF, JPG, PNG). Este
disponibila pe mai multe platforme (http://www.libgd.org/) dar in continuare ne vom referi la
implementarea PHP.
Pentru instalarea bibliotecii modulul PHP trebuie compilat cu optiunea --with-gd. La
versiunea de Windows se poate folosi biblioteca php_gd2.dll (se va modifica corespunzator
php.ini). In php.ini trebuie facuta si modificarea:
gd.jpeg_ignore_warning PHP_INI_ALL
Includerea unei imagini GD in pagina se va face prin:
<img src="img.php" alt="Imagine prin PHP GD ">
Pentru a crea imaginea fisierul img.php va contine:
<?php
header ("Content-type: image/jpeg");
$img = ImageCreate (250,150);
$fond = ImageColorAllocate ($img, 0, 0, 240);
$col = ImageColorAllocate ($img, 255, 255, 255);
ImageEllipse($img, 125, 75, 220, 100, $col);
ImageJPEG ($img, '', 100);
?>
Acest exemplu va crea o elipsa pe un fundal albastru.
Functii GD
> array gd_info(void);
array(9) {
["GD Version"]=>
string(24) "bundled (2.0 compatible)"
["FreeType Support"]=> bool(false)
["T1Lib Support"]=> bool(false)
["GIF Read Support"]=> bool(true)
["GIF Create Support"]=> bool(false)
["JPEG Support"]=> bool(false)
["PNG Support"]=> bool(true)
["WBMP Support"]=> bool(true)
["XBM Support"]=> bool(false)
}
> list($width,$height,$type,$attr) = getimagesize("img/flag.jpg");
> int imagecolorallocate($image, $red, $green, $blue);
Obs: primul apel va modifica culoarea de background.
> int imagecolorat($image, $x, $y);

Obs: Returneaza indexul culorii din punctul (x,y).

void imagecolorset($image, $index, $red, $green, $blue);
Obs: seteaza culoarea pentru indexul respectiv.
> array imagecolorsforindex($image, $index);
Obs: obtine culoarea (RGBA) de la indexul specificat.
> bool imagecopy($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h);
> bool imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y,
$dst_w, $dst_h, $src_w, $src_h);
> resource imagecreate($width, $height);
> resource imagecreatefromjpeg($filename);
Obs: creaza o imagine pornind de la fisierul specificat.
> bool imageellipse($image, $cx, $cy, $width, $height, $color);
> bool imagefill($image, $x, $y, $color)
> bool imagejpeg( $image [, $filename [,$quality]]);
Obs: Insereaza imaginea in pagina HTML.
> bool imageline($image, $x1, $y1, $x2, $y2, $color);
> bool imagerectangle($image, $x1, $y1, $x2, $y2, $color);
> bool imagesetpixel($image, $x, $y, $color);
> bool imagestring($image, $font, $x, $y, $string, $color);
> int imagesx($image);
> int imagesy($image);
6.3. PDFLib
Biblioteca PDFLib ajuta la crearea dinamica (din PHP) a documentelor PDF.
Crearea unui document PDF se face folosind fucntia PDF_new(); Un exemplu de utilizare se
gaseste pe http://www.php.net/.
Functii PDFLib
> int PDF_add_textflow(resource $pdfdoc, int $textflow, string $text, string $optlist);
> bool PDF_begin_page_ext(resource $pdfdoc, float $width, float $height, string $optlist);
Obs: Dimensiuni standard: A4 595 x 842, A3 842 x 1190.
> bool PDF_circle(resource $pdfdoc , float $x , float $y , float $r);
> bool PDF_continue_text(resource $p, string $text);
> bool PDF_end_document(resource $pdfdoc, string $optlist);
> bool PDF_end_page(resource $p);
> bool PDF_fit_image(resource $pdfdoc, int $image, float $x, float $y, string $optlist);
> bool PDF_lineto(resource $p, float $x, float $y);
> int PDF_load_font(resource $pdfdoc, string $fontname, string $encoding, string $optlist);
> int PDF_load_image(resource $pdfdoc, string $imagetype, string $filename, string
$optlist);
> bool PDF_moveto(resource $p, float $x, float $y);
> resource PDF_new(void);
> bool PDF_save(resource $p);
> bool PDF_setcolor(resource $p, string $fstype, string $colorspace, float $c1, float $c2, float
$c3, float $c4);
> bool PDF_show(resource $pdfdoc, string $text);
> bool PDF_show_xy(resource $p, string $text, float $x, float $y);
Exemplu:
$pdf = pdf_new();

if (!pdf_open_file($pdf, ""))
die("Error: Fail to open output file.");
pdf_set_info($pdf, "Author", $nume." <". $email.">");
pdf_set_info($pdf, "Title", "CV -".$nume);
pdf_set_info($pdf, "Subject", "The CV of ".$nume.".");
define("PAGE_HEIGHT", 842); /* A4 */
define("PAGE_WIDTH", 595);
define("VERT_SPACING", 14);
pdf_begin_page($pdf, PAGE_WIDTH, PAGE_HEIGHT);
// Print name
$font = pdf_findfont($pdf, "Times-Bold", "winansi", 0);
pdf_setfont($pdf, $font, 14.0);
$stringwidth = pdf_stringwidth($pdf, $nume, $font, 14.0);
$xpos = (PAGE_WIDTH / 2) - ($stringwidth / 2);
pdf_show_xy($pdf, $nume, $xpos, 700);
$xpos = pdf_get_value($pdf, "textx", 0);
$ypos = pdf_get_value($pdf, "texty", 0) - VERT_SPACING;
// Print personal information.
$font = pdf_findfont($pdf, "Times-Roman", "winansi", 0);
pdf_setfont($pdf, $font, 12.0);
$headerdata = array($adresa, $oras, $tara, $codPostal, $tel, $email);
pdf_end_page($pdf);
pdf_close($pdf);
$buf = pdf_get_buffer($pdf);
$len = strlen($buf);
header("Content-type: application/pdf");
header("Content-Length: $len");
header("Content-Disposition: inline; filename=resume.pdf");
print $buf;

Sarcina: realizarea unei aplicaii web multimedia utiliznd limbajul PHP.

ntrebri de control:
1. Descifrarea limbajului SSS. Exemple de limbaje SSS.
2. Care sunt avantajele limbajului PHP fa de alte limbaje Server Side Scripting?
3. Care este sintaxa de a include cod PHP ntr-o pagin HTML?
4. Ce tipuri de date sunt specifice limbajului PHP?
5. Numii cteva excepii ale operatorilor PHP fa de operatorii altor limbaje.
6. Tipuri de instruciuni.
7. Sintaxa de declarare a funciilor PHP.
8. La ce este recomandat reutilizarea codului?
9. Cum are loc controlul sesiunilor PHP?

10. Care este destinaia bibliotecilor GD, PDFlib?

Lucrare de laborator Nr. 7

Tema: Aplicaii RIA
Scopul lucrrii: familiarizarea cu tehnologiile RIA, studierea limbajelor Adobe Flex i SVG.
Tehnologiile RIA permit crearea de aplicatii Web complexe. Scopul este acela de a estompa
diferentele referitoare la interfete si timp de raspuns fata de aplicatiile desktop clasice.
7.1. Ajax
Tehnologia AJAX (Asynchronous JavaScript and XML) nu propune un limbaj nou ci un model
nou de abordare a implementarii aplicatiilor Web. Intr-adevar, nu se propune nici un limbaj
nou ci o modalitate noua de a combina tehnologiile existente.
Idea de baza pe care se sprijina Ajax este acea de a utiliza obiecte JavaScript de tip
XMLHttpRequest pentru a face apeluri asincrone catre serverul de Web. In acest fel se va
evita reincarcarea paginii Web ori de cate ori sunt necesare date de la server.
Aplicatiile Web care folosesc Ajax devin astfel mai mici, mai rapide si mai prietenoase.
Tehnologia Ajax este un standard actual, majoritatea navigatoarelor suportand
XMLHttpRequest (Internet Explorer, Firefox, Chrome, Opera, Safari). In continuare se va
prezenta o scurta functie care detecteaza tipul de browser si instantiaza obiectul XMLHttp in
mod corespunzator:
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest) {
// for IE7+, Firefox, Opera, Safari
xmlhttp=new XMLHttpRequest();

}
else if (window.ActiveXObject)
{
// for IE6, IE5
xmlhttp=new ActiveXObject
("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not
support XMLHTTP!");
}
}
Proprietatile obiectului XMLHttpRequest sunt:
- onreadystatechange Permite implemenatrea unei functii care sa prelucreaze datele primite
de la server. Aceasta functie va fi apelata automat de catre browser in momentul cand apar
evenimente asociate unei cereri XMLHttp. Pentru crearea acestei functii poate fi utilizat
codul:
xmlhttp.onreadystatechange=function()
{
// prelucrarea datelor de la server
}
- readyState Aceasta proprietate pastreaza codul starii in care se afla raspunsul la ultima
cerere efectuata. Valorile posibile sunt:
0 Cererea nu a fost initializata
1 Cererea este pregatita
2 Cererea a fost trimisa
3 Cererea este in procesare
4 Cererea este completa
La fiecare modificare a valorii variabilei readyState browserul va executa automat functia
asociata proprietatii onreadystatechange. Aceasta va testa incheierea cererii si apoi va
prelucra datele primite:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
// Prelucreaza datele primite
}
}
- responseText/responseXML Permite accesarea datelor din raspunsul serverului. Acestea
sunt de obicei impachetate in format text sau XML.
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.afisaj.value =
xmlhttp.responseText;
}
}
Pentru a trimite cererea catre server, programul va apela functiile open() si send() ale
obiectului XMLHttpRequest. Functia open() primeste trei parametrii. Primul specifica

metoda de transmitere a datelor (GET sau POST), cel de al doilea specfica care pagina de pe
server (PHP, ASP etc.) va prelucra cererea, iar ultimul parametru trebuie sa fie true pentru
apeluri asincrone. In cazul functiei send, parametrul va fi null in cazul apelurilor GET la
pagini din acelasi director de pe server.
Pentru a modifica o portiune a paginii curente, aceasta portiune poate fi inclusa intr-un
tag<div>. Exemplu:
// fisierul ajax1.html
<html>
<head>
<title>Exemplu Ajax </title>
<script type="text/javascript">
function ajax()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox ...
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject
("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4) {
document.getElementById
('panou').innerHTML=
xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxRepl.php",
true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<div id='panou'>
<h2>Text HTML</h2><br>
Textul este continut in fisierul HTML.
</div>
<form name="f1">
<input type="button" name="Schimba" value="Schimba" onClick="ajax();">
</form>
</body>
</html>

// fisierul ajaxRepl.php
<?php
echo '<h2>Text PHP</h2><br>Text
generat din PHP';
?>
Pentru mai multe informatii consultati tutoriale Ajax la w3Schools, ajaxtutorials si tizag.
Pentru a crea aplicatii complexe se poate apela si la biblioteci ajax cum ar fi Google
code, jQuerysau Dojo.
7.2. Adobe Flex
Adobe Flex a fost creat de Adobe Systems si este destinat crearii de aplicatii interactive RIA. El
imbina formatul MXML (Macromedia XML) cu limbajul de tip script Actionscript.
Rezultatul final este un fisier Flash (SWF) care cuprinde elemente de interfata interactive.
Framework-ul Flash este oferit de Adobe in regim open source. Pentru dezvoltarea eficienta
a aplicatiilor se poate utiliza Adobe Flex Builder, oferit in regim comercial.
Pentru utilizare in domeniul educatiei firma Adobe ofera licente gratuite de Adobe Flex
Builder Professional.
Avantajul tehnologiei Flex consta si in posibilitatea de a rula aplicatiile atat intr-un navigator
Web cat si ca aplicatii desktop (prin intermediul Adobe AIR).
Un exemplu de utilizare a tehnologiei Flex poate fi vizualizata la urmatoarea adresa Web
- Design-Contact-Form-Flex.
7. 3. SVG
SVG (Scalable Vector Graphics) este un limbaj de tip XML care permite definirea imaginilor
vectoriale pentru Web. Avantajul unui format vectorial in fata unui format bitmap (gif, jpg,
png) consta in posibilitatea de a o apropria/departa sau redimensiona fara a pierde calitatea.
De asemenea formatul SVG permite animarea oricarui atribut utilizat la definirea imaginii. In
plus fisierul care descrie o imagine este mai mic decat fisierul echivalent bitmap, este editabil
si cu editoare de text obisnuite si poate fi tiparit la orice rezolutie de imprimare cu
rezultate asemanatoare.
O serie de companii precum Sun Microsystems, Adobe, Apple, IBM si
Kodak au fost implicate activ in dezvoltarea acestui standard.
Acest standard W3C este suportat la ora actuala de multe navigatoare. In plus se poate utiliza
un plug-in de la Adobe (Adobe SVG Viewer) pentru navigatoarele care nu suporta direct
standardul (ex. Internet Explorer).
Exemplu de imagine SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns= "http://
www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40"
stroke="black" stroke-width="2"
fill="red"/>

</svg>
In plus se poate iclude o imagine SVG intr-un fisier HTML cu ajutorul tagului iframe:
<iframe src="rect.svg" width="300" height="100">
</iframe>

o
o
o
o
o
o
o

Principalele taguri definite de SVG pentru forme grafice sunt:

Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>

o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o

In plus exista o serie de taguri pentru a defini diverse efecte:

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
Sarcina: realizarea unei aplicaii web multimedia utiliznd noiunile limbajelor Adobe Flex i
SVG.

ntrebri de control:
1. Ce reprezint tehnologia AJAX, descifrare?
2. Care sunt proprietile obiectului XMLHttpRequest?
3. Exemple de funcii ale obiectului XMLHttpRequest.
4. Care este destinaia limbajului Adobe Flex? Numii avantajul tehnologiei Flex.

5. Descifrarea limbajului SVG. Care este destinaia i avantajul?

6. Care este modalitatea de includere a unei imagini SVG ntr-un fiier HTML?
7. Numii tagurile definite de SVG pentru forme grafice, diverse efecte.