Sabin Corneliu Buraga

T e hnolog ii We b

MATRIXROM
2001

Tehnologii Web - ISBN 973-685-280-6

Tehnologii Web

O.

Preambul

A.

Specificarea !i organizarea informa"iilor pe Web

i
1.

ncercare de definire !i istoric

2.

Metodologii

3.

Localizarea resurselor Internet

4.

Protocolul de transfer al hipertextului: HTTP

5.

Securitatea serviciilor Web

A- 1
A- 2
A- 7
A - 24
A - 27
A - 36

B.

Marcarea informa"iilor pentru Web

1.

SGML - Standard Generalized Markup Language

2.

XML - eXtensible Markup Language

B- 1
B- 2

C.

B - 18

Aplica"ii ale XML

C- 1
1.

MathML - limbaj de specificare a expresiilor matematice

2.

RDF - cadru de descriere a resurselor Internet

3.

XUL - limbaj de descriere a interfe"elor cu utilizatorul

C- 2
C - 10

D.

Limbajul HTML (HyperText Markup Language)

C - 27
D- 1

1.

Prezentare a limbajului HTML

2.

HTML Compact

3.

Reformularea HTML n XML

4.

Foi de stiluri

D- 2
D - 20
D - 24
D - 31

E.

Document Object Model (DOM) pentru documente XML/HTML

E- 1

1.

Introducere !i caracterizare

2.

Interfe"e !i implement#ri

3.

DOM Core - nivelul $

4.

DOM nivelul $ pentru HTML

5.

DOM nivelul 2

6.

Procesarea documentelor XML

7.

Concluzii

E- 2
E- 4
E- 5
E - 12
E - 14
E - 20
E - 48
F.

Documente hipermedia pe Web

F- 1

1.

Modele !i metodologii

2.

SMIL - un limbaj pentru prezent#ri multimedia sincronizate pe Web

3.

Extensii multimedia bazate pe timp pentru HTML (HTML+TIME)

F- 2
F - 12
F - 27

II

Tehnologii Web

4.

Efecte multimedia n Internet Explorer 5.5

F - 29

G.

Programarea aplica"iilor Web

1.

CGI (Common Gateway Interface)

2.

PHP (PHP: Hypertext Preprocessor)

3.

ASP (Active Server Pages)

4.

Cookie-uri

5.

Concluzii

G- 1
G- 3
G - 21
G - 54
G - 73
G - 83

H.

JavaScript n paginile Web

H- 1

1.

Istoric !i fundamente

2.

Caracterizare

3.

JavaScript n cadrul paginilor Web

4.

Concluzii

H- 2
H- 5
H - 15
I.

H - 53

Applet-uri !i servlet-uri Java

I- 1
1.

Istoric !i caracterizare

2.

Applet-uri

3.

Scurt# prezentare a servlet-urilor

4.

Dezvoltarea aplica"iilor Java

5.

Prezent !i viitor

I- 2
I- 8
I - 36
I - 41

J.

I - 42

Ingineria Web

J- 1
1.

Proiectarea !i organizarea site-urilor Web

2.

Robo"ii Web

3.

Motoarele de c#utare

4.

WebBroker: comunica"ii orientate-obiect pe Web

J- 2
J - 11
J - 21
J - 37

K.

Realitatea virtual#
K- 1

1.

Introducere n VRML

2.

Func"ionarea unui sistem VRML

3.

Medii virtuale distribuite

4.

Conceperea de aplica"ii VRML

K- 3
K - 48
K - 52
Studiu de caz: o aplica"ie VRML pentru vizualizarea
5.
tridimensional# a interiorului unei cl#diri

K - 60
K - 63

6.

Viitor
K - 67

III

Tehnologii Web

L.

Anexe
L- 1
1.

Sintaxa complet# URL

2.

Elementele HTML 4

3.

Atributele HTML 4

4.

Entit#"ile HTML

5.

Propriet#"ile CSS2

6.

Aplica"ii !i unelte de dezvoltare XML

7.

Nodurile VRML97

L- 2
L- 5
L- 8
L - 18
L - 21
L - 28

M.

Glosar de termeni

N.

Resurse bibliografice

O.

Cuprins

L - 35
M- 1
N- 1
I

IV

Tehnologii Web

"n fiecare zi se nva"# ceva nou."

(Solon)

Tehnologii Web

Indubitabil, tehnologiile Web reprezint! "i vor reprezenta cel mai dinamic "i fascinant
domeniu al informaticii actuale "i viitoare. Evident, ele au fost cele care n mai pu#in de un
deceniu au modificat complet globul p!mntesc "i mentalit!#ile.
Scopul acestei c!r#i este s! surprind!, ntr-un instantaneu suficient de detaliat evolu#ia
plin! de neprev!zut "i de vivacitate a spa#iului World-Wide Web. Astfel, vom ilustra, la un
nivel profesionist, cele mai interesante, utile "i vii aspecte ale Web-ului, att din punct de
vedere teoretic, dar mai cu seam! aplicativ, axndu-ne n principal pe una dintre
direc#iile cele mai efervescente ale acestuia: meta-limbajul XML. O mare parte a variantelor
preliminare ale acestui material a reprezentat suportul pentru cursul de "Tehnologii avansate n
informatic!" ("Tehnologii Web") predat de autor studen#ilor de la Facultatea de Informatic#,
Universitatea "Alexandru Ioan Cuza" din Ia!i, ncepnd cu anul universitar
1999/2000, pe baza unei experien#e de peste patru ani n domeniul Internetului "i
al Web-ului.
Structur# general#
Am structurat cartea n 11 p!r#i "i 7 anexe, urmate de o list! cuprinz!toare de referin#e
bibliografice.
Dup! un scurt istoric, n prima parte putem urm!ri dou! dintre filosofiile de baz! ale
Web-ului: hipertextul "i modelul client/server de transfer al informa#iilor prin intermediul
protocolului HTTP, al!turi de localizarea resurselor prin intermediul URI-urilor.
Partea secund! realizeaz! o introspec#ie detaliat! n mecanismele meta-limbajului SGML "i
ale familiei XML (reprezentat! de spa"ii de nume, XLink, XSL, XML Schema etc.), utilizate
pentru marcarea informa#iilor, n special pentru WWW. Meta-limbajul XML a devenit n
ultimii ani favoritul cercet!torilor n domeniul Web-ului, avnd deja asigurat un viitor
str!lucit n direc#ia reprezent!rii "i model!rii semantice a informa#iilor. XML are deja o
multitudine de aplica#ii, existnd peste o sut! de limbaje bazate pe acesta. n partea a treia
se vor prezenta MathML, RDF "i XUL. Normal, Web-ul a avut o dezvoltare exponen#ial!
datorit! limbajului HTML, major! aplica#ie a SGML-ului. O trecere n revist! a
caracteristicilor HTML-ului, plus o prezentare a rescrierii HTML n termenii XML "i o
detaliere a foilor de stiluri CSS vom face n partea a patra. Pentru a procesa ntr-un mod
eficient, elegant "i independent de platform! documentele XML "i HTML vom avea nevoie
de un model obiectual, reprezentat de DOM, pe care l vom descrie n partea a cincea a
c!r#ii, al!turi de alternativele SAX "i JDOM. Un alt limbaj bazat pe XML este SMIL, care
va avea cu siguran#! multe de spus n domeniul prezent!rilor multimedia sincronizate pe
Web. Despre el "i despre solu#iile de a integra hipermedia n paginile HTML vom discuta n
cea de-a "asea parte a acestui material. Desigur, pentru a asigura "i exploata interactivitatea
spa#iului WWW trebuie s! proiect!m "i s! implement!m aplica#ii destinate Web-ului.
n partea a "aptea vom detalia mai multe modalit!#i de concepere a acestor aplica#ii, pe
partea server: standardul CGI, serverele de aplica#ii PHP "i ASP, cookie-urile. Pe partea client,
JavaScript reprezint! standardul de facto. Cititorul va putea parcurge cele mai interesante "i
dinamice aspecte ale acestuia n cea de-a opta parte. O rud! mai serioas! a JavaScript-ului
este tn!rul limbaj Java. Cum vom putea programa applet-uri "i servlet-uri Java vom vedea n
a noua parte a volumului. Web-ul se consider! a fi un adev!rat depozit gigantic de
informa#ii, compus din milioane de documente. Cum l organiz!m, att local, ct "i global,
care este arhitectura robo"ilor "i a motoarelor de c!utare, cum proiect!m site-urile, vom descrie n
partea a zecea. Una dintre cele mai de viitor direc#ii ale spa#iului WWW o reprezint!
realitatea virtual!. Dup! o ilustrare a principalelor elemente "i tendin#e ale limbajului VRML,
vom prezenta mediile virtuale distribuite. Pe toate acestea, cititorul le va putea reg!si n ultima
parte a c!r#ii.

ii

Tehnologii Web

Punem la dispozi#ie celor interesa#i o serie de anexe, descriind printre altele sintaxa
general! a URL-urilor, elementele "i atributele HTML, propriet!#ile CSS nivelul 2
"i nodurile VRML, plus un glosar de termeni referitori la tehnologiile Web.
L!s!m pl!cerea cititorului s! descopere "i alte surprize, sper!m pl!cute, "i s!
experimenteze sursele din prezentul volum. A"tept!m reac#iile, remarcile "i semnalarea
posibilelor gre"eli survenite pe parcurs la adresa busaco@infoiasi.ro. De asemeni,
actualiz!ri "i alte am!nunte privind acest material se vor putea g!si pe Web, n cadrul paginii
personale a autorului: http://www.infoiasi.ro/~busaco.
Cum a fost scris acest material
nainte de a fi preg!tit pentru tip!rire, textul prezentei c!r#i a fost integral tehnoredactat
de c!tre autor, conform standardului HTML 4, utilizndu-se foi de stiluri CSS1 "i CSS2,
fiind testat pe navigatoarele Netscape Communicator 4.1, 4.6, 4.7x "i 6.0 (pentru Linux "i
Windows), Mozilla 5.0/M16 (pentru Windows), M17 (pentru Linux) "i M18 - SeaMonkey
(pentru Linux "i Windows), Internet Explorer 4.0, 5.0 "i 5.5, Lynx 2.8.3 (pentru Linux),
Amaya 3.1 "i 4.0 (pentru Windows) "i Opera 4.0 "i 5.0 (pentru Windows "i Linux), pe
sistemele de operare Linux RedHat 6.2, Linux RedHat 7.0, Windows 95, Windows 98, Windows
NT 4.0 Server "i Windows Me. Fi"ierele HTML au fost post-procesate "i verificate folosind
aplica#ia HTML Tidy (pentru Linux). Documentele SMIL prezentate n lucrare au fost
validate "i vizualizate cu GRiNS 1.0 "i 1.5 (pentru Windows). Exemplele HTML+TIME 2.0
au fost rulate sub Internet Explorer 5.5. Pentru testarea lumilor VRML s-a folosit
vizualizatorul World View 2.0.
Script-urile CGI au fost concepute n limbajele C - standardul ANSI (folosindu-se
compilatorul EGCS 1.1.2), Bourne Again Shell (bash 1.14.7) "i Perl (prin utilizarea
interpretorului Perl 5.0), fiind executate sub Linux RedHat. Programele PHP s-au testat pe
serverul Apache 1.3.12 cu interpretorul PHP 3.0.15 "i 4.0.2 sub Linux. Script-urile JavaScript
au fost rulate pe navigatoarele precizate mai sus.
Applet-urile "i aplica#iile Java prezentate au fost testate "i executate sub mediul de
dezvoltare Java 2 SDK Standard Edition 1.3 pentru Windows.
Acolo unde nu se precizeaz! alt autor, exemplele de cod surs!, ilustra#iile "i figurile sunt
concepute de Sabin Corneliu Buraga. Nu ne facem r!spunz!tori pentru acurate#ea
con#inutului aflat la adresele Web furnizate pe parcursul acestei c!r#i sau n cadrul
referin#elor bibliografice.
Mul"umiri
Dorim s! transmitem graditudinea noastr! tuturor colegilor, colaboratorilor "i
prietenilor, f!r! suportul c!rora aceast! carte n-ar fi reu"it s! prind! forma actual!. Suntem
profund recunosc!tori profesorilor no"tri prof.dr. Toader Jucan, prof.dr. Dumitru
Todoroi, conf.dr. Gabriel Ciobanu, conf.dr. Dan Cristea, conf.dr. Dorel Lucanu "i
lect. Valentin Clocotici.
Mul#umim pentru sprijinul venit din partea domnului Mircea Srbu de la revista
NET Report care a f!cut posibil! publicarea unor articole referitoare la tehnologiile Web
actuale, c!r!mizi pe baza c!rora s-a construit edificiul prezentului material.
Prezentul volum cuprinde un num!r minim (sper!m nul) de gre"eli "i datorit! atentelor
remarci venite din partea lect.dr. %tefan Andrei, ing. Drago! Acost#chioaie,
cercet. Octavian Buzatu "i studen#ilor C#t#lin Mitrofan "i Iulian V#ideanu.
iii

Tehnologii Web

De asemeni, suntem recunosc!tori domni"oarelor asist. Liliana Ib#nescu, absolventei

Corina Apachi"e "i studentei Anca Avram pentru sprijinul bibliografic acordat "i
studen#ilor care au des!vr"it tehnoredactarea ntregului text conform normelor n vigoare
ale limbii romne "i ne-au ajutat la cristalizarea structurii acestui text.
Mul#umiri speciale familiei, mai ales p!rin#ilor no"tri, pentru suportul "i n#elegerea
manifestate de-a lungul anilor.
Ia"i, martie 2001

iv

Tehnologii Web

"Tehnica reprezint# fantezia realit#"ii."

(Lucian Blaga)

Tehnologii Web

1. ncercare de definire i istoric

1.1 World Wide Web
R!d!cinile spa#iului World Wide Web se reg!sesc n nceputurile Internetului, cu peste
25 de ani n urm!. n 1969 apare prima re#ea cu comutare de pachete, denumit! ARPAnet
(Advanced Research Projects Agency network), fondat! de Pentagon, punctul de start al re#elei
Internet actuale.
n anul 1980, NSF (National Science Foundation) reproiecteaz! modelul ARPAnet,
transformndu-l ntr-o re#ea modern!, arhitectura primind numele de Internet,
interconectnd la nceput super-calculatoare guvernamentale, institu#ii academice "i centre
de cercetare "i utiliznd o suit! standard de protocoale de comunica#ie reprezentat! de
TCP/IP (Transmission Control Protocol/Internet Protocol). n anii care urmeaz!, Internetul
se dezvolt! spectaculos, ntr-o manier! exponen#ial!.
Serviciile tradi#ionale ale Internetului se rezumau n anii '80 la po"ta electronic! (e-mail),
accesul la grupuri de "tiri (usenet), conectare la distan#! (telnet) "i transfer de fi"iere (FTP).
n 1990-1991 apar dou! noi servicii: Archie utilizat pentru c!utarea fi"ierelor pe Internet "i
Gopher, structur! de meniuri ierarhizate facilitnd organizarea documentelor pe Internet.
Unul dintre cele mai importante "i de succes servicii ale Internetului,
World Wide Web-ul - sau, mai pe scurt, Web ori spa#iul WWW - a fost creat la CERN
(Centrul European de Cercet!ri Nucleare de la Geneva) n anul 1989 de c!tre fizicienii
Tim Berners-Lee, Robert Caillau "i echipa lor, cu scopul de a avea acces mai u"or la informa#iile
tehnice ale manualelor de utilizare a calculatoarelor. Data de 12 noiembrie 1990
se consider! a fi ziua de na"tere oficial! a Web-ului. Primul client grafic permi#nd
vizualizarea de documente WWW a fost WorldWideWeb. Dezvoltarea ulterioar! a sistemului
a fost facilitat! de programul Mosaic (de la NCSA - Centrul Na#ional pentru aplica#iile
supercalculatoarelor, Universitatea Urbana-Champaign), rulnd sub mediul X Window.
Acest navigator era foarte simplu de folosit "i poseda facilit!#i multimedia, fiind furnizat
gratuit pe Internet ncepnd din 1993.
Web-ul reprezint! un sistem de distribu"ie local! sau global! a informa"iilor hipermedia. Din punct
de vedere tehnic, spa#iul Web pune la dispozi#ie un sistem global "i standardizat de
comunicare multimedia, informa#iile fiind organizate asociativ "i fiind distribuite n func#ie
de cererile utilizatorilor, func#ionnd conform modelului client-server. Web-ul, cu toat!
dezvoltarea lui spectaculoas!, nu trebuie confundat cu Internetul, ci poate fi v!zut drept cea
mai dinamic! "i "minunat!" component! software a acestuia, neputnd exista f!r!
infrastructura hardware a re#elelor mondiale interconectate.
Cre"terea masiv! a num!rului de servicii "i produse Web este dat! de utilizarea unui tot
mai bogat con#inut informa#ional: imagini, video "i sunet.
Combinarea "i integrarea acestor medii formeaz! multimedia, utilizat! pe scara larg! n
reprezentarea "i interschimbarea informa#iilor. Diverse obiecte/documente multimedia
incluznd hiperleg!turi definesc conceptul de hipermedia. Nu exist! ns! o defini#ie
universal acceptat! a multimediei. Putem privi multimedia drept surs! a activita#ilor de
design, stocare, interogare "i utilizare a documentelor electronice compuse din "medii"
multiple ca video, audio, anima#ie, text, grafic! "i imagine. n general, o aplica#ie este

A-2

Tehnologii Web

considerat! a fi multimedia, dac! ea con#ine m!car o media continu! (video, de pild!) "i una
discret! (cum ar fi textul).
Pentru a n#elege no#iunea de hipermedia, trebuie s! n#elegem ce nseamn! hipertextul.
n anul 1965, Ted Nelson inventeaz! termenul hipertext (text non-linear), definindu-l drept
"material scris sau grafic interconectat ntr-o manier! complex! care n mod conven#ional
nu poate fi reprezentat pe hrtie. El poate con#ine cuprinsuri ale propriului s!u con#inut "i
rela#iile dintre diverse p!r#i componente; poate de asemeni con#ine adnot!ri, ad!ugiri "i
note de subsol pentru cei care doresc s!-l examineze".
Defini#iile hipertextului sunt diverse. De exemplu, iat! dou! dintre ele.
Conform cu J.Smith "i S.Weiss, hipertextul reprezint!:
1.

o form! de document electronic;

2. o metod! de organizare a informa#iilor n care datele sunt memorate ntr-o

re#ea de noduri "i leg!turi, putnd fi accesat! prin intermediul navigatoarelor
interactive "i manipulat! de un editor structural.
n viziunea lui W.Weiland "i B.Shneiderman, hipertextul denot! o tehnic! pentru
organizarea informa#iei textuale printr-o metod! complex! neliniar! n vederea facilit!rii
explor!rii rapide a unei cantit!#i mari de cuno"tin#e. Conceptual, o baz! de date hipertext
poate fi gndit! ca un digraf, unde fiecare nod poart! un fragment de text "i unde arcele
grafului conecteaz! unele fragmente de text cu altele nrudite. Pentru a vizualiza textul
dintr-o astfel de baz! de date, utilizatorul se va folosi de o interfa#!, traversnd leg!turile.
Ideea de a reprezenta printr-o modalitate nelinear! mai multe tipuri de medii este ns!
mult mai veche. nceputurile hipertextului "i multimediei apar ntr-un articol publicat n
iulie 1945 n Atlantic Monthly: "As We May Think", autorul lui fiind Vannebar Bush,
profesor la MIT "i la Institutul Carnegie din Washington. El descrie o ma"in! menit! a ajuta
omul n cadrul procesului de memorare, pe baza asocia#iilor ntre con#inut "i form!, aceast!
ma"in! numind-o MEMEX (MEMory EXtended). MEMEX se baza par#ial pe tehnologia
microfilmelor, fiind prev!zut! cu dispozitive de selec#ie foto-optic! "i tastaturi, "dispozitiv
ce poate stoca toate c!r#ile, nregistr!rile "i comunica#iile "i care este mecanizat n a"a fel
nct consultarea informa#iilor se realizeaz! flexibil "i rapid". (Bush, 1945)
O alt! personalitate implicat! n dezvolt!rile de nceput ale multimediei este
Douglas Engelbart, membru al Institutului de Cercetare de la Stanford unde dezvolt!
revolu#ionarul proiect Augment. Acest proiect deschide o direc#ie important! de cercetare
odat! cu prezentarea lui la Fall Joint Computer Conference n 1968.
n anul 1963, Engelbart propune dispozitive computerizate de scriere automat! cu un
deceniu nainte de apari#ia primelor procesoare de texte evoluate.
n cadrul prezent!rii din 1968, prima demonstra#ie public! a unor facilit!#i de baz!
standard ale actualelor programe de tehnoredactare, interfe#e grafice, aplica#ii hipertext "i
multimedia, Engelbart ilustreaz! urm!toarele idei inovative "i inven#ii: mouse, ferestre
multiple pe ecranul computerului, facilit!#i de procesare de texte "i hipertexte, po"ta
electronic!, teleconferin#e, documente compuse din text "i grafic!, limbaje de comand! de
tip script, interfa#a grafic!.
A treia figur! important! n istoria multimediei este Ted Nelson, inventatorul termenului
de hipermedia "i a unui sistem hipermedia: Xanadu ("locul magic al memoriei literare"
dup! cum l descrie poetul Samuel Taylor Coleridge n poemul "Kubla Kahn: Or, A Vision
in a Dream", scris n anul 1798). Ideea de baz! a proiectului Xanadu era aceea de a concepe

A-3

Tehnologii Web

un sistem care s! con#in! ntreaga literatur! universal!, plus alte informa#ii, ntr-un singur
depozit de date.
Prototipul lui Xanadu exist! ntr-o versiune dezvoltat! de Autodesk (niciodat! f!cut!
public!, n ciuda numeroaselor anun#uri a unor variante de test) "i n 1991 permitea:

stocarea digital! a informa#iilor de tip text, grafic!, video etc.;

leg!turi flexibile ntre documente (la nivel de caracter, cuvnt, fragment

de imagine etc.);

ata"area de senzori activi p!r#ilor de documente;

controlul versiunilor "i compararea lor;

accesul concurent "i sigur al mai multor utilizatori.

Desigur, n prezent, Xanadu a fost dep!"it de ceea ce nseamn! Web-ul, dar multe dintre
ideile de pionerat ale lui Nelson se reg!sesc n cadrul WWW "i a altor sisteme hipermedia
actuale.
n cadrul Laboratorului Media de la MIT, ncepnd cu anii '70, s-au dezvoltat o serie de
sisteme multimedia clasice, surse de inspira#ie pentru aplica#iile actuale. Dintre acestea se
pot men#iona: Spa#ial Data Management System, Aspen Movie Map, Project Athena, care
definesc "i o parte dintre domeniile de interes ale hipermediei: simul!ri interactive,
colabor!ri "tiin#ifice la distan#!, nv!#!mnt.
Ast!zi se estimeaz! c! num!rul serverelor WWW a dep!"it un milion. n ultimii
trei-patru ani, Web-ul s-a dezvoltat exploziv "i a dobndit un nou aspect, devenind
domeniu public "i extinzndu-se foarte mult n lumea afacerilor. Astfel, Web-ul poate fi
considerat segmentul Internet cu cea mai rapid! dezvoltare: dac! Internetul se dubleaz! la
fiecare 100 de zile, spa#iul WWW num!r! deja peste un miliard de pagini.
Istoricul WWW-ului decurge n paralel cu istoricul HTML-ului, limbaj de marcare a
documentelor hipermedia disponibile pe Web pe care l vom prezenta n unul dintre
capitolele urm!toare.

1.2 Scurt istoric al HTML

Ca descendent al SGML-ului, limbajul HTML are o istorie care debuteaz! cu publicarea
n 1986 de c!tre Organiza#ia interna#ional! pentru standardizare (ISO) a unui articol
intitulat "Information Processing - Text and Office Systems - Standard Generalized Markup Language
(SGML)". Dup! trei ani, Tim Berners-Lee de la CERN nainteaz! o propunere - proiect care a
circulat sub numele de "HyperText and CERN" - de sistem de documente hipertext,
denumit n octombrie 1990 World-Wide Web.
Tim Berners-Lee identific! un numar de considerente practice pentru sistemul propus
care trebuia s! ofere:

accesul la distan#! ntr-o re#ea, acceptndu-se diverse tipuri de conexiuni;

accesul la o multitudine de surse de informa#ii stocate ntr-o varietate de

forme (text, grafic!, sunet etc.) cu ajutorul unor tipuri diferite de sisteme de operare
situate pe diferite platforme hardware;

capabilit!#i de extindere "i dezvoltare n ceea ce prive"te aria de acoperire

prin cre"terea num!rului de leg!turi, f!r! existen#a unui control central.

A-4

Tehnologii Web

Tim Berners-Lee scrie de asemeni prima aplica#ie Web, un pachet de server Web rulnd
pe calculatoare NeXT. n noiembrie 1990, Nicola Pellow ncepe s! conceap! un navigator
(browser) text care la sfr"itul aceluia"i an era disponibil n cadrul CERN.
n mai 1991, CERN prezint! WWW la seminarul anual "i browserele n mod linie pentru
platforme ca VAX, RS6000 "i SUN sunt disponibile pe grupurile de "tiri
alt.hypertext, comp.sys.net, comp.text.sgml "i comp.mail.multi-media
(august 1991).
Dan Connolly se al!tur! proiectului Web, iar experien#a sa n utilitare de documentare online "i sisteme formale l ajut! s! dezvolte specifica#ia pentru HTML. Pe data de 15 ianuarie
1992 apare pentru prima dat!, disponibil prin FTP anonim, un browser text conceput de
CERN, interpretnd noul limbaj HTML, prezentat "i la AIHEP'92 - La Londe.
Proiectului Web i se al!tur! Jean-Francois Groff "i Carl Barker.
n 1993, navigatorul grafic, numit Mosaic, rulnd sub X Window este proiectat de Marc
Andreesen "i f!cut public de NCSA (luna februarie). Mosaic reprezint! primul browser grafic
care utilizeaz! standardul HTML. n aprilie 1993, dup! aproape un an "i jum!tate de la
introducerea Web-ului, existau deja 60 de servere WWW.
Urmeaz! ulterior prezentarea standardului HTML 2.0 (IETF RFC 1866) care include
abilit!#i de afi"are mai precis! a imaginilor, utilizarea de formulare, tabele, tipuri de leg!turi
etc. HTML 2.0 permite dezvoltarea masiv! a Web-ului "i toate browserele WWW moderne
l suport! f!r! restric#ii. n fapt, standardul HTML 2.0 doar pune n ordine anumite facilit!#i
practice ap!rute ncepnd cu anul 1994. Netscape extinde o parte dintre specifica#iile
HTML 2.0 n 1996 ad!ugnd o serie de tag-uri utile n versiunea, foarte popular!,
Netscape Navigator 2.0.
HTML+ se dorea a fi o ncercare de a extinde HTML-ul, prima dat! publicat! de
Dave Raggett n 1993 "i prezentat! la prima conferin#! Web n 1994.
O extensie a HTML+ a fost HTML 3.0 care nu a fost niciodat! standardizat!. Ea a fost
propus! de tn!rul pe atunci Consor"iu Web (W3C), format n 1994 de c!tre CERN "i MIT
cu scopul de a alc!tui un standard viabil al limbajului HTML "i de a ghida conceperea
de pagini Web. Acest consor#iu este cel care propune, certific! "i urm!re"te ntreaga
dezvoltare a spa#iului WWW, n prezent avnd n componen#! institu#ii academice de
renume, companii importante "i persoane implicate n organizarea Web-ului.
n luna iulie 1996, Consor#iul Web anun#! oficial standardul HTML 3.2 adaugnd
specifica#ii pentru tabele, imagini, applet-uri, perfect compatibil cu HTML 2.0.
n ianuarie 1997, standardul a fost aprobat "i toate navigatoarele l suport!.
Proiectan#ii de navigatoare (ca Netscape "i, mai nou, Microsoft) au implementat diferite
facilit!#i care nu apar definite de nici un standard HTML. De exemplu, Netscape Navigator
3.0 oferea la data lans!rii posibilit!#i de ad!ugare de elemente multimedia direct n paginile
Web, fundaluri reprezentate de imagini, cadre (frames) etc. care nu ap!ruser! nc! n
specifica#iile HTML, plus suport pentru script-uri JavaScript interpretate direct de c!tre
client.
Urm!toarea versiune a HTML-ului dezvoltat! de Consor#iul Web, denumit! Cougar,
este standardul HTML 4.0, ap!rut n anul 1997, care ofer! suport pentru accesibilitatea
paginilor Web din partea persoanelor cu handicap, foi de stiluri interne, suport lingvistic "i
pentru formule matematice, evenimente etc. Dup! cum stipuleaz! inventatorul Web-ului "i
directorul W3C, Tim Berners-Lee:
"Cu HTML 4.0, orice aplica#ie Web va fi independent! de navigator."
A-5

Tehnologii Web

HTML 4.0 este disponibil n trei variante:

HTML 4.0 Strict

HTML 4.0 Transitional

HTML 4.0 Frameset

Versiunile actuale ale celor mai cunoscute navigatoare (Netscape Communicator, Internet
Explorer "i Opera) suport! standardul HTML 4.
Pentru a asigura fiabilitatea "i corectitudinea comunica#iilor pe WWW, Consor#iul Web
a introdus HTML Validation Service (aflat la adresa http://validator.w3.org/) care
verific! dac! un anumit document se conformeaz! standardului HTML 4.0.
Tim Berners-Lee declar! c! HTML 4.0 n-a fost conceput pentru navigatoare, ci pentru
aplica#ii viitoare "i produse Web.
Ultima direc#ie de standardizare a Consor#iului WWW este cea a rescrierii HTML-ului
n termenii meta-limbajului extensibil XML, pentru a cre"te flexibilitatea "i a oferi
proiectan#ilor de aplica#ii Web o mai mare adaptabilitate. Astfel, HTML 4.0 este urmat de
XHTML $.0, standardizat relativ recent, n luna ianuarie 2000.

A-6

Tehnologii Web

2. Metodologii
2.1 Hipertextul
Conceptul esen#ial prezent n cadrul hipertextului este cel al leg!turilor (care apar n
cadrul aceluia"i document "i/sau ntre documente diferite). Aceast! caracteristic! de legare
permite organizarea non-linear! a informa#iilor.
O parte dintre avantajele hipertextului fa#! de textul tip!rit sunt:

forma neliniar! a hipertextului ofer! capabilit!#i eficiente de parcurgere

a con#inutului;

mediile electronice pot stoca o cantitate impresionant! de informa#ii;

hipertextul ofer! o mai bun! vizualizare a con#inutului "i o navigare rapid!,

orict de complexe ar fi documentele, #innd cont de specifica#iile utilizatorilor;

n cadrul sistemelor hipertext, interog!rile, filtr!rile, diversele preferin#e

"i adnot!rile utilizatorilor pot fi refolosite ori de cte ori este necesar, putnd fi
stocate n cadrul structurii hipertext a documentelor folosite.

Principalele probleme cu care se confrunt! informaticienii n ceea ce prive"te hipertextul

sunt cele legate de:
conversie (n general automat!) a textului liniar n form! hipertext "i liniarizare
a hipertextului;

proiectare (design) a documentelor hipertext;

accesare concurent! a bazelor de date hipertext n context distribuit;

construire a unor mecanisme optime pentru c!utarea "i interogarea n manier!

inteligent! a informa#iilor hipertext;

suportare a extensiilor multimedia;

prezentare a documentelor hipertext ntr-o form! u"or de parcurs de c!tre

utilizatori etc.

2.2 Noduri i legturi

n principiu, un sistem hipermedia este constituit din noduri (concepte) "i leg#turi
(rela#ii). Un nod reprezint!, n mod uzual, un concept unic (o idee), putnd con#ine text,
grafic!, anima#ie, audio, video, imagini sau programe. Un nod poate avea asociat un tip
(detaliu, propozi#ie, colec#ie, observa#ie etc.) nglobnd o informa#ie semantic!. Nodurile
sunt conectate de alte noduri prin intermediul leg!turilor. Nodul surs! al unei leg!turi se
nume"te referin"!, iar cel destina#ie referent, fiind denumite "i ancore. Con#inutul unui nod se
afi"eaz! la activarea leg!turii.
Modalitatea de stocare a informa#iei n cadrul nodurilor variaz! de la sistem la sistem,
dar cele mai folosite tehnici utilizeaz! limbajele de marcare (SGML sau, mai nou, XML),

A-7

Tehnologii Web

standardele actuale construite pe baza acestor limbaje fiind HyTime (Hypermedia/Time-based

Structuring Language), MHEG (Multimedia and Hypermedia Information Coding Expert Group)
sau HTML (HyperText Markup Language). Avantajul major este asigurarea independen#ei de
platforma hardware "i software, formatele proprietare conducnd la greut!#i de navigare,
c!utare sau ntre#inere. Din moment ce nodurile pot con#ine informa#ii multimedia,
sistemele hipermedia trebuie s! fie suficient de flexibile pentru a suporta o multitudine de
formate grafice, audio "i video.

O structur# hipertext compus# din mai multe noduri

!i modul de vizualizare folosind un browser hipertext

Leg!turile sunt conexiuni ntre noduri (sau concepte) dependente unul de altul, putnd fi
bidirec"ionale sau doar unidirec"ionale. %i leg!turilor li se pot asocia tipuri
(leg!tura de specificare, de elaborare, leg!tura membru, leg!tura de opozi#ie etc.), definind
natura rela#iei dintre noduri. Dup! Conklin, leg!turile pot fi referen"iale (non-ierarhice, utile
pentru realizarea referin#elor ncruci"ate, ele fiind cele care deosebesc cel mai bine
hipermedia de celelalte forme de stocare a informa#iei) sau organiza"ionale (denumite
ierarhice sau structurale, ilustrnd rela#iile p!rinte-copil dintre noduri, folosite la organizarea
nodurilor n manier! ierarhic! ntr-o structur! strict!). Leg!turile organiza#ionale sunt
esen#iale pentru liniarizarea hipertextului "i permit autorilor s! verifice coeren#a structurii
hipertext.

Exemplu de structur# hipertext liniar# avnd leg#turi referen"iale !i leg#turi bidirec"ionale

De asemeni, leg!turile pot fi statice (stabilite de autorul documentului) sau dinamice

(create n momentul rul!rii sistemului hipertext, n func#ie de context sau de cerin#ele
utilizatorilor). Ele pot fi utilizate, de exemplu, pentru a ncorpora proceduri de securitate
(o leg!tur! poate fi disponibil! doar pentru un anumit utilizator) ori s! permit! utilizatorilor
s!-"i creeze leg!turi personale ntre diverse noduri care n mod uzual nu sunt conectate
direct. Sisteme ca Hyperwave, Microcosm sau Deja-vu ofer! suport pentru leg!turi
dinamice.
Activarea marcajelor unei leg!turi duce la vizualizarea (activarea) nodurilor.
Conceptele de mai sus "i au originile n istoria omenirii. Talmudul (utiliznd din plin
comentarii "i adnot!ri imbricate, colaterale), Ramayana "i Mahabharata sunt prototipuri

A-8

Tehnologii Web

antice ale reprezent!rii hipertextului. Un alt exemplu concludent este Biblia. Dic#ionarele "i
enciclopediile tip!rite pot fi considerate vechi forme de hipertext, fiind v!zute ca re#ele de
noduri-text unite de leg!turi-referin#e.

obiect hipertext
nod
structur!
nod-secven#ial
cale linear!
cale alternativ!
cale condi#ionat!
nod de explorare
con#inut
atomic
surs! intern!
surs! extern!
nod compus
leg!tur!
structur!
leg!tur! secven#ial!
leg!tur! de explorare
con#inut

Structura ierarhic# a conceptului de obiect hipertext

2.3 Conceperea documentelor hipertext

n#elegerea "i navigarea printr-un document de tip hipertext depind de abilitatea
utilizatorului de a construi o reprezentare mental! coerent! a structurii hipertextului,
r!mnnd n responsabilitatea creatorului documentului s! asigure aceast! coeren#!.
Construirea unui document hipertext coerent poate fi considerat! o problem! de design,
f!r! a exista ns! legi pentru conceperea de documente hipertext "corecte", de"i cercet!tori
precum Manfred Thuring, Usha Rao sau Jeff Conklin au stabilit o serie de reguli pentru aceasta.
n viziunea acestora, un document hipertext coerent const! din trei componente:
partea de con#inut, partea de organizare "i partea de prezentare a informa#iilor.

A-9

Tehnologii Web

Explorarea informa"iilor hipermedia con"inute de Encyclopaedia Britannica 2000

Partea de con"inut
Nodurile "i leg!turile pot fi considerate drept obiecte proiectate, pentru asigurarea
coeren#ei putndu-le fi asociate propriet!#i (semantici). Partea de con#inut stocheaz! obiecte
purt!toare de informa#ie, acestea fiind noduri con#inut care memoreaz! date "i leg!turi de
tip con#inut care conecteaz! nodurile con#inut pe baza unor rela#ii semantice.
Nodurile con#inut pot fi atomice sau pot fi compuse din alte noduri (m!rimea unui nod
este determinat! de autor). Preciznd natura semantic! a rela#iilor dintre noduri,
leg!turile sunt clasificate pe mai multe nivele dup! cum urmeaz!:

nivelul 1: leg!turile nu au asociate etichete;

nivelul 2: leg!turile posed! etichete descriind n#elesul global al rela#iei

dintre obiecte (i.e. "este ilustrat de" sau "este discutat de");

nivelul 3: leg!turile au etichete mai detaliate (precum "este vizualizat

grafic prin", "este criticat de").

Aceast! clasificare poate fi rafinat!, n sensul c! ierarhia nivelelor leg!turilor depinde de

starea actual! de cunoa"tere a autorului documentului.
Partea de organizare
Obiectele din cadrul acestei p!r#i m!resc coeren#a prin structurarea re#elei hipertext din
perspectiva cititorului acelui document. Autorul poate preg!ti diferite variante ale
documentului n func#ie de audien#a lor.

A - 10

Tehnologii Web

Nodurile de structur! organizeaz! nodurile con#inut "i leg!turile ntr-o manier! specific!,
fiecare nod de structur! avnd un nume "i un nod de start. Acestea pot fi de dou! tipuri:
1. noduri de secven#! care permit autorului s! defineasc! secven#a de citire a
con#inutului hipertextului (cititorul poate fi constrns s! urmeze secven#a de noduri
indicat! de autor);
2. noduri de explorare care ofer! utilizatorului posibilit!#i de explorare a
re#elei hipertext.
Leg!turile de structur! se pot clasifica astfel:
1. leg!turi de secven#! asociate con#inutului fiec!rui nod de secven#! care
posed! o secven#! de prezentare (se utilizeaz! pentru a defini ordinea de parcurgere:
liniar!, arborescent! etc.);
2.

leg!turi de explorare oferind acces la nodurile de explorare.

Nodurile de secven#! mpreun! cu leg!turile de secven#! pot oferi diverse secven#e de

prezentare a con#inutului hipertext (ca de exemplu c!i de vizitare secven#iale, arborescente
sau condi#ionale).
Partea de prezentare
Partea de prezentare are n vedere vizualizarea structurii "i con#inutului hipertextului "i
ofer! mecanisme de navigare. Autorii pot adopta diferite stiluri de prezentare
a informa#iilor:
a. textual - nu se ofer! o vizualizare grafic! a structurii, prezentarea fiind
limitat! la afi"area con#inutului unuia sau mai multor noduri;
b. grafic - exist! o vizualizare grafic! a structurii hipertext (e.g. harta leg!turilor
dintre noduri, arbore de navigare etc.);
c.

combinat - ofer! ambele posibilit!#i de prezentare.

2.4 Structuri hipermedia

Hiperdocumentele se structureaz! asemeni re#elelor (grafurilor), f!r! restric#ii n ceea ce
prive"te m!rimea nodurilor sau modul de realizare a leg!turilor dintre ele. Uneori o
structur! hipertext poate deveni extrem de mare "i atunci, de cele mai multe ori, se folosesc
leg!turi organiza#ionale pentru a putea fi parcurs! de utilizatori. Structura
hiperdocumentelor devine deosebit de important! din punctul de vedere al problemei
parcurgerii n ntregime a nodurilor "i a reg!sirii informa#iilor (utilizatorii se pot confrunta
cu a"a-numita "pierdere n spa#iu" - lost in space, atunci cnd nu mai "tiu unde se afl!
n cadrul structurii hipermedia).

A - 11

Tehnologii Web

Parcurgerea arborescent# a nodurilor hipertext n enciclopedia Encarta 2000

Exist! mai multe abord!ri pentru realizarea unei structuri hipermedia valide "i
u"or de parcurs.
Cea mai uzual! se bazeaz! pe metafora c!r"ii tip!rite, structura linear! putnd
acompania un alt tip de structur!, folosindu-se leg!turi organiza#ionale ntre
nodurile hiperdocumentelor. Alte leg!turi pot fi utilizate pentru a oferi ceea ce se
nume"te "capabilitatea non-liniar! controlat!" de a parcurge hipertextul
(leg!turi c!tre cuprins, referin#e, note de subsol, glosar de termeni etc. pot apare cu
succes pentru a mbun!t!#i structura documentelor). Structurile liniare pot ajuta la
realizarea a ceea ce se nume"te tour-guide al unui sistem, fiind preg!tite n prealabil de
c!tre exper#i pentru a ghida un novice printr-o re#ea de noduri hipertext.

Se ofer! suport pentru traversarea unui text liniar n cadrul unui sistem
hipermedia, dar aceast! abordare "i dovede"te sl!biciunea atunci cnd lu!m n
considerare explorarea hiperdocumentelor liniare de dimensiuni considerabile.
A doua manier! de realizare este structura liniar! cu salturi, adoptat! de Apple
n cadrul sistemului HyperCard, constnd dintr-o structur! arborescent! n care
utilizatorii pot s! traverseze nodurile n oricare direc#ie urmnd o cale liniar!,
dar de asemeni sunt capabili s! fac! salturi de la orice nod la un nod principal
denumit nodul acas! ("home"). Nodul acas! poate fi o bibliotec! avnd n
componen#! diverse documente liniare (e.g. c!r#i electronice).

A - 12

Tehnologii Web

Exemplu de structur# liniar# cu salturi

Dac! informa#ia dintr-un hiperdocument se poate divide n mod natural n

ierarhii ordonate, atunci se utilizeaz! o structur! ierarhic!, aceast! abordare
reg!sindu-se n modelul Dexter "i permi#nd cu succes utilizatorilor s! navigheze
printr-o re#ea hipertext complex!. Autorul poate crea ierarhii de informa#ii utiliznd
leg!turi organiza#ionale "i apoi s! adauge leg!turi referen#iale facilitnd
interconectarea acestor ierarhii. n cadrul unei structuri de tip ierarhic men#inerea
integrit!#ii "i explorarea nodurilor se realizeaz! mai u"or.

n cadrul literaturii de specialitate, hipermedia este v!zut! ca imitatoare a

memoriei umane, nodurile putnd fi structurate ca o pnz! (re#ea). Astfel, se pot
realiza documente hipertext structurate semantic, prin mpletirea hipermediei cu
inteligen#a artificial!, utilizndu-se diverse metode precum re#ele semantice, noduri
semi-structurate, h!r#i de concepte etc.

Este posibil, desigur, ca n cadrul unui singur hiperdocument s! coexiste mai

multe principii de structurare (vezi figura de mai jos). C!ile liniare sunt uzuale
pentru a parcurge o arie de interes ntr-o ordine prestabilit!, re#eaua permite
navigarea, iar ierarhia ofer! o structur! de tip index.

Coexisten"a a trei principii de structurare a hipertextului

(exemplu dat de Waterworth !i Chignell)

A - 13

Tehnologii Web

2.5 Modele
Pentru a realiza sisteme hipermedia deschise, cu func#ionalit!#i integrate, s-au propus
diverse modele, pe o parte dintre ele le vom trece n revist! n continuare.
Hypertext Abstract Machine (HAM)
Una dintre primele ncerc!ri de a propune un model de implementare hipertext a fost
Hypertext Abstract Machine (HAM), un sistem general multi-utilizator pentru stocarea
hipertextului, bazat pe tranzac#ii, ap!rut n 1988. Modelul este structurat pe nivele,
constnd din:

interfa#a cu utilizatorul - un mediu interactiv bazat pe ferestre;

aplica#ia - aplica#ia curent! care poate rula pe aceea"i ma"in! sau pe o ma"in!
diferit! de cea pe care ruleaz! HAM;

ma"ina hipertext abstract! (HAM) - un motor utilizat pentru managementul

tuturor informa#iilor referitoare la hipertext "i pentru comunicarea cu aplica#ia prin
intermediul unui protocol special;

sistemul de stocare sau sistemul de fi"iere gazd! - un depozit de date care

memoreaz! toate structurile hipertext "i bazele de date.

Nivelele modelului HAM

Modelul de stocare HAM const! din cinci tipuri de obiecte:

1.

grafuri - re#ele de noduri "i leg!turi con#innd unul sau mai multe contexte;

2.

contexte - parti#ii de date n cadrul grafurilor;

3.

noduri;

4.

leg!turi;

5.

atribute (asociind semantici).

Asupra obiectelor HAM se pot realiza opera#ii de creare, "tergere, distrugere, modificare,
filtrare, interogare "i altele. Arhitectura HAM ofer! un sistem de control al versiunilor,
securitatea "i filtrarea datelor.

A - 14

Tehnologii Web

Hypermedia Design Model (HDM)

Modelul a fost dezvoltat ca parte a proiectului HYTEA ncepnd cu anul 1991.
Facilit!#ile de baz! ale HDM sunt reprezentarea aplica#iilor hipertext prin intermediul
primitivelor: entit!#i-tip compuse din ierarhii de componente, diverse perspective ale unei
componente, leg!turi structurale legnd componentele apar#innd acelea"i entit!#i sau unor
entit!#i diferite, semantici de navigare. Aceste primitive sunt similare obiectelor definite
de HAM.
Modelul este gndit a fi independent de sistem, putndu-se utiliza la translarea aplica#iilor
hipertext dintr-un mediu ntr-altul.
HDM poate fi folosit pentru crearea unor hiperdocumente de dimensiuni mari sau
pentru definirea topologiei unei re#ele hipertext, neputnd oferi suport pentru documente
mici sau pentru asocierea de informa#ii nodurilor.
n cadrul HDM se pot defini specifica#ii de nivel nalt, una dintre facilit!#ile interesante
fiind aceea prin care un autor poate defini "perspective" permi#nd prezent!ri alternative
ale informa#iei hipertext. Aceasta poate fi de folos atunci cnd sistemul este bilingv sau
cnd reprezent!rile sunt att text, ct "i grafice.
Modelul Dexter
Modelul Dexter captureaz! cele mai importante abstractiz!ri prezente pe o varietate larg!
de sisteme hipermedia actuale sau viitoare. Scopul modelului este s! ofere o baz! pentru
compararea sistemelor "i pentru dezvoltarea de standarde n vederea interschimbului de
date "i interoperabilit!#ii.
Modelul Dexter mparte un sistem hipertext n trei nivele majore:

Runtime - este responsabil cu prezentarea hipertextului "i interac#iunea cu

utilizatorul. Modelul Dexter nu intr! n detaliile mecanismului de prezentare,
specifica#iile prezent!rii oferind doar o interfa#! ntre acest nivel "i nivelul imediat
inferior;

Storage - este cel mai important nivel, modelnd o baz! de date care este
compus! dintr-o ierarhie de componente con#innd date interconectate prin
leg!turi rela#ionale. Componentele posed! identificatori unici "i leg!turile pot fi
identificate de un set de doi sau mai mul#i identificatori. Componentele corespund
no#iunii generale de noduri "i pot con#ine text, imagini statice, audio, video etc.
Componentele sunt tratate ca "i containere generice de date "i modelul nu specific!
nici o structur! a acestora (astfel, componentele text nu sunt diferen#iate de
componentele audio, de exemplu).

Component - nivelul specific! structura "i con#inutul fiec!rei componente a

re#elei hipertext. Acest nivel este unul deschis, putnd fi nglobate noi forme de
reprezentare a informa#iei. Modelul Dexter presupune c! modele structurale
precum SGML (Standard Generalized Markup Language) sau ODA
(Open Document Architecture) vor fi utilizate pentru a captura
con#inutul/structura nodurilor. Exist! ns! o interfa#! ntre acest nivel "i nivelul de
stocare care analizeaz! mecanismul de asociere de loca#ii (adrese) pentru con#inutul
unei anumite componente.

A - 15

Tehnologii Web

Modelul Trellis
Richard Furuta "i David Stotts dezvolt! un sistem hipertext, bazat pe re#ele Petri,
denumit Trellis, n care implementeaz! modelul Trellis. Din acest model ei au dedus un
meta-model de referin#!, abreviat r-model. Modelul este structurat pe cinci nivele logice, n
fiecare nivel putndu-se reg!si una sau mai multe reprezent!ri a unei p!r#i ori a ntregului
hipertext. Prin contrast cu modelul HAM sau alte abord!ri, nivelele reprezint! nivele de
abstractizare "i nu componentele sistemului.
Nivelele pot fi grupate n trei categorii: abstracte, concrete "i vizibile. Anumite aspecte
ale hipertextului au fost deliberat excluse din cadrul modelului Trellis: semantica navig!rii,
comportamentul dinamic, caracteristicile con#inutului, descrierile de la nivelul fizic,
interfe#ele cu utilizatorul.
Astfel, modelul nu este indicat pentru modelarea unei aplica#ii de genul unei c!r#i
electronice hipermedia.
Modelul Tower
Majoritatea modelelor hipertext au n vedere specificarea unor caracteristici ale
sistemelor actuale "i mai pu#in ale celor viitoare. Cercet!torul Paul De Bra "i echipa sa
propun un nou model hipertext, orientat-obiect "i extensibil, prezentndu-l la cea de-a
patra Conferin#! a Hipertextului, organizat! de ACM (Association for Computing
Machinery).
Modelul, denumit Tower (turn), con#ine elemente structurale de baz! ca noduri, leg!turi
"i ancore, obiecte de tip turn "i obiecte de tip ora". Obiectele turn sunt utilizate s! modeleze
diverse descrieri ale unui obiect (fiind similare, oarecum, nivelelor modelului Dexter). Tipul,
modalit!#ile de stocare, modalit!#ile de vizualizare etc. reprezint! nivele ale obiectului turn.
Ora"ele constau din mul#imi de vizualizare peste obiectele turn.
Modelul permite fiec!rui tip de obiect s! fie obiect virtual (i.e. rezultatul unei func#ii sau
algoritm), operatorii pentru definirea structurilor virtuale fiind Apply-to-All, Filter,
Enumeration "i Abstraction, utili pentru prelucrarea informa#iilor hipertext.
Semantica navig!rii este descris! prin intermediul re#elelor Petri.

A - 16

Tehnologii Web

Modelul Tower

Nodurile, leg#turile !i ancorele

Un nod este descris de un obiect-identificator (oid) "i de o valoare. O ancor! este referit!,
la fel, de un obiect-identificator "i de o valoare (care ar trebui s! reprezinte, printre alte
lucruri, un nod oid "i loca#ia ancorei n cadrul acelui nod). O leg!tur! este descris! printr-un
4-uplu de forma (obiect-identificator, ancor! surs!, ancor! destina#ie, valoare).
n cadul modelului Tower, nodurile, leg!turile "i ancorele sunt "cet!#eni", fiecare avnd
un oid "i o valoare care poate denota orice. Separnd informa#iile despre ancore de leg!turi
"i noduri avem avantajul de a izola mecanismul de legare de diverse detalii ale nodurilor
conectate. Aceasta separa#ie este important! n cazurile n care hiperdocumentul trebuie s!
suporte integrarea informa#iei provenit! din colec#ii eterogene.
Obiectele sunt noduri, leg!turi sau ancore. Valoarea unui astfel de nod poate fi: o valoare
de baz! (aleas! dintr-o mul#ime de clase primare, dependent! de aplica#ia hipertext),
o valoare compus!, o valoare turn (tower value) sau o valoare ora" (city value).
n cadrul acestei sec#iuni ne vom referi la obiectele de baz!:
Valoarea unui nod modeleaz! un fragment de informa#ie care, depinznd de aplica#ie,
poate fi simpl! (e.g. "ir de octe#i) sau compus! (e.g. formular electronic). Con#inutul unui
nod de baz! este inaccesibil sistemului hipermedia prin mijloace obi"nuite "i poate fi
manipulat numai prin metode specifice nodului (e.g. editoare specializate), respectndu-se
principiul ncapsul!rii datelor.
A - 17

Tehnologii Web

O ancor! de baz! reprezint! loca#ia destina#ie a unei leg!turi, putnd fi de tip uzual,
ca pozi#ia n cadrul unui nod text, sau o loca#ie dependent! de aplica#ie n cadrul unui nod
complex, ca de exemplu o coordonat! tridimensional! a unui corp 3D.
O leg!tur! de baz! este o rela#ie simpl! dintre dou! ancore de baz! (e.g. o leg!tur! dintre
dou! noduri). Valorile leg!turii sunt alese n func#ie de aplica#ie.
Turnurile
Func#ionalitatea obiectelor dintr-un hiperdocument este una multi-dimensional! "i astfel
descrierea complet! a unui obiect const! din diferite nivele. De exemplu, un nod posed!:

o dimensiune structural! constnd din con#inutul lui (e.g. text) "i opera#iile
de manipulare a acestui con#inut (e.g. editarea textului folosind un editor de text);

un nivel de prezentare descriind afi"area sa pe ecran;

o a treia dimensiune (nivel) este aceea a atributelor care ata"eaz! un rol

semantic nodului (e.g. decizia).

Nodurile dependente de timp (cele video, de exemplu) posed! o dimensiune temporal!

definind scenariul prezent!rii lor.
Acestor dimensiuni le corespund diferite nivele de descriere a unui hiperdocument.
Nivelele adreseaz!, astfel, diverse informa#ii "i componente din arhitectura unui sistem
hipertext.
Un obiect turn este un obiect avnd o valoare de tip turn (tower value). O astfel de valoare
reprezint! o func#ie de asociere a unei mul#imi de etichete la o mul#ime de obiecte. Fiecare
etichet! const! dintr-un nivel de descriere, corespunznd unui nivel separat al
func#ionalit!#ii hiperdocumentului. Domeniul de definire a func#iei este fixat pentru fiecare
clas! de obiecte turn.
Toate obiectele sunt modelate prin turnuri. De pild!, un turn leg!tur! poate consta din:

un nivel structural stocnd mul#imea de leg!turi,

un nivel de prezentare indicnd cum vor fi figurate leg!turile pe ecran,

un nivel semantic definind rela#ia dintre turnul surs! "i turnul destina#ie
al leg!turii.

Num!rul "i natura nivelelor obiectelor turn sunt complet arbitrare, n func#ie
de necesit!#i.
Ora!ele
Un obiect al unui hiperdocument poate fi vizualizat din diverse perspective, depinznd
de modul cum este accesat de c!tre utilizator.
Nodurile de tip ora" sunt folosite pentru a vizualiza obiectele turn din diferite astfel de
perspective. Elementele unui ora" sunt denumite vizualiz!ri (views), fiecare vizualizare
constnd dintr-un turn care descrie obiectul dintr-o perspectiv! particular!. Aceste
vizualiz!ri modularizeaz! informa#ia n conformitate cu diverse modalit!#i de accesare
a datelor.

A - 18

Tehnologii Web

2.6 Standarde
Fa#! de documentele clasice, statice "i structurate, documentele hipermedia sunt
nestructurate "i pot fi dinamice. Astfel, standardele curente referitoare la documente nu
surprind complet caracterul structurii hipertext. O ierarhie arborescent! este relevant!, dar
nu este suficient! pentru hipertext, iar formele actuale de SGML sau ODA nu ofer! toate
capabilit!#ile dorite pentru reprezentarea "i interschimbarea hipertextului. Un unic standard
nu poate acoperi diversitatea formatelor "i ac#iunilor ce pot fi executate asupra
hiperdocumentelor. A"adar, au fost propuse o serie de standarde hipermedia dintre care
vom men#iona HyTime "i MHEG.
HyTime
HyTime (Hypermedia/Time-based Structuring Language) reprezint! un standard
interna#ional pentru reprezentarea leg!turilor hipertext "i sincronizarea informa#iilor
con#inute de documentele multimedia. Bazat pe SGML, n conformitate cu ISO 8879,
HyTime a fost standardizat n cadrul grupului special SIGLINK al ACM n 1992 "i ofer! o
multitudine de extensii precum posibilitatea folosirii de pointeri sau scheme de adresare n
vederea localiz!rii datelor, independen#a de nota#iile de con#inut a nodurilor, de tipurile
leg!turilor, de modalit!#ile de procesare, prezentare "i semanticile utilizate. HyTime suport!
adresarea prin nume, dup! pozi#ia nodului n cadrul documentului "i dup! construc#ia
semantic! asociat! acelui nod. HyTime permite combinarea oric!ror tipuri de tehnologii
multimedia "i hipertext (proprietare sau nu), dar nu are n vedere standardizarea prezent!rii,
interfe#ei cu utilizatorul sau limbajelor de interogare.
HyTime a fost creat pentru a fi utilizat ca infrastructur! a aplica#iilor multimedia
sincronizate sau nesincronizate, permi#nd schimbul de informa#ii hipertext independent de
platforma hardware sau software folosit!.
MHEG
Scopul standardului MHEG (Multimedia and Hypermedia Information Coding
Expert Group) este de a defini reprezentarea "i codificarea informa#iilor multimedia "i
hipermedia pentru a facilita serviciile de interschimb de hiperdocumente n orice context
(dispozitive de stocare, re#ele de telecomunica#ii sau re#ele de difuzare audio-vizual!).
MHEG ofer!:
abstractiz!ri pentru prezent!ri n timp-real incluznd sincronizarea "i
interactivitatea informa#iilor multimedia;

abstractiz!ri pentru schimbul de informa#ii n timp-real folosindu-se o zon!

temporar! de memorare minimal!;

abstractiz!ri pentru manipularea direct! a informa#iilor f!r! a necesita

proces!ri suplimentare;

facilit!#i de realizare de leg!turi ntre elementele obiectelor multimedia

compuse.

A - 19

Tehnologii Web

2.7 Aplicaii
Tehnicile hipertext (hipermedia) pot fi utilizate n diverse aplica#ii precum c!r#i
electronice, enciclopedii, sisteme de help on-line, sisteme de nv!#are asistat! de calculator
(CAL - Computer-Aided Learning), scriere colaborativ! de documente, chio"curi
informa#ionale interactive, sisteme decizionale etc.
n prezent exist! o serie de sisteme hipertext opera#ionale dintre care se pot aminti
Hyperwave, Microcosm, Storyspace, Webthing "i, desigur, World Wide Web.
Hyperwave
Vom descrie n continuare un sistem hipermedia avansat - Hyperwave (ini#ial denumit
Hyper-G) - dezvoltat la Universitatea tehnic! din Graz, Austria, de H.Havrer "i F.Kappe.
Hyperwave ofer!:

acces folosind hiper-leg!turi, navigare "i c!utare ierarhic!;

reducerea fragment!rii colec#iilor de documente stocate pe servere multiple;

suport pentru documente n mai multe limbi;

identificarea "i controlul accesului utilizatorilor (securitate);

integrarea n sistemele informa#ionale deja existente n Internet;

consisten#a documentelor.

Serverul Hyperwave
Hyperwave a fost conceput s! stocheze resurse hipermedia numeroase care pot fi
reg!site pe diferite servere. Dezvoltarea "i administrarea pe termen lung a bazelor de date
distribuite devin cruciale atunci cnd dimensiunea acestora cre"te foarte mult.
Pentru aceasta, Hyperwave impune o structurare a documentelor memorate.
Fiecare document este membru al uneia sau mai multor colec#ii, aceste colec#ii formnd
o ierarhie.
n afar! de a suporta diverse facilit!#i ca asignarea unor atribute obiectelor multimedia
sau indexarea "i c!utarea lor, serverul Hyperwave men#ine o ierarhie a utilizatorilor
organiza#i n grupuri.
Unui document i se pot asocia diverse atribute, dintre care amintim:

permisiuni de citire/scriere pentru grupuri sau utilizatori;

cuvinte-cheie de c!utare;

titluri n diverse limbi;

propriet!#i de afi"are;

o durat! de accesibilitate;

costul vizualiz!rii;

fanioane de actualizare concurent!.

Aceste atribute sunt memorate ntr-o baz! de date separat!, pentru facilitarea
opera#iunilor de extragere "i manipulare.
A - 20

Tehnologii Web

Documentele
Un server Hyperwave poate con#ine diverse tipuri de documente:

(hiper)documente n formate precum HTML (HyperText Markup

Language) sau HTF (Hyperwave Text Format) ori neformatate;

imagini (JPEG, GIF, PNG, TIFF etc.);

filme n formatul MPEG;

documente Postscript;

lumi tridimensionale n formate VRML/SDF;

programe (applet-uri Java, de exemplu).

Este posibil! definirea de leg!turi spre o serie de documente sau p!r#i ale lor.
Se pot insera "i pseudo-documente speciale de c!tre script-uri care vor fi executate de
server la cererea clien#ilor. Folosind acest mecanism, con#inutul poate fi creat "din zbor" "i
prezentat utilizatorului (sunt suportate script-uri CGI, HGI sau cod SQL).
Aceasta faciliteaz! "i opera#iunile de c!utare sau de indexare.
Astfel, Hyperwave se poate considera a fi un veritabil sistem hipermedia.
Virtual Shakespeare
n cele ce urmeaz!, vom prezenta un proiect de vizualizare tridimensional! a unor mari
cantit!#i de text, cum sunt piesele de teatru ale lui William Shakespeare, proiect bazat pe
diverse metodologii hipertext "i pe tehnici vizuale de filtrare a informa#iei.
De cele mai multe ori se dore"te ca parcurgerea unor documente de dimensiuni
considerabile s! se realizeze simplu, rapid "i natural. Cercet!torii de la laboratorul Visible
Language Workshop (MIT), condu"i de profesorul Muriel Cooper, au propus n anul 1996 n
cadrul proiectului Virtual Shakespeare o metod! de vizualizare tridimensional! a
con#inutului textual al pieselor lui Shakespeare, prin intermediul unei camere virtuale care
poate naviga liber! prin hiperdocumente.

A - 21

Tehnologii Web

Un filtru vizual aplicat pentru replicile Titaniei, regina znelor din "Visul unei nop"i de var#"
ntr-un alt plan, se pot parcurge indica"iile regizorale referitoare la personajele scenei

Corpusul generos (nsumnd peste un milion de cuvinte) poate fi explorat la nivel de

replic! de personaj, tablou, act sau pies! luat! n ntregime. S-a conceput un model de
vizualizare bazat pe display-uri de nalt! rezolu#ie pentru optimizarea navig!rii "i a
schimb!rilor de scal! a textului.
Dac! utilizatorul se afl! prea departe de textul reprezentat 3D, atunci textul va fi nlocuit
cu o textur! mai simpl! (tehnic! denumit! greeking), pentru a se men#ine forma original! a
liniilor de text, chiar dac! nf!#i"area cuvintelor s-a pierdut. Tranzi#ia de la diverse nivele de
detaliu trebuie s! se realizeze n mod natural, astfel nct cititorul s! aib! impresia c!
ntreaga informa#ie se afl! pe ecran. Cu ct textul se afl! mai departe de camera virtual! de
vizualizare, cu att va deveni mai ntunecat, aplicndu-se legile cromatice din artele plastice.
De altfel, replicile personajelor vor fi reprezentate n culori diferite. Pentru ca fonturile s!
fie corect afi"ate la toate sc!rile alese s-au folosit tehnologii Adobe. Pentru a evita
problemele de vizualizare a notelor de subsol "i a referin#elor ncruci"ate, acestea vor putea
fi parcurse n alt plan, diferit de cel al textului principal.
Atunci cnd se va accesa un alt document prin intermediul unei leg!turi, utilizatorul va
"s!ri" pur "i simplu n alt plan de vizualizare, putnd astfel parcurge n paralel mai multe
A - 22

Tehnologii Web

fragmente de informa#ie, denumite de Muriel Cooper peisaje informa"ionale (information

landscapes). Toate aceste metode faciliteaz! u"urin#a n explorarea con#inutului textual al
hiperdocumentelor, chiar "i de c!tre cei care nu de#in cuno"tin#e de informatic! sau de c!tre
persoanele cu diverse handicapuri.

A - 23

Tehnologii Web

3. Localizarea resurselor Internet

Localizarea resurselor Internet se realizeaz! apelnd la URI (Uniform Resource
Identifiers), identificatori uniformi de resurse.
URI sunt caracteriza#i de defini#iile de mai jos:
Resurs#
Poate fi orice lucru care posed! o identitate. Ca exemple tipice pot fi enumerate:
un document electronic, o imagine, un serviciu, o colec#ie de alte resurse. Nu toate
resursele pot fi accesate via re#ea, dar pot fi considerate resurse (non-electronice) "i
fiin#ele umane, organiza#iile, c!r#ile dintr-o bibliotec!. O resurs! se poate men#ine
constant! n timp de"i con#inutul ei - entit!#ile c!reia i corespund - se poate modifica.
Identificator
Este un obiect care poate juca rolul unei resurse. n cazul URI, obiectul este
o secven#! de caractere avnd o sintax! bine-definit!.
Uniformitate
Permite ca diverse tipuri de identificatori de resurse s! fie utilizate n acela"i mod,
chiar dac! mecanismul desemnat s! acceseze aceste resurse (protocolul folosit) difer!.
Se permite o interpretare semantic! uniform! a mai multor conven#ii sintactice
comune desemnnd identificatori ai unor resurse eterogene. Mai mult, se pot
introduce noi tipuri de identificatori de resurse f!r! a se modifica modul de adresare a
vechilor tipuri.
Termenul URL (Uniform Resource Locator) se refer! la un subset URI identificnd
resursele printr-o reprezentare a mecanismului de accesare a lor (e.g. localizarea re#elei),
nu prin nume sau alte atribute. Regulile de generare a unui URL valid sunt prezentate n
anexa $.
Termenul URN (Uniform Resource Name) include tot un subset al URI care r!mne
permanent "i unic, chiar dac! resursa a disp!rut ori a devenit inaccesibil!.
Exemple:
schem!

"ftp"

pentru

ftp://ftp.is.co.za/rfc/rfc2396.txt

http://www.infoiasi.ro/~busaco/teach/ schem! "http" pentru

mailto:busaco@thor.infoiasi.ro schem! "mailto" pentru po"ta

news:comp.infosystems.www.servers.unix

telnet://delta.ac.tuiasi.ro:7777

serviciile protocolului de transfer de fi"iere (FTP);

serviciile protocolului de transfer a hipertextelor (HTTP);
electronic! (SMTP);

schem!

"news"

pentru grupurile de "tiri USENET (NNTP);

servicii interactive via protocolul TELNET.

A - 24

schem!

"telnet"

pentru

Tehnologii Web

3.1 Componentele sintaxei URI

URI pot fi reprezentate ca "iruri de caractere apar#innd unui alfabet limitat
(literele alfabetului latin, cifrele "i cteva caractere de punctua#ie).
Un URI poate con#ine urm!toarele caractere rezervate (meta-caracterul "|" specificnd
alternative de apari#ie a caracterelor dintre ghilimele):
reserved = ";" | "/" | "?" | ":" | "@" | "&" |
"=" | "+" | "$" | ","

Un URI generic este compus din urm!toarele componente principale:

schema "://" authority path "?" query

Existnd mai multe metode de a accesa resursele, vor fi mai multe scheme pentru
a le identifica:
schema = alpha (alpha | digit | "+" | "-" | ".")*

Componenta autoritate (authority) este definit! de o loca#ie de server Internet sau de o

secven#! special! de nregistrare, este precedat! de "//" "i este terminat! de urm!torul
caracter "/", "?" sau de sfr"itul URI-ului.
authority
reg_name

= server | reg_name
= (unreserved | escaped | "$" | "," | ";" | ":" |
"@" | "&" | "=" | "+")+
server
= [ [ userinfo "@" ] hostport ]
userinfo
= (unreserved | escaped | ";" | ":" | "&" | "=" |
"+" | "$" | ",")+
hostport
= host [ ":" port ]
host
= hostname | IPv4addr
hostname
= (domainlabel ".")* toplabel ["."]
domainlabel = alphanum | alphanum (alphanum | "-")* alphanum
toplabel
= alpha | alpha (alphanum | "-")* alphanum
IPv4addr
= digit+ "." digit+ "." digit+ "." digit+
port
= digit+

Meta-caracterul "*" specific! faptul c! o anumit! construc#ie sintactic! poate apare de

zero, unu sau mai multe ori, iar "+" impune ca acea construc#ie s! apar! m!car o dat!.
Serverul poate fi dat fie prin adresa IP (de exemplu 193.231.30.225), fie prin adresa
DNS (e.g. thor.infoiasi.ro), eventual urmat de un num!r de port.
Componenta cale con#ine date identificnd o resurs!:
path
path_segm
segment
param
pchar

=
=
=
=
=

[ abs_path | opaque_path ]
segment ( "/" segment )*
pchar* ( ";" param)*
pchar*
unreserved | escaped | ":" | "@" | "&" |
"=" | "+" | "$" | ","

Calea poate con#ine secven#e de segmente de cale separate prin "/". n cadrul unui
segment, caracterele "/", ";", "=" "i "?" sunt rezervate. Fiecare segment poate include o
secven#! de parametri, dup! delimitatorul ";".
Componenta de interogare este un "ir de informa#ii interpretate de resurs!:

A - 25

Tehnologii Web

query

= uric*

n cadrul componentei de interogare, caracterele ";", "/", "?", ":", "@", "&", "=", "+",
"," "i "$" sunt rezervate.

3.2 Referine URI

O referin"! URI este utilizat! aici s! desemneze o utilizare comun! a unui identificator,
putnd fi absolut! sau relativ! "i putnd con#ine informa#ii suplimentare:
URI-ref

= [ absoluteURI | relativeURI ] [ "#" fragment ]

Sintaxa unui URI relativ este o form! prescurtat! a unui URI absolut, n care unele
componente lipsesc "i anumite componente de cale ("." "i "..") au un n#eles special
(vezi mai jos).
Atunci cnd o referin#! URI este utilizat! s! realizeze o ac#iune de accesare a unei
resurse, se poate folosi un identificator de fragmentare constnd din anumite informa#ii care vor
fi interpretate de agentul utilizator dup! ce opera#ia de transfer a resursei s-a finalizat
cu succes.
fragment

= uric*

Semantica identificatorului de fragmentare este o proprietate a datelor rezultate n urma

ac#iunii de accesare "i transfer a resursei. Formatul "i interpretarea identificatorilor de
fragmentare sunt dependente de tipul de media.

3.3 Referine URI relative

Majoritatea documentelor (resurselor) sunt stocate n manier! arborescent! (ierarhic!).
Adresarea relativ! permite o par#ial! independen#! a loca#iei "i a schemei de acces.
relativeURI = (net_path | abs_path | rel_path) [ "?" query ]
rel_path
= rel_segm [ abs_path ]
rel_segm
= (unreserved | escaped | ";" | "@" | "&" |
"=" | "+" | "$" | ",")+

Anumite scheme URI nu permit sintaxa ierarhic!, deci nu pot utiliza referin#e relative.

A - 26

Tehnologii Web

4. Protocolul de transfer al
hipertextului: HTTP
4.1 Introducere
Protocolul de transfer al hipertextului HTTP (HyperText Transfer Protocol)
reprezint! un protocol bazat pe TCP/IP destinat sistemelor hipermedia conlucrnd n
medii distribuite. HTTP a nceput s! fie proiectat "i utilizat din anul 1990, dezvoltndu-se
mpreun! cu spa#iul WWW.
Prima versiune, referit! HTTP/0.9, a reprezentat un simplu protocol de transfer de date
prin Internet. Urm!toarea versiune HTTP/1.0, definit! de RFC 1945, a mbun!t!#it
transferul de mesaje, permi#ndu-se mesaje n format MIME (Multipurpose Internet
Mail Extensions), con#innd meta-informa#ii despre datele transmise "i despre semantica
dialogului cererilor "i r!spunsurilor dintre clien#ii "i serverele Web.
A urmat HTTP/1.1 care ofer! mai multe func#ionalit!#i suplimentare, precum
mecanisme de c!utare, adnotare "i actualizare, avnd suport pentru URI
(Uniform Resource Identifier), specificnd adresele ca loca#ie (prin URL) sau prin nume
(via URN). HTTP de asemeni este utilizat ca protocol generic pentru comunicarea ntre
agen#ii utilizator "i por#ile (gateways) c!tre alte sisteme Internet, incluznd suport pentru
protocoale ca SMTP (Simple Mail Transfer Protocol), NNTP (Network News Transfer
Protocol), FTP (File Transfer Protocol), Gopher. n acest mod, HTTP permite accesul
hipermedia la resurse disponibile din diverse aplica#ii.
Protocolul HTTP este un protocol sigur, de tip cerere/r!spuns, comunica#iile decurgnd
peste conexiunile TCP/IP, portul standard de acces fiind portul 80. HTTP nu posed! nici
un mecanism pentru a men#ine starea conexiunilor, fiind n acest sens independent de
context. Cererile sunt individuale, iar serverul Web nu poate distinge implicit apartenen#a
conexiunilor efectuate de clien#i.

4.2 Terminologie
Vom folosi n cele ce urmeaz! urm!torii termeni:

conexiune
Un circuit virtual la nivelul transport stabilit ntre dou! programe care
doresc s! comunice.

mesaj
Unitatea de baz! a unei comunica#ii HTTP, constnd dintr-o secven#!
structurat! de octe#i, transmis! printr-o conexiune.

cerere
Un mesaj de cerere HTTP (vezi mai jos).

A - 27

Tehnologii Web

r!spuns
Un mesaj de r!spuns HTTP.

resurs!
Un obiect de date sau serviciu care poate fi identificat de un URI. Resursele
pot avea reprezent!ri multiple (e.g. formate, m!rimi, rezolu#ii etc.).

entitate
Informa#ia transferat! ntr-o opera#ie de cerere sau de r!spuns. O entitate
cuprinde att meta-informa#ii, ct "i con#inutul propriu-zis.

reprezentare
O entitate inclus! ntr-un r!spuns care reprezint! o negociere ntre
client "i server.

negociere
Mecanism de selectare a reprezent!rii potrivite a unei date solicitate.

client
Un program care stabile"te conexiuni cu scopul de a trimite cereri.

agent-utilizator
Clientul care ini#iaz! o cerere (navigator, editor, robot de traversare Web).
Navigatoarele cele mai cunoscute sunt Netscape Navigator, Internet Explorer,
Opera, Arena, Mosaic, Lynx "i Links (ultimele dou! rulnd n mod text).

server
O aplica#ie care accept! conexiuni, r!spunznd la anumite cereri transmise
de clien#i. Un program poate juca rol att de server, ct "i de client.
Un server se poate comporta ca server ini#ial, poart!, tunel sau proxy Web n
func#ie de natura cererii. Cele mai cunoscute servere Web sunt: Apache,
Netscape Enterprise Server, Microsoft Internet Information Server (IIS), Sun Web Server,
Stronghold, MacHTTP, WebSite.

proxy (intermediar)
Un program intermediar care ruleaz! ca server, ct "i drept client pentru a
transmite cereri altor servere. Cererile trimise unui proxy pot fi rezolvate
intern sau transmise mai departe, c!tre alte servere (posibil translatate).
Un proxy trebuie s! implementeze cerin#ele de server "i de client ale
specifica#iei HTTP.

poart!
Un server care lucreaz! ca intermediar pentru alte servere, n mod
transparent, fiind "i un translator de protocoale.

tunel
Un program intermediar func#ionnd ca mijlocitor ntre dou! conexiuni.

A - 28

Tehnologii Web

cache

Un depozit local de memorare a mesajelor (datelor) de r!spuns "i un

subsistem de control al acestuia. Memoria cache reduce timpul de r!spuns "i
congestia re#elei. Oricare client "i server poate include un cache.

4.3 Mesaje HTTP

Un mesaj HTTP este divizat ntr-o parte de antet "i o parte corp. Antetul cuprinde o
serie de cmpuri (unele dintre ele obligatorii) oferind informa#ii despre versiunea de
protocol folosit, codificarea datelor, tipul de medii, lungimea "i tipul mesajului etc. Sintaxa
unui antet de mesaj este (CRLF reprezint! secven#a de coduri Carriage Return - cod 13 "i
Line Feed - cod 10):
message-header ::= field-name ":" [ field-value ] CRLF

Formatul unei cereri este urm!torul:

Request ::= Method Request-URI ProtocolVersion CRLF
[ message-header ] [ CRLF data ]
Method ::= string
data
::= MIME-data

R!spunsul la o cerere are urm!toarea sintax!:

status-line ::= HTTP-version status-code reason CRLF
status-code ::= digit digit digit
reason
::= string

Structura
Orice mesaj HTTP trebuie s! debuteze cu un cmp indicnd versiunea protocolului n
prima linie a mesajului:
HTTP-Version ::= "HTTP-Version" ":" "HTTP" "/" digit "." digit

n prezent este opera#ional protocolul 1.1 deci toate mesajele de cerere "i de r!spuns vor
ncepe cu linia HTTP/1.1 sau o versiune inferioar!.
Mesajele pot fi codificate conform IANA (Internet Assigned Numbers Authority) fiind
permise codific!rile:
gzip (GNU zip) este un cod Lempel-Ziv (LZ77) cu suma de control pe
32 de bi#i;

compress este un cod produs de programul compress disponibil n toate

mediile Unix, dup! codificarea Lempel-Ziv-Welch (LZW).

Aceste codific!ri sunt specificate de cmpul Content-Transfer-Encoding.

Pentru MIME, se specific! tipul "i subtipul mediului de informa#ii
(de exemplu: text/html, text/plain, image/jpeg, video/mpeg etc.) n cmpul
Content-Type. Un mesaj poate fi transmis n format multipart, constnd din mai multe

A - 29

Tehnologii Web

entit!#i, toate avnd o sintax! comun!. Dac! o aplica#ie recep#ioneaz! un subtip

nerecunoscut, n mod automat l va trata ca multipart/mixed.
Tipurile MIME primare sunt sintetizate n urm!torul tabel (pentru mai multe am!nunte
consulta#i documentul RFC 1521):
Tip

Descriere

Exemple

define"te aplica#iile client

application/postscript
application/octetstream

audio

define"te formatele audio

audio/basic
audio/aiff
audio/mid

image

define"te formatele grafice

image/gif
image/jpeg
image/png

text

define"te formatele text

text/plain
text/html
text/xml

video

define"te formatele video

video/mpeg
video/quicktime

application

multipart

utilizat pentru transmisia

informa#iilor compuse

multipart/mixed
multipart/alternative

message

utilizat pentru transmisia

mesajelor de po"t! electronic!

message/partial
message/rfc822

Tipurile MIME principale

Tipurile sau subtipurile MIME nestandardizate nc! vor fi prefixate de caracterele "x-".
Astfel, putem ntlni application/x-cdf (defini#ie de canal de date activ),
image/x-targa (format grafic Targa) sau x-world/x-vrml (lume virtual! modelat! n
VRML; acest tip MIME este acum nlocuit cu model/vrml).
Cmpul Accept dintr-un mesaj de cerere poate specifica mul#imea de tipuri de date
returnat! de server ca r!spuns:
Accept
media-range
accept-params
accept-extension
type
subtype
qvalue

::=
::=
::=
::=
::=
::=
::=

"Accept" ":" (media-range [ accept-params ])+

("*/*" | type "/*" | type "/" subtype)*
";" "q=" qvalue accept-extension*
";" token [ "=" (token|string) ]
string
string
digit "." digit

Simbolul "*" desemneaz! toate tipurile/subtipurile de medii dintr-o anumit! categorie.

De exemplu, pentru a accepta doar imagini, indiferent de format, se va transmite
Accept: image/*.

A - 30

Tehnologii Web

Pot fi specifica#i unul sau mai mul#i factori de calitate relativ!. De pild!, cererea

Accept: audio/*; q=0.2, audio/basic este interpretat! astfel: "se prefer! tipul

audio/basic, dar serverul va trebui s! trimit! toate tipurile audio avnd calitatea de cel pu"in 80%".

Loca#ia unei resurse HTTP va fi dat! de cmpul Content-Location n formatul URI,

conform schemei http:
Content-Location ::= "Content-Location" ":" http-URL
http-URL ::= "http://" host [ ":" port ] [ abs_path ]

De exemplu: http://www.infoiasi.ro/~busaco/egon/http.html.
Dac! portul nu apare, se ia prin defini#ie portul 80, rezervat protocolului HTTP.
Adresele host vor fi tratate indiferent de scrierea cu caractere majuscule sau nu
(case-insensitive), dar calea de directoare abs_path este tratat! case-sensitive. Dac! abs_path
nu apare, se va considera "/", iar caracterele rezervate vor fi echivalente cu codul lor n
hexa, precedat de "%" (n forma "% hex hex").
De exemplu, aceste trei URI sunt echivalente:
http://www.infoiasi.ro:80/~busaco/poems.html
http://www.infoiasi.ro/%7Ebusaco/poems.html
http://WWW.InfoIasi.Ro/%7ebusaco/poems.html

Corpul mesajului va con#ine informa#iile propriu-zise ale unei cereri sau r!spuns,
specificate de o entitate. O entitate-corp difer! de corpul mesajului numai dac! sunt aplicate
codific!ri.

4.4 Formatul mesajelor de cerere

Linia de cerere a unui mesaj HTTP este definit! astfel:
Request-Line ::= Method Separator Request-URI Separator
HTTP-Version CRLF
Method
::= "OPTIONS" | "GET" | "HEAD" | "POST" |
"PUT" | "DELETE" | "TRACE"
Request-URI ::= "*" | absolute-URI | abs_path

Serverul va returna codul 405 (Method Not Allowed) sau 501 (Not Implemented)
dac! se va trimite numele unei metode inexistente.
Descrierea metodelor permise urmeaz! mai jos:

OPTIONS

Reprezint! o cerere de informa#ii despre op#iunile de comunicare

disponibile ntr-un dialog cerere/r!spuns.

GET

Reprezint! o cerere de accesare a unor informa#ii (entit!#i) identificate de

Request-URI. Semantica metodei GET se schimb! n cerere condi"ionat! dac!
mesajul de cerere include cmpuri antet If-Modified-Since, If-Match,
If-Range etc. Dac! se specific! un cmp Range, atunci GET va desemna
o cerere par"ial!.

A - 31

Tehnologii Web

HEAD

Este similar! cu GET, dar serverul va returna un mesaj avnd informa#ii

doar n antet. Meta-informa#iile din antetele HTTP din r!spunsul la o cerere
HEAD vor fi identice cu cele din r!spunsul la o cerere GET. Metoda HEAD este
folosit! deseori pentru testarea validit!#ii, accesibilit!#ii "i modific!rilor recente
ale unei leg!turi hipertext. Pentru documente HTML, o cerere HEAD va avea
ca r!spuns doar antetul paginii, adic! informa#iile cuprinse ntre marcatorii
<head>...</head>.

POST

Metoda este utilizat! s! identifice dac! serverul accept! o entitate nglobat!

n cadrul cererii. POST este proiectat! s! implementeze o metod! uniform!
pentru func#iile: adnotarea resurselor, trimiterea unui mesaj ntr-o list! de "tiri,
trimiterea datelor unui formular Web, extinderea unei baze de date printr-o
opera#iune de ad!ugare. Semantica exact! a metodei este definit! de server.
R!spunsul serverului poate fi 200 (Ok), 201 (Created) sau 204 (No Content).

PUT

Specific! faptul c! o entitate inclus! n mesaj s! fie stocat! la adresa dat! de

Request-URI. Dac! resursa deja exist!, se consider! o actualizare a ei.
Diferen#a fundamental! ntre PUT "i POST este reflectat! de modul diferit de
manipulare a adresei Request-URI. ntr-o cerere POST, URI identific!

resursa care va prelucra entitatea nglobat! de mesaj. Acea resurs! poate fi un

proces de prelucrare a datelor, o poart! c!tre alt protocol, o entitate separat!
acceptnd adnot!ri. Prin contrast, URI dintr-un PUT identific! entitatea
inclus! n mesajul de cerere. O unic! resurs! poate fi identificat! de
URI-uri multiple.

DELETE

Cere ca serverul s! "tearg! resursa identificat! de Request-URI.

TRACE

Invoc! o cerere de diagnosticare (trasaj).

4.5
4. 5 Coduri de stare
Pentru fiecare cerere a unui client, serverul HTTP r!spunde cu o serie de coduri de stare
a opera#iei solicitate, dintre care men#ion!m:
a. Coduri de informare ($xx)
Acestea dau informa#ii despre o anumit! ac#iune:

100 Continue - clientul poate continua cererea, trebuind s! trimit!

urm!toarea parte a unui mesaj par#ial;

101 Switching Protocols - serverul n#elege cererea, dar necesit!

recep#ionarea unui cmp Upgrade pentru a "ti care tip de protocol va fi

A - 32

Tehnologii Web

folosit la nivelul aplica#iei (e.g. pentru transmiterea de informa#ii

multimedia, cnd poate fi utilizat un protocol sincron, n timp-real);
b. Coduri de succes (2xx)
Ele raporteaz! efectuarea cu succes a unei opera#iuni:

200 Ok - cererea a fost rezolvat! cu succes;

201 Created - o nou! resurs! a fost creat! cu succes. Resursa creat!

poate fi identificat! de URI-ul returnat de entitatea-r!spuns, trebuind a fi
generat! nainte de returnarea codului (n caz contrar se trimite 202);

202 Accepted - cererea a fost acceptat! spre procesare, dar nc! nu a

fost satisf!cut! n ntregime. Nu exist! nici o facilitate pentru retransmiterea
unui cod de stare n urma execu#iei unei opera#ii asincrone;

204 No Content - serverul a rezolvat cererea, dar nu are ce returna;

c. Coduri de redirectare (3xx)

Indic! o redirectare, c!tre alt! loca#ie/server a cererii (de exemplu, la apari#ia
marcatorului <meta name="refresh" content="..."> n cadrul unui
document HTML):

300 Multiple Choices - resursa cerut! corespunde uneia dintre

reprezent!rile multiple pe care le are;

301 Moved Permanently - resursa cerut! a fost asignat! unui URI nou "i
orice referin#! viitoare la ea trebuie s! se realizeze prin acest URI returnat;

302 Moved Temporarily - resursa cerut! are un alt URI, pentru o

perioad! temporar!;

303 See Other - r!spunsul la cerere poate fi g!sit la o alt! loca#ie URI
"i trebuie accesat folosind o metod! GET;

305 Use Proxy - resursa cerut! trebuie accesat! printr-un proxy

desemnat de cmpul Location;

d. Coduri de eroare client (4xx)

Indic! apari#ia unei erori pe partea clientului:
400 Bad Request - cererea nu a putut fi n#eleas! de server din cauza
unei sintaxe eronate a metodei;

401 Unauthorized - cererea necesit! autentificarea utilizatorilor,

prin transmiterea unui cmp Authorization;

403 Forbidden - serverul n#elege cererea, dar refuz! s! o satisfac! din

diverse metode (de exemplu, resursa cerut! poate fi accesat! numai de la
anumite adrese);

404 Not found - serverul nu g!se"te resursa specificat! de

Request-URI;

406 Not Acceptable - resursa este incompatibil! cu antetul cererii;

A - 33

Tehnologii Web

e. Coduri de eroare server (5xx)

Sunt coduri semnificnd o eroare pe partea serverului:

501 Not Implemented - serverul nu are implementat! o func#ionalitate

necesar! satisfacerii unei cereri;

502 Bad Gateway - serverul, lucrnd ca poart! sau proxy,

a recep#ionat un r!spuns invalid de la alt server c!ruia i-a trimis cererea;

503 Service Unavailable - serverul nu poate satisface cererea, din cauza

supranc!rc!rii temporare sau a unor ra#iuni de administrare;

504 Gateway Timeout - timpul de a"teptare a r!spunsului a expirat.

Pot fi transmise "i coduri de avertisment, cu valori cuprinse ntre 0 "i 99.

A - 34

Tehnologii Web

Exemplu
Urmeaz! un exemplu de cerere HTTP pentru accesarea unui document HTML. Liniile
subliniate reprezint! cererea din partea unui client, urmat! de replica serverului Web
(modelul client/server HTTP):
GET /index.html HTTP/1.1
Host: www.infoiasi.ro
HTTP/1.1 200 OK
Date: Thu, 23 Sep 1999 07:18:22 GMT
Server: Apache/1.3.12 (Unix) (Red Hat/Linux)
Last-Modified: Fri, 28 Aug 1998 07:03:53 GMT
ETag: "35028-181-35e65659"
Accept-Ranges: bytes
Content-Length: 385
Content-Type: text/html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="refresh" content="0;
url=http://www.infoiasi.ro/~busaco/fcs">
<TITLE>Faculty of Computer Science</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#0000FF" VLINK="#000080" ALINK="#FF0000">
...

Modelul client/server HTTP:

clientul formuleaz# o cerere de solicitare a unui document stocat
pe un server Web !i prime!te r#spunsul furnizat de acel server

A - 35

Tehnologii Web

5. Securitatea serviciilor Web

5.1 Introducere
Securitatea Web-ului nu se rezum! doar la criptarea transmisiilor de date ntre clientul "i
serverul WWW. Una dintre cele mai importante probleme o reprezint! securitatea
serverelor Web. Securitatea Web-ului poate fi reg!sit! la mai multe nivele:
1.

protec#ia criptografic! a canalelor de comunica#ie;

2.

proiectarea unor extensii de securitate pentru standardele Internet existente;

3.

administrarea sigur! "i eficient! a serverelor Web;

4.

includerea n mediile Java a unor facilit!#i de securitate, criptografice.

n cadrul nivelului 1., pentru realizarea cript!rii comunica#iilor dintre server "i clien#ii
Web se pot lua n considerare mai multe abord!ri:

criptarea leg!turii
Se cripteaz! pachetele IP (via routere sau firewall-uri).

criptarea documentelor
Documentele stocate pe serverele Web pot fi criptate folosindu-se un
sistem precum PGP (Pretty Good Privacy), la nivelul clientului trebuind
decriptate.

SSL (Secure Socket Layer)

Reprezint! un sistem proiectat de Netscape care ofer! o cale TCP/IP
criptat! ntre dou! ma"ini, suportnd protocoalele HTTP, TELNET sau FTP.
SSL folose"te o varietate de sisteme de criptare pe chei publice "i secrete.

Pentru nivelul 2., s-au propus dou! standarde menite a securiza tranzac#iile HTTP:

HTTPS care este un sistem SSL pentru protocolul HTTP;

SHTTP (Secure HTTP) este un sistem de criptare pentru HTTP conceput de

CommerceNet, oferind mecanisme de securitate prin semn!tur!, autentificare "i
cifrare, folosite independent sau mpreun!.

Pentru nivelul 4., n prezent limbajul Java ridic! o serie de probleme de securitate ca:

accesarea unor resurse de pe ma"ina pe care ruleaz! un applet Java;

rularea applet-urilor Java f!r! a cere permisiunea utilizatorului

(putndu-se ini#ia un canal ascuns pentru extragerea de date confiden#iale);

alterarea codului Java de c!tre intru"i.

Astfel, s-a constituit o bibliotec! criptografic! API Java Security care include clase pentru
semn!turi digitale, interfe#e pentru gestiunea cheilor "i a certificatelor "i controlul accesului.
Produsele-software destinate pentru dezvoltarea de aplica#ii Java sigure sunt deja
numeroase, putnd fi amintite J/CRYPTO sau J/SSL.
A - 36

Tehnologii Web

n continuare ne vom ocupa de nivelul 3., cel mai important din punctul nostru
de vedere.

5.2 Administrarea sigur a serverelor Web

Serverele Web au ca func#ionalitate de baz! recep#ionarea de cereri anonime de la clien#i
"i furnizarea de informa#ii ntr-o manier! dorit! a fi eficient! "i rapid!.
n ordinea importan#ei, problemele de securitate pot fi mp!r#ite astfel:

un atacator poate exploata bug-urile (deficien#ele) existente ntr-un server

Web sau din scripturi, ob#innd acces neautorizat la fi"iere vitale din sistem (fi"iere
de parole, fi"iere con#innd surse de scripturi executate pe server "i altele)
sau pentru a de#ine controlul total asupra sistemului;

informa#iile confiden#iale stocate pe serverul Web (e.g. baze de date,

aplica#ii etc.) pot fi distribuite unor persoane neautorizate;

punctele vulnerabile necunoscute ale navigatorului pot permite accesarea

de informa#ii private stocate pe ma"ina clientului.

Din p!cate, solu#iile utilizate n mod curent nu pot rezolva toate problemele "i, deseori,
sunt contradictorii. De exemplu, pentru reducerea riscurilor de interceptare, multe
organiza#ii achizi#ioneaz! servere Web considerate sigure, implementnd o pleiad! de
protocoale de criptare, dar aceste servere necesit! certificate de autentificare semnate digital
care trebuiesc actualizate periodic.
Furniz!m n continuare o serie de sfaturi pentru cre"terea nivelului de securitate a unui
server Web:
1. Pe ct posibil, un server Web nu trebuie s! ruleze alte servicii "i s! nu
accepte conexiuni de la distan#!; preferabil ar fi ca daemonul de po"t! electronic!
s! nu fie opera#ional;
2. Serverul Web nu trebuie s! ruleze sub auspicii de superutilizator
(root n Unix). La fel, scripturile CGI nu trebuie executate ca root.
3. Fi"ierele de configurare "i modulele serverului nu trebuie stocate pe o
parti#ie care poate fi exportat!.
4. Permisiunile ata"ate fi"ierelor serverului Web trebuie setate "i monitorizate
cu aten#ie.
5.

Se va limita sau chiar inhiba execu#ia directivelor Server Side Includes (SSI).

6. Scripturile CGI trebuie plasate ntr-un singur director (de obicei cgi-bin)
"i modific!rile lor trebuie monitorizate.
7. n cadrul directorului cgi-bin nu se permite accesul nelimitat. Utilizatorii
locali nu trebuie s! poat! instala, edita, "terge sau chiar vizualiza scripturi sau fi"iere
de configurare.
8. Autorii scripturilor (CGI, PHP sau ASP) nu trebuie s! fac! publice sursele
programelor lor, mai ales dac! nu sunt n variante finale, deoarece ele pot con#ine
puncte vulnerabile neb!nuite sau bug-uri periculoase.

A - 37

Tehnologii Web

9. Scripturile nu trebuie s! poat! fi preluate prin FTP anonim "i nici fi"ierele
de configurare ale serverului FTP nu trebuie accesate via WWW.
10. Se va interzice plasarea de la distan#! pe serverul Web a fi"ierelor de
configurare (e.g. .htaccess n cazul Apache).
11. Fi"ierele jurnal (log-urile) - pentru Apache de obicei stocate n directorul
/var/log/httpd - nu trebuie s! poat! fi accesate de utilizatorii ordinari sau de

intru"i. Hackerii pot altera sau distruge informa#iile din aceste fi"iere, mai ales din
fi"ierul access_log care nregistreaz! toate acces!rile paginilor de pe serverul
Web. Un fragment din acest fi"ier este prezentat n continuare:
netcache.surfree.net.il - - [05/Feb/2001:11:13:57 +0200]
"GET /~busaco/teach/docs/sag/node112.html HTTP/1.0" 304 gw-campus.tuiasi.ro - - [05/Feb/2001:11:10:58 +0200]
"GET /~web/despre.html HTTP/1.0" 200 4666
netcache.surfree.net.il - - [05/Feb/2001:11:10:48 +0200]
"GET /~busaco/teach/docs/sag/node55.html HTTP/1.0" 304 212.3.192.245 - - [05/Feb/2001:11:10:17 +0200]
"GET /~hilcif HTTP/1.1" 404 273
gw-campus.tuiasi.ro - - [05/Feb/2001:11:09:01 +0200]
"GET /~web/web-logo-title.jpg HTTP/1.0" 304 gw-campus.tuiasi.ro - - [05/Feb/2001:11:09:01 +0200]
"GET /~web/tutoriale.html HTTP/1.0" 304 gw-campus.tuiasi.ro - - [05/Feb/2001:11:08:54 +0200]
"GET /~busaco/web-group/wg.css HTTP/1.0" 200 1022
gw-campus.tuiasi.ro - - [05/Feb/2001:11:08:54 +0200]
"GET /~busaco/web-group/index.html HTTP/1.0" 200 14323
gw-campus.tuiasi.ro - - [05/Feb/2001:11:08:39 +0200]
"GET /~web/index.html HTTP/1.0" 304 gw-campus.tuiasi.ro - - [05/Feb/2001:11:08:38 +0200]
"GET /~web/web-bullet.gif HTTP/1.0" 304 gw-campus.tuiasi.ro - - [05/Feb/2001:11:08:34 +0200]
"GET /~web/web-logo-title.jpg HTTP/1.0" 304 gw-campus.tuiasi.ro - - [05/Feb/2001:11:08:34 +0200]
"GET /~web/teme.html HTTP/1.0" 304 netcache.surfree.net.il - - [05/Feb/2001:11:07:45 +0200]
"GET /~busaco/teach/docs/sag/node56.html HTTP/1.0" 304 sinterom.ro - - [05/Feb/2001:11:05:09 +0200]
"GET /~papp/_derived/links.htm HTTP/1.0" 304 -

Pe fiecare linie, sunt stocate informa#ii despre adresa simbolic! sau IP ale
calculatorului client care a formulat o cerere HTTP, numele de login de la distan#!
(dac! nu a fost furnizat se nlocuie"te cu "-"), numele utilizatorului (dac! nu este
disponibil este substituit de "-"), momentul cnd a fost efectuat transferul de date
(ziua, luna, anul, ora, minutul, secunda "i diferen#a de fus orar), comanda HTTP
executat!, codul de stare returnat de server, num!rul de octe#i transfera#i (sau "-").
Formatul acestor informa#ii poate fi modificat de administratorul serverului Web
prin intermediul fi"ierului de configurare (e.g. httpd.conf).
12. Alte m!suri, mai extreme, pot fi:

"tergerea tuturor conturilor care nu sunt necesare;

inhibarea execu#iei sau "tergerea compilatoarelor;

"tergerea programelor utilitare care nu sunt necesare pentru rularea

sistemului de operare sau a serverului Web.

A - 38

Tehnologii Web

5.3 Configurarea accesului la paginile Web

n anumite cazuri, este necesar s! se restric#ioneze accesul la anumite documente,
prin intermediul autentific!rii prin nume de utilizator "i parol! sau n func#ie de adresa
calculatorului clientului Web.
Autentificarea
Pentru a realiza autentificarea utilizatorilor, vom parcurge doi pa"i:
1. Se creeaz! un fi"ier con#innd numele "i parolele utilizatorilor care vor avea
acces la anumite date de pe serverul Web (n particular Apache);
2. Se configureaz! serverul pentru a seta care resurse vor fi protejate "i care
sunt utilizatorii avnd permisiunea acces!rii lor, dup! introducerea unei parole
valide.
Lista utilizatorilor "i parolelor asociate va fi memorat! ntr-o manier! similar! fi"ierului
/etc/passwd din Unix. Din ra#iuni de securitate, fi"ierul con#innd aceast! list! nu va fi
stocat n directoarele compuse din documente HTML, ci la o loca#ie mai sigur!
(e.g. n directoarele /usr/local/etc/httpd sau /etc/httpd). n exemplele
urm!toare, vom numi acest fi"ier users, iar pentru a-l manipula vom folosi comanda
htpasswd prin care vom ad!uga/"terge utilizatorii dori#i.
De"i parolele sunt criptate, fi"ierul de autentificare este unul text, care poate fi u"or
exploatat de persoane r!u-voitoare. R!mne n responsabilitatea administratorului
sistemului s! seteze permisiunile de rigoare asupra fi"ierului "i directorului unde rezid!.
Crearea unui fi"ier de autentificare se realizeaz! prin apelul de mai jos (putem stabili
"i modul de criptare, de exemplu MD5 cu op#iunea -m sau SHA cu op#iunea -s):
htpasswd -c /etc/httpd/users busaco

Aceast! linie ne permite s! asign!m sau s! modific!m parola unui utilizator, parola fiind
solicitat! de la intrarea standard.
Configurarea serverului se poate realiza fie prin fi"ierul httpd.conf, fie prin
.htaccess, indicnd o zon! protejat!, de obicei n func#ie de directoarele dorite a fi
accesate pe baz! de autentificare. Fi"ierul .htaccess va fi stocat n directorul asupra
c!ruia dorim s! modific!m comportamentul implicit al serverului Web (plasarea lui ntr-un
anumit director va avea efect asupra tuturor subdirectoarelor acestuia).
nainte de a modifica maniera de autentificare prin fi"ierul .htaccess, administratorul
serverului Web (n cazul nostru Apache) va specifica n httpd.conf (reg!sit, de cele mai
multe ori, n directorul /etc/httpd/conf) ca autentific!rile s! se realizeze via
.htaccess. Pentru aceasta, vom insera directiva AllowOverride AuthConfig,
iar fi"ierul .htaccess poate avea liniile de mai jos:

A - 39

Tehnologii Web

AuthName "zon! restrictiv!"

AuthType Basic
AuthUserFile /etc/httpd/users
require valid-user

AuthName specific! zona dorit! a fi protejat! "i oricare resurs! din aceast!

zon! va fi accesat! prin intermediul unui nume de utilizator permis "i o parol!
(putem crea mai multe zone partajnd acelea"i nume "i parole).
AuthType desemneaz! metoda de autentificare folosit! de protocolul
HTTP (n prezent se accept! doar Basic, dar n viitor se va standardiza "i metoda,
mai sigur!, Digest; serverul Apache suport! metoda Digest prin ad!ugarea unui

modul special).
AuthUserFile indic! fi"ierul de autentificare generat de htpasswd.

Autentificarea se poate institui "i pe baza grupurilor de utilizatori, folosindu-se

AuthGroupFile (vezi mai jos).

Utilizatorii permi"i vor fi da#i dup! directiva require.

Parametrul valid-user indic! faptul c! orice nume de utilizator prezent
n fi"ierul furnizat de AuthUserFile poate accesa resursele protejate, dar putem
scrie o serie de nume de utilizatori permi"i (e.g. require user busaco
webgroup care va permite accesul numai utilizatorilor busaco sau webgroup,
desigur dup! ce s-au introdus parolele corecte).

De exemplu, pentru a permite accesul n directorul /Web pe baza autentific!rii,

vom plasa fi"ierul .htaccess urm!tor (n /home/httpd/html/Web):
AuthName "Numai pentru autorul cursului"
AuthType Basic
AuthUserFile /etc/httpd/users
require valid-user

Atunci cnd un utilizator va dori s! viziteze o pagin! stocat! n acel director, va trebui s!
furnizeze un nume "i o parol! de acces (dac! numele sau parola nu coincid cu cele din
fi"ierul /etc/httpd/users, autentificarea va e"ua).

A - 40

Tehnologii Web

Autentificarea unui utilizator pentru a accesa o zon# protejat#

Mecanismul general este urm!torul: la primul acces al unei resurse necesitnd

o autentificare, serverul va returna codul 401 ("Unauthorized") "i va include n antetul
HTTP un cmp WWW-Authenticate care va con#ine schema de autentificare ce trebuie
utilizat! (de exemplu, Basic) "i numele zonei protejate (a"a-numitul realm). Navigatorul
va cere utilizatorului introducerea unui nume "i a unei parole "i va realiza o cerere c!tre
server, incluznd "i cmpul Authorization care va con#ine numele schemei de
autentificare (Basic), plus numele "i parola furnizate.
Serverul va realiza verificarea pe baza fi"ierului de configura#ie sau a fi"ierului
.htaccess "i n caz de succes va expedia resursa cerut! browserului. Altfel, va fi trimis

din nou codul 401.

n situa#ia n care autentificarea s-a soldat cu succes, iar utilizatorul va dori s! vizualizeze
o alt! resurs! apar#innd acelea"i zone protejate, atunci serverul va r!spunde cu codul 401
"i navigatorul va retrimite, de fiecare dat!, cmpul Authorization.
Grupuri de autentificare
Atunci cnd trebuie autentifica#i mai mul#i utilizatori, se poate folosi un fi"ier specificnd
autentificarea pe baza unui grup de utilizatori (concept similar grupurilor din Unix).
Iat! un exemplu:

A - 41

Tehnologii Web

require group webgroup admin

require user webadmin

Se va permite accesul oricarui utilizator din grupul webgroup sau admin ori
utilizatorului cu numele webadmin.
Un fi"ier de grup const! din linii desemnnd grupurile "i membrii acestora,
sintaxa general! fiind:
grup: utiliz1 utiliz2 ... utilizN

De exemplu, putem avea:

webgroup: busaco ibanescu elis stanasa stefan straton
admin: iulianv socrate

O linie nu poate avea mai mult de 8 kilobytes lungime.

n .htaccess fi"ierul de grupuri de utilizatori va fi dat prin AuthGroupFile.
De exemplu, .htaccess ar putea con#ine:
AuthName "Numai pentru membrii WebGroup-ului"
AuthType Basic
AuthUserFile /etc/httpd/users
AuthGroupFile /etc/httpd/webgroup
require group webgroup
require user busaco

Dac! se furnizeaz! numele unui utilizator care exist! n cadrul unui grup, dar c!ruia nu i
s-a asociat nici o parol! n fi"ierul de autentificare a utilizatorilor, atunci acel utilizator nu
va avea acces n zona restrictiv!.
n situa#ia n care num!rul de utilizatori cre"te destul de mult, se pot utiliza metode
complementare, precum stocarea informa#iilor de autentificare n baze de date: fi"iere DBM
(modulul mod_auth_dbm), DB (mod_auth_db), mSQL (prin mod_auth_msql) etc.
Autentific!rile se pot realiza via Kerberos prin utilizarea unor module adi#ionale n cadrul
serverului Apache.
Limitarea accesului
Putem restric#iona folosirea metodelor de interogare HTTP prin intermediul sec#iunii
<Limit>:
<Limit GET POST PUT>
require valid-user
</Limit>

Astfel, autentificarea se poate realiza n func#ie de metodele de acces HTTP.

Dac! require nu apare ntre <Limit> "i </Limit>, protec#ia se va aplica la toate
metodele.
n cazul n care dorim s! limit!m restric#ia doar la metoda POST, vom putea scrie
n .htaccess urm!toarele:

A - 42

Tehnologii Web

AuthName "POST restrictiv"

AuthType Basic
AuthUserFile /etc/httpd/users
<Limit POST>
require user elis stanasa socrate
</Limit>

Numai utilizatorii elis, stanasa sau socrate vor putea realiza o cerere prin metoda
POST, al#i utilizatori (neautentifica#i) vor utiliza alte metode (i.e. GET). Aceast! manier!
poate fi adoptat! la restric#ionarea accesului la un script CGI (se permite metoda GET,
dar numai anumi#i utilizatori pot folosi POST).
Restric"ionarea pe baza adresei clientului
Accesul la resurse (directoare sau fi"iere) se poate face pe baza adresei IP sau a
domeniului clientului care a formulat cererea de acces. n acest caz, se poate include ntre
<Limit> "i </Limit> (n .htaccess sau n fi"ierul de configura#ie a serverului Web)
marja de valori ale adreselor IP permise. Cererile de la alte adrese vor fi rejectate.
Un exemplu:
<Limit GET POST PUT>
order deny, allow
deny from all
allow from 193.231.30.0/24 192.168.0.0/16
</Limit>

Directiva deny stabile"te adresele sau domeniile care nu au permisiunea de acces la

resurse, iar allow define"te adresele sau domeniile de la care clien#ii pot accesa resursele
Web. n exemplu, am specificat un set de adrese IP permise. Ordinea de verificare
a restric#iilor de acces este dat! de directiva order.
Pentru a permite accesul clien#ilor Web care nu fac parte din domeniul .infoiasi.ro,
dar care pot proveni din oricare alt domeniu, vom introduce urm!toarele:
<Limit GET>
order allow, deny
allow from all
deny from .infoiasi.ro
</Limit>

Restric"ionarea combinat#
Dup! cum am v!zut mai sus, accesul poate fi restric#ionat "i pe baza adresei IP sau
domeniului calculatorului client. Putem utiliza, n mod combinat, ambele metode.
Dac! dorim ca accesul s! se realizeze fie pe baza domeniilor permise, fie folosind
autentificarea prin nume "i parol!, vom include directiva Satisfy any n fi"ierul
.htaccess sau n sec#iunile <Directory>, <Location> ori <Files> ale fi"ierului de
configurare. Dac! apar ambele metode de restric#ionare (pe baza adreselor clien#ilor "i pe
baza autentific!rii), n mod implicit serverul Web impune s! fie ndeplinite amndou!.

A - 43

Tehnologii Web

Redirect#ri
n unele cazuri ar fi dorit ca, la apari#ia unor erori HTTP, vizitatorii s! fie redirecta#i spre
anumite documente particulare. Implicit, la o eroare, serverul Web va transmite
navigatorului o pagin! descriind codul "i mesajul de eroare. Putem specifica s! fie transmise
alte documente clientului, atunci cnd survin erori de genul 401 ("Unauthorized"),
403 ("Forbidden"), 404 ("Not found") sau 500 ("Server Error"). Pentru aceasta,
se pot include n .htaccess liniile de mai jos:
ErrorDocument 401 /Web/not_auth.html
ErrorDocument 404 /Web/not_found.html

Astfel, atunci cnd un anumit utilizator va cere o resurs! inexistent!, serverul va trimite
documentul not_found.html din directorul /Web.
Putem folosi, n locul unui document local, un anumit URI spre care s! fie redirectat
navigatorul. Aceasta ne permite s! redirect!m automat browserul atunci cnd am mutat
definitiv o resurs! la alt URI (sau n alt director, aflat pe acela"i server). Va trebui s!
introducem n vechiul director un fi"ier .htaccess care s! cuprind! urm!toarele:
<Limit GET POST>
deny from all
ErrorDocument 403 /un_alt_director/index.html
</Limit>

De asemeni, n httpd.conf putem utiliza directiva RedirectPermanent pentru

a redirecta broswerul spre un nou URI:
RedirectPermanent /~catam http://www.infoiasi.ro/~catam/

Pentru crearea alias-urilor, se va folosi directiva alias:

Alias /webgroup /home/others/webgr/html
Alias /webgroup/ /home/others/webgr/html

n exemplul urm!tor putem urm!ri utilizarea alias-urilor mpreun! cu directivele

de restric#ionare a accesului pe baza adreselor IP:
Alias /books /home/ftp/pub/books
<Directory /home/ftp/pub/books>
Options Indexes SymLinksIfOwnerMatch
AllowOverride none
order deny, allow
deny from all
allow from 193.231.30.0/24 192.168.0.0/16
</Directory>

Astfel, resursele din directorul /home/ftp/pub/books vor putea fi accesate prin

intermediul URI-ului http://nume_server/books numai de ma"inile de la adresele IP
specificate n exemplu.

A - 44

Tehnologii Web

"Comunicarea este esen"a !tiin"ei."

(Francis Crick)

Tehnologii Web

1. SGML - Standard Generalized

Markup Language
SGML (Standard Generalized Markup Language) reprezint! un standard
interna#ional pentru definirea unor metode de reprezentare a textelor n format electronic,
independent de dispozitiv "i de sistemul de calcul.

1.1 Scurt istoric

Manuscrisele electronice, la nceputurile informaticii, con#ineau coduri sau macro-uri
care indicau un anumit mod de formatare a documentelor, ntr-o manier! particular!
(codificarea specific! depinznd de caracteristicile hardware sau ale sistemului de operare).
Prin contrast, modul de codificare generic! (ap!rut la sfr"itul anilor '60) utilizeaz! marcatori
(tag-uri) descriptivi pentru aranjarea unui anumit document. Printre sus#in!torii acestei din
urm! metode s-a numarat "i William Tunnicliffe, pre"edinte la GCA
(Graphic Communications Association) care a dorit s! impun! separarea con#inutului
documentelor de formatul lor.
Tot la finalul anilor 1960, Stanley Rice propune ideea unui catalog universal de marcatori
parametriza#i pentru structurarea edit!rii de carte. Norman Scharpf, director al GCA, dezvolt!
aceast! idee "i astfel este creat GenCode, capabil a recunoa"te ce tipuri de coduri sunt
necesare edit!rii fiec!rui tip de document n parte "i modul de includere a documentelor de
dimensiuni reduse n unele mai largi. Acest proiect a jucat ulterior un rol important
n dezvoltarea standardului SGML.
n anul 1969, Charles Goldfarb, conducator al proiectului IBM de cercetare a sistemelor
informa#ionale integrate n domeniul legislativ, mpreun! cu Edward Mosher "i Raymond Lake,
inventeaz! GML (Generalized Markup Language) pentru a permite editarea, formatarea
de texte "i pentru a partaja documente n contextul sistemelor distribuite. GML se baza pe
ideile de codificare generic! ale lui Rice "i Tunnicliffe "i introducea conceptul de
definire formal# a tipurilor de documente prin intermediul unor structuri de elemente
recursive.
P!r#i majore ale GML au fost implementate n sistemele de editare computerizat! pe
mainframe-uri de c!tre IBM "i alte corpora#ii. Goldfarb "i continu! cercetarile: referin#e
ncruci"ate, procesare nl!n#uit!, tipuri de documente concurente, care nu vor apare n
GML, dar vor fi dezvoltate ca p!r#i ale SGML.
n 1978, ANSI (American National Standards Institute) prin comitetul s!u de procesare
a informa#iilor stabile"te un grup care s! se ocupe de crearea de limbaje de programare
pentru prelucrarea electronic! a textelor, grup condus de Charles Card, avndu-l ca membru
pe Norman Scharpf "i apoi cooptndu-l "i pe Goldfarb. Rezultatul a fost SGML-ul, a c!rui
prim! prezentare a fost expus! n 1980. Din anul 1983, GCA l-a putut recomanda ca
standard industrial, sus#inut de Ministerul Ap!r!rii al Statelor Unite (standardul
CALS - Continuous Acquisition and Lifecycle Support).
n 1984, proiectul a fost autorizat de ISO (International Organization for
Standardization). Cercet!rile au continuat n cadrul comitetului ANSI, acum numit X3V1.8,

B-2

Tehnologii Web

condus de William Davis, cu sus#inerea comitetului GenCode al GCA, avndu-l la

conducere pe Sharon Adler de la IBM.
n anul 1985, a fost publicat! propunerea ca SGML s! devin! standard interna#ional "i
astfel a fost fondat, de c!tre Joan Smith, n Marea Britanie, grupul interna#ional
al utilizatorilor de SGML.
Textul final al specifica#iilor SGML a fost aprobat "i publicat n anul 1986, utilizndu-se
un sistem SGML dezvoltat la CERN de Anders Berglund: ISO 8879:
Information Processing - Text and office systems - Standard Generalized Markup
Language (SGML).
Aplica"ii timpurii importante n SGML

Electronic Manuscript Project (EMP)

ntre anii 1983 "i 1987, EMP a fost dezvoltat de AAP (Association of
American Publishers) avndu-se n vedere conceperea asistat! de calculator a
c!r#ilor, ziarelor "i articolelor. Aplica#ia avea printre facilit!#i suportul pentru
interschimbarea manuscriselor ntre autorii lor "i editori "i includerea de
elemente de definire a tabelelor complexe "i a formulelor "tiin#ifice.

Computer-aided Acquisition and Logistic Support (CALS)

Partea de SGML a CALS a fost propus! n februarie 1987 de c!tre
Bruce Lapisto, avnd ca beneficiar Ministerul Ap!r!rii al SUA, devenind n 1988
standard militar (conform MIL-M-28001). Proiecte similare pentru achizi#ia de
date asistat! de calculator "i suport logistic au fost dezvoltate "i de alte #!ri,
precum Suedia, Australia sau Canada.

1.2 Prezentare a SGML

Preciz#ri generale
SGML este un standard interna#ional pentru descrierea de marcaje (markups) ale
textelor electronice. n fapt, SGML reprezint! un meta-limbaj, o descriere formal! a unui
limbaj, n acest caz, un limbaj de adnotare (de formatare) de texte.
Cuvntul marcaj (markup) a fost utilizat ini#ial pentru a descrie anumite adnot!ri, note
marginale n cadrul unui text cu inten#ia de a indica tehnoredactorului cum trebuie listat un
anumit pasaj ori chiar omis. Exemple de acest gen ar fi sublinierea unor anumite cuvinte,
folosirea anumitor simboluri speciale, listarea unor p!r#i de document cu un corp de liter!
(font) specificat etc. Cum formatarea "i imprimarea textelor au fost automatizate, termenul
s-a extins pentru a acoperi toate tipurile de coduri de marcare inserate n textele electronice
cu scopul de a indica modul de formatare, listare ori alte ac#iuni.
Generaliznd, putem defini marcajul sau codarea drept orice ac#iune de a interpreta
explicit o por#iune de text. La un nivel superficial, toate textele sunt codate: elementele de
punctua#ie, folosirea de majuscule, dispunerea enun#urilor n pagin!, chiar "i spa#iile dintre
cuvinte putnd fi privite drept marcaje. Codificarea unui text pentru procesarea
computerizat! este, n principiu, ca o transcriere a unui manuscris din scriptio continua ntr-un
format special, intern, dictat de utilizator prin folosirea, explicit! sau nu, a unor
directive/marcaje care definesc modul de interpretare a con#inutului textului.

B-3

Tehnologii Web

Printr-un limbaj de specificare n#elegem, astfel, un set de conven"ii de marcare utilizate

pentru codificarea textelor. Un limbaj de marcare trebuie s! specifice mul#imea de marcaje
obligatorii, permise, maniera de identificare a marcajelor "i care este semantica fiec!rui
marcaj disponibil (similar procesului de specificare a sintaxei "i semanticii unui limbaj de
programare).
Caracteristici
Exist! trei caracteristici definitorii ale SGML:
marcaje descriptive (descriptive markups) - folosirea de coduri de marcaje care
ofer! nume speciale pentru a clasifica p!r#i de document (de exemplu <para> sau
\end{section} identific! o por#iune dintr-un anumit document, n cazul nostru
nceput de paragraf "i respectiv de sfr"it de sec#iune). Prin contrast, un limbaj de
marcare procedural! define"te o ac#iune de ndeplinit la un moment dat
(e.g. move(left_margin,2cm) ori skip(this_line)).

tipuri de documente - SGML introduce no#iunea de tip de document "i de

defini#ie a tipurilor de documente: document type definition (DTD). Documentele sunt
privite ca avnd tipuri, a"a cum au obiectele procesate de calculatoare. Un tip de
document este definit formal de p!r#ile sale constituente "i de structura lor.
De exemplu, defini#ia unui raport poate consta din titlu "i numele autorului, urmate
de un rezumat "i de o secven#! de mai multe paragrafe. Documentele avnd asociat
un tip, se poate utiliza un parser (analizor) pentru a verifica pentru un text
corectitudinea sa, adic! apartenen#a sa la un tip de document "i respectarea
elementelor specificate n DTD. Astfel, documente de acela"i tip pot fi procesate
ntr-un mod uniform. Programele pot exploata informa#iile ncapsulate n defini#iile
de structur! ale documentelor "i se pot comporta deci ntr-o manier! inteligent!.
De aceea, SGML este luat n considera#ie de cercet!tori din domeniul inteligen#ei
artificiale, n special de cei care se ocup! de procesarea limbajului natural.

independen"a datelor - SGML asigur! translarea documentelor codificate n

acest mod de la o platform! la alta "i de la un mediu software la altul f!r! pierderea
informa#iei. SGML ofer! un mecanism general pentru substitu#ia "irurilor de
caractere (independent de setul de caractere ales: ASCII, EBCDIC sau UniCode) "i
posibilit!#i de extindere a marcajelor.

1.3 Structuri SGML

n continuare vom descrie mecanismul simplu "i consistent prezent n SGML pentru
marcarea "i identificarea unit!#ilor-text structurale (atomi lexicali), cum ar fi sec#iunile,
capitolele, paragrafele.
Elemente
Termenul tehnic utilizat de SGML pentru o unitate-text, v!zut! ca o component!
structural!, este element. Diferite tipuri de elemente au asignate diferite nume.
Fiecare element trebuie specificat explicit ntr-un anumit mod. Standardul ofer! o varietate
de moduri pentru a realiza acest lucru, dar cea mai comun! modalitate este de a insera un
marcaj (tag) la nceputul unui element (tag de start) "i unul la sfr"itul lui (tag de sfr$it).
Perechea tag de nceput - tag de sfr"it este folosit! la ncadrarea fiec!rei instan#e a

B-4

Tehnologii Web

elementului respectiv n cadrul unui text (similar utiliz!rii diferitelor tipuri de paranteze ori
semne de punctua#ie; de exemplu, n Pascal comentariile sunt specificate ntre acolade {},
n Fortran indicii de tablouri sunt insera#i ntre (), n C sec#iunile de nceput "i de sfr"it de
bloc de instruc#iuni se scriu ntre {}, iar n limbajul natural folosim ghilimelele pentru a
delimita un citat). n SGML se utilizeaz! <element> pentru a specifica un tag de nceput
"i </element> pentru un tag de sfr"it, unde element este numele unui element
oarecare.
Exemplu:
<p>
Cum zice "i fratele nostru Che Guevara
n nsemn!rile sale ce
acuma cetesc la opai#:
<quote>Pantofarul musai pantofi s! fac!,
iar revolu#ionarul, revolu#ii</quote>.
</p>
(Mircea C#rt#rescu - "Levantul")

unde <p> "i <quote> denot! nceput de paragraf, respectiv de citat, iar </p> "i
</quote> semnaleaz! sfr"itul unui paragraf, respectiv citat.
Modele
Un element poate fi vid (nu con#ine nimic ntre tag-urile de nceput "i sfr"it) sau poate
con#ine un text ori alte elemente. Mai multe elemente de acela"i tip pot fi imbricate
(a"a cum am v!zut mai sus).
Astfel, rela#iile dintre elementele SGML pot fi v!zute n termeni de:

secven#!

apari#ie

ierarhie

grupare

incluziune

Pentru a ilustra mai detaliat acest aspect, consider!m un model structural foarte simplu.
Presupunem c! dorim s! identific!m o antologie printr-o succesiune de poeme, titlurile lor,
versurile din care sunt compuse. n termenii SGML, antologie reprezint! un tip de
document "i este compus! dintr-o serie de poeme. Fiecare poem ncapsuleaz! un element
titlu (unic) "i cteva apari#ii de elemente strof!, fiecare strof! con#innd un num!r de
elemente vers. Astfel avem:

B-5

Tehnologii Web

<antologie>
<poem><titlu>...
<strof!>
<vers>...
<vers>...
...
</strof!>
<poem>
...
<!-- mai multe poeme... (acesta e un comentariu) -->
</antologie>

La fel, am putea defini acela"i lucru pentru un limbaj de programare:

<prog>
<titlu>...
<decl>
<const>
...
</const>
<var>
...
</var>
<proc>
...
</proc>
<corp>
<instruc#iune>...</instruc#iune>
<instruc#iune>...</instruc#iune>
...
</corp>
</prog>

Evident, exemplele de mai sus nu ne precizeaz! anumite reguli de compunere a unei

antologii, respectiv a unui program. Declara#iile de variabile sau de constante sunt
op#ionale, dar corpul programului este obligatoriu "i acest lucru nu se deduce din cele
prezentate anterior. A"adar avem nevoie de un mecanism de precizare a structurii unui text
"i, desigur, semantica fiec!rui element definit.
Totu"i, chiar "i la acest nivel, documentul de tip antologie poate fi procesat n anumite
moduri, pentru diverse scopuri. Un program de indexare ar putea extrage doar elemente
relevante criteriului ales pentru realizarea indexului: o list! de titluri, o list! a celor mai des
folosite cuvinte dintr-o poezie. Un program de formatare a textului ar putea insera linii
ntre fiecare strof!, iar titlul fiec!rui poem ar putea fi tip!rit ngro"at. Un program mai
ambi#ios pentru analiza lingvistic! asistat! de calculator ar putea determina metrica "i tipul
de rime ale fiec!rui poem. n ceea ce prive"te documentul de tip program, s-ar putea
concepe un analizor care s! verifice corectitudinea sintactic! "i, n func#ie de limbajul dorit,
s! genereze automat construc#iile specifice acelui limbaj (pentru Pascal <prog> ar putea fi
nlocuit de program identificator;, iar n C de void main(void).
Elementul <corp> ar fi begin n varianta Pascal "i "{" n C, iar </corp> ar fi end,
respectiv "}" etc.).

B-6

Tehnologii Web

Definirea structurii unui document

(Document Type Definition)
DTD este exprimat! n SGML ca un set de afirma#ii (instruc#iuni) declarative, utiliznd o
sintax! simpl!. Pentru modelul antologie, am putea scrie defini#ia urm!toare:
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT

antologie
poem
titlu
strof!
vers

0
0
0

(poem+)>
(titlu?, strof!+)>
(#PCDATA)>
(vers+)>
(#PCDATA)>

Fiecare declara#ie reprezint! o defini#ie formal! a unui element. O declara#ie

(meta-element) este delimitat! de semnele "<" "i ">", primul caracter fiind semnul de
exclama#ie, urmat imediat de un cuvnt cheie SGML, care denot! tipul obiectului care va fi
definit. Fiecare defini#ie este compus! din trei p!r#i: un nume sau un grup de nume
(neterminali n jargonul limbajelor formale), dou! caractere specificnd regulile de
minimizare (vezi mai jos) "i un con"inut (neterminali "i terminali). Dup! cum se observ!,
fiecare defini#ie poate fi asimilat! cu o produc#ie. P!r#ile componente ale unei declara#ii
sunt separate de spa#ii albe (spa#iu, tab-uri sau linie nou!).
Reguli de minimizare
Aceste reguli determin! dac! tag-urile de nceput "i de sfr"it de element trebuie s! fie
prezente la fiecare apari#ie a respectivului element. Regulile sunt de fapt perechi de
caractere: primul se refer! la tag-ul de start, iar cel secund la tag-ul de sfr"it. Pot fi prezente
numai caracterele "-" (tag obligatoriu) "i "O" (tag op#ional). Dup! cum se remarc!, doar
elementele antologie "i poem au ambele tag-uri obligatorii. Pentru elementele titlu "i
strof! putem specifica numai tag-ul de start, cel de sf&#acirc;r"it nefiind obligatoriu.
Con"inutul
nchis! ntre paranteze, a treia parte a defini#iei se nume"te model-con"inut, specificnd
ce alte elemente pot apare n cadrul elementului definit. Cuvntul cheie #PCDATA (parsed
character data) indic! posibilitatea apari#iei oric!rui caracter valid. Alte tipuri de date:
CDATA (character data), RCDATA (replaceable character data), SDATA (specific data),
NDATA (non-SGML data), EMPTY (no data - element vid), ANY (orice tip de dat!).
Indicatori de apari"ie
n declara#ia elementului strof! observ!m apari#ia unui semn special, un indicator de
apari#ie, care poate fi:
semnul plus ("+") elementul respectiv poate apare de una sau mai multe ori
(o strof! este compus! din cel pu#in un vers);

semnul asterisc ("*") elementul poate apare de zero, unu sau mai multe ori;

semnul ntrebarii ("?") elementul poate apare de cel mult o dat!

(n exemplul dat, un poem poate avea un unic titlu sau nici unul, dar con#ine m!car
o singur! strof!).

B-7

Tehnologii Web

Conectori
Un model-con#inut poate cuprinde mai multe componente ntr-o anumit! ordine dictat!
de un conector. n exemplul nostru s-a utilizat virgula. Conectorii pot fi:
virgula (",") componentele trebuie s! apar! obligatoriu n ordinea
specificat!;

ampersand ("&") componentele trebuie s! apar!, dar n ordine aleatoare;

bar! vertical! ("|") doar una dintre componente poate apare.

Dac! la definirea elementului poem am fi pus "&" n loc de virgul!, atunci titlul ar fi
putut fi scris la sfr"itul poeziei, dup! strofe.
Observa"ii
1.

Putem reprezenta DTD ca un arbore: r!d!cina este defini#ia elementului

antologie (simbol de start) care are ca fiu poem, iar poem are drept fii
elementele titlu "i strof! "i a"a mai departe.

2. n SGML este permis s! definim modele-con#inut n care fiecare

component! reprezint! o list! de elemente, combinat! cu conectorii de grup. Astfel
am putea avea defini#ii ca:
<!ELEMENT catren 0 0 (vers1, vers2, vers3, vers4)>
<!ELEMENT (vers1|vers2|vers3|vers4)
0 0 (#PCDATA)>

Un catren este compus din patru versuri, fiecare vers con#innd oricare "ir de
caractere (clauza #PCDATA).
Mai complex, s! presupunem c! n cadrul unui poem apare "i un refren care
poate fi prezent doar la nceputul unui poem ori ca o ad!ugire op#ional! dup!
fiecare strof!:
<!ELEMENT refren
<!ELEMENT poem

- - (#PCDATA | vers+)>
- 0 (titlu?,
((vers+) | (refren?, (strof!, refren?)+)))>

Excep"ii
SGML permite ca orice model-con#inut s! fie modificat prin intermediul unei liste de
excep"ii. Excep#iile pot fi:

includeri

Elementele adi#ionale pot fi incluse ntr-un anumit moment n model

(specificate cu semnul plus "+");

excluderi

Anumite elemente nu pot

(prefixate de semnul minus "-").

fi

B-8

incluse

cadrul

modelului

curent

Tehnologii Web

Cnd includerile "i excluderile privesc acela"i element, excluderile sunt prioritare
(conform standardului ISO 8879).
Revenind la tipul de document program, n corpul unui program nu pot apare declara#ii
de constante sau de variabile:
<!ELEMENT (vardecl|constdecl) - - (#PCDATA)>
<!ELEMENT prog
- (titlu?, ((vardecl? | constdecl? | procdecl?), corp)>

n acest caz, corp ar trebui declarat astfel:

<!ELEMENT instruc#iune
<!ELEMENT corp

- - (#PCDATA)>
- - (instruc#iune*) - (vardecl | constdecl)>

Corpul poate con#ine mai multe instruc#iuni (posibil nici una), dar nu poate include
declara#ii de variabile sau de constante.
Structuri concurente
Toate structurile discutate pn! acum au avut o ierarhie simpl!, la fiecare nivel al
arborelui fiecare nod apar#innd unui nod p!rinte.
Urm!rim n continuare s! pagin!m antologiile create. Declararea unei pagini este simpl!:
<!ELEMENT pag

- - ((titlu?, vers+)+)>

Totu"i, o inserare a elementului pag n ierarhia definit! pn! n prezent nu este chiar att
de facil!. Anumite poeme pot fi mai lungi dect o singur! pagin! (s! ne gndim la
"Luceaf!rul" eminescian), pe cnd alte pagini pot con#ine mai multe poeme. De asemeni,
nu putem insera <pag> ntre <antologie> "i <poem> "i nici ntre <poem> "i
<strof!>. Este necesar! o facilitate de a putea defini o ierarhie separat!, cu acelea"i
elemente la baza ei (strofe, versuri "i titluri), dar combinate ntr-o suprastructur! diferit!.
Pentru fiecare arbore de ierarhie vom scrie o defini#ie DTD diferit!:
<!DOCTYPE
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
]>

antologie [
antologie
poem
strof!
(titlu|vers)

0
0

(poem+)>
(titlu?, strof!+)>
(vers+)>
(#PCDATA)>

Numele tipului de document este dat de simbolul de start (elementul r!d!cin!

al ierarhiei).
Mai specific!m "i tipul de antologie paginat! antologpag:
<!DOCTYPE
<!ELEMENT
<!ELEMENT
<!ELEMENT
]>

antologpag [
antologpag
pag
(titlu|vers)

- - (pag+)>
- - ((titlu?, vers+)+)>
- 0 (#PCDATA)>

Avem astfel dou! metode diferite de a explora acela"i text de baz! (fie consider!m
grupuri de strofe "i poeme, fie grupuri de versuri sau titluri). Acela"i text este vizibil din
ambele direc#ii, difer! doar aranjamentul.

B-9

Tehnologii Web

Este necesar s! indic!m c!rei ierarhii apar#ine fiecare element. Aceasta se realizeaz!
incluznd numele tipului de document ntre paranteze imediat nainte de un identificator,
n cadrul tag-urilor de nceput "i de sfr"it: paginile vizibile doar n documente de tip
antologpag trebuie marcate cu <(antologpag)pag> "i </(antologpag)pag>.
Similar, poemele "i strofele apar doar n tipul antologie, deci avem construc#ii ca:
<(antologie)poem> sau <(antologie)strof!>.
n prezent, concuren#a este op#ional! "i nu toate analizoarele SGML sunt obligate
s! o suporte.
Atribute
n contextul SGML, un atribut este utilizat cu scopul de a descrie o anumit! proprietate
a unei apari#ii specifice (particulare) a unui element. De exemplu, un paragraf poate accepta
ca atribut op#ional modul de aliniere (la stnga, la dreapta sau centrat), iar alinierea nu se
realizeaz! dect pentru paragraful n cauz! "i nu are efect la celelalte paragrafe
(context local).
Atributele vor apare doar n cadrul tag-ului de start "i nu n tag-ul de sfr"it
(ar fi redundant).
Un exemplu:
<prog id=P1 stare="n_lucru" versiune="1.0">
...
</prog>

Elementul <prog> are definite trei atribute: un identificator, o stare "i o versiune.
Un procesor SGML poate folosi valorile atributelor pentru anumite ac#iuni specifice.
De pild!, un compilator nu va compila dect programele care au versiunea mai mare de 2.0
"i va activa depanatorul dac! stare are valoarea "depanare" sau va realiza optimiz!ri de
cod n cazul n care stare="definitiv". Identificatorul este folosit uzual pentru o
identificare unic! a fiec!rui element definit n SGML.
Ca "i elementele, atributele se declar! n DTD, folosindu-se o sintax! similar!. Pentru
exemplul de mai sus avem:
<!ATTLIST prog
id
ID
#IMPLIED
stare
(n_lucru|depanare|definitiv) n_lucru
>

Atributele au fost declarate doar pentru elementul <prog>, specificndu-se pentru

fiecare n parte numele, tipurile valorilor acceptate "i valoarea implicit!.
Tipurile valorilor acceptate pot fi urm!toarele:

ID identificator unic pentru fiecare instan#! a elementului

CDATA orice "ir de caractere valide (pot fi incluse "i tag-uri, dar ele nu vor
fi recunoscute de parserul SGML)

ENTITY nume de entitate general! (vezi mai jos)

ENTITIES list! de nume de entit!#i

IDREF pointer (referin#!) la alt element similar

B - 10

Tehnologii Web

IDREFS list! de referin#e

NAME nume generic

NAMES list! de nume

NMTOKEN valoarea atributului este orice "ir de caractere alfanumerice

NMTOKENS list! de token-uri

NUMBER doar numerele sunt acceptate ca valori

NUMBERS list! de numere

NOTATION nume de nota#ie

A treia parte a defini#iei unui atribut specific! modul de interpretare a absen#ei atributului
respectiv. Pot fi utilizate "i aici o serie de cuvinte cheie predefinite:

#REQUIRED valoarea trebuie specificat!

#IMPLIED valoarea poate lipsi

#CURRENT dac! nici o valoare nu apare, ultima valoare dat! va fi folosit!

#CONREF referin#! con#inut

Entit#"i
SGML posed! o metod! flexibil! "i facil! de codificare "i referen#iere a diferitelor p!r#i
ale con#inutului unui document, ntr-un mod portabil. Cuvntul entitate are un sens
special: nseamn! o parte de text care are asignat un nume (o entitate poate fi un "ir de
caractere ori con#inutul unui fi"ier text).
<!ENTITY pg "Pagina Facult!#ii de Informatic!">

Se define"te o entitate cu numele pg "i a c!rei valoare este "irul "Pagina Faculta#ii de
Informatic!".
O entitate sistem se declar! astfel:
<!ENTITY CapDoi SYSTEM "sgml.txt">

valoarea ei fiind con#inutul fi"ierului text specificat.

Din moment ce o entitate este definit!, ea poate fi invocat! oriunde n document,
precedat! de "&" (sau de "%") "i urmat! de punct-virgul!.
De exemplu, textul "Acest proiect se ocup! de &pg;!" (similar deci
macrosubstitu#iei realizate de preprocesorul C).
O alt! utilizare a acestei facilit!#i ar fi generarea unor caractere din codul extins pentru
alfabete ale unor limbi ca romna, chineza sau greaca. De exemplu, vom scrie &acirc;
pentru a obtine "" sau &copy; pentru "".
SGML ofer! "i posibilitatea de a referi caracterele prin valorile lor numerice: referin"e
caracter. O referin#! caracter ncepe cu "&#" "i se sfr"e"te cu ";" desigur (ca exemplu
"&#107;").
O form! special! de entit!#i, numite entit#"i parametru, pot fi utilizate n declara#iile
SGML. Aceste entit!#i au urm!toarele caracteristici speciale:
B - 11

Tehnologii Web

entit!#ile parametru se folosesc numai n cadrul declara#iilor de marcare

entit!#ile parametru sunt delimitate de caracterele "%" "i ";" n loc de "&" "i

SGML;
";".

Declararea entit!#ilor parametru are aceea"i form! ca "i cea a entit!#ilor generale, dar
ntre cuvntul cheie ENTITY, procent "i numele entit!#ii trebuie s! apar! obligatoriu spa#ii
albe.
Exemple:
<!ENTITY % doc.prose 'INCLUDE'>
<!ENTITY % doc.extens SYSTEM 'doc.dtd'>
<!ENTITY % bloc "deal | ora" | fluviu">
<!ELEMENT (%bloc;) - O (#PCDATA)>
<!ATTLIST (%bloc;)
tip
CDATA
#REQUIRED
>

Anumite entit!#i pot fi publice, n general nregistrate de ISO sau alte organiza#ii:
<!ENTITY %ISOpub PUBLIC "ISO 8879-1986//ENTITIES Publishing//EN">
<!ENTITY %IBMchars PUBLIC "+//IBM//ENTITIES IBM PC Character Set//EN">

Marca "+//" semnific! faptul c! entitatea sau resursa folosit! este nregistrat!.
Entit!#ile nenregistrate au "-//" n componen#!.
Sec"iuni de marcare
Ocazional, anumite p!r#i ale documentului necesit! un tratament special din partea
parserului SGML, prin intermediul cuvintelor cheie de mai jos:
INCLUDE sec#iunea marcat! cu acest specificator va fi inclus! n
document "i procesat! normal;

IGNORE sec#iunea va fi omis! complet (exclus! din document);

CDATA sec#iunea poate con#ine "iruri de caractere, dar construc#iile SGML

"i entit!#ile nu vor fi recunoscute de analizor;

RCDATA ca mai sus, ns! referin#ele la entit!#i vor fi recunoscute "i

expandate;

TEMP sec#iunea inclus! este o parte temporar! a documentului care

ulterior ar putea dispare.

Un exemplu:
n anumite cazuri, procentul de calculatoare performante
poate ajunge pn! la 90%.
<![ IGNORE [
n anii 1990, situa#ia s-a schimbat.
]]>

B - 12

Tehnologii Web

1.4 Declaraia SGML

ntreaga defini#ie a structurii unui document trebuie scris! conform unui standard
SGML. Pentru aceasta, se folose"te declara#ia SGML care ofer! o serie de indica#ii
sistemului de procesare: seturile de caractere utilizate, diverse informa#ii de control,
limit!ri etc.
Astfel, meta-elementul SGML poate con#ine:
"standard" - standardul SGML folosit (de exemplu "ISO 8879:1986");

CHARSET - include setul de caractere de baz! (BASESET) "i setul de

caractere de descriere (DESCSET);

CAPACITY - capacitatea memoriei utilizate n analizarea documentelor;

SCOPE - scopul sintaxei, poate fi DOCUMENT sau INSTANCE;

SYNTAX - maniera de procesare sintactic!: SHUNCHAR CONTROLS

(caractere care nu sunt suportate), BASESET "i DESCSET (seturile de caractere
descrise mai sus), NAMES (regulile de numire a tag-urilor), NAMECASE (specific!
dac! literele mici sunt echivalente cu cele mari), DELIM (posibilit!#i de schimbare a
delimitatorilor standard), QUANTITY (diverse limite pentru lungimea numelor

elementelor);

FEATURES - define"te diverse facilit!#i de procesare;

APPINFO - specific! informa#ii despre sistemul de procesare.

Declara#ia <!SGML...> nu este ntotdeauna necesar! proces!rii defini#iilor tipurilor de

documente create.
Exemplu
Furniz!m n continuare un fragment din declara#ia SGML care nso#e"te
specifica#ia HTML 4.01:
<!SGML "ISO 8879:1986"
-SGML Declaration for HyperText Markup Language version HTML 4.01
With support for the first 17 planes of ISO 10646 and
increased limits for tag and literal lengths etc.
-CHARSET
BASESET

CAPACITY

SCOPE
SYNTAX

"ISO Registration Number 177//CHARSET

ISO/IEC 10646-1:1993 UCS-4 with
implementation level 3//ESC 2/5 2/15 4/6"

SGMLREF
TOTALCAP
GRPCAP
ENTCAP

150000
150000
150000

DOCUMENT
BASESET

"ISO 646IRV:1991//CHARSET

B - 13

Tehnologii Web

DESCSET

International Reference Version

(IRV)//ESC 2/8 4/2"
0 128 0

FUNCTION
RE
RS
SPACE
TAB SEPCHAR
NAMING

DELIM
NAMES

13
10
32
9

LCNMSTRT
UCNMSTRT
LCNMCHAR
UCNMCHAR
NAMECASE

""
""
".-_:"
".-_:"
GENERAL YES
ENTITY NO
GENERAL SGMLREF
SHORTREF SGMLREF
SGMLREF

FEATURES
MINIMIZE
DATATAG NO
OMITTAG YES
RANK
NO
SHORTTAG YES
LINK
SIMPLE
NO
IMPLICIT NO
EXPLICIT NO
OTHER
CONCUR
NO
SUBDOC
NO
FORMAL
YES
APPINFO NONE
>

B - 14

Tehnologii Web

1.5 Proiecte i aplicaii

apl icaii SGML
O varietate de produse-program este disponibil! pentru asisten#a cre!rii, valid!rii "i
proces!rii documentelor SGML. Ca tipuri de utilitare putem enumera:
parsere (analizoare) SGML - decid dac! un document scris n SGML este
corect, pe baza defini#iei tipului de document (DTD), la ie"ire furniznd r!spunsul
da/nu "i chiar o nou! versiune a documentului;

editoare structurale - sunt un fel de procesoare de texte inteligente,

utiliznd informa#iile extrase din DTD pentru a interoga utilizatorul care elemente
sunt necesare la diverse puncte ale documentului;

formatatoare - nlocuiesc tag-urile, producnd o form! gata de listare

a documentului;

sisteme de gestiune a bazelor de date orientate-text - utilizeaz! indec"i

pe baza c!rora extrag anumite informa#ii din texte (folositoare pentru realizarea
de glosare, sumare etc.);

sisteme hipertext - extind metodele de manipulare a textelor suportnd

leg!turi de asociere ntre diverse p!r#i ale documentelor, inserare de obiecte
multimedia (figuri, sunet, film) "i altele; navigatoarele Web actuale sunt un exemplu
de sisteme hipertext evoluate.

Prezent!m o serie de proiecte "i de aplica#ii privind SGML-ul:

A. Proiecte de cercetare

HyTime: ISO 10744 Hypermedia/Time-based Structured Language

SMGL (Standard Music Description Language)

Metafile for Interactive Documents

IBM Information Development Document Type

ELVIS Sehgeschedigte

Elektronisches

Literaturverzeichnis-Informatik

MIME-SGML (Multipurpose Internet Mail Extensions)

eXtensible Markup Language (XML)

OpenTag Initiative

Text Encoding Initiative (TEI)

fr

Project Opera (Outils pour les documents electroniques, recherche

et applications)

European Corpus Initiative (ECI)

Lingua Parallel Concordancing Project

B - 15

Tehnologii Web

B. Aplica"ii

Analizoare
SP: James Clark's New SGML Parser Toolkit (disponibil
pentru DOS "i Windows)

YASP: Pierre Richard's Yorktown Advanced SGML Parser

YAO (Yuan-Ze-Almaden-Oslo project) Parser Materials

Editoare/vizualizatoare

SGML

PSGML - editor Emacs pentru scrierea de documente

HoTMetaL - editor HTML conceput de SoftQuad, disponibil

pentru Unix, Windows etc.

Syntext - vizualizator al gramaticii SGML

PerlSGML - colec#ie de programe "i biblioteci Perl necesare

proces!rii documentelor SGML: dtd2html (utilitar de
documentare "i navigare prin DTD), dtddiff (utilitar de listare
a modific!rilor survenite n DTD), dtdtree (generator al arborilor
elementelor SGML) "i altele

SARA (SGML-Aware Retrieval Application) - sistem

client/server care permite existen#a unei baze de date de texte
incluznd marcaje SGML spre a fi partajat! "i interogat! de clien#i
afla#i la distan#!. Sistemul a fost dezvoltat la Universitatea Oxford "i
prevede un limbaj de interogare de nivel nalt CQL (Corpus Query
Language)

sgrep - program de c!utare n documente structurate (fi"ierele

text structurate pot fi fi"iere SGML, HTML, TeX, C), conceput de
Pekka Kilpelainen "i Jani Jeakkola, disponibil n medii Unix

Convertoare SGML

Rainbow - limbaj de interschimbare a formatelor pentru

procesoarele de texte, avnd ca suport SGML. n prezent
recunoa"te formate ca MIF, RTF, InterLeaf "i Ventura

CoST (Copenhagen SGML Tool, Unix) - mediu de

programare a aplica#iilor, controlat de SGML, scris de Klaus Harbo
"i ulterior de Joe English

NSL (Normalised SGML Library) - bibliotec! de func#ii de

convertire a documentelor SGML

Utilitare de formatare
format - pachet de formatare a documentelor SGML n
LaTeX, scris de Thomas Gordon

SGML-Tools - pachet de formatare de texte bazat pe SGML

care permite producerea de documente LaTeX, HTML, LyX, RTF

B - 16

Tehnologii Web

"i ASCII dintr-o singur! surs! (multiple tag-uri specifice fiec!rui

format n parte pot coexista n cadrul fi"ierului de intrare),
disponibil sub Unix (n particular Linux).

DynaText - un sistem complex de management !i validare a documentelor SGML

B - 17

Tehnologii Web

2. XML - eXtensible Markup Language

Descendent al SGML, XML (eXtensible Markup Language) este un meta-limbaj
utilizat n activitatea de marcare structural! a documentelor, a c!rui specifica#ie a fost
dezvoltat! ncepnd cu 1996 n cadrul Consor#iului Web, de un grup de cercetare condus
de Jon Bosak de la Sun Microsystems, la care au aderat ulterior o serie de grupuri de exper#i
din comunit!#ile academice (Text Encoding Initiative, NCSA, James Clark) "i industriale
(SUN, IBM, Netscape, Oracle, Adobe etc.). Prima versiune de XML a fost standardizat! n
anul 1998, fiind revizuit! recent, n luna octombrie 2000.
Scopurile limbajului au fost cele legate de utilizarea lui n Internet, suportnd o varietate
de aplica#ii, dar p!strnd compatibilitatea cu SGML. XML trebuie s! asigure o prelucrare
facil! a documentelor, n termeni conci"i "i clari, num!rul de op#iuni facultative fiind redus
la minim, ideal nul. Documentele XML trebuie s! fie u"or de conceput "i de n#eles de c!tre
un cititor uman.
n fapt, XML este compus dintr-o familie de limbaje menite a adapta conceptele curente
de publicare a documentelor la Internet. XML este compus din:
XML (eXtensible Markup Language) - subset al specifica#iei SGML,
conceput pentru o implementare mai u"oar!, avnd n ultima perioad! o dezvoltare
extraordinar!;

XLL (eXtensible Linking Language) - set al mecanismelor hipertext

bazate pe HyTime "i Text Encoding Initiative, concretizat n dou! componente
majore:

XLink obiectele Internet;

conceput

pentru

descrierea

leg!turilor

dintre

XPointer - compus dintr-o serie de termeni de localizare relativi

la alte loca#ii;

XSL (eXtensible Stylesheet Language) - limbaj standard al foilor de stil,

ca subset al DSSSL, permi#nd ata"area de semantici elementelor XML "i
transformarea documentelor XML n alt tip de documente (XML, HTML,
MathML etc.);

XUA (XML User Agent) - direc#ie de standardizare a navigatoarelor XML.

2.1 Trsturi principale

pr incipale ale XML
1.

Subset simplificat al SGML

foarte puternic, dar u"or de implementat

f!r! limite n ceea ce prive"te complexitatea structurilor care pot fi

definite

ndeajuns de compact pentru a fi suportat de navigatoarele Web

B - 18

Tehnologii Web

2.

3.

Ofer! suport pentru uzul interna#ional

marcajele "i con#inutul pot fi reprezentate n Unicode

uneltele de dezvoltare XML pot suporta orice codific!ri

Metalimbaj

conceput pentru a suporta definirea unui num!r nelimitat de limbaje

specializate, oferind suport de extinderi

portabilitate

2.2 Deosebiri eseniale fa de SGML

Orice document XML trebuie s! nceap! cu meta-elementul <?xml ...>.

n XML nu trebuiesc realizate defini#ii ale tipului de document (DTD)

obligatorii.

Un element vid (declarat prin EMPTY) are o sintax! modificat!:

<element />. Tag-urile de sfr"it sunt obligatorii.

Numele de elemente "i de atribute sunt case-sensitive (<tag> este diferit

de <Tag> sau de <TAG>).

n XML pot fi specificate anumite instruc"iuni de procesare (processing instructions)

de forma <?nume informa#ii ?>, unde nume, denumit #int!, identific!
instruc#iunile de procesare pentru o aplica#ie.

Incluziunile "i excluziunile nu sunt permise, la fel parametrii de minimizare

n declara#iile de elemente.

Numele ncepnd cu xml ori XML sunt rezervate. XML predefine"te

semantica atributelor xml:space "i xml:lang (vezi mai jos).

2.3 Specificaia tehnic a limbajului

Terminologie
Pentru a descrie elementele care #in de un document XML, n cele ce urmeaz! s-au
folosit urm!torii termeni:

poate
Documentele pot s! se conformeze specifica#iei, dar nu trebuie s! se
comporte conform descrierii ac#iunii din specifica#ie.

trebuie
Documentele trebuie s! se comporte conform descrierii altfel se va semnala
eroare.

B - 19

Tehnologii Web

eroare
O nc!lcare a unor reguli din specifica#ie. Un procesor XML poate ignora
aceste erori.

eroare fatal#
O violare a unor reguli din specifica#ie. Dup! ntlnirea unei astfel de erori,
procesorul poate continua c!utarea unor astfel de erori "i poate s! le raporteze
aplica#iei. Dup! descoperirea unei erori fatale este recomandat ca procesorul
s! nu mai continue procesarea normal!.

constrngere de validitate
O regul! care se aplic! tuturor documentelor XML valide. nc!lcarea
acestor constrngeri de validitate reprezint! eroare "i trebuie, la cererea
utilizatorului, s! fie raportate de c!tre procesoarele XML care realizeaz!
valid!ri.

constrngerile pentru documentele bine formatate

O regul! care se aplic! tuturor documentelor XML bine formatate (valide).
Violarea acestor constrngeri reprezint! eroare fatal!.

potrivire
Dou! "iruri de numere care sunt comparate trebuie s! fie identice.
La cererea utilizatorului, procesoarele pot normaliza anumite caractere la
anumite forme canonice.

pentru compatibilitate
O facilitate XML inclus! doar pentru a asigura faptul c! XML-ul r!mne
compatibil cu SGML-ul.

pentru interoperabilitate
O recomandare inclus! pentru a cre"te "ansele ca documentele XML
s! poat! fi procesate de procesoarele SGML existente.

Reprezentarea documentelor
Un document XML este format din marcaje "i date caracter. Un marcaj este un "ir de
caractere delimitat de caracterul "<" la nceput "i de caracterul ">" la sfr"it. Modul de
definire a marcajelor n XML este asem!n!tor celui din SGML.
n XML marcajele nu sunt folosite pentru afi"area textelor "i imaginilor sau a altor
elemente, ci sunt utilizate pentru a pune n eviden#! (semi-)structura anumitor date.
Astfel, un fragment de document XML valid poate fi:
<ecua#ie>
<titlu>Ecua#ia de gradul 1</titlu>
<coeficient grad = "1">7</coeficient>
<coeficient grad = "0">4</coeficient>
</ecua#ie>

B - 20

Tehnologii Web

Sec"iunile CDATA
Sec#iunile CDATA pot fi scrise oriunde pot apare "i datele de tip caracter (n exemplul de
mai sus "Ecua#ia de gradul 1"). Ele sunt utilizate pentru a include blocuri de text con#innd
caractere care altfel ar fi recunoscute ca marcaje. Sec#iunile CDATA ncep cu "irul
"<![CDATA[" "i se termin! cu simbolurile "]]>".
n interiorul sec#iunilor CDATA nu trebuie s! apar! "irul "]]" f!r! s! fie urmat de ">".
Sec#iunile CDATA nu pot fi incluse unele n altele.
Exemple corecte:
<![CDATA[
Aceasta este o sec#iune CDATA
]]>
<![CDATA[
<marcaj>text</marcaj>
]]>

Exemple gre"ite:
<![CDATA[[
text text
]]
text
]]>
<![CDATA[[
text
<![CDATA[
text
]]>
text
]]>

Declara"ia XML
Documentele XML pot "i ar trebui s! nceap! cu o declara#ie XML care specific!
versiunea limbajului XML utilizat. Declara#ia XML ncepe cu "<?xml" "i se termin! cu
caracterele "?>". n cazul n care exist! n document declara#ia XML, aceasta trebuie s! fie
primul element al documentului. Declara#ia nu poate fi precedat! de nici un alt element "i
trebuie s! fie unic!. Exist! trei atribute care pot apare n declara#ia XML:

version

Reprezint! una dintre versiunile curente ale XML. Versiunea actual! 1.0 este
singura de pn! acum "i deci declara#ia trebuie s! arate astfel:
<?xml version="1.0" ?>.
Orice alt! versiune specificat! nu exist! "i folosirea ei genereaz! eroare.
n XML este interzis! utilizarea unuia sau mai multor spa#ii ntre caracterul de
nceput al tag-ului "i numele tag-ului.
Documentele n a c!ror declara#ie exist! specificat! versiunea trebuie s! se
conformeze acestei versiuni, altfel procesoarele XML vor genera eroare.
Conformarea cu versiunea specificat! nseamn! utilizarea construc#iilor

B - 21

Tehnologii Web

definite n acea versiune sau n versiunile precedente, dar numai n cazul cnd
este specificat acest lucru.

encoding

Atributul poate lua valorile "UTF-8", "UTF-16","ISO-10646-UCS-2" sau

orice alte valori care reprezint! submul#imi ale setului Unicode. Dac! se
folose"te denumirea unei mul#imi care nu este definit! de ISO, atunci trebuie
explicit facut! referire la adresa la care se afl! definit acel set de caractere.
Dac! se ntlne"te n text o entitate care nu poate fi procesat! din cauza
definirii gre"ite a mul#imii de caractere, atunci se genereaz! eroare fatal!.
Setul de caractere ASCII este o submul#ime a setului UTF-8. Exemple de
declarare a codific!rii:
<?xml version="1.0" encoding="UTF-8" ?>
<?xml encoding="EUC-JP" ?>

n XML num!rul de spa#ii dintre atribute sau diferite date caracter nu are
nici o importan#!, spa#iile fiind eviden#iate doar n cazul unei specifica#ii
speciale a utilizatorului.

standalone

Atributul poate lua valorile "yes" sau "no". n documentele XML pot exista
anumite referin#e spre alte documente care s! con#in! defini#ii ale unor
marcaje, atribute sau entit!#i din document. Cnd valoarea este "yes" atunci nu
trebuie s! existe referin#e spre alte documente. Dac! valoarea este "no" atunci
este posibil s! existe referin#e spre alte documente, dar dac! nu exist! atunci
folosirea atributului nu are sens. Implicit se consider! c! un document n a
c!rui declara#ie nu este specificat atributul standalone nu con#ine referin#e
externe.
Definirea tipului de document
Ca "i n cazul SGML, tipul unui document XML reprezint! modul n care vor fi
specificate informa#iile n acel document. Acest lucru se realizeaz! prin intermediul DTDului (Document Type Definition), iar acest DTD poate fi intern sau extern.
Documentele XML pot avea un DTD sau DTD-ul poate lipsi. Dac! exist! un DTD
intern sau extern, atunci autorul documentului trebuie s! se conformeze acestui DTD,
iar n cazul n care lipsesc ambele, atunci utilizatorul poate construi documente respectnd
un num!r minim de constrngeri.
DTD-ul intern se declar! imediat dup! declara#ia XML sau, dac! aceast! declara#ie nu
exist!, el va fi primul element exceptnd comentariile, spa#iile sau instruc#iunile de
procesare. DTD-ul intern se declar! utiliznd cuvntul cheie DOCTYPE n modul urm!tor:
<!DOCTYPE element_r!d!cin! [
declara#ie de elemente
declara#ie de atribute
declara#ie de entit!#i
declara#ie de instruc#iuni de procesare
declara#ie de nota#ii
]>

B - 22

Tehnologii Web

La fel ca la SGML, elementul r!d!cin! reprezint! primul tag din mul#imea tagurilor
definite de utilizator. El poate apare o singur! dat! n document "i nu trebuie s! se afle n
interiorul altui tag. El trebuie s! existe indiferent dac! exist! specificat un DTD sau nu.
Altfel spus, orice document trebuie s! con#in! un element r!d!cin! care satisface
constrngerile de mai sus.
DTD-ul extern este definit ntr-un alt fi"ier text care trebuie s! se afle la o adres!
specificat!. Declara#ia este asem!n!toare, dar intervin cuvintele cheie SYSTEM sau PUBLIC:
<!DOCTYPE cursuri
SYSTEM "http://www.infoiasi.ro/cursuri.dtd">
<!DOCTYPE cursuri
PUBLIC "cursuri" "http://www.infoiasi.ro/cursuri.dtd">

Fi"ierul "cursuri.dtd" aflat la adresa specificat! n declara#ie con#ine defini#iile

elementelor care vor apare n document. Elementul cursuri trebuie s! apar! n DTD-ul
specificat. Declara#ia SYSTEM specific! faptul c! DTD-ul se afl! la acea adres!, iar PUBLIC
nseamn! c! va fi generat un fi"ier care va con#ine acel DTD.
Instruc"iunile de procesare
Instruc#iunile de procesare sunt un tip special de marcaj care con#in informa#ii despre
anumite aplica#ii ce urmeaz! a fi executate. Instruc#iunile de procesare ncep cu "<?" urmat
de numele aplica#iei "i de o specificare a unor elemente care #in de acea aplica#ie.
Numele aplica#iei din instruc#iunea de procesare trebuie s! fie diferit de xml, XML, xML
sau orice alt mod de a scrie cu litere mari sau mici cuvntul xml. Declara#ia XML este tot o
instruc#iune de procesare, iar cuvintele de acest tip sunt rezervate, deoarece urmeaz! a fi
standardizate ntr-o versiune ulterioar!.
Iat! un exemplu:
<?wordperfect document="manual.wp" ?>

Elementele
n XML (ca "i n SGML) elementele se definesc folosind construc#ia <!ELEMENT.
Este interzis! apari#ia a unuia sau mai multor spa#ii ntre delimitatorul "<!" "i cuvntul
cheie ELEMENT. Prin marcaj vom n#elege acela"i lucru ca "i prin element.
n XML fiecare marcaj trebuie s! fie urmat de un marcaj de sfr"it. Dac! nu se ntmpl!
acest lucru, atunci se semnaleaz! eroare "i documentul nu va fi afi"at. Textul care urmeaz!
unui marcaj nu trebuie s! con#in! caracterele "<" "i ">" deoarece acestea sunt rezervate.
Un element n XML poate fi definit n mai multe maniere:

Elemente vide
Definirea elementului vid se realizeaz! utiliznd cuvntul cheie EMPTY:

<!ELEMENT img EMPTY>

Un element vid nu este urmat de text, iar n document o construc#ie care

folose"te acest tip de element poate apare n dou! forme:

B - 23

Tehnologii Web

<img></img>
<img />

n primul exemplu prezentat, elementul vid a fost utilizat ca oricare alt

element XML, iar n al doilea exemplu este ilustrat un sfr"it de tag special
care se poate folosi numai n cazul elementelor vide. Oricare dintre cele dou!
apari#ii este considerat! corect!.

Elemente ANY
Elementele ANY sunt elemente care pot avea orice con#inut:

<!ELEMENT univers ANY>

Acest mod de definire este util atunci cnd scriem DTD-ul unui document
"i nc! nu cunoa"tem care va fi con#inutul acelui element. Un element definit
astfel poate poseda oricte atribute, poate fi de tip #PCDATA sau poate
fi element vid. Acest element este asem!n!tor unei clase abstracte care va fi
ulterior definit!.

Elemente cu con"inut eterogen

Con#inutul eterogen al unui element reprezint! o succesiune de texte
#PCDATA "i elemente care vor fi definite asem!n!tor elementului cu con#inut

eterogen pe care convenim s! l numim p!rinte. Elementele care sunt

sub-elemente ale unui element p!rinte vor fi denumite copii.

Un exemplu, corect procesat att de un analizor SGML, ct "i de

unul XML:
<?xml version = "1.0" ?>
<!-- definirea tipului de document -->
<!DOCTYPE persoan! [
<!ELEMENT persoan! (#PCDATA | nume | prenume | informa#ii)*>
<!ELEMENT nume (#PCDATA)>
<!ELEMENT prenume (#PCDATA)>
<!ELEMENT informa#ii (#PCDATA | vrsta | ocupa#ia)*>
]>
<!-- documentul propriu-zis -->
<persoan!>Studentul 1
<nume>Eugen</nume>
<!-- Pot folosi comentarii, este corect -->
<prenume>Eremia</prenume>
<vrsta>21</vrsta>
<!-- Nu se specific! ocupa#ia -->
Acestea au fost datele personale
</persoan!>

Elemente cu mai multe nivele

Elementele de acest gen ofer! cel mai complex mod de a specifica
informa#iile. n acest caz elementele din con#inut sunt separate prin bar!
vertical! sau prin virgul!. Un element poate fi o secven#! sau o alternativ! de
elemente copii. Alternativa de alegere a elementelor copii este specificat! prin
bara vertical!, iar secven#a prin virgul!, exact ca la SGML. Desigur, pot fi
specifica#i "i indicatorii de apari#ie prin intermediul caracterelor speciale
"*", "+" "i "?".
B - 24

Tehnologii Web

Cnd un element are un con#inut eterogen, atunci n defini#ia sa nu poate

apare cuvntul cheie #PCDATA, dar poate exista n oricare alt element din
con#inut. n con#inutul unui element de acest tip nu poate fi specificat de mai
multe ori un alt element sau o alt! secven#! sau alternativ! de elemente.
O secven#! nu poate fi continuat! de o alternativ! sau invers.
Exemplele urm!toare sunt gre"ite:
<!ELEMENT persoan! (nume, prenume | vrsta)>
<!ELEMENT oper!
(roman | basm, subiect, personaj | caracter)>

n cazul n care o alternativ! trebuie continuat! de o secven#! sau invers,

secven#a respectiv alternativa trebuie ncadrat! de paranteze. Exemplele de
mai sus devin corecte astfel:
<!ELEMENT persoan! (nume, (prenume | vrsta))>
<!ELEMENT opera
((roman | basm), subiect,
(personaj | caracter))>

Dac! un element con#ine n defini#ia sa copii, atunci trebuie defini#i "i copiii
(ace"ti copii pot fi de orice tip). Num!rul spa#iilor din defini#ie poate fi orict
de mare, dar procesoarele nu vor recunoa"te dect unul singur, exact ca la
HTML. n cazul n care un copil este urmat de unul dintre caracterele
"?", "*" sau "+", atunci ntre copil "i caracter nu poate fi folosit spa#iul.
Atributele
n XML (ca "i n SGML) atributele unui element se declar! utiliznd cuvntul cheie
ATTLIST. Nu trebuie s! existe spa#ii ntre <! "i ATTLIST. Dac! exist! dou! declara#ii ale

aceluia"i atribut, atunci prima declara#ie este luat! n considerare, iar celelalte sunt ignorate.
Mul#imea tipurilor de atributele n XML este aceea"i cu cea din SGML, iar pentru
specificarea modului de apari#ie a atributelor se folosesc cuvintele cheie #REQUIRED
(apari#ie obligatorie), #IMPLIED (apari#ie op#ional!), #FIXED (apari#ie op#ional!,
dar atunci cnd apare, valoarea atributului trebuie s! fie cea specificat! n cadrul DTD-ului).
Exist! predefinite o serie de atribute pentru a specifica regulile spa#iilor albe "i identificarea
limbii n care se scrie un anumit document sau fragment de document XML.
Regula spa"iilor albe
n editarea documentelor, este uneori necesar! apari#ia "spa#iilor albe" (spa#ii, tab-uri,
linii vide). Anumite spa#ii albe nu trebuie incluse n versiunea final! a documentului,
pe cnd altele sunt obligatorii (de exemplu, n codul surs! sau n cazul produc#iilor lirice).
Un atribut special xml:space poate fi inserat n documente pentru a specifica faptul c!,
n cadrul elementului n care apare acest atribut, spa#iile albe s! fie tratate n mod
semnificativ. Valorile acestuia pot fi "default" sau "preserve".
<!ATTLIST poem xml:space (default|preserve) 'preserve'>

Identificarea limbajului
Atributul special xml:lang poate fi inclus n documente pentru a defini limbajul utilizat
n con#inutul elementelor "i valorilor atributelor unui element. Un exemplu:

B - 25

Tehnologii Web

<p xml:lang="en-GB">What colour is it?</p>

<p xml:lang="en-US">What color is it?</p>
<quote author="Sainte-Beuve" xml:lang="fr">
Il n'y a que de vivre; on voit tout et le contraire de tout.
</quote>

Entit#"i
Entit!#ile sunt utilizate pentru scrierea unor documente de lungimi mai scurte "i pentru
rapiditatea redact!rii documentelor. Entit!#ile se clasific! n dou! tipuri: entit!#i generale "i
entit!#i cu parametri. Entit!#ile generale se mpart la rndul lor n entit!#i interne analizate,
entit!#i externe analizate "i entit!#i externe neanalizate.
Ca "i n SGML, entit!#ile sunt definite prin construc#ia <!ENTITY.

Entit!"i interne analizate

Entit!#ile interne analizate se refer! n general la un text pe care trebuie s! l
expandeze procesorul XML atunci cnd ntlne"te o referire la acea entitate.
Un exemplu, n care avem definite urm!toarele:

<!ELEMENT pictor (#PCDATA)>

<!ENTITY sdali "Salvador Felipe Jacinto Dali i Domenech">

Entitatea sdali va fi utilizat! astfel:

<pictor>&sdali;</pictor>

Valoarea unei entit!#i care va fi expandat! de procesorul XML nu trebuie

s! con#in! caracterele "&", ";" sau apostrof "i poate face referin#e la alte
entit!#i.

Entit!"i externe analizate

Entit!#ile externe analizate se refer! la un text care trebuie expandat,
diferen#a fa#! de cele anterioare fiind aceea c! entit!#ile externe reprezint!
referin#e care pot fi utilizate de mai multe documente. Orice schimbare care
are loc ntr-o astfel de entitate este imediat actualizat! n documentele care o
utilizeaz!. Exist! dou! tipuri de entit!#i externe analizate: entit!#i private care
se declar! folosind cuvntul cheie SYSTEM "i entit!#i publice declarate prin
PUBLIC.
Entit!#ile private sunt utile n cazurile n care un grup de persoane restrns
folose"te aceste entit!#i. Entit!#ile publice au gama de utilizare mult mai larg!.

Entit!"i externe neanalizate

Entit!#ile externe neanalizate se refer! la documente care nu sunt de tip
XML "i deci nu trebuie s! fie prelucrate de analizoarele XML. Analog
entit!#ilor precedente, entit!#ile de acest tip pot fi private sau publice.

<!ENTITY ent1 SYSTEM "url1" NDATA nota#ie>

<!ENTITY ent2 PUBLIC "identif" "url2" NDATA nota#ie>

Cuvntul cheie NDATA comunica procesorului c! exist! o construc#ie

referit! prin "nota#ie" (vezi mai jos).

B - 26

Tehnologii Web

Iat! un exemplu, n care elementul img va avea ca tip de valoare a

atributului src o entitate extern! neanalizat! denumit! logo, folosind nota#ia
gif:
<!ELEMENT img EMPTY>
<!ATTLIST img
src ENTITY #REQUIRED
>
<!ENTITY logo SYSTEM "http://www.site.com/logo.gif" NDATA gif>
<!NOTATION gif PUBLIC "gif viewer">

Entit!"i interne cu parametri

Entit!#ile interne cu parametri pot fi utilizate doar n interiorul DTD-ului.
Valoarea lor trebuie s! satisfac! acelea"i constrngeri de la entit!#ile generale "i
modul lor de definire este similar celui de la SGML.

Entit!"i externe cu parametri

Entit!#ile externe cu parametri sunt asem!n!toare entit!#ilor externe
generale analizate, utilizeaz! acelea"i cuvinte cheie "i au acela"i scop ca
entit!#ile interne cu parametri:

<!ENTITY % student SYSTEM "http://www.infoiasi.ro/std.dtd">

La adresa specificat! exist! fi"ierul "std.dtd" n care este definit! entitatea

student. Aceast! entitate poate fi utilizat! doar n interiorul DTD-ului
documentului.

Entit!"i predefinite
n XML exist! anumite caractere care nu trebuie s! apar! n forma lor
normal! n anumite locuri din text. Totu"i, pentru a le putea specifica se
folosesc entit!#ile predefinite din XML care refer! aceste caractere.
Aceste entit!#i sunt similare entit!#ilor predefinite din SGML.

Nota"ii
Nota#iile se utilizeaz! pentru a identifica formatul entit!#ilor neanalizate, a elementelor n
care apar referin#e spre nota#ii sau pentru a specifica anumite instruc#iuni de procesare.
Modurile de definire a nota#iilor sunt urm!toarele :
<!NOTATION nume SYSTEM "adres!">
<!NOTATION nume PUBLIC "generare">
<!NOTATION nume PUBLIC "generare" "adres!">

Nota#iile trebuie s! con#in! n defini#ie unul dintre cuvintele cheie SYSTEM sau PUBLIC.
Sensul lor este acela"i cu cel al entit!#ii lor "i genereaz! acelea"i lucruri. "adres!"
reprezint! adresa la care se afl! defini#ia nota#iei sau efectiv valoarea nota#iei. "generare"
specific! un fi"ier care va fi generat "i care va con#ine defini#ia nota#iei.
Utilizarea elementelor XML
Un document XML poate con#ine o declara#ie XML, o declara#ie a tipului de document
"i o mul#ime de marcaje care au fost definite n DTD.

B - 27

Tehnologii Web

Dac! un document nu con#ine DTD, atunci el trebuie s! respecte un num!r minim de

constrngeri. Documentul trebuie s! con#in! un element r!d!cin!, element care va fi primul
din text. Ultimul element va fi tag-ul de sfr"it al elementului r!d!cin!. Celelalte elemente
pot s! apar! n orice ordine "i ori de cte ori dorim, ns! trebuie s! satisfac! constrngerile
prezentate mai jos. Sunt interzise referin#ele la entit!#i, altele dect cele predefinite.
Con#inutul unui element reprezint! tot ceea ce se g!se"te ntre tag-ul de nceput al
elementului "i tag-ul lui de sfr"it. Dac! un element E are un copil C, atunci con#inutul lui C
trebuie s! se afle n con#inutul lui E (regula nchiderii corecte a parantezelor de la expresiile
matematice). Aceast! constrngere este valabil! la toate tipurile de documente "i trebuie s!
fie satisf!cut! "i de DTD.
Un exemplu de document XML valid, f!r! DTD:
<?xml version="1.0" encoding="UTF-8" ?>
<carte>
<cuprins>Acesta este un cuprins de carte</cuprins>
<capitol>
<sec#iune>O sec#iune de capitol</sec#iune>
</capitol>
</carte>

Iat! un exemplu gre"it (elementul carte trebuie s! con#in! "i tag-ul de sfr"it al
elementului capitol):
<carte>
<capitol>Un capitol de carte
</carte>
</capitol>

Dac! documentul con#ine DTD-ul, atunci elementele se vor conforma descrierii formale
din DTD. Elementele definite n DTD pot avea atribute noi, nedefinite, care pot fi de orice
tip, dar cele definite trebuie s! respecte defini#ia. De asemeni, pot apare, f!r! a fi definite,
elemente noi cu atributele lor aferente. Celelalte constrngeri au fost eviden#iate n
sec#iunile dedicate elementelor, atributelor, entit!#ilor "i nota#iilor.
Astfel, structura general! a unui document XML poate fi urm!rit! n urm!toarea figur!:

B - 28

Tehnologii Web

Prolog

Comentarii

Instruc#iuni de procesare

Declara#ia tipului de document (op#ional!)

Comentarii

Instruc#iuni de procesare

Declara#ii

Elemente

Atribute

Entit!#i

Nota#ii

Element r!d!cin!

Comentarii

Instruc#iuni de procesare

Elemente

Atribute

PCDATA

Referin#e la entit!#i

Referin#e la entit!#i

Sec#iuni CDATA

Analizoarele XML actuale (Expat, XJParser, IBM XML Parser for Java, Netscape 6 sau
ulterior, Internet Explorer 5 sau ulterior etc.), pot descoperi cele mai frecvente gre"eli
sintactice, conform specificatiei XML 1.0. n figura urm!toare se poate observa semnalarea
unei erori de definire a unui element, n urma analizei unui document folosind aplica#ia
vizuala XML Editor scris! de absolventul Eduard Schmidt.

B - 29

Tehnologii Web

Analiza unui document utiliznd XML Editor

Analizoarele pot executa "i ac#iunea de validare, n func#ie de DTD-ul ata"at

documentului XML, sau pot doar verifica dac! respect! regulile minimale de scriere a
tag-urilor XML.

2.4 Spaii de nume

Prin utilizarea spa"iilor de nume, dezvoltatorii de aplica#ii XML pot califica numele de
elemente n mod unic, evitnd conflictele dintre elemente cu acelea"i nume.
De exemplu, un autor de document XML referitor la c!r#ile dintr-o bibliotec! poate scrie
urm!toarele:
<book ident="74">
<title>Re#ele de calculatoare</title>
<year>1998</year>
</book>

ntr-un alt document XML se vor memora persoanele care au mprumutat anumite c!r#i:
<student>
<!-- Date despre student -->
<name>%tefan Tanas!</name>
<year>4</year>

B - 30

Tehnologii Web

<!-- C!r#i mprumutate -->

<books>
<ident>74</ident>
<ident>158</ident>
</books>
</student>

Pentru un cititor uman este clar faptul c! elementul <year> din primul document se
refer! la anul apari#iei c!r#ii, iar <year> din cel de-al doilea document semnific! anul de
studiu n care se afl! studentul care a mprumutat c!r#i de la bibliotec!.
n vederea evit!rii ambiguit!#ilor de procesare, se asociaz! un vocabular, denumit
spa"iu de nume (namespace), pentru elementele n cauz!.
Astfel anii acum pot fi scri"i n modul urm!tor:
<BookInfo:year>1998</BookInfo:year>
<!-- Apar#ine spa#iului de nume "BookInfo" -->
<StudInfo:year>4</StudInfo:year>
<!-- Apar#ine spa#iului de nume "StudInfo" -->

Aceasta permite ca n cadrul aceluia"i document XML s! apar! ambele informa#ii (anul
apari#iei "i anul de studiu) f!r! a se na"te ambiguit!#i, iar validarea se poate realiza
f!r! probleme.
Declararea spa"iilor de nume
Spa#iile de nume se declar! fie implicit (un spa#iu de nume pentru toate elementele
domeniului lui de vizibilitate) sau explicit (ca prefix ori substitut pentru numele complet al
unui spa#iu de nume).
Un exemplu de declarare implicit!:
<library>
<!-- Lista c!r#ilor din bibliotec! -->
<book xmlns="urn:infoiasi.ro:BookInfo" ident="1">
<title>...</title>
<year>...</year>
...
</book>
...
<!-- Totalul general -->
<total>107400</total>
</library>

Elementele <book>, <title> "i <year> "i atributul ident fac parte din spa#iul de
nume "BookInfo" accesibil la adresa dat! de URN-ul (Uniform Resourse Name)
infoiasi.ro. Atributul xmlns este cuvnt-cheie XML "i specific! un spa#iu de nume
care n cazul nostru va fi vizibil pn! la tag-ul de sfr"it </book>. To#i descenden#ii
necalifica#i ai lui <book> se consider! apar#innd spa#iului de nume "BookInfo".
Elementul <total> nu face parte din spa#iul de nume "BookInfo".
n urm!torul exemplu se declar! "b" ca abreviere pentru numele complet al spa#iului de
nume "BookInfo". Toate elementele "i atributele prefixate cu "b" vor fi considerate ca
apar#innd spa#iului de nume "BookInfo".

B - 31

Tehnologii Web

<b:book xmlns:b="urn:infoiasi.ro:BookInfo" b:ident="74">

<b:title>Re#ele de calculatoare</b:title>
<b:year>1998</b:year>
</b:book>

Aceast! declarare este una explicit!.

Un exemplu complet
Presupunem c! avem urm!torul document XML con#innd toate persoanele (clien#ii)
nregistrate la o bibliotec!, #innd eviden#a volumelor mprumutate:
<?xml version="1.0"?>
<c:clients xmlns:c="urn:bcu.ro:LibClients">
<s:student xmlns:s="urn:infoiasi.ro:StudInfo"
xmlns:b="urn:infoiasi.ro:BookInfo">
<name>%tefan T!nas!</name>
<s:year>4</s:year>
<c:books total="1">
<b:book b:ident="74">
<title>Re#ele de calculatoare</title>
<b:year>1998</b:year>
<b:description>
<h2 xmlns="http://www.w3.org/TR/REC-html40">
Un <i>best-seller</i> clasic
</h2>
</b:description>
</b:book>
</c:books>
</s:student>
...
</c:clients>

Sunt declarate mai multe spa#ii de nume. Elementul <name> de"i nu este calificat,
apar#ine lui "s" deoarece se afl! n domeniul de vizibilitate al acestuia, iar "b" nu con#ine
vreun element cu acest nume. Elementele <h2> "i <i> apar#in spa#iului de nume specificat
de Consortiul Web n recomandarea HTML 4.0 "i pot fi utilizate la formatarea descrierii
c!r#ii respective.

2.5 HiperHiper - legturi n XML (XLink)

Specifica#ia leg!turilor n XML, denumit! XLL, prezint! un model standard pentru
realizarea hiper-leg!turilor .
XLink (XML Linking Language) furnizeaz! posibilit!#i de a defini semantica unei
leg!turi, nu doar sintaxa ei, introducnd "i no#iunea de leg!turi extinse n care sunt implicate
mai mult de dou! resurse (nu doar o singur! surs! "i o singur! destina#ie). XLL introduce "i
pointeri extin$i (prin limbajul XPointer), oferind o metod! sofisticat! de a localiza resursele.
XLink, aflat n luna iulie 2000 n faza de candidat pentru a deveni recomandare oficial! a
Consor#iului Web, a fost influen#at "i de alte specifica#ii precum HTML, HyTime "i TEI
(Text Encoding Initiative) "i de modele "i sisteme hipertext ca Dexter, Microcosm sau
Intermedia.

B - 32

Tehnologii Web

XLink

define"te

un

spa#iu

de

nume

special

dat

de

URI-ul

http://www.w3.org/1999/xlink. Toate leg!turile specificate n XLink vor apar#ine

acestui spa#iu de nume, utilizatorul de fapt realiznd o instan#iere a unor elemente "i
atribute XLink, similar tehnicilor din programarea obiectual!.
No#iunile folosite n cadrul acestei sec#iuni sunt:
Traversarea nseamn! utilizarea sau urmarea unei leg!turi, implicnd
ntotdeauna o pereche de resurse sau fragmente de resurse.

Informa#iile referitoare la modalitatea de traversare a unei perechi de resurse

(e.g. direc#ia de traversare, comportamentul aplica#iei atunci cnd se activeaza o
leg!tur! etc.) vor fi referite prin termenul de arc.

Caracterizare
n XLink se pot specifica urm!toarele dou! tipuri de leg!turi:

leg!turi extinse - ofer! ntreaga func#ionalitate a limbajului (i.e. leg!turi la care

particip! un num!r arbitrar de resurse locale sau aflate la distan#!);

leg!turi simple - sunt leg!turile la care particip! numai dou! resurse

(e.g. leg!turile din HTML).

O leg!tur! extins! poate con#ine o mixtur! de tipuri de elemente XLink, n orice ordine,
dintre cele descrise n continuare:

locator - specific! resursele aflate la distan#! care particip! n realizarea

arc - ofer! reguli de traversare a resurselor participante;

title - stabile"te etichete text pentru o leg!tur! (utilizate cu scopul de a

resource - specific! resursele locale care pot participa la realizarea

leg!turii;

descrie leg!tura);
leg!turii.

Interdependen#a dintre tipurile de elemente XLink este ilustrat! n tabelul de mai jos:
Tip element p#rinte Tipuri de elemente copil care pot apare
simple

extended

locator | arc | resource | title

locator

title

arc

title

resource

title

B - 33

Tehnologii Web

Exemplu
Presupunem c! printr-o leg!tur! extins! vom "lega" diferite resurse con#innd
informa#iile despre cursurile urmate de un anumit student, profesorii care predau aceste
cursuri, despre datele personale ale studentului etc.
Astfel, putem scrie urm!torul DTD:
<!-- cursurile urmate de un student -->
<!ELEMENT courses ((desc | pers | crs | gr | go)*)>
<!ATTLIST courses
-- atributele cursurilor -xmlns:xlink
CDATA
#FIXED "http://www.w3.org/1999/xlink"
-- obligatoriu -xlink:type
(extended)
#FIXED "extended"
-- leg!tur! extins! -xlink:role
CDATA
#IMPLIED
xlink:title
CDATA
#IMPLIED
>
<!-- descrierea cursurilor -->
<!ELEMENT desc
ANY>
<!ATTLIST desc
xlink:type
(title)
#FIXED "title"
xml:lang CDATA
#IMPLIED
>
<!-- informa#ii despre o persoan! (student, profesor) -->
<!ELEMENT pers
EMPTY>
<!ATTLIST pers
xlink:type
(locator)
#FIXED" "locator"
xlink:href
CDATA
#REQUIRED -- URI-ul resursei -xlink:role
CDATA
#IMPLIED
xlink:title
CDATA
#IMPLIED
xlink:label
NMTOKEN
#IMPLIED -- eticheta resursei ->
<!-- informa#ii despre un curs -->
<!ELEMENT crs
EMPTY>
<!ATTLIST crs
xlink:type
(locator)
#FIXED" "locator"
xlink:href
CDATA
#REQUIRED -- URI-ul resursei -xlink:role
CDATA
#FIXED
"http://www.infoiasi.ro/link/courses"
xlink:title
CDATA
#IMPLIED
xlink:label
NMTOKEN
#IMPLIED -- eticheta resursei ->
<!-- informa#ii despre o grup! de studiu -->
<!ELEMENT gr EMPTY>
<!ATTLIST gr
xlink:type
(locator)
#FIXED" "locator"
xlink:href
CDATA
#REQUIRED -- URI-ul resursei -xlink:role
CDATA
#FIXED "http://www.infoiasi.ro/link/years"
xlink:title
CDATA
#IMPLIED
xlink:label
NMTOKEN
#IMPLIED -- eticheta resursei ->
<!-- element de traversare a leg!turii -->
<!ELEMENT go EMPTY>
<!ATTLIST go
xlink:type
(arc)
#FIXED" "arc"
xlink:arcrole CDATA
#IMPLIED
xlink:title
CDATA
#IMPLIED

B - 34

Tehnologii Web

xlink:show
( new -- modul de afi"are a resursei -| replace
| embed
| other
| none)
#IMPLIED
xlink:actuate ( onLoad
| onRequest
| other
| none)
#IMPLIED
-- evenimentul activ!rii leg. -xlink:from
NMTOKEN
#IMPLIED -- sursa -xlink:to
NMTOKEN
#IMPLIED -- destina#ia ->

Un document exploatnd leg!tura extins! poate fi urm!torul:

<courses xlink:title="Cursurile urmate de %tefan Tanas!">
<pers xlink:href="stanasa.xml"
xlink:label="stud33"
xlink:role="http://students.infoiasi.ro/~stanasa"
xlink:title="%tefan Tanas!" />
<!-- Informa#ii despre student -->
<pers xlink:href="busaco.xml"
xlink:label="asist03"
xlink:role="http://www.infoiasi.ro/~busaco"
xlink:title="Sabin Corneliu Buraga" />
<!-- Mai multe resurse despre cadrele didactice ... -->
<crs xlink:href="courses/web/web.html"
xlink:label="WebTech"
xlink:title="Tehnologii Web" />
<!-- Mai multe resurse despre cursuri, seminarii etc. -->
<gr xlink:label="grupa">04-3</gr>
<!-- Grupa din care face parte studentul -->
<go xlink:from="stud33"
xlink:to="grupa"
xlink:show="new"
xlink:actuate="onRequest"
xlink:title="Grupa lui %tefan Tanas!" />
<!-- Leg!tur! student-grupa -->
<go xlink:from="WebTech"
xlink:arcrole="http://www.infoiasi.ro/link/auditor"
xlink:to="stud33"
xlink:show="replace"
xlink:actuate="onRequest"
xlink:title="%tefan Tanas!, participant la 'Tehnologii Web'" />
<!-- Leg!tur! student-curs -->
<go xlink:from="stud33"
xlink:arcrole="http://www.infoiasi.ro/link/profs"
xlink:to="asist03"
xlink:show="replace"
xlink:actuate="onRequest"
xlink:title="Sabin Corneliu Buraga, coordonator" />
<!-- Leg!tur! student-coordonator -->
</courses>

B - 35

Tehnologii Web

Atributele XLink au urm!toarele descrieri:

type

Identific! tipul elementelor XLink "i este obligatoriu, valorile permise fiind
"simple", "extended", "locator", "arc", "resource", "title" sau
"none".
De exemplu, o leg!tur! simpl! va fi definit! n maniera:
<!ATTLIST xlink:simple
xlink:type (simple)
>

#FIXED "simple"

Dac! se folose"te "none", elementul nu posed! o semantic! XLink "i orice

alte atribute XLink pe care le are nu vor fi luate n considera#ie.

href

Furnizeaz! datele care permit unei aplica#ii XLink s! g!seasc! o resurs!

(sau un fragment de resurs!) aflat! la distan#!. Poate fi utilizat pentru leg!turi
simple "i trebuie s! apar! n elemente de tip locator. Valoarea lui href este
un URI.

atributele semantice role, arcrole, title

Dau semantica resurselor participante la o leg!tur!. Atributele role "i
title pot fi utilizate n elemente de tip extended, simple, locator
"i resource. Atributele arcrole "i title pot apare n elemente de tip
arc.
Valoarea atributelor role "i arcrole trebuie s! fie un URI, iar valoarea
lui title va fi un "ir de caractere destinat cititorului uman, putnd fi utilizat
pentru crearea tabelelor de leg!turi sau prezentarea unui text de ajutor.

atributele comportamentale show "i actuate

Pot apare op#ional n elemente de tip simple sau arc.
Aceste atribute permit controlul asupra comportamentului leg!turii.
Atributul show specific! dac! documentul pointat de o leg!tur! este inclus n
documentul curent, nlocuindu-l sau afi"ndu-l ntr-o alt! fereastr! atunci cnd
leg!tura este activat!. Atributul actuate determin! cum va fi activat! o
leg!tur! (e.g. automat sau cnd este selectat! de utilizator).

atributele de traversare label, from "i to

Atributul label se utilizeaz! pentru elemente de tip resource "i
locator. Atributele from "i to apar n elemente de tip arc.

Leg#turi simple
O leg!tur! simpl! poate fi reprezentat! prin intermediul unei leg!turi extinse, combinnd
func#iile de baz! ale elementelor de tip extended, locator, arc "i resource.
Iat! un exemplu:

B - 36

Tehnologii Web

<studentlink xlink:type="extended">
<resource xlink:type="resource" xlink:label="local">
%tefan Tanas!
</resource>
<locator xlink:type="locator"
xlink:href="http://students.infoiasi.ro/~stanasa"
xlink:label="remote"
xlink:role="..."
xlink:title="Studentul" />
<go xlink:type="arc"
xlink:from="local"
xlink:to="remote"
xlink:arcrole="..."
xlink:show="replace"
xlink:actuate="onRequest" />
</studentlink>

Acest exemplu n HTML putea fi scris:

<a href="http://students.infoiasi.ro/~stanasa">
%tefan Tanas!
</a>

Dac! pentru atributul show aveam valoarea "new", atunci n HTML foloseam:
<a href="http://students.infoiasi.ro/~stanasa"
target="_blank">
%tefan T!nas!
</a>

O leg!tur! simpl! nu poate oferi:

posibilitatea de a avea resurse multiple (locale sau la distan#!);

specificarea unui arc de la o resurs! la distan#! spre o resurs! local!;

asocierea unui titlu sau rol unei resurse locale;

asocierea unui titlu sau rol ntregii leg!turi.

2.6 Introducere n XSL

Pe Web apar tot mai des documente scrise n XML, autorii acestora avnd posibilitatea
s! le defineasc! dup! necesit!#i structura, utiliznd diverse unelte XML pentru crearea,
verificarea "i interschimbarea de date ntre diverse formate "i XML. Documentelor sau
fragmentelor de documente XML li se pot asocia diverse descrieri (metadate) prin
intermediul RDF (Resource Description Framework). Datorit! faptului c! documentelor XML le
lipse"te o semantic! interpretabil! de c!tre calculator, limbajul XML dictnd de fapt numai
sintaxa elementelor (tag-urilor) "i nu n#elesul lor, se propune rescrierea sursei unui
document XML (con#innd elemente ale c!ror semantici au fost stabilite de autorul acelui
document) generndu-se un alt document, de cele mai multe ori tot XML (cuprinznd
elemente avnd semantici care vor putea fi procesate de programul destinat a prelucra acel
document). Aceast! asignare (XML mapping) este realizat! de XSL (eXtensible Stylesheet
Language), specifica#ie folosind, la nivel sintactic, limbajul XML.

B - 37

Tehnologii Web

XSL se bazeaz! pe DSSSL (Document Style Semantics and Specification Language), standard
interna#ional pentru definirea foilor de stiluri (ISO/IEC 10179:1996). XSL ofer!
urm!toarele:

formatarea bazat! pe mo"tenire sau context;

crearea de construc#ii de formatare incluznd text "i grafic!;

definirea de macro-uri de formatare;

foi de stiluri independente de direc#ia de scriere (suport pentru

interna#ionalizare);

un set extensibil de obiecte de formatare;

publicare independent! de medii.

Fiecare foaie de stiluri XSL const!, simplist vorbind, din reguli compuse dintr-un model
(pattern) "i o ac"iune, modelul identificnd un element sau grup de elemente XML asupra
c!ruia se va aplica ac#iunea. Modelul poate specifica toate elementele de un anumit tip,
toate elementele dintr-un subarbore de noduri XML, toate elementele avnd un anume
atribut specificat etc. Expresiile modelului sunt scrise ntr-un limbaj derivat din XML,
denumit XPath, iar ac#iunile (transform!rile efectuate asupra elementelor documentului)
sunt specificate n XSLT (XSL Transformations), ambele recomand!ri ale Consor#iului Web
ncepnd cu sfr"itul anului 1999. Expresiile vehiculate n cadrul XSL sunt inspirate din
ECMAScript, limbaj script standardizat de Asocia#ia European! a Produc!torilor de
Calculatoare care va fi prezentat n unul dintre capitolele viitoare ale acestui text.
Principiile de proiectare a limbajului XSL au fost cele legate de suportul pentru aplica#iile
de navigare, listare "i editare interactiv!, pentru prezent!ri vizuale "i non-vizuale de date,
de posibilitatea de extindere cu noi elemente "i declara#ii, de u"urin#a de parcurgere att din
punctul de vedere computa#ional, ct "i din punctul de vedere uman.
Desigur, specifica#ia XSLT este mult mai complex!, putndu-se realiza combinarea "i
includerea mai multor foi de stiluri pentru un acela"i document, conceperea unor "abloane
de reguli, procesarea condi#ionat! a elementelor XML, totul bazndu-se pe DOM
(Document Object Model), model obiectual descris ntr-unul dintre capitolele acestui material.
Procesorul XSL va aplica n mod recursiv transform!ri asupra tuturor nodurilor care
satisfac modelul sau "abloanele de reguli.
Pentru a putea observa flexibilitatea "i puterea XSL-ului, vom realiza pentru nceput o
foaie de stiluri XSL care dintr-un document XML (specificnd o lucrare "tiin#ific! sau un
articol) construie"te un document XHTML con#innd cuprinsul acestuia (n cuprins vor
apare doar numele capitolelor lucr!rii). A"adar, documentul XML ini#ial va avea forma:
<article>
<meta>
<title>Documente XML active</title>
<author email="busaco@infoiasi.ro">
Sabin-Corneliu Buraga
</author>
</meta>
<body>
<intro>...</intro>
<chapter>
<title>Documente active</title>
...
</chapter>

B - 38

Tehnologii Web

<chapter>
<title>Displet-uri</title>
...
</chapter>
<chapter>
<title>Concluzii</title>
...
</chapter>
</body>
</article>

Cuprinsul va fi precedat de adresa de e-mail a autorului lucr!rii, deci va trebui

s! construim un element <a href="mailto:..."> pornind de la informa#iile de#inute
de atributul email al elementului <author> din sec#iunea <meta> a articolului.
Construc#ia XSL va fi:
<a>
<xsl:attribute name="href">mailto:
<xsl:value-of select="article/meta/author/@email" />
</xsl:attribute>
<xsl:value-of select="article/meta/author" />
</a>

Tag-ului <a> i se va ata"a atributul href a c!rui valoare va fi dat! de expresia XPath
article/meta/author/@email (se porne"te de la elementul r!d!cin! article pn!
se ntlne"te un nod descendent author "i se selecteaz! valoarea atributului email).
La fel, ntre <a> "i </a> se va include numele autorului.
Cuprinsul propriu-zis va fi o list! construit! astfel:
<ol id="cuprins">
<xsl:for-each select="article/body/chapter">
<li>
<h5 style="color:green">
<xsl:value-of select="title" />
</h5>
</li>
</xsl:for-each>
</ol>

Fragmentul XSL va genera o bucat! de cod XHTML, pentru fiecare element

<chapter> inclus n elementul <body> al articolului construindu-se un element de list!
numerotat!. ntre tag-urile de nceput "i de sfr"it ale elementului <li> se va ad!uga nodul
text asociat elementului <title>, adic! tocmai titlul fiec!rui capitol al lucr!rii (am utilizat
pentru formatare marcatorul <h5> "i proprietatea color din CSS1). Desigur, fiecare
membru al listei va putea con#ine o leg!tur! intern! la nceputul capitolului desemnat, l!s!m
acest exerci#iu n sarcina cititorului. Cele de mai sus pot fi procesate de navigatoarele Web
din ultima genera#ie (e.g. Internet Explorer 5 sau o versiune ulterioar!). Exist! de asemeni
"i editoare specializate, precum XRay (Architag). Procesarea foilor de stiluri XSL se poate
realiza "i pe partea de server (de exemplu, n cadrul serverului IIS (Internet Information
Server) exist! o extensie ISAPI pentru prelucrarea fi"ierelor XSL).
Declararea foilor de stiluri XSL
Toate foile de stiluri vor trebui s! apar#in! spa#iului de nume xsl definit de Consor#iul
Web. Forma general! a declara#iei unei foi de stiluri este urm!toarea:
B - 39

Tehnologii Web

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
...
</xsl:stylesheet>

Editorul XRay pentru transformarea documentelor XML

Cele mai uzuale elemente care pot compune o foaie de stiluri sunt cele din tabelul
de mai jos:
Element

Descriere

xsl:stylesheet

Utilizat ca element r!d!cin! al unei foi de stiluri, poate

con#ine "abloanele care vor fi aplicate pentru generarea
altui document XML

xsl:template

Define"te o serie de transform!ri/format!ri care vor fi

aplicate pentru un anumit model particular

xsl:apply-templates

Invoc! "abloanele definite anterior

xsl:comment

Insereaz! un comentariu n cadrul documentului

generat

xsl:pi

Insereaz! o instruc#iune de procesare n documentul

XML de la ie"ire

B - 40

Tehnologii Web

xsl:element

xsl:attribute

Insereaz! un element XML n documentul generat de

foaia de stiluri
Ata"eaz! unui element un anumit atribut

xsl:value-of

Insereaz! n cadrul documentului de la ie"ire valoarea

unui nod (element, atribut, comentariu etc.) particular

xsl:for-each

Realizeaz! o bucl! de aplicare a unui "ablon mai multor

noduri respectnd un model XPath
Utilizat pentru aplic!ri condi#ionale de tipul if-then

xsl:if

Folosit pentru condi#ii multiple (de tipul switch din

limbajul C), n conjunc#ie cu elementele xsl:when "i

xsl:choose

xsl:otherwise

Copie con#inutul valorilor unor elemente n documentul

rezultat

xsl:copy

Modele
Modelele folosite n cadrul foilor XSL vor fi specificate n limbajul XPath "i ele vor fi
contextuale, potrivirile de elemente sau atribute XML realizndu-se n func#ie de plasarea n
cadrul ierarhiei arborelui de noduri asociat unui document XML (mai multe am!nunte
despre arborii de noduri vom putea g!si n capitolul dedicat modelului DOM).
Sintaxa XPath este una declarativ!, putnd fi folosi#i operatorii descri"i n continuare:

Operator

Nume

Descriere

Exemplu

Descendent

Utilizat s! defineasc! o
ierarhie de elemente (o cale de
parcurgere a nodurilor din
arborele asociat documentului)

/
/article/meta
chapter/title

wildcard

Folosit pentru elemente "i

atribute, ofer! toate
elementele/atributele de pe un
anumit nivel al arborelui

/article/*
body/*/title

B - 41

Tehnologii Web

//

traversare
recursiv!

atribut

spa#iu de
nume

filtru/index

[]

Traverseaz! n adncime
//article
ntreg sub-arborele unui anumit //body
element
Utilizat s! specifice un anumit author/@email
table/@*
atribut particular
Folosit s! separe elementele
bazate pe spa#iul lor de nume

xsl:*
//namespace:*

table[tr]
author[@email="..."]
Aplic! un filtru sau localizeaz!
book[@title="Web"]/
elementele pe baza unui index
author[@age="33"]
ul/li[1]

n continuare vom da o serie de exemple XPath mpreun! cu explica#ii:

paragraph[@align="center"]

selecteaz!
to#i
descenden#ii
(nodurile copil) care sunt elemente <paragraph> avnd valoarea "center"
pentru atributul align.
//rdf:* selecteaz! toate elementele apar#innd spa#iului de nume rdf din

cadrul unui document.

ulist/img[position() = 33] selecteaz! al 33-lea element <img>
care face parte dintr-un element list! <ulist>. Func#ia position() este o

func#ie ECMAScript standard.

li[position() mod 2 = 1] va fi adev!rat! pentru fiecare element

<li> aflat la pozi#ie impar! n cadrul elementului p!rinte.

books[@subject="Web"]/author[@name="Sabin"][@address=

"busaco@infoiasi.ro"] va func#iona ca un filtru, furniznd toate elementele

incluse ntr-un element <books> care are atributul subject="Web" "i care are n
componen#! elementul <author> avnd specificate atributele name="Sabin" "i
address="busaco@infoiasi.ro". Filtrele vide nu sunt permise
(e.g. articol[]).

Pentru filtre pot fi folosi#i operatorii logici, rela#ionali "i referitori la manipularea
mul#imilor de elemente, prezen#i n limbajele de programare obi"nuite (i.e. and, or, not, =,
!=, <, >, <=, >, $all$, $any$, | etc.).
Alte cteva exemple:
table/tr[@align="center" or @valign="top"]/* va selecta
elementele dintr-un <tr> avnd specificate atributele align="center" sau
valign="top" din cadrul unui <table>.

body[text != "white"] va selecta toate elementele dintr-un <body>

care nu con#in o construc#ie de forma <text>white</text>.

B - 42

Tehnologii Web

library/book
|
library/magazine

(echivalent!
cu
library/(book | magazine) va furniza toate elementele <book> "i
<magazine>, descenden#i ai elementului <library>.

Modelele utilizate de foile de stiluri pot fi informative (referitoare la tipul, numele "i
valoarea unui element/atribut, putnd fi folosite metode precum nodeName, nodeType,
index, end ori number) sau de grupare (returneaz! colec#ii de noduri de tipuri particulare:
text, textNode, element, attribute, comment etc.).
Obiecte de formatare
Formatarea diferitelor elemente n XSL urmeaz! modelul foilor de stiluri CSS, existnd o
multitudine de obiecte de formatare, fiecare dintre ele avnd o serie cuprinz!toare de
propriet!#i pentru a oferi proiectan#ilor un grad foarte mare de flexibilitate. Lista tuturor
propriet!#ilor poate fi consultat! n specifica#ia pentru XSL a Consor#iului Web.
Compara#ia cu foile de stiluri CSS - nivelele 1 "i 2 se poate parcurge n urm!toarea tabel!:

Caracteristica

XSL CSS

Comentarii

Utilizare cu HTML

nu

da

XSL poate fi utilizat s! converteasc! XML n

XHTML. XSL nu func#ioneaz! pentru documente
HTML care nu respect! standardul XHTML. CSS se
poate folosi ca modalitate de ata"are de stiluri
independent! de documentul HTML.

Suport pentru
scripting

da

da

XSL "i CSS ofer! mecanisme de programare a

foilor de stiluri via ECMAScript.

Sintaxa bazat! pe
XML

da

nu

Foile CSS nu folosesc o gramatic! XML, pe cnd

XSL este bazat pe XML.

Afi"area de
informa#ii XML

da

da

Se pot asocia unor documente XML sau bazate pe

XML.

da

n prezent, Internet Explorer 5 sau ulterior ofer!

suport pentru XSL. Se a"teapt! suport "i din partea
Netscape/Mozilla 6. CSS nivelul 1 "i nivelul 2 sunt
suportate aproape total de navigatoarele actuale.

Suport al
navigatoarelor

Transform!ri de
structur!

par#ial

da

CSS nu poate modifica structura documentelor,

fiind doar o modalitate de a ata"a stiluri de formatare
nu a unor elemente. Pentru HTML, solu#ia modific!rilor
de structur! este oferit! de modelul DOM via
JavaScript.

B - 43

Tehnologii Web

Transform!ri
asupra con#inutului
Manipularea
datelor XML (c!utare,
filtrare, sortare)

da

XSL poate modifica "i con#inutul documentelor

nu XML, ntr-o manier! bazat! pe reguli de rescriere,
folosind modele/filtre.

da

XSL poate fi v!zut ca limbaj simplu de interogare

nu pentru documentele XML. CSS nu ofer! nici o
facilitate n acest sens, nefiind limbaj de programare.

n locul transform!rilor XSL se poate utiliza limbajul XPathScript, parte a proiectului

AxKit - mediu pentru aplica#ii Web pe partea de server folosind mod_perl. XPathScript
are o sintax! apropiat! de Perl "i poate fi ata"at documentelor XML prin intermediul unor
marcatori similari celor din ASP.

2.7 XML Schema

Dup! cum am v!zut pn! acum, XML este un meta-limbaj definind reguli pentru
definirea altor limbaje de adnotare. O schem# reprezint! o specifica#ie formal! a gramaticii
asociate unui limbaj definit n XML, util! pentru validarea documentelor scrise n acel
limbaj.
Desigur, fiec!rui document i puteam asocia, n mod explicit, un DTD folosit pentru
validarea acestuia, reminiscen#! de la SGML.
Schemele utilizeaz! sintaxa XML "i sunt mai natural de definit dect DTD-urile,
specifica#iile fiind nc! n faz! preliminar!, bazate pe Document Content Description (DCD) "i
XML-Data, ambele n lucru la Consor#iul Web. n prezent, schemele XML sunt suportate
n form! limitat! de Internet Explorer 5 "i Netscape 6.
Definirea elementelor !i atributelor
Ca "i la DTD, cea mai important! parte dintr-o schem! XML o reprezint! specificarea
elementelor "i atributelor care pot compune un document, incluznd tipul "i ordinea lor de
apari#ie. Elementele "i atributele sunt definite n XML Schema prin tag-urile
<ElementType> "i, respectiv, <AttributeType>, iar instan#ele lor prin <element> "i
<attribute>, respectiv. Aceast! abordare este similar! declara#iei typedef din
limbajul C.
Un exemplu:
<?xml version="1.0"?>
<Schema name="BookSchema" xmlns="schemas-microsoft-com:xml-data">
<ElementType name="title" content="textOnly" />
<ElementType name="author" content="textOnly" />
<ElementType name="description" content="textOnly" />
<ElementType name="book" order="many">
<element type="title" maxOccurs="1" />
<element type="author" minOccurs="1" maxOccurs="*" />
<element type="description" />
<AttributeType name="isbn" required="yes" />
<attribute type="isbn" />
</ElementType>
</Schema>

B - 44

Tehnologii Web

Am definit astfel patru elemente <title>, <author>, <description> "i <book>,

ultimul fiind considerat element r!d!cin!. Elementul <book> va avea atributul obligatoriu
isbn.
Schema specificat! n acest exemplu va fi referit! prin numele "BookSchema" stabilit
prin intermediul atributului name al tag-ului <Schema>. Fiecare schem! are asociat un
spa#iu de nume specificat prin xmlns.
Atributul order din defini#ia unui tip de element dicteaz! regulile de apari#ie a
elementelor n cadrul unui element p!rinte, putnd avea valorile:

seq - sub-elementele apar n secven#a specificat! n cadrul schemei;

many - sub-elementele pot apare n orice ordine, n oricare cantitate;

one - un singur sub-element din lista celor specificate poate fi utilizat;

empty - nu se permite apari#ia nici unui sub-element (elementul va fi vid).

Fiec!rui <ElementType> i putem asocia atributul content care dicteaz! tipul

con#inutului acestuia:

textOnly - numai text, f!r! alte sub-elemente;

eltOnly - doar sub-elemente;

mixed - con#inut eterogen, "i sub-elemente, "i text.

Implicit, pentru content="eltOnly" se consider! c! order este setat pe seq,

iar pentru content="mixed" atributul order are valoarea many.
XML Schema ne d! posibilitatea s! aplic!m constrngeri unei mul#imi de (sub-)elemente
prin <group>:
...
<ElementType name="author" order="seq">
<group order="one">
<element type="phone" />
<element type="email" />
</group>
<element type="firstname" />
<element type="lastname" />
</ElementType>
...

n acest exemplu, elementul <author> va putea con#ine trei descenden#i: <phone> sau
<email> (nu pot apare ambele), apoi <firstname> "i <lastname>, n aceast! ordine.
Atributele se definesc asem!n!tor elementelor, dar nu pot con#ine sub-elemente "i
nu pot apare ntr-o anumit! ordine n componen#a unui marcator.
Ca "i la DTD, un atribut poate fi obligatoriu (required="yes" ntr-un
<AttributeType>) sau nu (required="no"). Valoarea implicit! se specific! prin
default (e.g. default="33").
Pentru definirea tipului de date se utilizeaz! fie tipurile primitive din specifica#ia XML
(de exemplu ID, NMTOKEN etc.), fie un spa#iu de nume definind tipurile de date permise.
n implementarea IE 5, n cadrul elementului <Schema> putem include atributele
xmlns="urn:schemas-microsoft-com:xml-data"
"i
xmlns:dt="urn:schemas-microsoft-com:datatypes" pentru a accesa o serie de

B - 45

Tehnologii Web

tipuri de baz!. Se observ! faptul c! lipsa lui xmlns="urn:schemas-microsoftcom:xml-data" duce la imposibilitatea valid!rii documentului de c!tre analizorul XML
inclus n IE 5.
Aceste tipuri de date pot fi specificate ntr-un <ElementType> sau
<AttributeType> n dou! moduri: prin atributul dt:type ori utiliznd elementul
<datatype>.
Astfel, linia urm!toare:
<ElementType name="figures" dt:type="int" />

este echivalent! cu construc#ia:

<ElementType name="figures">
<datatype dt:type="int" />
</ElementType>

Tipurile de date acceptate pot fi scalare ("int"), enumer!ri ("enumeration"), identificator

sau referin#! la un identificator ("id", "idref"), entit!#i ("entity") sau "iruri de caractere
("string"). Specifica#ia Microsoft pentru tipurile de date permise define"te o multitudine de
alte sub-tipuri (e.g. "bin.hex", "boolean", "date", "dateTime", "float", "time", "uri" sau
"uuid").
Un exemplu de tip enumerativ utilizat n cadrul declar!rii unui atribut:
<AttributeType name="stare"
xmlns="urn:schemas-microsoft-com:datatypes"
dt:type="enumeration"
dt:values="n_lucru depanare definitiv" />

De asemeni, un element poate avea ata"at tipul enumerare:

<ElementType xmlns="urn:schemas-microsoft-com:datatypes"
name="year"
dt:type="enumeration"
dt:values="1 2 3 4" />

ntre <year> "i </year> nu vor fi permise dect valorile "1", "2", "3" sau "4".
Astfel, construc#ia <year>7</year> va fi considerat! eronat!.
Pentru fiecare element se pot stabili, de asemeni, num!rul minim "i maxim de apari#ii ale
acestuia prin intermediul atributelor minOccurs "i maxOccurs, respectiv. Valorile valide
ale lui MaxOccurs pot fi numerele "i semnul "*" (semnific! orice cantitate, f!r! restric#ii).
n mod obi"nuit, valoarea implicit! a lui maxOccurs este 1, cu excep#ia cazului n care
content="mixed" cnd va fi 0. Aceste atribute se utilizeaz! n declara#iile <element>
"i <group>.
Putem fixa "i lungimea n caractere a valorilor con#inute de un atribut de tip "number",
"int" sau "string", prin minLength "i maxLength:
<AttributeType name="password"
xmlns="urn:schemas-microsoft-com:datatypes"
dt:type="string"
dt:minLength="5" dt:maxLength="8" />

B - 46

Tehnologii Web

Utilizarea schemelor
O schem! XML poate fi folosit! via declara#ia unui spa#iu de nume prin includerea URIului la care este definit! acea schem!. Acest lucru se realizeaz! cu ajutorul atributului
xmlns, prefixnd URI-ul schemei cu "irul x-schema.
Vom utiliza schema definit! n exemplul de mai sus pentru validarea urm!torului
document:
<book xmlns="x-schema:http://www.infoiasi.ro/schemas/book-schema.xml"
isbn="973-97706-3-0">
<title>Re#ele de calculatoare</title>
<author>Andrew S.Tanenbaum</author>
<description>Un best-seller clasic</description>
</book>

De asemeni, putem defini scheme n interiorul documentului XML (maniera de definire

inline, care ns! nu este suportat! de analizorul ncorporat n Internet Explorer):
<?xml version="1.0"?>
<Studenti>
<Schema name="stud"
xmlns="urn:schemas-microsoft-com:xml-data"
xmlns:dt="urn:schemas-microsoft-com:datatypes">
<ElementType name="an" dt:type="int" />
<ElementType name="nume" dt:type="string" />
<ElementType name="student" order="seq">
<element type="an" />
<element type="nume" />
</ElementType>
</Schema>
<student xmlns="x-schema:#stud">
<!-- Referire la schema de mai sus -->
<an>4</an>
<nume>%tefan Tanas!</nume>
</student>
<student xmlns="x-schema:#stud">
<an>3</an>
<nume>Radu Filip</nume>
</student>
</Studenti>

Dac! sunt specificate dou! scheme cu acela"i nume, prima schem! va fi utilizat! pentru
validarea documentului. Acest lucru ns! depinde de analizorul XML folosit.
n cadrul unui document pot apare construc#ii de elemente "i atribute care vor fi validate
utilizndu-se scheme multiple, identificarea schemelor realizndu-se de cele mai multe ori
prin spa#iile de nume.
Extinderea schemelor
Spre deosebire de DTD-uri, n XML Schema se pot extinde schemele n func#ie de
necesit!#ile proiectan#ilor documentelor XML care pot ad!uga propriile lor elemente "i
atribute. Am definit n unul dintre exemplele precedente elementul <figures> de tip
"int" stabilind num!rul de figuri (ilustra#ii) care apar ntr-o carte. Putem s! impunem ca

B - 47

Tehnologii Web

acest num!r s! nu dep!"easc! 50. Astfel, extindem schema BookSchema n maniera de mai
jos:
<ElementType name="figures" xmlns="urn:infoiasi.ro:ext-book-schema">
<datatype dt:type="int" />
<extb:max>50</extb:max>
</ElementType>

Spa#iul de nume "extb" este definit la URN-ul specificat de atributul xmlns.

Dup! ce documentul va fi validat conform regulilor descrise de schema original!,
aplica#ia va putea s! verifice dac! valoarea con#inut! ntre <figures> "i </figures>
dep!"e"te sau nu valoarea 50.
XML Schema vs. DTD
De re#inut urm!toarele deosebiri ntre XML Schema "i DTD:
i.
Schemele "i DTD-urile utilizeaz! moduri diferite de specificare a
con#inutului documentelor XML. n cadrul unui model XML Schema deschis, un
element poate include defini#ii <ElementType> "i <AttributeType> din alte
scheme. Modelul XML Schema nchis "i DTD sunt similare.
ii.
n XML Schema tipurile posibile de date pentru elemente "i atribute pot fi
variate "i complexe, la specifica#ia XML-Data nc! lucrndu-se n prezent.
n cazul DTD, aceast! flexibilitate nu exist!.
iii.
Includerea declara#iilor de spa#ii de nume XML nu poate fi modelat! n
DTD. Schemele pot fi extinse, pe cnd DTD-urile prin natura lor sunt fixe.
<ElementType> poate avea un unic element descendent, ceea ce n DTD
iv.
nu se poate defini n mod strict.

v.
Datorit! folosirii sintaxei XML, schemele pot fi mai u"or create, validate "i
procesate, prin intermediul modelului DOM.
Exemple de procesare !i validare a schemelor
1. Pentru definirea multipl! a unui element ntr-o schem! vom primi
urm!torul mesaj de eroare din partea analizorului XML inclus n browserul Internet
Explorer:

B - 48

Tehnologii Web

Semnalarea erorii de definire multipl# a unui element ntr-o schem#

B - 49

Tehnologii Web

2. Specificarea eronat! a valorii atributului order n contextul utiliz!rii a mai

multor sub-elemente n cadrul elementului <book>:

Folosirea gre!it# a valorii atributului order

B - 50

Tehnologii Web

3. Utilizarea eronat! a valorii textOnly a atributului content atunci cnd

elementul va con#ine alte sub-elemente:

Definirea gre!it# a valorii atributului content

B - 51

Tehnologii Web

4. Validarea documentului se realizeaz! cu succes, de"i elementul <title>

apare de dou! ori "i n cadrul schemei a fost specificat pentru acest element
maxOccurs="1":

Validarea (ndoielnic#) a unei scheme

O alt! direc#ie complementar! este dat! de specificarea unei scheme de limbaj

(meta-gramatici) orientat!-obiect destinat! definirii structurii sintactice "i a semanticii
tipurilor de documente XML: Schema for Object-Oriented XML (SOX) aflat! la versiunea 2.0
(ultima actualizare a variantei de lucru desf!"urndu-se la sfr"itul lunii iulie 1999).

2.8 XML canonic

XML canonic, definit de James Clark, reprezint! un subset al limbajului XML, util pentru
testarea procesoarelor (analizoarelor) XML, ca mod de reprezentare a unui document XML
analizat. n prezent, n cadrul Consor#iului Web se lucreaz! la standardizarea specifica#iei
XML canonic.

B - 52

Tehnologii Web

Pentru fiecare document XML bine-formatat exist! un document XML canonic

echivalent cu documentul original.
Regulile de produc#ie corespunz!toare gramaticii care genereaz! limbaje XML canonice
sunt urm!toarele:
[0]
[1]
[2]
[3]
[4]

CanonXML
element
Stag
Etag
Pi

::=
::=
::=
::=
::=

[5] Atts
[6] Datachar

::=
::=
|
|
::=
::=
::=

[7] Name
[8] Char
[9] S

Pi* element Pi*

Stag (Datachar | Pi | element)* Etag
'<' Name Atts '>'
'</' Name '>'
'<?' Name ' ' (((Char - S) Char*)? (Char* '?>' Char*)) '?>'
(' ' Name '=' '"' Datachar* '"')*
'&amp;' | '&lt;' | '&gt;' | '&quot;'
'&#9;' | '&#10;' | '&#13;'
(Char - ('&' | '<' | '>' | '"' | #x9 | #xA | #xD))
(conform specifica#iei XML)
(conform specifica#iei XML)
(conform specifica#iei XML)

Regula [0] indic! faptul c! un document XML canonic poate ncepe "i se poate sf!r"i cu
un num!r de zero, una sau mai multe directive de procesare (Pi) "i poate con#ine m!car un
element, compus dintr-un tag de nceput "i dintr-un tag de sfr"it. ntre aceste tag-uri pot
exista date de tip caracter, alte directive de procesare sau elemente (regula [1]). Un tag de
nceput este prefixat de caracterul "<" urmat de un nume "i de o mul#ime (posibil vid!) de
atribute (conform regulilor [2] "i [5]). Un tag de sfr"it este prefixat de "/", urmat de numele
elementului "i de caracterul ">" (regula [3]). Instruc#iunile de procesare sunt specificate de
regula [4], iar atributele de regula [5]. Datele de tip caracter urmeaz! regula [6],
iar neterminalii Name, Char "i S sunt aceea"i din specifica#ia XML 1.0.

2.9 Viitor
Limbajul XML ofer! o metod! de comunicare inter-uman!, nu de interschimb de date
ntre ma"ini, realiznd rela#ii ntre creatori "i beneficiarii documentelor acestora.
XML mo"tene"te neutralitatea platformei, limbajului "i libertatea formatelor de date
prezente n SGML, dar prin XML Schema c"tig! n flexibilitatea specific!rii formale
a tipurilor "i modului de apari#ie a elementelor "i atributelor.

Nivelele XML

B - 53

Tehnologii Web

Toate aceste remarci ne dau certitudinea c! XML ofer! utilizatorilor un standard deschis
de marcare a informa#iilor, f!r! limite n ceea ce prive"te tehnicile de adnotare
(extensibilitate asigurat!), u"or de folosit (putnd conferi suport pentru baze de cuno"tin#e),
facil de implementat.
Viitorul XML nu va avea implica#ii doar asupra informaticienilor, ci "i asupra lumii
economice "i politice. Combina#ia XML cu XSL poate nlocui toate formatele de procesare
de texte "i publicare existente n prezent:

un format unic pentru publicarea pe Web "i tip!rituri;

un format comun pentru stocarea datelor n cadrul diverselor produse

software;

un format unic pentru toate limbile.

Astfel, beneficiile majore ale familiei de limbaje XML pot fi urm!toarele:

XML reprezint! un format flexibil de transmitere a informa#iilor pe Web;

XML este un standard deschis, independent de platforma hardware

"i software;

XML poate genera perspective multiple pentru acelea"i seturi de date;

XML ofer! suport pentru c!utarea inteligent! "i eficient! a datelor pe Web;

XML permite dezvoltarea de aplica#ii Web reale (concrete);

XML ofer! o scalabilitate (virtual) nelimitat!;

XML furnizeaz! suport pentru colectarea "i integrarea datelor provenite

din surse multiple;

XML d! posibilitatea de n#elegere pentru cititorul uman a documentelor

de dimensiuni mari.

Succesul XML poate fi ntrev!zut mai ales n lumea spa#iului Web, permi#nd crearea
de aplica#ii hipermedia complexe, dar "i n procesarea informa#iilor n general.

B - 54

Tehnologii Web

"Lucrurile nu sunt grele de f#cut, ceea ce este greu este s# fim n stare s# le facem."
(Constantin Brncu!i)

Tehnologii Web

1. MathML - limbaj de specificare a

expresiilor matematice
1.1 Introducere
MathML (Mathematical Markup Language) - ncepnd cu luna martie 2001,
versiunea curent! fiind MathML 2.0 - reprezint! o recomandare relativ recent! a
Consor#iului World Wide Web pentru descrierea nota#iilor din matematic!. Scopul acestei
recomand!ri (totodat! scopul pentru care a fost creat MathML) este acela de a realiza
o metod! prin care elementele matematice s! fie procesate pe Web ntr-un mod aseman!tor
proces!rii informa#iilor textuale realizate cu HTML. MathML se adreseaz! celor care
dezvolt! "i implementeaz! utilitare de analiz! "i editare de informa#ii cu specific matematic,
putnd fi u"or folosite n domenii "tiin#ifice, inginere"ti sau academice.
Problema codific!rii elementelor matematice pentru procesarea pe calculator a ap!rut cu
mult nainte de dezvoltarea Web-ului. O metod! de adnotare a expresiilor matematice
oferit! de TeX a fost elaborat! de Donald Knuth n anul 1986 "i era ("i este) utilizat! pe scar!
larg! nainte c! Web-ul s! devin! principalul beneficiar al metodelor de marcare.
Motivul pentru care a devenit necesar! specificarea pentru Web a expresiilor matematice
este c! HTML-ul nu este suficient de flexibil pentru a atinge acest deziderat "i pune mari
probleme la scrierea elementelor complexe din matematic!. Pn! la MathML,
metoda utilizat! pentru introducerea unei formule complicate ntr-o pagin! Web era
folosirea unei imagini care reprezenta la nivel grafic acea formul!.
Pentru a veni n ntmpinarea dorin#elor comunit!#ii "tiin#ifice, MathML a fost proiectat
s! satisfac! urm!toarele scopuri:

s! codifice elementele matematice ntr-un mod u"or de prezentat "i

de nv!#at;

s! codifice nota#ia matematic!, dar "i n#elesul matematic;

s! fie u"or de convertit n alte metode de prezentare;

s! poat! fi utilizat prin intermediul "abloanelor sau altor metode de editare;

s! fie independent de platform!.

1.2 Tipuri de elemente MathML

n MathML exist! elemente de prezentare, elemente de con"inut "i elemente de interfa"!.
Elementele de prezentare descriu structura nota#iei matematice. Exemple tipice sunt
elementele <mrow> care indic! o linie orizontal! (rnd) "i <msup> specificnd o putere.
De asemeni, elementele de prezentare accept! un num!r mare de atribute.
Elementele de con"inut descriu obiectele matematice n mod direct. Din aceast! categorie fac
parte elementul <plus> care denot! operatorul uzual de adunare "i elementul <vector>
specificnd un vector din algebra liniar!.

C-2

Tehnologii Web

Toate elementele sunt de tip prezentare sau con#inut, exceptnd elementul <math> care
joac! rol de element de cel mai nalt nivel (r!d!cin!), fiind element de interfa"!. Scopul acestuia
este s! trimit! c!tre procesorul MathML parametrii care vor afecta ntreaga expresie "i
s! comunice vizualizatorului MathML cum s! afi"eze expresia.

1.3 Exemple utiliznd elementele de prezentare

ncepem printr-un exemplu de reprezentare a unei ecua#ii de gradul doi, de forma:
x +4x+7=0. Codul de marcaje MathML va fi urm!torul:
2

<mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
</mrow>
<mo>+</mo>
<mn>7</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>

Observ!m apari#ia marcatorilor <mi> (identificator matematic), <mo> (operator

matematic) "i <mn> (num!r, constant! matematic!). De asemeni, n acest exemplu
se remarc! utilizarea entit!#ii InvisibleTimes folosit! pentru reprezentarea operatorului
de nmul#ire care n mod normal este subn#eles. n scrierea unui document MathML este
necesar! eviden#ierea tuturor operatorilor sau a altor elemente care apar ntr-o nota#ie
matematic!, chiar dac! ace"tia sunt subn#ele"i n scrierea uzual!, de mn!. Se poate observa
c! ecua#ia este descris! exact cum apare n mod obi"nuit, acesta fiind rolul elementelor de
prezentare.
n ceea ce urmeaz!, vom descrie n MathML r!d!cinile ecua#iei de gradul doi, adic!:

Fragmentul de document MathML va fi:

<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mrow>
<mo>-</mo>
<mi>b</mi>
</mrow>

C-3

Tehnologii Web

<mo>&PlusMinus;</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>a</mi>
<mo>&InvisibleTimes;</mo>
<mi>c</mi>
</mrow>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>

Se observ! c! s-a folosit o nou! entitate, PlusMinus, care refer! nota#ia uzual!
din matematic!.
Urm!torul exemplu va specifica o matrice patr!tic! de ordinul doi:

<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd>
<mi>x</mi>
</mtd>
<mtd>
<mi>y</mi>
</mtd>
</mtr>
<mtr>
<mtd>
<mi>z</mi>
</mtd>
<mtd>
<mi>w</mi>
</mtd>
</mtr>
</mtable>
</mfenced>
</mrow>

C-4

Tehnologii Web

n limbajul MathML exist! numeroase elemente posednd atribute utile pentru

a controla modul n care acestea apar pe ecran sau cum vor fi tip!rite. Marcajul
<mfenced> are rolul de a eviden#ia delimitatorii de la nceputul "i de la sfr"itul unei
expresii. Desigur, n loc de paranteze p!trate puteau fi folosi#i al#i delimitatori.
Se mai pot folosi marcatorii <mtext> pentru a insera un text n cadrul unei expresii
matematice sau <mchar> destinat s! adauge anumite simboluri care nu au corespondent n
alfabetul latin (i.e. literele grece"ti).

1.4 Exemple utiliznd elemente de coninut

Relund exemplul cu ecua#ia de gradul doi x2+4x+7=0, putem scrie n MathML
urm!toarele:
<reln>
<eq />
<apply>
<plus />
<apply>
<power />
<ci>x</ci>
<cn>2</cn>
</apply>
<apply>
<times />
<cn>4</cn>
<ci>x</ci>
</apply>
<cn>4</cn>
</apply>
<cn>0</cn>
</reln>

Acest mod de descriere este apropiat celui din limbajele de programare declarative
(folosind nota#ia polonez!) "i este mult mai u"or de procesat "i de analizat dect varianta
scris! cu ajutorul elementelor de prezentare. Se observ! c! nu este dificil s! descriem nota#ii
matematice utiliznd marcajele predefinite. Dup! cum era de a"teptat, elementele <ci> "i
<cn> sunt similare elementelor de prezentare <mi> "i <mn>, respectiv. Rolul marcatorului
<mo> este preluat de elementele de con#inut desemnnd operatorii matematici
(e.g. <plus>, <minus> sau <times>).
Pentru specificarea r!d!cinilor ecua#iei de gradul al doilea vom scrie urm!torul cod
MathML:
<reln>
<eq />
<ci>x</ci>
<apply>
<over />
<apply>
<fn occurrence="infix">
<mo>&PlusMinus;</mo>
</fn>
<apply>
<minus />
<ci>b</ci>
</apply>

C-5

Tehnologii Web

<apply>
<root />
<apply>
<minus />
<apply>
<power />
<ci>b</ci>
<cn>2</cn>
</apply>
<apply>
<times />
<cn>4</cn>
<ci>a</ci>
<ci>c</ci>
<apply>
</apply>
<cn>2</cn>
</apply>
</apply>
<apply>
<times />
<cn>2</cn>
<ci>a</ci>
</apply>
</apply>
</apply>
</reln>

1.5 Inserarea de marcaje MathML n alte

documente XML/HTML
Pentru ca documentele MathML s! fie utilizate corespunzator, ele trebuie s! fie
compatibile cu procesoarele, editoarele sau translatoarele existente. Deoarece limbajul
MathML a fost creat cu scopul de a insera expresii matematice n paginile Web, cel mai
important aspect este includerea marcajelor MathML n documente HTML.
n primul rnd, documentele MathML trebuie s! se integreze semantic n documentele
HMTL n sensul c! vizualizatoarele trebuie s! de#in! un mecanism de recunoa"tere "i de
procesare a marcajelor MathML. Mai exact, marcajele MathML trebuiesc tratate ca marcaje
XML, pentru care se face validarea "i se respect! modul de afi"area a spa#iilor.
Deoarece MathML se dore"te a fi ct mai general "i ct mai u"or de utilizat, chiar "i de
c!tre nespeciali"ti, apare necesitatea dezvolt!rii unor aplica#ii care genereaz! corect, n mod
automatizat, documente MathML complexe asigurnd faptul c! documentele sunt corecte
(valide n sens XML).
A"a cum am descris mai sus, n cadrul documentelor MathML va exista ntotdeauna un
element r!d!cin! denumit math. Atributele acestuia furnizeaz! informa#ii importante
despre ntreg documentul care va fi tratat unitar sau dup! valorile atributelor sale. Folosind
acest element, putem specifica introducerea de marcaje MathML n cadrul unui document
HTML astfel:

C-6

Tehnologii Web

<math xmlns="http://www.w3.org/1998/Math/MathML">
...
</math>

Dac! navigatoarele Web vor putea procesa HTML con#innd coduri MathML, atunci va
deveni posibil! "i procesarea invers!. De"i acest lucru este mai dificil, el constituie unul
dintre principalele subiecte de discu#ie n cadrul Consor#iului Web.
n prezent, exist! un singur navigator disponibil pentru realizarea "i vizualizarea de
expresii matematice folosind marcaje MathML - Amaya, care se conformeaz! standardului
MathML 1.0 "i variantelor de lucru ale MathML 2.0. Elementele de con#inut nu sunt nc!
suportate, putnd fi folosite doar elemente MathML de prezentare.
n plus, se pot asocia fragmentelor de expresii matematice leg!turi simple spre alte
resurse Web prin intermediul limbajului XLink:
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>y</mi>
<mo>=</mo>
<mi></mi>
<mfrac xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple"
xlink:href="http://www.infoiasi.ro/">
<mi>x</mi>
<msqrt>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mn>1</mn>
</mrow>
</msqrt>
</mfrac>
</mrow>
</math>

C-7

Tehnologii Web

Vizualizarea n navigatorul Amaya a unei pagini Web con"innd marcaje MathML

Amaya mai ofer! suport pentru documente XHTML "i ilustra#ii SVG (Scalable Vector
Graphics), plus pentru adnot!ri colaborative (folosind RDF, XLink "i XPointer),
prin intermediul proiectului-aplica#ie Annotea.

C-8

Tehnologii Web

Adnotarea codului XHTML sau MathML cu Annotea

De asemeni, se poate utiliza pachetul WebEQ pentru editarea "i includerea marcajelor
MathML n cadrul paginilor Web. Formulele concepute n MathML vor fi afi"ate prin
intermediul unui applet Java. Se pune la dispozi#ie "i un convertor automat al expresiilor
scrise ntr-un dialect TeX n documente MathML. Un alt translator TeX-MathML este
programul Omega elaborat de John Plaice.
O alternativ! la MathML este GELLMU (Generalized Extensible Latex-Like Markup),
limbaj de marcare propus de William Hammond foarte asem!n!tor LaTeX-ului destinat
reprezent!rii formulelor matematice pe Web. Aplica#iile suportnd GELLMU sunt
a"teptate s! apar! n cursul anului 2001.

C-9

Tehnologii Web

2. RDF - cadru de descriere

a resurselor Internet
2.1 Prezentare general
Spa#iul cibernetic a fost ini#ial conceput pentru a u"ura reg!sirea de c!tre calculator a
oric!rei date indiferent de localizarea ei, far! a se pune problema n#elegerii semnifica#iei
acesteia de c!tre ma"in!. Din cauza volumului tot mai mare de informa#ii prezent pe Web
este dificil de a automatiza reg!sirea lor inteligent!, cu att mai pu#in de c!tre operatorul
uman.
Una dintre solu#ii, pe care o vom prezenta n continuare ca studiu de caz, este de a utiliza
metadate pentru descrierea datelor con#inute de Internet. Metadata reprezint! un set de
date referitoare la date (resurse Web).
RDF (Resource Description Framework) este un cadru menit s! proceseze
metadatele, oferind interoperabilitatea ntre diverse aplica#ii care realizeaz! schimbul
inteligent de informa#ii, n sensul n#elegerii de c!tre ma"in! a semanticii acestora.
RDF "i g!se"te loc n utiliz!ri precum:

inspectarea resurselor, oferind noi capabilit!#i motoarelor de c!utare;

catalogarea datelor pentru descrierea "i/sau evaluarea con#inutului "i rela#iilor

ntre diverse informa#ii stocate intr-o bibliotec! electronic!, site Web "i altele;

agen"i inteligen"i, facilitnd schimbul "i partajarea cuno"tin#elor;

descrierea drepturilor de proprietate intelectual! a paginilor Web;

securitate personal! sau general! a datelor (oferind suport pentru semn!turi digitale
utile n comer#ul electronic, tranzac#ii economice "i juridice etc.).

RDF folose"te limbajul XML pentru reprezentarea sintactic! a metadatelor. Unul dintre
scopurile cadrului este de a face posibil! specificarea semantic! a datelor, bazat! pe XML,
printr-o metod! standardizat!, independent! de ma"in!, extensibil!. RDF "i XML sunt
complementare n acest sens.
n primul rnd, RDF trebuie s! defineasc! un mecanism de descriere a resurselor
independent de domeniul de folosire a datelor, f!r! a specifica a priori vreo semantic!.
Definirea acestui mecanism trebuie s! r!mn! neutr!, dar general!, dup! cum vom vedea
mai jos.
Pentru a facilita definirea datelor RDF, va fi necesar un sistem de clase similar celui din
programarea orientat!-obiect. O colec#ie de clase (dezvoltat! pentru un anumit scop
specific) se nume"te schem#. Clasele sunt organizate ierarhic oferind extensibilitatea prin
rafinarea subclaselor. Astfel, pentru crearea unei noi scheme putem s! ne baz!m pe o
schem! de baz! (un fel de clas! abstract! n termenii program!rii obiectuale). Se asigur! n
acest mod "i reutilizarea defini#iilor de metadate. Datorit! caracterului extensibil, agen#ii
care proceseaz! metadatele vor fi capabili de versatilitate n manipularea schemelor.
Mo"tenirea multipl! permite exploatarea n mai multe metode a acelea"i informa#ii.
Este posibil s! cre!m instan#e de date RDF bazate pe multiple scheme din diverse surse.
C - 10

Tehnologii Web

Influen#a RDF se poate ntrevedea n structurarea inteligent! a documentelor (realizat! n

SGML ori XML), n reprezentarea cuno$tin"elor (KR - Knowledge Representation),
n standardizarea Web-ului. Alte arii de interes ar fi limbajele orientate-obiect "i de modelare a
cuno"tin#elor sau bazele de date distribuite. RDF ar putea fi solu#ia n dezvoltarea a ceea ce
creatorul spa#iului WWW, Tim Berners-Lee, nume"te a fi Semantic Web
(o pnz! consistent! "i logic! a tuturor resurselor de pe Web).

2.2 Modelul de baz al RDF

Modelul de baz! se construie"te cu ajutorul urm!toarelor tipuri de obiecte:

resurse
Datele descrise de expresiile RDF sunt denumite resurse. O resurs! poate
fi o pagin! Web complet! (de exemplu un document HTML desemnat
printr-un
localizator
uniform
de
resurse
(URL)
precum
http://www.infoiasi.ro/~busaco/index.html), o parte a unei
pagini Web (un element specific HTML sau XML prezent n sursa
documentului, de pild! o imagine) sau un obiect care nu este direct accesibil
via Web (e.g. o carte tiparit!). Resursele sunt specificate de URI-uri plus un
identificator de leg!tur!, op#ional. A"a cum am v!zut, un URI poate
specifica orice.

propriet#"i
O proprietate reprezint! un aspect specific, o caracteristic!, un atribut sau
o rela#ie pentru a descrie o resurs!. Fiecare proprietate posed! o semantic!, un
set de valori permise, o mul#ime de tipuri de resurse pe care le descrie "i un set
de rela#ii (interdependente) cu alte propriet!#i.

declara"ii
O anumit! resurs! mpreun! cu o proprietate a sa avnd asignat! o valoare
formeaz! o declara"ie. Putem privi declara#ia ca un 3-uplu: {subiect,
predicat, obiect}. Obiectul declara#iei (valoarea propriet!#ii) poate desemna o
alt! resurs! (specificat! de un URI) sau un literal (tip primitiv de dat! sau "ir de
caractere, conform specifica#iilor XML). n modelul RDF, un literal poate
con#ine marcaje XML care ns! nu vor fi evaluate (analizate) de
procesorul RDF.

2.3 Modul de reprezentare

Declara#iile se pot reprezenta astfel:

graf orientat: nodurile sunt fie subiecte fie obiecte, iar arcele semnific! un
predicat;

marcaje: <subject> HAS <predicate> <object>

RDF/XML (vezi mai jos)

O proprietate poate avea drept valoare o entitate structurat!:

C - 11

Tehnologii Web

Individul Sabin Corneliu Buraga, avnd adresa

busaco@infoiasi.ro, este creatorul resursei
http://www.infoiasi.ro/~busaco/odix.

n acest caz, obiectul nu va fi un "ir de caractere, ci o colec#ie format! din trei literali:
"individ", "Sabin Corneliu Buraga", "busaco@infoiasi.ro". Vom vedea

ulterior cum specific!m acest lucru n RDF.

2.4 Sintax
Sintaxa
a de baza RDF
Vom da descrierile sintactice n nota#ia EBNF (Extended Backus-Naur Form).
Toate facilit!#ile sintactice din XML (regulile spa#iilor albe, diferen#ele dintre apostrof "i
ghilimele, senzitivitatea caracterelor, modurile de adnotare) sunt suportate.
Mai multe defini#ii pentru o anumit! resurs! pot fi grupate n cadrul elementului
Description (suport pentru ncapsulare).

Regulile sintactice sunt urm!toarele:

[1]
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
[11]
[12]
[13]
[14]
[15]

RDF
descript

::= ['<rdf:RDF>'] descript* ['</rdf:RDF>']

::= '<rdf:Description' idAboutAttr? '>' propElt*
'</rdf:Description>'
idAboutAttr ::= idAttr | aboutAttr
idAttr
::= 'ID="' Idsymbol '"'
aboutAttr ::= 'about="' URI-ref '"'
propElt
::= '<' propName '>' value '</' propName '>' |
'<' propName resAttr '/>'
propName ::= Qname
value
::= descript | string
resAttr
::= 'resource="' URI-ref '"'
Qname
::= [ NSprefix ':' ] name
URI-ref
::= string
IDsymbol ::= (orice simbol legal XML)
name
::= (orice simbol legal XML)
NSprefix ::= (orice prefix al spa#iului de nume din XML)
string
::= (orice text XML)

rdf reprezentat cu italice este utilizat pentru a reprezenta un prefix al spa#iului de nume,
util pentru imbricarea exact! a tag-urilor de nceput "i de sfr"it.
Pentru exemplul de mai sus, avem:
<rdf:RDF>
<rdf:Description about="http://www.infoiasi.ro/~busaco/odix">
<s:Creator>Sabin Corneliu Buraga</s:Creator>
</rdf:Description>
</rdf:RDF>

Aici prefixul 's' se refer! la un prefix specific ales de autorul expresiei RDF "i definit
ntr-o declara#ie a spa#iului de nume XML, conform unei scheme de forma:
xmlns:s="http://description.org/schema/".

C - 12

Tehnologii Web

2.5 Scheme i spaii de nume

Atunci cnd scriem o afirma#ie n limbaj natural, utiliz!m cuvinte care au un anumit
n#eles pentru noi "i pentru cel c!ruia i este adresat!. n#elegerea semanticii propozi#iei este
crucial! n stabilirea cu exactitate a proces!rii care trebuie urmat!. Este extrem de important
ca att scriitorul ct "i cititorul enun#ului s! recepteze acela$i n#eles al termenilor utiliza#i,
altfel s-ar crea confuzii. n mediul global reprezentat de WWW nu este suficient a ne ghida
dup! n#elegerea cultural! comun! a conceptelor.
n#elesul unui termen (lingvistic sau nu) n RDF este exprimat printr-o referin#! la o
schem#. Putem privi schema ca un fel de dic#ionar, definind termenii pe care i vom utiliza
n declara#iile RDF "i asociindu-le o semantic! precis!. Se pot folosi o varietate de scheme,
specificate sau nu ca documente separate.
O schem! con#ine defini#ii "i restric#ii de utilizare a propriet!#ilor. Pentru evitarea
confuziilor dintre defini#iile independente a unui acela"i obiect, RDF se bazeaz! pe
facilitatea spa#iilor de nume din XML. Dup! cum am v!zut, spa#iile de nume ofer! o
modalitate simpl! de a folosi la un moment dat o unic! defini#ie a unui termen.
Fiecare predicat al unei declara#ii RDF trebuie identificat de o unic! schem!. Un element
Description poate ns! con#ine declara#ii avnd predicate din mai multe scheme.

2.6 Schemele n detaliu

Declararea propriet!#ilor (atributelor) unor resurse "i semantica asociat! lor se realizeaz!
prin intermediul schemelor. RDF poate fi v!zut astfel "i ca limbaj de specificare a schemelor,
fiind mai facil de implementat dect limbajele mai complexe CycL (The CYC Representation
Language) sau KIF (Knowledge Interchange Format). Schemele RDF au la baz! idei preluate din
reprezentarea cuno"tin#elor (re#ele semantice, logica predicatelor) ori din limbajele de
specificare a bazelor de date.
O schem! const! dintr-un set de clase "i propriet!#i. Sunt definite o serie de clase "i de
propriet!#i fundamentale. De asemeni, pentru schemele RDF se define"te un spa#iu de
nume XML denumit rdfs.

Seturile de clase !i propriet#"i

C - 13

Tehnologii Web

Clase fundamentale
rdfs:Resource define"te clasa resurselor, corespunznd conceptului de

obiect din limbajele de programare orientate-obiect.

rdf:Property reprezint! clasa propriet!#ilor resurselor.

rdfs:Class corespunde conceptului general de tip sau categorie. Cnd o

schem! define"te o nou! clas!, resursa reprezentnd acea clas! trebuie s! aib! o
proprietate rdfs:type a c!rei valoare este resursa rdfs:Class. Clasele RDF
pot specifica, de exemplu, pagini Web, tipuri de documente, baze de date,
persoane etc.

Ierarhiile de clase RDF

Propriet#"i fundamentale
Fiecare model RDF care utilizeaz! un mecanism de scheme include, n mod implicit,
propriet!#ile de mai jos, instan#e ale clasei rdf:Property, oferind o modalitate de a
exprima rela#iile dintre clase "i instan#ele lor sau supraclase.

rdf:type

Indic! faptul c! o resurs! este membr! a unei clase. Atunci cnd o resurs!
are o proprietate rdf:type a c!rei valoare reprezint! o anumit! clas!, vom
spune c! resursa este o instan"# a acelei clase. Valoarea lui rdf:type
pentru o resurs! este o alt! resurs!, instan#! a lui rdfs:Class. Clasele
individuale ntotdeauna vor avea rdf:type asignat! cu valoarea
rdfs:Class (ori o sub-clas! a lui rdfs:Class). O resurs! poate fi
instan#! a mai multor clase, desigur.

rfds:subClassOf

Desemneaz! rela#ia de mo"tenire a claselor. Este o rela#ie tranzitiv!.

rdfs:Class
pot
avea
proprietatea
Doar
instan#ele
lui

C - 14

Tehnologii Web

rfds:subClassOf "i valoarea ei este ntotdeauna rdf:type

rdfs:Class. O clas! poate fi sub-clas! a mai multor clase. O clas!

niciodat! nu poate fi declarat! ca sub-clas! a ei ns!"i sau drept sub-clas! a

sub-claselor sale.

rdfs:subPropertyOf

O proprietate poate avea zero, una sau mai multe propriet!#i, specializ!ri
ale ei. Dac! o anumit! proprietate P1 este o subproprietate a unei proprieta#i
mai generale P2 "i dac! o resurs! A are proprietatea P2 avnd asignat!
valoarea B, atunci aceasta implic! faptul c! resursa A are de asemeni
proprietatea P1 cu valoarea B.
Restric"ii
O schem! poate declara anumite restric#ii asociate claselor "i propriet!#ilor. n jargonul
RDF, vor fi folosite conceptele de domeniu (domain) "i interval (range).

Restric"iile n RDF

Un model care nu respect! o restric#ie este un model inconsistent. Diverse aplica#ii pot avea
comportamente eronate n cadrul unui model inconsistent.
Exemple de restric#ii:

valoarea unei propriet!#i trebuie s! fie o resurs! ori o clas! definit! de

proiectantul unei scheme. Aceast! restric#ie este exprimat! de proprietatea range
(de exemplu, restric#ia aplicat! propriet!#ii "autor": valoarea ei trebuie s! fie o
resurs!, instan#! a clasei "Persoan!".

o proprietate poate fi utilizat! doar de resursele unei anumite clase

(de exemplu, proprietatea "autor" poate fi folosit! numai dac! valoarea ei este o
resurs! a c!rei instan#! este clasa "Tratat"). Acest lucru se exprim! prin
proprietatea domain.

C - 15

Tehnologii Web

Restric"ii fundamentale

rdfs:ConstraintResource
define"te
o
sub-clas!
a
lui
rdfs:Resource ale c!rei instan#e sunt construc#ii de scheme implicate n

exprimarea restric#iilor (mecanism de verificare de c!tre procesoarele RDF a

consisten#ei unui model).
rdfs:Range este folosit! pentru a restric#iona valorile unei propriet!#i.
Valoarea lui range este ntotdeauna o clas!. Valoarea unei propriet!#i al c!rei

interval este A va fi constrns! s! fie instan#! a clasei A. Putem avea cel mult
o proprietate range.

rdfs:domain este utilizat! s! specifice o clas! care poate fi asignat! ca

valoare a unei propriet!#i. O proprietate poate avea valori din zero, una sau mai
multe clase. Dac! nu exist! vreun domeniu, poate fi folosit! oricare resurs!.

2.7 Colecii de resurse

Este necesar deseori s! utiliz!m colec#ii de resurse, pentru aceasta n RDF definindu-se
trei tipuri de obiecte:

bag - list! neordonat! de resurse sau literali, valorile duplicate fiind permise;

secven"# - list! ordonat! de resurse sau literali. Ca mai sus, valorile pot fi
duplicate;

alternativ# - o list! de resurse/literali care reprezint! alternative pentru

o singur! valoare a unei propriet!#i.

Tipul mul#ime nu este nc! definit de specifica#iile RDF.

Pentru a crea o colec#ie de resurse, RDF utilizeaz! o resurs! suplimentar! care reprezint!
o colec#ie specific! (o instan"! a colec#iei), aceast! resurs! declarndu-se ca instan#! a unui
tip din cele anterioare, prin proprietatea type. Rela#ia dintre colec#ia de resurse "i resursele
ce apar#in acesteia este dat! de un set de propriet!#i denumite "_1", "_2", "_3" etc.
Colec#iile de resurse pot avea "i alte propriet!#i, desigur.
Sintaxa formal! este urm!toarea:
[16]
[17]
[18]
[19]
[20]
[21]
[22]

contain
::=
seq
::=
bag
::=
alt
::=
member
::=
referItem ::=
inlineItem::=

seq | bag | alt

'<rdf:Seq' idAttr? '>' member* '</rdf:Seq>'
'<rdf:Bag' idAttr? '>' member* '</rdf:Bag>'
'<rdf:Alt' idAttr? '>' member* '</rdf:Alt>'
referItem | inlineItem
'<rdf:li resourceAttr '/>'
'<rdf:li>' value '</rdf:li>'

Colec#iile pot apare oriunde este permis un element Description, deci regulile
sintactice se modific! astfel:
[1a]
[8a]
[23]

RDF
::= '<rdf:RDF>' obj* '</rdf:RDF>'
value ::= obj | string
obj
::= descript | contain

C - 16

Tehnologii Web

Exemple:
a.

Modelul pentru enun#ul:

Studen#ii cursului de Limbaj Natural

sunt Cristina, Mihaela "i Cosmin.

este scris n RDF n modul urm!tor:

<rdf:RDF>
<rdf:Description about="http://www.infoiasi.ro/courses/nlp">
<s:Students>
<rdf:Bag>
<rdf:li resource="http://www3.infoiasi.ro/~Cristina" />
<rdf:li resource="http://www3.infoiasi.ro/~Mihaela" />
<rdf:li resource="http://www3.infoiasi.ro/~Cosmin" />
</rdf:Bag>
</s:Students>
</rdf:Description>
</rdf:RDF>

b.

Modelul pentru propozi#ia:

Codul surs! pentru serverul GAEN poate fi g!sit la

ftp.infoiasi.ro, ftp.uaic.ro sau hal.cs.tuiasi.ro.

n RDF/XML se scrie astfel:

<rdf:RDF>
<rdf:Description about="http://www.infoiasi.ro/~busaco/gaen">
<s:DistributionSite>
<rdf:Alt>
<rdf:li resource="ftp://ftp.infoiasi.ro" />
<rdf:li resource="ftp://ftp.uaic.ro/pub/misc/gaen" />
<rdf:li resource="ftp://hal.cs.tuiasi.ro/pub/src/Unix" />
</rdf:Alt>
</s:DistributionSite>
</rdf:Description>
</rdf:RDF>

2.8 Refereni distributivi

Obiectul descris de o declara#ie RDF (indicat de atributul about) este numit referent.
n urm!torul exemplu:
<rdf:Bag ID="pages">
<rdf:li resource="http://www.infoiasi.ro/web/web1.html">
<rdf:li resource="http://www.infoiasi.ro/web/web2.html">
<rdf:li resource="http://www.infoiasi.ro/web/web3.html">
...
</rdf:Bag>
<rdf:Description about="#pages">
<s:Creator>Sabin Corneliu Buraga</s:Creator>
</rdf:Description>

C - 17

Tehnologii Web

exprim!m faptul c! 'Sabin Corneliu Buraga' este creatorul colec#iei de pagini 'pages'.
Referentul elementului Description este o colec#ie (de tip bag), nu membrii ei. Pentru a
specifica faptul c! 'Sabin Corneliu Buraga' este creatorul fiec!rei pagini, se folose"te un alt
tip de referire, dat de atributul aboutEach, acest tip de referent fiind numit
referent distributiv.
<rdf:Description aboutEach="#pages">
<s:Creator>Sabin Corneliu Buraga</s:Creator>
</rdf:Description>

2.9 Colecii referite de un URI

Una dintre utiliz!rile metadatelor este cea de a face declara#ii despre "toate paginile Web
disponibile pe un anumit server" sau "toate paginile Web descriind un anumit aspect, aflate
la o adres! specific!". n multe cazuri este dificil ori neimportant s! ncerc!m s! enumer!m
fiecare resurs! n mod explicit "i s! o identific!m ca membru al unei colec#ii. Folosind o a
doua form! de referen#i distributivi putem crea o colec#ie de tip Bag pentru a defini toate
resursele care ne intereseaz! n aplica#iile noastre:
[3a]
[24]

idAboutAttr ::= idAttr | aboutAttr | aboutEachAttr

aboutEachAttr ::= 'aboutEach="' URI-ref '"' |
'aboutEachPrefix="' string '"'

Atributul aboutEachPrefix declar! o colec#ie ale c!rei membri sunt toate resursele
corespunz!toare identificatorilor care ncep cu "irul de caractere al valorii atributului.
Un exemplu:
Pentru toate paginile Web prezente pe serverul Facult!#ii de Informatic! putem seta
o proprietate de copyright scriind:
<rdf:Description aboutEachPrefix="http://www.infoiasi.ro">
<s:Copyright>1997-2001,
Sabin Corneliu Buraga</s:Copyright>
</rdf:Description>

Nu ne intereseaz! cte documente exist! pe disc "i nici interdependen#a lor.

2.10 Declaraii despre declaraii

n cadrul RDF se pot construi declara#ii privitoare la alte declara#ii. Vom numi acest tip
de declara#ii: declara"ii de nivel nalt.
Modelarea declara"iilor
Considernd afirma#ia:
Sabin Corneliu Buraga este creatorul resursei http://www.infoiasi.ro.

o putem vedea ca un fapt (asem!n!tor clauzelor Prolog).

Dac! ns! avem enun#ul:

C - 18

Tehnologii Web

Dumitru Todoroi spune c! Sabin Corneliu Buraga este

creatorul resursei http://www.infoiasi.ro.

exprim!m un fapt despre o afirma#ie f!cut! de altcineva.

Putem modela, dup! cum vom vedea mai jos, declara#ia original! ca o resurs! avnd
patru propriet!#i. Acest proces este denumit, n termenii reprezent!rii cuno"tin#elor,
reificare (reification).
Se definesc urm!toarele propriet!#i:

subiect
identific! resursa descris! de declara#ia modelat!; valoarea subiectului este
resursa specificat! n declara#ia ini#ial! (n exemplul nostru
http://www.infoiasi.ro);

predicat
identific! proprietatea original! (reprezentnd n cazul nostru creatorul);

obiect
specific! valoarea propriet!#ii declara#iei modelate (aici Sabin Corneliu
Buraga);

tip
descrie tipul noii resurse. Toate declara#iile reificate sunt instan#e ale lui
RDF:Statement. Astfel, ele au o proprietate type al c!rei obiect este
RDF:Statement. Proprietatea type se poate folosi pentru declararea

oric!rui tip de resurs!, c"tignd n acest mod flexibilitate.

2.11 Modelul formal al RDF

Putem reprezenta modelul metadatelor prin trei metode: ca 3-uple, ca graf orientat,
ca marcaje XML, aceste reprezent!ri fiind echivalente.
Formal, un model al datelor RDF se define"te astfel:
1. Fie mul#imile denumite Resurse, Literali "i Declara#ii "i o
submul#ime numit! Propriet!#i a mul#imii Resurse.
2. Elementele mul#imii Declara#ii sunt 3-uple de forma {pred, sub, obj},
n care fiecare pred este o proprietate apar#innd mul#imii Propriet!#i, sub este o
resurs! (element al mul#imii Resurse) "i obj este fie o resurs!, fie un literal
(un literal este element al mul#imii Literali).
Fie 3-uplul {p, s, o} apar#innd mul#imii Declara#ii. Atunci, l putem interpreta
(lingvistic) n maniera urm!toare:
o este valoarea lui p pentru s

sau
s are proprietatea p avnd asignat! valoarea o

C - 19

Tehnologii Web

De exemplu, afirma#ia:
Sabin Corneliu Buraga este creatorul resursei http://www.infoiasi.ro.

are asociat 3-uplul (element al mul#imii Declara#ii):

d: {creator, [http://www.infoiasi.ro], "Sabin Corneliu Buraga"}

n care am notat [I] resursa identificat! prin URI-ul I, iar ghilimelele ncadreaz! un literal.
Utiliznd 3-uple, putem specific! reificarea declara#iilor. Dat! declara#ia (d) de mai sus,
exprim!m reificarea acesteia ca o nou! resurs! X dup! cum urmeaz!:
{type,
{predicate,
{subject,
{object,

[X],
[X],
[X],
[X],

[RDF:Statement]}
[creator]}
[http://www.infoiasi.ro]}
"Sabin Corneliu Buraga"}

Cele patru 3-uple specific! propriet!#ile declara#iei reificate.

Proprietatea type define"te tipuri primitive, astfel:
3. Exist! un element al mul#imii Propriet!#i cunoscut drept RDF:type,
un 3-uplu {RDF:Type, sub, obj} avnd sub "i obj elemente ale mul#imii
Resurse.
4.

Exist! un element al mul#imii Resurse, care nu apar#ine mul#imii

Propriet!#i, notat RDF:Statement.
5. Exist! trei elemente ale mul#imii Propriet!#i
RDF:predicate, RDF:subject "i RDF:object respectiv.

denumite

6. Reificarea unui 3-uplu {pred, sub, obj} din Declara#ii const! dintr-un
element r apar#innd mul#imii Resurse "i din elementele s1, s2, s3, s4 ale mul#imii
Declara#ii avnd forma:

s1: {RDF:predicate, r, pred}

s2: {RDF:subject, r, sub}

s3: {RDF:object, r, obj}

s4: {RDF:type, r, [RDF:Statement]}

Regulile de mai sus formalizeaz! procesul de reificare, iar resursa r se nume"te

declara"ie reificat#.
RDF define"te trei tipuri de colec#ii de resurse: liste ordonate (Sequences), liste neordonate
(Bags) "i liste reprezentnd alternative pentru o (unic!) valoare a unei propriet!#i
(Alternatives).
Formal, acestea se definesc prin:
7. Exist! trei elemente ale mul#imii Resurse care nu apar#in mul#imii
Propriet!#i, denumite RDF:Seq, RDF:Bag "i RDF:Alt.
8. Exist! o submul#ime a mul#imii Propriet!#i corespunz!toare ordinalilor
(1, 2, 3,...) numit! Ord. Elementele lui Ord se specific! prin RDF:_i, cu i=1, 2, 3...

C - 20

Tehnologii Web

Pentru a crea o colec#ie c, vom considera un 3-uplu {RDF:type, c, t}, unde t este
unul din cele trei tipuri (RDF:Seq, RDF:Bag sau RDF:Alt). Fiecare membru rn al colec#iei
c este definit de {RDF:_i, c, ri}, cu i=1,n.

2.12 Aplicaii
Exist! deja definite, avnd ca suport cadrul de descriere a resurselor Internet prezentat
aici, diverse metadate utilizate n aplica#iile Web. n continuare ne vom ocupa numai de o
modalitate de a descoperi resursele electronice ntr-o manier! similar! celei de consultare a
unui catalog de bibliotec!: Dublin Core Metadata, folosind vocabulare definite de
Dublin Core Initiative.
Se specific! spa#iile de nume: dc (Dublin Core) disponibil la adresa
http://purl.org/metadata/dublin_core "i dcq (Dublin Core Qualifiers) la
adresa http://purl.org/metadata/dublin_core_qualifiers. n fapt, Dublin
Core Metadata define"te o schem! avnd 15 propriet!#i de baz! utile pentru descrierea
oric!rei resurse Web, n special pentru activit!#i de c!utare "i pentru constituirea
bibliotecilor digitale.
Prezent!m un exemplu de descriere inteligent! a unei publica#ii electronice disponibile
pe Web.
<rdf:RDF
xmlns:rdf="http://www.w3.org/TR/1999/PR-rdf-syntax#"
xmlns:dc="http://purl.org/metadata/dublin_core#"
xmlns:dcq="http://purl.org/metadata/dublin_core_qualifiers#">
<rdf:Description about="http://www.infoiasi.ro/circles">
<dc:Title>Circles - an electronic magazine</dc:Title>
<dc:Description>Circles este o revist!
electronic! independent! care
a ap!rut regulat n perioada
februarie 1997 - mai 2000, mbinnd "tiri
din lumea informaticii cu aspecte
culturale "i artistice.
</dc:Description>
<dc:Contributor rdf:parseType="Resource">
<dcq:AgentType
rdf:resource=
"http://purl.org/metadata/dublin_core_qualifiers#Editor"
/>
<rdf:value>Sabin Corneliu Buraga</rdf:value>
</dc:Contributor>
<dc:Publisher>Faculty of Computer Science</dc:Publisher>
<dc:Date>1997-17-02</dc:Date>
<dc:Type>electronic magazine</dc:Type>
<!-- subiectul abordat (colec#ie) -->
<dc:Subject>
<rdf:Bag>
<rdf:li>computer science</rdf:li>
<rdf:li>literature and art</rdf:li>
<rdf:li>other different topics</rdf:li>
</rdf:Bag>
</dc:Subject>
<!-- formatul revistei: cmpuri MIME -->
<dc:Format>
<rdf:Bag>
<rdf:li>text/html</rdf:li>

C - 21

Tehnologii Web

<rdf:li>image/jpeg</rdf:li>
<rdf:li>image/gif</rdf:li>
</rdf:Bag>
</dc:Bag>
<!-- rela#ia cu serverul infoiasi.ro -->
<dc:Relation rdf:parseType="Resource">
<dcq:RelationType
rdf:resource=
"http://purl.org/metadata/dublin_core_qualifiers#IsPartOf" />
<rdf:value resource="http://www.infoiasi.ro" />
</dcf:RelationType>
</dc:Relation>
</rdf:Description>
</rdf:RDF>

Analiza documentelor RDF

Pentru testarea diverselor specifica#ii scrise n RDF se poate folosi SiRPAC
(Simple RDF Parser and Compiler), set de clase Java conceput ini#ial de Janne Saarela.
Aceste clase pot fi utilizate s! analizeze documentele RDF/XML "i s! genereze 3-uplele
corespunz!toare modelului formal prezentat mai sus. n fapt, SiRPAC reprezint! un servlet
Java bazat pe procesorul SAX al organiza#iei Megginson. n prezent aplica#ia SiRPAC este
disponibil! gratuit pe Web "i permite vizualizarea arborescent! a elementelor dintr-o
declara#ie RDF.
Vom da n continuare un exemplu de validare a unui fragment de document RDF,
folosind exemplul referitor la specificarea enuntului "Studen"ii cursului de Limbaj Natural sunt
Cristina, Mihaela $i Cosmin". Pentru ca exemplul s! fie deplin func#ional, am utilizat spa#iile
de
nume
RDF
"i
DC,
prin
intermediul
atributelor
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" "i, respectiv,
xmlns:DC="http://purl.org/dc/elements/1.0/".
Interfa#a procesorului SiRPAC poate fi vizualizat! n urm!toarea figur!:

C - 22

Tehnologii Web

Introducerea unui document RDF pentru a fi procesat de analizorul SiRPAC

n urma analizei, s-au generat urm!toarele 3-uple ale modelului de date RDF:
triple('http://www.w3.org/1999/02/22-rdf-syntax-ns#type',
'#genid3',
'http://www.w3.org/1999/02/22-rdf-syntax-ns#Bag').
triple('http://www.w3.org/1999/02/22-rdf-syntax-ns#_1',
'#genid3',
'http://www3.infoiasi.ro/~Cristina').
triple('http://www.w3.org/1999/02/22-rdf-syntax-ns#_2',
'#genid3',
'http://www3.infoiasi.ro/~Mihaela').
triple('http://www.w3.org/1999/02/22-rdf-syntax-ns#_3',
'#genid3',
'http://www3.infoiasi.ro/~Cosmin').
triple('Students',
'http://www.infoiasi.ro/courses/nlp',
'#genid3').

Reprezentarea grafic! a arborelui RDF este dat! n urm!toarea figur!:

C - 23

Tehnologii Web

Arborele generat de analizorul SiRPAC

n acest mod pot fi validate "i studiate, ntr-o manier! facil!, orice documente RDF,
introduse fie prin intermediul unui formular, fie indicnd URL-ul unde au fost stocate
pe Web.

2.13 RDF implementat n Netscape/Mozilla

Numai browserele Netscape 6 "i varianta sa open-source Mozilla implementeaz!,
n prezent, specifica#iile RDF, pentru men#inerea unei baze de date de mici dimensiuni
con#innd anumite informa#ii interne "i, mai important, utilizeaz! modelul RDF mpreun!
cu "abloanele XUL ca interfa#! abstract! de programare pentru afi"area informa#iilor.
Despre XUL vom discuta n detaliu n sub-capitolul urm!tor.
Sursele de date n Mozilla/Netscape sunt manipulate via RDF prin intermediul unui
manager de componente (Component Manager), utilizndu-se un URI special de forma
component://netscape/rdf/datasource?name=valoare. Aceste surse de date
pot fi lista de URI-uri stocate de bookmark-ul browserului, istoricul navig!rii, lista serverelor
interogate pentru ob#inerea po"tei electronice (prin intermediul protocolului IMAP) etc.
Astfel, navigatorul furnizeaz! diverse servicii interne RDF instan#iate "i interogate prin
intermediul metodelor JavaScript:
var RDF =
Components
.classes["component://netscape/rdf/rdf-service"]
.getService(Components.interfaces.nsIRDFService);

C - 24

Tehnologii Web

// preia n mod asincron un fi"ier RDF

var ds = RDF.GetDataSource("http://www.mozilla.org/rdf_file.rdf");
// se verific! dac! a fost nc!rcat sau nu
var remote =
ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
if (remote.loaded) {
alert("Sursa de date a fost nc!rcat!!");
}
else {
alert("Sursa de date nc! n-a fost nc!rcat! complet...");
}

Pentru accesarea datelor din bookmark-ul navigatorului putem utiliza urm!torul cod:
// utilizeaz! managerul de componente
var bookmarks =
Components.
classes["component://netscape/rdf/datasource?name=bookmarks"].
getService(Components.interfaces.nsIRDFDataSource);
// prelucreaz! intr!rile din bookmark
if (bookmarks.HasAssertion(
RDF.GetResource("http://home.netscape.com/NC-rdf#BookmarksRoot"),
RDF.GetResource("http://home.netscape.com/NC-rdf#child"),
RDF.GetResource("http://home.netscape.com/NCrdf#PersonalToolbarFolder"),
true) {
/* prelucreaz! datele */
}

Fi"ierul de bookmark-uri este un document XML (n particular XUL) de forma

urm!toare:
<tree datasources="rdf:bookmarks">
...
</tree>

Manipularea colec#iilor de date RDF (e.g. <rdf:Seq>) se realizeaz! prin intermediul

URI-urilor speciale component://netscape/rdf/container-utils, func#iile de
interogare a existen#ei unei colec#ii fiind IsSeq(), IsBag() "i IsAlt(). Pentru crearea
unei colec#ii poate fi folosit! una dintre func#iile JavaScript MakeSeq(), MakeBag() ori
MakeAlt().
Pentru verificarea validit!#ii unui document RDF/XML pot fi utilizate programele
rdfcat "i rdfpoll, incluse n distribu#ia Mozilla. Componenta de interfa#! beneficiind

de facilit!#ile de reprezentare a informa#iilor n RDF poart! numele Aurora (cunoscut! "i

sub denumirea de NavCenter), folosit! la afi"area, explorarea "i integrarea datelor n cadrul
navigatorului Mozilla (e.g. structuri de directoare de pe discul local, tabele de con#inut ale
site-urilor Web, indici de c!utare, servicii taxonomice precum Yahoo sau Open Directory,
istoricul documentelor parcurse etc.).
n acest ultim exemplu, putem remarca utilizarea unei secven#e RDF con#innd
descrierile componentelor de baz! Mozilla:

C - 25

Tehnologii Web

<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<!-- list all the packages being supplied by this jar -->
<RDF:Seq about="urn:mozilla:package:root">
<RDF:li resource="urn:mozilla:package:editor"/>
<RDF:li resource="urn:mozilla:package:communicator"/>
<RDF:li resource="urn:mozilla:package:navigator"/>
</RDF:Seq>
<!-- package information -->
<RDF:Description about="urn:mozilla:package:editor"
chrome:displayName="Editor"
chrome:author="mozilla.org"
chrome:name="editor">
</RDF:Description>
<RDF:Description about="urn:mozilla:package:communicator"
chrome:displayName="Mozilla Core"
chrome:author="mozilla.org"
chrome:name="communicator">
</RDF:Description>
<RDF:Description about="urn:mozilla:package:navigator"
chrome:displayName="Navigator"
chrome:author="mozilla.org"
chrome:name="navigator">
</RDF:Description>
</RDF:RDF>

C - 26

Tehnologii Web

3. XUL - limbaj de descriere a

interfeelor cu utilizatorul
Vom prezenta n continuare un limbaj bazat pe XML utilizat pentru specificarea
elementelor de interfa#! cu utilizatorul n cadrul navigatoarelor Netscape din genera#ia a
cincea (Mozilla) "i a "asea. n fapt, XUL (Extensible User Interface Language)
reprezint! o aplica#ie independent! de platform! bazat! pe standarde precum HTML 4,
XML 1.0, spa#iile de nume XML, CSS - nivele 1 "i 2, DOM - nivele 1 "i 2, destinat!
reprezent!rii interfe#elor cu utilizatorul n cadrul navigatoarelor produse de Netscape
Communications.

Structura de elemente XUL prezent# n Netscape 6

XUL aduce n prim-plan metaforele utilizate de proiectan#ii interfe#elor utilizator clasice

(boxe de dialog, butoane, ferestre), fiind un mijloc facil de specificare "i de implementare a
acestora pe diferite platforme, reducnd costul de proiectare "i de programare a interfe#elor
grafice pentru Macintosh, Motif, Windows, GTK etc. Un alt avantaj l constituie faptul c!,
indiferent de platform!, interfe#ele construite cu XUL vor ar!ta "i vor reac#iona similar la
comenzile utilizatorului.

3.1 Structura unui document XUL

Elementul r!d!cin! al unui fisier XUL este <window>, fiecare document trebuind
s! con#in! m!car un element de tip window. O interfa#! XUL este definit! de elementul

C - 27

Tehnologii Web

r!d!cin!. Acest element poate con#ine diferite widget-uri (controale) facilitnd interac#iunea
cu utilizatorul:
<window title="O interfa#! XUL" id="main_win">
<menubar id="main_menu">
<menu value="File" id="file_menu"/>
<menupopup>
<menuitem value="New"
onclick="CreateNewDoc()" />
<menuitem value="Open"
onclick="OpenDoc()" />
<menuitem value="Close"
onclick="CloseDoc()" />
</menupopup>
<menu value="Edit" />
<menu value="Help" />
</menubar>
<box style="background-color:lightgreen;"
id="main_box">
<browser />
</box>
</window>

Dup! cum se remarc!, o interfa#! poate fi compus! din diferite tipuri de widget-uri
grupate n urm!toarele categorii:

ferestre (definesc locul "i modul de afi"are a informa#iilor, plus evenimentele

la care trebuie s! reac#ioneze)

<window>

cutii de vizualizare
<box>, <titledbox>, <text>, <textfield>

meniuri "i bare de meniu

<menubar>, <menu>, <menubutton>, <menulist>, <menupopup>,
<menuitem>

cutii "i bare de unelte

<toolbox>, <toolbar>

tabulatoare
<tabcontrol>, <tabbox>, <tabpanel>, <tab>

butoane
<radiogroup>, <radio>, <button>, <checkbox>

bare de defilare
<scrollbar>, <scrollbarbutton>, <slider>

indicatoare de evolu#ie a unei ac#iuni

<progressmeter>

C - 28

Tehnologii Web

organizatoare (pentru afi"area altor informa#ii, ntr-o form! structurat!)

<grid>,
<tree>,
<treehead>,
<treeitem>, <deck>, <stack>

<treecol>,

<treerow>,

complexe (utilizate pentru includerea de componente Netscape, precum

editorul HTML, navigatorul Web etc.)

<editor>, <browser>, <iframe>

n ansamblu, widget-urile formeaz! a"a-numitul XPToolkit (XP provenind de la

cross-platform).
Un document XUL trebuie s! con#in! urm!toarele instruc#iuni de procesare care
asociaz! interfe#ei foile de stiluri utilizate pentru afi"area widget-urilor pe ecran "i spa#iile de
nume ale elementelor XUL (op#ional HTML):
<?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?>
<window
xmlns:html="http://www.w3.org/TR/REC-html40"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
...
</window>

3.2 Exemple
a. Generarea unei cutii de vizualizare avnd titlu, grupnd n interiorul ei
dou! butoane:
<!-- ncarc! un stil de afi"are a interfe#ei (aici 'chrome') -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!-- define"te fereastra de afi"are -->
<window id="new-menu"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul">
<titledbox style="background-color: lightblue;" orient="vertical">
<title>Nice Buttons</title>
<button value="Click Me" />
<button value="Push Me" />
</titledbox>
</window>

Acest document XUL va avea urm!toarea reprezentare grafic!:

O cutie de vizualizare cu dou# butoane

C - 29

Tehnologii Web

b. Pentru fiecare buton, se pot preciza propriet!#i "i ac#iuni pentru diferite
pseudo-clase de stiluri CSS (hover "i active) "i evenimente (e.g. onCommand),
utile pentru exploatarea interfe#ei. Astfel, putem avea:
<style>
button.bookmarkbutton {
margin: 0px;
max-width: 8em;
font: inherit;
font-size: smaller;
color: #99CCCC;
border: none;
padding: 1px;
background-image: none;
}
button.bookmarkbutton:hover {
color: #CCFFFF;
}
button.bookmarkbutton:active {
color: #CCFFFF;
padding-left: 2px;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
}
</style>
<button class="bookmarkbuttom"
value="&TOC.label;"
onCommand="GetDoc('bookmarks.html')" />

c.

Un exemplu de utilizare a tab-urilor:

<tabcontrol align="vertical">
<tabbox align="horizontal">
<tab value="Tab One" />
<tab value="Tab Two" />
<tab value="Tab Three" />
</tabbox>
<tabpanel flex="100%">
<button value="View One" />
<button value="View Two" />
<button value="View Three" />
</tabpanel>
</tabcontrol>

C - 30

Tehnologii Web

Definirea tab-urilor n XUL

d. Un cmp de dialog de tip text poate fi introdus prin intermediul

tag-ului <textfield>:
<textfield value="Fill n here" />
<textfield value="I am a textarea now" multiline="true" />

Cmpuri de introducere a datelor

e. Folosirea unui control de alegere a culorii pentru modificarea con#inutului

unui document HTML:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"
type="text/css"?>
<!-- creeaz! fereastra principal! -->
<window title="Color Picker"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical"
style="width:200px">
<!-- codul JavaScript de afi"are a culorii "i codului ei -->
<html:script>
function setColors(cp) {
var color = cp.color;
document.getElementById("input").value = color;
document.getElementById("mydiv").style.backgroundColor = color;
}
</html:script>
<colorpicker id="cp" onclick="setColors(this);"
style="background-color: #CCCCCC;
text-align: center; margin: 1em"/>
<html:p />

C - 31

Tehnologii Web

<!-- aici va fi afi"at codul culorii -->

<html:input id="input" style="font-size: 12pt" readonly="readonly" />
<html:p />
<!-- aici va fi afi&351;iat! culoarea aleas! -->
<html:div id="mydiv"
style="width:100px; height:100px;
text-align: center; background-color:white" />
<html:hr />
</window>

Combinarea elementelor de interfa"# XUL cu tag-uri XHTML !i programe JavaScript

Remarc!m utilizarea elementelor XHTML, apar#innd spa#iului de nume definit

de specifica#ia XHTML 1.0, n cadrul unei interfe#e XUL. n acest exemplu, putem
observa de asemeni folosirea unei func#ii JavaScript pentru modificarea n mod
dinamic a propriet!#ilor unui element <div>.
Prin intermediul limbajului XUL pot fi definite a"a-numitele teme (foarte asem!n!toare
skin-urilor), Netscape 6 venind cu dou! teme predefinite: Modern (pe tonuri de albastru) "i
Clasic (emulnd vechea interfa#! Netscape).
Compania Alphanumerica actualmente preg!te"te o aplica#ie destinat! edit!rii de teme
pentru Netscape 6.

C - 32

Tehnologii Web

3.3 XUL Chrome

O serie dintre facilit!#ile puternice ale browser-ului provin din utilizarea unui chrome,
acest termen avnd diferite semantici n func#ie de contextul n care apare. n general,
termenul se refer! la o interfa#! XUL mpreun! cu toate fi"ierele ei adi#ionale. De asemeni,
chrome reprezint! structura "i con#inutul unui document XUL, inclusiv defini#iile de
propriet!#i de stiluri CSS "i localizarea interfe#ei pe o anumit! platform! particular!.
Un chrome este specificat n cadrul interfe#ei XUL printr-o instruc#iune de procesare
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>,
lucru care semnaleaz! motorului de procesare Gecko s! ncarce toate fi"ierele asociate
acestui chrome.
n exemplul urm!tor, chrome indic! un fi"ier utilizat pentru reprezentarea unui control
grafic, nc!rcat din cadrul ierarhiei de fi"iere care compun un pachet dintr-o aplica#ie
Netscape:
<menuitem value="Help"
oncommand="window.openDialog('chrome://help/content/help.xul',
'_blank', 'chrome,all,dialog=no')" />

Interfa"a navigatorului Mozilla (versiunea Milestone $6) utilizind un chrome construit n XUL

Dar ce nseamn! un pachet? Vom r!spunde la aceast! ntrebare n cele ce urmeaz!.

Un pachet reprezint! un chrome, n contextul arhitecturii navigatorului (altfel spus, un
pachet este un chrome ncorporat n cadrul aplica#iilor Mozilla/Netscape). Astfel, un pachet
poate fi v!zut ca un fragment din codul unei interfe#e, fiind nglobat ntr-un anumit loc n
ierarhia de aplica#ii Mozilla sau Netscape. Ca "i un chrome, un pachet poate con#ine fi"iere de
stil CSS, defini#ii de interfe#e XUL, fi"iere grafice "i "iruri de localizare, plus cod specific
platformei particulare pe care ruleaz! aplica#ia. Pachetul navigator este un pachet definit
C - 33

Tehnologii Web

n mozilla/bin/chrome/navigator, iar componenta mail/news apar#ine ierarhiei

mozilla/bin/chrome/mailnews/.

Interfa"a editorului HTML ncorporat n Mozilla (versiunea Milestone $8)

folosind chrome-ul Modern

Ca "i la sistemele de fi"iere, ierarhia este una arborescent!:

navigator/
content/
default/
navigator.xul
...
skin/
default/
navigator.css
nav-icon.gif
...
locale/
US-en/
navigator.dtd

Aceast! modularizare asigur! flexibilitatea navigatorului Web.

Putem referi un fi"ier particular dintr-un pachet, prin intermediul unui URI de genul:
chrome://help/content/help.xul. La crearea unui chrome diferit pentru un pachet,
structura acestuia se schimb!, insernd nc! o intrare n ierarhia de componente ale
pachetului.
Pentru accesarea diferitelor elemente de interfa#!, se pot folosi modelele DOM
(Document Object Model) sau extensia acestuia AOM (Application Object Model), destinat special
C - 34

Tehnologii Web

prelucr!rii documentelor XUL. Astfel, prin intermediul AOM putem referi diferite
widget-uri ca ierarhii de colec#ii de controale ale interfe#elor.

3.4 Integrarea XUL n navigatorul Netscape 6

Desigur, un navigator Web reprezint! mai mult dect o interfa#!. Orice browser trebuie
s! fie independent de platform!, bazat pe standarde WWW, u"or de configurat "i de
exploatat "i rapid. Mai mult, fiecare navigator Web actual ofer! mai mult dect posibilitatea
explor!rii structurii hipermedia a spa#iului WWW, integrnd clien#i pentru po"t! electronic!
"i grupuri de "tiri, transferul de fi"iere "i altele (managementul cookie-urilor). Orice navigator
evoluat d! posibilitatea programatorilor s! includ! n cadrul paginilor scripturi concepute n
limbaje standardizate (e.g. JavaScript).
Arhitec#ii "i implementatorii browserului Netscape 6 utilizeaz! trei tehnologii
independente de platform! pentru a conecta nucleul navigatorului (denumit Gecko)
cu interfa#a modelat! n XUL.
Structura modulelor care intr! n componen#a navigatorului este ilustrat! mai jos:

Interac"iunea componentelor interne ale navigatorului Mozilla

XPCOM reprezint! o metodologie de programare a aplica#iilor distribuite, inspirat! de

COM (Component Object Model), independent! de platforma hardware "i software:
fragmente de cod ofer! interfe#e independente de limbaj "i platform! spre alte obiecte care
pot s! acceseze diferite servicii. Astfel, proiectarea "i compilarea aplica#iei se pot realiza
indiferent de implementarea obiectelor, programatorii trebuind s! cunoasc! numai
interfe#ele oferite de obiecte. Aceste interfe#e vor fi descrise ntr-un limbaj special denumit
XPIDL, extensie a limbajului de definire a interfe#elor IDL (Interface Definition Language)
folosit de aplica#iile CORBA "i COM. XPConnect este tehnologia prin intermediul c!reia
interfe#ele descrise de XPIDL sunt conectate la p!r#ile de cod care implementeaz! obiectele
n JavaScript, limbajul utilizat de XUL.
Nucleul navigatorului, purtnd numele de cod Gecko, reprezint! o component!
modular!, bazat! pe clien#ii Netscape/Mozilla, care poate fi inclus! att n aplica#ii Web de
mari dimensiuni cu propriile lor interfe#e-utilizator, ct "i n dispozitive miniaturizate.
Filosofia dezvolt!rii actuale "i viitoare a nucleului #ine cont de urm!toarele aspecte:

C - 35

Tehnologii Web

Gecko nu reprezint! un browser Web, neavnd propria sa interfa#!, "i nu are

integrate servicii auxiliare (de exemplu, clientul de po"t! electronic! sau editorul
HTML) "i nu ofer! facilit!#i suplimentare (e.g. bookmarks);

se bazeaz! numai pe standarde deschise redactate de Consor#iul Web:

HTML 4.0, CSS1, CSS2, DOM1, DOM2, XML, RDF etc., iar HTML dinamic este
simulat prin DOM;

este independent de platform! (prin tehnologia XPCOM), foarte compact

(prima versiune putea fi stocat! pe o singur! dischet!) "i rapid;

partea de comunicare n re#ea este ea ns!"i modular!, purtnd numele

de Necko;

este extensibil, sursele fiind publice;

ofer! suport pentru navigatoarele mai vechi.

n acest mod, nucleul poate fi folosit de mai multe navigatoare sau aplica#ii, n diferite
circumstan#e "i rulnd pe diverse platforme, interfa#a cu acesta putnd fi aleas! de utilizator,
beneficiind de flexibilitatea oferit! de XUL.

C - 36

Tehnologii Web

3.5 Un exemplu complet

n continuare vom da sursa fi"ierului NetSupportConfirmYN.xul din distribu#ia
Mozilla:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://navigator/skin/navigator.css"
type="text/css"?>
<window
xmlns:html="http://www.w3.org/TR/REC-html40"
xmlns:xul=
"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<data>
<broadcaster id="NetDialog:Message"/>
</data>
<dialog>
<observes element="NetDialog:Message"
attribute="text"
onbroadcast="onUpdate()"/>
</dialog>
<html:script>
function onUpdate() {
var msg = document.getElementById("NetDialog:Message");
if (msg) {
var text = msg.getAttribute("text");
// folose"te DOM
var prompt = (document.getElementById("message"));
if (prompt)
prompt.childNodes[0].nodeValue = text;
}
}
</html:script>
<html:table>
<html:tr >
<html:td>
<html:img html:src="chrome://navigator/skin/questionl.gif"/>
</html:td>
<html:td>
<html:span id="message">m</html:span>
</html:td>
</html:tr>
<html:tr>
<html:td></html:td>
<html:td html:align="justify">
<html:button id="OKButton"> Yes </html:button>
<html:button id ="CancelButton"> No </html:button>
</html:td>
</html:tr>
</html:table>
</window>

Acest exemplu ilustreaz! folosirea elementelor HTML "i a script-urilor JavaScript n

cadrul unui fi"ier XUL pentru afi"area unei ferestre de dialog care interogheaz! utilizatorul
n privin#a suportului de re#ea a browserului.

C - 37

Tehnologii Web

"Din greut#"i se ivesc minunile."

(La Bruyre)

Tehnologii Web

1. Prezentare a limbajului HTML

Indispensabil n crearea paginilor Web, HTML este un descendent al limbajului SGML,
folosit pentru dezvoltarea de documente hipertext accesibile prin Internet. Aceast! parte
trece n revist! o serie dintre caracteristicile, implement!rile "i tendin#ele acestui limbaj.
n plus, se va face o prezentare a foilor de stiluri (CSS).
Aceast! sec#iune nu inten#ioneaz! a fi un manual detaliat de utilizare a limbajului HTML
(v! recomand!m s! consulta#i referin#ele bibliografice), ci doar o prezentare succint! a celor
mai utilizate tag-uri.
Un document poate fi identificat prin urm!toarele caracteristici fundamentale: structur#,
con"inut "i form#. Dac! forma de vizualizare este dependent! de programul de afi"are a
informa#iilor con#inute de acel document, structura "i con#inutul s!u trebuie s! aib! un
format general de reprezentare, pentru a asigura portabilitatea.

Caracteristicile fundamentale ale unui document

1.1 Format
Formatul se specific! prin HTML, limbaj care conformndu-se principiilor SGML,
accept! un num!r de elemente (tag-uri) pentru formatarea documentului. Ca "i n SGML,
acestea se ncadreaz! ntre delimitatorii "<" "i ">", putnd exista tag-uri de nceput "i de
sfr"it. Fi"ierele HTML sunt fi"iere ASCII obi"nuite avnd extensia .html (sau .htm) "i
sunt divizate n dou! p!r#i: antetul (head) "i corpul (body).
Astfel, o pagin! Web marcat! cu tag-uri HTML are forma general!:

D-2

Tehnologii Web

<html>
<head>
...
</head>
<body>
...
</body>
</html>

<!-- tag obligatoriu -->

<!-- nceput de antet -->
<!-- sfr"it de antet -->
<!-- nceput de corp -->
<!-- sfr"it de corp -->
<!-- sfr"it de document -->

Conform specificatiei HTML 4.01 (ap!rut! n decembrie 1999), pentru a fi identificat ca

document SGML n vederea proces!rii de un analizator SGML, un fi"ier HTML trebuie
precedat de una dintre liniile:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FrameSet//EN>

corespunznd celor trei variante de DTD-uri stabilite de Consor#iul Web: strict! (f!r! a
con#ine elemente "i atribute considerate demodate), tranzi"ional! (putnd apare "i elemente
sau atribute demodate) "i cu cadre (suport pentru cadre), respectiv. Pentru varianta
suportnd cadre, corpul documentului va fi nlocuit cu mul#imea de frame-uri din care va fi
compus! pagina Web prin intermediul construc#iei <frameset>...</frameset>
(vezi mai jos).
Documentele HTML respect! DTD-ul stabilit de Consor#iul WWW care nu trebuie
inclus n cadrul sursei paginii Web.
n cadrul antetului, printre altele, poate apare titlul documentului (al paginii Web)
specificat de tag-ul <title>. De exemplu:
<title>Faculty of Computer Science</title>

De obicei ntre <head> "i </head> apar defini#ii de rutine scrise n limbaje script
(precum JavaScript), defini#ii de stiluri CSS ori meta-elemente pentru a fi siguri c! sunt
analizate "i memorate de navigator (antetul este procesat primul).

1.2 TagTag - uri

n cadrul corpului pot apare diverse elemente pentru specificarea urm!toarelor:

stil de afi!are
<b> (ngro"at), <i> (nclinat), <u> (subliniat), <strong> (intensificat),
<big> (mai mare), <small> (mai mic), <sub> (indice), <sup> (exponent),
<font> (dimensiune, culoare "i familie de font), <pre> (text preformatat),
<code> (cod surs!), <center> (centrat)

titluri
<h1> ... <h6> ("ase tipuri)

sec"iuni
<div> (diviziune), <p>
<br> (trecere la linie nou!)

D-3

(paragraf),

<hr>

(linie

orizontal!),

Tehnologii Web

liste
<ul>
<ol>
(list!
nenumerotat!),
(list!
numerotat!),
<li> (element de list!), <dir> (list! de directoare), <menu> (meniu)

imagini
<img>

tabele
<table> (nceput de tabel), <tr> (linie de tabel), <td> (defini#ie de
celul!), <th> (celul! de antet), <thead> (sec#iune de antet de tabel),
<tbody> (sec#iune de corp de tabel)

leg#turi (ancore)
<a>, <link>

formulare
<form> (defini#ie), <input> (cmp de interogare), <select> (list! de
selec#ie), <option> (op#iune)

cadre (frame-uri)
<frameset> (definire), <frame> (cadru), <noframes> (alternativ! de

afi"are, dac! nu sunt suportate cadrele)

suport pentru alte limbaje

<applet> (applet Java), <script> (cod JavaScript sau VBScript),
<object> (obiect generic, e.g. ActiveX, prezentare multimedia)

suport multimedia
<embed> (extensie Netscape), <bgsound> (extensie Internet Explorer)

extensii
<meta> (meta-elemente)

entit#"i speciale
&lt; &gt; &amp; &copy; etc.

Lista tuturor elementelor HTML 4.0 poate fi consultat! n anexa 2, iar n anexa 3 se
g!sesc toate atributele permise n HTML. Entit!#ile care se folosesc n HTML se pot
parcurge n anexa 4.

1.3 Definiii formale

Vom prezenta defini#iile formale a o parte din tag-urile de mai sus, mpreun! cu
atributele aferente, conform nota#iei DTD.

D-4

Tehnologii Web

Corpul documentului

<!--========= Document Body ========-->

<!ENTITY % body.content "(%heading | %text | %block | ADDRESS)*">
<!ENTITY % color "CDATA"
-- specifica#ia de culori: #HHHHHH (RGB, n hexa) -->
<!ENTITY % body-color-attrs "
bgcolor %color #IMPLIED
text %color #IMPLIED
link %color #IMPLIED
vlink %color #IMPLIED
alink %color #IMPLIED
">

<!-<!-<!-<!-<!--

culoare
culoare
culoare
culoare
culoare

fundal -->
caractere -->
leg!turi -->
leg!turi vizitate -->
leg!turi active -->

<!ELEMENT BODY O O %body.content>

<!ATTLIST BODY
background %URL #IMPLIED -- imagine de fundal -%body-color-attrs; -- bgcolor, text, link, vlink, alink ->

Sec"iuni

<!ELEMENT DIV - - %body.content> <!-- tag-ul diviziune -->

<!ATTLIST DIV
align
(left|center|right) #IMPLIED
-- alinierea textului ->
<!-- CENTER este o 'scurt!tur!' pentru DIV cu ALIGN=CENTER -->
<!ELEMENT center - - %body.content>

Liste

<!-- liste de defini#ii

DT pentru termen, DD pentru defini#ia lui -->
<!ELEMENT DL
- - (DT|DD)+>
<!ATTLIST DL
compact (compact) #IMPLIED -- stil compact ->
<!ELEMENT DT - O
<!ELEMENT DD - O

(%text)*>
%flow;>

<!-- liste ordonate OL "i liste neordonate UL -->

<!ELEMENT (OL|UL) - - (LI)+>
<!-1
a
a
i
I

Stil de
numere
litere
litere
litere
litere

num!rare
arabe
mici
mari
romane mici
romane mari

1, 2, 3, ...
a, b, c, ...
a, B, C, ...
i, ii, iii, ...
I, II, III, ...

-->

D-5

Tehnologii Web

<!ENTITY % OLStyle "CDATA" -- restrns la: [1|a|a|i|I] -->

<!ATTLIST OL -- liste ordonate --- stil de num!rare -type
%OLStyle
#IMPLIED
-- startul secven#ei de num!rare -start
NUMBER
#IMPLIED
-- compactare -compact (compact)
#IMPLIED
>
<!-- stiluri de 'bullet'-uri -->
<!ENTITY % ULStyle "disc|square|circle">
<!ATTLIST UL -- liste neordonate -type
(%ULStyle)
#IMPLIED
compact (compact)
#IMPLIED
>

-- stil --- compactare --

<!ELEMENT (DIR|MENU) - - (LI)+ -(%block)>

<!ATTLIST DIR
compact (compact) #IMPLIED
>
<!ATTLIST MENU
compact (compact) #IMPLIED
>
<!-<!-<!-<!--

<DIR>
<DIR COMPACT>
<MENU>
<MENU COMPACT>

List! de directoare
Ca mai sus, compactat
List! de meniuri
Ca mai sus, compactat

-->
-->
-->
-->

<!ENTITY % LIStyle "CDATA" -- restrns la: "(%ULStyle|%OLStyle)" -->

<!ELEMENT LI - O %flow -- element de list! -->
<!ATTLIST LI
type
%LIStyle
#IMPLIED
-- stil -value
NUMBER
#IMPLIED
-- valoare ->

Tabele

<!-- vezi "i RFC 1942

http://www.ics.uci.edu/pub/ietf/html/rfc1942.txt -->
<!-- locul de amplasare orizontal! a
tabelului n cadrul ferestrei -->
<!ENTITY % Where "(left|center|right)">
<!-- alinierea orizontal! a con#inutului celulelor de tabel -->
<!ENTITY % cell.halign
"align (left|center|right) #IMPLIED"
>
<!-- alinierea vertical! a con#inutului celulelor de tabel -->
<!ENTITY % cell.valign
"valign (top|middle|bottom) #IMPLIED"
>
<!ELEMENT table - - (caption?, tr+)>

D-6

Tehnologii Web

<-- un tabel se compune din titlu "i rnduri -->

<!ELEMENT tr - O (th|td)*>
<!ELEMENT (th|td) - O %body.content>
<!ATTLIST table
-- elementul de tabel --- pozi#ia relativ! la fereastr! -align
%Where;
#IMPLIED
-- l!#imea relativ! la fereastr! -width
%Length
#IMPLIED
-- cadru tabel -border
%Pixels
#IMPLIED
-- spa#ii dintre celule -cellspacing %Pixels #IMPLIED
-- spa#iere n cadrul celulelor -cellpadding %Pixels #IMPLIED
>

Imagini

<!ENTITY % Length "CDATA"

-- nn pentru pixeli sau nn% pentru procente -->
<!ENTITY % Pixels "NUMBER" -- lungimea n pixeli -->
<!ENTITY % Ialign "(top|middle|bottom|left|right)">
<!ELEMENT IMG
- O EMPTY
-- ncorporeaz! o imagine n document ->
<!ATTLIST IMG
-- URL-ul imaginii -src
%URL
#REQUIRED
-- text afi"at n locul imaginii -alt
CDATA
#IMPLIED
-- aliniere orizontal!/vertical! -align
%Ialign #IMPLIED
-- n!l#ime n pixeli -height %Pixels #IMPLIED
-- l!#ime n pixeli -width
%Pixels #IMPLIED
-- l!#imea bordurii imaginii -border %Pixels #IMPLIED
-- spa#iere orizontal! -hspace %Pixels #IMPLIED
-- spa#iere vertical!
vspace %Pixels #IMPLIED
-- utilizeaz! client hart! de imagini -usemap %URL
#IMPLIED
-- utilizeaz! server hart! de imagini -ismap
(ismap) #IMPLIED
>

1.4 Formulare HTML

n continuare vom realiza o prezentare succint! a modalit!#ilor de concepere a
formularelor electronice n HTML, extrem de utile mai ales pentru interac#iunea cu
utilizatorii, permi#nd introducerea de diverse date care ulterior vor fi prelucrate de regul!
pe serverul Web de programe (script-uri), folosind interfe#e de programare precum

D-7

Tehnologii Web

CGI (Common Gateway Interface), PHP (PHP: Hypertext Preprocessor) sau ASP (Active
Server Pages) care vor fi prezentate ulterior n cadrul acestui material.
Formularele pot varia de la o simpl! caset! de text, pentru introducerea unui "ir de
caractere pe post de expresie de interogare, folosit! de exemplu de un motor de c!utare pe
Web, pn! la o structur! complex!, cu multiple op#iuni, oferind facilit!#i puternice de
transmisie a datelor.
Exist! dou! modalit!#i prin care informa#iile dintr-un formular pot fi transmise de la
clientul Web la serverul situat undeva n Internet. Atunci cnd se transmit informa#iile
cuprinse ntr-un formular "i URL-ul de destina#ie include datele introduse, avem de-a face
cu metoda numit! "GET" sau cu un formular de tip "get" (se utilizeaz! metoda GET a
protocolului HTTP prezentat n unul dintre capitolele anterioare). Alternativa este aceea n
care atunci cnd se transmit informa#iile dintr-un formular, URL-ul destina#ie arat! perfect
normal, f!r! alte elemente suplimentare ad!ugate la sfr"itul adresei Web. n aceast! a doua
situa#ie avem o metod! "POST" sau un formular de tip "post" (utilizndu-se metoda POST
a protocolului de transmisie HTTP).
Elementul FORM
Un formular HTML apare inclus n pagina Web prin intermediul elementului <form>,
care are atributele obligatorii action=url "i method=metoda. URL-ul indic! fi"ierul sau
aplica#ia aflat! pe serverul Web care urmeaz! s! prelucreze informa#iile din formular, iar
metoda poate fi GET sau POST. n unele cazuri poate apare "i atributul enctype
specificnd modul de codificare MIME a datelor dintr-un formular (se folose"te de obicei
pentru realizarea ac#iunii de upload, mpreun! cu method="POST").
n cadrul marcajului <form> se pot insera "i alte tag-uri HTML uzuale, plus diverse
elemente indicnd modalit!#i de introducere a datelor n cadrul formularului. n cea mai
mare parte, toate cmpurile unui formular, destinate introducerii datelor, se specific! prin
intermediul elementului <input> utilizndu-se diferite atribute.
Atributele uzuale ale unui element <input> sunt urm!toarele:

type=opt indic! tipul cmpului de introducere a datelor (vezi mai jos);

name=nume furnizeaz! numele cmpului, acest nume fiind folosit de c!tre

programul de prelucrare a formularului;

value=valoare con#ine valoarea implicit! a cmpului de intrare;

checked indic! pentru un buton de selec#ie dac! acea op#iune este selectat!

disabled specific! faptul c! o op#iune sau un buton de selec#ie

size=num!r stabile"te l!#imea de afi"are a unui cmp de date (n mod

maxlength=num!r determin! lungimea maxim! a valorilor introduse de

implicit sau nu;

sunt inhibate;

uzual, un cmp text);

utilizator ntr-un cmp de tip text.
readonly indiic! faptul c! un cmp (e.g. text sau textarea) nu poate

fi modificat de c!tre utilizator;

D-8

Tehnologii Web

Dac! se dore"te introducerea unor informa#ii text pe mai multe linii, se poate utiliza
elementul <textarea>. Pentru casete de validare (avnd butoane sau op#iuni multiple)
se folose"te elementul <select>.
Navigatoarele Web curente permit lucrul cu diverse tipuri de cmpuri de intrare, fiecare
dintre acestea determinnd un format diferit de ie"ire. Tipurile de intr!ri (dialoguri) care pot
fi specificate sunt:
a. TEXT este tipul prestabilit, cu atributul size utilizat pentru a specifica
m!rimea prestabilit! a cmpului de dialog care se creeaz!. Urm!torul cod HTML
va genera un astfel de dialog text (n acest exemplu, cmpul text este complet inutil,
fiindc! nu va fi prelucrat de nici un program):
<form>
<input type="text" size="30"
value="Text ini#ial" name="un_text">
</form>
Text ini!ial

b. PASSWORD (parol!) reprezint! un cmp de text, dar datele introduse de

utilizator sunt afi"ate prin caracterul "*" sau alte simboluri, din motive de securitate.
Atributul maxlength poate fi folosit s! specifice num!rul maxim de caractere
permis pentru parol!. n mod uzual, valoarea cmpului va fi trimis! necriptat!
serverului Web.
<form>
<p>Da#i parola s! intra#i n rai:
<input type="password" name="pass"
size="20" maxlength="25">
</form>

Da#i parola s! intra#i n rai:

c. CHECKBOX (buton de validare) asigur! o singur! caset! (negrupat!) de
validare; atributul CHECKED permite s! specific!m dac! aceast dialog urmeaz! sau
nu s! fie marcat implicit.
<form>
<h5 align="center">Vreau acas!:
<input type="checkbox" checked name="acasa">
Vreau la "coal!:
<input type="checkbox" name="scoala"></h5>
</form>
! Vreau la "coal!: !
&
%
$
#
%
$
#
"
Vreau acas!: "

d. HIDDEN (cmp ascuns) permite transmiterea informa#iilor programului care

prelucreaz! datele-utilizator, f!r! ca utilizatorul s! le vad! pe ecran. De obicei
se folose"te n cazul n care pagina Web con#innd formularul este generat!
automat de un script CGI.
<input type="hidden" name="submit_to" value="web@infoiasi.ro">
<input type="hidden" name="ok_url" value="ok_url.html">

D-9

Tehnologii Web

e. RADIO (buton radio) afi"eaz! un buton de interblocare; diferitele butoane

radio care au acela"i atribut name=valoare sunt grupate n mod automat, astfel
nct doar un singur buton din grup poate fi selectat.
<form>
<p>E"ti:
de"teapt! <input type="radio" name="tu">
frumoas! <input type="radio" name="tu" checked>
gospodin! <input type="radio" name="tu">
</p>
</form>
' frumoas! (
+
*
)
' gospodin! '
,
+
*
)
+
*
)
(
E"ti: de"teapt! (

f. BUTTON (buton) va genera un buton generic, util pentru prelucrarea

formularelor pe partea client (prin intermediul script-urilor).
<form>
<input type="button" name="buton1" value="Apas!-m!!">
<input type="button" name="buton2" value="Apas! "i aici!">
</form>

g. SUBMIT (transmitere), afi"eaz! un buton de submisie a informa#iilor

introduse n formular. Atunci cnd este ap!sat, transmite con#inutul ntregului
formular la serverul Web spre a fi prelucrat.
<form method="get"
action="http://www.infoiasi.ro/fcs/search/search.pl.cgi">
<p>Caut! n cadrul paginilor Facult!#ii de Informatic!:</p>
<input name="Terms" size="50" maxlength="100" value="">
<input type="submit" value="Search">
</form>

Caut! n cadrul paginilor Facult!#ii de Informatic!:

Search

h. IMAGE este identic cu SUBMIT, numai c! n locul unui buton permite

specificarea unei imagini care atunci cnd va fi ap!sat! va trimite datele c!tre
serverul Web.
i. RESET (reseteaz!) permite utilizatorilor s! "tearg! con#inutul tuturor
cmpurilor formularului.
<form>
<center>
Numele:
<input type="text" name="nume" size="20" value="">
<br>
Vrsta:
<input type="text" name="virsta" size="2" value="">
<br>
Sunte#i genial:
<input type="checkbox" name="geniu">
<hr width="400">
<input type="submit" value="Trimite formularul" size="25">

D - 10

Tehnologii Web

<br>
<br>
<input type="reset" value="%terge formularul" size="25">
</center>
</form>

Numele:
Vrsta:
%
$
#
"
Sunte#i genial: !

Trimite formularul

"terge formularul

j. FILE (fi"ier) ofer! posibilitatea de a permite utilizatorilor s! transmit!

serverului Web un fi"ier (ac#iunea de upload).
<p>Da#i un nume de fi"ier sau alege#i unul:
<form>
<input type="file" name="atasament" size="30">
</form>

Da#i un nume de fi"ier sau alege#i unul:

Efectul ap!s!rii butonului Browse poate fi urm!rit n figura de mai jos:

D - 11

Tehnologii Web

Selectarea unui nume de fi!ier prin explorarea structurii de directoare

Pentru realizarea unor liste (meniuri) cu op#iuni multiple se folose"te elementul

<select>. n cadrul acestui tag se insereaz! elemente <option> care definesc op#iunile
meniului derulant. Trebuie s! se specifice un atribut name identificnd n mod unic ntregul
meniu definit de un <select>.

n cadrul unui <select> putem specifica, de asemeni, atributul size prin care se
indic! num!rul op#iunilor din meniu care vor fi afi"ate la un moment dat "i atributul
boolean multiple care specific! dreptul utilizatorilor de a selecta mai mult de o op#iune
(mai multe op#iuni se pot selecta f!cnd click simultan cu ap!sarea tastei Ctrl). Dac! exist! o
valoare prestabilit!, trebuie s! ad!ug!m atributul selected (op#iune selectat! implicit) la
un tag <option>. n cadrul unui <option> mai poate apare atributul disabled
indicnd o op#iune care nu poate fi folosit! n acel moment.

D - 12

Tehnologii Web

Iat! un exemplu:
<form name="formular">
<p>A" vrea s! ajung:
<select name="meserii" size="1">
<option value="nimic" selected>-- nimic? --</option>
<option value="M!celar">M!celar</option>
<option value="Librar">Librar</option>
<option value="Profesor">Profesor</option>
<option value="Gde">Gde</option>
<option value="Ministru">Ministru</option>
<option value="T!ietor">T!ietor de frunze</option>
<option value="Pensionar">Pensionar</option>
</select>
</form>

Se va genera urm!torul formular:

A" vrea s! ajung:

-- nimic? --

Elementul <textarea> permite s! se construiasc! o caset! de intrare pe linii multiple,

n care utilizatorul poate introduce o cantitate mai mare de text (de exemplu s! trimit! un
anun# de mic! publicitate sau un mesaj prin po"ta electronic!). Ca "i <select>,
marcatorul <textarea> va fi identificat n mod unic prin intermediul atributului name.
Se permite definirea dimensiunii casetei de intrare de tip text cu ajutorul atributelor rows
(linii) "i cols (coloane) care specific! num!rul de linii din cadrul casetei "i, respectiv,
lungimea liniilor.
<form name="pareri">
<textarea name="scrisoare" rows="3" cols="40">
Trimite#i-mi p!rerile voastre despre acest curs...
</textarea>
</form>
Trimite!i-mi p#rerile voastre despre acest
curs...

D - 13

Tehnologii Web

Un exemplu concret
Urm!torul exemplu de formular (conceput de absolven#ii D!nu" Silion "i Tudor Boutiuc)
include cteva elemente eterogene de introducere a datelor: un grup de butoane radio "i un
meniu derulant, specificate cu ajutorul elementelor <select>, al!turi de cmpuri de tip
text. Figura de mai jos ilustreaz! modul n care formularul este afi"at pe ecran de c!tre
navigatorul Web. Remarc!m faptul c! meniul derulant prezint! o singur! valoare: execu#ia
unui click pe aceast! valoare determin! afi"area tuturor op#iunilor posibile; deplasarea
cursorului permite vizitatorului paginii s! selecteze valoarea particular! pe care o consider!
cea mai bun!.

Introducerea de date ntr-un formular HTML de tip chestionar

Formularul este descris de tag-urile urm!toare:

<form action="http://www3.infoiasi.ro/~messe/cgi-bin/formular.cgi"
method="GET">
<b>V! rug!m spune#i-ne p!rerea dumneavoastr!
despre noul nostru site!</b>
<p>
<b>Nume:</b>
<input type="text" name="numele">
<p>
<b>Adresa de e-mail:</b>
<input type="text" name="email">
<p>

D - 14

Tehnologii Web

<b>Cum a#i aflat de site-ul nostru:</b>

<select name="neagasit">
<option selected> (alege una)
<option>Yahoo
<option>Excite
<option>HotBot
<option>BigBook
<option>PC Magazine
<option>USA Today
<option>CNN OnLine
<option>altceva...
</select>
<p>
<b>Vrsta:</b>
<input type="radio" name="varsta" value="copil">sub 18 ani
<input type="radio" name="varsta" value="tnar">18-30 ani
<input type="radio" name="varsta" value="matur">30-40 ani
<input type="radio" name="varsta" value="vrstnic">peste 40 ani
<p>
<b>Comentarii:</b> <br>
<textarea name="feedback" rows="5" cols="60">
</textarea>
<p>
<input type="submit" value="Trimite#i">
<input type="reset" value="Sterge#i">
</form>

1.5 Folosirea cadrelor

n mod uzual, utilizatorul vede pe ecran un document HTML nc!rcat ntr-o fereastr!
asignat! de navigator acelui document. Pentru a spori atractivitatea paginilor Web sau
pentru a organiza mai eficient informa#iile din cadrul documentelor, designerii pot recurge
la tehnica "subferestrelor", putnd diviza ferestra browserului ntr-un set de sec#iuni
(cadre). Fiecare astfel de "subfereastr!" poate nc!rca documente HTML, n manier!
independent!, astfel nct simultan n aceea"i fereastr! a navigatorului se pot vizualiza mai
multe pagini WWW. Vom numi un asemenea fragment de fereastr! cadru (frame).
Documentele folosind cadre vor apar#ine DTD-ului frameset definit de specifica#ia
HTML 4.01.
Definirea unei structuri de cadre este relativ simpl!, similar!, ntr-un anume sens,
definirii unui tabel. Pentru aceasta, n locul elementului <body> se va specifica marcatorul
<frameset>. Acest element va include mul#imea de cadre con#innd documentele HTML
care vor fi afi"ate de navigator.
Astfel, structura general! a unui pagini incluznd cadre va fi:
<html>
<head>
...
</head>
<frameset>
...
</frameset>
</html>

D - 15

Tehnologii Web

Elementul <frameset> poate con#ine la rndul lui alte apari#ii <frameset>.

Definirea unei structuri de cadre
Pentru a defini o structur! de cadre va trebui stabilit un num!r de linii/coloane "i pentru
fiecare linie sau coloan! se va specifica un con#inut (o resurs! Web desemnat! de un URI)
ori o alt! mul#ime de cadre (adic! un nou <frameset>).
Marcatorul <frameset> va putea con#ine atributele rows sau cols care definesc lista
de rnduri "i, respectiv, coloane care vor apare n cadrul ferestrei. Aceast! list! va cuprinde
spa#iile ocupate de rndurile/coloanele specificate, ntr-o manier! absolut! (n pixeli) sau
procentual!. Caracterul "*" va putea fi utilizat pentru a indica navigatorului s! calculeze
spa#iul r!mas disponibil n cadrul unei structuri de cadre.
De exemlu, cols="200, 15%, *, 3*" va produce un set de patru coloane: prima
va ocupa 200 de pixeli din l!#imea total! a ferestrei browserului, a doua va ocupa 15% din
l!#ime, iar urm!toarelor dou! coloane li se va atribui spa#iul r!mas disponibil, respectnd
raportul 1/3.
Iat! o alt! exemplificare (se va genera un aranjament de 2x3 cadre, fiecare cadru putnd
con#ine un document arbitrar):
<frameset rows="33%,*" cols="33%,34%,33%">
...
</frameset>

Alocarea de spa#iu prin rows sau cols pentru fiecare element al structurii de cadre de
cele mai multe ori va fi valabil! numai pentru afi"area ini#ial! a cadrelor, utilizatorul putnd
ulterior modifica acest aranjament.
Autorii de pagini Web pot partaja date ntre cadrele definite prin intermediul tag-ului
<object>, dup! cum se poate observa n exemplul de mai jos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html40/frameset.dtd">
<html>
<head>
<title>O structura de cadre folosind "object"</title>
<!-- obiectul nu va fi afi"at -->
<object id="myobject" data="data.bar"></object>
</head>
<frameset>
<frame src="showobj.html" name="showobj">
</frameset>
</html>
<!-- showobj.html -->
<html>
<head>
<title>Afi"eaz! obiectul</title>
</head>
<body>
...
<p>
<!-- accesare obiect prin JavaScript -->
<script type="text/javascript">
parent.myobject.myproperty
</script>

D - 16

Tehnologii Web

...
</body>
</html>

Con#inutul ini#ial al unui cadru va fi desemnat prin intermediul marcatorului <frame>,

ale c!rui atribute importante sunt:

src - desemneaz! URI-ul documentului care va fi nc!rcat n acel cadru;

name - specific! numele cadrului (nume care va putea fi folosit ulterior ca

#int!

unei

ancore,

ntr-o

construc#ie

HTML

de

forma

<a href="..." target="nume_cadru">);

noresize - inhib! posibilitatea de a modifica dimensiunile unui cadru;

scrolling - define"te modalitatea de scroll (derulare) a con#inutului unui

cadru, putnd apare valorile auto, yes sau no;

frameborder - specific! apari#ia bordurii (chenarului) din jurul unui cadru

(valorile legale sunt 0 sau 1);

marginwidth "i marginheight - denot! spa#ierile pe orizontal! "i,

respectiv, pe vertical! dintre con#inutul unui cadru "i marginea lui.

Un exemplu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html40/frameset.dtd">
<html>
<head>
<title>Exemplu</title>
</head>
<frameset rows="20%,*,2*">
<frameset cols="*,200">
<frame src="web-cuprins.html" name="cuprins">
<frame src="web.jpg"
scrolling="no" noresize
marginwidth="0" marginheight="0">
</frameset>
<frame src="web2.html" frameborder="0">
<frame src="web3.html" frameborder="0"
name="afisare" >
</frameset>
</html>

Figura de mai jos ilustreaz! aranjamentul definit de acest cod HTML:

D - 17

Tehnologii Web

Un document compus din cadre

Pentru a defini cadrul-#int! de nc!rcare a unui document se va folosi atributul

target=URI care poate apare n elemente precum <a>, <link>, <area> "i <form>.

Astfel, con#inutul unui cadru se va putea schimba, de"i structura general! a cadrelor de pe
ecran va r!mne aceea"i.
De

exemplu,

toate leg!turile spre capitole, precizate n documentul

web-cuprins.html, vor putea avea forma <a href="..." target="afisare">
(vezi mai sus).
Sunt predefinite cteva valori pentru atributul target:
_blank - va determina navigatorul s! ncarce resursa specificat! ntr-o nou!

fereastr! (instan#!) a acestuia;

_self - specific! navigatorului s! ncarce resursa n frame-ul curent;

_parent - denot! p!rintele imediat al cadrului actual (dac! frame-ul nu are

p!rinte, este echivalent cu _self);

_top - va conduce la nc!rcarea resursei n fereastra original!, anulnd

oricare cadru (va avea acela"i efect ca "i _self, n cazul n care cadrul nu are nici
un <frameset> p!rinte).

Setarea unui cadru implicit pentru toate leg!turile dintr-un document se poate realiza
prin intermediul marcatorului <base> inclus n antetul paginii Web:
<base href="http://www.infoiasi.ro/~busaco/teach/"
target="afisare">

D - 18

Tehnologii Web

Anumite browsere (cele text sau unele mai vechi) nu vor suporta cadrele, n acest caz
putndu-se furniza un con#inut alternativ prin intermediul construc#iei
<noframes>...</noframes>:
<html>
<head>
<title>Pagina mea</title>
</head>
<frameset cols="133,*">
<frame src="menu.html" name="menu" noresize>
<frame src="salut.html" name="afisare">
<noframes>
<p>Acest navigator nu suport! cadre...</p>
<p>Versiunea f!r! cadre
este <a href="menu.html">aici</a>.</p>
</noframes>
</frameset>
</html>

Cadre interne
n anumite situa#ii este de dorit s! se insereze un cadru n interiorul unui document
HTML, ntr-un mod asem!n!tor introducerii de obiecte cu <object>. Un cadru intern
nu-"i va putea modifica dimensiunile "i va fi inclus prin marcatorul <iframe>.
Atributele "i valorile lor sunt identice celor de la <frame>, exceptnd noresize care
nu mai poate fi utilizat. n plus, apar atributele width specificnd l!#imea "i height
semnificnd n!l#imea unui cadru intern.
Astfel, avem posibilitatea de a ncorpora ntr-o pagin! Web alt document HTML sau
oricare alt! resurs! dorit!.

D - 19

Tehnologii Web

Un document incluznd un cadru intern

Pentru captura de ecran de mai sus, sursa paginii Web este urm!toarea:
<html>
<head>
<title>Exemplu</title>
</head>
<body bgcolor="#EEEEEE" text="black">
<h2 align="center">Salut!ri!</h2>
<iframe src="web-cuprins.html"
width="500" height="300"
frameborder="0" align="center">
Navigatorul nu suport! cadre interne...
</iframe>
<hr size="1">
</body>
</html>

D - 20

Tehnologii Web

2. HTML Compact
HTML Compact este un subset al recomand!rilor HTML 2.0, HTML 3.2 "i HTML
4.0, dezvoltat pentru dispozitive informa#ionale mici. HTML define"te un format flexibil,
portabil "i facil al documentelor Internet, o direc#ie de dezvoltare a limbajului fiind extensia
lui la hipermedia. Versiunea HTML 4, dupa cum am v!zut, introduce noi facilit!#i ca stiluri,
suport pentru interna#ionalizarea, tratarea evenimentelor. O alt! direc#ie ar fi adaptarea
HTML-ului la dispozitive informa#ionale diverse care au ns! unele restric#ii hardware:
memorie "i putere a procesorului sc!zute, display miniaturizat, monocrom, metode limitate
de introducere a datelor.
HTML Compact este conceput pentru astfel de situa#ii, putnd fi implementat n medii
de lucru restrictive.

2.1 Cerine
Pentru a realiza func#ii de navigare WWW pentru dispozitive miniaturizate
(e.g. PalmBook, PocketPC), trebuie realizat! o restrngere a mul#imii de elemente din
HTML la un subset potrivit la restric#ii hardware ca:

memorie: 128-512K RAM, 512K-1M ROM

procesor: 1-10 MIPS

display: 50x30, 100x72, 150x100 pixeli (monocrom)

fonturi: un singur font suportat

intr!ri: butoane de control "i butoane numerice (0-9)

HTML Compact nu trebuie s! depind! de protocolul de re#ea (n cazuri tipice HTTP

bazat pe TCP/IP). Pentru telefoane celulare care folosesc metode de comunicare f!r! fir,
protocolul de transport ar putea fi redefinit, pentru a ob#ine performan#e mai bune
(folosindu-se, de exemplu, protocolul WAP - Wireless Application Protocol).

2.2 Definirea limbajului

HTML Compact se bazeaz! pe urm!toarele principii de proiectare:
a. Bazat! complet pe recomand!rile curente ale HTML, versiunea compact!
mo"tene"te flexibilitatea "i portabilitatea standardului;
b. HTML Compact va fi implementat pe dispozitive avnd memorie sc!zut! "i
putere procesor slab!. Cadrele "i tabelele sunt excluse;
c. Documentele pot fi vizualizate pe ecrane miniaturizate monocrome.
Se va folosi un unic set de fonturi.
d. HTML Compact trebuie s! fie u"or de utilizat de c!tre oameni. Se #ine cont
de faptul c! toate opera#iunile de baz! pot fi executate printr-o combina#ie de patru

D - 21

Tehnologii Web

butoane:

Cursor
nainte,
Cursor
napoi,
Selectare
napoi/Stop. Imaginile senzitive "i h!r#ile de imagini sunt excluse.

"i

Din limbaj au fost excluse urm!toarele facilit!#i ale standardului HTML:

imagini JPEG;

tabele;

h!r#i de imagini;

fonturi "i stiluri multiple;

culori "i imagini pentru fundal;

cadre;

foi de stiluri.

Sunt recomandate limite ale buffer-elor de intrare pentru INPUT (maxim 512 bytes) "i
SELECT (maxim 4096 bytes).

O alt! recomandare de implementare a unui navigator compact este suportul pentru

selectare direct! a leg!turilor utiliznd butoanele numerice.

2.3 TagTag - uri suportate

n HTML Compact sunt acceptate doar urm!toarele elemente "i atribute:
Element

atribute suportate

name, href

BASE

href

BLOCKQUOTE

BODY

BR

clear

CENTER

DD

DIR

DIV

align

DL

DT

FORM

action, method, enctype

HEAD

Hx, x=1,6

align

HR

align, size, width, noshade

HTML

version="C-HTML 1.0"

D - 22

Tehnologii Web

IMG

src, align, width, height,

hspace, vspace, alt, border

INPUT

type, name, size,

maxlength, value

LI

MENU

META

http-equiv="refresh"

OL

OPTION

selected

align

PRE

SELECT

name, size, multiple

TEXTAREA

name, rows, cols

TITLE

UL

Defini#ia tipului de document HTML Compact este:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">

2.4 O alt abordare

Desigur, se pot aborda "i alte solu#ii care nu se bazeaz! pe HTML. De exemplu, a fost
propus limbajul HDML (Handheld Device Markup Language) desemnat a fi utilizat pe
dispozitive mobile uzuale (ca de pild! telefoanele celulare), scopul acestuia fiind foarte
apropiat de cel al HTML Compact. Dezavantajul lui HDML este c! ntreaga infrastructur!
(programe de proiectare, servere, clien#i, documenta#ii) urmeaz! a fi preg!tit!. Inspirat de
HDML "i bazat pe XML, a fost proiectat "i standardizat recent limbajul WML (Wireless
Markup Language) folosit n cadrul dispozitivelor informa#ionale f!r! fir (n special
telefoane celulare conectate la Internet prin protocolul WAP).

2.5 Concluzii
Recomandarea HTML Compact poate fi utilizat! drept ghid pentru servicii "i navigare
HTML pentru dispozitive mobile mici, f!r! fir. n viitorul apropiat, datorit! dezvolt!rii
Internetului, HTML Compact ar trebui s! ofere suport pentru comunica#ii video, pentru
extensii multimedia "i scripturi etc.

D - 23

Tehnologii Web

3. Reformularea HTML n XML

3.1 Motive
Motivele rescrierii limbajului HTML n termenii XML sunt date de mai mul#i factori:
1.

Extensibilitatea

XML este un limbaj de marcare cu adev!rat extensibil, oferind puterea "i

flexibilitatea de specificare a meta-limbajului SGML, prin mijloace facile. Cerin#a
actual! pentru HTML este cea de a se adapta la pie#e electronice, specializate "i n
plin! dezvoltare, foarte dinamice. Aceasta conduce la probleme de compatibilitate
ntre documente de pe diverse platforme hardware "i software, solu#ionare
ntrev!zut! n XML.
2.

Modularizarea

Modularizarea presupune o metod! de specificare a unor mul#imi bine-definite

de seturi de tag-uri HTML spre a fi utilizate de designerii paginilor Web.
De exemplu, un modul "tabele" poate con#ine elementele "i atributele necesare
pentru realizarea tabelelor, iar un modul "liste" poate ngloba elementele "i
atributele pentru liste.
Modularizarea HTML-ului "i poate g!si aplica#ii "i n portarea navig!rii pe Web
la nivelul dispozitivelor mobile (calculatoare portabile, telefoane celulare) sau
aparatelor TV (televiziune digital!, TVWeb). Fiecare categorie comport! diferite
cerin#e "i restric#ii (specializ!ri).
Modularizarea poate cre"te "i productivitatea "i standardizarea n realizarea
documentelor Web.
3.

Profile ale documentelor

Profilul documentelor specific! sintaxa "i semantica acestora. Profilul va include

specifica#ii ca: mul#imea formatelor suportate (e.g. formatele imaginilor care pot fi
utilizate), nivelul limbajelor script "i suportul pentru foi de stil etc.
Profilul documentelor este n strns! leg!tur! cu RDF, constnd din aser#iuni
scrise in RDF definind suportul minim al agen#ilor utilizator "i oferind o baz!
pentru garantarea interoperabilit!#ii. Schemele RDF vor formaliza profilele
documentelor.
Aceste aser#iuni se a"teapt! s! aib! urm!toarele efecte:

Garan#ia longevit!#ii profilului unui document.

Sintaxa documentului dat! ca leg!tur! specificat! de un URI.

O schem! define"te aceast! sintax! drept compunere de mul#imi de tag-uri
(module).

Reprezentarea restric#iilor semantice ale documentelor va fi

interpretabil! de c!tre ma"in!. Aceste restric#ii sunt folosite la validarea

D - 24

Tehnologii Web

documentelor "i vor fi introduse n urm!toarele specifica#ii XML (scheme "i

date XML).
Aser#iunile vor putea acoperi diverse detalii ale formatelor de date "i
vor descrie tipurile de dispozitive potrivite cu profilul unui document.

4.

Profile ale dispozitivelor

O direc#ie separat! este de a folosi RDF pentru definirea profilelor

dispozitivelor, specificnd capabilit!#ile navigatoarelor "i preferin#ele utilizatorilor
(a"a cum se permite n Netscape 6).
5.

Transformarea marcajelor

Profilele documentelor "i ale dispozitivelor vor aduce mari simplific!ri n

marcarea informa#iilor. Atunci cnd un set de facilit!#i HTML suportate de o clas!
de dispozitive poate fi anticipat cu precizie, marcarea specific! pentru acea clas!
hardware se realizeaz! ntr-un mod facil "i automatizat (via CSS sau XSL).

3.2 XHTML
XHTML (pn! la nceputul anului 1999 cunoscut sub denumirea de Voyager) este
numele de cod al HTML reformulat ca aplica#ie a XML-ului, definind profilele
documentelor ca spa#ii de nume, avnd fiecare propria sa adres! (dat! de un URI).
Documentele XHTML pot fi etichetate att "text/html", ct "i "text/xml",
elementul r!d!cin! fiind <html>. Spa#iile de nume XHTML sunt definite la adresa
http://www.w3.org/1999/xhtml "i vor putea fi incluse n documentele XHTML
prin atributul xmlns.
Declararea tipului de documente XHTML se va realiza prin intermediul construc#iei
DOCTYPE, ca n SGML, existnd trei tipuri de defini#ii de documente conform specifica#iei

HTML 4.01: tipul strict, tranzi"ional "i pentru cadre (frames), dup! cum se poate remarca din
exemplul urm!tor:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

Documentele XHTML vor avea toate elementele "i atributele scrise cu litere mici,
deoarece XML este case-sensitive, dup! cum am v!zut. O alt! restric#ie este aceea c! toate
tag-urile de sfr"it sunt obligatorii, iar tag-urile vide trebuie s! se termine cu "/>".
Elementul <title> trebuie plasat imediat dup! <head> "i poate fi urmat de <base>,
dac! exist!.
Pentru a permite procesoarelor XML s! recunoasc! leg!turile hipertext, tag-ul <a>
trebuie declarat cu atributul xml:link astfel:
<!ATTLIST a xml:link CDATA #FIXED "simple">

D - 25

Tehnologii Web

3.3 Modelul procesrii

Documentele XHTML sunt procesate n urm!torii pa"i:
1.

decodificarea datelor preluate de pe server;

2.

descompunerea n atomi lexicali XML 1.0;

3. analiza sintactic! XML, rezultnd un arbore sintactic ulterior accesat "i

manipulat via DOM (Document Object Model);
4.

validare op#ional!;

5. formatare, folosind foi de stiluri "i alte semantici specificate

(pentru formulare "i applet-uri), pentru a produce o ierarhie a obiectelor formatate;
6.

reprezentarea pe ecran a obiectelor formatate.

Navigatoarele execut! ace"ti pa"i ntr-o manier! concurent!.

Documentele HTML pot fi convertite n documente XHTML de HTML Tidy, aplica#ie
dezvoltat! de Consor#iul Web.

3.4 Module XHTML

XHTML ofer! mai mult dect o reformulare a HTML-ului n XML, modulariznd
HTML printr-o colec#ie de mul#imi de tag-uri, blocuri de construc#ie a produselor Web.
Modulele propuse sunt cele de mai jos:

modulul de baz#
Specific! tipurile de date "i modele de baz! XHTML, mpreun! cu setul
minimal de elemente pentru scrierea unui document HTML: html, head,
title, base, meta, link, body, h1-h6, p, br, a, span, div.

modulul tranzi"ional
Specific! acele elemente din HTML 4.01 - Profilul Tranzi#ional, dar excluse
din profilul strict al HTML: basefont, font, center, s, u, con#innd "i
defini#iile unor atribute ca border, align, noshade.

modulul de stiluri
Ofer! elementul style, atributul style "i define"te utilizarea
elementului link.

modulul script
Specific! elementele script "i noscript.

modulul de fonturi
Define"te elementele relative la fonturi existente n HTML 4.01 - varianta
strict!: tt, b, i, big, small.

D - 26

Tehnologii Web

modulul de frazare
Define"te elementele care ofer! informa#ii despre anumite adnot!ri ale
autorului, n cadrul frazei: abbr, acronym, address, blockquote, q,
cite, code, dfn, kbd, samp "i var.

modulul de inflexiune
Specific! elemente care nu ofer! informa#ii referitoare la un domeniu,
ci doar o indica#ie despre inten#ia autorului: em, pre, strong, sub, sup, hr.

modulul de editare
Ofer! elemente referitoare la editarea documentelor, ca del "i ins.

modulul liste
Con#ine elementele dl, dt, dd, ul, ol, li.

modulul de formulare
Specific! elementele referitoare la scrierea formularelor: form, input,
textarea, select, optgroup, option, label, button, fieldset,
legend, isindex.

modulul de tabele
Con#ine elementele table, caption, col, colgroup, thead, tbody,
tr, th "i td.

modulul h#r"i de imagini

Specific! elementele map "i area.

modulul applet-uri
Con#ine applet "i param pentru suportul applet-urilor Java.

modulul obiecte
Specific! elemente ca object "i param.

modulul cadre
Define"te elementele referitoare la utilizarea cadrelor: frameset, frame,
iframe, noframes.

3.5 Sfaturi pentru

pe ntru dezvoltatori
XHTML fiind bazat pe XML este case-sensitive, marcatorii trebuie scri"i cu caractere
minuscule. Dac! agentul-utilizator (browserul) nu recunoa"te un element, va prelucra
con#inutul lui aflat ntre tag-urile de nceput "i de sfr"it. Un atribut nerecunoscut va fi,
de asemeni, ignorat, iar o valoare necunoscut! a unui atribut va fi nlocuit! cu valoarea
implicit! a acestuia.
Atributul de tip ID (identificator n XML) va fi considerat drept fragment de document.
Elementele a (ancor!), applet (applet Java), form (formular), iframe (cadru intern),
frame (cadru), img (imagine), map (hart! senzitiv!) n HTML pot avea (obligatoriu sau
D - 27

Tehnologii Web

nu) atributul name. n XHTML 1.0 este definit atributul id de tip ID pentru acest scop "i
name va fi nlocuit n viitor cu atributul id. Pentru compatibilitate cu HTML 4.01 se vor
folosi ambele atribute:
<a id="top" name="top"></a>
...
<h6>
<a href="#top">La nceputul paginii</a>
</h6>

De remarcat faptul c! toate valorile atributelor (chiar "i cele numerice)

vor
trebuie
incluse
ntre
ghilimele.
Astfel,
construc#ii
precum
<table width=600 align=center> sunt eronate.
Anumite atribute puteau fi scrise f!r! a le asocia valori (a"a-numitele atribute booleene)
i.e. noshade, readonly, noresize, compact ori checked. n XHTML vor trebui
scrise succedate de valorile lor, ca n exemplul urm!tor:
<hr
size="2"
align="right"
noshade="noshade" />

O alt! diferen#! fa#! de HTML 4.01 este aceea c! elementele nevide trebuie s! aib!
tag-uri de sfr"it. n SGML anumite elemente pot avea tag-uri de sfr"it op#ionale. n XML,
pentru a elimina ambiguit!#i de analiz!, elementele trebuie s! aib! tag-uri de sfr"it
obligatorii. Astfel, paragrafele marcate prin intermediul lui <p> vor avea "i tag-ul de sfr"it
</p>. Elementele declarate cu con#inut vid, precum <hr> sau <br>, fie vor fi urmate de
tag-ul de sfr"it, fie vor fi scrise <hr /> ori, respectiv, <br />. ns! este interzis s! avem
<li /> din moment ce acest element nu este declarat ca vid (prin EMPTY).
De"i navigatoarele treceau cu vederea imbricarea eronat! a tag-urilor, specifica#ia
XHTML este mai riguroas!. Elementele trebuie s! aib! deci tag-uri de nceput "i de sfr"it
scrise corect. Construc#ii precum <h4>XHTML este <i>exact.</h4></i> sunt
prohibite.
De"i n XML nu pot fi specificate incluziuni "i excluziuni n cadrul defini#iilor formale de
elemente, a"a cum se ntmpl! n SGML, se impun urm!toarele restric#ii:
Elementele a, form, label nu pot con#ine alte elemente a, form, label,
respectiv.

Elementul pre nu poate con#ine img, object, big, small, sub "i sup.

Elementul button nu poate s! con#in! elementele input, select,

textarea, label, button, form, fieldset, iframe sau isindex.

Elementul title trebuie s! apar! imediat dup! html.

Elementul isindex poate apare cel mult o dat! n cadrul antetului

documentului "i este declarat demodat, fiind nlocuit n prezent de input.

Designerii trebuie s! utilizeze foi de stiluri sau programe script externe dac! acestea
cuprind simbolurile "<" sau "&" sau "]]>" sau "--", din cauza modelului nou de procesare
XML a documentelor XHTML. Pentru script-urile CGI (Common Gateway Interface)
parametrii transmi"i vor trebui s! aib! caracterul ampersand nlocuit de entitatea &amp;.

D - 28

Tehnologii Web

Astfel, linia:
http://www.infoiasi.ro/cgi-bin/search.pl?name=Sabin&
value=Buraga va trebui nlocuit! cu:
http://www.infoiasi.ro/cgibin/search.pl?name=Sabin&amp;
value=Buraga.

Pentru a verifica dac! o pagin! Web este conform! standardului XHTML 1.0, putem
utiliza Netscape 6 sau Internet Explorer 5, modificnd extensia fi"ierului din .html n
.xml, insernd la nceputul documentului <?xml version="1.0"?> "i ad!ugnd
tag-ului <html> atributul xmlns pentru a fi folosit spa#iul de nume XHTML. Astfel,
pagina va fi considerat! de analizor ncorporat n navigator ca fiind document XML "i
browserul va raporta erorile sintactice n cazul n care nu este conform! recomand!rilor
XHTML.
De exemplu, pentru documentul:
<?xml version="1.0"?>
<html xmlns:html="http://www.w3.org/1999/xhtml">
<table width=600 align=center>
</table>

vom ob#ine mesajul de eroare din capturile-ecran de mai jos (Internet Explorer ofer! mai
multe explica#ii):

Validarea documentelor XHTML folosind suportul XML oferit de navigatoarele Web

D - 29

Tehnologii Web

Utilizatorii modelului obiectual de documente (DOM) trebuie s! #in! cont de

urm!toarele: recomandarea pentru DOM nivelul 1 define"te interfe#e att pentru XML, ct
"i pentru HTML 4, DOM pentru HTML specificnd faptul c! numele de elemente "i de
atribute vor fi returnate cu caractere mari, iar pentru XML vor fi returnate a"a cum au fost
scrise de creatorul documentului. Aceste diferen#e vor putea fi rezolvate n func#ie de tipul
MIME returnat: aplica#iile care manipuleaz! documentele XHTML prin intermediul tipului
text/html vor utiliza DOM pentru HTML, iar cele folosind tipul text/xml sau
application/xml vor utiliza DOM pentru XML.
n prezent n cadrul Consor#iului Web se lucreaz! la specifica#ia XHTML 1.1.

Arborele genealogic al XHTML

D - 30

Tehnologii Web

4. Foi de stiluri
4.1 Caracteristici generale
Foile de stiluri (Cascading Style Sheets - CSS) sunt grupuri de propriet!#i care
definesc modul de apari#ie a elementelor HTML n cadrul unui navigator Web.
Consor#iul Web a conceput "i standardizat dou! nivele ale foilor de stiluri:

CSS$ (Cascading Style Sheets - level $) reprezint! un mecanism simplu

care permite autorilor "i utilizatorilor de pagini Web s! ata"eze acestora stiluri
(de exemplu, fonturi, culori "i spa#ieri).

Limbajul CSS1 este u"or de n#eles "i de folosit de c!tre designerii Web "i
exprim! stilurile conform terminologiei edit!rii computerizate. CSS1 este o
recomandare a Consor#iului WWW din decembrie 1996.

CSS2 (Cascading Style Sheets - level 2) specific! o generalizare (extensie)

a primului nivel de foi de stiluri, aducnd n plus facilit!#i de mo"tenire a foilor de
stiluri, efecte vizuale, pozi#ion!ri "i pagin!ri, integrarea mai multor tipuri de medii
(suport pentru sunet). CSS2 a fost standardizat relativ recent (mai 1998).

Actualmente, exist! o serie de propuneri de redactare a specifica#iilor CSS3

(Cascading Style Sheets - level 3).
Cascada de stiluri
Vizualizarea unei pagini Web (pe ecran sau pe hrtie) poate fi influen#at! simultan de mai
mult de un stil. Motivarea acestei situa#ii este dat! de urm!torii factori:

modularitatea: un proiectant poate utiliza mai multe defini#ii de stiluri

simultan prin indicarea explicit! sau implicit! (utilizarea mai multor importuri) a
fi"ierelor CSS dorite;

balan"a autor/cititor: att autorul unei pagini Web, ct "i cititorul ei, i pot
influen#a prezentarea, browserele moderne permi#nd folosirea unor stiluri
personale ale cititorului.

Conflictele care pot apare se rezolv! prin ponderile ata"ate stilurilor. Implicit, ponderile
cititorului sunt mai mici dect ponderile regulilor stabilite de autor. Att ponderile
autorului, ct "i ponderile cititorului sunt mai importante dect cele implicite,
ale navigatorului.
Stilurile importate sunt n cascad! cu celelalte stiluri importate, n ordinea n care sunt
importate. Orice regul! explicit!, dat! n interiorul documentului, are pondere mai mare
dect regulile din stilurile importate (aceasta se aplic! "i recursiv, dac! este cazul). n CSS1
este recomandat ca stilurile importate s! fie naintea celorlalte defini#ii de stiluri, tocmai
pentru a ar!ta ordinea de cascad! men#ionat! mai sus.
O regul! de stil poate s!-"i m!reasc! ponderea n cazul n care este nso#it! de declara#ia
!important. Iat! un exemplu:
h2 { font-size:14pt!important; color: green }

D - 31

Tehnologii Web

O regul! stabilit! de cititor "i declarat! ca !important va fi prioritar! unei reguli cu

pondere normal!, specificat! de autor. ntre dou! reguli definite !important are
prioritate cea dat! de autorul foii de stiluri.
Modelul de formatare
n CSS, formatarea se realizeaz! prin intermediul unui model orientat box!, unde fiecare
element va produce o zon! (box!) dreptunghiular! sau mai multe (cu excep#ia elementelor
care au proprietatea display setat! cu valoarea "none"). Fiecare box! are un con#inut
nconjurat de zone op#ionale: de protec#ie (padding area), de bordur! (border area), de margine
(margin area), a"a cum se poate observa din figura urm!toare:

Modelul de formatare CSS

Exist! dou! tipuri de elemente:

elemente la nivel de bloc (block-level) - toate elementele pentru care n mod
implicit au proprietatea display setat! block sau list-item (element de list!)
"i elementele flotante (pentru care float are o valoare diferit! de none);

elemente inline - acele elemente care nu se formateaz! ca elemente la nivel

de bloc (de exemplu, elementele <b>, <i> sau <sub> din HTML sunt elemente
inline), avnd pentru display valoarea inline.

Astfel, elementele cu display setat pe block deschid o nou! box! de afi"are, aceasta
fiind pozi#ionat! relativ la boxele adiacente conform modelului de formatare CSS.
Exemple tipice de elemente de acest gen sunt <h1>, <p> sau <div>.
Elementele avnd display: list-item sunt similare celor la nivel de bloc,
exceptnd faptul c! este ad!ugat un marcaj de element de list!. Ca exemplu, n HTML este
elementul <li>.
Elementele cu display setat pe inline vor fi incluse ntr-o box! de afi"are de tip
inline, pe aceeasi linie cu con#inutul precedent din document. Boxa este dimensionat!
potrivit m!rimii formatate a con#inutului boxei. Dac! elementul con#ine text, acesta poate

D - 32

Tehnologii Web

s! apar! pe mai multe rnduri "i va produce o box! de afi"are pe fiecare rnd n parte.
Propriet!#ile referitoare la margine sau chenar se aplic! elementelor inline, dar nu au efect la
ruperea liniilor.
Pentru elementele cu display avnd valoarea none, browserul va anula afi"area lor
(inclusiv a elementelor copii "i a boxei nconjur!toare).
Pentru mai multe am!nunte, consulta#i specifica#iile CSS1 "i CSS2.

4.2 CSS - nivelul 1

n continuare vom face o prezentare a CSS1.
ntr-un document HTML putem utiliza multiple foi de stiluri, avnd un anumit nivel de
importan#!. Stilurile sunt n fapt propriet!#i care se pot folosi prin:

definire n antetul documentului

Stilurile se declar! cu ajutorul tag-ului <style> n care se amplaseaz!
selectorii (elementele HTML asupra c!rora se definesc stilurile) urma#i de
defini#iile de stil (de forma proprietate: valoare):

<html>
<head>
<title>Foi de stil</title>
<style type="text/css">
h2 {
font-family: Arial;
font-style: italic;
color: green
}
</style>
</head>
<body>
<h2>Este verde, italic "i Arial.</h2>
<p>
<h2>%i acesta este la fel...</h2>
</body>
</html>

Aceste defini#ii de stil vor fi plasate ntotdeauna n antetul unei pagini Web,
atributul type fiind obligatoriu.

inser"ie n cadrul unui tag (in-line)

Putem defini pentru un anumit tag particular stiluri folosind atributul
style:

<html>
<head>
</head>
<body>
<h2 style="font-family: Arial;
font-style: italic; color: green">
Acesta este un titlu verde, italic "i Arial...</h2>
<p>
<h2>Pe cnd acesta nu este!</h2>
</body>
</html>

D - 33

Tehnologii Web

n cele mai multe cazuri aceasta este metoda de a modifica stilurile globale
definite.

leg!tura cu un fi$ier extern

Toate stilurile se definesc n exteriorul documentului HTML, ntr-un fi"ier
.css care va fi inclus prin intermediul tag-ului <link> n pagina Web.
Astfel, avem posibilitatea de a utiliza un anumit fi"ier .css pentru mai multe
pagini sau chiar pentru un ntreg site Web, definind stilurile o singur! dat!.

<html>
<head>
<link rel="stylesheet" type="text/css"
href="foaie.css"
title="foaie de stiluri">
</head>
<body>
<h2>Un titlu verde, italic "i Arial...</h2>
<p>
<h2>Altul, la fel.</h2>
</body>
</html>

Fi"ierul foaie.css va con#ine urm!toarele:

h2 { font-family: Arial; font-style: italic; color: green }
p { text-indent: 10px; }

importare a unei foi externe

Folosind facilitatea de importare din CSS, se poate include o foaie de
stiluri astfel:

<html>
<head>
<style text="text/css">
<!-@import url("foaie.css")
-->
</style>
</head>
...
</html>

Aceast! abordare nu este recomandabil!, din cauza defectuoasei

implement!ri a mecanismului de import n cadrul navigatoarelor.
Stiluri combinate
Metodele de utilizare a stilurilor, descrise mai sus, de obicei se folosesc ntr-o manier!
combinat!. Dac! dou! foi definesc stiluri pentru acela"i tag, cea mai recent! (apropiat!)
defini#ie va c"tiga.
O proprietate poate avea mai multe valori alternative (suport pentru flexibilitate):
h2 { font-family: Arial, Helvetica, sans-serif }

Se recomand! ca ultima alternativ! s! fie ct mai general! (n acest caz, familia de fonturi
Sans Serif). Dac! navigatorul nu g!se"te nici o potrivire, se vor considera valorile implicite.

D - 34

Tehnologii Web

Clase !i identificatori
Orice tag HTML poate fi selector, dar uneori dorim s! utiliz!m defini#iile de stiluri ntr-o
manier! mai general!.
Din momentul definirii unei clase sau a unui identificator, putem s! ata"!m defini#ia
oric!rui tag.

Definirea unei clase se realizeaz! anexnd unei mul#imi de propriet!#i CSS un

nume precedat de punct:
.intens { font-weight: bolder; color: green }

Dup! care o utiliz!m oricnd dorim astfel:

<p class="intens">Un paragraf intensificat.</p>
<h3 class="intens">%i un titlu...</h3>

Identificatorul se folose"te n acela"i fel, dar este precedat de caracterul "#" n

loc de punct:
#intens { font-weight: bolder; color: green }

care se poate folosi n maniera urm!toare:

<p id="intens">Un paragraf intensificat.</p>

De men#ionat faptul c! fiecare element HTML va poseda un identificator unic.

Selectori contextuali
Putem imbrica elementele n cadrul unei selector pentru a crea stiluri particulare:
p em { color: blue }

Textul se va colora n albastru doar dac! n interiorul tag-ului <p> se va afla <em>:
<p>Un paragraf care este albastru doar
<em>aici</em>...</p>
<em>Acesta este italic "i att!</em>

Sec"iuni de grupare
Selectorii se pot grupa pentru a reduce m!rimea "i redundan#a unei foi de stil,
separndu-i prin virgule:
h1, h2, a, td {
font-family: Arial;
font-size:
16pt;
color:
green;
}

Marcatorii <h1>, <h2>, <a> "i <td> vor avea acela"i stil de formatare. Dac! se
dore"te s! se adauge unui tag particular alte modalit!#i de formatare, putem scrie nc!
o defini#ie:
h1 { font-style: italic }

D - 35

Tehnologii Web

Numai textul corespunz!tor marcatorului <h1> va fi nclinat.

Pseudo-clase !i pseudo-elemente
Pseudo-clasele "i pseudo-elementele pot fi folosite n selectori, dar ele nu exist! n cadrul
codului surs! HTML, de cele mai multe ori fiind "inserate" de navigatoare n anumite
condi#ii.
Acesta este cazul pseudo-claselor asociate elementului <a>, navigatoarele diferen#iind
leg!turile vizitate de cele nevizitate:
a:link
{ color: red }
/* leg!tur! nevizitat! */
a:visited { color: blue }
/* leg!tur! vizitat! */
a:active { color: yellow } /* leg!tur! activ! */

Pseudo-clasele pot fi utilizate "i n selectori contextuali:

a:link img { border: solid; color: green }

Ca pseudo-elemente se pot men#iona: first-line (aplicabil doar la prima linie a unui

paragraf sau diviziuni) "i first-letter (prima liter! a unui paragraf sau diviziuni),
putnd astfel defini efecte similare celor tipografice:
p:first-line
{ text-indent: 5% }
p:first-letter { font-size: 200%; float: left }

4.3 Proprietile CSS1

Foile de stiluri influen#eaz! modul de prezentare a documentelor prin asignarea de valori
unor propriet!#i de stil. Exist! mai multe categorii de propriet!#i dintre care men#ion!m:
1. propriet!"i ale fonturilor
font-family define"te care set de fonturi va fi utilizat.

Sunt definite familiile generice: serif (e.g. Times), sans-serif (e.g. Helvetica),
cursive (e.g. Chancery), fantasy (e.g. Western), monospace (e.g. Courier).
Din cauza taxonomiei diferite a fonturilor, se ncurajeaz! folosirea familiilor
generice.

font-style poate lua valorile: normal, italic sau oblique.

font-weight selecteaz! grosimea fontului (variaz! de la 100 la

900, dar se accept! "i valori ca normal, bold, lighter etc.).

font-size specific! m!rimea fontului, dndu-se n manier!

absolut! (x-small, medium, large etc. ori 10pt, 16pt etc.) sau relativ! (larger,
smaller) ori n procente (50%, -25%).

Un exemplu:
p, div {
font-size:
medium;
font-family: Verdana, Tahoma, Syntax, sans-serif;
font-weight: 600;
}

D - 36

Tehnologii Web

2. propriet!"i de fundal $i culori

color stabile"te culoarea de scriere - valori n limbajul natural

color: green
sau
n
format
RGB;
de
exemplu
color: rgb(255, 0, 0).

background-color stabile"te culoarea fundalului (cod-culoare

background-image stabile"te imaginea care va fi proiectat! pe

sau valoarea transparent).

fundalul acelui element:

body { background-image: url(img.gif) }

p
{ background-image: none }

background-repeat specific! modul de repetare a imaginii de

fundal: doar pe axa Ox (repeat-x), pe axa Oy (repeat-y), pe ambele sau deloc
(no-repeat).

background-attachment stabile"te dac! imaginea de fundal va

fi fix! sau va defila odat! cu con#inutul paginii. Valorile permise sunt fixed
sau scroll.
background-position determin! pozi#ia imaginii de fundal
background-position: 70% 0%
sau
de
exemplu:
background-position: top center).

(ca

nc! o exemplificare:
h2 {
background-image:
background-repeat:
background-position:
background-attachment:
}

url(bg.gif);
no-repeat;
center left;
fixed;

3. propriet!"i ale textului

letter-spacing define"te spa#ierea dintre litere:

blockquote { letter-spacing: 0.3em }

text-decoration poate lua valorile: none, underline, overline,

line-through sau blink:

a { text-decoration: none }
p { text-decoration: overline underline }

vertical-align specific! modul de aliniere vertical!, n func#ie

text-transform determin! maniera de transformare a textului

text-align aliniaz! textul (left, right, center, justify).

de pozi#ia elementului p!rinte sau relativ la linia formatat! din care face
parte.
(capitalize, uppercase, lowercase, none).

text-indent specific! modul de indentare a liniei, valorile fiind

fie procente, fie numere (cu semn sau nu):

D - 37

Tehnologii Web

p { text-indent: 2cm }
h1 { text-indent: -10% }

line-height specific! distan#a dintre dou! linii adiacente:

div { line-height: 1.3; font-size: 10pt }

4. propriet!"i ale boxelor de afi$are

A"a cum am v!zut mai sus, fiecare element este reprezentat n cadrul unei boxe
invizibile de afi"are. Exist! o serie de propriet!#i pentru specificarea marginilor
(margin), a zonei dintre bordur! (chenar) "i con#inutul efectiv (padding), a chenarului
care nconjoar! boxa de afi"are (border).
Exemple:
body {
margin-top:
1cm;
margin-right: 2cm;
margin-bottom: 3cm;
margin-left:
2cm;
}
blockquote { padding-bottom: 2em }
h1 h2 { border-width: medium }
img { border:solid; width: 200px; height: 50px }

Pot fi specificate "i modul de curgere a textului (float) "i pe care laturi a unei boxe
nu se permite curgerea (clear):
img.icon { float: left; margin-left: 0; clear: right }

5. propriet!"i de clasificare
white-space declar! cum sunt manipulate spa#iile albe din cadrul

unui element (normal, pre, nowrap).

list-style-type specific! tipul de apari#ie a membrilor dintr-o

list-style-image specific! drept marcaj a membrilor unei liste

list! (valori permise: disc, circle, square, decimal, lower-roman, upper-roman,

lower-alpha, upper-alpha sau none).
o imagine.

ul { list-style-image: url(triunghi.jpg) }

list-style-position poate lua valorile inside ori outside,

indicnd locul marcajului unui element de list!.

D - 38

Tehnologii Web

4.4 CSS - nivelul 2

Nout#"i !i modific#ri aduse de CSS2
n CSS2, selectorii admit descenden#i, putnd fi utilizat! pseudo-clasa first-child
pentru a accesa primul mo"tenitor al unui selector. Au ap!rut "i noi pseudo-elemente:
after "i before. Foile de stiluri pot fi dependente de medii (regula @media), putnd fi
specificate, de exemplu, stiluri diferite pentru afi"area pe ecran sau listarea la imprimant!.
Anumite tipuri de medii de reprezentare se pot pagina (cum este cazul hrtiei), CSS2
facilitnd specificarea dimensiunii paginii, a modului de salt la pagina nou!, a realiz!rii
diverselor marcaje etc.
n plus, CSS2 ofer! suport pentru folosirea stilurilor n cadrul tabelelor, pentru
modificarea interfe#ei cu utilizatorul "i pentru utilizarea foilor de stil aurale (bazate pe
sunet): propriet!#ile volume, speak, pause, cue, azimuth, elevation "i altele.
Se d! posibilitatea autorului paginii Web s! selecteze, local sau de la distan#!,
prin intermediul unui mecanism special, fonturile dorite a fi afi"ate, n diverse alfabete.
n CSS2 oricare element vizual poate fi precis pozi#ionat (n manier! relativ! sau
absolut!):
<p style="position: relative; top: 20px; left: 50px">CSS2</p>

Aceste facilit!#i mpreun! cu posibilitatea de a modifica vizibilitatea (proprietatea

visibility), de a permite decuparea elementelor (propriet!#ile clip "i overflow) "i
de a specifica mai multe straturi de prezentare a con#inutului paginii Web (ordinea afi"!rii
straturilor fiind controlat! de proprietatea z-index) pot fi folosite n contextul
DHTML-ului (Dynamic HTML). Mai multe am!nunte despre DHTML n capitolul dedicat
limbajului JavaScript.
n cadrul modelului de formatare pot fi precizate dimensiunile boxei de afi"are
(propriet!#ile width "i height). Mai mult, utilizatorii pot s!-"i creeze propriile lor
pseudo-variabile de contorizare a elementelor listelor numerotate.
Lista tuturor propriet!#ilor permise de CSS2 poate fi consultat! n anexa 5 a acestei c!r#i.

D - 39

Tehnologii Web

Exemple
a. Un efect 3D prin folosirea propriet!#ilor de pozi#ionare (position) "i
de stabilire a ordinii de afi"are (z-index), constituind a"a-numitul CSSP
(CSS Positioning):
<html>
<head>
<style type="text/css">
.over {
position: absolute;
top: 165px;
left: 20px;
z-index: 2;
background-color: green;
}
.under {
position: absolute;
top: 175px;
left: 20px;
z-index: 1;
background-color: blue;
}
</style>
</head>
<body>
<span class="over">
Acest text e pozi#ionat la 20 pixeli fa#! de
marginea stng! "i la 165 pixeli fa#!
de marginea superioar! a ferestrei.
</span>
<span class="under">
Acest text este afi"at sub textul precedent,
din cauza ordinii de afi"are dictat! de
proprietatea z-index.
</span>
</body>
</html>

b.

Asocierea de stiluri aurale pentru diverse elemente HTML:

@media aural {
h1, h2, h3 {
stress: 20;
richness: 90
}
pre {
speak-punctuation: code;
}
}

c. Se pot asigna diverse propriet!#i de stil pentru un element respectnd

anumite condi#ii, prin intermediul mecanismului de selectare CSS2. Astfel, putem asocia
stiluri pentru:

D - 40

Tehnologii Web

elemente care sunt descenden#i ai altor elemente:

ol > li { background-color: green }

Se va modifica fundalul numai pentru con#inutul elementelor <li> care

sunt copii ai lui <ol>.

elemente care urmeaz! imediat dupa altele "i fac parte din aceea"i
ierarhie de elemente:
h1 + h2 { margin-top: -5mm }

Se va reduce distan#a dintre <h1> "i <h2> numai dac! <h2> va urma
imediat dup! un element <h1>.

elemente care au asociate atribute cu diferite valori:

a[href="http://www.infoiasi.ro/"] { border-left: solid thin }

Se va genera un chenar la stnga doar dac! elementul <a> are atributul

href="http://www.infoiasi.ro/".
h5[rel~="copyright"] { font-family: arial }

Proprietatea va fi modificat! pentru toate elementele <h5> avnd

un atribut rel con#innd, printre altele, "i cuvntul "copyright"
(e.g. <h5 rel="Preciz!ri despre copyright">...</h5>).
*[lang=en] { display: none }

Toate elementele avnd atributul lang cu valoarea "en" vor fi ascunse.

Urm!torul exemplu poate fi utilizat ntr-o foaie de stiluri aural!:
dialogue[character=romeo]
{ voice-family: "Lawrence Olivier", charles, male }
dialogue[character=juliet]
{ voice-family: "Vivien Leigh", victoria, female }

elemente avnd atributul id setat cu o anumit! valoare:

h1#cap1 { letter-spacing: 0.3em }

Se va modifica spa#ierea dintre litere doar n cazul n care <h1> va avea

id="cap1".

Acest tip de selectori are o preceden#! mai mare dect selectorii de tip
atribut.
d. Exemplul de mai jos seteaz! modul de afi"are a ghilimelelor n func#ie
de limb!, att pentru document n general, ct "i pentru elementul <q>:
HTML:lang(fr)
HTML:lang(de)
:lang(fr) > Q
:lang(de) > Q

{
{
{
{

quotes:
quotes:
quotes:
quotes:

' ' ' ' }

'' '' '\2039' '\203a' }
' ' ' ' }
'' '' '\2039' '\203a' }

D - 41

Tehnologii Web

e. n cele ce urmeaz! putem remarca setarea de diverse propriet!#i n func#ie

de mediul de vizualizare a documentului Web:
@media
body
}
@media
body
}
@media
body
}

print {
{ font-size: 10pt }
screen {
{ font-size: 12pt; background-image: url(bg.gif) }
screen, print {
{ line-height: 1.2 }

Dintre tipurile de medii permise se pot enumera: aural (sonore), braille (destinate
orbilor), handheld (dispozitive miniaturizate), print (pentru imprimant!),
projection (pentru proiectoare), screen (ecranul calculatorului), tty (terminale text),
tv (destinate reprezent!rii pe ecranele TV).
Specifica#ia CSS2 mparte mediile n mai multe grupuri dintre care amintim:

continue (continuous) sau paginate (paged);

vizuale (visual), sonore (aural) sau tactile (tactile);

interactive sau statice.

f. Pentru tabele, CSS2 define"te un model de reprezentare inspirat de HTML

4.01, n care structura unui tabel urmeaz! modelul de reprezentare grafic! a
acestuia. Un tabel const! dintr-o parte (op#ional!) destinat! titlului "i explica#iilor
referitoare la tabel "i dintr-o mul#ime de rnduri con#innd un num!r arbitrar de
celule. n cadrul acestui model, nu exist! no#iunea de coloan!, prima celul! din
fiecare rnd putnd fi considerat! ca apar#innd primei coloane a tabelului, a doua
celul! din fiecare rnd corespunznd coloanei secunde a tabelului "i a"a mai departe.
Rndurile "i coloanele pot fi grupate, astfel nct n CSS2 modelul const! din
no#iunile de: tabel (table), legenda tabelului (caption), rnd (row), grup de rnduri
(row group), coloan! (column), grup de coloane (column group) "i celul! (cell).
n HTML 4.01 acestea corespund elementelor <table>, <caption> (putnd fi
specificate "i <thead> "i <tfoot>), <tr>, <tbody>, <col>, <colgroup>,
<td> ("i <th>), respectiv.
Propriet!#ile care pot fi modificate pentru ajustarea reprezent!rii tabelelor sunt:
display - stabile"te una dintre reprezent!rile de date, conform

modelului descris mai sus. Implicit, sunt considerate valorile:

table
tr
thead
tbody
tfoot
col
colgroup
td, th
caption

{
{
{
{
{
{
{
{
{

display:
display:
display:
display:
display:
display:
display:
display:
display:

table }
table-row }
table-header-group }
table-row-group }
table-footer-group }
table-column }
table-column-group }
table-cell }
table-caption }

propriet!#i relative la coloane: border, background, width,

visibility:

D - 42

Tehnologii Web

col
{ border-style: none solid }
table { border-style: hidden }
col.totals { background: blue; width: 300px }

caption-side - pentru stabilirea locului "i modului reprezent!rii

legendei tabelului:
caption {
caption-side: left;
margin-left: -8em;
width: 80%;
text-align: right;
vertical-align: top;
}

Valorile valide pentru caption-side sunt top, bottom, left sau right.
Pentru alinierea vertical! pot fi precizate valorile baseline (1) "i (2), top (3),
bottom (4), middle (5), sub, super, text-top ori text-bottom (vezi figura de mai jos).

Efectele de vizualizare la setarea de diferite valori pentru vertical-align

border-spacing, empty-cells, border-style sunt folosite

pentru stabilirea modului de formatare a chenarului tabelului:

td {
border-style: dotted;
border-width: 1px;
border-right: hidden;
border-bottom: hidden;
padding: 3px;
}
table {
border: solid navy;
border-width: 1px;
}
.noborder {
border: hidden;
}

g. Proprietatea cursor specific! forma de afi"are a cursorului mouse-ului

(sau a altui dispozitiv de intrare). Astfel, pot fi utilizate valorile crosshair, pointer, text,
move, wait, help, default sau auto:
D - 43

Tehnologii Web

a:hover { cursor: wait }

input
{ cursor: text }
img
{ cursor: pointer }

4.5 Utilizarea foilor de stiluri CSS pentru

formatarea documentelor XML
Fi"ierele CSS - nivelul 1, dar mai ales CSS - nivelul 2, pot fi folosite "i pentru formatarea
documentele XML. Prin instruc#iunea de procesare <?xml-stylesheet ...?> se pot
ata"a foi de stiluri CSS oric!ror documente XML.
Din p!cate navigatoarele actuale nu ofer! suport pentru toate propriet!#ile CSS, iar
posibilit!#ile de formatare uneori sunt dezam!gitoare. Se constat! fie blocarea browserului
(cazul Netscape 6), fie afi"area defectuoas! a elementelor formatate (cazul Internet
Explorer 5.5).
Furniz!m n continuare un exemplu de formatare CSS a documentului XML de mai jos:
<?xml version="1.0" ?>
<?xml-stylesheet href="style.css" type="text/css" ?>
<students>
<student matr="4533">
<name>Anca Avram</name>
<year>4</year>
</student>
<student matr="4574">
<name>Stefan Tanasa</name>
<year>4</year>
</student>
<student matr="3740">
<name>Radu Filip</name>
<year>3</year>
</student>
</students>

Vom utiliza mai nti CSS - nivelul 1, scriind foaia de stiluri style.css pentru a
formata documentul XML:
/* style.css (stiluri CSS1)
Utilizat pentru formatarea fi"ierelor XML */
students {
display: block;
border: solid thin navy;
background-color: white;
margin: 3em;
padding: 5px;
}
student {
display: block;
font-family: Verdana, Tahoma, sans-serif;
line-height: 1.2;
}

D - 44

Tehnologii Web

year {
display: inline;
text-align: center;
width: 50px;
border-right: solid thin red;
border-left: solid thin red;
}
name {
display: inline;
width: 300px;
font-weight: bold;
}
name:first-letter {
color: red;
font-size: 110%;
}

Rezultatul format!rii poate fi vizualizat n captura-ecran urm!toare (observ!m c!

Netscape nu realizeaz! corect formatarea):

Formatarea unui document XML folosind CSS$, n Netscape 6 !i Internet Explorer 5.5

Mai mult, dorim ca informa#iile despre fiecare student s! apar! ntr-un tabel, iar rndul
corespunznd studentei cu num!rul matricol 4533 s! aib! o alt! culoare de fundal.
Numele vor fi afi"ate ngro"at.

D - 45

Tehnologii Web

Pentru aceasta vom folosi modelul de formatare "i mecanismul de selectare din
CSS - nivelul 2.
/* style.css (stiluri CSS2)
Utilizat pentru formatarea fi"ierelor XML */
students {
display: table;
border: solid thin navy;
background-color: white;
margin: 3em;
}
student {
display: table-row;
font-family: Verdana, Tahoma, sans-serif;
}
student[matr="4533"] {
background-color: pink;
}
name, year {
display: table-cell;
width: 200px;
border-right: solid thin blue;
border-top: solid thin blue;
margin: 1em;
text-align: center;
}
name {
font-weight: bold;
}
name:first-letter {
color: red;
font-size: 110%;
}

Dup! cum se poate remarca, stabilim pentru fiecare element XML modelul de
reprezentare a datelor, aici n format tabelar. De asemeni, ne slujim de mecanismul de
selectare din CSS2 pentru a specifica o culoare de fundalul diferit! n cazul elementului
<student>
avnd atributul matr="4533". Se permite "i specificarea
pseudo-elementelor.
Modul de afi"are a documentului XML utiliznd aceast! foaie de stiluri este ilustrat mai
jos (se observ! formatarea eronat! produs! de IE):

D - 46

Tehnologii Web

Formatarea unui document XML folosind CSS2, n Netscape 6 !i Internet Explorer 5.5

nc!rcnd examplele de mai sus n Opera 5, remarc!m un comportament similar cu cel al

browserului Netscape 6.

4.6 Viitor
Viit or
n prezent, navigatoarele Web nu suport! dect un set (mai mult sau mai pu#in) restrns
din toate propriet!#ile specificate de recomand!rile CSS1 "i CSS2, cu fiecare nou! versiune
de browser fiind implementate altele noi. De"i nu att de flexibile "i de bogate n facilit!#i,
foile de stiluri CSS pot fi utilizate "i pentru formatarea documentelor XML.
Actualmente, cercet!torii de la Consor#iul Web preg!tesc al treilea nivel - CSS3, cea mai
recent! propunere publicndu-se n luna ianuarie 2001.

D - 47

Tehnologii Web

"Tot ceea ce e mai bun n lume este ceea ce produce gndul."

(Hegel)

Tehnologii Web

1. Introducere i caracterizare
Modelul orientat-obiect pentru documente (DOM) reprezint! o interfa#! de
programare a aplica#iilor destinate s! prelucreze documentele HTML "i XML,
independent! de platform! "i de limbaj, definind structura logic! a documentelor "i
modalit!#ile de accesare "i de modificare a lor.
Aceast! structur! logic! este una arborescent!, obiectual!: documentele sunt modelate
utiliznd obiecte, iar modelul nu ofer! doar o vizualizare structurat! a documentului, ci "i o
manier! de specificare a comportamentului lui "i a obiectelor componente. Fiecare element
al unui document poate fi privit, deci, ca un obiect, fiecare obiect avnd identitate "i
propriile sale func#ii. Exact ca "i n modelul obiect din cadrul metodologiei orientate-obiect,
DOM identific!:

interfe#ele "i obiectele utilizate s! reprezinte "i s! manipuleze un document;

semantica acestor interfe#e "i obiecte (inclusiv comportamentul "i atributele

rela#iile "i dependen#ele ntre aceste interfe#e "i obiecte.

lor);
Structura documentelor SGML era n mod tradi#ional reprezentat! de un model de date
abstracte, nu printr-unul orientat-obiect. Astfel, modelul vechi era centrat asupra datelor,
pe cnd n modelul obiect datele sunt ncapsulate n obiecte, ascunse "i/sau protejate de
prelucrarea extern! direct!. Func#iile (metodele) asociate acestor obiecte determin! modul
n care obiectele pot fi prelucrate.
Modelul avut n discu#ie n continuare const! din dou! p!r#i:

nucleul DOM utilizat s! reprezinte func#ionalitatea documentelor XML

generale (denumit "i DOM Core);

DOM HTML, bazat pe DOM Core, define"te o extindere a modelului

obiect pentru documentele HTML.

O implementare a modelului trebuie s! aib! n vedere implementarea obligatorie a

tuturor interfe#elor fundamentale definite de DOM Core, conform semanticii DOM.
Mai mult, trebuie s! implementeze cel pu#in una dintre interfe#ele HTML "i XML,
mpreun! cu semanticile aferente.
Cercet!rile ntreprinse de Consor#iul Web n ultimii ani vizeaz! mai multe nivele (stadii) de
specificare a modelului. Nivelul 0 (pentru HTML) a fost nivelul de func#ionalitate a
versiunilor 3 ale navigatoarelor Netscape "i Internet Explorer. Nivelul 1, de care ne vom
ocupa n detaliu n continuare, deja este recomandare standardizat! ncepnd cu octombrie
1998. n luna noiembrie 2000 a fost standardizat DOM Core - nivelul 2.
Nivelul 1 nu define"te n nici un fel r!spunsul la evenimente, cu toate c! a fost influen#at
major de HTML Dinamic, l!snd n responsabilitatea nivelului 2 specificarea acestora.
DOM nu este o specificare binar! "i nu define"te nici o form! de interoperabilitate la nivel
binar, n contrast cu alte tehnologii.

E-2

Tehnologii Web

DOM reprezint! un model obiectual care specific! interfe#e "i nu este un set de structuri
de date (abstracte). De asemeni, nu define"te semantica detaliat! pentru HTML sau XML.
Tehnologia COM, ca "i CORBA, reprezint! o modalitate, independent! de limbaj,
de a specifica interfe#e "i obiecte, iar DOM are vedere numai documentele HTML "i XML,
putnd fi implementat, fie folosind COM sau CORBA, fie limbaje precum Java sau
ECMAScript.

E-3

Tehnologii Web

2. Interfee i implementri
n cadrul modelului sunt specificate interfe"e care pot fi ulterior utilizate n prelucrarea
documentelor XML/HTML. Aceste interfe#e sunt abstractiz!ri, similare claselor abstracte
de baz! din limbajul C++, oferind o modalitate de accesare "i de modificare a reprezent!rii
interne a unui document n cadrul unei aplica#ii. Interfe#ele nu implic! o implementare
concret!, particular!, a func#iilor pe care le definesc, fiecare aplica#ie DOM putnd stoca
documentele n oricare reprezentare intern! convenabil!, atta timp ct interfe#ele DOM
sunt suportate. DOM este conceput s! evite dependen#a de implementare.
n cadrul nivelului 1 al modelului s-au limitat inten#ionat anumite func#ionalit!#i. Nivelele
ulterioare, bazate pe DOM Core, vor oferi:

un model structural pentru submul#imile elementelor interne "i externe ale

documentelor;

validarea prin intermediul schemelor (eventual prin XML Schema);

controlul reprezent!rii documentelor prin foi de stiluri (CSS, XSL sau alt
limbaj de specificare a stilurilor);

controlul accesului;

siguran#a n execu#ie;

evenimente.

E-4

Tehnologii Web

3. DOM Core - nivelul 1

Nucleul modelului define"te mul#imea minimal!, de baz!, a obiectelor "i interfe#elor
pentru accesarea "i modificarea con#inutului obiectelor document.

3.1 Structura
DOM reprezint! documentele ca o ierarhie de obiecte-nod care la rndul lor pot
implementa alte interfe#e, eventual mai specializate. Anumite tipuri de noduri pot avea
noduri copii (descenden#i) de diverse tipuri, desigur. Altele pot fi noduri frunz!, lipsite de
descenden#i.
Tipurile fundamentale ale nodurilor DOM sunt cele din urm!torul tabel:
Tip

Descenden"i

Document

Element, ProcessingInstruction, Comment,

DocumentType

DocumentFragment

Element, ProcessingInstruction, Comment,

Text, CDATASection, EntityReference

DocumentType
EntityReference

Element, ProcessingInstruction, Comment,

Text,
CDATASection, EntityReference

Element

Element, Text, Comment,

ProcessingInstruction,
CDATASection, EntityReference

Attr

Text, EntityReference

ProcessingInstruction

Comment

Text

CDATASection

Notation

Entity

Element, ProcessingInstruction, Comment,

Text, CDATASection, EntityReference
Tipurile de noduri !i descenden"ii lor

n plus, DOM specific! o interfa#! numit! NodeList pentru a procesa liste ordonate de
noduri (precum descenden#i ai unui nod sau elemente returnate de metoda
Element.getElementByTagName()) "i o interfa#! NamedNodeMap pentru liste
neordonate de noduri referite de nume de atribute (numele de atribute sunt numele
E-5

Tehnologii Web

atributelor unui element (marcator) HTML sau XML; e.g. align este atribut al
tag-ului <p>).
n cadrul modelului, NodeList "i NamedNodeMap sunt dinamice, n sensul c! orice
modificare a structurii unui document implic! automat "i reactualizarea tuturor instan#elor
NodeList "i NamedNodeMap, respectiv. Orice schimb!ri ale unui nod al arborelui de
noduri sunt reflectate n toate referin#ele la acel nod n obiectele NodeList "i
MapNodeMap asociate.

3.2 Tipuri de interfee

DOM Core prezint! dou! tipuri (seturi) diferite de interfe#e pentru un document
XML/HTML, unul prezentndu-l dintr-o perspectiv! "orientat!-obiect" (ierarhie de
mo"teniri de obiecte) "i setul "simplificat!" (permi#nd ca toate opera#iunile s! se execute
prin intermediul interfe#ei Node).
Specifica#ia DOM define"te tipul fundamental DOMString ca fiind o secven#! de coduri
pe 16 bi#i (folosind codificarea UTF-16):
typedef sequence<unsigned short> DOMString;

3.3 Limbajul IDL (Interface Definition Language)

Limbajul de definire a interfe#elor (IDL), folosit "i de specifica#iile CORBA 2.2,
define"te tipurile de obiecte prin specificarea interfe#elor acestora, fiind un limbaj pur
declarativ, a c!rui sintax! deriv! din C++. IDL este folosit pentru definirea static! a
interfe#elor obiect, permi#nd invocarea opera#iunilor n diverse implement!ri.

Ierarhia de tipuri de date IDL

IDL suport! mo"tenirea multipl! a interfe#elor, permi#nd definirea de module, interfe#e,

metode, tipuri, atribute, excep#ii, constante.
Pot exista de asemeni anumite depozite (repositories) de interfe#e descrise n IDL pentru
facilitarea invoc!rilor dinamice de obiecte.

E-6

Tehnologii Web

3.4 Interfee fundamentale

Interfe#ele denumite fundamentale trebuiesc implementate n ntregime conform
specifica#iilor DOM. Ele sunt urm!toarele:
a. DOMException define"te mecanismul de r!spuns la apari#ia excep#iilor.
Excep"iile apar n circumstan#e speciale, de exemplu cnd o opera#iune este imposibil
de executat (pierdere de date, implementare devenit! instabil! etc.). Anumite
limbaje de programare nu au implementat conceptul de excep#ie. Pentru
implement!rile DOM n astfel de limbaje, raportarea excep#iilor se va realiza
folosind mecanismele native de semnalare a erorilor.
Defini#ia conform standardului IDL este urm!toarea:
exception DOMException {
unsigned short code;
};

Codurile de excep#ie sunt numere ntregi indicnd ce tip de eroare a ap!rut.

Pot fi folosite o serie de constante predefinite:
Constante predefinite

Semnifica"ie
Valoare de index invalid!

INDEX_SIZE_ERR
DOMSTRING_SIZE_ERR
HIERARCHY_REQUEST_ERR
WRONG_DOCUMENT_ERR

Lungime invalid! a unui "ir de caractere

Inserare incorect! a unui nod
Utilizare de noduri ntr-un alt document
diferit de cel la care apar#ineau

INVALID_CHARACTER_ERR

Apari#ia unui caracter invalid (de exemplu, n

componen#a unui nume de marcator)

NOT_FOUND_ERR

ncercare de creare a unei referin#e a unui nod

ntr-un context eronat

NOT_SUPPORTED_ERR

Implementarea nu suport! facilitatea

cerut! de aplica#ie

Coduri de eroare folosite de DOMException

b. DOMImplementation este o interfa#! oferind metodele pentru executarea

opera#iunilor independente de orice instan#! particular! a unui document.
n fapt, nivelul 1 nu specific! vreo modalitate de creare a unei instan#e document,
l!snd implementatorilor aceast! responsabilitate:
interface DOMImplementation {
boolean hasFeature(in DOMString feature,
in DOMString version);
};

Metoda hasFeature testeaz! dac! implementarea poate furniza o anumit!

opera#iune. Pentru DOM nivelul 1, parametrii de intrare pot avea valorile "HTML"
sau "XML" pentru feature "i "1.0" pentru version, respectiv.

E-7

Tehnologii Web

c. DocumentFragment este un obiect document minimal. n multe situa#ii

nu trebuie lucrat cu ntregul document, ci doar cu diverse fragmente ale sale.
Arborele de noduri ale unui fragment de document este un sub-arbore al structurii
de noduri a documentului luat n ntregul lui. n func#ie de implementare
DocumentFragment poate reprezenta o entitate XML, un element HTML sau
chiar un grup de elemente:
interface DocumentFragment : Node {
};

Dup! cum se remarc!, DocumentFragment are ca interfa#! de baz! interfa#a

Node pe care o vom prezenta mai jos.
d. Document reprezint! un document XML/HTML, conceptual fiind
r!d!cina arborelui de noduri-obiecte ale documentului "i oferind accesul la
informa#iile con#inute de acesta. Din moment ce elementele (marcatorii), nodurile
de tip text, comentariile, instruc#iunile de procesare (care pot apare mai ales n
cadrul documentelor XML) nu pot exista n afara contextului unui document,
interfa#a Document con#ine de asemeni metodele de baz! necesare pentru a crea
aceste obiecte. Obiectele de tip Node instan#iate vor avea un atribut numit
ownerDocument care le va asocia documentului n al c!rui context au fost create.
Interfa#a Document are ca membri trei atribute:
doctype de tip DocumentType reprezint! declara#ia tipului de
i.
document (DTD) asociat! unui document particular. Pentru HTML, DTD
este definit! de Consor#iul Web n specifica#iile limbajului "i nu se ata"eaz!
niciodat! documentelor deoarece nu poate fi modificat!. Documentele
XML pot avea sau nu definite DTD-urile aferente, fiecare DTD n parte
specificnd un tip de document XML. n DOM nivelul 1, doctype este
declarat read-only, deci nu poate fi alterat.
implementation de tip DOMImplementation specific!
ii.
implementarea sau implement!rile disponibile pentru procesarea
documentului.
documentElement de tip Element specific! nodul r!d!cin! de
iii.
accesare a structurii arborescente a documentului (pentru HTML este
"HTML", evident).

Drept metode men#ion!m:

createElement() creeaz! un element de un anumit tip

(astfel se pot insera noi tag-uri ntr-un document HTML, a"a cum se
permite n JavaScript de exemplu);

createTextNode(), createComment(), createCDATA

Section(),
createProcessingInstruction() vor genera

noduri-obiect de tip text, comentariu, sec#iune Character DATA,

instruc#iune de procesare, respectiv;

createAttribute() creeaz! un obiect atribut care va fi asociat

unui element specificat;

getElementsByTagName() va returna o list! ordonat! de noduri

NodeList pentru toate elementele corespunz!toare unui tag, ordonarea

nodurilor realizndu-se prin parcurgerea n preordine a arborelui.

E-8

Tehnologii Web

Un exemplu:
Presupunem c! avem documentul HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head></head>
<body>
<ul>
<li>Sec#iunea 1</li>
<li>Sec#iunea 2</li>
<li>Sec#iunea 3</li>
</ul>
<hr>
<!-- Sfr"it -->
</body>
</html>

Arborele de noduri-obiect asociat documentului este ilustrat de figura urm!toare:

Arborele de obiecte-noduri asociat unui document HTML

getElementByTagName("li") va returna o list! de tip

NodeList cu trei obiecte corespunz!toare nodurilor 6, 7 "i 8

(n aceast! ordine) figurate mai sus.

getElementByTagName("*")

arborelui, n preordine.
E-9

va

furniza

toate

nodurile

Tehnologii Web

e. Node este o interfa#! important! care define"te un tip primar pentru

ntregul model DOM, reprezentnd un singur nod n cadrul arborelui asociat unui
document. Atributele nodeName, nodeValue "i attributes sunt introduse ca
mecanism pentru furnizarea informa#iilor despre noduri f!r! conversie de tipuri
(vizualizare "simplificat!", nu una "orientat!-obiect"). Fiecare nod va avea asociat!
o list! ordonat! con#innd descenden#ii s!i, plus atribute specificnd nodul p!rinte,
primul
"i
ultimul
nod
copil,
dac!
exist!.
Ca metode importante se pot men#iona cele manipulnd nodurile copil:
insertBefore(),
replaceChild(),
removeChild(),
appendChild(), cloneChild(), hasChildNodes() etc.

f. NodeList reprezint! o interfa#! care ofer! un tip abstract de dat! pentru

colec#iile ordonate de noduri, f!r! a defini sau restric#iona cum aceast! colectie va fi
implementat!. Fiecare implementator va decide ce tipuri de date concrete vor fi
utilizate. Membrii colec#iei se vor accesa prin intermediul unui index ntreg,
numerotarea ncepnd cu valoarea 0.
interface NodeList {
Node item(in unsigned long index);
readonly attribute unsigned long length;
};

g. NamedNodeMap este folosit! pentru reprezentarea abstract! a colec#iilor

neordonate de noduri, prelucrate prin intermediul numelui. Interfa#a
NamedNodeMap nu deriv! din NodeList.
interface NamedNodeMap {
Node getNamedItem(in DOMString name);
Node setNamedItem(in Node arg)
raises (DOMException);
Node removeNamedItem(in DOMString name)
raises (DOMException);
Node item(in unsigned long index);
readonly attribute unsigned long length;
};

h. CharacterData este o interfa#! care extinde Node cu un set de atribute "i

metode pentru accesarea datelor de tip caracter n cadrul DOM.
i. Attr reprezint! un atribut din cadrul unui obiect de tip Element. n mod
tipic, valorile permise ale atributelor sunt definite n DTD-ul corespunz!tor
documentului. n DOM, Attr nu se consider! c! apar#ine arborelui de
noduri-obiect al documentului. Atributele de tip Attr sunt v!zute ca propriet!#i ale
elementelor (marcatorilor), putnd fi asociate nodurilor Element con#inute de
obiecte de tip DocumentFragment.
interface Attr : Node {
readonly attribute DOMString name;
readonly attribute boolean specified;
attribute DOMString value;
};

Pentru documentele HTML/XML valorile atributelor nu sunt doar "iruri de

caractere. Majoritatea valorilor atributelor n DOM vor fi considerate, ns!, de tip
caracter, conform tabelului:

E - 10

Tehnologii Web

Tipuri DTD

Tipuri DOM

CDATA

DOMString

List! de valori

DOMString

(left|right|center)
Valoare unic!
(noshade)

boolean

Num!r

long int

Coresponden"a dintre tipurile DTD !i tipurile DOM

j. Element este o interfa#! derivnd din Node care ofer! metode de accesare
a obiectelor Attr, prin nume sau prin valoare: getAttribute(),
setAttribute(),
removeAttribute(),
getAttributeNode(),
setAttributeNode(), removeAttributeNode().

De exemplu, pentru fragmentul de document XML:

...
<section id="demo" version="draft">
...
</section>
...

vom avea un obiect Element pentru care tagName="section". Atunci, apelul

getAttribute("id") va returna "irul "demo", iar
apelul metodei
getAttribute("version") va da "draft".
k. Text este o interfa#! reprezentnd con#inutul textual (date de tip "iruri de
caractere) al unui nod Element sau Attr. Dac! ntre tag-urile de nceput "i de
sfr"it nu exist! alte tag-uri, textul va fi con#inut ntr-un obiect implementnd
interfa#a Text.
l.

Comment reprezint! con#inutul unui comentariu delimitat de <!-- "i -->:

interface Comment : CharacterData {

};

3.5 Interfee extinse

Modelul extinde interfe#ele definite de DOM Core, pentru a suporta implement!ri avnd
n vedere procesarea documentelor HTML. Interfe#ele extinse sunt CDATASection,
DocumentType,
Notation,
Entity,
EntityReference
"i
ProcessingInstruction prezentate n detaliu de specifica#iile DOM.

E - 11

Tehnologii Web

4. DOM nivelul 1 pentru HTML

Modelul pentru HTML extinde func#ionalit!#ile descrise n DOM Core. Scopurile
modelului DOM HTML sunt urm!toarele:
specializarea interfe#elor "i ad!ugarea de noi facilit!#i pentru specificarea
orientat!-obiect a documentelor HTML;

oferirea unor mecanisme convenabile pentru opera#ii comune "i frecvente

asupra documentelor HTML.

DOM pentru HTML define"te o interfa#! generic! denumit! HTMLCollection care

reprezint! o list! abstract! de noduri. Un nod poate fi accesat fie printr-un index ordinal,
fie prin nume, fie prin atributele de identificare:
interface HTMLCollection {
readonly attribute unsigned long length;
Node item(in unsigned long index);
Node namedItem(in DOMString name);
};

Pentru fiecare marcator definit de specifica#iile HTML 4, se ofer! o interfa#!,

ca de exemplu:
Element HTML

Interfa"# DOM

HTML

HTMLDocument

HEAD

HTMLHeadElement

META

HTMLMetaElement

BODY

HTMLBodyElement

FORM

HTMLFormElement

UL

HTMLUListElement

OL

HTMLOListElement

DIV

HTMLDivElement

...

...

Cteva elemente HTML !i interfe"ele DOM corespunz#toare

Cu excep#ia interfe#ei HTMLDocument, toate celelalte interfe#e HTMLXXXElement sunt

derivate din interfa#a generic! HTMLElement a c!rei defini#ie IDL este:
interface HTMLElement
attribute DOMString
attribute DOMString
attribute DOMString
attribute DOMString
attribute DOMString
};

: Element {
id;
title;
lang;
dir;
className;

E - 12

Tehnologii Web

Atributele id, title, lang, dir, className au semantica prezentat! n

specifica#iile HTML 4.
Astfel, pentru elementul PRE avem urm!toarea ierarhie de interfe#e:

Ierarhia de interfe"e pentru un element HTML

E - 13

Tehnologii Web

5. DOM nivelul 2
5.1 DOM Core pentru nivelul 2
Nivelul al doilea al modelului de baz! define"te extensii ale interfe#elor nivelului 1,
oferind func#ionalit!#i noi ca posibilitatea de a crea un obiect Document sau de a copia un
nod dintr-un document ntr-altul.
O serie dintre interfe#ele noi propuse n cadrul specifica#iilor preliminare sunt:
a. DOMImplementation2 este extins! cu metodele necesare pentru crearea
unei instan#e a unui document XML:
interface DOMImplementation2 : DOMImplementation {
DocumentType createDocumentType(in DOMString name,
in DOMString publicID,
in DOMString systemID)
raises(DOMException);
Document createDocument(in DOMString name,
in DocumentType doctype)
raises(DOMException);
};

Metoda createDocumentType va crea un nod vid de tip DocumentType

avnd Node.ownerDocument setat null, iar createDocument va genera un
obiect Document XML.
b. Document2 extinde interfa#a Document cu o metod! care permite
importarea nodurilor dintr-un alt document:
interface Document2 : Document {
Node importNode(in Node importedNode,
in boolean deep);
};

Nodul returnat nu are p!rinte (parentNode este vid). Se creeaz! un obiect nod
apar#innd documentului care l import! cu valorile atributelor identice cu cele ale
nodurilor surs! nodeName "i nodeType. Nodul surs! nu va fi alterat. Nodurile de
tip Entity, Document, DocumentType "i Notation nu pot fi importate.
Parametrul importedNode desemneaz! nodul de importat, iar dac! deep este
true se import! n mod recursiv subarborele avnd ca nod r!d!cin! nodul importat.
DOM Core - nivelul 2 ofer! "i suport pentru spa#iile de nume XML, prin ad!ugarea unor
metode noi la anumite interfe#e. Astfel, Document pune la dispozi#ie
createElementNS(), createAttributeNS() "i getElementsByTagNameNS(),
iar interfa#a Node are ca membri atributele namespaceURI "i prefix. Interfa#a
NamedNodeMap furnizeaz! metodele getNamedItemNS(), setNamedItemNS() "i
removeNamedItemNS() pentru manipularea listelor de noduri pe baza spa#iilor de nume.
De asemeni, Element posed! ca membri metodele getAttributeNS(),
setAttributeNS(),
removeAttributeNS(),
getAttributeNodeNS() "i
setAttributeNodeNS(), plus atributul hasAttributeNS.

E - 14

Tehnologii Web

5.2 Foi de stiluri descrise de DOM nivelul 2

n cadrul nivelului 2 se define"te un set de interfe#e de baz! utilizate s! reprezinte orice
tip de foi de stiluri:
a. StyleSheet este o interfa#! abstract! de baz! pentru oricare tip de foi de
stiluri, reprezentnd o unic! foaie de stiluri asociat! unui document structurat.
n HTML aceasta reprezint! fie o foaie de stiluri extern!, inclus!, dup! cum am
v!zut, prin marcatorul <link>, sau intern!, prin <style>. n XML, aceast!
interfa#! reprezint! o foaie de stiluri extern!, inclus! printr-o instructiune de
procesare a foilor de stiluri.
interface StyleSheet
readonly attribute
attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
};

b.

{
DOMString
boolean
Node
StyleSheet
DOMString
DOMString
MediaList

type;
disabled;
ownerNode;
parentStyleSheet;
href;
title;
media;

StyleSheetList ofer! o colec#ie ordonat!, abstract!, de foi de stiluri:

interface StyleSheetList {
readonly attribute unsigned long length;
StyleSheet item(in unsigned long index);
};

c. MediaList reprezint! o abstractizare a unei colec#ii ordonate de tipuri de

medii (cum ar fi text, audio sau video), f!r! a constrnge implementarea acesteia:
interface MediaList {
attribute DOMString cssText;
readonly attribute unsigned long length;
DOMString
item(in unsigned long index);
void
delete(in DOMString oldMedium)
raises(DOMException);
void
append(in DOMString newMedium)
raises(DOMException);
};

d. DocumentStyle specific! un mecanism de accesare a foilor de stiluri

asociate unui document:
interface DocumentStyle {
readonly attribute StyleSheetList styleSheets;
};

5.3 Evenimente
Scopurile modelului sunt urm!toarele:
i.
Proiectarea unui sistem generic de evenimente care s! permit!: definirea
activit!#ilor ce vor fi executate la apari#ia unui eveniment, descrierea fluxului de
evenimente printr-o structur! arborescent! "i oferirea unor informa#ii contextuale
E - 15

Tehnologii Web

pentru fiecare eveniment n parte. n plus se doresc: conceperea unui set standard
de evenimente pentru controlul interfe#ei cu utilizatorul "i notificarea modific!rilor
(de structur!) ale documentelor.
ii.
Oferirea unui subset comun al evenimentelor utilizate de navigatoarele
actuale.
Cerin#ele de proiectare:

fluxul de evenimente
Modelul trebuie s! suporte mai multe proceduri de detectare a
evenimentelor asociate unui nod "i s! poat! recep#iona evenimente nainte "i
dup! ce o implementare DOM a procesat un eveniment.

mecanismul de detectare a apari"iei evenimentelor

Modelul trebuie s! defineasc! un mecanism programabil de specificare a
modului de detectare a evenimentelor (sistem "i definite de utilizator). Modelul
trebuie, de asemeni, s! specifice interac#iunea ntre acest mecanism "i cel de
specificare a evenimentelor din HTML 4. Modelul trebuie s! defineasc! reguli
de interac#iune a evenimentelor definite fie la nivelul marcatorilor, fie prin
stiluri sau prin intermediul script-urilor.

informarea contextual!
Este necesar s! se specifice un mecanism de accesare a informa#iilor
contextuale referitoare la orice eveniment survenit.

tipuri de evenimente
Modelul trebuie s! permit! crearea unor mul#imi de evenimente, diferite de
cele specificate n cadrul DOM. Modelul trebuie n plus s! suporte evenimente
ale interfe#ei cu utilizatorul "i s! defineasc! un set de evenimente privind
modificarea de structur! sau de stil a unui document.

Modelul DOM nivelul 2 define"te urm!toarele tipuri de evenimente:

Evenimente trimise de interfa"a cu utilizatorul (navigator Web): click,

mousedown,
mouseup,
mouseover,
mousemove,
keypress, keydown, keyup, resize, scroll.

mouseout,

Evenimente de modificare a structurii documentului: subtreeModified,

nodeInserted, nodeRemoved, attrModified etc.

Evenimente HTML (definite de specifica#iile HTML): load, unload,

abort, error, select, submit, focus, blur "i altele.

Interfe#ele din cadrul modelului sunt urm!toarele:

a.

EventTarget este implementat! de toate nodurile:

interface EventTarget {
void addEventListener(in DOMString type,
in EventListener listener,
in boolean useCapture);
void removeEventListener(in DOMString type,
in EventListener listener,
in boolean useCapture);
};

E - 16

Tehnologii Web

b. EventListener
evenimentelor:

reprezint!

mecanismul

primar

de

manipulare

interface EventListener {
void handleEvent(in Event event);
};

c. Event este o interfa#! utilizat! s! ofere informa#ii contextuale pentru un

eveniment, informa#ii folosite de o procedur! de tratare a acelui eveniment.
interface Event {
attribute DOMString type;
attribute Node target;
attribute Node currentNode;
attribute unsigned short eventPhase;
void preventBubble();
void preventCapture();
void preventDefault();
};

5.4 Filtre i iteratori

Interfe#ele Iterator, Filter "i TreeWalker permit parcurgerea simpl! "i eficient! a
subarborilor, listelor de noduri sau rezultatelor interog!rilor efectuate asupra documentelor.
Interog!rile nc! nu sunt specificate n cadrul nivelului 2.
Iteratori
Un iterator permite ca nodurile dintr-o structurdac! de date s! fie returnate n mod
secven#ial. Dup! crearea unui iterator, prima apelare a metodei nextNode() va returna
primul nod. Dac! nu exist! noduri, rezultatul va fi null. Un iterator poate fi activ "i cnd o
structur! de date este editat! (dinamic!). %tergerile "i ad!ug!rile de date nu vor invalida
iteratorii niciodat!.
Iteratorii se creeaz! prin metoda createNodeIterator. Nodurile de tip iterator vor
fi accesate prin intermediul interfe#ei NodeIterator prezentat! n continuare:
interface NodeIterator {
readonly attribute long whatToShow;
readonly attribute NodeFilter filter;
Node nextNode();
Node previousNode();
};

Atributul whatToShow stabile"te tipul de noduri care vor fi returnate de iterator: toate
nodurile
(SHOW_ALL),
elementele
(SHOW_ELEMENT),
texte
(SHOW_TEXT),
noduri-document (SHOW_DOCUMENT) etc.
Filtre
Fiecare filtru con#ine o func#ie scris! de utilizator care determin! ca un nod s! fie filtrat
(disponibil) sau nu. Un filtru este utilizat de un iterator care aplic! filtrul fiec!rui nod.
Dac! filtrul respinge nodul, iteratorul l ignor!, trecnd la urm!torul nod. Filtrele sunt u"or

E - 17

Tehnologii Web

de scris din moment ce nu este necesar a se cunoa"te structura de date asupra c!rora vor
opera. Filtrele pot fi refolosite cu succes "i n cadrul altor interatori.
interface NodeFilter {
// Constante returnate de
const short FILTER_ACCEPT
const short FILTER_REJECT
const short FILTER_SKIP

acceptNode()
= 1;
= 2;
= 3;

short acceptNode(in Node n);

};
Un exemplu

Vom considera un filtru care g!se"te ancorele interne (definite de un tag

<a name="...">) dintr-un document HTML. Implementarea Java este dat! mai jos:
class NamedAnchorFilter implements NodeFilter
{
short acceptNode(Node n)
{
if (n instanceof Element)
{ // nodul n este un element (tag)
Element e = n;
// nu este tag-ul dorit
if (e.getNodeName() != "A")
return FILTER_SKIP;
// s-a specificat atributul 'name'
if (e.getNodeNameAttributeNode("NAME") != NULL)
return FILTER_ACCEPT;
}
return FILTER_SKIP;
}
}

Pentru folosirea filtrului, utilizatorul va trebui s!-l instan#ieze "i s! creeze un iterator:
NamedAnchorFilter myFilter;
NodeIterator
iterator = document.createNodeIterator(node,
SHOW_ELEMENT, myFilter);

Interfa"a TreeWalker
Complementar! interfe#ei Iterator, TreeWalker ofer! o prezentare arborescent! a
nodurilor dintr-un subarbore. Navigarea prin nodurile unui document folosind metode
interfe#ei TreeWalker poate utiliza filtre.
interface TreeWalker {
readonly attribute long whatToShow;
readonly attribute NodeFilter filter;
Node current();
Node parentNode();
Node firstChild();
Node lastChild();

E - 18

Tehnologii Web

DOM nivelul 2 define"te "i interfa#a DocumentIF con#innd metode pentru crearea
iteratorilor meni#i s! traverseze - prin metoda depth first search (DFS), pre-ordine - nodurile
unui document XML/HTML.
interface DocumentIF {
short createNodeIterator(in Node root,
in short whatToShow,
in NodeFilter filter);
};

E - 19

Tehnologii Web

6. Procesarea documentelor XML

Am prezentat mai sus un model obiectual destinat proces!rii documentelor XML, model
denumit DOM (Document Object Model). n continuare vom ilustra concret cum, prin
intermediul DOM, putem interveni n structura unui document XML, modificndu-l
n mod dinamic. Analiza documentelor XML se poate realiza independent de navigator sau
chiar n cadrul browserului Web.

6.1 Interfaa SAX

Pentru implementarea DOM se pot utiliza mai multe metode, una dintre cele mai facile
fiind SAX (Simple API for XML), o interfa#! simpl! de programare destinat! manipul!rii
documentelor XML, ns! nu att de complet! precum DOM. Majoritatea celor care se
ocup! de XML v!d structura unui document n form! arborescent!, iar modelul DOM
ofer! din plin posibilitatea de a manipula informa#iile n aceast! manier!. Din punctul de
vedere al implementatorilor aceast! abordare are numeroase deficien#e (maniera de stocare
intern! a arborelui de obiecte, parcurgerea lui etc.). Unul dintre beneficiile utiliz!rii
interfe#ei SAX este c! arborele nu mai trebuie construit, dndu-i-se programatorului o alt!
cale de manipulare a documentului XML. n plus, SAX poate ajuta la convertirea datelor
din formatul arborescent DOM n alt format mai comod, iar pentru parsare nu este necesar
a se memora ntreaga informa#ie XML, ci numai p!r#ile dorite.
n mod uzual, SAX are implement!ri n limbajele C sau Java.
SAX n Java
Implement!rile Java pentru SAX sunt ncapsulate n pachetul de clase org.xml.sax
care poate fi ob#inut gratuit prin Internet. Ca drivere de parsare SAX se pot men#iona
XML4J (IBM), XP (James Clark), JAXP (Sun) sau Xerces (Apache). Alternativele sunt
SAXDOM ori MSXML (Microsoft), iar dac! se dore"te o procesare mai elaborat! a unui
document XML se poate utiliza un servlet numit DOMit, dezvoltat de IBM. Drept aplica#ii
bazate pe SAX putem enumera: JUMBO (vizualizator de documente XML), FREEDOM (implementare liber! a unor biblioteci Java de analiz! XML), SAXON (interfa#! de
nivel ridicat bazat! pe SAX), Alfred XML Parser "i altele. Desigur, exist! parsere XML "i
pentru Perl, Python, Delphi etc. disponibile pentru diverse platforme (vezi "i anexa 6).
Vom ilustra succint pachetul de distribu#ie SAX org.xml.sax care se compune din 11
clase "i interfe#e de baz!, la care se al!tur! 3 clase suplimentare "i 4 clase demonstrative,
totul divizndu-se n cinci grupuri:
interfe"e implementate de analizorul (parserul) documentelor XML: Parser "i
AttributeList (obligatorii), plus Locator (op#ional!); analizorul XML se mai
denume"te "i SAX Driver.
a.

b. interfe"e implementate de aplica"ia care dore$te s! manipuleze documentele XML via

DocumentHandler,
ErrorHandler,
DTDHandler,
driverul
SAX:
EntityResolver pentru procesarea documentului, raportarea erorilor, analiza

E - 20

Tehnologii Web

defini#iei tipului de document (Document Type Definition) "i rezolvarea entit!#ilor

XML, respectiv. Toate aceste clase pot fi utilizate op#ional.
clase SAX standard (care pot fi folosite att de parsere, ct "i de aplica#ii):
InputSource, SAXException, SAXParseException "i HandlerBase,
toate acestea fiind implementate n ntregime de SAX.
c.

clase adi"ionale specifice Java, complet implementate: ParserFactory,

AttributeListImpl "i LocatorImpl.
d.
e.

clase

demonstrative

capabilit!#ilor

SAX,

fapt

aplica#ii

Java:

SystemIdDemo,
ByteStreamDemo,
CharacterStreamDemo
"i
DemoHandler. Aceaste clase nu fac parte din specifica#iile de baz! ale SAX "i pot

s! nu apar! n implement!ri SAX n alte limbaje.

Interfa#a de baz! a interfe#ei SAX este org.xml.sax.Parser care trebuie

implementat! de toate analizoarele XML, permi#nd aplica#iilor s! nregistreze metode de
r!spuns la diverse tipuri de evenimente "i s! ini#ializeze procesul de analiz! a documentelor
XML nc!rcate via URI sau printr-un flux de caractere.
Interfa#a org.xml.sax.DocumentHandler reprezint! interfa#a principal! pe care
trebuie s! o implementeze o aplica#ie utiliznd SAX. Dac! aplica#ia dore"te s! fie informat!
asupra evenimentelor ce pot interveni n procesul de analiz!, va implementa aceast!
interfa#! "i va folosi o instan#! a ei prin intermediul metodei setDocumentHandler n
cadrul parserului SAX. Analizorul va utiliza instan#a pentru a raporta diverse evenimente
precum nceputul/sfr"itului unui element XML (startElement, endElement), al unei
instruc#iuni de procesare etc. Ordinea evenimentelor va fi n fapt dat! de ordinea de apari#ie
fizic! a diverselor elemente ale documentului XML care se dore"te a fi analizat.
Pentru procesarea atributelor asociate elementelor XML se va folosi interfa#a
org.xml.sax.AttributeList. Iat! un exemplu de iterare a ntregii liste de atribute
asociate elementelor unui document XML:
public void startElement (String ename, AttributeList atts) {
for (int i = 0; i < atts.getLength(); i++) {
String name = atts.getName(i);
String type = atts.getType(i);
String value = atts.getValue(i);
...
}
}

Dac! elementul nu va avea atribute, atunci getLenght() va returna 0. Func#iile

getName(), getType() "i getValue() furnizeaz! numele, tipul (CDATA, ID,
IDREF, NMTOKEN, ENTITY etc.) "i valoarea atributului, respectiv.
Clasa org.xml.sax.Locator este folosit! pentru localizarea documentelor XML
prin intermediul unui URI (Uniform Resource Identifier). Dac! o aplica#ie are nevoie de
redirectarea URI-urilor, atunci poate implementa EntityResolver.
Ca middleware ntre un driver (parser) SAX "i un client (aplica#ie) SAX poate fi folosit
procesorul arhitectural XAF conceput de Megginson.

E - 21

Tehnologii Web

SAX n C
O implementare gratuit! n limbajul C pentru SAX este cea reprezentat! de libxml
(denumit! "i gnome-xml), o bibliotec! de procesare a documentelor XML conceput! de
Daniel Veillard de la Consor#iul Web, fiind inclus! "i n mediul de dezvoltare GNOME
(GNU Network Object Model Environment) din distribu#ia de Linux RedHat 6 sau
ulterioar!. n fapt, libxml implementeaz! ntreg modelul DOM pentru procesarea
documentelor XML.
Interfa#a cu programatorul se concretizeaz! n existen#a a dou! func#ii C utilizate la
analiza unui document XML (aflat n memorie sau nc!rcat de pe disc):
#include <parser.h>
xmlDocPtr xmlParseMemory(char *buffer, int size);
xmlDocPtr xmlParseFile(const char *filename);

Pentru crearea arborelui de obiecte-nod DOM, vom utiliza func#ii de manipulare

arborescente al c!ror prototip se afl! n tree.h. Un simplu exemplu, n care se adaug!
noduri-obiect prin xmlNewChild(), iar elementelor avnd atribute li se asociaz! acest
valorile atributelor cu xmlSetProp():
xmlDocPtr doc;
xmlNodePtr tree,
subtree;

/* documentul XML */
/* arborele asociat */
/* subarbore */

doc = xmlNewDoc("1.0"); /* creeaz! o instan#! de document */

doc->root = xmlNewDocNode(doc, NULL, "articol", NULL);
/* ata"eaza atribute elementului <articol> */
xmlSetProp(doc->root, "vers", "draft");
xmlSetProp(doc->root, "author", "Sabin-Corneliu Buraga");
/* insereaz! alte elemente */
tree = xmlNewChild(doc->root, NULL, "head", NULL);
subtree = xmlNewChild(tree, NULL, "title", "XML prin xml-lib");
tree = xmlNewChild(doc->root, NULL, "sect", NULL);
subtree = xmlNewChild(tree, NULL, "title", "Prezentare XML");
subtree = xmlNewChild(tree, NULL, "p", "Un exemplu");

Se va genera astfel arborele asociat documentului XML urm!tor:

<?xml version="1.0"?>
<articol vers="draft" author="Sabin-Corneliu Buraga">
<head>
<title>XML prin xml-lib</title>
</head>
<sect>
<title>Prezentare XML</title>
<p>Un exemplu</p>
</sect>
</articol>

Arborele creat mai sus poate fi salvat pe disc (o func#ie de salvare fiind
void xmlDocDump(FILE *f, xmlDocPtr doc);), eventual compresat n format
gzip. Aceast! manier! este folosit! de aplica#ia gnumeric din GNOME care poate
salva/nc!rca fi"ierele n format XML compresat cu GNUzip.

E - 22

Tehnologii Web

Un exemplu complet
Fie un document XML utilizat pentru stocarea datelor despre aplica#iile de laborator "i
despre studen#i la disciplina "Tehnologii Web":
<?xml version="1.0"?>
<projects year="1999/2000">
<application name="WebTools n XML" id="2">
<category>software</category>
<status>
<update>Mon, 25 Oct 1999 12:27:45</update>
<version>0.23</version>
</status>
<authors>
<person>
<name>Ionu# Gavril!</name>
<email>giangu@infoiasi.ro</email>
<wpage></wpage>
<address></address>
<year>master</year>
</person>
<person>
...
</person>
</authors>
</application>
...
</projects>

Func#ia C care analizeaz! informa#iile despre persoanele implicate n realizarea unor

proiecte este urm!toarea:
/* structura cu datele despre o persoan! */
typedef struct person {
char *name;
char *email;
char *year;
char *address;
char *wpage;
} person, *person_ptr;
/* func#ia care analizeaz! documentul "i returneaz!
informa#ii despre un student */
person_ptr parse_person(xmlDocPtr doc, xmlNodePtr cnode) {
person_ptr ret = NULL;
/* aloc! structura, dac! se poate */
ret = (person_ptr) malloc(sizeof(person));
if (ret == NULL) {
fprintf(stderr,"out of memory\n");
return(NULL);
}
memset(ret, 0, sizeof(person));
/* Nu ne intereseaz! care e nodul r!d!cin!
al documentului "i vom viza doar
elementele <name> "i <email> */
cnode = cnode->childs;

E - 23

Tehnologii Web

while (cnode != NULL) {

/* mai exist! un nod? */
if (!strcmp(cnode->name, "name"))
/* am g!sit o persoan! */
ret->name = xmlNodeListGetString(doc, cnode->childs, 1);
if (!strcmp(cnode->name, "email"))
/* memor!m adresa e-mail */
ret->email = xmlNodeListGetString(doc, cnode->childs, 1);
/* trece la urm!torul element... */
cnode = cnode->next;
}
return (ret);
}

Desigur, parcurgerea documentului se putea realiza, mai elegant, n mod recursiv,

exploatnd informa#iile din arborele DOM asociat. Biblioteca libxml permite "i asocierea
"i procesarea spa#iilor de nume XML, diverse reguli de validare a documentelor, oferind
suport pentru RDF, XPath "i XPointer "i altele.

6.2 Manipularea documentelor XML prin

navigatorul Web
Am v!zut pn! acum cum putem procesa documentele XML, via interfe#elor Java sau C,
independent de Web, putnd concepe aplica#ii de sine-st!t!toare. Mai atractiv ar fi probabil
un mijloc dinamic de modificare "i de manipulare a unui document XML n cadrul
navigatorului Web, prin limbajul JavaScript. Odat! cu apari#ia versiunii 5 a browserului
Internet Explorer acest lucru se poate realiza lejer. Navigatorul Netscape 6 ofer! o
implementare DOM complet! pentru prelucrarea documentelor XML "i afi"area lor via
CSS.

Arhitectura general# a unui navigator Web

Implementarea DOM din IE 5 este departe de a fi perfect! "i nici m!car nu se alineaz!
100% recomand!rilor comitetului DOM din cadrul Consor#iului Web, replica Microsoft la
aceasta rezumndu-se la urm!torul proverb: "O c!mil! este un cal proiectat de un comitet"
(Anonim). Microsoft adaug! o serie de extensii care nu sunt prev!zute n specifica#iile
recomand!rii DOM: o modalitate de nc!rcare a documentelor XML, un mecanism de
E - 24

Tehnologii Web

stocare persistent! a arborilor DOM ca fi"iere XML, suportul pentru tipuri de date pentru
elemente "i atribute, transform!ri de foi de stiluri realizate prin intermediul script-urilor,
identificarea erorilor de analiza XML "i capabilit!#i de nc!rcare asincron! a documentelor.
De unde putem "ti c! IE 5 n#elege documente XML? Pur "i simplu putem ncerca s!
nc!rc!m un document XML "i s! vedem dac! l putem vizualiza. Iat! cum arat! un fi"ier
XML n IE 5 (observa#i formatarea diferit! a elementelor XML n compara#ie cu
vizualizarea aceluia"i document n Notepad):

Vizualizarea documentelor XML cu Internet Explorer 5 sau ulterior

Putem ncapsula informa#iile XML n cadrul unei pagini HTML astfel:

<html>
<body>
<p align="center">Un exemplu XML ntr-o pagin! Web...</p>
<xml id="fragxml">
<doc>
<greetings>Hello, XML world!</greetings>
</doc>
</xml>
<script language="JavaScript">
alert(fragxml.innerHTML);
</script>
</body>
</html>

E - 25

Tehnologii Web

Marcatorul <xml> este un element HTML valid conform specifica#iilor Consor#iului

Web. Con#inutul unui element <xml> reprezint! o a"a-numit! insul! de date (data island),
adic! un fragment de cod XML reg!sit ntr-un document Web. Astfel, identificatorul
innerHTML reprezint! un fragment de document definit n varianta DOM pentru HTML.
Pe ecran va apare:

Afi!iarea unei insule de date XML

Insulele de date vor putea fi identificate prin intermediul atributului id, n cadrul unui
document HTML putnd exista mai multe elemente <xml>. n acest mod, folosind
limbajul JavaScript, putem accesa diverse noduri ale documentului XML, dup! cum se
poate observa n urm!torul exemplu:
<html>
<body>
<xml id="bookxml">
<book vers="draft" author="Sabin-Corneliu Buraga">
<intro>...</intro>
<cap1>
<intro>...</intro>
<continut>...</continut>
<concluzii>...</concluzii>
</cap1>
<cap2>
<intro>...</intro>
<continut>...</continut>
<concluzii>...</concluzii>
</cap2>

E - 26

Tehnologii Web

<!-- mai multe capitole aici -->

<cap9>
<!-- intro, con#inut, concluzii -->
</cap9>
Sfr"it?
</book>
</xml>
<script language="JavaScript">
var rootNode = bookxml.documentElement;
for (i = 0 ; i < rootNode.childNodes.length; i++)
{
var element = rootNode.childNodes.item(i);
document.write("<p>Num!rul de descenden#i ai nodului <b>"
+ element.nodeName + "</b> (" + element.nodeValue + ") este: "
+ element.childNodes.length);
}
</script>
</body>
</html>

Vom ob#ine rezultatul:

Num!rul de descenden#i ai nodului intro (null) este: 1
Num!rul de descenden#i ai nodului cap1 (null) este: 3
Num!rul de descenden#i ai nodului cap2 (null) este: 3
Num!rul de descenden#i ai nodului #comment
( mai multe capitole aici ) este: 0
Num!rul de descenden#i ai nodului cap9 (null) este: 1
Num!rul de descenden#i ai nodului #text ( Sfr"it? ) este: 0

Dup! cum se remarc!, putem accesa numele, valoarea "i descenden#ii fiec!rui nod al
arborelui asociat unui document XML. Nodurile cu numele speciale #comment "i #text
sunt noduri de tip comentariu "i, respectiv, text.
nlocuind childNodes cu attributes putem consulta atributele corespunz!toare
elementelor unui document.
Folosind metodele definite de interfe#ele DOM putem concepe un exemplu mai
"complex". Dorim s! sort!m o list! de c!r#i, n func#ie de autorii lor. Aceast! list! o vom
considera inclus! ntr-un tabel HTML (putnd la fel de bine fiind stocat! "i pe disc,
ntr-un document XML extern). Codul JavaScript folosit pentru ordonare este urm!torul:

E - 27

Tehnologii Web

// sortare prin inser#ie

function insertionSort(t, iRowStart, iRowEnd, fReverse)
{
var iRowInsertRow, iRowWalkRow;
for (iRowInsert = iRowStart + 1; iRowInsert <= iRowEnd;
iRowInsert++)
{
textRowInsert = t.children[iRowInsert].innerText;
for (iRowWalk = iRowStart; iRowWalk <= iRowInsert; iRowWalk++)
{
textRowCurrent = t.children[iRowWalk].innerText;
if (((!fReverse && textRowInsert <= textRowCurrent)
|| (fReverse && textRowInsert >= textRowCurrent))
&& (iRowInsert != iRowWalk))
{
eRowInsert = t.children[iRowInsert];
eRowWalk = t.children[iRowWalk];
t.insertBefore(eRowInsert, eRowWalk);
iRowWalk = iRowInsert; // gata!
}
}
}
}

Dup! cum se observ!, modific!rile de pozi#ie ale elementelor se realizeaz! la nivelul

arborelui de noduri-obiect asociate elementelor. Apelarea func#iei insertionSort o vom
realiza prin:
<input type="button" value="Sort"
onclick="insertionSort(TBooks.children[0], 0,
TBooks.rows.length - 1, false)">

Tbooks este identificatorul tabelului cu lista c!r#ilor. Acesta ar putea fi de exemplu:

<table id="TBooks" border="2">
<tr>
<td>Tanenbaum, A.</td>
<td>Re#ele de calculatoare</td>
<td>1998</td>
</tr>
<tr>
<td>Dufour, A.</td>
<td>Internet</td>
<td>1997</td>
</tr>
<tr>
<td>Rotariu, E.</td>
<td>Limbajul Java</td>
<td>1996</td>
</tr>
<tr>
<td>Athanasiu, I.</td>
<td>Limbajul Java</td>
<td>1998</td>
</tr>
</table>

nainte de sortare, pagina Web ar!ta astfel:

E - 28

Tehnologii Web

Lista de c#r"i nesortat#

Dup! ordonarea numelor de autori vom observa cele de mai jos. Ultima coloan! a unui
rnd de tabel nu a fost sortat!, ci doar primele dou!.
L!s!m cititorului sarcina de a vedea de ce.

E - 29

Tehnologii Web

Lista de c#r"i sortat#

Un exemplu de traversare DFS a ntregului arbore de noduri este cel de mai jos:
<html>
<body onload="start_visit()">
<xml id="bookxml">
<book vers="draft" author="Sabin-Corneliu Buraga">
<intro>...</intro>
<cap1>
<intro>...</intro>
<continut>...</continut>
<concluzii>...</concluzii>
</cap1>
<cap2>
<intro>...</intro>
<continut>...</continut>
<concluzii>...</concluzii>
</cap2>
<!-- mai multe capitole aici -->
<cap9>
<!-- intro, con#inut, concluzii -->
</cap9>
Sfr"it?
</book>
</xml>

E - 30

Tehnologii Web

<script language="JavaScript">
result = "";
// func#ie recursiv! de traversare a tuturor nodurilor
function visit(node)
{
if (node.nodeType == 1) // nodul este un nod Element?
{
result += "<" + node.nodeName + ">";
}
// determin!m num!rul de noduri-copil ale nodului curent
var lenchd = node.childNodes.length;
if (lenchd > 0)
// exist! descenden#i?
{
var i;
for (i = 0; i < lenchd; i++)
{
// apel!m recursiv pentru descenden#i
visit(node.childNodes.item(i));
}
}
}
// func#ia apelat! la nc!rcarea documentului
function start_visit()
{
visit(bookxml.documentElement);
alert(result);
}
</script>
</body>
</html>

Pentru documentul de mai sus vom ob#ine urm!torul rezultat:

Rezultatul travers#rii arborelui DOM

Pn! acum ne-am ocupat de prelucrarea arborilor de elemente XML incluse n cadrul
paginilor Web. De cele mai multe ori ns! documentele XML vor fi stocate extern.
Implementarea DOM n Internet Explorer permite nc!rcarea documentelor XML ca
obiecte ActiveX, ntr-o manier! sincron! sau asincron!.
Urm!torul exemplu invoc! analizorul XML al navigatorului pentru a valida un document
aflat pe disc:
<script language="JavaScript">
// instan#iaz! analizorul XML (obiect ActiveX)
var xml = new ActiveXObject("microsoft.xmldom");
// inhib! nc!rcarea asincron!
xml.async = false;
// ncarc! datele XML de pe server

E - 31

Tehnologii Web

xml.load("http://www.infoiasi.ro/xml/students.xml");
// verific! dac! analiza s-a desf!"urat cu succes
if (xml.parseError.reason != "")
alert("EROARE: " + xml.parseError.reason);
else
alert("Elementul r!d!cin! este: " + xml.documentElement.nodeName);
</script>

Un posibil mesaj de eroare poate fi cel de mai jos:

Semnalarea erorilor de procesare a unui document nc#rcat de la distan"#

Dac! dorim ca nc!rcarea documentului s! se realizeze n mod asincron, atunci vom seta
proprietatea async ca true "i vom putea determina gradul de nc!rcare prin intermediul
evenimentului onreadystatechange, scripturile noastre putndu-"i continua activitatea
n timpul nc!rc!rii documentului XML. St!rile procesului de nc!rcare sunt furnizate de
proprietatea readyState "i au valorile:
Valoarea
readyState

Stare

Descriere

UNINITIATED

Obiectul XML a fost creat,

dar procesul de nc!rcare nu a nceput

LOADING

nc!rcarea este n progres,

dar analiza XML nu a nceput

LOADED

nc!rcarea s-a terminat,

ns! arborele DOM nu a fost creat

Arborele DOM a fost generat, dar numai o parte din

elemente au fost analizate; proprietatea parsed
INTERACTIVE
indic! dac! sub-arborele corespunz!tor unui element
este preg!tit pentru a fi utilizat

Documentul XML a fost nc!rcat "i analizat

(erorile vor fi detectate prin intermediul propriet!#ii
parseError)

COMPLETED

Se poate folosi "i metoda loadXML() pentru a "nc!rca" n maniera inline pentru
procesare a unui fragment de document XML:
<script language="JavaScript">
xmldoc.loadXML("<student name='Anca Avram'><year>4</year></student>");
...
</script>
...
<xml id="xmldoc"></xml>

E - 32

Tehnologii Web

Pentru salvarea unui arbore de noduri DOM ca fi"ier XML sau ca obiect (de exemplu un
obiect Response n ASP), se va utiliza metoda save().
Alte extensii Microsoft la modelul DOM, dar care nu sunt conforme cu recomandarea
Consor#iului Web, sunt cele legate de:

nodurile arborelui DOM (interfa#a IXMLDOMNode)

proprietatea nodeTypeString care specific! tipul unui nod ca "ir
caractere: "element", "attribute", "text", "entity",
"comment" etc.

de

proprietatea specified de tip boolean indicnd dac! un atribut a

fost specificat pentru un anumit element (n DTD el a fost desemnat
ca #FIXED);

proprietatea xml se poate folosi pentru a converti nodul curent "i

ntreg sub-arborele lui ntr-un document XML;

proprietatea parsed care indic! dac! sub-arborele unui nod a fost

analizat de procesorul XML;

metoda selectNodes() returneaz! o colec#ie de tip NodeList

con#innd nodurile care satisfac un model XSL definit n XPath; iat! un
exemplu, unde studXML desemneaz! fi"ierul XML con#innd informa#ii
despre studenti:

<script language="JavaScript">
function query_xml(query)
{
// execut! interogarea
var result = studXML.selectNodes(".//name");
// afi"eaz! fiecare nume de student
for (i = 0; i < result.length; i++)
alert(result.item(i).childNodes.item(0).nodeValue);
}
</script>

metoda transformNode() este utilizat! pentru a aplica o foaie de

stiluri XSL pentru un anumit nod XML (vezi exemplul de mai jos).

manipularea documentului XML (interfa#a IXMLDOMDocument)

proprietatea parseError reprezint! un obiect

IDOMParseError util pentru tratarea erorilor de analiz! XML;

de

tip

proprietatea readyState returneaz! starea de nc!rcare "i analiz! a

unui document nc!rcat n mod asincron;

proprietatea async de tip boolean se poate folosi pentru a specifica

dac! nc!rcarea documentului se va desf!"ura n manier! asincron! sau nu;

proprietatea preserveWhiteSpaces de tip boolean indic!

analizorului XML s! p!streze spa#iile albe la construirea arborelui DOM
(n mod uzual spa#iile albe sunt ignorate);

metoda load() ncarc! un document pe baza unui URI specificat;

metoda loadXML() are la intrare un "ir desemnnd elemente XML

"i genereaz! arborele DOM corespunz!tor;

E - 33

Tehnologii Web

metoda save() salveaz! arborele DOM ntr-un fi"ier/obiect XML;

metoda createNode() creeaz! un nod de un tip "i nume

specificate de utilizator, putnd fi dat "i spa#iul de nume la care este asociat
acel nod;

metoda abort() opre"te nc!rcarea asincron! a unui document.

parcurgerea nodurilor arborelui DOM (interfe#ele IXMLDOMNodeList "i

IXMLDOMNamedNodeMap)

metoda nextNode() poate fi utilizat! ca iterator al unei colec#ii de

noduri, fiind specific! ambelor interfe#e;

metoda reset() va reini#ializa iteratorul, revenind la primul nod; "i

aceast! metod! este comun! pentru cele dou! interfe#e

metoda getQualifiedItem() va returna o colec#ie de noduri

NamedNodeMap con#innd nodurile avnd un anumit nume "i apar#innd

unui spa#iu de nume specificat de utilizator; aceast! metod! este proprie

interfe#ei IXMLDOMNamedNodeMap.
Pentru tratarea/semnalarea erorilor de procesare XML se pot utiliza metodele "i
propriet!#ile oferite de interfa#! IDOMParseError, dup! cum putem remarca din
urm!torul exemplu conceput de Alex Ceponkus "i Faraz Hoodbhoy:
<html>
<body bgcolor="white" text="black">
<div id="errorDIV"></div>
<div id="errorDIVtext"></div>
<script language="javascript" for="window" event="onload">
// Verific!m dac! a ap!rut o eroare de analiz! XML
if (xml.parseError.errorCode != 0) {
var pe = xml.parseError;
var stringBuffer = "";
stringBuffer += "<H2 style=\"color: red\">Eroare
de analiz!!</H2>";
// afi"!m mesajul
stringBuffer += "<P><B>Mesaj de eroare:</B> " +
pe.reason + "<BR>";
// URL-ul documentului eronat
if (pe.url != "") {
stringBuffer += "<B>URL:</B> " + pe.url + "<BR>";
}
stringBuffer += "<B>Linia:</B> " + pe.line + "<BR>";
stringBuffer += "<B>Pozi#ia:</B> " + pe.linepos + "<BR><HR>";
// afi"!m "irul n <DIV>
errorDIV.outerHTML = stringBuffer;
// reini#ializ!m "irul
stringBuffer = "";
// afi"!m linia generatoare de eroare

E - 34

Tehnologii Web

stringBuffer += "\"" + pe.srcText + "\"" + "\n";

// inser!m un indicator pentru semnalarea locului erorii
for ( i = 1; i < pe.linepos; i++ )
stringBuffer += "-";
stringBuffer += "/^\\";
// afi"!m "irul in <DIV>.
// modific!m stilul de afi"are
errorDIVtext.style.fontFamily = "monospace";
errorDIVtext.style.color = "red";
errorDIVtext.innerText = stringBuffer;
}
</script>
</body>
<xml id="xml">
<stud><nume id="33" /></student>
</xml>
</html>

Efectul codului de mai sus poate fi urm!rit n figura urm!toare:

Semnalarea erorilor de procesare XML

Prelucr!rile de documente prezentate mai sus pot fi realizate "i pe partea de server, de
exemplu folosind CGI ori ASP sau utiliznd servlet-uri Java.
Folosind DOM, putem de asemeni s! realiz!m prin intermediul unor script-uri
JavaScript transform!ri XSL, utiliznd foi de stiluri externe ata"ate documentelor XML.
n exemplul de mai jos vom transforma urm!torul document XML ntr-un tabel XHTML
cu date despre studen#i:

E - 35

Tehnologii Web

<students>
<student matr="4533">
<name>Anca Avram</name>
<year>4</year>
</student>
<student matr="4574">
<name>%tefan T!nas!</name>
<year>4</year>
</student>
<student matr="3740">
<name>Radu Filip</name>
<year>3</year>
</student>
</students>

Foaia de stiluri, stocat! n fi"ierul, students.xsl este:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<table border="1" align="center" width="70%">
<th bgcolor="#CCCCCC">Matricol</th>
<th>Student</th>
<th>An</th>
<xsl:for-each select = ".//student">
<tr align="center">
<td bgcolor="#CCCCCC">
<xsl:value-of select = "@matr"/>
</td>
<td> <xsl:value-of select = "name"/> </td>
<td> <xsl:value-of select = "year"/> </td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

Pagina Web va avea con#inutul urm!tor:

<html>
<head>
<script language="JavaScript">
function transform() {
// nc!rc!m fi"ierul XSL pentru a executa transformarea
var result = studXML.transformNode(studXSL.documentElement);
// introducem rezultatul n interiorul tag-ului <div>
table.innerHTML = result;
}
</script>
</head>
<body bgcolor="white" text="blue" onload="transform()">
<!-- n cadrul lui <div> va fi generat tabelul folosind foaia XSL -->
<div id="table"></div>
</body>
<xml id="studXML" src="students.xml"></xml>
<xml id="studXSL" src="students.xsl"></xml>
</html>

Efectul transform!rii poate fi observat n urm!toarea captur! de ecran:

E - 36

Tehnologii Web

Transformarea unui document XML utiliznd XSL prin intermediul DOM

Folosind metodele definite de interfe#ele DOM se pot imagina diverse aplica#ii pentru
prelucrarea documentelor XML "i HTML n cadrul paginilor WWW, n manier!
dinamic!, on-line.
Un exemplu complet
Vom construi, pe baza unei foi de stiluri XSL, ntreg documentul HTML incluznd
codul JavaScript pentru prelucrarea datelor, pornind de la un document XML. Lu!m ca
situa#ie concret! managementul informa#iilor dintr-o bibliotec! electronic!. Acest! aplica#ie
Web, utiliznd transform!ri XSL "i manipularea via DOM a datelor XML, a fost conceput!
n mare parte de c!tre studenta Diana B!lan.
Informa#iile referitoare la c!r#ile bibliotecii sunt stocate ntr-un fi"ier XML descris
de urm!toarea schem!:

E - 37

Tehnologii Web

<?xml version="1.0"?>
<Schema xmlns="urn:schemas-microsoft-com:xml-data"
xmlns:dt="urn:schemas-microsoft-com:datatypes">
<ElementType name="data" dt:type="dateTime"/>
<ElementType
<ElementType
<ElementType
<ElementType
<ElementType

name="titlu" content="textOnly"/>
name="autor" content="textOnly"/>
name="editura" content="textOnly"/>
name="exemplare" content="textOnly"/>
name="stil" content="textOnly"/>

<ElementType name="biblioteca" content="eltOnly">

<group minOccurs="0" maxOccurs="1">
<element type="data" />
</group>
<group minOccurs="1" maxOccurs="1">
<element type="carte" />
</group>
</ElementType>
<ElementType name="carte" content="eltOnly">
<element type="titlu" />
<element type="autor" />
<element type="editura" />
<element type="exemplare" />
<element type="stil" />
</ElementType>
</Schema>

Fi"ierul XML va fi transformat n HTML conform urm!toarei foi de stiluri XSL:

E - 38

Tehnologii Web

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<!-- antetul paginii -->
<head>
<!-- stiluri utilizate -->
<style type="text/css">
BODY { margin:0 }
.bg {
font:8pt Verdana;
background-color:white;
color:black
}
H1 {
font:bold 14pt Verdana;
width:100%;
margin-top:1em
}
.row {
font:8pt Verdana;
border-bottom:1px solid #CC88CC
}
.header {
font:bold 9pt Verdana;
cursor:hand;
padding:2px;
border:2px outset gray
}
.p {font:8pt Verdana}
.roman { background: #DDFFDD;}
.teatru {background: #FFDDDD;}
.stiintifica {background: #FFFFCC;}
.poezii {background: #FFCCFF;}
</style>
</head>
<!-- scriptul sortnd coloanele tabelului
(s-a inclus ntr-un nod comentariu;
pentru a nu avea probleme de procesare XML,
se scrie ca sec#iune CDATA) -->
<script>
<xsl:comment><![CDATA[
function sort(field)
{
sortField.value = field;
// sortare bazat! pe XSL (apel DOM)
listing.innerHTML =
source.documentElement.transformNode(stylesheet);
}
]]>
</xsl:comment>
</script>
<script for="window" event="onload">
<xsl:comment><![CDATA[
stylesheet = document.XSLDocument;
source = document.XMLDocument;
// cmpul dup! care se sorteaz!
sortField =
document.XSLDocument.selectSingleNode("//@order-by");
]]>

E - 39

Tehnologii Web

</xsl:comment>
</script>
<!-- corpul paginii -->
<body>
<table width="100%" cellspacing="0">
<tr>
<!-- omitem o parte din codul HTML -->
<td>
<div id="listing">
<!-- se aplic! "ablonul XSL -->
<xsl:apply-templates match="biblioteca"/>
</div>
<!-- num!rul de c!r#i -->
<div class="p">Nr carti:
<b><xsl:eval>count(this)</xsl:eval></b>
</div>
</td>
</tr>
</table>
<!-- final de pagin! -->
</body>
</html>
</xsl:template>
<!-- "ablonul de afi"are a c!r#ilor -->
<xsl:template match="biblioteca">
<table style="background-color:white">
<!-- antet de tabel -->
<thead>
<td width="200">
<div class="header" onClick="sort('titlu')">
Titlu
</div>
</td>
<td width="200">
<div class="header" onClick="sort('autor')">
Autor(i)
</div>
</td>
<td width="80">
<div class="header" onClick="sort('editura')">
Editura
</div>
</td>
<td width="80">
<div class="header" onClick="sort('exemplare')">
Exemplare
</div>
</td>
<td width="80">
<div class="header" onClick="sort('stil')">
Stil
</div>
</td>
</thead>
<!-- pentru fiecare carte,
ordonat dup! nr. de exemplare -->
<xsl:for-each select="carte" order-by="exemplare">
<tr>

E - 40

Tehnologii Web

<!-- n func#ie de stil,

se adopt! o alt! culoare de fundal -->
<xsl:for-each select="stil">
<xsl:if expr="this.nodeTypedValue == 'roman'">
<xsl:attribute name="class">roman</xsl:attribute>
</xsl:if>
<xsl:if expr="this.nodeTypedValue == 'poezii'">
<xsl:attribute name="class">poezii</xsl:attribute>
</xsl:if>
<xsl:if expr="this.nodeTypedValue == 'teatru'">
<xsl:attribute name="class">teatru</xsl:attribute>
</xsl:if>
<xsl:if expr="this.nodeTypedValue == 'stiintifica'">
<xsl:attribute name="class">stiintifica</xsl:attribute>
</xsl:if>
</xsl:for-each>
<!-- scrie informa#iile propriu-zise -->
<td>
<div class="row">
<xsl:value-of select="titlu"/>
</div>
</td>
<td>
<div class="row">
<xsl:value-of select="autor"/>
</div>
</td>
<td>
<div class="row">
<xsl:value-of select="editura"/>
</div>
</td>
<td>
<div class="row">
<xsl:value-of select="exemplare"/>
</div>
</td>
<td>
<div class="row">
<xsl:value-of select="stil"/>
</div>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
<!-- scriptul de sortare "i num!rare a datelor pe coloane -->
<xsl:script><![CDATA[
function sort(field) {
stylesheet = document.XSLDocument;
source = document.XMLDocument;
sortField =
document.XSLDocument.selectSingleNode("field");
sortField.value = field;
listing.innerHTML =

E - 41

Tehnologii Web

source.documentElement.transformNode(stylesheet);
}
function count(node)
{
total = 0;
// selecteaz! elementele <carte> folosind DOM
elem = node.selectNodes("/biblioteca/carte");
for (p = elem.nextNode(); p; p = elem.nextNode())
total++;
return formatNumber(total, "#");
}
]]></xsl:script>
</xsl:stylesheet>

Un exemplu de utilizare a acestei foi de stiluri este cel de mai jos:

Formatarea !i ordonarea datelor XML folosind o foaie de stiluri XSL

ntr-o manier! asem!n!toare putem stoca "i prelucra informa#iile despre clien#ii
bibliotecii. n figura urm!toare se poate vedea lista cititorilor (sorta#i dup! nume),
cu afi"area diferen#iat! a celor care au c!r#i mprumutate.

E - 42

Tehnologii Web

Formatarea !i sortarea datelor despre cititori

6.3 JDOM
Pentru cei care doresc s! proceseze documentele XML benecifiind de puterea limbajului
Java, Jason Hunter "i Brett McLaughlin au dezvoltat JDOM, interfa#! de programare special
construit! pentru Java. JDOM ofer! interoperabilitatea cu standardele SAX "i DOM, dar
spre deosebire de alte implement!ri exploateaz! facilit!#ile Java (vezi "i capitolul dedicat
applet-urilor "i servlet-urilor Java).
JDOM const! din patru pachete Java:
org.jdom (pachetul principal) define"te clasele pentru reprezentarea

documentelor "i constituien#ilor XML, ca de exemplu Document, Element,

Attribute, DocType sau Namespace;
org.jdom.adapters ofer! suport pentru alte implement!ri DOM

(e.g. XercesDOMAdapter, XML4JDOMAdapter, ProjectXDOMAdapter);

org.jdom.input furnizeaz! clase pentru citirea "i prelucrarea fi"ierelor
XML: DOMBuilder (pentru compatibilitatea cu modelul DOM) "i SAXBuilder

(pentru SAX);

org.jdom.output specific! o serie de clase pentru salvarea

documentelor XML (DOMOutputter, SAXOutputter "i XMLOutputter).

Crearea unui document

Crearea unui document XML n JDOM se realizeaz! astfel:
Document doc = new Document(new Element("proiect"));
// crearea a dou! elemente copil
Element elAutor = new Element("autor").setText("Iulian V!ideanu");
Element elTitlu = new Element("titlu").setText("InfoUtil");
// adaug! elementele create
doc.addContent(elAutor);
doc.addContent(elTitlu);

E - 43

Tehnologii Web

Un document XML este instan#! a clasei org.jdom.Document. Aceast! clas! este

folosit! pentru memorarea tipului de document, instruc#iunilor de procesare, elementului
r!d!cin! "i nodurilor de tip comentariu.
Codul de mai sus va conduce la generarea documentului XML (o alt! solu#ie pentru
reprezentarea informa#iilor referitoare la proiectele studen#e"ti):
<proiect>
<autor>Iulian V!ideanu</autor>
<titlu>InfoUtil</titlu>
</proiect>

Metoda addContent() poate permite inserarea unui grup de elemente XML. Pentru
aceasta vom concepe o clas! derivat! din clasa predefinit! Element cu ajutorul c!reia vom
construi un fragment de document pe care l vom insera ulterior oriunde dorim.
De exemplu, dac! fiecare document XML necesit! prezen#a unui antet con#innd
metadate (proprietar, drepturi de autor etc.) am putea implementa clasa AntetElement
astfel:
public class AntetElement extends Element {
public AntetElement() { // constructor
super("antet");
addContent("proprietar").setText("FCS");
addContent("copyright").setText("1997-2001");
}
}

Va fi creat astfel fragmentul de document:

<antet>
<proprietar>FCS</proprietar>
<copyright>1997-2001</copyright>
</antet>

Pentru a-l ad!uga documentului XML dorit vom scrie (doc fiind o instan#! de
document):
doc.addContent(new AntetElement());

Putem m!ri flexibilitatea clasei AntetElement scriind un alt constructor care s!

stabileasc! anii pentru elementul <copyright>:
public AntetElement(int anInceput, int anFinal) {
super("antet");
addContent("proprietar").setText("FCS");
addContent("copyright").setText(anInceput + "-" + anFinal);
}

E - 44

Tehnologii Web

Vom putea atunci folosi:

doc.addContent(new AntetElement(1998, 2003));

Accesarea elementelor !i atributelor

Clasa Element pune la dispozi#ie metoda getChildren() care returneaz! un obiect
List con#innd toate sau anumite elemente copil ale unui element XML dat:
List copii = doc.getChildren();

Putem astfel folosi apoi metodele lui List pentru manipularea elementelor XML:
// adaug! un element
copii.add(new Element("limbaj");
// adaug! la o anumit! pozi#ie
copii.add(1, new Element("platforma");
// "terge elementul al doilea
copii.remove(2);
// "terge to#i descenden#ii lui <antet>
copii.removeAll(element.getChildren("antet"));

Ca alternative pot fi utilizate metodele addContent() "i removeChildren() ale

clasei Element.
Desigur, elementele XML pot avea atribute. Pentru a le ad!uga sau elimina vom apela la
metodele addAttribute() "i removeAttribute(), respectiv:
// adaug! atribute
elAutor.addAttribute("an", "4");
elAutor.addAttribute("cont", "iulianv@infoiasi.ro");
// "terge un atribut
elAutor.removeAttribute("cont");

Se poate construi un atribut "i n modul urm!tor:

elAutor.addAttribute(new Attribute("an", "4"));

Pentru a accesa atributele unui anumit element vom utiliza getAttributes():

List atrib = elAutor.getAttributes();

%tergerea tuturor atributelor unui element se va realiza prin:

elAutor.getAttributes().clear();

nc#rcarea !i salvarea documentelor XML

Un document XML poate fi nc!rcat prin intermediul unui nume de fi"ier, stream de date
sau URI (se folose"te pachetul org.jdom.input). Modul de reprezentare intern! poate fi
SAX sau DOM, utilizndu-se SAXBuilder "i, respectiv, DOMBuilder, n func#ie de
procesorul XML dorit.
De exemplu, pentru a nc!rca un document dat de un URI conform modelului DOM
vom scrie liniile:

E - 45

Tehnologii Web

DOMBuilder procesor = new DOMBuilder();

Document doc =
procesor.build("http://www.infoiasi.ro/xml/proiect.xml");

DOMBuilder va construi o instan#! a clasei org.w3c.dom.Document "i ne va

permite s! manipul!m arborii DOM asocia#i documentelor XML. Pentru o procesare
rapid! se recomand! folosirea lui SAXBuilder.

n vederea salv!rii documentelor XML, JDOM ofer! trei metode:

n mod structurat, ca fluxuri de date, prin intermediul clasei

XMLOutputter din pachetul org.jdom.output;

ca evenimente SAX care vor fi trimise unui driver SAX, folosindu-se

SAXOutputter;

ca arbori de noduri DOM, utilizndu-se DOMOutputter.

De exemplu, pentru a afi"a la ie"irea standard un document XML, fiecare element fiind
indentat cu un spa#iu "i ap!rnd pe o linie distinct! de text, vom putea recurge la codul
de mai jos (doc este o instan#! a clasei Document):
XMLOutputter xmlOut = new XMLOutputter(" ", true);
xmlOut.output(doc, System.out);

Primul parametru al constructorului stabile"te caracterul folosit pentru indentare, iar cel
de-al doilea activeaz! sau dezactiveaz! trecerea la linie nou! dup! fiecare element XML.
Suportul pentru spa"iile de nume
Clasa org.jdom.Namespace este responsabil! pentru reprezentarea "i procesarea
spa#iilor de nume XML.
Pentru ob#inerea unui spa#iu de nume se va folosi getNamespace():
Namespace xlink = Namespace.getNamespace("xlink",
"http://www.w3.org/1999/xlink");

Pentru a insera un element apar#innd unui spa#iu de nume particular putem utiliza
constructor supranc!rcat Element().
Element elLeg = new Element("traversare", xlink);

n acest caz, am ad!ugat un element <xlink:traversare>.

Metodele removeChildren() "i removeAttribute() permit specificarea unui
spa#iu de nume al elementului/atributului dorit a fi eliminat:
doc.removeChildren("traversare", xlink);
doc.removeAttribute("align", xhtml);

Suportul pentru instruc"iunile de procesare

O instruc#iune de procesare XML n JDOM este reprezentat! prin clasa
org.jdom.ProcessingInstruction.

E - 46

Tehnologii Web

De exemplu, inserarea unei instruc#iuni de procesare PHP (n fapt cod PHP) ntr-un
document XML se realizeaz! astfel:
String codPHP = new String("phpinfo();");
ProcessingInstruction instr =
new ProcessingInstruction("php", codPHP);
doc.addContent(instr);

n cadrul documentului va fi inclus fragmentul PHP de mai jos:

<?php phpinfo(); ?>

Acest lucru permite s! introducem n documentele XML sau XHTML script-uri PHP
care ulterior vor putea fi rulate pe serverul Web.

E - 47

Tehnologii Web

7. Concluzii
n luna noiembrie 2000, s-a dat publicit!#ii recomandarea DOM 2 Core, care n viitor va
fi adoptat! de comunitatea de programatori "i designeri Web. DOM nivelul 1 este
implementat deja de navigatoarele Web actuale, ca "i de o serie de analizatoare XML
elaborate n limbajele C, C++ "i Java. n plus, s-a dezvoltat un model DOM destinat
prelucr!rii documentelor SMIL.
Recomand!rile DOM ofer! n ntregime interfe#ele standard proiectate n Java "i
ECMAScript, independente de platformele hardware "i software, fiind utile programatorilor
de aplica#ii destinate proces!rii avansate a documentelor XML sau HTML.
Avnd n vedere dezvoltarea pronun#at! a tehnologiilor bazate pe XML, modelul DOM
devine, cu att mai mult, atractiv pentru dezvoltatorii de aplica#ii Internet. O implementare
de viitor este JDOM, un model de procesare a documentelor XML special conceput pentru
programatorii n limbajul Java.

E - 48

Tehnologii Web

"A nv#"a s# comunici cu calculatorul poate schimba modul n care nve"i alte lucruri."
(Seymour Papert)

Tehnologii Web

1. Modele i metodologii
Cre"terea masiv! a num!rului de servicii "i produse Web este dat! de utilizarea unui tot
mai bogat con#inut informa#ional: imagini, video "i sunet.
Combinarea "i integrarea acestor medii formeaz! multimedia, utilizat! pe scar! larg! n
reprezentarea "i interschimbarea informa#iilor. Diverse obiecte/documente multimedia
incluznd hiperleg!turi definesc conceptul de hipermedia.
Hipermedia "i g!se"te utiliz!ri n variate domenii ca:

televiziune pe Web (TV Web)

prezent!ri multimedia pe CD-ROM

televiziune/video n interac#iune cu utilizatorul sau la cerere

n aceste arii trebuie avut! n vedere sincronizarea prezent#rilor multimedia.

Trebuie f!cut! distinc#ia ntre documente hipermedia "i obiecte hipermedia. Obiectele n
general reprezint! date monomedia (ca filme MPEG "i imagini GIF, identificate de URI ori
tipuri MIME). Documentele pot fi privite ca o colec#ie de obiecte, descriind
meta-informa#iile referitoare la obiectele componente. Aceste informa#ii includ rela#iile
temporale, spa#iale "i de con#inut ntre mai multe obiecte "i atributele unor obiecte
individuale. Ca exemple de limbaje care s! formateze astfel de documente se pot men#iona
HSL sau SMIL (vezi mai jos).

1.1 Model matematic

Prezentarea unui document hipermedia temporal poate fi modelat! de un digraf aciclic
(DAG), nodurile reprezentnd obiecte media "i arcele reprezentnd evolu#ia n timp a
acestora.

Graful DAG al unei prezent#ri

Intuitiv, un arc de la vrful v1 la vrful v2 nseamn! c! v1 "i v2 sunt rulate secven#ial,

v1 naintea lui v2, f!r! a se suprapune n timp. n orice moment al unei prezent!ri, poate
exista o mul#ime (posibil vid!) de obiecte evolund pe ecran, acest lucru fiind modelat ca
un set de fire de execu#ie concurente, fiecare fir (thread) prezentnd un obiect activ.
Num!rul thread-urilor se modific! n mod dinamic pe parcursul prezent!rii multimedia.
Modelul de sincronizare, Media Relation Graph (MRG), se bazeaz! pe rafinarea
grafului temporal descris. Pentru reprezentarea informa#iilor MRG este necesar un limbaj

F-2

Tehnologii Web

de descriere, de exemplu Hypermedia Synchronization Language (HSL) "i Synchronized Multimedia

Integration Language (SMIL), bazate pe SGML "i, respectiv, pe XML.
Exist! dou! nivele de sincronizare multimedia: sincronizare intra-obiect "i
sincronizare inter-obiect. Sincronizarea intra-obiect prive"te rela#ia temporal! n cadrul
aceluia"i obiect, cum ar fi un video-clip, iar sincronizarea inter-obiect se refer! la rela#iile
temporale dintre mai multe obiecte. Sincronizarea inter-obiect se poate parti#iona n dou!
sub-categorii: sincronizare de nivel-sc!zut "i sincronizare de nivel ridicat, cea din urm! fiind bazat!
pe punctele de sfr"it ale derul!rii fiec!rui obiect (mai des utilizat!).
Pentru specificarea sincroniz!rii de nivel ridicat se pot folosi mai multe metode precum
sintaxa declarativ!, specifica#iile rela#ionale sau specifica#iile temporale.
Vom prezenta o specifica#ie rela#ional!, fiecare obiect avnd asociat un interval temporal.
Date dou! intervale temporale, se pot enumera 13 rela#ii mutual exclusive, rela"iile lui Allen.
n figur! s-au ilustrat numai 7 din cele 13 rela#ii, n urma suprim!rii rela#iilor inverse
(de exemplu after este rela#ia invers! a lui before).

Rela"iile temporale ale lui Allen !i coresponden"a lor cu graful MRG

Cele 7 rela#ii se numesc: before, meets, overlaps, during, starts, finishes, equals.

F-3

Tehnologii Web

Se poate utiliza "i modelul cu rela#ii bazate pe instantanee de timp. Date dou! momente
de timp, exist! 3 rela#ii mutual exclusive: nainte de - before (<), simultan cu - simultaneous to (=)
"i dup! - after (>).
Exist! "i modelul hibrid, bazat pe ambele abord!ri de mai sus: obiectele sunt modelate ca
intervale temporale (continue), iar momentele de timp de nceput/sfr"it ale obiectelor sunt
considerate punctuale.
Rela"ii bazate pe punctele de sfr!it
Rela#iile lui Allen acoper! toate posibilele rela#ii dintre dou! intervale de timp, putnd
descrie ce s-a ntmplat ntre dou! intervale temporale n trecut (dup! ce execu#ia celor
dou! obiecte corespunz!toare intervalelor de timp s-a ncheiat). Dezavantajul este c! aceste
rela#ii nu pot specifica n viitor ceea ce s-ar putea ntmpla. De exemplu, n rela#ia pa overlaps
pb, pb nu poate ncepe n cadrul intervalului pa dac! punctul de sfr"it al lui pa este
necunoscut.
Modelul care trebuie luat n considera#ie trebuie s! foloseasc! "i valori discrete de timp.
Exist! 12 rela#ii ntre 4 puncte (start "i end) ale dou! intervale temporale. De observat c!
avem dou! rela#ii implicite care sunt ndeplinite ntotdeauna: a.start<a.end "i
b.start<b.end.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

a.end<b.start
a.end=b.start
a.end>b.start
a.start<b.end
a.start=b.end
a.start>b.end
a.start<b.start
a.start=b.start
a.start>b.start
a.end<b.end
a.end=b.end
a.end>b.end

Putem restrnge rela#iile de mai sus, considernd doar zece dintre ele. Astfel avem:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

a.end<=b.start
a.end>b.start
a.start<b.end
a.start=b.end
a.start<b.start
a.start=b.start
a.start>b.start
a.end<b.end
a.end=b.end
a.end>b.end

De notat c! rela#iile nu sunt mutual exclusive, cum erau rela#iile lui Allen. Tabelul de
implica#ii ale acestora este urm!torul:

F-4

Tehnologii Web

a.end<=b.start == a.start<b.end, a.start<b.start, a.end<b.end

a.end>b.start == nici o informa#ie
a.start<b.end == nici o informa#ie
a.start=b.end == a.end>b.start, a.start>b.start, a.end>b.end
a.start<b.start == a.start<b.end
a.start=b.start == a.end>b.start, a.start<b.end
a.start>b.start == a.end>b.start
a.end<b.end == a.start>b.end
a.end=b.end == a.end>b.start, a.start<b.end
a.end>b.end == a.end>b.start
Diagrama Venn a celor zece rela#ii este figurat! mai jos:

Diagramele Venn ale rela"iilor

1.2 Graful relaiilor media (MRG)

Nu toate dintre cele zece rela#ii prezentate sunt necesare s! specifice rela#iile temporale
n cadrul unei prezent!ri multimedia. Vom defini pentru nceput trei operatori.
Fie rela#iile "a.end<=b.start", "a.start=b.start" "i "a.end=b.end", numite SerialLink,
StartSync "i EndSync, respectiv.

Pentru (a SerialLink b), a se nume"te p#rinte "i b se nume"te copil.

Pentru (a
numesc perechi.

StartSync

b) "i (a

F-5

EndSync

b), a "i b se

Tehnologii Web

Fiecare dintre ace"ti operatori impune o restric#ie temporal! a operanzilor.

Prin compunerea operatorilor defini#i mai sus putem exprima toate cele zece rela#ii
considerate.
Fie i un interval de timp. Atunci avem:

(a EndSync i StartSync b) == a.end>b.start

(a StartSync i EndSync b) == a.start<b.end

(b SerialLink a) == a.start=b.end

(a StartSync i SerialLink b) == a.start<b.start

(b StartSync i SerialLink a) == a.start>b.start

(a SerialLink i EndSync b) == a.end<b.end

(b SerialLink i EndSync a) == a.end>b.end

Intuitiv, (a SerialLink b) nseamn! c! obiectele a "i b evolueaz! secven#ial,

iar (a StartSync b) "i (a EndSync b) denot! faptul c! obiectele a "i b ncep "i,
respectiv, se sfr"esc n acela"i timp.
Cei trei operatori pot fi reprezenta#i n cadrul grafului MRG prin trei tipuri de arce.
Graful prezentat la nceputul capitolului nu putea exprima StartSync "i EndSync.
Nodurile, n MRG, pot fi de dou! tipuri: obiecte media obi"nuite "i obiecte de ntrziere
(utile n vederea realiz!rii sincroniz!rii). Punctul de nceput al unei prezent!ri multimedia
este reprezentat de nodul root.
Operanzii operatorilor defini#i pot avea tipurile "obiect", "interval" sau "nod", n func#ie
de context.
Fiecare obiect are asociat "i un atribut definit de utilizator, "time to live" (ttl),
specificnd intervalul de timp ct va fi activ obiectul pe ecran (timpul de via#! efectiv!
a obiectului). Un obiect de ntrziere poate avea ata"at atributul ttl.

1.3 Validarea specificaiilor MRG

Inconsisten#ele temporale, cantitative "i calitative, trebuiesc detectate nainte de pornirea
unei prezent!ri. Inconsisten#ele de calitate sunt cauzate de rela#ii temporale conflictuale, iar
cele cantitative de durate de timp incompatibile. Datorit! simplit!#ii modelului MRG,
inconsisten#ele cantitative sunt excluse, deci consisten#a cantitativ! este garantat! prin
construc#ie.
Pentru detectarea inconsisten#elor calitative, graful MRG se transform! ntr-un alt graf,
de validare temporal! (Temporal Validation Graph - TVG) care con#ine dou! tipuri de
noduri:
noduri de tip start care con#in unul/mai multe puncte de start ale
vrfurilor din MRG.

noduri de tip end care con#in unul/mai multe puncte de end ale vrfurilor
din MRG.

F-6

Tehnologii Web

Grafurile MRG !i TVG

Aceast! transformare satisface urm!toarele reguli:

1. Pentru fiecare nod a din MRG, exist! dou! noduri as "i ae n TVG
corespunz!toare lui a.start "i a.end respectiv. Exist! de asemeni un arc
de la as la ae (de tip EndSync).
2. Dac! (a StartSync b), atunci a.start "i b.start sunt ntr-un unic
nod start al lui TVG.
3. Dac! (a EndSync b), a.end "i b.end se g!sesc ntr-un unic nod end al
lui TVG. Dac! (a SerialLink b), atunci exist! un arc (de tip StartSync) de la
ae la bs.
Graful TVG are urm!toarele propriet!#i importante:
a.

Dac! exist! drum de la as la bs, atunci a.start<b.start.

b.

Dac! exist! drum de la ae la be, atunci a.end<b.end.

c.

Dac! exist! drum de la as la be, atunci a.start<b.end.

d.

Dac! exist! drum de la ae la bs, atunci a.start<=b.start.

Pentru asigurarea validit!#ii, urm!m procedura:

pentru a ad!uga (a SerialLink b), trebuie s! nu existe drumuri

de la bs la ae.

pentru a ad!uga (a StartSync b), trebuie s! nu existe drumuri

de la as la bs "i de la bs la as.

pentru a ad!uga (a
de la ae la be "i de la be la ae.

EndSync

F-7

b), trebuie s! nu existe drumuri

Tehnologii Web

Aceast! opera#iune poate fi implementat! folosind maniera DFS standard.

Complexitatea timp a fiec!rei ad!ug!ri de arce la MRG este linear!.
Din propriet!#ile grafului TVG, putem deduce dou! reguli privind suprapunerea
temporal! a execu#iei obiectelor:

dac! as=bs sau ae=be, atunci a "i b se suprapun n timp.

dac! exist! un drum de la ae la bs sau de la be la as, atunci a "i b nu se

suprapun n timp.

1.4 Planificarea unei prezentri multimedia

n func#ie de comportamentul n timp, obiectele media pot fi clasificate astfel:

obiect m#rginit
Timpii de nceput "i de sfr"it ai evolu#iei obiectului sunt cunoscu#i. De
exemplu, texte sau imagini avnd atributul ttl specificat, resurse video sau
audio pre-nregistrate etc. Vom denumi obiectele audio/video continue,
iar obiectele text/imagine discrete.

obiect neterminat
Timpul de start al unui obiect este cunoscut, dar timpul de sfr"it nu.

obiect nepredictibil
Obiect care poate fi nceput de o hiper-leg!tur! "i terminat de alta.

Pentru majoritatea documentelor multimedia, duratele (ttl) obiectelor audio/video nu

sunt specificate, deci nu putem ob#ine timpii lor de sfr"it la nivelul proces!rii
documentului. Pot apare probleme "i la transferul prin re#ea a unor obiecte continue aflate
la distan#!. Astfel, toate obiectele care nu au explicit specificat atributul ttl vor fi
considerate obiecte neterminate. n fapt, prezent!rile multimedia pe Web au un caracter
nedeterminist.
Un obiect, din cadrul unei prezent!ri, poate fi n una din st!rile: activat, n execu#ie, oprit,
terminat, expirat sau dezactivat.

F-8

Tehnologii Web

Editarea unei prezent#ri cu verificarea validit#"ii

Dac! timpul de via#! a unui obiect expir! nainte de sfr"itul lui natural, obiectul va
trebui oprit. Ce se ntmpl! cu obiectul n tranzi#ia dintre starea de terminare "i cea de
dezactivare? n cazul unui obiect discret, r!mne pe ecran pn! la dezactivare. Pentru un
obiect video, ultimul cadru persist! pe ecran, iar n cazul unui obiect audio, "i p!streaz!
componentele vizuale (e.g. controlul volumului), dac! exist!, vizibile. Acest comportament
este, ns!, dependent de implementare.
Activarea unui obiect a este guvernat! de regulile:
1. p!rin#ii lui a "i p!rin#ii perechilor EndSync sunt dezactiva#i "i pentru fiecare
b, cu (a StartSync b), p!rin#ii lui b "i to#i p!rin#ii perechilor EndSync sunt
dezactiva#i.
2. a "i toate perechile sale StartSync intr! n starea activat, dac! regula 1. este
satisf!cut!.
Dezactivarea unui obiect a respect! regulile:
1.

a "i toate perechile sale EndSync au intrat n starea de terminare.

2. a "i toate perechile sale EndSync intr! n starea de dezactivare n acela"i

timp, dac! regula 1. este satisf!cut!.

F-9

Tehnologii Web

Asocierea tipurilor de obiecte multimedia grafului prezent#rii

Politicile de activare/dezactivare pot fi prezentate de algoritmul de mai jos, bazat pe

evenimente, utilizat de planificatorul (navigatorul) prezent!rii multimedia:
onContentEnd(object a) {
if (a.ttl nespecificat)
onFinished(a);
}
onTTLExpired(object a) {
onFinished(a);
}
onFinished(object a) {
a.state = Finished;
for (p in perechile EndSync ale lui a)
if (p.state != Finished)
return;
for (r in (this object && perechile EndSync)) {
Deactivate(r);
for (c in r.children)
if CanBeActivated(c) {
Activate(c "i perechile StartSync ale lui c);
Play(c "i perechile StartSync ale lui c);
}
}
}

F - 10

Tehnologii Web

Modelul prezentat se preteaz! pentru realizarea unui sistem de proiectare "i prezentare
multimedia, folosind un limbaj de marcare care s! permit! sincronizarea. Modelul formal
bazat pe rela#ii temporale poate fi utilizat "i n cadrul procesului de planificare a prezent!rii.

F - 11

Tehnologii Web

2. SMIL - un limbaj pentru prezentri

multimedia sincronizate pe Web
Pentru a crea prezent!ri multimedia pe Web, similare celor de la TV, Consor#iul WWW a
dezvoltat relativ recent (a doua jum!tate a anului 1998) un limbaj de specificare nou,
descendent din XML 1.0, intitulat SMIL (Synchronized Multimedia Integration
Language), oferind urm!toarele facilit!#i:

descrierea comportamentului temporal al unei prezent!ri multimedia

incluznd elemente text, audio, video, anima#ii;

descrierea facil! a aranj!rii elementelor prezent!rii n cadrul ecranului;

asocierea de hiperleg!turi obiectelor multimedia n ntregul lor sau p!r#ilor

componente.

SMIL este asem!n!tor HTML-ului, beneficiind de flexibilitatea limbajului XML

(posibilit!#i de extindere) "i mprumut! tr!s!turi ale foilor de stiluri specificate de CSS2
(Cascading Style Sheets - level 2).

2.1 Structura unui document SMIL

A"a cum este de a"teptat, un document SMIL este bazat pe marcatori delimita#i ntre
delimitatorii "<" "i ">":
<smil>
<head>
...
</head>
<body>
...
</body>
</smil>

Elementul <head> con#ine informa#ii independente de modul de desf!"urare a

prezent!rii sau prezent!rilor multimedia "i define"te aranjamentul n pagina Web a acesteia
(eventual folosind alternative de afi"are a obiectelor multimedia).
Prin intermediul marcatorului <layout> se pot specifica pozi#ion!ri ale elementelor din
corpul unui document SMIL, aceste pozi#ion!ri putnd fi alese eventual dintr-un set de
aranjamente (definite n diferite limbaje specifice: SMIL, CSS sau DSSSL).
Iat! un exemplu care ilustreaz! modul cum CSS2 poate fi utilizat ca o alternativ! la
aranjamentul de baz! din SMIL:
<smil>
<head>
<switch>
<!-- define"te o alternativ! -->
<layout type="text/css">
<!-- defini#ii CSS2 -->
[ region="r1" ] { top: 20px; left: 20px;

F - 12

Tehnologii Web

height: 200px; width: 300px }

[ region="r2" ] { top: 400px; left: 400px;
height: 100px; width: 50px }
</layout>
<layout type="text/smil-basic-layout">
<!-- defini#ii SMIL -->
<region id="r1" top="20" left="20"
height="200" width="300" />
<region id="r2" top="400" left="400"
height="100" width="50" />
</layout>
</switch>
</head>
<body>
<par>
<!-- dou! obiecte multimedia evolund n paralel -->
<video region="r1" src="videos/v1.rm" dur="30s" />
<video region="r2"
src="http://www.infoiasi.ro/v/v2.rm" dur="2min"
repeat="2" />
</par>
</body>
</smil>

n dou! zone de pe ecran vor fi afi"ate dou! resurse: un film nc!rcat de pe un server
aflat la distan#! (care va dura 2 minute "i va fi repetat de dou! ori) "i un film luat de pe
serverul local (cu o durat! de 30 de secunde).
Tag-ul <layout> poate con#ine defini#ii ale mai multor regiuni de ecran
(prin <region>) sau a unui aranjament general, utilizat de toate celelalte elemente
(folosind <root-layout>).
O regiune de document poate avea fixat un fundal (cu atributul background-color),
o zon! de ecran, n pixeli (atributele top, left, height, width), un identificator
unic (atributul obligatoriu id), o manier! de ncadrare a obiectului multimedia pe care l va
con#ine: scalare, decupare, derulare (atributul fit).

2.2 Corpul unui document SMIL

Corpul specificat de marcatorul <body> poate avea ca submarcaje: <a> "i <anchor>
(definesc ancore, similare celor din HTML), <ref>, <animation>, <audio>,
<img>, <video>, <text>, <textstream> (specifice obiectelor multimedia incluse
n document), <seq> "i <par> (elemente de sincronizare).
Sincronizarea obiectelor multimedia
Exact ca n limbajele de programare paralel!, exist! dou! tag-uri pentru rularea n
manier! secven#ial! sau paralel! a prezent!rilor multimedia.
Submarcatorii lui <par> se pot suprapune n timp, dar ordinea textual! a apari#iei lor nu
are nici o influen#! asupra modului de sincronizare a prezent!rii.
Un exemplu:

F - 13

Tehnologii Web

<par>
<audio id="a" begin="6s" src="audio/music.rm" />
</par>

Acurate#ea sincroniz!rii dintre copiii (submarcatori definind obiecte multimedia) unui

grup paralel este dependent! de implementare (cazul unor medii continue - flux audio sau
video - prezentate n paralel).
Un navigator multimedia poate prezenta urm!toarele comportamente:

sincronizare hard (programul de prezentare multimedia sincronizeaz! copiii

dintr-un <par> prin intermediul unui ceas comun);

sincronizare soft (fiecare copil al tag-ului <par> are propriul lui ceas,
care ruleaz! independent de ceasurile altor copii prezen#i n acela"i tag <par>).

Intervalul de timp poate fi specificat astfel: 03:40:10 (3 ore, 40 de minute "i 10 secunde),
01:33 (o or! "i 33 de minute), 15min, 39s, 5ms, 0.05s etc.
Pornirea, oprirea sau evolu#ia unei prezent!ri pot fi influen#ate de un eveniment ca
"begin", "end" sau "valoare de timp".
Astfel, putem specifica urm!toarele:
<par>
<audio id="voice" begin="6s" src="voce.rm" />
<video begin="id(voice)(15s)" src="interviu.rm" />
</par>

Filmul interviului va ncepe cu 15 secunde mai trziu dect sonorul.

Pentru prezent!ri secven#iale se utilizeaz! tag-ul <seq> ca n exemplul de mai jos:
<smil>
<head>
<layout>
<!-- definim dou! regiuni de afi"are -->
<region id="r1"
top="0" left="0" height="175" width="250" />
<region id="r2"
top="175" left="0" height="200" width="350" />
</layout>
</head>
<body>
<!-- o secven#! de o imagine, un film "i o imagine -->
<seq begin="5s">
<img src="salut.jpg" dur="5s" fit="scroll"
title="Salut!" region="r1" />
<video src="smil.mpg" region="r1" />
<img src="pa.jpg" dur="5s" fit="scroll"
title="La revedere!" region="r2" />
</seq>
</body>
</smil>

F - 14

Tehnologii Web

Pot fi folosite pentru ambele elemente <par> "i <seq> atribute ca:

begin - timpul nceperii explicite a unui element,

dur - durata unei prezent!ri sau a unui obiect multimedia,

endsync - sfr"it sincronizat,

end - sfr"itul explicit al unui element,

region - regiunea unde se va derula prezentarea acustic! sau vizual! a unui

repeat - modul de repetare a con#inutului unei prezent!ri.

obiect,
Aceste atribute se pot reg!si "i n cadrul tag-urilor de specificare a fiec!rei resurse
multimedia incluse n documentul SMIL.
Desigur, elementele <seq> "i <par> pot fi imbricate, conducnd la prezent!ri
multimedia cu sincroniz!ri complexe.
Un exemplu de repetare a unui fi"ier audio "i a unei imagini afi"ate n paralel:
<par repeat="4">
<audio src="tada.wav" />
<img src="logo.jpg" />
</par>

Modelul sincroniz#rii
Pentru fiecare element implicat n sincronizare se definesc ni"te valori de timp de
nceput, sfr"it "i durat! a rul!rii unui obiect multimedia:
1.

fiecare element n SMIL posed! un timp de nceput implicit (implicit begin).

2. fiecare element poate avea asignat un timp de nceput explicit (explicit begin)
prin atributul begin. Se consider! eroare dac! timpul de nceput explicit este mai
mic dect cel implicit.
3.

fiecare element de asemeni are un timp de sfr"it implicit (implicit end).

4. fiecare element poate, prin intermediul atributului end, s! aib! asociat un

timp de sfr"it explicit (explicit end).
5. durata implicit! de rulare este diferen#a dintre timpii de sfr"it implicit "i de
nceput implicit.
6. fiecare element n SMIL poate avea asignat! o durat! explicit! prin
intermediul atributului dur.
7. timpul de nceput dorit (desired begin) al unui element este egal fie cu timpul
de nceput explicit (dac! a fost specificat), fie cu timpul de nceput implicit.
Similar pentru timpul de sfr"it dorit (desired end).
8. durata dorit! a unui element este diferen#a dintre timpul de sfr"it dorit "i
timpul de nceput dorit.
9. fiecare element are un timp de nceput efectiv "i un timp de sfr"it efectiv
(sfr"itul efectiv al unui copil nu poate surveni mai trziu dect sfr"itul efectiv al
p!rintelui s!u).
F - 15

Tehnologii Web

10. durata efectiv! este calculat! f!cnd diferen#a dintre timpul de sfr"it efectiv
"i cel de nceput efectiv.
n specifica#ia SMIL se prezint! in extenso cum sunt calcula#i to#i ace"ti timpi.

2.3 Alternative de prezentare

Tag-ul <switch> d! posibilitatea autorului unei prezent!ri s! specifice un set de resurse
alternative dintre care doar una va fi aleas!. Exist! o serie de atribute de test care dac! sunt
evaluate ca "adev!rat", atunci resursa multimedia va fi nc!rcat!, decodat! "i rulat!.
Ca atribute de test se pot men#iona:

system-bitrate

Specific! l!rgimea de band! (n bi#i pe secund!), depinznd de conexiunea

folosit!. Astfel, dac! o resurs! (de exemplu, un video-clip) nu poate fi
transferat! suficient de repede nu va mai fi nc!rcat! (sau se poate furniza
o loca#ie alternativ!);

system-captions

Permite autorilor multimedia distinc#ia dintre textul redundant echivalent

unei por#iuni audio a unei prezent!ri (de pild! un discurs), text destinat celor
cu disfunc#ionalit!#i auditive sau celor care nva#! s! citeasc!, "i textul destinat
ntregii audien#e;

system-language

Va fi evaluat ca adev!rat dac! una dintre limbile indicate de utilizator se

reg!se"te printre cele din lista de valori ale acestui parametru. Astfel, se poate
renun#a la nc!rcarea unui speech dac! el nu este rostit n limba romn!:
<audio src="discurs.rm" system-language="ro" />

system-overdub-or-caption

Se utilizeaz! pentru a recunoa"te dac! o resurs! (audio sau video) se dore"te

a fi titrat! sau dublat! (o media se poate nlocui cu alta);

system-screen-size

Se evalueaz! ca adev!rat dac! sistemul gazd! suport! rezolu#ia specificat! de

acest atribut. n acest mod se pot concepe pagini independente de rezolu#ie,
pentru fiecare rezolu#ie n parte putnd fi oferit! o alt! prezentare;

system-screen-depth

Reprezint! adncimea paletei de culori n bi#i (valori tipice: 1, 8, 24 etc.).

Se pot avea n vedere caracteristicile color ale calculatoarelor gazd! pe care se
ruleaz! prezentarea (dac! nu se pot suporta destule culori, nu mai are rost s!
se ncarce o imagine JPG cu 1 milion de culori, ci doar un GIF cu
256 de culori).

F - 16

Tehnologii Web

Exemple:
<switch>
<audio src="pinkfloyd/thewall-better_quality"
system-bitrate="16000" />
<audio src="pinkfloyd/thewall-poor_quality"
system-bitrate="8000" />
</switch>
<switch>
<video src="conference/opening_fr"
system-language="fr, en, it" />
<audio src="conference/opening_ro"
system-language="ro" />
</switch>
<par>
<audio src="vangelis/spiral.rm" />
<switch>
<par system-screen-size="1280X1024"
system-screen-depth="16">
<video src="vangelis_hires/" />
<img src="vangelis_hires.jpg" begin="10s" />
</par>
<par system-screen-size="640X480"
system-screen-depth="8">
<img src="vangelis_lores.jpg" />
</par>
</switch>
</par>

n ultimul exemplu, pe fundalul muzicii se va proiecta "i video-clipul nso#it de fotografia

compozitorului numai dac! rezolu#ia va permite acest lucru.

2.4 HiperHiper - legturi

O prezentare a unui document SMIL poate implica alte aplica#ii sau extensii (non-SMIL),
datorit! naturii sale de integrare a unor resurse eterogene. De exemplu, un navigator SMIL
poate vizualiza o pagin! HTML ncorporat! n documentul SMIL sau, invers, un agent
HTML poate utiliza o extensie (plug-in) SMIL pentru a naviga printr-un document SMIL.
Leg!turile se adreseaz! prin intermediul URL-urilor, exact ca "i la HTML.
Elementul <a> este foarte asem!n!tor cu <a> din HTML 4.0, dar n SMIL este ad!ugat
un atribut show controlnd comportamentul temporal al sursei cnd se selecteaz! leg!tura
pe care o define"te. Din considerente de sincronizare, <a> nu influen#eaz! sincronizarea
subtag-urilor sale. Un marcaj <a> nu poate fi imbricat n alt <a>.
Atributul show poate avea urm!toarele valori:
"replace"
Prezentarea curent! este oprit! "i este nlocuit! de resursa destina#ie a leg!turii
definite de <a>. Dac! browserul are implementat un mecanism de istoric al navig!rii
(history), prezentarea surs! va fi repornit! cnd utilizatorul se rentoarce la ea;

F - 17

Tehnologii Web

"new"
Prezentarea resursei destina#ie ncepe ntr-un nou context (de exemplu ntr-o nou!
fereastr!), f!r! a afecta prezentarea curent! (ambele se desf!"oar! independent);
"pause"
Prezentarea curent! este oprit! "i prezentarea destina#ie (nou nc!rcat!) este
nceput! ntr-un nou context. La terminarea acesteia din urm!, prezentarea ini#ial! "i
va continua rularea.
Un exemplu:
Prezentarea A
<a href="http://www.undeva.ro/prezentareaB#next">
<video src="video.rm" />
</a>
Prezentarea B (aflat! la adresa http://www.undeva.ro/prezentareaB)
<seq>
<video src="video.rm" />
<par>
<video src="videos/1" region="window1" />
<video src="videos/2" region="window2" id="next" />
<a href="http://www.altundeva.ro" show="pause">
<text src="title.html" region="titles" />
</a>
</par>
</seq>

n acest exemplu, observ!m c! prezentarea A are o leg!tur! n mijlocul prezent!rii B.

Dac! leg!tura este urmat! de c!tre navigator, atunci prezentarea va debuta de la timpul de
nceput efectiv al elementului cu identificatorul next (n acest caz, un video-clip).
Func#ionalitatea lui <a> este limitat! la asocierea unei leg!turi c!tre un obiect multimedia
n ntregul lui. Tag-ul <anchor> ofer! n plus:

asocierea unei leg!turi la o subparte temporal! sau spa#ial! a unui obiect

multimedia, prin atributul href;

crearea unei subp!r#i a unui obiect multimedia utiliznd atributul id;

mp!r#irea n subp!r#i spa#iale a unui obiect, prin atributul coords;

divizarea n cuante de timp a unui obiect, folosind atributele begin "i end
(valorile acestora sunt relative la nceputul obiectului respectiv).

Un exemplu n care durata unui film este mp!r#it! n dou! subintervale de timp, cte o
leg!tur! diferit! fiind asociat! fiec!rui subinterval:
<video src="http://www.infoiasi.ro/fct99/opening">
<anchor href="http://www.infoiasi.ro/fct99/text/discurs.txt"
begin="0s" end="50s" />
<anchor href="http://www.infoiasi.ro/fct99/text/traducere.txt"
begin="51s" end="2min" />
</video>

F - 18

Tehnologii Web

Utiliznd aceast! facilitate, pot fi create imagini senzitive (ca h!r#ile de coordonate
din HTML) "i leg!turi temporale (dinamice).
O alt! exemplificare este urm!toarea:
<par>
<img src="fcs-logo.jpg" dur="12s">
<anchor href="salut.jpg" begin="0s" end="5s" />
<anchor href="pa.jpg" begin="5s" end="9s" />
</img>
<text src="welcome.txt" dur="10s" begin="1s" />
</par>

2.5 Obiecte multimedia

Obiectele multimedia constituie actorii unei prezent!ri multimedia, fiind incluse prin
referin#e
folosindu-se
URL-uri.
Mai
general,
sunt
utilizate
URI-uri
(Uniform Resource Identifiers).
Autorii unei prezent!ri multimedia pot ncadra fiecare obiect ntr-una din categoriile:
anima#ie, audio, imagine, video, text sau flux text, specificate de tagurile <animation>,
<audio>, <img>, <video>, <text>, <textstream> respectiv. Cnd sunt n
dubiu, autorii pot folosi <ref>, marcator generic desemnnd orice element multimedia
(las! deschideri pentru alte tipuri de media, de exemplu lumi virtuale 3D).
Fiecare element multimedia poate avea "i urm!toarele atribute:
alt

descrierea alternativ! a unui obiect, vizibil! n cazul n care agen#ii utilizator

nu-l pot afi"a;
author

autorul respectivului obiect multimedia;

copyright

specific! drepturile de autor;

type

tipul obiectului (valori MIME. De exemplu: image/jpeg sau text/plain);

title

titlul asociat fiec!rui obiect multimedia.

F - 19

Tehnologii Web

Vizualizarea unei prezent#ri SMIL folosind player-ul GRiNS

2.6 Implementri
Cu toate c! SMIL este un limbaj de specificare tn!r "i n continu! dezvoltare, deja exist!
implementate unelte de creare a documentelor SMIL: GRiNS, TAG Editor 2.0, VEON,
plus agen#i utilizator (navigatoare): GRiNS, Helio Barbizon, HPAS, Real G2, Works Lp player
etc. Validarea unui document SMIL se poate realiza cu Validator. De asemeni sunt
disponibile "i o serie de biblioteci de procesare a documentelor SMIL, dintre care poate fi
amintit! PerlySMIL, o colec#ie de module Perl.
Din p!cate player-erele actuale nu suport! n ntregime specifica#iile SMIL "i de cele mai
multe ori sunt incompatibile ntre ele, autorii trebuind s!-"i testeze prezent!rile multimedia
pe mai multe platforme.

F - 20

Tehnologii Web

Vizualizarea unei prezent#ri multimedia incluznd text, imagini !i video cu HPAS

Vom prezenta n continuare un editor flexibil, elaborat de studentul Marcel R!zmeri"!,

ajutat de Ala Gusan, care permite editarea vizual! a fi"ierelor SMIL 1.0. Datorit! faptului c!
ntreaga aplica#ie este scris! n limbajul Java, ea poate fi rulat! pe o multitudine de
platforme.
La nc!rcarea unui fi"ier se va verifica dac! este valid din punct de vedere sintactic "i
semantic, orice eroare fiind semnalat! utilizatorului, dup! cum se poate remarca din figura
urm!toare:

F - 21

Tehnologii Web

Semnalarea erorilor de sintax# la nc#rcarea unui fi!ier SMIL invalid

Dup! cum se observ!, fi"ierul surs! SMIL va fi reprezentat asemeni unui arbore de
noduri, utilizatorul avnd posibilitatea inser!rii sau "tergerii de elemente SMIL, fie prin
intermediul unui meniu contextual activat la ap!sarea butonului drept al mouse-ului, fie din
meniul principal al programului. De asemeni, propriet!#ile (atributele) elementelor SMIL
pot fi consultate sau modificate folosind o alt! fereastr!.

F - 22

Tehnologii Web

Inserarea unui element SMIL

Crearea unei prezent#ri multimedia

Metodologia de creare a unei prezent!ri multimedia folosind RealPlayer G2 comport! mai mul#i
pa"i (vezi "i figura de mai jos):
1. Utilizarea uneltelor de proiectare (authoring) pentru scrierea documentelor
SMIL, prelucrarea "i codificarea resurselor multimedia;
2. Crearea "i stocarea pe server a fi"ierelor necesare prezent!rii: SMIL,
RealAudio/Video (.rm), RealText (.rt), RealPix (.rp), imagini (.gif/.jpg);
3. Folosind RealPlayer G2, accesarea prezent!rii multimedia de pe Internet.
RealPlayer G2 poate fi utilizat ca plug-in pentru navigatorul Web sau ca aplica#ie de
sine-st!t!toare.

F - 23

Tehnologii Web

2.7 Integrarea prezentrilor SMIL n paginile Web

ntr-un document HTML se poate ncorpora o prezentare realizat! n SMIL prin
intermediul elementului <object>, conform urm!torului exemplu care va nc!rca fi"ierul
SMIL n fereastra navigatorului folosind un plug-in RealPlayer:
<object
id="video1"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height="450" width="720">
<param name="controls" value="ImageWindow">
<param name="console" value="Clip1">

F - 24

Tehnologii Web

<param name="autostart" value="true">

<param name="src" value="prezentare.smil">
<embed src="prezentare.smil" type="audio/x-pn-realaudio-plugin"
console="Clip1" controls="ImageWindow" height="450" width="720"
autostart="false">
</embed>
</object>

2.8 Utilizare i viitor

SMIL ar putea fi solu#ia pentru prezent!ri multimedia sofisticate "i chiar de a realiza
corespondentul Web al unor emisiuni TV, prin mecanismul de sincronizare "i integrare
unitar! a resurselor multimedia distribuite. SMIL ofer! premisele televiziunii la cerere
(TV on demand) sau TV Web-ului.
Autorii documentelor SMIL "i pot scrie prezent!rile #innd cont de resursele fizice ale
utilizatorilor (l!rgime de band!, rezolu#ie, posibilit!#i color), de preferin#ele lingvistice sau
anumite handicapuri, oferind astfel alternative pentru fiecare categorie n parte.
Credem c! n curnd va fi inclus n limbaj "i suportul pentru realitatea virtual!
(conectivitate cu VRML) "i o interactivitate mai larg! cu utilizatorul (via Java probabil).
n prezent, Consor#iul Web dezvolt! versiunea a doua a limbajului SMIL 2.0
(denumit! "i SMIL Boston), care va permite realizarea anima#iilor, suportul de includere n
documente HTML sau XML "i modularizarea tag-urilor SMIL, utilizarea de script-uri etc.

F - 25

Tehnologii Web

Vizualizarea unei prezent#ri SMIL cu RealPlayer G2

F - 26

Tehnologii Web

3. Extensii multimedia bazate pe timp

pentru HTML (HTML+TIME)
De"i limbajul SMIL este un format portabil pentru realizarea prezent!rilor multimedia,
nu ofer! suport de integrare n HTML. Astfel, au fost propuse o serie de extensii
multimedia denumite Timed Interactive Multimedia Extensions for HTML
(HTML+TIME) menite s! adauge HTML-ului capabilit!#i de temporizare, interactivitate
"i procesare a mediilor, urmnd liniile de dezvoltare din SMIL. n prezent, HTML+TIME
este suportat de Internet Explorer versiunile 4 "i 5. Varianta secund! a specifica#iei,
HTML+TIME 2.0, inspirat! din SMIL 2.0 (Boston), este implementat! n
Internet Explorer 5.5 sau o versiune ulterioar!.

3.1 Suportul de temporizare i interaciune

Fiec!rui element HTML i se pot asocia atribute indicnd un timp de nceput "i o durat!,
plus o modalitate de repetare a con#inutului unui obiect multimedia. Pentru scenarii de
prezentare complexe, informa#iile temporale pot fi grupate n a"a-numitele regiunii locale
de timp (suport pentru sincronizare paralel!).
Noile atribute introduse sunt urm!toarele:

begin define"te momentul de ncepere a unui element;

beginWith

beginAfter permite temporizarea secven#ial! dintre elemente;

beginEvent permite temporizarea interactiv! n cadrul documentului

dur specific! durata execu#iei unui anumit obiect;

end define"te timpul de final al unui element;

endWith define"te un sfr"it sincronizat ntre elemente;

endEvent permite sfr"itul la apari#ia unui eveniment;

repeat specific! num!rul de repeti#ii ale unui element;

repeatDur define"te durata repeti#iei.

(start sincronizat);

permite

temporizarea

relativ!

dintre

elemente

(n func#ie de apari#ia unui eveniment). Interactivitatea aici nseamn!: interactivitate a

utilizatorului (un element va ncepe la producerea unui eveniment produs de
utilizator, onClick de exemplu), interactivitate a serverului (r!spuns la un eveniment
trimis de server, de exemplu nc!rcarea complet! a unui film), interactivitate
a prezent!rii (r!spuns la un eveniment generat de navigator nsu"i);

Prezent!rile paralele vor avea loc n cadrul noului marcator par care se comport! similar
celui din SMIL. Pentru prezent!ri secven#iale exist! seq.

F - 27

Tehnologii Web

3.2 Suportul pentru extensii multimedia

HTML+TIME define"te patru nivele de suport:

nivelul 0 trebuie s! permit! specificarea duratei de timp "i facilit!#i de

pornire, oprire, pauz! a player-ului multimedia;

nivelul 1 trebuie n plus s! permit! sincronizarea "i resincronizarea;

nivelul 2 trebuie s! suporte "i sincroniz!ri avansate;

nivelul 3 trebuie s! ofere "i facilit!#i de interogare a utilizatorului n leg!tur!

cu capabilit!#ile navigatorului (cum ar fi: canRepeat, canPlayBack,
canPlayVariable etc.).

Flexibilitatea elementelor region, a, anchor din SMIL se reg!se"te mai greu n

HTML+TIME, dar poate fi simulat! cu h!r#i de imagini sau prin CSS2. Elementele par,
switch sau media din SMIL sunt mai u"or de utilizat n SMIL. n schimb,
HTML+TIME extinde o parte din facilit!#ile din SMIL, permi#nd repeti#ii frac#ionare
(utile pentru anima#ii), sincroniz!ri mai precise, u"urin#! n utilizare etc.
Exemple
a.

O prezentare secven#ial! de imagini (slide-show):

<div width="200" height="200">

<t:seq t:repeatDur="indefinite">
<img src="image1.jpg t:dur="2" t:timeAction="display">
<img src="image2.jpg t:dur="2" t:timeAction="display">
<img src="image3.jpg t:dur="2" t:timeAction="display">
</t:seq>
</div>

Prezentarea celor trei imagini va dura la infinit, fiecare imagine fiind vizibil! timp
de 2 secunde.
b.

Sincronizare folosind atributul par:

<span t:par="true" id="TL1" t:dur="10">

<p>HTML+TIME</p>
<img t:begin="3" src="fig.gif">
</span>
<div t:par="true" t:beginAfter="TL1" t:begin="2">
<p>prezentat aici...</p>
<p t:begin="1">...de Sabin Corneliu Buraga</p>
</div>

Avem dou! prezent!ri, prima compus! dintr-un text "i o imagine, durnd 10
secunde, a doua compus! din dou! paragrafe text, ncepnd cu 2 secunde mai trziu
dect prima.

F - 28

Tehnologii Web

4. Efecte multimedia n
Internet Explorer 5.5
Ap!rut recent, navigatorul Internet Explorer 5.5 aduce cteva facilit!#i interesante pentru
dezvoltatorii de pagini WWW, dintre care pot fi enumerate ata"area de filtre vizuale,
realizarea de prezent!ri multimedia sincronizate sau crearea de componente hipertext cu
semantici stabilite de programatorii Web, suportul pentru foile de stiluri XSL "i schemele
XML "i altele. Despre o parte dintre acestea vom discuta n continuare.

4.1 Filtre vizuale

n Internet Explorer 5.5, creatorii de pagini Web au posibilitatea de a ata"a imaginilor
incluse n documentele HTML diverse efecte "i filtre vizuale pe care pn! acum puteau fi
realizate fie static, folosind un editor grafic! raster (e.g. Adobe Photoshop ori
GIMP - The GNU Image Manipulation Program), fie dinamic, prin intermediul unor applet-uri
Java sau script-uri JavaScript.
ntr-o form! limitat!, aceste filtre existau "i n Internet Explorer 4.0, dar pentru
versiunile IE 5.5 "i ulterioare ele au fost mbog!#ite "i optimizate. Filtrele vor putea fi
utilizate prin intermediul unei propriet!#i Cascading Style Sheet (CSS) - nivelul 2 denumite
filter a c!rei valoare va fi un "ir de caractere desemnnd apelul unei func#ii de filtrare
grafic!. Sintaxa general! este urm!toarea:
<element style=
"filter:progid:DXImageTransform.Microsoft.nume_filtru(propriet!"i)"
>

Fiind introduse prin propriet!#i CSS, filtrele vor putea fi ata"ate unui grup de elemente,
folosind mecanismul foilor de stiluri, dar ele nu vor putea fi utilizate pentru palete cu mai
pu#in de 256 de culori "i pentru tag-urile <embed>, <applet>, <object>, <option>,
<select> sau pentru elementele de tabel (i.e. <table> ori <tr>). De asemeni, filtrele
vor fi ignorate dac! apar specificate pentru elemente pozi#ionate aflate n cadrul unor
elemente nepozi#ionate. Astfel, vom specifica inutil o proprietate filter pentru tag-ul
<span> n cadrul unei construc#ii de genul:
<div>
...
<span style="top: 30; left: 60">
...
</span>
...
</div>

A"adar, filtrele vor putea fi aplicate numai elementelor posednd o form! de afi"are - un
layout de afi"are creat, de exemplu, prin specificarea atributelor de n!l#ime (height) "i de
l!#ime (width) ori avnd pozi#ionare absolut! n cadrul ferestrei navigatorului.
Iat! pentru nceput setarea gradului de opacitate pentru o imagine, folosind filtrul Alpha:

F - 29

Tehnologii Web

<div align="center">
<img src="the-wall.jpg" />
<h5>Imaginea originala</h5>
<img src="the-wall.jpg"
style=
"filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20)"
/>
<h5>Imaginea opac!</h5>
</div>

Efectul acestui filtru este prezentat mai jos (desigur, vizualizat cu Internet Explorer 5.5
sau o versiune superioar!):

n stnga, imaginea original#; n dreapta, imaginea opacizat#

ncerca#i acest exemplu, nlocuind filtrul Alpha cu Blur care determin! nce#o"area
par#ial! a imaginii:
<img src="the-wall.jpg"
style=
"filter:progid:DXImageTransform.Microsoft.Blur(strength=10)"
/>

Pentru a transforma (a desatura) o imagine color ntr-una pe tonuri de gri vom putea
folosi filtrul BasicImage cu parametrul grayscale=1. Acest filtru este responsabil "i pentru
realizarea efectului de negativ asupra unei fotografii, dup! cum se poate observa din
exemplul urm!tor:
<img src="the-wall.jpg"
style=
"filter:progid:DXImageTransform.Microsoft.BasicImage(invert=1)"
/>

F - 30

Tehnologii Web

n stnga, imaginea original#; n dreapta, imaginea negativ#

ncerca#i, de asemeni, s! aplica#i BasicImage cu parametrul xray=1.

Proprietatea opacity a filtrului Alpha poate fi util! pentru suprapunerea mai multor
tag-uri HTML avnd diverse grade de vizibilitate, dup! cum se poate remarca "i din
urm!torul exemplu:
<!-- Coperta albumului -->
<img src="the-wall.jpg"
style="position:absolute; top:10; left:25"
width="400" height="400" />
<!-- Se suprapun numele forma#iei, titlul "i anul albumului -->
<div style="position:absolute; top:350; left:25;
width:400; height:35;
background-color: black;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)">
</div>
<div style="color:white; position:absolute; top:350;
width:400; height:80;
margin-top:5; margin-left:5;">
<p style="font-size:14pt; font-weight:bold; text-align:center">
Pink Floyd - The Wall (c)1979
</p>
</div>

F - 31

Tehnologii Web

Utilizarea unor grade diferite de transparen"# asupra unor elemente HTML suprapuse

Pentru efectuarea de prelucr!ri precum rotiri sau afi"!ri n oglind! putem utiliza filtrul
BasicImage mpreun! cu propriet!#ile rotation "i mirror, respectiv. Iat! un exemplu de
folosire pentru un text "i pentru o figur!:
<div style="height:100; width:100;
font-size:40pt; font-family: sans-serif;
filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
>
Rotind textul...
</div>
<img src="the-wall.jpg" align="right"
style="filter:
progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
/>

F - 32

Tehnologii Web

Rotirea unui text !i oglindirea unei imagini

Desigur, mai pot fi folosite filtrele Wave, DropShadow, Glow, Chroma, Light, familiare
tuturor utilizatorilor aplica#iilor de prelucrare grafic!.
Iat! un exemplu mai complex, constnd din aplicarea mai multor filtre asupra acelea"i
imagini:
<img src="the-wall.jpg"
style="filter:
progid:DXImageTransform.Microsoft.Wave(strength=74)
progid:DXImageTransform.Microsoft.MotionBlur(speed=10)
progid:DXImageTransform.Microsoft.BasicImage(invert=1)"
/>

Rezultatul poate fi urm!rit mai jos:

F - 33

Tehnologii Web

n stnga, imaginea original#;

n dreapta, imaginea rezultat# n urma aplic#rii mai multor filtre

Aplicarea dinamic# a filtrelor

Pn! acum am v!zut diverse filtre aplicate n mod static, precizndu-se de la bun nceput
diver"i parametri. Pentru a realiza acest lucru n mod dinamic putem apela la obiectul
filter predefinit de specifica#ia JScript pentru Internet Explorer 5.5. Pentru fiecare
element HTML c!ruia i-am ata"at filtre putem accesa colec#ia sa de obiecte filters.
Iat! o exemplificare:
<img id="thewall" src="the-wall.jpg" style=
"filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100)"
/>
<script type="text/javascript">
function Opac()
{
thewall.filters.item("DXImageTransform.Microsoft.Alpha").opacity
-= 10;
}
</script>
<input type="button" value="Opacizeaz!"
onclick="javascript:Opac()" />

La ap!sarea butonului "Opacizeaz!" se va modifica proprietatea opacity pentru

imaginea cu identificatorul thewall. n acest exemplu, putem observa c! putem folosi
filtrele n momentul apari#iei unor evenimente.

F - 34

Tehnologii Web

Fiecare obiect filter are o serie de propriet!#i "i metode comune tuturor filtrelor:

enabled - indic! dac! filtrul respectiv este n ac#iune;

play() - ruleaz! filtrul respectiv (util pentru filtrele de anima#ie), invocnd

apply() - aplic! un filtru static asupra unui element;

stop() - opre"te tranzi#ia curent!.

tranzi#ia;

Iat! un alt exemplu:

<div id="mydiv"
style="height:100;width:200;font-size:20pt;
filter:
progid:DXImageTransform.Microsoft.Blur(strength=10)
progid:DXImageTransform.Microsoft.CheckerBoard(duration=4)"
>Noi, formidabilii!!!</div>
<script language="JavaScript">
// aplicarea efectului de tranzi#ie CheckerBoard
mydiv.filters.item("DXImageTransform.Microsoft.CheckerBoard").apply()
// Modificarea con#inutului elementului <div>
mydiv.innerText = "ntr-adev!r?!!..."
// rularea efectului de tranzi#ie CheckerBoard
mydiv.filters.item("DXImageTransform.Microsoft.CheckerBoard").play()
</script>

Din acest exemplu, putem remarca utilizarea filtrelor "i pentru text "i folosirea altei
categorii de filtre, a"a-numitele filtre de tranzi#ie sau de anima#ie. Aceast! categorie include
CheckerBoard, Blinds, Iris, Barn, Strips, RandomBars "i RandomDissolve.
Toate aceste tranzi#ii pot fi utilizate n conjunc#ie cu filtrele vizuale, static sau dinamic.
Colec#iile de filtre pot fi manipulate prin intermediul propriet!#ii filter, astfel putnd
ad!uga noi filtre la cele vechi:
<div id="odiv" style="height:150; width:250;
filter:
progid:DXImageTransform.Microsoft.Wave(strength=100)"
>Formidabili?</div>
...
<script type="text/javascript">
...
odiv.style.filter +=
"progid:DXImageTransform.Microsoft.Iris
(irisstyle='STAR',duration=4)"
...
</script>

Atunci cnd modific!m colec#ia de filtre pentru un anumit element, este recomandabil ca
nainte de aceast! ac#iune s! dezactiv!m filtrele prin setarea propriet!#ii enabled ca
false, iar apoi s! le reactiv!m.
mpreun! cu filtrele, poate fi utilizat! "i proprietatea CSS zoom care seteaz! modul de
afi"are a unor elemente HTML. Astfel, putem modifica maniera de afi"are a unor grupuri
de tag-uri prin:

F - 35

Tehnologii Web

<img src="the-wall.jpg"
onMouseOver="this.style.zoom='50%';
this.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(invert=1)'"
onMouseOut="this.style.zoom='normal';
this.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(invert=0)'"
/>

Filtrele, mai ales cele de tranzi#ie, pot fi utilizate pentru efectuarea de anima#ii similare
tranzi#iilor de slide-uri PowerPoint, a"a cum se poate remarca n exemplul de mai jos:
<html>
<head><title>Animatii</title>
<script language="JavaScript" type="text/javascript">
var fRunning = 0
function startTrans()
{
if (fRunning == 0) // dac! filtrul nu ruleaz!, se va lansa...
{
fRunning = 1;
imgID.filters.item(0).apply();
imgID.src = "final-cut.jpg";
imgID.filters.item(0).play();
}
}
</script>
<script for="imgID" event="onFilterChange">
fRunning = 0
</script>
</head>
<body bgcolor="white" text="black">
<img id="imgID" src="the-wall.jpg"
style="filter:progid:DXImageTransform.Microsoft.Fade(duration=5)"
onclick="startTrans()" />
<h4>Ap!sa#i imaginea pentru a ncepe anima#ia...
</body>
</html>

Un filtru atunci cnd "i ncheie activitatea sau cnd tranzi#ia se termin! va genera
evenimentul onFilterChange. Captnd acest eveniment putem aplica secven#ial mai
multe filtre asupra aceluia"i tag HTML. Astfel, putem cicla la diferite momente de timp o
serie de filtre, iar la cerere sau automat s! oprim tranzi#ia prin intermediul
metodei stop().
Pute#i experimenta alte tipuri de tranzi#ii, substituind de exemplu Fade cu Blinds "i setnd
parametrul Duration=3.3.
Aceste tranzi#ii pot fi utilizate nu neap!rat n cadrul scripturilor, ci pentru a realiza
diverse efecte ntre nc!rc!rile unor pagini Web diferite n fereastra navigatorului. Pentru
aceasta, n antetul documentului HTML putem include ntr-un element <meta>
urm!toarele:
<meta http-equiv="Page-Enter"
content="progid:DXImageTransform.Microsoft.Blinds(Duration=3)"
/>

F - 36

Tehnologii Web

<meta http-equiv="Page-Exit"
content="progid:DXImageTransform.Microsoft.Barn
(orientation='horizontal', motion='in')") />

Prima construc#ie va realiza aplicarea filtrului Blinds la nc!rcarea paginii (la apari#ia
evenimentului Load), iar a doua va cauza rularea filtrului Barn atunci cnd utilizatorul va
p!r!si pagina (la evenimentul Unload). n loc de "Page-Enter" "i "Page-Exit" pot fi
utilizate valorile "Site-Enter" "i, respectiv, "Site-Exit".
Nu ntotdeauna ns! aceste filtre vor func#iona corespunz!tor, probabil datorit! unei
scame a navigatorului.
Probleme de utilizare a filtrelor
Anumite filtre (e.g. Shadow, Compositor, DropShadow, Glow sau Mask) vor func#iona adecvat
numai dac! sunt aplicate asupra unor elemente transparente. Textul f!r! culoare sau
imagine de fundal se consider! a fi transparent. Imaginile trebuie s! fie n formatul GIF89a
avnd setat! o culoare de transparen#!.
Trebuie s! avem n vedere faptul c! aplicnd repetat filtre sau folosind un num!r mare
de filtre n cadrul paginilor Web, asupra unor imagini de dimensiuni mari, vom ncetini
procesul de afi"are a con#inutului acelor documente. Este inutil s! modific!m o serie de
propriet!#i ale unui filtru dup! ce elementul avnd ata"at acel filtru a fost deja afi"at de
navigator, deoarece schimb!rile nu vor putea fi observate dect renc!rcnd sau
remprosp!tnd con#inutul acelei pagini.
Filtrele de tranzi#ie ruleaz! asincron, deci proiectan#ii de pagini Web trebuie s!
urm!reasc! fiecare stare a tranzi#iilor din cadrul documentului prin intermediul
evenimentului onFilterChange pentru a determina terminarea unei tranzi#ii particulare.
nc!rcarea imaginilor con#inute de o pagin! Web se realizeaz! tot n mod asincron, deci
starea vizual! final! a acestora nu se va putea reactualiza dect atunci cnd ele vor fi
nc!rcate complet. Filtrele de tranzi#ie pot urma oric!rui filtru static n cadrul "irului de filtre
desemnat de proprietatea filter. Dac! se dore"te ca tranzi#ia s! fie aplicat! global asupra
mai multor obiecte, este mai bine ca acestea s! fie grupate ntr-un element de tip <span>
sau <div> "i filtrele s! fie ata"ate acestuia.
Filtrele prezentate mai sus sunt n fapt controale DirectX ncorporate n Internet
Explorer 5.5, iar programatorii "i pot ad!uga propriile filtre urmnd indica#iile DirectX
Media SDK. Utilizarea unor filtre particulare se va face n maniera urm!toare:
<element style="filter:
progid:Companie.tip_filtru.nume_filtru
(propriet!#i)"
>

F - 37

Tehnologii Web

4.2 Prezentri sincronizate.

O introducere n HTML+TIME 2.0
Suportul pentru efectuarea de prezent!ri sincronizate n Internet Explorer 5.5 folosind
facilit!#ile HTML+TIME 2.0 se realizeaz! prin intermediul mecanismului de ata"are de
comportamente elementelor HTML. ncepnd cu Internet Explorer 5.0, proiectan#ii de
pagini Web "i puteau defini propriile semantici pentru elementele HTML standard sau
pentru elementele proprii, prin mecanismul de ata"are de componente hipertext prin
intermediul a"a-numitelor comportamente (behaviors). Pentru a putea utiliza HTML+TIME n
cadrul navigatorului, trebuie n prealabil s! includem urm!toarele declara#ii n antetul
paginilor Web:
1. n primul rnd este necesar s! ata"!m declara#ia spa#iului de nume
HTML+TIME prin construc#ia:
<html xmlns:t="urn:schemas-microsoft-com:time">

2. Dup! cum am v!zut n cursul acestui material, spa#iile de nume reprezint!

un mecanism XML pentru evitarea ambiguit!#ilor de utilizare a diferitelor elemente
XML avnd acelea"i denumiri dar semantici diferite.
3. Urmeaz! apoi s! declar!m comportamentele HTML+TIME 2.0 (time2)
n cadrul unui element <style> n maniera urm!toare:
<style type="text/css">
.time { behavior: url(#default#time2); }
</style>

Pentru a folosi specifica#ia HTML+TIME 1.0 (considerat! n prezent nvechit!),

putem utiliza time n loc de time2.
De notat faptul c! aceste comportamente pot fi ata"ate sau eliminate "i prin
intermediul metodelor oferite de limbajul JScript: addBehavior() "i, respectiv,
removeBehavior().
4.

Mai trebuie s! ad!ug!m o declara#ie de importare a comportamentelor

time2 prin instruc#iunea de procesare XML:

<?IMPORT namespace="t" implementation="#default#time2" ?>

Exemple
a.

Sincronizarea apari#iei unor elemente se poate realiza n modul urm!tor:

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<style type="text/css">
.time { behavior: url(#default#time2); }
</style>
<?IMPORT namespace="t" implementation="#default#time2" ?>
</head>
<body>
<p>Vor urma cteva linii mai jos...</p>
<!-- Imaginea va fi afi"at! dup! 2 secunde -->

F - 38

Tehnologii Web

<img class="time" begin="2" dur="5" src="csb.jpg" />

<p class="time" begin="4" dur="5">...dupa 4 secunde.</p>
<p class="time" begin="6" dur="5">...dupa 6 secunde.</p>
<p>Aceasta este ultima linie de text.</p>
</body>
</html>

Folosind pentru elementele HTML dorite clasa time prin construc#ia

class="time" le ata"!m comportamentul temporal dat de specifica#ia
HTML+TIME 2.0.
b. Utilizarea, ntr-un mod mai complex, a atributelor begin "i dur conduce la
apari#ia intermitent! a unor elemente HTML ca n exemplul de mai jos:
<table border="1" id="clipitor" class="time"
begin="0; clipitor.end+2" dur="1">
<tr>
<td>
Acest tabel va apare intermitent!
</td>
</tr>
</table>

Astfel, posed!m un mecanism mai sofisticat de clipire, aproape similar

controversatului tag <blink> din Netscape.
Pentru atributul begin s-au precizat dou! valori, prima fiind 0 (nsemnnd
imediat dup! nc!rcarea paginii), iar a dou! (clipitor.end+2) fiind relativ! la
timpul de terminare a afi"!rii elementului cu identificatorul clipitor. Pot fi
specificate valori temporale multiple pentru begin, ca de exemplu
<p begin="1;5;9;33" dur="2" class="time">...</p>. Astfel,
paragraful va apare pentru 2 secunde n prima secund!, apoi n a cincea secund! "i
a"a mai departe. Aceste construc#ii func#ioneaz! "i pentru atributul end:
<h4 id="dali" class="time" begin="0; dali.end+2" dur="4">
Unicornul lui Salvator Dali...
</h4>
<img class="time" begin="dali.begin+3.5" end="dali.end"
src="unicorn.jpg" style="height=195; width=300" />

Astfel, putem observa c! exemplul ne ofer! posibilitatea de a preciza sfr"itul

sincronizat al afi"!rii a dou! elemente de tip text "i respectiv imagine. Desigur, pot
fi imaginate "i scenarii sincronizate sofisticate pentru a conferi paginilor Web
actuale o dinamicitate sporit!.
c. HTML+TIME 2.0 permite, de asemeni, conceperea de prezent!ri
multimedia sincronizate interactive, n func#ie de anumite evenimente generate de
utilizator. Putem preciza c! afi"area elementelor HTML s! se realizeze la ap!sarea
butonului stng al mouse-ului a"a cum se poate remarca din exemplul de mai jos:
<hr size="20" width="500" align="left" id="hr_clic" />
<table class="time" begin="hr_clic.click" dur="10"
border="1" width="500">
<tr>
<td>
<h5 align="center">
Acest tabel va apare dup! ce se apas! pe bara orizontal!<br />

F - 39

Tehnologii Web

"i va fi afi"at timp de 10 secunde...

</h5>
</td>
<td>
<img src="unicorn.jpg" />
</td>
</tr>
</table>

Efectul acestui exemplu poate fi urm!rit n figura urm!toare care nf!#i"eaz!

afi"area tabelului dup! ap!sarea barei orizontale din partea superioar! a ferestrei
navigatorului (dup! efectuarea click-ului cu mouse-ul):

Interactivitatea cu utilizatorul n HTML+TIME 2.0

d. Pentru utilizarea unor obiecte multimedia se pot folosi urm!toarele tag-uri

HTML+TIME 2.0, similare celor din SMIL: <media>, <video>, <audio>,
<img>, <animation> "i <ref>. De exemplu, pentru a starta "i a opri la cerere un
video-clip putem scrie:
<button id="start">Start</button>
<button id="stop">Stop</button>
<t:media begin="start.click" end="stop.click"
src="clock.avi" mute="true" timeAction="display"
style="height=200; width=250" />

e. Func#ionalitatea elementului <switch> poate fi ntrev!zut! n urm!torul

exemplu:
<t:switch>
<span class="time" systemLanguage="ro">Romna</span>
<span class="time" systemLanguage="es">Espaol</span>
<span class="time" systemLanguage="pt">Portuguese</span>
<span class="time" systemLanguage="en">English</span>
<span class="time">Nici una din cele testate...</span>
</t:switch>

F - 40

Tehnologii Web

Putem realiza prezent!ri multimedia complexe prin mbinarea utiliz!rii filtrelor

prezentate mai sus cu elementele de sincronizare oferite de HTML+TIME 2.0.

4.3 Componente hipertext: un mod de extindere a

elementelor HTML
Spuneam mai sus c! designerii de pagini Web "i pot defini propriile tag-uri ntr-o
manier! asem!n!toare XML-ului. Definirea unei componente noi se realizeaz! prin
intermediul construc#iei urm!toare, scris! ntr-un fi"ier .htc (HyperText Component file)
stocat la client sau pe un server Web (de regul! suportnd ASP):
<PUBLIC:COMPONENT NAME="componenta">
<PUBLIC:ATTACH event="eveniment" handler="functie" />
...
<PUBLIC:PROPERTY name="proprietate" />
<PUBLIC:METHOD name="metoda" />
<SCRIPT>
// codul scriptului care implementeaz! metoda
// "i toate func#iile care trateaz! evenimentele specificate
</SCRIPT>
</PUBLIC:COMPONENT>

Exemplu
Urm!torul exemplu, rulnd sub Internet Explorer 5 sau superior, ilustreaz! ad!ugarea
unui comportament la un tag definit de utilizator pentru realizarea efectului de clipire a
elementului <blink> prezent n Netscape Communicator.
Vom defini o component! stocat! n fi"ierul blink.htc a c!rei ac#iune va fi realizarea
efectului de clipire:
<public:component name="blink">
<public:property name="speed" />
<public:method name="doBlink" />
<public:attach event="oncontentready" handler="Init" />
<script type="text/javascript">
// codul JavaScript pentru clipire
// adaptat dup! InsideHTML.com
// metoda de clipire
function doBlink() {
this.style.visibility = this.style.visibility == "" ? "hidden" : ""
}
// func#ia de ini#ializare apelat! la apari#ia
// evenimentului oncontentready
function Init() {
// dac! nu este specificat! viteza de clipire...
if (!speed)
speed = 1000 // atunci va clipi din secund! n secund!
setInterval(uniqueID + ".doBlink()", speed)
}
</script>
</public:component>

F - 41

Tehnologii Web

n cadrul documentului Web, va trebui s! ata"!m un comportament elementului

<blink> prin construc#ia:
<style>
<!-- ascundere de browserele mai vechi
@media screen /* clipire doar pentru ecran */
{
blink { behavior:url(blink.htc); }
}
-->
</style>

Putem specifica, prin atributul speed, "i viteza de clipire definit! n cadrul componentei
ca proprietate. Astfel, n corpul paginii, vom scrie:
<blink speed="2000">
Acest text clipe"te cu viteza de 2 secunde...
</blink>

La fiecare <blink> va fi executat! metoda JavaScript definit! n fi"ierul blink.htc.

Listing-ul complet al paginii Web utiliznd tag-ul <blink> este dat mai jos, unde am
specificat propriul nostru spa#iu de nume bl:
<html xmlns:bl="urn:schemas-microsoft-com">
<head>
<style>
<!-- ascundere de browserele mai vechi
@media screen /* clipire doar pentru ecran */
{
blink { behavior:url(blink.htc); }
}
-->
</style>
<?IMPORT namespace="bl" implementation="blink.htc" ?>
</head>
<body>
<bl:blink speed="2000">
Acest text clipe"te cu viteza de 2 secunde...
</bl:blink>
</body>
</html>

n acest mod putem defini propriile noastre elemente pe care s! le folosim ulterior n
cadrul paginilor Web.
Dac! n Internet Explorer 5.0, componentele hipertext erau convertite n documente
HTML interne care apoi erau procesate de navigator, conducnd la diminuarea vitezei de
nc!rcare, n Internet Explorer 5.5 acestea pot fi declarate "u"oare", navigatorul opernd o
serie de optimiz!ri interne n vederea proces!rii mai rapide. La fel se ntmpl! "i cu
mecanismul de cadre (frames) care a fost rescris n ntregime.

F - 42

Tehnologii Web

4.4 Concluzii
Am putut vedea n cele de mai sus o serie dintre nout!#ile aduse de Internet Explorer
5.5, mai ales n domeniul hipermediei, utile pentru designerii Web care pot beneficia, de
acum ncolo, de facilit!#i care pn! acum erau posibile doar utiliznd aplica#ii externe
(e.g. Macromedia Flash) sau script-uri sofisticate.

F - 43

Tehnologii Web

"Nimic nu este dat, totul este construit."

(Bachelard)

Tehnologii Web

Trebuie f!cut!, de la nceput, distinc#ia clar! dintre un script "i o aplica#ie Web.
Un script, n oricare limbaj ar fi scris, reprezint! numai un mic utilitar, f!r! a fi "con"tient"
de existen#a altor scripturi n sistem sau de contextul rul!rii. O aplica"ie, n cazul nostru Web,
este conceput! pentru a executa o serie de activit!#i (ac#iuni) avansate, interac#ionnd cu
utilizatorul "i, de cele mai multe ori, con#innd un set complex de scripturi.
Pentru a u"ura munca dezvoltatorului de aplica#ii complexe, exist! disponibile o serie de
servere de aplica#ii Web, dintre care vom descrie, n cadrul acestui capitol, PHP "i ASP.

G-2

Tehnologii Web

1. CGI (Common Gateway Interface)

Standard pentru interac#iunea clien#ilor Web cu serverele Web, Common Gateway Interface
se afl! n prezent la versiunea 1.1. Un program CGI, numit n mod uzual script, se execut!
pe serverul WWW, fie n mod explicit (apelat din cadrul paginii printr-o directiv! special!),
fie la preluarea informa#iilor aflate n cadrul cmpurilor unui formular interactiv sau
coordonatelor unei zone senzitive (image map). Acest standard confer! interactivitate
paginilor Web, documentele HTML putnd astfel s!-"i modifice n mod dinamic con#inutul
"i s! permit! prelucr!ri sofisticate de date.

1.1 Programele CGI

Programele CGI pot fi scrise n orice limbaj, fiind interpretate (cazul Perl, Tcl, REXX,
scripturi shell Unix) sau compilate (C, C++, Delphi). Regulile care trebuie respectate la
conceperea unui program CGI sunt:

programul scrie datele la ie"irea standard (stdout);

programul genereaz! antete care permit serverului Web s! interpreteze

corect ie"irea scriptului (folosindu-se specifica#iile protocolului HTTP).

Cele mai multe script-uri CGI sunt concepute pentru a procesa datele introduse n
formulare. Un formular se define"te n HTML folosindu-se tag-uri specifice pentru afi"area
con#inutului "i introducerea datelor de c!tre client (a"a cum am v!zut n capitolul dedicat
limbajului HTML), iar script-ul CGI, executat de server, va prelua con#inutul acelui
formular "i-l va prelucra, returnnd, eventual, rezultatele.
Antetul trimis serverului de c!tre programul CGI va respecta specifica#iile MIME,
con#innd de exemplu Content-type: text/html (document HTML) sau
Content-type: image/jpeg (imagine JPEG) ori Content-type: text/plain
(text obi"nuit).
Programului CGI i se vor transmite n diverse variabile de mediu sau de la intrarea
standard informa#ii referitoare la datele de procesat sau la clientul care a ini#iat cererea (de
exemplu, SERVER_PORT, REQUEST_METHOD, SCRIPT_NAME, QUERY_STRING,
REMOTE_HOST etc.) n func#ie de metoda de transfer utilizat!.

1.2 Variabilele de mediu accesate

de un program CGI
Oricare program CGI va putea dispune de valorile urm!toarelor variabile de mediu:

Variabile independente de metoda cererii $i setate pentru toate cererile HTTP:

SERVER_SOFTWARE furnizeaz! numele "i versiunea serverului Web

care proceseaz! cererea HTTP "i ruleaz! scriptul CGI.

SERVER_NAME d! numele de host, alias-ul DNS sau adresa IP

ale ma"inii pe care ruleaz! serverul Web.

G-3

Tehnologii Web

GATEWAY_INTERFACE stocheaz! versiunea specifica#iei CGI

folosite (CGI/1.0 ori CGI/1.1 n prezent, CGI/1.2 n viitorul apropiat).

Variabile de mediu specifice cererilor care vor fi transmise spre programul CGI:
SERVER_PROTOCOL d! numele "i versiunea protocolului de

transmitere a datelor (e.g. HTTP/1.0).

SERVER_PORT furnizeaz! portul asociat serverului care va procesa

cererea (de obicei, portul 80).

REQUEST_METHOD specific! metoda prin care va fi formulat!

cererea: GET, POST, PUT etc.

PATH_INFO furnizeaz! informa#ii suplimentare despre calea de

PATH_TRANSLATED ofer! o versiune translatat! a lui PATH_INFO

SCRIPT_NAME desemneaz! calea virtual! pn! la scriptul care va fi

directoare; scripturile CGI pot fi accesate folosind c!i virtuale urmate de

informa#ii suplimentare care se reg!sesc n aceast! variabil!.
care asociaz! c!ilor virtuale nume de directoare reale, a"a cum se g!sesc pe
calculatorul pe care ruleaz! serverul Web.
executat.
QUERY_STRING con#ine toate informa#iile de dup! caracterul "?"

din URL-ul care refer! scriptul CGI, informa#ii care vor trebui decodificate
de acel script.

REMOTE_HOST indic! hostul care a formulat cererea (calculatorul

care a apelat scriptul CGI prin intermediul unei pagini Web).

REMOTE_ADDR furnizeaz! adresa IP a clientului care a formulat
cererea, asociat! adresei simbolice date de REMOTE_HOST.

AUTH_TYPE d! metoda de autentificare utilizat! s! valideze

utilizatorul, dac! serverul suport! autentificarea utilizatorilor "i scriptul este

protejat.
REMOTE_USER indic! numele utilizatorului, dac! serverul suport!

autentificarea utilizatorilor.
REMOTE_IDENT furnizeaz! identitatea clientului care a formulat

cererea, a"a cum este returnat! de daemonul identd, conform

specifica#iilor RFC 931.
CONTENT_TYPE indic! tipul con#inutului datelor vehiculate, pentru

cererile care au ata"ate informa#ii suplimentare, precum PUT sau POST

(de exemplu, pentru un formular transmis prin metoda POST, normal ar
CONTENT_TYPE
trebui
ca
variabila
s!
aib!
valoarea
application/x-www-form-urlencoded).

CONTENT_LENGTH con#ine num!rul de octe#i ai datelor trimise

de client.
Suplimentar, liniile antet (dac! exist!) recep#ionate de la client prin intermediul
protocolului HTTP vor fi plasate n variabile de mediu avnd numele prefixate de HTTP_.
Serverul poate exclude liniile antet deja procesate, precum Authorization,
Content-type sau Content-length.
G-4

Tehnologii Web

Ca exemple de astfel de variabile, pot fi men#ionate:

HTTP_ACCEPT indic! tipurile MIME pe care le va accepta clientul, fiecare

tip fiind desp!r#it de virgul! a"a cum specific! protocolul HTTP: tip/subtip,
tip/subtip.

HTTP_USER_AGENT furnizeaz! numele "i versiunea browserului Web care

software/versiune
cererea,
n
formatul
general:
biblioteca/versiune.

formulat

Urm!torul script Perl va afi"a toate variabilele de mediu la care are acces prin intermediul
interfe#ei CGI:
#!/usr/bin/perl
# Afi"eaz! mediul
print "Content-type: text/plain\n\n";
print "Environment:\n\n";
foreach $key (keys %ENV) {
printf "%16s = %s\n", $key, $ENV{$key};
}

Variabila predefinit! ENV este un tablou asociativ con#innd perechile (nume de variabila
de mediu, valoarea variabilei).
Un script CGI similar, elaborat n bash (Bourne Again Shell) este:
#!/bin/bash
# Afi"eaz! mediul
echo "Content-type: text/plain"
echo
set

Un posibil rezultat al execu#iei scriptului de mai sus poate fi:

HTTP_ACCEPT_LANGUAGE=en
SERVER_SIGNATURE=<ADDRESS>Apache/1.3.12 Server at endirra.ro
Port 80</ADDRESS>
SCRIPT_FILENAME=/home/httpd/cgi-bin/env.pl.cgi
HTTP_ACCEPT_CHARSET=iso-8859-1,*,utf-8
HTTP_PRAGMA=no-cache
SERVER_NAME=endirra.ro
HTTP_CONNECTION=Keep-Alive
REMOTE_ADDR=127.0.0.1
REQUEST_URI=/cgi-bin/env.pl.cgi
HTTP_HOST=endirra
REMOTE_PORT=1041
REQUEST_METHOD=GET
GATEWAY_INTERFACE=CGI/1.1
QUERY_STRING=
SERVER_ADDR=127.0.0.1
SERVER_SOFTWARE=Apache/1.3.12 (Unix)
(Red Hat/Linux) PHP/3.0.15 mod_perl/1.21
SERVER_PROTOCOL=HTTP/1.0
SERVER_PORT=80
DOCUMENT_ROOT=/home/httpd/html
HTTP_USER_AGENT=Mozilla/4.72 [en] (X11; U; Linux 2.2.14-5.0 i686)
HTTP_ACCEPT=image/gif, image/x-xbitmap,
image/jpeg, image/pjpeg, image/png, */*
SCRIPT_NAME=/cgi-bin/env.pl.cgi
SERVER_ADMIN=root@endirra.ro
HTTP_ACCEPT_ENCODING=gzip

G-5

Tehnologii Web

1.3 Exemple CGI

Un program CGI scris n limbajul C standard care genereaz! o pagin! Web con#innd
mesajul 'Salut!'.
/*
salut-cgi.c
Genereaz! o pagin! Web con#innd mesajul 'Salut!'
*/
#include <stdio.h>
void main()
{
/* trimite n primul rnd antetul HTTP referitor la
tipul de date returnate de script */
printf("Content-type: text/html\n\n");
/* nceput de document HTML */
printf("<html>");
/* antet de pagin! */
printf("<head><title>Salut!</title></head>\n");
/* corp de pagin! */
printf("<body>\n");
printf("<p>Salut!</p>\n");
printf("</body></html>");
/* terminare program */
}

Un alt exemplu, de script bash folosit pentru nregistrarea ntr-un fi"ier a participan#ilor
la Colocviul studen#esc de informatic! InfoJunior, program conceput de Mirela Petrea
(am omis prezentarea formularului HTML):
#!/bin/bash
# Se
echo
echo
# Se
echo
echo
echo
echo
echo
echo

trimite nti tipul MIME conform specifica#iilor HTTP

"Content-type: text/html"
trimite apoi antetul documentului HTML generat de script
"<html>"
"<head>"
"<title>Mul#umiri</title>"
"</head>"
"<body>"
"<h1>Mul#umiri</h1>"

# Se evalueaz! parametrii introdu"i n formular de c!tre utilizator...

# ...folosindu-se programul "cgiparse" care va genera cte o variabil!
# de mediu Unix pentru fiecare valoare a cmpurilor formularului
eval `/home/httpd/cgi-bin/cgiparse -form`
echo "V! mul#umim, $FORM_name, pentru dorin#a de a participa \
la colocviul INFO JUNIOR"
echo "<p>"
# Se stocheaz! datele din formular n fi"ierul "particip"
printf "%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s\n"
"$FORM_name" \
"$FORM_univ" "$FORM_depart" \
"$FORM_paper1" "$FORM_words1" "$FORM_coord1" \
"$FORM_paper2" "$FORM_words2" "$FORM_coord2" \
"$FORM_paper3" "$FORM_words3" "$FORM_coord3" \
"$FORM_conadress" "$FORM_email" "$FORM_tel" "$FORM_fax" \
>> /home/httpd/infojr/particip

G-6

Tehnologii Web

echo '<a href=" http://www.infoiasi.ro/~petrea/infojr.html "> \

INFO JUNIOR' 97 - Invita#ie la colocviu</a>'
# Sfr"itul de pagin!
echo "</body>"
echo "</html>"

1.4 Apelarea programelor CGI

din formularele HTML
Pentru a fi efective, programele CGI trebuiesc apelate (implicit sau explicit) din cadrul
paginilor Web.
De cele mai multe ori, un script CGI va fi invocat din cadrul unui formular HTML la
ap!sarea butonului de trimitere a datelor c!tre server (butonul submit).
S! presupunem c! avem urm!torul exemplu n care un utilizator introduce prin
intermediul unui formular dou! numere ntregi, iar programul CGI va genera o pagin! Web
con#innd maximul dintre ele.
Formularul HTML va fi:
<form action="http://www.infoiasi.ro/cgi-bin/max.cgi"
method="GET">
<p>V! rug!m, introduce#i dou! numere:
<input name="nr1" size="5">
<input name="nr2" size="5">
<p>
<input type="submit" value="Afl! maximul">
</form>

De exemplu, introducnd numerele 7 "i 4 "i ac#ionnd butonul etichetat "Afl! maximul",
vom primi o pagin! Web care va afi"a textul "Maximul dintre 7 "i 4 este num!rul 7"
(vezi figurile de mai jos n care localhost reprezint! serverul www.infoiasi.ro).

G-7

Tehnologii Web

Introducerea datelor n formular

G-8

Tehnologii Web

Ob"inerea rezultatului furnizat de scriptul CGI dup# ac"ionarea

butonului de trimitere a datelor pentru prelucrare

Care este mecanismul prin care func#ioneaz! interfa#a CGI?

Presupunnd c! n cele dou! cmpuri ale formularului (purtnd numele nr1 "i respectiv
nr2) am introdus valorile 7 "i 4 respectiv "i am ap!sat butonul submit, navigatorul va
trimite, prin intermediul protocolului HTTP, o cerere c!tre serverul Web aflat la adresa
dat! de URL-ul http://www.infoiasi.ro (adresa este preluat! din valoarea
atributului action din <form>). Desigur, n loc de o adres! absolut!, putea fi specificat!
o cale relativ!, nsemnnd faptul c! se folose"te serverul pe care se g!se"te pagina con#innd
formularul.
Atunci cnd se trimite cererea HTTP, navigatorul construie"te un URL avnd ca sufix
informa#ii despre datele introduse n cmpurile formularului, n cazul nostru
http://www.infoiasi.ro/cgi-bin/max.cgi?nr1=7&nr2=4 folosindu-se o
codificare special!. Pentru fiecare cmp al formularului, se va genera o pereche
nume_cmp=valoare delimitat! de caracterul "&", iar caracterele speciale (ca de exemplu
slash-ul sau apostroful) vor fi nlocuite de codul lor numeric, n hexazecimal, precedat de
caracterul procent ("%"). Spa#iile vor fi substituite de semnul plus ("+").
De exemplu, pentru a trimite textul Cina de la Maxim's se va folosi codificarea
Cina+de+la+Maxim%27s.

G-9

Tehnologii Web

Serverul spre care cererea a fost expediat! (n cazul site-ului www.infoiasi.ro un

server Apache) va procesa datele recep#ionate conform regulilor proprii. Tipic, configura#ia
serverului define"te unde sunt stocate n cadrul sistemului de fi"iere directoarele "i fi"ierele
CGI. De cele mai multe ori, daemonul HTTP (adic! serverul Web) ruleaz! pe ma"in! sub
auspicii de utilizator fictiv (din ra#iuni de securitate ca nobody, n mod uzual), fi"ierele sale
fiind stocate de obicei n directorul /home/httpd/ (n cazul unui sistem Unix/Linux).
Aici, al!turi de directorul html unde se memoreaz! documentele HTML ale unui site Web,
se afl! "i directorul cgi-bin unde ar trebui s! fie stocate toate fi"ierele (script-urile) CGI
apelate
din
cadrul
paginilor
Web.
A"adar
URI-ul
http://www.infoiasi.ro/cgi-bin/max.cgi va nsemna pentru serverul Web de
la adresa www.infoiasi.ro urm!toarea ac#iune: "invoc! programul max.cgi aflat la
/home/httpd/cgi-bin". Astfel, n loc s! trimit! c!tre navigatorul Web care a ini#iat
cererea HTTP un document HTML sau un fi"ier de alt tip, serverul va invoca programul ori
scriptul CGI specificat n cadrul URL-ului (n acest caz max.cgi) "i-i va pasa datele
furnizate de sufix, de dup! semnul ntreb!rii (adic! "irul nr1=7&nr2=4).
Ac#iunea de invocare va avea o semantic! diferit! n func#ie de scriptul sau programul CGI
conceput. Pentru un script Perl, serverul va invoca un interpretor Perl (n cazul Apache, un
modul special mod_perl; de fapt, pentru a permite execu#ia de programe CGI, serverul
Apache se va folosi de serviciile modulului mod_cgi). Pentru un program executabil
(compilat de pild! ntr-unul din limbajele C sau C++), serverul va lansa programul ca un
proces separat.
Extensia de fi"ier .cgi nu are nici o relevan#! n general, dar pot exista diverse reguli de
numire a fi"ierelor CGI executabile dependente de server sau de sistemul de operare pe
care ruleaz!, a"a cum se ntmpl! la serverul Internet Information Services (IIS) conceput
de Microsoft.
Procesarea datelor din formularele HTML
prin metoda GET
Pentru formularele care utilizeaz! metoda GET (metoda implicit!), specifica#iile CGI
indic! faptul c! datele furnizate scriptului vor fi disponibile ntr-o variabil! de mediu
denumit! QUERY_STRING.
Desigur, n func#ie de limbajul de programare ales pentru conceperea scriptului CGI,
datele vor fi accesate via QUERY_STRING "i prelucrate. n limbajul C, vom putea folosi
func#ia getenv() aflat! n biblioteca standard stdlib. Tot ce mai r!mne de f!cut este
s! decodific!m valorile din variabila QUERY_STRING.
Scriptul CGI n mod uzual va genera date de ie"ire care vor fi trimise navigatorului Web
de c!tre server, utilizndu-se ie"irea standard (stdout):
#include <stdio.h>
#include <stdlib.h>
#define CONTENT "Content-type: text/html\n\n"
int main(void)
{
char *data;
long int nr1, nr2;
/* obligatoriu, trimite tipul de date (n format MIME) */
printf(CONTENT);

G - 10

Tehnologii Web

/* antetul HTML */
printf("<html>\n<head><title>Rezultat</title></head>\n");
/* corpul documentului */
printf("<body bgcolor=\"white\" text=\"black\">\n");
/* proceseaz! datele */
data = getenv("QUERY_STRING");
if (data == NULL)
printf("<p>Eroare la procesarea datelor!\n");
else
if(sscanf(data, "nr1=%ld&nr2=%ld", &nr1, &nr2) != 2)
printf("<p>Eroare! Datele trebuie s! fie numerice!\n");
else
printf("<p>Maximul dintre %ld "i %ld este num!rul %ld.\n",
nr1, nr2, (nr1 < nr2) ? nr2 : nr1);
/* terminare */
printf("</body>\n</html>\n");
return 0;
}

Obligatoriu, nainte de a fi expediate alte informa#ii spre client, scriptul CGI va trebui
s! trimit! linia Content-type n care se va specifica, folosindu-se tipurile MIME, ce tip de date
va primi navigatorul Web (un CGI poate trimite nu numai documente sau fragmente de
documente HTML, ci orice altceva: imagini GIF sau JPEG, text obi"nuit, arhive ZIP etc).
Conform protocolului HTTP, ntre cmpul Content-type "i restul informa#iilor trebuie l!sat!
o linie vid!, de aceea am introdus dou! caractere "\n".
Programul, dup! compilare, va trebui plasat (n cele mai multe situatii) n directorul
cgi-bin al serverului Web. Pentru a putea fi accesat, va fi necesar s! poate fi executat de
proprietar (de obicei utilizatorul special nobody n Unix), de grup "i de al#ii (drepturile 755
n Unix).
Dup! instalarea scriptului, orice utilizator din Internet (dac! nu sunt impuse restric#ii de
c!tre administratorul Web) l va putea accesa "i executa prin intermediul unui formular
HTML. Astfel, scriptul va trebui s! fie capabil s! proceseze orice tip de dat! "i s! semnaleze
posibilele erori. De asemeni, orice script CGI va trebui s! nu permit! accesarea de date
confiden#iale de pe ma"ina pe care ruleaz!, administratorul Web trebuind s! ia m!surile
necesare de securitate.
Procesarea unui formular prin metoda POST
S! presupunem c! avem situa#ia urm!toare: este necesar ca prin intermediul unui
formular s! prelu!m de la utilizator o linie de text care va fi trimis! unui script CGI s! o
adauge la sfr"itul unui fi"ier stocat pe server. Acest fi"ier va putea fi modificat doar de
c!tre autorul formularului "i de c!tre script "i va putea fi citit de c!tre oricine altcineva prin
intermediul unui alt script.
Dac! n exemplul anterior realiz!m numai o simpl! prelucrare care nu afecta n nici un
fel starea serverului (nu se modific! nici un fi"ier de pe server) "i cererea de aflare a
maximului celor dou! numere putea fi trimis! de oricte ori doream f!r! a genera probleme
(exceptnd poate consumul unor resurse), n acest caz prin intermediul scriptului se va
schimba con#inutul fi"ierului vizat, deci "i starea serverului. Pentru aceasta vom folosi
metoda POST. Ca "i la metoda GET, un program CGI are acces la ntreg mediul sistemului
de operare pe care ruleaz!. Metoda POST este util! n situa#iile n care avem de trimis
script-ului CGI spre prelucrare un volum mai mare de date (de exemplu, con#inutul unei

G - 11

Tehnologii Web

scrisori ori al unui fi"ier) sau informa#ii confiden#iale (e.g. parole) care nu trebuie s! apar! n
componen#a URI-ului transmis serverului Web.
Pentru formularele utiliznd metoda POST, datele pasate scriptului vor putea fi accesate
de la intrarea standard (stdin), iar lungimea, n octe#i, a datelor trimise va fi disponibil! n
variabila de mediu CONTENT_LENGTH.
De"i citirea de la intrarea standard ar putea fi considerat! mai simpl! dect citirea dintr-o
variabil! de mediu, exist! urm!toarele aspecte pe care trebuie s! le lu!m n considerare:
serverul nu garanteaz! c! va trimite toate datele c!tre scriptul CGI, deci vor trebui citite
attea caractere cte indic! variabila de mediu CONTENT_LENGTH, nu mai multe.
Formularul prin care se va solicita linia care va fi ad!ugat! la fi"ier este:
<form action="http://www.infoiasi.ro/cgi-bin/addproj.cgi"
method="POST">
<p>Introduce#i titlul proiectului:
<input name="data" size="50" maxlength="80">
<input type="submit" value="Trimite">
</form>

Programul C care accept! datele "i le adaug! la fi"ierul proj.txt va fi urm!torul:

#include <stdio.h>
#include <stdlib.h>
#define MAXLEN 80
#define EXTRA 5
/* 4 pentru numele cmpului "data", 1 pentru "=" */
#define MAXINPUT MAXLEN+EXTRA+2
/* 1 pentru sfr"it de linie, 1 pentru NULL */
/* numele fi"ierului (cale relativ!) */
#define DATAFILE "../proj/proj.txt"
/* func#ie de decodificare a datelor pasate programului CGI */
void unencode(char *src, char *last, char *dest)
{
for (; src != last; src++, dest++)
if (*src == '+') /* nlocuie"te "+" cu spa#iu */
*dest = ' ';
else
if (*src == '%')
{
/* nlocuie"te hexa cu caracterul */
int code;
if (sscanf(src + 1, "%2x", &code) != 1)
code = '?';
*dest = code;
src +=2;
}
else
/* copie celelalte caractere... */
*dest = *src;
*dest = '\n';
*++dest = '\0';
}

G - 12

Tehnologii Web

/* func#ia principal! */
int main(void)
{
char *lenstr;
char input[MAXINPUT], data[MAXINPUT];
long len;
/* scrie Content-type, urmat de setul de caractere (op#ional),
n acest caz ISO-8859-2 (folosim diacritice) */
printf("%s%c%c\n",
"Content-type: text/html;charset=iso-8859-2", 13, 10);
/* scrie antetul documentului HTML generat */
printf("<html>\n<head><title>R!spuns</title></head>\n");
/* ia num!rul de caractere transmise */
lenstr = getenv("CONTENT_LENGTH");
/* num!rul de caractere este corect? */
if (lenstr == NULL ||
sscanf(lenstr, "%ld", &len) != 1 ||
len > MAXLEN)
printf("<p>Eroare - formular incorect?\n");
else
{
FILE *f;
/* cite"te de la intrarea standard datele */
fgets(input, len + 1, stdin);
/* decodific! linia */
unencode(input + EXTRA, input + len, data);
/* adaug! n fi"ier */
f = fopen(DATAFILE, "a");
if (f == NULL)
printf("<p>Eroare la ad!ugarea n fi"ier...");
else
fputs(data, f);
fclose(f);
printf("<p>Mul#umim! Linia <b>%s</b> a fost ad!ugat! n fi"ier\n",
data);
}
/* sfr"itul documentului */
printf("</body>\n</html>\n");
return 0;
}

Putem scrie un program CGI care s! afi"eze con#inutul fi"ierului proj.txt.

Acest program va fi apelat prin intermediul formularului HTML de mai jos:
<form action="http://www.infoiasi.ro/cgi-bin/viewproj.cgi"
method="GET">
<input type="submit" value="Afi"eaz!">
</form>

Programul C este prezentat n continuare:

G - 13

Tehnologii Web

#include <stdio.h>
#include <stdlib.h>
/* numele fi"ierului (cale relativ!) */
#define DATAFILE "../proj/proj.txt"
/* func#ia principal! */
int main(void)
{
/* deschide fi"ierul */
FILE *f = fopen(DATAFILE, "r");
int ch;
if (f == NULL)
{
/* trimite cod HTML n caz de eroare */
printf("%s%c%c\n",
"Content-type: text/html", 13, 10);
printf("<html><head>\n");
printf("<title>Eroare</title>\n");
printf("</head>\n");
/* scrie corpul */
printf("<body>\n");
printf("<p><b>Fi"ierul nu poate fi deschis!</i>\n");
/* scrie sfr"itul documentului */
printf("</body>\n</html>\n");
}
else
{
/* afi"eaz! fi"ierul ca text obi"nuit */
printf("%s%c%c\n",
"Content-type: text/plain", 13, 10);
while ((ch = getc(f)) != EOF)
putchar(ch);
/* nchide fi"ierul */
fclose(f);
}
return 0;
}

De multe ori este util ca ntr-un script CGI s! detect!m metoda de transfer pentru a
prelua datele n mod corespunz!tor. Pentru aceasta va trebui s! test!m valoarea variabilei
de mediu REQUEST_METHOD.
n limbajul C, acest lucru se poate realiza astfel:

G - 14

Tehnologii Web

char *request_method;
request_method = getenv("REQUEST_METHOD");
if (request_method == NULL)
{
/* eroare */
}
else
if (stricmp(request_method,"GET") == 0)
{
/* metoda GET
pentru preluarea datelor se va folosi
variabila de mediu QUERY_STRING
*/
}
else
if (stricmp(request_method,"POST") == 0)
{
/* metoda POST
pentru preluarea datelor se vor citi
de la 'stdin' maxim CONTENT_LENGTH bytes
*/
}
else
{
/* eroare */
}

Astfel, acela#i script CGI poate fi utilizat indiferent de metoda de transfer a datelor setat!
prin atributul method al unui <form> dintr-o pagin! Web.

1.5 Server Side Includes (SSI)

Server Side Includes ofer! posibilitatea execu#iei de programe CGI "i de efectuare
a altor ac#iuni din cadrul paginilor Web prin intermediul unor comenzi incluse direct n
codul HTML, f!r! a necesita prezen#a unui formular pentru activarea scriptului dorit.
Fiecare comand! SSI va putea fi introdus! n paginile Web printr-un comentariu special
<!--#command -->, unde command este o comand! suportat! de specifica#ia SSI.
Din moment ce este inclus! ca un comentariu HTML, navigatorul Web o va ignora, dar va
fi procesat! pe partea server "i comentariul va fi nlocuit cu ie"irea acelei comenzi. Fi"ierele
HTML utiliznd comenzi SSI vor avea extensia .shtml n loc de .html, dar aceast!
conven#ie nu este obligatorie.
Pentru ca n documentele HTML s! se poate executa comenzi SSI, chiar dac! ele nu au
extensia .shtml, n fi"ierul de configurare a serverului Web (httpd.conf pentru
Apache) sau n cadrul fi"ierului .htaccess (care va fi plasat n directorul unde sunt
stocate paginile Web) va fi inserat! linia:
AddType text/x-server-parsed-html .html .htm

De asemeni, pot fi utilizate urm!toarele:

AddType text/html .shtml
AddHandler server-parsed .shtml

G - 15

Tehnologii Web

n fi"ierul de configurare httpd.conf administratorul Web va trebui s! includ! o linie

Allow Includes pentru a permite interpretarea comenzilor SSI. Dac! din motive de
securitate nu se dore"te execu#ia comenzii SSI exec (vezi mai jos), atunci se va scrie linia
Allow IncludesNoExec. Desigur, serverul se poate configura astfel nct doar
anumitor documente s! li se permit! apelarea de scripturi CGI ori de comenzi SSI.
Comenzile SSI uzuale sunt urm!toarele:

echo

Cu ajutorul lui echo pot fi afi"ate diverse informa#ii preluate din variabilele
de mediu, precum data "i timpul curent, adresa IP a clientului care vizualizeaz!
pagina, tipul de navigator folosit etc. Iat! cteva exemple:
<p>Data "i timpul sunt
<!--#echo var="DATE_LOCAL" -->
<p>Leg!tura prin care s-a ajuns aici este
<!--#echo var="HTTP_REFERER" -->
<p>Adresa IP de la care se acceseaz! pagina este
<!--#echo var="REMOTE_ADDR" -->
<p>Numele acestui document este
<!--#echo var="DOCUMENT_NAME" -->
<p>Browserul "i sistemul pe care ruleaz! sunt
<!--#echo var="HTTP_USER_AGENT" -->

Un posibil rezultat al comenzilor echo de mai sus este ilustrat de

urm!toarea figur!:

Rezultate ale comenzii echo

G - 16

Tehnologii Web

Folosind aceast! facilitate, putem crea pentru fiecare pagin! dorit! un buton
napoi (Back) care s! trimit! utilizatorul la adresa din care s-a accesat acea
pagin!:
<a href="<!--#echo var="HTTP_REFERER" -->">napoi</a>

De asemeni, mai pot fi utilizate "i variabilele predefinite LAST_MODIFIED

sau DOCUMENT_URI.

fsize

Va furniza lungimea unui fi"ier existent pe server.

Lungimea acestei pagini Web este de
<!--#fsize file="web6.html" -->

flastmod

Va returna data "i timpul celei mai recente modific!ri a unui fi"ier specificat.
Ultima actualizare a avut loc la
<!--#flastmod file="web6.html" -->

config

Este utilizat! la diverse configur!ri SSI. De exemplu, pentru a configura

afi"area datei, vom folosi o construc#ie de genul:
<!--#config timefmt="%a %d %b %y" -->
<!--#echo var="DATE_LOCAL" -->

unde %a indic! numele abreviat al zilei s!pt!mnii, %d specific! ziua,

%b indic! numele abreviat al numelui lunii, %y furnizeaz! num!rul anului
(ultimele dou! cifre), iar %Y va specifica anul curent (toate cele patru cifre).
Pentru timp, putem folosi %H ora curent! (de la 0 la 23), %M minutele,
%S secundele sau %T timpul curent ca %I:%M:%S:%p, n care %I indic! ora
(de la 1 la 12), iar %p va fi a.m. ori p.m..

exec

Probabil cea mai folosit! comand! SSI, va rula un program CGI pe server,
iar rezultatul va fi plasat n locul invoc!rii lui exec. Programul CGI va trebui
s! aib! setate permisiunile de execu#ie.
Un exemplu
n cadrul unei pagini Web dorim ca la fiecare nc!rcare s! apar! un citat
celebru la nceputul ei, citatele fiind stocate pe server ntr-un fi"ier
quotes.txt.
Scriptul CGI care afi"eaz! citatul este conceput n Perl "i va fi numit
quotes.pl, fiind executat printr-o comand! SSI din pagina Web:
<html>
<head><title>Pagina lui Georgic!</title></head>
<body>
<h5 align="right">
<!--#exec cgi="quotes.pl" -->
</h5>
<hr />

G - 17

Tehnologii Web

<h2>Bine a#i venit!</h2>

...
</body>
</html>

D!m n continuare sursa Perl a scriptului CGI (denumit quotes.pl):

#!/usr/bin/perl
# Scriptul selecteaz! o linie aleatoare
# din fi"ierul 'quotes.txt' "i o
# afi"eaz! la intrarea standard
print "Content-type: text/html\n\n";
# variabile globale
$QUOTES_FILE = "quotes.txt";
# seteaz! generatorul de numere aleatoare
srand($$|time);
# deschide fi"ierul
open(FIL, "<$QUOTES_FILE") ||
die "Eroare, nu pot deschide $QUOTES_FILE\n";
# ini#ializ!m un contor de linii, ini#ial 0
$count = 0;
# citim din fi"ier cte o linie
while(<FIL>) {
# din fiecare linie se va elimina caracterul new line
chop;
# stoc!m linia citit! ntr-un vector denumit lines
$lines[$count] = $_;
# increment!m contorul
$count++;
}
# decrement!m pentru a ajusta la
# num!rul de linii efectiv citite
$count--;
# nchidem fi"ierul
close(FIL);
# lu!m un num!r aleatoriu ntre 1 "i $count
$random = int(rand($count) + 1);
# afi"!m linia (citatul) folosind tag-uri HTML
print <<QUOTE;
<i>
<font color="green">$lines[$random]</font>
</i>
QUOTE
# Sfr"itul scriptului

include

Aceast! comand! permite includerea unui fi"ier (de orice tip, n mod uzual
text ori con#innd marcatori HTML) n cadrul unei pagini Web, fiind util!
pentru generarea de antete "i note de subsol f!r! a folosi scripturi CGI ori
putnd fi folosit! ca alternativ! la exec, n cazul n care exec nu este permis!
din ra#iuni de securitate.
<blockquote>A"a cum se afirma n cuvntul de deschidere:
<!--#include file="discurs.txt" -->
</blockquote>

G - 18

Tehnologii Web

Serverul Apache, versiunea 1.2 sau una ulterioar! permite utilizarea comenzilor
suplimentare:

printenv

Va afi"a lista variabilelor de mediu disponibile:

<p>Variabilele de mediu sunt:</p>
<pre>
<!--#printenv -->
</pre>

set

Seteaz! valoarea unei variabile definite de utilizator. Urmeaz! o

exemplificare:
<!--#set var="limba" value="ro" -->

Pot fi utilizate "i set!ri mai complexe, n maniera shell-ului Unix, dup! cum
se poate observa din liniile de mai jos:
<!--#set var="doc"
value="${DOCUMENT_URI}_${LAST_MODIFIED}" -->
<p>Informa#ii despre document: <!--#echo var="doc" -->

Directive condi"ionale
Serverul Apache permite folosirea directivelor condi#ionale if, else, elseif "i endif
(similare celor ale preprocesorului C) care pot controla procesarea documentelor Web n
func#ie de valorile unor variabile de mediu sau definite de programator.
Un exemplu care va trimite clientului un anumit fragment de cod HTML pe baza
informa#iilor despre limb!, testndu-se valoarea unei variabile-utilizator:
<p>Set!m variabila limba="ro".</p>
<!--#set var="limba" value="ro" -->
<!--#if expr="\"$limba\" = \"ro\"" -->
<p>Salut!</p>
...
<!--#else -->
<p>Hello!</p>
...
<!--endif -->

Forma general! a acestor directive este:

<!--#if
expr="condi"ie" -->
<!--#elseif expr="condi"ie" -->
<!--#else -->
<!--#endif -->

Drept condi"ie sunt permise urm!toarele:

un "ir de caractere - se evalueaz! la valoarea fals doar dac! este vid;

#ir1 operator #ir2 - se evalueaz! expresia, operatorii putnd fi

"=" (egal), "!=" (diferit), "<", "<=", ">" sau ">=";

G - 19

Tehnologii Web

condi"ie1 && condi"ie2 - este adev!rat! dac! ambele condi#ii sunt

condi"ie1 || condi"ie2 - este adev!rat! dac! m!car o condi#ie

adev!rate;
este adev!rat!.
De asemeni, sunt permise parantezele "i operatorul nega#ie (desemnat de caracterul "!").
Mai multe am!nunte pot fi ob#inute din documenta#ia original! a serverului Apache.

G - 20

Tehnologii Web

2. PHP (PHP: Hypertext Preprocessor)

PHP (PHP: Hypertext Preprocessor), cunoscut n versiunile mai vechi "i sub numele
de PHP/FI (Personal HomePage/Form Interpreter), ini#ial a fost gndit a fi o simpl!
aplica#ie CGI pentru interpretarea formularelor definite prin HTML "i procesate de un
program scris ntr-un limbaj (C, Perl, script shell), executat pe server. n cazul interfe#ei
CGI aveam nevoie de permisiunea de a rula programe pe server, ceea ce conducea uneori la
lacune n securitate "i n plus la disocierea de documentul HTML a programului care
procesa datele.
PHP (n versiunea curent! PHP 4.0) reprezint! un pachet puternic care ofer! un limbaj
de programare accesibil din cadrul fi"ierelor HTML, limbaj asem!n!tor cu Perl sau C,
avnd n plus suport pentru manipularea bazelor de date ntr-un dialect SQL
(dBASE, Informix, MySQL, mSQL, Oracle, PostgreSQL, Solid, Sybase, ODBC etc.) "i
acces la sisteme hipermedia precum Hyperwave. De asemeni, PHP suport! nc!rcarea
fi"ierelor de pe calculatorul client: upload (standard propus de E.Nebel "i L.Masinter de la
Xerox, descris n RFC 1867) "i ofer! suport pentru cookies (mecanism, pe care l vom
prezenta ulterior, de stocare a datelor n navigatorul client pentru identificarea utilizatorilor,
propus de Netscape).
Aceast! aplica#ie este disponibil! gratuit pe Internet, pentru medii Unix "i mai nou
pentru medii Windows (inclusiv sursele), integrndu-se n popularul server Apache. n fapt,
PHP reprezint! un server flexibil pentru dezvoltarea de aplica#ii Web sofisticate, al!turi de
altele comerciale, precum Lotus Domino, IBM WebSphere, Netscape Application Server sau Apple
WebObjects.
Istoria PHP-ului ncepe la sfr"itul anului 1994, cnd Rasmus Lerdorf dezvolt! prima
versiune, ca proiect personal. PHP este f!cut public n debutul anului 1995 sub denumirea
"Personal Home Page Tools", fiind considerat un analizor simplist care interpreta cteva
macrouri ce puteau fi incluse n cadrul documentelor HTML, permi#nd contorizarea
accesului la paginile Web sau accesarea unei c!r#i de oaspe#i (guestbook). Analizorul a fost
rescris n mijlocul aceluia"i an "i denumit PHP/FI versiunea 2.0, unde FI (Form
Interpreter) reprezenta o alt! aplica#ie scris! de Rasmus Lendorf, un interpretor de
formulare HTML. A fost ad!ugat "i suportul pentru bazele de date mSQL "i astfel PHP/FI
a nceput s! aib! succes, fiind disponibil gratuit pe Web. La sfr"itul lui 1996, se estima c!
PHP/FI era utilizat de cel pu#in 15000 de site-uri Web, iar n anul 1997 num!rul lor
ajungea la 50 de mii. Programatorii Zeev Suraski "i Andi Gutmans rescriu analizatorul PHP "i
noua aplica#ie formeaz! nucleul versiunii PHP 3 care a inclus o parte dintre vechile surse de
PHP/FI 2.0. Relativ recent, la nceputul anului 2000, a fost f!cut! public! versiunea
PHP 4.0, utiliznd puternicul motor de scriptare Zend "i oferind suport nu numai pentru
serverul Apache, ci "i pentru alte servere Web (i.e. IIS). De asemeni, PHP 4.0 ofer!
posibilitatea acces!rii documentelor XML via DOM ori SAX.
Se estimeaz! c! num!rul de site-uri folosind PHP este de peste un milion. Deja pe Web
exist! o multitudine de aplica#ii "i utilitare diverse concepute n PHP, care pot fi reg!site
grupate "i n a"a-numitul PEAR (PHP Extension and Add-on Repository).
n ceea ce urmeaz! vom prezenta numai o parte dintre facilita#ile oferite de PHP, f!r!
a inten#iona s! realiz!m un manual complet de programare "i de utilizare.

G - 21

Tehnologii Web

2.1 Caracterizare
Scripturile PHP pot fi incluse n paginile Web n diferite moduri, a"a cum arat! exemplul
de mai jos:
1.

<? echo ("cea mai simpl! cale de introducere...\n"); ?>

2.

<?php echo ("se utilizeaz! n cazul documentelor XML.\n"); ?>

3.

<script language="php">
echo ("anumite editoare nu accept! tag-uri necunoscute");
</script>

4.

<% echo ("op#ional se pot folosi tag-uri n stilul ASP"); %>

Comentariile pot fi scrise n stilul comentariilor din limbajele C, C++ sau

shell-urile Unix.
Preprocesorul PHP va determina construc#iile PHP delimitate ntre tag-urile de mai sus
"i le va interpreta, ignornd restul con#inutului documentului pe care l va trimite, la ie"irea
standard, nealterat. Astfel, putem privi analizorul PHP ca un script CGI care efectueaz! o
preprocesare special! nainte ca datele s! fie expediate clientului Web.
Instruc#iunile de control ale limbajului sunt cele uzuale din C (if, break, while "i
altele). Pentru instruc#iunea if, testul se evalueaz! ca fiind false "i n cazul n care rezultatul
expresiei de test va fi "irul vid ("") sau va fi "irul "0". Variabilele se declar! "din zbor",
tipul lor putnd fi de exemplu integer, double sau string, iar numele de variabile
trebuie precedat de caracterul "$". %irurile de caractere se pot delimita ntre ghilimele sau
apostroafe, n acest ultim caz inhibndu-se evaluarea variabilelor din interiorul "irului
respectiv (exact ca la script-urile bash).
Pot fi definite de asemeni "i tablouri (indexate sau asociative, ca n Perl). Exist!, de
asemeni, "i diverse variabile predefinite, mai ales cele specifice serverului Web, similare
variabilelor de mediu disponibile script-urilor CGI (e.g. $REMOTE_ADDR). Sunt permi"i
operatorii obi"nui#i ai limbajului C "i se pot defini "i func#ii utilizator (prin construc#ia
Function). Un operator specific PHP este cel de concatenare a "irurilor de caractere,
specificndu-se prin intermediul caracterului punct ".".
PHP pune la dispozi#ia programatorului "i o serie de constante predefinite
(ca de exemplu PHP_VERSION, TRUE "i FALSE).
Un exemplu de prelucrare a formularelor electronice
Puterea limbajului const! n manipularea facil! a formularelor, dup! cum vom vedea
n continuare.
Presupunem c! definim urm!torul formular folosit de utilizatori pentru a introduce
diverse impresii despre o pagin! Web personal!:

G - 22

Tehnologii Web

<html>
<head>
<title>Impresii</title>
</head>
<body text="blue" bgcolor="white">
<form action="add.php" method="POST" name="Form">
<table align="center" cellpadding="4">
<tr>
<td>
<p>Numele "i prenumele:</p>
</td>
<td>
<input type="text" name="nume">
</td>
</tr>
<tr>
<td>
<p>Ocupa#ia:</p>
</td>
<td>
<select name="ocupa#ia" size="1">
<option selected>Student</option>
<option>Elev</option>
<option>Cadru didactic</option>
<option>Altceva</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Vrsta:</p>
</td>
<td>
<p>
<input type="radio" value="sub 18"
name="virsta">sub 18 |
<input type="radio" value="18-25"
name="virsta" checked>18-25 |
<input type="radio" value="25-35"
name="virsta">25-35 |
<input type="radio" value="35-60"
name="virsta">35-60 |
<input type="radio" value="peste 60"
name="virsta">peste 60
</td>
</tr>
<tr>
<td>
<p>Adresa e-mail:</p>
</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
<p>Impresiile d-voastr!:</p>
</td>
<td>

G - 23

Tehnologii Web

<textarea name="impresii" rows="3" cols="60">

</textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Trimite">
</td>
<td>
<input type="reset" value="%terge">
</td>
</tr>
</table>
</form>
</body>
</html>

O posibil! completare a acestui formular este cea ilustrat! de figura de mai jos:

Completarea formularului pentru a fi trimis spre prelucrare programului PHP

Se cer utilizatorului numele, ocupa#ia, vrsta, adresa de e-mail "i impresiile care vor fi
procesate de programul (scriptul) PHP con#inut n fi"ierul add.php. Acesta ar putea
cuprinde urm!toarele:
<html>
<body text="blue" bgcolor="white">
<?
if(!$nume || !$email) { // nu s-au introdus numele sau adresa
?>
<h4 style="color: red" align="center">
Eroare: nu a#i specificat numele sau adresa!

G - 24

Tehnologii Web

</h4>"
<p align="center">Corecta#i
<a href="javascript:history.go(-1)">
formularul</a></p>
<?
}
else {
?>
<h4 style="color: green" align="center">
Formularul introdus
</h4>
<hr size="1" width="75%">
<?
// creaz! un mesaj pentru a fi expediat "i prin e-mail
$mesaj = "";
// data curent!
$mesaj .= "<impresie data=\"" . date("d M Y, G:i");
$mesaj .= "\" client=\"" . $REMOTE_HOST
. "(" . $REMOTE_ADDR . ")\">\n";
// concateneaz! numele, adresa, ocupa#ia "i impresiile
$mesaj .= "<nume email=\"" . $email . "\">" .
$nume . "</nume>\n";
$mesaj .= "<ocupatia>" . $ocupa#ia . "</ocupa#ia>\n";
$mesaj .= "<virsta>" . $virsta . "</virsta>\n";
// exist! impresii?
if ($impresii)
$mesaj .= "<text>\n" . $impresii .
"\n</text>\n</impresie>\n";
// trimite e-mailul (adresa, subiect, corp-mesaj, destinatar)
mail("busaco@infoiasi.ro", "Impresii",
$mesaj, "From: " . $email);
// scrie "i ntr-un fi"ier
$f = fopen("impresii.xml", "a");
if (!$f)
echo ("<p>Eroare la deschiderea fi"ierului!</p>");
else {
fputs($f, $mesaj);
fclose($f);
}
// scrie "i n pagin! (convertind NL cu <br>),
// dar tag-urile XML nu vor fi recunoscute de navigator
$mesaj_html = nl2br($mesaj);
echo ("<center>$mesaj_html</center>");
}
?>
<!-- final de pagin! -->
<hr size="1" width="75%">
</body>
</html>

Scriptul PHP va expedia prin po"ta electronic!, unui anumit utilizator, datele introduse
n formular, prin intermediul func#iei predefinite mail(), "i va genera un fi"ier
impresii.xml cuprinznd impresiile enun#ate de vizitatorii paginii. Un exemplu dintr-un
astfel de fi"ier XML este dat mai jos:

G - 25

Tehnologii Web

...
<impresie data="01 Nov 2000, 11:33"
client="fenrir.infoiasi.ro (193.231.30.197)">
<nume email="socrate@tuiasi.ro">Radu Filip</nume>
<ocupatia>Student</ocupatia>
<virsta>18-25</virsta>
<text>
Salut!...
Ce mai faci?
</text>
</impresie>
<impresie data="02 Nov 2000, 18:42"
client="localhost (127.0.0.1)">
<nume email="luminish@infoiasi.ro">Lumini#a Chiran</nume>
<ocupa#ia>Cadru didactic</ocupa#ia>
<virsta>25-35</virsta>
<text>
mi place, ns! cred c! ar fi trebuit s! pui "i ceva
referitor la adnotarea lingvistic! (e.g. TEI).
Lumini#a
</text>
</impresie>
...

Dup! cum se observ!, PHP ofer! un limbaj script puternic "i simplu, accesul la
cmpurile formularului realizndu-se prin intermediul unor variabile create automat.
n cazul cmpurilor checkbox ale unui formular, nu se creeaz! variabile dect pentru
cmpurile bifate. Dac! nu apare atributul value pentru un buton checkbox atunci valoarea
variabilei corespunz!toare lui va fi setat! automat pe "on".
Pentru a fi preprocesate de analizorul PHP, script-urile PHP pot avea extensia .php (sau
.phtml la PHP/FI sau .php3 la versiunea PHP 3.0), serverul Web (n cazul nostru
Apache) trebuind s! fie configurat astfel:
AddType application/x-httpd-php .php

n PHP exist! de asemeni o multitudine de func#ii predefinite (o serie fiind similare

func#iilor din bibliotecile standard ale limbajului C):

matematice;

de conversie;

de manipulare a "irurilor de caractere;

de prelucrare a tablourilor;

de acces la resursele sistemului de operare "i de lucru cu fi"iere;

de manipulare a bazelor de date;

privitoare la conexiunile Internet (HTTP, FTP);

pentru accesarea fi"ierelor avnd tipuri speciale: PDF, GIF, XML etc.;

specifice sistemului de operare;

generale.

G - 26

Tehnologii Web

Func"ionarea motorului PHP

2.2 Programare
Programare orientatorientat- obiect n PHP
Limbajul PHP, mai ales de la versiunea 4, ofer! implementarea unora dintre cele mai
importante aspecte ale program!rii obiectuale: ncapsularea datelor, mo"tenirea,
polimorfismul. Astfel, PHP d! posibilitatea programatorului s! exprime distinc#ia dintre
propriet!#ile generale "i cele specifice ale obiectelor cu care lucreaz!. Vom ilustra aceste
caracteristici prin cteva exemple concludente.
ncapsularea
ncapsularea datelor reprezint! un mecanism de protec#ie a membrilor de tip dat!,
accesul la ei realizndu-se exclusiv prin intermediul unor metode specifice "i nu n mod
direct. Acest lucru se realizeaz! prin intermediul claselor, dup! cum se poate remarca din
fragmentul de cod PHP de mai jos:
<?php
class Student {
// date-membru
var $year;
var $age;
var $name;

// an
// vrsta
// nume

// metode
function setYear($y) {
$this->year = $y;
}
function getYear() {
return $this->year;
}
...
}
?>

Datele-membru se definesc utiliznd var, putnd avea orice tip (ntreg, tablou sau chiar
obiect). Metodele se specific! prin declaratii de func#ii care prelucreaz! membrii clasei.
Pentru a accesa datele clasei, metodele vor trebui s! se foloseasc! de construc#ia
$this->variabila, altfel variabila se consider! a fi local! n cadrul acelei metode.
G - 27

Tehnologii Web

Vom crea un obiect prin operatorul new, exact ca n limbajul C++:

$stud = new Student;

Accesarea metodelor clasei se realizeaz! astfel:

$stud->setYear(4);
$student_year = $stud->getYear();

Din p!cate, membrii dat! ai clasei pot fi accesa#i direct, neputndu-i declara priva#i. La
fel, metodele nu pot fi specificate private sau protejate, a"a cum se ntmpl! la C++. Astfel,
PHP ofer! doar suport pentru ncapsulare, dar nu o poate impune.
Pentru func#iile membru, n loc de construc#ia sintactic! "->", n PHP 4 se permite
"::". Astfel, codul de mai sus este echivalent cu:
$student_year = $stud::getYear();

Mo!tenirea
Mo"tenirea reprezint! posibilitatea folosirii datelor sau metodelor definite n prealabil de
o anumit! clas! n cadrul unei clase derivate din prima. Rela#ia de derivare se specific! prin
cuvntul-cheie extends:
<?php
class GoodStudent extends Student {
// date-membru
var $prizes;
// premii
// metode
function setPrizes($p) {
$this->prizes = $p;
}
function getPrizes() {
return $this->prizes;
}
}
?>

Putem scrie urm!toarele linii:

$goodstud = new GoodStudent;
// apel de metod! din clasa de baz!
$goodstud->setAge(21);
// apel de metod! din clasa derivat!
$goodstud->setPrizes(2);

n PHP mo"tenirea multipl! nu este nc! posibil!. Nu putem avea, de exemplu:

class GreatStudent extends GoodStudent Genius {
...
}

Putem ns! redefini o metod! n clasa derivat!. n PHP 3, dac! declar!m un membru-dat!
n clasa derivat! avnd acela"i nume ca un membru-dat! al clasei de baz!, atunci nu mai
putem accesa membrul-dat! din clasa de baz!, el fiind "ascuns" de membrul-dat! al clasei
derivate. n PHP 4, pentru a accesa membri ai clasei p!rinte ne vom folosi de construc#ia
"::" (exact ca "i n C++).

G - 28

Tehnologii Web

Constructori
PHP permite specificarea constructorilor, ei fiind metode cu acela"i nume al clasei din
care apar#in, fiind apela#i automat atunci cnd instan#iem un obiect al clasei respective.
Putem avea de exemplu:
<?php
class Student {
// date-membru
var $year;
var $age;
var $name;

// an
// vrsta
// nume

// constructor
function Student($y, $a, $n) {
$this->year = $y;
$this->age = $a;
$this->name = $n;
}
// metode
function setYear($y) {
$this->year = $y;
}
function getYear() {
return $this->year;
}
...
}
?>

A"adar, acum se poate crea un obiect de genul:

$stud = new Student(3, 24, "Radu Filip");

Constructorii "i metodele, fiind func#ii PHP obi"nuite, pot avea specificate valori
implicite pentru argumente (ca n C++):
function Student($y = "4", $a = "22", $n = "")

Dac! scriem n acest mod constructorul, atunci n urm!toarele cazuri vom avea:
// year
$stud =
// year
$stud =
// year
$stud =

= 4, age = 22, name = ""

new Student();
= 2, age = 22, name = ""
new Student(2);
= 2, age = 20, name = ""
new Student(2, 20);

Atunci cnd un obiect al unei clase derivate este creat, numai constructorul lui propriu va
fi apelat, constructorul clasei de baz! nefiind apelat implicit. Dac! dorim ca "i constructorul
clasei p!rinte s! fie apelat, o vom face ntr-o manier! explicit!:
<?php
function GoodStudent {
$this->prizes = 3;
// apel explicit al constructorului clasei de baz!
$this->Student();
}
?>

G - 29

Tehnologii Web

Dac! n PHP 3, constructorii puteau avea drept orice tip de parametri, ncepnd cu
versiunea 4, tipurile permise pentru parametrii unui constructor sunt doar cele simple
(ntregi, "iruri de caractere), deci nu vor putea fi executate transmiteri de tablouri sau de
obiecte.
Dac! o clas! derivat! nu posed! propriul ei constructor, va fi apelat implicit
constructorul clasei p!rinte.
Mecanismul obiectual n PHP nu permite declararea destructorilor "i nici specificarea de
clase abstracte (de"i se pot imagina metode mai mult sau mai pu#in sofisticate pentru a le
simula).
Supranc#rcarea
Supranc!rcarea (asocierea de semantici diferite unei acelea"i func#ii pe baza tipurilor
parametrilor specifica#i) nu este suportat! nici ea. Putem ns! supranc!rca, indirect,
constructorii prin crearea de obiecte diferite n func#ie de num!rul de
argumente specificate:
<?php
class Student {
...
function Student() {
// contruim un "ir de apel
$method_name = "Student" . func_num_args();
$this->$method_name();
}
function Student1($x) {
// cod
}
function Student2($x, $y) {
// cod
}
...
}
?>

Vom putea scrie:

$stud1 = new Student('1');
// va apela Student1
$stud2 = new Student('1', '2'); // va apela Student2

Pentru a pasa un num!r variabil de parametri unei func#ii "i a-i folosi ulterior putem s!
ne slujim de func#iile predefinite func_get_args(), func_num_args() "i
func_get_arg().
Astfel, func#ia Student() de mai sus va putea afi"a to#i parametrii transmi"i prin
codul urm!tor:
function Student()
{
$args_array = func_get_args();
for ($i = 0; $i < count($args_array); $i++)
print ($i => $argument_array [$i]);
}

G - 30

Tehnologii Web

Polimorfismul
Polimorfismul reprezint! abilitatea unui obiect de a determina care metod! trebuie
invocat! pentru un obiect pasat ca argument n momentul rul!rii "i acest lucru se realizeaz!
foarte u"or n limbaje interpretate precum PHP.
Vom ilustra acest concept "i implementarea lui n PHP presupunnd c! avem o clas!
Figure desemnnd o figur! geometric! n care se defineste metoda draw() "i clasele
derivate Circle "i Square unde vom rescrie metoda draw() n func#ie de figura dorit! a
fi desenat!:
<?php
...
function drawing($obj) {
$obj->draw();
}
// coordonate
$circle = new
// coordonate
$square = new

// metoda clasei Board

centru "i raza

Circle(100, 100, 33);
stnga-sus "i latura
Square(100, 200, 74);

// afi"eaz! cele dou! figuri

$board = drawing($circle); // apeleaz! draw() din Circle
$board = drawing($square); // apeleaz! draw() din Square
...
?>

Serializarea
PHP nu suport! obiecte serializate (care "i p!streaz! starea "i func#ionalitatea de-a lungul
mai multor invoc!ri ale aplica#iei, prin intermediul stocarii ntr-un fi"ier/baz! de date "i
nc!rcarea lor ulterioar!). n PHP prin serializare (func#iile serialize() "i
unserialize()) se vor salva numai membrii-dat!, nu "i metodele, ns! putem serializa
tablouri asociative sau indexate, ceea ce reprezint! totu"i un avantaj.
Func"ii utile pentru manipularea obiectelor
ncepnd cu PHP 4, se pun la dispozi#ia programatorului o serie de func#ii folositoare:

get_class() va returna numele unui obiect, instan#! a unei clase;

get_parent_class() furnizeaz! clasa p!rinte din care provine un

method_exists() testeaz! dac! exist! o metod! pentru un anumit obiect

class_exists() testeaz! existen#a unei clase;

is_subclass_of() va determina existen#a unei rela#ii de mo"tenire

anumit obiect;
specificat;

dintre dou! clase.

O alt! facilitate este cea a transmiterii prin referin#! a parametrilor "i nu prin valoare,
cum se realizeaz! n mod implicit. Pentru a fi transmis prin referin#!, vom prefixa numele
acelui parametru cu caracterul ampersand "&".
G - 31

Tehnologii Web

2.3 Accesarea bazelor de date

Cele de mai sus ne permit s! definim un mecanism bazat pe obiecte pentru manipularea
informa#iilor din bazele de date SQL. Pentru a accesa o baz! de date (de oricare tip) va
trebui s! specific!m mul#imea minimal! de membri (date "i metode) pe care s! o
ncapsul!m ntr-o clas! general!:
class DataBase_SQL
// date-membru
var $Link_ID
=
var $Query_ID =
var $error
=

{
0; // identif. leg!turii cu o baz! de date
0; // identif. interog!rii active
0; // starea de eroare

// metode
function connect() { ... }
function query()
{ ... }
function next_record() { ... }
function num_rows() { ... }
}

Metoda query() verific! existen#a unui $Link_ID valid care s! pointeze spre o baz!
de date activ!. Dac! nu exist!, query() va apela connect() pentru a stabili o leg!tur! cu
serverul SQL. Execu#ia metodei query() va actualiza variabila $Query_ID "i metoda
next_record() va putea furniza nregistrarile g!site n urma invoc!rii interog!rii SQL.
Metoda num_rows() va returna num!rul total de rnduri ale tabelei.
Accesnd bazele de date prin clase, ne vine mult mai u"or s! realiz!m, de exemplu, dou!
interog!ri concurente asupra acelea"i tabele, prin instan#ierea obiectelor de mai jos:
$db1 = new DataBase_SQL;
$db2 = new DataBase_SQL;

Folosind cele de mai sus, putem concepe o clas! care s! ne faciliteze accesarea unei baze
de date MySQL. Astfel, vom defini clasa derivat!:
class DataBase_MySQL extends DataBase_SQL {
// date-membru
var $Host
= ""; // adresa serverului MySQL
var $DataBase = ""; // numele bazei de date de pe server
var $User
= ""; // numele utilizatorului
var $Password = ""; // parola utilizatorului
var $Link_ID
= 0; // rezultatul lui mysql_connect()
// rezultatul celei mai recente mysql_query()
var $Query_ID = 0;
// rezultatul curent al lui mysql_fetch_array()
var $Record
= array();
var $Row;
// num!rul rndului curent
var $Errno
var $Error

= 0; // starea de eroare a interog!rii

= "";

// metode
...
}

G - 32

Tehnologii Web

Pentru nceput trebuie s! scriem codul care stabile"te conexiunea cu serverul de baze de
date MySQL. n caz de e"ec, va trebui s! semnal!m acest lucru programului care
manipuleaz! o instan#! a clasei noastre. Vom furniza n continuare metoda connect()
care va utiliza func#ia auxiliar! halt():
// opre"te execu#ia n caz de eroare fatal!
function halt($msg) {
printf("<p>Database error: %s\n", $msg);
printf("<p>MySQL error: <b>%s (%s)</b>\n",
$this->Errno, $this->Error);
die("Session halted.");
}
// conectarea la baza de date
function connect() {
if ($this->Link_ID == 0) { // nc! nu exist! o conexiune
$this->Link_ID = mysql_connect($this->Host,
$this->User, $this->Password);
// succes sau e"ec?
if (!$this->Link_ID)
$this->halt("Connect failed");
// deschide baza de date
if (!mysql_query(sprintf("use %s", $this->DataBase), $this>Link_ID))
$this->halt("Cannot use database" . $this->DataBase);
}
}

Implementarea metodei query() poate fi urm!toarea:

// trimite o interogare serverului MySQL
function query($query_str) {
// realizeaz! conectarea...
$this->connect();
// ncearc! s! execute interogarea
$this->Query_ID = mysql_query($query_str, $this->Link_ID);
// ini#ial stabilim pointerul pe prima nregistrare
$this->Row
= 0;
// salveaz! erorile
$this->Errno
= mysql_errno();
$this->Error
= mysql_error();
// eroare fatal!?
if (!$this->Query_ID)
$this->halt("Invalid SQL: " . $query_str);
return $this->Query_ID;
}

Mai sunt necesare a fi specificate metodele next_record() "i seek():

// furnizeaz! dac! mai exist! o nregistrare
function next_record() {
// salveaz! ntr-un tablou nregistr!rile
$this->Record = mysql_fetch_array($this->Query_ID);
$this->Row++;
// salveaz! erorile
$this->Errno = mysql_errno();
$this->Error = mysql_error();

G - 33

Tehnologii Web

// returneaz! nregistrarea g!sit!

$stat = is_array($this->Record);
if (!$stat) {
// nu mai exist! o alt! nregistrare
mysql_free_result($this->Query_ID);
// se elibereaz! interogarea
$this->Query_ID = 0;
}
return $stat;
}
// furnizeaz! o nregistrare dup! pozi#ia ei
function seek($pos) {
$status = mysql_data_seek($this->Query_ID, $pos);
if ($status)
$this->Row = $pos;
return;
}

n acest moment putem s! realiz!m o interogare particular! asupra unei baze de date
MySQL con#innd informa#ii despre studen#i. Pentru aceasta trebuie s! complet!m
cmpurile $Host, $DataBase, $User "i Password. Vom utiliza o clas! derivat!
DataBase_Stud astfel:
class
var
var
var
var
}

DataBase_Stud extends DataBase_SQL {

$Host
= "localhost";
$User
= "busaco";
$Password = "";
$DataBase = "students";

Codul PHP pentru afi"area numelui "i vrstei tuturor studen#ilor din anul IV este
urm!torul:
<?php
// instan#ierea obiectului
$db = new DataBase_Stud;
// conectarea la serverul MySQL
$db->connect();
// formuleaz! interogarea
$query = "select name, age from students where year = 4";
$db->query($query);
?>
<html>
<body text="blue" bgcolor="white">
<h3 align="center">Studen#ii anului IV</h3>
<hr>
<!-- parcurgem toate nregistr!rile g!site -->
<?php while($db->next_record()) { ?>
<!-- Numele ngro"at -->
<p><b><?php print $db->Record["name"] ?></b></p>
<!-- Vrsta cu italice -->
<p><i><?php print $db->Record["age"] ?></i></p>
<hr>
<?php } ?>
</body>
</html>

G - 34

Tehnologii Web

Firesc, nainte de a utiliza acest script, trebuie s! cre!m o baz! de date MySQL pe care o
vom numi stud, iar n cadrul acesteia vom genera o tabel! students con#innd
informa#ii despre studen#i (omitem r!spunsurile sistemului dup! execu#ia fiec!rei
comenzi SQL):
$ mysql -h localhost -u busaco -p
Enter password: ********
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 1 to server version: 3.22.20a-log
Type 'help' for help.
mysql> create database stud;
mysql> use stud;
mysql> create table students(
-> year int(1),
-> name char(50),
-> age int(2),
-> id
char(4),
-> pic char(80)
-> );
mysql> create unique index stud_idx on students ( id );

Ultima linie construie"te un index pe baza cmpului de identificare a unui student (id),
index denumit stud_idx.
Deoarece sistemul de gestiune a bazelor de date lucreaz! n context multi-utilizator, va
trebui s! acord!m dreptul de acces asupra unei baze de date (de exemplu, pentru selec#ia,
inserarea "i "tergerea de nregistr!ri) prin intermediul comenzii SQL grant. Pentru ca
utilizatorul busaco s! se poat! conecta la baza de date de pe sistemul local "i s! poat!
executa comenzile SQL select, insert "i delete vom scrie:
mysql> grant usage on stud.* to busaco@localhost;
mysql> grant select, insert, delete on stud.* to busaco@localhost;

n figura de mai jos putem observa opera#iunile efectuate n cadrul unei tranzac#ii de date
ntre navigator "i serverul Web, utilizndu-se "i un server MySQL:

Executarea unei interog#ri SQL ntr-un script PHP

G - 35

Tehnologii Web

Pa"ii efectua#i sunt:

1.

Ini#ierea de c!tre navigator a unei conexiuni HTTP cu serverul Web;

2.

Preprocesarea codului PHP de c!tre motorul PHP;

3.

Trimiterea interog!rii SQL con#inute de codul PHP spre serverul MySQL;

4.

Returnarea rezultatelor interog!rii SQL;

5. Returnarea de c!tre motorul PHP a codului HTML, n urma proces!rii

ntregului program PHP;
6.

Trimiterea documentului HTML spre navigatorul Web.

n cadrul clasei DataBase_MySQL mai putem implementa urm!toarele metode utile:

// num!rul de nregistr!ri g!site
function num_rows() {
return mysql_num_rows($this->Query_ID);
}
// num!rul de cmpuri
function num_fields() {
return mysql_num_fields($this->Query_ID);
}
// valoarea unui cmp particular
function get_field($field) {
return $this->Return[$field];
}

Se pot imagina, de asemeni, clase similare "i pentru alte sisteme de management al
bazelor de date (e.g. PostgreSQL, Oracle, ODBC).

2.4 PHP i XML

Am v!zut mai sus cum putem genera, extrem de u"or, documente XML pe baza unor
date introduse de utilizator. n continuare ne vom ocupa de mai multe modalit!#i de
prelucrare a fi"ierelor XML, astfel nct datele s! poate fi afi"ate de orice navigator Web.
Pentru a procesa documentele XML n cadrul programelor PHP, va trebui s! avem la
dispozi#ie un analizor XML instalat pe server, de exemplu un procesor SAX sau DOM.
Utilizarea lui Expat
Elaborat de James Clark, procesorul Expat este deja ncorporat n serverul Apache
ncepnd cu versiunea 1.3.9, iar n PHP este inclus de la versiunea 3.0.6. Analiza XML este
bazat! pe evenimente, fiecare tip de nod al arborelui asociat documentului XML
declan"nd un anumit eveniment care va trebui tratat de o func#ie definit! de programator.
Pentru a ata"a func#ii evenimentelor XML, ne vom folosi de o serie de func#ii predefinite:
xml_set_element_handler() stabile"te func#iile care vor fi apelate

pentru procesarea elementelor XML (pentru tag-urile de nceput "i de sfr"it);

xml_set_character_data_handler() stabile"te func#ia care va fi

xml_set_processing_instruction_handler() define"te func#ia

apelat! atunci cnd analizorul ntlne"te un nod de tip CDATA (text);

care va fi executat! la apari#ia unei instruc#iuni de procesare.

G - 36

Tehnologii Web

Alte func#ii importante puse la dispozi#ie sunt:

xml_parser_create() ini#ializeaz! analizorul XML "i returneaz!

xml_parser_free() elibereaz! memoria alocat! analizorului;

o instan#! a sa;
xml_set_object() stabile"te adresele func#iilor care vor fi utilizate de

analizor pentru a realiza procesarea documentului XML dorit;

xml_parser_set_option() se folose"te la setarea unor op#iuni de

xml_get_error_code()

analiz! XML (e.g. modul de tratare a scrierii cu majuscule sau minuscule

a tag-urilor);
furnizeaz!

codul

de

eroare

urma

e"ecului proces!rii.
Pot fi amintite, de asemeni, func#iile dnd mai multe am!nunte despre erorile survenite
n timpul analizei: xml_error_string() "i xml_get_current_line_number().
Func#ia xml_parse() returneaz!, n caz de e"ec, o serie de coduri de eroare ale c!ror
constante simbolice predefinite pot fi consultate n manualul PHP.
Vom defini o clas! pe care o vom folosi ulterior la procesarea documentelor XML
(vom salva acest cod n fi"ierul parseXML.php).
<?php
// o clas! pentru prelucrarea documentelor XML
class parseXML {
var $xml_parser; /* instan#a analizorului XML */
var $xml_file;
/* numele fi"ierului XML */
var $html_code; /* codul HTML generat */
var $open_tags; /* mul#imea tag-urilor de nceput */
var $close_tags; /* mul#imea tag-urilor de sfr"it */
// constructor
function parseXML() {
$this->xml_parser = "";
$this->xml_file = "";
$this->html_code = "";
$this->open_tags = array();
$this->close_tags = array();
}
// destructor
function destroy() {
if ($this->xml_parser)
xml_parser_free($this->xml_parser);
}
// metode
// seteaz! tag-urile de nceput
function set_open_tags($tags) {
$this->open_tags = $tags;
}
// seteaz! tag-urile de sfr"it
function set_close_tags($tags) {
$this->close_tags = $tags;
}
// seteaz! numele fi"ierului XML
function set_xml_file($file) {
$this->xml_file = $file;
}

G - 37

Tehnologii Web

// furnizeaz! codul HTML generat

function get_html_code() {
return $this->html_code;
}
// tratarea evenimentului de
// apari#ie a unui tag de nceput
function start_element($parser, $name, $attrs) {
if ($format = $this->open_tags[$name])
$this->html_code .= $format;
}
// tratarea evenimentului de
// apari#ie a unui tag de sfr"it
function end_element($parser, $name) {
if ($format = $this->close_tags[$name])
$this->html_code .= $format;
}
// tratarea evenimentului de
// apari#ie a unui element de tip CDATA
function character_data($parser, $data) {
$this->html_code .= $data;
}
// tratarea evenimentului de
// apari#ie a unei instruc#iuni de procesare
function processing_instruction($parser, $target, $data) {
switch (strtolower($target)) {
case "php": eval($data);
break;
}
}
// func#ia de analiz! propriu-zis!
function parse() {
// instan#iaz! procesorul XML
$this->xml_parser = xml_parser_create();
// nregistreaz! func#iile de analiz!
xml_set_object($this->xml_parser, &$this);
// seteaza op#iunile de analiz!
// (tag-urile nu sunt rescrise cu caractere mari)
xml_parser_set_option($this->xml_parser,
XML_OPTION_CASE_FOLDING, false);
// seteaz! func#iile de procesare a elementelor XML
xml_set_element_handler($this->xml_parser,
"start_element", "end_element");
xml_set_character_data_handler($this->xml_parser,
"character_data");
xml_set_processing_instruction_handler($this->xml_parser,
"processing_instruction");
// deschide fi"ierul XML
if (!($fp = fopen($this->xml_file, "r")))
die("could not open XML source");
// proceseaz! fi"ierul
while ($data = fread($fp, 4096)) {
if (!xml_parse($this->xml_parser, $data, feof($fp))) {
// eroare de procesare
die(sprintf("XML error: %s at line %d",
xml_error_string(xml_get_error_code($this->xml_parser)),
xml_get_current_line_number($this->xml_parser)));

G - 38

Tehnologii Web

}
} /* while */
} /* parse() */
} /* class */
?>

Folosind aceast! clas!, putem transforma un document XML n cod HTML, dup! cum
se poate remarca din exemplul de mai jos, unde va fi prelucrat fi"ierul cu impresii despre un
anumit site Web (vezi exemplul de la nceputul sub-capitolului) "i va fi generat un tabel
HTML:
<?php
// necesit! prezen#a clasei definite mai sus
require("parseXML.php");
// substitu#ia tag-urilor XML cu cod HTML
// se folosesc dou! tablouri asociative
$open_tags = array(
"impresii" => "\n<!-- generat de parseXML -->\n" .
"<table cellpadding=\"5\" align=\"center\" border=\"1\">",
"impresie" => "<tr align=\"center\">",
"nume" => "<td><h4>",
"ocupatia" => "<td><p style=\"color: blue\">",
"virsta" => "<td><p><i>",
"text" => "<td bgcolor=\"#EEEEEE\"><p align=\"justify\">");
$close_tags = array(
"impresii" => "</table>\n" .
"<!-- sfr"itul gener!rii parseXML -->\n",
"impresie" => "</tr>",
"nume" => "</h4></td>",
"ocupatia" => "</p></td>",
"virsta" => "</i></p></td>",
"text" => "</p></td>");
// instan#iaz! "i ini#ializeaz! analizorul
$parser = new parseXML();
$parser->set_xml_file("impresii.xml");
$parser->set_open_tags($open_tags);
$parser->set_close_tags($close_tags);
// ruleaz! analizorul
$parser->parse();
// afi"eaz! rezultatul
echo $parser->get_html_code();
// distruge obiectul
$parser->destroy();
?>

Clasa definit! este suficient de general! pentru a putea fi utilizat! pentru orice tip de
document XML. Tag-urile netratate de programul nostru vor fi ignorate.
De multe ori ns! ar fi de dorit s! realiz!m anumite prelucr!ri asupra datelor stocate de
fi"ierele XML. Putem nc! s! ne slujim de parseXML. De exemplu, am dori ca utilizatorul
(sau autorul site-ului) s! poat! trimite mesaje celor care "i-au l!sat impresiile. Pentru aceasta
vom defini o clas! derivat! din clasa parseXML "i vom redefini func#iile
start_element() "i end_element():

G - 39

Tehnologii Web

<?php
require("parseXML.php");
// folosirea mo"tenirii pentru a defini
// un alt comportament
class parseXML2 extends parseXML {
// indic! dac! exist! atributul "email"
var $is_email = 0;
// redefinirea metodelor
function start_element($parser, $name, $attrs) {
// apeleaz! metoda din clasa de baz!
parseXML::start_element($parser, $name, $attrs);
// pune "i link spre adresa e-mail
if (!strcmp($name, "nume")) {
if ($attrs["email"]) {
$format = "<a title=\"Trimite mesaj la " .
$attrs["email"] .
"\" href=\"mailto:" . $attrs["email"] . "\">";
$this->html_code .= $format;
$this->is_email = 1;
}
else
$this->is_email = 0;
}
}
function end_element($parser, $name) {
// nchide
if (!strcmp($name, "nume")) {
if ($this->is_email) {
$format = "";
$this->html_code .= $format;
}
}
// apeleaz! metoda din clasa de baz!
parseXML::end_element($parser, $name);
}
}
?>

Noul membru de tip dat! is_email este folosit pentru a putea nchide corect tag-urile
elementului <a> (se poate ntmpla ca atributul email s! nu apar!). Restul codului r!mne
acela"i, n loc de $parser = new parseXML() trebuind fi scris! linia
$parser = new parseXML2().
O posibil! rulare a scriptului PHP de mai sus poate avea ca efect urm!toarea
pagin! Web:

G - 40

Tehnologii Web

Afi!area datelor XML prin utilizarea procesorului expat

Desigur, dac! facem numai prelucr!ri asupra documentelor XML, ne putem dispensa de
definirea celor dou! tablouri asociative open_tags[] "i close_tags[], iar n func#iile
startElement() "i endElement() putem insera orice cod dorim.
Utiliznd tehnicile descrise mai sus, studen#ii Constantin Gheorghi"!, Valentin P!sc!reanu "i
Dan %orin au realizat o aplica#ie Web bazat! pe PHP pentru managementul lucr!rilor de
licen#! la Facultatea de Informatic!. Varianta curent! este opera#ional! la adresa
http://students.infoiasi.ro/~licenta. Datele referitoare la licen#! sunt stocate ntr-un
fi"ier XML avnd formatul de mai jos (l!s!m cititorului pl!cerea de a construi DTD-ul
pentru validarea acestui document):
<database>
<record>
<!-- Numele "i contul studentului -->
<stud cont="..."> ... </stud>
<!-- Numele "i contul coordonatorului -->
<prof cont="..."> ... </prof>
<!-- Tema lucr!rii de licen#! -->
<tema> ... </tema>
<!-- Descrierea (op#ional!) a temei -->
<desc> ... </desc>
<!-- Leg!turi (URI-uri) relevante -->
<link> ... </link>
...
</record>
</database>

G - 41

Tehnologii Web

PHP !i libxml
PHP 4.0 include analizorul libxml elaborat de Daniel Veillard "i integrat n motorul
PHP de Uwe Steinman (vezi "i capitolul referitor la DOM). PHP func#ioneaz! cu
libxml-2.0.0 sau o versiune superioar!.
Arborele abstract asociat unui document XML va putea fi creat de una dintre func#iile:

xmldoc() - va genera arborele pornind de la un "ir de caractere

xmldocfile() - va nc!rca un document XML de pe disc "i va construi

new_xmldoc() - va genera un arbore vid.

reprezentnd un document XML;

arborele;
Arborele DOM va fi reprezentat n PHP printr-un obiect apar#innd clasei speciale
"DOM document" avnd propriet!#ile doc (resurs!), version ("ir de caractere,
"1.0" n prezent) "i type (ntreg lung). Sunt puse la dispozi#ie urm!toarele metode:

root() - returneaz! nodul r!d!cin! al arborelui DOM;

addroot() - adaug! un nod r!d!cin! la un arbore vid creat de

new_xmldoc();
dtd() - returneaz! un obiect apar#innd clasei DTD, care nu posed!
metode, ci numai membrii-dat! name (numele elementului r!d!cin! al
documentului XML), sysid (con#ine un identificator sistem al DTD-ului asociat
documentului, e.g. impresii.dtd) "i extid (reprezint! un identificator extern);

dumpmem() - converte"te n "ir de caractere reprezentarea intern! a

arborelui DOM.
Un script PHP care va genera documentul XML:
<?xml version="1.0" ?>
<nume>Sabin-Corneliu Buraga</nume>

va fi urm!torul:
// un nou arbore DOM
$doc = new_xmldoc("1.0");
// insereaz! nodul-r!d!cin!
$root = $doc->add_root("nume");
// adaug! nodului un con#inut
$root->content = "Sabin-Corneliu Buraga";
// afi"eaz! documentul XML generat
print (htmlspecialchars($doc->dumpmem()));

Dup! cum se poate remarca, putem foarte u"or construi prin program documente sau
fragmente de documente XML, ceea ce nu se putea cu expat.
Dup! cum am v!zut, n cadrul modelului DOM orice component! a unui document
XML va fi reprezentat! prin intermediul unui nod al arborelui asociat. Un obiect de tip nod
va avea metodele:

G - 42

Tehnologii Web

parent() - desemneaz! nodul p!rinte al nodului curent;

children() - returneaz! nodurile copii ale nodului curent;

attributes() - furnizeaz! atributele asociate unui nod de tip element;

new_child() - genereaz! un nod copil;

getattr() - returneaz! valoarea unui atribut, dac! exist!;

setattr() - modific! valoarea unui atribut.

Sunt disponibile "i urm!torii membri-dat!:

type - desemneaz! tipul de nod; pentru o manevrare mai facil! a tipurilor

nodurilor sunt predefinite constantele de mai jos:

Constant#

Valoare

XML_ELEMENT_NODE

XML_ATTRIBUTE_NODE

XML_TEXT_NODE

XML_CDATA_SECTION_NODE

XML_ENTITY_REF_NODE

XML_ENTITY_NODE

XML_PI_NODE

XML_COMMENT_NODE

XML_DOCUMENT_NODE

XML_DOCUMENT_TYPE_NODE

10

XML_DOCUMENT_FRAG_NODE

11

XML_NOTATION_NODE

12

Constantele predefinite desemnnd tipurile de noduri DOM

Aceste constante se pot folosi "i n programele C folosind biblioteca libxml.

name - reprezint! numele nodului (e.g. numele unui element XML);

content - desemneaz! con#inutul unui anumit nod (dac! exist!).

Pentru a parcurge ntreg arborele de noduri sau numai p!r#i din el ne putem folosi de
xmltree(), func#ie care va analiza documentul XML dat ca parametru (sub form! de "ir

de caractere) "i va returna o structur! de obiecte PHP reprezentnd acel document. Aceast!
structur! nu va putea fi ns! modificat!.
Ca alternativ! la metodele descrise mai sus, exist! solu#ia oferit! de Apache Cocoon, suit!
de servlet-uri Java care realizeaz! transform!ri XSL asupra documentelor XML.

G - 43

Tehnologii Web

2.5 Exemple
n continuare, vom ilustra o serie dintre facilit!#ile puse la dispozi#ie de serverul de
aplica#ii PHP prin intermediul exemplific!rilor de mai jos:
a. Vizualizarea unei colec#ii de imagini. Utilizatorul are la dispozi#ie imaginile la
rezolu#ie sc!zut! (thumbnails) "i poate opta s! vizualizeze imaginea dorit! la rezolu#ie
nalt!. Scriptul PHP, preluat din colec#iile PEAR, este urm!torul:
<?
// vom avea dou! directoare cu imagini
// unul cu imaginile la rezolu#ie sc!zut! (GIF-uri)
// THUMBNAIL DIRECTORY
$path = "thumbnails";
// altul cu imaginile la rezolu#ie nalt! (JPEG-uri)
// IMAGE DIRECTORY
$path2 = "images";
// num!rul de imagini pe un rnd
$clm = "9";
// l!#imea unui thumbnail
$t_w = "48";
// n!l#imea unui thumbnail
$t_h = "43";
// num!rul de imagini pe o linie de tabel
$count = 1;
$break = $clm;
?>
<!-- se includ imaginile ntr-un tabel -->
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<?
// se caut! n directorul "path" imaginile GIF...
$d = dir("$path");
while ($entry = $d->read()) {
/* cite"te intr!rile din director */
if ($entry == ".")
{
echo ""; /* directorul curent, nu este imagine */
}
elseif ($entry == "..")
{
echo ""; /* directorul p!rinte */
}
else
{
ClearStatCache();
/* furnizeaz! dimensiunile imaginii */
$size = GetImageSize("$path2/$entry");
$width = $size[0] + 10;
$height = $size[1] + 20;
/* furnizeaz! dimensiunea fi"ierului */
$file_size = fileSize("$path2/$entry");

G - 44

Tehnologii Web

$file_size = round($file_size / 1000) . "k";

/* afi"eaz! o celul! de tabel
con#innd imaginea utilizeaz! JavaScript
pentru afi"area imaginii la rezolu#ie nalt! */
echo "<td>
<a href=\"#\"
onMouseOver=
\"window.status='$entry $size[0]x$size[1]';
return true;\"
onMouseOut=\"window.status=''; return true\"
onclick=\"window.open('$path2/$entry','pix$count',
'width=$width,height=$height,
directories=no,location=no,
menubar=no,scrollbars=no,
status=yes,toolbar=no,resizable=no,
top=10,left=10,screenX=10,screenY=10');
return false\">
<img src=$path/";echo $entry." border=0
width=$t_w height=$t_h>
</a>
<br>
<center>
<font size=2>$file_size</font>
</center>";
/* s-a ajuns la maximul de imagini pe o linie? */
if ($count == $break)
{
echo "</td>\n</tr>\n<tr>\n";
$break = $count + $clm - 2;
}
else
{ echo "</td>\n"; }
}
$count++;
}
/* nchide directorul */
$d->close();
?>
<!-- nchide tag-urile tabelului -->
</tr>
</table>

b. n acest exemplu vom urm!ri s! list!m o list! de c!r#i, cu posibilitatea

sort!rii dup! mai multe criterii (titlu, editur!, ISBN etc.). Astfel, vom vedea cum
putea manipula tablourile asociative "i cum furniz!m scriptului PHP parametrii
necesari pentru ordonare.
Solu#ia implementat! de studen#ii Victor Grigoriu "i Ovidiu Ursachi va apela la
cadrele HTML pentru a separa interac#iunea cu utilizatorul (ancore la ap!sarea
c!rora se va invoca scriptul pentru a sorta datele conform unui criteriu) de pagina
de vizualizare a tabloului generat automat.
Astfel, avem urm!toarea structur! de cadre:

G - 45

Tehnologii Web

<html>
<head>
<title>Lista c!r#ilor</title>
</head>
<frameset rows="60, *" border="0">
<frame src="sus.html" name="sus" />
<frame src="cartilist.php" name="jos" />
</frameset>
</html>

Fi"ierul sus.html va con#ine apelurile de script conform dorin#ei utilizatorului

de a vedea c!r#ile ordonate n func#ie de un anumit criteriu:
<html>
<head></head>
<body bgcolor="white" text="blue"
link="blue" vlink="blue">
<table width="600">
<!-- Criteriile de sortare -->
<tr align="center">
<td width="25%">
<a href="cartilist.php?sort=titlu"
target="jos">Titlu</a>
</td>
<td width="25%">
<a href="cartilist.php?sort=autor"
target="jos">Autor</a>
</td>
<td width="25%">
<a href="cartilist.php?sort=editura"
target="jos">Editura</a>
</td>
<td width="25%">
<a href="cartilist.php?sort=isbn"
target="jos">ISBN</a>
</td>
</tr>
</table>
</body>
</html>

Codul PHP pentru citirea datelor din fi"ier "i realizarea ordon!rilor este
urm!torul:
<html>
<head>
<?php
// func#iile de sortare
function titsort($a, $b) {
return strcmp($a->Titlu, $b->Titlu);
}
function autsort($a, $b) {
return strcmp($a->Autor, $b->Autor);
}
function edisort($a, $b) {
return strcmp($a->Editura, $b->Editura);
}
function isbsort($a, $b) {

G - 46

Tehnologii Web

return strcmp($a->iSBN, $b->iSBN);

}
// structura de date
class carte {
var $Titlu;
var $Autor;
var $Editura;
var $iSBN;
}
// citirea din fi"ier
$fin = fopen("http://localhost/books/carti.dat", "r");
if (!$fin)
die("Eroare la deschiderea fisierului");
$c = new carte;
$i = 0;
$carti = array();
while (!feof($fin)) {
$c->Titlu = fgets($fin, 128);
$c->Autor = fgets($fin, 128);
$c->Editura = fgets($fin, 128);
$c->iSBN = fgets($fin, 128);
// memoreaz! ntr-un tablou de clase
array_push($carti, $c);
$i++;
}
// stabile"te criteriul de sortare
if ($sort == "titlu") {
usort($carti, titsort);
}
else
if ($sort == "autor") {
usort($carti, autsort);
}
else
if($sort == "editura") {
usort($carti, edisort);
}
else
if($sort == "isbn") {
usort($carti, isbsort);
}
?>
</head>
<body bgcolor="white" text="blue">
<table width="600" border="1" cellspacing="0"
style="border: solid thin navy">
<?php
$i=0;
while (list($key, $car) = each($carti)) {
// liniile impare vor avea fundal gri
if ($i % 2)
echo "<tr align=\"center\">";
else
echo "<tr align=\"center\" bgcolor=\"#EEEEEE\">";
// scrie datele
echo "<td width=\"25%\"><i>" . $car->Titlu . "</i></td>";

G - 47

Tehnologii Web

echo "<td width=\"25%\"><b>" . $car->Autor . "</b></td>";

echo "<td width=\"25%\">" . $car->Editura . "</td>";
echo "<td width=\"25%\">" . $car->iSBN . "</td>";
echo "</tr>";
$i++;
}
?>
</table>
<hr size="1">
<?php
echo "<p>nregistr!ri afi"ate: <b>$i</b></p>";
?>
</body>
</html>

Dup! cum se remarc!, PHP permite ca fi"ierul s! se poat! prelucra de la distan#!,

n loc de a da calea de directoare programatorul putnd specifica un URL.

Lista de c#r"i sortat# dup# autor

c. Pentru a ilustra ac#iunea de upload a unui fi"ier de server, vom presupune c!

n cadrul unui formular vom solicita diverse informa#ii despre studen#i (matricol,
nume, vrsta, an "i fotografia), stocndu-le ntr-o baz! de date MySQL (vezi "i
exemplul referitor la accesarea bazelor de date prin clase). n baza de date vom
memora numai numele fi"ierului, el fiind stocat pe disc.
La o ac#iune de upload nregistrat! cu succes, vor fi setate variabilele:

G - 48

Tehnologii Web

$userfile stocheaz! numele fi"ierului temporar creat pe server n

$userfile_name

urma transferului;
care a fost transmis;

reprezint!

numele

original

al

fi"ierului

$userfile_size desemneaz! dimensiunea fi"ierului (n octe#i);

procesul de upload al unor fi"iere de dimensiuni mari poate fi controlat
incluznd un cmp ascuns denumit MAX_FILE_SIZE a c!rui valoare va fi
num!rul maxim de bytes ce pot fi transfera#i:
<input type="hidden"
name="MAX_FILE_SIZE" value="50000">

$userfile_type furnizeaz! tipul MIME al fi"ierului transferat

(i.e. image/gif).

De men#ionat faptul c! userfile va fi nlocuit de procesorul PHP cu numele

cmpului de tip file al formularului de upload (n exemplul de mai jos, am ales
denumirea pic).
Formularul, scris n fi"ierul add_stud.php este urm!torul, cmpurile de intrare
avnd acelea"i nume "i lungime ca "i cmpurile bazei de date:
<form enctype="multipart/form-data"
method="post"
action="<?php echo $PHP_SELF ?>">
<p>Numele:
<input type="text" name="name" size="50">
<p>Anul:
<input type="text" name="year" size="1">
<p>Vrsta:
<input type="text" name="age" size="2">
<p>Matricol:
<input type="text" name="id" size="4">
<p>Fotografie:
<input type="file" name="pic" size="80">
<br><br>
<input type="submit" name="submit"
value="Upload">
</form>

Atributul enctype="multipart/form-data" specific! faptul c! datele

trimise spre serverul Web vor fi compuse din diferite tipuri MIME (n afar! de
valorile text obi"nuite ale cmpurilor, fi"ierul imagine poate fi de tip image/gif
sau image/jpeg).
Valoarea atributului action="<?php echo $PHP_SELF ?>" reprezint!
execu#ia unui script PHP care afi"eaz! toate datele transmise la ap!sarea butonului
etichetat "Upload". Ca metode de transfer, PHP accept! "POST" "i "PUT".
Dup! codul formularului HTML putem scrie scriptul care prelucreaz!
informa#iile furnizate, introducndu-le n baza de date:

G - 49

Tehnologii Web

<?php
if ($submit) {
// conectare la serverul MySQL
$db = mysql_connect("localhost","busaco","");
// deschide baza de date
mysql_select_db("students",$db);
// execut! SQL
$sql = "INSERT INTO students (year, name, age, id, pic) "
. "VALUES ('$year, $name, $age, $id, $pic')";
// copie fi"ierul primit (se execut! o comand! Unix)
exec("cp $pic /home/busaco/html/images/$pic_name");
// afi"eaz! datele
echo "Anul: $year<br>\n";
echo "Numele: $name<br>\n";
echo "Matricol: $id<br>\n";
echo "Fi"ierul temporar: $pic<br>\n";
echo "Numele imaginii: $pic_name<br>\n";
echo "Lungimea imaginii: $pic_size<br>\n";
echo "Tipul: $pic_type<br>\n";
echo "<br><br>\n";
echo "<img src=\"images/$pic_name\" alt=\"$name\"><br>\n";
}
?>

Desigur, directorul images va trebui s! aib! setate permisiunile de scriere

corespunz!toare.
Pentru a face upload la mai multe fi"iere, va trebui s! scriem numele de cmpuri
de tip file ca tablouri:
Fotografia ta: <input name="pic[]" type="file"><br>
Fotografia mamei: <input name="pic[]" type="file">

Vor fi create tablourile pic_name[],

corespunz!toare fi"ierelor transmise.

pic_size[],

pic_type[]

d. Un script PHP care afi"eaz! n fereastra navigatorului lista fi"ierelor .html

dintr-un director, ata"nd la numele acestora "i ancore, n plus furniznd lungimea
n octe#i a fi"ierului, data cre!rii "i autorul acestuia, dac! fi"ierul respectiv con#ine
un tag <meta name="author" content="...">.
Programul este urm!torul:
<p>La URL-ul "<tt>http://<?echo $SERVER_NAME ?>/</tt>"
exist! urm!toarele fi"iere <tt>.html</tt>:</p>
<hr>
<ul>
<? /* se parcurge directorul
(n acest caz directorul curent) */
$dir = opendir(".");
while ($file = readdir($dir)) {
/* se verific! dac! este fi"ier ordinar
"i are extensia .html */
if (is_file($file) && substr($file,-1) == "l"
&& strstr($file, ".html")) {
echo "<li><a href=\"$file\">$file</a>";
/* se stocheaz! ntr-un tablou asociativ
informa#iile despre fi"ier */
$filestat = stat($file);

G - 50

Tehnologii Web

/* dimensiunea */
echo " - $filestat[7] bytes ";
/* data, convertit! din timpul Unix n elemente
ale tabloului asociativ 'filedate' */
$filedate = getdate($filestat[9]);
/* folosim func#ia de formatare a datei "i timpului */
printf("<i>%02d-%02d-%d %02d:%02d:%02d</i>",
$filedate["mday"], $filedate["mon"], $filedate["year"],
$filedate["hours"], $filedate["minutes"],
$filedate["seconds"]);
/* se extrag toate <meta> din fi"ier */
$metatags = get_meta_tags($file);
/* se verific! dac! exist! <meta name="author" ...> */
if (isset($metatags["author"])) {
/* afi"!m "i autorul */
echo "<ul>Author: ";
echo $metatags["author"];
echo "</ul>";
}
}
}
/* se nchide directorul */
closedir($dir);
?>
</ul>

O ipostaz! a execu#iei scriptului este dat! mai jos:

Execu"ia scriptului PHP !i vizualizarea listei de fi!iere HTML

G - 51

Tehnologii Web

e. Vom prezenta n continuare un site Web complet care folose"te tehnologia

PHP,
"i
anume
site-ul
studen#ilor
Faculta#ii
de
Informatic!:
http://students.infoiasi.ro. Concep#ia, implementarea "i administrarea sunt
realizate de studentul Radu Filip.
n crearea site-ului au fost folosite exclusiv aplica#ii GNU (software free), precum
editorul de text din managerul de fi"iere Midnight Commander (n mod consol!) "i
programul de procesare grafic! GIMP, sub sistemul de operare Linux.
Toate paginile din componen#a site-ului au fost generate dinamic prin utilizarea
preprocesorului PHP versiunea 3 "i ulterior rescrise pentru PHP 4. Unul dintre
modulele implementate con#ine defini#ia unei clase (dup! cum am v!zut, limbajul
PHP permite programarea orientat! pe obiecte, dar pe baza unui model mai
simplificat fa#! de C++/Java) descriind layout-ul unui limbaj de programare
oarecare (din perspectiva a ce este nevoie n meniul site-ului). Instan#ieri ale acestei
clase pentru diversele limbaje de programare sunt memorate folosind un tablou de
limbaje. Separat, exist! un alt tablou al leg!turilor "i al descrierilor lor. Prin afi"area
acestora cu un anume layout de limbaj ales de utilizator rezult! layout-ul final n care
este afi"at meniul site-ului Web. Fiecare limbaj "i fiecare leg!tur! sunt descrise exact
o singur! dat!. Ad!ugarea ori eliminarea ulterioar! de layout-uri de limbaje de
programare sau de leg!turi nu necesit! nici un fel de modific!ri conexe. Caracterul
complet dinamic al site-ului students.infoiasi.ro este conferit de
asamblarea acestor seturi de date.
O alt! facilitate cu caracter dinamic o constituie detectarea n mod automat a
limbii implicite de afi"are (limba romn! pentru vizitatorii din Romnia, respectiv
limba englez! pentru vizitatorii str!ini). Utilizatorul poate alege oricnd cealalt!
limb! de afi"are, aceast! schimbare avnd caracter permanent.

Site-ul students.infoiasi.ro

G - 52

Tehnologii Web

Alte componente generate n mod dinamic sunt:

includerea unor stiluri CSS diferite n func#ie de browser;

un formular de selectare a layout-ului cu buton de submit pentru

navigatoare text precum Lynx (care nu implementeaz! JavaScript);

note de subsol ale unor sec#iuni care nu sunt vizibile utilizatorilor

din afara domeniului infoiasi.ro.

Dimensiunea total! efectiv! a site-ului Web (codul surs!, paginile n limbile

romn! "i englez!, imaginile), exclusiv biblioteca, contorul accesului etc., este de
aproximativ 327 kilobytes.

G - 53

Tehnologii Web

3. ASP (Active Server Pages)

3.1 Caracteristici
ASP (Active Server Pages) reprezint! o aplica#ie Microsoft gratuit!, util! pentru
realizarea paginilor Web dinamice "i interactive, care a ap!rut n premier! la nceputul
anului 1996. n prezent este disponibil! versiunea 5.1. n fapt, ASP reprezint! o interfa#! de
programare Internet Server Application Programming Interface (ISAPI) oferit! de serverul Web.
Serverele ASP ofer! o conectivitate strns! cu servere de baze de date precum
MS SQL Server, Oracle sau Access "i permit execu#ia de componente ActiveX.
Scripturile ASP vor rula pe serverul Web - n mod uzual un motor ASP distribuit de
Microsoft pentru Windows 9x sau serverul Microsoft Internet Information Server (IIS) pentru
Windows NT/2000 - fiind stocate ntr-un director special, denumit \InetPub\scripts
(similar directorului cgi-bin) "i vor putea accesa diverse variabile de mediu transmise de
c!tre server. Paginile Web n mod uzual pe server sunt memorate n directorul
\InetPub\wwwroot. Exist! "i diverse implement!ri ASP pentru diverse versiuni de Unix
(e.g. Instant ASP), Novell sau Lotus Notes/Domino.

3.2 Fiierele ASP

Un fi"ier ASP (avnd, de obicei, extensia .asp) poate con#ine combina#ii de date de tip
text, marcatori HTML "i comenzi script. n principal, serverul ASP ofer! interpretoare
pentru VBScript "i JScript, limbajul implicit fiind VBScript. Fiecare interpretor este un
obiect COM (Component Object Model) care proceseaz! scripturile, acest obiect trebuind
s! fie instalat pe serverul Web. Aceste obiecte COM au, n principiu, aceea"i func#ie ca "i
modulele din Apache. Limbajul script primar poate fi modificat prin intermediul unei chei
din registry-ul ma"inii pe care ruleaz! serverul:
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W3SVC\
ASP\Properties

ASP poate oferi medii de scriptare "i pentru alte limbaje, ca REXX sau Perl.
Comenzile script "i expresiile de ie"ire n ASP sunt delimitate de "<%" "i "%>"
(n PHP aveam <?...?>). Scripturile pot fi ncorporate n fi"iere ASP sau pot fi stocate n
fi"iere externe care vor fi nc!rcate "i rulate pe server:
<html>
<body>
<!-- apel VBScript al unei func#ii JScript -->
<% Call hello_world %>
</body>
</html>
<script runat="server" language="JScript">
function hello_world() {
Response.Write("Hello, world!\n");
}
</script>

G - 54

Tehnologii Web

ASP ofer! suport par#ial pentru SSI (Server Side Includes) prin implementarea doar a
directivei de preprocesare #include menit! s! includ! ntr-un fi"ier .asp con#inutul
altuia:
<!--#include virtual="nume_fi#ier"-->
<!--#include file="nume_fi#ier"-->

Este recomandabil ca fi"ierele incluse s! aib! extensia .inc, de"i sunt acceptate orice
nume valide de fi"iere. Cuvntul cheie virtual specific! faptul c! fi"ierul este stocat
ntr-un director virtual, iar dac! se folose"te file atunci fi"ierul este memorat ntr-un
director relativ la directorul curent.
Includerea fi"ierelor se realizeaz! nainte de execu#ia scripturilor din fi"ierul ASP. Astfel,
nu se pot concepe scripturi care s! genereze dinamic numele unui fi"ier ce va fi inclus
ulterior prin #include. Comenzile script "i func#iile/procedurile trebuie s! fie con#inute
complet ntre "<%" "i "%>" sau tag-urile <script> "i </script> ori <object> "i
</object>. Nu se poate deschide un delimitator de script ntr-un fi"ier ASP care include
un fi"ier unde se nchide acel delimitator.
Urm!torul exemplu este gre"it:
<%
for (i = 1 ; i < 10 ; i++)
{
/* instruc#iuni */
<!--#include file="antet.inc" -->
}
%>

ASP poate fi utilizat pentru modificarea unui script destinat a fi rulat pe partea client de
c!tre un script executat pe server:
<script language="JScript">
<!-- // ascundere cod de navigatoarele vechi
/* script client */
<% script server %>
/* script client */
<% script server %>
...
// -->
</script>

Desigur, aceast! abordare poate fi realizat! "i n CGI sau PHP.

3.2 Obiecte ASP predefinite

ASP ofer! programatorului urm!toarele obiecte (componente) predefinite care nu
necesit! instan#ieri explicite:

Request preia informa#ii despre utilizator (clientul Web);

Response trimite informa#ii la utilizator;

Server controleaz! mediul de execu#ie ASP;

Session stocheaz! informa#ii despre sesiunea unui utilizator;

Application partajeaz! informa#ii ntre utilizatorii unei aplica#ii.

G - 55

Tehnologii Web

De asemeni pot fi definite "i tag-uri noi care vor fi procesate de c!tre motorul ASP.

3.3 Obiectul Request

Acest obiect furnizeaz! accesul la urm!toarele colec#ii de date:

QueryString (preia informa#ii din variabila QUERY_STRING setat! de

Form (stocheaz! valorile cmpurilor unui formular),

Cookies (con#ine informa#ii referitoare la cookie-uri),

serverul Web),

ServerVariables (ofer! informa#ii despre variabilele serverului; e.g.

SERVER_PORT sau REMOTE_ADDR),

ClientCertificate (furnizeaz! informa#ii despre certificatele de

autentificare).
Exemple
i.
Presupunem c! n urma complet!rii unui formular se trimite serverului
urm!torul URI: welcome.asp?name=Sabin+Buraga&age=27. n fi"ierul
welcome.asp ar putea exista urm!torul cod pentru afi"area datelor din formular:
<p align="center">
Welcome, <i><%= Request.QueryString("name") %></i>.
Your age is <%= Request.QueryString("age") %>.
</p>

Textul afi"at de navigator ar putea fi:

Welcome, Sabin Buraga. Your age is 27.
ii.
Urm!torul fragment de cod VBScript va oferi o pagin! Web n limba dorit!
de utilizator, pe baza consult!rii variabilei HTTP_ACCEPT_LANGUAGE furnizat! de
serverul Web:
<%
language = Request.ServerVariable("HTTP_ACCEPT_LANGUAGE")
if language = "ro" then
%>
<!--#include file="pages/ro/course.asp" -->
<% else %>
<!--#include file="pages/en/course.asp" -->
<% end if %>

3.4 Obiectul Response

Putem apela cinci metode ale acestui obiect pentru:

a trimite informa#ii direct browserului (Write),

a redirecta utilizatorul spre alt URI (Redirect),

a controla tipul de date trimis clientului (ContentType),

G - 56

Tehnologii Web

a seta valorile unui cookie (Cookies),

a utiliza buffere de date pentru stocarea local! a documentelor sau

remprosp!tarea con#inutului (Buffer).

Exemplu
Pentru a fi siguri c! utilizatorii vor vizita o anumit! pagin! (chiar "i f!r! voia lor), putem
s! ne slujim de urm!torul cod de redirectare:
<%
if (!Session("home_page"))
Response.Redirect("homepage.asp");
%>

3.5 Obiectul Server

Acest obiect se utilizeaz! atunci cnd dorim s! activ!m diverse componente ActiveX n
cadrul paginilor ASP. Sunt incluse cteva componente standard, precum o component! de
acces la baze de date, o component! de interogare a capabilit!#ilor navigatorului,
o component! pentru lucrul cu fi"iere sau o component! de realizare a leg!turilor dintre
diverse documente.
Metodele cele mai utilizate sunt CreateObject care creeaz! o instan#! a unei
componente oferind un anumit serviciu, URLEncode care codific! un URL conform
regulilor prezentate n cadrul sec#iunii despre CGI, MapPath asociind o cale virtual! unei
c!i de directoare fizice.
Exemple
i.

Furnizarea de informa#ii despre caracteristicile navigatorului client:

<!-- Instan#ierea componentei -->

<% bc = Server.CreateObject("MSVC.BrowserType") %>
<p>Browser: <%= bc.browser %>
<p>Versiune: <%= bc.version %>
<p>Suport! frame-uri:
<% Response.Write(bc.frames ? "da" : "nu") %>
<p>Suport! tabele:
<% Response.Write(bc.tables ? "da" : "nu") %>
<p>Suport! ActiveX:
<% Response.Write(bc.ActiveXControls ? "da" : "nu") %>

ii.
Codul VBScript de mai jos va lista limbajele script suportate de
navigatorul Web:
<%
Set myBrowsCap = Server.CreateObject("MSWC.BrowserType")
%>
<p>Navigatorul este:
'<%=myBrowsCap.browser%>', versiunea '<%=myBrowsCap.version%>'.
<br>
Limbajele suportate sunt:
<ul>
<%If myBrowsCap.javascript Then%>

G - 57

Tehnologii Web

<li>JavaScript</li>
<% End If %>
<%If myBrowsCap.VBScript Then%>
<li>VBScript</li>
<% End If %>
</ul>

iii.
Urm!torul exemplu scris n VBScript cite"te dintr-un fi"ier text o list! de
leg!turi spre anumite pagini "i construie"te o pagin! Web cu aceste leg!turi:
<%
Set links = Server.CreateObject("MSVC.NextLink")
count = links.GetListCount("/links/list.txt")
%>
<ul>
<% For i = 1 to count %>
<li>
<a href="<%= links.GetNthUrl("/links/list.txt", i) %>">
<%= links.GetNthDescription("/links/list.txt", i) %>
</a>
</li>
<% Next %>
</ul>

3.6 Obiectele Session i Application

Aceste obiecte sunt utilizate pentru conceperea de aplica#ii Web bazate pe ASP. Fi"ierele
corespunz!toare aplica#iei (documente HTML "i ASP, scripturi, fi"iere de date "i
multimedia etc.) vor fi stocate ntr-un director virtual pe serverul Web.
Atunci cnd vorbim de aplica#ii ASP ne referim "i la starea acestora, starea constnd din
instan#ierea "i folosirea ulterioar! a dou! obiecte: Application (toate informa#iile despre
o aplica#ie sunt disponibile tuturor utilizatorilor acesteia, n mod global) "i Session
(informa#iile pot fi accesate doar de un anumit utilizator n cadrul unei sesiuni particulare).
Fiecare aplica#ie ASP va avea asociat un fi"ier numit Global.asa (extensia provenind
de la Active Server Application) care va fi localizat n directorul r!d!cin! al directorului virtual
al acelei aplica#ii. Acest fi"ier va fi prelucrat de server fie la o cerere de ini#ializare, imediat
dup! ce serverul Web a fost activat, fie cnd un anumit utilizator c!ruia nc! nu i-a fost
creat! o sesiune dore"te s! acceseze un fi"ier .asp al aplica#iei respective.
Fi"ierul Global.asa poate include:

proceduri de tratare a evenimentelor de ini#ializare a aplicatiei, a unei sesiuni

ori a ambelor;

proceduri de tratare a evenimentelor de terminare a aplica#iei, a unei sesiuni

sau a ambelor;

marcatori <object> care creeaz! diferite obiecte (componente ActiveX de

obicei).

G - 58

Tehnologii Web

Sesiuni ASP
Dup! cum am v!zut, atunci cnd un utilizator viziteaz! o pagina Web a unei aplica#ii
ASP, se genereaz! o a"a-numit! sesiune care diferen#iaz! acel utilizator de al#ii. Informa#iile
de#inute de o sesiune pot fi accesate "i manipulate de programele ASP, fiind utile n cazul
aplica#iilor necesitnd autentificarea sau stabilirea unor preferin#e specifice utilizatorului
respectiv.
De men#ionat faptul c! o sesiune este terminat! automat de server dac! utilizatorul nu
mai acceseaz! o pagin! a aplica#iei pentru o perioad! anumit! de timp (e.g. 20 de minute).
Explicit, o sesiune poate fi terminat! executnd metoda Session.Abandon. O aplica#ie
se termin! atunci cnd serverul Web este oprit.
O sesiune poate ncepe n urm!toarele trei maniere:

un utilizator nou face o cerere a unui URL corespunz!tor unui fi"ier .asp
al unei aplica#ii;

un utilizator stocheaz! o valoare ntr-un obiect Session;

un utilizator cere un fi"ier .asp al aplica#iei "i fi"ierul Global.asa

corespunz!tor va fi utilizat pentru a se instan#ia n cadrul unei sesiuni un obiect
(definit printr-un <object>).

Informa#iile vehiculate n cadrul unei sesiuni pot fi f!cute private, fiind accesibile teoretic
numai n acea sesiune.
Fiecare sesiune posed! un identificator unic, denumit SessionID, care este trimis
clientului pentru a se creea un cookie nepersistent corespunz!tor sesiunii n cauz!. n cadrul
acestui cookie vor fi memorate diverse informa#ii (private) despre sesiune. De fiecare dat!
cnd serverul ASP recep#ioneaz! o cerere, se va verifica n antetul HTTP existen#a
cookie-ului corespunz!tor identificatorului SessionID. Despre cookie-uri vom discuta n
detaliu n urm!torul subcapitol.
n cadrul unui astfel de cookie pot fi re#inute anumite preferin#e ale utilizatorului, valori
ale cmpurilor formularelor, date despre browser etc.
Stocarea variabilelor ntr-un obiect Session se realizeaz! n modul urm!tor:
<%
Session("Initiated") = Now
Session("Color") = "Green"
Set Session("vrmlobj") = Server.CreateObject("MSVRML2C")
%>

Consultarea variabilelor se poate face n maniera de mai jos:

<% if Session("Color") = "Green" then %>
<!-- verde -->
<body bgcolor="darkgreen" text="lightgreen"
link="turquoise" vlink="white">
<% else %>
<!-- clasic -->
<body bgcolor="white" text="black"
link="blue" vlink="magenta">
<% end if %>

G - 59

Tehnologii Web

Urm!torul exemplu de script ASP scris n VBScript num!r! cte cifre "0" "i cte cifre
"1" au fost generate aleatoriu la fiecare accesare a paginii Web:
<%
Response.Write "Generez o cifr!...<br>"
randomize
randomnum = int(rnd * 2) + 1
If randomnum = 1 Then
Session("zero") = Session("zero") + 1
Else
Session("unu") = Session("unu") + 1
End If
Response.Write "Nr. de 0 = " & Session("zero") & "<br>"
Response.Write "Nr. de 1 = " & Session("unu") & "<br>"
%>

Fiecare utilizator care acceseaz! documentul va avea o sesiune privat!, cu propriile sale
variabile-contor. Datele sesiunii sunt ntotdeauna stocate pe server, iar fiecare sesiune are
un identificator propriu, memorat ntr-un cookie pe ma"ina client. Operatorul ampersand
(desemnat de "&") realizeaz! concatenarea "irurilor de caractere.
Aplica"ii ASP
Cu ajutorul obiectului Application putem seta propriet!#i care vor fi accesate de to#i
utilizatorii aplica#iei respective. Astfel, prin intermediul diverselor variabile stocate de
obiectul Application putem afi"a un text tuturor utilizatorilor aplica#iei, putem
contoriza num!rul de acces!ri, putem asigna diverse execu#ii de scripturi la apari#ia unor
evenimente etc.
ntr-un obiect Application nu se pot memora ns! obiectele ASP predefinite.
Exemplul de mai jos va genera o eroare:
<%
Set Application("sesiune") = Session
Set Application("cerere") = Request
Set Application("raspuns") = Response
%>

Pentru a asigura integritatea accesului concurent la resurse comune, Application

posed! metodele Lock (previne modificarea propriet!#ilor obiectului de c!tre al#i clien#i)
"i Unlock (permite ca propriet!#ile s! fie modificate).
Iat! un script care poate fi folosit pentru contorizarea num!rului de vizite:
<%
Application.Lock
Application("Vizite") = Application("Vizite") + 1
Application.Unlock
%>
<h6 align="right">
Num!rul total de acces!ri: <%= Application("Vizite") %>
</h6>

Componentele ActiveX prezente ntr-o aplica#ie pot avea urm!toarele domenii de

vizibilitate:

G - 60

Tehnologii Web

la nivelul aplica"iei
Componenta este instan#iat! o singur! dat! la momentul ini#ializ!rii
aplica#iei "i este disponibil! tuturor cererilor provenite de la orice client.

la nivelul sesiunii
Se creeaz! o instan#! a componentei pentru fiecare sesiune n parte "i se
distruge la terminarea acelei sesiuni. O sesiune activ! va avea o unic! instan#! a
unei componente particulare.

la nivelul paginii
Componenta se instan#iaz! pentru procesarea unei pagini de c!tre un
anumit client.

Domeniul de vizibilitate implicit este cel situat la nivelul paginii.

Declararea unei instan#e de componenta ActiveX vizibil! la nivelul aplica#iei sau la
nivelul sesiunii se realizeaz! n cadrul fi"ierului Global.asa prin intermediul tag-ului
<object>, ca n exemplul de mai jos:
<object runat="server" scope="Application" id="MSVRML2C"
classid="clsid:90A7533D-88FE-11D0-9DBE-0000C0411FC3">
</object>

Se define"te n acest mod un control ActiveX de vizualizare a lumilor VRML avnd

domeniul de vizibilitate situat la nivelul aplica#iei "i fiind rulat pe server. Identificatorul
global universal de clas! (classid) corespunde unei intr!ri n registry a componentei
respective.
Serviciile oferite de o component! ActiveX sunt cele referitoare la interactivitatea cu
navigatorul Web, suportul pentru COM "i opera#iile cu fi"iere.
Controalele ActiveX pot fi solu#ia pentru includerea unui bogat con#inut multimedia n
paginile Web. Astfel, Black Diamond Consulting ofer! controale ActiveX permi#nd
vizualizarea de imagini stereografice sau a proiec#iilor de 360 de grade ale imaginilor de
perspectiv! (similare celor din enciclopedia Encarta). Extensiile VRML prezente n cadrul
navigatoarelor actuale pot fi substituite de controale ActiveX n deplin! interac#iune cu
utilizatorul, module denumite Active VRML. Un alt control util este vizualizatorul de
prezent!ri PowerPoint pentru Internet Explorer.
Controalele ActiveX pot fi folosite "i pentru activit!#i de administrare a resurselor
sistemului de operare sau pentru detec#ia, prin Web, a viru"ilor. Chio"curile informa#ionale
"i educa#ionale sau jocurile n re#ea pot beneficia, de asemeni, de serviciile oferite de
tehnologia ActiveX.
Dezavantajul const! n dependen#a clar! de platform! "i n utilizarea de unelte de
dezvoltare proprietare Microsoft.

3.7 Utilizarea
Utiliza rea documentelor XML pe un server ASP
Motorul XML (msxml.dll sau msxml3.dll) ncorporat n Internet Explorer 5 sau
ulterior poate fi rulat "i pe server, constnd din analizorul XML, procesoarele XSL "i XML
Schema "i alte componente.
G - 61

Tehnologii Web

Pentru instan#ierea unui control XML se procedeaz! similar ca la instan#ierea oric!rui

control ActiveX. n ASP, acest lucru se realizeaz! astfel:
var xmlObj = Server.CreateObject("Microsoft.XMLDOM");

O alternativ! ar fi crearea unui obiect pe server, n fi"ierul Global.asa, prin:

<object runat="Server" progid="Microsoft.XMLDOM" id="xmlObj">
</object>

Acest obiect, denumit "xmlObj" este un obiect DOM vid, care va con#ine un arbore de
elemente XML creat prin program sau nc!rcat de pe disc (vezi exemplele de mai jos).
Pentru accesarea obiectelor XML, n diferite fire de execu#ie, n loc de
Microsoft.XMLDOM vom utiliza Microsoft.FreeThreadedXMLDOM.

Exemple
1. nc!rcarea
metoda load():

documentului

XML

dintr-un

fi"ier

se

realizeaz!

cu

<%
xmldoc = Server.CreateObject("Microsoft.XMLDOM");
xmldoc.Load(Server.MapPath("produse.xml"));
%>

2. Crearea direct! a unui text XML, printr-un script VBScript, folosind

informa#ii preluate dintr-o baz! de date printr-o interogare SQL, se realizeaz! n
maniera urm!toare:
<% Response.ContentType = "text/xml" %>
<?xml version="1.0"?>
<Students>
<%
' interogarea SQL
SQL = "SELECT Matr, Nume, An, NotaWeb" &
"FROM NoteStud WHERE curs = 702"
' o conexiune cu baza de date via Active Date Objects (ADO)
Set conn = Server.CreateObject("ADODB.Connection")
' un obiect ce va con#ine nregistr!rile
' rezultate n urma interog!rii
Set rs = Server.CreateObject("ADODB.Recordset")
' interogarea propriu-zis!
conn.Open("pdc")
Set rs = conn.Execute(SQL)
' parcurgem nregistr!rile g!site...
rs.MoveFirst()
While (not rs.EOF)
%>
<student id="<%= rs("Id") %>">
<nume><%= rs("Nume") %></nume>
<an><%= rs("An") %></an>
<nota curs="Tehnologii Web"><%= rs("NotaWeb") %></nota>
</student>
<%
' urm!toarea nregistrare
rs.MoveNext()
' sfr"it bucla while
Wend

G - 62

Tehnologii Web

' nchidere conexiune cu baza de date

rs.Close()
conn.Close()
%>
</Students>

3. Pentru salvarea unui document XML ntr-un fi"ier sau ntr-un alt obiect,
se poate folosi urm!torul script ASP:
<%
Dim xmldoc
Set xmldoc = Server.CreateObject("Msxml2.XMLDOM")
xmldoc.async = false
xmldoc.load(Request)
xmldoc.save(Server.MapPath("studenti.xml"))
%>

3.8 O aplicaie ASP complet

Vom prezenta n continuare o aplica#ie Web bazat! pe ASP "i baze de date Access,
conceput! de studentul Irinel Lupei. Aplica#ia, denumit! "PlayList DataBase", este util! celor
care au multe melodii stocate n popularul format MP3 "i doresc s! le g!seasc! "i
organizeze rapid. De asemeni, fiind o aplica#ie Web, ofer! "i posibilitatea inform!rii altor
persoane despre muzica pe care o de#ine un anumit utilizator.
Explorarea bazei de date (n format Access 97/2000) se poate realiza f!r! autentificarea
utilizatorului, ntr-o manier! comod!, dup! cum se poate remarca din urm!toarea captur!
de ecran:

G - 63

Tehnologii Web

Navigarea prin baza de date

Cmpurile afi"ate se pot sorta dup! oricare coloan!, ap!snd pe butonul care reprezint!
numele coloanei respective.
Conectarea la baza de date Access se realizeaz! prin intermediul codului VBScript
de mai jos:
<%
' stabile"te calea spre baza de date
myMelodiiPath = Server.MapPath("melodii.mdb")
myConnString = "DBQ=" & myMelodiiPath &
";Driver={Microsoft Access Driver (*.mdb)}" &
";DriverID=25;FIL=MS Access;"
' realizeaz! contectarea
Set myConn = Server.CreateObject("ADODB.Connection")
myConn.Open myConnString
%>

Pentru listarea nregistr!rilor, ne vom folosi de o interogare SQL "i de parcurgerea

iterativ! a bazei de date:
<%
' formularea interog!rii SQL
strQryOrder = "SELECT * FROM [Melodii_Query] ORDER BY "
If Request("myFirstRecord") = "" Then
myRecordsToDisplay = 10
myFirstRecord = 1
myLastRecord = myRecordsToDisplay

G - 64

Tehnologii Web

qryOrder = "ID"
qryOrderAsc = "ASC"
Else
myRecordsToDisplay = cdbl(Request("myRecordsToDisplay"))
myFirstRecord = cdbl(Request("myFirstRecord"))
myLastRecord = cdbl(Request("myLastRecord"))
qryOrder = trim(cstr(Request("qryOrder")))
qryOrderAsc = trim(Request("qryOrderAsc"))
strQrySelected = trim(Request("strQrySelected"))
End If
' partea de navigare prin baza de date
myNavigate = Request("myNavigate")
tmpFirst = myFirstRecord
tmpLast = myLastRecord
Select Case myNavigate
' pagina anterioar!
Case "Page Prev"
If myFirstRecord > myRecordsToDisplay Then
myLastRecord = tmpFirst - 1
myFirstRecord = myLastRecord - myRecordsToDisplay + 1
Else
myFirstRecord = 1
myLastRecord = myRecordsToDisplay
End If
' pagina urm!toare
Case "Page Next"
myFirstRecord = tmpLast + 1
myLastRecord = myFirstRecord + myRecordsToDisplay - 1
Case Else
j = 0
' traduce ID-ul din englez! n romn!
Select Case myNavigate
Case "ID"
myNavigate = "ID"
Case "Path"
myNavigate = "Cale"
Case "Artist"
myNavigate = "Artist"
Case "Title"
myNavigate = "Titlu"
Case "Observations"
myNavigate = "Observatii"
Case Else
myNavigate = "ID"
qryOrderAsc = "DESC"
End Select
' stabile"te ordinea de afi"are
If myNavigate = trim(qryOrder) Then
If qryOrderAsc = "ASC" Then
qryOrderAsc = "DESC"
Else
qryOrderAsc = "ASC"
End If
Else
qryOrderAsc = "ASC"
End If
qryOrder = myNavigate
myFirstRecord = 1
myLastRecord = myRecordsToDisplay

G - 65

Tehnologii Web

End Select
Set myRs = Server.CreateObject("ADODB.Recordset")
myRs.Open strQryOrder & qryOrder & " " &
qryOrderAsc, myConn, adOpenDynamic
' num!rul de nregistr!ri g!site
myRsFieldCount = myRs.Fields.Count
Response.Flush
' sare peste myFirstRecord nregistr!ri
myRs.MoveFirst
i = 1
Do While ((not myRs.EOF) and (i < myFirstRecord))
i = i + 1
myRs.MoveNext
Loop
If myRs.EOF Then
myLastRecord = i
myFirstRecord = i - myRecordsToDisplay
myRs.MoveFirst
i = 1
Do While ((i < myFirstRecord) and (not myRs.EOF))
i = i + 1
myRs.MoveNext
Loop
End If
%>
<!-- tabelul de listare a datelor -->
<form action="melodii.asp" method="post" id="myFormList">
<!-- cmpuri ascunse
(interogare "i ordine de afi"are) -->
<input type="hidden" name="strQrySelected">
<input type="hidden" name="qryOrder"
value="<% =qryOrder %>">
<input type="hidden" name="qryOrderAsc"
value="<% =qryOrderAsc %>">
<table border="0" align="center"
cellpadding="3" cellspacing="0">
<tr>
<td>Display</td>
<td>
<input name="myRecordsToDisplay"
value="<% =myRecordsToDisplay %>">
</td>
<td>records</td>
<td>from</td>
<td>
<input name="myFirstRecord"
value="<% =myFirstRecord %>"
</td>
<td>to</td>
<td>
<input name="myLastRecord"
value="<% =myLastRecord %>">
</td>
</tr>
</table>

G - 66

Tehnologii Web

<!-- butoanele de navigare -->

<table border="0" align="center"
cellpadding="3" cellspacing="0">
<tr>
<td>
<input type="submit"
value="Page Prev" name="myNavigate">
</td>
<td>
<input type="submit"
value="Page Next" name="myNavigate">
</td>
<td>
<input type="submit"
value="Add New Record" name="myNavigate">
</td>
<td>
<input type="submit"
value="Delete Record" name="myNavigate">
</td>
<td>
<input type="submit"
value="Update Record" name="myNavigate">
</td>
</tr>
</table>
<!-- afi"area datelor -->
<table border="1" align="center" bgcolor="lavender"
cellpadding="3" cellspacing="1">
<%
' listare nregistr!ri
Do While ((i <= myLastRecord) and (not myRs.EOF))
Response.Write "<tr>" & vbCrLf
Response.Write "<td>" & cstr(i) & "</td>" & vbCrLf
Response.Write "<td>" &
"<input type='checkbox' id='myCheckbox_" & cstr(i) &
"'name='myCheckbox_" & cstr(i) & "'>" &
"</td>" & vbCrLf
Response.Write "<td id='myID_" & cstr(i) &
"' name='myID_" & cstr(i) & "'>"
Response.Write "</td>" & vbCrLf
Response.Write "</tr>" & vbCrLf
Response.Flush
i = i + 1
myRs.MoveNext
Loop
%>
</table>
</form>
<%
' nchide conexiunea cu baza de date
myRs.close
myConn.Close
myRs = null
myConn = null
%>

G - 67

Tehnologii Web

Acest program VBScript este stocat n fi"ierul melodii.asp.

Doar utilizatorii autentifica#i vor putea modifica nregistr!rile bazei de date.
Autentificarea se va realiza prin urm!toarea subrutin! VBScript:
<%@ Language=VBScript %>
<%
' inhib! p!strarea paginii n cache
Response.Expires = -1000
' utilizeaz! bufferul pentru a putea realiza redirectarea
Response.Buffer = True
' se accept! numai IE 4+
Set myBrowsCap = Server.CreateObject("MSWC.BrowserType")
If myBrowsCap.browser <> "IE" or
cint(left(myBrowsCap.version,1)) < 4 Then
' redirectare spre alt fi"ier
Response.Redirect "melodii.asp"
End If
' verificare nume "i parol!
Sub CheckLogin
Dim Conn, conStr, sql, rs, username, userpwd, myQuery
' preia numele "i parola din formularul HTML
username = Request.Form("username")
userpwd = Request.Form("userpwd")
' conectare la baza de date
Set Conn = Server.CreateObject("ADODB.Connection")
conStr = "DRIVER={Microsoft Access Driver (*.mdb)};"
conStr = conStr & "DBQ=" & Server.MapPath("users.mdb") & ";"
Conn.Open(conStr)
sql = "SELECT UserName FROM Users WHERE UserName = '" &
LCase(username) & "'"
sql = sql & " AND UserPasswd = '" & LCase(userpwd) & "'"
' execut! interogarea SQL
Set rs = Conn.Execute(sql)
' autentificare e"uat!
If rs.BOF And rs.EOF Then
Error_Msg = "<h2>Login Failed. Please try again.</h2>"
Else
' p!streaz! datele n obiectul Session
Session("UserLoggedIn") = "true"
Session("UserName") = username
myQuery = Session("myQuery")
Session("myQuery") = null
' redirectare spre pagina de actualizare a datelor
Response.Redirect newPage & "?" & myQuery
End If
rs = null
Conn = null
End Sub
%>

Din moment ce un utilizator a fost autentificat, el va putea ad!uga, actualiza sau "terge
nregistr!ri din baza de date Access. n figura de mai jos se poate urm!ri pagina de "tergere
a datelor:

G - 68

Tehnologii Web

Marcarea nregistr#rilor n vederea !tergerii din baza de date

G - 69

Tehnologii Web

3.9 Viitor
Noua genera#ie ASP este denumit! ASP+, menit! a fi rulat! pe platforma
Windows.NET, reg!sit! "i sub numele mai vechi de NGWS (Next Generation Windows
Services). ASP+ suport! nativ, pe lng! VBScript "i JScript, "i limbajul C# (C sharp), proasp!t
ap!rut n lumea limbajelor de programare, inspirat din C "i C++. n loc de a fi interpretate,
scripturile ASP+ vor fi compilate, c"tigndu-se astfel n viteza de procesare. O parte dintre
facilit!#ile oferite de ASP+ se apropie mult de cele implementate n PHP 4, dar nc! sunt
tributare sistemului de operare, rulnd numai pe Windows NT/2000. Aplica#iile ASP+ pot
coexista cu aplica#iile ASP. Astfel, fi"ierele cu scripturi ASP+ vor avea extensia .aspx,
existnd de asemeni "i posibilitatea de concepere de fi"iere Global.asax pentru fiecare
aplica#ie Web n parte.
O facilitate important! o reprezint! formularele Web ASP+ (ASP+ Web Forms), model
scalabil de programare la nivelul serverului pentru generarea n manier! dinamic! a
paginilor Web con#innd formulare electronice, ca de exemplu o serie de abilit!#i de a crea
controale reutilizabile pentru interac#iunea cu utilizatorul. Aceast! abordare separ! logica
prelucr!rii formularelor de modul de vizualizare "i interac#iune cu utilizatorii.
Configurarea motorului ASP+ se realizeaz! ntr-un mod ierarhic, bazat pe fi"iere n
format ASCII, foarte asem!n!toare modului de configurare din Unix, f!r! a mai necesita
modificarea plin! de riscuri din registry-uri.
n plus, ASP+ ofer! o palet! larg! de controale ActiveX predefinite "i d! posibilitatea
administratorilor s! extind! capabilita#ile ini#iale ale serverului prin includerea de noi
componente "i procesoare de limbaje.
Exemplu
Urm!torul script conceput n C# realizeaz! o interogare SQL a unei baze de date "i
afiseaz! lista nregistr!rilor g!site, n func#ie de informa#iile furnizate de utilizator:
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQL" %>
<html>
<head></head>
<!-- Partea de script care ruleaz! pe server -->
<script language="C#" runat="server">
/* func#ie care se execut! la ap!sarea butonului 'submit' */
void SubmitBtn_Click(Object sender, EventArgs e) {
/* instan#iaz! o conexiune SQL la baza de date,
cu autentificarea utilizatorului */
SQLConnection myConnection =
new SQLConnection("server=sql2.bitsonthewire.com;
uid=joeuser; pwd=joeuser; database=pubs");
/* instan#iaz! o comand! SQL */
SQLDataSetCommand myCommand =
new SQLDataSetCommand("select * from Titles where type='" +
Category.SelectedItem.Value + "'", myConnection);
/* execut! comanda, pentru tabela 'Titles' */
DataSet ds = new DataSet();
myCommand.FillDataSet(ds, "Titles");
MyList.DataSource = ds.Tables["Titles"].DefaultView;
MyList.DataBind();

G - 70

Tehnologii Web

}
</script>
<!-- Corpul paginii Web -->
<body>
<center>
<!-- Formularul electronic prelucrat de 'intro.aspx' pe server -->
<form action="intro.aspx" method="post" runat="server">
<!-- controalele sunt definite n spa#iul de nume 'asp' -->
<h3> Name: <asp:textbox id="Name" runat="server"/>
Category: <asp:dropdownlist id="Category" runat="server">
<asp:listitem >psychology</asp:listitem>
<asp:listitem >business</asp:listitem>
<asp:listitem >popular_comp</asp:listitem>
</asp:dropdownlist>
<asp:button type=submit text="Lookup"
OnClick="SubmitBtn_Click" runat="server"/>
<p>
<!-- Afi"eaz! datele returnate n urma execu#iei func#iei C# -->
<asp:datalist id="MyList" layout="flow"
showfooter="true" borderwidth="0" runat="server">
<!-- %abloane de date -->
<template name="headertemplate">
<table cellpadding="1" cellspacing="0">
<tr>
<td colspan="4">
<b>Product Listing</b>
</td>
</tr>
<tr>
<td colspan="4" height="5" bgcolor="000000"></td>
</tr>
</template>
<template name="itemtemplate">
<tr>
<td colspan="3" style="font-size:10pt">
<b>
<%# DataBinder.Eval(
Container.DataItem, "title_id") %>
</b>
<span>
<%# DataBinder.Eval(
Container.DataItem, "title") %>
</span>
</td>
<td align="right" style="font-size:10pt">
<b>
<%# DataBinder.Eval(Container.DataItem,
"price", "${0}") %>
</b>
</td>
</tr>
</template>
<template name="separatortemplate">
<tr>
<td colspan="4" height="1" bgcolor="000000"></td>
</tr>
</template>
<template name="footertemplate">
<tr>

G - 71

Tehnologii Web

<td colspan=4 height=5 bgcolor="000000"></td>

</tr>
</table>
</template>
</asp:datalist>
</form>
</body>
</html>

Exemplu de aplica"ie ASP+

G - 72

Tehnologii Web

4. Cookie-uri
4.1 Prezentare general
Cookie-urile reprezint! un mecanism standard care permite ca un server (site) Web s!
trimit! anumite informa#ii pe calculatorul unui client (utilizator), prin intermediul
browserului, s! cear! clientului s! stocheze aceste informa#ii pentru ca, ulterior, n diferite
circumstan#e, navigatorul s! returneze informa#iile spre serverul WWW. Cookie-urile pot fi
privite a"adar ca un mijloc persistent de stocare a datelor pe ma"ina clientului Web cu
scopul de a fi accesate ulterior de pe server, fiind utilizate la memorarea preferin#elor
utilizatorilor, la diverse tranzac#ii n comer#ul electronic, la completarea automat! a
formularelor, la stocarea informa#iilor de autentificare etc.
n cadrul unei tranzac#ii HTTP, serverul Web nu memoreaz! nici o informa#ie despre
aceasta, datorit! modului de concepere a protocolului de transfer a datelor hipertext. n
anumite cazuri, este ns! util ca informa#iile de stare ale unei conexiuni (sesiunii) HTTP s!
fie stocate pentru a fi folosite n cadrul altei tranzac#ii de date. Astfel, a ap!rut necesitatea
implement!rii cookie-urilor n cadrul navigatoarelor Web ca entit!#i purt!toare de date ntre
servere "i clien#i.
Termenul de cookie a fost introdus de Lou Montulli, unul dintre autorii specifica#iei tehnice
a browserului Netscape, care n versiunea 1.1 avea implementat n premier! mecanismul de
cookie-uri.
Contrar temerilor celor mai mul#i utilizatori ai Internetului, cookie-urile nu sunt
periculoase pentru calculatoarele gazd!, neavnd drept con#inut dect cteva linii de text,
neputnd accesa programe de pe disc sau extrage informa#ii confiden#iale despre utilizator
pentru a fi trimise napoi la un server Web. Datele de#inute de un cookie sunt datele pe care
le ofer!, din proprie ini#iativ!, utilizatorul sau cele returnate n cadrul antetului HTTP la o
tranzac#ie de date ntre client "i server. Un alt server diferit de serverul care a creat un cookie
nu-l poate accesa.
De altfel, fiecare navigator Web ofer! posibilitatea reject!rii cookie-urilor ori interog!rii
utilizatorilor dac! s! fie acceptate sau nu. Programatorul poate seta un cookie s! fie
persistent (nu va fi distrus la nchiderea navigatorului, ci va fi memorat ntr-un fi"ier, dup!
cum vom vedea mai jos, perioada lui de via#! fiind stabilit! de creator) sau nu.

G - 73

Tehnologii Web

Interogarea utilizatorului n leg#tur# cu acceptarea de c#tre

navigatorul Netscape a unui cookie persistent (salvat pe disc)
!i a unui cookie nepersistent

4.2 Atrib
Atributele
utele unui cookie
Un cookie const! n principal dintr-o pereche nume=valoare asem!n!toare parametrilor
vehicula#i de scripturile CGI. Valoarea este un "ir de caractere care trebuie codificat n
maniera URL-urilor. Datele referitoare la un cookie vor fi recep#ionate de browser care
men#ine o list! de cookie-uri apar#innd serverului care le-a trimis. Perechile (nume, valoare)
ale cookie-urilor prezente n memoria navigatorului vor fi returnate spre procesare serverului
care le-a creat, la cererea acestuia.
Mecanismul de setare a cookie-urilor pe calculatorul client "i de retrimitere a lor spre
server se bazeaz! pe cmpurile din antetul unei tranzac#ii de date HTTP.
Astfel, un cookie este trimis unui client incluznd un parametru-antet Set-Cookie
ntr-un r!spuns HTTP, forma lui general! fiind: Set-Cookie: nume=valoare;
expires=data; path=cale; domain=domeniu; secure.
Observ!m c! pot fi specificate atributele op#ionale:

expires
Reprezint! data "i timpul (n formatul Wdy, DD-Mon-YYYY HH:MM:SS
GMT) cnd cookie-ul va expira "i va fi "ters de pe disc. Dac! nu este dat nici un

timp de expirare, atunci cookie-ul se consider! a fi nepersistent "i va dispare la

nchiderea navigatorului.

G - 74

Tehnologii Web

domain

Atunci cnd se caut! un cookie n lista de cookie-uri se efectueaz! "i o

compara#ie ntre valoarea acestui atribut "i adresa domeniului din care s-a
recep#ionat antetul HTTP. Compara#ia se realizeaz! pornind de la sufixul
valorilor comparate, n sensul c! dac! avem domain=uaic.ro atunci aceast!
valoare se va potrivi cu un nume de gazd! precum info.uaic.ro sau
fenrir.info.uaic.ro. Dup! efectuarea acestei compara#ii, n cazul n
care cookie-ul este validat se va verifica "i valoarea atributului path
(vezi mai jos). Valoarea implicit! a atributului domain este numele simbolic al
serverului care a generat acel cookie.
path

Se utilizeaz! pentru a specifica un subset de URL-uri din domeniul

corespunz!tor unui cookie valid. Dac! deja cookie-ul a fost validat n urma
procedurii de comparare a domeniului, atunci componenta cale a URL-ului
este comparat! cu valoarea atributului path, n urma c!reia cookie-ul este
considerat acceptat sau nu. Calea /doc se va potrivi, de exemplu, cu
/documenta#ii "i cu /doc/index.html, dar nu cu /dom.
Cea mai general! cale de directoare este calea r!d!cin! "/".
secure

Dac! un cookie este marcat ca secure, prin intermediul acestui atribut, va fi

transmis numai dac! tranzac#ia HTTP este una sigur! (folosindu-se protocolul
HTTPS).
Un cookie este transmis doar dac! ntrune"te toate condi#iile de validitate (se potrivesc
domeniul, calea de directoare, timpul de expirare "i securitatea canalului de comunica#ie).
Serverul

va

primi

de

la

client,

antetul

HTTP,

linie

de

forma:

Cookie: nume1=valoare1; nume2=valoare2....

De re#inut urm!toarele aspecte:

pot fi trimise mai multe antete Set-Cookie ntr-o tranzac#ie de date

HTTP;
de"i un cookie nu a atins timpul de expirare, el poate fi "ters fie de navigator,
fie de utilizator;

lungimea antetelor Set-Cookie "i Cookie nu poate fi mai mare de

4 kilobytes;

anumite navigatoare limiteaz! num!rul total de cookie-uri care pot fi setate de

un server/domeniu (la Netscape, num!rul total este de 20);

dac! un script CGI vrea s! "tearg! un cookie de pe ma"ina client, atunci va

trimite un cookie avnd acela"i nume ca "i cookie-ul dorit a fi eliminat, cu valoare nul!
"i cu timpul de expirare setat n trecut (i.e. Thu, 01-Jan-1970 00:00:00 GMT).
Calea va fi de obicei stabilit! la "/";

nu se pot genera cookie-uri pentru domenii care nu apar#in URL-ului

transmis de serverul Web (un script din domeniul infoiasi.ro nu poate genera
cookie-uri avnd domain=ibm.com);

G - 75

Tehnologii Web

antetul Set-Cookie nu va fi niciodat! memorat n cache-ul unui proxy Web,

fiind propagat spre client, indiferent dac! se returneaz! cod de stare 200 (OK) sau
304 (Not Modified);

dup! cum am descris mai sus, serverul IIS incluznd ASP va seta un cookie
implicit denumit ASPSESSIONID pentru fiecare sesiune a unui utilizator. Acest
cookie poate fi consultat asemeni unui cookie obi"nuit. De asemeni, mecanismul de
memorare a sesiunilor utilizator n PHP apeleaz! tot la cookie-uri.

Iat! un exemplu de tranzac#ie HTTP n care se vehiculeaz! diferite cookie-uri ntre un

server "i un client Web:
1.

Clientul cere serverului un document "i prime"te r!spunsul:

Set-Cookie: culoare=verde; path=/;

expires=Mon, 21-Aug-2000 15:54:42 GMT

2. Cnd clientul cere un URL al unui document stocat pe server n directorul

r!d!cin! "/", va trimite:
Cookie: culoare=verde

3.

Clientul prime"te documentul, nso#it de:

Set-Cookie: alta_culoare=albastra;path=/

4. Atunci cnd clientul dore"te un document memorat n directorul "/"

va expedia antetul:
Cookie: culoare=verde;alta_culoare=albastra

5.

Clientul va primi:

Set-Cookie: count=3;path=/doc

6. Cnd clientul va cere un document stocat pe server n directorul /doc va

trimite antetul:
Cookie: culoare=verde;alta_culoare=albastra;count=3

7. Atunci cnd clientul cere serverului un document din directorul "/"

va expedia:
Cookie: culoare=verde;alta_culoare=albastra

4.3 Stocarea cookiecookie - urilor la client

Un cookie este limitat la 4 kilobytes lungime, fiecare cookie fiind salvat ntr-un fi"ier separat
ori toate cookie-urile fiind memorate ntr-un fi"ier comun, n func#ie de tipul "i de versiunea
browserului folosit. La fel, num!rul total de cookie-uri ce pot popula hard-disk-ul este
dependent de navigator (la Netscape, maxim 300). Cookie-urile pot fi "terse, fie de c!tre
serverul care le-a produs, fie prin intermediul unei op#iuni a navigatorului, fie de c!tre
utilizator (c!utndu-le pe disc). Localizarea fi"ierelor con#innd cookie-uri este, de asemeni,
dependent! de navigator. La Netscape 4, exist! un fi"ier denumit cookies.txt
(varianta Windows sau Macintosh) sau cookies (varianta Unix/Linux) aflat n directorul
personal al utilizatorului, la Internet Explorer 3 "i 5 pentru fiecare utilizator se creeaz! n
G - 76

Tehnologii Web

directorul

Cookies al directorului unde s-a instalat Windows-ul un fi"ier

nume@adresa.txt, n care nume este numele utilizatorului pe ma"ina Windows, iar
adresa reprezint! adresa serverului Web care a setat acel cookie. La anumite variante de
IE 4, se stocheaz! n directorul Temporary Internet Files. Exemple de nume de
fi"iere valide stocnd cookie-uri generat de Internet Explorer sunt sabin@yahoo.txt sau
sabin@C__TEMP__COOKIES.txt. Pentru Lynx, dac! este configurat s! salveze

cookie-urile pe disc, atunci ele vor fi stocate n directorul home al utilizatorului n fi"ierul
.lynx_cookies. Acest fi"ier (al c!rui nume se poate modifica prin intermediul unei
directive incluse n fi&3351;ierul de configurare lynx.cfg) are acela"i format ca "i fi"ierul
cookies generat de Netscape.
Un exemplu de con#inut al unui fi"ier cookies Netscape este cel de mai jos:
localhost FALSE /
FALSE
localhost FALSE /
FALSE
.uaic.ro
FALSE /
TRUE
.uaic.ro
FALSE /doc FALSE
.yahoo.com FALSE
FALSE
http%3A//www.yahoo.com/

966862979
966782841
966862979
969367226
966862979

culoare
verde
alta_culoare albastra
secure Secure%20communications
count
3
path

Cmpurile din acest fi"ier au urm!toarele semnifica#ii:

Cimp
domeniu

indicator de
acces
cale
indicator de
securitate
timpul de
expirare

Descriere
Domeniul care a creat "i care poate
(atributul domain dintr-un antet Set-Cookie).

Valoarea atributului path.

Indic! existen#a atributului secure.
Valoarea atributului expires m!surat! n num!rul de secunde scurse
de la data de 01 ianuarie 1970, ora 00:00:00 GMT (timpul Unix).
Numele cookie-ului.

valoare

Valoarea asociat! cookie-ului, codificat!.

cazul

cookie-ul

Este TRUE dac! toate ma"inile din domeniul dat pot accesa cookie-ul.
Aceast! valoare este setat! automat de browser n urma compara#iei de
sufixe de domenii.

nume

consulta

lui

Internet

Explorer,

fi"ierul

de

sabin@www.elsevier.txt generat n urma accept!rii

www.elsevier.com are urm!toarea configura#ie criptic!:

G - 77

cookie-uri
denumit
unui cookie de la

Tehnologii Web

AnEFromrel_client
www.elsevier.com/
0
3415826816
29364629
4113724112
29364628
*

4.4 Vizualizarea informaiilor

coninute de cookiecookie - uri
Pentru a vedea toate cookie-urile (att cele persistente, ct "i cele nepersistente) prezente
n memoria navigatorului, ne putem sluji de construc#ia JavaScript document.cookie pe
care putem s-o introducem n locul unei adrese (URL), dup! cum observ!m n figura
urm!toare:

Consultarea informa"iilor referitoare la cookie-uri

n Lynx, acela"i lucru se realizeaz! vizualiznd a"a-numitul Cookie Jar (activat cu

combina#ia de taste CTRL+K):

G - 78

Tehnologii Web

Managementul cookie-urilor n Lynx

Aceast! facilitate ofer! "i posibilitatea de a organiza cookie-urile.

4.5 Programarea cookiecookie- urilor

Vom enumera n continuare cteva abord!ri pentru crearea "i accesarea cookie-urilor att
pe partea server, ct "i pe partea client, n cadrul scripturilor CGI, n PHP, ASP "i
JavaScript.
Crearea cookie-urilor
Dup! cum am vazut, un cookie este creat prin intermediul unui antet Set-Cookie ntr-o
tranzac#ie HTTP. Astfel, ntr-un script CGI putem scrie:
#!/bin/bash
echo "Set-Cookie: culoare=verde; path=/; expires=Mon, 21-Aug-2000
15:54:42 GMT"
...

O alt! cale este s! utiliz!m obiectul predefinit document.cookie ntr-o func#ie

JavaScript. Astfel, urm!toarea func#ie definit! de Bill Dortch seteaz! un cookie:
function SetCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}

G - 79

Tehnologii Web

Func#ia predefinit! escape() codific! un "ir de caractere n format similar

codific!rii URL-urilor.
Un exemplu de utilizare:
var expdate = new Date();
expdate.setTime(expdate.getTime() + (24*60*60*1000));
// set!m s! expire dup! o zi de la data curent!
SetCookie("culoare", "verde", expdate);
SetCookie("alta_culoare", "albastra");
SetCookie("sec", "Necesita SSL", expdate, "/", null, true);

n PHP se poate folosi func#ia predefinit! setcookie() dup! cum se poate observa
din figura urm!toare (sintaxa acestei func#ii este similar! func#iei JavaScript de mai sus):

Crearea !i accesarea unui cookie n PHP

Func#ia setcookie() trebuie scris! naintea oric!rui marcator HTML

(nainte de <html>) pentru ca antetul Set-Cookie s! fie primul trimis clientului.
Pentru a face s! expire un cookie, vom putea scrie linia PHP de mai jos:
<?
setcookie($nume_cookie, "", 0, "/", "", 0);
?>

Ca "i la ASP, cookie-urile sunt folosite pentru managementul sesiunilor, mecanism

ncorporat n motorul PHP. Implicit, cookie-ul stocnd informa#ia (identificatorul unic)
despre o sesiune PHP este nepersistent. Func#ia session_start() va ini#ializa acest
identificator "i va seta cookie-ul aferent, iar session_id() va returna identificatorul.

G - 80

Tehnologii Web

Datele vehiculate de o sesiune vor putea fi nregistrate cu session_register().

Dac! browserul nu accept! deloc cookie-uri, nu vor putea fi folosite.
n ASP vom utiliza obiectul Response.Cookies. Iat! un exemplu:
<%
Response.Cookies("culoare") = "verde"
Response.Cookies("culoare").Expires = "January 01, 2001"
Response.Cookies("culoare").Domain = "infoiasi.ro"
Response.Cookies("culoare").Path = "/"
Response.Cookies("culoare").Secure = false
%>

Accesarea cookie-urilor
Pentru a vedea ce valoare are un cookie, putem consulta antetul HTTP Cookie. Cel mai
lejer este s! prelu!m valoarea variabilei de mediu HTTP_COOKIE setat! de serverul Web n
cadrul unui script CGI scris, de exemplu, n Perl:
@envpairs = split(/;/, $ENV{'HTTP_COOKIE'});
foreach $pair (@envpairs) {
($name, $value) = split(/=/, $pair);
$cookie{$name} = $value;
}

Am creat un tablou asociativ cookie de#innd informa#iile despre toate cookie-urile

disponibile. Putem asigna unei variabile valoarea cookie-ului numit alta_culoare astfel:
$fundal = $cookie{'alta_culoare'};

n JavaScript vom utiliza tot document.cookie, apelnd la func#ia definit! de acela"i

Bill Dortch n modul urm!tor:
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
// parcurgem ntreg "irul de perechi "cookie=valoare"
var j = i + alen;
if (document.cookie.substring(i, j) == arg) // am g!sit
return getCookieVal(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null; // n-am g!sit...
}

Func#ia getCookieVal() este:

function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

G - 81

Tehnologii Web

Func#ia unescape() este definit! de specifica#ia limbajului, realiznd transformarea din

forma codat! URL n forma normal! de reprezentare a unui "ir de caractere.

Vizualizarea valorii unui cookie n JavaScript

n PHP, fiecare cookie este disponibil ca variabil! predefinit!, valoarea unui cookie fiind
accesibil! prin construc#ia $nume_cookie.
Pentru ASP se poate folosi Request.Cookies n maniera de mai jos:
<p>Culoarea preferat! este <%= Request.Cookies("culoare") %>.</p>

G - 82

Tehnologii Web

5. Concluzii
Este dificil de afirmat care dintre tehnologiile "i tehnicile prezentate n cadrul acestui
capitol este cea optim!, totul depinznd de specificul site-ului, de platforma pe care trebuie
s! lucreze aplica#ia Web dorit! a fi implementat! "i de cuno"tin#ele programatorului sau
programatorilor acesteia.
Att CGI, PHP, ct "i ASP, ofer! solu#ii orientate server pentru execu#ia programelor
concepute n limbaje de tip script consacrate - Perl, Tcl, Python - (a"a cum se ntmpl! n
cazul CGI), fie n limbaje specifice (cazul PHP) ori n limbaje script utilizate mai ales pe
partea client, dar oferind func#ionalit!#i "i pe partea server - VBScript sau JavaScript
(n ASP).
Solu#ia oferit! de CGI d! "i posibilitatea de a utiliza programe compilate, concepute n
C/C++. n cadrul ASP pot fi instan#iate controale ActiveX scrise n limbaje precum C++,
Delphi sau Visual Basic, fiind ns! dependente de sistemul de operare. Numai Internet
Explorer suport! in extenso ntreaga tehnologie ActiveX. ASP ofer! o conectivitate bun! cu
sistemele de gestiune a bazelor de date ca Access ori Microsoft SQL, via
ODBC (Open DataBase Connectivity).
Solu#ia pentru viitorul mai ndelungat se ntrevede n combina#ia Apache, server Web
gratuit "i independent de platform!, care poate interpreta scripturi Perl sau Python
(interpretoare pentru aceste limbaje existnd pentru diverse medii) ori poate rula motorul
PHP. O alternativ! viabil! poate fi reprezentat! de JSP (Java Server Pages), bazat! pe
limbajul Java, deja existnd proiectul Apache-Java: JServ sau Servlet Express de la IBM.
De cele mai multe ori, conectivitatea cu bazele de date rela#ionale se realizeaz! printr-un
server oferit gratuit, precum MySQL sau PostgreSQL.
Pentru cei care doresc s! nve#e un alt limbaj script exist! Zope - un alt preprocesor de
script-uri rulate pe serverul Web, care ofer! propriul limbaj DTML (Dynamic Template
Markup Language) coexistnd cu marcatorii HTML, conexiuni cu baze de date "i metode
SQL parametrizate prin ZSQL "i o interfa#! de programare spre Python.
De asemeni, exist! o serie de servere comerciare pentru realizarea de aplica#ii Web,
dintre care putem men#iona Alliare ColdFusion sau IBM WebSphere.

G - 83

Tehnologii Web

"Nu exist# profesor care s# nu poat# fi elev."

(Baltazar Gracian)

Tehnologii Web

1. Istoric i fundamente
1.1 Scurt istoric
Compania Netscape ofer! odat! cu navigatorul Netscape 2.0 un mediu complet,
orientat-obiect, destinat arhitec#ilor de pagini WWW f!r! mult! experien#! n programare.
Acest mediu este JavaScript. Fermecat de tehnologia Java de la Sun, Mark Andreesen de la
Netscape cump!r! licen#a Java "i ofer! un limbaj de tip script bazat pe aceasta, denumit
LiveScript. Ulterior, n luna decembrie 1996, Sun "i Netscape "i-au unit eforturile n
dezvoltarea a celui ce avea s! fie JavaScript, interpretat de Netscape Navigator. Prima
specifica#ie a limbajului JavaScript apare odat! cu lansarea navigatorului Netscape 2.0. n
cadrul versiunilor 3 ale Netscape-ului sunt oferite noi facilit!#i, astfel fiind lansat JavaScript
1.1. Foarte rapid, JavaScript s-a bucurat de succes, n prezent ajungnd la versiunea 1.5
(ap!rut! in noiembrie 2000, fiind implementat! n Netscape 6), sprijinit de multe companii
de software.
Microsoft ofer! propria versiune JavaScript denumit! JScript (versiunea curent! n
martie 2001 fiind 5.5) disponibil! n cadrul navigatorului Internet Explorer, extensiile
(mai mult sau mai putin controversate) ale acesteia fiind cele legate de accesarea sistemului
de fi"iere, de existen#a dic#ionarelor de termeni "i conlucrarea cu VBScript. De cele mai
multe ori, programele JavaScript sunt incompatibile cu cele JScript, proiectan#ii Web
trebuind s! conceap! scripturi diferite, pentru a fi rulate pe ambele platforme:
Netscape Navigator "i Internet Explorer.
Limbajul JavaScript este destinat pentru folosirea exclusiv! n cadrul paginilor Web,
codul surs! fiind interpretat de c!tre navigator (client) la momentul nc!rc!rii documentului
HTML care l con#ine. Netscape permite, mai nou, execu#ia "i pe partea de server a
script-urilor JavaScript.
Limbajul JavaScript a stat la baza conceperii modelului de standard ECMAScript,
dezvoltat de Asocia"ia europeana a produc!torilor de calculatoare (European Computer Manufacturers
Association), aprobat n luna aprilie 1998. Pentru a n#elege mai u"or filosofia JavaScript,
vom face mai nti o prezentare a standardului ECMA.

1.2 Standardul ECMA

ECMA Script este un limbaj orientat-obiect bazat pe tehnologii ca JavaScript (Netscape
Communications) "i JScript (Microsoft). Fiind un limbaj de tip script, este destinat s!
manipuleze, s! automatizeze "i s! integreze facilit!#ile oferite de un anumit sistem, n acest
caz cele oferite de un navigator Web. ECMA Script poate oferi capabilit!#ile de baz! pentru
o varietate de medii Web, unele dintre facilit!#ile lui fiind similare altor limbaje de
programare (cum ar fi Java sau Self).
Un obiect ECMA Script este privit ca o colec#ie neordonat! de propriet#"i, fiecare
proprietate avnd zero ori mai multe atribute. Propriet!#ile pot con#ine fie alte obiecte,
fie valori primitive sau metode. O valoare primitiv! este element membru al unuia dintre
tipurile fundamentale Undefined, Null, Boolean, Number "i String. Un obiect este
membru al tipului de baz! Object, iar o metod! este o func#ie asociat! unui obiect prin
intermediul unei propriet!#i.
H-2

Tehnologii Web

ECMA Script define"te o serie de obiecte predefinite: Global, Object, Function, Array, String,
Boolean, Number, Math "i Date. Se define"te un set de operatori predefini"i (care pot s! nu fie
func#ii sau metode) similari celor din limbajul JavaScript.
Tipuri de baz#
Tipurile de baz! sunt Undefined, Null, Boolean, String, Object, Reference,
List "i Completion.

O variabil! care nu are asignat! nici o valoare este de tip Undefined. Valorile tipurilor
Reference, List "i Completion sunt utilizate doar ca rezultate intermediare n cadrul
evalu!rii expresiilor "i nu pot fi stocate de propriet!#ile vizibile ale obiectelor. Pentru tipul
Number s-au definit constantele speciale: NaN (Not a Number), +Infinity
"i -Infinity. De asemeni sunt permise valorile +0 "i -0 cu semnifica#ia din matematic!.
Tipul obiect
Un obiect este compus din propriet!#i, fiecare proprietate avnd un nume, o valoare "i
o mul#ime de atribute asociate:
propriety ::= < name, value, attributes >

Atributele propriet!#ilor pot fi urm!toarele:

Atribut

ReadOnly

Descriere
ncerc!rile de modificare a propriet!#ii respective vor fi ignorate.
n cazuri speciale, o proprietate avnd atributul ReadOnly poate s!-"i
schimbe valorile.

DontEnum

Proprietatea nu poate fi enumerat! de o construc#ie for-in.

DontDelete

ncerc!rile de a "terge proprietatea vor fi ignorate.

Internal

Propriet!#ile declarate Internal nu posed! nume "i nu pot fi accesate

n mod direct.
Atributele propriet#"ilor unui obiect

Propriet!#ile "i metodele interne nu sunt vizibile n mod normal "i numele lor le vom
ncadra ntre [[ "i ]]. Atunci cnd un algoritm utilizeaz! o proprietate intern! a unui
obiect "i obiectul nu are implementat! acea proprietate, va fi generat! o eroare de execu#ie.
Propriet!#ile vizibile vor putea fi consultate prin intermediul metodei get "i vor putea fi
asignate prin put.
Obiectele native ECMA Script posed! o proprietate intern! numit! [[Prototype]],
valoarea acesteia este fie null, fie un obiect, cu ajutorul ei fiind implementat! mo"tenirea.
Propriet!#ile obiectului [[Prototype]] sunt vizibile ca propriet!#i ale obiectului
mo"tenitor, putndu-se doar consulta (prin get) "i nu altera (cu put).

H-3

Tehnologii Web

Orice obiect trebuie s! implementeze urm!toarele:

proprietatea [[Class]]

metodele [[Get]], [[Put]], [[HasPropriety]], [[Delete]],

[[DefaultValue]]

Operatori
Operatorii ECMA Script sunt similari operatorilor care apar "i n limbajele Java "i
JavaScript, cu urm!toarele observa#ii:

operatorul "%" (modulo) poate avea ca operanzi nu doar numere ntregi,

ct "i valori reale;

valoarea returnat! de operatorii "&&" ("i logic) "i "||" (sau logic) nu
neap!rat va fi de tip Boolean, fiind ntotdeauna valoarea unuia dintre cei doi
operanzi.

Instruc"iuni
Instruc#iunile limbajului ECMA Script sunt:

instruc#iunea bloc de instruc#iuni {}

instruc#iunea vid! ;

instruc#iunea de test if

instruc#iunile iterative while for for-in

instruc#iunile de control return continue break with

H-4

Tehnologii Web

2. Caracterizare
2.1 Generaliti
Ca "i celelalte limbaje de programare, n cadrul JavaScript pot fi definite variabile,
de diverse tipuri scalare sau compuse, pot fi folosite instruc#iuni (de atribuire, de test,
de ciclare, de control), pot fi utilizate obiecte, con#innd metode (func#ii) predefinite sau
descrise de programator.

variabile
n JavaScript variabilele pot fi identificatori compu"i din litere, cifre "i
semnul de subliniere (simbolul " _ "), scopul lor putnd fi local sau global.
Ca "i C ori Java, limbajul este case-sensitive.

tipuri de date
Tipurile predefinite includ: numerele ntregi (n baza 10, 8 sau 16) "i
ra#ionale (scrise n nota#ie zecimal! sau "tiin#ific!), tipul boolean, "irurile de
caractere, tipul Object, tipul Null "i tipul Undefined. Similar limbajului
ECMAScript, o variabil! care nu are asociat! nici o valoare este de tip
Undefined (nedefinit). Nu se face verificarea strict! a tipurilor, a"a cum se
ntmpl!, de exemplu, n Pascal.

operatori
JavaScript include operatorii uzuali aritmetici, rela#ionali, logici, speciali
(precum typeof ori operatorul condi#ional ?: familiar programatorilor n C),
de manipulare a obiectelor. ncepnd cu JavaScript 1.2 se permite utilizarea
expresiilor regulate.

instruc"iuni
Pot fi folosite instruc#iunile de atribuire, bloc, de test (if-else, switch),
repetitive (for, do-while, while), de control (break, continue),
de manipulare a obiectelor (for-in, with). Este permis! definirea func#iilor
de c!tre programator pentru utilizarea lor ulterioar! n cadrul paginilor Web.

2.2 Programarea obiectual n JavaScript

Programatorii pot s!-"i defineasc! propriile lor obiecte, ns! puterea limbajului const! n
punerea la dispozi#ie a unei ierarhii de obiecte predefinite, respectnd modelul obiect
document (DOM) pe care l-am prezentat ntr-unul dintre capitolele acestui material.
Aceast! ierarhie (prezent! n navigatorul Netscape) este ilustrat! de figura de mai jos:

H-5

Tehnologii Web

Ierarhia JavaScript din cadrul navigatorului Netscape

Fiecare obiect poate oferi un set de propriet!#i (membri de tip dat!) calificate prin
construc#ia NumeObiect.NumeProprietate.
Un obiect JavaScript este de fapt un tablou. Aceasta ofer! o alt! posibilitate de a accesa
propriet!#ile unui obiect, folosind numele lor ca indici de tablou:
NumeObiect["NumeProprietate"].
Metodele se apeleaz! ca "i func#iile, precedate ns! de numele obiectului c!ruia i apar#in.
Crearea obiectelor
Un obiect poate fi creat folosind maniera direct! de specificare a unei noi instan#e a unui
obiect, prin operatorul new, ca n exemplul urm!tor:
Pictor = new Object();
Pictor.nume = "Salvador Dali";
Pictor.curent = "suprarealism";
Pictor.perioada = "1904-1989";

Ata"area unei metode noi obiectului se realizeaz! foarte simplu:

Pictor.afiseaza = afiseaza;

Metoda Pictor.afiseaza va fi asignat! func#iei afiseaza() presupus! definit! n

prealabil.

H-6

Tehnologii Web

Prototipul unui obiect

Exist! cazuri n care se dore"te crearea unui "prototip" (similar construc#iei template
din C++) pentru un anumit obiect, specificndu-se numai structura obiectului, instan#ierea
sa realizndu-se ulterior. Pentru aceasta, ini#ial se define"te o func#ie care define"te structura
obiectului dorit, func#ie care va func#iona ca un constructor. Urmeaz! un exemplu
(this refer! obiectul curent):
function Pictor(nume, curent, perioada)
{
this.nume = nume;
this.curent = curent;
this.perioada = perioada;
}
...
unPictor = new Pictor("Salvador Dali", "suprarealism", "1904-1989");
altPictor = new Pictor ("Ion &uculescu", "expresionism", "1910-1962");

Aceast! abordare, prin prototipuri, difer! de abordarea bazat! pe clas!, din limbajul Java.
Obiecte predefinite
Sunt predefinite obiectele de baz! Array, Boolean, Date, Function, Math,
Number, Object, RegExp, String. Aceste obiecte formeaz! a"a-numitul nucleu JavaScript

(JavaScript core).

Array permite folosirea tablourilor de date n cadrul programelor

JavaScript. Crearea unui tablou se realizeaz! prin operatorul new, astfel:

arrayObjectName = new Array(element0,

element1, ..., elementN)

sau
arrayObjectName = new Array(arrayLength)

Dac! la definirea unui tablou specific!m toate valorile sale, atunci acel tablou
se nume"te tablou dens.
Un exemplu:
// crearea unui tablou dens
pictor = new Array("Dali", 1904, 1989);

Elementele unui tablou pot fi indexate printr-un ordinal sau prin intermediul
numelui (dac! exist!).
Pentru exemplul de mai sus, putem specifica:
// asignarea unei valori unui element
pictor["Dali"] = "Salvador";

Se pun la dispozi#ie propriet!#ile index, input, length "i prototype, plus

metodele: concat(), join(), pop(), push(), reverse(), shift(),
slice(), sort(), toString(), unshift().

H-7

Tehnologii Web

// validarea lungimii unui cmp de formular

if (nume.length > 70) {
nume.length = 70;
alert("Numele introdus poate avea maxim 70 de caractere.");
}

n JavaScript sunt predefinite urm!toarele tablouri de date: anchors, applets,

embeds (doar la varianta Netscape) , forms, images, layers (numai la
Netscape) , links apar#innd obiectului document (vezi mai jos), elements
apar#innd obiectului Form, arguments apar#innd obiectului Function,
frames "i history care apar#in obiectului window "i altele.

Boolean este un obiect logic.

Urm!torul exemplu creeaz! mai multe obiecte booleene, toate avnd valoarea
ini#ial! false:
bNoParam = new Boolean();
bZero = new Boolean(0);
bNull = new Boolean(null);
bEmptyString = new Boolean("");
bFalse = new Boolean(false);

Date se folose"te pentru manipularea datei calendaristice "i a timpului, fiind

predefinite o serie de metode utile pentru setarea, consultarea "i modificarea datei,
n mod similar limbajelor Java "i ECMAScript. Urm!torul exemplu, preluat din
documenta#ia original!, furnizeaz! timpul curent sub form! de ceas digital:
function Clock() {
var time = new Date();
// timpul curent
var hour = time.getHours();
// ora curent!
var minute = time.getMinutes();
// minutele curente
var second = time.getSeconds();
// secundele curente
var temp = "" + ((hour > 12) ? hour - 12 : hour);
temp += ((minute < 10) ? ":0" : ":") + minute;
temp += ((second < 10) ? ":0" : ":") + second;
temp += (hour >= 12) ? " P.M." : " A.M.";
// Post-Meridian sau Ante-Meridian?
return temp;
}

Pot fi folosi#i mai mul#i constructori predefini#i:

dateObj = new Date()
dateObj = new Date(dateVal)
dateObj = new Date(year, month,
date[, hours[, minutes[, seconds[,ms]]]])

Prima form! va ini#ializa un obiect care va stoca data "i timpul curente. Linia
secund! va instan#ia un obiect memornd o dat! specificat! n form! numeric!
(timpul Unix n milisecunde: UTC - Universal Coordinated Time, adic! timpul
scurs de la 1 ianuarie 1970) sau ca "ir de caractere (e.g. "January 07, 1974"). A treia
solu#ie posibil! este s! furniz!m fiecare component! a datei (cele care lipsesc vor fi

H-8

Tehnologii Web

considerate nule). Numerotarea lunilor, orelor, minutelor, secundelor "i

milisecundelor porne"te de la zero. Anul va fi specificat cu patru cifre.
Un alt exemplu n care se va afi"a o dat! conform set!rilor locale ale
calculatorului pe care va rula scriptul:
function FormatareData(oData){
var data;
data = new Date(oData);
// creaz! obiectul Date
return(data.toLocaleString(data));
}
document.writeln("<p>" + FormatareData("January 07, 1974"));

Alte cteva exemplific!ri:

bday = new Date("January 07, 1974 07:33:00");
year = bday.getYear();
month = bday.getMonth();
day = bday.getDay();
alert("Te-ai n!scut pe " + day + " " + month + " " + year);

Function specific! un "ir JavaScript s! fie executat ca o func#ie. O instan#!

a acestui obiect se creeaz! n modul urm!tor:

functionObjectName = new Function ([arg1, arg2, ... argn],
functionBody)

Putem verifica existen#a unei func#ii comparnd numele acelei func#ii cu

valoarea null. De exemplu:
if (window.numeMetod! == null)
func1();
else
func2();

Propriet!#ile acestui obiect sunt arguments, arity, caller "i prototype.

O func#ie care genereaz! o list! de elemente HTML, folosind proprietatea
arguments:
function genlist(type) {
document.write("<" + type + "l>");
for (var i = 1; i < genlist.arguments.length; i++)
document.write("<li>" + genlist.arguments[i] + "</li>");
document.write("</" + type + "l>");
}

Un exemplu de apel ar fi:

genlist("u", "<p>Crocodili", "<p>Rinoceri", "<p><i>Tigri</i>");

Math permite efectuarea de calcule matematice de precizie, fiind predefinite

o serie de constante "i de func#ii utile (PI, abs(), sin(), cos(), tan(),
acos(), asin(), atan(), log(), exp(), min(), max(), pow(), random(),
round(), sqrt() etc.).

H-9

Tehnologii Web

Number este un obiect definind constante numerice precum MIN_VALUE,

MAX_VALUE, POSITIVE_INFINITY, NEGATIVE_INFINITY, NaN conform

standardului ECMAScript.

Object reprezint! un tip primitiv, toate obiectele predefinite n JavaScript

fiind descendente din acesta.

Proprietatea constructor specific! func#ia care va fi constructor pentru un

anumit obiect.
Urm!torul exemplu va crea un prototip Pictor "i un obiect de acest tip
unPictor, afi"ndu-se constructorul obiectului unPictor:
function Pictor(nume, curent) {
this.nume = nume;
this.curent = curent;
}
unPictor = new Pictor("Dali", "suprarealist");
document.writeln("unPictor.constructor: " + unPictor.constructor);

RegExp

este

utilizat

pentru

manipularea

expresiilor

regulate.

Iat! un exemplu:
function matchDemo()
{
var s;
var re = new RegExp("d(b+)(d)","ig");
var str = "cdbBdbttbdbdy";
var arr = re.exec(str);
s = "$1 contains: " + RegExp.$1 + "<br>";
s += "$2 contains: " + RegExp.$2 + "<br>";
s += "$3 contains: " + RegExp.$3;
return(s);
}

String permite instan#ierea de "iruri de caractere, furniznd "i metode ca:

anchor() "i link() (pentru crearea ancorelor "i leg!turilor HTML), big(),
small(), sup(), sub(), bold(), italics(), fixed() (pentru "iruri de
formatare a textelor HTML, similare marcatorilor <big>, <small>, <sup>,
<sub>, <b>, <i> "i <tt> respectiv), charAt(), concat(), search(),
split(), substr(), slice(), toLowerCase(), toUpperCase() etc.

Limbajul JavaScript nu posed! un tip special pentru reprezentarea unui singur

caracter (cum se ntmpl! n C/C++). Dac! dorim s! stoc!m un unic caracter
ntr-o variabil!, vom instan#ia un obiect de tip String care l va putea con#ine.
Un "ir care va stoca zero caractere ("") este considerat vid.
O serie de exemple de utilizare a acestui obiect, adaptate dup! manualele
JavaScript "i JScript:
function charAtTest(n)
{
var str = "Salut!ri din JavaScript";
var s;
s = str.charAt(n - 1);
return(s);
}

H - 10

Tehnologii Web

function ReplaceDemo()
{
var r, re;
var s = "Un exemplu folosind expresii regulate.";
re = /(\S+)(\s+)(\S+)/g;
// interschimb! fiecare pereche de cuvinte
r = s.replace(re, "$3$2$1");
return(r);
}
function SearchDemo()
{
var r, re;
var s = "O c!utare printr-un "ir";
re = /cau/i;
r = s.search(re);
return(r);
}
function replaceString(oldS, newS, fullS)
{
// nlocuie"te 'oldS' cu 'newS' n "irul 'fullS'
for (var i = 0; i < fullS.length; i++) {
if (fullS.substring(i, i + oldS.length) == oldS) {
fullS = fullS.substring(0,i) + newS +
fullS.substring(i + oldS.length, fullS.length);
}
}
return fullS;
}

2.3 Evenimente
Una dintre caracteristicile interesante ale limbajului JavaScript este cea referitoare la
evenimente. Evenimentele sunt ac#iuni care pot surveni n cadrul paginilor Web, n mod
uzual n urma unor opera#iuni executate de utilizator sau de navigator. La apari#ia unui
eveniment pot fi executate instruc#iuni JavaScript care astfel ofer! posibilitatea de
concepere a unor pagini Web dinamice (vezi mai jos).
Pentru fiecare eveniment care se dore"te a fi tratat, trebuie specificat! o bucat! de cod
care va fi executat! ori de cte ori acel eveniment va apare:
<tag ... onNumeEveniment = "cod JavaScript">

Mul#imea de evenimente care pot fi tratate este o submul#ime a evenimentelor specificate

de modelul DOM, dar difer! n func#ie de implementare.
Vom descrie n continuare cele mai importante evenimente care pot fi tratate de
script-urile JavaScript:

onAbort - utilizatorul a anulat nc!rcarea unei imagini (activnd o leg!tur!

sau ap!snd butonul de stop al navigatorului);

<img name="sigla" src="csb.jpg"
onAbort="alert('S-a anulat afi"area imaginii!')" />

H - 11

Tehnologii Web

onBlur - pierderea focusului (controlului) n cadrul unui element de

formular sau pierderea focusului ferestrei ori cadrului;

<body bgcolor="lightgrey"
onBlur="document.bgColor='lightgrey'"
onFocus="document.bgColor='green'">
Fundalul se schimb!, atunci cnd
se rec"tig! focusul...
</body>

onClick - s-a f!cut click cu mouse-ul pe un obiect dintr-un formular

(sau, mai general, dintr-un document);

<a href="http://www.infoiasi.ro/"
onClick="return confirm('nc!rc!m pagina?')">
FCS</a>

onDblClick - s-a executat un click dublu asupra unui obiect;

onDragDrop - utilizatorul realizeaz! ac#iunea de drag-and-drop;

onError - nc!rcarea documentului sau a unei imagini s-a produs cu

eroare; urmeaz! un exemplu n care se poate remarca modul de tratare a erorilor

dintr-o pagin! Web:
<script language="JavaScript" type="text/javascript">
// stabilirea func#iei de tratare
window.onerror = myOnError;
// tablouri cu informa#ii despre erori
msgArray = new Array();
urlArray = new Array();
lnoArray = new Array();
// func#ia de nregistrare a erorilor
function myOnError(msg, url, lno) {
msgArray[msgArray.length] = msg;
urlArray[urlArray.length] = url;
lnoArray[lnoArray.length] = lno;
return true;
}
// func#ia de afi"are a erorilor
function displayErrors() {
// deschide o nou! fereastr!
win2 = window.open('','window2','scrollbars=yes');
win2.document.writeln('<h4>Erori:</h4>')
for (var i = 0; i < msgArray.length; i++) {
win2.document.writeln('<b>Eroare n fi"ierul:</b> '
+ urlArray[i] + '<br>');
win2.document.writeln('<b>Linia:</b> ' + lnoArray[i] + '<br>');
win2.document.writeln('<b>Mesajul de eroare:</b> '
+ msgArray[i] + '<br>');
}
win2.document.close();
}
</script>
<body onload="noSuchFunction()">
<form>
<input type="button" value="Eroare de sintax!"
onClick="alert('%ir neterminat)">
<p>
<input type="button" value="Afi"eaz! erorile"

H - 12

Tehnologii Web

onClick="displayErrors()">
</form>
</body>

onFocus - reprimirea focusului (controlului) pentru o fereastr!, un cadru

onKeyDown - s-a ap!sat o tast!;

onKeyPress - s-a ap!sat "i se continu! ap!sarea tastei;

onKeyUp - s-a eliberat o tast!;

sau un element de formular;

onLoad - navigatorul a terminat de nc!rcat un document sau toate cadrele

dintr-un <frameset>; urm!toarele linii determin! redimensionarea ferestrei
navigatorului la maxim, folosind propriet!#ile obiectului screen:
<body onLoad="self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight)">

onMouseDown - utilizatorul a ap!sat butonul mouse-ului;

onMouseMove - utilizatorul mut! cursorul mouse-ului;

onMouseOut - cursorul mouse-ului a p!r!sit o arie (imagine) senzitiv! sau

onMouseOver - cursorul mouse-ului se afl! peste o arie (imagine) senzitiv!

onMouseUp - utilizatorul a eliberat butonul mouse-ului;

onMove - utilizatorul sau scriptul mut! fereastra sau un cadru;

onReset - utilizatorul a resetat un formular (ap!snd butonul de tip reset

onResize - utilizatorul sau scriptul redimensioneaz! ferestra sau un cadru;

o leg!tur!;
sau peste o leg!tur!;

al acestuia);
liniile de mai jos inhib! redimensionarea ferestrei curente a navigatorului:
<body onResize="self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight)">

onSelect - utilizatorul a selectat un fragment de text sau con#inutul unui

element dintr-un formular;

onSubmit - s-a trimis spre procesare un formular electronic;

onUnload - utilizatorul a p!r!sit un document.

Pentru navigatoarele de genera#ia a patra, programatorului i se pune la dispozi#ie un

obiect denumit event asociat fiec!rui eveniment. Prin intermediul metodelor
captureEvents(), releaseEvents(), routeEvent() "i handleEvent() se pot
manipula evenimentele prin intermediul programelor JavaScript.
Astfel, pentru a captura un eveniment care survine ntr-o fereastr!, vom putea scrie:

H - 13

Tehnologii Web

// captureaz! evenimentul click

window.captureEvents(Event.CLICK);
// captureaz! mai multe evenimente
window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP);

Dup! capturare, va trebui definit! func#ia care se va executa la apari#ia evenimentului:

function Handler(ev) {
// cod pentru tratarea evenimentului/evenimentelor
}

Pentru tratarea unui eveniment exist! mai multe modalit!#i:

Func#ia de tratare returneaz! valoarea true, n cazul unei leg!turi acest lucru
semnificnd faptul c! acea leg!tur! va fi activat! "i nici un alt eveniment nu va mai
fi tratat;

Func#ia de tratare va returna false. Leg!tura nu va fi activat!;

Apelul metodei routeEvent, caz n care se va putea executa o alt! func#ie

de tratare a evenimentului respectiv. Metoda routeEvent va returna valoarea pe
care o returneaz! func#ia g!sit! pentru tratarea evenimentului, ca n exemplul:
function Handler(ev) {
var ret = routeEvent(ev);
if (ret == false)
// eventual return!m false
return false;
else
// eventual return!m true
return true;
}

Apelul unei metode handlerEvent() care n mod explicit apeleaz!

o func#ie de tratare a unui eveniment dat, pentru un anumit element dorit.
function Handler(ev) {
// apelarea func#iei de tratare
// pentru a doua leg!tur!
window.document.links[1].handlerEvent(ev);
}

Func#ia de tratare a unui eveniment particular (e.g. onClick) trebuie nregistrat! ca event
handler pentru acel eveniment, n maniera de mai jos:
window.onClick = Handler;

H - 14

Tehnologii Web

3. JavaScript n cadrul paginilor Web

Introducerea de cod surs! JavaScript n cadrul documentelor HTML se realizeaz! prin
intermediului marcatorului <script>, putndu-se specifica prin atributul language
versiunea JavaScript n care se scriu programele "i prin type tipul MIME al scriptului
(text/javascript). Astfel, avem posibilitatea de a scrie p!r#i alternative de func#ii
JavaScript n func#ie de navigator sau de versiunea de JavaScript:
<script language="JavaScript" type="text/javascript">
if (navigator.userAgent.indexOf("4.0") != -1)
jsVersion = "1.2";
else if (navigator.userAgent.indexOf("3.0") != -1)
jsVersion = "1.1";
else
jsVersion = "1.0";
</script>

Codul JavaScript poate fi stocat ntr-un fi"ier extern .js "i folosit n cadrul paginii prin
construc#ia:
<script src="script.js"
language="JavaScript" type="text/javascript">
</script>

3.1 Utilizarea obiectelor navigatorului

Implementarea Netscape ofer! o multitudine de obiecte predefinite, denumite "i
obiecte-navigator. Fiecare pagin! Web posed! urm!toarele obiecte:
navigator con#ine propriet!#i care furnizeaz! numele "i versiunea

navigatorului care proceseaz! pagina Web, plus lista de module plug-in (extensii) ale
acestuia.
window este obiectul aflat la nivelul cel mai nalt n ierarhia obiectelor

disponibile. Propriet!#ile lui se aplic! ntregii ferestre n care se afi"eaz! con#inutul

documentului. Pentru paginile avnd cadre, fiec!rui cadru i corespunde un obiect
window.

document posed! propriet!#ile bazate pe con#inutul documentului

location se refer! la localizarea paginii (pe baza URI-ului).

(titlu, fundal, leg!turi, formulare etc.).

history con#ine propriet!#i reprezentnd adresele Web precedente care au

fost vizitate de utilizator.

Exemplu
Pentru pagina Web de mai jos se asociaz! o serie de obiecte JavaScript:

H - 15

Tehnologii Web

Un document HTML !i obiectele JavaScript asociate

Aceste obiecte au structura arborescent! urm!toare:

Structura obiectelor asociate unei pagini Web

n func#ie de con#inut, fiecare document poate avea asociate "i alte obiecte.

H - 16

Tehnologii Web

Obiectul window
Acest obiect reprezint! unul dintre cele mai importante obiecte puse la dispozi#ia
programatorului, putnd desemna fie o fereastr! a navigatorului, fie un anumit cadru (frame)
al unei pagini Web.
Propriet!#ile importante ale obiectului window sunt cele de mai jos:

closed - indic! dac! o fereastr! este nchis! sau nu;

defaultStatus - specific! mesajul implicit de pe bara de stare;

document - con#ine informa#ii despre documentul nc!rcat (vezi mai jos);

frames - tablou desemnnd cadrele dintr-o fereastr!, dac! exist!;

history - con#ine istoricul navig!rii;

length - indic! num!rul de cadre din fereastr!;

location - ofer! informa#ii despre URL-ul curent;

name - desemneaz! numele unic al ferestrei;

opener - desemneaz! numele ferestrei care a deschis fereastra curent!;

parent - indic! fereastra-p!rinte a ferestrei curente;

scrollbars - indic! barele de defilare (scroll);

self - desemneaz! fereastra curent!;

status - con#ine textul care va fi afi"at pe linia de stare a ferestrei

navigatorului.
Obiectul window are predefinite metode utile precum:
open() - deschide o nou! fereastr! de navigare, putndu-se specifica m!rimea,

localizarea etc.,
close() - nchide o fereastr! de navigare,
alert() - afi"eaz! o fereastr! de dialog con#innd un mesaj de alertare a utilizatorului,
confirm() - afi"eaz! o fereastr! de confirmare prev!zut! cu butoane OK "i Cancel,
prompt() - afi"eaz! o fereastr! de interogare,
scrollto() - efectueaz! o opera#iune de derulare a ferestrei.

Exemple
a. Pentru fiecare leg!tur! n parte la trecerea cursorului mouse-ului peste zona
senzitiv! (definit! prin intermediul marcatorului <map>) a unei imagini va fi afi"at
un text explicativ pe linia de stare:

H - 17

Tehnologii Web

<img src="web.jpg" width="500" height="500"

border="0" usemap="#map"
alt="Tehnologii Web">
<map name="map">
<!-- Autorul -->
<area shape="circle" coords="40,40,50"
href="http://www.infoiasi.ro/~busaco"
target="_new" alt="Autor"
onMouseOver="window.status='Autorul cursului';
return true">
<!-- Ultimele modific!ri -->
<area shape="circle" coords="390,90,80"
href="news.html" alt="Ultimele modificari"
onMouseOver="window.status='Ultimele modific!ri';
return true">
<!-- Cuprinsul -->
<area shape="rect" coords="160,150,240,300"
href="web-cuprins.html" alt="Cuprins"
target="_new"
onMouseOver="window.status='Cuprinsul detaliat';
return true">
<!-- Contact -->
<area shape="circle" coords="405,385,80"
href="mailto:busaco@infoiasi.ro?Subject=Web" alt="Contact"
onMouseOver="window.status='Contact prin e-mail';
return true">
</map>

n func#ie de plasarea mouse-ului, linia de stare va afi"a un anumit text. n acest

exemplu am folosit, pentru specificarea zonelor senzitive, dou! forme:
circle pentru definirea unei zone circulare desemnat! de punctul de origine "i de
raz! "i rect pentru o zon! dreptunghiular! dat! de punctele stnga-sus "i
dreapta-jos. Dac! dorim s! utiliz!m o zon! poligonal!, vom scrie shape="poly",
iar atributul coord va cuprinde o list! de coordonate ale punctelor din care va fi
compus! acea zon!.
b. Folosind metoda open() se pot genera scene VRML "din zbor". Func#ia
de mai jos deschide o fereastr! care va nc!rca o lume 3D constnd dintr-un cub de
culoare verde (din p!cate este dependent! de navigatorul utilizat):
function vrmlScene() {
// deschide o fereastr!
vrml = open("", "displayWindow",
"width = 500, height = 400,
// dimensiunea ferestrei
status = yes, // linia de stare vizibil!
toolbar = no, // bara de unelte invizibil!
menubar = yes // bara de meniuri vizibil!
");
// deschide documentul VRML ca tip MIME
vrml.document.open("x-world/x-vrml");
vr = vrml.document;
// creaz! o scen! VRML versiunea 1
vr.writeln("#VRML V1.0 ascii");

H - 18

Tehnologii Web

// specificarea luminii
vr.write("Separator { DirectionalLight { ");
vr.write("direction 3 -1 -2.5 } ");
// direc#ia de vizualizare
vr.write("PerspectiveCamera { position -8.6 2.1 5.6 ");
vr.write("orientation -0.1352 -0.9831 -0.1233 1.1417 ");
vr.write("focalDistance 10.84 } ");
// cubul de culoare verde
vr.write("Separator { Material { diffuseColor 0 1 0 } ");
vr.write("Transform { translation
-2.4 .2 1 rotation 0 0.5 1 .9 } ");
vr.write("Cube {} } }");
// nchide documentul - (nu fereastra!)
vrml.document.close();
}

Din acest exemplu se poate observa faptul c! metoda open() permite

specificarea unor parametri suplimentari pentru a indica modul de deschidere a
ferestrei dorite. Sintaxa metodei este:
open(URL, nume_fereastr!, op"iuni)

Parametrul op#iuni este un "ir de caractere care poate con#ine o serie de valori
delimitate de virgul! desemnnd maniera de afi"are a ferestrei nou create. Cele mai
uzuale sunt:

height - n!l#imea (ini#ial!) n pixeli a ferestrei;

width - l!#imea (ini#ial!) n pixeli a ferestrei;

location - dac! este yes, se va afi"a cmpul de introducere a

URL-urilor;
menubar - dac! este yes, meniul navigatorului va apare n partea

superioar! a ferestrei;

resizable - dac! este yes, atunci fereastra "i va putea schimba

scrollbars - dac! este yes, barele de defilare vor apare n cadrul

status - dac! este yes, bara de stare va fi afi"at! n partea inferioar!

toolbar - dac! este yes, bara de butoane (unelte) de navigare va fi

dimensiunile;
ferestrei;
a ferestrei;
afi"at!;

dependent - fereastra va fi dependent! de fereastra p!rinte

(extensie Netscape 4).

Pentru a nl!tura toate controalele ferestrei curente a navigatorului putem utiliza

urm!toarele linii:

H - 19

Tehnologii Web

self.menubar.visible
self.toolbar.visible
self.locationbar.visible
self.personalbar.visible
self.scrollbars.visible
self.statusbar.visible

=
=
=
=
=
=

false;
false;
false;
false;
false;
false;

c. Urm!toarele linii vor interoga utilizatorul "i n func#ie de r!spuns vor

redirecta navigatorul spre un anumit URI:
<html>
<head>
<title>JavaScript</title>
<script language="JavaScript" type="text/javascript">
function redirectare()
{
if (window.confirm("Merge#i la Netscape?"))
window.location.href = "http://home.netscape.com";
}
</script>
</head>
<body bgcolor="white" text="blue"
onLoad="redirectare()"
onUnload="self.alert('Mai trece#i pe aici...')">
<script language="JavaScript">
document.write("<h2 align='center'>Salut!ri...</h2>");
</script>
</body>
</html>

Efectul metodei confirm()

H - 20

Tehnologii Web

Obiectul window de asemeni pune la dispozi#ie o serie de metode utile pentru

temporizarea "i sincronizarea programelor JavaScript: setTimeout() "i
clearTimeout() sau setInterval() "i clearInterval().
Exemplul de mai jos va afi"a un mesaj de alertare la 10 secunde dup! ce utilizatorul
a ap!sat un buton. Dac! se va ap!sa un al doilea buton nainte ca mesajul s! apar!, atunci
temporizarea va fi anulat!:
<script language="JavaScript1.2" type="text/javascript">
function displayAlert() {
alert("10 secunde de cnd ai ap!sat butonul...");
}
</script>
<body>
<form>
Apas! pe butonul din stnga pentru un avertisment...<br>
Apas! pe butonul din dreapta pentru a anula afi"area avertismentului.
<p>
<input type="button" value="activare"
name="remind_button"
onClick="timerID=setTimeout('displayAlert()',10000)">
<input type="button" value="stergere"
name="remind_disable_button"
onClick="clearTimeout(timerID)">
</form>
</body>

Pentru navigatoarele de genera#ia a patra (i.e. Netscape 4 "i IE 5 sau versiuni ulterioare),
obiectul window mai pune la dispozi#ie "i metoda print() care va avea ca efect listarea
paginii curente:
<script language="JavaScript1.2" type="text/javascript">
function listare() {
if (!window.print)
{
alert("Metoda de listare nu este suportat!.");
return;
}
window.print();
}
</script>
<form>
<input type="button" name="list"
value="Listeaz! pagina"
onClick="javascript:listare()">
</form>

H - 21

Tehnologii Web

Dialogul de listare afi!at la execu"ia metodei print()

Obiectul document
Acest obiect este asociat fiec!rei pagini Web.
Obiectul document are asociate o serie de propriet!#i, dintre care se pot aminti:

anchors - tablou con#innd ancorele documentului (nu se poate dect

applets - tablou con#innd applet-urile documentului (nu se poate

cookie - specific! toate cookie-urile existente;

forms - tablou con#innd formularele documentului (nu se poate dect

images - tablou con#innd imaginile documentului (nu se poate

layers - tablou con#innd stratele documentului (doar la Netscape);

plugins - tablou con#innd plugin-urile documentului (nu se poate dect

bgColor - specific! culoarea implicit! pentru fundal;

fgColor - specific! culoarea implicit! a textului;

linkColor - specific! culoarea implicit! a leg!turilor nevizitate;

consulta);
dect consulta);

consulta);
dect consulta);

consulta);

H - 22

Tehnologii Web

alinkColor - specific! culoarea implicit! a leg!turilor active;

vlinkColor - specific! culoarea implicit! a leg!turilor vizitate;

lastModified - furnizeaz! data "i timpul ultimei modific!ri a

documentului (nu se poate dect consulta);

referrer - specific! URL-ul documentului care a apelat prezentul

document (nu se poate dect consulta);

title - con#ine titlul documentului;

URL - furnizeaz! URL-ul documentului (nu se poate dect consulta);

domain - furnizeaz! domeniul serverului Web care a expediat documentul.

Metodele write() "i writeln() genereaz! cod HTML care va fi inclus n cadrul
documentului, astfel se poate modifica n mod dinamic o pagin! Web.
Exemplu
Aceast! func#ie va afi"a o bar! orizontal! de l!#ime variabil!:
function bar(widthPct) {
document.write("<hr align='right' width='" + widthPct + "%'>");
}

Apelnd bar(65) va fi generat

<hr align="right" width="65%">.

pagina

Web

codul

HTML:

Alte metode (implementate de Netscape 4) sunt cele referitoare la evenimente:

captureEvents, handleEvent, releaseEvents, routeEvent.
Metoda getSelection returneaz! textul selectat de utilizator.
Un exemplu:
<input type="button" name="getstring"
value="Afi"eaz! textul selectat"
onClick="alert('Ai selectat:\n' + document.getSelection());">

Obiectul form
Pentru fiecare formular prezent ntr-o pagin! Web va fi disponibil un tablou, numit
Forms, de obiecte de tip form. Elementele unui formular (butoane, comutatoare, liste de
selec#ie etc. vor putea fi accesate prin intermediul tabloului elements. Astfel, primul
element al primului formular va fi referit prin document.Forms[0].elements[0].
Obiectele din componen#a unui formular vor fi de tipurile urm!toare: Button,
Checkbox, FileUpload, Hidden, Option, Password, Radio, Reset, Select,
Submit, Text "i Textarea.
Obiectul form se va folosi pentru prelucrarea datelor din formularele HTML pe partea
clientului. Pentru aceasta se pot utiliza fie evenimentele (e.g. onSubmit sau onClick),
fie metoda submit().
Pentru nceput, un exemplu de execu#ie a unei func#ii de prelucrare a formularului
apelat! la apari#ia evenimentului onSubmit:
H - 23

Tehnologii Web

<script language="JavaScript">
function verific(){
if (document.formular.produs.value.length >= 7)
return true;
else {
alert("Lungime mai mic! dect 7 caractere. " +
document.formular.produs.value + " nu este corect.");
return false;
}
}
</script>
<body>
<form name="formular" onSubmit="return verific()">
<b>Introduce#i un nume de produs
de minim 7 caractere:</b>
<input type="text" name="produs" size="7">
<p>
<input type="submit" value="Trimite" name="trimite"
onClick="document.formular.produs.value =
document.formular.produs.value.toUpperCase()">
</form>

La apari#ia evenimentului onClick valoarea introdus! n cmpul "produs" va fi

convertit! n litere mari, iar func#ia verific() va semnala eroare dac! lungimea valorii
este mai mic! de 7 caractere.
Acela"i exemplu, dar folosind metoda submit(), poate fi scris astfel:
<script language="JavaScript">
function verific(){
if (document.formular.produs.value.length >= 7)
document.formular.submit();
else {
alert("Lungime mai mic! dect 7 caractere. " +
document.formular.produs.value + " nu este corect.");
return false;
}
}
</script>
<body>
<form name="formular"
onSubmit="alert('Formularul a fost trimis')">
<b>Introduce#i un nume de produs
de minim 7 caractere:</b>
<input type="text" name="produs" size="7">
<p>
<input type="submit" value="Trimite" name="trimite"
onClick="verific()">
</form>

n acest caz, formularul va fi trimis spre prelucrare numai dac! sunt ndeplinite toate
condi#iile de validitate (evenimentul onSubmit nu previne expedierea formularului chiar
dac! poate con#ine date eronate).

H - 24

Tehnologii Web

Exemple:
i.
Putem scrie o func#ie JavaScript care va redirecta browserul Web c!tre o alt!
pagin!, prin intermediul unui meniu de navigare rapid!. n antetul paginii,
vom defini urm!toarea func#ie:
<script language="JavaScript" type="text/javascript">
<!-- pentru ascunderea codului la navigatoarele vechi
function formHandler() {
var URL =
document.form.site.options[document.form.site.selectedIndex].value;
if (URL != "")
window.location.href = URL;
}
//-->
</script>

Aceast! func#ie va fi apelat! de c!tre navigatorul Web la apari#ia evenimentului

onChange (vezi mai jos) n cadrul formularului con#innd lista de pagini pe care le
poate nc!rca utilizatorul (asemenea abordare a fost folosit! pentru navigarea facil!
prin paginile site-ului Facult!#ii de Informatic!):
<form name="form" id="form">
<select name="site" size="1" onChange="formHandler()">
<option value="">Go to...</option>
<option value="structure.html">Structure</option>
<option value="admissions.html">Admissions</option>
<option value="departments.html">Departments</option>
<option value="plan.html">Curricula</option>
<option value="events.html">Events</option>
<option value="research.html">Research</option>
<option value="publications.html">Publications</option>
<option value="graduates.html">Graduates</option>
<option value="contact.html">Contact</option>
</select>
</form>

ii.
Pentru a reda accesul la un anumit cmp al unui formular, ne putem folosi
de metoda focus(). Urm!toarea func#ie verific! validitatea unei parole "i dac!
aceasta este eronat! pozi#ioneaz! focusul pe cmpul dorit:
function checkPassword(userPass) {
if (parola este gre#it!) {
alert("Introdu din nou parola!");
userPass.focus();
userPass.select();
}
}

Pentru acest exemplu, am presupus c! formularul con#ine:

<input type="password" name="userPass">

iii.
Urmeaz! un exemplu de folosire a metodei reset() (implementat! de
Netscape 3 sau superior) care va reseta (reini#ializa cmpurile unui formular):

H - 25

Tehnologii Web

<script type="text/javascript">
function verificare(textObject) {
if (textObject.value == 'DESTEPT' ||
textObject.value == 'GENIAL')
alert('Chiar crede#i?:)');
else
document.test.reset();
}
</script>
<form name="test"
onReset="alert('V! rog, introduce#i DESTEPT sau GENIAL!')">
Introduce#i <b>DESTEPT</b> sau <b>GENIAL</b>:
<input type="text" name="minte"
size="7" onChange="verificare(this)">
</form>

Obiectul Image
n mod obi"nuit este creat de constructorul tag-ului <img>, navigatorul completnd
automat un tablou (valoare a proprit!#ii document.images) de obiecte de tip Image
care va con#ine toate imaginile dintr-un document HTML.
Forma general! a constructorului este:
new Image(width, height)

unde valorile width (l!#imea) " height (n!l#imea) sunt op#ionale.

Propriet!#ile cele mai importante sunt:

border (bordura din jurul unei imagini);

complete (valoarea logic! indicnd nc!rcarea complet! a imaginii);

height (n!l#imea);

width (l!#imea);

hspace (spa#iul orizontal suplimentar din jurul imaginii);

vspace (spa#iul vertical suplimentar din jurul imaginii);

src (URL-ul imaginii).

Obiectul Image poate fi util atunci cnd dorim s! realiz!m anima#ii n cadrul
paginilor Web:
<script language="JavaScript" type="text/javascript">
// timpul de a"teptare
delay = 100;
// indexul imaginii curente
imageNum = 1
// ncarc! imaginile anima#iei
theImages = new Array();
for(i = 1; i < 11; i++) {
theImages[i] = new Image();
theImages[i].src = "image" + i + ".gif";
}

H - 26

Tehnologii Web

// func#ia de anima#ie
function animate() {
document.animation.src = theImages[imageNum].src;
// urm!toarea imagine
imageNum++;
if (imageNum > 10) {
imageNum = 1;
}
}
// modific! viteza de anima#ie
function slower() {
delay += 10;
if (delay > 4000)
delay = 4000;
}
function faster() {
delay -= 10;
if (delay < 0)
delay = 0;
}
</script>
<body bgcolor="white" text="black">
<img name="animation" src="image1.gif" alt="[animation]"
onload="settimeout('animate()', delay)">
<form>
<input type="button" value="slower" onclick="slower()">
<input type="button" value="faster" onclick="faster()">
</form>
</body>

Obiectul location
Acest obiect poate fi folosit pentru a manipula prin program loca#iile (URI-urile) "i
istoricul navig!rii. Propriet!#ile cele mai uzuale pot fi urm!rite n exemplul de mai jos:
newWindow = window.open
("http://www.infoiasi.ro/~busaco/teach/courses/web/web1.html#2");
newWindow.document.write("newWindow.location.href = " +
newWindow.location.href + "<br>");
newWindow.document.write("newWindow.location.protocol = " +
newWindow.location.protocol + "<br>");
newWindow.document.write("newWindow.location.host = " +
newWindow.location.host + "<br>");
newWindow.document.write("newWindow.location.hostName = " +
newWindow.location.hostName + "<br>");
newWindow.document.write("newWindow.location.port = " +
newWindow.location.port + "<br>");
newWindow.document.write("newWindow.location.pathname = " +
newWindow.location.pathname + "<br>");
newWindow.document.write("newWindow.location.hash = " +
newWindow.location.hash + "<br>");
newWindow.document.write("newWindow.location.search = " +
newWindow.location.search + "<br>");
newWindow.document.close();

H - 27

Tehnologii Web

Obiectul navigator
Obiectul Navigator furnizeaz! informa#ii despre navigator "i mediul s!u de rulare, prin
intermediul propriet!#ilor appCodeName, appName, appVersion, language,
platform, userAgent.
document.write("<p>Codul navigatorului: " +
navigator.appCodeName);
document.write("<p>Numele navigatorului: " +
navigator.appName + " " + navigator.appVersion);
document.write("<p>Platforma: " +
navigator.platform);
document.write("<p>Agentul-utilizator: " +
navigator.userAgent);

3.2 Extensii JScript

Limbajul JScript poate fi interpretat pe mai multe platforme: n cadrul navigatorului
Internet Explorer, n cadrul unui server Web (i.e. IIS) avnd suport pentru ASP "i n cadrul
sistemelor de operare Windows (facilitate denumit! Windows Scripting Host). Versiunile
JScript prezente de aceste platforme sunt sintetizate n urm!torul tabel:
Versiunea JScript

Platforma

$.0 2.0 3.0 4.0 5.0 5.$ 5.5

x

Internet Explorer 3.0

Internet Information Server 1.0

Internet Explorer 4.0

Internet Information Server 4.0

Windows Scripting Host 1.0

x
x

Visual Studio 6.0

Internet Explorer 5.0

Internet Information Services 5.0

Windows 2000

Internet Explorer 5.5

Visual Studio .NET (beta 1)

n continuare vom prezenta o parte a extensiilor aduse de JScript:

i.

prelucrarea sistemului de fi$iere de pe calculatorul client

Implementarea JScript prezent! n Internet Explorer ofer! o serie de obiecte

disponibile n timpul rul!rii (permi#ndu-se a"a-numitul run-time scripting). Una dintre
cele mai interesante, dar "i periculoase facilit!#i o reprezint! obiectul
FileSystemObject care poate fi accesat ca un obiect ActiveX:

H - 28

Tehnologii Web

// crearea unui obiect FileSystemObject

var fso = new ActiveXObject("Scripting.FileSystemObject");
// crearea unui fi"ier de tip text
var a = fso.CreateTextFile("c:\\autoexec.bat", true);
// scrierea unei linii de text n fi"ier
a.WriteLine("echo Un salut din IE...");
// nchiderea fi"ierului
a.Close();

Cteva dintre metodele acestui obiect sunt: DriveExists(), GetDrive(),

GetDriveName() (pentru accesarea dispozitivelor), CreateFolder(),
FolderExists(), GetFolder(), MoveFolder(), DeleteFolder(),
GetParentFolderName()(pentru manipularea directoarelor), CopyFile(),
DeleteFile(), MoveFile(), OpenTextFile() (pentru prelucrarea
fi"ierelor).
Sunt oferite "i obiectele File, Drive, Folder "i TextStream.
Furniz!m cteva exemple:
a.
Pentru a determina data cre!rii unui director, vom putea apela
func#ia de mai jos:
function ShowFolderInfo(foldername)
{
var fso, folder, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
// furnizeaz! directorul specificat
folder = fso.GetFolder(foldername);
// afl! data cre!rii
s = folder.DateCreated;
return(s);
}

b.

Urm!torul exemplu va raporta spa#iul liber pentru un anumit drive:

function ShowFreeSpace(drvPath)
{
var fso, d, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
d = fso.GetDrive(fso.GetDriveName(drvPath));
s = "Drive " + drvPath + " - ";
s += d.VolumeName + "<br>";
s += "Free Space: " + d.FreeSpace/1024 + " Kbytes";
return(s);
}

Apelnd func#ia de mai sus astfel:

<script language="JScript" type="text/javascript">
document.write("<h4>" + ShowFreeSpace("c:\\") + "</h4>");
document.write("<h4>" + ShowFreeSpace("d:\\") + "</h4>");
</script>

am putea ob#ine rezultatul ilustrat de urm!toarea figur!:

H - 29

Tehnologii Web

Utilizarea controlului ActiveX FileSystemObject

c.
Consultarea listei de fi"iere ale unui director poate fi realizat! de
func#ia urm!toare:
function ShowFolderFileList(foldername)
{
var fso, f, f1, fc, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFolder(foldername);
// folosim obiectul Enumerator pentru a parcurge lista
fc = new Enumerator(f.files);
s = "";
for (; !fc.atEnd(); fc.moveNext())
{
s += fc.item();
s += "<br>";
}
return(s);
}

d.
Pentru consultarea/setarea atributelor fi"ierelor (n acest exemplu
read-only), putem utiliza proprietatea attributes a obiectelor File "i
Folder:
function GetReadOnlyAttr(filename)
{
var fso, f, r, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFile(filename);
// returneaz! starea atributului
return(f.attributes && 1);
}

H - 30

Tehnologii Web

function SetReadOnlyAttr(filename)
{
var fso, f, r, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFile(filename);
// seteaz! atributul
f.attributes = f.attributes || 1;
}

ii.

execu"ia condi"ionat! a codului

O alt! facilitate a limbajului JScript (prezent! de la versiunea 3) este cea

referitoare la execu#ii condi#ionate a diverselor p!r#i de cod. Directivele de
compilare condi#ionat! se vor scrie drept comentarii, pentru a nu apare erori n
cazul proces!rii codului de alte navigatoare. Directivele vor fi ncadrate de
caracterul "@".
nainte de a folosi directive de compilare condi#ionat!, va trebui s! activ!m acest
mecanism prin construc#ia @cc_on, dup! cum se poate remarca din urm!torul
exemplu care testeaz! versiunea de JScript implementat! de navigatorul Internet
Explorer:
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
alert("JScript versiunea 5 sau superioar!");
@else @*/
alert("JScript mai vechi... ncerca#i o actualizare?");
/*@end @*/

Se pun la dispozi#ie variabile desemnnd platforma pe care ruleaz! scripturile

JScript, dintre care se pot enumera @_win32 (ia valoarea true dac! programul
ruleaz! pe un sistem Win32), @_win16 sau @_mac.
Se pot genera "i variabile-utilizator pentru a putea fi testate n cadrul compil!rilor
condi#ionate utilizndu-se directiva @set.
iii.

tratarea excep"iilor

ncepnd cu versiunea JScript 5, programatorii au posibilitatea s! foloseasc!

mecanismul de tratare a excep#iilor, prin intermediul construc#iilor sintactice
try...catch...finally (similare celor din limbajul Java).
Iat! un exemplu adaptat dup! documenta#ia JScript (va fi opera#ional numai rulat
n IE 5 sau superior):

H - 31

Tehnologii Web

function TryCatch(x){
try {
try {
if (x == "")
// evalueaz! argumentul
throw "x este nul";
// semnaleaz! o eroare
else
throw "x nu este nul";// semnaleaz! o alt! eroare
}
catch(e) {
// capteaz! eroarea de mai sus
// verificarea erorii
if (e == "x este nul")
// returneaz! mesajul
return(e + " tratat local.");
else
// eroarea nu se trateaz! aici
throw e;
// retrimite eroarea
}
}
// trateaz! alte erori...
catch(e) {
return(e + " tratat general.");
}
}
document.write(TryCatch(""));
document.write(TryCatch("Salut!"));

3.3 HTML Dinamic i JavaScript

Odat! cu genera#ia 4 a principalelor navigatoare (Netscape Communicator "i Internet Explorer)
exist! posibilitatea de a conferi paginilor Web un con#inut dinamic gra#ie tehnicilor descrise
de specifica#ia DHTML (Dynamic HTML), oferindu-se, printre altele, suport pentru foi
de stiluri (CSS), pentru pozi#ionarea exact! a elementelor HTML "i pentru nc!rcarea
fonturilor de la distan#!.
DHTML const! de fapt dintr-o serie de facilit!#i oferite de navigatoarele actuale care
permit conceperea de pagini Web dinamice. Din p!cate, aceste facilit!#i sunt dependente n
mare m!sur! de agentul-utilizator "i de cele mai multe ori trebuiesc scrise variante specifice
fiec!rui navigator n parte. Tehnologia DHTML este implementat! diferit n cadrul
browserelor "i n prezent se pare c! Internet Explorer ofer! mai multe facilit!#i
(nestandardizate) dect Netscape Communicator. Noile navigatoare (Netscape 6 "i Internet
Explorer 5 sau versiunile ulterioare) vor emula DHTML prin intermediul standardului
DOM.
DHTML n Netscape 4 sau ulterior
HTML Dinamic n Netscape este prezent prin intermediul utiliz!rii tag-ului <layer>.
Prin acest marcator nestandardizat, se permite pozi#ionarea absolut! sau relativ! a datelor
ntr-o pagin! Web, folosind conceptul de strat (layer). Un strat poate fi f!cut invizibil, poate
decupa con#inutul unui document sau poate fi suprapus peste alte strate, conferind
paginilor WWW o ipostaz! cvasi-tridimensional!.

H - 32

Tehnologii Web

Pozi"ionarea con"inutului
Exemplu
Vom defini cu ajutorul script-urilor JavaScript un strat identificat prin pictor1 "i un
strat pictor2 plasat cu 50 de pixeli sub partea inferioar! a primului strat. Construc#ia
&{"&"} ne permite s! inser!m n codul HTML valoarea unor expresii JavaScript
(aici valorile atributelor left "i top).
<layer id="pictor1" style="left:50;top;30">
<img width=180 height=135 src="Ernst.jpg">
<h5>Max Ernst (1891-1976)</h5>
</layer>
<layer id="pictor2"
left=&{"&"};{ window.document.pictor1.left };
top=&{"&"};{ window.document.pictor1.top +
document.pictor1.document.height + 50 };>
<img width=70 height=107 src="Dali.jpg">
<h5>Salvador Dali (1904-1989)</h5>
</layer>

Efectul codului de mai sus n Netscape Communicator poate fi vizualizat n figura

urm!toare:

Stratele suprapuse a!a cum pot fi vizualizate cu Netscape

H - 33

Tehnologii Web

Acela"i cod nc!rcat n Internet Explorer va avea urm!torul efect (se remarc! faptul c!
elementul <layer> este ignorat, nefiind n#eles):

Stratele suprapuse a!a cum pot fi vizualizate cu Internet Explorer

Atributele elementului <layer> sunt sintetizate n urm!torul tabel:

Atribut

Descriere

id

numele stratului, utilizat pentru specificarea unui strat particular

left

pozi#ia (pe coordonata 0x) a stratului

top

pozi#ia (pe coordonata 0y) a stratului

width

l!#imea unui strat (n pixeli sau procente)

height

n!l#imea unui strat (n pixeli sau procente)

bgcolor

culoarea de fundal a stratului

background imaginea de fundal a stratului

src

documentul HTML extern care poate fi con#inut de un strat

Toate atributele unui strat pot fi att accesate, ct "i modificate de un program
JavaScript.
Urm!torul exemplu mut! un text dintr-o parte n alta a ferestrei:
H - 34

Tehnologii Web

<html>
<head>
<title>Strate n NS 4</title>
</head>
<body bgcolor="white" text="black">
<layer id="textlayer"
width="200" height="50"
bgcolor="#DDFFDD">
<h2 align="center">Salut!ri din Netscape...!</h2>
<hr size="4">
</layer>
<script language="JavaScript1.2" type="text/javascript">
// func#ia de mutare la stnga a stratului
function move_back() {
document.textlayer.left -= 5;
if (document.textlayer.left < 5)
setTimeout("move_ahead()", 50);
else
setTimeout("move_back()", 50);
}
// func#ia de mutare la dreapta a stratului
function move_ahead() {
document.textlayer.left += 5;
if (document.textlayer.left < 400)
setTimeout("move_ahead()", 50);
else
setTimeout("move_back()", 50);
}
move_ahead();
</script>
</body>
</html>

Un instantaneu al execu#iei acestui cod este dat mai jos:

Execu"ia scriptului de mutare a unui strat

Con"inutul dinamic al paginilor n Netscape 4

sau ulterior
Stratele sunt tratate ca obiecte distincte, separate de celelalte obiecte care compun un
document HTML (vezi "i capitolul despre DOM). Astfel, putem modifica n manier!
dinamic! un anumit strat.

H - 35

Tehnologii Web

Iat! un exemplu care schimb!, la fiecare 5 secunde, con#inutul stratului definit astfel:
<layer id="strat" width="100%" height="33"></layer>

Documentul inclus ntr-un strat poate fi accesat ntr-un script JavaScript prin construc#ia
document.identificator_strat.document. Codul complet al paginii Web este

urm!torul:
<html>
<head>
<title>Strate n NS 4 (partea a 2-a)</title>
</head>
<body bgcolor="white" text="black">
<layer id="strat"
width="100%" height="30"
bgcolor="lightblue">
</layer>
<script language="JavaScript1.2" type="text/javascript">
// tabloul cu textele alternative
var continut = new Array();
continut[0] = "Bine a#i venit";
continut[1] = "la cursul de";
continut[2] = "<b>Tehnologii Web</b>";
// indic! textul care va fi afi"at
var index = 0;
// func#ia de scriere alternativ! a textelor
function scrie() {
document.strat.document.write(continut[index]);
document.strat.document.close();
if (index == 2) // urm!torul text din tablou
index = 0;
else
index++;
setTimeout("scrie()", 5000);
}
// activeaz! func#ia la nc!rcarea paginii
window.onload = scrie;
</script>
</body>
</html>

Dup! cum se observ!, se pot include "i marcaje HTML n cadrul tabloului con#innd
textele alternative. Efectele execu#iei scriptului prezentat mai sus sunt ilustrate n
continuare:

H - 36

Tehnologii Web

Vizualizarea alternativ# a textelor

Stratele unui document pot fi accesate prin intermediul tabloului predefinit layers.
Un strat particular este accesat, dup! cum am v!zut, prin numele s!u, stabilit de atributul
id. O parte dintre propriet!#ile unui obiect de tip Layer sunt: document (documentul pe
care l con#ine), name (identificatorul stratului), left, top (pozi#ia), zIndex (ordinea de
afi"are), visibility (vizibilitatea) etc.
Metodele predefinite sunt cele specificnd deplasarea stratului: moveBy(), moveTo(),
moveToAbsolute(), moveAbove(), moveBelow(), redimensionarea: resizeBy()
"i resizeTo() sau nc!rcarea: load().
Ca

la

oricare

obiect,

se

poate

crea

un

nou

strat

prin

construc#ia

StratNou = new Layer().

Stratele pot fi manipulate "i emulate (par#ial) "i prin intermediul propriet!#ilor din CSS
nivelul 2.

H - 37

Tehnologii Web

Foi de stiluri accesate prin JavaScript

Propriet!#ile tag-urilor HTML modificate conform specifica#iilor CSS se pot altera
folosind obiectele predefinite n JavaScript. Urm!toarele forme sunt astfel echivalente,
conducnd la afi"area n verde a tuturor paragrafelor:
<style type="text/css">
P { color: green }
</style>
<script type="text/javascript">
document.tags.p.color = "#00FF00";
</script>

DHTML n Internet Explorer 4 sau ulterior

Implementarea DHTML n Internet Explorer se bazeaz! n principal pe existen#a noii
propriet!#i style ata"at! fiec!rui element HTML al unui document "i pe o pleiad! de alte
obiecte care pot fi accesate via JScript.
De obicei, un strat din Netscape poate fi emulat prin intermediul tag-ului div c!ruia i
putem asocia un identificator unic:
<div id="identificator"></div>

Astfel,

putem

manipula

propriet!#ile

de

stil

ale

acestuia

prin

construc#ia

identificator.style. n Internet Explorer nu exist! tabloul de obiecte Layers.

Cele mai importante propriet!#i de stil (inspirate din CSS) sunt date n urm!torul tabel:
Proprietate

Descriere

backgroundColor culoarea de fundal a unui element

backgroundImage imaginea de fundal a unui element
color

culoarea unui element

cursor

forma cursorului mouse-ului

position

tipul de pozi#ionare (valorile valide fiind absolute sau relative)

pixelWidth

l!#imea care o va ocupa un element (n pixeli)

pixelHeight

n!l#imea care o va ocupa un element (n pixeli)

pixelLeft

pozi#ia (pe coordonata Ox) a unui element

pixelTop

pozi#ia (pe coordonata Oy) a unui element

Folosind aceste propriet!#i putem modifica nf!#i"area oric!rui element prezent ntr-un
document HTML. Propriet!#ile pot fi att consultate, ct "i modificate.
Iat! un exemplu (unde utiliz!m tag-ul <span>) care schimb! culoarea de fond "i
culoarea de afi"are a unui text, atunci cnd plas!m cursorul mouse-ului deasupra lui:

H - 38

Tehnologii Web

<span id="text"
onMouseover="text.style.color='green';
text.style.backgroundColor='yellow';
text.style.cursor='help'"
onMouseout="text.style.color='black';
text.style.backgroundColor='white';
text.style.cursor='default'">
Treci peste mine!...
</span>

Folosind aceste propriet!#i, putem modifica dimensiunile unor imagini atunci cnd
intervin anumite evenimente sau la momente stabilite. Imaginile "i schimb! dimensiunile la
cerere, ceea ce nu se putea realiza pn! acum f!r! a renc!rca documentul:
<img id="logo" src="fcs-logo.jpg"
width="238" height="50"
onMouseover="micsoreaza()" onMouseout="revine()">
<script language="JavaScript1.2" type="text/javascript">
// mic"oreaz! dimensiunile imaginii
function micsoreaza() {
logo.style.pixelWidth = 170;
logo.style.pixelHeight = 33;
}
// revine la forma original!
function revine() {
logo.style.pixelWidth = 238;
logo.style.pixelHeight = 50;
}
</script>

Execu#ia acestui script poate fi urm!rit! n urm!toarele dou! figuri:

nainte de a plasa mouse-ul peste imagine

H - 39

Tehnologii Web

La plasarea mouse-ului deasupra imaginii

Con"inutul dinamic n Internet Explorer 4 !i ulterior

Relund exemplul de mutare a unui text pe ecran, n varianta Internet Explorer scriptul
va fi cel de mai jos:
<div id="movedtext"
style="position: relative; background: lightgreen">
Salut!ri din IE 5!
<hr>
</div>
<script language="JavaScript1.2" type="text/javascript">
// func#ia de mutare la stnga a elementului
function move_back() {
movedtext.style.pixelLeft -= 5;
if (movedtext.style.pixelLeft < 10)
setTimeout("move_ahead()", 50);
else
setTimeout("move_back()", 50);
}
// func#ia de mutare la dreapta a elementului
function move_ahead() {
movedtext.style.pixelLeft += 5;
if (movedtext.style.pixelLeft < 400)
setTimeout("move_ahead()", 50);
else
setTimeout("move_back()", 50);
}
move_ahead();
</script>

Func#iile move_ahead() "i move_back pot transla orice element. ncerca#i,

de exemplu, ca n loc de div s! insera#i un tabel identificat tot prin movedtext.
Pentru exemplul referitor la alternarea unor "iruri de caractere n fereastra navigatorului,
scriptul care rezolv! problema n Internet Explorer este urm!torul:
<div id="textul"></div>
<script language="JavaScript1.2" type="text/javascript">
// tabloul cu textele alternative
var continut = new Array();
continut[0] = "Bine a#i venit";
continut[1] = "la cursul de";
continut[2] = "<b>Tehnologii Web</b>";

H - 40

Tehnologii Web

// indic! textul care va fi afi"at

var index = 0;
// func#ia de scriere alternativ! a textelor
function scrie() {
textul.innerHTML = con#inut[index];
if (index == 2) // urm!torul text din tablou
index = 0;
else
index++;
setTimeout("scrie()", 5000);
}
// activeaz! func#ia la nc!rcarea paginii
window.onload = scrie;
</script>

Aici am folosit proprietatea innerHTML care este asociat! elementelor <span> "i
<div> "i care identific! de fapt con#inutul acestora.
Scrierea de scripturi pentru orice tip de browser
Dup! cum am v!zut n cele de mai sus, mijloacele de realizare a documentelor dinamice
difer! n func#ie de navigatorul utilizat. Dac! n Netscape putem folosi stratele, n Internet
Explorer avem la dispozi#ie diverse propriet!#i asociate n principal elementelor <span> "i
<div>.
n Netscape Communicator, un element <div> pozi#ionat la coordonate absolute se
comport! aproape la fel ca un strat specificat prin <layer>. Astfel, utiliznd n cadrul
documentelor HTML construc#ia:
<div id="identificator" style="position: absolute">

vom ob#ine (aproape) acelea"i efecte indiferent de agentul-utilizator folosit. Mai r!mne
doar s! se identifice browserul n care va rula scriptul "i n cazul Netscape s! se specifice
elementul dinamic prin document.identificator, iar n cazul Internet Explorer prin
identificator.
Din p!cate, n Netscape comportamentul lui <div> nu este 100% compatibil cu
<layer> "i programele JavaScript pot cauza, pe nea"teptate, blocarea sau terminarea
execu#iei aplica#iei.
Identificarea navigatorului se poate realiza urmnd "re#eta" urm!toare (ideea este s!
verific!m existen#a unor obiecte particulare, specifice fiec!rui tip de navigator):
// este Netscape Communicator 4 sau ulterior
// dac! suport! straturi
ns4 = (document.layers) ? true : false;
// este Internet Explorer 4 sau ulterior
// dac! suport! proprietatea 'all'
ie4 = (document.all) ? true : false;

H - 41

Tehnologii Web

// verific!m dac! este Internet Explorer 5

// (IE 5 se d! drept IE 4, pentru compatibilitate cu versiunile vechi)
if (ie4)
{
if (navigator.userAgent.indexOf('MSIE 5') > 0)
ie5 = true;
else
ie5 = false;
}
else
{
ie5 = false;
}

O alt! solu#ie este s! consult!m metoda appVersion a obiectului predefinit

navigator, executnd pentru afi"are metoda predefinit! alert():
<form>
<input type="button" value="Afl! versiunea"
onclick="javascript:alert(navigator.appVersion)">
</form>

Verificarea existen#ei browserului Internet Explorer 5 poate fi realizat! "i prin

comentariile condi#ionale if:
<!--[if IE 5]>
Sunte#i n IE 5!
<![endif]-->
<![if ! IE 5]>
Nu sunte#i n IE 5...
<![endif]>

Astfel, pot fi afi"ate diverse informa#ii ori pot fi utilizate caracteristici particulare
(e.g. tag-ul <marquee> sau propriet!#i DHTML) numai dac! navigatorul este Internet
Explorer 5 sau ulterior.
Cea mai bun! solu#ie este s! se determine pe partea serverului care versiune "i tip de
navigator sunt folosite de c!tre clientul Web "i s! se trimit! acelui agent-utilizator o pagin!
incluznd script-uri JavaScript specifice browserului folosit pe partea client.

3.4 Exemple de programe

n mod uzual, programele JavaScript vor fi scrise ntre <script> "i </script>,
defini#iile de obiecte "i de func#ii fiind incluse n antetul paginii Web.
a.

Hello, world!

<p>Clasicul mesaj:</p>
<script type="text/javascript">
document.write("Hello, world!");
</script>

H - 42

Tehnologii Web

b.

Inserarea de marcaje HTML cu JavaScript

<html>
<head>
<script type="text/javascript">
// func#ie de trasare a unei linii orizontale
function myline() {
document.write("<hr align='center' width=75%>");
}
// func#ie de afi"are titluri
function myheading(type, header, message) {
document.write("<h" + type + ">" + header + "</h" +
type + "><p>" + message);
}
</script>
</head>
<body>
<script type="text/javascript">
// apelarea func#iilor definite n antet
myline();
myheading(2, "JavaScript", "Hello, world!");
</script>
</body>
</html>

c.

Recursivitate n JavaScript

<html>
<head>
<script type="text/javascript">
function factorial(n) { // calcul!m factorialul
if ((n == 0) || (n == 1))
return 1;
else {
fact = n * factorial(n - 1);
return fact;
}
}
</script>
</head>
<body>
<script type="text/javascript">
// se afi"eaz! factorialul numerelor de la 0 la 9
for (i = 0; i < 10; i++) {
document.write("factorial de " +
i + " este egal cu ", factorial(i));
document.write("<br>");
}
</script>
</body>
</html>

H - 43

Tehnologii Web

d.

Interactivitate cu utilizatorul

<head>
<script type="text/javascript">
// calculeaz! aria unui cerc
function area(obiect) {
obiect.suprafatacerc.value =
3.1415 * obiect.razacerc.value
* obiect.razacerc.value;
}
</script>
</head>
<body>
<form name="calculcerc">
<p>Raza cercului:
<input type="text"
name="razacerc" size="25">
<input type="button" name="buton"
value="Calculeaz!!"
onclick="area(this.form)">
<p>
Suprafa#a:
<input type="text"
name="suprafatacerc"
size="30">
</p>
</form>
</body>

e.

Evaluarea expresiilor cu eval()

<head>
<script type="text/javascript">
function calcul(obiect) {
obiect.rezultat.value = eval(obiect.expr.value);
}
</script>
</head>
<body>
<form name="evaldinamic">
<p>
Expresia dorit! (introduce#i numai valori numerice):
<input type="text" name="expr" size="40">
<input type="button"
name="buton" value="Calculeaz!!"
onclick="calcul(this.form)">
<p>
Rezultatul este:
<input type="text" name="rezultat" size="20">
</form>
</body>

Experimenta#i acest exemplu; introduce#i (1+1)-(2*3)*3 sau -1/0).

H - 44

Tehnologii Web

f.

Modificarea culorilor de fundal

n acest exemplu se folose"te facilitatea limbajului de a realiza temporiz!ri prin

intermediul metodei predefinite setTimeout().
<head>
<script language="JavaScript" type="text/javascript">
// aloc! un obiect Array
// con#innd codurile de culori
var color= new Array(16);
color[ 1] = "ff";
color[ 2] = "ee";
color[ 3] = "dd";
color[ 4] = "cc";
color[ 5] = "bb";
color[ 6] = "aa";
color[ 7] = "99";
color[ 8] = "88";
color[ 9] = "77";
color[10] = "66";
color[11] = "55";
color[12] = "44";
color[13] = "33";
color[14] = "22";
color[15] = "11";
color[16] = "00";
function fadein(where) {
if (where >= 1) {
// seteaz! culoarea de fundal
document.bgColor = "#00" + color[where] + "00";
where -= 1;
setTimeout("fadein(" + where + ")", 15);
}
else {
setTimeout('fadeout(1)', 15);
}
}
function fadeout(where) {
if (where <=16) {
// seteaz! culoarea de fundal
document.bgColor = "#00" + color[where] + "00";
where += 1;
setTimeout("fadeout(" + where + ")", 15);
}
else {
setTimeout("fadein(16)",15);
}
}
</script>
</head>
<body onLoad="fadein(16)">
<p>Salut!...</p>
</body>

H - 45

Tehnologii Web

g.

Utilizarea metodelor obiectului Math

Ne propunem s! implement!m urm!torul joc banal: utilizatorul va introduce un

num!r de la 0 la 99 ntr-un formular "i va ap!sa un buton pentru a vedea dac!
num!rul specificat este mai mic dect un num!r generat aleatoriu de navigator.
n caz afirmativ, va fi afi"at un mesaj de felicitare "i jocul se va termina, altfel
utilizatorul va putea da un alt num!r, continund jocul. Codul este cel de mai jos:
<script type="text/javascript">
function Ghici(obiect)
{
// num!rul generat aleatoriu
var nrGenerat = Math.round(Math.random() * 100);
if (obiect.numar.value < nrGenerat)
{
// a ghicit, l felicit!m...
this.alert("Felicit!ri! Ai ghicit! :)");
// ..."i termin!m jocul
window.close();
}
else
{
// n-a ghicit...
this.alert("N-ai ghicit! :(\nNum!rul corect era " +
nrGenerat);
}
}
</script>
<form name="formular">
<center>
Un num!r, v! rog:
<input type="text" name="numar"
size="2" maxlength="2">
<br>
<input type="button" name="buton"
value="Ghici!" onClick="Ghici(this.form)">
</center>
</form>

h.

Un exemplu gre$it de folosire a metodei write()

Atunci cnd apel!m metoda write(), ea deschide "i "terge documentul, dac!
acest document nu exist! n cadrul procesului de deschidere "i procesare atunci
cnd este executat!. Urm!torul exemplu ilustreaz! un script care inten#ioneaz! s!
afi"eze timpul curent o dat! la fiecare minut, dar e"ueaz! dup! prima rulare
deoarece se "terge pe el nsu"i:
<html>
<head>
<script type="text/javascript">
function singOut() {
var theMoment = new Date();
var theHour = theMoment.getHours();
var theMinute = theMoment.getMinutes();
var theDisplacement =
(theMoment.getTimezoneOffset() / 60);
theHour -= theDisplacement;

H - 46

Tehnologii Web

if (theHour > 23)

theHour -= 24
document.write(theHour + " hours, " +
theMinute + " minutes, Coordinated Universal Time.");
window.setTimeout("singOut()", 60000);
}
</script>
</head>
<body>
<script type="text/javascript">
singOut();
</script>
</body>
</html>

Dup! prima apelare a func#iei singOut() dac! ncerc!m s! renc!rc!m

documentul vom ob#ine un mesaj de eroare. Pentru a vedea despre ce este vorba
putem scrie javascript: n bara de adrese a navigatorului Netscape pentru
a apela consola JavaScript sau s! ap!s!m icoana documentului n bara de stare a
navigatorului Internet Explorer.

Consola JavaScript pentru afi!area erorilor din cadrul scripturilor

(n Netscape Communicator 4.7x)

H - 47

Tehnologii Web

Semnalarea erorilor n Internet Explorer 5.x

Dac! utiliz!m metoda alert() n locul lui write() pentru a afi"a date, atunci
scriptul de mai sus ruleaz! corect:
window.alert(theHour + " hours, " +
theMinute + " minutes, Coordinated Universal Time.");
window.setTimeout("singOut()", 60000);

i.

Schimbarea unei imagini atunci cnd mouse-ul trece deasupra ei

Func#iile de mai jos, f!cnd parte din proiectul AIpaedia, au fost concepute de
absolventul Ovidiu Gheorghie$:
function LiveButton(src1, src2, destination, x, y, z) {
// 'src1', 'src2' sunt sursele (URL-urile) a dou! imagini
// ce vor fi interschimbate atunci cnd mouse-ul va trece
// peste ele; imaginile vor fi afi"ate la coordonatele absolute
// (x, y) cu z-index = z
// se va crea "i o leg!tur! la un document
// aflat la adresa 'destination'
// ini#ializeaz! metodele obiectului
this.mouseOver = LiveButton_mouseOver;
this.mouseOut = LiveButton_mouseOut;

H - 48

Tehnologii Web

this.src1 = src1; // stocheaz! numele imaginilor ce vor alterna

this.src2 = src2;
this.x = x;
// "i pozi#ia absolut! a lor
this.y = y;
// memoreaz! imaginile n vectorul 'images'
this.images = new Array(2);
this.images[0] = new Image();
this.images[0].src = src1;
this.images[1] = new Image();
this.images[1].src = src2;
this.layerIndex = document.layers.length;
// se utilizeaz! un strat pentru
// pozi#ionarea absolut! a imaginilor
document.write('<LAYER left=' + x + ' top=' + y +
'z-index=' + z + '>');
this.imageIndex =
document.layers[this.layerIndex].document.images.length;
// ne baz!m pe evenimentele onMouseOver "i onMouseOut
document.write(' <A HREF= "' + destination + '" ' +
'onMouseOver = "document.layers[' +
this.layerIndex + '].document.images[' +
this.imageIndex + '].listener.mouseOver();
return true;"' +
'onMouseOut = "document.layers[' +
this.layerIndex + '].document.images[' +
this.imageIndex + '].listener.mouseOut();
return true;"' +
'>' );
// se afi"eaz! imaginea
document.write('<IMG SRC="' + src1 + '" BORDER=0>');
document.write(' </A>');
document.write('</LAYER>');
this.image =
document.layers[this.layerIndex].document.
images[this.imageIndex];
document.layers[this.layerIndex].
document.images[this.imageIndex].listener = this;
}
/* func#ie apelat! atunci cnd
mouse-ul este deasupra imaginii */
function LiveButton_mouseOver() {
// modific! imaginea ce va fi afi"at!
this.image.src = this.src2;
}
/* func#ie apelat! atunci cnd
cursorul mouse-ului iese */
function LiveButton_mouseOut() {
// modific! imaginea din nou
this.image.src = this.src1;
}

Pentru o utilizare efectiv!, putem include ntr-un document HTML o declara#ie

JavaScript de genul:
H - 49

Tehnologii Web

var btclick = LiveButton("ButtonOff.gif", "ButtonOn.gif",

"click-me.html", 300, 90, 2);

O enciclopedie n domeniul inteligen"ei artificiale: AIpaedia

Din p!cate, codul de mai sus nu este portabil, fiind rulabil numai sub navigatorul
Netscape.
O solu#ie independent! de browser este urm!toarea:
<script language="JavaScript" type="text/javascript">
// test!m dac! navigatorul suport! imaginile
if (document.images)
{
// instan#ierea obiectelor Image
image1 = new Image;
image2 = new Image;
// nc!rcarea imaginilor
image1.src = "enter1.gif";
image2.src = "enter2.gif";
}

H - 50

Tehnologii Web

// func#ia de schimbare a imaginii

function chgImg(name, image)
{
if (document.images)
{
document[name].src = eval(image + ".src");
}
}
</script>
...
<a href="..."
onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'>
<img name="enter" src="enter1.gif"
border="0" alt="Apas! aici!">
</a>

Pentru conceperea de programe JavaScript se pot utiliza aplica#ii vizuale, editoare "i
generatoare sofisticate, dintre care putem aminti Macromedia Dreamweaver, Adobe PageMill sau
CS Scribber. Exist! de asemeni o multitudine de aplica#ii de mai mic! anvergur!, specializate
pe o anumit! tematic! (creare de meniuri, prelucrare de formulare, managementul
stratelor etc.). Din aceast! categorie face parte "i Java Script Menu Generator, program
elaborat n Java de studen#ii C!t!lin Constantin Ghiorghi"! "i Monica P!dureanu.

H - 51

Tehnologii Web

Java Script Menu Generator

H - 52

Tehnologii Web

4. Concluzii
JavaScript este o alternativ! la limbajul Java n ceea ce prive"te conceperea de pagini Web
cu con#inut dinamic, dar nu poate fi folosit dect n contextul unui anumit navigator,
coexistnd cu documentele HTML. JavaScript poate fi utilizat pentru emularea ierarhiei de
obiecte a modelului DOM, reprezentnd o solu#ie facil! pentru programarea pe partea
client a aplica#iilor Web.
Utilizarea cea mai spectaculoas! a stratelor definite de DHTML JavaScript este anima"ia
paginilor WWW, programatorii avnd posibilitatea de a proiecta "i implementa diverse
prezent!ri multimedia (ns! nu att de flexibile precum cele scrise n SMIL).
DHTML mpreun! cu facilit!#ile JavaScript sau JScript ofer! o alternativ! la prezent!rile
proprietare Macromedia Flash.

H - 53

Tehnologii Web

"nceputul nu las# s# se ntrevad# sfr!itul."

(Herodot)

Tehnologii Web

1. Istoric i caracterizare
1.1 Scurt istorie
nc! tn!r, limbajul Java a fost proiectat, mpreun! cu mediul lui de dezvoltare "i de
execu#ie, pentru dezvoltarea de aplica#ii performante destinate aparatelor electronice de larg
consum (portabile, distribuite, lucrnd n timp real), ulterior influen#nd semnificativ
Internetul. Firma Sun, care s-a concentrat n proiectarea acestui nou limbaj, a pornit ini#ial
la drum cu limbajul C, dar din cauza complexit!#ii ridicate a nceput s! dezvolte un
descendent mai flexibil, mai facil, mai portabil. Creatorul limbajului a fost James Gostling,
de asemeni autor al binecunoscutului program de editare Emacs din mediile Unix "i al
sistemului de ferestre NeWS. De"i proiectul (denumit ini#ial Oak de la copacul din fa#a
biroului p!rintelui s!u) a debutat n 1990, specifica#ia noului limbaj s-a dat publicit!#ii abia
n anul 1995 la conferin#a SunWorld din San Francisco. Descoperindu-se c! numele
limbajului era deja utilizat, Oak s-a transformat n Java, devenind deliciul programatorilor
iubitori de cafenele "i de exotice arome. De atunci "i pn! n prezent, lumea Java tr!ie"te
ntr-o continu! agita#ie, ap!rnd alte "i alte inova#ii "i modific!ri ale limbajului, noi tr!s!turi
"i medii de dezvoltare, al!turi de JDK (Java Development Kit) pus la dispozi#ie de
compania Sun: Visual Java (Microsoft), Visual Caf for Java (Symantec), Visual Age for Java
(IBM), SuperCede for Java (Asymetrix) etc. Actualmente (nceputul anului 2001) este
disponibil Java 2 SDK, versiunea 1.3.
O parte dintre proiectan#ii de pagini Web au r!mas reticen#i la noul limbaj, obiectnd fie
complexitatea suficient de ridicat!, fie faptul c! nu oferea toate facilit!#ile prezente n C++
din care se tr!gea. Astfel, Netscape ("i ulterior alte browsere) ofer! un mediu
orientat-obiect, acest mediu fiind JavaScript, pe care l-am prezentat n capitolul precedent.
Aceast! sec#iune nu se dore"te a fi o prezentare exhaustiv! a limbajului Java, pentru mai
multe am!nunte putndu-se consulta bibliografia.

1.2 Caracterizare a limbajului

Tr!s!turile importante ale limbajului Java sunt urm!toarele:

simplitatea
Java ncearc! s! r!mn! un limbaj u"or de utilizat chiar "i de c!tre
programatorii neprofesioni"ti, fiind ndep!rtate aspecte derutante precum
supranc!rcarea operatorilor "i mo"tenirea multipl!. De asemeni, lipse"te
adresarea prin intermediul pointerilor.

portabilitatea
Limbajul Java este independent de ma"ina pe care lucreaz! (suport pentru
portabilitate "i independen#! hardware). n loc s! genereze cod nativ pentru o
platform! particular!, compilatorul va genera o secven#! de instruc#iuni ale
unei ma!ini virtuale Java (Java Virtual Machine - JVM), execu#ia
aplica#iilor fiind interpretat!. Astfel, compilatorul Java nu traduce Java n limbaj
ma"in!, ci ntr-un limbaj pseudo-ma"in! denumit cod binar (byte-code) Java.
Codul binar este limbajul ma"in! pentru calculatorul Java imaginar. Pentru a se
I-2

Tehnologii Web

putea rula cod binar Java pe un calculator particular, trebuie s! se instaleze

ma"ina virtual! Java pe acel calculator. Anumite JVM-uri pot traduce codul
binar n limbaj ma"in! imediat, fiind numite compilatoare Just-In-Time (JIT).
De asemeni, sunt dezvoltate procesoare noi pentru a implementa JVM direct
n hardware, pentru a nu mai exista penaliz!ri de perfoman#!.
Navigatoarele Web actuale posed! implementate JVM-uri cu ajutorul c!rora
pot rula a"a-numitele applet-uri Java, programe Java care sunt apelate din
cadrul paginilor WWW.

orientare-obiect
n Java se pot crea clase de obiecte "i instan#e ale lor, se pot ncapsula
informa#iile, suportndu-se mo"tenirea simpl! "i legarea dinamic!. Clasele pot
fi declarate abstracte (o clas! abstract! reprezentnd o clas! pentru care nu
s-au precizat toate metodele astfel nct aceasta s! poate fi folosit! n mod
direct, ci numai prin intermediul unor clase derivate).
Java ns! nu ofer! mo"teniri multiple, suplinite de o facilitate denumit!
interfa"! care permite definirea unui anumit comportament pentru o clas! de
obiecte, altul dect cel specificat de clasa de baz!. Interfe#ele pot fi privite ca
un mecanism mai avansat dect cel al claselor abstracte, util pentru ascunderea
implement!rii metodelor. Astfel, un anumit obiect va fi vizibil numai prin
intermediul interfe#ei sale.
Interfe#ele se pot utiliza pentru descrierea claselor unui program "i pentru
definirea structurii de mo"tenire (derivare) a claselor, dar nu pot fi folosite la
specificarea instan#elor unei clase. Astfel, o interfa#! specific! doar scheletul
unei clase.
A"adar, o interfa#! este un set de opera#ii care trebuiesc definite de o clas!
de obiecte pentru a se nscrie ntr-o anumit! categorie. O clas! care define"te
toate metodele (opera#iile) unei interfe#e se spune c! implementeaz! acea
interfa#!.

distribuirea
Java este un limbaj distribuit, avnd implementate biblioteci pentru lucrul n
re#ea (suport la nivel nalt pentru socket-uri "i apelul la distan#! prin mecanismul
RMI - Remote Method Invocation). Exist! posibilitatea de a concepe
aplica#ii care lucreaz! cu mai multe fire de execu"ie (thread-uri); se ofer! de
asemeni primitive de sincronizare, independente de (ori bazate pe) sistemul de
operare (Unix, OS/2, Windows NT ofer! suport pentru fire de execu#ie
multiple).

Setul de caractere al limbajului este Unicode (pe 16 bi#i), mai flexibil dect setul ASCII
(pe 8 bi#i). Aceast! facilitate ofer! "i posibilitatea de interna#ionalizare a codului.
Tipurile primitive sunt urm!toarele:

I-3

Tehnologii Web

Tip

Valori

Cuvnt cheie

boolean

true, false

boolean

caracter

cod Unicode

char

octet

8 bi#i

byte

scurt

16 bi#i

short

propriu-zis

32 bi#i

int

lung

64 bi#i

long

flotant

32 bi#i

float

dublu

64 bi#i

double

ntreg

real

Tipurile primitive n limbajul Java

Tipurile referin"# sunt folosite pentru a referi un obiect din interiorul altui obiect:

referin#! c!tre o clas!;

referin#! c!tre o interfa#!;

referin#! c!tre un tablou.

Desigur, operatorii sunt similari celor din C "i nu vom mai insista asupra prezent!rii lor.
Excep#ie fac operatorii de concatenare "i asignare de "iruri care sunt cei naturali (desemna#i
de "+" "i "=", respectiv), n limbajul C/C++ fiind implementa#i ca func#ii standard de
bibliotec! (strcat() "i, respectiv, strcmp()).
Instruc"iuni

blocuri de instruc#iuni delimitate ntre caracterele "{" "i "}";

declara#ii de variabile locale;

atribuirea;

instruc#iuni condi#ionale: if, switch;

instruc#iuni de ciclare: while, do, for;

instruc#iuni de salt: break, continue;

I-4

Tehnologii Web

instruc#iuni de retur: return, throw;

instruc#iuni de protec#ie "i de sincronizare: try, catch, finally,

syncronized.

Clase
n prima versiune a limbajului (Java 1.0) a fost introdus un cadru abstract, denumit
Abstract Window Toolkit (AWT), compus dintr-o ierarhie de clase menite a fi utilizate la
crearea interfe#elor grafice cu utilizatorul. Interfe#ele construite pe baza AWT ofer! acela"i
comportament indiferent de platforma pe care ruleaz! aplica#iile Java, dar sunt rudimentare
"i nu pun la dispozi#ie toate facilit!#ile interfe#elor moderne.
Ideea de baz! a AWT era ns! cea de a oferi o bibliotec! portabil! de clase. Astfel, n Java
JDK versiunea 1.1, AWT a devenit o parte important! a unui set de clase pentru
construirea interfe#elor grafice denumit Java Foundation Classes (JFC), similar ierarhiilor de
clase Visual Component Library (VCL) din Delphi ori Microsoft Foundation Classes (MFC) din
Visual C++.
JFC, prin Swing, ofer! posibilitatea cre!rii unor interfe#e grafice profesioniste, nu numai
pentru applet-uri, ct "i pentru aplica#iile standard. Mai multe am!nunte vom da ulterior n
cadrul acestui capitol.
Astfel, puterea limbajului Java rezid! n faptul c! se ofer! o serie de clase predefinite,
grupate, sau ncapsulate n pachete, din care utilizatorul poate deriva propriile sale clase,
mo"tenindu-le pe cele de baz!. Pachetele pot avea nume ierarhice, urmnd structura de
directoare n care sunt stocate clasele compilate.
De exemplu, n distribu#ia Java 1.1.6, sunt puse la dispozi#ie urm!toarele pachete,
con#innd peste 450 de clase "i interfe#e:
java.applet
java.awt.datatransfer
java.awt.event
java.awt
java.awt.image
java.beans
java.io
java.lang
java.lang.reflect
java.math
java.net

java.rmi.dgc
java.rmi
java.rmi.registry
java.rmi.server
java.security.acl
java.security
java.security.interfaces
java.sql
java.text
java.util
java.util.zip

Pachetele de clase Java $.$.6

Desigur, fiecare nou! versiune de Java aduce noi pachete "i mbun!t!#e"te pe cele vechi.
Programatorul "i poate defini propriile pachete, gruparea claselor n pachete fiind o
problem! care trebuie rezolvat! la nivelul program!rii.
Dup!

cum

se

poate

observa,

numele
de
pachete
au
sintaxa
[NumePachet.]NumeComponent!Pachet "i exist! o regul! pentru numirea
pachetelor, astfel nct s! nu apar! conflicte. Conven#ia este aceea de a utiliza numele
domeniului Internet apar#innd produc!torului (autorului) claselor. De exemplu,
am putea avea:
I-5

Tehnologii Web

com.superlookup.bot.WebIndexer
java.servlet.Servlet
org.ieee.agent.kqml.KQML
com.ibm.aglet.Aglet

Pachetele vor fi importate n cadrul programelor Java prin instruc#iunea import

numeClas! sau import numePachet.* (n acest ultim caz, se va importa un pachet

complet, adic! toate clasele din componen#a lui).

O alt! facilitate interesant! este aceea de a da posibilitatea programatorilor de a concepe

componente reutilizabile n Java. Acest lucru este fezabil prin folosirea unui model
orientat-component!, independent de platform! "i portabil, denumit JavaBeans.
Componentele JavaBeans pot fi manipulate vizual "i se pot combina pentru a construi
aplica#ii complexe, prin reutilizarea codului. Putem privi JavaBeans ca o punte de leg!tur!
dintre diverse modele proprietare de dezvoltare a componentelor, precum Component
Object Model (COM). ncepnd cu Java 1.1, modelul JavaBeans este suportat nativ.
Diferen"e ntre Java !i JavaScript
Exist! mai multe diferen#e esen#iale ntre limbajele Java "i JavaScript, cele referitoare la
programarea orientat!-obiect fiind sintetizate n urm!torul tabel:
Java
Clasa "i
distincte.

instan#a

JavaScript
reprezint!

entit!#i

Toate obiectele sunt instan#e.

O clas! se define"te printr-o construc#ie

Se definesc "i se creaz! mul#imi de obiecte
de clas!, iar instan#ierea se realizeaz! prin
prin func#ii de tip constructori.
intermediul unui constructor.
Ierarhia de clase se realizeaz! asignnd un
Ierarhia de clase se realizeaz! prin
obiect privit ca prototip asociat unei func#ii
construc#ii de subclase a unei clase.
de tip constructor.
Propriet!#ile mo"tenite urmeaz! traseul de
Propriet!#ile mo"tenite urmeaz! traseul de
definire a (sub)claselor n cadrul ierarhiei.
definire a prototipurilor.
Func#ia constructor "i prototipul specific!
O defini#ie de clas! specific! toate
o mul"ime ini"ial! de propriet!#i. Propriet!#ile
propriet!#ile tuturor instan#elor unei clase,
pot fi ad!ugate/"terse dinamic la momentul
neputndu-se ad!uga dinamic la momentul
rul!rii pentru obiecte individuale sau pentru
execu#iei.
toat! mul#imea de obiecte.
Compara"ie ntre Java !i JavaScript

I-6

Tehnologii Web

Putem compara, de asemeni, func#ionalitatea applet-urilor Java cu cea a scripturilor

JavaScript:
Applet Java

Script JavaScript

Compilat pe server n formatul byte-code,

interpretat la nivelul clientului.

Interpretat de client.

Distinct de codul HTML, este stocat

Integrat sau distinct de codul HTML.
separat.
Accesat din cadrul paginilor Web.
Accesat din cadrul paginilor Web.
Tipuri de date complexe, cu verificarea
Tipuri de date simple, f!r! verificarea
tipurilor (strong typing).
tipurilor (loose typing).
Referin#ele la obiecte trebuie s! existe la
Referin#ele la obiecte sunt verificate la
momentul compil!rii (static binding).
momentul rul!rii (dynamic binding).
Sigur, nu poate citi de pe sau scrie pe
Sigur, nu poate citi de pe sau scrie pe
hard-discul clientului, f!r! permisiunea
hard-discul clientului (excep#ie f!cnd
explicit! a utilizatorului sau f!r! existen#a
script-urile JScript).
unor certificate de autentificare.
Diferen"e majore dintre applet-uri !i script-uri

I-7

Tehnologii Web

2. Applet-uri
A"a cum am v!zut mai sus, applet-urile Java sunt mici aplica#ii Java care sunt apelate
dintr-un document HTML, fiind nc!rcate n momentul acces!rii paginii Web de pe server
"i executate (interpretate) pe ma"ina clientului. Fiecare applet are rezervat! o fereastr! prin
care comunic! cu utilizatorul, definit! de marcatorul <applet>.

2.1 Primul applet

S! presupunem c! dorim s! scriem un applet care s! afi"eze clasicul mesaj "Hello, world!"
n pagina Web:
// import! pachetele AWT (Abstract Window Toolkit) "i Applet
import java.awt.Graphics;
import java.applet.Applet;
public class HelloWorldApplet extends java.applet.Applet
{
// mo"tenitor
private String str;
// metoda de ini#ializare
public void init()
{
// memoreaz! parametrul
str = getParameter("msg");
// dac! nu exist!, se ia unul implicit
if (str == null) {
str = "Hello, world!";
}
// aloc! zona de desenare
resize(150, 100);
}
// scrie un "ir de caractere
// la coordonatele specificate
public void paint(Graphics gr)
{
gr.drawString(str, 50, 50);
}
}

Pentru a vedea efectiv rezultatele rul!rii applet-ului, scriem o pagin! minimal! care va
apela applet-ul de mai sus. n prealabil, applet-ul va trebui compilat cu un compilator Java
(i.e. javac) care va genera un fi"ier byte-code Java cu extensia .class.

I-8

Tehnologii Web

<html>
<head><title>Hello world!</title></head>
<body>
<p>Un mesaj:
<applet code="HelloWorldApplet.class"
width="150" height="150"></applet>
</body>
</html>

Applet-ul definit mai sus nu define"te dect dou! metode: una de ini#ializare, necesar!
pentru organizarea mediului n care ruleaz! applet-ul (de cele mai multe ori, navigatorul
Web) "i una de desenare a spa#iului destinat applet-ului n interiorul unei pagini Web).
Metoda init() va redimensiona spa#iul zonei de desenare, iar paint() va afi"a n acest
spa#iu un mesaj de salut.
Applet-ul definit mai sus poate accepta "i parametri ("irul de afi"at) care trebuie
specifica#i de tag-ul <param>. De exemplu, n loc de "Hello, world!" putem specifica
"Hello, Faculty of Computer Science!" incluznd dup! <applet> "i:
<param name="msg" value="Hello, Faculty of Computer Science!">

Execu#ia unui applet este marcat! de o serie de evenimente generate de c!tre navigator.
Cnd acesta ntlne"te <applet>, va porni nc!rcarea (folosind tot protocolul HTTP)
codului necesar rul!rii applet-ului, cod aflat pe server "i care va fi executat pe calculatorul
client, odat! ce a fost nc!rcat complet. Dup! nc!rcare, applet-ul este apelat pentru
ini#ializare (preg!tirea parametrilor "i ob#inerea de resurse sistem). Dup! aceast! etap!,
navigatorul trimite c!tre applet o comand! de pornire "i applet-ul intrat n func#iune va
interac#iona cu utilizatorul.

Interac"iunea clasic# server-client Web

!i interac"iunea prin intermediul unui applet
nc#rcat de pe serverul java.sun.com

I-9

Tehnologii Web

Un applet ruleaz! atta vreme ct navigatorul este activ. La schimbarea paginii,

applet-urile din vechea pagin! nu dispar, ci primesc o comand! de suspendare (pe care pot
s! o ignore).
Avantajul folosirii applet-urilor rezid! n posibilitatea de a crea pagini Web dinamice sau
care s! se modifice n func#ie de preferin#ele "i interac#iunea utilizatorului, de a partaja
diferite applet-uri utile la nivel mondial. Iat! un exemplu n care un applet, implementnd
func#iile unui program de calcul tabelar (spreadsheet) poate fi rulat de mai multe navigatoare,
pe diverse platforme, aflate la diverse adrese Internet:

Un applet folosit n mai multe pagini Web procesate de diverse navigatoare

2.2 Detalii
Applet-urile sunt construite folosind un cadru obiectual de dezvoltare a aplica#iilor,
ele trebuind s! redefineasc! metodele clasei Applet. Cele mai importante metode sunt
sintetizate n tabelul de mai jos:
Metod#

Descriere

init()

Apelat! la ini#ializarea (instan#ierea) applet-ului. Spre deosebire de

programele Java obi"nuite, applet-urile nu vor trebui s! defineasc!
metoda main(), pe post de constructor fiind metoda init().
ntotdeauna, init() va fi redefinit! de programator.

start()

Este apelat! de fiecare dat! cnd applet-ul este afi"at de

navigatorul Web; de obicei va fi executat! imediat dup! init().

paint()

Va fi apelat! de metoda update() pentru a remprosp!ta zona

de afi"are ocupat! de applet.

I - 10

Tehnologii Web

stop()

Este apelat! ori de cte ori applet-ul dispare din fereastra curent!
a navigatorului, pentru a opri (temporar) opera#iunile executate de
applet; de obicei va fi apelat! nainte de destroy().

destroy()

Apelat! atunci cnd navigatorul elimin! complet applet-ul, fiind

utilizat! la eliberarea resurselor de#inute de acel applet.
Metodele unui applet Java

2.3 Interfaa cu utilizatorul (n stil vechi)

Vom complica pu#in codul applet-ului dat mai sus, ad!ugnd o serie de elemente de
interfa#! cu ajutorul c!rora utilizatorul va putea interac#iona cu applet-urile create.
Astfel, vom putea specifica butoane, cmpuri de dialog, etichete, liste de op#iuni "i vom
putea controla ac#iunile mouse-ului sau ale tastaturii prin intermediul evenimentelor.
O parte dintre applet-urilor prezentate n continuare reprezint! adapt!ri dup! sursele
lui Bruce Eckel.
Butoane
Clasele AWT (Abstract Window Toolkit) furnizeaz! componenta Button pentru a insera
un buton pe zona de afi"are a applet-ului (canvas-ul), prin intermediul constructorului s!u.
Nu trebuie n mod explicit s! redesen!m butonul (sau oricare alt! component! de interfa#!)
n vederea reactualiz!rii canvas-ului. Dup! instan#ierea unui buton prin new, acesta va trebui
ad!ugat canvas-ului prin intermediul metodei add().
Mai trebuie ata"at un comportament al butonului la ap!sarea lui. Acest lucru se realizeaz!
prin capturarea evenimentului ap!s!rii unui buton "i tratarea lui (paradigma program!rii
orientate-eveniment).
Din p!cate, AWT versiunea 1.0 nu ofer! o abordare obiectual! pentru tratarea
evenimentelor, totul rezumndu-se la redefinirea metodei action() unde va trebui s!
test!m care component! a interfe#ei cu utilizatorul a fost ac#ionat!. De"i aceast! manier!
este considerat! dep!"it!, fiind nlocuit! n AWT 1.1 cu un alt mecanism, este n continuare
folosit! n cadrul applet-urilor, deoarece nc! mai pot exista sisteme utiliznd modelul
vechi.
Primul argument al metodei action() este de tip Event "i denot! evenimentul dorit a
fi tratat de programator, iar al doilea parametru reprezint! #inta evenimentului (de cele mai
multe ori va fi ignorat).
// Butoane
import java.awt.*;
import java.applet.*;
public class ButtonApplet extends Applet {
// declararea butoanelor
Button b1 = new Button("Salut");
Button b2 = new Button("Alt salut");

I - 11

Tehnologii Web

// ini#ializare
public void init() {
add(b1); // adaug! butoanele
add(b2);
}
// tratarea evenimentelor
public boolean action(Event evt, Object arg) {
// s-a ap!sat primul buton
if (evt.target.equals(b1))
getAppletContext().showStatus("Un salut");
// s-a ap!sat al doilea buton
else if (evt.target.equals(b2))
getAppletContext().showStatus("Alt salut");
// s-a ap!sat altceva
else
// clasa de baz! se ocup! de eveniment
return super.action(evt, arg);
return true;
}
}

Applet-ul va putea fi compilat cu op#iunea -deprecation. La ap!sarea butoanelor,

pe bara de stare a navigatorului va apare un mesaj n func#ie de butonul ap!sat (efectul
metodei showStatus()). Dac! nu butoanele definite sunt vizate, atunci se va executa
metoda original! a clasei de baz!, super-clasa (denotat! de cuvntul cheie super).
n loc de a verifica dac! #inta evenimentului este un buton particular cu
if (evt.target.equals(b1)), putem s! utiliz!m al doilea argument al lui
action(),
adic! s! compar!m eticheta ata"at! obiectului vizat prin
if (arg.equals("Salut")).

Clasa Component pune la dispozi#ie "i alte metode care pot fi utilizate ca alternative la
action(): keyDown(), keyUp(), gotFocus(), lostFocus(), mouseDown(),
mouseUp(), mouseMove(), mouseEnter(), mouseExit().
Cmpuri text
Putem folosi cmpuri text editabile prin intermediul componentei TextField
(mo"tenit! din componenta mai general! TextComponent). Astfel, modificnd exemplul
de mai sus, nu vom mai utiliza linia de stare a navigatorului pentru a afi"a texte, ci un
TextField. Aceast! abordare este similar! program!rii vizuale n Delphi, de pild!.
Codul applet-ului este urm!torul:
// Butoane "i texte
import java.awt.*;
import java.applet.*;
public class TextFieldApplet extends Applet {
// dou! butoane
Button
b1 = new Button("Adaug un salut"),
b2 = new Button("Sterg");

I - 12

Tehnologii Web

// un cmp text de lungime 30

TextField
t = new TextField("Un text ini#ial...", 30);
// ini#ializare
public void init() {
add(b1);
add(b2);
add(t);
}
// tratare evenimente
public boolean action (Event evt, Object arg) {
if (evt.target.equals(b1))
{
// inser!m un salut
t.setText(t.getText() + " salut ");
// nu mai poate fi editat
t.setEditable(false);
}
else
if (evt.target.equals(b2))
{
// "tergem textul
t.setText("");
// poate fi editat
t.setEditable(true);
}
else
return super.action(evt, arg);
return true;
}
}

Se constat! faptul c! de"i cmpul nu mai poate fi editat de utilizator, prin program se pot
ad!uga noi caractere.

I - 13

Tehnologii Web

TextFieldApplet n execu"ie

Pentru editarea de c!tre utilizator a unei cantit!#i mai mari de text, n locul lui
TextField se poate folosi TextArea.

Etichete
Pentru a nzestra anumite elemente de interac#iune cu texte explicative, vom utiliza
componenta Label, dup! cum se poate vedea din exemplul de mai jos:
...
// un cmp text
TextField t = new TextField("t", 20);
// o etichet! aliniat! la stnga
Label lab = new Label("Numele: ", Label.LEFT);
...
// ad!ug!m componentele pe canvas
add(lab);
add(t);
...

Butoane de selec"ie (check-box !i radio)

Sunt similare butoanelor de selec#ie ntlnite la formularele HTML. Iat! un exemplu,
n care reg!sim mai multe tipuri de butoane la ap!sarea c!rora se vor ad!uga ntr-un
TextArea diferite texte:

I - 14

Tehnologii Web

// Butoane "i texte

import java.awt.*;
import java.applet.*;
public class ButtonsApplet extends Applet {
Checkbox
c1 = new Checkbox("Utilizator nou"),
c2 = new Checkbox("Invitat");
// un grup de butoane radio
CheckboxGroup g = new CheckboxGroup();
Checkbox
r1 = new Checkbox("Copil", g, false),
r2 = new Checkbox("Matur", g, true),
r3 = new Checkbox("Vrstnic", g, false);
TextArea
t = new TextArea(14, 40);
// ini#ializare
public void init() {
add(t);
add(c1); add(c2);
add(r1); add(r2); add(r3);
}
// tratare evenimente
public boolean action (Event evt, Object arg) {
if (evt.target.equals(c1))
showText(c1.getState() ? "Nou" : "Vechi");
else
if (evt.target.equals(c2))
showText(c2.getState() ? "Invitat" : "");
else
if (evt.target.equals(r1))
showText("Copil");
else
if (evt.target.equals(r2))
showText("Matur");
else
if (evt.target.equals(r3))
showText("Vrstnic");
else
return super.action(evt, arg);
return true;
}
// afi"are text (func#ie utilizator)
void showText(String str) {
t.appendText(str + "\n");
}
}

Liste
Choice permite selectarea unui element dintr-o list! de op#iuni (texte), func#ionalitatea

lui emulnd par#ial combo-listele din Windows. Utilizatorul nu va putea selecta mai mult de un
singur element.
I - 15

Tehnologii Web

import java.awt.*;
import java.applet.*;
public class ChoiceApplet extends Applet {
String[]
culori = { "Ro"u", "Galben", "Albastru" };
TextField t = new TextField(30);
Choice c = new Choice();
// un contor
int count = 0;
// ini#ializare
public void init() {
// textul nu este editabil
t.setEditable(false);
// adaug! pe canvas controalele
for(int i = 0; i < culori.length; i++)
c.addItem(culori[count++]);
add(t);
add(c);
}
// tratare evenimente
public boolean action (Event evt, Object arg) {
if (evt.target.equals(c))
t.setText("s-a ales [" +
c.getSelectedIndex() + "] " + (String)arg);
else
return super.action(evt, arg);
return true;
}
}

Pentru selec#ii multiple, dar f!r! a fi derulante, vom folosi liste de tip List. Pentru a afla
care elemente au fost selectate se va apela metoda getSelectedItems(). Ac#iunea
implicit! n cazul componentei List este click-ul dublu, nu cel simplu. Un simplu click
va avea drept efect selectarea sau deselectarea unui element din list!, iar un dublu click va
apela action().
D!m mai jos un exemplu n care utilizatorul poate selecta culori dintr-o list! de maxim
cinci culori (ini#ial fiind afi"ate numai trei dintre ele).
public class ListApplet extends Applet {
String[] culori = { "Ro"u", "Galben", "Albastru",
"Alb", "Negru" };
// afi"eaz! elementele "i
// permite selec#ia multipl!
List lst = new List(5, true);
TextArea t = new TextArea(culori.length, 30);
Button b = new Button("Adaug!");

I - 16

Tehnologii Web

int count = 0;
public void init() {
t.setEditable(false);
// va afi"a doar primele 3 elemente
for(int i = 0; i < 3; i++)
lst.addItem(culori[count++]);
add(t);
add(lst);
add(b);
}
public boolean action (Event evt, Object arg) {
if (evt.target.equals(lst)) {
t.setText("");
String[] items = lst.getSelectedItems();
// listeaz! culorile selectate
for(int i = 0; i < items.length; i++)
t.appendText(items[i] + "\n");
}
else
if (evt.target.equals(b)) {
if (count < culori.length)
lst.addItem(culori[count++], 0);
}
else
return super.action(evt, arg);
return true;
}
}

Tratarea evenimentelor cu handleEvent()

Metoda prezentat! mai sus se dovede"te greoaie "i primitiv!, printr-o cascad! de if-uri
trebuind s! stabilim ce ac#iune dorim s! fie executat! pentru un element particular de
interfa#!. Vom da n continuare o alternativ! reprezentat! de metoda handleEvent().
Aceasta va fi apelat! n mod automat atunci cnd un anume obiect a declan"at un
eveniment (e.g. trecerea cursorului mouse-ului peste un buton sau ap!sarea unui buton
radio).
Metoda handleEvent() poate fi util! "i pentru uniformizarea comport!rii unor
componente (de exemplu, List care implicit r!spunde la click dublu).
Vom modifica exemplul anterior astfel nct lista s! reac#ioneze la click simplu.
// Liste
import java.awt.*;
import java.applet.*;
public class List2Applet extends Applet {
String[] culori = { "Ro"u", "Galben", "Albastru",
"Alb", "Negru" };

I - 17

Tehnologii Web

// afi"eaz! elementele "i

// permite selec#ia multipl!
List lst = new List(5, true);
TextArea t = new TextArea(culori.length, 30);
Button b = new Button("Adaug!");
int count = 0;
public void init() {
t.setEditable(false);
// va afi"a doar primele 3 elemente
for(int i = 0; i < 3; i++)
lst.addItem(culori[count++]);
add(t);
add(lst);
add(b);
}
public boolean handleEvent(Event evt) {
// evenimentele LIST_SELECT sau LIST_DESELECT
// apar la un click simplu pe elementele listei
if(evt.id == Event.LIST_SELECT ||
evt.id == Event.LIST_DESELECT) {
// este lista de culori?
if (evt.target.equals(lst)) {
t.setText("");
String[] items = lst.getSelectedItems();
for (int i = 0; i < items.length; i++)
t.appendText(items[i] + "\n");
}
else
// de restul se ocup! metoda original!
// care va apela super.action()
return super.handleEvent(evt);
}
else
return super.handleEvent(evt);
return true;
}
public boolean action (Event evt, Object arg) {
if (evt.target.equals(b)) {
if (count < culori.length)
lst.addItem(culori[count++], 0);
}
else
return super.action(evt, arg);
return true;
}
}

Un instantaneu din execu#ia acestui applet este prezentat n figura urm!toare:

I - 18

Tehnologii Web

Selectarea mai multor elemente dintr-o list#

Moduri de prezentare
Elementele de interfa#! ale unui applet pot fi dispuse pe zona de afi"are (acel canvas
pomenit mai sus) n mai multe maniere. Toate applet-urile anterioare au utilizat schema
implicit! de prezentare, denumit! FlowLayout, n care navigatorul decide pozi#ionarea
componentelor, conform unui algoritm intern, astfel nct s! ocupe o suprafa#! minim!.
Vom genera o multitudine de cmpuri text:
import java.awt.*;
import java.applet.*;
public class FlowLayoutApplet extends Applet {
public void init() {
// set!m modul de prezentare
setLayout(new FlowLayout());
for(int i = 0; i < 33; i++)
add(new TextField("Eu sunt al " + i + " lea", 33));
}
}

Pentru amplasarea echilibrat! a elementelor (mai ales n cazul boxelor de dialog) se poate
utiliza BorderLayout. Vor exista patru regiuni, denumite dup! punctele cardinale, plus o
zon! central!. Metoda add() va insera un alt control n zona dorit! de programator:

I - 19

Tehnologii Web

import java.awt.*;
import java.applet.*;
public class BorderLayoutApplet extends Applet {
public void init() {
setLayout(new BorderLayout());
add("North", new TextField("La nord", 10));
add("South", new Button("La sud"));
add("East", new Button("La est"));
add("West", new TextField("La vest"));
add("Center", new TextArea("n centru", 3, 33));
}
}

Modul de prezentare folosind BorderLayout este ilustrat mai jos:

Un applet utiliznd BorderLayout

Dac! dorim ca elementele s! fie plasate ntr-un grid (tabel!) de la stnga la dreapta "i
de sus n jos, vom utiliza GridLayout. Pentru a ad!uga un spa#iu gol n cadrul zonei de
afi"are a applet-ului se va putea adopta prezentarea bazat! pe CardLayout.

I - 20

Tehnologii Web

Desigur, aceste moduri de prezentare pot fi combinate, programatorii putnd astfel

construi interfe#e mai flexibile "i mai atractive. De asemeni, poate fi folosit "i
GridBagLayout.
Un exemplu complet
Putem concepe un applet care converte"te valorile zecimale ale componentelor RGB n
hexazecimal "i afi"eaz! "i culoarea corespunz!toare acestora. Astfel, putem utiliza acest
applet atunci cnd dorim s! stabilim culorile pentru paginile noastre Web.
Vom avea nevoie de trei cmpuri text n care se vor introduce valorile (ntre 0 "i 255)
pentru cele trei culori, de un control de tip Label pentru afi"area valorii hexa (ori un mesaj
de eroare, dac! valorile date de utilizator nu sunt valide) "i de o zon! (derivat! din Panel)
pentru afi"area culorii selectate. De asemeni, vom defini o clas! care va fi utilizat! la
reprezentarea n baza 16 a unui num!r din baza 10. Din acest exemplu putem remarca
manipularea culorilor "i utilizarea unor clase specificate de programator.
Urmeaz! o captur!-ecran a execu#iei applet-ului:

Applet-ul RGB2HexApplet

Sursa Java este urm!toarea:

I - 21

Tehnologii Web

import java.awt.*;
import java.applet.*;
public class RGB2HexApplet extends Applet {
// controalele interfe#ei (vezi mai jos)
RGBcontrols controls;
// ini#ializare
public void init() {
// schimb! modul de prezentare
setLayout(new BorderLayout());
RGBcanvas c = new RGBcanvas();
// adaug! elementele de interfa#!
add("Center", c);
add("North", controls = new RGBcontrols(c));
}
}
// o clas! pentru reprezentarea n baza 16
// a unui num!r din baza 10
class HexInt {
int HInt;
// constructor
public HexInt(int AnInteger){
HInt = AnInteger;
}
// convertire n "ir de caractere
public String toHexString(int StrLen) {
String HexString;
HexString = Integer.toString(HInt,16);
while (HexString.length() < StrLen)
HexString = "0" + HexString;
return HexString.toUpperCase();
}
}
// implementeaz! un obiect pentru vizualizarea culorilor
class RGBcanvas extends Canvas {
// valori implicite pentru culori
int RedValue = 0;
int GreenValue = 0;
int blueValue = 0;
Color createColor;
// redefinire metod! de afi"are
public void paint(Graphics g) {
Rectangle r = bounds();
// afi"are culoare
createColor = new Color(RedValue, GreenValue, blueValue);
g.setColor(createColor);
g.fillRect(0, 0, r.width, r.height);
}

I - 22

Tehnologii Web

// redefinirea metodei de redesenare

public String redraw(int red, int green, int blue) {
String HexString;
this.RedValue = red;
this.GreenValue = green;
this.blueValue = blue;
// tratare erori
if ((red < 0) || (red > 255))
return "Ro"u invalid";
if ((green < 0) || (green > 255))
return "Verde invalid";
if ((blue < 0) || (blue > 255))
return "Albastru invalid";
repaint();
HexString = new HexInt(red).toHexString(2) +
new HexInt(green).toHexString(2) +
new HexInt(blue).toHexString(2);
return HexString;
}
}
// interac#iunea cu utilizatorul (controale)
class RGBcontrols extends Panel {
TextField redField; // valoarea pentru ro"u
TextField greenField;// valoarea pentru verde
TextField blueField; // valoarea pentru albastru
Label HexValue;
// valoarea hexa a culorii
RGBcanvas canvas;
// constructor
public RGBcontrols(RGBcanvas canvas) {
// o prezentare tablou de componente
setLayout(new GridLayout(4,2));
this.canvas = canvas;
// ad!ugare componente
add(new Label("Ro"u (0..255)"));
add(redField = new TextField("127", 4));
add(new Label("Verde (0..255)"));
add(greenField = new TextField("127", 4));
add(new Label("Albastru (0..255)"));
add(blueField = new TextField("127",4));
add(new Button("Calculez "i afi"ez"));
add(HexValue = new Label("aici va apare n hexa"));
}
// tratare evenimente
public boolean action(Event ev, Object arg) {
// #inta evenimentului este instan#! a clasei Button?
if (ev.target instanceof Button) {
// converte"te "i afi"eaz! rezultatul
HexValue.setText(' ' + canvas.redraw(
Integer.parseInt(redField.getText().trim()),
Integer.parseInt(greenField.getText().trim()),
Integer.parseInt(blueField.getText().trim())));

I - 23

Tehnologii Web

return true;
}
return false;
}
}

2.4 Interfaa cu utilizatorul (n stil nou)

ncepnd cu Java 1.1, AWT a fost rescris, oferind un mecanism obiectual, mai robust "i
elegant, de tratare a evenimentelor. plus posibilit!#i de manipulare a clipboard-ului, suport
pentru execu#ia opera#iilor cu tastatura sau imprimanta, suport pentru scroll etc.
Modelul de tratare a evenimentelor
Putem imagina sec#iunile unui program Java (n caz particular, un applet) ca fiind activate
de anumite evenimente. Un program condus de evenimente va trebui s! rezolve problema
trat!rii evenimentelor (event-handling).
Spre deosebire de alte abord!ri ale unor limbaje, n Java nu trebuie s! ne preocupe
recunoa"terea evenimentelor sau ciclarea prin bucla de evenimente asociat! unei instan#e de
program, ci va trebui s! implement!m o serie de metode care vor fi automat apelate atunci
cnd un anumit eveniment are loc. Astfel, o component! a interfe#ei cu utilizatorul poate
ini#ia (trimite sau difuza) un anumit eveniment, fiecare tip de eveniment fiind reprezentat
printr-o clas! distinct!. Atunci cnd un eveniment este difuzat, el poate fi recep#ionat de
a"a-numi#ii "ascult!tori" care pot reac#iona la acel eveniment.
Fiecare ascult!tor (listener) de eveniment reprezint! de fapt un obiect al unei clase care
implementeaz! un tip particular de interfa#!. Programatorul va scrie un obiect ascult!tor "i
va trebui s!-l nregistreze (printr-o metod! special!) la componenta care a generat
evenimentul dorit a fi capturat.
Evenimentele vor fi clasificate. De exemplu, barele de derulare (scroll) sunt de cele mai
multe ori folosite pentru modificarea valorii unui obiect sau pentru vizualizarea unei alte
p!r#i a unei ferestre. Butoanele, n schimb, sunt utilizate pentru ini#ierea sau terminarea unei
activit!#i (e.g. listarea unui document, transformarea unei imagini etc.).
Exemplul cu cele dou! butoane prezentat n cadrul acestui capitol va fi rescris astfel:
import java.awt.*;
import java.awt.event.*; // tratarea evenimentelor
import java.applet.*;
public class ButtonLApplet extends Applet {
// dou! butoane
Button
b1 = new Button("Salut"),
b2 = new Button("Alt salut");

I - 24

Tehnologii Web

// ini#ializare
public void init() {
// adaug! un ascult!tor (clas!)
// pentru fiecare buton
b1.addActionListener(new B1());
b2.addActionListener(new B2());
// adaug! butoanele pe canvas
add(b1);
add(b2);
}
// clasa ascult!tor pentru primul buton
// (implementeaz! interfa#a ActionListener)
class B1 implements ActionListener {
public void actionPerformed(ActionEvent e) {
getAppletContext().showStatus("Un salut");
}
}
// clasa ascult!tor pentru al doilea buton
class B2 implements ActionListener {
public void actionPerformed(ActionEvent e) {
getAppletContext().showStatus("Alt salut");
}
}
}

Acest applet nu va mai trebui compilat cu op#iunea -deprecation "i nu vom mai
ob#ine nici un avertisment de folosire a unor caracteristici nvechite ale limbajului.
Interfa#a predefinit! ActionListener con#ine numai metoda actionPerformed()
care va trebui redefinit! pentru a executa codul dorit de programator la activarea unui
buton. Textul va fi scris pe bara de stare a navigatorului doar la apari#ia evenimentului
Action asupra butonului vizat, celelalte evenimente nefiind tratate n nici un fel.
De exemplu, pentru a reac#iona la mutarea mouse-ului deasupra unui buton, ar fi trebuit s!
implement!m o clas! pentru interfa#a MouseListener "i ar fi fost necesar! o
metod! addMouseListener(). Pentru eliminarea acestui ascult!tor se va folosi metoda
removeMouseListener().
Desigur, o component! a interfe#ei cu utilizatorul poate avea asocia#i mai mul#i
ascult!tori (de exemplu, cnd dorim ca o zon! de text s! reac#ioneze la mai multe
evenimente produse de mouse sau de tastatur!).
Un alt exemplu, n care implement!m un ascult!tor pentru evenimentul de modificare a
barei de defilare:

I - 25

Tehnologii Web

import java.awt.*;
import java.awt.event.*;
import java.applet.Applet;
public class ScrollbarApplet extends Applet
// implementeaz! un ascult!tor
// pentru o bar! de defilare
implements AdjustmentListener {
// membri priva#i:
// bara de defilare
private Scrollbar baraDefilare;
// valoarea asociat! barei de defilare
private int valoareBaraDefilare = 0;
// ini#ializare
public void init() {
// o bar! de defilare orizontal!
baraDefilare = new Scrollbar(Scrollbar.HORIZONTAL,
0, 1, 0, 100);
add(baraDefilare);
// asociaz! ascult!torul
baraDefilare.addAdjustmentListener(this);
}
// metoda de afi"are a applet-ului
public void paint(Graphics g) {
g.drawString("Valoarea curent! este: " +
valoareBaraDefilare, 100, 100);
}
// trateaz! evenimentul de modificare a barei
public void adjustmentValueChanged(AdjustmentEvent e) {
valoareBaraDefilare = baraDefilare.getValue();
repaint();
}
}

La orice schimbare a cursorului barei de defilare, se va reactualiza valoarea "i va fi

reafi"at! pe ecran.
Tabelul de mai jos prezint! cele mai uzuale evenimente mpreun! cu interfe#ele de
ascultare asociate:

I - 26

Tehnologii Web

Eveniment

Interfa"a de ascultare

Componente

Action
(ac#iunea
implicit! a unei
componente)

ActionListener
addActionListener()
removeActionListener()

Button, List,
TextField, MenuItem "i

toate componentele derivate

Adjustment
(manipularea
zonei de afi"are)

AdjustmentListener
addAdjustmentListener()
removeAdjustmentListener()

Scrollbar "i toate

componentele create de
utilizator

Focus
(focalizarea
asupra unei
componente)

FocusListener
addFocusListener()
removeFocusListener()

"i componentele derivate

Key
(interac#iunea cu
tastatura)

KeyListener
addKeyListener()
removeKeyListener()

"i componentele derivate

Mouse
(interac#iunea cu
mouse-ul, clickuri "i mi"care)

Component

Component

MouseListener
addMouseListener()
removeMouseListener()
MouseMotionListener
addMouseMotionListener()
removeMouseMotionListener()

Window
(fereastra de
afi"are)

WindowListener
addWindowListener()
removeWindowListener()

Item
(elemente
selectabile)

ItemListener
addItemListener()
removeItemListener()

Text
(elemente
textuale)

TextListener
addTextListener()
removeTextListener()

Component

"i componentele derivate

Windows

"i componentele derivate

Dialog, FileDialog, Frame
etc.
Chekbox,
CheckboxMenuItem,
Choice, List "i orice

component! implementnd
interfa#a ItemSelectable
componente derivate din
TextComponent
(e.g. TextField sau
TextArea)

Evenimentele principale ale componentelor

Metodele care trebuiesc implementate de fiecare clas! implementnd un tip particular de

interfa#! de ascultare sunt urm!toarele:

I - 27

Tehnologii Web

Interfa"a

Metodele interfe"ei

ActionListener

actionPerformed(ActionEvent)

AdjustmentListener adjustmentValueChanged(AdjustmentEvent)

ComponentListener

componentHidden(ComponentEvent)
componentShown(ComponentEvent)
componentMoved(ComponentEvent)
componentResized(ComponentEvent)

ContainerListener

componentAdded(ContainerEvent)
componentRemoved(ContainerEvent)

FocusListener

focusGained(FocusEvent)
focusLost(FocusEvent)

KeyListener

keyPressed(KeyEvent)
keyReleased(KeyEvent)
keyTyped(KeyEvent)

MouseListener

mouseClicked(MouseEvent)
mouseEntered(MouseEvent)
mouseExited(MouseEvent)
mousePressed(MouseEvent)
mouseReleased(MouseEvent)

MouseMotionListener

mouseDragged(MouseEvent)
mouseMoved(MouseEvent)

WindowListener

windowOpened(WindowEvent)
windowClosing(WindowEvent)
windowClosed(WindowEvent)
windowActivated(WindowEvent)
windowDeactivated(WindowEvent)
windowIconified(WindowEvent)
windowDeiconified(WindowEvent)

ItemListener

itemStateChanged(ItemEvent)

TextListener

textValueChanged(TextEvent)
Interfe"ele de ascultare !i metodele lor

Adaptori
Din tabelul anterior, putem observa c! anumite interfe#e de ascult!tori posed! mai multe
metode pe care programatorul va trebui s! le implementeze n cadrul aplica#iilor sale,
ceea ce n anumite situa#ii poate deveni deranjant, din moment ce este nevoie numai de un
singur ascult!tor.
Pentru a solu#iona aceast! problem!, ne vom folosi de ni"te metode speciale, denumite
adaptori. Pentru fiecare clas! de componente care posed! mai mult de un singur ascult!tor,
se pune la dispozi#ie un adaptor (e.g. WindowAdapter, FocusAdapter sau
MouseAdapter). Putem utiliza un adaptor n locul unei interfe#e pentru a implementa
numai metodele dorite. Astfel, adaptorii pot fi privi#i doar ca facilitatori ai cre!rii de
ascult!tori pentru programele Java.

I - 28

Tehnologii Web

Putem folosi adaptorii pentru a scrie clase care s! fie invocate att de o aplica#ie Java de
sine-st!t!toare, ct "i de un applet. Acest lucru se realizeaz! ad!ugnd metoda main() la
un applet. Metoda main() va crea o instan#! a applet-ului din interiorul unei componente
Frame. Iat! o exemplificare:
import java.awt.*;
import java.awt.event.*; // tratarea evenimentelor
import java.applet.*;
public class ButtonL2Applet extends Applet {
// dou! butoane
Button
b1 = new Button("Salut"),
b2 = new Button("Alt salut");
// ini#ializare
public void init() {
// adaug! un ascult!tor
// pentru fiecare buton
b1.addActionListener(new B1());
b2.addActionListener(new B2());
// adaug! butoanele pe canvas
add(b1);
add(b2);
}
// clasa ascult!tor pentru primul buton
// (implementeaz! interfa#a ActionListener)
class B1 implements ActionListener {
public void actionPerformed(ActionEvent e) {
getAppletContext().showStatus("Un salut");
}
}
// clasa ascult!tor pentru al doilea buton
class B2 implements ActionListener {
public void actionPerformed(ActionEvent e) {
getAppletContext().showStatus("Alt salut");
}
}
// adaptor pentru evenimentul de nchidere a ferestrei
static class WL extends WindowAdapter {
public void windowClosing(WindowEvent e) {
System.exit(0); // iese din aplica#ie
}
}
// metoda main() pentru aplica#ie
public static void main(String[] args) {
// instan#iaz! un applet
ButtonL2Applet applet = new ButtonL2Applet();
// un cadru
Frame aFrame = new Frame("ButtonL2Applet");
// adaug! un ascult!tor pentru fereastr!
aFrame.addWindowListener(new WL());

I - 29

Tehnologii Web

// insereaz! applet-ul
aFrame.add(applet, BorderLayout.CENTER);
// seteaz! zona de afi"are
aFrame.setSize(300,200);
// ini#ializeaz! applet-ul
applet.init();
applet.start();
aFrame.setVisible(true);
}
}

Pentru a ne asigura c! applet-ul va fi distrus la nchiderea ferestrei navigatorului, putem

ad!uga nainte de System.exit() metodele applet.stop() "i applet.destroy().
De asemeni, clasa ascult!toare poate fi implementat! ca anonim!. Linia

de cod

aFrame.addWindowListener(new WL()) va fi substituit! cu:

aFrame.addWindowListener(
new WindowAdapter() { // clas! anonim!
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});

Bare de defilare
Putem nzestra elementele interfe#ei grafice (de exemplu, ariile de text) cu bare de
defilare (scroll). Barele de defilare pot fi plasate pe vertical! "i/sau pe orizontal!. Acest lucru
se specific! ad!ugnd al patrulea argument la constructorul TextArea.
n exemplul de mai jos, vom concepe un applet care are dou! arii de text, fiecare cu
propriile sale bare de defilare:
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
public class TextAreaSApplet extends Applet {
// dou! butoane
Button b1 = new Button("Adaug!");
Button b2 = new Button("%terge");
// dou! zone de text
TextArea t1 = new TextArea("t1", 4, 30,
TextArea.SCROLLBARS_VERTICAL_ONLY);
TextArea t2 = new TextArea("t2", 10, 10,
TextArea.SCROLLBARS_BOTH);
// ini#ializare
public void init() {
b1.addActionListener(new B1L());
b2.addActionListener(new B2L());
add(b1);
add(b2);
add(t1);
add(t2);
}

I - 30

Tehnologii Web

// implementarea ascult!torilor
class B1L implements ActionListener {
public void actionPerformed(ActionEvent e) {
t1.append(t2.getText() + "\n");
t2.append(t1.getText() + "\n");
}
}
class B2L implements ActionListener {
public void actionPerformed(ActionEvent e) {
t1.setText("");
t2.setText("");
}
}
}

Un buton va ad!uga textul dintr-o zon! la cealalt!, iar alt buton va "terge ambele zone de
text. Desigur, pot fi utilizate "i constantele SCROLLBARS_HORIZONTAL_ONLY (pentru a
apare numai bare de defilare orizontale) sau SCROLLBARS_NONE (dac! nu dorim s! existe
bare de defilare).
Drept exerci#iu util, cititorul poate ncerca s! rescrie exemplele de applet-uri din
sec#iunea anterioar!, convertind codul Java de la stilul vechi la cel nou.

interfee-- utilizator folosind Swing

2.5 Scrierea de interfee
Orice aplica#ie avnd interfa#! grafic! cu utilizatorul (Graphical User Interface - GUI) va
trebui s! aib! urm!toarele sec#iuni complementare ale codului:
controlul interac"iunii cu utilizatorul (vizibil prin
i.
componentelor interfe#ei: butoane, meniuri, cmpuri de date etc.);

intermediul

ii.

modelul (invizibil, fiind reprezentat de codul programului);

iii.

vizualizarea (receptat! de utilizator prin intermediul imaginii interfe#ei).

Modelul are ca date de intrare cele furnizate de control, iar ie"irea lui trimis!
componentei de vizualizare. Desigur, cele spuse aici sunt valabile "i pentru interfe#ele
paginilor Web.
Pentru control "i vizualizare de cele mai multe ori se apeleaz! la o serie de biblioteci
pentru crearea de interfe#e grafice, una dintre ele fiind Swing.
Dup! cum am precizat la nceputul acestui capitol, biblioteca de clase Swing reprezint! un
cadru independent de platform! pentru conceperea de interfe#e atractive, conceput complet
n Java 1.1. Orice aplica#ie Swing poate fi utilizat! f!r! mouse, suport! foarte u"or defilarea
folosind barele de scroll, iar interfa#a cu utilizatorul poate fi modificat! ntr-o manier!
dinamic!.
Din punctul de vedere al programatorului, aplica#iile Swing sunt u"or de implementat,
orice cod Java 1.1 putnd fi convertit imediat n cod Swing. n multe cazuri, nu avem de
f!cut dect s! ad!ug!m litera "J" naintea oric!rui nume de clas! de componente.
Unul dintre exemplele de mai sus poate fi rescris astfel:

I - 31

Tehnologii Web

import
import
import
import

javax.swing.*; // se folose"te Swing

java.awt.*;
java.awt.event.*;
java.applet.*;

public class JButtonApplet extends JApplet {

// dou! butoane
JButton b1 = new JButton("Salut");
JButton b2 = new JButton("Alt Salut");
// ini#ializare
public void init() {
b1.addActionListener(new B1L());
b2.addActionListener(new B2L());
// un text explicativ (tool-tip)
b1.setToolTipText("Acesta este un buton de salut");
getContentPane().setLayout(new FlowLayout());
getContentPane().add(b1);
getContentPane().add(b2);
}
// implementarea ascult!torilor
class B1L implements ActionListener {
public void actionPerformed(ActionEvent e) {
getAppletContext().showStatus("Salut");
}
}
class B2L implements ActionListener {
public void actionPerformed(ActionEvent e) {
getAppletContext().showStatus("Alt salut");
}
}
}

Din acest exemplu putem remarca faptul c! putem ata"a un text explicativ (tool-tip)
oric!rei componente de interfa#! (mo"tenite din clasa JComponent).
Pentru a ne face o idee despre posibilit!#ile Swing, vom prezenta succint n continuare
unul dintre elementele de interfa#! cu utilizatorul foarte des folosit.
Butoane
O alt! noutate este cea referitoare la butoane. Toate butoanele sunt derivate dintr-o clas!
abstract! denumit! AbstractButton. Astfel, pot fi specificate mai multe tipuri de
butoane, n func#ie de nevoile aplica#iei. Am specificat, de asemeni, culoarea de fundal
pentru canvas-ul pe care vor fi afi"ate butoanele.

I - 32

Tehnologii Web

Un applet Swing vizualizat cu appletviewer

import
import
import
import
import

javax.swing.*; // se folose"te Swing

javax.swing.plaf.basic.*;
javax.swing.border.*;
java.awt.*;
java.awt.event.*;

public class JButtonsApplet extends JApplet {

// patru butoane (direc#ii)
BasicArrowButton
up = new BasicArrowButton(BasicArrowButton.NORTH),
down = new BasicArrowButton(BasicArrowButton.SOUTH),
right = new BasicArrowButton(BasicArrowButton.EAST),
left = new BasicArrowButton(BasicArrowButton.WEST);
JCheckBox
cb = new JCheckBox("Transparent");
JRadioButton
rb1 = new JRadioButton("Alb"),
rb2 = new JRadioButton("Negru");
// ini#ializare
public void init() {
// canvas-ul
Container cp = getContentPane();
// seteaz! tipul de aranjament
cp.setLayout(new FlowLayout());
// stabile"te culoarea de fundal
cp.setBackground (Color.white);
// adaug! toate componentele
cp.add(cb);
cp.add(rb1);
cp.add(rb2);
// grupeaz! butoanele direc#ionale
JPanel jp = new JPanel();

I - 33

Tehnologii Web

// adaug! un titlu "i o bordur!

jp.setBorder(new TitledBorder("Direc#ia"));
// seteaz! mesajele explicative
up.setToolTipText("Ne mut!m spre Nord");
down.setToolTipText("Ne mut!m spre Sud");
left.setToolTipText("Ne mut!m spre Vest");
right.setToolTipText("Ne mut!m spre Est");
jp.add(up);
jp.add(down);
jp.add(left);
jp.add(right);
cp.add(jp);
}
}

De asemeni, pentru gruparea diverselor tipuri de butoane (e.g. butoanele radio) se poate
utiliza ButtonGroup.
Alte facilit#"i
Nu inten#ion!m s! epuiz!m aici toate caracteristicile ierarhiilor de clase Swing.
Astfel, printre altele cu ajutorul lui Swing pot fi incluse, n cadrul interfe#elor grafice,
ferestre de dialog (definite de programator sau predefinite: JColorChooser,
JFileChooser, JHTMLPane), icon-uri (imagini), meniuri orizontale sau de tip pop-up,
structuri arborescente (JTree) con#innd alte elemente de interfa#!, se pot selecta n
manier! dinamic! mai multe tipuri de interfe#e grafice. Pentru mai multe am!nunte pute#i
consulta codul surs! al aplica#iilor demonstrative din JDK.
Iat! un instantaneu dintr-un applet dezvoltat n Swing:

I - 34

Tehnologii Web

Un applet Swing complex

I - 35

Tehnologii Web

3. Scurt prezentare a servlet-urilor

Mediul JST
nainte de a prezenta servlet-urile, trebuie amintit mediul de utilitare JavaServer Toolkit
(JST), bazat pe JDK, care ofer! urm!toarele facilit!#i:
un cadru de lucru cu re#eaua "i cu firele de execu#ie suportnd protocoalele
UDP (User Datagram Protocol) "i TCP (Transmission Control Protocol);

administrare de la distan#! prin Web;

controlul accesului pe baz! de identit!#i;

suport pentru servlet-uri Java;

suport pentru protocolul SSL (Secure Socket Layer) utilizat pentru

autentificare "i confiden#ialitate;

securitate a serverului pentru module nc!rcate dinamic de pe re#ea.

JST ofer! pachete pentru:

infrastructura serviciilor: se ofer! implement!ri folosind fire de execu#ie
multiple pentru managementul conexiunii;

administrare bazat! pe Web: se ofer! o serie de clase applet care faciliteaz!

generarea de interfe#e standard de administrare a serviciilor (applet-urile vor fi
nc!rcate folosind HTTP "i utilizeaz! protocolul POST pentru a contacta servlet-uri
care manipuleaz! entit!#ile reale aflate pe server);

func"ionalitate a protocolului de transfer hipertext HTTP: sunt suportate

specifica#iile HTTP care pot fi extinse folosind servlet-uri;

compilarea paginilor Web: posibilitatea de includere de cod Java n paginile

HTML statice "i apoi s! se compileze aceste pagini, rezultnd servlet-uri Java
pentru a crea un con#inut multimedia dinamic;

servlet-uri;

utilitare: sunt oferite unelte pentru urm!rirea cererilor "i a erorilor, pentru
managementul memoriei, pentru generarea de alarme etc.

Func"ionarea unui servlet

Dac! applet-urile erau aplica#ii Java nc!rcate n cadrul paginilor Web, rulnd pe
calculatorul client, servlet-urile se vor executa pe server, reprezentnd o solu#ie de
rezolvare a problemelor de comunicare n re#ea pe partea de server. Servlet-urile pot fi
privite ca obiecte conformndu-se unei interfe#e standard, instalate pe un server bazat pe
Java.
Pa"ii execu#iei unui servlet pot fi sintetiza#i de cele de mai jos:
1.

clientul (de cele mai multe ori navigatorul Web) formuleaz! o cerere HTTP;

I - 36

Tehnologii Web

2. serverul Web recep#ioneaz! cererea "i o paseaz! servlet-ului; dac! servlet-ul

nu este instan#iat, atunci va fi nc!rcat n cadrul ma"inii abstracte Java (JVM) "i
va fi rulat;
3. servlet-ul va primi cererea HTTP "i o va realiza o anumit! ac#iune
corespunz!toare datelor cererii;
4.

servlet-ul va returna un r!spuns serverului Web;

5.

serverul Web va trimite r!spunsul clientului, via protocolul HTTP.

Dup! cum se poate remarca, maniera de operare a unui servlet este apropiat! celei de
invocare a unui script CGI.
Ca exemple de utilizare se pot men#iona generarea de documente HTML dinamice,
procesarea XML "i XSL la nivelul serverului, conectivitatea cu sistemele de management
al bazelor de date, prin JDBC (Java DataBase Connectivity).
Avantajele folosirii servlet-urilor sunt urm!toarele:
pot fi mai rapide "i mai sigure dect script-urile CGI scrise n limbaje
interpretate;

folosesc o interfa#! de programare standardizat! (Servlet API);

mo"tenesc avantajele limbajului Java (e.g. portabilitatea, aspectul obiectual,

suportul pentru fire de execu#ie multiple);

se pot u"or configura prin intermediul utilitarelor JST;

pot fi nl!n#uite (un servlet poate apela unul sau mai multe servlet-uri, n
mod secven#ial);

sunt apelate dinamic din cadrul paginilor Web;

sunt persistente; servlet-urile sunt nc!rcate numai o singur! dat! "i pot
men#ine servicii (de exemplu, conexiuni cu bazele de date) ntre cereri HTTP
multiple.

Exist! "i alte medii de dezvoltare "i de execu#ie a servlet-urilor, dintre care pot fi
men#ionate Apache JServ, Jigsaw HTTP Server al Consor#iului Web, Servlet CGI Development Kit
(Unicom).
Biblioteca de dezvoltare a aplica#iilor JavaServer asigur! independen#a de protocol, poate
fi extins! (mo"tenindu-se func#ionalitatea claselor de baz! care pot fi dezvoltate ulterior de
programatori) "i este simpl!. De asemeni, exist! posibilitatea de a fi utilizate o serie de
servlet-uri interne (predefinite), cum ar fi:

SSInclude Servlet (utilizat pentru execu#ia directivelor Server Side

File Servlet (folosit pentru managementul fi"ierelor, incluznd "i un

Invoker

Admin Servlet (folosit pentru administrarea serverului Web bazat pe

Cgi Servlet (nlocuie"te interfa#a CGI 1.1),

Includes),

mecanism de stocare a celor mai frecvent utilizate fi"iere),

Servlet (utilizat pentru invocarea servlet-urilor scrise de

utilizator),
Java),

I - 37

Tehnologii Web

Imagemap Servlet (utilizat pentru managementul imaginilor senzitive

pe partea server).
Ciclul de via"# a unui servlet
Ciclul de via#! a unui servlet Java este rezumat de urm!torii pa"i:
1.

serverul ncarc! "i ini#ializeaz! servlet-ul, invocndu-se metoda init();

2. servlet-ul trateaz! zero, una sau mai multe cereri provenite din partea
clien#ilor (browsere Web);
3. serverul opre"te servlet-ul "i elibereaz! resursele ocupate de acesta (anumite
servere Web vor executa acest pas la nchiderea serverului) - se apeleaz! metoda
destroy().
Servlet-ul va fi rulat de c!tre ma"ina virtual! Java a motorului de servlet-uri instalat pe
serverul Web.
Servlet-urile pot satisface cererile HTTP n manier! concurent!, folosind mecanismul
firelor de execu#ie multiple oferit de limbajul Java. Accesul la baze de date se va face,
n mod uzual, prin intermediul JDBC. Pentru servlet-uri complexe, se vor folosi tehnologii
precum CORBA sau RMI.

Func"ionarea unui servlet

I - 38

Tehnologii Web

Un exemplu
Cel mai simplu servlet are codul urm!tor:
import javax.servlet.*;
public class HelloServlet extends HttpServlet
{
// construie"te o pagin! Web afi"nd un mesaj de salut
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{ // metod! apelat! la recep#ionarea cererii GET
PrintWriter out;
String
title="Hello, world!";
// trimite tipul MIME n cmpul de antet
response.setContentType("text/html");
// apoi trimite con#inutul paginii
out = response.getWriter();
out.println("<html><head>");
out.println("<title>" + title + "</title>");
out.println("</head>");
out.println("<body text=\"blue\" bgcolor=\"white\">");
out.println("<h2 align=\"center\">" + title + "</h2>");
out.println("</body></html>");
}
}

Clasa HelloServlet mo"tene"te clasa predefinit! HttpServlet care implementeaz!

interfa#a Servlet. Metoda doGet() va fi apelat! atunci cnd clientul va formula o cerere
GET pentru a trimite sursa HTML a paginii. Cererea clientului este incapsulat! de
HttpServletRequest, iar r!spunsul serverului se realizeaz! prin intermediul unei
instan#e a clasei HttpServletResponse.
Putem s! redefinim "i metodele doPost(), doPut(), doDelete() care vor fi
invocate la apari#ia cererilor POST, PUT "i DELETE, respectiv, din partea unui
agent-utilizator. Implicit, aceste metode vor returna eroarea 400 (Bad Request).
Pentru cererile OPTIONS "i TRACE va trebui s! folosim doOptions() "i, respectiv,
doTrace().
Clasa HttpServletRequest pune la dispozi#ie, de asemeni, metoda getHeader()
prin intermediul c!reia programatorul poate accesa cmpurile din antetele HTTP.
De exemplu, pentru a introduce n cadrul unei pagini generate dinamic de c!tre un
servlet un element pentru remprosp!tarea con#inutului la fiecare 30 de secunde, vom scrie:
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
...
out.println("<meta http-equiv=\"refresh\"
content=\"30;url=\"http://\""
+ request.getHeader("Host") + "/refr_pag.html\">");
...
}

I - 39

Tehnologii Web

Mai multe servlet-uri, rulnd pe acela"i server Web pot partaja resurse, prin intermediul
interfe#ei ServletContext. Resursele partajate se vor numi atribute "i vor fi manipulate
cu metodele setAttribute(), getAttribute() "i removeAttribute().
Pentru a evita ambiguit!#ile de numire a atributelor se folosesc acelea"i conven#ii de
denumire a pachetelor Java. Astfel, un atribut ar putea avea numele
infoiasi.studs.xml.docname. Numele prefixate de java, javax ori sun sunt
rezervate.
Pentru a seta valoarea unui atribut vom utiliza metoda setAttribute(), acest lucru
efectundu-se de obicei la ini#ializarea servlet-ului. Din moment ce un servlet seteaz! un
atribut, oricare alt servlet va putea avea acces la acest atribut.
Un exemplu, n care atributul infoiasi.stud.xml.docname va fi setat la
ini#ializarea unui servlet. Se verific! ini#ial dac! valoarea atributului nu a fost deja setat! de
alt servlet (clasa XMLDoc reprezint! un document XML):
public class XMLServlet extends HttpServlet {
public void init() throws ServletException
{
XMLDoc xmldoc = (XMLDoc) getServletContext().
getAttribute("infoiasi.stud.xml.docname");
// nu a fost setat nc!?
if (xmldoc == null) {
getServletContext().setAttribute("infoiasi.stud.xml.docname",
XMLDoc.instance());
}
}
...
}

n acest mod, resursa reprezentnd un document XML va putea fi accesat! de mai multe
servlet-uri Java rulnd pe acela"i server Web.

I - 40

Tehnologii Web

4. Dezvoltarea aplicaiilor Java

n cadrul mediului de dezvoltare a aplica#iilor Java JDK (Java Development Kit),
compania Sun ofer! o serie de unelte software utile, dintre care men#ion!m:

javac

Compilator Java pentru a genera cod binar Java.

java

Interpretor Java pentru a rula codul binar produs de javac.

jre

Interpretor Java folosit de utilizatorii finali pentru execu#ia programelor

Java (mai simplu dect aplica#ia java).

jdb

Depanator simbolic Java, foarte asem!n!tor cu depanatorul standard dbx

din mediile Unix.

javadoc

Generator de documenta#ie HTML pentru codul surs! Java. O aplica#ie

complementar! este DOC++ ntre#inut! n prezent de Drago$ Acost!chioaie.

appletviewer

Vizualizator de applet-uri, f!r! a necesita prezen#a unui navigator Web.

native2ascii

Convertor de fi"iere scrise n cod non-Unicode Latin-1 n fi"iere Unicode

Latin-1.

jar

Arhivator de fi"iere .class, imagini "i sunet ntr-o singur! arhiv! Java
(JAR) pentru a mic"ora timpul de transfer (se asigur! astfel o unic! tranzac#ie
HTTP pentru a aduce de pe re#ea toate fi"ierele necesare rul!rii applet-urilor).
Astfel, putem specifica n cadrul unui marcator <applet> "i arhiva .jar
care con#ine applet-ul dorit a fi executat:
<applet code="tetris.class"
archive="tetris.jar"
width="500" height="433">
</applet>

I - 41

Tehnologii Web

5. Prezent i viitor
n ciuda tinere#ii sale, limbajul Java a avut, are "i va avea o dezvoltare incredibil!, n
special n partea aplica#iilor Web.
JavaOS - un sistem de operare compact, proiectat pentru a rula programe Java direct pe
microprocesoarele oric!rui echipament electronic: calculator de re#ea, imprimant!, automat
pentru jocuri, telefon celular etc., interfa#a de programare JDBC (Java DataBase
Connectivity) destinat! conect!rii la baze de date prin Java permi#nd unei aplica#ii client
s! acceseze direct sistemul de gestiune a unei baze de date, executnd instruc#iuni SQL, mii
de applet-uri disponibile (emulatoare de terminale TELNET, jocuri interactive, anima#ii,
programe de tele-conferin#e "i altele), XP (James Clark's XML Parser) - un analizator
lexical XML, JavaCC (Java Compiler-Compiler) - generator de analizatoare lexicale
orientat-obiect, pentru limbajul Java, toate acestea "i multe altele sunt m!rturii c! lumea
programatorilor n Java este n plin! efervescen#! "i c! n viitor vom asista, sper!m, la o
maturizare "i stabilizare n specifica#iile limbajului.

I - 42

Tehnologii Web

"Experien"a este magistrul tuturor lucrurilor."

(Julius Caesar)

Tehnologii Web

1. Proiectarea i organizarea
site-urilor Web
1.1 Proiectarea sitesite - urilor Web
Ca "i la ingineria software, atunci cnd trebuie construit un site Web se iau n
considera#ie, n vederea rafin!rii ulterioare, fazele urm!toare:

cerin#ele;

analiza "i proiectarea;

implementarea "i documentarea;

men#inerea.

Cerin#ele sunt discutate n am!nunt cu beneficiarul, c!zndu-se de comun acord asupra

unor aspecte generale "i/sau particulare ale site-ului respectiv. Beneficiarul, autorul ori
ambii pot decide, printre altele, care vor fi:
platforma #int! (sistemul hardware, sistemul de operare, serverul Web,
clientul/clien#ii Web),

limbajul de scripting "i modul de procesare (interpretare, compilare sau

ambele),

nivelul program!rii Web (pe server, la client sau o abordare mixt!),

sistemul de management al bazelor de date "i al altor resurse,

cerin#ele de securitate "i de autentificare,

design-ul general al site-ului,

frecven#a actualiz!rii informa#iilor "i dinamicitatea lor,

audien#a "i specificul con#inutului.

Problemele practice de construire "i de men#inere a unui site Web de dimensiuni

moderate (100 de pagini) pot fi multiple: marea majoritate a documentelor se modific!
frecvent, avnd un con#inut dinamic, dificil de controlat, leg!turile dintre pagini nu sunt
statice, schimb!ri minore pot genera modific!ri substan#iale de structur! a site-ului,
design-ul uneori intr! n contradic#ie cu func#ionalitatea.
O parte dintre rezolv!ri se ntrev!d n generarea dinamic! a paginilor folosind scripturi "i
sisteme de baze de date, la nivelul serverului sau clientului Web, generndu-se a"a-numitele
"structuri virtuale" (Frank Halasz).
Pot fi utilizate "i diverse aplica#ii vizuale (precum Macromedia Dreamweaver sau Adobe
GoLive) pentru a organiza n mod automat paginile compunnd un site sau un fragment de
site Web.
Proiectarea interfe#ei cu utilizatorul, partea cea mai vizibil! "i evident! a unui site,
este una dintre cele mai importante faze n procesul de dezvoltare a unei aplica#ii destinate
spa#iului WWW.

J-2

Tehnologii Web

Structura unui site

Paginile Web ale unui site pot fi grupate n trei categorii:
a.

pagina de start (a"a-numita home page sau front page);

b.

paginile subiectelor principale

c.

paginile subsidiare

Aceast! structur! organiza#ional! formeaz! funda#ia oric!rui site Web.

Cel mai important aspect l reprezint! pagina de start care trebuie s! ofere indexul
(sumarul) ntregului site, pentru ca vizitatorii s! g!seasc! informa#iile dorite ct mai u"or
posibil. Putem privi pagina de start drept coperta unei reviste de succes care impulsioneaz!
cititorii s! o cumpere "i s! o parcurg! cu febrilitate.
Prima pagin! este cea care capteaz! sau alung! vizitatorul, formndu-i prima impresie
despre organiza#ia sau compania pe care o reprezint!. Un aspect profesional, etic, artistic,
plus un con#inut interesant "i corect organizat vor determina atragerea vizitatorilor.
Din contr!, dac! pagina de start este greoaie, utilizeaz! fundaluri (imagini "i/sau sunete)
deranjante, se ncarc! lent, avnd un con#inut dificil de parcurs sau ofensator, atunci "ansele
ca un utilizator s! viziteze site-ul respectiv scad dramatic.
O pagin! de start trebuie s! con#in!, obligatoriu, informa#ii despre:

scopul site-ului (cine, ce, cnd, unde "i cum);

tipul con"inutului oferit;

modalitatea de a parcurge acest con#inut.

Desigur, con#inutul site-ului nu va apare n ntregime n prima pagin!, pentru aceasta

ne vom folosi de paginile principale, apoi de cele subsidiare.
Paginile subiectelor principale sunt acele pagini care au leg!turi pornind de la pagina de start
"i care ofer! subiectele de interes ale site-ului Web. Astfel, vizitatorul poate parcurge
con#inutul care l intereseaz!.
Oricare pagin! diferit! de cea de start "i de cele ale subiectelor principale o vom numi
pagin! subsidiar!. Paginile subsidiare sunt subseturi ale unei pagini cu subiect principal care,
binen#eles, nu poate g!zdui toate informa#iile despre un anumit aspect. Dintr-o pagin!
subsidiar! utilizatorii trebuie obligatoriu s! poat! reveni la pagina de start "i, eventual,
la paginile principale.
n ceea ce prive"te navigarea prin site, putem urma urm!toarele principii:
Informa"iile importante vor fi afi$ate ntr-un mod diferit de restul textului (pentru
a "s!ri n ochii" vizitatorului);

Site-ul trebuie s! con#in! posibilit!"i de navigare: butoane, h!r#i de imagini,

leg!turi textuale, cadre. ntotdeauna cnd folosim pentru leg!turi imagini sau h!r#i
senzitive va trebui s! includem leg!turile textuale corespondente;

Site-ul trebuie s! fie consistent. M!rimea "i culoarea butoanelor, textului "i
leg!turilor, localizarea pe pagin! a leg!turilor naviga#ionale trebuie s! fie similare n
ntreg site-ul. Vizitatorul trebuie s! ob#in! informa#ia dorit! ntr-un mod ergonomic,
optim.

J-3

Tehnologii Web

Posibilitatea navig#rii structurate ntr-un site Web

Fiecare site ar trebui, de asemeni, s! ofere o posibilitate de contact (prin po"ta

electronic! cel pu#in) "i un index (denumit "i site map ori site guide). Acest index va trebui s!
se ncarce foarte rapid, deci ar trebui utilizate doar informa#ii textuale.
nainte de a-l face public, site-ul trebuie verificat "i validat. Codul HTML (recomandabil
XHTML) "i CSS trebuie s! fie conform standardelor Consor#iului Web "i nu trebuie s!
con#in! elemente, atribute sau propriet!#i specifice unui navigator particular. Acest lucru
poate fi realizat apelnd la serviciul Validator al Consor#iului Web, despre care am mai
amintit n cadrul acestei lucr!ri.
Multe probleme apar atunci cnd utiliz!m script-uri JavaScript "i/sau applet-uri Java.
Dac! nu sunt vitale, este indicat s! nu le folosim, mai ales c! navigatoarele implementeaz!
versiuni diferite, adesea incompatibile. Cel mai bine este s! detect!m pe partea de server
browserul "i s!-i trimitem o pagin! special conceput! pentru acesta (a"a cum se ntmpl! la
IBM). Nu trebuie ignorat faptul c! paginile pot fi vizualizate de navigatoare text (e.g. Lynx)
"i deci trebuie oferit! o versiune textual! a site-ului pentru acestea.
De asemeni, nu trebuie s! includem con#inut multimedia n formate proprietare,
nestandard, silindu-i pe vizitatori s! apeleze la plug-in-uri suplimentare (e.g. Shockwave sau
Beatnik). Nu suntem adep#ii mesajelor "Aceast! pagin! poate fi vizualizat! doar cu navigatorul X,
avnd suport pentru Y", "Sunte"i vizitatorul cu num!rul N" sau "Vota"i acest site n top T".
Timpul de nc!rcare este important sau chiar vital pentru anumite site-uri. Serviciul
Internet Dr. HTML, printre altele, calculeaz! n cte secunde va fi nc!rcat! o pagin! Web,
pentru mai multe l!rgimi de band!.
Anumi#i designeri recurg la a"a-numita splash page care, de"i se ncarc! prima, nu
reprezint! pagina de start a unui site, ci mai mult o prezentare multimedia (deseori
J-4

Tehnologii Web

obositoare "i lung!) la sf!r"itul c!reia vizitatorul este redirectat (automat sau nu) spre
con#inutul real al respectivului site Web. n anumite cazuri, utilizatorul are "ansa s! poat! da
click pentru a intra direct pe pagina de start. O pagin! splash poate genera confuzii "i frust!ri
"i nu adaug! nimic la design-ul site-ului, excep#ie f!cnd probabil site-urile de art!
electronic! sau de design Web special. Astfel, proiectarea unui site Web trebuie s! varieze
n func#ie de specificul acestuia.
Sfaturi destinate proiectan"ilor de pagini Web
Putem formula cteva sugestii pentru realizarea unui design mai bun:
1. Autorii de pagini Web vor trebui s! furnizeze un mecanism de navigare
facil!, structurat!, prin utilizarea unor leg!turi de explorare "i/sau bidirec#ionale "i
oferirea de meniuri, arbori de parcurgere a leg!turilor, op#iuni de deplasare
secven#ial! (e.g. butoane Pagina urm!toare, Pagina precedent!,
La nceputul paginii, napoi la pagina principal! etc.).
2. Evitarea scrierii de documente de dimensiuni mari, n care utilizatorul,
pentru a parcurge ntreg con#inutul, trebuie s! foloseasc! intensiv barele de derulare
(scroll). Este indicat ca aceste pagini s! fie divizate n documente mai mici, fiecare
con#innd n jur de 500 de cuvinte/pagin!. Aceast! mp!r#ire are "i avantajul
actualiz!rii mai eficiente a con#inutului "i a parcurgerii totale a documentului de
c!tre cei interesa#i.
3. Interna#ionalizarea reprezint! un alt factor important. De evitat frazele
lungi, folosind expresii colocviale sau regionalisme. Autorii pot realiza documente
separate pentru fiecare limb! dorit! (de exemplu, n cazul nostru, romn! "i
englez!) "i s! detecteze, dup! adresa clientului Web, care ar putea fi localizarea sa
(n interiorul sau n afara #!rii). De asemeni, trebuie acordat! mare aten#ie
corectitudinii gramaticale a textului. Se recomand! ca fiecare document s! fie
parcurs, nainte de a fi disponibil pe Web, de un expert filolog.
4. De evitat utilizarea a mai mult de trei tipuri de fonturi (pentru citirea de pe
ecran cele mai lizibile sunt Verdana "i Georgia, iar pentru tip!rire Times Roman "i
Arial). Fonturile specifice unor platforme particulare nu vor fi corect sau nu vor
putea fi afi"ate pe alte calculatoare.
Este mult mai u"or de parcurs un document al c!rui con#inut a fost structurat pe
capitole, sub-capitole, sec#iuni "i paragrafe, corect aliniate "i indentate (eventual
folosind linii orizontale). Folosirea listelor neordonate sau/"i ordonate cre"te gradul
de lizibilitate a unei pagini Web.
Liniile lungi de text nu sunt recomandabile, optim fiind un num!r de 65-70 de
caractere pe o singur! linie (nu mai mult de 15-20 de cuvinte/linie). De asemeni,
alinierea la dreapta sau centrat!, scrierea cu majuscule ori modific!ri frecvente de
culoare ale unui text de dimensiuni mari implic! dificult!#i de parcurgere.

J-5

Tehnologii Web

Evitarea liniilor lungi de text prin includerea lor ntr-un tabel

5. Utilizarea unor imagini de fundal "nc!rcate" (texturi complicate,

fotografii etc.), animate sau contrastnd violent cu culoarea textului conduce la
evitarea parcurgerii con#inutului acelei pagini. Nu se recomand! anima#iile (fi"iere
GIF sau applet-uri Java), imaginile de dimensiuni mari, contrastele, fundalurile
sonore deranjante. Pentru paginile con#innd un volum mare de informa#ie textual!,
cea mai bun! solu#ie este fundal alb pentru text negru.
6. Informa#iile vor trebui reactualizate n mod regulat, verificndu-se
integritatea tuturor leg!turilor (se evit! astfel existen#a a"a-numitelor "leg!turi
moarte").
7. Pentru nc!rcarea mai rapid! a documentelor HTML, fiecare element care
implic! pozi#ionare va avea ata"ate atributele care s! indice navigatorului Web locul
n cadul ferestrei (pentru imagini "i applet-uri se vor specifica n!l#imea "i l!#imea,
pentru tabele se va furniza l!#imea celulelor, se vor utiliza propriet!#i CSS de
pozi#ionare absolut! sau relativ! etc.). Tabelele de dimensiuni considerabile nu sunt
recomandabile, la fel fi"ierele (multimedia sau arhive) avnd lungimi mari, num!rul
mare de applet-uri, controale ActiveX, cadre sau rutine JavaScript.
8. De preferat ar fi ca ntreg site-ul s! fie testat pe mai multe navigatoare,
versiuni "i platforme. Codul HTML trebuie scris a"a fel nct s! nu foloseasc!
extensii particulare, nestandard, sau elemente considerate demodate. Trebuie
considerat! "i situa#ia n care documentele pot fi parcurse "i de navigatoare text,
nu grafice (e.g. pentru fiecare imagine se va furniza, ca alternativ!, o explica#ie

J-6

Tehnologii Web

textual!, folosind atributul alt). Fiecare ancor! poate avea asociat!, cu ajutorul
atributului accesskey, o tast! (scurt!tur!) care o activeaz!.
De asemeni, tabelele pot avea asociate explica#ii, date prin intermediul atributului
summary, iar elementelor HTML putem s! le ata"!m titluri explicative folosind
atributul title.
9. Pentru reutilizarea stilurilor sau script-urilor "i a modific!rii facile a acestora,
este bine ca ele s! fie specificate ca fi"iere externe, separndu-le de con#inutul
efectiv al documentului.
Astfel, foile de stiluri pot fi nc!rcate, n antetul documentelor HTML, prin:
<link rel="stylesheet" type="text/css" href="web.css">

Script-urile pot fi specificate folosind atributul src ntr-un element <script>:

<script src="navigate.js"
type="text/javascript" language="JavaScript">
</script>

Pentru a asigura independen#a de browser, rutinele JavaScript trebuie s! fie atent

concepute "i testate.
10. n cadrul paginilor este indicat a se folosi linii de comentarii pentru
explicarea modului de marcare "i furnizarea altor detalii utile. De asemeni, fiecare
document HTML trebuie s! aib! precizat un titlu adecvat (prin intermediul
elementului <title>). Folosind tag-ul <meta> pot fi specificate diverse
informa#ii referitoare la autorul, cuvintele cheie, generatorul automat ale
documentului (dup! cum vom vedea "i mai jos).

1.2 Aspecte ale organizrii coninutului

Unul dintre aspectele importante de care trebuie s! #in! seama orice proiectant al unui
site Web de propor#ii este abilitatea de a separa datele (con#inutul) de prezentarea lor final!
(forma). F!r! aceast! demarcare este dificil de a organiza optim o mare varietate de
informa#ii stocate n diverse formate.
O serie de probleme, mai mult sau mai pu#in minore, deriv! din organizarea datelor
pe care dorim s! le oferim utilizatorilor:

modificarea frecvent! a con#inutului site-ului;

schimbarea periodic! a interfe#ei cu utilizatorul pentru a spori atractivitatea

site-ului Web (aceasta presupune modificarea documentelor HTML, a imaginilor,
a foilor de stiluri "i chiar a codului script-urilor);

p!strarea integrit!#ii leg!turilor dintre diverse pagini "i oferirea unor facilit!#i
de navigare. Echipa de designeri Web trebuie s! interac#ioneze deseori "i cu alte
componente/grupuri ale organiza#iei.

Ne vom referi n continuare la posibilitatea de a utiliza familia de limbaje XML ca mijloc

de stocare a informa#iilor unui site Web.
Organizarea con#inutului poate fi solu#ionat! la diverse nivele, prin intermediul unor
tehnologii diferite, n func#ie de necesit!#i, dup! cum se poate observa n urm!torul tabel:

J-7

Tehnologii Web

Problema

Tehnologii

Generarea (prezentarea) documentului

la nivelul clientului

JavaScript, applet-uri Java

(HTML dinamic, DOM)

Generarea documentului
la nivelul serverului

CGI, PHP, ASP, ISAPI

(folosind DOM, SAX)

Transformarea datelor XML

n pagini HTML

XSL, CSS

Stocarea "i interogarea datelor

XML, XQL, SQL, CGI

Pe partea client, procesarea datelor XML n momentul actual poate fi realizat! ntr-o
manier! limitat! de Internet Explorer 5 sau de Netscape/Mozilla 6 "i, mai nou, de Opera 5,
problema principal! fiind compatibilitatea. O alternativ! ar fi folosirea unui analizor XML
extern conceput n Java, extensie a navigatorului. Ca avantaje majore putem men#iona
reducerea nc!rc!rii serverului, procesarea datelor efectundu-se la nivelul clientului,
iar prezentarea lor prin intermediul foilor de stiluri CSS sau XSL.
Pe partea server, manipularea documentelor XML se poate realiza via DOM ori SAX,
o serie dintre serverele Web suportnd deja nativ XML. Prelucrarea datelor se efectueaz! n
mod clasic prin intermediul scripturilor CGI ori folosind PHP, ASP sau ISAPI
(Internet Server API), n limbaje interpretate ori compilate.
Folosind JDOM, putem realiza lejer aplica#ii Java destinate s! proceseze documentele
XML, att pe partea client (applet-uri), ct "i pe server (servlet-uri).
Pentru transformarea datelor XML n documente HTML se pot utiliza XSL sau CSS.
Cu toate c! XSL nu este standardizat nc!, deja exist! implementate o serie de analizoare
XSL bazate pe versiunile de lucru ale Consor#iului Web. Avantajele folosirii XSL sunt n
principal cele legate de suportul pentru o gam! larg! de construc#ii sofisticate pentru
transformarea "i ata"area de semantici elementelor XML n vederea convertirii lor n
documente HTML/XML. Din p!cate, specifica#iile XSL nu sunt n stadiu de recomandare
oficial!, iar sintaxa XSL este dificil!, documentele XSL fiind greu de parcurs de cititorul
uman. Ca "i n cazul CSS, foile de stiluri nu pot fi parametrizate, de cele mai multe ori
propriet!#ile de stil fiind modificate n mod dinamic la nivel programatic.
Diagrama urm!toare ilustreaz! rolul fiec!rei modalit!#i de ata"are de stiluri documentelor
XML. Astfel, documentele XML pot fi vizualizate n urm!toarele maniere:
Dac! documentul nu trebuie transformat, se poate utiliza CSS (modul implicit de afi"are
a documentelor XML n cadrul navigatorului Netscape 6). Vezi (A) din figura de mai jos.
n caz contrar, se va recurge la transform!ri XSLT, dup! cum urmeaz!:
B. Se utilizeaz! obiectele de formatare (formatting objects) prev!zute de
specifica#ia XSL;
C. Se genereaz! un nou document XML sau HTML "i se ofer! o foaie de
stiluri CSS pentru a fi formatat n mod corespunz!tor.

J-8

Tehnologii Web

Formatarea documentelor folosind XSL sau CSS

Tehnologiile "i standardele folosite n cadrul unui site Web bazat pe XML pot fi urm!rite
mai jos:
Tehnologie

Situa"ia standardiz#rii

Suport
Implement!ri numeroase, la nivel de client
sau server.

Recomandare W3C
XML 1.0

(10 feb. 1998,

revizuit! la 6 oct. 2000)

Editoarele XML complexe sunt relativ

pu#ine.

Familia XML nu este suportat! dect par#ial.

Familia de limbaje XML
Prezent "i n domeniul sistemelor de
se afl! n diferite stadii de
gestiune a bazelor de date (e.g. Oracle).
cercetare "i dezvoltare
Suport pentru programare n DOM 1 "i
DOM 2 ori SAX.

J-9

Tehnologii Web

Incomplet. Pu#ine implement!ri "i aplica#ii

de anvergur!.
XSL 1.0

n curs de standardizare

Recomandare W3C
CSS-1

CSS-2

(17 dec. 1996,

revizuit! la 11 ian. 1999)

Recomandare W3C
(12 mai 1998)

Suport pentru programatori via DOM/SAX

(n limbaje precum C, C++, Java, Perl,
Python).
Larg suportat pe partea client, n cadrul
navigatoarelor.
Aproape inexistent pe partea server.
Suport pentru programare n DOM 2.
Incomplet
client/server.

sau

inexistent

pe

partea

Suport pentru programare n DOM 2.

Larg suportat pe partea server, pe orice
platform!.

CGI 1.1

Standard de facto

Aplica#iile CGI pot fi scrise n orice limbaj.

Pot fi folosite module Perl sau Python
pentru prelucr!ri sofisticate "i acces la baze de
date.
Suport n cadrul aplica#iilor Microsoft
(e.g. Visual InterDev) "i pe unele servere Web,
n limbaje ca VBScript, JavaScript, C#.

ASP,
ISAPI
(IIS 5)

Proprietar Microsoft

Nu ofer! o distinc#ie clar! ntre forma "i

con#inutul datelor.
Conectivitate cu bazele de date.
Suport pentru managementul sesiunilor "i
cookie-urilor.
Suport n cadrul unor servere Web, oferind
un limbaj propriu de programare (foarte
asem!n!tor cu limbajele C sau Perl), avnd "i
suport pentru programarea obiectual!.

PHP 4.0

Specifica#ie liber!

Nu ofer! o distinc#ie clar! ntre forma "i

con#inutul datelor.
Conectivitate cu bazele de date.
Suport pentru managementul sesiunilor "i
cookie-urilor.

J - 10

Tehnologii Web

2. Roboii Web
2.1 Prezent
Prezentare
are general
Robo"ii Web, reg!si#i "i sub numele de p!ianjeni (spiders), reprezint! programe care
traverseaz! n mod automat structura hipertext a spa#iului WWW, n scopuri de extragere a
informa#iilor folosind protocoalele Web standard.
Trebuie f!cut! o distinc#ie clar! ntre robo#ii Web "i navigatoarele Web care sunt aplica#ii
ac#ionate de om sau ntre robo#ii Web "i agen#ii Web care se bucur! "i de alte caracteristici,
precum inteligen#a, mobilitatea ori autonomia.
Activitatea unui robot Web este cea de a realiza o conexiune HTTP (HyperText Transfer
Protocol) la un server Web con#innd un set de pagini, pornind de la un identificator
uniform de resurse (URI), de a extrage informa#iile dintr-un document HTML "i din toate
documentele desemnate de leg!turile lui.

2.2 Utilizri
Robo#ii Web se pot utiliza n scopuri multiple, dintre care amintim:

analiza statistic#
Prin traversarea unui ntreg site Web, un robot poate furniza date privind
media documentelor stocate pe un server, procentul de documente de un
anumit tip, m!rimea medie a unei pagini, gradul de interconectare cu alte
documente, locale sau la distan#! etc. n fapt, primul robot implementat a fost
conceput cu scopul de a contoriza serverele Web din lume, pentru a se cerceta
ct de ntins este spa#iul hipertext.
De asemeni, robo#ii Web pot fi utiliza#i la descoperirea diverselor modele
de date (pattern-uri) prin explorarea unei cantit!#i apreciabile de informa#ii
disponibile pe Web, fiind astfel implica#i n activit!#i de data mining.

men"inere
n prezent, este foarte important a se men#ine n bune condi#iuni starea
hiperleg!turilor dintre documentele Web. Un robot poate ajuta la descoperirea
"i rezolvarea a"a-numitelor "leg!turi moarte" care pointeaz! spre resurse
inexistente. De"i serverele Web pot nregistra toate cererile care nu pot fi
satisf!cute din cauza specific!rii adreselor invalide, administratorul unui site
Web de propor#ii poate recurge la asistarea din partea unui robot
(ca MOMSpider) pentru descoperirea automat! a leg!turilor eronate.
Robo#ii pot verifica "i structura documentelor HTML, semnalnd erorile de
design "i de stil ale acestora.

J - 11

Tehnologii Web

oglindire
Tehnica oglindirii (mirroring) este preluat! de la arhivele FTP, reprezentnd
copierea la alt! loca#ie a ntregii structuri arborescente, n mod recursiv, a
fi"ierelor unui site "i reactualizarea periodic! a acestora. Aceasta asigur!
fiabilitate, vitez! mai mare de transfer, evitarea nc!rc!rii traficului de re#ea sau
acces neconectat (off-line).
Pentru Web, oglindirea poate fi realizat! de un robot (e.g. wget din
distribu#iile Linux sau Teleport), care trebuie s! aib! grij! de rescrierea
referin#elor la alte documente, la p!strarea integrit!#ii hipertextului "i la
actualizarea regulat! a paginilor WWW.
Oglindirea poate fi evitat!, folosind n mod inteligent memoria cache a
serverelor proxy (intermediare), care ofer! posibilit!#i de actualizare selectiv! "i
de organizare a resurselor.

descoperirea resurselor
Probabil cea mai spectaculoas! "i important! aplica#ie a robo#ilor Web este
utilizarea lor la descoperirea resurselor. Cre"terea progresiv! a volumului de
informa#ii a dus la necesitatea conceperii de aplica#ii pentru sumarizarea,
indexarea, monitorizarea modific!rilor informa#iilor de pe Web.
Astfel, fiecare motor de c!utare, con#innd baze de date privind localizarea
"i tipul de informa#ii dorite de utilizatori, apeleaz! la serviciul robo#ilor Web
pentru descoperirea resurselor Internet.
Un avantaj suplimentar este cel dat de monitorizarea schimb!rilor survenite
n cadrul unor pagini Web indicate de utilizatori (servicii "Mind-It" sau
"What's new").

utiliz#ri combinate
Desigur, robo#ii Web pot ndeplini sarcini multiple, ca de exemplu
descoperirea resurselor "i realizarea de statistici Web sau men#inerea integrit!#ii
leg!turilor "i, concomitent, detectarea schimb!rilor documentelor HTML.

2.3 Pericole i costuri de utilizare ale roboilor

Prin traversarea unui num!r mare de hiperleg!turi, robo#ii necesit! o l!rgime bun! de
band!, deoarece ei pot opera continuu perioade lungi de timp (s!pt!mni sau chiar luni).
Pentru a accelera aceste opera#ii, mul#i robo#i au implementate tehnici de extragere paralel!
a datelor, metod! denumit! operare n foc rapid (rapid fire), rezultnd un trafic considerabil
(o ncetinire temporar! a transferului de date). Mai mult, serverele Web pot fi
supranc!rcate de cereri multiple de accesare venite din partea robo#ilor n detrimentul
cererilor agen#ilor-utilizator. A"adar implementarea robo#ilor permi#nd foc rapid trebuie
evitat!.
Un alt aspect care trebuie luat n considera#ie este timpul de actualizare a bazelor de date
ale motoarelor de c!utare folosind pentru descoperirea resurselor robo#ii Web. Robo#ii de
c!utare a informa#iilor vor trebui s! decid! care informa#ii sunt importante a fi transmise
programelor de indexare.

J - 12

Tehnologii Web

Un alt pericol deriv! din exploatarea necontrolat! a robo#ilor Web de c!tre utilizatorii
finali care pot folosi op#iuni inadecvate sau pot rula mai multe instan#e de program,
conducnd la abuzuri nedorite.
Robo#ii Web, n special cei netesta#i ndeajuns, pot fi ineficien#i sau pot poseda vicii de
arhitectur! "i astfel s! d!uneze traficului de informa#ii pe Internet, mai ales dac! sunt
folosi#i de persoane neavizate ori de neprofesioni"ti. Implement!ri eronate pot determina
robo#ii s! intre n arii aproape infinite denumite g!uri negre (atunci cnd de exemplu un
document are o leg!tur! care se refera la el nsu"i, iar programul nu detecteaz! acest aspect).
De asemeni, robo#ii nu trebuie s! acceseze tipuri de date f!r! relevan#!, avnd dimensiuni
considerabile (e.g. arhive, fi"iere executabile, fi"iere multimedia etc.).

2.4 Tipuri de roboi Web

Criteriile de clasificare a robo#ilor sunt multiple, vom ncerca s! prezent!m robo#ii Web
dup! activit!#ile care pot s! le realizeze:
a. robo"i academici - sunt acei robo#i disponibili n medii academice, avnd
ca scop anumite activit!#i de colectare a datelor dintr-o universitate sau de
men#inere a integrit!#ii leg!turilor dintr-un site academic.
b. robo"i de proiectare - posed! capabilit!#i de proiectare "i de asistare n
activit!#ile de design a paginilor Web sau de proiectare a altor tipuri de robo#i.
c. robo"i conversa"ionali - ofer! un partener virtual de discu#ii n Internet,
fiind de obicei integra#i serviciilor de teleconferin#e pe Web. Ca exemplu, putem
men#iona Eliza.
d. robo"i de comer" - sunt robo#i nlesnind activit!#ile de comer# electronic,
licita#ii pe Web, burs! etc.
e. robo"i distractivi - ofer! diverse facilit!#i de amuzament (jocuri, predic#ii,
recomand!ri de adrese interesante etc.) pentru utilizatorii care parcurg paginile
Web.
f. robo"i guvernamentali - sunt acei robo#i viznd servere con#innd
informa#ii de interes guvernamental sau diplomatic ori cu caracter secret.
g. robo"i inteligen"i - manipuleaz! informa#ii, posednd inteligen#! artificial!,
fiind utiliza#i pentru explorarea inteligent! a resurselor Web (e.g. Harvest sau
W3QS).
h. robo"i de !tiri - monitorizeaz! grupurile de "tiri de pe Internet, modific!rile
din cadrul site-urilor mass-media (ziare electronice, posturi radio sau de televiziune
prezente pe Web etc.), schimb!rile de adrese "i altele.
i. robo"i de c#utare - sunt robo#ii utiliza#i de motoarele de c!utare
(ca de exemplu WebCrawler). Vezi mai jos.
j. robo"i de actualizare - se folosesc pentru actualizarea automat! a
hiperleg!turilor "i pentru detec#ia schimb!rii adreselor Web.

J - 13

Tehnologii Web

2.5 Standardul de excludere a roboilor

Pentru excluderea robo#ilor din zone Web lipsite de relevan#!, con#innd date temporare
ori private, s-a adoptat un standard pentru excluderea robo"ilor. Acest standard se
bazeaz! pe accesarea unui fi"ier text robots.txt (stocat n directorul r!d!cin! al
serverului WWW) de c!tre un robot de explorare, fi"ierul specificnd ce p!r#i vor fi evitate
de la parcurgerea automat! (pentru evitarea g!urilor negre sau din alte ra#iuni).
Un exemplu de astfel de fi"ier este cel de mai jos:
#/robots.txt pentru http://www.infoiasi.ro
User-agent: *
# to#i robo#ii
Disallow: /tmp/
# date temporare
Disallow: /busaco/work/
# spa#iu privat

n vederea evit!rii index!rii con#inutului unei pagini Web se poate scrie n antetul ei:
<meta name="robots" content="noindex">

De asemeni, putem inhiba traversarea leg!turilor prezente ntr-un document HTML

(cele definite de <a href="...">) prin:
<meta name="robots" content="nofollow">

Anumi#i robo#i pot utiliza tag-uri specifice (ascunse) care s! dicteze un anumit
comportament pentru acea pagin! Web (a"a cum se ntmpl! n cazul de programului de
oglindire Teleport).

2.6 Sfaturi n conceperea unui robot Web

nainte de a purcede la conceperea unui robot, folosind sau nu metode de calcul al
hiperinforma#iei, trebuiesc avute n vedere urm!toarele:

Chiar avem nevoie de un alt robot sau adopt!m nevoilor noastre unul deja
existent?

Robotul trebuie identificat u"or de administratorul Web "i autorul acelui

robot trebuie s! fie contactat facil.

Robotul va trebui s! fie mai nti testat pe date locale, ntr-o re#ea proprie,
nainte de a fi disponibil n Internet.

Robotul va fi moderat n ceea ce prive"te resursele: prevenirea focului rapid,

eliminarea c!ut!rilor redundante "i inutile.

Robotul se va conforma standardului de excludere a robo#ilor.

Autorul robotului va analiza continuu activit!#ile robotului propriu.

Rezultatele furnizate de robot (diversele statistici sau alte date) vor putea fi
f!cute disponibile spre consultare celor interesa#i.

Majoritatea robo#ilor Web actuali respect! recomand!rile de mai sus.

J - 14

Tehnologii Web

2.7 Exemple
DataBots - un robot manipulnd informa"ii
Crea#ie a companiei Imagination Engines Incorporated, DataBots este un robot utilizat
n descoperirea informa#iilor pe Web, folosind tabelele Excel pentru generarea unor re#ele
neuronale menite a analiza datele luate din Internet. Paradigma utilizat! este denumit!
Creativity Machine, permi#nd luarea decizilor asistat! de calculator pe baza informa#iilor
extrase de robotul Web.
Wisebot - utilizat pentru administrarea site-urilor Web
Wisebot este o aplica#ie a companiei Tetranet, putnd fi utilizat la organizarea unui site
Web. Robotul efectueaz! o analiz! a tuturor paginilor Web existente pe un server, re#innd
ntr-o baz! de date cele mai importante informa#ii despre ele (titlu, cuvinte-cheie, timpul
ultimei actualiz!ri etc.). Robotul poate automat genera cuvintele cheie aferente unei pagini,
utiliznd tehnologia Extractor, prin contorizarea celor mai frecvente cuvinte "i lund n
considera#ie pozi#ia lor n cadrul paginii. Astfel, se construie"te un index pentru ntreg
con#inutul hipertext al serverului, care va fi surs! pentru harta de navigare n cadrul site-ului
(actualizat! la momente regulate de timp n mod automat).
Acest robot este disponibil n mediile Windows. Pentru platformele Unix, exist! o
multitudine de robo#i similari, dintre care se pot men#iona tkWWW (scris n Tcl/Tk) sau
RBSE (Repository Based Software Engineering).
Inktomi - statistici Web
Robotul de c!utare Inktomi a fost conceput n cadrul unui proiect de cercetare condus
de Eric Brewer "i Paul Gautier de la Universitatea Berkeley, cu scopul de a utiliza tehnicile
de procesare paralel! pentru indexarea, c!utarea "i analiza paginilor Web. Primele seturi de
date au fost preluate n perioada iulie-octombrie 1995 colectndu-se 1,3 milioane de
documente HTML unice, urmate n noiembrie 1996 de 2,6 milioane de documente HTML.
Experimentul
n cadrul prelucr!rii datelor colectate de robot, s-au folosit urm!toarele aplica#ii:
libink este o bibliotec! de componente pentru extragerea "i manipularea

datelor hipertext, constnd din patru module principale:

analizorul HTML este un scaner lexical inspirat din flex,

configurabil "i rapid;

analizorul URI este un analizor al identificatorilor uniformi de resurse

(URI);

translatorul DNS converte"te adresele simbolice ale serviciului

numelor de domenii (DNS) n adrese IP numerice, utiliznd o memorie
cache suplimentar!;

J - 15

Tehnologii Web

serviciile generale pentru tabele hash sunt folosite n cadrul procesului de

prelucrare a datelor, implementnd tabele hash distribuite.

style este un program standard Unix raportnd diverse propriet!#i

statistice (lungimea medie a unei fraze, num!rul mediu de propozi#ii dintr-o fraz!
complex!, num!rul total de cuvinte etc.) utile analizei documentelor din perspectiva
limbajului natural. n cadrul experimentului au fost considerate doar documente
scrise n limba englez!.

weblint este un analizator structural de marcaje pentru documentele

HTML, inspirat din utilitarul Unix lint.

Rezultatele
Criteriile de analiz! au fost urm!toarele:

lungimea documentelor;

media num!rului de marcatori/lungimea paginii;

utilizarea marcatorilor;

utilizarea atributelor;

utilizarea marcatorilor specifici unor navigatoare particulare;

utilizarea portului de conectare;

protocoalele n cadrul URI-urilor;

tipurile fi"ierelor specificate n componen#a URI-urilor;

erorile de sintax!.

Iat! cteva dintre rezultatele ob#inute.

Lungimea documentelor
Pentru cele 2,6 milioane de documente HTML colectate de Inktomi, dup!
nl!turarea marcajelor s-a calculat lungimea fiec!rui document. Lungimea
minim! g!sit! a fost de 4,4 KB, lungimea maxim! de 1,6 MB, iar lungimea
medie a fost de 20 KB.

Utilizarea marcatorilor
n ceea ce prive"te distribu#ia tag-urilor, num!rul mediu de marcatori pe
document a fost 71, iar num!rul de marcatori unici pe document a fost 11.
n figura de mai jos se poate remarca ponderea n procente a celor mai
populare 10 tag-uri "i num!rul mediu de apari#ii ale lor.

J - 16

Tehnologii Web

Cele mai utilizate $0 tag-uri

Utilizarea atributelor
Num!rul mediu de atribute prezente ntr-un document a fost 29, iar
num!rul mediu de atribute unice pe document a fost 4. n figura urm!toare se
poate observa procentul de apari#ie a primelor 10 atribute (firesc, atributul cel
mai popular a fost href, urmat de src).

J - 17

Tehnologii Web

Cele mai utilizate $0 atribute

Utilizarea portului de conectare

Protocolul de transfer HTTP uzual folose"te portul 80 pentru accesarea
paginilor Web. Acest port este utilizat n propor#ie de 93,6%. Num!rul de
porturi unice specificate n documentele hipertext a fost de 418.

Protocoalele n cadrul URI-urilor

Extr!gnd URI-urile specificate n fiecare pagin! Web, s-au putut calcula
procentele de apari#ie a celor mai utilizate protocoale: HTTP, SMTP (mailto),
FTP, GOPHER, NNTP (news) "i TELNET.

Frecven"a de utilizare a protocoalelor

J - 18

Tehnologii Web

Erorile de sintax#
Programul weblint a g!sit aproximativ 92000 (0,7%) de documente
con#innd erori sintactice. Figura urm!toare furnizeaz! primele 10 cele mai
comune erori.

Cele mai frecvente $0 erori detectate

Legend!:

html-outer - nu exist! tag-urile <html>...</html>

no-head - lipse"te elementul <head>

head-element - tag-urile specifice antetului paginii Web

(<title>, <link> sau <base>) apar n afara acestuia

no-body - lipse"te elementul <body>

must-follow - lipsesc marcatorii obligatorii n cadrul altui tag

unclosed-element - tag-urile de sfr"it lipsesc

netscape-markup - marcaje specifice Netscape (nu trebuie

considerat! neap!rat o eroare, ci mai mult o abatere de la standardul
HTML definit de Consor#iul Web)

empty-container - elemente vide, f!r! con#inut

mis-match - tag-uri nepotrivite (de exemplu <h2>...</h3>)

heading-order - ordine inadecvat! a elementelor de tip Hx

J - 19

Tehnologii Web

LiveAgent Pro - pentru realizarea oglindirilor Web

Dezvoltat de AgentSoft, robotul LiveAgent Pro este destinat efectu!rii automate a
oglindirilor unui server Web la alt! loca#ie.
Alte facilit!#i ale aplica#iei sunt completarea automat! a formularelor electronice,
posibilitatea de programare prin intermediul scripturilor sau utilizarea robotului n Intranet.

J - 20

Tehnologii Web

3. Motoarele de cutare
Bazat pe hipertext, spa#iul WWW are ca raison d'tre oferirea unui mecanism facil de a
stoca "i de a pune, ulterior, la dispozi#ie informa#ii, ntr-o manier! intuitiv!, nesecven#ial!.
Studiile recente (efectuate la mijlocul anului 2000) estimeaz! volumul Web-ului ca fiind
de 1-2 miliarde de pagini, utilizatorii care petrec mai mult de cinci ore pe Internet alocnd
70% din timp pentru c!utarea de informa#ii. ntre 85% "i 90% dintre utilizatori se bazeaz!
pe motoarele de c#utare pentru a localiza resursele dorite.
Astfel, importan#a acestora se dovede"te de necontestat, n prezent existnd o
multitudine de c!utatoare "i meta-c!utatoare, generale sau specializate.
Motoarele de c!utare pot oferi servicii de c!utare pe baza de indec"i (i.e. Altavista) sau pe
baza unor ierarhii de termeni - a"a-numitele servicii director (Yahoo). n ultima perioad!,
aceste servicii au devenit hibride (primul care a adoptat tehnicile mixte fiind Excite).

Structura intern# general# a unui motor de c#utare

J - 21

Tehnologii Web

3.1 Regsirea informaiilor

Cercet!torii au eviden#iat mai multe activit!#i de reg!sire a informa#iilor, n func#ie de
inten#iile utilizatorilor:

scanarea (scanning) - utilizatorii acoper!, superficial, o arie larg! de informa#ii;

r!sfoirea (browsing, surfing) - utilizatorii viziteaz! loca#iile care le capteaz!

interesul (f!r! a avea stabilit un model mental despre informa#iile dorite);

c!utarea (searching) - utilizatorii sunt motiva#i s! g!seasc! o #int! particular! de

informa#ii (folosind de cele mai multe ori o manier! de c!utare bazat! pe cuvinte
cheie sau construc#ii n limbaj natural, de genul "Unde g!sesc documenta#ii despre
XML?");

explorarea (exploring) - utilizatorii investigheaz! leg!turile referitoare la o

anumit! informa#ie "i pe cele conexe;

hoin!reala (wandering) - utilizatorii realizeaz! o navigare complet nestructurat!.

Atunci cnd ne afl!m pe Web, de cele mai multe ori nu parcurgem la un moment dat
dect o singur! pagin! WWW, apar#innd unui server particular, f!r! a avea o vedere de
ansamblu a modului de structurare a tuturor documentelor de la acea adres!. Astfel, spa#iul
Web prezint! urm!toarele caracteristici negative:

modelul plat de memorare a datelor

Documentele nu sunt stocate n mod structurat pe serverele Web, ierarhiile
putnd fi recunoscute de cele mai multe ori doar examinnd URI-urile.
n mod uzual, paginile nu au leg!turi c!tre documentul p!rinte ("r!d!cina"
site-ului, /index.html sau /default.htm, n func#ie de serverul Web
folosit, Apache (NCSA) ori IIS, respectiv).

leg!turile unidirec"ionale
Limbajul HTML nu ofer! dect posibilitatea de specificare a hiperleg!turilor
unidirec#ionale, simple. Este dificil de a alc!tui o hart! local! con#innd toate
sursele "i destina#iile leg!turilor dintre paginile Web ale unui server. Re#elele
sofisticate de leg!turi conduc la o navigare greoaie "i devin surse de confuzie.

lipsa unei h!r"i globale de navigare

Nu se poate realiza o hart! global! de navigare prin ntreg spa#iul WWW,
ntr-o manier! ierarhic!.

men"inerea leg!turilor
Leg!turile fiind stocate n interiorul documentelor, nu exist! posibilitatea de
a ad!uga adnot!ri sau de a modifica leg!turile dintr-o pagin! f!r! a fi
proprietarul acesteia. Men#inerea integrit!#ii leg!turilor pentru site-uri Web
con#innd un num!r foarte mare de documente se dovede"te dificil!. De cele
mai multe ori se utilizeaz! programe de verificare a disponibilit!#ii leg!turilor "i
de construire a ierarhiilor de leg!turi ntre paginile unui site Web (e.g. aplica#ia
ICE scris! n Perl).

J - 22

Tehnologii Web

3.2 Anatomia unui motor de cutare

n principiu, un motor de c!utare este constituit din trei componente de baz!:
1. o aplica#ie, denumit! robot Web (spider, crawler), care parcurge spa#iul
WWW "i viziteaz! anumite pagini, extr!gnd informa#ii despre ele care vor fi
stocate pe serverul/serverele motorului de c!utare, ntr-o baz! de date sau index.
Robo#ii Web au fost prezenta#i n detaliu n sub-capitolul precedent.
2. o modalitate de memorare a informa#iilor despre paginile parcurse de robot,
numit index (catalog). Acest index de obicei con#ine o copie a fiec!rei pagini "i a
URI-ului corespunz!tor ei, organizarea informa#iilor n cadrul indexului
efectundu-se conform unor criterii specifice.
3. un mecanism de evaluare (ranking) a importan#ei paginilor din index n
conformitate cu cererea formulat! de utilizator. n ordinea importan#ei, adresele
paginilor (plus alte informa#ii) sunt returnate clientului utilizatorului care a formulat
cererea. Utilizatorul va decide care pagin! (sau grup de pagini) ntrune"te
preferin#ele sale.
De cele mai multe ori, fiecare motor de c!utare are propriul robot Web care respect!
standardul de excludere a robo#ilor. Robo#ii de la Excite (Inktomi), Go (InfoSeek) "i Lycos
nu pot indexa paginile con#innd cadre, iar cei de la FAST "i Google au probleme cu h!r#ile
de imagini senzitive (care pot ngloba leg!turi spre alte documente). Majoritatea robo#ilor
de c!utare pentru a accelera procesul de traversare a leg!turilor posed! o tabel! intern! de
perechi (adresa simbolic!, adresa IP) evitnd interog!rile DNS (Domain Name System)
prea lente.
C!utarea se realizeaz! folosind algoritmi de parcurgere local! de tip DFS sau BFS sau
prin procesarea ntr-o ordine inteligent! a leg!turilor spre alte documente.
Pentru a optimiza activitatea de extragere a paginilor Web s-au propus mai multe
metode. Cteva dintre ele sunt amintite n continuare.
C#utarea bazat# pe nv#"are
Robotul folose"te n c!utarea paginilor un algoritm de nv!#are special! (reinforcement
learning). Decizia robotului se bazeaz! pe o politic! de primire a unei "recompense" sau
"pedepse" n func#ie de starea n care a ajuns la un moment dat "i de contextul ei. Scopul
robotului este s! adopte, deci, o "politic!" (regul! de asociere a st!rilor lui la ac#iunile care
trebuie s! le ntreprind!) prin maximizarea sumei recompenselor primite. Pentru fiecare
stare a robotului, valoarea recompensei va fi calculat! conform unei rela#ii prestabilite "i
robotul va ncerca s! execute n viitor o ac#iune pentru care s! primeasc! recompensa cea
mai mare. Implementarea acestei metode se bazeaz! pe programarea dinamic!.
n cazul motorului de c!utare, recompensele primite de robot vor fi cu att mai mari cu
ct un document destina#ie are o tematic! apropiat! de documentul surs! de la care exist!
hiperleg!tura. Astfel, robotul va urma la un moment dat leg!turile spre documente
apar#innd aceluia"i subiect cu al documentului de la care a pornit c!utarea. Performan#a va
fi m!surata n func#ie de recompensa total! primit! n timpul cel mai scurt. Mediul prin care
evolueaz! robotul prezint! situa#ii cu recompense ntrziate (aflate undeva n viitor).
Experimentele folosind aceasta metod! descris! succint mai sus au debutat n luna
august 1998 n cadrul proiectului Cora al Universit!#ii din Pittsburgh.

J - 23

Tehnologii Web

Formalizarea procesului de c#utare

Vom descrie n continuare o metod! formal! utilizat! n c!utarea pe Web.
n general, putem considera o structur! Web (netemporal!) ca o func#ie par#ial! de la
mul#imea URI-urilor la secven#e finite de octe#i. Intuitiv, fiecare structur! Web desemnat!
de un identificator din mul#imea URI corespunde unui obiect (un document HTML, un
fi"ier text, o imagine etc.). Func#ia este par#ial! deoarece anumitor URI-urilor nu le
corespunde nici o resurs!.
Pentru ntregul spa#iu Web vom considera structura denumit! WWW. n realitate
structura WWW variaz! n timp, fiindc! URI-urile pot s! se modifice (la un moment de
timp t, vom avea starea Web WWWt). Vom presupune c! WWW este consistent! local din
punct de vedere temporal, pentru intervalul de timp d, probabilitatea ca din
WWWt(url) = seq, t >= t' >= t + d s! rezulte WWWt' (url) = seq fiind extrem de ridicat!,
unde url apar#ine mul#imii de URI-uri, iar seq este o secven#! de date. Altfel spus, exist! un
interval de timp suficient de mare astfel nct pentru acel interval structura Web posed!
acela"i identificator uniform de resurs!.
Vom defini un obiect Web ca o pereche (url, seq), unde url este un element din mul#imea de
identificatori URI, iar seq reprezint! o secven#! de octe#i, cu seq = WWW(url). Spa#iul Web
poate fi privit, a"adar, ca o mul#ime num!rabil! de obiecte Web.
Marea problem! a motoarelor conven#ionale de c!utare este c! se realizeaz! numai
indexarea textului "i nu a structurii hipertext a documentelor HTML. Achizi#ia "i indexarea
n mod automat a informa#iilor text duc la o relevan#! sc!zut! a rezultatelor c!utate.
Pentru indexarea hipertextului, trebuie avut n vedere aspectul dinamic al acestuia,
reprezentat de diversele leg!turi care trimit c!tre alte documente. Metodele tradi#ionale
folosite pur "i simplu "uit!" structura hipertext a documentelor, explornd doar con#inutul
liniar, oferind astfel doar informa#ii textuale despre acel document "i nu informa#iile
structurale, de tip hipertext. Din punct de vedere formal, c!utarea se rezum! doar la
informa#iile date de seq "i nu "i cele furnizate de a doua component! (url) a unui obiect
Web. Ca excep#ie par#ial! poate fi descris! a"a-numita vizibilitate a unui obiect Web,
m!surnd num!rul de documente conectate de acel obiect. Motoarele de c!utare precum
Excite sau Lycos exploateaz! aceast! informa#ie. Problema este c! vizibilitatea nu ofer!
nimic despre con#inutul informativ al obiectului n cauz!. Putem privi vizibilitatea ca o
m!sur! pentru popularitatea unei pagini Web, care nu are nimic de a face cu calitatea
denotat! de con#inutul ei intrinsec.
Informa#ia dat! de dinamismul leg!turilor dintr-un document Web va fi denumit!
hiperinforma"ie, care va fi adaugat! informa"iei textuale a obiectului, reuniunea celor dou! tipuri
de informa#ie furniznd informa"ia total! asupra Web-ului. Vom desemna aceste trei tipuri de
informa#ie ca HYPERINFO, TEXTINFO "i, respectiv, INFORMATION. Astfel, pentru fiecare
obiect Web O vom avea INFORMATION(O) = HYPERINFO(O) + TEXTINFO(O).
Aceste func#ii de m!surare a informa#iei vor fi dependente de cererea utilizatorului,
cuantificnd con#inutul informativ al unui obiect pentru o cerere specific!. Desigur, analiza
con#inutului informativ a unui obiect Web O implic! toate obiectele Web care sunt
accesibile via hiperleg!turi (i.e. "navignd" pe Web). Din ra#iuni practice, aceasta explorare
n profunzimea hipertextului va trebui s! se realizeze doar cu un num!r finit de pa"i (vizit!ri
de leg!turi).
Dat un obiect Web O, adncimea (relativ!) a unui alt obiect Web O' este dat! de num!rul
minim de leg!turi care pot fi activate (parcurse) pentru accesarea lui O' pornind de la O.

J - 24

Tehnologii Web

Fixnd o anumit! adncime, putem selecta o vecin!tate local! finit! a unui obiect Web
din spa#iul hipertext World Wide Web. Problema este s! stabilim hiperinforma#ia de o
adncime k pentru un obiect O, notnd aceasta cu HYPERINFO[k]. Informa#ia total! de
adncime k va fi notat! cu INFORMATION[k].
Vom considera astfel func#iile HYPERINFO, TEXTINFO "i INFORMATION definite de la
mul#imea obiectelor Web la mul#imea numerelor reale nenegative. Intuitiv, cu ct valoarea
unei func#ii este mai mare, cu att con#inutul informa#ional al acelui obiect este mai
relevant. Aceste func#ii vor fi m!rginite (exist! un num!r M astfel nct
M >= INFORMATION(O), pentru orice obiect O).
Leg#turi simple
Vom avea n vedere mai nti cazul n care fiecare obiect Web posed! cel mult o leg!tur!.
Exist! dou! posibilit!#i: acea leg!tur! s! fie o leg!tur! intern! (c!tre un fragment de
informa#ie din acel document) sau leg!tura este stabilit! ntre obiectul Web A spre obiectul
Web B (vezi figura de mai jos):

Leg#tura de la A la B

Solu#ia, simpl! dar eronat!, este s! se asocieze con#inutului textual al obiectului A "i
con#inutul textual al obiectului B, nlocuind leg!tura cu obiectul Web spre care pointeaz!.
Astfel, con#inutul informa#ional al celor dou! obiecte va fi similar, de"i poate n realitate
utilizatorul era interesat numai de informa#iile din obiectul B. Aceast! problem! devine mai
evident! dac! adncimea cre"te, avnd situa#ia n care Bk este la adncime k de A,
cu k destul de mare (e.g. k > 10):

Leg#tura de la A la Bk

Presupunem c! obiectele A, B1,..., Bk-1 au un con#inut informativ apropiat de zero,

iar Bk are un con#inut informativ total ridicat. Conform metodei de mai sus, A va avea
informa#ia total! mai mare dect cea a lui Bk, ceea ce este complet fals n realitate,
conducnd la o c!utare eronat!.
Informa#ia textual! ca surs! a unei leg!turi dintr-un document nu poate fi considerat!
drept actual!, ci numai poten"ial!. Pentru utilizator exist! un cost pentru a re#ine acea
informa#ie textual! disponibil! dup! parcurgerea leg!turii (se pierde un timp de a"teptare
pentru nc!rcarea documentului). Astfel, intervine n calcul "i adncimea (num!rul de
leg!turi pe care trebuie s! le parcurg! utilizatorul pn! la accesarea documentului conectat
cu documentul de la care a plecat).
Contribu#ia informa#iei textuale a obiectului B, avnd adncimea k, la hiperinforma#ia
obiectului A este dat! de rela#ia Fk& TEXTINFO(B), unde 0 < F < 1. Pentru situa#ia din
figura de mai sus, hiperinforma#ia lui A nu este:
TEXTINFO(B1) + TEXTINFO(B2) +...+ TEXTINFO(Bk)

Ea este furnizat! de expresia:

J - 25

Tehnologii Web

F& TEXTINFO(B1) + F2& TEXTINFO(B2) +...+ Fk& TEXTINFO(Bk)

Informa#ia textual! a lui A poate fi considerat! ca fiind dat! de formula
F0& TEXTINFO(A), obiectul A fiind la distan#! nul! de el nsu"i.
Se poate da "i o rela#ie de recursie: INFORMATION[k](A) = F& INFORMATION[k-1](B),
care furnizeaz! tocmai formula enun#at! mai sus.
Leg#turi multiple
Vom considera acum cazul n care un obiect Web posed! mai mult de o leg!tur!, lund
ns! adncimea egal! cu 1. Vom avea situa#ia ilustrat! n figura urm!toare:

Leg#turi multiple

Nu putem m!sura hiperinforma#ia ca n situa#ia de la leg!turi simple, deoarece am

presupus func#ia de calcul m!rginit! (nu putem suma contribu#ia informa#ional! a fiec!rei
leg!turi: F& TEXTINFO(B1) + F& TEXTINFO(B2) +...+ F& TEXTINFO(Bn), fiindc! num!rul de
leg!turi ale unui document poate tinde la infinit).
De remarcat c! utilizatorul nu poate parcurge toate leg!turile n paralel, ci n manier!
secven#ial!, selectnd la un moment dat doar una dintre ele. n cel mai bun caz, utilizatorul
va urma cea mai informativ! leg!tur!, apoi cea de a doua n ordinea con#inutului
informa#ional "i a"a mai departe. Astfel, vom ordona leg!turile n func#ie de con#inutul lor
informa#ional, presupunnd c! TEXTINFO(B1) >= TEXTINFO(B2) >=...>= TEXTINFO(Bn).
Hiperinforma#ia a"adar poate fi calculat! prin rela#ia:
F& TEXTINFO(B1) + F2& TEXTINFO(B2) +...+ Fn& TEXTINFO(Bn)
n exemplul de fa#! am ales cea mai bun! secven#! de leg!turi, considernd c!
hiperinforma#ia reprezint! func#ia care m!soar! cel mai bine con#inutul informa#ional
poten#ial, ns! n realitate utilizatorul s-ar putea s! nu viziteze leg!turile n ordinea relevan#ei
lor "i nu putem impune a priori c! oricare leg!tur! ar avea vreo relevan#! pentru utilizator.
Leg!turile nerelevante, cu scor nul, vor putea fi ns! ignorate.
Cazul general - un exemplu
n cazul general vom avea leg!turi multiple, cu un factor arbitrar k de adncime, "i-l vom
trata lund n considera#ie cele enun#ate mai sus. Informal, toate obiectele Web avnd
adncime mai mic! dect k vor fi sortate, genernd o secven#! de selec#ie, n ordinea
hiperinforma#iei. Iat! un exemplu:

J - 26

Tehnologii Web

Un exemplu de obiecte Web

Vom presupune c! F=0,5, TEXTINFO(B)=0,4, TEXTINFO(C)=0,3, TEXTINFO(D)=0,2

"i TEXTINFO(E)=0,6. Prin secven#a de selec#ie A-B-C-E-D (secven#a optim! de
maximizare a hiperinforma#iei), vom avea: 0,5& TEXTINFO(B) + 0,52& TEXTINFO(C) +
0,53& TEXTINFO(E) + 0,54& TEXTINFO(D) (=0,3625).
Remarci
i.
O alt! problem! care poate apare este cea a leg!turilor de ntoarcere. Multe
pagini Web au leg!turi de ntoarcere la documentul din care au fost accesate. Astfel,
avem situa#ia din figura de mai jos, cnd obiectele A "i B au leg!turi bidirec#ionale
de la unul la cel!lalt:

Leg#turi de ntoarcere

n acest caz, informa#ia textual! a lui A se adaug! n mod recursiv de un num!r

neprecizat de ori atunci cnd vom calcula hiperinforma#ia obiectului A.
ii.
Exist! posibilitatea apari#iei leg!turilor duplicate (dou! leg!turi ntr-un obiect
Web pointnd spre acela"i obiect Web). Solu#ia este evitarea unor astfel de
probleme prin considerarea unei submul#imi a mul#imii tuturor secven#elor de
selec#ie a leg!turilor.
iii.
Un alt aspect interesant este cel de considerare a defini#iei leg!turii ntr-un
obiect Web. O leg!tur! se nume"te activ! dac! leg!tura poate fi vizualizat! (vizitat!)
prin accesarea perechii (url, seq) cu ajutorul unui navigator HTML. n cadrul
modelului vor trebui considerate numai leg!turile active, care pot fi explorate n
realitate, corespunzndu-le un URI valid.
Pentru procesul de c!utare, fiecare tip de leg!tur! va fi tratat n mod
corespunz!tor. Leg!turile locale (interne) specificate n documentele HTML prin
#fragment vor fi ignorate. Cadrele (frames) vor trebui expandate, fiind nlocuite de
con#inutul documentelor spre care pointeaz!. Alte leg!turi (c!tre imagini,

J - 27

Tehnologii Web

de exemplu) vor fi activate automat, de"i n prezent este foarte dificil de a exploata
con#inutul informa#ional al documentelor care nu sunt de tip text.
Ordonarea leg#turilor
Cercet!torii de la Universitatea Stanford au observat c! vizitarea tuturor documentelor
prezente pe Web nu se poate realiza practic din cel pu#in dou! motive:
1. Indexul are o capacitate limitat! "i deci motorul nu poate indexa sau analiza
toate paginile (Web-ul se dezvolt! ntr-un ritm foarte alert).
2. Web-ul se modific! foarte rapid "i robotul nu va avea "ansa de a parcurge o
serie de pagini (la fiecare lun! se estimeaz! c! peste 800GB de date "i schimb!
con#inutul).
Nu toate paginile vor avea aceea"i importan#! pentru robot, #inndu-se cont de mai mul#i
factori, fiecare fiind considerat cu o anumit! pondere. Se pot lua n calcul: similaritatea cu
posibilele cereri ale utilizatorilor, num!rul leg!turilor care au leg!turi spre pagina analizat!
pe robot, adic! gradul de "citare" a documentului, relevan#a paginii (con#inutul ei), num!rul
de leg!turi con#inute de pagin! "i metrica loca#iei (o pagin! din domeniul ".com" se
consider! a fi mai important! dect una a domeniului ".za"). Importan#a paginii este, deci,
dat! de contextul n care apare.
Paginile vor fi ordonate conform acestor criterii "i vor fi indexate doar primele N.
n fapt, aceast! metod! poate fi privit! ca o rafinare a precedentei.
Abordarea prezentat! aici a fost experimentat! ncepnd cu anul 1997
(proiectul WebBase) "i n prezent se reg!se"te n cadrul popularului motor de c!utare
Google.
Managementul indexului
A doua component! a unui motor de c!utare este indexul (catalogul) reprezentat
dintr-o serie de baze de date memorate pe discurile unui server (modul) de stocare,
constituindu-se un depozit (distribuit) de date de mari dimensiuni.
Modulul de stocare realizeaz! diverse activit!#i importante ca introducerea de noi date
despre paginile parcurse de robo#i, actualizarea con#inutului celor vechi, programarea
diverselor cereri de accesare a informa#iilor despre o serie de documente etc. De cele mai
multe ori aceste date sunt compresate (Google folose"te biblioteca de compresie bzip),
utilizndu-se clustere pentru memorarea lor.
Fiecare pagin! va primi un identificator docID stabilit pe baza URI-ului absolut al
paginii respective. URI-urile vor fi normalizate conform algoritmului urm!tor:

J - 28

Tehnologii Web

Pasul algoritmului

Exemplu

Se elimin! prefixul protocolului

(http://) dac! este prezent

http://www.InfoIasi.Ro:80/ devine
www.InfoIasi.Ro:80/

Se elimin! num!rul portului implicit

(:80) dac! exist!, dar se p!streaz! orice
alt num!r de port (e.g. 8000)

www.InfoIasi.Ro:80/ devine
www.InfoIasi.Ro/

Adresa simbolic! a serverului este

convertit! n litere mici

www.InfoIasi.Ro/ devine
www.infoiasi.ro/

Caracterele "/" de la finalul URI-ului sunt

eliminate

www.infoiasi.ro/ devine
www.infoiasi.ro

Algoritmul de normalizare a unui URI

Conform unei func#ii de dispersie alese de proiectantul motorului, textul rezultat va fi

convertit ntr-o valoare numeric! (de dimensiune de 64 de bi#i sau 128 de bi#i) identificatorul de document docID.
Modulul de indexare $i metadate este responsabil pentru extragerea metadatelor din paginile
colectate "i indexarea att a metadatelor ct "i a paginilor (documentelor HTML).
Pentru indexarea con#inutului textual al documentelor, uzual vor fi considerate toate
cuvintele, exceptnd a"a-numitele cuvinte stop (de lungime mai mic! dect trei caractere "i
desemnnd prepozi#ii, conjunc#ii sau interjec#ii; de exemplu "a", "the", "in" din limba
englez!). Unele motoare de c!utare (e.g. Google sau Lycos) vor contoriza "i num!rul de
apari#ii ale celor mai frecvente cuvinte dintr-o pagin! Web "i vor realiza indec"i
suplimentari "i/sau vor stabili categoria n care va fi ncadrat! acea pagin!. O alt! tehnic!
abordat! este cea a index!rii semantice.
Extragerea metadatelor variaz! n func#ie de motorul de c!utare. Cea mai popular!
tehnic! este cea a index!rii documentelor pe baza cuvintelor cheie furnizate fie explicit de
creatorul acestor documente, fie n urma unei catalog!ri automate realizate de un robot.
Anumite motoare de c!utare (e.g. Altavista) permit nscrierea unei pagini n baza de date,
solicitnd introducerea unor cuvinte cheie pe baza c!rora s! se efectueze indexarea.
Un utilizator poate apela la un serviciu de nregistrare automat! la o suit! de motoare de
c!utare, de obicei n mod gratuit, ca de exemplu AddMe!.
ntreb!rile care se pun sunt:
i.

Ct de relevante sunt activit!#ile de indexare automat!?

ii.
Documentelor HTML le pot fi ata"ate anumite atribute care s! le descrie
con#inutul?
R!spunsul la ultima ntrebare este dat de urm!toarele aspecte:

Standardul HTML permite autorilor de pagini Web s! enumere cuvintele

cheie care s! descrie cel mai adecvat con#inutul lor informa#ional, prin folosirea n
antet a tag-ului <meta>. Iat! un exemplu:

J - 29

Tehnologii Web

<meta name="description" -- descriere succint! -content="Manipularea informa#iilor multimedia">

<meta name="keywords"
-- cuvinte cheie -content="Internet, multimedia, hypertext, document, robots,
agents, logic, real-time, protocol, WWW, Web">
<meta name="author"
-- autor -content="Sabin Corneliu Buraga - busaco@infoiasi.ro">
<meta name="owner"
-- proprietar -content="Sabin Corneliu Buraga -busaco@infoiasi.ro">

Nu toate motoarele de c!utare iau n considera#ie informa#iile con#inute de tag-ul

<meta>. Este cazul motoarelor Excite, Google "i Northern Light care vor ignora
construc#ia <meta name="keywords"...>, iar FAST, Google, Lycos nu vor
lua n seam! <meta name="description"...>.

Descrierea inteligent! a resurselor poate fi realizat! cel mai bine cu RDF

(Resource Description Framework). Deja exist! tehnici de generare automat! a
metadatelor RDF pentru descoperirea resurselor Web, pornind de la titluri, cuvinte
cheie, descrieri, data cre!rii, num!rul total de cuvinte dintr-un document etc. Pentru
descrierea resurselor Web poate fi folosit standardul RDF Site Summary (RSS),
specifica#ie bazat! pe RDF "i spa#ii de nume XML.

Metode mai sofisticate includ sumariz!ri automate, utilizarea de sinonime ale cuvintelor
cheie ori utilizarea algoritmilor genetici sau a re#elelor neuronale. n activitatea de catalogare
a informa#iilor, de multe ori intervine ierarhizarea datelor n func#ie de subiectul pe care-l
trateaz!, aceast! clasificare ducnd la apari#ia serviciilor director (de genul Yahoo!). Clasificarea
dup! subiect este similar! re#elei lingvistice WordNet.
De asemeni, se calculeaz! num!rul de leg!turi care pointeaz! spre o anumit! pagin! "i
num!rul de leg!turi con#inute de acea pagin!. Aceste valori sunt denumite tehnic hit-uri.
Indec"ii pot cuprinde indec"i text obi"nui#i, dar "i indec"i ai metadatelor extrase
(construi#i pe baza docID-urilor "i a altor informa#ii). n mod uzual, se folosesc tehnici
bazate pe tabele de dispersie (hash) multiple "i pe sortarea eficient! a indec"ilor.
Metadatele "i indec"ii se stocheaz! pe dispozitive separate de cele ale depozitului de date
(de cele mai multe ori se utilizeaz! un sistem de management al bazelor de date rela#ionale).
Depozitul de documente indexate suport! trei moduri de acces:

acces direct (random access)

Se realizeaz! pe baza identificatorului asociat fiec!rei pagini.

acces bazat pe interog!ri (query-based access)

n acest caz, se vor furniza toate documentele care satisfac o anumit!
cerere. Cererea poate s! se refere la diverse atribute ale metadatelor (e.g. autor,
titlu, loca#ie) sau la con#inutul textual al paginilor. De exemplu, dac!
presupunem c! avem un index al cuvintelor din titlul paginilor "i un alt index
al leg!turilor care se refer! la o anumit! loca#ie, putem s! extragem toate
documentele care satisfac urm!toarea cerere: "furnizeaz! toate URI-urile
paginilor con#innd cuvntul Informatic! n titlu "i care au leg!turi spre
http://www.infoiasi.ro". De cele mai multe ori, se utilizeaz! interog!ri SQL sau
bazate pe limbaje de interogare XML (XML Query Languages).

J - 30

Tehnologii Web

acces flux de date (streaming access)

Este folosit atunci cnd din depozitul de date se extrage un grup de pagini
pentru a fi trimis ca flux de date spre o anumit! aplica#ie (de exemplu, atunci
cnd se reindexeaz! o serie de pagini).

n cadrul depozitului de date este de dorit s! se memoreze cea mai recent! versiune a
paginilor traversate de robo#ii Web. Trebuiesc avute n vedere aspecte importante precum
consisten"a indec$ilor "i eliminarea paginilor vechi/inexistente pe Web. Astfel, pentru fiecare pagin!
pot fi ata"ate dou! valori numerice pentru a specifica timpul de via#! permis "i contorizarea
timpului de via#!. Timpul de via#! permis reprezint! perioada de stocare a unui document
f!r! a necesita actualizarea ori "tergerea sa din depozit. Contorul este decrementat periodic
pn! cnd devine nul, caz n care robotul Web va trebui s! aduc! informa#ii despre acea
pagin!. Desigur, fiecare motor de c!utare va adopta propria manier! de stabilire a timpului
de via#!. De asemeni, robo#ii Web pot avea proprii lor parametri pentru realizarea acestei
actualiz!ri regulate, #innd cont de ra#iuni de congestie a re#elei sau de traversarea n foc
rapid despre care am discutat mai sus.
Pentru asigurarea scalabilit!#ii, depozitul de date poate fi distribuit, constituindu-se
o colec#ie de noduri de stocare interconectate, controlul realizndu-se prin intermediul unui
server de management al nodurilor. Acest server men#ine o tabel! cu starea fiec!rui nod de
stocare: capacitatea total! de memorare, spa#iul liber, nivelul fragment!rii datelor, num!rul
"i tipul de acces!ri, modul de operare a nodului etc.
Mai mult, serverul controleaz! cererile pentru acces!ri de tip flux de date "i maniera de
stocare a paginilor noi colectate de robo#i. Problemele care se pun n discu#ie sunt cele de
distribu#ie, de organizare "i de actualizare a paginilor n cadrul nodurilor depozitului.
Paginile se pot distribui uniform sau printr-o metod! de tip hash. Organizarea se realizeaz!
fie folosindu-se tehnici hash, fie fi"iere de jurnalizare sau o metod! mixt!. n cazul
actualiz!rii, se iau n considera#ie scheme bazate pe actualiz!ri secven#iale (batch) ori
incrementale. La actualizarea secven#ial! nodurile se parti#ioneaz! n dou! categorii: noduri
de actualizare (care nu vor mai fi folosite pentru cereri de acces la pagini) "i noduri de citire.
Astfel, se evit! apari#ia conflictelor ntre opera#iunile executate asupra depozitului de date.
La actualizarea incremental! nu se mai face distinc#ie ntre noduri, fiecare nod fiind
permanent opera#ional, cu penaliz!ri de performan#! "i modificarea dinamic! a indec"ilor
locali.
Pentru sporirea eficien#ei, nodurile pot con#ine pagini grupate pe diverse criterii
(cuvinte-cheie, tematic!, localizare etc.).
C#utarea !i evaluarea
A treia component! a motorului o reprezint! mecanismul de c#utare !i de evaluare a
paginilor Web dorite de un utilizator n urma formul!rii unei cereri adresate prin
intermediul interfe#ei cu aplica#ia.
Interfa#a de c!utare (denumit! frecvent motor de interogare) este o component! important!
a sistemului, oferind n func#ie de motor posibilit!#i de formulare a cererilor prin
intermediul diver"ilor operatori logici, n limbaj natural, explornd ierarhii de domenii
catalogate (directoare Web), alegnd localizarea paginilor etc.

J - 31

Tehnologii Web

Interfa"a Google pentru formularea cererilor avansate de interogare

Majoritatea motoarelor de c!utare utilizeaz! o conven#ie de compunere a interog!rilor.

Pot fi date "i rela#ii create prin intermediul operatorilor AND, OR, NOT "i NEAR:

termen1 AND termen2

Se dore"te ca paginile s! aiba n componen#! ambii termeni. De multe ori,

semnul plus (caracterul "+") prefixnd fiecare termen nlocuie"te func#ia lui
AND: +termen1 +termen2.

termen1 OR termen2

Se dore"te ca paginile s! con#in! m!car unul dintre cei doi termeni.

NOT termen

Se dore"te ca paginile s! nu con#in! termenul specificat (se poate folosi "i

construc#ia echivalent! -termen).

termen1 NEAR termen2

Se dore"te ca paginile s! con#in! cei doi termeni localiza#i la mic! dep!rtare

unul de cel!lalt (vecin!tate de 20-200 de cuvinte, n func#ie de motorul
de c!utare).
Pentru gruparea "i schimbarea preceden#ei operatorilor se pot utiliza parantezele. Se mai
poate folosi "i construc#ia "lista de termeni", ghilimelele nsemnnd c! se va realiza
o c!utare exact! a secven#ei de termeni din lista dat!. De exemplu:
"Tehnologii Web" +documente -teorie

Un utilizator obi"nuit se va sluji foarte rar de aceste facilit!#i, prefernd formularea unui
interogari compuse dintr-un singur cuvnt sau a unei propozi#ii n limbaj natural.
Tehnologia Ask Jeeves ncorporat! de Altavista este utilizat! pentru procesarea cererilor n

J - 32

Tehnologii Web

limbaj natural (n spe#!, n limba englez!), unele probleme care trebuiesc rezolvate fiind
dezambiguizarea termenilor, eliminarea cuvintelor nerelevante sau expandarea interog!rii
(pot fi formulate automat noi cereri con#innd sinonime ale cuvintelor furnizate de
utilizator, folosindu-se re#eaua lingvistic! WordNet).
Majoritatea serviciilor de c!utare ofer! posibilitatea de rafinare a interog!rii,
prin intermediul unor op#iuni refine sau advanced search.
Evaluarea cererii utilizatorului se poate realiza conform urm!toarelor etape:
1.

analizarea interog!rii;

2.

c!utarea n indec"ii corespunz!tori termenilor r!ma"i dup! analiza cererii;

3.

scanarea tuturor documentelor care ntrunesc toate condi#iile de c!utare;

4. evaluarea gradului de relevan#! a paginilor n func#ie de interogarea dat!

de utilizator;
5.

eliminarea duplicatelor "i sortarea n ordinea relevan#ei;

6.

afi"area adreselor primelor celor mai relevante N documente.

Nu toate motoarele de c!utare trec prin toate fazele descrise mai sus. Unele nu realizeaz!
dect par#ial sau deloc eliminarea duplicatelor (de exemplu, Excite sau Lycos).
O serie de motoare vor afi"a paginile g!site grupate pe termeni sau vor oferi leg!turi
c!tre altele stocate pe acela"i server Web.
Sistemul de evaluare depinde de motorul de c!utare ales. De exemplu, n cazul lui
Google, se men#in mai multe metadate despre documentele indexate dect la alte motoare,
ceea ce conduce la o precizie ridicat!. Se memoreaz! chiar "i pozi#ia n cadrul
documentului, tipul de font "i modul de scriere ale informa#iilor. n plus, datele calculate n
urma fiec!rei interog!ri emise de utilizator sunt salvate temporar, putnd fi folosite la
evaluarea unor cereri similare viitoare.
Alte abord!ri includ:

evaluarea relevan#ei pe baza contextului de apari#ie;

determinarea corela#iei dintre relevan#a calculat! de motor "i cea exprimat!

de operatorul uman;

utilizarea de tehnici adaptive, euristice;

exploatarea rela#iilor care se pot stabili ntre diferite pagini Web

(e.g. sistemul Ulixes).

J - 33

Tehnologii Web

Arhitectura intern# a motorului de c#utare Google

Nici un motor nu poate fi perfect. Pentru testarea serviciilor de c!utare se consider! mai
mul#i factori, dintre care pot fi aminti#i: acurate#ea, posibilitatea de c!utare avansat!,
ergonomia n utilizare "i acordarea de alte facilit!#i.

3.3 MetaMeta - cuttoare

cuttoa re
Utilizatorii au posibilitatea de a apela la un meta-c#ut#tor pentru a formula interog!ri "i
a primi rezultate de la o multitudine de motoare de c!utare c!rora li se transmite acea
cerere. Func#ia principal! a meta-c!ut!torului este aceea de a compila toate listele de pagini
ob#inute de la motoarele obi"nuite (eventual interogate n paralel) "i de a prezenta
utilizatorului cele mai relevante documente g!site. De cele mai multe ori, un meta-c!ut!tor
are implementat propriul sistem de evaluare a relevan#ei paginilor, n func#ie de anumite
criterii (e.g. Mamma). De asemeni, un meta-c!ut!tor poate oferi o vedere ierarhizat!, de
genul directoarelor Web, a paginilor g!site.
Nu toate meta-c!ut!toarele elimin! duplicatele (e.g. Dogpile). O serie de meta-c!ut!toare
sunt direc#ionate spre domenii specifice, pentru c!utarea de:

fi"iere - n general aplica#ii "i documenta#ii (Filez, FTPSearch);

adrese e-mail "i numere de telefon (Four11);

informa#ii n cadrul grupurilor de discu#ii (DejaNews);

fi"iere audio (MP3Search);

J - 34

Tehnologii Web

imagini (MetaSEEk);

pagini localizate ntr-un areal geografic comun (EuroSeek, Cauta.ro);

informa#ii specifice unui domeniu: afaceri, comunit!#i umane etc. Este "i
cazul portalurilor Web care n plus furnizeaz! "i alte servicii, precum accesarea unui
cont de po"t! electronic!, cursul valutar, starea meteo "i altele).

O parte dintre serviciile de c!utare specializat! se reg!sesc "i n cadrul motoarelor clasice
(de exemplu, la Altavista).
Anatomia unui meta-motor de c!utare este ilustrat! n figura de mai jos:

Structura general# a unui meta-motor de c#utare

Dispecerul de cereri poate diviza interog!rile complexe date de utilizator n sub-cereri,

fiecare sub-cerere fiind expediat! unui motor de c!utare clasic. Nu toate meta-motoarele de
c!utare trimit cereri n manier! concurent! motoarelor de c!utare.

J - 35

Tehnologii Web

Monitorul de performan#! supravegheaz! starea fiec!rui motor de c!utare. Atunci cnd

unul dintre motoare devine inopera#ional sau inaccesibil din ra#iuni legate de re#ea, se poate
decide automat ca respectiva cerere s! fie dat! spre prelucrare altui motor. Monitorul de
performan#! are n responsabilitate "i primirea listelor de adrese ale paginilor g!site.
Modulul responsabil cu interfa#a cu utilizatorul va prezenta un formular electronic
pentru a fi completat cu interogarea dorit!. Dup! primirea rezultatelor de la motoarele de
c!utare, listele cu URI-uri vor fi compilate, eliminndu-se informa#iile redundante "i cele
contradictorii. Deoarece fiecare motor de c!utare va returna o list! de pagini ntr-un format
propriu, meta-motorul de c!utare va realiza "i o convertire la un format comun care va fi
prezentat clientului.

J - 36

Tehnologii Web

4. WebBroker:
comunicaii orientate-obiect pe Web
4.1 Prezentare general
Principalul scop al modelului WebBroker este cel de a extinde modelul actual al
aplica#iilor Web prin ad!ugarea facilit!#ilor de calcul distribuit orientat-obiect descrise de
tehnologiile incompatibile CORBA (Common Object Request Broker Architecture) "i COM
(Component Object Model).
Dac! protocolul IIOP (Internet Inter-ORB Protocol) propus de OMG
(Object Management Group) - consor#iu interna#ional promovnd dezvoltarea teoretic! "i
practic! a produselor orientate-obiect - n cadrul standardului CORBA este bazat pe
standarele Internet, sistemul WebBroker se fundamenteaz! pe standarde Web precum
HTTP, XML "i URI, ncercnd s! simplifice cele mai reu"ite aspecte din CORBA "i COM
"i s! unifice modelele acestora pe un teritoriu neutru, independent de platform!.
Implementarea WebBroker este disponibil! gratuit, fiind scris! n Java.
Comunica"ii distribuite orientate-obiect
WebBroker se bazeaz! pe interfe#e pentru a defini comunica#iile dintre componentele
sistemelor distribuite obiectuale. Dialogul dintre client "i server are loc prin intermediul
unui obiect intermediar, purtnd denumirea de proxy, totul desf!"urndu-se prin intermediul
unor interfe#e specificate n prealabil. Proxy-ul este o aplica#ie (entitate) care trimite cererea
de la client la serverul adecvat. Cel care faciliteaz! transmiterea r!spunsului de la server la
client se nume"te obiect schelet (skeleton).
n esen#!, scenariul dialogului ntre un obiect A rulnd pe ma"ina X care apeleaz! o
metod! a obiectului B executndu-se pe ma"ina Y decurge astfel (vezi "i figura de mai jos):

Proxy-ul P al obiectului B ruleaz! pe ma"ina X.

Scheletul S al obiectului A ruleaz! pe ma"ina Y.

Obiectele P "i S sunt, esen#ial, termina#iile unei conexiuni virtuale ntre

Interfa#a lui P are aceea"i interfa#! ca B.

A "i B.

P "i S lucreaz! transmi#nd cererea (apelul metodei) "i r!spunsul (rezultatul

metodei) prin re#ea ca documente XML.

J - 37

Tehnologii Web

Modelul WebBroker

Comunica#iile bazate pe interfe#e permit obiectelor s! intercomunice independent de

limbaj. WebBroker necesit! definirea unui tip de document (DTD) pentru a specifica n
XML con#inutul mesajului "i un tip de document (DTD) pentru descrierea interfe#elor unui
obiect. Alte DTD-uri suplimentare pot defini diverse lucruri, precum codific!ri de date sau
tipuri de date.

4.2 Cerine pentru realizarea

specificaiilor WebBroker
Principalele cerin#e ale specifica#iei WebBroker sunt urm!toarele:

Utilizarea standardelor Web

WebBroker folose"te HTTP ca protocol de trasport al mesajelor, XML ca
sintax! "i URI ca adrese surs! "i destina#ie.

P!strarea independen"ei de platforma $i de limbajul de programare

Integrarea n sistemele distribuite actuale

Cerin#ele de proiectare trebuie s! ia n considera#ie tehnologii actuale
(precum DCOM "i CORBA) "i sisteme opera#ionale (Iona).

Orientare-obiect

Clien"i $i protocoale simple

Migrarea spre server a facilit!"ilor de calcul

4.3 Definirea tipurilor de documente XML

Pentru scrierea defini#iilor tipurilor de documente folosite de WebBroker se utilizeaz! un
model stratificat. Fiecare DTD va specifica un aspect specific al comunica#iilor dintre
obiecte. Nivelul inferior este desemnat de PrimitiveDataTypeNotations care declar!
nota#iile tipurilor de date (n sensul XML-Data). AnonymousData define"te specificarea

J - 38

Tehnologii Web

tipurilor

de

date

prin

intermediul

elementelor

XML.

Al

treilea

nivel

este

ObjectMethodMessages care stabile"te formatul mesajelor interschimbate de obiecte.

Alte DTD-uri sunt folosite la descrierea interfe#elor componentelor software.

Trebuiesc definite formatele cererilor "i r!spunsurilor trimise de un client "i respectiv
expediate de un server Web, ca n exemplul urm!tor:
<!DOCTYPE objectMethodRequest PUBLIC
"-//DataChannel//DTD ObjectMethodMessages V1.0//EN"
"http://xml.datachannel.com/ObjectMethodMessages.dtd"
>
<!DOCTYPE objectMethodResponse SYSTEM
"http://xml.datachannel.com/ObjectMethodMessages.dtd"
>

Pentru p!strarea simplit!#ii, nu sunt prev!zute facilit!#i pentru structuri complexe de date
(de tip struct, composite etc. prezente n limbajele de programare evoluate).
Construirea tipurilor complexe este l!sat! n responsabilitatea implementatorilor finali care
pot prevede obiecte-extensii pentru manipularea acestor tipuri.
Tipul de document AnonymousData declar! un DTD pentru tipuri scalare (predefinite)
de date, sintetizate n urm!torul tabel:
WebBroker CORBA
boolean

COM

boolean boolean

Java

XML-Data

boolean

boolean

short

short

short

short

i2

int

long

int

int

int
(sau i4)

long

long

(sau i8)

char

char

char

char

char

float

float

float

float

(IEEE.754.32)

double

double

double

double

(IEEE.754.64)

byte

octet

byte

byte

bin.hex

string

string

BSTR

java.lang.String

string

URI

java.net.URL

URI

i8

float
double

Tipurile de date definite de specifica"ia WebBroker

Ca exemplu, iat! modalitatea de a specifica un "ir de ntregi, de lungime 3, con#innd

valorile 19, 74 "i 7:

J - 39

Tehnologii Web

<intArray length="3">
<int>19</int>
<int>74</int>
<int>7</int>
</intArray>

Pentru definirea interfe#elor, se pun la dispozi#ie o serie de tipuri de documente XML

cuprinse n nivelul InterfaceDef. O parte dintre aceste defini#ii, n compara#ie cu cele
din CORBA "i DCOM, sunt ilustrate n tabelul de mai jos:
Documente WebBroker Interfe"e CORBA Tipuri DCOM/ActiveX
ModuleDef

ModuleDef

ITypeLib

ExceptionDef

ExceptionDef

TBD

ParameterDef

ParameterDef

ELEMENTDESC

URI

Repository

HKEY_CLASSES
(din registry)

Compara"ie ntre documentele WebBroker

!i tipurile CORBA !i DCOM

4.4 Tehnologia CORBA integrat n

navigatoarele Web
Strategia Netscape asupra tehnologiei CORBA comport! mai multe direc#ii
reprezentate de:

Navigatorul Netscape Communicator care, pe partea client, include suport

pentru JavaORB (Java Object Request Broker).

Netscape Enterprise Server include implementarile CORBA pe partea server

pentru C++ "i Java (prin ISB - Internet Service Broker), plus compilatoarele IDL,
agen#ii de re#ea "i interfa#a de programare a aplica#iilor Web.

Netscape Visual JavaScript permite integrarea obiectelor CORBA n paginile

HTML folosind un mediu vizual de dezvoltare a aplica#iilor bazate pe JavaScript.

J - 40

Tehnologii Web

Strategia Netscape referitoare la integrarea tehnologiei CORBA pe Web

Avantajul major oferit de Netscape este dat de posibilitatea de a concepe la cerere

aplica#ii distribuite conlucrnd n re#ea, pe diverse platforme software "i hardware, bazate n
ntregime pe standarde Web deschise precum HTML, Java "i JavaScript.
Aceast! viziune multi-strat a viitorului spa#iului WWW este rezumat! de Marc Andreesen
de la compania Netscape Communications prin termenul de crossware, putnd fi urm!toarea
genera#ie de aplica#ii client-server, compuse din clien#i "i servere inter-conectate,
componentele comunicnd prin protocoale Web independente de platform!, permi#nd
schimbul de date complexe (documente hipermedia, interog!ri n limbaj natural etc.).

4.5 Viitor
Problemele deschise r!mase de specificat sunt urm!toarele: WebBroker trebuie plasat n
contextul scopurilor de cercetare ntreprinse de Consor#iul Web referitoare la XML, HTTP
"i spa#iul Web n general, necesitatea construirii de unelte de generare a obiectelor proxy "i
schelet, cerintele de interoperabilitate ntre COM+, CORBA "i Java, plus scalabilitatea.
Se pare c! o solu#ie complementar! este reprezentat! de SOAP (Simple Object Access
Protocol) bazat pe protocolul de transport HTTP "i limbajul XML, urmnd modelul
RPC (Remote Procedure Call), propunere formulat! de Microsoft "i deja implementat! n
cadrul noii platforme .NET.

J - 41

Tehnologii Web

"Un punct care ieri era nev#zut, ast#zi a ajuns "inta !i mine va fi punctul de plecare."
(T.Macaulay)

Tehnologii Web

Realitatea virtual# reprezint! o simulare generat! de calculator a unui mediu

tridimensional n care utilizatorul este capabil s! vizualizeze "i s! manipuleze con#inutul
acestui mediu.
Dac! multimedia se refer! la date preasamblate "i preprogramate, incluznd o suit! de
informa#ii din anumite medii, realitatea virtual! este dinamic! "i n interac"iune permanent! cu
receptorul ei. Multimedia este la baz! bidimensional!, o serie de imagini prezentndu-se,
conform unui scenariu predefinit, pe ecran, pe cnd realitatea virtual! este tridimensional!,
mult mai maleabil! "i intens interactiv!, combina#ie avansat! de hardware "i software
multimedia.
Utilizatorul unui sistem virtual are libertatea de a explora lumea creat! de calculator "i de
a interac#iona direct cu ea.
Termenul de realitate virtual! se confund! deseori cu ciberspa"iul, cuvnt inventat de
scriitorul SF William Gibson n celebrul roman "Neuromancer", publicat n premier! n anul
1984.

K-2

Tehnologii Web

1. Introducere n VRML
1.1 Istoric al limbajului
Conceperea unui univers tridimensional virtual se poate realiza cu ajutorul VRML
(Virtual Reality Modeling Language), scopul ini#ial al limbajului fiind tranzi#ia de la o
interfa#! text a Web-ului la una avnd trei dimensiuni, n permanent! interac#iune cu
utilizatorul.
VRML a fost creat de Mark Pesce "i Anthony Parisi, cu ajutorul lui Gavin Bell "i Brain
Behlendorf. Primii doi au hot!rt s! proiecteze o interfa#! 3D pentru Web. Limbajul de
modelare a acestei interfe#e (VRML) trebuia s! fie diferit de HTML, dar nu au dorit s!
inventeze un nou limbaj. Dup! ce au trecut n revist! tehnologiile existente la acea dat!, au
investigat mai mul#i candida#i. Dup! o serie de deliber!ri, au ales formatul de fi"ier ASCII
Open Inventor de la Silicon Graphics Inc. (SGI). Unul dintre motivele principale pentru care
a fost adoptat Open Inventor este faptul c! acesta permite o descriere complet! a grafurilor
de scen! 3D. Open Inventor include, de asemeni, facilit!#i de iluminare, descrieri de
materiale "i texturi, precum "i efecte speciale. Astfel, un subset al formatului de fi"ier SGI
Open Inventor, cu ad!ugarea extensiilor de acces la re#ea, a reprezentat baza VRML-ului.
VRML a fost proiectat n prim!vara anului 1994, fiind prezentat la prima conferin#!
WWW din Geneva, la dezvoltarea sa avndu-se n vedere independen#a de platform!,
extensibilitatea "i abilitatea de a lucra n cadrul re#elelor cu l!#ime ngust! de band!.
Primul program suportnd VRML (care nc!rca imaginea 3D a unei banane "i o afi"a pe
ecranul calculatorului) s-a numit Labyrinth.
VRML s-a lansat public la data de 3 aprilie 1995 "i specifica#ia VRML versiunea 1.0
a urmat n luna mai a aceluia"i an. Versiunea 1.0 a specifica#iei VRML a fost pus! la punct
de Gavin Bell, Anthony Parisi "i Mark Pesce. Ulterior a ap!rut VRML 1.1.
Pe 4 august 1996 se d! publicit!#ii specifica#ia versiunii 2.0, permi#nd generarea de lumi
virtuale animate "i avnd o serie de facilit!#i noi precum:

elemente de control geometric "i propriet!#i ale culorilor pentru forme;

senzori simplificnd
(e.g. drag-and-drop);

opera#iile

efectuate

cu

ajutorul

gruparea nodurilor care permit detectarea coliziunii obiectelor;

atribute de iluminare cum ar fi fog (cea#a);

furnizarea de informa#ii despre scen! c!tre browserele VRML;

facilit!#i pentru utilizarea surselor de sunet.

mouse-ului

n 1997 a ap!rut o specifica#ie apropiat! de VRML 2.0 numit! VRML97, iar n prezent
se lucreaz! la cea de-a treia versiune a limbajului care va ad!uga o tehnologie standardizat!
pentru modelarea interac#iunilor dintre utilizatori.

K-3

Tehnologii Web

O lume virtual# modelat# n VRML

1.2 Car
Caracterizarea
acterizarea lumilor 3D
n loc de a parcurge pagini cu imagini statice "i de a urma hiperleg!turi, utilizatorii pot,
de exemplu, s! umble pe coridoare "i s! manipuleze obiecte, folosind o casc! special! de
vizualizare (Head-Mounted Display - HMD) "i o m!nu"! senzorial! (data glove) ori un costum
(data suit) pentru "comunicarea" cu mediul. Mai nou, a ap!rut ecranul retinal virtual
(Virtual Retinal Display - VRD) pentru o explorare mai facil! a lumilor 3D.
Crearea unui spa#iu virtual are similarit!#i cu procesul de proiectare urmat de arhitec#i.
n cartea sa "Towards a New Architecture", Le Corbusier (Charles-Edouard Jeanneret)
define"te arhitectura ca fiind "art!, un fenomen al emo"iilor". Manifestul s!u, constnd din
faptul c! arhitectura se bazeaz! pe trei elemente fundamentale, se poate aplica "i n cazul
realit!#ii virtuale. Aceste elemente sunt:

mas# - lumea este construit! din diverse forme (cuburi, conuri, sfere,
cilindri, piramide) avnd fiecare o mas!;

suprafa"# - o mas! este "nvelit!" de suprafa#a ei, suprafa#a dnd

individualitate fiec!rei mase;

planul - este generatorul lumii virtuale, ordonnd-o "i stabilind un set de

reguli de construc#ie.

Pentru a genera un mediu n VRML trebuiesc avute n vedere urm!toarele:

K-4

Tehnologii Web

design "i func#ionalitate;

originalitate;

propor#ie.

Lumile VRML, conform afirma#iilor lui Mark Pesce, adopt! dou! dintre caracteristicile
spa#iului Web "i anume cele legate de conectivitate (prin intermediul unui protocol de
comunica#ie, i.e. HTTP) "i de interfa"! (e.g. reprezentarea con#inutului). Browserele VRML
pot accesa dintr-o scen! 3D particular! alte fi"iere VRML via un anumit URI specificat.
La fel, navigatoarele Web pot nc!rca lumi VRML, folosind plugin-uri sau aplica#ii externe.

1.3 Criterii de design

VRML a fost proiectat pentru a ndeplini urm!toarele cerin#e:

Independen"a de editor
Face posibil! utilizarea de generatoare "i editoare disponibile pe orice
platform! "i posibilitatea de a importa date din alte formate.

Perfec"ionarea
nzestrat cu toate informa#iile necesare pentru implementarea "i adresarea
unui set de tr!s!turi complete pentru acceptarea unei largi industrii.

Compunerea
Abilitatea de a folosi elementele VRML-ului n diferite combina#ii "i astfel
permi#ndu-se reutilizarea lor n alte contexte.

Extensibilitatea
Abilitatea de a ad!uga noi elemente n cadrul lumilor VRML.

Implementarea
Capabil de implement!ri variate pe un num!r mare de sisteme.

Poten"ialul multi-utilizator
Implementarea lumilor VRML n vederea folosirii n contextele utilizatorilor
multiple (medii multi-utilizator).

Ortogonalitatea
Elementele limbajului trebuie s! fie independente unul de altul, iar orice
dependen#! posibil! trebuie s! fie structurat! "i bine definit!.

Performan"a
Elementele trebuie s! fie proiectate #innd cont de importan#a "i de
performan#ele interactive pe o varietate de platforme (software "i hardware).

Scalabilitatea
Elementele VRML trebuie s! fie proiectate pentru o infinitate de compozi#ii
spa#iale.

K-5

Tehnologii Web

Standardizarea practic!
Elementele VRML trebuie s! suporte aplica#ii existente sau m!car
propuneri care urmeaz! a fi standardizate.

Structuri bine-definite
Un element trebuie s! posede o interfa#! bine-definit! "i o simpl! stare cu
scop necondi#ionat. Elementele cu scopuri multiple "i efecte secundare trebuie
evitate.

n limbajul VRML pot s! se realizeze reprezentari statice "i animate de obiecte "i pot
exis#a hiper-leg!turi c!tre alte elemente multimedia, cum ar fi sunetele "i filmele.
Interpretoarele (vizualizatoarele) VRML sunt disponibile (de cele mai multe ori gratuit)
pentru diferite platforme, la fel cum exist! "i diverse instrumente capabile s! creeze "i
s! manipuleze fi"ierele VRML.
VRML suport! un model extensibil care permite definirea de noi obiecte "i o nregistrare
a proceselor, suportndu-se astfel dezvoltarea extensiilor inter-operabile printr-o modalitate
standardizat!. n acest mod, se asigura o legatur! ntre elementele VRML "i folosirea uzual!
a tr!s!turilor API (Application Programmer Interface) pentru grafica 3D.

1.4 Noduri VRML

Structura general! a unui fi"ier VRML (de obicei avnd extensia .wrl "i apar#innd
tipului MIME x-world/x-vrml sau, mai nou, model/vrml) este dat! de urm!toarele
trei sec#iuni:
1. Un antet obligatoriu care indic! navigatorului VRML versiunea de limbaj
folosit!.
2.

Comentarii precedate de caracterul "#".

3.

Noduri (vezi mai jos).

La baz!, VRML manipuleaz! obiecte, teoretic putnd con#ine orice: forme geometrice
3D, imagini, sunet. Mul#imea de baz! a obiectelor VRML const! din noduri. Aceste noduri
au construc#ia sintactic! de mai jos:
Tip "{"
cmp "[" valoare "]"
...
"}"

Conven#ia de scriere este ca tipurile de noduri s! fie specificate cu prima liter! majuscul!,
iar cmpurile s! apar! cu litere mici, f!r! a conta ordinea de apari#ie. Dup! cum se poate
remarca, VRML este un limbaj case-sensitive.
Nodurile formeaz! structura ini#ial! a tuturor lumilor VRML.
La versiunea VRML 1.0, nodurile se mpart n urm!toarele categorii principale:
1.

noduri definind forme geometrice (sfere, solide rectangulare, etc):

AsciiText, Cone, Cube, Cylinder, IndexedFaceSet, IndexedLineSet,
PointSet, Sphere;

K-6

Tehnologii Web

2.

noduri care specific! propriet!#ile "i modul de apari#ie a formelor:

Coordinate3, FontStyle, Info, Material, MaterialBinding, Normal,

ShapeHints, Texture2, TextureCoordinate2 etc.

3.

noduri care transform! spa#iul de lucru virtual: MatrixTransform,

Rotation, Scale, Transform, Translation;

4.

noduri definind punctul de perspectiv! (camera): OrthographicCamera,

PerspectiveCamera;
5.

noduri

care

definesc

modul

de

iluminare

obiectelor:

Separator,

Switch,

DirectionalLight, PointLight, SpotLight;

6.

noduri

de

grupare:

Group,

TransformSeparator, WWWAnchor;

Num!rul tipurilor de noduri VRML 2.0 este mult mai mare, ele putndu-se clasifica n:
1. noduri de grupare (utilizate la generarea unor grafuri ierarhice de
transformare a lumilor 3D): Anchor, Billboard, Collision, Group, LOD,
Transform;
2. noduri de grupuri speciale (folosite pentru gruparea unor noduri localizate
n manier! distribuit!: Inline sau pentru gruparea unor noduri n func#ie de un
cmp de selec#ie: Switch);
3.

noduri comune (utilizate s! reprezinte lumina, sunetele sau scripturile):

DirectionalLight, PointLight, SpotLight, Sound, AudioClip sau
Script;
4. noduri senzori (aceste noduri genereaz! evenimente, de cele mai multe ori
legate de ac#iunile ntreprinse de utilizatori sau legate de timp): CylinderSensor,
PlaneSensor,
ProximitySensor,
SphereSensor,
TimeSensor,
TouchSensor, VisibilitySensor;
5. noduri geometrice (sunt con#inute de un nod Shape "i modeleaz! figuri
geometrice bi- sau tridimensionale): Box, Cone, Cylinder, ElevationGrid,
Extrusion, IndexedFaceSet, IndexedLineSet, PointSet, Sphere,
Text;
6.

noduri de apari#ie (definesc propriet!#ile vizuale ale nodurilor geometrice):

Appearance,
Color,
Coordinate,
ImageTexture,
Material,
PixelTexture, TextureTransform etc.;
7.

noduri

de

interpolare (folosite pentru realizarea anima#iilor):

ColorInterpolator,
CoordinateInterpolator,
NormalInterpolator,
OrientationInterpolator,
PositionInterpolator sau ScalarInterpolator;
8. noduri de ata"are (bindable): Background, Fog, NavigationInfo,
Viewpoint. Aceste noduri pot avea mai multe instan#e ntr-un graf de scen!,
dar numai una dintre ele poate fi activat! la un moment dat.
Lista complet! a nodurilor, mpreun! cu propriet!#ile lor aferente, poate fi consultat! n
anexa 7.
Nodurile sunt aranjate n structuri ierarhice numite grafuri de scene, definind ordinea
de reprezentare a nodurilor "i folosind no#iunile de stare "i tranzi#ie. Exist! un mecanism de

K-7

Tehnologii Web

limitare a efectelor propriet!#ilor setate, permi#nd parti#ionarea scenelor n fragmente,

fiecare posednd o func#ionalitate independent!.
Sistemul de coordonate este cel cartezian tridimensional, unitatea de m!sur! pentru
distan#e fiind metrul, iar cea pentru unghiuri fiind radianul. Pot fi specificate "i valori
frac#ionare.

Sistemul cartezian tridimensional folosit de VRML

Cmpurile definind valori pentru propriet!#i pot fi de tip simplu (num!r, vector, imagine)
sau de tip compus.
Tipurile de baz! ale valorilor VRML sunt: SFBitMask, SFBool, SFColor,
SFEnum,
SFFloat,
SFImage,
SFLong,
SFMatrix,
SFRotation,
SFString, SFVec2f, SFVec3f (SF=Single value Field) sau MFColor, MFLong,
MFVec2f, MFVec3f (MF=Multiple value Field).
Exemple

Un prim exemplu de lume VRML 1.0 format! din dou! corpuri (o sfer!
violet! "i un cub verde).
#VRML V1.0 ascii
Separator {
DirectionalLight {
direction 0 0 -1
}
Separator {
Material {
diffuseColor 1 0 1
}
Sphere {}
}
Separator {
Material {
diffuseColor 0 1 0
}

# direc#ia de iluminare
# creaz! o sfer! violet!
# culoare de forma RGB

# genereaz! un cub verde

K-8

Tehnologii Web

Transform {
translation 0 2 0
}
Cube {}

# mut! n sus (pe axa 0y) cu

# 2 m de la origine
# forma cubic! de dimens. implicite

}
}

n cele ce urmeaz!, ne vom ocupa de nodurile VRML 2.0.

Pentru nceput vom prezenta nodurile geometrice simple:

cuburi

#VRML V2.0 utf8

Shape { # acest nod s-a numit Cube n VRML 1.0
geometry Box {}
}

sfere

#VRML V2.0 utf8

Shape { # o sfer! de raz! 1,33m
geometry Sphere {
radius 1.33
}
}

cilindri

#VRML V2.0 utf8

Shape { # un gen de cea"c!
geometry Cylinder {
height 0.5
radius 0.5
bottom TRUE
side TRUE
top FALSE
}
}

Dac! nodurile geometrice nu au precizate dimensiuni, atunci va fi considerat! ca

valoare implicit! valoarea 2 (metri).
VRML 2.0 permite folosirea de corpuri geometrice mai complexe care vor fi
definite prin intermediul nodurilor de tip PointSet, IndexedLineSet,
IndexedFaceSet, Extrusion "i ElevationGrid.
PointSet ne ajut! s! specific!m o mul#ime de puncte n spa#iu, mpreun! cu
valorile culorilor de reprezentare:

K-9

Tehnologii Web

Shape {
geometry PointSet {
coord Coordinate {
point [
1.0 1.0 1.0
-1.0 -1.0 -1.0
1.0 -1.0 1.0
]
}
color Color {
color [
1.0 1.0 0.0
1.0 1.0 1.0
1.0 0.0 1.0
]
}
}
}

Dac! dorim s! definim un set de linii, vom utiliza IndexedLinesSet,

iar pentru a specifica un set de plane vom folosi noduri IndexedFaceSet:
Shape {
appearance Appearance {
material Material { }
}
geometry IndexedFaceSet {
coord Coordinate {
point [ -1 -1 0, 1 -1 0, 1 1 0, -1 1 0, 0 0 1 ]
}
coordIndex [ 0 1 4 -1, 1 2 4 -1, 2 3 4 -1, 3 0 4 ]
color Color {
color [ 1 0 0, 0 1 0, 0 0 1 ]
}
colorIndex [ 1 2 0 2 ]
colorPerVertex FALSE
solid TRUE
convex TRUE
}
}

Pentru a defini fiecare fa#et! a unui corp geometric tridimensional ne vom sluji
de noduri de tip Extrusion, care pot genera figuri deosebit de complexe.
Urmeaz! un exemplu:

K - 10

Tehnologii Web

#VRML V2.0 utf8

Shape {
geometry Extrusion {
crossSection [1 1, 1 -1, -1 -1, -1 1, 1 1]
spine [0 0 0, 0 2 0, 1 3 0, 2 3 0]
scale [1 1, 1 0.5, 0.5 1, 0.5 0.5]
}
appearance Appearance {
material Material {
diffuseColor 0 0.5 1
}
}
}

O rota#ie asupra unui obiect VRML poate fi realizat! n jurul a celor trei axe
de coordonate (Ox - yaw, Oy - roll, Oz - pitch). Cmpul rotation va necesita patru
argumente, primele trei corespunznd axelor, iar ultimul fiind unghiul de rota#ie,
dat n radiani. A"adar, pentru o rota#ie de 180 de grade n jurul axei Oz va trebui
s! scriem:
rotation 0 0 1 3.1415

Pentru a realiza o transla#ie, ne vom folosi de translation care necesit! trei

argumente numerice, corespunz!toare celor trei axe de coordonate:
translation 0 1.5 1

Pentru ca aceste transform!ri geometrice s! fie efective, ele trebuiesc precizate

drept cmpuri ale unui nod de tip Transform. n cadrul unui nod Transform
nodurile pot fi tratate unitar "i adresate ca o entitate. Pentru a opera anumite
transform!ri particulare doar asupra unor noduri, ne vom folosi de cmpul
children.
Un exemplu complet este dat n continuare:
#VRML V2.0 utf8
Shape { # un plan
geometry Box {
size 7 7 0.1
}
appearance Appearance {
material Material {
diffuseColor 0 0.2 0.6
}
}
}
Shape { # o sfer!
geometry Sphere {
radius 2
}

K - 11

Tehnologii Web

appearance Appearance {
material Material {
emissiveColor 1 1 0
specularColor 1 1 1
shininess 0.7
}
}
}
Shape { # un "b!#"
geometry Box {
size 0.1 0.1 10
}
}
Transform {
rotation 0 0 1 3.1415
children [
Shape { # un con rotit
geometry Cone {
side TRUE
bottom FALSE
height 7.5
}
appearance Appearance {
material Material {
diffuseColor 0 0.5 0.5
}
}
}
]
}

Din exemplul de mai sus, observ!m definirea aparen#ei (mul#imii de

propriet!#i vizuale) unei forme geometrice prin utilizarea unui nod de tip
Appearance. n cadrul unui nod de acest tip pot fi specificate mai multe tipuri de
cmpuri. Un nod de tip Material va stabili propriet!#i ale materialului din care
este "construit!" o form!, pe baza c!rora se vor calcula ecua#iile luminii asupra
obiectelor VRML. Modelul de calcul al luminozit!#ii n VRML este complex,
putnd apare urm!toarele cmpuri:
Material {
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
}

SFFloat
SFFloat
SFFloat
SFFloat
SFFloat
SFFloat

ambientIntensity
diffuseColor
emissiveColor
shininess
specularColor
transparency

valoare
r g b
r g b
valoare
r g b
valoare

Aceste cmpuri definesc culoarea obiectelor "i modul de reflectare a luminii

diferitelor surse de iluminare asupra obiectelor. Toate valorile sunt frac#ionare.
Valorile cmpurilor reprezentnd culori vor fi date prin cele trei componente
(ro"u-verde-albastru), conform standardului RGB.
Cmpul diffuseColor este unul dintre cele mai folosite, specificnd culoarea
difuz!, maniera de reflexie a luminii depinznd de unghiul suprafe#ei. Cmpul
emissiveColor define"te "obiectele str!lucitoare" (de exemplu, o veioz!).
Cmpul specularColor specific! reflexia suplimentar! atunci cnd unghiul
luminii este foarte apropiat de unghiul de vizualizare a obiectului respectiv "i
K - 12

Tehnologii Web

se folose"te n conjunc#ie cu shininess. Cmpul transparency define"te

gradul de transparen#a a unui obiect (de la complet transparent - valoarea 1, pn! la
complet opac - valoarea 0).
n VRML 2.0 pot fi specificate, prin intermediul cmpului texture, texturi care
vor fi aplicate asupra unui anumit obiect, aceste texturi fiind: imagini n format
JPEG "i PNG (op#ional GIF) - noduri de tip ImageTexture, filme n format
MPEG - noduri de tip MovieTexture. Se poate utiliza "i nodul PixelTexture
pentru a indica modul de aplicare a texturii.
Maniera de aplicare a texturii asupra unei forme geometrice poate fi stabilit! prin
intermediul unui nod de tip TextureTransform.
Exemple
O prim! exemplificare:
#VRML V2.0 utf8
Background {
# fundalul (vezi mai jos)
skyAngle [ 1.2 1.57 ]
skyColor [ 0 0 1, 0 0 0.6, 0 0.5 0.6 ]
groundAngle [ 0.5 ]
groundColor [ 0.0 0.1 0.5, 0 0.5 0.6 ]
}
Transform {
translation -1.5 3 0
children Shape {
geometry Text { # un text
string ["Tehnologii","Web"]
length []
maxExtent 0.0
}
}
}
Transform {
translation 1.5 0 0
# un cub cu fa#ete umplute cu o imagine 2D
children Shape {
appearance Appearance {
texture ImageTexture {
url "web.gif"
}
}
geometry Box {}
}
}
Transform {
translation 4.5 0 0
# un con cu fa#ete umplute cu o imagine 2D
children Shape {
appearance Appearance {
texture ImageTexture {
url "web.gif"
}
}

K - 13

Tehnologii Web

geometry Cone {}
}
}
Transform {
translation 5 -2.5 0
children Shape {
appearance Appearance {
material Material {
diffuseColor 0 0 0
}
# schimb! culoarea (negru)
}
geometry Text {
string ["n","VRML"]
length []
maxExtent 0.0
fontStyle FontStyle {
# modific! propriet!#ile fontului
family "SANS"
style "PLAIN"
horizontal TRUE
leftToRight TRUE
topToBottom TRUE
justify "BEGIN"
size 1.0
spacing 1.0
}
}
}
}

Lumea 3D generat# de exemplul de mai sus, vizualizat# cu WorldView 2.0

Un alt exemplu, n care vom folosi ca textur! un film:

K - 14

Tehnologii Web

#VRML V2.0 utf8

Shape{
appearance Appearance {
texture MovieTexture {
loop TRUE
# repetarea filmului
startTime 0
# timpul de start
stopTime 0
# timpul de oprire
speed 2
# viteza de vizualizare
url "tex.mpg" # URL-ul filmului
repeatS TRUE # imagine repetat! orizontal
repeatT FALSE # imagine repetat! vertical
}
# modul de transformare a texturii
textureTransform TextureTransform {
scale 2 2
rotation -0.785
}
}
geometry Box {}
}

Noutatea dintr-un exemplu anterior const! n apari#ia nodurilor de tip

Text. Dup! cum se poate remarca, pot fi specificate diferite propriet!#i: familia

fontului, m!rimea, spa#ierea dintre caractere, alinierea etc.

Asupra formelor geometrice pot fi aplicate diverse surse de lumin!, fiind

suportate trei tipuri de ilumin!ri date de nodurile:

DirectionalLight - toate razele de lumin! sunt paralele; acest

tip de iluminare nu are definit! o localizare, ci doar o direc#ie. Sursa de

lumin! se consider! a fi plasat! foarte departe de lumea virtual!.

Iluminare direc"ional#

Un exemplu:
DirectionalLight {
on TRUE
intensity 1
ambientIntensity 0
color 1 1 1
direction 0 0 -1
}

K - 15

Tehnologii Web

PointLight - reprezint! o surs! de lumin! care apar#ine lumii 3D

"i care ac#ioneaz! asupra tuturor obiectelor din vecin!tatea ei (putem asimila
acest tip de lumin! cu iluminarea conferit! de soare).

O exemplificare:
PointLight {
on TRUE
intensity 1
ambientIntensity 0
color 1 1 0
location 0 0 0
attenuation 1 0 0
radius 100
}

SpotLight - reprezint! un spot de lumin!, crend un con de

lumin!.

Iluminare de tip spot

Un exemplu:
SpotLight {
on TRUE
intensity 1
ambientIntensity 0
color 1 1 1
location 0 0 0
direction 0 0 0
attenuation 1 0 0
radius 100
cutOffAngle 0.78
beamWidth 1.57
}

Desigur, lumile VRML pot fi nl!n#uite sau pot con#ine ancore spre alte
resurse Web. Acest lucru se poate realiza prin intermediul nodurilor de tip Anchor.

Un exemplu este cel de mai jos, unde unui cub i se ata"eaz! o ancor! spre un
document HTML:

K - 16

Tehnologii Web

#VRML V2.0 utf8

Transform {
rotation 1 0 0 0.4
children [
Shape { # un plan
geometry Box {
size 20 0.1 20
}
appearance Appearance {
material Material {
diffuseColor 0.3 0.1 0.5
transparency 0.3
}
}
}
]
}
Anchor {
url "http://www.infoiasi.ro/~busaco"
description "Spre pagina mea..."
children [
Shape { # un cub
geometry Box {}
appearance Appearance {
material Material {
diffuseColor 0 0 1
}
}
}
]
}

Alte noduri utile pentru crearea de ierarhii de obiecte VRML sunt:

Billboard va grupa nodurile astfel nct acestea s! fie vizibile

dintr-un anumit punct de observare, indiferent de localizarea utilizatorului;

Collision poate fi utilizat la detectarea "i setarea coliziunilor cu

obiectele dintr-un graf de scen! VRML. n exemplul de mai jos, va fi emis

un sunet atunci cnd utilizator se va ciocni de sfera figurat! pe ecran:
#VRML V2.0 utf8
DEF col Collision {
children [
Sound { # un sunet...
source DEF ac AudioClip {
loop FALSE
pitch 1.0
url "ding.wav"
}
}
Shape {
appearance Appearance {
material Material {}
}

K - 17

Tehnologii Web

geometry Sphere {}
}
]
}
# o rut! de evenimente (vezi mai jos)
ROUTE col.collideTime TO ac.set_startTime
}

Switch va fi folosit pentru a realiza alternative de reprezentare

a obiectelor.

1.5 Suportul pentru modularizare

Reutilizarea "i modularizarea codului reprezint! unele dintre cele mai importante facilit!#i
ale oric!rui limbaj de programare. n VRML putem identifica un anumit set de noduri prin
intermediul unui nume "i apoi s!-l copiem oriunde dorim n cadrul programului.
Pentru aceasta vom folosi construc#ia DEF, care ne va permite instan#e multiple ale unui
obiect VRML.
Un nod definit cu DEF va fi utilizat ulterior prin intermediul unui USE, dup! cum
se poate remarca din exemplul de mai jos:
#VRML V2.0 utf8
# definirea unei axe
DEF AXE Shape {
geometry Cylinder {
radius 0.33
height 4
}
appearance Appearance {
material Material {
diffuseColor 0.33 0.33 0.5
emissiveColor 0.2 0.2 0.4
}
}
}
# un asterisc virtual
Transform {
rotation 0 0 1 1.0472
children USE AXE
}
Transform {
rotation 0 0 1 2.0944
children USE AXE
}
Transform {
rotation 0 0 1 -1.0472
children USE AXE
}

K - 18

Tehnologii Web

Un asterisc virtual

Propriet!#ile unui nod definit prin DEF pot fi ulterior modificate, dup! cum se observ!
din urm!torul exemplu:
#VRML V2.0 utf8
Transform {
children [
DEF BSph Shape { # o sfer!
geometry Sphere {}
}
Transform {
translation 2 0 0
children
# redefinirea sferei (se modific! raza)
DEF BSph Shape {
geometry Sphere { radius .2 }
}
}
Transform {
translation -2 0 0
# utilizarea noii defini#ii
children USE BSph
}
]
}

n aceast! manier!, codul VRML devine modularizat "i mai scurt. Mai multe noduri
pot fi, de asemeni, grupate prin intermediul unui nod Group.
O alt! facilitate este cea referitoare la inserarea de obiecte (noduri) externe prin
intermediul unui nod Inline:

K - 19

Tehnologii Web

Inline {
url "lume-virtual!.wrl"
bboxSize dOx dOy dOz
bboxCenter cOx cOy cOz
}

Un nod Inline are n componen#! trei cmpuri:

a. url specific! URL-ul unei lumi 3D care va fi inserat! n cadrul lumii
curente;
b. bboxSize define"te dimensiunile paralelogramului (cutiei de afi"are) n
care va fi nc!rcat! lumea VRML, valorile implicite fiind (-1, -1, -1);
c. bboxCenter denot! coordonatele punctului de origine a lumii inserate,
relativ la cutia de afi"are.
# importarea unei lumi VRML
Inline {
url "peisaj.wrl"
bboxSize 7 7 7
bboxCenter 0 0 0
}

n VRML 2.0 putem folosi a"a-numitele prototipuri pentru a defini noi noduri con#innd
cmpuri specificate de utilizator. Prototipurile vor fi date prin intermediul construc#iei
PROTO, n aceast! manier! putnd extinde limbajul prin ad!ugarea unor noduri proiectate
de programator.
Structura unui prototip simplu este:
PROTO nume_prototip [
cmp tip_cmp nume valoare_implicit!
cmp tip_cmp nume valoare_implicit!
...
]
{ nod }

Aten#ia designerului de lumi 3D trebuie concentrat! asupra eficien#ei nc!rc!rii fi"ierelor

VRML. Dac! lumea con#ine un num!r mare de noduri, le putem grupa folosind fie Group,
fie Transform. Putem reutiliza anumite obiecte definindu-le n prealabil cu DEF "i apoi
incluzndu-le prin USE. Pentru a parametriza anumite obiecte complexe, ne vom folosi de
construc#ia PROTO. Pentru a accelera nc!rcarea "i reprezentarea pe ecran a lumilor VRML,
le putem include n noduri Inline specificnd, prin proprietatea bboxSize, "i locul
ocupat de acestea.

K - 20

Tehnologii Web

1.6 Scrierea de lumi 3D complexe

Trebuie s! lu!m n considera#ie, atunci cnd model!m lumi VRML complexe, mai multe
aspecte importante n receptarea n bune condi#ii, de c!tre utilizator, a spa#iului virtual
pe care l-am imaginat.
Moduri de navigare
Astfel, putem furniza o serie de informa#ii de navigare prin intermediul unui nod de tip
NavigationInfo care va stabili paradigma de navigare utilizat! de browserul VRML

(e.g. "WALK", "EXAMINE", "FLY" sau "NONE"):

NavigationInfo {
type "EXAMINE" # modul examinare
}
NavigationInfo {
type [ "WALK", "ANY" ]
}

Un nod NavigationInfo poate fi utilizat de asemeni pentru a descrie utilizatorul

dintr-un sistem VRML. Astfel, cmpul avatarSize specific! dimensiunile fizice ale
avatarului care substituie utilizatorul n cadrul mediului virtual. Cmpul headlight este
de tip boolean, inhibnd sau permi#nd apari#ia luminii n scena VRML. Pentru a seta
distan#a maxim! pn! la care poate se va vizualiza lumea virtual!, putem utiliza
visibilityLimit (valoarea implic! este 0.0, indicnd infinitul). Proprietatea speed
reprezint! viteza de deplasare (n metri pe secund!) a utilizatorului prin lumea VRML.
NavigationInfo {
headlight FALSE
speed 1.33
type "WALK"
visibilityLimit 0.0
}

Maniere de vizualizare
Anumite scene 3D pot fi vizualizate optim doar de la anumite distan#e "i sub diverse
unghiuri. Pentru a furniza utilizatorului puncte de observare prestabilite care vor fi indicate
de navigatorul VRML, ne vom folosi de noduri de tip Viewpoint. Propriet!#ile
importante ale unui nod Viewpoint sunt:

pozi#ia n spa#iu (position) pentru cele trei coordonate;

direc#ia de vizualizare (orientation) care are aceea"i parametri ca "i

proprietatea rotation;

unghiul de vizualizare (fieldOfView) dat n radiani;

descrierea textual! a punctului de observare (description);

tranzi#ia efectuat! la trecerea de la un punct de observare la altul (jump).

K - 21

Tehnologii Web

Ca "i nodurile de tip NavigationInfo, nodurile Viewpoint sunt noduri de ata"are.

DEF CloseView Viewpoint {
position 1 0 -1
orientation 1 0 0 0.4
description "Mai aproape"
}

Putem folosi puncte de observare multiple, dup! cum se remarc! din exemplul de
mai jos:
#VRML V2.0 utf8
# primul punct de observare
Viewpoint {
fieldOfView 0.785398
position 0 0 10
orientation 0 0 1 0
jump FALSE
description "v1"
}
# al doilea punct de observare
Viewpoint {
fieldOfView 0.785398
position -10 0 0
orientation 0 1 0 -1.57
jump TRUE
description "v2"
}
# un paralelogram
Shape {
appearance DEF ap Appearance {
material Material {
diffuseColor 0.6 0.8 1.0
}
}
geometry Box {
size 5 0.5 1
}
}
# prima sfer!
Transform {
translation -5 1 0
children
Shape {
appearance USE ap
geometry Sphere {}
}
}
# a doua sfer!
Transform {
translation 0 2 -5
children
Shape {
appearance USE ap
geometry Sphere {}
}
}

K - 22

Tehnologii Web

De asemeni, aceste noduri pot fi utilizate pentru a realiza a"a-numitele tour guides prin
scenele 3D concepute.
Informa"ii despre lumile VRML
Fiecare lume VRML modelat! poate include, prin intermediul unui nod WorldInfo,
informa#ii despre autorul "i lumea respectiv! (anumite browsere pot afi"a aceste date):
WorldInfo {
info [ "O lume scris! n VRML97", "dec 2000" ]
title "Lec#ii de geometrie"
}

Nivele de detaliere
n continuare ne vom ocupa de anumite facilit!#i oferite de VRML 2.0 dezvoltatorilor de
lumi virtuale.
n primul rnd, pentru a optimiza afi"area scenelor complexe, autorul de lumi VRML
poate specifica o serie de nivele de detaliere prin intermediul nodurilor de tip LOD
(level of detail). Privite de la dep!rtare, obiectele vor putea fi reprezentate doar schi#at
(de exemplu o cas! poate apare ca un paralelipiped), iar pe m!sur! ce utilizatorul se apropie
am!nuntele se pot nmul#i (ad!ugnd noi obiecte, texturi, ilumin!ri etc.).
Structura general! a unui nod LOD este:
LOD {
center dOx dOy dOz
range interval_de_vizualizare
level colec"ie_de_noduri
}

Cmpul center va defini originea obiectelor pentru care fix!m mai multe nivele de
detaliere, iar range va specifica navigatorului care nivel de detaliu va fi utilizat n func#ie de
distan#ia de vizualizare. Proprietatea level va reprezenta o colec#ie de nivele de detaliere.
De exemplu, pentru trei nivele de detaliere vom putea scrie urm!toarele:
LOD {
center 0 0 0
range [5, 30]
level [
# nivelul 1 - departe
Inline {
url "lume3D.wrl"
...
}
# nivelul 2 - mediu
Shape {
...
}
# nivelul 3 - aproape
Group {
...
}
]
}

K - 23

Tehnologii Web

Desigur, putem defini oricte nivele dorim, pentru a realiza o tranzi#ie lin! de la o scen!
simplist! la o scen! detaliat!.
Realismul lumilor virtuale
De asemeni, pentru ca lumea VRML s! aib! un grad mai mare de realism, vom putea
utiliza noduri de tip Background, Fog, Sound ori AudioClip.
Nodul Background ofer! posibilitatea de a descrie orizontul lumii imaginate.
Forma general! (simplificat!) este urm!toarea:
Background {
# culoarea cerului
skyColor list!_de_culori
# utilizat pentru degradeuri
skyAngle list!_de_unghiuri
# culoarea terenului
groundColor list!_de_culori
# utilizat pentru degradeuri
groundAngle list!_de_unghiuri
}

Acest nod poate fi folosit pentru a asocia diverse texturi (imagini) lumilor noastre.
Background
MFString
MFString
MFString
MFString
MFString
MFString
}

{
backUrl
bottomUrl
frontUrl
leftUrl
rightUrl
topUrl

[]
[]
[]
[]
[]
[]

Asocierea texturilor lumii VRML

Pentru a ad!uga atmosfer! lumilor 3D concepute vom utiliza noduri de tip Fog:
Fog {
# culoare
color 1 1 1
# tip
fogType "LINEAR"
# distan#a vizibilit!#ii obiectelor
visibilityRange 0.3
}

K - 24

Tehnologii Web

Tipurile de cea#! permise sunt "LINEAR" sau "EXPONENTIAL".

Pentru a colora diferit poligoanele care compun lumile VRML create, vom apela la
noduri de tip Color:
#VRML V2.0 utf8
WorldInfo {
title "Floppy's VRML97 Tutorial Example 2.5d"
info ["(C) Copyright 2000 Vapour Technology Ltd."
"vrmlguide@vapourtech.com"]
}
# modul de navigare
NavigationInfo {
headlight TRUE
type "EXAMINE"
}
# un cub avnd fiecare fa#et! de culoare diferit!
Transform {
scale 2 2 2
children [
Shape {
appearance Appearance {
material Material {
diffuseColor 1 1 1
}
}
geometry IndexedFaceSet {
coord DEF COORD Coordinate {
point [
1 -1 -1,
-1 -1 -1,
-1 -1 1,
1 -1 1,
1 1 -1,
-1 1 -1,
-1 1 1,
1 1 1
]
}
coordIndex [
3 2 1 0 -1
0 1 5 4 -1
1 2 6 5 -1
2 3 7 6 -1
3 0 4 7 -1
4 5 6 7 -1
]
colorPerVertex TRUE
color Color {
color [
0 0 0,
0 0 1,
0 1 1,
0 1 0,
1 0 0,

K - 25

Tehnologii Web

1 0 1,
1 1 1,
1 1 0
]
}
}
}
]
}

Dac! dorim s! ad!ug!m "i o dimensiune sonor! lumilor VRML, vom specifica sunete
spa#iale prin noduri de tip Sound.
Sursa sonor! va putea fi un fi"ier audio MIDI, WAV sau MPEG, specificate prin
intermediul nodurilor AudioClip ori MovieTexture. Mai pot fi precizate localizarea
spa#ial!, intensitatea, modul de receptare (spa#ial sau ambiental).
#VRML V2.0 utf8
Group {
children [
Sound { # sonorul lumii
source AudioClip {
url "hello.wav"
loop TRUE # repet!
}
spatialize TRUE
intensity 0.8
location 0.0 1.0 0.0
}
Shape { # un cub verde
appearance Appearance {
material Material {
emissiveColor 0 1 0
}
}
geometry Box{}
}
]
}

1.7 Lumi VRML dinamice

Spa#iul virtual a fost conceput s! interac#ioneze cu utilizatorul. n VRML, acest lucru
se poate realiza prin intermediul evenimentelor (generate de navigator "i/sau de utilizator).
Toate nodurile VRML pot genera sau recep#iona evenimente, iar pentru a defini modul de
interac#iune a nodurilor generatoare ori receptoare de evenimente ne vom folosi de
a"a-numitele rute (specificate prin construc#iile ROUTE).
Putem privi nodurile VRML drept colec#ii de cmpuri, dup! cum le-am prezentat mai
sus. O serie dintre aceste cmpuri, denumite cmpuri expuse (exposed fields) pot fi alterate
de un anumit eveniment de intrare (eventIn). Nodul, la rndul s!u, poate genera un set de
evenimente de ie"ire (eventOut) care vor fi trimise spre alte noduri (uzual, noduri Script),
urmnd anumite rute.

K - 26

Tehnologii Web

Modelul rut!-eveniment n VRML este dat n urm!torul exemplu, n care avem o rut! de
la un eveniment de ie"ire touchTime generat de un nod Sensor (vezi mai jos) la un
eveniment de intrare startTime primit de un nod Sound. Astfel, la un click de mouse va fi
generat un anumit sunet.

Modelul rut#-eveniment din VRML

Astfel, putem realiza anima#ii sofisticate sau modific!ri complexe asupra lumilor VRML,
afectnd n mod dinamic anumite valori ale unor cmpuri, f!r! a utiliza scripturi.
De exemplu, pentru a roti un obiect, va trebui s! modific!m valorile cmpului rotation.
n VRML 2.0 exist! o multitudine de evenimente care pot fi captate sau generate de
senzori (noduri Sensor), interpolatoare (noduri Interpolator) "i script-uri (noduri
Script).
Senzori
Valorile cmpurilor expuse ale unui nod VRML pot fi alterate via evenimentele de
intrare, prin intermediul senzorilor:
a. TimeSensor reprezint! de fapt un temporizator, f!r! a poseda pozi#ie "i
form! n spa#iul geometric. Se poate utiliza cu succes la realizarea de anima#ii,
genernd evenimente la momente regulate de timp sau coordonnd activitatea
nodurilor de interpolare.
Forma general! este urm!toarea:

K - 27

Tehnologii Web

TimeSensor {
exposedField
exposedField
exposedField
exposedField
exposedField
eventOut
eventOut
eventOut
eventOut
}

SFTime
SFBool
SFBool
SFTime
SFTime
SFTime
SFFloat
SFBool
SFTime

cycleInterval
enabled
loop
startTime
stopTime
cycleTime
fraction_changed
isActive
time

1
TRUE
FALSE
0
0

Cmpul cycleInterval va desemna intervalul de func#ionare a

temporizatorului, iar enabled va indica starea acestuia (activat sau nu). Pentru a
realiza o func#ionare repetitiv! putem seta pe TRUE cmpul loop. Dac! loop este
TRUE, atunci un anumit eveniment va fi generat la fiecare cycleInterval
secunde. Propriet!#ile startTime "i stopTime specific! momentele de nceput
"i, respectiv, sfr"it ale activit!#ii temporizatorului.
Evenimentele de ie"ire generate de acest senzor sunt:

cycleTime - va fi trimis de fiecare dat! cnd temporizatorul va

atinge cycleInterval;

fraction_changed - genereaz! un flux de evenimente, util

pentru a manipula nodurile de interpolare;

isActive - va putea fi folosit pentru a verifica dac! senzorul de

temporizare este activ sau nu.

Un exemplu n care din dou! n dou! secunde va fi emis un sunet:

#VRML V2.0 utf8
WorldInfo {
title "Floppy's VRML97 Tutorial"
info ["(C) Copyright 2000 Vapour Technology Ltd."
"vrmlguide@vapourtech.com"]
}
# un temporizator
DEF TIMER TimeSensor {
cycleInterval 2.0
loop TRUE
}
# o surs! sonor!
Sound {
minFront 10
minBack 10
maxFront 50
maxBack 50
source DEF SOUND AudioClip {
url "boom.wav"
}
}

K - 28

Tehnologii Web

# un text
Shape {
appearance Appearance {
material Material {
diffuseColor 0 1 0
}
}
geometry Text {
string "Booom!"
fontStyle FontStyle {
justify "MIDDLE"
}
}
}
# la fiecare 2 secunde se va auzi un sunet
ROUTE TIMER.cycleTime TO SOUND.startTime

b. VisibilitySensor define"te o box! invizibil! care trimite evenimente la

fiecare intrare "i ie"ire n cmpul de observa#ie al utilizatorului. Dac! boxa intr! n
cmpul de observa#ie al utilizatorului, va fi generat un eveniment isActive cu
valoarea TRUE, iar enterTime va fi setat la valoarea timpului de intrare.
La p!r!sirea boxei, isActive devine FALSE "i exisTime va fi actualizat.
Un astfel de senzor poate fi util la optimizarea anima#iilor VRML.
n exemplul de mai jos, va fi emis un sunet doar dac! utilizatorul va vedea o sfer!
verde pe ecran. Dac! se ndep!rteaz! prea mult, sunetul va sl!bi n intensitate sau
chiar se va stinge complet:
#VRML V2.0 utf8
# senzorul de vizibilitate
DEF SENSOR VisibilitySensor {
size 2 2 2
}
# o surs! de sunet
Sound {
minFront 10
minBack 10
maxFront 50
maxBack 50
source DEF SOUND AudioClip {
loop TRUE
url "boom.wav"
}
}
# o sher! verde
Shape {
appearance Appearance {
material Material {
emissiveColor 0 1 0
}
}
geometry Sphere {}
}

K - 29

Tehnologii Web

# dou! rute de evenimente

ROUTE SENSOR.enterTime TO SOUND.startTime
ROUTE SENSOR.exitTime TO SOUND.stopTime

c. ProximitySensor este asem!n!tor lui VisibilitySensor, dar n plus

va furniza "i pozi#ia "i orientarea utilizatorului.
d. Collision a mai fost prezentat ca nod de grupare, dar poate fi utilizat "i
drept senzor de coliziune a obiectelor ntr-o anima#ie. Dac! proprietatea collide
este TRUE se detecteaz! coliziunile, iar obiectele vor fi considerate solide,
utilizatorul neputnd trece prin ele. Atunci cnd utilizatorul va atinge geometria
obiectelor con#inute de un nod Collision, se va genera evenimentul de ie"ire
collideTime.
...
DEF COLLIDER1 Collision {
children [
# o sfer! violet!
Shape {
appearance Appearance {
material Material {
emissiveColor 1 0 1
}
}
geometry Sphere {}
}
# un sunet de ciocnire
Sound {
source DEF SOUND1 AudioClip {
url "pleosc.wav"
}
}
]
# se detecteaz! coliziunile
collide TRUE
}
DEF COLLIDER1 Collision {
children [
Transform {
translation 10 0 0
children [
# o sfer! galben!
Shape {
appearance Appearance {
material Material {
emissiveColor 1 1 0
}
}
geometry Sphere {}
}
# alt sunet de ciocnire
Sound {
source DEF SOUND2 AudioClip {
url "boom.wav"
}
}
]
}
]

K - 30

Tehnologii Web

# vecin!tatea coliziunilor
proxy Transform {
translation 10 0 0
children [
# un cub de latur! 4 metri
Shape {
geometry Box {
size 4 4 4
}
}
]
}
# se detecteaz! coliziunile
collide TRUE
}
# dou! rute
ROUTE COLLIDER1.collideTime TO SOUND1.startTime
ROUTE COLLIDER2.collideTime TO SOUND2.startTime

e. TouchSensor poate fi folosit la detectarea interac#iunilor cu mouse-ul

asupra lumii VRML. Evenimentele generate pot fi isOver (indic! faptul c!
mouse-ul se afl! peste un anumit obiect), isActive (este TRUE dac! utilizatorul a
f!cut un click), touchTime (con#ine valoarea de timp cnd s-a executat click).
Atunci cnd isOver este TRUE, vor fi trimise "i evenimente
hitNormal_changed (reprezint! normala la suprafa#a asupra c!reia s-a ac#ionat
click), hitPoint_changed (indic! punctul care a fost atins de cursorul
mouse-ului) "i hitTexCoord_changed (reprezint! coordonatele texturii
suprafe#ei).
TouchSensor {
exposedField
eventOut
eventOut
eventOut
eventOut
eventOut
eventOut
}

SFBool
SFVec3f
SFVec3f
SFVec2f
SFBool
SFBool
SFTime

enabled
TRUE
hitNormal_changed
hitPoint_changed
hitTexCoord_changed
isActive
isOver
touchTime

f. SphereSensor apar#ine clasei senzorilor de tip drag care pot fi folosi#i

pentru efectuarea opera#iilor de drag asupra unor obiecte. Nodul SphereSensor
se utilizeaz! la rotirea unor obiecte VRML de c!tre utilizator. Evenimentele de
isActive,
rotation_changed
ie"ire
generate
sunt
"i
trackPoint_changed.
g. CylinderSensor este folosit la rotirea n jurul axei Oy, fiind similar
senzorului SphereSensor.
h. PlaneSensor va putea fi utilizat pentru a realiza drag n jurul unui plan
(mutnd obiectele pe coordonatele locale Ox "i Oy).
Un exemplu, n care utilizatorul poate transla o sfer!:

K - 31

Tehnologii Web

#VRML V2.0 utf8

DEF t Transform {
children [
Shape {
geometry Sphere {}
appearance Appearance {
material Material {
diffuseColor 0.3 0.7 0.5
}
}
}
]
}
DEF ps PlaneSensor {}
# o rut! de translare
ROUTE ps.translation_changed TO t.set_translation

Interpolatoare
Deosebit de utile pentru realizarea anima#iilor, nodurile de interpolare sunt folosite la
modificarea unor anumite valori de cmpuri ntr-un mod uniform, n func#ie de timp.
De cele mai multe ori, un interpolator va prelua evenimente de la un nod TimeSensor "i
va realiza o interpolare liniar! ntre diverse valori denumite keyValues. Fiecare astfel de
valoare va avea o cheie, numit! key, a c!rei valori vor fi numere frac#ionare ntre 0 "i 1.
Dup! cum am v!zut mai sus, un nod TimeSensor va trimite evenimente
fraction_changed ori de cte ori va putea. Printr-o rut!, putem asocia aceste
evenimente unui interpolator pentru a calcula urm!toarea valoare de interpolare pentru un
anumit cmp dorit. De fiecare dat! cnd un nod de interpolare recepteaz! un eveniment de
intrare, va genera un eveniment de ie"ire avnd valoarea interpolat!, conform func#iei de
interpolare stabilite.
Nodurile de interpolare VRML sunt:

ColorInterpolator (interpoleaz! 3-uple de culori),

CoordinateInterpolator (interpoleaz! coordonate ale spa#iului 3D),

NormalInterpolator (interpoleaz! normale),

OrientationInterpolator

PositionInterpolator

(interpoleaz! informa#ii privitoare la

orientarea obiectelor),
(interpoleaz! date referitoare la pozi#ia

obiectelor),
ScalarInterpolator (interpoleaz! valori reale, fiind deci un

interpolator general, care poate fi folosit la interpolarea luminozit!#ii sau

transparen#ei).

K - 32

Tehnologii Web

Ruta de evenimente vehiculate de un interpolator

Pentru fiecare tip de interpolator, vom avea la dispozi#ie cmpurile:

eventIn
exposedField
exposedField
eventOut

SFFloat
MFFloat
MFVec3f
MFVec3f

set_fraction
key
[]
keyValue
[]
value_changed

Un exemplu de animare a globului p!mntesc, folosind un nod de interpolare

OrientationInterpolator:
#VRML V2.0 utf8
Group {
children [
NavigationInfo { type "NONE" }
# globul
DEF Globe Transform {
rotation 0.0 1.0 0.0 0.0
children [
Shape {
# aplicare unei texturi
appearance Appearance {
texture ImageTexture {
url "earth.jpg"
}
}
# o sfer! de raz! 5 metri
geometry Sphere {
radius 5
}
}
]
}
# un temporizator
DEF Clock TimeSensor {
cycleInterval 4
loop TRUE
}

K - 33

Tehnologii Web

# un interpolator
DEF Spin OrientationInterpolator {
key [ 0.0 0.5 1.0 ]
# valorile cheilor
keyValue [
0.0 1.0 0.0 0.0,
0.0 1.0 0.0 3.14,
0.0 1.0 0.0 6.28
]
}
]
}
# o rut! de temporizare
ROUTE Clock.fraction_changed TO Spin.set_fraction
# o rut! de modificare a orient!rii
ROUTE Spin.value_changed TO Globe.set_rotation

Pentru a schimba coloritul, de la ro"u la galben, al unui con, scriem urm!toarele:

#VRML V2.0 utf8
Group {
children [
Shape {
# un con
appearance Appearance {
material DEF mat Material {
diffuseColor 0 0 0
}
}
geometry Cone {}
}
# un interpolator
DEF ci ColorInterpolator {
key [ 0 0.5 1 ]
keyValue [
1 0 0, # ro"u
1 1 0, # galben
1 0 0 # ro"u
]
}
# un temporizator
DEF ts TimeSensor {
# cinci secunde
cycleInterval 5
# ruleaza la infinit
loop TRUE
}
]
}
# rutele de temporizare "i interpolare
ROUTE ts.fraction_changed TO ci.set_fraction
# interpoleaz! culoarea difuz! a conului
ROUTE ci.value_changed TO mat.set_diffuseColor

K - 34

Tehnologii Web

Script-uri
n unele cazuri, senzorii "i interpolatoarele nu sunt suficiente pentru a dezvolta lumi
VRML cu adev!rat dinamice. Nodurile de tip Script permit construirea propriilor
noastre noduri, cmpuri, evenimente de intrare "i de ie"ire. Sintaxa general! este:
Script {
exposedField
field
field
eventIn
field
eventOut

MFString url
[]
SFBool
directOutput FALSE
SFBool
mustEvaluate FALSE
Type
Type
Type

eventInName
fieldName
default_value
eventOutName

Un exemplu:
Script {
eventIn SFBool input
field
SFBool boolValue TRUE
eventOut SFBool output
url "filter.js"
}

Cmpurile, evenimentele de tip eventIn "i eventOut se definesc la fel ca n cazul

prototipurilor. n exemplul de mai sus, s-au specificat un eveniment de intrare, numit
input, un eveniment de ie"ire, output, plus un cmp boolean, denumit boolValue,
valoarea lui implicit! fiind TRUE. Scriptul care va prelucra aceste date va fi stocat n fi"ierul
"filter.js".
Nodurile de tip Script nu pot avea cmpuri expuse. Limbajele suportate sunt Java
(fi"iere .class compilate, specificate prin intermediul cmpului url) "i JavaScript (fi"iere
externe .js ori cod inline). Mai mult, vizualizatoarele VRML 2.0 sunt libere s!
implementeze orice specifica#ie de limbaje script (e.g. ECMAScript). Tipul MIME al datei
returnate define"te tipul limbajului. Instruc#iuni adi#ionale pot fi incluse inline folosind
protocol (care permite specificarea unui tip MIME) sau "Scripting Language Protocol"
(protocolul limbajului script).
Cmpurile, evenimentele de intrare "i evenimentele de ie"ire ale unui nod Script sunt
accesibile din cadrul func#iilor limbajului script. Cmpurile definite n nodul Script sunt
disponibile scriptului printr-un mecanism specific limbajului (de exemplu, o variabil!
membru este automat definit! pentru fiecare cmp "i eveniment ale nodului Script).
Valorile cmpului pot fi citite sau scrise "i sunt persistente de-a lungul apelurilor func#iei.
Evenimentele de ie"ire definite n nodul Script pot fi, desigur, accesate: valoarea primit!
este ultima valoare trimis!. Scriptul poate avea acces, de asemeni, la orice eveniment al
oric!rui nod la care are un pointer. Sintaxa acestui mecanism este dependent! ns! de
limbajul folosit.
Un nod Script este activat atunci cnd este recep#ionat un eveniment. n acest punct,
browser-ul execut! programul din cmpul url al nodului Script (transfernd programul
unui interpretor extern spre execu#ie, dac! este necesar). Programul poate realiza o varietate
de ac#iuni: trimite evenimente ("i astfel schimb! scena VRML), proceseaz! diverse date,
dialogheaz! cu diverse servere aflate oriunde n Internet "i altele.

K - 35

Tehnologii Web

Dac! vom specifica pentru cmpul mustEvaluate valoarea TRUE, atunci navigatorul
VRML va evalua de fiecare dat! evenimentele trimise unui nod Script. Cmpul
directOutput permite unui script s! ignore cozile de evenimente "i s! plaseze valori
direct pentru cmpurile nodurilor la care acces.
Iat! un exemplu complet, scris de studen#ii Alexandrina Orzan "i Petric!-Ionu" G!bureanu,
preluat dintr-un proiect mai complex de lec#ii de geometrie elaborate n VRML. Dnd click
pe o sfer!, va fi construit pe etape un cub:
#VRML V2.0 utf8
# fundal alb
Background {
skyColor 1 1 1
}
Viewpoint {
position -15 0 50
orientation 0 1 0 -0.3
fieldOfView 0.30
}
# definirea unui nod script
DEF CYCLE Script {
# eveniment de intrare
eventIn SFTime touchTime
# pasul de vizualizare
field SFInt32 number 12
# eveniment de ie"ire
eventOut SFInt32 output
# cod JavaScript inline
url "javascript:
// ini#ializare
function initialize() {
output = 0;
}
// o metod! apelat! la
// fiecare eveniment 'touchTime'
function touchTime(value, time) {
if (output == number - 1)
output = 0;
else
++output;
}"
}
Transform {
translation -8 -6 -15
children [ # sfera senzor
DEF SENSOR TouchSensor {}
Shape {
appearance Appearance {
material Material {
diffuseColor 0 0.7 0
shininess 1
}
}

K - 36

Tehnologii Web

geometry Sphere {
radius 1
}
}
]
}
# o alternativ! de afi"are
DEF SWITCH Switch {
whichChoice 0
choice [
# cubul complet
Shape {
appearance DEF ap Appearance {
material Material {
diffuseColor 0 0 1
emissiveColor 0 0 1
}
}
geometry Box {
size 8 8 8
}
}
# punctul ini#ial
Shape {
appearance USE ap
geometry PointSet {
coord Coordinate {
point -4 -4 4
}
}
}
# prima linie
Shape {
appearance USE ap
geometry IndexedLineSet {
coord Coordinate {
point [ -4 -4 4, 4 -4 4 ]
}
coordIndex [ 0 1 -1 ]
}
}
# primele 2 linii
Shape {
appearance USE ap
geometry IndexedLineSet {
coord Coordinate {
point [ -4 -4 4, 4 -4 4, 4 -4 -4 ]
}
coordIndex [ 0 1 -1, 1 2 -1 ]
}
}

K - 37

Tehnologii Web

# primele 3 linii
Shape {
appearance USE ap
geometry IndexedLineSet {
coord DEF crd Coordinate {
point [ -4 -4 4, 4 -4 4,
4 -4 -4, -4 -4 -4 ]
}
coordIndex [ 0 1 -1, 1 2 -1, 2 3 -1 ]
}
}
# baza
Shape {
appearance USE ap
geometry IndexedLineSet {
coord USE crd
coordIndex [ 0 1 -1, 1 2 -1,
2 3 -1, 3 0 -1 ]
}
}
# prima n!l#ime
Shape {
appearance USE ap
geometry IndexedLineSet {
coord Coordinate {
point [ -4 -4 4, 4 -4 4,
4 -4 -4, -4 -4 -4,
4 4 4 ]
}
coordIndex [ 0 1 -1, 1 2 -1,
2 3 -1, 3 0 -1,
1 4 -1 ]
}
}
# dou! n!l#imi
Shape {
appearance USE ap
geometry IndexedLineSet {
coord Coordinate {
point [ -4 -4 4, 4 -4 4,
4 -4 -4, -4 -4 -4,
4 4 4, 4 4 -4 ]
}
coordIndex [ 0 1 -1, 1 2 -1,
2 3 -1, 3 0 -1,
1 4 -1, 2 5 -1 ]
}
}
# trei n!l#imi
Shape {
appearance USE ap
geometry IndexedLineSet {
coord Coordinate {
point [ -4 -4 4, 4 -4 4,
4 -4 -4, -4 -4 -4,
4 4 4, 4 4 -4,

K - 38

Tehnologii Web

-4 4 -4 ]
}
coordIndex [ 0 1 -1, 1 2 -1,
2 3 -1, 3 0 -1,
1 4 -1, 2 5 -1,
3 6 -1 ]
}
}
# patru n!l#imi
Shape {
appearance USE ap
geometry IndexedLineSet {
coord Coordinate {
point [ -4 -4 4, 4 -4 4,
4 -4 -4, -4 -4 -4,
4 4 4, 4 4 -4,
-4 4 -4, -4 4 4 ]
}
coordIndex [ 0 1 -1, 1 2 -1,
2 3 -1, 3 0 -1,
1 4 -1, 2 5 -1,
3 6 -1, 0 7 -1 ]
}
}
# schelet de cub (cadru de srm!)
Shape {
appearance USE ap
geometry DEF ils IndexedLineSet {
coord Coordinate {
point [ -4 -4 4, 4 -4 4,
4 -4 -4, -4 -4 -4,
-4 4 4, 4 4 4,
4 4 -4, -4 4 -4 ]
}
coordIndex [ 0 4 -1, 4 7 -1,
7 3 -1, 3 0 -1,
1 2 -1, 2 6 -1,
6 5 -1, 5 1 -1,
4 5 -1, 6 7 -1,
2 3 -1, 1 0 -1 ]
}
}
# corp final
Group {
children [
Shape {
appearance USE ap
geometry USE ils
}
Shape {
appearance Appearance {
material Material {
diffuseColor 0 0 1
transparency 0.5
}

K - 39

Tehnologii Web

}
geometry Box {
size 8 8 8
}
}
]
}
]
}
# rutele de evenimente:
# o rut! de la un senzor la un script
ROUTE SENSOR.touchTime TO CYCLE.touchTime
# o rut! de la un script la un grup de noduri
ROUTE CYCLE.output TO SWITCH.whichChoice

n acest exemplu se poate remarca utilizarea combinat! a nodurilor de tip

IndexedLineSet, Switch, DEF "i USE.
Execu"ia script-urilor
Dup! cum am v!zut mai sus, nodurile Script permit autorului de lumi VRML
s! insereze diverse proceduri de calcul n mijlocul unui eveniment cascad!. Script-urile
faciliteaz! de asemeni generarea de evenimente cascad! atunci cnd un nod Script este
creat sau, n unele limbaje script, la un moment arbitrar.
Nodurile Script recep#ioneaz! evenimente n mod cronologic. Orice evenimente
generate ca rezultate ale proces!rii unui eveniment furnizeaz! timpi corespunz!tori cu
evenimentele care le genereaz!. Conceptual, recep#ionarea "i procesarea unui eveniment
se realizeaz! instantaneu n cadrul unui nod Script, chiar dac! n practic! acest lucru nu
este posibil.
Limbajul script poate defini o metod! initializate (un constructor), aceast! metod!
fiind apelat! naintea oric!ror evenimente care sunt generate. Evenimentele generate prin
metoda de ini#ializare trebuie s! aib! timpul mai mic dect al oric!rui eveniment emis de
nodul Script.
De asemenea, se poate specifica o metod! shutdown (un destructor). Aceast! metod!
va fi apelat! atunci cnd corespondentul nodului Script este "ters sau lumea con#inut! de
nodul Script este desc!rcat! ori nlocuit! de alt! lume VRML. Aceast! metod! poate fi
folosit! ca o opera#ie de "tergere, mecanism extern pentru eliminarea fi"ierele create
temporar, de exemplu.
Putem defini o rutin! eventsProcessed, care este apelat! dup! ce unul sau mai multe
evenimente sunt recep#ionate. Metoda eventsProcessed poate prezenta un caracter
nedeterminist. Pentru un singur eveniment cascad!, rutina eventsProcessed a unui nod
Script dat poate fi apelat! cel mult o singur! dat!. Evenimentele generate de o rutin!
eventsProcessed sunt date de timpul ultimului eveniment procesat.

K - 40

Tehnologii Web

url "javascript:
function initialize() {
// cod de ini#ializare
}
function shutdown() {
// cod de terminare
}
function eventsProcessed() {
// cod de tratare a evenimentelor
}"

Unele limbaje suportate de navigatoarele VRML pot permite nodurilor Script s!

genereze spontan evenimente, facilitnd crearea de noduri de tip Script avnd diverse
func#ii, cum ar fi un nou nod senzor. n acest caz, scriptul genereaz! un eveniment ini#ial
care cauzeaz! un eveniment cascad! "i limbajul script "i/sau browser-ul vor determina un
timp de nceput apropiat pentru acel eveniment ini#ial. Astfel de evenimente sunt apoi
sortate n cadrul fluxului de evenimente "i procesate ca oricare altele, urmnd acelea"i reguli
pentru rutele de evenimente ale scenelor VRML etc.
Un exemplu complet
Ilustr!m cele afirmate mai sus prin urm!torul exemplu preluat din specifica#ia VRML97:
# definirea prototipurilor
# prototipul rachet!
PROTO Shuttle [
#
field
SFTime
field
SFFloat
field
MFNode
exposedField SFTime
exposedField SFTime
field
SFBool
] {

cmpuri publice
rate
1
distance 1
children [ ]
startTime 0
stopTime 0
loop
TRUE

# o transformare
DEF F Transform {
children IS children
}
# un temporizator
DEF T TimeSensor {
cycleInterval IS rate
startTime IS startTime
stopTime IS stopTime
loop IS loop
}
# un nod script
DEF S Script {
field
SFFloat
eventOut MFVec3f

distance IS distance
position

K - 41

Tehnologii Web

url "javascript:
function initialize() {
// constructor
pos1 = new SFVec3f(-distance, 0, 0);
pos2 = new SFVec3f(distance, 0, 0);
position = new MFVec3f(pos1, pos2, pos1);
}",
}
# un interpolator
DEF I PositionInterpolator {
key [ 0, 0.5, 1 ]
keyValue [ -1 0 0, 1 0 0, -1 0 0 ]
}
# rutele
ROUTE T.fraction_changed TO I.set_fraction
ROUTE I.value_changed TO F.set_translation
ROUTE S.position TO I.set_keyValue
}
# prototipul pendul
PROTO Pendulum [
field
SFTime
field
SFFloat
field
MFNode
exposedField SFTime
exposedField SFTime
field
SFBool
] {

rate
maxAngle
children
startTime
stopTime
loop

1
3.14159
[ ]
0
0
TRUE

# o transformare
DEF F Transform {
children IS children
}
# un temporizator
DEF T TimeSensor {
cycleInterval IS rate
startTime IS startTime
stopTime IS stopTime
loop IS loop
}
# un script
DEF S Script {
field
SFFloat
maxAngle IS maxAngle
eventOut MFRotation rotation
url "javascript:
function initialize() {
// constructor
rot1 = new SFRotation(0, 0, 1, 0);
rot2 = new SFRotation(0, 0, 1, maxAngle/2);
rot3 = new SFRotation(0, 0, 1, maxAngle);
rotation = new MFRotation(rot1, rot2, rot3,
rot2, rot1);
}",
}

K - 42

Tehnologii Web

# un interpolator
DEF I OrientationInterpolator {
key [ 0, 0.25, 0.5, 0.75, 1 ]
# orient!rile
keyValue [ 0 0 1 0,
0 0 1 1.57,
0 0 1 3.14,
0 0 1 1.57,
0 0 1 0 ]
}
# rutele
ROUTE T.fraction_changed TO I.set_fraction
ROUTE I.value_changed TO F.set_rotation
ROUTE S.rotation TO I.set_keyValue
}
# figurarea pendulului
Transform {
translation -3 0 0
# utilizarea prototipului
children Pendulum {
rate 3
maxAngle 6.28
children Shape {
geometry Cylinder {
height 5
}
}
}
}
# figurarea rachetei
Transform {
translation 3 0 0
# utilizarea prototipului
children Shuttle {
rate 2
children Shape {
geometry Sphere {}
}
}
}

1 .8 VRML n paginile Web

Cea mai uzual! metod! de includere ntr-o pagin! Web a unei lumi VRML este folosirea
marcatorului HTML <embed>:
<embed src="cub.wrl" height="300" width="500">

K - 43

Tehnologii Web

Includerea ntr-o pagin# Web a unei lumi VRML

De asemeni, putem utiliza obiectul Browser ntr-un nod Script (despre acest obiect
vom discuta mai jos):
Browser.loadURL(url, parametri);

De exemplu, pentru nc!rcarea unei lumi 3D ntr-o alt! fereastr! vom scrie:
Browser.loadURL("autor.wrl", "target=_blank");

n loc de un fi"ier VRML, putem specifica orice alt tip recunoscut de navigator
(e.g. un document HTML):
Browser.loadURL("ajutor.html", "target=_parent");

Lumile VRML pot fi generate dinamic folosind JavaScript.

n cele ce urmeaz!, vom concepe un formular HTML n care utilizatorul poate introduce
valorile unor cmpuri ale unui obiect VRML (aici, un nod Box), iar la ap!sarea butonului va
putea studia lumea 3D generat!:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function genBox() {
var w, h, d, r, g, b;
// preia valorile din formular
w = document.forms[0].value;
h = document.forms[0].value;
d = document.forms[0].value;

K - 44

Tehnologii Web

r = document.forms[0].value;
g = document.forms[0].value;
b = document.forms[0].value;
// deschide o fereastr! de afi"are
src = window.open('','src',
'toolbar=no,resizable=yes,menubar=no');
src.document.open("model/vrml");
// scrie lumea VRML
src.document.writeln("#VRML V2.0 utf8");
src.document.writeln("Shape {");
src.document.writeln(" appearance Appearance {");
src.document.writeln("
material Material {");
src.document.writeln("
diffuseColor" +
r + " " + g + " " + b);
src.document.writeln("
}");
src.document.writeln(" }");
src.document.writeln(" geometry Box {");
src.document.writeln("
size " +
w + " " + h + " " + d);
src.document.writeln(" }");
src.document.writeln("}");
src.document.close();
}
</script>
</head>
<body text="blue" bgcolor="white">
<form name="genvrml">
<p>Nodul <tt>Box</tt>:</p>
<p>L!#ime (Ox): <input name="w" value="1" size="3">
<p>n!l#ime (Oy): <input name="h" value="1" size="3">
<p>Adncime (Oz): <input name="d" value="1" size="3">
<p>Culoare ro"ie: <input name="r" value="1" size="3">
<p>Culoare verde: <input name="g" value="1" size="3">
<p>Culoare albastr!: <input name="b" value="1" size="3">
<hr>
<p><input type="button" name="gen" value="Genereaza"
onClick="javascript:genBox()">
</form>
</body>
</html>

Din p!cate aceast! metod! este puternic dependent! de navigatorul utilizat. Pentru
Internet Explorer, se poate folosi controlul ActiveX VRML2C, dac! este instalat n sistem.
Obiectul Browser
Cele mai multe navigatoare VRML ofer! programatorilor accesul static la un obiect
special denumit Browser. O serie dintre metodele "i propriet!#ile acestuia le vom ilustra n
continuare.
Avem la dispozi#ie metodele de informare getName(), getVersion(),
getWorldURL(), getCurrentFrameRate() "i getCurrentSpeed().
Un exemplu de utilizare, datele fiind afi"ate de un nod de tip Text:

K - 45

Tehnologii Web

#VRML V2.0 utf8

# fundalul
Background {
skyColor 1 1 1
}
NavigationInfo {
}
Viewpoint {
description "Default View"
}
# nodul care va con#ine textul
Shape {
appearance Appearance {
material Material {
diffuseColor 0 0 0
}
}
geometry DEF TEXT Text {
fontStyle FontStyle {
size 1
justify "MIDDLE"
}
}
}
# un temporizator
DEF TIMER TimeSensor {
loop TRUE
startTime 0
stopTime -1
cycleInterval 0.1
}
# scriptul
DEF TEXTCREATOR Script {
eventIn SFTime ping
eventOut MFString str
url "javascript:
function ping(value,time) {
brwStr = 'Browser: ' + Browser.getName();
verStr = 'Versiune: ' + Browser.getVersion();
urlStr = 'URL: ' + Browser.getWorldURL();
spdStr = 'Viteza: ' + Browser.getCurrentSpeed();
frmStr = 'Cadre: ' + Browser.getCurrentFrameRate() + ' f/s';
str = new MFString(brwStr, verStr, urlStr, spdStr, frmStr);
}"
}
ROUTE TIMER.cycleTime TO TEXTCREATOR.ping
ROUTE TEXTCREATOR.str TO TEXT.string

Alte metode utile sunt:

K - 46

Tehnologii Web

setDescription(string descriere) - seteaz! valorile cmpurilor

loadURL(MFString url, MFString parametri) - ncarc! un

nodului WorldInfo;
document desemnat de url;

replaceWorld(MFNode noduri) - substituie lumea curent! cu cea din

parametrul noduri (similar cu apelurile exec() din Unix).

Toate aceste metode sunt opera#ionale doar dac! valoarea cmpului mustEvaluate
este setat! pe TRUE.
Pentru a genera lumi VRML n mod dinamic vom putea folosi metodele
createVrmlFromString(String #ir) sau createVrmlFromURL(MFString
url, SFNode nod, String eventIn). Ambele pot fi utilizate la crearea de lumi 3D
date ca "ir de caractere sau, respectiv, la un anumit URL.
Un exemplu:
# un grup de noduri (ini#ial vid)
DEF GROUP Group {
}
Script {
field SFNode group USE GROUP
# constructor care ncarc! o lume
url "javascript:
function initialize() {
urlString = new MFString('con.wrl');
Browser.createVrmlFromURL(urlString,group,'addChildren');
}"
}

Acela"i efect l-ar fi avut urm!toarea construc#ie:

newVRML = 'Inline { url "con.wrl" }';
newChildren = Browser.createVrmlFromString(newVRML);

Pentru definirea dinamic! a rutelor, avem la dispozi#ie metoda addRoute(SFNode

nod_surs!, String EventOut_surs!, SFNode nod_destina"ie, String
EventIn_destina"ie). Eliminarea unei rute se va face cu deleteRoute avnd
aceia"i parametri ca addRoute. Metodele vor fi efective numai n cazul n care cmpul
directOutput va fi TRUE.
n locul scripturilor JavaScript (sau ECMAScript) pot fi folosite "i clasele Java, scriind n
cadrul unui nod Script urm!toarele:
Script {
url "java.class"
}

K - 47

Tehnologii Web

2. Funcionarea unui sistem VRML

2.1 Funcii de baz
Func#iile de baz! ale unui sistem (navigator) VRML se concretizeaz! n:

modelarea fiec!rui obiect n cadrul lumii virtuale;

stocarea "i actualizarea informa#iilor privind localizarea "i aparen#a fiec!rui

obiect (nod);

simularea comportamentului obiectelor;

desenarea lumii 3D;

generarea sunetelor asociate obiectelor virtuale;

navigarea prin mediul virtual;

interac#iunea utilizatorului cu obiectele din cadrul mediului.

K - 48

Tehnologii Web

Arhitectura unui navigator VRML

2.2 xVR - un editor de lumi VRML 1.0

O parte dintre pa"ii prezenta#i mai sus trebuie parcur"i "i de un editor vizual de lumi
modelate n VRML 1.0. Vom prezenta succint un astfel de editor, denumit xVR $.0,
elaborat n limbajul Java de studen#ii George Ciubotaru, Drago$ Dud!u "i Alexandru Teodor
Pruteanu.
Pentru dezvoltarea aplica#iei s-a adoptat limbajul Java, n primul rnd datorit!
instrumentelor 3D oferite, dar "i din prisma faptului c! Java ofer! programatorilor
o productivitate sporit! "i este independent de platform!.
Pachetele de Java 3D vin mpreun! cu un SDK (Software Development Kit) pentru
OpenGL care exist! att pentru Windows, ct "i pentru Linux. O parte dintre specifica#iile
Java 3D din acest pachet nu sunt pe deplin standardizate (cum ar fi pachetul
javax.vecmath.*), ns! furnizeaz! ntreg suportul pentru crearea lumilor virtuale.

K - 49

Tehnologii Web

Pentru realizarea anumitor p!r#i ale programului au fost reutilizate unele surse de pe
Internet, mai ales n ceea ce prive"te importul "i exportul de tipuri de fi"iere grafice.

Interfa"a aplica"iei xVR

Func#ionalit!#ile importante ale editorului sunt urm!toarele:

1. Posibilitatea de a importa diferite formate grafice 3D, standardizate. O parte
dintre aceste formate:

DXF (AutoCAD);

HDF (Hierarchical Data Format);

MSDL (Manchester Scene Description Language);

NFF (Neutral File Format);

OBJ (Wavefront Object);

P3D (Pittsburgh Supercomputing Center 3D Metafile);

TDDD (Turbo Silver and Imagine);

VRML 1.0;

VRML 2.0;

3DS (3D Studio Max).

K - 50

Tehnologii Web

2. Facilitatea de a salva lumile modelate n cteva formate standard

(o submul#ime a celor enumerate mai sus). Generarea de cod se poate face att n
Java 3D (extensie .java), ct "i n cod VRML (.wrl);
3. Ac#iunea utilizatorului n mediul oferit de xVR 1.0 se realizeaz! ntr-un
univers simplu, pornind de la un nod r!d!cin!, denumit Scene Graph. Utilizatorul
construie"te lumile avnd la dispozi#ie figuri geometrice primitive (cub, cilindru,
con, sfer!, text 2D, text 3D). Motivul pentru care s-a preferat o gam! restrns! de
astfel de obiecte l constituie algoritmii optimizati pentru acestea. Fiecare nod
construit va putea fi nzestrat cu propriet!#i (e.g. material, lumin!, dimensiune,
culoare, pozi#ie etc.);
4. La dispozi#ia utilizatorului sunt puse metode de navigare "i metode de
selec#ie a unui nod (rotire, translare a planului etc), executate prin intermediul
mouse-ului "i tastaturii.
Pe viitor, autorii inten#ioneaz! ca aplica#ia s! ofere suport pentru crearea de lumii
VRML 2.0.

K - 51

Tehnologii Web

3. Medii virtuale distribuite

Un mediu virtual distribuit reprezint! un sistem software care permite interac"iunea n
timp-real, de la distan"!, a mai multor utilizatori, ncorpornd grafic! 3D $i sunet stereo.

3.1 Caracterizare
Un mediu virtual distribuit se bucur! de urm!toarele caracteristici principale:
1.

iluzia spa"iului comun

To#i participan#ii au iluzia localiz!rii n acela"i spa#iu tridimensional
(aceea"i camer! sau cl!dire ori acela"i areal). De cele mai multe ori, spa#iul este
fictiv, generat electronic, dar trebuie s! prezinte acelea"i propriet!#i pentru to#i
utilizatorii (aspect meteorologic, acustic!, textur! etc.).

2.

iluzia prezen"ei comune

Fiecare dintre participan#i ia forma unei persoane virtuale, numit! avatar,
care are, printre altele, asociate urm!toarele:

o reprezentare grafic! (pe ct posibil, ct mai realist!);

un model al structurii corpului (prezen#a membrelor,

antenelor etc.);

un model al deplas!rii (mul#imea mi"c!rilor "i gesturilor pe

care le poate executa);

un model fizic (e.g. greutate, n!l#ime etc.).

Un avatar nu trebuie s! posede form! umanoid! "i un utilizator poate avea

asociate mai multe reprezent!ri de tip avatar. Nu to#i participan#ii din cadrul
mediului virtual trebuie s! fie controla#i de om, o parte dintre avatari putnd fi
crea#i de program, avnd sau nu inteligen#! artificial!.
3.

iluzia timpului comun

Mediul virtual distribuit permite interac#iunea n timp-real dintre utilizatori.

4.

posibilitatea comunic!rii
Posibilit!#ile comunic!rii includ comunicarea prin gesturi, prin text introdus
de la un dispozitiv de intrare sau prin voce.

5.

partajarea informa"iilor
n afara faptului de a facilita comunicarea dintre utilizatori, sistemul ofer!
posibilitatea de a interac#iona cu mediul virtual (de exemplu, participan#ii la o
simulare virtual! pot selecta, muta, transforma obiecte care exist! n mediu
"i pot s! le dea altor utilizatori). Un proiectant de mediu virtual distribuit poate
oferi utilizatorilor libertatea de a construi edificii, de a desena pe o tabl! sau
chiar de a distruge mediul.

K - 52

Tehnologii Web

Un mediu virtual distribuit simul#nd o cafenea: Caffeine Machine (IBM)

nainte de a intra n mediu, utilizatorul trebuie s#-!i aleag# tipul de avatar dorit

Conectarea mai multor utilizatori la sistem diferen#eaz! mediile virtuale distribuite de

realitatea virtual! obisnuit!. Abilitatea de a partaja diverse obiecte ale mediului confer! o
nou! dimensiune mediului, fa#! de serviciile conversa#ionale clasice (chat-uri, sisteme de
tele-conferin#e). Interactivitatea n timp-real este o alt! caracteristic! suplimentar!, care nu
apare la navigatoarele Web sau la serviciile de po"t! electronic!.
Mediile virtuale distribuite sunt cele mai indicate pentru aplica#ii necesitnd crearea
tele-prezen"ei.

3.2 Structura
Un mediu virtual distribuit prezint! urm!toarea structur!:

motoare "i display-uri grafice (sta#ii de lucru grafice, deseori suportnd

OpenGL, c!"ti de vizualizare, ecrane retinale etc.);

dispozitive de comunicare "i control (tastatur!, mouse, joystick, m!nu"!

senzorial!, detectoare de mi"care, microfoane, boxe audio "i altele);

sisteme de procesare distribuit!;

re#ele (rapide, locale: Ethernet, Token Ring sau mondiale: ISDN (Integrated
Services Distribution Network), DSI (Defense Simulation Internet), comunicarea
realizndu-se printr-un protocol special: VRTP (Virtual Reality Transfer Protocol) sau
folosindu-se standardul Living Worlds).

Problemele care pot surveni n implementarea "i func#ionarea unui mediu virtual
distribuit sunt, n principal, cele legate de managementul n timp-real al resurselor, pierderea
de date, l!rgimea de band!, eterogenitatea "i scalabilitatea echipamentelor, configurarea "i
exploatarea software-ului.

K - 53

Tehnologii Web

Mediile virtuale distribuite sunt, concomitent, sisteme distribuite, aplica"ii grafice "i aplica"ii
interactive, integrnd sisteme de baze de date (utile pentru memorarea datelor persistente
care genereaz! mediul: forme "i localiz!ri de obiecte, texturi, informa#ii despre avatari etc.),
interac#ionnd cu sisteme tranzac#ionale (de comer# electronic, de exemplu) "i trebuind s!
asigure autentificarea utilizatorilor "i jurnalizarea activit!#ilor.

3.3 Origini
Mediilor virtuale distribuite "i au r!d!cinile n:

mediile virtuale militare

Unul dintre cele mai cunoscute este SIMNET (Simulator Networking),
dezvoltat pentru DARPA ncepnd cu 1983 "i dat n folosin#! abia n anul
1990, jucnd un rol destul de important "i n opera#iunea "Furtun! n De"ert"
de peste c#iva ani. Scopul proiectului a fost dezvoltarea unui mediu virtual
distribuit ieftin pentru antrenarea unor unit!#i militare cu efectiv restrns.
Din ideile "i succesul lui SIMNET ia fiin#! un protocol denumit Distributed
Interactive Simulation (DIS), standardizat n 1993 (IEEE 1278), avnd un
ecou r!sun!tor n domeniul militar, dar prezentnd unele inconvenien#e ca
num!rul redus de participan#i (maxim 300 de utilizatori concomitent),
m!rimea pachetelor de date "i necesit!#i hardware destul de nsemnate (pentru
simul!ri cu un grad mare de realism se folosesc numai sta#ii SGI). SIMNET "i
ulterior DIS folosesc o tehnic! special! numit! dead-reckoning pentru evitarea
inund!rii re#elei cu pachete de date.

jocurile n re"ea
Una dintre primele ncerc!ri de implementare a unui simulator realist
o constituie Flight, conceput ini#ial de Gary Tarolli de la Silicon Graphics Inc.
(SGI), simulator de zbor disponibil n premier! n vara anului 1983 "i inclus n
software-ul oric!rei sta#ii grafice comercializate de SGI n perioada 1984-1992.
Partea de re#ea a fost ad!ugat! ncepnd cu 1984, dar utilizatorii conecta#i la
simulator nu puteau interac#iona unul cu altul. Acest lucru este ns! posibil la
programul demonstrativ Dogfight, limitat ini#ial la 10 utilizatori din ra#iuni de
evitare a congestiei re#elei. Aceste dou! aplica#ii au inspirat, peste ani,
dezvoltarea mediilor virtuale distribuite, mai ales prin faptul c! SGI a f!cut
sursele programelor publice (fragmente din aceste surse au fost folosite pentru
proiectul NPSNET pe care-l vom descrie mai tirziu).
O alt! surs! de inspira#ie a constituit-o Doom (idSoftware), ap!rut pe pia#!
n decembrie 1993 ca aplica#ie shareware, punct de cotitur! n industria jocurilor
n re#ea, oferind un mediu 3D realist, zgomotos "i populat cu mon"tri.
Succesorul lui, Doom II, a fost disponibil din octombrie 1994 "i s-a vndut n
peste 1,6 milioane de exemplare. A fost portat "i pe sta#ii de jocuri precum
Sega 32X, Super Nintendo, Sony PlayStation sau Nintendo 64.
Pentru Macintosh, se poate men#iona un joc cu grafic! impresionant! "i
sunet spa#ial, denumit Marathon, ap!rut n 1994, care oferea, ca "i Doom,
utilitare pentru editarea "i crearea de c!tre utilizator a scenelor 3D.

K - 54

Tehnologii Web

mediile virtuale academice

Unul dintre eforturile timpurii ale comunit!#ii academice n crearea de medii
virtuale distribuite este concretizat n grupul de cercetare NPSNET, avnd la
baz! cteva proiecte studen#e"ti ca FOG-M (Fiber-Optically Guided Missile
System), VEH (Vehicle Simulator) "i MPS (Moving Platform Simulator), dezvoltate
pe sta#ii Unix n perioada 1986-1988.
NPSNET (Naval Postgraduate School Network) a avut mai multe stadii
de dezvoltare. NPSNET-1, a c!rui demonstra#ie public! a avut loc la
Conferin#a SIGGRAPH'91, folosea un protocol propriu de comunicare "i
putea rula ntr-o re#ea local!. Au urmat NPSNET-2, NPSNET-3 "i
NPSNET-Stealth, cel din urm!, opera#ional din 1993, fiind compatibil cu
sistemele SIMNET. Ultima versiune, NPSNET-IV, a continuat s! fie
dezvoltat! pn! n decembrie 1996, oferind marea majoritate a facilit!#ilor
mediilor virtuale distribuite actuale.
Un alt proiect, PARADISE (Performance Architecture for Advanced
Distributed Interactive Simulation Environments), a fost ini#iat n 1993 la
Universitatea Stanford, focalizat n principal pe problemele de comunicare n
re#ea, avnd ca punct de plecare programul Dogfight men#ionat anterior.
Astfel, PARADISE utilizeaz! tehnici de multicast, algoritmi performan#i
dead-reckoning, posednd o arhitectur! orientat!-obiect (C++), diverse module
de interfa#! fiind scrise n Tcl. Sistemul este opera#ional pe sta#ii IBM RS/6000
cu capabilit!#i OpenGL.
Institutul Suedez de Informatic! dezvolt! un mediu compatibil cu SIMNET
"i DIS, denumit Distributed Interactive Virtual Environment (DIVE).
Totul a pornit n 1991, de la editorul de grafic! bidimensional! Multidraw,
avndu-l ca autor pe Olaf Hagsand. Acest program ulterior s-a dovedit a fi
catalizatorul proiectului Telepresence, care a fost redenumit ca DIVE n 1992.
Dac! ini#ial sistemul rula pe IBM/RS 6000, permi#nd conectarea simultan! a
numai doi utilizatori, ulterior a fost portat pe sta#ii Sun, ultima versiune,
DIVE 3.0, folosind o interfa#! grafic! utilizator conceput! complet n Tcl/Tk.
Alt proiect academic este BrickNet, ini#iat la Universitatea Na#ional! din
Singapore, rulnd pe sta#ii Sun "i SGI Indigo, apoi pe PC-uri, fiind creat n
1991 de Gurminder Singh.

K - 55

Tehnologii Web

O sesiune DIVE 3.0

3.4 Medii virtuale distribuite bazate pe VRML

Datorit! limit!rilor hardware ale ma"inilor conectate la Internet "i a lipsei de investi#ii de
amploare n tehnologia VRML, relativ pu#ine organiza#ii au realizat experimente majore n
domeniul mediilor virtuale distribuite. Sistemele proiectate de obicei suport! un num!r
redus de participan#i (sub 20 de utilizatori). Problemele puse n discu#ie n ceea ce prive"te
interoperabilitatea mediilor virtuale pe Web pot fi urm!toarele:
1. Ce tipuri de informa#ii trebuie transferate ntre sistemele care compun
mediile virtuale?
2.

Ce protocol trebuie ales pentru realizarea transferului?

3. Care este arhitectura software de re#ea pe care poate s! ruleze n condi#ii

optime un astfel de sistem?
Pentru primele dou! ntreb!ri, putem r!spunde c! tipurile de date "i, respectiv,
protocoalele folosite sunt:

schimb!rile de stare "i interac#iunile ntre entit!#i (transferate prin

protocoale punct la punct);

K - 56

Tehnologii Web

elementele care compun mediul (obiecte, avatari,...) disponibile prin cereri

client-server via HTTP - HyperText Transfer Protocol sau VRTP - Virtual Reality
Transfer Protocol;

pointerii "i referin#ele de re#ea (reprezentate prin URI-uri);

fluxurile de date multimedia n timp-real (transmise n maniera multicast,

prin protocoale ca RTP - Real-Time Protocol).

Pentru cea de-a treia problem!, solu#iile se dovedesc a fi multiple. Astfel, vom da n
continuare cteva exemple de medii virtuale distribuite, fiecare cu propria sa arhitectur!.
DIS-Java-VRML
Dezvoltat la Naval Postgraduate School (Statele Unite ale Americii), proiectul este
considerat de autorii lui drept model pentru mediile virtuale distribuite bazate pe VRML.
Eforturile proiectan#ilor s-au focalizat asupra transferului informa#iilor despre schimb!rile
de stare "i interac#iunile dintre entit!#ile care compun mediul, dezvoltndu-se o bibliotec!
de clase Java "i o arhitectur! pentru interschimbul de pachete de date DIS n Internet.
Arhitectura software de re#ea, la nivel general, este prezentat! n urm!toarea ilustra#ie:

Arhitectura software general# a unui sistem DIS-Java-VRML

O metod! de implementare ar fi aceea n care browserul VRML realizeaz! att

vizualizarea lumilor 3D, ct "i procesarea codului Java. O alt! abordare este cea n care
sistemul const! dintr-o aplica#ie Java de sine-st!t!toare sau dintr-un applet Java, fi"ierele
VRML fiind prelucrate de un vizualizator VRML auxiliar.
Experimentele practice efectuate au ar!tat c! un mediu DIS-Java-VRML poate suporta
pn! la 40 de utilizatori conecta#i simultan, n condi#ii acceptabile de vitez! de transfer.
Living Worlds
Acest proiect este conceput de grupul de cercetare al Consor"iului Web 3D (fost Consor#iul
VRML), scopul lui fiind definirea unui set de conven#ii VRML 2.0 pentru realizarea
interoperabilit!#ii mediilor virtuale distribuite. Living Worlds nu reprezint!, a"adar,
o arhitectur! complet! a unui mediu virtual efectiv, ci mai mult ofer! o serie de standarde

K - 57

Tehnologii Web

privind utilizarea VRML-ului n acest context: suport pentru prezen#a virtual! a mai multor
participan#i, pentru interac#iunea participant-participant sau participant-sistem, pentru
asamblarea dinamic! a mediului din diverse componente precum avatari, modele partajate,
camere virtuale "i altele. Astfel, sunt disponibile biblioteci (abstracte) con#innd
scene/noduri VRML care pot fi folosite de proiectan#ii "i programatorii de lumi 3D.
Sunt definite urm!toarele interfe#e pentru:
1.

coordonarea pozi#iei "i st!rii obiectelor partajate (inclusiv avatari);

2.

schimbul de informa#ii ntre obiectele unei scene VRML;

3.

asigurarea securit!#ii aplica#iilor VRML (la nivel de sistem "i de utilizator);

4.

dezvoltarea unei biblioteci de utilitare "i extensii VRML 2.0;

5.

identificarea "i integrarea n timpul rul!rii a scripturilor VRML.

Pentru asigurarea interoperabilit!#ii "i independen#ei de platform!, Living Worlds

impune ca limbajul de programare a sistemului s! fie Java.
Aplica#iile bazate pe specifica#iile Living Worlds (nc! n stadiu de cercetare) sunt:
blaxxun Interactive - compus din clien#ii blaxxun Community Client pro "i
serverele blaxxun Community Server objects, posed! propriul browser VRML 2.0
oferind suport pentru applet-uri Java externe;

Sony Community Place - are ca scop asigurarea unor condi#ii bune de

vizualizare a lumilor 3D virtuale chiar "i pentru clien#ii conecta#i la Internet prin
modem, furniznd servicii conversa#ionale de tip chat (text sau grafic), interac#iunea
cu obiecte animate etc. Serverul "i clien#ii folosesc un protocol special, denumit
VSCP (Virtual Society Client Protocol), bazat pe TCP/IP;

Open Community - mediu virtual distribuit dezvoltat de Mitsubishi

Electric Research Lab (MERL), reprezint! "i o bibliotec! software oferind servicii
precum comunica#iile n re#ea, transportul datelor audio "i obiectelor VRML n
timp-real. Protocolul folosit este ISTP (Interactive Sharing Transfer Protocol).
Sistemul este conceput n limbajul C, dar n viitor va fi rescris n Java.

3.5 Unelte de dezvoltare

Pentru a asigura modularizarea, portabilitatea "i adaptarea mediului la lumea dinamic! a
Internetului, s-au imaginat diverse aplica#ii pentru asistarea programatorilor "i designerilor
de sisteme virtuale distribuite. Majoritatea uneltelor de dezvoltare (toolkit-uri) sunt
disponibile gratuit pe Internet. Deja exist! o serie de aplica#ii "i biblioteci care faciliteaz!
munca de construire a unui mediu virtual distribuit (bazat sau nu pe VRML) dintre care pot
fi amintite:

Bamboo este un mediu de programare a sistemelor virtuale distribuite,

ideea de baz! fiind asigurarea n manier! dinamic! a scalabilit!#ii acestora. Modular,
prelund filosofia Adobe sau Netscape de a utiliza plug-in-uri, Bamboo poate fi
adaptat conform dorin#elor utilizatorilor, fiind independent de platform! (se poate
nc!rca ma"ina virtual! Java ca modul, de"i aplica#ia este conceput! n C++).
Partea de re#ea este inspirat! din ACE (Adaptive Communication Environment), pe baza
c!ruia a fost construit.

K - 58

Tehnologii Web

High Level Architecture (HLA) ini#ial a fost dezvoltat n cadrul

Departamentului de Ap!rare SUA "i nu a reprezentat un standard deschis, public.
n prezent, HLA se afl! n adop#ia organizatiilor IEEE "i OMG. Arhitectura este
una obiectual!, fiecare simulator de lumi virtuale 3D reprezentnd o component!,
denumit! federate, constituit! dintr-o colec#ie de obiecte, posednd diferite atribute,
capabile de a ini#ia "i r!spunde la evenimente. Un federate "i nregistreaz! obiectele
prin intermediul unei componente middleware denumit! Run-Time Infrastructure (RTI).
RTI colaboreaz! cu instan#ele RTI aflate pe alte calculatoare pentru a ob#ine
informa#ii despre ceilal#i participan#i "i a le trimite date. Colec#ia tuturor
componentelor federate mpreun! cu instan#ele RTI asociate formeaz! a"a-numita
federa"ie (federation). RTI ofer! suport pentru managementul federa#iei, managementul
obiectelor dintr-un federate, managementul datelor vehiculate n re#ea,
managementul proprietarilor obiectelor "i managementul timpului. Specifica#ia
HTL pune la dispozi#ia programatorilor interfe#e spre limbajele C++, Java "i Ada,
implement!rile RTI deja existnd pe platforme precum Sun Solaris, SGI IRIX,
Linux "i Windows NT.

Java Shared Data Toolkit (JSDT) este pus la dispozi#ie de Sun "i ofer! un
cadru de dezvoltare a aplica#iilor Java colaborative (e.g. suport pentru sincronizarea
automat! a zonelor de memorie partajat! "i definirea de canale abstracte pentru
trimiterea "i recep#ionarea evenimentelor partajate). Utiliznd JSDT, se poate
implementa complet HLA RTI.

Shared Data Objects (SDO) reprezint! oferta gratuit! a laboratorului

AlphaWorks de la IBM care pune la dispozi#ie un toolkit Java, util pentru crearea
mediilor virtuale distribuite, asem!n!tor cu JSDT, dar furniznd mai multe facilit!#i
pentru programatori.

K - 59

Tehnologii Web

4. Conceperea de aplicaii VRML

Pentru definirea unei aplica#ii VRML, trebuie s! avem n vedere s! asigure urm!toarele:
un mecanism pentru managementul "i tranferul datelor bidimensionale "i
tridimensionale;

elemente pentru reprezentarea bidimensional! "i tridimensional! a

informa#iilor de baz!;

elemente pentru vizualizarea "i modelarea informa#iilor bidimensionale "i

tridimensionale;

un mecanism pentru ncorporarea de date din alte formate de fi"iere;

mecanisme pentru definirea de noi elemente care extind capabilit!#i pentru

alte formate de fi"iere (suportndu-se tipuri suplimentare "i forme ale informa#iei).

4.1 Interaciunea cu navigatorul VRML

n continuare vom descrie semantica pentru func#iile "i metodele pe care interfa#a
browser-ului le suport!, folosind o sintax! asem!n!toare cu cea a limbajului C pentru
definirea tipului parametrilor "i valorilor returnate. n aceast! sintax! ipotetic!, tipurile sunt
date ca tipuri de cmpuri VRML.
Metodele de interfa#! sunt urm!toarele:

SFString getName(); "i SFString getVersion();

Metodele getName() "i getVersion() dau numele "i versiunea

navigatorului curent folosit. Aceste valori sunt definite de autorul browser-ului
VRML "i ele identific! acel browser. Nu sunt garantate a fi unice sau a
respecta un format standard "i sunt doar informative. Dac! informa#ia nu este
disponibil!, aceste metode returneaz! "iruri vide.

SFFloat getCurrentSpeed();

Returneaz! viteza cu care viewpoint-urile (punctele de vizualizare) VRML

sunt translatate, n metri pe secund!. Dac! viteza de deplasare nu este
semnificativ! sau dac! viteza nu poate fi determinat! din diverse motive, este
returnat! valoarea 0.0.

SFFloat getCurrentFrameRate();

Metoda getCurrentFrameRate() furnizeaz! rata curent! a frame-urilor

(cadrelor imaginii), n frame-uri pe secund!. Modalitatea prin care aceasta este
m!surat! depinde de browser.

SFString getWorldURL();

Metoda getWorldURL() ofer! loca#ia lumii nc!rcate.

K - 60

Tehnologii Web

void replaceWorld(MFNode nodes);

Metoda nlocuie"te lumea curent! cu lumea reprezentat! de nodurile

transmise. Aceast! metod! de obicei nu returneaz! nimic, deoarece con#inutul
lumii din scriptul care ruleaz! va fi nlocuit.

void loadURL(MFString url, MFString parameter);

Metoda loadURL ncarc! url-ul cu parametrii trimi"i. Aceast! metod!

returneaz! imediat, n cazul n care URL-ul este nc!rcat n aceea"i fereastr! a
browser-ului (nu este specificat nici un parametru TARGET care s! indice
redirectarea la alt frame). Lumea curent! va fi oprit! "i nlocuit! cu datele de la
noul URL la un moment din viitor.

void setDescription(SFString description);

Metoda seteaz! descrierea pentru lumea VRML curent!. Acest mesaj va fi

afi"at ntr-o manier! ce depinde de browser. Pentru a "terge descrierea curent!,
se specific! un "ir vid.

MFNode createVrmlFromString(SFString vrmlSyntax);

Metoda proceseaz! un "ir constnd dintr-o descriere a unei scene VRML,

analiznd nodurile con#inute n scen! "i returnnd r!d!cina nodurilor
corespunz!toare scenei VRML.
void createVrmlFromURL(MFString

SFString event);

url,

SFNode

node,

CreateVrmlFromURL ns!rcineaz! browser-ul s! ncarce descrierea unei

scene VRML de la un anumit URL sau mai multe URL-uri date. Dup! ce
scena este nc!rcat!, evenimentul este trimis la nodul transmis ca parametru,
returnndu-se r!d!cina nodurilor corespunz!toare scenei VRML. Parametrul
evenimentului contine un "ir numind un eveniment MFNode la nodul p!strat.
void addRoute(SFNode fromNode, SFString fromEventOut,

void
SFNode
toNode,
SFString
toEventIn);
"i
deleteRoute(SFNode fromNode,SFString fromEventOut, SFNode
toNode,SFString toEventIn);

Aceste metode adaug! "i respectiv "terg o cale ntre numele evenimentelor
date pentru nodurile date.

4.2 Extensii ale navigatorului VRML

Navigatoarele VRML care doresc s! adauge func#ionalit!#i peste capabilit!#ile
specifica#iei pot s! realizeze acest lucru prin crearea prototipurilor externe. Dac! noul nod nu
poate fi exprimat folosind mecanismul prototipurilor (nu poate fi specificat ca un graf de
scena VRML), atunci el trebuie definit ca un prototip extern cu o specifica#ie URN unic!.
Autorii care folosesc func#ionalit!#i extinse trebuie s! furnizeze URL-uri sau URN-uri
multiple, alternative la reprezentarea con#inutului pentru a se asigura c! sunt acceptate de
toate browserele.
Spre exemplu, s! presupunem c! se dore"te implementarea unui nod geometric Torus,
folosit pentru reprezentarea unui tor:
K - 61

Tehnologii Web

EXTERNPROTO Torus [
field SFFloat bigR,
field SFFloat smallR
]
[ "urn:inet:library:Torus",
"http://www.site.com/proto_torus.wrl"
]

Navigatorul VRML va recunoa"te URN-ul "i va folosi implementarea nodului Torus.

Alte browsere s-ar putea s! nu recunoasc! URN-ul, s! ignore lista de URL-uri "i s! caute
fi"ierul pentru prototipul specificat. Dac! URL-urile sau URN-urile nu sunt g!site, nodul
Torus se presupune c! este nod vid.
Navigatoarele trebuie s! recunoasc! "i s! implementeze PROTO, EXTERNPROTO, "i
specifica#iile URN. Numele prototipurilor (e.g. Torus) nu au nici o semnifica#ie aparte.
URL-urile "i URN-urile furnizate determin! loca#ia "i semantica nodurilor VRML definite.

K - 62

Tehnologii Web

5. Studiu de caz: o aplicaie VRML

pentru vizualizarea tridimensional
a interiorului unei cldiri
n ceea ce urmeaz!, se va prezenta o aplica#ie VRML complet! pentru realizarea 3D
a parterului Facult!#ii de Informatic!, alc!tuit din holul de la intrare, secretariatul, biroul
Decanatului "i sala de calculatoare RP1. Acest studiu de caz reprezint! partea practic!
original! a lucr!rii de diplom! a absolventului promo#iei 1999/2000 Dan Moscu.

Parterul Facult#"ii de Informatic# (modelat n VRML)

Aplica#ia a fost realizat! cu ajutorul editorului VRML Pad, iar pentru vizualizarea ei
se poate folosi un plug-in precum Cortona VRML Client, Cosmo VRML Player sau World View.
n principiu, interfa#a unui plug-in VRML pentru navigatorul Web este compus! din dou!
p!r#i distincte:
i.

Toolbar-urile:

toolbar-ul vertical care con#ine butoane folosite pentru a specifica

tipul navig!rii prin lumea VRML.

toolbar-ul orizontal care con#ine butoane cu ac#iuni predefinite pentru

schimbarea pozi#iei de vizualizare a lumii virtuale.

Fereastra de vizualizare "tridimensional!" care prezint! utilizatorului lumea

ii.
VRML dorit!.
Exist! de asemenea meniuri pop-up contextuale care pot fi accesate ap!snd butonul
drept al mouse-ului n timp ce cursorul este deasupra toolbar-urilor sau a ferestrei de
vizualizare.

K - 63

Tehnologii Web

Navigarea prin lumea virtual#

A te mi"ca n spa#iul 3D este similar cu a mi"ca o camer! video. Astfel, ne putem gndi la
o camer! video care captureaz! imagini din lumea real! "i le transform! n semnale
electronice pentru a fi vizualizate pe ecran; camera video posed! o pozi#ie "i o orientare "i
acestea sunt atribute independente. Se pot folosi comenzile camerei situate pe toolbar-ul
vertical pentru a mi"ca aceast! camer! n spa#iul tridimensional. Astfel, se simuleaz!
existen#a unei persoane reale care percepe "i interac#ioneaz! cu lumea VRML.
Programatorul VRML poate plasa n lumea virtual! oricte camere video dore"te - locuri
interesante de unde utilizatorul ar dori s! vad! lumea. Doar o camer! poate fi activ! la un
moment dat.

Navigarea prin lumea virtual# 3D

Structura aplica"iei
Aplica#ia este mp!r#it! n patru lumi distincte: holul, sala de calculatoare RP1,
secretariatul "i decanatul. Celor patru lumi le corespund fi"ierele: hol.wrl, rp1.wrl,
secretariat.wrl, respectiv decanat.wrl. Trecerea de la o lume la alta se face dnd
click pe u"a respectiv!. n momentul n care cursorul este pozi#ionat pe una dintre aceste
u"i, se va activa un nod de tip Anchor. n acel moment ap!snd butonul stng al
mouse-ului se va realiza trecerea n alt! lume (aceasta fiind nc!rcat! de navigator).
De exemplu, codul care realizeaz! trecerea din hol n sala RP1 este:
Anchor {
children [
USE usa
]
url "rp1.wrl"
}

K - 64

Tehnologii Web

Tastatura unui calculator (modelat# n VRML)

Fiecare obiect care apare de mai multe ori n cadrul aplica#iei (monitorul, tastatura,
unitatea central!, scaunul, masa, u"a etc.) este stocat n fi"iere separate "i apoi este importat
n locul n care se dore"te a fi folosit. Spre exemplu, n figura de mai sus este prezentat!
o captur! din fi"ierul tasta.wrl, n care a fost modelat! tastatura utilizat! n fi"ierul
rp1.wrl pentru fiecare calculator virtual.
Structura fi"ierelor este una arborescent!, de pild! fi"ierul rp1.wrl import! noduri din
fi"ierele proba.wrl "i pereti.wrl.
Lumea descris! de proba.wrl reprezint! o mas! care are trei calculatoare "i trei scaune
"i n fi"ierul rp1.wrl este importat! de dou! ori. Fi"ierul pereti.wrl reprezint!
nc!perea propriu-zis!, adic! trei pere#i (pe unul dintre ei se figureaz! "i o tabl!) "i un perete
de sticl!. Pentru realizarea unui grad mai mare de realism s-au utilizat diverse texturi.
Peisajul care se observ! prin geamul de sticl! al laboratorului RP1 este realizat n fi"ierul
pereti.wrl, iar codul lui se prezint! mai jos:
Background {
groundColor [ 0.21 0.66 0.17,
0.21 0.66 0.17 ]
groundAngle 1.5
skyColor [ 0.42 0.63 0.89,
0.42 0.63 0.89 ]
skyAngle 1.64
backUrl
"img/back.jpg"
frontUrl "img/back.jpg"
rightUrl "img/back.jpg"
leftUrl
"img/back.jpg"
bottomUrl "img/floor.jpg"
}

La rndul s!u, fi"ierul pereti.wrl folose"te fi"ierele neon.wrl "i usahol.wrl, iar
proba.wrl utilizeaz! fi"ierele monitor.wrl, tasta.wrl, masa.wrl, scaun.wrl "i
pc.wrl.

K - 65

Tehnologii Web

Sala de calculatoare RP$ (modelat# n VRML)

Unitatea central! a unui calculator are definit un touch sensor la butonul CD-ROM-ului "i
un touch sensor la butonul Power. n momentul n care este ap!sat butonul Power, se va
aprinde un led dac! este stins "i invers. Cnd este ap!sat butonul de la CD-ROM, va ie"i
CD-ul pentru cteva secunde "i apoi va reintra n loca"ul lui. n acest timp un led verde de
la unitatea de CD va clipi. %i ledul ro"u de la hard-disk clipe"te continuu, ca "i cum ar fi
folosit hard-disk-ul.
Datorit! acestor anima#ii, mi"carea n sala de calculatoare poate fi fragmentat!, fiind
consumate foarte multe resurse.

Un calculator virtual (modelat n VRML)

K - 66

Tehnologii Web

6. Viitor
Deja realitatea virtual! este utilizat!, nglobat! sau nu n alte tehnici de reprezentare a
informa#iei, n domenii precum arhitectura, nv!#!mntul, medicina, ingineria ori sociologia
"i divertismentul. Crea#iile VRML prezente deja pe Web pot fi ncadrate ntr-un curent
artistic denumit environmental art.
Spa#iul cibernetic poate deveni viitorul laborator al omului de "tiin#!, viitorul simulator
cibernetic al inginerilor, viitorul amfiteatru al studen#ilor. Dac! nc! nu exist! suficiente
instrumente menite a construi lumi 3D sofisticate, tehnici precum telesenza"ia (summum al
realit!#ii virtuale, computer vision, grafic! computerizat! "i telecomunica#ii) ofer! premisele
reprezent!rii informa#iilor ntr-o form! familiar!, facil!, dar "i complex!.
Un proiect spectaculos al organizatiei Biota este Nerve Garden, bazat pe sisteme
Lindenmayer (tipuri particulare de fractali), VRML, re#ele neuronale, tehnologii Web "i
tehnici de codificare genetic!, al c!rui scop este explorarea interactiv! a biologiei digitale pe
Internet "i, ntr-un viitor mai ndep!rtat, instituirea unei infrastructuri pentru medii virtuale
biologice "i crearea unor noi organisme (plante "i animale) artificiale.

Simularea unui organism prin utilizarea fractalilor !i a limbajului VRML

Limbajele bazate pe VRML care vor apare n urm!torii ani vor oferi modalit!#i de
manipulare inteligent! a datelor universului nostru uman transpus n spa#iul cibernetic aflat
n continu! transformare "i expansiune.

K - 67

Tehnologii Web

"Realitatea trebuie n"eleas# numai prin spargerea ei n p#r"i ct mai mici."

(Descartes)

Tehnologii Web

Anexa 1 - Sintaxa complet URL

Prezent!m n continuare, n nota#ia EBNF (Extended Backus-Naur Form), regulile de
generare a URL-urilor (conform RFC 1738):
prefixedurl
u r l : url
url
httpaddress | ftpaddress | newsaddress | nntpaddress | prosperoaddress | telnetaddress |
gopheraddress |waisaddress | mailtoaddress | midaddress | cidaddress
scheme
ialpha
httpaddress
h t t p : / / hostport [ / path ] [ ? search ]
ftpaddress
f t p : / / login / path [ ; ftptype ]
afsaddress
a f s : / / cellname /path
newsaddress
n e w s : groupart
nntpaddress
n n t p : group / digits
midaddress
m i d : addr-spec
cidaddress
c i d : content-identifier
mailtoaddress
m a i l t o : xalphas @ hostname
waisaddress
waisindex | waisdoc
waisindex
w a i s : / / hostport / database [ ? search ]
waisdoc
w a i s : / / hostport / database / wtype / wpath
wpath
digits = path ; [ wpath ]
groupart
* | group | article
group
ialpha [ . group ]
article
xalphas @ host
database
xalphas
wtype
xalphas
prosperoaddress
prosperolink
prosperolink
p r o s p e r o : / / hostport / hsoname [ % 0 0 version [ attributes ] ]
hsoname
path
version
digits
attributes
attribute [ attributes ]
attribute
alphanums

L-2

Tehnologii Web

telnetaddress
t e l n e t : / / login
gopheraddress
g o p h e r : / / hostport [/ gtype [ gcommand ] ]
login
[ user [ : password ] @ ] hostport
hostport
host [ : port ]
host
hostname | hostnumber
ftptype
A formcode | E formcode | I | L digits
formcode
N|T|C
cellname
hostname
hostname
ialpha [ . hostname ]
hostnumber
digits . digits . digits . digits
port
digits
gcommand
path
path
void | segment [ / path ]
segment
xpalphas
search
xalphas [ + search ]
user
alphanum2 [ user ]
password
alphanum2 [ password ]
fragmentid
xalphas
gtype
xalpha
alphanum2
alpha | digit | - | _ | . | +
xalpha
alpha | digit | safe | extra | escape
xalphas
xalpha [ xalphas ]
xpalpha
xalpha | +
xpalphas
xpalpha [ xpalphas ]
ialpha
alpha [ xalphas ]
alpha
a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z|A|
B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y
|Z
digit
0 |1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
safe
$|-|_|@|.|&|+|extra
!|*|"|'|(|)|,
reserved
= | ; | / | # | ? | : | space

L-3

Tehnologii Web

escape
% hex hex
hex
digit | a | b | c | d | e | f | A | B | C | D | E | F
national
{ | } | vline | [ | ] | \ | ^ | ~
punctuation
<|>
digits
digit [ digits ]
alphanum
alpha | digit
alphanums
alphanum [ alphanums ]
void
_

L-4

Tehnologii Web

Anexa 2 - Elementele HTML 4

Lista tuturor elementelor permise n HTML 4.01 este urm!toarea:
Nume

Tag de
start

Tag de
sfr!it

Vid Vechi DTD

Descriere

ancor!

ABBR

abreviere (e.g., WWW, HTTP etc.)

ACRONYM

acronim

ADDRESS

informa#ii despre autor

APPLET

AREA

applet Java
hart! de imagini

ngro"at

BASE

BASEFONT

URI de baz!
D

m!rime font de baz!

BDO

I18N BiDi

BIG

m!rime mai mare a fontului

BLOCKQUOTE

citat lung

BODY
BR

O
F

corp document
E

linie nou!

BUTTON

buton

CAPTION

explica#ie tabel

CENTER

DIV align=center

CITE

citat

CODE

cod surs!

COL

COLGROUP

grup de coloane

DD

descriere de defini#ie

coloan! de tabel

DEL

text "ters

DFN

defini#ie de instan#!

DIR

list! de directoare

DIV

diviziune

DL

list! de defini#ie

DT

termen definit

EM

intensificare

FIELDSET

grup de control al formularului

L-5

Tehnologii Web

FONT

FORM

modificator caracteristici
de fonturi
formular

FRAME

FRAMESET

cadru

mul#ime de cadre

H$

titlu de tip 1

H2

titlu de tip 2

H3

titlu de tip 3

H4

titlu de tip 4

H5

titlu de tip 5

H6

titlu de tip 6

HEAD

HR
HTML

O
F

antet
E

linie orizontal!

r!d!cin! de document

italic

IFRAME

cadru intern (inline)

IMG

imagine

INPUT

cmp de intrare al unui formular

INS
ISINDEX

text inserat
F

intrare linie unic!

KBD

text tastat

LABEL

etichet! de formular

LEGEND

legend!

LI

LINK

membru de list!
E

leg!tur! independent!

MAP

hart! de imagini (server)

MENU
META

D
F

meniu
meta-informa#ii

NOFRAMES

con#inut alternativ dac! nu sunt

suportate cadrele

NOSCRIPT

con#inut alternativ dac! nu sunt

suportate scripturi

OBJECT

obiect generic

OL

list! ordonat!

OPTGROUP

grup de op#iuni

OPTION

op#iune selectabil!

paragraf

PARAM

parametru

L-6

Tehnologii Web

PRE

text preformatat

citat scurt

text t!iat de o linie

SAMP

exemple de script-uri,
cod etc.

SCRIPT

instruc#iuni script

SELECT

selector

SMALL

m!rime mai mic! a fontului

SPAN

con#inut general de text/script/stiluri

STRIKE

text ngro"at

STRONG

intensificare puternic!

STYLE

informa#ii de stil

SUB

subscript (indice)

SUP

superscript (exponent)

TABLE

tabel

TBODY

TD

corp de tabel

celul! de date

TEXTAREA

cmp de text

TFOOT

not! de antet de tabel

TH

cap de tabel

THEAD

antet de tabel

TITLE
TR

titlul documentului
O

rnd de tabel

TT
U

teletype
D

text subliniat

UL

list! neordonat!

VAR

instan#! de variabil!

n care:
E - element vid,
O - tag op#ional,
F - interzis,
D - n curs de dispari#ie,
L - forma tranzi#ional! (loose),
F - DTD suportnd cadre.

L-7

Tehnologii Web

Anexa 3 - Atributele HTML 4

Lista tuturor atributelor permise n HTML 4.01 este urm!toarea:
Nume

Apare n elementele

Implicit

abbr

TD, TH

#IMPLIED

abreviere pentru antet

de celul!

accept-charset

FORM

#IMPLIED

lista seturilor de
caractere suportate

accept

INPUT

#IMPLIED

lista tipurilor MIME

pentru upload

accesskey

A, AREA, BUTTON,
INPUT, LABEL,
LEGEND, TEXTAREA

#IMPLIED

tasta care activeaz!

elementul

action

FORM

#REQUIRED

URI-ul scriptului care

prelucreaz! formularul

align

CAPTION

#IMPLIED

aliniere relativ! la tabel

align

APPLET, IFRAME,
IMG, INPUT, OBJECT

#IMPLIED

aliniere vertical! sau

orizontal!

align

LEGEND

#IMPLIED

aliniere relativ! la
cmpul de intrare

align

TABLE

#IMPLIED

pozi#ia relativ! a
tabelului

align

HR

#IMPLIED

aliniere a liniei
orizontale

align

DIV, H1, H2, H3, H4,

H5, H6, P

#IMPLIED

alinierea textului

align

COL, COLGROUP,
TBODY, TD, TFOOT,
TH, THEAD, TR

#IMPLIED

alink

BODY

#IMPLIED

culoarea leg!turilor
selectate

alt

APPLET

#IMPLIED

descriere scurt!

alt

AREA, IMG

#REQUIRED

descriere scurt!

alt

INPUT

#IMPLIED

descriere scurt!

archive

OBJECT

#IMPLIED

list! de arhive separate

prin spa#iu

archive

APPLET

#IMPLIED

axis

TD, TH

#IMPLIED

background

BODY

#IMPLIED

L-8

Demodat DTD

Remarci

alinierea con#inutului
n cadrul tabelului

list! de arhive separat!

prin virgul!
grupuri de antete

imaginea pentru
fundalul documentului

Tehnologii Web

bgcolor

TABLE

#IMPLIED

culoarea de fundal
pentru celule

bgcolor

TR

#IMPLIED

culoarea de fundal
pentru rnduri

bgcolor

TD, TH

#IMPLIED

culoarea de fundal
pentru o celul!

bgcolor

BODY

#IMPLIED

culoarea de fundal a
documentului

border

TABLE

#IMPLIED

border

IMG, OBJECT

#IMPLIED

cellpadding

TABLE

#IMPLIED

spa#ierea n interiorul
celulelor

cellspacing

TABLE

#IMPLIED

spa#ierea dintre celule

char

COL, COLGROUP,
TBODY, TD, TFOOT,
TH, THEAD, TR

#IMPLIED

caracterul dup! care se

efectueaz! alinierea
(e.g. ":")

charoff

COL, COLGROUP,
TBODY, TD, TFOOT,
TH, THEAD, TR

#IMPLIED

spa#ierea pentru
alinierea n func#ie de
un anumit caracter

charset

A, LINK, SCRIPT

#IMPLIED

codificarea unei
resurse

checked

INPUT

#IMPLIED

bifare implicit! pentru

butoane

cite

BLOCKQUOTE, Q

#IMPLIED

URI-ul documentului
surs!

cite

DEL, INS

#IMPLIED

informa#ii despre
motivul schimb!rii
con#inutului

class

toate, exceptnd BASE,

BASEFONT, HEAD,
HTML, META, PARAM,
SCRIPT, STYLE, TITLE

#IMPLIED

list! de clase separate

de spa#iu

classid

OBJECT

#IMPLIED

identific! o
implementare

clear

BR

none

controlul curgerii
textului

code

APPLET

#IMPLIED

fi"ierul applet-ului

codebase

OBJECT

#IMPLIED

codebase

APPLET

#IMPLIED

codetype

OBJECT

#IMPLIED

color

BASEFONT, FONT

#IMPLIED

L-9

controleaz! l!#imea
bordurii din jurul
tabelului
D

l!#imea bordurii

URI-ul de baz! pentru

identificatorul de
clase, date, arhive
D

URI-ul de baz! pentru

applet
tipul de con#inut

culoarea textului

Tehnologii Web

list! de lungimi,
implicit: 100% (1
coloan!)

cols

FRAMESET

#IMPLIED

cols

TEXTAREA

#REQUIRED

l!#imea unei zone de

intrare de tip text

colspan

TD, TH

num!rul de coloane
ocupate de o celul!

compact

DIR, DL, MENU, OL,

UL

#IMPLIED

content

META

#REQUIRED

informa#ie
suplimentar!

coords

AREA

#IMPLIED

list! de lungimi
separate de virgul!

coords

#IMPLIED

utilizat! la h!r#i de
imagini senzitive

data

OBJECT

#IMPLIED

referin#! la datele
obiectului

datetime

DEL, INS

#IMPLIED

data/timpul
modific!rii

declare

OBJECT

#IMPLIED

declar! dar nu
instan#iaz! un
parametru

defer

SCRIPT

#IMPLIED

agentul utilizator
poate redirec#iona
execu#ia scriptului

dir

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FRAME, FRAMESET,
IFRAME, PARAM,
SCRIPT

#IMPLIED

direc#ia de afi"are a
textului

dir

BDO

#REQUIRED

direc#ia afi"!rii

disabled

BUTTON, INPUT,
OPTGROUP, OPTION,
SELECT, TEXTAREA

#IMPLIED

anulare n acest
context

enctype

FORM

"application/xwww- formurlencoded"

modul de codificare a
formularului

face

BASEFONT, FONT

#IMPLIED

for

LABEL

#IMPLIED

referitor la valoarea
ID a elementului

frame

TABLE

#IMPLIED

referitor la care parte a

cadrului va fi
procesat!

frameborder

FRAME, IFRAME

L - 10

reduce spa#ierea

list! de nume de
fonturi separate de
virgul!

bordura dintre cadre

Tehnologii Web

lista de identificatori
de antete de celul!

headers

TD, TH

#IMPLIED

height

IFRAME

#IMPLIED

height

IMG, OBJECT

#IMPLIED

height

APPLET

#REQUIRED

n!l#imea initial!

height

TD, TH

#IMPLIED

n!l#imea celulei

href

A, AREA, LINK

#IMPLIED

URI-ul unei resurse

href

BASE

#IMPLIED

URI-ul considerat
baz!

hreflang

A, LINK

#IMPLIED

codul limbajului

hspace

APPLET, IMG,
OBJECT

#IMPLIED

http-equiv

META

#IMPLIED

antet al unui r!spuns

HTTP

id

toate, exceptnd BASE,

HEAD, HTML, META,
SCRIPT, STYLE, TITLE

#IMPLIED

identificator unic

ismap

IMG, INPUT

#IMPLIED

utilizeaz! o imagine
senzitiv! la nivel de
server

label

OPTION

#IMPLIED

utilizat pentru meniuri

label

OPTGROUP

#REQUIRED

utilizat pentru meniuri

lang

toate, exceptnd
APPLET, BASE,
BASEFONT, BR,
FRAME, FRAMESET,
IFRAME, PARAM,
SCRIPT

#IMPLIED

codul limbii folosite

language

SCRIPT

#IMPLIED

limbajul n care s-a

scris scriptul

link

BODY

#IMPLIED

culoarea leg!turilor

longdesc

IMG

#IMPLIED

longdesc

FRAME, IFRAME

#IMPLIED

leg!tur! spre o
descriere lung!

marginheight

FRAME, IFRAME

#IMPLIED

n!l#imea marginilor
(n pixeli)

marginwidth

FRAME, IFRAME

#IMPLIED

l!#imea marginilor (n
pixeli)

maxlength

INPUT

#IMPLIED

lungimea maxim! de
caractere ce pot fi
introduse

media

STYLE

#IMPLIED

media folosit!

media

LINK

#IMPLIED

media folosit!

L - 11

n!l#imea cadrului
n!l#imea con#inutului

spatiu orizontal
suplimentar

leg!tur! spre o
descriere lung!

Tehnologii Web

method

FORM

GET

metoda HTTP folosit!

pentru trimiterea
formularului

multiple

SELECT

#IMPLIED

selectare multipl!

name

BUTTON, TEXTAREA

#IMPLIED

numele asociat
cmpului de intrare

name

APPLET

#IMPLIED

name

SELECT

#IMPLIED

nume de cmp

name

FORM

#IMPLIED

numele formularului

name

FRAME, IFRAME

#IMPLIED

name

IMG

#IMPLIED

numele imaginii

name

#IMPLIED

numele leg!turii

name

INPUT, OBJECT

#IMPLIED

trimis ca parte a unui

formular

name

MAP

#REQUIRED

identificator n usemap

name

PARAM

#REQUIRED

nume de proprietate

name

META

#IMPLIED

numele unei metainforma#ii

nohref

AREA

#IMPLIED

aceast! regiune nu are

asociat! nici o leg!tur!

noresize

FRAME

#IMPLIED

noshade

HR

#IMPLIED

nowrap

TD, TH

object

permite identificarea
applet-ului

numele cadrului

nu permite
modificarea
dimensiunii cadrelor

afi"eaz! linii orizontale

pline

#IMPLIED

nu permite "ruperea"
cuvintelor pe mai
multe linii

APPLET

#IMPLIED

fi"ier applet serializat

onblur

A, AREA, BUTTON,
INPUT, LABEL,
SELECT, TEXTAREA

#IMPLIED

trateaz! pierderea
focaliz!rii

onchange

INPUT, SELECT,
TEXTAREA

#IMPLIED

trateaz! modificarea
valorii cmpului

onclick

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! ac#ionarea
unui click

L - 12

Tehnologii Web

ondblclick

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! ac#ionarea
unui click dublu

onfocus

A, AREA, BUTTON,
INPUT, LABEL,
SELECT, TEXTAREA

#IMPLIED

trateaz! focalizarea
unui element

onkeydown

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! ap!sarea unei

taste, f!r! a fi eliberat!
nc!

onkeypress

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! ap!sarea "i

eliberarea unei taste

onkeyup

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! eliberarea unei

taste

onload

FRAMESET

#IMPLIED

onload

BODY

#IMPLIED

trateaz! nc!rcarea
documenului

#IMPLIED

trateaz! ap!sarea
butonului mouse-ului

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
onmousedown
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

L - 13

trateaz! nc!rcarea
tuturor cadrelor

Tehnologii Web

onmousemove

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! mi"carea
mouse-ului

onmouseout

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! ie"irea mouseului din aria ocupat!

de element

onmouseover

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! mutarea
mouse-ului peste un
element

onmouseup

toate, exceptnd
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

#IMPLIED

trateaz! eliberarea
butonului mouse-ului

onreset

FORM

#IMPLIED

trateaz! resetarea
formularului

onselect

INPUT, TEXTAREA

#IMPLIED

trateaz! selectarea
textului

onsubmit

FORM

#IMPLIED

trateaz! evenimentul
de trimitere a
formularului

onunload

FRAMESET

#IMPLIED

trateaz! distrugerea
tuturor cadrelor

onunload

BODY

#IMPLIED

trateaz! distrugerea
documentului, prin
nc!rcarea altuia n
aceea"i fereastr!

profile

HEAD

#IMPLIED

dic#ionarul unei metainforma#ii

prompt

ISINDEX

#IMPLIED

readonly

TEXTAREA

#IMPLIED

L - 14

mesaj
datele nu pot fi
modificate

Tehnologii Web

readonly

INPUT

#IMPLIED

pentru text "i parol!

rel

A, LINK

#IMPLIED

tipuri de leg!turi

rev

A, LINK

#IMPLIED

tipuri de leg!turi

rows

FRAMESET

#IMPLIED

rows

TEXTAREA

#REQUIRED

num!rul de rnduri
ocupate

rowspan

TD, TH

num!rul de rnduri
ocupate de o celul!

rules

TABLE

#IMPLIED

reguli de spa#iere ntre

rnduri "i coloane

scheme

META

#IMPLIED

selecteaz! forma
con#inutului

scope

TD, TH

#IMPLIED

scopul unui antet de

celule

scrolling

FRAME, IFRAME

auto

selected

OPTION

#IMPLIED

indic! selectarea
implicit!

shape

AREA

rect

controleaz!
interpretarea
coordonatelor

shape

rect

pentru h!r#i senzitive

size

HR

#IMPLIED

m!rimea unei linii

orizontale

size

FONT

#IMPLIED

m!rimea fontului,
relativ! sau absolut!
[+|-]nn

size

INPUT

#IMPLIED

size

BASEFONT

#REQUIRED

size

SELECT

#IMPLIED

num!rul de rnduri
vizibile dintr-o list! de
selec#ie

span

COL

atributele lui COL

afecteaz! num!rul de
coloane specificat

span

COLGROUP

num!rul implicit de
coloane

src

SCRIPT

#IMPLIED

URI-ul pentru un
script extern

src

INPUT

#IMPLIED

pentru cmpuri
con#innd imagini

L - 15

list! de l!#imi, implicit

100%
(1 rnd)

permite apari#ia
barelor de derulare

m!rimea cmpurilor
de intrare
D

m!rimea de baz! a
fonturilor

Tehnologii Web

URI-ul surs! al unui

cadru

src

FRAME, IFRAME

#IMPLIED

src

IMG

#REQUIRED

URI-ul imaginii

standby

OBJECT

#IMPLIED

mesaj afi"at la
nc!rcarea obiectului

start

OL

#IMPLIED

style

toate, exceptnd BASE,

BASEFONT, HEAD,
HTML, META, PARAM,
SCRIPT, STYLE, TITLE

#IMPLIED

informa#ii de stil
asociate
(via CSS sau alte
limbaje)

summary

TABLE

#IMPLIED

scopul/structura
tabelului

tabindex

A, AREA, BUTTON,
INPUT, OBJECT,
SELECT, TEXTAREA

#IMPLIED

pozi#ia n ordinea de
tabulare

target

A, AREA, BASE,
FORM, LINK

#IMPLIED

text

BODY

#IMPLIED

title

toate, exceptnd BASE,

BASEFONT, HEAD,
HTML, META, PARAM,
SCRIPT, TITLE

#IMPLIED

titlul asociat

type

A, LINK

#IMPLIED

tipul con#inutului

type

OBJECT

#IMPLIED

tipul con#inutului

type

PARAM

#IMPLIED

tipul con#inutului
valorii cnd
valuetype=ref

type

SCRIPT

#REQUIRED

tipul con#inutului
limbajului script

type

STYLE

#REQUIRED

tipul con#inutului
limbajului de stiluri

type

INPUT

TEXT

tipul cmpului de
intrare

type

LI

#IMPLIED

tipul stilului pentru

elemente de list!

type

OL

#IMPLIED

tipul stilului de
numerotare

type

UL

#IMPLIED

tipul stilului pentru

liste nenumerotate

type

BUTTON

submit

tipul de buton

usemap

IMG, INPUT, OBJECT

#IMPLIED

harta senzitiv! utilizat!

valign

COL, COLGROUP,
TBODY, TD, TFOOT,
TH, THEAD, TR

#IMPLIED

alinierea vertical! a
celulelor

L - 16

secven#! de start
a contorului
unei liste

cadrul unde se va face

afi"area

culoarea textului
documentului

Tehnologii Web

value

OPTION

#IMPLIED

valoarea implicit! a
unui element

value

PARAM

#IMPLIED

valoarea unei
propriet!#i

value

INPUT

#IMPLIED

valoarea unui cmp de

intrare

value

BUTTON

#IMPLIED

valoarea trimis! unui

server

value

LI

#IMPLIED

valuetype

PARAM

DATA

version

HTML

%HTML.Version;

constant!, desemnnd
versiunea specifica#iei
HTML

vlink

BODY

#IMPLIED

culoarea leg!turilor
vizitate

vspace

APPLET, IMG,
OBJECT

#IMPLIED

marginea vertical!
suplimentar!

width

HR

#IMPLIED

l!#imea unei linii

orizontale

width

IFRAME

#IMPLIED

l!#imea unui cadru

intern

width

IMG, OBJECT

#IMPLIED

l!#imea unei
imagini/obiect

width

TABLE

#IMPLIED

l!#imea unui tabel

width

APPLET

#REQUIRED

width

COL

#IMPLIED

l!#imea coloanelor

width

COLGROUP

#IMPLIED

l!#imea ini#ial! a unui

grup de coloane

width

TD, TH

#IMPLIED

l!#imea unei celule

width

PRE

#IMPLIED

l!#imea unui text

preformatat

n care:
D - n curs de dispari#ie,
L - forma tranzi#ional! (loose),
F - DTD suportnd cadre.

L - 17

schimb!
contorizarea/stilul
unui element de list!
modul de interpretare
a valorii

l!#imea ini#ial! de
afi"are a applet-ului

Tehnologii Web

Anexa 4 - Entitile HTML

Pentru alc!tuirea prezentei anexe mul#umim lui Marius Feraru, creatorul uneia dintre
cele mai cuprinz!toare biblioteci virtuale n domeniul tehnologiei informatice din Romnia
(disponibil! pe site-ul Web al studen#ilor Facult!#ii de Automatiz!ri "i Calculatoare de la
Universitatea Tehnic! din Ia"i).

Entit!"i utile
Simbol

Entitate

Semnul copyright

Exemplu

&copy; Copyright 2000 W3C

Semnul marc! nregistrat!

&reg;

MagicPenguin

Semnul trademark

&#8482;

Crocodilla

Mai mic dect

&lt;

<

Mai mare dect

&gt;

>

Ampersand

&amp;

&

Spa#iu indestructibil

&nbsp;

Linie orizontal! (em dash) &#8212;

Ghilimele

&quot;

"

Entit!"i pentru reprezentarea diferitelor caractere ale setului Latin-1

&#160; &ETH;

&#208;

&iexcl;

&#161; &Ntilde;

&#209;

&cent;

&#162; &Ograve;

&#210;

&pound;

&#163; &Oacute;

&#211;

&curren;

&#164; &Ocirc;

&#212;

&yen;

&#165; &Otilde;

&#213;

&brvbar;

&#166; &Ouml;

&#214;

&sect;

&#167;

&times;

&#215;

&uml;

&#168; &Oslash;

&#216;

&copy;

&#169;

&Ugrave;

&#217;

&ordf;

&#170;

&Uacute;

&#218;

&laquo;

&#171;

&Ucirc;

&#219;

&nbsp;

L - 18

Tehnologii Web

&not;

&#172;

&Uuml;

&#220;

&shy;

&#173;

&Yacute;

&#221;

&reg;

&#174;

&THORN;

&#222;

&macr;

&#175;

&szlig;

&#223;

&deg;

&#176;

&agrave;

&#224;

&plusmn;

&#177;

&aacute;

&#225;

&sup2;

&#178;

&acirc;

&#226;

&sup3;

&#179;

&atilde;

&#227;

&acute;

&#180;

&auml;

&#228;

&micro;

&#181;

&aring;

&#229;

&para;

&#182;

&aelig;

&#230;

& &middot;

&#183;

&ccedil;

&#231;

&cedil;

&#184;

&egrave;

&#232;

&sup1;

&#185;

&eacute;

&#233;

&ordm;

&#186;

&ecirc;

&#234;

&raquo;

&#187;

&euml;

&#235;

&frac14;

&#188;

&igrave;

&#236;

&frac12;

&#189;

&iacute;

&#237;

&frac34;

&#190;

&icirc;

&#238;

&iquest;

&#191;

&iuml;

&#239;

&Agrave;

&#192;

&eth;

&#240;

&Aacute;

&#193;

&ntilde;

&#241;

&Acirc;

&#194;

&ograve;

&#242;

&Atilde;

&#195;

&oacute;

&#243;

' &Auml;

&#196;

&ocirc;

&#244;

&Aring;

&#197;

&otilde;

&#245;

&AElig;

&#198;

&ouml;

&#246;

&Ccedil;

&#199;

&divide;

&#247;

&Egrave;

&#200;

&oslash;

&#248;

&Eacute;

&#201;

&ugrave;

&#249;

&Ecirc;

&#202;

&uacute;

&#250;

&Euml;

&#203;

&ucirc;

&#251;

&Igrave;

&#204;

&uuml;

&#252;

L - 19

Tehnologii Web

&Iacute;

&#205;

&yacute;

&#253;

&Icirc;

&#206;

&thorn;

&#254;

&Iuml;

&#207;

&yuml;

&#255;

Diacritice n documentele HTML

Pentru a concepe documente HTML con#innd diacriticele pentru limba romn!

trebuie mai ntii s! set!m pentru pagina respectiv! codul de caractere ISO-8859-2
prin introducerea, n antetul documentului, a liniei:
<meta http-equiv="Content-type"
content="text/html; charset=ISO-8859-2">

n cadrul paginii se vor folosi urm!toarele entit!#i-caracter:

Entitate-caracter

Vizualizare

&#194;
(alternativ &Acirc;)

&#226;
(alternativ &acirc;)

&#258;

&#259;

&#206;
(alternativ &Icirc;)

&#238;
(alternativ &icirc;)

&#350;

&#351;

&#354;

&#355;

"

L - 20

Tehnologii Web

Anexa 5 - Proprietile CSS2

Lista tuturor propriet!#ilor CSS - nivelul 2 poate fi urm!rit! mai jos:
Aplicat# la
(implicit: Mo!tenit#?
la toate)

Procentaje
(implicit:
N/A)

Nume

Valori

Valoare
ini"ial#

'azimuth'

<angle> | [[ left-side | far-left |

left | center-left | center |
center-right | right | far-right |
right-side ] || behind ] |
leftwards | rightwards | inherit

center

da

'background'

['background-color'
|| 'background-image'
|| 'background-repeat'
|| 'background-attachment'
|| 'background-position']
| inherit

XX

nu

'backgroundattachment'

scroll | fixed | inherit

scroll

nu

visual

'backgroundcolor'

<color> | transparent | inherit

transparent

nu

visual

'backgroundimage'

<uri> | none | inherit

none

nu

visual

'backgroundposition'

[ [<percentage> | <length>
]{1,2} | [ [top | center | bottom]
|| [left | center | right] ] ]
| inherit

0% 0%

'backgroundrepeat'

repeat | repeat-x | repeat-y | nurepeat | inherit

repeat

nu

visual

'border'

[ 'border-width' || 'border-style'
|| <color> ] | inherit

vezi
propriet!#ile
individuale

nu

visual

'border-collapse'

collapse | separate | inherit

collapse

da

visual

'border-color'

<color>{1,4} |
transparent | inherit

vezi
propriet!#ile
individuale

nu

visual

'border-spacing'

<length><length>? | inherit

da

visual

'border-style'

<border-style>{1,4} | inherit

vezi
propriet!#ile
individuale

nu

visual

'bordertop''borderright''borderbottom''borderleft'

[ 'border-top-width' || 'borderstyle' || <color> ] | inherit

vezi
propriet!#ile
individuale

nu

visual

L - 21

nivel bloc
sau
elemente
nlocuite

'table' "i
'inline-table'

'table' "i
'inline-table'

nu

Grupuri
de medii

aural

permis! la
'backgroundposition'

relativ! la
m!rimea
boxei

visual

visual

Tehnologii Web

'border-topcolor''borderrightcolor''borderbottomcolor''borderleft-color'

<color> | inherit

valoarea
propriet!#ii
'color'

nu

visual

'border-topstyle''borderrightstyle''borderbottomstyle''border-leftstyle'

<border-style> | inherit

none

nu

visual

'border-topwidth''borderrightwidth''borderbottomwidth''borderleft-width'

<border-width> | inherit

medium

nu

visual

'border-width'

<border-width>{1,4} | inherit

vezi
propriet!#ile
individuale

nu

visual

'bottom'

<length> | <percentage> | auto

| inherit

auto

elemente
pozi#ionate

nu

'caption-side'

top | bottom | left | right

| inherit

top

'tablecaption'

da

visual

'clear'

none | left | right | both

| inherit

none

elemente
bloc

nu

visual

'clip'

<shape> | auto | inherit

auto

elemente
bloc sau
nlocuite

nu

visual

'color'

<color> | inherit

depinde de
agentul
utilizator

da

visual

'content'

[ <string> | <uri> | <counter>

| attr(X) | open-quote | closequote | nu-open-quote | nuclose-quote ]+ | inherit

"irul vid

nu

toate

'counterincrement'

[ <identifier><integer>? ]+ |
none | inherit

none

nu

toate

'counter-reset'

[ <identifier><integer>? ]+ |
none | inherit

none

nu

toate

'cue'

[ 'cue-before' || 'cue-after' ]
| inherit

XX

nu

aural

'cue-after'

<uri> | none | inherit

none

nu

aural

'cue-before'

<uri> | none | inherit

none

nu

aural

'cursor'

[ [<uri> ,]* [ auto | crosshair |

default | pointer | move | eresize | ne-resize | nw-resize |
n-resize | se-resize | sw-resize |
s-resize | w-resize| text | wait |
help ] ] | inherit

auto

da

visual,
interactive

'direction'

ltr | rtl | inherit

ltr

da

visual

L - 22

pseudoelementele
:before "i
:after

toate

relativ! la
n!l#imea
blocului

visual

Tehnologii Web

'display'

inline | block | list-item | run-in

| compact | marker | table |
inline-table | table-row-group |
table-header-group | tablefooter-group | table-row | tablecolumn-group | table-column |
table-cell | table-caption | none
| inherit

inline

nu

toate

'elevation'

<angle> | below | level | above

| higher | lower | inherit

level

da

aural

'empty-cells'

show | hide | inherit

show

'table-cell'

da

visual

'float'

left | right | none | inherit

none

toate, f!r!
elementele
pozi#ionate

nu

visual

'font'

[ [ 'font-style' || 'font-variant'
|| 'font-weight' ]? 'font-size' [
/ 'line-height' ]? 'font-family' ] |
caption | icon | menu |
message-box | small-caption |
status-bar | inherit

vezi
propriet!#ile
individuale

da

'font-family'

[[ <family-name> | <genericfamily> ],]* [<family-name>

| <generic-family>] | inherit

depinde de
agentul
utilizator

da

'font-size'

<absolute-size> | <relativesize> | <length>

| <percentage> | inherit

medium

da, valoarea
calculat! e
mo"tenit!

'font-size-adjust'

<number> | none | inherit

none

da

visual

'font-stretch'

normal | wider | narrower |

ultra-condensed | extracondensed | condensed | semicondensed | semi-expanded |
expanded | extra-expanded |
ultra-expanded | inherit

normal

da

visual

'font-style'

normal | italic | oblique | inherit

normal

da

visual

'font-variant'

normal | small-caps | inherit

normal

da

visual

'font-weight'

normal | bold | bolder | lighter

| 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900 | inherit

normal

da

visual

'height'

<length> | <percentage> |
auto | inherit

auto

toate
elementele,
exceptnd
elementele
inline,
coloanele
de tabel "i
grupurile de
celule

'left'

<length> | <percentage> |
auto | inherit

auto

elementele
pozi#ionate

'letter-spacing'

normal | <length> | inherit

normal

da

'line-height'

normal | <number> | <length>

| <percentage> | inherit

normal

da

L - 23

permis la
'font-size' "i
'line-height'

visual

visual
relativ! la
m!rimea
fontului
elementelor
p!rinte

visual

nu

vezi
specificatia
CSS2

visual

nu

relativ! la
l!#imea
blocului

visual
visual

relativ! la
m!rimea
fontului

visual

Tehnologii Web

'list-style'

[ 'list-style-type' || 'list-styleposition' || 'list-style-image' ]

| inherit

XX

elemente cu
'display:
list-item'

da

visual

'list-style-image'

<uri> | none | inherit

none

elemente cu
'display:
list-item'

da

visual

'list-styleposition'

inside | outside | inherit

outside

elemente cu
'display:
list-item'

da

visual

'list-style-type'

disc | circle | square | decimal |

decimal-leading-zero | lowerroman | upper-roman | lowergreek | lower-alpha | lower-latin
| upper-alpha | upper-latin |
hebrew | armenian | georgian |
cjk-ideographic | hiragana |
katakana | hiragana-iroha |
katakana-iroha | none | inherit

disc

elemente cu
'display:
list-item'

da

visual

'margin'

<margin-width>{1,4} | inherit

XX

nu

relativ! la
l!#imea
blocului

visual

'margintop''marginright''marginbottom''marginleft'

<margin-width> | inherit

nu

relativ! la
l!#imea
blocului

visual

'marker-offset'

<length> | auto | inherit

auto

elemente cu
'display:
marker'

nu

visual

'marks'

[ crop || cross ] | none | inherit

none

contextul
paginii

N/A

visual,
paged

none

toate
elementele,
exceptnd
elementele
inline "i
elementele
tabel

nu

relativ la
n!l#imea
blocului

visual

none

toate
elementele,
exceptnd
elementele
inline "i
elementele
tabel

nu

relativ la
l!#imea
blocului

visual

toate
elementele,
exceptnd
elementele
inline "i
tabel

nu

relativ la
n!l#imea
blocului

visual

nu

relativ la
l!#imea
blocului

visual

da

'max-height'

'max-width'

'min-height'

<length> | <percentage> |
none | inherit

<length> | <percentage> |
none | inherit

<length> | <percentage>
| inherit

'min-width'

<length> | <percentage>
| inherit

dependent
de agentul
utilizator

toate
elementele
exceptnd
elementele
inline "i
tabel

'orphans'

<integer> | inherit

elemente
bloc

L - 24

visual,
paged

Tehnologii Web

'outline'

[ 'outline-color' || 'outline-style'
|| 'outline-width' ] | inherit

vezi
propriet!#ile
individuale

nu

visual,
interactive

'outline-color'

<color> | invert | inherit

invert

nu

visual,
interactive

'outline-style'

<border-style> | inherit

none

nu

visual,
interactive

'outline-width'

<border-width> | inherit

medium

nu

visual,
interactive

'overflow'

visible | hidden | scroll |

auto | inherit

visible

nu

visual

'padding'

<padding-width>{1,4} | inherit

XX

nu

relativ la
l!#imea
blocului

visual

'paddingtop''paddingright''paddingbottom''paddingleft'

<padding-width> | inherit

nu

relativ la
l!#imea
blocului

visual

'page'

<identifier> | auto

auto

elemente de
tip bloc

da

visual,
paged

'page-breakafter'

auto | always | avoid |

left | right | inherit

auto

elemente de
tip bloc

nu

visual,
paged

'page-breakbefore'

auto | always | avoid |

left | right | inherit

auto

elemente de
tip bloc

nu

visual,
paged

'page-breakinside'

avoid | auto | inherit

auto

elemente de
tip bloc

da

visual,
paged

'pause'

[ [<time> |
<percentage>]{1,2} ] | inherit

depinde de
agentul
utilizator

nu

vezi 'pausebefore' "i

'pause-after'

aural

'pause-after'

<time> | <percentage> | inherit

depinde de
agentul
utilizator

nu

vezi
specifica#iile
CSS2

aural

'pause-before'

<time> | <percentage> | inherit

depinde de
agentul
utilizator

nu

vezi
specifica#iile
CSS2

aural

'pitch'

<frequency> | x-low | low |

medium | high | x-high | inherit

medium

da

aural

'pitch-range'

<number> | inherit

50

da

aural

'play-during'

<uri> mix? repeat? | auto |

none | inherit

auto

nu

aural

nu

visual

elemente
bloc "i
nlocuite

toate
elementele,
f!r!
elementele
cu con#inut
generat

'position'

static | relative | absolute |

fixed | inherit

static

'quotes'

[<string><string>]+ |
none | inherit

depinde de
agentul
utilizator

da

visual

'richness'

<number> | inherit

50

da

aural

L - 25

Tehnologii Web

relativ la
l!#imea
blocului

'right'

<length> | <percentage> |
auto | inherit

auto

elemente
pozi#ionate

nu

'size'

<length>{1,2} | auto |
portrait | landscape | inherit

auto

contextul
paginii

N/A

visual,
paged

'speak'

normal | none |
spell-out | inherit

normal

da

aural

da

aural

elemente
care au
antet de
tabel

visual

'speak-header'

once | always | inherit

once

'speak-numeral'

digits | continuous | inherit

continuous

da

aural

'speakpunctuation'

code | none | inherit

none

da

aural

'speech-rate'

<number> | x-slow | slow |

medium | fast | x-fast | faster |
slower | inherit

medium

da

aural

'stress'

<number> | inherit

50

da

aural

'table-layout'

auto | fixed | inherit

auto

'table' "i
'inline-table'

nu

visual

'text-align'

left | right | center | justify

| <string> | inherit

depinde de
agentul
utilizator "i
de direc#ia
de scriere

elemente de
tip bloc

da

visual

'text-decoration'

none | [ underline || overline ||

line-through || blink ] | inherit

none

nu (vezi
specifica#iile
CSS2)

visual

'text-indent'

<length> | <percentage>
| inherit

'text-shadow'

none | [<color>
|| <length><length><length>?
,]* [<color>
|| <length><length><length>?]
| inherit

none

nu (vezi
specifica#iile
CSS2)

visual

'text-transform'

capitalize | uppercase |
lowercase | none | inherit

none

da

visual

'top'

<length> | <percentage> |
auto | inherit

auto

elemente
pozi#ionate

nu

normal

toate
elementele,
vezi "i
specifica#iile
CSS2

nu

inline-level
"i 'table-cell'

'unicode-bidi'

normal | embed |
bidi-override | inherit

'vertical-align'

baseline | sub | super | top |

text-top | middle | bottom |
text-bottom | <percentage>
| <length> | inherit

baseline

'visibility'

visible | hidden |
collapse | inherit

inherit

L - 26

elemente de
tip bloc

da

nu

nu

relativ la
l!#imea
blocului

relativ la
n!l#imea
blocului

visual

visual

visual

relativ la
proprietatea
'line-height'
a
elementului

visual

visual

Tehnologii Web

'voice-family'

[[<specific-voice> | <genericvoice> ],]* [<specific-voice>

| <generic-voice> ] | inherit

depinde de
agentul
utilizator

da

'volume'

<number> | <percentage> |
silent | x-soft | soft | medium |
loud | x-loud | inherit

medium

da

'white-space'

normal | pre | nowrap | inherit

normal

elemente de
tip bloc

da

visual

'widows'

<integer> | inherit

elemente de
tip bloc

da

visual,
paged

toate
elementele,
f!r!
elemente
inline,
rnduri de
tabel "i
grupuri de
rnduri

nu

'width'

<length> | <percentage> |
auto | inherit

auto

'word-spacing'

normal | <length> | inherit

normal

'z-index'

auto | <integer> | inherit

auto

L - 27

elemente
pozi#ionate

aural
relativ la
valoarea
mo"tenit!

relativ la
l!#imea
blocului

aural

visual

da

visual

nu

visual

Tehnologii Web

Anexa 6 - Aplicaii i
unelte de dezvoltare XML
Cu toate c! familia de limbaje XML este o apari#ie recent! n lumea tehnologiei
informa#iei, deja exist! o sumedenie de aplica#ii "i utilitare pentru prelucrarea, formatarea "i
convertirea documentelor XML. Prezent!m o parte dintre ele (majoritatea disponibile
gratuit) n continuare:
$. Editoare XML

CLIP! XML Editor

http://www.t2000-usa.com/product/clip_index.html - mediu grafic pentru

editarea comod! a documentelor XML, cu facilit!#i de verificare a validit!#ii lor;

Visual XML

http://www.pierlou.com/visxml/ - editor vizual gratuit pentru crearea "i

prelucrarea documentelor XML "i a DTD-urilor asociate;

Xeena

http://www-4.ibm.com/software/developer/library/xeenatech.html
aplica#ie Java gratuit! destinat! edit!rii de documente XML derivate din orice
DTD;

XML Spy

http://www.xmlspy.com/ - editor "i vizualizator structurat al documentelor

XML, disponibil pentru Windows;

Xpose

http://www.intravenous.com/statics/main/xpose.html - utilitar independent

de platform! pentru editarea documentelor XML;

xmlTool

http://xmltool.tripod.com/xmltool/xtshort.htm - utilitar pentru editarea "i

prelucrarea fi"ierelor XML, scris n Visual Basic.

2. Procesoare XML

expat

http://expat.sourceforge.net/ - procesorul XML cel mai cunoscut, scris n

limbajul C, disponibil gratuit;

XML4C

http://www.alphaworks.ibm.com/tech/xml4c - procesor gratuit

documente XML conceput n C++, oferind suport pentru DOM "i SAX;

XP

http://www.jclark.com/xml/xp - procesor Java pentru documentele XML;

L - 28

de

Tehnologii Web

SAX 2

http://www.megginson.com/SAX/ - procesor de documente XML folosind

specifica#ia SAX;

Xml2Beans

http://www.c-lab.de/~robbie/XML2Beans/index.html - convertor Java

gratuit care proceseaz! documentele XML "i genereaz! componente JavaBeans
conform structurii DTD-ului aferent unui document XML;

SAXON

http://users.iclway.co.uk/mhkay/saxon/index.html
colec#ie
open-source de utilitare Java pentru prelucrarea documentelor XML (procesor XSLT,
XPath, avnd numeroase extensii);

TclXT

http://www.zveno.com/zm.cgi/in-tclxml/in-xsl.html - interfa#! scris! n

Tcl/Tk pentru procesorul XSL al lui James Clark;

XTL

http://www.vivid-creations.com/xtl.htm - aplica#ii "i componente C++

optimizate pentru procesarea performant! a documentelor XML, oferind suport
pentru programatorii COM;

HaXml

http://www.cs.york.ac.uk/fp/HaXml/ - suit! de utilitare concepute n

limbajul Haskell pentru realizarea de aplica#ii XML n acest limbaj;

Perl Libxml

http://bitsko.slc.ut.us/libxml-perl/ - colec#ie de module Perl pentru

procesarea documentelor XML via SAX 1.0;

XML::Parser

http://wwwx.netheaven.com/~coopercc/xmlparser/intro.html - ex-tensie
Perl pentru procesorul Expat al lui James Clark;

XML::DOM

http://www.erols.com/enno/dom/DOM.html - modul Perl implementnd

modelul DOM - nivelul 1;

XML::XQL

http://www.erols.com/enno/xql/ - modul Perl pentru formularea de

interog!ri XQL asupra arborilor DOM asocia#i documentelor XML;

4suite

http://fourthought.com/4Suite/ - suit! de aplica#ii pentru procesarea avansat!

a documentelor XML n limbajul Python;

MDSAX (Multi-Document Simple API for XML)

http://www.jxml.com/mdsax/index.html - set de utilitare pentru organizarea

"i realizarea de proces!ri SAX complexe asupra documentelor XML, oferind
suport pentru XLink, XSLT "i spa#ii de nume;

L - 29

Tehnologii Web

XAF (XML Architectural Forms)

http://www.megginson.com/XAF/index.html - procesor Java pentru

documentele XML, comportndu-se att ca analizor SAX, ct "i ca
aplica#ie SAX;

xmlFX

http://www.swdi.com/products.htm - bibliotec! de clase C++ pentru

procesarea documentelor XML;

SAX ActiveX Control

http://www.vivid-creations.com/sax/index.htm - control ActiveX care poate

fi folosit la procesarea documentelor XML;

Microsoft XML Parser

http://msdn.microsoft.com/downloads/webtechnology/xml/
msxml.asp - procesor XML distribuit gratuit ca o component! COM, suportnd
DOM, spa#ii de nume, XML Schema "i interog!ri;

Lark

http://www.textuality.com/Lark
specifica#iilor XML 1.0;

procesor

dezvoltat

pentru

testarea

GNOME XML Library

http://xmlsoft.org/ - bibliotec! C pentru procesarea avansat! a documentelor

XML, furniznd suport pentru DOM "i SAX (parte a proiectului GNOME);

Xerces

http://xml.apache.org/ - procesor XML pentru DOM - nivelele 1 "i 2, SAX,

XML
Schema,
disponibil
n
limbajele
C++,
Java,
Perl
(parte a proiectului Apache XML);

DTD Parser

http://www.wutka.com/dtdparser.html - analizor DTD, elaborat n limbajul

Java.

3. Vizualizatoare (browsere) XML

Mozilla

http://www.mozilla.org/ - vizualizeaz! documente XML, suportnd spa#iile de

nume "i formatarea elementelor XML prin intermediul CSS; Netscape 6 se bazeaz!
pe sursele de la Mozilla;

Internet Explorer

http://www.microsoft.com/ie/ - vizualizeaz! documente XML, oferind suport

pentru
spa#ii
de
nume,
XSL
(o
versiune
mai
veche),
VML (Vector Markup Language);

DocZilla

http://www.doczilla.com/ - browser Web oferind suport pentru vizualizarea

documentelor SGML, XML, HyTime "i HTML;

L - 30

Tehnologii Web

InDelv

http://www.indelv.com/client.htm - vizualizator de documente XML "i XSL

conceput n Java;

Xplorer

http://www.alphaworks.ibm.com/tech/xplorer - vizualizator "i validator al

documentelor XML, scris n limbajul Java;

Jumbo

http://www.xml-cml.org/jumbo/ - vizualizator de documente XML "i CML

(Chemical Markup Language), conceput n Java;

Fancy XML Tree Viewer

http://www.skew.org/xml/ - utilitar pentru vizualizarea arborescent! a

documentelor XML;

eXeMeL

http://www.dcs.warwick.ac.uk/~eswdd/index.html - vizualizator gratuit de

fi"iere XML;

Opera

http://www.opera.com/index.html - ncepnd cu versiunea 4.02 suport!, ntro faz! incipient!, XML.

4. Unelte de convertire XML

XML-DBMS

http://www.informatik.tu-darmstadt.de/DVS$/staff/bourret/xmldbms/ set de pachete Java sau module Perl folosit pentru transferul de date ntre sistemele
de gestiune a bazelor de date "i documentele XML;

XML Translator Generator (XTransGen)

http://www.alphaworks.ibm.com/tech/xmltranslatorgenerator - generator
Java automat de translatoare a documentelor XML bazate pe un anumit DTD n
documente XML conforme cu alte DTD-uri;

Some2XML

http://www.pault.com/Xmltube/some2xml.html
convertirea fi"ierelor text n documente XML;

script

Perl

pentru

XMLTRANS

http://www.xmlsoftware.com/convert/ - convertor Java din XML n mai

multe formate structurate (HTML, LaTeX);

Tidy

http://www.w3.org/People/Raggett/tidy/ - program C gratuit pentru

testarea documentelor HTML "i transformarea lor n documente conforme
standardului XHTML (ruleaz! sub UNIX/Linux "i Windows);

L - 31

Tehnologii Web

XTAL

http://www.zeigermann.de/xtal.html - utilitar de convertire a datelor ntr-o

varietate de formate (SGML, XML, RTF, PDF, PS);

XMLServlet

http://209.$96.47.$4$/jackBeans/XMLServlet.html - servlet Java pentru

convertirea documentelor XML n documente HTML;

Majix

http://www.tetrasix.com/english/majix.htm - utilitar gratuit pentru

convertirea fi"ierelor RTF n documente XML, disponibil pentru medii Windows;

Ace Scripting Language

http://ace.mds.rmit.edu.au/ - limbaj script pentru prelucrarea fi"ierelor SGML

"i XML;

XML::Writer

http://www.megginson.com/Software/index.html - modul Perl pentru

generarea de documente XML, oferind suport "i pentru spa#ii
de nume;

XMLZip

http://www.xmlzip.com/products/xmlzip.html - utilitar pentru compresia

documentelor XML;

XMill

http://www.research.att.com/sw/tools/xmill/ - arhivator de fi"iere XML

conceput n C++ pentru Linux "i Windows.

5. Unelte de dezvoltare XML Schema

XML Schema Processor

http://technet.oracle.com/tech/xml/schema_java/index.htm - pro-cesor
Java pentru schemele XML.

6. Utilitare !i procesoare pentru XSL

XML Styler

http://www.arbortext.com/XML_Styler/xml_styler.html
ArborText gratuit! pentru crearea "i modificarea documentelor XSL;

aplica#ie

XSL Editor

http://www.alphaworks.ibm.com/tech/xsleditor - editor Java pentru foile de

stiluri XSL;

Stylus

http://www.exceloncorp.com/products/excelon_stylus.html
integrat de dezvoltare a site-urilor Web folosind XSL;

L - 32

mediu

Tehnologii Web

XML Style Wizard

http://www.infoteria.com/en/contents/download/ - program gratuit pentru

Windows care permite generarea de fi"iere XSLT;

XSpLit

http://www.percussion.com/xmlzone/technology.htm - program gratuit

pentru Windows care divide documentele HTML n fi"iere XML (incluznd DTD)
"i foi de stiluri XSL;

<xsl>Composer

http://www.whitehill.com/products/prod4.html - editor vizual pentru

documentele XSL;

Unicorn XSLT Processor

http://www.unicorn-enterprises.com/#products_uxsl - mediu conceput n

C++ pentru conceperea de foi de stiluri "i obiecte de formatare bazate pe XSL;

XSLTmark

http://www.datapower.com/products.shtml - aplica#ie Java pentru testarea

transform!rilor XSLT;

XEP

http://www.renderx.com/FO2PDF.html - utilitar care converte"te obiectele

de formatare XSL n fi"iere PDF sau PostScript;

XML::XSLT

http://xmlxslt.sourceforge.net/ - analizor
implementnd par#ial recomandarea XSLT;

XSLT

conceput

Perl,

XT

http://www.jclark.com/xml/xt.html - analizor de documente XSL;

Koala XSL Engine

http://www.inria.fr/koala/XML/xslProcessor - procesor XSL scris n Java,

bazat pe SAX "i DOM, incluznd un utilitar de generare automat! de slide-uri;

Xalan

http://xml.apache.org/xalan-j/index.html - procesor de foi de stiluri XSL,

conform cu recomand!rile XSLT "i XPath, are implement!ri n Java "i C++ (parte
a proiectului Apache XML);

xesalt

http://www.inlogix.de/products.html - procesor XSL oferit ca modul pentru

serverele Web (Apache "i IIS) sau ca plug-in pentru Netscape, incluznd suport
experimental pentru limbajele XInclude "i XBase.

7. Utilitare pentru XLink/XPointer

Link

http://pages.wooster.edu/ludwigj/xml/index.html - vizualizator Java de

documente XLink, permi#nd explorarea leg!turilor extinse "i simple;

L - 33

Tehnologii Web

Parser for XPointer

http://www.loria.fr/~bonhomme/XPointer/ - analizor pentru limbajul

XPointer, scris n Java;

PyPointers

http://www.stud.ifi.uio.no/~larsga/download/python/xml/
xptr.html - implementare Python gratuit! a unui analizor XPointer;

X2X

http://www.stepuk.com/x2xdocs/x2xdocs.html - aplica#ie pentru crearea "i

organizarea hiper-leg!turilor descrise n XLink;

xlinkit.com

http://www.xlinkit.com/ - servlet folosit pentru verificarea consisten#ei

leg!turilor stabilite ntre documentele distribuite pe Web.

8. Utilitare pentru RDF

Mozilla

http://www.mozilla.org - vizualizator de fi"iere RDF;

Rapier RDF Parser

http://www.redland.opensource.ac.uk/rapier/
conceput n limbajul C;

analizor

RDF/XML

Reggie

http://metadata.net/dstc/ - aplica#ie Java pentru crearea documentelor

con#innd metadate;

DC-Dot

http://www.ukoln.ac.uk/ - utilitar de editare a metadatelor conform

specifica#iei Dublin Core Initiative;

InterDataWorking

http://www.interdataworking.com/converter/ - convertor de informa#ii

stocate n diferite formate (RDF/XML, UML, DAML, RDF Schema);

Protg-2000

http://smi-web.stanford.edu/projects/protege/protege-2000/
grafic pentru scrierea de documente RDF "i scheme RDF;

edi-tor

RDF For XML

http://www.alphaworks.ibm.com/formula/rdfxml - mediu de dez-voltare a

aplica#iilor RDF;

RDFStore Perl API for RDF Storage

http://xml.jrc.it/RDFStore/ - module Perl pentru procesarea bazelor de date

RDF;

SiRPAC

http://www.w3.org/RDF/Implementations/SiRPAC/ - servlet Java pentru

vizualizarea "i studierea documentelor RDF.

L - 34

Tehnologii Web

Anexa 7 - Nodurile VRML97

Prezent!m n continuare cmpurile "i evenimentele tuturor nodurilor permise de
specifica#ia VRML97.
Anchor
Anchor {
eventIn
eventIn
exposedField
exposedField
exposedField
exposedField
field
field
}

MFNode
MFNode
MFNode
SFString
MFString
MFString
SFVec3f
SFVec3f

addChildren
removeChildren
children
description
parameter
url
bboxCenter
bboxSize

[]
""
[]
[]
0 0 0
-1 -1 -1

SFNode
SFNode
SFNode

material
texture
textureTransform

NULL
NULL
NULL

SFString
SFBool
SFFloat
SFTime
SFTime
MFString
SFTime
SFBool

description
loop
pitch
startTime
stopTime
url
duration_changed
isActive

""
FALSE
1.0
0
0
[]

SFBool
MFFloat
MFColor
MFString
MFString
MFString
MFString
MFString
MFString

set_bind
groundAngle
groundColor
backUrl
bottomUrl
frontUrl
leftUrl
rightUrl
topUrl

Appearance
Appearance {
exposedField
exposedField
exposedField
}

AudioClip
AudioClip {
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
eventOut
eventOut
}

Background
Background {
eventIn
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField

L - 35

[]
[]
[]
[]
[]
[]
[]
[]

Tehnologii Web

exposedField
exposedField
eventOut

MFFloat
MFColor
SFBool

skyAngle
skyColor
isBound

[]
[0 0 0]

MFNode
MFNode
SFVec3f
MFNode
SFVec3f
SFVec3f

addChildren
removeChildren
axisOfRotation
children
bboxCenter
bboxSize

0 1 0
[]
0 0 0
-1 -1 -1

SFVec3f

size

2 2 2

MFNode
MFNode
MFNode
SFBool
SFVec3f
SFVec3f
SFNode
SFTime

addChildren
removeChildren
children
collide
bboxCenter
bboxSize
proxy
collideTime

MFColor

color

[]

set_fraction
key
keyValue
value_changed

[]
[]

Billboard
Billboard {
eventIn
eventIn
exposedField
exposedField
field
field
}

Box
Box {
field
}

Collision
Collision {
eventIn
eventIn
exposedField
exposedField
field
field
field
eventOut
}

[]
TRUE
0 0 0
-1 -1 -1
NULL

Color
Color {
exposedField
}

ColorInterpolator
ColorInterpolator
eventIn
exposedField
exposedField
eventOut
}

{
SFFloat
MFFloat
MFFloat
SFFloat

L - 36

Tehnologii Web

Cone
Cone {
field
field
field
field
}

SFBool
SFFloat
SFFloat
SFBool

bottom
bottomRadius
height
side

TRUE
1
2
TRUE

MFVec3f

point

[]

set_fraction
key
keyValue
value_changed

[]
[]

bottom
height
radius
side
top

TRUE
2
1
TRUE
TRUE

Coordinate
Coordinate {
exposedField
}

CoordinateInterpolator
CoordinateInterpolator {
eventIn
SFFloat
exposedField
MFFloat
exposedField
MFVec3f
eventOut
MFVec3f
}

Cylinder
Cylinder {
field
field
field
field
field
}

SFBool
SFFloat
SFFloat
SFBool
SFBool

CylinderSensor
CylinderSensor {
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
eventOut
eventOut
eventOut
}

SFBool
SFFloat
SFBool
SFFloat
SFFloat
SFFloat
SFBool
SFRotation
SFVec3f

autoOffset
TRUE
diskAngle
0.262
enabled
TRUE
maxAngle
-1
minAngle
0
offset
0
isActive
rotation_changed
trackPoint_changed

DirectionalLight
DirectionalLight {
exposedField
SFFloat
exposedField
SFColor

ambientIntensity
color

L - 37

0
1 1 1

Tehnologii Web

exposedField
exposedField
exposedField

SFVec3f
SFFloat
SFBool

direction
intensity
on

0 0 -1
1
TRUE

MFFloat
SFNode
SFNode
SFNode
MFFloat
SFBool
SFBool
SFFloat
SFBool
SFBool
SFInt32
SFFloat
SFInt32
SFInt32

set_height
color
normal
texCoord
height
ccw
colorPerVertex
creaseAngle
normalPerVertex
solid
xDimension
xSpacing
zDimension
zSpacing

NULL
NULL
NULL
[]
TRUE
TRUE
0
TRUE
TRUE
0
0.0
0
0.0

Extrusion {
eventIn
eventIn
eventIn
eventIn
field
field
field
field
field

MFVec3f
MFRotation
MFVec2f
MFVec3f
SFBool
SFBool
SFBool
SFFloat
MFVec2f

set_crossSection
set_orientation
set_scale
set_spine
beginCap
ccw
convex
creaseAngle
crossSection

field
field
field
field
field

SFBool
MFRotation
MFVec2f
SFBool
MFVec3f

endCap
orientation
scale
solid
spine

SFBool
SFColor
SFString
SFFloat
SFBool

set_bind
color
fogType
visibilityRange
isBound

ElevationGrid
ElevationGrid {
eventIn
exposedField
exposedField
exposedField
field
field
field
field
field
field
field
field
field
field
}

Extrusion

TRUE
TRUE
TRUE
0
[1 1, 1 -1,
-1 -1, -1 1, 1 1]
TRUE
0 0 1 0
1 1
TRUE
[0 0 0, 0 1 0]

Fog
Fog {
eventIn
exposedField
exposedField
exposedField
eventOut

L - 38

1 1 1
"LINEAR"
0

Tehnologii Web

FontStyle
FontStyle {
field
field
field
field
field
field
field
field
field
}

MFString
SFBool
MFString
SFString
SFBool
SFFloat
SFFloat
SFString
SFBool

family
horizontal
justify
language
leftToRight
size
spacing
style
topToBottom

"SERIF"
TRUE
"BEGIN"
""
TRUE
1.0
1.0
"PLAIN"
TRUE

MFNode
MFNode
MFNode
SFVec3f
SFVec3f

addChildren
removeChildren
children
bboxCenter
bboxSize

[]
0 0 0
-1 -1 -1

MFString
SFBool
SFBool

url
repeatS
repeatT

[]
TRUE
TRUE

set_colorIndex
set_coordIndex
set_normalIndex
set_texCoordIndex
color
coord
normal
texCoord
ccw
colorIndex
colorPerVertex
convex
coordIndex
creaseAngle
normalIndex
normalPerVertex
solid
texCoordIndex

NULL
NULL
NULL
NULL
TRUE
[]
TRUE
TRUE
[]
0
[]
TRUE
TRUE
[]

Group
Group {
eventIn
eventIn
exposedField
field
field
}

ImageTexture
ImageTexture {
exposedField
field
field
}

IndexedFaceSet
IndexedFaceSet {
eventIn
eventIn
eventIn
eventIn
exposedField
exposedField
exposedField
exposedField
field
field
field
field
field
field
field
field
field
field
}

MFInt32
MFInt32
MFInt32
MFInt32
SFNode
SFNode
SFNode
SFNode
SFBool
MFInt32
SFBool
SFBool
MFInt32
SFFloat
MFInt32
SFBool
SFBool
MFInt32

L - 39

Tehnologii Web

IndexedLineSet
IndexedLineSet {
eventIn
eventIn
exposedField
exposedField
field
field
field
}

MFInt32
MFInt32
SFNode
SFNode
MFInt32
SFBool
MFInt32

set_colorIndex
set_coordIndex
color
coord
colorIndex
colorPerVertex
coordIndex

NULL
NULL
[]
TRUE
[]

MFString
SFVec3f
SFVec3f

url
bboxCenter
bboxSize

[]
0 0 0
-1 -1 -1

MFNode
SFVec3f
MFFloat

level
center
range

[]
0 0 0
[]

SFFloat
SFColor
SFColor
SFFloat
SFColor
SFFloat

ambientIntensity
diffuseColor
emissiveColor
shininess
specularColor
transparency

0.2
0.8 0.8 0.8
0 0 0
0.2
0 0 0
0

SFBool
SFFloat
SFTime
SFTime
MFString
SFBool
SFBool
SFTime
SFBool

loop
speed
startTime
stopTime
url
repeatS
repeatT
duration_changed
isActive

FALSE
1
0
0
[]
TRUE
TRUE

Inline
Inline {
exposedField
field
field
}

LOD
LOD {
exposedField
field
field
}

Material
Material {
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
}

MovieTexture
MovieTexture {
exposedField
exposedField
exposedField
exposedField
exposedField
field
field
eventOut
eventOut
}

L - 40

Tehnologii Web

NavigationInfo
NavigationInfo {
eventIn
exposedField
exposedField
exposedField
exposedField
exposedField
eventOut
}

SFBool
MFFloat
SFBool
SFFloat
MFString
SFFloat
SFBool

set_bind
avatarSize
headlight
speed
type
visibilityLimit
isBound

[0.25, 1.6, 0.75]

TRUE
1.0
"WALK"
0.0

MFVec3f

vector

[]

set_fraction
key
keyValue
value_changed

[]
[]

set_fraction
key
keyValue
value_changed

[]
[]

SFImage
SFBool
SFBool

image
repeatS
repeatT

0 0 0
TRUE
TRUE

SFBool
SFBool
SFVec2f
SFVec2f
SFVec3f

autoOffset
enabled
maxPosition
minPosition
offset

TRUE
TRUE
-1 -1
0 0
0 0 0

Normal
Normal {
exposedField
}

NormalInterpolator
NormalInterpolator {
eventIn
SFFloat
exposedField
MFFloat
exposedField
MFVec3f
eventOut
MFVec3f
}

OrientationInterpolator
OrientationInterpolator {
eventIn
SFFloat
exposedField
MFFloat
exposedField
MFRotation
eventOut
SFRotation
}

PixelTexture
PixelTexture {
exposedField
field
field
}

PlaneSensor
PlaneSensor {
exposedField
exposedField
exposedField
exposedField
exposedField

L - 41

Tehnologii Web

eventOut
eventOut
eventOut

SFBool
SFVec3f
SFVec3f

isActive
trackPoint_changed
translation_changed

SFFloat
SFVec3f
SFColor
SFFloat
SFVec3f
SFBool
SFFloat

ambientIntensity
attenuation
color
intensity
location
on
radius

0
1 0 0
1 1 1
1
0 0 0
TRUE
100

SFNode
SFNode

color
coord

NULL
NULL

set_fraction
key
keyValue
value_changed

[]
[]

PointLight
PointLight {
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
}

PointSet
PointSet {
exposedField
exposedField
}

PositionInterpolator
PositionInterpolator {
eventIn
SFFloat
exposedField
MFFloat
exposedField
MFVec3f
eventOut
SFVec3f
}

ProximitySensor
ProximitySensor {
exposedField
SFVec3f
exposedField
SFVec3f
exposedField
SFBool
eventOut
SFBool
eventOut
SFVec3f
eventOut
SFRotation
eventOut
SFTime
eventOut
SFTime
}

center
0 0 0
size
0 0 0
enabled
TRUE
isActive
position_changed
orientation_changed
enterTime
exitTime

ScalarInterpolator
ScalarInterpolator {
eventIn
SFFloat
exposedField
MFFloat
exposedField
MFFloat
eventOut
SFFloat
}

set_fraction
key
keyValue
value_changed

L - 42

[]
[]

Tehnologii Web

Script
Script {
exposedField
field
field

MFString
SFBool
SFBool

url
directOutput
mustEvaluate

Also, any number of the following:

eventIn
Type
eventInName
field
Type
fieldName
eventOut
Type
eventOutName

[]
FALSE
FALSE

default value

Shape
Shape {
exposedField
exposedField
}

SFNode
SFNode

appearance
geometry

NULL
NULL

SFVec3f
SFFloat
SFVec3f
SFFloat
SFFloat
SFFloat
SFFloat
SFFloat
SFNode
SFBool

direction
intensity
location
maxBack
maxFront
minBack
minFront
priority
source
spatialize

0 0 1
1
0 0 0
10
10
1
1
0
NULL
TRUE

SFFloat

radius

SFBool
SFBool
SFRotation
SFBool
SFRotation
SFVec3f

autoOffset
TRUE
enabled
TRUE
offset
0 1 0 0
isActive
rotation_changed
trackPoint_changed

Sound
Sound {
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
field
}

Sphere
Sphere {
field
}

SphereSensor
SphereSensor {
exposedField
exposedField
exposedField
eventOut
eventOut
eventOut
}

L - 43

Tehnologii Web

SpotLight
SpotLight {
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
}

SFFloat
SFVec3f
SFFloat
SFColor
SFFloat
SFVec3f
SFFloat
SFVec3f
SFBool
SFFloat

ambientIntensity
attenuation
beamWidth
color
cutOffAngle
direction
intensity
location
on
radius

0
1 0 0
1.570796
1 1 1
0.785398
0 0 -1
1
0 0 0
TRUE
100

MFNode
SFInt32

choice
whichChoice

[]
-1

MFString
SFNode
MFFloat
SFFloat

string
fontStyle
length
maxExtent

[]
NULL
[]
0.0

point

[]

center
rotation
scale
translation

0 0
0
1 1
0 0

cycleInterval
enabled
loop

1
TRUE
FALSE

Switch
Switch {
exposedField
exposedField
}

Text
Text {
exposedField
exposedField
exposedField
exposedField
}

TextureCoordinate
TextureCoordinate {
exposedField
MFVec2f
}

TextureTransform
TextureTransform {
exposedField
SFVec2f
exposedField
SFFloat
exposedField
SFVec2f
exposedField
SFVec2f
}

TimeSensor
TimeSensor {
exposedField
exposedField
exposedField

SFTime
SFBool
SFBool

L - 44

Tehnologii Web

exposedField
exposedField
eventOut
eventOut
eventOut
eventOut

SFTime
SFTime
SFTime
SFFloat
SFBool
SFTime

startTime
stopTime
cycleTime
fraction_changed
isActive
time

0
0

SFBool
SFVec3f
SFVec3f
SFVec2f
SFBool
SFBool
SFTime

enabled
TRUE
hitNormal_changed
hitPoint_changed
hitTexCoord_changed
isActive
isOver
touchTime

MFNode
MFNode
SFVec3f
MFNode
SFRotation
SFVec3f
SFRotation
SFVec3f
SFVec3f
SFVec3f

addChildren
removeChildren
center
children
rotation
scale
scaleOrientation
translation
bboxCenter
bboxSize

SFBool
SFFloat
SFBool
SFRotation
SFVec3f
SFString
SFTime
SFBool

set_bind
fieldOfView
jump
orientation
position
description
bindTime
isBound

TouchSensor
TouchSensor {
exposedField
eventOut
eventOut
eventOut
eventOut
eventOut
eventOut
}

Transform
Transform {
eventIn
eventIn
exposedField
exposedField
exposedField
exposedField
exposedField
exposedField
field
field
}

0 0 0
[]
0 0 1 0
1 1 1
0 0 1 0
0 0 0
0 0 0
-1 -1 -1

Viewpoint
Viewpoint {
eventIn
exposedField
exposedField
exposedField
exposedField
field
eventOut
eventOut
}

0.785398
TRUE
0 0 1 0
0 0 10
""

VisibilitySensor
VisibilitySensor {
exposedField
SFVec3f
exposedField
SFBool
exposedField
SFVec3f

center
enabled
size

L - 45

0 0 0
TRUE
0 0 0

Tehnologii Web

eventOut
eventOut
eventOut

SFTime
SFTime
SFBool

enterTime
exitTime
isActive

MFString
SFString

info
title

WorldInfo
WorldInfo {
field
field
}

L - 46

[]
""

Tehnologii Web

"Toate erau laolalt#; dup# aceea a venit mintea !i le-a pus n ordine."
(Anaxagoras)

Tehnologii Web

Adnotare
Leg!tura unui nod de comentare la un nod obi"nuit. Autorii documentelor
pot adnota nodurile folosind diverse marcaje (e.g. TEI = Text Encoding Initiative). Sinonim cu
marcare sau tagging. Pentru adnotarea documentelor Web se folose"te limbajul de adnotare
(marcare) HTML (HyperText Markup Language) sau, mai nou, XML (Extensible Markup
Language).
Agent-utilizator
Clientul (navigator, editor, robot de traversare Web) care ini#iaz! o cerere trimis! unui server
WWW. Navigatoarele cele mai cunoscute sunt Netscape Navigator, Internet Explorer, Opera,
Arena, Mosaic (toate opernd n mod grafic), Lynx "i Links (rulnd n mod text), n general
fiind disponibile pentru mai multe platforme (software "i hardware). Vezi "i browser.
Ancor#
Arie n cadrul con#inutului unui nod care este surs! sau destina#ie a unei leg!turi. Ancora
poate reprezenta ntregul con#inut al unui nod. Tipic, f!cnd click pe o ancor! va fi urmat!
leg!tura ce o reprezint!. Ancorele sunt intensificate ntr-un mod anumit sau sunt reprezentate
de un simbol special n cadrul documentului hipertext.
Applet
Program Java care ruleaz! n cadrul unui browser, fiind lansat dintr-o pagin! Web.
Ascuns
Element al unui formular electronic care nu este afi"at de navigator. Elementele ascunse
pot fi utilizate pentru trimiterea de informa#ii suplimentare serverului Web, fiind folosite "i de
cookie-uri.
Un
element
ascuns
se
declar!
prin
construc#ia
HTML
<input type="hidden" name="..." value="...">.
Atribut
O surs! de informa#ie suplimentar! despre un element. Valorile atributului pot fi fixate n
cadrul defini#iei tipului de document (DTD) sau pot fi specificate prin construc#ia
atribut = valoare n tag-ul de nceput al unui element.
Avatar
Reprezentare abstract! a unui utilizator al unei lumi VRML. Dimensiunile fizice ale unui
avatar sunt folosite pentru detectarea coliziunilor "i interac#iunii cu mediul.
Autentificare
Ac#iunea de determinare a faptului dac! un utilizator are permisiunea s! acceseze
o resurs! sau s! execute o opera#ie. Autentificarea de cele mai multe ori se realizeaz! prin
intermediul unei parole.

M-2

Tehnologii Web

Authoring
Termen pentru procesul de marcare, concepere "i publicare a unui document sau prezent!ri
multimedia. Exist! diferite sisteme specializate de editare "i publicare pe Web a prezent!rilor
multimedia (de exemplu: Microsoft FrontPage, Macromedia Dreamweaver, Macromedia Flash, Adobe
GoLive!, GRiNS, Real System G2 etc.), respectnd diverse paradigme.
Baz# de date
Termen desemnnd vag n contextul hipermedia o colec#ie de noduri "i modalit!#i de
organizare a informa#iilor corespunz!toare lor.
Browser
Program care permite unei persoane s! citeasc! "i s! parcurg! hipertextul, vizualiznd
con#inutul nodurilor "i navignd din nod n nod (termenul de browser se reg!se"te "i ca
navigator, agent-utilizator, client Web).
Buton
Este o ancor! care reprezint! sursa unei leg!turi. De cele mai multe ori, se figureaz! pe cran
ca un buton.
Card
Fi"!, termen alternativ pentru un nod n cadrul unui sistem (e.g. HyperCards, Notecards)
n care m!rimea nodului este limitat! la o singur! pagin! de capacitate fix!.
Cache
Un depozit local de memorare a mesajelor (datelor) de r!spuns "i un subsistem de control
al acestuia. Memoria cache reduce timpul de r!spuns "i congestia re#elei. Orice client "i orice
server Web pot include un cache.
Cmp
O proprietate sau un atribut al unui nod (VRML). Fiecare tip de nod posed!
o mul#ime fix! de cmpuri. Un cmp poate con#ine tipuri diverse de date, compuse din una
ori mai multe valori. Oricare cmp este nzestrat cu o valoare implicit!.
Cerere
Un mesaj de cerere emis de un client, prin intermediul protocolului HTTP, a unor date de
pe un server Web.
Ciberspa"iu
Lume "electric!" perceput! pe ecranul computerului, n opozi#ie cu spa#iul "real". Spa#iul
cibernetic poate fi perceput global cu ajutorul unor dispozitive speciale (m!nu"! senzorial! "i
casc! de vizualizare, de exemplu), fiind modelat prin intermediul unui limbaj denumit
M-3

Tehnologii Web

VRML (Virtual Reality Modeling Language). Cunoscut "i sub numele de realitate virtual!, extensie
3D a hipermediei.
Clas#
n contextul program!rii obiectuale, reprezint! o colec#ie de date, ncapsulnd de asemeni o
serie de proceduri (metode) pentru manipularea acelor date. O instan#! a unei clase poart!
denumirea de obiect.
Client
Program care cere servicii de la alt program. De exemplu, navigatorul este client al unui
server Web (care poate furniza "i alte servicii).
Coduri de stare HTTP
Pentru fiecare cerere a unui client Web, serverul HTTP r!spunde cu o serie de coduri de
stare a opera#iei solicitate.
Comentariu
O not! cu con#inut arbitrar inclus! ntr-un fi"ier. n SGML, XML "i HTML comentariile
pot fi scrise prin construc#ia <!-- comentariu -->. n PHP, JavaScript "i Java,
comentariile sunt similare celor din C++, putnd fi scrise pe o singur! linie:
//
comentariu
/*
comentariu
*/.
sau
pe
linii
multiple:
n VRML, un comentariu ncepe cu caracterul #, ca n scripturile shell din Unix:
# comentariu.
Conexiune
Un circuit virtual (la nivelul transportului de date) stabilit ntre dou! programe care doresc
s! comunice. Vezi "i protocol.
Cookie
Obiect special con#innd anumite informa#ii de stare despre un client Web.
Aceste informa#ii vor fi trimise serverului care a creat cookie-ul. Un cookie va fi stocat pe
calculatorul clientului, putnd fi persistent sau nepersistent.
Corect formatat
Un document corect formatat trebuie s! aib! o declara#ie XML "i s! con#in! elemente de
marcare imbricate "i scrise corect. Un document corect formatat poate s! aib! sau nu un
DTD ata"at.
Copil
n contextul marc!rii, se refer! la un element inclus n interiorul altui element.
n construc#ia <carte><capitol /><carte> elementul capitol este copil al
elementului carte.

M-4

Tehnologii Web

CSS (Cascading Style Sheets)

Standard pentru formatarea elementelor unui document HTML, mai pu#in puternic dect
XSL. Stilurile se pot ata"a elementelor HTML prin intermediul unor fi"iere externe sau n
cadrul documentului, prin elementul <style> "i/sau atributul style. CSS se poate utiliza
"i pentru formatarea elementelor XML.
Daemon
Un program care ruleaz! independent, putnd executa diverse activit!#i "i deservind cereri
venite din partea clien#ilor (termenul daemon poate fi considerat similar termenului de server).
DCI (Dublin Core Initiative)
Set de propriet!#i de baz! referitoare la metadatele asociate unui document (titlu, autor,
proprietar etc.), utilizat pentru clasificarea resurselor Web.
Document
Un nod n cadrul anumitor sisteme (ca Intermedia) sau o colec#ie de termeni nrudi#i.
Consor#iul WWW - organiza#ie care redacteaz! standarde pentru Web - l asimileaz!
termenului de pagin! Web. n XML, un document poate con#ine informa#ii provenite din mai
multe fi"iere "i trebuie s! includ! marcaje pentru a fi valid.
DOM (Document Object Model)
O modalitate, independent! de limbaj "i de platform!, de accesare a elementelor "i
atributelor dintr-un document adnotat n XML sau HTML. DOM ofer! un set standard de
obiecte "i de interfe#e predefinite pentru prelucrarea documentelor XML/HTML.
DSSSL (Document Style Semantics and Specification Language)
Limbaj, inspirat din Lisp, pentru ata"area de stiluri "i realizarea de transform!ri
documentelor SGML valide.
DTD (Document Type Definition)
Set de reguli pentru construc#ia unor documente valide n SGML/XML. Aplica#iile "i
uneltele de editare a documentelor se bazeaz! pe DTD-ul asociat unui document pentru a-l
valida. n XML, DTD-ul este op#ional.
Element
Unitatea logic! fundamental! a unui document adnotat n SGML/XML. Datele dintr-un
document SGML/XML trebuie s! fie marcate cu ajutorul elementelor.
Element vid
Un element care nu posed! con#inut textual. Un element vid poate con#ine atribute "i apar
fie prin construc#ia <vid></vid>, fie cu sintaxa modificat! <vid />.
M-5

Tehnologii Web

Entitate
n contextul HTTP: informa#ia transferat! ntr-o opera#ie de cerere sau de r!spuns.
O entitate poate cuprinde att meta-informa#ii, ct "i con#inutul propriu-zis.
Vezi "i cerere.
n contextul SGML/XML: referin#! la o alt! informa#ie, func#ionnd ca abreviere sau
scurt!tur!. Creatorii DTD-urilor se folosesc de entit!#i pentru a evita repeti#iile de declara#ii de
reguli.
E-text
Carte electronic! formatat! n SGML.
Eveniment
Ac#iuni care pot surveni n cadrul paginilor Web, n mod uzual n urma unor opera#iuni
executate de utilizator sau de navigator.
n VRML, un mesaj trimis de un nod unui alt nod n func#ie de o rut!.
Extern
Atribut al unei leg!turi c!tre un nod dintr-o alt! baz! de date.
Graf de scen#
Un arbore de noduri VRML cuprinznd sisteme de coordonate "i forme pentru
a descrie o lume 3D.
Generator
Program folosit la generarea de pagini Web sau de lumi VRML. Un generator poate opera
n mod automat sau poate fi utilizat de un programator. Sinonim cu authoring tool.
Hipermedia
Hipertext multimedia. Termenii "hipermedia" "i "hipertext" tind s! fie considera#i similari.
Media include text, grafic!, sunet, video etc.
Hipertext
Text ntr-o form! non-linear!.
Host
Gazd!, un calculator al unei re#ele, identificat printr-o adres!.

M-6

Tehnologii Web

HTML (HyperText Markup Language)

Lingua franca a Internetului, aplica#ie major! a SGML (Standard Generalized Markup Language).
Nu ofer! suport pentru realizarea de prezent!ri hipermedia veritabile, iar n viitor va fi nlocuit
se pare de familia de limbaje XML, prin intermediul limbajului XHTML.
HTTP (HyperText Transfer Protocol)
Protocol sigur orientat-conexiune care guverneaz! comunica#iile dintre clien#ii "i serverele
Web, bazat pe TCP/IP.
Index
n teoria hipertextului, facilitate oferind pointeri c!tre date particulare ca func#ie a unei
interog!ri; tabel! a con#inutului unei c!r#i n form! de hipertext.
n c!utarea pe Web, catalog de documente creat de un motor de c!utare (denumit
"i catalog). Termenul uneori se utilizeaz! pentru a specifica un motor de c!utare.
Instan"#
O instan#! a unui obiect. Atunci cnd o clas! este instan#iat! pentru a rezulta un obiect
particular, vom spune c! acel obiect reprezint! o instan#! a clasei.
Interfa"#
Set de opera#ii care trebuiesc definite de o clas! de obiecte pentru a se nscrie ntr-o
anumit! categorie. O clas! care define"te toate metodele (opera#iile) unei interfe#e se spune c!
implementeaz! acea interfa#!.
n cazul limbajului Java, o interfa#! este un tip special de clas! care con#ine doar metode
abstracte. Interfa#a ofer! astfel un set de metode care vor trebui implementate de subclasele
unor clase implementnd acea interfa#!.
Intern
Atribut referitor la o leg!tur! ntre noduri aflate n aceea"i baz! de date.
Internet
Re#ea global!, compus! din alte re#ele prin intermediul c!ruia calculatoarele pot comunica
prin intermediul unei suite de protocoale denumit! TCP/IP. Fiecare re#ea const! din diverse
computere interconectate prin diverse modalit!#i.
Intranet
Parte a Internetului sau parte a Web-ului utilizat! exclusiv n cadrul unei organiza#ii sau
companii.

M-7

Tehnologii Web

Invalid
Atribut referitor la un document SGML/XML care nu respect! regulile de marcare "i
DTD-ul asociat (dac! exist!).
ncapsulare
Tehnic! a program!rii orientate-obiect pentru a face ca datele unui obiect s! fie private sau
protejate de manipularea direct!. Datele vor fi accesate/modificate doar prin intermediul unor
metode.
Java
Limbaj de programare orientat-obiect, inspirat din C "i C++ "i creat de James Gostling de
la Sun Microsystems, proiectat ini#ial cu scopul de a fi portabil "i de a fi utilizat n dispozitive
de larg consum, miniaturizate. Aplica#iile Java de mici dimensiuni, numite applet-uri, pot fi
rulate de navigatoarele Web, pe calculatorul client al utilizatorului. O aplica#ie Java rulnd n
cadrul unui server va fi numit! servlet.
JavaScript
Limbaj script dezvoltat ini#ial de compania Netscape pentru prelucrarea documentelor
HTML, oferind dinamism paginilor Web "i permi#nd execu#ia de cod la apari#ia unor
evenimente. O variant! diferit! de JavaScript este cea oferit! pentru Internet Explorer, numit!
JScript. O standardizare a limbajului JavaScript este dat! de ECMAScript.
Leg#tur#
Rela#ia dintre dou! ancore, stocate n aceea"i sau n baze de date diferite.
Lume virtual#
Colec#ie de unul sau mai multe fi"iere VRML, plus alte fi"iere multimedia prezentnd o
experien#! interactiv! pentru un utilizator. O lume virtual! este de cele mai multe ori
interpretat! de un navigator VRML.
Marcaj
Informa#ie structural! stocat! ntr-un document. n mod tradi#ional, informa#ia structural!
este separat! de con#inutul propriu-zis al documentelor "i izolat! n cadrul elementelor
(definit! n tag-uri) "i entit!#ilor.
Metadat#
Dat! referitoare la o anumit! dat! (resurs!) disponibil! pe Web, incluznd - f!r! a fi limitat!
doar la acestea - informa#ii despre autorul, drepturile de autor, proprietarul, termenii de
distribu#ie ale datei respective.

M-8

Tehnologii Web

Metod#
Termen care n jargonul program!rii obiectuale desemneaz! o procedur! sau
o func#ie intrnd n componen#a unei clase.
MIME (Multipurpose Internet Mail Extension)
Standard utilizat pentru specificarea de tipuri de fi"ere utilizate de aplica#iile Internet.
Fiecare fi"ier vehiculat n Internet apar#ine unui tip "i subtip MIME (e.g. text/plain,
image/gif, application/postscript).
Model de execu"ie
Set de reguli care guverneaz! modul n care evenimentele sunt procesate de navigatoare sau
de scripturi.
Motor de c#utare
Aplica#ie software care caut! ntr-un index dup! o cerere de interogare dat! de utilizator "i
returneaz! loca#iile documentelor g!site. Se reg!se"te "i sub denumirile de search engine sau
index. Nu trebuie confundat cu robo#ii Web.
Navigare
Procesul de mutare dintr-un nod n alt nod prin hipertext, n mod normal prin intermediul
leg!turilor. Navigatorul poate facilita acest lucru men#innd o list! cu cele mai recente leg!turi
urmate (history) etc. Vezi "i browser.
Negociere
Mecanism de selectare a reprezent!rii potrivite a unei date solicitate.
Nod
n teoria hipertextului, reprezint! unitatea de informa#ie, numit "i frame (cadru) n KMS sau
card (fi"!) n Hypercard. A nu se confunda cu gazd! (nod) de re#ea. Nodul poate fi asimilat "i
cu termenul de document, fiind adresat n Internet prin intermediul unui identificator uniform de
resurs! - URI (Uniform Resource Identifier).
n VRML, un nod este blocul de baz! pentru construc#ia lumilor virtuale. Un fi"ier VRML
con#ine m!car un nod. Fiecare nod posed! un anumit tip "i are asociate diferite cmpuri de
date.
Nota"ie
O structur! XML care identific! tipul con#inutului unui anumit element "i asociaz! un
program de vizualizare a acelui con#inut.

M-9

Tehnologii Web

Obiect
Colec#ie de date "i proceduri (metode), instan#! a unei clase. n VRML, un obiect este
sinonim cu nod.
Pachet
n Java, grupeaz! un set de clase. Mediile de dezvoltare Java pun la dispozi#ia
programatorului o serie de pachete standard, ierarhizate.
Path
Cale, mul#ime ordonat! de noduri/ancore reprezentnd o secven#! de citire a informa#iilor
utilizat! de cititor sau recomandat! de autor.
Poart#
Un server care lucreaz! ca intermediar pentru alte servere, n mod transparent, fiind "i un
translator de protocoale.
Profil
Colec#ie de criterii de func#ionalit!#i care definesc un subset implementabil al unui
standard.
Protec"ie
Prevenirea citirii, scrierii, manipul!rii unor date de c!tre utilizatorii neautoriza#i. Numit!
"i "autentificare" ori "controlul accesului". Protec#ia se realizeaz!, printre altele, prin adoptarea
unor protocoale de autentificare precum S-HTTP (Secure HTTP) sau SSL (Secure Socket Layer)
ori prin securizarea serverelor.
Protocol
Mul#ime de reguli pentru transmiterea datelor n cadrul re#elelor de calculatoare.
Protocoalele se structureaz! pe nivele, aplica#iile folosindu-se de protocoale de pe nivelul
superior. n Internet, se utilizeaz! suita de protocoale TCP/IP (Transmission Control
Protocol/Internet Protocol). Protocoalele bazate pe TCP/IP la nivelul aplica#ie sunt:
HTTP (HyperText Transfer Protocol) - utilizat pentru transferul de informa#ii hipertext, FTP (File
Transfer Protocol) - folosit pentru transferul de fi"iere prin Internet, TELNET - utilizat la
conectarea la distan#! prin intermediul unui terminal virtual etc.
Proxy (intermediar)
Un program intermediar care ruleaz! ca server, ct "i drept client pentru a transmite cereri
altor servere. Cererile trimise unui proxy pot fi rezolvate intern sau transmise mai departe, c!tre
alte servere (posibil translatate). Un proxy trebuie s! implementeze cerin#ele de server "i de
client ale specifica#iei HTTP.

M - 10

Tehnologii Web

R#d#cin#
n SGML/XML reprezint! primul element al unui document. Un element r!d!cin! nu
poate fi con#inut de nici un alt element "i formeaz! baza arborelui creat prin procesarea
elementelor pe care le con#ine.
R#spuns
Un mesaj de r!spuns HTTP din partea unui server furnizat clientului care a formulat o
cerere.
RDF (Resource Description Framework)
Un cadru de descriere "i de construc#ie a unor limbaje logice care definesc semantica
resurselor disponibile pe Web, cu scopul de a constitui Web-ul semantic. Sintaxa utilizat! se
bazeaz! pe XML.
Realitate virtual#
Simulare generat! de calculator a unui mediu tridimensional n care utilizatorul este capabil
s! vizualizeze "i s! manipuleze, n mod interactiv, con#inutul acestui mediu. Vezi "i ciberspa"iu.
Reprezentare
O entitate inclus! ntr-un r!spuns care reprezint! o negociere ntre client "i server.
Vezi "i termenii client, server, r!spuns.
Resurs#
Un obiect de date sau serviciu care poate fi identificat de un URI. Resursele pot avea
reprezent!ri multiple (formate, m!rimi, rezolu#ii etc.). n cazul Web-ului, o pagin! (document)
Web reprezint! o resurs!. Vezi "i nod.
Robo"i Web
Reprezint! programe care traverseaz! n mod automat structura hipertext a spa#iului
WWW, n scopuri de extragere a informa#iilor, folosind protocoalele Web standard (HTTP).
Se reg!sesc "i sub numele de p!ianjeni (spiders).
SAX (Simple API for XML)
Interfa#! de programare permi#nd dezvolt!torilor de aplica#ii s! analizeze documentele
XML. Spre deosebire de DOM, SAX nu necesit! nc!rcarea ntregului fi"ier n memorie.
Analiza XML este condus! de evenimente.
Schem#
Specifica#ie formal! a numelor, modului de apari#ie "i tipului de elemente "i atribute care
pot compune un document XML, folosind sintaxa limbajului XML. Func#ionalitatea
M - 11

Tehnologii Web

schemelor este echivalent! cu cea a DTD-urilor, dar XML Schema ofer! facilit!#i n plus.
Pentru RDF, o schem! descrie un vocabular RDF.
Script
Un limbaj de tip script este destinat s! prelucreze, s! automatizeze "i s! integreze facilit!#ile
oferite de un anumit sistem, n cazul WWW cele oferite de un navigator Web. n cadrul
documentelor HTML pot fi inserate scurte programe scrise n limbaje script (ca JavaScript sau
VBScript) cu scopul de a realiza un con#inut dinamic al paginilor WWW. Un document HTML
care include "i programe script se mai nume"te "i document HTML dinamic (DHTML).
Server
O aplica#ie care accept! conexiuni, r!spunznd la anumite cereri transmise de clien#i.
Un program poate juca rol att de server, ct "i de client. ntr-un sistem hipertext, un server
va oferi informa#ii hipertext unui client. Un server se poate comporta ca server ini#ial, poart!,
tunel sau proxy Web, n func#ie de natura cererii. Cele mai cunoscute servere Web sunt:
Apache, Netscape Enterprise Server, Sun Web Server, Microsoft Internet Information Server, Stronghold,
Jigsaw. Calculatorul pe care ruleaz! un server Web "i care g!zduie"te o serie de pagini WWW
se mai nume"te "i site.
SGML (Standard Generalized Markup Language)
Standard "i meta-limbaj pentru adnotarea documentelor electronice, p!rintele unor limbaje
precum HTML "i XML. SGML ofer! un set complex de reguli pentru definirea structurii
documentelor, avnd o serie de aplica#ii de succes ca HTML, OpenTAG, TEI, HyTime etc.
Spa"iu de nume
Mecanism permi#nd dezvolt!torilor XML s! califice n mod unic numele de elemente "i
rela#iile dintre ele, evitndu-se conflictele de elemente definite n vocabulare diferite. Un spa#iu
de nume identific! un vocabular XML prin intermediul unui URN.
SMIL (Synchronized Multimedia Integration Language)
Limbaj de realizare a prezent!rilor sincronizate multimedia pe Web, bazat pe XML.
A inspirat extensiile de sincronizare HTML+TIME pentru suport multimedia sincronizat n
cadrul documentelor Web.
Structur# semantic#
Rela#ia dintre con#inutul unui document "i structura lui.
Topologie
Toate conexiunile disponibile ntre noduri, ancore "i leg!turi, de exemplu 1 la 1 sau 1 la mai
multe etc.

M - 12

Tehnologii Web

Trasare
G!sirea automat! a nodurilor pentru navigare: g!sirea tuturor nodurilor depinznd de un
anumit nod, toate persoanele interesate de un nod dat, drumul minim de la un nod la alt nod
etc.
Tunel
Un program intermediar func#ionnd ca mijlocitor ntre dou! conexiuni.
Unicode
Standard pentru codificarea interna#ional! a caracterelor, extensie a codului ASCII, fiecare
caracter fiind codificat pe 16 bi#i.
URI (Uniform Resource Identifier)
Identificator uniform de resurse, folosit n general pentru adresarea resurselor Internet.
Mul#imea URI este compus! din subseturile de identificatori URN "i URL. Un URI generic
are forma schema://authority path?query.
URL (Uniform Resource Locator)
Subset URI identificnd resursele printr-o reprezentare a mecanismului de accesare a lor
(e.g. localizarea re#elei).
URN (Uniform Resource Name)
Subset URI care r!mne permanent "i unic, chiar dac! resursa a disp!rut ori a devenit
inaccesibil!. Un URN este independent de localizarea resursei.
Valid
Un document este considerat valid dac! se conformeaz! unei defini#ii a tipului
de document (DTD) "i respect! toate regulile sintactice (este corect formatat). Toate
elementele, atributele, entit!#ile trebuie s! fie declarate n DTD "i toate tipurile de date trebuie
s! fie corecte.
Versioning
Controlul versiunilor, stocarea "i organizarea versiunilor precedente ale unui fragment de
informa#ie pentru securitate, statistici sau alte scopuri. Acest lucru devine important atunci
cnd mai mul#i utilizatori pot edita n mod concurent acela"i material.
Web
Pnz! de p!ianjen, mul#ime de noduri interconectate prin leg!turi. De obicei desemneaz!
mul#imea tuturor nodurilor interconectate din lume. Denumit! "i WWW (World Wide Web), n
continu!
dezvoltare
"i
nglobnd
noi
tehnologii.

M - 13

Tehnologii Web

XML (Extensible Markup Language)

Standard "i meta-limbaj de marcare n continu! dezvoltare n cadrul Consor#iului Web,
oferind un set mai restrns de reguli de adnotare dect SGML din care provine.
XSL (Extensible Stylesheet Language)
Standard de concepere a foilor de stil extensibile, care ata"eaz! reguli de formatare "i de
procesare elementelor XML, mai precis "i flexibil dect CSS.

M - 14

Tehnologii Web

"O c#l#torie de mii de kilometri ncepe cu un pas."

(Dao de Jing)

Tehnologii Web

1. Fundamente
1.

T.Berners-Lee - "Weaving the Web", Cambridge Massachusetts, 1999

2. G.Booch - "Object-Oriented Analysis and Design (with Applications)",

Benjamin-Cummings, 1994
3. T.H.Cormen, C.E.Leiserson, R.L.Rivest - "Introducere n algoritmi",
Computer Press Agora, Tg.Mure", 2000
4. C.Croitoru - "Tehnici de baz! n Optimizarea Combinatorie", Universitatea
"Al.I.Cuza", Ia"i, 1992
5.

T.Jucan - "Limbaje formale "i automate", Ed. MatrixRom, Bucure"ti, 1999

6. D.Lucanu - "Bazele proiect!rii programelor "i algoritmilor", Universitatea

"A.I.Cuza", Ia"i, 1996
7.

N.Negroponte - "Era digital!", All, 1999

8. R.Stevens - "Advanced Programming in the UNIX Environment",

Addison-Wesley, 1992
9.

A.Tanenbaum - "Re#ele de calculatoare", Computer Press Agora, Tg.Mure", 1998

10. N.Wirth - "Algorithms + Data Structures = Programs", Prentice-Hall, 1976

2. Internet i Web
1.

D.Amor - "The E-Business (R)evolution", Prentice-Hall, 1999

2.

T.Berners-Lee - "Evolvability", W3C Note, march 1998

3. T.Berners-Lee - "Semantic Web roadmap", W3C Note, sep.1998:

http://www.w3.org/DesignIssues/Semantic.html
4.

T.Berners-Lee - "Web Architecture from 50,000 feet", W3C Note, oct.1999

5. T.Berners-Lee - "What the Semantic Web can represent", W3C Note, sep.1998:
http://www.w3.org/DesignIssues/RDFnot.html
6. T.Berners-Lee, D.Connolly - "Web Architecture: Extensible Languages",
W3C Note, feb.1998
7. D.Connolly - "Seeds of the Semantic Web", ALA Midwinter Meeting,
San Antonio, 2000: http://www.w3.org/2000/0$/ala2349/all
8.

A.DasGupta - "Television and the Web", W3 Workshop "TV and the Web", 1998

9. S.Decker et al. - "Knowledge Representation on the Web", International

Conference on Digital Libraries (DL'2000) Proceedings, 2000
10. A.Dufour - "Internet", Computer Press Agora, Tg.Mure", 1997
11. G.Gromov - "The Roads and Crossroads of Internet History", Internet Valley,
1998: http://www.internetvalley.com/intval$.html
12. B.Haring - "Who really invented the Net?", USA Today, sep.1999:
http://www.usatoday.com/life/cyber/tech/ctg000.htm
13. C.Hedrick - "Introduction to the Internet Protocols", CSFG,
Rutgers University, 1987

N-2

Tehnologii Web

14. J.Hirai et al. - "WebBase: A Repository of web pages", WWW9 Conference

Proceedings, Toronto, 2000: http://www9.org/w9cdrom/296/296.html
15. B.Leiner et al. - "A Brief History of the Internet" (vers.3.31),
Internet Society, aug.2000
16. B.Myers - "A Brief History of Human Computer Interaction Technology",
Tech. Report, Carnegie Mellon Univ, mart.1998
17. J.Wyer - "Web Based Applications for the Pocket PC", Tech-Ed 2000 Europe
Presentation, Amsterdam, iul.2000
18. * * * - HAL Library, Ia"i: http://www.cs.tuiasi.ro/library/
19. * * * - Hobbes' Internet Timeline:
http://www.isoc.org/zakon/Internet/History/HIT.html
20. * * * - Internet Resources - Web Technologies:
http://www.lib.rpi.edu/dept/library/html/resources/subjects/
weblanguages.html
21. * * * - MSDN: http://msdn.microsoft.com
22. * * * - Research Index: http://www.researchindex.com
23. * * * - W3C Web Characterization Repository: http://repository.cs.vt.edu/
24. * * * - Webopedia: http://webopedia.internet.com

25. * * * - Web Pro News: http://www.WebProNews.com

3. Teoria i aplicaiile hipertextului

1. T.Bardini - "Bridging the Gulfs: From Hypertext to Cyberspace",
JCMC Journal, vol.3, nr.2, sep.1997
2. A.Broder et al. - "Graph structure in the web", WWW9 Conference Proceedings,
Toronto, 2000: http://www9.org/w9cdrom/$60/$60.html
3. S.C.Buraga - "Mai mult dect text. Incursiune n hipertext",
PC Report, vol.9, nr.09 (96), sep.2000:
http://www.infoiasi.ro/~busaco/publications/articles/hipertext.pdf
4. S.DeRose, D.Durand - "The TEI Hypertext Guidelines", Computing and
The Humanities, 29(3), 1995
5. E.Fox - "Digital Libraries Initiative (DLI) Projects 1994-1999", Bulletin of the
American Society for Information Science, nov.1999
6. F.Halasz, M.Schwarz - "The Dexter Hypertext Reference Model",
Communications of the ACM, 37(2), feb.1994
7.

J.Nielsen - "Hypertext and Hypermedia", San Diego Academic Press, 1990

8. T.Nelson - "The Future of Information", Limited distribution by ASCII

Corporation, Tokyo, 1997:
http://www.sfc.keio.ac.jp/~ted/INFUTscans/INFUTscans.html
9. D.Small - "Navigating large bodies of text", IBM Systems Journal,
vol.35 (3-4), 1996
10. * * * - Hyperwave: http://www.hyperwave.com/

N-3

Tehnologii Web

11. * * * - HyperContent, HyperJunk:

http://www.mcs.net/~jorn/html/net/content.html
12. * * * - Hypertext Theory:
http://www.gwu.edu/~gelman/train/hyperbib.htm
13. * * * - Metadata Resources: http://www.ukoln.ac.uk/metadata/
14. * * * - Microcosm: http://www.multicosm.com/microcosm/index.html
15. * * * - Storyspace: http://www.eastgate.com/Storyspace.html
16. * * * - Webthing: http://www.webthing.com/self-org/

4. Adresarea resurselor Web

1. T.Berners-Lee, L.Masinter (eds.) - "Uniform Resource Identifiers (URI):
Generic Syntax", RFC 2396, aug.1998:
http://info.internet.isi.edu:80/in-notes/rfc/files/rfc2396.txt
2. T.Berners-Lee, L.Masinter, M.McCohill (eds.) - "Uniform Resourse Locators
(URL)", RFC 1738, 1994:
http://info.internet.isi.edu:80/in-notes/rfc/files/rfc$738.txt
3. N.Borenstein, N.Freed - "MIME (Multipurpose Internet Mail Extensions)",
RFC 1341, Network Working Group, iun.1992
4. D.Connolly - "An Index of WWW Addressing Schemes", W3C Note, 2000:
http://www.w3.org/Addressing/schemes

5. * * * - Naming and Addressing of Web Resources:

http://www.w3.org/Addressing/

5. Protocoale de comunicaii i servere Web

1.

B.Behlendorf et al. - "Running a Perfect Web Site with Apache", QUE, 1996

2. D.Comer, D.Stevens - "Internetworking with TCP/IP - Vol. III, Client-Server

Programming and Applications, BSD Socket Version", Prentice Hall, 1996
3. P.Dreyfus - "CORBA: Theory and Practice", ViewSource, Netscape
Communications, 1999
4. R.Fielding et al. (eds.) - "Hypertext Transfer Protocol - HTTP/1.1", RFC 2068,
IETF, 1997: http://www.ietf.org/rfc/rfc2068.txt
5. J.Franks et al. - "HTTP Authentication: Basic and Digest Access Authentication",
RFC 2617, IETF, 1999: http://www.ietf.org/rfc/rfc26$7.txt
6. G.Holden, N.Wells, M.Keller - "Apache Server Commentary", The Coriolis
Group, 1999
7.

M.Nic - "SOAP 1.1 Reference", IDOOX, 2000

8.

V.V.Patriciu - "Securitatea serviciului WWW", PC Report, vol.7, 10 (73), oct.1998

9. V.V.Patriciu et al. - "Securitatea informatic! n UNIX "i Internet", Ed.Tehnic!,

Bucure"ti, 1998
10. H.Schultzrinne et al. - "RTP: A Transport Protocol for Real-Time Applications",
RFC 1889, ian.1996
N-4

Tehnologii Web

11. C.Tutu - "Servere Web pentru Windows", PC Report, vol.7, 10 (73), oct.1998
12. S.Vinoski - "CORBA: Integrating Diverse Applications Within Distributed
Heterogeneous Environments", IEEE Communications Magazine, feb.1997
13. * * * - Apache: http://www.apache.org
14. * * * - Apache Week: http://www.apacheweek.com

15. * * * - HTTP-NG (HyperText Transfer Protocol - Next Generation):

http://www.w3.org/Protocols/HTTP-NG/Activity.html

6. Navigatoare
1. T.Berners-Lee - "Axioms of Web architecture - User Agent watch points",
W3C Note, 1998: http://www.w3.org/DesignIssues/UserAgent/
2. S.C.Buraga - "Netscape 6: rentoarcerea", PC Report, vol.9, nr.12 (99), dec.2000:
http://www.infoiasi.ro/~busaco/publications/articles/ns6.pdf
3. S.C.Buraga - "Web-ul devine mai vizual", PC Report, vol.9, nr.12 (99), dec.2000:
http://www.infoiasi.ro/~busaco/publications/articles/multimedia-ie55.pdf
4. K.Dubost, H.Haas, I.Jacobs - "Common User Agent Problems", W3C Note,
feb.2001: http://www.w3.org/TR/cuap
5. W.Harris, R.Potts - "Necko: The New Netlib Project", Mozilla.Org, apr.1999:
http://www.mozilla.org/projects/netlib/
6. E.Krock - "Gecko and Web Design with W3C Standards",
Netscape CodeStock Workshop, Mountain View, sep.1999
7. R.Norlander - "Internet Explorer 5: All Power to the Document Object Model",
Site Builder Magazine, mart.1999
8. C.Owen Yoshikawa - "Microbrowser: An Extensible Web Browser Architecture",
University of California, Berkeley, 1997
9. H.Toivonen, J.Stenbck - "Extending Mozilla or How To Do The Impossible",
CITEC Proceedings, 1999
10. * * * - Amaya: http://www.w3.org/Amaya/
11. * * * - Annotea: http://www.w3.org/200$/Annotea/
12. * * * - DocZilla: http://www.doczilla.com
13. * * * - Internet Explorer: http://www.microsoft.com/ie/
14. * * * - Links: http://links.sourceforge.net/
15. * * * - Lynx: http://www.cc.ukans.edu/about_lynx
16. * * * - MozillaZine - Chrome Zone: http://www.mozillazine.org/chrome/
17. * * * - Netscape Communicator: http://home.netscape.com

18. * * * - Opera: http://www.opera.com

N-5

Tehnologii Web

7. MetaMeta - limbajele SGML i XML

SGML
1. M.Srbu, C.Matei - "SGML - Din nou n actualitate", PC Report, vol.6, 07 (58),
iul.1997
2. C.M.Sperberg-McQueen, L.Burnard - "Gentle Introduction to SGML":
http://etext.virginia.edu/TEI.html
3.

R.Cover - "The SGML Web Pages": http://www.sil.org/sgml/

4.

C.Goldfarb - "The SGML Handbook", Oxford Press, 1990

5.

* * * - DSSSL: http://www.jclark.com/dsssl/

6.

* * * - Oasis: http://www.oasis-open.org/

7.

* * * - SGML: http://www.sil.org/sgml/

XML
1. J.Boyer - "Canonical XML Version 1.0", W3C Working Draft, Boston, oct.2000:
http://www.w3.org/TR/xml-c$4n
2. D.Box - "Understanding XML", Tech-Ed 2000 Europe Presentation,
Amsterdam, iul.2000
3. T.Bray et al. (eds.) - "Extensible Markup Language (XML) 1.0 (Second Edition)",
W3C Recommendation, oct.2000: http://www.w3.org/TR/REC-xml
4. T.Bray, D.Hollander, A.Layman (eds.) - "Namespaces in XML",
W3C Recommendation, ian.1999: http://www.w3.org/TR/REC-xml-names/
5. J.Clark - "Comparison of SGML and XML", W3C Note, dec.1997:
http://www.w3.org/TR/NOTE-sgml-xml
6. D.Fallside (ed.) - "XML Schema: Primer", W3C Candidate Recommendation,
oct.2000: http://www.w3.org/TR/xmlschema-0/
7.

E.R.Harold - "XML Bible", IDG Books Worldwide, 1999

8.

S.Laurent - "XML: A Primer", IDG Books Worldwide, 1998

9.

R.Light - "Presenting XML", Macmillan Computer Publ., 1997

10. C.Matei - "eXtensible Markup Language", PC Report, vol.6, 07 (58), iul.1997

11. M.Nic - "Namespace Tutorial", IDOOX, 2000
12. W.Pardi - "XML in Action", Microsoft Press, 1999
13. N.Welsh - "A Technical Introduction to XML", ArborText Inc., 1998
14. * * * - Advanced XML:
http://www.ibiblio.org/xml/slides/sd2000east/advancedxml/
Advanced_XML.html
15. * * * - Extensibility: http://www.extensibility.com
16. * * * - James Clark: http://www.jclark.com
17. * * * - Textuality: http://www.textuality.com

N-6

Tehnologii Web

18. * * * - XHTML 1.0: http://www.w3.org/TR/xhtml$

19. * * * - XHTML.org: http://www.xhtml.org
20. * * * - XML.org: http://www.xml.org

21. * * * - XML Times: http://www.xmltimes.com

Utiliz#ri ale XML
1. S.C.Buraga - "XHTML: nceputul sfr"itului?!", PC Report, vol.9, 04 (91), apr.2000:
http://www.infoiasi.ro/~busaco/publications/articles/xhtml.pdf
2. S.Chory - "Publish XML to Wireless Devices with Server-Side XSL
Transformation", Tech-Ed 2000 Europe Presentation, Amsterdam, iul.2000
3. J.Clark, S.DeRose (eds.) - "XPath": http://www.w3.org/TR/xpath,
W3C Recommendation, nov.1999
4. J.Clark (ed.) - "XSL Transformations": http://www.w3.org/TR/xslt,
W3C Recommendation, nov.1999
5. D.Day - "Hands-on XSL", IBM developerWorks, mart.2000:
http://www-4.ibm.com/software/developer/library/hands-on-xsl/
6. S.DeRose et al. (eds.) - "XML Linking Language (XLink) Version 1.0",
W3C Candidate Recommendation, iul.2000: http://www.w3.org/TR/xlink/
7.

G.Doss - "CORBA Developer's Guide with XML", Wordware Publishing, 1999

8. B.DuCharme - "XML, XLL and XSL: Current Status, Next", <TAG>, vol.11,
no.1, ian.1998
9. M.Sergeant - "XPathScript: An Alternative To XSLT", XML.com, 2000:
http://www.xml.com/pub/a/2000/07/05/xpathscript/index.html
10. B.Travis - "Using XSLT to Transform XML", Tech-Ed 2000 Europe Presentation,
Amsterdam, iul.2000

11. * * * - Koala XML Resources: http://www-sop.inria.fr/koala/XML/xsl.html

Unelte XML
1. * * * - Cafe con Leche XML News, and Resources:
http://www.ibiblio.org/xml/
2.

* * * - XML Hack: http://www.xmlhack.com/

3. * * * - XML References, Resources and Demos: http://www.cen.com/

ng-html/xml/xml-refs.html
4.

* * * - XML Shareware: http://xmlshareware.com/

5.

* * * - XML Software: http://www.xmlsoftware.com/

6.

* * * - XML Writer: http://xmlwriter.net

N-7

Tehnologii Web

8 . Aplicaii ale XML

RDF !i metadate
1. D.Beckett - "Resource Description Framework (RDF) Resource Guide",
Institute for Learning and Research Technology, University of Bristol, ian.2001:
http://www.ilrt.bris.ac.uk/discovery/rdf/resources/
2. S.C.Buraga - "A RDF Description of Distributed File Systems",
Analele %tiin#ifice ale Universit!#ii "A.I.Cuza", sec#iunea Informatic!, tom IX, 2000:
http://www.infoiasi.ro/~busaco/publications/articles/dfs-rdf.ps
3. S.C.Buraga - "RDF: o aplica#ie XML", PC Report, vol.8, nr.10 (85), oct.1999:
http://www.infoiasi.ro/~busaco/publications/articles/rdf.pdf
4. P.Champin - "RDF Tutorial", University of Lyon, France, 2000:
http://www7$0.univ-lyon$.fr/~champin/rdf-tutorial/
5. D.Connolly - "HyperRDF: Using XHTML Authoring Tools with XSLT
to produce RDF Schemas", W3C Note, Boston, iul.2000:
http://www.w3.org/2000/07/hs78/
6. O.Lassila, R.Swick (eds.) - "RDF Model and Syntax Specification",
W3C Recommendation, feb.1999: http://www.w3.org/TR/REC-rdf-syntax/
7.

M.Nic - "RDF Tutorial", IDOOX, 2000

8. J.Sowa - "Ontology, Metadata, and Semiotics":

http://www.bestweb.net/~sowa/peirce/ontometa.htm
9. C.Waterson - "RDF: Back-end Architecture", Mozilla.Org, aug.1999:
http://www.mozilla.org/rdf/back-end-architecture.html
10. C.Waterson - "RDF-in-Mozilla Frequently Asked Questions",
Mozilla.Org, aug.2000: http://www.mozilla.org/rdf/doc/faq.html
11. * * * - Dublin Core Initiative: http://purl.org/metadata/dublic_core/
12. * * * - RDF and Metadata Central, Netscape:
http://developer.netscape.com/tech/rdf/
13. * * * - Metadata Research: http://www.ilrt.bris.ac.uk/discovery/
14. * * * - Mozilla RDF: http://www.mozilla.org/rdf/doc/
15. * * * - Semantic Web: http://www.w3.org/2000/0$/sw/

16. * * * - SiRPAC: http://www.w3.org/RDF/Implementations/SiRPAC/

XUL
1. I.Oeschger - "XULNotes: A XUL Bestiary", Mozilla.Org, apr.2000:
http://www.mozilla.org/docs/xul/xulnotes/xulnote_beasts.html
2. I.Oeschger - "XULNotes: Skinning XUL Files By Hand", Mozilla.Org, mart.2000:
http://www.mozilla.org/docs/xul/xulnotes/xulnote_skins.html
3. I.Oeschger -"XUL Programmer's Reference Manual", Third Draft Edition,
Mozilla.Org, mart.2000: http://www.mozilla.org/xpfe/Xulref.zip

N-8

Tehnologii Web

Alte aplica"ii
1. S.C.Buraga - "Reprezentarea sistemelor Lindenmayer ca documente XML",
Conferin#a de Informatic! Teoretic! "i Tehnologii Informatice - CITTI 2000, Constan#a,
mai 2000: http://www.infoiasi.ro/~busaco/publications/articles/lsml-pub.pdf
2. S.C.Buraga, T.Rusu - "An XML-based Query Language Used in Structural Search
Activity on Web", CONTI 2000 Proceedings, Timisoara, oct. 2000
3. O.Gogan, S.C.Buraga - "The Use of Neural Networks for Structural Search on
Web", "Internation Symposium on System Theory - SINTES 10 Proceedings", Craiova,
mai 2000: http://www.infoiasi.ro/~busaco/publications/articles/neuralweb.pdf
4. K.Spencer - "Using XML in Business Applications", Tech-Ed 2000 Europe
Presentation, Amsterdam, iul.2000
5. R.Stevahn (ed.) - "Adding Style and Behavior to XML with a dash of Spice",
W3C Note, feb.1998: http://www.w3.org/pub/WWW/TR/NOTE-spice.html

6. J.Tigue - "XML for Distributed Computing: WebBroker":

http://www.datachannel.com/developers/webbroker/
XMLSeattle/index.html

9. Procesarea documentelor XML

1. S.C.Buraga - "XML DOM - o cale de acces", PC Report, vol.8, nr.10 (85),
oct.1999: http://www.infoiasi.ro/~busaco/publications/articles/dom.pdf
2. S.C.Buraga - "XML prin SAX", PC Report, vol.9, 01 (89), ian.2000:
http://www.infoiasi.ro/~busaco/publications/articles/xml-sax.pdf
3. A.Ceponkus, F.Hoodbhoy - "Applied XML", Wiley Computer Publishing, New
York, 1999
4. J.Hunter, B.McLaughlin - ""Easy Java/XML integration with JDOM", JavaWorld,
mai 2000:
http://www.javaworld.com/javaworld/jw-05-2000/jw-05$8-jdom.html
5.

R.Curtmola - "JDOM", NET Report, vol.10, nr.01 (100), ian.2001

6.

R.Levien - "DOMination": http://www.levien.com/gnome/domination.html

7. T.Takahashi - "DOM Sample Code":

http://web0$.fureai.or.jp/~tato/ver5/testcontents.htm
8. B.Travis - "Writing Applications using the Document Object Model",
Tech-Ed 2000 Europe Presentation, Amsterdam, iul.2000
9. L.Wood (ed.) - "Document Object Model (DOM) Level 1 Specification",
W3C Recommendation, oct.1998: http://www.w3.org/TR/REC-DOM-Level-$/
10. J.Znamenacek - "DOM1 Reference", IDOOX, 2000
11. * * * - JAXP: http://java.sun.com/xml/
12. * * * - JDOM: http://jdom.org/
13. * * * - MSDOM: http://www.microsoft.com/XML/
14. * * * - SAX: http://www.megginson.com/SAX/
15. * * * - ZVON: http://www.zvon.org/

N-9

Tehnologii Web

10. Prezentri hipermedia pe Web

Aspecte teoretice
1. J.F.Allen - "Maintaining Knowledge about Temporal Intervals", Communications
of the ACM, vol. 26(11), nov.1983
2. V.Balasubramanian - "State of the Art Review on Hypermedia Issues And
Applications", Rutgers University, New Jersey, 1994
3. B.Gaines, M.Shaw - "Concept Maps as Hypermedia Components", Knowledge
Science Institute, Univ. of Calgary, Canada, 1995
4. M.Louka - "A Review of Hypermedia Methodologies and Techniques", Dept. of
Mathematical and Computing Sciences, University of Surrey, 1994:
http://w$.269$.telia.com/~u269$00246/hypermedia/review/Review.html
5.

M.McLuhan - "Mass-media sau mediul invizibil", Nemira, Bucure"ti, 1997

6. V.S.Subrahmanian - "Principles of Multimedia Database Systems",

Morgan Kaufmann Publ., 1998

Multimedia !i hipermedia
1. S.C.Buraga - "Hipermedia", PC Report & BYTE, vol.8, nr.5 (80), mai 1999:
http://www.infoiasi.ro/~busaco/publications/articles/hipermedia.pdf
2. J.Crowcroft, M.Handley, I.Wakeman - "Internetworking Multimedia",
UCP Press, 1998
3. N.Georganas - "Multimedia Applications Development: Experiences", MCRLab,
Univ. of Ottawa, 1998
4. S.Gibbs, G.Szentivanyi - "Index to Multimedia Information Sources":
http://viswiz.gmd.de/MultimediaInfo
5. P.Hoschka - "Toward Synchronized Multimedia on the Web",
World Wide Web Journal, Spring 1997
6. J.Yu - "A Simple Intuitive Hypermedia Synchronization Model and its Realization
in the Browser/Java Environment", DEC Systems Reasearch Center, 1997
7. J.Yu, J.Xiang - "Hypermedia Presentation and Authoring System",
Systems Reasearch Center, Technical Note, DEC, Paco Alto, mai 1997
8.

* * * - Alpeda - The Multimedia Course: http://www.alpeda.shef.ac.uk

9. * * * - Multimedia Authoring Web:

http://www.mcli.dist.maricopa.edu/authoring/
Hipermedia pe Web. SMIL
1. S.C.Buraga - "SMIL - limbaj pentru prezent!ri multimedia sincronizate pe Web",
PC Report & BYTE, vol.8, nr.2 (77), feb.1999:
http://www.infoiasi.ro/~busaco/publications/articles/smil.pdf
2.

* * * - GRiNS: http://www.oratrix.com/GRiNS/index.html

3.

* * * - Helio: http://www.helio.org

4.

* * * - HPAS: http://www.research.digital.com/SRC/HPAS/
N - 10

Tehnologii Web

5.

* * * - JustSMIL: http://www.justsmil.com

6.

* * * - RealNetworks: http://www.real.com

7.

* * * - RealNetworks SDK: http://service.real.com/help/library/index.html

8.

* * * - SMIL: http://www.w3.org/AudioVideo

9.

* * * - SMIL Player Feature List: http://smil.nist.gov/Feature.html

10. * * * - SMIL Player Testcases: http://smil.nist.gov/Testcase.html

11. Proiectarea siturilor Web

Limbajul HTML
1. B.Bos et al. - "Cascading Style Sheets (CSS), level 2", W3C Recommendation,
mai 1998: http://www.w3.org/pub/WWW/TR/REC-CSS2/
2.

M.Cioat! - "Pl!#i electronice", NET Report, vol.10, 02 (101), feb.2001

3. V.Clocotici - "Limbajul HTML" (curs electronic), Facultatea de Informatic!, Ia"i,

1999: http://www.infoiasi.ro/~val/htmlearn.html
4.

R.Darnel - "HTML 4 Unleashed", Sams.Net Publishing, 1997

5.

C.Fotache - "Standardul HTML 4.0", PC Report, vol.6, 10 (61), oct.1997

6. I.Jacobs et al. (eds.) - "WAI Resources: HTML 4.0 Accessibility Improvements":

http://www.w3.org/WAI/References/HTML4-access/
7. D.Kiely - "Extensible Markup Comes of Age in XHTML", Tech-Ed 2000 Europe
Presentation, Amsterdam, iul.2000
8. H.Lie Wium, B.Bos - "Cascading Style Sheets (CSS), level 1", W3C
Recommendation, dec.1996: http://www.w3.org/pub/WWW/TR/REC-CSS$/
9.

D.R!doiu - "HTML - Publica#ii Web", Computer Press Agora, Tg.Mure", 1996

10. D.Raggett - "Introduction to CSS", W3C, Boston, aug.1999:

http://www.w3.org/MarkUp/Guide/Style.html

11. D.Raggett - "Introduction to HTML", W3C, Boston, aug.1999:

http://www.w3.org/MarkUp/Guide/
Design Web
1.

A.Cooper - "Proiectarea interfe#elor utilizator", Ed.Tehnic!, Bucure"ti, 1997

2.

C.Lewis, J.Rieman - "Task-Centered User Interface Design", Prentice Hall, 1994

3. T.Nakayama et al. - "Discovering the Gap Between Web Site Designers'

Expectations and Users' Behavior", WWW9 Conference Proceedings, Toronto, 2000:
http://www9.org/w9cdrom/2$3/2$3.html
4.

L.Piquest - "Good Web Design Is Only Natural", ZD Internet, apr.1997

5.

J.Preece (ed.) - "Human Computer Interaction", Addison-Wesley, 1994

6.

W.Stanek (ed.) - "Web Publishing", Sams.net Publishing, 1997

7.

* * * - Computer Graphics: http://mambo.ucsc.edu/psl/cg.html

N - 11

Tehnologii Web

8. * * * - GIF (Graphics Interchange Format), CompuServe:

http://www.w3.org/pub/WWW/Graphics/GIF/spec-gif89a.txt
9. * * * - Guide to HTML and Web Authoring Resources:
http://www.library.nwu.edu/resources/www/
10. * * * - Web Builders' Bookmarks:
http://www.pictograph.com/IMD2$5_bookmarks.html
11. * * * - Web Design Co. Bad Web Design rules:
http://www.web-masters.org/services/design/bad_html.htm
12. * * * - Web Pages That Suck: http://www.webpagesthatsuck.com/
13. * * * - Web Site Abstraction: http://www.wsabstract.com
14. * * * - Web Tools: http://www.webtools.com

15. * * * - HTML Tidy: http://www.w3.org/People/Raggett/tidy/

Accesul la Web prin dispozitivele electronice
1. T.Hyland - "Proposal for a Handheld Device Markup Language (HDML)",
W3C Note, mai 1997
2. T.Kamada - "Compact HTML for Small Information Appliances",
W3C Note, feb.1998: http://www.w3.org/TR/$998/NOTE-compactHTML/
3.

* * * - WAP & WML: http://www.wapforum.org

12. Programarea aplicaiilor Web

Dezvoltarea de aplica"ii Web pe server. Standardul CGI
1.

A.Ctu - "Introducere n Python", PC Report, vol.9, 01 (88), ian.2000

2.

P.Csaba - "Scripturi CGI", PC Report, vol.9, 07 (94), iul.2000

3.

C.Csoma - "Web Counter", PC Report, vol.6, 11 (62), nov.1997

4.

P.Doyle et al. - "Special Edition, Using Perl for Web Programming", QUE, 1996

5.

J.Dwight, M.Erwin - "Special Edition Using CGI", QUE, 1996

6.

E.Kim - "CGI Developer's Guide", Sams.net Publishing, 1996

7. J.Korpela - "Getting Started with CGI Programming in C", 1999:

http://www.hut.fi/u/jkorpela/forms/cgic.html
8. C.Raibulet, O.Constantin - "Introducere n Perl", PC Report,
vol.8, 10 (85), oct.1999
9.

R.Schwartz, T.Christiansen - "Learning Perl", O'Reilly Press, 1997

10. C.Teodorescu - "Introducere n Tcl", PC Report, vol.8, 12 (87), dec.1999

11. S.Thomas - "Programming CGI in C/C++":
http://monarch.papillion.ne.us/~sthomas/cgi_in_c.html
12. * * * - Advanced Web Programming: http://www.tiac.net/users/smiths/
13. * * * - CGI Programming Open FAQ: http://www.boutell.com/openfaq/cgi

N - 12

Tehnologii Web

14. * * * - CGI Resources: http://www.cgi-resources.com

15. * * * - Developer.com: http://www.developer.com
16. * * * - Developer Shed: http://www.devshed.com
17. * * * - IBM Alphaworks: http://www.alphaworks.ibm.com/tech/
18. * * * - IBM Clever Project:
http://www.almaden.ibm.com/cs/k53/clever.html
19. * * * - Introduction to CGI: http://hoohoo.ncsa.uiuc.edu/cgi/intro.html
20. * * * - Learning to Use Regular Expressions:
http://gnosis.cx/publish/programming/regular_expressions.html
21. * * * - Perl: http://www.perl.org
22. * * * - Python: http://www.python.org
23. * * * - Scripts: http://www.worldwidemart.com/scripts/
24. * * * - SSI Tutorial: http://www.useforesite.com/tut_ssi.shtml
25. * * * - Web Programming: http://www.iimahd.ernet.in/~jajoo/lang.htm
26. * * * - Web Reference: http://www.WebReference.com

27. * * * - xdev: http://www.xdev.com

Servere de aplica"ii
1.

S.C.Buraga - "PHP, OOP "i XML", NET Report, vol.10, 03 (102), mart.2001

2.

A.Ctu - "Zope", PC Report, vol.9, 07 (94), iul.2000

3.

C.Fotache - "ADO "i ASP", PC Report, vol.8, 03 (78), mart.1999

4. C.Fotache - "Tehnologia ASP "i Internet Information Server", PC Report,

vol.6, 06 (57), iun.1997
5. K.Khntopp - "Accessing Databases with Class", iun.1999:
http://www.devshed.com/Server_Side/PHP/Class/
6.

C.Mateescu - "Pagini dinamice cu PHP", PC Report, vol.9, 12 (99), dec.2000

7. T.Ratschiller, T.Gerken - "Web Application Development with PHP 4.0",

New Riders Publishing, 2000
8.

M.Srbu - "PHP: Hypertext Preprocessor", PC Report, vol.9, 08 (95), aug.2000

9.

R.Stoian - "Baze de date pe Web", PC Report, vol.9, 07 (94), iul.2000

10. C.Varvara - "Acces prin WWW", PC Report, vol.6, 09 (60), sep.1997

11. C.Varvara - "Personal Home Page Form", PC Report, vol.7, 01 (64), ian.1998
12. * * * - Active Layers API: http://www.alapi.com/lite2/
13. * * * - ASP Free: http://www.aspfree.com
14. * * * - IIS: http://www.microsoft.com/iis/
15. * * * - Learn ASP: http://www.learnasp.com
16. * * * - PHP: http://www.php.net
17. * * * - PHP Builder: http://www.phpbuilder.com
N - 13

Tehnologii Web

18. * * * - PHP Wizard: http://www.phpwizard.net

19. * * * - MySQL Central: http://www.mysql.com
20. * * * - Zope: http://www.zope.org

Cookie-uri
1. S.C.Buraga - "Cookie-uri", PC Report, vol.9, nr.10 (97), oct.2000:
http://www.infoiasi.ro/~busaco/publications/articles/cookies.pdf

2. * * * - Netscape's Cookie Specification:

http://www.netscape.com/newsref/std/cookie_spec.html
JavaScript !i HTML Dinamic
1.

* * * - Client-Side JavaScript Guide v1.3, Netscape Communications, mai 1999

2. * * * - DevEdge:
http://developer.netscape.com/library/documentation/index.html
3.

* * * - DLib.org: http://www.dlib.org

4.

* * * - Dynamic Drive (DHTML Resources): http://www.dynamicdrive.com

5.

* * * - Dynamic Duo Tutorial: http://members.xoom.com/dynduo/

6.

* * * - ECMAScript Specification: http://www.ecma.ch

7.

* * * - InsideDHTML: http://www.insideDHTML.com

8.

* * * - JavaScript 1.5: http://www.mozilla.org/js/js$5.html

9.

* * * - JavaScript Reference, Netscape Communications, 1998

10. * * * - JavaScript Source: http://javascript.internet.com

13. Limbajul
Lim bajul Java
1. S.Andrei - "Programarea n Java" (curs electronic), Facultatea de Informatic!,
Ia"i, 2000-2001: http://www.infoiasi.ro/~stefan/java/index.html
2. I.Athanasiu et al. - "Limbajul Java - o perspectiv! pragmatic! (edi#ia a doua)",
Computer Press Agora, Tg.Mure", 2000
3.

J.Clark - "XP - An XML Parser in Java": http://www.jclark.com/xml/xp/

4.

B.Eckel - "Thinking in Java", Prentice Hall, New Jersey, 1998

5.

R.Martin - "Java and C++, A Critical Comparation", Java Journal, March 1997

6.

K.Moss - "Java Servlets", McGraw-Hill Press, 1998

7.

P.Norton - "Ghid de programare n Java", Editura Teora, Bucure"ti, 1998

8.

E.Rotaru - "Limbajul Java", Computer Press Agora, Tg.Mure", 1996

9.

D.St!nculescu - "Servlets", PC Report, vol.9, 07 (94), iul.2000

10. W.Stanek - "Peter Norton's Guide to Java Programming", Cisco Press, 1996
11. A.Subrahmanyan - "Java Servlets: Design Issues", 1999:
http://www.subrahmanyan.com/articles/servlets/servletIssues.html
N - 14

Tehnologii Web

12. * * * - Java Server Pages, Sun Microsystems, sep.1999: http://java.sun.com

13. * * * - Java Servlets Tutorial:
http://java.sun.com/docs/books/tutorial/servlets/
14. * * * - Java Software: http://www.javasoft.com

15. * * * - JavaWorld: http://www.javaworld.com

14. Roboii Web

1.

J.Bradshow - "Software Agents", AAAI Press, 1997

2. S.C.Buraga - "Robo#ii Web", PC Report, vol.9, 05 (92), mai 2000:

http://www.infoiasi.ro/~busaco/publications/articles/roboti.pdf
3. S.Green, F.Somers - "Software Agents: A Review":
http://www.cs.tcd.ie/research_groups/aig/iag/iag.html
4. M.Koster - "Robots in the Web: threat or treat?", ConneXions,
Volume 9, No. 4, apr. 1995 (actualizat! n 1997):
http://info.webcrawler.com/mak/projects/robots/threat-or-treat.html
5. M.Wooldridge, N.Jennings - "Intelligent Agents: Theory and Practice", Knowledge
Engineering Review Journal, 10(2), 1995
6. M.Wooldridge, N.Jennings - "Pitfalls of Agent-Oriented Development",
Agents'98 Proceedings, Minneapolis, 1998
7.

* * * - Agent Web: http://www.cs.umbc.edu/agents

8.

* * * - Bot Spot: http://bots.internet.com

9.

* * * - Eliza: http://www-ai.ijs.si/eliza/eliza.html

10. * * * - Harvest: http://harvest.transarc.com/

11. * * * - Knowbots: http://www.cnri.reston.va.us/home/koe/
12. * * * - ShopBot: http://www.cs.washington.edu/research/shopbot/
13. * * * - W3QS: http://www.cs.technion.ac.il/~konop/w3qs.html
14. * * * - WebCrawler: http://www.webcrawler.com

15. Motoare de cutare

1. A.Ard, S.Lundberg - "A regional distributed WWW search and indexing service the DESIRE way", WWW7 Conference Proceedings, 1998
2. S.Adah et al. - "Integrated Search Engine", KDEX'97 Proceedings,
Newport Beach, California, nov.1997
3. S.Brin, L.Page - "The Anatomy of a Large-Scale Hypertextual Web Search
Engine", WWW7 Conference Proceedings, Elsevier Science, apr.1998:
http://www7.scu.edu.au/programme/fullpapers/$92$/com$92$.htm
4.

D.Butler - "Souped-up Search Engines", Nature, vol.405, mai 2000

5. S.Chakrabarti et al. - "Hypersearching the Web", Scientific American, iun.1999:

http://www.sciam.com/$999/0699issue/0699raghavan.html

N - 15

Tehnologii Web

6. S.Harabagiu - "Possible Applications of a Romanian WordNet",

the 4th Eurolan Summer School, Ia"i, 1999
7. D.Lowe - "Improving Web Search Relevance: Using Navigational Structures to
Provide a Search Context", the Sixth Australian World Wide Web Conference, Rihga
Colonial Club Resort, Cairns, iun.2000
8. M.Marchiori - "The Quest for Correct Information on the Web: Hyper Search
Engines", WWW6 Conference Proceedings, France, Elsevier Science, 1997:
http://www.scope.gmd.de/info/www6/technical/paper222/paper222.html
9. A.Mendelzon, G.Mih!il!, T.Milo - "Querying the World Wide Web", Journal of
Digital Libraries 1(1), 1997: ftp://ftp.db.toronto.edu/pub/papers/jodl97.ps.Z
10. D.Moldovan - "Word Sense Disambiguation and an Application to Information
Retrieval from Internet", the 4th Eurolan Summer School, Ia"i, 1999
11. D.Moldovan, R.Mihalcea - "Improving the search on the Internet by using
WordNet and lexical operators", Siglex'99 Proceedings, 1999
12. M.Wallace - "Architecture Online: A Search Engine Review", Searcher, vol.8, nr.2,
feb.2000: http://www.infotoday.com/searcher/feb00/wallace.htm
13. * * * - AddMe!: http://www.addme.com
14. * * * - AltaVista: http://www.altavista.com
15. * * * - Excite: http://www.excite.com
16. * * * - Google: http://www.google.com
17. * * * - Inktomi: http://www.inktomi.com
18. * * * - RDF Site Summary (RSS) 1.0: http://purl.org/rss/$.0/
19. * * * - Search Engine Terms: http://www.cadenza.org/search_engine_terms/

20. * * * - Yahoo!: http://www.yahoo.com

16. Realitatea virtual

1. A.Fernandez - "VRML Interactive Tutorial", Universidade do Minho,
Portugal, 1998: http://www-venus.cern.ch/vrmltut/
2.

F.Ionescu - "Grafica n realitatea virtual!", Ed.Tehnic!, Bucure"ti, 2000

3.

C.E.Loeffer, T.Anderson (eds.) - "The Virtual Reality Casebook", New York, 1994

4.

M.Pesce - "VRML and Java", ViewSource, Netscape Communications, 1999

5. D.M.Popovici - "Elemente ale mediilor virtuale distribuite", Conferin#a de

Informatic! Teoretic! "i Tehnologii Informatice - CITTI 2000, Constan#a, mai 2000
6. D.Schneider, S.Martin-Michiellot - "VRML Primer and Tutorial", TECFA,
University of Geneva, 1998:
http://tecfa.unige.ch/guides/vrml/vrmlman/vrmlman.html
7. S.Singhal, M.Zyda - "Networked Virtual Environments", Addison-Wesley,
New York, 1999
8. N.Teroshima - "Telesensation - Distributed Interactive Virtual Reality - Overview
and Prospects", IFIP, 1994
9.

Q.Wang - "Networked Virtual Reality", Master Thesis, University of Alberta, 1994

N - 16

Tehnologii Web

10. * * * - Bamboo: http://www.npsnet.nps.navy.mil/Bamboo/

11. * * * - DIVE: http://www.sics.se/dce/dive/dive.html
12. * * * - Floppy's VRML Guide: http://www.vapourtech.com/vrmlguide,
Vapour Technology Ltd., nov.2000
13. * * * - HLA: http://hla.dmso.mil
14. * * * - Nerve Garden: http://www.biota.org
15. * * * - NPSNET: http://www.npsnet.nps.navy.mil/npsnet/
16. * * * - OpenGL:
http://www.sgi.com/Technology/openGL/glspec$.$/glspec.html
17. * * * - PARADISE: http://www.dsg.stanford.edu/paradise.html
18. * * * - "The Virtual Reality Modeling Language",
International Standard ISO/IEC 14772-1:1997, VRML Consortium, 1997:
http://www.vrml.org/Specifications/VRML97/index.html
19. * * * - Virtual Reality Universe: http://www.vruniverse.com
20. * * * - VRML: http://vrml.sgi.com
21. * * * - VRML Guide: http://www.vapourtech.com/vrmlguide/
22. * * * - VRML Interactive Tutorial: http://www-venus.cern.ch/vrmltut/

17. Organizaii i instituii

1.

* * * - ACM: http://www.acm.org

2.

* * * - Adobe: http://www.adobe.com

3.

* * * - Alliare: http://www.alliare.com

4.

* * * - CWI: http://www.cwi.nl

5. * * * - Facultatea de Informatic!, Universitatea "Alexandru Ioan Cuza", Ia"i:

http://www.infoiasi.ro
6.

* * * - GCA: http://www.gca.org/

7.

* * * - IEEE: http://www.computer.org

8.

* * * - IBM: http://www.ibm.com

9.

* * * - Internet Society (ISOC): http://www.isoc.org

10. * * * - Linux: http://www.linux.org

11. * * * - Microsoft: http://www.microsoft.com
12. * * * - Mozilla: http://www.mozilla.org
13. * * * - Netscape: http://home.netscape.com
14. * * * - Object Management Group: http://www.omg.org
15. * * * - Sun Microsystems: http://www.sun.com
16. * * * - Web 3D Consortium: http://www.web3d.com
17. * * * - World Wide Web Consortium: http://www.w3.org

N - 17

Tehnologii Web

Tehnologii Web

O.

Preambul

A.

Specificarea !i organizarea informa"iilor pe Web

i
1.

ncercare de definire !i istoric

2.

Metodologii

3.

Localizarea resurselor Internet

4.

Protocolul de transfer al hipertextului: HTTP

5.

Securitatea serviciilor Web

A- 1
A- 2
A- 7
A - 24
A - 27
A - 36

B.

Marcarea informa"iilor pentru Web

1.

SGML - Standard Generalized Markup Language

2.

XML - eXtensible Markup Language

B- 1
B- 2

C.

B - 18

Aplica"ii ale XML

C- 1
1.

MathML - limbaj de specificare a expresiilor matematice

2.

RDF - cadru de descriere a resurselor Internet

3.

XUL - limbaj de descriere a interfe"elor cu utilizatorul

C- 2
C - 10

D.

Limbajul HTML (HyperText Markup Language)

C - 27
D- 1

1.

Prezentare a limbajului HTML

2.

HTML Compact

3.

Reformularea HTML n XML

4.

Foi de stiluri

D- 2
D - 20
D - 24
D - 31

E.

Document Object Model (DOM) pentru documente XML/HTML

E- 1

1.

Introducere !i caracterizare

2.

Interfe"e !i implement#ri

3.

DOM Core - nivelul $

4.

DOM nivelul $ pentru HTML

5.

DOM nivelul 2

6.

Procesarea documentelor XML

7.

Concluzii

E- 2
E- 4
E- 5
E - 12
E - 14
E - 20
E - 48
F.

Documente hipermedia pe Web

F- 1

1.

Modele !i metodologii

2.

SMIL - un limbaj pentru prezent#ri multimedia sincronizate pe Web

3.

Extensii multimedia bazate pe timp pentru HTML (HTML+TIME)

F- 2
F - 12
F - 27

II

Tehnologii Web

4.

Efecte multimedia n Internet Explorer 5.5

F - 29

G.

Programarea aplica"iilor Web

1.

CGI (Common Gateway Interface)

2.

PHP (PHP: Hypertext Preprocessor)

3.

ASP (Active Server Pages)

4.

Cookie-uri

5.

Concluzii

G- 1
G- 3
G - 21
G - 54
G - 73
G - 83

H.

JavaScript n paginile Web

H- 1

1.

Istoric !i fundamente

2.

Caracterizare

3.

JavaScript n cadrul paginilor Web

4.

Concluzii

H- 2
H- 5
H - 15
I.

H - 53

Applet-uri !i servlet-uri Java

I- 1
1.

Istoric !i caracterizare

2.

Applet-uri

3.

Scurt# prezentare a servlet-urilor

4.

Dezvoltarea aplica"iilor Java

5.

Prezent !i viitor

I- 2
I- 8
I - 36
I - 41

J.

I - 42

Ingineria Web

J- 1
1.

Proiectarea !i organizarea site-urilor Web

2.

Robo"ii Web

3.

Motoarele de c#utare

4.

WebBroker: comunica"ii orientate-obiect pe Web

J- 2
J - 11
J - 21
J - 37

K.

Realitatea virtual#
K- 1

1.

Introducere n VRML

2.

Func"ionarea unui sistem VRML

3.

Medii virtuale distribuite

4.

Conceperea de aplica"ii VRML

K- 3
K - 48
K - 52
Studiu de caz: o aplica"ie VRML pentru vizualizarea
5.
tridimensional# a interiorului unei cl#diri

K - 60
K - 63

6.

Viitor
K - 67

III

Tehnologii Web

L.

Anexe
L- 1
1.

Sintaxa complet# URL

2.

Elementele HTML 4

3.

Atributele HTML 4

4.

Entit#"ile HTML

5.

Propriet#"ile CSS2

6.

Aplica"ii !i unelte de dezvoltare XML

7.

Nodurile VRML97

L- 2
L- 5
L- 8
L - 18
L - 21
L - 28

M.

Glosar de termeni

N.

Resurse bibliografice

O.

Cuprins

L - 35
M- 1
N- 1
I

IV