Você está na página 1de 240

UNIVERSITATEA TRANSILVANIA DIN BRAOV

Centrul de nvmnt la Distan


i nvmnt cu Frecven Redus
FACULTATEA DE MATEMATIC I INFORMATIC
PROGRAM DE LICEN: INFORMATIC

Tehnologii Web
CURS PENTRU NVMNT LA DISTAN

AUTORI:
Conf. Dr. Livia Sngeorzan
Lector Dr. Nicoleta Enache-David
Prep. Corina Nnu

ANUL III
2013-2014

Cuprins
Introducere ................................................................................................................................. 6
Modulul I. Introducere n tehnologiile Web............................................................................. 10
Introducere ........................................................................................................................... 10
Competene........................................................................................................................... 10
U1. World Wide Web i principii generale de web design .................................................. 11
M1.U1.1. Introducere ........................................................................................................... 11
M1.U1.2. Obiectivele unitii de nvare ............................................................................ 12
M1.U1.3. Evoluia Web-ului ................................................................................................ 12
M1.U1.4 Browsere WEB ..................................................................................................... 13
M1.U1.5 Primii pai ctre construcia unui site ................................................................... 14
M1.U1.6. Alinierea............................................................................................................... 15
M1.U1.7. Proximitatea ......................................................................................................... 18
M1.U1.8. Repetiia ............................................................................................................... 20
M1.U1.9. Contrastul ............................................................................................................. 21
M1.U1.11. Test de evaluare a cunotinelor......................................................................... 23
M1.U1.10. Rezumat ............................................................................................................. 24
M1.U1.11. Test de evaluare a cunotinelor......................................................................... 25
Modulul II. HTML (Hyper Text Markup Language) .............................................................. 26
Introducere ........................................................................................................................... 26
Competene........................................................................................................................... 27
U1. Crearea unui document HTML i stilurile blocurilor text ............................................. 28
M2.U1.1. Introducere ........................................................................................................... 28
M2.U1.2. Obiectivele unitii de nvare ............................................................................ 28
M2.U1.3. Structura de baz a unui document HTML.......................................................... 29
M2.U1.4. Tag-uri HTML ..................................................................................................... 30
M2.U1.5. Tag-uri din cadrul documentului HTML ............................................................. 31
M2.U1.6. Culori, fonturi, margini ........................................................................................ 31
M2.U1.7. Tag-ul Body ......................................................................................................... 32
M2.U1.8. Tag-ul Basefont (textul de baz) .......................................................................... 35
M2.U1.9. Stiluri fizice.......................................................................................................... 36
M2.U1.10. Stiluri logice ....................................................................................................... 41
M2.U1.11. Tag-ul font (configurarea font-urilor) ................................................................ 43
M2.U1.12. Blocuri de texte .................................................................................................. 46
M2.U1.13. Linii orizontale ................................................................................................... 51
M2.U1.14. Rezumat ............................................................................................................. 52
M2.U1.15. Test de evaluare a cunotinelor......................................................................... 53
U2. Tabele ............................................................................................................................ 54
M2.U2.1. Introducere ........................................................................................................... 54
M2.U2.2. Obiectivele unitii de nvare ............................................................................ 54
M2.U2.3. Tag-ul <table> ..................................................................................................... 54
M2.U2.4. Alinierea tabelului n pagina web ........................................................................ 57
M2.U2.5. Precizarea culorilor de fond pentru un tabel ........................................................ 58
M2.U2.6. Dimensionri ........................................................................................................ 59
M2.U2.7. Rezumat ............................................................................................................... 63
M2.U2.8. Test de evaluare a cunotinelor........................................................................... 63
U3. Imagini i ancore ........................................................................................................... 65
M2.U3.1. Introducere ........................................................................................................... 65
M2.U3.2. Obiectivele unitii de nvare ............................................................................ 65

M2.U3.3. Tagul <img> ........................................................................................................ 65


M2.U3.4. Legaturi (link-uri) ................................................................................................ 70
M2.U3.5. Hri de imagini ................................................................................................... 75
M2.U3.6. Rezumat ............................................................................................................... 77
M2.U3.7. Test de evaluare a cunotinelor........................................................................... 77
U4. Formulare ...................................................................................................................... 79
M2.U4.1. Introducere ........................................................................................................... 79
M2.U4.2. Obiectivele unitii de nvare ............................................................................ 79
M2.U4.3. Tagul <form> ....................................................................................................... 80
M2.U4.4. Tag-ul <input> ..................................................................................................... 80
M2.U4.5. Liste de selecie <select> <option >. </select>......................................... 81
M2.U4.6. Cmpuri de editare multiple ................................................................................ 83
M2.U4.7. Rezumat ............................................................................................................... 85
M2.U4.8. Test de evaluare a cunotinelor........................................................................... 85
Tem de control .................................................................................................................... 86
Modulul III. Reguli CSS (Cascading Style Sheets) ................................................................. 87
Introducere ........................................................................................................................... 87
Competene........................................................................................................................... 87
U1. Reguli CSS la nivel teoretic .......................................................................................... 89
M3.U1.1. Introducere ........................................................................................................... 89
M3.U1.2. Obiectivele unitii de nvare ............................................................................ 89
M3.U1.3. Integrarea regulilor CSS ntr-un fiier HTML ..................................................... 90
M3.U1.4. Pseudo-clase i pseudo-elemente ......................................................................... 91
M3.U1.5. Precedena regulilor ............................................................................................. 92
M3.U1.6. Atribute CSS ........................................................................................................ 93
M3.U1.7. Rezumat ............................................................................................................... 97
M3.U1.8. Test de evaluare a cunotinelor........................................................................... 98
U2. Exemplificarea regulilor CSS...................................................................................... 100
M3.U2.1. Introducere ......................................................................................................... 100
M3.U2.2. Obiectivele unitii de nvare .......................................................................... 100
M3.U2.3. Exemplificarea utilizrii foilor de stil ................................................................ 100
M3.U2.4. Test de evaluare a cunotinelor......................................................................... 119
Tem de control .................................................................................................................. 120
Modulul IV. JavaScript .......................................................................................................... 121
Introducere ......................................................................................................................... 121
Competene......................................................................................................................... 122
U1. Limbajul JavaScript ..................................................................................................... 123
M4.U1.1. Introducere ......................................................................................................... 123
M4.U1.2. Obiectivele unitii de nvare .......................................................................... 123
M4.U1.3. Avantajele utilizrii limbajului JavaScript ........................................................ 124
M4.U1.4. nglobarea instruciunilor JavaScript n HTML................................................. 126
M4.U1.5. Executarea scripturilor ....................................................................................... 126
M4.U1.6. Tipuri de date, variabile i operatori .................................................................. 126
M4.U1.7. Instruciuni i funcii predefinite........................................................................ 127
M4.U1.8. Manipularea tag-urilor/nodurilor/elementelor ................................................... 132
M4.U1.9. Handlere de evenimente..................................................................................... 134
M4.U1.10. Rezumat ........................................................................................................... 136
M4.U1.11. Test de evaluare a cunotinelor....................................................................... 136
U2. Obiecte JavaScript ....................................................................................................... 138
M4.U2.1. Introducere ......................................................................................................... 138

M4.U2.2. Obiectivele unitii de nvare .......................................................................... 138


M4.U2.3. Obiectul window ................................................................................................ 139
M4.U2.4. Obiectul location ................................................................................................ 141
M4.U2.5. Obiectul document ............................................................................................. 142
M4.U2.6. Obiectul forms ................................................................................................... 143
M4.U2.7. Obiectul image ................................................................................................... 145
M4.U2.8. Obiectul date ...................................................................................................... 145
M4.U2.9. Obiectul navigator.............................................................................................. 146
M4.U2.10. Obiectul layers (all) ......................................................................................... 146
M4.U2.11. Obiectul Math .................................................................................................. 151
M4.U2.12. Obiectul Array ................................................................................................. 151
M4.U2.13. Obiectul String ................................................................................................. 152
M4.U2.14. Rezumat ........................................................................................................... 154
M4.U2.15. Test de evaluare a cunotinelor....................................................................... 155
U3. Aplicaii complexe n JavaScript ................................................................................. 156
M4.U3.1. Introducere ......................................................................................................... 156
M4.U3.2. Obiectivele unitii de nvare .......................................................................... 156
M4.U3.3. nvarea JavaScript prin exemple ..................................................................... 157
M4.U3.4. Test de evaluare a cunotinelor......................................................................... 170
Tem de control .................................................................................................................. 170
Modulul V. Alte tehnologii pentru realizarea paginilor web ................................................. 172
Introducere ......................................................................................................................... 172
Competene......................................................................................................................... 172
U1. Limbajul PHP .............................................................................................................. 173
M5.U1.1. Introducere ......................................................................................................... 173
M5.U1.2. Obiectivele unitii de nvare .......................................................................... 173
M5.U1.3. Primii pai n PHP.............................................................................................. 174
M5.U1.4. Noiuni indroductive de sintax ........................................................................ 175
M5.U1.5. Aplicaii complexe utiliznd limbajele PHP, HTML i JavaScript ................... 178
M5.U1.6. Rezumat ............................................................................................................. 182
M5. U1.7. Test de evaluare a cunotinelor........................................................................ 183
U2. Flex3 ............................................................................................................................ 184
M5.U2.1. Introducere ......................................................................................................... 184
M5.U2.2. Obiectivele unitii de nvare .......................................................................... 184
M5.U2.3. Elemente de baz ale lui Adobe Flex3............................................................... 185
M5.U2.4. Limbajul MXML ............................................................................................... 187
M5.U2.5. Rezumat ............................................................................................................. 193
M5.U2.6. Test de evaluare a cunotinelor......................................................................... 193
U3. Lumea virtual pe Internet .......................................................................................... 195
M5.U3.1. Introducere ......................................................................................................... 195
M5.U3.2. Obiectivele unitii de nvare .......................................................................... 196
M5.U3.3. Produse soft pentru realizarea graficii 3D ......................................................... 196
M5.U3.4. Introducere n limbajul VRML .......................................................................... 199
M5.U3.5. Noduri n VRML V2.0....................................................................................... 201
M5.U3.6. Evenimente n VRML........................................................................................ 211
M5.U3.7. Noduri speciale .................................................................................................. 217
M5.U3.8. Interpolare n VRML ......................................................................................... 218
M5.U3.9. Rezumat ............................................................................................................. 220
M5.U3.10. Test de evaluare a cunotinelor....................................................................... 221
Tem de control .................................................................................................................. 222

Modulul VI. Prelucrarea imaginilor cu Gimp 2.6 .................................................................. 223


Introducere ......................................................................................................................... 223
Competene......................................................................................................................... 223
U1. Concepte de baz n GIMP 2.6 .................................................................................... 224
M6.U1.1. Introducere ......................................................................................................... 224
M6.U1.2. Obiectivele unitii de nvare .......................................................................... 224
M6.U1.3. Ferestre de lucru n GIMP 2.6 ........................................................................... 224
M6.U1.4. Lucrul cu imagini: salvare, dimensionare, comprimare, decupare, rotire ......... 226
M6.U1.5. Crearea unui logo ............................................................................................... 229
M6.U1.6. Crearea unui banner ........................................................................................... 229
M6.U1.7. Realizarea unui GIF animat ............................................................................... 230
M6.U1.8. Lucrul cu filtre n GIMP .................................................................................... 233
M6.U1.9. Animaii complexe............................................................................................. 236
M6.U1.10. Rezumat ........................................................................................................... 237
M6.U1.11. Test de evaluare a cunotinelor....................................................................... 238
Bibliografie......................................................................................................................... 240

Introducere
Cursul Tehnologii Web prezint o descriere a celor mai importante tehnologii web
utiflizate n dezvoltarea site-urilor web i aplicaiilor pentru Internet. Pe lng principiile de
baz folosite in web design, cursul prezint elemente teoretice i practice de lucru cu limbajul
HTML pentru crearea paginilor web, reguli CSS, limbajul Java Script, precum i utilizarea
elementelor grafice in web design.
Acest curs se adreseaz studenilor de la specializarea Informatic, nvmnt la
distan, dar i tuturor studenilor, inginerilor sau celor care doresc sa aprofundeze elementele
de web design.
Obiectivele cursului
Dup ce vor parcurge coninutul acestui curs, studentii vor putea s creeze
propriul site web, vor putea s i mbunteasc aspectul folosind stiluri n
cascad (CSS2 i CSS3), vor putea s creeze formulare interactive, folosind
Javascript, ca tehnologie de lucru pe partea de client.
Studenii vor putea deasemenea s realizeze site-uri care s aib n spate o baz de
date i s interacioneze cu un server (serverul Apache). Pentru aceasta vor putea
folosi PHP i MySql. Pentru realizarea de animaii uor ncorporabile ntr-un site
web, studenii vor nva s foloseasc VRML, iar pentru procesarea imaginilor
vor nva s lucreze cu GIMP.
Competene conferite
Dup parcurgerea materialului, studentul va fi capabil s:

neleag utilitatea tehnologiilor web n realizarea site-urilor

neleag principiile de design

realizeze proprul site care s includ diverse elemente HTML

stilizeze modul de afiare al informaiilor pe pagin folosind CSS

realizeze pagini web interactive (pe parte de client) folosind JavaScript

realizeze pagini web interactive (pe parte de server) folosind PHP

utilizeze limbajul Flex3 pentru uurina n realizarea unei aplicaii web

neleag modul de manifestare a lumii virtuale n Internet

realizeze propriile aplicaii de grafic 3D (static sau animat) pe care

s le includ mai apoi n site-uri


Resurse i mijloace de lucru
Pentru a parcurge acest curs i pentru a putea rula exemplele de apliaii
oferite de ctre acesta sau pentru a putea realiza aplicaiile propuse ca tem,
studenii vor avea nevoie de urmtoarele resurse materiale i logistice:
-

computer

conexiune la Internet

cel puin un browser instalat pe computer (Internet Explorer, Chrome,


Mozilla Firefox, Opera, etc)

un soft pentru a putea realiza aplicaii PHP (WinLAMP, XAMPP, etc)

un soft pentru a putea realiza aplicaii n Flex3 (Flex SDK)

un plug-in pentru browser pentru a putea vizualiza aplicaiile VRML


(Cortona 3D Viewer, Cosmo Player, FreeWRL, OpenVRML, etc)

un software pentru prelucrare de imagini (GIMP 2.6)

Structura cursului
Cursul de fa conine 6 module, respectiv: Modulul I: Introducere n tehnologiile
Web, Modulul II: HTML (Hyper Text Markup Language), Modulul III: Reguli
CSS (Cascading Style Sheets), Modulul IV: JavaScript, Modulul V: Alte
tehnologii pentru realizarea paginilor web i Modulul VI: Prelucrarea imaginilor
cu Gimp 2.6.
Modulul I conine o unitate de nvare, Modulul II este format din 4 uniti de
nvare i o tem de control, Modulul III este structurat pe 2 uniti de nvare i
are i acesta o tem de control, Modulul IV conine 3 uniti de nvare i o tem
de control, Modulul V este format din 3 uniti de nvare i o tem de control, iar
Modulul VI este format dintr-o singur unitate de nvare.
n total, numrul temelor de control este 4, fiecare dintre acestea reprezentnd
din nota de laborator. Enunurile temelor de control le vor fi transmise studenilor
i pe platforma eLearning, iar rezultatele vor fi ncrcate tot acolo.

Cerine preliminare
Nu sunt necesare cerine preliminare n vederea parcurgerii acestui curs i a
asimilrii informaiilor prezentate.
Durata medie de studiu individual
Fiecare unitate de nvare poate fi parcurs n 2 ore.

Evaluarea
Nota final pentru aceast disciplin este compus din:
-

30% pentru temele de control de pe parcursul semestrului

30% pentru proiectul de final de semestru

40% evaluarea scris

Chestionar evaluare prerechizite


Rspundei la urmtoarele ntrebri:
1. Ce este Internetul?
2. Care este utilitatea Internetului?
3. Care este scopul realizrii paginilor web?
4. Dai exemplu de minim 3 site-uri pe care le-ai accesat.
5. Dai exemplu de aplicaii de comunicare online.
6. Ce este un browser web?
7. Dai exemplu de minim 3 browsere web.
8. Ce limbaje de realizare a paginilor web cunoatei?

Modulul I. Introducere n tehnologiile Web


Cuprins
Introducere .................................................................................................................... 10
Competene ................................................................................................................... 10
U1. World Wide Web i principii generale de web design........................................... 11

Introducere
Principala atracie a Internetului o reprezint World Wide Web-ul. Acesta a
constituit partea cu dezvoltarea cea mai rapid i cea mai popular a Internetului
(cu excepia, probabil, a fluxului voluminos de e-mail de pe tot globul). Din punct
de vedere tehnic, Web-ul nu este dect o parte a Internetului sau mai corect spus, o
component, care permite navigarea prin Internet.
Web-ul reprezint o interfa, o fereastr spre Internet sau o metod de a
ajunge n locurile dorite.
Noiunile de interfa i navigare sunt importante n realizarea unui
design atragator, dar necesit i puin gndire i planificare. Conceptele utilizate
sunt lucruri foarte simple, care vor schimba rapid i cu uurin banalele pagini
Web, n pagini cu aspect profesionist.
Cele patru principii de baz, care permit ca o pagin Web s arate clar,
ordonat i profesionist sunt: alinierea, proximitatea, repetarea i contrastul.
Acetia sunt factorii de baz ai oricrei lucrri tiprite pe ecran sau
altundeva.
Competene
La sfritul acestui modul studenii vor fi capabili:
s neleag importana web design-ului n realizarea unui site
s defineasc noiunea de browser web i s o exemplifice
s utilizeze un browser web
s neleag principiile de baz ale web designului: alinierea, proximitatea,
repetarea, contrastul
s atrag atenia prin design asupra informaiilor importante atunci cnd
realizeaz o pagin web

10

U1. World Wide Web i principii generale de web design


Cuprins
U1.1. Introducere.................................................................. Error! Bookmark not defined.
U1.2. Obiectivele unitii de nvare................................... Error! Bookmark not defined.
U1.3. Evoluia Web-ului ...................................................... Error! Bookmark not defined.
U1.4 Browsere WEB ............................................................ Error! Bookmark not defined.
U1.5 Primii pai ctre construcia unui site.......................... Error! Bookmark not defined.
U1.6. Alinierea ..................................................................... Error! Bookmark not defined.
U1.7. Proximitatea................................................................ Error! Bookmark not defined.
U1.8. Repetiia...................................................................... Error! Bookmark not defined.
U1.9. Contrastul ................................................................... Error! Bookmark not defined.
U1.11. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined.
U1.10. Rezumat .................................................................... Error! Bookmark not defined.
U1.11. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined.

M1.U1.1. Introducere
La ora actual n lume exist milioane de calculatoare, care sunt folosite n
cele mai diverse domenii, multe dintre aceste calculatoare sunt legate ntre ele,
interconectate n forma reelelor de calculatoare. Multe dintre aceste reele sunt la
rndul lor conectate ntre ele, formnd inter-reele (reele de reele de calculatoare).
Denumirea de internet desemneaz o reea de reele ("net" nsemnnd n limba
englez "reea"). Cea mai mare intereea public (reea de reele de calculatoare cu
acces public) este reeaua Internet.
Principala atracie a Internetului o reprezint World Wide Web-ul. Acesta a
constituit partea cu dezvoltarea cea mai rapid i cea mai popular a Internetului
(cu excepia, probabil, a fluxului voluminos de e-mail de pe tot globul). Din punct
de vedere tehnic Web-ul, nu este dect o parte a Internetului sau mai corect spus, o
component, care permite navigarea prin Internet.
Web-ul reprezint o interfa, o fereastr spre Internet sau o metod de a
ajunge n locurile dorite. Popularitatea sa deriv din trei aspecte distincte i anume:
Mascheaz limbajul pretenios folosit pentru adresele Internet i pentru
comenzile specifice.
Grupeaz mai multe componente diferite ale Internetului ntr-o singur
interfa.
Permite ca pe lng citirea textului s se vizualizeze imagini, s se asculte
sunete i chiar s se urmreasc filme (n raport de resursele calculatorului
- client).
n ceea ce privete realizarea unui site web cu un design atragator, noiunile
de interfa i navigare sunt importante, dar necesit i un pic de gndire i
planificare. Conceptele utilizate sunt lucruri foarte simple, care vor schimba rapid
i cu uurin banalele pagini Web, n pagini cu aspect mult mai profesionist.
Cele patru principii de baz, care permit ca o pagin Web s arate clar,
ordonat i profesionist sunt: alinierea, proximitatea, repetarea i contrastul.

11

M1.U1.2. Obiectivele unitii de nvare


Aceast unitate de nvare i propune ca obiectiv principal o iniiere a
studenilor n interesanta lume a tehnologiilor web.
La sfritul acestei uniti de nvare studenii vor fi capabili s:
neleag importana web design-ului i a tehnologiilor web n realizarea
unui site profesionist
defineasc noiunea de browser web i s aduc exemple edificatoare
utilizeze diverse browsere web

tie s realizeze o pagin web cu elementele corect aliniate


grupeze corect elementele care se invecineaz pe pagin web, att din
punct de vedere fizic ct i logic
s identifice elementele din pagina web a cror proprieti ar trebui s se
repete
s atrag atenia asupra informaiilor principale dintr-o pagin web pe baza
contrastului cu celelalte informaii

Durata medie de parcurgere a primei uniti de nvare este de 2 ore.

M1.U1.3. Evoluia Web-ului


Un pas important n evoluia Web-ului a fost dezvoltarea browsererelor grafice, care
puteau fi rulate pe un PC desktop sau pe un Macintosh, permind utilizatorului s foloseasc
tehnicile familiare disponibile i n alte programe, ncorpornd formate de text i grafic n
ecranul de navigare etc. Primul program de acest tip a fost NCSA Mosaic, dezvoltat de
centrul naional pentru aplicaii de supercalculatoare i distribuit gratuit.
Web-ul a permis browserelor s afieze imagini chiar n mijlocul textului, fr a fi
nevoie s se cunoasc metoda de decodificare a fiierelor. Specialitii n mass media afirm c
o imagine conteaz ct o mie de cuvinte, imaginile din articolele de ziar sau din emisiunile
TV fiind incomparabil mai sugestive dect iruri lungi de text scris la main. Deci acest
ingredient final a permis ca Web-ul s par att sensibil, ct i interesant pentru persoana care
nu ar fi nvat niciodat ce nseamn o expresie obinuit in Unix.
Creatorii de browse Nestcape i Microsoft ncearc fiecare s dezvolte soluii globale
care s transforme produsele proprii n "platforme" ale tuturor operaiilor din Internet. La ora
actual existz companii care ofer conturi Internet gratuite, avnd o interfa pentru e-mail
bazat pe Web. Gratuitatea gzduirii site-urilor este condiionat de meninerea pe ecran a
unei ferestre publicitare. Exist i alte modaliti de a intra in lumea Internetului, fr a fi
nevoie de un calculator, cum ar fi Web TV (pentru care este nevoie de un televizor, un
modem, o tastatur i o telecomand), sau a unui modem, cum ar fi DirectPC (este nevoie de
un calculator i de o anten special pentru satelit).

12

Dezvoltarea Internetului, combinat cu apariia reelelor de tip Internet locale, de


dimensiuni mai mici, care funcioneaz dup principiile Internetului, a dus la cerine din
partea utilizatorului pentru ca partea de software s i ajute s recupereze documentele de la
distan, s colaboreze prin intermediul legturilor de reea i s salveze sau s publice
documente. Pentru a ndeplini aceste cerine, productorii de software au adugat
componentele Internet la programele lor.
O mare parte din elegana Internetului const n cantitatea impresionant de putere de
prelucrare i de stocare a programelor de dimensiuni mari i a informaiilor dense, operaii
care au loc n Internet i nu n calculatorul propriu. Calculatorul propriu - fie c este un PC, un
Mac sau o staie de lucru Unix - rmne doar o ramp de lansare ctre lumea Internetului.
Aceast structur comun de faciliti Internet este referit uneori cu expresia client-server.
Calculatorul personal (sau programul care ruleaz pe acesta) este clientul, iar sursa de
informaii sau site-ul World Wide Web este serverul. Serverele reprezint depozite
centralizate de informaii sau de manipulatori specializai pentru anumite tipuri de trafic.
Clientul nu trebuie dect s se conecteze la serverul potrivit i astfel foarte multe lucruri
interesante vor fi la dispoziia sa, fr a fi nevoie s suprancarce calculatorul propriu. Acesta
este unul din principalele motive pentru care nu are importan ce tip de calculator se
utilizeaz.
WWW este un sistem distribuit. Informaiile sunt plasate n mii de site-uri. Cnd
utilizatorul dorete o informaie, apeleaz site-ul care a publicat-o. Fiecare site i fiecare
pagin de informaii au o adres unic numit URL (Uniform Resource Locator URL =
identificator uniform al resursei). Aceat informaie publicat ntr-un site poate fi oricnd
actualizat de autorul site-ului.WWW devine din ce n ce mai mult un sistem interactiv.
Evoluia tehnologiilor Web l transform ntr-un mediu de comunicare. De exemplu,
includerea formularelor n paginile Web permite colectarea de informaii de la utilizator.
Termenii care se vehiculeaz n lumea Web-ului sunt:
Host Computer legat la Internet care gzduiete unul sau mai multe servere;
Server Web Software care administreaz site-uri web;
Site Web Colecie structurat de pagini web;
Pagin (document) web Coninutul unui fiier, afiat ca urmare a unei cereri a
utilizatorului;
Pagin home Pagina de intrare a unui site.
Un host poate gzdui mai multe tipuri de servere (FTP, Gopher, Web). Fiecare tip de
server are propriul tip de comunicaie cu Internet-ul. Protocolul de comunicaie al server-elor
web se numete HTTP (Hyper Text Transformer Protocol).
Un server web administreaz mai multe site-uri web. Un site conine una sau mai multe
pagini ntre care exist legturi. Pagina home este intrarea n site.
M1.U1.4 Browsere WEB
Pentru a accede la web, utilizatorul trebuie s aib instalat pe computerul su un
browser.
Browser-ul este o aplicaie cu trei funcii principale: accesul la informaii, formatare i
afiarea informaiilor. Utilizatorul furnizeaz browser-ului adresa paginii dorite (URL-ul).
Browser-ul solicit conectarea la server-ul web, pe baza protocolului HTTP. O dat
conectarea acceptat, server-ul transmite browser-ului fiierul cerut. Browser-ul formateaz
pagina i o afieaz pe monitorul utilizatorului.
Formatarea se face n funcie de:
indicaiile de formatare coninute n fiierul primit;
13

caracteristicile platformei cu care lucreaz utilizatorul.

Piaa are o ofert bogat de browsere disponibile pentru diverse platforme. Exist
browsere operaionale pe sisteme cu interfa grafic (Macintosh, Windows), dar i pe
sisteme cu interfa exclusiv textual. Poziia dominant pe pia este ocupat de Microsoft
Internet Explorer (IE) i Netscape Navigator (NN). IE este operaional sub Windows
(ncepnd cu 3.1), sub UNIX i pentru calculatoare Apple. Netscape Navigator este
component a unui set de instrumente Internet, numit Netscape Communicator al firmei
Netscape Communications Corporation. Componenta numit Netscape Composer permite
editarea paginilor Web. Netscape Navigator este operaional sub Windows, sub anumite
versiuni UNIX i pentru Apple.
M1.U1.5 Primii pai ctre construcia unui site
Dac se dorete realizarea unei pagini www, trebuie s apelm la o firm specializat,
numit provider. Provider-ul dispune de mai multe calculatoare foarte performante, numite
server-e i pune la dispoziie:
spaiu pe hard-ul server-ului de cel putin 10 MB;
o adres de Internet, de exemplu : www.adresa_student.ro.
n spaiul rezervat se pot pune mai multe fiiere care conin instruciuni HTML dar i
orice alte fiiere.
Definiie ([1]):
Prin site se nelege ansamblul:
spaiu hard;
fiierele pe care le conine;
adresa
Prin pagin se nelege coninutul afisat al unui fisier HTML.
Definiie ([1]):
Ansamblul regulilor care trebuiesc respectate pentru schimbul informaiilor de un
anumit tip se numete protocol.
Dac dorim s transferm fiiere ctre server sau invers, de la server ctre propriul
calculator se utilizeaz protocolul FTP (File Transfer Protocol).
Pentru a realize o pagin atractiv este bine s se utilizeze un design adecvat. n acest
scop se pot utiliza limbajele:
JavaScript,
PHP
Java (Applet)
Flash
etc.
Trebuie s se aib n vedere faptul c JavaScript ruleaz pe calculatorul vizitatorului, o
secven JavaScript este tradus i executat de ctre browser i este trimis acestuia odat cu
fiierul HTML.
Limbajul PHP este un limbaj de programare ce ruleaz pe server i este proiectat
special pentru WEB.
14

ntr-o pagin HTML putem ngloba cod PHP care va fi executat la fiecare vizitare a
paginii.
Limbajul PHP permite lucrul cu baze de date, n MySql.
Mysql este un sistem de gestiune a bazelor de date, foarte rapid i robust.
Aplicaiile scrise n PHP i MySql se ruleaz pe server.
Atenie: Nu toi provider-ii pun la dispoziie utilizatorilor posibilitatea utilizrii acestor
limbaje, deci o s trebuiasc s studiem oferta.
Exemple
Exemple de browsere web: Internet Explorer (IE), Mozilla Firefox, Opera,
Safari, Chrome, etc...

S se realizeze un studiu de caz despre istoricul browserelor web exemplificate


mai sus i s se precizeze anul n care a aprut fiecare versiune a acestora.

M1.U1.6. Alinierea
Alinierea nseamn c elementele de pe pagin sunt aliniate unele n raport cu celalalte.
Lipsa alinierii este principala problem de pe paginile Web. Aceasta reprezinta o problem
important i pe paginile tiprite, ns pare i mai prezent i mai dezastruas pe paginile
Web. Nimic nu trebuie aezat la ntmplare pe pagin. Se creeaz un aspect curat, sofisticat i
proaspt al paginii dac fiecare element are o legatur vizual cu un alt element de pe pagin.
Alinierea elementelor dup latura stng, dreapt sau centrat trebuie s urmeze o
anumit regul, i anume:
Alegeti UNA. Se alege o singur aliniere care se utilizeaz pe toat pagina.
Dac se opteaz pentru a se alinia textul de baz n stnga, nu se pune titlul pe centru;
Dac se aliniaz centrat o parte din text, atunci se aliniaz centrat peste tot.
Nu amestecai alinierile.
Acest singur principiu va modifica radical aspectul paginilor.
Se pot face alinieri verticale, orizontale i centrale.
O aliniere centrala se poate spune c este :
echilibrat;
simetric;
calm;
oficial.

Aliniind o parte din text la stanga, o parte la dreapta i o parte centrat, se creaz senzaia
de dezordine i se transmite impresia de amatorism.
Dac se aliniaza textul i imaginile, este bine s ndeprtm textul de marginea stng.
Este obositor i distrage atenia s dam cu ochii de marginea stng a paginii browserului de
fiecare dat cnd trecem la rndul urmtor. Cnd decalm text (operaie de indentare), se

15

poate face i din partea dreapt, impiedicnd formarea rndurilor de text lungi i dificil de
citit.

Text pe butoane neglijent realizat (vezi figura de mai sus)


Alinierea orizontal este la fel de important ca i cea vertical. Este important s
vedei butoane ca n exemplul de mai sus, n care literele nu se aliniaz pe orizontal. Aceast
deplasare sus/jos/sus/jos face ca toat maneta s arate dezordonat. De aceea, pe lng
alinierea vertical trebuie s fim ateni i la alinierea orizontal a butoanelor i legturilor.

Text pe butoane corect realizat (vezi figura de mai sus)

Literele stau pe o linie invizibil numit linie de baz. Maneta de legturi este mai
ordonat i mai organizat dac aliniem tot textul pe aceeai linie de baz. n majoritatea
software-lor create pentru Web exist un buton pentru alinierea dup linia de baz, de obicei
n specificaiile pentru tabele.

16

Formular incorect realizat din punct de vederea al web design-ului (vezi


formularul de mai sus)
Formularul acesta ncepe excelent; exist cteva alinieri foarte bune, bine definite, dar i
locuri n care textul pare s fi fost trntit aleatoriu pe pagin.
Alinierea vertical n partea lateral a formularului las de dorit. Consolidm aspectul
paginii, aliniind celalalte elemente dup aceast linie.
Totul trebuie s aib un motiv pentru a-i justifica locaia deoarece, nimic nu trebuie
plasat arbitrar pe pagin. Nu azvrlim pur i simplu elementele i vedem cum i unde se
lipesc. Trebuie s putem explica motivul pentru care un element se afl n acel loc.
O pagin, poate s fie instantaneu folosit, prin alinierea tuturor elementelor dup o
latur i pagina arat mult mai organizat. Dac lucrurile sunt organizate, ele comunic mult
mai bine.
Alinierea nu nseamn c totul este aliniat dupa aceeai latur. nseamn pur i simplu
c totul are aceeai aliniere fie lipit la stnga, fie lipit la dreapta, fie centrat.
Cnd o margine bun se repet, ea ctig n for.

17

Exemplu
Formular corect realizat din punct de vederea al webdesign-ului
(vezi formularul de mai sus) Mai sus am dat un mod de aliniere optim, pentru
formularul creat anterior. Se observ linia vertical dup care se aliniaz
csuele text, checkbox sau cea de submit. Formularul arat mult mai bine.

M1.U1.7. Proximitatea
Proximitatea se refer la relaiile dintre elemente, cnd acestea sunt foarte aproape. Pe
o pagin, componentele aflate n legatur cu altele trebuie sa fie grupate. Dac anumite
componente se afl n apropierea altora, ele devin o singur unitate din punct de vedere
vizual, astfel informaiile pot fi organizate mai bine i permite astfel s dispar orice confuzie.
Se pare c exist o fric fa de spatiul liber. Pagina pare neorganizat dac elementele
de machetare sunt mprtiate peste tot, fiind posibil ca informaia s devin mai greu
accesibil.
Principiul proximitii spune c trebuie s se grupeze componentele aflate n legtur, s
fie mutate mai aproape unele de altele, a.i. s fie percepute ca un grup unitar, nu ca o grmad
de elemente fr legtur. Componentele i grupurile de informaii care nu au legatur unele
cu altele nu trebuie s se afle n proximitate (vecintate).
Exemplu
Dorim s realizm o carte de vizit care cuprinde 5 elemente
18

(componente) separate (vezi figura de mai jos). n acest caz ochiul se oprete
de cinci ori. Ochiul ncepe s citeasc n mijloc, deoarece textul este bold.
DIRECTOR S.C. PISOI

(0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123

Brasov

Dac complicm problema, adic mai ngrom alte elemente, vom vedea c ne vom
plimba privirea ntre cuvintele ngroate.

DIRECTOR S.C. PISOI

(0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123

Brasov

Proximitatea sau apropierea nseamn o relaie.


O problem a crii de vizit anterioare este faptul c nici una dintre componente nu
pare a fi n legatur cu alta. Dar dac fac o rearanjare a componentelor de pe cartea de vizit,
aceasta arat cu totul altfel, componentele care au o legatura ntre ele fiind grupate. Aceste
componente sunt mai aproape unele de altele (vezi figura de mai jos).

19

VICTOR GABRIEL MOTANEL


DIRECTOR S.C. PISOI

Str. Leului nr.123


Brasov
(0268) 956419
Uneori, atunci cnd se grupeaz componentele foarte apropiate, este nevoie s se
modifice cte ceva, de exemplu mrimea, ponderea sau aezarea textului ori a desenelor.
Componente aflate n apropiere unele de altele devin o unitate vizual, nu trebuie
organizate ca uniti separate. Deci componentele cu legtur ntre ele trebuie grupate
mpreun.
Principiul proximitii are ca scop de baz organizarea paginii.
Dac pe pagin exist mai mult de trei pn la cinci componente, trebuie vzut care
dintre elementele separate pot fi grupate, mai apropiat, pentru a deveni o unitate vizual.
Proximitate nu nseamn c totul este apropiat, ci c elementele care sunt legate din
punct de vedere al semnificaiei lor, ntre care exist un fel de relaie privitoare la ceea ce
comunic, trebuie s fie conectate i vizual.
Informatia dintr-o pagin trebuie mai nti grupat din punct de vedere al semnificaiei,
apoi aezat din punct de vedere fizic pe pagin. Informaia secundar trebuie s fie mai
distanat, astfel nct s se vad c este vorba despre o completare a informaiei principale.
M1.U1.8. Repetiia
Principiul repetiiei spune c anumite pri ale machetrii trebuie repetat n ntreaga
lucrare. Se poate repeta de exemplu un font ngroat, o linie groas, un anumit tip de marcaj,
un element de design, etc. Poate fi orice element care poate fi recunoscut de vizitator.
Relum cartea de vizit i organizm informaia altfel (vezi figura de mai jos).
Observm c dup ce am privit informaia de pe aceast carte de vizit, ochii rmn
agai de nume, deorece este ngroat i subliniat.
Dar totusi avem senzaia de neterminare. Urmtoarea figur prezint aceiai carte de
vizit dar n care am ngroat i ultima informaie, astfel ochiul se uit la nume i la numrul
de telefon.

20

VICTOR GABRIEL MOTANEL


DIRECTOR S.C. PISOI
Str. Leului
nr.123
Brasov
(0268)
956.41.93

VICTOR GABRIEL MOTANEL


DIRECTOR S.C. PISOI
Str. Leului
nr.123
Brasov

( 0268 )
956.41.93
M1.U1.9. Contrastul

Contrastul este cea mai eficient cale de a aduga valoare vizual paginii noastre.
Principiul contrastului spune c dac dou componente nu sunt exact la fel, atunci trebuie
s fie complet diferite.
Regula de aur n utilizarea contrastului spune c pentru a fi eficient, contrastul trebuie
s fie puternic.
Contrastul poate fi creat n mai multe moduri, de exemplu punem n contrast:
un font mare cu unul mic;
un font elegant cu unul ngroat;
o culoare rece cu una calda;
un element orizontal ( ex. un rnd lung de text) cu unul vertical (ex. o coloan
de text nalt i ngust);
rnduri cu spaii multe ntre ele cu rnduri dese;
un desen mare cu unul mic.

21

Atenie! Nu putem pune n contrast maro nchis cu negru sau un font de 14 puncte
cu unul de 16 puncte.
Exemplu
Fie un anun pentru obinerea unei burse Socrates n cadrul Facultii
de MI. Sunt prezentate dou variante. Se observ c ambele variante conin
aceleai informaii doar c al doilea anun conine mai mult contrast i ne uitm
cu mult mai mult plcere la cel de-al doilea anun.

BURSE SOCRATES 2007 !


Condiii de aplicare
Integralist
Depunere dosar care s cuprind: CV, Scrisoare de intenie, situaia
colar
Participare la testul de limb strain
Termen limit de depunere dosar la Decanatul Facultatii MI:
14.04.2007
Universiti partenere:
University Oldenburg
University Dortmund
University of Applied Sciences Fulda,
University of Applied Sciences Wiesbaden,
University of Applied Sciences Mittweida
Contrastul n formularul modificat este evident.
Am folosit un font mai puternic i am ngroat titlurile.
Fontul folosit l-am repetat i n titlul paginii.
Titlul l-am transformat din majuscule n litere mici i astfel am avut posibilitatea s
folosesc o dimensiune mai mare a fontului, pe care l-am ngroat.
Totodat am scris titlul cu alb pe fond negru (banda neagr). Astfel am mrit contrastul.
Contrastul nu numai c face pagina mai atractiv, ci i clarific scopul i organizarea
documentului.

22

Burse Socrates 2007 !


Condiii de aplicare

Integralist
Depunere dosar care s cuprind :
o
CV,
o
Scrisoare de intenie,
o
situaia colar

Participare la testul de limb strain


Termen limit de depunere dosar

Decanatul Facultatii MI;

14.04.2007

Universiti partenere:

University Oldenburg
University Dortmund
University of Applied Sciences Fulda
University of Applied Sciences Wiesbaden
University of Applied Sciences Mittweida

S se realizeze schia unei pagini web pe o tem la alegere, respectnduse principiile explicate i exemplificate mai sus.
M1.U1.11. Test de evaluare a cunotinelor
Realizai o carte de vizit pentru o firm ce comercializeaz produse IT.
Teste clasice sau gril a cror rspuns nu trebuie precizat n material dar
care pot fi dezbtute n cadrul Activitilor Tutoriale sau Aplicative.

S ne reamintim...

Browser-ul este o aplicaie cu trei funcii principale: accesul la informaii,


formatare i afiarea informaiilor. Utilizatorul furnizeaz browser-ului adresa
paginii doritE, browser-ul solicit conectarea la server-ul web, server-ul
23

transmite browser-ului fiierul cerut, iar la final browser-ul formateaz pagina


i o afieaz pe monitorul utilizatorului.
Prin site se nelege ansamblul format din spaiu hard, fiierele pe care le
conine i adresa
Prin pagin web se nelege coninutul afisat al unui fisier HTML.
Alinierea ntr-o pagin web nseamn c elementele de pe acea pagin sunt
aliniate unele n raport cu celalalte
Proximitatea se refer la relaiile dintre elemente, cnd acestea sunt foarte
aproape - pe o pagin, componentele aflate n legatur cu altele trebuie sa fie
grupate.
Principiul repetiiei spune c anumite pri ale machetrii trebuie repetat n
ntreaga lucrare.
Contrastul este cea mai eficient cale de a aduga valoare vizual paginii
noastre - regula de aur n utilizarea contrastului spune c pentru a fi eficient,
contrastul trebuie s fie puternic.

M1.U1.10. Rezumat

Un pas important n evoluia Web-ului a fost dezvoltarea browserelor grafice,


care puteau fi rulate pe un PC desktop sau pe un Macintosh, permind
utilizatorului s foloseasc tehnicile familiare disponibile i n alte programe,
ncorpornd formate de text i grafic n ecranul de navigare.
WWW este un sistem distribuit. Informaiile sunt plasate n mii de site-uri.
Cnd utilizatorul dorete o informaie, apeleaz site-ul care a publicat-o.
Fiecare site i fiecare pagin de informaii au o adres unic numit URL
(Uniform Resource Locator URL = identificator uniform al resursei)
Browser-ul este o aplicaie cu trei funcii principale: accesul la informaii,
formatare i afiarea informaiilor.
Pentru a realiza un site web frumos structurat i atractiv este absolut necesar
s se respecte principiile de baz ale realizrii designului unei pagini web.
Aceste principii sunt: alinierea, proximitatea, repetarea i contrastul.
Prin aliniere nelegem faptul c elementele de pe o pagin web vor trebui
aliniate unele n raport cu celelalte. Prin proximitate se nelege faptul c
elementele care au un context comun i sunt situate unele n apropierea
celorlalte se vor grupa i vor constitui un totunitar. Repetiia sugereaz faptul
c anumite proprieti ale elementelor de pe pagin trebuiesc repetate pentru
a produce simetrie i senzaia de ordine. Contrastul este cel care ajut la
scoaterea n eviden a anumitor informaii pe baza atribuirii unor proprieti
"diametral opuse" fa de alte elemente mai puin importante. Se poate crea
contrast de culoare, de form, de font, etc.

24

M1.U1.11. Test de evaluare a cunotinelor


Alegei rspunsul corect la urmtoarele ntrebri:
1. Care dintre variantele enumerate reprezint denumirea unui browser web:
a. Yahoo
b. Safari
c. Gmail
2. HTML este acronimul pentru:
a. Home Tool Markup Language
b. Hyper Tool Markup Languages
c. Hyper Text Markup Language
3. Cine realizeaza standardul HTML
a. Microsoft
b. Google
c. Consoriumul World Wide Web
4. Pentru a realiza o pagin web corect proporionat i clar, trebuiesc respectate
principiile:
a. alinierea, proximitatea, repetarea i contrastul
b. alinierea, proximitatea, spaierea i asemnarea
c. alinierea, contrastul, asemnarea i coloritul
5. Care dintre variantele enumarate NU reprezinta un motor de cutare:
a. Yahoo
b. Google
c. Chrome
Rspunsuri corecte: 1b, 2c, 3c, 4a, 5c

25

Modulul II. HTML (Hyper Text Markup Language)


Cuprins
Introducere .................................................................................................................... 26
Competene ................................................................................................................... 27
U1. Crearea unui document HTML i stilurile blocurilor text ..................................... 28
U2. Tabele ..................................................................................................................... 54
U3. Imagini i ancore .................................................................................................... 66
U4. Formulare ............................................................................................................... 80
Tem de control ............................................................................................................ 87

Introducere
O versiune mai veche a HTML-ului folosea unele idei i modificri propuse
pentru HTML 3, care au fost abandonate la apariia HTML 3.2.
HTML 4 propune separarea stilurilor fizice de marcarea coninutului printr-o
folosire mai intens a foilor de stil. Elementul frame este acum definit oficial
altundeva dect n produsele firmelor Nestcape sau Microsoft. Include elementele
style, div, span pentru ncorporarea foilor de stil.
Eticheta object este de asemenea extins, astfel s includ practic orice fiier
extern care se dorete introdus ntr-o pagin Web. Sunt introduse etichetele ins i
del, acronym, colgroup, fieldset, button.
HTML e un limbaj bazat pe SGML (Standard Generalized Murkup
Language = Limbaj Standard Generalizat de Marcare) care este un standard
internaional ce a fost aprobat n 1986 i care permite crearea de documente
hipertext pentru paginile Web.
Principalele caracteristici ale limbajului SGML sunt:
1.
2.
3.
4.

Descrierea structurii documentului;


Nu este descris aranjarea n pagin;
Permite fiecrui navigator s aib propria prezentare;
Un document HTML poate fi reutilizabil.

Standardul oficial HTML este dat de World Wide Web Consortium (W3C)
care este afiliat la Internet Engineering Task Force (IETF). W3C a enunat cteva
versiuni ale specificaiei HTML, printre care i HTML 2.0, HTML 3.0, HTML 3.2,
HTML 4.0, HTML 4.01 i, cel mai recent, HTML 5.0. Fiecare din aceste standarde
este mai mult sau mai puin suportat de ctre toate sau o parte din browsere.
La ora actual HTML 4.0 si HTML 4.01 sunt larg utilizate i au fost deja
publicate specificaiile HTML 5.0. Obiectivul HTML5 este acela de a mbogi

26

suportul pentru aplicaiile multimedia prin aducerea laolalta a capabilitilor oferite


de HTML4, cu XHTML i JavaScript.
Limbajul HTML ofer proiectanilor de pagini Web urmtoarele posibiliti:
1. S publice documente cu headere, texte, tabele, liste, fotografii, etc;
2. S regseasc on-line informaiile prin intermediul hiperlink-urilor
printr-un simplu click de mouse;
3. S proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la
distan pentru cutri de informaii sau pentru activiti specifice
comerului;
4. S includa foi de calcul tabelar, clipuri video, sunete i alte aplicaii
direct n documente.
Elementul esenial diferit adus de versiunea 4.0 i mai ales 4.01 fa de
versiunea 3.2 este posibilitatea separrii structurii unui document de prezentarea
lui prin introducerea stilurilor de documente (style sheet).
Prin utilizarea limbajului HTML4 pentru structurarea unui document i a
style sheet-urilor pentru a stiliza prezentarea acestuia, se poate obine mult mai
uor independena de periferic/computer/platforma hard-soft.
Deoarece HTML5 aduce elemente noi care permit includerea obiectelor
multimedia sau a graficelor, fr a mai avea nevoie de plugin-uri, se vor putea crea
aplicatii mult mai complexe utilizndu-se doar limbajul HTML.
Limbajul HTML a fost preferat pentru publicaii pe Web n primul rnd
datorit simplitii sale i n al doilea rnd deoarece permite formatarea textului
ASCII cu tag-uri n format ASCII.
Competene

La sfritul acestui modul studenii vor fi capabili:


s neleag i s utilizeze tag-urile HTML
s defineasc i s utilizeze tag-uri pentru introducerea textului
s formateze un text folosind tag-uri i atribute ale acestora
s utilizeze tabele pe pagina web
s formateze un tabel
s introduc n pagina web imagini i link-uri
s creeze formulare

27

U1. Crearea unui document HTML i stilurile blocurilor text


Cuprins
U1.1. Introducere.................................................................. Error! Bookmark not defined.
U1.2. Obiectivele unitii de nvare................................... Error! Bookmark not defined.
U1.3. Structura de baz a unui document HTML ................ Error! Bookmark not defined.
U1.4. Tag-uri HTML ............................................................ Error! Bookmark not defined.
U1.5. Tag-uri din cadrul documentului HTML.................... Error! Bookmark not defined.
U1.6. Culori, fonturi, margini .............................................. Error! Bookmark not defined.
U1.7. Tag-ul Body................................................................ Error! Bookmark not defined.
U1.8. Tag-ul Basefont (textul de baz) ................................ Error! Bookmark not defined.
U1.9. Stiluri fizice ................................................................ Error! Bookmark not defined.
U1.10. Stiluri logice ............................................................. Error! Bookmark not defined.
U1.11. Tag-ul font (configurarea font-urilor) ...................... Error! Bookmark not defined.
U1.12. Blocuri de texte ........................................................ Error! Bookmark not defined.
U1.13. Linii orizontale ......................................................... Error! Bookmark not defined.
U1.14. Rezumat .................................................................... Error! Bookmark not defined.
U1.15. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined.

M2.U1.1. Introducere
HTML = Hyper Text Markup Language este limbajul de baz al WWW i
const dintr-un set standard de coduri care specific n ce mod documentele vor fi
afiate pe ecran de ctre navigatoare.
Caracteristica important a limbajului este portabilitatea, adic orice
document surs HTML va arta identic pe orice tip de calculator i n orice sistem
de operare, sarcina interpretrii sale revenind diverselor navigatoare.
Unul dintre elementele principale i poate cel mai important dintr-o pagin
web l constituie textul. Acesta este cel care poart n sine informaia pe care
creatorul site-ului dorete s o transmit cititorilor. Pentru ca informaia s ajung
la publicul int aa cum este ateptat, aceasta trebuie expus ntr-un mod plcut.
Modurile de reprezentare ale textului ntr-o pagin web sunt foarte diverse din
punctul de vedere al impactului vizual.
Se pot alege diferite stiluri pentru caracterele din textul unei pagini web,
putndu-se astfel seta: dimensiunea, culoarea, marginile, grosimea, nclinarea,
tipul de subliniere, etc.

M2.U1.2. Obiectivele unitii de nvare


Aceast unitate de nvare i propune iniierea studenilor n crearea unei
pagini HTML i n lucrul cu blocurile text.
La sfritul acestei uniti de nvare acetia vor putea:

s creeze structura de baz a unei pagini HTML

28

s pun culoare pe o pagin web


s coloreze, s dimensioneze i s alinieze textul dintr-o pagin web
s seteze n mod corect marginile paginii web

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

M2.U1.3. Structura de baz a unui document HTML


Orice document HTML ncepe cu marcajul (tag-ul) <html> i se termin cu marcajul
(tag-ul)</html>.
Un marcaj poate avea unul sau mai multe atribute care se specific prin perechi de
forma: nume="valoare". Se recomand ca valorile atributelor s fie plasate ntre ghilimele
(" ").
Marcajele dintre aceste paranteze unghiulare transmit comenzi ctre browser pentru a
afia pagina ntr-un anumit mod.
ntre cele doua marcaje <html> i </html> apar dou seciuni;
1. Seciunea de antet delimitat de marcajele
<head> TEXT </head>;
2. Corpul documentului care este delimitat de marcajele
<body> CORPUL TEXTULUI </body>.
Un marcaj poate fi scris att cu litere mici, ct i cu litere mari. Deci limbajul HTML nu
este CASE sensitive.
Comentariile din cadrul documentelor HTML se realizeaz utiliznd tag-ul urmtor :
<!AICI APARE UN COMENTARIU -->.
Orice ir de caractere ncadrat de aceste elemente va fi ignorat de programele de
navigare Web.
Structura de baz a unui document HTML este:
<html>
<head>
Informaia
</head>
<body>
Corpul fiierului

29

</body>
</html>
Un fiier HTML este creat cu orice editor de texte cu meniunea c fiierul trebuie salvat
cu extensia html sau htm.
M2.U1.4. Tag-uri HTML
n limbajul de marcare a hipertextului totul se rezum la structur. Un limbaj de marcare
este folosit pentru a descrie care este rolul fiecrei pri din document n raport cu celelalte.
Terminologia HTML:
a) atribut: furnizeaz instruciuni adiionale despre o etichet. Informaiile
variaz de la etichet la etichet i pot include subiecte cum ar fi locaia
fiierelor, mrimea, numele lor sau stiloul lor;
b) browser: este un motor de parcurgere special care evalueaz etichetele i
coninutul unui fiier HTML, pe care l afieaz n concordan cu posibilitile
i regulile platformei i capacitile sale;
c) element: o component distinctiv a structurii unui document, cum ar fi titlul,
un paragraf sau o list. Cnd ne referim la forma sa aplicat n cadrul unui
document, un element se mai numete etichet (tag);
d) etichet: un cod care identific un element pentru ca browserul sau alt program
de parcurgere s tie n ce mod s afieze coninutul. Etichetele sunt ncadrate
de caractere de delimitare (paranteze ascuite) Ele sunt ntotdeauna cuprinse
ntre paranteze unghiulare (<>) iar utilizarea literelor mici sau mari n scriere
nu are importan.
Documentele HTML sunt fiiere text (ASCII). n text sunt inserate o serie de coduri aa
numitele tag-uri sau marcaje care stau la baza modurilor de afiare a documentului. Un
document HTML este compus din tag-uri i text curat. Documentele au componente
asemntoare cum ar fi titluri, tabele, liste, paragrafe, etc.
Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot
conine text, grafic sau alte elemente. Tag-urile sunt de forma pereche nceput-sfrit:

<tag>.............................</tag>
tagul de
nceput

coninut arbitrar

tagul de sfrit care are


caracterul slash (/ )

Scrierea perechilor de legturi:

30

CORECT

INCORECT

<tag1>

<tag1>

<tag2>

<tag2>

</tag2>

</tag1>

</tag1>

</tag2>

M2.U1.5. Tag-uri din cadrul documentului HTML


Fiecare document HTML, nc de la creare are dou pri principale: un antet i un corp.
Chiar dac nu sunt special delimitate, HTML presupune existena lor. HTML ofer de
asemenea ansa de a aduga i alte componente funcionale paginii, sub forma foilor de stil,
scripturilor i seturilor de cadre.
Dei fac parte din definirea unui document HTML, dou etichete exist n afara
structurii documentului: doctype i html. Prima identific versiunea de HTML folosit pentru
pagina respectiv i regulile pe care acestea le respect. A doua etichet identific un limbaj
global i direcia textului pentru documentul respectiv, n plus marcheaz nceputul i sfritul
coninutului HTML.
Documentul HTML se indic prin tag-ul HTML
<HTML>.........................</HTML>
Vom prezenta numai o parte din tag-urile HTML, care sunt importante n realizarea
unui design atragator.

M2.U1.6. Culori, fonturi, margini


O pagin Web poate fi setat prin:
- alegerea culorii de fond
- alegerea culorii textului i
- alegerea dimensiunilor paginii

Stabilirea culorii n tag-uri


Culoarea se obine din amestecul a celor trei culori fundamentale: rou, verde i
albastru.
Culoarea de fond a unei pagini se specific astfel :
nume de culoare. Astfel sunt disponibile cel puin 16 nume de culori, astfel avem
urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy,
olive, purple, silver, teal, white i yellow.

31

secventa hexazecimala #rrggbb unde r,g sau b sunt cifre hexazecimale i pot lua
valorile din multime {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F};astfel
se pot defini 65536 de culori.
functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale
{0,1,2255}

M2.U1.7. Tag-ul Body


Tagul body are o list de atribute incluse dup denumirea tagului i delimitate prin
spaiu. Proprietile principale ale acestui tag sunt cele care definesc fundalul paginii, fie c
este vorba de o culoare sau de o imagine.
Atribute ale acestui marcator: bgcolor, background, text, leftmargin, topmargin
Aceste atribute se vor evidenia n exemplele urmatoare.

Culoare pentru fundalul paginii


Culoarea unei pagini se precizeaz prin intermediul atributul bgcolor.
Sintaxa:
<body bgcolor = culoare>
Semantica:
culoare se stabilete dup modelul precizat n sect1.
Exemplu
Pagin Web cu fundalul de culoare cyan:

32

Culoarea textului
Definirea culorii textului pentru o pagin Web se face prin intermediul atributului text
al etichetei <body>
Sintaxa:
<body text = culoare>
Semantica:
culoare se precizeaz la fel ca la exemplul precedent.
Exemplu
Pagina Web urmtoare are textul de culoare roie:

Atribute multiple
O etichet poate s aib mai multe atribute.
O etichet cu trei atribute are urmatoarea sintax:
Sintaxa:
<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>

Exemplu
Pagin Web cu textul de culoare albastr i fondul de culoare galben:
33

S se realizeze o pagin web de culoare portocalie care s conin mai


multe linii de text de culoare verde.

Marginile paginii Web


Se face cu ajutorul a dou atribute ale etichetei <body>:
leftmargin distana dintre marginea din stnga a ferestrei browserului i
marginea din stnga a coninutului paginii
topmargin distana dintre marginea de sus a ferestrei browserului i
marginea de sus a coninutului paginii
Valorile care se pot atribui celor dou atribute sunt :
numere ntregi pozitive, care indic distana dintre coninutul ferestrei i
fereastra browserului, distan msurat n pixeli
un procent, ce reprezinta procent din limea, respectiv nlimea
ferestrei browserului

34

M2.U1.8. Tag-ul Basefont (textul de baz)


Atributele de baz ale textului dintr-o pagin web sunt:
Mrime (size)
Culoare (color)
Font (style)
Sintaxa:
<basefont size = numr color = culoare style = font>
Semantica:
numr poate lua una dintre valorile din mulimea {1, 2, 3, 4, 5, 6, 7 }
(valoarea 1 fiind pentru fontul cel mai mic i valoarea 7 pentru fontul cel mai
mare)
culoare se precizeaz prin nume sau prin RGB
font poate fi un font generic din multimea {serif, sans serif, cursive,
monospace, fantasy, Times New Roman, Helvetica, Arial }
Eticheta (Tag-ul) Basefont este valabil pn la sfritul paginii sau pn apare
urmtoarea etichet <basefont>.

35

n cazul n care eticheta <basefont> lipsete, textul din pagina Web are atributele
prestabilite i anume:
size=3,
color=black
style=Times New Roman

S se realizeze o pagin web de culoare albastru deschis n care s se scrie


o poezie cu 2 strofe. Titlul poeziei va avea culoarea verde, prima strof va fi scris
cu maro, iar cea de-a doua cu rou. Titlul va avea dimensiunea mai mare dect restul
poeziei.

M2.U1.9. Stiluri fizice


Caractere: ngroate (tag-ul <b>), cursive (tag-ul <i>)
Un bloc de text apare ngroat n pagin dac este inclus ntre <b> text </b> .
Un bloc de text inclus ntre etichetele <i> text </i> este scris cu caractere cursive.

36

Aceste tag-uri sunt valabile, dar sunt mai vechi. Variantele mai noi pentru scrierea
textului ngroat sunt realizate cu ajutorul etichetei <strong>, iar pentru scrierea textului
nclinat se folosete eticheta <em>.
Exemplu
Text scris normal vs text scris ngroat.

Exemplu
Text scris normal vs text scris nclinat.

37

Caractere: mrite (tag-ul <big>), micorate( tag-ul <small>)


Un text inclus ntre etichetele <big> text </big> este scris cu caractere mai mari cu o
unitate dect dimensiunea curent.

38

Un text inclus ntre etichetele <small> text </small> este scris cu caractere mai mici cu
o unitate dect dimensiunea curent.
Exemplu
Text scris normal vs text scris ngroat.

39

Caractere:indice superior i indice inferior


Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele
<sub> i </sub>.
Secvenele de text aliniate ca indice superior (super-script) sunt incluse ntre etichetele
<sup> i </sup>.

40

Caractere: subliniate i secionate


Eticheta de tip bloc <u> text </u> insereaz un bloc de caractere subliniate.
Etichetele <strike> i </strike> sau <s> i </s> insereaz un bloc de caractere secionate
la mijloc cu o linie orizontal.

S se scrie pe o pagin web urmtoarea ecuaie:

M2.U1.10. Stiluri logice


Stilurile logice sunt bazate pe cele fizice. Modul lor de aciune depinde n mare msur
de de browserul utilizat.

41

Blocuri de caractere evideniate


Urmtoarele dou etichete pun n eviden prin stilul cursiv fragmente de text:
<cite> text </cite> (cite = citat)
<em> text </em> (emphasize = a evidenia)
Exemplu
Aceste dou etichete de mai jos sunt echivalente cu eticheta <i> </i>.

Blocuri de caractere monospaiate


Etichetele urmatoare permit scrierea fragmentelor de text cu caractere monospaiate de
diferite tipuri
<code> text </code> (code = cod sau surs)
<kbd> text </kbd> (keyboard = tastatur)
<tt> text </tt> (teletype = teleprinter)
<var>text</var> (variable = variabile)
<cite>text</cite> (citation = citare)
<dfn>text</dfn> (definition = definirea unor termeni)

42

M2.U1.11. Tag-ul font (configurarea font-urilor)


Un font are urmtoarele atribute:
culoarea
- se stabilete cu atributul color
tipul sau stilul
- se stabilete cu atributul face
mrimea
- se stabilete cu atributul size
mrimea n puncte tipografice (este stabilit prin atributul point-size)
grosimea
- se definete cu atributul font-weight
Culoarea fontului
Pentru a scrie un text cu o anumita culoare se ncadreaz acest text ntre delimitatorii
<font> text</font> n felul urmtor:
Sintaxa:
<font color = culoare>text de culoarea specificat </font>
Semantica:
culoare va reprezenta culoarea fontului

43

Familia fontului
Tipul de font se stabilete prin atributul face al etichetei <font>.
Fonturile pot fi separate prin virgul.
Cele cinci familii generice de fonturi sunt:
serif
sans serif
cursive
monospace
fanatasy
Pot fi utilizate i alte fonturi specifice cum ar fi:
Times (tip particular de font serif)
Helvetica (tip particular de font sans serif)
Arial

44

Courier (tip particular de font monospace)


Western (tip particular de font fantasy) , etc.
Exemplu
<font face=Arial, serif, monospace>.
Browserul va utiliza primul font pe care l recunoate.

Mrimea fontului
Marimea fontului se indic cu atributul size al etichetei <font>.
Acest atribut poate lua urmtoarele valori:
1, 2, 3, 4, 5, 6, 7 (1= cel mai mic font, 7= cel mai mare font);
-1, -2, -3, etc. pentru a micora dimensiunea fontului cu -1, -2 fa de
dimensiunea curent;
+1, +2, +3, etc. pentru a mri dimensiunea fontului cu +1,+2,.. fa de
dimensiunea curent;
O alt metod de stabilire a mrimii unui font este prin utilizarea atributului point-size
al etichetei <font> i reprezint mrimea fontului n puncte tipografice. Acest atribut poate
lua ca si valori orice numar natural pozitiv.
Observaie! Atributul pointsize funcioneaz numai cu Netscape Comunicator.

45

Grosimea unui font


Grosimea poate fi definit cu cu atributul font-weight al etichetei <font>.
Valorile pe care le poate lua atributul font-weight sunt: 100, 200, 300, 400, 500, 600,
700, 800 i 900 (100 fontul cel mai subire, 900 fontul cel mai gros)

M2.U1.12. Blocuri de texte


a) Inserarea unei adrese
Inserarea unei adrese se face cu ajutorul etichetei <address> </address>. Textul este
afiat cu caractere cursive.

46

b) Indentarea unui bloc de text


Un bloc de text indentat este un bloc de text la care marginea din stnga a textului este
deplasat la o anumit distan de marginea paginii.

Codul HTML al acestei pagini l vei putea vedea n imaginea de mai jos.

47

Blocuri <div>
Delimitarea i formatarea unui bloc de text se face cu delimitatorii <div> text</div>.
Blocul <div> are urmatoarele atribute :
align (aliniere).
Valorile atributului align sunt:
left
aliniere la stnga
center
aliniere central
right
aliniere la dreapta

Blocul <div>text </div> are posibilitatea s includ i alte subblocuri.


Atributul align are efect asupra tuturor subblocurilor incluse n blocul <div>.
Atributul nowrap permite ntreruperea rndurilor acolo unde este precizat acest
lucru.
Blocul preformatat
Etichetele <pre> </pre> permit pstrarea caracteristicilor textului aa cum a fost
introdus n fiier, deci ia n considerare caracterele spaiu, tab i CR/LF (enter la sfrit
de linie).
Blocul <pre> ... </pre> poate fi folosit pentru a insera rnduri vide.
Caracterul spaiu, pentru a putea fi luat n considerare trebuie precizat prin &nbsp;.
48

Blocuri paragraf (tag-ul <p>)


Trecerea la o linie nou se face cu eticheta <br>, (br de la break=pauz). La fel i
eticheta <p> face trecerea la o linie nou.
Eticheta <p> mai permite:
inserarea unui spaiu suplimentar inainte de blocul paragraf.
inserarea unui spaiu suplimentar dup blocul paragraph;.
alinierea textului cu ajutorul atributului align, cu valorile left, center sau
right

49

Blocuri de titlu
Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi
introduse cu tag-ul <hx> text </hx> unde x poate lua valori din multimea {1,2,3,4,5,6}
Se accept atributul align de ctre aceste etichete pentru alinierea titlului blocului de
text la stnga (modul prestabilit), n centru i la dreapta.
Tag-ul <h1> scrie titlul cu caracterele cele mai mari i cele mai ngroate.
Tag-ul <h6> folosete caracterele cele mai mici.
Exemplu
<h3>(bloc de text)</h3>

50

M2.U1.13. Linii orizontale


Se pot insera linii orizontale ntr-o pagin web cu ajutorul etichetei <hr>.

Configurarea unei linii orizontale


Atributele etichetei <hr> sunt:
align - permite alinierea. Valori posibile: left, center, right.
width - permite alegerea lungimii liniei. Valori posibile:
o numere ntregi pozitive care reprezint lungimea liniei, n pixeli;
o numere ntre 1 i 100 urmate de semnul %; reprezint procentul din
limea paginii pe care se ntinde linia;
size permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi
pozitive reprezentnd grosimea liniei n pixeli (valoarea prestabilit este 2);
noshade definete o linie fr umbr;
color permite definirea culorii liniei

51

S se realizeze o pagin web n care s se foloseasc toate tag-urile i atributele


aferente acestora care au fost prezentate n aceast unitate de nvare.
1. S se realizeze o pagin HTML avnd culoarea de fond verde i textul de culoare
roie.
2. Care sunt atributele etichetei <HR>?
3. Care este semnificaia etichetei <DIV>?
4. Dai un exemplu de cod HTML n care s utilizai tag-ul <DIV>.

M2.U1.14. Rezumat
Codul HTML din spatele unei pagini web se scrie cu ajutorul etichetelor (Tagurilor). O etichet este de forma pereche nceput-sfrit i numele acesteia se scrie
ntre paranteze unghiulare. O etichet poate avea unul sau mai multe atribute, acestea
aducnd informaii adiionale etichetei.
Tag-ul Body este cel care specific proprietile ntregii pagini web. Se pot
seta astfel: culoarea de fundal a paginii, culoarea textului, marginile paginii, etc.
Tag-ul Basefont stabilete fontul de baz al paginii i este valabil pn la
sfritul paginii sau pn apare urmtoarea etichet <Basefont>.
Blocurile de text au multiple modaliti de a fi formatate. n acest scop, exist
urmtoarele etichete:
<div> - e considerat unul dintre cele mai populare containere de elemente web,
i implicit de text. Acestui tip de formatare i sepoate seta alinierea, fragmentarea la
52

capatul liniei, etc.


<p> - este eticheta clasic pentru a declara un paragraf
<pre> - reprezint un bloc de text preformatat.
<h1>, <h2>, ....<h6> - sunt etichete care marcheaz titlurile, <h1> reprezentnd
titlul de dimensiunea cea mai mare, iar <h6> reprezentnd titlul de dimensiunea cea
mai mic
<hr> - este eticheta care ajut la inserarea unei linii orizontale n pagin, linie
creia putem s i setm lungimea, grosimea, culoarea, alinierea, umbra, etc.

M2.U1.15. Test de evaluare a cunotinelor

Alegei rspunsul corect la urmtoarele ntrebri:


1. Coninutul unei pagini web se scrie ntre marcatoarele:
a. <head>...</head>
b. <body>...</body>
c. <meta>...<meta>
2. Pentru a seta culoarea roie a unui text cu ajutorul marcatoarelor HTML, vom scrie:
a. <font color=red>text</font>
b. <font-color=red>text</font>
c. <p color=red>text</p>
3. Care dintre urmtoarele variante reprezint atribute ale marcatorului <font>?
a. color, size, face
b. color, type, size
c. color, style, text-size
4. Care dintre urmtoarele texte va avea cea mai mare dimensiune?
a. <heading>text</heading>
b. <h6>text</h6>
c. <h1>text</h1>
5. Ce marcator indic adugarea unei linii goale pe pagina web?
a. <break>
b. <br />
c. &nbsp;
Rspunsuri corecte: 1b, 2a, 3a, 4c, 5b

53

U2. Tabele
Cuprins
U2.1. Introducere.................................................................. Error! Bookmark not defined.
U2.2. Obiectivele unitii de nvare................................... Error! Bookmark not defined.
U2.3. Tag-ul <table> ............................................................ Error! Bookmark not defined.
U2.4. Alinierea tabelului n pagina web ............................... Error! Bookmark not defined.
U2.5. Precizarea culorilor de fond pentru un tabel .............. Error! Bookmark not defined.
U2.6. Dimensionri .............................................................. Error! Bookmark not defined.
U2.7. Rezumat ...................................................................... Error! Bookmark not defined.
U2.8. Test de evaluare a cunotinelor ................................. Error! Bookmark not defined.

M2.U2.1. Introducere
Un alt tag important din HTML este tag-ul <table>. Acesta permite
adaugarea tabelelor ntr-o pagin web. Tabelele se folosesc pentru a
dispune informaiile de pe pagin sub form de structur tabelar, dar nu n
ultimul rnd pentru a oferi structura ntregii pagini web.
Tabelele sunt formate din rnduri, iar rndurile din celule cu
informaii. n celula unui tabel se pot regsi diverse elemente: text, liste,
alte tabele, etc.
M2.U2.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s:


realizeze un tabel pe pagina web
coloreze fundalul tabelului i al celulelor sale
spaieze informaia dintr-un tabel
poziioneze tabelul n pagin la locaia dorit

Durata medie de parcurgere a primei uniti de nvare este de 2 ore.

M2.U2.3. Tag-ul <table>


Un tabel se insereaz ntre etichetele <table> i </table>.

54

Pentru inserarea unui rnd ntr-un tabel se folosesc etichetele <tr> i </tr> (tr = table
row)

Coloanele sunt introduse pe rnd pe cte o linie cu tag-ul <td> i </td> ( td = table
data).
Chenarul unui tabel se introduce cu atributul border din tag-ul table. n mod implicit un
tabel nu are chenar. Titlul unui tabel se introduce cu tag-ul <caption> text </caption>.
Atribute importante ale tag-ului <table>:
pentru a alinia un tabel se foloseste atributul align cu valorile posibile: left
(valoarea prestabilit), center i right.
pentru a adauga chenar unui tabel se utilizeaz atributul border care ia ca
valoare orice numr ntreg (inclusiv zero) i reprezint grosimea n pixeli a
chenarului tabelului.
Observaii:
Valoarea prestabilit a grosimii chenarului tabelului este de 1 pixel.
Dac valoarea grosimii chenarului este egal cu 0, atunci nu avem chenar.
Exemplu
1. Crearea unui tabel fr chenar

55

2. Crearea unui tabel cu chenar

56

M2.U2.4. Alinierea tabelului n pagina web


Tabelul poate fi aliniat la stanga, la dreapta sau pe centrul paginii web.

57

M2.U2.5. Precizarea culorilor de fond pentru un tabel


Culoarea de fond se stabilete cu atributul bgcolor.
Culoarea de fond poate fi ataat ntregului tabel prin eticheta <table>.
Culoarea de fond poate fi ataat unei linii de tabel prin eticheta <tr>.
Culoarea de fond poate fi ataat unei celule de tabel prin eticheta <td>.
Atenie:
Dac avem definite mai multe atribute bgcolor, se vor lua n considerare n ordinea:
<td>, <tr>, <table>. Tag-ul <table> are prioritatea cea mai mic.
Culoarea textului din fiecare celul se indic n tag-ul <font>.
Ex: <td><font color=valoare></font></td>
Exemplu
Adaugarea n pagina web a unui tabel care are culori diferite pentru
fundalul fiecrei celule cu text.

58

M2.U2.6. Dimensionri
Dimensionarea celulelor unui tabel
Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al
etichetei table. Valorile lui cellspacing pot fi numere ntregi pozitive, inclusiv 0. Valoarea
prestabilit este 2.
Distana dintre marginea unei celule i coninutul ei se definiete cu atributul
cellpadding al etichetei <table>. Valorile lui cellpadding pot fi numere ntregi pozitive.
Valoarea prestabilit este 1.

59

Exemplu
Adaugarea n pagina web a dou tabele colorate, care au spaiere
diferit ntre celule.

Codul HTML care descrie tabelele de mai sus poate fi vzut n imaginea de pe pagina
urmtoare.

60

Dimensionarea unui tabel


Dimensiunile unui tabel limea i nlimea se stabilesc cu atributele width i
height ale etichetei <table>.
Aceste atribute pot lua valorile:
numere ntregi pozitive, reprezint limea, respectiv nlimea n pixeli a tabelului.
numere ntregi ntre 1 i 100, urmate de semnul %, reprezint o fraciune din limea,
respectiv nlimea, total a paginii.

61

62

Scriei codul HTML pentru realizarea unui tabel cu 3 linii si 4 coloane, avnd chenarul de
culoare albastr.

M2.U2.7. Rezumat
Tabelul este un element important care se poate regsi ntr-o pagin web. Acesta se
introduce pe pagin folosind tag-ul <table>. Coninutul tabelului este repezentat de ctre
rndurile acestuia, care se introduc cu ajutorul tag-ului <tr>, iar coninutul rndurilor este
reprezentat de ctre celulele cu date, care e introduc la rndul lor cu ajutorul tag-ului <td>.
ntreg tabelul, dar i rndurile sau celulele pot fi colorate folosind atributul bgcolor.
Tabelul poate fi pozitionat pe pagina la stanga, la dreapta sau pe centru folosind
atributul align.
ntreg tabelul, dar i rndurile sau celulele pot fi dimensionate folosind atributele
width i height.
M2.U2.8. Test de evaluare a cunotinelor

Alegei rspunsul corect la urmtoarele ntrebri:


1. Care dintre urmtoarele marcatoare se folosesc la realizarea unui tabel n HTML:
a. <table>, <tr>, <th>
b. <table>, <tr>, <rowspan>
c. <table>, <td>, <colspan>
2. Care este atributul care specific adresa imaginii pe care dorim s o afim ntr-o
pagin HTML:
a. source
b. link
c. src
3. Care dintre urmtoarele atribute ale marcatorului <td> permite unirea a 3 celule:
a. colspan = 3
b. rowspan = 3
c. cells = 3
4. Cum se definete o imagine pe fundalul unei pagini web:
a. <body background=cale ctre imagine>
b. <img src=cale ctre imagine width=100% height=100%>
c. <a href=cale ctre imagine width=100%>
5. Pentru a seta culoarea roie pentru fundalul ntregii pagini web, vom scrie:
a. <font page-color=red>...coninut pagin...</font>
b. <body background-color=red> ...coninut pagin...</body>

63

c. <body bgcolor=red> ...coninut pagin...</body>


6. Pentru a scrie un text ingroat vom scrie:
a. <strong>text</strong>
b. <em>text</em>
c. <bold>text</bold>
Rspunsuri corecte: 1a, 2c, 3a, 4a, 5c, 6b

64

U3. Imagini i ancore


Cuprins
U3.1. Introducere................................................................ Error! Bookmark not defined.5
U3.2. Obiectivele unitii de nvare................................. Error! Bookmark not defined.5
U3.3. Tagul <img> ............................................................. Error! Bookmark not defined.5
U3.4. Legaturi (link-uri) ..................................................... Error! Bookmark not defined.0
U3.5. Hri de imagini ........................................................ Error! Bookmark not defined.5
U3.6. Rezumat .................................................................... Error! Bookmark not defined.7
U3.7. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined.7

M2.U3.1. Introducere
Imaginile reprezin o component vizual de baz din pagina web.
Se spune c "o imagine face ct o mie de cuvinte", aa c imaginile ar
trebui poziionate i ncadrate corect n pagin.
Ancorele sunt acele elemente care ne ajut s facem legtura ntre
mai multe pagini web sau ntre informaiile de pe aceeai pagin.
Hrile de imagini constau n realizarea unor imagini care s conin
ancore ctre diverse pagini la click pe diferite zone ale imaginii.
M2.U3.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s:


introduc o imagine n pagina web
redimensioneze o imagine
creeze ancore ctre alte pagini web sau ctre diverse elemente de pe aceeai
pagin
creeze o hart de imagini

Durata medie de parcurgere a primei uniti de nvare este de 2 ore.

M2.U3.3. Tagul <img>


Formatele acceptate de browsere pentru fiierele de imagini sunt:
GIF (Graphics Interchange Format) extensia .gif
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg
65

BMP (BitMap) cu extensia .bmp (este ntlnit numai cu browserul Internet Explorer,
etc.
Inserarea ntr-o pagin Web a unei imagine se face utiliznd eticheta <img> cu atributul
src, iar valoarea acestui atribut este adresa URL a imaginii.
Dac se dorete adugarea unui chenar n jurul imaginii se folosete atributul border al
etichetei <img> care poate lua valori numere ntregi pozitive.
Dimensiunile unei imagini pot fi modificate prin intermediul atributelor width i
height ale etichetei <img>.
Acestea pot avea ca i valori :
numere ntregi pozitive ce reprezint numrul de pixeli
numere de la 1 la 100 urmate de % ce reprezint procente din limea, respectiv din
nlimea blocului n care se afl imaginea.
Precizarea dimensiunilor spaiului ocupat de o imagine duce la creterea vitezei de
ncrcare a paginii.

Alinierea unei imagini n pagina Web


Alinierea se face prin intermediul atributului align al etichetei <img>, care ia valorile:
left aliniere la stnga
right aliniere la dreapta
top aliniere deasupra. Partea de sus a imaginii se aliniaz cu partea de sus a
textului ce precede imaginea.
middle aliniere la mijloc
bottom sau baseline aliniere la baz

Exemplu
Alinierea unei imagini pe vertical:

66

Alinierea textului n jurul unei imagini


Se face cu atributele hspace i vspace ale etichetei <img> care precizeaz distana
n pixeli pe orizontal i pe vertical, dintre imagine si elementele din pagin.

67

Imaginea pentru fondul unei pagini Web

Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului
background al etichetei <body> care ia ca valoare adresa URL a imaginii.

68

Imagini ca legturi
Imaginea trebuie s apar ca element de legatur n cadrul tagulul <a> imagine </a>

69

M2.U3.4. Legaturi (link-uri)


Cu ajutorul legturilor, un text obinuit se transform n hipertext sau hipermedia.
Legturile sunt zone active ntr-o pagin Web.
Paginile Web sunt interactive deoarece au un rspuns la aciunile care sunt iniiate de
cei care le utilizeaz.
Legturile n pagina html se insereaz cu ajutorul etichetei speciale <a> i a atributului
href care ia ca valoare adresa URL a resursei solicitate.
Cnd mouse-ul este deasupra unei zone active, el ia forma unei mini. Calculatorul
client expediaz cererea , primete resursa pe care a solicitat-o pe care o va ncrca n
browser.
n acelai browser, pagina nou va fi nlocuit de cea veche.
Exemplu
Exemple diverse de realizare a unor legturi ntre pagini web

70

Link ctre un site

Legtur ctre o ancor din acelai document.


Acest lucru se realizeaz utiliznd perechea de tag-uri:
<a href=#eticheta> SALT </a>
<a name = etic> AICI am facut SALT</a>

71

72

Ancor aflat n alt document

73

O pagin nou ntr-o fereastr nou

Stabilirea culorilor pentru legturi


Se utilizeaz trei culori pentru legturi:
o culoare pentru legturile nevizitate
o culoare pentru legturile vizitate
o culoare pentru legturile active
Acestea se stabilesc cu atributele:
link pentru legaturile nevizitate
vlink pentru legaturile vizitate
alink pentru legaturile active

74

M2.U3.5. Hri de imagini


O imagine poate fi folosit ca i zon activ. n acest caz imaginea se insereaz n
documentul HTML ntre etichetele <a> i </a>.
Exist ns posibilitatea de a crea hri de imagini (image maps) care permit ca
diferite zone ale unei imagini s fie definite drept legaturi ctre diverse pagini WEB.
Crearea unei hri de imagini presupune trei etape:
Definirea unei imagini ca hart de imagini. Se va utiliza tag-ul <img> cu atributele
src i usemap. Numele dat pozei n usemap, precedat de semnul #, se va regsi
obligatoriu n tag-ul map, n atributul name.
Definirea hrii n interiorul unui bloc special definit cu tag-ul <map> i </map>.
Tag-ul are un atribut obligatoriu i anume name, care primete ca i valoare
numele hrii (numele din usemap)
Crearea zonelor pe hart. Fiecare zon se introduce cu eticheta <area>.
Eticheta <area> are trei atribute obligatorii:
1) shape care poate lua una din valorile:
rect (pentru zone de form dreptunghiular);

75

circle (pentru zone de form circular);


poly (pentru zone de form poligonal);
default (pentru poriunile imaginii care nu se ncadreaz n nici una
dintre categoriile anterioare)
2) coords determin coordonatele zonei
3) href primete adresa URL a paginii indicate de legatura zonei respective.

Valorile atributului shape:


rect coords=x1,y1,x2,y2 dreptunghi unde (x1, y1) este coordonata colului
stnga sus i (x2, y2) este coordonata colului dreapta jos.
circle coords=x1, y1,r (x1,y1) este centrul cercului de raz r.
Poly coords=x1,y1,x2,y2,...xn,yn poligonul cu vrfurile de coordonate (x1,y1),
(x2,y2), (x3,y3),....
Pentru obinerea automat a coordonatelor se poate folosi programul MAP This,
program care definete regulile pentru o imagine .gif sau .jpeg. Programul este freeware i se
poate descrca de pe Internet.

76

1. Care este sintaxa tag-ului IMG?


2. Care sunt atributele etichetei AREA?

S se realizeze o pagin web care s conin o imagine cu mai multe persoane.


Atunci cnd se va da click pe o persoan se va deschide o pagin cu imagini si date
despre persoana din imagine, pe care s-a dat click.

M2.U3.6. Rezumat
Imaginile se introduc n pagin cu ahutorul tag-ului <img>. Poziionarea unei
imagini pe pagin se face cu ajutorul atributului "align" al tag-ului <img>. Orientarea
textului n jurul imaginii se face cu atributele "hspace" i "vspace" ale etichetei <img>
care precizeaz distana n pixeli pe orizontal i pe vertical, dintre imagine i
elementele din pagin.
Ancorele se realizeaz cu ajutorul tag-ului <link>, iar pagina ctre care se va
face redirecionarea se precizeaz cu ajutorul atributului "src" al lui <link>.
Definirea unei imagini ca hart de imagini se face utiliznd tag-ul <img> cu
atributele src i usemap. Numele dat pozei n usemap, precedat de semnul #, se va
regsi obligatoriu n tag-ul map, n atributul name. Definirea hrii se realizeaz n
interiorul unui bloc special definit cu tag-ul <map>. Tag-ul are un atribut obligatoriu
i anume name, care primete ca i valoare numele hrii (numele din usemap).
Fiecare zon de pe hart se introduce cu eticheta <area>.
M2.U3.7. Test de evaluare a cunotinelor

Alegei rspunsul corect la urmtoarele ntrebri:


1. O ancor ctre o alt pagin n HTML se realizeaz folosind marcatorul:
a. <ul>

77

2.

3.

4.

5.

b. <a>
c. <link>
Pentru a realiza o hart de imagini n HTML se vor folosi marcatorii:
a. <img> i <src>
b. <map> i <area>
c. <map> i <shape>
Care dintre urmtoarele variante reprezint valori valide ale atributului shape al
marcatorului <area>
a. sphere, rectangle, cylinder
b. rectangle, circle, polygon
c. rect, circle, poly
Pagina ctre care face trimitere o ancor se d ca i valoare pentru atributul:
a. src
b. href
c. rel
Atributul coords al marcatorului <area> reprezint:
a. coordonatele la care se gsete imagine ape pagin
b. coordonatele colului stnga, jos al imaginii
c. coordonatele figurii geometrice definite ca arie pe imagine

Rspunsuri corecte: 1b, 2b, 3c, 4a, 5c

78

U4. Formulare
Cuprins
U4.1. Introducere.................................................................................................................. 79
U4.2. Obiectivele unitii de nvare................................................................................... 79
U4.3. Tagul <form> ........................................................... Error! Bookmark not defined.0
U4.4. Tag-ul <input>.......................................................... Error! Bookmark not defined.0
U4.5. Liste de selecie <select> <option >. </select> .............. Error! Bookmark not
defined.1
U4.6. Cmpuri de editare multiple ..................................... Error! Bookmark not defined.3
U4.7. Rezumat .................................................................... Error! Bookmark not defined.5
U4.8. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined.5
Tem de control .................................................................. Error! Bookmark not defined.6

M2.U4.1. Introducere
Formularele HTML sunt cele mai frecvent utilizate pentru a colecta
informaii de la persoane care viziteaz site-ul. Un formular este un ansamblu de
zone active alctuite din butoane de apsat, casete de selecie, cmpuri de editare i
altele.
O sesiune de lucru cu cu o pagin Web ce conine un formular cuprinde
urmtoarele etape:
1. Se completeaz formularul care se transmite unui server;
2. O aplicaie dedicat de pe server analizeaz formularul completat i
eventual se stocheaz datele ntr-o baz de date.
3. Eventual serverul expediaz un rspuns utilizatorului.

M2.U4.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s realizeze


urmtoarele:
s creeze un formular pe pagina web
s creeze diferite elemente specifice formularului: cmpuri de text, cmpuri
de selecie, butoane, etc.
s neleag noiunea de eveniment asociat unui element din interiorul
formularului

Durata medie de parcurgere a primei uniti de nvare este de 2 ore.

79

M2.U4.3. Tagul <form>


Un formular este delimitat de tag-ul <form>....descriere formular...</form>.
ntre tag-ul de intrare i cel de ieire sunt inserate, n principal controalele formularului.
Principalele atribute ale tag-ului form sunt:
action
method
enctype
target
Form-ul are 2 atribute importante: action i method.
Sintaxa:
<form action = valoare_a method = valoare_m> </form>
Semantica:
valoare_a poate lua ca i valoare:
adresa URL a unui script aflat pe server, care primete datele formularului; se
face o prelucrare a datelor i se expediaz un rspuns utilizatorului dac e cazul
adresa de email, caz n care datele formularului sunt transmise prin pota
electronic
valoare_m poate lua 2 valori:
get este valoare implicit (datele din formular se adauga la adresa URL
specifcata in action);
post (datele sunt expediate separat; se folosete cnd sunt transmise cantiti
mari de date ).
Exemple:
action = www/

Script
action = mailto: livia.sangeorzan@yahoo.com
M2.U4.4. Tag-ul <input>
Pentru a crea diferite butoane sau casete se folosete tag-ul <input>
Sintaxa:
<input type =

name =

value =

>

Semantica:
type
poate lua valorile urmtoare
text
radio (atributul checked selecteaz butonul la prima activare a paginii);
checkbox;
submit trimite
80

reset terge (reseteaz);


password parola (cnd scriem se vad asterixuri, dar la server
(destinatar) se vede totusi parola decodificata).
name este numele ataat casetei sau butonului. Nu reprezint coninutul butonului
sau casetei.
value este coninutul ce apare scris pe buton sau coninutul casetei sau n cazul
butoanelor radio numele butoanelor care fac parte din aceeai familie;

Alte atribute ale tag-ului input:


size - specific limea cmpului de editare;
maxlenght - specific maximul de caractere.
Dac ntr-un input lipsete atributul type, rezult implicit type = text.
Limbajul JavaScript va recunoate butoanele dup atributul name.
M2.U4.5. Liste de selecie <select>

<option >.

</select>

O list de selecie permite alegerea unuia sau mai multor elemente dintr-o list finit.
Are 2 atribute importante : name i size.
Elementele dintr-o list se introduc cu tag-ul <option>.
Sintaxa:
<select name = nume size = numar>
<option value = valoare_1 selected> Element_1
<option value = valoare_2 > Element_2
<option value = valoare_3> Element_3
</select>.
Semantica:
name
size
<option>
selected

numele listei de selecie


este un numr ntreg pozitiv i precizeaz cte elemente din list sunt
vizibile la un moment dat
este tag-ul care include elementele listei. Server-ul primete perechea
alctuit din coninutul din value i valoarea de dup tagul option
permite selectarea prestabilit a unui element al listei

Exemplul urmtor ilustreaz un formular care conine o list de selecie i dou butoane.

Codul HTML aferent acestui exemplu se poate vizualiza n imaginea de mai jos.

81

Lista de selecie cu selecii multiple


Are aceeai sintax ca i lista de selecie descris mai sus, dar n plus are atributul
multiple n tag-ul select.

82

M2.U4.6. Cmpuri de editare multiple


Acest lucru se realizeaz cu tag-ul <textarea>
Sintaxa:
<textarea list de atribute> text </textarea>
Semantica:
Din lista de atribute enumerm:
cols (nr de caractere afiate ntr-o linie),
rows (nr de linii afiate simultan),
name (permite ataarea unui nume),
wrap care determin comportamentul cmpului de editare fa de sfritul de linie.
Atributul poate lua valorile: off, hard, soft.

ntre tag-ul de intrare i cel de ieire ale formularului sunt inserate, n principal,
controalele formularului. Un control este o form de interaciune a utilizatorului cu
formularul. Putem prezenta conform tabelului de mai jos principalele controale ntr-un
formular HTML prezentate mai sus:

83

CONTROL
ACIUNE A UTILIZATORULUI
text
Introducerea unui text de volum redus
password
Introducerea unui text de volum redus, care apare, pe ecran,
mascat cu "*"
submit
Activare (pentru a transmite informaiile completate de
utilizator)
reset
Activare (pentru a restabili valorile iniiale ale tuturor
controalelor formularului)
checkbox
Bifare
radio
Bifare
textarea
Introducere a unui volum mare de text
menu
Alegere a unei opiuni dintr-un meniu

TAG
Input
Input
Input
Input
Input
Input
Textarea
Select option

Evenimentele onfocus i onblur


O pagina poate conine mai multe elemente prin care putem introduce date. Dac
introducem un ir de caractere ntr-un cmp de editare spunem c respectivul element
primete focus-ul.
Evenimentul onfocus are loc atunci cnd un element primete focus-ul;
Evenimentul onblur are loc atunci cnd elementul pierde focusul.
Elementele care primesc focus-ul au dou metode importante:
metoda onfocus() atribuie focus-ul elementului
metoda onblur() face ca elementul s piard focus-ul.
Exemplu
ntr-o caset trebuie s se introduc un text; n cazul n care se face click,
far a introduce ceva, apare un mesaj, prin care se cere reintroducerea unei valori.
Nu putem pleca mai departe pna cnd nu am introdus ceva.

84

Dai un exemplu practic de utilizare a evenimentelor onfocus i onblur.

S se realizeze o pagin web care s conin scheletul unui CV european. Aceast


pagin va conine elemente de tip formular i va permite introducerea datelor de
ctre utilizator. Se vor folosi toate elementele de tip formular studiate la aceast
unitate de nvare.

M2.U4.7. Rezumat
Formularele sunt utilizate pentru introducerea i transmiterea de date de ctre
utilizatorii site-ului. Introducerea unui formular se face folosind tag-ul <form>. Cele
mai importante atribute ale lui <form> sunt "action" i "method". Action m
redirecioneaz ctre o alt pagin dup ce au fost procesate datele din formular, iar
method mi indic modul de transmitere a datelor introduse n formular. Varianta de
transmitere a datelor cu get se face prin URL, iar transmiterea datelor cu post se face
cu ajutorul protocolului HTTP.
Exemple de elemente de tip formular: caseta de text, buton radio, csu pentru
bifare, buton, list de selecie, cmp de editare pe mai multe linii, etc.

M2.U4.8. Test de evaluare a cunotinelor


Alegei rspunsul corect la urmtoarele ntrebri:

85

6. Putem realiza o list de selecie ntr-un formular HTML folosind marcatorii:


a. <ul> i <li>
b. <select> i <option>
c. <ol> i <li>
7. Pentru a realiza un cmp de editare multiplu, vom scrie:
a. <input type=text multiline=true>
b. <textarea></textarea>
c. Nu se poate realiza cmp de editare multiplu
8. Care dintre urmtorii marcatori NU reprezint un cmp de editare:
a. <textarea>
b. <input type=text />
c. <input type=submit />
9. Care dintre variantele urmtoare reprezint valori valide ale atribututlui type
al marcatorului <input>
a. text, submit, reset, checkbox
b. text, textarea, radiobutton, submit
c. text, checkbox, radiobutton, submit
10. Care sunt atributele cate seteaz numrul de linii i de coloane ale cmpului
de editare multiplu?
a. colspan i rowspan
b. coll i row
c. colls i rows
Rspunsuri corecte: 1b, 2b, 3c, 4a, 5c

Tem de control
Rspundei la urmtoarele ntrebri:
1. Care sunt atributele etichetei <HR>?
2. Care este semnificaia etichetei <DIV>?
3. Dai un exemplu de cod HTML n care s utilizai tag-ul <DIV>.
4. Care este sintaxa tag-ului IMG?
5. Care sunt atributele etichetei AREA?
6. Scriei codul HTML pentru realizarea unui tabel cu 3 linii si 4 coloane, avnd
chenarul de culoare albastr.

Rspunsul va fi redactat n Word i va fi transmis prin email profesorului care


ine laboratorul. Nota pe aceast tema va reprezenta 1/4 din nota final de
laborator.

86

Modulul III. Reguli CSS (Cascading Style Sheets)


Cuprins
Introducere .................................................................................................................... 87
Competene ................................................................................................................... 87
U1.Reguli CSS la nivel teoretic .................................................................................... 89
U2. Exemplificarea regulilor CSS .............................................................................. 100
Tem de control .......................................................................................................... 120
Introducere
CSS este un acronim pentru Cascading Style Sheets (foi de stil n cascad).
CSS este utilizat la mbuntirea prezentrii unei pagini Web (adic a modului n
care browser-ul o afieaz). CSS permite stabilirea proprietilor pentru elementele
HTML utiliznd o gam uria de valori. Avnd la dispoziie mai mult de 100 de
proprieti, CSS este un instrument avansat destinat proiectanilor Web pentru
crearea de site-uri profesionale, care nu pot fi construite folosind atribute HTML
obinuite. n CSS exist posibilitatea s se aeze elementele n poziiile dorite (alta
dect cea n cazul fluxului normal).
n mod normal definiiile stilurilor sunt introduse n foi de stil (style
sheet).
Stilurile au fost introduse n versiunea HTML 4.0.
Exist dou modaliti de a defini un stil prin:
sintaxa CSS (Cascading Style Sheets);
sintaxa limbajului JavaScript.
Una dintre caracteristicile fundamentale ale CSS este faptul c autorul poate
ataa un stil, iar cititorul paginii respective poate ataa altul, deci se obine un set
de reguli n cascad. n acest caz exist un set de reguli de prioritate care va decide
care regul se va aplica.
Exista 4 tipuri de stiluri CSS: implicite, externe, interne i inline.
Ordinea de utilizare a stilurilor este urmtoarea:
1
stilul implicit al navigatorului (browser default);
2
foi de stil externe (External style sheets, nume_fisier.*css);
3
foile de stil interne ( din interirul elementului head)
4
stiluri specificate n marcajul de start al unui element HTML
(inline style).

Competene
La finalul acestui modul, studenii vor putea s:

87

defineasc o regul CSS


grupeze selectorii i declaraiile n cadrul regulilor
defineasc o pseudo-clas i un pseudo-element
neleag i s aplice corect ordinea de preceden a regulilor CSS
defineasc stiluri intern, inline i n fiiere externe
stilizeze frumos i corect o pagin web

88

U1. Reguli CSS la nivel teoretic


Cuprins
U1.1. Introducere.................................................................................................................. 89
U1.2. Obiectivele unitii de nvare................................................................................... 89
U1.3. Integrarea regulilor CSS ntr-un fiier HTML ........................................................... 90
U1.4. Pseudo-clase i pseudo-elemente ............................................................................... 91
U1.5. Precedena regulilor .................................................................................................... 92
U1.6. Atribute CSS............................................................................................................... 93
U1.7. Rezumat ...................................................................................................................... 97
U1.8. Test de evaluare a cunotinelor ................................................................................. 98

M3.U1.1. Introducere
Regulile CSS sunt utilizate la mbuntirea prezentrii unei pagini Web
(adic a modului n care browser-ul o afieaz).
O regul este format din dou pri principale: selectorul i declaraia.
Declaraia se afl ntre elementul { i elemental }. La rndul ei,
declaraia este format tot din dou pri: proprietatea i valoarea. Spre exemplu,
pentru colorarea textului dintr-un tag <h1> vom scrie h1 { color: blue }. n
exemplul anterior h1 este selectorul, { color: blue } declaraia cu proprietatea color
i valoarea blue.
n blocul <style>...</style> avem regulile CSS definite ca mai sus.
Deci definim mai nti, clasa de stiluri n interiorul blocului
<style></style> care se poate afla n blocul <head>...</head>.

M3.U1.2. Obiectivele unitii de nvare


Aceast unitate de nvare i propune iniierea studenilor n crearea unei
pagini HTML stilizate cu ajutorul regulilor CSS.
La sfritul acestei uniti de nvare acetia vor putea:
s defineasc o regul CSS
s grupeze selectorii i declaraiile n cadrul regulilor
s defineasc o pseudo-clas i un pseudo-element
s neleag i s aplice corect ordinea de preceden a regulilor CSS
s defineasc stiluri intern, inline i n fiiere externe

s stilizeze frumos i corect o pagin web

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

89

M3.U1.3. Integrarea regulilor CSS ntr-un fiier HTML


<HTML>
<HEAD>
<TITLE> Exemplu </TITLE>
<STYLE TYPE=text/css>
H1 { color: green; }
</STYLE>
</HEAD>
<BODY>
<H1> Acest heading este verde datorit unei reguli CSS </H1>
</BODY>
</HTML>
n exemplul anterior regula CSS este specificat n interiorul fiierului HTML. Prin
aceast metod modificrile n cazul fiierelor mari devin greoaie de aceea se recomand
scrierea regulilor ntr-un fiier separat de unde s fie importate n fiierul HTML. Pentru
exemplificare editm un fiier pe care l denumim reguli.css. n acest fiier scriem
H1 { color: green }. Documentul HTML care import acest regulile din acest fiier este de
forma urmtoare:
<HTML>
<HEAD>
<TITLE> Exemplu de import </TITLE>
<LINK REL=stylesheet HREF=c:\reguli.css TYPE=text/css>
</HEAD>
<BODY>
<H1> Acest heading este verde datorit unei reguli importate </H1>
</BODY>
</HTML>
Gruparea selectorilor i a declaraiilor
Pentru a reduce dimensiunea fiierelor selectorii se pot grupa, separarea lor fcndu-se
prin virgul.
H1, H2, H3, P { font-family: helvetica }
Asemntor se pot grupa i declaraiile:
H1
{
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Class ca selector
90

O regul de genul H1 { color: blue } se aplic mereu cnd apare selectorul H1 indiferent
dac vrem sau nu. Pentru a evita acest lucru se folosesc clasele.
Fie fiierul reguli.css, fiierul n care scriem regulile pe care le vom importa.
Sintaxa pentru definirea unei clase este urmtoarea: H1.clasa_noastr { color: red }
In fiierul HTML cnd vrem s aplicm regula respectiv scriem
<H1 CLASS=clasa_noastr> Heading rou </H1>.
Dac am scrie <H1> Heading obinuit </H1> nu se va mai aplica regula CSS, deci
textul Heading obinuit nu va mai aprea rou.
Clasa definit mai sus se poate aplica numai pentru H1.
Dac am avea <P CLASS=clasa_noastr nu se obine nici un efect. Totui se pot
defini clase generale astfel: .clasa_doi { color: blue }. O astfel de clasa poate fi aplicat
oricrui selector care suport specificarea unei culori.
ID ca selector
O construcie asemntoare cu CLASS este ID.
Sintaxa pentru definirea unui element ID este urmtoarea:
H1#z98y { letter-spacing: 0.5em }.
Un astfel de ID se poate aplica numai pentru H1 n felul urmtor:
<H1 ID=z98y>Wide text</H1>.
Pentru definirea unui ID care s poat fi aplicat oricrui selector declaraia se face
astfel: #z98y { letter-spacing: 0.3em }.Acest ID poate fi aplicat oricrui selector care suport
specificarea dimensiunii dintre litere.
Comentarii
Comentariile sunt asemntoare cu cele din limbajul de programare C.
EM { color: lime } /* un verde s te doar ochii */
M3.U1.4. Pseudo-clase i pseudo-elemente
Au fost introduse pentru adugarea unor faciliti suplimentare de formatare. Pseudoclasele i pseudo-elementele sunt recunoscute n cadrul regulilor CSS, dar nu sunt
recunoscute direct n fiierul HTML.
Pseudo-clasa anchor
Aceast pseudo-clas permite formatarea link-urilor din cadrul unui pagini web.
A:link { color: red }
/* link nevizitat */
A:visited { color: blue } /* link vizitat */
A:active { color: lime } /* link activ */
Prin aceste reguli toate link-urile din pagina HTML vor lua culorile specificate. Pseudoclasa anchor nu are efect dect asupra selectorului A, de aceea regula: A:link { color: red } are
acelai efect ca i :link { color: red }.De asemenea pseudo-clasele pot fi combinate cu clasele
obinuite astfel: A.clasa_mea:link { color: red }.
Pseudo-elemente

91

1. first-line
Permite specificarea unui anumit stil pentru prima linie dintr-un paragraf.
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.
Presupunnd ca prima linie se termin dup cuvntul an n pagina web acest text va
apare sub forma:
THE FIRST LINE OF AN
article in Newsweek.
2. first-letter
Asemntor cu first-line acest pseudo-element permite specificarea unui stil pentru
prima liter dintr-un text.
M3.U1.5. Precedena regulilor
De multe ori se ntmpl ca ntr-un punct n cadrul unui fiier HTML s fie valabile mai
multe reguli CSS. Pentru a rezolva astfel de situaii trebuie stabilite nite reguli de prioritate.
'important'
'Important' este un cuvnt rezervat prin care i se d unei reguli CSS o prioritate mai
mare dect unei reguli obinuite.
P { font-size: 12pt ! important; font-style: italic }
Reguli:
1) Regula care conine `! important` suprascrie o regul obinuit.
2) Specificitatea unui selector: selectorii mai specifici i suprascriu pe cei mai generali.
Specificitatea se obine prin concatenarea a trei numere: numrul de atribute ID din
cadrul selectorului (a), numrul de atribute CLASS (b) i numrul de tag-uri din
selector (c).
LI
{...} /* a=0 b=0 c=1 -> specificitate = 1 */
UL LI
{...} /* a=0 b=0 c=2 -> specificitate = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificitate = 3 */
LI.red
{...} /* a=0 b=1 c=1 -> specificitate = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificitate = 13 */
#x34y
{...} /* a=1 b=0 c=0 -> specificitate = 100 */
Pseudo-clasele sunt numrate ca i clasele obinuite, iar pseudo-elementele sunt
numrate ca i elementele obinuite.
n cazul n care dou reguli ajung s aib aceai specificitate se aplic regula specificat
mai trziu. Regulile importate se consider a fi naintea oricrei reguli din fiierul n care sunt
importate.
Stiluri in-line
Sunt definite n eticheta n care dorim s se aplice aceste stiluri.
Valoarea lui style = valoare este cuprins ntre ghilimele.
92

Stiluri definite n fiiere externe


Stilurile definite n interiorul blocului <style></style> pot fi scrise ntr-un fiier
extern, pentru a putea fi utilizate n mai multe fiiere HTML.
Se creeaz un fiier care conine descrierea stilurilor i se salveaz cu extensia .css.
n fiierul HTML care utilizeaz stilurile se include n blocul <head></head> o
etichet <link> cu atributele:
rel cu valoarea stylesheet
href cu valoarea adresa URL a fiierului creat, care conine regulile css.
M3.U1.6. Atribute CSS
Font
font-family
Valoarea: nume de font. Exemple: helvetica, serif, sans-serif,
cursive, monospace, fantasy, etc
BODY { font-family: gill, helvetica, sans-serif }
font-style Valoarea: normal | italic | oblique
font-variant Valoarea: normal | small-caps
font-weight Valoarea: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900. Valoarea: normal echivaleaz cu 400, iar bold cu 700.
font-size Valoarea: <absolute-size>|<relative-size>|<length>|<percentage>
absolute-size poate lua una din valorile: xx-small | x-small | small | medium |
large | x-large | xx-large
relative-size poate lua una din valorile: larger sau smaller
percentage

Exemplu
Stiluri pentru paragrafe i titluri (heading-uri)
P { font-size: 120% }
H1, H2, H3 { font-style: italic }

Dimensiunile pentru font-size sunt specificate prin:


1.

2.

mrime absolut; avem urmatoarele valori posibile:


xx-small
x-small
small
medium (valoarea prestabilit)
large
x-large
xx-large
mrime relativ fa de valoarea curent; avem urmatoarele valori posibile:
larger
smaller
93

3. numar ntreg urmat de unitatea de msur


4. procente din valoarea curent.

Exemplu
Stil pentru dimensiunea fontului dintr-un paragraf
P {font-size: 9px }
Dimensiunea fontului poate fi specificat n centimetri(cm), milimetri(mm), pixeli(px),
oli(in), puncte(pt 1pt=1/72in), etc.
1 in=72 pt=2.54 cm=6 pc
Background i culoare

Text

Color - Valoarea culorii poate fi specificat prin RGB(rou,verde,albastru),


parametrii lund valori ntre 0 i 255, prin numele unei culori care este deja definit
(blue,green,black, etc) sau prin #nr1nr2nr3. Nr1,nr2,nr3 sunt numere de dou cifre
n baza 16.
H2 { color: rgb(255,0,0) }
H3 { color: #00FF6A }
background-color - Valoarea: <color> | transparent.
background-image - Valoarea: <url> | none
background-repeat - Valoarea: repeat | repeat-x | repeat-y | no-repeat Precizeaz
dac imaginea din fundal este repetat sau nu. Pentru valoarea repeat imaginea
este multiplicat pe orizontal i vertical. Pentru valoarea repeat-x imaginea este
multiplicat numai pe orizontal,iar pentru repeat-y imaginea este multiplicat
doar pe vertical.
background-attachment - Valoarea: scroll | fixed Specific dac imaginea din
fundal este derulat odat cu coninutul sau nu.

word-spacing Valoarea: normal | <lenght> (dimensiunea dintre cuvinte)


letter-spacing Valoarea: normal | <lenght> (dimensiunea dintre litere)
text-decoration Poate lua una din valorile: underline, overline, line-through, blink.
vertical-align Valoarea: baseline | sub | super | top | text-top | middle | bottom | textbottom | <percentage>
text-transform Valoarea: capitalize | uppercase | lowercase | none
text-align Valoarea: left, right, center, justify

Distana dintre rnduri


Se folosete atributul line-height. Valori posibile:
valoarea normal

94

factor de scal
prin lungime
prin procente din valoarea curent a fontului

Stiluri pentru diferite medii


Se tie c un text afiat pe monitor cu culoarea galben se vede foarte slab atunci cnd
este tiprit la o imprimant alb-negru. Aceast deficien poate fi corectat dac se utilizeaz
stiluri potrivite pentru fiecare mediu. Mediul pentru care este valabil un stil este specificat
prin atributul media al elementului <style>, care poate lua urmatoarele valori posibile:

screen (pentru monitoare)


print (pentru imprimante)
projection (pentru proiectoare video)
braille (pentru terminale destinate nevztorilor)
speech (pentru terminale audio)
all (pentru toate tipurile de medii)
Exemplu
Stilizarea unui paragraf pe pagina web i la imprimarea pe hrtie.

<html>
<head><title> Exemplu MEDIA</title>
<style type-text/css media=screen>
p {color: yellow;}
</style>
<style type=text/css media=print>
p {color: black;}
</style>
</head>
<body>
<p> Acest paragraf va avea culoarea galbena pe monitor si culoarea neagra la
imprimare.
</body>
</html>

Configurarea blocurilor de text


Dimensiunile unui bloc

95

Un bloc este format din:


coninut
distana dintre coninut i chenar
chenar
margini
Marginile blocului
Marginile unui bloc reprezint distana minim dintre chenarele a dou blocuri vecine.
Pentru a stabli marginile unui bloc se utilizeaz atributele:

margin-left
margin-right
margin-top
margin-bottom
margin.

Dac sunt indicate pentru proprietatea margin valori separate prin spaiu, acestea
reprezint dimensiunile n ordinea urmatoare: sus, dreapta, jos, stnga.
Dimensiunile care lipsesc preiau valorile de la elementele opuse.
Dac este dat o singur valoare, aceasta va fi folosit pentru toate direciile.
Valorile posibile ale acestor atribute sunt:

auto
marime (numr urmat de o unitate de msur)
procent din limea paginii (numr ntreg ntre 0 i 100, urmat de simbolul %)

Observaii: Valorile menionate anterior pot fi i negative.


Distana dintre coninut i chenar
Se va seta cu ajutorul atributelor de mai jos se stabilete distana dintre coninutul unui
bloc (text, imagini, etc) i chenarul acestuia.
Atribute:
padding-top
padding-right
padding-bottom
padding-left
padding

Valori posibile ale atributelor sunt:


Mrimea (numr ntreg pozitiv)
Procent din limea paginii
Limea chenarului
Atribute:
96

Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width

Valori posibile:
thin, medium sau thick
Numere ntregi pozitive urmate de o unitate de msur
Stilul chenarului
Se va seta cu ajutorul atributului border-style.
Valori posibile:
none (valoarea prestabilit)
solid (continuu)
double (linie dubl)
inset (chenar 3D)
outset (chenar 3D) etc.
Culoarea chenarului
Se va seta cu ajutorul atributului border-color.
Valori posibile:
none (niciuna)
un nume de culoare (aqua, red, blue, etc.)
specificaie numeric de tip RGB
funcia (r, g, b) cu valori ntre 0 i 255
funcia (r, g, b) cu procente ntre 0% i 100%

1. Precizai cteva atribute CSS.


2. Dai exemplu de utilizare a unui chenar de culoarea rosie.

S se realizeze structura unui tabel fr a folosi tag-ul <table>, ci folosind doar taguri <div> stilizate. Celulele acestui tabel vor avea culori diferite. Colorarea nu se va
face pe baza atributului bgcolor al tag-urilor HTML ci cu reguli CSS.

M3.U1.7. Rezumat
CSS este un acronim pentru Cascading Style Sheets (foi de stil n cascad).
CSS este utilizat la mbuntirea prezentrii unei pagini Web (adic a modului n care
browser-ul o afieaz).
97

Pentru a reduce dimensiunea fiierelor selectorii se pot grupa, separarea lor


fcndu-se prin virgul. Asemntor se pot grupa i declaraiile.
Sintaxa pentru definirea unei clase este urmtoarea:
.clasa_noastr { regul CSS }
n fiierul HTM,L cnd vrem s aplicm regula respectiv unui tag, scriem astfel:
<nume_tag class=clasa_noastr>Coninut tag </nume_tag>.
Precedena regulilor CSS este urmtoarea:
1) Regula care conine `! important` suprascrie o regul obinuit.
2) Specificitatea unui selector: selectorii mai specifici i suprascriu pe cei mai
generali. Specificitatea se obine prin concatenarea a trei numere: numrul de
atribute ID din cadrul selectorului (a), numrul de atribute CLASS (b) i
numrul de tag-uri din selector (c).
M3.U1.8. Test de evaluare a cunotinelor

