Machetarea sitului web

Navigare

Internetul, prin chiar natura sa, permite saltul de la o
pagina web la alta, printr-o simpla apasare de buton. Nu
este un proces liniar, cum este de exemplu citirea unei
carti. Desi aceasta flexibilitate constituie un mare
avantaj, realizarea unui sistem de navigare eficient nu este
un lucru usor.
Un continut interesant si o navigare usoara reprezinta cele
doua componente principale ale unui sit bine intocmit. Dar
chiar si cel mai atractiv continut este nefolositor daca nu
este pus in evidenta de un sistem de navigare clar si
consistent.
Nu trebuie sa lasati cititorul sa pescuiasca dupa informatii
sau sa ghiceasca unde ati ascuns ceea ce aveti de oferit.
Trebuie sa-i oferiti tot sprijinul posibil, sa-l ajutati sa
gaseasca rapid si fara ocolisuri informatia dorita.

Meniul de navigare

Meniul este o reprezentare grafica sau de tip text a
continutului si este adesea încorporat in tema generala a
sitului. Meniul principal trebuie sa furnizeze trimiteri
rapide si directe la sectiunile si informatiile disponibile
dintr-un sit web. El va fi realizat intr-o forma practica si
atractiva.
Locul obisnuit pentru plasarea meniului principal este in
partea stanga a ecranului dar el mai poate fi plasat si in
partea dreapta sau în partea superioara a paginii web. De
asemenea, el trebuie repetat pe fiecare pagina exact în
acelasi loc, pentru a nu deruta vizitatorii. Daca pagina web
se deruleaza pe mai mult de doua ecrane, atunci este indicat
ca în josul paginii sa se mai adauge un meniu de navigare
bazat pe legaturi text.

DE RETINUT:

Sectiunile meniului vor fi denumite astfel încat sa ofere o
descriere concisa si sugestiva a paginilor web care vor fi
accesate.

Incercati sa folositi denumiri sugestive, ca de exemplu:
Despre noi, Produsele noastre, Resurse utile.

Cateva dintre schemele de navigare cele mai des întalnite
sunt urmatoarele:

-legaturi text
-harti grafice ( imagemaps )
-butoane de navigare
-meniuri tip lista derulanta ( generate cu Javascript , CGI )
-pagini generate dinamic
-harta sitului ( site map )

Butoane de navigare

Butoanele de navigare adauga un plus de
atractivitate paginilor web. Atata timp cat este adaugat
atributul " ALT " la fiecare buton, ele pot fi folosite ca
mijloc de navigare si de catre persoanele care au
dezactivata optiunea de incarcare a imaginilor. De asemenea,
în textul alternativ puteti sa includeti cuvinte cheie.
Acestea sunt foarte importante atunci cand incepeti
promovarea sitului cu ajutorul motoarelor de cautare.

Incercati sa alegeti o dimensiune optima pentru butoanele de
navigare. Pentru a permite o vizualizare buna, acestea
trebuie sa aiba latim 17117f55r ea cuprinsa între 50 - 80 pixeli si
inaltimea intre 20 - 50 pixeli. De asemenea, fisierul grafic
aferent fiecarui buton de navigare nu trebuie sa fie mai
mare de 4 - 5 Kb pentru a nu creste in mod nejustificat
timpul de incarcare al paginii web.

Butoanele de navigare, ca de altfel si alte imagini grafice,
pot fi create cu ajutorul editoarelor grafice. O idee buna
este sa oferiti o indicatie vizitatorilor cu privire la
locul unde se afla in cadrul sitului web, la un moment dat.
Acest lucru se poate realiza printr-o modificare a
stralucirii butonului sau alegerea unei culori apropiate.

Meniuri tip lista derulanta Aceste meniuri pot fi realizate
cu ajutorul limbajului Javascript sau folosind scripturi
CGI.

Principalele dezavantaje sunt urmatoarele :
1. versiunile mai vechi de browsere nu suporta Javascript
2. daca folositi scripturi CGI trebuie sa alegeti o gazda
web care dispune de un server care suporta scripturile CGI
pe care le-ati creat .
Ca avantaj major mentionam faptul ca ocupa un spatiu minim,
nefiind afisate toate variantele in acelasi timp. Odata ce
va fi accesat acest meniu, va apare o lista cu toate
optiunile posibile. Fiecare optiune reprezinta de fapt o
legatura catre o alta pagina sau sectiune a sitului.


Pagini generate dinamic

Aceasta metoda de navigare se foloseste în siturile web care dispun de
o baza de date. De
exemplu, magazinele online pun la dispozitia utilizatorilor
o functie de cautare. Atunci cand se doreste afisarea
caracteristicilor unui produs, utilizatorul va introduce
cuvantul cheie aferent. In urma cautarii se va genera
dinamic pagina web corespunzatoare produsului respectiv .
Principalul dezavantaj al acestei scheme de navigare este
faptul ca realizarea si întretinerea unui astfel de sit sunt
costisitoare. In plus, este dificila promovarea cu ajutorul
motoarelor de cautare deoarece acestea nu pot urmari
legaturile generate dinamic.

Harta sitului (site map)

De multe ori, începatorii si chiar netsurferii mai versati se pot
incurca atunci cand folosesc un sistem de navigare mai complicat.
De aceea, atunci cand aveti un sit mai amplu, extins pe mai multe
nivele sau categorii este bine sa intocmiti o harta a sitului.
Ea trebuie sa fie clara si logica si in acelasi timp sa afiseze corect
structura sitului. Poate fi realizata sub forma de tabel, arbore de
legaturi, etc.

Aceasta harta este utila si atunci cand se doreste cautarea
rapida a unei informatii sau a unui subiect, fara a fi
nevoie sa se navigheze prin tot situl. De aceea, este
recomandabil sa furnizati in meniul principal o legatura
directa catre pagina web care contine harta sitului.

DE RETINUT:

Cheia pentru o navigare usoara este o buna organizare a
informatiei.

De aceea, incercati sa organizati situl pe categorii si
subcategorii de subiecte. Cu cat situl va fi mai mare si mai
complex, cu atat va fi mai dificila sarcina organizarii
acestuia si realizarii unui sistem de navigare consistent.

Exemplu de sit web

Asa cum se poate observa, continutul sitului web ( peste 220
de pagini ) este structurat, pe orizontala, in sase
categorii principale. Acestea sunt impartite, la randul lor
pe nivele sau subcategorii ( maxim 5 ). Deoarece am dorit ca
fiecare vizitator sa poata naviga cu usurinta prin paginile
acestui sit web si in acelasi timp sa poata gasi usor
informatiile de care are nevoie, am cautat sa realizez un
sistem de navigare cat mai eficient si logic. Pentru acest
lucru am folosit, in fiecare pagina, nu mai putin decat sase
scheme de navigare.

In coloana din dreapta am realizat un meniu principal cu
legaturi text. Acesta poate fi accesat de orice vizitator,
indiferent de versiunea browserului pe care-l foloseste si
chiar în conditiile dezactivarii optiunii de încarcare a
imaginilor.
In acest meniu am introdus atat legaturi catre paginile
principale ale sitului cat si legaturi catre paginile
aferente sectiunii respective. In acest mod, vizitatorul
poate sa sara la paginile din sectiunea respectiva sau, daca
nu-l intereseaza, sa citeasca pagina principala dintr-o alta
sectiune a sitului.

In partea de sus a paginii am inserat o harta grafica cu
legaturi directe catre paginile principale ale fiecarei
sectiuni a sitului.

In partea de jos a fiecarei pagini am inserat doua simboluri
de navigare (sageti stanga / dreapta). Dand clic pe aceste
sageti se pot vizualiza paginile anterioare sau urmatoare.

Pentru ca vizitatorul sa nu mai fie nevoit sa deruleze in
sus pagina, pentru a accesa meniul principal sau harta
grafica am mai introdus, in finalul fiecarei pagini web, un
meniu de navigare suplimentar. Acesta este alcatuit numai
din legaturi text catre paginile principale ale sitului.

