Archive for the ‘Diseño’ Category

h1

Mapa de Imágenes o Image Map

15 diciembre 2008

Siguiendo con la serie de entradas sobre rendimiento web, quería explicar un poco más que es un mapa de imágenes. Un mapa de imágenes es una imagen con areas sobre las que se puede establecer un link. Las hay de dos tipos del lado del cliente y del lado del servidor,  las del lado del cliente son mejores de cara al rendimiento, ya que, no requiere de una petición al back-end, aunque son menos flexibles que las del lado del servidor.

A continuación pondré un código de ejemplo de un mapa de imágnes del lado del cliente. Para usar esta técnica lo único que hay que hacer es establecer las coordenadas de cada area y el link de dicha area. Por ejemplo:

<MAP NAME=”map1″>
<AREA  HREF=”enlace1.html” ALT=”alt1″ TITLE=”titulo1″   SHAPE=RECT COORDS=”6,116,97,184″>
<AREA  HREF=”enlace2.html” ALT=”alt2″ TITLE=”tutilo2″  SHAPE=CIRCLE COORDS=”251,143,47″>
</MAP>

<IMG SRC=”imagen.gif”  ALT=”alt de la imagen” BORDER=0 WIDTH=300 HEIGHT=300 USEMAP=”#map1″><BR>

En la configuración del mapa vemos los siguientes atributos:

href: url del enlace

alt: alt del enlace

title: título del enlace

shape: forma de la figura que puede ser:  default|rect|circle|poly

coords: Que son las coordenadas del area que se definde de la siguiente forma:

  • rect: left-x, top-y, right-x, bottom-y.
  • circle: center-x, center-y, radius. 
  • poly: x1, y1, x2, y2, …, xN, yN. La primera x e y deberían ser la misma que xN e yN para cerrar el polígono.
Anuncios
h1

CSS Sprites

12 diciembre 2008
Antes que nada, quería explicar que esta entrada no pretende mostrar un ejemplo práctico de como se usan los CSS Sprites, mi objetivo es dar unas nociones de qué es exactamente esta técnica. Los CSS Sprites es una técnica antigua que se usaba en los juegos bidimensionales y que con un poco de CSS esta técnica se puede aplicar al mundo web. La idea es muy sencilla, todas las imágenes que necesitamos se unifican en una sóla y despues mediante las CSS elegimos la zona de la imagen global que queremos usar en cada momento.
 Imagen usada en CSS Stripes

Imagen usada en CSS Stripes

Mediante CSS creamos las capas necesarias, en caso de que sea una imagen que cambia, es decir, que por ejemplo sea un enlace que cuando estamos encima, pinchamos o ya ha sido visitado,  usamos la técnica de reemplazo de imágenes que más nos guste. Después lo que hay que hacer es posicionar las capas mediante CSS donde deseemos y finalmente le añadimos una imagen de fondo a nuestra capa con las coordenadas que queremos que se muestre de la imagen maestro. Algo tal que así:

   #capa  {
    background: transparent url(nav_logo3.jpg)
    -100px -200px no-repeat;}

El primer valor es el offset horizontal, desde el extremo izquierdo, y el segundo valor es el offset vertical. En realidad, necesitamos jugar un poco con los valores de los pixeles para comprender como funcionan los offsets, pero en cuanto lo hagamos unas cuantas veces, lo dominaremos sin problema.

¿Cuáles son los beneficios y los problemas que existen con esta técnica? Para empezar diremos que en Opera 6, no se pueden poner imágenes a los links, aunque si se hace bien, aunque no se muestren las imágenes nuestros enlaces se veran bien y funcionaran. Otro problema surge si un usuario ha decidido quitar las imágenes, es decir, ha deshabilitado la opción de mostrar imágenes del navegador, pero sigue usando las css, en ese caso, todos los elementos que usen una imagen de fondo no la tendran, en el caso de que lo hayamos usado para un enlace, el enlace funcionará, pero no se verá nada. Una de las ventajas es que el tamaño de la imagen maestro es menor que la suma de los tamaños de las imagenes que la componen.