32 Lectie Demo Web Design

8/8/2019 32 Lectie Demo Web Design

1/21


2/21

LEC}IE

DEMONSTRATIV|

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 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 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 dinntreaga lume, ct [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 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\ [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 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 aavea un job de viitor n care s\ v\ dezvolta]i creativitatea.

INTRODUCERE


3/21

Web designlec]ie demonstrativ\2

Cursul este compus din 16 module de studiu [i cuprinde o mul]ime de exerci]iipractice care v\ vor ajuta s\ v\ pune]i n valoare cuno[tin]ele dobndite. Modalitateaaccesibil\ 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]iilecu un grad ridicat de complexitate cuprinse n curs, precum [i anumite programecare 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 sfr[itul fiec\rui modul este inserat\ tema pentruacas\, care cuprinde att ntreb\ri teoretice, ct [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 ct 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\. Din

punctul de vedere al num\rului de pagini, ea reprezint\ mai pu]in de jum\tate dincon]inutul unui caiet de studiu.


4/21

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 care

faciliteaz\ 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]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.


5/21


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 Internetn limbajul PERL.

Modulul 13 Cteva 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. Criptarea

po[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.


6/21


MODULUL 4

Foi de stil n cascad\

Introducere

Administrarea con]inutului unui site complex poate fi o provocare major\. n grijawebmasterului 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 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.

Cunoscnd 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, urmnd ca `n capitolele urm\toare s\ v\ fie prezentate regulile dedefinire 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\ 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 de

prezentare la structura documentelor (de exemplu, cele scrise n limbaj HTML). Ocaracteristic\ important\ a standardului CSS este caracterul s\u universal, lundu-sen 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 cteodat\ stiluri, reprezint\ unul dintre piloniiHTML-ului dinamic (Dynamic HTML). Sub aceast\ denumire se ascund tehnicilede reac]ie dinamic\ a programelor de navigare, n strns\ 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.


7/21


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 `nsistemul de operare MS Windows;

Internet Explorer 5.5 pentru vizualizarea paginii HTML (editat\) program denavigare, denumit [i browser, dezvoltat de Microsoft [i inclus gratuit n sistemul deoperare.

Simplitatea instrumentelor pe care le vom folosi nu nseamn\ ctu[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-discul

computerului, 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 cteva fragmente din modulul 1, n care face]i cuno[tin]\ cu

limbajul HTML.


8/21


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 cnd lucra]i s\ pute]ivizualiza fi[ierele n ntregime, deci [i cu extensie.

Pentru aceasta, n meniul View al ferestrei n care este deschis folderulLucruHTMLse 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 Hidefile 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), alegnd 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


9/21


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.htmleste 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 Viewal acestuia. ~n urma execut\rii acestei comenzi, cu ajutorulaplica]iei Notepad, va fi deschis\ fereastra care con]ine codul surs\ al fi[ieruluipagina1.html.

Editorul de text Notepadeste 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 urmnd ca noi

s\ scriem efectiv codul n limbajul HTML. Modific\rile f\cute n acest fi[iertrebuie salvate [i re`nc\rcate n browser.

i

i

i


10/21


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, alegnd 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, eliminndu-se timpii mor]i ce apar n utilizarea mouse-ului.

i

i


11/21


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.


12/21


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

Exemplu

for ($i=1; $i


13/21


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 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 lanceputul 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]in 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 trziu definirea formal\ a algoritmului defunc]ionare a magazinului virtual.

e

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

[i modulul 13.


14/21


II. n cea de-a doua etap\ trebuie mp\r]ite toate opera]iile realizaten 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 o

pute]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 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 nvedere scopul activit\]ii magazinului, adic\ maximizareavnz\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 cnd ve]i cunoa[te mai bine

principiile de programare n limbajul Perl [i cnd ve]i st\pnimodul 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\rii

documentului. Aceasta se poate realiza prin introducerea pe pagina web a unuiscript simplu n limbajul JavaScript (fig. 16).

Con]inutul documentului.

Data actualiz\rii:

document.write (document.lastModified);

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


15/21


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).Seteaza pagina de start

Adauga la favorite

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 cteva motoare de c\utaren 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, trebuie

preg\tit un tabel ale c\rui coloane vor con]ine, mai nti, 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\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.

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 repetndexperimentul de un anumit num\r de ori.


16/21


Ilustra]iile, pozele (Modulul 3)

Cnd vorbim despre introducerea elementelor grafice n paginile Web, cel mai desne 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 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\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, 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.Cteodat\, anima]ia este folosit\ la prezentarea `n etape a informa]iilor, acesteefecte ducnd la atragerea aten]iei utilizatorului. Un format tipic al salv\riianima]iei pe paginile Web este formatul GIF.

