Categorie: Articol

[et_pb_section admin_label=”section”]
[et_pb_row admin_label=”row”]
[et_pb_column type=”4_4″][et_pb_text admin_label=”Text”]

Cum interesul pentru domeniul mobilitatii este in crestere, designul responsive a devenit un subiect fierbinte. Insa acesta nu se limiteaza doar la layouturi adaptabile, ne explica Stephen Hay.

Textul

Stephen Hay este unul dintre sefii companiei Zero Interface si se ocupa de consultant pentru clienti in domeniul designului si strategiilor multi –platforma.

Stephen a scris pentru A List Apart si organizeaza conferintele Mobilism impreuna cu PPK si Krijn Hoetmer. Pe langa activitatea cu clientii, el conferentiaza si scrie despre subiecte legate de layouturi CSS3, web design si accesibilitate.

Ilustratia

Rob Bowen este director creativ la Tracknine, o agentie de grafica si web design care la momentul actual se ocupa de tot felul de proiecte.

Multi designeri si dezvoltatori Web sunt , cu siguranta, familiari cu novatorul articol al lui Ethan Marcotte de pe A List Apart. In scurtul material, a prezentat o abordare a designului web pentru diferite dimensiuni ale ecranului, care implica folosirea unei combinatii de interogari despre media din CSS3 cu layouturi fluide si imagini. Aceasta metoda le permite dezvoltatorilor sa implementeze solutii de design care se adapteaza la marimile ecranului aparatului pe care sunt vizualizate. Este o descoperire importanta; consecinta este ca solutiile separate de design sau chiar site-urile separate destinate diferitelor dispozitive ar putea deveni, in mare masura, de domeniul trecutului.

Este putin probabil sa vreti sa mancati cu un ciocan sau sa folositi furculita pentru a bate un cui in perete. Pastrand analogia, interogarile despre mediu nu vor ajuta continutul sa se potriveasca cu o audienta mobila la fel cum o strategie legata de continut nu va determina o interfat sa arate fantastic si sa functioneze bine pe un dispozitiv de 240×320 de pixeli. Simplificand, exista unealta potrivita la scopul potrivit. Sau mai degraba, pentru noi, cei din dezvoltarea web, adesea exista zeci sau sute de instrumente pentru fiecare scop. Articolul lui Marcotte a descries una dintre muncile pe care ni le asumam atunci cand cream site-uri pentru domeniul mobil. Pare logic ca aceasta sa fie combinata cu alte activitati si respectivele lor seturi de instrumente.

Desktop sau dispozitiv mobil?

Tendinta noastra sau, cel putin, a clientilor nostri este sa gandim totul pornind de la un site pentru desktop care trebuie convertit catre domeniul mobil. Aceasta poate insemna folosirea abordarii prezentate in articolul lui Marcotte. In acelasi timp, poate insemna detectia hardware-ului care apeleaza o pagina web, iar apoi servirea unei pagini adecvate dispozitivului respectiv. Oricum am privi lucrurile, designul si dezvoltatrea pentru domeniul mobil introduce o seama de noi chestiuni de luat in considerare (si reintroduce cateva existente):

• Dimensiunea ecranului : cea mai mare parte a discutiei se invarte in jurul acestui subiect. Din cauza numarului de dispozitive diferite existente in exploatare, este un factor important.
• Rezolutia : 600 de pixeli pe un telefon nu vor arata la fel ca 600 de pixeli pe un computer desktop. Un pixel de aici nu este la fel cu un pixel de acolo.
• Densitatea pixelilor: inrudita cu rezolutia, dar nu acelasi lucru, densitatea pixelilor ne indica numarul de pixeli per inch pe un anume dispozitiv.
• Suportul pentru interogarile despre mediu : interogarile despre mediu sunt un instrument minunat pentru modificarea layoutului pe baza diferitelor caracteristici ale mediului (din care una este latimea ecranului), insa ele nu sunt suportate peste tot.
• Performanta : pentru ca nu toata lumea care foloseste un dispozitiv mobil are o conexiune inceata si nici toti utilizatorii de desktop una rapida, performanta conteaza in intreg spectrul.
• Orientarea : anumite lucruri trebuie sa se schimbe semnificativ din punct de vedere vizual pe baza faptului ca un site sau o aplicatie este vizualizata fie orizontal, fie vertical.

Continutul

Desi chestiunile anterioare sunt importante, exista un lucru pe care suntem tentati sa-l trecem cu vedrea: continutul. Si aici este locul unde sta miezul intregii discutii. Ar trebui sa ajustam continutul la fiecare dispozitiv? Ar trebui sa consideram dispozitivele ca fiind secundare si sa modelam continutul pentru contextul in care este utilizat? Pana la urma, ce inseamna context si cum stim cu oricata certitudine ca respectivul continut va fi utilizat inauntrul unui context dat? De cele mai multe ori, nu vom sti. Si peisajul de scenariu de utilizare se extinde atat de rapid incat nu prea putem pune prea mare baza pe supozitii.

As sugera folosirea unei abordari asupra continutului independent de platforma si a unei abordari in relatie cu platforma asupra experientei de utilizare. Aceasta nu inseamna schimbarea continutului de baza al unui site din cauza faptului ca cineva il viziteaza intr-un telefon, ci, mai degraba, ajustarea si imbunatatirea experientei de utilizare a acelui continut intr-o modalitate care se potriveste cu posibilitatile aparatului, marimea ecranului si/sau cu browserul. Va suna familiar? Ii spunem imbunatatire progresiva de ani de zile si dileme si discutii din anii trecuti apar din nou, imbracand haina mobilitatii. Continutul ar trebui sa fie portabil si independent de platforma/interfata.

Fiecare site sau aplicatie web include continut care este esential scopului sau. Putem sa denumim “scenariu cheie” aceste cazuri fundamentale de utilizare. In cele mai multe cazuri, continutul de baza oferit utilizatorilor ar trebui sa fie identic oriunde poate fi consumat, cu exceptia cazurilor in care “scenariul cheie” este atat de diferit incat acelasi continut nu va mai avea sens.

Consider ca urmatoarele sunt ingrediente cheie in experienta de utilizare pe Web:

• Continutul structurat : acesta este lucrul cel mai important. “Structurat” este aici cuvantul cheie; nu ne intereseaza inca aspectul continutului, pentru ca el poate diferi pe fiecare aparat, ecran, sistem de operare sau browser. Ne intereseaza ce este continutul si ce sens are fiecare bucata de continut in intreg.
• Prezentarea : de aici putem incepe sa ne gandim despre layout la diferite dimensiuni de ecran, la inteligibilitate si la modalitatea de prezentare a informatiilor tabelare.
• Comportamentul : cum se va comporta site-ul in diferite situatii? Ce se va intampla cand Flash nu este disponibil? Fara JavaScript? Fara suport de interogari despre mediu?
• Scopul : motivele pentru care in primul rand cineva utilizeaza site-ul sau aplicatia sunt critice in construirea experientei de utilizare. Desi dispozitivele primesc o atentie deosebita, trebuie sa ne amintim ca nu aparatele sunt central. Fundamental este ceea ce utilizatorii trebuie sa faca pentru a duce la bun sfarsit ceea ce isi propun. Este de asteptat din partea noastra sa facilitam acest lucru.
• Interactiunea : cum trebuie sa interactioneze cineva cu site-ul pentru a-si atinge scopul.
• Circumstantele : multi considera acestea ca fiind contextuale: – care sunt situatii normale cand cineva utilizeaza site-ul? Fiti precauti aici. Aici apar supozitiile despre “oameni in miscare” cand , de fapt, majoritatea oamenilor isi folosesc dispozitivele “mobile” acasa si/sau sezand.

Este interesant ca deseori facem teste cu utilizatorii pe site-uri “desktop”, insa subestimam lucruri precum circumstantele/contextul din domeniul mobilitatii. Testarea ar trebui sa fie aplicabila si spatiul mobil pentru ca ipoteze de genul “ utilizatorii nostri sunt in plina activitate cand ne viziteaza site-ul” ne pot deturna in directia gresita. Daca, la descrierea contextului mobil, tu sau altcineva din echipa foloseste cuvinte precum “probabil” sau “cred” luati o pauza si in considerare testarea cu utilizatorii.

Primul, continutul structurat

Continutul structurat functioneaza peste tot. Practic, daca adaugam prea multe la el, influentam accesibilitatea si usurinta utilizarii lui. Prea multe dependente, prea multe tehnologii, prea multe resurse , prea multa mizerie.

Designul responsiv ar trebui sa inceapa prin continut structurat si cateva stiluri de baza. Bryan Rieger, unul dintre primii care au descris ceea ce este designul responsiv cu mult inainte sa primeasca acest nume, sugereaza ca prima interogare despre mediu este nici o interogare despre mediu.

Ma indoiesc de faptul ca Tim Berners-Lee a stiut ca iPad-ul (sau oricare alta tableta) va fi inventat si folosit pentru a vizualiza primul site Web din lume. Nu este aspectuos, insa, cum nu este altceva decat continu structurat, primul site din lume se poate inca vedea foarte bine practic pe orice dispozitiv care poate incarca pagina. Singura imbunatatire care ii poate fi adaugata este codul HTML, care poate fi actualizat la specificatia curenta. Insa, exista mii de feluri prin care am putea face complet inaccesibil acest continut in numele experientei de utilizare. Luke Wroblewski sustine designul si dezvoltarea in prima instanta pentru domeniul mobil, lucru care are mult sens: pornind activitatea de la cel mai mic numitor comun, incurajeaza imbunatatirile progresive. In toate situatiile avem acelasi continut si experienta oferita, modul cum il consumi sau cum interactionezi cu acel continut se pot schimba in functie de situatia particulara in care te afli. Insa acea situatie nu ar trebui niciodata sa se interpuna intre tine si continut sau serviciu.

In primul rand, continutul structurat inseamna, domeniul mobil. Daca primul site web din lume functioneaza pe dispozitive vechi si noi, e ceva de invatat din acest lucru. Destul de frecvent, problemele din designul mobil sunt legate de lipsa imbunatatirilor progresive si a unei prea mici discriminari intre continut, prezentare si comportament. In mijlocul tuturor acestor idei, exista oportunitatea sa privim experienta de utilizare ca un intreg, indiferent de platforma. Poate fi de ajutor schimbarea opticii asupra unora dintre ele in sensul unei intrebari de genul “ ce nu as schimba pentru domeniul mobil si ce as schimba pentru desktop?”, mai ales atunci cand simplificam experienta de utilizare, “site-urile desktop” suporta multe imbunatatiri. Cum diferentele dintre posibilitatile aparatelor se diminueaza si numarul de aparate diferite creste, argumentele in favoarea “unui singur web” devine tot mai convingatoare.

Mai mult decat design adaptabil

Daca examinam aspectele de mai sus, putem concluziona ca un design cu adevarat responsiv implica mai mult decat folosirea interogarilor despre mediu si grile flexibile. In lumea reala a dezvoltarii Web, cei care vorbesc despre tehnici responsive se refera de obicei la layout adaptabil : caile prin care se poate permite caracteristicilor vizuale ale unui site sau aplicatii sa se modifice in functie de dimensiunea ecranului utilizatorului. Designerul Paul Rand a spus odata: “Designul este arta de a combina forma si continutul”. Aceasta inseamna ca, in sine, un layout nu este design. Layoutul este forma si nu vom ajunge la un design cu adevarat responsiv fara a trata la randul sau si continutul. Articolul lui Marcotte ne arata ca layout-urile adaptabile sunt fructul cel mai accesibil al designului responsiv, insa, in nici un moment nu a intentionat ca noi sa ne oprim acolo. Totusi , pentru un moment, fiecare mica deplasare in directia buna este pozitiva. Asadar, sa aruncam o privire asupra layout-urilor adaptabile – si asupra unor tehnici pe care le putem folosi acum si a unora care s-ar putea sa devina disponibile in viitor.

[showmodule id=”3800″]

Layout-uri flexibile

O grila flexibila conteaza mult la crearea unui layout adaptabil. Prin folosirea procentelor si a em-urilor in locul pixelilor, mai ales pentru latime de coloana, margini si alte asemenea, putem crea layout-uri care se intind si se contracta destul de mult pana incep sa esueze la ambele capete ale sprectrului. Locurile in care un layout da gres sau este nereusit reprezinta punctele de rupere. In aceste puncte de rupere ne pot ajuta interogarile despre mediu, ca sa ne permita sa modificam in acele puncte specte ale layoutului prin aplicarea unor reguli CSS diferite.

Interogari despre mediu

Interogarile despre mediu ne permit sa folosim CSS sau JavaScript pentru a detecta anumite caracteristici ale mediului de afisare. Cele care sunt cele mai utile in acest moment sunt latimea, inaltimea, orientarea si raportul de aspect. Latimea si inaltimea sunt cele mai suportate.

Exista inca noua alte caracteristici, inclusiv promitatoarele resolution, device-width si device-height, insa acestea nu sunt de asa mare ajutor in acest moment, iar device-width si device-height nici macar nu sunt prea precise. Pentru a compensa, interogarile despre mediu pot fi combinate cu meta viewport.

Meta viewport

Caracteristicile device-width si device-height nu prea ne sunt de ajutor acum. Principalul motiv pentru aceasta situatie este ca device-width nu este neaparat egala cu latimea layoutului. De exemplu, un aparat are o latime de 480 de pixeli, iar layoutul prezentat in viewport are aproape 1000 de pixeli, pagina fiind apoi micsorata pentru a o afisa in intregime. Aceasta situatie a fost intentionat lasata asa pentru a permite si layouturilor neadaptabile sa incapa in browserul mobil. Ne intereseaza mai mult latimea viewportului pentru ca trebuie sa gasim o modalitate de a stabili latimea layoutului la aceasta atunci cand testam conditiile de afisare prin intermediul interogarilor despre mediu. Pentru a face acest lucru putem folosi un element META in codul HTML:

meta name=”viewport” content=”width=device-width initial-scale=1”

Secventa spune aparatului “fa latimea viewportului egala cu latimea aparatului”. Putem trece la folosirea interogarilor despre mediul de prezentare

@media screen and (max-width:320px){
 div{
 width: 80%
 }
 }

Parametrul “initial-scale” stabileste in acest caz nivelul de zoom la 1(100%), lasand in acelasi timp posibilitati de marire a paginii atunci cand este necesar. Putem fi aproape siguri ca acest stil va fi aplicat browserelor in care viewportul layoutului (ceea ce ne intereseaza) nu este mai mare de 320 de pixeli.

Imagini si solutii pe server

Determinarea imaginilor sa se adapteze o data cu layoutul este o provocare. Dezvoltatorii talentati s-au gandit mult la aceasta problema (de remarcat Scott JEhl de la filament Group). O metoda este atasarea mai multor dimensiuni ale aceleiasi imagini:

img src=”small.jpg?full=large.jpg”

Un script si un fisier .htaccess pe server sunt indeajuns pentru a transmite imaginea adecvata marimii respective de ecran.

Uneori este necesara detectia dispozitivului si nu poate fi facut totul folosind tehnologia de pe partea de client. Multi dezvoltatori se bazeaza pe colectiile de profiluri de dispozitive precum DeviceAtlas si WURFL.

Optiuni pe viitor

Exista cateva instrumente interesante pe care nu le putem folosi peste tot, insa este placut sa te joci cu ele, si cel mai probabil, vor deveni mai utilizabile in viitor. Cele mai interesante sunt SVG (Scalable Vector Graphics) si modelele de layout CSS3 independente de ordinea in codul sursa.