Alegei rspunsul corect la urmtoarele ntrebri:


1. Stilurile inline se marcheaz prin:
a. marcatorul <style>
b. atributul style al unui marcator
c. atributul link al unui marcator
2. Stilurile externe se marcheaz prin:
a. marcatorul <link>
b. marcatorul <style>
c. marcatorul <css>
3. CSS este acronimul pentru:
a. Cascade Style Sheet
b. Cascade Styling Sheets
c. Cascading Style Sheets
4. Care dintre urmtoarele sintaxe este corect:
a. body{color: red;}
b. {body: color=red};
c. body: color=red
5. Cum inserm un comentariu n codul CSS?
a. /* comentariu */
b. <!- comentariu ->
c. //comentariu//
6. Sintaxa corect pentru a colora cu rou textul tuturor paragrafelor de pe pagina web
este:
a. p{text-color: red;}
b. p{color:red;}
c. all.p{color:red;}

98

Rspunsuri corecte: 1b, 2a, 3c, 4a, 5a, 6b

99

U2. Exemplificarea regulilor CSS


Cuprins
U2.1. Introducere................................................................................................................ 100
U2.2. Obiectivele unitii de nvare................................................................................. 100
U2.3. Exemplificarea utilizrii foilor de stil ...................................................................... 100
U2.4. Test de evaluare a cunotinelor ............................................................................... 119
Tem de control .................................................................................................................. 120

M3.U2.1. Introducere
Pentru a se fixa mai bine regulile CSS prezentate n unitatea de nvare
anterioar, unitatea de nvare curent i propune exemplificarea acestora. Astfel
se poate vedea n mod concret modul de utilizare al diferitelor tipuri de reguli.
Astfel, exemplele care vor fi oferite n aceast unitate vor servi studentului
ca un plus de claritate i ca un model pentru aplicaiile pe care le va avea de
realizat ca i tem.

M3.U2.2. Obiectivele unitii de nvare


Aceast unitate de nvare i propune clarificarea utilizrii foilor de stil
prin exemple concludent.
La sfritul acestei uniti de nvare acetia vor putea:
s aplice regulile CSS
s grupeze selectorii i declaraiile n cadrul regulilor
s defineasc stiluri intern, inline i n fiiere externe

s stilizeze frumos i corect o pagin web

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

M3.U2.3. Exemplificarea utilizrii foilor de stil


Exemplu de stil definit n seciunea head

100

Alt exemplu de stil definit n seciunea head:

Stiluri identificate cu ajutorul id-ului


101

Stiluri inline

Stil definit ca fiier extern

102

Exemplu de stiluri pentru font

103

Exemplu de culoare a fontului pentru tag-urile p, b i h1

104

Exemplu de stil pentru culoarea fontului textului

105

106

Exemplu de imagine cu stil

107

Exemplu de stil pentru distana dintre rndurile de text

Exemplu de stil pentru grosimea fontului


108

Exemple stiluri pentru chenare

109

Alt exemplu cu chenare

110

Exemplu de creare a unui meniu de navigare cu ajutorul stilurilor

111

Vom observa c meniul s-a realizat doar cu ajutorul unei liste neordonate i al stilurilor

Un exemplu cu imagini stilizate folosind CSS3

112

n <body> se poate observa ca nu este pus dect un <div> i patru tag-uri <img>,
fiecare dintre acestea avnd cte o clas.

n imaginile de mai jos va fi prezantat codul CSS aferent fiecreia din aceste 5 clase:
shadow, shadow2, one-edge-shadow, rotation i border-image.
Se poate observa c stilurile din CSS3 sunt prefixate de moz, webkit, o, ms.
Stilul care este prefixat de moz este vizibil pe Mozilla Firefox, cel prefixat de webkit este
pentru Chrome sau Safari, cel prefixat de o este pentru Opera, iar cel prefixat de ms este
pentru Internet Explorer. Avem nevoie de prefixri pentru fiecare browser n parte ntruct
CSS3 nu a intrat nc n standardele de codificare ale W3C.

113

114

Pentru a aeza mai multe imagini n straturi va trebui s folosim stilul z-index care ne
indic adncimea la care se gsete imaginea.
Cu ct valoarea lui z-index este mai mic, cu att imaginea va fi ntr-un plan mai
ndeprtat.
Exemplul urmtor va prezenta un ir de imagini n acordeon i stilurile care au ajutat la
poziionarea acestora n maniera precizat.

115

116

Un alt exemplu de CSS este prezentat pentru stilizarea butoanelor. Acestea nu sunt de
fapt decat link-uri care, pe baza stilurilor, vor arata sub forma de buton.

117

Pentru realizarea acestora s-a folosit biblioteca Bootstrap care contine CSS, JavaScript
i diferite font-uri.
n codul surs nu a trebuit dect apelarea unei clase de css n interiorul tag-ului <a>
<a href=# class=btn-success> Detalii</a> | <a href=# class=btn-success>
Editeaza</a> | <a href=# class=btn-success> Sterge</a>

n aplicaia web a fost inclus si fisierul css Bootstrap.css care a fost descrcat n
prealabil de pe internet. Codul de mai sus este aferent butoanelor exemplificate.

118

S se realizeze o pagin web care s conin un meniu de restaurant. Aplicaia va


trebui s conin ct mai multe imagini i informaii, iar stilizarea acesteia se va face
doar cu ajutorul regulilor CSS. Nu se va folosi stilizarea pe baza atributelor tagurilor HTML.
1. Enumerai 2 particulariti pentru CSS.
2. Realizai un evantai din imagini folosindu-va de stilul z-index.
M3.U2.4. Test de evaluare a cunotinelor
Alegei rspunsul corect la urmtoarele ntrebri:
1. Ce stil se foloseste pentru a ngroa un text:
a. font-size: bold
b. <b>
c. font-weight:bold
2. Care este stilul folosit pentru a seta tipul de font al unui text:
a. font-face
b. font
c. font-family
3. Cum setm culoarea roe, dimensiunea de 2 pixeli i stilul sub form de
linie dubl a chenarului paragrafelor de pe pagina web:
a. p{border: red 2px double}
b. p{border-color: red; border-size: 2px; border-style: double}
c. p{border: 2px double red}
4. Care este stilul care seteaz marginea de sus a unui element HTML?
a. indent-top
b. margin-top
c. padding-top
5. Care este stilul care trebuie aplicat ancorelor de pe pagin astfel nct, dac
se trece cu mouse-ul asupra lor, s i schimbe culoarea textului n rou:
a. a{href: hove=red}
b. a:hover{color:red}
c. a{hover-color: red}
Rspunsuri corecte: 1c, 2c, 3a, 4b, 5b

119

Tem de control
Rspundei la urmtoarele ntrebri:
1. Precizai cteva atribute CSS.
2. Dai exemplu de utilizare a unui chenar de culoarea roie.
3. Enumerai 2 particulariti pentru CSS.
4. Realizai un evantai din imagini folosindu-va de stilul z-index.

Rspunsul va fi redactat n Word i va fi transmis prin email profesorului care


ine laboratorul. Nota pe aceast tema va reprezenta 1/4 din nota final de
laborator

120

Modulul IV. JavaScript


Cuprins
Introducere .................................................................................................................. 121
Competene ................................................................................................................. 122
U1. Limbajul JavaScript ............................................................................................. 123
U2. Obiecte JavaScript............................................................................................... 138
U3. Aplicaii complexe n JavaScript ......................................................................... 156
Tem de control .......................................................................................................... 170

Introducere
Limbajul JavaScript a fost realizat de firmele Netscape si Sun si a fost
conceput ca un limbaj care extinde posibilitatile de lucru ale HTM-ului. Limbajul
conlucreaza cu HTML-ul.
Carateristici ale limbajului JavaScript:

n JavaScript se scriu secvene de program numite scripturi. Majoritatea


acestor secvene sunt alctuite din funcii, care rspund anumitor
evenimente.

n JavaScript NU se citesc i NU se scriu fiiere;

JavaScript este un limbaj interpretat. Asta nseamn c browserul preia


o instruciune, o execut, apoi preia o alt instruciune pe care o
execua, .a.m.d.

JavaScript este un limbaj care utilizeaz obiecte;

n JavaScript se face distincie ntre literele mari i literele mici, adic


este "case sensitive".

Erorile de sintax se depisteaz greu, drept urmare se poate folosi


funcia alert( ).

Folosete din sintaxa lui C++ i a limbajului Java

JavaScript lucreaz cu funcii definite de programatori sau/i cu funcii


predefinite
JavaScript ofer capacitatea de a face paginile statice s devin interactive
i mai prompte fa de aciunile utlilizatorilor i de intrrile acestora.
JavaScript pemite utilizatorilor n Web s creeze pagini dinamice, prin nglobarea
unui script n structura HTML existent. n felul acesta se pot plasa procese n
spatele butoanelor, se pot efectua calcule cu datele introduse prin formulare, sau se
poate efectua aciuni cand utilizatorul trece cursorul mouse-ului peste un element
HTML sau peste un obiect de tipul Document.
JavaScript ofer avantaje fa de documentele interactive bazate pe server,
deoarece n general documentele bazate pe JavaScript nu sunt dependente de
prelucrarea pe parte de server, astfel c pot rspunde mai rapid la interaciunile i
cererile utilizatorului.

121

Competene
Acest modul are ca obiectiv introducerea studenilor n lumea limbajului de
scriptare JavaScript i familiarizarea acestora cu cteva dintre noiunile utile
nceperii lucrului bazat pe interaciunea cu elementele din pagina web.
La finalul acestui modul, studenii vor putea s:
neleag utilitatea i importana limbajului JavaScript
creeze propriile scripturi
includ scripturile scrise de ctre ei n codul HTML
creeze cod care rspunde prin aciuni la evenimente
utilizeze obiectele puse la dispoziie de JavaScript
creeze propriile obiecte folosind JavaScript
creeze animaii pe care s leinclud n paginile web

122

U1. Limbajul JavaScript


Cuprins
U1.1. Introducere................................................................................................................ 123
U1.2. Obiectivele unitii de nvare................................................................................. 123
U1.3. Avantajele utilizrii limbajului JavaScript ............................................................... 124
U1.4. nglobarea instruciunilor JavaScript n HTML ....................................................... 126
U1.5. Executarea scripturilor ............................................................................................. 126
U1.6. Tipuri de date, variabile i operatori ........................................................................ 126
U1.7. Instruciuni i funcii predefinite .............................................................................. 127
U1.8. Manipularea tag-urilor/nodurilor/elementelor .......................................................... 132
U1.9. Handlere de evenimente ........................................................................................... 134
U1.10. Rezumat .................................................................................................................. 136
U1.11. Test de evaluare a cunotinelor ............................................................................. 136

M4.U1.1. Introducere
JavaScript este un limbaj de nivel nalt, bazat pe obiecte, conceput pentru
a le permite utilizatorilor i programatorilor n Web s creeze cu uurin
documente Web interactive. El ofer caracteristicile eseniale ale unui limbaj
orientat spre obiecte, fr caracteristicile complicate care nsoesc alte limbaje, ca
Java i C++.
Codul JavaScript poate fi inclus n paginile HTML i majoritatea
browserelor moderne recunosc i interpreteaz acest cod. Acesta este un limbaj
interpretat de ctre partea de client a comunicrii (adic de ctre browser) i de
aceea dureaz mai mult execuia codului, ntruct browserul compileaz
instruciunile linie cu linie n timpul rulrii, chiar nainte s le execute.
Motivul pentru care se folosete JavaScript este acela c permite
interaciunea utilizatorului paginii web cu elementele din acea pagin. Astfel vop
putea crea un site care s nu fie doar unul de prezentare, ci unul interactiv.

M4.U1.2. Obiectivele unitii de nvare


Aceast unitate de nvare i propune iniierea studenilor limbajul
JavaScript.
La sfritul acestei uniti de nvare acetia vor putea s:
neleag avantajele utilizrii limbajului JavaScript
nglobeze instruciuni Javascript n HTML
neleag modul de execuie a scripturilor
declare variabile n JavaScript
123

foloseasc operatorii pui la dispoziie de JavaScript


foloseasc funcii predefinite de JavaScript i s i declare propriile
funcii
neleag structura ierarhic a obiectelor JavaScript
neleag n mod corect noiunea de eveniment i s trateze evenimentele
care se produc

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.


M4.U1.3. Avantajele utilizrii limbajului JavaScript

JavaScript poate fi nglobat n HTML

Codul JavaScript este gzduit n documente HTML i executat din interiorul lor.
JavaScript folosete HTML ca modalitate de a sri n cadrul de lucru al aplicaiilor pentru
Web i-i extinde capacitile normale, asigurnd evenimente pentru etichete HTML i
permind acestui cod condus de evenimente s se execute din interiorul su.

JavaScript este dependent de mediu

JavaScript este un limbaj de scriptare. Software-rul care ruleaz programul JavaScript


scris este motorul de intrepretare din mediu - NetscapeNavigator, Microsoft Internet Explorer
sau unul din motoarele pe parte de server. Cnd este inclus ntr-un document HTML,
JavaScript depinde de browser pentru a fi recunoscut. Dac browserul nu l recunoate,
programul va fi ignorat sau mai ru, poate fi afiat ca text pe pagin.

JavaScript este un limbaj interpretat

JavaScript fiind un limbaj de scriptare este interpretat de browser nainte de a fi


executat. JavaScript nu este compilat n binary - ca un fiier EXE, ci rmne parte a
documentului HTML la care este ataat. Dezavantajul unui limbaj interpretat este c
executarea limbajului de baz dureaz mai mult, deoarece browserul compileaz instruciunile
n timpul rulrii chiar nainte s le execute. Avantajul const n faptul c este mult mai uor de
actualizat codul surs.

JavaScript este un limbaj flexibil n privina tipului de date

JavaScript difer mult de limbajele stricte n privina tipului de date, JavaScript este
mult mai flexibil. Variabilele de un anumit tip pot fi declarate, dar nu este obligatoriu ca acest
lucru s fie fcut. Se poate lucra cu o variabil chiar dac nu i se cunoate tipul specific
nainte de rulare.

124

JavaScript este un limbaj bazat pe obiecte

Netscape i alii se refer la JavaScript ca la un limbaj de programare orientat spre


obiecte (OOP), dar aceasta este o deformare a adevrului nteles al sintagmei OOP. JavaScript
este un limbaj bazat pe obiecte. n cadrul limbajului JavaScript se lucreaz cu obiecte care
ncapsuleaz date (proprieti) i comportamente (metode), dar acestea nu pot fi subclasate.
Modelul de obiect JavaScript este bazat pe instan, nu pe motenire.

JavaScript este condus de evenimente

Codul JavaScript scris ntr-o aplicaie Web poate rspunde la evenimente generate de
utilizator sau de sistem. n sine, limbajul JavaScript este echipat pentu a trata evenimente.
Obiectele HTML, de exemplu butoanele sau cmpurile de text, sunt mbuntite pentru a
accepta handlere de evenimente.

JavaScript nu este Java

Java i JavaScript au fost create de dou companii diferite i motivul principal pentru
similitudinea denumirilor este legat exclusive de marketing. Exist o numeroase deosebiri
ntre Java i JavaScript. n primul rnd, dac JavaScript este strns legat de HTML, o
miniaplicaie Java este conectat la un document HTML prin eticheta <applet>. Java este
folosit pentru miniaplicaii sau pentru aplicaii complexe, pe cnd JavaScript este folosit n
primul rnd pentru scripturi. Sintaxa limbajului JavaScript aduce cu sintaxa limbajului Java.

JavaScript este multifuncional

JavaScrip are o mulime de faete i poate fi folosit n multe contexte pentru a oferi
soluii la probleme din Web. Principalele scopuri ale limbajului JavaScript sunt:
nfrumuseeaz i anim paginile HTML statice prin efecte speciale, animaii i
manete;
valideaz date, fr a trece totul serverului;
are un rol important n aplicaii client/server pentu Web;
permite dezvoltarea de aplicaii pe parte de client;
slujete ca i legtur pe partea de client ntre obiecte HTML, miniaplicaii Java,
controale ActiveX i module plug-in Netscape.

JavaScript evoluaz

JavaScript continu s evolueze ca limbaj.

JavaScript acoper diverse cotexte

JavaScript este un limbaj de scriptare. Programatorii Web se ndreapt mai ales spre
scriptarea pe parte de client. JavaScript este un limbaj nativ pentru instrumente de dezvoltare
Web.

125

M4.U1.4. nglobarea instruciunilor JavaScript n HTML


Scripturile JavaScript sunt integrate ntr-un document HTML folosind perechea de
etichete <script> i </script>. Atributul type este folosit pentru a specifica numele fiierelor
surs JavaScript externe.
Atributele etichetei script sunt:
Defer - atribut Boolean folosit pentru a anuna browserul dac scriptul din aceast
seciune genereaz un coninut;
Language - atribut depreciat, care este utilizat pentru a specifica limbajul i versiunea
folosite ntre etichete;
Src - atribut care specific locaia URL a unui fiier JavaScript surs extern;
Type - atribut care a nlocuit atributul language i care anun browserul ce limbaj se
folosete ntre etichete.
n concluzie, exist trei modaliti de a introduce un script JavaScript ntr-un document
HTML, i anume:

Scriptul se scrie n head; .<script language=JavaScript > si</script>;

Scriptul se scrie n body; .<script language=JavaScript > si</script>;

Scriptul apare ca i fiier extern cu extensia js, deci nume.js;


<script src = nume.js > i</script>
M4.U1.5. Executarea scripturilor
Executarea unui script JavaScript ncepe n momente diferite, n functie de felul n care
este scris. Dac scriptul afecteaz coninutul de pe pagin, aa cum se ntmpl prin folosirea
instruciunii document.write(), este executat pe msura ce este ntlnit. Exist de asemenea un
handler de eveniment, onLoad, care este executat numai dup ce documentul HTML a fost
complet ncrcat n browser.
Dac scripturile JavaScript sunt stocate ntr-un fiier separat, ele sunt de asemenea
evaluate atunci cnd se ncarc pagina i nainte s aib loc vreo aciune.
Toate instruciunile JavaScript aflate n blocul unei funcii sunt interpretate, iar
executarea nu se petrece pan ce funcia nu este apelat dintr-un eveniment JavaScript.
Instruciunile JavaScript care nu se afl n blocul unei funcii sunt executate dup ce
documentul se ncarc n browser, practic pe msur ce este redat. Rezultatul executrii
acestor instruciuni va fi vizibil pentru utilizatori atunci cnd vd pentru prima dat pagina.

M4.U1.6. Tipuri de date, variabile i operatori


n JavaScript exist urmtoarele tipuri de date : tip ir; tip numr ntreg; numr ntreg n
baza 10, 8 sau 16.
126

O variabil se poate declara particular cu "var".


O variabil poate primi orice valoare, nu se declar tipul ei.
Operatori
Operatori aritmetici : +, -, * /, %, ++ ,-- , + (operator unar), - (operator unar)
Operatori relaionali: <, <=, >, >=
Operatori de egalitate: = = pentru test egalitate
!= pentru test inegalitate
Operatori logici: ! (negarea logic)
|| operatorul logic sau (este operator binar): dac cel puin unul
dintre operanzi este true, rezult true, altfel rezultatul este false
&& operatorul logic si
Operatori logici pe biti: <<, >> operatori de deplasare
& - si pe bii
| - sau pe bii
- sau exclusiv pe bii
~ - negarea pe bii- are rolul de a inversa coninutul biilor
Operatorul ',' (virgul)
Operatorul conditional : exp1 ? exp2 : exp3;
Operatorul de concatenare pentru siruri este +
19T

19T

19T

19T

M4.U1.7. Instruciuni i funcii predefinite


Instruciunile urmtoare au aceiai sintax i semantic precum i n limbajul Java:

if

bloc de instruciuni ( {.} )

switch;

while;

do while

for

Funcii predefinite

alert (mesaj) afieaz o caset n care se va scrie mesaj


confirm(mesaj) caseta afieaz date de tip ir. Utilizatorul poate apsa
butonul OK , caz n care se returneaz true, sau Cancel, caz n care se returneaz
false
prompt(sir_afisat, sir_asteptat) caseta afieaz sir_afisat i ateapt
introducerea valorii n sir_asteptat. Variabila sir_asteptat poate fi iniializat cu
zero.
escapes(s)
eval(s) - s este un String care conine operaii matematice (de. ex.:.2+4). Funcia
returneaz rezultatul acestei operaii, n acest caz 6. Dac nu este vorba despre o
expresie calculabil, atunci se returneaz un mesaj de eroare.
isFinite(n) - decide dac numrul n este finit
isNaN(x) - verific dac valoarea x este un numr valabil (not-a-number). Funcia
returneaz valoarea true, daca x e un numr.
127

Number(x) - Convertete coninutul obiectului x n numr i l returneaz


parseInt (sir) converteste un ir ctre un ntreg. Conversia se face pn cnd
este ntlnit un caracter care nu este cifr.
parseFloat(sir) - convertete un ir ctre o valoare real. Conversia se face pn
cnd este ntlnit un caracter care nu este cifr. Punctul este "virgula zecimal".

n JavaScript putem introduce un text n mod dinamic.


n JavaScript putem introduce i tag-uri HTML.
De exemplu putem scrie: document.write(<b>+ text + </b>). Pe pagin nu se va
afisa textul <b>+ text + </b>, ci se va afisa "text" scris ngrosat, de unde rezult c
browserul aneles c este vorba de tag-ul HTML <b>.
Exemplu
Dou exemple de aplicaii n JavaScript.

Aplicatie_1:

128

Aplicatie_2:

129

Evenimente
Una dintre caracteristicile-cheie ale limbajului JavaScript este capacitatea de a
intercepta un numr limitat de aciuni, cunoscute ca evenimente. Un eveniment este o aciune,
care apare la un moment dat i n urma creia este declanat execuia unei anumite pri din
program. Ori de cte ori vizitatorul face click pe o legtur, de exemplu, cnd introduce un
text sau chiar cnd trece cu mouse-ul deasupra unei zone a paginii, survine un eveniment la
care scriptul reacioneaz genernd un rspuns.
Obiecte
Folosind limbajul JavaScript, se pot defini obiecte proprii. Limbajul pune ns la
dispoziie o ierarhie de obiecte predefinite, respectnd modelul DOM (Document Object
Model care este un pachet de interfee conceput de W3C). Elementul de legtur ntre
JavaScript i DOM este obiectul Document, ce implementeaz interfaa Document din DOM.
Legatura ntre limbajul JavaScript i elementele dintr-un formular
JavaScript creaz o ierarhie de obiecte predefinite, respectnd modelul obiect document
(DOM). Astfel coninutul fiecruit tag- HTML sau regul CSS pot fi modificate.
Aceast ierarhie prezentat de navigatorul Netscape este ilustrat n figura de mai
jos [3]:

130

Fiecrui nivel din ierarhia de mai sus putem spune c i corespunde o serie de noduri.
Astfel avem nodul document, cu subnivele/subnoduri cum ar fi image.
Pornim de la o aplicaie concret, fie un formular care are structura conform imaginii de
mai jos:

JavaScript recunoate elementele din pagina WEB n dou moduri:


dup atributul name al fiecrui tag, ncepnd cu tag-ul <form> i continund cu
elementele acestuia;
dup numele implicit alocat elementelor din pagin. Elementele de acelai fel sunt
stocate ntr-un vector (array[i]) a crui index ncepe cu valoarea zero.

Pentru formularul de mai sus, JavaScript creaz o structur arborescent conform


poziiei ocupat de fiecare element n pagin.
Pagina se numete document, adic ne referim la nodul document.
Structura arborescent arat astfel:

131

document
_______________________________________________

images[0]
forms[0]
links[0]
images[1]
___________________

elements[0] elements[1] elements[2]

ntr-un document HTML se pot crea mai multe formulare. Acestea se vor numi implicit
forms[0], forms[1],etc.
Elementele fiecrui formular vor fi denumite elements[0], elements[1],etc.
Imaginile dintr-o pagin vor fi numerotate ncepnd cu prima imagine din pagin cu
numele images[0], images[1],etc.
Link-urile dintr-o pagin vor fi i ele numerotate ncepnd cu indexul 0 cu numele
links[0], links[1],etc.
Pentru a acesa primul element din formular vom scrie una din urmtoarele secvene n
JavaScript:
1. document.forms[0].elements[0]
2. document.f1.nume aceast expresie se folosete n cazul n care formularul
este descris conform secvenei de cod de mai jos:
<form name="f1">
Imagine_1 <br><img src=c:\CURS_WEB_ID_FINAL\s.jpg> <br>
Nume&nbsp&nbsp&nbsp&nbsp&nbsp:<input type ="text" name="nume"
value=""><br>
Prenume :<input type ="text" name="prenume" value=""><br>
<input type="submit" value=" OK " ><br><br><br>
Imagine_2 <br><img src=c:\CURS_WEB_ID_FINAL\s.jpg>
<br><br>
<a href="l.html"> <i>WWW.GOOGLE.COM </i></a>
</form>
M4.U1.8. Manipularea tag-urilor/nodurilor/elementelor
Pentru a putea manipula informaia dintr-un element (tag) HTML este necesar ca mai
nti s se obin o referin la acel element. n acest scop se pot folosi urmtoarele metode:
document.getElementById( )- returneaz un element, identificat dup atributul id.W3C
recomand ca pentru identificarea elementelor s se foloseasc id;
document.getElementByName() - returneaz un element, identificat dup atributul
name. ;
document.getElementsByTagName() - returneaz o list de elemente, identificate dup
numele tag-ului.

132

Dup localizarea unui element, se poate explora structura arborescent ncepnd cu acel
punct, folosind proprieti ale obiectului precum: parentNode, firstChild, nextSibling etc.
Dup obinerea unei referine la un element, se pot manipula diversele proprieti ale
acestuia. Un exemplu n acest sens sunt atributele CSS care se pot modifica prin intermediul
proprietii style. Exist i o excepie: float. Acesta este un cuvnt rezervat n JavaScript, deci
nu se poate folosi element.style.float, dar se poate folosi element.style.cssFloat.
Crearea de noi tag-uri/noduri/elemente
Exist cel puin dou tipuri diferite de noduri, astfel avem : nodurile element i nodurile
de text. Acestea se creaz folosind metodele
document.createElement() - pentru elemente;
document.createTextNode() - pentru nodurile de text.
Metoda appendChild() adaug un nod fiu nodului pentru care este invocat. Metoda
pereche este removeChild() care permite tergerea unui nod fiu. Crearea unui nod se poate
face i prin alt metod, folosind metoda document.write(), dar datorit faptului c exist
posibilitatea de a introduce orice, chiar i cod prost structurat, aceast metod poate crea
probleme serioase, n special n cazul documentelor XML. Din aceast cauz, funcia nu are
nici un efect n documentele XHTML (i introducerea ei genereaz mesaje de eroare). n
cazul XHTML, singura modalitate de a manipula structura documentelor via JavaScript este
DOM.
Preluarea coordonatelor la apsarea unui click al mouse-ului cu ajutorul
JavaScript
JavaScript permite preluarea de coordonate n momentul n care se efectuaz click pe o
anumit imagine. Acest lucru este realizat cu ajutorul obiectelor Event care sunt create
automat ori de cte ori are loc un eveniment. Exist un numr de proprieti asociate unui
obiect Event care pot fi interogate pentru a afla informaii suplimentare despre obiectul Event.
Dintre aceste proprieti fac parte i Event.pageX i Event.pageY n care sunt reinute
coordonatele X i Y n pixeli ale cursorului, relativ la pagina curent, n momentul n care s-a
produs evenimentul. Cu ajutorul acestor dou proprieti ale unui obiect de tip Event se poate
calcula poziia mouse-ului asupra imaginii, n momentul n care s-a efectuat un click asupra
acesteia.
Desenarea unor figuri geometrice cu ajutorul limbajului JavaScript
Librria JavaScript Vector Graphics furnizeaz capabiliti de realizare a graficii petru
JavaScript: funcii de desenare dinamic a cercurilor, elipselor, liniilor oblice i a poligoanelor
(de exemplu triunghiuri, dreptunghiuri). Utilizarea librriei Vector Graphics poate poate fi
uoar chiar i n cazul n care un utilizator nu are experien n lucrul cu JavaScript. Aceast
librrie const dintr-un script JavaScript numit wz_jsgraphics.js.
n limbajul HTML nu exit elemente ca linii oblice, elipse, cercuri sau alte elemente de
acest gen.

133

Funcionalitatea acestei librrii este redus la urmtorele browsere Web: GeckoBrowsers, Internet Explorer 4, 5 and 6, Opera 5, 6 i 7+, pentru sistemul de operare
Windows.
M4.U1.9. Handlere de evenimente
Handler-ele de evenimente sunt introduse n <form> ca atribute suplimentare n tagurile
HTML. Ca valoare pentru aceste atribute, sunt date instruciuni JavaScript, care trebuie
executate. Handler-ele de evenimente se recunosc dup numele lor. Acestea ncep, de
exemplu, cu onClick.
Nr
crt
1
2
3
4

EVENTHANDLER

TAG-URILE HTML PERMISE

onAbort
onBlur
onChange
onClick

5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

onDblClick
onError
onFocus
onKeydown
onKeypress
onKeyup
onLoad
onMousedown
onMousemove
onMouseout
onMouseout
onMouseup
onReset
onSelect
onSubmit
onUnload
javascript

img
a, area, button, input, label, select, textarea
Input, select, textarea
a., abbr, acronym, address, area, b, big,
blockquote, body, button, caption, center, cite,
col, colgrouzp, dd, del, dfn, dir, div, dl, dt, em,
fieldset, form, hx, hr, I, img, input, ins, kbd,
label, legend, li, link, map, menu, noframes,
noscript, object, ol, optgroup, option, p, pre, q,
s, samp, select, small, span, strike, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr,
tt, u, ul, var
Vezi onClick
img
a, area, button, input, label, select, textarea
Vezi onClick
Vezi onClick
Vezi onClick
body, frameset
Vezi onClick
Vezi onClick
Vezi onClick
Vezi onClick
Vezi onClick
form
Vezi onClick
form
frameset, body
a , area

134

Exemplu
S se scrie un text ANTETUL MEU folosindu-se culoarea verde.
Cnd se trece cu mouse-ul deasupra acestui cuvnt acesta s se
transforme n cuvntul ANTET! scris cu negru.
Totodat s se scrie un text n caseta care apare pe ecran, iar textul
scris s fie afiat ntr-o csu alert, atunci cnd se face click n afara casetei,
pe ecran.
Soluia este dat n figura de mai jos.

S se realizeze un formular care s permit adugarea datelor despre o persoan:


nume, prenume, cnp i adresa. Formularul va avea un buton de submit. De fiecare
dat cnd se va apasa acest buton se va face o verificare (dac sunt completate toate
cmpurile). n caz afirmativ, se vor scrie ntr-un alert() datele despre persoana

135

caretocmai a fost introdus.


S ne reamintim...

Variabilele n JavaScript se declar folosind cuvntul cheie "var"


Un eveniment este o aciune, care apare la un moment dat i n urma cruia
este declanat execuia unei anumite pri din program
Pentru a calcula care sunt coordonatele X i Y n pixeli ale cursorului, relativ la
pagina curent, n momentul n care s-a produs un se folosesc dou proprieti
ale luiEvent: Event.pageX i Event.pageY
Librria JavaScript Vector Graphics furnizeaz capabiliti de realizare a
graficii petru JavaScript

M4.U1.10. Rezumat
JavaScript este un limbaj destul de permisiv n ceea ce privete scrierea de cod.
Spre exemplu, variabilele nu au un anumit tip, ele declarndu-se precedate de
cuvntul cheie "var". n JavaScript ns exist urmtoarele tipuri de date: tip ir, tip
numr ntreg i numr ntreg n baza 10, 8 sau 16.
Operatorii din JavaScript sunt cei cunoscui din limbajele de programare:
aritmetici, logici, logici pe bii, condiional, de concatenare.
Instruciunile din JavaScript sunt: if, switch, for, while, do-while.
JavaScript este un limbaj obiect orientat. Putem astfel s creem obiecte proprii,
dar avem la dispoziie i o serie de obiecte prestabilite cu care putem lucra. nsi
ntreaga structur de componente JavaScript este ierarhizat sub form de obiecte,
toate pornind dintr-un obiect central numit document, obiect ce reprezint pagina
web.
JavaScript este un limbaj care permite tratarea evenimentelor. De fiecare dat
cnd utilizatorul interacioneaz cu pagina web se produce un eveniment, pe care
JavaScript l poate interpreta i poate produce aciuni asociate evenimentelor.
M4.U1.11. Test de evaluare a cunotinelor
Alegei rspunsul corect la urmtoarele ntrebri:
1. n cadrul crui marcator se scrie codul JavaScript?
a. <js>
b. <javascript>
c. <script>
2. Cum afim un mesaj ntr-o fereastr de dialog n JavaScript?
a. alert(Mesaj);
b. alert Mesaj;
c. showMessage(Mesaj);

136

3. Care dintre urmtoarele variante NU reprezint un nume de eveniment JavaScript?


a. onClick
b. onJavascript
c. onKeydown
4. Unde se poate plasa seciunea <script> pentru a introduce codul JavaScript?
a. n seciunea <head>
b. n seciunea <body>
c. Att n <head> ct i n <body>
5. Care este sintaxa corect pentru a ne referi la fiierul script.js?
a. <script src=script.js>
b. <script htef=script.js>
c. <script name=script.js>
Rspunsurile corecte: 1c, 2a, 3b, 4c, 5a

137

U2. Obiecte JavaScript


Cuprins
U2.1. Introducere................................................................................................................ 138
U2.2. Obiectivele unitii de nvare................................................................................. 138
U2.3. Obiectul window ...................................................................................................... 139
U2.4. Obiectul location ...................................................................................................... 141
U2.5. Obiectul document ................................................................................................... 142
U2.6. Obiectul forms .......................................................................................................... 143
U2.7. Obiectul image ......................................................................................................... 145
U2.8. Obiectul date............................................................................................................. 145
U2.9. Obiectul navigator .................................................................................................... 146
U2.10. Obiectul layers (all) ................................................................................................ 146
U2.11. Obiectul Math ......................................................................................................... 151
U2.12. Obiectul Array ........................................................................................................ 151
U2.13. Obiectul String ....................................................................................................... 152
U2.14. Rezumat .................................................................................................................. 154
U2.15. Test de evaluare a cunotinelor ............................................................................. 155

M4.U2.1. Introducere
n limbajul JavaScript sunt multe obiecte predefinite. Acestea dispun de
proprieti i metode specifice, care se pot folosi direct. n exemple sunt folosite
obiectele window i document, mpreun cu metodele lor, fr ca acestea s fie
specificate explicit.
Obiectele sunt ordonate ntr-o structur ierarhic, la vrful ei afndu-se
obiectul window care descrie fereastra actual a browserului. Pe treapta urmtoare
se afl obiectul document, care descrie coninutul paginii. Pe treapta urmtoare se
afl obiectul form. Pe lng aceste obiecte, exist o serie de alte obiecte.
Pentru a putea folosi un obiect, trebuie ca acesta s fie mai nti creat cu
ajutorul cuvntului cheie new (vezi limbajul Java). Astfel pot fi apelate ulterior
diferite proprieti i metode.
M4.U2.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s:


foloseasc obictele puse la dispoziie de JavaScript
declare i s foloseasc propriile obiecte
s foloseasc proprietile obiectelor

s creeze aplicaii utiliznd obiecte, metode i proprieti din JavaScript

138

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

M4.U2.3. Obiectul window


