de Le

L E C Ţ I E D E M O N S T R AT I VĂ
m c ţie
on
st
ra
tiv
ă

INTRODUCERE

Navigând pe internet putem întâlni diverse website-uri: atrgtoare i utile, care ne

vând lucruri sau care catalogheaz alte site-uri. Putem s dm peste website-uri per-
sonale 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 webdesign-
erilor. 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 cât mai clare pentru dvs. aceste aspecte, Institutul Eurocor vine în
întâmpinarea doritorilor de DESIGN I PROGRAMARE WEB cu pachetul de curs
omonim, dorind s puncteze cât 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 atât acelora dintre dumneavoastr care au cunotine ante-
rioare de webdesign, dar care doresc o reactualizare a acestora i o mai bun xare
a lor, cât i celor care vor s construiasc website-uri învând 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/cursdesignsiprogramare-
web. 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, cerând 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 sfârit 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 parcurgând-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

 MODUL DE ORGANIZARE A CURSULUI DE
L E C Ţ I E D E M O N S T R AT I VĂ

DESIGN ȘI PROGRAMARE WEB

Materialul de studiu este compus din 16 module care pot  îndosariate într-o map
special Eurocor. S spunem câteva 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 dobândite; print screen-urile, schemele i tabelele
v vor înlesni însuirea informaiilor; în plus, pentru a v consolida cunotinele, la
sfâritul 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 sptmân.
Fiecare cursant EUROCOR are un profesor personal.
Temele propuse în ecare lecie vor  expediate pe adresa Institutului EUROCOR,
urmând 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 cât mai uor i ecient, pe marginea leciilor au fost
introduse diferite simboluri:

Semnaleaz noiunile noi, deniiile sau informaiile eseniale


Exerciţiu
Indic exerciiile pe care vi le propunem spre rezolvare

EXEMPLU

Semnaleaz exemplele care pot clarica aspectele teoretice prezentate

3/18 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 cât mai clar asupra structurii cursului de Design i programare web
am selectat pentru dumneavoastr câteva fragmente din modulele acestui curs,
coninând 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

 PROGRAMA CURSULUI DE
L E C Ţ I E D E M O N S T R AT I VĂ

DESIGN ȘI PROGRAMARE WEB

MODUL 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

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 când 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?
 câmpuri 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?
 cât 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

1 INTRODUCERE ÎN CREAREA
WEBSITE-URILOR

Modulul 1 al cursului nostru îi propune s explice cât 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 când 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 sfâritul acestui curs, s
crem, parcurgând toi aceti pai, propriul nostru website.
Fiecare modul începe Ca în cazul oricrui tip de creaie, este important ca înc din stadiul de proiect al
website-ului nostru, s ne gândim cel mai mult la utilizatorul nal – „vizitatorul”.
cu o introducere, în Este foarte important s crem un website gândindu-ne la utilizator, i nu la cum
care sunt prezentate pe am aprecia noi rezultatul nal. Trebuie s ne punem în permanen în pielea
vizitatorului i s ne gândim cum ar reaciona atunci când va vedea pentru prima
scurt temele abordate oar elementele grace ale website-ului.

în cadrul acestuia. 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 când îl alegem.

OBIECTIVE

 s înelegem ce sunt website-urile;

Vei regsi tot aici  s învm care sunt mijloacele i motivele crerii unui website;

i enunarea obiec-  s descoperim la ce trebuie s m ateni atunci când alegem un

nume pentru domeniul nostru;
tivelor de studiu ce  s cunoatem cu ce se ocup webdesignerii;
trebuie atinse la nalul  s putem organiza un proiect de webdesign înelegând paii de baz în
dezvoltarea unui website;
procesului de învare.
 s facem cunotin cu principalele noiuni 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

Entităţi 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
Deniiile i noiunile Euro prin intermediul codului unicode în format hexadecimal.
importante au fost
marcate printr-o grac O astfel de referin conine codul hexadecimal care denete un caracter.
Acest cod conine întotdeauna caracterul de început „&”, urmat de cod i apoi
special. terminându-se cu „;”. XML conine cinci entiti predenite:
 & (&)
 &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, caracte-
rele numerice nu trebuie denite în DTD-ul documentului XML. Caracte-
rele 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 Semnul „&” din exemplul anterior, poate , de asemenea, introdus în acest fel
numerice î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>
Atât 38, cât i 26, în hexadecimal i decimal, reprezint semnul „&”.

documente Vorbeam la începutul acestui capitol de documentele XML corect compuse.

