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: