web_desidn

1 //// Design şi programare web

L E C Ţ I E D E M O N S T R A T I V Ă

Lecţiedemonstrativă

I N T R O D U C E R E

Navigând pe internet putem întâlni diverse website-uri: atr�g�toare �i utile, care ne vând lucruri sau care catalogheaz� alte site-uri. Putem s� d�m peste website-uri per-sonale sau peste utilitare online cu diverse func�ii, care ne-au intrat în re� ex: 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 pro� l, 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 na�tere se nume�te webdesign, website-urile � ind opera webdesign-erilor. Webdesignerii sunt speciali�ti 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 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� structur�m acest curs pe dou� coordonate: gra� ca unui website �i programarea.

Acest curs se adreseaz� atât acelora dintre dumneavoastr� care au cuno�tin�e 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 al�turi de Eurocor, pas cu pas, cum se face acest lucru.

Cursul nostru folose�te o abordare diferit�, urm�rind evolu�ia unui website real, pe care îl ve�i putea accesa pe adresa http://www.eurocor.ro/cursdesignsiprogramare-web. 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 exempli� c�ri asupra celor înv��ate în modulul respectiv.

Acest curs poate � considerat o introducere în webdesign. De�i subiectul este unul vast, cerând 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 sfâr�it 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 parcurgând-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�



E x e r c i ţ i u�

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 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 valori� ca în mod curent cuno�tin�ele dobândite; print screen-urile, schemele �i tabelele v� vor înlesni însu�irea informa�iilor; în plus, pentru a v� consolida cuno�tin�ele, la sfâr�itul � 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 veri� care care v� testeaz� gradul de asimilare a cuno�tin�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 e� cientiz�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�mân�.

Fiecare cursant EUROCOR are un profesor personal.

Temele propuse în � ecare lec�ie vor � expediate pe adresa Institutului EUROCOR, urmând 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 cât mai u�or �i e� cient, pe marginea lec�iilor au fost introduse diferite simboluri:

Semnaleaz� no�iunile noi, de� ni�iile sau informa�iile esen�iale

Indic� exerci�iile pe care vi le propunem spre rezolvare

Semnaleaz� exemplele care pot clari� ca 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)

MODUL DE ORGANIZARE A CURSULUI DE DESIGN ȘI PROGRAMARE WEB

E X E M P L U

3/18

Lec�ia de fa�� constituie o lec�ie demonstrativ�, care dore�te 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, con�inând 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.



� ce sunt website-urile?� cu ce se ocup� webdesignerii?� organizarea unui proiect de webdesign: strategiile �i pa�ii generici de dezvoltare

a unui website� care sunt principalele limbaje de programare; cum au ap�rut website-urile?� browsere de internet �i editoarele HTML

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

� 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

� structura logic� �i � zic� a XML� elemente �i atribute XML� diferen�e dintre XHTML �i 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

PROGRAMA CURSULUI DE DESIGN ȘI PROGRAMARE WEB

M O D U L 1

M O D U L 2

M O D U L 3

M O D U L 4

M O D U L 5

Introducere în crearea website-urilor

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

HTML

XML �i XHTML

Editoare HTML



� estetica unui website; cromatica� cum s� nu arate un website – de ce trebuie s� ne ferim atunci când 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.

� cum de� nim CSS?� rolul CSS în website-uri� exemple de CSS în website-uri etc.

� cum s� dezvolt�m 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 con�inutului unui website

� ce este PHP?� instalarea �i con� gurarea� informa�ii de referin�� despre PHP� func�ii� clase �i obiecte

� securitatea� sesiuni de lucru� cookies

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

M O D U L 6

M O D U L 7

M O D U L 8

M O D U L 9

M O D U L 1 0

M O D U L 1 1

Gra� c� �i multimedia în website-uri

Foi de stil în cascad� (CSS)

Dinamica website-urilor �i interac�iunea lor cu utilizatorii

PHP – partea 1

PHP – partea a 2-a

Programarea website-urilor în JAVA



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

� 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?

� ce este promovarea web?� de ce este important s� promov�m un website?� cum s� dezvolt�m un website � ind con�tien�i de la început de tehnicile de

promovare?� reclamele în website-uri: bene� cii, rol� cum s� pozi�ion�m reclamele pe website?� cum se creeaz� un newsletter?

� ce este Web 2.0?� care este viitorul website-urilor?� cât timp poate � „valabil” un website?� tendin�e de dezvoltare a website-urilor

� studii privind website-uri cunoscute� website-uri sub lup�: de ce au sau nu succes? Exemple� recapitularea cuno�tin�elor sub o form� aplicat�

M O D U L 1 2

M O D U L 1 3

M O D U L 1 4

M O D U L 1 5

M O D U L 1 6

Baze de date

Securitatea �i testarea website-urilor

Promovarea website-urilor �i reclamele în website-uri

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

Studii de caz – de ce unele website-uri au succes



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

Ve�i reg�si tot aici �i enun�area obiec-tivelor de studiu ce trebuie atinse la � nalul procesului de înv��are.

Modulul 1 al cursului nostru î�i propune s� explice cât 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 pa�ii pe care îi face un webdesigner profesionist atunci când 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 sfâr�itul acestui curs, s� cre�m, parcurgând to�i ace�ti pa�i, propriul nostru website.

Ca în cazul oric�rui tip de crea�ie, este important ca înc� din stadiul de proiect al website-ului nostru, s� ne gândim cel mai mult la utilizatorul � nal – „vizitatorul”. Este foarte important s� cre�m un website gândindu-ne la utilizator, �i nu la cum am aprecia noi rezultatul � nal. Trebuie s� ne punem în permanen�� în pielea vizitatorului �i s� ne gândim cum ar reac�iona atunci când va vedea pentru prima oar� elementele gra� ce 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 când îl alegem.

MO

DU

L

11 INTRODUCERE ÎN CREAREA WEBSITE-URILOR

� s� în�elegem ce sunt website-urile;

� s� înv��m care sunt mijloacele �i motivele cre�rii unui website;

� s� descoperim la ce trebuie s� � m aten�i atunci când alegem un nume pentru domeniul nostru;

� s� cunoa�tem cu ce se ocup� webdesignerii;

� s� putem organiza un proiect de webdesign în�elegând pa�ii de baz� în dezvoltarea unui website;

� s� facem cuno�tin�� cu principalele no�iuni de programare;

� s� studiem cele mai cunoscute browsere de internet.

O B I E C T I V E




De� ni�iile �i no�iunile importante au fost marcate printr-o gra� c� special�.


M O D U L 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. Entit��ile sunt folosite pentru a reprezenta caractere care nu pot � introduse u�or 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.

O astfel de referin�� con�ine codul hexadecimal care de� ne�te un caracter. Acest cod con�ine întotdeauna caracterul de început „&”, urmat de cod �i apoi terminându-se cu „;”. XML con�ine cinci entit��i prede� nite:

� & (&)

� < (<)

� > (>)

� ' (‘)

� " (“)

Mai jos un exemplu de XML cu numele � rmei C&C Tuning:

