D EM

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

V IE ATI C R LE NST O

INTRODUCERE
V dorii s creai de la 0 propriul site web? Ai vzut c se fac angajri n rndul cunosctorilor de programare web? Acum avei o ans n plus, mulumit cursului Eurocor Design i programare Web.

Fie c dorii s transformai o pasiune n profesie, fie c abia acum nvai noiunile de baz n programare web, acest curs i propune s v nvee: modalitile optime de utilizare a limbajelor de programare (HTML, XML, XHTML, PHP). CSS ce sunt i cum se folosesc. despre bazele de date n MySQL i despre limbajul Java. folosirea Adobe Dreamweaver. grafic, dinamicitate i promovare n site-uri. nvai comod! Primii acas, la oficiul potal sau direct la birou pachetele de curs, pe care le parcurgei cnd vrei! Studiai fr stres, n confortul propriului cmin, n pauza de mas, n weekenduri, dup program, vara sau iarna... cnd i unde dorii! Putei pune rapid n practic noile cunotine, atrgnd un binemeritat succes! V vei bucura de o atenie deosebit! Beneficiai de sprijinul unui profesor personal, un specialist cu experien, care poate fi contactat prin pot sau online. Webdesignerii sunt specialiti care aparin nu doar domeniului IT, ci mai degrab departamentelor de creaie din diverse companii sau celor de marketing i publicitate. EUROCOR v ajut s devenii un specialist cutat de muli angajatori! Mult succes! LECIA DEMONSTRATIV v ajut s v familiarizai cu materialele i metoda de studiu EUROCOR. Din punctul de vedere al numrului de pagini, aceasta reprezint mai puin de jumtate din coninutul unui caiet de curs. V prezentm cteva seciuni teoretice, exemple, exerciii i un model de tem, selectate din module diferite, pentru a vedea exact cum sunt structurate caietele.

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

STRUCTURA LECIILOR Studiul eficient al cursului nostru este garantat de structura unitar a celor 16 module. Informaiile noi sunt prezentate ntr-un mod atractiv, iar procesul de memorare devine simplu i rapid! Caietele se parcurg uor, ntr-un mod relaxat, datorit semnelor grafice special concepute pentru a marca diverse uniti de coninut ale modulelor. Limbajul este accesibil, explicit, iar accentul este pus pe partea practic. Vei nva ceva util, valorificndu-v n acelai timp abilitile practice, dar i creativitatea. Cursul urmrete de-a lungul su un studiu de caz ale crui resurse le regsii ntr-un cont special creat.

PRIMIREA CURSULUI La Eurocor, cursanii aleg unde s primeasc pachetul de curs! Dvs. ce alegei? 1. Acas, la cutia potal (Cutia potal trebuie s aib dimensiunile de minimum 22x30x1 cm.). 2. La serviciu. 3. La oficiul potal de care aparinei (Adresa declarat la nscriere trebuie s fie cea din buletin).

CONTUL DE CURSANT Fiecare cursant are propriul cont pe site-ul www.eurocor.ro. Aici gsii informaii despre stadiul trimiterii pachetelor de curs sau plile efectuate i nregistrate. Din contul de cursant se pot accesa i aplicaiile TemeOnline sau PlataOnline.

ABSOLVIREA Odat cu expedierea ultimului pachet de curs, vei primi i testul de evaluare final. Calificativele obinute pot fi: foarte bine, bine i insuficient (n funcie de punctajul realizat). Odat promovat acest test, vei obine Certificatul de absolvire Eurocor.

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

Programa cursului Design i programare WEB

Modulul 1
Introducere n crearea website-urilor. Ce sunt website-urile? Cu ce se ocup webdesignerii? Organizarea unui proiect de webdesign: strategiile i paii generici de dezvoltare a unui website. Care sunt principalele limbaje de programare; cum au aprut website-urile? Browsere de internet i editoarele HTML

Modulul 7
Foi de stil n cascad (CSS). Cum definim CSS? Rolul CSS n website-uri. Exemple de CSS n website-uri

Modulul 2
Tipuri de website-uri; structura i ergonomia website-urilor. Pagini personale bloguri i promovarea blogurilor. Portal web. Catalog web. Magazin online. Site de banc. nvarea online. Biblioteca. Revista web. Cum s structurm un website? Diagrama unui website

Modulul 8
Dinamica website-urilor i interaciunea lor cu utilizatorii. Cum s dezvoltm o pagin web dinamic din punctul de vedere al dinamicitii sale. Cmpuri automate. Pagini interactive. CGI. Conceptul de clientside/server-side scripting. Despre tehnologia Flash. Editoare Flash. Sistem de gestiune a coninutului unui website

Modulul 3
Limbajul HTML. Ce este limbajul HTML? Tipuri de date HTML. Structura global a unui document HTML. Exemple HTML linii de cod. Exemple de website-uri bazate pe HTML

Modulul 9
PHP partea 1. Ce este limbajul PHP? Instalarea i configurarea. Informaii de referin despre limbaj. Funcii. Clase i obiecte

Modulul 4
XML i XHTML. Structura logic i fizic a XML. Elemente i atribute XML. Diferene dintre XHTML i HTML

Modulul 10
PHP partea a 2-a. Securitatea. Sesiuni de lucru. Cookies

Modulul 5
Editoare HTML. Ce este un editor HTML? Introducere n Adobe Dreamweaver. Cum putem dezvolta un website folosind Adobe Dreamweaver? Ce sunt template-urile i cum putem s le folosim cu ajutorul Adobe Dreamweaver? Adobe Dreamweaver tips & tricks. Editoare HTML gratuite.

Modulul 11
Programarea website-urilor n limbajul JAVA. Ce este limbajul JAVA? Apariia JAVA. Pagini programate n JAVA. Ce este JavaScript? Cum funcioneaz JavaScript. JavaScript n website-uri?

Modulul 6
Grafic i multimedia n website-uri. Estetica unui website; cromatica. Cum s nu arate un website de ce trebuie s ne ferim atunci cnd dezvoltm un website? Editoarele foto ca prim utilitar pentru website-uri (Corel Photo-Paint, Adobe Photoshop); ilustraiile, filmele i sunetul ntr-un website

Modulul 12
Baze de date. Utilizarea bazelor de date n contextul website-urilor. Interogarea bazelor de date MySQL n PHP i JAVA

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

Modulul 13
Securitatea i testarea website-urilor. Cum se testeaz un website? Securitatea n Microsoft Internet Explorer. Securitatea n Mozilla Firefox. Cum s dezvoltm un website din punctul de vedere al securitii?

Modulul 15
Web 2.0 i alte tendine de dezvoltare a website-urilor. Ce este Web 2.0? Care este viitorul website-urilor? Ct timp poate fi valabil un website? Tendine de dezvoltare a website-urilor

Modulul 14
Promovarea website-urilor i reclamele n website-uri. Ce este promovarea web? De ce este important s promovm un website? Cum s dezvoltm un website fiind contieni de la nceput de tehnicile de promovare? Reclamele n website-uri: beneficii, rol. Cum s poziionm reclamele pe website? Cum se creeaz un newsletter?

Modulul 16
Studii de caz de ce unele website-uri au succes. Studii privind website-uri cunoscute. Website-uri sub lup: de ce au sau nu succes? Exemple. Recapitularea cunotinelor sub o form aplicat

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

MODUL

EDITOARE HTML

Modul 5

Atunci cnd realizm un website sau editm fiierele unui website exist multe

modaliti prin care putem realiza aceste activiti. Probabil c ai auzit de foarte multe ori discutndu-se de editoare HTML sau de editoare web. Ne propunem n acest curs s punctm ce este acela un editor HTML, cu ce ne poate ajuta i care sunt cele mai bune produse din aceast categorie, care sunt costurile lor i, evident, pe care vi-l recomandm pentru a-l utiliza. Vom discuta n acest curs pe larg despre Adobe Dreamweaver, de departe cel mai popular editor HTML, ct i despre alte editoare HTML gratuite. V vom oferi dou astfel de alternative. Trebuie s privim un editor HTML ca pe un mediu unde putem dezvolta un website. Un editor HTML v permite s transformai mai rapid, mai facil i mai corect un design grafic ntr-un website sau dezvoltarea unui schelet complet nou pentru un website. Toate acestea le vom discuta pe larg n cele ce urmeaz, aplicndu-le punctual, alturi de Dreamweaver, pentru a v ajuta s nelegei la ce este bun un astfel de editor i cum v poate uura munca cu un website.

Fiecare modul ncepe cu o introducere n care sunt prezentate principalele aspecte ce vor fi studiate.

OBIECTIVE
n acest modul ne propunem: s nelegem ce este un editor HTML i care sunt funciile sale; s aflm ce este i la ce folosete Adobe Dreamweaver; s cunoatem care sunt principalele funcii Adobe Dreamweaver; s aplicm aceste funcii n practic i s realizm nite modificri n website-ul nostru; s descoperim cteva sfaturi i trucuri privind Adobe Dreamweaver; s nvm ce sunt acelea template-uri web i cum putem s le editm folosind un editor HTML; s studiem dou alternative pentru Adobe Dreamweaver, i anume dou editoare HTML gratuite.

Obiectivele pe care trebuie s le atingei prin parcurgerea fiecrui modul v ghideaz nvarea.

1. Ce este un editor HTML?

Dac ar fi s facem o analogie inedit, v-a propune s v imaginai c un editor HTML este o scen de teatru. Un editor HTML este un mediu de dezvoltare cu decoruri i modaliti prin care putem da natere website-ului nostru. Asemenea unei scene de teatru, un editor HTML dispune de decoruri, de actori, de lumini, de cortin i de foarte muli lucrtori, n spate: mainiti, regizori, stiliti amd. Toate acestea, transpuse din lumea spectacolului n lumea editoarelor HTML, au la final acelai scop realizarea unui livrabil n cazul nostru un website.
Design i programare web //// 1

(selecie din Modul 5, pagina 1)

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

Dinamica website-urilor i interaciunea lor cu utilizatorii

MODUL 8

4. CGI
Iniialele CGI vin de la Common Gateway Interface. CGI este un protocol standard care interfaeaz aplicaiile cu un server. Evident c tehnologia CGI este utilizat cel mai des n universul web i, implicit, serverele care utilizeaz CGI sunt serverele web.

Informaiile importante i definiiile au fost marcate special pentru a facilita nelegerea lor.

