|
Insertar una imagen
Bien
sea para ilustrar la información contenida en nuestras
páginas o para
integrar un largo texto o, por que no, por cuestiones
estéticas, es
prácticamente imposible evitar colocar alguna que otra
imagen en
nuestras páginas web. En la elaboración
de
páginas web se utilizan principalmente imágenes
de tipo mapas de bits,
concretamente los formatos gráficos GIF,
JPG
y PNG.
Son sistemas de almacenar imágenes pensados para minimizar
el tamaño
que ocupan en disco manteniendo una calidad aceptable. Lo primero
facilita la transmisión de archivos gráficos,
mientras que lo segundo
hacen que las imágenes sean
útiles. Cuando se inserta una
imagen, Nvu guarda la referencia a la imagen en la
página. En el caso de publicar en la web, es preferible no
utilizar las imágenes BMP puesto que pesan bastante y
dificultaría su visualización.
Ademas, es mejor
guardar o publicar primero su
página antes de insertar imágenes en ella. Esto
permite a
Nvu utilizar automáticamente referencias relativas a los
archivos de las imágenes cuando las inserta.
1. Elección
del formato
a) Formato GIF
El
formato GIF (Graphics Interchange Format), nació en el
año 1987 de la
mano de Compuserve con objeto de colorear sus imágenes,
hasta entonces
codificadas en su formato RLE en blanco y negro. La versión
original
(GIF87a) fue sustituida por la GIF89a. Actualmente existe un problema
de licencias que desaconseja su uso en favor del formato PnG. Sus
características más importantes son:
- Es un formato de compresión sin
pérdidas lo que aligera el tamaño final
del archivo, manteniendo su calidad.
- Se utiliza principalmente para imágenes de
colores planos, o sea,
grandes manchas de color homogéneo, sin variación
cromática, al modo de
los dibujos infantiles.
- Permite "transparencias", es decir, seleccionando uno
de
los colores de
la imagen éste se vuelve transparente, permitiendo ver a
través de él
cualquier fondo, o imagen que esté situada detrás.
- Permite, con el programa adecuado, crear animaciones
presentando varias
imágenes una tras otra como si de un "dibujo animado" se
tratara.
Utiliza una paleta de 256 colores como máximo, lo que nos
permite
elegir entre varios tamaños para un mismo archivo.
b) Formato JPG
El
formato JPG o JPEG (Joint Photographic Expert Group ), es el
más
utilizado para la transmisión de fotografías,
nació en el año 1986. Es
un formato muy recomendado para imágenes con una amplia gama
de colores
y que permite ajustar el grado de compresión y por tanto la
calidad de
la imagen. Sus características más importantes
son:
- Es un formato de compresión con
pérdida: aligera el tamaño final del archivo,
pero le resta calidad.
- Se
utiliza principalmente para incluir en la web fotografías
con un
elevado número de colores (trabaja con un formato de 16
millones de
colores).
- No permite definir colores transparentes.
- No permite crear animaciones.
- Con
el formato JPG, podemos escoger el grado de compresión, de
manera que
cuanto mayor sea la compresión mayor es la
pérdida de calidad de la
imagen.
- Codifica los
colores con 24 bits,
por lo que puede manejar una paleta de más de 16
millones de
colores, lo que se llama color verdadero.
c) Formatos PNG
PNG
(Portable Network Graphics) es un formato gráfico basado en
un
algoritmo de compresión sin pérdida para bitmaps
no sujeto a patentes.
Este formato fue desarrollado en buena parte para solventar las
deficiencias del formato GIF y permite almacenar imágenes
con una mayor
profundidad de color y otros importantes datos. Sus
características
principales son:
- Es un formato de compresión sin
pérdidas lo que aligera el tamaño final
del archivo, manteniendo su calidad.
- Soporta formato de color indexado (256 colores) y
profundidades de
color de 48 bits y escala de grises de 16 bits.
- Permite colores transparentes y transparencias
graduales.
- No permite crear animaciones, existe un formato
relacionado
para
animaciones, pero está poco extendido: MNG.
- El usuario puede elegir el formato a usar en la
codificación de la
imagen: PNG8 (análogo al GIF) o PNG24 (24 bits de color) no
es adoptado por todos los navegadores, y aún menos por las
versiones antiguas de los mismos.
Observaciones
A la vista de todo
lo
anterior, cuando integremos imágenes en nuestra
página deberíamos tener en cuenta lo siguiente:
- Debemos analizar detalladamente el uso de
imágenes en nuestra página.
Hemos de fijarnos en su necesidad, resolución,
tamaño, formato, etc. El
objetivo es lograr que la página se cargue lo más
rápidamente posible.
- El tamaño del archivo de imagen depende de las
dimensiones de la
imagen y del número de colores que la forman.
- Para colores puros con no más de 256 colores y
gráficos muy simples usaremos el formato GIF o PNG.
- Para imágenes con más de 256 colores
usaremos el formato JPG o PNG24.
- Usar las imágenes con su tamaño real,
evitando que sea el navegador el encargado de reducirlas.
- No colocar demasiadas imágenes en una misma
página. Si necesitamos
mostrar un numero elevado de imágenes, lo mejor es usar una
versión muy
reducida de las mismas (thumbnails o miniaturas) a modo de
índice y
enlazar con páginas individuales donde se muestre cada
imagen por
separado.
- Al diseñar la estructura del sitio
utilizar una carpeta para las imágenes muj usadas a lo largo
de las
diferentes páginas del sitio.
- Usar el atributo
ALT en las imágenes, para facilitar la
comprensión del contenido a los
usuarios y a los robots usados por los buscadores para indexar nuestra
página.
2.
¿Cómo se introduce una imagen?
Para insertar una
imagen,
debemos colocar el cursor en el
punto de inserción donde desee que aparezca la imagen y con
el ratón
pulsamos el
botón Imagen de
la barra de herramientas
Como segunda opción, podemos abrir el
menú Insertar
y
seleccionar Imagen.
En ambos casos, se
abrirá
el cuadro de diálogo Propiedades
de la imagen.
El siguiente paso será Elegir
archivo (retrato1.gif) y buscar el archivo
de imagen en la ubicación del disco duro o en la red local
donde
lo hallamos posicionado (en este caso, dentro de la carpeta greco)
previamente:
Tras pulsar Abrir,
se
ofrece relevante información sobre el archivo
de imagen seleccionado. En primer lugar, se nos dice que se encuentra
en la carte greco el archivo retrato1.gif, en una ubicación
de carácter
relativo, la cual es preferible para una página web. Podemos
posteriormente escribir unl texto
alternativo que aparecerá en los navegadores de
sólo
texto y que aparecerá en los otros navegadores mientras se
carga la
imagen o cuando la carga de imágenes está
deshabilitada.
Alternativamente, puede elegirse no
incluir texto
alternativo. Del mismo modo, podemos visualizar la imagen
en Vista preliminar, así como comprobar el tamaño
real de la misma.
Este archivo de imagen puede ser transformado y modificado atendiendo a
otra serie de funcionalidades que se contienen en Propiedades de la imagen.
En la pestaña Dimensiones
podemos mantener el Tamaño
real de la imagen o bien modificar el mismo accediendo a
la casilla Tamaño
personalizado.
En la pestaña Apariencia se
establecen las distancias entre la imagen y el texto, así
como la
alineación del texto alrededor de la imagen. En nuestro caso
práctico
optamos por fijar el espacio entre la imagen y el texto en 4
píxeles y
posicionar la imagen el la zona derecha de la pantalla de trabajo al
elegir con el curso Fluir
por la izquierda.
En la pestaña Enlace
se
puede establecer un hipervínculo para la imagen. En la
primera casilla
podemos optar entre introducir una dirección web conocida,
un archivo
local o una dirección de correo electrónico, o
selecionar un enlace
interno o una cabecera de lista despegable. Para estas posibilidades
contamos con la opción Elegir
archivo.
También, se puede indicar que dicha dirección es
un correo electrónico,
una URL relativa o mostrar un borde alrededor de la imagen con enlace.
El resultado de las diferentes operaciones llevadas a cabo con la
imagen seleccionada queda reflejado en la siguiente imagen.7
Una vez insertada la imagen, se pueden establecer sus propiedades
haciendo doble pulsación sobre ella, seleccionando la
opción de menú Formato
>> Propiedades
de la imagen o a través del menú contextual.
En caso necesario, haga clic en Edición
avanzada... para
ajustar los valores (por ejemplo, alineación) en el cuadro
de diálogo Propiedades
de la imagen
Mientras
escribe un párrafo que
contiene
una o más imágenes, si desea insertar una
línea de corte
tras todas las imágenes del párrafo, seleccione
Ruptura tras
imágenes (<br clear="all">) en el
menú Insertar.
3. Insertar una imagen como fondo
Ahora colocaremos una imagen de fondo de página. Para ello
pinchamos sobre la página en Formato
--> Colores y
fondo de página.
Luego, en el cuadro de diálogo que se nos muestra elegimos
la sección de Imagen
de Fondo y pinchamos en el botón Elegir archivo.
Como hemos visto antes, la primera ventana que se nos abre es en la que
aparece nuestra Web. Dentro de la carpeta “imágenes”
seleccionamos el archivo (papel.gif en este caso) que deseemos tener
como fondo de página.
En la siguiente
ventana
se comprueba que el archivo seleccionado se ha tomado de la carpeta imágenes
y el archivo responde al nombre de papel.gif;
tiene una URL relativa, lo que es preferible a la absoluta; luego se
pulsa Aceptar.
Si la imagen es más pequeña que la zona de
visualización de una página
(como en esta imagen elegida para el fondo), la repite en forma de
mosaico ocupando toda la pantalla. Por eso las imágenes de
fondo
siempre hay que seleccionarlas bien para que no dificulten la lectura
del texto. Esto mismo que hemos descrito para el fondo de la
página
sirve para el fondo de una tabla que pongamos en ella.
4. Insertar imágenes en las celdas de una
tabla
Propongamos de actividad la siguiente actividad de utilizar una tabla
para insertar en ella imágenes con enlaces a otras
páginas web, con un resultado paracido a este:
[ir arriba]
|
|
Creación de Páginas Web con
NVu/KompoZer
