D

EM
DESIGN ŞI PROGRAMARE WEB LECŢIE DEMONSTRATIVĂ

LE NST
O
CŢ R
IE ATI
INTRODUCERE

VĂ
Vă doriţi să creaţi de la 0 propriul site
web? Aţi văzut că se fac angajări în rândul
cunoscătorilor de programare web? Acum
aveţi o şansă în plus, mulţumită cursului
Eurocor Design şi programare Web.
Fie că doriţi să transformaţi o pasiune în
profesie, fie că abia acum învăţaţi noţiunile
de bază în programare web, acest curs îşi
propune să vă înveţe:
 modalităţile 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.

Învăţaţi comod!
Primiţi acasă, la oficiul poştal sau direct la birou pachetele de curs, pe care le parcurgeţi
când vreţi! Studiaţi fără stres, în confortul propriului cămin, în pauza de masă, în
weekenduri, după program, vara sau iarna... când şi unde doriţi! Puteţi pune rapid în
practică noile cunoştinţe, atrăgând un binemeritat succes!

Vă veţi bucura de o atenţie deosebită!

Beneficiaţi de sprijinul unui profesor personal, un specialist cu experienţă, care poate fi
contactat prin poştă sau online.
Webdesignerii sunt specialişti care aparţin nu doar domeniului IT, ci mai degrabă
departamentelor de creaţie din diverse companii sau celor de marketing şi publicitate.
EUROCOR vă ajută să deveniţi un specialist căutat de mulţi angajatori!
Mult succes!

LECŢIA DEMONSTRATIVĂ vă ajută să vă familiarizaţi cu materialele şi metoda de

studiu EUROCOR. Din punctul de vedere al numărului de pagini, aceasta reprezintă
mai puţin de jumătate din conţinutul unui caiet de curs.
Vă prezentăm câteva secţiuni teoretice, exemple, exerciţii şi un model de temă, selectate
din module diferite, pentru a vedea exact cum sunt structurate caietele.

2
LECŢIE DEMONSTRATIVĂ DESIGN ŞI PROGRAMARE WEB

STRUCTURA LECŢIILOR
 Studiul eficient al cursului nostru este garantat de structura unitară a celor
16 module.
 Informaţiile noi sunt prezentate într-un mod atractiv, iar procesul de
memorare devine simplu şi rapid!
 Caietele se parcurg uşor, într-un mod relaxat, datorită semnelor
grafice special concepute pentru a marca diverse unităţi de conţinut ale
modulelor.
 Limbajul este accesibil, explicit, iar accentul este pus pe partea practică.
 Veţi învăţa ceva util, valorificându-vă în acelaşi timp abilităţile practice,
dar şi creativitatea.
 Cursul urmăreşte de-a lungul său un studiu de caz ale cărui resurse le
regăsiţi într-un cont special creat.

PRIMIREA CURSULUI
 La Eurocor, cursanţii aleg unde să primească pachetul de curs! Dvs. ce alegeţi?
