Generalitat de Catalunya: Departament d'Educació

 
Enrera
Mòdul 3
Disseny i creació de pàgines web
  Pràctica
Pràctica 1
Pràtica 2
Pràtica 3
Pràtica 4
Pràtica 5
Pràtica 6
Pràtica 7
   
Exercicis
Exercicis
 

Formats d'imatges i gràfics

L'objectiu d'aquesta pràctica és conèixer els avantatges dels formats d'imatges i gràfics.

Les imatges donen vida a una pàgina web, aclareixen el contingut i abreugen molt les coses. No obstant, utilitzar imatges dins una pàgina web té un petit inconvenient, i és que les imatges retarden la descàrrega de la pàgina. Quantes més imatges conté una pàgina, més pesa i més tarda a carregar-se, per això, cal estudiar i veure quin és el format gràfic més adequat per a cada imatge en cada cas.

Hi ha programes específics de tractament d'imatges que en redueixen el pes i que permeten editar i tractar les imatges segons les necessitats de cadascú. Això és així perquè, per poder veure les imatges dins els navegadors convencionals, cal utilitzar un format fàcilment llegible i interpretable pel navegador. Les imatges poden ser de diferents tipus, però les extensions estàndard més comunes millor suportades pels navegadors són les de tipus .gif i .jpg.

GIF

El format GIF (de l'anglès Graphics Interchange Format) és un format gràfic per intercanviar imatges. És el més habitual i pesa poc perquè comprimeix els gràfics fent servir el mètode LZW, que omple el color gradualment i alterna les bandes de píxels de les fotografies, de manera que una fotografia amb GIF es pot veure, però no es veu gaire bé. Altres limitacions notables són que només recull 256 colors, i que és propietat de Unisys, la qual demana llicència i drets d'autor. També tenen el mateix format els GIF animats. Un GIF animat consisteix en una sèrie d'imatges passades a velocitat suficient com per percebre el moviment. Pesen molt poc i els resultats, en alguns casos, són molt efectius. Actualment, encara es pot utilitzar lliurement, no obstant, per un període limitat, fins que venci el temps d'utilització lliure d'aquest format (hi ha programes que presenten un període de temps per utilitzar-lo, un cop ha transcurregut aquest període, deixen de funcionar, i, si es vol continuar utilitzant, s'ha de comprar).

JPEG

El format JPG (de l'anglès Joint Photographics Expert Group) o JPEG, que és el mateix, és el format ideal per a fotografies. Aquest format comprimeix la imatge, treballa amb setze milions de colors i no desvirtua el color de la figura original.

PNG

El format PNG (de l'anglès Portable Network Graphic) pesa més que els JPG, suporta un milió de colors i admet la transparència de fons molt millor que els arxius GIF. La imatge no perd gens en la compressió i, de moment, és lliure. L'inconvenient és que els navegadors antics no deixen veure aquest tipus de format.

De formats d'imatges n'hi ha molts, per exemple, algunes càmeres recullen les imatges en mapes de bits, amb l'extensió .bmp o d'altres, però, en qualsevol cas, quan es fa una pàgina web, no es pot treballar directament amb la imatge inicial: cal sempre comprovar el pes de la imatge i optimitzar-la en mida i pes per no carregar excessivament la pàgina i no retardar la càrrega.

 

 

 Exemple de gif animat

GIF animat

Fotografia d'un cactus del Parc Güell

JPEG

Foto en  format png

PNG

   
Desenvolupament de la pràctica
   
Pràctica

Escanegeu la imatge de la portada d'un llibre i utilitzeu un programa extern al Dreamweaver MX-2004 de conversió de gràfics (per exemple, Fireworks, GIMP, Photoshop, Paintshop) per optimitzar la imatge obtinguda.

Atenció!
Donada la vinculació entre Dreamweaver MX 2004 i el Fireworks MX 2004, aquest curs utilitza, per defecte, Fireworks MX 2004.
 
  • Escolliu un llibre d'entre els que esteu llegint. Es tracta d'obtenir una imatge fent servir l'escàner.
 
  • Activeu el Fireworks MX 2004 i creeu un document nou. Definiu les mides en píxels.
 

 Crear nuevo documento

Se us recomena que utilitzeu sempre un color de fons transparent

 
  • Escolliu Archivo | Explorar i cliqueu a l'opció que activa el vostre escàner.
  • Poseu la portada del llibre, de cap per avall, sobre el vidre de l'escàner. Quan s'activi l'escàner, cliqueu sobre Mostrar i comproveu que l'àrea seleccionada coincideix amb tota la portada del vostre llibre. Si no és així, estireu les línies fins que coincideixi.
  • Comproveu que el color, la mida i el text coincideixen amb les del vostre llibre. Ajusteu, si cal, i quan surti tot al vostre gust, cliqueu a Explorar.
  • La imatge aconseguida es diposita, amb les mateixes mides que les del vostre llibre, sobre el document de treball de Fireworks. És evident que no cal tenir una imatge a mida original, cal reduir la de la imatge.
  • Activeu el menú Modificar | Transformar | Escala i reduïu la imatge fins a 240 píxels d'amplada i 320 d'alçada.
 
Transformació de figures amb FW
 
Cal escalar la imatge aconseguida
 
  • Optimitzeu la imatge des del tauler Optimizar i, finalment, exporteu-la utilitzant el format que cregueu més convenient en funció del tipus d'imatge seleccionada.
 
Panell optimització
 
Escolliu GIF o JPEG
 
  • Poseu-li el nom: m3_vostrenom_1
  • Pengeu a l'espai comú de l'aula virtual educampus la vostra opció final.

No només podeu aconseguir imatges escanejant material, vegeu la pràctica 2 d'aquest mòdul: hi ha altres opcions, com buscar una font d'imatges gratuïtes a Internet, imatges pròpies...

   
Atenció !
  • Abans de col·locar una imatge, cal considerar la funció que tindrà dins la pàgina, valorar si hi ha alternatives de color que millorin el visionat de la pàgina i si, efectivament, és essencial per al contingut que presenteu.
  • També cal recordar que les imatges han de ser pròpies, aconseguides amb la vostra càmera, fetes a mà o escanejades..., però privades, i, en el cas que recullin persones concretes, que sigui amb el seu permís i consentiment o pagant drets d'imatge.
  • La utilització d'imatges sense llicència està penat per la llei i suposa una infracció que pot costar sancions, en el cas que la vostra pàgina web fos inspeccionada.
 
Amunt