Escolar Documentos
Profissional Documentos
Cultura Documentos
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
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:
computer
conexiune la Internet
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:
-
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
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
12
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...
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.
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
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
Brasov
Dac complicm problema, adic mai ngrom alte elemente, vom vedea c ne vom
plimba privirea ntre cuvintele ngroate.
(0268) 956419
Brasov
19
20
( 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.
22
Integralist
Depunere dosar care s cuprind :
o
CV,
o
Scrisoare de intenie,
o
situaia colar
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...
M1.U1.10. Rezumat
24
25
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.
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
27
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.
28
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
30
CORECT
INCORECT
<tag1>
<tag1>
<tag2>
<tag2>
</tag2>
</tag1>
</tag1>
</tag2>
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}
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
34
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
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
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
40
41
42
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
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
46
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
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
51
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
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
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
56
57
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
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
63
64
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
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.
Exemplu
Alinierea unei imagini pe vertical:
66
67
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
70
71
72
73
74
75
76
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
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
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.
79
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
<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
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
82
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
84
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.
85
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.
86
Competene
La finalul acestui modul, studenii vor putea s:
87
88
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>.
89
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
Exemplu
Stiluri pentru paragrafe i titluri (heading-uri)
P { font-size: 120% }
H1, H2, H3 { font-style: italic }
2.
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
94
factor de scal
prin lungime
prin procente din valoarea curent a fontului
<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>
95
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 %)
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%
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
98
99
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.
100
Stiluri inline
102
103
104
105
106
107
109
110
111
Vom observa c meniul s-a realizat doar cu ajutorul unei liste neordonate i al stilurilor
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
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.
120
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:
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
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.
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 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
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.
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.
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 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
19T
19T
19T
if
switch;
while;
do while
for
Funcii predefinite
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:
131
document
_______________________________________________
images[0]
forms[0]
links[0]
images[1]
___________________
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     :<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
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.
135
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
137
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
138
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
11
12
13
14
15
16
METODA
DESCRIERE
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:
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
read
read
read, write
METODA
DESCRIERE
close()
open()
write(s)
142
writenln(s)
Obiecte derivate din obiectul document: all, anchors, applets, areas, embeds, forms,
images, layers, links, plugins.
Aplicaie:
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()
PROPRIETATE DESCRIERE
encoding
length
action
ACCES
143
read, write
read, write
read
method
name
target
read, write
read, write
read, write
METODA
DESCRIERE
reset()
submit()
Exemplu
Exemplu de aplicaie mai complex n JavaScript
144
2.
PROPRIETATE DESCRIERE
Complete
3
4
Height
Hspace
5
6
7
8
Length
Lowsrc
Name
Src
Vspace
10
width
Border
ACCES
read
read
read
read
read
read
read
read
read
read
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
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.
2.
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
4
5
6
7
8
9
METODE
DESCRIERE
147
10
resizeTo(p1,p2)
11
routeEvent()
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
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
5
6
METODA
DESCRIERE
149
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)
pow(x,y): x la puterea y
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].
151
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
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
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
155
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.
156
157
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: <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
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>
</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
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.
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">    
Imaginar(z):<input type ="text" name="Input2" value="0"><br>
167
168
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
Tem de control
Rspundei la urmtoarele ntrebri:
1. Care sunt operatorii aritmetici utilizai n JavaScript? Dai un exemplu de
utilizare a acestora.
170
171
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
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).
173
174
<?php
phpinfo();
?>
Lansm fiierul din browser astfel: http://localhost/my.php
Pe ecran se va afia urmtoarea pagin:
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:
176
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";
?>
177
178
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
181
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
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.
184
185
Formularul rezultat n urma compilrii codului de mai sus este cel imediat urmtor:
186
187
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.
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.
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
191
192
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)
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
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
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)
198
199
200
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
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
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
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;
211
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
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
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
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.
(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
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
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
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
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
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
226
227
228
229
Exemplul 1
Crearea unui banner animat pentru produse din domeniul IT.
1.
230
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.
232
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
Gaussian Blur: IIR G.B. i RLE G.B. n figura 10 se prezint imaginea original i imaginea
obinut dupa aplicarea filtrului Gaussian Blur.
234
235
236
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:
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