1. Acasă, la cutia poştală (Cutia poştală trebuie să aibă dimensiunile de
minimum 22x30x1 cm.).
2. La serviciu.
3. La oficiul poştal de care aparţineţi (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 găsiţi
informaţii despre stadiul trimiterii pachetelor de curs sau plăţile efectuate şi
înregistrate. Din contul de cursant se pot accesa şi aplicaţiile TemeOnline sau
PlataOnline.

ABSOLVIREA
Odată cu expedierea ultimului pachet de curs, veţi primi şi testul de evaluare
finală. Calificativele obţinute pot fi: foarte bine, bine şi insuficient (în funcţie
de punctajul realizat). Odată promovat acest test, veţi obţine 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
paşii generici de dezvoltare a unui website. Care sunt
principalele limbaje de programare; cum au apărut
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ă. Învăţarea online.
Biblioteca. Revista web. Cum să structurăm 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. Diferenţe 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 când dezvoltăm
un website? Editoarele foto ca prim utilitar pentru
website-uri (Corel Photo-Paint, Adobe Photoshop);
ilustraţiile, filmele şi sunetul într-un website
LECŢIE 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 interacţiunea lor cu
utilizatorii. Cum să dezvoltăm o pagină web dinamică
din punctul de vedere al dinamicităţii sale. Câmpuri
automate. Pagini interactive. CGI. Conceptul de client-
side/server-side scripting. Despre tehnologia Flash.
Editoare Flash. Sistem de gestiune a conţinutului unui
website
Modulul 9
PHP – partea 1. Ce este limbajul PHP? Instalarea şi
configurarea. Informaţii de referinţă despre limbaj.
Funcţii. 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? Apariţia JAVA. Pagini programate în
JAVA. Ce este JavaScript? Cum funcţionează 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
LECŢIE DEMONSTRATIVĂ
Modulul 13
Securitatea şi testarea website-urilor. Cum se
testează un website? Securitatea în Microsoft
Internet Explorer. Securitatea în Mozilla Firefox.
Cum să dezvoltăm un website din punctul de vedere
al securităţii?
Modulul 14
Promovarea website-urilor şi reclamele în
website-uri. Ce este promovarea web? De ce
este important să promovăm un website? Cum
să dezvoltăm un website fiind conştienţi de la
început de tehnicile de promovare? Reclamele
în website-uri: beneficii, rol. Cum să poziţionăm
reclamele pe website? Cum se creează un newsletter?
5
DESIGN ŞI PROGRAMARE WEB
Modulul 15
Web 2.0 şi alte tendinţe de dezvoltare a website-urilor.
Ce este Web 2.0? Care este viitorul website-urilor? Cât
timp poate fi „valabil” un website? Tendinţe 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
cunoştinţelor sub o formă aplicată
DESIGN ŞI PROGRAMARE WEB LECŢIE DEMONSTRATIVĂ

5
Modul

MODUL
5
EDITOARE HTML

­Atunci când realizăm un website sau edităm fişierele unui website există multe
modalităţi prin care putem realiza aceste activităţi. Probabil că aţi auzit de foarte
multe ori discutându-se de editoare HTML sau de editoare web. Ne propunem în
acest curs să punctăm 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 recomandăm pentru a-l utiliza.
Vom discuta în acest curs pe larg despre Adobe Dreamweaver, de departe cel mai
popular editor HTML, cât ş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ă transformaţi 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ă, aplicându-le
punctual, alături de Dreamweaver, pentru a vă ajuta să înţelegeţi la ce este bun un
Fiecare modul astfel de editor şi cum vă poate uşura munca cu un website.
începe cu o
introducere OBIECTIVE
în care sunt
În acest modul ne propunem:
prezentate ► să înţelegem ce este un editor HTML şi care sunt funcţiile sale;
principalele ► să aflăm ce este şi la ce foloseşte Adobe Dreamweaver;
aspecte ce vor fi ► să cunoaştem care sunt principalele funcţii Adobe Dreamweaver;
studiate. ► să aplicăm aceste funcţii în practică şi să realizăm nişte modificări în
website-ul nostru;
► să descoperim câteva sfaturi şi trucuri privind Adobe Dreamweaver;
► să învăţăm ce sunt acelea template-uri web şi cum putem să le
edităm folosind un editor HTML;
Obiectivele pe ► să studiem două alternative pentru Adobe Dreamweaver, şi anume
care trebuie să două editoare HTML gratuite.
le atingeţi prin
parcurgerea
fiecărui modul
1. Ce este un editor HTML?
vă ghidează Dacă ar fi să facem o analogie inedită, v-aş propune să vă imaginaţi că un editor
HTML este o scenă de teatru. Un editor HTML este un mediu de dezvoltare cu
învăţarea. decoruri şi modalităţi prin care putem da naştere website-ului nostru. Asemenea
unei scene de teatru, un editor HTML dispune de decoruri, de actori, de lumini, de
cortină şi de foarte mulţi lucrători, în spate: maşinişti, regizori, stilişti şamd. Toate
acestea, transpuse din lumea spectacolului în lumea editoarelor HTML, au la final
acelaşi scop – realizarea unui livrabil – în cazul nostru un website.

Design şi programare web //// 1

(selecţie din Modul 5, pagina 1)

6
LECŢIE DEMONSTRATIVĂ DESIGN ŞI PROGRAMARE WEB

Dinamica website-urilor şi interacţiunea lor cu utilizatorii MODUL 8

4. CGI

Iniţialele CGI vin de la Common Gateway Interface. CGI este un proto-

col standard care interfaţează aplicaţiile 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.

Informaţiile Un server care utilizează CGI va răspunde cererilor din partea clienţilor. Cel mai
importante şi întâlnit caz este scenariul clasic:
► Aplicaţia (web browser: ex. Microsoft Internet Explorer) cere unui server o
definiţiile au fost pagină web.
marcate special ► Serverul (server web) răspunde oferind aplicaţiei fişierele website-ului.

pentru a facilita Vă veţi întreba în ce fel ne poate ajuta pe noi CGI. Atunci când spunem CGI, trebuie
să îl privim ca pe o tehnologie complementară a unui website. Nu este nevoie să
înţelegerea lor. intervenim asupra sa în vreun fel sau să îl configurăm în vreun fel. Trebuie doar
să fim conştienţi de existenţa sa şi de rolul său – acela de legătură dintre aplicaţie
(browser de internet) şi serverul web.
CGI în câteva cuvinte:
► Tehnologia CGI a fost lansată încă din 1993.
► CGI poate intermedia atât schimbul de fişiere, cât şi comenzi.
► Există alternative la CGI: variantele lansate de Apache sau de Netscape, cât şi
versiunea SCGI (Simple Common Gateway Interface), WSGI sau FastCGI.

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

Aşa cum am specificat mai sus, vom studia acum mai în amănunt tehnologiile
client-side şi server-side scripting. Aceste două tehnologii au aceeaşi modalitate
de lucru şi presupun prezenţa unor script-uri pentru a funcţiona. Aceste script-uri
trebuie să le privim ca nişte instrucţiuni care sunt utilizate de website, mai exact de
browserul de internet sau de serverul web, pentru a afişa conţinutul ş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 acţionează: 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 afişare a conţinutului în funcţie 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 conţinute şi de un
fişier extern, această procedură fiind denumită external scripting.

Client-side script-urile funcţionează în următorul fel: browserul de

internet („clientul”) accesează web-serverul care deţine conţinutul
website-ului, descarcă pagina HTML home, spre exemplu, şi, atunci,
script-urile incluse în această pagină intră în acţiune şi afişează conţinutul
în funcţie de cele necesare.

Design şi programare web //// 5

(selecţie din Modul 8, pagina 5)

7
DESIGN ŞI PROGRAMARE WEB LECŢIE 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 breşe de securitate care
permit accesul chiar şi fără o parolă. Software-ul sistemului trebuie să fie actualizat
(adus la zi) prin intermediul patch-urilor de securitate şi actualizări.

defecţiunile Web serverele sunt formate dintr-o suită de programe complicate care conţin frecvent
software-ului bug-uri, care pot, în anumite condiţii, să permită hackerilor accesul la sistemul dvs.,
chiar dacă aceştia nu cunosc parolele de acces. Dacă aveţi webhosting din partea
unei companii specializate în aşa ceva, atunci este responsabilitatea lor de a se
asigura că software-ul este actualizat (dar ar trebui să verificaţi dacă ei chiar fac
acest lucru). Dacă rulaţi propriul dvs. server, atunci trebuie să fiţi foarte atenţi în
ceea ce priveşte securizarea lui.

menţinerea 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 permiţând unui atacator să facă inactiv serverul dvs. până când rezolvaţi problema.
Cu toate acestea, aceste breşe de securitate trebuie îndepărtate. Ele permit acces
atacatorului la fişierele serverului dvs.
Toate programele implicate în procesul acesta de acces şi management al serverului
pot influenţa într-un fel sau altul securitatea sistemului dvs. Să considerăm, spre
Cuvintele – exemplu, că accesaţi serverul prin consolă ssh de la depărtare. Veţi stoca parola,
să spunem pe clientul dvs. de e-mail, şi o veţi introduce prin intermediul unei
cheie ajută la conexiuni de internet pe consola serverului de la depărtare. Poate vă gândiţi că
identificarea sunt doar câteva elemente de risc în acest caz. Ei bine, nu. Sunt foarte multe. Avem
următoarele 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 maşina accesată prin consolă.
Toate aceste elemente şi modul în care sunt ele configurate afectează securitatea
informaţiei în acest caz. Sistemele de operare trebuie protejate cu programe
antivirus, conexiunea la internet şi clientul de e-mail, la fel, protejate.
Să nu cădeţi în capcana de a gândi 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 ameninţate, sparte şi atacate servere de web este Microsoft IIS.


Exerciţiul 2

Consideraţi necesară existenţa unui program antivirus pe computerul unui

webdesigner? Pentru că întrebarea poate fi considerată retorică, vă vom
ruga să descărcaţi, pentru acest exerciţiu, aplicaţia Spybot Search&Destroy,
un utilitar anti-spyware şi anti-malware prezent în momentul de faţă, de
câţiva ani, în topurile de astfel de aplicaţii. Aplicaţia se poate descărca de
la adresa http://www.safer-networking.org. Descărcaţi aplicaţia şi scanaţi
cu aceasta ultima versiune a website-ului nostru de test. Utilizaţi astfel de
aplicaţii pentru toate proiectele dvs. web. Scanaţi-le cu regularitate!

Design şi programare web //// 8

(selecţie din Modul 13, pagina 7)

8
LECŢIE DEMONSTRATIVĂ DESIGN ŞI PROGRAMARE WEB

Grafică şi multimedia în website-uri MODUL 6

Studiaţi înainte alte proiecte similare cu al dvs.

Ca şi în cazul oricărei opere „de artă”, nu există atât loc pentru greşeală, nu există
greşeli predefinite, ci, mai degrabă, greşeala începătorului şi lipsa de inspiraţie
a creatorului. Pentru că sunteţi la început în „manipularea” culorilor, elementelor
grafice, conceptelor grafice, este bine mai întâi să studiaţi alte website-uri similare
ca domeniu de activitate cu cel căruia trebuie să-i stabiliţi designul. Trebuie, evident,
să vă faceţi foarte bine temele înainte de a alege culori sau de a stabili ce elemente
veţi folosi în designul dvs.

Folosiţi imagini de calitate

În altă ordine de idei, trebuie să fiţi foarte atenţi ce fel de ilustraţii folosiţi î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 neapărat de rezoluţie
cât mai înaltă, cât de o mărime care să permită încărcarea mai uşoară pe pagină,
altfel devenind supărătoare pentru vizitatori şi determinându-i în cele din urmă să
părăsească site-ul. Să fie corecte şi cât mai curate.
Evitaţi să utilizaţi imagini realizate cu camere foto neperformante (de ex. telefon
mobil), neclare, culori defecte (arse) etc. Încercaţi să oferiţi o atenţie sporită
imaginilor pe care le utilizaţi în proiectele dvs. Acesta este unul dintre principalele
motive care fac un website să arate „ieftin”.

EXEMPLU

Mai jos, un exemplu de website care foloseşte imagini de calitate îndoielnică, ceea
ce duce la un aspect neîngrijit, urât şi ieftin:

Exemplele
ilustrează
diverse modele
de website-uri
sau secvenţe de
cod explicate
în secţiunile
teoretice.

Design şi programare web //// 9

(selecţie din Modul 6, pagina 8)

9
DESIGN ŞI PROGRAMARE WEB LECŢIE DEMONSTRATIVĂ

PHP (partea a II-a) MODUL 10

EXEMPLU

Spre exemplu, să ne imaginăm un forum. Pe un forum, utilizatorii pot posta mesaje

care vor fi afişate către alţi 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 apărea 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 situaţii rău intenţionate, hackeri sau entuziaşti în ale informaticii care doresc să exploateze
diferite breşe de securitate ale forumului. Unul dintre lucrurile dăunătoare 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 atenţionat să
webdesigner. închidă browserul sau să viziteze un alt website.

Aceasta este versiunea simplă, cazul în care atacurile nu sunt rău intenţionate.
Pot exista însă atacuri extrem de dăunătoare, atacuri care vor introduce în ecuaţie
keyloggere sau care vor recupera userii şi parolele de pe server sau din computerele
vizitatorilor.

Cum să ne protejăm de Cross Site Scripting?

La fel ca şi în cazul SQL Injection, este destul de uşor să ne protejăm şi împotriva
Cross Site Scripting. Pentru a face acest lucru, trebuie să ne folosim de o funcţie a
PHP, numită „htmlentities_()”. Această funcţie pur şi simplu va converti caracterele
care au un înţeles în limbajul HTML către entităţile lor corespunzătoare. De exemplu,
tag-urile HTML, după cum am învăţat în modulele anterioare, încep cu un semn
denumit „mai mic ca”, anume „<”. Folosind funcţia PHP de mai sus, acest caracter
va fi convertit în „&lt;”. Vom merge tot pe exemplul anterior, şi anume cel cu forumul.
Nicio problemă până aici, doar că stabilisem că dorim să le furnizăm vizitatorilor
posibilitatea de a formata conţinutul forumului, implicit de a utiliza HTML pentru
formatarea textului. Aplicând procedura din paragraful anterior, din păcate, această
posibilitate nu va mai exista. De aceea, trebuie să găsim o soluţie alternativă.
Vom folosi o particularitate care se numeşte „bbcodes”. Aceasta are o sintaxă
foarte similară cu HTML şi, în condiţiile în care aţi mai folosit HTML, nu este greu
de utilizat.
Un tag foarte uzual în bbcode este tag-ul URL.

EXEMPLU

Să ne imaginăm 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

(selecţie din Modul 10, pagina 9)

10
LECŢIE DEMONSTRATIVĂ DESIGN ŞI PROGRAMARE WEB

PHP (partea a II-a) MODUL 10

Studiu de caz
cerinţe noi Vom presupune că firma producătoare de porţi din fier forjat îşi doreşte noi funcţii
client pe website. Aşadar, aceştia doresc o secţiune nouă şi separată în website, cu
următoarele particularităţi:
► Să fie accesibilă din meniul orizontal sub forma unui buton nou.
► Numele său să fie „Clienţi”.
► În cadrul acesteia, clienţii companiei să aibă posibilitatea de a se autentifica cu
un utilizator şi o parolă pentru a pătrunde într-o secţiune dedicată fiecăruia.
► Posibilitatea de a crea un utilizator şi o parolă pentru fiecare client al companiei.
► Utilizatorul şi parola să conducă clienţii către o secţiune dedicată fiecăruia.
► Realizarea unui cont de client.
► Includerea în pagina client1 a unei liste Microsoft Excel de preţuri, produse şi
servicii.
Acestea sunt cerinţele primite din partea companiei producătoare de porţi din fier
forjat. La aceste cerinţe mai adăugăm şi noi câteva:
► 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 breşelor de securitate PHP în proiectul nostru.
► Rezolvarea breşelor.

Realizarea materialelor necesare

Vom purcede la realizarea unui fişier separat HTML, pornind de la un fişier 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, creând un fişier HTML separat. Aşadar, vom porni de la
documentul Excel:

Print
screen-urile şi
studiul de caz
prezentate în
acest curs vă
facilitează însuşirea
cunoştinţelor.

Design şi programare web //// 26

(selecţie din Modul 10, pagina 26)

11
 DESIGN ŞI PROGRAMARE WEB LECŢIE DEMONSTRATIVĂ

Web 2.0 şi alte tendinţe de dezvoltare a website-urilor MODUL 15

Comunităţile online şi-au pus amprenta şi asupra mediului de afaceri. Astfel,

numeroşi oameni de afaceri apelează la acest mijloc de comunicare, ale cărui
Materia este beneficii sunt multiple, pentru a identifica noi oportunităţi care să le permită să
uşor de înţeles îşi dezvolte business-ul. Companiile au început să îşi creeze profile pe reţelele
sociale pentru a ajunge mult mai uşor la public şi pentru a interacţiona cu acesta
datorită tabelelor, într-o manieră flexibilă, deschisă, transparentă. Mai ales în comunicarea online,
schemelor şi reţelele sociale reprezintă instrumente indispensabile oricărui specialist în relaţii
publice. Este important ca persoanele însărcinate cu funcţia de comunicare a unei
imaginilor companii să monitorizeze discuţiile care au loc în cadrul reţelelor sociale, discuţii
relevante. care ar fi de preferat să ia forma unui dialog, însă acest lucru nu este suficient. Dacă
mesajele pe care le trimitem reuşesc să atragă atenţia şi interesul publicului, acesta
va reacţiona, iar aici intervin riscurile unei astfel de acţiuni. Trebuie să fim atenţi la
mesajele şi comentariile care vin din partea celorlalţi membri. În momentul în care o
persoană trimite un feedback la un mesaj postat de o companie, aceasta aşteaptă
un răspuns în cel mai scurt timp. Nimănui nu-i place să fie lăsat să aştepte. Din
contră, oamenii vor să simtă că li se acordă atenţie, că opinia lor contează. Aceasta
este premisa de la care trebuie să pornim atunci când comunicăm prin intermediul
unei reţele sociale.

concluzii Un studiu din aprilie 2007 despre reţelele de social networking, realizat în Statele
Unite, dezvăluia următoarele concluzii:
► Website-urile de search clasic (Yahoo, Google, MSN) rămân de departe
în topul celor mai utilizate aplicaţii web, în ciuda popularităţii în creştere a
site-urilor de „social search”.
► Website-ul Yahoo este vizitat zilnic de 40% din respondenţii testului.
Motive pentru căutarea pe website
Conectarea cu 35%
alţi utilizatori 49%
2%
6%

6%
7%
1%
2%
Căutarea 4%
de servicii/ 1%
produse 32%
56%
39%
39%
41%

Cumpărarea 1%
de servicii/ 2%
produse 1%
6%
5%
14%
46%

30%
Distracţie/ 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 căutare 19% Amazon
28%
20%
17%
13%
8%

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

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

(selecţie din Modul 15, pagina 23)

12
LECŢIE DEMONSTRATIVĂ DESIGN ŞI PROGRAMARE WEB

Grafică şi multimedia în website-uri MODUL 6

Rezervaţi astfel locuri libere în zona de stânga sus şi dreapta sus unde putem
introduce mai târziu elementele necesare. Vom schimba în cele ce urmează
culoarea de background a primului layer, din alb, în albastru. Pentru aceasta ne
vom poziţiona cu mouse-ul şi vom efectua clic pe layerul Background, vom debifa
vizibilitatea Layer 1 (cu clic pe „ochiul” din faţa Layer 1) şi vom selecta din paleta
de culori culoarea cyan:

Utilizând o altă unealtă Photoshop, Paint Bucket Tool, pe care o găsiţi în bara de
unelte în partea stângă, vom umple bannerul alb cu culoarea albastră:


Exerciţiul 5

Folosiţi Paint Bucket Tool sau un utilitar similar din editorul dvs. foto, pentru
a umple documentul creat la exerciţiul 4 cu culoarea neagră.

Exerciţiile Vom schimba apoi modul în care se „amestecă” cele două layere. Trebuie să ne
imaginăm că bannerul final este format dintr-o serie de layere (fiecărui obiect nou
vă testează la fiindu-i asociat un layer), asupra cărora putem interveni separat, setările de culoare,
nivel practic de contrast, de luminozitate, de claritate etc. putând fi altele pentru fiecare în parte.
Ne propunem, astfel, să amestecăm cele două layere pentru a da o uşoară tentă
cunoştinţele de cyan imaginii principale cu poarta din fier forjat.
asimilate.
Design şi programare web //// 21

(selecţie din Modul 6, pagina 21)

13
DESIGN ŞI PROGRAMARE WEB LECŢIE DEMONSTRATIVĂ

Grafică şi multimedia în website-uri MODUL 6

Un filmuleţ pe youtube.com are următoarea interfaţă:

După cum spuneam şi mai sus, în acest fel youtube.com foloseşte flash pentru a
afişa filmuleţele sale. Un alt exemplu de afişare a filmuleţelor folosind flash este:

Se pot utiliza diferite interfeţe pentru a realiza acest lucru. După cum v-am promis,
atunci când vom învăţa puţin mai pe larg Flash, vom putea să exemplificăm cum
putem să introducem astfel de filmuleţe în proiectele noastre.
Până atunci însă, trebuie să aveţi în vedere modul în care puteţi integra aceste
filmuleţe în proiectul dvs. sau, dacă realizaţi un website pentru un client, ce îi puteţi
promite pe parte de filmuleţe, care sunt limitările, ce este greu şi ce este uşor de
realizat în privinţa lor. În principiu, filmuleţele pe care le veţi introduce într-un proiect
pot fi de orice fel, orice format cât de cât cunoscut, răspândit. Există nenumărate
utilitare care ne pot ajuta să transformăm filmuleţul nostru în orice format dorim,
pentru a se potrivi cu tehnologia pe care o vom utiliza în website-ul nostru.


Exerciţiul 8

Pentru acest exerciţiu vă propunem inserarea unui film youtube.com pe o

pagină HTML. Efectuaţi, pentru aceasta, următorii paşi:
► Creaţi o pagină nouă html cu ajutorul Adobe Dreamweaver.
► Accesaţi website-ul youtube.com.
► Căutaţi un filmuleţ preferat.
► Inseraţi în pagina HTML codul HTML embeded oferit de youtube pe
care îl puteţi găsi în dreapta filmuleţului în căsuţa denumită „Embed”.
► Salvaţi pagina dvs. şi vizualizaţi-o folosind un browser de internet.

Design şi programare web //// 33

(selecţie din Modul 6, pagina 33)

14
LECŢIE DEMONSTRATIVĂ DESIGN ŞI PROGRAMARE WEB

RĂSPUNSURI LA EX E Rşi multimedia

Grafică C I Ţ I Iîn website-uri MODUL 6

Exerciţiul 2
– îi putem recomanda să renunţe 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 nuanţe de negru);
Vă verificaţi – î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ă păstrăm culoarea roşie a textului doar în anumite zone.
răspunsurilor
Exerciţiul 3
la exerciţii.
– prea multe culori;
– prea multe elemente;
– prea înghesuit;
– fundal nepotrivit (nu este neutru);
– suprapunere imagini.

