D

EM

L
O EC
N }
ST I
R E
AT
IV

INTRODUCERE
V-a]i putea imagina o lume f\r\ Internet?
A]i c\utat o informa]ie cu ajutorul unui motor de c\utare [i a]i g\sit o pagin\ Web
care v-a atras aten]ia?
A]i dori s\ v\ valorifica]i imagina]ia [i creativitatea realiznd asemenea pagini de
Web?
Vre]i s\ lucra]i ntr-un domeniu aflat ntr-o continu\ dezvoltare?
Ave]i o firm\, a]i dori s\ v\ extinde]i, s\ v\ face]i reclam\ prin intermediul Internetului
[i de aceea ave]i nevoie de o pagin\ Web?
Dac\ r\spunsul este DA, atunci trebuie s\
v\ nscrie]i la cursul Eurocor de Web Design.
Internetul a devenit un serviciu indispensabil
pentru majoritatea dintre noi. Fie c\ l folosim
n scopuri profesionale (la serviciu) sau n
scopuri personale, acesta ne ofer\ o infinitate
de informa]ii din absolut toate domeniile,
posibilitatea de a comunica cu persoane din
ntreaga lume, ct [i felurite modalit\]i de
amuzament [i distrac]ie.
ns\ la ce v\ este util cursul nostru de Web design?
Scopul cursului este de a v\ ajuta s\ deprinde]i cuno[tin]ele teoretice [i practice
necesare realiz\rii unor pagini Web ct mai atr\g\toare. Astfel:

ve]i face cuno[tin]\ cu limbajul de programare HTML;

ve]i nv\]a s\ crea]i coduri surs\;

ve]i [ti s\ introduce]i elemente multimedia n cadrul paginii Web (grafic\ [i

anima]ie);

ve]i deprinde modul n care pute]i folosi serviciile de re]ea, precum WWW,
WAP, po[t\ electronic\;

ve]i `nv\]a s\ folosi]i un sistem de monitorizare ieftin, dar complet func]ional,

bazat pe o video-camer\;

dac\ sunte]i interesa]i de publicitate, ve]i afla cum se realizeaz\ o campanie

promo]ional\ de succes printre utilizatorii re]elei Internet.

Cu alte cuvinte, v\ oferim totul pentru a deveni un adev\rat web designer, pentru a
avea un job de viitor n care s\ v\ dezvolta]i creativitatea.

lec]ie demonstrativ\

Web design

Cursul este compus din 16 module de studiu [i cuprinde o mul]ime de exerci]ii

practice care v\ vor ajuta s\ v\ pune]i n valoare cuno[tin]ele dobndite. Modalitatea
accesibil\ de prezentare a informa]iei permite chiar [i celor neini]ia]i n domeniul
program\rii nsu[irea rapid\ [i f\r\ dificult\]i a materialului de studiu. n plus, pentru
un randament ridicat n nsu[irea temeinic\ a cursului nostru, exemplele [i exerci]iile
cu un grad ridicat de complexitate cuprinse n curs, precum [i anumite programe
care v\ vor ajuta n realizarea efectiv\ a paginii Web, vor fi nregistrate pe
CD-ROM-uri care vor fi anexate materialului de studiu. Pentru a v\ u[ura `nv\]area,
lec]iile cuprind numeroase capturi de imagini, scheme, figuri [i tabele, care aduc
un plus de atractivitate cursului. La sfr[itul fiec\rui modul este inserat\ tema pentru
acas\, care cuprinde att ntreb\ri teoretice, ct [i exerci]ii practice [i aplica]ii care
vor testa gradul de nsu[ire a materialului. Formularul de tem\ completat se va
trimite apoi profesorului personal care v\ va `ndruma pe toat\ perioada studiului cu
observa]ii, sugestii [i eventuale recomand\ri. EUROCOR v\ pune, de asemenea, la
dispozi]ie, un cont de e-mail al profesorului unde v\ pute]i trimite rezolvarea temei.
Ve]i putea ob]ine rezultate remarcabile prin studierea zilnic\ a acestui curs, timp de
cel pu]in 15 minute. Numai n acest mod ave]i posibilitatea de a face progrese
rapide [i de a deveni un specialist n realizarea paginilor Web!
Pentru ca studiul individual s\ fie ct mai u[or [i eficient, pe marginea lec]iilor au
fost introduse diferite simboluri:

semnaleaz\ no]iunile, defini]iile [i informa]iile importante

semnaleaz\ exerci]iile pe care trebuie s\ le rezolva]i

3 (18)

indic\ faptul c\ tema respectiv\ a mai fost abordat\ n modulele anterioare

(n acest caz, tema a mai fost abordat\ n modulul 3, la pagina 18).

Lec]ia de fa]\ este o lec]ie demonstrativ\ care dore[te s\ v\ familiarizeze cu metoda

de studiu EUROCOR. Ve]i g\si aici fragmente din structura modulelor acestui curs
[i un exemplu de tem\, care, `n acest caz, nu trebuie trimis\ pentru corectur\. Din
punctul de vedere al num\rului de pagini, ea reprezint\ mai pu]in de jum\tate din
con]inutul unui caiet de studiu.

Web design

lec]ie demonstrativ\

Programa cursului de
Web Design
Modulul 1

Introducere n crearea paginilor Web. Modalit\]i de acces la Internet.

Motorul de c\utare pe Internet. Serverul WWW. Hipertextul.
Modalit\]i de redactare a documentelor HTML. Sintaxa
documentelor HTML. Descrierea anumitor elemente indicatoare
HTML. Prima mea pagin\ Web.

Modulul 2

Documente HTML complexe. Descrierea elementelor indicatoare

HTML (continuare). Construc]ia documentelor complexe `n limbajul
HTML.

Modulul 3

Grafic\ pe paginile Web. Formatele implement\rii grafice pentru

cerin]ele Web. Instrumente orientate c\tre construc]ia elementelor
grafice ale paginilor Web, de exemplu clape [i bannere de reclam\.
Crearea efectelor de anima]ie.

Modulul 4

Pagini de stiluri `n cascad\, CSS. Descrierea principiilor de folosire

a paginilor de stiluri `n cascad\. Sintaxa documentelor CSS. Editoare
de pagini CSS. Construc]ia paginilor proprii CSS [i legarea lor cu
documentele HTML.

Modulul 5

Editorul limbajului HTML. Exemple textice [i grafice de medii care

faciliteaz\ codarea paginilor Web. Descrierea unui editor de HTML
ales. Verificarea corectitudinii sintaxei documentului HTML.

Modulul 6

Serverul WWW. Serverul po[tei electronice. Instalarea [i

administrarea serverului WWW ales [i a serverului de po[t\
electronic\ n mediul Windows. Crearea [i urm\rirea statisticilor
serverului.

Modulul 7

Video-camere de Internet. Principiile de folosire a video-camerelor

de Internet. Instalarea video-camerei. Transmiterea imaginii pe
serverul WWW. Monitorizarea obiectelor. Organizarea
videoconferin]elor.

Modulul 8

Programarea n limbajul PERL. Introducere n programare.

Descrierea instruc]iunilor limbajului PERL. Primele programe n
limbajul PERL.

Modulul 9

Interfa]a CGI. Ce nseamn\ CGI. Generarea dinamic\ a con]inutului

paginilor Web. Construc]ia scripturilor simple care fac atr\g\toare
paginile Web.

Modulul 10

Interac]iunea cu vizitatorul paginii Web. Colectarea de informa]ii

despre preferin]ele clientului, precum [i personalizarea con]inutului
[i a modului de prezentare. nregistrarea informa]iilor de la client n
baza de date. C\ut\ri pe Internet.

lec]ie demonstrativ\

Web design

Modulul 11

JavaScript programare pe parte de client. HTML-ul dinamic

(DHTML). Sintaxa limbajului JavaScript. Exemple de folosire
ingenioas\ a aplica]iilor JavaScript pe paginile Web.

Modulul 12

Magazin virtual pe Internet. Descrierea schemei de func]ionare a

magazinului. Construc]ia aplica]iei magazinului virtual pe Internet
n limbajul PERL.

Modulul 13

Cteva tehnici de promovare a paginilor de Internet; reclama pe

paginile Web. nregistrarea domeniului propriu. Sisteme de c\utare
a informa]iilor. Sisteme de schimb al bannerelor. Vederi electronice.
Contactul electronic cu clientul (e-mail, SMS, WWW, WAP).

Modulul 14

Accesul la Internet prin telefoanele mobile. Serviciile de acces la

Internet prin intermediul telefoanelor mobile. Protocolul WAP.
Limbajul de scriere a documentelor WML. Editorul [i motorul de
c\utare a documentelor WML. Construc]ia documentelor proprii n
limbajul WML.

Modulul 15

Siguran]a pe Internet. Modalit\]i de asigurare a serverului mpotriva

accesului nedorit. Codificarea documentelor Web trimise. Criptarea
po[tei electronice. Siguran]a tranzac]iilor financiare.

Modulul 16

Activit\]i on-line. ~nv\]area prin Internet. Organizarea virtual\. Idei

pentru `nceperea unei activit\]i proprii pe baza accesului la Internet.
C\utarea abil\ a informa]iilor.

Web design

lec]ie demonstrativ\

