Documente Academic
Documente Profesional
Documente Cultură
LECIE DEMONSTRATIV
V
IE ATI
C R
LE NST
O
INTRODUCERE
EM
LECIE DEMONSTRATIV
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.
LECIE DEMONSTRATIV
Modulul 7
Modulul 2
Modulul 8
Modulul 3
Modulul 9
Modulul 4
Modulul 10
Modulul 5
Modulul 11
Modulul 6
Modulul 12
LECIE DEMONSTRATIV
Modulul 13
Modulul 15
Modulul 14
Modulul 16
MODUL
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.
OBIECTIVE
LECIE DEMONSTRATIV
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.
LECIE DEMONSTRATIV
MODUL 13
securitatea
software-ului
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.
Unul dintre cele mai ameninate, sparte i atacate servere de web este Microsoft IIS.
Exerciiul 2
LECIE DEMONSTRATIV
MODUL 6
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.
LECIE DEMONSTRATIV
MODUL 10
EXEMPLU
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.
10
LECIE DEMONSTRATIV
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.
Print
screen-urile i
studiul de caz
prezentate n
acest curs v
faciliteaz nsuirea
cunotinelor.
11
LECIE DEMONSTRATIV
MODUL 15
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%
12
LECIE DEMONSTRATIV
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
13
LECIE DEMONSTRATIV
MODUL 6
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
14
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.
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
15
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
16
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.
17
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
3.2
3.3
3.4
3.5
3.6
3.7
3.8
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.
18
LECIE DEMONSTRATIV
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
Flex
Mambo
MP3
MP4
19
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
Temele pentru
acas v ajut
s v evaluai
cunotinele
dobndite din
fiecare modul.
a)
b)
c)
d)
echo;
string;
function;
header.
a)
b)
c)
d)
{?php;
<?php;
<php;
?php.
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.
a) da;
b) nu.
20
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!
www.eurocor.ro
21