Hiperimágenes

De Aaron Maltais
Noviembre de 2000

Una hiperimagen es una imagen en una página web que tiene dos vínculos o más dentro de ella. Hacer clic en diferentes partes de la imagen activa los vínculos. Un ejemplo de una hiperimagen podría ser una imagen del mondo dónde hacer clic en un país enviará al usuario a una página de información sobre este país. Sirviendose de la experiencia de convertir un documento ordinograma para uso en un sitio web, este estudio de caso explicará cómo crear hiperimágenes para páginas web y proveer algo de información sobre los ordinogramas para el web.

En primer lugar, hay unas buenas razones para evitar el uso de hiperimágenes, vistas del lado cliente, en su sitio web. Unos navegadores de web mayores no podrán interpretar el código HTML que crea la hiperimagen. Sin embargo, Netscape 2.0 y Internet Explorer 2.0 o más leerá el HTML para la hiperimagen sencilla, vista del lado cliente, describida más abajo. La compatibilidad no es una preocupación importante.

En vez de crear una hiperimagen, se puede cortar una imagen en varias imágenes más pequeñas usando programas de gráficos como Adobe Photoshop o Paint Shop Pro. Con ayuda de tablas, cada imagen distinta puede disponerse para recrear la imagen oríginal en una página web. Para cada imagen distinta se crea un vínculo, resultando el efecto de una hipèrimagen sin usar un código avanzado de HTML. Esto podría ser más fácil que crear una hiperimagen cuando la imagen es bastante básica y puede cortarse en unas cuantas partes fácilmente dispuestas. Pero esto puede plantear problemas y hacerse difícil si la imagen es un poco más complicada.

El ordinograma más abajo no era buen candidato para ser cortado en varias imágenes.

Las cajas azules solamente son objetos vinculados en la imagen. Los vínculos indican un ordinograma más detallado para cada asunto. Como las cajas tienen un efecto sombreado y localizaciones esporádicos, era demasiado difícil cortar la imagen en diversas imágenes.

Fue tomada la decisión de crear una hiperimagen. Como el programa de ordinograma usado para crear la imagen arriba ha prometido que esto puede hacerse automáticamente, esta opcíon era especialmente atractiva.

Este ordinograma fue creado en un programa llamado iGrafx. Como documento de ordinograma, las cajas que deben vincularse son objetos individuales y pueden vincularse con otros documentos como sitios web. Convertido a HTML, el programa cambia el ordinograma en una imagen y crea automáticamente una página HTML separada que referencia la imagen y escribe el código HTML para realizar la hiperimagen desiderada. Este proceso es el mismo en muchos otros programas de ordinograma.

En este caso, el software a incluido el feo nombre fichero del ordinograma a la cabeza de la imagen. Era necesario borrar eso en Photoshop. Además, la imagen tenía anchos márgenes blancos que la hicieron inútilmente grande en cuanto a los píxeles y la memoria. Todos estos problemas fueron fácilmente resueltos en Photoshop en cortando los márgenes. Sin embargo, este cambio de la imagen en Photoshop resultó que la hiperimagen (código HTML) creada por iGrafx se hizo inválida. En ese caso, conocer bien el HTML se hizo una competencia muy útile. La solución de este problema resultó ser bastante fácil pero necesitaba una comprensión de cómo se crean las hiperimágenes con ayuda de HTML.

El código de HTML que escribí para la hiperimagen arriba (i.e. ordinograma) es:

 <table width="100%">
 <tr><td align=center>


 <IMG SRC="treenav.gif" BORDER=0 USEMAP="#LINKMAP1">
 <MAP NAME="LINKMAP1">
 <AREA SHAPE="RECT" COORDS="282,75,498,105" HREF="effect.html">
 <AREA SHAPE="RECT" COORDS="290,195,510,230" HREF="co-operation.html">
 <AREA SHAPE="RECT" COORDS="60,275,245,340" HREF="water.html">
 <AREA SHAPE="RECT" COORDS="405,320,610,365" HREF="clean.html">
 <AREA SHAPE="RECT" COORDS="165,438,395,490" HREF="organic.html">
 <AREA SHAPE="RECT" COORDS="410,475,625,520" HREF="eco.html">
 </MAP>

 </td></tr>
 </table>

