D

LECIE DEMONSTRATIV

V
IE ATI
C R
LE NST
O

INTRODUCERE

EM

DESIGN I PROGRAMARE WEB

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.

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.

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

Programa cursului Design i programare WEB

Modulul 1

Modulul 7

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

Foi de stil n cascad (CSS). Cum definim CSS? Rolul

CSS n website-uri. Exemple de CSS n website-uri

Modulul 2

Modulul 8

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

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 clientside/server-side scripting. Despre tehnologia Flash.
Editoare Flash. Sistem de gestiune a coninutului unui
website

Modulul 3

Modulul 9

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

PHP partea 1. Ce este limbajul PHP? Instalarea i

configurarea. Informaii de referin despre limbaj.
Funcii. Clase i obiecte

Modulul 4

Modulul 10

XML i XHTML. Structura logic i fizic a

XML. Elemente i atribute XML. Diferene dintre
XHTML i HTML

PHP partea a 2-a. Securitatea. Sesiuni de lucru.

Cookies

Modulul 5

Modulul 11

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.

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 6

Modulul 12

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

Baze de date. Utilizarea bazelor de date n contextul

website-urilor. Interogarea bazelor de date MySQL n
PHP i JAVA

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

Modulul 13

Modulul 15

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?

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 14

Modulul 16

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?

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

MODUL

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

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.

Fiecare modul
ncepe cu o
introducere
n care sunt
prezentate
principalele
aspecte ce vor fi
studiate.

Obiectivele pe
care trebuie s
le atingei prin
parcurgerea
fiecrui modul
v ghideaz
nvarea.

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
astfel de editor i cum v poate uura munca cu un website.

OBIECTIVE

n acest modul ne propunem:

s nelegem ce este un editor HTML i care sunt funciile sale;

s aflm ce este i la ce folosete Adobe Dreamweaver;

s cunoatem care sunt principalele funcii Adobe Dreamweaver;

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;

s studiem dou alternative pentru Adobe Dreamweaver, i anume

dou editoare HTML gratuite.

1. Ce este un editor HTML?

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

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

Dinamica website-urilor i interaciunea lor cu utilizatorii

MODUL 8

4. CGI
Iniialele CGI vin de la Common Gateway Interface. CGI este un protocol standard care interfaeaz aplicaiile cu un server. Evident c tehnologia CGI este utilizat cel mai des n universul web i, implicit, serverele
care utilizeaz CGI sunt serverele web.

Informaiile
importante i
definiiile au fost
marcate special
pentru a facilita
nelegerea lor.

Un server care utilizeaz CGI va rspunde cererilor din partea clienilor. Cel mai
ntlnit caz este scenariul clasic:
Aplicaia (web browser: ex. Microsoft Internet Explorer) cere unui server o
pagin web.
Serverul (server web) rspunde oferind aplicaiei fiierele website-ului.
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
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)

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

Securitatea i testarea website-urilor

MODUL 13

securitatea
software-ului

Un alt aspect important n securitatea sistemului este software-ul actual care

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

Web serverele sunt formate dintr-o suit de programe complicate care conin frecvent
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
software-ului
actualizat

Problemele de securitate pe website-uri apar, de cele mai multe ori, din cauza
serverelor web pe care ruleaz. Uneori, aceste probleme sunt relativ minore, doar
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.

Cuvintele
cheie ajut la
identificarea
principalelor
teme descrise n
curs.

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
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
conexiuni de internet pe consola serverului de la deprtare. Poate v gndii c
sunt doar cteva elemente de risc n acest caz. Ei bine, nu. Sunt foarte multe. Avem
urmtoarele elemente:
Sistemul de operare de pe computerul dvs.
Clientul de mail de pe computerul dvs.
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)

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

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)

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.

Exemplele
trimit la situaii
concrete din
activitatea unui
webdesigner.

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
avem n vedere c printre vizitatorii acelui forum putem avea tot felul de persoane
ru intenionate, hackeri sau entuziati n ale informaticii care doresc s exploateze
diferite bree de securitate ale forumului. Unul dintre lucrurile duntoare pe care
le pot face este s introduc Javascript n sursa PHP. Acest lucru poate avea mai
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
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

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

PHP (partea a II-a)

MODUL 10

Studiu de caz
cerine noi
client

Vom presupune c firma productoare de pori din fier forjat i dorete noi funcii
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
beneficii sunt multiple, pentru a identifica noi oportuniti care s le permit s
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
ntr-o manier flexibil, deschis, transparent. Mai ales n comunicarea online,
reelele sociale reprezint instrumente indispensabile oricrui specialist n relaii
publice. Este important ca persoanele nsrcinate cu funcia de comunicare a unei
companii s monitorizeze discuiile care au loc n cadrul reelelor sociale, discuii
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.

Materia este
uor de neles
datorit tabelelor,
schemelor i
imaginilor
relevante.

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

35%

1%

Cutarea
de servicii/
produse

49%

2%
6%
6%
7%

2%
4%
1%

32%

56%

39%
39%
41%

Cumprarea
de servicii/
produse

1%
2%
1%

6%
5%

14%
46%

Distracie/
amuzament

19%
6%
8%
3%

Alte motive

30%
72%

19%
16%

10%
5%
6%
14%
13%
17%
20%
2%

MySpace
FaceBook
YouTube
iVillage
TripAdvisor
Yahoo! Answers

23%
22%
19%
28%
20%
17%
13%
8%

Nu au realizat
nicio cutare

0%

20%

40%

Craigslist
Amazon

60%

80%

100%

Procente de vizitatori online

Design i programare web //// 23

(selecie din Modul 15, pagina 23)

12

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

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:

Exerciiile
v testeaz la
nivel practic
cunotinele
asimilate.

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.

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
fiindu-i asociat un layer), asupra crora putem interveni separat, setrile de culoare,
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
de cyan imaginii principale cu poarta din fier forjat.
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

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

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

MODUL 6

Exerciiul 2

V verificai
rapid, cu
ajutorul
rspunsurilor
la exerciii.

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);
i putem recomanda s schimbe culoarea textului, de preferat, pentru lizibilitate
culoarea alb (se tie c cele mai recomandate scenarii text/background sunt
formate din alb/negru sau negru/alb);
putem s pstrm culoarea roie a textului doar n anumite zone.

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

2/36

Un semn special
arat c anumite
teme se leag de
idei prezentate
anterior. n acest
caz, le regsim i
n Modulul 2, la
pagina 36.

scheletul
site-ului

MODUL 3

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.
n baza diagramei vom realiza i noi scheletul website-ului conform elementelor
nvate n capitolul Exemple HTML. Vom realiza aceasta integral cu ajutorul
editorului Notepad.
Dimensionm mrimea website-ului astfel nct acesta s fie vizibil pe un minimum
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,
al doilea pentru zona meniu, al treilea pentru zona de content cu scroll i ultimul
pentru zona fix cu date de contact.
Vom mpri n dou pri primul tabel (cel pentru banner): o parte pentru banner i
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

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

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

ntrebrile de
verificare v
ajut s v fixai
cunotinele
dobndite din
fiecare capitol.

1. Pot fi template-urile i altfel dect HTML?

2. Cum putem defini un editor HTML?

3. Dreamweaver editeaz doar documente HTML?

4. Ce funcie important i lipsete lui NoteTab Light, ct i majoritii

editoarelor HTML gratuite?

5. n ce fel afecteaz Adobe Dreamweaver codul surs al unui document

HTML?

6. Ce este funcia Design a Adobe Dreamweaver?

Design i programare web //// 36

(selecie din Modul 5, pagina 36)

17

DESIGN I PROGRAMARE WEB

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

Rezumatele
sintetizeaz
aspectele cele mai
importante din
fiecare modul.

LECIE DEMONSTRATIV

HTML

MODUL 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
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
Explorer, Mozilla Firefox, Safari, Opera etc.

3.2

Elemente exemple de elemente: html, head, body, table. Elementele sunt

practic funciile acestui limbaj de marcare. Spre exemplu, elementul table este
folosit pentru a introduce un tabel ntr-o pagin HTML.

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

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

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

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

Termenii de
specialitate
sunt explicai
n seciunea
dicionar de
specialitate.

Boolean

MODUL 8

n cultura informatic, n special n cultura de programare,

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

Digital Rights Gestiunea drepturilor digitale este o serie de tehnologii de

Management
controlare a accesului la fiiere text, audio, video .a., folosite
de productorii de aparate electronice, editorii i deintorii de
copyright, pentru a limita utilizarea mediilor i dispozitivelor
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.

Temele pentru
acas v ajut
s v evaluai
cunotinele
dobndite din
fiecare modul.

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

simboluri i spaii delimitate ntre ghilimele?

a)
b)
c)
d)

echo;
string;
function;
header.

2. Ce semnific incrementarea i decrementarea unui numr n PHP?

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)
b)
c)
d)

{?php;
<?php;
<php;
?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)
b)
c)
d)

Action i Method;
Method i Echo;
Action i Script;
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

EX

EM

PL

Temele se pot
rezolva pe
formularele
speciale inserate
n caiet (dac se
trimit spre corectare
prin pot) sau
online, n contul de
cursant de pe site-ul
www.eurocor.ro. Un
profesor personal
v ndrum pe toat
durata studiului.

LECIE DEMONSTRATIV

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