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: atrgtoare i utile, care ne vnd lucruri sau care catalogheaz alte site-uri. Putem s dm peste website-uri personale sau peste utilitare online cu diverse funcii, 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 organizaie s-i fac simit prezena i online. Indiferent de prol, organizaiile au nevoie de o pagin de internet. Toate aceste website-uri arat i funcioneaz ntr-un anumit fel. Procedeul prin care un website ia natere se numete webdesign, website-urile ind opera webdesignerilor. Webdesignerii sunt specialiti care nu aparin neaprat domeniului IT, ci mai degrab departamentelor de creaie 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 informaional. 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 structurm acest curs pe dou coordonate: graca unui website i programarea. Acest curs se adreseaz att acelora dintre dumneavoastr care au cunotine 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 nvnd alturi de Eurocor, pas cu pas, cum se face acest lucru. Cursul nostru folosete o abordare diferit, urmrind evoluia unui website real, pe care l vei putea accesa pe adresa http://www.eurocor.ro/cursdesignsiprogramareweb. Putei accesa adresa doar n baza unor credeniale, utilizator i parol, furnizate mpreun cu acest curs. Zona aceasta va conine o pagin separat pentru ecare modul, cu exemplicri asupra celor nvate n modulul respectiv. Acest curs poate considerat o introducere n webdesign. Dei subiectul este unul vast, cernd nenumrate ore de experien, dac v vei regsi 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 permitei s apelai la o rm specializat, atunci, acest curs este cel mai nimerit pentru a v ajuta s ducei la bun sfrit planul. Cu ajutorul cursului nostru i cu puin dedicaie i pasiune, ar trebui ca rezultatul s e unul pe msur. Materialul de fa este o lecie demonstrativ gratuit, pe care parcurgnd-o, sperm s v convingei de utililtatea acestui curs i s v alturai celorlali cursani 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 enunarea obiectivelor de atins la nalul studiului; un element important n cadrul acestei structuri l reprezint exemplele i exerciiile, cu ajutorul crora v vei valorica n mod curent cunotinele dobndite; print screen-urile, schemele i tabelele v vor nlesni nsuirea informaiilor; n plus, pentru a v consolida cunotinele, la sfritul ecrui modul vei gsi un rezumat, care prezint cele mai importante aspecte analizate n cadrul acestuia; de asemenea, sunt inserate i ntrebri de vericare care v testeaz gradul de asimilare a cunotinelor; ecare modul se ncheie cu un dicionar de specialitate, care explic n mod detaliat termenii de specialitate folosii, cu rspunsurile la exerciii i cu o tem pentru acas. n vederea ecientizrii timpului dumneavoastr de studiu, precizm c pentru materialul unui caiet de curs sunt recomandate 10h de studiu pe lun, deci aproximativ 2h i 30min. pe sptmn. Fiecare cursant EUROCOR are un profesor personal. Temele propuse n ecare lecie vor expediate pe adresa Institutului EUROCOR, urmnd ca profesorul personal s aprecieze corectitudinea rspunsurilor i s v transmit comentariile sale pe marginea acestora. V recomandm s rezolvai tema doar dup parcurgerea integral i atent a materialului de curs. Pentru ca studiul individual s e ct mai uor i ecient, pe marginea leciilor au fost introduse diferite simboluri:

Semnaleaz noiunile noi, deniiile sau informaiile eseniale


3/18

Exerciiu
Indic exerciiile 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) Lecia de fa constituie o lecie 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, coninnd seciuni teoretice, exemple i exerciii, un model de rezumat i de tem pentru acas. Acestea sunt explicate n casetele de dialog de pe margine. Din punctul de vedere al numrului de pagini, aceasta reprezint mai puin de jumtate din coninutul 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

MODUL 1

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

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 nvarea online; bibliotec; revist web cum s structurm un website? de ce este important s structurm 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 diferene 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 le folosim cu ajutorul Adobe Dreamweaver? Adobe Dreamweaver tips & tricks editoare HTML gratuite

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 dezvoltm un website? editoarele foto ca prim utilitar pentru website-uri (Corel Photo-Paint, Adobe Photoshop); ilustraiile 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 interaciunea lor cu utilizatorii

cum s dezvoltm 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 coninutului unui website

MODUL 9

PHP partea 1

ce este PHP? instalarea i congurarea informaii de referin despre PHP funcii clase i obiecte

MODUL 10

PHP partea a 2-a

securitatea sesiuni de lucru cookies

MODUL 11

Programarea website-urilor n JAVA

ce este JAVA? apariia JAVA pagini programate n JAVA ce este JavaScript? JavaScript n website-uri cum funcioneaz 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 dezvoltm un website din punctul de vedere al securitii?

MODUL 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 ind contieni de la nceput de tehnicile de promovare? reclamele n website-uri: benecii, rol cum s poziionm reclamele pe website? cum se creeaz un newsletter?

MODUL 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 valabil un website? tendine 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 cunotinelor 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 noiunile de baz necesare procesului de webdesign. Vom puncta ce nseamn webdesignul, care sunt mijloacele necesare crerii unui website i care sunt tehnologiile folosite. n acest modul ne propunem, n afar de noiunile de baz, s nelegem 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 angajai menii a acoperi perfect ecare prticic din procesul de webdesign, noi ne propunem s nelegem tot acest proces i s putem, la sfritul acestui curs, s crem, parcurgnd toi 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 oricrui tip de creaie, 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 crem 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 reaciona atunci cnd va vedea pentru prima oar elementele grace ale website-ului. O parte important a acestui modul este cea n care vom nva despre numele unui domeniu i ce ar trebui s avem n vedere atunci cnd l alegem.

OBIECTIVE

s nelegem ce sunt website-urile; s nvm care sunt mijloacele i motivele crerii unui website; s descoperim la ce trebuie s m ateni atunci cnd alegem un nume pentru domeniul nostru; s cunoatem cu ce se ocup webdesignerii; s putem organiza un proiect de webdesign nelegnd paii de baz n dezvoltarea unui website; s facem cunotin cu principalele noiuni de programare; s studiem cele mai cunoscute browsere de internet.

Vei regsi tot aici i enunarea obiectivelor de studiu ce trebuie atinse la nalul procesului de nvare.

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. Entitile 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 referine despre entiti, e folosind referine numerice la diferite caractere. Un exemplu de caracter numeric este €. Acesta desemneaz caracterul Euro prin intermediul codului unicode n format hexadecimal.

Deniiile i noiunile importante au fost marcate printr-o grac special.

O astfel de referin conine codul hexadecimal care denete un caracter. Acest cod conine ntotdeauna caracterul de nceput &, urmat de cod i apoi terminndu-se cu ;. XML conine cinci entiti 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 urmtorul 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

Referinele la caracterele numerice seamn cu entitile XML pe care le-am studiat anterior, dar, n loc de un nume, acestea conin caracterul #, urmat de un numr. Numrul (n format decimal sau hexadecimal) este reprezentat tot de un cod Unicode. Fa de entitile 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 urmtoarelor reguli: Elementele trebuie s e delimitate de tag-uri de nceput sau de sfrit. Elementele blank trebuie s conin tag-uri de nchidere i deschidere pentru elemente blank.

Cuvintele cheie ce se gsesc pe marginea modulelor de curs v ajut s gsii mai uor informaiile de maximum interes.

Toate valorile atributelor trebuie s e nsoite 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 funcia Character_entity_ reference. Aceasta este necesar atunci cnd o valoare a unui atribut trebuie s conin 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 mcar atunci cnd documentul dispune de un DTD sau o schem. Trebuie s m ateni 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 su. Encoding-ul (convertirea datelor i informaiilor ntr-un cod) se specic n linia Content-Type. Cnd astfel de declaraii 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 formatrii. 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 alturm unui document XML o linie opional XML care declar versiunea de XML folosit (cea mai uzitat este versiunea 1.0).
EXEMPLU

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

Tot similar cu DTD-ul documentelor HTML, linia XML de mai sus poate conine i informaii 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 nelese cu ajutorul exemplelor.

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

Cele dou semne care delimiteaz element_name se numesc tag de nceput i tag de sfrit. n exemplul de mai sus, Coninutul elementului, se refer la o zon de text care poate conine elemente XML. Trebuie s nelegem i s m contieni 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 ateni 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 fr coninut. Spre exemplu <foo></foo>, acest element nu are i coninut. XML ofer o sintax special pentru reprezentarea elementelor XML fr coninut. 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 conine un tag de element fr coninut. Un tag de element fr coninut este similar cu un tag de pornire, dar conine n plus un slash, chiar nainte de a nchide linia de cod.
EXEMPLU

<foo></foo> <foo /> <foo/> Un astfel de element poate conine i atribute: <info autor=Nume Prenume genre=specie literar date=data lansrii crii />

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 nelegerii informaiilor prezentate, am inserat n paginile cursului imagini i print screen-uri sugestive.

2/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 e 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 x 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>

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 facei 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 urmrirea

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 coninutului principal al websiteului, informaiile principale. Zona 4 ind o propunere de website cu coninut principal i secundar, aceast zon propune amplasarea coninutului 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 putei vedea din imaginea anterior prezentat, zonele de interes sunt delimitate, denite prin text, generic i sunt denite i mrimile elementelor grace.

Aceast etap a unui proces de webdesign propune o schem logic a viitorului website, zonele n care este situat meniul, limea butoanelor, mrimile zonelor de interes, zonele n care se va situa coninutul primar i secundar al website-ului, ct i alte elemente propuse n cadrul acestui concept. De exemplu, diagrama anterioar, implic existena 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 prezentm evoluia acestui concept, pornind la cel anterior prezentat, n cadrul discuiilor 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]

urmrete construcia 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 conine coninut primar i secundar, cele dou zone ind acum una i aceeai. Zona 5 tot n aceast zon a fost introdus i un mic spaiu publicitar. Zona 6 pe bara de jos a fost eliminat cu totul meniul secundar. Zona 7 n partea dreapt, lucrurile s-au pstrat 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

Putei descoperi pe site-ul cursului http:// www.eurocor.ro/cursdesignsiprogramareweb/ noi elemente: posibilitatea de a descrca i lucra cu template-uri; de a verica online rezultatul studiului de caz din caiet etc. Acesta vine n completarea informaiilor 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, selectm opiunea XSL Output i vizualizm codul n program:

Exerciiile sunt un instrument de vericare a cunotinelor dobndite n cadrul modulelor de curs. Constituie un pas util n rezolvarea temei pentru acas.

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

Exerciiul 5

Folosind cele nvate, realizai codul XML pentru un site de matrimoniale. Se dau 3 nume ctive, fete i biei, aranjate dup: Nume, Prenume, Sex, Ora, Data naterii, Studii, Ocupaie, nlime, Greutate, Ochi, Pr.

Exemple XHTML
Dup cum ai nvat n capitolele anterioare, XHTML este o versiune mai strict i mai curat a HTML. n cele ce urmeaz vom descrie diferenele 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 vizitm un website. Este important s dezvoltm un design ct mai simplu, ct mai aerisit i ct mai potrivit pentru proiectul nostru. Nu exist o reet 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 dispoziia clientului nostru posibilitile cromatice, clasa de culori n care putem realiza designul website-ului. Nu putem folosi foarte multe culori sau s le combinm la modul liber. Nu este nici uor i nici simplu s alegem culorile sau s amestecm culorile pentru proiectul nostru. S alegem schema de culori potrivit este poate cea mai complicat activitate, aceasta ind responsabil direct de a transmite mesajul ctre vizitator i de a crea ceea ce se numete brand awareness. O schem de culori poate inuena vizitatorul s rmn pe website-ul dvs. i s efectueze nite activiti (ex. achiziionarea de produse sau servicii) sau s-l prseasc dup cteva secunde. Iat cteva reguli dup care v putei ghida atunci cnd alegei schema de culori a unui website: alegei o palet de culori naturale, creai un contrast puternic ntre background-ul website-ului i textul su, alegei maximum 3 culori i folosii-le doar pe acestea n designul website-ului dvs., luai n consideraie elementele care denesc vizitatorii dvs.: probleme ale vzului, vrst, sex. Pentru c suntei la nceput n manipularea culorilor, elementelor grace, conceptelor grace, este bine mai nti s studiai alte website-uri similare ca domeniu de activitate cu cel cruia trebuie s-i stabilii designul. Evitai s utilizai imagini realizate cu camere foto neperformante (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. Dup ce v hotri privind conceptul i imaginile, va trebui s alegei culorile de baz n designul dvs. ncercai s alegei culori ct mai naturale, ct mai potrivite cu designul dvs., ct mai potrivite cu imaginea pe care o vei folosi la zona de header i de footer, potrivite cu toate elementele din website (logo-ul etc.). Pentru primele dvs. website-uri, ncercai s utilizai ct mai puine culori. Mergei la nceput pe culori primare i utilizai foarte mult albul. Albul merge cu orice. Regula aceasta se pstreaz i pe internet. Felul n care vei aeza butoanele, elementele grace, textele, felul n care sunt aate toate aceste lucruri va inuena dramatic vizitatorul. Nu este plcut s avem de-a face cu un layout prea ncrcat din care nu mai putem nelege nimic, prea multe elemente, prea multe culori care pot s goneasc vizitatorul. Fii astfel ateni la elementele pe care le introducei, la numrul de culori i de elemente i mergei 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, bineneles, produsul cel mai important oferit de Adobe Systems. Este considerat un standard n industria de producie grac.

Fiecare modul conine un rezumat al informaiilor prezentate n cadrul su. 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
Exerciiul 5

(modul 4)

Modulele de curs cuprind i o seciune de rspunsuri la exerciii, 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: adevrat sau fals Gestiunea drepturilor digitale este o serie de tehnologii de controlare a accesului la iere text, audio, video .a., folosite de productorii de aparate electronice, editorii i deintorii 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 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 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 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

Pentru a v familiariza cu terminologia specic domeniului, caietele de curs conin i un dicionar 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 exerciiile cu variante de rspuns, un singur rspuns este corect.

Tema pentru acas, cu rolul de a v verica nsuirea cunotinelor, 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 funciile 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 funcie dedicat pentru a introduce cod CSS n editoarele HTML; What You See Is What You Get; o capabilitate de conectivitate a editoarelor HTML; o funcie de cod HTML.

4. 5.

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

6. 7.

Ce limbaje de programare suport Adobe Dreamweaver? Creai o pagin HTML cu ajutorul Adobe Dreamweaver sau cu ajutorul oricrui alt editor HTML WYSIWYG. Aceast pagin trebuie s conin CV-ul dvs. Pagina trebuie s conin cel puin 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. Putei 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, putei 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 GR WEB 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 pentru pe t u a introduce cod CSS n editoarele HTML; What You See Is What You Get;

d) 4.

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

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

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 lecia demonstrativ a acestui curs. n sperana c materialul prezentat v-a convins de accesibilitatea i atractivitatea cursului nostru, v ateptm s devenii 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 cod HTML.

o capabilitate de conectivitate a editoarelor HTML;

EM

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

LU

Num\rul cursantului

Observa]iile bserva]iile profesorului: profeso