7. Formatos Gr·ficos y de Ficheros
El mandar textos por la red es justo lo que siempre ha sido el e-mail. La gente lo ha estado
haciendo durante lustros. Pero cuando puedes incluir im·genes, tus mensajes pueden ser
mucho m·s informativos. øA™n se mantiene eso de "una imagen vale m·s que mil palabras"?
Objetivos
DespuÈs de esta lecciÛn ser· capaz de:
- Identificar los formatos gr·ficos soportados por el World Wide Web.
- Discutir claves a considerar cuando se incluyen gr·ficos en documentos HTML.
- Bajarse un fichero gr·fico a su ordenador.
- Usar el formato HTML correcto para incluir im·genes en sus p·ginas Web.
LecciÛn
°RecuÈstese y rel·jese! Esta lecciÛn es mayormente una introducciÛn a los gr·ficos en el Web.
Pero antes le queremos que haga un poco de ejercicio previo.
Los Formatos Gr·ficos del Web
Existen numerosos formatos de archivos gr·ficos para los ordenadores, PICT, TIFF, GIF, por
ejemplo, asÌ como EPS, BMP, PCX, JPEG...
Suena mÌstico... Mala poesÌa.
El modo en que un Browser muestra un gr·fico es a travÈs de cÛdigo HTML que indica dÛnde
encontrar el fichero en un formato simple y que puede ser interpretado por diferentes tipos de
ordenadores.
Por ejemplo, cuando la informaciÛn en un formato es recibida por un Macintosh, el Browser sabe
cÛmo visualizarlo cono un formato gr·fico para Mac. No obstante, cuando la misma informaciÛn
la recibe un Windows PC, se muestra como un gr·fico Windows.
En jerga tÈcnica podrÌamos decir que el formato de imagen es independiente de la
plataforma.
El HTML mismo es independiente de la plataforma, ya que el texto normal puede ser comprendido
por cualquier ordenador.
El formato est·ndar que se usa en los Browsers es el GIF, o Graphics Interchange
Format (Formato de Intercambio Gr·fico).
El formato GIF comprime la informaciÛn (reduce el tamaÒo del archivo) y lo traduce a cÛdigo
binario que puede ser enviado por la red. La compresiÛn GIF es m·s efectiva en gr·ficos que
tengan ·reas contiguas de un mismo color, e incluso es mayor cuando el color es continuo en
direcciÛn horizontal.
El otro formato gr·fico usado en el Web es el JPEG (Joint Photographic Engineering Group,
quienes diseÒaron este formato).
Anteriormente, las im·genes JPEG no se visualizan en la p·gina, sino en una ventana
distinta, utilizando una aplicaciÛn externa. Pero hoy dÌa, la mayorÌa de Browsers soportan
im·genes JPEG, y tambiÈn las muestran correctamente en la misma p·gina Web.
La compresiÛn JPEG es muy efectiva para im·genes fotogr·ficas donde los colores pueden variar
mucho en cortas distancias ("im·genes granuladas"). JPEG ofrece buena compresiÛn tambiÈn en el
tamaÒo del archivo, a veces hasta un factor de 10 (por ejemplo, pasando de 1.500 KBytes a 150
KBytes), lo cual hace que la calidad sufra un poco.
Para m·s informaciÛn sobre formatos de ficheros gr·ficos consulte la p·gina de SITO en
CompresiÛn de Archivos
Gr·ficos. Si le apetece algo m·s a fondo, eche un vistazo al libro de Lynda Weinman
DiseÒando Gr·ficos en el Web (Designing Web
Graphics)
Cada vez m·s programas de gr·ficos incluyen caracterÌsticas para guardar ficheros como GIF. Y
si no, debajo se incluyen diversos programas/utilidades shareware para efectuar dicha
conversiÛn. Puede mirar en diversos sitios como
shareware.com,
Jumbo,
o Yahoo!
| Unas Pocas Utilidades Gr·ficas |
| Macintosh |
Windows |
- GIFConverter
- GraphicConverter
- clip2gif
- PhotoGIF
("plug-in" para PhotoShop)
|
- WinGif 1.4
- Lview 3.1
- PaintShop Pro
|
Algunos Detalles a Considerar Cuando Se Usan Gr·ficos
Para este tutorial no necesita usar ninguno de estos programas. Le enseÒaremos cÛmo guardar una
copia de cualquier imagen que vea en cualquier p·gina Web.
No obstante, ya que va a empezar a desarrollar sus propias p·ginas Web deberÌa familiarizarse
con la creaciÛn, ediciÛn y retoque de im·genes en los formatos GIF y JPEG.
Si sus p·ginas HTML van a incluir gr·ficos considere las siguientes sugerencias:
- Grandes y numerosas im·genes pueden quedar muy bien en un ordenador, pero frustrar·n a los
usuarios que esperan ver r·pidamente cosas por la red (esto es... øcu·ntos de nosotros
disponemos de una Sun SparcStation en casa? :)
Como sugerencia, inserte im·genes pequeÒas, de menos de 100 KBytes de tamaÒo (incluso le
propondrÌamos menores que 50 KBytes). Cuanto m·s pequeÒo es incluso mejor.
- De modo similar, no todos tenemos un monitor de 21 pulgadas. Trate que sus im·genes sean
menores de 480 pixeles de ancho por 300 de alto para evitar que los usuarios hagan "scroll"
(desplazamiento a lo largo de la p·gina) o que tengan que redimensionar la ventana del browser.
- Los gradientes de color pueden ser preciosos pero en GIF no comprimen tanto como los
colores sÛlidos, e incluso a veces pueden resultar daÒados, o ser mostrados en bandas.
- Algunos programas gr·ficos disponen de opciones para evitar que las im·genes tiemblen
("no dithering") al ser convertidas a GIF; esto puede reducir el "ruido" en un fondo
sÛlido.
- Muchos tonos de color en Macintosh no son discernibles en Windows.
- Mejor que mostrar todas las im·genes en una p·gina, tÈngalas enlazadas como im·genes
externas a ser vistas sÛlo si se hace click sobre el link (trataremos sobre esto m·s adelante,
en la lecciÛn 8a y en la lecciÛn 8d). Si
quiere mostrar muchas im·genes, intente dividir la p·gina Web en una serie de p·ginas
distintas y entrelazadas.
- Una imagen (por ejemplo, un pequeÒo "bullet") puede aparecer varias veces en una p·gina con
escaso retraso entre cada imagen.
- Muchos Browsers "cachean" ahora las im·genes (almacen·ndolas en su ordenador), de modo que
es m·s r·pido asÌ cargarlas de su ordenador que nuevamente de la red.
- Y, finalmente, lo m·s importante; aseg™rese de que las im·genes que incluya aÒadan
significado al contenido de sus documentos HTML.
Usted puede diseÒar una preciosa p·gina Web, llena de grandes im·genes, que puede incluso
cargarse r·pidamente desde su ordenador... Pero que puede "matar lentamente de asco"
a un usuario en otro punto de la red, sobre todo cuando la red va despacio o usa un mÛdem
lento.
La Internet es un lugar muy ocupado y cada segundo lo es m·s...
Guardando e Incluyendo Im·genes en su P·gina Web
Para la siguiente lecciÛn lo primero que necesitar· ser· bajar una copia de una imagen GIF de
un volc·n en erupciÛn (°FÌjese en ese rÌo de lava!).
Siga las instrucciones en el Centro de Descarga de Im·genes de la LecciÛn
7 y luego vuelva aquÌ para completar la lecciÛn.
Compruebe Su Trabajo
Compruebe que el archivo "lava.gif" est· guardado en el mismo directorio o carpeta que
su archivo HTML "Volc.htm". Si no lo estuviera, compruebe si accidentalmente lo
guardÛ en otro directorio o carpeta. EncuÈntrelo y muÈvalo a su ubicaciÛn correcta.
RevisiÛn
- øCu·les son los dos formatos gr·ficos usados en el World Wide Web?
- øCÛmo se ve un archivo gr·fico en diferentes ordenadores?
- øQuÈ hay que tener en cuenta cuando se trabaja con im·genes?
- øCÛmo se archivaba un gr·fico para usarlo en un documento WWW?
Pr·ctica Independiente
DÈse una vuelta por la red y busque im·genes. Intente bajar al menos una que pueda serle ™til
para sus documentos. Sitios recomendados:
Yahoo Picture Archive,
SpriteLib,
o Rob's Multimedia Lab.
A continuaciÛn....
Ya tiene la imagen... Ahora... øcÛmo HTML le ayuda a mostrarla en su documento?
Writing HTML LecciÛn 7: Formatos Gr·ficos y de Ficheros
©1995, 1996
Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona
El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al espaÒol por agma@usa.net, y corregido por
AndrÈs Valencia
URL: