| CATEGORII DOCUMENTE |
Imaginile si elementele multimedia constituie, fara indoiala, o latura interesanta si spectaculoasa a oricarei pagini de Web. Puteti include in paginile dumneavoastra fotografii, imagini animate, sunete sau imagini video. Atunci cand sunt folosite in mod judicios, aceste elemente pot imbogati continutul paginilor Web, oferindu-le un aspect atractiv si profesional. Pe de alta parte, folosirea lor in exces poate da paginilor un aspect incarcat si confuz si poate conduce la marirea considerabila a timpului de incarcare al paginii.
Imaginile sunt stocate in fisiere cu diverse formate, cele mai folosite pe Web fiind, asa cum era firesc, cele care confera un raport optim intre calitatea imaginii si dimensiunile fisierului.
Aceasta optiune este determinata de faptul ca majoritatea utilizatorilor Internetului dispun de conexiuni telefonice dial-up, cu viteze destul de mici, astfel ca timpul de incarcare al fisierelor, care depinde de dimensiunea acestora, devine un factor determinant.
Doua dintre cele mai utilizate tipuri de fisiere grafice sunt JPEG (Joint Photographic Experts Group) si GIF (Graphics Interchange Format).
Daca imaginea nu este salvata in acelasi folder in care se afla documentul HTML sursa care foloseste imaginea respectiva, referinta la imagine trebuie sa contina calea corecta catre locatia ei, altminteri imaginea nu va fi afisata in pagina.
Pentru a insera o imagine in cadrul unei pagini (o imagine in-line), se utilizeaza eticheta <IMG> (de la image). Eticheta <IMG> nu este o eticheta container, prin urmare nu necesita o eticheta corespunzatoare de inchidere.
Pentru a putea identifica imaginea care va fi inserata, se utilizeaza atributul src (source) al etichetei <IMG>. Atributul src ii comunica browserului numele si locatia imaginii care urmeaza sa fie inserata. Valoarea acestui atribut este adresa URL a imaginii respective.
Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele fisierului, inclusiv extensia.
<IMG src='imagine.extensie'>
Daca imaginea se afla intr-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea absoluta fie, preferabil, prin cea relativa.
Exemplul 7.1 ilustreaza modul in care se pot insera intr-o pagina doua imagini, una dintre ele aflandu-se in acelasi folder ca si pagina sursa, iar cealalta in folderul Imagini.
Exemplul
<HTML>
<HEAD>
<TITLE>imagini1</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Imagini in pagina</H1><HR>
Imagine aflata in acelasi folder<P>
<IMG src='tiger.gif' border='5'><P>
Imagine aflata in folderul Imagini<P>
<IMG src='../Imagini/bernese.jpg' border='1' >
</BODY>
</HTML>
In acest exemplu este prezent si atributul border al etichetei <IMG>. Acesta este folosit pentru a plasa un chenar in jurul imaginii. Valoarea atributului border este numarul de pixeli care reprezinta grosimea chenarului din jurul imaginii. Absenta atributului sau setarea la valoarea '0' face ca acest chenar sa nu fie prezent.
Un alt atribut util asociat etichetei <IMG> este alt. Acest atribut permite afisarea unui text explicativ in spatiul in care va fi afisata imaginea in pagina.
In Exemplul 7.2 este ilustrata utilitatea atributului alt
Exemplul 7. 2
<HTML>
<HEAD>
<TITLE>imagini2</TITLE>
</HEAD>
<BODY>
<H1 align='center'> Atributul alt </H1><HR>
Acesta este un<BR>
<IMG src='../Imagini/orangerose' alt='trandafir'>
</BODY>
</HTML>
Dupa cum puteti observa din Figura 7.2 imaginea pe care am inclus-o in document nu este afisata. Motivul este ca am omis intentionat extensia .gif a fisierului pentru a exemplifica utilitatea atributului alt. Prin urmare, daca dintr-un motiv oarecare, imaginea nu se incarca in pagina, se incarca mai greu, sau este vizualizata cu un browser care nu suporta grafica, in zona rezervata imaginii va fi afisat textul specificat ca valoare a atributului alt
De asemenea, textul specificat ca valoare pentru atributul alt va fi afisat si in cadrul unei mici ferestre care se deschide in momentul cand cursorul mouse-ului este mentinut deasupra imaginii.
Un alt motiv pentru care este indicata folosirea atributului alt este acela ca vizitatorul paginii are posibilitatea de a vedea inca inainte de incarcarea completa a imaginii ce anume se va afisa in zona respectiva. Astfel, el are posibilitatea de a astepta incarcarea completa a imaginii sau de a trece la alta pagina.
Dimensionarea imaginii se realizeaza cu ajutorul atributelor width - prin care se stabileste latimea imaginii si height - prin care se stabileste inaltimea imaginii.
In Exemplul 7.3 sunt precizate si dimensiunile imaginii incluse in document. Se observa ca dimensionarea imaginilor se face in pixeli. Este, desigur, posibil, ca dimensionarea sa se faca in procente, ca si la liniile orizontale, de exemplu. Totusi, in afara unor cazuri speciale, aceasta este considerata o practica gresita, deoarece browserul va redimensiona imaginea iar rezultatele vor fi de calitate slaba.
Exemplul 7. 3
<HTML>
<HEAD>
<TITLE>imagini3</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Dimensionarea imaginilor</H1><HR>
<IMG src='tiger.gif' width='350' height='250'><P>
</BODY>
</HTML>
Observand Figura 7.4 care reda aspectul paginii descrise mai sus putem remarca faptul ca setarea dimensiunilor a afectat calitatea imaginii deoarece dimensiunile originale ale imaginii erau mai mici. Dimensiunile originale ale imaginii tiger.gif, determinate cu ajutorul unui editor grafic, sunt: latime=200 pixeli, inaltime=125 pixeli.
Daca dimensiunile imaginii in pagina sunt setate la valori considerabil mai mari decat dimensiunile imaginii originale calitatea imaginii incluse in pagina va avea de suferit. Concluzia care se impune este ca dimensionarea imaginilor din pagina trebuie sa se faca la valori cat mai apropiate de dimensiunile initiale ale imaginilor.
Va puteti intreba atunci, de ce mai este necesara includerea atributelor de dimensionare a imaginii. Nu numai ca este necesara, dar este considerata o practica defectuoasa absenta lor din cadrul etichetei <IMG>
Motivul este acela ca includerea dimensiunilor imaginii ofera browserului posibilitatea de a rezerva spatiu pentru imagine si de a incepe incarcarea textului simultan cu incarcarea imaginii. Daca atributele de dimensionare nu sunt prezente, browserul va efectua niste pasi suplimentari pentru a calcula spatiul din pagina necesar afisarii imaginii. Din acest motiv afisarea textului nu va putea incepe decat dupa ce imaginea este incarcata in intregime.
Este indicat sa evitam o asemenea situatie deoarece imaginile se incarca mai greu decat textul si multi vizitatori ai paginii nu vor astepta suficient pentru ca intreaga pagina (imagini si text) sa fie incarcata.
Alinierea unei imagini in raport cu textul din pagina se realizeaza prin intermediul atributului align, care poate lua urmatoarele valori:
left - aliniere la stanga; textul este dispus in partea dreapta a imaginii incadrand imaginea
right - aliniere la dreapta; textul este dispus in partea stanga a imaginii incadrand imaginea
top - aliniere deasupra; partea de sus a imaginii se aliniaza cu prima linie a textului ce precede imaginea
middle - aliniere la mijloc; mijlocul imaginii se aliniaza cu prima linie a textului ce precede imaginea.
bottom - aliniere dedesubt, la baza; partea de jos a imaginii se aliniaza cu prima linie a textului.
Valorile left right, si bottom ale atributului align permit ca textul sa fie dispus in jurul imaginii, in vreme ce top si middle nu permit acest lucru.
Exemplul 7. 4
<HTML>
<HEAD>
<TITLE>imagini4</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Alinierea imaginii si textului (bottom)</H1><HR>
<IMG src='../Imagini/eaglehed.gif' align='bottom' width='100' height='66' alt='vultur'>
Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.
Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.
</BODY>
</HTML>
Alte doua atribute utile, care servesc la alinierea imaginii fata de restul elementelor din pagina, sunt atributele hspace si vspace Ele precizeaza distanta, in pixeli, pe orizontala, respectiv pe verticala, dintre imagine si restul elementelor din pagina.
In Exemplul 7. 4 vom schimba modul de aliniere in cadrul etichetei <IMG> si vom adauga atributele hspace, respectiv vspace, astfel:
<IMG src='../Imagini/eaglehed.gif' align='left' width='100' height='66' alt='vultur' vspace='10' id='10'>
Ati observat, probabil, ca dintre valorile pe care le poate lua atributul align lipseste valoarea center. Intr-adevar, alinierea unei imagini la centrul paginii nu se poate face prin intermediul atributului align. Centrarea unei imagini se poate realiza numai daca este izolata de textul care o inconjoara. Pentru aceasta se poate folosi eticheta <CENTER> sau se poate include imaginea intr-un bloc paragraf sau intr-un bloc <DIV> avand atributul align setat la valoarea center
Exemplul
<HTML>
<HEAD>
<TITLE>imagini5</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Centrarea unui imagini</H1><HR>
Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.
<DIV align='center'>
<IMG src='../Imagini/devil.gif' width='64' height='64' alt='dracusor'>
</DIV>
Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.
</BODY>
</HTML>
Exemplul 7.6 ilustreaza modul in care pot fi aliniate doua imagini fata de textul din pagina.
Exemplul 7. 6
<HTML>
<HEAD>
<TITLE>imagini6</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Alinierea a doua imagini</H1><HR>
<IMG src='../Imagini/mtnscene.jpg' align='left' width='200' height='144' align='left' id='10' vspace='10'>
Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.
<IMG src='../Imagini/sunscene.jpg' align='right' width='202' height='132' id='10' vspace='10'>
Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.
</BODY>
</HTML>
O imagine poate fi utilizata si pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei <BODY>, avand ca valoare adresa URL a imaginii. Imaginea se multiplica aliniat (tiling) pe orizontala si pe verticala pana umple intregul ecran.
Exemplul 7.7 ilustreaza utilizarea atributului background
Exemplul 7. 7
<HTML>
<HEAD>
<TITLE>imagini7</TITLE>
</HEAD>
<BODY background='../Imagini/silk.jpg'>
<H1 align='center'>Imaginea ca fond al paginii</H1><HR>
Fond de matase
</BODY>
</HTML>
Pentru a folosi o imagine drept legatura se procedeaza ca in urmatorul exemplu:
<A href='tabel_culori.html'>
<IMG src='prism.gif' width='100' height='80' alt='culori'>
</A>
S-a folosit eticheta <A> prin intermediul careia am creat legatura cu fisierul tabel_culori.html. Intre etichetele <A> si </A> am inclus o imagine care inlocuieste textul explicativ pe care vizitatorul urmeaza sa faca click cu mouse-ul. Imaginea serveste, deci, ca legatura catre o anumita pagina. Imaginea folosita ca legatura este prism.gif iar pagina spre care este facuta legatura este tabel_culori.html. In mod prestabilit imaginea utilizata pe post de zona activa este inconjurata de un chenar avand culoarea unei legaturi (albastru). Daca stabilim pentru atributul border al etichetei valoarea '0' acest chenar dispare.
Exemplul 7. 8
<HTML>
<HEAD>
<TITLE>imagini8</TITLE>
</HEAD>
<BODY>
<H1 align='center'> Imagini cu legaturi </H1><HR>
<BR>Am pus o imagine cu legatura pe pagina<P>
<A href='tabel culori.html'>
<IMG src='../Imagini/prism.gif' width='100' height='80' alt='culori'>
</A>
</BODY>
</HTML>
Daca intr-o pagina Web este necesara afisarea unui numar mare de imagini, incarcarea paginii se va face destul de greu. De multe ori, vizitatorii paginii nu vor avea rabdarea necesara pentru a astepta incarcarea integrala a paginii.
O solutie de compromis frecvent aplicata pentru scurtarea timpului de incarcare a unei pagini ce prezinta multe imagini o reprezinta utilizarea imaginilor miniaturale (thumbnail-uri). O imagine thumbnail este o versiune de dimensiuni reduse a unei imagini mai mari, care se incarca mult mai rapid si care, desi este de dimensiuni mici si de calitate scazuta, permite vizitatorului sa afle ce anume reprezinta si sa decida daca este interesat sau nu sa deschida versiunea integrala..
Imaginea miniaturala reprezinta o legatura spre fisierul cu imaginea originala din care provine. In cazul in care vizitatorul paginii doreste sa vada imaginea originala, o poate deschide efectuand click imaginea thumbnail.
Realizarea imaginilor miniaturale se poate face fie prin micsorarea proportionala a imaginilor, fie prin reducerea lor la o dimensiune prestabilita (strech) chiar daca imaginea se distorsioneaza, in cazul in care se doreste, de pilda, ca toate thumbnail-urile dintr-o pagina sa aiba aceleasi dimensiuni.
Exista doua metode pentru a plasa o imagine thumbnail in pagina:
folosind doua imagini, una fiind imaginea thumbnail iar cealalta, imaginea originala
folosind o singura imagine, redimensionata (micsorata) direct in pagina
O imagine thumbnail este foarte usor de realizat. Oricare ar fi programul de grafica pe care il folositi, tot ceea ce aveti de facut este sa gasiti optiunea Resize (care de obicei face parte din meniul Edit sau Image) si sa precizati in caseta de dialog care se deschide, dimensiunile dorite. Veti observa ca exista de regula o optiune setabila pentru pastrarea proportionalitatii cu dimensiunile. Daca este activata, dupa stabilirea uneia dintre dimensiuni (width, de exemplu), cealalta (height) este calculata automat.
Exemplul 7. 9
<HTML>
<HEAD>
<TITLE>imagini9</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Thumbnails - doua imagini</H1><HR>
<P>
<A href='../Imagini/zdog.gif'>
<IMG src='../Imagini/zdog_th.gif'></A>
</BODY>
<HTML>
Fisierul zdog_th.gif contine imaginea thumbnail care este folosita ca legatura, pentru a referi imaginea originala, zdog.gif. Deoarece imaginea thumbnail este folosita ca o legatura catre imaginea originala, in jurul ei este afisat un chenar prestabilit albastru. Daca doriti ca acest chenar sa nu mai fie afisat, puteti folosi atributul border al etichetei <IMG> setat la valoarea '0'. Imaginea originala se va deschide in aceeasi fereastra cu pagina in care este plasata imaginea thumbnail. Pentru a reveni in pagina, trebuie sa apasati butonul Back al browserului.
Aceasta metoda este adesea preferata, deoarece foloseste un singur fisier, cel care contine imaginea originala, miniaturizarea ei facandu-se chiar in pagina, cu ajutorul atributelor width si height. Este o metoda mai eficienta si mai rapida, deoarece imaginea de dimensiuni mari care urmeaza a fi afisata este deja incarcata in memoria cache a browserului si este imediat disponibila pentru afisare.
Exemplul 7. 10
<HTML>
<HEAD>
<TITLE>imagini10</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Thumbnails - o singura imagine</H1><HR>
<P>
<A href='../Imagini/zdog.gif'>
<IMG src='../Imagini/zdog.gif' width='70' height='76'></A>
</BODY>
<HTML>
Dupa cum se poate observa, am creat un link (cu ajutorul etichetei <A>) la fisierul zdog.gif care contine imaginea originala. Am folosit drept legatura aceeasi imagine, dar redimensionata, folosind atributele width si height
In exemplul anterior, imaginea thumbnail este incarcata prima. In momentul cand vizitatorul face click pe ea, este incarcata imaginea cu dimensiunile originale. Avantajul ultimei metode este faptul ca imaginea este incarcata de la inceput si redimensionata pentru thumbnail, ceea ce face ca afisarea imaginii cu dimensiunile originale sa fie mai rapida.
Pentru a insera o imagine video intr-un document HTML se folosesc atributele dynsrc controls loop si start ale etichetei <IMG>.
Atributul dynsrc inlocuieste atributul src si permite inserarea in documentul HTML a unei imagini video in acelasi mod in care este inserata o imagine statica.
Valoarea atributului dynsrc este adresa URL a fisierului video care va fi inclus in pagina conform sintaxei:
<IMG dynsrc='URL_fisier_video'>
Acest atribut este o extensie Internet Explorer si nu este recunoscut de browserele Netscape. Pentru a vizualiza o imagine video in-line intr-un browser Netscape, vizitatorul paginii trebuie sa instaleze un program auxiliar de tip plug-in. Daca programul plug-in nu este disponibil pe computerul vizitatorului, imaginea video nu va putea fi afisata.
Singurul format de fisiere video care este suportat de extensiile Internet Explorer este AVI (Audio Video Interleave), deoarece acesta este formatul de redare care este inclus in browser. Constructia de mai jos include intr-un document HTML fisierul video introducere.avi care se afla in folderul Video:
<IMG dynsrc='../Video/introducere.avi'>
Efectul acestei etichete este deschiderea de catre browser a unei ferestre de vizualizare in interiorul paginii Web, fereastra in care va rula clipul video introducere.avi, inclusiv sunetul, daca acesta face parte din clip si computerul vizitatorului este setat sa redea sunetele. Ca si imaginile obisnuite, imaginea video este afisata pe masura ce este incarcata.
Deoarece nici un alt browser in afara de Internet Explorer nu recunoaste aceasta extensie, este recomandat sa includeti in cadrul etichetei <IMG> si atributul src prin care sa furnizati o imagine statica ce va fi afisata in acelasi cadru. Browserele care nu recunosc extensia dynsrc vor afisa imaginea statica pe cand Internet Explorer va afisa imaginea video. Ordinea in care apar cele doua atribute nu are importanta. De exemplu:
<IMG dynsrc='../Video/intro.avi' src='../Imagini/intro.gif'>
In mod normal, Internet Explorer reda clipul video intr-o fereastra in care nu sunt afisate nici un fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectuand click dreapta cu mouse-ul in interiorul ferestrei.
Pentru a adauga butoane de control acestei ferestre se utilizeaza atributul controls al etichetei <IMG>. Atributul controls nu are alocata nici o valoare, prezenta sa avand doar scopul de a adauga butoanele de control asemanatoare celor de la aparatele video. De exemplu:
<IMG dynsrc='../Video/intro.avi' src='../Imagini/intro.gif' controls>
Clipul video inclus in pagina este redat de browser o singura data, de la inceput pana la sfarsit. Pentru a repeta redarea clipului de un anumit numar de ori este folosit atributul loop. Valorile posibile ale atributului sunt:
un numar intreg care reprezinta numarul de reluari ale clipului
infinite, caz in care clipul este redat pana cand utilizatorul stopeaza derularea sa apasand butonul stop al ferestrei de vizualizare (in cazul cand fereastra contine butoanele de control) sau efectueaza click dreapta cu mouse-ul in fereastra de vizualizare.
Exemplul de mai jos ilustreaza modul in care poate fi setat atributul loop
<IMG dynsrc='../Video/intro.avi' src='../Imagini/intro.gif' controls loop='infinite'>
Asa cum am precizat, redarea imaginii video incepe imediat ce aceasta a fost complet incarcata in pagina. Pentru a schimba acest comportament se foloseste atributul start care poate avea valorile:
mouseover, situatie in care derularea imaginii video incepe in momentul cand mouse-ul este plasat deasupra imaginii
fileopen, valoarea predefinita, situatie in care derularea imaginii incepe imediat dupa incarcarea in pagina
Cele doua valori pot fi combinate pentru a se realiza redarea imaginii mai intai imediat dupa incarcarea in pagina si apoi de fiecare data cand mouse-ul este plasat deasupra ei, ca in exemplul urmator:
<IMG dynsrc='../Video/intro.avi' src='../Imagini/intro.gif' controls loop='infinite' start='fileopen, mouseover'>
Imaginile video in-line pot fi tratate ca si imaginile statice. O astfel de imagine poate fi aliniata folosind atributul align, sau poate fi spatiata fata de textul care o inconjoara.
Exemplul 7.11 ilustreaza atributele prezentate mai sus.
Exemplul 7. 11
<HTML>
<HEAD>
<TITLE>imagini11</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Imagini video</H1><HR>
<FONT size='4' color='blue'>Clipul video de mai jos face parte din jocul Heroes 3</FONT><P>
<CENTER>
<IMG dynsrc='../Video/shield.avi' src='../Imagini/banana.gif' controls start='fileopen, mouseover' loop='infinite'>
</CENTER>
</BODY>
</HTML>
Daca eticheta <IMG> permite afisarea unei imagini de fundal, exista si o eticheta care realizeaza includerea in pagina Web a unei muzici de fundal si anume eticheta <BGSOUND>. Aceasta eticheta este, de asemenea, o extensie Internet Explorer deci nu este recunoscuta si executata in alte browsere.
Browserul Internet Explorer contine un decodor de sunet incorporat si permite integrarea prin eticheta <BGSOUND> a sunetului de fundal pentru o pagina. Sintaxa etichetei <BGSOUND> este urmatoarea:
<BGSOUND src='URL_fisier_sunet' loop='valoare'>
Atributul src are drept valoare adresa URL a fisierului de sunet care este folosit ca fundal sonor al paginii.
In mod curent, Internet Explorer recunoaste trei tipuri de fisiere de sunet:
fisiere cu extensia .wav care este formatul nativ pentru PC
fisiere cu extensia .au, formatul nativ pentru sistemele UNIX
fisiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor
Pentru a include intr-o pagina un fisier de sunet se procedeaza ca in exemplul urmator:
<BGSOUND src='../Sunet/wellcome.wav>
Ca si in cazul imaginilor video in-line, fisierul de sunet este redat o singura data, la incarcarea paginii. Pentru redarea sa repetata se foloseste atributul loop al etichetei <BGSOUND> care poate avea ca valori:
un numar intreg, care reprezinta numarul de reluari ale piesei
infinite, caz in care piesa muzicala este reluata pana cand utilizatorul paraseste pagina sau inchide fereastra browserului.
Executati Exemplul 7.12 cu un browser Internet Explorer pentru a observa efectul etichetei <BGSOUND>. Desigur, este necesar sa schimbati adresa URL a fisierului de sunet specificand un fisier existent pe hard-disk-ul dumneavoastra.
Exemplul 7. 12
<HTML>
<HEAD>
<TITLE>imagini12</TITLE>
</HEAD>
<BODY>
<H1 align='center'>Muzica de fundal</H1><HR>
<P>
<FONT size='4' color='red'>Muzica se va auzi pana cand veti inchide pagina</FONT>
<BGSOUND src='../Sunet/Welcom98.wav' loop='infinite'>
</BODY>
</HTML>
Cand folositi imagini intr-o pagina Web, trebuie sa va puneti intrebarea: 'Este necesara aceasta imagine sau ar fi suficient sa folosesc text?'. Chiar daca se spune ca o imagine face cat o mie de cuvinte, acest lucru nu este intotdeauna adevarat pe Web. Inlocuirea textului care contine informatiile esentiale dintr-o pagina Web cu imagini este adesea o greseala.
Un prim motiv este ca inca mai exista browsere non-grafice cum este Lynx, care nu afiseaza decat textul.
Apoi, chiar si in browserele grafice, anumiti utilizatori ar putea opta, din varii motive, pentru dezactivarea afisarii imaginilor.
Un alt motiv ar fi acela ca, din cauza duratei mari de incarcare a fisierelor cu imagini de mari dimensiuni, unii utilizatori ar putea renunta pur si simplu la deschiderea paginii.
Si nu in ultimul rand, deoarece, spre deosebire de text, imaginile pot intampina diverse dificultati tehnice la afisare.
Imaginile dintr-o pagina Web trebuie gandite ca niste instrumente vizuale care au rolul de a sustine si ilustra continutul scris al paginii. De exemplu, intr-un catalog on-line imaginile produselor prezentate sunt esentiale pentru continutul paginii respective. Icon-urile cu rol de legaturi sau instrumente de navigatie pot reprezenta repere vizuale deosebit de utile in cadrul unui site. Dar daca o imagine nu serveste unui scop bine definit in pagina, e bine sa va ganditi de doua ori, inainte de a o folosi.
De asemenea se recomanda sa fiti precaut si in privinta imaginilor folosite ca fundal (background).
Intr-adevar, acestea pot oferi un aspect spectaculos paginii dumneavoastra. Insa trebuie sa fiti constient de faptul ca o imagine folosita ca fundal va creste cu siguranta timpul necesar incarcarii paginii. Daca in cazul imaginilor in-line textul se poate afisa inaintea sau in timpul incarcarii imaginii, la imaginile de fundal afisarea celorlalte elemente din pagina nu va putea incepe decat dupa incarcarea in intregime a fundalului.
Mai mult, spre deosebire de imaginile in-line, care pot imbogati continutul informational al paginilor, imaginile de fundal nu aduc cu adevarat decat foarte rar un supliment de informatie. Desi aspectul unei asemenea pagini poate fi atragator, de cele mai multe ori folosirea imaginilor de fundal in combinatii nefericite cu fonturi de anumite tipuri sau culori, fara contrast suficient, poate face pagina incarcata si greu de citit.
Daca totusi va decideti sa folositi o imagine ca fundal al paginii este recomandat sa specificati simultan si o culoare de fundal, adica sa setati atributul bgcolor. Astfel, daca dintr-un motiv oarecare imaginea de fundal nu se incarca, pagina va avea totusi culoarea prestabilita de dumneavoastra.
Ca si imaginile, si celelalte elemente multimedia trebuie folosite cu discernamant intr-o pagina Web.
Imaginile video au dimensiuni semnificativ mai ari decat imaginile statice, deci se incarca mult mai incet decat acestea astfel incat includerea lor in-line va mari considerabil timpul de incarcare al paginii.
In plus, formatele diverse utilizate nu pot fi deschise intotdeauna cu browserul, unele impunand existenta unor plug-in-uri sau chiar unor programe speciale.
O metoda de compromis recomandata este descrierea continutului fisierului, eventual inserarea unui fragment video exemplificativ (sample) de dimensiuni mult mai mici, similar cumva metodei thumbnail-urilor. Se asigura o legatura si spre fisierul integral, astfel incat, dupa vizualizarea exemplului, vizitatorul sa poata alege daca va astepta timpul necesar incarcarii sale sau nu.
Muzica de fundal este de cele mai multe ori nerecomandata. Foarte multi vizitatori pot vizualiza paginile dumneavoastra avand sunetul dezactivat. Folosirea unei muzici de fundal incetineste incarcarea paginii si, in plus, este foarte posibil ca muzica pe care ati ales-o sa nu fie pe gustul celor care va viziteaza pagina, ba chiar sa ii determine sa o paraseasca inainte de a citi continutul acesteia.
Daca este necesar, totusi, sa introduceti muzica sau sunet in paginile dumneavoastra, este o prevedere inteleapta sa plasati fisierele de sunet separat si sa asigurati legaturi catre acestea astfel incat vizitatorul sa le poata audia, daca doreste.
Unul dintre cele mai importante aspecte care trebuie luate in considerare la includerea imaginilor intr-un document este timpul de incarcare a documentului.
Durata de incarcare a paginilor depinde de multi factori. Depinde de modemul si conexiunea vizitatorului, de performantele serverului gazda, de trafic, de latimea de banda, etc. Cum nu puteti avea control asupra acestora, singurul lucru care va ramane de facut este sa va construiti paginile astfel incat sa aiba o buna viteza de incarcare chiar si in cazul unui vizitator care detine o conexiune modesta ca performante.
Pe langa alegerea cu foarte multa grija a imaginilor care vor fi incluse in document, mai exista cateva modalitati prin care poate fi ameliorata durata de incarcare a paginii:
Optimizarea imaginilor. Folositi-va in mod judicios de instrumentele de control al imaginilor puse la dispozitie de editorul grafic folosit, optimizati dimensiunile imaginii si numarul de culori la cat mai putine posibil. Incercati sa gasiti un raport optim intre dimensiunea fisierului si calitatea imaginii. Evitati fotografiile sau imaginile de fundal de dimensiuni foarte mari.
Reutilizarea imaginilor. Aceasta metoda este eficienta mai ales in cazul icon-urilor sau elementelor grafice de navigatie care sunt prezente in mai multe pagini pe parcursul unui site. Cele mai multe browsere retin in memoria cache elementele documentelor care urmeaza a fi afisate. Astfel, daca o imagine este utilizata in mai multe pagini aceasta nu trebuie incarcata de fiecare data in memorie ci este disponibila pentru a fi afisata oricand se face referirea la ea.
Divizarea documentelor de dimensiuni mari in mai multe documente de dimensiuni reduse. Aceasta regula generala include si paginile care contin imagini in-line. Mai multe documente de dimensiuni mai mici legate intre ele prin legaturi sunt mai bine acceptate de vizitatori decat un singur document foarte mare care necesita un timp de incarcare indelungat. Regula general acceptata este mentinerea dimensiunilor unui document Web in jurul valorii de 50Kb, incluzand aici si imaginile, desigur.
Folosirea imaginilor thumbnail. Daca pagina contine un mare numar de imagini, folositi imagini miniaturale care sa refere imaginile originale. In plus, intrucat imaginea originala referita prin imaginea thumbnail se poate deschide intr-o noua fereastra, nefiind asociata cu restul elementelor din pagina, este mai comod pentru vizitator sa o salveze pe computerul propriu pentru o vizualizare ulterioara.
Specificarea dimensiunile imaginilor. In acest mod este evitata etapa calcularii de catre browser a spatiului necesar pentru afisarea imaginii, imbunatatindu-se viteza de incarcare a paginii.
Formatele cele mai utilizate pentru fisierele grafice sunt JPEG si GIF.
Inserarea unei imagini intr-un document HTML se realizeaza cu ajutorul etichetei <IMG>.
Sintaxa etichetei <IMG> este urmatoarea:
<IMG src='URL_imagine' align='pozitie' width='valoare' height='valoare' vspace='valoare' id='valoare' alt='text' border='valoare' dynsrc='URL_imagine_video' loop='valoare' start='valoare' controls>
unde:
src precizeaza locatia imaginii
width si height stabilesc dimensiunile imaginii
vspace si hspace stabilesc distanta pe verticala si orizontala fata de restul textului din pagina
align aliniaza imaginea fata de textul din jurul ei
alt furnizeaza un text explicativ asupra imaginii
border stabileste grosimea chenarului imaginii
dynsrc introduce o imagine video si precizeaza locatia ei
loop specifica numarul de reluari ale imaginii video
start precizeaza momentul inceperii redarii imaginii
controls afiseaza butoanele de control ale ferestrei video
Imaginile pot fi folosite ca fond al paginii cu ajutorul atributului background al etichetei <BODY>
O imagine poate servi drept legatura catre un alt document HTML prin includerea etichetei <IMG> intre etichetele <A> </A>
O practica des folosita este inserarea in pagina a imaginilor miniaturale care la executarea unui click pe ele deschid imaginea originala.
Muzica de fundal poate fi adaugata unui document prin intermediul etichetei <BGSOUND>
Alegerea imaginilor care vor fi incluse intr-un document HTML trebuie facuta cu grija, in functie de rolul acestora in structura documentului si avand permanent in vedere timpul de incarcare al paginii.
a) <IMG>
b) <A>
c) <PIC>
a) pozitionarea imaginii in pagina
b) stabilirea numelui si locatiei unde se afla imaginea
c) crearea unei legaturi prin intermediul imaginii
a) dimensionarea textului
b) alinierea imaginii cu textul
c) dimensionarea imaginii
a) Nu se afiseaza imaginea.
b) Imaginea se afiseaza pe toata suprafata ferestrei browserului.
c) Browserul asteapta incarcarea completa a imaginii inainte de a incepe afisarea textului.
a) top
b) bottom
c) middle
a) <IMG background='rice.gif'>
b) <IMG src='rice.gif' background>
c) <BODY background='rice.gif'>
<IMG src='dog.gif' alt='catel'>
a) Afiseaza cuvantul catel langa imagine.
b) Afiseaza cuvantul catel in spatiul rezervat imaginii.
c) Atribuie fisierului dog.gif numele catel.
a) <IMG src='moon.gif' wrap='left'>
b) <IMG src='moon.gif' align='left'>
c) <IMG src='moon.gif> align='wrap'>
a) <A href='semn.html'></A><IMG src='sign.gif>
b) <A src='semn.html><IMG href='sign.gif'></A>
c) <A href='semn.html><IMG src='sign.gif'></A>
a) <IMG src='URL_imagine'>
b) <IMG dynsrc='URL_imagine'>
c) <IMG video='URL_imagine'>
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1398
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
