Iconos: decoración, información y modos. Unos apuntes 24.2.14

Iconos: decoración, información y modos. Unos apuntes

Los iconos, esos pequeños símbolos presentes en toda la web, de los que los realizadores se sirven para representar cualquier cosa. Con más o menos gusto y más o menos acierto en su consecución.

El uso de estos pictogramas se remonta prácticamente al mismo momento en que las condiciones técnicas de la web permitieron incluirlos en los documentos.

Pero como con todo, el cómo usarlos ha ido cambiando con los tiempos. También las funciones asociadas a ellos. Y cómo no, la forma de crearlos. Básicamente tres:

1. Texto
2. Imágenes y sprites
3. Experimentos Css
4. Iconos SVG
5. Realizaciones complejas

Y dijo ¡Léase la web!

En los inicios todo era texto. Y a él se recurría y en base a él todo se hacía. Así si deseabas contar con caracteres "especiales" debías recurrir a incluirlos mediante su codificación correspondiente. Bien fuese con las llamadas "entidades o entes html" (html entities) o el estándar Unicode. La página oficial del estándar el Unicode Consortium.

Como curiosidad, el estándar de HTML 4 define 252 entidades html. El estándar Unicode en su versión 5.1 más de cien mil y subiendo con cada nueva versión.

Con posterioridad, a estos sistemas se sumaron los distintos archivos tipográficos que incluían entre sus grafos "dibujitos". Y en los últimos tiempos hemos asistidos a toda una eclosión de tipografías iconográficas. Compuestas en su totalidad por iconos.

Las formas de uso o inclusión en el documento web también han ido aumentando. Y los requisitos para ello. En un principio las entidades y unicodes se colocaban diréctamente en el html. Formaban parte de él.

Mientras que las entidades html eran y son "universales" e independientes de la máquina que ejecute el código, con las Unicodes dependerá mucho de qué archivos tipográficos tenga el visitante (y el rango de unicodes cubierto). Aunque lo más seguro es que los más usuales de cada idioma estén.

Con posterioridad y tras la llegada y universalización del uso y soporte de Css se delega en él la tarea de mostrar estos elementos.

Formas de uso

Básicamente dos son las vías utilizadas para ello:

1. Codificación Css en la propiedad 'content'
2. La regla @font-face y archivos tipográficos de iconos

En el uso de los archivos tipográficos con @font-face varias son las formas de incluir los símbolos. Pero la vía de hacerlo a través de pseudoelementos es la que se está utilizando mayoritariamente en la actualidad.

Y en el caso de utilizar los símbolos unicode y para evitar la carga de un archivo excesivamente extenso, Css dispone la propiedad unicode-range.

Ventajas

Las ventajas del uso de "pictogramas" textuales son evidentes. Y de ellas ya hablamos en posts anteriores:

1. Si eres cuidadoso al elegir el archivo tipográfico reducirás el peso de la página y las peticiones al servidor.
2. Modificables al vuelo: tanto el tamaño como el color pueden cambiarse vía css con las propiedades propias del texto.
3. No tiene los problemas de los sprites. Cosas como calcular las coordenadas o que se vean parte de los adyacentes.
4. Admite todas y cada una de las propiedades de los textos, incluidas las sombras. Pero no al perímetro como box-shadow, sino a los trazos que los conforman.
5. Te verás libre de tener que usar programas de edición de imágenes para crearlas y/o modificarlas para cada proyecto
6. Escribe la tuya aquí :___________________

Contras

Pero como todo en esta vida, también tiene alguna espina o limitación el uso de iconos tipográficos. Por el método que sea. Peticiones, peso y tiempos de carga (comunes a cualquier elemento usado en la web) aparte, quizás la mayor limitación es la inherente a su naturaleza: texto.

Esta naturaleza obliga "per se" al uso de un sólo color en los iconos textuales. Obligatoriamente son representados con el valor de la propiedad 'color'. Este monocromatismo podemos paliarlo ligeramente. Bien con la universal text-shadow o con con alguna otra menos extendida y soportada como máscaras css, filtros, modos de fusión ... y mucha imaginación.

Experimentos Css

Por experimentos entiende realizaciones más o menos usables basadas en puro Css.

Con la eclosión de Css llegaron múltiples realizaciones basadas en él. Algunas imposibles de llevar a "producción" y otras que sí se han visto trasladadas. Pero siempre como algo de uso muy puntual y limitado en la mayoría de ocasiones a meras demos.

Tuvieron amplio eco en su día realizaciones como por ejemplo:

• Iconos sociales de Nicloas Gallagher
• Iconos puro Css
• Iconos como éste de David Desandro y los subsiguientes que inspiró.
• Curtis Css typeface
• Múltiples formas y figuras en puro css o shapes css
• Pixel art Css

Sobre esta última, Pixel art Css o el uso creativo de la propiedad box-shadow, son muchos los ejemplos que podrás encontrar en la red. Posíblemente uno de los más conocido sea la Mona Lisa en puro Css. Hay incluso programas para automatizar el Pixel art Css: (1)

Imágenes y sprites

Pero anterior a todo el apartado precedente fue recurrir a imágenes para mostrar los iconos. Práctica que hoy sigue vigente en muchos sites de reconocida presencia en la red como Google, Yahoo!... con un pequeño añadido también muy veterano: los sprites Css.

