Web Design

Proiectarea aplicaiilor Web
Capitolul III ..........................................................................................................................1

Proiectarea aplicaiilor Web ................................................................................................1
3.1. Metodologii de realizare ...........................................................................................1
3.2. Dezvoltarea aplicaiilor Web .....................................................................................9
3.2.1. Fazele de realizare a aplicaiilor Web ....................................................................9
3.2.2. Echipa de realizare .............................................................................................. 13
3.2.3. Analiza cerinelor ................................................................................................ 15
3.2.4. Etapele proiectrii aplicaiilor Web ..................................................................... 15
3.2.5. Proiectarea interfeei ........................................................................................... 19
3.2.6. Proiectarea esteticii aplicaiei Web ...................................................................... 21
3.3. Proiectarea arhitectural a unei e-afaceri............................................................... 24
3.4. Testarea i nregistrarea site-ului ............................................................................ 27
3.5. Intereinerea i actualizarea site-ului ...................................................................... 28
Capitolul III
3.1. Metodologii de realizare
Modelarea proceselor economice reprezint o condiie esenial n realizarea unor sisteme
informatice complexe, care s realizeze cerinele funcionale dorite. Un model reprezint un
set de procese care cuprind diverse cerine operaionale necesare n atingerea unor obiective
ale procesului de afaceri. Astfel etapele de analiz i proiectare a arhitecturii unui sistem de
comer electronic sunt extrem de importante, deciziile corecte trebuie s fie luate nc din
fazele iniiale ale proiectului. Totalitatea etapelor parcurse n procesul de dezvoltare a unei
aplicaii reprezint ciclul de via al acesteia. Etapele acestui proces sunt (figura 3.1.):
Culegerea specificaiilor definirea problemei, specificarea detaliat a funcionalitilor pe
care sistemul informatic trebuie s le ndeplineasc;
Analiza cerinelor etapa n care se identific caracteristicile eseniale care definesc o
anumit soluie, pornind de la anumite cerine;
Proiectarea adaug elemente noi ale soluiei construite n etapa de analiz, pe baza
optimizrii anumitor criterii;
Implementarea etapa n care se realizeaz un proiect executabil pornind de la soluia
construit n faza de analiz;
Testarea etapa de verificare a echivalenei sistemului informatic implementat cu modelul
creat n etapa de analiz [Avornicului2004].
Figura 3.1. Etapele realizrii unui sistem informatic1
Procesul de WebE (inginerie Web) are ca rol central dezvoltarea sistemelor Web. Soluia de
dezvoltare incremental este propus de [Roger S. Pressman, 2005].
Figura 3.2. WebE2
Adaptare: Chaffey, D. E-Business and E-commerce Management, Second Edition, Ed.Prentice Hall, 2004,
p. 431
2
dup Roger S. Pressman, Software Engineering, A Practitioners Approach,6-th edition, 2005

Fa de sistemele informatice clasice, dezvoltarea aplicaiilor Web are abordri specifice date
de actorii participani i caracteristici. Actorii participani sunt diversificai: analiti, designeri,
experi n marketing, multimedia i securitate i utilizatorii crora le este destinat aplicaia.
Caracteristicile principalele ale sistemelor Web sunt: structura de navigare, interfaa cu
utilizatorul i capacitatea de personalizare. In proiectarea interfeei cu utilizatorul intervin
aspecte multimedia, marketing, ergonomie i interaciune om-calculator.
Din acest motiv modelul analitic pentru aplicaii Web este descompus n:
Modelul coninutului
Modelul interaciunilor
Modelul funcional
Modelul configuraiei
Metodele de modelare existente la ora actual ofer aceste elemente de modelare specifice
pentru analiz i proiectare, propun procese specifice pentru a sprijini dezvoltarea sistematic
sau semi-automat a aplicaiilor Web i unele definesc o notaie proprie utilizat pentru
reprezentarea grafic a elementelor.
Vom face o succint trecere n revist a dintre metodologiile Web existente:
NDT Navigational Development Techniques,
OOHDM - Object-Oriented Hypermedia Design Method,
UWE - UML-based Web Engineering,
W2000
W3DT -World Wide Web Design Technique
HDM - Hypertext Design Model
SOHDM - Scenario-based Object-Oriented Hypermedia Design Methodology
RNA: Relationship-Navigational Analysis
WSDM - Web Site Design Method ("WiSDoM")
UWA- Ubiquitous Web Application
WebML Web Modeling Language
Un rol important are analiza detaliat a cerinelor ca un punct cheie n dezvoltarea sistemelor
software. Ingineria software demonstreaz c analiza complet a cerinelor reduce problemele
din fazele urmtoare. Specificarea cerinelor sau descrierea cerinelor este realizat prin
diferite tehnici: descrierea textual informal, specificaia formal (n limbaje Z). Un
metamodel comun pentru reprezentarea conceptelor i relaiilor ingineriei cerinelor Web
(Web requirements engineering (WebRE) este realizat de Escalona i Koch (2004).
Unele metodologii Web propun tehnici clasice pentru analiza cerinelor, altele ncep ciclul de
dezvoltare cu o analiz detaliat a cerinelor. Menionm aici: NDT Navigational
Development Techniques, OOHDM - Object-Oriented Hypermedi Design Method, UWE UML-based Web Engineering, W2000 [Escalona i Koch, 2004].
Metodologiile de proiectare conceptual ofer o privire de ansamblu asupra sistemului, din
punctul de vedere al utilizatorilor i fac abstracie de detaliile de implementare. Modelarea
conceptual este specific sistemelor complexe. Intre modelul conceptual al unei aplicaii
Web i implementarea sa trebuie s existe niveluri de proiectare intermediar pentru a
concentra efortul de dezvoltare.

O clasificare a metodologiilor de proiectare a aplicaiilor Web poate fi realizat n funcie de
accentul pus pe proiectarea conceptual (a problemei -ce) sau pe cea logic (a soluiilor
cum). Proiectarea logic n domeniul soluiilor este tratat de UWA- Ubiquitous Web
Application, OOHDM, OOWS - Object-Oriented Web Solution i OO-H - Object-Oriented
Hypermedia Method. UWE i WebML Web Modeling Language sunt metodologii hibride,
tratnd att proiectarea conceptual ct i proiectarea logic [Distante et al. 2007].
Tendina actual este de a se dezvolta spre abordri integrate, care s acopere ntreg ciclul de
via al aplicaiilor Web. Amintim astfel OO-H, OOWS, UWE i OOHDM.
WSDM - Web Site Design Method (WiSDoM) este o metodologie centrat pe utilizator,
care modeleaz aplicaia pe baza cerinelor informaionale ale grupurilor de utilizatori i are n
vedere necesitile vizitatorilor i ceea ce conduce la un grad mai mare de utilizabilitate i de
satisfacie (De Troyer, 1998). In acest caz procesul de dezvoltare este mprit n patru faze:
1. Modelarea audienei, cnd utilizatorii sunt clasificai i grupai n vederea studierii
cerinelor sistemului potrivit fiecrui grup de utilizatori;
2. Proiectarea conceptual, unde este proiectat o diagram clas pentru a reprezenta
modelul static al sistemului i un model de navigare, pentru a reprezenta posibilitile de
navigare;
3. Proiectarea implementrii, transpune modelele proiectrii conceptuale ntr-un limbaj
abstract, uor de neles de ctre calculator;
4. Implementarea, n care rezultatul proiectrii implementrii este scris ntr-un limbaj
specific (php, asp, JavaScript, Ajax,etc).
In faza de modelare a audienei i propune s identifice diferitele roluri ale utilizatorilor n
cadrul a dou sub-faze:
1.1.Clasificarea utilizatorilor, prin identificarea potenialilor utilizatori/vizitatori ai
site-ului Web i clasificarea lor n funcie de interesele lor i de preferinele de
navigare;
1.2. Descrierea grupurilor de utilizatori, adic descrierea, pentru fiecare grup
identificat n sub-faza anterioar, a cerinelor informaionale, funcionale i de
securitate.
Clasificarea utilizatorilor realizata n prima faz st la baza celorlalte faze din procesul de
dezvoltare. WSDM face o distincie clar ntre proiectarea conceptual (care nu conine nici
un detaliu de implementare) i proiectarea prezentrii, care se bazeaz pe limbajul de
implementare. Aceast separare este similar cu distincia n proiectarea bazelor de date ntre
schema conceptual i schema logic.
HDM (Hypertext Design Model), este un model conceptual pentru aplicaii hipermedia, care
separ modelarea informaiilor, modelarea navigrii i modelarea prezentrii. Obiectele de tip
informaie sunt conectate prin legturi semantice, iar structurile interne ale obiectelor de tip
informaie sunt reprezentate prin legturi structurale ntre componente.
W2000 este o metodologie orientat obiect derivat din HDM, pe principiul SoC (Separation
of Concerns) n timpul procesului de dezvoltare. W2000 extinde notaia UML la modelarea
aplicaiilor hipermedia. Analiza cerinelor n W2000 este mprit n dou subactiviti:
analiza cerinelor funcionale i analiza cerinelor de navigare. Fiecare actor identificat n
4

faza de analiz a cerinelor are propriul model de cerine funcionale i de navigare[Baresi et
al., 2001]. W2000 organizeaz proiectarea unei aplicaii hipermedia complexe n jurul a patru
dimensiuni:
1. Informaia, definind entitile informaionale conceptuale de baz percepute de
utilizator i diferitele structuri de acces permind utilizatorului s le acceseze pe baza
necesitilor sale;
2. Navigarea, definind structurile de navigare principal n termenii nodurilor i
legaturilor (links), permind utilizatorului s le parcurg;
3. Prezentarea, definind structura paginii n termenii aspectelor de prezentare i
elementelor grafice, precum i ai organizrii i navigrii n pagin;
4. Procesul de business, definind procesele utilizatorului unei aplicaii Web n termenii
proceselor i operaiilor [Perrone et al. 2004].
ARANEUS separ proiectarea bazei de date i proiectarea hipertext, dar ignor problemele
navigrii n favoarea modelrii informaiilor. Dei obiectele de tip informaie sunt
reprezentate ca reele de componente, rolul central al proiectrii bazei de date n ARANEUS
impune numeroase restricii pentru obiectele nestructurate de tip informaie i proiectarea
navigrii [Jitaru, 2010].
W3DT - World Wide Web Design Technique este procesul de dezvoltare cuprinde 7 pai:
1. Analiza cerinelor, unde este este furnizat o colecie de metode pentru a determina
cerinele utilizatorilor. Faza de proiectare este mprit n:
2 structurarea informaiilor,
3 proiectarea navigrii,
4 proiectarea organizaional
5 proiectarea interfeei.
6. Implementarea
7. Testarea
Structurarea informaiilor i proiectarea navigrii sunt abordate ca un proces iterativ, n care
un domeniul de cunotine este organizat i structurat n obiecte informaionale, care apoi sunt
legate i evaluate. n faza de implementare, obiectele informaionale sunt implementate prin
pagini HTML i scripturi, iar structurile de acces al modelului sunt implementate prin legturi
n cadrul site-ului Web. n metamodelul W3DT, un sistem informatic bazat pe Web este
compus din pagini, legturi i machete i sunt difereniate dou tipuri diferite de legturi i
patru tipuri diferite de pagini.
OOHDM - Object-Oriented Hypermedia Design Method propune dezvoltarea de modele
separate: conceptual, de navigare i interfaa abstract pentru sistemele Web. Modelul de
navigare este construit cu o varietate de concepte, printre care contextul de navigare.
Procesul OOHDM este mprit n patru faze:
Modelul conceptual - reprezentat ca un model clas, construit pentru a arta aspectele
statice ale sistemului;
Modelul de navigare - const dintr-o diagram clas de navigare (reprezentnd
posibilitile statice ale navigrii n sistem) i o diagram de structur de navigare
(incluznd structurile de acces i contextele de navigare);
Modelul interfeei abstracte este dezvoltat folosind o tehnic special numit ADV;
Implementarea-const n codul implementat i se bazeaz pe modelele dezvoltate.
OOHDM a fost extins ulterior cu o tehnic special ce se ocup de interaciunea cu
utilizatorul n faza de analiz a cerinelor numit User Interaction Diagram (UID) i
5

construit pentru interaciunea special a utilizatorului Web cu sistemul Web. Diagramele
UID se bazeaz pe tehnica USE_CASE (cazurilor de utilizare). Dei USE_CASE sunt folosite
pentru a captarea cerinelor, OOHDM le consider ambigue i insuficiente pentru definirea
cerinelor aplicaiilor Web, n special n ceea ce privete interaciunea utilizator i sistem
(Human Computer Interaction-HCI). Aceast metodologie sugereaz rafinarea cazurilor de
utilizare construind diagrame UID pentru specificarea cerinelor. Diagrame UID sunt folosite
pentru a modela grafic interaciunea dintre utilizator i sistem fr a lua n consideraie
aspectele specifice ale interfeei [Vilain et al., 2000].
SOHDM - Scenario-based Object-Oriented Hypermedia Design Methodology a fost
considerat prima abordare cu accent pe importana unui proces de analiz i care permite s
defineasc cerinele aplicaiilor. SOHDM este similar cu metodologia OOHDM, cu
meniunea cpropune o specificare a cerinelor bazat pe scenarii. Ciclul de via SOHDM
cuprinde ase etape:
1. Analiza, faza n care sunt descrise cerinele utiliznd scenarii;
2. Realizarea modelului obiect, care construiete o diagram clas pentru a prezenta
structura static a sistemului;
3. Proiectarea prezentrii, ce exprim modul n care sistemul va fi prezentat
utilizatorului;
4. Proiectarea navigrii, unde se dezvolt un model de clas de navigare, ce exprim
posibilitile de navigare n sistem;
5. Realizarea implementrii,unde sunt dezvoltate paginile Web, interfaa i baza de date;
6. Construirea sistemului.
Definirea cerinelor ncepe cu proiectarea unei diagrame de context, similar diagramei
fluxului de date (DFD) definit de Yourdon (1989). Analistul identific entitile externe care
interacioneaz cu aplicaia i evenimentele care declaneaz comunicarea ntre aceste entiti
i aplicaie. Setul de evenimente este specificat ca un tabel ce arat entitile ce particip la un
eveniment. SOHDM propune asocierea unui scenariu la fiecare eveniment. Reprezentarea
grafic a scenariilor este realizat folosind o notaie proprietar numit Scenario Activity Chart.
Un scenariu descrie procesul de interaciune ntre utilizator i aplicaie, atunci cnd un
eveniment declaneaz o activitate. Acesta specific fluxul activitii, obiectele implicate i
tranzacia realizat. SOHDM propune un proces pentru a obine modelul conceptual al
aplicaiei din aceste scenarii. Modelul conceptual propus este reprezentat printr-o diagram
clas. Urmtorul pas n procesul de dezvoltare SOHDM este regruparea acestor clase cu
obiectivul de a obine o diagram clas de navigare.
RNA: Relationship-Navigational Analysis este o metodologie care ofer o secven de pai
pentru a dezvolta aplicaii Web, cu accent pe faza de analiz. Fazele RNA sunt:
Analiza mediului, cu obiectivul de a analiza caracteristicile audienei: actorii aplicaiei, care
apoi sunt clasificai n diferite grupuri n funcie de rolurile lor (similar cu faza de modelare a
utilizatorilor din metodologia WSDM);
Analiza elementelor, care identific toate elementele de interes ale aplicaiei (documente,
forme, informaii, mock-ups etc.);
Analiza metacunotinelor, n care se construiete o schem a aplicaiei. RNA i propune s
identifice obiectivele, procesele i operaiile legate de aplicaie i s descrie relaiile dintre
aceste elemente;
Analiza navigrii, unde schema din faza anterioar este completat cu facilitile i
caracteristicile de navigare;
6

Analiza implementrii, n care este identificat modul n care modelele descrise n faza
anterioar vor fi implementate n limbajul calculatorului.
RNA ofer doar cteva ghiduri de aciune pentru fiecare faz i nu sunt propuse concepte de
modelare sau o notaie proprie n schimb este una dintre metodologiile care pun accent pe
importana specificrii cerinelor n procesul de dezvoltare al aplicaiilor Web. RNA
subliniaz necesitatea separrii analizei cerinelor conceptuale de analiza cerinelor de
navigare.
HFPM: Hypermedia Flexible Process Modeling este o abordare ce include strategii de
modelare a procesului descriptive, orientate pe analiz, i prescriptive. HFPM include task-uri
tehnice, de management, cognitive i participative, furnizeaz recomandri (ghiduri) pentru
planificarea i conducerea unui proiect Web, acoperind ntreg ciclul de via a unui astfel de
proiect software. HFPM const din 13 faze, pentru fiecare fiind definit un set de task-uri
[Olsina, 1998]:
Modelarea cerinelor definete urmtoarele task-uri
Descrierea problemei;
Descrierea cerinelor funcionale;
Modelarea datelor;
Modelarea interfeei cu utilizatorul;
Descrierea cerinelor ne-funcionale.
Faza de Dezvoltare are definite task-urile:
Modelarea cerinelor software;
Modelarea conceptual;
Modelarea navigrii;
Modelarea interfeelor abstracte;
Proiectarea modelului de lucru;
Criterii cognitive;
Integrare/modelare fizic;
Documentare.
UWE - UML-based Web Engineering este o metodologie UML (Unified Modeling
Language) pentru Web orientat pe model care acoper ntregul ciclu de via al dezvoltrii
aplicaiilor Web, cu accent pe aplicaiile adaptive. UWE ofer: o notaie bazat pe UML, o
metodologie i un instrument pentru dezvoltarea sistematic a aplicaiilor Web. Proiectarea
sistematic urmeaz principiul SoC (Separation of Concerns), o caracteristic intrinsec a
domeniului Web, i construiete modele separate pentru cerine, coninut, navigare,
prezentare, proces, adaptare i arhitectur. UWE include o faz de inginerie a cerinelor
specifice n care elicitarea, specificarea i validarea cerinelor sunt tratate ca activiti separate
ale procesului. Rezultatul final al captrii cerinelor n UWE este un model al cazului de
utilizare completat cu documentaia care descrie utilizatorii aplicaiei, regulile de adaptare,
interfeele i detaliile cazului de utilizare relevant pentru implementare. Documentaia poate fi
descris textual sau modelat prin diagramele de activitate UML. UWE clasific cerinele n
dou grupuri: funcionale i ne-funcionale. Cerinele funcionale privesc:
coninutul;
structura;
prezentarea;
adaptarea;
7
modelul utilizator.
UWE propune tehnice specifice pentru captarea cerinelor i cazurile de utilizare: interviurile,
chestionarele i listele de verificare (checklists), i pentru specificarea cerinelor: scenariile i
glosarele. Validarea cerinelor n UWE este realizat prin: parcurgeri (walk-through), audituri
i prototipuri.
WebML - Web Modeling Language este un sistem de notaii pentru specificarea vizual a
siturilor complexe la nivel conceptual. [Ceri et al., 2000].
Limbajul WebML ofer instrumente i notaii elementare pentru modelarea hipertext. Baza
este modelul Entitate-Relaie care folosete concepte simple i expresive pentru specificarea
modelelor exprimate prin notaii grafice intuitive. Modelul WebML este o prelungire a
modelului Entitate-Relaie, care d posibilitate programatorului s extind schema de date a
aplicaiei cu specificarea hipertextului utilizat pentru publicarea i manipularea datelor.
Componentele principale ale WebML sunt: paginile, unitile i legturile, organizate n
structuri modulare numite zone i vederi ale site-ului (site views). Unitile sunt fragmente
atomice de coninut, care ofer alternative de combinare dinamic a coninutului extras din
entiti i relaii al schemei de date. Unitile permit specificarea formelor de introducere a
datelor de ctre utilizatori. Paginile sunt formate din uniti, care sunt elementele de interfa
oferite utilizatorilor. Paginile i unitile sunt conectate ntr-o structur hipertext. Legturile
reprezint baza modelrii hipertext i ofer posibilitatea de navigare i transmitere de
parametri de la o unitate la alta, pentru generarea coninutului unei pagini.
Specificarea site-ului n WebML const din 4 modele:
modelul structural, care exprim coninutul site-ului sub form de entiti i relaii;
modelul hipertext, care descrie unul sau mai multe hipertexte care pot fi publicate pe
site. Fiecare hipertext diferit definete o vedere a site-ului (site view).
Descrierile vederilor site-ului constau din dou submodele:
modelul compoziie, care specific ce pagini compun hipertextul i unitile de
coninut ale acestor pagini;
modelul de navigare, exprim legturile stabilite ntre pagini i uniti de
coninut pentru a forma hipertextul;
modelul prezentrii, care exprim aranjamentul i aspectul grafic al paginilor,

independent de tehnologiile de ieire i de limbajul folosit, prin intermediul unei
sintaxe XML abstracte;
modelul de personalizare, n care utilizatorii i grupurile de utilizatori sunt modelai
explicit n schema structurii n forma unor entiti predefinite, numite Utilizator i
Grup.
Toate conceptele WebML sunt asociate cu o notaie grafic, ceea ce l face accesibil. WebML
poate fi asociat ca un profil UML pentru dezvoltatorii de aplicaii Web. Conceptele WebML
pot fi exprimate folosind diagramele de clasa UML i pot fi utilizate n conjuncie cu
modelarea orientat obiect UML pentru a extinde analiza dirijat de model. WebML a stat la
baza WebRatio (www.webratio.com). WebRatio pune baza pe modelarea i reutilizarea
implementrilor precedente, care sunt generate automat sau semiautomat din modele de nivel
nalt.
NDT - Navigational Development Techniques este o tehnic utilizat pentru specificarea i
analiza aspectelor privind navigarea n aplicaiile Web. NDT pune accent pe tehnici de
8

elicitare i specificare selectate de NDT pentru captarea i definirea cerinelor. Fluxul de lucru
al analizei cerinelor prin aplicarea unor tehnici ca interviul, brainstorming-ul i JAD
[Escalona et al. 2004]. n pasul al doilea sunt captate i descrise obiectivele sistemului. Pe
baza acestor obiective sunt identificate cerinele sistemului. NDT le clasific n: cerine de
stocare a informaiei, cerinele actorilor, cerine funcionale, cerine de interaciune, cerine
nefuncionale. Cerinele de interaciune sunt reprezentate prin fraze i prototipuri de
vizualizare. Frazele arat cum sunt regsite informaiile sistemului i sunt reprezentate printrun limbaj special BNL (Bounden Natural Language). Prototipurile de vizualizare sunt
utilizate pentru a reprezenta sistemul de navigare, vizualizarea datelor i interaciunea
utilizatorului. Procesul de elicitare i specificare a obiectivelor i cerinelor propus de NDT se
bazeaz pe abloane (templates) i modele (patterns).
UWA - Ubiquitous Web Applications design framework ofer o metodologie i un set de
modele i instrumente pentru proiectarea conceptual, centrat pe utilizator, a aplicaiilor Web
ubicue. UWA este destinat pentru proiectarea aplicaiilor care intenioneaz s fie ubicue
accesibile diferitelor tipuri de utilizatori, n diferite contexte de utilizare i cu diferite scopuri
i HCI (centrate pe utilizator) [UWA Consortium, 2002].
Problema modelrii este divizat n aspecte specifice ale proiectrii :
Elicitarea cerinelor, pentru a defini ce aplicaie trebuie realizat;
Proiectarea hipermedia, pentru a modela datele i modul n care pot fi parcurse
(navigare) i prezentate i operaiile (serviciile) care sunt disponibile utilizatorului;
Proiectarea tranzacional, pentru a modela comportamentul tranzacional expus de
aplicaie;
Proiectarea personalizat, pentru a specifica modul n care aplicaia trebuie s se
adapteze la context i n special la utilizator, tehnologie, canale de comunicaie i
locaie.
Fiecare activitate de modelare este definit n termenii unui metamodel, care capteaz setul de
concepte i primitive relevante, o notaie, bazat pe UML pentru a reprezenta conceptele, un
set de recomandri (ghiduri) i euristici. Proiectantul exploatez conceptele i nelege
negocierile ntre diferite soluii de proiectare i un set de instrumente, pentru a realiza
procesul de proiectare i a fora coerena i consistena proiectrii. UWA furnizeaz un cadru
de lucru unificat, care integreaz diferite metamodele i notaii n interdependen reciproc i
un mediu software unificat, bazat pe Rational Rose, cu instrumente specifice fiecrei activiti
de modelare.
3.2. Dezvoltarea aplicaiilor Web

3.2.1. Fazele de realizare a aplicaiilor Web
Pentru realizarea unei aplicaii profesionale multimedia sau Web se parcurg 5 faze majore
(figura 3.4.):
1. Conceptia (culegerea specificaiilor i analiza)
2. Realizarea propriu zis ( proiectarea, testarea, realizarea prototipului)
3. Publicarea i promovarea aplicaiei (testarea prototipului)
4. Exploatarea i ntreinerea aplicaiei (modificarea i dezvoltarea prototipului)
5. Evoluia aplicaiei ( dezvoltarea acesteia prin parcurgrerea unui nou ciclul de analiz,
proiectare, implementare, testare)
Modelul iterativ este adecvat aplicaiilor web deoarece un aspect esenial al acestor
aplicaii este timpul limitat i modificrile frecvente efectuate pentru satisfacerea cerinelor.
Figura 3.4.Procesul iterativ de dezvolare a ste-ului web3

Specificarea cerinelor este procesul n care analistul colecteaz i formalizeaz informaia
esenial despre domeniul viitoarei aplicaii i a funcionalitii ateptate. Rezultatul
acestei faze este o specificare adresat proiectanilor i clientului pentru validare, conform
cerinelor inaintate de acest client. Aprobarea specificaiei de ctre client nseamn c
cerinele i-au fost satisfcute i se poate trece la etapele de proiectare. Proiectarea modelelor
de date este o disciplin mai veche, cel mai popular model conceptual fiind modelul EntitateRelaie propus de Chen n 1976. Modelele de date pentru Web se deosebesc de
aplicaiile obinuite deoarece n aplicaiile web prevaleaz operaiile de citire a datelor la
etapa construirii dinamice a paginilor. Elaborarea schemei bazei de date cu satisfacerea
formelor normale uneori nu este justificat practic.
Modelarea hipertext are ca scop specificarea interfeelor aplicaiei web: structura
ierarhic a paginilor site-ului, datelor utilizate pentru construirea paginilor, legturilor dintre
pagini. Modelarea datelor i hipertextului sunt strns legate, totui, abordrile existente le
examineaz separat, motivnd aceasta prin gradul de flexibilitate obinut. Preul acestei
flexibiliti este timpul pentru ajustarea unui model la schimbarea celuilalt (de exemplu,
compatibilitate, optimizare).
Proiectarea arhitecturii const n definirea elementelor hardware, de reea i componentelor
soft ce stau la baza aplicaiei ce ofer servicii utilizatorilor si. Scopul acestei etape este
identificarea unei combinaii optime ale elementelor menionate pentru satisfacerea cerinelor
naintate din punct de vedere al performanei, securitii, scalabilitii, i costurilor.
Testarea i evaluarea sunt activiti de verificare a conformanei aplicaiei implementate la
cerinele naintate. Menionm testarea funcionalitii, performanei i utilitii (usability).
ntreinere i evoluie reprezint modificrile efectuate dup lansarea aplicaiei.
Propunerile i cerinele fa de o aplicaie existent sunt analizate i efectuate
modificri n modelul date sau hipertext.
Concepia aplicaiei
sursa: Oleg Burlaca Sisteme de Management a Coninutului Web ,p.23
10

Concepia reprezint faza n care firma care dorete realizarea unei aplicaii multimedia i
definete obiectivele aplicaiei i stabilete coninutul i sursele de lucru. Aceasta presupune
crearea aplicaiei, crearea coninutului, constituirea surselor de lucru, planing, estimarea
timpului necesar realizrii aplicaiei, repartiia sarcinilor n echip i managementul fazei.
Crearea aplicatiei presupune stabilirea celor patru obiective specifice aplicaiilor
multimedia: concept, filosofie, inginerie i public.
Crearea coninutului implic o concentrare a eforturilor echipei n realizarea elementelor
media specifice publicaiilor electronice:
Texte care presupun redactarea formatului numeric direct;
Fotografii (realizate cu aparate fotografice clasice i numerice, camescope)
Ilustratii care utilizeaz grafica traditional sau vectorial, design, picturi etc;
Audiovizual (achiziia sunetelor, nregistrarea i crearea sunetelor, filme,
documentare etc).
Constituirea surselor de lucru pornete de la cele existente deja n proiect i identific
sursele necesare a fi create prin proiect: achiziia de fotografii, audio, video (medii
audiovizuale).Pentru sursele existente cum sunt: texte n format numeric, ameliorarea de text,
OCR etc, se continu cu conversia numeric a imaginilor realizate, existente deja (fotografii,
desene, ilustraii, diapozitive) i se finalizeaz cu achiziia de elemente audio, video.
Managementul fazei reprezint activitatea de coordonare a echipei, n care sarcina efulului
de proiect este dat de identificarea echipamentelor, drepturi de utilizare, delimitarea
elementelor media brute i a celor rezultate din prelucrri planing, estimarea timpului,
repartiia sarcinilor n echip.
Echipamentele necesare realizrii fazei presupun: calculatoare, soft specializat, echipamente
periferice dedicate graficii (scanere, camere video, magnetoscop etc.).Drepturile de utilizare
sunt necesare pentru respectarea cadrului legislativ internaional i sunt stabilite la nivel
software i al tipurior media (drepturi de autor, copyright etc.)
Rezultatele fazei sunt date att de expertiza tehnic de sistem, estimarea timpului de
dezvoltare ct i de arborescena, organizarea tipurilor media la nivel de structuri de
directoare, coninut, tablou de bord (storyboard) i elemente de animaie.
Realizarea propriu zis a aplicaiei multimedia
Pentru a realiza o aplicatie multimedia se parcurg succesiv fazele descrise n figura 3.2. n
aceasta faz diferite task-uri sunt realizate paralel, sub coordonarea efului de proiect.
Producia de aplicaii multimedia solicit separarea task-urilor repetitive de ctre executani,
utilizarea unor scripturi pentru accelerarea lor, ceea ce conduce la economie de timp,
eficacitate i productivitate. Se recomand concentrarea asupra unor sarcini bine precizate,
ceea ce conduce la creterea randamentului ntregii echipe.
Tratarea i pregatirea surselor pentru integrare este sarcina infograficianului i
presupune:
Retuarea imaginilor, montaje, efecte speciale, optimizri;
Dimensionarea imaginilor la precizia constrns de proporiile acestora (spre
exemplu la video 4*3);
Export i compresie de imagine la suporturile solicitate de alte medii;
Crearea unei identitati vizuale ca parte a personalizarii site_ului sau adaptarea
celei existente)
Aceasta este etapa care nu permite estimarea timpului necesar deoarece are o evoluie
permanent, n funcie de fazele n care se afl proiectul, (conform figurii 3.2.). In aceast
11

faz se creaz un model de pagin (template, tipuri predefinite, etc) corespunztoare
integrrii bazelor de date i a altor elemente specifice site-urilor dinamice.
Stabilirea elementelor de interfa, navigare, interactivitate
Ergonomia site-ului este dat de modul n care este organizat parcurgerea acestuia i
legturile realizate n acest scop i presupune stabilirea elementelor de interfat, navigare,
interactivitate: site_uri vrac; cadre cu cadre; Shockwave, Flash etc.; DHTML; Javascript;
Php, alte limbaje de programare; personalizarea site-ului;trucuri (gimmicks) de atragere a
vizitatorilor pe tehnologie pull; aspecte de confort ale utilizatorului
Realizarea animaiei este sarcina infograficianului care utilizeaz n acest scop medii
software orientate spre grafica vectorial: Flash, Shockwave alte medii software orientate spre
animaie.
Dezvoltarea aplicaiei este dependent de complexitatea acesteia precum i de soluia
tehnic de realizare i are ca obiective:
Concepia bazelor de date (motoare de cautare, rezultate ale cutrilor, navigare)
Integrarea altor servicii (medii multi-user, forum de discuii, chat, motoare de
cutare, ageni, aplicaii specifice etc)
Programarea secvenelor specifice.
Integrarea media i a bazelor de date este faza n care se reunesc produsele specifice media,
serviciile specifice i interfeele componente ale aplicaiei, fiind materializat prin:
Montarea paginilor i a elementelor grafice, modele;
Integrarea serviciilor specifice (programe, CGI, Java, forum etc);
Integrarea interfeelor cu bazele de date (SQL, Php, file, maker, WEBobjects,
Oracle etc).
Administrarea serverului este o sarcin permanent a Webmasterului echipei de proiectare,
care asigur funcionalitatea aplicaiei precum i dialogul permanent ntre membrii echipei,
via Intranetul firmei. Webmasterul este responsabil de asigurarea resurselor software i
hardware necesare proiectrii, testrii i publicrii aplicaiei prin:
Deschiderea unui cont ftp;
Gestiunea drepturilor utilizatorilor;
Securitatea site-ului;
Introducerea solicitarilor WEB specifice (alias, redirectare, DNS, realvideo,
alte tehnologii);
Instalarea pe server pentru buna functionare a programelor elaborate (CGI,
Java, Forum etc);
Administrarea BD.
Finalizarea aplicaiei are urmrete verificarea i testarea acesteia respectiv publicarea
aplicaiei fiind realizat de tester n colaborare cu ntreaga echip de proiectare i urmrete:
Verificarea codurilor HTML i a diverselor aplicaii intergrate;
Testarea cu ajutorul diferitelor browsere i pe diverse maini ale utilizatorului;
Corecii de site care conduc la versiuni beta, demonstrativ i final;
Inregistrarea propriu zis;
Publicitate online i pe retele sociale, promovare prin metode specifice
Internetului.
Exploatarea i ntreinerea aplicaiei este o sarcin permanent a echipei de realizare.
Intreinerea sistemului este realizat de Webmaster i se refer la: utilizatori, servicii on-line,
probleme tehnice, hotline, intevenii. Webmaster-ul gestioneaz pe ntreg parcursul
12

exploatrii feed-back al utilizatorilor, actualizarea, statisticile curente i asigur politica de
meninere n funciune.
Evoluia aplicaiei are trei coordonate majore: comunicaia cu vizitatorii site-ului,
administrarea sistemului i elaborarea de versiuni noi ale aplicaiei. Elaborarea unor versiuni
noi are loc ncepnd de la faza de prototip i pn la proiectul final diferite task-uri sunt
realizate paralel, sub coordonarea efului de proiect.
3.2.2. Echipa de realizare

Echipa de elaborare a proiectului cuprinde civa specialiti care au competene distincte i
rol bine definit n realizarea acestui proiect, conform figurii 3.3.
Vom ncerca o prezentare schematic a rolului i competenelor fiecrui membru al echipei de
proiectare.
Seful proiectului
Rol: Coordoneaz dezvoltarea unei aplicaii multimedia i asigur succesul artistic, tehnic i
informatic, de la faza de concepie pn la finalizarea concret a acesteia.
Sarcini:
Proiecteaz, coordoneaz i controleaz procesul de producie n cadrul unui proiect
multimedia
Realizeaz structura site-ului n colaborare cu infograficianul
Rspunde de evaluarea resurselor necesare pentru realizarea proiectului
Organizeaz echipa necesar realizrii proiectului multimedia
Planific i distribuie sarcinile n echip
Coordoneaz bugetul proiectului, calitatea i respectarea normelor legislative
Elaboreaz documentaia n toate fazele proiectului
Figura 3.3. Echipa de

realizare a proiectului
Webmaster
Infografician
Sef de proiect
Echipa de proiectare
Tester
Webdesigner
Programator1
Programator n
Webmaster
Rol: Responsabil de mentenana produsului sau serviciilor multimedia.
Sarcini:
Asigur i menine comunicaia ntre membrii echipei furniznd resurse hardware i
gestionnd tranzaciile, mesajele sau schimbul interactiv de informaii ntre utilizatori
Menine statisticile de frecventare a unui site, pentru a permite evaluarea eficacitii
sau rentabilitii procedeelor utilizate, asigurnd ameliorarea acestora
13
Realizeaz integrarea componentelor n vederea testrii site-ului precum i optimizarea

acestuia pe platforme diferite: Windows 98, Windows NT, Unix, Microsoft Internet
Explorer 2.x, 3.x, 4.0/5.0; Netscape Navigator 2.x, 3.x, 4.0
Testeaz legturile, controalele, cookies ONN/OFF, etc.
Testeaz soluiile dinamice pentru a furniza informaii referitoare la diverse rezoluii,
viteze ale modemurilor, etc.
Asigur legtura cu furnizorii de acces Internet precum i referine la motoarele de
cutare
Rspunde de mentenana i securitatea site-ului
Posed cunotine referitoare la reele de calculatoare, resursele sistem, protocoale de
comunicaie, sisteme de operare (Windows NT, UNIX etc)
Webdesigner
Rol: Realizeaz elementele de interfa i navigare precum i cele de interactivitate cu
vizitatorii site-ului.
Sarcini: Proiecteaz i realizeaza interfete SQL / PHP
Dezvolt alte aplicaii: scripturi, CGI proceduri C++, appleturi Java, servlei etc.
Programator multimedia
Rol: Asigur realizarea tehnic i dezvoltarea informatic a unei aplicaii multimedia pe baza
analizei, dezvoltrii i optimizrii, folosind aplicaii interactive cu funcionaliti specifice.
Sarcini:
Asambleaz i integreaz diferite medii componente i programeaz aplicaii specifice
Gestioneaz i manipuleaz elemente de interaciune i realizeaz interfeele asociate
CGI, appleturi etc.
Elaboreaz aplicaii on-line: Javascript, Visual Basic Script, Perl, ASP, PHP
Elaboreaz aplicaii off-line: Lingo pour Macromedia Director, ce servesc produselor
off-line
Asigur funcionalitatea global a aplicaiei multimedia prin proiectarea modulelor
client-side folosind C, C++, Java, .NET, SGBD specifice SQL pentru ORACLE, SQL
Server, Access
Posed cunotine solide de : HTML, XML, SQL/PHP, Javascript, sisteme de operare
i protocoale Visual C++ , MFC, API Win , GUI Develeopment (GDI), COM, ActiveX,
ATL, Shell Programming i Internet Programming
SQL Server, HTML, FrontPageXpress, etc., modelare (forum, chat,mail), statistici
Manipuleaz soluii de business intelligence ce permit analiza feedback-ului cu clienii,
vizitatorii, mediul de afaceri (figura 3.2.).
Infografician (infodesigner)
Rol: Specialist n grafica 2D, 3D care asigur retuarea imaginilor, fotografiilor i a altor
elemente grafice, design sonor, video, montaj numeric, imagini de sintez etc.
Sarcini:
Realizeaz structura grafic pornind de la arhitectura site-ului
Achiziioneaz imagini surs 2D, prelucreaz i creaz imagini de sintez
Amelioreaz paginile i pregtete ecranele
Realizeaz elemente de animaie
Posed cunotine de hardware multimedia (scanner, photo, video) i software
multimedia de grafic vectorial (Ilustrator, Corel, Photoshop), prelucrri de imagini
(Quark Xpress, Flash, Director, 3D Studio Max, SoftImage, etc)
14
3.2.3. Analiza cerinelor

Pentru proiectarea unei aplicaii Web interconectate sau chiar o pagin comercial, ce se
dezvolt spre un site complicat abordarea ntr-o manier sistematic este absolute necesar. Se
poate utiliza una din metodologiile descrise la paragraful anterior. Fr a poseda prea multe
cunotine de proiectare a sistemelor informatice vom aborda metodologia W3DT n 7 pai.
Analiza cerinelor, unde este este furnizat o colecie de metode pentru a determina cerinele
utilizatorilor.
Scopul
Ca i n cazul altor proiecte, cele mai bune rezultate se pot obine prin stabilirea exact a ceea
ce urmeaz s realizeze paginile Web. O parte a stabilirii scopului paginilor o reprezint
identificarea, ct mai precis cu putin, a auditoriului cruia urmeaz s i se adreseze
informaia din pagini. Instrumentele de identificare a celor care viziteaz o pagin Web sunt
limitate i, pn acum, nu exist nici un standard acceptat pentru modul n care s se
contorizeze numrul de utilizatori care asigur amortizarea investiiei i obinerea unui profit,
sau a numrului de oameni din audiena int care au recepionat mesajul transmis. Dac se
aloc iniial un interval e timp pentru realizarea unei estimri orientative a categoriilor de
utilizatori crora li se adreseaz site-ul, pe parcursul proiectrii se poate urmri evidenierea n
site a elementelor care ar trebui incluse ca s atrag aceti utilizatori. Se pot analiza mai uor
ce legturi externe trebuie ncorporate n site i care s fie site-urile care s conin legturi
spre el.
Audiena int va juca un rol major n modul cum va arta site-ul. Exist implicaii majore
legate de design i determinate de audien: vrsta audienei impune anumite tipuri de fonturi
(informaia trebuie s fie ct mai lizibil pentru vrstele naintate), culorile trebuie s in cont
de tabuurile naionale (n unele ri negru este culoarea doliului, n alte ri este alb), culorile
trebuie puse n acord cu tematica site-ului (un site academic va fi mai sobru, unul destinat
jocurilor va fi mai vesel) i exprimarea trebuie s fie adaptat (un site informativ va folosi
pluraluri: noi v informm, noi v sftuim; un site comercial va folosi singularul persuasiv:
noi i artm, i vindem, te sftuim, o pagin personal va folosi singularul intim: eu v
informez, eu caut, eu v sftuiesc, un site ce se adreseaz indivizilor n probleme intime poate
folosi adresarea singular direct: eu te sftuiesc). Se stabilete dac site-ul are nevoie de
versiuni redundante n mai multe limbi, cu/fr prezentri multimedia, cu/fr structuri de
tipul cadrelor i tabelelor. Pentru a atrage vizitatorii s revin, trebuie planificat o modificare
frecvent a elementelor paginii, pentru a le menine interesul. Aceasta presupune un grad nalt
de flexibilitate. Un factor care trebuie luat n considerare n proiectarea paginilor Web, mai
ales a celor realizate n cooperare, este ntreinerea paginiii (timp i cunotine de specialitate).
3.2.4. Etapele proiectrii aplicaiilor Web
Fr a neglija metodologia de proiectare, etapele proiectrii pot fi ierarhizate ntr-o piramid a
crui vrf este utilizatorul (beneficiarul aplicaiei) i crei performane depind de tehnologia
utilizat.
Proiectarea interfeei presupune structura i organizarea interfeei utilizator (UI) ceea ce

implic : layout-ul ecranului, modurile de interaciune i mecanismele de navigare.
Proiectarea esteticii-(LOOK&FEEL) se focuseaz pe: scheme de culori, geometria layout-lui,
font, dimensiune i amplasare text, utilizarea graficii, etc. Proiectarea coninutului are n
15

vedere: layout, structur, schi coninut, relaiile dintre obiectele coninut. Proiectarea
navigrii implic; fluxul navigrii, legturi ntre obiectele de coninut, pentru toate funciile
aplicaiei etapele proiectrii pot fi ierarhizate ntr-o piramid a crui vrf este utilizatorul
(beneficiarul aplicaiei) i crei performane depind de tehnologia utilizat.Proiectarea
arhitecturii se concentreaz n dou direcii: coninut ( prin structura hypermedia de ansamblu
i la nivelul aplicaiei ( prin componente i relaii). Proiectarea componentelor presupune
detalierea logicii de procesare necesar implementrii componentelor funcionale, [Mandru,
2011].
Figura 3.3. Piramida proiectrii aplicaiilor Web4
Proiectarea coninutului
Schiarea coninutului materialului care urmeaz s fie inclus n pagina Web stabilete ce
materiale trebuie colecionate, care trebuie create, i care trebuie rescrise pentru a fi
compatibile cu site-ul on-line.O parte din informaii poate fi coninut n legturi ctre
documente din alte site-uri, create anterior, consultnd anterior limitrile de liceniere sau
gradul de sharing permis de proprietar.
Se stabilesc care din informaii vor fi numai de tip text, care din zonele de text vor fi
derulante, care din poriunile de text vor fi prezentate pe blocuri, astfel nct s ncap perfect
ntr-o fereastr a programului de afiare. Se realizeaz mprirea coninutului pe pagini ce
urmeaz s fie puse n legtur. Pentru pagina principal se stabilete dac este sau nu nevoie
de un intro multimedia, i se mparte spaiul de afiare ntre elementele structurale: se aleg
bannerele, titlurile paginilor, se stabilesc linkurile externe i interne, relative sau absolute.
Organizarea de baz a paginilor succede schia global a coninutului paginilor Web, cu
legturile externe dorite. Aceste pagini pot fi aezate ntr-o succesiune liniar, ca la o
prezentare de diapozitive, trecerea de la o pagin la alta fcndu-se cu ajutorul sgeilor Next
(nainte) i Back (napoi), ntr-o structur arborescent sau, dac aceasta este prea rigid, chiar
ntr-una hibrid, n care s existe multiple legturi ntre pagini, i pot fi aezate, desigur, ntr-o
structur format din combinarea celor de mai sus. Se poate construi aceast hart pe o pagin
de hrtie cu creionul, sau cu instrumente computerizate (NaviPress care permite vizualizarea
4
Cristina Mndru, Proiectarea sistemelor software, math.univ-ovidius.ro/doc/..
16

interconexiunilor corespunztoare unui set de pagini Web). Softurile de dezvoltare
HTML/JavaScript, Adobe includ un gestionar de site (site-map), un sistem de gestiune ce
asigur actualizarea automat a link-urilor la mutarea fiierelor, ntreinerea hrii site-ului i a
unor fie de observaii pentru fiecare fiier/link, un client FTP i un mecanism de ntreinere a
fiabilitii prin generarea automat a unui raport cu erori de funcionare. In pagina principal
se recomand prezen hrtii site-ului, pentru a uura orientarea utilizatorilor n cadrul
paginilor Web.
Un site const, din punct de vedere al accesului, din una sau mai multe pagini care conin text,
grafic, animaie, etc., legate ntr-o manier coerent, formnd un tot unitar, n vederea
descrierii unor informaii sau crerii unui efect constant [RUSU_01]. Paginile Web sunt
denumite generic documente, termenul de pagin sau carte fiind determinat de coninutul
fiierului (.htm). Practic pagina este acel fiier care se regsete i se formateaz de ctre
browser. Home page sau pagina principal a prezentrii conine de obicei un sumar,
informaii generale, despre celelalte pagini iar URL-ul acesteia permite celorlali utilizatori
consultarea site-urilor Web. Structura prezentrilor este dependent de coninutul acestora
precum i de obiectivul specific al paginii Web (pagina personal, prezentare de firm,
aplicaie comercial, comer electronic, nvmnt asistet, etc.). Astfel, structura unei pagini
Web poate fi ncadrat n una din urmtoarele categorii de structuri definite:
Structur liniar Pentru acest tip de organizare, legturile se realizeaz de la o pagin la alta
(nainte i napoi). n acest caz se recomand o legtur suplimentar cu Home page pentru a
traversa rapid prezentarea respectiv. Acest tip de structur este utilizat n cazul materialelor
documentare scurte, instruciuni pas cu pas, instruiri asistate de calculator.
Figura 3.4.
Structura
liniara
Home
page
Structura ierarhic permite rafinarea informaiei din prezentare de sus n jos prin detalierea
succesiv n funcie de interesul manifestat de utilizator. n aceast manier fiecare nivel are o
interfa consistent (sus, jos) i n acelai timp setul de posibiliti de selecie este limitat la
navigarea de baz. Structura ierarhic are avantajul traversrii rapide a paginilor pornind de la
nivelul superior pan la nivelul cu cel mai mare grad de detaliere a informaiilor.
Home
page
Figura 3.5.
Dezavantajul acestei structuri apare atunci cnd exist prea multe nivele, prea multe meniuri,
17

i apare posibilitatea ca utilizatorul s uite de solicitarea iniial, efectul fiind cunoscut sub
denumirea de "voice mail syndrom". Se recomand limitarea la dou sau trei nivele de
ierarhizare, combinnd, dac este necesar, informaiile din paginile anterioare cu nodurile
finale (frunzele).
Structura liniar cu alternative Prin aceast structur se mbuntete (se micoreaz)
rigiditatea structurii liniare prin derivarea cii dintr-o cale principal, n ramuri care pornesc
dintr-un punct. Aceste ramuri pot fi dezvoltate liniar n continuare sau pot fi reunite ntr-un
punct al unei alte ramuri principale.
Figura 3.6. Structura
combinat liniar i
ierarhizat
Home
page
Aceast structur este cel mai popular mod de organizare a prezentrilor i reprezint
combinaia dintre documente liniare i ierarhizate, deoarece deplasrile de sus jos, nainte i
napoi sunt mai facile dect traversrile n cadrul ierarhiilor. Exemplul cel mai cunoscut
pentru o astfel de structur sunt prezentrile FAQ (Frequently Asked Questions).
Figura 3.7.
Home
page
Indiferent care tip de structur este indicat pentru scopul i coninutul site-ului, n cazul unui
site complex este indicat schiarea unei hri sau a unei scheme bloc pentru paginile Web, n
care pentru indicarea legturilor se pot utiliza, de exemplu, linii cu sgei.
Considerm util s precizm faptul c aceste structuri pot fi realizate prin proiectarea unor
legturi consistente, necesare i suficiente, n multe situaii elementele de legtur fiind
realizate prin combinaii de text i grafic sau prin butoane grafice interactive (figura 3.85).
Din acest motiv vom ncerca s abordm aceste elemente ce fac obiectul evalurii
performanelor dar n acelai timp, pot deveni factori de succes al prezenei on-line a afacerii.
Prelucrare dup www.websiteoptimization.com
18
Figura 3.8. Structura piramidal de

analiz a performanelor site-ului
Arhitectura
Site-ului
Performana
Paginilor
Formatarea
Paginilor
Formatarea
Textului
Elemente
Text
Formatarea Formatarea
Legturilor Graficii
Elemente
de legtur
Elemente
de Grafic
3.2.5. Proiectarea interfeei

Dezvoltarea unei pagini WEB a unei firme sau a unei aplicaii complexe (e-busienss, ecommerce, etc) trebuie s fie precedat de un studiu de fezabilitate i s aplice n primul
rnd principiile proiectrii sistemelor informatice: principii de eficient economic, ceea ce
presupune evaluarea cheltuielilor necesare pentru conceperea, realizarea, implementarea,
publicarea i ntreinerea curent a paginii WEB i compararea lor cu efectele economice
directe i indirecte obinute de firma care-i face publicitate, managementul proiectului
(surselor i a a echipei de dezvoltare) n fiecare faz de realizare, asigurarea calitii soluiilor
abordate, prin aplicarea celor mai eficiente metode i tehnici de proiectare i specificarea unor
caracteristici de calitate, care s fie controlate pe tot parcursul realizrii paginii, adaptarea
soluiilor n concordan cu resursele disponibile.
Caracteristicile eseniale ale unei interfee Web sunt : simplu de utilizat, uor de nvat ,
simplu de navigat, intuitiv, consistent, eficient, fr erori, funcionl.
Incercm s facem o trecere n revist a principiilor de proiectare a interfeei6:
Anticiparea urmtoarei aciuni a utilizatorului i oferirea opiunilor de navigare
adecvate.
Comunicarea srii oricrei activiti iniiat de utilizator, starea (identitatea)
utilizatorului i poziia n ierarhia coninutului.
Consistena relativ la reprezentare controale, menu, pictograme, estetic.
Prelucrarea dyp http://www.graphic-design.com/

19
Autonomia controlat facilitarea navigrii, cu impunerea conveniilor de navigare

stabilite pentru aplicaie.
Eficiena din perspectiva utilizatorului.
Flexibilitatea n raport cu diferite categorii de utilizatori; posibilitatea de a reveni din
erori sau de pe ci de navigare alese greit (UNDO).
Focalizarea pe activitile curente ale utilizatorului.
Respectarea Legii lui Fitt: timpul de obinere a unei inte este funcie de distana la ea
i de dimensiunea intei referitoare la obiectul de interfa.
Obiecte de interfa predefinite folosind biblioteca existent.
Reducerea latenei prin multitasking; feedback audio i video la lansarea operaiilor la
care rspunsul nu este imediat; afiarea unui control animat al progresului (timer).
Uor de nvat cu design simplu i intuitiv; organizarea coninutului i funcionalitii
n categorii evidente pentru utilizator.
Metafore corespunztoare aplicaiei i utilizatorilor acesteia; imagini i concepte din
experiena real a utilizatorilor, augmentate cu faciliti ajuttoare (completare
formular tip cu posibilitati de selecie din liste, modele de introducere a datelor
predefinite).
Pstrarea integritii prin salvare automat a tuturor datelor specificate de utilizator (
a formelor completate) n vederea recuperrii la apariia unor erori.
Lizibilitate la nivel de font-uri, dimensiuni i culori, ce trebuie s fie bine alese.
Urmrirea strii prin memorarea succesiunii strilor interaciunii cu utilizatorul n
vederea continurii acesteia la o reconectare ulterioar.
Navigare vizibil prin crearea iluziei c aplicaia vine n ntmpinarea utilizatorului
(tehnica pull), oferindu-i facilitile de navigare necesare n contextul respectiv.
Principiile fundamentale legate de Web design7 au amprenta particularittilor de proiectare:

Indiferent de tipul de fiier care se prelucreaz, trebuie urmrit dimensiunea sa minimal,
prin aplicarea compresiilor n balan cu rolul pe care l va juca acel fiier n site: cele care au
rol de informaie pus la dispoziie vor fi slab compresate i stocate n biblioteci sau arhive
FTP; cele care au rol n design-ul paginii, vor fi compresate ct mai puternic; dac stilistica
adoptat o permite, se recomand fundaluri monocrome i obiecte grafice alb-negru;
Elementele trebuie s fie de aa natur aezate n pagin, nct indicatorul NREM
(NotReadingEye Movement) s fie minim. NREM indic distana pe care o parcurge privirea
fr s citeasc nimic.
Hiperlegturile trebuie s fie de patru tipuri:
1. Setul hiperlegturilor structurale: dau o imagine privind structura site-ului i indic
spre componentele sale (Register, FAQ, etc.); de regul acestea se grupeaz pe o bar
orizontal, imediat sub logo-ul site-ului;
2. Setul hiperlegturilor de coninut: au rolul de cuprins al informaiei: (titluri de
capitole, thumbnails etc).
3. Setul legturilor externe, care indic n afara site-ului: de regul sunt grupate ntr-o
pagin la care se ajunge printr-un link structural, de genul Other Links, Other
Sources;
4. Setul legturilor interne, care sunt referine ncruciate ce apar n coninutul
informaional al site-ului; n unele browsere vor apare subliniat sau colorate cu
albastru, motiv pentru care se recomand evitarea sublinierilor i a culorii albastre
pentrui scris.
7
Rusu Lucia, Robert Buchmann, Dezvoltarea aplicaiilor WEB, Editura Risoprint, Cluj-Napoca,2004
20

Designul8 reprezint modul n care se armonizeaz elementele paginii (grafica, text, link-uri,
elemente interactive, imaginile etc.) i se refer la relaia ntre elementele paginii: locaia,
proporia, accentul pus pe fiecare element. Elementele designului: logo-ul i numele firmei,
imaginea sau grafica, titul i textul, alte ilustraii, sunt tratate att la nivel de structur a
informaiilor ct i a structurii imaginilor. Structura informaiilor este centrat pe
respectarea regulii celor cinci degete. Specialitii afirm c pentru a obine o eficien
maxim ntr-o niruire de tip list e bine s exist cel mult 5 opiuni deoarece 60%din
vizitatori oricum vor citi numai pe primele 5, ignorndu-le pe restul informaiilor. Imaginile
animate care consum resurse, ar trebui nlocuite cu imagini statice care s nu distrag atenia
vizitatorului dar s fie atractive.
3.2.6. Proiectarea esteticii aplicaiei Web
Estetica site-ului sau LAYOUT ul este esenial n impactul cu utilizatorul.Ea ncepe cu
pagina principal care este "cartea de vizit" i se ntinde pe tot cuprinsul site-ului. Home sau
Index reprezint locul de unde ncepe explorarea resurselor Web i se constituie n puncte de
start pentru accesarea informaiilor specificice publiciei sau companiei pe care o reprezint.
n continuare prezentm cteva trsturi caracteristice necesare a paginii de intrare:[RADO96a]:
pagina s fie caracteristic;
s ofere ct mai mult informaie fr a deveni obez; ncrcarea ei trebuie s dureze
maxim cteva zeci de secunde;
s se utilizeze grafic ntreesut astfel vizitatorul are o idee despre ce ncarc i poate
hotr dac va continua sau nu;
s se utilizeze tehnici asociate elementelor grafice audio/video, care permit rezervarea
spaiului astfel ca textul s poat fi afiat primul.
Aceste principii generale pot fi extinse la nivelul ntregii aplicaii Web prin9:
Evitarea suprancrcrii paginii
Respectarea unui raport 80% -20% ntre Coninut vs. Navigare i alte caracteristici
Organizarea n sensul lizibilitii maxime de la stnga sus la dreapta jos, conform
prioritii elementelor
Gruparea elementelor (coninut, navigare, funcii) conform unor abloane recunoscute
de utilizator
Evitarea necesitii de derulare (scroll) pentru acces la totalitatea informaiilor unui
obiect.
Specificarea dimensiunilor elementelor layout-lui n valori relative la suprafaa
disponibil.
Design-ul grafic sau LOOK&FEEL cum este deja cunoscut are cteva direcii specifice:
layout
scheme de culori
fonturi, dimensiuni i stilori
utilizare de alte media (audio, video, animaie)
alte elemente de estetic.
Aici se refer la componenta artistic, n accepiunea general WEBDESIGN= proiectarea aplicaiilor Web
http://www.graphic-design.com/
21

Toate elementele de design prezint consisten stilistic de la o pagin la alta; i se
recomand crearea a cel puin trei abloane de structur, bazate pe aceleai culori, fonturi,
structuri de frame-uri, tipuri de butoane.
Elementele de design s fie puse n acord cu audiena, cu posibilele tabu-uri i probleme de
accesibilitate; n acest sens fonturile vor fi mai mari dac se adreseaz persoanelor n vrst;
exprimarea va fi conform cu raportul fa de audien, aa cum s-a precizat la subcapitolul de
studiu al audienei;
Diferena codurilor de culoare ntre fundal i culoarea textului, bordurilor, etc., trebuie s fie
cel puin 40%; paleta de culori folosit s fie restricionat la Web-safe, dac nu exist
obligativitatea de a afia fotografii. Site-ul nu trebuie s se bazeze pe butoanele de navigare
ale browserului, trebuie s se pun la dispoziie soluii de navigare direct ntre oricare dou
pagini ale site-ului. Se recomand s se evite scroll-ul orizontal; e bine s se evite fontul
clasic, TNR de 12 pe fond alb, care d de multe ori impresia citirii unei foi de hrtie i nu d
impresia c avem de a face cu un site interactiv; pentru asta, se folosesc de obicei fonturi fr
serifuri n titluri i fonturi cu serifuri n zonele mari cu text aglomerat, pentru creterea
lizibilitii; Design-ul s fie flexibil pentru adugarea n orice moment de noi informaii, noi
celule n tabele, noi cmpuri n formulare.
Grafica este un element de art care are un rol dublu: de a transmite profismul prin calitatea
graficii i de a sugera atmosfera, stilul i personalitatea paginii, look and feel. Ea poate
reprezenta doar o idee vizual pe baza creia culorile i textul, sloganul, imaginile vor fi
folosite ntr-o anumit ordine sau chiar o animaie complex. Ea trebuie s fie clar, original
i interesant. Elementele caracteristice graficii statice sunt: culorile, fundalul, mrimile
imaginilor iar celor dinamice li se adaug numrul de cadre, timpul, faciliti suplimentare de
vizualizare, etc.
La proiectarea unui site de success se realizeaz o combinaie perfect ntre design i coninut,
acordnd o atenie deosebit designului (grafica, sigla, culori, etc.). Culorile vor influena
dispoziia, starea sufleteasc i emoiile vizitatorilor, i prezint identitatea i imaginea brandului, ca element de marketing.
Culori calde : rou este una dintre culorile care capteaz atenia, simbolizeaz pasiune, foc i
dragoste, are ca efect creterea tensiunii i transmite energie, simboliznd i rzboi, violena,
agresiune. Galben reprezint soarele i cldura, nsemnnd sperana, lumina i energia sau o
stare de slbiciune, boal, fric i laitate. Rozul este romantic, relaxant i feminin iar
portocaliu vibrant i cald este asociat cu toamna, este mai puin inflcrat dect rou i
stimuleaza apetitul, fiind culoarea unor citrice, care simbolizeaz sanatate.
Culori reci:verdele simbolizeaz snatate i cretere (vegetaie), reinnoire, regenerare i
fertilitate dei poate nsemna i lipsa de experien. Albastru este una dintre cele mai
relaxante culori, asociat cu cerul i marea, o culoare sigur ce nseamn inteligen, calm i
ncredere sau depresie i tristete. Purpuriu ca i combinaie ntre rou i albastru este una
dintre cele mai intrigante culori i reprezint creativitate, spiritual i misterios iar purpuriul
nchis este asociat cu regalitatea i bogatia, nuanele mai deschise fiind asociate cu
romantismul i nostalgia.
Culori neutre: negru poate reprezenta putere, elegan, rafinament, dar i moarte n culturile
occidentale, ru, furie i tristete. Alb reprezint curenia, puritatea i spiritualitatea, viata i
casatoria n culturile occidentale dar i moarte n culturile orientale. Gri combinaia dintre
22

negru si alb este o culoare conservativ care simbolizeaz siguran, maturitate i incredere,
dar i tristete. Maro este o culoare special ce poate fi folosit ca neutr sau cald,
reprezentnd credibilitate, stabilitate, inima, casa, pmntul.
Fundalul (Background-ul) unor site-uri pe Internet prezint imagini de fond care fac aproape
imposibil citirea textului sau sunt complet inestetice. Specialitii arat c cel mai uor se
citete negru pe alb i de aceea se recomand folosirea unor imagini de fond foarte pale fr
artificii inutile. In Romnia majoritatea celor care navigheaz pe Internet folosesc o conexiune
de tip dial-up care impune realizarea unor pagini ct mai mici (n octei) deci utilizarea cu
precauie a imaginilor complexe ca funcal de site-uri. Un site ce prezit o galerie de art va
utiliza un fundal neutru pentru a pune n valoare tablourile, n schimb o agenie de turism va
putea folosi un fundal adecvat care s atrag vizitatorii.
Stil i personalitate pot fi caracteristicile de baz a unei pagin web iar la crearea ei trebuie
s concure toate elementele site-ului respectiv: grafica, fondul, textul, culoarea, elemente
interactive, i nu un ultimul rnd cuvintele, expresiile folosite n coninut, care vor reprezenta
astfel primele elemente de e-marketing at the first site cu rol de cunoatere i influenare a
consumatorilor. Celelalte metode de atragere a lor (tehnicile pull): reclam, cri de oaspei,
solganuri, etc. le vom trata n capitole speciale.
Recomandrile legate de soluionarea acestor principii pot fi sintetizate astfel:
maparea site-ul n fiecare pagin pentru orientarea vizitatorului n fiecare moment i s
se ofere n fiecare pagin o legtur ctre home-page (prima pagin);
claritatea i conciziunea documentelor;
organizarea textului astfel nct cititorii s poat scana informaiile importante;
coninutul paginilor s fie de sine stttor;
s nu se foloseasc pentru marcarea unor pasaje de text formatrile rezervate titlurilor;
informaia s fie grupat att semantic ct i vizual prin utilizarea de titluri/ subtitluri
i separarea seciunilor;
s se pstreze spiritul publicaiilor n toate paginile;
s se utilizeze legturi descriptive i meniuri de legturi pentru scanare rapid,
comentate i grupate n meniuri, pentru o parcurgere mai uoar; o legtur este
necesar numai dac exist un motiv ntemeiat, evitnd trimiterile ctre documente
redunante i fr multe legturi la acelai site n aceeai pagin;
n fiecare document s se furnizeze informaii pentru contact i o referin ctre
persoanele care pot da relaii suplimentare;
s se furnizeze versiuni text pentru documente liniare;
s se utilizeze marcarea textului (I, B, U) i ancorele cu discernmnt;
s se evite redundana n ndrumri;
s se corecteze documentul att din punct de vedere lexical ct i gramatical;
s se foloseasc un design simplu, fr grafic ornamental inutil;
s se evite stridena paginilor (text prea colorat, fundal iptor); acestea devin vulgare
i obositoare.
In raport cu scopul documentului i structura aleas, proiectantul va decide asupra structurii
elementelor din pagin i a legturilor ntre documente, dei putem puncta cteva posibiliti
generale de realizare a facilitilor de baz:
Utilizarea titlurilor descriptive, care furnizeaz relaiile cu celelalte pagini elaborate;
Includerea unei legturi napoi (Back) pentru orice document care depinde de cel
precedent;
23

Evitarea formulrilor de tip:"Putei studia aceast problem cu", sau "Avantajele
acestei metode sunt:" care pot fi regsite cu uurin n alte pagini, structurate i
detaliate cu discernmnt;
Un paragraf plin de texte boldate i nclinate este greu de urmrit
10
Se recomand evitarea utilizrii terminologiei browserelor deoarece fiecare browser
are set diferit de meniuri ce gestioneaz documentele i metode diferite de deplasare
napoi-nainte, motiv pentru care legturile similare se aranjeaz i se gestioneaz direct
n document.
abloanele de proiectare specifice aplicaiilor Web destinate elementelor hypermedia sunt

grupate n diverse categorii:
Arhitecturale
Construire componente
Navigare
Prezentare
Comportament / interaciune utilizator
Din multitudinea de soluii open source amintim doar cteva adrese de abloane:
http://www.designpattern.lu.unisi.ch repository cu abloane
http://www.visi.com/~snowfall/InteractionPatterns.html
http://www.welie.com/patterns
http://www8.org/w8-papers/5b-hypertext-media/improving/improving.html - navigare
http://www.anamorph.com/docs/patterns/index.html - un limbaj de abloane
http://www.mit.edu/~jtidwell/interaction_patterns.html - limbaj de abloane specific
Human Computer Interaction (HCI).
3.3. Proiectarea arhitectural a unei e-afaceri

O afacere pe Internet (e-business) are o complexitate crescut i presupune activiti specifice
de proiectare pe care le vom detalia n capitolele urmtoare. Precizm c n acest caz se
stabilete:
Arhitectura structurat pe nivele a aplicaiei (two-tier, three-tier, multi-tier);
Tehnicile i tehnologiile utilizate n realizarea aplicaiei (triada PHP, SQL server cu
componente, Oracle i interfee specifice,etc) Se aleg tehnologiile de implementare a
aplicaiilor: software-ul server de gestiune a bazelor de date, utilitarele de monitorizare a
acceselor, limbajele server-side i client-side :
Interfaa cu clientul reprezentat de datele ce se ofer utilizatorilor i datele care se
preleveaz prin intermediul formularelor. Informaia nestructurat: textul i imaginile care
vor apare n paginile site-ului i care vor fi incluse la nivelul formatrii; informaia
nestructurat este unidirecional i corespunde cerinei de informare general a site-ului;
Soluia middleware adoptat;
Structurile de date care se grupeaz n informaie structurat: care va fi stocat ntr-o
baz de date, pe server; respectiva baz de date este construit conceptual, prin specificarea
atributelor i tipurilor acestora; informaia structurat este bidirecional, bazele de date fiind
actualizate n urma prelucrrilor datelor din formulare i citite prin acces concurenial; datele
citite trebuie integrate, de regul prin tabele, n coninutul nestructurat; datele scrise nu sunt,
de regul, accese concureniale: proprietarii site-urilor cu audien public prefer s nu ofere
posibilitatea utilizatorilor s modifice date existente pe server, ci doar s le permit s adauge
10
Exemple : Click here sau Select This Link, To save this document, pull down the File menu and select Save,
Use this button to return to the previous page, Use this button to return to the next page
24

noi nregistrri, urmnd ca gestiunea concurenei s fie arbitrat la nivel de server, uneori
chiar de ctre persoane fizice.
Aplicaiile de prelucrare sunt necesare prelurii, manipulrii i regsirii acelor date,
precum i fluxul prin care datele vor ajunge de la utilizator la server: Datele pot fi preluate
din formular HTML sau din zonele de text ale unei prezentri Shockwave, Flash, pot fi
validate sau transformate la nivel de client, de ctre un script JavaScript, PHP sau de ctre
limbajul de action-scripting suportat de prezentarea Shockwave. Rezultatele cererilor pot s se
ntoarc n pagin (Hypermedia interactiv, design logic) sau pot fi transferate prin HTTP,
folosind metoda POST sau GET, pot fi preluate de server de ctre un script CGI, un servlet
Java, apoi ele pot fi stocate n baza de date sau se pot returna rspunsuri sub form de date
structurate (preluate din baza de date) sau informaie slab structurat (cod HTML/XML ca
ieire a scriptului server-side). Alegerea unei tehnologii server-side trebuie s in cont de
scalabilitatea prelucrrii, i s asigure accesele concurenial. Un applet Java este un
consumator de resurse dar servleturile Java sunt proiectate multithreading i asigur
performan. Pentru un site de complexitate medie limbajele interpretative Perl, PHP, ASP
sau fiiere de comenzi Unix asigur funcionalitate i minimizeaz timp de rspuns.
Dac site-ul devine o aplicaie Web, realizarea site-ului urmeaz o abordare front-end,
pornind de la cerinele audienei, middleware-ul (programele agent care preiau cereri
utilizator i gestioneaz pe baza lor datele) i care trebuie s determine back-end-ul (datele).
Alegerea unei tehnologii server-side trebuie s in cont de scalabilitatea prelucrrii, i s
asigure accesul concurenial. Un applet Java este un consumator de resurse dar servleturile
Java sunt proiectate multithreading i asigur performan. Pentru un site de complexitate
medie limbajele interpretative Perl, PHP, ASP, Pyton, .NET asigur funcionalitate i
minimizeaz timp de rspuns.
Figura 3.3. Arhitectura three tier a aplicaiilor

Presentation
Business
Tier
Logic
Componenta
de produse
Logica de
prezentare
Componenta
de preuri
Driver
la baza
Data Tier
Baza de date
Logica de
procesare
Componenta
de clieni
Firewalls
Soluia 3-tier este uor de implementat, deoarece server gateway poate fi creat ca aplicaie
Java standalone cu funcii client native suprascrise n clase Java. Acestea asigur comunicaia
ca server cu un applet Java n protocoale definite utilizator, la un capt, n timp e acceseaz
serverul de baze de date la cellalt capt, folosind protocoale native client/server. Scripturile
pot fi elaborate in : Jscript, Php, Asp, Flash, Adobe Flex, etc.
Pentru serviciile bazate pe web, pentru a avea cea mai larg utilizare a devenit din ce n ce
mai important ca aceste servicii s fie accesibile unui numr ct mai mare de clieni, n acest
25

sens s-a observat o proliferare a unor tipuri diferite de clieni pentru aplicaiile bazate pe web
i odat cu dezvoltarea tranzaciilor B2B, serverele care utilizeaz XML pot fi de asemenea
clieni.
Deseori este preferat arhitectura model-view-controller (MVC). Aceast arhitectur
izoleaz logica de functionalitate (business logic) de interfaa cu utilizatorul rezultnd o
aplicaie caracterizat de usurina modificrii fie a aspectului vizual, fie a aspectului de
funcionalitate, fr ca cellalt aspect s fie afectat.
Modelul reprezint informaia (datele) i regulile folosite pentru a manipula datele, View
reprezint elementele de interfa cu utilizatorul, iar Controller implic comunicarea
aciunilor utilizatorului ctre Model.
Arhitectura MVC este des ntlnit n aplicaii web, n care View reprezit pagina HTML,
Controller-ul este codul care colecteaz date dinamice i genereaz coninutul din pagina
HTML. Elementul Controller face legtura ntre Model i View prin analizarea, validarea i
direcionarea cererilor provenite de la utilizator ctre logica business. El gestioneaz
rspunsul primit de la Model i invoc elementele corespunztoare ale elementului View
pentru a reda coninutul semnificativ ctre utilizator.
Figura 3.11.Arhitectura MVC

Modelul reprezint coninutul informaional (de obicei stocat n baze de date sau noduri
XML) i logica business care transform coninutul n funcie de aciunile utilizatorilor.
Avantajele acestui sistem arhitectural sunt reducerea complexitii n design-ul arhitectural,
creterea flexibilitii i a reutilizrii aplicaiei. n proiectarea de detaliu a aplicaiei se pot
folosi tehnologii precum Php i HTML pentru partea de server, Javascript, CSS i Ajax
pentru partea de client (user interface) i MySQL pentru partea de date. Pentru a descrie
promovarea aplicaiei se vor prezenta strategii i metode de internet marketing, cu exemple de
campanii.
26

Spre exemplu ntr-un magazin on-line, modelul este reprezentat de logica business care
guverneaz funcionalitatea magazinului online, mpreun cu informaia brut (datele despre
produse, utilizatori) care trebuie prezentat utilizatorului i relaiile dintre acestea. Bazele de
date vor fi gestionate folosind tehnologia MySql, un sistem de gestiune la nivel relaional a
bazelor de date, iar logica business va fi gestionat de limbajul de programare server-side
PHP, caracterizat de facilitile pe care le ofer n conlucrarea cu MySql. mpreun, aceste
tehnologii constituie un instrument puternic care susine implementarea elementului Model al
arhitecturii. Elementul View reprezint modul de prezentare al aplicaiei la nivel de utilizator
i cuprinde totalitatea aspectelor ce in de interfaa cu utilizatorul, ncepnd cu design-ul
general i modular al site-ului i pn la paginile HTML cu coninut dinamic (meniuri,
formulare, imagini, text), generate de logica business i utiliznd informaia brut prezent n
bazele de date.
3.4. Testarea i nregistrarea site-ului

Validarea automat a aplicatiilor presupune utilizarea unor unelte specializate, puse la
dispozitie ca si solutii open source astfel:
Validarea HTML/XHTML
Validare CSS:http://jigsaw.w3.org/css-validator/
Validare RSS http://validator.w3.org/feed/
Link-uri orfane sau defecte: http://validator.w3.org/checklink
Cea mai des utilizat este oferta de validare Google: https://validator.w3.org/

Acest validator verifica validitatea de marcare a documentelor Web n HTML, XHTML, SMIL,
MathML, etc. Dac se valideaz coninut specific, cum ar fi RSS / Atom feed sau foi de stil
CSS, coninutul MobileOK, sau pentru a gsi link-uri rupte, exist alte validatoare i
instrumentele specifice puse la disponzitle de Google. O alternativ poate fi validator nonDTD-based.
Optiuni puse la dispoziia utilizatorilor:
Validate by URI
Validate by File Upload
Validate by Direct Input
Verificarea erorilor care apar n timpul proiectarii paginilor web poate fi realizat printr-un
serviciu de validare HTML cu un Document Type Definition (DOCTYPE) ca prim linie
pentru pagina HTML .
Pentru a valida documentele in XHTML trebuie sa adaugam la inceputul documentului tagul
DOCTYPE cu specificatiile corespunzatoare tipului de document (Strict, Tranzitional sau
Frameset).
Un exemplu de DOCTYPE :
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";
Aceasta specific sintaxa (structura gramatical) a paginii Web i se obine o list cu mai
multe erori de sintax HTML/XHTML sau XML care trebuie analizate i remediate.
Servicii de validare HTML/XHTML sau XML i testarea paginilor web verific:
structura documentelor;
erorile de sintax;
27
si optimizeaz imaginile;
legaturile interne i externe;
Pentru a putea publica site-urile Web este necesar transferul fiierelor pe serverul Web denumit
upload. Aceast operaie se realizeaz cu servicii FTP care permit:
upload al fiierelor unui site la o gazd web;
nlocuirea unui fiier sau o imagine;
download se descarc un fiier de pe un alt calculator;
accesul unei animite persoane pentru a ncarca/descrca un fiier din site-ul
propriu.
Pentru conectarea la un server FTP este necesar un program client FTP instalat pe
calculatorul surs i un URL sau adresa IP a gazdei FTP obinut la nscriere. Detaliile au
fost descrise n capitolele anterioare.
Odat conectat prin FTP, se pot primi sau transmite fiiere iar pentru a obine anumite
fiiere/foldere de pe serverul gazd se poate alege opiunea download respectiv upload care
asigur transferul dintr-un/ntr-un anumit director pe/de pe calculatorul personal. Prin
introducerea loginului i parolei obinute la nregistrarea la calculatorul gazd, se obine
acces la un cont care d dreptul la accesarea unui anume director pentru a transfera fiiere.
Conectarea cu loginul anonymous se folosete numai pentru download de fiiere, datorit
riscurilor de securitate care pot apare.
Pentru ncrcarea pe server se urmeaz paii:
se pun toate fiierele corespunztoare paginilor siteului care urmeaz s fie ncrcat,
ntr-o singur map (sau ntr-un singur director) pe hard-disk-ul corespunztor
serverului respectiv;
n cadrul directorului, se denumete fiierul corespunztor paginii gazd cu numele
index.html acesta este fiierul care este ncrcat pentru pagina gazd de ctre
majoritatea sistemelor software ale serverelor Web; pentru unele servere, acest fiier
va trebui s poarte numele default.html;
dac se utilizeaz serverul unui provider: trebuie aflate eventualele convenii de
denumire a fiierelor, care urmeaz a fi respectate iar fiierele corespunztoare
paginilor Web se transfer prin FTP, protocolul de transfer de fiiere Zmodem sau prin
intermediul unui alt protocol de transfer electronic de fiiere.
Sunt puse la dispoziie cteva posibiliti pentru publicarea sitului Web:
Internet Service Provider (ISP) ex: UPC, Romtelecom, RCS&RDS
Gazd gratuit pe Internet (free host) ex: 50.ro
Propriul server Web, instalat sub forma unei aplicaii pe calculatorul personal ex:
serverul Apache , WampServer (care poate fi descrcat gratuit de la adresa
http://www.wampserver.com/en/ ) sau EasyPHP (www.easyphp.org)\
Fiecare beneficiar opteaz pentru una sau alta funcie de obiectivele aplicaiei Web,
posibilitile de ntreinere cu personal propriu sau specializat i nu n ultimul rnd bugetul
alocat pentru aceast afacere.
3.5. Intereinerea i actualizarea site-ului

Pentru ca site-ul creat s aib succes i s atraga noi vizitatori, trebuie ntreinut i actualizat
periodic. Pe baza statisticilor s-a constatat ca o pagina web neactualizat este interesant dup
28

o perioad medie de 60 de zile. De aceea, pentru a menine interesul vizitatorilor, un site web
nu trebuie sa fie static. Dac nu sunt oferite informaii noi sau resurse utile vizitatorilor, ei nu
vor avea nici un motiv sa mai revina iar site-ul i va pierde popularitatea.
Intretinerea i actualizarea unui site web se realizeaz cu diferite scopuri:
mbuntirea proiectarii i machetarii;
actualizarea sau adugarea unor informaii suplimentare;
realizarea unor versiuni multi-lingve;
ca soluie a feedback-ului, pentru a rspunde la comentariilor, cerinelor sau
observaiilor vizitatorilor;
pentru a corecta erorile i problemele funcionale aprute n timpul proiectrii.
Intreinerea eficient a site-ului, se poate realiza pe baza unui plan de ntreinere, etapizat n
timp, care poate s conin:
frecvena de actualizare;
imbunatatirile sau modificarile aduse;
informatii i resurse de actualitate;
comentariile sau recomandarile vizitatorilor;
poziia n clasamentul motoarele de cautare;
mbuntirea configuraiei hardware i resursele software suplimentare.
Actualizarea site-ul dup ce a devenit operational este o sarcin obligatorie ce presupune:
mbuntrea unor caracteristici tehnico-funcionale;
adugarea de noi funcionaliti;
actualizarea coninutului informaional;
gestionarea formelor de feedback pentru vizitatori:
legturi i resurse utile, sfaturi sau informaii recente;
adugarea de funcionaliti noi: blog;
prezena n retelele sociale Facebook, Twitter, Linkedin, YouTube
extinderea spre noi dimensiuni ale afacerii.
Precizm c un ziar electronic sau un site de tiri este actualizat zilnic n schimb un site de
prezentare a unei firme poate fi actualizat sptmnal/ lunar/trimestrial sau bi-anual n funcie
de cerinele de informare i scopul acestuia. Pagina cu noutai este actualizat periodic.
Publicitatea era principala form de comunicare ntre comerciani i partenerii de afaceri dei
nu oferea interaciune ntre cele dou pri sau feedback. Rspndirea Internetului a facilitat o
comunicare n ambele sensuri iar mbuntirea metodelor prin care utilizatorii interacioneaz
ntr-un site este esenial pentru crearea unui site bun.
Bibliografie
1. Baresi L., F. Garzotto, P. Paolini: Extending UML for Modelling
Web
Applications. Annual Hawaii Int.Conf. on System Sciences, Miami, USA. January,
2001, pp. 1285 - 1294.
2. Calero, C., J. Ruiz, M. Piattini: A Web Metrics Survey Using WQM. n: Koch, N.,
Fraternali, P., Wirsing, M. (Eds), Proc. of the 4th Int. Conf. on Web Engineering,
Springer-Verlag, Heidelberg, 2004, ICWE 2004, LNCS 3140, pp. 147-60.
3. Ceri, S., P. Fraternali, A. Bongio: Web Modeling Language (WebML): a Modeling
Language for Designing Web Sites, the Ninth Int. World Wide Web Conf.,
Amsterdam,
Netherlands,
15-19
May
2000
29

www.webml.org/webml/upload/ent5/1/www9.pdf,
<http://www.webml.org/webml/upload/ent5/1/www9.pdf>
4. De Troyer, O., C. Leune: WSDM: A User-Centered Design Method for Web Sites.
Computer Networks and ISDN Systems. Proc. of the 7th Int. World Wide Web
Conference, Elsevier, 1998, pp. 85 - 94.
5. Distante, D., P. Pedone, G. Rossi, G. Canfora: Model-Driven Development of Web
Applications with UWA, MVC and JavaServer Faces. ICWE 2007, pp. 457-472.
6. Escalona, M. J., N. Koch: Requirements Engineering for Web Applications: A
Comparative Study. Journal on Web Engineering, Vol.
2, No. 3, February, 2004,
pp. 193-212.
7. Escalona, M. J., M. Mejas, J. Torres: Developing systems with NDT & NDT-Tool.
The 13^th Int. Conf. on Information Systems Development:Methods and Tools,
Theory and Practice. Vilna, Lituania, September 2004.
8. Elena Jitaru , Metodologii de proiectare a aplicaiilor WEB, Institutul Naional de
Cercetare
Dezvoltare
n
Informatic,
ICI,
Bucureti/,
rria.ici.ro/ria2009_3/art06.html
9. Perrone,V., D. Bolchini: Designing Communication Intensive Web Applications: A
Case Study. Proc. of the VII Workshop on Requirements Engineering (WER 2004), 910 December, 2004, Tandil, Argentina.
10. Shaoa, Z., R. Capra, M. Perez: Transcoding HTML to VoiceXML. Proc. of 15^th
IEEE Int. Conf. on Tools with Artificial Intelligence, Sacramento, California, 2003.
11. Vilain, P., D. Schwabe, C. Sieckenius de Souza: A Diagrammatic Tool for
Representing User Interaction. Proc. UML'2000. LNCS 1939, 2000, pp. 133-147.
12. : UWA Consortium, Ubiquitous Web Applications. In: Proceedings of the eBusiness
and eWork Conference 2002, (e2002: October 16-18, 2002, Prague, Czech Republic)
(2002)
13. Yourdon, E.: Modern Structured Analysis, Prentice-Hall, 1998.
14. W3C (n.d.) HTML Testing - HTML Validation Service and Toolkit
15. <http://valsvc.webtechs.com/>, http://www.w3.org/MarkUp/html-test/
16. WAI (1999). /Web Content Accessibility Guidelines 1.0, W3C
17. 1999/. W3C Web site: http://www.w3.org/TR/WCAG10/
18. WAI (2004a). /Policies Relating to Web Accessibility/. W3C
19. Web site: http://www.w3.org/WAI/Policy/
20. WAI (2004b). /Web Content Accessibility Guidelines 2.0. W3C, Working Draft 30
July 2004/. W3C Web site: http://www.w3.org/TR/WCAG20/
21. Yesilada, Y., R. Stevens, C. Goble: A foundation for tool based mobility support for
visual impaired web users. Proc. of the 12^th Int. World Web Conf., 2003, pp. 422430.
22. http://www.graphic-design.com/
23. http://www.grantasticdesigns.com
24. http://www.graphic-design.com/Web/feature/tips.html
25. https://validator.w3.org/
26. http://jigsaw.w3.org/css-validator/
27. http://validator.w3.org/feed/
30

Web Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design

Uploaded by

Copyright:

Available Formats

Proiectarea aplicaiilor Web

Capitolul III ..........................................................................................................................1

Proiectarea aplicaiilor Web

Figura 3.1. Etapele realizrii unui sistem informatic1

Figura 3.2. WebE2

dup Roger S. Pressman, Software Engineering, A Practitioners Approach,6-th edition, 2005

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

modelul prezentrii, care exprim aranjamentul i aspectul grafic al paginilor,

Proiectarea aplicaiilor Web

3.2. Dezvoltarea aplicaiilor Web

Proiectarea aplicaiilor Web

Figura 3.4.Procesul iterativ de dezvolare a ste-ului web3

sursa: Oleg Burlaca Sisteme de Management a Coninutului Web ,p.23

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

3.2.2. Echipa de realizare

Figura 3.3. Echipa de

Proiectarea aplicaiilor Web

Realizeaz integrarea componentelor n vederea testrii site-ului precum i optimizarea

Proiectarea aplicaiilor Web

3.2.3. Analiza cerinelor

Proiectarea interfeei presupune structura i organizarea interfeei utilizator (UI) ceea ce

Proiectarea aplicaiilor Web

Figura 3.3. Piramida proiectrii aplicaiilor Web4

Cristina Mndru, Proiectarea sistemelor software, math.univ-ovidius.ro/doc/..

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

Prelucrare dup www.websiteoptimization.com

Proiectarea aplicaiilor Web

Figura 3.8. Structura piramidal de

3.2.5. Proiectarea interfeei

Prelucrarea dyp http://www.graphic-design.com/

Proiectarea aplicaiilor Web

Autonomia controlat facilitarea navigrii, cu impunerea conveniilor de navigare

Principiile fundamentale legate de Web design7 au amprenta particularittilor de proiectare:

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

abloanele de proiectare specifice aplicaiilor Web destinate elementelor hypermedia sunt

3.3. Proiectarea arhitectural a unei e-afaceri

Proiectarea aplicaiilor Web

Figura 3.3. Arhitectura three tier a aplicaiilor

Proiectarea aplicaiilor Web

Figura 3.11.Arhitectura MVC

Proiectarea aplicaiilor Web

3.4. Testarea i nregistrarea site-ului

Cea mai des utilizat este oferta de validare Google: https://validator.w3.org/

Proiectarea aplicaiilor Web

3.5. Intereinerea i actualizarea site-ului

Proiectarea aplicaiilor Web

Proiectarea aplicaiilor Web

You might also like