Un server care utilizeaz CGI va rspunde cererilor din partea clienilor. Cel mai ntlnit caz este scenariul clasic: Aplicaia (web browser: ex. Microsoft Internet Explorer) cere unui server o pagin web. Serverul (server web) rspunde oferind aplicaiei fiierele website-ului. V vei ntreba n ce fel ne poate ajuta pe noi CGI. Atunci cnd spunem CGI, trebuie s l privim ca pe o tehnologie complementar a unui website. Nu este nevoie s intervenim asupra sa n vreun fel sau s l configurm n vreun fel. Trebuie doar s fim contieni de existena sa i de rolul su acela de legtur dintre aplicaie (browser de internet) i serverul web. CGI n cteva cuvinte: Tehnologia CGI a fost lansat nc din 1993. CGI poate intermedia att schimbul de fiiere, ct i comenzi. Exist alternative la CGI: variantele lansate de Apache sau de Netscape, ct i versiunea SCGI (Simple Common Gateway Interface), WSGI sau FastCGI.

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

Aa cum am specificat mai sus, vom studia acum mai n amnunt tehnologiile client-side i server-side scripting. Aceste dou tehnologii au aceeai modalitate de lucru i presupun prezena unor script-uri pentru a funciona. Aceste script-uri trebuie s le privim ca nite instruciuni care sunt utilizate de website, mai exact de browserul de internet sau de serverul web, pentru a afia coninutul i website-ul ntr-un anume fel. Singura modalitate n care putem separa aceste script-uri se petrece prin natura celor dou, mai exact, unde sunt situate i de unde acioneaz: de la nivel de server sau de la nivel de browser. Ce fac aceste script-uri? Ei bine, rezultatul este unul extrem de simplu: schimb, n timp real, modul de afiare a coninutului n funcie de datele introduse sau solicitate de vizitatorul website-ului. Spre exemplu, client-side script-urile sunt scrise n limbaje ca JavaScript sau VBScript. De cele mai multe ori, client-side script-urile sunt incluse ca linii de cod n codul HTML (aceast procedur este denumit embedded scripting). De asemenea, script-urile pot fi coninute i de un fiier extern, aceast procedur fiind denumit external scripting.

Client-side script-urile funcioneaz n urmtorul fel: browserul de internet (clientul) acceseaz web-serverul care deine coninutul website-ului, descarc pagina HTML home, spre exemplu, i, atunci, script-urile incluse n aceast pagin intr n aciune i afieaz coninutul n funcie de cele necesare.
Design i programare web //// 5

(selecie din Modul 8, pagina 5)

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

Securitatea i testarea website-urilor

MODUL 13

securitatea software-ului

Un alt aspect important n securitatea sistemului este software-ul actual care reprezint sistemul. Software-ul poate avea bug-uri i bree de securitate care permit accesul chiar i fr o parol. Software-ul sistemului trebuie s fie actualizat (adus la zi) prin intermediul patch-urilor de securitate i actualizri. Web serverele sunt formate dintr-o suit de programe complicate care conin frecvent bug-uri, care pot, n anumite condiii, s permit hackerilor accesul la sistemul dvs., chiar dac acetia nu cunosc parolele de acces. Dac avei webhosting din partea unei companii specializate n aa ceva, atunci este responsabilitatea lor de a se asigura c software-ul este actualizat (dar ar trebui s verificai dac ei chiar fac acest lucru). Dac rulai propriul dvs. server, atunci trebuie s fii foarte ateni n ceea ce privete securizarea lui. Problemele de securitate pe website-uri apar, de cele mai multe ori, din cauza serverelor web pe care ruleaz. Uneori, aceste probleme sunt relativ minore, doar permind unui atacator s fac inactiv serverul dvs. pn cnd rezolvai problema. Cu toate acestea, aceste bree de securitate trebuie ndeprtate. Ele permit acces atacatorului la fiierele serverului dvs. Toate programele implicate n procesul acesta de acces i management al serverului pot influena ntr-un fel sau altul securitatea sistemului dvs. S considerm, spre exemplu, c accesai serverul prin consol ssh de la deprtare. Vei stoca parola, s spunem pe clientul dvs. de e-mail, i o vei introduce prin intermediul unei conexiuni de internet pe consola serverului de la deprtare. Poate v gndii c sunt doar cteva elemente de risc n acest caz. Ei bine, nu. Sunt foarte multe. Avem urmtoarele elemente: Sistemul de operare de pe computerul dvs. Clientul de mail de pe computerul dvs. Conexiunea la internet. Sistemul de operare de pe maina accesat prin consol. Toate aceste elemente i modul n care sunt ele configurate afecteaz securitatea informaiei n acest caz. Sistemele de operare trebuie protejate cu programe antivirus, conexiunea la internet i clientul de e-mail, la fel, protejate. S nu cdei n capcana de a gndi c un anume server este sigur doar pentru c se spune acest lucru sau pentru c este furnizat de un brand anume.
EXEMPLU

defeciunile software-ului

meninerea software-ului actualizat

Cuvintele cheie ajut la identificarea principalelor teme descrise n curs.

Unul dintre cele mai ameninate, sparte i atacate servere de web este Microsoft IIS.

Exerciiul 2

Considerai necesar existena unui program antivirus pe computerul unui webdesigner? Pentru c ntrebarea poate fi considerat retoric, v vom ruga s descrcai, pentru acest exerciiu, aplicaia Spybot Search&Destroy, un utilitar anti-spyware i anti-malware prezent n momentul de fa, de civa ani, n topurile de astfel de aplicaii. Aplicaia se poate descrca de la adresa http://www.safer-networking.org. Descrcai aplicaia i scanai cu aceasta ultima versiune a website-ului nostru de test. Utilizai astfel de aplicaii pentru toate proiectele dvs. web. Scanai-le cu regularitate!
Design i programare web //// 8

