D

EM
DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

LE NST
O
C R
IE ATI
INTRODUCERE

V
V dorii s creai de la 0 propriul site
web? Ai vzut c se fac angajri n rndul
cunosctorilor de programare web? Acum
avei o ans n plus, mulumit cursului
Eurocor Design i programare Web.
Fie c dorii s transformai o pasiune n
profesie, fie c abia acum nvai noiunile
de baz n programare web, acest curs i
propune s v nvee:
modalitile optime de utilizare a limbajelor de programare (HTML, XML,
XHTML, PHP).
CSS ce sunt i cum se folosesc.
despre bazele de date n MySQL i despre limbajul Java.
folosirea Adobe Dreamweaver.
grafic, dinamicitate i promovare n site-uri.

nvai comod!
Primii acas, la oficiul potal sau direct la birou pachetele de curs, pe care le parcurgei
cnd vrei! Studiai fr stres, n confortul propriului cmin, n pauza de mas, n
weekenduri, dup program, vara sau iarna... cnd i unde dorii! Putei pune rapid n
practic noile cunotine, atrgnd un binemeritat succes!

V vei bucura de o atenie deosebit!

Beneficiai de sprijinul unui profesor personal, un specialist cu experien, care poate fi
contactat prin pot sau online.
Webdesignerii sunt specialiti care aparin nu doar domeniului IT, ci mai degrab
departamentelor de creaie din diverse companii sau celor de marketing i publicitate.
EUROCOR v ajut s devenii un specialist cutat de muli angajatori!
Mult succes!

LECIA DEMONSTRATIV v ajut s v familiarizai cu materialele i metoda de

studiu EUROCOR. Din punctul de vedere al numrului de pagini, aceasta reprezint
mai puin de jumtate din coninutul unui caiet de curs.
V prezentm cteva seciuni teoretice, exemple, exerciii i un model de tem, selectate
din module diferite, pentru a vedea exact cum sunt structurate caietele.

2
LECIE DEMONSTRATIV DESIGN I PROGRAMARE WEB

STRUCTURA LECIILOR
Studiul eficient al cursului nostru este garantat de structura unitar a celor
16 module.
Informaiile noi sunt prezentate ntr-un mod atractiv, iar procesul de
memorare devine simplu i rapid!
Caietele se parcurg uor, ntr-un mod relaxat, datorit semnelor
grafice special concepute pentru a marca diverse uniti de coninut ale
modulelor.
Limbajul este accesibil, explicit, iar accentul este pus pe partea practic.
Vei nva ceva util, valorificndu-v n acelai timp abilitile practice,
dar i creativitatea.
Cursul urmrete de-a lungul su un studiu de caz ale crui resurse le
regsii ntr-un cont special creat.

PRIMIREA CURSULUI
La Eurocor, cursanii aleg unde s primeasc pachetul de curs! Dvs. ce alegei?
1. Acas, la cutia potal (Cutia potal trebuie s aib dimensiunile de
minimum 22x30x1 cm.).
2. La serviciu.
3. La oficiul potal de care aparinei (Adresa declarat la nscriere trebuie s
fie cea din buletin).

CONTUL DE CURSANT
@ Fiecare cursant are propriul cont pe site-ul www.eurocor.ro. Aici gsii
informaii despre stadiul trimiterii pachetelor de curs sau plile efectuate i
nregistrate. Din contul de cursant se pot accesa i aplicaiile TemeOnline sau
PlataOnline.

ABSOLVIREA
Odat cu expedierea ultimului pachet de curs, vei primi i testul de evaluare
final. Calificativele obinute pot fi: foarte bine, bine i insuficient (n funcie
de punctajul realizat). Odat promovat acest test, vei obine Certificatul de
absolvire Eurocor.

3
DESIGN I PROGRAMARE WEB
Programa cursului Design i programare WEB
Modulul 1
Introducere n crearea website-urilor. Ce sunt
website-urile? Cu ce se ocup webdesignerii?
Organizarea unui proiect de webdesign: strategiile i
paii generici de dezvoltare a unui website. Care sunt
principalele limbaje de programare; cum au aprut
website-urile? Browsere de internet i editoarele
HTML
Modulul 2
Tipuri de website-uri; structura i ergonomia
website-urilor. Pagini personale bloguri i
promovarea blogurilor. Portal web. Catalog web.
Magazin online. Site de banc. nvarea online.
Biblioteca. Revista web. Cum s structurm un
website? Diagrama unui website
Modulul 3
Limbajul HTML. Ce este limbajul HTML? Tipuri
de date HTML. Structura global a unui document
HTML. Exemple HTML linii de cod. Exemple
de website-uri bazate pe HTML
Modulul 4
XML i XHTML. Structura logic i fizic a
XML. Elemente i atribute XML. Diferene dintre
XHTML i HTML
Modulul 5
Editoare HTML. Ce este un editor HTML?
Introducere n Adobe Dreamweaver. Cum putem
dezvolta un website folosind Adobe Dreamweaver?
Ce sunt template-urile i cum putem s le folosim cu
ajutorul Adobe Dreamweaver? Adobe Dreamweaver
tips & tricks. Editoare HTML gratuite.
Modulul 6
Grafic i multimedia n website-uri. Estetica unui
website; cromatica. Cum s nu arate un website
de ce trebuie s ne ferim atunci cnd dezvoltm
un website? Editoarele foto ca prim utilitar pentru
website-uri (Corel Photo-Paint, Adobe Photoshop);
ilustraiile, filmele i sunetul ntr-un website
LECIE DEMONSTRATIV
Modulul 7
Foi de stil n cascad (CSS). Cum definim CSS? Rolul
CSS n website-uri. Exemple de CSS n website-uri
Modulul 8
Dinamica website-urilor i interaciunea lor cu
utilizatorii. Cum s dezvoltm o pagin web dinamic
din punctul de vedere al dinamicitii sale. Cmpuri
automate. Pagini interactive. CGI. Conceptul de client-
side/server-side scripting. Despre tehnologia Flash.
Editoare Flash. Sistem de gestiune a coninutului unui
website
Modulul 9
PHP partea 1. Ce este limbajul PHP? Instalarea i
configurarea. Informaii de referin despre limbaj.
Funcii. Clase i obiecte
Modulul 10
PHP partea a 2-a. Securitatea. Sesiuni de lucru.
Cookies
Modulul 11
Programarea website-urilor n limbajul JAVA. Ce este
limbajul JAVA? Apariia JAVA. Pagini programate n
JAVA. Ce este JavaScript? Cum funcioneaz JavaScript.
JavaScript n website-uri?
Modulul 12
Baze de date. Utilizarea bazelor de date n contextul
website-urilor. Interogarea bazelor de date MySQL n
PHP i JAVA
4
LECIE DEMONSTRATIV
Modulul 13
Securitatea i testarea website-urilor. Cum se
testeaz un website? Securitatea n Microsoft
Internet Explorer. Securitatea n Mozilla Firefox.
Cum s dezvoltm un website din punctul de vedere
al securitii?
Modulul 14
Promovarea website-urilor i reclamele n
website-uri. Ce este promovarea web? De ce
este important s promovm un website? Cum
s dezvoltm un website fiind contieni de la
nceput de tehnicile de promovare? Reclamele
n website-uri: beneficii, rol. Cum s poziionm
reclamele pe website? Cum se creeaz un newsletter?
5
DESIGN I PROGRAMARE WEB
Modulul 15
Web 2.0 i alte tendine de dezvoltare a website-urilor.
Ce este Web 2.0? Care este viitorul website-urilor? Ct
timp poate fi valabil un website? Tendine de dezvoltare
a website-urilor
Modulul 16
Studii de caz de ce unele website-uri au succes.
Studii privind website-uri cunoscute. Website-uri sub
lup: de ce au sau nu succes? Exemple. Recapitularea
cunotinelor sub o form aplicat
DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

5
Modul

MODUL
5
EDITOARE HTML

Atunci cnd realizm un website sau editm fiierele unui website exist multe
modaliti prin care putem realiza aceste activiti. Probabil c ai auzit de foarte
multe ori discutndu-se de editoare HTML sau de editoare web. Ne propunem n
acest curs s punctm ce este acela un editor HTML, cu ce ne poate ajuta i care
sunt cele mai bune produse din aceast categorie, care sunt costurile lor i, evident,
pe care vi-l recomandm pentru a-l utiliza.
Vom discuta n acest curs pe larg despre Adobe Dreamweaver, de departe cel mai
popular editor HTML, ct i despre alte editoare HTML gratuite. V vom oferi dou
astfel de alternative.
Trebuie s privim un editor HTML ca pe un mediu unde putem dezvolta un website.
Un editor HTML v permite s transformai mai rapid, mai facil i mai corect un
design grafic ntr-un website sau dezvoltarea unui schelet complet nou pentru un
website. Toate acestea le vom discuta pe larg n cele ce urmeaz, aplicndu-le
punctual, alturi de Dreamweaver, pentru a v ajuta s nelegei la ce este bun un
Fiecare modul astfel de editor i cum v poate uura munca cu un website.
ncepe cu o
introducere OBIECTIVE
n care sunt
n acest modul ne propunem:
prezentate s nelegem ce este un editor HTML i care sunt funciile sale;
principalele s aflm ce este i la ce folosete Adobe Dreamweaver;
aspecte ce vor fi s cunoatem care sunt principalele funcii Adobe Dreamweaver;
studiate. s aplicm aceste funcii n practic i s realizm nite modificri n
website-ul nostru;
s descoperim cteva sfaturi i trucuri privind Adobe Dreamweaver;
s nvm ce sunt acelea template-uri web i cum putem s le
editm folosind un editor HTML;
Obiectivele pe s studiem dou alternative pentru Adobe Dreamweaver, i anume
care trebuie s dou editoare HTML gratuite.
le atingei prin
parcurgerea
fiecrui modul
1. Ce este un editor HTML?
v ghideaz Dac ar fi s facem o analogie inedit, v-a propune s v imaginai c un editor
HTML este o scen de teatru. Un editor HTML este un mediu de dezvoltare cu
nvarea. decoruri i modaliti prin care putem da natere website-ului nostru. Asemenea
unei scene de teatru, un editor HTML dispune de decoruri, de actori, de lumini, de
cortin i de foarte muli lucrtori, n spate: mainiti, regizori, stiliti amd. Toate
acestea, transpuse din lumea spectacolului n lumea editoarelor HTML, au la final
acelai scop realizarea unui livrabil n cazul nostru un website.

Design i programare web //// 1

(selecie din Modul 5, pagina 1)

6
LECIE DEMONSTRATIV DESIGN I PROGRAMARE WEB

Dinamica website-urilor i interaciunea lor cu utilizatorii MODUL 8

4. CGI

Iniialele CGI vin de la Common Gateway Interface. CGI este un proto-

col standard care interfaeaz aplicaiile cu un server. Evident c tehno-
logia CGI este utilizat cel mai des n universul web i, implicit, serverele
care utilizeaz CGI sunt serverele web.

Informaiile Un server care utilizeaz CGI va rspunde cererilor din partea clienilor. Cel mai
importante i ntlnit caz este scenariul clasic:
Aplicaia (web browser: ex. Microsoft Internet Explorer) cere unui server o
definiiile au fost pagin web.
marcate special Serverul (server web) rspunde oferind aplicaiei fiierele website-ului.

pentru a facilita V vei ntreba n ce fel ne poate ajuta pe noi CGI. Atunci cnd spunem CGI, trebuie
s l privim ca pe o tehnologie complementar a unui website. Nu este nevoie s
nelegerea lor. intervenim asupra sa n vreun fel sau s l configurm n vreun fel. Trebuie doar
s fim contieni de existena sa i de rolul su acela de legtur dintre aplicaie
(browser de internet) i serverul web.
CGI n cteva cuvinte:
Tehnologia CGI a fost lansat nc din 1993.
CGI poate intermedia att schimbul de fiiere, ct i comenzi.
Exist alternative la CGI: variantele lansate de Apache sau de Netscape, ct i
versiunea SCGI (Simple Common Gateway Interface), WSGI sau FastCGI.

5. Conceptul de client-side/server-side scripting

Aa cum am specificat mai sus, vom studia acum mai n amnunt tehnologiile
client-side i server-side scripting. Aceste dou tehnologii au aceeai modalitate
de lucru i presupun prezena unor script-uri pentru a funciona. Aceste script-uri
trebuie s le privim ca nite instruciuni care sunt utilizate de website, mai exact de
browserul de internet sau de serverul web, pentru a afia coninutul i website-ul
ntr-un anume fel.
Singura modalitate n care putem separa aceste script-uri se petrece prin natura
celor dou, mai exact, unde sunt situate i de unde acioneaz: de la nivel de server
sau de la nivel de browser.
Ce fac aceste script-uri? Ei bine, rezultatul este unul extrem de simplu: schimb,
n timp real, modul de afiare a coninutului n funcie de datele introduse sau
solicitate de vizitatorul website-ului. Spre exemplu, client-side script-urile sunt
scrise n limbaje ca JavaScript sau VBScript. De cele mai multe ori, client-side
script-urile sunt incluse ca linii de cod n codul HTML (aceast procedur este
denumit embedded scripting). De asemenea, script-urile pot fi coninute i de un
fiier extern, aceast procedur fiind denumit external scripting.

Client-side script-urile funcioneaz n urmtorul fel: browserul de

internet (clientul) acceseaz web-serverul care deine coninutul
website-ului, descarc pagina HTML home, spre exemplu, i, atunci,
script-urile incluse n aceast pagin intr n aciune i afieaz coninutul
n funcie de cele necesare.

Design i programare web //// 5

(selecie din Modul 8, pagina 5)

7
DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

Securitatea i testarea website-urilor MODUL 13

securitatea Un alt aspect important n securitatea sistemului este software-ul actual care
software-ului reprezint sistemul. Software-ul poate avea bug-uri i bree de securitate care
permit accesul chiar i fr o parol. Software-ul sistemului trebuie s fie actualizat
(adus la zi) prin intermediul patch-urilor de securitate i actualizri.

defeciunile Web serverele sunt formate dintr-o suit de programe complicate care conin frecvent
software-ului bug-uri, care pot, n anumite condiii, s permit hackerilor accesul la sistemul dvs.,
chiar dac acetia nu cunosc parolele de acces. Dac avei webhosting din partea
unei companii specializate n aa ceva, atunci este responsabilitatea lor de a se
asigura c software-ul este actualizat (dar ar trebui s verificai dac ei chiar fac
acest lucru). Dac rulai propriul dvs. server, atunci trebuie s fii foarte ateni n
ceea ce privete securizarea lui.

meninerea Problemele de securitate pe website-uri apar, de cele mai multe ori, din cauza
software-ului serverelor web pe care ruleaz. Uneori, aceste probleme sunt relativ minore, doar
actualizat permind unui atacator s fac inactiv serverul dvs. pn cnd rezolvai problema.
Cu toate acestea, aceste bree de securitate trebuie ndeprtate. Ele permit acces
atacatorului la fiierele serverului dvs.
Toate programele implicate n procesul acesta de acces i management al serverului
pot influena ntr-un fel sau altul securitatea sistemului dvs. S considerm, spre
Cuvintele exemplu, c accesai serverul prin consol ssh de la deprtare. Vei stoca parola,
s spunem pe clientul dvs. de e-mail, i o vei introduce prin intermediul unei
cheie ajut la conexiuni de internet pe consola serverului de la deprtare. Poate v gndii c
identificarea sunt doar cteva elemente de risc n acest caz. Ei bine, nu. Sunt foarte multe. Avem
urmtoarele elemente:
principalelor Sistemul de operare de pe computerul dvs.
teme descrise n Clientul de mail de pe computerul dvs.
curs. Conexiunea la internet.
Sistemul de operare de pe maina accesat prin consol.
Toate aceste elemente i modul n care sunt ele configurate afecteaz securitatea
informaiei n acest caz. Sistemele de operare trebuie protejate cu programe
antivirus, conexiunea la internet i clientul de e-mail, la fel, protejate.
S nu cdei n capcana de a gndi c un anume server este sigur doar pentru c
se spune acest lucru sau pentru c este furnizat de un brand anume.

EXEMPLU

Unul dintre cele mai ameninate, sparte i atacate servere de web este Microsoft IIS.

Exerciiul 2

Considerai necesar existena unui program antivirus pe computerul unui

webdesigner? Pentru c ntrebarea poate fi considerat retoric, v vom
ruga s descrcai, pentru acest exerciiu, aplicaia Spybot Search&Destroy,
un utilitar anti-spyware i anti-malware prezent n momentul de fa, de
civa ani, n topurile de astfel de aplicaii. Aplicaia se poate descrca de
la adresa http://www.safer-networking.org. Descrcai aplicaia i scanai
cu aceasta ultima versiune a website-ului nostru de test. Utilizai astfel de
aplicaii pentru toate proiectele dvs. web. Scanai-le cu regularitate!

Design i programare web //// 8

(selecie din Modul 13, pagina 7)

8
LECIE DEMONSTRATIV DESIGN I PROGRAMARE WEB

Grafic i multimedia n website-uri MODUL 6

Studiai nainte alte proiecte similare cu al dvs.

Ca i n cazul oricrei opere de art, nu exist att loc pentru greeal, nu exist
greeli predefinite, ci, mai degrab, greeala nceptorului i lipsa de inspiraie
a creatorului. Pentru c suntei la nceput n manipularea culorilor, elementelor
grafice, conceptelor grafice, este bine mai nti s studiai alte website-uri similare
ca domeniu de activitate cu cel cruia trebuie s-i stabilii designul. Trebuie, evident,
s v facei foarte bine temele nainte de a alege culori sau de a stabili ce elemente
vei folosi n designul dvs.

Folosii imagini de calitate

n alt ordine de idei, trebuie s fii foarte ateni ce fel de ilustraii folosii n website-ul
dvs.: imagini de produse, imagini pentru bannere, imagini pentru diferite elemente
grafice (linii, footer etc.). Toate aceste imagini trebuie s fie nu neaprat de rezoluie
ct mai nalt, ct de o mrime care s permit ncrcarea mai uoar pe pagin,
altfel devenind suprtoare pentru vizitatori i determinndu-i n cele din urm s
prseasc site-ul. S fie corecte i ct mai curate.
Evitai s utilizai imagini realizate cu camere foto neperformante (de ex. telefon
mobil), neclare, culori defecte (arse) etc. ncercai s oferii o atenie sporit
imaginilor pe care le utilizai n proiectele dvs. Acesta este unul dintre principalele
motive care fac un website s arate ieftin.

EXEMPLU

Mai jos, un exemplu de website care folosete imagini de calitate ndoielnic, ceea
ce duce la un aspect nengrijit, urt i ieftin:

Exemplele
ilustreaz
diverse modele
de website-uri
sau secvene de
cod explicate
n seciunile
teoretice.

Design i programare web //// 9

(selecie din Modul 6, pagina 8)

9
DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

PHP (partea a II-a) MODUL 10

EXEMPLU

Spre exemplu, s ne imaginm un forum. Pe un forum, utilizatorii pot posta mesaje

care vor fi afiate ctre ali utilizatori. Ca tehnologii, avem nevoie de Javascript,
pentru a posta aceste mesaje, i de HTML, pentru a le da o anumit form, pentru
a le formata.
Exist ns o problem n acest caz. Chiar dac este scenariul corect pentru a
realiza acest lucru, pot aprea extrem de multe probleme de securitate. Trebuie s
Exemplele avem n vedere c printre vizitatorii acelui forum putem avea tot felul de persoane
trimit la situaii ru intenionate, hackeri sau entuziati n ale informaticii care doresc s exploateze
diferite bree de securitate ale forumului. Unul dintre lucrurile duntoare pe care
concrete din le pot face este s introduc Javascript n sursa PHP. Acest lucru poate avea mai
activitatea unui multe rezultate. Poate spre exemplu s fie utilizat doar pentru a incomoda vizitatorii
forumului prin generarea de mesaje infinite prin care vizitatorul este atenionat s
webdesigner. nchid browserul sau s viziteze un alt website.

Aceasta este versiunea simpl, cazul n care atacurile nu sunt ru intenionate.

Pot exista ns atacuri extrem de duntoare, atacuri care vor introduce n ecuaie
keyloggere sau care vor recupera userii i parolele de pe server sau din computerele
vizitatorilor.

Cum s ne protejm de Cross Site Scripting?

La fel ca i n cazul SQL Injection, este destul de uor s ne protejm i mpotriva
Cross Site Scripting. Pentru a face acest lucru, trebuie s ne folosim de o funcie a
PHP, numit htmlentities_(). Aceast funcie pur i simplu va converti caracterele
care au un neles n limbajul HTML ctre entitile lor corespunztoare. De exemplu,
tag-urile HTML, dup cum am nvat n modulele anterioare, ncep cu un semn
denumit mai mic ca, anume <. Folosind funcia PHP de mai sus, acest caracter
va fi convertit n &lt;. Vom merge tot pe exemplul anterior, i anume cel cu forumul.
Nicio problem pn aici, doar c stabilisem c dorim s le furnizm vizitatorilor
posibilitatea de a formata coninutul forumului, implicit de a utiliza HTML pentru
formatarea textului. Aplicnd procedura din paragraful anterior, din pcate, aceast
posibilitate nu va mai exista. De aceea, trebuie s gsim o soluie alternativ.
Vom folosi o particularitate care se numete bbcodes. Aceasta are o sintax
foarte similar cu HTML i, n condiiile n care ai mai folosit HTML, nu este greu
de utilizat.
Un tag foarte uzual n bbcode este tag-ul URL.

EXEMPLU

S ne imaginm c cineva a introdus n cod:

