¿Alguna vez has ido a usar un emoji en tu HTML y te has enfrentado al temido símbolo "?"
Al tratar de encontrar una respuesta a esta pregunta en Google, me enfrenté a un aluvión de información diferente sobre cómo insertar emojis de diferentes maneras, cuando todo lo que quería era una respuesta simple.
Para eso es este artículo: una explicación rápida y fácil que incluso la persona más fóbica a la tecnología podría seguir, porque:
Un emoji es un recurso muy útil para animar el contenido de un post, además de su amplia difusión por parte de muchos escritores que recurren frecuentemente a su empleo.
La mayoría de nosotros agregamos pequeños emojis divertidos a nuestras publicaciones y textos, ya sea para expresar felicidad, tristeza o alguna otra emoción.
Si te preguntas por qué se llaman emojis, acá te facilito pistas.
Al principio, pensé que era un acrónimo de algo, pero no lo es.
En realidad es una mezcla de dos palabras japonesas.
La palabra japonesa ‘ e ’ significa imagen, y la palabra japonesa ‘ moji ’ significa carácter.
Tampoco son nuevos.
De hecho, ¡los emojis se usaron por primera vez en la comunicación de teléfonos celulares en Japón en 1999! Hay muchos más ahora.
Curiosamente, el Oxford English Dictionary eligió un emoji — la única lágrima de alegría — como la palabra del año en 2015.
🔸 Es importante siempre tener presente, que una característica de los textos en internet, es la ruptura del texto rígido (que lo hace aburrido), para dar paso a un texto más ameno, más relajado, que atrae más al lector, y que influye en el SEO, lo cual es resultado no solamente de un estilo de redacción más ligera, sino también de una presentación variada, polifacética, que combina variedad de recursos pictóricos como imágenes, íconos y por supuesto, los divertidos emojis.
Los emoji son de los últimos treinta años y se volvieron extremadamente populares con el uso de teléfonos inteligentes. Aunque inicialmente los jóvenes usan emoji en chats informales y conversaciones de mensajería instantánea, hoy en día se ha vuelto común usar emoji en la comunicación formal. Si es un desarrollador web, bloguero o propietario de un sitio, también es posible insertar emoji en HTML como cualquier otro contenido de texto. Esto hará que su contenido sea atractivo para los lectores cuando lo lean en el navegador.
Entendiendo Emoji
Antes de continuar, estos son algunos de los puntos que debe comprender sobre los emoji.
El consorcio Unicode, una organización sin fines de lucro, define la especificación de cada carácter emoji y mantiene la documentación técnica.
Para usar emoji, debe asegurarse de que el documento HTML use el formato de juego de caracteres UTF-8.
Hay más de 1300 emoji oficiales disponibles según Unicode e innumerables emoji no estándar también están disponibles de varios otros desarrolladores. Puede insertar el emoji Unicode formal en documentos HTML sin herramientas de software adicionales.
Los emoji son caracteres de texto como caracteres alfanuméricos. En teclados móviles iOS y Android, puede cambiar la distribución del teclado para insertar emoji. Sin embargo, los teclados de escritorio no tienen teclas dedicadas para cada símbolo emoji.
Punto de código Unicode
El propósito del consorcio Unicode es hacer que los emoji como caracteres estándar se usen de manera uniforme en todos los dispositivos e idiomas. Para realizar esta tarea, asignarán un punto de código único para cada símbolo de emoji con una representación predeterminada. Los desarrolladores de aplicaciones y sistemas operativos pueden hacer uso de este punto de código para usar la representación predeterminada o personalizar la apariencia. Por ejemplo, U + 1F609 es el punto de código del popular emoji Guiño de la cara (Winking Face). Puede obtener los puntos de código de la página oficial de emoji Unicode.
| Emoji | Codepoint | Hexadecimal | Decimal |
|---|---|---|---|
| Guiño de la cara | U + 1F609 | 1F609 | 128521 |
Como puedes ver, el punto de código no es más que el código hexadecimal en el formato "U + hexadecimal".
Insertar un Emoji en HTML
Puedes utilizar este código hexadecimal en HTML o convertir este código hexadecimal en formato decimal.
Estos códigos generalmente se les denomina entidades de escape HTML o cadenas de escape.
Veamos cómo usar estos códigos correctamente en una página web HTML, con una serie de sencillos PASOS que se exponen a continuación:
Definición de UTF en HTML
PASO 1: Como se mencionó previamente, el primer e importante paso inicial, es asegurarse de que tu documento HTML tenga la metaetiqueta charset. Asegúrate de poner este código dentro del encabezado de tu documento HTML (si aún no lo has hecho). Esto debe hacerse para que tus emojis se muestren de manera consistente en varios navegadores. Se muestra a continuación:
<meta charset=“UTF-8”>
La plantilla HTML completa debería verse como a continuación:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Página web HTML con emoji</title>
</head>
<body>
...Tu contenido va aquí...
</body>
</html>
Asegúrate de utilizar la declaración de codificación de caracteres inmediatamente después de la etiqueta head. Esto indicará a los navegadores que interpreten las cadenas de escape hexadecimales y decimales como símbolos emoji adecuados.
Etiquetas HTML para usar con Emoji
PASO 2: Como los emoji son caracteres de texto, puedes usar cualquier etiqueta HTML relacionada con el texto para insertar emoji.
En tal sentido, las etiquetas de párrafo y espacio son dos opciones sencillas:
<p> emoji </p>
<span> emoji </span>
Recuerda, generalmente la etiqueta de párrafo creará una nueva línea mientras que el intervalo continuará en la misma línea.
Además, también puedes usar emoji con otras etiquetas como <li> para crear una lista de emoji.
Después de definir el conjunto de caracteres y decidir la etiqueta que deseas usar, hay varias opciones para insertar emoji en tu página HTML.
Usando código hexadecimal en HTML
Consulta el código Unicode para el emoji que deseas usar, para lo cual el sitio web https://unicode.org/emoji/charts/full-emoji-list.html es un gran recurso para usar. Si quiero usar el emoji a continuación, usaría el Unicode u+1F609.
Fuente de la imagen: https://unicode.org/emoji/charts/full-emoji-list.html
Para mantener la secuencia, sigamos con el mismo ejemplo del emoji guiñando la cara (emoji Winking Face).
PASO 3: Una vez que en la anterior página te has decidido por el emoji a utilizar, lo siguiente es quitar el u+ y reemplázarlo con &#x y luego agregue un ; al final.
Su código final para este emoji debería verse así ---> 😉
Para configurar el emoji usando código hexadecimal, lo puedes hacer con el siguiente formato html para insertarlo en tu contenido.
<style>
td:last-child { font-size: 3em; }
tr:first-child td:last-child { font-size: 1em; }
th { text-align: left; font-weight: normal; }
</style>
<table>
<tr>
<th>Nombre del personaje Unicode: </th> </br>
<td>Emoji guiñando la cara (emoji Winking Face). </td>
</tr>
<tr>
<th>Hexadecimal:</th>
<td> 😉 </td>
</tr>
</table>
Seguidamente el resultado:
| Nombre del personaje Unicode: | Código | Emoji guiñando la cara (emoji Winking Face). |
|---|---|---|
| Hexadecimal: | 😉 | 😉 |
Nota
Puedes utilizar letras mayúsculas o minúsculas para escribir el código hexadecimal. Producirá el resultado.
Código decimal Emoji en HTML
En lugar de código hexadecimal, puedes usar el código decimal como cadena de escape con el siguiente formato.
Su código final para este emoji debería verse así ---> 😉
Para configurar el emoji usando código hexadecimal, lo puedes hacer con el siguiente formato html para insertarlo en tu contenido.
<style>
td:last-child { font-size: 3em; }
tr:first-child td:last-child { font-size: 1em; }
th { text-align: left; font-weight: normal; }
</style>
<table>
<tr>
<th>Nombre del personaje Unicode:</br>
<td>Emoji guiñando la cara (emoji Winking Face).
<tr>
<th>Decimal:</th>
<td> 😉 </td>
</table>
Seguidamente el resultado:
| Nombre del personaje Unicode: | Código | Emoji guiñando la cara (emoji Winking Face). |
|---|---|---|
| Decimal: | 😉 | 😉 |
Nota
Se ha comprobado que se produce el mismo resultado que el anterior. La diferencia radica en el código que se ha transformado, al intercalar el decimal 128521 en el lugar de 1F609 para sustituirlo, y además se elimina la x.Ojo; Sería bastante interesante que pudieras hacer una prueba rápida con los dos códigos empleados en el ejemplo analizado, escribiéndolos en el visualizador de código HTML de la siguiente URL: www.htmledit.squarefree.com/ 👀
Además, a continuación una página con emojis codificados de las dos maneras explicadas, para que escojas la metodología que te parezca mejor. La URL es la siguiente: www.quackit.com y, por cierto, también te aporta la facilidad de un visualidor rápido de código HTML, lo cual es muy importante porque ejercitas de una vez lo aprendido.
Para cambiar tu emoji, cambia simplemente el número de código uni... verás que cualquiera puede calzar un emoji en sus textos siguiendo las instrucciones de esta lección... ¡muy fácil!!!.
Insertar directamente Emoji en HTML
Aunque los dos métodos anteriores son fáciles de usar, no funcionarán en todos los casos.
El problema es que no todos los emoji tienen un solo punto de código.
Hay muchos símbolos emoji que contienen una combinación de puntos de código. Por ejemplo, el punto de código para el emoji científico es U + 1F9D1 U + 200D U + 1F52C que no se puede escribir con los métodos anteriores. La opción más fácil aquí es copiar y pegar el emoji que necesita entre etiquetas HTML.
El siguiente es un símbolo del emoji flag su código científico es: <span><i class="emoji_font line">🚩</i>flag</span>
... y se ve así (aplicando font-size de 40px): 🚩flag
Dicho emoji tienes dos opciones para generalo:
A través del código precitado
Aplicando directamente copy-pega del mismo
Realmente son muy prácticos, y puedes hallar emojis de este tipo en las siguientes URL: www.emojiall-com www.emojipedia.org www.emojiterra.com
Emojis con CSS
Puedes con CSS ajustar características del emoji, como tamaño y color, solo copia el Código Decimal y pega en tu página, los íconos blanco y negro pueden cambiar de color utilizando CSS, aplicar CSS para cambiar de tamaño según las necesidades.