Obiectul window corespunde ferestrei curente din browser i cu ajutorul lui se pot afla /
modifica proprietile ferestrei. Exist i posibilitatea de a deschide ferestre noi. Acesta este
cel mai de sus obiect din ierarhia obiectelor JavaScript. Corespunde ferestrei curente din
browserul web. Prin acest obiect se pot afla prorietile ferestrei curente. Exist i posibiltatea
de a deschide ferestre noi. Aa-numita "fereastr principal" a browserului web se poate apela
prin numele rezervate "window" sau "self".
Proprieti ale obiectului window:
Nr.
crt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

PROPRIETATE

ACCES

closed
defaultStatus
innerHeight
innerWidth
locationBar
menuBar
name
outerHeight
outerWidth
pageXOffset
pageYOffset
personalBar
scrollBar
statbar
status
toolbar

read
read, write
read, write
read, write
read
read
read, write
read, write
read, write
read
read
read
read
read
read, write
read

139

Exemplu
Dou exemple de aplicaii n JavaScript
Aplicaie_1:

Aplicatie_2

140

Metode prin care se poate apela obiectul window:


Nr.
crt.
1
2
3
4
5
6
7
8
9

11

12
13
14
15

16

METODA

DESCRIERE

Returneaz Stringul s ca text ntr-un dialog-box.


Face fereastra inactiv.
Termin un eveniment/proces infint, inceput cu setIntervall(). p
este parametrul in care a fost salvat rezultatul din setIntervall().
clearTimeout(p)
Termin un Timeout care a fost nceput cu setTimeout().p este
parametrul in care a fost salvat rezultatul din setTimeout().
close()
Inchide fereastra.
confirm(s)
Returneaz Stringul s ca text ntr-un dialog-box., care este
prevazut cu butoanele de ok si cancel.
moveBy(x,y)
Mut o fereatra in directia (x,y)-pixeli (orizontal(x) sau vertical
(y)). Un nr. negativ mut fereastra nspre stnga-sus.
moveTo(x,y)
Mut fereastra la coordonatele x,y pixeli.
open(p1,p2,p3)
Deschide o nou fereastr. Al 3-lea parametru e optional.
p1: adresa (URL) unui fiier , care se vrea deschis n
fereastr.(Un String gol deschide o fereastra goala)
p2: Numele ferestrei
p3: (optional) Date despre cum arat fereastra. Mai multe
propieti se despart prin virgul
prompt(p1,p2)
Creeaz un dialogbox cu 2 butoane analog metodei confirm() i
un cmp de text (textfield), n care utilizatorul face propriile
remarci.
p1 e un String, care apare n dialogbox
p2 este textul acre apare prima dat n cmpul de text.
resizeBy(x,y)
Mrete fereastra cu x pixeli la dreapta i cu y pixeli n jos. La
valori negative, fereastra se micoreaz.
resizeTo(x,y)
Mrete fereastra la o marime de x pixeli n direcie orizontal i
cu y pixeli n direcie vertical.
scrollTo(x,y)
Duce (scroll) fereastra la o anumit poziie care e dat de coord. x
i y.
setIntervall(p1,p2) Ruleaz o instruciune ntr-un ritm dinainte dat pn cnd e oprit
de clearIntervall()
p1: instruciune sau funcie JavaScript care trebuie executat.
p2: Valoare in milisecunde, pn cnd se execut p1.
setTimeout(p1,p2) Ruleaz o instruciune n funcie de un anumit timeout.
p1: instruciune sau funcie JavaScript care trebuie executat.
p2: Valoare in milisecunde, pn cnd se execut p1.
alert(s)
blur()
clearIntervall(p)

Direct din acest obiect sunt derivate obiectele document, event, history i location.
M4.U2.4. Obiectul location
Obiectul location ne d adresa HTML-ului local. Cnd o pagin este ncrcat (de
exemplu http://www.xyz.com/page.html) atunci location.href conine adresa. Pentru

141

location.href i putem atribui noi o adres. Butonul "button" aduce o nou pagin n fereastra
actual (Window)
Aplicaie:

M4.U2.5. Obiectul document


Acest obiect se refer la coninutul unei ferestre dintr-un browser.
n tabelul urmtor sunt metodele obiectului document:
Nr.
Crt
1
2
3
4
5
6
7

PROPRIETATE DESCRIERE

ACCES

alinkColor
bgColor
cookie
fgColor
lastModified
linkColor
referer

read, write
read, write
read, write
read, write
read
read, write
read

title

9
10

URL
vlinkColor

culoarea unui link pe care s-a dat click


culoarea de fundal
posibilitatea de a citi si de a scrie cookie-uri
culoarea textului (foreground)
data si ora ultimei modificri
culoarea linkurilor care nu au fost nc vizitate
adresa URL de la care a fost chemat pagina
curent
titlul unui fisier HTML, aa cum apare el n
tagul <title>
adresa completa a documentului curent
culoarea linkurilor care au fost vizitate

read
read
read, write

Metode care stau la dispoziie:


Nr.
Crt.
1
2

METODA

DESCRIERE

close()
open()

write(s)

Inchide un document care a fost deschis cu metoda open()


Deschide un document pt scriere. Nu se desschide o nou
fereastr, documentul actula se va suprascrie
Scrie Stringul s n documentul actual

142

writenln(s)

Analog metodei write(), doar c se trece la linie nou

Obiecte derivate din obiectul document: all, anchors, applets, areas, embeds, forms,
images, layers, links, plugins.
Aplicaie:

M4.U2.6. Obiectul forms


Acest obiect pune la dispoziie metode i proprieti care permit accesul la un formular
definit n interiorul unui fiier HTML.
Accesul la un formular se poate face prin 3 metode:
1. prin numele formularului: <form name=FormNAME>
Acces : document.FormNAME.reset()
2. prin indexul formularului. Primul formular primeste 0 etc.

Acces : document.forms[4].reset()
3. Prin numele formularului ca indicator al indexului. Numele se d cu atributul name
din tagul <form>
Acces : document.forms[FormNAME].reset()

Proprieti ale obiectului form:


Nr.
Crt.
1

PROPRIETATE DESCRIERE

encoding

length

action

ACCES

retine cuvntul/valoarea stabilit/ n


atributul action din tagul <form>
retine cuvntul/valoarea stabilit/ n
atributul encoding din tagul <form>
reine nr. formularelor dintr-un fisier

143

read, write
read, write
read

method

name

target

retine valoarea stabilit/ n atributul


method din tagul <form>
retine cuvntul/valoarea stabilit/ n
atributul name din tagul <form>
reine numele frame-ului care s devin
activ dup trimiterea unui formular

read, write
read, write
read, write

Metode ale obiectului form:


Nr.
Crt.
1

METODA

DESCRIERE

reset()

submit()

Sterge toate datele introduse ntr-un formular, si are aceeai


funcie ca butonul care se introduce cu atributul type=reset
Trimite un formular, si are aceeai funcie ca butonul care
se introduce cu atributul type=submit

Exemplu
Exemplu de aplicaie mai complex n JavaScript

144

M4.U2.7. Obiectul image


Acest obiect se afla n ierarhie sub obiectul document. Se refer la proprietile imaginii
introduse in HTML. Aceste proprieti pot fi modificate n interiorul unui fiier HTML.
Obiectele image se pot apela in felul urmator:
1.

Folosirea unui index. Prima imagine primete nr. 0.


document.images[0].src

2.

Prin numele imaginii din tagul img


<img name=BILD src=t.jpg>
document.BILD.src

Propriti ale obiectului image:


Nr.
Crt.
1

PROPRIETATE DESCRIERE

Complete

3
4

Height
Hspace

5
6
7
8

Length
Lowsrc
Name
Src

Vspace

10

width

Border

ACCES

conine indicaii despre margine, aa cum se


gsesc ele in tag-ul img
e true atunci cnd imaginea e complet
inacrcat
conine indicaii despre nlimea pozei
conine indicaii despre distanta orizonatala
fata de obiectele din jur
retine nr. imaginilor dintr-un fiier
reine lowsrc asa cum e in tagul img
reine numele pozei asa cum e in tagul img
reine numele intreg al fisierului asa cum e in
atributul src
conine indicaii despre distanta vertical fata
de obiectele din jur
conine indicaii despre laimea pozei

read
read
read
read
read
read
read
read
read
read

Pe lng metoda handleEvent(), care este interpretat numai de Netscape


Navigatorobiectul-image conine i alte metode proprii.
M4.U2.8. Obiectul date
Se folosete pentru calcularea datei i a orei/timpului. Un obiect "date" se poate crea n
modul urmtor:
<script language=JavaScript>
function simpleDate()
{
Date1= new Date();
Date2= new Date(YYYY,MM,DD);
Date3= new Date(MM DD YYYY HH:mm:ss);
Date4= new Date(YYY,MM,DD,HH,mm,ss);
}

145

</script>
M4.U2.9. Obiectul navigator
Acest obiect conine informaii despre browser i se poate folosi pentru a adapta mai
bine scriptul fiecrui browser n parte.
Proprieti ale obiectului navigator:
Nr.
Crt.
1

PROPRIETATE

DESCRIERE

ACCES

appCodeName

read

appName

appVersion

language

platform

userAgent

Conine nicknameul browserului(d.ex.,


Netscape urte nickname-ul Mozilla)
Reine numele browserului n care
ruleaz scriptul
Reine nr. versiunii browserului n care
ruleaz scriptul
Conine limbajul n care este instalat
scriptul(doa Netscape)
Reine numele sistemului de operare pe
care este instalat scriptul (doar
Netscape)
Reine informaii de browser, aceleai
pe care le transmite browserulul i la o
apelare http

read
read
read
read

read

Obiectul navigator spune, prin metoda javaenabled(), dac n browser este activat Java,
astfel nct s se tie dac se pot folosi appleturi. Dac Java este acceptat, metoda returneaz
true.
M4.U2.10. Obiectul layers (all)
Acest obiect este valabil doar pentru browsere Netscape i conine informaii despre
nivelul/layer-ul care este accesibil unui fiier HTML. Nivelurile/layer-ele sunt baza
poziionrii dinamice a elementelor n pagin. Obiectul layers este sub obiectul document n
ierarhia obiectelor.
Obiectul all este accesibil numai cu browsere Explorer. Acest obiect conine
proprietile i metodele realizrii acestui concept:
Apelarea layers:
1.

prin index, care caracterizeaz straturile. Primul nivel are index 0.


document.layers[5].above

2.

Referenierrea prin numele layer-ului


<layer name=Layer0>
document. Layer0.above

Proprieti ale obiectului layers:


146

Nr. PROPRIETATE DESCRIERE


Crt.
1
above
Conine obiectul layer care se afla deasupra
nivelului actual
2
background
background-ul layer-ului
3
bgcolor
culoarea fundaluilui layer-ului
4
below
opusul lui above
5
clip
care parte/tietur a layerului este artat
6
document
Pt fiecare nivel exist un obiect document, care i
conine caracteristicile
7
left
Conine poziia colului din stnga sus a
layerulului (n pixeli), raportat la documentul de
deasupra.
8
length
Nr. layer-elor dintr-un fiier HTML
9
name
Numele layerului
10 pageX
Poziia pe axa X a colului din stnga sus a layerului, raportat la ntreg documentul.
11 pageY
Poziia pe axa Y a colului din stnga sus a layerului, raportat la ntreg documentul.
12 parentLayer
Reune obiectul-printe al layerului, adic
documentul de deasupra
13 src
Conine numele unui document extern, introdus
n layer
14 top
Conine poziia pe axa Y a colului din stnga sus
a layerulului (n pixeli), raportat la documentul
de deasupra.
15 visibility
informaii despre visibilitatea unui layer. Valori
posibile: hide, show, inherit

ACCES
read
read, write
read, write
read, write
read, write
read,
read, write

read,
read, write
read, write
read, write
read,
read, write
read, write

read, write

Metode pentru obiectul layers:


Nr.
Crt.
1
2
3

4
5
6
7
8
9

METODE

DESCRIERE

Supravegheaz evenimentele din layer-ul actual.


D mai departe evenimentul unui element care se poate ocupa
de el.
load(p1,p2)
Incarc un fiier extern n layer.
p1-numele fiierului
p2-limea vizibila din layer (pixeli)
moveAbove(p1) Mut layer-ul deasupra layer-ului dat de parametrul p1.
moveBelow(p1) Mut layer-ul sub layer-ul dat de parametrul p1.
moveBy(p1,p2) Mut layerul curent cu p1 pixeli la stnga/dreapta i cu p2 pixeli
mai sus sau mai jos.
moveTo(p1,p2) Mut layer-ul la o nou poziie dat de p1 i p2. Aceasta este
posiia colului din stnga sus al layer-ului.
releaseEvents() Termin supravegherea de evenimente.
resizeBy(p1,p2) Schimb mrimea layerului cu:
p1-mrimea n directia de pe axa x
captureEvents()
handleEvent()

147

10

resizeTo(p1,p2)

11

routeEvent()

p2-mrimea n direcia pe axa y


O nou mrime pt layer.
p1-mrimea n directia de pe axa x
p2-mrimea n direcia pe axa y
D evenimentul mai departe obiectului document. De acolo
ajunge la un eventhandler care i este subordonat.

Proprieti i metode pentru obiectul all


Apelare:
1. prin numele tagului sau identificatorului tagului i un index care conine poziia sa.
De exemplu: pt tagul <title>, numele este title. Indexul spune al cte-la tag cu acest
nume este referit. Primul tag are indexul 0. Fie 3 tilturi referite prin tagul <h2>.
Accesul la tagul al doilea se face astfel:
document.all.tags("h2")[1].innerText

2. prin numele dat cu atributul name:


<h2 name=Title2>TITLE 2 </h2>
document.all.Title2.innerText
Proprieti aleobiectului all:
Nr.
Crt.
1

PRPRIETATE

DESCRIERE

ACCES

className

read, write

2
3
4

dataFld
dataFormatrAs
dataPageSize

dataSrc

6
7
8

id
innerHTML
innerText

isTextEdit

10

lang

11
12

language
length

13
14

offsetHeight
offsetLeft

15

offsetParent

Numele clasei style-sheet, careia


i aparine un element.
Numele unui cmp de date.
Tipul unui cmp de date.
Numrul datapage-urilor care
trebuie returnate simultan
Referina la obiectul cu care s-a
realizat conexiunea
Numele unui element
Coninutul unui element GHtml
Coninutul textual al unui elemnt
GHtml.
true-dac elementul este editabil,
false dac nu
Limbajul elementului, atta timp
ct acesta a fost menionat n
atributul lang.
Numele limbajului script
Nr tagurilor HTML dintr-un
fisier.
Inlimea elementului n pixeli.
Distana elementului pn la
marginea stng a ferestrei.
O referin la obiectul printe.
148

read, write
read, write
read, write
read, write
read,
read, write
read, write
read,
read, write

read,
read,
read,
read
read,

16

offsetTop

17
18

offsetWidth
outerHTML

19
20

outerText
parentElement

21

parentTextEdit

22
23

recordNumber
sourceIndex

24
25

tagName
title

Distana elementului pn la
marginea de sus a ferestrei.
Limea unui element in pixeli
Coninutul unui tag HTML,
incusiv al celor de nceput i
sfrit.
idem innerText
Elementul printe al elementului
curent.
Elementul urmtor care este
editabil.
Numrul data page-ului artat
Spune despre care element din
interiorul unui fiier HTML este
vorba n actualul
element/document???.
Numele unui tag
Coninutul atributului title al
elementului HTML.

read,
read
read, write

read, write
read,
read,
read,
read,

read,
read, write

Metode ale obiectului all:


Nr.
Crt.
1
2

5
6

METODA

DESCRIERE

Cauzeaz click-ul unui element, ca i cnd acesta ar fi


fost click-enit de utilizator.
Contains(p1)
Verific dac elemntul conine i un alt element, al crui
nume (id) este dat de p1. Returneaz true, dac exist un
astfel de element.
getAttribute(p1,p2)
Verific dac exist n tagul HTML un atribut dat prin
p1. p2 este pus pe true, dac se ia n seama dac se scrie
cu litere mari sau sau mici. Funcia returneaz valoarea
atributului sau un String gol.
insertAdjacentHTML(p1,p2) Introduce cod HTML suplimentar, nainte sau dup
elementul HTML.
p1-poziia unde trebuie introdus. Valori posibile:
BeforBegin, AfterBegin, BeforEnd, AfterEnd.
p2-codul care trebuie introdus.
insertAdjacentText(p1,p2)
idem insertAjacentHTML, cu diferena c se introduce
text.
removeAttribute(p1,p2)
Indeprteaz un atribut dintr-un tag HTML.
p1-numele atributului n tag.
p2-true-dac e case sensitive.
scrollIntoView(p1)
Poziioneaz coninutul astfel n fereastr, nct s poat
fi vizibil.
p1-true-dac elementul trebuie s apar sus n fereastr.
p1-false- dac elementul trebuie s apar jos n fereastr.
setAttribute(p1,p2,p3)
Introduce ntr-un tag html un nou atribut.
p1-numele atributului.
Click()

149

p2-valoarea acestui atribut


p3-true-dac e case sensitive.
Exemplu
Cod complet pentru o metod care este apelat prin proprietile
browserului i care ine cont de elementele specifice browserelor Netscape i
Explorer
function checkBrowser()
{
var browserName=navigator.appName;
var browserNickname=navigator.appCodeName;
var browserVersion=parseFloat(navigator.appVersion);
var browserInfos=navigator.userAgent;
var isNetscape=false;
var isMicrosoft=false;
window.document.write(Browser :+browserName);
if(browserName==Microsoft Internet Explorer)
{
isMicrosoft=true;}
}
if(browserName ==Netscape)
{
isNetscape=true;
}
if(isMicrosoft)
{
if(navigator.app.Version.indexOf(MSIE)!=-1)
{
versiontmp1=navigator.appVersion.indexOf(MSIE)+4;
Versiontmp2=versiontmp1+5;
bowserVersion=navigator.appVersion.substring(versiontmp1,
versiontmp2);
}
}
window.document.write(<br> VERSION :+browserVersion);
window.document.write(<br> NICKNAME :+browserNickname);
window.document.write(<br> userAgent :+browserInfos);
if(isNetscape)
{
window.document.write(<br> NETSCAPE SPEZIFIKATION= ======:);
window.document.write(<br> System :+navigator.platform);
window.document.write(<br> Language :+navigator.language);
window.document.write(<br> ===);

150

}
alert(BROWSER : +browserName+\n+ VERSION :+browserVersion);
return;
}
M4.U2.11. Obiectul Math
Conine constante i metode pentru a putea folosi funcii matematice.
Constante: PI ( numarul pi=3,14..), E (e=2,71..).
Metode:

abs(x): modulul

cos(x): cosinus

tan(x): tangnta

sin(x): sinus

acos(x): arccosinus

asin(x): arcsinus

atan(x): arctangenta

floor(x): cel mai mare ntreg mai mic sau egal cu x. Ex: Math.floor(-3,73), returneaz -4.
( reprezentarea unui numr real sub form de o sum dintre parte ntreag i partea
fracionar x=[x]+{x}; 0<={x}<1; -2,63= -3+0,37)

random(x): nr aleator n intervalul [0,1]

round(x): cel mai apropiat ntreg de x

sqrt(x): radical din x

pow(x,y): x la puterea y

log(x): logaritm natural din x

exp(x): e la puterea x
Exemplu: Math.floor(1+100*Math.random()); va returna un nr aleator cuprins intre[1,101].
M4.U2.12. Obiectul Array
n JavaScript se pot declara numai vectori. Vectorii sunt de tip obiect. Un vector se
declar cu Array() iar elementele se acceseaza cu numeVector[indice].

Proprieti i metode ale obiectului Array:


proprietatea length;
metoda sort() sorteaza in ordine lexicograficaelementele unui tablou;
metoda reverse() inverseaza pozitiile elementelor unui vector;
Exemplu : vv=new Array(4); vv[2]=6; alert(vv[2]);
Declararea unei matrici de 4 linii si 3 coloane se face astfel:
vv=new Array(4);
for (i=0;i<4;i++) vv[i]=new Array(3);

Fiecare element al vectorului este privit ca un vector. Putem considera astfel c


matricea este un vector de vectori (fiecare element al vectorului mare este tot un vector).

151

M4.U2.13. Obiectul String


Cu acest obiect se pot manipula iruri de caractere.
Crearea unui string se poate face n doua moduri :
utilizand new : var a = new String (Ana) ;
atribuid variabilei direct sirul :a = Ana;
Obiectul String are propritatea length care ne indic numrul de caractere din ir.
Metode ale obiectului String:

search(s) caut caracterul de nceput al irului "s" n obiect. Dac irul "s" nu
exist se returneaz -1.
charAt(index) returneaz caracterul aflat pe poziia index n ir;
slice (i1, i2) returneaz substring-ul cuprins ntre i1 inclusiv i i2 exclusiv.
substr(i1,lung) returneaz subirul care ncepe cu i1 i are lungimea lung;
toUpperCase () returneaz irul scris cu litere mari;
toLowerCase() - returneaz irul scris cu litere mici;
replace(sir1, sir2) returneaz irul n care s-a nlocuit prima apariie a lui sir1 cu
sir2;
bold() returneaz irul scris cu bold;
italics() - returneaz irul scris cu italic;
fontcolor(nume_culoare) returneaz irul scris cu "nume_culoare"
fontsize(marime) - returneaz irul scris cu "marime"
link(adresa_http) creaz o ancor ctre adresa_http

152

Aplicaie utiliznd metode ale obiectului String:

Animaii
Prin afiarea n aceeai poziie a mai multor imagini, fiecare imagine "stnd" un anumit
interval de timp, duce la animaie. Exist anumite funcii predefinite i funcii utilizator care
rezolv aceast problem.
Funcia setTimeout
Sintaxa :
setTimeout(nume_functie, nr_milisecunde)
Semantica :
nume_functie funcia care urmeaz a se executa dup nr_milisecunde;
nr_milisecunde un numr ntreg de milisecunde
Funcia clearTimeout
Sintaxa :
clearTimeout(variabila)
Semantica :
"variabila" conine o valoare returnat de funcia setTimeout. Dup executarea
ei, procesul se suspend.

153

Sse realizeze o pagin web care s afieze un ceas n JavaScript

M4.U2.14. Rezumat
Obiectul window corespunde ferestrei curente din browser i cu ajutorul lui se
pot afla / modifica proprietile ferestrei.
Obiectul location ne d adresa HTML-ului local
Obiectul document se refer la coninutul unei ferestre dintr-un browser
Obiectul forms pune la dispoziie metode i proprieti care permit accesul la un
formular definit n interiorul unui fiier HTML
Obiectul image permite accesul la metodele i proprietile unei imagini
introduse in HTML
Obiectul date se folosete pentru calcularea datei i a orei
Obiectul navigator conine informaii despre browser i se poate folosi pentru a
adapta mai bine scriptul fiecrui browser n parte
Obiectul layer este valabil doar pentru browsere Netscape i conine informaii
despre nivelul/layer-ul care este accesibil unui fiier HTML
Obiectul Math conine constante i metode pentru a putea folosi funcii
matematice
Obiectul Array ofer posibilitatea de lucru cu tablouri (vectori) in JavaScript
Obiectul String permite manipularea irurilor de caractere

154

M4.U2.15. Test de evaluare a cunotinelor


Alegei rspunsul corect la urmtoarele ntrebri:
1. Cum se creaz o fincie n JavaScript?
a. function numeFuncie()
b. function: numeFuncie()
c. function=numeFuncie
2. Cum verificm dac o variabil x are valoarea diferit de 10, folosind
instruciunea if?
a. if (x<>10)
b. if (x!=10)
c. if x<>10
3. Care dintre urmtoarele variante definete n mod corect un array n
JavaScript?
a. var a = 1, 2, 3;
b. array a = 1, 2, 3;
c. var a = [1, 2, 3];
4. Avem urmtorul cod HTML: <p id=id1>Text</p>. n acest paragraf am
dori s modificm textul iniial cu Alt text, folosind JavaScript. Soluia
corect este:
a. document.getElementById(id1).innerHTML = Alt text;
b. document.getElementByTagName(p).innerHTML = Alt text;
c. document.getElement(p).innerHTML = Alt text;
5. Pentru a returna elementul de pe pozitia 1 din array-ul a vom scrie:
a. a.elementAt(1)
b. a[1]
c. a(1)
Rspunsurile corecte: 1a, 2b, 3c, 4a, 5b

155

U3. Aplicaii complexe n JavaScript


Cuprins
U3.1. Introducere................................................................................................................ 156
U3.2. Obiectivele unitii de nvare................................................................................. 156
U3.3. nvarea JavaScript prin exemple ........................................................................... 157
U3.4. Test de evaluare a cunotinelor ............................................................................... 170
Tem de control .................................................................................................................. 170

M4.U3.1. Introducere
Pentru a se fixa mai bine lucrul cu JavaScript prezentat n unitile de
nvare din acest modul, unitatea de nvare curent i propune exemplificarea
acestora. Astfel se poate vedea n mod concret modul de utilizare al diferitelor
tipuri instruciuni i obiecte JavaScript.
Astfel, exemplele care vor fi oferite n aceast unitate vor servi studentului ca
un plus de claritate i ca un model pentru aplicaiile pe care le va avea de realizat
ca i tem.

M4.U3.2. Obiectivele unitii de nvare


Aceast unitate de nvare i propune clarificarea scrierii de scripturi
JavaScript.
La sfritul acestei uniti de nvare studenii vor putea:
s foloseasc instruciunile limbajului JavaScript
s foloseasc obiectele limbajului JavaScript
s creeze funcii JavaScript

s integreze codul JavaScipt n pagina HTML

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

156

M4.U3.3. nvarea JavaScript prin exemple


Aplicaia_1

157

Codul surs pentru Aplicaia_1 de mai sus:


<html>
<head>
<script language="JavaScript">
function suma()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.s.value=a+b;
}
function diferenta()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.d.value=a-b;
}
function produs()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.p.value=a*b;
}
function cat_rest()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.c.value=Math.floor(a/b);
document.form1.r.value=a % b;
}
function calc_invers()
{
n=parseInt(document.form2.input.value);
cifra=0;inv=0;
while(n!=0)
{
cifra=n % 10;
n=(n-cifra)/10;
inv=inv*10+cifra;
}
document.form2.invers.value=inv;
}
function test()
{
n=parseInt(document.form2.input.value);
cifra=0;inv=0; n_init=n;
while(n!=0)
{
cifra=n % 10;
n=(n-cifra)/10;

158

inv=inv*10+cifra;
}
if (n_init==inv)
document.form2.palindrom.value="da"
else
document.form2.palindrom.value="nu";
}
function transf_dinbaza10()
{
n=parseInt(document.form3.input.value);
b=parseInt(document.form3.baza.value);
i=0; a="";
var sir=new Array();
do
{
cifra = n%b;
if (cifra>9)
{
switch (cifra)
{
case 10: cifra='A';break;
case 11: cifra='B';break;
case 12: cifra='C';break;
case 13: cifra='D';break;
case 14: cifra='E';break;
case 15: cifra='F';break;
}
}
sir[i] = cifra;
i++;
n=Math.floor(n/b);
}
while(n);
for (j=i-1;j>=0;j--)
a= a+sir[j];
document.form3.transf.value=a;
}
function calc_modulul()
{
a = document.form4.re.value;
b = document.form4.img.value;
z1 = new Object();
z1.real = parseInt(a);
z1.imaginar = parseInt(b);
modul=Math.sqrt(z1.real*z1.real+z1.imaginar*z1.imaginar);
document.form4.modul.value=modul;
}
function inlocuire_litera()
{
sir = document.form5.input.value;

159

sir = sir.replace(/u/g,"a");
document.form5.output.value=sir;
}
function sortare_alfabetica()
{
sir = document.form6.input.value;
var a=new Array();
var i,k=0,alfabetic="";
for(i=0;i<sir.length;i++)
{
a[k]=sir.charAt(i);
k++;
}
a.sort();
for(i=0;i<k;i++)
alfabetic=alfabetic+a[i];
document.form6.output.value=alfabetic;
}
</script>
</head>
<body>
<ul>
<li>
<i>Suma, diferenta, produsul, si catul a doua numere <b>a</b> si <b>b</b></i>
<br>
<form name="form1">
a: <input type="text" name="inputa" size="14"> <br>
b: <input type="text" name="inputb" size="14"> <br>
Suma: <input type="text" name="s" size="14"> <input type="button"
value="Aduna" onClick="suma()"> <br>
Diferenta: <input type="text" name="d" size="14"><input type="button"
value="Scade" onClick="diferenta()"> <br>
Produsul: <input type="text" name="p" size="14"><input type="button"
value="Inmulteste" onClick="produs()"> <br>
Catul : <input type="text" name="c" size="14"> <input type="button"
value="Imparte" onClick="cat_rest()"> <br>
Restul: <input type="text" name="r" size="14"> <br>
</form>
</li>
<li>
<i>Inversul unui numar si se testarea daca este palindrom</i>
<form name="form2">
Numarul: <input type="text" name="input" size="14"><br>
Inversul: <input type="text" name="invers" size="14">
<input type="button" value="Calculeaza" onClick="calc_invers()"><br>
Palindrom? <input type="text" name="palindrom" size="14">
<input type="button" value="Testeaza" onClick="test()"><br>
</form>
</li>

160

<li>
<i> Transformare din baza 10 in baza 2, 8 sau 16</b></i>
<form name="form3">
Numarul: <input type="text" name="input" size="14"><br>
Baza: <input type="text" name="baza" size="14"><input type="button"
value="Calculeaza" onClick="transf_dinbaza10()"><br>
Numarul este: <input type="text" name="transf" size="14"><br>
</form>
</li>
<li>
<i> Modulul unui numar complex</i><br>
<form name="form4">
z1: &nbsp; <input type="text" name="re" size="14"><input type="text"
name="img" size="14">
<input type="button" value="Calculeaza" onClick="calc_modulul()"><br>
Modulul: <input type="text" name="modul" size="14"><br>
</form>
</li>
<li>
<i> Inlocuirea literei "u" cu litera "a" intr-un sir de caractere</i><br>
<form name="form5">
Sirul: <input type="text" name="input" size="14"><input type="button"
value="Inlocuieste" onClick="inlocuire_litera()"> <br>
Dupa inlocuire: <input type="text" name="output" size="14"><br>
</form>
</li>
<li>
<i> Ordonarea alfabetica a unui cuvant </i> <br>
<form name="form6">
Sirul: <input type="text" name="input" size="14"><input type="button"
value="Sorteaza" onClick="sortare_alfabetica()"><br>
Alfabetic: <input type="text" name="output" size="14"><br>
</form>
</li>
</ul>
</body>
</html>
S se creeze un formular care s conin 2 cmpuri de text care s permit
introducerea numrului de linii i de coloane al unui tabel. n funcie de numerele
introduse, la click pe butonul Submit, va aprea pe pagin un tabel cu numrul de
linii i de coloane indicat.

161

Aplicaia_2
Realizarea unui minicalculator de buzunar cu JavaScript

Codul surs pentru Aplicaia_2:


<html>
<head>
<script language="JavaScript">
var str="", operator="",str2="";
function input(val)
{
if(str.length<10)
str=str+val;
document.form1.text1.value=str;
}
function add()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
document.form1.text1.value=str;
operator="+";
}
}
function sub()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
document.form1.text1.value=str;
operator="-";
}
}
162

function mult()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
document.form1.text1.value=str;
operator="*";
}
}
function div()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
document.form1.text1.value=str;
operator="/";
}
}
function resolve()
{
var rez=0;
switch (operator)
{
case "+":
rez = (str2*1) + (str*1) ;
document.form1.text1.value = rez;
break;
case "-":
rez = (str2*1) - (str*1);
document.form1.text1.value = rez;
break;
case "*":
rez = (str2*1) * (str*1);
document.form1.text1.value = rez;
break;
case "/":
rez = (str2*1) / (str*1);
document.form1.text1.value = rez;
break;
}
operator=""; str=""; str2="";
}
function clearall()
{
document.form1.text1.value="";
str=""; str2=""; operator="";
}
</script>

163

</head>
<body>
<br><br><br><br>
<center>
<table border="1" bgcolor="lightblue">
<form name="form1">
<tr>
<td>
<input type="text" name="text1" style="color:navy;font-weight: bold"
size="20">
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
</table>
<table border="3" bgcolor="lightblue">
<tr>
<td align="center">
<input type="button" value=" 1 " style="color:navy;font-weight: bold"
onClick="input(1)">
<input type="button" value=" 2 " style="color:navy;font-weight: bold"
onClick="input(2)">
<input type="button" value=" 3 " style="color:navy;font-weight: bold"
onClick="input(3)">
<input type="button" value=" + " style="color:navy;font-weight: bold"
onClick="add()">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 4 " style="color:navy;font-weight: bold"
onClick="input(4)">
<input type="button" value=" 5 " style="color:navy;font-weight: bold"
onClick="input(5)">
<input type="button" value=" 6 " style="color:navy;font-weight: bold"
onClick="input(6)">
<input type="button" value=" - " style="color:navy;font-weight: bold"
onClick="sub()">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 7 " style="color:navy;font-weight:
bold" onClick="input(7)">
<input type="button" value=" 8 " style="color:navy;font-weight:
bold" onClick="input(8)">

164

<input type="button" value=" 9 " style="color:navy;font-weight:


bold" onClick="input(9)">
<input type="button" value=" * " style="color:navy;font-weight:
bold" onClick="mult()">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="
bold" onClick="clearall()">
<input type="button" value="
bold" onClick="input(0)">
<input type="button" value="
bold" onClick="resolve()">
<input type="button" value="
bold" onClick="div()">
</td>

C " style="color:navy;font-weight:
0 " style="color:navy;font-weight:
= " style="color:navy;font-weight:
/ " style="color:navy;font-weight:

</tr>
</form>
</table>
</body>
</html>
Aplicaia_3
S se introduc ntr-un element al unui formular o valoare i apsnd pe tasta OK15% s
se calculeze 15% din acea valoare.

165

Aplicaia_4
Operaii cu numere complexe i afiarea unor rezultate n caseta de alert. Pentru aceasta
se vor introduce dou numere complexe de forma z1 = a+b*i i z2 = b+a*i ntr-un formular.

Codul sursa pentru Aplicaia_4:


<html>
<head>
<script language="JavaScript">
function complex(x,y)
{
this.real=x;
this.img=y;
this.adun=add;
this.inmultire=mult;
this.impartire=div;
}
z=new complex(0,0);
function getDataR(a)
{
z.real=parseInt(a);
alert("z.real = "+z.real);
document.f1.rez1.value=a;
return;
}
function getDataI(b)
{
166

z.img=b;
alert("z.img = "+z.img)
document.f1.rez2.value=b;
return;
}
function add(z)
{
t=new complex(0,0);
t.real=eval(this.real)+eval(z.real);
t.img=eval(this.img)+eval(z.img);
alert("t.real add= "+eval(t.real));
return t;
}
function mult(z)
{
t=new complex(0,0);
t.real=eval(this.real)*eval(z.real)-eval(this.img)*eval(z.img);
t.img=eval(this.real)*eval(z.img)+eval(this.img)*eval(z.real);
alert(" REZULTAT INTERMEDIAR t.real mul= "+eval(t.real));
return t;
}
function div(z)
{
t=new complex(0,0);
t.real=(eval(this.real)*eval(z.real)+eval(this.img)*eval(z.img))/(z.real^2-z.img^2);
t.img=(eval(this.real)*eval(z.img)-eval(this.img)*eval(z.real))/(z.real^2-z.img^2);
alert(" REZULTAT INTERMEDIAR t.real div= "+eval(t.real));
return t;
}
function calcul(a,b)
{
z3A=new complex(0,0);
z3I=new complex(0,0);
z3D=new complex(0,0);
z1=new complex(a,b);alert("data complexa z1= "+z1.real+" + "+z1.img+"i");
z2=new complex(b,a);alert("data complexa z2 ="+z2.real+" + "+z2.img+"i");
z3A=z2.adun(z1)
alert("ADUNARE ="+z3A.real+"+"+z3A.img+"i");
z3I=z2.inmultire(z1);
alert("INMULTIRE ="+z3I.real+" +"+z3I.img+"i");
z3D=z2.impartire(z1);
alert("IMPARTIRE ="+z3D.real+" + "+z3D.img+"i");
}
</script>
</head>
<body>
<form name="f1">
Real(z) :<input type ="text" name="Input1" value="0"> &nbsp &nbsp
Imaginar(z):<input type ="text" name="Input2" value="0"><br>

167

<input type="button" value="OK-REAL"


onClick="getDataR(document.f1.Input1.value)">
&nbsp &nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp
&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp
&nbsp
<input type="button" value="OK-Imaginar"
onClick="getDataI(document.f1.Input2.value)"><br>
Afisez Real(z):<input type="text" name="rez1">&nbsp &nbsp
Afisez Imaginar(z):<input type="text" name="rez2"><br><br><br><br>
<input type="button" value="OK - alert( )"
onClick="calcul(document.f1.Input1.value,document.f1.Input2.value)">
</form>
</body>
</html>
Aplicaia_5
S se scrie un text care i schimb culoarea. S se insereze i o imagine, iar atunci cnd
mouse-ul rmne pe imaginea de pe display, aceasta se mrete pn cnd mouse-ul este luat
de pe imagine.