La `nceputul fiec\rui modul ve]i g\si o parte de introducere, `n care sunt prezentate
succint temele abordate `n cadrul acestuia. Iat\ un exemplu de introducere din
modulul 4.

MODULUL 4
Foi de stil n cascad\
Introducere
Administrarea con]inutului unui site complex poate fi o provocare major\. n grija
webmasterului intr\ att con]inutul diferitelor pagini, forma atr\g\toare a prezent\rii,
ct [i coeziunea stilurilor tuturor documentelor care compun respectivul site. Aceast\
problem\ cap\t\ o importan]\ deosebit\ [i un grad mare de dificultate n cazul n care
la realizarea site-ului nu lucreaz\ doar o persoan\, ci o echip\ de programatori Web.
n astfel de mprejur\ri, precizarea clar\ [i respectarea cu stricte]e a regulilor de
formatare a documentelor este o condi]ie esen]ial\ pentru a ncheia munca cu succes.
Cunoscnd principiile de construire a paginilor Web, p\[im pe urmele evolu]iei
limbajului de redactare a documentelor hipertext-HTML. n acest modul ne vom
concentra aten]ia asupra foilor de stil n cascad\ (lb. engl. Cascade Style Sheets,
CSS), un mecanism care permite separarea con]inutului documentului de modul
lui de formatare, urmnd ca `n capitolele urm\toare s\ v\ fie prezentate regulile de
definire a stilurilor, precum [i principiile de formatare a documentelor hipertext; exerci]iile
practice cu care sunt prev\zute aceste lec]ii v\ vor permite nsu[irea rapid\ a
cuno[tin]elor referitoare la folosirea stilurilor n cascad\ n cadrul proiectelor proprii.
Datorit\ mai multor probleme ap\rute, realizatorii limbajului HTML au propus o
solu]ie de separare a con]inutului [i structurii documentului de modul lui de
formatare. Ac]iunile ntreprinse n acest sens de c\tre World Wide Web Consortium
s-au materializat odat\ cu apari]ia unui nou standard, [i anume foile de stil `n cascad\
(CSS), care permit autorilor paginilor de WWW s\ anexeze descrierea stilului de
prezentare la structura documentelor (de exemplu, cele scrise n limbaj HTML). O
caracteristic\ important\ a standardului CSS este caracterul s\u universal, lundu-se
n considerare diferitele platforme de lucru. Acest standard permite, printre altele,
descrierea formatului pentru documentele prezentate n mod continuu (de exemplu,
cele afi[ate pe ecranul monitorului), a documentelor paginate (de exemplu,
imprimatele), precum [i descrierea interfe]ei destinate persoanelor nev\z\toare
(formatul pentru terminalul Braille) [i formatul de sunet destinat aparatelor de
sintetizare a limbajului care permit citirea documentelor.
Foile de stil n cascad\, denumite cteodat\ stiluri, reprezint\ unul dintre pilonii
HTML-ului dinamic (Dynamic HTML). Sub aceast\ denumire se ascund tehnicile
de reac]ie dinamic\ a programelor de navigare, `n strns\ leg\tur\ cu evenimentele
care au loc pe pagina clientului [i modificarea con]inutului [i/sau a formatului
documentului afi[at. Aceast\ tem\ va fi prezentat\ pe larg n modulul destinat
limbajului JavaScript.

lec]ie demonstrativ\

Web design

Pentru a v\ u[ura `nv\]area, no]iunile noi [i aspectele importante au fost marcate

cu ajutorul unor semne grafice pentru a putea fi identificate cu u[urin]\. Am ales
spre exemplificare cteva fragmente din modulul 1, `n care face]i cuno[tin]\ cu
limbajul HTML.

Facem cuno[tin]\ cu limbajul HTML

Dup\ o scurt\ introducere, `n care am prezentat pe scurt re]elele de calculatoare,
istoria limbajului HTML, principiile de navigare cu browserul, trecem la probleme
mai importante cunoa[terea structurii limbajului HTML [i construirea documentelor
hipertext.
Pentru a putea `ncepe lucrul cu pagini HTML, trebuie s\ ne concentr\m asupra
elementelor care formateaz\ documentul [i ne vom limita la utilizarea a dou\ aplica]ii:
Notepad pentru editarea codului HTML editor de text simplu inclus `n
sistemul de operare MS Windows;
Internet Explorer 5.5 pentru vizualizarea paginii HTML (editat\) program de
navigare, denumit [i browser, dezvoltat de Microsoft [i inclus gratuit `n sistemul de
operare.
Simplitatea instrumentelor pe care le vom folosi nu nseamn\ ctu[i de pu]in c\ nu
putem construi pagini Web de efect. Drept vorbind, un webmaster profesionist acesta
este termenul cu care sunt denumi]i speciali[tii care se ocup\ de proiectarea [i
realizarea serviciilor de Internet lucreaz\ foarte mult cu aceste instrumente simple.

Modul de lucru
Nu trebuie s\ fim conecta]i la Internet pentru a construi documente hipertext, astfel
c\ pute]i `ncepe lucrul imediat cum a]i deschis calculatorul, f\r\ set\ri sau configur\ri
suplimentare. Modalitatea de lucru f\r\ conexiune Internet activ\ se mai nume[te [i
lucru off-line.
Se presupune c\ ave]i no]iunile de baz\ `n utilizarea sistemului de operare instalat
pe calculatorul dumneavoastr\.
Pentru a lucra ordonat, vom crea un folder `ntr-o loca]ie pe hard-discul
computerului, de exemplu, un folder numit LucruHTML vizualizat pe desktop-ul
sistemului (figura 13).

Fig. 13. Crearea folderului de lucru pe hard-discul personal

Web design

lec]ie demonstrativ\

Se deschide acest folder, `n care vom crea ulterior un fi[ier HTML. Majoritatea
sistemelor de operare din familia celor dezvoltate de corpora]ia Microsoft au setat\
implicit ascunderea extensiilor pentru fi[ierele al c\ror tip este recunoscut. De
exemplu, fi[ierul document.txt se vede doar document, aceasta pentru c\
extensia fi[ierului de tip text adic\ [irul .txt este ascuns\ de sistemul de operare.
Deoarece paginile HMTL pot avea dou\ extensii (de patru caractere : .html,
respectiv de trei caractere: .htm), va fi foarte util atunci cnd lucra]i s\ pute]i
vizualiza fi[ierele `n `ntregime, deci [i cu extensie.
Pentru aceasta, `n meniul View al ferestrei `n care este deschis folderul LucruHTML
se alege Folder Options. Apare o alt\ caset\ de dialog cu etichetele General,
View [i File Types. Alegem View, iar `n lista Advanced settings se localizeaz\ [i
se deselecteaz\ (`n cazul `n care este bifat\) c\su]a corespunz\toare op]iunii Hide
file extensions for known file types.

Fig. 14. Vizualizarea numelor fi[ierelor cu extensie

Se apas\ butonul OK, opera]iune care este `nso]it\ de confirmarea set\rilor efectuate
[i de `nchiderea casetei de dialog.
Dac\ a]i urm\rit `ntocmai pa[ii prezenta]i anterior, ar trebui s\ ave]i deschis\ fereastra
ce vizualizeaz\ con]inutul folderului LucruHTML, care, de altfel, este vid, adic\
nu con]ine nici un fi[ier.
Crearea primei pagini HTML porne[te, de fapt, de la crearea unui fi[ier text, deoarece
codul HTML este scris `n mod text.
Astfel, vom crea un fi[ier text `n folderul curent (LucruHTML), alegnd din meniul
File op]iunea New [i apoi New Text Document. Apare astfel fi[ierul New Text
Document.txt, c\ruia `i pute]i observa [i extensia corespunz\toare, ca urmare a
set\rii f\cute anterior. Acest fi[ier se redenume[te pagina1.html, proces `nso]it de
schimbarea extensiei [i, deci, de o cerere de confirmare din partea sistemului de

lec]ie demonstrativ\

Web design

operare. Se observ\ `n aceast\ etap\ [i schimbarea iconului ata[at fi[ierului `ntr-unul

corespunz\tor:

Fig. 15. Redenumirea fi[ierului ini]ial

Prin conven]ie, pe parcursul materialului de curs vom utiliza extensia de

patru caractere, respectiv .html.
~n acest moment, aplica]ia ata[at\ `n mod implicit pentru fi[ierul pagina1.html
este browserul Internet Explorer, care va fi deschis automat `n momentul `n care se
execut\ dublu-click pe fi[ier. Browserul va afi[a o pagin\ alb\, f\r\ nici un con]inut,
deoarece `nc\ nu am scris nimic `n codul surs\ al paginii respective.
Pentru vizualizarea codului surs\ al paginii deschise `n browser se alege op]iunea
Source din meniul View al acestuia. ~n urma execut\rii acestei comenzi, cu ajutorul
aplica]iei Notepad, va fi deschis\ fereastra care con]ine codul surs\ al fi[ierului
pagina1.html.

Editorul de text Notepad este utilizat `n majoritatea cazurilor de Internet

Explorer pentru vizualizarea [i modificarea codului surs\.
~n acest moment, avem acela[i fi[ier deschis cu dou\ aplica]ii: Internet Explorer [i
Notepad.

Se observ\ c\ `n editorul de text s-a deschis un fi[ier vid, aici urmnd ca noi
s\ scriem efectiv codul `n limbajul HTML. Modific\rile f\cute `n acest fi[ier
trebuie salvate [i re`nc\rcate `n browser.

Web design

lec]ie demonstrativ\

Spre exemplu, vom `ncepe cu clasicul Hello world!, respectiv afi[area unui text
`n fereastra browserului cu ajutorul limbajului HTML.
Scriem textul dorit `n fereastra aplica]iei Notepad (`n cazul nostru Hello world!),
dup\ care salv\m modific\rile, alegnd op]iunea Save din meniul File. Revenind
la fereastra browserului, se execut\ click pe Refresh din toolbar (bara de
instrumente). ~n acest moment va ap\rea `n fereastra acestuia textul pe care l-am
scris `n codul surs\ (`n Notepad).

Fig. 16. Afi[area unui text `n browser

Dac\ dorim alte modific\ri, revenim la fereastra aplica]iei Notepad, unde realiz\m
opera]iile dorite, salv\m, revenim la fereastra de browser [i re`nc\rc\m (Refresh).

i
e

Nu `ncerca]i s\ face]i modific\ri `n fereastra browserului, deoarece aceasta

este utilizat\ doar pentru vizualizarea paginilor.

Exerci]iul 3
V\ propunem o metod\ mai rapid\ de lucru, [i anume cu ajutorul
tastaturii. Astfel, pentru salvarea fi[ierului `n Notepad folosi]i combina]ia
ALT+F, urmat\ de tasta S, dup\ care comuta]i `n fereastra de browser
cu ALT+TAB, iar pentru re`nc\rcarea paginii ap\sa]i F5 (Refresh).
Pentru revenirea la codul surs\ ac]iona]i combina]ia ALT+TAB.

Ve]i observa c\ aceste combina]ii rapide ofer\ `n timp o foarte mare vitez\
de lucru, eliminndu-se timpii mor]i ce apar `n utilizarea mouse-ului.

lec]ie demonstrativ\

10

Web design

~n]elegerea con]inutului informa]ional v\ este facilitat\ de prezen]a numeroaselor

exemple, a[a cum pute]i vedea `n urm\toarele fragmente selectate din modulul 8.

Instruc]iunea condi]ional\
Instruc]iunea ?
n locul instruc]iunii if poate fi, de asemenea, folosit\ instruc]iunea ?. De obicei,
aceasta este folosit\ peste tot unde condi]ia [i ac]iunile ntreprinse nu sunt complexe.
Forma general\ a acestei expresii condi]ionale este:
test?actiune_pentru_conditia_adevarata: actiunea_pentru conditia_falsa
Exemplu
$a>$b ? $a=$a-$b : $b=$b-$a.
ceea ce este echivalent cu
if ($a>$b) {
$a=$a-$b;
} else {
$b=$b-$a;
}

Buclele
Folosirea instruc]iunilor de ciclare o vom descrie n capitolul destinat construc]iei
algoritmilor. Tot `n acest capitol ne vom limita la enumerarea tipurilor [i a sintaxei
instruc]iunilor de ciclare care apar n limbajul Perl.
Instruc]iunea for
Instruc]iunea for este folosit\ n cazurile n care [tim de la bun nceput num\rul de
repet\ri ale buclei. Datorit\ posibilit\]ii de definire a condi]iei de realizare a
instruc]iunilor cuprinse n bucl\, exist\ posibilitatea de modificare a contorului.
Totu[i, pentru cre[terea lizibilit\]ii codului, trebuie s\ evit\m astfel de situa]ii.
Instruc]iunea for are forma:
for (conditia_de inceput, test, modificarea_indexului) {
blocul _instructiunii;
}

