> Manuales > Curso práctico de diseño web, parte II

Describimos otros tipos de formatos gráficos no tan comunes en las páginas web, pero wue tienen importancia.

Podemos destacar otros formatos gráficos que nos podemos encontrar en páginas web, aunque de manera no tan habitual y solo para usos realmente puntuales. También hablaremos de otros tipos de medios de entrada para ficheros gráficos que se están usando actualmente y que tienen diversas ventajas.

Por ejemplo, los iconos en archivos .ico, usados habitualmente para generar el "favicon", las denominadas "icon fonts" que ahora están tan de moda, así como generar los gráficos dinámicamente con Javascript gracias a HTML5. La verdad es que a medida que la web avanza se van implementando nuevas formas de trabajar con ficheros y que merece la pena conocer para sacar el máximo partido a los recursos disponibles.

Nota: Este artículo tiene texto antiguo del artículo original por Luciano Moreno, junto con partes que han sido revisadas en 2015 por Miguel Angel Alvarez.

ICO (.ico)

Formato gráfico de mapa de bits, concebido para elementos gráficos de escritorio y de aplicaciones, válido para PC y MAC.

Las imágenes en este formato reciben el nombre genérico de iconos y tienen unos tamaños y números de colores prefijados: 8x8, 16x16 y 32x32 píxeles, a 256 y 16 colores, y 48x48 píxeles a 64 colores en el caso de Windows XP y MacOsX.

        
Formato ICO    Formato GIF

El formato ICO es soportado tan sólo por Internet Explorer, por lo que en la imagen superior os pongo una variante en formato GIF, para aquellos de vosotros que estéis usando Netscape Navigator.

Actualizado: La utilidad real de los archivos .ico estriba en usarlos como icono de favoritos, o icono de la web. Ese icono que se puede ver al lado del título de la página en la pestaña del navegador. Te explicamos cómo generar tu .ico en este artículo.

Los gráficos en formato ICO están presentes en casi todos los sistemas operativos, tanto como iconos representativos de accesos directos a programas como en los menús de navegación de las diferentes aplicaciones.

Son pocos los programas gráficos que permiten grabar imágenes en este formato, aunque existen algunos especialmente dedicados a esta tarea, entre los que destaca Microangelo, que es una clásica herramienta que permite tanto crear iconos directamente como importar un gráfico en uno de los formatos más comunes y guardarlo en formato ICO. Otra alternativa es Babygimp, editor de iconos escrito en Perl/TK. Pero herramientas generalistas también te pueden servir, como es el caso de Gimp, el editor de gráficos gratuito, alternativa a Photoshop. En este artículo te explicamos cómo construir un icono con Gimp. Puedes usar Photoshop si tienes el correspondiente plugin o diversas herramientas online para convertir y editar archivos gráficos diversos y pasarlos a .ico.

Fuentes con iconos

Podemos encontrar un tipo de formato para generar gráficos que no está pensado justamente para crear imágenes, sino letras. Se trata de fuentes tipográficas que en lugar de caracteres del alfabeto tienen signos o iconos diversos que se pueden usar para decorar una web y agregarle valor visual.

Las fuentes de iconos, también llamadas "iconfonts" se suelen usar en conjunto con CSS, de modo que a través de clases (class de CSS) se puede decir que en determinados contenedores se debe colocar un icono dado. Como son en realidad tipografías, permiten agrandar y reducir el tamaño de las imágenes sin pérdida, también por medio de CSS, lo que las hacen muy versátiles. Además, en una tipografía puedes colocar decenas o cientos de iconos diferentes con los que abarcar todas las necesidades de un sitio complejo.

Estos tipos de imágenes generados a partir de fuentes de letra son muy útiles y en la actualidad son una recomendación en muchos casos. Para encontrar mas información te recomendamos el artículo Ventajas de usar iconos mediante fuentes tipográficas.

Canvas de HTML5

No nos olvidamos que también puedes generar archivos gráficos a partir de código Javascript. Ya hablamos del formato SVG cuando repasamos los formatos habituales para páginas web, pero hay un elemento del HTML que permite algo parecido, solo que no creas los elementos en vectorial, sino en mapa de bits. Se trata del elemento Canvas del HTML5.

El canvas permite, mediante código Javascript, rellenar con dibujos áreas de la página. Esos dibujos además pueden tomar movimiento y pueden incluso responder a la interacción del usuario, permitiendo hacer juegos HTML5 y otro tipo de utilidades de interacción con el usuario o efectos gráficos. Tenemos un manual de canvas para conocer más sobre todo esto.

IFF/LBM (.iff/.lbm)

IFF (Interchange Format Files) es un metaformato de muestras de los ordenadores Commodore Amiga, que puede almacenar imágenes bitmap, música, texto o cualquier tipo de información en general.

Con el tiempo, la empresa Electronic Arts hizo una variación de una de las aplicaciones más conocidas de Amiga para la creación de ficheros en formato IFF, Deluxe Paint, dando a sus ficheros la extensión LBM.


Los formatos IFF y LBM son exactamente iguales, por lo que para convertir un fichero de uno al otro basta con renombrar su extensión.

Es posible trabajar con ficheros IFF tanto en PC como en MAC usando Photoshop, ya que este programa puede abrir los ficheros originales, trabajar con ellos y guardarlos luego en cualquier otro formato más común en estos equipos.

En cuanto a los colores, los gráficos en estos formatos pueden manejar 8 bits de profundidad de color, es decir, 256 colores como máximo. No es soportado por ningún navegador web.

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabill...

Manual