NW

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.
Cuprins
Prefa ................................................. Capitolul 1. Prin AJAX, spre Data Web i Semantic Web (Sabin Buraga) .... 1. Preambul ........................................... 2. De la Web 1.0 la Web 2.0 (Data Web) ........................ 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) ..................... 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 ..................................... Capitolul 2. Democraia pe Web: siturile Wiki (Diana Gorea) ........... 1. Conceptul de Wiki .................................... 2. Evoluie ............................................ 2.1 Ideile care stau la baza noiunii de Wiki 2.2 Inteligena colectiv 3. Principii de proiectare a siturilor Wiki ...................... 4. Web 2.0 ............................................
i
v 1 1 2
25 29 29 30
32 33
ii
Cuprins 5. Aplicaii Wiki ....................................... 5.1 MediaWiki 5.2 TWiki 5.3 XWiki 5.4 Alte aplicaii Wiki 6. Concluzii ........................................... 41 43 43 45 34
Capitolul 3. Aplicaii fr fir bazate pe Web-ul semantic (Sabin Buraga) .... 1. Introducere .......................................... 2. Prezentare succint a Web-ului semantic ..................... 2.1 Preambul 2.2 Niveluri ale Web-ului semantic 3. Specificarea profilului unui dispozitiv wireless ................. 3.1 Premise 3.2 Specificarea caracteristicilor 3.3 Avantaje 4. Propunere de implementare .............................. 4.1 Arhitectur conceptual 4.2 Utilizri 5. Concluzii ............................................
47
51
53
Capitolul 4. Our Photos: descrierea, regsirea i vizualizarea fotografiilor n cadrul unui album online partajat (Sergiu Tauciuc) ....................... 55 1. Introducere .......................................... 2. Suportul semantic pentru cutare .......................... 2.1 Fiierele de descriere RDF 2.2 Fiierele de index XML 3. Aspecte privind implementarea ........................... 4. Concluzii ............................................ Capitolul 5. MUMSAI un sistem de autentificare automat (Lenua Alboaie, Snic Alboaie) .............................. 1. Introducere .......................................... 2. Abordarea MUMSAI ................................... 3. Tehnologii folosite. Detalii de implementare .................. 4. Testare ............................................. 5. Concluzii ............................................ 61 70 73 73 73 77 81 81 55 56
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 ........................... 4.1 Cruda realitate 4.2 Posibile soluii 5. Concluzii ............................................ 125 123
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 acestui 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 principale teme de interes att proiectarea i dezvoltarea de aplicaii Web sau dedicate spaiului WWW, ct i interaciunea Web. Pe parcursul anilor, n cadrul <Web /> au fost dezbtute de ctre specialiti ai mediului academic i industrial subiecte referitoare la maniera bazat pe meta-limbajul XML de organizare, 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 disponibile la adresa http://www.infoiasi.ro/~web/. Volumul de fa cuprinde o parte dintre numeroasele contribuii expuse la ultima ediie a atelierului <Web />, reprezentnd variante extinse ale prezentrilor 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 utilizarea serviciilor Web, surprinznd tendinele actuale de proiectare i dezvoltare a aplicaiilor Web.
Dr. Sabin-Corneliu Buraga Iai, 17 decembrie 2005
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 premergtoare 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 Cercetri 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 sistem informatic distribuit, scopul principal urmrit fiind facilitarea accesului rapid la informaiile tehnice cuprinse n manualele de utilizare a calculatoarelor. n contextul apariiei Web-ului, dou mari direcii precursoare trebuie menionate: dezvoltarea hipertextului (sau a procesrii computerizate a documentelor electronice complexe) i dezvoltarea protocoalelor Internet care au fcut posibil 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 hipermedia (Berners-Lee, 1999). Din punct de vedere tehnic, spaiul Web pune la dispoziie un sistem global i standardizat de comunicare multimedia, informaiile fiind organizate asociativ i distribuite n funcie de cererile utilizatorilor, funcionnd conform modelului client/server. Putem vedea Web-ul ca fiind un
1
spaiu informaional compus din elemente de interes, denumite resurse, desemnate 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 posibilitatea exploatrii n manier distribuit a puterii de calcul a computerelor conectate la Internet (Berners-Lee, 1989). Una dintre prioritile Consoriului Web (W3C) organism care coordoneaz i contribuie la standardizarea tehnologiilor 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 intermediul 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 identificatori uniformi de resurse, iar ulterior prin nume stabilite de utilizatori), dezvoltarea viitoare a Web-ului fiind focalizat asupra mainilor, nu numai asupra oamenilor (Buraga, 2004a). n acest capitol, vom lua n consideraie principalele caracteristici ale noului 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 realizarea 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 interaciunea tot mai bogat i complex cu utilizatorul. n acest context, urmtorul subcapitol descrie suita de tehnologii AJAX (Asynchronous JavaScript And XML), nsoind expunerea cu diverse exemple concludente, dar i cu unele detalii privind 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 controleaz propriile date, punndu-le n mod uzual la dispoziie altora, prin intermediul unor instrumente colaborative.
Prin AJAX, spre Data Web i Semantic Web
Astfel, asistm la proliferarea de servicii specializate disponibile graie tehnologiilor 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 pregnant aspect fiind al siturilor/aplicaiilor aliniate curentului social networking (Drummond et al., 2004). Ne putem referi la comuniti virtuale, Weblog-uri, situri 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 putnd 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, independente 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 acestora, 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 constituirea 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 democratic urmtor: orice persoan aparinnd comunitii Web poate arta c anumite informaii sunt interesante (bune) prin crearea unei legturi ctre resursa al crei coninut include respectivele informaii, pentru o eventual utilizare 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 legtur hipertext ctre acel fragment de informaie. Aceasta alimenteaz ciclul seleciei naturale n reprezentarea cunotinelor: utilizarea determin comunitatea, 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 tocmai acestui aspect.
4 2.2 Marcaje (adnotri) definite de utilizator
Ceea ce apare pregnant n cazul Web-ului datelor (Data Web) este faptul c utilizatorii pot folosi propriile lor marcaje (tag-uri) astfel nct s adnoteze informaiile 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 inexistente. 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 instrumente 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 participation), 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, activitate referit prin termeni precum folksonomy (folk + taxonomy), folk classification, 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 informaie 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 (ntreinut) 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 cele viznd informatica). n ianuarie 2005, revista Fortune listeaz un numr de 8 blogger-i (persoane care i redacteaz propriile blog-uri) crora oamenii de afaceri ar trebui s nu le ignore comentariile publicate pe Web. Din aceasta se poate 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 punem la dispoziie informaii de interes, atunci trebuie s partajm hiper-legturi i s facem disponibile comentariile din cadrul altor blog-uri. Legturile hipertext reprezint punctul forte al Web-ului, iar n cazul Weblogging-ului ele sunt elementul cheie. Din punctul de vedere al strategiei realizrii afacerilor electronice 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 indispensabil 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 detalii pot fi consultate n lucrrile (Buraga, 2004b), (Buraga, 2005) i (Doctorow et al., 2002).
6 La succesul fenomenului blogging au contribuit:
tehnologia RSS/Atom folosit pentru mediatizarea (syndication) coninutului 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 instrumente numite agregatori de coninut care extrag, sumarizeaz i stocheaz datele RSS/Atom; instituirea de relaii ntre blog-uri graie legturilor permanente (permanent 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 punnd 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 instrumente 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 aplicaiilor. Fiecare aplicaie Web important a zilelor noastre se bazeaz pe o baz de date specializat de exemplu, Google pe indexul resurselor gsite de roboii 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 mbogirea semantic a acestora. Mai mult, un serviciu devine automat mai bun cu ct mai muli oameni l utilizeaz, principiu de baz al Web-ului 2.0, conform (OReilly, 2005). Un exemplu este cel al aplicaiei BitTorrent, n care fiecare utilizator i ofer resursele proprii n crearea unei arhitecturi Internet descentralizate de transfer peer-topeer al fiierelor. Fiierele partajate sunt divizate n fragmente care pot fi preluate din diverse locaii i asamblate la destinatar. Cu ct un fiier devine mai popular, 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.
Prin AJAX, spre Data Web i Semantic Web 2.5 ncredere radical. Folosirea standardelor
Surprinztor sau poate nu, una dintre categoriile de aplicaii ale Web-ului datelor este cea a siturilor de tip wiki care permit utilizatorilor s adauge diverse tipuri 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, capitolul 2. Un exemplu important este Wikipedia.com, fiecare intrare a acestei enciclopedii 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 ceea 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 informaii i nu din restricii private, trebuie creat cadrul unei ct mai facile utilizri a acelor informaii, prin urmarea standardelor (deschise) existente i prin recurgerea 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 interoperabilitatea, tratarea utilizatorilor de zi cu zi ca fiind co-dezvoltatori ai software-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 oameni, 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 este 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 folosindu-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-
Sabin-Corneliu Buraga 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 satisface funcionalitatea sa; exist o serie de factori, majoritatea calitativi, pentru determinarea acestui aspect: timpul de nvare, uurina n utilizare, performana n utilizare, ergonomia; interfeele Web motenesc utilizabilitatea 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 Java, 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 utilizabilitii; izolarea interfeei de aplicaia propriu-zis n cele mai multe cazuri, izolarea prezentrii datelor de logica aplicaiei este aproape imposibil pe Web: funcionalitatea (programele rulate pe partea de server sau de client) alterneaz cu interfaa (elementele HTML), aceasta conducnd la dificulti 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 interfeelor Web (Candell & Raggett, 2002), prin proliferarea diferitelor dispozitive mobile care pot prezenta mijloace diverse de intrare/ieire; instrumentele de implementare ale interfeelor Web vor trebui s fie capabile 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 proiectare i din cauza lipsei de instrumente adecvate care s instruiasc designerii Web s utilizeze exclusiv elemente consistente (asigurndu-se consistena coninutului, a structurilor navigaionale, a dispunerii spaiale 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 noilor direcii de interaciune. Una dintre componentele-cheie ale noului Web n ceea ce privete interaciunea cu utilizatorul este suita de tehnologii deschise cunoscut sub numele de AJAX (Asynchronous JavaScript And XML), prezentat pe larg n urmtorul subcapitol 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 tehnologii 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 rencrcat 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.
10
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). 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 codul de stare obinut; onreadystatechange desemneaz funcia care va fi invocat la modificrile privind schimbarea strii de transfer a datelor (reamintim faptul c datele sunt transmise n manier asincron i deci trebuie s fim notificai asupra schimbrii evenimentelor ce pot surveni pe parcursul transferului).
Proprietile de baz ale obiectului sunt detaliate n continuare:
Prin AJAX, spre Data Web i Semantic Web 3.2 Un prim exemplu: verificarea existenei unui nume de cont-utilizator
11
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 fr 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 putea cunoate dac numele de cont ales este incorect dect dup completarea tuturor 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 pierdere a focus-ului asupra cmpului de introducere a numelui de cont, prin intermediul 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 contului 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 proprietii de stil display oferit de CSS.
12
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 existenei 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 }
13
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 cazul 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 ntr-un document XML cu structura:
<?xml version="1.0"?> <participanti> <participant> <nume>busaco</nume> <adresa>http://www.infoiasi.ro/~busaco/</adresa> </participant>
14
<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 programul JavaScript. Folosind modelul DOM (Le Hors et al., 2000), se verific existena 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 informaiilor solicitate, apelat prin metoda GET la acionarea butonului submit din cadrul formularului Web. O posibil soluie este urmtoarea:
15
<?php /* Program PHP care insereaza informatii privitoare la un participant intr-un document XML dat (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'); // 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>"; ?>
16
Figura 2 reprezint o captur-ecran oferind mesajul de eroare obinut de utilizator 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 posibilitatea 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 corespunztor 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 precedent, n acest caz prin metoda POST vom expedia aplicaiei de pe server informaiile 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):
17
// 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();
18
// 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 mesajul 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 modului 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
Prin AJAX, spre Data Web i Semantic Web 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"; }
19
Se remarc utilizarea modului XML::Simple pentru procesarea facil a coninutului 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.
20
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 serverului 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) */ // 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 ('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"; } ?>
21
Preluarea datelor transmise de client prin metoda POST se realizeaz via variabila predefinit $HTTP_RAW_POST_DATA. Aceste date sunt de fapt marcate 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 semnalate 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 navigatorului. 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>
22
</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 informaii 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 compromis); 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 reglementrile i standardele n vigoare n ceea ce privete proiectarea interfeei cu utilizatorul (Buraga, 2003a); oferirea de alternative la AJAX, cnd suportul pentru el nu exist implementat trebuie inut seama de faptul c nu orice browser ofer suport pentru AJAX; de asemenea, utilizatorul ar putea avea dezactivat opiunea 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 aadar 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;
23
stabilirea unui mod de interaciune clar metaforele de interaciune trebuie s fie predictibile, utilizatorul tiind la ce trebuie s se atepte din partea interfeei (interaciune HTML versus AJAX versus aplicaie convenional); 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 detalii pe situl AJAXPatterns.org: tratarea evenimentelor la nivel local pe ct posibil, evenimentele survenite trebuie rezolvate la nivelul clientului, fr a se iniia cereri (i, implicit, 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, datorit 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 rezultate 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 structur, 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 convenionale, disponibile pe platformele consacrate, aplicaiile Web vor
24
Sabin-Corneliu Buraga trebui concepute avndu-se n vedere utilizabilitatea, n general, i accesibilitatea, n special detalii n lucrarea (Buraga, 2005); indicarea vrstei informaiei afiate pentru ca utilizatorii s aib deplin ncredere n informaiile puse la dispoziie, trebuie specificat data afirii datelor importante (e.g., preuri, aciuni, parametri de stare/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 trebuie 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 similare 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 aplicaiilor 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 reprezentarea resursei iniiale). Transferul se realizeaz prin HTTP, reprezentarea este 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 considerat independent, fr a se lua n consideraie contextul conexiuni stateless. Resursele Web pot fi accesate printr-o interfa generic pus la dispoziie de metodele protocolului HTTP: GET, POST, PUT i DELETE. Actualmente, sunt utilizate preponderent GET i POST. A se vedea i (Erl, 2005) i (He, 2004). Aplicaiile folosind AJAX pot fi, astfel, considerate servicii Web implementate 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 subcapitolul 2). O serie dintre siturile majore nglobeaz AJAX n vederea oferirii
25
vizitatorilor a unei interaciuni complexe i mulumitoare. Drept exemple notabile, 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, adnotate 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 programare 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 detalii n (Zametti et al., 2005).
4. N LOC DE CONCLUZII
n cadrul acestui capitol, am detaliat o serie dintre direciile de viitor n dezvoltarea 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 realizrii de hiper-legturi ntre persoane i organizaii, nu doar ntre maini i documente, prin intermediul aa-numiilor identificatori extensibili de resurse (XRI Extensible Resource Identifiers), persisteni la schimbri i rezolvnd problemele legate de intimitate personal (privacy) i ncredere (trust) a se consulta lucrrile (Drummond & Strongin, 2004) i (Drummond et al., 2004). n concordan cu acest Web social, Data Web-ul poate fi considerat drept soluie simplificatoare pentru inter-schimb de date, bazat pe principiile arhitecturale 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
26
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 utilizatorilor; protecia furtului identitii digitale; aplicaii pentru efectuarea de cutri cu specific social (social search), precum (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 aplicaii, aliniate noului Web, vor trebui s integreze servicii oferite de dispozitive mobile, calculatoare personale, servere etc. De asemenea, trebuie remarcat faptul c atunci cnd dispozitivele i programele sunt conectate la Internet, aplicaiile 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
27
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
28
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/
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 cele 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 software 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 expandabil 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 coninut, clasificarea coninutului; organizarea de evenimente: conferine, concursuri, expoziii etc.;
29
30
Diana Gorea
brainstorming individual i colectiv: se pot posta idei personale sau publice, 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 termenul hawaian Wiki-Wiki, care nseamn foarte rapid (very quick). Deci, un sit Wiki nseamn un sit Web rapid, deoarece simplific procesul de creare a siturilor 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 programatori. 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 enciclopediei 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 evaluate 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 rmas 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 utilizarea 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, comportament 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 atmosfera terestr, sistemul solar, plcile tectonice, creterea populaiei, diverse fenomene 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 neavnd 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 identice 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 gndire de complexitate superioar, rezolvare de probleme i integrare, prin colaborare 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(n2), unde n reprezint numrul de utilizatori din sistem.
32
Diana Gorea
Inteligenta colaborativ distribuit este activitatea unui grup care colaboreaz intr-o sfera de interaciune virtual. Membrii grupului pot interaciona n timp real sau asincron chiar dac nu sunt localizai n acelai spaiu fizic. Tehnologiile pentru facilitarea dezvoltrii inteligenei colaborative distribuite sunt cunoscute sub numele de software colaborativ (sau groupware). Din aceast categorie fac parte programele de tip instant messenger, chat rooms, conferine Web, calendarele electronice, sistemele de gestiune a cunotinelor, sistemele de management a proiectelor, pota electronic, forumurile, weblog-urile i, bineneles, 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 utilizatori; 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 metacolaborrii (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 domenii. Se dorete crearea unui depozit de cunotine despre colaborare n continu 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;
33
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 acelai 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 mesajelor 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 coninutului 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 maliioase a siturilor Wiki. Cu toate acestea, este mai uor s se corecteze greelile, nu s se previn. Orice modificare este reversibil prin intermediul jurnalelor. De asemenea, utilizatorii direct interesai de calitatea anumitor 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 vandalism 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, termenul 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 utilizatori 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 semantic. Cele dou semnificaii sunt cumva conexe i complementare, conjuncia lor ducnd la apariia noiunii de Web semantic emergent. Astfel, reelele sociale 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 bazeaz pe micro-coninut provenind din surse diferite, distribuite, care sunt procesate 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 sistemele de gestiune a coninutului este modalitatea de editare a coninutului. n plus, n cazul sistemelor Wiki accentul cade n primul rnd pe coninut n detrimentul 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 folosete 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:
35
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 versiunilor, 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 coninutul 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 vizualizeaz o pagin, wikitext-ul este convertit in XHTML (sau coninutul XHTML este preluat din cache), care este redat de navigatorul Web al utilizatorului. 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 respectiv.
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 baza de date. Pentru mai multe informaii despre aplicaia MediaWiki se poate consulta situl Wikimedia Metawiki, care conine informaii despre toate proiectele fundaiei 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 interconectat, 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 coninut liber celui structurat i, invers, utilizarea TWiki n construcia de noi aplicaii Wiki. TWiki a fost adoptat n spatele firewall-urilor ctorva companii importante, cum ar fi Motorola, Yahoo!, SAP, Disney Corporation, Inktomi, datorit interfeei 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 grupurile colaborative; cutare cu sau fr expresii regulate; notificare via e-mail n cazul apariiei unei modificri ntr-o colecie;
37
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 intermediul 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 facilitilor 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 evenimente, 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 conexiunilor la baza de date. SVN (Subversion) pentru gestionarea versiunilor documentelor i a fiierelor ataate. Struts, pentru gestionarea schemelor URL. Velocity, pentru gestionarea vizualizrii documentelor i pentru generarea 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 tuturor utilizatorilor s neleag coninutul i s aduc contribuii la acesta. Din acest motiv, a fost elaborat un prototip destinat proiectelor intranet i organizaionale, 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 grafice).
39
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 seciunii, 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 reprezint editorul de clase (a se vedea figura 2), altele sunt introduse prin intermediul 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 uneltele 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 deloc baze de date, coninutul fiind pstrat n fiiere text. Este disponibil sub licen 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 redundanei. Astfel, fiecare funcionalitate este implementat ca un plugin, multe dintre 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 pstreaz coninutul Wiki n fiiere text. Dintre funcionalitile notabile amintim prevenirea spam-urilor prin filtrarea coninutului cu ajutorul expresiilor regulate, notificare la email-uri, personalizarea interfeei prin CSS i XSLT, extensibilitate prin plugin-uri, existena unei ediii desktop. SWiki (Squeak Wiki) este o implementare n limbajul Squeak a aplicaiei originale 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. Aplicaia are propriul server Web (numit Comanche), care poate coexista cu alt server 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 intermediul unei interfee Web de administrare. Cu excepia mainii virtuale i a imaginii, care sunt disponibile n format binar, toate celelalte fiiere (templateurile i paginile Wiki) sunt fiiere XML. ZWiki este o aplicaie Web dezvoltat de Joyful Systems disponibil sub licen 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.
41
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 interschimbul 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 soluiilor 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 extensibile prin intermediul plugin-urilor, n acest mod putndu-se adapta la necesitile 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 pagin 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
Capitolul 3
APLICAII FR FIR BAZATE PE WEB-UL SEMANTIC

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 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 investiga 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 inteligente (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 inter-uman i de creare a unor medii computaionale ubicue, conduce la necesitatea 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 mobilitate 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 dispozitivele sunt echipate cu un procesor mai puin puternic, avnd o memorie de capacitate mai mic sau un ecran la rezoluie redus (Pratt, 2004). Unul dintre avantajele majore este cel al suportului pentru o conectivitate bogat cu alte
43
44
dispozitive sau calculatoare via porturi USB (Universal Serial Bus) i cu infrarou ori interfee de reea, folosind diversele standarde, protocoale i tehnologii Internet 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 interaciuni multimodale prin suportul acordat folosirii altor dispozitive de intrare, precum 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 recunoaterea vorbirii (speech recognition). Se poate considera faptul c noile dispozitive 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 vertical (portrait). Unele ecrane pot avea form ptrat (square). Din acest motiv, interfaa 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 utilizatorilor, 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 problemele 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 puse 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 tendinelor actuale de dezvoltare a Web-ului semantic, menit a facilita managementul 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 coninuturi 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 semantic reprezint o pnz consistent i logic a tuturor resurselor de pe Web, accentul punndu-se pe interpretarea datelor de ctre main i nu pe reprezentarea lor. n cadrul unui scenariu vizionar, prezentat n (Berners-Lee, Hendler & Lassila, 2001), se prefigureaz modul cum dispozitive inteligente partajeaz cunotine privitoare la propriile funcionaliti i la contextul n care i desfoar 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 (BernersLee, Hendler & Lassila, 2001) i (Davies, Fensel & van Harmelen, 2003): asocierea de semantici legturilor dintre resurse, cu posibilitatea extinderii 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 stocare i de reprezentare a acestora.
2.2 Niveluri ale Web-ului semantic Arhitectura Web-ului semantic este una funcional, deoarece modul de constituire a acesteia se bazeaz pe specificarea incremental a unor limbaje, pornind
46
de la nivelul inferior (i.e. nivelul meta-datelor) i ajungnd la nivelurile superioare (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 vocabulare 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 conceptelor 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 asistare 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 vedea (Bray et al., 2004). Identificatorii uniformi de resurse sunt folosii pentru localizarea 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-
47
limbajul XML reflect o manier uniform sintactic, independent de platform i de limbajul de programare, de structurare a datelor. Actualmente, se utilizeaz 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, Consoriul 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 dispozitive 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 interfeeiutilizator, 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 interfeelor pentru realizarea rapid de prototipuri de dispozitive, pentru proiectarea i implementarea interfeei-utilizator destinate unor tipuri (artefacte) de aplicaii exploatabile pe dispozitive mobile sau pentru efectuarea unor teste de utilizabilitate (la nivel formal sau informal). n vederea specificrii ntr-o manier independent de platform (configuraie 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.
48 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 metadate 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 intermediul 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 exemplu, 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 versatil 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) viznd: energia consumat (de exemplu, starea de ncrcare a bateriilor proprii i diversele restricii de utilizare n contextul folosirii unor aplicaii necesitnd o energie electric substanial e.g., rularea unui player multimedia), conectivitatea la Internet (de exemplu, capacitatea de transfer via o legtur 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 deprinderi ale utilizatorului, precum gradul de folosire a tastaturii n detrimentul 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).
49
Folosind aseriuni RDF, se ofer suport pentru nivelul de meta-date i cel ontologic n vederea clasificrii dispozitivelor i a exprimrii relaiilor dintre dispozitivele 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 tehnice 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>
50
<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 caracteristicile hardware, la platforma/platformele utilizate i la diverse preferine specifice (fie specificnd parametri QoS, fie preferine generale i/sau implicite ale utilizatorului), 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 limbajul 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 pentru 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>
51
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 manier 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) resurse 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, conectivitate 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 dispozitivelor formnd o reea fr fir constituit ad-hoc, propunem folosirea unui sistem de multi-ageni urmrind liniile expuse n (Buraga, 2004c). Agenii software sunt sisteme informaionale care se comport asemeni unor entiti ntr-o manier autonom, execut diverse aciuni avnd un anumit nivel de reacie i etaleaz atribute precum nvarea, cooperarea i mobilitatea, asistnd utilizatorii n activitile acestora (Buraga, 2003a; Buraga, 2004a).
52 4.1 Arhitectur conceptual
Sistemul de ageni va fi compus din ageni mediatori (ageni de achiziie de informaii) care vor facilita interaciunea dintre utilizator i aplicaiile executate la distan via servicii Web. Pentru fiecare aplicaie disponibil pe un anumit sistem (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 diveri 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 Internet, 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 modelului mental i a celui cognitiv, plus modelarea cunotinelor utilizatorului) 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). Soluia 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 vehiculate via OWL (Web Ontology Language) (Geroimenko, 2004; W3C). constituirea profilului dispozitivului acest aspect devine foarte important dac se intenioneaz realizarea de interfee independente de periferic (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 specificare 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 cadrul Internetului fr fir. Proiectanii i dezvoltatorii vor putea beneficia de
53
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 inter-personale ntre utilizatori, constituindu-se reele sociale digitale fr fir. Relaiile dintre utilizatori pot fi specificate la nivel de aplicaie graie unor vocabulare precum FOAF (Friend Of A Friend), iar cele ntre resurse i dispozitive prin intermediul limbajelor prezentate n seciunea 3 a lucrrii de fa. O posibil soluie de implementare este propus n (Serea, 2005). O alt utilizare practic, beneficiind de avantajele oferite de sistemele multiagent, 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 utile 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 constituirii unei infrastructuri computaionale bazat pe tehnologiile Web-ului semantic. 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 conjuncie 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 regulilor 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 diverse 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
54
Buraga, S. (coord.), Aplicaii Web la cheie, Polirom, Iai, 2003: http://www.infoiasi.ro/~phpapps/
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., 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., 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 dispozitivelor 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/
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 aceea, direciile posibile de cercetare sunt, practic, nenumrate, iar utilizrile viitoare 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 divertisment, 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
55
56
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 comunicare (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 nregistrat i poate crea un numr de albume proprii, i adopt o abordare orientat-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 utilizatorilor 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 considerate 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 fiierului 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 containere sunt construite ca nite resurse (noduri) anonime, legate la fotografia descris 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. Muchia va lega nodul la containerul corespunztor.
Figura 2. Reprezentarea proprietilor de context
58
Figura 3. Reprezentarea proprietilor technical
Excepie la acest model de construcie sunt cuvintele cheie i persoanele prezente n fotografie. Putnd aprea n numr mai mare de 1 pentru fiecare fotografie, aceste elemente au fost organizate n alte dou containere n cadrul structurii Content, respectiv Keywords i Depicts.
Figura 4. Reprezentarea containerului content
Our Photos Meniuni:
59
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 imaginile 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>
60
<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, realizat 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 cuvinte (cele existente n index n urma cutrilor anterioare) se evit cutarea prin detaliile tuturor fotografiilor, rezultatul putnd fi obinut doar prin consultarea indexului. Pentru fiecare cuvnt indexat, fiierul index trebuie s conin id-urile fotografiilor 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 aspecte: 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 fotografiei, 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 locurile 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 atributul 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" /> <photo phid="95" full_match="True" /> </appears_in> </entry> </search> ...... </index>
ntruct aplicaia noastr este orientat-album, va exista cte un astfel de fiier index pentru fiecare album, care va ine evidena cutrilor efectuate pe albumul 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 implementarea 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 folosite 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.
62
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 genera un mic index pentru acel cuvnt i acel set de fotografii. Am folosit cuvntul index tocmai pentru c structura generat simuleaz fiierul 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 rezultatelor 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, asemntor unei tabele, n timp ce elementele XML sunt organizate, cum era firesc,
Our Photos
63
arborescent. Simularea structurii arborescente se va realiza asemntor structurrii n cazul bazelor de date, i anume prin ordonare. Ordonnd elementele dup word i appears_as, PhotoFinderul va ti c atunci cnd, iternd prin colecie, 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> <photo phid="96" full_match="True" /> <photo phid="95" full_match="True" /> </appears_in> </entry> </search> ...... </index>
Acest index ar putea fi generat n urma procesrii unei structuri formate din urmtoarele 3 elemente IndexEntry:
word Entry1: Entry2: Entry3: iarna iarna iarna
appears_as title keyword keyword
part_of true false false
photoId 98 96 95
Subliniem c obiectele de tip IndexEntry sunt obinute n urma procesrii detaliilor 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 fotografiei curente:
IRdfGraph sgraph;
64
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 fotografiei n nodurile sale frunz, mai exact n ID-urile acelor noduri. Muchiile reprezint 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 context 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 cuvinte care se potrivesc doar parial cu informaiile din noduri, de aceea este nevoie s apelm la colecia de 3-uple corespunztoare grafului RDF. Astfel, prin iterarea tuturor 3-uplelor, vom putea gsi toate acele obiecte (cmpul obiect din cadrul 3-uplului; proprietatea), cu care cuvntul dat se potrivete, fie total, 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 evitarea erorilor logice: nu dorim potrivirea cuvntului peste nodul type (MIME type), care este ntotdeauna image, i nici peste nodurile de tip container, reprezentate prin noduri anonime cu un identificator atribuit de funcia de procesare. 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 fotografiile 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 suficient 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 relevana (importana) fotografiei pentru cutarea curent i numrul de cuvinte care s-au potrivit peste aceast fotografie. Reinerea relevanei 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, dup 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 creeaz un document nou; se creeaz un navigator XPath pentru fiierul de index; menionm c folosim 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 navigatoare XPath, care sunt optimizate pentru o cutare rapid.
66
/// <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","UTF8","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 fotografie 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
} }
68
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 fiierul index. Pentru acestea vom cuta potriviri n detaliile fiecrei fotografii din albumul selectat, vom aduga ID-ul fotografiei la ID-urile curente i vom actualiza 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 simula structura arborescent din index; parcurgem nregistrrile cu apariii, actualizm colecia de ID-uri i fiierul 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
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('<','>');
69
} 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
70
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 toate 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 operatori 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 restricionate mai degrab de resursele disponibile (umane i materiale) pentru realizarea 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/ Buraga, S., Semantic Web. Fundamente i aplicaii, Matrix Rom, Bucureti, 2004: http://www.infoiasi.ro/~sweb/ Carroll, J., RDF Validation Service, W3C: http://www.w3.org/RDF/Validator/
Our Photos
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/
71
Capitolul 5
MUMSAI UN SISTEM DE AUTENTIFICARE AUTOMAT

