Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

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:

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:

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

  1. ¿Cuáles son los dos formatos gráficos usados en el World Wide Web?
  2. ¿Cómo se ve un archivo gráfico en diferentes ordenadores?
  3. ¿Qué hay que tener en cuenta cuando se trabaja con imágenes?
  4. ¿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?
IR A.... | Índice de lecciones | anterior: "Listas, Listas, Listas, y más Listas" | siguiente: "Imágenes Inline" |


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: