Tendinte Actuale in Proiectarea Aplicatiilor Web

Sabin Buraga
(coordonator)
Lenua Alboaie Snic Alboaie Sergiu Dumitriu
Marta Grdea Diana Gorea Sergiu Tauciuc

Tendine actuale n proiectarea i
dezvoltarea aplicaiilor Web

Volumul de lucrri ale celei de a V-a ediii
a workshop-ului <Web /> dedicat tehnologiilor Web

Iai, 26-27 noiembrie 2005

Coperta: Adrian Mironescu i Sabin-Corneliu Buraga

Copyright 2005 Sabin-Corneliu Buraga
http://www.infoiasi.ro/~busaco/

Ultima actualizare: 21 decembrie 2005

Permisiunile de copiere, distribuire i/sau modificare ale acestui material se pot face conform
termenilor stipulai de GNU Free Documentation License, versiunea 1.2.
Coordonatorul i autorii acestui volum nu i asum nici o responsabilitate privind posibilele
erori, omisiuni sau alte pagube ce pot rezulta din utilizarea informaiilor puse la dispoziie de
acest document.
Toate numele de produse i servicii sunt mrci nregistrate ale proprietarilor respectivi.

i

Cuprins
Prefa ................................................. v
Capitolul 1. Prin AJAX, spre Data Web i Semantic Web (Sabin Buraga) .... 1
1. Preambul ........................................... 1
2. De la Web 1.0 la Web 2.0 (Data Web) ........................ 2
2.1 Preliminarii. Caracteristici ale noului Web
2.2 Marcaje (adnotri) definite de utilizator
2.3 Participare, nu doar publicare a datelor
2.4 Descentralizare radical
2.5 ncredere radical. Folosirea standardelor
2.6 Interaciune bogat cu utilizatorul
3. AJAX (Asyncronous JavaScript And XML) ..................... 9
3.1 Caracterizare
3.2 Un prim exemplu: verificarea existenei unui nume de cont-utilizator
3.3 Al doilea exemplu: jurnalizarea pe partea de server a excepiilor aprute
n programele JavaScript executate n cadrul browser-ului
3.4 Aspecte importante n legtur cu realizarea de aplicaii AJAX
3.5 AJAX n contextul REST
3.6 Utilizri i interfee de programare AJAX
4. n loc de concluzii ..................................... 25
Capitolul 2. Democraia pe Web: siturile Wiki (Diana Gorea) ........... 29
1. Conceptul de Wiki .................................... 29
2. Evoluie ............................................ 30
2.1 Ideile care stau la baza noiunii de Wiki
2.2 Inteligena colectiv
3. Principii de proiectare a siturilor Wiki ...................... 32
4. Web 2.0 ............................................ 33
ii Cuprins

5. Aplicaii Wiki ....................................... 34
5.1 MediaWiki
5.2 TWiki
5.3 XWiki
5.4 Alte aplicaii Wiki
6. Concluzii ........................................... 41
Capitolul 3. Aplicaii fr fir bazate pe Web-ul semantic (Sabin Buraga) .... 43
1. Introducere .......................................... 43
2. Prezentare succint a Web-ului semantic ..................... 45
2.1 Preambul
2.2 Niveluri ale Web-ului semantic
3. Specificarea profilului unui dispozitiv wireless ................. 47
3.1 Premise
3.2 Specificarea caracteristicilor
3.3 Avantaje
4. Propunere de implementare .............................. 51
4.1 Arhitectur conceptual
4.2 Utilizri
5. Concluzii ............................................ 53
Capitolul 4. Our Photos: descrierea, regsirea i vizualizarea fotografiilor n cadrul
unui album online partajat (Sergiu Tauciuc) ....................... 55
1. Introducere .......................................... 55
2. Suportul semantic pentru cutare .......................... 56
2.1 Fiierele de descriere RDF
2.2 Fiierele de index XML
3. Aspecte privind implementarea ........................... 61
4. Concluzii ............................................ 70
Capitolul 5. MUMSAI un sistem de autentificare automat
(Lenua Alboaie, Snic Alboaie) .............................. 73
1. Introducere .......................................... 73
2. Abordarea MUMSAI ................................... 73
3. Tehnologii folosite. Detalii de implementare .................. 77
4. Testare ............................................. 81
5. Concluzii ............................................ 81
Cuprins iii

Capitolul 6. Dezvoltarea extensiilor pentru Firefox (Sergiu Dumitriu) .... 83
1. Introducere .......................................... 83
1.1 about:mozilla
1.2 Firefox
2. Structura Firefox ....................................... 85
2.1 Mozilla Application Framework
2.2 Chrome
2.3 Navigatorul Firefox
2.4 Plugin-uri
2.5 Fiierele extensions.ini/extensions.rdf
2.6 Extensiile efective
3. Extensiile Firefox ....................................... 90
3.1 Introducere
3.2 Exemple
3.3 Structura unei extensii
3.4 Instalarea unei extensii
4. Tehnologii ............................................ 94
4.1 XUL interfee independente de platform
4.2 JavaScript mic, dar puternic
4.3 Localizare aceeai aplicaie, oricte locaii
4.4 Stiluri, teme, aspecte
5. Concluzii ............................................ 103
Capitolul 7. Valene CSS (Marta Grdea) ......................... 105
1. Introducere .......................................... 105
2. Motivaie ............................................ 107
3. Impactul foilor de stiluri ................................. 109
3.1 Form i coninut
3.2 Static i dinamic
3.3 Efecte speciale
4. De la idee la punerea n practic ........................... 123
4.1 Cruda realitate
4.2 Posibile soluii
5. Concluzii ............................................ 125

Prefa

Fiecare este arhitectul propriului viitor.
Appius Claudius

Incontestabil, prezentul tiinei calculatoarelor (Computer Science) este dominat
de tehnologiile Internet, n general, i de cele Web, n special. Circumscris aces-
tui domeniu, ncepnd cu anul 2001 este organizat anual, la Iai, workshop-ul
<Web /> dedicat variatei suite de tehnologii Web.
Iniiat i coordonat de Dr. Sabin-Corneliu Buraga, evenimentul are drept prin-
cipale teme de interes att proiectarea i dezvoltarea de aplicaii Web sau dedi-
cate spaiului WWW, ct i interaciunea Web. Pe parcursul anilor, n cadrul
<Web /> au fost dezbtute de ctre specialiti ai mediului academic i indus-
trial subiecte referitoare la maniera bazat pe meta-limbajul XML de organi-
zare, stocare, descriere i regsire a datelor, proiectarea i implementarea
siturilor Web complexe, crearea de interfee-utilizator ergonomice, exploatarea
tehnologiilor Web avansate n diverse arii i circumstane etc.
Aflat la cea de a V-a ediie, workshop-ul a avut loc n perioada 26-27 noiembrie
2005, fiind organizat de WebGroup grup de interes n domeniul tehnologiilor
Web i de Asociaia Studenilor Informaticieni din Iai (ASII), activnd n cadrul
Facultii de Informatic a Universitii Alexandru Ioan Cuza din Iai. Detalii
privind programul tiinific i modul de desfurare a evenimentului sunt dis-
ponibile la adresa http://www.infoiasi.ro/~web/.
Volumul de fa cuprinde o parte dintre numeroasele contribuii expuse la ul-
tima ediie a atelierului <Web />, reprezentnd variante extinse ale prezentri-
lor avndu-i drept autori pe Lenua Alboaie, Snic Alboaie, Sabin-Corneliu Buraga,
Sergiu Dumitriu, Marta Grdea, Diana Gorea i Sergiu Tauciuc, absolveni sau cadre
didactice ale Facultii de Informatic din Iai.
Aceast lucrare aduce n atenia cititorilor n principal, specialiti sau viitori
specialiti activnd n domeniul Web-ului o serie de aspecte privind Web-ul
semantic, comunitile virtuale, folosirea eficient a stilurilor, implementrile
destinate dispozitivelor fr fir, extensiile programelor de navigare sau utiliza-
rea serviciilor Web, surprinznd tendinele actuale de proiectare i dezvoltare a
aplicaiilor Web.

Dr. Sabin-Corneliu Buraga
Iai, 17 decembrie 2005

1

Capitolul 1
PRIN AJAX, SPRE DATA WEB I SEMANTIC WEB
Sabin-Corneliu Buraga
Facultatea de Informatic, Universitatea Alexandru Ioan Cuza din Iai
Str. G-ral. Berthelot, nr. 16 400783 Iai, Romnia
busaco@infoiasi.ro http://www.infoiasi.ro/~busaco/
Rezumat. Capitolul de fa va realiza o prezentare general a AJAX (Asynchronous JavaScript
And XML), suit de tehnologii de transfer asincron de informaii XML, n contextul evoluiei
spaiului World-Wide Web ctre aa-numitul stadiu de Web al datelor (Data Web), etap pre-
mergtoare a Web-ului semantic. Se vor ilustra, de asemenea, o serie de exemple practice de
implementare de script-uri AJAX pentru mbuntirea interaciunii cu utilizatorul.
Cuvinte-cheie: asincronism, XML, interaciune, Web semantic, proiectare Web, scripting.
1. PREAMBUL
Unul dintre cele mai importante i de succes servicii ale Internetului,
World-Wide Web-ul mai pe scurt Web sau spaiul WWW , a fost instituit la
CERN (Centre Europen pour la Recherche Nuclaire Centrul European de Cerce-
tri Nucleare de la Geneva) n anul 1989, graie viziunii lui Sir Tim Berners-Lee.
Acesta, mpreun cu Robert Caillau i o echip de specialiti, a propus un sis-
tem informatic distribuit, scopul principal urmrit fiind facilitarea accesului ra-
pid la informaiile tehnice cuprinse n manualele de utilizare a calculatoarelor.
n contextul apariiei Web-ului, dou mari direcii precursoare trebuie menio-
nate: dezvoltarea hipertextului (sau a procesrii computerizate a documentelor
electronice complexe) i dezvoltarea protocoalelor Internet care au fcut posibi-
l comunicarea global dintre reelele de calculatoare. Data de 12 noiembrie
1990 este considerat ziua de natere oficial a Web-ului.
Web-ul reprezint un sistem de distribuie local sau global a informaiilor hi-
permedia (Berners-Lee, 1999). Din punct de vedere tehnic, spaiul Web pune la
dispoziie un sistem global i standardizat de comunicare multimedia, informa-
iile fiind organizate asociativ i distribuite n funcie de cererile utilizatorilor,
funcionnd conform modelului client/server. Putem vedea Web-ul ca fiind un
2 Sabin-Corneliu Buraga

spaiu informaional compus din elemente de interes, denumite resurse, desem-
nate de identificatori globali denumii URI (Uniform Resource Identifiers).
Scopurile originare principale ale spaiului WWW au fost acelea de a oferi o
modalitate de comunicare inter-uman prin partajarea cunotinelor i posibili-
tatea exploatrii n manier distribuit a puterii de calcul a computerelor conec-
tate la Internet (Berners-Lee, 1989). Una dintre prioritile Consoriului Web
(W3C) organism care coordoneaz i contribuie la standardizarea tehnologii-
lor Web este aceea de a pune la dispoziie o modalitate, bazat pe XML
Extensible Markup Language (Bray et al., 2004), de prelucrare de ctre calculator a
informaiilor. Soluia este prezentat n (Berners-Lee et al., 2001) prin interme-
diul unui scenariu despre ceea ce ar trebui s fie cunoscut sub numele de Web
semantic a se vedea cele descrise n capitolul 3 al volumului de fa.
Ideea de baz este aceea ca spaiul World-Wide Web s reprezinte o pnz
consistent de relaii stabilite ntre obiecte identificabile (n prezent prin identi-
ficatori uniformi de resurse, iar ulterior prin nume stabilite de utilizatori), dez-
voltarea viitoare a Web-ului fiind focalizat asupra mainilor, nu numai asupra
oamenilor (Buraga, 2004a).
n acest capitol, vom lua n consideraie principalele caracteristici ale nou-
lui Web, denumit i Data Web, ca etap preliminar i necesar constituirii
Web-ului semantic. n cadrul sub-capitolului 2, vom trece n revist schimbrile
majore aduse de noile aplicaii Web, n ceea ce privete suportul pentru realiza-
rea de marcaje (tag-uri) definite de utilizatori, maniera deschis de participare la
stilul de via Web ne referim n principal la Weblog-uri , gradul ridicat de
descentralizare a datelor i serviciilor existente, ncrederea radical i interaci-
unea tot mai bogat i complex cu utilizatorul. n acest context, urmtorul sub-
capitol descrie suita de tehnologii AJAX (Asynchronous JavaScript And XML), n-
soind expunerea cu diverse exemple concludente, dar i cu unele detalii pri-
vind maniera de proiectare i implementare a aplicaiilor aliniate modelului
AJAX. Tot n cadrul sub-capitolului 3 se realizeaz o comparaie ntre AJAX i
arhitectura REST.
Capitolul se ncheie cu o serie de concluzii referitoare la evoluia viitoare
a spaiului World-Wide Web, mai ales n ceea ce privete componenta social a
acestuia (Social Web).
2. DE LA WEB 1.0 LA WEB 2.0 (DATA WEB)
2.1 Preliminarii. Caracteristici ale noului Web
Actualmente, se constat o tranziie de la vechiul Web la noul Web, spaiul
WWW fiind vzut mai mult ca o platform software, n care utilizatorul i con-
troleaz propriile date, punndu-le n mod uzual la dispoziie altora, prin in-
termediul unor instrumente colaborative.
Prin AJAX, spre Data Web i Semantic Web 3

Astfel, asistm la proliferarea de servicii specializate disponibile graie tehno-
logiilor Web, atenia focalizndu-se asupra lor i nu asupra pachetelor software,
conglomerate de funcionaliti, de cele mai multe ori puin importante pentru
marea majoritate a utilizatorilor.
De asemenea, Web-ul poate fi considerat un mediu participativ, cel mai preg-
nant aspect fiind al siturilor/aplicaiilor aliniate curentului social networking
(Drummond et al., 2004). Ne putem referi la comuniti virtuale, Weblog-uri, si-
turi de tip Wiki, aplicaii de partajare a imaginilor, a notielor, a semnelor de
carte (adrese Web), situri permind clasificarea i comunicarea global prin
intermediul aa-numitelor folksonomies (Mathes, 2004). Toate acestea au putut fi
posibile datorit unor tehnologii standardizate bazate pe XML precum: RDF
Resource Description Framework (Manola & Miller, 2004), RSS Really Simple
Syndication (RSS) sau FOAF Friend Of A Friend (Dodds, 2004; FOAF).
O alt caracteristic a Web-ului este cea a scalabilitii, serviciile oferite pu-
tnd fi invocate ntr-o manier transparent, de ctre oricine, n mod ubicuu.
Asistm la crearea i consolidarea unei arhitecturi orientate spre servicii (SOA
Service-Oriented Architecture), concept privind maniera de dezvoltare de aplicaii
distribuite slab conectate (loose coupling) care pot fi exploatate de utilizatori
(umani sau nu) prin intermediul unor tehnologii deschise precum serviciile
Web construite cu SOAP (Simple Object Access Protocol) ori REST
(REpresentational State Transfer) detalii n lucrrile (He, 2003) i (Erl, 2005). De
asemenea, putem considera c aplicaiile software pot fi rulate de oriunde, in-
dependente de platform i de dispozitiv.
Graie unor tehnologii i aplicaii Web deschise, datele pot fi transformate n
orice format dorit de utilizator, nsui utilizatorul contribuind la editarea aces-
tora, prin intermediul unor instrumente precum blog-urile sau Wiki-urile
(Buraga, 2004b; Buraga, 2005). Mediatizarea schimbrilor survenite pe un sit se
poate realiza uor via coninuturi RSS ori Atom.
Nu putem s nu menionm faptul c, n prezent, Web-ul ncurajeaz consti-
tuirea aa-numitei inteligene colective (OReilly, 2005). Prin stabilirea unei adrese
Web pentru un fragment de cunotine coninnd informaii i/sau programe,
i apoi prin partajarea acelei adrese cu alii, autorii pun n practic procesul de-
mocratic urmtor: orice persoan aparinnd comunitii Web poate arta c
anumite informaii sunt interesante (bune) prin crearea unei legturi ctre re-
sursa al crei coninut include respectivele informaii, pentru o eventual utili-
zare ulterioar. Utilizatorii nu copiaz documentul iniial, pentru c ar fi prea
costisitor; cel mai ieftin i eficient mod de a accesa i propaga ideile coninute de
respectivul document este prin intermediul adresei Web, realizndu-se o leg-
tur hipertext ctre acel fragment de informaie. Aceasta alimenteaz ciclul se-
leciei naturale n reprezentarea cunotinelor: utilizarea determin comuni-
tatea, care rafineaz la rndul ei, permanent, ontologia comun (Buraga, 2004a).
Succesul actualelor motoare de cutare, a marilor magazine virtuale i a
e-comunitilor reprezentate n principal de blog-uri i Wiki-uri se datoreaz toc-
mai acestui aspect.

2.2 Marcaje (adnotri) definite de utilizator
Ceea ce apare pregnant n cazul Web-ului datelor (Data Web) este faptul c utili-
zatorii pot folosi propriile lor marcaje (tag-uri) astfel nct s adnoteze informa-
iile pe care le pun sau au la dispoziie, specificnd astfel meta-date.
n Web-ul vechi, meta-datele sunt create de profesioniti specializai pe un
anumit domeniu, astfel aprnd vocabulare privitoare la creaiile intelectuale
e.g., MARC (MAchine Readable Cataloging) sau OPAC (Online Public Access
Catalogs), avnd drept precursori schemele de catalogare i clasificare folosite
de biblioteci de exemplu, sistemul zecimal Dewey.
O alternativ la acestea o reprezint modalitatea ca nsui autorul s specifice
meta-datele dorite, una dintre maniere fiind cea oferit de DCMI (Dublin Core
Metadata Initiative), cu un anume succes n unele arii de cunoatere, mai ales n
ceea ce privete descrierea resurselor (electronice sau nu) detalii la (DCMI).
Ca i n cazul precedent, mulimea de marcatori permii este una fixat, pentru
orice noi construcii trebuind gsite alte vocabulare publice, de multe ori inexis-
tente.
O a treia soluie este aceea de a permite utilizatorilor s-i defineasc proprii
marcatori, ntr-o manier explicit, pentru a putea fi ulterior folosii de aplicaii.
O metod considerat deja venerabil este cea oferit de Weblog-uri, dar
exist i alte maniere precum marcarea coninutului (tagging content) via in-
strumente ca Del.icio.us ori Flickr.com, veritabile aplicaii aliniate direciei social
bookmarking tools (Hammond et al., 2005).
Se instituie astfel aa-numita arhitectur a participrii (arhitecture of partici-
pation), conform (OReilly, 2003), care pune la dispoziie aplicaiile necesare
definirii de tag-uri proprii, ntr-o manier nestructurat ori liber structurat de
clasificare a coninutului resurselor Web. Utilizatorii sunt capabili s eticheteze,
conform propriilor criterii, adrese de situri Web ori reprezentri de resurse, ac-
tivitate referit prin termeni precum folksonomy (folk + taxonomy), folk classifi-
cation, ethno-classification, distributed classification sau social classification
(Hammond et al., 2005; Mathes, 2004).
Printre aplicaiile noului Web se numr Connotea, del.icio.us, Flickr.com,
Frassle, Furl, Spurl.net i unalog, cu implementri n limbaje ca Perl, Python, PHP
ori Java detalii n (Hammond et al., 2005), (Lund et al., 2005) i (Mathes, 2004).
2.3 Participare, nu doar publicare a datelor
n mod pregnant, aici o cvasi-supremaie o dein Weblog-urile. Un Weblog (sau
blog, pe scurt) reprezint o pagin Web care conine diverse fragmente de in-
formaie puse la dispoziie de ctre o persoan posibililor vizitatori (Buraga,
2005). Termenul provine de la cuvintele Web (WWW) i log (jurnal) i a fost
introdus n premier de Jorn Barger n decembrie 1997.

Un blog poate fi considerat un mijloc de comunicare inter-personal, natura
sa putnd varia de la o form de jurnal on-line pn la depozit de informaii
privitoare la un domeniu (tehnic sau nu). Un astfel de blog este redactat (ntrei-
nut) fie de o singur persoan, fie de un grup. Lund n consideraie tematica
abordat, un blog poate fi ncadrat n urmtoarele categorii principale:
personal,
comunitar,
oferind nouti,
specializat,
colaborativ,
politic,
corporatist.
Se consider c fenomenul Weblog a nceput s ia amploare ncepnd cu anul
2000 (n era vechiului Web), unii analiti estimnd c actualmente pe Web
apar zilnic peste 80 de mii de noi blog-uri, ntreinute att de anonimi, ct i de
diverse personaliti provenind dintr-o sumedenie de domenii (nu neaprat ce-
le viznd informatica). n ianuarie 2005, revista Fortune listeaz un numr de
8 blogger-i (persoane care i redacteaz propriile blog-uri) crora oamenii de afa-
ceri ar trebui s nu le ignore comentariile publicate pe Web. Din aceasta se poa-
te deduce faptul c blog-ul reprezint o componente-cheie a noului Web.
Dup Greg Hard, blogging-ul nu reprezint doar un blog. Este o manier de
partajare la nivelul ntregii lumi a opiniilor i gndurilor personale. Dac pu-
nem la dispoziie informaii de interes, atunci trebuie s partajm hiper-legturi
i s facem disponibile comentariile din cadrul altor blog-uri. Legturile hiper-
text reprezint punctul forte al Web-ului, iar n cazul Weblogging-ului ele sunt
elementul cheie. Din punctul de vedere al strategiei realizrii afacerilor elec-
tronice sau a instituirii unei comuniti on-line, blogging-ul este una dintre cele
mai rapide ci de actualizare a sitului propriu (Eric Dolecki).
De asemenea, un alt context de utilizare a blog-urilor este cel reprezentat de
intranetul ntreprinderilor virtuale, un blog putnd deveni un instrument indis-
pensabil de inter-comunicare la nivel de echipe de lucru n cadrul unui proiect.
Din aceast perspectiv, blog-ul poate fi o component important a aplicaiilor
de tip groupware (teamware).
Coninutul unui blog nu trebuie s fie exclusiv textual, existnd blog-uri care
ofer prezentri multimedia (audio de succes sunt MP3 blog-urile, fotografii,
video denumirea acestei categorii fiind videoblog sau, pe scurt, vlog). Alte deta-
lii pot fi consultate n lucrrile (Buraga, 2004b), (Buraga, 2005) i (Doctorow et
al., 2002).

La succesul fenomenului blogging au contribuit:
tehnologia RSS/Atom folosit pentru mediatizarea (syndication) coninu-
tului siturilor Web; formatele RSS i Atom permit calculatoarelor s
interschimbe informaii privitoare la coninutul siturilor Web (n acest
caz, al blog-urilor). Fiind bazat pe meta-limbajul XML, un document
RSS/Atom este uor de procesat sau de creat, existnd diverse instru-
mente numite agregatori de coninut care extrag, sumarizeaz i sto-
cheaz datele RSS/Atom;
instituirea de relaii ntre blog-uri graie legturilor permanente (perma-
nent links); astfel, un mesaj poate fi accesat fie direct, fie parcurgnd lista
mesajelor (numite i post-uri) existente;
crearea aa-numitei blogosfere, mulimea de blog-uri interconectate pu-
nnd astfel bazele unei reele sociale (social network) n stilul peer-to-peer
pentru facilitarea realizrii de discuii i interschimb de cunotine n
manier sincron sau asincron a se vizita situri precum vezi Friendster,
LinkedIn, Orkut etc.
Conform (OReilly, 2005), utilizatorii adaug valoare resurselor Web (users
add value). Companiile aliniate noului Web ofer sau vor trebui s ofere in-
strumente privind agregarea datelor-utilizator i de a crete valoarea acestora ca
efect colateral utilizrii aplicaiilor puse la dispoziie. Participarea utilizatorilor
va reprezenta o parte fundamental a arhitecturii aplicaiilor Web viitoare.
2.4 Descentralizare radical
Web-ul datelor implic o descentralizare complet a datelor, serviciilor i apli-
caiilor. Fiecare aplicaie Web important a zilelor noastre se bazeaz pe o baz
de date specializat de exemplu, Google pe indexul resurselor gsite de robo-
ii Web, Amazon pe baza de date privitoare la produsele disponibile, MapQuest
pe baze de date referitoare la hri geografice. n vechiul Web informaiile din
cadrul acestor baze de date erau i sunt n continuare protejate de copyright.
ncurajnd utilizatorii s participe cu propriile date (a se vedea i seciunile
2.2 i 2.3), aplicaiile noului Web vor fi capabile s ofere noi moduri de
(re-)utilizare i de (re-)agregare a informaiilor, eventual contribuind la mbog-
irea semantic a acestora.
Mai mult, un serviciu devine automat mai bun cu ct mai muli oameni l uti-
lizeaz, principiu de baz al Web-ului 2.0, conform (OReilly, 2005). Un exem-
plu este cel al aplicaiei BitTorrent, n care fiecare utilizator i ofer resursele
proprii n crearea unei arhitecturi Internet descentralizate de transfer peer-to-
peer al fiierelor. Fiierele partajate sunt divizate n fragmente care pot fi prelua-
te din diverse locaii i asamblate la destinatar. Cu ct un fiier devine mai po-
pular, cu att va fi mai rapid transferat, din moment ce va fi deinut de un
numr mai mare de utilizatori i, deci, va putea fi preluat n paralel din surse
multiple.

2.5 ncredere radical. Folosirea standardelor
Surprinztor sau poate nu, una dintre categoriile de aplicaii ale Web-ului date-
lor este cea a siturilor de tip wiki care permit utilizatorilor s adauge diverse ti-
puri de coninuturi, dnd n plus posibilitatea vizitatorilor s editeze acel
coninut. Termenul wiki se refer i la software-ul colaborativ utilizat pentru
crearea acestor tipuri de situri (Buraga, 2005) a se consulta, pentru detalii, ca-
pitolul 2.
Un exemplu important este Wikipedia.com, fiecare intrare a acestei enciclope-
dii deschise putnd fi editat de orice utilizator de pe glob, reprezentnd astfel
un experiment interesant de ncredere complet. Se aplic, astfel, dictonul lui
Eric Raymond, n contextul originar al scrierii de software open source: avnd
suficieni ochi, orice greeal este relevat (with enough eyeballs, all bugs are
shallow). Putem considera c Wikipedia constituie o schimbare profund n ce-
ea ce privete dinamica i calitatea crerii de coninut.
Desigur, nu trebuie s ignorm faptul c protecia proprietii intelectuale
limiteaz re-utilizarea informaiilor i previne experimentrile. Astfel, conform
(OReilly, 2005), atunci cnd beneficiile provin din adoptri colective de infor-
maii i nu din restricii private, trebuie creat cadrul unei ct mai facile utilizri
a acelor informaii, prin urmarea standardelor (deschise) existente i prin recur-
gerea la licene de utilizare ct mai puin restrictive some rights reserved n
loc de all rights reserved.
Mai mult, aplicaiile trebuie sau vor trebui proiectate avnd n vedere inter-
operabilitatea, tratarea utilizatorilor de zi cu zi ca fiind co-dezvoltatori ai sof-
tware-ului i adoptarea unor modele de programare uoare (lightweight). Un
exemplu este cel al folosirii unor conglomerate de tehnologii precum AJAX, RSS
sau REST, n detrimentul unora mai sofisticate.
2.6 Interaciune bogat cu utilizatorul
Poate mai mult dect n cazul interfeelor clasice, utilizatorii doresc flexibilitate,
internaionalizare i calitate de la interfeele expuse de siturile/aplicaiile Web
actuale. Spaiul WWW a fost conceput cu scopul declarat de a fi utilizat de oa-
meni, deci interfeele Web trebuie s ofere aceleai faciliti pe care le regsim la
interfeele tradiionale (Buraga, 2003a):
funcionalitatea se refer la ce anume o interfa realizeaz; acest scop es-
te ndeplinit pe Web prin adoptarea unor tehnici de programare la nivel
de client (navigator) prin intermediul programelor script (i.e., JavaScript
n contextul HTML-ului dinamic), a applet-urilor Java, a prezentrilor
Flash sau a controalelor ActiveX sau la nivel de server Web folosin-
du-se script-uri CGI (Common Gateway Interface), concepute n diverse
limbaje de programare (C, C++, Perl, Python etc.), servere de aplicaii
Web (JSP, PHP, Zope etc.), servlet-uri Java sau componente .NET vezi
(Buraga, 2001; Buraga, 2003b; Buraga, 2004b); o alt abordare este cea uti-

liznd ageni software sau componente intermediare middleware
(CORBA, DCOM, servicii Web); interfeele Web trebuie s fie modulare
elementele de interfa, disponibile local sau la distan, pot fi legate n
manier dinamic, graie hipertextului;
utilizabilitatea aceast proprietate specific modul cum o interfa satis-
face funcionalitatea sa; exist o serie de factori, majoritatea calitativi,
pentru determinarea acestui aspect: timpul de nvare, uurina n utili-
zare, performana n utilizare, ergonomia; interfeele Web motenesc uti-
lizabilitatea aplicaiilor de navigare pe Web i a documentelor (X)HTML
care pot fi vizitate, dar este nc dificil de manipulat informaiile unui sit
Web bogat n elemente multimedia (n special dac include applet-uri Ja-
va, prezentri Flash sau componente ActiveX); cerinele ar fi ca uneltele
de implementare (editoarele de cod HTML, generatoarele de script-uri
etc.) s includ instrumente pentru msurarea i optimizarea utilizabili-
tii;
izolarea interfeei de aplicaia propriu-zis n cele mai multe cazuri, izola-
rea prezentrii datelor de logica aplicaiei este aproape imposibil pe
Web: funcionalitatea (programele rulate pe partea de server sau de cli-
ent) alterneaz cu interfaa (elementele HTML), aceasta conducnd la di-
ficulti majore n structurarea, implementarea i meninerea unui sit
Web de dimensiuni medii sau mari (coninnd peste 100 de documente);
imperios necesar este s se poat reutiliza anumite fragmente de interfa
pentru aplicaii diferite, operndu-se eventual doar modificri minore
actualmente, acest lucru este aproape imposibil, dei exist un anumit
suport pentru mplinirea acestui deziderat (e.g., foile de stiluri CSS
(Cascading Style Sheets) externe, directivele SSI (Server-Side Includes),
componentele ASP.NET sau JavaBeans, folosirea unor servere de aplicaii
ncurajnd adoptarea abloanelor de proiectare Web);
adaptabilitatea interfaa trebuie s ofere suport pentru interaciuni
multimodale, acest aspect devenind foarte important n contextul interfe-
elor Web (Candell & Raggett, 2002), prin proliferarea diferitelor dispozi-
tive mobile care pot prezenta mijloace diverse de intrare/ieire;
instrumentele de implementare ale interfeelor Web vor trebui s fie ca-
pabile s pun la dispoziie faciliti de interacionare multimodal cu
utilizatorii (via voce, gesturi, scris de mn etc.);
consistena n prezent este dificil s se asigure consistena unui sit Web
(Buraga, 2005), n special n cazul adoptrii unor tehnici multiple de pro-
iectare i din cauza lipsei de instrumente adecvate care s instruiasc de-
signerii Web s utilizeze exclusiv elemente consistente (asigurndu-se
consistena coninutului, a structurilor navigaionale, a dispunerii spaia-
le etc.).
Interfeele noului Web trebuie s ia n calcul avantajele oferite de mediul
WWW n ceea ce privete ubicuitatea, disponibilitatea distribuirii datelor via

hipertext, posibilitile de cutare etc. De asemenea, vor trebui asigurate aa
cum am menionat mai sus o interaciune sofisticat, similar celei oferite de
interfeele-utilizator convenionale, i o ct mai bun utilizabilitate.
Drept aplicaii pionere care pun la dispoziie o interaciune Web avansat cu
utilizatorul pot fi menionate Gmail, Google Maps i Writely, iar urmtorii ani vor
aduce cu siguran n atenia publicului larg alte tipuri de aplicaii aliniate noi-
lor direcii de interaciune.
Una dintre componentele-cheie ale noului Web n ceea ce privete interac-
iunea cu utilizatorul este suita de tehnologii deschise cunoscut sub numele de
AJAX (Asynchronous JavaScript And XML), prezentat pe larg n urmtorul sub-
capitol al volumului de fa.
3. AJAX (ASYNCHRONOUS JAVASCRIPT AND XML)
3.1 Caracterizare
Termenul AJAX aparine lui Jesse James Garrett i reprezint o suit de tehno-
logii deschise, ncorpornd (Eernisse, 2005):
limbaje standardizate de prezentare a datelor, precum XHTML
Extensible HTML i CSS Cascading Style Sheets (W3C);
redare i interaciune via standardul DOM Document Object Model (Le
Hors et al., 2000; Buraga, 2001; W3C);
interschimb i manipulare de date prin XML i/sau XSLT Extensible
Stylesheet Language Transformations (Clark, 1999);
transfer asincron de date via obiectul XMLHttpRequest (McLelland, 2005);
procesare prin limbajul ECMAScript/JavaScript (ECMA).
Componenta de baz este obiectul XMLHttpRequest pus la dispoziie de ctre
browser-ul Web. Acest obiect permite realizarea de cereri HTTP (e.g., GET i
POST) dintr-un program rulnd la nivel de client (browser) spre o aplicaie de pe
server, ntr-un mod asincron. Astfel, coninutul paginilor Web nu mai trebuie re-
ncrcat n ntregime. n mod uzual, datele vehiculate ntre programele client i
server sunt marcate n XML. Exist cazuri n care se poate folosi o alt convenie
de marcare a datelor un exemplu este prezentat n (Eernisse, 2005).
Modul de implementare a obiectului XMLHttpRequest depinde de navigator:
Mozilla avnd versiunea mai mare sau egal cu 1.0 i toate versiunile de Firefox
l ofer ca obiect nativ, iar n Internet Explorer 5.0 sau ulterior poate fi instaniat
drept obiect ActiveX. De asemenea, navigatorul Safari disponibil pe platformele
Mac OS l implementeaz ncepnd cu versiunea 1.2. La fel, cele mai recente
versiuni ale programului Opera ofer suport pentru XMLHttpRequest.


Figura 1. Transferul datelor XML ntre client i server (fereastra navigatorului, n stnga,
i documentul XML stocat la nivel de server, n dreapta)

Dialogul dintre aplicaiile client i server este ilustrat n figura 1.
Principalele metode care vor fi folosite efectiv de un dezvoltator de aplicaii
AJAX sunt urmtoarele:
open() iniiaz (deschide) o conexiune HTTP cu serverul, trimind o
cerere (uzual, GET sau POST) ctre acesta; desigur, aplicaia de pe server
cu care va avea loc schimbul de date va fi desemnat de un URI;
send() transmite date, n manier asincron, ctre aplicaia rulnd pe
server;
abort() abandoneaz transferul curent;
setRequestHeader() specific diverse cmpuri ale antetului HTTP (de
exemplu, se poate stabili o anumit valoare pentru cmpul Content-Type).
Proprietile de baz ale obiectului sunt detaliate n continuare:
readyState conine codul de stare a transferului (e.g., valoarea 4 specific
faptul c transferul datelor s-a efectuat complet);
status reprezint codul de stare HTTP ntors de serverul Web; de
exemplu, 200 (Ok), 404 (Not Found), 500 (Server Error);
statusText desemneaz irul de caracter explicnd n limbaj natural co-
dul de stare obinut;
onreadystatechange desemneaz funcia care va fi invocat la modificri-
le privind schimbarea strii de transfer a datelor (reamintim faptul c da-
tele sunt transmise n manier asincron i deci trebuie s fim notificai
asupra schimbrii evenimentelor ce pot surveni pe parcursul transferu-
lui).

3.2 Un prim exemplu: verificarea existenei unui nume de cont-utilizator
n cadrul acestui prim exemplu, vom considera urmtorul scenariu: un vizitator
al sitului dedicat workshop-ului <Web /> dorete s se nscrie ca participant,
pentru aceasta trebuind s completeze un formular care i va solicita un nume
de cont i o adres de e-mail. Numele de cont trebuie s fie unic, desemnnd f-
r ambiguiti acel utilizator.
O prim soluie ar fi s verificm pe server existena numelui de cont, prin
consultarea unei baze de date i generarea unui document XHTML nou care va
fi transmis clientului n cazul n care numele de cont este deja ales de altcineva
ori atunci cnd dorim s semnalm faptul c informaiile au fost stocate la nivel
de server. Aceasta conduce la rencrcarea ntregului coninut al paginii Web,
prin efectuarea unui transfer suplimentar. De asemenea, utilizatorul nu va pu-
tea cunoate dac numele de cont ales este incorect dect dup completarea tu-
turor cmpurilor formularului Web i acionarea butonului de tip submit.
A doua soluie, firesc, va face apel la maniera AJAX de transfer asincron al
datelor i este inspirat de (McLellan, 2005). La apariia evenimentului de pier-
dere a focus-ului asupra cmpului de introducere a numelui de cont, prin inter-
mediul unui program JavaScript se va realiza un transfer asincron ctre
aplicaia rulnd pe server, aplicaie care va ntoarce rspunsul privind existena
numelui de cont. n acest caz, utilizatorul va primi imediat feedback pozitiv de la
aplicaie, trebuind s specifice un alt nume. Desigur, verificarea existenei con-
tului respectiv va trebui realizat la nivel de server i dup apsarea butonului
submit, deoarece navigatorul ar putea s nu aib implementat obiectul
XMLHttpRequest sau vizitatorul are dezactivat suportul pentru JavaScript ori nu
introduce un nume de cont valid (inexistent).
Formularul electronic de interaciune cu utilizatorul ar putea avea structura
urmtoare:
<form action="adauga.php" method="get">
Contul : <input type="text" name="nume"
title="Introduceti numele de cont dorit"
onblur="javascript:verificaNume(this.value, '')" />
<span class="ascuns" id="eroareNume">
Numele deja exista, alegeti altul...
</span>
<br />
Adresa: <input type="text" name="adresa"
title="Introduceti adresa d-voastra (e-mail sau URI)" />
<br />
<input type="submit" value="Inscriere"
title="Apasati aici pentru a va inscrie" />
</form>
Se remarc faptul c apare un element <span> care va conine mesajul de
eroare afiat utilizatorului n cazul n care numele de cont deja exist memorat
pe server. Iniial, acest element va fi ascuns i va fi afiat prin modificarea pro-
prietii de stil display oferit de CSS.

Clasele de proprieti CSS sunt specificate n antetul documentului XHTML
astfel:
<style type="text/css">
input[type="text"]:focus {
background: #EEE;
border-color: black
}
.eroare { /* stiluri pentru mesajul de eroare */
display: inline;
color: red;
background-color: yellow;
}
.ascuns { /* stiluri pentru ascunderea mesajului */
display: none;
}
</style>
La apariia evenimentului onblur va fi apelat funcia JavaScript
verificaNume() care va avea n responsabilitate efectuarea transferului asincron
ctre o aplicaie PHP rulnd pe server ce va apela o metod de verificare a exis-
tenei numelui de cont. Att cererea, ct i rezultatul obinut vor fi marcate n
XML.
Codul-surs al funciei verificaNume() este urmtorul:
// functia de verificare a existentei unui nume de persoana
function verificaNume (nume, raspuns) {
// avem un raspuns?
if (raspuns != '') {
// preluam via metodele DOM elementul cu id='eroareNume'
// pentru a afisa mesajul de eroare
mesaj = document.getElementById ('eroareNume');
// schimbam stilul de afisare (in caz de eroare vor fi aplicate
// proprietatile de stil din clasa 'eroare',
// altfel textul va fi ascuns
mesaj.className = raspuns == 1 ? 'eroare' : 'ascuns';
} else {
// nu e nici un raspuns setat, vom verifica
// trimitind o cerere asincrona catre server
incarcaXML ('http://www.sit.org/verifica.php?nume=' + nume);
}
}
Dac rspuns a fost returnat, prin intermediul DOM vom prelua coninutul
elementului <eroareNume> (al documentului XML transmis de aplicaia de pe
server) care va conduce, eventual, la modificarea proprietilor de stil asociate
elementului <span> descris mai sus.
Cererea asincron ctre programul PHP rulnd pe server va fi realizat de
funcia incarcaXML() al crei cod este dat mai jos:
var cerere; // cererea catre serverul Web

// incarca un document XML desemnat de 'url'
function incarcaXML (url) {
// verificam existenta obiectului XMLHttpRequest
if (window.XMLHttpRequest) {
// exista suport nativ (Mozilla, Firefox)
cerere = new XMLHttpRequest ();

// stabileste functia de tratare a starii incarcarii
cerere.onreadystatechange = trateazaCererea;
// preluam documentul prin metoda GET
cerere.open ("GET", url, true);
cerere.send (null);
}
else if (window.ActiveXObject) {
cerere = new ActiveXObject ("Microsoft.XMLHTTP");
if (cerere) { // se poate folosi obiectul ActiveX in MSIE
// preluam documentul prin metoda GET
cerere.onreadystatechange = trateazaCererea;
cerere.open ("GET", url, true);
cerere.send ();
}
} // final de if
}
Dup cum se poate remarca, se verific disponibilitatea obiectului
XMLHttpRequest n cadrul navigatorului Web. Modul de transfer se va face prin
metoda GET, iar tratarea evenimentelor de transmisie asincron a datelor are
loc n funcia trateazaCererea():
// functia de tratare a schimbarii de stare a cererii
function trateazaCererea () {
// verificam daca incarcarea s-a terminat cu succes
if (cerere.readyState == 4) {
// verificam daca am obtinut codul de stare '200 Ok'
if (cerere.status == 200) {
// procesam datele receptionate
// (preluam elementul radacina al documentului XML)
raspuns = cerere.responseXML.documentElement;
metoda =
raspuns.getElementsByTagName('metoda')[0].firstChild.data;
rezultat =
raspuns.getElementsByTagName('rezultat')[0].firstChild.data;
// evaluam metoda
eval ( metoda + '(\'\', rezultat)');
}
// eventual, se pot trata si alte coduri de stare (404, 500 etc.)
else { // aceasta alertare nu foloseste prea mult...
alert ("A aparut o problema la transferul datelor XML:\n" +
cerere.statusText);
}
} // final de if
}
Datele XML care vor fi recepionate reprezint un nume de metod n ca-
zul nostru, verificaNume() i rezultatul ntors de aceasta. Desigur, aceste date
vor fi preluate doar n caz de succes (codul de stare va fi 200).
Pe partea de server, va trebui scris un program PHP, numit verifica.php, care
va testa existena numelui de cont-utilizator. Vom stoca aceste informaii n-
tr-un document XML cu structura:
<?xml version="1.0"?>
<participanti>
<participant>
<nume>busaco</nume>
<adresa>http://www.infoiasi.ro/~busaco/</adresa>
</participant>

<participant>
<nume>laur</nume>
<adresa>laur@grapefruit.ro</adresa>
</participant>
</participanti>
Codul-surs al programului este furnizat n continuare:
<?php
/* Program PHP care verifica existenta unui nume de cont
prin parcurgerea unui document XML memorind informatii
despre participantii la un eveniment (se foloseste modelul DOM)
*/

// locul unde e stocat documentul XML
define ("PATH", '');
# De exemplu, pentru Windows cu Apache2Triad instalat in 'apache2':
# define ('PATH', 'c:\\apache2\\htdocs\\php-a\\');
define ('DOCXML', 'participanti.xml');

// trimitem tipul continutului
header ('Content-type: text/xml');

// functie care verifica daca un nume exista deja
// returneaza 1 daca numele exista, 0 in caz contrar
function verifica ($un_nume) {
// incarcam fisierul XML cu datele despre participanti
if (!$dom = domxml_open_file (PATH . DOCXML)) {
return 0;
}
$radacina = $dom->document_element();
$participanti = $radacina->get_elements_by_tagname('participant');
// parcurgem toti participantii gasiti...
foreach ($participanti as $participant) {
$nume = $participant->get_elements_by_tagname('nume');
// comparam, ignorind minusculele de majuscule
if (!strcasecmp($un_nume, $nume[0]->get_content())) {
return 1;
}
}
return 0;
}

// generam continutul XML
echo '<?xml version="1.0" ?>';
?>
<raspuns>
<metoda>verificaNume</metoda>
<rezultat><?php echo verifica ($_REQUEST['nume']); ?></rezultat>
</raspuns>
Se va returna un coninut XML, ateptat pe partea de client de ctre progra-
mul JavaScript. Folosind modelul DOM (Le Hors et al., 2000), se verific existen-
a numelui de cont furnizat script-ului PHP de ctre funcia JavaScript care l-a
apelat n manier asincron.
Desigur, mai trebuie scris programul PHP care realizeaz adugarea infor-
maiilor solicitate, apelat prin metoda GET la acionarea butonului submit din
cadrul formularului Web. O posibil soluie este urmtoarea:

<?php
/* Program PHP care insereaza informatii privitoare la un participant
intr-un document XML dat (se foloseste modelul DOM)
*/

define ('DOCXML', 'participanti.xml');

// preluam valorile parametrilor
$nume = $_REQUEST['nume'];
$adresa = $_REQUEST['adresa'];

if (!isset ($nume) || !isset ($adresa) || !$nume || !$adresa) {
echo "<p>Trebuie specificati parametrii de intrare 'nume' si
'adresa'.</p>";
exit;
}

// incarcam fisierul XML cu date despre participanti
if (!($dom = domxml_open_file (PATH . DOCXML))) {
echo '<p>Eroare la deschiderea documentului XML.</p>';
exit;
}
// preluam radacina documentului
$radacina = $dom->document_element();

// cream un element <participant>
$participant = $dom->create_element ('participant');
// cream un element <nume>
$nume_participant = $dom->create_element ('nume');
// cream un nod text, cu valoarea numelui
$valoare_nume_participant = $dom->create_text_node ($nume);
// ...si-l inseram la <nume>
$valoare_nume_participant =
$nume_participant->append_child ($valoare_nume_participant);
// adaugam <nume> la <participant>
$nume_participant = $participant->append_child ($nume_participant);
// cream un element <adresa>
$adresa_participant = $dom->create_element ('adresa');
// cream un nod text, cu valoarea adresei
$valoare_adresa_participant = $dom->create_text_node ($adresa);
// ...si-l inseram la <adresa>
$valoare_adresa_participant =
$adresa_participant->append_child ($valoare_adresa_participant);
// adaugam <adresa> la <participant>
$adresa_participant =
$participant->append_child ($adresa_participant);
// la final, adaugam elementul <participant> la arbore
$radacina = $radacina->append_child ($participant);

// salvam arborele ca fisier XML
$dom->dump_file (PATH . DOCXML);

echo "<p>Au fost adaugate urmatoarele date:
'$nume' si '$adresa'.</p>";
?>

Figura 2 reprezint o captur-ecran oferind mesajul de eroare obinut de uti-
lizator n cazul n care introduce un nume de cont deja existent.

Figura 2. Mesajul obinut n urma introducerii unui nume de cont existent
Apelnd script-ul PHP n mod explicit, obinem ceea ce era de ateptat: un
document XML ilustrat de figura 3.

Figura 3. Documentul XML returnat de programul PHP de verificare a existenei unui nume de cont
3.3 Al doilea exemplu: jurnalizarea pe partea de server a excepiilor aprute
n programele JavaScript executate n cadrul browser-ului
Ca i alte limbaje de programare moderne, JavaScript ofer dezvoltatorilor po-
sibilitatea de a capta i trata excepiile survenite n cadrul programelor. Cea mai
uzual cale este cea de recurgere la construciile try ... catch (ECMA). Singurul
impediment este acela c mesajele de eroare i informaiile privind mediul de
execuie (e.g., versiunea navigatorului, platforma pe care ruleaz, componentele
instalate etc.) sunt disponibile la nivelul clientului (vizitatorului) i nu la cel al
serverului (personalul de programare i de testare a aplicaiilor) Web. Astfel,
posibilele situaii de excepie i/sau de eroare nu sunt semnalate n mod cores-
punztor celor abilitai s le rezolve.
Prin intermediul AJAX, aceast problem poate fi rezolvat. Pentru nceput,
vom scrie un program JavaScript care va ncapsula ntr-o clas Jurnal ntreg
procesul de jurnalizare a excepiilor aprute. Spre deosebire de exemplul pre-
cedent, n acest caz prin metoda POST vom expedia aplicaiei de pe server in-
formaiile privitoare la mesajele de eroare, informaii ce vor fi stocate ntr-un
fiier-jurnal. Vehicularea datelor se va produce n mod uzual ntr-un singur
sens, de la programul-client JavaScript ctre cel invocat pe server (scris, dup
cum vom vedea, n dou variante una n Perl i cealalt n PHP).
Clasa Jurnal este definit n script-ul jurnal.js (ea va putea fi folosit n orice
program JavaScript cruia dorim s-i jurnalizm mesajele de excepie survenite
la rulare):


// definim o clasa folosita pentru jurnalizarea erorilor survenite
// in programele JavaScript
function Jurnal() {
// date-membru
this.cerere = null; // obiectul ce va face cererea POST spre server
// metode
this.serializeaza = serializeaza; // serializeaza eroarea
this.jurnalizeaza = jurnalizeaza; // jurnalizeaza eroarea
}

// metoda de stocare a datelor despre o eroare intr-un document XML
// (serializeaza un obiect Error in XML)
function serializeaza (eroare) {
var xml = '<eroare><nume>' + eroare.name + '</nume>\n' +
'<mesaj>' + eroare.message +'</mesaj>\n';
if (eroare.location) { // exista setata localizarea erorii
xml += '<loc>' + eroare.location + '</loc>\n';
}
if (eroare.navigator) { // exista informatii despre navigator
xml += '<client>' + eroare.navigator + '</client>\n';
}
xml += '</eroare>';
return xml;
}

// metoda de jurnalizare
// (trimite spre serverul Web eroarea serializata ca document XML)
function jurnalizeaza (eroare) {
// pregatim cererea
if (window.XMLHttpRequest) {
this.cerere = new XMLHttpRequest ();
this.cerere.overrideMimeType ('text/xml');
}
else if (window.ActiveXObject) {
this.cerere = new ActiveXObject ("Microsoft.XMLHTTP");
} else {
return; // nu e suportat AJAX
}

// stabilim metoda de transfer...
// si URI-ul programului care va prelua datele transmise spre server
this.cerere.open ('POST', 'jurnal.pl.cgi', true);
// stabilim cimpurile-antet HTTP
this.cerere.setRequestHeader ('Referer', location.href);
// trimitem un continut XML
this.cerere.setRequestHeader ('Content-type', 'text/xml');
// stabilim functia de tratare a schimbarii starii
this.cerere.onreadystatechange = trateazaJurnal;
// transmitem datele XML catre scriptul de pe server
this.cerere.send (this.serializeaza (eroare));
// stabilim un timp de asteptare a transferului
// (daca cererea nu e realizata in maxim 10 secunde, abandonam)
this.timeout = window.setTimeout ('anuleazaJurnalizare()', 10000);
}

// instantiem obiectul de jurnalizare
var jurnal = new Jurnal();


// functie de abandonare a jurnalizarii
function anuleazaJurnalizare() {
jurnal.cerere.abort ();
alert ('Jurnalizarea a esuat.');
}

// functie de tratare a schimbarii de stare
function trateazaJurnal () {
if (jurnal.cerere.readyState != 4) {
return; // transferul inca are loc
}

// daca transferul s-a efectuat, stergem timeout-ul
window.clearTimeout (jurnal.timeout);
// transferul s-a efectuat complet (cerere finalizata)
if (jurnal.cerere.status >= 400) { // semnalam erorile...
alert ('A intervenit o eroare la jurnalizare: ' +
jurnal.cerere.status);
}
}
Vom transmite ctre aplicaia de pe server un coninut XML i vom specifica
i adresa de la care provine cererea POST prin intermediul cmpului-antet
Referer. Obiectul ncapsulnd informaiile referitoare la eroare codul i mesa-
jul de eroare, locaia, browser-ul etc. va fi serializat via metoda serializeaza() ca
document XML ce va fi prelucrat la nivelul serverului. Funcia jurnalizeaza() va
efectua transferul efectiv al datelor XML spre programul de pe server. Dac
transmisia nu s-a realizat cu succes, vom semnala acest aspect utilizatorului a
se vedea metoda trateazaJurnal() , iar dac transferul nu a avut loc n maximum
10 secunde, atunci el va fi abandonat consultai funcia anuleazaJurnalizare().
Pe server, va fi invocat un script CGI conceput n limbajul Perl. Graie modu-
lui CGI::Carp, datele recepionate de la client vor fi elegant incluse n fiierul
standard de jurnalizare al serverului Web n cazul nostru, n fiierul error.log
generat de Apache. Un fragment din acest fiier, privind erorile semnalate via
AJAX, este redat n continuare (se observ mesajele diferite obinute n urma
execuiei unui cod JavaScript rulat pe dou navigatoare):

[Fri Dec 16 15:41:29 2005] [error] [client 193.230.10.1]
[Fri Dec 16 15:41:29 2005] jurnal.pl.cgi: Eroare client:
ReferenceError, mesaj: codNecunoscut is not defined, locatie:
http://localhost/php-a/test_jurnal.html, functia: incorecta(),
client: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8)
Gecko/20051111 Firefox/1.5 at C:/apache2/htdocs/php-a/jurnal.pl.cgi
line 32, referer: http://localhost/php-a/test_jurnal.html

[Fri Dec 16 15:42:54 2005] [error] [client 193.231.33.1]
[Fri Dec 16 15:42:54 2005] jurnal.pl.cgi: Eroare client:
TypeError, mesaj: Object expected, locatie:
http://localhost/php-a/test_jurnal.html, functia: incorecta(),
client: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET
CLR 1.1.4322; .NET CLR 2.0.50727) at
C:/apache2/htdocs/php-a/jurnal.pl.cgi line 32, referer:
http://localhost/php-a/test_jurnal.html


Programul Perl are urmtorul listing:
#!/usr/bin/perl
# Pentru Windows: c:\apache2\perl\bin\perl

# Script Perl care primeste prin POST un continut XML referitor
# la erorile survenite pe partea client (clientul foloseste AJAX
# pentru a trimite datele spre scriere in fisierele-jurnal
# ale serverului Web)
use CGI::Carp;
use XML::Simple;

# preluam datele XML de la client
read (STDIN, $date, $ENV{'CONTENT_LENGTH'});

my $metoda = $ENV{'REQUEST_METHOD'};

print "Content-type: text/xml\n\n";

if ($metoda eq 'POST') { # am receptionat o cerere via POST
eval {
my $continut = $ENV{'CONTENT_TYPE'};
if ($continut ne 'text/xml') { # nu e continutul asteptat
print "Status: 415 Unsupported Media Type\n\n";
}
# procesam datele XML primite de la client
my $doc = XML::Simple::XMLin ($date);
# preluam numele, mesajul si locatia erorii raportate
my ($nume, $mesaj, $loc, $client) =
($doc->{'nume'}, $doc->{'mesaj'}, $doc->{'loc'},
$doc->{'client'});
# ...si includem in fisierul de jurnalizare al serverului Web
carp "Eroare client: $nume, mesaj: $mesaj,
locatie: $loc, client: $client";
};
# verificam daca au aparut erori la nivel de server
if ($@) {
print "Status: 500 Internal server error\n\n";
croak "Eroare in timpul jurnalizarii: $@";
} else {
# succes, trimitem codul de stare 204,
# semnalind clientului sa nu astepte nici un continut
print "Status: 204 No content\n\n";
}
} else {
# a fost folosita o metoda diferita de POST...
print "Status: 405 Method not supported\n\n";
croak "Metoda incorecta: $metoda";
}
Se remarc utilizarea modului XML::Simple pentru procesarea facil a coni-
nutului XML recepionat de la client mai multe detalii n lucrarea (Buraga et
al., 2002). De asemenea, se verific dac datele au fost recepionate prin metoda
POST i dac aparin tipului MIME text/xml. n caz de eroare, se semnaleaz
programului de la client codurile de stare corespunztoare: 405, respectiv 415.
Mesajele de eroare transmise sunt scrise n fiierul de jurnalizare al serverului
Web prin intermediul metodelor carp() i croak() oferite de modulul CGI::Carp.

Programul nu va returna nici un coninut script-ului JavaScript care l-a invocat,
aspect semnalat via codul de stare 204.
O alt rezolvare complementar este urmtoarea, apelnd de data aceasta la
o implementare PHP. n acest caz, informaiile trimise de client sunt stocate
ntr-un fiier de jurnalizare propriu, numit jurnal.log i generat de programul
PHP. n mod obinuit, un script PHP nu are acces la fiierele-jurnal ale serveru-
lui Web, deci a fost adoptat o metod mai simpl. Codul-surs al programului
este furnizat n continuare:
<?php
/* Script PHP care primeste prin POST un continut XML referitor
la erorile survenite pe partea client (clientul foloseste AJAX
pentru a trimite datele spre scriere intr-un fisier-jurnal)
*/

define ('JURNAL', 'jurnal.log');

$metoda = $_SERVER['REQUEST_METHOD']; // determinam metoda HTTP

echo "Content-type: text/xml\n\n"; // vom genera continut XML

// am receptionat o cerere via POST
if (!strcmp($metoda, 'POST')) {
$continut = $_SERVER['CONTENT_TYPE'];
if (strcmp($continut, 'text/xml')) {
// nu e continutul asteptat
echo "Status: 415 Unsupported Media Type\n\n";
exit;
}
// deschidem fisierul de jurnalizare
$fis = @fopen (PATH . JURNAL, 'a');
if (!$fis) {
// eroare de deschidere a fisierului
echo "Status: 500 Internal server error\n\n";
exit;
}

// preluam datele transmise de client via POST
$date = $HTTP_RAW_POST_DATA;
// procesam prin DOM informatiile
if (!($dom = domxml_open_mem($date))) {
// eroare de procesare
echo "Status: 500 Internal server error\n\n";
exit;
}
$radacina = $dom->document_element ();
$nume = $radacina->get_elements_by_tagname ('nume');
$mesaj = $radacina->get_elements_by_tagname ('mesaj');
// scriem in fisier informatiile despre eroare
@fwrite ($fis, 'Nume: ' . $nume[0]->get_content() . ', mesaj: ' .
$mesaj[0]->get_content() . "\n");
fclose ($fis);
// gata cu succes (trimitem codul de stare 204,
// semnalind clientului sa nu astepte nici un continut

print "Status: 204 No content\n\n";
} else {
// a fost folosita o metoda diferita de POST...
echo "Status: 405 Method not supported\n\n";
}
?>
Preluarea datelor transmise de client prin metoda POST se realizeaz via va-
riabila predefinit $HTTP_RAW_POST_DATA. Aceste date sunt de fapt marca-
te n XML i graie metodei get_elements_by_tagname() oferit de DOM sunt
inserate n fiierul-jurnal. Ca i n situaia anterioar, posibilele erori sunt sem-
nalate prin intermediul codurilor de stare HTTP.
La finalul acestei seciuni, furnizm codul-surs al script-ului JavaScript care
testeaz maniera de stocare pe server a excepiilor survenite la nivelul navigato-
rului. Acest cod este ncapsulat n documentul XHTML urmtor:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro" xml:lang="ro">
<head>
<title>Testarea jurnalizarii</title>
<script type="text/javascript" src="jurnal.js"></script>

<script type="text/javascript">
// functie de tratare a erorilor survenite
// (va apela la jurnal pentru a consemna erorile si pe server)
function trateazaErori (mesaj, uri, linie) {
var eroare = new Error (mesaj);
eroare.location = uri + ', linia: ' + linie;
jurnal.jurnalizeaza (eroare);
// avertizam si utilizatorul
avertizeazaUtilizatorul (eroare);
return true;
}
// orice eroare va cauza executia functiei de tratare a erorii
window.onerror = trateazaErori;

function incorecta () {
try { // incercam sa executam codul...
codNecunoscut ();
}
catch (eroare) { // prindem eroarea...
// modificam proprietate 'location', adaugind date noi
eroare.location = location.href + ', functia: incorecta()';
eroare.navigator = navigator.userAgent;
jurnal.jurnalizeaza (eroare);
avertizeazaUtilizatorul (eroare);
}
}