Lenua Alboaie 1, 2 , Snic Alboaie 2
Facultatea de Informatic, Universitatea Al.I.Cuza Str. General Berthelot, nr. 16, Iai, Romnia adria@infoiasi.ro http://www.infoiasi.ro/~adria/
2 1
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 situri 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 utilizator dorete s se autentifice pe un anumit sit. La un prim pas se va trimite o cerere 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 informaii 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 necesitatea 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 situri client.
73
74
Alboaie Lenua i Alboaie Snic n discuiile noastre viitoare vom folosi urmtoarele notaii: S serverul principal care autentific utilizatorii ; C1, ..., Cn clienii care autentific utilizatorii cu ajutorul S.
Serverul principal execut dou funcii: 1. Autentificare : se verifica autenticitatea pentru perechea (user,parola) trimis de un client i se trimite rspunsul corespunztor mpreun cu permisiunile utilizatorului n caz afirmativ. 2. Conectare (logged) automat: conectarea pe un sit, implic desigur conectarea pe toate siturile organizaiei. Vom prezenta n aceast seciune cele dou situaii n care se poate afla utilizatorul atunci cnd dorete s se autentifice i vom descrie n paralel mecanismele 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 T0).
Figura 1. Cazul 1 Momentul T0
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 C1, acesta ar trebui s tie cine este utilizatorul. Considerm c la momentul T1 utilizatorul face cerere la C1. La momentul T2 au loc: C1 genereaz un numr aleatoriu; C1 i va ntoarce utilizatorului pagina n care sunt incluse dou iframe-uri.
MUMSAI un sistem de autentificare automat 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 />
75
Figura 2. Cazul 1 Momentele T1 si T2
La momentul T3, S i C1 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 cunoate 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 C1. Facem observaia c iniierea acestei comunicri de ctre C1 sau de ctre S depinde de implementare.
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
Utilizatorul va avea senzaia c s-a conectat automat.
76
Alboaie Lenua i Alboaie Snic
Cazul 2. Utilizatorul este conectat pe unul din siturile client C1, ..., Cn n aceast situaie utilizatorul i-a introdus ID-ul i parola pe un sit client, s zicem C1 (suntem la momentul T0 ). Problema care trebuie rezolvat n acest caz este: cum se face autentificarea pe server?
Facem observaia c la un moment T0, imediat ce C1 a primit cererea se va ncerca log-area utilizatorului. Fiindc aceast aciune nu funcioneaz, la momentul T1 C1 i ntoarce dou iframe-uri. Unul care conine cmpurile n care utilizatorul trebuie s introduc ID-ul i parola (care face apel la C1) 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 />
La momentul T2, serverul S creeaz o sesiune i ntreab prin SOAP pe C1 cine este utilizatorul conectat cruia i corespunde acel key. C1 i rspunde (tot folosind SOAP) prin perechea ID de utilizator i parol (la momentul de timp T3).
MUMSAI un sistem de autentificare automat
77
Figura 7. Cazul 2 Momentele T2 i T3
Din acest moment, orice vizit pe siturile client C2, , Cn 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 executa 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 timpul ct browser-ul este pornit. Dac se viziteaz acel domeniu, variabila din sesiune 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 informaii ntr-un mediu distribuit, descentralizat. SOAP permite (Alboaie & Buraga, 2003; SOAP, 2003): schimbul de informaii structurate ntr-un mediu distribuit i descentralizat; accesarea de servicii, obiecte ntr-o manier independent de platform.
Scopul principal al SOAP este facilitarea interoperabilitii ntre platforme i limbaje de programare.
78
Alboaie Lenua i Alboaie Snic 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.
79
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 utilizatorul 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 automat 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;
80
Alboaie Lenua i Alboaie Snic 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 Cn 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;
81
serverul la rndul lui terge din tabela proprie LOGIN linia corespunztoare (user, cheie) i apoi trimite n aceeai maniera (a se vedea figura 8) un apel SOAP la fiecare sit Cn s tearg din tabelele corespunztoare acel utilizator. La finalul logout.php de pe un Cn, se apeleaz 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 Cn.
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). Dup 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 autentificat 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 deconectarea 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.
82 Referine
Alboaie Lenua i Alboaie Snic
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 Buraga, S. (coord.), Aplicaii Web la cheie, Polirom, Iai, 2003: http://www.infoiasi.ro/~phpapps/ * * *, 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/
Capitolul 6
DEZVOLTAREA EXTENSIILOR PENTRU FIREFOX