Web design

lec]ie demonstrativ\

11

Aplica]ia concret\ a acestei instruc]iuni ar putea ar\ta n felul urm\tor:

Exemplu
for ($i=1; $i<10; $i++) {
for ($j=1; $j<=10; $j++) {
$rezultat = $i*$j;
print $i x $j =$rezultat\n;
}
}
Bucla while
Instruc]iunile cuprinse n bucla while sunt realizate atta timp ct este adev\rat\
condi]ia specificat\.
while (conditia) {
blocul_instructiuni
}
Exemplu
Doamna nv\]\toare l-a pus pe Ionescu s\ scrie caligrafic de 100 de ori urm\toarea
propozi]ie: Nu voi mai vorbi niciodat\ n timpul orei de limba romn\.
$a =100;
while ($a>0) {
print Nu voi mai vorbi niciodata in timpul orei de limba romana \n;
$a;
}
Bucla until
Asem\n\toare cu bucla while este [i bucla until. Aceasta se diferen]iaz\ prin faptul
c\, `n vreme ce n bucla while condi]ia trebuia s\ fie ndeplinit\ pentru a realiza
blocul de instruc]iuni, n cazul buclei until este exact invers.
Ac]iunea buclei este, a[adar, urm\toarea: pn\ cnd condi]ia nu este ndeplinit\,
realizeaz\ comanda
Exemplu
$a =100,
until ($a<=0) {
print Nu voi mai vorbi niciodata in timpul orei de limba romana.\n;
$a;
}

lec]ie demonstrativ\

12

Web design

Exerci]iile sunt un instrument util de verificare a cuno[tin]elor teoretice

dobndite `n cadrul unui modul. ~n acest sens am selectat exemple din modulul 8
[i modulul 13.

Instruc]iunile care ntrerup realizarea blocului de instruc]iuni `n bucle (Modulul 8)

Cteodat\, intervine nevoia de a ntrerupe realizarea blocului de instruc]iuni al buclei
sau de cre[tere a contorului acesteia [i de a ncepe din nou realizarea instruc]iunii
din interiorul acesteia. Se utilizeaz\ trei instruc]iuni care schimb\ forma voit\ a
realiz\rii comenzilor:

Last duce la ntreruperea realiz\rii instruc]iunii buclei [i la trecerea c\tre

instruc]iunea care se afl\ dup\ ea.

Next ntrerupe realizarea itera]iei curente a buclei. Urmeaz\ trecerea la

nceputul buclei c\tre locul de verificare a condi]iei. n cazul n care condi]ia
este ndeplinit\, instruc]iunile buclei vor fi realizate din nou.

Redo ntrerupe realizarea blocului de instruc]iuni [i duce la realizarea din

nou a itera]iei curente a buclei. Diferen]a dintre redo [i next const\ n faptul
c\ redo nu verific\ condi]ia buclei [i nici nu modific\ con]inutul contorului.

Exerci]iul 5
Exerci]iul urm\tor are un caracter de concep]ie, de aceea l vom mp\r]i
n trei etape.
I.

n prima faz\ trebuie s\ facem cuno[tin]\ cu aplica]iile existente

pe Internet ale magazinelor virtuale (de exemplu, libr\rii). Nu
trebuie s\ facem cump\r\turi, dar merit\ s\ urm\rim metodele
de c\utare a m\rfurilor, principiile de achizi]ionare [i metodele
de transmitere a comenzii.
Observa]iile efectuate trebuie scrise sub form\ de noti]e, iar
acestea vor u[ura mai trziu definirea formal\ a algoritmului de
func]ionare a magazinului virtual.

Web design

lec]ie demonstrativ\

II.

III.

13

n cea de-a doua etap\ trebuie mp\r]ite toate opera]iile realizate

n magazin n blocuri func]ionale, de exemplu:
r\sfoirea catalogului de produse;
proiectarea con]inutului co[ului;
trimiterea formularului de comand\.
Ultima etap\ a realiz\rii exerci]iului const\ n preg\tirea unei
scheme bloc de func]ionare a magazinului pe Internet. Munca o
pute]i ncepe de la operarea cu blocurile func]ionale la nivelul
general specificat la punctul II, dar trebuie s\ trata]i o astfel de
schem\ ca fiind general\. Ar trebui luate `n considera]ie diferite
proceduri, de exemplu deservirea gre[elilor: dac\ un client nu
[i-a trecut pe formularul de comand\ adresa sau c\utarea
produselor s-a ncheiat cu un insucces, atunci ce instruc]iune va
fi necesar\?
Indica]ie: Definind procedurile am\nun]ite, trebuie s\ ave]i n
vedere scopul activit\]ii magazinului, adic\ maximizarea
vnz\rilor [i satisfacerea clien]ilor (s\ presupunem c\ n aceast\
ordine). A[adar, dac\ clientul nu poate g\si produsul pe care l
caut\, atunci poate c\ ar trebui s\-i propunem un produs
asem\n\tor sau s\ proiect\m o informa]ie despre o ofert\
promo]ional\.
Schema bloc elaborat\ n acest exerci]iu v\ va fi util\ n partea
urm\toare a cursului. Atunci cnd ve]i cunoa[te mai bine
principiile de programare n limbajul Perl [i cnd ve]i st\pni
modul de comunicare cu utilizatorul motorului de c\utare pe
Internet cu ajutorul formularelor de pe paginile WWW, vom putea
trece la implementarea magazinului virtual.

Data actualiz\rii documentului (Modulul 13)

ntr-un site complex, anumite informa]ii sunt frecvent actualizate. Cel mai adesea
sunt ad\ugate pagini noi sau este modificat con]inutul paginilor deja existente.
Corectitudinea fa]\ de cititori impune afi[area pe paginile web a datei actualiz\rii
documentului. Aceasta se poate realiza prin introducerea pe pagina web a unui
script simplu n limbajul JavaScript (fig. 16).
<body>
Con]inutul documentului. <br> <br>
Data actualiz\rii:
<script language =JavaScript>
document.write (document.lastModified);
</script>
</body>
</html>