[url=http://www.eurocor.ro]Institut European[/url]
Acesta va fi convertit de bbcodes n:
<a href=http://www.eurocor.ro>Institut European</a>

n acest fel ne putem proteja de XSS. Practic, vom vedea pe larg n partea de studiu
de caz a acestui modul.

Design i programare web //// 10

(selecie din Modul 10, pagina 9)

10
LECIE DEMONSTRATIV DESIGN I PROGRAMARE WEB

PHP (partea a II-a) MODUL 10

Studiu de caz
cerine noi Vom presupune c firma productoare de pori din fier forjat i dorete noi funcii
client pe website. Aadar, acetia doresc o seciune nou i separat n website, cu
urmtoarele particulariti:
S fie accesibil din meniul orizontal sub forma unui buton nou.
Numele su s fie Clieni.
n cadrul acesteia, clienii companiei s aib posibilitatea de a se autentifica cu
un utilizator i o parol pentru a ptrunde ntr-o seciune dedicat fiecruia.
Posibilitatea de a crea un utilizator i o parol pentru fiecare client al companiei.
Utilizatorul i parola s conduc clienii ctre o seciune dedicat fiecruia.
Realizarea unui cont de client.
Includerea n pagina client1 a unei liste Microsoft Excel de preuri, produse i
servicii.
Acestea sunt cerinele primite din partea companiei productoare de pori din fier
forjat. La aceste cerine mai adugm i noi cteva:
Realizarea materialelor necesare (lista Excel).
Implementarea tuturor punctelor de mai sus n PHP pe structura actual a
website-ului.
Simulare de atac de securitate PHP.
Identificarea breelor de securitate PHP n proiectul nostru.
Rezolvarea breelor.

Realizarea materialelor necesare

Vom purcede la realizarea unui fiier separat HTML, pornind de la un fiier Excel.
Presupunem c clientul ne-a furnizat aceste documente Excel pentru a-l include
n zona client1. Astfel, ne propunem n cele ce urmeaz s convertim acest
document n format HTML, crend un fiier HTML separat. Aadar, vom porni de la
documentul Excel:

Print
screen-urile i
studiul de caz
prezentate n
acest curs v
faciliteaz nsuirea
cunotinelor.

Design i programare web //// 26

(selecie din Modul 10, pagina 26)

11
 DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

Web 2.0 i alte tendine de dezvoltare a website-urilor MODUL 15

Comunitile online i-au pus amprenta i asupra mediului de afaceri. Astfel,

numeroi oameni de afaceri apeleaz la acest mijloc de comunicare, ale crui
Materia este beneficii sunt multiple, pentru a identifica noi oportuniti care s le permit s
uor de neles i dezvolte business-ul. Companiile au nceput s i creeze profile pe reelele
sociale pentru a ajunge mult mai uor la public i pentru a interaciona cu acesta
datorit tabelelor, ntr-o manier flexibil, deschis, transparent. Mai ales n comunicarea online,
schemelor i reelele sociale reprezint instrumente indispensabile oricrui specialist n relaii
publice. Este important ca persoanele nsrcinate cu funcia de comunicare a unei
imaginilor companii s monitorizeze discuiile care au loc n cadrul reelelor sociale, discuii
relevante. care ar fi de preferat s ia forma unui dialog, ns acest lucru nu este suficient. Dac
mesajele pe care le trimitem reuesc s atrag atenia i interesul publicului, acesta
va reaciona, iar aici intervin riscurile unei astfel de aciuni. Trebuie s fim ateni la
mesajele i comentariile care vin din partea celorlali membri. n momentul n care o
persoan trimite un feedback la un mesaj postat de o companie, aceasta ateapt
un rspuns n cel mai scurt timp. Nimnui nu-i place s fie lsat s atepte. Din
contr, oamenii vor s simt c li se acord atenie, c opinia lor conteaz. Aceasta
este premisa de la care trebuie s pornim atunci cnd comunicm prin intermediul
unei reele sociale.

concluzii Un studiu din aprilie 2007 despre reelele de social networking, realizat n Statele
Unite, dezvluia urmtoarele concluzii:
Website-urile de search clasic (Yahoo, Google, MSN) rmn de departe
n topul celor mai utilizate aplicaii web, n ciuda popularitii n cretere a
site-urilor de social search.
Website-ul Yahoo este vizitat zilnic de 40% din respondenii testului.
Motive pentru cutarea pe website
Conectarea cu 35%
ali utilizatori 49%
2%
6%

6%
7%
1%
2%
Cutarea 4%
de servicii/ 1%
produse 32%
56%
39%
39%
41%

Cumprarea 1%
de servicii/ 2%
produse 1%
6%
5%
14%
46%

30%
Distracie/ 19%
amuzament 72%
19%
6%
16%
8%
3%

Alte motive 10%

5% MySpace
6%
FaceBook
14%
13% YouTube
17%
iVillage
20%
2% TripAdvisor
Yahoo! Answers
23%
Nu au realizat 22% Craigslist
nicio cutare 19% Amazon
28%
20%
17%
13%
8%

0% 20% 40% 60% 80% 100%

Procente de vizitatori online
Design i programare web //// 23

(selecie din Modul 15, pagina 23)

12
LECIE DEMONSTRATIV DESIGN I PROGRAMARE WEB

Grafic i multimedia n website-uri MODUL 6

Rezervai astfel locuri libere n zona de stnga sus i dreapta sus unde putem
introduce mai trziu elementele necesare. Vom schimba n cele ce urmeaz
culoarea de background a primului layer, din alb, n albastru. Pentru aceasta ne
vom poziiona cu mouse-ul i vom efectua clic pe layerul Background, vom debifa
vizibilitatea Layer 1 (cu clic pe ochiul din faa Layer 1) i vom selecta din paleta
de culori culoarea cyan:

Utiliznd o alt unealt Photoshop, Paint Bucket Tool, pe care o gsii n bara de
unelte n partea stng, vom umple bannerul alb cu culoarea albastr:

Exerciiul 5

Folosii Paint Bucket Tool sau un utilitar similar din editorul dvs. foto, pentru
a umple documentul creat la exerciiul 4 cu culoarea neagr.

Exerciiile Vom schimba apoi modul n care se amestec cele dou layere. Trebuie s ne
imaginm c bannerul final este format dintr-o serie de layere (fiecrui obiect nou
v testeaz la fiindu-i asociat un layer), asupra crora putem interveni separat, setrile de culoare,
nivel practic de contrast, de luminozitate, de claritate etc. putnd fi altele pentru fiecare n parte.
Ne propunem, astfel, s amestecm cele dou layere pentru a da o uoar tent
cunotinele de cyan imaginii principale cu poarta din fier forjat.
asimilate.
Design i programare web //// 21

(selecie din Modul 6, pagina 21)

13
DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

Grafic i multimedia n website-uri MODUL 6

Un filmule pe youtube.com are urmtoarea interfa:

Dup cum spuneam i mai sus, n acest fel youtube.com folosete flash pentru a
afia filmuleele sale. Un alt exemplu de afiare a filmuleelor folosind flash este:

Se pot utiliza diferite interfee pentru a realiza acest lucru. Dup cum v-am promis,
atunci cnd vom nva puin mai pe larg Flash, vom putea s exemplificm cum
putem s introducem astfel de filmulee n proiectele noastre.
Pn atunci ns, trebuie s avei n vedere modul n care putei integra aceste
filmulee n proiectul dvs. sau, dac realizai un website pentru un client, ce i putei
promite pe parte de filmulee, care sunt limitrile, ce este greu i ce este uor de
realizat n privina lor. n principiu, filmuleele pe care le vei introduce ntr-un proiect
pot fi de orice fel, orice format ct de ct cunoscut, rspndit. Exist nenumrate
utilitare care ne pot ajuta s transformm filmuleul nostru n orice format dorim,
pentru a se potrivi cu tehnologia pe care o vom utiliza n website-ul nostru.

Exerciiul 8

Pentru acest exerciiu v propunem inserarea unui film youtube.com pe o

pagin HTML. Efectuai, pentru aceasta, urmtorii pai:
Creai o pagin nou html cu ajutorul Adobe Dreamweaver.
Accesai website-ul youtube.com.
Cutai un filmule preferat.
Inserai n pagina HTML codul HTML embeded oferit de youtube pe
care l putei gsi n dreapta filmuleului n csua denumit Embed.
Salvai pagina dvs. i vizualizai-o folosind un browser de internet.

Design i programare web //// 33

(selecie din Modul 6, pagina 33)

14
LECIE DEMONSTRATIV DESIGN I PROGRAMARE WEB

RSPUNSURI LA EX E Ri multimedia
Grafic C I I In website-uri MODUL 6

Exerciiul 2
i putem recomanda s renune la pattern-ul de pe background pe motiv c
ncarc inutil website-ul;
i putem recomanda s foloseasc o culoare complementar pentru background
(negru sau alte nuane de negru);
V verificai i putem recomanda s schimbe culoarea textului, de preferat, pentru lizibilitate
culoarea alb (se tie c cele mai recomandate scenarii text/background sunt
rapid, cu formate din alb/negru sau negru/alb);
ajutorul putem s pstrm culoarea roie a textului doar n anumite zone.
rspunsurilor
Exerciiul 3
la exerciii.
prea multe culori;
prea multe elemente;
prea nghesuit;
fundal nepotrivit (nu este neutru);
suprapunere imagini.

Exerciiul 8
S presupunem c dorii s postai pe site-ul dvs. trailerul unui film. Noi am ales
spre exemplificare Wall-E. Dup gsirea filmuleului pe Youtube, copiai din partea
dreapt a ecranului codul Embed.

Avei mai multe opiuni pentru aceasta mai jos privind includerea filmuleelor
asemntoare (Include related videos), afiarea marginii i a culorii acesteia (Show
Border) etc. Codul embed copiat cu Ctrl+C l vei posta pe pagina site-ului dvs. cu
Ctrl+V i va arta astfel:
<object width=580 height=360><param name=movie value=http://www.
youtube.com/v/8-_9n5DtKOc&hl=en&fs=1&color1=0x234900&color2=0x4e9
e00&border=1></param><param name=allowFullScreen value=true></
param><param name=allowscriptaccess value=always></param><embed
src=http://www.youtube.com/v/8-_9n5DtKOc&hl=en&fs=1&color1=0x23
4900&color2=0x4e9e00&border=1 type=application/x-shockwave-flash
allowscriptaccess=always allowfullscreen=true width=580 height=360></
embed></object>

Design i programare web //// 41

(selecie din Modul 6, pagina 41)

15
 DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

HTML MODUL 3

2/36 Vom urmri, n cele ce urmeaz, schia logic care a rezultat dup studiul de caz
din modulul 2: clientul dorete un site aerisit, n partea de sus un banner i imediat
dedesubt, un meniu orizontal care s conin meniul propriu-zis.
Un semn special
arat c anumite scheletul n baza diagramei vom realiza i noi scheletul website-ului conform elementelor
site-ului nvate n capitolul Exemple HTML. Vom realiza aceasta integral cu ajutorul
teme se leag de editorului Notepad.
idei prezentate Dimensionm mrimea website-ului astfel nct acesta s fie vizibil pe un minimum
anterior. n acest de rezoluie 1024x768 pixeli, folosindu-ne de un tabel cu funcia <table>, cu limea
de 900 de pixeli. n acest tabel adugm nc 4 tabele primul pentru banner,
caz, le regsim i al doilea pentru zona meniu, al treilea pentru zona de content cu scroll i ultimul
n Modulul 2, la pentru zona fix cu date de contact.
Vom mpri n dou pri primul tabel (cel pentru banner): o parte pentru banner i
pagina 36. cealalt pentru zona cu data i ora, aa cum au fost solicitate de client.

Codul surs privind explicaia de mai sus este:

<html>
<head>
<title>Titlu site</title>
</head>
<body>
<table width=900 border=1 align=center>
<tr>
<td align=center>
<table width=100% height=60 border=1>
<tr>
<td width=800>loc de banner </td>
<td width=100>ora si data </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=30>zona meniu orizontal </td>
</tr>
<tr>
<td valign=top>zona scroll</td>
</tr>
<tr>
<td height=30>zona fixa cu date de contact </td>
</tr>
</table>
</body>
</html>
Design i programare web //// 31

(selecie din Modul 3, pagina 31)

16
LECIE DEMONSTRATIV DESIGN I PROGRAMARE WEB

Editoare HTML MODUL 5

Putem observa c, la prima vedere, NoteTab Light nu este foarte diferit de Windows
Notepad, cel cu care am creat website-ul nostru de la nceput. Aceast afirmaie
nu este ns integral adevrat, deoarece, dac studiem puin interfaa, meniurile
i posibilitile acestui program, vom observa i detaliile. Sigur c NotePad Light nu
va oferi aceleai funcii precum Dreamweaver sau 1st Page 2006, ns, atunci cnd
dorim s modificm foarte rapid un document HTM, ne trebuie un utilitar puin mai
complet dect Windows Notepad i nu avem nevoie de WYSIWYG, putem folosi
linitii i NoteTab Light.

Cu aceasta ncheiem modulul 5 dedicat editoarelor HTML, urmnd ca n modulul

viitor s ne oprim atenia asupra elementelor de grafic i multimedia n realizarea
website-urilor. Pn atunci ns, v doresc mult succes n rezolvarea temei pentru
acas i spor la nvat!

?
NTREBRI DE VERIFICARE
1. Pot fi template-urile i altfel dect HTML?
2. Cum putem defini un editor HTML?
ntrebrile de
3. Dreamweaver editeaz doar documente HTML?
verificare v
4. Ce funcie important i lipsete lui NoteTab Light, ct i majoritii
ajut s v fixai editoarelor HTML gratuite?
cunotinele 5. n ce fel afecteaz Adobe Dreamweaver codul surs al unui document
HTML?
dobndite din
6. Ce este funcia Design a Adobe Dreamweaver?
fiecare capitol.
Design i programare web //// 36

(selecie din Modul 5, pagina 36)

17
DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

HTML MODUL 3
R E Z U M AT U L M O D U LU LU I 3

3.1 HTML este un limbaj de marcare alctuit din coduri de cuvinte i din
sintaxe ca orice alt limbaj de programare. HTML const dintr-o serie de
coduri tastate ntr-un fiier text de ctre autorul website-ului acestea
Rezumatele sunt denumite etichete. Textul este apoi salvat ca un fiier de tip html
i vizualizat prin intermediul unui browser de internet, cum ar fi Internet
sintetizeaz Explorer, Mozilla Firefox, Safari, Opera etc.
aspectele cele mai 3.2 Elemente exemple de elemente: html, head, body, table. Elementele sunt
importante din practic funciile acestui limbaj de marcare. Spre exemplu, elementul table este
folosit pentru a introduce un tabel ntr-o pagin HTML.
fiecare modul.
3.3 Atribute exemple de atribute: align, border, id. Atributele sunt funcii pe
care le alturm elementelor, de exemplu adugnd elementul table, atributul
align=center ne va poziiona tabelul pe mijlocul paginii.

3.4 Tipul valorii atributului culoare (%Color;) se refer la definiiile culorilor dup
cum sunt specificate n SRGB. O valoare a unei culori poate s fie un numr
hexazecimal (cu un prefix dat de simbolul #) sau unul din urmtoarele 16 nume
de culori. Numele de culori nu difereniaz ntre majuscule/minuscule.

3.5 Lungimea atributelor ntr-un document HTML poate depinde de trei

elemente: pixeli, lungime i multilungime.

3.6 Valoarea atributelor al cror tip este un cod de limb (%LanguageCode)

se refer la un cod de limb. Spaiile albe nu sunt permise n codurile de limb.
Codurile de limb difereniaz ntre majuscule/minuscule.

3.7 Atributele set de caractere charset (%Charset n DTD) se refer la o

codificare a caracterelor dup cum se descrie n seciunea despre codificarea
caracterelor. Valorile trebuie s fie string-uri (de ex. euc-jp) din registrul IANA.
Numele codificrilor caracter nu difereniaz ntre majuscule/minuscule. Agenii
utilizator trebuie s urmeze paii definii n seciunea despre specificarea
codificrilor caracterelor n scopul determinrii codificrii caracterelor unei
resurse externe.

3.8 Putei utiliza urmtoarele tipuri de linkuri recunoscute, listate aici cu

interpretarea lor convenional. n DTD, %LinkTypes; se refer la o list de
tipuri de linkuri separate cu spaii. Caracterele de spaii albe nu sunt permise
n interiorul tipurilor link. Aceste tipuri link nu difereniaz ntre majuscule/
minuscule, i.e. Alternate are acelai neles ca i alternate: Alternate,
Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter,
Section, Subsection, Appendix, Help, Bookmark.

3.9 Un document HTML este compus din trei pri: linie coninnd informaii
despre versiunea HTML; seciune declarativ de nceput (header delimitat
de elementul HEAD); un corp care cuprinde coninutul actual al documentului.
Corpul poate fi implementat cu elementul BODY sau cu elementul FRAMESET.

3.10 Elementul HEAD poate conine informaii ca: SCRIPT, STYLE, META, LINK,
OBJECT. Elementul HEAD conine informaii despre documentul curent, cum
ar fi: titlul, cuvintele cheie care sunt utile motoarelor de cutare i alte date
care nu sunt considerate parte a coninutului documentului.

Design i programare web //// 37

(selecie din Modul 3, pagina 37)

18
LECIE DEMONSTRATIV DESIGN I PROGRAMARE WEB

Tipuri de website-uri; structura i ergonomia website-urilor MODUL 8

D I C I O N A R D E S P E C I A L I TAT E

Boolean n cultura informatic, n special n cultura de programare,

Termenii de Boolean desemneaz un tip de date care pot avea doar dou
specialitate valori: adevrat sau fals

sunt explicai Digital Rights Gestiunea drepturilor digitale este o serie de tehnologii de
n seciunea Management controlare a accesului la fiiere text, audio, video .a., folosite
de productorii de aparate electronice, editorii i deintorii de
dicionar de copyright, pentru a limita utilizarea mediilor i dispozitivelor
specialitate. digitale

ECMA Script este un limbaj de scripting, folosit la scar larg pe internet,

dialectele sale principale fiind JavaScript, ActionScript i
Jscript

Flex Adobe Flex Produs software creat de Adobe Systems

destinat crerii de aplicaii interactive. Sub denumirea de RIA
s-au dezvoltat o serie de aplicaii interactive, avnd o interfa
unitar format din controale i componente. Formatul specific
Flex este MXML (Macromedia XML). Pentru programatori,
se poate folosi cu succes limbajul de scripting ActionScript.
Rezultatul final este un fiier Flash de tip SWF care cuprinde
elemente de interfa interactive

Mambo este un CMS open source

MP3 MPEG Layer 3 este un format audio multimedia, avnd

la baz comprimarea sunetului cu pierdere de calitate.
Dezvoltat de Institutul Fraunhofer din Germania, el a fost a
treia reuit a acestuia, dup MPEG Layer 1 (folosit pentru
casetele digitale Philips DCC) i MPEG Layer 2 (utilizat
la sonorul Video CD-urilor). Avantajul su principal a fost
(i este n continuare) spaiul redus ocupat, ns calitatea
sunetului are de suferit n timpul comprimrii

MP4 este o colecie patentat de metode de compresie pentru

compresie video i audio

Design i programare web //// 44

(selecie din Modul 8, pagina 44)

19
DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

T E M A P E N T Tipuri
R Ude website-uri;
A C A Sstructura
9i ergonomia website-urilor MODUL 2

Pentru exerciiile cu variante de rspuns, un singur rspuns este corect.

1. Care este variabila PHP care poate conine o combinaie de litere,

Temele pentru simboluri i spaii delimitate ntre ghilimele?

acas v ajut a) echo;

b) string;
s v evaluai c) function;
cunotinele d) header.
dobndite din
2. Ce semnific incrementarea i decrementarea unui numr n PHP?
fiecare modul.
a) Creterea unui numr cu o msur se numete incrementare i micorarea
cu o msur se numete decrementare.
b) Semnific mrirea unui numr exponenial i micorarea unui numr
incremental.
c) Creterea unui numr cu o unitate se numete incrementare, iar micorarea
cu o unitate se numete decrementare.