168

Codul surs pentru Aplicaia_5


<html>
<head>
<style>
#Titlu
{
color:rgb(130,12,113);
font-size:40;
}
</style>
<script language="JavaScript">
var t=0,inalt=0, latime=0;
function move()
{
if(t==0)
{
latime=foto.width;
inalt=foto.height;
t=1;
}
foto.width++;
foto.height++;
}
function out()
{
t=0;
foto.width=latime;
foto.height=inalt;
}
i=255;
tt=0;
function lumina()
{
do
{
i--;
Titlu.style.color=255*256*256+i*256*i;
tt=setTimeout("lumina()",100);
if(i==0) clearTimeout(tt);
} while(i>0)
}
</script>
</head>
<body onload="lumina()">
<img id="foto" src="t1.jpg" onmouseout="out()" onmousemove="move()" width="80"
height="80">
<h1 id="Titlu"> ID - INVATAMANT LA DISTANTA </h1>
<br><br>
</body>

169

</html>
S se realizeze un "menu-bar" n JavaScript. Bara de meniuri pe care o vei
realiza va avea 5 meniuri, fiecare cu cte cel puin 3 submeniuri

M4.U3.4. Test de evaluare a cunotinelor


Alegei rspunsul corect la urmtoarele ntrebri:
1. Care este funcia care transform un sir de caractere valid ntr-un numr
ntreg n JavaScript?
a. parseInt
b. parseDouble
c. strToInt
2. Pentru a returna numrul de elemente din array-ul a vom scrie:
a. a.size
b. a.length
c. a.count
3. Cum se creaz un element HTML nou n JavaScript?
a. Folosind funcia createChild
b. Folosind funcia createNode
c. Folosind funcia createElement
4. Cum se adaug un nou element unui element printe?
a. Folosind funcia addChild
b. Folosind funcia appendChild
c. Folosind funcia addChildNode
5. Cum tergem un element subordonat unui element printe?
a. Folosind funcia removeChild
b. Folosind funcia deleteChild
c. Folosind funcia removeNode
Rspunsuri corecte: 1a, 2b, 3c, 4b, 5a

Tem de control
Rspundei la urmtoarele ntrebri:
1. Care sunt operatorii aritmetici utilizai n JavaScript? Dai un exemplu de
utilizare a acestora.
170

2. Care sunt operatorii logici utilizai n JavaScript?


3. Care sunt operatorii relaionali utilizai n JavaScript? Dai un exemplu de
utilizare a acestora.
4. Descriei sintaxa obiectului Navigator.
5. Dai un exemplu de utilizare a obictului Form.
6. Descriei sintaxa obiectului Array.
7. Dai exemple de metode pentru obiectul Math.
8. Dai un exemplu de utilizare a obiectului image.
Rspunsul va fi redactat n Word i va fi transmis prin email profesorului care
ine laboratorul. Nota pe aceast tema va reprezenta 1/4 din nota final de
laborator

171

Modulul V. Alte tehnologii pentru realizarea paginilor web


Cuprins
Introducere .................................................................................................................. 172
Competene ................................................................................................................. 172
U1.Limbajul PHP ........................................................................................................ 173
U2. Flex3..................................................................................................................... 184
U3. Lumea virtual pe Internet ................................................................................... 195
Tem de control .......................................................................................................... 222

Introducere
n acest modul sunt aduse n discuie i alte limbaje cu ajutorul crora
paginile web pot deveni mai atractive, mai uor i mai interesant de realizat. E
prezentat astfel o scurt introducere n limbajul PHP, limbaj orientat pe server,
care permite realizatorului site-ului s creeze pagini interactive.
Pe lng PHP se va mai crea i o scurt prezentare a limbajului MXML.
Acesta pune la dispoziie doverse controale care pot face mult mai la ndemn
scrierea codului pentru un site.
Cel de-al treilea limbaj prezentat va fi VRML. Acesta permite modelarea
lumii virtuale prin introducerea de obiecte 3D ce pot fi integrate n paginile web.

Competene
Acest modul are ca obiectiv introducerea unor noi limbaje care s ajute
studentul n realizarea unor aplicaii web mai performante.
La finalul acestui modul, studenii vor putea s:
neleag utilitatea i importana limbajului PHP
creeze propriile scripturi PHP
intercaleze codul PHP n codul HTML
neleag utilitatea i importana limbajului MXML
neleag i s urmeze paii necesari realizrii unei aplicaii n Flex3
introduc diverse componente MXML ntr-o pagin web
neleag utilitatea i importana limbajului VRML
realizeze aplicaii utiliznd limbajul VRML

172

U1. Limbajul PHP


Cuprins
U1.1. Introducere................................................................................................................ 173
U1.2. Obiectivele unitii de nvare................................................................................. 173
U1.3. Primii pai n PHP .................................................................................................... 174
U1.4. Noiuni indroductive de sintax .............................................................................. 175
U1.5. Aplicaii complexe utiliznd limbajele PHP, HTML i JavaScript.......................... 178
U1.6. Rezumat .................................................................................................................... 182
U1.7. Test de evaluare a cunotinelor ............................................................................... 183

M5.U1.1. Introducere
PHP a fost conceput n anul 1994 i a fost iniial munca unui singur om,
Rasmus Lerdorf. n octombrie 2002, era folosit n mai mult de nou milioane de
domenii din lumea ntreag. PHP este un produs Open Source, cu acces la codul
surs. l putem folosi, modifica i redistribui, toate acestea n mod gratuit.
PHP a fost iniial acronimul de la Personal Home Page.
Limbajul PHP se aseaman mult cu limbajul C++ sau Java. Este un limbaj de
scriptare care se utilizeaz pe partea de server. Cnd scriem un script n PHP vom
rula direct de pe server. Exist ns posibilitatea de a testa pe propriul calculator,
acest lucru necesit instalri speciale. Codul PHP este interpretat de serverul web
i genereaz un cod HTML care va fi vzut de uilizator (clientului - browserului fiindu-i transmis numai cod interpretat ca i HTML).

M5.U1.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s:


instaleze i s configureze WinLAMP pentru PHP
creeze propria pagin cu extensia php
neleag modul de transmitere a datelor la server i nterpretarea codului
de retur de ctre browser
nglobeze codul PHP n codul HTML

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

173

M5.U1.3. Primii pai n PHP


Pentru a putea lucra cu PHP avem nevoie de serverul Apache. Dac dorim s lucrm i
cu baze de date vom avea nevoie i de serverul MySql.
Exist programe care instaleaz automat aceste servere, de exemplu WinLAMP sau
XAMPP care se pot descarca de pe Internet.
n continuare este prezentat modul n care editm fiierul de configurare al PHP-ului, i
anume php.ini.

Deschidem Edit php.ini i efectum modificrile urmtoare:


1. display_errors=Off se schimb n display_errors=On
2. activai extensiile de care avem nevoie tergnd punct i virgul ; din faa extensiei
astfel:
;extension=php_gd2.dll devine extension=php_gd2.dll (fr ;)
;extension=php_mbstring.dll devine extension=php_mbstring.dll (fr ;)
;extension=php_mime_magic.dll devine
extension=php_mime_magic.dll(fr ;)
;extension=php_mysql.dll devine extension=php_mysql.dll(fr ;)
3. register_globals = off devine register_globals = on (se schimba off in on)
Prin lansarea n execuie a lui winLamp se creaz server-ul cu numele localhost.
Numai din acest server se pot lansa fierele php sau fiiere html ce conin secvene de cod
php. n directorul C: se creaz un director cu numele Apache2. n acest director se afl
subdirectorul htdocs unde se vor stoca toate fisierele cu extensia php sau html. Acesta este
localhost-ul nostru.
Pentru a putea vedea configuraia php, realizm un fiier cu numele my.php, n care
punem codul:

174

<?php
phpinfo();
?>
Lansm fiierul din browser astfel: http://localhost/my.php
Pe ecran se va afia urmtoarea pagin:

M5.U1.4. Noiuni indroductive de sintax


Orice script PHP se ncadreaz ntre marcajele
<?
?>
sau
<?php

175

?>
De prefarat se va folosi varianta a doua deoarece n mod implicit nu recunosc toate
browserele prima variant.
Tiprirea pe display se poate face n dou moduri i anume folosind:
1. sintagma echo "TEXT";
2. functia printf("TEXT");
Script-ul PHP poate fi introdus ntr-un fiier html sau se poate crea un fiier direct cu
extensia php.
Observaii:
1. Orice variabil n PHP ncepe cu semnul $.
2. Constantele se introduc cu funcia define(nume_constanta, valoare_constanta);
3. Operatorul de concatenare pentru iruri este punctul (.), spre deosebire de limbajele
de programare unde concatenarea de iruri se face cu semnul "+";
4. Operatorii PHP sunt la fel ca i cei din limbajul JavaScript, Java sau C++;
5. Instruciunile PHP sunt la fel ca i cele din limbajul JavaScript, Java sau C++;
6. Redirecionarea ctreo alt pagin se face cu ajutorul atributului action din tag-ul
form (vom avea <form action="pagina2.php">).
7. Modul de transmitere a datelor la server se face cu ajutorul atributului method al tagului form care poate lua dou valori: get sau post. (vom scrie <form action="post">
sau <form action="get">). Transmiterea fcut cu get se face prin URL i este mai
restrictiv ca i dimensiune. Transmiterea fcut cu post se face via HTTP i nu are
restricie de dimensiune a datelor transmise.
Funcii matematice
Ca i
acestea:

n celelate limbaje exist o serie de funcii matematice. Enumerm cteva dintre


abs(numar) returneaz modulul numrului
sin(x), cos(x), tan(x) argumentul x este n radiani
pow(x,y) returneaza xy cu observaia c x trebuie s fie un numr real pozitiv
log10(x), log(x) returneaz logaritm n baza 10, respectiv logaritm n baza e
din x
max(x1, x2,,xn), min(x1, x2, x3.xn) returneaz maximul, respectiv
minimul dintr-un ir de numere;
ceil(x) returneaz cel mai mare ntreg mai mare sau egal cu x
round(x) returneaz ntregul rezultat prin rotunjirea lui x
floor(x) returneaz cel mai mare numr ntreg, mai mic sau egal cu x
rand(min, max) returneaz o valoare aleatoare ntre valorile ntregi min i max
pi() returneaz valoarea numrului pi;
sqrt() returneaz rdcina ptrat a lui x

Funcii pentru prelucrarea irurilor de caractere

176

Ca i n celelate limbaje exist o serie de funcii pentru prelucrarea irurilor. Enumerm


cteva dintre acestea:
strlen(sir) returneaz lungimea irului;
strops(sir1, sir2, [poz_start]) verific dac sir1 este subir al lui sir2. Dac da,
afieaz poziia de nceput a acestuia. [poz_start] este opional i verific de unde
s nceap cutarea; implicit [poz_start] are valoarea zero;
strstr([sir1, sir2]) returneaz sir1 ncepnd cu poziia n care a fost gsit sir2;
strcmp(sir1, sir2) compar lexicografic (alfabetic) sir1 cu sir2 i returneaz
valoarea zero dac sir1=sir2, returneaz o valoare mai mare ca zero dac
sir1>sir2 i returneaz o valoarea mai mic dect zero dac sir1<sir2
Vectori n PHP
n PHP vectorii sunt de trei tipuri:

indexai - care conin indici numerici


asociativi - perechi de tipul cheie=>valoare
multidimensionali - vectori ce conin tot vectori n fiecare celul

Exemplu
Exemple de declarare i utilizare a vectorilor:
<?php
$flori=array("garoafa","trandafir","lalea");
echo "Imi plac " . $flori[0] . ", " . $flori[1] . " si " .
$flori[2];
?>
<?php
$pret=array("garoafa"=>"2","trandafir"=>"7","lalea"=>"5");
echo "Trandafirul costa " . $pret['trandafir'] . " RON";
?>

Instruciuni i funcii pentru lucrul cu vectori

instruciunea foreach(n_vector as n_indice=>n_variabila) permite


parcurgerea unui vector cu numele n_vector, cu variabila de ciclare n_indice, n
care citirea se face n variabil n_variabila.
funcia current(vector) returneaz valoarea reinut de elementul din vector
asupra cruia se gsete pointer-ul;
functia key(vector) returneaz indicele elementului din vector asupra cruia se
gsete pointer-ul;
funcia next(vector) deplaseaz pointer-ul pe elementul urmtor din vector i
returneaz valoarea reinut de acesta;
funcia prev(vector) deplaseaz pointer-ul pe elementul anterior al vectorului
i returneaz valoarea reinut de acesta;

177

S se realizeze un formular n PHP care s conin dou cmpuri pentru


introducerea a dou numere i un buton "Calculeaz". Dup ce au fost introduse
i validate numerele se va da click pe buton care ne va redireciona ctre o nou
pagin pe care vom avea afiate: suma numerelor, diferena lor, produsul, ctul i
minimul dintre cele dou numere.

M5.U1.5. Aplicaii complexe utiliznd limbajele PHP, HTML i JavaScript


Aplicaia_1

178

Codul surs pentru Aplicaia_1:


<html>
<body>
SALUT <br><br>
<?php
echo"test test test REZULTAT ";
$a=3;
$b=6;
$rezultat=$a+$b;
echo ("<br> rezultat=".$rezultat."<br>");
echo ($rezultat."<br>");
$nume="informatica";
echo ($nume);
?>
<br><b><font color="red">DEFINIREA DE CONSTANTE CU FUNCTIA
DEFINE</font></b>
<br>
<?php
define("const1", 3.675);
echo ("const1 = ".const1) ;
?>
<br><br> <font color="green"> SIR CARACTERE </font><br>
<?php
$x=5;
echo (" x = ".$x."<br>");
$y="SIRUL MEU <bR>";
echo strlen($y);
echo "<br><br> POZITIE ME =";
echo (strpos($y,"ME"));
echo "<br> COMPARARE <br>";
echo strcmp("mama","mama");
$x=$y;
echo (" <br>x = ".$x."<br>");
echo (" y = ".$y);
echo "<br><br> CARACTERE MICI =";
echo strtolower($y);
?>
<br><br><font color="green"> CONVERSII </font><br>
<?php
$y=11.7;
echo (" y = ".$y."<br>");
$x=(int) $y;
echo (" x = ".$x."<br>");
?>
<br> <font color="red"> FACTORIAL</font><br>
<?php
function fact($n)

179

{
if ($n==0)
return 1;
else
return $n*fact($n-1);
}
echo ("FACT(7)=".fact(7)."<br>");
print ("FACT3= ".fact(3));
$a=65;
$b=78;
print (" <br>a =".$a." <br> b=".$b);
?>
</body>
</html>
Aplicaia_2: Aplicaia este format din dou fiiere :
1.
formular.html
2.
formular.php
Execuia i codul celor dou fiere sunt prezentate mai jos:

180

Aplicaia_3 : Validarea cmpului Nume:

181

S se realizeze un formular n PHP care s conin dou cmpuri pentru


introducerea numelui i vrstei unei persoane, un buton "Adaug" i un buton
"Trimite". Dup ce se vor completa cmpurile de nume i vrst, utilizatorul va
da click pe butonul "Adaug" i va aduga acea persoan ntr-un vector asociativ.
Operaia de introducere a persoanelor i de adugare se poate repeta succesiv de
cteva ori astfel nct s avem cel puin 5 prsoane adugate n vector.
Dup ce au fost adugate persoanele se va da click pe "Trimite" care va
permite afiarea persoanei cu vrsta cea mai mare.

M5.U1.6. Rezumat
PHP este un limbaj open source, a crui sintax seamn cu cea a limbajelor
de programare precum Java sau C++.
Deoarece PHP este un limbaj de scriptare bazat pe server, pentru a lucra cu
acesta avem nevoie de un server web (Apache). Dac dorim s realizm site-uri mai
complexe putem opta pentru stocarea datelor ntr-o baz de date. Pentru a lucra cu
aceasta avem nevoie i de un server de baze de date (MySql).
Avem dou posibiliti de transmitere a datelor la server: prin GET sau prin
POST. Acestea reprezint cele douvalori pe care le poate lua atributul method al
tag-ului form.

182

M5. U1.7. Test de evaluare a cunotinelor


Alegei rspunsul corect la urmtoarele ntrebri:
1. PHP este acronimul pentru:
a. Private Home Page
b. Personal Home Page
c. PHP: Hypertext Preprocessor
2. Scripturile PHP se scriu ntre marcatorii:
a. <?php i ?>
b. <php> i </php>
c. <?php i ?php>
3. Pentru a afia un text pe pagina web cu ajutorul sintaxei PHP vom scrie:
a. alert(Text);
b. echo Text;
c. print(Text);
4. Variabilele din PHP ncep cu simbolul:
a. &
b. *
c. $
5. Cum se include coninutul unui fiier PHP numit header.php ntr-o
pagin web?
a. <?php include header.php; ?>
b. <?php include file = header.php; ?>
c. <?php include: header.php; ?>
6. Cum se declar un array n PHP?
a. $a=array("e1","e2","e3");
b. $a=array(0 => "e1", 1 => "e2", 2 => "e3");
c. Nici o variant de mai sus nu este corect
d. Ambele variante (a i b) sunt corecte
Rspunsuri corecte: 1c, 2a, 3b, 4c, 5a, 6d

183

U2. Flex3
Cuprins
U2.1. Introducere................................................................................................................ 184
U2.2. Obiectivele unitii de nvare................................................................................. 184
U2.3. Elemente de baz ale lui Adobe Flex3 ..................................................................... 185
U2.4. Limbajul MXML ...................................................................................................... 187
U2.5. Rezumat .................................................................................................................... 193
U2.6. Test de evaluare a cunotinelor ............................................................................... 193

M5.U2.1. Introducere
Adobe Flex este un instrument pentru dezvoltarera aplicaiilor Internet, care
sunt indicate sub denumirea de RIA (Rich Internet Applications). Aplicaiile
realizate cu Flex au urmtoarele avantaje:
- scalabilitate
- independen fa de orice sistem de operare
- ruleaz cu orice Browser.
n realizarea unei aplicaii Flex se poate folosi mediul de dezvoltare Flex
Builder sau Flex SDK, acesta din urm fiind gratuit. Framework-ul Flex se
bazeaz pe o sintax XML proprie i pe limbajul ActionScript3. In realizarea
aplicaiilor Flex sunt necesare cunotiine de baz n ceea ce privete tehnologiile
(X)HTML , reguli CSS i noiuni de programare.
O aplicaie Flex se realizeaz cu ajutorul unor compononte existente care se
pot configura cu ajutorul limbajului de marcare MXML. Aceste componente
reacioneaz la anumite evenimente i funcii. Componente sunt realizate cu
ajutorul limbajului de scriptare ActionScript.

M5.U2.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s:


neleag modul de lucru folosind Flex3
parcurg paii necesari n realizarea unei aplicaii
scrie aplicaii folosind limbajul MXML
compileze i s execute codul MXML
introduc n mod corect n aplicaiile proprii diferite componente MXML

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

184

M5.U2.3. Elemente de baz ale lui Adobe Flex3


Dezvoltatorii de aplicaii Web doresc toi acelai lucru : pagina web realizat de acetia
s fie vizitat de foarte muli cleni. Acest lucru presupune ca aceast aplicaie s ruleze cu
orice sistem de operare i in orice Browser. Aici intervine Adobe Flex Framework, aplicaiile
realizate n Flex ruleaz n Adobe Flash Player, care poate fi un Stand-alone-Player sau ca i
Plugin ncorporat ntr-un browser. Flash Player-ul ofer urmtoarele avantaje:
- apare cu mai multe versiuni
- este realizate pentru mai multe sisteme de operare
- garanteaz executarea aplicaiei identic pe orice PC
- exist i pentru telefoane mobile, Smartphones un Flash Player propriu.
-

Domeniile de aplicaii n Internet n care se poate folosi Flex sunt urmtoarele:


Onlineshops
Personalizarea unui produs
Vizualizare de informaii
Aplicaii eBusiness
Media Player
Instrumente
Combinaii
Aplicaii Desktop.

Flex-Framework conine o mulime de componente care se bazeaz pe ActionScript3.


Aceste componente sunt clase scrise n ActionScript3 i care au anumite propriti.
Programatorii care cunosc structura tag-urilor n HTML i XML vor nelege modul de
realizare a unei aplicaii Flex cu ajutorul limbajului de marcare MXML.
Componentele existente pot fi extinse att din punct de vedere funcional ct i optic.
Exist patru tipuri diferite de componente:
1. Controls
Componentele Controls se folosesc pentru realizarea de coninut i pentru
interaciunea utilizatorului cu aplicaia
2. Layout
Aceste componente au un rol important n rederarea aplicaiei Flex
3. Navigators
Asigur navigarea ntre diverse coninuturi
4. Charts
Aceste componente asigur reprezentarea vizual a nor informaii (de exemplu :
diagrame )
Etapele de parcurs n realizarea unei aplicaii Flex
O aplicaie Flex se realizeaz n limbajul MXML i conine funcionaliti introduse prin
ActionScript3. Dup ce s-a scris aplicaia cu ajutorul unui editor, aceasta se compileaz i se
traduce intr-un cod binar cu extensia SWF, care va fi vizualizat de ctre Flash-Player.
Aplicaia Flex realizat se poate compila n dou moduri cu :
- Flex Builder
- Adobe Flex SDK (compilarea se face manual din fereastra MS-DOS).
Etapele n realizarea unei aplicaii Flex cu SDK

185

1. Se scrie codul surs al aplicaiei n fereastra MS-DOS cu ajutrorul editorului edit i


cu extensia mxml;
2. Se compileaz codul cu mxmlc, n urma compilrii se obine fiierul cu extensia swf
3. Fiierul rezultat se poate vizualiza cu orice Browser (cu Plugin FlashPlayer9)
Exemplu

Realizarea unui formular format din dou cmpuri de editare, un


checkbox i 4 butoane radio. Etapele de parcurs pentru realizarea formularului:
se scrie codul sursa cu edit de sub MS DOS i se compileaz cu mxmlc (conform primei
imagini de mai jos);
se execut aplicaia cu estensia swf ntr-un browser, care are flash player (conform celei
de-a doua imagini de mai jos);

Formularul rezultat n urma compilrii codului de mai sus este cel imediat urmtor:

186

M5.U2.4. Limbajul MXML


Limbajul de marcare MXML se bazeaz pe standardul Web ECMA4 i a fost iniial
dezvoltat de ctre Macromedia n martie 2004. Acest limbaj se aseamn cu limbajul XML.
ntr-un tag MXML se afl foarte multe componente care vor stabili aspectul aplicaiei. Fiind
un dialect al limbajului XML (eXtensible Markup Language- limbaj care permie structurarea
datelor)se vor respecta regulile de baz i anume:
- fiecare tag trebuie nchis;
- se aplic i celelate reguli XML.
Fiecare component (tag) din MXML are aceeai structur:
- tag-ul se n cadreaz ntre semnele <................./> .
- primele dou linii sunt obligatorii:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

se declar numele tag-ului care se dorete a se utiliza i care se va adresa clasei


corespunztoare din ActionScript3 pentru a crea componenta (forma ) dorit
se modific prorietile i metodele disponibile folosind atribute:
<mx:nume_tag [proprieti metode]/>
Exemplu
Sunt propuse dou aplicaii care s evidenieze lucrul cu MXML.

187

Aplicaia_1: Realizarea unui buton care are eticheta butonul meu


<mx:Button label="Butonul MEU" id="buton_nou"/>

Aplicaia_2: Realizarea unui editor de text


<mx:RichTextEditor id="rte" width="75%" height="75%" />

Coninutul unei componente


ntr-o component se poate descrie un coninut care urmeaz a fi asfiat. Descrierea
coninutului se va face conform urmtoarei sintaxe:
<mx:nume_tag...>
Coninut
</mx nume_tag>

Exemplu
S se realizeze dou panele cu denumirea Panel_1 respectiv Panel_2.
n Panel_1s se afle un buton pe care st scris CLICK..... Dac se apas
butonul, s apar un mesaj de alert cu mesajul HALLO CLICK????!

188

n imaginile de mai jos sunt prezentate att codul surs ct i rezultatul n urma
compilrii acestuia.

<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel title="Panel_1" width="250" height="200" x="20" y="20"
cornerRadius="20">
<mx:Button id="dem1" label="CLICK......" click="mx.controls.Alert.show('HALLO ..
CLICK????!')" x="30" y="60"/>
</mx:Panel>
<mx:Panel title="Panel_2" width="250" height="200" x="270" y="20" cornerRadius="0"/>
</mx:Application>

Parametrul id
Fiecare tag poate primi un identificator care este dat prin parametrul id=nume.
ActionScript3
Codul ActionScript3 poate fi nglobat ntr-un fiier mxml n patru moduri, astfel:
1. n interiorul unui tag mxml (inline).
<mx:Button label="Panel_01" click="Alert.show('Click pe buton....')"/>
2. ntr-un bloc script ntr-un tag mxml
<mx:Button label=panel_01>

189

<mx:click>
<![CDATA[
Alert.show('Butonul a fost apasat');
Valoarestart=0;
play();
]]>
</mx:clik>
3. ntr-un tag <script>, dac dorim s descriem anumite aciuni, care s fie valabile
pentru toat aplicaia, atunci folosim aceast mod de descriere
4. ntr-un fiier ActionScript extern, fiierele externe au extensia .as
Comenzi ActionScript n tag-ul MXML
ntr-un tag parametrul click reprezint Event-Handler-ul corespunztor care elibereaz o
aciune cnd componenta este acionat.
Data Binding
O alt form inline de a ngloba instruciunile ActionScript3 este aa numita Data
Binding. Prin Data Binding pot s realizez legtura ntre dou componente, avatajul acestui
procedeu este de a transmite valori n timp real fr o confirmare printr-un buton sau printr-o
nou pagin. Principiul de lucru este urmtorul: proprietatea unei componente este folosit ca
i surs i va fi transmis, ca i valoare adecvat, unei a doua componente.
Exemplu
S se transmit n timp real textul din primul panel n cel de-al doilea.
n figurile urmtoare se pot vedea textul surs i rezultatul n urma compilrii
acestuia.

<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel title="Panel_1" width="250" height="200" x="20" y="20"
cornerRadius="20">
<mx:Button id="dem1" label="CLICK......" click="mx.controls.Alert.show('HALLO ..
CLICK????!')" x="30" y="60"/>
<mx:TextInput id="Exemplu"/>
</mx:Panel>
<mx:Panel title="Panel_2" width="250" height="200" x="270" y="20"
cornerRadius="0">
<mx:Text id="Output" text="{Exemplu.text}"/>
</mx:Panel>
</mx:Application>

190

Observaie:
Dup cum se poate vedea, pentru a transmite aplicaiei mesajul c este vorba despre
coninut dinamic, care se va transmite n timpul executiei aplicaiei, containerul se va pune n
acolade n acest caz este {Exemplu.text} .
Exemplu

S se dimensioneze al doilea panel (Panel_2) cu ajutorul riglei definit


Panel_1.

<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel title="Panel_1" width="250" height="200" x="20" y="20"
cornerRadius="20">
<mx:Button id="dem1" label="CLICK......" click="mx.controls.Alert.show('HALLO ..
CLICK????!')" x="30" y="60"/>
<mx:HSlider id="Rigla" minimum="1" maximum="500" snapInterval="1"/>
<mx:Text id="Vizibil" x="40" y="20" text="{Rigla.value}"/>
<mx:TextInput id="Exemplu"/>
</mx:Panel>
<mx:Panel title="Panel_2" width="{Rigla.value}" height="{Rigla.value}" x="270" y="20"
cornerRadius="0">
<mx:Text id="Output" text="{Exemplu.text}"/>
</mx:Panel>
</mx:Application>
Rezultatul codului surs este afiat mai jos:

191

ActionScript n blocul Script


Codul ActionScript3 poate fi nglobat ntr-un fiierul mxml i n modul inline, dar din
pcate numai o singur funcie per rezultat sau o singur aciune cu Data Binding. Scripturile
pot fi incluse una ntr-alta. Toate instruciunile vor fi definite/descrise ntr-un bloc CDATA,
care va fi integrat ntr-o component MXML.
Vom discuta pe un exemplu: dorim s atam unui buton o aciune, dorim s afieze un
mesaj la apsarea butonului. n interiorul tag-ului care defineste butonul trebuie s definim
un Event-Handler, care va intra n aciune cnd acionm butonul. Descrierea codului
ActionScript3 se face n interiorul tag-ului clic
<mx:Button label="Click-Click-Click">
<mx:clic>
<![CDATA[
mx.controls.Alert.show('SALUT ActionScript3 !');
]]>
</mx:clic>
</mx>

192

S se realizeze o aplicaie care va conine un Label cu textul "Nume


floare:", un TextInput i un Buton pe care va scrie "Adauga". Sub aceste
controale se va poziiona un ComboBox care va conine lista florilor introduse.
Utilizatorul va trebui s introduc un nume de floare, s dea click pe butonul
"Adauga", dup care va trebui s vad c acea component de tip ComboBox
conine i floarea pe care tocmai a introdus-o.

M5.U2.5. Rezumat
Adobe Flex este un instrument pentru dezvoltarera web. Aplicaiile realizate cu
Flex au urmtoarele avantaje: scalabilitate, independen fa de orice sistem de
operare, ruleaz cu orice Browser.
O aplicaie Flex se realizeaz cu ajutorul unor compononte existente care se
pot configura cu ajutorul limbajului de marcare MXML. Aceste componente
reacioneaz la anumite evenimente i funcii. Componente sunt realizate cu ajutorul
limbajului de scriptare ActionScript.
Limbajul MXML se aseamn cu limbajul XML i respect toate principiile
acestuia de scriere a marcatorilor.
Primele dou linii ale fiierului n care scriem codul vor fi n mod obligatoriu
acestea:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
Codul ActionScript3 poate fi nglobat ntr-un fiier mxml n patru moduri,
astfel: n interiorul unui tag mxml (inline), ntr-un bloc script ntr-un tag mxml, ntrun tag <script> (dac dorim s descriem anumite aciuni, care s fie valabile pentru
toat aplicaia, atunci folosim aceast mod de descriere) sau ntr-un fiier
ActionScript extern (fiierele externe au extensia .as)

M5.U2.6. Test de evaluare a cunotinelor


Alegei rspunsul corect la urmtoarele ntrebri:
1. Aplicaiile realizate n FLEX ruleaz n:
a. GL View
b. Adobe Flash Player
c. Microsoft Media Player
2. Fiierul n care se scrie codul FLEX se salveaz cu extensia:
a. swf
b. gif
c. mxml
3. Procedeul prin care se pot realiza legturi ntre dou componente:

193

a. Data Source
b. Data Binding
c. Source Binding
4. Numele marcatorilor din FLEX sunt prefixai cu:
a. mx
b. mxml
c. swf
5. Codul FLEX compilat are extensia:
a. mxml
b. flex
c. swf
Rspunsuri corecte: 1b, 2c, 3b, 4a, 5c

194

U3. Lumea virtual pe Internet


Cuprins
U3.1. Introducere................................................................................................................ 195
U3.2. Obiectivele unitii de nvare................................................................................. 196
U3.3. Produse soft pentru realizarea graficii 3D ................................................................ 196
U3.4. Introducere n limbajul VRML................................................................................. 199
U3.5. Noduri n VRML V2.0 ............................................................................................. 201
U3.6. Evenimente n VRML .............................................................................................. 211
U3.7. Noduri speciale ......................................................................................................... 217
U3.8. Interpolare n VRML ................................................................................................ 218
U3.9. Rezumat .................................................................................................................... 220
U3.10. Test de evaluare a cunotinelor ............................................................................. 221
Tem de control .................................................................................................................. 222

M5.U3.1. Introducere
n lumea IT, apariia lumilor virtuale se datoreaz cercettorilor Universitii
Utah, condui de ctre Ivan Sutherland care au relizat primul soft cu ajutorul
cruia se creea imaginea unui autovehicul i tot ei au fost cei care au reuit s
genereze pentru prima oar imaginea cu umbr, al unui poligon. Ulterior ei au scris
soft i pentru vizualizarea primului obiect wireframe, pentru simulatoare de zbor.
Urmtorul pas n lumea graficii a fost fcut de ctre un grup de cercetri numii
HITL (Human Interface Technology Laboratory, fondat in 1989). Acetia au creat
primele resurse hardware dar i resurse soft, cum ar fi:
- Aspen Movie Map simula o cltore n Aspen, Colorado, folosind
secvene de imagini filmate n prealabil
- GROPE aplicaie folosit n domeniul medical i bio-chimic.
Primul algoritm de reprezentare 3D a datelor, botezat Marching Cubes, a
fost creat de Bill Lorensen i Harvey Cline. In anii urmtori n grafica 3D s-a
ncercareat de a reprezenta datele ct mai veridic posibil, astfel nct lumea creat
s se apropie ct mai mult de lumea real. Scenele realizate aveau o complexitate
crescut. Bill Reeves, este cel care a introdus noiunea de sisteme de particule,
fiecare scen 3D fiind construit din elemente indivizibile, numite particule.
Fiecare particul posednd anumite caracteristici de baz, de exemplu poziionare
n spaiu, vitez i direcie n micare, culoare, timp de via etc., care creau
dinamism n cadrul scenei. Exemplul clasic de utilizare al sistemului de particule
reprezint filmul Aventurile lui Andre i al lui Wally B., unde pdurea este
creat cu ajutorul acestei tehnologii.
Toate cercetrile ulterioare se bazeaz pe noiunea de sistem de particule:
- Craig Reynolds a redefinit particula, considernd-o un poligon care
posed sistem de coordonate propriu. Cu ajutorul noii particule el a
ncercat s modeleze migraia psrilor i petilor, punnd accent pe
comportamentul specific al populaiei migratoare.
- Dave Haumann i James Hahn au creat prima scen virtual care poate
fi modificat de ctre utilizatorul softului, prin interaciune direct.
195

Demetri Terzopaulos este primul care a creat lumi virtuale complexe: a


construit animale virtuale cu modelarea comportamentului specific,
i a modelat i faa uman, modelul fiind folosit de ctre chirurgi pentru
pregtirea interveniilor chirurgicale reconstructive.
- Loren Carpenter a folosit teoria fractalilor expus de Mandelbrot i
Julia pentru a crea un lan muntos virtual n filmul Vol Libre
ncepnd din anii 1990 cercetrile referitoare la grafica 3D au urmrit fie
fluidizarea micrii n cadrul scenelor virtuale, fie mbuntirea acestor scene cu
ajutorul efectelor de lumin.

M5.U3.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s:


neleag rolul lumii virtuale n Internet
recunoasc softuri pentru realizarea graficii 3D

utilizeze limbajul VRML pentru realizarea de grafic 3D


recreeze diverse scene din lumea real folosind obiecte VRML
trateze evenimente n VRML

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

M5.U3.3. Produse soft pentru realizarea graficii 3D


3ds Max
Este o aplicaie dezvoltat de Autodesk Media & Entertainment pentru platformele Win
32 i Win 64.
Numele aplicaia a fost iniial de 3D Studio i a funcionat numai pe platforma DOS.
Dup achiziionarea ei de ctre Autodesk i-a schimbat denumirea (mai nti n 3ds max, apoi
n versiunea actual) i s-a mbogit din punctul de vedere al funcionalitii. Este o aplicaie
rspndit, dispunnd de unele unelte speciale, limbaj de scriptare propriu i altele cum ar fi:
- unelte pentru modelarea unui sistem de particule i unelte de animare ale
sistemului creat;
- unealta Surface Tool pentru crearea de peisaje complexe cu ajutorul sistemului
de particule;
- MAX Script, limbaj de script propriu;
- posibilitate de modelare prin:
- sistem de poligoane (i primitive clasice)
- NURBS (nonuniform rational B-splins);
- Particle Flow, unealt de dinamizare a scenei 3D create;

196