Fig. 16. Scriptul care afi[eaz\ data ultimei actualiz\ri a documentului HTML

lec]ie demonstrativ\

14

Web design

Ad\ugarea paginii de start la paginile favorite

Urm\toarele dou\ instruc]iuni servesc la introducerea pe pagina web hyperlinkurilor care permit stabilirea adresei paginii de start pentru browserul folosit, precum
[i ad\ugarea unei anumite adrese la mul]imea de adrese favorite (fig. 18).
<a href =#onClick = this.style.behavior = url(#default#homepage);
this.setHomePage(http://www.google.com)>Seteaza pagina de start</a> <br>
<a href = # onClick = window.external.AddFavorite(http://www.trafic.ro)>
Adauga la favorite</a>

Fig. 18. Hyperlink-uri care permit modificarea paginii de start [i ad\ugarea unei adrese
URL la mul]imea paginilor preferate

Exerci]iul 5
Problema de fa]\ se compune din trei p\r]i.
n prima parte trebuie s\ preg\ti]i o pagin\ web, dup\ care trebuie
introdus un formular cu interog\ri c\tre cteva motoare de c\utare
n re]ea, de exemplu Altavista, Google etc. Codurile surs\ care trebuie
scrise n acest scop sunt accesibile pe site-urile motoarelor de c\utare.
Cea de-a doua etap\ de lucru const\ n alegerea unei liste de cuvinte
cheie, conform c\reia ve]i c\uta propria pagin\ web (de exemplu
numele [i prenumele dumneavoastr\, dac\ apar pe pagin\, sau alte
cuvinte care apar n sec]iunea head a paginilor web). Apoi, trebuie
preg\tit un tabel ale c\rui coloane vor con]ine, mai nti, propriul
site, apoi motoarele de c\utare selectate anterior; liniile tabelului
vor con]ine pozi]iile pe care le-a ocupat pagina respectiv\
n ranking-urile resurselor c\utate cu diferitele motoare de c\utare
pe baza cuvintelor cheie folosite.
Cea de-a treia etap\ const\ n g\sirea paginii noastre cu ajutorul
motoarelor de c\utare selectate la nceput, conform cuvintelor cheie,
analiznd apoi pozi]ia paginii noastre.
www.Pagina Mea.ro
Download
Software
Programare