// functie de avertizare (enervare?) a utilizatorului
function avertizeazaUtilizatorul (eroare) {
document.write ('A intervenit o eroare!
Vom semnala aceasta eroare programatorilor: ' + eroare.location);
// redirectam navigatorul spre o pagina fara erori ;)
//location.href = '/';
}
</script>

</head>
<body>
<p>Incercam sa cauzam erori JavaScript...</p>

<script type="text/javascript">incorecta()</script>
</body>
</html>
Maniera ilustrat de exemplul de fa poate fi extins la raportarea unor in-
formaii adiionale (e.g., rezoluia calculatorului-client, preferinele lingvistice
ale vizitatorului etc.) cu scopul de monitorizare/ameliorare a interaciunii cu
utilizatorul.
Listing-ul complet al programelor prezentate mai sus este disponibil la adresa
http://www.infoiasi.ro/~web/ajax-demo.tgz.
3.4 Aspecte importante n legtur cu realizarea de aplicaii AJAX
Printre cele mai importante aspecte de care trebuie s se in cont se enumer
urmtoarele (Baekdal, 2005):
evitarea ncrcrii ntregii pagini prin intermediul obiectului
XMLHttpRequest i a modelului DOM se pot modifica doar fragmente de
document, fr ca ntreg documentul s fie necesar a fi (re)ncrcat de pe
server; un aspect negativ este acela c n unele situaii utilizatorii nu vor
putea realiza semne de carte ale paginii (bookmarking-ul poate fi com-
promis);
dezvoltatorii trebuie s fac distincie clar ntre aplicaie Web i sit Web
o aplicaie Web reprezint o colecie interconectat de pagini Web cu
coninut dinamic menit a oferi o funcionalitate specific utilizatorilor
(Buraga, 2005); natural, interaciunea dintre aplicaie i utilizatori are loc
prin intermediul unei interfee Web, ateptrile (expectations) vizitatorilor
trebuind s primeze; interfaa aplicaiei Web trebuie s respecte regle-
mentrile i standardele n vigoare n ceea ce privete proiectarea interfe-
ei cu utilizatorul (Buraga, 2003a);
oferirea de alternative la AJAX, cnd suportul pentru el nu exist imple-
mentat trebuie inut seama de faptul c nu orice browser ofer suport
pentru AJAX; de asemenea, utilizatorul ar putea avea dezactivat opiu-
nea de rulare a programelor JavaScript;
eliminarea paginilor de confirmare folosind AJAX, numrul paginilor
de confirmare sau de semnalare a unor erori scade, ceea ce conduce la o
interaciune mai bun cu utilizatorul.
n ceea ce privete principiile de proiectare a aplicaiilor AJAX (aliniate aa-
dar noului Web), se pot meniona (Mahemoff, 2005):
minimizarea traficului dintre navigator i server aplicaia Web trebuie
s rspund n timp util solicitrilor utilizatorului, volumul de date
transmis n manier asincron fiind ct mai posibil redus;

stabilirea unui mod de interaciune clar metaforele de interaciune tre-
buie s fie predictibile, utilizatorul tiind la ce trebuie s se atepte din
partea interfeei (interaciune HTML versus AJAX versus aplicaie con-
venional);
evitarea confuziilor, prin adoptarea conveniilor de interaciune
Web/clasic utilizatorul trebuie s fie capabil s nvee rapid maniera
de manipulare a aplicaiei Web;
eliminarea distragerii utilizatorului e.g., folosirea de animaii gratuite;
adoptarea tehnologiilor AJAX pentru creterea utilizabilitii, nu doar de
dragul tehnologiei.
Dintre abloanele arhitecturale existente, le enumerm pe cele de baz de-
talii pe situl AJAXPatterns.org:
tratarea evenimentelor la nivel local pe ct posibil, evenimentele sur-
venite trebuie rezolvate la nivelul clientului, fr a se iniia cereri (i, im-
plicit, transferuri) ctre aplicaii-server;
remprosptarea periodic a coninutului mai ales n ceea ce privete
aplicaiile Web cu un grad ridicat de interaciune (de exemplu, oferind
informaii care se perimeaz rapid, precum cele financiare), navigatorul
va trebui s se sincronizeze cu serverul; informaiile pot s se schimbe pe
partea de server dup ce utilizatorul a efectuat ultima sa modificare, da-
torit folosirii n manier concurent a aplicaiei;
anticiparea download-urilor (pre-ncrcarea datelor ce vor fi solicitate)
aplicaia Web trebuie s ia n calcul posibilele aciuni viitoare pe care le
va realiza vizitatorul i s se comporte n consecin;
transmiterea explicit a datelor spre server utilizatorul trebuie s aib
posibilitatea de-a solicita explicit transferul informaiilor i nu numai
cnd survin diverse evenimente ori la fiecare nou input al vizitatorului;
oferirea de posibiliti de bookmarking utilizatorii trebuie s fie capabili
s realizeze i s partajeze semne de carte privind aplicaia; unele re-
zultate ale interaciunii dintre client i server via obiectul
XMLHttpRequest ar putea s nu reflecte modificri n cadrul URI-ului
aplicaiei.
De asemenea, pot fi formulate o serie de principii de afiare a datelor
(Mahemoff, 2005):
folosirea proprietilor CSS pe ct posibil, trebuie utilizate proprietile
de stil puse la dispoziie de CSS pentru a face distincia clar ntre struc-
tur, datele propriu-zise i maniera de afiare (aceasta din urm ar putea
fi dependent de dispozitivul de redare);
adoptarea principiilor de utilizabilitate ca i n cazul aplicaiilor con-
venionale, disponibile pe platformele consacrate, aplicaiile Web vor

trebui concepute avndu-se n vedere utilizabilitatea, n general, i acce-
sibilitatea, n special detalii n lucrarea (Buraga, 2005);
indicarea vrstei informaiei afiate pentru ca utilizatorii s aib de-
plin ncredere n informaiile puse la dispoziie, trebuie specificat data
afirii datelor importante (e.g., preuri, aciuni, parametri de sta-
re/control etc.);
oferirea de indicii privind ce date au fost deja transmise serverului i ce
date se afl n ateptare (pending) pentru a fi transmise utilizatorul tre-
buie s cunoasc starea n care se afl aplicaia Web i dac informaiile
au fost transmise cu succes sau nu la server.
Desigur, se pot adopta diverse abloane de interaciune, unele dintre ele si-
milare celor folosite n cazul aplicaiilor convenionale: drag & drop, popup data
input, popup information, highlighting, auto-completion etc.
3.5 AJAX n contextul REST
Putem considera c via AJAX se pot implementa servicii Web asincrone, n
stilul REST (REpresentational State Transfer), arhitectur de dezvoltare a aplicaii-
lor Web. Conform filosofiei REST, ale crei baze au fost puse n (Fielding, 2000),
rezultatul unei procesri conduce la returnarea unei reprezentri a unei resurse
Web. Orice accesare a unei reprezentri plaseaz aplicaia-client ntr-o stare care
va fi schimbat n urma unui transfer de date (accesarea altei reprezentri, pe
baza traversrii unei hiper-legturi desemnate de un URI incluse n repre-
zentarea resursei iniiale). Transferul se realizeaz prin HTTP, reprezentarea es-
te marcat n XML, iar adresabilitatea se rezolv via URI, spaiul World-Wide
Web putnd fi considerat ca fiind un sistem REST.
Serviciile Web actuale se pot dezvolta n concordan cu arhitectura REST.
Componentele care invoc funcionaliti vor consuma reprezentri de resurse
(n stilul pull) conform clasicii arhitecturi client/server. Fiecare cerere este con-
siderat independent, fr a se lua n consideraie contextul conexiuni
stateless. Resursele Web pot fi accesate printr-o interfa generic pus la dispo-
ziie de metodele protocolului HTTP: GET, POST, PUT i DELETE. Actualmen-
te, sunt utilizate preponderent GET i POST. A se vedea i (Erl, 2005) i (He,
2004).
Aplicaiile folosind AJAX pot fi, astfel, considerate servicii Web implementa-
te conform REST, deoarece inter-schimbul de date se desfoar marcat n XML
prin intermediul protocolului HTTP, respectndu-se paradigma client/server.
Orice resurse vehiculate sunt adresate via identificatori uniformi de resurse.
3.6 Utilizri i interfee de programare AJAX
AJAX reprezint una dintre componentele-cheie ale noului val de aplicaii
aliniate problematicilor Data Web-ului (a se revedea i cele expuse n sub-
capitolul 2). O serie dintre siturile majore nglobeaz AJAX n vederea oferirii

vizitatorilor a unei interaciuni complexe i mulumitoare. Drept exemple nota-
bile, putem enumera:
24SevenOffice serviciu pentru managementul relaiilor cu clienii (CRM
Customer Relationship Management);
A9.com sit e-business subsidiar Amazon;
EpiphanyRadio sit de tiri radio emise via Web;
Flickr.com sit de organizare (clasificare) i de partajare de imagini, ad-
notate liber de utilizatori;
Google Maps serviciu Google oferind informaii referitoare la hri i
obiective socio-geografice;
Google Suggest serviciu Google punnd la dispoziia vizitatorilor a unei
liste de sugestii de termeni privind cutarea pe Web, n funcie de datele
specificate de utilizatori;
Gmail serviciu Google destinat managementului de mesaje de pot
electronic.
Deja exist diverse cadre de lucru (frameworks) care ofer modaliti de pro-
gramare facil a aplicaiilor AJAX. Astfel, pot fi folosite biblioteci de funcii
JavaScript precum Google AJAXSLT, Prototype, Rico sau Sarissa. De asemenea, se
poate recurge la funcionaliti implementate la nivel de server: AjaxAnywhere,
Direct Web Remoting (DWR), JavaScript Remote Scripting (JSRS) ori SAJAX deta-
lii n (Zametti et al., 2005).
4. N LOC DE CONCLUZII
n cadrul acestui capitol, am detaliat o serie dintre direciile de viitor n dezvol-
tarea de aplicaii destinate noului Web, cu un accent mai pronunat asupra
suitei de tehnologii AJAX.
n viitorul apropiat, AJAX poate fi vzut ca fiind unul dintre elementele de
construcie a Web-ului social (Social Web), etap premergtoare constituirii
Web-ului semantic. Aplicaiile AJAX i nu numai ele vor oferi premisele reali-
zrii de hiper-legturi ntre persoane i organizaii, nu doar ntre maini i do-
cumente, prin intermediul aa-numiilor identificatori extensibili de resurse
(XRI Extensible Resource Identifiers), persisteni la schimbri i rezolvnd pro-
blemele legate de intimitate personal (privacy) i ncredere (trust) a se consul-
ta lucrrile (Drummond & Strongin, 2004) i (Drummond et al., 2004).
n concordan cu acest Web social, Data Web-ul poate fi considerat drept so-
luie simplificatoare pentru inter-schimb de date, bazat pe principiile arhitec-
turale ale Web-ului i pe conceptele de baz ale serviciilor Web i Web-ului
semantic. Conform (Drummond & Strongin, 2004), datele i ofertanii de date
vor fi identificate via XRI, reprezentarea i legarea datelor se vor realiza

printr-o schem XDI (XRI Data Interchange), iar inter-schimbul de date va avea
loc graie serviciilor XDI (extensii ale serviciilor Web actuale).
Categoriile de aplicaii ale Web-ului social i cel de date, care vor beneficia i
de tehnologiile care compun AJAX, se prefigureaz a fi urmtoarele:
pori (portaluri) de acces la contacte personale;
filtre de ncredere (trust filters);
aplicaii de management inteligent al e-mail-ului;
calendare de evenimente i semne de carte generate automat;
posibilitatea auto-nregistrrii, auto-conectrii i auto-personalizrii uti-
lizatorilor;
protecia furtului identitii digitale;
aplicaii pentru efectuarea de cutri cu specific social (social search), pre-
cum (re)gsirea prietenilor, grupurilor de interes, comunitilor axate pe
un anumit domeniu etc.;
reele de reputaie (reputation networks).
n ncheiere, putem concluziona cu aseriunea c actualele i viitoarele aplica-
ii, aliniate noului Web, vor trebui s integreze servicii oferite de dispozitive
mobile, calculatoare personale, servere etc. De asemenea, trebuie remarcat fap-
tul c atunci cnd dispozitivele i programele sunt conectate la Internet, aplica-
iile nu mai constituie artefacte software, ci devin servicii n permanent
dezvoltare (inclusiv cu aportul utilizatorilor finali, n concordan cu paradigma
extreme programming) apare astfel fenomenul numit the perpetual beta (OReilly,
2005). Useful software written above the level of the single device will command high
margins for a long time to come. (Dave Stutz)
Referine
Baekdal, T., XMLHttpRequest Usability Guidelines, Baekdal.com, 2005
Berners-Lee, T., Information Management: A Proposal, CERN, 1989:
http://www.w3.org/History/1989/proposal.html
Berners-Lee, T., Weaving the Web, Orion, Cambridge, 1999
Berners-Lee, T., Hendler, J., Lassila O., The Semantic Web, Scientific American, 5, 2001
Bray, T. et al. (eds.), Extensible Markup Language 1.0 (Third Edition), W3C Recommendation,
Boston, 2004: http://www.w3.org/TR/REC-xml
Buraga, S., Tehnologii Web, Matrix Rom, Bucureti, 2001:
http://www.infoiasi.ro/~busaco/books/web.html
Buraga, S. et al., Programare Web n bash i Perl, Polirom, Iai, 2002:
http://www.infoiasi.ro/~cgi/
Buraga S., Suportul pentru implementare, n Pribeanu, C. (ed.), Introducere n interaciunea
om-calculator, Matrix Rom, Bucureti, 2003

Buraga, S. (coord.), Aplicaii Web la cheie, Polirom, Iai, 2003:
http://www.infoiasi.ro/~phpapps/
Buraga, S., Semantic Web. Fundamente i aplicaii, Matrix Rom, Bucureti, 2004:
http://www.infoiasi.ro/~sweb/
Buraga, S. (coord.), Situri Web la cheie. Soluii profesionale de implementare, Polirom, Iai, 2004:
http://www.infoiasi.ro/~busaco/books/webapps/
Buraga, S., Proiectarea siturilor Web (ediia a doua), Polirom, Iai, 2005:
http://www.infoiasi.ro/~design/
Candell, E., Raggett, D., Multimodal Interaction Use Cases, W3C Note, Boston, December 2002:
http://www.w3.org/TR/mmi-use-cases/
Clark, J. (ed.), XSL Transformations (XSLT) Version 1.0, W3C Recommendation, Boston, 1999:
http://www.w3.org/TR/xslt
Davies, J., Fensel, D., van Harmelen, F. (eds.), Towards the Semantic Web, John Wiley & Sons,
2003
Doctorow, C. et al., Esential Blogging, OReilly & Associates, 2002
Dodds, L., An Introduction to FOAF, XML.com, 2004:
http://www.xml.com/pub/a/2004/02/04/foaf.html
Drummond, R., Strongin, G., The Dataweb: An Introduction to XDI, White Paper, OASIS XDI
Technical Committee, 2004
Drummond, R. et al., The Social Web: Creating An Open Social Network with XDI, Planetwork
Journal, July 2004: http://journal.planetwork.net/article.php?lab=reed0704&page=1
Eernisse, M., A Simpler Ajax Path, OnLamp.com, 2005:
http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html
Erl, T., Service-Oriented Architecture: Concepts, Technology, and Design, Prentice Hall PTR, 2005
Fielding, R., Architectural Styles and the Design of Network-based Software Architectures,
Ph.D. Dissertation, 2000: http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm
Hammond, T. et al., Social Bookmarking Tools (I). A General Review, D-Lib Magazine, vol. 11,
no. 4, April 2005: http://www.dlib.org/dlib/april05/hammond/04hammond.html
He, H., What is Service-Oriented Architecture?, XML.com, 2003:
http://webservices.xml.com/pub/a/ws/2003/09/30/soa.html
He, H., Implementing REST Web Services: Best Practices and Guidelines, XML.com, 2004:
http://www.xml.com/pub/a/2004/08/11/rest.html
Le Hors et al. (eds.), Document Object Model (DOM) Level 2 Core Specification Version 1.0,
W3C Recommendation, Boston, 2000: http://www.w3.org/TR/DOM-Level-2-Core
Lund, B. et al., Social Bookmarking Tools (II). A Case Study Connotea, D-Lib Magazine,
vol. 11, no. 4, April 2005: http://www.dlib.org/dlib/april05/lund/04lund.html
Mahemoff, M., AJAX Patterns: Design Patterns for AJAX Usability, Software As Shes Developed
Weblog, AJAXPatterns.org, 2005
Manola, F., Miller, E. (eds.), RDF (Resource Description Framework) Primer, W3C
Recommendation, Boston, 2004: http://www.w3.org/TR/rdf-primer/
Mathes, A., Folksonomies Cooperative Classification and Communication Through Shared Metadata,
University of Illinois Urbana-Champaign, 2004: http://www.adammathes.com/
McLellan, D., Very Dynamic Web Interfaces, XML.com, 2005:
http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
OReilly, T. The Architecture of Participation, OReilly Developer Weblogs, OReilly.com,
April 2003: http://www.oreillynet.com/pub/wlg/3017

OReilly, T., What is Web 2.0. Design Patterns and Business Models for the Next Generation of
Software, OReilly.com, 2005:
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
Zametti, F. et al., Survey of AJAX/JavaScript Libraries, OSAF.com, 2005:
http://wiki.osafoundation.org/bin/view/Projects/AjaxLibraries
* * *, DCMI (Dublin Core Metadata Initiative): http://www.dublincore.org/
* * *, ECMA (European Computer Manufacturers Association): http://www.ecma.ch/
* * *, FOAF (Friend Of A Friend) Specification: http://rdfweb.org/
* * *, RSS (Really Simple Syndication) 2.0 Specification: http://blogs.law.harvard.edu/tech/rss
* * *, World-Wide Web Consortium, Boston, 2005: http://www.w3.org/

29

Capitolul 2
DEMOCRAIA PE WEB: SITURILE WIKI
Diana Gorea
Facultatea de Informatic, Universitatea Alexandru Ioan Cuza Iai
Str. G-ral Berthelot, nr. 16, Iai, Romnia
dgorea@infoiasi.ro http://www.infoiasi.ro/~dgorea/
Rezumat. Lucrarea investigheaz diverse aspecte tehnologice i sociale legate de una dintre ce-
le mai importante tendine n evoluia actual a Web-ului, i anume siturile colaborative de tip
Wiki. n construcia unui astfel de sit sunt angrenate sisteme de baze de date i tehnologii sof-
tware complexe. De asemenea, sunt prezentate cele mai reprezentative aplicaii Wiki care sunt
utilizate la ora actual de ctre diverse organizaii n intranet sau n mod public pe Internet.
Cuvinte-cheie: Wiki, colaborare, aplicaii Web.
1. CONCEPTUL DE WIKI
n (Leuf & Cunningham, 2001) un Wiki este definit ca o colecie liber expanda-
bil de pagini Web interconectate, un sistem hipertext de stocare i modificare a
informaiilor (o baz de date) n care fiecare pagin este editabil ntr-o manier
facil de ctre orice utilizator care dispune de un navigator Web avnd suport
pentru formulare.
Siturile Wiki pun la dispoziia utilizatorilor o sintax simpl bazat pe text
pentru crearea ad-hoc de noi pagini sau de hiper-legturi interne (ntre paginile
aceluiai Wiki) sau externe.
Paginile Wiki sunt controlate (create, modificate, terse, mutate, redenumite,
corelate) printr-un limbaj de programare sau de scripting i pstrate fie ca text
ntr-un sistem de fiiere, fie ntr-o baz de date relaional extern (MySQL,
Oracle, PostgreSQL). Paginile Wiki sunt redate ca reprezentri HTML de ctre
serverul Wiki.
Dintre cele mai importante utilizri ale siturilor Wiki amintim:
gestiunea colaborativ a cunotinelor: adugare i modificare de coni-
nut, clasificarea coninutului;
organizarea de evenimente: conferine, concursuri, expoziii etc.;
30 Diana Gorea

brainstorming individual i colectiv: se pot posta idei personale sau publi-
ce, se pot interconecta aceste idei cu ale altora prin hiper-legturi i crea
astfel un sit Web;
managementul de informaii personale (Personal Information Manager);
gestionarea documentaiilor pentru aplicaii software, a manualelor de
procedur, a coninutului academic;
creaie artistic colectiv (carte, film, pies de teatru);
unealt de predare;
proiecte corporatiste (intranet, extranet, fluxuri de producie);
crearea si gestionarea listelor FAQ (Frequently Asked Questions);
un weblog mai flexibil.
nc de la nceputul apariiei lor, siturile Wiki au avut un succes enorm i au
fost adoptate n cadrul comunitilor tehnice pentru a inter-schimba informaii
folosind doar navigatoarele Web standard. Succesul se datoreaz versatilitii i
a numeroaselor posibiliti de utilizare. Provocarea actual const n a extinde
acest succes i asupra utilizatorilor obinuii.
2. EVOLUIE
Termenul de Wiki a fost introdus de Ward Cunningham, pornind de la terme-
nul hawaian Wiki-Wiki, care nseamn foarte rapid (very quick). Deci, un sit
Wiki nseamn un sit Web rapid, deoarece simplific procesul de creare a situri-
lor Web. Primul sit Wiki creat se numea WikiWikiWeb i a fost iniiat de Ward
Cunningham n 1995 n scopul facilitrii inter-schimbului de idei ntre progra-
matori. Aplicaia era scris n Perl i nsoea Portland Pattern Repository, baz de
cunotine n domeniul design pattern-urilor de programare, n special extreme
programming. Ideea lui Cuningham era ca paginile aplicaiei WikiWikiWeb s
fie editabile de ctre utilizatori, care, innd cont de specificul sitului, erau n
cea mai mare parte programatori. Dup cum era de ateptat, ideea a avut succes
n rndul comunitii programatorilor, care puteau astfel s schimbe idei de
programare ntr-un format comod i uor de neles.
Spre finalul anilor 90, s-a preconizat ideea utilizrii tehnologiei Wiki pentru
gestiunea bazelor de cunotine publice i private. Astfel, fondatorii enciclope-
diei electronice libere scris de experi Nupedia, au angajat tehnologia Wiki n
construcia unui proiect complementar Nupediei. Acesta este Wikipedia i a
fost lansat n ianuarie 2001, cu scopul pstrrii articolelor nainte de a fi evalua-
te i incluse n Nupedia. Datorit contribuiilor libere ale utilizatorilor,
Wikipedia a cunoscut o dezvoltare expansiv, independent de Nupedia, du-
Democraia pe Web: siturile Wiki 31

cnd n septembrie 2003 la ncetarea activitii Nupediei, puinul coninut r-
mas al acesteia fiind asimilat de Wikipedia.
La nceputul anilor 2000, Wiki-urile au ptruns i n cadrul organizaiilor sub
form de software colaborativ pentru comunicare intranet n cadrul proiectelor,
destinat iniial comunitilor tehnice. n decembrie 2002, compania Socialtext a
lansat prima soluie Wiki comercial, urmat de o serie de alte soluii open
source cum ar fi MediaWiki, TWiki, XWiki. Astzi exist foarte multe companii
care folosesc tehnologia Wiki ca unicul software colaborativ intranet. De fapt,
acest tip de utilizare a Wiki-urilor este, de departe, mai rspndit dect utiliza-
rea public n Internet.
2.1 Ideile care stau la baza noiunii de Wiki
Geneza conceptului de Wiki, precum i evoluia sa poate fi explicat prin cteva
teorii i idei precum: inteligena colectiv, teoria haosului, viaa artificial, com-
portament emergent.
Teoria haosului se refer la unele sisteme dinamice neliniare care prezint
fenomenul cunoscut sub numele de haos, caracterizat printr-o sensibilitate la
condiiile iniiale. Ca rezultat, comportamentul sistemelor pare a fi aleator, dei
modelul sistemului este determinist. Exemple se astfel de sisteme sunt atmosfe-
ra terestr, sistemul solar, plcile tectonice, creterea populaiei, diverse feno-
mene economice etc.
Comportamentul emergent reprezint procesul de formare de pattern-uri
complexe pornind de la reguli simple. Un exemplu este interaciunea dintre un
numr mare de neuroni care d natere gndirii umane (neuronul n sine nea-
vnd aceast calitate). n general, fenomenul nu este predictibil pornind de la o
descriere a nivelului inferior.
Viaa artificial reprezint studiul vieii prin intermediul unor sisteme identi-
ce create de om, studiu care utilizeaz algoritmi evolutivi, modele bazate pe
ageni, automate celulare etc.
n continuare, vom descrie pe scurt inteligena colectiv, considerat a avea
rolul cel mai important n funcionarea siturilor Wiki.
2.1.1 Inteligena colectiv
Inteligena colectiv, aa cum a fost definit de George Por n Blog of Collective
Intelligence, reprezint capacitatea comunitii umane de a evolua ctre o gndi-
re de complexitate superioar, rezolvare de probleme i integrare, prin colabo-
rare i inovare. Conceptul s-a nscut pornind de la urmtoarea idee:
cunoaterea i capacitatea de rezolvare a unei probleme a unui grup este mult
mai mare dect cea a unui singur individ. De asemenea, n acest context poate fi
amintit i legea lui Metcalfe, care spune c valoarea unei reele este O(n
2
), unde
n reprezint numrul de utilizatori din sistem.
32 Diana Gorea

Inteligenta colaborativ distribuit este activitatea unui grup care colaborea-
z intr-o sfera de interaciune virtual. Membrii grupului pot interaciona n
timp real sau asincron chiar dac nu sunt localizai n acelai spaiu fizic. Teh-
nologiile pentru facilitarea dezvoltrii inteligenei colaborative distribuite sunt
cunoscute sub numele de software colaborativ (sau groupware). Din aceast ca-
tegorie fac parte programele de tip instant messenger, chat rooms, conferine Web,
calendarele electronice, sistemele de gestiune a cunotinelor, sistemele de ma-
nagement a proiectelor, pota electronic, forumurile, weblog-urile i, binene-
les, sistemele de tip Wiki.
Factorii care contribuie decisiv la obinerea unui grad ridicat de inteligen
colectiv sunt:
moderarea i ncurajarea grupului;
aderarea la un numr minimal de reguli privind interaciunea ntre utili-
zatori;
promovarea gndirii creative;
un feedback susinut i de calitate al grupului;
ideile trebuie ncurajate, dar soluiile trebuie confirmate dup recenzia
de ctre grup;
construirea unei baze de cunotine bine documentate, care constituie
memoria partajat a grupului.
Un proiect deosebit de interesant (bineneles, de tip Wiki), dedicat meta-
colaborrii (colaborare n privina colaborrii) este cel de la adresa
http://collaboration.wikicities.com. Scopul acestuia este explorarea similaritilor i
diferenelor dintre natura, metodele i motivaiile colaborrilor din diverse do-
menii. Se dorete crearea unui depozit de cunotine despre colaborare n conti-
nu dezvoltare, crearea unei comuniti de cercettori interesai de nelegerea
colaborrii i dezvoltarea unei teorii generale a colaborrii.
3. PRINCIPII DE PROIECTARE A SITURILOR WIKI
Atunci cnd a inventat conceptul, Ward Cunningham a avut n vedere cteva
principii de baz, principii care se aplic i astzi n proiectarea unui sit Wiki.
Astfel, un sit Wiki trebuie s aib urmtoarele caracteristici:
deschis dac un utilizator gsete o pagin incomplet, cu un coninut
prost organizat, este liber s opereze modificri asupra acesteia;
incremental paginile pot cita alte pagini, chiar pagini care nu au fost
nc scrise;
organic structura i coninutul text evolueaz n permanen;

monden exist un numr redus de convenii care furnizeaz accesule la
marcajele de pagin cele mai uzuale;
universal mecanismele de scriere sunt aceleai cu cele de organizare i
editare, astfel nct un utilizator care scrie, editeaz i organizeaz in ace-
lai timp;
clar ieirea formatat va sugera intrarea necesar pentru a o produce;
unificat paginile vor fi extrase dintr-un spaiu plat, astfel nct, pentru
a le interpreta nu este nevoie de vreun context adiional;
precis denumirea paginilor va fi fcut ntr-un mod precis, sugestiv,
astfel nct s nu aib loc coliziuni de nume;
tolerant comportamentul interpretabil este preferat returnrii mesaje-
lor de eroare;
observabil activitatea pe un sit Wiki poate fi vizualizat i verificat de
ctre orice vizitator;
convergent redundana trebuie evitat prin gsirea i citarea coninu-
tului similar;
ncrederea aceast calitate este esenial pentru funcionarea unui sit
Wiki. Trust the people, trust the process, enable trust-building. (Ward
Cunningham). Wiki se bazeaz pe presupunerea c utilizatorii sunt bine
intenionai. n orice caz, nu se exclude posibilitatea exploatrii maliioa-
se a siturilor Wiki. Cu toate acestea, este mai uor s se corecteze greeli-
le, nu s se previn. Orice modificare este reversibil prin intermediul
jurnalelor. De asemenea, utilizatorii direct interesai de calitatea anumi-
tor pagini, le pot monitoriza, fiind notificai la apariia unei modificri.
Cu toat aceast filosofie deschis i deci expus la vandalisme, siturile
Wiki funcioneaz cu succes. Conform unui studiu al IBM, orice vanda-
lism asupra Wikipediei este retractat n aproximativ 5 minute.
4. WEB 2.0
Dei nu exist o definiie unanim acceptat a ceea ce nseamn Web 2.0, terme-
nul se refer la o generaie de situri i servicii care folosesc Web-ul ca platform
(de exemplu, RSS Syndication, blogging, Wiki, Flickr, del.icio.us, connotea,
BitTorrents, AJAX), majoritatea implicnd contribuii de la utilizatorii de rnd.
Este un concept deschis, n spirit open source. n plus, are n centru ideea de uti-
lizatori uman, ntruct are potenialul de a crea o estur social strns ntre
indivizi i comuniti online. Web 2.0 is collaboration among people in a way that
scales (Ward Cunningham).
34 Diana Gorea

Termenul de Web 2.0 este folosit i pentru a desemna noiunea de Web se-
mantic. Cele dou semnificaii sunt cumva conexe i complementare, conjuncia
lor ducnd la apariia noiunii de Web semantic emergent. Astfel, reelele socia-
le i folksonomiile (clasificri ad-hoc de ctre utilizatori a obiectelor cu care acetia
interacioneaz online), creeaz o baz pentru un mediu semantic prin crearea
de metadate interpretabile de ctre main. Web-ul nu este un mediu prielnic
numai mainilor, ct i clienilor umani. Majoritatea aplicaiilor Web 2.0 se ba-
zeaz pe micro-coninut provenind din surse diferite, distribuite, care sunt pro-
cesate de ctre main, reutilizate, plasate n alt context. Astfel, utilizatorii pot
obine micro-coninutul de care sunt interesai ntr-un mod agregat, asamblat,
structurat i personalizat, dintr-o perspectiv ad-hoc.
5. APLICAII WIKI
O aplicaie Wiki este un tip de software colaborativ care permite dezvoltarea
unui sit Wiki. De regul este implementat ca un script pe partea de server, care
ruleaz pe unul sau mai multe servere Web. Unele aplicaii Wiki au propriul
server Web sau sunt mpachetate mpreun cu acesta. De aceea, noiunea de
aplicaie Wiki poate fi interpretat ca totalitatea tehnologiilor software care
permit rularea unui sit Wiki. Pentru memorarea coninutului se poate folosi fie
un sistem de baze de date relaionale, fie un sistem de fiiere.
Sistemele Wiki pot fi folosite i ca sisteme de gestiune a coninutului (Content
Management Systems). Cea mai important diferen ntre sistemele Wiki i sis-
temele de gestiune a coninutului este modalitatea de editare a coninutului. n
plus, n cazul sistemelor Wiki accentul cade n primul rnd pe coninut n de-
trimentul prezentrii.
Dintre cele mai importante aplicaii Wiki amintim WikiWikiWeb,
MediaWiki, MoinMoin, TWiki, XWiki, KWiki etc. Majoritatea aplicaiilor Wiki
se afl sub licen GPL, iar cele mai complexe (TWiki, MediaWiki, XWiki) sunt
dezvoltate colaborativ sau modular, punnd la dispoziie API-uri (Application
Programming Interface) care permit dezvoltarea de noi extensii.
Cteva dintre acestea sunt descrise pe scurt n seciunile urmtoare.
5.1 MediaWiki
MediaWiki este un software de tip Wiki sub licen GPL, scris n PHP i care fo-
losete baze de date MySQL. A fost utilizat iniial de Wikipedia, apoi i de alte
proiecte ale fundaiei Wikimedia. Software-ul este actualmente la versiunea
1.5.2, poate fi portat pe mai multe platforme i poate fi descrcat de la
http://sourceforge.net/projects/wikipedia.
Fundaia Wikimedia se afl in spatele a ctorva dintre cele mai importante
proiecte construite n mod colaborativ. Printre acestea se numr:

enciclopedia online Wikipedia, unul din cele mai vizitate 50 situri din
lume,
Wiktionary, un dicionar multilingv,
Wikibooks, o colecie de cri cu coninut deschis,
Wikiquote, o colecie de citate celebre,
Wikinews, o surs liber de tiri,
Wikisource, o colecie de texte originale publice,
Wikimedia Commons, un depozit de date multimedia.
Implementarea ofer un set de faciliti de baz, printre care controlul versi-
unilor, spaii de nume, posibilitatea urmririi paginilor, securitate, template-uri
i skin-uri, liste de discuii.
n baza de date se afl coninutul paginilor sub form de wikitext, precum i
alte informaii auxiliare despre pagini, utilizatori etc. De asemenea, n baza de
date se memoreaz versiunile anterioare ale paginilor, avnd propriul sistem de
control al versiunilor. Baza de date a Wikipedia este n continu cretere. Astfel,
n februarie 2005, tabelul cu versiunile curente ale paginilor (vorbim de
Wikipedia n englez) avea 3 GB (avnd indexul de 500 MB), iar arhiva 80 GB
(cu indexul 3GB). Baza de date este disponibil pentru download sub form de
dump.
n figura 1 este descris arhitectura general a unei aplicaii MediaWiki.

Figura 1. Arhitectura general a aplicaiei MediaWiki
Dup cum spuneam la nceputul acestei seciuni, baza de date pstreaz con-
inutul sub form de wikitext. Wikitextul este un document scris ntr-un limbaj
36 Diana Gorea

de marcare Wiki, fiind un amestec de coninut, marcaje i metadate. Cnd se vi-
zualizeaz o pagin, wikitext-ul este convertit in XHTML (sau coninutul
XHTML este preluat din cache), care este redat de navigatorul Web al utilizato-
rului. Codul XHTML generat depinde de mai muli factori, printre care:
modul de lucru (vizualizare sau editare),
valorile variabilelor,
skin-ul utilizat,
drepturile utilizatorului,
spaiul de nume activ, dac pagina este urmrit de utilizatorul respec-
tiv.
Dac utilizatorul alege s modifice o pagin (apsnd pe butonul Edit), acesta
primete chiar wikitextul (ntregii pagini sau doar al seciunii selectate). Dup
eventualele modificri, la apsarea butonului Preview, wikitextul este trimis
serverului, care l convertete n XHTML, fiind redat apoi de navigator. Dup
apsarea butonului Save, modificrile sunt permanentizate n wikitextul din ba-
za de date.
Pentru mai multe informaii despre aplicaia MediaWiki se poate consulta si-
tul Wikimedia Metawiki, care conine informaii despre toate proiectele funda-
iei Wikimedia.
5.2 TWiki
TWiki este o aplicaie Wiki structurat, scris n limbajul Perl i aflat sub licen-
GPL, care se dorete a fi o platform enterprise colaborativ. O aplicaie Wiki
structurat ncearc s combine avantajele unei aplicaii Wiki (coninut interco-
nectat, organic i liber, ncrederea controlat) cu cele ale unei aplicaii de baze
de date (date foarte structurate, raportare facil, controlul accesului). Aceast
combinaie produce o serie de avantaje, cum ar fi flexibilitatea adugrii de con-
inut liber celui structurat i, invers, utilizarea TWiki n construcia de noi apli-
caii Wiki.
TWiki a fost adoptat n spatele firewall-urilor ctorva companii importante,
cum ar fi Motorola, Yahoo!, SAP, Disney Corporation, Inktomi, datorit interfe-
ei prietenoase i a flexibilitii. Aplicaia este utilizat n principal ca unealt
pentru gestionarea dezvoltrii proiectelor i a documentaiilor.
Principalele particulariti ale soluiei TWiki sunt:
gruparea paginilor nrudite n colecii (TWiki webs) pentru a separa gru-
purile colaborative;
cutare cu sau fr expresii regulate;
notificare via e-mail n cazul apariiei unei modificri ntr-o colecie;

posibilitatea clasificrii paginilor Web nestructurate i crearea de fluxuri
de afaceri;
posibilitatea atarii de fiiere paginilor Web prin upload;
evidena modificrilor (ce, cine, cnd);
utilizarea de variabile pentru a compune pagini Web dinamice;
posibilitatea extinderii i personalizrii funcionalitilor prin intermedi-
ul plugin-urilor (e.g., CalendarPlugin, ChartPlugin, DatabasePlugin,
SlideShowPlugin, XPTrackerPlugin etc.);
posibilitatea utilizrii platformei TWiki pentru crearea de aplicaii Web
specifice unor domenii de activitate;
separarea prezentrii de coninut via template-uri i skin-uri;
autentificarea utilizatorilor;
vizualizarea de nouti din cadrul coleciilor (export RSS);
crearea de statistici asupra coleciilor i utilizatorilor;
utilizarea a trei nivele de preferine: la nivel de sit, la nivel de colecie i
la nivel de utilizator;
avertizarea utilizatorilor atunci cnd o pagin este in curs de modificare,
pentru a evita modificri simultane;
suport pentru backlink-uri (gsirea referenilor pentru o pagin).
5.3 XWiki
XWiki (eXtended Wiki) este o soluie Wiki cu o arhitectur robust i scalabil
bazat pe platforma J2EE, fiind considerat att un Wiki profesional, datorit fa-
cilitilor de tip enterprise, ct i un Wiki de aplicaii, permind scrierea de
scripturi cu date structurate chiar din cadrul interfeei Wiki.
Aplicaia poate fi folosit n dou moduri: online, prin crearea de Wiki-uri
proprii, sau pe serverul Web propriu, prin dezvoltarea de aplicaii Wiki, fiind
o alternativ de cost redus la soluiile intranet i extranet.
Soluia XWiki prezint urmtoarele faciliti:
administrare: documente, membri, albume foto, calendare de evenimen-
te, blog-uri, prezentri online, utilizatori etc.;
controlul versiunilor documentelor;
posibilitatea atarii (prin upload) de fiiere la documente;
cutare text in cadrul Wiki-ului sau cutare SQL n metadate;
38 Diana Gorea

posibilitatea integrrii de feed-uri RSS;
posibilitatea editrii n stil WYSIWYG (What You See Is What You Get) a
paginilor din Wiki;
posibilitatea exportului n format PDF a documentelor;
schimbarea look-and-feel-ului prin crearea de skin-uri;
suport pentru internaionalizare;
suport puternic pentru programare n cadrul documentelor;
posibilitatea gzduirii de Wiki-uri virtuale, avnd adrese Web diferite (i
baze de date diferite).
Proiectul XWiki este open source i se bazeaz pe alte cteva proiecte open
source:
Hibernate, pentru abstractizarea accesului la baza de date i gestionarea
att a documentelor, a meta-datelor, ct i a informaiilor din formulare.
DBCP (Database Connection Pool), pentru gestionarea eficient a conexiu-
nilor la baza de date.
SVN (Subversion) pentru gestionarea versiunilor documentelor i a fiie-
relor ataate.
Struts, pentru gestionarea schemelor URL.
Velocity, pentru gestionarea vizualizrii documentelor i pentru genera-
rea de coninut dinamic n documentelor Wiki, folosind elemente de
programare.
Radeox, pentru motorul de redare XWiki.
OSCache, pentru pstrarea n cache a documentelor.
n comunitatea Wiki, utilizabilitatea este o provocare cheie, ea permind tu-
turor utilizatorilor s neleag coninutul i s aduc contribuii la acesta. Din
acest motiv, a fost elaborat un prototip destinat proiectelor intranet i organiza-
ionale, care conine ecrane XWiki i funcionaliti, furniznd astfel o serie de
recomandri ergonomice.
Recomandrile au ca scop facilitarea interaciunii utilizatorilor cu sistemul i
se refer la:
interfaa XWiki (prezentarea conceptelor XWiki i translatarea acestora
n spaii pe ecran),
prototipul XWiki (introducerea diverselor tipuri de utilizri: navigare,
administrare, editare la nivel text sau programatic),
componentele grafice (descrierea look-and-feel-ului componentelor grafi-
ce).

O facilitate interesant asupra creia vom insista n urmtoarele o reprezint
posibilitatea utilizatorilor de a programa doar prin intermediul interfeei XWiki,
fr a scrie o singur linie de cod. Dup cum am menionat i la nceputul seci-
unii, XWiki este un tip avansat de Wiki, avnd propriul API. Aceast interfa
de programare are mai multe nivele de funcionalitate, n funcie de tipul de
coninut cu care interacioneaz utilizatorul. Unul dintre aceste moduri l re-
prezint editorul de clase (a se vedea figura 2), altele sunt introduse prin inter-
mediul wizard-urilor de programare crearea de obiecte, introducerea de
obiecte ntr-un document etc.
Un alt aspect important i cu un oarecare grad de noutate este legat de unel-
tele colaborative puse la dispoziie de sistemul XWiki. Astfel, trebuie s existe
funcionaliti pentru interaciunea ntre membrii grupului, structurarea bazei
de cunotine a organizaiei i facilitarea oricror operaiuni ale acesteia.
Deoarece aceste operaiuni depind de tipul organizaiei, sistemul nu trebuie
totui ncrcat cu o multitudine de unelte, ci meninut la un grad rezonabil de
simplitate pentru toi utilizatorii. n acest caz sistemul trebuie s fie destul de
flexibil pentru a permite administratorului instalarea exact a uneltelor necesare
unui anumit context. Cele mai uzuale unelte dintr-un sistem colaborativ sunt:
indexul, membrii din spaiul de lucru, gestionarea sarcinilor.

Figura 2. Interfa Web pentru editarea de clase n XWiki
40 Diana Gorea

5.4 Alte aplicaii Wiki
UseModWiki este precursorul MediaWiki i a fost folosit din 2001 pn n 2002
pentru a rula toate versiunile Wikipediei. n ciuda faptului c ofer destul de
puine funcionaliti, UseModWiki este una din cele mai populare aplicaii
Wiki, ca numr de utilizri. Aceasta se datoreaz instalrii facile i faptului c
necesit puin putere de calcul. Aplicaia este scris n Perl i nu folosete de-
loc baze de date, coninutul fiind pstrat n fiiere text. Este disponibil sub li-
cen GPL.
KWiki este o aplicaie Wiki scris n limbajul Perl de ctre Brian Ingerson.
Particularitatea acestei implementri Wiki const n modularizare, ceea ce duce
la uurina n instalare, meninere i extindere, precum i la eliminarea redun-
danei. Astfel, fiecare funcionalitate este implementat ca un plugin, multe din-
tre plugin-uri fiind disponibile la CPAN (Comprehensive Perl Archive Network). n
plus fa de funcionalitile standard ale unui Wiki, KWiki ofer suport pentru
prezentri online, blog-uri, securitate, replicarea paginilor.
MoinMoin este o aplicaie Wiki sub licen GPL, scris n Python, care ps-
treaz coninutul Wiki n fiiere text. Dintre funcionalitile notabile amintim
prevenirea spam-urilor prin filtrarea coninutului cu ajutorul expresiilor regula-
te, notificare la email-uri, personalizarea interfeei prin CSS i XSLT, extensibili-
tate prin plugin-uri, existena unei ediii desktop.
SWiki (Squeak Wiki) este o implementare n limbajul Squeak a aplicaiei origi-
nale WikiWikiWeb a lui Ward Cunningham. Aplicaia este utilizat n principal
drept grup colaborativ de pagini Web n cteva universiti i a fost dezvoltat
de Grupul de Software Colaborativ de la Georgia Institute of Technology. Apli-
caia are propriul server Web (numit Comanche), care poate coexista cu alt ser-
ver Web, atat timp ct ruleaza la alt port. Un SWiki este format dintr-o main
virtual (squeak.exe), o imagine (squeak.image), un set de template-uri i
Wiki-urile virtuale. O aplicaie SWiki poate rula pe orice platform att timp ct
exist instalat maina virtual i permite crearea de Wiki-uri virtuale prin in-
termediul unei interfee Web de administrare. Cu excepia mainii virtuale i a
imaginii, care sunt disponibile n format binar, toate celelalte fiiere (template-
urile i paginile Wiki) sunt fiiere XML.
ZWiki este o aplicaie Web dezvoltat de Joyful Systems disponibil sub li-
cen GPL care ruleaz sub serverul Web Zope. Principalele funcionaliti ale
ZWiki sunt ierarhiile de pagini, backlink-urile, istoricul modificrilor, controlul
accesului, suportul pentru preferinele-utilizator, upload-ul de fiiere, skin-urile,
posibilitile de cutare.

6. CONCLUZII
Siturile Wiki fac parte dintre noile tendine n evoluia Web-ului, fiind utilizate
n principal ca aplicaii colaborative intranet n cadrul organizaiilor, precum i
n mod public pe internet. Succesul nregistrat de acestea se datoreaz faptului
c reprezint o soluie simpl i accesibil care favorizeaz comunicarea i inter-
schimbul de cunotine n cadrul grupurilor. n consecin, utiliznd acest tip de
unelte, timpul de realizare a unui proiect este redus considerabil.
Lucrarea a descris principalele aspecte legate de evoluia i impactul soluii-
lor Wiki n peisajul actual al Web-ului, precum si cele mai importante astfel de
soluii existente pe pia. Exist implementri Wiki n majoritatea limbajelor de
programare (de exemplu, Java, Perl, PHP, Python etc.), fiecare din implementri
oferind un set mai mare sau mai mic de funcionaliti. Majoritatea sunt exten-
sibile prin intermediul plugin-urilor, n acest mod putndu-se adapta la necesi-
tile fiecrei organizaii n parte.
Ca orice alt concept simplu, conceptul de editare liber are cteva implicaii
profunde. Faptul c utilizatorii obinuii pot edita n mod instantaneu orice pa-
gin dintr-un sit Wiki promoveaz crearea de coninut i ncurajeaz utilizarea
democratic a Web-ului.
Referine
Leuf, B., .Cunningham, B. , The Wiki Way: Collaboration and Sharing on the Internet, Addison
Wesley, 2001
* * *, Apache Struts Project, http://struts.apache.org/
* * *, Blog of Collective Intelligence, http://www.community-intelligence.com/blogs/public
* * *, Commons DBCP, http://jakarta.apache.org/commons/dbcp/
* * *, GNU General Public License, http://www.gnu.org/licenses/gpl.html
* * *, GNU Free Documentation License, http://www.gnu.org/copyleft/fdl.html
* * *, Hibernate, http://www.hibernate.org/
* * *, OSCache, http://www.opensymphony.com/oscache/
* * *, Portland Pattern Repository, http://c2.com/ppr/
* * *, Radeox Wiki Render Engine, http://radeox.org
* * *, Squeak, http://www.squeak.org/
* * *, Subversion Project Home, http://subversion.tigris.org/
* * *, SWiki, http://minnow.cc.gatech.edu/swiki
* * *, TWiki Enterprise Collaboration Platform, http://twiki.org/
* * *, Velocity, http://jakarta.apache.org/velocity/
* * *, Wikibooks, http://wikibooks.org/wiki/Wikibooks_portal
* * *, Wikiquote, http://wikiquote.org/wiki/Main_Page
* * *, Wikimedia Metawiki, http://meta.wikimedia.org
42 Diana Gorea

* * *, Wikimedia Commons, http://commons.wikimedia.org/wiki/Main_Page
* * *, Wikipedia, http://www.wikipedia.org/
* * *, Wikisource, http://sources.wikipedia.org/wiki/Main_Page
* * *, Wiktionary, http://www.wiktionary.org/wiki/Main_Page
* * *, WikiWikiWeb Frontpage, http://c2.com/cgi/wiki
* * *, XWiki, http://xwiki.org/
* * *, Zwiki FrontPage, http://zwiki.org/FrontPage
43

Capitolul 3
APLICAII FR FIR BAZATE PE WEB-UL SEMANTIC
Sabin-Corneliu Buraga
Str. G-ral. Berthelot, nr. 16 400783 Iai, Romnia
busaco@infoiasi.ro http://www.infoiasi.ro/~busaco/
Rezumat. Capitolul va lua n discuie diversele aspecte referitoare la dezvoltarea de servicii
(aplicaii) fr fir bazate pe tehnologiile Web-ului semantic. O cerin stringent a utilizatorilor
este aceea de a putea exploata, cu uurin, dispozitivele fr fir, ntr-o manier independent
de o anumit configuraie hardware/software sau de o anumit funcionalitate. Lucrarea va in-
vestiga o serie dintre oportunitile pe care le aduc componentele Web-ului semantic (limbajele
bazate pe XML, metadatele etc.) n vederea facilitrii managementului resurselor reelelor
wireless (mobile) constituite ad-hoc i compuse din dispozitive eterogene. De asemenea, se va
discuta i despre realizarea unei interaciuni facile dintre utilizatori i calculatoarele fr fir.
Cuvinte-cheie: Web semantic, servicii wireless, XML, interaciune.
1. INTRODUCERE
Proliferarea dispozitivelor de calcul mobile telefoane mobile, telefoane inteli-
gente (smart phones), PDA-uri, palmtop-uri, notebook-uri, laptop-uri, dispozitive de
tip Tablet PC etc. , n contextul unei tot mai accentuate nevoi de comunicare in-
ter-uman i de creare a unor medii computaionale ubicue, conduce la necesi-
tatea proiectrii i implementrii unor aplicaii (servicii) independente de
platform, care trebuie descrise ntr-o form universal i extensibil.
Avem aici n vedere mai ales dispozitivele fr fir (wireless), avnd o mobili-
tate mai ridicat fa de alte echipamente de calcul. Caracteristicile tehnice ale
dispozitivelor mobile sunt, de cele mai multe ori, mai modeste n comparaie cu
cele ale calculatoare convenionale de tip desktop. Exceptnd Tablet PC-urile i
laptop-urile, performanele resurselor hardware sunt sczute, deoarece dispoziti-
vele sunt echipate cu un procesor mai puin puternic, avnd o memorie de ca-
pacitate mai mic sau un ecran la rezoluie redus (Pratt, 2004). Unul dintre
avantajele majore este cel al suportului pentru o conectivitate bogat cu alte

dispozitive sau calculatoare via porturi USB (Universal Serial Bus) i cu infrarou
ori interfee de reea, folosind diversele standarde, protocoale i tehnologii In-
ternet actuale (Kammann, Strang & Wendlandt, 2001; Schiller, 2003).
Cu toate c interaciunea cu utilizatorul prin intermediul tastaturii este, n
majoritatea cazurilor, limitat, aceste dispozitive ofer premisele unei interaci-
uni multimodale prin suportul acordat folosirii altor dispozitive de intrare, pre-
cum ecranul senzitiv (touch screen) exploatat n conjuncie cu stylus-ul (care
poate asigura i o interaciune prin intermediul gesturilor) , creionul electronic
(pen) sau microfonul, aceasta din urm facilitnd interaciunea vocal prin re-
cunoaterea vorbirii (speech recognition). Se poate considera faptul c noile dis-
pozitive favorizeaz o interaciune mai complex apropiat de cea natural
(natural interaction) cu utilizatorul, implicnd o palet senzorial mai larg. De
asemenea, unele dispozitive de calcul (precum Tablet PC-urile) prezint afiaje
orientate att orizontal (landscape), similare monitoarelor obinuite, ct i verti-
cal (portrait). Unele ecrane pot avea form ptrat (square). Din acest motiv, in-
terfaa cu utilizatorul ale aplicaiilor rulate pe acel dispozitiv trebuie proiectat
diferit, n funcie de modul de dispunere a ecranului (Buraga, 2005b).
Aceste dispozitive creeaz reele wireless constituite ad-hoc, caracterizate prin
atribute ca mobilitatea ridicat a codului, a dispozitivului nsui i a utilizatori-
lor, eterogenitate la nivel de hardware i/sau software, diferene majore n ceea
ce privete limea de band i latena comunicaiei, caracterul relativ precar al
legturilor de comunicaie (Grigora, 2005; Schiller, 2003). Una dintre probleme-
le importante i de interes care apare este cea a descoperirii (regsirii) resurselor
i serviciilor n cadrul unei reele wireless ad-hoc. Acest aspect nu poate fi deloc
neglijat n contextul existenei unor aplicaii-utilizator facilitnd, de exemplu,
constituirea de reele sociale ubicue (ubiquitous social networks) i, deci, oferind
suport pentru interaciuni umane complexe.
Un alt domeniu de interes i de viitor este cel al afacerilor electronice
(e-business-ul), beneficiind tot mai mult de facilitile acordate utilizatorilor n
ceea ce privete accesarea i folosirea n manier on-line a diverselor servicii pu-
se la dispoziie de situri de comer electronic, bnci virtuale, case de licitaii
electronice, motoare de cutare etc. (Buraga, 2005a).
Scopul acestui capitol este cel de a descrie o metod original de specificare
n manier independent de platform a profilului unui dispozitiv fr fir, n
vederea constituirii unei infrastructuri computaionale flexibile, aliniat tendin-
elor actuale de dezvoltare a Web-ului semantic, menit a facilita managemen-
tul resurselor disponibile ntr-o reea fr fir constituit ad-hoc, cu implicaii n
ceea ce privete o mai bun interaciune cu utilizatorul.
Aplicaii fr fir destinate Web-ului semantic 45

2. PREZENTARE SUCCINT A WEB-ULUI SEMANTIC
2.1 Preambul
Scopurile originare principale ale spaiului World-Wide Web au fost acelea de a
oferi o modalitate de comunicare inter-uman prin partajarea cunotinelor i
posibilitatea exploatrii n manier distribuit a puterii de calcul a computerelor
conectate la Internet.
Spaiul WWW actualmente este compus din pagini (documente) marcate n
limbaje precum HTML (HyperText Markup Language), WML (Wireless Markup
Language), SVG (Scalable Vector Graphics) detalii n (Buraga, 2003b; Buraga,
2004b; Geroimenko, 2004; W3C) coninnd informaii textuale, grafice i/sau
multimedia destinate a fi citite i nelese esenialmente de ctre consumatorii
umani. Principala activitate a calculatoarelor este acea de a reda aceste coninu-
turi i nu s le interpreteze ntr-o manier automat i autonom. Informaiile
trebuie regsite ntr-un mod inteligent i trebuie s poat fi procesate de ctre
main. Conform creatorului spaiului WWW, Sir Tim Berners-Lee, Web-ul se-
mantic reprezint o pnz consistent i logic a tuturor resurselor de pe Web,
accentul punndu-se pe interpretarea datelor de ctre main i nu pe reprezen-
tarea lor. n cadrul unui scenariu vizionar, prezentat n (Berners-Lee, Hendler &
Lassila, 2001), se prefigureaz modul cum dispozitive inteligente partajeaz cu-
notine privitoare la propriile funcionaliti i la contextul n care i desfoa-
r activitatea, utiliznd reguli de inferen i meta-date pentru a (re)gsi
informaiile solicitate de utilizatorii umani.
Printre dezideratele Web-ului semantic se pot enumera conform (Berners-
Lee, Hendler & Lassila, 2001) i (Davies, Fensel & van Harmelen, 2003):
asocierea de semantici legturilor dintre resurse, cu posibilitatea extinde-
rii acestor semantici;
resursele Web s poat fi extinse i clasificate, pentru aceasta trebuind s
fie adoptate specificaii conceptuale;
la nivel programatic, s existe entiti capabile s proceseze n manier
inteligent informaiile i s poat raiona, oferind mainilor i oamenilor
servicii complexe (e.g., cutarea datelor, regsirea unor tipuri de resurse
fizice/logice, monitorizarea activitii aplicaiilor, filtrarea informaiilor
etc.);
partajarea de ctre utilizatori a cunotinelor, indiferent de modul de sto-
care i de reprezentare a acestora.
2.2 Niveluri ale Web-ului semantic
Arhitectura Web-ului semantic este una funcional, deoarece modul de consti-
tuire a acesteia se bazeaz pe specificarea incremental a unor limbaje, pornind

de la nivelul inferior (i.e. nivelul meta-datelor) i ajungnd la nivelurile super-
ioare (e.g., nivelul logic) a se vedea i figura 1. Limbajele disponibile pe fiecare
nivel pot satisface cerine impuse de diferite tipuri (sau niveluri) de aplicaii
(Buraga, 2004a; Davies, Fensel & van Harmelen, 2003):
1. nivelul meta-datelor pune la dispoziie cadrul general pentru exprimarea
unor aseriuni semantice simple. Modelul oferit conine concepte precum
resurs i proprietate, utilizate s exprime meta-informaii. Modelul se
specific via limbajul RDF (Resource Description Framework) i diverse vo-
cabulare de meta-date precum DCMI (Dublin Core Metadata Initiative), RSS
(Rich/RDF Site Summary), FOAF (Friend Of A Friend) etc. a se vedea
(Geroimenko, 2004) i (FOAF);
2. nivelul schemelor ofer posibilitatea specificrii de ontologii simple (ca, de
exemplu, taxonomii) pentru a se putea defini o descriere ierarhic a con-
ceptelor i proprietilor;
3. nivelul logic introduce limbaje ontologice mai complexe, capabile a modela
ontologii sofisticate. Se dorete astfel constituirea unor servicii (reasoning
services) pentru Web-ul semantic, de interes n ceea ce privete aplicaiile
destinate unor domenii precum e-business (e.g., servicii de luare sau asis-
tare n luarea deciziilor, servicii de monitorizare a vnzrilor on-line etc.).

Figura 1. Nivelurile de specificare a Web-ului semantic
La baza acestor niveluri, se afl dou dintre componentele principale ale
Web-ului actual: identificatorii uniformi de resurse URI (Uniform Resource
Identifiers) (W3C) i meta-limbajul XML (Extensible Markup Language) a se ve-
dea (Bray et al., 2004). Identificatorii uniformi de resurse sunt folosii pentru lo-
calizarea resurselor Web, identificndu-le printr-o reprezentare a mecanismului
de accesare (via adresa IP sau numele de domeniu Internet, de exemplu) ori
referindu-le printr-un nume persistent i unic detalii n (Buraga, 2004a). Meta-

limbajul XML reflect o manier uniform sintactic, independent de platfor-
m i de limbajul de programare, de structurare a datelor. Actualmente, se uti-
lizeaz un numr nsemnat de limbaje bazate pe XML pentru marcarea
diferitelor informaii a se consulta i (Buraga, 2004a), (Geroimenko, 2004) i
(W3C).
Pentru fiecare nivel al arhitecturii stratificate a Web-ului semantic, Consori-
ul Web (W3C) a standardizat sau urmeaz s standardizeze diferite limbaje
avnd drept temelie meta-limbajul XML.
3. SPECIFICAREA PROFILULUI UNUI DISPOZITIV WIRELESS
3.1 Premise
Pentru a asigura o interaciune corespunztoare cu aplicaiile rulnd pe dispozi-
tive mobile, trebuie luate n primul rnd n consideraie caracteristicile tehnice,
enumerate n cadrul seciunii 1, ale dispozitivelor fr fir, n vederea definirii
unui profil al dispozitivelor utilizate (Buraga, 2003a).
n cadrul profilului unui dispozitiv se vor putea specifica, printre altele:
metodele de acces la Internet cu fir (wired) sau fr fir (fixed wireless,
wireless LAN, Public Land Mobile Networks), conform celor prezentate n
(Kammann, Strang & Wendlandt, 2001);
stiva de protocoale folosit (TCP/IP sau X.25);
tipul conexiunii (e.g., punct-la-punct ori punct-la-multipunct);
standardele industriale adoptate (i.e., Bluetooth sau IrDA).
Din punctul de vedere al interaciunii dintre utilizator i dispozitiv, acest
profil va putea asigura:
realizarea unei proiectri independente de dispozitiv a interfeei-
utilizator,
efectuarea unor teste de evaluare a componentelor sau a prototipului de
interfa-utilizator a aplicaiilor destinate a fi rulate pe dispozitive (reale
ori virtuale),
existena unui suport inteligent oferit de mediile de dezvoltare a inter-
feelor pentru realizarea rapid de prototipuri de dispozitive, pentru pro-
iectarea i implementarea interfeei-utilizator destinate unor tipuri
(artefacte) de aplicaii exploatabile pe dispozitive mobile sau pentru efec-
tuarea unor teste de utilizabilitate (la nivel formal sau informal).
n vederea specificrii ntr-o manier independent de platform (configura-
ie hardware, sistem de operare, mediu i limbaj de programare etc.) a profilului
dispozitivului, soluia propus se bazeaz pe meta-limbajul XML (Bray et al.,
2004), n general, i pe cadrul de descriere a resurselor RDF (Buraga, 2004a;
Geroimenko, 2004; W3C), n special.

3.2 Specificarea caracteristicilor
Fiecrui dispozitiv, privit ca o resurs Web care poate fi identificat printr-un
identificator uniform de resurs, i vom asocia via construcii RDF diverse meta-
date reprezentnd caracteristicile (proprietile) acestuia. Suplimentar, se vor
putea specifica detalii referitoare la platforma/platformele de calcul folosite:
sistem(e) de operare, limbaj(e) de programare suportate, medii i biblioteci de
dezvoltare a aplicaiilor etc. Toate aceste caracteristici vor fi descrise prin inter-
mediul marcajelor XML.
Identificnd dispozitivul printr-un URI, avem posibilitatea s-i asociem fie
un URN (Uniform Resource Name) a crui valoare va putea desemna, de exem-
plu, un identificator unic stabilit de productor , fie un URL (Uniform Resource
Locator) care va reprezenta localizarea acelui dispozitiv n cadrul spaiului
World-Wide Web sau adresa unui serviciu Web de localizare a resurselor pe
baza unor criterii specificate (Grigora, 2005). Aceast flexibilitate este util n
contextul unui mediu ubicuu compus din dispozitive inteligente eterogene ori
n cel al unui mediu computaional distribuit pe scar larg de tip Grid.
Pentru anumite tipuri de dispozitive (e.g., Tablet PC), vor trebui precizate
anumite detalii referitoare la mijloacele multiple de interaciune (tastatur,
mouse, touch screen, stylus) i la caracteristicile de afiare: rezoluie, ecran versa-
til cu orientare landscape/portrait, senzitivitate tactil etc.
Un alt aspect esenial este cel privind autonomia dispozitivului. Vor trebui
reinute detalii referitoare la calitatea serviciilor (QoS Quality of Service) vi-
znd:
energia consumat (de exemplu, starea de ncrcare a bateriilor proprii i
diversele restricii de utilizare n contextul folosirii unor aplicaii necesi-
tnd o energie electric substanial e.g., rularea unui player multime-
dia),
conectivitatea la Internet (de exemplu, capacitatea de transfer via o leg-
tur Internet stabilit prin portul infrarou sau intervalul temporal al
stabilirii unei conexiuni optime la Internet ntr-o reea Bluetooth),
interaciunea cu utilizatorul (pot fi luate n consideraie diverse deprin-
deri ale utilizatorului, precum gradul de folosire a tastaturii n detrimen-
tul mouse-ului sau stylus-ului, acuitatea vizual, abilitile loco-motorii,
preferinele lingvistice etc.).
De asemenea, acest profil va putea include informaii privitoare la profilul
Bluetooth de acces la reea, n cazul dispozitivelor care au suport pentru aceast
tehnologie. Astfel, se vor putea memora date privitoare la profilurile de acces
prin port serial (serial port profile), prin modem (dial-up networking profile) sau via
reeaua local (local aria network access profile) a se vedea (Kammann, Strang &
Wendlandt, 2001).

Folosind aseriuni RDF, se ofer suport pentru nivelul de meta-date i cel on-
tologic n vederea clasificrii dispozitivelor i a exprimrii relaiilor dintre dis-
pozitivele mobile. Acest aspect devine foarte important n contextul utilizrii
acestor specificaii n cadrul Web-ului semantic.
Un prim exemplu
Vom considera, drept exemplu prezentat n (Buraga, 2005), un profil pentru un
dispozitiv Tablet PC din categoria dispozitivelor prezentnd caracteristici tehni-
ce avansate. Acest profil, exprimat n XML/RDF, va putea avea urmtoarea
structur:

<?xml version="1.0" ?>
<rdf:Description
rdf:about="urn:busaco:TabletPC">

<c:device type="TabletPC" wid="...">
<c:name>...</c:name>
<c:producer>...</c:producer>
<c:owner>...</c:owner>
...
</c:device>

<c:hardware>
<c:processor>...</c:processor>
<c:memory>...</c:memory>
<c:devices>
<rdf:Bag>
<rdf:li>
<c:connection port="IrDA">...</c:connection>
<c:screen>
<c:resolution type="1024x768" />
<c:format>
<rdf:Bag>
<rdf:li>landscape</rdf:li>
<rdf:li>portrait</rdf:li>
</rdf:Bag>
</c:format>
</c:screen>
</rdf:li>
...
</rdf:Bag>
</c:devices>
<c:power>...</c:power>
</c:hardware>

<c:platform>
<c:os version="...">...</c:os>
<c:framework>...</c:framework>
</c:platform>

<c:preferences>
<rdf:Bag>
<rdf:li>
<rdf:Description rdf:about="#User">
<c:input>...</c:input>

<c:output>...</c:output>
</rdf:Description>
</rdf:li>
...
</rdf:Bag>
</c:preferences>
</rdf:Description>
Spaiile de nume rdf i c desemneaz construciile RDF, respectiv meta-datele
asociate dispozitivului.
Un profil de dispozitiv va trebui s includ detalii privitoare la caracteristici-
le hardware, la platforma/platformele utilizate i la diverse preferine specifice
(fie specificnd parametri QoS, fie preferine generale i/sau implicite ale utili-
zatorului), conform fiecrui tip de dispozitiv n parte.
De asemenea, considernd c fiecare dispozitiv fr fir implic folosirea unui
anumit numr i tipuri de resurse, va trebui utilizat un limbaj de modelare a
meta-datelor privitoare la aceste resurse. Pentru aceasta se poate recurge la lim-
bajul XFiles (Buraga, 2002). Fiecare proprietate a unui resurse (considerat drept
fiier) va putea fi specificat prin intermediul unor construcii sintactice XFiles
(elemente i atribute).
Un al doilea exemplu
Exemplul de mai jos recurge la aseriuni RDF care includ elemente XFiles pen-
tru specificarea de alternative pentru execuia de la distan a unui program de
citire a tirilor RSS (Rich Site Summary).

<rdf:RDF>

<rdf:Description rdf:about="http://rowd.org/news.rss">
<xf:Properties>

<xf:Type xf:mime="application/xml+rss">ordinary</xf:Type>
<xf:Owner>busaco</xf:Owner>

<xf:Parser>
<rdf:Alt>

<rdf:li>
<rdf:Description
rdf:about="file:///usr/local/Firefox/firefox">
<xf:Type xf:mime="application/executable">
Ordinary
</xf:Type>
<xf:Location xf:dns="localhost">
127.0.0.1
</xf:Location>
</rdf:Description>
</rdf:li>
...

</rdf:Alt>
</xf:Parser>
</xf:Properties>
</rdf:Description>
</rdf:RDF>
Spaiul de nume xf desemneaz construciile puse la dispoziie de limbajul
XFiles.
3.3 Avantaje
Descrierile de meta-date vor putea fi folosite pentru a exprima identitatea unui
anumit dispozitiv sau a serviciilor pe care acesta le pune la dispoziie, n manie-
r public ori privat, altor dispozitive aflate n aceeai reea constituit ad-hoc
sau n alte reele. Folosind aceste meta-date, anumite aplicaii vor putea realiza
un management inteligent al resurselor pe care le posed un dispozitiv mobil
sau grup de dispozitive i, suplimentar, vor putea regsi anumite (tipuri de) re-
surse n scopul de a le solicita n vederea alocrii sau prelucrrii, fie la nivel de
sistem, fie la nivel de aplicaie-utilizator.
Avnd asociate meta-date precum cele descrise n exemplele anterioare, un
dispozitiv (ori un anumit serviciu pe care l pune la dispoziie) poate fi accesat
de la distan, de alte dispozitive similare i/sau de calculatoare convenionale,
conform unor criterii privitoare la performan, accesibilitate, securitate, conec-
tivitate etc., ntr-o manier similar celei descrise n lucrrile (Grigora, 2005),
(Kammann, Strang & Wendlandt, 2001) i (Lai et al., 2004).
Astfel, serviciile de numire i regsire a serviciilor din cadrul unei reele fr
fir constituite ad-hoc vor putea avea asociate descrieri semantice, facilitnd
printre altele:
interogarea (querying),
descoperirea (discovering),
rutarea datelor (routing),
gsirea compatibilitii (matchmaking) dintre servicii, dispozitive i/sau
utilizatori.
4. PROPUNERE DE IMPLEMENTARE
Pentru managementul unificat, independent de platform, al profilurilor dispo-
zitivelor formnd o reea fr fir constituit ad-hoc, propunem folosirea unui sis-
tem de multi-ageni urmrind liniile expuse n (Buraga, 2004c). Agenii software
sunt sisteme informaionale care se comport asemeni unor entiti ntr-o mani-
er autonom, execut diverse aciuni avnd un anumit nivel de reacie i eta-
leaz atribute precum nvarea, cooperarea i mobilitatea, asistnd utilizatorii
n activitile acestora (Buraga, 2003a; Buraga, 2004a).

4.1 Arhitectur conceptual
Sistemul de ageni va fi compus din ageni mediatori (ageni de achiziie de in-
formaii) care vor facilita interaciunea dintre utilizator i aplicaiile executate la
distan via servicii Web. Pentru fiecare aplicaie disponibil pe un anumit sis-
tem (e.g., calculatorul de la birou, cel de acas, calculatorul portabil, smartphone
etc.), va putea fi dezvoltat un serviciu Web rulat pe acel calculator care va prelua
de la ageni input-ul utilizatorului i va trimite agenilor output-ul aplicaiei prin
intermediul unui limbaj bazat pe XML. De asemenea, mediul va include i di-
veri asisteni digitali personali care vor recomanda utilizatorului folosirea unor
servicii Web corespunztoare tipurilor aplicaiilor dorite a fi rulate, n funcie de
anumite criterii (e.g., vitez de execuie, vitez de transfer a datelor prin Inter-
net, preferine etc.).
Agenii compunnd mediul multi-agent propus trebuie s ofere urmtoarele
servicii minimale (Buraga, 2004c):
generarea profilului al utilizatorului (se au n vedere reprezentarea mode-
lului mental i a celui cognitiv, plus modelarea cunotinelor utilizatoru-
lui) soluia adoptat trebuie s recurg la limbaje de reprezentare bazate
pe XML pentru a facilita interaciunea ntre ageni sau cea dintre ageni i
serviciile Web corespunztoare aplicaiilor rulate. De asemenea, pentru
stocarea modelului utilizatorului se poate recurge la diverse limbaje de
reprezentare a cunotinelor, limbaje care vor putea fi folosite i drept
limbaje de comunicare ntre ageni (agent communication languages). Solu-
ia propus detaliat n (Buraga & Alboaie, 2003) i (Buraga & Alboaie,
2005) va recurge la reprezentri bazate pe XML, meta-datele referitoare
la utilizator putnd fi exprimate prin construcii RDF, iar conceptele vehi-
culate via OWL (Web Ontology Language) (Geroimenko, 2004; W3C).
constituirea profilului dispozitivului acest aspect devine foarte impor-
tant dac se intenioneaz realizarea de interfee independente de perife-
ric (Buraga, 2005b).
transformarea datelor XML n alte tipuri de output-uri via foi de stiluri
XSL (Extensible Stylesheet Language) i convertirea input-ului utilizatorului
ntr-un format XML (acest serviciu prezint o importan deosebit mai
ales n contextul unei interaciuni multimodale).
posibilitatea migrrii odat cu utilizatorul pe diverse alte dispozitive sau
calculatoare pe care acesta le poate utiliza, n vederea constituirii unui
mediu de operare (interaciune) consistent i familiar.
4.2 Utilizri
Domeniile de utilizare ale unui astfel de sistem sunt multiple. Modelul de speci-
ficare independent de platform, de nivel nalt, a profilului unui dispozitiv,
poate servi ca baz pentru crearea unei infrastructuri computaionale compuse
din ageni oferind servicii de baz pentru aplicaiile destinate a fi rulate n ca-
drul Internetului fr fir. Proiectanii i dezvoltatorii vor putea beneficia de

avantajele tehnologiilor Web-ului semantic pentru a descrie, clasifica, regsi i
media resurse (data i servicii), n manier inteligent.
Una dintre utilizrile pe termen scurt ar putea fi n domeniul comunicrii in-
ter-personale ntre utilizatori, constituindu-se reele sociale digitale fr fir. Re-
laiile dintre utilizatori pot fi specificate la nivel de aplicaie graie unor
vocabulare precum FOAF (Friend Of A Friend), iar cele ntre resurse i dispoziti-
ve prin intermediul limbajelor prezentate n seciunea 3 a lucrrii de fa. O po-
sibil soluie de implementare este propus n (Serea, 2005).
O alt utilizare practic, beneficiind de avantajele oferite de sistemele multi-
agent, este cea n domeniul e-learning, mediul educaional putnd fi accesat via
dispozitive fr fir pentru o serie de detalii, se pot consulta lucrri precum
(Aroyo & Dicheva, 2004) i (Lai et al., 2004). Similar, se pot imagina aplicaii uti-
le i n domeniul e-business.
5. CONCLUZII
Capitolul a detaliat o serie de consideraii privitoare la specificarea n mod
independent de platform a profilului unui dispozitiv fr fir n vederea consti-
tuirii unei infrastructuri computaionale bazat pe tehnologiile Web-ului se-
mantic. O astfel de abordare permite aplicaiilor ca de exemplu, agenilor
inteligeni (Buraga, 2003a; Buraga, 2004a) s efectueze cutri de (clase de)
dispozitive pe baza meta-datelor asociate (viznd capabiliti computaionale,
caliti ale serviciilor, preferine etc.). Modelul propus poate fi utilizat n con-
juncie cu specificaiile CC/PP (Composite Capability/Preference Profiles) (W3C)
descriind proprietilor dispozitivelor i preferinelor utilizatorilor i P3P
(Privacy Preferences Project) (W3C) referindu-se la maniera de declarare a regu-
lilor de acces privat la resursele Web. Cercetrile ulterioare se vor concentra,
beneficiind de un posibil sprijin al industriei de profil, asupra specificrii la
nivel ontologic a profilului dispozitivelor mobile i a relaiilor stabilite ntre di-
verse instane ale acestora.
Referine
Aroyo, L., Dicheva D., The New Challenges for E-learning: The Educational Semantic Web,
Educational Technology and Society, 7 (4), 2004
Berners-Lee, T. , Hendler, J. , Lassila O., The Semantic Web, Scientific American, 5, 2001
Bray, T. et al. (eds.), Extensible Markup Language 1.0 (Third Edition), W3C Recommendation,
Boston, 2004: http://www.w3.org/TR/REC-xml
Buraga S., A Model for Accessing Resources of the Distributed File Systems, n Grigora, D.
et al. (eds.), Advanced Environments, Tools and Applications for Cluster Computing, Lecture
Notes in Computer Science LNCS 2326, Springer Verlag, 2002
Buraga S., Suportul pentru implementare, n Pribeanu, C. (ed.), Introducere n interaciunea
om-calculator, Matrix Rom, Bucureti, 2003

Buraga S., Alboaie, L., Alboaie, S., The Use of XML Technologies for Exchanging Information
within a Multi-Agent System, International Scientific Journal of Computing, 2 (3), 2003
Buraga, S. (coord.), Situri Web la cheie. Soluii profesionale de implementare, Polirom, Iai, 2004:
http://www.infoiasi.ro/~busaco/books/webapps/
Buraga, S., Asigurarea interaciunii om-calculator prin intermediul instrumentelor Web,
n Truan-Matu, ., Pribeanu, C. (eds.), Interaciune om-calculator Volumul de lucrri ale
primei Conferine Naionale de Interaciune Om-Calculator (RoCHI 2004), Editura Printech,
Bucureti, 2004
Buraga, S., Proiectarea siturilor Web (ediia a doua), Polirom, Iai, 2005:
http://www.infoiasi.ro/~design/
Buraga, S., Aspecte ale proiectrii i implementrii interfeelor-utilizator destinate dispozitive-
lor mobile n contextul Web-ului semantic, n Pitariu, H., Buraga, S. (eds.), Interaciune
om-calculator Volumul de lucrri ale celei de-a doua Conferine Naionale de Interaciune
Om-Calculator (RoCHI 2005), Editura ASCR, Cluj-Napoca, 2005
Buraga, S., Alboaie, L., Alboaie, S., An XML/RDF-based Proposal to Exchange Information
within a Multi-Agent System, n Grigora, D., Nicolau, A. (eds.), Concurrent Information
Processing and Computing, NATO Science Series, vol. 195, IOS Press, 2005
Davies, J., Fensel, D., van Harmelen, F. (eds.), Towards the Semantic Web, John Wiley & Sons,
2003
Geroimenko, V., Dictionary of XML Technologies and the Semantic Web, Springer Verlag, 2004
Grigora, D., Service-Oriented Naming Scheme for Wireless Ad Hoc Networks, n Grigora,
D., Nicolau, A. (eds.), Concurrent Information Processing and Computing, NATO Science Series,
vol. 195, IOS Press, 2005
Kammann, J., Strang, T., Wendlandt, K., Mobile Services over Short Range Communication,
Workshop on Commercial Radio Sensors and Communication Techniques, Technical University of
Linz, August 2001
Lai, A. et al., Improving Web Browsing on Wireless PDAs Using Thin-Client Computing,
Proceedings of WWW 2004, ACM Press, 2004
Pratt, J., Developing Screen Orientation-Aware Applications for Windows Mobile-Based
Pocket PCs, Proceedings of TechEd 2004, Microsoft Press, Redmond, 2004
Schiller, J., Mobile Communications, Addison-Wesley, 2003
Serea, M., MobiNET. Reele sociale digitale o nou abordare din perspectiva interaciunii
om-calculator, n Pitariu, H., Buraga, S. (eds.), Interaciune om-calculator Volumul de lucrri
ale celei de-a doua Conferine Naionale de Interaciune Om-Calculator (RoCHI 2005),
Editura ASCR, Cluj-Napoca, 2005
* * *, FOAF (Friend Of A Friend) Specification: http://rdfweb.org/
* * *, World-Wide Web Consortium, Boston, 2005: http://www.w3.org/

55

Capitolul 4
OUR PHOTOS: DESCRIEREA, REGSIREA I
VIZUALIZAREA FOTOGRAFIILOR N CADRUL
UNUI ALBUM ONLINE PARTAJAT O ABORDARE
BAZAT PE RDF I ASP.NET
Sergiu Sebastian Tauciuc
Absolvent al Facultii de Informatic, Universitatea Alexandru Ioan Cuza, Iai
stauciuc@yahoo.com, http://sebicu.lx.ro/
Rezumat. n acest capitol vom prezenta aspecte legate de conceperea i implementarea unei
aplicaii Web pentru gestionarea albumelor partajate de fotografii. Vom ncepe cu prezentarea
motivelor care au stat la baza acestei abordri inovatoare i vom continua cu prezentarea rolului
pe care tehnologiile XML i XML/RDF le-au jucat n implementarea aplicaiei.
Cuvinte-cheie: fotografie, XML, RDF, adnotare semantic, motor de cutare.
1. INTRODUCERE
Dei i-a demonstrat deja utilitatea ntr-o arie larg de domenii, Internetul mai
are nc un imens potenial de dezvoltare care ateapt s fie valorificat. De ace-
ea, direciile posibile de cercetare sunt, practic, nenumrate, iar utilizrile vii-
toare i nivelul de dezvoltare al tehnologiilor Web sunt greu de intuit.
Unul dintre domeniile n care Internetul a avut impactul cel mai puternic, n
special din punct de vedere comercial (bucurndu-se, din acest motiv, de o
atenie deosebit i n privina investiiilor n cercetare i dezvoltare), este piaa
serviciilor. ncepnd cu primul serviciu de pot electronic i continund cu o
serie de alte tipuri de servicii de comunicare (n timp real, audio, video), de di-
vertisment, de tiri, publicitare i multe altele, Internetul a revoluionat acest
domeniu, gsind noi i noi posibiliti de dezvoltare.
O categorie de servicii de actualitate, a crei apariii a fost fcut posibil de
implementarea noilor tehnologii Web, este cea a comunitilor virtuale. Acest
56 Sergiu Sebastian Tauciuc

tip de serviciu permite inter-relaionarea grupurilor de persoane pe baza unor
interese sau caracteristici comune. Plecnd de la aceast nevoie de relaionare
online sesizat deja n societatea actual, i analiznd un alt serviciu de comuni-
care (de data aceasta vizual), i anume cel al albumelor de fotografii online, am
ajuns la ideea prezentului proiect: crearea i meninerea de albume de fotografii
pentru comuniti (reale sau virtuale) de persoane.
Aplicaie Web pentru gestionarea albumelor comune de fotografii,
Our Photos renun la varianta clasic de abordare, n care fiecare utilizator n-
registrat i poate crea un numr de albume proprii, i adopt o abordare orien-
tat-album (sau orientat-comunitate): un numr de utilizatori mpart un album
comun, in care pot posta fotografii i impresii legate de tematica/ocazia crerii
albumului. Pentru realizarea unei personalizri reale, Our Photos ofer utilizato-
rilor posibilitatea adnotrii semantice a fotografiilor ncrcate, iar motorul
avansat de cutare bazat pe tehnologii XML/RDF permite regsirea mult mai
uoar a fotografiilor dorite.
2. SUPORTUL SEMANTIC PENTRU CUTARE
2.1 Fiierele de descriere RDF
Tehnologia RDF
Pentru descrierea detaliilor fotografiilor am folosit tehnologia RDF (Resource
Description Framework descris de McBride, Manola i Miller n RDF Primer),
limbajul standard de reprezentare a resurselor n spaiul World Wide Web.
Cu ajutorul acestei tehnologii, putem reprezenta orice colecie de resurse sub
forma unui graf n care nodurile reprezint resurse i proprieti ale acestora,
iar muchiile reprezint relaii ntre aceste noduri (predicate).
Proiectarea fiierului de descriere
Pentru a putea reprezenta ntr-un mod ct mai eficient toate proprietile con-
siderate pentru o fotografie, le-am grupat pe trei mari categorii:
Context proprieti legate de contextul n care a fost realizat fotografia:
anotimp, moment al zilei, vremea, ocazia realizrii fotografiei.
Content proprieti legate de coninutul i semnificaia fotografiei: titlul,
tipul, cuvinte cheie, persoane n fotografie, autor etc.
Technical caracteristici tehnice ale fotografiei, extrase din meta-datele fi-
ierului de stocare; am considerat acele proprieti mai relevante pentru
cutarea de tipuri de fotografii: data realizrii, camera folosit, timpul de
expunere, diafragma, viteza ISO, blitz-ul i rezoluia.
Our Photos 57

Figura 1 Reprezentarea proprietilor context, content i technical pentru o imagine

Cele trei categorii au determinat trei containere (recipiente) n structura
RDF/XML, fiecare container coninnd proprietile specifice. Aceste containe-
re sunt construite ca nite resurse (noduri) anonime, legate la fotografia descri-
s prin predicatele corespunztoare: m:content, m:context, respectiv
m:technical. Proprietile coninute de fiecare container vor fi reprezentate
astfel: predicatul (denumirea proprietii) va fi o muchie avnd predicatul ca
etichet, iar valoarea luat de acea proprietate va genera un nod frunz. Mu-
chia va lega nodul la containerul corespunztor.

Figura 2. Reprezentarea proprietilor de context


Figura 3. Reprezentarea proprietilor technical
Excepie la acest model de construcie sunt cuvintele cheie i persoanele pre-
zente n fotografie. Putnd aprea n numr mai mare de 1 pentru fiecare foto-
grafie, aceste elemente au fost organizate n alte dou containere n cadrul
structurii Content, respectiv Keywords i Depicts.

Figura 4. Reprezentarea containerului content

Our Photos 59

Meniuni:
Pe lng toate aceste proprieti, un fiier de descriere mai conine i tipul
MIME al fiierului descris, acelai pentru toate fiierele, i anume
http://xmlns.com/foaf/0.1/Image (dup cum se poate observa n figura 1).
ntruct fiierele XML/RDF sunt n fiiere separate de resursele descrise,
aceste resurse (imaginile) trebuie identificate n mod unic, cu ajutorul unui URI
(Uniform Resource Identifier). Am construit acest URI pe baza fiierului imaginii,
cu ajutorul unui algoritm MD5, care genereaz un cod unic pentru fiecare flux
de caractere primit la intrare. Astfel, fiecare fiier poate fi identificat n mod
unic, i un fiier de descriere se poate referi la un singur fiier imagine:
<rdf:Description
rdf:about="urn:md5:208124566719892772926951571692247823477">
Aceast metod de identificare poate fi luat n considerare ca o alternativ
la metoda clasic:
<rdf:Description
rdf:about="www3.infoiasi.ro/~sebicu/ourphotos/dscn2005.jpg">
Iat n continuare i fiierul RDF corespunztor grafului prezentat n imagi-
nile de mai sus (acest fiier a fost generat de aplicaie):
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:m="http://www3.infoiasi.ro/~sebicu/Licenta/termeni/"
xmlns="tag:default/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description
rdf:about="urn:md5:2541781321761091912401125513318450112725569">
<rdf:type rdf:resource="http://xmlns.com/foaf/0.1/Image" />
<m:context rdf:parseType="Resource">
<dc:author>Bogdan</dc:author>
<m:weather>Clear</m:weather>
<m:occasion>Ziua Simonei si a Roxanei</m:occasion>
<m:timeOfDay>Afternoon</m:timeOfDay>
<dc:coverage>Iasi, Bucium</dc:coverage>
<m:season>Summer</m:season>
</m:context>
<m:content rdf:parseType="Resource">
<m:photoType>Portrait</m:photoType>
<dc:description>Roxana, bucuroasa de cadoul primit,
il ia la o tura...</dc:description>
<dc:title>Roxana pe bicicleta</dc:title>
<m:keywords rdf:parseType="Resource">
<m:keyword>iarba</m:keyword>
<m:keyword>bicileta</m:keyword>
<m:keyword>sport</m:keyword>
</m:keywords>
<foaf:depicts rdf:parseType="Resource">
<m:person>roxana</m:person>
</foaf:depicts>
</m:content>
<m:technical rdf:parseType="Resource">
<m:YRes>768</m:YRes>
<m:takenOn>2005:05:03 17:18:51</m:takenOn>
<m:Exposure>1/160</m:Exposure>

<m:XRes>1024</m:XRes>
<m:Flash>24</m:Flash>
<m:Camera>Canon PowerShot A75</m:Camera>
<m:ISO>Unknown</m:ISO>
<m:Aperture>95/32</m:Aperture>
</m:technical>
</rdf:Description>
</rdf:RDF>
Trebuie menionat c fiierul este scris n format de descriere RDF/XML
Stripped Syntax, o sintax RDF prescurtat, bazat pe nivele de imbricare, reali-
zat cu ajutorul notaiei XML. Mai multe detalii se pot gsi la adresa
http://www.w3.org/2001/10/stripes/.
2.2 Fiierele de index XML
Procesarea detaliilor RDF pentru toate fotografiile incluse ntr-o cutare poate
deveni un proces costisitor, mai ales atunci cnd numrul fotografiilor crete.
De aceea este necesar optimizarea procesului de cutare, lucru realizabil cu
ajutorul indexrii cutrilor.
Am implementat aceast metod cu ajutorul unor fiiere de index XML, care
conin nregistrri referitoare la cutrile deja efectuate. Astfel, pentru unele cu-
vinte (cele existente n index n urma cutrilor anterioare) se evit cutarea
prin detaliile tuturor fotografiilor, rezultatul putnd fi obinut doar prin consul-
tarea indexului.
Pentru fiecare cuvnt indexat, fiierul index trebuie s conin id-urile foto-
grafiilor n detaliile crora apare acel cuvnt. Astfel, la o nou cutare pentru
acel cuvnt, tot ce trebuie de fcut este s cutm cuvntul n index i s aflm
id-urile corespunztoare, pe care le vom folosi mai apoi la construirea setului
de fotografii.
Pentru conceperea fiierului index, am mai inut seama de urmtoarele as-
pecte:
pentru fiecare cutare, vom dori o ordonare a fotografiilor n funcie de
relevana acestora, adic de gradul de potrivire a cuvintelor din cutare
peste detaliile fotografiei;
un cuvnt se poate potrivi parial sau complet peste un element al foto-
grafiei, fapt ce influeneaz relevana;
un cuvnt poate aprea sub forma diferitelor elemente ale fotografiei. O
fotografie care are cuvntul iarna n titlu are o relevan diferit de una
care are iarna ca i cuvnt cheie. Vrem s facem deosebirea ntre locuri-
le de potrivire ale unui cuvnt n detaliile fotografiei.
Dup considerarea i analiza mai multor variante de abordare, am ales-o pe
urmtoarea:
Our Photos 61

Indexul va fi structurat pe cuvinte, iar fiecare cuvnt va conine 0 sau mai
multe intrri, fiecare intrare (entry) avnd exact un element appears_as
(apare ca) i cel puin un element photo. Un element photo va conine atri-
butul phid (photo ID) i atributul full_match, care ne spune dac potrivirea e
total sau parial:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<index>
<search word="iarna">
<entry>
<appears_as>http://purl.org/dc/elements/1.1/title</appears_as>
<appears_in>
<photo phid="98" full_match="False" />
</appears_in>
</entry>
<entry>
<appears_as>
http://www3.infoiasi.ro/~sebicu/Licenta/termeni/keyword
</appears_as>
<appears_in>
<photo phid="96" full_match="True" />
</appears_in>
</entry>
</search>
......
</index>

ntruct aplicaia noastr este orientat-album, va exista cte un astfel de fii-
er index pentru fiecare album, care va ine evidena cutrilor efectuate pe al-
bumul respectiv.
3. ASPECTE PRIVIND IMPLEMENTAREA
Vom vedea n continuare cum folosim fiierele definite mai sus n cadrul unui
motor de cutare integrat n aplicaie. Am selectat fragmentele care lucreaz
efectiv cu aceste fiiere i, prin urmare, au avut rolul cel mai important n im-
plementarea procesului de cutare.
Utiliti pentru cutare
Elementul central n cadrul motorului de cutare este dat de clasa numit
PhotoFinder. Un finder caut n fiierul de index, reine ID-uri de fotografii,
apeleaz metode externe i n final construiete seturi de fotografii ce vor fi fo-
losite de nivelul superior.
Dar nainte de a putea explica modul de funcionare al unui astfel de obiect,
este necesar s descriem o serie dintre utilitile (metode statice) oferite de clasa
SearchUtilities i folosite de PhotoFinder.

1. Metoda ParsePhoto()
Funcia ParsePhoto() a clasei SearchUtilities folosete facilitile bibliotecii
DriveRDF pentru a procesa detaliile unei fotografii. Rezultatul este un obiect de
tip graf.
internal static IRdfGraph ParsePhoto(SessionToken token, Photo photo)
{
IRdfGraph graph = null;
string xmlPath = token.MapPath(photo.XmlFullVirtualPath);
//calea fiierului XML/RDF cu detaliile fotografiei
if(File.Exists(xmlPath))
{
try
{
graph = ParseRdfXml(xmlPath);
}
catch(ApplicationException exc)
{//.....}
}
else {//.....}
return graph;//in caz de eroare, se va returna null
}
2. Metoda CreateIndexEntries()
Aceast funcie primete la intrare un cuvnt i un set de fotografii i are rolul
de a cuta potrivirile acelui cuvnt n detaliile tuturor fotografiilor i de a gene-
ra un mic index pentru acel cuvnt i acel set de fotografii.
Am folosit cuvntul index tocmai pentru c structura generat simuleaz fii-
erul de index folosit i descris anterior. Aceast alegere este fireasc, dac ne
gndim c PhotoFinder-ul are rolul de a actualiza fiierul index pe baza rezulta-
telor cutrii. El va avea nevoie de o structur ct mai apropiat fiierului index,
pentru uurina procesrii.
Structura folosit va fi o list (ArrayList) de elemente de tip IndexEntry.

Elementele de tip IndexEntry sunt asemntoare semantic elementelor XML
din index, cu deosebirea c un singur element appears_as nu conine un set de
ID-uri, ci corespunde unui set de ID-uri. Setul de nregistrri este liniar, asem-
ntor unei tabele, n timp ce elementele XML sunt organizate, cum era firesc,
Our Photos 63

arborescent. Simularea structurii arborescente se va realiza asemntor structu-
rrii n cazul bazelor de date, i anume prin ordonare. Ordonnd elementele
dup word i appears_as, PhotoFinderul va ti c atunci cnd, iternd prin co-
lecie, descoper c valoarea appears_as s-a schimbat, nseamn c trebuie s
introduc un nou element de tip entry.
S lum exemplul de fiier index considerat anterior:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<index>
<search word="iarna">
<entry>
<appears_as>http://purl.org/dc/elements/1.1/title</appears_as>
<appears_in>
<photo phid="98" full_match="False" />
</appears_in>
</entry>
<entry>
<appears_as>
http://www3.infoiasi.ro/~sebicu/Licenta/termeni/keyword
</appears_as>
<appears_in>
</appears_in>
</entry>
</search>
......
</index>
Acest index ar putea fi generat n urma procesrii unei structuri formate din
urmtoarele 3 elemente IndexEntry:

word appears_as part_of photoId
Entry1: iarna title true 98
Entry2: iarna keyword false 96
Entry3: iarna keyword false 95

Subliniem c obiectele de tip IndexEntry sunt obinute n urma procesrii de-
taliilor fotografiilor i introduse n ordinea gsirii lor. Obiectul PhotoFinder este
cel care se va ocupa de sortarea i procesarea lor.
Vom prezenta n continuare funcionarea metodei CreateIndexEntries().
Iniializm structura pentru rezultate:
ArrayList entries = new ArrayList();
Declarm o variabil de tip IrdfGraph, care va conine graful detaliilor foto-
grafiei curente:
IRdfGraph sgraph;

Pentru fiecare fotografie din setul dat, generm arborele RDF i identificm
spaiile de nume folosite.

foreach(Photo photo in photos)
{
sgraph = SearchUtilities.ParsePhoto(token, photo);
string foafNs = sgraph.NameSpaces["xmlns:foaf"];
string rdfNs = sgraph.NameSpaces["xmlns:rdf"];
string dcNs = sgraph.NameSpaces["xmlns:dc"];
string mineNs = sgraph.NameSpaces["xmlns:m"];

Amintim c graful RDF conine informaiile efective legate de detaliile foto-
grafiei n nodurile sale frunz, mai exact n ID-urile acelor noduri. Muchiile re-
prezint predicate, iar n cazul nostru, nodurile intermediare reprezint
containere pentru proprieti. Pentru a exemplifica, faptul c o fotografie este
fcut iarna va fi reprezentat printr-un nod cu ID iarna legat de nodul con-
text printr-o muchie cu ID-ul avnd valoarea http://www3.infoiasi.ro/
~sebicu/Licenta/termeni/season.
Biblioteca DriveRdf ofer posibilitatea cutrii printre nodurile grafului a
unui nod cu un anumit ID (coninut), dar noi suntem interesai i de acele cu-
vinte care se potrivesc doar parial cu informaiile din noduri, de aceea este ne-
voie s apelm la colecia de 3-uple corespunztoare grafului RDF. Astfel,
prin iterarea tuturor 3-uplelor, vom putea gsi toate acele obiecte (cmpul obi-
ect din cadrul 3-uplului; proprietatea), cu care cuvntul dat se potrivete, fie to-
tal, fie parial. Cnd gsim un astfel de 3-uplu, construim o nregistrare
IndexEntry i o adugm la rezultate.

IRdfNTripleCollection triples = sgraph.GetNTriples();
foreach(IRdfNTriple triple in triples)
{
if(triple.Object.ToLower().IndexOf(word) >= 0
&& !triple.Predicate.EndsWith("#type>")
&& !triple.Object.StartsWith("_:"))
{
IndexEntry entry = new IndexEntry(word,triple.Predicate,photo.Id);
if(triple.Object.Trim('"').Length != word.Length)
//daca nu se potriveste ntreg cuvantul
entry.part_of = true;
entries.Add(entry);
}
}

Our Photos 65

n testul de potrivire a cuvntului am mai adugat unele condiii pentru evi-
tarea erorilor logice: nu dorim potrivirea cuvntului peste nodul type (MIME
type), care este ntotdeauna image, i nici peste nodurile de tip container, re-
prezentate prin noduri anonime cu un identificator atribuit de funcia de proce-
sare.
n final, nu rmne dect s returnm rezultatele obinute:
}
return entries;
}
Clasa PhotoFinder metoda GetPhotoIds()
Un finder folosete un cmp photoIds, de tip Hashtable, pentru a reine ID-uri
de fotografii. ID-urile sunt adugate prin funcia GetPhotoIds(), care gsete fo-
tografiile ce se potrivesc peste o colecie de cuvinte primit la intrare. Pe baza
ID-urilor stocate la un moment dat, finder-ul poate construi i returna un set de
fotografii prin apelul uneia dintre funciile GetPhotos() pentru cutare simpl,
dup cuvinte cheie sau GetFilteredPhotos() pentru cutare avansat, dup
cuvinte cheie i diverse filtre. Nu vom prezenta aceste funcii aici, dar este sufi-
cient s tim c ele pot construi setul de fotografii necesar, odat ce ID-urile au
fost selectate.
n cadrul obiectului de tip PhotoFinder, Id-urile sunt reinute
ntr-o colecie de tip Hashtable, sub form de perechi [photoId,
PhotoIdEntry]. Am construit clasa PhotoIdEntry pentru a reine
date suplimentare legate de fiecare ID memorat, cum ar fi re-
levana (importana) fotografiei pentru cutarea curent i
numrul de cuvinte care s-au potrivit peste aceast fotografie. Reinerea rele-
vanei ne va ajuta s ordonm eficient i corect fotografiile gsite la o cutare,
iar numrul de cuvinte ne va fi necesar pentru folosirea operatorilor logici, du-
p cum vom vedea.
Iniializri:
se pregtete o colecie local de tip Hashtable (similar cmpului
photoIds) pentru ID-urile ce vor fi selectate;
se ncearc deschiderea documentului index pentru albumul dat; dac
nu se reuete (documentul fie nu exist, fie nu e corect formatat), se cre-
eaz un document nou;
se creeaz un navigator XPath pentru fiierul de index; menionm c fo-
losim dou tipuri de obiecte asociate cu documentul index: dei obiectele
de tip XmlDocument au capabiliti de regsire de noduri, le vom folosi
doar pentru modificarea fiierului; pentru cutare vom folosi navigatoa-
re XPath, care sunt optimizate pentru o cutare rapid.


/// <summary>
/// Selecteaza id-urile fotografiilor care se potrivesc peste
/// cuvintele cheie intr-o colectie data si le adauga la colectia
/// curenta de id-uri.
/// Actualizeaz i fiierele de index atunci cand un cuvant dat
/// nu fusese indexat anterior
/// </summary>
/// <param name="coll">The given collection of keywords</param>
/// <param name="album"></param>
internal void GetPhotoIds(ArrayList coll, Album album, bool and)
{
string indexPath="";
Hashtable selectedIds = new Hashtable();
if(album != null)
indexPath = album.XmlFullVirtualPath
XPathDocument doc = null;
try
{
doc = new XPathDocument(indexPath)
}
catch
{///the document is not well-formed or missing
if(File.Exists(indexPath)) File.Delete(indexPath);
}
if(!File.Exists(indexPath))
{///create a new well-formed index document
XmlDocument newFile = new XmlDocument();
newFile.AppendChild(newFile.CreateXmlDeclaration("1.0","UTF-
8","yes"));
newFile.AppendChild(newFile.CreateElement("index"));
newFile.Save(indexPath);
}

if(doc == null)
doc = new XPathDocument(indexPath);

XPathNavigator nav = doc.CreateNavigator();
IEnumerator wordEnum = coll.GetEnumerator();
int maxId = DBFacade.MaxId(token);
...

Procesarea:
n continuare, se itereaz n colecia de cuvinte primit la intrare i se realizeaz
urmtoarele operaii:
caut apariii ale cuvntului n index;
pentru fiecare apariie, selecteaz ID-urile fotografiilor n care apare;
pentru fiecare ID, dac exist deja n colecie, i crete relevana; dac nu,
este adugat, cu relevan 1.
irul de bii found este folosit n procesul de numrare a cuvintelor potrivite
pentru fiecare fotografie. O simpl incrementare a variabilei words pentru un
Our Photos 67

idEntry nu este suficient, deoarece un cuvnt se poate potrivi de mai multe ori
cu o fotografie, ceea ce ar duce la inconsistene la nivel logic, cum ar fi o foto-
grafie care s-a potrivit cu 3 cuvinte, cnd de fapt n cutare au fost introduse
doar dou cuvinte. De aceea, pentru fiecare idEntry gsit ca potrivire, verificm
mai nti dac acea fotografie a mai fost gsit pentru cuvntul curent. Dac nu
a mai fost gsit, i putem crete numrul de cuvinte potrivite, i o marcm ca
fiind dirty (gsit) pentru cuvntul curent.
...
while(wordEnum.MoveNext())// pentru fiecare cuvant de cautare,
{
BitArray found = new BitArray(maxId,false);
//initializam tabloul de biti cu fotografiile
//gasite pt cuvantul curent
string word = wordEnum.Current.ToString().ToLower();
XPathNodeIterator it = nav.Select("//search[@word = '" + word +
"']");//cautam aparitii ale cuvantului in index
while(it.MoveNext()) // pentru fiecare aparitie,
{
XPathNodeIterator itp = it.Current.Select("entry/appears_in/photo");
//selectam fotografiile in care apare
while(itp.MoveNext())//pentru fiecare poza,
{ //luam id-ul
int photoId =
int.Parse(itp.Current.GetAttribute("phid","").ToString());
if(selectedIds.ContainsKey(photoId))
//daca mai am idul in colectie, ii cresc relevanta
{
((PhotoIdEntry)selectedIds[photoId]).relevance += 1;
//aici se poate aduna in functie de entry[appears_as] sau
//orice alte definitii alese pentru relevanta
//daca avem operator "and" si poza nu a mai fost gasita,
//o marchez ca gasita si ii cresc nr de cuvinte matched
if(and)
if(!found[photoId])
{
found[photoId] = true;
((PhotoIdEntry)selectedIds[photoId]).words++;
}
//daca avem operator "or", nu ne intereseaza daca
//se potriveste sau nu cu toate cuvintele
//ci doar sa-i crestem relevanta, lucru facut deja
}
else//daca nu am id-ul in colectie, creez o noua intrare pt ID
{
PhotoIdEntry newEntry = new PhotoIdEntry(photoId, 1);
if(and)
{
found[photoId] = true;
//fotografia a fost gasita pentru cuvantul curent
newEntry.words = 1;//si se potriveste cu un cuvant pana acum
}

selectedIds.Add(photoId, newEntry);
//daca nu mai am id-ul in colectie,il adaug
}
}
}

Pn n acest punct, funcia proceseaz corect cuvintele existente n fiierul
index, adic cele pentru care s-a mai efectuat anterior o cutare. n continuare,
ne ocupm de cuvintele neindexate, respectiv cele care nu au fost gsite n fii-
erul index. Pentru acestea vom cuta potriviri n detaliile fiecrei fotografii din
albumul selectat, vom aduga ID-ul fotografiei la ID-urile curente i vom actua-
liza indexul.
Furnizm o descriere a acestor operaii:
gsim apariiile cuvntului in setul de fotografii, si crem nregistrri de
tip IndexEntry, cu ajutorul funciei CreateIndexEntries() din clasa
SearchUtilities, prezentat anterior;
ordonm setul de nregistrri dup word i appears_as, pentru a si-
mula structura arborescent din index;
parcurgem nregistrrile cu apariii, actualizm colecia de ID-uri i fiie-
rul index.

if(it.Count == 0)
{
Photos photos = DBFacade.GetPhotosFromAlbum(token,album.Id
ArrayList entries = SearchUtilities.CreateIndexEntries(token,word,
photos);
IndexEntryComparer comp = new IndexEntryComparer();
entries.Sort(comp);
string curr_appas="";
IEnumerator entryEnum = entries.GetEnumerator();
XmlDocument docUpdater = new XmlDocument();
docUpdater.Load(indexPath);

XmlElement indexNode = docUpdater.DocumentElement;
XmlElement entryNode = null,app_asNode = null, wordNode = null;
XmlElement app_inNode = docUpdater.CreateElement("appears_in");

wordNode = docUpdater.CreateElement("search");//creaza nodul cuvant
XmlAttribute att = docUpdater.CreateAttribute("word");
att.InnerText = word;
wordNode.Attributes.Append(att);

while(entryEnum.MoveNext())//parcurgem inregistrarile cu aparitii
{
IndexEntry entry = (IndexEntry)entryEnum.Current;
if(selectedIds.ContainsKey(entry.photoId))
//daca am deja fotografia asta in photoIds, ii cresc relevanta
{
((PhotoIdEntry)selectedIds[entry.photoId]).relevance++;
if(and)
if(!found[entry.photoId])
{
found[entry.photoId] = true;
((PhotoIdEntry)selectedIds[entry.photoId]).words++;
}
}
Our Photos 69

else//daca nu o am, o adaug
{
PhotoIdEntry newEntry = new PhotoIdEntry(entry.photoId, 1);
if(and)
{
found[entry.photoId] = true;
newEntry.words = 1;
}
selectedIds.Add(entry.photoId, newEntry);
//daca nu mai am id-ul in colectie,il adaug
}
XmlElement photoNode = docUpdater.CreateElement("photo");
//nodul fotografia de adaugat pt cuvantul curent
XmlAttribute phid = docUpdater.CreateAttribute("phid");
//id-ul fotografiei
phid.InnerText = entry.photoId.ToString();
XmlAttribute fullMatch = docUpdater.CreateAttribute("full_match");
//cuvantul se potriveste in totalitate sau partial?
fullMatch.InnerText = (!entry.part_of).ToString();
//inregistrarea curenta (entry) ne spune acest lucru
photoNode.Attributes.Append(phid);
photoNode.Attributes.Append(fullMatch);

if(entry.appears_as.CompareTo(curr_appas) != 0 )
//cand se schimba 'appears_as'-ul, adaug nodul curent si
//incep sa construiesc alt nod
{
curr_appas = entry.appears_as;
if(entryNode != null)//daca entryNode este null,
//inseamna ca sunt la inceput; de-abia urmeaza sa il construiesc
{ //aceste operatii se realizeaza la schimbarea de appears_as,
//dar nu si pentru primul nod creat
entryNode.AppendChild(app_asNode);
entryNode.AppendChild(app_inNode);
wordNode.AppendChild(entryNode);
app_inNode = docUpdater.CreateElement("appears_in");
}
//aceste operatii se realizeaza la schimbarea de appears_as,
//inclusiv pt primul nod creat
entryNode = docUpdater.CreateElement("entry");
//creaza o noua intrare(entry)

app_asNode = docUpdater.CreateElement("appears_as");
//creaza nodul appears_as
app_asNode.InnerText = entry.appears_as.Trim('<','>');
}
app_inNode.AppendChild(photoNode);//adaug nodul fotografie construit
}

if(entryNode != null)
{ //la iesirea din bucla, pot ramane cu un nod entry pregatit
//dar neinserat
//daca acesta este cazul, il inserez acum
entryNode.AppendChild(app_asNode);
entryNode.AppendChild(app_inNode);
wordNode.AppendChild(entryNode);
}

indexNode.AppendChild(wordNode);
//adaug nodul cuvant (elementul <search>) la index

docUpdater.Normalize();//indentez fisierul de index
docUpdater.Save(indexPath);//salvez
}

n acest moment, tabela local selectedIds conine ID-urile tuturor fotografiilor
relevante pentru setul de cuvinte procesat. Acum se poate face selecia ID-urilor
ce vor fi adugate la colecia curent n funcie de operatorul logic folosit:
dac acesta este sau, atunci se adaug toate ID-urile gsite la colecia
curent,
dac el este i, se adaug doar acele fotografii care s-au potrivit cu toa-
te cuvintele date.

foreach(object key in selectedIds.Keys)
{
if(((PhotoIdEntry)selectedIds[key]).words == coll.Count || !and)
photoIds.Add(key, selectedIds[key]);
}
n acest moment, ID-urile corespunztoare cutrii dup cuvinte cheie i ope-
ratori logici sunt selectate i stocate n obiectul de tip PhotoFinder, iar fiierele
de index sunt actualizate. Construirea coleciei de fotografii (un obiect de tip
Photos) se va face plecnd de la aceste ID-uri i, eventual, aplicnd filtrele de
cutare avansat.
4. CONCLUZII
Noile tehnologii bazate pe XML fac posibil dezvoltarea unei ntregii noi game
de produse i servicii Internet. Prin realizarea acestei aplicaii am ilustrat doar
una dintre posibilele direcii de dezvoltare, bazat pe descrierea i identificarea
semantic a resurselor.
Posibilitile de dezvoltare sunt, ns, mult mai mari, ele fiind practic restric-
ionate mai degrab de resursele disponibile (umane i materiale) pentru reali-
zarea unui proiect dect de suportul tehnologic.
Referine
Brickley, D., Miller, L., FOAF Vocabulary Specification, 2005: http://xmlns.com/foaf/0.1/
Brickley, D., Photo metadata: the co-depiction experiment, 2002:
http://rdfweb.org/2002/01/photo/
Brickley, D., RDF: Understanding the Striped RDF/XML Syntax:
http://www.w3.org/2001/10/stripes/
Carroll, J., RDF Validation Service, W3C: http://www.w3.org/RDF/Validator/
Our Photos 71

Dublin Core Metadata Initiative, Dublin Core Metadata Element Set, 2004:
http://dublincore.org/documents/dces/
McBride, B., Beckett, D., RDF/XML Syntax Specification, W3C, 2004:
http://www.w3.org/TR/2004/REC-rdf-syntax-grammar-20040210/
McBride, B., Hayes, P., RDF Semantics, W3C, 2004:
http://www.w3.org/TR/2004/REC-rdf-mt-20040210/
McBride, B., Manola, F., Miller, E., RDF Primer, W3C, 2004:
http://www.w3.org/TR/rdf-primer/

73
Capitolul 5
MUMSAI UN SISTEM DE AUTENTIFICARE
AUTOMAT
Lenua Alboaie
1, 2
, Snic Alboaie
2

1
Facultatea de Informatic, Universitatea Al.I.Cuza
Str. General Berthelot, nr. 16, Iai, Romnia
adria@infoiasi.ro http://www.infoiasi.ro/~adria/
2
S.C Axiologic Research
Str. C. Negri, nr. 39, Iai, Romnia
{adria, abss}@axiologic.ro http://www.axiologic.ro/
Rezumat. MUMSAI este un sistem care face posibil autentificarea automat pe mai multe si-
turi ale unei organizaii. n cadrul capitolului de fa vom prezenta aspectele principale care fac
posibile funcionarea unui astfel de sistem. Implementarea se bazeaz pe serverul de aplicaii
PHP (PHP: Hypertext Processor) i pe protocolul SOAP (Simple Object Access Protocol).
Cuvinte-cheie: autentificare, SOAP, iframe, PHP.
1. INTRODUCERE
Vom ncepe discuia plecnd de la un simplu scenariu general n care un utiliza-
tor dorete s se autentifice pe un anumit sit. La un prim pas se va trimite o ce-
rere ctre server. Acesta i va ntoarce ca rspuns o pagin i va seta n antetul
rspunsului HTTP mai multe cookie-uri. Simultan, pe partea de server se iniiaz
o sesiune.
Cookie-urile pot fi vzute ca o pereche (nume,valoare) i sunt folosite pentru
identificarea sesiunii (Buraga, 2001). ntr-o sesiune se pot stoca diferite informa-
ii cum ar fi: utilizator, parol, adres de e-mail etc. Aceste informaii ns nu
pot fi plasate n cookie-uri pentru c nu ar mai exista securitate. Este important
s remarcm c nu se pot citi cookie-urile setate de alt domeniu i de aici necesi-
tatea apariiei aplicaiei noastre.
2. ABORDAREA MUMSAI
MUMSAI (Management of Users on Many Sites and Auto-login all the Internet) este
un sistem de autentificare centralizat compus dintr-un sit server i mai multe si-
turi client.
74 Alboaie Lenua i Alboaie Snic

n discuiile noastre viitoare vom folosi urmtoarele notaii:
S serverul principal care autentific utilizatorii ;
C
1
, ..., C
n
clienii care autentific utilizatorii cu ajutorul S.
Serverul principal execut dou funcii:
1. Autentificare : se verifica autenticitatea pentru perechea (user,parola) tri-
mis de un client i se trimite rspunsul corespunztor mpreun cu per-
misiunile utilizatorului n caz afirmativ.
2. Conectare (logged) automat: conectarea pe un sit, implic desigur conec-
tarea pe toate siturile organizaiei.
Vom prezenta n aceast seciune cele dou situaii n care se poate afla utili-
zatorul atunci cnd dorete s se autentifice i vom descrie n paralel mecanis-
mele care stau la baza funcionarii sistemului MUMSAI.
Avem dou cazuri:
cel n care utilizatorul s-a conectat direct pe server;
cel n care utilizatorul s-a conectat pe unul din siturile client.
Cazul 1. Utilizatorul este conectat pe server
n aceast situaie, utilizatorul i-a introdus ID-ul i parola pe situl server S
(suntem la momentul T
0
).

Figura 1. Cazul 1 Momentul T
0

ntrebarea care se pune este urmtoarea: care este mecanismul care permite
utilizatorului s fie conectat automat pe toate celelalte situri ale organizaiei?
Altfel spus dac utilizatorul intr pe situl client, de exemplu C
1
, acesta ar trebui
s tie cine este utilizatorul.
Considerm c la momentul T
1
utilizatorul face cerere la C
1
.

La momentul T
2
au loc:
C
1
genereaz un numr aleatoriu;
C
1
i va ntoarce utilizatorului pagina n care sunt incluse dou
iframe-uri.
MUMSAI un sistem de autentificare automat 75

Aceste iframe-uri au forma:
<iframe src=http://S/getFrame.php?key=nr_random&client=C1 />
<iframe src=http://C1/getFrame.php?key=nr_random />

Figura 2. Cazul 1 Momentele T
1
si T
2

La momentul T
3
, S i C
1
primesc cererile din iframe-uri. S va ti valoarea lui
key i, n plus, S deine o sesiune cu utilizatorul. Deci, n acest moment S cunoa-
te c o anumit valoare (a parametrului key) este asociat cu un utilizator.
La un moment T3 S va comunica aceast informaie (folosind SOAP) sitului
client C
1
.
Facem observaia c iniierea acestei comunicri de ctre C1 sau de ctre S
depinde de implementare.

3

Iar la momentul T3 C1 comunic utilizatorului faptului c este conectat se
realizeaz, de fapt, un refresh al iframe-ului pentru care avem:
src=http://C1/getFrame.php?key=nr_random

3

Utilizatorul va avea senzaia c s-a conectat automat.

Cazul 2. Utilizatorul este conectat pe unul din siturile client C
1
, ..., C
n

n aceast situaie utilizatorul i-a introdus ID-ul i parola pe un sit client, s
zicem C
1
(suntem la momentul T
0
). Problema care trebuie rezolvat n acest caz
este: cum se face autentificarea pe server?

0

Facem observaia c la un moment T
0
, imediat ce C
1
a primit cererea se va
ncerca log-area utilizatorului. Fiindc aceast aciune nu funcioneaz, la mo-
mentul T
1
C
1
i ntoarce dou iframe-uri. Unul care conine cmpurile n care uti-
lizatorul trebuie s introduc ID-ul i parola (care face apel la C
1
) i un iframe cu
apel la S:
<iframe src=http:/S/getframe.php?client=C1&key=nr_random />
<iframe src=http://C1/getFrame.php?key=nr_random />

1

La momentul T
2
, serverul S creeaz o sesiune i ntreab prin SOAP pe C
1
ci-
ne este utilizatorul conectat cruia i corespunde acel key. C1 i rspunde (tot fo-
losind SOAP) prin perechea ID de utilizator i parol (la momentul de timp T
3
).

Figura 7. Cazul 2 Momentele T
2
i T
3

Din acest moment, orice vizit pe siturile client C
2
, , C
n
ne duce la cazul 1,
discutat anterior.
Mecanismul de autentificare asigur faptul c o a treia parte care citete
neautorizat traficul nu poate realiza o autentificare frauduloas.
3. TEHNOLOGII FOLOSITE. DETALII DE IMPLEMENTARE
Pentru implementarea sistemului MUMSAI, tehnologiile principale folosite
sunt: SOAP (Simple Object Access Protocol), PHP, iframe-uri.
Dup cum s-a putut vedea n seciunea anterioar, folosirea iframe-urilor este
cheia sistemului MUMSAI. Prin inserarea unui iframe n pagina, se poate execu-
ta scriptul specificat de atributul src. Acesta poate fi localizat i pe alt domeniu
i, n cazul setrii n sesiune a unei variabile, aceasta rmne valabil pe tot tim-
pul ct browser-ul este pornit. Dac se viziteaz acel domeniu, variabila din se-
siune poate fi accesat de alt script provenind din acelai domeniu.
n MUMSAI, comunicarea ntre client i server se realizeaz prin apeluri
SOAP.
Protocolul SOAP este un protocol simplu, utilizat pentru schimbul de infor-
maii ntr-un mediu distribuit, descentralizat.
SOAP permite (Alboaie & Buraga, 2003; SOAP, 2003):
schimbul de informaii structurate ntr-un mediu distribuit i descentra-
lizat;
accesarea de servicii, obiecte ntr-o manier independent de platform.
Scopul principal al SOAP este facilitarea interoperabilitii ntre platforme i
limbaje de programare.

n MUMSAI un client SOAP are urmtoarea form:

n serverul SOAP se specific funcia din client cu acelai nume i parametrii
din vectorul $param:

Vom considera mai departe tabelele pentru autentificare folosite n cadrul
sistemului MUMSAI.

Unui utilizator conectat i corespunde o linie in ambele tabele, pe client i pe
server. O nregistrare este tears n momentul aciunii de logout. Dac utilizato-
rul nu urmeaz link-ul logout i nchide direct browser-ul, linia rmne n tabel,
dar este suprascris la urmtorul login.
Pentru server avem:
Tabela LOGIN:

Tabela AutoIncIDs:

Pentru client avem:
Tabela LOGIN:

Tabela Autoinc:

n seciunea 2 am discutat despre modul cum se face autentificarea automat
a utilizatorilor. Pe lng aceast facilitate, MUMSAI asigur i de-conectarea au-
tomat de pe toate siturile organizaiei.
i n acest caz avem dou situaii:
1. de-conectarea de pe situl server
Se parcurg paii urmtori:
tergerea din tabela proprie a liniei userlogat, tergerea din sesiune;

parcurgerea pe rnd a siturilor din tabela Sites i apelarea serverelor
SOAP de pe fiecare;

se trimite utilizatorul care trebuie de-conectat. Un server de pe un
sit C
n
terge din tabela proprie linia corespunztoare, astfel c la
urmtorul refresh sau apel de pagin nu va gsi nici o linie n tabel
care s corespund cu cheia lui, ntreab serverul S i acesta nu are
nimic nregistrat n sesiune, deci nu e conectat nici un utilizator pe
acea main.

Figura 8. Logout i apeluri SOAP
2. de-conectarea de pe unul dintre siturile client
Se parcurg paii urmtori:
tergerea din tabela proprie a liniei (user, cheie), tergerea din sesiune
a cheii;
apelul SOAP ctre S;


serverul la rndul lui terge din tabela proprie LOGIN linia cores-
punztoare (user, cheie) i apoi trimite n aceeai maniera (a se vedea
figura 8) un apel SOAP la fiecare sit C
n
s tearg din tabelele cores-
punztoare acel utilizator. La finalul logout.php de pe un C
n
, se ape-
leaz logoutServer.php de pe S pentru a terge i din sesiunea
serverului utilizatorul conectat. Apelul se realizeaz prin intermediul
unui iframe avnd drept parametru cheia curent de pe un sit C
n
.
4. TESTARE
Pentru a testa modul de funcionare a sistemului MUMSAI, v sugerm s v
creai un cont pe http://www.axiologic.net/(serverul S din discuiile noastre). Du-
p autentificare, vei observa c putei naviga pe oricare situri care fac parte din
sistemul de autentificare comun, fr a mai fi nevoie de nici o operaie de login.
O list a acestor situri cuprinde:
http://www.ro.free-test.info/
http://today-news.info/
http://www.intrebare.ro/
5. CONCLUZII
MUMSAI este un sistem de autentificare care permite ca un utilizator odat au-
tentificat pe un sit, s poat fi automat autentificat pe alte situri care fac parte
din aceeai organizaie. Mai mult, de-conectarea de pe un sit presupune de-
conectarea automat de pe toate siturile organizaiei.
Un alt proiect a crui funcionalitate este similar cu MUMSAI este Passport
Network creat de Microsoft i care permite conectarea pe MSN Messenger, MSN
Hotmail, MSN Music, precum i a altor situri i servicii nrudite. ns diferena
const n faptul c sistemul nostru poate fi folosit de ctre orice organizaie care
dorete utilizarea de tehnologii neproprietare.

Referine
Alboaie, L., Buraga, S., Dialoguri despre SOAP, NET Report, feb. 2003:
http://www.infoiasi.ro/~busaco/publications/articles/SOAP.pdf
Buraga, S., Tehnologii Web, Matrix Rom, Bucureti, 2001:
http://www.infoiasi.ro/~busaco/books/web.html
* * *, SOAP: http://www.w3.org/TR/2003/REC-soap12-part0-20030624/
* * *, PHP: http://www.php.net/
* * *, IFRAME: http://www.htmlhelp.com/reference/html40/special/iframe.html
* * *, MUMSAI: http://www.axiologic.net/MUMSAI/

83

Capitolul 6
DEZVOLTAREA EXTENSIILOR PENTRU FIREFOX
Sergiu Dumitriu
sdumitriu@info.uaic.ro http://purl.org/net/sdumitriu
Rezumat. n cadrul capitolului de fa se face o descriere a structurii extensiilor pentru naviga-
torul Mozilla Firefox i a tehnologiilor implicate n dezvoltarea unei astfel de extensii. Materialul
va trece n revist o serie dintre aspecte privitoare, printre altele, la XUL (Extensible User-
Interface Language), JavaScript, Mozilla Application Framework.
Cuvinte-cheie: Firefox, extensie, XUL, XPI, XPConnect, JavaScript.
1. INTRODUCERE
Mozilla Firefox este un navigator web gratuit, dezvoltat de Mozilla Foundation i
sute de voluntari din comunitatea open-source.
Spre deosebire de alte aplicaii, intenia este ca Firefox s fie distribuit ca un
navigator minimal, fr funcionaliti care, n general, prezint interes pentru
un grup relativ restrns de persoane, oferind ns un suport vast pentru dezvol-
tarea de extensii ce pot fi adugate de ctre cei interesai de o anumit funcio-
nalitate (feature). Astfel, navigatorul este meninut rapid, eficient, cu un pachet
mic de instalare i uor adaptabil necesitilor fiecrui utilizator.
Dintre funcionalitile incluse n browser amintim suportul pentru navigare
utiliznd ferestre interne (tab-uri), pentru afiarea tirilor distribuite prin fiiere
84 Sergiu Dumitriu

RSS (live bookmarks), suport extins pentru standarde web, suport pentru localiza-
rea n diferite limbi i pentru teme (skins).
1.1 about:mozilla
The Book of Mozilla, 12:10 Netscape Communicator
@ Netscape Communications Corporation
La baza fundaiei Mozilla st Netscape Communications Corporation i navigatorul
Netscape, versiunea 1.0 a acestuia fiind lansat pe 10 decembrie 1994, sub nume-
le Netscape Navigator. Aplicaia s-a extins, devenind o soluie complet pentru
aplicaii internet, incluznd, printre altele, un navigator, client de pot electro-
nic i editor de cod HTML. Suita de aplicaii a fost redenumit Netscape
Communicator ncepnd cu versiunea 4.0 pentru a evita confuzia ntre suita de
aplicaii i navigatorul propriu-zis.
The Book of Mozilla, 3:31 Mozilla Application Suite
@ Mozilla Organization
Un pas important n istoria Firefox este deschiderea codului surs al suitei de
aplicaii Netscape Communicator, i pornirea proiectului Mozilla, la data de
31 martie 1998. Astfel a fost creat organizaia Mozilla (Mozilla Organization) ca
echipa responsabil cu meninerea codului i luarea deciziilor de strategie lega-
te de suita Netscape Communicator.
Codul aplicaiei era relativ mare i greu de ntreinut, astfel nct s-a preferat
abandonarea codului existent i conceperea unui nou model pentru aplicaii.
Aceast decizie a condus la dezvoltarea unei noi biblioteci de componente de
interfa, un nou motor de randare i poziionare (layout) numit Gecko, noi teh-
nologii de descriere a interfeei (XUL) i de dezvoltare a componentelor
(XPCOM, XPConnect), .a., proiectul fiind redenumit Mozilla Application Suite.
The Book of Mozilla, 7:15 Mozilla Firefox @ Mozilla Foundation
Pe 15 iulie 2003, AOL (care ntre timp devenise deintorul Netscape
Communications Corporation), a anunat nchiderea diviziei responsabile de navi-
gatoarele Web, deci ncetarea suportului din partea companiei fondatoare pen-
tru dezvolatea suitei de aplicaii Mozilla.
n aceeai zi, a fost creat Fundaia Mozilla (Mozilla Foundation), o organiza-
ie non-profit compus n principal din fotii angajai Netscape, ce nlocuiete
Mozilla Organization. Aceast fundaie gestioneaz n prezent codul navigatoru-
lui i al proiectelor adiacente.
Pe data de 2 aprilie 2003, s-a decis ca efortul programatorilor s fie redireci-
onat spre dezvoltarea aplicaiilor de sine stttoare, i nu a unei soluii complete
pentru activitile desfurate pe Web. Astfel a fost creat proiectul Firefox (iniial
numit Phoenix) ca navigatorul oficial dezvoltat de Mozilla, i proiectul
Thunderbird (iniial Minotaur), clientul de pot i de tiri electronice. Mozilla
Dezvoltarea extensiilor pentru Firefox 85

Application Suite a continuat ns s fie dezvoltat de Mozilla Foundation pn la
data de 10 martie 2005, cnd a fost anunat oficial c nu vor mai fi lansate versi-
uni noi dincolo de Mozilla 1.7. Proiectul a fost redenumit SeaMonkey i a intrat
sub coordonarea consiliului SeaMonkey (the SeaMonkey Council).
1.2 Firefox
Termenul de bloatware se refer la soft multifuncional care ncearc s rspund
unei game ct mai diversificate de cerine din partea utilizatorilor, necesitnd
ns mari cantiti de resurse (spaiu pe disc, memorie, timp de procesare).
Funcionalitile (considerate n parte) puse la dispoziie sunt ns adesea folosi-
te de un numr foarte mic de utilizatori. O lege empiric, cunoscut ca mitul
80/20, spune c 80% dintre utilizatori folosesc doar 20% din funciile unui pro-
gram avansat.
Chiar i despre variantele de nceput ale Netscape Communicator se putea
spune c sunt prea funcionale, ajungndu-se ca ultimele variante ale suitei de
aplicaii Mozilla s includ, pe lng navigatorul efectiv, un client de pot i
tiri electronice, un client IRC, un editor pentru pagini Web i un debugger pen-
tru codul JavaScript.
Abundena funcionalitilor oferite ntr-un singur pachet de instalare era de-
ranjant pentru cei care doreau un simplu program de navigare, sau doar un
client de IRC, astfel nct s-a decis dezvoltarea de aplicaii de sine stttoare n
locul unei suite ntregi.
Proiectul numit iniial m/b (mozilla/browser) i desprins din codul navigatoru-
lui inclus n suita de aplicaii Mozilla, a devenit apoi Phoenix (lansat n septem-
brie 2002, versiunile 0.1 0.5), Mozilla Firebird (0.6, lansat n mai 2003, pn la
0.7.1, octombrie 2003), i n final Mozilla Firefox, ncepnd cu versiunea 0.8.
Versiunea 1.0 a fost oficial lansat pe data de 9 noiembrie 2004, avnd peste
un milion de descrcri n prima zi, 25 de milioane de descrcri n primele
99 de zile, i deja peste 100 de milioane de descrcri n prezent. Versiunea sta-
bil (curent la momentul redactrii acestui text) este 1.5, lansat pe data de
29 noiembrie 2005.
2. STRUCTURA FIREFOX
Pachetul de instalare al navigatorului pune la dispoziie un set minimal de
funcionaliti, oferind ns un suport excelent pentru adugarea facil a unor
pachete specializate. Aceast extensibilitate este asigurat de organizarea efici-
ent a diverselor sub-proiecte ce compun o aplicaie Mozilla, separarea clar pe
nivele a prilor componente i definirea protocoalelor de comunicare ntre ni-
86 Sergiu Dumitriu

vele, crearea de protocoale i limbaje noi pentru descrierea componentelor de
interfa, a interfeelor cu utilizatorul, a structurii logice a unei aplicaii, a punc-
telor de extensie etc.
2.1 Mozilla Application Framework
Inima unei aplicaii Mozilla este Mozilla Application Framework, cunoscut ini-
ial ca XPFE (Cross Platform Front-End), o colecie de tehnologii i componente
software disponibile pe mai multe platforme. Dintre acestea amintim Gecko, mo-
torul de afiare i poziionare a elementelor grafice, Necko, o bibliotec de clase
pentru comunicarea n reea, XPCOM, o variant multiplatform pentru comu-
nicarea ntre componente, XPConnect, tehnologie ce permite accesarea compo-
nentelor XPCOM din JavaScript, i multe altele.
2.2 Chrome
Pentru a separa o aplicaie Mozilla n pri logice, a trebuit s se gseasc o me-
tod de a referenia o parte logic a unei aplicaii nu prin calea fizic a unui fii-
er n care se afl componenta, ci printr-o cale logic. Astfel a fost introdus
pseudo-protocolul URL chrome (cunoscut i drept spaiul de nume chrome,
vzut ca o colecie de nume logice, i nu n legtur cu spaiile de nume pentru
XML), prin care se pot referi subcomponente ale unei aplicaii.
Astfel:
chrome://navigator/ se refer la navigatorul propriu-zis, ca o componen-
t de sine stttoare,
chrome://navigator/content/ se refer la partea de coninut a navigatoru-
lui, fiierele ce in de interfa i de funcionare,
chrome://navigator/skin/ se refer la tema curent aplicat navigatorului,
chrome://global/skin/ se refer la tema global a unei aplicaii,
chrome://navigator/locale/ se refer la fiierele ce in de localizarea na-
vigatorului,
chrome://myextension/skin/background.png se refer la un fiier efectiv
din tema curent a extensiei cu numele myextension, i anume fiierul
imagine background.png. Locaia efectiv a fiierului nu poate fi deter-
minat direct din URL-ul specificat. Acest fiier poate fi utilizat n aplica-
ie prin locaia logic, locaia fizic fiind gestionat de platforma Mozilla
Application Framework. n plus, nefiind specificat n URL o tem grafic
anume, la schimbarea temei este posibil ca i fiierul utilizat s se schim-
be, independent de URL-ul care l refer. n acest fel, o nou tem grafic
nu trebuie dect s ofere locaii fizice valide pentru locaiile logice, i nu
s modifice efectiv codul aplicaiei de baz.
Uniformitatea structurii unui URL, precum i faptul c acesta reprezint o re-
ferin la nivel logic a unei componente, permit dezvoltatorului unei extensii s

trateze identic pe diferite platforme aspecte legate de accesarea resurselor (se-
paratorii diferii de directoare utilizai n Windows sau n Linux, regsirea di-
rectorului unde se afl instalat aplicaia sau o anumit extensie, regsirea unui
fiier generic din partea de localizare n funcie de o setare anume a limbii).
Acest protocol permite referenierea unor macrocomponente logice sau mo-
dule ale aplicaiei (global, navigator, inspector, talkback, greaseonkey,...), pri ale
unei componente (content, skin, locale), sau fiiere dintr-o anumit parte a unei
componente.
De exemplu, chome://myextension/locale/mainWindow.dtd se refer la partea de
localizare a ferestrei principale a extensiei myextension, i nu la fiierul ce traduce n
limba englez coninutul ferestrei principale a extensiei myextension; exist un astfel
de fiier pentru fiecare localizare disponibil, automat fiind ales cel corespunz-
tor setrii curente.
2.3 Navigatorul Firefox
Navigatorul poate fi privit ca o extensie a lui nsui, deoarece respect aceleai
principii ca orice extensie. Este nregistrat ca o colecie de URI-uri valide n pro-
tocolul chrome, este separat n prile de coninut, tem grafic i localizare, i,
dup cum vom vedea n seciunea urmtoare, este dezvoltat utiliznd tehnolo-
giile uzuale pentru o extensie, JavaScript, XUL, CSS, DTD.
Navigatorul efectiv se constituie din fiierele browser.jar, classic.jar, en-US.jar
(n cazul instalrii variantei n limba englez), aflate n subdirectorul chrome din
directorul principal al aplicaiei. Coninutul acestor fiiere poate fi dezarhivat,
modificat i rearhivat, efectele modificrilor fiind observabile imediat dup re-
pornirea navigatorului, fr a necesita o recompilare a codului.
2.4 Plugin-uri
Un plugin este un program care poate s se integreze ntr-un alt program gazd
(sau de baz, ce definete un set de reguli de comunicare cu plugin-urile) pentru
a ndeplini anumite funcii neexistente n gazd (sau existente, dar cu funcio-
nare incomplet sau incorect).
n general, un plugin const n cod compilat, i comunic cu partea de jos a
platormei, spre deosebire de o extensie, care se suprapune prii de sus a unei
aplicaii (prile unei aplicaii vor fi descrise n seciunea 4.2).
Exemple de plugin-uri sunt: Adobe Reader, Macromedia Flash Player, Java
Runtime Environment, Quicktime, RealPlayer. Se prefer meninerea unui numr
minim de plugin-uri n favoarea extensiilor.
88 Sergiu Dumitriu

2.5 Fiierele extensions.ini/extensions.rdf
Pentru a fi recunoscute de aplicaie i regsite n spaiul de nume chrome, exten-
siile curente trebuie s fie nregistrate. Punctul central de gestionare a extensii-
lor este format din fiierele extensions.ini i extensions.rdf. Acestea se afl n
subdirectorul personal al fiecrui utilizator (oferind posibilitatea de particula-
rizare la nivel de utilizator, i nu de calculator). n plus, exist cte un subdirec-
tor pentru fiecare profil creat (deci i particularizare la nivel de profil pentru
fiecare utilizator). Astfel, n WindowsXP calea este:
<directorPersonal>\Application Data\Mozilla\Firefox\Profiles\<profil>\
Fiierul extensions.ini este un fiier text ce conine locaiile fizice ale directoa-
relor n care se afl extensiile. Un exemplu de astfel de fiier este
1
:
[ExtensionDirs]
Extension0=C:\Program Files\Mozilla Firefox\extensions\
inspector@mozilla.org
Extension1=C:\Documents and Settings\user\Application Data\Mozilla\
Firefox\Profiles\tuznrsma.default\extensions\
{3d7eb24f-2740-49df-8937-200b1cc08f8a}
Extension2=C:\Documents and Settings\user\Application Data\Mozilla\
Firefox\Profiles\tuznrsma.default\extensions\
{cf2812dc-6a7c-4402-b639-4d277dac4c36}
[ThemeDirs]
Extension0=C:\Program Files\Mozilla Firefox\extensions\
{972ce4c6-7e08-4474-a285-3208198ce6fd}
n seciunea [ExtensionDirs] sunt precizate directoarele extensiilor efective,
att cele globale, instalate n directorul principal al aplicaiei, ct i cele instalate
de fiecare utilizator n parte n directorul personal. n seciunea [ThemeDirs]
sunt precizate directoarele n care se afl instalate temele grafice aplicaiei, att
cele globale, disponibile tuturor utilizatorilor, ct i cele instalate de fiecare uti-
lizator n parte.
n extensions.rdf apar date de identificare a fiecrei extensii, la nivel global:
numele afiat, numele intern, versiunea curent, pagina oficial a extensiei, ver-
siunile aplicaiei gazd suportate, autori, descriere etc.; de asemenea, extensiile
sunt nregistrate ca sub-module ale aplicaiei. Sintaxa este RDF (Resource
Description Framework), descriind efectiv resurse logice ale aplicaiei.
Fragmentul urmtor realizeaz nregistrarea sub-modulelor aplicaiei:

1
n fiierul efectiv fiecare extensie este trecut pe o singur linie.

...
<RDF:Seq RDF:about="urn:mozilla:item:root">
<RDF:li RDF:resource="urn:mozilla:item:inspector@mozilla.org"/>
<RDF:li RDF:resource="urn:mozilla:item:talkback@mozilla.org"/>
<RDF:li RDF:resource=
"urn:mozilla:item:{972ce4c6-7e08-4474-a285-3208198ce6fd}"/>
"urn:mozilla:item:{3d7eb24f-2740-49df-8937-200b1cc08f8a}"/>
"urn:mozilla:item:{cf2812dc-6a7c-4402-b639-4d277dac4c36}"/>
</RDF:Seq>
Fragmentul urmtor descrie extensia Flashblock:
...
<RDF:Description
RDF:about="urn:mozilla:item:{3d7eb24f-2740-49df-8937-200b1cc08f8a}"
NS1:installLocation="app-profile"
NS1:version="1.3.3"
NS1:name="Flashblock"
NS1:description="Replaces Flash objects with a button."
NS1:creator="The Flashblock Team"
NS1:homepageURL="http://flashblock.mozdev.org/"
NS1:updateURL="http://flashblock.mozdev.org/update.php"
NS1:optionsURL="chrome://flashblock/content/options.xul"
NS1:iconURL="chrome://flashblock/content/flashblock.png">
<NS1:type NC:parseType="Integer">2</NS1:type>
<NS1:contributor>Jesse Ruderman</NS1:contributor>
<NS1:contributor>Lorenzo Colitti</NS1:contributor>
<NS1:contributor>Ovidiu Dan (Romanian translation)</NS1:contributor>
<NS1:targetApplication RDF:resource="rdf:#$Fu3JX1"/>
<NS1:targetApplication RDF:resource="rdf:#$Gu3JX1"/>
<NS1:targetApplication RDF:resource="rdf:#$Hu3JX1"/>
</RDF:Description>
...

Figura 1. Locaiile implicate n regsirea i configurarea unei extensii
90 Sergiu Dumitriu

2.6 Extensiile efective
Peste aceast infrastructur, sunt instalate extensiile efective, unele globale, ac-
cesibile de ctre toi utilizatorii, altele instalate pentru un anumit utilizator.
Extensiile globale se afl n subdirectorul extensions din directorul aplicaiei,
fiecare n subdirectorul propriu. Extensiile fiecrui utilizator se afl n subdirec-
torul extensions al directorului destinat unui anumit profil. Acestea sunt locaiile
recomandate; se poate specifica o alt locaie n fiierele de configurare a exten-
siilor. n general, extensiile sunt distribuite ca arhive .jar, pentru a reduce nu-
mrul de fiiere i dimensiunea unei extensii.
3. EXTENSIILE FIREFOX
3.1 Introducere
O extensie Firefox este o completare cu noi funcionaliti adus navigatorului.
Aceste funcionaliti pot varia ca importan i complexitate, de la simple bu-
toane n meniu care afieaz un text predefinit (cum este cazul banalei extensii
I must not fear!), la funcionaliti avansate (suportul pentru standardul
XForms este oferit ca o extensie). Astfel, se permite particularizarea navigatoru-
lui n funcie de preferinele fiecrui utilizator, pstrnd n acelai timp naviga-
torul de baz la dimensiuni foarte mici.
3.2 Exemple
Extensiile pot fi mprite n mai multe categorii.
Pentru programare
Cea mai important unealt pentru programatori, DOMInspector, este inclus
n pachetul de instalare oficial, dar nu este instalat n mod normal. Permite ex-
plorarea i modificarea n timp real a arborelui DOM (Document Object Model) al
unui document, fie acesta o pagin Web, o fereastr a navigatorului, sau chiar
fereastra inspectorului.
Alte extensii foarte utile pentru dezvoltatorii de pagini Web sunt JavaScript
Debugger (cunoscut sub numele de Venkman), ce permite un debugging avansat
al codului JavaScript din pagini Web sau din nsui browser-ul i extensiile sale, i
Web Developer, ce permite numeroase modificri i teste ale unei pagini Web. Al-
te instrumente utile includ editoare vizuale pentru codul HTML, validatoare,
emulatoare pentru Internet Explorer, diverse editoare pentru componentele unei
pagini.

Pentru navigare
La limita dintre programare i navigare se afl extensia numit Greasemonkey, o
meta-extensie, sau un suport pentru extensii, cu abilitatea de a crea scripturi
speciale pentru fiecare pagin, scripturi ce produc asupra unei pagini modifi-
cri persistente (cu efect la fiecare accesare). Astfel, se pot realiza aciuni pre-
cum:
eliminarea unor seciuni nedorite din anumite pagini (reclame, animaii,
informaii neinteresante),
schimbarea modului de interaciune cu o pagin (se pot introduce funcii
AJAX ntr-o pagin iniial static)
reorganizarea complet a unei pagini.
Peste Greasemonkey au fost realizate numeroase alte extensii.
Alt unealt util att pentru programatori, ct i pentru navigare, este Fangs
Screen Reader Emulator, ce afieaz coninutul unei pagini ca i cum ar fi citit de
un instrument de citire a ecranului.
Flashblock permite blocarea obiectelor de tip flash din pagini, cu posibilitatea
pornirii manuale a acestora; NoScript blocheaz complet codul JavaScript din
anumite pagini (spre deosebire de opiunea global de a dezactiva JavaScript).
Numeroase alte extensii faciliteaz navigarea, prin utilizarea unui proxy ex-
tern pentru toate protocoalele (vbrowseit), ascunderea paginii surs la urmarea
unei legturi (refspoof), gestionarea dinamic a cookie-urilor (CookieWatcher) etc.
Pentru amuzament
S-au dezvoltat extensii cu diferite grade de utilitate, cum ar fi jocuri ce pot fi ac-
cesate direct din navigator (Mines, Card Games, Blockfall), afiarea definiiei unui
cuvnt dintr-o pagin (Dictionary Tooltip), afiarea strii vremii (ForecastFox) etc.
Mai multe extensii i informaii despre acestea se gsesc la pagina oficial:
https://addons.mozilla.org/extensions.
3.3 Structura unei extensii
O extensie const n mai multe componente:
Arhiva de instalare, ce cuprinde fiierele efective ale extensiei i fiierele
pentru instalare, menite s nregistreze extensia n aplicaie (n
extensions.rdf) i s nregistreze componentele extensiei n spaiul de nu-
me chrome.

92 Sergiu Dumitriu

Arhiva cu fiierele efective ale extensiei, separate n trei pri:
- partea de coninut a unei extensii;
- partea de localizare;
- partea de aspect.
Fiierele de parametrizare a extensiei, ce ofer valori iniiale pentru pa-
rametrii configurabili.
Componentele de tip plugin necesare extensiei (dac este cazul).
Fiierul de instalare este o arhiv zip cu extensia .xpi (Cross Platform Installer),
cu structura din figura 2.

Figura 2. Structura unui fiier xpi
Arhiva cu extensia jar din directorul chrome conine fiierele extensiei. Fiie-
rul chrome.manifest conine detaliile cu privire la modulele unei extensii. n acest
fiier sunt declarate modulul de coninut al extensiei, modulele de stil i de lo-
calizare incluse, punctele de inserie n aplicaie a extensiei.
content ext jar:chrome/ext.jar!/content/ext/
skin ext classic/1.0 jar:chrome/ext.jar!/skin/classic/ext/
style chrome://browser/content/browser.xul chrome://ext/skin/ext.css
locale ext en-US jar:chrome/ext.jar!/locale/en-US/ext/
locale ext ro-RO jar:chrome/ext.jar!/locale/ro-RO/ext/
overlay chrome://browser/content/about.xul chrome://ext/content/my.xul

Figura 3. Structura unei arhive jar corespunztoare unei extensii
Fiierul install.rdf conine informaii de identificare a extensiei, coninut care
va fi copiat n mare parte n fiierul extensions.rdf din directorul profilului unde
va fi instalat extensia.
Arhiva .jar ce conine fiierele extensiei are structura din figura 3.
Fiecare parte a unei extensii se afl ntr-un director separat. Partea de coni-
nut se afl n subdirectorul content/<extensie>/ din arhiva jar. Fiecare parte de lo-
calizare se afl n subdirectorul locale/<localeID>/<extensie>/ din arhiva extensiei.
Pot fi distribuite mai multe localizri pentru o extensie ntr-o singur arhiv, f-
r ca acestea s interfereze. Fiierele coninnd proprieti de stil sunt stocate n
subdirectoarele corespunztoare fiecrei teme grafice suportate, dup modelul
skin/<nume stil>/<extensie>/.
3.4 Instalarea unei extensii
Pentru a instala o extensie este suficient s se activeze un link ctre fiierul xpi.
Extensia va fi instalat n profilul curent i va fi activat dup repornirea aplica-
iei.
94 Sergiu Dumitriu

Paii care se execut sunt:
se descarc arhiva;
se dezarhiveaz i se verific dac extensia este compatibil cu versiunea
curent a aplicaiei;
se copiaz arhiva jar i chrome.manifest n subdirectorul destinat extensiei;
se copiaz coninutul fiierului install.rdf n extensions.rdf;
se adaug calea ctre subdirectorul extensiei n install.ini.
Se poate instala o extensie i dintr-un fiier local, prin tragerea fiierului xpi
n fereastra navigatorului (drag and drop).
Pentru a instala o extensie global, este necesar rularea din linia de coman-
d a aplicaiei, specificnd ca parametri -install-global-extension <fisier.xpi>.
4. TEHNOLOGII
Extensiile Firefox sunt dezvoltate utiliznd tehnologii de nivel nalt din Mozilla
Application Framework, independente de platform, avnd la baz tehnologiile
de nivel jos, dezvoltate pentru fiecare platform n parte, n general cod compi-
lat.
Modelul aplicaiilor Mozilla permite o separare foarte bine definit a atribuii-
lor n pri ale unei extensii. Astfel, se pot dezvolta separat elementele de inter-
fa, logica aplicaiei, parametrii configurabili, stilul i localizrile lingvistice.
4.1 XUL interfee independente de platform
Interfaa unei aplicaii Mozilla este configurabil, extensibil i stilizabil, n-
semnnd c prezena sau absena unor controale nu este fixat n codul compi-
lat al aplicaiei, ci este precizat ntr-un fiier separat de descriere a interfeei.
ntreaga interfa a navigatorului i interfeele extensiilor sunt descrise utili-
znd acest mecanism.
Limbajul de descriere utilizat este XUL (Extensible User-Interface Language),
un limbaj din familia XML dezvoltat i ntreinut de Fundaia Mozilla. Este dis-
ponibil ca parte integrant a motorului Gecko, permind dezvoltatorilor s cre-
eze aplicaii multiplatform utiliznd un limbaj descriptiv de definire a
interfeei (XUL) i un limbaj de programare interpretat (JavaScript). A fost con-
ceput pentru a fi cu adevrat portabil i utilizabil pe platformele Windows, Ma-
cintosh, Linux i Unix. Spre deosebire de alte platforme pentru crearea de
aplicaii portabile, cum ar fi QT sau GTK, o aplicaie Mozilla nu necesit compi-
larea interfeei pentru fiecare sistem de operare, ci doar existena executabilului
Gecko pentru acea platform.

Dei nu este un standard complet acceptat, XUL are multe avantaje fa de
alte metode de a descrie interfaa unei aplicaii:
XUL este un limbaj XML;
structura este simpl i concis;
sintaxa este simpl i intuitiv, utiliznd nume cunoscute de componente
ca elemente;
permite extinderea facil a interfeelor prin overlay-uri;
permite ataarea de stiluri CSS;
este modificabil n timp real prin manipulri DOM.
Specificaia 1.0, dezvoltat de Mozilla, este nefinisat, i n variantele mai noi
ale motorului Gecko nu mai este pe deplin respectat. Specificaia 2.0 este n curs
de standardizare, cu o implicare i din partea Consoriului Web.
Un exemplu simplu de interfa descris n XUL este urmtorul (a se vedea
figura 4):
<window id="example-window" title="XUL este simplu"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox>
<label value="Apas aici:"/>
<button id="close" label="nchide" onclick="window.close()"/>
</hbox>
</window>
Fiierul descrie o fereastr, intitulat XUL este simplu, ce conine o etichet
(elementul label) i un buton (elementul button), poziionate orizontal (elementul
hbox).

Figura 4. Fereastr XUL
Extensibilitate
Extensibilitatea unei interfee XUL este asigurat prin tehnica numit overlay
(suprapunere).
n fiierele XUL ce descriu interfaa unei extensii se utilizeaz ca element r-
dcin elemntul overlay n loc de window. O interfa astfel definit nu va fi de
96 Sergiu Dumitriu

sine stttoare, ci va fi introdus ca i coninut al unei alte interfee (window sau
overlay). Pentru aceasta, trebuie urmai doi pai:
1. n chrome.manifest se nregistreaz fiierul XUL al extensiei ca overlay al unui
element existent deja n aplicaie (identificat prin URL-ul chrome), fie ca fe-
reastr a aplicaiei de baz, fie ca un alt element al unei extensii.
2. n fiierul XUL se identific, prin scrierea unui element XUL de acelai tip i
cu acelai identificator (atributul id), componenta de interfa extins (me-
niu, fereastr, colecie de scurtturi pentru tastatur etc.). Coninutul acestui
element nu va nlocui componenta existent, ci va fi adugat pe lng coni-
nutul deja existent.
De exemplu, pentru a extinde o bar de unelte din fereastra principal a na-
vigatorului, vom scrie:
n fiierul myToolbar.xul al extensiei:
<overlay id="myextension_menu" xmlns="...">
<toolbox id="navigator-toolbox">
<toolbar ...>
...
</toolbar>
</toolbox>
</overlay>
n fiierul chrome.manifest
2
:
overlay chrome://browser/contents/browser.xul
chrome://myextension/content/myToolbar.xul
Alte limbaje
XUL poate fi combinat cu alte limbaje de marcare, cel mai adesea cu XHTML.
Poate fi utilizat n acest sens orice tehnologie suportat de motorul Gecko:
SVG (Scalable Vector Graphics),
elementul canvas,
applet-uri Java,
cod X3D (eventual mpreun cu plugin-urile corespunztoare).

2
n fiierul efectiv textul trebuie s fie trecut pe o singur linie

Un alt limbaj de marcare, destinat descierii formularelor, este XForms, stan-
dard W3C, de asemenea suportat de Mozilla. Pentru extensii cu caracter tiinific
devine util MathML, un puternic limbaj de descriere a expresiilor matematice.
Aceste tehnologii pot fi utilizate fie n combinaie cu XUL, fie ca documente
de sine stttoare sau generate dinamic prin transformri XSLT sau prin
scripting, i afiate n cadrul unei ferestre a navigatorului.
4.2 JavaScript mic, dar puternic
ntreaga funcionalitate a navigatorului este realizat n JavaScript, utiliznd
componente din Mozilla Application Framework, scrise i compilate pentru o
anumit platform, dar oferind o aceeai funcionalitate n toate distribuiile.
n crearea unei asemenea platforme ce permite scrierea de cod interpretat cu
funcionaliti avansate, independent de platform, intervin mai multe nivele.
XPConnect
La baz este codul C/C++ dependent de platform responsabil cu afiarea
propriu-zis a elementelor grafice, comunicarea n reea, accesul la sistemul de
fiiere etc. Peste acest cod este pun un nivel de abstractizare menit s descrie
funcionalitile unei clase, ascunznd n acelai timp detaliile de implementare.
Acest nivel se numete XPIDL (Cross Platform Interface Description Language),
o extensie a standardului IDL meninut de OMG, ce permite descrierea unor in-
terfee ce precizeaz metodele i atributele oferite de o clas (comportamentul),
fr a specifica implementarea efectiv a codului din interiorul unei metode
i fr a preciza care clas va oferi acest cod. n acest mod, o component va pu-
tea apela metodele unei interfee la fel pe orice platform, avnd acelai nume i
aceiai parametri. O funcionalitate nu va fi deci identificat prin numele clase-
lor i al funciilor ce o implementeaz, acestea putnd s difere de la o platfor-
m la alta, ci prin interfaa ce ofer acea funcionalitate, indiferent de
implementarea efectiv.
Utiliznd acest nivel, s-au definit componentele multiplatform, XPCOM
(Cross Platform Component Object Model). Acesta este o abordare multiplatform
a ceea ce Microsoft a ncercat s fac prin COM. Pentru aceasta sunt definite in-
terfee standard XPIDL ce trebuie extinse sau utilizate de o component pentru
a fi recunoscut drept component XPCOM. La baz se afl nsISupports, o inter-
fa asemntoare cu IDispatch din Microsoft COM, interfa ce trebuie extins
de fiecare component XPIDL. Un modul este identificat de un punct central al
modului, o component ce implementeaz interfaa nsIModule. Printre compo-
nentele oferite deja de platforma Mozilla, amintim:
98 Sergiu Dumitriu

nsIFile, nsIDirectoryService, nsIFilePicker pentru accesul la sistemul de fii-
ere,
nsIInputStream, nsIOutputStream, nsIScriptableInputStream pentru abstrac-
tizarea fluxurilor de date,
nsIClassInfo, nsIComponentManager, nsIInterfaceRequester, nsIFactory pen-
tru gestiunea componentelor,
nsIObserver, nsIObserverService, nsIWebProgress pentru observarea opera-
iilor,
i multe altele.
Componentele XPCOM pot fi folosite din cod C++, dar i direct din
JavaScript, fr a necesita cod intermediar sau tehnici deosebite. Acest lucru este
posibil datorit unei tehnologii numite XPConnect (cunoscut i ca Scriptable
Components). Aceasta este utilizat mpreun cu XPIDL, compilarea interfeelor
genernd, pe lng fiierele C++ ataate unei interfee, i fiiere typelib utilizate
de XPConnect pentru mbinarea uoar a codului componentelor compilate cu
codul JavaScript. O alt facilitate oferit de XPConnect este conectarea invers,
adic manipularea obiectelor JavaScript din codul compilat. Prin XPConnect n
codul JavaScript devin vizibile noi componente, implementate de fapt n C++,
pe lng obiectele JavaScript predefinite.
Pe baza conectivitii oferite de XPConnect, funcionaliti orict de avansate
pot fi scrise direct n JavaScript, disprnd necesitatea compilrii codului ce im-
plementeaz comportamentul unei aplicaii. n final, pe baza unor componente
de nivel jos, ce ofer funcionaliti elementare, se creeaz la nivel nalt funcio-
naliti complexe.
JavaScript = ECMAScript + E4X + Gecko + DOM + ...
n esen, limbajul JavaScript utilizat de Mozilla Application Framework este bazat
pe ECMAScript versiunea 3, limbaj standardizat de consoriul ECMA
International. Acesta a aprut din necesitatea de a standardiza un limbaj cu
multiple implementri incompatibile, cu un mare potenial n dezvoltarea spa-
iului Web. ECMAScript fixeaz sintaxa limbajului, cteva componente eseniale
predefinite i, mai ales, ideologia limbajului.
JavaScript este un limbaj bazat pe obiecte, orientat prototip. Programarea
orientat prototip a fost iniial utilizat n limbajul de programare Self, i, spre
deosebire de limbajele orientate obiect, bazate pe clase i instane, nu exist de-
ct obiecte. Prototipul unui obiect este, de asemenea, un obiect, n care se caut
metodele i proprietile cerute n cazul n care nu sunt gsite n obiectul iniial.
Se creeaz astfel un lan de obiecte ce definesc un comportament, ntr-o manier
asemntoare motenirii din POO.
Dei este foarte des utilizat n paginile Web, puini programatori cunosc ade-
vrata putere a acestui limbaj. n ciuda faptului c muli l critic pentru dificul-
tatea verificrii corectitudinii, securitatea i predictibilitate precare, i lipsa de
eficien (lucruri care pot fi semnalate n multe programe scrise n limbaje si-

gure, precum C, Java sau C#), JavaScript este mult mai flexibil dect limbajele
stricte (strict typed), nefiind dificil pentru programatori experimentai s elimine
neajunsurile menionate mai sus. Tocmai aceast flexibilitate d puterea limba-
jului, dar atrage i cele mai multe critici.
ECMAScript for XML, pe scurt E4X, este o extensie a limbajului ECMAScript,
facilitnd manipularea datelor n format XML, format tot mai des utilizat pen-
tru stocarea i transferarea datelor de orice fel, i strns legat de spaiul Web, lo-
cul unde este utilizat cel mai frecvent JavaScript. De curnd, aceast specificaie
este implementat i n Mozilla Application Framework, permind procesarea
mai eficient a datelor XML.
Prin tehnologia XPConnect descris mai sus, codul JavaScript are acces la ma-
joritatea funcionalitilor puse la dispoziie de platforma Mozilla. ns acest ac-
ces este permis codului aplicaiei, celui ce ine de navigator sau de extensiile
acestuia, i restricionat n cazul codului executat n paginile ncrcate, din mo-
tive de securitate. Astfel, pentru dezvoltatorii de extensii, codul JavaScript satis-
face aproape toate necesitile unui programator.
Mozilla implementeaz o gam generoas de specificaii DOM:
DOM Level 1 complet;
DOM Level 2 Core suport aproape complet;
DOM Level 2 HTML complet;
DOM Level 2 Style Sheets complet;
DOM Level 2 CSS suport major;
DOM Level 2 Events suport major;
DOM Level 2 Views complet;
DOM Level 2 Traversal suport parial;
DOM Level 2 Range complet;
DOM Level 2 SVG suport major;
DOM Level 2 XForms suport major;
DOM Level 2 XUL suport complet.
DOM Level 3 nc nu este implementat suficient, dar n special pentru DOM
Level 3 Core deja exist un suport parial.
Comportamentul unei extensii
O extensie, dup cum am vzut, i descrie elementele de interfa prin limbaje
de marcare (n special XUL). Comportamentul din spatele acestor componente
100 Sergiu Dumitriu

este realizat n parte de cod nativ (funcionarea de baz ca widget-uri), n parte
de cod JavaScript (ca elemente active de interaciune ale aplicaiei). Codul
JavaScript este ataat fiierelor XUL cu ajutorul elementului script, asemntor
celui din HTML. Astfel, se poate scrie cod JavaScript direct n interiorul unui do-
cument XUL (nerecomandat ns), sau se poate face referin la un fiier ce con-
ine cod JavaScript (un fiier .js). Se recomand ca fiierele s fie referite
utiliznd spaiul de nume chrome, i nu o cale relativ.
Un exemplu de ataare de cod JavaScript:
<overlay xmlns="...">
<script type="application/x-javascript"
src="chrome://myextension/content/tools.js"/>
...
</overlay>
4.3 Localizare aceeai aplicaie, oricte locaii
n modelul aplicaiilor Mozilla, pentru a face o aplicaie disponibil n mai multe
limbi, nu este necesar rescrierea codului aplicaiei, sau a fiierelor de interfa.
Pentru a schimba textul vizibil, orientarea controalelor, scurtturile de tastatur
utilizate, sau chiar elementele de interfa vizibile, sunt definite module de loca-
lizare pentru fiecare extensie. Un astfel de modul conine dou tipuri de resur-
se: fiiere DTD (Document Type Definition) i fiiere .properties.
Fiierele DTD sunt utilizate pentru definirea entitilor, refereniate n fiiere-
le de interfa. Un fiier XUL nu va preciza textul efectiv ce va fi utilizat pentru
un atribut, ci va face referin la o entitate. Aceast entitate va fi definit ntr-un
fiier DTD particular unei anumite localizri. Pentru a fi regsit acest fiier n
localizarea curent, se va preciza o adres din spaiul de nume chrome, i nu o
adres absolut. n acest fel aceast adres va conduce la un fiier fizic n funcie
de limba curent a aplicaiei.
Exemplu de utilizare. n fiierul content/myextension/mainwindow.xul:
<!DOCTYPE window SYSTEM "chrome://myextension/locale/mainwindow.dtd">
<window id="main-window" title="&me.mainWindowTitle;"
<label value="&me.lbl.Value;"/>
<button id="close" label="&me.btn.Label;" onclick="window.close()"/>
</window>
n fiierul locale/en-US/myextension/mainwindow.dtd:
<!ENTITY me.mainWindowTitle "My extension window">
<!ENTITY me.lbl.Value "Click here:">
<!ENTITY me.btn.Label "Close">
n fiierul locale/ro-RO/myextension/mainwindow.dtd:
<!ENTITY me.mainWindowTitle "Fereastra extensiei mele">
<!ENTITY me.lbl.Value "Apas aici:">
<!ENTITY me.btn.Label "nchide">
Entitile DTD sunt utile pentru nlocuirea textelor ce apar static n interfa.
Pentru partea dinamic ns, este mai dificil pentru un cod JavaScript s utilize-
ze entiti. n acest sens se utilizeaz fiierele de resurse .properties. Acestea sunt

fiiere text ce conin perechi cheie-valoare ce pot fi accesate uor din script, cu
ajutorul elementelor XUL de tip stringbundleset i stringbundle. Acestea primesc
ca surs URL-ul unui fiier de resurse, i n timpul rulrii, prin DOM ofer me-
tode de obinere rapid a valorii pentru o cheie dat.
Exemplu de utilizare. n fiierul content/myextension/mainwindow.xul:
<!DOCTYPE window SYSTEM "chrome://myextension/locale/mainwindow.dtd">
<window id="main-window" title="&me.mainWindowTitle;"
<script type=application/x-javascript
src=chrome://myextension/content/mainscript.js/>
<stringbundleset id="stringbundleset">
<stringbundle id="myextension_bundle"
src="chrome://myxtension/locale/mainwindow.properties"/>
</stringbundleset>
<label value="&me.lbl.Value;"/>
<button id="close" label="&me.btn.Label;" onclick="confirmClose()"/>
</window>

Figura 5. O aplicaie cu dou localizri
n fiierul content/myextension/mainscript.js:
function confirmClose(){
var stringBundle = document.getElementById(myextension_bundle);
if(confirm(stringBundle.getString(me.confirmClose)))
window.close();
}
n fiierul locale/en-US/myexension/mainwindow.properties:
me.confirmClose = Are you shure?
102 Sergiu Dumitriu

n fiierul locale/ro-RO/myexension/mainwindow.properties:
me.confirmClose = Suntei sigur?

Figura 6. Dou dintre cele mai populare teme pentru Firefox: BlackJapan (sus) i Noia (jos)
4.4 Stiluri, teme, aspecte
Aspectul unei aplicaii Mozilla nu este stabilit n momentul compilrii platfor-
mei. Acesta este creat utiliznd imagini, CSS i XSLT, i este personalizabil prin
intermediul temelor grafice.
Aceast flexibilitate din punctul de vedere al aspectului apare deoarece lim-
bajul de descriere a interfeei, XUL, fiind limbaj din familia XML, permite, nativ,
stilizarea prin transformri XSLT sau prin aplicarea de foi de stiluri CSS. Mo-
mentan sunt suportate specificaiile CSS 1.0, 2.1 aproape complet, i deja o parte

considerabil din CSS 3.0, permind crearea de efecte vizuale avansate pentru
o aplicaie.
O foaie de stiluri este refereniat tot prin spaiul de nume chrome, astfel nct
schimbarea temei grafice s fie transparent din punctul de vedere al programa-
torului. La fel se pot accesa i imaginile ce apar ntr-o interfa, permind rede-
finirea lor ntr-o alt tem.
O extensie poate reutiliza stiluri definite la nivel global pentru a facilita dez-
voltarea ulterioar a unei teme grafice.
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://myextension/skin/window.css"
type="text/css"?>
5. CONCLUZII
Mozilla Application Framework este un cadru suficient de matur pentru a permite
dezvoltarea de aplicaii multiplatform, cu o mprire bine definit n module,
cu suport nativ pentru localizare, internaionalizare, extensibilitate i asociere
de proprieti de stil. Cele mai concludente exemple sunt navigatorul Firefox i
clientul de pot electronic i tiri Thunderbird, a cror popularitate este n con-
tinu cretere.
Cadrul de lucru Mozilla introduce un nivel avansat de personalizare, dincolo
de selectarea unei teme grafice sau a unui set de funcionaliti deja existente:
permite unui utilizator ce deine cunotine legate de tehnologiile implicate s-
i construiasc propriile extensii, care s rspund cel mai bine cerinelor sale.
O extensie, compus din coninut (XUL, XHTML, JavaScript), localizare
(DTD i properties) i aspect (CSS, PNG recomandat, XSLT), se bazeaz pe teh-
nologii puternice, dar uor de neles i manipulat.
Uurina cu care se dezvolt o extensie pentru aceste aplicaiile mai sus
amintite a atras deja muli programatori, n momentul actual existnd peste 850
de extensii oficiale pentru Firefox i peste 150 pentru Thunderbird.
Referine
***, ECMA International: http://www.ecma-international.org/
***, ECMAScript for XML (E4X) Specification, 2
nd
edition:
http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-357.pdf
***, ECMAScript language Specification, 3
rd
edition:
http://www.ecma-international.org/publications/files/ecma-st/ECMA-262.pdf
***, Mozilla Foundation: http://www.mozilla.org/
***, Mozilla Suite: http://www.mozilla.org/products/mozilla1.x/
104 Sergiu Dumitriu

***, Pagina Wikipedia despre istoria suitei Mozilla:
http://en.wikipedia.org/wiki/History_of_Mozilla_Application_Suite
***, SeaMonkey homepage: http://www.mozilla.org/projects/seamonkey/
***, XUL specificaia 1.0: http://www.mozilla.org/projects/xul/xul.html
***, XUL pagina proiectului: http://www.mozilla.org/projects/xul/
***, XUL Planet: http://www.xulplanet.com/

105

Capitolul 7
VALENE CSS
Marta Grdea
marta@info.uaic.ro http://purl.org/net/marta
Rezumat. CSS este la momentul actual exploatat doar superficial, principalele motive ale aces-
tui fenomen fiind cunoaterea insuficient i suportul precar pentru aceast tehnologie oferit de
o parte din navigatoare. Vom descrie n continuare, prin relativ scurte exemple demonstrative,
cteva aspecte legate de CSS care subliniaz puterea efectelor acestuia asupra documentelor
Web din diverse puncte de vedere, precum i posibilitatea substituirii tehnicilor folosite curent
(e.g., JavaScript, Flash) pentru obinerea unor efecte grafice i dinamice avansate prin foi de sti-
luri n cascad.
Cuvinte-cheie: CSS, efecte speciale, dinamicitate, coninut i form.
1. INTRODUCERE
CSS (Cascading Style Sheets foi de stiluri n cascad) este un limbaj standardizat
de Consoriul Web pentru descrierea aspectului unui document HTML,
XHTML, SVG sau, mai general, XML.
Acest limbaj a aprut n contextul creterii popularitii spaiului WWW.
Constatndu-se c, ntr-o oarecare msur, imaginea i prima impresie pot face
diferena dintre succes i eec, a crescut cererea de modaliti de mbogire a
aspectului unei pagini. Iniial, s-a mers n direcia introducerii de noi elemente
i atribute n formatul HTML, aprnd elemente precum color, font, center, ne-
numrate atribute de formatare a textului, a culorii sau a poziionrii.
Dezvoltatorii de navigatoare au introdus propriile elemente i atribute, nestan-
dardizate, pentru a atrage ct mai muli admiratori.
Astfel s-a ajuns la ncrcarea nejustificat a documentelor cu marcaje care in
strict de modul de prezentare, deseori cantitatea de informaie efectiv dintr-o
pagin reprezentnd o parte infim din documentul HTML. Din cauza utilizrii
unor marcaje nevalide, un numr mare de pagini nu erau afiate corect dect n
anumite navigatoare sau n anumite versiuni de navigatoare.
106 Marta Grdea

Soluia a fost introducerea unui limbaj care s separe coninutul de prezenta-
re, astfel nct textul n format HTML s fie ncadrat doar de elemente de orga-
nizare a coninutului, delimitarea n paragrafe, utilizarea titlurilor de seciuni,
marcarea coninutului cu semnificaie particular (abrevieri, citate, formulare),
iar partea de prezentare, coninnd tot ceea ce se putea specifica prin elementele
i atributele de formatare din HTML, s apar n module separate. Acest limbaj
a fost numit Cascading Style Sheets CSS.
Fiecare fiier CSS este o foaie de reguli de formatare ce definesc stilul de
afiare a unei pagini. Aceste reguli se pot suprapune, modificnd n cascad
elementele unui document.
Prima versiune a limbajului CSS a fost lansat ca standard recomandat al
Consoriului Web pe data de 17 decembrie 1996, specificnd cu precdere pro-
prieti de baz legate de cromatic, dimensionare i aliniere. Aceast versiune
a ncercat s elimine elementele i s nlocuiasc atributele de formatare din
HTML, n general pstrndu-se numele atributelor ca nume al proprietilor
CSS. n 1999 aceast specificaie a fost revizuit i corectat pentru a se alinia la
comportamentul majoritii implementrilor existente.
Versiunea 2.0 a standardului, lansat la 12 mai 1998, a adus multe extensii
limbajului rudimentar de precizare a aspectului unui document. La momen-
tul curent, algoritmii implicai n determinarea formatrii corecte nu sunt ns
complet implementai n nici un navigator, n unele cazuri suportul pentru ma-
re parte din specificaie fiind cu precdere defectuos sau inexistent.
n prezent, se ncearc revizuirea acestui standard n specificaia CSS 2.1,
aflat n stadiul de ciorn de lucru (working draft).
Versiunea CSS 3.0 aduce o abordare modularizat a specificaiei. n cadrul
acestei variante nu mai exist un singur standard, ci o colecie de standarde in-
terconectate, fiecare fiind destinat unui singur aspect al specificaiei CSS 3.0.
Exist module generale (care trateaz sintaxa CSS, algoritmul de suprapunere a
regulilor, selectorii utilizai, gramatica valorilor, unitile de msur acceptate
etc.), module de stilizare (pentru culoare, fundal i margini, text, tabele, formu-
lare etc.), module pentru diverse medii de afiare (aural, paginat, ecran etc.) i
module specializate pentru un anumit limbaj XML (SVG, Ruby, MathML i alte-
le). Majoritatea acestor module sunt n curs de definire, multe dintre ele nefiind
nc abordate. Cu toate acestea, versiunile recente ale navigatoarelor moderne
implementeaz pri din modulele mai dezvoltate.
Dei, aa cum am precizat mai sus, CSS poate fi combinat cu diverse limbaje
din familia XML, ne vom referi n continuare doar la aplicarea de foi CSS pen-
tru documente (X)HTML, ca posibil alternativ, ntr-un viitor mai mult sau
mai puin apropiat, la tehnicile utilizate n mod frecvent la momentul curent
pentru poziionare, interactivitate sau efecte grafice avansate.
Valene CSS 107

2. MOTIVAIE
CSS a fost creat pentru a permite separarea formei de coninut. Necesitatea
acestei separri este evident: documentele ar trebui s fie organizate semantic,
i nu vizual. Dei interfaa grafic pare a avea o importan deosebit, nu trebu-
ie uitat faptul c informaia transmis este scopul principal al unui document pe
Web, iar modul de afiare este un aspect secundar i trebuie tratat ca atare.
Accesibilitate
Un document a crui structur se focalizeaz pe coninut i nu pe grafic este
mai uor neles dintr-un navigator text, fr suport pentru imagini, animaii i
culori. O abordare greit, frecvent ntlnit n documentele Web, este organi-
zarea tabelar a documentului, cu un numr mare de celule care conin doar
imagini, uneori chiar imagini ce substituie textul. Dintr-un navigator text, un
astfel de document este aproape de neneles pentru utilizator: n locul imagini-
lor apar legturi pentru descrcarea acestora, celulele nu i pstreaz dimensi-
unea din varianta grafic, textul devenind astfel greu de regsit.
n plus, orict de plcut vederii ar prea un document n forma bogat n de-
talii grafice, poate constitui o adevrat provocare pentru cei cu deficiene vizu-
ale. n cazul n care forma de prezentare este inclus n document, extragerea
informaiei utile i afiarea ntr-un mod mai vizibil poate fi dificil; ns, pentru
documentele organizate pur semantic, foaia de stiluri poate fi uor dezactivat.
Mai mult, utilizatorul ar putea opta pentru o foaie de stiluri particular, ce ofer
un contrast puternic i o dimensiune mai mare a caracterelor, cu excluderea
complet a imaginilor din document. Aadar, un document ar trebui s fie la fel
de inteligibil i fr organizarea grafic a acestuia, i fr imaginile decorative.
Flexibilitate: medii de prezentare i stiluri alternative
CSS 2.0 a introdus noiunea de mediu de prezentare, ce se refer la modul
prin care este accesat un document: ecran (screen) pentru documentele vizuali-
zate pe un monitor obinuit, imprimat (print) pentru documentele imprimate,
auditiv (aural) pentru documentele citite de un program de citire a ecranului,
proiectat (projector) pentru documentele afiate cu ajutorul unui proiector etc. Se
pot crea mai multe moduri de prezentare, n funcie de mediu. Pentru afiarea
ntr-un navigator se poate concepe o prezentare bogat n efecte grafice (organi-
zarea neliniar a coninutului, o cromatic atractiv, imagini statice i animate
dei abundena nu este recomandat). Pentru imprimare se va prefera, din mo-
tive evidente, un stil curat de elemente pur decorative; de menionat c ne-
precizarea stilului pentru acest mediu atrage o formatare implicit, rezultatul
fiind imprevizibil i uneori inestetic. Un stil poate fi creat pentru cititoarele de
ecran; n cadrul acestuia se poate stabili ordinea n care sunt citite prile com-
ponente ale documentului i, mai mult, se poate ataa personalitate diverse-
lor pri ale unui document. Un exemplu gritor n acest sens este ataarea de
108 Marta Grdea

stiluri aurale pentru un document coninnd fragmente din piese de teatru, un-
de paragrafele asociate fiecrui personaj pot fi citite de ctre o voce corespunz-
toare.
CSS permite nu numai definirea de stiluri diferite pentru medii diferite, dar
i definirea unor stiluri alternative pentru acelai mediu. Majoritatea navigatoa-
relor permit alegerea dintr-o colecie de stiluri a celui dorit. Astfel, se pot defini
diverse teme de prezentare a informaiei, att ca aspect vizual general, ct i
privind organizarea categoriilor de informaii (layout).
Eliminarea redundanei
Utilizarea atributelor de formatare din HTML 3, de exemplu, presupune pre-
cizarea acestora n mod repetat pentru fiecare element ce trebuie particularizat,
ceea ce induce un grad ridicat de redundan. n CSS este suficient specificarea
cte unei singur regul ntreaga colecie de elemente, ceea ce duce la diminua-
rea cantitii de date transmise de la server la client. n cazul n care mai multe
documente utilizeaz aceeai foaie de stiluri, regulile de formatare vor fi meni-
nut n cache i nu vor fi retransmise, reducnd i mai mult cantitatea de date
transmise i timpul de ncrcare a unei pagini.
Nimic nu e perfect...
Reticena fa de trecerea la un design axat pe foi de stiluri CSS este cauzat
de implementrile diferite sau incomplete din partea diverselor navigatoare,
chiar i pentru tehnicile simple din CSS 2.0. La rndul lor, dezvoltatorii de na-
vigatoare nu investesc un efort prea mare n implementarea specificaiilor CSS
deoarece doar un numr pn de curnd foarte mic de creatori de pagini Web
au trecut la design bazat pe CSS. Exemplele descrise n continuare necesit une-
le reguli speciale pentru mascarea lacunelor de implementare sau pentru a asi-
gura un aspect independent de navigator; din cauza implementrilor
incomplete, unele tehnici mai avansate sunt total incompatibile cu anumite na-
vigatoare.
Dei, din motivele mai sus amintite, nu pot fi complet utilizate n prezent,
tehnicile descrise n seciunea urmtoare cu scop pur demonstrativ al puterii
CSS i al modului n care poate influena impresia creat de o pagin antici-
peaz probabil direciile de viitor apropiat n folosirea stilurilor pentru paginile
Web.
Valene CSS 109

3. IMPACTUL FOILOR DE STILURI
3.1 Form i coninut
Deja am menionat faptul c limbajul CSS a fost conceput pentru a separa forma
de coninut. Separarea are loc doar la nivel de proiectare. n cadrul produsului
final, forma i coninutul trebuie s conlucreze pentru atingerea scopului. n
mod natural, o anumit prezentare poate evidenia semnificaia coninutului,
poate pune ntr-un anumit cadru tematic o colecie de documente.
Exemplul studiat n aceast seciune este construit n jurul unui document
XHTML ce conine prima strof din poezia Gloss de Mihai Eminescu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gloss</title>
<link rel="stylesheet" title="Normal Order" type="text/css"
href="normal.css" />
<link rel="alternate stylesheet" title="Reverse Order"
type="text/css" href="reverse.css" />
</head>
<body>
<div id="header">
<h1 id="title"><span>Gloss</span></h1>
<h4 id="author"><span>de Mihai Eminescu</span></h4>
</div>
<div class="poem">
<p class="verse" id="verse1">
Vreme trece, vreme vine<span class="punctuation">,</span></p>
<p class="verse" id="verse2">
Toate-s vechi i nou toate<span
class="punctuation">;</span></p>
...
</div>
</body>
</html>
Lipsit de stil, documentul este afiat ca n figura 1:

Figura 1. Gloss fr stiluri CSS aplicate
110 Marta Grdea

Prin aplicarea unui stil netrivial, care utilizeaz reguli simple din CSS 2, se
obine o grafic mai sugestiv, ntr-o oarecare concordan cu textul, dup cum
se poate vedea n figura 2.

Figura 2. Un cadru mai sugestiv pentru o poezie
body{
/* Imaginea de fundal hrtie veche */
background: #363533 url(img/oldpaper.jpg) repeat-y fixed top center;
color: #210;
font-family: Georgia, serif;
font-style: italic;
/* Poezia va fi centrat i va avea o lime fix */
width: 640px;
margin: 0px auto;
padding: 0px;
}
/* Titlul va fi nlocuit cu o imagine din CSS, astfel nct s poat
fi vzut i din navigatoarele ce nu pot afia imagini */
#title{
margin: 10px 96px 0px;
padding: 0px 0px 8px 0px;
background: transparent url(img/title.jpg) no-repeat top left;
border-bottom: 1px solid;
height: 121px;
}
#title span{
display: none;
}
#author{
text-align: right;
font-size: 16px;
margin: 1.33em 96px;
}
.poem{
font-size: 24px;
Valene CSS 111

text-align: left;
padding-left: 96px;
height: 13.5em;
}
p.verse{
font-size: 24px;
line-height: 0em;
padding: 0px;
margin: 0px;
margin-top: 1.5em;
}
Imagini n loc de text
Una dintre cele mai simple i eficiente modaliti de a afia texte avnd ataate
stiluri este aceea de a folosi o imagine creat de un designer, ntruct gama de
fonturi i de efecte grafice care pot fi utilizate cu sigurana de a fi recunoscute
corespunztor pe partea de client este destul de redus. O practic greit, dar
foarte des ntlnit, este aceea de a insera direct n documentul HTML imaginile
n loc de text, ceea ce reduce mult nivelul de accesibilitate. nlocuirea textului cu
o imagine este destul de uor de realizat din CSS, i are avantajul de a nu stri-
ca semantica documentului. Cea mai simpl metod este aceea de a folosi
imaginea ca fundal al elementului nlocuit, mpachetarea textului propriu-zis
ntr-un element span i ascunderea acestuia din urm.
HTML:
<h2 id=replacedElement><span>Text ce va fi nlocuit</span></h2>
CSS:
/* Afiarea imaginii */
#replacedElement{
width: 120px
height: 80px;
background: transparent url(replacing.png) no-repeat top left;
}
/* Ascunderea textului */
#replacedElement span{
display: none;
}
Pagini centrate
Unul dintre abloanele de proiectare a aspectului unei pagini presupune afia-
rea centrat i cu lime fix a unui document. n general acest lucru era obinut
utiliznd tabele, pentru care se pot preciza limea i alinierea n pagin. Tabe-
lele sunt destinate includerii de date tabelare, i nu este recomandat utilizarea
lor n scopul formatrii vizuale. Efectul dorit se poate obine din CSS, fr a uti-
liza elemente de structurare auxiliare. Elementul cheie al acestei tehnici este se-
tarea valorii auto pentru marginile laterale ale documentului, ceea ce are ca efect
crearea unor margini egale, deci centrarea coninutului.
body{
width: 640px; /* Limea documentului */
margin: 0px auto; /* Centrarea documentului */
}
112 Marta Grdea

Prin aceast tehnic se poate centra orice element bloc, nu doar ntreaga pa-
gin.
Reordonarea elementelor
Dup cum se tie, ultima strof din Gloss conine aceleai versuri ca i pri-
ma, dar n ordine invers, cu o punctuaie diferit. Se poate utiliza documentul
HTML ce conine prima strof pentru afiarea ultimei, modificrile avnd loc
doar prin efecte CSS.

Figura 3. Ultima strof, obinut din prima strof prin CSS
Elementele bloc sunt poziionate astfel nct marginea superioar a unui
element s fie adiacent marginii inferioare a elementului anterior. Preciznd
margini negative, va rezulta c un rnd se va afla deasupra marginii inferioare a
rndului anterior. Dintre regulile specificate n stilul anterior, se observ c nl-
imea unui rnd (proprietatea line-height) a fost setat 0. Ca urmare, nlimea
calculat a unui rnd de text (fr margini) va fi 0, dimensiunile cutiei
(box-ului) unui vers fiind determinate doar de margini. Singura modificare ne-
cesar stilului anterior (pentru rearanjarea liniilor) este adugarea urmtoarei
reguli:
p.verse{
margin-top: -1.5em;
}
Astfel, n ordinea normal a versurilor, dimensiunea unui rnd va fi de
1.5 ori nlimea textului, iar n ordinea invers de 1.5 ori. Desigur, primul vers
trebuie poziionat astfel nct s permit afiarea celorlalte cu evitarea suprapu-
nerilor cu zona de titlu. Pentru aceasta se utilizeaz proprietatea padding-top, n-
Valene CSS 113

ct marginea superioar a aparent primului vers s fie n acelai loc cu margi-
nea primului vers din ordinea normal.
p#verse1{
padding-top: 13.5em;
}
Modificarea aparent a coninutului
Pentru a obine ultima strof a poeziei a fost necesar i schimbarea punctuaiei,
problem rezolvat doar prin tehnici CSS, i nu prin modificarea coninutului
fiierului HTML. Aceast modificare se compune din ascunderea punctuaiei
anterioare i afiarea noii punctuaii.
Pentru ascunderea oricrui element este util proprietatea display din CSS,
valoarea none a acestuia ascunznd complet elementele afectate.
Pentru afiarea unui coninut nou, exist pseudo-elementele :before i :after,
proprietatea content disponibil aici putnd genera coninut.
span.punctuation{
display: none; /* Ascunderea vechii punctuaii */
}
#verse1:after{
content: '.'; /* Afiarea noului semn de punctuaie */
}
Acest coninut este doar desenat, nu adugat la documentul iniial. n gene-
ral, o foaie de stiluri CSS acioneaz doar la nivel de afiare, nu modific efectiv
coninutul, aa cum ar face un script. O aciune de copiere a unei poriuni din
documentul astfel redat prin proprieti de stil ne va releva varianta original
(att din punctul de vedere al ordinii apariiei versurilor, ct i al textului n-
sui), care poate diferi substanial de ceea ce se vede n browser.
Utilitate
Exemplul de mai sus este un exemplu jucrie, care surprinde ns suficient de
bine cum, via CSS, se pot rearanja diferitele pri ale documentului. Deoarece
posibilitile de modificare a poziiei sunt vaste (folosind proprieti ca position,
margin, float), layout-ul tabelar hard-coded devine absolut inutil. Pe un document
organizat liniar, se pot obine diverse variante de poziionare, ntr-un mod fle-
xibil i elegant, cu un efect important asupra felului cum utilizatorul percepe
coninutul.
3.2 Static i dinamic
Exemplul discutat n continuare vine n completarea celui anterior din punctul
de vedere al poziionrii prilor componente ale documentului, ilustrnd, n
plus, modul cum o foaie de stiluri poate nu doar s afecteze modul de prezenta-
re a unui document (partea static), ci i s simuleze i o oarecare dinamicitate a
documentului, desigur, la un nivel foarte redus. Elementele-cheie n acest scop
sunt pseudo-selectorii (:hover, :active, :target etc.), care implic dinamicitate prin
114 Marta Grdea

dependena de interaciunea cu utilizatorul (poziia cursorului mouse-ului, sta-
rea butoanelor acestuia etc.).

Figura 4. Un document HTML bine structurat, n absena stilului
Documentul HTML suport este structurat semantic (heading-uri, paragrafe,
liste), fiind inteligibil i dintr-un navigator n mod text.
Acestui document i se aplic un stil ce creeaz impresia unui desktop (vezi fi-
gurile 5 i 6). Seciunile documentului apar fiecare ntr-o fereastr proprie pe
desktop, ferestrele au meniuri, cuprinsul documentului a fost transformat ntr-o
bar de start, ferestrele pot s primeasc focus-ul, rmnnd deasupra celorlalte.
Desigur, efecte similare (meniuri popup, schimbarea proprietilor legate de
poziionare ale elementelor) se pot obine folosind JavaScript. Exist ns argu-
mente solide contra utilizrii scripting-ului pe partea de client pentru aspecte le-
gate de navigare. Dac, de exemplu, o pagin conine un meniu expandabil
realizat exclusiv n JavaScript sau n Flash, iar acest meniu este singura cale de
acces spre paginile subsidiare, acestea nu vor putea fi accesate dintr-un naviga-
tor ce are dezactivat JavaScript din motive de securitate sau nu are instalat
plugin-ul pentru Flash.
Pe de alt parte, nimeni nu va dezactiva CSS din motive de securitate, acesta
fiind practic inofensiv. n plus, o abordare bazat doar pe XHTML i CSS pe
partea de client va fi accesibil i din navigatoare fr suport pentru foi de sti-
luri.
Valene CSS 115

Figura 5. Impresia de aplicaie desktop
Crearea de sub-ferestre
Fiecare seciune logic din documentul HTML este afiat ca o sub-fereastr de
dimensiune fix, amplasat ntr-o poziie oarecare, spre deosebire de ordinea
liniar impus ntr-un document fr stil. Acest efect este foarte simplu de obi-
nut i presupune:
ncadrarea fiecrei astfel de seciuni ntr-un element div acesta este un
element generic care permite organizarea documentului n pri separa-
bile;
poziionarea absolut a fiecrui div;
stabilirea dimensiunilor unei ferestre;
precizarea faptului c o fereastr are dimensiune fix, astfel nct n cazul
n care textul coninut n fereastr este mare, s fie afiat o bar de deru-
lare;
stabilirea aspectului ferestrei.
div.topic{
position: absolute; /* poziionare absolut */
}
div.contents{
width: 480px; /* Stabilirea limii */
height: 256px; /* i a nlimii */
overflow: auto; /* Apariia barei de defilare */
}
116 Marta Grdea

Meniuri expandabile
Ca organizare, meniurile sunt liste (elemente ul) imbricate. Afiarea acestora se
face utiliznd pseudo-selectorul :hover, combinat cu selectorul de descendent
direct.
/* Meniuri i submeniuri */
.menuitems, .submenu {
display: none; /* Iniial meniurile sunt ascunse */
position: absolute;
/* Elementele poziionate absolut nu sunt luate n consideraie
la calcularea dimensiunii elementului printe */
}
/* Alinierea submeniurilor la: */
.submenu {
top: 0px; /* aceeai nlime cu a elementului activator */
left: 100%; /* marginea dreapt a meniului printe */
}
/* Activatorul unui meniu */
.topicmenu > .menuname{
cursor: pointer;
display: table;
padding: 4px;
}
/* O opiune din meniu */
.menuitem{
display: block;
list-style-type: none;
margin: 0px;
padding: 0px;
}

/* Regulile de vizibilitate a meniurilor */
.menuname:hover + .menuitems, .menuitems:hover, .popup:hover >
.submenu {
display: block;
}
Cea mai important regul este cea de afiare a meniurilor i a sub-
meniurilor. Primul selector alege meniul pentru care activatorul (elementul care
activeaz sub-meniul) este n starea hovered (cursorul se afl deasupra lui), selec-
tnd mai nti elementele hovered, apoi vecinii imediai ai acestora. Al doilea se-
lector menine vizibil meniul deschis atta timp ct cursorul mouse-ului se afl
deasupra meniului. Al treilea selector afieaz un sub-meniu atunci cnd curso-
rul se afl deasupra elementului li ce conine sub-meniul i care are rolul de ac-
tivator.
Valene CSS 117

Figura 6. Alte aspecte ale acestui stil
Schimbarea ordinii ferestrelor
Cum era de ateptat, printr-un click pe o fereastr corespunztoare unei seci-
uni, aceasta va fi adus deasupra celorlalte ferestre. Acest efect este posibil da-
torit proprietii z-index, ce permite specificarea unei ordonri pe axa z, cea
care determin ordinea de afiare a elementelor. n mod normal, elementele
sunt afiate n ordinea n care acestea se gsesc n document.
Prima regul utilizat n acest efect este, deci, aceea de a specifica o valoare
mai mare a proprietii z-index pentru fereastra deasupra cruia se afl plasat
mouse-ul.
O alt regul trebuie s menin o fereastr deasupra celorlalte atta timp ct
nu este apsat butonul mouse-ului, adic nu se ncearc activarea altui element
de pe desktop (pseudo-selectorul :active). Acest efect este obinut prin plasarea
unui element transparent ntre fereastra activ i cele inactive, astfel nct feres-
trele inactive s nu primeasc evenimentele mouse-ului.
n final, atunci cnd butonul mouse-ului este apsat, se dorete ca i ferestrele
din fundal s poat primi evenimente de la mouse, pentru a putea deveni active.
Acest lucru este realizat prin ascunderea elementului transparent de blocare.
Practic, evenimentul click pe o fereastr din fundal nu are ca efect apsarea pro-
priu-zis pe acea fereastr, ci spargerea stratului transparent care capta eve-
nimentele mouse-ului.
Revenind la prima regul utilizat pentru acest efect, elementul meninut
deasupra nu este fereastra vizibil, ci elementul transparent din spatele acesteia.
118 Marta Grdea

Deoarece ntre cele dou elemente exist relaia printefiu, automat va fi adus
deasupra i elementul fiu, fereastra.
div.topiccontainer{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
}
div.topiccontainer:hover{
z-index: 4;
visibility: visible;
}
div.topiccontainer:active{
visibility: hidden;
z-index: 2;
}
div.topic{
visibility: visible;
position: absolute;
}
Meniul principal
Cuprinsul de la nceputul paginii (meniul principal) a fost redat via proprieti
de stil printr-o bar de start. Aspectul de meniu expandabil a fost obinut utili-
znd aceleai tehnici ca i pentru meniurile ferestrelor.
Efectul de activare a ferestrelor prin apsarea intrrilor din meniu a fost obi-
nut cu ajutorul pseudo-selectorului :target. Acesta se refer la identificatorul de
fragment ce poate fi precizat n URL-ul unui document. Astfel, inta unei
adrese identific un element.
Legturile din meniul principal duc fiecare ctre o fereastr. La alegerea
unei intrri din acest meniu, una din ferestre devine inta cerut. Atunci cnd
utilizatorul alege o opiune din meniul principal, nici una din ferestre nu va fi
activ, deci ordinea de afiare va fi cea indicat de ordinea din documentul
HTML, fiecare fereastr avnd valoarea implicit pentru proprietatea z-index,
adic 0. Pentru a aduce deasupra fereastra int, vom utiliza o regul specifi-
cnd o valoare strict pozitiv pentru proprietatea z-index a elementului target.
*:target{
z-index: 1;
}
Texte tridimensionale
Un alt efect ilustrat de acest exemplu este acela de creare a elementelor aparent
tridimensionale, fr implicarea imaginilor. Titlul documentului (CSS Desktop)
este generat n acest mod. Specificaia CSS 3.0 include proprieti destinate cre-
rii unor efecte similare, care momentan nu sunt implementate.
Valene CSS 119

Pentru a realiza acest efect, s-au urmat mai muli pai:
cu ajutorul pseudo-elementului :before este generat nc o dat acelai
text cu al elementului iniial;
textul generat va fi afiat ca un element bloc (implicit, se genereaz ele-
mente inline), poziionat absolut;
acesta va fi aezat astfel nct s apar puin deplasat fa de elementul
iniial;
textul generat i textul iniial vor avea culori diferite; n acest caz, textul
iniial are aceeai culoare cu fundalul, iar textul generat este alb.
html > body #header h1{
color: #33373f;
font-size: 40pt;
margin-top: 0px;
line-height: 1em;
}
#header h1:before{
content: "CSS Desktop";
display: block;
color: #FFF;
margin-bottom: -1.02em;
margin-right: -.03em;
}
Limitri
Dei efectele descrise par foarte utile i puternice, CSS prezint o serie de limi-
tri n acest context. De exemplu, o fereastr creat prin CSS poate rmne acti-
v atta timp ct cursorul nu prsete fereastra navigatorului. n momentul n
care acest lucru se ntmpl, toate ferestrele vor reveni la ordinea iniial. Cauza
este lipsa memoriei. Astfel, o fereastr activ se afl pe stratul 4, o fereastr
inactiv pe stratul 0; nu se poate incrementa poziia ferestrei active curente, fi-
ind necesar o poziionare explicit. Se observ acest lucru i activnd ferestrele
n ordinea 3, 2, 1. ntr-un mediu desktop real, ferestrele ar fi n ordinea, de sus n
jos, 1 2 3. n mediul CSS Desktop ns ordinea este 1 3 2, deoarece fereas-
tra a treia va fi deasupra celei de-a doua ferestre, atta timp ct nu este activ.
O alt limitare este aceea c prin meniul de start doar legturile direct ctre
fereastr au efectul scontat; legturile de pe al doilea nivel, care conduc spre
pri din a doua fereastr, vor deplasa bara de defilare n interiorul ferestrei,
astfel nct partea dorit s fie vizibil, dar ordinea ferestrelor nu se schimb.
Acest lucru se ntmpl deoarece inta este un element din interiorul ferestrei,
i nu o fereastr.
120 Marta Grdea

