[web]Grafica Pentru Web

Xxaz · Trimis: 17/12/2008 17:39 Titlul subiectului: [web]Grafica Pentru Web

Grafica pentru web

Obiective
Identificarea formatelor grafice pentru WWW
Discutarea unor puncte cheie legate de introducerea graficii pe web
Descarcarea fisierelor grafice pe calculator
Utilizarea comenzilor pentru includerea graficii pe web
Formate grafice pentru web
Exista o multime de formate grafice digitale: PICT, GIF, TIFF, EPS, BMP, PCX, JPEG si numeroase altele. Pentru ca WWW este un sistem compatibil cu toate platformele (sistemele de operare: MacIntosh, Windows, Linux etc.) este necesar ca grafica utilizata pe web sa fie independenta de platforma. Formatul HTML in sine este independent de platforma pentru ca este un format modest text. Formatele grafice care sunt independente de platforma si cele mai utilizate pe web sunt formatele GIF si JPG.

Formatul GIF (Graphics Interchange Format) comprima informatia (reduce măsură fisierului) si o traduce in cod binar pentru Internet. Compresia GIF este foarte buna pentru fisiere cu zone adiacente de aceiasi nuanță (in aparte pe orizontala).

Al doilea compus grafic mult exploatat este JPG sau JPEG (Joint Photographic Engineering Group). Compresia JPG este foarte buna pentru imagini fotografice. Compresia poate fi extrem de mare dar scazand dimesiunea fisierului prin compresie se pierde din calitatea imaginii.

Problema principala legata de grafica pe Internet este raportul dimesiune fisier - calitate imagine.

Pentru informatii mai multe legate de fisiere de imagine, accesati:

Graphics File Compression.
Lynda Weinman's Designing Web Graphics
Va fi necesar sa folositi anumite programe pentru prelucrarea imaginilor grafice, inainte de introducerea lor pe paginile de web. Cateva exemple de astfel de programe sunt:

Nume program Observatii
PaintShop
Ulead Photoimpact
Adobe Photoshop

Unde si cand trebuie utilizata grafica
Utilizarea unui numar foarte mare de imgini, poate sa arate perfect pe un calculator de ultima generatie dar poate fi frustranta pentru utilizatori cu resurse sarace. Pastrati intr-un HTML dimesiunea totala a imaginilor sub 50kb??
Nu toti utilizatorii au Monitoare de 21 inch. Ca atare exista destul de multi care utilizeaza inca ecrane cu rezolutie 640 x 480 pixeli. Incecati sa nu introduceti grafica cu mărime mai mare de 480 x 300 in paginile voastre
Gradientul de culoare arata bine dar compresia lui este foarte mica. Utilizati de preferat culori solide
Daca aveti multe imagini de afisat, realizati mai multe fisiere HTML fiecare din ele continand putine imagini.
Introduceti imagini numai daca ele aduc semnificatie si intelesuri fisierului dumneavoastra.
Download fisiere grafice
Pentru a putea introduce fără întârziere grafica in documentele voastre aveti pregatita grafica pentru web.

Accesati pagina cursului, Resurse. In componentă de jos a fisierului veti gasi un link catre albume pe web. Fiseirele sunt protejate cu User si parola.
Accesati unul din albume
Alegeti poza pe care o doriti si dati clic pe butonul din dreapta mousului. Alegeti optiunea Save Image as... si salvati imaginea pe calculatorul pe care lucrati, in acelasi director cu fisierul HTML
Retineti numele fisierului si calea pe care ati facut salvarea.
Includerea graficii pe web
O imagine inline este o poză care apare legata de text. Pentru introducerea unei astfel de imagini se utilizeaza tagul:

<img>

unde filename.gif sau filename.jpg reprezenta numele si extensia fisierului care va fi afisat in text. Daca fisierul nu se gaseste in acelasi director cu fisierul HTML, este necesar sa fie data si calea catre fisier.

Acesta este un M foarte mare

Daca o sa inserati in continuare text M se va deplasa cu textul pentru ca este ancorat langa cuvantul mare.

Daca vreti sa nu mai fie legat de text, inserati un tag pentru paragraf inaintea tagului de imagine.

Se poate utiliza si tagul de aliniere fata de text cu urmatoarele efecte:

<img>

Aliniere in partea de sus

<img>

Aliniere la mijloc

<img>

Aliniere in bucată de joscare este si default (implicita).

Unii utilizatori folosesc browsere text only. Pentru ei este important ca tagul src sa aibe si atributul alt completat ca in exemplul de mai jos.

<img>

Efectul va fi cel de mai jos: Pentru browsere grafice daca te deplasezi cu cursorul deasupra graficii apare textul scris la alt.
_________________
Plangand eu m-am nascut pe acest pamant,iar cei ce ma asteptau ma asteptau razand...traiesc in asa fel incat,cand ma voi stinge, sa ii pasaresc razand pe cei ce ma vor plange [web]Grafica Pentru Web [web]Grafica Pentru Web

[web]Grafica Pentru Web [web]Grafica Pentru Web