Scalable Vector Graphics ofera o modalitate de a include in solutiile de design imagini independente de rezolutie. Acestea sunt imagini vectoriale, nu de tip bitmap, astfel incat cele mai probabile scenarii de utilizare sunt logourile, fundalurile, butoanele, graficele, diagramele si ilustratiile vectoriale. Fisierele SVG pot fi atasate in acelasi fel ca alte formate de imagini, insa ele pot fi plasate in HTML si folosite impreuna cu JavaScript. Imaginile SVG se vor redimensiona automat si arata la fel de bine la orice dimensiune.

Modulul CSS3 Flexible Box functioneaza in browserele Webkit (cum sunt safari si Chrome) si in Firefox. Le permite dezvoltatorilor sa creeze usor layouturi flexibile, folosind casete incapsulate care se maresc si se micsoreaza in concordanta cu schimbarile de latime si inaltime. Insa fiti precauti : W3C schimba drastic specificatia si, in consecinta, v-as sfatui sa nu folositi Flexbox – cum i se spune de multe ori – in site-uri functionale decat daca nu va deranjeaza sa faceti modificari mai tarziu. Flexbox se bazeaza pe o parte din XUL, limbajul folosit pentru crearea interfetei Firefox. Cand redimensionati fereastra Firefox si toate componentele interftei reactioneaza corespunzator, practic vedeti Flexbox in actiune.

Celelalte doua module pe care sa le aveti in vedere sunt Template Layout si Grid Layout, cel din urma implementat in IE10 developer preview. Ambele pot crea layouturi independente de ordinea in codul sursa; ambele permit crearea unei grile de layout prin intermediul CSS, in care elementele sunt pozitionate explicit sau implicit. Atunci cand sunt combinate cu interogari despre mediul de prezentare, vom dispune de un instrument foarte puternic pentru manipularea layouturilor complexe la diferite dimensiuni de ecran.

Concluzie

Exista indeajuns de multe tehnici care pot fi combinate pentru a inlesni crearea unui design responsiv pentru a discuta doar despre unul. Insa designul resposiv merge mai departe de vizual. In acest moment, este mai mult o tinta, un ideal, ceva pentru care ne-ar placea sa ne luptam astfel incat sa cream cea mai buna experienta de utilizare pentru intreaga audienta indiferent de dispozitiv, platforma sau browser. Layouturile adaptabile sunt o fateta importanta si exista destule unelte si resurse pentru a le implementa astazi. Provocarea va fi examinarea circumstantelor de utilizare si a scenariilor cheie, colectarea datelor si dezvoltarea strategiilor de continut care pot fi combinate cu layouturile adaptabile pentru a crea o solutie de design cu adevarat responsiva.

Sintaxa interogarilor despre mediul de prezentare

O interogare despre mediu acopera un anumit mediu de prezentare pe care multi il recunoastem atunci cand folosim type=”screen” sau type=”print” pentru a atasa fisierele de stiluri. Interogarea despre mediu adauga caracteristici logice acestor tipuri de medii de prezentare si in efect ne permite sa cream declaratii conditionale-precum cele relative la dimensiunea ecranului unui dispozitiv pe care este afisata pagina. Atunci cand aceste declaratii sunt adevarate, sunt aplicate regulile de stil continute in interogare. Interogarile despre mediu au urmatoarea sintaxa:

@media[notIonly] type [and] (expression) {
Rules;
}

Sa examinam declaratia in detaliu: cuvantul cheie not (optional) neaga interogarea, practic spunand “daca ceea ce urmeaza nu este adevarat, aplica aceste stiluri”. Cuvantul not neaga intreaga interogare asadar

@media not screen and (min-width:600 px)

este evaluata la

@media(not(screen and (min-width:600px))

si nu la

@media(not screen) and (min-width:600px)

Cuvantul cheie only forteaza doar acele browsere care suporta interogarile despre mediu din CSS3 sa evalueze expresia. In esenta, ascunde codul CSS de browserele mai vechi

@media only all and (device-aspect-ratio:16/9)

Type se refera la tipul de mediu, cum ar fi tiparitura, dispozitiv mobil, ecran sau, in acest caz toate.

Cuvantul cheie and ne permite crearea unor interogari complexe

@media screen and (min-width:600px) and (max-width:1200px)

Declaratia va aplica secventa CSS inglobata la viewporturile de tip ecran, unde latimea este cel putin de 600 de pixeli, dar nu mai mare de 1200 de pixeli.

And-ul logic este folosit pentru a adauga limitari unei interogari; poate fi folosit de cate ori doriti. Si in sfarsit, expression este caracteristica mediului pe care vrem sa o testam. Din nou, de cele mai multe ori, veti folosi doar cateva dintre ele. De fapt, respond.js al lui Scott Jehl activeaza doar min-width si max-width in browserele care nu le suporta. Este un script foarte util, deoarece multe layouturi adaptabile testeaza doar latimea viewportului.

Un fapt mai putin cunoscut este ca interogarile despre mediu din CSS permit si un SAU logic. In acest scop poate fi utilizata virgule:

@ media screen and(min-resolution:300dpi),
Screen and (-webkit-min-device-pixel-ratio:2)

Declaratia zice “aplica secventa CSS pe ecrane daca densitatea pixelilor este cel putin 300dpi sau daca exista 2 pixeli ai aparatului pentru fiecare pixel CSS”. Ca sa spunem adevarul, inca nu este un exemplu din realitate; aceste caracteristici nu sunt prea bine suportate.

Interogarile media pot fi folosite in cadrul fisierelor CSS:

@media screen and(min-width:600px){
/*reguli*/
}

Insa pot fi aplicate si folosind atributul media al elementului link:

link rel=”stylesheet” href=”styles.css”
media=”only screen and (min-width:600px)”

Si in final, ele pot fi importate folosind @ import:

@import url(“import.css”) only all;

[/et_pb_text][/et_pb_column]
[/et_pb_row]
[/et_pb_section]

In aprilie 2010, Google a decis sa includa viteza site-ului Web in algoritmul de cautare. Viteza a fost intotdeauna importanta din punct de vedere al utilizatorilor, asa ca aceasta optiune este conforma cu misiunea continua a companiei Google de a promova cele mai folositoare si mai prietenoase site-uri Web. Nici un proprietar de site nu-si poate permite sa ignore aceasta schimbare de politica.

Bineinteles, viteza a fost intotdeauna un factor major in felul in care multa lume este predispusa sa va viziteze site-ul. Prima impresie a potentialului dumneavoastra vizitator este deseori felul cum apare site-ul intre rezultatele de cautare. Este domeniul tehnicilor SEO traditionale: numele site-ului, titlurile, cuvintele cheie, continutul. Insa, a doua impresie este cat de repede se incarca odata ce a facut click pe el. Veti fi putut crea cea mai atragatoare schema de culori, o imagine de fundal senzationala si logoul perfect. Insa, daca trec 5,6 secunde pana se incarca, utilizatorii se pot plictisi si pot da click pe urmatorul rezultat al cautarii, ajungand, in schimb pe un site simplu, dar rapid.

Acest articol acopera cateva sfaturi usoare (si cateva mai dificile, totusi) pentru accelerarea site-ului dumneavoastra. Cel mai important este ca cele mai multe dintre ele nu necesita vreun sacrificiu din punct de vedere al continutului sau al design-ului – un pic de rearanjare si reconfigurare. Totul pentru ca s-ar putea sa nu mai aveti sansa unei a treia impresii.

Pragul de 1,5 secunde al lui Google

Pragul impus de Goolge ca sa considere un site ca fiind rapid este de aproximativ 1,5 secunde. Pentru a verifica acest lucru pentru site-ul dumneavoastra, aveti nevoie de un cont Google. Autentificati-va, dati click pe adresa de e-mail din coltul din dreapta sus si alegeti Account Settings. La sectiunea Products, alegeti Webmaster Tools. S-ar putea sa fiti nevoiti sa adaugati un site si sa-l supuneti verificarii – prin descarcarea unui fisier de verificare care trebuie stocat pe site sau prin adaugarea unui meta tag paginii de index a site-ului. Click pe numele site-ului pentru a ajunge la Dashboard. Pe partea stanga dati click pe Labs, iar apoi pe Site performance.

Aceasta pagina va va prezenta in mod vizual cat de rapid a fost site-ul dumneavoastra pe parcursul ultimelor luni si va afisa numarul de secunde necesare pentru incarcarea unui esantion din paginile site-ului. Google considera ca un site este rapid cand se situeaza intre primele 20 de procente din toate site-urile pe care le-a monitorizat. La momentul scrierii materialului, era vorba de aproximativ 1,5 secunde.

In Google Analytics exista o facilitate denumita Site speed, care detecteaza timpii de incarcare pentru toate paginile site-ului. Pentru a il utiliza, va trebui sa adaugati un apel la functia trackPageLoadTime() in codul JavaScript asociat serviciului Google Analytics. Odata ce au fost colectate niste cantitati de date, autentificati-va, dati click pe New version din coltul din dreapta-sus si regasiti analiza Site Speed in zona Content din stanga.

Viteza este doar unul din cei peste 200 de factori (semnale) care contribuie la clasarea unei pagini in lista cu rezultatele cautarii. Nu prea exista indici despre detaliile felului in care actioneaza acest semnal in mod particular si nici despre cat de important este in comparativ cu alti factori – ci doar ca este mai important decat era. Asadar, cea mai buna cale de urmat este sa incercati sa faceti fiecare pagina din site cat mai rapida si mai supla cu putinta.

Analiza vitezei de incarcare a paginii

Exista cateva instrumente gratuite cu care puteti analiza viteza site-ului. Daca folositi Google Chrome, faceti click pe meniul cu cheia din coltul dreapta-sus al ferestrei, navigate la Tools, iar apoi la Developer Tools (sau Ctrl+Shift+I). Click pe Resources si actualizati pagina. Zona va incepe sa se umple pe masura ce Google Chrome descarca fisierele necesare pentru a afisa pagina Web. In zona Network, va aparea un grafic cronologic in care este prezentat timpul in care a fost descarcata fiecare resursa-pagina in sine, fisiere de stiluri, JavaScript sau imagini. Cate o linie vertical albastra si poate si rosie vor aparea pentru a indica atingerea anumitor etape in procesarea JavaScript, iar dedesubt este prezentat timpul total de incarcare. La trecerea cursorului peste fiecare dintre capsulele reprezentand resursele, sunt prezentate detaliile traficului generat.

Pentru si mai multe informatii, puteti accesa serviciul WebPagetest si introduce URL-ul site-ului testat. Alegeti un server localizat geografic cat mai aproape si apasati pe Start Test. Vizualizarea in cascada este similara cu cea oferita de Chrome, insa analiza include si un scor, o lista de posibile optimizari pentru fiecare resursa in parte si o repetare cronometrata a accesarii paginii.

Micsorarea paginilor si cresterea vitezei lor nu inseamna rescrierea continutului paginilor, ci subtierea si rearanjarea fisierelor HTML, CSS si JavaScript dependente, precum si optimizarea configuratiei serverului atunci cand acest lucru este posibil. Urmatoarele sectiuni vor aborda aceste lucruri, pe masura ce vom explica si diferitele vizualizari din serviciul WebPagetest. Spre sfarsitul articolului, vom discuta si despre modalitatile in care poate fi marita viteza si in cazul vizualizarilor repetate.

Combinarea fisierelor JavaScript si CSS

WebPagetest prezinta un numar de 77 de fisiere care compun pagina cu vremea de la BBC. Vizualizarea cascada prezinta cat timp ii ia browserului sa proceseze fiecare fisier. Pentru fiecare fisier exista un dreptunghi multicolor si un timp in milisecunde. Culorile prezinta timpul relativ necesar pentru executarea diferitelor operatiuni. Aceasta pagina foloseste fisiere stocate pe diferite servere.

Cand primul fisier de pe oricare server nou este cerut, vor trece cateva milisecunde pentru a executa o operatiune de cautare in serverul DNS, prezentata in culoarea gri, si vor trece ceva milisecunde pana la crearea conexiunii, prezentata in portocaliu (daca toate fiserele prezinta o secventa de inceput portocalie, citit cu atentie sectiunea despre Keep-Alive). Apoi, toate fisierele includ un anumit timp necesar pana soseste primul byte al fisierului, afisat cu verde, iar dupa aceea, timpul necesar descarcarii totale a fisierului, cu albastru (acesta din urma este uneori atat de mic incat abia este vizibil). Primul element al listei este URL-ul introdus, cu caracterul liniuta oblica la sfarsit. In timp ce descarca codul HTML al acestei pagini, browserul a intalnit o referinta la un fisier denumit main.css si a cerut imediat fisierul, inainte sa fi primit tot codul HTML. Urmatoarele 20 de fisiere sunt in marea lor parte fisiere JavaScript si mai toate secventiale – ceea ce inseamna ca IE7 a trebuit sa astepte pana s-a incarcat unul dintre ele pentru a efectua cererea pentru urmatorul si a petrecut aproape trei secunde facand acest lucru. Cel mai mult timp nu a fost petrecut descarcand fisiere, ci asteptand pentru ele. La o adunare aproximativa a secventelor cu verde – cam 60 de milisecunde pentru fiecare dintre cele 15 fisiere JavaScript – se ajunge la aproape o secunda de asteptare! Asadar, unul dintre primele mele sfaturi de optimizare este combinarea tuturor fisierelor JavaScript intr-unul singur, la fel si pentru CSS. Astfel browserul va avea de asteptat doar de doua ori.

Caching pentru un continut static

In WebPagetest, vizualizarea pentru repetarile efectuate ar fi normal sa dureze mult mai putin pentru ca, in mod normal, testul ar trebui sa profite de catchingul din browser. Mare parte din continutul unui site Web este static si se schimba rareori – fisierele HTML statice, fisierele JavaScript si CSS si imaginile. In general, browserul le va stoca in cahe-ul sau si, cand sunt cerute din nou, va determina daca sunt recente sau expirate, bazandu-se pe data oferita de parametrul Last Modified al fisierului. Daca sunt expirate, browserul va cere serverului Web sa valideze fisierul – sa confirme daca exista sau nu o versiune mai noua a fisierului.

Aceasta validare necesita comunicare suplimentara si o intarziere inerenta intre browser si server chiar daca serverul raspunde cu “da,poti folosi versiunea din cache”. Aceasta situatie poate fi evitata daca, la transmiterea continutului static, este adaugat headerul Expires sau valoarea max-age pentru headerul CacheControl – care recomanda browserului sa pastreze in mod sigur fisierul in cache pentru o ora, o zi, o saptamana sau atata timp cat doriti – fara a pune intrebari.

Adaugarea sectiunii de mai jos la fisierul de configurare al Apache sau intr-un fisier .htaccess va face acest lucru – ii va spune browserului sa pastreze fisierele care se termina in html/xml/css/etc. pentru sapte zile, adica 604800 de secunde:

FilesMatch”\.(htmlǀxmlǀcssǀjsǀgifǀpngǀjpeg$
Header set Cache-Control”max-age=604800”
/FileMatch

Alternativ puteti transmite headerul Expires folosind directive mai prietenoase cu cititorul lor. Acest exemplu include o verificare pentru a ne asigura dinainte ca Apache are instalat modul necesar, pentru a-l impiedica sa afiseze mesajul Internet Server Error daca nu este disponibil:

IfModule mod_expires.c
ExpiresActive On
ExpiresByType text/css “access plus 1 week”
/IfModule

Singurul dezavantaj este, daca fisierul se va schimba intre timp, va trebui sa-l redenumiti pentru a va asigura ca noua versiune este vazuta de toata lumea.

Reduceti marimea imaginilor

Imaginile sunt o mare parte din marimea totala a fiserelor pentru multe site-uri. Reducerea impactului acestora poate lua timp, insa tehnic, este relativ usor de realizat.

Imagini miniaturale

Multe site-uri afiseaza versiuni miniaturale ale imaginilor, pe care, dupa aceea, se poate face click pentru a le mari. Uneori este disponibila doar versiunea mare a imaginii, astfel incat, imaginea mare este descarcata si browserul o redimensioneaza pentru o afisare la mici dimensiuni. Insa este mult mai eficienta oferirea in prealabil a unei versiuni separate, miniaturale, redimensionate anterior.

Situatia apare deseori pe site-urile intretinute de proprietar, unde aceasta incarca pe site fotografii de produse de 10 megapixeli direct de pe camera digitala sau din scanner si trebuie descarcate multiple imagini pentru a afisa cateva miniature de 100x100pixeli. Pentru a elimina situatia, dezvoltatorii de solutii CMS ar putea redimensiona automat imaginile la incarcarea pe site, producand miniaturile in mod automat.

Formate

Atunci cand reduceti marimea fisierelor, concentrati-va in primul rand asupra celor de dimensiuni mari si care sunt folosite des(cum sunt imaginile de fundal). Principalele formate suportate de browsere sunt JPEG (in principal fotografii), PNG si GIF (pentru logouri si elemente grafice cu transparenta si/sau zone mari de culoare uniforma). Atunci cand salvati un fisier JPEG in Photoshop, Gimp sau alt program de editare a imaginilor, aveti optiunea de a alege calitatea. Cea implicita este la 80-90%, insa s-ar putea sa aveti posibilitatea sa mergeti pana la 50% fara a aparea diferente sesizabile, mai ales in cazul fisierelor JPEG de dimensiuni mici si care nu contin text, iar astfel veti reduce marimea fisierului la jumatate sau o tremie din cea orioginala. Fisierele GIF si PNG pot fi salvate folosind mai putine culori pentru a le reduce marimea. Exista o sumedenie de intrumente online pentru a executa aceste operatiuni, multe dintre ele oferind prelucrare in bloc : cautati dupa “optimize images”.

Reducerea marimii fisierelor

Dupa reducerea numarului de fisiere care trebuie descarcate, va puteti concentra pe reducerea dimensiunilor fiecaruia dintre ele.

Pagini HTML : puteti reduce marimea codului HTML prin eliminarea comentariilor si a spatiilor goale redundante. Daca in HTML se gasesc si secvente JavaScript sau CSS repetate pe mai multe pagini, ele ar trebui mutate intr-un fisier extern. In acest caz, vor fi descarcate o singura data si stocate in cache-ul browserului. O cunoastere buna a limbajelor HTML si CSS va poate de asemenea fi de ajutor in procesul de subtiere a fisierelor.

JavaScript si CSS : unul dintre avantajele Developer Tools din Chrome fata de WebPagetest este ca puteti vedea rapid rezultatele in browser. Daca dati click pe tabul Network, iar apoi pe coloana Size, va va fi prezentata o sortare dupa marimea fisierelor si veti vedea ca cele JavaScript su CSS detin o buna parte din multe pagini Web modern (pentru a vedea aceasta sortare in WEbPagetest, dati click pe linkul Content Breakdown din mijlocul celei de-a doua bare negre de navigare). Asadar, minimizarea acestor fisiere este foarte importanta si exista multe instrumente online care pot face acest lucru. Acestea extrag comentariile, spatiile si semnele de punctuatie inutile si va odera un fisier subtirel, insa care nu poate fi citit, posibil la jumatate din dimensiunea originala.

Efectuati o cautare dupa termenii “minify” JavaScript care va permite sa introduceti codul JavaScript brut iar apoi sa primiti o versiune redusa in dimensiuni. Intotdeauna, insa, pastrati o copie a versiunii originale.

Imagini : reducerea dimensiunilor fisierelor cu imagini este o operatiune simpla, insa consumatoare de timp deoarece pot exista multe astfel de fisiere. Vedeti caseta “Reduceti marimea imaginilor” pentru sfaturi despre cum puteti “servi” utilizatorilor imagini corecte, dimensionate optim.

Caching pentru continut dinamic

Si fisierele generate dinamic pot beneficia de caching. De exemplu, aveti o baza de date cu 5000 de produse, dintre care numai pentru unele dintre ele s-a modificat pretul sau descrierea. Desi paginile de vizualizare a acestor extrag in mod dinamic informatii din baza de date, la randul lor pot fi determinate sa foloseasca cache-ul browserului, prin utilizarea headerului Last-Modified. Functia PHP va transmite browserului headerele adecvate, in baza datelor calendaristice folosite.

Scriptul transmite o data de expirare in trecut pentru a se asigura ca browserul se bazeaza pe data ultimei modificari si nu incearca cachingul prea entuziast (spre deosebire de resursele statice, unde data expirarii este stabilita in viitor pentru a incuraja cachingul).

Sau daca pagina de index se schimba frecvent, puteti cere browserului pur si simplu sa stocheze in cache pagina cate 10 minute. Un utilizator care se reintoarce pe pagina pentru a urmari alte elemente ale ei va beneficia de o experienta dinamica.

In Firefox, puteti da click dreapta pe pagina si alege optiunea View page info pentru a verifica daca Last Modified Date este configurata corect. Si, intotdeauna, puteti apasa Shift+Refresh/Reload pentru a forta browserul sa afiseze cea mai recenta versiune a paginii.

Rulati codul JavaSCript la incarcarea paginii

Rezultatul obtinut de pagina BBC-ului pe WebPagetest da trei rezultate diferite : inceperea afisarii la 2,889secunde, document complet/timp de incarcare la 5,391 secunde si incarcat complet la 6,667 secunde. Acesta din urma este timpul in care pagina s-a incarcat si afisat si evenimentul JavaScript onload a fost declansat si este (propabil) timpul pe care il foloseste Google pentru a masura viteza paginii.

Asadar, pe cat posibil, este de ajutor rularea codului JavaScript neesential dupa ce pagina s-a incarcat. De exemplu, daca pagina include o prezentare cu 10 imagini create in JavaScript, nu este necesara descarcarea celor 10 imagini inca de la inceput. Trebuie descarcata doar prima, pentru ca utilizatorul sa aiba in fata o pagina completa. Probabil ca nu va afecta timpul total de incarcare in WebPagetest, insa va scurta perioada in care documentul este complet.

Configuratia serverului

In partea de sus a fiecarui rezultat de la WebPagetest se afla un set de scoruri. Sectiunile precedente s-au ocupat de doua dintre scoruri, pentru compresia imaginilor, unde BBC a iesit bine, si pentru combinarea fisierelor JavaScript si CSS, unde rezultatul a fost prost. Urmatoarea sectiune se ocupa de Keep-Alive si compresia textului. Cachingul continutului static sau dinamic este tratat in casete dedicate. Acronimul CDN provine de la Content Delivery (sau Distribution) Network si reprezinta folosirea mai multor servere pentru a distribui incarcarea, fie dupa un criteriu geografic, fie dupa tipul de continut (de exemplu un server separat pentru imagini) – operatiune potential scumpa si in consecinta de prioritate mai mica.

Keep-Alive

In primul paragraf cascada pentru pagina meteo a BBC, doar cateva dintre fisiere au avut conexiunea initiala de culoare portocalie. Acest lucru s-a intamplat datorita faptului ca browserul a fost capabil sa mentina activa conexiunea si sa o refoloseasca pentru a cere mai multe fisiere. Acest lucru se numeste Keep-Alive sau conexiune persistenta si este o optiune de configurare a serverului. Fara ea, browserul ar trebui sa se reconecteze la server pentru fiecare cerere de fisier.

Din fericire, Keep-Alive este usor de activat. Din nefericire, trebuie sa aveti acces la optiunile de configurare ale serverului. Pentru Apache, optiunile necesare se gasesc in httpd.conf sau in apache2.conf.

Sfat pentru viteza

Afacerea companiei Google consta in ale oferi oamenilor posibilitatea de a ajunge la informatia cautata cat mai repede posibil, asadar merita sa fiti atenti la cercetarile lor in acesta zona. Pe blogul Official Google Webmaster Central cautati dupa “site speed” si derulati in aprilie 2010 pentru a vedea anuntul referitor la viteza site-urilor. In articol poate fi gasit un link la un studio intern al Google publicat in iunie 2009. Google a experimentat incetinind pagina de rezultate si masurand cum afecteaza acest comportament utilizarea motorului de cautare. Rezultatele au fost relevatoare. Compania a determinat ca, intr-o perioada de trei saptamani, utilizatorii au efectuat cu 0,22% mai putine cautari daca paginile de rezultate ii lua cu 200 de milisecunde in plus sa incarce. Si mai mult, efectul s-a inrautatit in urmatoarele trei saptamani si a fost masurabil si dupa incetarea experimentului.

Doua zecimi de secunda sunt o mica perioada de timp, de doua ori mai mult decat un clipit de ochi. Lectia pentru administratorii de site-uri este ca si micile cresteri in viteza site-ului pot duce la vizite mai lungi si mai mare probabilitate a repetarii vizitelor.

Keepalive On. MaxKeepAliveRequests100. KeepAliveTimeout 3

Aceste optiuni activeaza caracteristica, stabilesc numarul maxim de cereri per conexiune persistenta si stabilesc cat de mult va dura conexiunea, de obicei recomandata o perioada scurta. Va trebui sa reporniti serverul dupa efectuarea modificarilor. Va mari putin incarcarea serverului, insa va accelera puternic remiterea paginilor.

Compresia textului

Pe langa sfaturile de compresie de mai devreme, ii puteti spune serverului sa compreseze fisierele si sa le trimita browserului. Acesta le va decomprima inainte de a le afisa. Fisierelor HTML, JavaScript si CSS le poate fi redusa dimensiunea cu peste 50 de procente.

Pentru Apache, optiunea se poate activa adaugand un rand suplimentar fisierului de configurare sau, in directoarele stabilite, folosind un fisier .htaccess:

AddOutputFilterByType DEFLATE text/plain
Text/html text/xml

Cautati dupa mod_deflate pentru a vedea un exemplu in care totul este compresat, mai putin imaginile, doar pentru acele browsere care suporta acest lucru. Imaginile sunt deseori excluse din operatiune deoarece sunt deja puternic comprimate si nu se economiseste latime de banda. Si in acest caz, serverul cunoaste o incarcare suplimentara.

Viteza serverului si a paginii

In final, s-ar putea ca serverul sau baza de date sa fie incite sau sa se chinuie la incarcare mare.

In WebPagetest, daca timpul, de culoare verde deschis, scurs pana la primul byte al paginii este neobisnuit de lung (PHP-ul sau ASP-ul care genereaza dinamic HTML-ul) si relativ scurt pentru restul resurselor statice, s-ar putea ca baza de date “sa rasneasca” prea mult, cautand intre mii de lucruri inainte ca ceva sa-i fie trimis browserului.

In acest caz, puteti forta serverul Web sa trimita neintarziat elementul "head" al paginii, urmand ca dupa aceea sa fie efectuate procesarile de durata. In acest fel, browserul poate detecta fisierele CSS si JavaScript necesare, le poate cere si descarca asteptand in rastimp dupa restul paginii. In PHP acest lucru poate fi facut printr-un apel la functia Flush.

Similar, daca sectiunea albastra de descarcare a continutului este straniu de lunga, serverul s-ar putea sa fi trimis jumatate din pagina si munceste din greu sa trimita cealalta jumatate.

In acest caz, puteti face cateva imbunatatiri rapide pentru a mari viteza bazei de date prin indexarea regulate a coloanelor folosite, optimizarea tabelelor si folosind la maximum cachingul interogarilor. Puteti sa va adanciti mai adanc in cod, incercand sa reduceti numarul interogarilor sau sa creati pe server zone cache pentru partile intensive din site. De asemenea, consultati-va cu furnizorul de hosting pentru a va asigura ca serverul dispune de o cantitate suficienta de memorie RAM si ca variabilele de configurare sunt adecvate.

Concluzie

Acest articol a prezentat catva sfaturi la indemana oricui pentru accelerarea site-urilor care, speram, vor da un impuls in rankinguri si o experienta mai placuta pentru utilizatori.

Pentru realizarea unui design Web bun, vom oferi o serie de sugestii:

• Autorii de pagini Web trebuie sa aiba in vedere furnizarea unui mecanism de navigare facila, structurata, prin utilizarea unor legaturi de explorare si/sau bidirectionale si oferirea de meniuri, arbori de parcurgere a legaturilor sau optiuni de deplasare secventiala;
• Evitarea scrierii unor documente de dimensiuni mari, in care utilizatorul, pentru a parcurge intregul continut, trebuie sa foloseasca intensiv barele de derulare (scroll). Este indicat ca aceste pagini sa fie divizate in documente mai mici, fiecare continand in jur de 500 de cuvinte/pagina. Aceasta impartire are si avantajul actualizarii mai eficiente a continutului si a parcurgerii totale a documentului de catre cei interesati;
• Internationalizarea reprezinta un alt factor important. Autorii pot realiza documente separate pentru fiecare limba dorita (de exemplu, in cazul nostru, romana si engleza) si pot incerca sa detecteze, dupa adresa clientului Web, care ar putea fi localizarea sa (in interiorul sau in afara tarii). De asemenea, trebuie acordata deosebita atentie corectitudinii gramaticale a textului. Se recomanda ca fiecare document sa fie parcurs, inainte de a fi disponibil pe Web, de un filolog;
• Trebuie evitata utilizarea a mai mult de trei tipuri de corpuri de litera. Fonturile specifice unor platforme particulare nu vor fi corect sau nu vor putea fi afisate pe alte calculatoare;
• Este mult mai usor de parcurs un document al carui continut a fost structurat pe capitol, subcapitole, sectiuni si paragrafe, corect aliniate si indentate, eventual folosind linii orizontale. Folosirea listelor neordonate sau/si ordonate creste gradul de lizibilitate a unei pagini Web. Liniile lungi de text nu sunt recomandabile, optim fiind un numar de 65-70 de caractere pe o singura linie (nu mai mult de 15-20 de cuvinte pe linie). De asemenea, alinierea la dreapta sau centrata, scrierea cu majuscule ori modificari frecvente de culoare ale unui text de dimensiuni mari implica dificultati de parcurgere;
• Utilizarea unor imagini de fundal “incarcate”, (texturi complicate, fotografii), animate sau contrastand violent cu culoarea textului conduce la evitarea parcurgerii continutului acelei pagini. Nu se recomanda animatiile (texte derulante, fisiere GIF animate sau applet-uri Java), imaginile de dimensiuni mari, contrastele, fundalurile sonore deranjante.

Pentru paginile continand un volum mare de informatie textuala, cea mai buna solutie este fundalul alb pentru text negru. Unele cercetari au relevat faptul ca exista o ordine descrescatoare de intensitate a contrastelor cromatice pentru text din punct de vedere al lizibilitatii de la distanta si al preferintei in procesul de invatare:

• Negru pe fond galben;
• Verde pe fond alb;
• Rosu pe fond alb;
• Albastru pe fond alb;
• Alb pe fond albastru;
• Negru pe fond alb;
• Galben p fond negru;
• Alb pe fond rosu;
• Alb pe fond verde;
• Alb pe fond negru;
• Rosu pe fond negru;
• Verde pe fond rosu.

In elaborarea materialelor de prezentare pe Web, este indicat ca pentru vizualizarea informatiilor esentiale sa se utilizeze contraste mai puternice, iar pentru informatiile de continut, contraste cromatice mai reduse.

In ceea ce priveste ilustratiile (grafice, histograme, scheme, harti), acestea se vor putea pune in evidenta prin urmatoarele combinatii cromatice:

• Albastru pe fond alb;
• Negru pe fond galbem;
• Verde pe fond alb;
• Negru pe fond alb;

Informatiile vor trebui reactualizate in mod regulat, verificandu-se integritatea tuturor legaturilor (se evita astfel existenta asa-numitelor “legaturi moarte”). Procesul de reactualizarea continutului trebuie realizat, in medie, trimestrial.

Pentru incarcarea mai rapida a documentelor HTML, fiecare element care implica pozitionarea va avea atasate atributele care sa indice navigatorului Web locul in cadrul ferestrei (pentru imagini si applet-uri se vor specifica inaltimea si latimea, pentru tabele se va furniza latimea celulelor, se vor utiliza proprietati CSS de pozitionare absoluta sau relative etc.). Tabelele de dimensiuni considerabile nu sunt recomandabile, la fisierele (multimedia sau arhive) avand lungimi mari, numarul mare de applet-uri, controale ActiveX, cadre sau rutine JavaScript.

De preferat ar fi ca intregul site sa fie testat pe mai multe navigatoare, versiuni si platforme. Codul HTML trebuie scris asa fel incat sa nu foloseasca extensii particulare, nestandardizate sau elemente considerate demodate, dar nici cele de ultima ora. Trebuie considerata si situatia in care documentele pot fi parcurse si de navigatoare text, nu grafice (e.g. : pentru fiecare imagine se va furniza, ca alternativa, o explicatie textuala, folosind atributul alt). Fiecare ancora poate avea asociata, cu ajutorul atributului accesskey, o tasta (scurtatura) care o activeaza.

De asemenea, tabelele pot avea asociate explicatii, date prin intermediul atributului summary, iar elementelor HTML putem sa le atasam titluri explicative folosind atributul title.

Pentru reutilizarea stilurilor sau scripturilor si a modificarii facile a acestora, este bine ca ele sa fie specificate ca fisiere externe, separandu-le de continutul efectiv al documentului. Pentru a asigura independent de navigator, rutinele JavaScript trebuie sa fie atent concepute si testate.

In cadrul paginilor este indicat a se folosi linii de comentarii pentru explicarea modului de marcare si furnizarea altor detalii utile. De asemenea, fiecare document HTML trebuie sa aiba precizat un titlu adecvat (prin intermediul elementului „title”). Folosind marcatorul „meta” pot fi specificate diverse informatii referitoare la autorul, cuvintele-cheie, respectiv generatorul automat al documentului etc.

Se va evita pe cat posibil folosirea cadrelor; conform afirmatiilor lui Jacob Nielsen, o pagina divizata in cadre devine confuza, tiparirea continutului fiind dificila;

Trebuie avuta in vedere si credibilitatea site-ului Web, printre criteriile de evaluare a acesteia numarandu-se:

• Scopul – site-ul trebuie sa exprime limpede scopul pentru care a fost construit, aspectele tratate, existenta temelor conexe, nivelul de atentie solicitata audientei, actualitatea informatiilor etc;
• Continutul – site-ul trebuie sa ofere raspunsuri pertinente la diferite intrebari provenite din partea vizitatorilor: “Care este rata de reactualizare a continutului?”, “Cat de bine este formulat acest continut?”, “Care este nivelul de cunostinte pe care trebuie sa-l aiba cititorul pentru a intelege informatiile puse la dispozitie?”, “Informatiile includ referinte, iar daca da cat de exacte sunt?”;
• Forma si accesibilitatea – site-ul trebuie sa formeze o anumita relatie cu vizitatorul, sa aiba un continut grafic/multimedia concludent si, in concordanta cu scopul, sa organizeze eficient informatiile, oferind posibilitati de cautare, sa ofere versiuni alternative pentru persoanele cu diferite handicapuri sau provenind din alte tari;
• Costul – site-ul trebuie sa indice daca anumite documente sunt accesibile doar cu plata, daca accesul la ele se realizeaza prin abonament sau pe baza unei taxe de vizitare; de asemenea, trebuie stipulate restrictiile legate de copyright, asigurarea confidentialitatii si protectia tranzactiilor.

Conform unui studio intreprins in anul 2001 la Universitatea Stanford, au fost puse in evidenta o serie de atribute care maresc credibilitatea, dintre care se pot enumera usurinta in parcurgere, profesionalismul autorului, increderea pe care o induce site-ul, grija fata de vizitator. Exista si atribute care pot diminua credibilitatea unui site Web, cele mai importante fiind implicarea comerciala si amatorismul.

Nu suntem adeptii mesajelor “Aceasta pagina poate fi vizualizata doar cu navigatorul X, avand suport pentru Y”, “Sunteti vizitatorul cu numarul N” sau “Votati acest site in top T”. Site-urile Web ar trebui sa fie vizualizate in bune conditii indiferent de navigator.

Timpul de incarcare este important sau chiar vital pentru anumite site-uri, de aceea va trebui sa optimizam incarcarea paginilor, mai ales ale elementelor grafice sau multimedia. Serviciul Dr. HTML, printre altele, calculeaza in cate secunde va fi incarcata o pagina Web, pentru mai multe latimi de banda.

Verificarea integritatii si corectitudinii codului-sursa

Dupa proiectarea si crearea efectiva a site-ului, un prim pas este acela de a verifica integritatea legaturilor si corectitudinea codului-sursa al documentelor HTML si CSS. Pentru aceasta putem apela la diverse utilitare. Astfel, pentru o privire de ansamblu asupra site-ului dezvoltat si, in plus, pentru verificarea fiecarei legaturi se pot folosi Adobe GoLive, Macromedia Dreamweaver, NetObjects Fusion sau AceHTML – disponibile sub Windows – sau SCREEM – ruland sub Linux. De asemenea, se pot folosi diferite sisteme de management al continutului site-ului, precum WebGUI si WebMake.

Corectitudinea codului HTML se poate realiza apeland la HTML Tidy sau la serviciul online. De asemenea, putem realiza diferite optimizari ale codului HTML, eliminand spatiile inutile, comentariile, diverse constructii proprietare etc. Unele programe – precum Absolute HTML Compressor – merg si mai departe, stergand ghilimelele care delimiteaza valorile atributelor sau tag-urile de sfarsit ale unor elemente. Nu recomandam utilizarea lor, mai ales daca avem in vedere trecerea de la HTML la standardul XHTML.

In vederea vizualizarii site-ului in bune conditii, indiferent de platforma, recomandam evitarea oricaror extensii particulare si a formatelor grafice proprietare (ca, de exemplu, BMP). Un alt aspect de care trebuie sa tinem cont este modul de scriere a numelor de fisiere. Astfel, sistemul de operare Windows nu face deosebirea intre minuscule si majuscule si paginile se vor vizualiza fara probleme, insa o data transferate pe un server Unix (Linux) trebuie sa verificam daca numele resurselor au fost specificate corect, platformele Unix facand deosebirea intre literele mici si cele mai (case-sensitive).

[et_pb_section admin_label=”section”]
[et_pb_row admin_label=”row”]
[et_pb_column type=”4_4″][et_pb_text admin_label=”Text”]

Multimedia reprezinta o combinatie de mai multe medii, precum textul, imaginile statice – fotografii, scheme, diagrame – animatiile, continutul audio si video. Mediile statice (text, imagini) se mai numesc si discrete, iar cele dinamice (animatii, audio si video) – continue.

Daca de text si de imagini ne-am ocupat in cele de mai sus, in continuare vom discuta despre continutul sonor, animat si video.

Sunetul. De la bun inceput trebuie sa mentionam ca sunetul reprezinta un element deranjant in cadrul unei pagini Web. Desi unele efecte sonore pot fi benefice in anumite situatii – in domeniul academic sau al afacerilor -deseori devin enervante, de exemplu o melodie de fundal rulata de nenumarate ori.

Formatele audiocare pot fi utilizate sunt:

• MIDI (Musical Instrument Digital Interface) este un format simplu, continand doar instructiuni pentru crearea de sunete, placa audio a calculatorului fiind responsabila de interpretarea acestora si de generarea efectelor sonore respective. Fisierele MIDI au dimensiuni reduse (de ordinul zecilor de kilo-octeti) si vor putea fi folosite, de exemplu, ca fundaluri sonore pentru o pagina Web;
• MP3 reprezinta unul dintre cele mai populare formate actuale, varianta restransa a standardului video MPEG. Poate fi utilizat pentru stocarea de melodii de dimensiuni apreciabile la calitate destul de buna, folosind insa compresia cu pierderi, ca si formatul MIDI, este suportat de majoritatea platformelor, existand o multitudine de programe de procesare a acestuia;
• WAV este un format specific Windows, stocand continut audio fara nici o compresie, fisierele rezultate fiind voluminoase;
• Real Audio este un format destinat difuzarii de continut audio in timp real (streaming audio), fiind folosit mai ales de posturile de radio care emit pe Web. Sunetele vor putea fi percepute concomitent cu incarcarea continutului si nu dupa transferul complet al fisierului, asa cum se intampla in cazul formatelor mentionate anterior.
• Quicktime, format specific Apple, este in multe privinte asemanator formatului RealAudio. Pentru accesarea acestui tip de fisier este necesara aplicatia QuickTime. Navigatoarele actuale includ plug-in-ul QuickTime, capabil sa interpreteze mai multe tipuri de continut multimedia : fisiere grafice PICT si TGA, fisiere audio MIDI, AIFF sau QuickTime, prezentari SMIL sau fisiere video.

Animatiile. In special in domenii precum divertismentul interactiv sau comertul electronic, animatiile sunt folosite cu scopul de a atrage atentia sau de a determina utilizatorii sa-si petreaca timpul pe un site. Printre metodele cele mai uzitate de a include continut animat in cadrul paginilor Web se pot enumera:

• Fisierele GIF animate – folosite mai ales in cadrul ornamentatiilor sau afiselor publicitare, au avantajul ca sunt interpretate direct de catre navigator. Un dezavantaj este acela ca efectele animatiilor sunt reduse, calitatea prezentarilor fiind destul de precara;
• Programele JavaScript – pot fi utilizate pentru a crea anumite efecte animate, precum texte derulante, meniuri dinamice, succesiuni de imagini, defilarea continutului unei zone de fereastra et. Din pacate, versiunile JavaScript suportate sunt dependente de navigator sau de platforma;
• Applet-urile Java – sunt folosite pentru a obtine efecte spectaculoase, cu conditia ca sistemul sa includa suport pentru Java. Ca si scripturile JavaScript, necesita cunostinte de programare;
• Animatiile Flash – ofera posibilitatea de a realiza efecte sofisticate, insa din pacate formatul Flash este proprietar. Pentru vizualizare necesita un plug-in. Ca si applet-urile, prezentarile Flash eronat realizate pot conduce la blocarea navigatorului sau la imposibilitatea de a fi incarcate;
• Documentele SMIL – sunt bazate pe macatori, SMIL (Synchronized Multimedia Integration Language) fiind un limbaj XML special conceput pentru realizarea de prezentari sincronizate pe Web. Pentru vizualizare, necesita programe externe (i.e GRiN), iar navigatoarele actuale inca nu ofera suport. O variant SMIL, denumita XHTML+TIME, este totusi implementata de Internet Explorer.

Continutul video. Secventele video pot fi deosebit de utile in anumite situatii, mai ales in cadrul site-urilor educationale sau in intranetul site-urilor de firma. Ca formate video care se pot utiliza pe Web putem mentiona:

• MPEG(Moving Pictures Experts Group) este un format video compresat cu pierderi, fiind suportat de toate platformele. Un format concurent, proprietar Microsoft insa, este ASF;
• AVI este un format specific Windows;
• Real Video reprezinta un format, similar cu Real Audio., pentru difuzarea de continut video in timp real, fiind utilizat cu precadere de posturile de televiziune pe Web. Necesita aplicatia RealOne Player;
• QuickTime poate fi folosit si in cazul filmelor, fiind originar de pe platform Macintosh.

Din pacate, din ratiuni de latime ingusta de banda, formatele multimedia nu au patruns foarte mult in spatiul World-Wide-Web, navigatoarele actuale neoferind decat un suport limitat pentru un continut multimedia bogat, de cele mai multe ori prin intermediul extensiilor (plug-in-urilor). Astfel, pentru a vizualiza un film MPEG sau o prezentare Flash incluse intr-o pagina Web, navigatorul va trebui sa ruleze un plug-in specific.

Deseori absenta plug-in-ului corespunzator unui format neinteles de navigator poate fi frustrant. De asemenea, trebuie sa avem in vedere faptul ca multe dintre platformele multimedia se pot demoda cu usurinta sau pot fi specifice unei platfome particulare.

Inainte de a include continut multimedia in cadrul paginilor Web trebuie sa analizam asteptarile categoriei de vizitatori ai site-ului in cauza si sa gasim raspunsul la intrebarile de mai jos:

• Utilizarea elementelor multimedia va imbunatati perceptia utilizatorilor asupra mesajului dorit a fi transmis prin intermediul site-ului Web?
• Acest mesaj poate fi transmis eficient si intr-un alt mod, fara ajutor multimedia?

De asemenea, va trebui sa luam in calcul costurile suplimentare – captura si procesare audio/video, achizitionarea echipamentelor si programelor – si efortul subsidiar depus de utilizator – timp suplimentar pentru incarcarea paginii, procurarea plug-in-urilor necesare, cerinte hardware si software. De cele mai multe ori trebuie insa oferita ca alternative o varianta text a continutului.

[/et_pb_text][/et_pb_column]
[/et_pb_row]
[/et_pb_section]

Grafica ofera o paleta foarte larga de utilizari, facilitand transmiterea mesajului informatiilor, accentuarea unui punct de vedere si oferirea unei identitati recognoscibile publicatiilor tiparite sau site-urilor Web.

Pentru transmiterea pe Web a informatiilor, grafica poate sa nu fie neaparat necesara, insa ea devine un element vizual important, captand interesul vizitatorilor site-ului dezvoltat. Dupa cum am vazut, grafica reprezinta o componenta deloc de neglijat in cadrul procesului de proiectare a unui site.

Cu toate ca ilustratiile si fotografiile destinate vizualizarii pe Web sunt stocate la rezolutii relativ mici, ele pot fi percepute mult mai bine de retina in comparatie cu variantele lor tiparite, deoarece lumina transmisa de ecranul calculatorului ofera o intensitate cromatica mai accentuate.

Tiparirea color este pretentioasa si necesita fonduri financiare inseminate, in schimb grafica pe Web nu implica nici un efort pentru reprezentarea in culori a informatiilor. Astfel, spatiul World-Wide Web a devenit un mediu prielnic pentru partajarea de fotografii, reproduceri de arta, ilustratiii diverse sau alte tipuri de informatii cu caracter grafic.

Un alt aspect important este folosirea fotografiilor – scanate sau preluate de pe camerele digitale – in locul graficii realizate exclusiv prin metode electronice. Un exemplu tipic de utilizare este in domeniul comertului electronic, in cadrul magazinelor virtuale. Deseori se combina insa fotografia cu grafica electronica – adoptand de exemplu diverse tehnici, precum colajul – pentru a se putea exprima eficient mesajul dorit a fi impartasit vizitatorilor site-ului.

Regula de aur pentru includerea fotografiilor in cadrul designului site-ului Web este gasirea celui mai potrivit element grafic, in acord cu tema propusa. In general, fotografiile cu cea mai mare utilitate sunt cele care descriu produsele prezentate de site, deoarece vizitatorul va fi convins ca acestea exista in realitate si nu doar pe ecran. Astfel, fotografia contribuie la credibilitatea site-ului respectiv.

De cele mai multe ori, site-urile de firma includ una sau mai multe fotografii, eventual prelucrate la nivel profesionist, ale produselor/serviciilor puse la dispozitie. Acest demers are un deosebit impact psihologic, inducand sentimente de incredere, satisfactie sau bucurie, fiind similar celui din publicitatea clasica. Anumite fotografii pot sugera metaforic anumite calitati si caracteristici ale profilului companiei sau ale personalitatii celui care detine site-ul: stabilitate, flexibilitate, ambitie, calm etc.

Trebuie, de asemenea, sa tinem seama de plasarea fotografiilor in cadrul site-ului si de integrarea acestora in designul general asa cum am mai spus, va fi necesara asigurarea consistentei si echilibrului visual.

In vederea completarii cu elemente de grafica a continutului textual al site-ului Web trebuie sa tinem seama de urmatoarele aspecte.

Utilizarea ilustratiilor de calitate. Numeroase site-uri Web folosesc elemente grafice imprumutate, copiate sau apartinand colectiilor, gratuite sau nu, de grafica (de genul celor oferite de unele editoare profesioniste incluse in suitele de Office – e.g. Open Office – , de programele de proiectare Web sau de site-uri dedicate graficii). Astfel, se asista la o uniformitate grafica, multe site-uri incluzand aceleasi elemente grafice (pictograme, butoane de navigare, sigle etc.) vechi, uneori chiar demodate. Un alt aspect important este cel estetic, multe dintre aceste imagini – luate deseori fara discernamant de pe Web- fiind pur si simplu improprii utilizarii intr-un anumit context, in cadrul unei pagini particulare. De asemenea, trebuie sa tinem cont ca anumite fisiere grafice sunt proprietatea unei companii sau persoane, asa incat nu pot fi refolosite fara permisiune.

Improvizatia, facilul, uneori chiar prostul gust nu pot intra in definitia unui produs de calitate, iar un site Web trebuie sa aspire la acest calificativ – calitatea.

In general, exceptand cazul in care dorim sa fim acuzati de amatorism, nu este indicat sa includem o imagine animata care sa indice vizitatorilor adresa la care pot sa ne trimita mesaje. Nu trebuie sa populam meniul de navigare cu simboluri neadecvate – metafore nepotrivite care nu vor avea succesul scontat.

De asemenea, atasand fiecarui cuvant-cheie cate o imagine considerata sugestiva, vizitatorul ar putea avea impresia ca ii oferim prea mult explicatii vizuale, ceea ce poate conduce la redundanta. De cele mai multe ori, in aceste situatii credibilitatea proiectantului Web va avea de suferit.

Solutia cea mai buna este utilizarea de elemente grafice noi, originale. Acestea pot fi cumparate de la companii specializate sau pot fi realizate de proiectantul Web. Multe informatii grafice trebuie convertite din diverse alte formate in GIF, JPEG sau PNG in functie de natura ilustratiei sau de contextual utilizarii. De cele mai multe ori se pot opera si alte actiuni precum scalarea, ajustarea culorilor sau aplicarea unor efecte grafice (e.g.: incetosarea imaginii). Toate acestea trebuie realizate la nivel profesionist, folosind aplicatii specializate. Recomandam Photoshop- software commercial – si GIMP – aplicatie gratuita.

Anumite ilustratii trebuie realizate folosind programe vectoriale, de exemplu Adobe Illustrator pentru Windows sau Mac si Dia si XFig pentru Linux/Unix, fiind convertite ulterior in formate destinate Web-ului. Pentru imagini veridice tridimensionale se pot utiliza aplicatii – Bryce, Maya sau 3D Studio Max – ori lumi virtuale modelate in VRML. De asemenea, in unele situatii va trebui sa recurgem la scanarea fotografiilor sau la fotografierea directa utilizand camere digitale.

Reamintim faptul ca ilustratiile nu trebuie folosite intr-un mod neunitar din punctual de vedere al formei, al pozitionarii sau al culorilor utilizate.

Minimizarea timpului de incarcare. Trebuie sa retinem ca succesul unei pagini Web rezida in timpul scurt de incarcare a continutului acesteia. Astfel, in primul rand, elementele grafice trebuie sa fie de dimensiuni reduse si sa fie utilizate cu moderatie. Folosind un program de optimizare pentru vizualizarea pe Web a imaginilor, ca de exemplu Adobe ImageReady, dimensiunea fisierelor poate scadea foarte mult. Un astfel de utilitar poate, printre altele, reduce numarul de culori din tabela CLUT a fisierelor GIF sau ajusta gradul de compresie a fisierelor JPEG.

De asemenea, va trebui inclus obligatoriu atributul alt pentru fiecare element, astfel incat vizitatorii sa poata parcurge informatiile textuale alternative in locul celor grafice, inca neincarcate in intregime.

Timpul de incarcare poate fi redus(aparent) si daca precizam dimensiunile imaginilor prin folosirea atributelor Width si Height, specificand astfel latimea si, respectiv, inaltimea continutului grafic. In acest mod, navigatorul poate rezerva inca de la incarcarea documentului HTML spatiul necesar fiecarei imagini, nu dupa transferul tuturor fisierelor. Aceste atribute nu trebuie insa folosite pentru a indica navigatorului sa redimensioneze imaginile, deoarece dimensiunea initiala a fisierelor grafice va ramane neschimbata, timpul de incarcare fiind acelasi. Utilizarea atributelor width si height este valabila si pentru tabele sau in cazul oricaror elemente pentru care se poate preciza dimensiunea (i.e. “object” utilizat in includerea de fisiere multimedia).

Putem micsora timpul de incarcare renuntand la imaginile de fundal de dimensiuni mari (cum ar fi, de exemplu, cele de peste 5Kb). Ideal, imaginile de fundal ar trebui eliminate complet. La fel, se poate renunta la utilizarea de fisiere GIF animate care au dimensiuni mult mai mari decat cele statice.

O alta strategie care poate fi aplicata paginilor cuprinzand colectii de imagini (e.g. : galerii de fotografii sau reproduceri de arta) este aceea de a realiza variante de dimensiuni reduse pentru fiecare imagine (thumbnail) si de a crea o pagina suplimentara pentru vizualizarea la dimensiuni mai mari a imaginii dorite.

Imaginile vor putea fi reprezentate color in diferite formate grafice. Astfel, de-a lungul timpului au existat diverse formate de fisiere dintre care se pot aminti:

• Windows Bitmap (BMP) originar in mediile Windows, poate avea doua forme: compresata sau necompresata, putand suporta imagini color pe 24biti/pixel.
• Encapsulated PostScript (EPS) este un format conceput de Adobe, subset al limbajului de descriere Postscript. Ofera suport atat pentru imaginile raster, cat si pentru cele vectoriale. Fisierele EPS pot fi utilizate pentru listarea de calitate a imaginilor la o imprimanta compatibila Post script si pot fi de tip ASCII – include o descriere textuala a imaginii (atat pentru imprimanta, cat si pentru monitor) – sau de tip binar – comenzile de desenare sunt substituite de coduri numerice. Unul dintre dezavantajele majore este legat de absenta comprimarii.
• Tagged Image File Format (TIFF) a fost dezvoltat de compania Aldus ca standard pentru imaginile scanate, folosit ulterior pentru schimbul de informatii grafice intre aplicatii si platforme eterogene. Se utilizeaza pentru imagini de calitate, in vederea tiparirii.
• PICT/PICT2 se adreseaza aplicatiilor grafice de pe platformele Apple Macintosh, putand stoca imagini bitmap si vectoriale. Se ofera adancimi de culoare de 8 si 24 de biti. Imaginile stocate in acest format pot fi vizualizate de programul QuickTime.

Pentru Web, formatele consecrate de reprezentare a imaginilor sunt:

Graphic Interchange Format (GIF) – dezvoltat de Compuserve ca metoda de transfer prin retea a fisierelor compresate, este un format de tip raster cu compresie fara pierderi. Se regaseste in doua forme : GIF87a si GIF89a, fiind suportat de o varietate de sisteme. Din pacate, metoda de decodificare este relativ lenta si nu se ofera decat o adancime de culoare de 8 biti – se foloseste metoda indexata de memorare a informatiilor de culoare. Avand doar 256 de culori la dispozitie, fisierele in format GGIF pot fi folosite la stocarea textelor, diagramelor, schemelor sau altor imagini incluzand putine culori. De exemplu, se vor putea memora pictograme, afise publicitare (banner-e), scheme alb-negru etc.

Avantajele formatului GIF sunt:

• Realizarea de animatii – un singur fisier poate contine mai multe imagini afisate in diverse momente de timp;
• Transparenta – una dintre culorile din tabela CLUT poate fi considerata a fi transparenta, orice aparitie a ei fiind inlocuita de culorile fundalului pe care este suprapusa imaginea. Transparenta ofera avantaje in ceea ce priveste refolosirea unor imagini in diverse contexte, fara a ne interesa culoarea fundalului, indeosebi cand reprezentam forme nerectangulare.

Din pacate nu se ofera transparenta selectiva : daca fixam o culoare ca fiind transparenta trebuie sa avem grija ca acea culoare sa nu fie folosita in imagine decat drept culoare de fundal, in caz contrar putand aparea efecte vizuale nadorite;

• Intreteserea – un fisier GIF conventional la momentul incarcarii este reprezentat linie cu linie, pornind in partea superioara a imaginii pe care o contine. Prin tehnica intreteserii (interlacing) se ofera insa posibilitatea ca in timpul incarcarii utilizatorului sa-i fie oferita aceeasi imagine la rezolutii progresiv mai bune. Initial, un GIF intretesut va fi vazut la o rezolutie inferioara, iar pe masura incarcarii va furniza in mod gradual mai multe detalii privitoare la imagine pana la rezolutia maxima. Astfel, vizitatorilor li se vor oferi indicii in legatura cu imaginea respectiva chiar in cursul incarcarii. Un fisier GIF intretesut va necesita acelasi timp de incarcare ca si unul obisnuit.

De asemenea, formatul GIF89a fata de GIF87a permite includerea de comentarii privitoare la creatorul imaginii, afisarea unor linii de text sau controlarea modulului de disparitie a unui anumit cadru inainte de afisarea urmatorului, in cazul GIF-urilor animate.

In general, pentru Web nu se foloseste o paleta de 256 de culori, ci una compusa numai din 216 – asa-numitele culori sigure (safe colors). Aceasta paleta cromatica include culorile care pot fi afisate fara modificari atat de monitoarele Macintosh cat si de cele ale calculatoarelor personale compatibile IMB.

Un aspect de care trebuie sa tinem cont este “scalarea” cromatica a unei imagini continand un numar mare de culori la cele maxim 256 de culori permise in formatul GIF. Modalitatile de ajustare a pierderilor cromatice poarta numele de dithering. Astfel, culorile care nu pot fi reprezentate vor fi “simulate” prin juxtapunerea unor culori care sa ofere vizual o culoare apropiata de cea initiala.

Adobe Photoshop ofera mai multe moduri de a realiza acesata actiune:

• Prin difuzie (diffudion dithering)– urmarid o imbinare naturala a culorilor;
• Prin intermediul unor modele (pattern dithering) – culorile sunt dispuse conform unor modele geometrice;
• Prin zgomot (noise dithering) – nu se urmareste o arie de tranzitie de la o culoare la alta, ci se amesteca la nivel global culorile.

Exista o multitudine de programe pentru vizualizarea si procesarea fisierelor GIF. Putem enumera Irfan View, GIF Master, GIF Contruction Set sau GIMP. Pentru prelucrarea profesionista si optimizarea fisierelor GIF (e.g. : reducerea paletei CLUT sau interpolarea culorilor), se recomanda utilizarea aplicatiilor Adobe Photoshop si Adobe ImageReady.

Joint Photographic Experts Group (JPEG) – ofera un mecanism standardizat de compresie a imaginilor cu tonuri continue (de exemplu fotografii), color sau in tonuri de gri, dezvoltat de experti fotografi. Spre deosebire de GIF, formatul JPEG este un format grafic cu pierderi, fiind conceput sa exploateze limitele cunoscute ale ochiului uman : schimbarile mici de culoare sunt percepute cu o acuratete mai scazuta decat modificarile de stralucire. Astfel, imaginile JPEG sunt destinate a fi private de oameni si nu analizate intr-o maniera computerizata, deoarece in urma decompresiei nu va mai rezulta imaginea originala.

Formatul JPEG permite stocarea informatiilor de culoare pe 24 biti/pixel (16 milioane de culori) adancimea de culoare True Color.

O proprietate folositoare este aceea ca formatul JPEG suporta mai multe grade de pierdere (reducere), in functie de parametrii de compresare utilizati. O reducere accentuate va avea drept consecinte o calitate slaba a imaginii si o dimensiune mult mai redusa a fisierului (exista cazuri de micsorare de pana la 100 de ori a dimensiunii fisierului). Un alt aspect important se refera la faptul ca decodoarele JPEG pot folosi aproximari (cu un grad mai ridicat de inexactitate) in vederea accelerarii procesului de decodificare a imaginii. Trebuie avuta in vedere o balanta echilibrata intre calitatea imaginilor JPEG si dimensiunea fisierelor rezultate. De cele mai multe ori, la rate mari de compresie apar efecte nedorite – asa-numitul zgomot (noise)-, in special daca sunt memorate in format GPEG grafice, scheme sau imagini generate de programe vectoriale si rasterizate ulterior. In astfel de cazuri, formatele GIF sau PNG sunt de preferat.

Si formatul JPEG permite utilizarea intrateserii, dar in acest context fisierele se numesc progresive. Detaliile imaginii se imbogatesc progresiv cu incarcarea fisierului, putand exista pana la 5 niveluri de detaliere. De obicei, afisarea fisierelor JPEG progresive necesita mai mult timp decat afisarea celor obisnuite. Alte formate inrudite cu JPEG sunt JFIF (JPEG File Interchange Format) si JPEG 2000. Putem, de asemenea, nota faptul ca tehnicile de compresie JPEG se regasesc si in cadrul standardului video MPEG (Motion Picture Experts Group). Deoarece filmele contin atat imagini cat si sunet, formatul MPEG le poate comprima pe ambele. Un format Web popular derivate din MPEG si utilizat pentru compresia audio este formatul MP3.

Portable Network Graphics (PNG) este un format relativ nou aparut, fiind dezvoltat special pentru Web de catre un grup independent de experti. Combina avantajele formatelor GIF si JPEG, astfel incat fisierele PNG suporta transparenta oferita de GIF si adancimea mare de culoare, facilitate oferita initial numai de JPG. Mai mult, fisierele PNG sunt compresate fara pierderi, deci pot fi memorate orice tipuri de imagini, pornind de la ilustratii si pictograme pana la fotografii sau imagini de sinteza. De asemenea, se ofera posibilitatea de control in – maniera graduala – al transparentei imaginilor, spre deosebire de GIF, algoritmii de compresie si decompresie sunt disponibili gratuit, PNG fiind un standard deschis. Din acest punct de vedere, PNG este denumit PNG is Not GIF, aluzie la celebrul GNU – GNU is Not Unix.

Din punct de vedere al lungimii, fisierele PNG sunt mai voluminoase, deoarece informatiile grafice nu sunt compresate cu pierderi asa cum se intampla in cazul formatului JPEG. Exceptie face situatia cand se salveaza in format PNG indexat o imagine in tonuri de gri (gray scale), care va ocupa mult mai putin spatiu decat daca ar fi stocat in format GIF. Astfel, imaginile mici (e.g. : butoanele sau pictogramele) pot fi memorate ca fisiere PNG, pentru a evita problemele compresiei cu pierderi si a accelera incarcarea paginii Web.

Formatul PNG este suportat de navigatoarele Web actuale, incepand cu versiunile 4 ale Netscape Navigator si Internet Explorer. De asemenea, aplicatiile de prelucrare grafica sunt capabile sa proceseze fisierele PNG.

Wireless Bitmap (WBMP) – reprezinta unicul format grafic acceptat in lumea comunicatiilor fara fir (wireless). Imaginile vor fi reprezentate uzual alb-negru, iar adancimea de culoare poate varia de la 1 pana la 8 biti/pixel. De cele mai multe ori, dimensiunile imaginilor care se doresc stocate in formatul WBMP trebuie sa fie reduse (i.e. 96×80) pentru a putea fi vizualizate pe ecranele telefoanelor mobile sau ale altor dispositive fara fir.

Ca editoare grafice WBMP se pot mentiona WAPDraw, WAP Pictures si Adobe Photoshop.

Scalable Vector Graphics (SVG) – este singurul format vectorial destinat Web-ului, fiind standardizat de consortiul Web. Astfel, orice informatie grafica vectoriala se doreste a fi stocata in formatul SVG pentru a putea fi usor modificata ulterior sau pentru a extrage diverse meta-informatii despre imaginea respectiva, lucru imposibil de realizat in cazul formatelor de tip raster. SVG se bazeaza pe XML, in prezent existand un singur navigator Web capabil sa vizualizeze imagini salvate in acest format –Amaya.

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.

Designul paginilor Web este mai mult o chestiune de a echilibra puterea de asociere a legaturilor hypertext si abilitatea de a adauga elemente grafice si, eventual, animatii. Unele pagini de start sunt similare copertelor de carti sau de reviste. Ideea este de a atrage utilizatorul prin intermediul unei combinatii atente de descrieri textuale si elemente grafice interesante legate de subiectul abordat.

Cel mai eficient design pentru utilizatorii obisnuiti ai Internetului tinde sa utilizeze interfete ingrijite avand preponderent informatii text si elemente grafice de dimensiuni relativ reduse. Aceste pagini se vor incarca rapid si vor avea totusi un impact vizual substantial.

Trebuie sa tinem seama ca dimensiunile ecranului monitorului sunt de obicei mai mici decat cele ale unei pagini tiparite. Chiar daca paginile Web si documentele conventionale prezinta asemanari grafice, functionale si editoriale, ecranul computerului – care este primul loc de furnizare a informatiei prezente pe Web – nu se poate asemana deloc cu o pagina tiparita pe hartie.

Autorii de grafica electronica destinata site-urilor Web nu trebuie sa uite ca majoritatea utilizatorilor nu pot vizualiza la un moment dat decat 50-75% dintr-o pagina Web obisnuita si numai aproximativ 10% dintre cititori deruleaza pagina pentru a parcurge si continutul din partea inferioara a documentului. O greseala des intalnita este aceea de a insera elemente grafice in locuri care depasesc latimea normal a ecranului la rezolutia de 800×600 – cea mai des utilizata in prezent – sau 1024×768.

Elementele grafice ale paginilor Web nu trebuie sa fie mai mari de 535 de pixeli latime si 670 de pixeli inaltime; in caz contrar, imaginea va fi prea larga pentru a putea fi tiparita pe o foaie de format A4.

Utilizarea caroiajului

Asa cum un desenator tehnic foloseste hartia milimetrica pentru a realiza planse impecabile, la fel proiectantul unei pagini Web poate recurge la metoda caroiajului (grid-ului). Consecventa si posibilitatea de anticipare sunt atribute esentiale pentru un sistem de informatii bine proiectat, ajutand utilizatorii sa identifice originea si relatiile paginilor Web si furnizand un acces usor de anticipat la elementele de interfata. Caroiajul – utilizat si pentru proiectarea publicatiilor tiparite – este folosit si in realizarea documentelor electronice, disponibile online, unde relatia spatiala dintre elemente de pe ecran se modifica in mod constant ca raspuns la actiunile utilizatorului si la activitatea intreprinsa de sistem.

Cand sunt utilizate intr-o maniera inadecvata, in mod inconsecvent, elementele grafice si textuale ale paginilor Web pot genera confuzii, fara a oferi nici o ierarhie vizuala in functie de importanta. Acest nefericit efect de “pantaloni de clovn” determina un nivel scazut al utilizarii si lizibilitatii continutului, la fel ca in cazul paginilor tiparite, redactate neingrijit. Din contra, un caroiaj atent organizat, implementat consecvent in cadrul unui set de pagini, va ajuta utilizatorii sa gaseasca rapid informatiile dorite si va mari increderea cititorului ca foloseste o colectie de informatii judicios organizate.

Desigur, nu exista un sistem unic de organizare bazata pe caroiaj a informatiilor dintr-o pagina.

• In primul rand trebuie sa analizam care ar putea fi caroiajul de baza pentru toate paginile site-ului : locul continutului textual – titluri, subtitluri, textul tehnoredactat -, pozitionarea elementelor grafice cu rol in focalizarea atentiei (e.g.: ornamentatii grafice si ilustratii), aranjamentul legaturilor navigationale etc. Pentru aceasta trebuie colectate exemple representative de text si componente grafice (fotografii scanate, imagini de sinteza sau prelucrate electronic, ilustratii, pictograme si altele);
• Urmatoarea etapa este analiza diverselor modalitati de aranjare a informatiilor in pagina. Pentru proiectele Web complexe aceasta etapa ar putea fi reiterate deoarece este dificil de stabilit ca prima solutie este cea optima, modeland cel mai bine interactiunea dintre utilizator si pagina Web. Deseori, se realizeaza mai bine interactiunea dintre utilizator si pagina Web. Deseori, se realizeaza – manual sau computerizat – diverse schite ale aranjamentului elementelor Web;
• Scopul principal care trebuie urmarit este acela de a stabili o prezentare (layout) consistenta si logica a continutului destinat a fi prezentat pe ecran ceea ce va permite apoi atasarea de text si de alte informatii grafice/multimedia pentru fiecare pagina in parte, fara a mai realiza de fiecare data o analiza a site-ului de aranjare. Rezumand, proiectantul Web trebuie sa imagineze un sablon ferm de prezentare vizuala a continutului. Acest sablon, utilizand tehnicile caroiajului, va trebui utilizat pentru toate paginile dintr-un site sau dintr-un sub-site, in caz contrar designul global va avea de suferit, consecinta majora fiind distragerea vizitatorilor.

Desigur, pentru un anumit site putem sa ne inspiram din designul folosit in altul. Acest lucru se poate realiza optim prin analizarea caroiajului utilizat.

Anteturi si subsoluri de pagina

Trebuie sa reamintim faptul ca procesul de transfer al continutului documentelor de la serverul Web spre navigator necesita un anumit timp, astfel incat pagina isi construieste gradual impactul grapfic. Cea mai buna masura a eficientei designului unei pagini este data de numarul optiunilor disponibile utilizatorului in cei cativa centimetri din antetul acelei pagini. Incluzand in antetul paginii elemente grafice de mari dimensiuni, avand drept consecinta intarzierea incarcarii continutului propriu-zis, nu vom face decat sa determinam vizitatorul sa paraseasca site-ul si sa se indrepte spre adresele altor site-uri, mai usor de parcurs.

Astfel, trebuie sa gandim in termeni de ecrane de informatie si nu de pagini deoarece, dupa cum am vazut, Web-ul este un mediu special de interactiune. Cele mai bune solutii de proiectare adopta in cadrul antetului paginii o combinatie echilibrata de elemente grafice cu legaturi spre alte documente. O tehnica des folosita este cea a imaginilor senzitive (image maps), care insa trebuie dublate de legaturi text prezente in subsolul aceleasi pagini.

In ceea ce priveste subsolul paginii Web, acesta va contine informatii referitoare la originea si data ultimei actualizari a continutului. Desigur, aceste informatii nu sunt atat de importante pentru a fi plasate in antetul documentului, dar ele trebuie obligatoriu sa apara in subsol. De cele mai multe ori, subsolul va include si un meniu de legaturi navigationale de genul Pagina urmatoare, Pagina anterioara, La inceputul paginii, Inapoi la prima pagina etc. pentru site-ul unui magazin de comert electronic putem include o parte dintre legaturi cu Urmatorul produs ,Precedentul produs si Lista tuturor produselor.

Unele din sfaturile care pot fi aplicate in proiectarea si tehnoredactarea materialelor tiparite pot fi folositoare si in contextul designului Web:

• Aspectul aerisit al paginii poate fi dat si de stabilirea unor margini suficient de mari si de adaugarea de spatii intre anteturi si subsoluri de pagina si textul adiacent. De altfel, spatiile albe pot contribui foarte mult la realizarea unui design profesionist;
• Liniile lungi de text trebuie inlocuite cu mai multe coloane – maxim 3-4. Aceste coloane trebuie spatiate corespunzator;
• Se poate utliliza, de asemenea, diverse chenare (borders) pentru incadrarea unor zone din pagina – de exemplu, combinatii de linii orizontale si verticale (rules) sau casete de text (definite prin tabele sau proprietati CSS).

Designul continutului

Aspect tipografice ale continutului text

Acelasi text (adica aceeasi informatie) poate fi vizualizat intr-o multitudine de forme. O vizualizare diferita va avea drept consecinta un impact diferit asupra cititorului.

Unul dintre aspectele care trebuie luate in consideratie este cel al contrastului vizual dintre blocurile de text si zonele inconjuratoare ale acestora. Ochiul si mintea vizitatorului sunt atrase de contrastul ferm si de formele distincte oferite de o pagina Web. O pagina ocupata exclusiv de informatiile text dense nu va fi perceputa decat ca o imensa pata cenusie, lipsita de orice urma de contrast vizual. Uniformitatea excesiva nu va atrage atentia utilizatorilor. La fel, daca toate propozitiile sunt scrise cu caractere italic ori aldine (ingrosate), vizitatorul nu va mai percepe care informatie este cu adevarat importanta pentru el.

Punctul-cheie este economia de mijloace. Folosind fara discernamant zeci de proprietati CSS aplicate asupra continutului unei pagini Web, nu vom obtine decat un “vacarm” vizual, in care fiecare element este tratat ca fiind solist intr-o “ orchestra” a formei si continutului.

Utilizarea majusculelor

In ceea ce priveste aspectul vizual al textului, trebuie in primul rand sa avem in vedere faptul ca oamenii citesc in principal prin recunoasterea formei generale a cuvintelor, nu prin analizarea fiecarei litere in parte. Scrierea intregului text cu majuscule va conduce la dificultati in parcurgerea acestuia, deoarece cuvintele compuse exclusiv din litere majuscule formeaza dreptunghiuri monotone care ofera un contrast mai putin accentuat decat formele determinate de alternanta dintre majuscule si minuscule. Titlurile scrise doar cu majuscule ocupa mai mult spatiu decat aceleasi titluri avand in componenta combinatii de minuscule si majuscule. De asemenea, folosirea inutila a majusculelor poate crea confuzii. Asadar, trebuie sa evitam utilizarea majusculelor in situatiile cand nu sunt strict necesare.

Dimensiunea

Marimea corpului de litera folosit conteaza foarte mult in asigurarea lizibilitatii continutului. Trebuie evitate liniile lungi, scrise cu caractere de dimensiuni reduse, deoarece ele necesita numeroase deplasari ale ochilor de la stanga la dreapta, fapt care oboseste cititorul. De asemenea, nu se vor scrie linii scurte compuse din caractere de dimensiuni mari, pentru ca ele de obicei sunt caracterizate de o spatiere neregulata a cuvintelor. De cele mai multe ori, designul Web impune utilizarea unor corpuri de litera de dimensiuni reduse – uzual, de la 8 pana la 12 puncte tipografice (pt). Titlurile pot fi scrise cu caractere de la 14 sau 16 pt. Daca folosim proprietatea CSS font-size vom utiliza o unitate de masura relativa la corpul de litera curent si nu una absoluta, deoarece dimensiunea fontului depinde de rezolutie si monitor. De exemplu, pe platforma XWindow (din Unix) corpurile de litera vor parea mai mici decat sub Windows.

Tipul corpului de litera

Tipurile corpului de litera se refera la aspectul visual al reprezentarilor simbolurilor (litere, cifre, semne speciale) pe ecran sau la imprimanta. Aceasta reprezentare poarta numele de corp de litera sau de font.

Desi numarul de caractere este acelasi (de exemplu, codul ASCII classic include maximum 128 de caractere care pot fi codificate intern prin numere), formele reprezentarii acestora pot fi teoretic infinite. Corpurile de litera se impart in familii, iar fiecare tip de font se bucura de diverse proprietati (i.e. marime, spatiere intre caractere sau culoare) sau de maniere de afisare (fonturi ingrosate – bold, italic sau oblice). Deosebirea dintre fonturile oblice si cele italic este aceea ca in cazul fonturilor italic sunt redesenate toate formele prin care se reprezinta un anumit caracter – succesiunea caracterelor italic sugereaza scrisul de mana. Cele oblice (denumite si inclinate) provin din forme obisnuite care sunt inclinate cu un anumit grad.

Familiile importante de corpuri de litera sunt:

• Cu serife (e.g.:Times, Garamond, Bodoni, Minion Web) – fiecare reprezentare (glyph) include adaugiri sau tuse finale care contribuie la o buna lizibilitate in cazul tiparirii, mai ales prin contrastul puternic dintre fonturile obisnuite si cele ingrosate;
• Fara serife – sans-serif (e.g.: Arial, Helvetica, Verdana, Univers) – formele caracterelor nu include serife, neavand nici un fel de adaugari suplimentare, fiind indicate pentru afisarea pe ecran. Ofera un contrast mai putin intens intre corpurile de litera obisnuite si cele aldine;
• Cursive (e.g.: Zapf-Chancery, Caflisch Script, Adobe Poetica, Zurich Calligrafic) – ofera o reprezentare a corpurilor de litera sugerand scrisul de mana sau cu pana, formele caracterelor putand fi partial sau complet conectate una cu cealalta. Pentru dimensiuni reduse a caracterelor, aceste tipuri de fonturi devin ilizibile;
• Decorative – fantasy (e.g.:Critter, Cottonwood, Star Down etc.) – pot contine reprezentari ale caracterelor sau alte forme asociate fiecarui simbol (i.e. Webdings). Trebuie utilizate cu moderatie;
• Monospatiate – monospace(e.g.:Courier, Prestige, Everson Mono) – se bucura de proprietatea ca fiecare reprezentare a unui caracter are aceeasi inaltime si latime, spre deosebire de familiile anterioare care cuprindeau fonturi spatiate proportional (de exemplu, litera “I” are latimea mai mica decat “m” in cazul unui corp de litera spatiat proportional). Deoarece sugereaza prin forma lor masina de scris, fonturile din aceasta categorie sunt folosite pentru afisarea fragmentelor de cod-sursa dintr-un limbaj de programare.

Dupa cum se observa, cele mai potrivite tipuri de fonturi care trebuie utilizate in cadrul paginilor Web sunt cele fara serife. De altfel, majoritatea site-urilor actuale folosesc Arial sau Helvetica.

Gruparea si aranjamentul

Gruparea cuvintelor in cadrul unei linii de text este foarte importanta. La fel, aranjarea pe randuri a textului.

Spatierea

Dupa alegerea corecta a tipului de font si a dimensiunii acestuia, trebuie aleasa spatierea liniilor de text. Acest lucru se realizeaza prin intermediul proprietatii line-spacing, pusa la dispozitie de CSS. O spatiere prea mica va conduce la diminuarea contrastului vizual al paginii, insa nu trebuie sa trecem in extrema cealalta.

Un alt aspect important il reprezinta spatierea dintre paragrafe sau dintre paragrafe si titluri/subtitluri. Folosind proprietatile CSS – e.g. : margin-top si margin-bottom – se poate alege o spatiere precisa, coerenta pentru toate paginile Web ale site-ului.

Alinierea

Asigurarea unei alinieri corecte conduce la un design elegant. Trebuie sa tinem cont de faptul ca alegerea modului de aliniere depinde de:

• Mesajul dorit a fi transmis cititorului – textul aliniat la stanga este considerat a fi mai prietenos, mai putin formal si mai deschis decat cel aliniat complet (justify). Textul aliniat complet , si la stanga si la dreapta, este utilizat pentru a sugera un stil clasic, plin de seriozitate, putand fi folosit incazul cartilor online.
• Lungimea liniilor (coloanelor), textul dispus pe coloane de latime redusa nu trebuie aliniat complet, mai ales in cazul folosirii unor corpuri de litera de dimensiuni mai mari, deoarece conduce la o spatiere inegala intre cuvinte.
• Lizibilitatea, desi nu exista o parere unanim acceptata, se considera ca alinierea la stanga si spatierea unitara a cuvintelor ofera cititorilor mai mult confort la parcurgerea textului fata de textul aliniat complet.

De retinut ca paragrafele sau titlurile de lungimi mari aliniate la dreapta sau centrate sunt mai dificil de parcurs decat cele aliniate la stanga. De asemenea, subtitlurile vor fi centrate doar atunci cand coloanele de text sunt aliniate complet pentru asigurarea unui contrast vizual puternic. Daca textul este aliniat doar la stanga, atunci si subtitlurile se vor alinia tot la stanga. Subtitlurile pot atrage atentia utilizatorului si prin variatii de culoare, spatiere sau dispunere spatiala in cadrul paginii.

Identarea

Pentru a face deosebirea intre anumite zone de text, se poate utiliza indentarea diferita a textului fata de titluri/subtitluri. Aceasta se poate realiza prin intermediul tabelelor de latimi diferite sau cu ajutorul proprietatilor de stil (e.g. : margin-left, margin-right). O alta tehnica folosita este cea a liniilor orizontale sau a chenarelor (se pot utiliza marcatorul „hr” sau setul de proprietati CSS border).

Utilizarea titlurilor si subtitlurilor.

Un design bun al unei pagini Web nu va folosi fara discernamant pictograme, banner-e grafice, fundaluri colorate, ilustratii (clip-art-uri) sau alte ornamentatii. Captarea atentiei vizitatorilor se va face prin utilizarea titlurilor si a subtitlurilor, similar metodei utilizate pentru materialele tiparite. O abordare consistenta a modului de pozitionare, aliniere si afisare a acestora va avea drept consecinte facilitate parcurgerii continutului si usurinta de navigare.

La prima vizita pe pagina, privirea cititorului va baleia doar textul, oprindu-se asupra titlurilor, subtitlurilor si a sumarelor de articole, asadar trebuie sa acordam o atentie speciala acestor elemente ale continutului. Astfel , titlurile si subtitlurile vor trebui sa nu fie vagi, continand cuvinte lipsite se semnificatie sau prea lungi. Titlurile si subtitlurile vor avea un corp de litera diferit, in general fiind caracterizate de un stil care contrasteaza cu aspectul paragrafelor avand informatii de continut.

Titlul paginii. Dupa cum am mai amintit, titlul paginii Web trebuie ales cu grija, numele organizatiei si/sau subiectul tratat de acea pagina fiind obligatorii. Titlul trebuie sa fie suficient de scurt pentru a putea fi parcurs chiar si daca fereastra navigatorului este minimizata.

Un site se poate infatisa vizitatorului nu direct prin intermediul paginii de start, ci printr-o coperta (cover page sau splash page), intr-un mod similar supracopertelor unor publicatii. Copertele de site-uri sunt folosite in diverse scopuri. Frecvent, o coperta de site va include o imagine sau animatie introductiva, oferind putine informatii, dar avand rol de persuasiune, incitand utilizatorul sa viziteze site-ul. Un alt gen de coperte de site este acela care stabileste o atmosfera (look and feel) generala a site-ului. Asemenea coperte de site furnizeaza adesea legaturi catre sectiunile majore ale site-ului, permitand utilizatorilor un acces rapid la subiectele de interes, insa realizand in acelasi timp o privire de ansamblu a site-ului prin folosirea unui numar minim de mijloace. O a treia categorie este cea a copertelor de site furnizand informatii detaliate asupra specificului site-ului, de cele mai multe ori recurgand la o prezentare textuala.

Desigur, in functie de natura si scopul site-ului, va trebui sa decidem daca avem intr-adevar nevoie de o coperta de site si, in caz afirmativ, va trebui sa stabilim tipul ei.

Copertele sunt cele mai controversate elemente ale unui site. Pentru multi vizitatori, copertele de site sunt pur si simplu un motiv de enervare, trebuind sa mai dea inca un click de mouse pana la continutul pe care il cauta. Acesti utilizatori prefera sa le fie prezentat la inceput un index sau o harta a site-ului decat imagini frumoase ori animatii hazlii, dar mari consumatoare de timp. Ideea principala de care trebuie sa tinem cont este necesitatea de a evalua preferintele utilizatorilor si apoi de a alege metoda cea mai potrivita de atragere a acestora.

De asemenea, trebuie sa luam in calcul si functia site-ului. Utilizatorul tipic viziteaza o singura data site-ul sau va reveni destul de des? Un instrument online, ca de exemplu un calendar de evenimente stiintifice ori sportive sau un motor de cautare, nu ar trebui sa aiba o coperta de site pur estetica, deoarece utilizatorii viziteaza site-ul respectiv de mai multe ori pe zi in scopuri exclusiv pragmatice. Pentru un astfel de site, o coperta eleganta – realizata cu dificultate in Flash – , dar nefunctionala, va incomoda utilizatorii, determinandu-i sa aleaga un alt site.

Bineinteles, utilizatorii experimentati care nu vor sa intre “ pe usa din fata” vor putea foarte simplu sa utilizeze de fiecare data adresa unei pagini interne a site-ului – pagina de start sau harta site-ului.

Un site informativ, ca de exemplu unul academic, al unei firme sau unul de interes general ar putea folosi o coperta de site care sa stabileasca o tema de design visual de ansamblu sau o metafora pentru site. Ar putea, de asemenea, sa ofere o scurta explicatie privitoare la scopul site-ului. Acest tip de coperta ar trebui sa raspunda la intrebari ca Unde ma aflu?, Cum este aici?, Cu ce se ocupa aceasta organizatie sau Ce voi gasi intrand in site?

De cele mai multe ori insa, succesul unei coperte de site depinde foarte mult de asteptarile celui care-l viziteaza. Astfel, coperta poate ridica intrebari la care se poate raspunde doar intrand in acel site. Daca vizitam un site dedicat unui poet, vom avea desigur alte asteptari decat atunci cand parcurgem un site prezentand un joc interactiv.

Vizitatorii unui site cu profil artistic nu sunt utilizatori rataciti, ci se afla in cautarea unei experiente, a unei desfatari intelectuale sau a unei dispozitii. O fatada misterioasa, placuta din punct de vedere estetic, ar putea avea in acest caz mari sanse de a atrage un asemenea tip de vizitatori.

Prea multe imagini introductive intr-un site de comert electronic vor fi suparatoare, iar prea putine slash-uri intr-un site de divertisment vor plictisi utilizatorii. Primele impresii conteaza cel mai mult, mai ales cand exista concurenta.

Proiectarea paginilor Web individuale

Cautam coerenta, ordine si credibilitate in toate sursele de informare, indiferent daca ele sunt documente traditionale, tiparite, informatii radio/tv sau pagini Web.

Organizarea spatiala a elementelor grafice si textuale care intra in componenta unei pagini Web poate atrage atentia utilizatorului, punand in evidenta informatiile. Mai mult, acest lucru conduce la interactiuni mai eficiente si mai placute intre vizitatori si site-ul in cauza.

Pentru a implini acest deziderat va trebui sa tinem cont de logica vizuala a elementelor care compun paginile Web proiectate. Conform spuselor lui Edmund Carpenter, “omul este cel mai mare constructor si utilizator de modele. Indiferent de situatia sa, el nu poate trai intr-o lume a haosului”. Astfel, in conceperea documentelor Web vom recurge la diverse modele de design pe care le vom detalia in continuare.

Designul visual

Designul grafic trebuie sa ofere un echilibru optim intre senzatia vizuala si informatia grafica sau textuala dintr-o pagina. Fara impactul vizual al formei, culorii si contrastului, paginile sunt plictisitoare si nu vor da motive vizitatorului sa le parcurga continutul. Documentele text dense, fara contrastul si confortul vizual oferite de grafica si de o atenta asezare in pagina sunt mult mai dificil de citit, mai ales in cazul monitoarelor avand o rezolutie scazuta. Similar, documentele Web care utilizeaza intens grafica risca sa dezamageasca utilizatorul, oferind un slab echilibru intre senzatia vizuala, informatia textuala si legaturile hypermedia existente.

Designul este contrans si de limitarile latimii de banda a retelelor utilizate, de relativ saracie de mijloace a limbajului HTML si de rezolutia actuala a majoritatii ecranelor calculatoarelor. Vocabularul designului grafic realizat cu ajutorul marcatorilor HTML este limitat mai ales de absenta unor elemente exacte de pozitionare, similar celor tipografice. In acest sens, un sprijin notabil vine din partea foilor de stiluri in cascada. Posibilitatea de a folosi legaturi hypertext conduce la o putere functionala fara precedent si la o flexibilitate in proiectarea de structura hypermedia interactive. Limbajele de tip script puse la dispozitie de navigatoarele actuale imbogatesc gradul de expresivitate a documentelor HTML dinamice, iar prezentarile multimedia bazate pe Flash sau applet-uri Java pot asigura o experienta audiovizuala asemenatoare celei oferite de televiziune. Astfel, ,,folosirea crescanda a imaginilor animate in numeroase pagini de pe Web, inclusive a celor insotite de sunet, il transforma pe designerul Web intr-un producator de televiziune de facto” (Paul Levinson).

Continuarea vizuala si functionala in organizarea site-ului Web, designul grafic si caracteristicile corpurilor de litere alese sunt esentiale pentru a convinge publicul ca site-ul ofera informatia la zi, exacta si folositoare, inducand sentimentul de incredere. O abordare atenta, sistematica, a proiectarii paginilor Web poate simplifica navigarea, poate reduce erorile si poate ajuta vizitatorii sa profite din plin de informatiile si de caracteristicile site-ului Web.

Una dintre greselile frecvente in designul paginilor Web este lipsa simplitatii si ignorarea vitezei de incarcare. Meniurile grafice incarcate, folosind diverse imagini animate la plasarea cursorului mouse-ului peste o legatura, sunt eficiente mai ales pentru utilizarea in cadrul unui intranet dintr-un mediu educational sau de afaceri, dar pun la incercare rabdarea utilizatorilor care acceseaza Web-ul cu ajutorul unui modem.

Web-ul ii atrage pe multi vizitatori cu promisiunea unei comunicari grafice. Ecranele sau paginile de intampinare (splash page) multimedia sau paginile de start exclusiv grafice pot avea succes atata vreme cat intelegem sa facem compromisuri intre viteza de incarcare si continutul vizual bogat, tinand cont bineinteles de tipul audientei si de specificul site-ului.

Trebuie sa fim constienti si de faptul ca pretentiile utilizatorilor au crescut fata de cele din urma cu 5-6 ani. Tehnologiile Web au evoluat extraordinar, mijloacele de exprimare sunt tot mai diverse si mai flexibile, echipamentele devin tot mai performante. Totusi, din punct de vedere al rentabilitatii, efectul cumulat al intarzierilor de incarcare a paginilor, cauzate de folosirea inadecvata a imaginilor sau altor documente multimedia de dimensiuni mari ori de greselile de proiectare, poate sa faca nerentabil intranetul unei organizatii sau sa descurajeze vizitatorii unui site de comert electronic.

Daca numarul de accesari ale paginii de start este mult mai mare decat numarul de cereri ale fisierelor grafice folosite in cadrul paginii, atunci putem trage concluzia ca multi vizitatori viziteaza pagina setand navigatorul sa nu afiseze continutul grafic. Daca vizitatorii site-ului nu vor sa vizualizeze imaginile din cauza timpului crescut de incarcare, atunci inseamna ca toata informatia grafica nu ajunge la acestia si deci designul paginii trebuie refacut. O astfel de analiza trebuie realizata pentru fiecare pagina in parte.

Intelegerea mediului

Mediul oferit de spatiul WWW este diferit de cel al mass-media traditionale, in special de mediul tipariturilor. Cititorii iau contact cu Web-ul in doua moduri:

• In primul rand, Web-ul este considerat a fi un mediu direct unde paginile sunt parcurse in maniera online, fiind puternic imersiv. Prin imersiune nu se ofera o explicatie a conceptelor care trebuie intelese, ci se realizeaza o plasare a cititorului intr-un mediu in care acesta este constrans sa renunte la contextele familiare, fiind obligat sa foloseasca tocmai conceptele pe care trebuie sa le invete. Ca argumente ca imersiunea este un fenomen real pot fi date expresiile deja consecrate “a naviga pe Web” sau “a face surfing pe Web”. Experienta online devine bilaterala, permitand cititorilor sa contribuie prin intermediul e-mail-ului sau a serviciilor conversationale (carti de oaspeti, videoconferinte etc.) la continutul unor site-uri Web;
• In al doilea rand, web-ul poate fi privit ca fiind un mediu de “aprovizionare”, depozit oferind informatii care sunt salvate local sau tiparite pe hartie in vederea consultarii ulterioare. Din acest punct de vedere, spatiul World-Wide-Web se apropie mai mult de mediile traditionale tiparite, dar numai partial deoarece o animatie interactiva nu poate fi surprinsa intr-un instantaneu static tiparit.

Avand in vedere cele spuse mai sus, deciziile de design sunt determinate de modul in care cititorii vor folosi site-ul nostru. La sfarsitul anilor ’70, cunoscutul teoretician al mass-media Marshall McLuhan afirma urmatoarele: “ Utilizatorul este continutul”. Asadar, va trebui realizat un design conform asteptarilor vizitatorilor.

Documentele care vor fi citite online trebuie sa fie concise, si sa contina elemente grafice atent reglate chiar si pentru o latime de banda modesta. Cititorilor nu trebuie sa le subestimam inteligenta sau capacitatea de navigare prin site. Este exagerat sa consideram ca utilizatorii nu vor citi decat una sau doua fraze dintr-un text sau nu vor fi capabili sa parcurga decat propozitii scurte. Articolele sau stirile puse la dispozitie pe Web nu trebuie sa fie excesiv de succinte. Trebuie doar sa fim constienti ca de obicei cititorii vor dori sa tipareasca paginile de dimensiuni mai mari sau prezentarile mai complexe pentru a le parcurge mai usor offline.

Ierarhia vizuala

Primul pas pe care trebuie sa-l faca proiectantul Web este cel de a stabili o ierarhie vizuala consistenta, dar si puternica, in care elementele importante sa fie accentuate si continutul sa fie organizat logic, intr-un mod previzibil. Designul grafic trebuie sa structureze informatiile prin folosirea instrumentelor de interfata, practicilor tipografice si a ilustratiilor pentru a conduce ochii cititorului prin pagina. Cititorii vizualizeaza paginile mai intai ca fiind mase mari de forma si culoare, avand prevazute elemente de prim-plan care contrasteaza cu cele de fundal. Numai dupa aceea ei incep sa recunoasca informatii specifice, mai intai din elementele grafice prezente si apoi incepand sa analizeze mediul – relativ mai dificil – reprezentat de text si sa citeasca enunturile individuale.

Echilibrul grafic de ansamblu si organizarea paginii sunt foarte importante pentru a atrage atentia cititorului asupra prezentarii continutului. O pagina anosta abundand de text masiv va conduce la respingere, asemenea unei mase de gri nediferentiat. La fel, un document dominat de un design slab al elementelor grafice si al textului nu va captiva utilizatorii sofisticati care cauta un continut plin de substanta si eleganta. Ceea ce doreste este asigurarea unui echilibru potrivit menit a atrage ochiul prin intermediul unui contrast vizual corespunzator.

Proportia si potrivirea la continut sunt cuvintele-cheie pentru decizii de design de succes, dar aceste aspecte pot fi determinate doar in contextul scopului general de dezvoltare a site-ului Web, de natura informatiilor disponibile si, cel mai important, de asteptarile utilizatorilor.

Directionarea atentiei

De obicei, utilizatorii citesc de la stanga la dreapta, pornind din partea superioara a paginii, exceptie facand comunitati precum cele mozaica, musulmana sau chineza.

Aceasta axa vizuala fundamental domina cele mai multe principii de proiectare si este baza designului grafic conventional pentru majoritatea publicatiilor tiparite – de la reviste pana la afise si de la coperte de carti pana la invitatii. De aceea, aceasta zona este dedicata afisarii siglei companiei sau a meniului orizontal de navigare.

In ceea ce priveste rolul culorilor in focalizarea atentiei, nuantele de pastel, delicate, care se gasesc de obicei in natura sunt cea mai buna alegere pentru fundal sau pentru elemente minore, mai ales daca suntem incepatori in domeniul graficii sau al selectiei de culori. Nu trebuie sa utilizam culori primare – rosu, galben sau albastru – saturate (intense), decat in zonele care se doresc a fi special accentuate, insa acest lucru trebuie realizat cu moderatie. Textul trebuie intotdeauna sa contrasteze cu oricare culoare a fundalului. Daca intentionam sa realizam o schema grafica sofisticata, atunci va trebui sa apelam la un designer de grafica profesionist. In cazul in care nu suntem noi insine graficieni, cea mai buna solutie este sa fim conservatori, sa pastram totul intr-un stil conventional si simplu, fara a utiliza contraste cromatice – deranjante pentru majoritatea vizitatorilor.

Grafica abuziva

Elementele grafice, de asemenea, nu trebuie sa distraga atentia cititorului de la continutul propriu-zis al paginii. Trebuie asadar sa fim atenti la ornamentele grafice. Liniile orizontale, pictogramele si alte marcaje vizuale isi au rostul lor, insa trebuie folosite cu atentie, de preferat cat mai rar, pentru a nu avea o interfata pestrita si confuza. Aceeasi observatie se aplica si pentru marimea excesiva a textului dintr-o pagina Web, mai ales in cazul titlurilor de tip “h1” sau “h2”.

Instrumentele de accentuare grafica – accesoriile dintr-o pagina Web, asa cum sunt cerceii in vestimentatia unei femei – sunt puternice si ar trebuie folosite in doze mici pentru a avea un efect maxim. Abuzul utilizarii acestora conduce la asa-numitul efect al “pantalonilor de clovn” – totul este stralucitor si nimic nu este cu adevarat accentuat. Este cazul paginilor care abunda de pictograme, de cele mai multe ori animate, de diferite marimi, culori si forme – pagini care nu exprima absolut nimic.

Asigurarea consistentei

Proiectantul paginii trebuie a adopte un sablon al prezentarii (layout-ului) informatiilor pentru a putea manipula usor informatiile text si elementele grafice, intr-o maniera consistenta. Toate paginile site-ului trebuie sa fie unitare ca design, repetitia in acest caz nefiind plictisitoare, ci oferind site-ului o identitate vizuala consecventa. Aceasta face site-ul sa fie mai usor de tinut minte de catre vizitatori. O abordare consecventa a prezentarii si a mecanismelor de navigare permite cititorilor sa se adapteze rapid la designul site-ului si astfel sa anticipeze localizarea informatiilor dorite si elementele de navigare din fiecare pagina a site-ului.

Odata stabilita o tema grafica pentru site, aceasta va fi folosita in toate paginile compunand acel site. Inconsistenta cromatica sau grafica va conduce la frustrarea vizitatorilor si la scaderea credibilitatii site-ului.

Sigla si meniul de navigare prezentate de pagina de start a site-ului pot stabili tema grafica a intregului site (gama cromatica, pozitionarea pictogramelor si ornamentelor grafice, schema de navigare etc.). Aceasta tema va fi folosita ulterior de toate paginile din acel site, pentru ca utilizatorul sa nu aiba nici o indoiala cu privire la apartenenta unui document individual la site-ul pe care il viziteaza in acel moment.

Trebuie retinut si faptul ca nu e cazul sa ne grabim in a stabili un stil special al infatisarii site-ului. Trebuie sa fim foarte prudenti in a importa, pur si simplu, elemente grafice provenind din alte site-uri sau publicatii tiparite pentru a “decora” paginile. Grafica si stilul de editare a continutului site-ului Web trebuie sa evolueze ca o consecinta naturala a abilitatii noastre de a prelucra si aranja judicios informatiile dorite a fi publicate online.

In cazul unui site avand un numar insemnat de pagini, vor trebui prevazute submeniuri pe care utilizatorul sa le foloseasca pentru a ajunge la informatiile dorite. Lista subiectelor generale din pagina de start va fi astfel continuata in mod firesc cu subteme cu caracter mai specializat, detaliat. Pagina de start nu trebuie incarcata cu un numar apreciabil de legaturi, deoarece va cauza confuzii utilizatorilor, mai ales celor care viziteaza in premiera site-ul.

In consecinta, fiecare submeniu major devine astfel o minipagina de start pentru acea sectiune a site-ului. Pentru informatii detaliate, specializate, utilizatorii frecventi pot fi indreptatiti spre un submeniu. Submeniurile pot fi considerate asadar, din acest punct de vedere, pagini de start alterntive orientate catre grupuri specifice de utilizatori.

Meniul orizontal de navigare. Una dintre cele mai utilizate metode de a asigura navigarea facila prin site este aceea de a include un meniu orizontal de legaturi in partea superioara a fiecarei pagini. Elementele meniului pot fi legaturi semnalate utilizatorilor prin intermediul unor pictograme – folosindu-se metafora butonului – sau a unor ancore textuale. Prezenta constanta, in acelasi loc, a acestui meniu ii va ajuta pe utilizatori in orientarea pe site, asigurand contextual. Elementul selectat la un moment dat in cadrul meniului va trebui afisat in mod diferit. Acest meniu poate cuprinde mai multe niveluri de legaturi.

De retinut ca acest mod de navigare trebuie sa ia in calcul urmatoarele restrictii:

• Numarul de elemente ale unui meniu nu poate depasi valoarea 6, iar in cazuri extreme 8. Desigur, se vor avea in vedere marimea medie a termenilor folositi, marimea fontului si rezolutia la care se proiecteaza site-ul. In cazul in care site-ul este in continua expansiune, s-ar putea ca meniul sa nu mai poata cuprinde noile subiecte aparute de-a lungul timpului;
• Numarul de niveluri ale meniurilor ierarhice este de maxim 2-3. Trebuie sa avem in vedere ca mai multe niveluri vor ocupa mai mult spatiu vertical, ceea ce va conduce la o arie mai mica de afisare a informatiilor propriu-zise.

Un alt aspect important este acela ca toate elementele primului nivel trebuie sa fie vizibile permanent, in timp ce nivelul al doilea va contine seturi alternative de legaturi. Atunci cand se va adauga si al treilea nivel, trebuie sa avem grija sa se poata integra natural si logic in meniu.

Navigarea verticala

O alta solutie ar fi ca anumite legaturi sa fie plasate vertical, fie in partea stanga, fie in partea dreapta a continutului propriu-zis al paginii. Acest lucru se poate realiza prin intermediul tabelelor sau al cadrelor. Navigarea prin site sau fragmente de site se realizeaza de cele mai multe ori prin intermediul unui meniu de legaturi plasat in stanga paginii. In aceasta situatie, pagina este divizata in cel putin doua coloane, prima fiind ocupata de legaturi – disponibile ca text sau butoane/pictograme. Sunt intalnite mai multe forme de organizare a meniului:

• Meniu plat – toate elementele sunt plasate pe un singur nivel, fara a exista vreo ierarhie;
• Meniu expandabil – un anumit element este expandat prin aparitia unui subnivel de legaturi la actionarea elementului;
• Meniu binivel – nivelul al doilea contine legaturile propriu-zise, iar primul nivel are doar rol de grupare logica a legaturilor.

Meniurile verticale plasate in stanga paginii pot prezenta unele dezavantaje. Unul dintre cele mai deranjante tipuri de meniu este cel care contine un numar de legaturi destul de mare, care face ca elementele sa nu incapa, toate in pagina (fie sunt ascunse complet, fie utilizatorul trebuie sa foloseasca barele de navigare). Aceasta situatie poate aparea mai ales in cazul meniurilor expandabile.

Fata de meniurile orizontale, cele verticale sunt mai scalabile, numarul de legaturi care pot fi adaugate ulterior fiind mult mai mare.

Meniurile combinate

O a treia strategie de plasare a legaturilor de navigare este cea care le combina pe cele doua prezentate mai sus. Astfel, instrumentele de navigare se vor desfasura atat in plan orizontal in antetul paginii, cat si vertical, in stanga. Meniurile orizontale vor avea deseori doar un nivel, iar cele verticale unul sau maxim doua niveluri. Mai mult, aceasta grupare a elementelor de navigare in coltul stanga-sus al documentului poate conduce la un design mult mai atractiv, folosindu-se, de exemplu, in situatiile in care site-ul este compus din mai multe sub-site-uri relativ independente.

O alta maniera de a asigura navigarea prin site este aceea de a dispersa elementele de navigare pe intreaga suprafata a paginii sau chiar in cadrul continutului propriu-zis. In acest mod se poate reduce complexitatea meniurilor de navigare.

Navigarea matriceala

Pentru site-urile complexe, s-ar putea ca asigurarea unei navigari optime sa nu se poata realiza foarte usor. De exemplu, in cadrul unui site al unei companii care produce imprimante, un driver pentru o anumita imprimanta ar putea fi gasit la sectiunea Produse – fiind atasat paginii descriind modelul imprimantei respective – dar si in cadrul sectiunii Suport. Ambele optiuni de localizare sunt logice, fara ca utilizatorul sa incline asupra uneia particulare.

In astfel de situatii se adopta de obicei o strategie de proiectare matriceala (matrix design). Aceeasi pagina va fi accesibila urmand cai diferite in cadrul ierarhiei de navigare.

In mod ideal , utilizatorul ar trebui sa nu fie constient ca aceeasi informatie este prezenta in locuri diferite, uneori fiind prezentata diferit, dar un sistem de management al continutului site-ului ar trebui sa-l ajute sa aiba acces la aceasta, intr-o maniera cat mai facila. Practica uzuala este aceea de a se concepe doar o singura pagina, accesibila din alte pagini prin intermediul legaturilor incrucisate. Atunci cand un vizitator urmeaza o astfel de legatura, in fapt este transferat in alta unitate logica a site-ului.

Pentru a evita problemele de organizare, daca in cadrul unui site apare necesitatea navigarii matriceale multidimensionale, trebuie sa reconsideram structura site-ului si sa gasim o solutie de navigare mai simpla.

Paginarea informatiilor

Deseori se intampla ca informatiile pe care le dorim sa le includem pe site-ul Web sa aiba dimensiuni considerabile, fara a le putea structura ierarhic. Pentru a putea fi parcurse cu mai multa usurinta si pentru a se asigura o incarcare mai rapida a documentelor, aceste informatii sunt divizate in serii de pagini, fiecare dintre aceste pagini trebuind sa aiba prevazute cel putin butoanele de navigare „Pagina urmatoare” si „Pagina anterioara”. Suplimentar, putem da posibilitatea de a se accesa un fragment de informatie – o pagina particulara – in maniera directa. Instrumentele de navigare vor fi plasate atat la inceputul, cat si la finalul fiecarei pagini. Aceeasi strategie se va aplica si in cazul site-urilor afisand o multitudine de anunturi care trebuie grupate pe pagini pentru a facilita accesul.

De retinut ca paginile Web de dimensiuni mai reduse vor fi, de obicei, pagina de start sau paginile folosind la navigarea prin site, fiind destinate parcurgerii online, deci vizualizarii pe ecran. Aceste pagini vor putea contine elemente grafice sau multimedia mai voluminoase, fiind indicat sa include in jur de 500 de cuvinte/pagina. Aceasta impartire are si avantajul actualizarii punctuale mai eficiente a continutului si a parcurgerii totale a documentului de catre cei interesati.

Documentele de dimensiuni mari vor putea fi utilizate pentru un continut dorit a fi tiparit sau consultat in maniera offline, putand fi astfel mai usor de administrat in timp.

O alta situatie de fragmentare a informatiei este cea in care continutul unei pagini necesita explicatii suplimentare, care vor fi plasate deseori intr-o caseta aditionala (side bar) care poate fi parcursa independent de textul principal. Aceasta strategie este folosita si pentru plasarea afiselor publicitare in cadrul unei pagini.

In continuare vom prezenta un model de navigare in cadrul unui site de comert electronic avand ca mijloc de plata cartea de credit. Paginile dedicate completarii comenzii de livrare a unui produs sau grup de produse vor avea dimensiuni reduse, prezentatnd doar un sigur pas din sirul de pasi care trebuie urmati de client. Acest sir de pasi, de cele mai multe ori, este constituit din:

• Vizualizarea produselor selectate in cosul de cumparaturi;
• Completarea adresei postale de livrare a bunurilor comandate;
• Introducerea informatiilor referitoare la cartea de credit;
• Terminarea comenzii.

Desigur, aceasta va necesita incarcarea mai multor pagini Web pentru intregul proces de comanda, dar va da posibilitatea vizitatorului sa remarce toti pasii intermediari si sa-l anticipeze pe urmatorul din sir.