3.3 Efecte speciale
Urmtorul exemplu este un alt document jucrie, fr coninut, al crui unic
scop este de a demonstra cum, jonglnd cu imagini cu transparen alpha, diver-
se tipuri de poziionare a elementelor i proprieti CSS 2 mai rar utilizate n
practic (clip), se poate obine un efect de animaie la derularea vertical.
n figurile de mai jos se pot urmri diverse faze ale acestei animaii, poziia n
cadrul documentului fiind sugerat de poziia barei de derulare vizibil n par-
tea dreapt.
Elemente fixe
n CSS 2, pentru proprietatea position se poate asocia valoarea fixed. Elementele
poziionate astfel pstreaz aceeai poziie relativ la fereastr, i nu la docu-
ment. mpreun cu proprietile de dimensionare i determinare a poziiei
(width, height, top, left, right, bottom), anumite pri de document pot fi amplasate
astfel nct s ocupe mereu aceeai zon a ferestrei.
n acest exemplu, norii i cldirile, definite prin elemente div ce au imaginile
corespunztoare ca fundal, sunt poziionate fix (se observ c nu i schimb
poziia la derulare).
.elementeFixe{
position: fixed; bottom: 0px; left: 0px;
width: 100%; height: 100%;
background: transparent repeat-x center bottom;
}
Imagini transparente suprapuse
Animaia cerului este compus din mai multe straturi suprapuse, avnd urm-
toarea structura de la stratul cel mai din spate la cel mai din fa:
culoarea cerului noaptea este dat de culoarea de fundal a documentului
(elementul body);
culoarea soarelui este dat de o imagine gradient galben (sus) spre rou
(jos); aceast imagine este fix i este vizibil prin decuprile din straturi-
le superioare, ce creeaz culoarea cerului;
culoarea cerului ziua (exceptnd norii) este dat de o imagine de fundal
opac, avnd decupat n mijloc o form de disc;
ceaa roiatic de la apus const ntr-o imagine fix;
pentru a deveni vizibil doar n momentul apusului, peste aceast ima-
gine este suprapus o imagine asemntoare cerului, dar care are o ban-
d semitransparent n jurul soarelui;
norii din timpul zilei se obin asemntor ceii; o imagine fix i semi-
transparent se afl deasupra stratului anterior;
Valene CSS 121