XML corect- Acest capitol îi propune s v prezinte care sunt regulile pentru aceste documente.
compuse 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 sfârit.
 Elementele blank trebuie s conin tag-uri de închidere i deschidere pentru
elemente blank.
 Toate valorile atributelor trebuie s e însoite de ghilimele, e simple (`), e
duble (”).
Cuvintele cheie ce se
 Pentru a include dou atribute într-o linie de cod XML sau înc un atribut în interiorul
gsesc pe marginea altui atribut, ghilimelele de la interior trebuie marcate cu funcia „Character_entity_
reference”. Aceasta este necesar atunci când o valoare a unui atribut trebuie
modulelor de curs v s conin amândou tipurile de ghilimele (simple sau duble) sau atunci când nu
avem control asupra tipurilor de ghilimele într-un editor XML. Aceste caractere sunt
ajut s gsii mai uor predenite în XML i nu au nevoie a  declarate nici mcar atunci când documentul
dispune de un DTD sau o schem.
informaiile de
 Trebuie s m ateni atunci când folosim elemente sau tag-uri. Fiecare element
maximum interes. 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”.
Când 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 oricât 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/sfârit:
<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. -->
Într-un document XML se pot introduce diverse sintaxe i date adiionale pentru a
Multe aspecte teo- structura documentul respectiv, sintaxa de baz a unui element XML ind:
retice pot  mai uor <element_name attribute_name=”attribute_value”>Coninutul elementului</
element_name>
înelese cu ajutorul
exemplelor. Cele dou semne care delimiteaz „element_name” se numesc tag de început i
tag de sfârit. Î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 lâng 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.

scheletul În baza diagramei vom realiza i noi scheletul website-ului conform elementelor
site-ului învate în capitolul „Exemple HTML”. Vom realiza aceasta integral cu ajutorul
editorului Notepad.
Dimensionm mrimea website-ului astfel încât 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>

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

Un element foarte Area: menu Focus: 7/7 Width: 690px Height: 45px 1
util în acest curs îl Area: primary sidebar
Focus: 3/7 Width: 250px
Height: auto

reprezint urmrirea
Area: primary content Focus: 5/7 Width:690px Height: auto

unui studiu de caz

ce se întinde de-a 3 6

lungul întregului curs.

Area: secondary sidebar

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

4 7

Area: footer Focus: 1/7 Width: 940px Height: 55px 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 website-
ului, 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, cât 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]
1
urmrete construcia
unui website i Valuta Lungime Masa Viteza Temperatura Consum Lorem ipsum 2 Alte conversii

tehnologiile implicate  Convertor valutar

Evolutii si medii valutare 4 7

în acest proces.
Case de schimb valutar
Stiri si noutati monetare Calculator [300xH, perma]

RSS, Google, Netvibes

My Convertor

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

Wide Skyscraper
[160x600, perma]

Info util [300xH, temp / context]

AdSense [470x70, perma]

5

Footer [990x90, temp / content] 6

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
câteva elemente grace i a fost populat cu nite cuvinte cheie.
- Zona 3 – a fost introdus i un meniu vertical, cât 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/curs-
designsiprogramare-
web/ 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 com-
pletarea 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 veri-
care a cunotinelor
dobândite î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.


Exerciţiul 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 când vizitm un website. Este
Fiecare modul important s dezvoltm un design cât mai simplu, cât mai aerisit i cât
mai potrivit pentru proiectul nostru. Nu exist o reet punctual de
conine un rezumat realizare a designului unui proiect web, exist îns reguli de bun-sim i de
corectitudine a esteticii.
al informaiilor 6.2 Cromatica joac un rol extrem de important în realizarea unui design web.
prezentate în cadrul Este important s stabilim de la început i s punem la dispoziia clientului
nostru posibilitile cromatice, clasa de culori în care putem realiza designul
su. Acesta v ajut la website-ului. Nu putem folosi foarte multe culori sau s le combinm la
modul liber.
recapitularea i xarea 6.3 Nu este nici uor i nici simplu s alegem culorile sau s amestecm
culorile pentru proiectul nostru. S alegem schema de culori potrivit este
principalelor aspecte poate cea mai complicat activitate, aceasta ind responsabil direct de a
transmite mesajul ctre vizitator i de a crea ceea ce se numete brand
teoretice tratate. awareness. O schem de culori poate inuena vizitatorul s rmân
pe website-ul dvs. i s efectueze nite activiti (ex. achiziionarea de
produse sau servicii) sau s-l prseasc dup câteva secunde.

6.4 Iat câteva „reguli” dup care v putei ghida atunci când 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,
vârst, sex.

6.5 Pentru c suntei la început în „manipularea” culorilor, elementelor grace,

conceptelor grace, este bine mai întâi 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”.

6.6 Dup ce v hotrâi privind conceptul i imaginile, va trebui s alegei

culorile de baz în designul dvs. Încercai s alegei culori cât mai naturale,
cât mai potrivite cu designul dvs., cât 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 cât 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.

6.7 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.

6.8 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, bineîneles, produsul cel mai important oferit de Adobe Systems.
Este considerat un standard în industria de producie grac.

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Ă

(modul 4)
RĂSPUNSURI LA EXERCIŢII

Exerciiul 5
Modulele de curs Mai jos un exemplu de rezolvare:
<?xml version=”1.0” encoding=”utf-8” ?>
cuprind i o seciune - <matrimoniale>
de rspunsuri la - <id>
<nume>Apostol</nume>
exerciii, care v <prenume>Dana</prenume>
ofer anumite sugestii <sex>F</sex>
<oras>Iasi</oras>
de rezolvare. <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,

Pentru a v famil- Boolean desemneaz un tip de date care pot avea doar dou
valori: adevrat sau fals
iariza cu terminologia
Digital Rights – Gestiunea drepturilor digitale este o serie de tehnologii de
specic domeniului, Management controlare a accesului la iere text, audio, video .a., folosite
de productorii de aparate electronice, editorii i deintorii de
caietele de curs conin copyright, pentru a limita utilizarea mediilor i dispozitivelor
digitale
i un dicionar de
ECMA Script – este un limbaj de scripting, folosit la scar larg pe internet,
specialitate. dialectele sale principale ind JavaScript, ActionScript i
Jscript
Flex – 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, având 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
Mambo – este un CMS open source
MP3 – MPEG Layer 3 este un format audio multimedia, având 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
MP4 – este o colecie patentat de metode de compresie pentru
compresie video i audio

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,
1. Cum se numesc funciile prin care putem urca ierele unui website pe
cu rolul de a v internet prin intermediul Adobe Dreamweaver?
verica însuirea a) FTP i Manage Sites;

cunotinelor, poate  b) Manage Sites;

c) FTP i UTP;
trimis spre corectare
d) Manage Sites i HTML.
profesorului
2. Din ce loc, în Adobe Dreamweaver, putem modica culorile linkurilor
personal. Acesta v
dintr-un document?
va oferi îndrumare pe a) Document Properties > Links;
toat durata cursului. b) Page Properties > Link;
c) Page Properties > Links;
d) File > Page Properties.

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

4. Ce funcie ofer editorul 1st Page 2006?

5. De câte feluri pot  template-urile web?

a) gratuite i pltite;
b) HTML i PHP;
c) gratuite, pltite-shared i pltite-unicat;
d) web i nonweb.

6. Ce limbaje de programare suport Adobe Dreamweaver?

7. 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 decât 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 Codul
profesorului
corectare. De ase-
menea, putei rezolva Numele [i prenumele

Adresa
CURS: DESIGN ŞI PROGRAMARE
GR WEB
temele i online, pe Nr. modul: 5
Cod po[tal Localitatea
Num\rul cursantului
site-ul www.eurocor.ro

LU
Observa]iile
bserva]iile profesorului:
profeso
Pentru exerciţiile cu variante de răspuns, un singur răspuns este corect.

1. Cum se numesc funcţiile prin care putem urca fişierele unui websit
website
pe internet prin intermediul Adobe Dreamweaver?
a) FTP şi Manage Sites;
b) Manage Sites;

P
c) FTP şi UTP;
d) Manage Sites şi HTML.

2. Din ce loc, în Adobe Dreamweaver, putem modifica culorile linkurilor

odifica culo
dintr-un document?
a) Document Properties > Links;
EM
b) Page Properties > Link;
c) Page Properties > Links;
d) File > Page Properties.

3. Ce înseamnă WYSIWYG?
WYG
a) o funcţie dedicată pentru
pe t u a introduce cod CSS în editoarele HTML;
EX

b) What You See Is What You Get;

c) o capabilitate de conectivitate a editoarelor HTML;
d) o funcţie de co
cod HTML.

4. f ă edito
Ce funcţie oferă
ofer editorul 1st Page 2006?

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

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

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

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

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