Primero, la imagen de ordinograma se referencia usando la etiqueta <IMG SRC=¨****¨ BORDER=O USEMAP=¨¨****¨¨>. Noten que el atributo USEMAP=¨¨****¨¨indica un nombre para la imagen. Este nombre puede ser cualquier que le plazca pero debe incluir el símbolo # delante del nombre.

A continuación, deben insertar la etiqueta <MAP NAME=¨¨****¨¨> que dice al explorador que seguirá una imagen. El atributo NAME=¨¨****¨¨ indica la imagen que será mapeada. El nombre que eligieron en la etiqueta <IMG SRC> para el atributo USEMAP=¨¨****¨¨ se pone aquí, pero sin el símbolo # delante del nombre.

Para cada vínculo en una hiperimagen debe completarse la etiqueta siguiente, <AREA SHAPE= ¨****¨ COORDS= ¨****¨ HREF= ¨****¨>. Noten que se necesitan siempre tres atributos dentro de la etiqueta <AREA>.

• El atributo SHAPE= ¨****¨¨ indica al explorador si la forma será ¨ RECT ¨, que significa rectángulo, ¨ CIRCLE ¨ (círculo) o ¨ POLY ¨, que quiere decir polígono.
• Las coordonadas de píxel, citadas después del atributo COORDS= ¨****¨, determinarán el tamañno de la zona y su colocación en la imagen. Cada punto en una imagen consta de una coordonada de píxel X y una Y. Noten en el código HTML arriba que hay cuatro coordonadas. Éstas son dos conjuntos de coordonadas X-Y. Las primeras dos coordonadas indican el rincón superior izquierdo del rectángulo, mientras que el segundo conjunto indica el rincón inferior derecho. Con esta información el explorador puede crear una zona rectangular. Para círculos, se necesita la coordonada X-Y para el centro del círculo, como también el radio desiderado (en píxeles). Para un polígono, el usuario puede entrar cualquier número de puntos X-Y. El explorador conectará entonces estos puntos.
• Después del atributo HREF= ¨****¨ referencien simplemente un vínculo como de costumbre.

La tarea más difícil en la creación de una hiperimagen es obtener las coordonadas necesarias para referenciar la buena zona en la imagen. La mejor manera de hacerlo es abrir la imagen en un programa como Adobe Photoshop o Paint Shop Pro. Estos programas le dan las coordonadas de píxel de la posición de su ratón cuando la imagen será abierta. Pongan Uds. simplemente el ratón sobre el punto para que necesitan coordonadas y anoten las coordonadas para uso en su código HTML. El método de tanteos, moverse del código HTML a un preestreno de la imagen en un explorador también surte efecto pero lleva un poco más tiempo.

El software de ordinograma empleado para crear la imagen arriba era útil por dos razones importantes. Primero, me permitió crear un ordinograma que parece mucho más atractivo que cualquier cosa que podría crear usando el código HTML sólo. En segundo lugar, convertió el ordinograma del formato precisado en el software en una imagen para que pudiera emplearse en un sitio web. El software creó también una página HTML con código para una hiperimagen de la imagen del ordinograma. Sin embargo, este código se hizo inválido si la imagen fue editado en cualquier manera, y las imágenes a menudo necesitan editarse para uso en páginas de web. Sin conocer el código HTML para crear hiperimagenes, puede que esta limitación del software de ordinograma presente serios problemas de resolver. Pero, con conocer algo de hiperimágenes, la creación de un ordinograma, que parecía atractivo mientras servía de instrumento muy útil de navegación, resultó ser tarea simple.