Lucrare HTML Web - Pagini

CUPRINS
Introducere ___________________________________________________________4
Capitolul 1. : Limea de band _________________________________________8
1.1.Planificarea limii de band ___________________________________8
1.2.Rata de transfer a datelor ___________________________________8
1..Limea de band total ___________________________________!
1.4.Percepia limii de band ___________________________________!
1.".#ptimi$area codului %&'L ___________________________________1(
1.".1.)tili$area atributelor *+idt,- .i *,ei/,t- _______________________11
1.".2.)tili$area te0tului alternati1 ___________________________________1
1."..2tocarea ima/inilor _________________________________________14
Capitolul 2. : )tili$area .i reutili$area ima/inii _____________________________13
2.2.1.Reutili$area unor $one dintr4o ima/ine _______________________15
2.2.2.Pre6ncrcarea ima/inilor ___________________________________1!
2.. 7i1i$area 8tierea9 ima/inilor ___________________________________21
2..1.:nali$a; tierea .i reasmblarea ima/inii _______________________22
2..2.)tili$area ima/inilor pentru meniuri de na1i/are _________________24
2...Ima/ini animate _________________________________________25
2.4.)tili$area miniaturilor 8t,umbnails9 _____________________________2!
2.". Intercalarea ima/inilor 8interlacin/9 _____________________________4
2.3. #ptimi$area sc,emelor de culori utili$ate _______________________3
2.3.1.:le/erea unei sc,eme de culori pentru un site <eb _________________3
2.3.2.=0emple de utili$are a metodelor de selecie a culorilor ___________5
2.3..=0emplu de selectare a culorilor prin metoda triadei _________________4
2.5. Pa/ini <eb dinamice .i interacti1e _____________________________45
Capitolul : #ptimi$area coninutului >las, _____________________________4!
.1.#ptimi$area documentelor >las, ___________________________________4!
.2.Le/tura dintre procesoare .i fi.ierele 2<> _______________________4!
..Le/atura dintre limea de band .i mrimea fi.ierelor _________________"(
.4.#r/ani$area aplicaiilor .i u$anele recomandate _________________"1
.".?ncrcarea de coninut nou ___________________________________"2
.3.Introducerea componentei Pro/ress@ar _____________________________"3
.5.?ncrcarea site4ului &ec, @ooAstore _____________________________"!
.8.&estarea .i depanarea site4ului &ec, @ooAstore _______________________32
Capitolul 4 : 2tudiu de ca$ pri1ind optimi$area unui site _______________________3"
Conclu$ii: ___________________________________________________________84
@iblio/rafie ___________________________________________________________8"
INTRODUCERE
?n contrast cu documentele tiprite; reali$area de pa/ini <eb impune cuno.tine din mai
multe
domenii. Cel care reali$ea$ pa/ini <eb nu are 6n totalitate controlul asupra modului de
afi.are a pa/inii; deoarece aceasta depinde de na1i/ator 8bro+ser9; de dispo$iti1ul pe care 1a fi
afi.at pa/ina etc.
Coninutul unei pa/ini <eb nu trebuie redus la cBte1a fra$e scurte; dar nici nu
trebuie s de1in un amal/am de ima/ini; te0te sau ima/ini animate.
Coninutul unei pa/ini <eb trebuie s stBrneasc interesul persoanei care accesea$
pa/ina.
7e asemenea sc,ema de culori 8culorile utili$ate pentru fundal; meniuri; te0t; C9
utili$at 6n cadrul pa/inii <eb trebuie s sublinie$e informaia din cadrul pa/inii.
:cest lucrare se dore.te a fi o pre$entare a te,nicilor 8modalitilor9 de optimi$are a
pa/inilor <eb.
Pentru ca modalitile de optimi$are a pa/inilor <eb s de1in cBt mai utile; este
important s 6nele/em cum se derulea$ e1enimentele atunci cBnd o pa/in <eb este
6ncrcat 8afi.at 6n ferestra na1i/atorului9 .
Prima aciune pe care na1i/atorul 8bro+ser9 o 6ntreprinde atunci cBnd se accesea$ o
pa/in <eb este 6ncrcarea pa/inii 6n memoria calculatorului.
Imediat dup 6ncrcarea pa/inii <eb 6n memoria calculatorului; na1i/atorul 1a re1i$ui
coninutul pa/ini pentru a stabilii pa.ii ce urmea$ a fi facui pentru ca pa/ina <eb s fie
afi.at corect.
?n ca$ul 6n care pa/ina <eb utili$ea$ Da1a2cript; E@2cript sau Da1a; na1i/atorul
trebuie s se pre/teasc pentru procesarea codului.
7ac pa/ina <eb accesat conine ima/ini; na1i/atorul trebuie s 6ncarce fiecare
ima/ine de pe <eb 6n memoria sa.7e fiecare dat cBnd se desc,ide o cone0iune pentru
re/sirea 86ncrcarea9 unei ima/ini; are loc un proces numit *desc,idere de soAet- pe ser1er4ul
care conine 8memorea$9 ima/inea. Cu cBt pa/ina <eb conine mai multe ima/ini cu atBt mai
multe astfel de procese au loc.)nul din factorii importani care reduc timpul de 6ncrcare a
unei pa/ini <eb este raportul dintre numrul total de ima/ini din pa/ina <eb .i mrimea
acestor ima/ini ca fi.iere.>iecare ima/ine necesit stabilirea unei cone0iuni intre calculator .i
calculatorul care deine ima/inea 6nainte de a descrca o copie a ima/inii pentru a afi.a.
# mare parte din editoarele %&'L de tip <F2I<FG 8+,at Hou 2ee is +,at Hou Get9
introduc 6n codul %&'L al pa/inii o serie de marcaDe inutile sau nedorite.)na dintre cele mai
simple soluii pentru eliminarea marcaDelor nedorite este aceea a desc,iderii documentului
%&'L 8pa/ina<eb4fi.ierul cu e0tensia *I.,tm-9 6ntr4un editor simplu de te0te 8JotePad9.
Cu un numr atBt de mare de 1ariabile care /u1ernea$ modul de afi.are a pa/inii
<eb; reali$atorul de pa/ini <eb poate utili$a statisticile despre 1i$itatorii pa/inii <eb pentru a
lua ,otrBri corecte pri1ind modificarea pa/inilor <eb.
?n ca$ul 6n care site4ul conine mai multe pa/ini nu trebuie s ne re$umm numai la
optimi$area primei pa/ini 8pa/ina initial9.:ccesarea unei pa/ini neoptimati$ate poate a1ea ca
efect prsirea site4ului de ctre persoana care a accesat acest site.
)n alt factor important 6n succesul pa/inilor <eb este reali$area unei strate/ii de
lansare a site4ului; 6nscriere 6n motoare de cutare; portaluri; publicitate 6n re1iste de
4
specialitate.=0ist un concept al optimi$rii la ma0imum al pa/inilor <eb.?n ca$ul acestui
concept fiecare bit de informaie contea$a; de aceea se 1or elimina o serie de elemente
considerate inutile pentru o pa/in <eb 8site<eb9 publicat pe Internet.
Pentru a e0emplifica acest concept 1om face o referire la comentariile introduse 6n
pa/inile <eb de ctre persoanele care le reali$ea$.Comentariile se introduc 6ntr4o pa/in <eb
prin intermediul marcaDelor *KL44* si *44M; dup cum se poate obser1a 6n continuare.
KL 44:cesta este un comentariu 44M
Comentariile introduse 6n pa/ina <eb nu sunt afi.ate 6n fereastra na1i/atorului dar
particip la mrirea fi.ierului.
:cest concept de optimi$are la ma0imum a pa/inilor <eb propune eliminarea tuturor
comentariilor inutile din codul surs al unei pa/ini <eb.Eor rmBne doar acele comentarii care
aDut reali$atorul s modifice mult mai u.or pa/ina <eb sau care sunt utile pentru 1ersiunile
mai 1ec,i ale na1i/atoarelor.Comentariile de tipul :KL44 :m introdus o ima/ine 44M sau KL44
:ici introduc un tabel 44M 1or fi eliminate din pa/ina <eb.
?n continure se poate obser1a codul surs al unei pa/ini <eb; care conine o serie de
comentarii inutile.
KL44 centrm ima/inea utili$at ca antet al pa/inii <eb 44M
KL44 ima/inea utili$at este un fi.ier NP=G cu dimensiunile 43 pi0eli 44M
KL44:m 6nc,is marcaDul care permite centrarea ima/inii .i a le/turilor 8meniului 944M
K,tmlM
K,eadM
KtitleMCatalo/ mobilier birou KOtitleM
KstHle tHpe P-te0tOcss-M
bodHQmar/in4top:#p0R
a.tip 1: linAQcolor:S >>####Tfont4si$e:mediumTte0t4decoration:noneR
a.tip 1:1isited 8color:S>>####Tfont4si$e :mediumTte0t4decoration:noneR
a.tip 1:acti1eQcolor:S>>####Tfont4si$e :mediumTte0t4decoration :none R
a.tip 1:,o1erQcolor:S#:#=>Tfont4si$e:mediumTte0t4decoration :underlineR
KOstHleM
KO,eadM
KbodH b/colorP-+,ite-M
KL44 in elementul ,ead am utili$at proprietati C22 pentru a stabilii 44M
KL44formatul cator1a elemente %&'L utili$ate in aceasta pa/ina <eb44M
KL442tabilim ca distanta dintre mar/inea superioara a documentului44M
KL44 si continutul sau sa fie de # pi0eli.:m stabilit aceasta 1aloare44M
KL44pentru ca intre ima/inile utili$ate pentru antet si mar/inea superioara44M
KL44a documentului sa nu apara spatii44M
KL442tabilim proprietatile ,iperle/aturilor din cadrul documentului 44M
KL44>olosim proprietatea te0t4decoration cu 1aloarea none pentru a elimina 44M
KL442ubliniarea le/aturii.2ublinierea 1a fi restabilita doar atunci cand44M
KL44Cursorul mouse4ului 1a trece pe deasupra le/aturii 44M
KL44centram ima/inea utili$ata ca antet al pa/inii <eb44M KcenterM
K44Lima/inea utili$ata este un fisier NP=G cu dimensiunile 43 pi0eli 44M
K44Llatime si "" pi0eli inaltime 44M
Kim/ srcP-cat.Dp/-+idt,P-43-,ei/,tP-""-:L&P-:ntet p/ina <ebL-M
KpM
"
Ka ,refP-mop.,tml-classP-tip 1-M#perational KO aMUnbsp T
Ka ,refP-mdi.,tml-classP-tip 1-M7irectorKO aMUnbspTUnbspT
Ka ,refP-meo.,tml-classP-tip 1-MColecti1itatiiK OaMUnbspTUnbspT
Ka ,refP-msf.,tml-classP-tip 1-M2caune si fotoliiKOaMUnbspTUnbspT
Ka ,refP-mac.,tml-classP-tip 1-MCanapeleK OaMUnbspTUnbspT
Ka ,refP-mac.,tml-classP-tip 1-M:ccesoriiKO aM
KOpM
KcenterM
KL44:m inc,is marcaDul care permite centrarea ima/inii si a le/aturilor 8meniului944M
K, 2M
KcenterMin acest catalo/ sunt incluse urmatoarele tipuri de produse:
KO centerM
4mobilier operational TKbrM
4mobilier birou director TKbrM
4mobilier colecti1itati TKbrM
4scaune si fotolii ane0e birou TKbrM
4canapele TKbrM
4accesorii pentru birou T
KO ,2M
K O bodHM
K O ,tmlM
7aca aplicam conceptul de optimi$are la ma0imum a pa/inilor <eb si eliminam
comentariile inutile; codul sursa al pa/inii <eb 1a arata astfel :
K,tmlM
K,eadM
KtitleMCatalo/ mobilier birou K1 titleM
KstHle tHpeP-te0tOcss-M
bodHQmar/in4top:#p0s
a.tip 1: linAQcolor: S >>####Tfont4si$e:mediumTte0t4decoration:noneR
a.tip 1:1isited 8color: S>>####Tfont4si$e :mediumTte0t4decoration:noneR
a.tip 1:acti1eQcolor:S>>####Tfont4si$e :mediumTte0t4decoration :none R
a.tip 1:,o1erQcolor:S#:#=>Tfont4si$e:mediumTte0t4decoration:underlineR
KOstHleM
KO,eadM
KcenterM
Kim/ srcP-cat.Dp/-+id,tP-43- ,ei/,tP-""- :L&P-:ntet pa/ina <eb L-M
KpM
Ka ,refP-mop.,tml-classP-tip 1-M#perational KO aMUnbsp T Unbsp T
Ka ,refP-mdi.,tml-classP-tip 1-M7irectorKO aMUnbspTUnbspT
Ka ,refP-meo.,tml-classP-tip 1-MColecti1itatiiK OaMUnbspTUnbspT
Ka ,refP-msf.,tml-classP-tip 1-M2caune si fotoliiKOaMUnbspTUnbspT
Ka ,refP-mac.,tml-classP-tip 1-MCanapeleK OaMUnbspTUnbspT
Ka ,refP-mac.,tml-classP-tip 1-M:ccesoriiKO aM
KO pM
KO centerM
3
KO,2M
KcenterMin acest catalo/ sunt incluse urmatoarele tipuri de produse :
KOcenterM
4mobilier operational TKbrM
4mobilier birou director TKbrM
4mobilier colecti1itati TKbrM
4scaune si fotolii ane0e birou TKbrM
4accesorii pentru birou T
KO ,2M
K O bodHM
K O ,tmlM
2e poate usor obser1a ca acest cod este mult mai scurt si astfel mai usor de urmarit.
Comentarile sunt utile atunci cand introducem in pa/ina <eb pro/rame scrise in Da1a
2cript; E@2cript sau alte componente pentru care dorim sa a1em la indemana cat mai multe
informatii necesare atunci cand le modificam .
7aca in pa/ina <eb creata utili$am comentarii pentru ca aceasta pa/ina
8codul sursa Vcod %&'L9 sa fie mai usor de modificat; nu este indicat sa eliminam toate
comentariile; deorece s4ar putea ca mai tar$iu sa a1em ne1oie de ele .
:sa cum s4a putut obser1a in e0emplu anterior in codul sursa al pa/ini <eb au fost
introduse o serie de comentarii inutile in ca$ul in care pa/ina <eb contine multe informatii
8te0t; ima/ini; etc.9; aceste comentarii inutile pot contribui la cresterea dimensiunii fisierului
re$ultat; lucru pe care dorim sa4l e1itam atunci cand reali$am pa/ini <eb.