Fueron presentados por A List Apart allá por 2004. Y básicamente consiste en:

• Reunir en un solo archivo de imagen todos los "dibujitos" que se van a utilizar.
• Mostrar sólo el trozo del archivo que contiene el "dibujito" que nos interese en cada momento con background-position.

De estos dos pasos surgen por igual los beneficios e inconvenientes de la técnica de los sprites. Por un lado la creación del archivo de imagen puede ser arduo así como el obtener las coordenadas de cada "dibujito" para posicionarlo convenientemente.

Para esta parte de creación y posicionamiento existen aplicaciones que facilitan la tarea: generador de sprite.

Otro inconveniente es la dificultad en la modificación del archivo una vez creado. Ya sea para incluir nuevas imágenes o modificar las existentes. Y pese a que el tamaño de cada imagen pueda ser modificado vía Css, tampoco es una práctica de la que debamos abusar.

Pero si estos son secundarios o ya están resueltos, el uso de sprites Css traen aparejados una serie de ventajas nada desdeñables.

• Reducción del peso: el peso del archivo de imagen final siempre será menor que la suma de los individuales.
• Menos tráfico o peticiones: sólo necesitas cargar un archivo de imagen.
• Todos los colores que quieras o necesites.
• Personalización de los iconos: puedes construirte los tuyos propios y exclusivos para tu sitio.
• Vistosidad de efectos sinfín con un poco de imaginación y alguna propiedad Css. Desde el cambio de valor de 'opacity', pasando por transiciones y animaciones para recrear los viejos "rollovers" hasta los más nuevos como los filtros css.

Sobre el uso de sprites Css y todo lo relativo a ellos hay multitud de literatura a tu alcance. Puedes ampliar tu conocimiento sobre ellos:

• Un artículo para iniciarse de Librosweb: Rollovers y sprites
• CSS Sprites Revisited en Smashing Magazine.

Data URI: alternativa a las imágenes tradicionales

Una alternativa al uso de imágenes en los formatos de archivos clásicos (jpg, gif...) para los pequeños iconos es el empleo de "Data URI": incluir diréctamente el recurso en el documento codificado apropiadamente. Ya sea con su MIME correspondiente en el Html o en base 64.

Viable actualmente para pequeñas (en px) imágenes, la longitud del código resultante en muchos casos lo dificultan. En el enlace del párrafo anterio (Wikipedia) tienes una lista de pros y contras.

Lógicamente, el paso de un formato de imagen típico (jpg por ejemplo) a su equivalente en base 64 no es algo que puedas hacer de forma manual. Tienes unos cuantos conversores en línea que te facilitarán la tarea.

SVG

Otro de los formatos gráficos que se ha visto potenciado en su uso es el SVG o gráficos vectoriales escalables.

Más reciente es la aparición de algunos trabajos de creación de iconos creados con SVG y modificando su apariencia con Css. como glyphter un generador en línea de iconos en SVG.

Esto los dota de una característica que las tipografías comunes no soportan: colorido. Cada icono puede tener varios colores y cambiar al :hover, por ejemplo. El escalado de su tamaño tampoco supone ningún problema, no sufren ni pixelación al aumentarlos ni pérdida de nitidez al menguar.

• SVG y los estilos: la especificación.
• SVG and CSS:
• Using SVG. Atención especial a la relación de enlaces al final del post.

También hay autores que avisan de algunos peligros asociados al uso de estos nuevos formatos (data URI o SVG) especialmente en móviles, como Peter McLachlan.

Composiciones Tipografías complejas

Aquí podemos incluir trabajos que mezclan varios métodos para obtener un resultado final distinto a lo que estamos acostumbrados. En la mayoría la base es superponer varios elementos (o pseudoelementos) para obtener colorido o formas compuestas en su aspecto y comportamiento.

Algunas de estas realizaciones son:

1. Iconic: Advanced icons for the modern web. De pago.
2. Stackicons. "Open source and 100% free for any use"
3. Devicons
4. Super semantic multicolor font icons in pure CSS: iconos en cuatro colores, Css básico y webfonts.

semantic multicolor font icons

Stackicons por Parker Bennett

Basado en el uso de @font-face y la fuente Stackicons-Social está conformado con varios elementos y sus pseudoelementos que son los que hacen posible su apariencia y comportamiento. Como es lógico, el html y Css asociado es un poco más complejo que los pictogramas textuales puros.

Recientemente su autor ha publicado este post en Css-tricks donde puedes encontrar información un poco más extensa que en su site.

Tienes disponible una demo para ver su funcionamiento en Codepen

Cuál es la forma ideal

No la hay. O al menos yo no me atrevo a sugerir una como superior a otra. Todo dependerá de las particularidades de cada situación.

Usa Data URI si sólo necesitas unos pocos y pequeños iconos, tal como hacen en la wikipedia.

Usa @font-face y tipografías de iconos si buscas sencillez y facilidad de uso.

Usa sprites Css si buscas vistosidad, variedad y un número significativo de elementos distintos.

Si lo tuyo es la imaginación, creatividad y exploración del imposible no dudes en mezclar ideas y técnicas como hacen los autores de los últimos ejemplos o un usuario habitual del blog como Furoya en este pen

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso