Sunteți pe pagina 1din 21

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 realizând 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, cât [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 cât 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.
2 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 dobândite. 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 sfâr[itul fiec\rui modul este inserat\ tema pentru
acas\, care cuprinde atât întreb\ri teoretice, cât [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 cât mai u[or [i eficient, pe marginea lec]iilor au
fost introduse diferite simboluri:

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

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

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


3 (18) (î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\ 3

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.
4 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 Câteva 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\ 5

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\ atât con]inutul diferitelor pagini, forma atr\g\toare a prezent\rii,
cât [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.
Cunoscând 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, urmând 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, luându-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 câteodat\ 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 strâns\ 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.
6 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 câteva 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\ câtu[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\ 7

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 când 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), alegând 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
8 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

i 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”.

i 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.

i
Se observ\ c\ `n editorul de text s-a deschis un fi[ier vid, aici urmând 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\ 9

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, alegând 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
Nu `ncerca]i s\ face]i modific\ri `n fereastra browserului, deoarece aceasta
este utilizat\ doar pentru vizualizarea paginilor.

e 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.

i
Ve]i observa c\ aceste combina]ii rapide ofer\ `n timp o foarte mare vitez\
de lucru, eliminându-se timpii mor]i ce apar `n utilizarea mouse-ului.
10 lec]ie demonstrativ\ 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 atâta timp cât 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 român\”.
$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: pân\ când 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—;
}
12 lec]ie demonstrativ\ Web design

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


dobândite `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)


Câteodat\, 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.

e 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 târziu definirea formal\ a algoritmului de
func]ionare a magazinului virtual.
Web design lec]ie demonstrativ\ 13

II. Î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\.
III. 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
vânz\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 când ve]i cunoa[te mai bine
principiile de programare în limbajul Perl [i când ve]i st\pâni
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
14 lec]ie demonstrativ\ Web design

Ad\ugarea paginii de start la paginile favorite


Urm\toarele dou\ instruc]iuni servesc la introducerea pe pagina web hyperlink-
urilor 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

e 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 câteva 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 întâi, 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,
analizând apoi pozi]ia paginii noastre.
www.Pagina Mea.ro Astalavista Google
Download 3 5
Software 22 –
Programare 9 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 repetând
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\ câteva astfel de fragmente din modulele 3, 10 [i 15.

Ilustra]iile, pozele (Modulul 3)


Când vorbim despre introducerea elementelor grafice în paginile Web, cel mai des
ne gândim 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\mâne la aprecierea dumneavoastr\.
V\ prezent\m câteva 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.
Câteodat\, anima]ia este folosit\ la prezentarea `n etape a informa]iilor, aceste
efecte ducând la atragerea aten]iei utilizatorului. Un format tipic al salv\rii
anima]iei pe paginile Web este formatul GIF.
• Galeria de miniaturi. Având la dispozi]ie mai multe poze, merit\ s\ ne gândim 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


16 lec]ie demonstrativ\ 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, decât în cazul pozelor mari. Acest lucru se
refer\ în primul rând 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 câteva fragmente
se face pe principiul inser\rii diferitelor fragmente în tabel (figura 10).

247 300 bytes

40 000 bytes 32 800 bytes

45 200 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)


Caracte- Semnifica]ie
Descriere Exemplu
rul (de exemplu)
Schimb\ semnifica]ia caracterului care urmeaz\. În
\ / a \ */ “a*”
cazul semnelor speciale, ele sunt tratate ca atare.
^ Reprezint\ începutul [irului de intrare sau al liniei. /^A/ “Ana”
$ Reprezint\ sfâr[itul [irului de intrare sau al liniei. /t$/ “pisica”
Caracterul anterior sau [irul de caractere de dinaintea
* /g o*1/ “gool”, dar [i “gl”
lui pot ap\rea „de zero sau mai multe ori”.
Caracterul anterior sau [irul de caractere de
+ dinaintea acestui simbol pot ap\rea „o dat\ sau de /g o+1/ “gool”, dar [i “gl”
mai multe ori”.
– Un domeniu de caractere / ^[ a -z ] $ / “a”, “i”
Reprezint\ op]ionalitatea. Caracterul care se afl\
? /k?a$/ “pika”, dar [i “ea”
înaintea acestui simbol poate, dar nu trebuie s\ apar\.
. Orice caracter /.i/ “cal” dar [i “b\]”
Reprezint\ alternativa. Într-un text care se
potrive[te poate ap\rea atât caracterul din partea
| /^x|y$/ “x” sau “y”
stâng\, cât [i cel din partea dreapt\ a acestui
simbol.
Înseamn\ o mul]ime de caractere – pentru a evita o
[] / [ a -z ] / “a”, “e”, “w”
în[iruire mare de caractere.
“cas\”, dar [i
[ ^] Reprezint\ complementara mul]imii respective. /[^ab k]/
“acoperi[”
\d Orice cifr\ / \d / ”2” în “A2”
“A2” dar nu [i
palpha\D Orice caracter care nu este cifr\ / \D/
“123”
Orice caracter care este o liter\ mare sau mic\, o
\w / \w / “D” în “3D”
cifr\ sau liniu]a de subliniere.
Orice caracter care nu este o liter\ mare sau mic\, o
\W / \W/ “1+2”
cifr\ sau un liniu]a de subliniere.
Orice caracter dintre a[a-zisele semne albe, adic\
\s spa]iile, semnul Tab, semnul de început de rând, – –
Enter, o nou\ pagin\
\S Orice caracter care nu este un semn alb /^\S/$ “-”, “a”
\t Caracterul Tab (spa]iu) – –
\n Rând 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”
18 lec]ie demonstrativ\ 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 câteva cuvinte posibilit\]ile care


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

2. Scrie]i diferen]ele dintre câmpurile ascunse ale formularului [i câmpurile de


tip text care apar pe paginile Web.

3. La ce folosesc tipurile de date definite prin termenul MIME?

4. Presupunând 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 câmpuri ale formularului în care exist\ posibilitatea


introducerii de informa]ii sub form\ de text. Da]i câteva 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 (bineîn]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