WWW - Eurocor.ro Doc TL 10018 Lectie Demo Design Si Programare Web

2
LECIE DEMONSTRATIV
DESIGN I PROGRAMARE WEB
L
E
C
I
E

D
E
M
O
N
S
T
R
A
T
I
V
INTRODUCERE
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!
Beneciai de sprijinul unui profesor personal, un specialist cu experien, care poate
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.
3
LECIE DEMONSTRATIV
STRUCTURA LECIILOR
Studiul ecient 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
grace 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, valoricndu-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.
@
@
4
LECIE DEMONSTRATIV
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 7
Foi de stil n cascad (CSS). Cum definim CSS? Rolul
CSS n website-uri. Exemple de CSS n website-uri
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 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 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 9
PHP partea 1. Ce este limbajul PHP? Instalarea i
configurarea. Informaii de referin despre limbaj.
Funcii. Clase i obiecte
Modulul 4
XML i XHTML. Structura logic i fizic a
XML. Elemente i atribute XML. Diferene dintre
XHTML i HTML
Modulul 10
PHP partea a 2-a. Securitatea. Sesiuni de lucru.
Cookies
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 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 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
Modulul 12
Baze de date. Utilizarea bazelor de date n contextul
website-urilor. Interogarea bazelor de date MySQL n
PHP i JAVA
Programa cursului Design i programare WEB
5
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 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 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?
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
6
LECIE DEMONSTRATIV
(selecie din Modul 5, pagina 1)
Design i programare web //// 1
M
O
D
U
L
5
EDITOARE HTML
O B I E C T I V E
Atunci cnd realizm un website sau editm fierele 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 grafc 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.
n acest modul ne propunem:
s nelegem ce este un editor HTML i care sunt funciile sale;
s afm 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 modifcri 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 f 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 fnal
acelai scop realizarea unui livrabil n cazul nostru un website.
Modul
5
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.
7
LECIE DEMONSTRATIV
Informaiile
importante i
definiiile au fost
marcate special
pentru a facilita
nelegerea lor.
M O D U L 8
Dinamica website-urilor i interaciunea lor cu utilizatorii
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.
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 fierele 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 confgurm n vreun fel. Trebuie doar
s fm 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 fiere, 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 specifcat 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 afa 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 afare 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 f coninute i de un
fier extern, aceast procedur find 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 afeaz coninutul
n funcie de cele necesare.
8
LECIE DEMONSTRATIV
Cuvintele
cheie ajut la
identificarea
principalelor
teme descrise n
curs.
M O D U L 1 3
Securitatea i testarea website-urilor
Exer c i i ul 2
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 fe actualizat
(adus la zi) prin intermediul patch-urilor de securitate i actualizri.
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 verifcai dac ei chiar fac
acest lucru). Dac rulai propriul dvs. server, atunci trebuie s fi foarte ateni n
ceea ce privete securizarea lui.
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 fierele serverului dvs.
Toate programele implicate n procesul acesta de acces i management al serverului
pot infuena 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 confgurate 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.
Unul dintre cele mai ameninate, sparte i atacate servere de web este Microsoft IIS.
Considerai necesar existena unui program antivirus pe computerul unui
webdesigner? Pentru c ntrebarea poate f 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!
securitatea
software-ului
defeciunile
software-ului
meninerea
software-ului
actualizat
E X E M P L U
9
LECIE DEMONSTRATIV
Exemplele
ilustreaz
diverse modele
de website-uri
sau secvene de
cod explicate
n seciunile
teoretice.
M O D U L 6
Grafc i multimedia n website-uri
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 predefnite, ci, mai degrab, greeala nceptorului i lipsa de inspiraie
a creatorului. Pentru c suntei la nceput n manipularea culorilor, elementelor
grafce, conceptelor grafce, 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 fi foarte ateni ce fel de ilustraii folosii n website-ul
dvs.: imagini de produse, imagini pentru bannere, imagini pentru diferite elemente
grafce (linii, footer etc.). Toate aceste imagini trebuie s fe 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 fe 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.
Mai jos, un exemplu de website care folosete imagini de calitate ndoielnic, ceea
ce duce la un aspect nengrijit, urt i ieftin:
E X E M P L U
10
LECIE DEMONSTRATIV
M O D U L 1 0
PHP (partea a II-a)
Exemplele
trimit la situaii
concrete din
activitatea unui
webdesigner.
Spre exemplu, s ne imaginm un forum. Pe un forum, utilizatorii pot posta mesaje
care vor f afate 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
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 fe utilizat doar pentru a incomoda vizitatorii
forumului prin generarea de mesaje infnite 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 f convertit n <. 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.
S ne imaginm c cineva a introdus n cod:
[url=http://www.eurocor.ro]Institut European[/url]
Acesta va f 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.
E X E M P L U
E X E M P L U
11
LECIE DEMONSTRATIV
Print
screen-urile i
studiul de caz
prezentate n
acest curs v
faciliteaz nsuirea
cunotinelor.
M O D U L 1 0
PHP (partea a II-a)
Studiu de caz
Vom presupune c frma productoare de pori din fer forjat i dorete noi funcii
pe website. Aadar, acetia doresc o seciune nou i separat n website, cu
urmtoarele particulariti:
S fe accesibil din meniul orizontal sub forma unui buton nou.
Numele su s fe Clieni.
n cadrul acesteia, clienii companiei s aib posibilitatea de a se autentifca cu
un utilizator i o parol pentru a ptrunde ntr-o seciune dedicat fecruia.
Posibilitatea de a crea un utilizator i o parol pentru fecare client al companiei.
Utilizatorul i parola s conduc clienii ctre o seciune dedicat fecruia.
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 fer
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.
Identifcarea breelor de securitate PHP n proiectul nostru.
Rezolvarea breelor.
Realizarea materialelor necesare
Vom purcede la realizarea unui fier separat HTML, pornind de la un fier 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 fier HTML separat. Aadar, vom porni de la
documentul Excel:
cerine noi
client
12
LECIE DEMONSTRATIV
Materia este
uor de neles
datorit tabelelor,
schemelor i
imaginilor
relevante.
M O D U L 1 5
Web 2.0 i alte tendine de dezvoltare a website-urilor
Comunitile online i-au pus amprenta i asupra mediului de afaceri. Astfel,
numeroi oameni de afaceri apeleaz la acest mijloc de comunicare, ale crui
benefcii sunt multiple, pentru a identifca noi oportuniti care s le permit s
i dezvolte business-ul. Companiile au nceput s i creeze profle pe reelele
sociale pentru a ajunge mult mai uor la public i pentru a interaciona cu acesta
ntr-o manier fexibil, 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 f de preferat s ia forma unui dialog, ns acest lucru nu este sufcient. 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 fm 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 fe 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.
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.
concluzii
Motive pentru cutarea pe website
Conectarea cu
ali utilizatori
Cutarea
de servicii/
produse
Cumprarea
de servicii/
produse
Distracie/
amuzament
Alte motive
Nu au realizat
nicio cutare
MySpace
FaceBook
YouTube
iVillage
TripAdvisor
Yahoo! Answers
Craigslist
Amazon
Procente de vizitatori online
0% 20% 40% 60% 80% 100%
35%
49%
2%
6%
6%
7%
1%
2%
4%
1%
32%
56%
39%
39%
41%
1%
2%
1%
6%
5%
14%
46%
30%
19%
72%
19%
6%
16%
8%
3%
10%
5%
6%
14%
13%
17%
20%
2%
23%
22%
19%
28%
20%
17%
13%
8%
13
LECIE DEMONSTRATIV
Exerciiile
v testeaz la
nivel practic
cunotinele
asimilate.
M O D U L 6
Exer c i i ul 5
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:
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 fnal este format dintr-o serie de layere (fecrui obiect nou
findu-i asociat un layer), asupra crora putem interveni separat, setrile de culoare,
de contrast, de luminozitate, de claritate etc. putnd f altele pentru fecare n parte.
Ne propunem, astfel, s amestecm cele dou layere pentru a da o uoar tent
de cyan imaginii principale cu poarta din fer forjat.
14
LECIE DEMONSTRATIV
M O D U L 6
Exer c i i ul 8
Un flmule pe youtube.com are urmtoarea interfa:

Dup cum spuneam i mai sus, n acest fel youtube.com folosete fash pentru a
afa flmuleele sale. Un alt exemplu de afare a flmuleelor folosind fash 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 exemplifcm cum
putem s introducem astfel de flmulee n proiectele noastre.
Pn atunci ns, trebuie s avei n vedere modul n care putei integra aceste
flmulee n proiectul dvs. sau, dac realizai un website pentru un client, ce i putei
promite pe parte de flmulee, care sunt limitrile, ce este greu i ce este uor de
realizat n privina lor. n principiu, flmuleele pe care le vei introduce ntr-un proiect
pot f de orice fel, orice format ct de ct cunoscut, rspndit. Exist nenumrate
utilitare care ne pot ajuta s transformm flmuleul nostru n orice format dorim,
pentru a se potrivi cu tehnologia pe care o vom utiliza n website-ul nostru.
Pentru acest exerciiu v propunem inserarea unui flm 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 flmule preferat.
Inserai n pagina HTML codul HTML embeded oferit de youtube pe
care l putei gsi n dreapta flmuleului n csua denumit Embed.
Salvai pagina dvs. i vizualizai-o folosind un browser de internet.
15
LECIE DEMONSTRATIV
M O D U L 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);
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 flm. Noi am ales
spre exemplifcare Wall-E. Dup gsirea flmuleului pe Youtube, copiai din partea
dreapt a ecranului codul Embed.
Avei mai multe opiuni pentru aceasta mai jos privind includerea flmuleelor
asemntoare (Include related videos), afarea 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-fash
allowscriptaccess=always allowfullscreen=true width=580 height=360></
embed></object>
R S P U N S U R I L A E X E R C I I I
V verificai
rapid, cu
ajutorul
rspunsurilor
la exerciii.
16
LECIE DEMONSTRATIV
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.
M O D U L 3
HTML
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 fe 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 fx 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 fxa cu date de contact </td>
</tr>
</table>
</body>
</html>
scheletul
site-ului
2/36
17
LECIE DEMONSTRATIV
M O D U L 5
Editoare HTML
ntrebrile de
verificare v
ajut s v fixai
cunotinele
dobndite din
fiecare capitol.
?
N T R E B R I D E V E R I F I C A R E
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 afrmaie
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 modifcm 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 grafc i multimedia n realizarea
website-urilor. Pn atunci ns, v doresc mult succes n rezolvarea temei pentru
acas i spor la nvat!
1. Pot f template-urile i altfel dect HTML?
2. Cum putem defni 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?
18
LECIE DEMONSTRATIV
M O D U L 3
HTML
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 fier text de ctre autorul website-ului acestea
sunt denumite etichete. Textul este apoi salvat ca un fier de tip html
i vizualizat prin intermediul unui browser de internet, cum ar f 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 defniiile culorilor dup
cum sunt specifcate n SRGB. O valoare a unei culori poate s fe un numr
hexazecimal (cu un prefx 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
codifcare a caracterelor dup cum se descrie n seciunea despre codifcarea
caracterelor. Valorile trebuie s fe string-uri (de ex. euc-jp) din registrul IANA.
Numele codifcrilor caracter nu difereniaz ntre majuscule/minuscule. Agenii
utilizator trebuie s urmeze paii defnii n seciunea despre specifcarea
codifcrilor caracterelor n scopul determinrii codifcrii 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 f 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 f: titlul, cuvintele cheie care sunt utile motoarelor de cutare i alte date
care nu sunt considerate parte a coninutului documentului.
R E Z U M A T U L M O D U L U L U I 3
Rezumatele
sintetizeaz
aspectele cele mai
importante din
fiecare modul.
19
LECIE DEMONSTRATIV
M O D U L 8
Tipuri de website-uri; structura i ergonomia website-urilor
Boolean 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
controlare a accesului la fiere 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 find 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 specifc
Flex este MXML (Macromedia XML). Pentru programatori,
se poate folosi cu succes limbajul de scripting ActionScript.
Rezultatul fnal este un fier 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
D I C I O N A R D E S P E C I A L I T A T E
Management
Termenii de
specialitate
sunt explicai
n seciunea
dicionar de
specialitate.
20
LECIE DEMONSTRATIV
M O D U L 2
Tipuri de website-uri; structura i ergonomia website-urilor
Pentru exerciiile cu variante de rspuns, un singur rspuns este corect.
1. Care este variabila PHP care poate conine o combinaie de litere,
simboluri i spaii delimitate ntre ghilimele?
a) echo;
b) string;
c) function;
d) header.
2. Ce semnifc 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) Semnifc 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 afrm 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 f formulat
algebric astfel:
a
2
+ b
2
= c
2
T E M A P E N T R U A C A S 9
Temele pentru
acas v ajut
s v evaluai
cunotinele
dobndite din
fiecare modul.
21
LECIE DEMONSTRATIV
Tel. 021 33 225 33; www.eurocor.ro
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.
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!
E
X
E
M
P
L
U

WWW - Eurocor.ro Doc TL 10018 Lectie Demo Design Si Programare Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

WWW - Eurocor.ro Doc TL 10018 Lectie Demo Design Si Programare Web

Încărcat de

Drepturi de autor:

Formate disponibile

2

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

Un flmule pe youtube.com are urmtoarea interfa:

S-ar putea să vă placă și