Astalavista
3
22
9

Google
5

Raportul acestui experiment trebuie salvat (poate fi inserat pe pagina

noastr\ de web), dup\ care trebuie f\cut\ o prob\ de optimizare a paginii
din punctul de vedere al cuvintelor cheie specifice pentru c\utare,
nscriind din nou adresa paginii la motoare de c\utare [i repetnd
experimentul de un anumit num\r de ori.

Web design

lec]ie demonstrativ\

15

Ilustra]iile, capturile de imagini reprezentative [i tabelele permit `nsu[irea f\r\

probleme a con]inutului. Iat\ cteva astfel de fragmente din modulele 3, 10 [i 15.

Ilustra]iile, pozele (Modulul 3)

Cnd vorbim despre introducerea elementelor grafice n paginile Web, cel mai des
ne gndim la inserarea n document a ilustra]iilor, a iconurilor [i a bannerelor. Dup\
cum [tim deja, imaginile incluse n documentele HTML pot fi salvate n formate
diferite [i pot fi caracterizate de anumite propriet\]i. De aceea, analiza `n folosirea
formelor de prezentare adecvate, care leag\ valoarea informativ\ cu navigarea
intuitiv\ [i atractivitatea vizual\, va r\mne la aprecierea dumneavoastr\.
V\ prezent\m cteva opera]iuni simple aplicate curent `n scopul ob]inerii unor efecte
interesante pe paginile Web [i a folosirii `n totalitate a propriet\]ilor imaginii:
Inserarea ilustra]iei cu un fundal transparent. Imaginea suprapus\ pe document
este mult mai estetic\. Ilustra]ia se potrive[te perfect n document, independent
de schimbarea culorii fundalului paginii Web. Fundalul paginii (culoare, desen)
este un fundal pentru imaginea inserat\.
Anima]ia pe paginile Web reprezint\ cel mai adesea un element decorativ.
Cteodat\, anima]ia este folosit\ la prezentarea `n etape a informa]iilor, aceste
efecte ducnd la atragerea aten]iei utilizatorului. Un format tipic al salv\rii
anima]iei pe paginile Web este formatul GIF.
Galeria de miniaturi. Avnd la dispozi]ie mai multe poze, merit\ s\ ne gndim la
preg\tirea unui document suplimentar, care s\ con]in\ aceste poze ntr-un format
mai mic sau numai fragmente de poze. Fiecare miniatur\ reprezint\ o leg\tur\
cu fi[ierul n care este salvat\ imaginea adev\rat\, iar ap\sarea pe miniatur\
duce la desc\rcarea imaginii n fereastra browserului (figura 9). Scopul construirii

Pozele n miniatur\ permit o

vizualizare rapid\ [i alegerea imaginii
care va fi desc\rcat\.

Salvare pe CD-ROM

Figura 9. Galerie de fotografii

lec]ie demonstrativ\

16

Web design

galeriei de miniaturi este prezentarea rapid\ pentru utilizator a tuturor imaginilor

[i u[urarea alegerii pozelor de c\tre acesta, poze pe care dore[te s\ le descarce
de pe server, la dimensiunea original\.
Divizarea imaginii. S-a observat c\ modul de compresie a fi[ierelor tip imagine
permite foarte des atingerea unor rezultate mai bune (un nivel mai bun de
compresie) n cazul imaginilor mici, dect n cazul pozelor mari. Acest lucru se
refer\ n primul rnd la folosirea n aplica]iile pe Internet a formatului GIF.
Fragmentarea unei imagini mari `n altele mai mici permite o mic[orare considerabil\
a num\rului de bytes pe care utilizatorul trebuie s\-i descarce de pe server, n scopul
vizualiz\rii imaginii originale. Reconstruc]ia imaginii mp\r]ite n cteva fragmente
se face pe principiul inser\rii diferitelor fragmente n tabel (figura 10).

247 300 bytes

40 000 bytes

45 200 bytes

32 800 bytes

32 300 bytes

Figura 10. Divizarea imaginii n scopul mic[or\rii dimensiunilor documentului HTML

Web design

lec]ie demonstrativ\

17

Expresii regulate (Modulul 10)

Caracterul

Descriere

Exemplu

Semnifica]ie
(de exemplu)

Schimb\ semnifica]ia caracterului care urmeaz\. n

cazul semnelor speciale, ele sunt tratate ca atare.

/ a \ */

a*