(selecie din Modul 13, pagina 7)

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

Grafic i multimedia n website-uri

MODUL 6

Studiai nainte alte proiecte similare cu al dvs.

Ca i n cazul oricrei opere de art, nu exist att loc pentru greeal, nu exist greeli predefinite, ci, mai degrab, greeala nceptorului i lipsa de inspiraie a creatorului. Pentru c suntei la nceput n manipularea culorilor, elementelor grafice, conceptelor grafice, este bine mai nti s studiai alte website-uri similare ca domeniu de activitate cu cel cruia trebuie s-i stabilii designul. Trebuie, evident, s v facei foarte bine temele nainte de a alege culori sau de a stabili ce elemente vei folosi n designul dvs.

Folosii imagini de calitate

n alt ordine de idei, trebuie s fii foarte ateni ce fel de ilustraii folosii n website-ul dvs.: imagini de produse, imagini pentru bannere, imagini pentru diferite elemente grafice (linii, footer etc.). Toate aceste imagini trebuie s fie nu neaprat de rezoluie ct mai nalt, ct de o mrime care s permit ncrcarea mai uoar pe pagin, altfel devenind suprtoare pentru vizitatori i determinndu-i n cele din urm s prseasc site-ul. S fie corecte i ct mai curate. Evitai s utilizai imagini realizate cu camere foto neperformante (de ex. telefon mobil), neclare, culori defecte (arse) etc. ncercai s oferii o atenie sporit imaginilor pe care le utilizai n proiectele dvs. Acesta este unul dintre principalele motive care fac un website s arate ieftin.
EXEMPLU

Mai jos, un exemplu de website care folosete imagini de calitate ndoielnic, ceea ce duce la un aspect nengrijit, urt i ieftin:

Exemplele ilustreaz diverse modele de website-uri sau secvene de cod explicate n seciunile teoretice.

Design i programare web //// 9

(selecie din Modul 6, pagina 8)

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

PHP (partea a II-a)

MODUL 10

EXEMPLU

Spre exemplu, s ne imaginm un forum. Pe un forum, utilizatorii pot posta mesaje care vor fi afiate ctre ali utilizatori. Ca tehnologii, avem nevoie de Javascript, pentru a posta aceste mesaje, i de HTML, pentru a le da o anumit form, pentru a le formata.

Exemplele trimit la situaii concrete din activitatea unui webdesigner.

Exist ns o problem n acest caz. Chiar dac este scenariul corect pentru a realiza acest lucru, pot aprea extrem de multe probleme de securitate. Trebuie s avem n vedere c printre vizitatorii acelui forum putem avea tot felul de persoane ru intenionate, hackeri sau entuziati n ale informaticii care doresc s exploateze diferite bree de securitate ale forumului. Unul dintre lucrurile duntoare pe care le pot face este s introduc Javascript n sursa PHP. Acest lucru poate avea mai multe rezultate. Poate spre exemplu s fie utilizat doar pentru a incomoda vizitatorii forumului prin generarea de mesaje infinite prin care vizitatorul este atenionat s nchid browserul sau s viziteze un alt website. Aceasta este versiunea simpl, cazul n care atacurile nu sunt ru intenionate. Pot exista ns atacuri extrem de duntoare, atacuri care vor introduce n ecuaie keyloggere sau care vor recupera userii i parolele de pe server sau din computerele vizitatorilor.

Cum s ne protejm de Cross Site Scripting?

La fel ca i n cazul SQL Injection, este destul de uor s ne protejm i mpotriva Cross Site Scripting. Pentru a face acest lucru, trebuie s ne folosim de o funcie a PHP, numit htmlentities_(). Aceast funcie pur i simplu va converti caracterele care au un neles n limbajul HTML ctre entitile lor corespunztoare. De exemplu, tag-urile HTML, dup cum am nvat n modulele anterioare, ncep cu un semn denumit mai mic ca, anume <. Folosind funcia PHP de mai sus, acest caracter va fi convertit n &lt;. Vom merge tot pe exemplul anterior, i anume cel cu forumul. Nicio problem pn aici, doar c stabilisem c dorim s le furnizm vizitatorilor posibilitatea de a formata coninutul forumului, implicit de a utiliza HTML pentru formatarea textului. Aplicnd procedura din paragraful anterior, din pcate, aceast posibilitate nu va mai exista. De aceea, trebuie s gsim o soluie alternativ. Vom folosi o particularitate care se numete bbcodes. Aceasta are o sintax foarte similar cu HTML i, n condiiile n care ai mai folosit HTML, nu este greu de utilizat. Un tag foarte uzual n bbcode este tag-ul URL.
EXEMPLU

