32 lectie demo web design
TRANSCRIPT
-
8/8/2019 32 Lectie Demo Web Design
1/21
-
8/8/2019 32 Lectie Demo Web Design
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
-
8/8/2019 32 Lectie Demo Web Design
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.
-
8/8/2019 32 Lectie Demo Web Design
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.
-
8/8/2019 32 Lectie Demo Web Design
5/21
Web designlec]ie demonstrativ\4
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.
-
8/8/2019 32 Lectie Demo Web Design
6/21
5lec]ie demonstrativ\Web design
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.
-
8/8/2019 32 Lectie Demo Web Design
7/21
Web designlec]ie demonstrativ\6
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/8/2019 32 Lectie Demo Web Design
8/21
7lec]ie demonstrativ\Web design
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
-
8/8/2019 32 Lectie Demo Web Design
9/21
Web designlec]ie demonstrativ\8
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
-
8/8/2019 32 Lectie Demo Web Design
10/21
9lec]ie demonstrativ\Web design
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
-
8/8/2019 32 Lectie Demo Web Design
11/21
Web designlec]ie demonstrativ\10
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.
-
8/8/2019 32 Lectie Demo Web Design
12/21
11lec]ie demonstrativ\Web design
Aplica]ia concret\ a acestei instruc]iuni ar putea ar\ta n felul urm\tor:
Exemplu
for ($i=1; $i
-
8/8/2019 32 Lectie Demo Web Design
13/21
Web designlec]ie demonstrativ\12
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.
-
8/8/2019 32 Lectie Demo Web Design
14/21
13lec]ie demonstrativ\Web design
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
-
8/8/2019 32 Lectie Demo Web Design
15/21
Web designlec]ie demonstrativ\14
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.
-
8/8/2019 32 Lectie Demo Web Design
16/21
15lec]ie demonstrativ\Web design
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.
-
8/8/2019 32 Lectie Demo Web Design
17/21
Web designlec]ie demonstrativ\16
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
-
8/8/2019 32 Lectie Demo Web Design
18/21
17lec]ie demonstrativ\Web design
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)
-
8/8/2019 32 Lectie Demo Web Design
19/21
Web designlec]ie demonstrativ\18
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).
-
8/8/2019 32 Lectie Demo Web Design
20/21
19lec]ie demonstrativ\Web design
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
-
8/8/2019 32 Lectie Demo Web Design
21/21
Web designlec]ie demonstrativ\20
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