Atentionam cititorul ca designul bazat pe HTML si CSS depinde si de navigatorul folosit sau de platforma pe care acesta ruleaza. De exemplu, marginile de la chenarul ferestrei in care este afisata pagina web si continutul propriu-zis al acesteia variaza de la navigator la navigator. La fel, dupa cum am mai mentionat, dimensiunea aceluiasi corp de litera nu este constanta in toate cazurile. Astfel, verificarea temeinica – folosind mai multe tipuri de navigatoare (cel putin Netscape si Internet Explorer, pe platformele Windows si Linux) – a incadrarii si alinierii corecte a elementelor in pagina este obligatorie. Continutul semantic al imaginilor poate produce efecte nedorite prin suprapunere si juxtapunere cu textul.

In vedera pregatirii continutului textual al paginilor site-ului proiectat, trebuie sa avem in vedere si urmatoarele observatii, puse in evidenta de unii cercetatori ai comportamentului utilizatorilor aflati pe Web:

  • De obicei, cititorii realizeaza o lectura de suprafata combinata insa cu aprofundari selective ale materialului parcurs. Trei sferturi dintre cititori isi limiteaza lectura la parcurgerea cuprinsului si a scurtei descrieri a articolului. De altfel, aceasta este o modalitate de prezentare foarte utilizata pe Web. Descrierii succinte ii urmeaza de cele mai multe ori o legatura “Detalii” care conduce vizitatorul spre pagina prezentand integral subiectul abordat;
  • Lectura este intercalata, fiind intrerupta frecvent prin deschiderea mai multor ferestre de navigare in care se cauta separate informatii, se acceseaza adrese de ferestre de navigare in care se cauta separate informatii, se acceseaza adrese de site-uri cunoscute sau se verifica, in paralel, posta electronica. Astfel, utilizatorii alterneaza site-uri accesate concomitent, atentia nefiind focalizata exclusiv pe o fereastra de navigare, mai ales din cauza timpului de incarcare a paginilor. Astfel, folosirea unei terminologii standard si constant pe intregul site elimina timpul suplimentar acordat de vizitator pentru realizarea eventualelor recorelari si circumscrieri de sens la schimbarea rapida a contextului. Nu trebuie ignorant faptul ca sesiunea de lucru a unui utilizator poate dura ore, sursele de lectura fiind diverse sau fragmentate de intreruperi, alternandu-se modalitati de lucru;
  • Autorul paginii nu trebuie sa foloseasca elemente care pot distrage atentia pana la a deveni suparatoare. Ca exemple putem enumera textul clipitor sau avand o culoare inadecvata ori animatiile : la un oarecare timp dupa indeplinirea functiei pentru care au fost proiectate (de captare a atentiei) , pot deranja si determina utilizatorul sa abandoneze pagina;
  • Cei mai multi utilizatori sunt deranjati de erorile gramaticale si de tehnoredactare. Se recomanda ca fiecare document sa fie parcurs, inainte de a fi disponibil pe Web, de un expert filolog. De asemenea, trebuie evitate frazele excesiv de lungi sau cele incluzand expresii colocviale sau regionalisme. Un factor de care e bine sa tinem cont este internationalizarea continutului;
  • Un alt aspect pe care nu trebuie sa-l omitem este cel al prezentii prea multor legaturi intr-un paragraf de text. Este lipsit de sens sa atragem vizitatorul sa citeasca un paragraf care abunda de legaturi auxuliare invitandu-l sa parcurga alte pagini, chiar apartinand altor site-uri. De obicei aceste legaturi se grupeaza intr-o zona distincta a paginii (e.g. : in subsolul ei sau pe margini) ori intr-o alta pagina intitulata Alte legaturi relevante.

Ce trebuie sa stii despre elemente de grafica

Pentru realizarea unui design Web atractiv, continutul grafic este o conditie sine qua non. De cele mai multe ori cand discutam despre grafica ne referim la monitorul folosit, la rezolutia sistemului si la paleta de culori disponibila. Vom reaminti o serie de notiuni de baza in continuare.

In mod uzual, folosim calculatoare dotate cu monitoare color cu tub catodic (CRT – Cathode Ray Tube) sau cu cristale lichide (LCD – Liquid Crystal Dispalay). Modelul cromatic al luminii transmise de acestea este bazata pe trei componente: rosu (red), verde (green) si albastru (blue) – modelul RGB. Din pacate, fiecare sistem realizeaza un management diferit al culorilor, existand deosebiri destul de mari intre Macintosh si Windows. Pentru listare, se foloseste un alt model cromatic, o culoare fiind reprezentata de componentele: turcoaz (cyan), violet (magenta), galben (yellow) si negru (black) – modelul CYMK.

Culorile se mai pot caracteriza prin trei componente: tonul (bue), luminozitatea (brightness sau lightness) si saturatia (saturation) – modelul HSB.

  • Tonul face referire la numele familiar al culorii, putand fi amintite aici culorile primare (rosu, galben, albastru in cromatica artistica) si de cele secundare (oranjul, verdele si violetul in cromatica artistica) – denumiri pe care le conferim luminii percepute. Dispunand culorile pe un cerc, tonul reprezinta devierea masurata in grade fata de punctul de referinta dat de culoarea rosie. Spre exemplu, albastrului pur ii corespunde un ton de 240 de grade, iar verdelui un ton de 120 de grade.
  • Termenul luminozitatea desemneaza intensitatea undei luminoase corespunzatoare culorii percepute. O luminozitate nula echivaleaza cu negrul.
  • Saturatia masoara puritatea unei culori. O saturatie nula va desemna un gri al culorii care ii corespunde. Albul si negru nu au asociate saturatii, la fel orice griuri neutre (cele dintr-o imagine cu grade de gri, numita din acest motiv si nesaturata).

Pentru reprezentarea informatiilor pe ecran, zona de afisare este organizata asemenea unei matrice, fiecare element al acesteia fiind reprezentat de un pixel (picture element). Pentru a controla fiecare pixel pe ecran, in mod independent de monitorul folosit, calculatorul are prevazut un echipament denumit placa video. Aceasta ofera posibilitatea de a opera la mai multe rezolutii si adancimi de culoare.

Rezolutia desemneaza numarul maxim de linii si coloane ale matricei de pixeli. Cu cativa ani in urma, rezolutia pentru calculatoarele personale era de 640×480 (640 de pixeli latime si 480 de pixeli inaltime). Actualmente, rezolutiile uzuale sunt 800×600 si 1024×768. Statiile grafice (e.g. : Silicon Graphics Indigo) suporta rezolutii net superioare, de ordinul a cateva mii de pixeli latime.

Deseori, rezolutia imaginii se poate exprima si ca numar de pixeli per inci (dpi dots per inch), monitoarele calculatoarelor personale avand pana la 96dpi, iar imprimantele minimum 600dpi. Grafica pentru Web trebuie salvata astfel doar la rezolutie de 72 dpi, fiecare pixel al imaginii coresponzand unui pixel de pe ecran.

In functie de memoria placii grafice, un pixel poate fi reprezentat pe mai multi biti. O reprezentare pur alb-negru va necesita cate un singur bit asociat unui pixel. Daca bitul are valoarea 1, atunci pixelul respectiv va fi “aprins”, iar daca valoarea bitului este nula, atunci pixelul va fi “stins”. In cazul in care un pixel se reprezinta pe un octet (8biti), atunci valoarea numerica a culorii pixelului va putea varia de la 0 pana la 255, pixelul respectiv putand fi “aprins” cu maxim 256 de culori. Memorand un pixel pe 16 biti sau pe 24 biti se vor putea afisa mii sau respectiv, milioane de culori, dar memoria video va trebui sa aiba o capacitate mult mai mare. Numarul de biti folositi pentru “aprinderea” unui pixel furnizeaza tocmai adancimea de culoare. O adancime de 24 de biti se mai numeste si True color. Avand 24 de biti si trei componente de culoare RGB, ne putem da usor seama ca fiecare componenta poate fi reprezentata pe 8 biti. Asadar, valoarea unei culori reprezentate poate fi vazuta ca un triplu (r,g,b), unde fiecare valoare r, g si b poate varia de la 0 la 255. Iata de ce codurile de culoare se reprezentau la HTML prin trei valori hexazecimale prefixate de “#” si la CSS prin trei valori zecimale rgb (r, g, b).

Evident, stocarea imaginilor la o rezolutie ridicata si cu o adancime de 24 de biti va necesita o cantitate mai mare de memorie. Deseori, aceste imagini sunt compresate pentru a ocupa mai putin spatiu, decompresia efectuandu-se de cele mai multe ori in momentul afisarii. Metodele de compresie pot fi fara pierderi – in urma decompresiei se obtine imaginea originala – sau cu pierderi – compresia va elimina unele informatii din imaginea initiala.

O alta maniera de reprezentare a culorilor intr-un fisier grafic este cea a indexarii, utilizata pentru adancimi de culoare de 8 biti. In acest caz, cele maximum 256 de culori formeaza o tabela de culroi – CLUT (Color Look-Up Table) – denumita si index sau paleta. Pixelii nu vor fi reprezentati prin valoarea culorii propriu-zise, ci prin valoarea indexului tabelei CLUT. Fisierele grafice indexate vor putea de asemenea sa fie compresate – cazul formatului GIF.

In cazul in care dorim sa reprezentam imagini compuse din numeroase primitive grafice (e.g. : puncte, linii drepte sau curbe, zone rectangulare, elipse etc.), putem adopta reprezentarea vectoriala, in opozitie cu cea de tip raster (bitmap). O imagine vectoriala va contine informatii despre multimea de primitive grafice folosite si proprietatile acestora (pozitie, dimensiuni, mod de colorare etc.) si nu despre matricea de pixeli pe care o reprezinta – cum se intampla in cazul imaginilor raster. Astfel, asupra unei imagini vectoriale se pot realiza mult mai usor diverse operatii precum translarea, scalarea sau rotirea imaginii in ansamblu sau a unor parti din aceasta.