Sergiu Dumitriu
Facultatea de Informatic, Universitatea Alexandru Ioan Cuza din Iai Str. General Berthelot, nr. 16, Iai, Romnia sdumitriu@info.uaic.ro http://purl.org/net/sdumitriu Rezumat. n cadrul capitolului de fa se face o descriere a structurii extensiilor pentru navigatorul 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 UserInterface 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 dezvoltarea de extensii ce pot fi adugate de ctre cei interesai de o anumit funcionalitate (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
83
84
Sergiu Dumitriu
RSS (live bookmarks), suport extins pentru standarde web, suport pentru localizarea 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 numele Netscape Navigator. Aplicaia s-a extins, devenind o soluie complet pentru aplicaii internet, incluznd, printre altele, un navigator, client de pot electronic 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 legate 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 tehnologii 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 navigatoarele Web, deci ncetarea suportului din partea companiei fondatoare pentru dezvolatea suitei de aplicaii Mozilla. n aceeai zi, a fost creat Fundaia Mozilla (Mozilla Foundation), o organizaie non-profit compus n principal din fotii angajai Netscape, ce nlocuiete Mozilla Organization. Aceast fundaie gestioneaz n prezent codul navigatorului i al proiectelor adiacente. Pe data de 2 aprilie 2003, s-a decis ca efortul programatorilor s fie redirecionat 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 versiuni 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 folosite 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 program 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 pentru codul JavaScript. Abundena funcionalitilor oferite ntr-un singur pachet de instalare era deranjant 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 navigatorului inclus n suita de aplicaii Mozilla, a devenit apoi Phoenix (lansat n septembrie 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 stabil (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 eficient 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 punctelor de extensie etc. 2.1 Mozilla Application Framework Inima unei aplicaii Mozilla este Mozilla Application Framework, cunoscut iniial ca XPFE (Cross Platform Front-End), o colecie de tehnologii i componente software disponibile pe mai multe platforme. Dintre acestea amintim Gecko, motorul de afiare i poziionare a elementelor grafice, Necko, o bibliotec de clase pentru comunicarea n reea, XPCOM, o variant multiplatform pentru comunicarea ntre componente, XPConnect, tehnologie ce permite accesarea componentelor XPCOM din JavaScript, i multe altele. 2.2 Chrome Pentru a separa o aplicaie Mozilla n pri logice, a trebuit s se gseasc o metod de a referenia o parte logic a unei aplicaii nu prin calea fizic a unui fiier 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 component de sine stttoare, chrome://navigator/content/ se refer la partea de coninut a navigatorului, 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 navigatorului, 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 determinat direct din URL-ul specificat. Acest fiier poate fi utilizat n aplicaie 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 schimbe, 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 referin la nivel logic a unei componente, permit dezvoltatorului unei extensii s
87
trateze identic pe diferite platforme aspecte legate de accesarea resurselor (separatorii diferii de directoare utilizai n Windows sau n Linux, regsirea directorului 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 module 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 corespunztor 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 protocolul chrome, este separat n prile de coninut, tem grafic i localizare, i, dup cum vom vedea n seciunea urmtoare, este dezvoltat utiliznd tehnologiile 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 repornirea 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 funcionare 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 2.5 Fiierele extensions.ini/extensions.rdf
Sergiu Dumitriu
Pentru a fi recunoscute de aplicaie i regsite n spaiul de nume chrome, extensiile curente trebuie s fie nregistrate. Punctul central de gestionare a extensiilor este format din fiierele extensions.ini i extensions.rdf. Acestea se afl n subdirectorul personal al fiecrui utilizator (oferind posibilitatea de particularizare la nivel de utilizator, i nu de calculator). n plus, exist cte un subdirector 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 directoarelor n care se afl extensiile. Un exemplu de astfel de fiier este1:
[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 utilizator 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, versiunile 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:
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}"/> <RDF:li RDF:resource= "urn:mozilla:item:{3d7eb24f-2740-49df-8937-200b1cc08f8a}"/> <RDF:li RDF:resource= "urn:mozilla:item:{cf2812dc-6a7c-4402-b639-4d277dac4c36}"/> </RDF:Seq>
89
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 2.6 Extensiile efective
Sergiu Dumitriu
Peste aceast infrastructur, sunt instalate extensiile efective, unele globale, accesibile 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 subdirectorul extensions al directorului destinat unui anumit profil. Acestea sunt locaiile recomandate; se poate specifica o alt locaie n fiierele de configurare a extensiilor. n general, extensiile sunt distribuite ca arhive .jar, pentru a reduce numrul 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 butoane 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 navigatorului n funcie de preferinele fiecrui utilizator, pstrnd n acelai timp navigatorul 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 explorarea 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. Alte instrumente utile includ editoare vizuale pentru codul HTML, validatoare, emulatoare pentru Internet Explorer, diverse editoare pentru componentele unei pagini.
Dezvoltarea extensiilor pentru Firefox Pentru navigare
91
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 modificri persistente (cu efect la fiecare accesare). Astfel, se pot realiza aciuni precum: 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 extern 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 accesate 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 nume 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 parametrii 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. Fiierul 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 localizare 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
93
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 coninut se afl n subdirectorul content/<extensie>/ din arhiva jar. Fiecare parte de localizare se afl n subdirectorul locale/<localeID>/<extensie>/ din arhiva extensiei. Pot fi distribuite mai multe localizri pentru o extensie ntr-o singur arhiv, fr 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 aplicaiei.
94 Paii care se execut sunt: se descarc arhiva;
Sergiu Dumitriu
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 comand 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 compilat. Modelul aplicaiilor Mozilla permite o separare foarte bine definit a atribuiilor n pri ale unei extensii. Astfel, se pot dezvolta separat elementele de interfa, logica aplicaiei, parametrii configurabili, stilul i localizrile lingvistice. 4.1 XUL interfee independente de platform Interfaa unei aplicaii Mozilla este configurabil, extensibil i stilizabil, nsemnnd c prezena sau absena unor controale nu este fixat n codul compilat al aplicaiei, ci este precizat ntr-un fiier separat de descriere a interfeei. ntreaga interfa a navigatorului i interfeele extensiilor sunt descrise utiliznd acest mecanism. Limbajul de descriere utilizat este XUL (Extensible User-Interface Language), un limbaj din familia XML dezvoltat i ntreinut de Fundaia Mozilla. Este disponibil ca parte integrant a motorului Gecko, permind dezvoltatorilor s creeze aplicaii multiplatform utiliznd un limbaj descriptiv de definire a interfeei (XUL) i un limbaj de programare interpretat (JavaScript). A fost conceput pentru a fi cu adevrat portabil i utilizabil pe platformele Windows, Macintosh, Linux i Unix. Spre deosebire de alte platforme pentru crearea de aplicaii portabile, cum ar fi QT sau GTK, o aplicaie Mozilla nu necesit compilarea interfeei pentru fiecare sistem de operare, ci doar existena executabilului Gecko pentru acea platform.
95
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):
<?xml version="1.0"?> <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 rdcin 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 fereastr 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 (meniu, fereastr, colecie de scurtturi pentru tastatur etc.). Coninutul acestui element nu va nlocui componenta existent, ci va fi adugat pe lng coninutul deja existent. De exemplu, pentru a extinde o bar de unelte din fereastra principal a navigatorului, 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).
n fiierul efectiv textul trebuie s fie trecut pe o singur linie
97
Un alt limbaj de marcare, destinat descierii formularelor, este XForms, standard 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 interfee 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 putea apela metodele unei interfee la fel pe orice platform, avnd acelai nume i aceiai parametri. O funcionalitate nu va fi deci identificat prin numele claselor i al funciilor ce o implementeaz, acestea putnd s difere de la o platform 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 interfee standard XPIDL ce trebuie extinse sau utilizate de o component pentru a fi recunoscut drept component XPCOM. La baz se afl nsISupports, o interfa 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 componentele oferite deja de platforma Mozilla, amintim:
98
Sergiu Dumitriu nsIFile, nsIDirectoryService, nsIFilePicker pentru accesul la sistemul de fiiere, nsIInputStream, nsIOutputStream, nsIScriptableInputStream pentru abstractizarea fluxurilor de date, nsIClassInfo, nsIComponentManager, nsIInterfaceRequester, nsIFactory pentru gestiunea componentelor, nsIObserver, nsIObserverService, nsIWebProgress pentru observarea operaiilor, 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 implementeaz comportamentul unei aplicaii. n final, pe baza unor componente de nivel jos, ce ofer funcionaliti elementare, se creeaz la nivel nalt funcionaliti 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 spaiului 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 dect 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 adevrata putere a acestui limbaj. n ciuda faptului c muli l critic pentru dificultatea verificrii corectitudinii, securitatea i predictibilitate precare, i lipsa de eficien (lucruri care pot fi semnalate n multe programe scrise n limbaje si-
99
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 limbajului, 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 pentru stocarea i transferarea datelor de orice fel, i strns legat de spaiul Web, locul 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 majoritatea funcionalitilor puse la dispoziie de platforma Mozilla. ns acest acces este permis codului aplicaiei, celui ce ine de navigator sau de extensiile acestuia, i restricionat n cazul codului executat n paginile ncrcate, din motive de securitate. Astfel, pentru dezvoltatorii de extensii, codul JavaScript satisface 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 document XUL (nerecomandat ns), sau se poate face referin la un fiier ce conine 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 localizare pentru fiecare extensie. Un astfel de modul conine dou tipuri de resurse: fiiere DTD (Document Type Definition) i fiiere .properties. Fiierele DTD sunt utilizate pentru definirea entitilor, refereniate n fiierele 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:
<?xml version="1.0"?> <!DOCTYPE window SYSTEM "chrome://myextension/locale/mainwindow.dtd"> <window id="main-window" title="&me.mainWindowTitle;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <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 utilizeze entiti. n acest sens se utilizeaz fiierele de resurse .properties. Acestea sunt
101
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 metode de obinere rapid a valorii pentru o cheie dat. Exemplu de utilizare. n fiierul content/myextension/mainwindow.xul:
<?xml version="1.0"?> <!DOCTYPE window SYSTEM "chrome://myextension/locale/mainwindow.dtd"> <window id="main-window" title="&me.mainWindowTitle;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <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 n fiierul locale/ro-RO/myexension/mainwindow.properties:

me.confirmClose = Suntei sigur?
Sergiu Dumitriu
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 platformei. 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 limbajul de descriere a interfeei, XUL, fiind limbaj din familia XML, permite, nativ, stilizarea prin transformri XSLT sau prin aplicarea de foi de stiluri CSS. Momentan sunt suportate specificaiile CSS 1.0, 2.1 aproape complet, i deja o parte
103
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 programatorului. La fel se pot accesa i imaginile ce apar ntr-o interfa, permind redefinirea lor ntr-o alt tem. O extensie poate reutiliza stiluri definite la nivel global pentru a facilita dezvoltarea 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 continu 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 si 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 tehnologii 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, 2nd edition: http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-357.pdf ***, ECMAScript language Specification, 3rd 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
***, 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/
Sergiu Dumitriu
Capitolul 7
VALENE CSS
Marta Grdea
Facultatea de Informatic, Universitatea Alexandru Ioan Cuza din Iai Str. General Berthelot, nr. 16, Iai, Romnia marta@info.uaic.ro http://purl.org/net/marta Rezumat. CSS este la momentul actual exploatat doar superficial, principalele motive ale acestui 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 stiluri 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, nenumrate atribute de formatare a textului, a culorii sau a poziionrii. Dezvoltatorii de navigatoare au introdus propriile elemente i atribute, nestandardizate, 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.
105
106
Marta Grdea
Soluia a fost introducerea unui limbaj care s separe coninutul de prezentare, astfel nct textul n format HTML s fie ncadrat doar de elemente de organizare 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 proprieti 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 momentul curent, algoritmii implicai n determinarea formatrii corecte nu sunt ns complet implementai n nici un navigator, n unele cazuri suportul pentru mare 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 interconectate, 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, formulare etc.), module pentru diverse medii de afiare (aural, paginat, ecran etc.) i module specializate pentru un anumit limbaj XML (SVG, Ruby, MathML i altele). 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 pentru 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 trebuie 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 organizarea 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 imaginilor apar legturi pentru descrcarea acestora, celulele nu i pstreaz dimensiunea din varianta grafic, textul devenind astfel greu de regsit.
n plus, orict de plcut vederii ar prea un document n forma bogat n detalii grafice, poate constitui o adevrat provocare pentru cei cu deficiene vizuale. 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 vizualizate 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 (organizarea neliniar a coninutului, o cromatic atractiv, imagini statice i animate dei abundena nu este recomandat). Pentru imprimare se va prefera, din motive evidente, un stil curat de elemente pur decorative; de menionat c neprecizarea 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 componente ale documentului i, mai mult, se poate ataa personalitate diverselor 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, unde paragrafele asociate fiecrui personaj pot fi citite de ctre o voce corespunztoare. CSS permite nu numai definirea de stiluri diferite pentru medii diferite, dar i definirea unor stiluri alternative pentru acelai mediu. Majoritatea navigatoarelor 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 precizarea 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 diminuarea 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 meninut 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 navigatoare 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 unele reguli speciale pentru mascarea lacunelor de implementare sau pentru a asigura un aspect independent de navigator; din cauza implementrilor incomplete, unele tehnici mai avansate sunt total incompatibile cu anumite navigatoare. 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 anticipeaz 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
text-align: left; padding-left: 96px; height: 13.5em;
111
} 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 strica 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 afiarea 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. Tabelele 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 utiliza elemente de structurare auxiliare. Elementul cheie al acestei tehnici este setarea 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 pagin. Reordonarea elementelor Dup cum se tie, ultima strof din Gloss conine aceleai versuri ca i prima, 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 nlimea 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 necesar 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 suprapunerilor 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 marginea 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 general, 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 nsui), 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 flexibil 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 prezentare 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, starea 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 figurile 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 argumente solide contra utilizrii scripting-ului pe partea de client pentru aspecte legate 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 navigator 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 stiluri.
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 obinut i presupune: ncadrarea fiecrei astfel de seciuni ntr-un element div acesta este un element generic care permite organizarea documentului n pri separabile; 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 derulare; stabilirea aspectului ferestrei.
/* poziionare absolut */
div.topic{ position: absolute; } div.contents{ width: 480px; height: 256px; overflow: auto; }
/* Stabilirea limii */ /* i a nlimii */ /* Apariia barei de defilare */
116 Meniuri expandabile
Marta Grdea
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 submeniurilor. Primul selector alege meniul pentru care activatorul (elementul care activeaz sub-meniul) este n starea hovered (cursorul se afl deasupra lui), selectnd mai nti elementele hovered, apoi vecinii imediai ai acestora. Al doilea selector menine vizibil meniul deschis atta timp ct cursorul mouse-ului se afl deasupra meniului. Al treilea selector afieaz un sub-meniu atunci cnd cursorul se afl deasupra elementului li ce conine sub-meniul i care are rolul de activator.
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 seciuni, aceasta va fi adus deasupra celorlalte ferestre. Acest efect este posibil datorit 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 ferestrele 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 propriu-zis pe acea fereastr, ci spargerea stratului transparent care capta evenimentele 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 utiliznd aceleai tehnici ca i pentru meniurile ferestrelor. Efectul de activare a ferestrelor prin apsarea intrrilor din meniu a fost obinut 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 specificnd 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 crerii 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 elemente 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 limitri n acest context. De exemplu, o fereastr creat prin CSS poate rmne activ 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, fiind 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 fereastra 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 3.3 Efecte speciale
Marta Grdea
Urmtorul exemplu este un alt document jucrie, fr coninut, al crui unic scop este de a demonstra cum, jonglnd cu imagini cu transparen alpha, diverse 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 partea 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 document. 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 urmtoarea 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 straturile 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 imagine este suprapus o imagine asemntoare cerului, dar care are o band semitransparent n jurul soarelui; norii din timpul zilei se obin asemntor ceii; o imagine fix i semitransparent se afl deasupra stratului anterior;
Valene CSS
121
imaginea ce permite afiarea norilor doar n timpul zilei este asemntoare cerului, dar transparent numai n partea de jos; tot aceast imagine 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; background: transparent repeat-x center bottom; }
122 Ferestre glisante
Marta Grdea
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 trebuie 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%; background: transparent repeat-x center bottom; } #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 singure 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 personale, 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 compun animaia dorit. Acest aspect contravine ntr-o oarecare msur ideii de separare a formei de coninut. O alt problem important apare datorit suprapunerii de imagini cu transparen, cu diverse tipuri de poziionare. Aceasta implic, la derularea documentului, 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 imaginile 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 constitui n anumite situaii o alternativ mai sigur i inofensiv pentru Flash i JavaScript. n realitate, ntre specificaie i implementrile efective exist diferene notabile, care mpiedic, pentru moment cel puin, exploatarea la maximum a valenelor CSS. Specificaia CSS 1.0 este implementat aproape complet n cele mai multe dintre navigatoarele frecvent utilizate actual. Implementrile pentru specificaia CSS 2.0 variaz puternic, de la aproape tot (Firefox, Opera, Safari), pn 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 implementrilor. 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 opiunilor. Alte soluii constau n formatri sau chiar tehnologii diferite pentru navigatoare 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 cadrul aceleiai foi de stil se pot exploata anumite lacune ale navigatorului pentru 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 gamei 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 ntotdeauna 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 meniurilor expandabile, de la efecte speciale de fundal la efecte de schimbare a sensului 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 navigatoarelor, 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/