5
CAPITOLUL 1
LATIMEA DE BANDA
Latimea de banda repre$inta cantitatea de date 8informatii9ce poate fi transmisa
intr4un inter1al fi0 de timp.Pentru dispo$iti1e di/itale latimea de banda este in mod obisnuit
e0primata in biti pe secunda 8bps9sau bHtes 88 biti9 pe secunda 8bps9.
WilobHtes8W@9P1(24 bHtes
'e/abHtes8'@9P1 (48"53 bHtes
Gi/abHtes8G@9P1(5541824 bHtes
Latimea de banda defineste marimea *conductei- prin intermediul careia informatia se
deplasa$a de la un computer la altul.
Cu cat aceasta latime de banda este mai mare cu atat mai mult informatia se deplasea$a
intr4un inter1al de timp mai scurt.
1.1.Planificarea latimii de banda
=ste indicat ca inainte de a trece la proiectarea si reali$area pa/inilor <eb sa se efectue$e
un scurt studiu pri1ind latimea de banda a audientei pa/inilor de <eb.
La fel cum documentele tiparite sau transmisiile radio au propriile limitari8utilaDe
speciale pentru tiparit; antene radio etc.9 tot asa latimea de banda se constituie intr4o limitare a
mediului pa/inilor <eb .=ste bine de stiut ca daca pa/ina <eb se incarca foarte /reu; multe
persoane care accesea$a pa/ina nu 1or astepta ca aceasta sa se incarce pana la sfarsit.In acest
mod pa/ina de1ine inutila sau putin apreciata; deoarece informatia din cadrul ei 1a fi rareori
parcursa .
2olutia corecta de utili$are a ima/inilor4implicit latimea de banda utili$ata de aceaste
ima/ini8fisiere /rafice94nu o repre$inta eliminarea definiti1a a acestora din pa/ina <eb.2olutia
o constituie intele/erea limitarilor impuse de latimea de banda a mediului utili$at de audienta;
precum si reali$area de pa/ini care sa functione$e corect in limitele constran/erilor impuse .
Planificarea si or/ani$area se reali$area prin :
2tabilirea elementelor8te0t; ima/ini; aplicatii9 ce 1or fi afisate in pa/inile <eb .
Luarea deci$iilor pri1ind modul de utili$are a pa/inilor <eb.Inainte de a trece la
reali$area efecti1a a pa/inilor in editorul %&'L .7e aceea planificarea si or/ani$area
pa/inilor <eb care formea$a site4ul constituie o metoda de planificare a latimii de banda
.:ceasta metoda este uitila atat in fa$a de proiectare a pa/inilor <eb; cat si in fa$a de
reali$are a acestora .
1.2.Rata de transfer a datelor(viteza de transmisie)
Rata de transfer a datelor repre$inta 1ite$a cu care informatiile sunt transmise de la un
dispo$iti1 la altul .7eoarece e0ista o mare 1arietate de rate de transfer a datelor trebuie stabilit
cu atentie timpul de cone0iune81ite$a de transmisie a datelor9 utili$at de maDoritatea audientei
pa/inilor <eb.
Cone0iunile cu latime de banda mare includ urmatoarele tipuri:
&4 V informatia este transmisa cu o 1ite$a de pana la 2'bps; ec,i1alentul a
4(((((( biti pe secunda.Cone0iunea &4 este alcatuita din 352 de canale; fiecare canal
suportand o rata de transfer de 34 Wbps.>iecare canal indi1idual poate fi considerat pentru
8
transmisii de 1oce sau trafic de data .In comunicatii termenul de canal se refera la calea de
comunicare dintre doua computere sau dispo$iti1e di/itale.
&41 V informatia este transmisa cu o 1ite$a de 1."44 'bps ec,i1alentul a 1 "44 (((
biti pe secunda.Cone0iunea &41 este alcatuita din 24 de canale; fiecare canal suportnd o rata
de transfer de 34 Wbps.>iecare canal indi1idul pote fi confi/urat pentru transmisii de 1oce sau
trafic de date.
72L 87i/ital 2ubscriber Line9 Vinformatia este transmisa cu o 1ite$a de 84 Wbps
si 1." 'bps.72L contine doua mari cate/orii:
:72L 8:sHmmetric 7i/ital 2ubscriber Line9 si 272L 82Hmmetric 7i/ital 2ubscriber
Line9 .:72L suporta rate de transfer de la 1." 'bps pana la ! 'bps la receptia datelor si de la
13 Wbps la trimiterea datelor :
272L suporta rate de transfer de pana la 'bps.Cone0iunile cu latime de banda mica se
reali$ea$a de obicei prin intermediul unui modem. Cele mai obisnuite rate de transfer
81ite$e9 pentru un modem sunt :
"3 Wbps; informatia este transmisa cu "3 ((( bps.
28.8 Wbps; informatia este transmisa cu 28 8(( bps.
14.4 Wbps; informatia este transmisa cu 14 4(( bps.
Intotdeauna trebuie stabilita rata de transfer a datelor cu re$er1a .Ju inseamna ca daca un
modem de 28.8 Wbps este capabil sa transmita informatia cu o 1ite$a de 28 8(( bps o 1a si
face.:ceasta 1ite$a de transmisie poate fi influentata de o serie de factori :
calitatea liniei telefonice
distanta fata de linia principala
1olumul de date transmis
numarul de utili$atori conectati
tipul de cone0iune 8linie inc,iriata sau dial4up9
timpul si 1ite$a de reactie a ser1er4ului pe care sunt /a$duite pa/inile <eb
traficul /eneral
1.3.Latimea de banda totala
=ste imperios sa tinem cont de fiecare componenta a pa/ini <eb; atunci cand calculam
timpul de incarcare si latimea de banda necesara .
)na dintre cele mai comune /reseli care se face atunci cand se calculea$a timpul de
incarcare este aceea a luarii in seama doar a ima/inilor8fisierelor /rafice9Ima/inile repre$inta
doar o parte a elementelor dintr4o pa/ina <eb.Cand ne /andim la latimea totala de banda
utili$ata se 1a lua in considerare pa/ina <eb impreuna cu toate elementele care contribuie la
afisarea ei8cod sursa %&'L4fisierul cu e0tensia *I,tml - sau *I,tm-; ima/ini; fisiere
e0terne; C22; Da1a2cript; E@2cript; C9
1.4. Perceptia latimii de banda
Eite$a cu care o pa/ina <eb se incarca depinde si de perceptia persoanei care o
accesea$a.Ceea ce contea$a de fapt este latimea de banda perceputa si nu cea reala.'odul de
perceptie influentea$a realitatea; tocmai de aceea 1ite$a de incarcare a unei pa/ini <eb
depinde de persoana care o accesea$a .
!
Limea de banda poate fi considerata ca fiind 1ite$a efecti1a la care biii sunt
transmi.i de la sursa ctre destinaie sau dimensiunea unui canal dintre doi utili$atori .
In ca$ul in care se utili$ea$a ima/ini mari se 1a incerca sa se taie 8di1i$a9 ima/inea in
piese mai mici 8prin intermediul editoarelor de ima/ini sau a utilitarelor speciale9.&impul de
6ncrcare este acela.i sau mai redus; dar persoana care accesea$ pa/ina 1a putea sa 1ad pe
parcursul incarcarii pa/inii cum sunt afi.ate piesele cre compun ima/inea; astfel a1and
impresia ca pa/ina se incarca mai repede.
1.5. Optimizarea coduui !TML
Primul pas ce trebuie facut pentru a reali$a optimi$area unei pa/ini <eb consta in
optimi$area codului sursa %&'L; adica a codului dintr4un fisier cu e0tensia *I,tm- sau
*I,tml-.
K,tmlM
K,eadM
KtitleM>irst tableLKOtitleM
KO,eadM
KbodH b/colorP*Hello+-M
Ktable borderP*1-M
KtrM
KtdMCell 1KOtdM
Kt/MCell 2KOtdM
KOtrM
KtrM
KtdMCell KOtdM
KtdMCell 4KOtdM
KOtrM
KtableM
KObodHM
KO,tmlM
K,tmlM
K,eadM
KstHle tHpeP*te0tOC22-M
, 1Qcolor : purpleR
KOstHleM
KO,eadM
KbodH b/colorP*Hello+-M
KcenterM
K, 1M Pa/ina initiala L KO,1M
KOcenterM
KObodHM
KO,tmlM
2e pot efectua cate1a simple modificari ale marcaDelor 8etic,etelor9 %&'L pentru ca
ima/inile dintr4o pa/ina <eb sa se incarce mai repede .
1(
'arcaDul Kim/M; marcaDul %&'L care permite introducerea de ima/ini 8fisiere
/rafice9 intr4o pa/ina <eb; ofera cate1a atribute care este indicat sa fie folosite.:ceste
atribute sunt :
<I7&%P2pecifica latimea ima/inii inserate in pa/ina <eb.)tili$area
atributului +idt, permite na1i/atorului 8bro+ser9 sa stabilieasca
spatiul necesar afisarii ima/inii in pa/ina <eb; dupa care sa se
ocupe de incarcarea restului de informatie din pa/ina <eb .
%=IG%&P2pecifica inaltimea ima/inii inserate in pa/ina <eb.)tili$area
atributului ,ei/,t permite na1i/atorului8bro+ser9 sa stabileasca
spatiul necesar afisarii ima/inii in pa/ina <eb; dupa care sa se
ocupe de incarcarea restului de informatie din pa/ina <eb .
=0emplu : K im/ sreP*casa.Dp/- +idt,P*12(- ,ei/,tP*24(- M
:L& 4 &e0t alternati1 .:cest te0t alternati1 este afisat atunci cand :
4ima/inea nu poate fi afisata 8lipseste de la locatia preci$ata9 T
4utili$atorul a de$acti1at optiunea de afisare a ima/inilor in pa/ina <ebT
4este utili$at un dispo$iti1 ce nu permite afisarea ima/inilor T
4ima/inea se incarca lent .
=0emplu : K im/ sre P*casa.Dp/- +idt,P*12(- ,ei/,tP *24(- altP*Casa
mea L-M
K im/ sreP *mare.Dp/- +idt,P *2((- ,ei/,tP *24(- altP
*ima/ine din concendiu L -M
7e asemenea este indicat ca dimensiunea ima/inii 8latimea I inaltimea9 in pi0el: sa
corespunda cu cea introdusa ca 1aloare pentru atributele marcaDului Kim/M .
1.5.1 Utiizarea atri"uteor #$idt%& 'i #%ei(%t&
Intotdeauna se 1a include aceste atribute in marcaDul K im/ M.:tributele +idt, si ,ei/,t
furni$ea$a na1i/atorului informatii pri1ind dimensiunile ima/inii inserate in pa/ina <eb;
dupa cum se poate obser1a in urmatorul e0emplu :
K,tmlM
K,eadM
KtitleM ima/iniKOtitleM
KO,eadM
KbodH b/colorP *+,ite-M
KcenterM
K,1Mima/iniKO,1M
Kim/ sreP *casa.Dp/- +idt,P *2((- ,ei/,tP *2((- altP *Casa mea L- M
KOcenterM
KObodHM
KO,tmlM
=ditoarele %&'L performante 8de tipul <F2I<FG V<,at Fou 2ee Is <,at Fou Get9
inserea$a automat aceste atribute in marcaDul Kim/M.In ca$ul in care se introduce codul
11
%&'L intr4un simplu editor de te0te 8Jotepad9 nu trebuie uitat sa se utili$e$e aceste
atribute.)tili$area atributelor +idt, si ,ei/,t este indicata deoarece :
na1i/atorul nu mai este ne1oit sa calcule$e dimensiunile ima/inii;
deoarece acestea au fost deDa furni$ate T
informatiile de tip te0t 1or fi afisate inainte de incarcarea 8afisarea9
ima/inii; astfel utili$atorul a1and posibilitatea sa citeasca 8parcur/a9 informatii in timpul
afisarii ima/ini.:cest lucru este posibil deoarece na1i/atorul a stabilit deDa locul 8si
dimensiunile acestuia9 in care 1a fi afisata ima/inea prin intermediul celor doua atribute.
permite efectuarea de artificii referitoare la ima/inile inserate in pa/inile
<eb; cum ar fi redimensionarea ima/ini cu dimensiuni foarte mici .
In urmatorul e0emplu se poate obser1a utili$area unei ima/ini cu dimensiunile 2I2
pi0eli; lan/a ea fiind inserata aceasi ima/ine redimensionata8128I128 pi0eli9 utili$and
atributele +idt, si ,ei/,t .
Codul sursa al fisierului %&'L utili$at pentru afisarea celor doua ima/ini este oferit in
continuare :
K,tmlM
K,eadM
KO,eadM
KcenterM
K,1Mima/iniKO,1M
Kim/ sreP *im/1.Dp/- +idt,P*2-,ei/,tP*2- altP *Ima/ine ori/inala- M
Kim/ sreP*im/1.Dp/-+idt,P*128-,ei/,tP*128-altP *Ima/ine redimensionata-M
KOcenterM
KObodHM
KO,tmlM
Ju este indicat sa se utili$e$e redimensionarea unei ima/ini prin intermediul atributelor
+idt, si ,ei/,t; daca aceasta ima/ine necesita o calitate deosebita 8foto/rafii scanate9
deoarece acest proces duce la pierderea calitatii ima/inii . :ceasta metoda de redimensionare a
unei ima/ini este folositoare atunci cand dorim sa reali$am o bara de delimitare 8linie
ori$ontala sau 1erticala9 utili$and o ima/ine cu dimensiunile de 1I1 pi0eli 8sau 2I2
pi0eli9.Codul sursa a fisierului %&'L utili$at pentru afisarea ima/inilor este :
K,tmlM
K,eadM
KO,eadM
KcenterM
K,1Mima/iniKO,1M
Kim/ srcP *mic./if -+idt,P*2(-,ei/,tP*2(- altP *Ima/ine redimensionata1-M
K br M
Kim/ srcP*mic./if-+idt,P*((-,ei/,tP*((-altP *Ima/ine redimensionata 2 -M
KOcenterM
KObodHM
12
KO,tmlM
)rmatoarele trei ima/ini constituie o comparatie intre marimile in W@ a doua fisiere
format NPG si dimensiunile lor 8latime I inaltime9
7imensiuni ori/inale 7imensiuni ori/inale
42 I "(( pi0eli 42 I "(( pi0eli
:tributele marcaDuluiKim/M: :tributele marcaDuluiKim/M:
<idt,P*42- <idt,P*1"(-
*,ei/,t-P"(( ,ei/,tP*21!-
'arime fisier 2 W@ 'arime fisier 2 W@.Ima/inea
se 1a descarca dar na1i/atorul 1a
trebui sa o redimensione$e .
7imensiuni ori/inale
1"( I 21! pi0eli
:tributele marcaDuluiKim/M:
<idt,P*1"(-
,ei/,tP *21!-
'arime fisier 11 W@ .7imensiunea
fisierului este mica deci se 1a descarca
mai repede .
Ju trebuie utili$ate atributele +idt, si ,ei/,t ale marcaDului Kim/M pentru a reduce
dimensiunile unei ima/ini dintr4o pa/ina <eb; deoarece la timpul de descarcare a ima/inii
ori/inale se 1a adau/a si timpul necesar procesarii noilor dimensiuni introduse
.Redimensionarea ima/inii se 1a face utili$and un editor de ima/ini8Corel 7ra+; produsele
:dobe etc.9; si se 1a utili$a in pa/ina <eb dimensiunile reale.
1.5.).Utiizarea te*tuui ater+ati,
=ste indicat ca 6ntotdeauna cBnd se introduce o ima/ine intr4o pa/ina <eb sa se
utili$e$e atributul alt pentru ca introduce te0t alternati1 .
:tributul alt al marcaDului Kim/M furni$ea$ na1i/atorului informaii de tip te0t; ce 1or
fi afi.ate atunci cand ima/inea se 6ncarca /reu sau nu este disponibila .Codul sursa %&'L
utili$at este:
K,tmlM
K,eadM
KO,eadM
KcenterM
K,1Mima/iniKO,1M
1
Kim/ srcP *foto1.Dp/ -+idt,P*1"(-altP *Prima foto/rafieL-M
Kim/ srcP*foto2.Dp/-+idt,P*1"(-,ei/,tP*1"(-altP *: doua foto/rafieL-M
K br M
Kim/ srcP*foto.Dp/-+idt,P*1"(-,ei/,tP*1"(-altP *: treia foto/rafieL-M
Kim/ srcP*foto4.Dp/-+idt,P*1"(-,ei/,tP*1"(-altP *: patra foto/rafieL-M KOcenterM
KObodHM
KO,tmlM
K,tmlM
K,eadM
KO,eadM
KcenterM
Kim/ srcP *car.Dp/ -+idt,P*2((- ,ei/,tP*1(-altP *PRI': '=: ':2IJ: -M
KOcenterM
KObodHM
KO,tmlM
Ealoarea atributului alt 1a fi afisata in fereastra na1i/atorului in $ona stabilita pentru
ima/ine si in ca$ul in care utili$torul a de$acti1at optiunea de afisare a ima/inilor; na1i/atorul
nu poate afisa decat informatii de tip te0t.
Introducerea unui te0t alternati1 prin intermediul atributului alt al marcaDuluiKim/Mnu 1a
duce la cresterea timpului de incarcare a pa/inii <eb.
7e asemenea te0tul alternati1 trebuie sa fie un te0t scurt si descripti1 pentru ima/inea in
cau$a .
1.5.-.Stocarea ima(i+ior
Pentru a stoca ima/ini este necesar sa e0iste o structura lo/ica a directoarelor si fi.ierelor;
utila pentru sal1area si re/sirea ima/inilor .
Ju 6ntotdeauna ima/inile8fi.ierele de tip NP=G; GI> sau PJG9 sunt memorate in acela.i
director cu pa/ina <eb care le 1or afi.a .Ju e0ista re/uli stricte pentru stabilirea structurii
directoarelor si fi.ierelor; limbaDul %&'L fiind fle0ibil din punct de 1edere al sc,emelor
utili$ate pentru stocare.
7aca toate fi.ierele %&'L necesare site4ului se afla in acela.i director si nu e0ista prea
multe ima/ini inserate in pa/inile <eb se poate stoca toate aceste fi.iere 8fi.iere %&'L;
ima/ini; alte fi.iere9 in acela.i director. :ceasta structura permite accesarea u.oara a
fi.ierelor; dar nu este indicata pentru site4uri comple0e.
In ca$ul in care site4ul este comple0 este indicat sa se cree$e subdirectoare pentru fiecare
cate/orie in parte; in care se 1or sal1a fi.ierele %&'L si ima/inile .7e asemenea nu sunt
stabilite re/uli stricte referitoare la numele si e0tensia fi.ierelor; dar e bine sa se 6ncerce sa se
respecte urmtoarele re/uli :
)tili$area con1eniei de denumire a fisierelor.:ceasta con1enie limitea$ numele
fi.ierului la 8 caractere; iar numele e0tensiei la caractere 8*inde0.,tm-; *fi/ura.Dp/-;
*casa./if-; *po$a.pn/- 9.:ceasta re/ula utila in ca$ul in care sistemul utili$atorului nu suporta
denumirea de 8 caractere sau de e0tensii de peste caractere .
14
&rebuie sa se utili$e$e numai litere mici sau daca se utili$ea$ si litere maDuscule;
trebuie sa fim foarte ateni la ceea ce apare in codul sursa 8fi.ierul %&'L9.7aca in director
numele unui fi.ier /rafic8ima/ine9 este *Prima.Dp/- iar marcaDul din codul sursa este Kim/
srcP*prima.Dp/- +idt,P *12(-,ei/,tP *2((-altP *Prima foto/rafie-M; ima/inea nu 1a fi
afisata in fereastra na1i/atorului T
Pentru a e1ita problemele le/te de accesibilitatea resurselor; numele unui fi.ier
/rafic sau a unui fisier %&'L; nu trebuie sa contina spatii sau caracterul * .- .Jumele de
fisier *prima mea foto/rafie.Dp/- este incorect pentru un fi.ier /rafic; la fel cum numele de
fi.ier *pa/ina. de start.,tml- este incorect. Introducerea de spatii sau semne de punctuaie in
numele unui fi.ier poate a1ea ca efect aparitia unor erori la accesarea pa/inii <eb sau poate
duce la imposibilitatea afisarii ima/ini.Intotdeauna cand se stabileste numele unui fisier
utili$at la reali$area unei pa/ini <eb se 1a folosi o denumire scurta si pe cat posibil
descripti1a.
1"
CAPITOLUL )
UTILI.AREA SI REUTILI.AREA IMA/INILOR
&ermenul de cac,e repre$inta o $ona tempora de stocare din calculator sau de pe
ser1er.)tili$and corect aceasta $ona se poate creste 1ite$a de incarcare a pa/inilor <eb.
Cac,e este o $ona de stocare cu dimensiuni reduse aflta pe ,ard4disA sau in memorie;
in aceasta $ona na1i/atorul 8bro+ser9 pastrea$a fisierele pana la afisarea lor in fereastra
na1i/atorului.#rice fisier care se afla in aceasta $ona poate fi afisat in mod repetat fara a mai
trebui sa fie descarcat de pe calcultorul pe care era /a$duit.
&ermenul de disA4cac,e sau buffer se refera la o $ona permanenta de stocare.In
aceasta $ona sunt stocate fisiere de /rafice 8ima/inile9 ce au fost utili$ate la accesarea unei
pa/ini <eb; c,iar si dupa inc,iderea na1i/atorului.:tunci cand na1i/atorul accesea$a o pa/in
<eb pentru care e0ista stocate fisiere; nu este ne1oit sa retransfere aceste fisiere de pe
calculatorul pe care sunt dispuse 8de pe Internet9.:ceste fisiere sunt re/asite in $ona
permanenta de stocare disA4cac,e si sunt reafisate.
# astfel de te,nica este utila pentru persoanele care 1i$itea$a in mod frec1ent
aceleasi pa/ini <eb.
'emoria cac,e stoc,ea$a fisiere pe parcursul unei utili$ari a na1i/atorului.:stfel
sunt memorate cele mai recent utili$ate ima/inii; iar acestea pot fi afisate instntaneu.Cind
acesta memorie cac,e este utili$ata in mod corect; timpul de afisare al unei pa/ini <eb poate
creste foarte mult.
)n e0emplu edificator ar fi utili$area unei ima/ini ca titlu pe prima pa/ina a site4
ului.:ceasta ima/ine 8fisier4/rafic9 1a fi incarcata in memoria cac,e la prima afisare a
pa/inii.7aca se doreste ca pe pa/inile ulterioare sa se utili$e$e aceasi ima/ine ca titlu4ima/ine
care se afla in memoria cac,e pa/ina se 1a incarca mult mai repede.
Reutili$area unor elemente /rafice in cadrul pa/inilor <eb care compun site4ul are
ca efect:
reali$area unui format placut si consistent pentru pa/inile <eb care
constituie site4ul.
cresterea 1ite$ei de incarcare a pa/inilor
Cu cat se reutili$ea$a mai multe elemente /rafice8ima/ini; titluri; etc9; cu atat mai
repede se 1or incarca pa/inile <eb ce constituie site4ul.Ima/inea 1a fi incarcata din cac,e; iar
celelalte elemente din pa/ina <eb 8t0t; ima/ini; aplicatii; C9 1or fi transferate de pe
calculatorul care /a$duieste site4ul; 8ima/ini9.
Codul %&'L pentru fisierul care afisea$a prima pa/ina 8*produse ,tm-9 este oferit
in continuare:
K,tmlM
K,eadM
KtitleM 'a/a$in 1irtual KtitleM
KO,eadM
KbodHM
K&:@L= C=LL2P:CIJGP( C=LLP:7IJGP( @#R7=RP(M
K&RM
K&7M
KI'G.srcP-antet _11.Dp/- <I7&%P8" %=IG%& P!( :L&P-piesa 1-M
KO&7M
13
K&7M
KI'G 2RCP-antet_21.Dp/-<I7&%P2"5 %=IG%&P!( :L&Ppiesa 2M
KO&7M
KO&RM
K&7M
KI'G 2RCP-antet_12.Dp/-<I7&%P8" %=IG%&P" :L&P-produse-M
KO&7M
K&7M
KI'G 2RCP-antet_22.Dp/-<I7&%P2"5%=IG%&P" :L&P-piesa -M
KO&7M
KO&RM
KO&:@L=M
KcenterM
K,1MProduse oferite de ma/a$inul nostruLKO,1M
KOcenterM
KObodHM
KO,tm1M.
2e obser1a ca ima/inea antet_12.Dp/ 8im/ine care contine te0tul *produse-9 este
ima/inea ce se 1a modifica pentru reali$area pa/inii *nou.,tm-
).1. Reutiizarea u+or zo+e di+tr0o ima(i+e
7eseori anumite portiuni dintr4o ima/ine 8element /rafic9 pot fi reutili$ate; ceea ce
are ca efect cresterea 1ite$ei de incarcre a pa/inii <eb.
Reutili$area unei ima/ini 8sau a unei $one din aceasta9poate fi folosita atat pentru
fundalul 8bacA/round9 unei pa/ini; cat si pentru meniuri de na1i/are.7e asemenea; daca se
utili$ea$a un element /rafic cu si/la sau ntet pentru toate pa/inile <eb dintr4un site; este
indicat sa se modifice doar portiunea din /rafic referitoare la o anumita sectiune a site4ului
8considerand ca sectiunile sunt desc,ise in pa/inile <eb diferite9.In urmatorul e0emplu se
poate obser1a o reasamblare incorecta a pieselor unei ima/ini taite cu utilitarul 2plit$; din
cau$a introducerii de treceri la linie noua 8CR4=nter9 si e0traspatii intre elementele %&'L din
codul sursa al pa/inii <eb.
Codul sursa 8cod %&'L9pentru asamblarea incorecta:
K,tmlM
K,eadM
KtitleM2ocietate de Constructii KOtitleM
KO,eadM
Ktable cellspacin/P( cellpadin/P( borderP(
KtrM
KtdM Kim/ srcP-inde0_11.Dp/-+idt,P181 ,ei/,tP"3 altP-piesa componenta-M
KOtdM
KtdM Kim/ srcP-inde0_21.Dp/-+idt,P211 ,ei/,t P"3 altP-piesa componenta-M
KOtdM
KtdM Kim/ srcP-inde0_1.Dp/-+idt,P14 ,ei/,tP"3-piesa componenta-M
KOtdM
15
KOtrM
KtrM
KtdM Ka ,refP-info.,tml-M Kim/ srcP-inde0_12.Dp/-+idt,P181 ,ei/,t P"8 alt
P-informatii /enerale- borderP(M KOtdM.
KtdM
Ka ,refP-pre$.,tml-M Kim/ srcP-inde0_22.Dp/- +idt,P211 ,ei/,tP"8 altP
*pre$anarea societatii- borderP(M KOaM KOtdM
KtdM Ka ,refP-ima/ini ,tml-M Kim/ srcP-inde0_2.Dp/-+idt,P14 ,ei/,tP"8
altP-ima/ini lucrari e0ecutate *borderP(MX KOaM
KOtdM
KOtrM
KOtableM
KObodHM
KO,tmlM
Codul sursa8cod %&'L9 pentru asamblarea corecta
K,tmlM
K,eadM
KtitleM 2ocietate de Constructii KtitleM
KO,eadM
Ktable cellspacin/P( cellspacin/P( border P(9
KtrM
KtdM Kim/ srcP-inde0_11.Dp/- +id,tP181 ,ei/,tP"3
altP-Piesa componenta-M KOtdM
Kt/M Kim/ srcP-inde0_21.Dp/-+idt,P211 ,ei/,tP"3
altP-Piesa componenta-M KOtdM
KtdM Kim/ src P-inde0_1.Dp/-+idt,P14 ,ei/,tP"3
alt P-Piesa componenta-M KOtdM
KOtrM
KtrM
KtdM Ka ,refP-info.,tml-M Kim/ srcP-inde0_12.Dp/-+idt, 181
,ei/,tP"8 altP-informatii /enerale-bordreP(M KOaM KOtdM
KtdM Ka ,refP-pre$.,tml-M Kim/ scrP-inde0_22.Dp/-
+idt,P211 ,ei/,tP"8 altP-pre$entarea societatii-borderP(M KOaM KOtdM
KtdM Ka ,refP-ima/ini.,tml-M Kim/ scrP-inde0_2.Dp/-
+idt,P14 ,ei/,t P"8 altP-ima/ini lucrari e0ecutate borderP(M KOaM KOtdM
KOtrM
KOtableM
KObodHM
KO,tmlM.
18
).). Pre1+c2rcarea ima(i+ior
)na dintre cele mai bune metode de cre.tere a 1ite$ei de incarcare a pa/inilor <eb
este *pre6ncrcarea-; metoda care consta in incarcarea in cac,e a ima/inii inainte ca
utili$atorul sa aDun/a la pa/ina in care 1a fi afisata ima/ineaL
:ceasta metoda are efect asupra 1ite$ei de incarcare a pa/inilor <eb perceputa de
catre utili$ator.)tili$atorul nu 1a obser1a incarcarea ima/inii deoarece atentia sa 1a fi atrasa
de catre alt proces.
Pentru a utili$a aceasta metoda trebuie introdusa o ima/ine8fisierul /rafic9intr4o
pa/ina anterioara; care se 1a incarca inaintea pa/inii in care 1a fi afisata ima/inea; de obicei
intr4o pa/ina in care utili$atorul 1a sta mai mult timp si nu 1a reali$a ca in paralel se incarca o
ima/ine 8pa/ina care contine multe informatii interesante9.
2e 1a introduce marcaDul pentru ima/inea care urmea$a a fi preincarcata la sfarsitul
pa/inii <eb.Pentru ca ima/inea sa nu fie 1i$ibila in pa/ina in care este pre6ncrcata sau
redimensiona ima/inea la 1alorile 101 pi0eli:
Kim/ scrP-mare.Dp/-+idt,P-1- altP- *M
Ima/inea8fisierul /rafic9se incarca; dar a1and dimensiunile de 101 pi0eli nu 1a fi afisata
pe ecran8nu se 1a 1edea9; reali$andu4se astfel un proces in1i$ibil de preincarcare .7eoarece
ima/inea a fost sal1ata in cac,e; atunci cand utili$atorul se 1a deplasa la pa/ina in care
ima/inea urmea$a a fi afisata la marimea ei ori/inala; aceasta 1a fi afisata foarte rapid.In
urmatorul e0emplu am introdus la sfarsitul pa/inii <eb o ima/ine care 1a fi preincarcata :

1!
Kim/ scrP-mare.Dp/-+idt,P-1- ,ei/,tP-1- altP- *M
K,tmlM
K,eadM
KtitleMCapitolul KOtitleM
KO,eadM
KcenterM
K,1MCapitolul KO,1M
KOcenterM
KpM:cesta este para/raful 1 din capitolul KOpM
:
:
KpM )ltimul para/raf din acest capitol L KOpM
Kim/ srcP-mare.Dp/-+idt,P-1- ,ei/,tP-1- altP- *M
KObodHM
KO,tmlM
)ltimul e0emplu din acest capitol este o pa/ina <eb care afisea$a un te0t e0plicati1; timp
in care are loc si pre6ncrcarea urmatoarelor doua ima/ini:
Codul sursa utili$at este urmatorul:
K,tmlM
K,eadM
KtitleMRase de caini L KOtitleM
KO,eadM
KcenterM
K,1MRase de cUarcireT iniKO,1M
KOcenterM
KpMIn continuare sunt oferite cate1a informatii succinte despre urmatoarele rase de
cUarcire Tini :KOpM
KpM Ka ,refP-caine 1.,tml-tar/et P-_blanA-M'almutKOaM
KOpM
KpM Ka ,refP-caine 2.,tml-tar/etP-_blanA-MCollie
KOaM KOpM
K,rM
Kim/ scrP-do/ 1.Dp/-+idt,P-1-,ei/,tP-1-M
Kim/ scrP-do/ 2.Dp/-+idt,P-1-,ei/,tP-1-M
KObodHM
KO,tmlM.
2(
2.3. Divizarea (tierea) imaginilor
)na dintre cele mai bune metode de cre.tere a percepiei latimii de banda este metoda
tierii 8slicin/9 sau di1i$rii ima/inii in mai multe piese mici.
7i1i$area 8tierea9 unei ima/ini poate fi reali$ata in doua moduri:
utili$Bnd un pro/ram utilitar care permite di1i$area ima/inii
mari format NPG sau GI> in piese componente 8utilitarul 2plit$TC9
reali$area pieselor componente ale ima/inii mari direct cu
editorul /rafic utili$at 8Corel 7ra+C9
# ima/ine cu dimensiuni mari8latime 0 inaltime9poate arata foarte bine intr4o pa/ina
<eb si de asemenea poate conine foarte multe informaii utile persoanei care accesea$
pa/ina.
7e$a1antaDul unei ima/ini cu dimensiuni mari este timpul mare de afi.are 8ima/inea se
6ncrca /reu din cau$a mrimii fi.ierului in sine9.
'etoda di1i$rii unei ima/ini cu dimensiuni mari 8latime 0 inaltime V +idt, 0 ,ei/,t9
in mai multe ima/ini mai mici ca dimensiuni 8a.a numitele piese9are ca efect afi.area fiecrei
piese odat cu 6ncrcarea ei.
&impul total de 6ncrcare al ima/inii este apro0imati1 acela.i; dar 1ite$a de 6ncrcare
perceputa de utili$atorul care accesea$ pa/ina <eb este diferita .=ste posibil ca la tierea
ima/inii mari in piese mai mici totalul mrimii fi.ierelor sa fie mai mic decBt mrimea
fi.ierului ori/inal.
)tili$atorul obser1a ca are loc un proces rapid de 6ncrcre a pa/inii; deoarece 1ede
modificri in aspectul acesteia; datorita incarcarii pieselor componente ale ima/inii mari.
In ca$ul in care ima/inea ce urmea$ a fi di1i$ata conine $one cu te0t simplu si
culoare solida; precum si $one cu fundaluri foto/rafice sau tonuri de culori; atunci se poate
di1i$a ima/inea in piese ce 1or fi sal1ate in formate diferite 8GI>;NPG sau PJG9 .

>ormatul GI> 1a fi utili$at pentru piesele care conin te0t simplu si au ca fundal o culoare
solida simpla; iar formatul NPG pentru piesele cu fundaluri foto/rafice8ima/ini comple0e;
te0turi; C9.:ceasta utili$are de formate diferite 1a a1ea ca efect scderea mrimii
fi.ierelor8pieselor componente9ce constituie ima/inea mare; deci implicit a timpului de
afi.are 86ncrcare9 a ima/inii in pa/ina <eb .
21
).-.1. A+aiza3 t2ierea 4i rea'am"area ima(i+ii
Pentru tierea 8di1i$area9 corecta si utila a unei ima/ini este bine sa se reali$e$e
urmtorii pa.i:
19 anali$a ima/inii ce urmea$ a fi di1i$ataT
29 di1i$area ima/inii sau stabilirea componentelor ce urmea$ a fi createT
9 reasamblarea pieselor intr4o sin/ura ima/ine.
Primul si cel mai important pas este acela al anali$rii ima/inii pentru a decide modul
in care acesta 1a fi impartita 8di1i$ata9.
Reali$area unei di1i$ri corecte si lo/ice are ca efect reasamblarea mult mai u.oara a
ima/inii.
7i1i$area se poate face doar sub forma unor ptrate sau dreptun/,iuri; deoarece numai
a.a se pot introduce ima/ini intr4o pa/ina <eb L

Pentru ca reasamblarea ima/inii sa se poat face cat mai u.or; trebuie ca di1i$area sa
se fac lo/ic si nu aleatoriu.
)n prim pas este stabilirea tipului de fi.ier utili$at pentru fiecare piesa componenta a
ima/inii 8GI>; NPG9.La stabilirea tipului de fi.ier utili$at pentru fiecare piesa se 1a tine cont de
elementele care compun aceste piese 8fundal; numar de culori; te0turi; C9.
Cel de al doilea pas ce trebuie reali$at este di1i$area efecti1a a ima/inii in piesele
componente sau reali$area lor in editorul /rafic.
7i1i$area ima/inii se poate face in doua moduri; utili$and un pro/ram care 1a taia
ima/inea obtinuta prin intermediul unui editor /rafic sau prin crearea direct in editorul /rafic a
componentelor ima/inii si e0postarea lor una cate una .
7aca intr4o pa/ina <eb se pot introduce ima/ini doar sub forma dreptun/,iulara;
aceasta nu inseamna ca ima/inea ce 1a fi utili$ata nu poate contine forme rotunDite sau linii
curbe.
22
:l treilea pas ce trebuie reali$at este reasamblarea ima/inii in pa/ina <eb.
Pentru ca aceasta reasamblare sa se fac corect; este bine ca atunci cBnd e0portam
din editorul /rafic piesele componente; sa notam dimensiunile acestora 8latime 0 inaltime V
+idt, 0 ,ei/,t9 sau sa utili$am o aplicaie ce permite di1i$area ima/inii dup ce aceasta a fost
reali$ata si e0portata in 6ntre/ime din editorul /rafic.
#data ce a1em piesele componente ale ima/inii se 1a utili$a tabele %&'L pentru a
reasambla ima/inea.Pentru a ne asi/ura ca 1a e0ista e0traspatii intre piesele componente ale
ima/inii 1om atribui 1aloarea *$ero- urmatoarelor trei atribute ale marcaDului %&'L
KtableM:cellspacin/; cellpaddin/ si border.Pentru di1i$area din ima/inea anterioara; codul
%&'L utili$at la reasamblarea ima/inii se poate obser1a in continuare :
K&:@L= C=LL2PCIJGP # C=LLP:77IJGP # @#R7=RP #M
K&RM
K&7MKI'G 2RC P*dic_11.Dp/- <I7&%P1(( %=IG%&P!5M KO&7M
K&7MKI'G 2RCP*dic_21.Dp/- <I7&%P4"! %=IG%&P!5M KO&7M
KO&RM
K&RM
K&7MKI'G 2RCP*dic_12.Dp/- <I7&%P1(( %=IG%&P34M KO&7M
K&7MKI'G 2RCP*dic_22.Dp/- <I7&%P4"! %=IG%&P4"! %=IG%&P34M KO&7M
KO&RM
K&RM
K&7MKI'G 2RCP*dic_1.Dp/- <I7&%P1(( %=IG%&P"(M KO&7M
K&7MKI'G 2RCP*dic_2.Dp/- <I7&%P4"! %=IG%&P"(M KO&7M
KO&RM
K&RM
K&7MKI'G 2RCP*dic_14.Dp/- <I7&%P1(( %=IG%&P"!M KO&7M
K&7MKI'G 2RCP*dic_24.Dp/- <I7&%P4"! %=IG%&P"(M KO&7M
KO&RM
K&RM
K&7MKI'G 2RCP*dic_1".Dp/- <I7&%P1(( %=IG%&P4(M KO&7M
K&7MKI'G 2RCP*dic_2".Dp/- <I7&%P4"! %=IG%&P4(M KO&7M
KO&RM
KO&:@L=M
2
In codul sursa anterior se pot obser1a cele $ece piese8ima/ini9 componente ale ima/inii ce
1a fi afi.ata in pa/ina <eb8KI'G 2RCP*dic_24.Dp/- <I7&%P4"! %=IG%&P"!M C9; piese
ce sunt introduse in celulele tbelului8KtdMCKOtdM9.
).-.).Utiizarea ima(i+ior pe+tru me+iuri de +a,i(are
'eniurile de na1i/are permit persoanei care accesea$ pa/ina <eb s selecte$e
informaia dorit 8s se deplase$e prin pa/inile <eb care compun site4ul9.
)tili$area unor ima/ini mari ca dimensiune pentru meniuri de na1i/are 8sau pentru ,ari
ale unui site4ima/e map9 are ca efect cre.terea timpului de 6ncrcare a pa/inii <eb.Pentru a
e1ita acest neaDuns putem utili$a metoda di1i$rii ima/inilor 6n piese mai mici; pentru
anumite piese fiind atribuite le/turi prin intermediul marcaDului %&'L KaM.2e 1a obine
astfel un pseudo4meniu de na1i/are.
Pentru a reali$a un astfel de pseudo4meniu se 1a crea mai 6ntBi ima/inea dorit; dup
care se 1a stabili care sunt $onele ce 1or de1eni optiunui ale meniului 8$onele pe care daca
utili$atorul pa/ini <eb 1a e0ecuta un clicA cu mouse4ul; 1a fi trimis catre o alta pa/ina <eb
componenta a site4ului9.7upa stabilirea modului de taiere 8di1i$are9 a ima/inii se 1a trece la
di1i$area efecti1a a acesteia; dupa care se 1a scrie codul %&'L necesar reasamblarii ima/inii
si stabilirii le/aturilor.
In urmatorul e0emplu am reali$at un astfel de pseudo4meniu de na1i/are si 1om anali$a
codul %&'L utili$at la reasamblarea ima/inii.
Codul sursa %&'L utili$at pentru crearea meniului este oferit si anali$at in continuare:
K,tmlM
K,eadM
KtitleM%#&=L III KOtitleM
KO,eadM
KbodHM
KcenterM
K&:@L= C=LL2P:CIJG P # C=LLP:77IJG P # @#R7=RP #M
K&RM
K&7M
KI'G 2RCP*,ot_11.Dp/-<I7&%P"( %=IG%&P82 :L&P-piesa-M
KO&7M
K&7M
KI'G 2RCP*,ot_21.Dp/-<I7&%P244 %=IG%&P82 :L&P-piesa-M
KO&7M
KO&RM
K&RM
K&7M
KI'G 2RCP*,ot_12.Dp/-<I7&%P"( %=IG%&P" :L&P-piesa-M
KO&7M
K&7M
KI'G 2RCP*,ot_22.Dp/-<I7&%P244 %=IG%&P" :L&P-piesa-M
KO&7M
24
KO&RM
K&RM
K&7M
KI'G 2RCP*,ot_1.Dp/-<I7&%P"( %=IG%&P51 :L&P-piesa-M
KO&7M
K&7M
K: %R=>P*pre$entare ,tml- &:RG=&P*_blanA- M
KI'G 2RCP*,ot_2".Dp/- <I7&%P244 %=IG%&P52 :L&P*&arife practicate- @#R7=R
P#M
KO:M
KO&7M
KO&RM
K&RM
K&7M
KI'G 2RCP*,ot_13.Dp/-<I7&%P"( %=IG%&P1" :L&P-piesa-M
KO&7M
K&7M
KI'G 2RCP*,ot_23.Dp/-<I7&%P244 %=IG%&P1" :L&P-piesa-M
KO&7M
K&RM
K&RM
K&7M
KI'G 2RCP*,ot_15.Dp/-<I7&%P"( %=IG%&P3( :L&P-piesa-M
KO&7M
K&7M
K: %R=>P*contact. ,tml- &:RG=&P*_blanA- M
KI'G 2RCP*,ot_25.Dp/-<I7&%P244 %=IG%&P3( :L&P-Cum ne puteti contacta L -
@#R7=RP # M
KO:M
KO&7M
KO&RM
K&RM
K&7M
KI'G 2RCP*,ot_18.Dp/-<I7&%P"( %=IG%&P2" :L&P-piesa-M
KO&7M
K&7M
KI'G 2RCP*,ot_28.Dp/-<I7&%P244 %=IG%&P2" :L&P-piesa-M
KO&7M
KO&RM
KO&:@L=M
KOcenterM
KObodHM
KO,tmlM
Reasamblarea pieselor se face prin intermediul unui tabel pentru care s4a stabilit 1aloarea
*$ero- pentru trei atribute 8K&:@L= C=LL2:CIJGP # C=LLP:77IJGP # @#R7=RP
#M9.
2"
:tributul border stabileste /rosimea bordurii care delimitea$a celulele 8KtdMCKOtdM9
unui tabel 8td4tabel data9.
:tributul cellspacin/ stabileste spatiul dintre celulele unui tabel.
:tributul cellpaddin/ stabileste spatiul dintre mar/inea celulei8bordura9 si continutul
celulei tabelului.)n rand al unui tabel se introduce utili$and marcaDele KtrMCKOtrM8tr4tabel
ro+9.
# piesa componenta simpla ce nu poate fi utili$ata ca optiune a meniului 8nu 1a contine o
le/atura catre o alta pa/ina <eb9 se 1a introduce prin intermediul marcaDului %&'L Kim/M.
KI'G 2RCP*,ot_21.Dp/- <I7&%P244 %=IG%&P82 :L&P*piesa-M
:tributul src stabileste ima/inea care 1a fi afisata 8piesa componenta9.
:tributele +idt, si ,ei/,t stabilesc latimea si inaltimea $onei din pa/ina <eb; in care
1a fi afi.ata ima/inea.
:tributul alt repre$inta te0tul alternati18te0t e0plicati19 ce 1a fi afisat in pa/ina <eb;
pana la incarcarea completa a ima/ini.
Introducerea unei piese8ima/ini9componente ce 1a fi utili$ata ca optiune pentru meniul
de na1i/are81a face le/atura catre o alta pa/ina <eb9 se 1a face utili$and atat marcaDul Kim/M;
cat si marcaDul KaM; care permite introducerea unei le/aturi catre o alta pa/ina <eb; dupa
cum urmea$a:
K&7M
K: %R=>P*contact. ,tml- &:RG=&P*_blanA- M
KI'G 2RCP*,ot_25.Dp/-<I7&%P244 %=IG%&P3( :L&P-Cum ne puteti contacta L -
@#R7=RP # M
KO:M
KO&7M
:tributul %R=> al marcaDului KaMstabileste pa/ina <eb care 1a fi accesata daca se 1a
e0ecuta un clicA cu mouse4ul pe aceasta optiune 8in ca$ul de fata daca se 1a e0ecuta un clicA
pe urmatoarea piesa componenta9.
:tributul tar/et stabileste unde 1a fi afisata noua pa/ina <eb accesata; in ca$ul nostru
fiind 1orba de o noua fereastra 81aloarea_blanA9 a na1i/atorului 8bro+ser4ului9. In ca$ul
marcaDuluiKim/Mutili$at pentru introducerea unei ima/ini acti1e 8ima/inea care are stabilita o
le/atura catre o alta pa/ina <eb prin intermediul marcaDului KaM9; se utili$ea$a si atributul
border cu 1aloarea *$ero-; pentru ca atunci cand e0ecutam un clicA cu mouse4ul pe ima/ine
sa nu fie afisata o bordura care ar duce la sc,imbarea aspectului ima/inii mari.7e asemenea
nu se 1a introduce e0tra4spatii intre marcaDul KaM si marcaDul Kim/M; deoarece aceste spatii
duc la aparitia de $one de culoare alba in ima/inea mare.
Corect
K: %R=>P*contact. ,tml- &:RG=&P*_blanA-M KI'G 2RCP*,ot_25.
Dp/-<I7&%P244 %=IG%&P3( :L&P*Cum ne puteti contacta L-
@#R7=RP #M KO:M
Incorect
K: %R=>P*contact. ,tml- &:RG=&P*_blanA-M KI'G
2RCP*,ot_25.Dp/-<I7&%P244 %=IG%&P3( :L&P-Cum ne puteti contacta L - @#R7=RP
# M KO:M
23
).-.-.Ima(i+i a+imate
&e,nica di1i$arii 8taierii; decuparii9 unei ima/ini in piese componente mai mici este
utila si atunci cand dorim sa reali$am ima/ini animate 8GI>animat V animatedGI>9.7aca doar
o anumita parte dintr4o ima/ine este animata; putem utili$a te,nica taierii pentru a di1i$a
ima/inea si a reincarca doar acele piese care sunt animate.
Piese animate:

Piesa simpla neanimata:
Codul sursa 8codul %&'L9 utili$at pentru asamblarea a trei piese este pre$entat in
continuare:
K,tmlM
K,eadM
KtitleMIma/ine animataL KOtitleM
KO,eadM
25
KbodHM
KcenterM
K&:@L= C=LL2P:CIJG P # C=LLP:77IJG P # @#R7=RP #M
K&RM
K&7M
KI'G 2RCP*anim./if - <I7&%P3 %=IG%&P242 :L&P *Piesele
animate-M
KO&7M
KO&RM
K&RM
K&7M
KI'G 2RCP*.Dp/- <I7&%P3 %=IG%&P248 :L&P*Piesa simpla-M
KO&7M
KO&RM
KO&:@L=M
KOcenterM
KObodHM
KO,tmlM
Piesa simpla89 1a fi reutili$ata; iar cele doua piese81si 29 1or alterna 8in cadrul
fisierului anim./if 9.

Pasii ce trebuie reali$ati pentru a taia o ima/ine ce contine si $one animate sunt
urmatorii :
19 7i1i$area ima/inii in piese componente.Pe cat posibil; piesele ce 1or fi utili$ate
pentru $ona animata trebuie reali$ate cat mai miciT
29 2al1area pieselor neanimate in format GI> sau NP> T
28
9 Reali$area ima/inii animate si sal1area acesteia in format GI> si animat.Pentru
reali$area ima/inilor animate e0ista o serie intrea/a de utilitare ce pot fi descarcate dupa
internet.

2.4. tilizarea miniat!rilor(t"!mbnails)
# miniatura8t,umbnail9 este o 1ersiune cu dimensiuni reduse 8latimeIinaltime 4
+idt,I,ei/,t9 a ima/inii ori/inale.Implicit dimensiunea in W@ a miniaturii 8fisierului NPG sau
GI>9 1a fi mai mica decat dimensiunea ima/inii ori/inale.
:1antaDul utili$arii miniaturilor consta in reducere timpului de incarcare8afisare9 a
ima/inilor.)tili$area miniaturilor permite introducerea mai multor ima/ini intr4o sin/ura
pa/ina <eb fara a fi ne1oiti sa incarcam 8doar daca dorim9 1ersiunea ori/inala de dimensiuni
mari .
7e e0emplu daca dorim sa reali$am o /alerie de ima/ini sau un album foto/rafic
publicabil pe <eb; este indicat sa utili$am miniaturi in loc sa 6ncrcam ima/inile
ori/inale.:stfel utili$atorul care accesea$a pa/ina <eb nu 1a fi ne1oit sa astepte incarcarea
ima/inilor ori/inale.
2e pot crea miniaturi care sa repre$inte doar o portiune din ima/inea ori/inala dupa cum
se poate obser1a in continuare:

2!

# miniatura poate fi utili$ata pentru a face o le/atura catre o alta pa/ina <eb care contine
ima/inea ori/inala si unele informatii suplimentare despre aceasta.=0emplul urmator este
edificator in acest sens:

Pa/ina <eb anterioara contine doua miniaturi 8selectii din ima/inea ori/inala9.In
continuare este oferit codul sursa %&'L pentru pa/ina <eb :
K,tmlM
K,eadM
KtitleM:nimale salbaticeL KOtitleM
KO,eadM
KbodHM
KcenterM
K,1M :nimale salbaticeL KO,1M
KpM
Ka ,refP*leu.,tml- tar/etP*_self-M
Kim/ srcP*pmleu.Dp/ - +idt,P*3!- ,ei/,tP*34- borderP *(-M
KOaM
KOpM
KpM
Ka ,refP*ti/ru.,tml- tar/etP*_self-M
Kim/ srcP*pmti/.Dp/- +idt,P*38- ,ei/,tP*34- borderP *(-M
(
KOaM
KOpM
KOcenterM
KObodHM
KO,tmlM
2e obser1a utili$area marcaDului Kim/M pentru a introduce miniatura 8Kim/
srcP*pmleu.Dp/- +idt,P*38- ,ei/,tP*34- borderP*(-M
Kim/ srcP*pmti/.Dp/- +idt,P*38- ,ei/,tP*34- borderP*(-M9 si a marcaDului KaM pentru
a reali$a le/atura catre pa/inile <eb leu.,tml si ti/ru.,tml8Ka ,refP*leu.,tml-tar/etP*_self-M
si
Ka ,refP*ti/ru.,tml-tar/etP*_self-M9.
=0ecutarea unui clicA cu mouse4ul pe una din cele doua ima/ini8miniaturi9 1a a1ea ca
efect desc,iderea pa/inilor <eb referite dupa cum se poate obser1a in continuare.
K,tmlM K,tmlM
K,eadM K,eadM
KtitleMLeulKOtitleM KtitleM&i/rulKOtitleM
KO,eadM KO,eadM
KbodHM KbodHM
KcenterM KcenterM
K,1MLeulKO,1M K,1M&i/rul siberianKO,1M
KpM KpM
Kim/ srcP*oleu.Dp/ - Kim/ srcP*oti/.Dp/-
+idt,P*"((-,ei/,tP*8- +idt,P*"((- ,ei/,tP*488-
borderP *(-M borderP*(-
KOpM KOpM
KOcenterM KOcenterM
KObodHM KObodHM
KO,tmlM KO,tmlM
7e asemenea o miniatura poate fi utili$ata pentru a face o le/atura catre un fisier
1ideo8film9; in acest ca$ miniatura fiind o ima/ine capturata in timpul filmului.Pasii ce
trebuie urmati pentru a reali$a o miniatura sunt urmatorii :
19 7esc,idem ima/inea ori/inala in editorul /rafic utili$atT
29 2al1am ima/inea sub un alt nume8in format Gi>; NPG; sau PJG9T
9 Reducem dimensiunile ima/inii pentru a obtine o ima/ine cat mai mica8dar
inteli/ibila9; sau selectam $ona dorita pentru miniaturaT
49 2al1am din nou ima/inea redimensionata sau noua ima/ine obtinuta prin
selectarea unei $one din ima/inea ori/inalaT
"9 Introducem miniatura in pa/ina <eb prin intermediul marcaDuluiKim/M si
reali$am o le/atura catre pa/ina <eb care 1a contine ima/inea ori/inala8prin intermediul
marcaDului KaM9.
=0emplul urmator 1a utili$a un scurt pro/ram8script9 scris in limbaDul Na1a 2cript;
pro/ram ce 1a permite ca atunci cand e0ecutam un clicA cu mouse4ul pe o miniatura; sa se
desc,ida o noua fereastra a na1i/atorului ce 1a contine ima/inea ori/inala. Joua fereastra
desc,isa 1a fi doar cu putin mai mare decat ima/inea ori/inala.7aca se 1a e0ecuta un clicA pe
1
una din ima/ini; se 1a desc,ide o noua fereastra care contine ima/inea la dimensiunile ei
ori/inale.Codul sursa pentru pa/ina care contine cele patru ima/ini8miniaturi9 este oferit in
continuare:
K,tmlM
K,eadM
KtitleMima/ini masiniKOtitleM
K2cript lan/ua/eP*Na1a 2cript-M
function inc>oto8im/9Q
foto1Pne+ ima/e 89 T
foto1.srcP8im/9T
set>oto8im/9T
R
function set>oto8im/9 Q
if88foto1.+idt,LP(9UU8foto1.,ei/,tLP(99 Q
1e$i>oto8im/9T
R
elseQ
c,emfuncP*set>oto8Y *Zim/Z- Y 9- T
inter1alloPset&imeout8c,emfunc; 2(9 T
R
R
function 1e$i>oto8im/9 Q
1(Pfoto1.+idt, T
1(Pfoto1.,ei/,t T
latPfoto1.+idt,Z2( T
inaltPfoto1.,ei/,tZ2( T
dateim/P*+idt,P*ZlatZ-; ,ei/,tP*ZinaltZ- topP2(; leftP2(- T
fereastraP+indo+.open8 im/; *-; dateim/ 9 T
R
KOscriptM
KO,eadM
KbodH b/colorP* S>>>>>> -M
Kfont colorP* S###### - faceP* :rial; %el1etica; sans4serif - M
Kdi1 ali/nP*center- M
K,1MPeu/eotKO,1M
K&:@L= @#R7=RP* 1 - cellspacin/P" cellpaddin/P"M
K&RM
K&7 ali/nP*center- 1ali/nP*top- +idt,P*13"- b/colorP* S>>>>>> - M
Ka %R=>P*Da1ascript:inc>oto8Y2(3.Dp/Y9- @#R7=RP*(- M
KI'G 2RCP*m2(3.Dp/-@#R7=RP*(- ,ei/,tP*1((- +idt,*1"1- M
KOaM
KbrM
KbM>oto 1KObM
KO&7M
Ka %R=>P*Da1ascript:inc>oto8Y(5.Dp/Y9- @#R7=RP*(- M
2
KI'G 2RCP*m(5.Dp/-@#R7=RP*(- ,ei/,tP*1((- +idt,*144- M
KOaM
KbrM
KbM>oto 1KObM
KO&7M
Ka %R=>P*Da1ascript:inc>oto8Y3(5.Dp/Y9- @#R7=RP*(- M
KI'G 2RCP*m3(5.Dp/-@#R7=RP*(- ,ei/,tP*1((- +idt,*13(- M
KOaM
KbrM
KbM>oto 1KObM
KO&7M
KO&RM
KO&:@L=M
KOdi1M
KcenterM
K,rM
KOcenterM
KOfontM
KObodHM
KO,tmlM
'iniaturile8t,umbnails9 sunt introduse intr4un tabel prin intermediul
marcaDuluiKim/M.Ima/inea in miniatura8m(5.Dp/9 are dimensiunile de 1(( de pi0eli inaltime
si 1 pi0eli latime.
Le/atura catre pro/ramul8script9 care 1a desc,ide noua fereastra este facuta prin
intermediul marcaDuluiKa %R=>P*Da1ascript: inc>oto8Y(5.Dp/Y9 - @#R7=RP*(- M.
:ceasta le/tura apelea$ funcia inc>oto8im/9; functie aflata in seciunea K,eadMC
KO,eadM a pa/inii <eb ce conine miniaturile.
Ju 1om crea miniaturi doar reducand 1alorile pentru atributele +idt, si ,ei/,t ale
marcaDuluiKim/M.2e 1or reduce doar dimensiunile referitoare la $ona din pa/ina <eb unde 1a
fi afisata ima/inea.'arimea fisierului in W@ ramane aceeasi deoarece se 1a incarca ima/inea
ori/inala .
).5. I+tercaarea ima(i+ior5i+teraci+(6

Intercalarea sau distribuia intercalata repre$int o te,nic de 6ncrcare 8afi.are9
/radata discontinua a ima/inilor de tip GI>8Grap,ics Interc,an/e >ormat9.
Ima/inile de tip GI> pot fi sal1ate in doua moduri:succesi1 sau intercalat.
Ima/inile GI> succesi1e sunt afi.ate in fereastra na1i/atorului cu cBte o linie de
pi0eli; odat 6ncepBnd cu partea superioara a ima/inii; dBndu4i impresia utili$atorului ca
ima/inea*se scur/e- in $ona de afi.are .
Ima/inile de tip GI> intercalate sunt afi.ate in fereastra na1i/atorului intr4o maniera
discontinua; prin afi.area iniiala a primelor opt rBnduri ale ima/inii. =fectul creat este cel al
apariiei ima/inii cu o re$oluie mica.#data ce primul set de rBnduri a fost afi.at; se 1or
adu/a la ima/ine urmatoarele patru rBnduri; crescBnd astfel re$oluia 8claritatea9
ima/inii.7upa adu/area setului de patru rBnduri; pana cand se 1a aDun/e la afi.area tuturor
rBndurilor care compun ima/inea; re$ultBnd astfel ima/inea completa la re$oluia ei finala.
Ima/inea se 1a construi /radat in fereastra na1i/atorului 6ncepBnd de la o re$oluie mica pana
la re$oluia finala.
In ca$ul in care cone0iunea la internet este mai rapida; ima/inea 1a fi afi.ata imediat;
utili$atorul nesesi$Bnd intercalarea. 7aca cone0iunea se face prin intermediul unei linii
telefonice81ite$a redusa9 este indicat utili$area te,nicii de intercalare. :ceasta te,nica permite
utili$atorului sa obser1e coninutul ima/inii8la o re$oluie mai mica iniial9 6nainte ca intrea/a
ima/ine sa se incarce.Intercalarea unei ima/ini de tip GI> crea$a ilu$ia unei 1ite$e de
6ncrcare8afi.are9 mai mari8ilu$ia unei latimi de banda mare9; deoarece persoana care
accesea$ pa/ina <eb obser1a initial o ima/ine neclara care pe parcurs se 1a clarifica. :stfel
4
utili$atorul 1a putea ,otari daca ima/inea care se afi.ea$ pre$int interes; fara a fi ne1oit sa
a.tepte 6ncrcarea completa a ima/inii.

:tunci cBnd reali$am ima/ini GI> intercalate; este bine sa stim ca aceasta te,nica are ca efect
cresterea marimii8in W@9 fisierului; dupa cum putem obser1a in continuare :
>i.ier GI> neintercalat 8non4interlaced9 12".W@
>i.ier GI> intercalat 8interlaced9 12.W@
7up crearea unei ima/ini de tip GI> intercalata; testam aceasta ima/ine prin introducerea ei
intr4o pa/ina <eb si publicarea ei pe internet; pentru a 1edea daca te,nica intercalarii este utila.
7aca utili$am Corel7ra+ pentru a crea o ima/ine format GI> atunci trebuie bifata opiunea
*interlace- pentru ca ima/inea sa fie e0portata intercalat.
:tunci cBnd o ima/ine este sal1ata in format intercalat; aceasta este sal1ata linie cu linie intr4
o serie de pasi.Incepand cu prima linie de pi0eli din partea superioara a ima/inii o ima/ine de tip GI>
intercalata sal1ea$ fiecare opt linii consecuti1e.7upa aceea; 6ncepBnd cu a cincia linie; fiecare opt
linii consecuti1e.7upa aceea; 6ncepBnd cu a cincia linie; fiecare din urmtoarele opt linii sunt sal1ate
in continuare; in final sunt sal1ate toate liniile de pi0eli. &e,nica intercalarii se 1a face doar pentru
ima/ini de tip GI> cu o dimensiune mai mare de ( W@.
Ju trebuie sa utili$am ima/ini de tip GI> intercalate pentru fundalul 8bacA/round9 unei
pa/ini <eb; deoarece utili$area acestora 1a a1ea ca efect cre.terea timpului de 6ncercare a pa/inii.
Ju este indicat sa utili$am ima/ini de tip GI> intercalate; daca cone0iunea la internet este una
rapida. =fectul obinut prin utili$area acestei te,nici nu 1a fi 1i$ibil.

"

2.#. $ptimizarea sc"emelor de c!lori !tilizate
2.#.1.%legerea !nei sc"eme de c!lori pentr! !n site &eb
Culorile repre$int o modalitate puternica de comunicare. =le pot determina si afecta
comportamentul si aciunile umane.
>i$ic; culorile pot irita sau rela0a oc,iul uman; creste tensiunea arteriala sau reduce
apetitul.
Culorile utili$ate la reali$area unui produs; a unei pa/ini <eb8sau a unui site <eb9 pot
cau$a reacii puternice si pot fi determinante pentru succesul sau insuccesul produsului sau
pa/inii <eb.7in punct de 1edere psi,olo/ic culorile Dustifica un procent de peste ""[ din
acceptarea sau respin/erea unui produs; a unei persoane sau a unui site <eb.
Culorile repre$inta o componenta importanta a reali$arii pa/inilor <eb; componenta
aproape la fel de importanta atat in determinarea succesului unui site <eb; cat si a continutului
acestuia.
3
:spectul unei pa/ini <eb8combinatii de culori utili$ate; corpuri de litera utili$ate; C9
impreuna cu informatia continuta constituie fundamentul cresterii numarului de 1i$itatori ai
pa/ini <eb.
:le/erea culorilor pentru o sc,ema de culori utili$ata la crearea pa/inilor <eb este
subiecti1a; dar sc,ema de culori obtinuta trebuie sa fie armonioasa si adec1ata audientei si
scopului pa/inilor 8site4ului9 <eb .
Culorile repre$inta o componenta importanta a reali$arii pa/inilor <eb; deoarece ele
influentea$a dispo$itia si starile emoti1e ale persoanelor care na1i/,ea$a pe internet.
Intr4un site bine /Bndit si anali$at e0ista o consec1enta a modului de reali$are a
acestuia; consec1enta care trebuie sa se e0tind si asupra culorilor8sc,emei de culori9
utili$ate.7e aceea spitalele; bancile; companiile etc. trebuie sa selecte$e si sa utili$e$e
sc,eme de culori care sa inspire incredere si serio$itate si sa scoata in e1identa caracterul
propriu .
=ste important sa se anali$e$e modul in care persoanele care na1i/,ea$a pe internet
aDun/ in site4ul creat.7aca maDoritatea persoanelor accesea$a site4ul introducand o adresa
publicata in re1istele de specialitate; atunci este indicat ca sc,ema de culori utili$ata la
crearea site4ului sa corespunda cu cea utili$ata in re1istele de specialitate .Indeplinirea acestui
criteriu ne permite sa oferim utili$atorului o metoda care sa4i confirme acestuia ca a aDuns
acolo unde dorea.
7aca maDoritatea persoanelor accesea$a site4ul e0ecutand o cautare dupa un anumit
cu1ant; este indicat sa se e1alue$e daca sc,ema de culori utili$ata la crearea site4ului <eb
comunica aceleasi asociatii ca si cu1intele de cautare8ecolo/ie41erde; teste de inteli/enta4/ri;
C9
).7.).E*empe de utiizare a metodeor de 'eectie a cuorior
Primul e0emplu de aplicare a teoriei culorilor in reali$area pa/inilor <eb utili$ea$a
metoda culorilor inrudite.:stfel s4au selectat de pe*inelul culorilor- trei culori inrudite cu
tonuri diferite de /alben si portocaliu.
Codurile ,e0a$ecimale8coduri utili$ate in codul sursa4cod %&'L9pentru cele trei
culori sunt*S>>>>##-; *S>>!!((-; *S>>CC##- .
Pa/ina <eb este compusa din trei cadre8frames9 fiecare cadru utili$and pentru
fundal8bacA/round4atributul*b/color- al elementului*bodH-9 una din culorile enumerate
anterior.
Codul %&'L pentru fisierul care stabileste cele trei cadre8*inde0.,tml-9; precum si
codul %&'L pentru fisierele ce 1or fi afisate initial in cele trei cadre8*meniu.,tml-;
*sus.,tml- si *Dos.,tml-9 sunt pre$entate in continuare.
>isier *inde0.,tml-
K,tmlM
K,eadM
KtitleM)tili$area culori inrudite LKOtitleM
KO,eadM
5
Kframeset colsP*12(; I -M
Kframe srcP*meniu.,tml- nameP*meniu- M
Kframeset ro+sP*1((; I-M
Kframe srcP*sus.,tml- nameP*sus- M
Kframe srcP*Dos.,tml- nameP*Dos- M
KOframesetM
KOframesetM
KO,tmlM
>isier *meniu.,tml-
K,tmlM
KbodH b/colorP*S>>>>##- M
KcenterM
K,M
'eniu
K,rM
Ka ,refP*opt1.,tml- tar/etP*sus-M#ptiunea 1KOaM KbrM
Ka ,ref P*opt 2.,tml- tar/etP *Dos-M#ptiunea 2KOaM KbrM
Ka ,refP*sus.,tml- tar/etP*sus-MCadrul 1KOaM KbrM
Ka ,refP*Dos.,tml- tar/etP*Dos-M Cadrul 2 KOaM
KO,M
KOcenterM
KObodHM
KO,tmlM
>isier *Dos.,tml-
K,tmlM
KbodH b/colorP*S>>!!((- M
KcenterM
K,1M Cadrul 2KO,1M
KOcenterM
KObodHM
KO,tmlM
Cel de al doilea e0emplu contine doua cadre.Cadrul din stan/a 1a contine un meniu de
selectie; iar cadrul din dreapta 1a contine pentru inceput *Pa/ina initialaL-.In cadrul din
dreapta 1a fi afisata informatia obtinuta prin selectarea unei optiuni din meniu.Codul sursa
pentru cele trei fisiere care participa initial la reali$area e0emplului este pre$entat in
continuare:
>isier *inde0.,tml-
K,tmlM
K,eadM
KtitleM)tili$area culori complementare LKOtitleM
KstHle tHpeP*te0tOC22 - M
frame.01Qborder4stHle:solidTborder4color:purpleR
KOstHleM
KO,eadM
Kframeset colsP*1"(; I - M
Kframe classP*01- srcP*stan/a; ,tml- nameP*stan/a- scrollin/P*no- noresi$e M
8
KOframesetM
KO,tmlM
>isier * stan/a.,tml - :
K,tmlM
K,eadM
bodHQbacA/round4color : Hello+R
tdQ
paddin/: 3p0T
bacA/round4color : purpleT
border4stHle: solidT
border4+idt, :4p0T
border4color :Hello+R
aQcolor : +,iteTfont4si$e :lar/eR
KOstHleM
KO,eadM
KbodHM
KcenterM
Ktable borderP*(- M
KtrM
KtdM
Ka ,refP*opt 1.,tml- tar/etP*dreapta- M
optiunea 1
KOaM
KOtdM
KOtrM
KtrM
Ka ,refP*opt 2.,tml- tar/etP*dreapta-M
optiunea 2
KOaM
KOtdM
KOtrM
KtrM
KtdM
Ka ,refP*dreapta.,tml-P*dreapta- M
2tart
KOaM
KOtdM
KtrM
KOtableM
KOcenterM
KObodHM
KO,tmlM
>isier *dreapta.,tml-
K,tmlM
K,eadM
!
KstHle tHpeP*te0tOC22-M
,1Qcolor : purpleR
KO,eadM
KbodH b/colorP*Hello+- M
KcenterM
K,1MPa/ina initiala LKO,1M
KOcenterM
KObodHM
KO,tmlM
24a obser1at in codul %&'L anterior utili$area tablelor pentru aranDarea si modificarea
aspectului meniului de selectie8KtableMCKOtableM9
2c,ema de culori pentru acest e0emplu utili$ea$a doua culori complementare 8/alben si
1iolet9.
:l treilea e0emplu utili$ea$a metoda triadei de culori pentru a stabili sc,ema de culori
pentru reali$area pa/inii8site4ului9<eb.
Pentru aceasta s4a utili$at *inelul culorilor secundare- selectand astfel urmatoarele trei
culori : 1erde; 1iolet si portocaliu.
Codul sursa pentru cele patru fisiere care participa initial la reali$area e0emplului este
pre$entat in continuare :
>isier *inde0.,tml-
K,tmlM
K,eadM
KtitleM)tili$area culori complementare LKOtitleM
KO,eadM
Kframeset ro+sP*3(; I - M
Kframe srcP*sus.,tml- nameP*sus- frameborderP*(- scrollin/P*no- noresi$e M
Kframeset colsP*14"; I - M
Kframe srcP*stan/a.,tml- nameP*stan/a- frameborderP*(-scrollin/P*no- noresi$e M
KOframesetM
KOframesetM
KO,tmlM

>isier *sus.,tml-
K,tmlM
KbodH b/colorP*oran/e- M
KcenterM
Kfont colorP*blacA- M
K,MCadrul1KO,1M
KOfontM
KOcenterM
KObodHM
KO,tmlM
>isier *stan/a.,tml-
K,tmlM
K,eadM
KstHle tHpeP* te0tOC22 - M
4(
bodHQbacA/round4color :purpleR
tdQpaddin/ : 3p0T bacA/round4color :purpleTborder4stHle:solidTborder4+idt, : 4p0T border4
color :purpleR
aQcolor :+,ite Tfont4si$e :lar/eR
KOstHleM
KO,eadM
KbodHM
KcenterM
Ktable borderP*(- M
KtrM
KtdM
Ka ,refP*opt 1.,tml- tar/etP*dreapta- M
optiunea 1
KOaM
KOtdM
KOtrM
KtrM
KtdM Ka ,refP*opt 2.,tml- tar/etP*dreapta- M
optiunea 2
KOaM
KOtdM
KOtrM
KtrM
KtdM Ka ,refP*dreapta.,tml- tar/etP*dreapta- M
Cadrul 2
KOaM
KOtdM
KOtrM
KOtableM
KOcenterM
KObodHM
KO,tmlM

>isier *dreapta.,tml-
K,tmlM
KbodH b/colorP*/reen- M
KcenterM
Kfont colorP*blacA- M
K,1MCadrul 2KO,1M
KOfontM
KOcenterM
KObodHM
KO,tmlM
Codul sursa pentru fisierele 8pa/inile <eb9 *opt 1.,tml- si *opt 2.,tml- este pre$entat in
continuare .
>isier *opt 1.,tml-
41
K,tmlM
K,eadM
,1Qcolor : blacAR
KOstHleM
KO,eadM
KbodH b/colorP*/reen-M
KcenterM
K,1M#ptiunea1 din meniu LKO,1M
KOcenterM
KObodHM
KO,tmlM
>isier *opt 2.,tml -
K,tmlM
K,eadM
,1 Qcolor : blacAR
KOstHleM
KO,eadM
KbodH b/colorP*/reen- M
KcenterM
K,1M#ptiunea 2 din meniuLKO,1M
KOcenterM
KObodHM
KO,tmlM
:l patrulea e0emplu utili$ea$a metoda in1ersarii culorilor.Pentru aceasta 1om ale/e
pentru meniul de selectie culoarea */alben- pentru culoarea *c1- utili$ata ca fundal si
culoarea *albastru- pentru culoarea *c2- utili$ata pentru te0t . In cadrul din dreapta 1om
in1ersa culorile astfel incat culoarea *albastru- pentru culoarea *c1- 1a fi utili$ata ca fundal si
culoarea */alben- pentru culoarea *c2- 1a fi utili$ata pentru te0t.
>isierul care contine codul sursa pentru meniul din stan/a poate fi anali$at in continuare :
K,tmlM
K,eadM
bodHQ
bacA/round4color : Hello+ T
scrollbar4face4color :Hello+ T
scrollbar4,i/,li/,t4color :S>>>>>> T
scrollbar4li/,t4color :SC#C#C# T
scrollbar4darAs,ado+4color :S###### T
scrollbar4s,ado+4color :S8(8(8(T
scrollbar4arro+4color :S>>>>>>T
scrollbar4tracA4color :blueTR
aQcolor:blueTfont4si$e:smallTfont4familH:Casablanca4RomTfont4+e/,t:!((R
,1Qcolor:blueTfont4familH:Casablanca4RomR
KOstHleM
42
KO,eadM
KbodHM
KcenterM
K,1MCuprinsKO,1M
KOcenterM
Ka ,refP*dreapta.,tml-tar/etP*dreapta-M
introducere
KOaM KbrM KbrM
Ka ,refP*a2.,tml-tar/etP*dreapta-M
:.2.Inelul 8Roata9 culorilor X
KOaM KbrM KbrM
Ka ,refP*a.,tml-tar/etP*dreapta- M
:..Caracteristicile culorilor
KOaM KbrM KbrM
KObodHM
KO,tmlM
).7.- .E*empu de 'eectare a cuorior pri+ metoda triadei
:cest e0emplu utili$ea$a limbaDele %&'Lsi Da1a2cript pentru a reali$a un formular care
permite selectia culorilor prin metoda triadei.Pentru aceasta s4a folosit un *inel al culorilor-
care contine 12 culori 8 culori primare; culori secundare si 3 culori tertiare9.
4
=0emplul permite selectarea primei culori din triada 8prin inermediul elementului
%&L'KselectM C.K1 select M9; urmatoarele doua culori din triada fiind determinate automat
prin utili$area unui increment.Pentru fiecare culoare din triada astfel obtinuta 1a fi afisat si
codul ,e0a$acimal.
=0ecutarea unui cliA cu mouse4ul pe buton &riada
culorilor 1a a1ea ca efect afisarea culorilor din triada 8si a codurilor ,e0a$ecimale9.
Codul sursa este :
K,tlmM
K,eadM
KstHle tHpeP-te0tOcss-M
tdQpaddin/:"p0R
selectQ+idt,:1"( p0R
input.b1Qfont Vsi$e :medium R
bQfont4si$e:medium R
KOstHleM
Kscript lan/ua/e P-Da1a2cript-M
function sc,imba 1 8culoare9
Q
document.te0t.t1.1aluePdocument.form1.ps1.options\document.form1ps1.selected
inde0].1alueT
c1.b/ColorPdocument .form1.ps1.option\document.form1.ps1.selectedinde0].1alueT
1ar ioPdocument.form1.ps1.selectedinde0Z4 T
1ar HoPio411T
if8ioM119
Q
document.te0t2.t2.1aluePdocument.form.1ps1.options\Ho41].1alueT
c2.b/ColorPdocument.form1.ps1.options \Ho41] .1alueT
R else
Q
document.te0t2.t2.1aluePdocument.form1.ps1.options\document.form1.ps1.selectedinde0
Z4].1alueT
c2.b/ColorPdocument.form1.ps1.options\document.form1.ps1.selectedinde0414].1alueTR
1ar i Pdocument.form1.ps1.selectedinde0Z8T
1ar H Pi411T
if8iM119
Qdocument.te0t.t.1aluePdocument.form1.ps1.options\H41].1alueT
c.b/ColorPdocument.form1.ps1.options\H41].1alueT
R else
Q
document.te0t.t.1aluePdocument.form1.ps1.options\document.form1.ps1.selectedinde0
Z8].
1alueT
c.b/ColorPdocument.form1.ps1.options\document.form1.ps1.selectedinde0Z8].1alueT
R
R
KOscriptM
44
KO,eadM
KbodHM
KcenterM
K,1M2electare culori prin metoda triadeiLKO,1M
Ktable border P-(-M
KtrM
Ktd idP-c1-MUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspT
UnbspTUnbspTUnbspTKOtdM
Ktd idP-c2-MUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspT
Ktd idP-c-MUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspTUnbspT
KOtrM
KtrM
KtdMKform nameP-te0t1-MKinput tHpeP-te0t- si$eP-12-nameP-t1-MKOformMKOtdM
KtdMK form nameP-te0t2-MKinput tHpe P-te0t-si$eP-12-nameP-t2-MKOformMKOtdM
KOtdM
KtdM Kform nameP-te0t-M Kinput tHpe P-te0t-si$eP-12-nameP-tM KOformM
KOtdM
K OtrM
K O tableM
K form name P-form1-M
KbM2electati o culoareLK ObMUnbspTUnbspTUnbspTUnbspTKselect nameP-ps1-M
Koption
stHleP-bacA/toundcolor:S>>>>##-1alueP-S>>>>##-MUnbspTUnbspTUnbspTUnbspT
K OoptionM
Koption stHleP-bacA/round4
colour:S>>75((-1alueP-S>>75((-MUnbspTUnbspTUnbspTUnbspT
KOoptionM
Koption stHleP-bac/round4color:S>>:"((-1alue4
*>>:"((-MUnbspTUnbspTUnbspTUnbspT
KOoptionM
color:S>>4"((-1alueP->>4"((-MUnbspTUnbspTUnbspTUnbspT
KOoptionM
Koption stHleP-bacA/round4color:S>>((((-1alueP-MUnbspTUnbspTUnbspTUnbspT
KOoptionM
color:SC51"8"-1alueP-C51"8"-MUnbspTUnbspTUnbspTUnbspT
KOoptionM
color:S8(((8(-1alueP-S8(((8(-MUnbspTUnbspTUnbspTUnbspT
KO optionM
color:S==82==-1alueP-S==82==-MUnbspTUnbspTUnbspTUnbspT
KOoptionM
4"
color:S((((>>-1alue-((((>>-MUnbspTUnbsoTUnbspTUnbspT
KOoptiuoM
K option stHleP-bacA/round4color:S((@>>>-1alueP-((@>>>-
UnbspTUnbspTUnbspTUnbspT
KOoptionM
color:S((8(((-1alueP-S((8(((-MUnbspTUnbspTUnbspTUnbspT
KOoptionM
color:S((>>((-1alueP-((>>((-MUnbspTUnbspTUnbspTUnbspT
KOoptionM
KOselectMUnbspTUnbspTUnbspTUnbspT
Kinput tHpP-button-classP-b1-1alueP-&riada culorilorL-oncliAP-sc,imba 18 9-M
KO formM
Kim/2RCP-triada 1./if-,ei/,tP12( +idt,P12(M
KOcenterM
KObodHM
KO,tmOM
)tili$area unei sc,eme de culori corecte poate a1ea ca efect cresterea numarului de
1i$itatori ai pa/inilor <eb create.
2c,emele de culori pot fi utili$ate si in cadrul editoarelor /rafice 8de ima/ini9
pentru reali$area meniurilor de na1i/are8 a ima/inilor care constituie aceste
meniuri9.7e ase menea o sc,ema de culori nu trebuie pri1ita doar ca o combinatie de
culori simple 8fundal /alben si te0t albastruC.92c,ema de culori poate fi utili$ata pentru a
armoni$a culorile din cadrul unei ima/ini 8folosita ca si componenta a unui meniu de na1i/are
sau simplu; introdusa in pa/in<eb prin intermediul marcDului Kim/M9cu cele utili$ate pentru
te0t sau alte elemente %&'L.:tunci cind se foloseste una din metodele de selectie a culorilor
utili$ate pentru sc,ema de culori se 1a tine cont si de ima/inile 8format GI>; NPG; PJG9 care
urmea$a a fi introduse in pa/inile <eb .:stfel spus nu 1om selecta doar culori pentru
fundaluri si te0t fara a lua in considerare culorile utili$ate de ima/ini 8culori cu /rad mare de
acoperire9.
43
2.'. Pa(i+i 8e" di+amice 'i i+teracti,e
:dau/area de scurte pro/rame8script9 permit ca pa/inile %&'L sa de1ine sinamice si
interacti1e .
)n script se defineste cu %&'L util$and marcaDul KscriptM :tributl lan/ua/e specifica ce
limbaD este utili$at pentru scriereascript4ului 8Da1aseript; ; ; bodHYY 8KbodHMCCC KO bodH M9
aunei pa/ini <eb 8pa/ini %&'L 9.
7aca un script este introdus cu sectiunea; ; ,eadYY atunci sl 1a fi e0ecutat doar atunci
sand 1a fi apelat 8ca urmarea unei actiun a utili$atorului: clicA pe un buton; CC..9.
7aca un script este introdus cu sectiunea; ; bodHYY atunci el 1a fi e0ecutat atunci
cand1a fi incarcata 8afisata9 sectiunea; ; bodHYY 8continutul pa/inii <eb9.:ltfel spus acest
script /enerea$a continutul pa/inii %&'L.
45
=0emplul de mai Dos 1a afisa o fereastra de a1erti$are in care 1om putea e0ecuta un clicA
pe butonul*#W-.7upa e0ecutarea unui clicA pe butonul*#W- 1a fi afisat un mesaD in fereastra
na1i/atorului:
K,tmlM
K,eadM
KtitleMPa/ini dinamice si interacti1e 1KOtitleM
KO,eadM
KbodHM
Kscript lan/ua/eP*Da1a2cript-M
document.+rite8*K,1M=0emplul nr.1KO,1M-9T
alert8*ClicA pe butonul #WL-9T
document.+rite8*K,2M24a e0ecutat un clicA pe #WLKO,2M-9T
KOscriptM
KObodHM
KO,tmlM
Linia document . +rite8YYK,1M =0emplu nr .1 KO,1M9:1a a1ea ca efect afisarea te0tului
=0emplu nr .1 in fereastra na1i/atorului folosind marcaDul K,1M.
Linia alert8*clicA pe butonul #WL-9:1a a1ea ca efect desc,iderea unei ferestre de
alertare 8a1erti$are9.
Linia document. <rite 8YYK,2M 24a e0ecutat un clicA pe #WL KO,2MYY9T1a a1ea ca efect
afisarea te0tului 24a e0ecutat un clicA pe #WL In fereastra na1i/atorului8folosind
marcaDulK,2M9 dupa e0ecutarea unui clicA pe butonul; ; #WYY .
Ine0emplu urmatorul 1om introduce un scriptin sectiunea; ; ,eadYY 8K,eadMCC
KO,eadM9a unei pa/ini %&'L. Codul sursa al acestui e0emplu este oferit in continuare:
K,tmlM
K,eadM
KtitleMPa/inidinamice siinteracti1e 2KO titleM
K2cript lan/ua/e PYYDa1a scriptYYM functian introdu89
Q1ar nume Pprampt 8YYintroduceti numele d1s:-; - 9T R
K OscriptM
KO ,eadM
KbodHM
Kfor .name PYY form (1YYM
KdM Jumele :KObM Kinput tHpt PYY te0t YY P YYnumele YY M
K,rM
KO,rM
KcenterM
Kinput tHpePYYbutton YY 1aiue PYYJumeleL- an8licA P- introdu O9- M
KOcenterM
KOformM
KO bodHM
KO,tmlM

=0emplu contine un script introdus in sectiunet; ; ,eadYY8deci 1a fi e0ecutat numai daca
1a fi apelat 9 prin intermediuluiunei functi 8fuction introdu 899
48
>unctia introdu 89 ne 1a cere 8prompt899sa introducem numele nastru si 1a atrebui acest
nume 1aria bilei nume .continutului acestei 1ariabile 1a fi atrebuit marcaDiului
KimputM8cimpului te0t9 din formularul pentru a putea stabili cu numele form (1.
2e obser1a ca am utili$at atributul name al elementelor din formular pentru a putea
stabili cui i se 1a atribui 1aloarea 1ariabilei; ; numele YY .
Prin intermediul marcaDuluiKinput tHpe PYYbutton YY 1aluePYYJumeleLYYon ClicA
PYYintrodu 89YYM; marcaD care permite introducerea unui buton in formular; 1om apela functia
introdu898 on ClicA PYYintrodu 89YY9.7aca e0ecutam un clicA pe butonul; ; JumeleL Eafi a
apelat functia introdu 89; ceea ce 1a a1ea ca efect e0ecutarea script4ului din sectiunea; ;
,eadYY .
)tili$area unorpro/rame8script9 poate faceca pa/inile<eb creiate sa aiba un impactmai
mare asupra audientei . 7e asemenea utili$area unorastfel de scurte pro/rame reali$ea$a o
interactiune intre utili$ator si pa/ina; astfel pa/ina sau site4ul de1enind mult mai atracti1e si
utile.
(%P)*$LL 3
$P*)+),%R-% ($.*).*L) /L%01
=ste foarte important sa a1em in 1edere cum or/ani$am documentele >las, atunci cand
folosim foarte mult continut.Incarcarea atator fisiere 2<>; NP=G; >LE 1ideo si 'P intr4un
fisier 2<> de ba$a pe cat posibil la cerere permite minimi$area 1olumului de informatie pe
care utili$atorul trebuie sa il incarce simultan.:ceasta mai inseamna si ca 1i$itatorii site4ului
nu trebuie sa descarce foarte mult continut din site4ul &ec, @ooAstore pe care nici nu doresc
sa4l 1ada.7aca fiecare 1i$itator ar trebui sa descarce turul de pre$entare de fiecare data cand
intra in site4ul de <eb; este putin probabil ca ar mai 1i$ita din nou site4ul respecti1 L:celasi
lucru este 1alabil pentru site4urile pe care le 1om crea sin/uri.#r/ani$area si respectul fata de
1i$itatorii site4ului repre$inta un aspect foarte important in ca$ul in care cream un site pe ba$a
unui sin/ur fisier >L:.
4!
:ceasta 1a arata de ce site4ul &ec, @ooAstore a fost creat in acest mod si in plus 1om
inc,eia incarcarea cator1a dintre ultimile pa/ini in site4ul principal.@arele de e1olutie arata
starea fisierelor care sunt incarcate in site4ul &ec, @ooAstore.7e asemenea 1om introduce bara
de e1olutie in unele fisiere pe care le incarcam si apoi 1om crea una personali$ata pentru
incarcarea fisierului >L: principal al site4ului &ec, @ooAstore.2e 1a depana aplicatia si se 1a
1erifica daca totul functionea$a corect inainte de a trece la publicarea site4ului <eb si plasarea
lui pe internet.
-.1.Optimizarea docume+teor 9a'%
In ca$ul in care construim un intre/ site de <eb folosind >las, sau doar un element
comple0 pentru un site %&'L in >las, marimea fisierului poate de1eni foarte repede un moti1
de in/iDorare.:tunci cand se importa ima/ini bitmap cu foarte mult te0t; 1ideo; componente
sau sunet; 1olumul de date cu care se lucrea$a poate creste rapid; iar daca se introduc ima/ini
sau sunete; trebuie sa ne /andim cum 1om or/ani$a documentele >las,.
>elul in care construim libraria este simplu; el ia in calcul cate1a dintre cele mai simple
metode prin care se poate sa optimi$am un fisier >L: in <eb; prin incarcarea elementelor in
timpul e0ecutiei; introducerea barelor de e1olutie spre informarea 1i$itatorilor si impartirea
continutului in fisiere 2<> mai mici in locul introducerii intre/ului material intr4un sin/ur
document foarte mare.
-.).Le(atura di+tre proce'oare 'i :i'ieree S89
>isierele 2<> sunt tratate in mod diferit de sistemele de calcul.In primul rand; sistemul
de operare poate trata un fisier 2<> in modul sau propriu; dar si bro+serele se pot deosebi in
felul in care redau un fisier 2<>.In maDoritatea ca$urilor; indiferent de platforma sau de
bro+ser; fisierul 2<> 1a fi redat in acelasi mod pentru toti cei care afisea$a
documentul.7eosebirile sunt infinite$imal de mici in comparatie cu ce1a de /enul unei pa/ini
%&'L cu foi de stil; Da1a2cript si asa mai departe.=0ista insa mici inconsec1ente pe care este
bine sa le cunoastem.In primul rand; un 'ac 1a reda fisierul 2<> ce1a mai lent decat un
sistem de calcul cu <indo+s.
:cest lucru este le/at de sistemul de operare si de >las, PlaHer Ttotusi aceasta
problema a fost mult redusa in 1ersiunea >las, PlaHer 5; astfel incat deosebirile sunt destul de
neimportante in ca$ul in care 1i$itatorii au instalata aceasta 1ersiune de PlaHer.
'ac4ul si PC4urile tratea$a culorile in mod diferit.)n sistem de calcul cu <indo+s 1a
afisa culorile mai inc,ise decat 'ac.:ceasta nu are nimic de4a face cu fisierul 2<> propriu
$is; este ce1a le/at de deosebirile de corectie /amma intre sisteme.:ceasta problema apare
indiferent de ce 2oft+are se foloseste ca sa se cre$e site4ul de <eb.)neori putem sa creem mai
rapid o animatie cu aDutorul limbaDului :ction2cript decat sa folosim procedura /reoaie cu
cadre interimare de miscare si animarea clipurilor 1ideo.Cu aDutorul limbaDului :ction2cript
putem uneori8insa nu intotdeauna9 sa micsoram marimea fisierului si 1olumul de munca
atunci cand trebuie sa animam ce1a dar codul poate mari /radul de solicitare de catre fisierul
2<> a redarii.Ei$itele diferite ale procesoarelor pot si ele sa afecte$e redarea unui fisier
2<>.Procesoarele mai 1ec,i ar putea sa redea fisierul 2<> cu o 1ite$a de melc in comparatie
"(
cu un procesor rapid; modern.Cel mai bun lucru pe care il putem face este sa testam fisierul
2<> pe mai multe calculatoare si sa 1edem cum 1a fi redat 2<>4ul pe fiecare sistem.
)nele calculatoare mai 1ec,i 1or a1ea dificultati in a reda un fisier 2<> indiferent daca
se 1a folosi cod :ction2cript sau t+eenin/ pentru crearea animatiilor.)n element cu trecere
sau cu miscare poate fi redat foarte lent si fra/mentat in aceste sisteme.
In ca$ul in care e0ista un fisier 2<> care apelea$a continuu functii sau e0ecuta cod in
fiecare cadru8de e0emplu; daca folosim o rutina de e1eniment #n=nter>rame ca sa 1erificam
ce1a sau sa e0ecutam un cod de fiecare data cand este redat un cadru9; redarea fisierului 2<>
ar putea sa fie incetinita foarte mult.7aca e0ista un 2<> definit pe 21fps; codul 1a fi e0ecutat
de 21ori pe secunda.2i in acest ca$; este recomandabil sa se stear/a rutina de tratare a
e1enimentelor atunci cand nu este absolut necesara si sa ru/ati prietenii sa teste$e fisierul in
sisteme de calcul diferite.
-.-.Le(atura di+tre atimea de "a+da 'i marimea :i'iereor
Latimea de banda se refera la cantitatea de informatie care este transferata intre
calculatoarele client si un ser1er de <eb.7e e0emplu; un site de <eb foarte a/lomerat pote
folosi " /i/aocteti de latime de banda pe luna.7e fiecare data cand 1i$itatorii aDun/ in site4ul
nostru de <eb; 1a fi consumat de latimea de banda atunci cand 1or descarca pa/ini si
elemente media din acesta.In functie de numarul de 1i$itatori pe care ii a1em si de cat de mare
este site4ul de <eb; in timp latimea de banda 1a creste rapid la un site cu ce1a trafic.=ste
indicat sa incercam sa minimali$am cantitatea de informatie pe care 1i$itatorii o descarca din
fiecare pa/inaLLimitarea consumului de latime de banda influentea$a felul in care construim
fisierul >L: in diferite moduri; care 1or fi discutate in sectiunile urmatoare.=ste bine ca
1i$itatorii sa descarce numai informatia de care au ne1oie si sa reduca informatia
suplimentara; care poate nici nu4i interesea$a.
Primul lucru pe care il putem face sa minimi$am latimea de banda este sa parcur/em
toate desenele 1ectoriale; ima/inile bitmap si fisierele audio si sa se 1erifice setarile lor
pentru publicare pentru atunci cand este /enerat fisierul 2<>.Pentru desenele 1ectoriale
putem sa selectam 'odifH M2,apeM#ptimi$e ca sa optimi$ati desenul 1ectorial.In acest fel
putem sa reducem8sau sa finisam9 1ectorii din forma.7aca e0ista foarte multe mar/ini
neuniforme; optimi$area formei reduce numarul de calcule necesare pro/ramului >las, pentru
afisarea desenului.:ceasta reduce si marimea fisierului si imbunatateste c,iar performantele
fisierului 2<>.
Putem sa e0ecutam clicA cu butonul din dreapta8control4clicA9 pe 1aloare si sa selectati
Properties pentru alte 1alori mediatice din LibrarH8cum ar fi sunetul si ima/inile9.Putem sa
modificam proprietatile si in caseta de dialo/ Publis, 2ettin/s.2e 1a folosi componenta
@and+idt, Profiler din >las, ca sa anali$am si sa incercam minimi$area marimii fisierului si
sa /estionam modul in care 1a fi descarcat fisierul 2<> de catre 1i$itatori.
-.;.Or(a+izarea apicatiior 'i uza+tee recoma+date
=0ista foarte multe tipuri de site4uri de <eb din punct de 1edere al modului in care este
aranData informatia.)nii ar putea sa construiasca un site >las, in care toata informatia care este
"1
descarcta de utili$ator cand intra in site4ul respecti1 este inclusa intr4un unic fisier de mari
dimensiuni.
Intre/ul fisier >L: si tot ce este asociat cu el8inclusi1 ima/inile NP=G; sunetul si asa mai
departe9 sunt incluse intr4un 2<> care este descarcat pro/resi1 de la inceput pana la
sfarsit.7upa aceea 1i$itatorii pot trece prin clicA prin toate pa/inile; indiferent daca
utili$atorul parcur/e sau nu intre/ul continut; aceasta nu influentea$a cata informatie 1a trebui
sa descarce.Ei$itatorul descarca intre/ site4ul de <eb; indiferent de ceea ce doreste sa 1ada.
In loc sa creem un fisier >L: care sa contina tot materialul site4ului intr4un unic fisier de mari
dimensiuni; trebuie sa creem un site care sa incarce dinamic maDoritatea continutului in
timpul e0ecutiei8atunci cand este redat fisierul 2<> in >las, PlaHer9.:ceasta este modul de
operare folosit in /eneral in site4ul &ec, @ooAstore.=0ista metode prin care putem sa obtinem
o aplicatie dinamica; de pilda le/and4o de o ba$a de date sau folosind intensi1 ^'L; >las,
Remotin/ sau <eb ser1ices; sau putem sa incarcam numai NP=G4uri; 'P4uri; te0t si alte
fisiere 2<> in document.&oate aceste metode implica lucrul cu continut dinamic si
imbunatatirea modului de operare al documentelor >las,.
7e asemenea trebuie a1ut in 1edere utili$abilitatea fisierului >las,; precum si cat este de
usoara deplasarea prin site pentru 1i$itatori.'arimea fontului te0tului este suficienta ca sa
permita citireaX>ontul este li$ibilX=ste necesar ca 1i$itatorul sa aiba instalat fontul sau il 1om
in/lobaX@utoanele sunt suficient de mari; de 1i$ibile si usor de interpretat ca butoaneX=ste
usoara na1i/area in site printre diferitele sale sectiuniX)neori putem sa creem un site *artistic-
in care 1rem in mod e0pres ca 1i$itatorul sa nu stie c,iar de la inceput cum sa se
deplase$e.Ja1i/area incalcita poate fi perfect Dustificata in anumite situatii; dar trebuie sa
stabilim in prealabil care este auditorul 1i$at si ce se poate astepta sa /aseasca in site4ul
notru.In ca$ul in care creem o aplicatie cu cos de cumparaturi pentru o societate care doreste
sa4si 1anda produsele; n4ar fi indicat sa plasam trei semneZ mititele in coltul din dreapta4Dos
al 2cenei ca principale instrumente de na1i/areL:ceasta solutie este perfecta pentru un site
>las, e0perimental; dar este inutili$abila pentru o aplicatie comerciala serioasa.
In site4urile de <eb mai 1ec,i; care folosesc >las,; unele foloseau niste
introduceri8sAip intro9 a caror redare incepe atunci cand se intra in site4ul respecti1.# mare
parte dintre aceste introduceri includeau o multime de te0te 1olante; ima/ini cu cadre
intermediare si mu$ica de fundal.# problema importanta le/ata de introduceri era cat de
comune si de ener1ante erau si cum au intinat pentru un timp numele de >las,.Insa o alta
problema importanta referitoare la introduceri era ca multe ii fortau pe 1i$itatori sa urmareasca
o lun/a introducere fara posibilitatea de a o sari 8butonul sAip intro9.In ca$ul in care trebuie sa
includem o introducere >las,; trebuie sa nu uitam sa includem un buton sAip intro sau o
le/atura in portiunea %&'L a site4ului de <eb.La/atura conduce imediat utili$atorul in partea
principala a site4ului de <eb si opreste descarcarea introducerii si consumului din latimea de
banda.
Ceea ce trebuie retinut din ideea butonului sAip intro este sa nu se uite niciodata sa se
asi/ure 1i$itatorului miDloacele de comanda.In ca$ul in care 1i$itatorii nu 1or sa descarce
ce1a; trebuie sa le sa o opreasca si sa treaca mai departe.7aca nu 1or sa asculte mu$ica;
trebuie sa aiba posibilitatea sa o opreasca.2i nu este niciodata recomandabil sa preluam
controlul asupra calculatorului 1i$itatorului prin trecerea site4ului in modul pe tot ecranulL2a
incarcam dinamic continutul de banda foarte lar/a ori de cate ori este posibil; asi/urand
1i$itatorului controlul asupra deci$iei de descarcare a informatiei; in primul si in ultimul rand.
"2

-.5.I+carcarea de co+ti+ut +ou
In ca$ul in care s4a creat foarte mult din continutul care 1a fi incarcat in site4ul &ec,
@ooAstore; acesta reduce 1olumul de informatie pe care trebuie sa4l sal1am in site4ul de <eb
principal; mai ales o parte din componentele care pot creste rapid marimea fisierului 2<> asa
ca sa introducem si restul de continut in site4ul &ec, @ooAstore.
1.7esc,idem booAstore 1.fla. daca nu este deDa desc,is si sal1am o noua 1aersiune a
fisierului selectand >ileM2a1e :s.2al1am noul document sub denumirea de booAstore 14.fla.
&rebuie a1ut /riDa ca acest fisier sa fie sal1at in dosarul &ec, @ooAstore de pe ,ard4discul
calculatorului.In ca$ul in care se foloseste >las, '0 Professional atunci se 1a folosi booAstore
14_pro.fla.
:tunci cand se plasea$a continutul din acest e0ercitiu pe 2cena; trebuie a1ut /riDa sa
se lase suficient spatiu pentru derularea meniurilor.2e 1a tra/e o linie de /,idare ori$ontala la
circa 14( de pi0eli pe ri/la 1erticala.2e 1a plasa tot continutul nou sub aceasta linie de
/,idare.
2.Introducem o instanta a companiei Loader in stratul ,ome.Redimensionam instanta
componentei la "8( pe 4" si 6i atribuim un nume de instanta. :ceasta instanta Loader este
pentru incarcarea continutului pentru pa/ina %ome.2e 1a e0tinde panoul Components si se 1a
tra/e o instanta a companiei Loader pe cadrul 1 din stratul ,ome; care se /aseste in dosarul
pa/er.:tribuim componentei numele de instanta ,ome_1 dr si o po$itionam in partea stan/a a
2cenei; sub bara de na1i/are.
"
2e poate redimensiona componenta la dimensiunea documentului ,ome.s+f8care este de
"8( latime si 4" inaltime9; fie se 1a lasa componenta la dimensiunea standard si se 1a lasa
>las,4ul sa redimensione$e instanta atunci cand se incarca continutul.:desea; este mai usor sa
se redimensione$e componenta manual; deoarece astfel se poate 1edea locul in care 1a fi
incarcat continutul in raport cu alte instante de scena.
7aca se 1a decide sa nu se redimensione$e respecti1a componenta se 1a plasa
coltul din stan/a4sus al componentei Loader acolo unde se doreste sa fie plasat coltul din
stan/a4sus al fisierului 2<> incarcat.7e asemenea se 1a 1erifica daca 2caleContent este
definit prin 1aloarea false.7aca este definit prin 1aloarea true; continutul 1a fi redimensionat;
iar acest lucru poate determina deformarea lui.&e0tul poate a1ea un aspect /roa$nic daca este
marit.
7eclaram parametrul contentPat, pentru componenta Loader prin ,ome.s+f in
inspectorul de proprietati sau in panoul Component inspector.:cesta este )RL4ul continutului
pe care 1a trebui sa4l incarcam in respecti1a componenta.
=0ista trei proprietati pe care le putem modifica pentru componenta Loader folosind
inspectorul de proprietati:
autoLoad : 2tabileste daca materialul 1a fi incarcat in mod automat atunci cand este
incarcat cadrul8true9.In ca$ contrar trebuie apelat in mod e0plicit functia load 8false9.
contentPat, : )RL4ul indicand spre continutul care trebuie incarcat.:cest camp accepta
atat )RL4uri relati1e; cat si )RL4uri absolute.
scaleContent : 1aloarea bedeana8true sau false9 care determina cand trebuie sa se
redimensione$e componenta Loader pentru a se adapta la continutul care este incarcat8false9
"4
sau daca materialul trebuie marit pentru a se adapta la dimensiunea componentei Loader
e0istente 8true9.
Pentru fiecare sectiune din site4ul <eb trebuie sa se aiba /riDa ca autoLoad sa fie definita
prin 1aloarea false.
.Inseram un nou strat numit catalo/.Introducem o instanta a componentei Loader in
pa/ina Catalo/.Redimensionam instanta; declaram contentPat, si o po$itionam pe 2cena.
Inseram un nou strat imediat sub stratul ,ome.Redenumim noul strat catalo/.Inseram
un nou cadru4c,eie in cadrul 1( si ster/em toate cadrele din stratul respecti1 dupa cadrul 1!;
e1identiindu4le cu mouse4ul; e0ecutand clicA cu butonul din dreapta si selectand Remo1e
>rames din meniul conte0tual.
2e 1a e0ecuta clicA pe cadrul 1( din stratul catalo/ din tabela temporala si se 1a tra/e
o instanta a componentei Loader pe 2cena.2e 1a atribui componentei numele de instanta
catalo/_ldr.2e 1a e0tinde inspectorul de proprietati si se 1a declara parametrul contentPat,
prin catalo/ul s+f; iar apoi se 1a defini proprietatea scaleContent prin 1aloarea
false.Redimensionam componeta astfel incat sa fie apro0imati1 in centrul $onei principale de
continut.

""
4.Inseram un nou strat numit re1ie+s.Introducem o instanta Loader in pa/ina Re1ie+s ca
sa incarcam
re1ie+s.s+f.ReRedimensionam si po$itionam componenta; apoi sc,imbam
parametrii.Inseram un nou strat imediat sub stratul catalo/.:poi inseram un nou cadru4c,eie
in cadrul 2( al stratului; apasand >3 si ster/and toate cadrele de dupa cadrul ( din stratul
respecti1.=1identiam cadrele cu cursorul; e0ecutam clicA cu butonul din dreapta si
selectionam Remo1e >rames din meniul conte0tual.
=0ecutam clicA pe cadrul 2( din stratul re1ie+s si tra/em o instanta a componentei
Loader pe scena.In inspectorul de proprietati; declaram numele instantei re1ie+s_1dr si
declaram proprietatea contentPat, prin re1ie+s.s+f.:poi definim proprietatea scaleContent
prin 1aloarea false.
Redimensionam componenta la 52( pe 3( si o po$itionam in centrul 2cenei.
".Inseram un nou strat numit ne+s si introducem o instanta Loader pe
2cena.:tribuim instantei un nume de instanta si apoi o redimensionam si o po$itionam pe
2cena.
Inseram un nou strat si il redenuminm nne+s si a1em /riDa sa fie plasat imediat sub
stratul tour.=0ecutam clicA pe cadrul 4( al stratului ne+s si introducem o componenta Loader
astfel incat sa fie de 3" latime pe 4" inaltime si o plasam in centrul ori$ontal al pa/ini
Je+s.
3.:tribuim instantei Loader e0istente deDa in stratul map un nou nume de instanta; iar
componentei Loader din pa/ina &our un alt nume de instanta.:poi 1erificam ca a fost desenata
o masca peste instanta Loader din pa/ina 'ap. Pa/ina 'ap are deDa o componenta Loader pe
2cena.=0ecutam clicA pe instanta map_1dr si declaram proprietatea scaleContent prin
1aloarea false.Procedam in acelasi fel si pentru componenta Loader din pa/ina &our.2electam
instanta si scriem numele de instanta tour_1dr. )rmatorul lucru pe care trebuie sa4l facem este
sa creem o masca peste instant Loader.'asca este necesara pentru ca am animat masina in
fisierul 2<>.'asca sa se deplase$e dincolo de mar/inile ,artii.:tunci cand ,arta este
incarcata in librarie; masina 1a aparea dincolo de 2cena propriu4$isa dupa ce este incarcata.
Pentru a re$ol1a aceasta problema putem sa creem un strat de masacre pentru a ascunde
masina arunci cand este in afara ,artii.Creem un nou strat peste stratul map si inseram un
cadru4c,eie direct peste cadrul4c,eie din stratul map.Con1ertim noul strat intr4un strat 'asA;
e0ecutand clicA cu butonul din dreapta pe stratul din tabela temporala si selectand 'asA din
meniul conte0tual.Redenumim acest nou strat map.masA.7esenam un patrat in stratul
map.masA care acopera instanta Loader a ,artii.Poate fi ne1oie sa desenam straturi de /,idare
ca sa aratam unde sunt mar/inile instantei map astfel incat sa putem /enera o masca a1and
aceleasi dimensiuni si in aceasi po$itie pe 2cena.
7e asemenea; trebuie sa desenam patrate in stratul masA peste toate locurile in care
apare te0t in srtatul map; astfel incat acesta sa fie 1i$ibil atunci cand 1a fi publicat 2<>4ul.#
alta solutie ar fi sa creem un nou strat peste te0t care nu este mascat si astfel 1a fi afisat si
el.:tunci cand se termina trebuie sa blocam ambele straturi8map si map masA9.
5.Introducem ima/inile sau te0tul dorit in site4ul &ec, @ooAstore.Inainte de a inc,eia;
poate fi ne1oie sa introducem ce1a te0t statie in cate1a pa/ini separate.Poate consideram ca
trebuie sa oferim indicatii cu pri1ire la ce trebuie actionat prin clicA sau ce trebuie facut pentru
a asi/ura functionarea site4ului.
"3
8.Curatam LibrarH.:poi testam si sal1am modificarile pe care le4am operat in fisierul
>L:.'utam toate noile ima/ini sau simboluri pe care le4am creat si noile componente in
dosarele corespun$atoare din LibrarH.
In aceasta fa$a putem sa testam intrea/a aplicatie &ec, @ooAstore.:pasam Ctrl =nter sau
CommandZ=nter ca sa testam fisierul 2<> in mediul de testare sau intr4o fereastra de bro+ser
de <eb; apasand tasta >12.>iecare sectiune trebuie sa aiba un continut care sa fie incarcat
atunci cand se e0ecuta clicA pe unul din butoanele de meniu pentru na1i/area la fiecare
pa/ina.

7aca unul din fisierele 2<> nu este incarcat; trebuie sa a1em /riDa sa fie sal1at in
directorul &=c, @ooAstore si numele fisierului 2<> sa fie scris corect8fara /reseli de
orto/rafie9 in inspectorul de proprietati pentru instanta Loader respecti1a.
-.7.I+troducerea compo+e+tei Pro(re''"ar
@arele de e1olutie sunt o parte importanta multor documente >las, mai mari; mai ales a
celor care folosesc ima/ine si sunet sau a site4urilor create inte/ral cu aDutorul pro/ramului
>las,.In acest ca$; trebuie sa lucram cu toate aceste lucruriL:tunci cand incarcam continutul;
este esential sa se afise$e indicatii pe ecran care sa arate ca incarcarea este in desfasurare.24ar
putea sa a1em 1i$itatori care folosesc le/aturi prin modem si linie telefonica pentru a 1edea
site4ul de <eb; sau poate a1em un fisier 1ideo foarte mare pe care pana si 1i$itatorii cu
le/aturile cu latimea de banda cea mai mare sa fie ne1oiti sa astepte pentru a le putea 1edea.In
astfel de situatii; bara de e1olutie informea$a 1i$itatorul ca materialul este in curs de
incarcare.7aca nu se foloseste o bara de e1olutie sau preincarcarea continutului; utili$atorul
ar putea crede ca s4a intamplat ce1a cu site4ul; pentru ca 1or 1edea ca nu se intampla nimic. #
"5
indicatie 1i$uala este destul de importanta pentru a4i informa ca trebuie sa astepte putin pana
se incarca fisierul 2<>.7upa ce adau/am componentele Loader in booAstore 14.fla; putem
introduce cate1a bare de e1olutie pentru a indica 1i$itatorilor ca se incarca ce1a in aplictie.7e
asemenea; trebuie sa introducem o bara de e1olutie pentru intrea/a aplicatie.
197esc,idem booAstore 14.fla din dosarul &ec, @ooAstore de pe ,ardiscul
calculatorului.
292electam cadrul 1 din stratul ,ome.=0tindem panoul Components si tra/em o
instanta a componentei Pro/ress@ar pe 2cena.Po$itionam bara de e1olutie pe centrul
componentei Loader si atribuim numele de instanta ,ome_pb.In inspectorul de proprietati;
declaram modulul palled si declaram ca sursa numele instantei componentei Loader;
,ome_1dr.7aca ar fi sa tratam fisierul 2<>; bara de e1olutie ar inre/istra pro/rasul in timp ce
continutul este incarct; pana la incarcrea completa.In ca$ul in care continutul pe care il
incarcam are o dimensiune redusa de fisier sau daca incarcam continutul direct de pe ,ard4
disc; contorul ar putea e1olua rapid de la ([ la 1(([.
9Introducem obiectul :ction2cript detector de e1enimente.Introducem acest cod in
cadrul1 din stratul actions.:tunci cand continutul este afisat in componenta Loader;
componenta Pro/ress@ar ramane 1i$ibila si ramane la 1(([.Ea trebui sa creem un detector de
e1enimente care asteapta pana cand continutul este incarcat complet; iar apoi ascunde
componenta Pro/ress@ar.
2electam cadrul 1 din stratul action si introducem urmatorul cod :ction2cript sub
codul e0istent in panoul :ction:
Ear pbListener:#bDectPne+ obDect 89 T
pbListener.pro/ressPfunction8e1t9Q
e1t.tar/et._1isiblePtrueT
RT
pbListener.completePfunction8e1t9Q
e1t.tar/et._1isiblePfalseT
RT
:cest :ction2cript creea$a un nou obDect pe care il 1om folosi pentru tratarea
e1enimentelor care sunt /enerate de componenta Pro/ress@ar .=a determina /enerarea a doua
e1enimente :
Pro/ress: :cest e1eniment este declansat in timp ce se incarca un continut.
Complete::cest e1eniment este declansat atunci cand continutul a fost incarcat complet.
Eom folosi aceste e1enimente pentru a comuta 1i$ibilitatea componentei
Pro/ress@ar.:tunci cand fisierul 2<> e0tern este incarcat acti1 in componenta Loader;
componenta profress@ar este 1i$ibila pe 2cena.=a 1a afisa procentul din fisier care a fost
incarcat.:tunci cand este captat e1enimentul complete; continutul a fost incarcat complet si
componenta Pro/ress@ar poate fi ascunsa de pe 2cena; pentru ca in instanta Loader afisea$a
deDa continutul incarcat.
49Creem un detector de e1enimente pentru componenta Pro/ress@ar ,ome_pb pentru a
ascunde instanta Pro/ress@ar.
Ca sa ascundem bara de e1olutie ,ome4pb de pe 2cena atunci cand continutul din
componenta Loader a fost incarcat complet; trebuie sa introducem urmatorul cod :ction2cript
la ba$a stratului actions.Introducem acest cod sub codul :ction42cript pe care l4am introdus in
pasul :
,ome_ pb.add=1entListener8*pro/ress-; pbListener9T
"8
,ome_ pb.add=1entListener8*complete-; pbListener9T
:cest cod :ction2cript introduce doua detectoare de e1eniment in instanta ,ome_pb de
pe 2cena.7upa ce componenta Pro/ress@ar ,ome_pb receptionea$a e1enimentul pro/ress; 1a
e0ecuta functia definita in proprietatea pbListener .pro/ress.
:tunci cand >las, declasea$a e1enimentul complete; rutina de tratare a e1enimentelor
pbListener declara proprietatea 1isibilitH pentru componenta de destinatie8componenta care
/enerea$a e1enimentul; care in acest ca$ este ,ome_pb9 prin 1aloarea false.=1enimentul
ascunde simbolul de pe 2cena. Putem sa inlocuim e1t.tar/et cu ,ome_pb in codul de la pasul
; iar codul ar /enera aceleasi re$ultate.)n de$a1antaD al codarii ,ard8declararea unei sin/ure
1alori fi0e in locul unei 1ariabile care isi poate modifica 1aloarea9 a instantei ,ome_pb in
functie este ca functia nu 1a fi operanta decat cu acea instanta de componenta.7aca am
mentine caracterul dinamic al functiei si am folosi e1t.tar/et; am putea sa refolosim acelasi
obiect detector al componentei Pro/ress@ar in toate instantele Pro/ress@ar din intre/ul >L:.
"9Introducem noi instante Pro/ress@ar in celelalte fisiere 2<> care trebuie incarcate
dinamic in site.:tribuim fiecarei instante noi un nou nume de instanta.Repetam procedura de
introducere a componentelor Pro/ress@ar pe scena pentru instantele componentei Loader care
incarca sectiunile Re1ie+s; Je+s; Catalo/; &our si 'ap.:tribuim fiecarei instante a
componentei Pro/ress@ar un nume de instanta distinct.
&rebuie sa a1em /riDa sa includem fiecare instanta a componentei Pro/ress@ar in stratul
din fiecare pa/ina in care se /asesc aceste instante Loader.7aca selectam un strat care se
intinde pe mai multe pa/ini; instanta Pro/ress@ar 1a fi 1i$ibila in pa/inile in care nu are ce
cauta.
39Introducem un detector de e1enimente in fiecare pa/ina care contine o componenta
Pro/ress@ar.Introducem codul in stratul actions.'odificam numele instantei in cod pentru a
corespunde numelui de instanta a instantei Pro/ress@ar din pa/ina respecti1a.
Ea trebui sa introducem cele doua linii de cod ale detectorului de e1enimente de la
pasul " in fiecare cadru ce contine componenta Pro/ress@ar.>iecare detector poate refolosi
acelasi obiect rutina de e1eniment pbListener definit in cadrul 1 al >l:4ului dar detectorii
trebuie introdusi in acelasi cadru ca si instantele de componente.7e e0emplu; in codul din
cadrul cu etic,eta ne+8adrul 4(9 1a trebui sa introducem urmatorul cod in stratul actions;
presupunand ca si componenta Pro/ress@ar ar a1ea numele de instanta ne+s_ pb:
ne+s_ pb.add=1entListener8*pro/ress-; pbListener9T
ne+s_ pb.add=1entListener8*complete-; pbListener9T
7upa cum am aratat; :ction2cript trebuie introdus in fiecare cadru care are o bara de
e1olutie .=0ista deDa cadre4c,eie cu actiunea stop in fiecare pa/ina.&rebuie sa introducem
acest cod dupa fiecare actiune stop si sa nu uitam sa inlocuim numele de instanta din cod cu
numele de instanta al componentei Pro/ress@ar din pa/ina respecti1a.
"!
-.<.I+carcarea 'ite0uui Tec% Boo='tore
2ite4ul &ec, @ooAstore nu este un fisier mare pentru ca foarte mult din continutul sau
este incarcat in clipuri 1ideo Loader.&otusi; ar dura prea mult ca sa fie incarcat prin modem si
linie telefonica pentru a nu include o bara de e1olutie pentru intre/ul site in ansamblul sau.Ca
atare; 1om crea un fisier 2<> special care sa incarce intre/ul &ec, @ooAstore.:cesta nu este
sin/urul mod de re$ol1are a acestui proces; dar este probabil una dintre cele mai simple
metode si ceea ce este mai important; arata cum reali$ea$a clasa 'o1ieClipLoader incarcarea
continutului e0tern intr4un clip.1ideo.Eom 1edea ca 'o1ieClipLoader este destul de util
pentru acest scop si pentru alte site4uri pe care le 1om crea in 1iitor.
19Creem un nou fisier >L: numit loader.fla si il sal1am in dosarul &ec,
@ooAstore.:cest fisier 1a incarca site4ul &ec, @ooAstore in internet si contine o bara de
e1olutie pe care o 1om crea sin/uri pentru incarcarea librariei cu aDutorul noii clase
'o1ieClipLoader.
Clasa 'o1ieClipLoader poate detecta incarcarea reusita a continutului in clipuri 1ideo;
de pilda ima/ini din fisiere 2<> ca multe dintre fisirele @ooAstore.fla pe care le4am creat.
7eoarece componenta Pro/ress@ar necesita circa (W@ pentru sine; 1om cream un fisier
2<> /ol in timp ce asteapta incarcarea componentei Pro/ress@ar propriu4$ise.
Poate fi ne1oie sa introducem o ima/ine sau o animatie care sa focali$e$e atentia
1i$itatorilor cat timp trebuie sa astepte.=ste insa indicat sa nu creem o animatie prea
comple0a; altfel 1i$itatorul 1a trebui sa astepte si pentru incarcarea acesteia.
29 'odificam 1ite$a >P2 pentru noul >L: la 21 fps si dimensiunile la 58(8latime9 pe
"2(8inaltime9.Redenumim LaHer 1 pro/ress.
:ceste dimensiuni si 1ite$a corespund celor ale siteului &ec, @ooAstore.:ceasta
inseamna ca fisierul 2<> nu 1a fi incetinit dupa ce este incarcat in fisierul looder.s+f.
9Creem un dreptun/,i pe 2cena cu o culoare de umplere la libera
ale/ere.Redimensionam dreptun/,iul la circa 1"( de pe0ali latime si inaltime de circa 1(
pi0eli.
7reptun/,iul are rolul de bara de e1olutie ca si componenta folosita mai de1reme.Putem
sa ale/em alte dimensiuni pentru dreptun/,i; dar incercam sa pastram aceiasi proportie si
forma.
Culoarea de umplere 1a repre$enta bara de e1olutie; propriu4$ia care se mareste pe
masura ce se incarca fisierul 2<>; iar tusa de pe mar/ini 1a contine bara de e1olutie;
pre$ent6nd 1i$itatorilor o repre$entare a 1olumului de date pe care 2<>4ul trebuie sa le
incarce.
492electam culoarea de umplere si o transformam intr4un clip 1ideo.:tribuim acestui clip
numele de instanta bar_mc.:poi selectam tusa; transformam intr4un simbol /rafic si selectam
'odifHM:ran/eM@rin/ to >ront.
2electam culoarea de umplere de pe 2cena si apasam tasta >8 sa o con1ertim intr4un
clip 1ideo.7esc,idem inspectorul de proprietati si scriem ber_mc in campul Kinstance JameM.
:tunci cand transformam culoarea de umplere intr4un clip 1ideo; ea se 1a suprapune
peste tusa care inconDoara clipul 1ideo respecti1.Ca atare trebuie sa selectam intrea/a tusa ca
sa selectam toate se/mentele si apasam tasta >8 ca sa o con1ertim intr4un simbol /rafic.
2electam butonul radio Grap,ic; bote$am simbolul /rafic4/r si e0ecutam clic pe #W.7upa
aceea; cand tusa este simbol si este inca selectata ale/em 'odifHM:rran/eM@rin/ to >ront
3(
.:stfel 1om modifica po$itia simbolului astfel incat sa fie din nou 1i$ibil in fata simbolului
bar4mc.
"9Creem un camp de te0t dinamic pe 2cena si scriem te0tul loadin/.7eclaram pentru te0t
un font blacA; 12 pentru :rial si selectam butonul :lias te0t.7eclaram stilul de aliniere pentru
campul de te0t prin 1aloarea ri/,t si redimensionam campul de ta0t astfel incat sa e0iste un
spatiu premer/ator.:poi po$itionam campul de te0t in apropiere de dreptun/,i si atribuindu4i
numele de instanta pctLoaded _t0t.
&e0tul 1a afisa procentul din fisierul 2<> incrcat si se 1a modifica pe masura ce
procentaDul continutului incarcat se actuali$ea$a; deoarece este definit ca un camp de te0t
dinamic.'odificam stilul de aliniere al campului prin 1aloarea ri/,t astfel incat sa putem
alinia te0tul la dreapta barei de e1olutie; daca dorim.7eoarece ta0tul din partea din stan/a se
modifica si te0tul *loadin/- ramine stationar; campul de te0t arata mai bine cand se incarca
fisierul 2<>.
&rebuie sa introducem cate1a spatii premer/atoare astfel incat ta0tul care este introdus
dinamic in campul de te0t sa aiba putin spatiu pentru a4si modifica dimensiunea te0tului
atunci cand se modifica 1alorile in campul de te0t.
:ceasta inseamna dimensionarea campului de te0t suficient de mare astfel incat sa poat
cuprinde intre/ul te0t pe care il alocam campului de te0t.
=0ecutam dublu clic pe campul de te0t astfel incat sa 1edem un patrat alb in coltul din
dreapta Dos.
=0ecutam clic si tra/em patratul ca sa redimensionam campul de te0t; apoi introducem
numele de instanta pcZLoaded _t0t cu aDutorul inspectorului de proprietati pentru a4i atribui
acestuia o 1aloare de te0t folosind cod :ction2cript.
392electam dreptun/,iul si campul de te0t; iar apoi transformam intr4un nou clip 1ideo
apasnd >8.Le 1om atribui numele de instanta loader_mc.
2electam ambele instante apasand tasta s,ift in timp ce a0ecutam clic pe fiecare.:poi
apasam >8 si selectam butonul radio 'o1ie clip.2criem loader_mc ca nume al simbolului
pentru noul clip 1ideo si e0ecutam clic pe #W.:poi selectam instanta de pe 2cena si
desc,idem inspectorul de proprietati .2criem loader_mc in inspectorul de proprietati ca nume
de instanta al clipului 1ideo.
59Inseram un nou strat deasupra stratului pro/ress si redenumindu4l actions.2criem acest
cod :ction2cript in cadru l.
2electam cadrul 1 al stratului actions si desc,idem panoul :ctions.2criem urmatorul
cod in panoul 2crip.# descriere a acestui cod :ction2cript il /asim dupa listin/ul codului.
1ar mHloader _mc:'o1ieClipLoader Pne+ 'o1ieClipLoader 8 9T
1ar_mclListener:obDectPne+ 8 9T
4 mclListener.onLoadPro/ressPfunction8tar/et4mc:'o1ieClip9
Q
1ar pro/:obDectPmHLoader_mcl./etPro/ress8tar/et_mc9T
1ar pctlooded: Jumber P 'at,. round 8pro/ .bHteslooded O pro/ . mHtes&otal 9 I1((9: bar
_mc ^2 cale P pctLoaded TpctLoaded _ t0t . te0t P pctLoaded ZYY[ 1(( ded; ; :
R
mHLoader _mcf. addListener 8mclListener 9 :
mHLoader_mcl . laoadiClip 8*boaWstore14. 2<fYYMo9T
Clasa 'o1ieClipLoaded este folosita pentru ca determina e1olutia si starea fisierelor
incarcate intr4un clip 1ideo. =ste creata o noua instanta a obiectului 'o1ieClip Loader si un
31
nou obiect detector care sa urmareasca e1enimentele /enerate de 'oieClipLoader. Introducem
un nou dectector pentru obiectul _mclListener; folosind metoda addListenerM iar apoi
incarcam fisierul 2<> folosind metoda loadClip. 'etoda loadClip functionea$a in felul
urmator:
'o1ieClip Loader . loadClip 8*url -; clip 9T
Calea )RL8fie relati1a; fie absolut 9 este pentru fisierul pe care il incarcam; iar clip este
instanta a clipului 1ideo 8instanta Loader sau ni1el 9; in care incarcam fisierul. :ceasta
metoda functionea$a in acelasi mod ca si metoda 'o1ie Clip . load'o1ie.
7etectorul an Load Pro/ress este in1ocat atunci cand se descarca un continut nou in
calculator 1i$itatorului; asa ca este folosit pentru a pre$enta e1olutia procesului de descarcare
si facilita utili$area simbolului dar _mc pentru afisarea e1olutiei.Clasa 'o1ieClipLoader are o
metoda /etPro/ress care accepta un parametru care este clipul 1ideo de destinatie in care
incarcam fisierul 2<>. =a returnea$a un obiect care se numeste pro/. pro/ are doua
proprietati numite bHtesLoadedsibHtes&otal. 7upa aceea rotunDim 1aloarea si o inmultim cu
1(( pentru a obtine procentaDul care a fost incarcat din clip.ProcentaDul din clip care a fost
incarcat este sal1at intr4o 1ariabila numita pctLoaded.
'arim clipul 1ideo bar_mc folosind proprietatea 'o1iClip_^2cale cu procentaDul
care este incarcat folosind 1ariabila petLoaded_^2cale care se refera la
scalarea8redimensionarea9 unei instante pe directia a0ei ^; care este ori$ontala.7upa aceea
definim 1aloarea campului de te0t dinamic pentru afisarea acelui procentaD si adau/am8sau
ane0am9 un fra/ment de te0t 8te0tul [ loaded9. 7eoarece fisierul 2<> este incarcat in ni1elul
(T aceasta inseamna ca 1a *arunca afara- sau 1a elimina orice continut care e0ista
acolo.:ceasta inseamna ca imediat ce fisierul 2<> este incarcat complet fisierul 2<>
incarcator 8inclusi1 bara de e1olutie9 1a disparea.7aca se incarca un continut intr4un clip
1ideo; s4ar putea folosi urmatoarele linii de cod :ction2cript in fisierul >L::
_mclListener.onLoadCompletePfunction8e1t9 Q
loader_mc._1isiblePfalseT
RT
:ceste linii de cod trebuie plasate imediat deasupra instantei
mHLoader_mcl.addListener8_mclListener9T
Cand este in1ocat detectorul onLoadComplete; fisierul a fost descarcat in intre/ime.:sa
ca; atunci cand se intampla aceasta; 1aloarea pentru proprietatea 1isibilitH a instantei
loader_mc 8bara de e1olutie9 1a fi definita prin 1aloarea false.'oti1ul este ca ea sa nu ramana
in 2patele site4ului &ec, @ooAstore incarcat; ceea ce n4ar arata prea bine; desi/ur.
89 &estam fisierul >L: .
:tunci cand testam documentul >L:; s4ar putea sa nu reusim sa 1edem incarcarea
fisierului pentru ca este incarcat atat de rapid de pe ,ard4discul calculatorului.Eom remarca
insa o deosebire semnificati1a de indata ce 1om plasa fisierele in internet si 1om testa
componenta Loader.
!97aca totul functionea$a conform asteptarilor; modificam ultima linie a codului
:ction2cript.:poi sal1am modificarile pe care le4am operat in fisier. 7eoarece nu 1om
incarca booAstore14.fla in 1ersiunea finala a fisierului; trebuie sa modificam ultima linie de
cod in care incarcam 1ersiunea actuala a fisierului >L: &ec, @ooAstore.'odificam acea
ultima linie de cod din stratul actions prin: mHLoader_mcl.loadClip8*&ec,@ooAstore.s+f-; (9T
:ceasta inseamna ca 1om incarca in sc,imb &ec,@ooAstore.s+f care 1a fi 1ersiunea
finala a fisierului >L: &ec,@ooAstore.>isierul &ec,@ooAstore.s+f suprascrie tot continutul
32
e0istent; deoarece este incarcat in ni1elul (.7aca folosim un ser1er Linu0 sau )ni0; fisierul
1a respecta tipul de litere.
-.>.Te'tarea 'i depa+area 'ite0uui Tec%Boo='tore
In aceasta fa$a; site4ul &ec,@ooAstore ar trebui sa aiba un aspect oarecum
complet.Putem parcur/e toate pa/inile /ratie meniurilor si butoanelor in care am introdus cod
:ction2cript.Continutul este incarcat in fiecare pa/ina /ratie componentelor Loader pe care
le4am introdus si a1em c,iar preincarcatoare pentru continutul care este incarcat8c,iar daca nu
1edem e1olutia deoarece ,ard4discul calculatorului este atat de rapid9.&estam toate sectiunile
si 1erificam daca este incarcat continutul si daca instantele componentelor Pro/ress@ar
functionea$a corect.
In aceasta fa$a s4ar putea sa a1em ne1oie de operat cate1a modificari daca lucrurile nu
mer/ e0act asa cum ne asteptam sau daca ce1a nu este incarcat. Primul lucru pe care trebuie
sa4l facem este sa 1erificam daca toate fisierele sunt la locul lor in dosarul &ec,@ooAstore si in
celelalte dosare pe care le4am creat in acesta.Componenta @and<idt, Profiler ne permite sa
determinam performantele de descarcare pentru fisierul 2<> prin simularea conditiilor
specifice operatiei de incarcare a fisierului 2<> cu folosirea unor setari de latime de banda
diferite8modem prin linia telefonica etc.9
:tunci cand fisierul este sal1at pe disc; uneori poate parea ca este incarcat mai rapid
decat profilul de latime de banda pe care l4am definit.24ar putea sa a1em probleme si daca
fisierul 2<> nu apare cand selectam optiunea pentru simularea unei descarcari8apasand
CtrlZ=nter sau CommandZ=nter inca odata9 ceea ce se mai intampla din cand in
cand.Componenta Profiler pre$inta 1olumul de date inclus in fiecare cadru din fisierul
2<>.:ceasta 1a indica 1olumul de informatie care trebuie preincarcata inainte de a afisa
continutul fisierului 2<>.7aca un 2<> este transmis in flu0; s4ar putea opri la un codru cu
mai mult continut decat altele.:ceasta 1a face ca redarea sa nu fie atat de fluenta pe cat ne4am
dori.Ju trebuie sa uitam ca materialul este intotdeauna descarcat pro/resi1 din ser1er; nefiind
cu ade1arat transmis in flu0.
197esc,idem dosarul &ec,@ooAstore si e0ecutam dublu clicA pe loader.,tml sau
loader.s+f ca sa testam aplicatia &ec,@ooAstore.Cand e0ecutam dublu clicA pe fisierul %&'L;
acesta 1a fi desc,is in bro+serul de <eb prestabilit daca nu se specifica altce1a.7aca decidem
sa dec,idem fisierul 2<>; acesta 1a fi desc,is in >las, PlaHer5.
29Eerificam daca meniul este animat si functionea$a corect.7aca nu stim foarte bine de
ce meniul nu este animat corect sau daca ce1a din site4ul &ec,@ooAstore nu misca; ar fi
indicat sa cautam in fisierul model de pe C74R#' si sa4l comparam cu >L:4ul in care
lucram.Putem foarte usor sa uitam un fra/ment de cod :ction2cript sau un buton poate sa fie
deplasat si aplicatia sa nu functione$e corect.Practic; studiile arata ca 8([ din timpul alocat
construirii unui proiect 1a fi petrecut cu depanarea.# problema frec1enta de meniul si de
animatia lui este cea a butonului in1i$ibil.7eoarece a1em butonul in1i$ibil sub celelalte
butoane; s4ar putea sa a1em o problema daca meniul nu este aliniat perfect cu fiecare buton
de deasupra lui.7aca e0ista si o foarte mica bucatica din butonul in1i$ibil care iese printre cele
trei butoane si meniul derulat; meniurile se 1or inc,ide inainte sa putem trece cu mouse4ul
peste ele sau sa e0ecutam clicA pe ele.
3
Ca sa e1itam asa ce1a; poate fi necesar sa taiem putin din butonul in1i$ibil 8s4ar putea sa
fie ne1oie sa deblocam si sa facem acest strat 1i$ibil in prealabil9.2electam cadrul %it si apoi
folosim instrumentul 2election sau instrumental Lasso ca sa selectam o bucata din $ona de
impact a butonului in1i$ibil in re/iunea dintre butoane si meniu iar apoi sa o taiem.
9Eerificam daca instantele componentei Pro/ress@ar functionea$a corect.Parcur/em
fiecare sectiune a site4ului de <eb.@ara de e1olutie dispare atunci cand componenta Loader a
terminat incarcarea si afisea$a continutul.In ca$ul in care continutul nu este incarcat 1erificam
daca este corecta calea catre fisierul 2<> din proprietatea contentPat, a componentei Loader.
In ca$ul in care continutul este incarcat in componenta Loader si componenta Pro/ress@ar nu
mer/e mai sus de ([; 1erificam daca Loader are nume de instanta si daca acesta corespunde
1alorii din parametrul sursa al companiei Pro/ress@ar.7e asemenea; 1erificam daca am
atribuit un nume de instanta instantei componentei Pro/ress@ar si daca acesta corespunde
numelui de instanta cu care asociem detectorul de e1enimente. # alta problema ar putea
aparea daca uitam sa sc,imbam parametrul mode pentru componenta Pro/ress@ar din e1ent in
palled.:tunci cand parametrul mode este declarat cu 1aloarea e1ent; componenta Pro/ress@ar
1a ramane pe 2cena; c,iar daca Loader afisea$a continutul.
49=0ecutam clicA pe butonul CompanH si apoi e0ecutam clicA pe butonul
&our.Eerificam daca mascarea este corecta pentru pre$entarea site4ului care este incarcata in
librarie.In ca$ul in care construim turul de pre$entare folosind >las, '0 Professional;
1erificam daca acesta este incarcat corect in fisierul 2<> si daca masca pe care am desenat4o
peste ecranul principal al pre$entarii acopera intre/ul tur.Ea trebui sa testam libraria intr4o
fereastra de bro+ser ca sa reali$am aceasta testare.'asca trebuie sa masc,e$e corect tran$itiile
dintre ecrane dupa ce este incarcata in librarie.7aca masca nu masc,ea$a corect; ar fi indicat
sa re1enim la fisierul tour.fla si sa modificam masca in mod corespun$ator.:ceasta poate
implica redimensionarea mastii sau repo$itionarea ei pe scena.7e asemenea ar trebui sa
1erificam tabela temporala si sa controlam daca stratul este declarat corect prin 1aloarea
'asA.
"9&estam formularul de raspuns si de c,estionar.
>ormularul de raspuns si c,estionarul sunt amandoua in $ona >eedbacA a site4ului
&ec,@ooAstore.Incercam sa transmitem un raspuns folosind formularele dupa ce acestea sunt
incarcate.:r trebui sa primim un e4mail la adresa pe care o specificam ca 1aloare constanta
atunci cand construim formularul de raspuns.C,estionarul 1a trimite la randul lui datele unui
formular^'L.
39&estam daca fisierele 2<> pentru >eatured @ooA; Je+s; Re1ie+s; &our; 'ap;
%ome si Catalo/ sunt incarcate in librarie asa cum trebuie. 7e asemenea 1erificam daca te0tul
si ima/inile sunt incarcate si ele.&oate aceste pa/ini sunt incarcate in site4ul &ec,@ooAstore
aproape in acelasi mod datorita componentei Loader care este folosita in site4ul
&ec,@ooAstore pentru a le importa pe toate.Controlam daca intre/ul continut al acestor pa/ini
este incarcat complet si se comporta conform asteptarilor.)neori atunci cand incarcam fisiere
e0terne in >las,; pot aparea probleme daca folosim domenii de e0istenta de /enul_root in
fisierele 2<>. &ec,@ooAstore_fm0.fla sau tec,booAstore_pro.fla in functie de ce 1ersiune de
>las, '0 2((4 folosim din fisierul de pe C74R#' este complet cu :ction2cript; elemente
LibrarH si toate desenele la locul lor.=0ista intotdeauna posibilitatea ca o modificare din >las,
PlaHer 8de /enul unui update de securitate9 sau ce1a de acest /en sa /enere$e un mic element
care sa modifice modul in care functionea$a in site4ul &ec,@ooAstore.
34
597esc,idem booAstore14.fla si 1erificam fisierul 2<> in componenta @and+idt,
Profiler.
Componenta @and+idt, Profiler poate fi accesata in timpul testarii fisierului 2<> in
mediul de testare.2electam ControlM&est 'o1ie sau apasam CtrlZ=nter si cand suntem in
mediul de testare putem sa selectam Eie+M@and+id,t Profiler din meniul principal sau sa
apasam CtrlZ@.
@and+id,t Profiler afisea$a foarte multe informatii utile; cum ar fi dimensiunile 2cenei;
rata de cadre curenta; marimea fisierului 2<> in Wiloocteti 8precum si in octeti9 numarul de
cadre din fisierul 2<> si cate secunde durea$a redarea fisierului 2<> pentru un 1i$itator.
@and+id,t Profiler contine si un /rafic ce pre$inta 1olumul de date care este transmis de
fiecare cadru.:ceasta ne permite sa optimi$am 2<>4ul.7aca un cadru contine prea multa
informatie si aDun/e sa incetineasca redarea; ar fi indicat sa mutam o parte din informatia
respecti1a intr4un alt cadru cu mai putina informatie.# alta facilitate strans le/ata de
componenta @and+id,t Profiler este posibilitatea de a simula timpii de descarcare din mediul
de testare al >las,4ului.>olosind Eie+M2imulate 7o+nload putem sa simulam redarea
fisierului >las, 2<> cand un 1i$itator foloseste un modem mai lent.:ceasta ne permite sa
1edem cum este redat 2<>4ul intr4un calculator cu o le/atura lenta la internet8acces prin dial4
up9 si sa determinam cat durea$a pentru ca utili$atorul sa poata 1edea continutul.Putem sa
modificam 1ite$ele la care dorim sa simulam redarea; selectand o optiune din meniul
Eie+M7o+nload 2ettin/s.Eite$ele au un inter1al mare de 1ariatie; de la 14.4 pentru accesul
dial4up pana la11.2 W@ pe secunda in ca$ul unei le/aturi &1 mult mai rapide.7aca e0ista
anumite 1ite$e la care dorim sa facem testarea; care nu apar in lista; a1em posibilitatea de a
adau/a pana la trei setari de descarcare particulare la care putem defini numarul de octeti pe
secunda la care sa se faca testarea.&estarea 2<>4ului la mai multe 1ite$e este intotdeauna
indicata; pentru ca ne ofera o ima/ine /enerala asupra timpului necesar pentru ca 1i$itatorii sa
poata 1edea continutul.:cest lucru poate influenta in mod semnificati1 e0perienta /enerala a
site4ului de <eb.7aca utili$atorii trebuie sa astepte un timp foarte indelun/at pana cand se
incarca 2<>4ul; in /eneral acestia 1or renunta si 1or parasi site4ul inainte de a 1edea macar
ce1a din continutul >las, creat.

3"
(%P)*$LL 4
0*D) D- (%, PR)2).D $P*)+),%R-% .) 0)*-
In cadrul acestui capitol 1om anali$a un site <eb pornind de la un stadiu initial in
care erau folosite doar elemente %&'L si aDun/and pana la stadiul final; stadiul pentru care
s4au utili$at cite1a dintre te,nicile de optimi$are anali$ate in aceasta lucrare.2ite4ul anali$at
este un site publicat pe Internet; dar pentru acesta lucrare s4au modificat anumite informatii
cuprinse in cesta.7e asemenea au fost eliminate amumite pa/ini <eb din structura acestui site
in scopul simplificarii anali$ei lui.Jumarul de pa/ini <eb ale site4ului ori/inal este de 3";
ierar,i$ate pe
trei ni1eluri:informatii /enerale; modele plus date te,nice si metode de dialo/ cu
potentialii clienti.2tudiul de ca$ pe un site simplificat pentru nu introduce informati inutile
care ar putea ditra/e atentia cititorului de la te,nicile de optimi$are utili$ate.Cele sase criterii
de e1aluare pentru un site sunt urmatoarele :
1.:spectul /eneral al site4ului sau prima impresie lsata de catre acestaT
2.)tili$area ima/inilor 8fisierelor /rafice format NP=G; GI>sauPJG9T
.'odul de na1i/are prin site siOsau usurinta in utili$areT
4.'odul si lo/ica de utili$are a produselor si te,nolo/iilor de ultima oraT
".Calitatea continutului T
3.#ptimi$area; controlul si mentinerea site Vului.
&oate acestea se traduc in 1ite$a de incarcare a sit Vului; care ramane principalul criteriu
de e1aluare a optimi$arii acestuia.In cele trei stadii ale site4ului pre$entate in acest studiu s4
au luat in coniderare urmatoarele probleme pri1ind optimi$area site4ului:
selectarea si modul de dispunere a informatiei importante 8modul in care
utili$atorul 1a /asi informatia dorita9T
e1identierea in pa/ina de start 8%ome Pa/e9 a pa/inilor componente ale site4uluiT
reducerea utili$arii barei de derulare 1erticala; adica plasarea informatiei in
partea superioara a pa/inii <ebT
utili$area unui format e0plicit pentru le/aturile 8meniul de na1i/are9catre pa/inile
<eb componente ale site4ului T
utili$area unei sc,eme de culori 8stadiul final9 care sa inspire incredere si
forta8tonuri de /ri desc,is si combinatii ale culorilor rosu; albastru si /alben9T
e1identierea noutatilor aparute pe site8noi informatii introduse9.
0*%D)L 1
La momentul reli$arii acestui site nu a fost redactat un plan de dezvoltare; totusi in
continuare este oferita o dia/rama a site4ului; precum si cate1a scurte e0plicatii referitoare la
continutul pa/inilor din care este compus:
33
$R3%.)3R%+% 0)*-4L)
7upa cum se poate obser1a in dia/rama site4ul in acest stadiu 1a contine urmatoarele
patru pa/ini <eb:
Pagina de start()nitiala)4*inde0.,tml-4pa/ina care 1a fi afisata initial la accesarea
site4ului.In acest stadiu pa/ina *inde0.,tml- 1a contine de fapt setarea cadrelor din care 1a fi
compus site4ulT
Prezentare firma4*pre$entare.,tml-4pa/ina <eb care 1a contine o scurta pre$entare a
firmei82.C.E4:)&# 2.R.L.9T
+arci5+odele vand!te4*1an$ari.,tml-4pa/ina 1a contine marcile si modele de masini
1andute de catre firma; impreuna cu cate1a scurte informatii te,niceT
(!m p!tem fi contactati L4*contact.,tml-4pa/ina care contine informatii pri1ind
modul cum poate fi contactata firma8adresa; telefon; fa0; e4mail9.In acest stadiu pa/ina <eb
nu 1a contine decat informatii de tip te0t.Initial in cele trei cadre 8frmes9 stabilite prin
intermediul fisierului _inde0; ,tml- _ 1or fi afisate urmatoarele trei documente %&'L:; ;
c1.,tml-; ; ; c2 .,tml-si; ; c.,tml-; dup cum se pote obser1a in urmtorul cod sursa:
K,tmlM
K,eadM
KtitleM: : : Ean$ari auto : : :KOtitleM
Kmeta ,ttp4 e`ui1P-Content V&Hpe- content P-te0t O,tml:-M
Kmeta nameP-7iscription- contentP-Pre$entre societate 1in$ari auto-M
Kmeta nameP-WeH+ords- content P-1in$ari auto; auto1e,icole; masini noi; nissan;
ford; fiat-M
KO,eadM
Kframeset ro+sP-1((; I-M
Kframe srcP-c2.,tml YYname P-cool- framebrderP-(-
scrollin/P-no YYnoresi$eM
Kframeset colsP-11(; I-M
Kframe srcP-2.,tml- nameP-cool-frameborderP-(-
scorllin/P-no-noresi$eM
Pa/ina de 2tart
8Initiala9 inde0.,tml
Pre$entare firma
2.C.E4:)&# 2.R.Lpre$entare.,tml
'arciO'odele 1andute
1an$ari.,tml
Cum putem fi contactati L
contact.,tml
35
Kframe srcP-c.,tml-nameP-col2-frameborderP-(-
scrollin/P-auto-noresi$eM
KOframesetM
KOframesetM
KO,tmlM
7ocumentul *c1.,tml-8afisat in cadrul superior ro+l9contine un antet al site4ului; antet
care nu se 1a modifica pe parcursul na1i/arii prin site. Informatiile furni$ate de catre
acest
antet sunt urmatoarele :nume si tip firma; adresa postala8oras9; telefon; fa0 si e4mail;
dupa cum
se poate obser1a in continuare:
Cod sursa:
K,tmlM
KbodH b/colorP-SCCCCCC-M
KcenterM
K,2M2.C. E4:)&# 2.R.L.KO,2M
K,4M2ibiu V&elefon:
(3!.0000004fa0:
(3!.0000004
=4mail:1autoaHa,oo.comKO,4M
KOcenterM
KObodHM
KO,tmlM
7ocumentul *c2.,tml-8afisat in cadrul coll91a contine un foarte simplu meniu de
na1i/are; meniu care permite reintoarcerea la pa/ina de strat *c.,tml-; precum
2i accesarea rapida a celorlalte pa/ini care compun site4ul.'eniul de na1i/are
=ste reali$at prin intermediul a patru ima/ini format GI>; dupa cum se poate obser1a
In continuare:
Cod sursa:
K,tml M
KbodH b/ color P-Sleft-M
Ka ,refP-pre$entare.,tml-tar/etP-col 12-M
Kim/ srcP-optl./if- altP-Pre$entare firma-
+idt,P-83-,ei/,tP-2- borderP-(-MKOaM
KbrMKbrM
Ka ,refP-1in$ari. ,tml-tar/etP-col12-M
Kim/ srcP-opt 2.GI>-altP *Ein$ari auto-auto +idt,P-83-
,ei/,tP-2-borderP-(-MKOaM
Kbr MKbrM
Ka ,refP-contract.,tml-tar/etP-col 12-MKim/
src P-opt./if-alt P-Contact-+idt,P-83-
,ei/,tP-2-borderP-(-MKOaM
KbrMKbrM
Ka ,refP-c.,tml-tar/etP-col 12-MKim/
srcP-opt4./if-altP-Pa/ina introducti1a-
+idt,P-83-,ei/,tP-2-borderP-(-MKOaM
38
KOdi1M
KObodHM
KO,tmlM
Jici continutul acestui cadru nu se 1a modifica pe parcursul na1i/arii prin
site.7ocumentul *c.,tml- este documentul ce 1a fi afisat in cadrul co12; cadru in care
informatia se 1a modifica pe parcursul deplasarii prin site.7ocumentul *c.,tml- contine o
ima/ine format NPG; dupa cum se poate obser1a in continuare:
Cod sursa:
K,tmlM
KbodHM
Kdi1 ali/nP*center-M
Kim/ srcP*first.Dp/- altP*Ima/ine pa/ina initiala- +idt,P*2- ,ei/,tP*4!-M
KOdi1M
KObodHM
KO,tmlM
:cest al treilea cadru este cadrul utili$at pentru afisarea informatiilor 8pa/inilor <eb9
obtinute prin utili$area meniului de na1i/are 8tar/etP-co12-9.
=0ecutarea unui clicA cu mouse4ul pe optiunea *Pre$entare-8Preze+tare 4Ka
,refP*pre$entare.,tml- tar/etP*co12-MKim/ srcP*opt1./if - altP-Pre$entare firma-
+idt,P-83- ,ei/,tP-2- borderP-(-MKOaM9 1a a1ea ca efect afisarea in cadrul co12 a
continutului pa/inii <eb8fisierului %&'L9 *pre$entare.,tml-; pa/ina al carei cod sursa este
oferit in continuare:
K,tmlM
KbodH b/colorP-S>>>>>>-M
KcenterMK,MPre$entare firmaKO,MKOcenterM
K,rM
KpMUnbspT UnbspT UnbspT UnbspT 2ocietatea E4:)&# a fost infiintata in anul 1!44 si se
ocupa cu 1an$area masinilor noi.KOpM
KpMUnbspT UnbspT UnbspT UnbspT 'arcile de masini 1andute sunt: :udi; >ord; >iat si
Jissan.KOpM
K,rM
KObodHM
KO,tmlM
=0ecutarea unui clicA pe optiunea *'asini noi-8 Ma'i+i +oi 4Ka ,refP-1an$ari.,tml-
tar/etP-co12-M Kim/ srcP-opt2.GI>- altP-Eam$ari auto- +idt,P-83- ,ei/,tP-2-
borderP-(-MKOaM9 1a a1ea ca efect afisarea in cadrul co12 a continutului fisierului %&'L
*1an$ari.,tml-; fisier al carui cod sursa poate fi obser1at in continuare:
K,tmlM
KcenterM
Ka nameP-sus-MKOaM
K,M'arcile 1anduteKO,M
KpM
3!
Ka ,refP-Saudi-M:udiKOaM
UnbspT UnbspT UnbspT
Ka ,refP-Sfiat-M>iatKOaM
Ka ,refP-Sford-M>ordKOaM
Ka ,refP-Snissan-MJissanKOaM
KOpM
KnrM
KOcenterM
Ka nameP-audi-MKOaM
KcenterMKbM:udiKObMKOcenterM
Ktable borderP-1-M
KtrM
KtdMKim/ srcP-audi:.Dpe/- +idt,P-((- ,ei/,tP-22"- borderP-(-MKOtdM
KtdMKbM:KObM 4 2 usi; :@2; airba/ locuri fata; motori$are 1.3O1(2 CPKOtdM
KOtrM
KtrM
KtdMKim/ srcP-audi:3.Dpe/- +idt,P-((- ,ei/,tP-22"- borderP-(-MKOtdM
KtdMKbM:3KObM 4 4 usi; caroserie /al1ani$ata; tractiune inte/rala; :@2; =2P; 2.(O1(
CPKOtdM
KOtrM
KtrM
KtdMKim/ srcP-audi&&.Dpe/- +idt,P-((- ,ei/,tP-22"- borderP-(-MKOtdM
KtdMKbM&& CoupeKObM 4 2 usi; :@2; =72; :2R; tractiune inte/rala; 1.8&O18(
CPKOtdM
KOtrM
KOtableM
Ka ,refP-Ssus-M2usKOaM
Ka nameP-fiat-MKOaM
KcenterMKbM>iatKObMKOcenterM
Ktable borderP-1-M
KtrM
KtdMKim/ srcP-fiatpunto.Dpe/- +idt,P-((- ,ei/,tP-21- borderP-(-MKOtdM
KtdMKbM>iat PuntoKObM 4 4 usi; 4 cilindri; 124241!1( cmc; consum ma0im 3.345.1O1((
WmO,KtdM
KOtrM
5(
KtrM
KtdMKim/ srcP-fiatstilo.Dpe/- +idt,P-((- ,ei/,tP-21- borderP-(-MKOtdM
KtdMKbM>iat 2tiloKObM 4 4 usi; 124241!1( cmc; 15(41!( WmO,; 5.241.31O1(( WmKOtdM
KOtrM
KOtableM
Ka nameP-ford-MKOaM
KcenterMKbM>ordKObMKOcenterM
Ktable borderP-1-M
KtrM
KtdMKim/ srcP-focus.Dp/- +idt,P-((- ,ei/,tP-21- borderP-(-MKOtdM
KtdMKbM>ocusKObM 4 nr. cilindri 4 in linie; cilindree8cmc9188; 1ite$a ma0ima 151KOtdM
KOtrM
KtrM
KtdMKim/ srcP-mondeo.Dp/- +idt,P-((- ,ei/,tP-2((- borderP-(-MKOtdM
KtdMKbM'ondeoKObM 4 nr. cilindri 4 in linie; cilindree8cmc91!!5; 1ite$a ma0ima
2(3KOtdM
KOtrM
KOtableM
Ka nameP-nissan-MKOaM
KcenterMKbMJissanKObMKOcenterM
Ktable borderP-1-M
KtrM
KtdMKim/ srcP-nmicra.Dpe/- +idt,P-((- ,ei/,tP-225- borderP-(-MKOtdM
KtdMKbM'icraKObM 4 " usi; " locuri; 'otor 4 cilindri; Consum 'a0im ben$ina4motorina
5.543.8 1O1(( AmKOtdM
KOtrM
KtrM
KtdMKim/ srcP-npatrol.Dpe/- +idt,P-((- ,ei/,tP-25- borderP-(-MKOtdM
KtdMKbMPatrolKObM 4 4" usi; 'otor 4cl; Consum ma0. 14. 1O1(( AmKOtdM
KOtrM
KOtableM
K,rM
KObodHM
KO,tmlM
2e poate obser1a ca pa/ina <eb afisata in cadrul co12 contine mai multe ima/ini format
NPG8NP=G9; precum si cate1a informatii de tip te0t.In codul sursa al fisierului *1an$ari.,tml-
se poate obser1a ca au fost introduse ancore care permit reintoarcerea la partea superioara a
cadrului co12 8Ka nameP-sus-MKOaM 4 Ka ,refP-Ssus-M2usKOaM9.7e asemenea aceasta pa/ina
contine un meniu 8:udi; >iat; >ord; Jissan9; meniu care permite o deplasare rapida prin
pa/ina 8Ka ,refP-Saudi-M:udiKOaM; C9.
7aca se 1a e0ecuta clicA pe optiunea *Contact-8 Co+tact 4 Ka ,refP-contact.,tml-
tar/etP-co12-MKim/ srcP-opt./if- altP-Contact- +idt,P-83- ,ei/,tP-2-
51
borderP-(-MKOaM9; in cadrul co12 1a fi afisat continutul fisierului %&'L *contact.,tml-;
fisier al carui continut poate fi obser1at in continuare:

K,tmlM
KcenterM
K,MCum ne puteti contactaLKO,M
K,rM
KpM2ibiu; 2tr. IIIIIIII; Jr.KOpM
KpM&elefon: (23!.IIIIIIKOpM
KpM>a0: (23!.IIIIIIKOpM
KpM=4mail: 1autoaHa,oo.com KOpM
K,rM
KOcenterM
KObodHM
KO,tmlM
>ereastra na1i/atorului dupa selectarea optiunii *Contact- se poate obser1a in urmatoarea
ima/ine:
In ca$ul in care se 1a e0ecuta un clicA pe optiunea *2tart- 8Start 4 Ka ,refP-c.,tml-
tar/etP-co12-MKim/ srcP-opt4./if- altP-Pa/ina introducti1a- +idt,P-83- ,ei/,tP-2-
borderP-(-MKOaM9; in cadrul co12 1a fi afisat continutul fisierului %&'L *c.,tml-8ima/inea
de tip si/la9.:ceasta optiune a meniului permite reintoarcerea la pa/ina initiala8pa/ina de
start9.
:nali$a site4ului
In urma unei simple anali$e a structurii si continutului site4ului se pot tra/e urmatoarele
conclu$ii:
a9 )tili$area cadrelor are ca efect reducerea spatiului folosit pentruafisarea informatiilor;
datorita introducerii a doua cadre care nu 1or fi modificate 8co11 si co129T
b9 )tili$area cadrelor cu fundaluri8background9 colorate nu crea$a un efect placut; din
cau$a modului de afisare a cadrelorT
c9 Cele patru ima/ini format GI> utili$ate pentru reali$area meniului ocupa un spatiu mult
prea mare si nici nu au un aspect placut.7e asemenea marimea fisierelor format GI> poate
contribui la cresterea timpului de afisare a pa/inii <ebT
d9 =0ista un numar mare de fisiere %&'L pentru un site cu un continut atat de simplu 85
fisiere9; datorita utili$arii cadrelor.#ptiunea *2tart- su/erea$a e0istenta unei pa/ini <eb noi;
ceea ce nu este corect.# asemenea optiune ar fi indicata daca pentru un site ar e0ista mai
multe 1ersiuni in limbi diferite 8romana; en/le$a; C9T
e9 7ocumentul *c.,tml- 1a afisa ima/inea format NPG *first.Dp/-; ima/ine ce nu a fost
di1i$ata8taiata in piese mai mici9; a1and ca efect un timp de incarcare mare.7e asemenea
ima/inea *first.Dp/- contine te0tul *2.C. E4:)&# 2.R.L.-; te0t care apare si in cadrul
superior ro+l; creBndu4se astfel o repetitie nedoritaT
f9 Pa/ina <eb *contact.,tml- contine o serie de informatii ce se afla introduse si in
cadrul superior ro+l.
52
:ceste cate1a conclu$ii stau la ba$a obtinerii unei noi structuri si abordari a modului de
reali$are 8stadiul 29.In cadrul acestui capitol nu s4a efectuat o anali$a *la san/e- a codului
sursa8cod %&'L9.
0tadi!l 2
In acest stadiu structura site4ului 1a fi urmatoarea:
Jumarul de fisiere %&'L a fost redus de la sapte859 la trei89: *inde0.,tml-;
*1an$ari.,tml- si *contact.,tml- prin neutili$area cadrelor .
&oate cele trei pa/ini 1or contine o ima/ine utili$ata ca antet pentru pa/inile <eb care
constituie site4ul; ima/ine ce poate fi obser1ata in continuare.
Pa/ina <eb *inde0.,tml- 8pa/ina care 1a fi afisata atunci cand cine1a 1a accesa site4ul
<eb9 1a contine de fapt o scurta pre$entare a firmei; precum si o ima/ine 8si/la9.Ima/inea
este de tip NPG si utili$ea$a te,nica di1i$arii pentru a se reduce timpul de incarcare a pa/inii;
dupa cum se poate obser1a in urmatorul cod sursa:
K,tmlM
K,eadM
KtitleM:::Ean$ari auto:::KOtitleM
Kmeta ,ttp4e`ui1P-Content4&Hpe- contentP-te0tO,tmlT- M
Kmeta nameP-7escription- contentP-Pre$entare societate auto- M
Kmeta nameP-WeH<ords-contentP-1an$ari auto; auto1e,icole; masini noi; nissan;
ford; fiat -M
KlinA relP-stHles,eet- tHpeP-te0tOcss- ,refP-stil.css-M
KO,eadM
Kdi1 ali/nP-center-M
Kim/ srcP-antet.Dp/- altP-:ntet pa/ina- +idt,P-3"2- ,ei/,tP-12"-M
KbrMKbrM
Ka ,refP-inde0.,tml- classP-tip1- titleP-Pre$entare firma-MPre$entareKOaM
UnbspT UnbspT UnbspT UnbspT UnbspT UnbspT UnbspT UnbspT UnbspT UnbspT UnbspT
UnbspT
Ka ,refP-1an$ari.,tml- classP-tip1- titleP-'arci 1andute-MEan$ariKOaM
UnbspT
Ka ,refP-contact.,tml- classP-tip1- titleP-Cum ne puteti contactaL-MContactKOaM
Pa/ina de 2tart
8Initiala9contine pre$entare firma inde0.,tml
'arciO'odele
1andute 1an$ari.,tml
Cum putem fi contactatiL
Contine un formular pentru 1i$itatori contact.,tml
5
KOdi1M
K&:@L= C=LL2P:CIJGP ( C=LLP:77IJGP ( @#R7=RP (M
K&RM
K&7M
K&:@L= C=LL2P:CIJGP ( C=LLP:77IJGP ( @#R7=RP (M
K&RM
K&7MKI'G 2RCP-si/la_11.Dp/- <I7&%P-138- %=IG%&P-1(5- :L&P-piesa
1-MKO&7M
K&7MKI'G 2RCP-si/la_21.Dp/- <I7&%P-13!- %=IG%&P-1(5- :L&P-piesa
2-MKO&7M
KO&RM
K&RM
K&7MKI'G 2RCP-si/la_12.Dp/- <I7&%P-138- %=IG%&P-!1- :L&P-piesa
-MKO&7M
K&7MKI'G 2RCP-si/la_22.Dp/- <I7&%P-13!- %=IG%&P-!1- :L&P-piesa
4-MKO&7M
KO&RM
K&RM
K&7MKI'G 2RCP-si/la_1.Dp/- <I7&%P-138- %=IG%&P-!(- :L&P-piesa
"-MKO&7M
K&7MKI'G 2RCP-si/la_2.Dp/- <I7&%P-13!- %=IG%&P-!(- :L&P-piesa
3-MKO&7M
KO&RM
KO&:@L=M
KO&7M
K&7M
KcenterMK,MPre$entare firmaKO,MKOcenterM
K,rM
KpMUnbspT UnbspT UnbspT UnbspT2ocietatea E4:)&# a fost infiintata in anul 1!!4 si se
ocupa cu 1an$area masinilor noi.KOpM
KpMUnbspT UnbspT UnbspT UnbspT'arcile de masini 1andute sunt::udi; >ord; >iat si
Jissan.KOpM
K,rM
KO&7M
KO&RM
KO&:@L=M
KObodHM
KO,tmlM
7e asemenea pentru reali$area le/aturilor 8meniului de na1i/are9 s4au utili$at proprietati
C22 8KlinA relP-stHlesc,eet- tHpeP-te0tOcss- ,refP-stil.css-M9; proprietati ale caror 1alori au
fost definite in fisierul e0tern *stil.css- al carui continut poate fi obser1at in continuare:
bodH Qmar/in4top: ( p0R
54
a. tip1 : linA
Q
color: S((((((T
font4si$e: mediumT
font4familH: Eerdana; :rial; 2erifT
te0t4decoration: none
R
a. tip1: 1isited
Qcolor: S((((((T
font4si$e: mediumT
R
a. tip1: acti1e
Qcolor: S((((((T
font4si$e: mediumT
R
a. tip1: ,o1er
Qcolor: S>>((((T
font4si$e: mediumT
te0t4decoration: underline
R
#ptiunea ,o1er este utila atunci cand cursorul mouse4ului se afla dispus deasupra unei
le/aturi 8optiune a meniului de na1i/are9.:tunci proprietatea te0t4decoration:underline 1a face
ca te0tul sa apara subliniat.
=0ecutarea unui clicA pe optiunea *Ean$ari- 1a a1ea ca efect afisarea pa/inii <eb
*1an$ari.,tml-; pa/ina care contine aceeasi ima/ine antet8ima/ine ce se afla acum in
memoria cache9; precum si ima/inile marcilor de masini pe care firma le
comerciali$ea$a.7atorita utili$arii memoriei cache; timpul de afisare a pa/inii se 1a
reduce.Codul sursa pentru pa/ina <eb *1an$ari.,tml- poate fi obser1at in continuare:
K,tmlM
K,eadM
Kmeta nameP-7escription- contentP-'arci 1andute de catre 2.C. E4:)&# 2.R.L.- M
Kmeta nameP-WeH<ords-contentP-14auto; marci; 1an$are -M
KO,eadM
Ka nameP-sus-MKOaM
5"
KbrMKbrM
UnbspT
UnbspT
KOdi1M
KcenterMK,M'arcile 1anduteKO,MKOcenterM
Kdi1 ali/nP-ri/,t-M
Ka ,refP-Saudi- classP-tip2-M:udiKOaM
Ka ,refP-Sfiat- classP-tip2-M>iatKOaM
Ka ,refP-Sford- classP-tip2-M>ordKOaM
Ka ,refP-Snissan- classP-tip2-MJissanKOaM
KOdi1M
Ka nameP-audi-MKOaM
KcenterMKbM:udiKObMKOcenterM
Ktable borderP-1-M
KtrMKtdMKim/ srcP-audi:.Dpe/- +idt,P-((- ,ei/,tP-22"- borderP-(-MKOtdM
KtdMKbM:KObM 4 2 usi; :@2; airba/ locuri fata; motori$are 1.3O1(2 CPKOtdM
KOtrM
KtrM
KtdMKim/ srcP-audi:3.Dpe/- +idt,P-((- ,ei/,tP-22"- borderP-(-MKOtdM
KtdMKbM:3KObM 4 4 usi; caroserie /al1ani$ata; tractiune inte/rala; :@2; =2P; 2.(O1(
CPKOtdM
KOtrM
KtrM
KtdMKim/ srcP-audi&&.Dpe/- +idt,P-((- ,ei/,tP-22"- borderP-(-MKOtdM
KtdMKbM&& CoupeKObM 4 2 usi; :@2; =72; :2R; tractiune inte/rala; 1.8&O18(
CPKOtdM
KOtrM
KOtableM
Ka nameP-fiat-MKOaM
KcenterMKbM>iatKObMKOcenterM
Ktable borderP-1-M
KtrM
KtdMKim/ srcP-fiatpunto.Dpe/- +idt,P-((- ,ei/,tP-21- borderP-(-MKOtdM
KtdMKbM>iat PuntoKObM 4 4 usi; 4 cilindri; 124241!1( cmc; consum ma0im 3.345.1O1((
WmO,KtdM
53
KOtrM
KtrM
KtdMKim/ srcP-fiatstilo.Dpe/- +idt,P-((- ,ei/,tP-21- borderP-(-MKOtdM
KtdMKbM>iat 2tiloKObM 4 4 usi; 124241!1( cmc; 15(41!( WmO,; 5.241.31O1(( WmKOtdM
KOtrM
KOtableM
Ka nameP-ford-MKOaM
KcenterMKbM>ordKObMKOcenterM
Ktable borderP-1-M
KtrM
KtdMKim/ srcP-focus.Dp/- +idt,P-((- ,ei/,tP-21- borderP-(-MKOtdM
KtdMKbM>ocusKObM 4 nr. cilindri 4 in linie; cilindree8cmc9188; 1ite$a ma0ima 151KOtdM
KOtrM
KtrM
KtdMKim/ srcP-mondeo.Dp/- +idt,P-((- ,ei/,tP-2((- borderP-(-MKOtdM
KtdMKbM'ondeoKObM 4 nr. cilindri 4 in linie; cilindree8cmc91!!5; 1ite$a ma0ima
2(3KOtdM
KOtrM
KOtableM
Ka nameP-nissan-MKOaM
KcenterMKbMJissanKObMKOcenterM
Ktable borderP-1-M
KtrM
KtdMKim/ srcP-nmicra.Dpe/- +idt,P-((- ,ei/,tP-225- borderP-(-MKOtdM
KtdMKbM'icraKObM 4 " usi; " locuri; 'otor 4 cilindri; Consum 'a0im ben$ina4motorina
5.543.8 1O1(( AmKOtdM
KOtrM
KtrM
KtdMKim/ srcP-npatrol.Dpe/- +idt,P-((- ,ei/,tP-25- borderP-(-MKOtdM
KtdMKbMPatrolKObM 4 4" usi; 'otor 4cl; Consum ma0. 14. 1O1(( AmKOtdM
KOtrM
KOtableM
K,rM
KObodHM
KO,tmlM
In codul sursa anterior se poate obser1a portiunea de cod 8in/rosata9 ce se
repeta8ima/inea antet si meniul de na1i/are9.
'etainformatiile s4au modificat putin pentru a se putea efectua o cautare mai simpla si
or/ani$ata.Ju este indicat ca metainformatiile din fisierul *inde0.,tml- sa se repete in toate
fisierele care constituie site4ul.In ca$ul in care aceste metainformatii nu contea$a pentru restul
de pa/ini <eb; ele pot fi eliminate pentru a nu contribui la marirea fisierului.
Cea de4a treia pa/ina <eb din care este constituit site4ul 8*contact.,tml-9 1a contine un
formular pentru 1i$itatori; prin intermediul caruia un 1i$itator poate obtine informatii despre
55
un anumit model de masina.In acest formular 1i$itatorul 1a putea introduce8daca doreste9
cate1a date personale.7e asemenea 1a putea sa selecte$e un model despre care doreste sa
obtina mai multe informatii.In partea inferioara a pa/inii <eb sunt afisate cate1a informatii
despre na1i/atorul 8browser9 utili$at; date ce se completea$a in mod automat.:ceste date nu
pot fi modificate de catre persoana care accesea$a formularul 81i$itator9 si ele sunt utile celui
care s4a ocupat de reali$area site4ului <eb pentru a obtine informatii suplimentare despre
persoanele care accesea$a site4ul8tip na1i/ator; 1ersiune; re$olutie monitor; C9.Codul sursa
pentru pa/ina *contact.,tml- este oferit in continuare:
K,tmlM
K,eadM
Kmeta nameP-7escription- contentP-Pre$entare societate auto- M
Kmeta nameP-WeH<ords-contentP-1an$ari auto; auto1e,icole; masini noi; nissan;
ford; fiat -M
Kscript lan/ua/eP-Na1a2cript-M
1ar na1JamePna1i/ator.appJameT
1ar brEerPna1i/ator.user:/entT1ar brJumT1ar re/Pne+ Re/=0p8YOY9T
function 1erJumI= 89Q
1ar brEerIdPbrEer.inde0#f8Y'2I=Y9T
brJumPbrEer.substr8brEerId; 89T
R
function 1erJum#t 89 Q
1ar brEerIdPbrEer.searc,8re/9T
brJumPbrEer.substrin/8brEerIdZ19T
R
KOscriptM
KO,eadM
Ka nameP-sus-MKOaM
KbrMKbrM
UnbspT
UnbspT
KOdi1M
KcenterMK,M>ormular 1i$itatoriKO,MKOcenterM
Kform nameP-forml- met,odP-post-
actionP-mailto:1autoaHa,oo.comXsubDectPIJ>#R':&II EIbI&:&#R -
58
enctHpeP-te0tOplain-M
Ktable borderP-(-M
KtrM
KtdMKbM2ocietate:KObMKOtdM
KtdMKinput tHpeP-te0t- nameP-2ocietate- si$eP-4(-MKOtdM
KOtrM
KtrM
KtdMKbM7omeniu de acti1itate:KObMKOtdM
KtdMKinput tHpeP-te0t- nameP-7omeniu- si$eP-3(-MKOtdM
KOtrM
KtrM
KtdMKbM7omnulO7oamna:KObMKOtdM
KtdMKinput tHpeP-te0t- nameP-Jume- si$eP-4(-MKOtdM
KOtrM
KtrM
KtdMKbM>unctia:KObMKOtdM
KtdMKinput tHpeP-te0t- nameP->unctia- si$eP-4(-MKOtdM
KOtrM
KtrM
KtdMKbM#ras:KObMKOtdM
KtdMKinput tHpeP-te0t-nameP-#ras-si$eP-(-MKOtdM
KOtrM
KtrM
KtdMKbMNudet:KObMKOtdM
KtdM
Kselect nameP-Nudet-M
KoptionM:lbaKOoptionM
KoptionM:radKOoptionM
KoptionM:r/esKOoptionM
KoptionM@acauKOoptionM
KoptionM@i,orKOoptionM
KoptionM@istrita4JasaudKOoptionM
CCCCCCCCCC
KoptionMEranceaKOoptionM
KOselectM
KOtdM
KOtrM
KtrM
KtdMKbM&elefon:KObMKOtdM
KtdMKinput tHpeP-te0t- nameP-&elefon- si$eP-(-MKOtdM
5!
KOtrM
KtrM
KtdMKbM=4mail:KObMKOtdM
KtdMKinput tHpeP-te0t- nameP-=4mail- si$eP-(-MKOtdM
KOtrM
KtrM
KtdMKbM7oriti informatii suplimentare despre:KObMKOtdM
KtdM
Kselect nameP-'arca-M
KoptionM:udi :KOoptionM
KoptionM:udi :3KOoptionM
KoptionM:udi &&KOoptionM
KoptionM>iat PuntoKOoptionM
KoptionM>iat 2tiloKOoptionM
KoptionM>ord >ocusKOoptionM
KoptionM>ord 'ondeoKOoptionM
KoptionMJissan 'icraKOoptionM
KoptionMJissan PatrolKOoptionM
KOselectM
KOtdM
KOtrM
KOtableM
K,rM
KcenterM
K,M7ate despre na1i/atorKO,M
KOcenterM
Ktable borderP-(-M
KtrM
KtdMJa1i/ator:KOtdM
KtdMKinput tHpeP-te0t- nameP-&ip- si$eP-(- readonlHMKOtdM
KOtrM
KtrM
KtdMEersiune na1i/ator :KOtdM
KtdMKinput tHpeP-te0t- nameP-Eersiune- si$eP-3(- readonlHMKOtdM
KOtrM
KtrM
KtdMPlatforma:KOtdM
KtdMKinput tHpeP-te0t- nameP-Platforma- si$eP-11- readonlHMKOtdM
8(
KOtrM
KtdMRe$olutia monitorului este :KOtdM
KtdMKinput tHpeP-te0t- nameP-Re$olutie- si$eP-11- readonlHMKOtdM
KOtrM
KOtableM
KcenterM
Kinput tHpeP-submit- 1alueP-&rimite formular L-M
KOcenterM
KOformM
Kscript lan/ua/eP-Na1a2cript-M
if 8na1i/ator.appJame PP Y'icrosoft Internet =0plorerY9Q
1erJumI= 89 T
Relse Q
1erJum#t 89 T
R
document.forml.&ip.1aluePna1JameT
document.forml.Eersiune.1aluePbrJumT
document.forml.Platforma.1aluePna1i/ator.platformT
document.forml.Re$olutie.1aluePscreen.+idt,Z- 0 -Zscreen.,ei/,tT
KOscriptM
KObodHM
KO,tmlM
In partea finala a codului sursa se poate obser1a codul scris in limbaDul Na1a2cript; cod
ce este util pentru obtinerea informatiilor referitoare la na1i/ator8*&ip-; *Eersiune-;
*Platforma-; *Re$olutie-9.
7in meniul de selectie a Dudetului au fost eliminate o serie de Dudete si inlocuite cu *C..-
pentru ca parcur/erea codului sursa sa nu de1ina plictisitoare.7aca se doreste; acestea pot fi
inlocuite cu alte optiuni 8 KoptionMC.KOoptionM9.
=0ecutarea unui clicA pe butonul *&rimite formular L - 1a a1ea ca efect trimiterea
continutului formularului la adresa specificata in marcaDul de start al formularului 8Kform
nameP-forml- met,odP-post- actionP-mailto:1autoaHa,oo.comX subDectP IJ>#R':&II
EIbI&:&#R- enctHpeP-te0tOplain-M9.
Pentru ima/inile din pa/ina <eb *1an$ari.,tml- se pot utili$a miniaturi pentru a se reduce
timpul de incarcare a pa/inii.

81
%naliza site4!l!i si realizarea stadi!l!i final
In urma anali$ei facute acestui ultim stadiu; a discutiei cu beneficiarul si a faptului ca
firma si4a desc,is noi ma/a$ine in tara s4au stabilit urmatoarele:
modificarea structurii site4ului si introducerea unor noi pa/ini <eb 8*=c,ipa-;
*'a/a$ine-; *2pecificatii te,nice-; *Calcul pret-; *Contact ma/a$ine-9T
modificarea sc,emei de culori utili$ate.
2tructura acestui stadiu final se poate obser1a in continuare:
82
2e obser1a ca numarul de pa/ini <eb a crescut fata de stadiul anterior; iar structura site4
ului este mai lo/ica si ofera o utili$abilitate mult mai buna.
Pentru modificarea sc,emei de culori 8a culorilor utili$ate9 s4au modificat ima/inile
8utili$and editorul /rafic preferat9 si de asemenea fisierul care contine definitiile fololor de
stil; dupa cum se poate obser1a in continuare:
bodH Qmar/in4top: ( p0 T bacA/round4colorTS:=@4C:R
,1 Qcolor:SC>((((T te0t4ali/n: centerR
td Qcolor:S((((8(Tfont4+ei/,t:boldR
input Qcolor:S((((8(Tfont4+ei/,t:boldTfont4si$e:mediumR
a.tip1 : linAQcolor: S>>>>((Tfont4si$e: mediumTfont4familH: Eerdana; :rial; 2erifT
te0t4decoration: noneT font4+ei/,t:boldTborder: t,in solid S>>>>((R
a.tip1: 1isitedQcolor: S>>>>((Tfont4si$e: mediumTfont4familH: Eerdana; :rial; 2erifT
a.tip1: acti1eQcolor: S>>>>((Tfont4si$e: mediumTfont4familH: Eerdana; :rial; 2erifT
a.tip1: ,o1erQcolor: S((((((Tfont4si$e: mediumTfont4familH: Eerdana; :rial; 2erifT
te0t4decoration: underlineT font4+ei/,t:boldTborder: t,in none S>>>>((R
a.tip2: linAQcolor: S>>((((Tfont4si$e: smallTte0t4decoration: noneT font4+ei/,t:boldR
a.tip2: 1isitedQcolor: S>>((((Tfont4si$e: smallTte0t4decoration: noneT font4+ei/,t:boldR
a.tip2: acti1eQcolor: S>>((((Tfont4si$e: smallTte0t4decoration: noneT font4+ei/,t:boldR
a.tip2: ,o1erQcolor: S((((((Tfont4si$e: smallTte0t4decoration: underlineT font4
+ei/,t:boldR
2e obser1a in codul sursa anterior ca au fost adau/ate definitii pentru noi proprietati C22:
introducerea unei borduri pentru le/aturile care constituie meniul principal de
na1i/are4border: t,in solid S>>>>((T
Pagina de start
Ean$ari Contact Joutati
'a/a$ine 'arci Calcul
pret
'a/a$ine >ormular
8
=c,ipa
Le/aturi utile 7espre noi
utili$area unui font8corp de litera9 in/rosat8bold9 pentru te0tul le/aturilor din
meniul de na1i/are4font4+e/,t: boldT
definirea unui stil pentru elementul ,14,1 Qcolor:SC>((((Tte0t4ali/n: centerRT
definirea unui stil pentru elementul input8element al unui formular electronic94input
Qcolor:S((((8(T font4+ei/,t:boldT font4si$e: mediumRT
definirea unui stil pentru te0tul din celula unui tabel4td Q color:S((((8(T font4
+ei/,t:boldR.
=0ecutarea unui clicA cu mouse4ul pe le/atura *7espre noi- 1a a1ea ca efect afisarea
pa/inii <eb *despre.,tml-; pa/ina care contina informatii despre personalul firmei si al
ma/a$inelor.Pa/ina *despre.,tml- poate fi obser1ata in urmatoarea ima/ine:
Pagina pentr! 6(alc!l pret orientativ7(6calc!l."tml7)
:ceasta pa/ina <eb contine un formular electronic si utili$ea$a un pro/ram 8script9 scris
in limbaDul Na1ascript; pro/ram care permite calculul unui pret orientati1 al modelului
selectat:
+odificarea aspect!l!i paginii de start pentr! ocazii speciale
#ca$iile speciale pentru care este indicat sa se modifice spectul pa/inii de start8Home
page9sunt de obicei sarbatorile reli/ioase8Paste; Craciun9; precum si alte e1enimente cu
importanta deosebita8inceputul unui an; lansarea unor produse noi; dec,iderea unui ma/a$in
nou; C9.'odificarea pa/inii de start poate fi facuta prin introducerea unor ima/ini sau te0te
su/esti1e referitoare la un anumit e1eniment.In continuare se poate obser1a modificarea
pa/inii de start al site4ului pentru sarbatorile de iarna8s4au introdus ima/ini su/esti1e in pa/ina
de start9.
84
CONCLU.II
Lucrarea *#ptimi$area pa/inilor <eb- pre$inta intr4o maniera foarte accesibila si care
totodata nu face nici un moment de la partea pur stiintifica toate notiunile necesare
utili$atorilor de calculatoare care doresc sa cree$e si sa foloseasca pa/ini <eb.
Lucrarea este a0ata pe problematica optimi$arii acestora iar dupa pre$entarea
metodelor de te,nici e0trem de utile pri1itoare la prelucrarea si folosirea ima/inilor in pa/inile
<eb.
Lucrarea contine foarte multe e0emple practice; e0emple; care pot fi folosite de catre
orice utili$ator a1i$at prin modificarea unor parametri corespun$atori cu cerintele acestuia.
Cred ca lucrarea pre$inta un foarte inalt /rad de independenta; ea putand fi parcursa
de toti ce au cunostinte minime; dar fiind totodata e0trem de utila si specialistilor in domeniu.
Consider ca lucrarea repre$inta o necesitate stri/enta intr4o lume dominata de
informatie si de necesitatea utili$arii rapide a cunostintelor de operare prin intermediul
internetului.
Lucrarea de fata cred ca 1a raspunde de$ideratelor unei societati in sc,imbare care
incearca sa tina pasul cu cele mai moderne cerinte din lumea informaticii.
8"
BIBLIO/RA9IE
1.:cu Calin; :cu 'u/ur; *G,id %&'L-; =ditura )ni1ersitatii *Lucian @la/a-;
2ibiu; 2((1.
2.:cu Calin; :cu 'u/ur; *G,id ^'L-; =ditura )ni1ersitatii *Lucian @la/a-; 2ibiu;
2((1.
.:cu Calin; *#ptimi$area pa/inilor <eb-; =ditura Polirom; Iasi; 2((.
4.Nen 7e,aan; *'acromedia >las, '^ 2((4-; =ditura &eora; @ucuresti 2((4.
".:rdit, Ibane$; Jatalie bee; *%&'L :rtistrH-; %aHden @ooAs 1!!8.
3.PatricA LHnc,; 2ara %orton; *<eb 2tHle Guide-; Fale )ni1ersitH Press; 1!!!.
5.%aAon <ium Lie; @ert @os; *Cascadin/ 2tHle 2,eet : 7esi/nin/ for t,e <eb-;
:ddison 4<esleH; 1!!5.
8.WellH L.'urdocA; *'aster EI2):LLF %&'L 4 and ^%&'L 1-; No,n; <ileH U
2ons 2(((.
!.7ebora, 2.RaH; =ric N.RaH; *%&'L 4 >or 7ummies-; No,n; <ileH U 2ons; 2(((.
1(.@rHan Pfaffenber/er; @ill Warro+; *%&'L 4 @ible-; No,n; <ileH U 2ons; 2(((.
11.7icA #li1er; *2ams &eac, Fourself %tml 4 in 24 %ours-; 2ams; 1!!!.
12.7a1e &aHlor; *Creatin/ Cool %&'L 4 <eb Pa/es-; No,n; <ileH U 2ons; 2(((.
1.Lee :nne P,illips; *Practical %tml 4-;cue; 1!!!.
14.7ebora, 2.RaH; =ric N.RaH; *'asterin/ %tml 4.(-; 2H be0 1!!5.
1".C,ristop,er 2c,mitt; *7esi/nin/ C22 <eb Pa/es-; Je+ Riders Publis,in/; 2((.
13.Nennifer %iederst; *<eb 7esi/n in a Juts,el-; #YReillH U :ssociates; 2((1.
15.7a1id >lana/an; *Na1a2cript:&,e 7efiniti1e Guide-; #YReillH U :ssociates; 2((1.
18.Ian 2.Gra,am; *%&'L 4.( 2ourcebooA-; No,n; <ileH U 2ons; 1!!8.
83
85

Lucrare HTML Web - Pagini

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Lucrare HTML Web - Pagini

Hochgeladen von

Copyright:

Verfügbare Formate

CUPRINS

).5. I+tercaarea ima(i+ior5i+teraci+(6

Das könnte Ihnen auch gefallen