PC Magazine Romania

AgoraNews

PC Magazine Ro

NET Report

Ginfo

agora ON line

PC Concrete

Liste de discuţii

Cartea de oaspeţi

Mesaje

Agora

Clic aici

IPRO - PC Magazine Romania, 2002
Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO

To frame or not to frame?

Emanuel Baruch

Aceasta este una din cele mai des întâlnite întrebări în designul web, adică utilizarea sau neutilizarea frame-urilor (a cadrelor) în paginile web. Am auzit de nenumărate ori opinii potrivit cărora, dacă un sit conţine frame-uri, înseamnă că este prost conceput. Ba chiar, folosirea lor face parte din cele aşa-zise "10 greşeli fundamentale în web design". Autorii de pagini web, precum şi vizitatorii acestora, fie că privesc cadrele cu simpatie, pentru flexibilitatea deosebită pe care o oferă, fie că le desfiinţează, din varii motive.

Nu mi-am propus să promovez sau să condamn folosirea acestei tehnici, ci mai degrabă să vedem care sunt avantajele pe care le aduc frame-urile, atunci când sunt utilizate corect, precum şi incontestabilele dezavantaje pe care le implică.

Cum?

Mai întâi să ne oprim asupra tehnicii în sine, adică ce sunt de fapt aceste frame-uri. Ele au fost indroduse prima dată în 1995 de către Netscape prin lansarea lui Navigator 2.0. Consorţiul World Wide Web (W3C, www.w3.org), după o mulţime de lupte, le-a inclus în standarul HTML 4.0 (www.w3.org/TR/html4/). Cadrele permit împărţirea ferestrei browser-ului în segmente care afişează fiecare câte o pagină web diferită. Această împărţire se poate face orizontal şi vertical. Ceea ce face frame-urile atât de atractive (pentru unii) este faptul că pot interacţiona între ele. Astfel, prin executarea unui clic pe un link dintr-un anumit segment al ferestrei browser-ului se poate controla conţinutul şi comportamentul altuia sau al întregii ferestre.
Pentru a "sparge" fereastra browser-ului în cadre, trebuie mai întâi să definim un set de cadre (frameset), astfel:

Aşadar, tag-ul frameset trebuie introdus după antetul documentului (<head>), în locul corpului (<body>). Nu mai folosiţi şi tag-ul body, deorece acesta nu va fi interpretat.

Cel mai puternic argument împotriva frame-urilor l-a costituit faptul că nu toate browserele sunt compatibile cu această tehnică. Această problemă a fost semi-rezolvată prin introducerea tag-ului <noframes> astfel încât să poată fi prezentat conţinut alternativ pentru cei care nu pot vedea seturile de cadre. El va funcţiona după următorul raţionament: un program de navigare care suportă cadrele va recunoaşte această comandă şi nu va afişa conţinutului ei, iar browserele mai vechi, necunoscând nici frame-urile şi nici noframes, vor ignora aceste comenzi şi vor afişa numai ceea ce se află între <noframes> şi </noframes>. Între timp însă, veţi mai găsi cu greu programe de navigare care să nu suporte cadrele. Merită aici menţionat că anumite motoare de căutare vor indexa un fişier care conţine un frameset după ceea ce este inclus în tag-ul noframes, pe lângă titlul fişierului şi eventualele tag-uri meta pe care le poate conţine.

După cum spuneam, fereastra browser-ului poate fi împărţită în cadre orizontale şi verticale. În exemplul de mai sus (<frameset cols="25%,75%">), vom obţine două coloane: primul cadru va ocupa 25% din ecran, iar al doilea 75%). Dacă am fi dorit 3 cadre egale, am fi procedat astfel:

În cazul împărţirii în cadre verticale, în loc de cols vom folosi rows. Lăţimea, respectiv înălţimea unui cadru poate fi specificată în procente, aşa cum reiese din exemplele prezentate deja, sau în pixeli:

În acest exemplu, rezultatul va fi următorul: un rând de 100 pixeli, un rând de 200 pixeli şi un rând care acoperă restul spaţiului rămas în fereastra browser-ului (a cărui înălţime este redată de *). În definirea unui set de cadre se pot combina aceste metode de exprimare a înălţimii şi lăţimii. O altă caracteristică a frame-urilor este faptul că un tag frameset poate include unul sau mai multe seturi de cadre între hotarele sale, rezultatul fiind obţinerea unor structuri mai complexe.