NW

Încărcat de

Informații document

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

NW

Încărcat de

Drepturi de autor:

Formate disponibile

Sabin Buraga

Tendine actuale n proiectarea i dezvoltarea aplicaiilor Web

Iai, 26-27 noiembrie 2005

Coperta: Adrian Mironescu i Sabin-Corneliu Buraga

Dr. Sabin-Corneliu Buraga Iai, 17 decembrie 2005

PRIN AJAX, SPRE DATA WEB I SEMANTIC WEB

2. DE LA WEB 1.0 LA WEB 2.0 (DATA WEB)

Prin AJAX, spre Data Web i Semantic Web

4 2.2 Marcaje (adnotri) definite de utilizator

Prin AJAX, spre Data Web i Semantic Web

6 La succesul fenomenului blogging au contribuit:

Prin AJAX, spre Data Web i Semantic Web

3. AJAX (ASYNCHRONOUS JAVASCRIPT AND XML)

Proprietile de baz ale obiectului sunt detaliate n continuare:

Clasele de proprieti CSS sunt specificate n antetul documentului XHTML astfel:

Prin AJAX, spre Data Web i Semantic Web

Codul-surs al programului este furnizat n continuare:

Prin AJAX, spre Data Web i Semantic Web

Figura 2. Mesajul obinut n urma introducerii unui nume de cont existent