Exerciţiul 8
Să presupunem că doriţi să postaţi pe site-ul dvs. trailerul unui film. Noi am ales
spre exemplificare Wall-E. După găsirea filmuleţului pe Youtube, copiaţi din partea
dreaptă a ecranului codul Embed.

Aveţi mai multe opţiuni pentru aceasta mai jos privind includerea filmuleţelor
asemănătoare (Include related videos), afişarea marginii şi a culorii acesteia (Show
Border) etc. Codul embed copiat cu Ctrl+C îl veţi posta pe pagina site-ului dvs. cu
Ctrl+V şi va arăta 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

(selecţie din Modul 6, pagina 41)

15
 DESIGN ŞI PROGRAMARE WEB LECŢIE DEMONSTRATIVĂ

HTML MODUL 3

2/36 Vom urmări, în cele ce urmează, schiţa logică care a rezultat după studiul de caz
din modulul 2: clientul doreşte un site aerisit, în partea de sus un banner şi imediat
dedesubt, un meniu orizontal care să conţină meniul propriu-zis.
Un semn special
arată că anumite scheletul În baza diagramei vom realiza şi noi scheletul website-ului conform elementelor
site-ului învăţate în capitolul „Exemple HTML”. Vom realiza aceasta integral cu ajutorul
teme se leagă de editorului Notepad.
idei prezentate Dimensionăm mărimea website-ului astfel încât acesta să fie vizibil pe un minimum
anterior. În acest de rezoluţie 1024x768 pixeli, folosindu-ne de un tabel cu funcţia <table>, cu lăţimea
de 900 de pixeli. În acest tabel adăugăm încă 4 tabele – primul pentru banner,
caz, le regăsim ş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 împărţi în două părţi primul tabel (cel pentru banner): o parte pentru banner şi
pagina 36. cealaltă pentru zona cu data şi ora, aşa cum au fost solicitate de client.

