GStandHTML Curs

Capitolul I.........................................................................................................................................3 Standarde, tehnici, concepte Internet i WEB..................................................................................3 1.1. Internet i WEB.....................................................................................................................3 1.1.1. Concepte de baz............................................................................................................3 1.1.2.
URL i sevicii asociate...................................................................................................4 1.1.3. Protocolul HTTP ............................................................................................................6 1.1.2. Concepte web i concepte universale............................................................................8 1.1.3. Browsere.......................................................................................................................13 1.1.4. Plugin-uri......................................................................................................................14 1.2. Tipuri MIME ...................................................................................................................15 1.3. Document Object Model (DOM) ........................................................................................15 1.3.2. Evenimente DOM ............................................................................................................17 1.3.3. Fluxul evenimentelor........................................................................................................20 1.4. Browser Obiect Model (BOM) ...........................................................................................21 1.5. Formatarea i structurarea documentelor Web....................................................................23 1.5.1. HTML i modelul eveniment .......................................................................................23 1.5.2. Stilizarea cu CSS..........................................................................................................28 1.5.3.Formatarea documentelor HTML .................................................................................30 1.5.4. Interactivitatea cu clientul prin formulare HTML........................................................31 1.5.5. Hiperlegturi i evenimente de navigare......................................................................34 1.5.6. Funcionaliti specifice HTML ...................................................................................36 1.5.7. Extensii dinamice .........................................................................................................38 1.5.8. Dynamic HTML...........................................................................................................40
Capitolul I Standarde, tehnici, concepte Internet i WEB

1.1. Internet i WEB 1.1.1. Concepte de baz
Mediul Internet a fost conceput iniial ca un mediu de comunicare n domeniul militar, a evoluat apoi ntr-un mediu de informare la scar academic, a devenit un mediu de informare pe scar general, s-a extins ca un mediu integrat de divertisment, comunicare i informare, a devenit un spaiu de manevr commercial dar i educaional. Istoria Internetului debuteaz n mileniul trecut iar succesul browserului Mosaic a fost elementul care a declanat, n 1994, migraia dezvoltatorilor de la NCSA ctre Silicon Valley. O parte dintre ei au format o companie cunoscut astzi sub numele Netscape Communications Corporation. Primul browser scos pe pia de Netscape, Netscape Navigator, accepta multe dintre extensiile propuse pentru standardul HTML . Noile componente ale browserului au permis abordarea interactivitii complete multimedia i declanat perioad de cretere exploziv a sistemului Web. Anul 1995 marcheaz multe nceputuri n Web: Microsoft a introdus primele secvene video i primele documente care conineau sunete, Netscape a lansat o nou versiune a browserului Navigator, care accept cadrele (frames), plug-ins i multe alte caracteristici. Gavin Bell,
Anthony Parisi, Mark Pesce sunt doar cteva nume de baz dintre cei care au lucrat la specificaiile 1.0 finale ale limbajului de modelare a realitii virtuale (VRML Virtual Reality Modeling Language). Informaia n Internet a evoluat ncepnd cu transferul de fiiere binare la distan, ulterior n servicii de tip e-mail, apoi a urmat transferul de informaie textual, urmtorul pas a fost trecerea de la text liniar la Hypertext, prin introducerea hiperlegturilor, apoi Hypertextul s-a transformat n Hypermedia odat cu apariia sistemelor de operare cu interfa grafic i a primelor browsere care suportau elemente multimedia. Componentele dimanice au extins paginile Web transformndu-le n aplicaii Web, prin apariia limbajelor scripturale client-side i server-side, apoi a limbajului Java ca soluie obiectual multiplatform ce permite crearea de appleturi i servlei, JSP (Java Server Pages). Ulterior conceptele de business object au impulsionat dezvoltarea aplicaiilor complexe de afaceri, care soluioneaz tranzacii comerciale n medii colaborative. Web-ul asigur metode de comunicare a datelor ntre sisteme eterogene prin implementarea Hypertextului(HT), a protocoalelor de transfer HT i a interpretoarelor HT (browser), continund cu implementarea Hypermedia i modificarea corespunztoare a protocoalelor i browserelor. Arhitectura sistemelor Web pornete de pa paradigma client-server unde Clientul este browser personalizat, cu extensii de dinamism (playere, plug-in-uri), severul asigur gestiunea distribuit, colaborativ i partajat a tranzaciilor, posednd soluii de securitate, agenii reprezentai de servere de pli electronice, biblioteci digitale, servicii de procesare, ageni de cumprare (buyer agents), ageni utilizator, ageni mobili.
1.1.2. URL i sevicii asociate

URL (Uniform Resource Locator) 1 adreseaz unic resurse informaionale stocate n locaiile unei reele iau forma unor iruri de caractere ce permit identificare e transparent utilizatorului datorit interfeei browserelor i au forma: serviciu :// nume-gazd.subdomeniu.domeniu: port / cale-director, unde elementele componente sunt: Tipul resursei (adic protocolul folosit pentru transferul ei prin reea); Numele serverului pe care se afl resursa (opional i portul prin care ea poate fi accesat); Calea resursei (folosit de server pentru a localiza resursa); Parametrii ce se transmit resursei ca ir de caractere; URL-urile sunt case-sensitive i nu pot conine anumite caractere, (spaiile, tab) care se nlocuiesc cu entiti caracter de forma: %codhexazecimal (%20-spaiu, %09-tab, %0A-enter, %25-procent, etc.). Vom tece n resvist cteva forme excepionale de URL: URL-ul de tip IP: serviciu://adresaIP ; acest tip de URL presupune cunoaterea adresei nivelului reea pentru calculatorul resurs; adresa IP fiind mai greu de reinut dect adresa de tip DNS. De fapt, calculatoarele manevreaz URL-uri de tip IP, ns, pentru o adresare mai facil a resurselor n Internet, la nivelul aplicaie funcioneaz protocolul DNS, prin care adreselor IP li se asigneaz nume de domeniu;
Acest capitol a fost elaborate cu colaborarea Dr. Robert Buchmann
URL-ul local: serviciu://localhost/cale ; acest tip de URL se poate folosi pentru accesarea unor resurse locale ale unui calculator gazd; URL-ul relativ are forma unei ci relative de cutare pe disc; aceasta presupune c resursa este un fiier care poate fi localizat urmrind calea relativ, pornind de la directorul-context; astfel de ci sunt vitale pentru proiectarea Web, pentru c asigur flexibilitate la mutarea resurselor folosite de ctre un anumit site Web (fiiere imagine, sunet, video, pagini legate prin hyperlinkuri); n identificarea resurselor se pot folosi i ci absolute, caz n care cutarea se face pornind de la rdcina discului sau rdcina spaiului ntreinut de server (de regul acesta e un director cu numele wwwroot); acest tip de ci este evitat deoarece la fiecare mutare a unei resurse trebuie actualizate toate cile care indic spre resursa respectiv. URL de tip GET, are forma: URLnormal?ir de caractere; URL-ul normal identific un script CGI iar irul de caractere constituie datele de intrare pentru acel script; URL-urile de acest tip sunt generate la transferul datelor dintr-un formular al unei pagini Web, dar pot fi formulate i liber, dac irul de caractere este formulat conform regulilor de formulare a cererilor CGI, prezentate n subcapitolele dedicate formularelor i CGI. FTP este modul n care fiierele sunt transmise i recepionate prin Internet. n mod tipic, utilizatorul are nevoie de un cont pe sistemul aflat la distan. Altfel dispune numai de acces de tip FTP anonim care permite oricrui utilizator s se conecteze la o gazd FTP, utiliznd numele anonymous i adresa sa de pot electronic pe post de parol.Dei majoritatea transferurilor FTP prin programe de navigare Web sunt realizate anonim, URL-urile FTP pot include numele i parola utilizatorului, specifice unui anumit cont. Un port este o frecven particular utilizat pentru transferul unui tip particular de informaii ntre calculatoarele din Internet. Pentru lucrul cu porturile FTP utilizeaz un anumit port n timp ce alte protocoale ( HTTP) utilizeaz un altul. De exemplu, dac o locaie decide s ofere FTP anonim pentru utilizare public, dar folosete portul 494 n loc de portul predefinit pentru FTP, trebuie specificat acest numr de canal n URL, astfel: ftp://nume.com:494/pub URL-ul de mai sus face ca programul de navigare s se conecteze pe canalul 494, s caute severul FTP i apoi s ofere coninutul directorului pub de pe calculatorul respectiv. Cea mai util proprietate a URL-urilor de tip FTP este aceea c, atunci cnd se specific un director, majoritatea programelor de explorare Web listeaz fiierele din acel director i, printr-un simplu clic, se pot transfera fiierele dorite, sau se poate realiza mutarea n alte directoare pentru a continua explorarea. Prin specificarea unui fiier n cadrul URL-ului, programul de explorare se conecteaz la server i transfer fiierul direct pe calculatorul de la care se lucreaz. Gopher este un seviciu popular de informare distribuire a informaiilor, care se bazeaz pe un sistem ierarhizat de meniuri pus n umbr de World Wide Web.Majoritatea URL-urilor de tip Gopher nu difer prea mult de cele de tip FTP. Un URL de tip Gopher are structura: gopher://numele sistemului server Acesta este exemplul cel mai simplu de URL de tip Gopher. El specific serviciul de tip Gopher (gopher:), urmat de numele sistemului server. Dac se dorete utilizarea unui alt port dect cel implicit pentru Gopher, asemeni protocolului FTP, se folosete o sintax de forma: gopher://numele sistemului server:70/1
Astfel, n loc de portul implicit pentru Gopher, locaia specific portul 70 (care oricum este portul predefinit pentru acest serviciu). n sintaxa de mai sus, dup specificaia portului, URL-ul semnaleaz c primul lucru pe care l va vedea utilizatorul este un director, fapt indicat n URL-ul de tip Gopher prin inserarea secvenei : /1 . Pot electronic prin URL sau URL-urile de tip e-mail sunt destul de simple specificnd ntrun URL orice adres de pot electronic, i prefixul mailto: ca nume de serviciu: mailto:adresa Precizm c prin intermediul unui URL se pot trimite mesaje de pot electronic, dar nu se pot recepiona mesaje. Mosaic lanseaz un program separat de pot electronic pentru a gestiona acest tip de serviciu iar Navigator i Explorer gestioneaz pota electronic direct. Grupuri de tiri USENET sunt utilizate cu precauie deoarece trebuie identificat un server de tiri care s permit acces. Dei exist o list a serviciilor de tip Usenet publice, prin care calculatorul gazd ofer tuturor utilizatorilor acces gratuit la grupurile de tiri, numrul celor care permit o conexiune efectiv este foarte mic. Construirea unui URL pentru tiri este simpl tasted news urmat de numele grupului de tiri. Nu sunt nici necesare, i nici permise bare nclinate, i nu exist nc o modalitate standard de specificare a articolelor individuale. HTTP Un URL de tip HTTP se reprezint: http://www.numeserver.com/cale/numefiier.html i conine numele serviciului (HTTP), dou puncte, bara dubl nclinat, numele serverului i calea unde poate fii gsit fiierul. Dac serverul HTTP folosete ca predefinit un port nestandard, acest fapt se poate specifica de exemplu astfel: http://www.numeserver:80/, , portul 80 fiind portul standard pentru protocolul HTTP. Majoritatea URL-urilor ntlnite uzual, sunt ntr-unul din formatele: http, ftp, telnet, gopher, mailto i news descrise anterior [TAYLOR] [NITCHI]. Tehnologia Persistent URL(PURL), permite unui agent care se interpune ntre un grup de resurse i utilizatori s ntrein URL-urile resurselor, astfel nct, dac o resurs se mut sau i schimb domeniul, gazda, calea, utilizatorul s poat folosi n continuare URL-ul vechi, n timp ce agentul PURL se ocup cu asignarea transparent ntre URL-ul folosit de utilizator i noul URL al resursei.
1.1.3. Protocoale
Browser-ele i serverele de Internet folosesc TCP/IP pentru a se conecta la Internet. Browserul folosete TCP/IP pentru a accesa serverele de Internet, iar serverele folosesc TCP/IP pentru a trimite HTML napoi la browser. Programele de e-mail folosesc TCP/IP pentru a se conecta la internet, pentru trimiterea i primirea de e-mail-uri. TCP/IP este o colecie foarte mare format din diferite protocoale de comunicaie, care au la baz cele dou protocoale originale TCP si IP. Vom face o trecere n revist a celor mai cunoscute protocoale [Al-Shaick, 2008]: TCP (Transmission Control Protocol) este folosit pentru transmisia datelor de la o aplicaie la reea. IP (Internet Protocol) se ocup cu comunicaia ntre calculatoare si este responsabil cu trimiterea pachetelor de date prin Internet. HTTP (Hyper Text Transfer Protocol) se ocup cu comunicaia ntre un web server i un browser web. Acesta este folosit pentru a trimite cereri de la un web client (un browser) la un web server, trimind napoi coninut web (pagini web) de la server la client.
HTTPS (Secure HTTP) asigur o comunicaie sigur ntre un web server si un web browser. Protocolul SSL (Secure Sockets Layer) este util la criptarea datelor pentru a asigura o transmisie sigur a acestora. SMTP (Simple Mail Transfer Protocol) este folosit la transmiterea de e-mail-uri. Protocolul MIME (Multi-purpose Internet Mail Extensions) permite SMTP-ului s transmit fiiere multimedia, incluznd date de tip voce, audio si binare prin reele TCP/IP. IMAP (Internet Message Access Protocol) permite stocarea i obinerea e-mail-urilor. POP (Post Office Protocol) este folosit pentru a descarca e-mail-uri de pe un server de e-mail pe un calculator personal. FTP (File Transfer Protocol) asigur transmisia de fiiere ntre calculatoare. NTP (Network Time Protocol) este folosit pentru a sincroniza ceasul ntre calculatoare. DHCP (Dynamic Host Configuration Protocol) este folosit pentru alocarea dinamic a adreselor IP pentru calculatoarele dintr-o reea. SNMP (Simple Network Management Protocol) permite administrarea calculatoarelor dintr-o reea. LDAP (Lightweight Directory Access Protocol) colecteaz informaii despre utilizatori i adrese de e-mail din Internet. ICMP (Internet Control Message Protocol) se ocup cu tratarea erorilor dintr-o reea. ARP (Address Resolution Protocol) este folosit de IP pentru a obine adresa plcii de reea pe baza adresei IP. RARP (Reverse Address Resolution Protocol) este folosit de IP pentru a obine adresa IP pornind de la adresa plcii de reea. BOOTP (Boot Protocol) permite boot-area (pornirea) calculatoarelor din reea. PPTP (Point to Point Tunneling Protocol) stabilete o conexiune (un tunel) ntre reelele private. UDP (User Datagram Protocol) este folosit pentru o comunicaie simpl ntre aplicaii. HTTP este un protocol cerere/rspuns bazat pe serviciile TCP (funcioneaz pe conexiuni TCP create pt. toat durata operaiei), folosit la transferul informaiei Hypertext/Hypermedia ntre client i server. Are i rolul de a traduce pe ct posibil formatul n care serverul stocheaz informaia n formatul recunoscut de browserul ce lanseaz o cerere HTTP (transfer nonASCII). O cerere HTTP conine URLul resursei i metoda de transfer (GET, folosit la adugri la o resurs sau POST, folosit la transmiterea de resurse complete). La iniierea transferului, HTTP verific metainformaii (informaii despre resurs) stocate n antetele resurselor. Aceste metainformaii indic formatul resursei transferate, avnd n vedere c HTTP poate transfera, spre deosebire de mailul clasic, i resurse nonASCII, cu diverse nivele de structurare. Aceste structuri de date, formate acceptate de HTTP, sunt tipurile MIME. Legat de erori, s-a convenit ca HTTP s ignore metainformaia sau parametrii nerecunoscui, ceea ce a dus la testarea a numeroase idei i evoluia controlat a HTTP. Serverele HTTPD sunt serverele ce conin informaie transferabil prin HTTP, adic servere Web pe care doritorii public resurse. Aceste servere poart responsibilitatea securitii, disponibilitii i fiabilitii resurselor, deci ntreinerea lor este esenial pentru accesibilitatea informaiei. Exist o varietate de servere, att ca i platform, ct i ca soft-server folosit. Alegerea unui server pentru o aplicaie Web trebuie s aib n vedere: elementele de securitate; robusteea la cderi; capacitatea de a gestiona ct mai multe cereri simultan. Negocieri HTTP n cererea HTTP, browserul specific lista formatelor pe care le poate accepta. Formatele respective se refer att la tipuri de fiiere(GIF,JPG pt imagini etc.), ct i la formate
de nivel nalt (ce indic i formatul de transfer) ale diferitelor tipuri de fiiere (formatele MIME ce indic tipul de informaie i formatul: text/html). Serverul va rspunde ntr-unul din formatele din list. Aceast negociere este intermediat de HTTP i se bazeaz pe ideea c exist formate acceptate att de client ct i de server. Dac nu, se ncearc o traducere ntr-un format accesibil de ctre client, sau se produce un transfer binar de fiiere, urmnd ca clientul s gseasc o metod de accesare a lor. HTML i HTTP HTML este limbajul de definire a Hypertextului i provine dintr-un limbaj de marcare mai complex, SGML. Hypertextul creat cu HTML i conine instruciunile de formatare a coninutului i a linkurilor. El poate fi folosit direct prin editoare ASCII sau poate fi generat de programe WYSIWYG. Exist i aplicaii ce convertesc Hypertext creat prin alte metode, n HTML (un exemplu de Hypertext nonHTML sunt help-urile). Codul HTML poate fi vzut cu ajutorul browserelor, prin opiunea View Source, ceea ce ofer o metod uoar de creare a unor fiiere prin modificarea altor fiiere. Limbajul este n continu evoluie, dar este supus i competiiei browserelor care ngreuneaz standardizarea. Nu exist o determinare strict ntre Hypertext, HTML, servere httpd i HTTP: exist i Hypertext nonHTML, exist i Hypertext transferabil prin protocoalele de mail, news. Deasemenea, HTTP e capabil s transfere i alte tipuri de fiiere dect HTML. Serverele HTTPD stocheaz i scripturi CGI prin care se genereaz HTML interpretabil n browser.
1.1.2. Concepte web i concepte universale

