Tema. Proiectarea cerințelor aplicației Web.

Pe baza modelului client-server şi a hipertextului, spaţiul www a fost creat la începutul anilor
’90 pornind de la ideia integrării unor sisteme informaţionale dispersate în manieră unitară fără
diferenţă între sursele de date.
Scopurile principale ale serviciului World Wide Web sau focalizat asupra asigurării:
1. independenţei de dispozitiv – accesul la Web poate avea loc de pe orice calculator
înzestrat cu un client (browser).
2. independenţa de software – nu există nici o companie care să deţină monopolul
asupra utilizării vreunei componente software web, fie ea server, client sau program
intermediar.
3. scalabilităţii – tehnologiile web folosite cum ar fi URI(identificatorii uniformi de
resurse), protocolul http sau limaj de marcare HTML furnizează aceiaşi interacţiune
cu utilizatorul independent de numărul de resurse web existente sau solicitate şi
localizarea pe diverse gazde internet.
4. caracterului multimedia al conţinutului site-urilor web – oferă o atractivitate mult
mai mare site-urilor web.
Primii ani de existenţă a web-ului sunt reprezentaţi astfel:
- web-ul poate fi privit drept un spaţiu de „aprovizionare” cu date prin intermediul său
realizîndu-se o distribuţie vastă de informaţii;
- utilizatorul este văzut ca un consumator pasiv de conţinut multimedia;
- apariţia e-business-urilor;
- interacţiunea cu vizitatorii şi captarea opiniilor lor prin intermediul unor mijloace cum ar fi
poşta electronică, guestbooks.
- căutările de documente se bazează pe cuvinte cheie sau pe cataloage de termeni.
În actuala etapă a web-ului denumită acum şi web 2.0 sau web social apar noi tipuri de aplicaţii
precum web-blogurile (jurnale web individuale sau coelctive) wiki-uri site-uri corporative, reţele sociale
(social networks)- comunităţi de interese acsate pe un anumit domeniu.
Astăzi apar diverse categorii de aplicaţii web cu noi exigenţe în ceia ce priveşte interacţiunea şi
reutilizarea datelor. Evoluţia în timp a complexităţii permite următoarea clasificare a site-urilor web:
 centrate pe documente - sunt pagini statice, site-uri de prezentare etc.
 interactive – expoziţii virtuale site-uri de ştiri etc.
 tranzacţii – e-banking, e-business;
 colaborative – chat-uri web, aplicaţii de teleconferinţe web, e-learning;
 orientate spre portaluri – concentrate pe comunităţi sau disponibile în mediul afacerilor
electronice, oferă o gamă întreagă de servicii – e-mail, stiri, localitzare de informaţii;
 tip social – blog-uri, spaţii de lucru virtuale.
 sisteme de căutare –motoare de căutare, cataloage de termeni, metamotoare
decăutare.
Pentru a înţelege principiile lucrului efectiv în reţea şi folosirea resurselor acesteia în afaceri
comerciale, dar şi pentru a alege modelul potrivit de site, soluţiile potrivite, etc., este necesar de a
cunoaşte tipurile de Web-site-uri, funcţiile lor şi logica navigării.
Dupa calitatea beneficiarului site-ului WEB (Wikipedia)
 site-uri personale
 site-uri comerciale
 site-uri guvernamentale
 site-uri ale organizatiilor neguvernamentale
Dupa specificul site-ului WEB (Buraga, 2005)
 Site-uri de tip intranet (instruire, documentare)
 Site-uri de continut
 Site-uri de prezentare
1
Dupa functia site-ului (http://team.salvaeco.org/nika/h/clasificarea_web-site.php)
 sisteme de cautare
 motoare de cautare
 directoare WEB
 site-uri tematice
 portal-uri
 site-uri corporative
 site-uri comerciale
Dupa tehnologia folosita (Wikipedia)
 site-uri cu continut static
 site-uri cu continut dinamic

Proiectarea unui site web

Prin proiectarea unui site se înţelege procesul de realizare efectiva a paginilor web, pe
calculatorul propriu.
Asistăm astăzi la apariţia unei palete de site-uri web în peizajul web moldovenesc remarcabile
mai ales din punct de vedere cantitativ, de la site-uri personale pînă la cele de conţinut şi de la site-uri
academice la cele pur comerciale. Putem consodera proiectarea unui site web drept un proces de
proiectare a unei interfeţe pentru un produs software de sinestătător. Pentru aceasta avem nevoie de
imaginaţie, dar si de cîteva noţiuni de web design fundamentale.
Proiectarea unui site web implică de fapt următoarele 3 etape:
 Planificare
 Machetare
 Programare
 Planificare.
Planificarea reprezintă procesul prin care se definesc în mod clar motivele pentru care dorim să
realizam un sit web, de ce mijloace dispunem pentru a realiza acest lucru, care va fi publicul ţintă, etc.
Aspectele pe care trebuie să le luam în vedere atunci când planificam un site- web sunt
următoarele :
 Scop
 Audienta
 Accesibilitate
 Continut
 Copyright
 Efecte speciale
 Feedback
Scop - pentru început trebuie să definim în mod clar obiectivul sau scopul sitului, care trebuie
să fie în concordanţă cu produsul final şiu tema generală a site-ului.
Audienta - după ce a fost stabilit obiectivul site-ului trebuie să vedem cine vor fi utilizatorii
acestuia. Audienta reprezintă publicul ţintă pentru care este realizat situl. Este un element critic
deoarece designul sitului şi conţinutul acestuia sunt în strânsa legătură cu audienta.
Accesibilitatea - aceasta înseamnă ca orice netsurfer trebuie şi poate să aibă acces la site,
indiferent de browserul pe care-l foloseşte, rezoluţia sau dimensiunile ecranului, setările calculatorului
sau eventualele disfuncţii ale vederii.
Conţinut - diferenţa dintre un site atractiv şi unul plictisitor şi neinteresant este dată de
valoarea conţinutului. Aceasta înseamnă că trebuie acordata o atenţie maximă conţinutului, deoarece
pe baza acestuia vor fi dezvoltate structura site-ului şi machetarea paginii.
Copyright - dreptul de autor este reglementat juridic. Un site-web reprezintă o opera de creaţie
intelectuala şi poate constitui obiect al dreptului de autor, adică informaţiile pe care le introducem
într-o pagină personală ne aparţine şi dreptul de autor ne revine în întregime asupra textului respectiv.
2
Daca însa lucram într-o echipa sau suntem angajaţi al unei firme de webdesign, atunci suntem co-autor
şi vom fi protejaţi prin drepturi de autor asupra imaginilor pe care le-am creat, machetării paginii sau
programelor pe care le-am realizat.
Mulţi oameni considera, în mod eronat, ca se pot copia fără a cere acordul nimănui diverse
materiale disponibile on-line (texte, imagini, sunete, fişiere video etc.). Exista într-adevăr site-uri de
unde se pot copia astfel de fişiere sau de unde se poate încărca software gratuit. Pe aceste situri vom
găsi o nota explicita care va permite utilizarea acestora. Termenul de copyright este specific american,
dar se foloseşte şi în Europa şi pe alte continente, cu aceeaşi semnificaţie: drept de autor.
Efecte speciale - dau o notă spectaculoasă paginilor realizate. Printre cele mai folosite se pot
enumera: imagini animate, scrolling marques, texte blink, appleturi Java, Javascript, animatii
shockwave, Flash, ActiveX, etc.
Feedback (interacţiunea cu vizitatorii) – oferă comunicare în ambele sensuri adică între
webmaster şi vizitator. Îmbunătăţirea metodelor prin care utilizatorii interacţionează cu un oarecare
site este esenţială pentru crearea unui site bun. Folosirea feedback-ului este foarte importantă pentru
creşterea numărului de vizitatori şi pentru ca aceştia să-şi exprime opiniile, sugestiile şi comentariile
în legătură cu un site web.
o E-mail.
o Cărţi de oaspeţi ( guestbooks ).
o Lista de discuţii ( discussion list ).
o Contoare de pagina ( counters ).
 Machetare
Prin machetarea unei pagini web se înţelege modul cum sunt aranjate elementele constitutive
ale unei pagini: conţinut, grafica, legături, sistem de navigare, elemente multimedia, etc.
În cadrul aceluiaşi proces de machetare se va analiza structura paginii. Pentru ca toate
informaţiile să fie prezentate într-un mod atractiv şi original, o pagina web poate să fie simplă sau
împărţita în :
 cadre
 tabele simple
 tabele multiple sau imbricate
 combinaţie a acestor elemente
Felul cum vor fi aranjate elementele componente într-o pagina web depinde numai de
imaginaţia şi bunul gust al fiecăruia.
Cînd începem operaţiunea de machetare a sitului, trebuie să luam în calcul următoarele
aspecte:
o stilul pe care-l vom imprima pe pagini.
o conţinut
o grafică
o legături
o sistem de navigare
o elemente multimedia
o modul de împărţire în pagina
o cadre ( frames )
o tabele
Stil - putem uşor observa, că ziarele şi revistele acorda o mare importanta stilului în care se
editează. La fel trebuie să fie realizat şi un site web adică va trebui să găsim o notă deosebită, un
aranjament ingenios pentru aceste pagini. Ele trebuie să se diferenţieze net şi chiar să iasă în evidenta,
în mulţimea site-urilor web. Cu toate acestea, va trebui să păstram un stil unitar, ce se poate realiza
prin :
 stilul de scriere
 modul de aranjare în pagina
 folosirea spatiilor goale
3
 Pagina web nu trebuie să arate ca un bloc masiv de text. Se poate de împărţit conţinutul în
bucăţi mai mici, numite paragrafe. Fiecare paragraf conţine una sau mai multe propoziţii şi este separat
de celelalte paragrafe sau de titlu prin spatii goale. În acest mod, textul se poate citi mult mai uşor şi
fără a obosi ochii.
Grafica - se foloseşte, în principal, pentru îmbunătăţirea aspectului unui site şi creşterea
atractivităţii acestuia. Este recomandat să includem însa numai imaginile absolut necesare şi care sunt
într-adevăr valoroase. Nu trebuie ca pagina web să arate ca o însuşire de imagini, indiferent cît de
remarcabile ar fi acestea. Exista şi excepţii, reprezentate de site-urile web specializate şi construite
exclusiv pentru oferirea de imagini grafice, gratuite sau contracost. În acest caz, se folosesc thumbnails.
Legături -atunci cînd se realizează machetarea sitului, o mare atenţie trebuie acordată
legăturilor (hyper-legaturilor) care este reprezentată printr-un text de culoarea albastra, subliniat (
reprezintă o legătură nevizitată).
Legăturile pot fi :
a) interne ( către alte pagini din interiorul sitului )
b) externe ( către alte situri din Internet )
O legătură vizitată apare ca un text în culoarea roşie sau purpurie, de asemenea subliniat.
Acestea sunt culorile standard pentru legături şi este bine să le folosim ca opţiune de baza. Textul
legăturilor trebuie să fie scurt şi sugestiv.
Pentru o buna navigare, trebuie de pus o legătură către pagina principală în toate paginile
componente. În final, trebuie să ne asiguram ca am testat toate legăturile interne şi externe.
Navigare - meniul de navigare este o reprezentare grafica sau de tip text a conţinutului şi este
adesea încorporat în tema generala a sitului. Meniul principal trebuie să furnizeze trimiteri rapide şi
directe la secţiunile şi informaţiile disponibile dintr-un site web. El va fi realizat într-o forma practica şi
atractiva. Locul obişnuit pentru plasarea meniului principal este în partea stânga a ecranului dar el mai
poate fi plasat şi în partea dreapta sau în partea superioara a paginii web. Secţiunile meniului vor fi
denumite astfel încât să ofere o descriere concisa şi sugestiva a paginilor web care vor fi accesate.
Cîteva dintre schemele de navigare cele mai des întâlnite sunt următoarele:
o legături text
o harţi grafice ( imagemaps )
o butoane de navigare
o meniuri tip lista derulanta ( generate cu Javascript , CGI )
o pagini generate dinamic
o harta sitului ( site map )
Cheia pentru o navigare uşoara este o buna organizare. Cu cît site-ul va fi mai mare şi mai
complex, cu atît va fi mai dificilă sarcina organizării acestuia şi realizării unui sistem de navigare
consistent.
Cadre - ne permit să afişam doua sau mai multe pagini web, în acelaşi timp, prin împărţirea
ecranului în mai multe secţiuni independente. Ele reprezintă o metoda controversata de machetare a
unei pagini web. În rîndul web-designerilor există susţinători şi adversari ai folosirii cadrelor ca o soluţie
eficienta de aranjare în pagina. De aceea, înainte de a ne hotărî asupra folosirii cadrelor în site-ul
nostru, analizam modul cum dorim să organizam şi să structuram paginile web. Folosirea cadrelor
prezintă atît avantaje cît şi dezavantaje.
Tabele - sunt folosite atît pentru o machetare eficienta cît şi pentru a face mai atractive
diversele elemente componente ale unei pagini web. Ele permit o împărţire a paginii în secţiuni şi o
poziţionare precisa a textului sau imaginilor în interiorul paginii.
Putem crea margini sau borduri de diferite dimensiuni şi culori. De asemenea, se poate
încapsula conţinutul în celulele tabelului pentru a permite alinierea textului şi a limita lungimea liniilor.
Atunci cînd folosim tabele, putem să setam o lăţime fixă, în pixeli, sau o lăţime relativă la dimensiunea
ecranului, în procente.
 Programare

4
 Programarea este etapa de transformare a informaţiilor acumulate într-o pagină web efectivă.
Pentru aceasta, trebuie să avem instalat pe calculator instrumentul cu care se poate vizualiza un site
web, browser-ul. După aceea, avem nevoie de mai multe programe şi utilitare. O pagină web simpla
poate fi realizata folosind limbajul HTML. Daca nu cunoaştem acest limbaj, nu este nici o problema.
Putem construi pagini web folosind editoare HTML vizuale sau putem să căutam site-uri unde ni se pun
la dispoziţie şabloane de pagini web. Mai avem nevoie de un editor grafic, pentru a putea realiza şi
prelucra imaginile pe care dorim să le inseram în paginile web.
Browser-ul reprezintă instrumentul cu care se vizualizează paginile web. Daca putem vedea
aceasta pagina web, înseamnă ca avem instalat pe calculator cel puţin un browser. În prezent, exista
foarte multe browsere. Cele mai folosite ( aproape 90% din numărul de utilizatori ) sunt:
 Internet Explorer
 Opera
 Netscape Navigator
Putem să realizam un site web chiar daca nu ştim HTML. Pentru aceasta avem nevoie de un
editor HTML. Acestea se împart în doua categorii:
 Editoare de tipul WYSIWIG ( What You See Is What You Get ), sau în traducere: Ceea ce
vezi este ceea ce obtii.
 Editoare în cod HTML .
Editoare WYSIWIG - se pot folosi foarte uşor chiar şi de către începători. Deşi au foarte multe
opţiuni şi butoane, realizarea unei pagini web simple este relativ uşoară. Aceasta cu atît mai mult cu
cît avem la dispoziţie şabloane (templates). Tot ce avem de făcut este să copiem textul pe care-l avem
deja pregătit într-un editor text ( MSWord ), să adăugăm cîteva imagini, legături şi pagina web este
gata.
Bineînţeles că se pot realiza şi site-uri web mai complexe, dar pentru acest lucru avem nevoie
de o documentaţie despre editorul respectiv sau să studiem cu atenţie meniul Help.
Editoare in cod HTML - dacă ştim limbajul HTML şi dorim să edităm o pagină web în mod
profesionist, putem să folosim aceste editoare. La fel ca şi editoarele WYSIWIG, şi acestea ne permit
să vizualizam cum va arata pagina web pe care o realizam. În plus, au o grămadă de alte facilităţi care
ne uşurează munca de machetare şi realizare a unei pagini web.

Aplicatii web
Orice aplicatie web finalizata cu succes are la baza o planificare corecta a pasilor ce trebuie urmati si
trebuie sa incepem prin a raspunde la cateva intrebari esentiale si anume:
 ce trebuie facut ?
 la ce termene ?
 cu ce costuri ?
 in ce conditii si pentru ce beneficii ?
 unde vreau sa ajung?
De ce sa aleg o aplicatie web ?
 productivitate marita,
 management eficient al informatiei,
 reducerea costurilor ulterioare,
 gestionarea rapida si eficienta a continutului, ofertelor, grupurilor de clienti ...
Cum realizam aplicatia web ?
In functie de cerintele proiectului si a produsului final pe care trebuie sa-l obtinem, proiectul se poate
dezvolta prin :
 programare pe CMS-ul propriu (Zend Framework),
 programare pe unul din CMS-urile open source gen WordPress, Magento sau Drupal
 programare de la zero.
Cum va fi produsul final ?
Principalele caracteristici care trebuie sa defineasca o aplicatie web sunt:
5
  simplitate in design,
 usurinta in navigare / utilizare ( uzabilitate web ),
 convingerea vizitatorilor sa actioneze (persuasiune prin call to action).
Cu ce Tehnologii realizam aplicatia ?
 limbaje markup si stylesheet HTML & XHTML, XML, CSS,
 limbaj de programare PHP, Flash, JavaScript, Actionscript,
 baze de date MysQL

6
7