juanjonavarro.com

secciones

Emoticonos en una página web

Estuve buscando soluciones para poder añadir emoticonos a una página web, concretamente para este weblog, tanto en las entradas como en los comentarios. Quería que fuera una solución de cliente, en javascript, ya que no quiero que el html generado incluya los emoticonos de ninguna manera.

Encontré dos soluciones:

La primera, llamada CSS Emoticons, es la más sencilla y tiene un soporte para emoticonos muy básico. Como ventajas tiene que es una solución pura CSS, no utiliza imágenes. De hecho, realmente lo que hace es girar realmente el texto mediante css, y meterlo en un circulo amarillo. Tiene además un efecto muy curioso: cuando se pasa el ratón por encima (por lo menos en Chrome), el emoticono se anima convirtiéndose en el texto original. Por ahora es la que he utilizado en el weblog. Aquí lo podemos ver en funcionamiento en un codepen:

See the Pen XJoGRR by Juanjo Navarro (@juanjonavarro) on CodePen.

La segunda, llamada emojify.js, es una librería más potente. Como desventaja tiene que se basa en imágenes, que se tienen que cargar de una manera u otra. Como ventaja tiene que la calidad gráfica de los emoticonos es mayor y además tiene mayor variedad, con objetos, vehículos y hasta la caca con ojos. De hecho, se puede usar cualquiera de los emoticonos estándar (sí, hasta para esto hay estándares :-) ). Aquí lo podemos ver en funcionamiento:

See the Pen EaGMvv by Juanjo Navarro (@juanjonavarro) on CodePen.

2 Comentarios
Jaime
24 marzo 2015, 22:37 — #1

Efectivamemte la versión en CSS cargó unos microsegundos más rápido que la de JS. Maybe desde el cache sea imperceptible. iOS 8.2 Safari y Chrome. Saludos

Juanjo Navarro
25 marzo 2015, 07:28 — #2

Hola, Jaime. Aquí no se si se aprecia mucho ya que en realidad los dos ejemplos se cargan desde Codepen, donde el propio entorno (todo el css y javascript que conforma el editor) es mucho más pesado que el propio ejemplo. En cualquier caso, son dos soluciones fáciles de montar, depende de si le quieres dar más peso o menos a los emoticonos en tu web.

Comentarios cerrados para este artículo