Prin AJAX, spre Data Web i Semantic Web

Prin AJAX, spre Data Web i Semantic Web

Prin AJAX, spre Data Web i Semantic Web

Prin AJAX, spre Data Web i Semantic Web

Prin AJAX, spre Data Web i Semantic Web

DEMOCRAIA PE WEB: SITURILE WIKI

Democraia pe Web: siturile Wiki

3. PRINCIPII DE PROIECTARE A SITURILOR WIKI

Democraia pe Web: siturile Wiki

Democraia pe Web: siturile Wiki

Figura 1. Arhitectura general a aplicaiei MediaWiki

Democraia pe Web: siturile Wiki

Democraia pe Web: siturile Wiki

Figura 2. Interfa Web pentru editarea de clase n XWiki

Democraia pe Web: siturile Wiki

APLICAII FR FIR BAZATE PE WEB-UL SEMANTIC

Aplicaii fr fir destinate Web-ului semantic

2. PREZENTARE SUCCINT A WEB-ULUI SEMANTIC

Figura 1. Nivelurile de specificare a Web-ului semantic

Aplicaii fr fir destinate Web-ului semantic

3. SPECIFICAREA PROFILULUI UNUI DISPOZITIV WIRELESS

48 3.2 Specificarea caracteristicilor

Aplicaii fr fir destinate Web-ului semantic

Aplicaii fr fir destinate Web-ului semantic

52 4.1 Arhitectur conceptual

Aplicaii fr fir destinate Web-ului semantic

Sergiu Sebastian Tauciuc

2. SUPORTUL SEMANTIC PENTRU CUTARE

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

Figura 2. Reprezentarea proprietilor de context

Sergiu Sebastian Tauciuc

Figura 3. Reprezentarea proprietilor technical

Figura 4. Reprezentarea containerului content

Our Photos Meniuni:

Aceast metod de identificare poate fi luat n considerare ca o alternativ la metoda clasic:

Sergiu Sebastian Tauciuc

Dup considerarea i analiza mai multor variante de abordare, am ales-o pe urmtoarea:

3. ASPECTE PRIVIND IMPLEMENTAREA

Sergiu Sebastian Tauciuc

word Entry1: Entry2: Entry3: iarna iarna iarna

appears_as title keyword keyword

part_of true false false

Sergiu Sebastian Tauciuc

Sergiu Sebastian Tauciuc

Sergiu Sebastian Tauciuc

/* Stabilirea limii / / i a nlimii / / Apariia barei de defilare */