Crearea site-uri 2.doc

8/16/2019 Crearea site-uri 2.doc

1/177

Învăţământul profesional şi tehnic în domeniul TIC

Proiect cofinanţat din Fondul Social European în cadrul POS DRU 2007-2013

Beneficiar – Centrul Naţional de Dezvoltare a Învăţământului Profesional şi Tehnic

str. !iru "aret nr. #$%#&' sector #' Bucureşti%$#$#()' tel. $%*####)&' fa+. $%*#&,-/' vet0tvet.ro

CRERE S!"E-UR!#OR $E%

&aterial de în'(ţare ) partea !!

Do*eniul+ infor*atic(

Calificarea+ nali,t prora*ator .i'el 3 a'an,at

200/

mailto:[email protected]:[email protected]


2/177

U"OR+

Ooeanu eori a )ț Profesor 1rad didactic 2

COORDO."OR+

&R!. !O#E" C!O%.U - Profesor' 1rad didactic 2

CO.SU#".45+

!O. C6RS"E – e+!ert CND2PT

%R!E# C!O%.U – e+!ert CND2PT

.E# POPESCU – e+!ert CND2PT

D. S"RO!E – e+!ert CND2PT

3cest material a fost ela4orat 5n cadrul !roiectului Învăţământul profesional şi tehnic îndomeniul TIC, !roiect cofinanţat din 6ondul ocial 7uro!ean 5n cadrul P8 D9: &$$(%&$#*

2


3/177

Cuprin,I. Introducere...................................................................................................................................5

II. Resurse........................................................................................................................................9Tema 1. Structura site-urilor Web..............................................................................................10

Fişa de documentare 1.1 Elemente de con inutț .....................................................................10

Actiitatea de !n"#are 1.1.1. Elemente de con inut ale site-uluiț .....................................1$Fişa de documentare 1.2 %arcarea elementelor....................................................................25

Actiitatea de !n"#are 1.2.1. Ta&-uri 'tml.......................................................................((Actiitatea de !n"#are 1.2.2 Elemente de con inut ale unui document )T%*ț ................(+

Tema 2. *imba,e de scritare entru Web.................................................................................(

Fişa de documentare 2.1 - *imba,ul /aaScrit...................................................................(Actiitatea de !n"#are 2.1.1 o iuni de ba" ale limba,ului /aaScrit constante3ț

ariabile3 tiuri de date3 oeratori......................................................................................+(Actiitatea de !n"#are 2.1.2 Instruc iuni /aaScritț .........................................................++

Actiitatea de !n"#are 2.1.( Func ii /aaScritț ................................................................+5

Actiitatea de !n"#are 2.1.+ obiecte /aaScrit................................................................+

Fişa de documentare 2.2 *imba,ul 4)4................................................................................+$Actiitatea de !n"#are 2.2.1 o iuni de ba" ale limba,ului 4)4 constante3 ariabile3țtiuri de date3 oeratori......................................................................................................51

Tema (. tiliarea scriturilor !n cadrul site-urilor Web...........................................................52

Fişa de documentare ( - tiliarea scriturilor !n cadrul site-urilor Web............................52Actiitatea de !n"#are (.1.1 Scrituri /aaScrit 6 scrituri 4)4....................................59

Tema +. Inter7e eț ........................................................................................................................1Fişa de documentare +. Inter7e eț ............................................................................................1

Actiitatea de !n"#are +.1.1 Elemente de con inut ale unei a&ini 8ebț ...........................

Actiitatea de !n"#are +.1.2 Amlasarea elementelor !ntr-o a&in" 8eb.........................$Tema 5. ae de date entru site-uri Web.................................................................................9

Fişa de documentare 5.1 Tiuri de bae de date....................................................................9Actiitatea de !n"#are 5.1.1 ae de date entru Web....................................................$+

Actiitatea de !n"#are 5.1.2 :aracteristici bae de date...................................................$5

Fişa de documentare 5.2 :rearea baelor de date..................................................................$5Actiitatea de !n"#are 5.2.1 :rearea i utiliarea baelor de dateș ...................................;1

Actiitatea de !n"#are 5.2.2 Alica ii cu bae de dateț ......................................................;(Fişa de documentare 5.( 6 Sererul Aac'e..........................................................................;+

Actiitatea de !n"#are 5.(.1 Sererul Aac'e...................................................................9(

Actiitatea de !n"#are 5.(.2 Instalarea Sereru-lui Aac'e..............................................9+Fişa de documentare 5.+ 6 Intero&area i relucrarea baelor de dateș ................................102

Actiitatea de !n"#are 5.+.1 *imba,ul S


4/177

Fişa de documentare ;. *e&ea dreturilor de autor.............................................................1+1

Actiitatea de !n"#are ;.1 *e&ea dreturilor de autor....................................................1+(Tema 9. Testarea i alidarea site-urilor createș .......................................................................1+5

Fişa de documentare 9 6 Testarea i alidarea site-urilor createș .........................................1+5Actiitatea de !n"#are 9.1. Testarea şi alidarea site-urilor create.................................1+9

Tema 10 6 4ublicarea site-urilor Web......................................................................................150

Fişa de documentare 10 6 4ublicarea site-urilor Web.........................................................150Actiitatea de !n"#are 10.1.1 4ublicarea site-urilor Web...............................................15$

Actiitatea de !n"#are 10.1.2. Ac'ii ionare domeniuț ...................................................11Actiitatea de !n"#are 10.1.(. Stabilire &ad" site Web................................................12

Actiitatea de !n"#are 10.1.+ Trans7erul datelor e serer............................................1(

Actiitatea de !n"#are 10.1.5 Administrarea unui site Web............................................15III. >losar.....................................................................................................................................1$

I?. iblio&ra7ie............................................................................................................................1$+

+


5/177

! !ntroducere;aterialul de 5nvă are are rolul de a conduce elevul la do4ândirea com!eten ei


6/177

Co*petenţa 9Re:ultatul în'(ţ(rii

"e*e Ele*ente co*ponente

&.#.- 84iecte Aavacri!tCom!eten a &%ț

6ormateazăelementele decon inut ale site%țului cu a>utorulsoft=are%uluis!ecific

• Tema & – @im4a>e de scri!tare

!entru ?e4

• 6isa &.& – @im4a>ul P"P• 3ctivitatea de 5nvă areț

&.&.# No iuni de 4ază alețlim4a>ului P"P<constante' varia4ile' ti!uride date' o!eratori

• Tema * – :tilizarea scri!turilor 5ncadrul site%urilor ?e4

• 6i a * – :tilizareașscri!turilor 5n cadrul site%urilor ?e4

• 3ctivitatea de 5nvă are *.#ț

cri!turi Aavacri!t –scri!turi P"P

• Tema - – 2nterfe eț • 6i a - – 2nterfe eș ț

• 3ctivitatea de 5nvă are -.#ț7lemente de con inut alețunei !a1ini ?e4

• 3ctivitatea de 5nvă are -.&ț 3m!lasarea elementelor

5ntr%o !a1ină ?e4

• Tema , – Baze de date !entrusite%uri ?e4

• 6i a ,.# – Ti!uri de 4aze deșdate

• 3ctivitatea de 5nvă areț,.#.# Baze de date !entru?e4

• 3ctivitatea de 5nvă areț,.#.& Caracteristici ale4azelor de date

• 6i a ,.& – Crearea 4azelor șde date

• 3ctivitatea de 5nvă areț,.&.# Crearea i utilizareaș4azelor de date

• 3ctivitatea de 5nvă areț

,.&.& 3!lica ii cu 4aze dețdate


7/177



• 6i a ,.* – erverul 3!acheș

Com!eten a &%ț6ormateazăelementele de

con inut ale site%țului cu a>utorulsoft=are%ului

s!ecific

• Tema , – Baze de date!entru site%uri ?e4• 3ctivitatea de 5nvă areț,.*.# erverul 3!ache

• 3ctivitatea de 5nvă areț,.*.& instalarea serveru%lui 3!ache

• 6i a ,.- – 2ntero1area iș ș!relucrarea 4azelor de date

• 3ctivitatea de 5nvă areț,.-.# @im4a>ul @

• 3ctivitatea de 5nvă areț,.-.& Comenzi @

• 6i a ,., – 2nterfeţe deșacces. Drivere de acces la4aze de date

• 3ctivitatea de 5nvă areț

,.,.# 2nterfe e de acces laț4aze de date

• 3ctivitatea de 5nvă areț,.,.& Drivere de acces la4aze de date

• Tema ) – 3ccesarea 4azelor dedate 5n site%urile ?e4

• 6işa ) – 3ccesarea 4azelor de date 5n site%urile ?e4

• 3ctivitatea de 5nvă are ).#ț

3ccesarea 4azelor de date 5n site%urile ?e4

• 3ctivitatea de 5nvă are ).&ț:tilizarea 4azelor de date 5n site%urile ?e4

• Tema ( – Parta>area datelor • 6işa ( – Parta>area datelor

• 3ctivitatea de 5nvă are (.#ț

Parta>area dtelor • 3ctivitatea de 5nvă are (.&ț

$


8/177



Parta>area datelor dis!oni4ile !e ?e4

Com!eten a &%ț6ormatează

elementele decon inut ale site%țului cu a>utorulsoft=are%ului

s!ecific

• Tema / – @e1isla ie s!ecificăț • 6i a / – @e1ea dre!tului deșautor

• 3ctivitatea de 5nvă are /.#ț@e1ea dre!tului de autor

Com!eten a *%ț9ealizează

!u4licarea site%ului ?e4 creat

• Tema – Testarea i validareașsite%urilor create

• 6işa – Testarea ișvalidarea site%urilor create

• 3ctivitatea de 5nvă are .#țTestarea i validarea site%șurilor create

• Tema #$ – Pu4licarea site%urilor ?e4

• 6işa #$ – Pu4licarea site%urilor ?e4

• 3ctivitatea de 5nvă are #$.#țPu4licarea site%urilor ?e4

• 3ctivitatea de 5nvă are #$.&ț 3chizi ionare domeniuț

• 3ctivitatea de 5nvă are #$.*țta4ilire 1azdă site ?e4

3ctivitatea de 5nvă are #$.-țTransferul datelor !e server

3ctivitatea de 5nvă are #$.,ț 3dministrarea unui site?e4

34solvenţii nivelului * avansat' şcoală !ostliceală' s!ecialitatea nali,t ) prora*ator 'tre4uie să fie ca!a4ili să utilizeze tehnolo1iile informatice i ale comunicării !entrușconce!erea' !roiectarea' ela4orarea' testarea' im!lementarea i dezvoltarea sistemelor șinformatice' a !ro1ramelor i a documenta iei tehnice aferente.ș ț

;


9/177

!! Re,ur,ePrezentul material de 5nvă are cu!rinde diferite ti!uri de resurse care !ot fi folositeț

de elevi<

% 6i e de documentareș

% activită i de 5nvă areț ț

7levii !ot folosi atât materialul !rezent in forma !rintata cat i varianta echivalentașonline.

9


10/177

Tema 1. Structura site-urilor e!

Fi8a de docu*entare 11 Ele*ente de con inutț

Pentru a realiza un site sunt folosite o serie de tehnici cu a>utorul cărora !a1inile sunt

conce!ute' din !unct de vedere vizual' din !unct de vedere al or1anizării le1ăturilor şi alam!lasării conţinutului 5n !a1ini. Du!ă ce se sta4ileşte structura unui site este indicat săse realizeze o schiţă a 5ntre1ului site. e realizează a!oi o listă a elementelor 1raficecare vor fi incluse< ima1ini' formulare' fişiere multimedia' formulare' ta4ele' cadre'le1ături' 5nsoţite de indicaţii !rivind aşezarea lor 5n !a1ină.

8 metodă eficientă !entru a realiza schiţa site%ului o constituie 1raficul sau harta site%ului. e desenează câte un dre!tun1hi !entru fiecare !a1ină din site' s!ecificând 5ninteriorul său sco!ul şi o4iectivele !a1inii' elementele şi aran>area lor 5n !a1ină. eunesc a!oi dre!tun1hiurile !rin să1eţi !entru a s!ecifica traseele !e care le !oate!arcur1e utilizatorul. ă1eţile re!rezintă de fa!t le1ăturile dintre !a1ini. !re !a1ina

"ome tre4uie asi1urată o le1ătură cu ea din orice !a1ină a site%ului.

;odul cum sunt aran>ate elementele constitutive ale unei !a1ini ?e4< con inut' 1rafica'țle1ături' sistem de navi1are' elemente multimedia este definită de no iunea dețmachetare a unei !a1ini =e4.

8 !a1ina =e4 !oate sa fie sim!la sau 5m!ăr ită 5n


11/177

Pa1ina =e4 nu tre4uie să arate ca un 4loc masiv de te+t. 7ste indicată 5m!ăr ireațcon inutului 5n !ara1rafe' se!arate 5ntre ele i de titlu !rin s!a ii 1oale.ț ș ț

tilul de scriere felul fonturilor' dimensiunea' culorile' etc. tre4uie să fie similar !entrutoate !a1inile. 6onturile uzuale sunt 3923@ şi T2;7 N7? 98;3N

Con inutul unui sit =e4 %ț În construc ia unui site tre4uie acordată o aten ieț țdeose4ită con inutului' deoarece !e 4aza acestuia se dezvoltă structura site%ului iț șmachetarea !a1inii.

Princi!alul motiv !entru care oamenii accesează 2nternetul este căutarea de informa iiț 5ntr%un domeniu sau altul.

Pentru o mai 4ună or1anizare a site%ului i dezvoltarea unei structuri de navi1areșcores!unzătoare' con inutul site%ului va fi 5m!ăr it !e cate1orii şi su4cate1orii. @aț țrealizarea unui site com!le+' a!ar dificultă i 5n 5m!ăr irea con inutului 5n cate1orii clare iț ț ț ș

distincte' care sa fie u or de 5n eles de către cititori Titlurile acestor cate1orii !ot deveniș țetichete !entru 4utoanele sau hăr ile 1rafice utilizate !entru navi1are.ț

Erafica se folose te !entru 5m4unătă irea as!ectului unui site i cre tereaș ț ș șatractivită ii acestuia. 2ma1inile mai sunt folosite şi !entru su4linierea unui te+t sau alțmesa>ului transmis de o !a1ina =e4. 7ste indicat ca un site să con ină numai ima1inileța4solut necesare i care sunt valoroase.ș

Dimensiunile fi ierelor 1rafice tre4uie sa fie reduse la minimum !osi4il' fără a afectașcalitatea acestora' !entru a mic ora tim!ul de 5ncărcare al acestora.ș

Pentru reducerea tim!ul de 5ncărcare al fi ierelor 1rafice sunt folosite atri4uteleșG"72E"TG şi G?2DT"G alăturate etichetei G2;EG. În acest caz' 4ro=serul cunoa te cât deșmult s!a iu este ata at fiecărei ima1ini i 5nce!e 5ncărcarea te+tului imediat' 5n !aralelț ș șcu 5ncărcarea ima1inii res!ective' cititorii vor !utea să 5ncea!ă citirea te+tului fără săa te!te 5ncărcarea tuturor ima1inilor. În caz 5n care nu sunt folosite aceste o! iuniș ț4ro=serul va calcula mai 5ntâi dimensiunile ima1inii 5n com!ara ie cu celelalte elementeți a!oi va 5nce!e 5ncărcarea efectivă a ima1inii res!ective.ș

Cele mai folosite fi iere 1rafice şi care sunt acce!tate de toate 4ro=serele =e4 sunt


12/177

• se folose te o metoda de com!resie numită GlosslessG' deci nu se !ierde nici oșinforma ie' iar ima1inea o4 inută se !oate recom!rima din nouț ț

• se !ot reduce dimensiunile ima1inilor folosind mai !u ine culoriț• culoare din ima1ine !oate fi setata ca fiind i culoarea fundaluluitrans!arentă.ș• se !ot crea ima1ini animate' folosind com4ina ii de mai multe ima1ini E26ț

2ma1inile 5n format E26 se folosesc !entru o4 inerea unor elemente 1rafice ca


13/177

:n lo1o este un nume' un sim4ol sau o marcă 5nre1istrată a unei com!anii sauor1aniza ii. 8 ima1ine 4ine aleasă are un im!act mult mai !uternic decât cuvintele.ț@o1o se folose te !entru stimularea memoriei vizuale a audientei. :n lo1o tre4uie sa fieșsim!lu' unic şi u or de recunoscut.ș

:n lo1o !oate fi realizat 5n mai multe feluri<

• un sim!lu te+t

• ima1ine stilizata cu numele com!aniei res!ective• un te+t 5n >urul unei ima1ini• un sim4ol• com4ina ie a acestoraț

Prin folosirea iconurilor sim4oluri 1rafice se 5m4unătă e te as!ectul unei !a1iniț ș=e4. Cele mai cunoscute iconuri<

• să1e ile direc ionaleț ț

• sim4olul GcasaG !entru !a1ina ini ialăț• sim4olul Gcutie !o talaG !entru transmiterea de emailuriș• sim4olul GcarteG !entru 1uest4ooJ

Pentru a fi eficiente' iconurile tre4uie sa 5nde!linească anumite caracteristici<

• să folosească un desi1n sim!lu şi elocvent

• să ai4ă o dimensiune redusă a fi ieruluiș• !ozi ionarea 5n fiecare !a1ină sa rămână neschim4ataț• să fie u or de recunoscutș• să fie du4late de un sistem de meniuri alternativ le1ături te+t

@a ale1erea unui fundal se au 5n vedere următoarele<

• culoarea fundalului nu tre4uie să interfereze cu culoarea te+tului

• !entru te+t i fundal se folosesc culori contrastante' care sa !ermită citireașu oară a con inutuluiș ț

• ima1inile !entru fundal' tre4uie să fie fi iere E26 sau AP7E de dimensiuni mici'ș!entru a reduce tim!ul de 5ncărcare a !a1inii

• ima1inea folosită !entru fundal tre4uie sa fie 5n concordan ă' din !unct de vederețcromatic' cu as!ectul !a1inii =e4 şi restul ima1inilor

• nu este recomanda4ilă folosirea ima1inilor animate !entru fundal

Culoarea standard !e care un 4ro=ser o afi ează !entru fundal este 1ri.ș

1(


14/177

2ma1inile animate' se folosesc !entru a su4linia un mesa> sau !entru a da unim!act deose4it unei !a1ini =e4. Cu toate că anima iile atra1 cititorii' !a1ina =e4țtre4uie să atra1ă cititorii !rin con inutul ei 'nu !rin folosirea unor ima1ini animate viuțcolorate.

9estric ii im!use 5n folosirea ima1inilor animateutorul

4utoanelor de navi1are. ;eniul de navi1are este o re!rezentare 1rafica sau de ti! te+t acon inutului şi este 5ncor!orat 5n tema 1enerală a site%ului. ;eniul !rinci!al tre4uie sățfurnizeze trimiteri ra!ide i directe la sec iunile i informa iile dis!oni4ile d5ntr%un siteș ț ș ț=e4. @ocul de am!lasare a meniului !rinci!al este' de o4icei' 5n !artea stân1ă aecranului dar el mai !oate fi !lasat i 5n !artea drea!ta sau 5n !artea su!erioară aș!a1inii =e4. 7l tre4uie re!etat !e fiecare !a1ină e+act 5n acela i loc' !entru a nu derutașvizitatorii.

Cele mai des 5ntâlnite scheme de navi1are cu!rind <

• le1ături te+t

• hăr i 1raficeț• 4utoane de navi1are• meniuri ti! lista derulanta 1enerate cu Aavascri!t• !a1ini 1enerate dinamic• harta site%ului site ma!

Butoanele de navi1are dau atractivitate !a1inilor =e4. Pot fi folosite ca mi>loc denavi1are şi de către !ersoanele care au dezactivată o! iunea de 5ncărcare a ima1inilor.țButoanele de navi1are !ot fi create cu a>utorul editoarelor 1rafice.

1+


15/177

;eniurile ti! li,t( derulant( sunt realizate cu a>utorul lim4a>ului Aavascri!t saufolosind scri!turi CE2.

Princi!alele dezavanta>e<

• versiunile mai vechi de 4ro=sere nu su!ortă Aavascri!t• la folosirea scri!turilor CE2 tre4uie aleasă o 1azdă care dis!une de un server

care su!ortă scri!turile CE2

3vanta> <

• ocu!ă un s!a iu minim' nefiind afi ate toate variantele 5n acela i tim!. @aț ș șaccesare va a!are o listă cu toate o! iunile !osi4ile. 6iecare o! iune re!rezintă oț țle1ătură către o altă !a1ină sau sec iune a site%ului.ț

Pa1ini 1enerate dinamic re!rezintă o metodă de navi1are ce se folose te 5nșsiturile =e4 care dis!un de o 4ază de date. De e+em!lu' ma1azinele on%line !un ladis!ozi ia utilizatorilor o func ie de căutare. 3tunci când se dore te afi areaț ț ș șcaracteristicilor unui !rodus' utilizatorul va introduce cuvântul cheie aferent. 5n urmacăutării se va 1enera dinamic !a1ina =e4 cores!unzătoare !rodusului res!ectiv.

Princi!alul dezavanta> al acestei scheme de navi1are este fa!tul ca realizarea şi 5ntre inerea unui astfel de site sunt costisitoare. 5n !lus' este dificilă !romovarea cuța>utorul motoarelor de căutare deoarece acestea nu !ot urmări le1ăturile 1enerate

dinamic.

"arta site%ului site ;3P % tre4uie sa fie clară i lo1ică i să afi eze corectș ș șstructura site%ului. Poate fi realizată su4 formă de ta4el sau ar4ore de le1ături."arta este utilă şi atunci când se dore te căutarea ra!idă a unei informa ii sau a unuiș țsu4iect' fără a fi nevoie să se navi1heze !rin tot site%ul. 7ste necesară furnizarea 5nmeniul !rinci!al a unei le1ăturii directe către !a1ina =e4 care con ine harta site%ului.ț

Ta4elele sunt folosite !entru o machetare eficientă i !entru a face mai atractiveșdiversele elemente com!onente ale unei !a1ini =e4. Ta4elele !ermit 5m!ăr irea !a1iniiț 5n sec iuni i o !ozi ionarea !recisă a te+tului sau ima1inilor 5n interiorul !a1inii.ț ș ț

e !oate 5m!ăr i !a1ina 5n doua coloane' cu meniul de navi1are 5n stân1a şi con inutulț ț!ro!riu%zis 5n drea!ta' te+tul fiind aliniat la stân1a. e !ot crea mar1ini sau 4orduri dediferite dimensiuni i culori. e !oate 5nca!sula con inutul 5n celulele ta4elului !entru aș ț!ermite alinierea te+tului i limitarea lun1imii liniilor.ș

Cadrele !ermit afi area a două sau mai multe !a1ini =e4' 5n acela i tim!' !rinș ș 5m!ăr irea ecranului 5n mai multe sec iuni inde!endente.ț ț

3vanta>ele folosirii cadrelor<15


16/177

• Cadrele se !ot folosi atunci când con inutul site%ului se modifică frecvent.ț:n cadru va fi folosit !entru meniul de navi1are iar 5n celălalt cadru va a!arecon inutul !ro!riu%zis. @a modificarea sau actualizarea con inutului' este suficientț țsă se modifice numai un fi ier.ș

• Nu este necesară schim4area fiecărei !a1ini a site%ului !entru a actualizale1ăturile. 6olosirea cadrelor !ermite utilizatorilor sa alea1ă ce vor sa vadă.

Dezavanta>ele folosirii cadrelor • fle+i4ilitate limitată şi !osi4ila confuzie a cititorilor • a!ari ia 4ordurilor care reduc s!a iul afi at !e ecranț ț ș• 4ro=serele mai vechi nu recunosc siturile care con in cadreț• tim!ul de 5ncărcare al !a1inilor este mai mare

7+istă multe !ro1rame ce !ot fi folosite la crearea !a1inilor =e4. 7ditoarele de te+t suntcele mai sim!le editoare care !ermit crearea şi salvarea fişierelor fără coduri deformatare ascunse' care !ot afecta modul de afişare a unei !a1ini =e4 5n 4ro=sere.

7ditoarele s!ecializate "T;@ le !ermit utilizatorilor să creeze documente =e4 5ntr%unmod ra!id şi uşor. 3ceste !ro1rame 1enerează ele 5nsele acest cod 5n locul!ro1ramatorului' re!rezintă unelte e+celente !entru dezvoltatorii =e4 cu e+!erienţă.

Pentru editarea !a1inilor ?e4 i dezvoltarea site%urilor ?e4 e+istă o mare varietate deșlim4a>e' dar la 4aza oricărei !a1ini ?e4 este lim4a>ul "T;@.

Activitatea de învăţare 1.1.1. Elemente de con inut ale site-uluiț

Co*petenţa+ 6ormatează elementele de con inut ale sistemului cu a>utorul soft=are%luițs!ecific

Oiecti'ul9oiecti'e 'i:ate+

#a ,f;r itul ace,tei acti'it( i 'ei fi capail ,(+ș ț

% identifici diferitele elemente de con inut ale unui site =e4ț

% caracterizezi fiecare element de con inutț

% utilizezi elementele de con inutț

% or1anizezi diferite elemente de con inutț

Durata+ -$ minute

"ipul acti'it(ţii+ Reducere

1


17/177

Sue,tii+

% elevii vor lucra individual

Sarcina de lucru+

Citiţi cu atenţie te+tul următor. @a final realizaţi un rezumat care să conţină informa iițle1ate de elemente de con inut ale unui site =e4< te+t' ima1ini' sunet' filme' hăr i deț țima1ini' o4iecte ce con in anima ii i interactivitate' formulare' ta4ele' cadre' 4aze deț ț șdate' fi iere' le1ături. Pentru fiecare element se va notautorul cărora !a1inile suntconce!ute' din !unct de vedere vizual' din !unct de vedere al or1anizării le1ăturilor şi alam!lasării conţinutului 5n !a1ini. Du!ă ce se sta4ileşte structura unui site este indicat săse realizeze o schiţă a 5ntre1ului site. e realizează a!oi o listă a elementelor 1raficecare vor fi incluse< ima1ini' formulare' fişiere multimedia' formulare' ta4ele' cadre'le1ături' 5nsoţite de indicaţii !rivind aşezarea lor 5n !a1ină.

8 metodă eficientă !entru a realiza schiţa site%ului o constituie 1raficul sau harta site%ului. e desenează câte un dre!tun1hi !entru fiecare !a1ină din site' s!ecificând 5n

interiorul său sco!ul şi o4iectivele !a1inii' elementele şi aran>area lor 5n !a1ină. eunesc a!oi dre!tun1hiurile !rin să1eţi !entru a s!ecifica traseele !e care le !oate!arcur1e utilizatorul. ă1eţile re!rezintă de fa!t le1ăturile dintre !a1ini. !re !a1ina"ome tre4uie asi1urată o le1ătură cu ea din orice !a1ină a site%ului.

;odul cum sunt aran>ate elementele constitutive ale unei !a1ini ?e4< con inut' 1rafica'țle1ături' sistem de navi1are' elemente multimedia este definită de no iunea dețmachetare a unei !a1ini =e4.

8 !a1ina =e4 !oate sa fie sim!la sau 5m!ăr ită 5n


18/177

% fundal% anima iiț% hăr i 1raficeț% lo1o şi icon%uri

• le1ături• sistem de navi1are• elemente multimedia• cadre frames• ta4ele

Documentele care se citesc online tre4uie sa fie concise şi structurate !entru o scanarera!idă. 2nforma iile cele mai im!ortante tre4uiesc !use 5n !rimul !ara1raf' !entru cațcititorul să le 1ăsească cel mai re!ede.

Pa1ina =e4 nu tre4uie să arate ca un 4loc masiv de te+t. 7ste indicată 5m!ăr ireațcon inutului 5n !ara1rafe' se!arate 5ntre ele i de titlu !rin s!a ii 1oale.ț ș ț

tilul de scriere felul fonturilor' dimensiunea' culorile' etc. tre4uie să fie similar !entrutoate !a1inile. 6onturile uzuale sunt 3923@ şi T2;7 N7? 98;3N

Con inutul unui sit =e4 %ț În construc ia unui site tre4uie acordată o aten ieț țdeose4ită con inutului' deoarece !e 4aza acestuia se dezvoltă structura site%ului iț șmachetarea !a1inii.

Princi!alul motiv !entru care oamenii accesează 2nternetul este căutarea de informa iiț 5ntr%un domeniu sau altul.

Pentru o mai 4ună or1anizare a site%ului i dezvoltarea unei structuri de navi1areșcores!unzătoare' con inutul site%ului va fi 5m!ăr it !e cate1orii şi su4cate1orii. @aț țrealizarea unui site com!le+' a!ar dificultă i 5n 5m!ăr irea con inutului 5n cate1orii clare iț ț ț șdistincte' care sa fie u or de 5n eles de către cititori Titlurile acestor cate1orii !ot deveniș țetichete !entru 4utoanele sau hăr ile 1rafice utilizate !entru navi1are.ț

Erafica se folose te !entru 5m4unătă irea as!ectului unui site i cre tereaș ț ș șatractivită ii acestuia. 2ma1inile mai sunt folosite şi !entru su4linierea unui te+t sau alțmesa>ului transmis de o !a1ina =e4. 7ste indicat ca un site să con ină numai ima1inileța4solut necesare i care sunt valoroase.ș

Dimensiunile fi ierelor 1rafice tre4uie sa fie reduse la minimum !osi4il' fără a afectașcalitatea acestora' !entru a mic ora tim!ul de 5ncărcare al acestora.ș

Pentru reducerea tim!ul de 5ncărcare al fi ierelor 1rafice sunt folosite atri4uteleșG"72E"TG şi G?2DT"G alăturate etichetei G2;EG. În acest caz' 4ro=serul cunoa te cât deșmult s!a iu este ata at fiecărei ima1ini i 5nce!e 5ncărcarea te+tului imediat' 5n !aralelț ș șcu 5ncărcarea ima1inii res!ective' cititorii vor !utea să 5ncea!ă citirea te+tului fără săa te!te 5ncărcarea tuturor ima1inilor. În caz 5n care nu sunt folosite aceste o! iuniș ț4ro=serul va calcula mai 5ntâi dimensiunile ima1inii 5n com!ara ie cu celelalte elementeți a!oi va 5nce!e 5ncărcarea efectivă a ima1inii res!ective.ș

1;


19/177

Cele mai folosite fi iere 1rafice şi care sunt acce!tate de toate 4ro=serele =e4 sunt


20/177

ale ima1inii 1rafice se accesează o hi!erle1ătură către o altă !a1ină. 7le !ot fi realizate 5n format E26 sau AP7E. 5n ultimul tim!' sunt folosite ca metodă de navi1are deoarecese 5ncarcă mai re!ede decât un set de 4utoane de navi1are şi sunt mai atractive. "ăr ileț1rafice nu se vor folosi niciodată ca sin1ur mod de navi1are' datorita următoarelor <

• mul i utilizatori au dezactivată o! iunea G@oad ima1esG !entru a 5ncărca !a1inileț ț

mai re!ede

• se mai folosesc 5ncă 4ro=sere 4azate !e te+t i care nu 5ncarcă ima1inile 1raficeș• motoarele de căutare nu !ot urmări le1ăturile furnizate de o hartă 1rafică

:n lo1o este un nume' un sim4ol sau o marcă 5nre1istrată a unei com!anii sauor1aniza ii. 8 ima1ine 4ine aleasă are un im!act mult mai !uternic decât cuvintele.ț@o1o se folose te !entru stimularea memoriei vizuale a audientei. :n lo1o tre4uie sa fieșsim!lu' unic şi u or de recunoscut.ș

:n lo1o !oate fi realizat 5n mai multe feluri<

• un sim!lu te+t

• ima1ine stilizata cu numele com!aniei res!ective• un te+t 5n >urul unei ima1ini• un sim4ol• com4ina ie a acestoraț

Prin folosirea iconurilor sim4oluri 1rafice se 5m4unătă e te as!ectul unei !a1iniț ș=e4. Cele mai cunoscute iconuri<

• să1e ile direc ionaleț ț

• sim4olul GcasaG !entru !a1ina ini ialăț• sim4olul Gcutie !o talaG !entru transmiterea de emailuriș• sim4olul GcarteG !entru 1uest4ooJ

Pentru a fi eficiente' iconurile tre4uie sa 5nde!linească anumite caracteristici<• să folosească un desi1n sim!lu şi elocvent

• să ai4ă o dimensiune redusă a fi ieruluiș• !ozi ionarea 5n fiecare !a1ină sa rămână neschim4ataț• să fie u or de recunoscutș• să fie du4late de un sistem de meniuri alternativ le1ături te+t

@a ale1erea unui fundal se au 5n vedere următoarele<

• culoarea fundalului nu tre4uie să interfereze cu culoarea te+tului20


21/177

• !entru te+t i fundal se folosesc culori contrastante' care sa !ermită citireașu oară a con inutuluiș ț

• ima1inile !entru fundal' tre4uie să fie fi iere E26 sau AP7E de dimensiuni mici'ș!entru a reduce tim!ul de 5ncărcare a !a1inii

• ima1inea folosită !entru fundal tre4uie sa fie 5n concordan ă' din !unct de vederețcromatic' cu as!ectul !a1inii =e4 şi restul ima1inilor

• nu este recomanda4ilă folosirea ima1inilor animate !entru fundal

Culoarea standard !e care un 4ro=ser o afi ează !entru fundal este 1ri.ș

2ma1inile animate' se folosesc !entru a su4linia un mesa> sau !entru a da unim!act deose4it unei !a1ini =e4. Cu toate că anima iile atra1 cititorii' !a1ina =e4țtre4uie să atra1ă cititorii !rin con inutul ei 'nu !rin folosirea unor ima1ini animate viuțcolorate.

9estric ii im!use 5n folosirea ima1inilor animateutorul

4utoanelor de navi1are. ;eniul de navi1are este o re!rezentare 1rafica sau de ti! te+t acon inutului şi este 5ncor!orat 5n tema 1enerală a site%ului. ;eniul !rinci!al tre4uie sățfurnizeze trimiteri ra!ide i directe la sec iunile i informa iile dis!oni4ile d5ntr%un siteș ț ș ț=e4. @ocul de am!lasare a meniului !rinci!al este' de o4icei' 5n !artea stân1ă aecranului dar el mai !oate fi !lasat i 5n !artea drea!ta sau 5n !artea su!erioară aș!a1inii =e4. 7l tre4uie re!etat !e fiecare !a1ină e+act 5n acela i loc' !entru a nu derutașvizitatorii.

Cele mai des 5ntâlnite scheme de navi1are cu!rind <

• le1ături te+t

• hăr i 1raficeț• 4utoane de navi1are

21


22/177

• meniuri ti! lista derulanta 1enerate cu Aavascri!t• !a1ini 1enerate dinamic• harta site%ului site ma!

Butoanele de navi1are dau atractivitate !a1inilor =e4. Pot fi folosite ca mi>loc denavi1are şi de către !ersoanele care au dezactivată o! iunea de 5ncărcare a ima1inilor.țButoanele de navi1are !ot fi create cu a>utorul editoarelor 1rafice.

;eniurile ti! li,t( derulant( sunt realizate cu a>utorul lim4a>ului Aavascri!t saufolosind scri!turi CE2.

Princi!alele dezavanta>e<

• versiunile mai vechi de 4ro=sere nu su!ortă Aavascri!t

• la folosirea scri!turilor CE2 tre4uie aleasă o 1azdă care dis!une de un server care su!ortă scri!turile CE2

3vanta> <

• ocu!ă un s!a iu minim' nefiind afi ate toate variantele 5n acela i tim!. @aț ș șaccesare va a!are o listă cu toate o! iunile !osi4ile. 6iecare o! iune re!rezintă oț țle1ătură către o altă !a1ină sau sec iune a site%ului.ț

Pa1ini 1enerate dinamic re!rezintă o metodă de navi1are ce se folose te 5nș

siturile =e4 care dis!un de o 4ază de date. De e+em!lu' ma1azinele on%line !un ladis!ozi ia utilizatorilor o func ie de căutare. 3tunci când se dore te afi areaț ț ș șcaracteristicilor unui !rodus' utilizatorul va introduce cuvântul cheie aferent. 5n urmacăutării se va 1enera dinamic !a1ina =e4 cores!unzătoare !rodusului res!ectiv.

Princi!alul dezavanta> al acestei scheme de navi1are este fa!tul ca realizarea şi 5ntre inerea unui astfel de site sunt costisitoare. 5n !lus' este dificilă !romovarea cuța>utorul motoarelor de căutare deoarece acestea nu !ot urmări le1ăturile 1eneratedinamic.

"arta site%ului site ;3P % tre4uie sa fie clară i lo1ică i să afi eze corectș ș șstructura site%ului. Poate fi realizată su4 formă de ta4el sau ar4ore de le1ături."arta este utilă şi atunci când se dore te căutarea ra!idă a unei informa ii sau a unuiș țsu4iect' fără a fi nevoie să se navi1heze !rin tot site%ul. 7ste necesară furnizarea 5nmeniul !rinci!al a unei le1ăturii directe către !a1ina =e4 care con ine harta site%ului.ț

Ta4elele sunt folosite !entru o machetare eficientă i !entru a face mai atractiveșdiversele elemente com!onente ale unei !a1ini =e4. Ta4elele !ermit 5m!ăr irea !a1iniiț 5n sec iuni i o !ozi ionarea !recisă a te+tului sau ima1inilor 5n interiorul !a1inii.ț ș ț

e !oate 5m!ăr i !a1ina 5n doua coloane' cu meniul de navi1are 5n stân1a şi con inutulț ț

22


23/177


24/177

Fi8a de docu*entare 12 &arcarea ele*entelor8rice document "T;@ 5nce!e cu notaţia =>

Ta1%urile dintre aceste sim4oluri transmit comenzi către 4ro=ser !entru a afişa !a1ina 5ntr%un anumit mod. :nele 4locuri !rezintă delimitator de sfârşit de 4loc' 5n tim! ce!entru alte 4locuri acest delimitator este o!ţional sau chiar interzis.

Ta1%urile sunt de forma !ereche 5nce!ut%sfârşit<

Între marca>ele


25/177

:n font este caracterizat de următoarele atri4ute<

• culoare sta4ilită !rin atri4utul color M

• ti!ul sau stilul sta4ilit !rin atri4utul faceM• mărimea definită !rin atri4utul sizeM• mărimea 5n !uncte ti!o1rafice sta4ilită !rin atri4utul point-sizeM• 1rosime definită !rin atri4utul weiht

.

Culoarea se o4 ine din amestecul a celor trei culori fundamentale< roşu' verde şițal4astru. !ecificarea culorii se !oate face<

• Prin nume de culoare. unt dis!oni4ile cel !uţin #) nume de culori< aua' 4lacJ'fuchsia' 1raH' 1reen lime' maroon' navH' olive' !ur!le' red' silver' teal' =hite şiHello=.

• Prin constructia G Orr1144 G unde r red' 1 1reen' sau 4 4lue sunt cifrehe+azecimale şi !ot lua valorile< $' #' &' *' -' ,' )' (' /' ' a' 3' 4' B' c' C' d' D' e'7' f' 6M

Culoarea se !recizează !rin intermediul unui atri4ut al etichetei K4odHL.Culoarea fondului !a1inii ?e4 se sta4ileşte cu atri4utul 41color al etichetei K4odHL'K4odH 41color culoareL. Culoarea te+tului se face !rin intermediul atri4utului te+t aletichetei K4odHL K4odH te+tculoareL.

8 etichetă !oate avea mai multe atri4ute

Keticheta atri4ut# valoare# atri4ut& valoare& atri4ut* valoare*L.

Po:iţionarea conţinutului !a1inii ?e4 faţă de mar1inile ferestrei 4ro=serului se !oateface cu a>utorul a două atri4ute ale etichetei K4odHL<

• leftmar1in sta4ileşte distanţa dintre mar1inea stân1a a ferestrei 4ro=serului şimar1inea stân1a a conţinutului !a1inii M

• to!mar1in sta4ileşte distanţa dintre mar1inea de sus a ferestrei 4ro=serului şimar1inea de sus a conţinutului !a1inii M

Stiluri !entru 4locurile de te+t

• Pentru ca un 4loc de te+t să a!ară 5n !a1ină evidenţiat cu caractere aldine'tre4uie inclus 5ntre delimitatorii K4L...KI4L

• Pentru ca un te+t să fie scris cu caractere mai mari cu o unitate decât celecurente acesta tre4uie inclus 5ntr%un 4loc delimitat de etichetele K4i1L...KI4i1L.

• Pentru ca un te+t să fie scris cu caractere mai mici cu o unitate decât celecurente acesta tre4uie inclus 5ntr%un 4loc delimitat de eticheteleKsmallL...KIsmallL.

25


26/177

• Pentru ca un te+t să fie scris cu caractere cursive acesta tre4uie inclus 5ntr%un4loc delimitat de etichetele KiL...KIiL

• Pentru a insera secvenţe de te+t aliniate ca indice su4%scri!t sau ca e+!onentsu!er%scri!t' aceste fra1mente tre4uie delimitate de etichetele Ksu4L...KIsu4L'res!ectiv Ksu!L...KIsu!L.

• Pentru a insera un 4loc de caractere su4liniate se utilizează etichetele KuL...KIuL

• Pentru a insera un 4loc de caractere secţionate se utilizează eticheteleKstriJeL...KIstriJeL sau KsL...KIsL.

"itlurile headers de ca!itole sau !ara1rafe !ot avea diferite dimensiuni. 7le !otfi introduce cu ta1%ul Kh+L te+t KIh+L unde + !oate lua valori din mul imea Q#'&'*'-',')RțKh*LS4loc de te+t SKIh*L.e acce!tă atri4utul ali1n de către aceste etichete

!entru alinierea titlului 4locului de te+t la stân1a modul !resta4ilit' 5n centru şi ladrea!ta.

Ta1%ul Kh#L scrie titlul cu caracterele cele mai mari şi cele mai 5n1roşate' iar ta1%ulKh)L foloseşte caracterele cele mai mici.

#iniile ori:ontale !ot fi inserate 5ntr%o !a1ină ?e4' utilizând eticheta KhrL' cuatri4utele<

• ali1n !ermite alinierea liniei orizontala. alorile !osi4ile sunt G left G 'G center G şi G

ri1htGM• =idth !ermite ale1erea lun1imii linieiM

• size !ermite ale1erea 1rosimii linieiM

• noshade când este !rezent defineşte o linie fără um4răM

• color !ermite definirea culorii liniei.

8 listă neordonat( este un 4loc de te+t delimitat de etichetele cores!ondenteKulL...KIulL listU neordonatU. 6iecare element al listei este iniţiat de eticheta KliL listitem. @ista va fi indentată faţă de restul !a1inii ?e4 şi fiecare element al listei 5nce!e!e un rând nou.

Ta1%urile KulL şi KliL !ot avea un atri4ut tH!e care sta4ileşte caracterul afişat 5n faţafiecărui element al listei. alorile !e care le !oate lua acest atri4ut sunt<

o GcircleG cerc

• GdiscG disc !lin valoarea !resta4ilitaM

GsuareG !atrat

2


27/177

8 listă ordonat( de elemente este un 4loc de te+t delimitat de etichetelecores!ondente KolL...KIolL listă ordonată. 6iecare element al listei este iniţiat deeticheta KliL list item. @ista va fi indentată faţă de restul !a1inii ?e4 şi fiecare elemental listei 5nce!e !e un rând nou.

Ta1%ul KolL !oate avea atri4utul tH!e care sta4ileşte ti!ul de caractere utilizat !entruordonarea listei. alorile !osi4ile sunt<

• ''3V !entru ordonare de ti!ul 3' B' C' D etc. litere mari

• ''aV !entru ordonare de ti!ul a' 4' c' d etc. litere mici

• ''2V !entru ordonare de ti!ul 2' 22' 222' 2 etc. cifre romane mari

• ''#V !entru ordonare de ti!ul #' &' *' - etc. cifre ara4e%o!ţiune !resta4ilitU

Ta1%ul KolL !oate avea atri4utul start care sta4ileşte valoarea de !lecare a secvenţeide ordonare

Pentru a insera un tael se utilizează eticheta ta4el este Kta4leL .... K I ta4leL.

:n ta4el este format din rânduri. Pentru a 5nce!e un rând 5ntr%un ta4el se folosescetichetele KtrL S K I tr L ta4le ro=. 9ândul este format din mai multe celule ce conţindate. 8 celulU de date se introduce cu eticheta KtdL ta4le data.

În mod !resta4ilit un ta4el nu are chenar. Pentru a adUu1a un chenar unui ta4el' seutilizeazU un atri4ut al etichetei Kta4leL numit 4order. 3cesta !oate sU nu fie urmat denici o valoare' caz 5n care 5n care ta4elul va avea un chenar de 1rosime !resta4ilitUe1alU cu # !i+el' valoare e1alU cu $ a 1rosimii semnificU a4senţa chenarului. 6olosireaetichetei de sfârşit K I trL este o!ţionalU. @Uţimea şi 5nUlţimea !ot fi sta4ilite !rinintermediul a doua atri4ute' =idth şi hei1ht ale etichetei Kta4leL.

alorile acestor atri4ute !ot fi<

• numere 5ntre1i !ozitive re!rezentând lăţimea res!ectiv 5nălţimea 5n !i+eli ata4eluluiM

• numere 5ntre1i 5ntre # şi #$$' urmate de semnul W' re!rezentând fracţiunea dinlăţimea şi 5nălţimea totala a !a1inii.

Xona din >urul unui ta4el !oate fi sta4ilită !rin valoarea atri4utului hs!ace a eticheteiKta4leL ce re!rezintU distanţa !e orizontalU dintre ima1ine şi te+t res!ectiv valoareaatri4utului vs!ace a etichetei Kta4leL ce re!rezintU distanţa !e verticalU dintre ima1ineşi te+t

"itlul unui ta4el !oate fi definit cu a>utorul etichetei Kca!tionL ' eticheta Kca!tionLtre4uie !lasatU 5n interiorul etichetelor Kta4leLSK I ta4leL' dar nu 5n interiorul etichetelor

KtrL sau KtdL . Titlul unui ta4el !oate fi aliniat cu a>utorul atri4utului ali1n al etichetei Kca!tionL astfel<

2$


28/177

• Y4ottomV su4 ta4el

• Yto!V deasu!ra ta4elului

• YleftV la stân1a ta4elului

• Yri1htV la drea!ta ta4elului

:n ta4el !oate avea i celule cu semnificaţia ca! de ta4el. 3ceste celule sunt introduseș 5n eticheta KthL. Toate atri4utele care !ot fi ataşate etichetei KtdL !ot fi' de asemenea'ataşate eticheteiKthL.Conţinutul celulelor definite cu KthL este scris cu caractere aldineşi centrat.

Pentru a insera o i*aine 5ntr%o !a1ină' se utilizează eticheta Kim1L de laGima1eGima1ine.

Pentru a !utea fi identifică ima1inea care va fi inserată' se utilizează un atri4ut aletichetei Kim1L şi anume src source. aloarea acestui atri4ut este adresa :9@ aima1inii. Dacă ima1inea se află 5n acelaşi director cu fişierul "T;@ care face referire laima1ine' atunci adresa :9@ a ima1inii este formată numai din numele ima1inii' inclusive+tensia.

3linierea unei ima1ini 5n !a1ina ?e4 se face !rin intermediul atri4utului Yali1nV aletichetei Kim1L' care ia valorile<

YleftV – aliniere la stân1a

Yri1htV – aliniere la drea!ta

Yto!V – aliniere deasu!ra .Partea de sus a ima1inii se aliniază cu !artea de sus ate+tului ce !recede ima1inea.

YmiddleV – aliniere la mi>loc

Y4ottomV sau Y4aselineV – aliniere la 4ază

3linierea te+tului 5n >urul unei ima1ini

e face cu atri4utele Yhs!aceV şi Yvs!aceV ale etichetei Kim1L care !recizează distanţa 5n !i+eli !e orizontală şi !e verticală' dintre ima1ine şi elementele din !a1ină.

2ma1inea !entru fondul unei !a1ini ?e4

e !oate folosi ima1inea !entru a sta4ili fondul unei !a1ini ?e4 cu a>utorul atri4utuluiY4acJ1roundV al etichetei K4odHL care ia ca valoare adresa :9@ a ima1inii.

@e1ăturile 5n !a1ina html se inserează cu a>utorul etichetei s!eciale KaL şi aatri4utului ZhrefV care ia ca valoare adresa :9@ a resursei solicitate.

2;


29/177


30/177

% valoare[m !oate lua & valori<

• 1et este valoare im!licitadatele din formular se adău1ă la adresa :9@s!ecificată 5n actionM

• !ost datele sunt e+!ediate se!aratM se folose te când sunt transmise cantită iș ț

mari de date .

Pentru a crea diferite 4utoane sau casete se folose te ta1%ul Kin!utLș

Kin!ut tH!e name value L

unde

tH!e !oate lua valorile următoare

te+tradio atri4utul checJed selectează la !rima activare a !a1inii 4utonulM

checJ4o+M

su4mit – trimite

reset – ter1e reseteazăMș

!ass=ord – !arola când scriem se văd asteri+%uri' dar la serverdestinatarse vedetotu i !arola decodificata.ș

name % este numele ata at casetei sau 4utonului . Nu re!rezintă con inutul 4utonuluiș țsau casetei

value % a!are scris !e 4uton sau con inutul castei sau 5n cazul 4utoanelor radioțnumele 4utoanelor care fac !arte din aceia i familie.con inutulMș ț

3lte atri4ute ale ta1%ului in!ut< %size % s!ecifică lă imea câm!ului de editareMț

%ma+len1ht % s!ecifică ma+imul de caractere.

Daca li!se te atri4utul tH!e' rezultă im!licit tH!e te+t.ș

@im4a>ul Aavacri!t va recunoa te 4utoanele du!ă name.ș

@iste de selec ie KselectL Ko!tion LS. KIselectLț

8 lista de selec ie !ermite ale1erea unuia sau mai multor elemente dintr%o listă finită.ț

3re & atri4ute im!ortante < name şi size.

7lementele dintr%o listă se introduc cu ta1%ul Ko!tionL.

Kselect name nume size numărL

Ko!tion value valoare[# selectedL 7lement[#(0


31/177

Ko!tion value valoare[& L 7lement[&.

Ko!tion value valoare[*L 7lement[*

KIselectL.

unde<

name % numele listei de selec ieț

size % este un număr 5ntre1 !ozitiv' !recizează cate elemente din lista suntvizi4ile la un moment dat

Ko!tion L este ta1%ul care include elementele listei. erver%ul !rime teș!erechea

selected % !ermite selectarea !resta4ilita a unui element al listei

@ista de selec ie cu selec ii multi!le % are aceia i sinta+a cu lista de selec ie descrisăț ț ș țmai sus' dar 5n !lus are atri4utul multi!le 5n ta1%ul select.

Câm!uri de editare multi!le % e fac cu ta1%ul Kte+tarea L

Kte+tarea liste de atri4uteL te+t KIte+tareaL

Din lista de atri4ute enumerăm<

cols nr de caractere afişate 5ntr%o linie'

ro=s nr de linii afi ate simultan'șname !ermite ata area unui nume'ș

=ra! care determina com!ortamentul câm!ului de editare fata de sfâr itul de linie.ș 3tri4utul !oate lua valorile< off' hard' soft..

Cadrele ne !ermit să definim 5n fereastra 4ro=serului su4ferstre 5n care să fie 5ncărcate documente "T;@ diferite. 6erestrele sunt definite 5ntr%un fişier "T;@ s!ecial ' 5n care 4locul K4odHL...KI4odHL este 5nlocuit de 4locul KframesetL...KIframesetL. În

interiorul acestui 4loc' fiecare cadru este introdus !rin eticheta KframeL.

:n atri4ut o4li1atoriu al etichetei KframeL este src' care !rimeşte ca valoare adresa:9@ a documentului "T;@ care va fi 5ncărcat 5n acel frame. Definirea cadrelor se face!rin 5m!ărţirea ferestrelor şi a su4ferestrelor 5n linii şi coloane<

(1


32/177

Activitatea de învăţare 1.2.1. Tag-uri tml



@a sfâr itul acestei activită i vei fi ca!a4il să


33/177

Activitatea de învăţare 1.2.2 Elemente de con inut ale unui document !T"#ț


Oiecti'ul9oiecti'e 'i:ate+@a sfâr itul acestei activită i vei fi ca!a4il săe folosite 5ntr%un document \;@

% Descrii fiecare element 5n !arte

% :tilizezi corect aceste elemente

Durata+ -, minute

"ipul acti'it(ţii+ Peer learnin1 – metoda 1ru!urilor de e+!erţi

Sue,tii+

% elevii se vor 5m!ărţi 5n , 1ru!e

Sarcina de lucru+

6iecare 1ru!ă tre4uie să o4ţină informaţii formatarea diferitelor elemente com!onenteale unui document html<

#. 6ont< culoare' ti!ul sau stilul' mărimea' 1rosime. Titluri.

&. @iste neordonate i liste ordonate' ta4eleș

*. 2ma1ini' le1ături

-. 6ormulare i cadreș

,. Butoane

6iecare 1ru!ă va urmări<

- 7ticheta cu a>utorul căreia se inserează elementul res!ectiv

- 3tri4utele ce !ot fi formatate la elementul res!ectiv

- ;odul de formatare

((


34/177

Pentru acest lucru elevii au la dis!oziţie #, minute. Du!ă ce au devenit Ze+!erţiV 5nsu4tema studiată' se reor1anizează 1ru!ele astfel 5ncât 5n 1ru!ele nou formate săe+iste cel !uţin o !ersoană din fiecare 1ru!ă iniţială.

Tim! de *$ minute elevii vor 5m!ărţi cu ceilalţi cole1i din 1ru!a nou formată cunoştinţeleacumulate la !asul anterior.

@a final fiecare elev va !rezenta cunoştinţele acumulate du!ă !arcur1erea celor douăfaze res!ectând cerin ele.ț

(+


35/177

Tema ". #im!a$e de scriptare pentru e!

Fi8a de docu*entare 21 - #i*aul a'aScript@im4a>ul Aavacri!t a fost realizat de firmele Netsca!e şi un şi a fost conce!ut ca unlim4a> care e+tinde !osi4ilită ile de lucru ale "T;%ului. @im4a>ul conlucrează cu "T;@%ulț

Caracteristici ale lim4a>ului Aavacri!t<

• 2n Aavacri!t se scriu secven e de !ro1ram numite scri!turi. ;a>oritateațacestor secven e sunt alcătuite din func ii' care răs!und anumitor ț țevenimente.

• 2n Aavacri!t N: se citesc şi N: se scriu fi iereMș

• Aavacri!t este un lim4a> inter!retat' adică 4ro=serul !reia o instruc iune ' oț

e+ecuta ' a!oi !reia o alta instruc iune o e+ecuta' s.a.m.d.ț

• Aavacri!t este un lim4a> care utilizează o4iecteM

• 2n Aavacri!t se face distinc ie 5ntre literele mari şi literele mici' adică estețcase sensitiveV. Y

• 6olose te din sinta+a lui C]] şi a lim4a>ului Aavaș

• Aavacri!t lucrează cu func ii definite de !ro1ramatori sau cuIşi func iiț ț!redefinite

Procesul de !ro1ramare 5n Aavacri!t !oate fi re!rezentat 1rafic astfel<

(5


36/177

7+ista trei modalităţi de a introduce 5ntr%un document "T;@ ' şi anume<

• cri!tul se scrie 5n headM .Kscri!t lan1ua1eVAavacri!tV L iKIscri!tLMș

• cri!tul se scrie 5n 4odHM .Kscri!t lan1ua1eVAavacri!tV L iKIscri!tLMș

• cri!tul a!are ca şi fi ier e+tern cu e+tensia >s' deci Ynume.>sVMș

Kscri!t src Ynume.>s VL iKIscri!tLș

Aavacri!t lucrează cu constante' date ' varia4ile' o!eratori' instruc iuni' func ii' o4iecte.ț ț

O con,tant( este o varia4ilă care !ăstrează aceeaşi valoare !e toată duratae+ecutării unui !ro1ram. Aavacri!t foloseşte constante 5ncor!orate !entru a re!rezentavalori folosite de o!eraţiile matematice uzuale. 7le !ot fi accesate !rin intermediul

o4iectului math.

Constantele definite de utilizator sunt varia4ile !e care le defineşte !ro1ramatorul şi alecăror valori nu se !ot modifica. De o4icei' constantele sunt re!rezentate !rin cuvintecare 5nce! cu literă mare şi sunt definite la 5nce!utul !ro1ramului.

O 'ariail( este numele atri4uit unei locaţii din memoria calculatorului unde suntstocate datele. Numele unei varia4ile Aavacri!t este alcătuit din una sau mai multelitere' cifre sau liniuţe de su4liniere' 5nce!ând cu literă Aavacri!t diferenţiază

ma>usculele de minuscule.2n Aavacri!t e+istă următoarele ti!uri de date < ti! sirM ti! număr 5ntre1M număr 5ntre1 5n4aza #$' / sau #). 8 varia4ilă se !oate declara cu !articular YvarV' !oate !rimi oricevaloare' nu se declara ti!ul ei.

Operatorii sunt sim4oluri sau identificatori care re!rezintă o modalitate 5n care!oate fi evaluată sau mani!ulată o com4inaţie de e+!resii.

8!eratori aritmetici sunt< semnul !lus ] care adună două valori' semnul – care scade

o valoare din altă valoare' asteriscul ^ care 5nmulţeşte două valori şi semnul slah Icare 5m!arte o valoare la altă valoare' ]] !entru incrementarea şi –– !entrudecrementarea unei valori cu #. 8!eratorul modulo este sim4olizat !rin semnul !rocentW şi este restul rămas du!ă 5m!ărţirea !rimului o!erand la al doilea.]' %' ^ I' W

8!eratori rela ionali < K' K' L' Lț

8!eratori de e1alitate !entru test e1alitate

_ !entru test ine1alitate

8!eratori lo1ici _ ne1area lo1ica

(


37/177

`` o!eratorul lo1ic YsauV este o!erator 4inar< daca cel !u ințunul din o!eranzi este true' rezulta true' altfel rezultatul este false

FF o!eratorul lo1ic Y iVș

8!eratorul 'b vir1ule

8!eratorul condi ionalț < e+!# e+!&


38/177

inta+a instrucţiunii for este următoarea<

fore#pr$ini ializareț M e#pr$condi ieț M e#pr$ciclu Q

instruc iuni ț

R

Cele trei e+!resii 5ncadrate de !aranteze sunt o!ţionale' dar dacă este omisă una dintreele' semnul !unct şi vir1ulă M tot este necesar.

În mod o4i nuit' e+!resia de iniţializare este folosită !entru a iniţializa şi chiar !entru așdeclara o varia4ilă care va fi folosită dre!t contor !entru ciclu. Du!ă aceea' e+!resiacondiţie tre4uie evaluată la true 5nainte de fiecare e+ecuţie a instrucţiunilor 5ncadrate deacolade. 7+!resia ciclu incrementează sau decrementează varia4ila folosită dre!tcontor !entru ciclu. Ca şi 5n cazul instrucţiunilor 26' ciclurile for !ot fi im4ricate. Numărulim4ricărilor nu este limitat.

Cu instrucţiunea forin se !oate e+ecuta câte un set de instrucţiuni !entru fiecare!ro!rietate d5ntr%un o4iect. e !oate folosi ciclul for..in cu orice o4iect Aavacri!t'indiferent dacă are sau nu !ro!rietăţi. inta+a este<

for proprietate 5n o%iect Q

instruc iuni ț

R

proprietate este un element literal de ti! şir 1enerat de Aavacri!t. Pentru fiecare ciclu'

lui proprietate i se atri4uie următorul nume de !ro!rietate conţinut 5n o%iect ' !ână cesunt folosite toate.

2nstrucţiunea ile acţionează ca un ciclu for' dar nu include 5n declaraţia eie+!resia de iniţializare sau de incrementare a varia4ilelor. aria4ilele tre4uie declarate 5nainte de a le incrementa sau a le decrementa 5n 4locul instrucţiuni. inta+a esteurmătoarea<

=hile e#pr$condi ieț Q

instruc iuni ț

R

Înce!ând cu Aavacri!t #.&' lim4a>ul oferă o instrucţiune doile' carefuncţionează e+act ca o instrucţiune =hile' dar nu verifică e+!resia condiţională decâtdu!ă !rima iteraţie. În felul acesta se 1arantează că scri!tul dintre acolade va fie+ecutat cel !uţin o dată. inta+a este următoarea<

do Qinstruc iuni ț

(;


39/177

R =hile e#pr$condi ieț M

Pentru ie irea din ieşirea din ciclu 5nainte de a fi a>uns la acolada finală adău1ă fieș4reaJ' fie continue 5n 4locul instruc iuni ț al ciclului. 2nstrucţiunea reaG 5ntreru!e definitivciclul' 5n vremea ce instrucţiunea continue sare !este instrucţiunile rămase din ciclulcurent' evaluează e+!resia ciclului şi 5nce!e următorul ciclu.

2nstrucţiunea lael !oate fi !lasată 5naintea oricărei structuri de control care !oateim4rica alte instrucţiuni' ceea ce !ermite ieşirea dintr%o instrucţiune condiţională saud5ntr%un ciclu la o locaţie s!ecifică de !ro1ram.

2nstrucţiunea it este folosită !entru a evita să s!ecificaţi 5n mod re!etatreferirea la o4iect' atunci când 5i accesaţi !ro!rietăţile sau metodele. 8rice !ro!rietatesau metodă d5ntr%un 4loc =ith !e care Aavacri!t nu o recunoaşte este asociată cu

o4iectul s!ecificat !entru acel 4loc. inta+a este următoarea<=ith o%iect Q

instruc iuni ț

R

o%iect s!ecifică referirea la o4iect care tre4uie folosită' dacă aceasta nu e+istă 5n 4loculinstruc iuni ț . 7ste foarte util atunci când folosiţi funcţii matematice avansate' dis!oni4iledoar !rin intermediul o4iectului ;ath.

2nstrucţiunea ,itc este folosită !entru a com!ara o valoare cu multe altele.Permite s!ecificarea unui set !resta4ilit de instrucţiuni care să fie e+ecutate 5n cazul 5ncare nu este 1ăsită o !otrivire. 2nstrucţiunea s=itch a fost introdusă 5n Aavacri!t #.&.

2nstrucţiunea reaG este folosită !entru a sto!a orice e+ecutare ulterioară acodului care a mai rămas 5n instrucţiunea s=itch. Dacă n%a fost folosită nici oinstrucţiune 4reaJ' codul rămas !entru fiecare caz va fi e+ecutat.

FU.C !! -Ț 8 funcţie Aavacri!t este un scri!t care este des!rins ca o secţiunese!arată de cod şi căreia i se atri4uie un nume. 6olosind numele res!ectiv' un alt scri!t!oate să a!eleze du!ă aceea e+ecutarea acelei secţiuni oricând şi de oricâte ori arenevoie.

Crearea funcţiilor

inta+a !entru declararea unei funcţii 5n Aavacri!t<

function nume$func ieț arument&...'arument' Q

instruc iuni ț

(9


40/177

R

Cuvântul cheie function este folosit !entru a s!ecifica un nume' nume$func ieț ' careserveşte ca identificator !entru setul de instrucţiuni cu!rins 5ntre acolade. Încadrate 5ntre !aranteze dre!te şi se!arate !rin vir1ule se află numele ar1umentelor' care conţintoate valorile !e care le !rimeşte o funcţie.

Declararea funcţiilor % 8 funcţie se !oate declara oriunde 5n interiorul unui 4loc Kscri!tL.in1ura restricţie este că nu se !oate declara o funcţie 5n interiorul unei alte funcţii sau 5n interiorul unei structuri de control. e recomandă ca funcţiile să fie declarate 5n 4loculKheadL al documentului "T;@

Când documentul "T;@ este 5ncărcat' funcţia este 5ncărcată 5n memorie şi Gţinută 5naşte!tareG. 7a nu este e+ecutată !ână când nu este a!elată cu sinta+a<

nume$func ieț arument&...'arument'

În acel moment' e+ecuţia !ro1ramului sare direct la !rima linie a funcţiei. Du!ă ce see+ecută liniile funcţiei' !ro1ramul revine la locul din care !lacase şi 5şi urmează cursul.

În lim4a>ul Aavacri!t sunt multe oiecte !redefinite ce dis!un de !ro!rietăţi şimetode s!ecifice.

Pentru a !utea folosi un o4iect' tre4uie ca acesta să fie mai 5ntâi creat cu a>utorulcuvântului cheie Zne=V. 3stfel !ot fi a!elate ulterior diferite !ro!rietăţi şi metode.

;odelul de o4iecte Aavacri!t este o ierarhie de conţinere' un o4iect conţine un alt

o4iect. Între o4iecte nu e+istă o le1ătură 1enealo1ică' deci' un o4iect nu !oate moşteni!ro!rietăţile şi metodele altui o4iect' şi nici nu se !oate su4clasifica un o4iect 5nierarhie<

Cele mai multe o4iecte sunt fie !artea de client' fie !e !artea de server' fie esenţiale.6uncţionalitate !e !artea de client 5ncor!orată 5n Aavacri!t se focalizează asu!ra aceea ce se !oate face cu !a1inile "T;@.

84iectul .a'iator re!rezintă soft=are%ul 4ro=ser care este utilizat. 6olosindacest o4iect se !ot re1ăsi informaţii des!re denumirea şi versiunea 4ro=serului' dar şi

alte informaţii' fiind recunoscut de Netsc!ae Navi1ator şi ;icrosoft 2nternet 7+!lorer.84iectul 5n sine are două o4iecte co!il< Plu1in şi ;imetH!e.

84iectul ?indo= este considerat o4iectul de nivelul cel mai 5nalt 5n ierarhiao4iectelor Aavacri!t !e !artea de client cu e+ce!ţia o4iectului navi1ator 5n sine.84iectul ?indo= nu are o etichetă "T;@ cores!ondentă' dar este creat atunci când sedeschide o nouă fereastră de 4ro=ser.

84iectul ?indo= conţine !atru o4iecte co!il' care formează 4aza !entru toate celelalte

o4iecte. 7le sunt<• Document

+0


41/177

• 6rame

• "istorH

• @ocation

84iectul Document este res!onsa4il !entru conţinutul efectiv afişat !e o !a1ină şi se!oate lucra cu el !entru a construi !a1ini "T;@ dinamice. În document sunt conţinutetoate elementele o4işnuite ale interfeţei cu utilizatorul :2 ale unei a!licaţii ?e4.

84iectul 6rame - Cadrele sunt o4iecte foarte im!ortante' folosite !entru 5m4unătăţirea!rezentării a!licaţiilor ?e4. 84iectul 6rame re!rezintă un cadru dintr%o structură decadre. Într%o !rezentare de cadre multi!le' o4iectul ?indo= este !a1ina care conţinedefinirea KframesetL' 5n tim! ce celelalte !a1ini sunt considerate cadre 5n acest conte+t.

84iectul "istorH – este echivalentul listei istoric ' 5n Aavacri!t.

84iectul @ocation – con ine ori1inea !a1inii de unde !rovine con inutul unei !a1ini.ț ț

+1


42/177

Activitatea de învăţare 2.1.1 $o iuni de %a&ă ale lim%a'ului (ava)cri*t+ constante,țvaria%ile, ti*uri de date, o*eratori



@a sfâr itul acestei activită i vei fi ca!a4il săului 5n Aavacri!tș

% Define ti corect constante' varia4ile' ti!uri de date' o!eratori 5n Aavacri!tș

% 9ecuno ti constante' varia4ile' ti!uri de date' o!eratori 5n Aavacri!tș

% :tilizezi corect constante' varia4ile' ti!uri de date' o!eratori 5n Aavacri!t

Durata+ &, minute

"ipul acti'it(ţii+ Diara*a p(ianen

Sue,tii+

% elevii se !ot or1aniza 5n 1ru!e mici & – * elevi sau !ot lucra individual

Sarcina de lucru+ 6olosind surse diferite internet' manual' reviste de s!ecialitate'caietul de noti e etc o4 ine i informa ii des!re Aavacri!t i or1aniza i%le du!ă modelulț ț ț ț ș țurmător.

+2

/aaScri

Tiuri de

date

:aracteristici

%odalit" i deț

introducere a unui

scrit !ntr-undocument )T%*

@eratori

?ariabile


43/177

+(


44/177

Activitatea de învăţare 2.1.2 nstruc iuni (ava)cri*tț





45/177

S$!"C@

Activitatea de învăţare 2.1. unc ii (ava)cri*tț



@a sfâr itul acestei activită i vei fi ca!a4il săului 5n Aavacri!tș

% 9ecuno ti o func ie Aavacri!tș ț

% :tilizezi corect func ii Aavacri!tț

Durata+ &, minute

"ipul acti'it(ţii+ Diara*a p(ianen

Sue,tii+

% elevii se !ot or1aniza 5n 1ru!e mici & – * elevi sau !ot lucra individual

Sarcina de lucru+ 6olosind surse diferite internet' manual' reviste de s!ecialitate'

caietul de noti e etc o4 ine i informa ii des!re func ii Aavacri!t i or1aniza i%le du!ăț ț ț ț ț ș țmodelul următor.

+5

Func ii /aaScriț

=eclararea7unc iilor ț

=e7ini ieț

Sinta"

Actiarea unei

7unc iiț

Eemle de

7unc iiț/aaScrit


46/177

Activitatea de învăţare 2.1.0 %iecte (ava)cri*t


Oiecti'ul9oiecti'e 'i:ate+@a sfâr itul acestei activită i vei fi ca!a4il să


47/177

Fi8a de docu*entare 22 #i*aul P@P

()( % *perte#t & re processor ' este un lim4a> de scri!tin1 s!ecial realizat !entru adezvolta a!licaţii =e4' !rin inte1rarea codului P"P 5n documente "T;@. 7ste destinatscrierii ra!ide de !a1ini =e4 dinamice.

P"P !ermite furnizarea unui conţinut ?e4 dinamic' cu un conţinut ?e4 care semodifică automat de la o zi la alta sau chiar de la un minut la altul. P"P rulează !eserverul ?e4' nu 5n 4ro=serul ?e4' deci P"P !oate o4ţine accesul la fişiere' 4aze dedate şi alte resurse inaccesi4ile !ro1ramului Aavacri!t.

Codul P"P este delimitat de coduri de start şi de sfârşit ce !ermit intrarea şi ieşirea din

Gmodul P"PG.

KhtmlL

KheadL

KtitleL7+em!luKItitleL

KIheadL

K4odHL

K!h!

echo Gacesta este un scri!t P"P_GM

L

KI4odHL

KIhtmlL

P"P este e+ecutat !e server !e când Aavacri!t este e+ecutat !e calculatorului

clientului de 4ro=serul ?e4. Pentru un scri!t de !e un server' clientul !rime te doar șrezultatele scri!tului ce este rulat' fără a vedea codul din s!atele acestuia.

P"P este 5n !rinci!al a+at !e !artea de scri!tin1 ce rulează !e server' !utând realiza <colectarea de date de la formulare' 1enerarea de conţinut dinamic sau trimitere şi!rimire de cooJie%uri.

7+istă trei domenii !rinci!ale unde sunt folosite scri!turile P"P.

• cri!turi ce rulează !e server' fiind necesare < inter!retorul P"P' un server =e4 şi un 4ro=ser =e4. 7 nevoie ca serverul de =e4 să fie !ornit' cu o

cone+iune P"P instalată. e !oate accesa rezultatul !ro1ramelor P"P cu un4ro=ser !rin intermediul serverului de =e4.

+$


48/177

• cri!tin1 5n linie de comandă. e !oate face ca P"P să ruleze fără a fi nevoiede server şi de 4ro=ser' ci doar de inter!retorul P"P.

• crierea de a!licaţii ce rulează de !artea clientului 5n mod 1rafic E:2.

P"P%ul !ermite afişarea de ima1ine' fişiere PD6 şi chiar filmuleţe 6lash toate 1enerateinstant. e !oate de asemenea ca rezultatul să fie orice fişier te+t.

:na dintre cele mai !uternice şi im!ortante facilităţi 5n P"P este su!ortul său !entru o1amă lar1a de 4aze de date. crierea unei !a1ini de =e4 ce interac ionează cu o 4azățde date este sim!lă.

P"P are de asemenea su!ort !entru a conversa cu alte servicii folosind !rotocoale cumar fi @D3P' 2;3P' N;P' NNTP' P8P*' "TTP' C8; !e ?indo=s. e !oateinteracţiona 5ntre a!roa!e toate lim4a>ele de !ro1ramare ?e4. P"P are su!ort !entruinstanţierea o4iectelor Aava şi utilizarea lor 5ntr%un mod trans!arent ca o4iecte P"P.

P"P are ca!a4ilităţi !entru !rocesarea te+tului' de la P82\ 7+tins sau e+!resii

re1ulare Perl' !ână la !arsarea documentelor \;@. Pentru !arsarea şi accesareadocumentelor \;@' su!ortă standardele 3\ şi D8;.

7lemente de 4ază ale sinta+ei P"P

Când P"P inter!retează un fişier trece !rin te+tul acestuia !ână când 5ntâlneşte unuldin ta1%urile s!eciale care 5i s!un să !ornească inter!retarea te+tului ca fiind cod P"P'se e+ecută tot codul 5ntâlnit' !ână la 5ntâlnirea unui ta1 P"P de 5nchidere. 3ceasta!ermite 5n1lo4area codului P"P 5n interiorul codului "T;@< tot ceea ce este 5n afarata1%urilor P"P este lăsat nemodificat' 5n tim! ce tot ceea ce este 5n interior esteinter!retat ca fiind cod.

7+istă !atru cate1orii de ta1%uri care !ot fi folosite !entru a marca 4locurile de codP"P.

#.


49/177


50/177

L

Comentariul !e o si1ură linie' de fa!t realizează comentarea codului !ână la sfârşitulliniei curente sau !ână la terminarea 4locului curent P"P' oricare din aceste două cazuria!are !rimul.

P"P su!ortă o!t ti!uri !rimitive de date.

• Patru ti!uri scalare< 4oolean' inte1er' float numere 5n vir1ulă mo4ilă' saudou4leb' strin1

• Două ti!uri com!use< arraH' o4iect

• Două ti!uri s!eciale< resource' N:@@

Ti!ul unei varia4ile' de o4icei nu este sta4ilit de !ro1ramator' ci este decis la rulare de

P"P' 5n funcţie de conte+tul 5n care acea varia4ilă este folosită.

În P"P varia4ilele sunt re!rezentate folosind un semn dolar urmat de numele varia4ilei.Numele varia4ilelor sunt case%sensitive.

P"P furnizează un număr lar1 de varia4ile !redefinite. ;ulte din aceste varia4ile' nu !otfi documentate com!let deoarece sunt de!endente de serverul !e care rulează' deversiunea şi setarea acestuia !recum şi de alţi factori.

50


51/177

Activitatea de învăţare 2.2.1 $o iuni de %a&ă ale lim%a'ului !+ constante, varia%ile,țti*uri de date, o*eratori





52/177

"e*a 3 Utili:area ,cripturilor în cadrul ,ite-urilor $e

Fi8a de docu*entare 3 - Utili:area ,cripturilor în cadrul ,ite-urilor $ePentru a !utea insera şi utiliza un scri!t nu este a4solut necesară cunoaşterealim4a>ului Aavacri!t . 7+istă un număr foarte mare de scri!turi 1ata de utilizare' care!ot inserate cu uşurinţă 5n codul sursă al documentelor "T;@.

cri!turile Aavacri!t !ot fi incluse 5n !a1ina ?e4 5n două moduri<1 !rin intermediul etichetei


53/177

Pentru a !utea folosi corect un scri!t Aavacri!t tre4uie 5n elese elementele esen ialeț țcu care lucrează Aavacri!t' o4iectele şi evenimentele.

:n o4iect este un ti! de date' care reuneşte su4 aceeaşi denumire atât datele câtşi funcţiile care le !relucrează. Datele se numesc !ro!rietăţile o4iectului iar funcţiile se

numesc metodele o4iectului.

De e+em!lu un o4iect care să re!rezinte un ecuson va avea următoarele !ro!rietă i


54/177


55/177

KB8DL

K"# ali1nGcenterGLCrearea o4iectelorKI"#L

Înce!utul scri!tuluiK"9L

KC92PT lan1ua1eGAavacri!tGL

II Crearea a trei o4iecte noi

ionne= 7cusonGPo!G' G2onG' GDirectorG

miane= 7cusonG2lieG' G;ariaG' G7conomistGM

dorune= 7cusonGPo!escuG' GDoruG' G7conomistGM

II 3fisarea lor

ion.Print7cM

mia.Print7cM

doru.Print7cM

KIC92PTL

fâr itul scri!tuluiș

KIB8DL

KI"T;@L

Definiţia scri!tului este !lasată 5n antetul documentului "T;@' iar a!elul scri!tuluieste făcut 5n cor!ul documentului. În cadrul scri!tului a!ar două linii !recedate de şirulde caractere GIIG. 3cesta este modul 5n care se introduc comentariile 5n cadrulscri!turilor Aavacri!t.

7venimentele sunt un alt conce!t fundamental cu care lucrează Aavacri!t. :n

eveniment este o acţiune care survine la un moment dat şi 5n urma căreia estedeclanşată e+ecuţia unei anumite !ărţi din !ro1ram. De fiecare dată când vizitatorulface clicJ !e o le1ătură' când introduce un te+t sau chiar când trece cu mouse%uldeasu!ra unei zone a !a1inii' !oate să survină un eveniment la care scri!tulreacţionează 1enerând un răs!uns.

Ti!uri de evenimente cu care lucrează Aavacri!t<

E'eni*ent De,criere

on34ort 3!are când utilizatorul renunţă la 5ncărcarea uneiima1ini

55


56/177

onBlur 3!are când un o4iect din !a1ină !ierde focusul

onChan1e 3!are când un câm! de editare este modificat deutilizator când se introduce un te+t

onClicJ 3!are când utilizatorul face clicJ !e un element

on7rror 3!are când un document sau o ima1ine nu se 5ncarcăcorect

on6ocus 3!are când un element !rimeşte focusul

on@oad 3!are când o !a1ină sau o ima1ine 5şi termină 5ncărcarea

on;ouse8ver 3!are când cursorul mouse%ului se !lim4ă deasu!raunui element

on;ouse8ut 3!are când cursorul mouse%ului !ărăseşte elementul

onelect 3!are când utilizatorul selectează un te+t

onu4mit 3!are când este a!ăsat un 4uton de ti! u4mit

on:nload 3!are când utilizatorul !ărăseşte documentul sausesiunea curentă.

Prin intermediul Aavacri!t se !oate răs!unde unui mare număr de evenimente. 3cest lucru se realizează !rin crearea unei proceduri e'eni*ent.

Procedurile eveniment nu sunt definite cu a>utorul etichetei KC92PTL ' ele fiind

atri4ute ale celorlalte etichete.

Dacă !rocedura eveniment este mai e+tinsă' includerea ei 5n 5ntre1ime 5ntr%o etichetadevine ne!ractică. În acest caz' este mai avanta>os să construim o funcţie care sătrateze evenimentul.

6uncţia este definită 5n secţiunea K"73DL a documentului' i este a!elată 5n cor!ulșdocumentului ca !rocedură eveniment. De e+em!lu' să !resu!unem că am construit ofuncţie eveniment numită 7+!loreaza. 3ceasta !oate fi a!elată astfel<

K3 hrefGOcu!rinsG on;ouse8verGCitesteMGLConsultă cu!rinsulKI3L

În momentul când mouse%ul se află deasu!ra le1ăturii' funcţia este lansată 5n e+ecuţie.

5


57/177

;odul de e+ecuţie al scri!tului. cri!turile inte1rate 5n cadrul !a1inilor suntevaluate du!ă ce 5ncărcarea !a1inii s%a 5ncheiat dar 5naintea afişării acesteia. cri!turilestocate ca fişiere se!arate sunt evaluate 5naintea tuturor scri!turilor incluse 5n !a1ină.6uncţiile definite 5n cadrul scri!turilor nu sunt e+ecutate automat la 5ncărcarea !a1inilor ci a4ia atunci când acestea sunt a!elate' !rin eticheta KC92PTL sau !rintr%o!rocedură eveniment.

:n scri!t Aavacri!t 5ntr%o !a1ină ?e4 !oate fi inclus 5ntre etichetele "T;@ decomentariu<

K_% % comentariu % %L.

Deoarece e+istă 4ro=sere care nu recunosc şi nu !ot e+ecuta scri!turile Aavacri!t' 5nloc ca scri!tul să fie e+ecutat ' este afişat 5n !a1ină 5ntre1ul cod' lucru care nu este dedorit. Comentariile sunt i1norate de 4ro=ser' i deci includerea codului Aavacri!t 5ntreșetichetele de comentariu va duce la i1norarea acestei !ărţi a documentului. Bro=serele

care recunosc Aavacri!t vor identifica !rezenţa Aavacri!t vor e+ecuta scri!tul.

Pentru a elimina acest nea>uns !entru introducerea unui scri!t 5ntr%o !a1ină esterecomandată următoarea modalitate<

KC92PT lan1ua1eGAavacri!tGL

K_ % %

Cod Aavacri!t

II % %LKIC92PTL

cri!turile Aavacri!t se !ot folosi !entru a face !a1inile mai atractive şi a le 5m4unătăţi funcţionalitatea. Cu a>utorul scri!turilor Aava se !oate realiza<

• afişarea datei curente 5n !a1ină• deschiderea unei ferestre !o!%u!mesa>e a!ar 5ntr%o mică fereastră care se

5nchide atunci când e+ecutaţi o anumită acţiune' de o4icei clicJ !e un 4uton' sau!e un linJ'

• afişarea unui mesa> 5n 4ara de status a ferestrei 4ro=serului'• afişarea aleatoare a unor mesa>e 5n !a1ină citate sau ima1ini care să se

schim4e de fiecare dată când este accesată !a1ina – dând !a1inii varietate' fie 5n as!ect' fie' mai ales' 5n conţinut'

• ima1ini care 5şi schim4ă as!ectul la trecerea mouse%ului• validarea formularelor.

Pentru a 5m4unătă i func ionalitatea unei !a1ini' aceasta tre4uie să con ină formulare iț ț ț șsă !ermită validarea datelor introduse de utilizator 5n formular.

Du!ă com!letarea formularului informaţiile introduse vor fi su!use !rocesului devalidare realizat de un scri!t Aavacri!t. e verifică dacă toate câm!urile de editare au

5$


58/177

fost com!letate. Dacă se a!asă !e 4utonul u4mit 5nainte de a com!leta toatecâm!urile o4li1atorii' este transmis un mesa> de eroare 8 altă verificare este dacăutilizatorul a introdus date valide 5n formular.

:na dintre re1ulile !rinci!ale ale unei !a1ini ?e4 4une este sim!litatea' de aceea nueste 4ine să folosim scri!turi de care nu este nevoie' deoarece a!licaţiile com!le+e şi

de mari dimensiuni 5ncetinesc 5ncărcarea !a1inii unde sunt folosite

5;


59/177

cti'itatea de în'(ţare 311 Scripturi a'aScript ) ,cripturi P@P





60/177

Activitatea de învăţare .1.1 )cri*turi (ava)cri*t 3 scri*turi !





61/177


62/177

Tema '. Interfe eț

Fi8a de docu*entare L !nterfe eț

2nterfa a re!rezintă se!ara ia 5ntre & medii sau sisteme cu lim4a>e diferite. 9olulț ținterfe ei este de a traduce semnalele celor & sisteme !entru ca acestea să seț 5n elea1ă' făcând !osi4ilă interac iunea dintre ele.ț ț

2nterfe ele ?e4ț sunt interfe e de interac iune cu utilizatorul ce sunt accesate !rinț țintermediul ?e4%ului. 2nterfe ele =e4 definesc o cate1orie de interfe e 1rafice !rin careț țun utilizator de 2nternet !oate interac iona cu o !a1ină =e4.ț

9e1uli ce se urmăresc la realizarea unei interfe eț

• elementele im!ortante ale interfe ei tre4uie fie cât mai vizi4ileț

• tre4uie să e+iste consisten ă de la !a1ină la !a1ină !entru a reduce 5ncărcareațmemoriei i !entru a nu for a utilizatorul să se refamiliarizeze cu interfa a laș ț țfiecare schim4are de !a1ina

• tre4uie să se ofere feed4acJ !entru fiecare ac iune a utilizatorului !entru a%lț 5n tiin a !e acesta ca sistemul a !rimit comandaș ț

• utilizatorul tre4uie să !oată 1ăsi informa ia căutată re!ede i u or.ț ș ș• se recomandă să e+iste indicii !entru a facilita navi1a ia< linJ%uri 4ine descrise'ț

harta a site%ului' moduri evidente de a ie i din !a1ina' elemente care să arateș

utilizatorului rela ia !a1inii curente cu restul ierarhiei i acces u or la !a1inileț ș șvecine .• 2nterfa a tre4uie să fie cât mai !lăcut de vizualizatț• te+tul tre4uie să fie u or de citit.ș• se recomandă utilizarea unui lim4a> concis i sim!luș

8 interfa ă de interac iune cu utilizatorul tre4uie 5n !rimul rând să fie construită 5n func ieț ț țde utilizator' de ce a tea!tă să vadă.ș

:n formular este un ansam4lu de zone active alcătuit din mai multe ti!uri deelemente< 4utoane' casete de selecţie' câm!uri de editare' etc.' ce !ermit utilizatorilor să introducă efectiv informaţii. 3ceste informaţii sunt ulterior transmise serverului !ecare este 1ăzduită !a1ina dumneavoastră' unde vor !utea fi !relucrate.

8 sesiune cu o !a1ină ?e4 ce conţine un formular cu!rinde două eta!e<

:tilizatorul com!letează formularul şi' !rin a!ăsarea 4utonului de e+!ediere' trimiteserverului datele 5nscrise 5n formular.

8 a!licaţie dedicată de !e server un scri!t analizează informaţiile transmise şi' 5nfuncţie de confi1uraţia scri!tului' fie stochează datele 5ntr%o 4ază de date' fie letransmite la o adresă de mail indicată. Dacă este necesar' serverul !oatee+!edia şi un mesa> de răs!uns utilizatorului.

2

http://www.interfeteweb2.com/http://www.interfeteweb2.com/http://www.interfeteweb2.com/


63/177

e acordă im!ortan ă deose4ită la !lasarea formularului 5n !a1ină şi la asi1urareaț4unei lui funcţionări !recum i la 1estionarea şi !relucrarea informaţiilor !e careșvizitatorul le introduce !rin intermediul formularului.

tructura formularelor !oate varia' de la o sim!lă casetă de te+t !entru introducereaunui şir de caractere' !ână la un ansam4lu com!le+' cu multi!le secţiuni şi care oferă

facilităţi !uternice de transmitereI!relucrare a datelor. În interiorul formularului sunt incluse<

elementele de com!letat' 5n care vizitatorul urmează să introducă informaţiiun 4uton de e+!ediere su%mit ' la a!ăsarea căruia' datele sunt transmise către

server o!ţional' un 4uton de anulare reset, cancel ' !rin care utilizatorul !oate anula datele

5nscrise 5n formular :n formular !oate conţine mai multe casete de te+t câm!uri de editare 5n careutilizatorul este ru1at să introducă diferite informa ii.ț

:n formular !oate conţine un şir de 4utoane radio' !rin care se cere !ărereavizitatorului des!re o !a1ină ?e4.

Casetele de validare' se deose4esc de 4utoanele radio !rin fa!tul că se !ot selectamai multe o!ţiuni dintre cele !rezentate.

În cadrul unui formular se !ot introduce şi 4utoane !entru a iniţia anumite acţiuni 5nmomentul când utilizatorul face clicJ cu mouse%ul !e ele' lucru realizat cu scri!turiAavacri!t care să trateze aceste evenimente.

Butoanele !ot fi folosite !entru a valida informaţiile introduse 5n formular' !entru adeschide documente şi a iniţia diverse alte acţiuni din !artea 4ro=serului.

;eniurile !ermit definirea unui set e+tins de ac iuni i selectarea uneia dintre ele.ț șPentru a defini meniul unei a!lica ii tre4uie creată o 4ară de meniuri' un ansam4lu dețmeniuri derulante i !entru fiecare meniu derulant' un ansam4lu de o! iuni.ș ț

;eniul este o re!rezentare 1rafica sau de ti! te+t a con inutului i este adeseaț șincor!orat 5n tema 1enerala a sitului . ;eniul !rinci!al tre4uie să furnizeze trimiterira!ide i directe la sec iunile i informa iile dis!oni4ile d5ntr%un site =e4 . 7l va fi realizatș ț ș ț

5ntr%o formă !ractică i atractivă.ș

@ocul o4i nuit !entru !lasarea meniului !rinci!al este 5n !artea stân1ă a ecranului dar șel mai !oate fi !lasat i 5n !artea drea!tă sau 5n !artea su!erioară a !a1inii =e4.șec iunile meniului vor fi denumite astfel 5ncât să ofere o descriere concisă i su1estivăț șa !a1inilor =e4 care vor fi accesate. e recomandă folosirea de denumiri su1estive.

Bara de instrumente con ine o serie de 4utoane i meniuri derulante care !ermitț șe+ecutarea unor o!era ii s!ecifice.ț

(


64/177

@istele re!rezintă unele dintre cele mai o4işnuite elemente dintr%o !a1ină ?e4. 3cestea sunt deseori folosite !entru a !rezenta informaţiile 5n mod or1anizat' 5ntr%omanieră accesi4ilă şi uşor de !arcurs.

7le !ot fi de trei ti!uri<

liste ordonate marcate !rin numere sau litere'liste neordonate marcate !rin cratime' 4uline sau alte sim4oluriliste de definiţii' afişate fără nici un fel de marca>.

8 listă neordonată re!rezintă o colecţie de elemente 5nrudite' dis!use 5ntr%o ordineoarecare. :n e+em!lu ti!ic !entru o !a1ină ?e4 este o listă de linJ%uri s!re altedocumente. 6orme !articulare de liste neordonate+ lista de directoareB lista de meniuri

8 listă ordonată va fi indentată faţă de restul !a1inii ?e4 şi fiecare element al listei va 5nce!e !e o linie nouă. Diferenţa faţă de listele neordonate este aceea că 5n acest cazmarcarea elementelor se face !rin cifre' nu !rin sim4oluri.

tructura unui site =e4 !oate include+

• Pa1ina de introducere

• Pa1inile de !rodus serviciu

• 6ormularul de comandă

• Chestionarul

• Pa1ina de noutăţi

• Ne=sletterul

• Pa1ina 63

:n site ?e4 !oate avea i o !a1ină de intrare. Pa1ina de intrare 5n site !a1ina s!lashșare ca sco! identificarea ra!idă a o4iectului site%ului 5n tim! ce se 5ncarcă restul dedate. 3ceasta tre4uie să se 5ncarce ra!id' să ai4ă un im!act vizual !uternic şi săcomunice esenţialul des!re su4iectul site%ului sau com!ania căreia 5i a!arţine site%ul. 3ceasta !oate conţine elemente multimedia' sunet' 1rafică' animaţie com!le+ă. Pa1inas!lash !oate mări tim!ul de 5ncărcare a site%ului' şi de aceea' nu tre4uie să a4uzăm deutilizarea ei.

Pa1ina de start Paina @o*e conţine o serie de elemente cum ar fi<

• 2dentificarea firmei sau com!aniei căreia 5i a!arţine site%ul dacă este cazul

• Descrierea sco!ului site%ului

• Descrierea structurii site%ului. Pa1ina "ome are şi funcţia de cu!rins al site%ului

+


65/177

• ta4ilirea relaţiilor 5ntre secţiunile de nivel unu ale site%ului şi cele su4ordonate lor'!rin intermediul 4arelor de navi1are' 4utoanelor' hărţilor de ima1ini sau listelor dele1ături.

• 6urnizarea informaţiilor de contact.

Pa1inile din interior de nivel unu tre4uie să conţină o descriere succintă asu4iectului aco!erit !recum şi le1ături către !a1inile de nivel doi care detaliază fiecare!arte a su4iectului' resursele su!limentare fiind !lasate 5n !a1ini de nivelul trei. 8!a1ină de nivelul doi care oferă !e lân1ă te+t şi ima1ini e+!licative ale unui anumitenoţiuni !oate fi le1ată de !a1ini de nivel trei care conţin ima1inile. Când vizitatorul faceclicJ !e un anumit te+t aflat 5n !a1ina de nivel doi se deschide !a1ina de nivel trei cuima1inea e+!licativă. 3vanta>ul acestei a4ordări este descon1estionarea !a1inilor denivelul doi care cu!rind detalierea su4iectului.

@e1ăturile dintre !a1ini de!ind de structura site%ului. Pentru a realiza o navi1arelo1ică şi eficientă 5n cadrul site%ului instrumentele de navi1are tre4uie să fie !erfectada!tate modului 5n care sunt create le1ăturile dintre !a1ini şi să ofere indicii vizualeasu!ra funcţiei lor. 7ste recomandat ca instrumentele de navi1are să fie aceleaşi 5ntoate !a1inile. 8 4ară de navi1are este !lasată acolo unde vizitatorii sunt o4işnuiţi să ocaute< 5n !artea su!erioară a !a1inilor' 5n stân1a sau 5n drea!ta !a1inii.

Dacă site%ul este de dimensiuni mari este indicat să se folosească o !a1ină s!ecialăcare să re!rezinte harta site%ului şi să e+iste le1ătura către ea 5n 4ara !rinci!ală denavi1are din cadrul fiecărei !a1ini.

tructura unei !a1ini =e4 cu!rinde elementele care se re1ăsesc cel mai frecvent 5n conţinutul unei !a1ini =e4. 3cestea sunt<

• titlul !a1inii< a!are 5n 4ara de titlu a !ro1ramului de navi1are !e 2nternet utilizat şiserveşte la identificarea !a1inii şi a conţinutului acesteia şi !entru facilitarea căutăriiacesteia !e 2nternetM

• su4titlurile titlurile interne< servesc la structurarea lo1ică a conţinutului !a1inii 5nsecţiuni distincte facilitând !arcur1erea acesteia 5n ra!ort cu interesul celui care ovizualizeazăM

• conţinutul !a1inii< cu!rinde informaţiile !e care site%ul intenţionează să le transmită!u4licului vizat. Pentru !reze

Crearea site-uri 2.doc

Documents

Transcript of Crearea site-uri 2.doc