Codul sursă privind explicaţia 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

(selecţie din Modul 3, pagina 31)

16
LECŢIE 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ă afirmaţie
nu este însă integral adevărată, deoarece, dacă studiem puţin interfaţa, meniurile
şi posibilităţile acestui program, vom observa şi detaliile. Sigur că NotePad Light nu
va oferi aceleaşi funcţii precum Dreamweaver sau 1st Page 2006, însă, atunci când
dorim să modificăm foarte rapid un document HTM, ne trebuie un utilitar puţin mai
complet decât Windows Notepad şi nu avem nevoie de WYSIWYG, putem folosi
liniştiţi şi NoteTab Light.

Cu aceasta încheiem modulul 5 dedicat editoarelor HTML, urmând ca în modulul

viitor să ne oprim atenţia asupra elementelor de grafică şi multimedia în realizarea
website-urilor. Până atunci însă, vă doresc mult succes în rezolvarea temei pentru
acasă şi spor la învăţat!

?
ÎNTREBĂRI DE VERIFICARE
1. Pot fi template-urile şi altfel decât HTML?
2. Cum putem defini un editor HTML?
Întrebările de
3. Dreamweaver editează doar documente HTML?
verificare vă
4. Ce funcţie importantă îi lipseşte lui NoteTab Light, cât şi majorităţii
ajută să vă fixaţi editoarelor HTML gratuite?
cunoştinţele 5. În ce fel afectează Adobe Dreamweaver codul sursă al unui document
HTML?
dobândite din
6. Ce este funcţia „Design” a Adobe Dreamweaver?
fiecare capitol.
Design şi programare web //// 36