3ds Max este folosit n special n industria jocurilor PC (contribuind la crearea jocurilor
Battlefield Vietnam, Battlefield 1942, Call of duty etc.) i n cinematografie (se pot
meniona filemele Black hawk down, Harry Potter and the prisoner of Azbakam, Lara
Croft: tomb raider etc.)
Lightwave 3D
Este un program folosit pentru modelare i animaie 3D i a fost creat n 1988 de ctre
programatorii Allen Hastings i Stuart Ferguson, purtnd numele de Videoscape. Iniial softul
a fost creat exclusiv pentru placa video Amiga 2000 n cadrul proiectului Video Toaster.
Ulterior a fost mbuntit, astfel nct s fie compatibil pe platforme multiple (Mac OS X,
Windows, Linux i SGI IRIX.
Fiind achiziionat de ctre compania Newtek, a fost redenumit n Lightwave.
Lightwave 3D are caracteristici care i confer unicitate n comparaie cu alte softuri de
grafic 3D, i anume:
- conine funcii multi-thread acestea pot utiliza simultan pn la 8 procesoare pentru
efectuarea de calcule matematice complexe;
- are limbaj de scriptare propriu: LScript;
- este alctuit din 2 pachete soft distincte:
- modelatorul: folosit pentru creare de obiecte tridimensionale
- pachetul cu ajutorul cruia se creeaz animaia, efectele de lumin/umbr, etc.
Maya
Este un soft de grafic 3D folosit cu preponderen n domeniul cinematografiei, dar i
la crearea de jocuri PC i video. Softul fost creat de ctre Alias System Corporation, n 2
variante i anume:
- una cu funcii limitate: Maya Complete;
- una complet, Maya Unlimited.
Maya, funcioneaz pe platforme de Windows, Linux, IRIX i MAC OS.
Maya dispune de unelte speciale, limbaj de scriptare propriu , .a. :
- MEL (Maya Embedded Language) limbaj de scriptare propriu;
- modelare prin: - poligoane i primitive
- NURBS (la fel ca i la 3ds Max)
- subdiviziuni (SubD modelling;
- animaia lumii 3D prin crearea unui clip de animaie, care permite centralizarea
comportamentului unui element din lumea 3D, urmnd ca micarea s se realizeze
selectnd secvene din clip;
Macromedia (Adobe) Flash
Tehnologia Flash a fost introdus pe pia n 1996 i este binecunoscut pentru abilitatea
ei de a aduga animaie i interactivitate n pagini web. Macromedia Flash cuprinde 2
componente:
- Adobe Flash Player este o aplicaie client, folosit n cadrul celor mai cunoscute
browsere (cum ar fi Netscape, Internet Explorer sau AOL) pentru integrare de animaii
n pagini web;

197

Adobe Engagement Platform softul folosit pentru crearea coninutului redat de ctre
Flash Player. Cu ajutorul lui se pot creea, pe lng animaii web, i filmulee sau jocuri
(ca exemplu seria Yetisports)

SVG (Scalable Vector Graphics)


Este un limbaj pentru creare de grafic 3D static sau animat, bazat pe tehnologia
XML; aparine clasei de limbaje open standard, fiind creat de asociaia World Wide Web
Consortium. SVG a fost construit dup introducerea pe pia n 1998 a limbajului VML
(Vector Markup Language, asemntor cu XML), de ctre Adobe i Microsoft. A cunoscut o
ascensiune rapid, cea mai recent versiune a sa fiind SVG Tiny 1.2, lansat n 10 august
2006. SVG are versiuni construite i pentru platforme mobile (IPOD-uri, telefoane mobile,
PDA-uri), cum ar fi SVG Tiny sau SVG Basic.
Permite crearea a 3 tipuri de obiecte:
- forme grafice vectoriale, construite din linii drepte sau curbe, ele pot fi grupate,
formnd obiecte compuse;
- imagini grafice digitale;
- obiecte text;
Grafica creat prin SVG poate fi in acelai timp animat i interactiv, se permite
alocarea oricrui obiect SVG a evenimentelor de tip onmouseover i onclick. De
asemenea SVG ofer posibilitatea comprimrii elementelor folosite, obinndu-se de tip
gzip, astfel mbuntindu-se performana rulrii acestor fiiere.
Grafica SVG poate fi vizualizat pe multiple browsere Opera, Firefox, OmniWeb,
Konqueror, Internet Explorer i Safari (pe ultimele dou browsere coninutul SVG poate fi
vizualizat numai dac se folosete un plugin SVG).
Avantaje/dezavantaje ale folosirii elementelor grafice pe web
Grafica 3D pe web are avantaje deosebite, deoarece utilizatorii internetului prefer ca
paginile de web vizitate s fie animate, dinamizate i interactive, ei nu mai sunt satisfcui de
paginile care conin numai text sau imagini neanimate.
Principalele avantaje ale folosirii graficii pe web sunt:
- efectele vizuale avansate sunt atractive pentru utilizator, el avnd posibilitatea de a
interaciona cu lumea virtual;
- se obine o redimensionare a paginilor web: efectul 3D este veridic, controlul
coninutului se poate realiza uor i de ctre utilizator;
- programatorul are o mare libertate n crearea animaiilor 3D, el avnd la dispoziie pe
lng multiplele limbaje de programare i multe obiecte 3D predefinite;
-

Pe lng aceste avantaje, exist ns i dezavantaje:


manipularea lumii tridimensionale se face pe o platform bidimensional;
folosirea elementelor grafice ngreuneaz cu mult lucrul procesorului.;
n cazul elementelor dinamizate, crete volumul de cod surs, de aceea este foarte greu
s se obin o fluiditate a micrilor n lumea virtual.

198

M5.U3.4. Introducere n limbajul VRML


Tehnologia VRML ( Virtual Reality Markup Language) a fost intens folosit nc de la
lansare, n decursul anului 1997 aprnd primele pagini web cu grafic 3D VRML (de
exemplu siteurile de chat 3D CyberTown). Datorit succesului cunoscut, a fost preluat de
SGIs Cosmo Software, iar mai apoi de Platinum Technologies i Computer Associates (CA).
Avantaje/dezavantaje ale folosirii tehnologiei VRML
Folosirea tehnologiei VRML prezint aceleai avantaje i dezavantaje ca i utilizarea
celorlalte metode de creare a graficii 3D. Printre avantaje se poate meniona:
- libertate n crearea de grafic 3D: toate efectele create n VRML sunt la discreia
utilizatorului, acesta avnd control deplin asupra graficii create i multiple
posibiliti de a o vizualiza (obiectele create pot fi apropiate sau deprtate,
ntoarse, rsturnate etc.);
- structurile create n VRML sunt copii fidele ale structurilor reale, efectul vizual
creat fiind unul avansat (datorit lucrului n trei dimensiuni);
Principalele dezavantaje ale tehnologiei VRML sunt:
- dificulti n a reprezenta cu exactitate structurile reale: complexitatea lumii reale
este greu de redat n VRML, deoarece se ncearc recrearea i manipularea unei
lumi tridimensionale ntr-un mediu bidimensional. Tot din acest cauz este
dificil stabilirea i reprezentarea poziiei relative a mai multor obiecte 3D.
- timpul de prelucrare a calculelor necesare reprezentrii unei lumi VRML este
foarte lung, ceea ce duce la suprasolicitarea procesorului, astfel nct scenele 3D
reprezentate cu multe detalii sau cele foarte dinamice se vor afia trunchiat.
VRML 1.0 vs. VRML 2.0
Prima versiune oficial a tehnologiei VRML este 1.0, aceasta avnd urmtoarele
caracteristici:
- a fost construit exclusiv pentru creare de grafic 3D static, neanimat.
- se folosete de anumite forme predefinite (numite primitive), pentru a construi
scenele 3D. Exemple de primitive: cub (box), cilindru (cylinder), sfer (sphere),
con (cone) etc. Programatorul are ns posibilitatatea de a-i defini propriile forme
complexe, de a le salva i de a le utiliza n crearea de scene 3D. Toate formele
vizibile i caracteristicile lor sunt definite n entiti numite noduri.
- permite operaii relativ simple pentru manipularea obiectelor create, cum ar fi
transformri, scalri sau rotaii.
- permite personalizarea lumii 3D construite prin aplicare de culori, texturi i prin
metode de iluminare a scenei.
VRML 2.0 a pstrat toate funcionalitile i caracteristicile primei versiuni, adugnd
altele noi, cum ar fi:
- posibilitatea de a aduga anumite comportamente obiectelor create, fr s fie
nevoie de rescrierea ntregului cod-surs. Astfel, din statice lumile 3D au devenit
dinamice. Totodat se pot implementa tipare de comportament pentru interaciunea
utilizatorului cu scena virtual, acesta avnd i posibiliti de a modifica scena deja
construit.
- posibilitatea de a ncorpora sunete sau fiiere video n lumea virtual.

199

posibilitatea de a folosi limbaje de script (JavaScript) sau limbaje de programare


(Java) pentru perfecionarea lumii 3D create.

Navigare n lumea virtual


Odat creat i integrat ntr-o pagin HTML, o scen grafic VRML poate fi
vizualizat de ctre toi cei care viziteaz acea pagin, cu condiia ca browserul lor s suporte
coninut VRML. Browserele compatibile VRML sunt de dou tipuri:
- browsere independente (standalone) acestea ofer posibilitatea de a vizualiza
numai coninut VRML;
- browsere integrate folosite n cazul n care se ncearc vizualizarea unei pagini
cu coninut mixt HTML-VRML. Acestea sunt folosite ca plugin la browserele
clasice HTML.
Exemple de browsere VRML:
- Microsoft ActiveVRML: browser lansat n 1996, folosit pentru o perioad scurt
de timp, deoarece prezenta probleme la vizualizarea graficii VRML dinamice.
- Live3D: este un browser VRML independent, folosit cu browserul HTML
Netscape Navigator. El poate fi folosit pentru vizualizare de grafic static
(VRML 1.0) i dinamic (VRML 2.0), fiind distribuit mpreun cu Netscape,
ncepnd cu versiunea 3.0 al acestuia.
- Intervistas WorldView: acest browser poate fi folosit att independent ct i ca
plugin la Netscape respectiv Internet Explorer. Ofer posibilitatea ca utilizatorul
s-i salveze anumite puncte de reper pe parcusrul vizualizrii lumii virtuale,
puncte ce pot fi revizitate.
- SGIs CosmoPlayer: este cel mai cunoscut browser VRML, avnd integrat i un
convertor pentru transformarea fiierelor VRML 1.0 n VRML 2.0. Este
compatibil i cu prile de cod implementate n Java sau JavaScript.
- Sonys CyberPassage: este considerat a fi primul browser creat exclusiv pentru
vizualizare de grafic VRML 2.0 (celelalte au avut mai nti versiune pentru
VRML 1.0, fiind apoi upgradate pentru coninut VRML 2.0). Este compatibil i cu
scripturi JavaScript i ofer faciliti de multiuser (lumea virtual poate fi analizat
n timp real de ctre mai muli utilizatori).
Construcia scenelor virtuale cu VRML
O scen virtual VRML poate fi construit prin 2 modaliti:
1) folosind un simplu editor text (Notepad) pentru a scrie fiecare linie de cod n parte.
Aceast metod este una foarte costisitoare din punctul de vedere al timpului
sacrificat de ctre programator, ofer ns posibilitatea ca acesta s aib control
deplin asupra etapelor de creare a graficii.
2) cu ajutorul unui builder VRML: acesta este un pachet soft folosit pentru a construi
orice scen 3D cu efort minim de programare. Printre principalele buildere aflate la
dispoziia programatorului sunt demne de menionat urmtoarele dou:
VRealmBuilder pachet soft creat de ctre IDS Software. Este ideal
pentru nceptori, acetia avnd posibilitatea de a comuta ntre grafica
creat i codul surs generat (sunt respectate cu strictee sintaxa i regulile
de construcie ale fiierului VRML). Structura fiierului creat nu poate fi
modificat, programatorul neavnd posibilitatea de a-i crea propria
ierarhie de noduri sau obiecte.

200

Caligaris Truespace este cunoscut i sub numele de Pioneer sau


Fountain. Acest pachet soft ofer, pe lng primitivele i formele
geometrice clasice, posibilitatea construirii de forme grafice 3D complexe,
bazate pe sisteme de poligoane i conine instrumente i pentru creare de
text animat.

Structura i caracteristicile unui fiier VRML V2.0


Structura general a unui fiier VRML (fierul are extensia .wrl) este dat de
urmtoarele seciuni:
1. un fiier VRML ncepe ntotdeauna cu urmtorul header:
#VRML V2.0 utf8
2. comentarii precedate de caracterul #
3. noduri
Identificatorul utf8 din header permite programatorului folosirea unui set de caractere
extins pentru construcia scenei 3D (litere greceti, caractere din alfabetul chinez etc.). Orice
linie care ncepe cu caracterul #, n afar de acest header este considerat a fi comentariu.
Fiierul VRML este salvat cu extensia .wrl.
Modelul de culoare folosit n VRML este RGB, astfel nct este nevoie de 3 valori
pentru specificarea unei culori: rou (RED), verde (GREEN) i albastru (BLUE), fiecare cu
valori cuprinse n intervalul [0, 1] (de exemplu combinaia 0.0 0.0 0.0 semnific culoarea
neagr i 1.0, 1.0, 1.0 reprezint culoarea alb). Unitatea de msur predefinit a distanei este
metrul, iar unghiurile sunt msurate n radiani (i nu n grade).
M5.U3.5. Noduri n VRML V2.0
Mulimea de baz a obiectelor VRML const din nodurui.
Dac nodurile geometrice nu au precizate dimensiunile, atunci vor fi considerate valorile
implicite date n sintaxa nodurilor.
Nodul Shape
Sintax:
Shape{
appearance NULL
geometry NULL
}
Semantic:
Toate obiectele vizibile create n VRML sunt definite n interiorul nodului Shape, unde
gsim urmtoarele cmpuri:
- appearance specific un nod de tip Appearance, prin intermediul cruia stabilim
culoarea, textura i celelalte caracteristici vizuale ale formei geometrice;
- geometry indic forma geometric creat. Acestea pot fi de dou tipuri:
forme primitive: Box (cub), Cone (con), Cylinder (cilindru) i Sphere
(sfer).

201

forme
geometrice
avansate:
Elevation
IndexedFaceSet, IndexedLineSet i PointSet.

Grid,

Extrusion,

Nodul Box
Sintax:
Box {
size 1.0 1.0 1.0
}
Semantic:
Nodul Box definete un paralelipiped cruia i se poate stabili limea, nlimea i
grosimea. Centrul de greutate el formei create este prestabilit la punctul cu coordonatele
(0,0,0) din sistemul de coordonate local (practi centrul ecranului). Box are un singur cmp,
size, prin intermediul cruia se definete mrimea corpului geometric pe axele X, Y i Z.
Cmpul are valoarea iniial 1.0, 1.0, 1.0.
Nodul Sphere
Sintax:
Sphere {
radius 1.0
}
Semantic:
Nodul Sphere definete o sfer cu raza predefinit la 1.0 m. Sphere are un singur camp,
radius, iar sfera afiat va avea centrul de greutate n centrul ecranului, n punctul cu
coordonatele (0,0,0).
Nodul Cone
Sintax:
Cone {
bottomRadius 1.0
height 2.0
side TRUE
bottom TRUE
}
Semantic:
Nodul Cone se folosete pentru definirea unui con i are 4 cmpuri:
- bottomRadius: reprezint raza cercului aflat la baza conului. Valoare ei trebuie s
fie mai mare de 0.0;
- height: nlimea conului;
- side i bottom: valori booleene, care specific prile vizibile ale conului desenat
(de exemplu dac side e FALSE, se va afia numai cercul aflat la baza conului);
Nodul Cylinder

202

Sintax:
Cylinder {
radius 1.0
height 2.0
side TRUE
bottom TRUE
top TRUE
}
Semantic:
Nodul Cylinder definete un cilindru, i are 5 cmpuri:
- radius i height definesc proporiile geometrice ale cilindrului. Valoarea lor
trebuie s fie mai mare de 0.0;
- side i bottom valori boolene, au aceeai funcie ca i n cazul nodului Cone;
- top valoare boolean, este TRUE dac se dorete afiarea cercului din partea de
sus a cilindrului (capacul lui), i FALSE, dac acesta e invizibil.
Nodul PointSet
Sintax:
PointSet {
color NULL
coord NULL
}
Semantic:
Nodul PointSet definete o mulime de puncte 3D din sistemul de coordonate local i
are 2 cmpuri:
- color reprezint un nod de tip Color, fiind un camp opional, cu valoarea
predefinit la culoarea neagr;
- coord reprezint un nod de tip Coordinate, coninnd un set de coordonate 3D.
Numrul componentelor din cmpul color trebuie s coincid cu numrul celor din
coord.
Nodul IndexedLineSet
Sintax:
IndexedLineSet {
coord NULL
coordIndex [ ]
color NULL
colorIndex [ ]
colorPerVertex TRUE
}
Semantic:
Nodul IndexedLineSet definete o mulime de drepte din sistemul de coordinate local i
are 5 cmpuri:
- color i coord cu aceleai funcii ca i la PointSet;

203

coordIndex conine o mulime de indeci de coordinate cu ajutorul crora se va


desena dreapta 3D. Indecii se separ cu ajutorul caracterului , un index cu
valoarea -1 reprezentnd fritul listei coordonatelor aparinnd dreptei curente.
colorIndex are aceeai funcie ca i coordIndex, ns se refer la culorile aplicate
dreptelor.
colorPerVertex camp Boolean prin intermediul cruia se definete modul de
aplicare al culorilor. Dac valoarea lui este TRUE, fiecare segment de linie poate
avea culoare diferit, astfel nct desenarea dreptei poate ncepe cu o culoare i se
poate termina cu alta. Dac valoarea cmpului e FALSE, fiecare dreapt are o
singur culoare.
Exemplu
Desenarea unei linii frnte n VRML

#VRML V2.0 utf8


IndexedLineSet {
coord 0 0 0 1 1 0 -1 0 0 -1 -1 0
coordIndex [3 0 2 1]
colorIndex [0 1 2 0 ]
colorPerVertex TRUE
}
Afiarea textului n VRML
Nodul care permite afiarea de iruri de caractere (stringuri) n lumea VRML este Text.
Sintax:
Text {
string [ ]
fontStyle NULL
length [ ]
maxExtent 0.0
}
Semantic:
Nodul Text conine urmtoarele cmpuri:
- string conine textul care va fi afiat, formatat pe un singur sau mai multe
rnduri, caz n care fiecare linie este considerat ca fiind un string de sine stttor;
- fontstyle conine un nod Fontstyle i se refer la modul de afiare al irului de
caractere;
- length reprezint lungimea fiecrui string n uniti VRML i anume: valoarea 0
nseamn c irul de caractere rmne nemodificat, o valoare pozitiv nseamn
comprimarea unui string considerat lung, iar o valoare negativ se interpreteaz ca
o expandare al unui string scurt;
- maxLength seteaz o limit maxim pentru lungimea stringurilor.
Proprietile de afiare al unui ir de caractere se stabilesc prin intermediul nodului
FontStyle.

204

Sintax:
FontStyle {
family "SERIF"
horizontal TRUE
justify "BEGIN"
language ""
leftToRight TRUE
size 1.0
spacing 1.0
topToBottom TRUE
}
Semantic:
Nodul FontStyle are cmpurile:
- family specific familia de fonturi i poate lua valorile SERIF, SANS sau
TYPEWRITER;
- style se refer la stilul de afiare al caracterelor. Valori posibile: PLAIN, BOLD,
ITALIC sau BOLDITALIC;
- horizontal cmp cu valori booleene, permite afiarea de text pe orizontal;
- leftToRight cmp boolean care specific dac textul se afieaz de la stnga la
dreapta sau de la dreapta la stnga (n stil arab);
- topToBottom stabilete direcia de afiare de sus n jos sau de jos n sus (n stil
chinezesc);
- justify stabilete modul de aliniere al textului. Cmpul poate avea valorile
FIRST, BEGIN (ambele nsemnnd aliniere la stnga), MIDDLE (text centrat) sau
END (aliniere la dreapta);
- language specific setul de caractere folosit, de exemplu en englez,
en_US englez american etc.
- size specific mrimea caracterelor n uniti VRML (i nu n pixeli);
- spacing folosit pentru a specifica spaiul ntre rndurile textului;
Nodul Appearance
Formele geometrice mai simple sau mai complexe create n VRML vor arta toate la
fel n cazul n care nu sunt personalizate. Culoarea predefinit n VRML este cea neagr, ea se
va aplica tuturor elementelor lumii virtuale n cazul n care acestea nu sunt complet definite
de ctre creatorul lor.
Nodul care ajut la definirea caracteristicilor vizuale al oricrui nod de tip Shape este
Appearance.
Nodul Appearance are sintaxa:
Appearance {
material NULL
texture NULL
textureTransform NULL
}
Semantic:
Nodul are 3 cmpuri opionale:

205

material definete un nod de tipul Material, care specific culoarea corpului


VRML i modul n care acesta va reflecta lumina;
texture va conine un nod de textur, de tipul ImageTexture, MovieTexture sau
PixelTexture;
textureTransform conine un nod de tipul TextureTransform i definete modul
n care se aplic textura pe forma geometric;

Nodul Material
Cu ajutorul acestui nod se poate specifica culoarea, modul de reflecie i transparena
materialului aplicat unui corp geometric. Nodul se poate defini numai n interiorul unui nod
de tip Appearance.
Sintax:
Material {
diffuseColor 0.8 0.8 0.8
ambientIntensity 0.2
emissiveColor 0.0 0.0 0.0
specularColor 0.0 0.0 0.0
shininess 0.2
transparency 0.0
}
Semantic:
Nodul Material are 6 cmpuri:
- diffuseColor se folosete pentru definirea culorii aplicate. Cmpul este ignorat
dac se aplic i texturi pe corpul geometric;
- emissiveColor definete gradul de strlucire al suprafeei colorate;
- ambientIntensity determin volumul de lumin reflectat de ctre corpul
geometric;
- specularColor definete culoarea petelor lucioase de pe materialul corpului
geometric;
- shininess modereaz intensitatea cu care strlucesc petele lucioase de pe
suprafa, valori mici nsemnnd strlucire moderat, iar valori mari strlucire
intens;
- transparency este folosit pentru specificarea gradului de transparen al
materialului. Valoarea 0.0 semnific o suprafa complet opac, iar 1.0 o suprafa
total transparent.
Culorile n nodul Material se reprezint n mod caracteristic VRML, ca un triplet RGB,
cu valori reale cuprinse ntre 0.0 i 1.0.
Texturi
VRML 2.0 permite texturarea formelor geometrice cu ajutorul imaginilor, filmelor sau
imaginilor pixelate. Odat aleas, textura se va aplica tuturor feelor formei geometrice. Se
permite redimensionarea texturii alese, dar i repetarea ei pe orizontal, vertical sau ambele
sensuri astfel nct s acopere faa/feele corpului geometric. De asemenea exist i
posibilitatea de a transforma sau roti o textur cu ajutorul nodurilor TextureTransform i
TextureCoordinate.

206

Nodul ImageTexture
Permite setarea unei imagini JPEG, GIF sau PNG ca textur, cu ajutorul acestui nod se
poate stabili i modul n care se va aplica textura (dac se va repeta pe orizontal sau vertical
i cum se va aplica pe feele formei geometrice).
Sintax:
ImageTexture {
url [ ]
repeatS TRUE
repeatT TRUE
}
Semantic:
Nodul are urmtoarele cmpuri opionale:
- url specific locaia imaginii, se pot da i liste de locaii n care browserul s
caute imaginea;
- repeatS specific dac imaginea se va repeta pe vertical, cmpul poate lua
valori booelene;
- repeatT - specific dac imaginea se va repeta pe orizontal, cmpul poate lua
valori booelene;
Nodul TextureTransform
Acest nod permite efectuarea de operaii simple (scalri, transformri, rotaii sau
translaii) asupra coordonatelor texturii folosite. TextureTransform poate aprea numai n
interiorul unui nod Appearance.
Sintax:
TextureTransform {
scale 1 1
rotation 0
center 0 0
translation 0 0
}
Definirea surselor de lumin
Obiectele create au fost luminate cu sursa de lumin predefinit de ctre browser,
lumina indicnd obiectul examinat la un moment dat. Aceast surs de lumin este una de tip
headlight, VRML oferind posibilitatea de a folosi i alte tipuri de iluminri, i anume: lumina
direcionat (directional light), lumina punctiform (point light) i lumina de tip bec (spot
light).
Probleme ntmpinate n iluminarea unei scene VRML:
- reflecia luminii n realitate n momentul n care un obiect este iluminat acesta
reflect lumina n funcie de materialul din care este construit i de culoarea sa. n
lumea virtual VRML ns nu este cunoscut conceptual de lumin reflectat, ceea
ce nseamn c sunt vizibile numai obiectele care sunt illuminate n mod direct.
- atenuarea luminii VRML are aceast funcie prin intermediul cruia se
modeleaz efectul de scdere n intensitate a luminii odat cu creterea distanei

207

dintre obiectul iluminat i sursa de lumin (numai n cazul unei surse de lumin
punctiforme sau de tip bec).
- umbrele VRML nu permite modelarea efectului de umbr, deoarece ar crete
foarte mult complexitatea graficii create. Umbrele pot fi doar simulate,
manipulnd culoarea aplicat elementelor lumii virtuale.
- iluminarea unei suprafee plane - prezint probleme n cazul n care se dorete
iluminarea doar al unei pri din totalul suprafeei, ns aceste probleme se pot
rezolva dac suprafeele plane se definesc cu ajutorul unor noduri IndexedFaceSet
sau ElevationGrid, asftel nct ele s fie alctuite din mai multe sectoare, crenduse astfel suprafee gen mee.
- lumini colorate VRML ofer posibilitatea de a color alumina, trebuie ns s se
in cont de anumite reguli:
n cazul n care se definesc culori pure (rou, verde sau albastru) obiectele
colorate astfel vor reflecta numai lumina de aceeai culoare;
obiectele colorate cu culori pure iluminate cu lumin de alt culoare, vor
rmne n intuneric, nu vor reflecta lumina;
Se recomand deci folosirea culorilor mixte (amestecuri de rou, verde i albastru).
Nodul DirectionalLight
Sintax:
DirectionalLight {
on TRUE
intensity 1
ambientIntensity 0
color 0.4 1 0.0
direction 0 1 -1
}
Semantic:
Acest nod definete o surs de lumin aflat la o distan foarte mare de lumea virtual
creat, astfel nct razele de lumin care ajung la obiectele din acea lume sunt deja paralele pe
o anumit direcie. Lumina definit prin intermediul acestui nod are effect numai asupra
obiectelor definite n acelai grup cu nodul DirectionalLight. Cmpurile acestui nod sunt:
- on camp boolean, determin dac lumina direcional e sau nu activ;
- intensity reprezint intensitatea luminii, poate avea valori ntre 0.0 i 1.0;
- ambientIntensity specific prin valoarea sa (ntre 0.0 i 1.0) msura n care
lumina direcional contribuie la iluminarea general a scenei 3D;
- color un camp RGB prin care se determin culoarea luminii;
- direction specific un vector 3D care seteaz direcia luminii;
Nodul PointLight
Sintax:
PointLight {
on TRUE
intensity 0.8
ambientIntensity 0.2
color 1 1 0.1
location 0 0 0

208

attenuation 1 0 0
radius 80
}
Semantic:
Acest nod definete o surs de lumin aflat ntr-o locaie exact, din aceast locaie
razele de lumin se mprtie n toate direciile. Se ilumineaz toate corpurile care se afl n
calea de lumin, nu numai cele definite n acelai grup de obiecte cu nodul PointLight.
Intensitatea luminii se poate totui limita cu atributul radius, care specific raza sferei n
interiorul creia obiectele sunt iluminate de ctre sursa de lumin definit. Alte cmpuri ale
nodului PointLight:
- on - camp boolean, determin dac lumina punctiform e sau nu activ;
- intensity reprezint intensitatea luminii, cu valori ntre 0.0 i 1.0;
- ambientIntensity specific prin valoarea sa (ntre 0.0 i 1.0) msura n care
lumina direcional contribuie la iluminarea general a scenei 3D;
- color un cmp RGB care determin culoarea luminii;
- location specific un vector 3D care definete coordonatele sursei de lumin;
- attenuation vector 3D care specific modul n care lumina i va pierde din
intensitate odat cu creterea distanei de la surs;
Nodul SpotLight
Sintax:
SpotLight {
on TRUE
intensity 1
ambientIntensity 0.2
color 1 0.1 1
location 0 1 0
direction 0 0 0
attenuation 1 0 0
radius 80
cutOffAngle 0.78
beamWidth 0.78
}
Semantic:
Acest nod definete o surs de lumin aflat ntr-o locaie anume, cu direcia luminii
bine stabilit, astfel nct razele de lumin emise dintr-o astfel de surs s formeze un con de
lumin. Acest con este caracterizat de dou din cmpurile nodului, i anume:
- cutOffAngle definete unghiul pe care l formeaz generatorii conului, se
specific n radiani, valoarea sa trebuie s se ncadreze n intervalul 0-1,57 (0180);
- beamWidth definete unghiul unui con mai mic, n interiorul cruia lumina are o
intensitate constant;
Noduri cu funcie de grupare
VRML ofer urmtoarele noduri cu funcie de grupare:

209

Anchor reprezint o form complex construit dintr-o mulime de alte forme,


preluate printr-un hyperlink dintr-o alt lume VRML, pagin HTML sau orice alt
structur de date ce poate fi interpretat de ctre browser;
- BillBoard reprezint o mulime de noduri, care indiferent de poziia privitorului
sunt vizibile i apar cu faa spre privitor;
- Collision o mulime de noduri care anun browserul momentul n care se
ntlnete un eveniment de tip coliziune;
- Group definete un nod compus, format de o mulime de alte noduri, faciliteaz
reutilizarea acelor noduri;
- Switch o mulime de noduri din care poate fi reprezentat cel mult un nod la un
moment dat;
- Transform - definete un sistem nou de coordonate pentru lumea virtual, diferit
de cel predefinit;
n VRML gruparea are ca scop principal limitarea modificrilor ce se pot realiza asupra
nodurilor doar la anumite noduri, cele care fac parte din acelai grup. Se permite ca un grup
de noduri s fie inclus n alt grup, astfel nct s se creeze structuri ierarhice de noduri.
-

Nodul Group
Sintax:
Group {
children []
bboxCenter 0 0 0
bboxSize -1 -1 -1
}
Semantic:
Acest nod permite ca o mulime de noduri s fie tratate ca o singur entitate (nod)
VRML. Conine urmtoarele cmpuri:
- children conine nodurile (elementele) incluse n grup;
- bboxCenter i boxSize - cu semnificaia definit n nodul Anchor;
Nodul Transform
Sintax:
Transform {
scale 1 1 1
scaleOrientation 0 0 1 0
center 0 0 0
rotation 0 0 1 0
translation 0 0 0
bboxCenter 0 0 0
bboxSize -1 -1 -1
children []
}
Semantic:
Nodul Transform permite definirea unui nou system de coordinate local pentru nodurile
ce fac parte din grup. Cu ajutorul su se pot efectua operaii de tip rotaie, scalare sau

210

translaie, acestea afectnd de asemenea toate nodurile coninute de grup. Cmpurile nodului
Transform sunt:
- children conine toate nodurile ce vor face din grup;
- scale se refer la o transformare de tipul scalare;
- scaleOrientation specific modul de rotaie al axelor sistemului de coordinate
pentru ca scalarea s se poat realize;
- center definete centrul operaiei de scalare;
- rotation definete o rotaie pe una din axe, are 4 valori, primele 3 se refer la
axele de coordinate X, Y, Z, iar cel de-al 4-lea unghiul rotaiei;
- translation definete o nou origine pentru sistemul de coordinate;
- bboxCenter i boxSize - cu semnificaia definit n nodul Anchor;

S se realizeze un om de zpad nconjurat de brazi folosind nodurile VRML


V2.0

M5.U3.6. Evenimente n VRML


Principala diferen ntre VRML 1.0 i VRML 2.0 este reprezentat de capacitatea
nodurilor s fie emitori sau receptori de evenimente, astfel nct n VRML 2.0 se pot defini
obiecte animate care pot avea anumite reacii la interaciunea cu utilizatorul. Aceste reacii se
obin prin modificarea anumitor cmpuri din nodurile deja create, acestea purtnd numele de
cmpuri expuse i putnd fi descompuse n 3 subcomponente (fieldName reprezentnd
numele cmpului expus):
- eventIn set_fieldName
- field fieldName
- eventOut fieldName_changed
O astfel de definiie semnific faptul c nodul declarat are capacitatea de a recepta
evenimente (eventIn), dar n acelai timp poate s i genereze evenimente (eventOut). Prin
eventIn se seteaz valoarea implicit al cmpului expus, n momentul n care aceast valoare
se modific se va genera rspunsul la acea modificare cu ajutorul componentei eventOut.
Exemple de cmpuri expuse: diffuseColor, url, point[], scale, rotation sau translation.
Nodurile VRML pot dispune i de alte cmpuri de tip eventIn sau eventOut, acestea ns
nu sunt vizibile n definiia nodului, sunt considerate implicite. De asemenea pot exista noduri
care au cmpuri eventIn definite fr s aib correspondent eventOut (cum ar fi cmpurile
coordIndex[], colorIndex[], orientation sau scale).
Modul de gestionare al evenimentelor este urmtorul: n momentul producerii unui
eveniment, nodul care l-a generat returneaz o valoare sau o mulime de valori de un anumit
tip (n funcie de tipul evenimentului). Astfel, producerea de evenimente n VRML poate fi
vzut ca o transmitere de date de la utilizator ctre nodul care va fi modificat. n funcie de
valorile transmise de ctre parametric nodul va rspunde cu o aciune specific, aciune
reflectat de modificare valorilor cmpurilor expuse. Pentru a putea transmite aciunea dorit
unui nod i pentru a putea recepta rspunsul su, VRML se folosete de scripturi i de rutarea
evenimentelor (ROUTES).
n VRML exist posibilitatea de a genera evenimente i fr modificarea valorii
cmpurilor expuse, folosind una din urmtoarele structuri:

211

timere genereaz evenimente la anumite intervale de timp predefinite;


senzori senzori de atingere (touch sensors): genereaz evenimente atunci cnd
cursorul mouse-ului este plasat asupra unui obiect/nod definit n acelai grup de
noduri ca i senzorul;
senzori de vizibilitate (visibility sensors): genereaz evenimente atunci cnd un
obiect sau mai multe din grupul n care e definit senzorul este vizibil pentru
utilizator;
senzori de micare (dragging sensors): genereaz evenimente atunci cnd
utilizatorul d click peste un obiect (din acelai grup ca i senzorul) i l trage pe
ecran, schimbndu-i poziia;
senzori de apropiere (proximity sensors): evenimentul se declaneaz n momentul
n care pointerul mouse-ului se afl la o anumit distan de obiectul care va
suporta consecinele evenimentului;

Rutarea evenimentelor (ROUTES)


n VRML un nod poate genera (trimite) sau recepiona evenimente, legtura ntre un
eveniment generat de un nod i nodul care recepteaz evenimentul fiind realizat de entitatea
ROUTE.
Sintax: ROUTE Node.eventOut_changed TO Node.set_eventIn
Prefixul set_ i sufixul _changed nu sunt obligatorii, este corect i urmtoarea
sintax: ROUTE Node.eventOut TO Node.eventIn. Dup cum se vede, ROUTE nu permite
stabilirea noii valori pentru cmpul expus modificat.
n VRML pot exista adevrate cascade de evenimente, deoarece se genereaz cte un
eveniment de fiecare dat cnd un cmp expus i schimb valoarea. Fiecare eveniment
generat are ataat momentul exact al producerii sale, i n cazul n care sunt mai multe
evenimente care s-au produs n acelai moment, ele au ataate aceeai etichet temporal. n
cascada de evenimente pot exista evenimente care se repet nejustificat. Ele sunt automat
eliminate din cascad n cazul n care au aceeai etichet temporal, deoarece VRML nu
permite astfel de repetiii.
Senzori n VRML
Nodul TimeSensor
Sintax:
TimeSensor {
cycleInterval 1.0
enabled TRUE
loop FALSE
startTime 0
stopTime 0
}

Semantic:

212

Acest nod funcioneaz ca un cronometru care declaneaz unul sau mai multe
evenimente la anumite intervale de timp (crendu-se astfel efecte de animaie). Nodul are
urmtoarele cmpuri:
- enabled specific statutul senzorului (dac are valoarea TRUE senzorul e activ,
la valoarea FALSE senzorul este inactiv);
- startTime specific momentul n care senzorul ncepe generarea evenimentelor.
Valoarea cmpului este n secunde i reprezint numrul de secunde trecute de la
data 01.01.1970, ora 00:00;
- stopTime specific momentul n care senzorul va nceta generarea de
evenimente. Valoarea cmpului este n secunde i reprezint numrul de secunde
trecute de la data 01.01.1970, ora 00:00;
- cycleInterval specific intervalul de timp n carese vor genera evenimentele,
avnd valoarea msurat n secunde;
- loop specific dac n momentul n care expir numrul de secunde definite n
cmpul cycleInterval, TimeSensor va fi sau nu restartat;
Senzorul de timp funcioneaz astfel: n momentul n care de la crearea lumii virtuale a
trecut numrul de secunde specificat n cmpul startTime, TimeSensor ncepe msurarea
timpului alocat producerii evenimentelor. Se vor produce evenimente pn cnd numrul de
secunde contorizate va fi egal cu valoarea specificat n stopTime sau cu valoarea obinut din
suma valorii din startTime cu cea din cmpul cycleInterval.
n cazul n care este specificat o valoare valid n cmpul cycleInterval nodul
TimeSensor va genera un eveniment fraction_changed, ce va avea valori cuprinse ntre 0.0 i
1.0 (reprezentnd fraciunea de timp consumat din cycleInterval). Un alt eveniment generat
de ctre nodul TimeSensor este isActive. Acesta va avea valoarea TRUE ct timp cronometrul
msoar trecerea timpului i valoarea FALSE atunci cnd acesta nu mai funcioneaz.
Nodul TouchSensor
Sintax:
TouchSensor {
enabled TRUE
}
Semantic:
Este un nod care asigur interactivitatea lumii VRML cu utilizatorul. De obicei nodul
este definit n cadrul unui grup de noduri, avnd efect asupra tuturor nodurilor definite n
cadrul grupului. Acest senzor este activat n momentul n care pointerul mouse-ului este
poziionat asupra unui obiect din cadrul grupului i utilizatorul efectueaz un click asupra
acelui obiect.
Nodul TouchSensor are un singur cmp, i anume enabled, care specific statutul
senzorului.
Evenimente generate de TouchSensor:
- isOver este un eveniment generat cu valoarea TRUE atunci cnd cmpul enabled
are valoarea TRUE i cursorul mouse-ului este mutat deasupra unui obiect din
grup. Evenimentul se genereaz cu valoarea FALSE dac senzorul e activ (adic
enabled e TRUE) i cursorul mouse-ului nu se oprete deasupra niciunui obiect din
grup. Evenimentul isOver se genereaz numai n cazul obiectelor vizibile pentru
utilizator.
- evenimente care apar la micarea cursorului poziionat pe un obiect din grup:

213

hitPoint_changed returneaz poziia exact a obiectului n cadrul


grupului de obiecte;
hitNormal_changed returneaz normala la suprafa, folosind
coordonatele 3D stabilite prin evenimentul hitPoint_changed;
hitTextCoord_changed returneaz valorile textCoord referitoare la
suprafa;
isActive este un eveniment generat n momentul n care senzorul este activ i se
realizeaz un click asupra unui obiect (valoarea alocat evenimentului va fi
TRUE). n momentul n care mouse-ul nu mai este apsat isActive ia valoarea
FALSE i se genereaz un eveniment touchTime care memoreaz momentul
nregistrrii click-ului.

Nodul VisibilitySensor
Sintax:
VisibilitySensor {
enabled TRUE
center 0 0 0
size 0 0 0
}
Semantic:
Acest nod poate fi folosit pentru a detecta modificrile aduse n vizibilitatea obiectelor
VRML, rspunznd cu anumite evenimente la aceste modificri de vizibilitate. Rolul su ns
nu este acela de a stabili dac un anumit obiect este sau nu vizibil, senzorul reacioneaz doar
la modificrile aduse lumii VRML.
VisibilitySensor are urmtoarele cmpuri:
- center reprezint punctul central al unui cub virtual care cuprinde n interiorul
su obiectele urmrite de ctre senzor;
- size reprezint mrimea laturii cubului;
- enabled specific statutul senzorului, valorile sale sunt booleene;
Evenimente generate de ctre VisibilitySensor:
- enterTime reine momentul n care obiectele din interiorul cubului devin vizibile;
- exitTime - reine momentul n care obiectele din interiorul cubului devin invizibile
utilizatorului;
- isActive ia valoarea TRUE atunci cnd obiectele din interiorul cubului devin
vizibile i FALSE cnd acestea devin invizibile;
Senzori de micare
Aceti senzori detecteaz micarea obiectelor declanat de ctre utilizatori, ns pe
lng aceast detecie senzorii au posibilitatea de a schimba poziia unui obiect definit n
acelai grup de noduri ca i senzorul. n VRML sunt definite 3 tipuri de senzori de micare:
- senzor de plan (Plane Sensor) permite deplasarea obiectelor n sistemul de
coordonate XY;
- senzor cilindric (Cylinder Sensor) permite deplasarea obiectelor pe suprafaa
unui cilindru virtual;

214

senzor sferic (Sphere Sensor) - permite deplasarea obiectelor pe suprafaa unei


sfere virtuale;

Cmpurile partajate de ctre aceste noduri sunt:


- enabled specific statutul senzorului (valoarea TRUE semnific senzor activ, iar
valoarea FALSE un senzor inactiv);
- offset memoreaz poziia iniial a obiectelor a cror poziie va fi modificat.
Cmpul conine valori ntregi, o valoare 0 ar nsemna c obiectele sunt n poziia
lor iniial, o valoare mai mare dect 0 nseamn c deplasarea obiectelor va
ncepe din poziia offset+valoare. Valoarea alocat cmpului va fi ignorat dac n
cmpul autoOffset se regsete valoarea TRUE;
- autoOffset specific browserului dac deplasarea obiectelor se va realize relativ
la poziia lor iniial (i atunci autoOffset are valoarea TRUE) sau relativ la poziia
lor iniial, specificat n cmpul offset (n cazul n care autoOffset are valoarea
FALSE);
Evenimentele generate de ctre senzorii de micare:
- isActive indic faptul c un obiect este in curs de deplasare (cmpul ia valori
booleene);
- trackPoint_changed returneaz coordonatele actuale rezultate n urma deplasrii
obiectului;
- rotation_changed apare n definiia nodurilor SphereSensor i CylinderSensor i
returneaz rotaia realizat n timpul deplasrii obiectului;
- translation_changed returneaz translaia realizat pentru deplasarea obiectelor;
Nodul PlaneSensor
Sintax:
PlaneSensor {
enabled TRUE
offset 0 0 0
autoOffset TRUE
maxPosition 1 1
minPosition 0 0
}
Semantic:
Permite o deplasare a obiectelor VRML n sistemul de coordinate local n planul XY,
astfel nct micarea se poate limita la o suprafa dreptunghiular. Cmpurile specifice
acestui nod sunt:
- maxPosition reine valoarea maxim permis pentru X i Y;
- minPosition - reine valorile minime pentru X i Y;
n cazul n care valoarea specificat de maxPosition este mai mic dect cea din
minPosition, nu exist limitare n deplasarea obiectului.

Nodul SphereSensor

215

Sintax:
SphereSensor {
enabled TRUE
offset 0 1 0 0
autoOffset TRUE
}
Este folosit pentru a realiza micarea obiectelor pe suprafaa unei sfere imaginare (deci
n jurul centrului sistemului de coordonate local).
Nodul CylinderSensor
Sintax:
PlaneSensor {
enabled TRUE
offset 0
autoOffset TRUE
maxAngle -1
minAngle 0
diskAngle 0.262
}
Semantic:
Este folosit pentru a realize micarea obiectelor pe suprafaa unui cilindru imaginar
(adic n jurul axei Y al sistemului de coordinate local, limitnd micarea la un anumir unghi
dat).
Cmpurile nodului CylinderSensor sunt:
- offset cu aceeai semnificaie ca i n cazul celorlalte noduri de micare, ns
micarea se realizeaz relativ la valoarea de pe axa X;
- maxAngle specific rotaia maxim ce poate fi realizat;
- minAngle- specific rotaia minim;
Dac valoarea specificat n maxAngle este mai mic dect cea din minAngle, atunci
rotaia care se realizeaz nu este limitat (unghiul poate fi i de 360 de grade).
ProximitySensor - Senzori de proximitate
Acest tip de senzori sunt reprezentai de ctre nodul ProximitySensor. Acesta asigur un
anumit grad de interactivitate ntr utilizator i lumea VRML, genernd anumite evenimente de
fiecare dat cbd utilizatorul intr, iese sau se mic n interiorul unui spaiu de control,
delimitat printr-un cub imaginar. Senzorul nu ajut la determinarea poziiei relative al
obiectelor din lumea VRML.
Sintax:
ProximitySensor {
enabled TRUE
center 0 0 0
size 0 0 0
}
Semantic:

216

ProximitySensor are urmtoarele cmpuri:


- enabled specific statutul senzorului (poate fi activ sau inactiv);
- center conine coordonatele centrului cubului imaginar;
- size specific dimensiunea laturii cubului;
Evenimente generate de ctre ProximitySensor:
- isActive este generat cu valoarea TRUE atunci cnd senzorul este activ (cmpul
enabled are valoarea TRUE) i pointerul mouse-ului se deplaseaz dintr-o poziie
din exteriorul cubului ntr-o poziie din interiorul cubului. Cmpul ia valoarea
FALSE atunci cnd micarea se realizeaz n sens invers;
- enterTime este generat atunci cnd utlizatorul (prin intermediul mouse-ului)
acceseaz interiorul cubului. n momentul n care utilizatorul prsete interiorul
cubului se genereaz un eveniment exitTime. La orice micare a mouse-ului
(accesarea interiorului cubului, schimbarea poziiei n interiorul cubului sau ieirea
din cub) se genereaz urmtoarele evenimente:
position_changed returneaz coordonatele 3D ale poziiei
utilizatorului;
orientation_changed returneaz orientarea utilizatorului n
sistemul de coordinate;

M5.U3.7. Noduri speciale


DEF denumirea unui nod n VRML
n VRML se permite denumirea de grupuri de noduri sau redefinirea unor noduri deja
existente prin adugarea unor cmpuri noi la cele deja existente. Procesul de definire este cu
adevrat folositor atunci cnd este nevoie de aducerea unor modificri n interiorul definiiei
nodului, deoarece acestea se vor mregistra o singur dat (n cadrul definiiei) i nu n fiecare
instan al nodului definit.
Sintax:
{
DEF name node
}
Nodul astfel creat poate fi apelat folosind sintaxa:
{
USE name
}
Nodul Inline
Sintax:
Inline {
url []
bboxCenter 0 0 0
bboxSize -1 -1 -1
}
Semantic:

217

VRML permite ca lumea virtual s fie mprtiat n mai multe fiiere .wrl, astfel
nct codul s fie mai lizibil i gradul su de reutilizabilitate s fie crescut. Nodul Inline
permite definirea unui URL de unde browserul poate extrage datele necesare construciei
lumii 3D (URL-ul trebuie s conin calea absolut ctre un fiier VRML complet i corect).
Inline conine urmtoarele cmpuri:
- url specific locaia fiierului care va fi folosit pentru construcia lumii VRML,
se permite specificarea listelor de locaii, unde browserul poate cuta un anumit
fiier .wrl;
- bboxCenter are aceeai semnificaie ca i n cazul nodului Anchor;
- bboxSize - are aceeai semnificaie ca i n cazul nodului Anchor;
Nodurile definite n cadrul unui fiier VRML folosit n construcia unei lumi 3D
complexe, formate din fiiere multiple, nu sunt recunoscute i n exteriorul acelui fiier.
LOD (Level Of Detail )Node
Sintax:
LOD {
level []
center 0 0 0
range []
}
Semantic:
Nodul LOD permite ca un obiect VRML s fie reprezentat n mai multe versiuni la care
difer doar gradul de reprezentare ale detaliilor acelui obiect, n funcie de distana la care
acesta se afl de utilizator.
Nodul LOD are urmtoarele cmpuri:
- level reprezint multimea de reprezentri posibile ale obiectului VRML;
- center conine coordonatele unui punct 3D n funcie de care se va calcula
distana fa de obiectul reprezentat;
- range cuprinde o mulime de valori reale ce reprezint distanele fap de obiect,
n ordine cresctoare; valorile trebuie s fie mai mari sau egale dect 0.

M5.U3.8. Interpolare n VRML


Operaia de interpolare se refer la definirea unei legturi directe dintre o cheie (key) i
o valoare a cheii (keyValue). Cheia poate avea valori cuprinse ntre 0.0 i 1.0, iar keyValue
poate fi reprezentat de orice tip de dat n funcie de tipul interpolrii. VRML permite
urmtoarele tipuri de interpolri:
- ColorInterpolator
- CoordinateInterpolator
- NormalInterpolator
- OrientationInterpolator
- PositionInterpolator
- ScalarInterpolator
Fiecare dintre aceste noduri are un eveniment eventIn de tip set_fraction (este acel
eveniment ce produce modificrile la nivelul nodului vizat) i un eventOut value_changed
218

(care reflect modificrile realizate). Legtura ntre cele dou evenimente este realizat de
ctre cheie: set_fraction stabilete valoarea ei, iar value_changed reacioneaz verificnd
valoarea lui keyValue, direct asociat cheii.
Operaiile de interpolare combinate cu efectele senzorului TimeSensor rezult n apariia
de lumi virtuale animate (lumi care conin variaii de culori, obiecte ce se metamorfozeaz
etc.). Modul de funcionare al acestor dou noduri este urmtorul: TimeSensor are un
eveniment fraction_changed care poate fi legat de evenimentul set_fraction, folosind operaia
de rutare a evenimentelor (ROUTE). Interpolatorul va genera un eveniment value_changed
care poate fi legat prin rutare de una din cmpurile expuse ale unui nod obinuit. Rezultatul
final const n modificarea unei anumite proprieti al obiectului VRML (culoare, mrime,
poziie etc.), odat cu trecerea timpului.
Cmpurile nodurilor de interpolare sunt key[] i value[], valorile alocate acestor cmpuri
avnd urmtoarea semnificaie: set_fraction primete ca parametru valorile din key[], atunci
valoarile returnate prin eveneimentul value_changed este keyValue.
Nodul ColorInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de valori RGB i care
are ca efect modificarea culorii obiectului VRML asupra cruia se aplic.
Sintax:
ColorInterpolator {
key [ ]
keyValue[ ]
}
Nodul CoordinateInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de coordonate 3D i
care are ca efect un control deplin asupra punctelor ce definesc orice obiect VRML, crend
senzaia de metamorfoz al acelui obiect.
Sintax:
CoordinateInterpolator {
key [ ]
keyValue[ ]
}
Nodul NormalInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de vectori 3D i
permite utilizatorului s modifice normalele definite n cadrul unui nod Normal.
Sintax:
NormalInterpolator {
key [ ]
keyValue [ ]
}
Nodul OrientationInterpolator

219

Este un nod de interpolare care n cmpul keyValue conine o list de parametri de


rotaie 3D (un set de coordonate 3D i un unghi de rotaie). Este folosit pentru crearea de
animaii prin rotaia obiectelor VRML asupra crora se aplic.
Sintax:
OrientationInterpolator {
key [ ]
keyValue[ ]
}
Nodul PositionInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de coordonate 3D i
care are ca efect animaia obiectelor VRML asupra crora se aplic prin deplasarea lor pe ruta
definit n keyValue.
Sintax:
PositionInterpolator {
key [ ]
keyValue[ ]
}
Nodul ScalarInterpolator
Este un nod de interpolare care n cmpul keyValue conine o list de valori reale
folosite pentru modificarea oricrui cmp expus cu valori reale (de exemplu: viteza cu care se
red un film sau sunet dac se modific valoarea cmpului speed).
Sintax:
ScalarInterpolator {
key [ ]
keyValue[ ]
}

S se realizeze o main n micare n VRML.

M5.U3.9. Rezumat
Grafica 3D pe web are avantaje deosebite, deoarece utilizatorii internetului
prefer ca paginile web vizitate s fie animate, dinamizate i interactive, iar cu
ajutorul graficii 3D acest lucru a devenit posibil.
Codul VRML se scrie n fiiere care se salveaz cu extensia ".wrl", iar
redactarea acestuia se poate face n orice editor de text sau cu ajutorul unui builder
VRML. Structura general a unui fiier VRML este dat de urmtoarele seciuni:
220

1. headerul #VRML V2.0 utf8


2. comentarii precedate de caracterul #
3. noduri
Nodul este obiectul de baz al codului VRML.
Principalele noduri sunt: Box, Sphere, Cone, Cylinder, Text, FontStyle,
Material, Appearance, PointLight, SpotLight, DirectionalLight, Group, Transform,
TimeSensor, TouchSensor, ProximitySensor, etc.
Aceste noduri permit adugarea de obiecte, colorarea i acoperirea acestora cu
diferite texturi, poziionarea sau micarea obiectelor.
M5.U3.10. Test de evaluare a cunotinelor
Alegei rspunsul corect la urmtoarele ntrebri:
1. Care dintre urmtoarele variante reprezin produse software pentru
realizarea graficii 3D?
a. 3ds Max, Lightwave 3D, Macromedia (Adobe) Flash
b. Maya, Macromedia (Adobe) Flash, JavaScript
c. PHP, Lightwave 3D, Macromedia (Adobe) Flash
2. Obiectele vizibile create n VRML se definesc folosind nodul:
a. Material
b. Appearance
c. Shape
3. Desenarea unei linii frnte n VRML se face cu ajutorul nodului:
a. Cone
b. IndexedLineSet
c. Cylinder
4. Proprietile de afiare ale textului n VRML se definesc folosind nodul:
a. Appearance
b. FontStyle
c. TextStyle
5. Pentru a specifica culoarea, modul de reflecie i transparena materialului
aplicat unui corp geometric se folosete nodul:
a. Transparency
b. ImageTexture
c. Material
6. Pentru a specifica intensitatea luminii n cadrul nodului DirectionalLight:
a. Se seteaz proprietatea intensity cu o valoare ntre 0 i 1
b. Se seteaz proprietatea intensity cu o rice valoare ntreag
c. Se seteaz proprietatea light cu o valoare negativ
Rspunsuri corecte: 1a, 2c, 3b, 4b, 5c, 6a
221

Tem de control
Rspundei la urmtoarele ntrebri:
1. Care este sintaxa instruciunii foreach din limbajul PHP? Dai un exemplu de
utilizare a acestei instruciuni.
2. Precizai cteva funcii matematice utilizate n PHP.
3. Care este sintaxa instruciunii abs din limbajul PHP?
4. Care este sintaxa instruciunii pow din limbajul PHP?
5. Care sunt domeniile de aplicaii pe Internet n care se poate folosi Flex?
6. Ce este limbajul MXML?
7. Enumerai diferenele dintre VRML 1.0 i VRML 1.2.
8. Care este sintaxa elementului Node Shape?
9. Care este sintaxa elementului Node Cylinder?
10. Care sunt avantajele i dezavantajele folosirii elementelor grafice pe web?
11. Ce utilizare are elementul Node Position Interpolator?
Rspunsul va fi redactat n Word i va fi transmis prin email profesorului care
ine laboratorul. Nota pe aceast tema va reprezenta 1/4 din nota final de
laborator

222

Modulul VI. Prelucrarea imaginilor cu Gimp 2.6


Cuprins
Introducere .................................................................................................................. 223
Competene ................................................................................................................. 223
U1. Concepte de baz n Gimp 2.6. ............................................................................ 224

Introducere
GIMP (GNU Image Manipulation Program este un program software pentru
prelucrarea imaginilor. GIMP poate fi utilizat la cele mai simple prelucrari de
imagini, cum ar fi luminozitate, contrast, filtre RGB, pana la realizarea celor mai
complexe colaje de imagini, efecte, GIF-uri animate, care pot fi incorporate ntr-o
pagin web.
GIMP este disponibil gratuit pentru diferite sisteme de operare. Cele mai multe
distribuii Linux includ GIMP ca aplicaie standard. Programul este disponibil de
asemenea si pentru Microsoft Windows si Apple. GIMP este un software gratuit
care detine o licen de utilizare public numit General Public License.
Competene
La sfritul acestui modul studenii vor fi capabili s:
utilizeze un program pentru prelucrarea imaginilor
neleag principiile de baz ale prelucrrii imaginilor: luminozitate,
contrast, poziionarea subiectului
realizeze logo-uri, bannere, GIF-uri animate, care pot fi incorporate ntr-un
site web
creeze bannere statice sau animate pentru pagini web
utilizeze diferite efecte de animaie oferite de GIMP

223

U1. Concepte de baz n GIMP 2.6


Cuprins
U1.1. Introducere................................................................................................................ 224
U1.2. Obiectivele unitii de nvare................................................................................. 224
U1.3. Ferestre de lucru n GIMP 2.6 .................................................................................. 224
U1.4. Lucrul cu imagini: salvare, dimensionare, comprimare, decupare, rotire ................ 226
U1.5. Crearea unui logo ..................................................................................................... 229
U1.6. Crearea unui banner.................................................................................................. 229
U1.7. Realizarea unui GIF animat ...................................................................................... 230
U1.8. Lucrul cu filtre n GIMP ........................................................................................... 233
U1.9. Animaii complexe ................................................................................................... 236
U1.10. Rezumat .................................................................................................................. 237
U1.11. Test de evaluare a cunotinelor ............................................................................. 238

M6.U1.1. Introducere
GIMP ofer o varietate de instrumente pentru prelucrarea imaginilor:
dimensionare, comprimare, decupare, rotire, luminozitate.
M6.U1.2. Obiectivele unitii de nvare
Aceast unitate de nvare i propune ca obiectiv principal o iniiere a
studenilor n instrumentele de lucru oferite de GIMP.
La sfritul acestei uniti de nvare studenii vor fi capabili s:
utilizeze ferestrele de lucru ale programului de prelucrare a imaginilor
GIMP
salveze o imagine ntr-un format cat mai potrivit pentru a putea fi utilizat
ntr-un site web
realizeze logo-uri, bannere, GIF-uri animate, care pot fi incorporate ntr-un
site web
utilizeze diferite efecte de animaie oferite de GIMP

Durata medie de parcurgere a primei uniti de nvare este de 2 ore.

M6.U1.3. Ferestre de lucru n GIMP 2.6


GIMP ofer o varietate de modaliti de prelucrare a imaginilor i suport fiiere avnd
extensiile: .GIF, .JPG, .TIF, .PNG, .XCF. Dintre acestea, sursa de lucru are extensia .XCF, iar
celelalte tipuri de imagini se obin prin operaia de export.

224

O imagine GIMP conine mai multe obiecte, fiind similar cu o carte avnd mai multe
pagini, numite straturi (layers). Pe lng acestea, imaginea mai poate conine o mulime de
canale (channels).
Straturi (layere)
Straturile reprezint foi suprapuse i sunt utilizate pentru a facilita manipularea
imaginilor. Straturile pot fi ascunse, terse sau transparente.
Canalele (channels)
Canalele sunt utilizate pentru a face modificri la nivel de culoare, spre exemplu
stergerea efectului de ochi roii.
Seleciile (selection)
Sunt utilizate pentru a selecta o anumit parte dintr-o imagine. n GIMP exist trei
tipuri de selectori: dreptunghiular (rectangular selection), sub form de elips (elipse
selection) i form neregulat (lasso selection).
Ferestre de lucru n GIMP 2.6
Cele mai importante ferestre de lucru sunt:
1. Toolbox conine instrumentele de lucru
2. Canvas suprafaa de lucru
3. Gradients conine butoane pentru utilizarea schemelor de culori
4. Fereastra Layers, Channels, Paths
n figura 1 sunt prezentate ferestrele de lucru.

225

Fig. 1 Ferestrele de lucru n GIMP

Pentru activarea sau dezactivarea butoanelor din bara de instrumente, se utilizeaz


opiunea Edit Preferences.

M6.U1.4. Lucrul cu imagini: salvare, dimensionare, comprimare, decupare, rotire


Salvarea unei imagini
n GIMP se utilizeaz opiunea File Export, din care se poate alege o varietate de
formate: .GIF, .JPG., .EPS., ICO., PNG, etc. In timpul exportului se poate seta calitatea
imaginii, care trebuie s fie ct mai buna (figura 2).

226

Fig.2 Setarea parametrului Quality

Informaii despre o imagine


Se deschide o imagine in GIMP utiliznd opiunea File Open. Din meniul Image se
alege opiunea Image Properties, care va deschide o fereastr coninnd urmtoarele
informaii: dimensiunea imaginii n pixeli (Size in pixels), rezoluia (Resolution),
dimensiunea (File size), tipul imaginii (File type), numrul de straturi (Number of layers), etc.
Dimensionarea unei imagini
Se realizeaz cu opiunea Image Scale Image. Se deschide o fereastr ca n figura 3,
n care se pot seta noile dimensiuni ale imaginii: limea (Width), nlimea (Height) n pixeli
sau cm, precum i rezoluia imaginii.

Fig. 3 Dimensionarea unei imagini

227

Comprimarea unei imagini


Se realizeaz cu File- Save As JPG. Se seteaz parametrul Quality, spre exemplu valoarea
10 nseamn o imagine de dimensiune mai mica, iar valoarea 40 nseamn o imagine de dimensiune
mai mare dar de o calitate mai ridicat.
Decuparea unei imagini
Se selecteaz o parte din imagine, folosind instrumentul de selecie, apoi se utilizeaz opiunea
Image Crop to Selection sau butonul Crop din bara de instrumente.
Rotirea unei imagini
Se utilizeaz opiunea Image Transform, cu posibilitile: Flip Horizontally, Flip
Vertically, Rotate 90 Clockwise, etc.
Modificarea luminozitii unei imagini
Se utilizeaz opiunea Colors Brightness Contrast.

S se deschid n GIMP o imagine cu oraul Braov. S se salveze n format


.JPG, cu Quality 100%. S se regleze contrastul i luminozitatea imaginii.
Rspundei la urmtoarele ntrebri:
1.Ce tipuri de fiiere suport GIMP?
2. Ce reprezint canalele (channels)?
3. Ce reprezint straturile (layers)?
4. Ce comenzi se folosesc pentru rotirea unei imagini n GIMP?
5. Cum se realizeaz decuparea unei imagini?
6. Ce reprezint scalarea unei imagini i cum se poate realiza?
7. Cum se utilizeaz parametrul Quality la salvarea unei imagini n format .GIF?
8. Ce butoane conine fereatra Tool Box?
9. Ce proprieti ale unei imagini se pot vedea folosind comanda Image Properties
din meniul Image?
10. Cum se poate modifica luminozitatea unei imagini?

228

M6.U1.5. Crearea unui logo


Temenul logo reprezint un simbol grafic, un nume, creat pentru recunoaterea unei
anumite mrci.
Pentru a realiza o imagine de tip logo n GIMP, se parcurg urmtorii pai :
1.File Create Logos
2.Se alege tipul de logo (Exemplu : Blended)
3.Se salveaz logo-ul cu File Save As sau File Export.
Pentru crearea unui buton, se parcurg aceiai pai, ns folosind opiunea File Create
Buttons.
M6.U1.6. Crearea unui banner
Termenul de banner reprezint o imagine de tip reclam. Bannerul poate fi static sau
animat, caz n care necesit utilizarea straturilor, efectelor de culoare i efectelor de animaie.
Pentru a realiza o imagine de tip banner n GIMP, se parcurg urmtorii pai :
1. File New Template Web banner common
2. Se deschide imaginea de fundal ca layer: File Open as Layers Open Image
3. Se scaleaz imaginea astfel: Image Scale Image sau Toolbox Scale Tool
4. Se adaug text folosind butonul corespunztor din Toolbox sau alte imagini, deschise ca
strat nou (New Layer)
5. Se salveaz imaginea de tip banner
n figura 4 se prezint fereastra pentru crearea unui banner web.

Fig.4 Crearea unui banner

229

M6.U1.7. Realizarea unui GIF animat


Pentru a obine o imagine animat, se utilizeaz setarea Save as Animation din
fereastra de salvare (export) a imaginii. n acest caz imaginea trebuie s fie de tip GIF. n
figura 5 este prezentat fereastra de salvare ca imagine animat, n care opiunea Loop
forever asigur efectul de animaie permanent.

Fig. 5 Salvarea unei imagini ca .GIF animat

Exemplul 1
Crearea unui banner animat pentru produse din domeniul IT.
1.

230

Fig.6 Banner animat pentru produse din domeniul IT


Pentru a realiza acest banner n GIMP, mai nti se caut imaginile necesare: imaginea colorat

de pe fundal, o imagine cu sigla Apple i imaginea cu dou iPhone-uri. Pentru realizarea


acestui banner se urmeaz paii:
1. Se deschide aplicaia GIMP
2. Se midific dimensiunile imaginii de fundal astfel: Click dreapta -> Open with ->
Microsoft Office Picture Manager; din meniul Pictures se alege opiunea Resize ; din
fereastra aparut se alege Custom width and height i se seteaz imaginea la dimensiunile
dorite
3. Din meniul File al aplicatiei GIMP se alege opiunea Open as Layer
4. Se creaza un duplicat pentru Layerul de background
5. Folosind File - Open, se deschide imaginea cu sigla Apple; Pentru a putea selecta doar
sigla, fr fundal, se utilizeaz Fuzzy Select Tool din meniul Toolbox. Apoi se copiaz sigla
peste cel de-al doilea Layer.
6. Pentru a introduce textul Be different, din meniul Toolbox se utilizeaz Text Tool pentru a
crea fiecare litera a textului. Apoi se editeaz pe rnd fiecare litera astfel:
Se selecteaz litera
Din meniul Tool Option afisat in partea dreapta se seteatz fontul, mrimea i
culoarea

231

Dup formatarea literelor, se aeaz astfel nct acestea s compun un text coerent
7. Se selecteaz Layerul de background, i se mut dup ultimul Layer (cu litera t)
8. Se selecteaz Layerul al doilea, cel cu sigla Apple i se mut deasupra celorlalte
9. Pentru a introduce textul Be different, se repet paii 6 i 7
10. Se urmeaz pasul 4 de 2 ori
11. Din meniul File - Open se deschide imaginea cu cele 2 iPhone-uri. Din meniul Tool Box
aflat in dreapta ecranului se utilizeaz butonul Scissors Select Tool cu care se contureaz
imaginea. Se copiaz imaginea n ultimul Layer din proiect
12. Se salveaz bannerul animat astfel:
File Export
Se selecteaz extensia GIF image ( din Select File_Type )
Exemplul 2
Crearea unui banner animat cu urri de Srbtori.

Fig.7 Banner animat pentru Srbtori

Pentru realizarea acestui banner se urmeaz paii:


1. Se creaz n GIMP o pagin nou cu formatul 640 x 300 px
2. Se deseaz o form geometric oarecare cu ajutorul tool-ului de path
3. Forma creat a fost duplicat i apoi ntoars pentru a o pune n partea de sus a
banner-ului
4. Cele dou forme se coloreaz cu rou gradiant
5. n interiorul banner-ului se introduce textul Srbtori fericite!, fiecare liter fiind pe
cte un Layer separat
6. n final se insereaz sub form de text, simbolul * care simuleaz fulgii de zpad
pe ntregul banner
7. La sfrit se salveaz banner-ul n formatul .GIF animat, setnd opiunea Save as
Animation din fereastra Save...

232

S se creeze n GIMP un logo i un banner animat pentru o companie de


turism.
Rspundei la urmtoarele ntrebri:
1. Ce comenzi se folosesc pentru crearea unui buton n GIMP?
2. Cum se realizeaz un GIF animat?
3. Cum se realizeaz un banner n GIMP?
4. Ce semnificaie are opiunea Loop forever din fereastra de salvare a unei imagini
ca GIF animat?
5. Cum se redimensioneaz o imagine n GIMP?

M6.U1.8. Lucrul cu filtre n GIMP


n terminologia GIMP, un filtru este un plug-in care modific modul de afiare a unei
imagini, n cele mai multe cazuri doar pentru layerul curent. Excepie fac primele trei filtre
din meniul Filters, restul filtrelor fiind plug-ins. n continuare prezentm cateva filtre care pot
fi aplicate n prelucrarea imaginilor (figura 8).

Filtrul Blur
Filtrul Blur produce un efect similar cu cel al unei camere foto. Acest filtru se utilizeaz cel
mai bine pentru imagini mari, deoarece el este foarte puin perceptibil pe imagini de
dimensiune mic.

233

Fig. 8 Meniul Filters din GIMP


Filtrul Gaussian Blur
Acest filtru acioneaz pe fiecare pixel layer-ului curent sau al seleciei. Efectul obinut
depinde de valoarea Blur Radius, aa cum se observ n figura 9. GIMP suport dou variante de

Gaussian Blur: IIR G.B. i RLE G.B. n figura 10 se prezint imaginea original i imaginea
obinut dupa aplicarea filtrului Gaussian Blur.

Fig. 9 Setrile pentru filtrul Gaussian Blur

234

Fig. 10 Aplicarea filtrului Gaussian Blur

Filtrul Motion Blur


Filtrul Motion Blur creaz un efect de micare. Tipurile de micare acceptate sunt :
Linear, Radial i Zoom, fiecare dintre acestea putnd fi ajustate folosind Length i Angle.

Fig. 12 Imaginea obinut prin aplicarea filtrului Motion


Blur

Fig. 11 Setrile filtrului Motion Blur

235

Crearea unui colaj de imagini de tip diafilm


Se parcurg urmtorii pai:
1. Open - File, se selecteaz mai multe imagini, cu ajutorul tastei SHIFT
2. Fiecare imagine se va deschide ntr-o fereastr separat; se selecteaz Filters
Combine FilmStrip
3. Se introduc imaginile dorite n diafilm folosind butonul ADD
4. Imaginea final va fi o combinaie de imagini de tip diafilm, care se salveaz cu
extensia .GIF

Fig. 13 Colaj de imagini de tip Film Strip

M6.U1.9. Animaii complexe


Exemplul 1
Efectul de ap - animaie.
Se parcurg urmtorii pai:
1. File New
2. Pentru obinerea imaginii cu apa, se utilizeaz: Filter Render Clouds Difference
Clouds New Seed
3. Se seteaz opiunile Turbulent i Detail:2
4. Pentru colorarea imaginii cu albastrul specific apei: Select All Colors Color Balance;
se seteaz parametrii Cyan-Red:-15 i Yellow-Blue:15
5. Efectul de animaie a apei se realizeaz astfel: Filters Animation Waves; se seteaz
parametrii Amplitude: 2.6 i Wave length: 20
6. Rularea animaiei: Filters Animation Playback

236

7. Se salveaz imaginea ca .GIF animat


Exemplul 2
Animaia textului INFORMATIC.

Se parcurg urmtorii pai:


1. Se deschide o imagine nou n GIMP
2. Se insereaz pe rnd literele textului INFORMATIC, n layere diferite, folosind
butonul Text Tool din Tool Box
3. Dup fiecare layer coninnd o liter, se insereaz un layer de tip Background, folosind
butonul Create a New Layer
4. Se ruleaz animaia astfel: Filters Animation Playback
5. Se salveaz imaginea ca .GIF animat
S se deschid realizeze n GIMP o animaie a textului BRASOV,
ORA DE POVESTE.

M6.U1.10. Rezumat
GIMP ofer o varietate de modaliti de prelucrare a imaginilor i suport fiiere
avnd extensiile: .GIF, .JPG, .TIF, .PNG, .XCF
O imagine GIMP conine mai multe obiecte, fiind similar cu o carte avnd mai
multe pagini, numite straturi (layers). Pe lng acestea, imaginea mai poate conine o
mulime de canale (channels).
Cele mai importante ferestre de lucru n GIMP sunt:
Toolbox conine instrumentele de lucru
Canvas suprafaa de lucru
Gradients conine butoane pentru utilizarea schemelor de culori
Fereastra Layers, Channels, Paths
Logo-uri i butoane n GIMP:

Pentru a crea un logo n GIMP se utilizeaz File Create Logos


Pentru a crea un buton n GIMP se utilizeaz File Create Buttons
Lucrul cu filtre in GIMP:
Un filtru este un plug-in care modific modul de afiare a unei imagini

Utilizarea filtrelor este foarte important pentru obinerea lor de

237

animaie complexe
Animaiile se ruleaz astfel: Filters Animation Playback
M6.U1.11. Test de evaluare a cunotinelor
Alegei rspunsul corect la urmtoarele ntrebri:
1. GIMP este acronimul de la:
a. Graphic Image Manipulation Program
b. GNU Image Manipulation Program
c. Graphic Image Manipulation Product
2. Pentru a selecta o anumit parte dintr-o imagine folosim seciunea
a. Channel
b. Layer
c. Selection
3. Butoanele pentru utilizarea schemelor de culori se gsesc n fereastra
a. Gradient
b. Toolbox
c. Brushes
4. Redimensionarea unei imagini se poate face astfel:
a. Se introduc noile dimensiuni n fereastra Layers
b. Se selecteaz din meniu Image, apoi Scale Image i se introduc noile
dimensiuni
c. GIMP nu ofer suport pentru redimensionarea unei imagini
5. Pentru a modifica luminozitatea unei imagini, folosim opiunile:
a. Colors Brightness Contrast
b. Colors Lightening
c. Colors Images Brightness
6. Cum se salveaz o imagine sub form de animaie n GIMP?
a. Din fereastra de export a imaginii se alege opiunea Export
Animation
b. Din fereastra de export a imaginii se alege opiunea Save as Animated
Gif
c. Din fereastra de export a imaginii se alege opiunea Save as
Animation
7. Pentru a realiza o imagine cu animaie permanent se folosete opiunea:
a. Loop forever
b. Cycle animation
c. Animation loop
8. Filtrul Gaussian Blur se aplic:

238

a. Pe imagine ca i ansamblu
b. Pe fiecare pixel din imagine
c. Doar pe imaginile alb-negru
9. Pentru crearea unui colaj de imagini de tip diafilm se aplic opiunea:
a. Filters Slide Show
b. File Save as... Presentation
c. Filters Combine FilmStrip
10. Efectul de animaie a apei se realizeaz astfel:
a. Filters Animation Waves
b. Filters Animation Water Move
c. Filters Aqua Moves
Rspunsuri corecte: 1b, 2c, 3a, 4b, 5a, 6c, 7a, 8b, 9c, 10a

239

Bibliografie
1. Duckett, J., HTML and CSS: Design and Build Websites, John Wiley & Sons Inc.,
Indianapolis, Indiana, 2011
2. Sanders, B.W., Smashing HTML 5, John Wiley & Sons, United Kingdom, 2011.
3. http://www.gimp.org/tutorials/
4. http://http://docs.gimp.org/2.8/en/
5. http://getbootstrap.com/2.3.2/getting-started.html

240

Você também pode gostar