web design tl - eurocor.ro · lec]iile cuprind numeroase capturi de imagini, scheme, figuri [i...

$: WEB Design TL - eurocor.ro · 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$

L

E

C

}

I

E

D

E

M

O

N

S

T

R

A

T

I

V

|

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\ Webcare v-a atras aten]ia?

A]i dori s\ v\ valorifica]i imagina]ia [i creativitatea realizând asemenea pagini deWeb?

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 indispensabilpentru majoritatea dintre noi. Fie c\ îl folosimîn scopuri profesionale (la serviciu) sau înscopuri personale, acesta ne ofer\ o infinitatede informa]ii din absolut toate domeniile,posibilitatea de a comunica cu persoane dinîntreaga lume, cât [i felurite modalit\]i deamuzament [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 practicenecesare 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\ [ianima]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 campaniepromo]ional\ de succes printre utilizatorii re]elei Internet.

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

INTRODUCERE

Web designlec]ie demonstrativ\2

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. Modalitateaaccesibil\ de prezentare a informa]iei permite chiar [i celor neini]ia]i în domeniulprogram\rii însu[irea rapid\ [i f\r\ dificult\]i a materialului de studiu. În plus, pentruun 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 peCD-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 aducun 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 carevor testa gradul de însu[ire a materialului. Formularul de tem\ completat se vatrimite apoi profesorului personal care v\ va `ndruma pe toat\ perioada studiului cuobserva]ii, sugestii [i eventuale recomand\ri. EUROCOR v\ pune, de asemenea, ladispozi]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 decel pu]in 15 minute. Numai în acest mod ave]i posibilitatea de a face progreserapide [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 aufost introduse diferite simboluri:

– 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).3 (18)

e

i

Lec]ia de fa]\ este o lec]ie demonstrativ\ care dore[te s\ v\ familiarizeze cu metodade 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\. Dinpunctul de vedere al num\rului de pagini, ea reprezint\ mai pu]in de jum\tate dincon]inutul unui caiet de studiu.

3lec]ie demonstrativ\Web design

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. Sintaxadocumentelor HTML. Descrierea anumitor elemente indicatoareHTML. Prima mea pagin\ Web.

Modulul 2 Documente HTML complexe. Descrierea elementelor indicatoareHTML (continuare). Construc]ia documentelor complexe ̀ n limbajulHTML.

Modulul 3 Grafic\ pe paginile Web. Formatele implement\rii grafice pentrucerin]ele Web. Instrumente orientate c\tre construc]ia elementelorgrafice 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 folosirea paginilor de stiluri ̀ n cascad\. Sintaxa documentelor CSS. Editoarede pagini CSS. Construc]ia paginilor proprii CSS [i legarea lor cudocumentele HTML.

Modulul 5 Editorul limbajului HTML. Exemple textice [i grafice de medii carefaciliteaz\ codarea paginilor Web. Descrierea unui editor de HTMLales. Verificarea corectitudinii sintaxei documentului HTML.

Modulul 6 Serverul WWW. Serverul po[tei electronice. Instalarea [iadministrarea serverului WWW ales [i a serverului de po[t\electronic\ în mediul Windows. Crearea [i urm\rirea statisticilorserverului.

Modulul 7 Video-camere de Internet. Principiile de folosire a video-camerelorde Internet. Instalarea video-camerei. Transmiterea imaginii peserverul WWW. Monitorizarea obiectelor. Organizareavideoconferin]elor.

Modulul 8 Programarea în limbajul PERL. Introducere în programare.Descrierea instruc]iunilor limbajului PERL. Primele programe înlimbajul PERL.

Modulul 9 Interfa]a CGI. Ce înseamn\ CGI. Generarea dinamic\ a con]inutuluipaginilor Web. Construc]ia scripturilor simple care fac atr\g\toarepaginile Web.

Modulul 10 Interac]iunea cu vizitatorul paginii Web. Colectarea de informa]iidespre preferin]ele clientului, precum [i personalizarea con]inutului[i a modului de prezentare. Înregistrarea informa]iilor de la client înbaza de date. C\ut\ri pe Internet.


Modulul 11 JavaScript – programare pe parte de client. HTML-ul dinamic(DHTML). Sintaxa limbajului JavaScript. Exemple de folosireingenioas\ a aplica]iilor JavaScript pe paginile Web.

Modulul 12 Magazin virtual pe Internet. Descrierea schemei de func]ionare amagazinului. Construc]ia aplica]iei magazinului virtual pe Internetîn limbajul PERL.

Modulul 13 Câteva tehnici de promovare a paginilor de Internet; reclama pepaginile Web. Înregistrarea domeniului propriu. Sisteme de c\utarea 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 laInternet prin intermediul telefoanelor mobile. Protocolul WAP.Limbajul de scriere a documentelor WML. Editorul [i motorul dec\utare a documentelor WML. Construc]ia documentelor proprii înlimbajul WML.

Modulul 15 Siguran]a pe Internet. Modalit\]i de asigurare a serverului împotrivaaccesului nedorit. Codificarea documentelor Web trimise. Criptareapo[tei electronice. Siguran]a tranzac]iilor financiare.

Modulul 16 Activit\]i on-line. ~nv\]area prin Internet. Organizarea virtual\. Ideipentru ̀ nceperea unei activit\]i proprii pe baza accesului la Internet.C\utarea abil\ a informa]iilor.


MODULUL 4

Foi de stil în cascad\

Introducere

Administrarea con]inutului unui site complex poate fi o provocare major\. În grijawebmasterului 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 carela 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 deformatare 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]ieilimbajului de redactare a documentelor hipertext-HTML. În acest modul ne vomconcentra aten]ia asupra foilor de stil în cascad\ (lb. engl. Cascade Style Sheets,CSS), un mecanism care permite separarea con]inutului documentului de modullui de formatare, urmând ca ̀ n capitolele urm\toare s\ v\ fie prezentate regulile dedefinire a stilurilor, precum [i principiile de formatare a documentelor hipertext; exerci]iilepractice cu care sunt prev\zute aceste lec]ii v\ vor permite însu[irea rapid\ acuno[tin]elor referitoare la folosirea stilurilor în cascad\ în cadrul proiectelor proprii.

Datorit\ mai multor probleme ap\rute, realizatorii limbajului HTML au propus osolu]ie de separare a con]inutului [i structurii documentului de modul lui deformatare. Ac]iunile întreprinse în acest sens de c\tre World Wide Web Consortiums-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 deprezentare la structura documentelor (de exemplu, cele scrise în limbaj HTML). Ocaracteristic\ 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 desintetizare a limbajului care permit citirea documentelor.

Foile de stil în cascad\, denumite câteodat\ stiluri, reprezint\ unul dintre piloniiHTML-ului dinamic (Dynamic HTML). Sub aceast\ denumire se ascund tehnicilede reac]ie dinamic\ a programelor de navigare, ̀ n strâns\ leg\tur\ cu evenimentelecare au loc pe pagina clientului [i modificarea con]inutului [i/sau a formatuluidocumentului afi[at. Aceast\ tem\ va fi prezentat\ pe larg în modulul destinatlimbajului JavaScript.

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

modulul 4.


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 problememai importante – cunoa[terea structurii limbajului HTML [i construirea documentelorhipertext.

Pentru a putea `ncepe lucrul cu pagini HTML, trebuie s\ ne concentr\m asupraelementelor 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 deoperare.

Simplitatea instrumentelor pe care le vom folosi nu înseamn\ câtu[i de pu]in c\ nuputem construi pagini Web de efect. Drept vorbind, un webmaster profesionist – acestaeste termenul cu care sunt denumi]i speciali[tii care se ocup\ de proiectarea [irealizarea 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, astfelc\ pute]i ̀ ncepe lucrul imediat cum a]i deschis calculatorul, f\r\ set\ri sau configur\risuplimentare. Modalitatea de lucru f\r\ conexiune Internet activ\ se mai nume[te [ilucru off-line.

Se presupune c\ ave]i no]iunile de baz\ ̀ n utilizarea sistemului de operare instalatpe calculatorul dumneavoastr\.

Pentru a lucra ordonat, vom crea un folder `ntr-o loca]ie pe hard-disculcomputerului, de exemplu, un folder numit LucruHTML vizualizat pe desktop-ulsistemului (figura 13).

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

Pentru a v\ u[ura ̀ nv\]area, no]iunile noi [i aspectele importante au fost marcatecu ajutorul unor semne grafice pentru a putea fi identificate cu u[urin]\. Am alesspre exemplificare câteva fragmente din modulul 1, ̀ n care face]i cuno[tin]\ cu

limbajul HTML.


Se deschide acest folder, `n care vom crea ulterior un fi[ier HTML. Majoritateasistemelor de operare din familia celor dezvoltate de corpora]ia Microsoft au setat\implicit ascunderea extensiilor pentru fi[ierele al c\ror tip este recunoscut. Deexemplu, 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]ivizualiza 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\ [ise 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\ fereastrace 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, deoarececodul HTML este scris ̀ n mod text.

Astfel, vom crea un fi[ier text ̀ n folderul curent (LucruHTML), alegând din meniulFile op]iunea New [i apoi New Text Document. Apare astfel fi[ierul “New TextDocument.txt”, c\ruia `i pute]i observa [i extensia corespunz\toare, ca urmare aset\rii f\cute anterior. Acest fi[ier se redenume[te „pagina1.html”, proces ̀ nso]it deschimbarea extensiei [i, deci, de o cerere de confirmare din partea sistemului de


operare. Se observ\ ̀ n aceast\ etap\ [i schimbarea iconului ata[at fi[ierului ̀ ntr-unulcorespunz\tor:

Fig. 15. Redenumirea fi[ierului ini]ial

Prin conven]ie, pe parcursul materialului de curs vom utiliza extensia depatru 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 seexecut\ 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]iuneaSource din meniul View al acestuia. ~n urma execut\rii acestei comenzi, cu ajutorulaplica]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 InternetExplorer pentru vizualizarea [i modificarea codului surs\.

~n acest moment, avem acela[i fi[ier deschis cu dou\ aplica]ii: Internet Explorer [iNotepad.

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

i

i

i


e

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. Revenindla fereastra browserului, se execut\ click pe Refresh din toolbar (bara deinstrumente). ~n acest moment va ap\rea `n fereastra acestuia textul pe care l-amscris ̀ 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\mopera]iile dorite, salv\m, revenim la fereastra de browser [i re`nc\rc\m (Refresh).

Nu ̀ ncerca]i s\ face]i modific\ri ̀ n fereastra browserului, deoarece aceastaeste utilizat\ doar pentru vizualizarea paginilor.

Exerci]iul 3

V\ propunem o metod\ mai rapid\ de lucru, [i anume cu ajutorultastaturii. Astfel, pentru salvarea fi[ierului ̀ n Notepad folosi]i combina]iaALT+F, urmat\ de tasta S, dup\ care comuta]i ̀ n fereastra de browsercu 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, eliminându-se timpii mor]i ce apar ̀ n utilizarea mouse-ului.

i

i


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]ieialgoritmilor. Tot ̀ n acest capitol ne vom limita la enumerarea tipurilor [i a sintaxeiinstruc]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 derepet\ri ale buclei. Datorit\ posibilit\]ii de definire a condi]iei de realizare ainstruc]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;

}

~n]elegerea con]inutului informa]ional v\ este facilitat\ de prezen]a numeroaselorexemple, a[a cum pute]i vedea ̀ n urm\toarele fragmente selectate din modulul 8.


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\toareapropozi]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 faptulc\, `n vreme ce în bucla while condi]ia trebuia s\ fie îndeplinit\ pentru a realizablocul 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—;}


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 bucleisau de cre[tere a contorului acesteia [i de a începe din nou realizarea instruc]iuniidin interiorul acesteia. Se utilizeaz\ trei instruc]iuni care schimb\ forma voit\ arealiz\rii comenzilor:

• Last – duce la întreruperea realiz\rii instruc]iunii buclei [i la trecerea c\treinstruc]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]iaeste îndeplinit\, instruc]iunile buclei vor fi realizate din nou.

• Redo – întrerupe realizarea blocului de instruc]iuni [i duce la realizarea dinnou a itera]iei curente a buclei. Diferen]a dintre redo [i next const\ în faptulc\ 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 existentepe Internet ale magazinelor virtuale (de exemplu, libr\rii). Nutrebuie s\ facem cump\r\turi, dar merit\ s\ urm\rim metodelede c\utare a m\rfurilor, principiile de achizi]ionare [i metodelede transmitere a comenzii.

Observa]iile efectuate trebuie scrise sub form\ de noti]e, iaracestea vor u[ura mai târziu definirea formal\ a algoritmului defunc]ionare a magazinului virtual.

e

Exerci]iile sunt un instrument util de verificare a cuno[tin]elor teoreticedobândite `n cadrul unui modul. ~n acest sens am selectat exemple din modulul 8

[i modulul 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 uneischeme bloc de func]ionare a magazinului pe Internet. Munca opute]i începe de la operarea cu blocurile func]ionale la nivelulgeneral specificat la punctul II, dar trebuie s\ trata]i o astfel deschem\ ca fiind general\. Ar trebui luate ̀ n considera]ie diferiteproceduri, de exemplu deservirea gre[elilor: dac\ „un client nu[i-a trecut pe formularul de comand\ adresa” sau „c\utareaproduselor s-a încheiat cu un insucces”, atunci ce instruc]iune vafi necesar\?Indica]ie: Definind procedurile am\nun]ite, trebuie s\ ave]i învedere scopul activit\]ii magazinului, adic\ maximizareavânz\rilor [i satisfacerea clien]ilor (s\ presupunem c\ în aceast\ordine). A[adar, dac\ clientul nu poate g\si produsul pe care îlcaut\, atunci poate c\ ar trebui s\-i propunem un produsasem\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 parteaurm\toare a cursului. Atunci când ve]i cunoa[te mai bineprincipiile de programare în limbajul Perl [i când ve]i st\pânimodul de comunicare cu utilizatorul motorului de c\utare peInternet cu ajutorul formularelor de pe paginile WWW, vom puteatrece la implementarea magazinului virtual.

Data actualiz\rii documentului (Modulul 13)

Într-un site complex, anumite informa]ii sunt frecvent actualizate. Cel mai adeseasunt 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\riidocumentului. Aceasta se poate realiza prin introducerea pe pagina web a unuiscript 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


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

eExerci]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 trebuiescrise î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 cuvintecheie, conform c\reia ve]i c\uta propria pagin\ web (de exemplunumele [i prenumele dumneavoastr\, dac\ apar pe pagin\, sau altecuvinte care apar în sec]iunea head a paginilor web). Apoi, trebuiepreg\tit un tabel ale c\rui coloane vor con]ine, mai întâi, propriulsite, apoi motoarele de c\utare selectate anterior; liniile tabeluluivor con]ine pozi]iile pe care le-a ocupat pagina respectiv\în ranking-urile resurselor c\utate cu diferitele motoare de c\utarepe baza cuvintelor cheie folosite.

• Cea de-a treia etap\ const\ în g\sirea paginii noastre cu ajutorulmotoarelor de c\utare selectate la început, conform cuvintelor cheie,analizând apoi pozi]ia paginii noastre.

or.aeManigaP.www atsivalatsA elgooG

daolnwoD 3 5

erawtfoS 22 –

eramargorP 9 5

Raportul acestui experiment trebuie salvat (poate fi inserat pe paginanoastr\ de web), dup\ care trebuie f\cut\ o prob\ de optimizare a paginiidin punctul de vedere al cuvintelor cheie specifice pentru c\utare,înscriind din nou adresa paginii la motoare de c\utare [i repetândexperimentul de un anumit num\r de ori.


Ilustra]iile, pozele (Modulul 3)

Când vorbim despre introducerea elementelor grafice în paginile Web, cel mai desne 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 formatediferite [i pot fi caracterizate de anumite propriet\]i. De aceea, analiza ̀ n folosireaformelor de prezentare adecvate, care leag\ valoarea informativ\ cu navigareaintuitiv\ [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 efecteinteresante pe paginile Web [i a folosirii ̀ n totalitate a propriet\]ilor imaginii:

• Inserarea ilustra]iei cu un fundal transparent. Imaginea „suprapus\” pe documenteste mult mai estetic\. Ilustra]ia se potrive[te perfect în document, independentde 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, acesteefecte ducând la atragerea aten]iei utilizatorului. Un format tipic al salv\riianima]iei pe paginile Web este formatul GIF.

• Galeria de miniaturi. Având la dispozi]ie mai multe poze, merit\ s\ ne gândim lapreg\tirea unui document suplimentar, care s\ con]in\ aceste poze într-un formatmai 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

Figura 9. Galerie de fotografii

Pozele în miniatur\ permit ovizualizare rapid\ [i alegerea imaginiicare va fi desc\rcat\.

Salvare pe CD-ROM

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.


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 descarcede pe server, la dimensiunea original\.

• Divizarea imaginii. S-a observat c\ modul de compresie a fi[ierelor tip imaginepermite foarte des atingerea unor rezultate mai bune (un nivel mai bun decompresie) în cazul imaginilor mici, decât în cazul pozelor mari. Acest lucru serefer\ î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 scopulvizualiz\rii imaginii originale. Reconstruc]ia imaginii împ\r]ite în câteva fragmentese face pe principiul inser\rii diferitelor fragmente în tabel (figura 10).

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

247 300 bytes

40 000 bytes 32 800 bytes

45 200 bytes 32 300 bytes


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

Exemplu

$ sir=~/stiu/, #daca variabila $sir contine ~”stiu”. Adev\rat, deexemplu #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 oricecuvant # care se compune din litere mici si mari, de exemplu ”VrEmEa”

-etcaraC

lur

ereircseD ulpmexE

ei]acifinmeS

)ulpmexeed(

\nÎ.\zaemrueraciuluretcaracai]acifinmes\bmihcS

.erataacetatarttnusele,elaicepsrolenmesluzac/*\a/ ”*a“

^ .ieinillauaserartniediuluri[lutupecnî\tnizerpeR /A^/ ”anA“

$ .ieinillauaserartniediuluri[luti[râfs\tnizerpeR /$t/ ”acisip“

*C aetnianidederetcaracedluri[uasroiretnaluretcara

.”iroetlumiamuasorezed„aer\patopiul/1*og/ ”lg“i[rad,”loog“

+ederetcaracedluri[uasroiretnaluretcaraC

eduas\tado„aer\patoplobmisiutsecaaetnianid.”iroetlumiam

/1+og/ ”lg“i[rad,”loog“

– eretcaraceduinemodnU /$]z-a[^/ ”i“,”a“

?\lfaeseracluretcaraC.aetatilanoi]po\tnizerpeR

.\rapa\seiubertunrad,etaoplobmisiutsecaaetnianî/$a?k/ ”ae“i[rad,”akip“

. retcaracecirO /i./ ”]\b“i[rad”lac“

|

eseractxetnu-rtnÎ.avitanretla\tnizerpeRaetrapnidluretcaractâtaaer\paetaopet[evirtop

iutsecaa\tpaerdaetrapnidleci[tâc,\gnâts.lobmis

/$y|x^/ ”y“uas”x“

][oativeaurtnep–eretcaracedemi]lumo\nmaesnÎ

.eretcaracederameriuri[nî/]z-a[/ ”w“,”e“,”a“

]^[ .evitcepseriimi]lumaratnemelpmoc\tnizerpeR /]kba^[/i[rad,”\sac“

”[irepoca“

d\ \rficecirO /d\/ ”2A“nî”2”

D\ahplap \rficetseuneracretcaracecirO /D\/i[unrad”2A“

”321“

w\o,\cimuaseram\retiloetseeracretcaracecirO

.ereinilbuseda]uiniluas\rfic/w\/ ”D3“nî”D“

W\o,\cimuaseram\retiloetseuneracretcaracecirO

.ereinilbuseda]uinilnuuas\rfic/W\/ ”2+1“

s\\cida,eblaenmeselesiz-a[aertnidretcaracecirO,dnâredtupecnîedlunmes,baTlunmes,elii]aps

\nigap\uono,retnE– –

S\ blanmesnuetseuneracretcaracecirO $/S\^/ ”a“,”-“

t\ )ui]aps(baTluretcaraC – –

n\ uondnâR – –

Expresii regulate (Modulul 10)


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 denumiriale viru[ilor recunoscu]i (lb. engl. Recognition List, vezi fig. 11), iar `n help-ulacestuia 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 antiviruscare observ\ discret toate programele puse ̀ n func]iune [i fi[ierele deschise [i careverific\ dac\ acestea nu con]in fragmente de cod suspecte (fig. 12).


Temele de la finalul modulelor se rezolv\ pe formularele speciale, care se trimitspre corectur\ profesorului personal.

Tema pentru acas\ 9

1. Ce reprezint\ prescurtarea CGI? Descrie]i în câteva cuvinte posibilit\]ile caredecurg din generarea dinamic\ a con]inutului paginilor Web.

2. Scrie]i diferen]ele dintre câmpurile ascunse ale formularului [i câmpurile detip 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 codulHTML care permite activarea butonului (vezi desenul) care duce latransmiterea formularului c\tre scriptul CGI [i efectuarea înscrisului în Listade vizitatori.

5. Enumera]i tipurile de câmpuri ale formularului în care exist\ posibilitateaintroducerii de informa]ii sub form\ de text. Da]i câteva exemple de folosirea lor (codul HTML).

6. Ce atribute (drepturi de acces) trebuie s\ set\m scripturilor CGI, pentru caacestea 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]irezultatul muncii în acel cont. Trece]i adresa la care este accesibil\ pagina deWeb cu solu]ia exerci]iului pentru ca profesorul s\ poat\ comenta lucrarea [is\ poat\ sugera eventualele corecturi (bineîn]eles, referitoare la realizareatehnic\ a site-ului de Web).

Buton:

Lista de vizitatori

Transmit comentariul meu


Cu prezentarea formularului de tem\ pentru acas\se ̀ ncheie lec]ia demonstrativ\ a acestui curs.

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

`nscriindu-v\ la cursul de Web Design!

~n speran]a c\ materialul prezentat v-a convinsde accesibilitatea [i atractivitatea cursului nostru,

021/33.225.33; www.eurocor.ro

web design tl - eurocor.ro · lec]iile cuprind numeroase capturi de imagini, scheme, figuri [i...

Documents