(selecţie din Modul 5, pagina 36)

17
DESIGN ŞI PROGRAMARE WEB LECŢIE 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 alcătuit din coduri de cuvinte şi din
sintaxe ca orice alt limbaj de programare. HTML constă dintr-o serie de
coduri tastate într-un fişier text de către autorul website-ului – acestea
Rezumatele sunt denumite etichete. Textul este apoi salvat ca un fişier 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 funcţiile 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 funcţii pe
care le alăturăm elementelor, de exemplu adăugând elementul table, atributul
align=”center” ne va poziţiona tabelul pe mijlocul paginii.

3.4 Tipul valorii atributului „culoare” (%Color;) se referă la definiţiile culorilor după
cum sunt specificate în SRGB. O valoare a unei culori poate să fie un număr
hexazecimal (cu un prefix dat de simbolul #) sau unul din următoarele 16 nume
de culori. Numele de culori nu diferenţiază î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 căror tip este un cod de limbă (%LanguageCode)

se referă la un cod de limbă. Spaţiile albe nu sunt permise în codurile de limbă.
Codurile de limbă diferenţiază î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 secţiunea despre codificarea
caracterelor. Valorile trebuie să fie string-uri (de ex. „euc-jp”) din registrul IANA.
Numele codificărilor caracter nu diferenţiază între majuscule/minuscule. Agenţii
utilizator trebuie să urmeze paşii definiţi în secţiunea despre specificarea
codificărilor caracterelor în scopul determinării codificării caracterelor unei
resurse externe.

3.8 Puteţi utiliza următoarele tipuri de linkuri recunoscute, listate aici cu

interpretarea lor convenţională. În DTD, %LinkTypes; se referă la o listă de
tipuri de linkuri separate cu spaţii. Caracterele de spaţii albe nu sunt permise
în interiorul tipurilor link. Aceste tipuri link nu diferenţiază între majuscule/
minuscule, i.e. „Alternate” are acelaşi înţeles 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 părţi: linie conţinând informaţii
despre versiunea HTML; secţiune declarativă de început (header – delimitată
de elementul HEAD); un corp care cuprinde conţinutul actual al documentului.
Corpul poate fi implementat cu elementul BODY sau cu elementul FRAMESET.

3.10 Elementul HEAD poate conţine informaţii ca: SCRIPT, STYLE, META, LINK,
OBJECT. Elementul HEAD conţine informaţii despre documentul curent, cum
ar fi: titlul, cuvintele cheie care sunt utile motoarelor de căutare şi alte date
care nu sunt considerate parte a conţinutului documentului.

Design şi programare web //// 37

(selecţie din Modul 3, pagina 37)

18
LECŢIE 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: adevărat sau fals

sunt explicaţi Digital Rights – Gestiunea drepturilor digitale este o serie de tehnologii de
în secţiunea Management controlare a accesului la fişiere text, audio, video ş.a., folosite
de producătorii de aparate electronice, editorii şi deţinătorii de
dicţionar 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 creării de aplicaţii interactive. Sub denumirea de RIA
s-au dezvoltat o serie de aplicaţii interactive, având 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 fişier 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, având

la bază comprimarea sunetului cu pierdere de calitate.
Dezvoltat de Institutul Fraunhofer din Germania, el a fost a
treia reuşită a acestuia, după MPEG Layer 1 (folosit pentru
casetele digitale Philips DCC) şi MPEG Layer 2 (utilizat
la sonorul Video CD-urilor). Avantajul său principal a fost
(şi este în continuare) spaţiul redus ocupat, însă calitatea
sunetului are de suferit în timpul comprimării

MP4 – este o colecţie patentată de metode de compresie pentru

compresie video şi audio

Design şi programare web //// 44

(selecţie din Modul 8, pagina 44)

19
DESIGN ŞI PROGRAMARE WEB LECŢIE DEMONSTRATIVĂ

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

Pentru exerciţiile cu variante de răspuns, un singur răspuns este corect.

1. Care este variabila PHP care poate conţine o combinaţie de litere,

Temele pentru simboluri şi spaţii delimitate între ghilimele?

acasă vă ajută a) echo;

