You are on page 1of 21

L E C I E D E M O N S T R AT I V

de

on

Le c st

ie

ra tiv

INTRODUCERE
Navignd pe internet putem ntlni diverse website-uri: atr g toare i utile, care ne vnd lucruri sau care catalogheaz alte site-uri. Putem s d m peste website-uri personale sau peste utilitare online cu diverse func ii, care ne-au intrat n reex: cursul valutar sau vremea pe glob. Website-urile au devenit un necesar pentru omul zilelor noastre. Este aproape imperios ca o organiza ie s -i fac sim it prezen a i online. Indiferent de prol, organiza iile au nevoie de o pagin de internet. Toate aceste website-uri arat i func ioneaz ntr-un anumit fel. Procedeul prin care un website ia natere se numete webdesign, website-urile ind opera webdesignerilor. Webdesignerii sunt specialiti care nu apar in neap rat domeniului IT, ci mai degrab departamentelor de crea ie din diverse companii specializate n webdesign, publicitate sau alte domenii conexe. Procedeul de dezvoltare a unui site nu are de-a face doar cu tehnologia informa ional . Pentru a face ct mai clare pentru dvs. aceste aspecte, Institutul Eurocor vine n ntmpinarea doritorilor de DESIGN I PROGRAMARE WEB cu pachetul de curs omonim, dorind s puncteze ct mai clar cu putin care sunt metodele de dezvoltare a unui website. Vom ncerca s structur m acest curs pe dou coordonate: graca unui website i programarea. Acest curs se adreseaz att acelora dintre dumneavoastr care au cunotin e anterioare de webdesign, dar care doresc o reactualizare a acestora i o mai bun xare a lor, ct i celor care vor s construiasc website-uri nv nd al turi de Eurocor, pas cu pas, cum se face acest lucru. Cursul nostru folosete o abordare diferit , urm rind evolu ia unui website real, pe care l ve i putea accesa pe adresa http://www.eurocor.ro/cursdesignsiprogramareweb. Pute i accesa adresa doar n baza unor creden iale, utilizator i parol , furnizate mpreun cu acest curs. Zona aceasta va con ine o pagin separat pentru ecare modul, cu exemplic ri asupra celor nv ate n modulul respectiv. Acest curs poate considerat o introducere n webdesign. Dei subiectul este unul vast, cernd nenum rate ore de experien , dac v ve i reg si n ipostaza de a crea un website pentru compania dumneavoastr , pentru proiectul dumneavoastr , pentru familia dumneavoastr sau pentru una dintre pasiunile dumneavoastr , i nu v permite i s apela i la o rm specializat , atunci, acest curs este cel mai nimerit pentru a v ajuta s duce i la bun sfrit planul. Cu ajutorul cursului nostru i cu pu in dedica ie i pasiune, ar trebui ca rezultatul s e unul pe m sur . Materialul de fa este o lec ie demonstrativ gratuit , pe care parcurgnd-o, sper m s v convinge i de utililtatea acestui curs i s v al tura i celorlal i cursan i care au ales Eurocor pentru dezvoltarea personal i profesional . Profesorul dumneavoastr

1 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL DE ORGANIZARE A CURSULUI DE DESIGN I PROGRAMARE WEB

Materialul de studiu este compus din 16 module care pot ndosariate ntr-o map special Eurocor. S spunem cteva cuvinte i despre structura didactic . Fiecare modul ncepe cu o introducere care prezint subiectele abordate n cadrul acestuia, urmat de enun area obiectivelor de atins la nalul studiului; un element important n cadrul acestei structuri l reprezint exemplele i exerci iile, cu ajutorul c rora v ve i valorica n mod curent cunotin ele dobndite; print screen-urile, schemele i tabelele v vor nlesni nsuirea informa iilor; n plus, pentru a v consolida cunotin ele, la sfritul ec rui modul ve i g si un rezumat, care prezint cele mai importante aspecte analizate n cadrul acestuia; de asemenea, sunt inserate i ntreb ri de vericare care v testeaz gradul de asimilare a cunotin elor; ecare modul se ncheie cu un dic ionar de specialitate, care explic n mod detaliat termenii de specialitate folosi i, cu r spunsurile la exerci ii i cu o tem pentru acas . n vederea ecientiz rii timpului dumneavoastr de studiu, preciz m c pentru materialul unui caiet de curs sunt recomandate 10h de studiu pe lun , deci aproximativ 2h i 30min. pe s pt mn . Fiecare cursant EUROCOR are un profesor personal. Temele propuse n ecare lec ie vor expediate pe adresa Institutului EUROCOR, urmnd ca profesorul personal s aprecieze corectitudinea r spunsurilor i s v transmit comentariile sale pe marginea acestora. V recomand m s rezolva i tema doar dup parcurgerea integral i atent a materialului de curs. Pentru ca studiul individual s e ct mai uor i ecient, pe marginea lec iilor au fost introduse diferite simboluri:

Semnaleaz no iunile noi, deni iile sau informa iile esen iale


3/18

Exerciiu
Indic exerci iile pe care vi le propunem spre rezolvare
EXEMPLU

Semnaleaz exemplele care pot clarica aspectele teoretice prezentate

Indic faptul c tema respectiv a mai fost abordat ntr-un modul anterior (n acest caz, tema a mai fost abordat n modulul 3, la pagina 18) Lec ia de fa constituie o lec ie demonstrativ , care dorete s v familiarizeze cu metoda de studiu EUROCOR. Pentru a v forma o imagine ct mai clar asupra structurii cursului de Design i programare web am selectat pentru dumneavoastr cteva fragmente din modulele acestui curs, con innd sec iuni teoretice, exemple i exerci ii, un model de rezumat i de tem pentru acas . Acestea sunt explicate n casetele de dialog de pe margine. Din punctul de vedere al num rului de pagini, aceasta reprezint mai pu in de jum tate din con inutul unui caiet de studiu.

2 //// Design i programare web

L E C I E D E M O N S T R AT I V

PROGRAMA CURSULUI DE DESIGN I PROGRAMARE WEB


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 ap rut website-urile? browsere de internet i editoarele HTML

MODUL 1

MODUL 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 nv area online; bibliotec ; revist web cum s structur m un website? de ce este important s structur m un website ntr-un anumit fel? ce trebuie s avem n vedere nc de la stadiul de schelet al unui website etc.

MODUL 3

HTML
ce este HTML? tipuri de date HTML structura global a unui document HTML exemple HTML linii de cod exemple de website-uri bazate pe HTML

MODUL 4

XML i XHTML
structura logic i zic a XML elemente i atribute XML diferen e dintre XHTML i HTML

MODUL 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 Dreamweaver? Adobe Dreamweaver tips & tricks editoare HTML gratuite le folosim cu ajutorul Adobe

3 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 6

Grac i multimedia n website-uri


estetica unui website; cromatica cum s nu arate un website de ce trebuie s ne ferim atunci cnd dezvolt m un website? editoarele foto ca prim utilitar pentru website-uri (Corel Photo-Paint, Adobe Photoshop); ilustra iile ntr-un website; lmele ntr-un website; sunetul ntr-un website etc.

MODUL 7

Foi de stil n cascad (CSS)


cum denim CSS? rolul CSS n website-uri exemple de CSS n website-uri etc.

MODUL 8

Dinamica website-urilor i interac iunea lor cu utilizatorii


cum s dezvolt m o pagin web dinamic ? cmpuri automate pagini interactive CGI conceptul de client-side/server-side scripting despre tehnologia Flash editoare de Flash sistem de gestiune a con inutului unui website

MODUL 9

PHP partea 1
ce este PHP? instalarea i congurarea informa ii de referin func ii clase i obiecte despre PHP

MODUL 10

PHP partea a 2-a


securitatea sesiuni de lucru cookies

MODUL 11

Programarea website-urilor n JAVA


ce este JAVA? apari ia JAVA pagini programate n JAVA ce este JavaScript? JavaScript n website-uri cum func ioneaz JavaScript?

4 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 12

Baze de date
utilizarea bazelor de date n contextul website-urilor interogarea bazelor de date MySQL n PHP i JAVA

MODUL 13

Securitatea i testarea website-urilor


cum se testeaz un website? securitatea n Microsoft Internet Explorer securitatea n Mozilla Firefox cum s dezvolt m un website din punctul de vedere al securit ii?

MODUL 14

Promovarea website-urilor i reclamele n website-uri


ce este promovarea web? de ce este important s promov m un website? cum s dezvolt m un website ind contien i de la nceput de tehnicile de promovare? reclamele n website-uri: benecii, rol cum s pozi ion m reclamele pe website? cum se creeaz un newsletter?

MODUL 15

Web 2.0 i alte tendin e de dezvoltare a website-urilor


ce este Web 2.0? care este viitorul website-urilor? ct timp poate valabil un website? tendin e de dezvoltare a website-urilor

MODUL 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 cunotin elor sub o form aplicat

5 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL

INTRODUCERE N CREAREA WEBSITE-URILOR

Modulul 1 al cursului nostru i propune s explice ct mai clar no iunile de baz necesare procesului de webdesign. Vom puncta ce nseamn webdesignul, care sunt mijloacele necesare cre rii unui website i care sunt tehnologiile folosite. n acest modul ne propunem, n afar de no iunile de baz , s n elegem i care sunt paii pe care i face un webdesigner profesionist atunci cnd realizeaz un website. Dac n cazul unei companii de webdesign exist departamente i angaja i meni i a acoperi perfect ecare p rticic din procesul de webdesign, noi ne propunem s n elegem tot acest proces i s putem, la sfritul acestui curs, s cre m, parcurgnd to i aceti pai, propriul nostru website.

Fiecare modul ncepe cu o introducere, n care sunt prezentate pe scurt temele abordate n cadrul acestuia.

Ca n cazul oric rui tip de crea ie, este important ca nc din stadiul de proiect al website-ului nostru, s ne gndim cel mai mult la utilizatorul nal vizitatorul. Este foarte important s cre m un website gndindu-ne la utilizator, i nu la cum am aprecia noi rezultatul nal. Trebuie s ne punem n permanen n pielea vizitatorului i s ne gndim cum ar reac iona atunci cnd va vedea pentru prima oar elementele grace ale website-ului. O parte important a acestui modul este cea n care vom nv a despre numele unui domeniu i ce ar trebui s avem n vedere atunci cnd l alegem.

OBIECTIVE
s n elegem ce sunt website-urile;

Ve i reg si tot aici i enun area obiectivelor de studiu ce trebuie atinse la nalul procesului de nv are.

s nv

m care sunt mijloacele i motivele cre rii unui website;

s descoperim la ce trebuie s m aten i atunci cnd alegem un nume pentru domeniul nostru; s cunoatem cu ce se ocup webdesignerii; s putem organiza un proiect de webdesign n elegnd paii de baz n dezvoltarea unui website; s facem cunotin cu principalele no iuni de programare;

s studiem cele mai cunoscute browsere de internet.

7 //// Design i programare web

6 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 4

XML i XHTML

Entiti XML
O entitate n XML este un corp de date, de cele mai multe ori ind vorba de text. Entit ile sunt folosite pentru a reprezenta caractere care nu pot introduse uor sau chiar deloc, folosind tastatura. Aceste caractere speciale pot introduse n documentul XML e folosind referin e despre entit i, e folosind referin e numerice la diferite caractere. Un exemplu de caracter numeric este €. Acesta desemneaz caracterul Euro prin intermediul codului unicode n format hexadecimal.

Deni iile i no iunile importante au fost marcate printr-o grac special .

O astfel de referin con ine codul hexadecimal care denete un caracter. Acest cod con ine ntotdeauna caracterul de nceput &, urmat de cod i apoi terminndu-se cu ;. XML con ine cinci entit i predenite: &amp; (&) &lt; (<) &gt; (>) &apos; () &quot; ()
EXEMPLU

Mai jos un exemplu de XML cu numele rmei C&C Tuning: <nume_companie>C&amp;C Tuning</nume_companie>

Alte elemente pot de asemenea introduse n DTD-ul documentului XML. Mai jos un exemplu n acest sens:
EXEMPLU

<?xml version=1.0 encoding=UTF-8?> <!DOCTYPE exemplu [ <!ENTITY copy &#xA9;> <!ENTITY copyright-notice Copyright &copy; 2009, Firma Mea> ]> <exemplu> &copyright-notice; </exemplu> Dup ce introducem acest cod ntr-un document, interpretat de un browser de internet, de exemplu, MS Internet Explorer, acesta va aa urm torul text: Copyright 2009, Firma Mea

5 //// Design i programare web

7 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 4

XML i XHTML

Referin ele la caracterele numerice seam n cu entit ile XML pe care le-am studiat anterior, dar, n loc de un nume, acestea con in caracterul #, urmat de un num r. Num rul (n format decimal sau hexadecimal) este reprezentat tot de un cod Unicode. Fa de entit ile XML, caracterele numerice nu trebuie denite n DTD-ul documentului XML. Caracterele numerice sunt de obicei folosite pentru a reprezenta caractere care nu se pot coda uor: spre exemplu un caracter de limbaj arabic pe un sistem de operare n englez .

caractere numerice

Semnul & din exemplul anterior, poate , de asemenea, introdus n acest fel ntr-un document de tip XML, dup cum urmeaz : <nume_companie>C&#38;C Tuning</nume_companie> <nume_companie>C&#x26;C Tuning</nume_companie> Att 38, ct i 26, n hexadecimal i decimal, reprezint semnul &.

documente XML corectcompuse

Vorbeam la nceputul acestui capitol de documentele XML corect compuse. Acest capitol i propune s v prezinte care sunt regulile pentru aceste documente. Aadar, n standardul XML, un document corect compus trebuie s se supun urm toarelor reguli: Elementele trebuie s e delimitate de tag-uri de nceput sau de sfrit. Elementele blank trebuie s con in tag-uri de nchidere i deschidere pentru elemente blank.

Cuvintele cheie ce se g sesc pe marginea modulelor de curs v ajut s g si i mai uor informa iile de maximum interes.

Toate valorile atributelor trebuie s e nso ite de ghilimele, e simple (`), e duble (). Pentru a include dou atribute ntr-o linie de cod XML sau nc un atribut n interiorul altui atribut, ghilimelele de la interior trebuie marcate cu func ia Character_entity_ reference. Aceasta este necesar atunci cnd o valoare a unui atribut trebuie s con in amndou tipurile de ghilimele (simple sau duble) sau atunci cnd nu avem control asupra tipurilor de ghilimele ntr-un editor XML. Aceste caractere sunt predenite n XML i nu au nevoie a declarate nici m car atunci cnd documentul dispune de un DTD sau o schem . Trebuie s m aten i atunci cnd folosim elemente sau tag-uri. Fiecare element care nu este de baz trebuie introdus n alt element. Documentul trebuie s respecte encoding-ul declarat n DTD-ul s u. Encoding-ul (convertirea datelor i informa iilor ntr-un cod) se specic n linia Content-Type. Cnd astfel de declara ii nu exist , se alege default encoding de tip Unicode sau UTF-8. Numele elementelor sunt case-sensitive.
EXEMPLU

<Step> ... </Step> n acest caz, cele dou elemente sunt identice din punctul de vedere al format rii. Cele de mai jos, nu: <Step> ... </step>

6 //// Design i programare web

8 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 4

XML i XHTML

n cele ce urmeaz v vom prezenta elementele din care poate compus un document XML i diversele reguli de sintax .
EXEMPLU

Dac se dorete a se realiza un document corect-compus, XML ofer posibilitatea de a stoca orict text sau date este nevoie. Trebuie s avem grij doar ca documentul s aib un singur element de tip root, pe scurt, textul trebuie inclus ntr-o sintax de tip nceput/sfrit: <carte> text </carte>

Similar cu HTML, putem s al tur m unui document XML o linie op ional XML care declar versiunea de XML folosit (cea mai uzitat este versiunea 1.0).
EXEMPLU

Mai jos un exemplu de astfel de declara ie: <?xml version=1.0 encoding=UTF-8 ?>

Tot similar cu DTD-ul documentelor HTML, linia XML de mai sus poate con ine i informa ii despre encoding; n cazul nostru se va folosi standardul UTF-8 (Unicode Transformation Format - 8).
EXEMPLU

ntr-un document XML putem introduce i comentarii. Aceste comentarii pot introduse oriunde n interiorul documentului. O linie de comentariu ncepe ntotdeauna cu <! i se termin cu >. <!-- acesta este un comentariu. -->

Multe aspecte teoretice pot mai uor n elese cu ajutorul exemplelor.

ntr-un document XML se pot introduce diverse sintaxe i date adi ionale pentru a structura documentul respectiv, sintaxa de baz a unui element XML ind: <element_name element_name> attribute_name=attribute_value>Con inutul elementului</

Cele dou semne care delimiteaz element_name se numesc tag de nceput i tag de sfrit. n exemplul de mai sus, Con inutul elementului, se refer la o zon de text care poate con ine elemente XML. Trebuie s n elegem i s m contien i c un document XML este format n baza unei structuri arborescente.
EXEMPLU

Iat un exemplu de astfel de structur a unui document de tip XML: <reteta name=gogosi prep_time=5 minute coacere=3 ore> <titlu>gogsi simple</titlu> <ingrediente gramaj=8 unitate=cani>faina</ingrediente>

3 //// Design i programare web

9 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 4

XML i XHTML

<ingrediente gramaj=10 unitate=grame>unt</ingrediente> <ingrediente gramaj=4 unitate=cani stare=calda>apa</ingrediente> <ingrediente gramaj=1 unitate=lingurita>sare</ingrediente> <instructiuni> <pas>Amestecam toate ingredientele</pas> <pas>Framantam indelung.</pas> <pas>Acoperiti coca cu un prosop curat, timp de o ora.</pas> <pas>Framantati din nou.</pas> <pas>Puneti compozitia intr-o tava de facut gogosi.</pas> <pas>Se coc la 180 de grade, timp de 30 de minute.</pas> </instructiuni> </reteta>

Valorile atribut trebuie s se ae mereu ntre ghilimele. Pentru aceasta vom folosi ghilimele duble sau ghilimele simple, ecare nume de atribut trebuind s apar o singur dat ntr-un singur element. XML implic ca elementele s e structurate corect elementele nu trebuie niciodat s se suprapun . Trebuie s m aten i la tag-urile de nchidere i de deschidere ale unei linii de cod XML.
EXEMPLU

Iat un exemplu de tag-uri de nchidere i de deschidere folosite greit: <!Exemplu de document XML greit. --> <titlu>Titlu de carte<autor>Autor</titlu></autor> Versiunea corect a documentului XML de mai sus ar trebui s e: <!-- Exemplu de document XML corect. --> <titlu>Titlu de carte</titlu> <autor>Nume Autor</autor>

Exist , de asemenea, elemente XML f r con inut. Spre exemplu <foo></foo>, acest element nu are i con inut. XML ofer o sintax special pentru reprezentarea elementelor XML f r con inut. n loc de a puncta o linie de nceput de linie de cod XML cu un tag de pornire urmat imediat de un tag de nchidere, un document poate con ine un tag de element f r con inut. Un tag de element f r con inut este similar cu un tag de pornire, dar con ine n plus un slash, chiar nainte de a nchide linia de cod.
EXEMPLU

<foo></foo> <foo /> <foo/> Un astfel de element poate con ine i atribute: <info autor=Nume Prenume genre=specie literar date=data lans rii c r ii />

4 //// Design i programare web

10 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 3

HTML

Pe lng exemple, pentru facilitarea n elegerii informa iilor prezentate, am inserat n paginile cursului imagini i print screen-uri sugestive.

2/36

Vom urm ri, n cele ce urmeaz , schi a 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 con in meniul propriu-zis. n baza diagramei vom realiza i noi scheletul website-ului conform elementelor nv ate n capitolul Exemple HTML. Vom realiza aceasta integral cu ajutorul editorului Notepad. Dimension m m rimea website-ului astfel nct acesta s e vizibil pe un minimum de rezolu ie 1024x768 pixeli, folosindu-ne de un tabel cu func ia <table>, cu l imea de 900 de pixeli. n acest tabel ad ug m nc 4 tabele primul pentru banner, al doilea pentru zona meniu, al treilea pentru zona de content cu scroll i ultimul pentru zona x cu date de contact. Vom mp r i n dou p r i 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 explica ia 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>

scheletul site-ului

31 //// Design i programare web

11 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 2

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

EXEMPLU

Ca s v face i o prim idee, o diagram ar trebui s arate aproximativ n acest fel:

Area: header Focus: 6/7

Width: 940px

Height: 125px

2 1
Area: primary sidebar Focus: 3/7 Width: 250px Height: auto

Un element foarte util n acest curs l reprezint urm rirea

Area: menu

Focus: 7/7

Width: 690px

Height: 45px

Area: primary content

Focus: 5/7

Width:690px

Height: auto

unui studiu de caz ce se ntinde de-a lungul ntregului curs.


Area: secondary content Focus: 4/7 Width: 690px Height: auto Area: secondary sidebar Focus: 2/7 Width: 250px Height: auto

4
Area: footer Focus: 1/7 Width: 940px Height: 55px

7 5

Legend : Zona 1 aceast zon propune amplasarea unui banner, propune dimensiunile bannerului. Zona 2 aceast zon propune amplasarea meniului principal. Zona 3 aceast zon propune amplasarea con inutului principal al websiteului, informa iile principale. Zona 4 ind o propunere de website cu con inut principal i secundar, aceast zon propune amplasarea con inutului secundar. Zona 5 aceast zon propune amplasarea meniului secundar. Zona 6 aceast zon propune amplasarea unui sidebar principal. Zona 7 aceast zon propune amplasarea unui sidebar secundar.

Dup cum pute i vedea din imaginea anterior prezentat , zonele de interes sunt delimitate, denite prin text, generic i sunt denite i m rimile elementelor grace.

Aceast etap a unui proces de webdesign propune o schem logic a viitorului website, zonele n care este situat meniul, l imea butoanelor, m rimile zonelor de interes, zonele n care se va situa con inutul primar i secundar al website-ului, ct i alte elemente propuse n cadrul acestui concept. De exemplu, diagrama anterioar , implic existen a unui footer pe website-ul respectiv. n alt schem , acest footer nu trebuie s existe .a.m.d.
31 //// Design i programare web

12 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 2

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

EXEMPLU

n cele ce urmeaz v prezent m evolu ia acestui concept, pornind la cel anterior prezentat, n cadrul discu iilor privind conceptul de webdesign i diagrama posibilului website, echipa de webdesign a propus un concept nal, dup ce a stabilit nite aspecte-detaliu mpreun cu clientul:

Studiul de caz
Logo [217x90, perma] Leaderboard [728x90, perma]

urm rete construc ia unui website i tehnologiile implicate n acest proces.


Valuta Lungime Masa Viteza Temperatura Consum Lorem ipsum

1 2
Alte conversii

Convertor valutar Evolutii si medii valutare Case de schimb valutar Stiri si noutati monetare RSS, Google, Netvibes My Convertor Calculator [300xH, perma]

3
Content [500xH] Rectangle [300x250, perma]

Wide Skyscraper [160x600, perma]

Info util [300xH, temp / context]

AdSense [470x70, perma]

5 6

Footer [990x90, temp / content]

Legend : Zona 1 aceast zon a evoluat de la un simplu banner, la o zon cu dou bannere: logo i banner principal. Zona 2 meniul propus n imaginea precedent pe culoarea neagr a primit cteva elemente grace i a fost populat cu nite cuvinte cheie. Zona 3 a fost introdus i un meniu vertical, ct i o zon grac . Zona 4 zona din mijloc nu mai con ine con inut primar i secundar, cele dou zone ind acum una i aceeai. Zona 5 tot n aceast zon a fost introdus i un mic spa iu publicitar. Zona 6 pe bara de jos a fost eliminat cu totul meniul secundar. Zona 7 n partea dreapt , lucrurile s-au p strat aproape la fel.

32 //// Design i programare web

13 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 2

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

Pute i descoperi pe site-ul cursului http:// www.eurocor.ro/cursdesignsiprogramareweb/ noi elemente: posibilitatea de a desc rca i lucra cu template-uri; de a verica online rezultatul studiului de caz din caiet etc. Acesta vine n completarea informa iilor din caiet.

33 //// Design i programare web

14 //// Design i programare web

L E C I E D E M O N S T R AT I V

MODUL 4

XML i XHTML

Pentru a verica corectitudinea codului scris, select m op iunea XSL Output i vizualiz m codul n program:

Exerci iile sunt un instrument de vericare a cunotin elor dobndite n cadrul modulelor de curs. Constituie un pas util n rezolvarea temei pentru acas .

Mai multe exemple de XML g si i pe site-ul cursului la adresa cunoscut : http://www.eurocor.ro/cursdesignsiprogramareweb.

Exerciiul 5

Folosind cele nv ate, realiza i codul XML pentru un site de matrimoniale. Se dau 3 nume ctive, fete i b ie i, aranjate dup : Nume, Prenume, Sex, Ora, Data naterii, Studii, Ocupa ie, n l ime, Greutate, Ochi, P r.

Exemple XHTML
Dup cum a i nv at n capitolele anterioare, XHTML este o versiune mai strict i mai curat a HTML. n cele ce urmeaz vom descrie diferen ele dintre XHTML i HTML prin exemple. Codul surs pentru varianta HTML permisiv : <b><i><u>Text ingrosat, sublinitat si italic.</b></i></u> Iat cum interpreteaz Internet Explorer codul de mai sus:

Codul XHTML corect scris cu tag-urile nchise ordonat: <b><i><u>Text ingrosat, sublinitat si italic.</u></i></b>

24 //// Design i programare web

15 //// Design i programare web

L E C I E D E M O N S T R AT I V

R E Z U M AT U L M O D U LU LU I 6
6.1 Designul este primul elementul decisiv cnd vizit m un website. Este important s dezvolt m un design ct mai simplu, ct mai aerisit i ct mai potrivit pentru proiectul nostru. Nu exist o re et punctual de realizare a designului unui proiect web, exist ns reguli de bun-sim i de corectitudine a esteticii. Cromatica joac un rol extrem de important n realizarea unui design web. Este important s stabilim de la nceput i s punem la dispozi ia clientului nostru posibilit ile cromatice, clasa de culori n care putem realiza designul website-ului. Nu putem folosi foarte multe culori sau s le combin m la modul liber. Nu este nici uor i nici simplu s alegem culorile sau s amestec m culorile pentru proiectul nostru. S alegem schema de culori potrivit este poate cea mai complicat activitate, aceasta ind responsabil direct de a transmite mesajul c tre vizitator i de a crea ceea ce se numete brand awareness. O schem de culori poate inuen a vizitatorul s r mn pe website-ul dvs. i s efectueze nite activit i (ex. achizi ionarea de produse sau servicii) sau s -l p r seasc dup cteva secunde. Iat cteva reguli dup care v pute i ghida atunci cnd alege i schema de culori a unui website: alege i o palet de culori naturale, crea i un contrast puternic ntre background-ul website-ului i textul s u, alege i maximum 3 culori i folosi i-le doar pe acestea n designul website-ului dvs., lua i n considera ie elementele care denesc vizitatorii dvs.: probleme ale v zului, vrst , sex. Pentru c sunte i la nceput n manipularea culorilor, elementelor grace, conceptelor grace, este bine mai nti s studia i alte website-uri similare ca domeniu de activitate cu cel c ruia trebuie s -i stabili i designul. Evita i s utiliza i imagini realizate cu camere foto neperformante (ex. telefon mobil), neclare, culori defecte (arse) etc. ncerca i s oferi i o aten ie sporit imaginilor pe care le utiliza i n proiectele dvs. Acesta este unul dintre principalele motive care fac un website s arate ieftin. Dup ce v hot r i privind conceptul i imaginile, va trebui s alege i culorile de baz n designul dvs. ncerca i s alege i culori ct mai naturale, ct mai potrivite cu designul dvs., ct mai potrivite cu imaginea pe care o ve i folosi la zona de header i de footer, potrivite cu toate elementele din website (logo-ul etc.). Pentru primele dvs. website-uri, ncerca i s utiliza i ct mai pu ine culori. Merge i la nceput pe culori primare i utiliza i foarte mult albul. Albul merge cu orice. Regula aceasta se p streaz i pe internet. Felul n care ve i aeza butoanele, elementele grace, textele, felul n care sunt aate toate aceste lucruri va inuen a dramatic vizitatorul. Nu este pl cut s avem de-a face cu un layout prea nc rcat din care nu mai putem n elege nimic, prea multe elemente, prea multe culori care pot s goneasc vizitatorul. Fi i astfel aten i la elementele pe care le introduce i, la num rul de culori i de elemente i merge i pe ideea simplu = bun. Photoshop este un editor grac oferit de compania Adobe Systems. Acest tip de program se mai numete i DPD (Desktop Publishing Program). n acest moment, Photoshop este liderul de pia n sfera editoarelor grace i este, binen eles, produsul cel mai important oferit de Adobe Systems. Este considerat un standard n industria de produc ie grac .

Fiecare modul con ine un rezumat al informa iilor prezentate n cadrul s u. Acesta v ajut la recapitularea i xarea principalelor aspecte teoretice tratate.
6.3 6.2

6.4

6.5

6.6

6.7

6.8

39 //// Design i programare web

16 //// Design i programare web

L E C I E D E M O N S T R AT I V

RSPUNSURI LA EXERCIII
Exerci iul 5

(modul 4)

Modulele de curs cuprind i o sec iune de r spunsuri la exerci ii, care v ofer anumite sugestii de rezolvare.

Mai jos un exemplu de rezolvare: <?xml version=1.0 encoding=utf-8 ?> - <matrimoniale> - <id> <nume>Apostol</nume> <prenume>Dana</prenume> <sex>F</sex> <oras>Iasi</oras> <dn>04.06.1986</dn> <ocupatie>student</ocupatie> <inaltime>1.72</inaltime> <greutate>55</greutate> <ochi>caprui</ochi> <par>saten</par> </id> - <id> <nume>Dragomir</nume> <prenume>Dragos</prenume> <sex>M</sex> <oras>Bucuresti</oras> <dn>14.03.1982</dn> <ocupatie>inginer</ocupatie> <inaltime>1.84</inaltime> <greutate>86</greutate> <ochi>verzi</ochi> <par>saten</par> </id> - <id> <nume>Gabrunski</nume> <prenume>Irina</prenume> <sex>F</sex> <oras>Bucuresti</oras> <dn>11.08.1978</dn> <ocupatie>avocat</ocupatie> <inaltime>1.70</inaltime> <greutate>52</greutate> <ochi>negri</ochi> <par>brunet</par> </id> </matrimoniale>

36 //// Design i programare web

17 //// Design i programare web

L E C I E D E M O N S T R AT I V

D I C I O N A R D E S P E C I A L I TAT E
Boolean n cultura informatic , n special n cultura de programare, Boolean desemneaz un tip de date care pot avea doar dou valori: adev rat sau fals Gestiunea drepturilor digitale este o serie de tehnologii de controlare a accesului la iere text, audio, video .a., folosite de produc torii de aparate electronice, editorii i de in torii de copyright, pentru a limita utilizarea mediilor i dispozitivelor digitale este un limbaj de scripting, folosit la scar larg pe internet, dialectele sale principale ind JavaScript, ActionScript i Jscript Adobe Flex Produs software creat de Adobe Systems destinat cre rii de aplica ii interactive. Sub denumirea de RIA s-au dezvoltat o serie de aplica ii interactive, avnd o interfa unitar format din controale i componente. Formatul specic Flex este MXML (Macromedia XML). Pentru programatori, se poate folosi cu succes limbajul de scripting ActionScript. Rezultatul nal este un ier 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 s u principal a fost (i este n continuare) spa iul redus ocupat, ns calitatea sunetului are de suferit n timpul comprim rii este o colec ie patentat de metode de compresie pentru compresie video i audio

Pentru a v familiariza cu terminologia specic domeniului, caietele de curs con in i un dic ionar de specialitate.
Flex ECMA Script Digital Rights Management

Mambo MP3

MP4

44 //// Design i programare web

18 //// Design i programare web

L E C I E D E M O N S T R AT I V

TEMA PENTRU ACAS 5


Pentru exerci iile cu variante de r spuns, un singur r spuns este corect.

Tema pentru acas , cu rolul de a v verica nsuirea cunotin elor, poate trimis spre corectare profesorului personal. Acesta v va oferi ndrumare pe toat durata cursului.
2. Din ce loc, n Adobe Dreamweaver, putem modica culorile linkurilor dintr-un document? a) b) c) d) 3. Document Properties > Links; Page Properties > Link; Page Properties > Links; File > Page Properties. 1. Cum se numesc func iile prin care putem urca ierele unui website pe internet prin intermediul Adobe Dreamweaver? a) b) c) d) FTP i Manage Sites; Manage Sites; FTP i UTP; Manage Sites i HTML.

Ce nseamn WYSIWYG? a) b) c) d) o func ie dedicat pentru a introduce cod CSS n editoarele HTML; What You See Is What You Get; o capabilitate de conectivitate a editoarelor HTML; o func ie de cod HTML.

4. 5.

Ce func ie ofer editorul 1st Page 2006? De cte feluri pot template-urile web? a) b) c) d) gratuite i pl tite; HTML i PHP; gratuite, pl tite-shared i pl tite-unicat; web i nonweb.

6. 7.

Ce limbaje de programare suport Adobe Dreamweaver? Crea i o pagin HTML cu ajutorul Adobe Dreamweaver sau cu ajutorul oric rui alt editor HTML WYSIWYG. Aceast pagin trebuie s con in CV-ul dvs. Pagina trebuie s con in cel pu in o poz , tabele, bullet-uri (ul, ol, li), image maps cu link pe poz din CV, paragrafe text i s aib un fundal, altul dect culoarea alb . Pute i trimite linkul paginii astfel create spre vericare profesorului personal la adresa teme@eurocor.ro cu subiectul Tema 5 Design i programare web.

44 //// Design i programare web

19 //// Design i programare web

L E C I E D E M O N S T R AT I V

Temele se rezolv pe formulare speciale, care pot trimise spre corectare. De asemenea, pute i rezolva temele i online, pe site-ul www.eurocor.ro
1.
Numele [i prenumele Adresa Cod po[tal Localitatea CURS:

Codul profesorului

Nr. modul:

DESIGN I PROGRAMARE WEB GR 5

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

Cum se numesc funciile prin care putem urca fiierele unui websit website pe internet prin intermediul Adobe Dreamweaver? a) b) c) d) FTP i Manage Sites; Manage Sites; FTP i UTP; Manage Sites i HTML.

2.

a) b) c) d) 3.

Document Properties > Links; Page Properties > Link;

Page Properties > Links; File > Page Properties.

Ce nseamn WYSIWYG? WYG a) b) c)

o funcie dedicat pe t u a introduce cod CSS n editoarele HTML; pentru What You See Is What You Get;

d) 4.

Ce funcie ofer edito 1st Page 2006? ofer editorul f

..................................................................................................................... ..................................................................................................................... ..................................................................................................................... .....................................................................................................................


Semn\tura profesorului:

ATEN}IE !

NU UITA}I S| AL|TURA}I UN PLIC TIMBRAT PE NUMELE {I ADRESA DUMNEAVOASTR|!

Cu prezentarea formularului de tem pentru acas se ncheie lec ia demonstrativ a acestui curs. n speran a c materialul prezentat v-a convins de accesibilitatea i atractivitatea cursului nostru, v atept m s deveni i cursant al Institutului EUROCOR, nscriindu-v la cursul de Design i programare Web!

tel. 021/33.225.33; www.eurocor.ro


20 //// Design i programare web

EX
o funcie de co HTML. cod

o capabilitate de conectivitate a editoarelor HTML;

EM

Din ce loc, n Adobe Dreamweaver, putem modifica culo odifica culorile linkurilor dintr-un document?

LU

Num\rul cursantului

Observa]iile profesorului: bserva]iile profeso

You might also like