<nume_companie>C&C Tuning</nume_companie>

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

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE exemplu [

<!ENTITY copy “©”>

<!ENTITY copyright-notice “Copyright © 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 a� �a urm�torul text:

„Copyright © 2009, Firma Mea”

E X E M P L U

E X E M P L U





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

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, caracte-rele numerice nu trebuie de� nite în DTD-ul documentului XML. Caracte-rele numerice sunt de obicei folosite pentru a reprezenta caractere care nu se pot coda u�or: spre exemplu un caracter de limbaj arabic pe un sistem de operare în englez�.

Semnul „&” din exemplul anterior, poate � , de asemenea, introdus în acest fel într-un document de tip XML, dup� cum urmeaz�:



Atât 38, cât �i 26, în hexadecimal �i decimal, reprezint� semnul „&”.

Vorbeam la începutul acestui capitol de documentele XML corect compuse. Acest capitol î�i propune s� v� prezinte care sunt regulile pentru aceste documente. A�adar, î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 sfâr�it.� Elementele blank trebuie s� con�in� tag-uri de închidere �i deschidere pentru

elemente blank.� 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 când o valoare a unui atribut trebuie s� con�in� 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 prede� nite în XML �i nu au nevoie a � declarate nici m�car atunci când documentul dispune de un DTD sau o schem�.

� Trebuie s� � m aten�i atunci când 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 speci� c� în linia „Content-Type”. Când astfel de declara�ii nu exist�, se alege default encoding de tip Unicode sau UTF-8.

Numele elementelor sunt case-sensitive.

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

caractere numerice

documente XML corect-compuse

E X E M P L U

Multe aspecte teo-retice pot � mai u�or în�elese cu ajutorul exemplelor.

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

Dac� se dore�te 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âr�it:

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

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

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



Î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 attribute_name=”attribute_value”>Con�inutul elementului</element_name>

Cele dou� semne care delimiteaz� „element_name” se numesc tag de început �i tag de sfâr�it. Î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 con�tien�i c� un document XML este format în baza unei structuri arborescente.

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>

E X E M P L U

E X E M P L U

E X E M P L U

E X E M P L U

<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 a� e 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.

Iat� un exemplu de tag-uri de închidere �i de deschidere folosite gre�it:<!—Exemplu de document XML gre�it. --><titlu>Titlu de carte<autor>Autor</titlu></autor>Versiunea corect� a documentului XML de mai sus ar trebui s� � e:<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.

<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” />

E X E M P L U

E X E M P L U




M O D U L 3 HTML

Pe lâng� exemple, pentru facilitarea în�elegerii informa�iilor prezentate, am inserat în paginile cursului imagini �i print screen-uri sugestive.

Vom urm�ri, în cele ce urmeaz�, schi�a logic� care a rezultat dup� studiul de caz din modulul 2: clientul dore�te 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 încât 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, a�a 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>

2/36

scheletul site-ului




M O D U L 2 Tipuri de website-uri; structura şi ergonomia website-urilor

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

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 website-ului, 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, de� nite prin text, generic �i sunt de� nite �i m�rimile elementelor gra� ce.

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, cât �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.

E X E M P L U

Area: header Focus: 6/7 Width: 940px Height: 125px

Area: menu Focus: 7/7 Width: 690px Height: 45px

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

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

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

2

Area: primary sidebarFocus: 3/7 Width: 250px Height: auto

Area: secondary sidebarFocus: 2/7 Width: 250px Height: auto

6

7

5

4

3

1Un element foarte util în acest curs îl reprezint� urm�rirea unui studiu de cazce se întinde de-a lungul întregului curs.





Î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 ni�te aspecte-detaliu împreun� cu clientul:

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 gra� ce �i a fost populat cu ni�te cuvinte cheie.

- Zona 3 – a fost introdus �i un meniu vertical, cât �i o zon� gra� c�.- Zona 4 – zona din mijloc nu mai con�ine con�inut primar �i secundar, cele

dou� zone � ind acum una �i aceea�i.- 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.

E X E M P L U

Logo [217x90, perma]

Valuta

� Convertor valutar

My Convertor

Evolutii si medii valutare

Case de schimb valutar

Stiri si noutati monetare

RSS, Google, Netvibes

Wide Skyscraper[160x600, perma]

Content [500xH]

Calculator [300xH, perma]

Rectangle [300x250, perma]

Info util [300xH, temp / context]

AdSense [470x70, perma]

Footer [990x90, temp / content]

Lungime Masa Viteza Temperatura Consum Lorem ipsum Alte conversii

Leaderboard [728x90, perma] 1

4 7

5

3

6

2

Studiul de caz urm�re�te construc�ia unui website �i tehnologiile implicate în acest proces.





Pute�i descoperi pe site-ul cursului http://www.eurocor.ro/curs-designsiprogramare-web/ noi elemente: – posibilitatea de a

desc�rca �i lucra cu template-uri;

– de a veri� ca online rezultatul studiului de caz din caiet etc.

Acesta vine în com-pletarea informa�iilor din caiet.





Exerci�iile sunt un instrument de veri� -care a cuno�tin�elor dobândite în cadrul modulelor de curs. Constituie un pas util în rezolvarea temei pentru acas�.

E x e r c i ţ i u l 5�

Pentru a veri� ca corectitudinea codului scris, select�m op�iunea „XSL Output” �i vizualiz�m codul în program:

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

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 na�terii, Studii, Ocupa�ie, În�l�ime, Greutate, Ochi, P�r.

Exemple XHTMLDup� 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>



6.1 Designul este primul elementul decisiv când vizit�m un website. Este important s� dezvolt�m un design cât mai simplu, cât mai aerisit �i cât 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.

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

6.3 Nu este nici u�or �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 nume�te brandawareness. O schem� de culori poate in� uen�a vizitatorul s� r�mân� pe website-ul dvs. �i s� efectueze ni�te activit��i (ex. achizi�ionarea de produse sau servicii) sau s�-l p�r�seasc� dup� câteva secunde.

6.4 Iat� câteva „reguli” dup� care v� pute�i ghida atunci când 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 de� nesc vizitatorii dvs.: probleme ale v�zului, vârst�, sex.

6.5 Pentru c� sunte�i la început în „manipularea” culorilor, elementelor gra� ce, conceptelor gra� ce, este bine mai întâi 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”.

6.6 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 cât mai naturale, cât mai potrivite cu designul dvs., cât 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 cât 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.

6.7 Felul în care ve�i a�eza butoanele, elementele gra� ce, textele, felul în care sunt a� �ate toate aceste lucruri va in� uen�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.

6.8 Photoshop este un editor gra� c oferit de compania Adobe Systems. Acest tip de program se mai nume�te �i DPD (Desktop Publishing Program). În acest moment, Photoshop este liderul de pia�� în sfera editoarelor gra� ce �i este, bineîn�eles, produsul cel mai important oferit de Adobe Systems. Este considerat un standard în industria de produc�ie gra� c�.

R E Z U M A T U L M O D U L U L U I 6


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.




R Ă S P U N S U R I L A E X E R C I Ţ I I

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

Exerci�iul 5

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>

(modul 4)




D I C Ţ I O N A R D E S P E C I A L I T A T E

Pentru a v� famil-iariza cu terminologia speci� c� domeniului, caietele de curs con�in �i un dic�ionar de specialitate.

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

Digital Rights – 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

ECMA Script – este un limbaj de scripting, folosit la scar� larg� pe internet, dialectele sale principale � ind JavaScript, ActionScript �i Jscript

Flex – 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, având o interfa�� unitar� format� din controale �i componente. Formatul speci� c 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 reu�it� 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

MP4 – este o colec�ie patentat� de metode de compresie pentru compresie video �i audio

Management




T E M A P E N T R U A C A S Ă 5

Tema pentru acas�, cu rolul de a v� veri� ca însu�irea cuno�tin�elor, poate � trimis� spre corectare profesorului personal. Acesta v� va oferi îndrumare pe toat� durata cursului.

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

1. Cum se numesc func�iile prin care putem urca � �ierele unui website pe internet prin intermediul Adobe Dreamweaver?

a) FTP �i Manage Sites;

b) Manage Sites;

c) FTP �i UTP;

d) Manage Sites �i HTML.

2. Din ce loc, în Adobe Dreamweaver, putem modi� ca culorile linkurilor dintr-un document?

a) Document Properties > Links;

b) Page Properties > Link;

c) Page Properties > Links;

d) File > Page Properties.

3. Ce înseamn� WYSIWYG?

a) o func�ie 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 func�ie de cod HTML.

4. Ce func�ie ofer� editorul 1st 06?

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

a) gratuite �i pl�tite;

b) HTML �i PHP;

c) gratuite, pl�tite-shared �i pl�tite-unicat;

d) web �i nonweb.

6. Ce limbaje de programare suport� Adobe Dreamweaver?

7. 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 decât culoarea alb�. Pute�i trimite linkul paginii astfel create spre veri� care profesorului personal la adresa [email protected] cu subiectul Tema 5 Design �i programare web.



Temele se rezolv� pe formulare speciale, care pot � trimise spre corectare. De ase-menea, pute�i rezolva temele �i online, pe site-ul www.eurocor.ro

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� a�tept�m s� deveni�i cursant al Institutului EUROCOR,înscriindu-v� la cursul de Design �i programare Web!

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

Cum se numesc func iile prin care putem urca fi ierele unui website

pe internet prin intermediulAdobe Dreamweaver?

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

dintr-undocument?

Ce înseamn

Ce func ie ofer

ţ

1. ţ

2.

3. WYSIWYG?

4. ţ editorul 1st Page 2006?

ă ă

ă

ă

ş

a) ;

b) ;

c) ;

d)

a) ;

b) ;

c) ;

d)

a) ţ pentru a introduce cod CSS ;

b) ;

c) ;

d) ţ

FTP i Manage Sites

Manage Sites

FTP i UTP

Manage Sites i HTML.

Document Properties > Links

Page Properties > Link

Page Properties > Links

File > Page Properties.

o func ie dedicat în editoarele HTML

What You See Is What You Get

o capabilitate de conectivitate a editoarelor HTML

o func ie de cod HTML.

ş

ş

ş

ă

Codulprofesorului

Numele [i prenumele

CURS: DESIGN ŞI PROGRAMAREWEB

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

Observa]iile profesorului:

Semn\tura profesorului:

Nr. modul: 5Adresa

Cod po[tal LocalitateaNum\rul cursantului

ATEN}IE !

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

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

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

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

tel. 021/33.225.33; www.eurocor.ro

E XE M

PL U

websit

odifica culo

f

WYG

editooferă

pe t u a

ţ

pentru

ie de coţU

MEE

GR

bserva]iile profesoUUUL

web_desidn

Documents