Deoarece situl are o structura complexa, impartita pe mai
multe nivele, am realizat si o pagina web continand o harta
a sitului. Pentru ca harta sa poata fi gasita usor am pus o
legatura directa catre aceasta in fiecare meniu de navigare.
Aceasta harta este utila si atunci cand se doreste cautarea
rapida a unei informatii sau a unui subiect , fara a fi
nevoie sa se navigheze prin tot situl. Ea trebuie sa fie
clara si logica si in acelasi timp sa afiseze corect
structura sitului. Mai poate fi realizata sub forma de
tabel, arbore de legaturi ,etc.

În final, am inserat un motor de cautare în cadrul sitului.
Folosind aceasta facilitate, un vizitator mai grabit poate
sa scrie unul sau doua cuvinte în fereastra de cautare si va
primi o lista cu paginile web în care se gasesc cuvintele
respective

In afara de legaturile interne folosite in meniurile
de navigare am utilizat si alte legaturi in continutul
propriu-zis al paginii web. Acestea pot fi, la randul lor,
legaturi interne sau externe.
Am folosit legaturi interne catre alte pagini ale sitului
web, de fiecare data cand am considerat ca este necesar sa
fac o trimitere la pagina respectiva sau pentru a oferi un
plus de informatie.

Este foarte important locul unde se plaseaza legaturile in
interiorul propozitiilor. De aceea, am cautat sa construiesc
propozitii obisnuite si apoi am plasat ancora legaturii pe
cel mai relevant cuvant ( sau grup de cuvinte ) din
propozitia respectiva.
De exemplu, in propozitia urmatoare nu s-a utilizat o
formulare adecvata :

" Apasati aici pentru a obtine mai multe informatii despre
motoarele de cautare si directoare . "

In locul acestei formulari, mi s-a parut mult mai natural
sa folosesc urmatoarea constructie verbala :

" Promovarea eficienta a unui sit se poate face cu motoare
de cautare si directoare " .

Legaturile externe le-am plasat in subsolul paginii deoarece
am dorit ca vizitatorii sa citeasca intreg continutul
paginii si apoi, in cazul in care doresc, sa paraseasca
acest sit web.

Pentru o buna navigare , am pus o legatura catre pagina
principala in toate paginile componente. Acest lucru este
deosebit de util deoarece vizitatorii sau robotii motoarelor
de cautare pot ajunge , urmand o legatura externa , la o
pagina interioara. De aici ei trebuie sa ajunga, fara
dificultate, la pagina principala pentru a se edifica asupra
scopului si continutului sitului .

Tabele

Tabelele sunt folosite atat pentru o machetare
eficienta cat si pentru a face mai atractive diversele
elemente componente ale unei pagini web. Tabelele permit o
împartire a paginii în sectiuni si o pozitionare precisa a
textului sau imaginilor in interiorul paginii.

Sa presupunem ca vreti sa realizati o pagina web care sa
contina un meniu de navigare in partea stanga si continutul
( text, imagini,etc. ) in partea dreapta. Aceasta machetare
se poate realiza si cu ajutorul cadrelor, dar folosirea unui
tabel este mai indicata deoarece aveti mai mult control
asupra elementelor.

Astfel, puteti imparti pagina în doua coloane, cu meniul de
navigare în stanga si continutul propriu-zis în dreapta,
textul fiind aliniat la stanga. Puteti crea margini sau
borduri de diferite dimensiuni si culori. De asemenea, se
poate încapsula continutul în celulele tabelului pentru a
permite alinierea textului si a limita lungimea liniilor.

Deoarece bordura tabelelor nu este totdeauna necesara si
uneori poate avea un aspect neplacut, se poate renunta la ea
prin folosirea atributului " BORDER = 0 " .
Atunci cand folositi tabele, puteti sa setati o latime fixa,
in pixeli, sau o latime relativa la dimensiunea ecranului,
în procente. De exemplu, daca folositi atributul WIDTH=80% ,
continutul va fi afisat pe 80% din latimea ecranului. In
acest caz, afisarea continutului se adapteaza mai usor la
diferitele tipuri de monitoare sau rezolutii ale acestora.
Setarea latimii în procente se face mai ales la paginile
unde exista mult text si unde nu este necesara o formatare
precisa.

