I Aspecte generale privind proiectarea aplicaţiilor web

World Wide Web are o influenţă semnificativă asupra vieţii noastre, fiecare sector de activitate fiind influenţat de acesta. Motivul acestei omniprezenţe constă în special în natura web-ului, caracterizată prin disponibilitatea globală şi permanentă dar şi prin accesul omogen la informaţiile distribuite la nivel global sub forma paginilor web1. Deşi iniţial web-ul a fost inițial proiectat ca un mediu pur informaţional, în prezent el evoluează într-un mediu al aplicaţiilor. Aplicaţiile web de astăzi sunt sisteme software complexe care oferă servicii interactive şi personalizabile accesibile prin intermediul diferitelor dispozitive dar și posibilitatea realizării tranzacţiilor între utilizatori. Aplicaţiile web diferă de aplicaţiile software tradiţionale îndeosebi prin modul în care web-ul este utilizat: tehnologiile şi standardele sale sunt utilizate ca o platformă de dezvoltare şi ca platformă utilizator în acelaşi timp. O aplicaţie web este un sistem software bazat pe tehnologiile şi standardele consorţiului World Wide Web (W3C) care oferă resurse web specifice (conţinut şi servicii), prin intermediul unei interfeţe utilizator numită browser web. Această definiţie include în mod explicit tehnologiile şi interacţiunea cu utilizatorul. De aici deducem că tehnologii precum serviciile web nu sunt aplicaţii web, dar pot fi o parte a acestora, iar site-urile web lipsite de componente software (cum sunt paginile HTML statice) nu sunt considerate aplicaţii web. Proiectarea aplicaţiilor web, ca disciplină ştiinţifică, este influenţată de dezvoltarea aplicaţiilor web. Tendința actuală în domeniul dezvoltării aplicaţiilor web se manifestă printr-o abordare ad-hoc şi o lipsă a metodelor de dezvoltare, aspect care are un impact negativ asupra calităţii. Din acest motiv, este necesară construirea unui ciclu de viaţă a aplicaţiilor web, prezentarea conceptelor, tehnicilor, metodelor şi utilitarelor folosite pentru dezvoltarea sistematică a aplicaţiilor web. Web-ul, aplicaţiile web şi comunitatea web în ansamblu au evoluat de la apariţia Internet-ului la Web 2.0 şi la web-ul semantic, din acest motiv fiind esenţială adoptarea principiilor proiectării web. Similar cu proiectarea aplicaţiilor software tradiționale, proiectarea web implică utilizarea unei abordări sistematice pentru realizarea specificaţiilor, implementării, operării şi întreţinerii aplicaţiilor web. Din punct de vedere al istoricului dezvoltării şi complexităţii distingem anumite tipuri de aplicaţii web: orientate pe documente, interactive, tranzacţionale, omniprezente, ale web-ului semantic și de tip cloud computing. Tendinţele actuale privind dezvoltarea aplicaţiilor web şi creşterea complexităţii şi importanţei acestora pentru diverse segmente ale societăţii şi în particular pentru funcţionarea eficientă a unor procese de afaceri (de exemplu în comerţul electronic), au sporit gradul de interes privind acest tip de dezvoltare şi calitatea pe termen lung a aplicaţiilor web, acestea având o pondere considerabilă în software-ul dezvoltat în prezent. Proiectarea reprezintă în general o aplicaţie practică a ştiinţei (în comerţ sau industrie) folosită în scopul dezvoltării aplicaţiilor într-un mod mai bun, mai rapid, mai ieftin şi mai sigur. Ingineria software este definită ca o aplicaţie a ştiinţei şi matematicii prin care capacităţile unui sistem de calcul pot fi utilizate de oameni prin intermediul programelor, procedurilor şi documentaţiei asociate. Proiectarea aplicaţiilor web reprezintă aplicarea unor abordări sistematice şi cuantificabile (concepte, metode, tehnici, utilitare) în analiza cerinţelor, proiectarea, implementarea, testarea, exploatarea şi întreţinerea aplicaţiilor web de calitate superioară; este un mod sistematic de a gestiona complexitatea şi diversitatea aplicațiilor web.

1 Berners-Lee, T., WWW: Past, Present, and Future, IEEE Computer, 29 (10), 1996, pp. 69–77

Principiile de bază ale proiectării aplicaţiilor web sunt similare cu cele din ingineria software-ului tradițional și implică: - obiective şi cerinţe clar definite; - dezvoltarea sistematică, în faze, a aplicaţiilor web; - planificarea foarte atentă a acestor faze; - auditul continuu al întregului proces de dezvoltare.

1.1 Categorii de aplicaţii web Evoluţia web-ului a determinat unificarea diferitelor discipline (ex. mass-media şi tehnologia informaţiei şi comunicării), facilitând crearea, întreţinerea şi utilizarea diferitelor tipuri de informaţii de oriunde, în orice moment şi folosind o varietate de dispozitive, cum ar fi calculatoarele desktop şi notebook-urile, PC-urile de buzunar, Personal Digital Assistants (PDA-uri) şi telefoanele mobile. Evoluţia web-ului poate fi abordată pe mai multe dimensiuni, din perspective diferite:

- creşterea numărului de site-uri şi pagini web;- numărul de utilizatori web;- numărul de vizite web;- funcţionalitatea şi interactivitatea pe care aplicaţiile web le oferă;- tehnologiile folosite pentru crearea aplicaţiilor web;- impactul web-ului asupra mediului social şi al afacerilor2.Aplicaţiile web au grade variate de complexitate. Acestea pot fi pur informaţionale,

aplicaţii de comerţ electronic complexe care funcţionează 24 de ore pe zi/7 zile pe săptămână/365 zile pe an (24/7/365) (Web 1.0) sau aplicaţii specifice Web 2.0 care implică generarea conţinutului de către utilizatori (un web "read-write"). Web 3.0 este reprezentat de web-ul semantic (sensul datelor), personalizarea (ex. iGoogle), căutarea inteligentă şi de reclame care apar în funcţie de comportamentul utilizatorului3.

O aplicație web este un sistem complex şi constă dintr-un număr mare de componente eterogene, cu un nivel sporit de interacţiune între componente. După cum se poate observa în figura următoare există o multitudine de factori care contribuie la complexitatea sistemelor web (vezi Figura 1.1).

2 Murugesan, S., Web Application Development: Challenges and the Role of Web Engineering, în Rossi, G., Pastor, O., Web Engineering Modelling and Implementing Web Applications, Springer 2008, p. 10

3 Web 3.0 Concepts Explained in Plain English (Presentations), disponibil la http://www.labnol.org/internet/web-3-concepts-explained/8908/, mai 2009

Interfață

Arhitectura

Distribuire pe diverse dispozitive,

web mobil

Performanță, scalabilitate, nr. de

utilizatori

Diversitatea conținutului

Securitate

Backend Interactivitate

Utilizatori diverşi

Proiectare/cod

Sistem web

Figura 1.1 Complexitatea unui sistem web4

Aplicațiile web devin tot mai complexe pe măsură ce se ocupă nu numai cu problemele tehnologice, dar, de asemenea, cu probleme organizatorice care nu sunt sub controlul echipei de proiect. Dezvoltatorii trebuie să înțeleagă gradul de complexitate a unui proiect web și modul în care acesta afectează rezultatul proiectului. Complexitatea ar putea fi rezolvate printr-o abordare holistică, inginerească. Dezvoltatorii web doresc de regulă să simplifice sistemul, prin îndeplinirea cerințelor prevăzute și nu să accentueze complexitatea acestuia.

În funcţie de istoricul dezvoltării şi gradul de complexitate au fost identificate diferite categorii de aplicaţii web (vezi Figura 1.2).

4 Murugesan, S., Web Application Development: Challenges and the Role of Web Engineering, în Rossi, G., Pastor, O., Web Engineering Modelling and Implementing Web Applications, Springer 2008, p. 18

Figura 1.2: Categorii de aplicaţii web5

Se remarcă o corelaţie între cronologia dezvoltării şi complexitate. În această ordine de idei, aplicaţiile bazate pe fluxuri sunt bazate pe tranzacţii, nivelul superior de dezvoltare necesitând o dezvoltare anterioară a unei categorii mai puţin complexe. Există şi excepţii de la această regulă pentru anumite categorii (de exemplu aplicaţiile orientate pe portaluri), care sunt recente din punct de vedere istoric dar au un grad scăzut de complexitate. Aplicaţiile web ale organizaţiilor care au fost pe web încă de la începuturi au avut deseori un istoric al dezvoltării similar cu cel descris în Figura 1.2. Dezvoltarea unei aplicaţii web poate fi începută în oricare din aceste categorii şi ulterior continuată către un nivel sporit de complexitate. Noile categorii sunt în general mult mai complexe, dar aceasta nu înseamnă că ele pot înlocui în totalitate vechea generaţie. Site-urile web axate pe documente sunt precursoare ale aplicaţiilor web, accentul punându-se pe proiectarea vizuală. Paginile web sunt stocate pe un server web ca documente HTML statice şi sunt trimise clientului web ca răspuns la o cerere. Aceste pagini web sunt de obicei actualizate manual folosind utilitare specifice, activitate cunoscută sub numele de authoring, care include realizarea legăturilor din site-urile web şi

5 prelucrare după Kappel, G., Prőll, B., An Introduction to Web Engineering, în Kappel, G., Prőll, B., Web Engineering The Discipline of Systematic Development of Web Applications, John Wiley and Sons, 2006, p. 5

includerea elementelor grafice. Pentru site-urile web care impun schimbări frecvente sau pentru cele cu un număr mare de pagini această actualizare creşte semnificativ costurile şi adesea are drept consecinţă prezentarea unor informaţii depăşite. În plus există pericolul apariţiei inconsistenţelor atunci când un anumit conţinut este prezentat frecvent, redundant pe mai multe pagini web pentru a uşura accesul. Principalele beneficii sunt simplitatea şi stabilitatea unui astfel de site web dar şi timpul scurt de răspuns, paginile fiind deja stocate pe serverul web. Din aceasta categorie de site-uri fac parte paginile principale statice şi paginile simple pentru micile afaceri, care oferă informații despre produsele şi serviciile oferite.

Odată cu apariţia standardului Common Gateway Interface (http://tools.ietf.org/html/draft-robinson-www-interface-00) şi formularelor HTML, s-au dezvoltat şi aplicaţiile web interactive, oferind o primă formă de interactivitate prin intermediul formularelor, butoanelor radio şi meniurilor de selecţie. Paginile web şi legăturile către alte pagini sunt generate în mod dinamic în funcţie de datele introduse de utilizator. Exemple de astfel de categorii sunt prezentările virtuale, site-urile de ştiri sau de planificare a călătoriilor. Aplicaţiile web tranzacţionale oferă mai multă interactivitate, utilizatorul având posibilitatea de a interacţiona cu aplicaţia în modul citire dar şi de a realiza actualizări ale conţinutului. Premisa necesară pentru un astfel de sistem implică existenţa unor sisteme de baze de date care permit manevrarea eficientă a unui conţinut în continuă creştere în cadrul aplicaţiilor web şi oferă posibilitatea unor interogări structurate. Posibilitatea de a crea pagini web din conţinutul stocat în bazele de date a permis dezvoltatorilor web să ofere informaţii personalizate pentru vizitatori. Din această categorie de aplicații fac parte băncile online, magazinele online şi sistemele de rezervare online pentru hoteluri. Aplicaţiile web bazate pe fluxuri permit manevrarea fluxurilor de lucru în interiorul sau între diferite companii, autorităţi publice şi utilizatori privaţi. Pentru aceste aplicaţii este esenţială disponibilitatea unor servicii web adecvate pentru asigurarea interoperabilităţii6 . Aplicaţiile care fac parte din această categorie sunt soluţiile B2B (Business-to-Business) din comerţul electronic, aplicaţiile e-government din domeniul administraţiei publice sau suportul web pentru fluxurile de date ale pacienţilor în sectorul sănătăţii.

Aplicaţiile web orientate pe portaluri oferă un singur punct de acces la surse de informaţie şi servicii separate eterogene. Realizatorii de browsere (Mozilla, Apple, Microsoft), motoarele de căutare (Yahoo, MSN), serviciile online (AOL) şi alte companii au sesizat cererea existentă pentru astfel de aplicaţii şi au oferit hub-uri centrale (cunoscutele portaluri din prezent) ca punct de acces la web. Pe lângă aceste portaluri generale, există diverse portaluri specializate cum ar fi portalurile pentru afaceri (ex. eafacere.ro), portalurile pentru comerţ (ex. price.ro) şi portalurile pentru comunităţi (ex. portal.edu.ro). Portalurile pentru afaceri oferă angajaţilor şi/sau partenerilor afacerii un acces focalizat la diferite surse de informaţie şi servicii prin intranet sau extranet. Portalurile pentru comerţ funcţionează pe piaţa B2C (Business to Consumer) oferind bunuri de consum direct către public şi în B2B (Business to Business), prin vânzarea de produse proprii unor companii din alte sectoare de activitate. Portalurile pentru comunităţi se adresează unor grupuri ţintă specifice şi încearcă să creeze o loialitate a clienţilor prin intermediul interacţiunilor cu utilizatorii.

Generaţia Web 2.0, cunoscută şi sub numele de web-ul înțelept, web-ul centrat pe indivizi şi web-ul read/write, oferă interfeţe utilizator inteligente şi facilităţi pentru utilizatori pentru a genera şi edita conţinutul prezentat pe web. Prin încorporarea de tehnologii web

6 Weerawarana, S., Curbera, F., Leymann, F., Storey, T., Ferguson, D. F., Web Services Platform Architecture, Prentice Hall, 2005

precum AJAX, Ruby, blog-uri, wiki-uri, bookmarking social şi tagging, web-ul a devenit mult mai dinamic şi mai interactiv, astfel utilizatorii putând alege nu numai conţinutul de pe un site dar şi contribui, de asemenea, la aceasta. Tehnologia feed-urilor web permite utilizatorilor să fie la curent cu conţinutul actualizat al unui site, fără a fi nevoiți să-l viziteze. O altă caracteristică a noului web este răspândirea site-urilor web cu API-uri (interfeţe de programare a aplicaţiilor) care facilitează colectarea de date de la un serviciu şi crearea de noi aplicații online de către dezvoltatorii web7. Aplicaţiile web colaborative sunt folosite îndeosebi în scopul cooperării în operaţiile nestructurate (groupware), unde există o nevoie ridicată de comunicare între utilizatori. Aplicaţiile web colaborative suportă distribuirea informaţiei şi spaţiile de lucru (ex. Wikipedia, WikiWiki) pentru a genera, edita şi administra informaţiile distribuite. Acestea sunt utilizate şi pentru a păstra log-urile web (blog-urile) sau ca platforme de e-learning (ex. Moodle). Aplicaţiile RIA (Rich Internet Applications) sunt aplicaţii bazate pe web care rulează într-un browser web şi nu necesită instalarea unui anumit software, dar au caracteristicile şi funcţionalităţile aplicațiilor desktop tradiţionale. RIA reprezintă evoluția browser-ului de la o interfaţă statică a răspunsului (la o cerere), la una dinamică, asincronă. Lățimea mare de bandă, cerințele consumatorilor şi noile tehnologii (inclusiv Web 2.0), au contribuit semnificativ la proliferarea RIA. RIA oferă beneficii importante pentru utilizatori, îndeosebi în ceea ce priveşte interactivitatea şi ușurința în utilizare a aplicațiilor web. Dintre exemplele cele mai populare pentru framework-urile RIA enumerăm: Adobe Flex şi AJAX, Google Earth, Google Mail şi Google Finance. Tehnologii precum XHTML, formularele şi scripturile CGI sunt înlocuite de alte abordări precum AJAX şi serviciile web. Deşi web-ul a fost iniţial caracterizat prin anonimitate, el a avut o orientare către web-ul social, în care utilizatorii îşi prezintă identitatea unei comunităţi cu interese similare. Din această categorie de aplicaţii web fac parte log-urile web sau sistemele de filtrare colaborative precum MySpace și Friendster, care oferă posibilitatea de a găsi atât obiecte de interes similare cât şi persoane cu interese asemănătoare. Oamenii devin atât consumatori cât şi creatori de informaţie prin intermediul blog-urilor sau site-urilor de tipul Flickr, MySpace, YouTube; linia de demarcaţie între un consumator şi editorul de conţinut devine din ce în ce mai estompată în epoca Web 2.0 8. Evoluția sistemelor de calcul mobile, a comunicaţiilor fără fir şi adoptarea pe scară largă la nivel mondial a dispozitivelor mobile (ex. PDA-urile, Pocket PC-urile și smartphone-urile), a permis unui număr tot mai mare de utilizatori să acceseze web-ul folosind aceste dispozitive portabile. Aplicațiile web mobile oferă unele caracteristici suplimentare faţă de aplicaţiile web desktop tradiţionale, cum ar fi serviciile de localizare şi personalizarea. Aplicaţiile web omniprezente oferă servicii personalizate oricând, oriunde şi pentru orice dispozitiv, facilitând astfel accesul independent de locație. Un exemplu poate fi afişarea promoțiilor zilei pe dispozitivele mobile ale tuturor cumpărătorilor care intră într-un supermarket. Pentru acest tip de sistem este important să luăm în calcul limitările dispozitivelor mobile (lăţimea de bandă, dimensiunea ecranului și memoria) şi contextul în care aplicaţia web este utilizată în mod curent. Web-ul semantic are drept obiectiv prezentarea informaţiei pe web nu doar pentru oameni ci şi într-o formă care poate fi interpretată de sistemele de calcul. Aceasta facilitează managementul cunoştinţelor pe web, conectarea şi reutilizarea cunoştinţelor

7 Murugesan, S., Web Application Development: Challenges and the Role of Web Engineering, în Rossi, G., Pastor, O., Web Engineering Modelling and Implementing Web Applications, Springer 2008, p. 11

8 Web 3.0 Concepts Explained in Plain English (Presentations), disponibil la http://www.labnol.org/internet/web-3-concepts-explained/8908/, mai 2009

(mediatizarea conţinutului) dar şi localizarea cunoştinţelor noi relevante (de exemplu cu ajutorul sistemelor de recomandare care sunt o subclasă a sistemelor de filtrare a informației care caută să prezică preferința pe care un utilizator o are pentru un bun material sau element social). Web-ul semantic este o extensie a web-ului actual, în care informaţia are un înţeles bine definit şi permite o colaborare mai bună între calculatoare şi oameni9. Obiectivul acestuia este de a crea un mediu universal pentru schimbul informației, prin crearea unor documente cu un înțeles (semantică) procesabil de calculator pe web. Adăugarea unei semantici schimbă radical natura web-ului, dintr-un loc în care informaţia este doar afişată într-unul în care este interpretată, schimbată şi prelucrată. Asocierea înțelesului cu conţinutul sau stabilirea unui strat de date interpretabil de sistemele de calcul, permite un grad mai mare de automatizare, aplicaţii mai inteligente şi facilitează interoperabilitatea serviciilor. Scopul final al web-ului semantic este de a sprijini schimbul global de informaţii într-o manieră scalabilă, adaptabilă şi extensibilă, astfel încât informaţiile de pe web să poată fi utilizate pentru o mai bună automatizare, integrare şi reutilizare în diverse aplicații. Cele trei componente cheie care constituie web-ul semantic şi contribuie la realizarea obiectivelor sale sunt etichetele semantice, ontologia şi agenții software inteligenți10. Internetul obiectelor presupune ca tot ceea ce se consumă să fie identificat și monitorizat electronic oricând și oriunde. Obiectele uzuale și dispozitivele vor fi etichetate și conectate la baze de date și rețele mari de calculatoare prin folosirea a două tehnologii: NFC (Near Field Communication) și RFID (Radio-Frequency Identification). Tehnologia NFC poate fi înglobată în diverse dispozitive, de la telefoane mobile cu care se pot efectua plăti sau transfera informații până la camere foto digitale ce își transferă fotografiile TV-ului printr-o simplă apăsare de buton. NFC aduce o nouă schimbare metodelor de plată de pe telefonul mobil, în acestea fiind încorporate cărțile de credit sau tichetele pentru transportul în comun. Ca orice nouă tehnologie, NFC are nevoie de o infrastructură, procesul de adaptare fiind lent în comparație cu altele integrate în dispozitivele mobile (ex. camera foto). Exemplul cel mai elocvent al modului în care Internetul lucrurilor ar putea funcționa ar fi un obiect de uz casnic precum frigiderul personal care ar putea ține evidența cantității dintr-un produs care se află în interiorul lui și ar produce automat o listă de produse pe care să o utilizăm când mergem la cumpărături sau ar trimite un email la magazinul alimentar în care se menționează că aveți nevoie de un anumit produs care va fi furnizat de către aceștia. Pentru ca acest lucru să fie posibil, fiecare obiect din frigider ar trebui să conțină o etichetă (tag), iar frigiderul să aibă un sistem de senzori care pot detecta cantitatea de alimente din fiecare recipient, urmând să comunice informațiile unui sistem de calcul. Etichetele (tag-urile) sunt deja utilizate sub formă de RFID (dispozitive de identificare prin frecvență radio) pe majoritatea produselor din supermagazinele cu renume (ex. Wal-Mart) și conțin în interior un sistem de radio-frecvență. Acestea generează un semnal radio, care este apoi preluat de către un transceiver și, ulterior, informațiile despre produs sunt recepționate și afișate. Etichetele (tag-urile) RFID sunt utilizate de cele mai recente pașapoarte electronice. În prezent, cipurile RFID sunt aproximativ de mărimea unei insecte, dar cercetătorii lucrează la miniaturizarea lor cu ajutorul tehnologiilor nano-writing sau al nanofirelor. Se presupune ca în viitor, vom avea posibilitatea de a plasa o etichetă invizibilă RFID pe

9 Berners-Lee, T., Hendler, J., Lassila, O., The Semantic Web, Scientific American, May, 2001, pp. 34-43

10 Shadbolt, N., The Semantic Web revisited, în IEEE Intelligent Systems, May-June, 2006, pp. 96-101

fiecare obiect. De asemenea, s-ar putea adăuga nanosenzori în interiorul etichetelor (tag-urilor), astfel încât acestea să poată stoca și colecta informațiile din mediul înconjurător. În diverse aplicații software se solicită identificarea automată a persoanelor sau produselor pe baza unor coduri atașate. Cele mai utilizate sisteme de codificare și recunoaștere automată sunt cele pe bază de coduri de bare și respectiv cele de tip RFID. Codurile de bare sunt marcaje pe suport de hârtie ușor de identificat pe cale optică. Mult mai versatile sunt etichetele (tag-urile sau transponderele) de tip RFID care pot fi identificate și uneori chiar modificate prin unde radio. RFID poate fi utilizat pentru evidenţa automată a mișcării produselor sau pentru identificarea persoanelor autorizate să acceseze un anumit perimetru. În prezent există diverse implementări de sisteme de autentificare a persoanelor bazate pe tag-uri RFID care permit stocarea datelor relevante ale persoanei (date demografice sau informații medicale).

Compatibilitatea dintre NFC și RFID este asigurată de legătura cu standardele precedente. Din punct de vedere hardware NFC include un element de securitate pentru a crește siguranța aplicațiilor software, mai ales a celor pentru plăți. De exemplu un card de credit poate fi integrat într-un telefon mobil și folosit de către cititoarele de cărți de credit ce folosesc tehnologia NFC. Tehnologia NFC este cea mai bună implementare pentru conceptul cunoscut sub numele de "physical browsing". La nivel microeconomic, dacă tot ceea ce consumăm va fi monitorizat cu ajutorul tag-urilor (etichetelor) miniaturizate, producătorii ar putea afla mai repede nevoile clienților lor. Astfel, traseul fiecărui produs, de la producție la raft, ar putea fi stocat crescând astfel managementul calității de-a lungul întregului lanț de aprovizionare. Cu toate acestea, o astfel de tehnologie ridică numeroase întrebări privind protecția datelor și a vieții private, în special în ce privește senzorii și etichetele inteligente care pot urmări activitatea utilizatorului.

1.2 Caracteristicile aplicaţiilor web O bună înţelegere a caracteristicilor şi cerinţelor specifice aplicațiilor web este esenţială pentru proiectarea și implementarea sistemelor informaționale pe web. Principalele caracteristici ale aplicațiilor web sunt11 : • majoritatea aplicaţiilor web sunt evolutive prin natura lor, necesitând modificări frecvente ale con ţ inutului, func ţ ionalită ț ii, structurii, navigării, prezentării sau implementării. Ele evoluează în special în ceea ce priveşte cerinţele şi funcţionalitatea, în special după ce sistemul este dat în folosinţă. În cele mai multe aplicaţii web, frecvenţa şi gradul de schimbare sunt mult mai ridicate decât în aplicaţiile software tradiţionale; în majoritatea aplicațiilor web nu este posibil să se specifice pe deplin cerinţele în întregul lor de la început; • aplicaţiile web sunt menite să fie utilizate de către o comunitate vastă, diversă şi deseori aflată la distanţă, care au cerinţe, aşteptări şi competenţe diferite. Prin urmare, interfaţa cu utilizatorul şi facilitățile privind uşurința în folosire trebuie să satisfacă nevoile unei comunități diverse de utilizatori anonimi;

• aplicațiile web permit prezentarea unui conţinut variat (imagini, audio şi/sau video), el putând fi integrat folosind anumite proceduri. Prin urmare, includerea textului şi a graficii va implica crearea şi managementul conţinutului, prezentarea acestora într-o manieră cât mai atractivă, precum şi posibilitatea unei gestionări ulterioare a conţinutului; • sistemele bazate pe web, solicită, în general, o atracție estetică ridicată ("look and feel") şi o navigare uşoară;

11 Murugesan, S., Web Application Development: Challenges And The Role Of Web Engineering, Rossi, G., Pastor, O., Scwabe, D., Olsian, L., Web Engineering: Modelling and Implementing Web Applications, Springer, 2008, p.14

• aplicaţiile web, în special cele destinate unui public global, trebuie să adere la sentimente sociale şi culturale diferite dar şi la standardele naţionale (limbi multiple şi sisteme de unităţi) diferite; • nevoile de securitate şi intimitate ale sistemelor bazate pe web sunt, în general, mult mai exigente decât cele din software-ul tradiţional;

• aplicațiile web trebuie să funcționeze corect pe o varietate de dispozitive şi formate de afişare, să suporte diverse echipamente hardware, sisteme software, precum şi reţele cu viteze de acces diferite;

• termenele de dezvoltare ale aplicaţiilor web sunt mai scurte, acest lucru influenţând în mod semnificativ proiectarea, metodologia de dezvoltare şi procesele de dezvoltare adoptate pentru realizarea lor;

• proliferarea noilor tehnologii şi standarde web cumulată cu presiunea competiției de a le folosi aduce propriile sale avantaje dar şi provocări suplimentare pentru dezvoltarea şi întreţinerea aplicaţiilor web; • natura evolutivă a aplicațiilor web necesită un proces de dezvoltare incremental.

Aplicaţiile web diferă de aplicaţiile tradiţionale (non-web), prin anumite caracteristici: unele lipsesc complet în aplicaţiile tradiţionale (ex. navigarea non-liniară - realizată prin intermediul hyperlink-urilor12), iar altele au o importanţă deosebită în cadrul aplicaţiilor web (ex. frecvenţa actualizărilor). Dacă şi în ce măsură este prezentă o anumită caracteristică depinde parţial de tipul de aplicaţie web: dezvoltarea aplicaţiilor web tranzacţionale (cum ar fi sistemele de comerţ electronic) necesită o focalizare mai atentă asupra actualizării şi consistenţei conţinutului comparativ cu sistemele informaţionale pure (de exemplu expoziţiile virtuale).

12 Web Design Principles. Site Navigation, disponibil la http://www.iraqtimeline.com/maxdesign/basicdesign/principles/prinnav.html, aprilie 2011

II Proiectarea cerinţelor pentru aplicaţiile web

Proiectarea cerinţelor implică activităţi care sunt esenţiale pentru succesul proiectării web. Cerinţe incomplete, ambigue sau incorecte pot conduce la dificultăţi majore în dezvoltare sau chiar la anularea proiectelor.

Deşi cerinţele joacă un rol cheie în dezvoltarea aplicaţiilor web, ele sunt deseori descrise în mod neadecvat, consecinţele tipice fiind acceptarea scăzută din partea utilizatorilor sau arhitecturi software neadecvate.

Obiectivele individuale şi aşteptările părţilor interesate reprezintă punctul de pornire al procesului de stabilire a cerinţelor. Părţile interesate sunt oameni sau organizaţii care au o influenţă directă sau indirectă asupra cerinţelor în dezvoltarea sistemului13. Părţile interesate importante sunt clienţii, utilizatorii şi dezvoltatorii; cele tipice pentru aplicaţiile web includ autorii de conţinut, experţii în anumite domenii, profesioniştii în marketing sau în uşurinţa în folosire. Obiectivele şi aşteptările părţilor interesate sunt extrem de diverse, după cum se poate observa şi în următoarele exemple tipice de cerinţe :

- aplicaţia web trebuie să fie disponibilă online până la 1 septembrie 2013 (constrângere din partea clientului);

- aplicaţia web trebuie să suporte minim 2500 utilizatori concurenţi (obiectiv de calitate al clientului);

- limbajul PHP trebuie folosit ca platformă de dezvoltare (perspectiva tehnologică a dezvoltatorilor);

- toate datele clienţilor trebuie trimise securizat (obiectiv de calitate al utilizatorului);- interfaţa utilizator trebuie să suporte layout-uri pentru diferite grupuri de clienţi

(obiectiv de calitate al clientului);- orice utilizator trebuie să poată găsi produsul dorit în mai puţin de trei minute

(obiectiv al clientului privind uşurinţa în folosire);- utilizatorul trebuie să aibă posibilitatea să selecteze o iconiţă care să afişeze articolele

incluse în coşul de cumpărături în orice moment (obiectiv al utilizatorului privind capacitatea).

Identificarea şi implicarea părţilor interesate reprezintă obiectivele principale ale managementului proiectului. O mare provocare o constituie înţelegerea şi aplanarea frecventelor conflicte privind obiectivele, aşteptările şi ordinea de zi. De exemplu, pot exista conflicte între setul dorit de funcţionalităţi şi bugetul disponibil; între setul de funcţionalităţi, programul proiectului şi calitatea dorită; sau între tehnologia de dezvoltare dorită şi aptitudinile şi experienţele dezvoltatorilor. Înţelegerea şi rezolvarea din timp a acestor contradicţii şi conflicte este esenţială şi are o contribuţie importantă la managementul riscului. Au fost propuse diferite tehnici de negociere pentru a susţine acest obiectiv, dezvoltarea unei viziuni comune între părţile interesate fiind o condiţie pentru succes. Obiectivele părţilor interesate sunt deseori reprezentate informal, oferind suportul pentru cerinţele derivate mai detaliate.

Cerinţele sunt clasificate deseori în cerinţe funcţionale, cerinţe non-funcţionale şi constrângeri14.

Cerinţele funcţionale definesc capacităţile şi serviciile unui sistem, iar cerinţele non-funcţionale descriu nivelele de calitate dorite ("Cât este de securizat?", "Cât este de uşor de folosit?").

13 Kotonya, G., Sommerville, I., Requirements Engineering: Processes and Techniques, John Wiley & Sons, 1998

14 Robertson, S., Robertson, J., Mastering the Requirements Process, Addison-Wesley, 1999

Constrângerile sunt condiţii non-negociabile care afectează un proiect. Exemple de constrângeri sunt nivelul de calificare al echipei de dezvoltare, bugetul disponibil, data livrării sau infrastructura de calculatoare existentă în zona de dezvoltare.

Toate cerinţele şi constrângerile dintre contractor şi client sunt sintetizate într-un document.

Abordările uzitate în proiectarea cerinţelor pun accentul pe identificarea şi implicarea părţilor interesate, negocierea şi descoperirea cerinţelor pe bază de scenarii, analizarea contextului organizaţional şi social anterior modelării detaliate şi definirea clară a constrângerilor care afectează dezvoltarea15.

Aspectele calitative sunt decisive pentru succesul aplicaţiilor web. Exemple: performanţa unei aplicaţii web, securitatea în sistemele de e-commerce, disponibilitatea, uşurinţa în folosire. În ciuda importanţei aspectelor calitative, dezvoltatorii trebuie să se confrunte cu faptul că specificarea exactă a cerinţelor de calitate este dificilă înaintea construirii sistemului. De exemplu timpul de răspuns al unei aplicaţii web depinde de mulţi factori, care nu pot fi controlaţi de echipa de dezvoltare.

Calitatea interfeţei utilizator este un alt aspect hotărâtor pentru succesul aplicaţiilor web. Când realizează aplicaţii web dezvoltatorii trebuie să fie conştienţi de următorul fenomen: utilizatorii nu vor fi capabili să înţeleagă şi să aprecieze o aplicaţie web uitându-se la modele şi specificaţii abstracte; ei trebuie să experimenteze. De aceea, este foarte important să se completeze definirea şi descrierea cerinţelor prin adăugarea unor prototipuri pentru scenariile importante ale aplicaţiei16.

Calitatea conţinutului. Majoritatea metodelor tradiţionale de proiectare a cerinţelor neglijează conţinutul web, deşi este un aspect extrem de important al aplicaţiilor web. Pe lângă problemele legate de tehnologia software, dezvoltatorii trebuie să aibă în vedere conţinutul şi în special crearea şi întreţinerea acestuia. În contextul proiectării cerinţelor este esenţială specificarea nivelului dorit de calitate a conţinutului. Cele mai importante caracteristici de calitate includ acurateţea, obiectivitatea, credibilitatea, relevanţa, actualitatea, caracterul complet sau claritatea. Sistemele de management al conţinutului (CMS) au devenit importante şi permit reprezentarea concisă şi consistentă a conţinutului prin separarea conţinutului de layout şi oferirea utilitarelor de editare a conţinutului.

Datele fixe de livrare. Multe proiecte web au o dată fixă de livrare, toate activităţile şi deciziile trebuind să fie finalizate până la un termen limită. Negocierea şi stabilirea unei ordini de prioritate a cerinţelor sunt esenţiale în aceste condiţii.

2.1 Metode specifice de proiectare a cerinţelor aplicaţiilor web

În prezent sunt disponibile numeroase metode, ghiduri, notaţii, cataloage şi utilitare pentru toate activităţile de proiectare a cerinţelor. Totuşi, dezvoltatorii trebuie să evite o abordare unitară, metodele de proiectare a cerinţelor trebuind adaptate permanent specificului proiectării web şi situaţiilor care apar în anumite proiecte. Dezvoltatorii trebuie să clarifice următoarele aspecte pe parcursul procesului de proiectare a cerințelor:

- Ce tipuri de cerinţe sunt importante pentru aplicaţia web?- Cum vor fi descrise şi documentate cerinţele pentru aplicaţia web? Care sunt

gradele utile ale detalierii şi formalismului? - Trebuie avută în vedere folosirea utilitarelor? Care dintre acestea sunt potrivite

pentru nevoile specifice ale proiectului?

15 Boehm, B. W., Requirements that Handle IKIWISI, COTS, and Rapid Change, IEEE Computer, 33 (7), July, 2000, pp. 99–102

16 Constantine, L., Lockwood, L., Software for Use: A Practical Guide to Models and Methods for Usage-Centered Design, ACM Press, 2001

2.1 Tipuri de cerinţe Organizaţiile de standardizare şi cele comerciale au dezvoltat un număr mare de taxonomii pentru definirea şi clasificarea diferitelor tipuri de cerinţe (de exemplu Volere17 sau IEEE 830-199818). Majoritatea taxonomiilor fac distincţie între cerinţele funcţionale şi cele non-funcţionale. Cerinţele funcţionale descriu capacităţile şi serviciile unui sistem (ex. "Utilizatorul poate selecta o iconiţă pentru a vizualiza articolele din coşul de cumpărături în orice moment"). Cerinţele non-funcţionale descriu proprietăţile capacităţilor şi nivelul dorit al serviciilor (ex. "Aplicaţia web va suporta cel puţin 2500 de utilizatori concurenţi."). Alte cerinţe non-funcţionale se referă la constrângerile proiectului şi interfeţele sistemului. În continuare vom discuta pe scurt tipurile de cerinţe relevante pentru proiectele de dezvoltare web: Cerinţe funcţionale. Cerinţele funcţionale specifică capacităţile şi serviciile pe care un sistem ar trebui să le ofere (de exemplu transferul de bani într-o aplicaţie de online banking). Cerinţele funcţionale sunt frecvent descrise utilizând scenariile de utilizare de caz (diagrame UML Use Case) şi specificaţiile de formatare19 (vezi Figura 3.9 - diagrama Use Case specifica aplicatiei discutate la laborator).

Figura 3.9: Diagrama de caz de utilizare pentru magazinul online

Toate aplicaţiile web au cel puţin un utilizator uman, de cele mai multe ori anonim. În exemplul abordat, al unui magazin online (e-shop), se pot identifica doi actori: utilizatorii magazinului online şi cumpărătorii care comandă articole. Figura de mai sus reprezintă o diagramă tip caz de utilizare, care va servi drept punct de p ornire pentru modelarea ulterioară. Cerinţele navigaţionale care suplimentează cerinţele funcţionale sunt

17 Robertson, S., Robertson, J., Mastering the Requirements Process, Addison-Wesley, 1999

18 IEEE Recommended Practice for. Software Requirements, http://www.cse.msu.edu/~chengb/RE-491/Papers/IEEE-SRS-practice.pdf, august 2011

19 Cockburn, A., Writing Effective Use Cases, Addison-Wesley, 2001

evidenţiate prin stereotipul <<navigation>> în diagrama tip caz de utilizare. UWE face distincţie între cele două tipuri de cazuri de utilizare:

- cazurile de utilizare <<navigation>> care reprezintă activităţi navigaţionale ale utilizatorului (cum ar fi selectarea unui articol şi vizualizarea coşului de cumpărături) şi

- cazurile de utilizare UML standard care surprind logica afacerii a aplicaţiei web.

Cerinţe privind conţinutul. Cerinţele privind conţinutul specifică conţinutul care ar trebui prezentat de aplicaţia web. Conţinutul poate fi descris, de exemplu, sub forma unui glosar.

Cerinţe privind calitatea. Cerinţele privind calitatea descriu nivelul de calitate al serviciilor şi capacităţilor şi specifică proprietăţi importante ale sistemului precum ar fi securitatea, performanţa sau uşurinţa în folosire20. Standardul internaţional ISO/IEC 912621 defineşte un model independent de tehnologie pentru calitatea softului, care cuprinde 6 caracteristici de calitate, fiecare având propriile trăsături:

• funcţionalitatea – descrie prezenţa funcţiilor care îndeplinesc proprietăţile definite. Trăsăturile sunt concordanţa, precizia, interoperabilitatea, complianţa şi securitatea;

• siguranţa – descrie capacitatea unui produs software de a-şi menţine nivelul de performanţă în anumite condiţii pe o perioadă definită de timp. Trăsăturile sunt maturitatea, toleranţa la erori şi capacitatea de recuperare;

• uşurinţa în folosire – descrie efortul necesar pentru a utiliza un produs software şi evaluarea sa individuală de către un grup de utilizatori definit sau presupus. Trăsăturile sunt uşurinţa în înţelegere, învăţare şi operare;

• eficienţa - descrie raportul între nivelul de performanţă al unui produs software şi resursele pe care acesta le utilizează în anumite condiţii. Trăsăturile sunt comportamentul în timp și comportamentul resurselor;

• întreţinerea – descrie efortul necesar pentru a implementa modificări prestabilite într-un produs software. Trăsăturile sunt posibilitatea de analiză, schimbare, stabilitate şi testare;

• portabilitatea – descrie capacitatea unui produs software de a fi mutat dintr-un mediu în altul. Trăsăturile capacitatea de adaptare, instalare, potrivire şi înlocuire.

Cerinţele mediului sistemului. Aceste cerinţe descriu modul în care o aplicaţie web este inclusă în mediul ţintă şi interacţionează cu componentele externe, incluzând de exemplu componentele comerciale autonome sau un hardware special. De exemplu, dacă o aplicaţie web se presupune că va fi disponibilă global, atunci în cerinţele de mediu trebuie să se specifice detaliile.

Cerinţele interfeţei utilizator. Deoarece se presupune că utilizatorii web folosesc aplicaţia web fără a fi instruiți în prealabil, ghidarea intuitivă şi auto-explicativă a utilizatorilor este esenţială pentru acceptarea aplicaţiei. Cerinţele privitoare la interfaţa utilizator definesc modul în care o aplicaţie web interacţionează cu diferite tipuri de clase de utilizatori. Principalele aspecte sunt hipertextul (structura de navigare) şi prezentarea (interfaţa utilizator). Detaliile de navigare şi prezentare sunt definite în mod normal în procesul de modelare, dar deciziile iniţiale privind proiectarea interfeţei utilizator trebuie luate pe parcursul extragerii cerinţelor . Prototipurile sunt cele mai potrivite în această

20 Chung, L., Nixon, B. A., Yu, E., Mylopoulos, J., Non-Functional Requirements in Software Engineering, Kluwer Academic Publishers, 2000

21 ISO/IEC 9126-1:2001(E), http://webstore.iec.ch/p-preview/info_isoiec9126-1{ed1.0}en.pdf, august 2011

situaţie. Constantine şi Lockwood sugerează că utilizatorii trebuie să coopereze în proiectarea scenariilor pentru anumite sarcini22.

Cerinţe posibile pe parcursul dezvoltării. Produsele software în general şi aplicaţiile web în particular sunt subiectul unei evoluţii şi îmbunătăţiri continue. Din acest motiv dezvoltatorii web trebuie să anticipeze cerinţele care ar putea apare după folosirea planificată pe termen scurt a aplicaţiei. De exemplu, o cerinţă de calitate care solicită suplimentarea cu 5000 de utilizatori concurenţi în doi ani trebuie avută în vedere, prin definirea unei arhitecturi scalabile a sistemului.

Constrângerile proiectului. Constrângerile proiectului nu sunt negociabile pentru părţile interesate ale proiectului şi includ de obicei bugetul şi planul, limitările tehnice, standardele, tehnologia de dezvoltare folosită, regulile de desfăşurare, aspectele de întreţinere, constrângerile operaţionale şi aspectele legale sau culturale care afectează proiectul.

Cazurile de utilizare UML sunt utile pentru a descrie cerinţele funcţionale. Un caz de utilizare descrie o funcţie a sistemului din perspectiva actorilor acestuia şi conduce la un rezultat perceptibil de către actori. Un actor este o entitate externă sistemului care interacţionează cu sistemul. O diagramă de utilizare de caz prezintă relaţiile dintre cazurile de utilizare şi actori. Diagramele de utilizare de caz sunt utile pentru a ilustra dependenţele strânse dintre cazurile de utilizare şi actori. Atributele descriu numărul şi numele cazului de utilizare, actorii implicaţi, condiţiile anterioare şi posterioare, evoluţia, excepţiile şi erorile, variaţiile, sursa, raţionamentul sau interdependenţele cu alte diagrame UML.

22 Constantine, L., Lockwood, L., Software for Use: A Practical Guide to Models and Methods for Usage-Centered Design, ACM Press, 2001

III Implementarea aplicațiilor web folosind o abordare pragmatica

În prima parte vom aborda procesul de proiectare al aplicațiilor web pentru programatorii care au puţine noţiuni de design. Pe lângă culorile şi machetele atractive, site-urile web au nevoie de o programare realizată la un nivel profesionist, pentru a fi corect proiectate. Un design web implică mai mult decât crearea de pagini web atractive. Concepte de bază precum teoria culorilor, tipografie, layout-ul şi gradul de utilizare sunt toate esenţiale pentru un bun design. Aceste lucruri conlucrează, a.î. site-ul să devină un succes pentru utilizatori. Putem alege toate culorile în mod corect şi să folosim gradient-uri omogene, dar dacă nu utilizăm un font lizibil, site-ul nostru nu este bine proiectat. Putem realiza o creație deosebită în Photoshop sau GIMP, dar nu vom fi niciodată în măsură să facem să arate mai bine într-un browser, dacă nu ştim să lucrăm cu HTML şi CSS. Dacă utilizăm un markup defectuos, programele JavaScript nu vor funcţiona aşa cum ne-am aştepta. Dacă nu optimizăm conţinutul, motoarele de căutare vor ignora site-ul nostru. Dacă nu luăm accesibilitatea şi gradul de ușurință în utilizare în serios, utilizatorii vor evita site-ul.

Un alt aspect cheie pentru un design web bun este creativitatea. Vom construi un site pentru a ilustra procesul de proiectare, dar important este să experimentați și să nu luați totul în serios, exact aşa cum este expus. Alegeţi culori şi fonturi proprii, folosind aplicația prezentată în continuare ca un ghid pentru a obţine designul dumneavoastră. Pe măsură ce puneţi în aplicare propriul design, veţi afla mult mai multe despre teoria design-ului web.

Majoritatea programatorilor web primesc de regulă un fişier Photoshop (extensia acestuia este .psd) de la un grafician. O parte a job-ului unui dezvoltator este de a încorpora acest design într-o aplicaţie web, şi să ştie să manipuleze psd-urile ca parte a procesului de proiectare. Machetele Photoshop sunt folosite din două motive:

- ele sunt instrumente bune pentru a descrie multe părţi ale procesului de proiectare şi

- este mai uşor să implementăm conceptele CSS atunci când lucrăm cu culorile din machete. DrummersCenter, este aplicația web pe care o vom construi şi reprezintă un magazin online unde utilizatorii pot consulta produse din gama instrumentelor muzicale de percuție (tobe). Scopul final este de a crea un sistem de management al conținutului (CMS) pentru aceste tipuri de instrumente muzicale, oferind posibilitatea managerilor de conținut de a administra categoriile de produse și produsele individuale prin intermediul unei interfețe de administrare web. În primul rând, trebuie să încercăm să înţelegem ce vor potențialii noștri clienţi de la aplicația web pe care o vom proiecta. Feedback-ul primit de la aceștia este un punct bun de plecare, dar de multe ori există o listă de cerinţe. Colectarea cerinţelor este la fel de de importantă pentru proiectare, cât şi pentru dezvoltare. Este nevoie să utilizăm experienţa noastră ca dezvoltatori pentru a obţine răspunsurile de care avem nevoie pentru a rezolva problemele clienţilor noştri. În al doilea rând, trebuie să ne asigurăm că am înţeles scopul real al aplicației web şi că avem un simţ pentru publicul ţintă. Diversele categorii de public vor avea aşteptări diferite şi vor interacţiona diferit cu site-ul. Deci, vom afla care este audienţa ţintă a clientului nostru, şi apoi vom cerceta concurenţa pentru a afla punctele sale forte şi punctele sale slabe. Această cercetare ne va ajuta sa întrebăm clienţii noştri: "V-aţi gândit la asta? " În cele din urmă, dacă am obţinut împreună cu clientul o listă de cerinţe, vom începe să schiţăm (folosind un instrument de scris) toate aceste informaţii. Întrebările uzuale sunt:

"de ce?" este nevoie de o astfel de aplicație și “cum?” vom extrage informaţiile de care avem nevoie de la clienţi.

6.1 Colectarea cerinţelor

Dacă ar fi să reproiectăm o aplicaţie web/tradițională existentă, trebuie să ştim exact ceea ce trebuie să facă aplicaţia respectivă. În acest sens, vom intervieva părţile interesate şi utilizatorii. Este recomandat să intrăm şi în codul sursă al sistemului actual pentru al studia. Vom investiga, de asemenea, ceea ce a realizat concurenţa. Este nevoie să urmăm acelaşi proces pe care le îl utilizăm atunci când reproiectăm un site web. Dintre exemplele tipice de cerinţe enumerăm: • "Putem obţine o serie de butoane aspectuoase, care să confere un aspect de strălucitore aplicației web?"

• "Am dori ca logo-ul nostru să reflecte ceva, aşa cum se întâmplă pe alte aplicații web din generația Web 2.0"

• "Dorim să fie folosite anumite culori care să atragă oamenii. Nu vrem ca site-ul să fie părăsit de utilizatori"

• "Vreau să văd că formele arată frumos. Totul să se asemene cu o aplicaţie web."• "Nu sunt foarte sigur de ceea ce caut, dar vreau să fie distinctiv de celelalte

aplicații web similare"• "Avem nevoie de imagini ale produselor din categoria instrumentelor de percuție

care să-i determine pe vizitatori să le cumpere".• "Îmi place foarte mult ceea ce renumitul magazin online Amazon a făcut – putem

face asta? Cu excepţia faptului că pierdem navigarea cu tab-uri, putem folosi mai multe culori? Este posibil acest lucru, nu? "

Cunoaşterea scopului Pe măsură ce proiectăm acest site, ne vom păstra concentrarea pe deservirea publicului ţintă. O abordare utilă este de a obţine de la clienţi o listă de câteva site-uri web pe care ar dori să le folosească ca referinţă. Nu le vom folosi ca un model, dar să avem cunoştinţă despre ele ne poate ajuta depistăm ce elemente plac clienţilor noştri. De obicei, clienţii se vor uita la ceea ce realizează concurenţa directă, în timp ce altele vor încerca să proiecteze site-ul lor pe baza unor site-uri dintr-un domeniu independent. Este necesar ca atunci când proiectăm site-urile web să avem delimitat în mod clar publicul ţintă şi obiectivele acestuia. Vom avea nevoie, probabil, să renunţăm la multe lucruri, dar rezultatul final va fi un site mai bun.

6.2 Realizarea unui plan de implementare

După ce am colectat cerințele şi am înţeles foarte clar ce doreşte site-ul să construiască este necesar să concepem un plan de implementare. Logic, pașii necesari pentru realizarea cerintelor sunt:

1. schiţarea unor design-uri de bază şi obţinerea din partea clientului a aprobării (pentru unul din ele);2. selectarea culorilor;3. selectarea fonturilor;4. construirea logo-ului în Adobe Illustrator;5. implementarea design-ul de bază (machetei) în Adobe Photoshop;6. realizarea de imagini pentru banner, butoane şi alte elemente;

7. programarea în HTML şi CSS pornind de la macheta Photoshop;8. testarea site-ului obținut pentru compatibilitate şi accesibilitate;

Creionul şi hârtia sunt importante pentru procesul creativ şi putem folosi în acest stadiu aceste instrumente mai eficient comparativ cu folosirea unui calculator. Un client non-tehnic ar putea renunța dacă apelăm la sistemul de calcul mobil şi începem să tastăm şi să concepem pe loc un design; creionul şi hârtia reprezintă un instrument excelent de comunicare interpersonală. Vom schiţa ideile de față cu clientul şi apoi îi vom oferi creionul pentru a vedea părerile acestuia privitoare la site. Scopul acestui lucru este de a facilita comunicarea cu echipa şi cu clienţii noştri. Design-ul obținut în această fază s-ar putea să nu semene deloc cu produsul final, dar este un lucru normal.

6.2.1 Schiţarea ideilor

Creionul şi hârtia sunt instrumente excelente pentru a nota fluxul ideilor. Pentru a schiţa un design, trebuie să cunoaştem ce ar trebui să conţină layout-ul site-ului și întrebările firești sunt: - Ce legături trebuie să fie prezente în pagina de start? - Ce elemente ar trebui să conţină pagina de start? Din discuţiile cu clientul a rezultat că layout-ul site-ului va conţine următoarele elemente:

• numele site-ului• un câmp de căutare • un formular de autentificare pentru managementul conținutului• un paragraf introductiv scurt despre ceea ce face site-ul • o listă cu produsele adăugate cele mai recent• o listă de categorii de produse.

Suplimentar, faţă de aceste elemente, pagina de start conţine, de asemenea, legături pentru diferite pagini de informare, dintre care menționăm:

• termeni si condiţii• înregistraţi-vă (text)• politica de confidenţialitate• informaţii de contact

Convenţii privind layout-ulMajoritatea site-urilor web tind să aibă multe lucruri în comun:- o regiune antet care afişează numele site-ului sau logo-ul;- regiunea cu conţinutul principal împărţit în coloane, şi cel puţin una dintre aceste

coloane este folosită ca o bara laterală, care ar putea să conţină elemente de navigare sau informaţii suplimentare;

- o bară de navigare, fie în partea de sus a paginii sau pe partea stângă.- o regiune de subsol care conţine informaţii privind drepturile de autor şi, poate,

unele legături suplimentare. Această similitudine între site-uri se explică prin faptul că design-eriişi dezvoltatorii imită ceea ce lucrează. Nu este o coincidenţă faptul că multe site-uri de ştiri arată la fel; majoritatea ziarelor urmează acelaşi layout. Pentru a proiecta un site web funcţional, trebuie să ne asigurăm că utilizatorii pot găsi ceea ce doresc imediat, fără să fie nevoiţi să "sape" prea adânc; aceasta se realizează prin uşurința navigării.

Înainte de a începe să schiţăm design-ul, vom consulta Internet-ul pentru a căuta idei. Vom căuta site-urile care se află pe același segment de piaţă ca site-ul pep care îl vom realiza. Câteva exemple din domenii care nu au legătură pentru a vedea dacă concurenţei noastre îi lipseşte ceva, ce ar putea folosi in avantajul nostru.

Construirea celor trei schiţe Vom realiza minim trei schi ţ e folosind Balsamiq Mockups (http://www.balsamiq.com/products/mockups) pentru clienţii noștri, pentru fiecare proiect și care vor fi reprezenta:

- un design simplu, conservator; - un design complex; - un design de mijloc, ceva mai conservator, dar care să denote fler.Prima schiţă reprezentată în figura 6.1 are un design minimalist și nu prezintă

funcţionalități, exceptând butonul de înregistrare și caseta de autentificare. Este o versiune grosieră a site-ului care cel mai probabil se va baza pe culoare, gradient-uri, precum şi efecte de umbrire care să atragă atenţia asupra diferitelor secţiuni. Un avantaj pentru al acestui design este faptul că dacă avem mai mult text în conţinut putem ajuta motoarele de căutare să ne plaseze într-un top.

Figura 6.1 Schiță simplă pentru aplicația web

A doua schiţă este mai consistentă din punct de vedere al graficii, cu un spaţiu mai mare pentru o fotografie sugestivă pe partea stângă şi formularele de autentificare şi de înregistrare pe dreapta. Această pagină ar trebui să fie un pic mai atractivă decât prima schiță, dar nu avem atât de multe informaţii pentru a spune utilizatorilor ce ar trebui să facă dincolo de pagina principală.

Figura 6.2 Schiță complexă pentru aplicația web

Ultima schiţă denotă un design mult mai funcţional, care încorporează elemente din pagina de start, dar care transformă categorii ale site-ul într-o variantă simplă de navigare. Acest design păstrează caseta de căutare şi restul de legături, posibilitatea de autentificare şi de înregistrare pe pagina de start, înlocuind formularele cu butoane. Este similar cu design-ul original, dar include anumite elemente grafice şi lasă spaţiu pentru a explica utilizatorilor cine suntem şi de ce ar trebui să utilizeze ceea ce oferim.

Figura 6.3 Schiță funcțională pentru aplicația web

Selectarea schiţeiÎn urma întâlnirii avute cu părţile interesate, aceştia au selectat a treia schiţă; cu

toate acestea, ei ar dori să o vadă ca imagine color (machetă Photoshop) cât mai curând posibil. Părţile interesate vor să vadă o mostră cu culoare. Pentru a face asta, avem nevoie să aflăm despre modul de alegere a culorilor şi font-urilor, astfel încât să putem construi o mostră digitală care să dea bine la următoarea întâlnire.

În design-ul web va trebui să facem multe concesii pentru a mulțumi clientul. Vom schimba culorile cu ceva care nu este pe placul nostru pentru că astfel dorește clientul. Un lucru care frustrează designerii este viziunea lor creatoare distrusă de cerinţele clientului. În calitate de dezvoltatori, am discutat în capitolul anterior modul în care cerinţele

direcţionează proiectele; faza de proiectare este un alt set de cerinţe pentru aplicaţia noastră şi trebuie să fie rafinată, rescrisă şi restructurată.

6.2.2 Alegerea culorilor În acest moment, dispunem de schiţe şi de confirmarea că putem realiza o mostră a design-ului; următorul pas este să alegem unele culori şi construim o schemă de culoare. Culorile pot influenţa pozitiv sau negativ aplicaţia noastră, în funcţie de modul în care le utilizăm şi de modul în care le amestecăm. Culorile evocă emoţii şi atrag atenţia către detaliile importante. Design-erii web experimentați au un ochi special pentru culoare. Experienţa şi intuiţia lor ne ghidează de multe ori atunci când este vorba să creăm o schemă de culori pentru un site web. Dacă cunoaştem cum culorile sunt “legate” între ele, avem posibilitatea să alegem culorile care merg împreună, la fel de uşor cum putem alege modelul de proiectare pentru o aplicaţie web.

Concepte de bază privind culorile O culoare este descrisă prin numele acesteia, nivelul său de saturaţie şi luminozitate. Atunci când lucrăm cu culori, trebuie să ne gândim la nuanţa de culoare, cantitatea de culoare şi cum arată culoarea alături de alte culori. De asemenea, trebuie să ne gândim la modul în care culoarea ar putea fi interpretată de către public. În continuare, vom afla cum funcţionează toate acestea împreună.

• Nuanţă, saturaţie şi luminozitateCând discutăm despre culoarea unui obiect, facem referire de fapt la nuanţă.

Saturaţia este cantitatea de culoare din imagine. O culoare saturată este vibrantă, în timp ce o culoare desaturată apare sumbră şi gri. Dacă reducem saturaţia, vom face culorile să aibă un aspect mai spălăcit. În unele de cazuri, aceasta este un lucru bun, deoarece reduce din pregnanţa unor culori dure sau şocante. Alterarea luminozităţii unei culori poate face aspectul de ansamblu al culorilor mai închis sau mai deschis. Schimbarea luminozităţii şi saturaţiei ne permite să modificăm aspectul culorii așa cum putem observa în figura 6.4.

Figura 6.4 Schimbarea luminozităţii şi saturaţiei unei culori

• Mixarea culorilor aditiv şi substractivCulorile pe care le vedem pe ecran ar putea să nu fie aceleaşi cu cele pe care le

obţinem la imprimare. Există o diferenţă fundamentală între modul în care culoarea apare pe hârtie sau în natură (lumina se reflectă) şi modul de afişare a culorii pe un ecran (culoarea este proiectată). Pe ecran, mixajul de culoare este aditiv; la tipărire, este substractiv. Această diferenţă este foarte vizibilă prin compararea culorilor din vopsele cu culorile de pe ecranul unui calculator.

Putem observa metoda substractivă în acţiune, atunci când amestecăm vopselele. Dacă se amestecă galben şi albastru, obţinem verde. În cazul în care se amestecă albastru şi roşu, obţinem purpuriu. Dacă se amestecă toate culorile, împreună, obţinem negru pentru că obiectele absorb întregul spectru vizibil. Ecranul calculatorului afişează culorile folosind sistemul aditiv de culoare. Culorile primare sunt înlocuite de roșu, verde şi albastru. Aceste culori sunt amestecate şi proiectate, pentru a crea lumină. Atunci când amestecăm roşu, verde şi albastru împreună, vom termina cu alb. Când nu se amestecă toate culorile împreună, obţinem negru. Acesta este un proces aditiv de amestecare de culorii. Ochii noştri absorb culorile care provin de pe ecran. În acest caz, obţinem galben amestecând verde şi roşu.

Când lucrăm cu culori pe calculator, avem posibilitatea de a alege între RGB, metoda aditivă de culoare şi CMYK, care reprezintă Cyan, Purpuriu, Galben, Key (de obicei negru), metoda substractivă. Pentru web se utilizează de obicei RGB. În cazul în care dorim să imprimăm, vom utiliza CMYK, modul de culoare folosite de majoritatea sistemelor de imprimare.

Contextul culoriiDacă privim cu atenţie imaginile din figura 6.5 dreptunghiul albastru din stânga

pare a fi mai închis, chiar dacă ambele dreptunghiuri sunt exact de aceeaşi culoare. Acest truc pe care ochii îl joacă cu noi se numeşte contextul culorii.

Figura 6.5 Contextul culorii

Contextul unei culori poate influenţa foarte mult modul în care aceasta apare în aplicaţia noastră. Chiar dacă din punct de vedere tehnic alegem culorile corect, s-ar putea să facem ajustări suplimentare pentru a le face să arate bine.

Acest efect este cauzat de fluting, termenul tehnic pentru modul în care ochii noştri amestecă împreună culorile adiacente. Avem posibilitatea să utilizăm fluting-ul de culori în avantajul nostru (vezi Figura 6.6) deoarece aceasta face gradient-urile posibile. Dacă nu facem tranziţia suficient de treptat, vom obţine efectul de banding. Dacă facem tranziţia cu o mulţime de mici variaţii, ochii le ignoră şi le amestecă pe toate împreună.

Figura 6.6 Fluting, banding și gradient

Efectul culorilor asupra emoțiilorCulorile sunt asociate cu emoţiile, starea de spirit sau sentimentele. Când alegem

culorile pentru aplicaţia noastră web, este important să ne gândim la diferitele răspunsuri pe care acest lucru le-ar putea declanşa. Alegerea culorii influenţează perspectivele

utilizatorilor noştri; aplicarea unei scheme de culori unui site schimbă complet experienţa utilizatorului.

• Culorile caldeCulorile calde ne fac să ne gândim la căldură și lumina soarelui. Unii consideră că ne

simţim mai calzi, dacă ne uităm la aceste culori. Culorile calde includ roşu, galben şi portocaliu.

Roşu este o culoare puternică, care poate însemna dragoste, bucurie, fericire şi romantism. Aceasta poate reprezenta, de asemenea, poftă, mânie, război sau pericole. În aplicaţiile software este aproape întotdeauna folosită pentru a afişa un avertisment sau un mesaj de eroare deoarece atrage imediat ochii unui utilizator. Galben este o culoare care face împiedică concentrarea utilizatorului, dar poate evoca inteligenţă şi fericire atunci când este utilizată corect. Multe aplicaţii software utilizează un fel de efect de decolorare galben pentru a ne înştiinţa că acţiunea a fost reuşită. Portocaliul poate fi vesel ca şi galben, dar poate fi, de asemenea, arogant şi superior, în funcţie de cantitatea de roşu. Experţii susţin că roşu conţinut în portocaliu poate stimula creierul.

• Culorile reciCulorile reci au un efect de răcire sau calmant asupra oamenilor și sunt utilizate

pentru a diminua tonul unui site. Culorile reci includ albastru, verde, şi violet. Albastrul poate fi calmant și liniştitor şi răcoros și are tendinţa de a determina

utilizatorii să se relaxeze atunci când este desaturat. Cu toate acestea, cu cât nuanţele de albastru devin mai închise, ele pot provoca sentimente de tristeţe si depresie.

Verdele este asociat cu natura, speranţa, sănătatea şi capacitatea de reacţie. Dacă este utilizat în mod incorect, verdele poate declanşa sentimente de invidie, lăcomie, vinovăţie şi dezordine. Anumite nuanţe de verde permit ochilor să se odihnească, ceea ce poate avea efect calmant asupra utilizatorilor. Amestecul greşit de culori poate face ca utilizatorii să se simtă rău sau dezgustaţi.

Purpuriul este una dintre acele culori care nu apare în natură foarte des. Purpuriul este adesea asociat cu regalitatea şi misticismul, deorece a fost extrem de dificil de obţinut din cele mai vechi timpuri și reprezintă un amestec de roşu şi albastru. Purpuriul deschis este deseori asociat cu natura, pacea, liniştea şi spiritualitatea. Violetul închis poate evoca sentimente de depresie; în cantităţi excesive pot fi dificile pentru ochi.

• Culorile neutreCulorile negru, alb, argintiu, gri, bej şi maro contribuie la reducerea decalajului

dintre culorile reci şi calde. Când sunt utilizate ca şi culori de fundal, acestea ajută alte culori să iasă în evidenţă. Negrul poate reprezenta prestigiul şi eleganţa şi poate fi într-adevăr puternic dacă este utilizat în contextul potrivit. Cu toate acestea, negrul este de asemenea asociat cu doliu, moarte, disperare. Când utilizaţi culoarea neagră într-un design, trebuie să vă alegeţi publicul ţintă cu atenţie.

Albul evocă sentimente de puritate şi perfecţiune. Este o culoare perfectă pentru un site web curat. Prea mult alb poate fi plictisitor şi steril, dar face ca celelalte culori să iasă mai mult în evidenţă.

Maroul poate stimula senzaţia de foame, sănătate şi simplitate. Pe de altă parte, unii oameni percep culoarea maro ca pe o culoare murdară, ceva ce cu siguranţă nu e de dorit pentru site-ul dumneavoastră.

Bejul îi face pe oameni să se relaxeze; este o culoare conservatoare care împrumută de la maro si alb. Este o alegere excelentă pentru un fundal, deoarece poate fi calmantă şi va permite altor culori să iasă în evidenţă. Griul rareori evocă o emoţie, dar când o face, de obicei este asociată cu sentimente de tristeţe, de doliu și irascibilitate. Se înclină spre partea rece a spectrului de culori. Gri este o culoare interesantă; dacă o facem întunecată va împrumuta ceva din eleganţa negrului, iar dacă o facem luminoasă va împrumuta unele din trăsăturile albului.

Culorile şi utilizatorii Prejudecăţile unei persoane vor avea un anumit efect asupra modului în care

culorile alese de noi îi vor afecta emoţiile. Aceste prejudecăţi se pot datora unei asociaţii create de o experienţă sau de memorie, dar cel mai adesea sunt culturale.

De exemplu, deşi am putea crede că roşu este o culoare care denotă pasiune, este o culoare care reprezintă norocul şi sărbătoarea în China. În unele părţi din India, culoarea roşie poate însemna triumf sau succes. Roşul poate de asemenea simboliza socialismul şi comunismul; în Africa de Sud, este culoare de doliu. Negrul este o culoare de doliu în lumea occidentală, dar chinezii utilizează negrul pentru a simboliza calitatea superioară. Orhideea purpurie este culoarea națională a Thailandei (Thai Airways), și această culoare predomină în portalul Thailand.com. În mod similar, verdele predomină în portalul Pakistani, iar 123India are nuanța șofranului23. Dacă site-ul nostru va fi utilizat de către un public internaţional, este important să localizăm culorile, la fel cum localizăm textul.

Schemele de culoare Unele culori nu arată bine unele lângă altele, pe când altele da. Schemele de culori

sunt grupuri de culori care lucrează împreună pentru a crea un rezultat atrăgător din punct de vedere vizual. În continuare vom prezenta diferitele tipuri de scheme de culoare şi modul în care le putem aplica.

Înainte de a alege o schemă de culori trebuie să dispunem de cunoştinţe despre teoria culorilor și de aceea vom arunca mai întâi o privire la roata de culori, care arată relaţiile între diferite culori. În diferitele exemple de scheme de culori vom folosi roata RYB de culori amestecate, care foloseşte roşu, galben şi albastru ca şi culori primare (vezi figura 6.7)

Figura 6.7 Roata de culori RYB

• Schema monocromaticăSchema monocromatică este alcătuită din o singură nuanţă de culoare (vezi figura

6.8). Putem crea schema prin modificarea luminozităţii şi saturaţiei nuanţei şi adăugând aceste variaţii la schemă. Această schemă adaugă formă şi adâncime unui design. Atunci când este utilizată la un site, alte elemente precum fotografiile sau iconiţele vor ieşi în

23 Sireteanu, N.A., Impactul Globalizării asupra sistemelor informaționale economice, Teză de doctorat, p.247

evidenta. Această schemă este extrem de simplu de creat, dar funcţionează cel mai bine pentru site-urile în care conţinutul este cel mai important element.

Figura 6.8 Schema monocromatică

• Schema analoagăCele două culori adiacente unei culori de pe roata de culori sunt denumite culori

analoage. Pentru a construi o astfel de schemă vom lua toate cele trei culori (culoarea de bază şi cele două învecinate - vezi figura 6.9). Schema este atenuată, dar culorile adiacente o accentuează un pic. Această schemă de culori implică alegerea culorilor care sunt direct adiacente în roata de culori. O culoare domină schema, iar culorile similare sunt utilizate pentru impact.

Schema este la fel de uşor de creat precum cea monocromatică, dar se obţin rezultate mai bune, deoarece se utilizează culori diferite, în loc de nuanţe diferite ale aceleiaşi culori. Culorile suplimentare ajută la accentuarea culorii principale, atrăgând atenţia utilizatorilor spre conţinutul important.

Figura 6.9 Schema analoagă

Această schemă este lipsită de un contrast real de culoare, neavând atât contrast cât s-ar obţine cu o schemă complementară.

• Schema complementarăSchema de culori complementară foloseşte ca şi culori de bază două culori care apar

în părţi opuse ale roţii de culoare (ex. violet –galben, roşu –verde – vezi figura 6.10). Schemele de culori complementare sunt adesea dificil de echilibrat, deoarece culorile pot fi extrem de luminoase, necesitând diferite trucuri pentru a le atenua. Unele combinaţii, cum ar fi portocaliu şi indigo, pot fi extrem de dificil de echilibrat.

Figura 6.10 Schema complementară

Când sunt folosite în mod necorespunzător, aceste culori pot fi foarte şocante şi intense; totuşi se poate obţine un efect bun prin desaturarea culorilor reci şi saturarea celor calde. Cel mai bun mod de a folosi această schemă este prin folosirea culorii de bază ca şi culoare principală, iar culoarea sa complementară ca o culoare de accent. Folosirea unei culori pentru text şi a culorii complementare pentru fundal poate face textul mai greu de citit dacă nu se fac ajustările de saturaţie corespunzătoare.

• Schema complementar - adiacentă Schema de culori complementar-adiacentă (figura 6.11) este mai dificil de folosit,

dar ca şi cea complementară, poate fi destul de atractivă dacă se fac ajustări corespunzătoare la saturaţie şi luminozitate. Această schemă nu este folosită foarte des, ceea ce înseamnă că vă poate oferi o şansă de a face anumite caracteristici ale unui design să iasă în evidenţă.

Figura 6.11 Schema complementar-adiacentă

Această schemă implică alegerea unei culori de pe roata de culori şi apoi alegerea celor două culori adiacente complementului primei culori. Această abordare permite un contrast puternic, adăugând în acelaşi timp diferite variaţii de culoare.

Gama de culori web-safe Paleta de culori web-safe este formată din 216 culori care arată exact la fel pe toate

sistemele de operare. Această paletă de culori este extrem de limitată, constând din şase nuanţe de albastru, şase nuanţe de verde, şi şase nuanţe de roșu amestecate împreună în diverse cantităţi. Această paletă nu mai este folosită în prezent deoarece majoritatea utilizatorilor folosesc monitoare care pot reda milioane de culori. Instrumentul Color Picker din Photoshop (checkbox-ul Only Web Colors - figura 6.12) permite lucrul în acest mod. Dacă decideţi (sau sunt forţaţi) să utilizaţi o culoare care nu este web-safe, trebuie să fiţi conştienţi de faptul că este posibil să nu arate la fel peste tot.

Figura 6.12 Paleta de culori web-safe

Construirea schemelor de culori Pentru a construi schemele de culori, în practică, sunt folosite două metode diferite:

metoda tehnică şi metoda naturală.

• Metoda tehnică Metoda tehnică foloseşte teoria culorilor prezentată anterior, pentru a construi o

schemă de culori. Se alege o culoare de bază şi apoi se combină cu una din schemele de culoare prezentate pentru a obţine culori care se armonizează cu culoarea de bază. Apoi se ajustează luminozitatea, saturaţia şi contrastul pentru a crea combinaţia potrivită de culori.

Codurile de culoare HTML sunt tripleţi hexazecimali. Primul număr reprezintă roşu, al doilea verde, iar al treilea albastru. De exemplu, #FF0000 va fi de culoare roşie, deoarece toţi biţii sunt “on” pentru primul număr şi “off” pentru celelalte două numere. Fiecare grup conţine o valoare 0 la 255, deci culoare roşie este FF (roşu complet), 00 (fără verde), şi 00 (fără albastru).

Metoda tehnică este o metodă foarte utilizată de cei care nu posedă înclinaţii artistice. Metoda de utilizat și atunci când nu avem fotografii pentru a extrage culori şi avem nevoie rapid de o schemă de culori. În continuare, vom folosi o roată de culori şi vom dezvolta manual o schemă, sau putem utiliza unele instrumente software pentru definirea unei scheme. Instrumentele existente pe web care ne pot ajuta să construim scheme de culori sunt numeroase, unul dintre cele mai bune fiind ColorSchemeDesigner. Acest instrument oferă o interfaţă ușor de utilizat pentru a construi o schemă de culori şi salvează rezultatul în formate diferite, inclusiv o paletă de culori Photoshop (fișier cu extensia ACO).

Când se proiectează o schemă de culori trebuie să alegem roata pe care dorim să o utilizăm; în figura 6.13 este reprezentată roata de culoare RYB în partea stângă şi roata de culoare RGB, în dreapta.

Figura 6.13 Roțile de culori RYB și RGB

După cum putem observa, culorile complementare din aceste roţi sunt diferite. Astfel, într-o schemă complementară dacă folosim roata RYB cu culoare de bază galben, complementul ar fi violet; dacă folosim roata RGB, complementul lui galben ar fi albastru. Majoritatea designer-ilor cred că schemele de culori create cu roata RYB sunt mai plăcute ochiului (aceasta fiind roata culorilor folosite de pictori şi designerii tradiţionalişti) în timp ce alţii cred că ar trebui să utilizăm roata RGB pentru a afişa pagini web, deoarece culorile de pe această roată sunt afişate cu mai multă acuratețe pe ecranul calculatorului.

Roata de culori pe care o alegem nu contează prea mult pentru web design, atât timp cât o utilizăm consecvent în întreg site-ul. Instrumentele pentru culori bazate pe web utilizează roţi de culoare diferite; selectorul de culoare de la ColorSchemeDesigner foloseşte roata de culoare RGB, în timp ce Adobe Kuler folosește roata RYB.

Când ne gândim la produse din categoria instrumentelor muzicale de percuție, culorile care ne vin în minte în mod natural sunt nuanţe de gri (instrumentele din această categorie sunt în general metalice), verde (tobele au de obicei această culoare) și bej (talerele au această culoare). Vom începe prin utilizarea unei variante de gri pentru culoarea de bază. Putem controla culoarea de bază pentru schemă prin selectarea unui

punct de pe roata de culori de pe partea stângă a interfeţei. Pe măsură ce selectăm o culoare, patratele de culoare de pe partea dreaptă se modifică, oferindu-ne o idee despre modul în care funcţionează culorile în schemă.

Dacă cunoaștem deja codul hexazecimal al culorii pe care dorim să îl utilizăm, îl putem specifica manual în ColorSchemeDesigner printr-un clic pe codul de culoare RGB în colţul din dreapta jos al roţii şi introducerea codului în caseta de dialog. Acest lucru este util în cazul în care am selectat o culoare de bază de la o altă sursă, cum ar fi o fotografie sau o pagină web, şi dorim să construiţi rapid o schemă pornind de la ea. Vom utiliza o culoare de bază (codul hexazecimal - #444A4B) pentru această schemă, care este o nuanţă de gri închis. Verde şi bej sunt culori adiacente pe roata de culori, deci putem utiliza schema de culori analoage pentru a construi o schemă folosind culori adiacente. Schimbăm schema din Mono în Accented Analogic, care oferă o schemă de culori compusă din diferite nuanţe de albastru, verde și portocaliu.

Culorile adiacente se găsesc implicit la 30 de grade distanţă de culoarea de bază pe roată; putem ajusta acest unghi prin glisarea uneia dintre culorile adiacente mai aproape sau mai departe. Cu cât este mai mare unghiul, cu atât este mai mare contrastul între culori. Ar trebui adaptate saturaţia şi luminozitatea, astfel încât să putem vedea modul în care aceasta afectează întreaga schemă. În mod implicit, selectorul de culoare selectează diferite niveluri de luminozitate şi saturaţie. Putem modifica acest lucru prin selectarea secţiunii Adjust Scheme. Reducerea saturaţiei decolorează culorile noastre iar reducerea luminozităţii le face mai intunecate, orice variaţie de saturaţie sau de luminozitate pentru o nuanţă fiind permisă din punct de vedere tehnic într-o schemă (vezi figura 6.14).

Figura 6.14 Metoda tehnică de alegere a schemei de culori

În cazul site-ul nostru, pentru a oferi un aspect curat și pentru a face ca celelalte culori să iasă mai mult în evidenţă (categoriile de produse, imaginile și produsele) vom folosi un fundal foarte apropiat de alb (codul hexazecimal - #F5F5F5). În esență, pentru a obține schema de culoare am ajustat unghiul la 70 de grade și am extras din schemă, în primă fază, culoarea care o vom folosi pentru butoanele de autentificare (codul hexazecimal - #162D31). Ulterior am crescut saturația și luminozitatea pentru a obține un contrast mai mare. Astfel, pentru zona categoriilor/produselor de percuție vom folosi verde deschis din zona centru-jos a figurii (codul hexazecimal #9FCF1A) iar pentru butoanele formularelor din site vom folosi portocaliul din partea de centru-jos (codul hexazecimal #DB791C).

Pentru a ajusta schema de culori, vom selecta tab-ul Export al selectorului de culoare şi vom alege una dintre opţiunile de export. Recomandat este să selectăm ACO (Photoshop Palette), astfel încât să putem utiliza aceste culori ca mostre, atunci când construim machetele. Fiecare schemă are URL-ul asociat astfel încât să putem reveni la schemă mai târziu (ex. Scheme ID: 3m62wrXrrw0w0).

Dacă dorim să utilizăm un selector de culoare care se bazează pe roata de culoare RYB, putem opta pentru Adobe Kuler. Folosind Kuler, putem selecta o culoare de bază şi alege o schemă de culori, iar apoi Kuler generează o paletă de cinci culori pentru site-ul nostru. Ulterior, putem ajusta luminozitatea şi saturaţia pentru fiecare culoare din paletă. În final vom salva paleta pentru a fi re-utilizată.

• Metoda naturalăTeoria culorilor nu este întotdeuna cea mai fericită deoarece ajungem să folosim

culori prea sumbre sau prea tehnice. Metoda naturală de selecţie a culorii (potrivirea) este o alternativă populară în care putem dezvolta o schemă de culori prin selectarea culorilor din diferite secţiuni ale unor materiale de referinţă, cum ar fi o fotografie. Această metodă necesită mai mult timp şi planificare pentru a nu selecta culori nepotrivite din imaginea sursă. Avantajul metodei naturale este faptul că lucrăm cu “natura” în sine. Dacă folosim o fotografie cu instrumente de percuție, culorile din acea fotografie sunt deja armonizate. Putem ajusta manual culorile selectate prin deplasarea mouse-ul în jurul fiecărui punct de selecţie indicat de fiecare casetă de culoare şi culoarea din caseta de culoare se va schimba. Adobe Kuler poate extrage culori din orice imagine pe care o încărcăm; ulterior, putem optimiza aceste culori pentru a construi o schemă (vezi figura 6.15).

Figura 6.15 Metoda naturală de alegere a schemei de culori

Observăm în figura 6.15 diferite culori pe care le putem folosi: bej spre alb pentru fundal (codul hexazecimal #EAE3D4), portocaliu pentru butoanele formularelor (culoare similară celei alese prin metoda tehnică - (codul hexazecimal #E38E37), albastru deschis pentru a delimita anumite secțiuni din site (codul hexazecimal #8498A9) și gri închis pentru culoarea legăturilor (nevizitate). Putem extrage culorile manual sau putem folosi o aplicație software. Putem depista în imaginea de mai sus culorile selectate manual utilizând instrumentul Eyedropper în Adobe Illustrator. Selectarea manuală a culorilor este destul de greoaie: trebuie mai întâi să selectăm regiunea cu instrumentul Eyedropper, iar apoi trebuie să vedem ce culoare este selectată uitându-vă la codul culorii în paleta de selecţie a culorii. Din fericire, ColorSchemer Studio și Adobe Kuler ne ușurează această sarcină.

ColorSchemer Studio este un software comercial care are o caracteristică numită PhotoSchemer care construieşte în mod automat o schemă de culori pe baza unei fotografii pe care o furnizăm. Important este ca culorile din fotografia respectivă sa nu fie prea dure.

Vom exersa cu schema de culori până găsim o combinaţie potrivită. În acest punct, ar trebui avem toate culorile şi codurile lor HTML de culoare pe ecran.

Alegerea schemei Este momentul să alegem una dintre cele două metode de creare a unei scheme de

culori înainte de a începe să lucrăm la macheta digitală. În acest caz, schema mai luminoasă creată prin metoda tehnică este cea mai potrivită şi o vom folosi în continuare, dar vom folosi și anumite culori obținute prin metoda naturală.

• Culorile pentru Foreground şi Background Culorile pentru link-uri şi text trebuie alese cu atenţie pentru a fi lizibile. Culorile

pentru foreground şi background ar trebui contrasteze (dacă alegem o culoare de fundal luminoasă, vom alege culori închise pentru text. Cu cât este mai mare contrastul între culorile din prim-plan şi fundal, cu atât utilizatorii vor citi mai uşor conţinutul.

• Legăturile din site Hyperlink-urile trebuie să aibă o culoare diferită de restul textului pentru a le ajuta

să iasă în evidenţă. În mod normal, trebuie alese şi culorile diferitelor tipuri de stări ale legăturii: vizitate, active şi “hovered” (culoarea în care se schimbă link-ul atunci când utilizatorul plasează indicatorul mouse-ului pe acesta).

Opţiunile pentru culorile link-urilor sunt oarecum limitate când utilizăm o schemă de culori analoagă sau monocromatică. O tehnică eficientă de a alege culorile legăturilor este de a utiliza luminozitatea şi contrastul pentru a face diferenţa între link-urile vizitate şi cele pe care se deplasează indicatorul mouse-ului (vezi figura 6.16). De exemplu, putem alege pentru link-urile vizitate o culoare mai ştearsă, ceea ce va face ca link-urile nevizitate să iasă în evidenţă mai bine (contrastul trebuie să fie destul de evident pentru ca utilizatorii să poate face diferenţa). Vom păstra culorile pe care vrem să le utilizăm pentru fiecare secţiune, deoarece ne vor fi necesare la realizarea machetei şi a foii de stil.

Figura 6.16 Schema de culori pentru site-ul DrummersCenter

6.2.3 Fonturi şi tipografie

Tipografia este mult mai mult decât arta de a alege fonturi; ea face conţinutul paginii lizibil. Textul este un element central al interfeţei utilizator a aplicaţiei, deci nevoile utilizatorilor ar trebui să influenţeze deciziile noastre privind tipul de font, dimensiunea şi spaţierea. Dacă textul nostru nu poate fi citit, am eşuat în calitate de designeri, indiferent cât de frumos arată restul paginii.

Anatomia fontului Din miile de fonturi existente, unele funcţionează bine pentru titluri, iar altele

pentru pasaje lungi de text. Toate caracterele dintr-un font sunt aşezate pe o linie de referinţă – baseline (vezi figura 6.17). Înălţimea literelor mici x este în mod tradiţional utilizată pentru a defini o linie medie pentru font. Distanţa dintre linia medie şi linia de referinţă este denumită înălţimea-x a fontului (x-height).

Figura 6.17 Anatomia fontului

Un font are o înălţime-x mare în cazul în care literele mici x sunt relativ mai înalte în comparaţie cu majusculele X. Mulţi designeri cred că fonturile cu înălţimi-x mari sunt mai uşor de citit deoarece unele litere sunt mai uşor de distins. Totuşi, dacă alegeţi un font cu o înălţime-x extrem de mare, cuvintele în sine pot deveni mai greu de citit, deoarece un astfel de font poate semăna cu textul scris în totalitate cu majuscule. Este mai usor de citit o propoziţie compusă din litere minuscule şi majuscule, decât o propoziţie compusă integral din litere majuscule.

Literele mici ale unui font, cum ar fi q şi p, pot avea elemente (descenders) care coboară sub linia de referinţă, iar altele (f, d) au elemente (ascenders) care depăşesc înălţimea-x a fontului. Descender-ii şi ascender-ii pot afecta lizibilitatea textului deoarece pot interfera sau se pot suprapune cu textul de pe alte linii.

Tipuri de fonturiCa dezvoltatori de site-uri web ne putem concentra pe trei tipuri de fonturi: fonturi

serif, sans-serif şi de lăţime fixă (monospaced), fiecare având avantaje şi dezavantaje.

• Fonturi Serif Fonturile Serif sunt uşor de identificat după cozile (serife) de pe litere (vezi figura

6.18). Caracterele serif pot avea linii groase la capăt sau la bază, dar au linii mai subţiri la mijloc sau margini.

Figura 6.18 Fonturi Serif

Times New Roman, fontul implicit utilizat de Microsoft Internet Explorer şi Microsoft Word, este un bun exemplu de font Serif. Acest font a fost proiectat pentru imprimare şi este o alegere proastă pentru utilizarea pe ecranul calculatorului. Una din principalele probleme cu fonturile serif este că liniile subţiri ale literelor le pot face dificil de citit pe ecranul unui computer, mai ales dacă folosim un font de dimensiuni mai mici. Acest dezavantaj este inversul faţă de textul imprimat, unde un font serif este considerat mult mai uşor de citit.

Fonturile Serif arată foarte bine pentru titluri, logo-uri şi sunt adesea asociate cu eleganţa şi prestigiul. Utilizatorii dislexici pot citi mai uşor conţinutul imprimat în fonturi serif datorită unicităţii caracterelor fontului.

• Fonturi Sans-SerifFonturile fără serife sunt fonturi în care un linia fontului este constantă pentru

fiecare caracter. Dintre bine-cunoscutele exemple ale acestui tip de font menționăm Arial şi Helvetica, precum şi Verdana (vezi figura 6.19). Fonturile fără serife sunt uşor de citit pe

ecran (chiar la dimensiuni foarte mici), deci sunt o alegere excelentă pentru conţinutul principal al site-ului.

Figura 6.19 Fonturi Sans-Serif

• Fonturi cu lăţime fixă (monospaced)Fonturile cu lăţime fixă, cum ar fi Courier, sunt fonturi în care fiecare caracter are

acelaşi spaţiu, indiferent de cât de lată este litera. De exemplu, i şi w diferă semnificativ în lăţime într-un font sans-serif, dar au aceeaşi cantitate de spaţiu orizontal într-un font cu lăţime fixă. Aceste tipuri de fonturi sunt potrivite atunci când afişăm cod sursă sau facturi pe bază de text care vor fi trimise într-un e-mail text-only.

În figura 6.20 este afişată în stânga o factură folosind Myriad Pro, un font Serif, şi în dreapta aceeaşi factură folosind Courier New, un font cu lăţime fixă. Fontul cu lăţime fixă face factura mai uşor de citit, deoarece fiecare caracter (inclusiv spaţiile) are acelaşi spaţiu şi lăţime, totul aliniindu-se corect.

Figura 6.20 Fonturi cu lățime fixă

Limitele fonturilor Fonturile standard, cum ar fi Arial şi Times New Roman sunt folosite la modul

general de către toți, dar mulţi designeri preferă să folosească fonturi unice în design-ul web. Cea mai mare problemă cu fonturile de pe web este că acestea nu sunt întotdeauna disponibile pe fiecare calculator. O mulţime de programe, cum ar fi Adobe Illustrator, Adobe Photoshop şi chiar Microsoft Word vin cu numeroase fonturi. Putem folosi oricare din aceste fonturi în design-ul web, dar e posibil ca utilizatorii să nu aibă aceste fonturi instalate.

• Fonturi Web-Safe Fonturi web-safe nu există. Microsoft a prezentat cinci fonturi care sunt disponibile

pe cea mai largă gamă de computere (vezi figura 6.21). Dacă alegem unul dintre acestea avem un control mai strict asupra modului în care prezentăm conţinutul, dar nu avem o garanţie că utilizatorii vor avea fonturile.

Figura 6.21 Fonturi web-safe

Cele cinci fonturi web Microsoft nu sunt de neglijat, dar nu sunt originale şi pot fi destul de plictisitoare. Multe site-uri web folosesc Verdana şi Arial ca fonturi "standard", deoarece funcţionează aproape peste tot. Practic, există o garanţie că fiecare sistem va avea

un font serif, un font sans-serif şi un font monospaced, iar sistemul de operare va defini implicit care font din sistem este asociat cu acele familii. Există totuşi câteva strategii pe care le putem folosi pentru a depăşi aceste limite şi a obţine mai mult control.

a) Înlocuirea cu imagini Designerii deseori crează o imagine care conţine textul redat în font (de exemplu

logo-ul companiilor sau titlurile secţiunilor). Este acceptabil să folosim imagini de fonturi pentru titluri, dar nu trebuie să abuzăm de această tehnică doar pentru că dorim ca fonturile să arate la fel pe toate browserele. Dacă luăm un document Photoshop şi îl tăiem și optimizăm pentru utilizarea pe web, vom crea o serie de probleme suplimentare. În primul rând, pagina va necesita un timp semnificativ mai lung pentru descărcare din cauza dimensiunii imaginilor. În al doilea rând, pagina ar putea să nu mai fie accesibilă de către utilizatorii nevăzători, care se bazează pe cititoare de ecran care exprimă textul de pe ecran şi care nu sunt capabile să citească text încorporat într-o imagine.

Pentru DrummersCenter, vom utiliza o tehnică cunoscută sub numele de metoda cover-up, un tip de înlocuire a imaginilor în care suprapunem textul pe pagină cu imagini folosind CSS. Acest lucru ne permite să obținem ceva cu stil, care va fi accesibil şi îşi va păstra acelaşi aspect pe diferite platforme.

b) Definirea fonturilor de rezervă cu Font Stacks O altă abordare care ne permite să controlăm fonturile pe care le văd utilizatorii este

să definim fontul nostru special şi apoi să definim fonturile cu care ar trebui să fie înlocuit în cazul în care utilizatorul nu are fontul preferat instalat. Un stil CSS tipic pentru selectarea unui font arată ca în figura 6.22:

Figura 6.22 Exemplu în CSS pentru selectarea unui font

Acest fragment defineşte ca font Helvetica, un font sans-serif care este comun pe Mac OS X. Problema este că sistemele Microsoft Windows nu au acest font în mod implicit. Când un browser citește această definiţie de stil pe un sistem Windows, va încerca să încarce fontul Helvetica, care nu există, şi va folosi Times New Roman - fontul implicit al browserului (un font serif). Diferenţa dintre aceste două fonturi este enormă, nu numai din cauza problemei serif versus sans-serif, ci şi pentru că dimensiunile de bază ale fonturilor sunt puţin diferite. Lăţimile şi înălţimile literelor sunt uşor mai mari în Helvetica, deci textul de pe pagină ar putea să nu se “înfăşoare” în acelaşi mod. Pentru a rezolva acest lucru, vom defini fonturi de rezervă pe care browser-ul le poate utiliza dacă primul font nu este găsit. Putem defini fonturi de rezervă multiple printr-o definiţie de stil similară cu cea din figura 6.23:

Figura 6.23 Exemplu în CSS pentru selectarea unor fonturi de rezervă Această definiţie instruieşte browser-ul să încerce întâi Helvetica, apoi Arial şi apoi să utilizeze fontul sans-serif implicit în cazul în care nu găseşte nici Helvetica nici Arial. Această soluţie nu este perfectă, dar funcţionează pentru cele mai multe cazuri. Aceste fonturi sunt cunoscute și sub numele de stive de fonturi.

Alegerea structurii stivei de fonturi este foarte importantă; fonturile de rezervă trebuie să fie similare cu fontul preferat. De exemplu, Arial şi Verdana sunt ambele fonturi sans-serif, dar Verdana este un pic mai lat. Geneva ar fi o alegere de rezervă mai bună. Când construim o stivă de fonturi, vom alege întâi fontul dorit apoi vom găsi un înlocuitor adecvat, similar în înălţime, lăţime, înălţime-x, înălţimea descender-ului şi ascender-ului; aceasta garantează faptul că layout-ul nu este depășit prea mult atunci când trebuie făcută substituţia. Ulterior vom specifica unul din fonturile web-safe care este aproapiat ca lăţime de fontul nostru preferat. În final, adăugăm una dintre familiile de fonturi implicit furnizate de către CSS (serif, sans-serif, monospaced, cursive, şi fantasy). Familiile CSS se transmit browser-ului, care redă fontul, în modul următor (vezi figura 6.24):

Figura 6.24 Exemplu în CSS pentru construirea unei stive de fonturi

Selectarea fonturilorSelectarea unor fonturi eficiente pentru site-ul nostru impune în primul să ne

gândim la conţinutul site-ului. Site-ul nostru va conţine produse muzicale de percuție și de aceea trebuie să ne asigurăm că oferim un font care este uşor de citit şi nu va fi confuz pentru viitorii cumpărători. Am putea folosi fonturi diferite pentru meniul de navigare, titlurile de secţiuni şi de pagini şi alte zone, păstrând numărul maxim de fonturi de pe o pagină la două, fără a lua în calcul logo-ul site-ului. Vom folosi un font pentru conţinut şi altul pentru titluri.

• Fonturi pentru conţinutCei mai mulţi designeri consideră că fonturile sans-serif sunt alegeri bune pentru

conţinut. Deşi unele litere sunt mai dificil de distins în mod individual, cuvintele complete vor fi mai bine evidenţiate pe cele mai multe monitoare. Majoritatea site-urilor web utilizează Arial, având ca rezervă Helvetica. Alţi designeri folosesc Verdana - un font mai larg, care tinde să completeze spaţiul un pic mai bine decât Arial, dar trebuie evitat în situaţiile în care avem nevoie de un font extrem de mic. Verdana devine greu de citit, sub 10px.

• Fonturi pentru titluriPentru titluri trebuie să utilizăm ceva care să capteze atenţia utilizatorului. În mod

normal vom utiliza o dimensiune mai mare de font pentru titluri. Unii designeri preferă să foloseasca o variantă mai îngroşată a fontului pentru titluri, alţii – un font cu totul diferit, care să condimenteze un site cu mult conţinut. Atunci când alegem un font pentru titlu trebuie să ne asigurăm că utilizatorii pot citi fontul cu uşurinţă. Fonturile pentru titluri sunt de obicei mai mari decât fonturile utilizate pentru conţinut, deci putem utiliza un font serif. Putem exploata acest lucru pentru a adăuga un plus de eleganță în pagină. În această ordine de idei, vom utiliza fontul Monotype Corsiva (vezi figura 6.25), un font atrăgător, non-standard, folosit doar pentru titluri. În faza de implementare vom crea imagini cu titluri şi vom folosi tehnica de înlocuire cu imagini pentru a le afişa în pagină.

Figura 6.25 Fontul Monotype Corsiva

Utilizarea grilei de bazăCrearea unui corp de text fluid este foarte importantă pentru furnizarea eficientă a

conţinutului unui site web. Textul ar trebui să curgă în jurul imaginilor şi altor elemente, coloanele ar trebui să fie aliniate şi rândurile nu ar trebui să se întrerupă oriunde. Cei mai mulţi dezvoltatori web începători lasă setările implicite ale browser-ului să dicteze modul în care se aranjează textul, dar putem obţine un aspect mai îngrijit dacă ţinem seama de anumite aspecte înainte de a începe.

Grila de bază este o grilă verticală, sau mai multe linii orizontale suprapuse, care suportă caracterele fontului într-o compoziţie. Distanţa dintre liniile orizontale devine unitatea de măsură, şi fiecare linie din grilă devine linia de bază pentru fonturi. Liniile orizontale din grila de bază fucţionează precum liniile dintr-un caiet liniat: păstrează textul strâns şi uniform distanţat în pagină. Pentru a face ca textul să se aranjeze corect în coloane şi în jurul imaginilor, trebuie ca imaginile să fie aliniate la liniile orizontale ale grilei. Înălţimea fiecărei imagini ar trebui să fie divizibilă cu cantitatea de spaţiu dintre liniile grilei. Când toate aderă la grilă, textul curge automat în jurul imaginilor, coloanele de text se aliniază uniform şi totul este mult mai uşor de citit.

În figura 6.26 putem observa cât de multă eleganţă poate adăuga grila de bază prin comparația dintre un layout care nu o utilizează (partea stângă) cu unul care utilizează această grilă (partea dreaptă).

Figura 6.26 Utilizarea unei grile pentru aranjarea textului

Leading-ul se referă la cantitatea de spaţiu vertical dintre linii. Este adesea denumit spaţierea liniilor (line spacing sau line-height) în CSS. Spaţiul alb dintre linii permite cititorului să urmărească mai uşor linia şi este ingredientul cheie pentru construirea grilei. Valoarea pe care o alegem pentru leading este valoarea pe care o vom utiliza pentru spaţierea verticală. Tot ce vom adăuga la pagină va trebui să fie divizibil cu acest număr, astfel încât totul să se potrivească în grilă.

Grila este bazată pe spaţierea liniilor textului, care este distanţa dintre liniile de bază (pe care “stă” textul). Dacă alegem o spaţiere de 18px, textul ar trebui să se alinieze la o grilă care are linii la fiecare 18px. Când definim dimensiunea fontului pentru grila de bază utilizăm pixeli care este o măsură foarte exactă.

Putem întreprinde diferite calcule pentru a calcula fontul potrivit, spaţierea, marginile şi alte elemente, dar browserele vor “rotunji” aceste valori în mod diferit. Fonturile relative au fost considerate o caracteristică de accesibilitate pentru persoanele cu deficienţe de vedere, deoarece utilizatorul putea creşte dimensiunea fontului utilizând browser-ul web. Cu toate acestea, imaginile nu se redimensionau odată cu fonturile, cauzând probleme de lizibilitate. În prezent există o soluţie oferită de Microsoft Word şi

Adobe Acrobat care permite cititorilor să facă “zoom in” pentru a citi textul păstrând în acelaşi timp layout-ul, indiferent de unitatea de măsură folosită de autor pentru a reda fonturile. Această abordare este suportată în prezent de majoritatea browserelor.

Alegerea fonturilor pentru DrummersCenterTrebuie să începem cu dimensiunea fontului de bază pentru a construi grila. Pentru

acest design, vom utiliza un font de 12px pentru textul din conținut (body), font uşor de citit pe un monitor mediu. Trebuie un spaţiu suficient deasupra şi dedesubtul liniei pentru a fi lizibil. Atunci când alegem spaţierea, vom alege un număr care este divizibil. Vom utiliza un spațiu de 18px pentru că ne va oferi o spațiere sificient de mare. O regulă bună de urmat este să înmulţim dimensiunea fontului de bază definit cu 1.25 sau 1.5. Dacă avem un font de 12px şi o spaţiere de 18px, le putem transforma în 12/18 pentru dimensiunea fontului.

Pentru DrummersCenter vom folosi o dimensiune a textului din body de 12px cu o spaţiere de 18px. Pentru a realiza grila, toate marginile de sus şi de jos trebuie să fie multipli de 18px. De fiecare dată când adăugăm spaţiu vertical, ne vom asigura că îl adăugăm în multipli de 18px, astfel încât elementele din pagină să se alinieze la grilă. Când tăiem o fotografie, înălţimea imaginii trebuie să fie multiplu de 18.

Pentru subtitluri vom creşte dimensiunea fontului la 18px (înălţimea spaţiului dintre linii) şi să lăsăm un alt spaţiu de 18px sub fiecare subtitlu. Pentru titluri vom dubla fontul de bază, ceea ce le face de 24px în dimensiune. Am depăşit spaţierea de 18px, deci va trebui să dublăm spaţierea pentru titluri (36px) pentru a ne asigura că elementele rămân aliniate.

Elementele margins, borders, padding, image heights, şi alte elemente specifice CSS trebuie adăugate la baseline grid, sau design-ul va fi un fiasco. Tabelul 6.1 prezintă fonturile pe care le-am ales:

Secţiunea Fontul Dimensiunea Spaţierea

Titluri Monotype Corsiva 24px 36 px

Sidebar headings Monotype Corsiva 18 px 18 px

Subtitluri Arial 14 px 18 px

Body Arial 12 px 18 px

Tabel 6.1 Fonturile utilizate pentru DrummersCenter

Tipografia este o parte importantă a unui design web bun. Dacă nu acordăm atenţie fonturilor folosite şi modului în care acestea afectează lizibilitatea, va fi dificil pentru utilizatori să analizeze conţinutul. Definirea unui sistem grilă pe care să se bazeze layoutul va îmbunătăţi atât lizibilitatea cât şi aspectul estetic al site-ului.

IV Proiectarea funcţională

În cadrul proiectării funcţionale trebuie luate în considerare aspectele tehnologice care au un impact major asupra aplicaţiei web aflate în curs de dezvoltare.

Alegerea unor tehnologii adecvate este un factor de succes important în dezvoltarea aplicaţiilor web. În afara cunoştinţelor privind caracteristicile tehnologiilor, implementarea aplicaţiilor web necesită deseori şi cunoaşterea modului în care tehnologii diferite interacţionează într-o arhitectură existentă. În continuare vom aborda principalele tehnologii web existente, interacţiunea şi modul de utilizare al acestora în anumite arhitecturi, ţinând cont de recomandările W3C (World Wide Web Consortium).

Din momentul în care am definit cerinţele pentru o aplicaţie web, am ales o arhitectură şi am dezvoltat un mod de proiectare (pe scurt am clarificat "ce"), putem demara faza de implementare (pe scurt "cum"). În acest context, reutilizarea are un rol din ce în ce mai important în procesul de dezvoltare. Cerinţele rezultate pentru implementarea aplicaţiilor web încep cu alegerea tehnologiilor adecvate. Separarea conţinutului şi a prezentării este o cerinţă esenţială pentru o utilizare adecvată a tehnologiilor. În plus, trebuie luate în considerare cerinţele pentru distribuirea şi integrarea altor sisteme, în funcţie de o arhitectură selectată sau existentă.

Caracteristicile implementării tehnologiilor pentru aplicaţiile web versus sisteme software tradiţionale provin din utilizarea standardelor web. Aceasta afectează în special implementarea în trei moduri: cerere (client), răspuns (server) şi reguli de comunicare între cele două (protocol). Datorită evoluţiei rapide a tehnologiilor bazate pe web este imposibilă descrierea tuturor tehnologiilor. Din acest motiv ne vom limita doar la prezentarea anumitor tehnologii specifice. În primul rând vom prezenta cele mai utilizate protocoale pe web, accentul fiind pus pe cel mai important protocol pentru World Wide Web - HTTP (Hypertext Transfer Protocol).

5.4.1 Comunicarea client/server pe web

Paradigma client/server care stă la baza aplicaţiilor web formează coloana vertebrală dintre un utilizator (client sau agent utilizator) şi aplicaţia reală (server). Acest model de comunicare se bazează în principal pe o arhitectură pe două straturi. Oricum, paşii de procesare de pe un server web pot necesita integrarea altor sisteme (ex: baze de date, servere de aplicaţii). Arhitecturile pe N-straturi astfel formate sunt în principal bazate tot pe modelul client/server. De exemplu, un browser web trimite o cerere şi această cerere determină un răspuns de la un server web, în timp ce protocoalele (în special HTTP) au un rol esenţial. Aceste protocoale controlează modul în care un client ar trebui să facă o cerere, ce răspunsuri îi poate returna serverul şi cum ar trebui să realizeze acest lucru. SMTP (Simple Mail Transfer Protocol), combinat cu POP3 (Post Office Protocol) sau IMAP (Internet Message Access Protocol) permite trimiterea şi recepţionarea e-mail-urilor. În plus, SMTP este din ce în ce mai mult utilizat ca un protocol de transport pentru schimbul de mesaje asincrone bazate pe SOAP. RTSP (Real Time Streaming Protocol) reprezintă un standard publicat de IETF (Internet Engineering Task Force) şi a fost proiectat pentru a suporta distribuirea de date multimedia în timp real. Spre deosebire de HTTP, RTSP permite transmiterea resurselor către client într-un anumit timp în locul transmiterii acestora în întregime (imediată). Această formă de transmitere este cunoscută sub denumirea de streaming. HTTP (HyperText Transfer Protocol) a devenit un protocol foarte important în ultimii ani. Proliferarea pe scară largă a standardelor web şi posibilitatea de extindere a web-ului au permis HTTP-ului să devină cel mai popular protocol de transport pentru conţinutul web. HTTP este un protocol bazat pe text, care controlează modul în care sunt accesate resursele (ex: documentele HTML sau imaginile). HTTP este construit pe stiva TCP/IP, unde serviciul este în mod normal disponibil pe portul 80. Resursele sunt adresate prin utilizarea conceptului de identificator uniform de resurse (Uniform Resource Identifier - URI). URI-urile

nu sunt legate de un anumit protocol cum este HTTP; ele reprezintă un mecanism de adresare uniform, care este utilizat de asemenea în HTTP. Un URI alocă identificatori unici resurselor, indiferent de tipul acestora (documente HTML, imagini). Cel mai reprezentativ URI este URL-ul (Uniform Resource Locator) - adresa uniformă pentru localizarea resurselor. URL-urile pot fi utilizate în conexiune cu sistemul numelor de domenii (Domain Name System - DNS) pentru a identifica sistemele gazdă pe care se găsesc aceste resurse. Un URI (ex. http://www.feaa.uaic.ro/despre_feaa/index.htm), descrie de obicei trei lucruri: - cum este accesată o resursă (ex. http:// dacă este utilizat HTTP); - calculatorul destinaţie (gazdă) pe care este localizată resursa (ex. www.feaa.uaic.ro) şi - numele resursei (ex. despre_feaa/index.htm). În plus, URI-rile definesc un separator al interogării („?”), care permite HTTP-ului să transmită parametrii (ex: http://www.feaa.uaic.ro/catedre/in2.php?codcat=IE). Sintaxa completă a URI-urilor a fost standardizată de IETF în RFC 1630.

5.4.2 Tehnologii web client-side specifice documentului

Aplicațiile web de tip client-side script implică acele programe web care ruleaza pe client (browser), după sau în timpul încărcarii paginii web de cătrea acesta. Tehnologiile web client-side script sunt acele limbaje care permit scrierea unor astfel de aplicații. Aceste limbaje pot fi integrate în limbajul HTML și suportate direct de către browser (ex. JavaScript), fie necesită un plug-in extern (ex. ActionScript - limbajul de programare specific mediului Adobe Flash). În afară de utilizarea de limbaje de tip script, pentru implementarea aplicatiilor client-side se pot utiliza și limbaje de programare (ex. Java prin Java Applet). Ne vom concentra atenția pe trei limbaje foarte răspândite, HTML, CSS și JavaScript).

HTML - Hypertext Markup Language HTML24 este o aplicaţie SGML (Standard Generalized Markup Language) care descrie elementele care pot fi utilizate pentru a marca conţinutul într-un document hipertext şi modul în care aceste elemente relaţionează (într-un DTD - Document Type Definition). Elementele de marcare sunt închise între simbolurile „<” şi „>”. HTML defineşte numeroase etichete pentru a indica semantici diferite. De exemplu, eticheta <H1> poate fi folosită pentru a marca un titlu de nivel 1. Etichetele sunt folosite pentru structurarea logică a documentului. De exemplu, elementul de marcare <STRONG> specifică faptul că partea din document dintre aceste perechi de etichete trebuie interpretată sub forma unei evidenţieri logice, pe care browserele o afişează în mod normal cu aldine. Datorită posibilităţilor limitate ale proiectării grafice, au fost introduse elemente suplimentare pentru a permite proiectanţilor să influenţeze în mod direct layout-ul unui document. De exemplu, elementul de marcare <b> poate fi folosit pentru a instrui browserele să reprezinte o parte din document cu aldine. Simplitatea în crearea şi procesarea resurselor HTML este o proprietate foarte importantă pentru caracterul omniprezent al informaţiei pe web, aceasta fiind împiedicată de aspectul prezentării. Introducerea noilor elemente de marcare a fost facilitată îndeosebi de faptul că browserele resping sau ignoră elementele de marcare pe care nu le cunosc. Această flexibilitate a fost utilizată în mod repetat de producătorii de browsere web pentru a extinde opţiunile de layout şi în cele din urmă a condus la noi standarde, dar şi la reprezentări "incompatibile".

CSS - Cascading Style Sheets Problema "incompatibilității” din browserele web a condus la introducerea unui mare număr de extensii. De exemplu, CSS25 (Cascading Style Sheets) reprezintă un mecanism simplu pentru adăugarea informaţiilor de stil (fonturi, culori etc.) în documentele web. Împreună cu introducerea XHTML-ului, un dialect XML, a devenit posibilă utilizarea beneficiilor XML-ului ca un limbaj "curat" pentru descrierea documentelor HTML.

JavaScript

24 World Wide Web Consortium (W3C), W3C HTML, W3C, 2011, http://www.w3.org/html/

25 World Wide Web Consortium (W3C), Cascading Style Sheets, W3C, 2011, http://www.w3.org/Style/CSS/

Limbajul JavaScript26 (sau ECMAScript) este un limbaj de tip script suportat de browserele web, care poate fi integrat direct într-o pagină HTML și prezintă câteva avantaje importante, dintre care enumerăm:• nu necesită instalarea unor aplicații suplimentare pentru a rula;• este simplu de învățat (sintaxa este asemănătoare cu cea a limbajelor C și Java);• permite implementarea unor aplicatii complexe într-o manieră simplă;• din el se pot accesa și controla direct toate elementele unei pagini HTML (text, imagini, formulare și

frame-uri);• sprijină validarea datelor din formularele HTML (pe parte client);• permite programarea bazată pe evenimente.

  Cea mai importantă facilitate oferită de JavaScript este aceea de a adăuga dinamism și interactivitate în paginile Web clasice.

ActionScript ActionScript este un limbaj asemănător cu JavaScript, folosit în principal pentru dezvoltarea de funcționalități în cadrul animațiilor Adobe Flash prin generarea fișierelor cu extensia .swf care rulează în Adobe Flash Player. A fost dezvoltat inițial de compania Macromedia, iar acum aparține Adobe, care a achiziționat Macromedia în 2005 și are la bază standardul ECMA. El a fost creat pentru desenarea și controlarea animațiilor vectoriale 2D dar ulterior s-a dezvoltat pentru a realiza aplicații web complexe sau chiar jocuri.

HTML (Hypertext Markup Language)

Ultima versiune a limbajului este 4.01World Wide Web Consortium (W3C org) este instituţia care reglementează şi standardizează limbajele de marcare. HTML este un subset al SGML din care a mai rezultat şi XML (eXtended Markup Language).

Autorul standardului World Wide Web este Tim Barners-Lee:· 1989 – face prima propunere pentru primul World Wide Web server, "httpd", şi primul client,

"WorldWideWeb" un what-you-see-is-what-you-get (WYSIWYG) hypertext browser/editor;· Decembrie 1990 – aceste aplicaţii sunt deja disponibile în teste;· Iulie 1991 – Internetul începe să folosească din ce în ce mai mult aceste aplicaţii.

Fiecare din cuvintele de mai sus marcate între semnele „<” , „>” poartă denumirea de tag-uri, reprezentând cuvinte cheie în structurarea unui document HTML.Structura unui document HTML poate fi redată în exemplul următor:

<html> <head> <title>Acesta este titlul documentului</title> </head> <body> <p>Acesta este un paragraf din cadrul documentului.</p> </body></html>

Tag-ul <HTML> este obligatoriu pentru începutul şi sfârşitul unui document. Celelalte tag-uri pot fi opţionale.

<HEAD> Specifică header-ul unui document şi, pe lângă <TITLE> care specifică titlul paginii în browser, pot apărea declaraţia diferitelor script-uri, informaţii despre document etc.

Fiecare tag care se deschide se recomandă a se şi închide, dar nu este o regulă obligatorie.

<BODY> încadrează conţinutul unui document.

26 World Wide Web Consortium (W3C), JavaScript Web APIs, W3C, 2011, http://www.w3.org/standards/webdesign/script.html

Pentru structurarea unui document se pot utiliza 6 nivele de heading-uri:

<body> <h1>Capitolul 1 - Introducere in HTML</h1> <h2>Structura unui document</h2> . . . <h6>Acesta este ultimul nivel de titluri</h6> <!-- De obicei insa se folosesc pina la 3 maxim 4 nivele intr-un document. Acest comentariu nu apare in Browser!--> <p>Acesta este un paragraf din cadrul documentului.</p><br> Acesta este al doilea rind. </body>

Comentariile care se trec într-un document şi care nu vor apărea în browser se marchează între: <!-- Acesta este un comentariu -->

Pentru afişarea centrată a titlurilor, şi nu numai se poate folosi tagul <CENTER>...</CENTER>.

<h1><center>Capitolul 1 - Introducere in HTML</center></h1>

Declararea unui paragraf se realizează cu ajutorul tagului <P>.

Pentru trecerea de la un rând la altul se poate folosi tagul vid <BR>.

Pentru afişarea unei linii se poate folosi tagul simplu <HR> a cărui sintaxă poate fi extinsă: <HR Size=valoare_numerică Color=culoare Width = val_numerica_sau_procent >

<hr size="5" color="Blue" width="55%">

Pentru scrierea caracterelor speciale se foloseşte &#cod_ASCII;Setul de caractere recunoscute precum şi codurile ASCII pot fi descoperite în Character Map din Acesoriile SO Windows. Transformarea din reprezentarea hexazecimală se poate realiza cu ajutorul acesoriului Calculator.

Culorea fundalului de pagină se poate stabili prin folosirea atributului BGCOLOR=culoare in tagul <BODY >, având următoarea sintaxă: <BODY BGCOLOR=nume_culoare sau valoare_hexazecimală>

<body bgcolor="pink">

Pentru folosirea unei imagini ca background pentru fundal se foloseşte sintaxa: <body background="imagine.bmp">

Imaginea trebuie salvată în aceiaşi locaţie cu documentul HTML, dar în cazurile în care aceasta nu se află în acelaşi director trebuie declarată calea de pe disc sau de pe web până la fişierul respectiv.

Formatarile la nivel de text se regăsesc în tagul <FONT> care are următoarea sintaxă:<FONT face=”denumire_font” size=”marime_font” color=valoare> Text </FONT>

<font face="Letter Gothic MT" size="4" color="#FF0000">Acesta este un text de marimea 11 de culoare rosie, font Letter Gothic MT</font>

Alte aspecte ale fomatărilor aspura fontului sunt cele cu privire la efectul asupra textului respectiv:· bold (îngroşat) <b>text</b>;· italic (înclinat) <i>text</i>;· underline (subliniat) <u>text</u>.

Inserarea unei imagini în document se realizează cu ajutorul tagului <img> care are următoarea sintaxă:

<img src="imagine.jpg" alt="Aceasta este imaginea">

src – reprezintă calea de acces şi numele fişierului care conţine imaginea;alt – o scurtă descriere a imaginii.

Liste, Link-uri, Tabele

LISTE Există mai multe tipuri uzuale de liste folosite pentru diferite enumerări:· liste neordonate · liste ordonate

Liste cu linii sau buline (neordonate) Listele neordonate sunt introduse prin tagul <UL>...</UL>, iar elementele din lista cu tagul vid <LI> (acest tag se foloseste si pentru introducerea elementelor unei liste ordonate).

Elementele unei liste neordonate sunt afisate pe randuri separate, indentate fata de restul textului si avand in stanga un simbol grafic ce depinde de navigatorul utilizat (cerc, bulina).

Exemplul nr. 1 – Lista neordonată:<UL> <LI> Produs C <LI> Produs A<LI> Produs H</UL>

Liste numerotate (ordonate) Listele ordonate diferă de cele neordonate doar prin faptul ca elementele acestora sunt numerotate. Tagul utilizat este <OL>...</OL>. Listele ordonate pot avea o numerotare diferita, in funcţie de opţiunea specificată de utilizator in atributul TYPE al tagului <OL>, după cum urmează: · TYPE=1 este opţiunea implicită (1,2,3...) · TYPE=a - a,b,c... · TYPE=A - A,B,C... · TYPE=i - i,ii,iii... · TYPE=I - I,II,III...

De asemenea, o listă poate fi numerotată începând de la o anumită valoare prin utilizarea atributului START=valoare_de_start, care apare tot in cadrul marcajului <OL>. Imbricarea listelorAtunci când este nevoie de imbricarea listelor (de exemplu atunci cand realizam un cuprins ori un test grila), aceasta se realizează prin inserarea intr-o lista a unei noi liste, indiferent de tipul acesteia.

Exemplul nr. 2 – Lista ordonată, cu diferite OL type, şi imbricări:

<HTML> <P> <H2 ALIGN="center"> Liste imbricate </H2> <P> <UL> <LI><B>1.</B> Lista nr. 1 <OL TYPE=a> <LI> raspuns 1 <LI> raspuns 2 <LI> raspuns 3 </OL>

<LI><B>2.</B> Lista nr. 2 <OL>

<LI> raspuns 1 <LI> raspuns 2 <LI> raspuns 3 </OL> </UL> <B>Aceasta este o lista numerotata cu cifre romane:</B> <OL TYPE=I> <!-- Daca litera „i” este minuscula atunci se va schimba si

sistemul de numerotare--> <LI>Primul element <LI>Al doilea element <LI>Al treilea element </OL> <B>Aceasta este o lista "numerotata" cu litere mici:</B> <OL TYPE=a> <LI>Primul element <LI>Al doilea element <LI>Al treilea element </OL> <B>Lista numerotata incepand de la 5:</B> <OL START=5> <LI>Primul element <LI>Al doilea element <LI>Al treilea element </OL></HTML>

CREAREA LEGATURILOR SI ANCORELOR Una dintre caracteristicile de baza ale limbajului HTML este aceea de structurare a publicaţiilor într-o colecţie de documente între care există legături, trecerea de la un document la altul făcându-se prin intermediul acestora. Legăturile, în funcţie de locul in care se afla fişierele conectate prin legătura, sunt:

· interne – daca legătura se face către o secţiune a aceluiaşi fişier; · locale (sistem) – dacă fişierele se afla pe acelaşi calculator, eventual pe calculatoare din

aceeaşi reţea locală; · îndepărtate (publice) – daca fişierele legate se afla pe calculatoare din reţele diferite (pe

servere aflate la distanta).

Legaturile se realizeaza prin intermediul marcajului <A> </A>, cu următoarea sintaxa: <A HREF="nume_fisier"> Text explicativ </A>

unde: · HREF este atributul ce conţine calea către fişierul spre care arata legătura (HREF este o

prescurtare de la Hypertext Reference); · nume_fişier: numele fişierului către care se face legătura · Text explicativ: Legătura cu fişierul solicitat se face prin selectarea textului (clic pe textul

explicativ). Textul este afişat diferit fata de restul documentului (colorat diferit si subliniat). Un atribut opţional al tagului </A> este TARGET care poate lua dacă apare mai multe valori, cea mai utilizată fiind „_new”, care inseamnă că, documentul specificat prin HREF link-ul va fi deschis într-o nouă fereastră a browser-ului.

Moduri de specificare a legăturilorLocalizarea fişierului ţintă poate fi făcuta prin specificarea:

· Căi (adrese) absolute – specifica întreaga cale, de la directorul de la nivelul cel mai înalt si pana la documentul cerut. Referinţele absolute încep întotdeauna cu un slash „/” urmat de succesiunea directoarelor până la documentul referit. De exemplu, crearea unei legături către documentul pe care tocmai îl citiţi se face prin: http://www.uaic.ro/en/utils/links.html

· Căi (adrese) relative – specifica directoarele către documentul ţinta pornind de la documentul în care se afla referinţa (documentul de start). Specificarea căii se face ca în Unix, cu directoarele separate prin slash „/”, indiferent de sistemul de operare. Prin .. se va specifica directorul aflat pe nivelul superior. Exemplu: HREF="../imagini/buton.gif" specifica o cale relativa ce începe din directorul părinte al

directorului curent, iar HREF="../../poze/poza1.jpg" specifica o cale relativa ce începe dintr-un director aflat cu

doua nivele mai sus decât directorul curent. Este recomandata utilizarea legăturilor relative ori de cate ori este posibil, pentru ca documentele sa fie portabile (mutarea unui document sa nu afecteze legăturile stabilite intre fişierele componente. Legături interneIn multe cazuri este nevoie sa se creeze legături intre secţiunile aceluiaşi document. Spre exemplu, atunci când documentul este o carte, un tutorial sau un curs vom simţi nevoia creării unui cuprins pentru fiecare capitol al documentului. Se va crea o legătura intre fiecare tema din cuprins si secţiunea din document care tratează acea tema. Crearea legăturilor interne se realizează prin utilizarea atributului NAME al tagului <A>, care stabileşte un cuvânt cheie ce identifica unic paragraful ţinta: <A NAME="cuvant_cheie"> Paragraf tinta </A>

Folosirea tagului cu atributul NAME poarta numele de ancora. Atunci când se va face referinţa la această ancoră, documentul va fi derulat in fereastra navigatorului pana când textul dintre <A> </A> ajunge in partea de sus a ecranului. Ancorele nu sunt afişate diferit fata de restul documentului ca in cazul legăturilor. Referirea la o ancora in documentul de la care pleacă legătura se face in acelaşi fel ca in cazul referirii unui întreg document adăugându-se simbolul # urmat de cuvântul cheie din ancora: <A HREF="nume_fisier#cuvant_cheie"> Text explicativ </A>

Exemplul de mai sus arata ca este posibila referirea la un anumit paragraf al documentului ţinta, chiar daca acesta este local sau îndepărtat. În capitolul dedicat inserării imaginilor veţi afla cum puteţi înlocui textul folosit la selectarea unei legături cu o imagine. Exemplul nr. 3 – Un exemplu sumar de declarare şi referire internă

<HTML>

<b>Tehnica utilizarii legaturilor interne</b><BR>

<H2> Cuprins:</H2> <P> <UL> <LI><A HREF="#unu">Primul paragraf </A> <LI><A HREF="#doi">Al doilea paragraf </A> <LI><A HREF="#trei">Al treilea paragraf </A> </UL>

<P> <HR> <P> <A NAME="unu"> Titlul primului paragraf</A> <P> Aici incepe primul paragraf.<BR> Text <BR> Text <BR>

<A NAME="doi"> Titlul paragrafului doi</A> <P> Aici incepe al doilea paragraf.<BR> Text <BR> Text <BR>

<A NAME="trei"> Titlul paragrafului al treilea</A> <P> Paragraf 3.<BR> Text <BR> Text <BR> <HR><!-- Pentru a vedea functionalitate acestui tip de legaturi trebuie sa aveti mai mult text in interiorul paragrafelor --></HTML>EXERCITIU: Creati două documente care să facă legătura de la unul la celălalt. De asemenea

puneţi în evidenţă modul de utilizare a legăturilor interne.

CONSTRUIREA TABELELOR Tabelele sunt introduse prin utilizarea marcajului <TABLE> </TABLE>. Limbajul HTML ia in considerare următoarele elemente pentru construirea unui tabel (unele sunt opţionale):

· Text explicativ care se refera la conţinutul tabelului; · Capul de tabel (capul de tabel va fi scos in evidenta fata de restul liniilor); · Datele din tabel (=valorile din celulele tabelului); · Celulele tabelului (alinierea conţinutului...);

In HTML, construirea unui tabel se face rând cu rând, specificând celulele de pe fiecare linie. Prima linie este considerata ca fiind capul de tabel, unde se precizează ce fel de date sunt conţinute in coloanele respective. Linia se specifica prin tagul <TR> </TR> Celulele tabelului sunt introduse prin marcajul <TD> </TD>, iar celulele cap de tabel prin <TH> </TH>. Codul HTML pentru crearea unui tabel cu trei linii si doua coloane este: <TABLE BORDER> <TR> <TH> Matricol</TH> <TH> NumePrenume</TH> </TR> <TR> <TD> EL000001</TD> <TD> Popescu Ioana</TD> </TR> <TR> <TD> EL009999</TD> <TD> Ababei Petronela</TD> </TR></TABLE>

Se obtine urmatorul tabel:Matricol NumePrenume

EL000001 Popescu IoanaEL009999 Ababei Petronela

S-a folosit atributul BORDER pentru a desena un tabel in care se vad liniile ce formează celulele. Absenta atributului determina obţinerea unui tabel fără liniatură. Celulele tabelului, fie ca fac parte din capul de tabel sau sunt celule obişnuite, pot conţine orice marcaj acceptat de HTML, inclusiv legături sau alte tabele. Celulele vide nu sunt afişate dar, daca dorim acest lucru, trebuie sa introducem măcar un tag <BR> pentru a face celula vizibilă. Pentru ataşarea unei explicaţii se foloseşte tagul:

<CAPTATION ALIGN="aliniere"> Explicaţie </CAPTATION>

unde tipul de aliniere poate fi: · TOP - explicaţia este plasata deasupra tabelului (opţiune implicită); · BOTTOM - explicaţia este plasata dedesubtul tabelului;

Marcajul pentru explicaţie trebuie plasat imediat după tagul TABLE, înainte de a se începe definirea rândurilor tabelului.

EXERCITIU: Creaţi următorul table folosind cod HTML

Nr. crt Autor Cărţi, articole1. Popescu Ion · Cartea de debut

· Cartea următoare· Articol Tare

2. Ababei Cristina 1. Articol debut2. Alt articol3. Altul si 4. Ultima carte

3. Ciobanu Carmen Asta e singura carte

Creaţi pagini HTML pentru fiecare autor în parte care să conţină informaţii generale despre aceştia: Scurtă biografie, Opera, Ceva distincţii la diferite concursuri, ce au în lucru; eventual introduce-ti o imagine în partea de sus a documentului drept fotografie a autorului.În josul paginii creaţi o legătură de întoarcere la pagina anterioară.

Pentru un aspect mai aerisit al tabelelor se poate utiliza atributul cellpadding care poate lua valori numerice.Pentru unirea a 2 căsuţe pe coloană se foloseşte atributul rowspan având drept valoare numărul de căsuţe pe care le va uni, iar pe linie se foloseşte atributul colspan.

Exemplul nr. 4<table border="1" cellpadding="10" width="80%"><tr align="center"><th rowspan="2">Anul</th><th colspan="3">Vinzari</th></tr><tr align="center"><th>Ianuari</th><th>Februarie</th><th>Martie</th></tr><tr align="center"><td>2000</td><td>100</td><td>200</td><td>175</td></tr><tr align="center"><td>2001</td><td>200</td><td>150</td><td>220</td></tr></table>