Reprezint\ nceputul [irului de intrare sau al liniei.

/^A/

Ana

Reprezint\ sfr[itul [irului de intrare sau al liniei.

/t$/

pisica

Caracterul anterior sau [irul de caractere de dinaintea

lui pot ap\rea de zero sau mai multe ori.

/g o*1/

gool, dar [i gl

Caracterul anterior sau [irul de caractere de

dinaintea acestui simbol pot ap\rea o dat\ sau de
mai multe ori.

/g o+1/

gool, dar [i gl

Un domeniu de caractere

/ ^[ a -z ] $ /

a, i

Reprezint\ op]ionalitatea. Caracterul care se afl\

naintea acestui simbol poate, dar nu trebuie s\ apar\.

/k?a$/

pika, dar [i ea

Orice caracter

/.i/

cal dar [i b\]

Reprezint\ alternativa. ntr-un text care se

potrive[te poate ap\rea att caracterul din partea
stng\, ct [i cel din partea dreapt\ a acestui
simbol.

/^x|y$/

x sau y

/ [ a -z ] /

a, e, w

/[^ab k]/

cas\, dar [i
acoperi[

/ \d /

2 n A2

/ \D/

A2 dar nu [i
123

nseamn\ o mul]ime de caractere pentru a evita o

n[iruire mare de caractere.

[]
[ ^]
\d

Reprezint\ complementara mul]imii respective.

Orice cifr\

palpha\D Orice caracter care nu este cifr\

\w

Orice caracter care este o liter\ mare sau mic\, o

cifr\ sau liniu]a de subliniere.

/ \w /

D n 3D

\W

Orice caracter care nu este o liter\ mare sau mic\, o

cifr\ sau un liniu]a de subliniere.

/ \W/

1+2

\s

Orice caracter dintre a[a-zisele semne albe, adic\

spa]iile, semnul Tab, semnul de nceput de rnd,
Enter, o nou\ pagin\

\S

Orice caracter care nu este un semn alb

/^\S/$

-, a

\t

Caracterul Tab (spa]iu)

\n

Rnd nou

Tabelul 2. Anumite caractere [i secven]e speciale care ajut\ la construc]ia expresiilor

regulate

Exemplu
$ sir=~/stiu/, #daca variabila $sir contine ~stiu. Adev\rat, de
exemplu #pentru [irul Iti spun ceva
$sir=~/^stiu$/, #daca variabila $sir_de semne, atunci lantul stiu
$[ir=~/^[a-zA-z]+$/, #daca variabila $sir_de semne contine orice
cuvant # care se compune din litere mici si mari, de exemplu VrEmEa

lec]ie demonstrativ\

18

Web design

AntiVir (Modulul 15)

Func]iile de baz\ ale programului sunt:
scanarea discului indicat (folderului);
monitorizarea tuturor fi[ierelor deschise [i execu]ia programelor;
desc\rcarea versiunii actuale a programului AntiVir [i a bazei viru[ilor (fig. 10).

Fig. 10. Lucrul cu programul antivirus AntiVir

~n afar\ de func]iile enumerate, programul este echipat cu un dic]ionar de denumiri

ale viru[ilor recunoscu]i (lb. engl. Recognition List, vezi fig. 11), iar `n help-ul
acestuia putem g\si descrierea multor viru[i populari. Totu[i, `n munca de zi cu zi,
cel mai important element al pachetului AntiVir se poate dovedi monitorul antivirus
care observ\ discret toate programele puse `n func]iune [i fi[ierele deschise [i care
verific\ dac\ acestea nu con]in fragmente de cod suspecte (fig. 12).

Web design

lec]ie demonstrativ\

19

Temele de la finalul modulelor se rezolv\ pe formularele speciale, care se trimit

spre corectur\ profesorului personal.

Tema pentru acas\ 9

1.

Ce reprezint\ prescurtarea CGI? Descrie]i n cteva cuvinte posibilit\]ile care

decurg din generarea dinamic\ a con]inutului paginilor Web.

2.

Scrie]i diferen]ele dintre cmpurile ascunse ale formularului [i cmpurile de

tip text care apar pe paginile Web.

3.

La ce folosesc tipurile de date definite prin termenul MIME?

4.

Presupunnd c\ dispune]i de un fi[ier de grafic\ (carte.gif), scrie]i codul

HTML care permite activarea butonului (vezi desenul) care duce la
transmiterea formularului c\tre scriptul CGI [i efectuarea nscrisului n Lista
de vizitatori.
Buton:
Lista de vizitatori

Transmit comentariul meu

5.

Enumera]i tipurile de cmpuri ale formularului n care exist\ posibilitatea

introducerii de informa]ii sub form\ de text. Da]i cteva exemple de folosire
a lor (codul HTML).

6.

Ce atribute (drepturi de acces) trebuie s\ set\m scripturilor CGI, pentru ca

acestea s\ poat\ fi puse n func]ie de c\tre serverul de Web?

7.

n ce const\ blocarea func]iei de editare a spa]iilor formularului?

8.

n cazul n care ave]i un cont de Web accesibil, atunci ncerca]i s\ introduce]i

rezultatul muncii n acel cont. Trece]i adresa la care este accesibil\ pagina de
Web cu solu]ia exerci]iului pentru ca profesorul s\ poat\ comenta lucrarea [i
s\ poat\ sugera eventualele corecturi (binen]eles, referitoare la realizarea
tehnic\ a site-ului de Web).

20

lec]ie demonstrativ\

Web design

Cu prezentarea formularului de tem\ pentru acas\

se `ncheie lec]ia demonstrativ\ a acestui curs.
~n speran]a c\ materialul prezentat v-a convins
de accesibilitatea [i atractivitatea cursului nostru,

v\ a[tept\m s\ deveni]i cursant al Institutului Eurocor,

`nscriindu-v\ la cursul de Web Design!
021/33.225.33; www.eurocor.ro