Pe de alta parte, tabelele definite cu o latime fixa in
pixeli vor ramane neschimbate.
In acest caz, daca se foloseste o rezolutie marita va apare
un spatiu alb, în afara tabelului care va da uneori o
imagine neplacuta. In schimb, setarea unei latimi fixe va
permite un control ridicat al printarii, realizand o
tiparire fara întreruperi laterale ale paginii web
respective.


Folosirea imaginilor in tabele

Cand intr-una din celulele tabelului aveti inserata o
imagine, înscrierea dimensiunilor acesteia are o mare
importanta ( atributele "WIDTH" si " HEIGHT" ). Aceasta
deoarece exista posibilitatea ca browserul, dupa ce
construieste structura tabelului, sa constate ca
dimensiunile imaginii sunt prea mari pentru a completa o
celula. În acest caz, browserul va reface pagina pe care o
incarca, iar cititorul va vedea o pagina care apare si apoi
dispare .

Mai trebuie luat in considerare si faptul ca atunci cand
exista un tabel intr-o pagina web, browserul asteapta sa
incarce tot continutul tabelului si abia dupa aceea îl
afiseaza cititorului. Folosirea uneia sau mai multor imagini
de dimensiuni mari intr-un tabel poate duce la cresterea
exagerata a timpului de incarcare (uneori peste 1 minut).
De aceea, este recomandat sa puneti aceste imagini in afara
tabelului principal sau in tabele separate, pentru ca
browserul sa le încarce concomitent.

Atunci cand proiectati o pagina web cu tabele, este bine sa
evitati pe cat posibil folosirea de tabele imbricate ( un
tabel in interiorul altuia ). În afara aspectului
neatragator, pot apare si erori care sunt greu de depistat .
Pentru a obtine o punere in pagina eficienta, încercati sa
experimentati mai multe tipuri de tabele cu latimi, margini
si borduri diferite. In final, alegeti solutia care ofera o
flexibilitate maxima si creeaza efectul pe care l-ati dorit.

Mai multe informatii interesante despre tabele puteti gasi
vizitand urmatoarele situri :
https://www.webhelp.org/tables/
https://www.killersites.com/tutorial/
https://www.bagism.com/tablemaker/
https://www.pagetutor.com/pagetutor/tables/index.html
https://www.botany.hawaii.edu/tables/
https://www.december.com/html/demo/tablehi.html
https://www.pageresource.com/html/table3.htm
https://www.htmlgoodies.com/tutors/tbl.html

In final, ceea ce conteaza este mesajul pe care reusiti sa-l
transmiteti. Acest lucru puteti sa-l faceti folosind o
pagina simpla, cadre, tabele sau combinatii ale acestora.
Important este sa realizati un sit web atragator, indiferent
de modul de aranjare in pagina .

Cadre ( frames )

Cadrele va permit sa afisati doua sau mai multe pagini web,
in acelasi timp, prin impartirea ecranului in mai multe
sectiuni independente. Initial, cadrele au fost o inovatie
a firmei Netscape. Pe parcurs, ele au fost folosite din ce
in ce mai mult si in prezent sunt acceptate de majoritatea
browserelor.
Ele reprezinta o metoda controversata de machetare a unei
pagini web. In randul webdesignerilor exista sustinatori si
adversari ai folosirii cadrelor , ca o solutie eficienta de
aranjare in pagina.

De aceea, inainte de a va hotara, analizati modul cum
doriti sa organizati si sa structurati paginile web.
Folosirea cadrelor prezinta atat avantaje cat si
dezavantaje.

Avantajele folosirii cadrelor

Cadrele se pot folosi cu succes atunci cand continutul
sitului se modifica frecvent.
In acest caz, un cadru va fi folosit pentru meniul de
navigare iar in celalalt cadru va apare continutul
propriu-zis. Cand doriti modificarea sau actualizarea
continutului, este suficient sa modificati numai un fisier.
Nu este nevoie sa schimbati fiecare pagina a sitului pentru
a actualiza legaturile. Pentru cititori navigarea va fi
usoara, deoarece ei vor sti în orice moment unde se afla
legaturile si cum este structurat situl.
Folosirea cadrelor permite utilizatorilor sa aleaga ce vor
sa vada.