S ne imaginm c cineva a introdus n cod: [url=http://www.eurocor.ro]Institut European[/url] Acesta va fi convertit de bbcodes n: <a href=http://www.eurocor.ro>Institut European</a> n acest fel ne putem proteja de XSS. Practic, vom vedea pe larg n partea de studiu de caz a acestui modul.
Design i programare web //// 10

(selecie din Modul 10, pagina 9)

10

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

PHP (partea a II-a)

MODUL 10

Studiu de caz
cerine noi client Vom presupune c firma productoare de pori din fier forjat i dorete noi funcii pe website. Aadar, acetia doresc o seciune nou i separat n website, cu urmtoarele particulariti: S fie accesibil din meniul orizontal sub forma unui buton nou. Numele su s fie Clieni. n cadrul acesteia, clienii companiei s aib posibilitatea de a se autentifica cu un utilizator i o parol pentru a ptrunde ntr-o seciune dedicat fiecruia. Posibilitatea de a crea un utilizator i o parol pentru fiecare client al companiei. Utilizatorul i parola s conduc clienii ctre o seciune dedicat fiecruia. Realizarea unui cont de client. Includerea n pagina client1 a unei liste Microsoft Excel de preuri, produse i servicii. Acestea sunt cerinele primite din partea companiei productoare de pori din fier forjat. La aceste cerine mai adugm i noi cteva: Realizarea materialelor necesare (lista Excel). Implementarea tuturor punctelor de mai sus n PHP pe structura actual a website-ului. Simulare de atac de securitate PHP. Identificarea breelor de securitate PHP n proiectul nostru. Rezolvarea breelor.

Realizarea materialelor necesare

Vom purcede la realizarea unui fiier separat HTML, pornind de la un fiier Excel. Presupunem c clientul ne-a furnizat aceste documente Excel pentru a-l include n zona client1. Astfel, ne propunem n cele ce urmeaz s convertim acest document n format HTML, crend un fiier HTML separat. Aadar, vom porni de la documentul Excel:

Print screen-urile i studiul de caz prezentate n acest curs v faciliteaz nsuirea cunotinelor.

Design i programare web //// 26

(selecie din Modul 10, pagina 26)

11

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

Web 2.0 i alte tendine de dezvoltare a website-urilor

MODUL 15

Materia este uor de neles datorit tabelelor, schemelor i imaginilor relevante.

Comunitile online i-au pus amprenta i asupra mediului de afaceri. Astfel, numeroi oameni de afaceri apeleaz la acest mijloc de comunicare, ale crui beneficii sunt multiple, pentru a identifica noi oportuniti care s le permit s i dezvolte business-ul. Companiile au nceput s i creeze profile pe reelele sociale pentru a ajunge mult mai uor la public i pentru a interaciona cu acesta ntr-o manier flexibil, deschis, transparent. Mai ales n comunicarea online, reelele sociale reprezint instrumente indispensabile oricrui specialist n relaii publice. Este important ca persoanele nsrcinate cu funcia de comunicare a unei companii s monitorizeze discuiile care au loc n cadrul reelelor sociale, discuii care ar fi de preferat s ia forma unui dialog, ns acest lucru nu este suficient. Dac mesajele pe care le trimitem reuesc s atrag atenia i interesul publicului, acesta va reaciona, iar aici intervin riscurile unei astfel de aciuni. Trebuie s fim ateni la mesajele i comentariile care vin din partea celorlali membri. n momentul n care o persoan trimite un feedback la un mesaj postat de o companie, aceasta ateapt un rspuns n cel mai scurt timp. Nimnui nu-i place s fie lsat s atepte. Din contr, oamenii vor s simt c li se acord atenie, c opinia lor conteaz. Aceasta este premisa de la care trebuie s pornim atunci cnd comunicm prin intermediul unei reele sociale.

concluzii

Un studiu din aprilie 2007 despre reelele de social networking, realizat n Statele Unite, dezvluia urmtoarele concluzii: Website-urile de search clasic (Yahoo, Google, MSN) rmn de departe n topul celor mai utilizate aplicaii web, n ciuda popularitii n cretere a site-urilor de social search. Website-ul Yahoo este vizitat zilnic de 40% din respondenii testului.
Motive pentru cutarea pe website
Conectarea cu ali utilizatori
35% 2% 6% 6% 7% 49%

1%

Cutarea de servicii/ produse

2% 4% 1%

32% 39% 39% 41%

56%

Cumprarea de servicii/ produse

1% 2% 1% 6% 5%

14% 46% 30% 72%

Distracie/ amuzament
6% 8% 3%

19% 19% 16%

Alte motive

10% 5% 6% 14% 13% 17% 20% 2% 23% 22% 19% 28% 20% 17% 13% 8%

MySpace FaceBook YouTube iVillage TripAdvisor Yahoo! Answers Craigslist Amazon

Nu au realizat nicio cutare

0%

20%

40%

60%

80%

100%

Procente de vizitatori online

Design i programare web //// 23

(selecie din Modul 15, pagina 23)

12

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

Grafic i multimedia n website-uri

MODUL 6

Rezervai astfel locuri libere n zona de stnga sus i dreapta sus unde putem introduce mai trziu elementele necesare. Vom schimba n cele ce urmeaz culoarea de background a primului layer, din alb, n albastru. Pentru aceasta ne vom poziiona cu mouse-ul i vom efectua clic pe layerul Background, vom debifa vizibilitatea Layer 1 (cu clic pe ochiul din faa Layer 1) i vom selecta din paleta de culori culoarea cyan:

Utiliznd o alt unealt Photoshop, Paint Bucket Tool, pe care o gsii n bara de unelte n partea stng, vom umple bannerul alb cu culoarea albastr:

Exerciiile v testeaz la nivel practic cunotinele asimilate.

Exerciiul 5

Folosii Paint Bucket Tool sau un utilitar similar din editorul dvs. foto, pentru a umple documentul creat la exerciiul 4 cu culoarea neagr.

Vom schimba apoi modul n care se amestec cele dou layere. Trebuie s ne imaginm c bannerul final este format dintr-o serie de layere (fiecrui obiect nou fiindu-i asociat un layer), asupra crora putem interveni separat, setrile de culoare, de contrast, de luminozitate, de claritate etc. putnd fi altele pentru fiecare n parte. Ne propunem, astfel, s amestecm cele dou layere pentru a da o uoar tent de cyan imaginii principale cu poarta din fier forjat.
Design i programare web //// 21

(selecie din Modul 6, pagina 21)

13

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

Grafic i multimedia n website-uri

MODUL 6

Un filmule pe youtube.com are urmtoarea interfa:

Dup cum spuneam i mai sus, n acest fel youtube.com folosete flash pentru a afia filmuleele sale. Un alt exemplu de afiare a filmuleelor folosind flash este:

Se pot utiliza diferite interfee pentru a realiza acest lucru. Dup cum v-am promis, atunci cnd vom nva puin mai pe larg Flash, vom putea s exemplificm cum putem s introducem astfel de filmulee n proiectele noastre. Pn atunci ns, trebuie s avei n vedere modul n care putei integra aceste filmulee n proiectul dvs. sau, dac realizai un website pentru un client, ce i putei promite pe parte de filmulee, care sunt limitrile, ce este greu i ce este uor de realizat n privina lor. n principiu, filmuleele pe care le vei introduce ntr-un proiect pot fi de orice fel, orice format ct de ct cunoscut, rspndit. Exist nenumrate utilitare care ne pot ajuta s transformm filmuleul nostru n orice format dorim, pentru a se potrivi cu tehnologia pe care o vom utiliza n website-ul nostru.

Exerciiul 8

Pentru acest exerciiu v propunem inserarea unui film youtube.com pe o pagin HTML. Efectuai, pentru aceasta, urmtorii pai: Creai o pagin nou html cu ajutorul Adobe Dreamweaver. Accesai website-ul youtube.com. Cutai un filmule preferat. Inserai n pagina HTML codul HTML embeded oferit de youtube pe care l putei gsi n dreapta filmuleului n csua denumit Embed. Salvai pagina dvs. i vizualizai-o folosind un browser de internet.
Design i programare web //// 33

(selecie din Modul 6, pagina 33)

14

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

RSPUNSURI LA EX ER C I I In website-uri Grafic i multimedia

Exerciiul 2

MODUL 6

V verificai rapid, cu ajutorul rspunsurilor la exerciii.

i putem recomanda s renune la pattern-ul de pe background pe motiv c ncarc inutil website-ul; i putem recomanda s foloseasc o culoare complementar pentru background (negru sau alte nuane de negru); i putem recomanda s schimbe culoarea textului, de preferat, pentru lizibilitate culoarea alb (se tie c cele mai recomandate scenarii text/background sunt formate din alb/negru sau negru/alb); putem s pstrm culoarea roie a textului doar n anumite zone.

Exerciiul 3 prea multe culori; prea multe elemente; prea nghesuit; fundal nepotrivit (nu este neutru); suprapunere imagini. Exerciiul 8 S presupunem c dorii s postai pe site-ul dvs. trailerul unui film. Noi am ales spre exemplificare Wall-E. Dup gsirea filmuleului pe Youtube, copiai din partea dreapt a ecranului codul Embed.

Avei mai multe opiuni pentru aceasta mai jos privind includerea filmuleelor asemntoare (Include related videos), afiarea marginii i a culorii acesteia (Show Border) etc. Codul embed copiat cu Ctrl+C l vei posta pe pagina site-ului dvs. cu Ctrl+V i va arta astfel: <object width=580 height=360><param name=movie value=http://www. youtube.com/v/8-_9n5DtKOc&hl=en&fs=1&color1=0x234900&color2=0x4e9 e00&border=1></param><param name=allowFullScreen value=true></ param><param name=allowscriptaccess value=always></param><embed src=http://www.youtube.com/v/8-_9n5DtKOc&hl=en&fs=1&color1=0x23 4900&color2=0x4e9e00&border=1 type=application/x-shockwave-flash allowscriptaccess=always allowfullscreen=true width=580 height=360></ embed></object>
Design i programare web //// 41

(selecie din Modul 6, pagina 41)

15

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

HTML

MODUL 3

2/36

Un semn special arat c anumite teme se leag de idei prezentate anterior. n acest caz, le regsim i n Modulul 2, la pagina 36.

Vom urmri, n cele ce urmeaz, schia logic care a rezultat dup studiul de caz din modulul 2: clientul dorete un site aerisit, n partea de sus un banner i imediat dedesubt, un meniu orizontal care s conin meniul propriu-zis. n baza diagramei vom realiza i noi scheletul website-ului conform elementelor nvate n capitolul Exemple HTML. Vom realiza aceasta integral cu ajutorul editorului Notepad. Dimensionm mrimea website-ului astfel nct acesta s fie vizibil pe un minimum de rezoluie 1024x768 pixeli, folosindu-ne de un tabel cu funcia <table>, cu limea de 900 de pixeli. n acest tabel adugm nc 4 tabele primul pentru banner, al doilea pentru zona meniu, al treilea pentru zona de content cu scroll i ultimul pentru zona fix cu date de contact. Vom mpri n dou pri primul tabel (cel pentru banner): o parte pentru banner i cealalt pentru zona cu data i ora, aa cum au fost solicitate de client. Codul surs privind explicaia de mai sus este: <html> <head> <title>Titlu site</title> </head> <body> <table width=900 border=1 align=center> <tr> <td align=center> <table width=100% height=60 border=1> <tr> <td width=800>loc de banner </td> <td width=100>ora si data </td> </tr> </table> </td> </tr> <tr> <td height=30>zona meniu orizontal </td> </tr> <tr> <td valign=top>zona scroll</td> </tr> <tr> <td height=30>zona fixa cu date de contact </td> </tr> </table> </body> </html>
Design i programare web //// 31

scheletul site-ului

(selecie din Modul 3, pagina 31)

16

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

Editoare HTML

MODUL 5

Putem observa c, la prima vedere, NoteTab Light nu este foarte diferit de Windows Notepad, cel cu care am creat website-ul nostru de la nceput. Aceast afirmaie nu este ns integral adevrat, deoarece, dac studiem puin interfaa, meniurile i posibilitile acestui program, vom observa i detaliile. Sigur c NotePad Light nu va oferi aceleai funcii precum Dreamweaver sau 1st Page 2006, ns, atunci cnd dorim s modificm foarte rapid un document HTM, ne trebuie un utilitar puin mai complet dect Windows Notepad i nu avem nevoie de WYSIWYG, putem folosi linitii i NoteTab Light. Cu aceasta ncheiem modulul 5 dedicat editoarelor HTML, urmnd ca n modulul viitor s ne oprim atenia asupra elementelor de grafic i multimedia n realizarea website-urilor. Pn atunci ns, v doresc mult succes n rezolvarea temei pentru acas i spor la nvat!

NTREBRI DE VERIFICARE
1. Pot fi template-urile i altfel dect HTML? 2. Cum putem defini un editor HTML? 3. Dreamweaver editeaz doar documente HTML?

ntrebrile de verificare v ajut s v fixai cunotinele dobndite din fiecare capitol.

4. Ce funcie important i lipsete lui NoteTab Light, ct i majoritii editoarelor HTML gratuite?

5. n ce fel afecteaz Adobe Dreamweaver codul surs al unui document HTML? 6. Ce este funcia Design a Adobe Dreamweaver?

Design i programare web //// 36

(selecie din Modul 5, pagina 36)

17

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

R E Z U M AT U L M O D U LU LU I 3
3.1

HTML

MODUL 3

Rezumatele sintetizeaz aspectele cele mai importante din fiecare modul.

HTML este un limbaj de marcare alctuit din coduri de cuvinte i din sintaxe ca orice alt limbaj de programare. HTML const dintr-o serie de coduri tastate ntr-un fiier text de ctre autorul website-ului acestea sunt denumite etichete. Textul este apoi salvat ca un fiier de tip html i vizualizat prin intermediul unui browser de internet, cum ar fi Internet Explorer, Mozilla Firefox, Safari, Opera etc. Elemente exemple de elemente: html, head, body, table. Elementele sunt practic funciile acestui limbaj de marcare. Spre exemplu, elementul table este folosit pentru a introduce un tabel ntr-o pagin HTML. Atribute exemple de atribute: align, border, id. Atributele sunt funcii pe care le alturm elementelor, de exemplu adugnd elementul table, atributul align=center ne va poziiona tabelul pe mijlocul paginii. Tipul valorii atributului culoare (%Color;) se refer la definiiile culorilor dup cum sunt specificate n SRGB. O valoare a unei culori poate s fie un numr hexazecimal (cu un prefix dat de simbolul #) sau unul din urmtoarele 16 nume de culori. Numele de culori nu difereniaz ntre majuscule/minuscule. Lungimea atributelor ntr-un document HTML poate depinde de trei elemente: pixeli, lungime i multilungime. Valoarea atributelor al cror tip este un cod de limb (%LanguageCode) se refer la un cod de limb. Spaiile albe nu sunt permise n codurile de limb. Codurile de limb difereniaz ntre majuscule/minuscule. Atributele set de caractere charset (%Charset n DTD) se refer la o codificare a caracterelor dup cum se descrie n seciunea despre codificarea caracterelor. Valorile trebuie s fie string-uri (de ex. euc-jp) din registrul IANA. Numele codificrilor caracter nu difereniaz ntre majuscule/minuscule. Agenii utilizator trebuie s urmeze paii definii n seciunea despre specificarea codificrilor caracterelor n scopul determinrii codificrii caracterelor unei resurse externe. Putei utiliza urmtoarele tipuri de linkuri recunoscute, listate aici cu interpretarea lor convenional. n DTD, %LinkTypes; se refer la o list de tipuri de linkuri separate cu spaii. Caracterele de spaii albe nu sunt permise n interiorul tipurilor link. Aceste tipuri link nu difereniaz ntre majuscule/ minuscule, i.e. Alternate are acelai neles ca i alternate: Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, Bookmark. Un document HTML este compus din trei pri: linie coninnd informaii despre versiunea HTML; seciune declarativ de nceput (header delimitat de elementul HEAD); un corp care cuprinde coninutul actual al documentului. Corpul poate fi implementat cu elementul BODY sau cu elementul FRAMESET. Elementul HEAD poate conine informaii ca: SCRIPT, STYLE, META, LINK, OBJECT. Elementul HEAD conine informaii despre documentul curent, cum ar fi: titlul, cuvintele cheie care sunt utile motoarelor de cutare i alte date care nu sunt considerate parte a coninutului documentului.

3.2

3.3

3.4

3.5 3.6

3.7

3.8

3.9

3.10

Design i programare web //// 37

(selecie din Modul 3, pagina 37)

18

LECIE DEMONSTRATIV

DESIGN I PROGRAMARE WEB

D I C I O N A R D E S P E C I A L I TAT E

Tipuri de website-uri; structura i ergonomia website-urilor

MODUL 8

Termenii de specialitate sunt explicai n seciunea dicionar de specialitate.

Boolean

n cultura informatic, n special n cultura de programare, Boolean desemneaz un tip de date care pot avea doar dou valori: adevrat sau fals

Digital Rights Gestiunea drepturilor digitale este o serie de tehnologii de Management controlare a accesului la fiiere text, audio, video .a., folosite de productorii de aparate electronice, editorii i deintorii de copyright, pentru a limita utilizarea mediilor i dispozitivelor digitale ECMA Script este un limbaj de scripting, folosit la scar larg pe internet, dialectele sale principale fiind JavaScript, ActionScript i Jscript Adobe Flex Produs software creat de Adobe Systems destinat crerii de aplicaii interactive. Sub denumirea de RIA s-au dezvoltat o serie de aplicaii interactive, avnd o interfa unitar format din controale i componente. Formatul specific Flex este MXML (Macromedia XML). Pentru programatori, se poate folosi cu succes limbajul de scripting ActionScript. Rezultatul final este un fiier Flash de tip SWF care cuprinde elemente de interfa interactive este un CMS open source MPEG Layer 3 este un format audio multimedia, avnd la baz comprimarea sunetului cu pierdere de calitate. Dezvoltat de Institutul Fraunhofer din Germania, el a fost a treia reuit a acestuia, dup MPEG Layer 1 (folosit pentru casetele digitale Philips DCC) i MPEG Layer 2 (utilizat la sonorul Video CD-urilor). Avantajul su principal a fost (i este n continuare) spaiul redus ocupat, ns calitatea sunetului are de suferit n timpul comprimrii este o colecie patentat de metode de compresie pentru compresie video i audio

Flex

Mambo MP3

MP4

Design i programare web //// 44

(selecie din Modul 8, pagina 44)

19

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

T E M A P E N T Tipuri R Ude website-uri; ACAS 9 structura i ergonomia website-urilor

MODUL 2

Pentru exerciiile cu variante de rspuns, un singur rspuns este corect.

Temele pentru acas v ajut s v evaluai cunotinele dobndite din fiecare modul.

1. Care este variabila PHP care poate conine o combinaie de litere, simboluri i spaii delimitate ntre ghilimele? a) b) c) d) echo; string; function; header.