b) string;
să vă evaluaţi c) function;
cunoştinţele d) header.
dobândite din
2. Ce semnifică incrementarea şi decrementarea unui număr în PHP?
fiecare modul.
a) Creşterea unui număr cu o măsură se numeşte incrementare şi micşorarea
cu o măsură se numeşte decrementare.
b) Semnifică mărirea unui număr exponenţial şi micşorarea unui număr
incremental.
c) Creşterea unui număr cu o unitate se numeşte incrementare, iar micşorarea
cu o unitate se numeşte 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 cărora 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 adevărat că într-un cod PHP nu putem adăuga comentarii?

a) da;
b) nu.

7. Realizaţi un script PHP, prin care să demonstraţi Teorema lui Pitagora.

Teorema lui Pitagora afirmă că „în orice triunghi dreptunghic, suma
pătratelor catetelor este egală cu pătratul 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

(selecţie din Modul 9, pagina 43)

20
 DESIGN ŞI PROGRAMARE WEB LECŢIE DEMONSTRATIVĂ

Temele se pot
rezolva pe
formularele
speciale inserate
în caiet (dacă se
trimit spre corectare
prin poştă) 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, instituţie publică sau chiar un liber profesionist are nevoie de un site web. Cu ani în
urmă, în afaceri conta cât de frumoasă era firma de la poartă. Astăzi, fără un site adecvat nu se poate rezista
şi progresa în mediul business, indiferent de domeniu. Şi dumneavoastră puteţi fi un specialist căutat de
mulţi angajatori! Alegeţi chiar astăzi cursul Eurocor de DESIGN ŞI PROGRAMARE WEB! Acest curs se
adresează atât acelora care vor să înveţe cum se construieşte un website, de la A la Z, cât şi celor care doresc
o reactualizare a cunoştinţelor dobândite anterior în acest domeniu. Spor la studiu!

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

21