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:

i e
3 (18)

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

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

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. Documente HTML complexe. Descrierea elementelor indicatoare HTML (continuare). Construc]ia documentelor complexe `n limbajul HTML. 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. 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. 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. 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. 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. Programarea n limbajul PERL. Introducere n programare. Descrierea instruc]iunilor limbajului PERL. Primele programe n limbajul PERL. Interfa]a CGI. Ce nseamn\ CGI. Generarea dinamic\ a con]inutului paginilor Web. Construc]ia scripturilor simple care fac atr\g\toare paginile Web. 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.

Modulul 2

Modulul 3

Modulul 4

Modulul 5

Modulul 6

Modulul 7

Modulul 8

Modulul 9

Modulul 10

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. Magazin virtual pe Internet. Descrierea schemei de func]ionare a magazinului. Construc]ia aplica]iei magazinului virtual pe Internet n limbajul PERL. 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). 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. 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. 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.

Modulul 12

Modulul 13

Modulul 14

Modulul 15

Modulul 16

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.

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

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 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; }

12

lec]ie demonstrativ\

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\

13

II. III.

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

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

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, 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

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)

Caracterul \ ^ $ * + ? . | Descriere Schimb\ semnifica]ia caracterului care urmeaz\. n cazul semnelor speciale, ele sunt tratate ca atare. Reprezint\ nceputul [irului de intrare sau al liniei. Reprezint\ sfr[itul [irului de intrare sau al liniei. Caracterul anterior sau [irul de caractere de dinaintea 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 mai multe ori. Un domeniu de caractere Reprezint\ op]ionalitatea. Caracterul care se afl\ naintea acestui simbol poate, dar nu trebuie s\ apar\. Orice caracter 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. nseamn\ o mul]ime de caractere pentru a evita o n[iruire mare de caractere. Reprezint\ complementara mul]imii respective. Orice cifr\ Exemplu / a \ */ /^A/ /t$/ /g o*1/ /g o+1/ / ^[ a -z ] $ / /k?a$/ /.i/ /^x|y$/ Semnifica]ie (de exemplu) a* Ana pisica gool, dar [i gl

gool, dar [i gl a, i pika, dar [i ea cal dar [i b\] x sau y

[] [ ^] \d

/ [ a -z ] / /[^ab k]/ / \d / / \D/ / \w / / \W/ /^\S/$

a, e, w cas\, dar [i acoperi[ 2 n A2 A2 dar nu [i 123 D n 3D 1+2

palpha\D Orice caracter care nu este cifr\ \w \W \s \S \t \n Orice caracter care este o liter\ mare sau mic\, o cifr\ sau liniu]a de subliniere. Orice caracter care nu este o liter\ mare sau mic\, o cifr\ sau un liniu]a de subliniere. Orice caracter dintre a[a-zisele semne albe, adic\ spa]iile, semnul Tab, semnul de nceput de rnd, Enter, o nou\ pagin\ Orice caracter care nu este un semn alb Caracterul Tab (spa]iu) Rnd nou

-, a

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 cteva cuvinte posibilit\]ile care decurg din generarea dinamic\ a con]inutului paginilor Web. Scrie]i diferen]ele dintre cmpurile ascunse ale formularului [i cmpurile de tip text care apar pe paginile Web. La ce folosesc tipurile de date definite prin termenul MIME? 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

2.

3. 4.

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). 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? n ce const\ blocarea func]iei de editare a spa]iilor formularului? 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).

6.

7. 8.

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