Aţi observat că fiecare tag frame este însoţit de un atribut name. Acesta este necesar pentru a identifica un frame dintr-un set, atunci când dorim ca acestea să poată comunica între ele. Câteva sfaturi pentru alegerea acestor nume: nu lăsaţi frame-uri nedenumite, aveţi grijă la scrierea cu majuscule, deoarece în acest caz "coloana1" nu va fi acelaşi lucru cu "COLOANA1" şi alegeţi nume cât mai sugestive, pentru a vă uşura munca.

Înainte de a dezbate comunicarea între cadre trebuie luat în seamă faptul că frame-urile pot fi utilizate şi intercalat. Aceasta înseamnă că sursa unui frame poate fi la rândul ei un set de cadre. Mai există controversatul tag iframe. Acesta va introduce un cadru în interiorul unei pagini HTML normale, fără a mai fi nevoie de definiera setului de cadre. Acest frame "inline" se va comporta ca şi o imagine, dar are toate caracteristicile unui cadru:

<frameset cols="150,*">
<frame src="coloana1.html" name="coloana1">
<frame src="cadre.html" name="cadre">
</frameset>
unde fişierul cadre.html va conţine:

Să folosim acest set intercalat de cadre pentru a vedea cum funţionează comunicarea între ele. Metoda principală este folosirea atributului target cu numele cadrului-destinaţie.

Dacă fişierul coloana1.html va conţine o hiperlegătură <a href="link.html" target="rand2">legatura</a> fişierul link.html se va încărca în cadrul "rand2" în locul fişierului randul2.html. În cazul în care hiperlegătura ar avea ca ţintă target="cadre", link.html se va încărca în locul frameset-ului cadre.html.
Atributul target are 4 valori speciale, fiind nume rezervate care nu pot fi folosite cu atributul name al unui frame. Acestea sunt:

_self - deschide fişierul în cadrul curent
_blank - deschide fişierul într-o fereastra nouă a browser-ului.
_parent - deschide fişierul în frameset-ul care conţine cadrul curent
_top - deschide fişierul în fereastra originală a browser-ului, fără cadre

Atunci când nu folosiţi cadre intercalate _top şi _parent vor avea practic acelaşi efect. Valoarea implicită a lui target este _self, aşa că dacă nu specificaţi acest atribut, link-urile vor fi deschise automat în cadrul curent. În exemplul nostru, o hiper-legătură <a href="link.html" target="_parent">legatura</a> inclusă în randul1.html, randul2.html sau randul3.html va face ca noul fişier să se deschidă în locul frameset-ului care împarte partea din dreapta a ferestrei browser-ului în 3 rânduri.

Atributul target poate fi inclus şi în tag-ul base (care apare în antetul fişierului) astfel:
<base " target="rand2">

O astfel de comandă va face ca toate link-urile din fişierul care o include să fie deschise potrivit valorii atributului target. Atenţie, valoare target-ului din base va fi ignorată dacă şi link-ul include un target (diferit de cel din base), acesta din urmă fiind cel luat in considerare de browser. Ce se întâmplă însă dacă precizăm ca target un cadru care nu există? Browser-ul va deschide o nouă fereastră (ca şi în cazul folosirii lui _blank) căreia îi va atribui numele cadrului inexistent, această nouă fereastră putând fi ulterior apelată la fel ca orice alt frame. Aţi observat desigur ca frameset-urile pe care le-am definit sunt clar delimitate de linii iar acestea pot fi redimensionate cu ajutorul mouse-ului. Există bineînţeles posibilitatea de a controla modul în care apar şi se comportă seturile de cadre.

Pentru a elimina liniile despărţitoare folosiţi următoarele comenzi:
<frameset rows="100,*" frameborder=0 border=0> ... </frameset>
Border nu face parte din standarul HTML 4.0. Folosiţi-l însă, deoarece anumite browser-e (în special Netscape) interpretează numai această comandă. Nu vă recomand să utilizaţi alte valori pentru acest atribut, deoarece rezultatele vor fi foarte diferite de la browser, respectiv sistem de operare la altul. Oricum, aceste margini generate de browser nu dau un aspect prea plăcut unui sit şi de aceea nici nu le veţi întâlni pe majoritatea paginilor web care folosesc cadrele. Atunci când nu au marginile setate pe zero, cadrele pot fi redimensionate de utilizator. Pentru a împiedica acest lucru, introduceţi atributul noresize în fiecare frame:

Dacă nu aţi renunţat la marginile cadrelor, puteţi să stabiliţi culoarea acestora cu ajutorul atributului bordercolor:

<frameset rows="100,*" bordercolor="#000000"> ... </frameset>
O altă proprietate a cadrelor care poate fi controlată este apariţia barei de scrolling. Atunci când conţinutul unui fişier nu încape într-un cadru, vor apărea aceste bare, orizontale sau/şi verticale. Pentru a le elimina, introduceţi atributul scrolling="no" în tag-ul frame. Desigur, dacă valoarea ar fi yes, vor apărea întotdeauna bare de scrolling, chiar dacă ele sunt sau nu active. Folosiţi însă cu precauţie acest atribut, deoarece unii utilizatori s-ar putea să aibă monitoare mai puţin performante, respectiv care funţionează doar la rezoluţii mai reduse. Pentru aceştia, dimensiunile relative ale cadrelor vor fi probabil mai mici, iar barele de scrolling vor aparea în mod inevitabil. Dacă le eliminaţi prin aceată comandă, vizitatorii nu vor putea vedea întreg conţinutul paginii voastre. Cel mai des, barele de scrolling sunt setate pe zero în cadrele care conţin meniul de navigare al paginii web. Înainte de a face acest lucru, testaţi modul în care arată pagina pe diferite browsere şi pe diferite rezoluţii ale ecranului.

Probabil că v-aţi pus întrebarea, dacă pot fi modificate simultan două sau mai multe cadre dintr-un set. Doar cu ajutorul limbajului HTML aceasta nu este posibil, ci prin utilizarea suplimentară a unui JavaScript. Introduceţi următorul script în antetul unui fişier-cadru.

<a href = "javascript:twoframes(sursa1.html','frame1', 'sursa2.html','frame2')">link</a>,
unde frame1 şi frame2 reprezintă numele frame-urilor care vor fi schimbate, iar sursa1.html şi sursa2.html fişierele care vor fi încărcate. Acest script poate fi adaptat şi pentru controlul simultan al mai multor cadre. După cum observaţi, cadrele nu sunt deloc dificil de generat şi controlat, odată ce le stăpânim. Rămâne doar a le folosi numai atunci când sunt cu adevărat necesare şi sporesc funcţionalitatea sitului vostru. Însă, cum ne dăm seama dacă avem sau nu nevoie de cadre? Neexistând o "reţetă" general - valabilă, haideţi să analizăm avantajele şi dezavantajele utilizării lor.

De ce da?

Să începem cu avantajele. În primul rând, un sit cu cadre este mult mai uşor de actualizat şi întreţinut. Iată un exemplu: avem o pagină web cu 2 cadre, şi anume meniul de navigare şi conţinutul. Atunci când dorim să adăugăm conţinut, vom introduce link-uri în meniu spre fişierele cele noi, iar actualizarea paginii este gata. Asemănător se procedează la eliminarea conţinutului vechi. Dacă nu am fi folosit cadrele şi am fi avut pe fiecare pagină HTML meniul de navigare, ar fi trebuit să operăm aceste schimbări în toate paginile noastre iar volumul de muncă ar fi fost semnificativ mai mare.

Împărţirea ferestrei în cadre duce la o navigare mai rapidă şi mai uşoară, deoarece utilizatorul nu va mai trebui să aştepte de fiecare dată încărcarea meniului, de exemplu. Bineînţeles, aceasta cu condiţia ca meniul de navigare să fie bine proiectat şi realizat. În general, un meniu de navigare este bine realizat dacă este intuitiv pentru vizitator şi dacă oferă posibilitatea navigării prin sit fără a fi necesară utilizarea butoanelor (Back, Forward) browser-ului.
Nu ar mai fi de spus decât că, în general, siturile cu frame-uri (repet, bine realizate) sunt mai flexibile şi mai accesibile din punct de vedere al navigării iar cadrele oferă posibilitatea obţinerii unor efecte deosebite.

