Agora
Media
Libraria Byblos



AgoraNews  





PC Magazine Ro  




NET Report   




Ginfo   




agora ON line   





PC Concrete   





Liste de discuții   




Cartea de oaspeți   




Mesaje   





Agora   








Clic aici
PC Report - ultimul numar aparut


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:

<html>
<head>
</head>
<frameset cols="25%,75%">
<frame src="fisier1.html" name="fisier1">
<frame src="fisier2.html" name="fisier2">
</frameset>
</html>

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:

<frameset cols="33%,34%, 33%">
<frame src="coloana1.html" name="col1">
<frame src="coloana2.html" name="col2">
<frame src="coloana3.html" name="col3">
</frameset>

Î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:

<frameset rows="100, 200, *">
<frame src="rand1.html" name="unu">
<frame src="rand2.html" name="doi">
<frame src="rand3.html" name="trei">
</frameset>

Î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.

<frameset cols="150,*">
<frame src="coloana1.html" name="coloana1">
<frameset rows="100,*,50">
<frame src="randul1.html" name="rand1">
<frame src="randul2.html" name="rand2">
<frame src="randul3.html" name="rand3">
</frameset>
</frameset>

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:

<iframe src="sursa.html" width="100" height="100"> ... </iframe>
Atenție, acest tag este suportat însă numai de Internet Explorer și de aceea folosirea lui nu este prea răspândită. Structura de cadre din exemplul anterior poate fi obținută și astfel:

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

<frameset rows="100,*,50">

<frame src="randul1.html" name="rand1">
<frame src="randul2.html" name="rand2">
<frame src="randul3.html" name="rand3">
</frameset>

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:

<frame src="sursa.html" name="continut" noresize>

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.

<script language="JavaScript">
<!--
function twoframes(URL1,F1,URL2,F2)
{
parent.frames[F1].location.href=URL1;
parent.frames[F2].location.href=URL2;
}
//->>
</script>
Hiperlegătura care va schimba ambele frame-uri atunci când este apelată va arăta astfel:

<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 [email protected]


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 [email protected] 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$.

 

 


PC Magazine Ro | CD ROM | Redactia | Abonamente | CautareArhive

Copyright © 1999-2002 Agora Media.

[email protected]

LG - LifeŽs Good

www.agora.ro

deltafri

Concurs de Grafica Digitala si Web Design

www.agora.ro

www.agora.ro