De exemplu, sa presupunem ca vreti sa prezentati un film in pagina web. În loc sa folositi o singura pagina, care se va incarca foarte greu din cauza dimensiunii mari a fisierului, puteti sa folositi numai o legatura în pagina principala. Daca urmeaza aceasta legatura, vizitatorul va fi trimis
intr-un alt cadru unde va putea urmari filmul, bineinteles
dupa încarcarea fisierului respectiv .

Dezavantajele folosirii cadrelor

Multi webmasteri nu recomanda folosirea cadrelor datorita
urmatoarelor dezavantaje:

-flexibilitate limitata si posibila confuzie a cititorilor
-aparitia bordurilor care reduc spatiul afisat pe ecran
-browserele mai vechi ( NN 1.0 , IE 1.0 , IE 2.0 ) nu recunosc siturile care contin cadre
-timpul de incarcare al paginilor este mai mare
-uneori se pot obtine rezultate neasteptate. Astfel, daca folositi butonul " Back " veti reveni in interiorul cadrului in loc sa vedeti pagina precedenta .
-puteti intampina dificultati atunci cand vreti sa salvati sau sa tipariti o pagina care contine cadre.Cand salvati o pagina web care v-a interesat aveti doua optiuni :
-sa salvati toata pagina
-sa salvati numai un anumit cadru folosind comanda "Save frame as " .

-cand vreti sa faceti un semn de carte ( bookmark ) la o pagina care contine cadre , veti vedea ca veti face semn numai pe pagina index (cea care contine setarile- frameset si nu pe pagina cu continutul propriu-zis

Daca totusi va hotarati sa realizati machetarea paginii cu ajutorul cadrelor, pentru evitarea acestor neplaceri, puteti sa realizati si o versiune alternativa a sitului, fara cadre. Pentru aceasta folositi marcajul NOFRAMES. Pe pagina principala veti pune o legatura explicita catre aceasta versiune.

Alte informatii referitoare la folosirea cadrelor in machetarea paginilor web le puteti obtine daca accesati urmatoarele pagini web :
https://www.builder.cnet.com/Authoring/Frames/index.htm
https://www.pagetutor.com/pagetutor/frames/index.html
https://www.manda.com/frames/
https://www.home.netscape.com/assist/net_sites/frames.html
https://www.sharkysoft.com/tutorials/frames/
https://www.htmlhelp.com/design/frames/

Exemplu de sit web

În machetarea sitului web https://www.afaceri.net am optat pentru folosirea tabelelor.
Astfel, am impartit spatiul paginii in doua tabele principale, a caror latime am stabilit-o în procente (100%).
Acest lucru conduce la vizualizarea paginii pe intreaga latime a ecranului, indiferent de rezolutia acestuia.
În tabelul superior am inserat logo-ul, harta grafica si o imagine.
Tabelul inferior, l-am împartit în alte doua tabele. În partea stanga a acestuia am inclus sistemul de navigare, chestionarul, lista cu produse oferite gratuit si contoarele de trafic ( Trafic si Sitemeter).

Tabelul din partea dreapta l-am impartit, la randul lui, în alte trei randuri. Randul de sus l-am folosit pentru inserarea continutului propriu-zis al paginii web, în randul din mijloc am introdus sagetile de navigare (înainte-înapoi) iar în ultimul rand am introdus legaturile text catre paginile de nivel 1 ale sitului si informatiile legate de copyright.

Pentru titluri si subtitluri am folosit randuri separate,setate la o latime de 100%. Fundalul randurilor si culoarea textului am stabilit-o ulterior.

Pentru ca textul sa nu inceapa direct din marginea celulei tabelului, am folosit acolo unde a fost cazul, atributul CELLPADDING = "5", care introduce un spatiu de 5 pixeli in interiorul celulei. Pentru ca marginea tabelelor sa nu poata fi vizualizata, bordura am setat-o la valoarea zero folosind atributul BORDER = "0".

O machetare similara se poate realiza si cu ajutorul cadrelor. Dupa parerea mea, folosirea unui tabel este mult mai eficienta deoarece puteti avea mai mult control asupra elementelor paginii web.