Galeria de miniaturi. Avnd la dispozi]ie mai multe poze, merit\ s\ ne gndim 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 imaginireprezentative [i tabelelepermit nsu[irea f\r\probleme a con]inutului. Iat\ cteva astfel de fragmente din modulele 3, 10 [i 15.


17/21


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, dect n cazul pozelor mari. Acest lucru serefer\ 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 scopulvizualiz\rii imaginii originale. Reconstruc]ia imaginii mp\r]ite n cteva 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


18/21


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 orice

cuvant # care se compune din litere mici si mari, de exemplu VrEmEa

-etcaraClur

ereircseD ulpmexEei]acifinmeS)ulpmexeed(

\ n.\zaemrueraciuluretcaracai]acifinmes\bmihcS .erataacetatarttnusele,elaicepsrolenmesluzac /*\a/ *a

^ .ieinillauaserartniediuluri[lutupecn\tnizerpeR /A^/ anA

$ .ieinillauaserartniediuluri[luti[rfs\tnizerpeR /$t/ acisip

*C aetnianidederetcaracedluri[uasroiretnaluretcara

.iroetlumiamuasorezedaer\patopiul/1*og/ lgi[rad,loog

+ederetcaracedluri[uasroiretnaluretcaraC

eduas\tadoaer\patoplobmisiutsecaaetnianid.iroetlumiam

/1+og/ lgi[rad,loog

eretcaraceduinemodnU /$]z-a[^/ i,a

? \lfaeseracluretcaraC.aetatilanoi]po\tnizerpeR .\rapa\seiubertunrad,etaoplobmisiutsecaaetnian/$a?k/ aei[rad,akip

. retcaracecirO /i./ ]\bi[radlac

|

eseractxetnu-rtn.avitanretla\tnizerpeRaetrapnidluretcaracttaaer\paetaopet[evirtop

iutsecaa\tpaerdaetrapnidleci[tc,\gnts.lobmis

/$y|x^/ yuasx

][oativeaurtneperetcaracedemi]lumo\nmaesn

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

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

[irepoca

d\ \rficecirO /d\/ 2An2

D\ahplap \rficetseuneracretcaracecirO /D\/i[unrad2A

321

w\o,\cimuaseram\retiloetseeracretcaracecirO

.ereinilbuseda]uiniluas\rfic/w\/ D3nD

W\o,\cimuaseram\retiloetseuneracretcaracecirO

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

s\\cida,eblaenmeselesiz-a[aertnidretcaracecirO,dnredtupecnedlunmes,baTlunmes,elii]aps

\nigap\uono,retnE

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

t\ )ui]aps(baTluretcaraC

n\ uondnR

Expresii regulate (Modulul 10)


19/21


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


20/21


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

Tema pentru acas\ 9

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

2. Scrie]i diferen]ele dintre cmpurile ascunse ale formularului [i cmpurile detip text care apar pe paginile Web.

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

4. Presupunnd c\ dispune]i de un fi[ier de grafic\ (carte.gif), scrie]i 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 cmpuri ale formularului n care exist\ posibilitateaintroducerii de informa]ii sub form\ de text. Da]i cteva 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 (binen]eles, referitoare la realizarea

tehnic\ a site-ului de Web).

Buton:

Lista de vizitatori

Transmit comentariul meu


21/21


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

Date post:	10-Apr-2018
Category:	Documents
Upload:	cristina-maria
View:	239 times
Download:	0 times

32 Lectie Demo Web Design

Documents