Artículo realizado por
Fernando Rodríguez.
Capítulo 7.
Y llegamos a los gráficos...
¡Al fín los gráficos!, suspirareis
muchos... Sí, una página WEB sin gráficos, resulta de lo más soso que os podaís
imaginar, si no llama la suficiente atención visual del visitante, este lo más
probable que haga es marcharse y olvidar para siempre la dirección salvo que,
sepa de antemano lo que se va a econtrar, claro.
En este capítulo del curso acelerado de HTML de Macedonia, vamos a abordar
qué formatos gráficos podemos utilizar en nuestras páginas WEB, sus peculiaridades,
cómo insertarlos y, por último, algunas precauciones sobre su "uso y abuso". Sin más,
comenzamos
Los dos formatos gráficos más utilizados
En el mundo de la informática, programación, etc, existen una grandísima cantidad
de formatos gráficos, realmente, podríamos llegar a decir que, existe un formato
gráfico para cada tipo de utilidad que necesite un programador, dependiendo de
montones de factores. Sin embargo, por fortuna, existe un estandar de utilización
de formatos cuando nos movemos en la creación de una página WEB, así, siempre
utilizaremos dos formatos o bien .GIF o bien .JPG, los cuales, como vamos a ver
a continuación van a tener una serie de características que los van a diferenciar
para determinados tipos de cometido y tareas a la hora de dar vistosidad
a nuestra página WEB.
Antes de proceder con el análisis de cada tipo de archivo decir que, si posees gráficos
que se encuentran en otro formato como puede ser un BMP, un PNG, un TIF, etc, existen
multitud de programas Shareware que te permiten hacer cambios de un formato a otro,
sin ir más lejos, teneis el veterano Graphics Work Shop (GWS para los amigos), el SEA ,
Paint Shop Pro, Corel, Adobe, etc... (si bien estos dos últimos ya son comerciales).
Análisis del formato GIF
Los más viejos del lugar, sabrán de sobra que este formato fue creado por la
empresa Unisys hace ya, mucho tiempo y que con el paso del tiempo, ha ido
evolucionando hasta ser un formato con un nivel mucho mayor de complejidad
que el original GIF con el que todo nosotros solíamos contemplar los gráficos
cuando, 256 colores era todo un lujo.. :,-)
El formato GIF utilizado en nuestros días como perfecto aliado en la construcción
de una página WEB, posee las siguientes características:
Permite la utilización de fondos transparentes.
Emplea un máximo de 256 colores.
Permite la posibilidad de crear animaciones mediante
la inserción de varias imágenes, una detrás de otra, en el archivo.
Esta basado en una compresión que es muy
elemental, pero es compresión a fin de cuentas, llamada LZW.
La utilización de gráficos de tipo GIF, nos será de muchísima utilidad para poder
poner iconos, gráficos que no tienen forma cuadrada y que, mediante la transparencia
de su fondo, hacen que la página adquiera toques muy profesionales, para los típicos
y sorprendentes gráficos animados, etc. Sin embargo, no busqueis elevada calidad
de imagen con este archivo gráfico porque no se ha hecho en absoluto para ello. El
máximo de colores que soporta son 256 y su cometido en la página WEB no es más
que el de dar vistosidad ayudando a realizar la maquetación pero, en ningún
caso, el de mostrar gráficos de gran calidad como pueden ser fotografías escaneadas,
para esos tendremos, como vamos a ver a continuación, el formato JPG.
Antes de continuar, no podría pasar sin recomendaros que os hicierais con un buen
programa para la realización de gráficos .GIF animados, existen multitud de ofertas
en el mundo Shareware, sin ir más lejos, está el GifIcon que lo podeís encontrar
en la siguiente dirección:
http://www.mindworkshop/alchemy/gificon.html, es super sencillo de manejar y tiene
unos resultados altamente interesantes.
Análisis del formato JPG
Este formato, tiene una grandísima ventaja de cara al GIF, y es la derivada de
poder manejar simultáneamente hasta 16,7 millones de colores siendo, así, el formato
ideal para poder representar gráficos de alta calidad y que se escapen, totalmente,
de las pretnesiones de un GIF.
Otro de los puntos fuertes del formato JPG es el que posibilita la grabación de
nuestros gráficos en distintos modos de calidad de esta manera, podemos sacrificar
un poco de calidad visual de nuestro gráfico y ganar en espacio. Esto último
es muy importante por dos razones la primera porque en la práctica totalidad de
las ocasiones (por lo menos eso es lo que nos pasa a nosotros) el espacio que
tengaís en vuestra página WEB será muy limitado y tendréis que medir "al dedillo"
lo que váis poniendo y por otro lado, porque a menor tamaño menos tardará el
navegador que utilicéis en reconocer el archivo gráfico y mostrároslo por la
pantalla y creerme, hay multitud de páginas que fracasan precisamente en el tema
de la lentitud debido a que sus autores deciden "atiborrarla" de archivos gráficos
que hacen la carga terriblemente lenta para los navegadores produciendo que
el "navegante" decida dar antes al botón de Stop que estar sentado y esperar una
eternidad a que la página tenga el aspecto visual correcto.
¿Y cómo los inserto en mi página?
Bien, la inserción de gráficos en nuestras páginas es una de las tareas más fáciles
que existe ya que sólo tenemos que utilizar una directiva llamada <IMG> para realizar
tal acción cabe decir que junto a tal directiva deberemos de poner el nombre
de nuestro gáfico y que para eso utilizaremos la etiqueta src="nombre_del_gáfico".
Por ejemplo, si quisiesemos sacar por pantalla el logotipo de Macedonia y centrado
en pantalla, es decir, hacer algo así:
Tan sólo deberíamos de poner el código HTML siguiente:
<CENTER>
<IMG src="logo.gif">
</CENTER>
En dónde logo.gif es nombre del archivo que contiene dicho gráfico. Como podeís ver
es muy fácil mostrar gráficos en pantalla lógicamente, existen más atributos para
poner a <IMG>, pero mejor que los mireis con una referencia de todas los comandos
del lenguaje HTML ya que, como sabeís, el cometido de este curso es aprender hacer
una página desde el nivel más básico no enseñaros todo lo que existe sobre HTML.
Otra de las cosas que considero importante, es el tema de poder crear enlaces a
otras páginas mediante la pulsación de un gráfico además, aprovecharé y os enseñaré
una cosa más para que cuando ofrezcaís el enlace a otra página, esta
sea accedida en una nueva ventana de nuestro navegador evitando el incordio que supone
ver cómo la página a la que ofreces el enlace te "machaca" la tuya. Lógicamente, esto
sólo nos interesará para cuando ofrezcamos Links a otras páginas, nunca para estar
navegando en la nuestra.
Así, si quisiesemos ofrecer un link a la sección "Colabora con nosotros" de esta página
pulsando sobre el logotipo de Macedonia... ¡Púlsalo ya!:
Lo que deberíamos de poner sería:
<CENTER>
<A HREF="index09.htm" target="_new">
<IMG src="logo.gif">
</A>
</CENTER>
Podeís observar que ponemos un atributo llamado target con el valor _new para hacer
que la página a la que ofrecemos el enlace se cargue en una nueva ventana del
navegador. De no haberlo puesto, machacaría lo que estaís viendo mostrando
el enlace aquí mismo.
Poniendo gráficos de fondo
Poner gráficos de fondo, puede ser una estupenda manera de realzar o... ensombrecer
nuestro texto en pantalla, me explico. Ahora mismo, si estas leyendo Macedonia
con 16 millones de colores, podrás observar que el fondo en el que aparecen los
artículos es salmón texturizado mientras que, en el que sale el menú es de mármol.
Esto se consigue utilizando un pequeño gráfico de fondo el cual, se va repitiendo
en todas las direcciones simulando que es un grán gráfico que hemos puesto de fondo..
Sin ir más lejos el fondo que tienes en el menú no es más que el gráfico siguiente
repetido, sin parar, hasta que ya no hay texto:
Para conseguir tal efecto, tan sólo tenemos que añadir justo al comienzo de nuestro
documento la siguiente instrucción:
<BODY background ="nombre_archivo.extensión">
En dónde el archivo será el gráfico que vosotros eligais para poner de fondo.
Como podeís ver es muy sencillo dar fondo a vuestras páginas pero, recordad, intentar
elegir gráficos pequeños y que mantenga coherencia entre todos sus lados para que,
el juntarlos produzca algo homogenio.
Consideraciones finales
La inclusión de gráficos en nuestras páginas es algo imprescindible si queremos
que, al menos, tenga oportunidad de llamar la atención del usuario que está
en esos momentos vistándola. El uso de archivos GIF animados se ha extendido
enormemente y siempre es agradable observar esta o aquella animación en la
pantalla del monitor al igual, que alguna imagen de alta calidad para realzar
la página. Si bien, hay que ser cautos y no aprovecharse de los gráficos pues,
un uso indiscriminado de estos acabarán por relentizar nuestra página y hacer,
como ya indiqué por algún sitio del artículo, que el usuario se acabe marchando
al estar esperando un tiempo casi interminable para ver la pantalla de nuestra
página en condiciones.
Otro de los aspectos a tener en cuenta, es el uso de las ya vistas tablas con
los gráficos. Esta combinación, produce efectos estupendos de maquetación con
respecto al texto y es cita obligada de prueba a todo WEB Master que se precie ;).
Por último, recodar que si utilizaís gráficos .JPG a veces os será mejor sacrificar
calidad que cargar con todo el tamaño original del archivo. Del mismo modo, intentar
encontrar gráficos de fondo pequeños y que mantengan, si están unidos, la coherencia
entre sí, lo demás con un poco de práctica y una guía con los comandos posibles
para utilizar los gráficos, lo teneis chupado ;).