De ce nu?

Utilizarea frame-urilor implică însă şi o serie de dezavantaje. Cel mai mare impact asupra fiabilităţii sitului îl are indexarea anevoioasă a frameset-urilor la motoarele de căutare. După cum probabil ştiţi, un motor de căutare va înregistra o pagină în baza sa de date după titlul fişierului, după tag-urile meta şi după textul care apare în ea. Dacă paginile HTML sunt părţi ale unui set de cadre, motoarele de căutare nu vor ţine cont de aceasta iar utilizatorii vor găsi, de exemplu, numai cadrul-conţinut al unui sit, neavând acces la meniul de navigare. O soluţie la această problemă ar fi includerea în fiecare pagină HTML a unui buton "home" (cu target="_top") care să-i permită vizitatorului venit de la un motor de căutare accesul la restul conţinutului sitului. Tot în acest context trebuie ţinut cont de faptul că motoarele de căutare încep indexarea unui sit de la pagina implicită a acestiua (în majoritatea cazurilor index.html). Dacă acest fişier este însă un set de cadre, motorul de căutare s-ar putea să aibă probleme. De aceea, vă recomand să nu folosiţi frame-uri pe prima pagină a unui sit.

Un alt dezavantaj îl reprezintă faptul că o pagină dintr-un set de cadre nu va putea fi adăugată de vizitator în lista sa cu book-markuri. Efectuând comanda "Add to favorites", browser-ul va memora URL-ul frameset-ului şi nu al subpaginii pe care se află, iar vizitatorul se va putea întoarce cu greu la pagina respectivă. Aceeaşi problemă apare şi când caută o pagină vizitată anterior în History-ul browser-ului.
Dacă utilizatorul doreşte să tipărească o pagină dintr-un set de cadre, este foarte probabil ca rezultatul să nu fie cel aşteptat deoarece browser-ul va transmite imprimantei pagina activă din frameset. O soluţie posibilă ar fi introducerea în fiecare pagină a unui buton care va determina numai tipărirea ei, şi nu a întregului set de cadre:

<a href="#" onClick=top.numeframe.print() >tipărire</a>

Deci?

În concluzie, flexibilitatea frame-urilor este compensată de îngrădirea opţiunilor pe care le are în mod normal vizitatorul unui sit. Trebuie să analizaţi cu atenţie conţinutul care va apărea pe pagina voastră de web, pentru a stabili dacă e adecvată folosirea frame-urilor în proiectarea meniului de navigare şi al sitului în general. Cât de des va fi actualizată, ce cantităţi noi de informaţii vor fi publicate ulterior şi cu ce frecveţă. De asemenea, gândiţi-vă cine vor fi vizitatorii paginii şi mai ales cum o vor găsi. Cântăriţi aceste date şi decizia în privinţa cadrelor vă va fi mai uşoară. După cum spuneam, nu există tipuri de sit cărora le trebuie neapărat frame-uri. Căutaţi pe web diferite pagini care folosesc această tehnică şi navigaţi prin ele. Încercaţi să vă daţi seama cum ar fi fost paginile respective dacă nu ar fi fost despărţite în cadre. Ţineţi cont de faptul că un sit nu trebuie proiectat în întregime pe cadre, ci uneori este suficientă folosirea lor numai în unele secţiuni.

Răspunsul la întrebarea "To frame or not to frame?" ar fi deci următorul: cadrele trebuie utilizate cu precauţie şi numai acolo unde aduc un plus de funcţionalitate unui sit.

Colaboratorul nostru Emanuel Baruch
răspunde la adresa emanuel@cubus.ro

Soluţii şi probleme

Dacă soluţia ta va fi aleasă de redacţia PC Magazine România drept ,,Soluţia Lunii" vei primi un abonament pe un an la revista noastră. Soluţiile şi problemele pot fi trimise pe adresa ipro@pcmagazine.ro sau prin poştă pe adresa Redacţia PC Magazine România, Bucureşti, CP 94 OP 49, împreună cu datele de identificare, cu menţiunea pentru rubrica ,,Internet PRO". Soluţia şi problema anului vor primi un premiu de 100$.