2. Ce semnific incrementarea i decrementarea unui numr n PHP? a) Creterea unui numr cu o msur se numete incrementare i micorarea cu o msur se numete decrementare. b) Semnific mrirea unui numr exponenial i micorarea unui numr incremental. c) Creterea unui numr cu o unitate se numete incrementare, iar micorarea cu o unitate se numete decrementare.

3. Cu ce formul trebuie s nceap ntotdeauna un cod PHP: a) b) c) d) {?php; <?php; <php; ?php.

4. Constantele PHP pot avea o valoare? a) da; b) nu.

5. Care sunt atributele PHP cu ajutorul crora putem prelua date dintr-un document HTML? a) b) c) d) Action i Method; Method i Echo; Action i Script; Action i Integer.

6. Este adevrat c ntr-un cod PHP nu putem aduga comentarii? a) da; b) nu.

7. Realizai un script PHP, prin care s demonstrai Teorema lui Pitagora. Teorema lui Pitagora afirm c n orice triunghi dreptunghic, suma ptratelor catetelor este egal cu ptratul ipotenuzei. Dac se noteaz cu a i b lungimile catetelor unui triunghi dreptunghic i cu c lungimea ipotenuzei acestuia, atunci teorema lui Pitagora poate fi formulat algebric astfel: a2 + b2 = c2
Design i programare web //// 43

(selecie din Modul 9, pagina 43)

20

DESIGN I PROGRAMARE WEB

LECIE DEMONSTRATIV

Orice companie, instituie public sau chiar un liber profesionist are nevoie de un site web. Cu ani n urm, n afaceri conta ct de frumoas era firma de la poart. Astzi, fr un site adecvat nu se poate rezista i progresa n mediul business, indiferent de domeniu. i dumneavoastr putei fi un specialist cutat de muli angajatori! Alegei chiar astzi cursul Eurocor de DESIGN I PROGRAMARE WEB! Acest curs se adreseaz att acelora care vor s nvee cum se construiete un website, de la A la Z, ct i celor care doresc o reactualizare a cunotinelor dobndite anterior n acest domeniu. Spor la studiu!

EX
Tel. 021 33 225 33;

EM
www.eurocor.ro

PL
21

Temele se pot rezolva pe formularele speciale inserate n caiet (dac se trimit spre corectare prin pot) sau online, n contul de cursant de pe site-ul www.eurocor.ro. Un profesor personal v ndrum pe toat durata studiului.