Vom ncerca s definim cteva noiuni eseniale n utilizarea instrumentelor de dezvoltare a aplicaiilor Web, pornind de la premiza c informaia multimedia este accesibil global, prin legturi ntre documente iar interfa comun este data de aplicaii ce manipuleaz orice tip de informaie nglobat n documentele hypermedia. File manager Un manager de fiiere (file manager sau browser file) este un program ce furnizeaz o interfa utilizator de manipulare a fiierelor system, facilitnd interaciunea cu fiierele prin operaii uzuale asupra acestora: creare, deschidere, editare, vizualizare (view), tiprire (print), rulare (play), redenumire, mutare, copiere, tregere, setare de atribute, proprieti, cutare/regsire search/find, setare de drepturi (permissions). In mod normal fiierele dunt afiate n structura ierarhic iar managerul de fiier poate conine caracteristici inspirate din browsere web, butoane de navigare forward i back. Unele browsere furnizeaz conectivitate reea via FTP, NFS sau SMB, permind utilizatorului explorarea serverelor i accesarea sistemului de fiiere de pe server remote n mod similar cu accesarea sistemului de fiiere local, sau furniznd propria implementare full client pentru protocoale ale serverului. Software agent este o abstractizare din tiina calculatoarelor, un model logic ce descrie acele software ce permi utilizatorului sau altor programe stabilirea unor relaii tip agenie. Idea de baz este c agenii nu sunt invocai strict pentru un task, ci se activeaz reciproc. Un concept derivat agenii inteligeni 2 (derivai din Inteligena Artificial, specializai pe nvare i raionament, Chyi-Ren Dow, Chi-Ming Lin, and Chen-Ming Lin, Network Agent Application, Mobile Computing Laboratory, Dept. of IECS, Feng Chia University, Taiwan, R. O. C., 2005.
2
ageni autonomi ( autonomous) capabili s modifice modul n care achiziioneaz obiectivele, ageni distribuii (distributed) ce sunt rulai pe maini fizic distincte, sisteme multiagent (multiagent sistem) ageni distribuii ce nu au capabilit de achiziie a obiectivelor dect prin comunicare, i ageni mobili (mobile) care i pot reloca execuia lor pe diferite procesoare. Exemple curente de ageni inteligeni includ unele filtre spam, jocuri bots, unelte de monitorizare a serverului, motoarele de cutare (Search engine), agenii utilizator (User agent) sunt folosii la navigarea pe World Wide Web (browserele) iar un exemplu banal de agent de transfer mail (Mail transfer agent) ce deservete email-ul, este Microsoft Outlook deoarece comunic prin POP3 server cu toi utilizatorii ce neleg protocoale de comand POP3, posed reguli setate ce filtreaz email-ul pentru utilizatori. Exemplele pot continua cu agentul SNMP, daemons din sisteme Unix-like unde pe servere, httpd este un daemon HTTP ce implementeaz HyperText Transfer Protocol la rdcina World Wide Web, Crowd simulation pentru planificarea 3D n grafica asiatat de calculator (computer graphics). Managementul agenilor a determiant dezvoltarea conceptelor i limbajelor specifice: DAML - Defence Agent Markup Language, ontologii Web Ontology Language (OWL)[Chyi_2005], [Padgham_2004]. Single document interface Inkscape utilizeaz SDIIn interfee grafice utilizator a interfaa unic document (single document interfa SDI) este metoda de organizare a aplicaiei de interfa grafic utilizator n ferestre individuale pe care sistemul de operare i managerul ferestrelor le manipuleaz separat. O fereastr nu are o alt fereastr background sau printe (parent) ce conine meniu sau toolbar ci fiecare fereastr are propriul menu sau toolbar. Aplicaiile ce permit editarea mai multor documente simultan,procesoarele de texte, dau impresia c sunt deschise mai multe instane de aplicaie. De obicei fiecare fereastr afieaz intrri individual n sistemele de operare, vizibile n task bar sau manager. Unele aplicaii task manager nsumeaz ferestrele n aceeai aplicaie. De pild Mac OS X utilizeaz caracteristica denumit Expos ce permite utilizatorului s vad temporar toate ferestrele ce aparin aplicaiei particulare. Tabbed document interface Din categoria interfeelor grafice utilizator graphical utilizator interfas, o interfa tabbed document interfa (TDI) este cea care permite ca o singur fereastr s conin documente multiple, utiliznd tabs ca instrument de navigarentre acestea. Aceast stil de interfa este uzual associat cu web browsers, apliacii web, editoare de texte. [edit] History Versiunea NeWS a editorului de texte Gosling Emacs a fost primul produs comercial ce utiliza ferestre multiple tab n 1988, dezvolat ca authoring tool pentru browser HyperTIES al lui Ben Shneiderman 3 's ), in 1988. HyperTIES suport pie menus iar BookLink Technologies utilizeaz ferestre multiple tab n browserul InternetWorks n 1994. Opera dezvolt browser MDI pe care l lanseaz public n 1996. Abordarea interfa tab este urmat de Internet Explorer shell NetCaptor n 1997, IBrowse n 1999, Opera n 2000 (versiunea 4), Mozilla n 2001, Konqueror 3.1 i Safari n 2003, in 2003. Din 2006, majoritatea browserelor grafice web suport interfa tab. Un avantaj al interfeei TDI este c manipuleaza diferite documente situate logic sub o fereastr, n multiplelor ferestre fiu, altul este dat de setul de documente legate ce pot fi groupate fiecare n Padgham, L. & Winikoff, M. Developing Intelligent Agent Systems (2004) John Wiley & Sons, ISBN 0-470-86120-7
3
NeWS workstation version of The Interactive Encyclopedia System, 1988
alte ferestre. Web browserele tabulare permit utilizatorilor s salveze propria sesiune browsing i s se rentoarc ulterior. TDI versus SDI i MDI Dezavantajele TDI provin de la faptul c nu permit vederi multiple a ferestrei i apar probleme de manipulare a tab-urilor multiple simultane. Cnd fereastra primete tab pe un numr ce depete rezoluia disponibil a monitorului apar inconveniente la fel ca i la SDI. Utilizatorii de SDI, confund MDI cu ferestre ce pot fi ascunse n spatele altor ferestre. Unele aplicaii MDI pierd taskbar sau meniu pengtru a permite acces rapid la toate ferestrele, n unelem cazuri o fereastr poate fi gsit doar nchiznd altele dar la aplicaiile TDI majoritatea tab-urilor sun visibile i accesibile direct. Ferestrele TDI trebuie maximizate din interiorul ferestrei printe i ca resultat dou taburi nu pot fi visibile n acelai timp, ceea ce duce la ngreunarea operaiilor de comparare de documente sau operaii copy&paste. Interfeele full MDI permit aranjarea ferestrelor fii i nu au aceste limitri. O aplicaie ce permite TDI sau MDI este browserul Opera care are TDI implicit dar suport full MDI i poate rula ca aplicaie SDI. Pentru a soluiona aceste probleme i pentru a dezvolta medii integrate versionile XEmac i Microsoft Visual Studio, furnizeaz interfat hibrid ce permite desprirea ferestrei printe n MDI multiple fiecare cu TDI tab set separat. Ion window manager are funcionalitate similar pe ntregul desktop iar Konqueror 4 browser este un alt exemplu (also supports multiple TDI splits within the main window. Multiple document interface Multiple Document Interface (MDI) a fost implementarea n Windows adus de Adobe Photoshop i este specific aplicaiilor grafice unse toate feerstrele sunt regsite ntr-o fereastr printe (parent) (cu excepia ferestrei modale), n comparaie cu SDI unde toate ferestrele sunt separate. In genera SDI este privit ca util utilizatorilor care manipuleaz mai multe aplicaii, firmele utilizeaz ambele interfee cu rsponscombinat. Spre exemplu, a modificat aplicaiile Office de la SDI la MDI apoi napoi la SDI. Dezavantaul MDI cel mai des reclamat este c pierde informaia despre ferestrele deschise current, n loc s vad o list de ferestre sdeschise n aplicaii MDI utilizator selecteaz un menu specific (window list) disponibil la toate, spre deosebire de aplicaia SDI, unde task manager afieaz ferestre deschise curent. In ultimii ani sau adugat task-bar i tabs pentru a arta ferestrele deschide n aplicaia MDI. Java GUI toolkit, Swing, furnizeaz class javax.swing.JDesktopPane ce devine container pentru cadre individuale - frames (class javax.swing.JInternalFrame). Nu se poate afirma c exist un standard sau o tendin n aceste dezvoltri. Astfel Internet Explorer 6 este aplicaie tipic SDI, Visual Studio 6: implementare modern de MDI, Visual Studio .NET: MDI sau TDI cu meniu "Window" menu, Firefox: TDI, Opera: MDI combinat cu TDI, Adobe Photoshop, Adobe Acrobat: MDI pn la 7.0. (numai la Microsoft Windows), Notepad++: TDI. Macromedia Studio folosete interfa hibrid, cnd ferestrele document sunt maximizate prezint TDI, iar la ferestre ne-maximizate MDI, Corel Wordperfect: MDI, dei permite utilizatorului s deschid multiple instane de WP la un singurdocument iar versiunea X3 furnizeaz o variant de TDI. IDE-style interface
4
disiponibil pe K Desktop Environment sau Unix, Linux
Interfa IDE-style n RSS Bandit. Aplicaiile specifice de grafic ce posed interfa IDE-style (IDE) sunt cele n care ferestrele fiu sun azate ntr-o singur fereastr printe (cu excepia ferestrei modale). Interfa IDE-style face distincie fa de MDI deoarece toate child ferestrele fiu din IDE-style interfa sunt manipulate prin funcionalitate adugat nu cea normal disponibil n aplicaii MDI. Din acest motiv aplicaiile IDE-style sunt considerate superset funcional i descendent al aplicaii MDI.Exemplele ce extind funcionalitatea la ferestrele fiu sunt: Dockable ferestrele fiu, ferestrele fiu colapsabile, interfa tabular pentru sub-panouri, sub-panouri independente ale ferestrei printe, despritori GUI (splitters) de redimensionare a sub-panouri independente ale ferestrei printe, persisten pentru aranjarea ferestrelor. Ferestre printe colapsablile din aplicaii IDE-style sunt definite fie cnd sunt inactive fie la cererea utilizatorului. Ferestra printe care au colapsat se vor confirma conform unuia din cele patru margini ale ferestrei printe, ntr-un tip de etichet sau indicator ce le va permite expandarea ulterioar. Interfaa tabuar pentru sub-panouri pus la dispoziie de IDE-style permite organizarea mai multor subpanouri ale ferestrei printe, n contrast cu aplicaiile MDI ce permit usual o singur interfa tabular la ferestrele printe. Exemple de aplicaii IDE-style: Eclipse, Visual Studio 6, Visual Studio .NET, RSS Bandit, JEdit Virtual Studio Technology (VST) se refer la o interfa standard de conectare a audio sintetizatoarelor i a plugin-urilor de efecte la editorii audio i recording sistemele de nregistrare hard-disk. VST i tehnologiile similare permit nlocuirea nregistrrilor traditionale din studio cu componente hardware i software. Din sutele de plugin-uri existente, s-a creat o architectur plugin pentru componentele audio, tehnologia VST fiind liceniat free de creatorul ei Steinberg 5 . VST plug-ins sunt module software ce pot accesa instrumente real-time sau effecte. Tehnologiile competitive includ LADSPA i DSSI pentru Linux, Apple Computer's Audio Units, Microsoft's DirectX, Digidesign's AudioSuite, Real Time AudioSuite, and TDM. VST instrument ( VSTi) este un tip de VST plug-in utilizat n general la sintesiza sunetului sau pentru mostrele audio play-back. Instruments VST includ dispozotive de sintetizare virtuale i mostre de dispozitive putnd rula real-time cnd sunt accesate de configuraii software i hardware corespunztoare. Primul instrument VST a fost Neon VSTi, includes de Steinberg n Cubase. Multe instrumente VST sunt emulate software avnd opiuni "look and feel" i permind utilizatorilor creare de sunete unice cu componenta virtual "legendary music gear", n care componentele hardware "real world" sunt limitate. Un VST effect este un tip de plug-in VST utilizat la procesare audio, cu efecte ce include procesoare de reverberaii sau efecte de faz. Examplele de VST effect plugins includ NewBlueFX, proiectat de architecturile Microsoft's DirectMusic i DirectSound. VST Effects pot fi utilizate real-time cu configuraii software i hardware corespunztoare: sound card ce suport ASIO, software Windows care ncetinete maina audio engine i d laten, modern Macintosh . Un VST host este o aplicaie software sau hardware de dispozitiv, ce permite utilizarea plug-in VST context logic, interacionnd cu digital audio i elemente MIDI. Examplele pornesc de la aplicaii comerciale: Steinberg, Cubase, FL Studio, Orion, Cakewalk's Sonar, Steinberg WaveLab, Nuendo, MixMeister Fusion & Studio 7, Ableton Live, Acoustica Mixcraft and
5
Steinberg Firma de software company ce a dezvoltat standard VST, VST SDK Downloads
Beatcraft, TC Spark, Bias Deck, and Bias Peak, Adobe Audition 2, shareware ca MiniHost, opensource cu proprietar Rosegarden, Audacity, ModPlug, and Ardour. Limbajele de programare pornesc de la VST SDK propus de Steinberg ca set de clase C++ ce pot fi downloadate de pe website, versiunea Delphi a lui Frederic Vanmol, versiunea a JAVA a proiectului jVSTwRapper la sourceforge.net, versiunea .Net - Noise. Single page application O single page application (SPA) este o aplicaie web ce ruleaz integral pe browser web al clientului, utiliznd o combinaie de HTML, JavaScript, i CSS. Aplicaia modific propria pagin la nivelul structurii datelor din arborelui DOM, realiznd modificri persistente cnd utilizatorul invoc browserului opiuea Save Page, comanda de salvare a modificrilor unei pagini web pe disk. La fel ca i DHTML, LAMP, sau Ajax, SPA nu este is not a tehnologie propriu zis ci un termen ce refer un grup de tehnologii. Rich Internet Application Rich Internet Application (RIA) sunt aplicaii web care posed caracteristici i functionalitatea aplicaiilor tradiionale desktop. RIA transfer tipic procesarea neces ctre interfaa utilizator a clientului web dar menine starea programului, data, n spatele aplicaiei server. RIA tipic are caracteristicile: Ruleaz n web browser, nu solicit instalare de software 6 Ruleaz local n mediu sigur denumit sandbox Pot fi ocazional conectate, regsite n sau nafara hot-spot-urilor dintr-un office la altul. Termenul RIA s-a introdus n martie 2002 de Macromedia, conceptual fiind accespat n urm cu civa ani ca: Remote Scripting, de Microsoft, 1998, X Internet, de Forrester Research n 2000, Rich (Web) clients. Intelligent document este un termen general ce descrie documentele web cu functionalitate mrit fa de paginile proiectare spre tiprire. Formatele acestora includ PDF din Adobe, InfoPath din Microsoft, i XForms din standard W3C, fiecare fiind structurate pe baza format XML pentru date. Documentele inteligente au caracteristica esenial interactivitatea electronic i include formulare ce sunt modificate la cerere, pagini web personalizate, prezentri personalizate, solicitnd n mod normal acces web i software server. In domeniul economic ele sunt utilizate ca instrument de automatizare a proceselor de business, imbuntind serviciile clienilor i reducnd costurile, n companii de marketing pentru a fideliza clar clieii. Programnd documente de marketing inteligente cu date personalizate pentru clienii, apare o cretere a loialitii, a ratei de rspuns, se reduc costurile de marketing, se poate obine/construi chiar o recunoatere a brand-ului.[Trippe_2003] Pornind de la aceste concepte vom ncerca s utilizm tehnici i tehnologii de manipulare a a elementelor hypermedia care s ne permit dezvoltarea aplicaiilor de afaceri pornind de la Single page application, abordnd Rich Internet application dezvoltdu-le apoi pe paradigma client-server spre aplicaii de business cu valene dinamice. Nu vom trata n detaliu problematica dezvoltrii aplicaiilor distribuite n medii colaborative datorit complexitii tehnicilor i tehnologiilor de realizare a acestora.
Sandbox=groapa de nisip
1.1.3. Browsere
Un browser este un program de navigare, un agent sau o aplicaie client (ce ruleaz pe calculatorul utilizatorului), i poate citi i explora documente resurse Web. Browserele sunt disponibile pentru majoritatea sistemelor de operare oferind o soluie de accesare ca o fereastr spre Web, fiecare browser oferind propira vedere asupra sistemului. Primele browsere Web erau textuale (browserul Lynx), apoi au aprut browserele care permit i vizualizarea imaginilor browserul NCSA Mosaic iar cele care permit att vizualizarea imaginilor ct i a textului, formeaz generaia a doua de browsere. A treia generaie de browsere transform mediul Web ntr-un mediu vizual rivalizd cu televiziunea, din punctul de vedere al coninutului informaional i al posibilitilor de divertisment. Ele permit vizualizare de text, imagini, sunete i animaie, i folosesc o interfa grafic ce permite vizualizarea i navigarea n paginile web. Cele mai populare sunt: Internet Explorer i Netscape Navigator, apoi Opera. Funciile de baz ale unui Web browser: S trimit informaii spre web server n format propriu Internet i WWW. S primeasc informaii trimise de web server sau s trimit meseje de eroare ctre utilizatori. S afieze informaii n modul n care se pstreaz indicaiile de proiectare incluse n antetul documentului original. S furnizeze utilizatorilor un mod (cale) de a salva documentele ce sosesc ca cereri web. S furnizeze utilizatorilor un mod (cale) de a nmagazina semnele de carte (bookmarks) sau hotlist entries ale locaiilor ce pot fi vizitate din nou. S in un istoric al articolelor legate ce au fost selectate i s permit utilizatorilor reactivarea ultimei intrri. S fieze posibilele legturi ntr-un mod clar i s citeasc aciunile utilizatorilor la selecia acestora, trimind informaiile bazate pe aceste legturi. S asigure un management al memoriei care s permit minimizarea timpului de ncrcare (downloading time). Spre exemplu, memornd temporar documentele anterior solicitate ntr-o zon de memorie cache ele pot fi uor ncrcate la o nou cerere. Browserele performante asigur n plus alte funcii ce le permit: Afiarea imaginilor inline, a fiierelor audio i video. Apelul unor programe ajuttoare (help-ere, plug-ins) pentru a afia tipuri de informaie ce nu fac parte intrinsec din Web (sunete, imagini de anumite formate, video, digital etc). S permit utilizatorilor s i configureze mediul de calcul prin: selecia tipului de font, convenii de dimensiuni, postponing la ncrcarea imaginilor, care conduc la creterea vitezei de download. Interpretarea evenimentului n hri de imagini interactive pentru a trimite locaia selectat de utilizator ctre server n formatul adecvat care s permit serverului gestionarea rspunsului pe baza imaginiis selectate. S asigure afiarea corect pe ecran (fill-in-form), care permite utilizarea corect a butoanelor de selecie, boxelor de dialog i tiprirea rspunsului n aceste obiecte. S gestioneze trimiterea corect ctre server a informaiilor furnizate de utilizator n formatul care s asigure gestionarea rspunsului. Furnizarea unui acces rapid la utilizarea unor servicii frecvente Web (indecsi, homepagin, back etc)
Furnizarea unei comunicaii sigure prin funcii de ncriptare i decriptare a informaiilor trimise sau recepionate Utilizarea TDI, SDI, MDI sau a interfeelor grafice hibride n interaciune cu clientul Suport protocoale de securizare Interacioneaz cu ali ageni.
1.1.4. Plugin-uri
Plugin-uri difer prin extensii, ce modfic adaug sau extind funcionaliti dar diferena major este c un plugin rezid n general aplicaa principal din interfaa utilizator i are limitri bine definite a posibilului set de aciuni. Extensiile generale au cteva restricii ale actionilor lor, i pot furniza propria interfa utilizator. Uneori sunt utilizate pentru a scdea dimensiunea aplicaiei principale i ofer funcii optionale. Astfel Mozilla Firefox utilizeaz sistem de extensii bine dezvoltat care reduce dimensiunea aplicaiei Mozilla Aplicaie Suite. Uneori ne gndim la aplicatiile software helper-apps ce includeau funcii plugin (HyperCard i QuarkXPress pe Macintosh), abandonate n 1987. In 1988, Silicon Beach Software include functionalitate plugin n Digital Darkroom i SuperPaint, termenul de plug-in fiind definit de Ed Bomke. In prezent Currently, plugin-urile au implementare are tipic biblioteci (shared libraries) ce trebuie instalate n locul precizat de aplicaia principal. HyperCard suport faciliti similar , dar a fost mult mai uor s se include codul plugin n documente HyperCard (numite stacks). Astfel HyperCard stack devine o aplicaie cu propriile drepturi ce poate fi distribuit ca entitate unic ce este rulat de utilizator fr a avea nevoie de pai aditionali de instalare. Necesitatea atragerii unei audiene ct mai largi pe site-urile proiectate i-a mpins pe proiectani s realizeze noi nivele de interactivitate i dinamism. S-au creat noi formate de fiiere i a aprut nevoia rulrii lor n mediul Web. Plug-in-urile au fost soluia ideal, astfel c astzi exist site-uri ntregi ce pun la dispoziie aceste instrumente. [KRISHNA][REYNOLDS] Printre cele mai importante plug-inuri se pot enumera: Play-erele de sunet (www.realaudio.com) cititoarele documente inteligente, cel mai polular fiind Adobe Acrobat (www.adobe.com) ce permite realizarea de documente stratificate, cu elemente media n fiiere PDF, ce pot fi publicate pe Web play-erele Hypermedia: bazate pe tehnologia Shockwave sau Flash 7 (www.adobe.com), ce permit realizarea i vizualizarea de animaii interactive cu sunet, ntr-un format de eficien maxim din punct de vedere al dimensiunii i al vitezei de rulare, ceea ce le face ideale pentru prezentrile Web view-erele 3D: interpreteaz limbajul de modelare a realitii virtuale, pentru afiarea de imagini 3D n rezoluii diverse, cu efecte de umbrire i lumin . (www.vrealm.com) Plug-in-uri real time destinate elemenelor video i audio profesionale ( VST plug-ins, VST effect, VST host) Browserul conine instrumentele necesare rulrii unor tipuri de fiiere complexe extinznd dinamismul i funionalitatea aplicaiilor iar Java Script i ECMA a introdus subobiecte ale obiectului navigator, cu proprieti ce refer plug-in-urile existente. Verificnd o simpl opiune
7
Tehnologie dezvoltat i implementat de Macromedia, care n prezent a fuzionat cu Adobe
din meniul browserului se pot determina plug-in-urile disponibile pentru versiunea respectiv de browser i se pot downloada cele necesare dezvotrii sau rulrii aplicaiei pe maina clientului 8 . De asemenea,. Interfeele de programare a aplicaiilor (API) furnizeaz interfa standard, ce permite unei tere pri s creeze pluginuri care interacioneaz cu aplicaia principal. O interfa API stabile permite plugin-urilor tere s funcioneze ca i versiunea original, modificnd i extinznd ciclul de via al aplicaiilor. In present API plugin ca i Adobe Photoshop i After Effects au devenit un standard adoptat de unele extensii de aplicaii iar alt example este APIs inclus n Audio Units and VST. Multe din pachetele software profesionale ofer APIs plugin pentru dezvoltare, cu scopul de a crete utilitatea produsului de baz, cum sunt: Eclipse, GStreamer multimedia pipe handler, jEdit Program Editor, Quintessential Media Player, Winamp, foobar2000 i XMMS, Notepad++ , pachetul de analiz OmniPeek, VST Audio Plugin Format.
1.2. Tipuri MIME

MIME (Multi-purpose Internet Mail Extensions) reprezint sistemul de identificare a tipurilor, creat cu scopul de a servi aplicaiilor e-mail, care manipulau diverse tipuri de fiiere i a devenit un mod standard de tratare a tipurilor diferite de pe Internet. MIME utilizeaz orice format de fiiere existent: texte, imagini, sunete, arhive, scripturi, appleturi, servlei etc. Majoritatea softurilor i plug-in-urilor de pe Internet depind de tipul MIME, care ofer informaii despre fiierele ncrcate i softul asociat acestora (type/mime) Prima parte (type) indic domeniul de utilizare al fiierului: video, audio, text, imagine, aplicaii etc. iar (mime) refer subtipul specific, prefixul x- preciznd faptul c tipul este propus ca standard pentru alte tipuri asemntoare. Un plug-in este folosit de mai multe tipuri MIME [REYNOLDS]. Spre exemplu,banalele fiiere HTML au asociat tipul text/html, filmele AVI au asociat tipul video /x-msvideo, fiiererele Shockwave sau Flash au asociat tipul application/ Shockwave-Flash, fiierele audio au asociat tipul audio/x-realaudio. Browserul asociaz fiecrui tip MIME un plug-in sau o aplicaie software capabil s ruleze fiierele respective. La ntlnirea fiierelor pe Web, o instan a plug-inului este ncrcat n memorie i lansat iar plug-inul poate rula n cadrul paginii, ntr-o fereastr proprie sau n background, dac nu manipuleaz fiiere de imagini, video sau documente inteligente. In ce privesc tipurile de baz: image (cu subtipurile jpeg , gif, tiff,), video (mpeg, quicktime), audio (midi, au, etc.), text (text, richtext, sgml, etc.) sau componente scriptuale (scripturi sau applications) vom trata particularitile n capitolele urmtoare.
1.3. Document Object Model (DOM)

1.3.1. DOM i HTML Conform definiiei date de W3C 9 , "Document Obiect Model este platforma i interfaa neutr a limbajului - ce permite programelor i scripturilor s acceseze n mod dynamic i s actualizeze
Utilizm termenul generic deja consacrat de maina clientului care definete un calculator cu configuraie bine precizat avnd un sstem de operare oarecare i posednd diverse componente software. 9 www.w3.org/standards
coninutul, structura i stilul documentelor." Practic DOM descrie relaiile dintre elementele HTML dintr-un document cu obiectul document nsui. DOM este descris cu metafora arborelui (figura 1.1.), conform W3CDOM 10 unde documentul
Document Element Element <html> html
Element <head> Element <Title> Text titlu site Atribute <href> Element <a>
Element <body> Element <h1> Text header 1
Text legatura Figura 1.1. DOM HTML 11
Menionm cteva metode HTML DOM comune:

getElementById(id) d nodul (element) cu id specificat appendChild(node) insereaz un nod fiu (child element) removeChild(node) terge un nod fiu (element)
i cteva proprieti HTML DOM comune:

innerHTML valoarea text a unui nod (element) parentNode nod printe a unui nod (element) childNodes nod fiu al unui nod (element) attributes - the attributes nodes of a node (element)
HTML este trunchiul arborelui iar <Head> respectiv <body> sunt ramificaiile principale. Conform figurii, relaia dintre noduri este cea de printe-fiu, nodurile finale reprexentnd nodurile frunz. W3CDOM divide documentul n patru ramuri (noduri): DOCUMENT_NODE abiliteaz acces la obiecte legate direct de document (nivelul de ansamblu) ELEMENT_NODE - conine referine la toate tagurile din cocumentul HTML TEXT_NODE - descrie coninutul blocului text din interiorul tagurilor COMMENT_NODE - reprezint comentarii din HTML i irurile text
10 11
W3CDOM Standard multimedia elaborat de World 3 Consortium; detalii la adresa: www.w3c.org Adaptare dup: http://www.w3schools.com/htmldom/
DOM utilizeaz sintaxa care pornete de la cel mai general obiect ctre cel specific. Spre exemplu: var text1=document.form.textboxName.value nivelul 0 1 2 proprietate valoare
DOM are proprietile referite de ctre majoritatea limbajelor descriptive sau mediilor de programare obiectual: nodeType* valabil pentru toate nodurie, ntoarce nodul din selecia curent; parentNode* valabil pentru toate nodurie, ntoarce nodul printe al tagului; childNode* valabil pentru toate nodurie, ntoarce nodul fiu al tagului, ca tablou (array); parentWindow* valabil pentru DOCUMENT_NODE, ntoarce ir ca nume al ferestrei printe; documentElements* valabil pentru DOCUMENT_NODE, corespunde tagurilor HTML; body* valabil pentru DOCUMENT_NODE, corespunde tagurilor <body>; URL* valabil pentru DOCUMENT_NODE, corespunde URL; tagName* pentru ELEMENT_NODE, este numele tagului HTML; atrName* pentru ELEMENT_NODE, este numele atributului HTML; innerHTML i outter HTML corespund tagului interior respectiv exterior Exemplu: <p><b> Numele</b></p> <p>innerHTML <b> outter HTML data valabil la TEXT_NODE i COMMENT_NODE d un ir cu textul specificat.
1.3.2. Evenimente DOM

Evenimente DOM permit limbajelor ce manipuleaz evenimente (JavaScript, JScript, ECMAScript, VBScript sau Java) s nregistreze diverse manipulatoare de evenimente (Eveniment handlers/listeners) n nodurile element nodes din interiorul unui arbore DOM, spre exemplu n documente ca HTML, XHTML, XUL i SVG. La fel ca i DOM, modele Eveniment (Event model )sunt utilizate pe diferite web browsere ce au diferene semnificative, ceea ce determin probleme de incompatibilitate, motiv pentru care Event model a fost standardizat de W3C 12 n DOM Level 2. In acest standard s-au grupat evenimentele pe criterii: evenimente comune(W3C event) evenimente HTML, evenimente ce pot fi generate de majoritatea nodurilor element: Mouse, Tastatur (Keyboard), obiecte sau cadre HTML (frame/obiect), formulare HTML (form), ale interfeei utilizator (User interface) evenimente de notificare a modificrilor structurii unui document (Mutation ) Evenimentele nu sunt clasification n acelai mod cu clasificarea W3C 13 .
12
www.w3c.org
13
The Mozilla Organization. (2002). DOM Event Reference. Retrieved February 20, 2005. www.w3c.org Document Object Model (DOM) Level 3 Events Working Draft Categories: W3C standards | Application programming interfaces
Categorie
Mouse
Tastatur
HTML frame/ obiect
HTML form
Descriere Apare cnd cu butonul mouse-ului se d click pe un element. Click este definit ca mousedown i mouseup Click Onclick peste aceeai locaie ecran, cu secvena: mousedown mouseup, click Apare cnd cu butonul mouse-ului se d double Dblclick Ondblclick clicked peste un element. Apare cnd butonul mouse-ului este apsat peste un Mousedown onmousedown element. Mouseup onmouseup Apare cnd butonul mouse-ului eliberat Apare cnd butonul mouse-ului se mut ntr-un mouseover onmouseover element. Apare cnd butonul mouse-ului se mut n timp ce se mousemove onmousemove afl peste unelement. Apare cnd butonul mouse-ului se mut nafara mouseout onmouseout elementului. Apare n mod similar cu "clicked" la tastatura. Keypress este definite ca i keydown i keyup pe keypress onkeypress aceeai tast, cu secvena de evenimente: keydown, keyup, keypress keydown onkeydown Apare cnd o cheie de pe tastatur este apsat. keyup Onkeyup Apare cnd o cheie de pe tastatur este eliberat. Apare cnd se termin ncrcarea ntregului coninut load Onload dintr-un document, incluznd fereasta, frame, obiect sau imagine. Apare cnd ntreg coninutul dintr-o fereast sau unload Onunload frame este eliberat. Apare cnd un obiect/imagine ncrcat este oprit abort Onabort nainte de fi complet ncrcat. Apare cnd un obiect/imagine/frame nu poate fi error Onerror complet/corespunztor ncrcat. Apare cnd un document vizualizat este resize Onresize redimensionat. scroll Onscroll Apare cnd se defileaz ntr-un document vizualizat. Apare cnd un utilizator selects some text in a text select Onselect field, including input and textarea. Apare cnda control loses the input focus and its change Onchange value has been modified since gaining focus, including input, select and textarea.
Tip
Atribute
Categorie
Tip submit reset
Interfaa utilizator (User interface)
Mutation
Descriere Apare cnd un formular este trimis (submitted). Apare cnd un formular este anulat (reset). Apare cnd un element este focalizat via mouse, focus Onfocus navigare cu tab, incluznd label, input, select, textarea, i button. Apare cnd un element pierde controlul via mouse, blur Onblur navigare cu tab, incluznd label, input, select, textarea, i button. Similar cu HTML focus, poate fi aplicat doar la DOMFocus ondomfocusin elemente focalizabile poate fi aplicat doar la elemente In focalizabile . DOMFocus Similar cu HTML blur, poate fi aplicat doar la ondomfocusout Out elemente focalizabile . DOMActiva Similar cu XUL eveniment comand i apare cnd un ondomactivate te element este activated (cu mouse click sau tastatura). DOMSubar onsubarboremo Apare cnd un subarbore este modificat. boreModifie dified d DOMNodeI onnodeinserted Apare cnd un nod a fost adugat ca fiu al altui nod. nserted NodeInserte onnodeinsertedi Apare cnd un nod este inserat n document. dIntoDocu ntodocument ment DOMAttrM onattrmodified Apare cnd un attribute a fost modificat. odified DOMChara oncharacterdata Apare cnd o dat caracter a fost modificat. cterDataMo modified dified Tabelul 1. Categorii de evenimente i manipularea acestora
Atribute Onsubmit Onreset
Evenimente prefixate de DOM 14 nu sunt acceptate de toate browserele. Astfel Mozilla i Opera suport DOMAttrModified, DOMNodeInserted, DOMNodeRemoved i DOMCharacterDataModified iar Safari versiunea 1.3 le suport pe toate. Evenimente adugate de Microsoft pot fi utilizate doar n Internet Explorer, sunt cunoscute ca Microsoft-specific events i au dou categorii majore: evenimente Clipboard i de legtur (Data binding). Pentru Mozilla i Opera 9 apare un eveniment nedocumentat DOMContentLoaded, activat cnd coninutul DOM este ncrcat i diferit de load care este legat de ncrcarea fiierelor de legtur.
14
W3C Recommendation, , 26 January 2000. http://www.w3.org/TR/2000/REC-xhtml1-20000126
1.3.3. Fluxul evenimentelor

Dac 2 elemente sunt imbricate, ambele au handleri de eveniment nregisterai n acelai eveniment (depil d click). Cnd utilizatorul utilizatorul d click pe elementul din interior (inner element), sunt dou posibiliti de manipulare: Utiliznd un trigger de elemente din exterior spre interior, model implementat n Netscape Navigator i cunoscut sub denumirea de captur de eveniment (Event capturing) Utiliznd un trigger de elemente din interior spre exterior, model implementat n Internet Explorer i alte browsere i cunoscut sub denumirea de eveniment (Eveniment bubbling). W3C ia o pozitie median n modelul propus i evenimentele sunt nti capturate pe msur ce apar n elementul int, apoi bubbled up. In timpul fluxului de eveniment flow, un eveniment poate fi responsabil de un alt element din cale (un observator) n acest caz acesta determinnd o aciune i/sau stopnd evenimentul cu metoda event.stopPropagation() pentru Mozilla i cu comanda eveniment.cancelBubble = true la Internet Explorer, i/sau anulnd aciunea implicit a evenimentului. [Harvey_2002] Obiectul Eveniment 15 (event) Obiectul event furnizeaz o serie de informaii despre un eveniment particular, inclusiv informaii despre elementul int (target), cheia apsat, butonul mouse, poziia mouseului, etc. dar din pcate sunt serioase incompatibiliti cu browserele n acest domeniu, aa nct vom aborda standardul W3C pentru obiectul event. Proprietile obiectului event Tip Nume Descriere DOMString type Numele unui eveniment (case-insensitive). Utilizat pentru a indica EventTarget cu care a fost dispatched EventTarget target Event originally. Utilizat pentru a indica EventTarget pe care n proceseaz n mod EventTarget currentTarget curent EventListeners. Utilizat pentru a indica ce faz a fluxului de eveniment este n unsigned short eventPhase evaluate. Boolean bubbles Utilizat pentru a indica sau nu dac evenimentul este bubbling. Utilizat pentru a indica sau nu dac evenimentul poate avea o Boolean cancelable aciune prevenit i anulabil. Utilizat pentru a specifica timpul (n millisecunde) la care s-a DOMTimeStamp timeStamp creat evenimentul. Metode eveniment Tip de Nume de Name Description argument Argument Previne propagri viitoare ale evenimentului n stopPropagation fluxul de eveniment.
15
XULPlanet. (2004). Event Handlers. Accesat Februarie 16, 2005.
Pentru a anula un eveniment dac este anulabil (cancelable), ceea ce nseamn c orice aciune preventDefault implicit devine normal prin implementarea ca rezultat a apariiei evenimentului. DOMString eventTypeArg Specific tipul evenimentului. boolean canBubbleArg Specific dac evenimentului este sau nu bubble. initEvent Specific dac evenimentul are aciune implicit boolean cancelableArg ce poate fi prevenit. Un model obiect reprezint o descriere a structurii obiectelor dintr-un system, incluznd identitatea acestora, relaiile cu alte obiecte, atributee i operaii. JavaScript posed cteve obiecte specifice browserelor i care permit interaciunea cu browserul i pagina Web propriu-zis. Toate obiecte specifice browserelor sunt plasate n ierarhie ncepnd de la fereast obiect (Window). Aceste obiecte sunt grupate n dou sub-categori: Browser Obiect Model (BOM) i Document Obiect Model (DOM).
1.4. Browser Obiect Model (BOM)

BOM are un are are
Location history screen frame
Window
Document
are are
form
DOM are
object
are
iframe
are fii
HTML object Script object
navigator
object
are
object
Figura 1.2. Relaia DOM-BOM Document Obiect Model este categoria la care se refer majoritatea celor care vorbesc despre obiecte browser i standardul W3C. Utiliznd n orice poziie codul JavaScript, obinem acces la toate elementele HTML de pe pagina Web, permindu-ne adugarea, modificarea sau tergerea elementelor, atributelor i chiar a coninutului. DOM este legat n mod specific de documentul propriu zis. Acesta conine n interior Browser Obiect Model dar nu include browserul i toate elementele specifice acestuia (ferestrele, locaia, istoricul, etc ) Browser Obiect Model nu este referit n general prin nume ci este acoperit de DOM dei n fapt DOM, care leag toate elementele prezente ntr-un document, este regsit n BOM. BOM acoper
obiecte specifice referite de browser. In vrful ierarhiei BOM este fereasta obiect (Window), urmat de navigator, screen, history, location, i obiectele document. Obiectul document este vrful ierarhiei DOM, fiecare obiect aparind unei fereaste cu statut egal i fiecare obiect document fiind legat direct de o fereast obiect (figura 1.2.). Evenimente Browser Evenimente fereastr(Window)
Sigla Meniu de Legtur
Logo
Text Fereastra de stare
Evenimente document Figura 1.3. HTML i modelul eveniment Scopul principal al limbajelor scripturale (Java Script, Jscript, PHP, ASP) sau a celor obiectuale (Java, C#) este s realizeze procesrile i reaciile la evenimente chiar n browser. Evenimentele sunt declanate de utilizator i preluate n nite atribute speciale ale marcajelor HTML, iar aceste atribute se numesc handlere de eveniment . Ele indic instruciuni simple sau funcii ce vor trata evenimentul. Evenimentele nu se refer la aciuni de salvare, tiprire, care in de opiunile browserului, ci la ceea ce se ntmpl n cadrul paginii propriu zise: navigarea (ncrcarea/descrcarea paginii) i interaciunea cu utilizatorul (apsare de butoane, editarea zonelor text etc). Declaraiile handler-ilor de evenimente sunt la fel ca orice atribut HTML cu precizarea c au prefixul on i sunt case-sensitive. Evenimente de navigare (ieirea din browser, selectarea unei legturi, deschiderea unui URL, navigarea n lista history) determin ca asupra paginilor s se execute o ncrcare sau o descrcare a lor n/dintr-o fereastr. Uneori ncrcarea eueaz, caz n care funcia asociat are rol de a trata acest eveniment pentru a da robustee site-ului . HTMl este trunchiul arborelui iar <Head> respectiv <body> sunt ramificaiile principale.
Conform figurii, relaia dintre noduri este cea de printe-fiu, nodurile finale reprexentnd nodurile frunz. n ceea ce privete legturile, apar evenimente ca trecerea mouse-ului peste ele i schimbarea strii n timpul unor procese (de exemplu ncrcarea unui plug-in). Evenimentul mouseover este generat cnd mouse-ul se afl pe o legtur dar nu este hotrt s acioneze i este utilizat pentru schimbarea culorii legturii (poised-ovirea). Evenumentul statechange are rolul de a furniza anunurile platformei referitoare la timpul consumat pentru o operaie. Spre exemplu movieplayer este ncrcat, dar nu poate afia nc fiierul video. Cele dou evenimente sunt vag legate. Astfel la ncrcarea unui document n fereastr obiectele Window, navigator, screen, history, location vor avea proprietti clare ale instanelor lor. La declararea unui <FORM> ntr-o pagin Web, JavaScript ia informaiile pentru a construi obiectul form construind perechi echivalente, care devin proprieti ale obiectului FORM, respectnd structura DOM. Trebuie s se stabileasc o distincie ntre evenimente scripturale (JavaScript, Jscript, PHP, ASP) i aciuni deoarece aciunile se refer la accesarea facilitilor browserului (Back, Forward, Home), derularea ferestrelor sau replicarea la e-mail, care nu sunt evenimente scripturale. Un criteriu ar fi c aciunile nu afecteaz pagina Web ncrcat, dei poate afecta vizibilitatea paginii. n limbajele scripturale exist un numr de evenimente de tip script, asupra crora vom reveni cu detalii n capitolele viitoare.
1.5. Formatarea i structurarea documentelor Web 1.5.1. HTML i modelul eveniment

Debutul HTML este marcat n 1991, apoi apare HTML+ (1993), urmat de HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.01 (1999), XHTML 1.0 (2000) care confer valene dinamice paginilor Web, HTML5 (2012) i XHTML5 2013 Numele de atribute i numele valorilor atributelor sunt case-insensitive. Totui World Wide Web Consortium (W3C) recomand valori lowercase pentru atribute i valori n recomandrile HTML 4. Noua versiune (X)HTML solicit i valori lowercase pentru attribute. Orice document HTML se redacteaz ntr-un editor de texte, i se salveaz ca text ASCII standard, cu extensiile .html sau .htm, textul ASCII trebuie cuprins n marcatorul (chiar dac multe browsere tolereaz lipsa sa):<html> </html>.Comentariile se includ n marcatorul  </style>
Exemplul 2 <head> <style type="text/css"> .verticaltext{ font: bold 13px Arial; position: absolute; right: 3px; top: 20px; width: 15px; writing-mode: tb-rl; } </style> </head> Exemplu: Stilizarea Background Color <!DOCTYPE html> <html>
<body style="background-color:yellow;"> <h2 style="background-color:red;">heading</h2> <p style="background-color:green;">paragraf</p> </body> </html> Exemplu: Stilizarea Font, Color i Size <!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html> Exemplu: Stilizarea Alinierii textului: The text-align property specific the horizontal alignment of text in an element: Example <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html> The text-align property makes the old <center> tag obsolete. Internal Style Sheet An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> Stiluri externe Un stil extern (External Style Sheet) se recomand ndeosebi cnd este aplicat mai multor pagini. Cu un stil extern se poate schimba apariia ntregului site, schimbnd doar un fiier. Fiecare pagin trebuie legat de style sheet prin tag ul <link>, care se poziioneaz n interiorul seciunii <head>: Exemplu:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Tag-urile Style sunt: <style>- definete informaii style pentru un document <link> definete relaiilentre document i resursa extern In HTML 4, apar cteva tag-uri i atribute utilizate n stilizarea documentelor. Aceste tag-uri nu sunt suportate n noile versiuni HTML. Recomandm evitarea elementelor: <font>, <center>, i <strike>, i a atributelor: color i bgcolor. Codul meniului se afl ntr-un fiier separat, style.css, n care definim modul de formatare a documentului. Acest fiier este legat de pagina HTML prin urmtoarea secven de cod: <LINK REL="stylesheet" TYPE="text/css" HREF="style.css"> Tehnica CSS ofer avantaje permind: stocarea elementelor de formatare separat de elementele funcionale, stocarea codului ntr-un fiier separat, crearea i poziionarea straturilor ntr-un mod care funcioneaz pe orice browser compatibil CSS, definirea unor fiiere externe, care s fie executate de mai multe pagini web, separ stilurile de marcatoare i permit un control precis asupra fonturilor, spaiilor libere, numerotrii, alinierii i poziionrii textului i a altor elemente de coninut, previn omiterea folosirii tag-urilor HTML, reduc dimensiunile fiierelor, mbuntesc utilizarea citirii browserelor. Stilurile CSS pot s fie salvate n foi separate, sub form de fiiere cu extensia .css, caz n care fiierul trebuie referit ca valoare a unui atribut href n antetul documentului. Marcatorul <div class=numeclas> permite definirea unor clase de stil ce conin anumite poriuni ale documentului. Prin imbricarea mai multor marcatori div se poate realiza o aplicare incremental a stilurilor. [TAYLOR]
1.5.3.Formatarea documentelor HTML

Conteinere i blocuri Majoritatea elementelor HTML sunt definite ca elemente la nivel block sau ca elemente inline. Elementele la nivel block ncep n mod normal (i se sfresc) cu o nou linie afiat de browser. Exemple: <h1>, <p>, <ul>, <table> Elementele inline sunt afiate fr a ncepe la o nou linie. Exemple: <b>, <td>, <a>, <img> Elementul <div> este la nivel bloc i poate fi utilizat ca un container pentru gruparea altor elemente HTML, fr a avea o semnificaie special. Utilizat mpreun cu CSS, <div> permite setarea atributelor de style pentru blocuri de coninut. Alt utilizare este pentru layout-ul documentului, nlocuind vechea formatare a paginii folosind tabele.
Elementul <span> este element inline, utilizat ca i container pentru text, fr o semnificaie special. Utilizat mpreun cu CSS, <span> permite setarea atributelor style pentru o parte din text. <div> definete o seciune n document (block-level) <span> definete o seciune n document (inline) Elementul <div> poate fi utilizat n formatarea documentelor. Exemplul utilizeaz 4 elemente div pentru a crea multiple coloane n pagin: Exemplu: <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Coninut </div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright W3Schools.com</div> </div> </body> </html> 1.5.4. Interactivitatea cu clientul prin formulare HTML Formularele au fost introduse n Hypertext pentru asigurarea comunicrii de informaii n ambele sensuri, ntre client i server. Aceste formulare preiau date ce sunt procesate de ctre scripturi, ceea ce se preteaz multor activiti cu caracter economic. Un formular HTML se introduce astfel: <FORM ACTION=URLserver-side METHOD=Get sau Post> </FORM> Atributul ACTION indic URL-ul fiierul care va prelua, dincolo de poarta CGI, datele formularului. Acele fiiere sunt scripturile CGI. Get i Post indic metoda de transfer. Prima se folosete pentru date puine, pe care le codific ntr-un ir de caractere ce se alipete URL-ului
din ACTION. A doua transfer un flux de octei la bufferul de intrare al serverului i se folosete la transferuri securizate, cu date multe (Get trunchiaz URL-ul dac irul de caractere e prea lung). ntre etichetele FORM se include textul formularului i elementele sale. Un eveniment important tratat n scripturi se ferer la aciunea de trimitere (Submit), sociat cu aciunea specificat n action. Elemente de formular: HTML i XHTML Problematica tagurilor HTML va fi analizat n prisma evenimentelor de interaiune care sunt specifice obiectelor HTML incluse n conteinere i formulare (figura 1.2.). Evenimente de interaciune apar la manipularea formelor prin accesarea elementelor acestora. Pentru a realiza o sintez a obiectelor coninute n forme, prezentm n continuare categoriile principale i tag-urile utilizate la definirea i manipularea lor. A. Butoanele, definite cu tag-ul INPUT: simple, atributul TYPE: <INPUT TYPE=buton>; booleene, cu dou valori posibile: (TYPE=checkbox); radio, n care unul singur poate fi activat ntr-un set dat: (TYPE=radio); submit, care lansaz formularele spre URL-ul specificat, folosind metoda dorit (TYPE=submit) reset, pentru anularea valorilor formularelor (TYPE=reset); Un eveniment comun tuturor butoanelor este click-ul de mouse i n plus, formularul mai genereaz evenimentul de submit . B. Zone de text cmpuri de text, care afieaz textul introdus (ecoul): TYPE=text; parole, care nu dau ecou, pentru limitarea accesului: TYPE=password cmpuri ascunse, invizibile, ce permit transiterea unor informaii: TYPE=hidden ; zone de editare pentru texte mai lungi TYPE="TEXTARREA"; Evenimentele asociate: change la modificri n zona-text, select la selectarea textului, focus pentru activarea zonei pentru acceptarea de modificri, blur cnd zona i pierde focusul. Din raiuni de securitate, zonele-parol nu genereaz evenimente . C. Liste de selecie se definesc cu marcajul <SELECT> n cadrul cruia se specific opiunile listei, n interiorul marcajului <OPTION>. Opiunile genereaz aceleai evenimente ca i zonele de text (focus, blur, change), cu excepia seleciei . ? Butoane, informaii ascunse i zone de editare a textului <input type=tip name=nume value=valoare size=dimensiune> value permite stabilirea de valori implicite. type indic tipul butonului: 1. text, pentru zone de text, cu size utilizat pentru precizarea dimensiunii; 2. password, pentru zone de text cu preluare de parole (afieaz * pe post de ecou, din motive de securitate; din aceleai motive, transferul formularelor cu parole nu se face prin get, cci aceast metod face vizibile valorile cmpurile din formular sub forma unui ir de caractere alipit url-ului); 3. checkbox, pentru casete de validare, cu checked, pentru validare implicit; 4. hidden, pentru transmiterea prin cgi a unor date invizibile utilizatorului; 5. file, pentru transferul spre server a unui server. butonul are rolul unui buton browse... ce permite cutarea unui fiier pe disc;
6. radio, pentru butoane cu interblocare: aceste butoane sunt grupate pe familii, prin folosirea aceleiai valori a atributului nume; ntr-o familie, un singur buton poate fi selectat; 7. submit, pentru butonul ce iniiaz transferul datelor din formular; 8. reset, pentru resetarea formularului la valorile implicite; 9. button, pentru butoane declanatoare Butoanele au associate evenimente specifice tratate n tabelul 1.2. ca evenimente HTML dar ofer posibilitatea de a interfera cu limbaje scripturale i obiectuale prin proprietile associate fiecruia, care sunt definite prin perechi (atibut, valoare), spre exemplu type=text name=nume value= size=20, dar care au n plus atributele de formatare specifice (corespondente B, I, U,etc). Aceste attribute pot fi preluate de scripturi dar i modificare de acestea. Liste: <select name=nume> <option selected>optiune implicita <option value=valoare> optiune2 </select> Marcatorii <option> introduc opiunile listei. Atributul selected, indic opiunea implicit. Atributul value ataeaz o valoare listei, n cazul selectrii opiunii creia i se asociaz valoarea. Zone de text tip bloc: <textarea name=nume rows=nrranduri cols=nrcoloane> </textarea> Pentru valoarea implicit se poate introduce ntre cele dou etichete un text. Etichete: <label for=id-ul elementului care va fi etichetat>text_eticheta</label> Datele din formular sunt transmise prin HTTP, fie printr-un flux de octei (la folosirea metodei post), fie atand la URLul scriptului de prelucrare un ir de caractere ce ncepe cu ?, continu cu perechi de forma numeelementdeformular = valoareelementdeformular, desprite prin & (la folosirea metodei get). Spaiile n cerere sunt nlocuite cu +, deoarece URLurile nu permit spaii. Acest ir de caractere va fi preluat pe server ntr-o variabil de mediu, pentru a fi tratat de scripturi CGI (QUERY_STRING). Fluxul de octei transferat prin metoda post va fi stocat ntr-un buffer de unde va fi preluat de instruciuni script specifice pentru citirea acelui buffer. Hrile de imagini Exist un tip special de referin, hrile de imagini, prin care o imagine (marcat cu <img>) este mprit n zone cu contururi mai mult sau mai puin regulate (marcate cu <AREA>) i fiecrei zone i se asociaz o hiperlegtur: <map name=numeharta> <area shape=rect coords=9,120,56,149 href=p1.html> <area shape=circ coords=100,100,5 href=p2.html> </map> Acest marcator stabilete coordonatele contururilor i intele hiperlegturilor. ntr-un alt punct trebuie marcat imaginea care va deveni hart: <img src=imagine.gif usemap=url#numeharta>
Dac se precizeaz URL-ul n USEMAP, harta va fi preluat din alt document dect cel n care se afl imaginea. Harta este identificat prin Numeharta. Asupra acestora vom reveni n capitolele viitoare. 1.5.5. Hiperlegturi i evenimente de navigare Hiperlegturile vor genera evenimente de selecie, de navigare, evenimente browser care sunt gestionate prin manipulatori (handleri) specifici asociai unor scripturi de tratare a lor. Hiperlegturile sunt marcate n HTML prin marcarea celor dou ancore: 1. Referina: <a href=url_int#nume_int target=nume_frame> text_ref </a> 2. inta <a name=nume_int> text_target </a> Hiperlegtura se va stabili ntre text_ref i text_target, adic apsnd pe text_ref, browserul va ncrca acea poriune de document care conine text_target. n cazul n care pagina curent este o structur de cadre, se permite trimiterea spre afiare a paginii ce conine inta n frame-ul identificat n atributul TARGET. Exist trei categorii de hiperlegturi care se pot marca n HTML: 1. Hiperlegtura intern Aceasta presupune c att referina ct i inta apar n acelai document. Efectul declanrii hyperlink-ului va fi derularea paginii pn la int. Referina nu trebuie s mai precizeze URL-ul paginii. 2. Hiperlegtura extern fr text int Aceasta presupune c nu s-a marcat nici o int, iar referina conine doar un URL. Efectul este ncrcarea n browser a paginii de la URL-ul respectiv. 3. Hiperlegtura extern cu int Aceasta este forma complet, cu URL i Numeint n referin. Efectul este ncrcarea paginii de la URL-ul referit i derularea paginii pn la textul int. n acest caz, marcarea referinei i a intei se fac n dou documente distincte. Exemple: Legtura simpl: <a href="http://www.example.com/">Legatura </a> Legtura Imagine: <a href="http://www.example.com/"><img src="URL" alt=" Text Alternativ "></a> Legtura Mailto: <a href="mailto:webmaster@example.com"> e-mail</a> Semn de carte (Bookmark): <a id="tips"> Sectiune</a> <a href="#tips">salt la Sectiune</a> Ageni de cutare (Altavista,Watch,Google, Mozila,Opera etc) care realizeaz cutri dup cuvinte cheie, sunt de fapt, dezvoltri complexe ale unor programe CGI, ce preiau printr-o metod GET cuvintele cheie introduse de utilizator n zona de editare pus la dispoziie. Pentru
introducerea unei referine directe la un motor de cutare, URL-ul referinei trebuie s conin ntregul ir de caractere query_string pe care programul CGI al motorului de cutare l solicit ca parametru de intrare: <a href=http://search.google.com/search?p=cuvintecheie>text_ref</a> Tot ce apare n URL dup semnul ? este coninutul irului QUERY_STRING destinat programului de cutare. Exemplu: "a href=http://www.altavista.digital.com/cgi-bin/ query?pg=q&what=web&fmt=.&q=" + multimedia> multimedia </A> Cutarea agenilor i indexarea paginilor la motoare ce ntrein indeci de site-uri nu se face pe baza ntregului coninut al unui document HTML. Indecii se formeaz pe baza coninutului marcatorului <title>, iar motoarele de cutare verific doar coninutul marcatorului <meta>, sau primul paragraf al documentului, de aceea textul care este marcat de aceste etichete poate fi vital pentru succesul unei locaii Web. Metadescriptori De regul <meta>, este introdus n antetul documentului, n forma: <meta name=keywords content=ir de cuvinte cheie ce caracterizeaz site-ul> <meta name=description content=text ce rezum coninutul site-ului i este afiat de ctre motoarele de cutare n lista rezultatelor cutrii> Semnificaia acestui marcator este indicat de atributele sale, de proprieti ale cror nume sunt precizate n name, sau http-equiv. Ultimul atribut este folosit pentru a indica protocolului HTTP date privind conexiunea: tipurile MIME oferite de server i de versiunea de HTTP pe lng cele comunicate implicit la iniierea trimiterii paginii spre client (proprietatea Content-type), ora la care trebuie s expire conexiunea HTTP (proprietatea Expires), momentul la care pagina curent s fie nlocuit cu rezultatul unei noi cereri HTTP specificat prin URL (proprietatea Refresh, foarte util pentru paginile cu actualizare la minut, pentru a scuti utilizatorul s apese n mod repetat pe butonul Reload/Refresh al browser-ului), eticheta de rating al audienei primit de acel site de ctre un for de cenzur (proprietatea PICS-Label). Pentru toate acestea, numele proprietii se precizeaz n valoarea atribuit lui HTTP-EQUIV, iar valoarea proprietii este descris n valoarea atributului CONTENT. NAME este folosit identic, proprietile sale sunt ns mai puine i caracterizeaz coninutul documentului: keywords, author, description. [TAYLOR] Pentru mpiedicarea accesului motoarelor de cutare i indexare, se editeaz n rdcina site-ului, pe server, un fiier cu numele robots.txt. Acesta conine dou tipuri de directive: Utilizator-agent: numele agentului restricionat (* pentru toi agenii) Disallow: calea spre directorul sau fiierul din site pentru care se interzice indexarea (/ pentru ntregul director) Pentru nregistrarea site-ului n bazele de date ale unor motoare de indexare i cutare n mod explicit, fr s ne bazm pe agenii acestor motoare, trebuie s se ia contact cu site-urile ce ntrein astfel de baze de date. Aceste site-uri pun la dispoziie formulare de nscriere a site-ului, contra unor sume sau condiionat de respectarea unor cerine, cum sunt cele de rating al audienei.
O alt cale de a ctiga o audien ct mai larg este nchirierea unor panouri publicitare pe siteuri cu trafic intens, ce pun la dispoziie astfel de spaii publicitare, contra cost. Despre construcia acestor panouri, vom da detalii la capitolul legat de design.
1.5.6. Funcionaliti specifice HTML

Imaginile hart Imaginile hart-(imagemaps), imagini inline n care diferite zone ale imaginii au asociate legturi diferite.Aceste imagini-hart se obin prin crearea unui script care face ca diferitele zone ale imaginii s activeze legturi diferite. Imaginile-hart se folosesc la creare unor lucruri mai deosebite, cum ar fi hrile; cnd se execut click pe una din ri, o legtur va deschide un document despre ara respectiv.Au i ntrebuinri mai obinuite cum ar fi barele de butoane care constituie o singur imagine, iar imaginea-hart asociaz cte un URL fiecrui buton n parte. Imaginile-hart pot fi scrise pentru a sta pe server i vor fi prelucrate de scripturi CGI, sau pot fi codificate n fiierul HTML pentru a fi rulate de browser (client).Imaginile-hart au mai multe avantaje pentru autorul paginii Web care nu trebui s se adapteze particularitailor CGI ale serverului.Dezavantajul major al acestora este faptul c sunt recunoscute de puine browsere i anume Netscape Navigator i Internet Explorer 4. Probabil ca pn la urm, fiind mai uor de folosit, imaginile-hart pentru client vor fi standardizate i vor dispune de suport n toate browserele. Exemplificare hart senzitiv (java script) ce reprezint acoperirea reelei, fiecare zon are o legtur diferit. Funcia JavaScript folosit: function OpenBrWindow(theURL,winName,features, myWidth, myHeight,isCenter) { if(window.screen)if(isCenter)if(isCenter=="true"){ var myLeft = screen.width-myWidth*1.5; var myTop = myHeight*0.5; features+=(features!='')?',':''; features+=',left='+myLeft+',top='+myTop; } } <table border="0" cellpadding="0" cellspacing="0" width="100%"> colspan="3"><img src="covmap_small_01.gif" width="535" height="38" <td><ahref=javascript:;onclick="OpenBrWindow('covmap_01.html','Test','','310','291','true')"> <img src="covmap_small_03.gif" width="120" height="110" border="0"></a></td> <td><ahref="javascript:;"Onclick="OpenBrWindow('covmap_02.html','Test','','310','291','true')"> <img src="covmap_small_04.gif" width="120" height="110" border="0"></a></td></table> Ferestrele i cadrele Ferestrele i cadrele sunt parte vital din design-ul paginilor Web cu legturi dinamice. Utiliznd coduri JavaScript dup legtur se pot construi noi tipuri de browsere sau noi unelte. Spre exemplu: se poate aduce o pagin ntr-un cadru, se analizeaz, iar rezultatele sunt afiate ntr-un nou cadru. De obicei cnd se utilizeaz cadrele o zon este ca i un panou de control care dirijeaz afiarea n altul. O opiune de realizare a documentelor dinamice este utilizarea
scripturilor Java combinate cu cadre i straturi. Nestcape a introdus de la versiunea 4.0 a Netscape Navigator marcajul <layer> care ofer o mulime de funcii interesante, n special n combinaie cu scripturi simple. Marcajul <layer> dispune de o serie de atribute diferite, dintre care whith i id trebuie neaprat utilizate. Cel mai simplu strat: <layer id= layer1 width=300 > - definete un strat de lime egal cu 300 pixeli, numit layer1. Pagini HTML dinamice, implementate de Compania Microsoft sunt mai robuste, dar mai dificil de nvat. Modelul su este compatibil DOM (Model de Documente Orientat pe Obiecte), a fost propus de comitetul de standardizare W3 HTML. Tagul <frame> respectiv <frameset> nu este compatibil cu HTML5. Exemplu: Pagina de cutare <html><head><title> cutarea </title></head> <frameset row="60,*"> <frame src="search.htm" name="buttons"> <frame src="display.htm" name="display"> </frameset> </html> //ecranul iniial n cadrul display <html><head><title> partea de cutare </title> </head> <body><h1> afieaz zona </h1> <p> alegei hyperlegtur pentru declanarea cutrii </body> </html> Codul de cutare cu hyperlink <html><head><title>partea de cutare> </title></head> <body> <a href="http://www.altavista.digital.com/" target="display" alta vista </a> <a href="http://www.excite.com" target="display"excite </a> . </body> </html> exemplul urmtor contine dou cadre. sectiunea <noframes> este ntrodus pentru navigatoarele care nu recunosc cadrele (acestea nu recunosc nici JavaScript). Cadrele snt realizate cu ajutorul a dou documente: index.html si menu.html. Pentru vizualizare se va lansa documentul index.html. care va mprti ecranul n dou portiuni horizontale. n cea de sus va apare continutul documentului menu.html, iar n cel de jos continutul documentului de intrare hotsoft.html. <html> <title>bun venit la focussoft</title> <frameset rows="17%,83%"> <noframes> <h4>continut</h4>
<a href=hotsoft.html target="display">produse/a><br> <a href=servicii.htm target="display">servicii /a> </noframes> <frame src=menu.html> <frame src=hotsoft.html name="display"> </frameset> </html> Documentul menu.html conine dou butoane, plasate n interiorul unui formular. Formularul este introdus deoarece butoanele pot apare doar n interiorul lor. La apsarea butoanelor, ce se afl n frame-ul de sus, n frame-ul de jos vor apare fie documentul hotsoft.html, fie servicii.html, n functie de butonul apsat. Sursa documentului menu.html: <html> <body> <!- <a href=menu.html target="_parent">Hide Frame</A> -> <form> <input type=button name=btn_welcome value="Bun Venit" onClick="window.open('hotsoft.html','display')"> <input type=button name=btn_servicii value="Servicii" onClick="window.open('servicii.html','display')"> </form> </body></html> <html> <head> <script> <!- Aici se scriu toate funciile utilizate alert ('Dorii detalii despre aceast firma? ') //end of script> </script> </head> <BODY BGCOLOR= white> Tastai OK dac DA! </body> </html> Imaginile dinamice fac obiectul DHTML i vor fi tratate la capitolul JavaScript.
1.5.7. Extensii dinamice

Afiarea imagini n format comprimat: .gif, .jpg. se gestioneaz cu marcatorul de inserare a imaginilor, marcatorul vid <img src=fisier.gif>, existnd posibilitatea de a plasa imagini n fundalul documentului sau n tabele. Pentru rularea diverselor formate de fiiere se vor crea hiperlegturi la fiierele externe dorite, ca n exemplul: <a href=http://www.x.com/film.avi> text </a>
S-a introdus marcatorul <embed> , pentru introducerea unor tipuri de fiiere externe documentului; n Netscape, acest marcator permite rularea fiierelor audio cu ajutorul unei extensii a browser-ului (o consol player): <embed src=nume width=lime height=nlime autostart=true/false loop=true/false hidden=true/false> autostart stabilete dac sunetul va fi sau nu rulat automat la ncrcarea paginii, loop indic dac sunetul va fi rulat repetitiv (ca sunet de fundal), hidden permite ascunderea consolei ce controleaz rularea sunetului. Pentru rularea applet-urilor Java browser-ul trebuie s includ suport Java, n principal maina virtual proprie platformei pe care ruleaz browser-ul. Includerea applet-ului se face rezervnd n pagina HTML un spaiu dreptunghiular n care s ruleze miniaplicaia: <applet code=urlfiierjavacompilat width=lime height=nlime> HTML a introdus un marcator generic cu care se ncearc nlocuirea multor marcaje ce includ fiiere externe n document (printre care <embed>,<applet>,<img>). Acest marcator conine toate atributele marcatorilor pe care i nlocuiete. Se presupune c n viitoarele standarde HTML, orice includere de fiier se va face cu marcatorul: <object codetype=tipmime classid=urlplugin width=lime height=nlime> text alternativ includerii obiectului </object> Acest marcator permite inclusiv introducerea unui fiier de tip HTML n spaiul dreptunghiular care i se rezerv, eliminnd astfel necesitatea cadrelor. De asemenea, poate fi scris ca un marcator vid, dac nu se dorete precizarea unui text alternativ. Atributul de baz este classid i precizeaz URL-ul de unde trebuie ncrcat obiectul. Prin imbricarea mai multor marcatori <object> se pot preciza mai multe alternative de obiecte dintre care va fi rulat primul disponibil, n ordindea imbricrii. Atributul codetype precizeaz tipul MIME, astfel nct browserele care nu pot s ncarce un anumit tip s nu piard timp cu ncrcarea fiierului. n strns legtur este marcatorul <param>, care permite indicarea parametrilor de transferat pentru obiectul invocat prin <object>. Pe aceast cale se pot transfera parametri de execuie unui applet. <param> trebuie imbricat n marcatorul de includere a obiectului cruia i va transmite parametrii: <param name=height value=120> n acest exemplu se declar un parametru cu numele height i valoarea 120. <object> devine un marcator universal pentru includerea fiierelor n document, i atributul id, poate fi ataat tuturor marcatorilor ce necesit identificare, n locul a ceea ce la unii marcatori se realizeaz prin atributul name: identificare de inte, de obiecte, de frame-uri, de hri de imagine, etc. id identific i marcatori care nu au prevzut atributul name, de exemplu marcatorii de stilizare a textului. [TAYLOR][CAPRARIU97] La includerea unui fiier extern se pune problema momentului la care se ruleaz acesta (dac este un obiect ce necesit execuie). Acest moment poate fi controlat dac se include obiectul cu atributul declare (care mpiedic rularea imediat dup ncrcare), apoi se creeaz o hiperlegtur a crei int este obiectul care va fi rulat la un click de mouse pe referina hiperlegturii: <object declare id=nume data=film.avi type=aplicaie/avi> <a href=#nume>start executie</a> Exmplu:
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="daciastil"> <tr> <td> <img src="logome.jpg" height="150" width="150" alt="logo"> </td> <td width="296"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="279" height="61" class="vilastil"> <param name="movie" value="text2.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#FFCCCC"> <param name="scale" value="exactfit"> <embed src="text2.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=Shockwav eFlash" type="application/x-shockwave-flash" scale="exactfit" width="279" height="61" bgcolor="#FFCCCC"></embed> </object></td>
In exemplul anterior este inclus intr-o celul table un obiect Flash (tagul Object) pentru care se utilizeaz plg-in Shokwave-Flash cuia I se precizeaz parametri de rulare prin atribute i valori (name="movie" value="text2.swf", name="quality" value="high", name="bgcolor" value="#FFCCCC",
name="scale" value="exactfit">)
Facilitile oferite de DHTML vor fi discutate n capitolele urmtoare.
1.5.8. Dynamic HTML

Evoluia accesului la datele Web (Web Data Access) ar putea fi sintetizat cronologic astfel: 1994 documente statice HTML; 1995 aplicaii server-side cu unelte Web middleware, limitarea surselor de date, procese statice CGI 1996 procese client-side, scripturi, dezvoltare cu applet Java, procesare server-side cu JDBC, surse de date multiple, Web Server API 1997 programare vizual, Java servlets (server_side includes), mare varietate de surse i platforme, grafic interactive i diversificarea multimedia 2000 i perspective SQLJ i XML, aplicaii mobile, standarde noi Dynamic HTML include: Modelul obiect prin care utilizatorii schimb proprietile aplicnd metode asupra lor i ofer suport pentru evenimente Style Sheets (CSS) Data Binding permite tratarea HTML ca template pentru datele ce vor fi furnizate de obiectul data source. Ele sunt interpretate i produc o pagin complet. Scriplei un scriplet este o pagin Web ce poate fi utilizat ca i component n aplicaia Web. 1. Modelul obiect face HTML modificabil prin: - acces la toate elementele documentului; - actualizarea instrumentare a paginii; - model full-event (complet eveniment).
Obiectele manipulate sunt: window funcie deschis n browser document documentul din fereastr all colecie de elemente coninute ntr-un element children colecie de descendeni direci ai unui element event starea unui eveniment style setri menite pentru toate stilurile stylesheet un singur set de stiluri n document Colecii de elemente HTML conin: attributes[] ntoarce un tablou de atributes ale unui element childNodes[] ntoarce un tablou de noduri fiu ale unui element Spre exemplu ntr-un document cu ID MyHeading se poate apela: document.all(My Heading) sau MyHeading. Se pot aduga, modifica i terge obiecte din colecie n orice moment. Pentru modificarea stilului, introducem: MyHeading.style.fontStyle = Italic Coninutul unui element se poate modifica folosind proprietile: innerHTML, innerText, outerHTML, ontertext. Exemplu: My Heading.innerText = Dynamic HTML MyHeading.innerHTML= <A> Dynamic HTML </A> 2. Modelul eveniment conine evenimente tastatur: onkeypress, onkeydown, onKeyup, evenimente mouse: onmouseover, onmouseout, onmousedown, onmouseup, onmousemove, onclick, ondbclick. Exemplu:
<H1> id = MyHeading style =font-weight:normal on mouseover =makeItalic(); onmouse out = makeNormal();> Dynamic HTML </H1> <script > function makeItalic(){ MyHeading.style fontStyle = Italic; } function makeNormal(){ My Heading.style.fontStyle=Normal; } </script>
Obiectlul eveniment are proprietile: - type numele evenimentului; - srcElement element ce declaneaz evenimentul - toElement element care l modific onmouseover i onmouseout; - returnValue valoare ntoars de eveniment; - cancelBubble utilizat la stoparea evenimentului de ierarhia prini; - raison utilizat la transferul datelor.
3. Stil i poziionare Sunt 2 tipuri de stiluri: inline styles stil ce modific o anumit zon i element class prin care se definesc clase de elemente i se utilizeaz global style sheets. Exemplu: <H1> class = textBlue onmouseover = this.className=textRed onesourseout =this.className=textBlue Dynamic HTML </H1> Managementul stilurilor permite modificarea din zbor a stilurilor utilizate. Poziionarea suportat de CSS este: absolut attribuind valori ale atributului style prin: <IMG src = Sample.gif style=position:absolute;left:0; top:0> Sau relativ determinat de poziia elementului printe i precedat de elementele urmtoare. 4. Data Binding Se fixeaz pe 4 componente: 1. Obiecte Data Source - furnizeaz date ntr-o pagin 2. Data consumers (elemente HTML) - afieaz date 3. Data Binding agent menine sincronizarea ntre fluxul de date de obiectul surs i data consumers. 4. Table repetition agent lucreaz cu surse de date tabulare. Obiecte surse de date pot fi: - JDBC Data Source Object appletul implementeaz Java Bean, datele sunt regsite cu JDBC folosind SQL; - HTML Data Source Object permit definirea datelor read-only i includerea n alt document HTML; - XML Data Source Object support XML - Remote Data Service faciliteaz acces la date i transmit date prin ODBC folosind SQL; Tabular Data Control support de date nmaganizate n procesare text. Asupra detaliilor funcionale vom reveni la capitolele urmtoare. Bibliografie 1. Ben Henick, HTML & CSS: The Good Parts(February 2010), First Edition, Editura OReilly, Sebastropol, CA 2. Buraga, S.(coord.), Alboiae, L., Alboaie, S., Dumitriu, S., Grdea, M., Gorea, D., Tanciuc, S.(2006), Tendine actuale n proiectarea i dezvoltarea aplicaiilor Web, Editura Matrix Rom Bucureti 3. dev.w3.org/html4/spec/ 4. Google Analytics: http://www.google.com/analytics 5. http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.ro/ro/ro /intl/ro/webmasters/docs/search-engine-optimization-starter-guide-ro.pdf 6. <http://valsvc.webtechs.com/>, http://www.w3.org/MarkUp/html-test/ 1999/. W3C Web site: http://www.w3.org/TR/WCAG10/ 7. W3C (n.d.) HTML Testing - HTML Validation Service and Toolkit 8. WAI (1999). /Web Content Accessibility Guidelines 1.0, W3C 9. WAI (2004a). /Policies Relating to Web Accessibility/. W3C
10. www.google.com/docs 11. www.joomla.com 12. www.w3schools.com/html/

GStandHTML Curs

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

GStandHTML Curs

Încărcat de

Drepturi de autor:

Formate disponibile

Capitolul I Standarde, tehnici, concepte Internet i WEB

1.1.2. URL i sevicii asociate

Acest capitol a fost elaborate cu colaborarea Dr. Robert Buchmann

1.1.2. Concepte web i concepte universale

NeWS workstation version of The Interactive Encyclopedia System, 1988

disiponibil pe K Desktop Environment sau Unix, Linux

Tehnologie dezvoltat i implementat de Macromedia, care n prezent a fuzionat cu Adobe

1.2. Tipuri MIME

1.3. Document Object Model (DOM)

Element <body> Element <h1> Text header 1

Text legatura Figura 1.1. DOM HTML 11

Menionm cteva metode HTML DOM comune:

i cteva proprieti HTML DOM comune:

1.3.2. Evenimente DOM

HTML frame/ obiect

Tip submit reset

Interfaa utilizator (User interface)

Atribute Onsubmit Onreset

W3C Recommendation, , 26 January 2000. http://www.w3.org/TR/2000/REC-xhtml1-20000126

1.3.3. Fluxul evenimentelor

XULPlanet. (2004). Event Handlers. Accesat Februarie 16, 2005.

1.4. Browser Obiect Model (BOM)

Sigla Meniu de Legtur

Text Fereastra de stare

1.5. Formatarea i structurarea documentelor Web 1.5.1. HTML i modelul eveniment

1.5.2. Stilizarea cu CSS

1.5.3.Formatarea documentelor HTML

1.5.6. Funcionaliti specifice HTML

1.5.7. Extensii dinamice

Facilitile oferite de DHTML vor fi discutate n capitolele urmtoare.

1.5.8. Dynamic HTML

10. www.google.com/docs 11. www.joomla.com 12. www.w3schools.com/html/

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