imaginea ce permite afiarea norilor doar n timpul zilei este asemn-
toare cerului, dar transparent numai n partea de jos; tot aceast imagi-
ne ascunde i ceaa dup apusul soarelui.

Figura 7. Etape ale apusului de soare
Pentru elementele mobile s-a utilizat urmtorul stil:
.elementeMobile{
position: absolute;
top: 0px;
width: 100%;
height: 2000px;
}
122 Marta Grdea

Ferestre glisante
Aprinderea luminilor la cderea nopii este realizat cu ajutorul proprietii
clip. Este definit o zon de vizibilitate ntr-un element mobil, ceea ce nseamn
c inclusiv zona de vizibilitate este mobil i se va deplasa mpreun cu bara de
defilare. Acest element este fereastra glisant (sliding window). n interiorul su
este definit un sub-element cu poziionare fix, avnd ca fundal imaginea ce tre-
buie s fie vizibil numai n anumite momente. Imaginea respectiv va fi mereu
n aceeai poziie, dar numai la trecerea ferestrei glisante pe deasupra ei va fi
vizibil. Acest element reprezint ceea ce este vizibil prin fereastr.
.clippingContainer{ /* fereastra glisant */
position:absolute;
top: 0px; left: 0px;
width: 100%; height: 2000px;
}
.clippedContent{ /* peisajul mascat, fix */
position: fixed;
bottom: 0px; left: 0px;
width: 100%; height: 100%;
}
#streetlightsC{ /* luminile de pe strad, fereastra mobil */
clip: rect(auto, auto, 1020px, auto);
}
#streetlights{ /* luminile de pe strad, peisajul fix */
background-image: url(img/streetlights.png);
}
n acest exemplu, luminile din ora sunt realizate utiliznd mai multe astfel
de ferestre glisante, pentru a simula aprinderea aleatoare. Folosirea uneia sin-
gure ar fi generat o aprindere a luminilor de sus n jos. Fiecare peisaj utilizat
const n cteva ferestre luminate alese aleator, iar marginea de jos a zonei de
tiere (care definete momentul cnd devine vizibil o asemenea imagine) se
afl la poziii diferite.
Integrarea ntr-un document
Dei n acest mod se pot crea efecte atractive fr implicarea unor tehnologii
cum ar fi Flash sau JavaScript, efecte potrivite, de exemplu, pentru pagini perso-
nale, trebuie menionat c utilizarea acestor tehnici decorative poate implica o
serie de probleme.
n primul rnd, n documentul XHTML suport trebuie s existe un numr de
elemente fr coninut, al cror unic scop este de a gzdui imaginile care com-
pun animaia dorit. Acest aspect contravine ntr-o oarecare msur ideii de se-
parare a formei de coninut.
O alt problem important apare datorit suprapunerii de imagini cu trans-
paren, cu diverse tipuri de poziionare. Aceasta implic, la derularea docu-
mentului, un efort sporit la desenare din partea navigatorului. Dac acesta
ruleaz pe o main cu resurse modeste, se pot crea aparente blocaje (navigato-
Valene CSS 123

rul rspunde cu greu la cererea de derulare, fiind ocupat cu desenarea), ceea
ce poate fi neplcut pentru utilizator.
n consecin, aceste tehnici trebuie folosite cumptat, trebuie evitate imagi-
nile prea mari i structurile prea complexe.
4. DE LA IDEE LA PUNEREA N PRACTIC
4.1 Cruda realitate
Am descris prin exemplele de mai sus puterea CSS ca specificaie, utilitatea
evident n documente i aplicaii Web, precum i capacitatea acestuia de a con-
stitui n anumite situaii o alternativ mai sigur i inofensiv pentru Flash i
JavaScript.
n realitate, ntre specificaie i implementrile efective exist diferene nota-
bile, care mpiedic, pentru moment cel puin, exploatarea la maximum a valen-
elor CSS. Specificaia CSS 1.0 este implementat aproape complet n cele mai
multe dintre navigatoarele frecvent utilizate actual. Implementrile pentru spe-
cificaia CSS 2.0 variaz puternic, de la aproape tot (Firefox, Opera, Safari), p-
n la strictul necesar sau mai puin (Internet Explorer).
Aadar, utilizarea de formatri ce implic CSS 2+ este primejdioas, n sensul
accesibilitii. Paradoxul este acela c, dei conceput, ca orice alt standard al
Consoriului Web, n scopul independenei de instrumentul de navigare, CSS
poate crea probleme majore tocmai n acest sens, din cauza inconsistenei im-
plementrilor.
4.2 Posibile soluii
Desigur, se pot imagina soluii pentru problema menionat, fiecare dintre ele
reprezentnd ns un compromis.
O prim soluie este utilizarea, pentru formatare, doar a aspectelor prevzute
de specificaiile CSS implementate uniform. Aceasta asigur o afiate similar i
corect n navigatoarele vizuale, ns limiteaz considerabil orizontul opiuni-
lor.
Alte soluii constau n formatri sau chiar tehnologii diferite pentru naviga-
toare diferite, n funcie de nivelul de nelegere al fiecruia. Fie se pot trimite, la
nivel de server, foi de stil n funcie de clientul care a lansat cererea, fie n ca-
drul aceleiai foi de stil se pot exploata anumite lacune ale navigatorului pen-
tru mascarea altora. Spre exemplu, versiunile navigatorului Internet Explorer vor
ignora regulile care implic selectori de tip descendent direct, aceast poriune
din specificaie nefiind implementat. Aadar, se poate defini un stil de afiare
neles de orice navigator, i, n cadrul aceleiai foi, se pot suprascrie diverse
poriuni, folosind reguli ce conin selectori mai compleci. Aceste poriuni pot
124 Marta Grdea

conine formatri avansate i vor fi ignorate de unele navigatoare, respectiv
aplicate de altele.
Un caz concret este cel ilustrat de codul de mai jos, extras din exemplul CSS
Desktop discutat n seciunea anterioar.
/* Fundalul desktop-ului */
body{
background-color: #33373f; color: #FFF;
overflow: hidden;
}
/* Titlul (CSS Desktop) */
#header h1 {
margin: 2px; padding: 4px 8px;
text-align: right;
/* Se mosteneste culoarea (#FFF) */
}
/* Navigatoarele care inteleg pseudo-elementul :before
vor crea efectul de text 3D */
html > body #header h1{ /* Selector ignorat de IE */
color: #33373f; /* aceeasi culoare ca si cea de fundal;
fara selectorul html > body, acest text ar fi
devenit invizibil in Internet Explorer */
font-size: 40pt;
margin-top: 0px;
line-height: 1em;
}

/* Crearea impresiei de contur tridimensional alb: */
#header h1:before{ /* selector ignorat de IE */
content: "CSS Desktop";
display: block;
color: #FFF;
margin-bottom: -1.02em;
margin-right: -.03em;
}

Desigur, un astfel de truc este o soluie temporar. O eventual lrgire a ga-
mei de prevederi ale specificaiilor CSS implementate incluznd selectorii de tip
descendent direct, dar nu i alte aspecte implicate ntr-un design ca i cel de mai
sus i va anula efectul.
O consecin direct a abordrii acestor ultime soluii este afiarea diferit n
navigatoare cu grade diferite de nelegere a specificaiilor CSS, aspect nu ntot-
deauna dezirabil. De pild, n cazul meniurilor expandabile descrise n cadrul
aceluiai exemplu, ignorarea regulilor referitoare la afiarea meniurilor va face
imposibil navigarea. Apare, deci, exact problema care se dorea evitat prin
abordarea CSS. O variant de mbuntire const n combinarea soluiilor de
mai sus cu exploatarea de faciliti specifice puse la dispoziie de navigator; n
cazul de fa poate fi vorba de utilizarea de behaviors pentru Internet Explorer
pentru a obine acelai efect ca al regulilor CSS ai cror selectori implic hover
sau active, necunoscute acestui navigator.
Valene CSS 125

5. CONCLUZII
CSS a devenit o specificaie puternic, ale crei capaciti depesc cu mult
formatarea de documente la nivel de font i cromatic. Ofer posibilitatea de a
da documentului formatat un aspect complet nou i neateptat de complex, de
la poziionri pline de originalitate pn la structuri dinamice de genul meniu-
rilor expandabile, de la efecte speciale de fundal la efecte de schimbare a sensu-
lui coninutului afiat. Utilizarea CSS permite permite formatarea documentelor
ntr-o manier elegant i flexibil, iar prin efectele multiple pe care le poate
avea asupra acestora devine un concurent important al unor tehnologii mai
complexe.
Dei la momentul actual exploatarea ultimelor versiuni poate fi problematic
din cauza implementrilor defectuoase sau insuficiente n cadrul navigatoare-
lor, CSS merit studiat la un nivel avansat i luat n considerare ca unul dintre
actorii principali n Web design.
Referine
Cederholm, D., Bulletproof Web Design : Improving flexibility and protecting against worst-case
scenarios with XHTML and CSS, New Riders Press, 2005
Cederholm, D., Web Standards Solutions: The Markup and Style Handbook, Friends of ED, 2004
Shea, D., Holzschlag, .M. E., The Zen of CSS Design : Visual Enlightenment for the Web (Voices That
Matter), Peachpit Press, 2005
Zeldman, J., Designing with Web Standards, New Riders Press, 2003
* * *, CSS/Edge: http://www.meyerweb.com/eric/css/edge/
* * *, CSS Zen Garden, The beauty of CSS design: http://www.csszengarden.com
* * *, W3C Specificaiile CSS: http://www.w3.org/Style/CSS
* * *, W3C Validator CSS: http://jigsaw.w3.org/css-validator/

Tendinte Actuale in Proiectarea Aplicatiilor Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tendinte Actuale in Proiectarea Aplicatiilor Web

Încărcat de

Drepturi de autor:

Formate disponibile

Sabin Buraga

S-ar putea să vă placă și