3. Cu ce formul trebuie s nceap ntotdeauna un cod PHP:

a) {?php;
b) <?php;
c) <php;
d) ?php.

4. Constantele PHP pot avea o valoare?

a) da;
b) nu.

5. Care sunt atributele PHP cu ajutorul crora putem prelua date dintr-un
document HTML?
a) Action i Method;
b) Method i Echo;
c) Action i Script;
d) Action i Integer.

6. Este adevrat c ntr-un cod PHP nu putem aduga comentarii?

a) da;
b) nu.

7. Realizai un script PHP, prin care s demonstrai Teorema lui Pitagora.

Teorema lui Pitagora afirm c n orice triunghi dreptunghic, suma
ptratelor catetelor este egal cu ptratul ipotenuzei. Dac se noteaz
cu a i b lungimile catetelor unui triunghi dreptunghic i cu c lungimea
ipotenuzei acestuia, atunci teorema lui Pitagora poate fi formulat
algebric astfel:
a2 + b2 = c2
Design i programare web //// 43

(selecie din Modul 9, pagina 43)

20
 DESIGN I PROGRAMARE WEB LECIE DEMONSTRATIV

Temele se pot
rezolva pe
formularele
speciale inserate
n caiet (dac se
trimit spre corectare
prin pot) sau
online, n contul de

U
cursant de pe site-ul
www.eurocor.ro. Un

PL
profesor personal
v ndrum pe toat
durata studiului.
EM
EX

Orice companie, instituie public sau chiar un liber profesionist are nevoie de un site web. Cu ani n
urm, n afaceri conta ct de frumoas era firma de la poart. Astzi, fr un site adecvat nu se poate rezista
i progresa n mediul business, indiferent de domeniu. i dumneavoastr putei fi un specialist cutat de
muli angajatori! Alegei chiar astzi cursul Eurocor de DESIGN I PROGRAMARE WEB! Acest curs se
adreseaz att acelora care vor s nvee cum se construiete un website, de la A la Z, ct i celor care doresc
o reactualizare a cunotinelor dobndite anterior n acest domeniu. Spor la studiu!

Tel. 021 33 225 33; www.eurocor.ro

21