Share
Lo creas o no, hay un formato de imagen integrado en tu navegador. Permite que las imágenes se descarguen incluso antes de que las necesites, las reproduce perfectamente en las pantallas Retina y les permite aplicarles colores y efectos CSS. Ok, no estoy siendo del todo veraz allí. No es un formato de imagen como tal, pero el resto sigue siendo válido. Utilizando Unicode puede crear íconos que son independientes de la resolución, prácticamente no tienen tiempo de descarga y también se pueden diseñar con CSS.
En este artículo, te mostraré lo básico, así como algunas de las cosas interesantes que puedes hacer con Unicode..
Unicode es una forma de permitir que las letras y los signos de puntuación de diferentes idiomas se muestren correctamente en un solo documento. Esto es increíblemente útil; significa que su sitio se puede usar en todo el mundo y mostrará exactamente lo que desea compartir, ya sea que incluya caracteres con acento francés o esté completamente escrito en kanji.
Unicode también se agrega continuamente a; Actualmente está en la versión 6.3, que tiene poco menos de 110,000 caracteres. La versión 7 se lanzará a finales de este año y agregará cerca de 3.000 nuevos personajes.
Junto a las letras y los números, Unicode también especifica algunos símbolos e iconos. Más recientemente, estos se han expandido para incluir los íconos Emoji que puede haber visto en la mensajería de iOS:
Las páginas HTML se componen de secuencias de caracteres Unicode y, cuando se envían a través de una red, se convierten en bytes. Cada letra o carácter de cada idioma recibe un código único, que puede codificarse cuando el documento se guarda o se comparte..
Idealmente, esta codificación utiliza un sistema conocido como UTF-8, ya que puede codificar cualquier carácter Unicode, pero incluso si ese no fuera el caso, cualquier carácter puede definirse mediante una referencia numérica de caracteres. Por ejemplo, usando ♥ producirá un corazón, y simplemente puede escribir ese código directamente en su html ♥.
Ese número puede ser un número estándar o su equivalente hexadecimal. Si es hexadecimal, entonces el número necesita un X delante de ella, así & # x2665; Dará el mismo corazón (2665 es hexadecimal para 9829)..
Si está agregando el carácter Unicode con CSS, entonces deberá usar el valor hexadecimal.
Algunos de los símbolos de Unicode que se usan con más frecuencia tienen un nombre o una abreviatura más memorable que se pueden usar en lugar de esos códigos numéricos. Y (ampersand) o < (menos que) por ejemplo.
Buena pregunta, pero hay varias razones que se me ocurren:
Accentsconagua
@Perfil delantero iconoLa primera de estas razones no debería requerir ningún trabajo adicional. Si su archivo HTML se guarda como UTF-8, y se codifica cuando se envía a través de una red como UTF-8, todo debería verse bien.
Debería. Desafortunadamente, no todos los navegadores o dispositivos admiten todos los caracteres Unicode por igual (no esperaba que algo en la web fuera tan simple, ¿verdad?) Los caracteres como los símbolos Emoji no son compatibles con todos los dispositivos, pero esos caracteres con "nombre" son mucho más confiable.
Para asegurarse de que está utilizando UTF-8 en una página HTML5, agregue al de sus paginas web. Si no estás usando HTML5 entonces necesitarás en lugar.
La segunda razón es porque hay muchos caracteres Unicode muy útiles que se pueden usar como iconos en una página web. Por ejemplo: ▶, ≡ y ♥.
Lo que es genial es que, donde se admite, no hay archivos adicionales para descargar que muestren estos iconos, lo que significa que su sitio es un poco más rápido. También puede agregar color, o una sombra paralela a ellos con CSS. Cada vez más creativo, podría agregar una transición para cambiar suavemente el color cuando alguien se desplace sobre el ícono, y no puede hacer eso con las imágenes..
Digamos, por ejemplo, que quería incluir un pequeño indicador de calificación de estrellas en mi página web. Yo podría hacer algo como esto:
& # x2605; & # x2605; & # x2605; & # x2606; & # x2606; Esto nos daría algo como la imagen de abajo:
Un indicador de clasificación de ejemplo visto en Firefox Lo que podrías ver ocasionalmente, sin embargo, es algo como esto:
El ejemplo de calificación visto en un BlackBerry 9000 Esto es lo que sucede cuando estos caracteres no funcionan en el dispositivo o el navegador que se está utilizando. (Afortunadamente, estas formas de estrellas están muy bien soportadas, y solo me he encontrado con teléfonos BlackBerry más antiguos que tienen problemas con ellos).
El carácter que vea si el carácter Unicode requerido no es compatible variará; Es posible que vea un rectángulo vacío o un diamante con un signo de interrogación en su lugar..
Entonces, ¿cómo puedes encontrar el carácter Unicode que te gustaría usar? Bueno, puedes desplazarte por un sitio como Unicodinator para ver qué hay disponible, pero me encanta usar Shapecatcher. Este increíble sitio te permite dibujar el ícono y sugerirá los caracteres Unicode más cercanos que puedes encontrar para que los elijas..
Si estás usando un @Perfil delantero icono, entonces es posible que desee considerar el uso de un carácter Unicode similar al de respaldo. De esta manera, en un navegador o dispositivo que no soporta @Perfil delantero (como Opera Mini o Windows Phone 7) el usuario al menos vería un personaje similar:
Los iconos de Font Awesome en Chrome a la izquierda, y a la derecha, los caracteres Unicode subyacentes se muestran en Opera Mini Muchos @Perfil delantero Las herramientas están predeterminadas para usar un rango de caracteres Unicode que deliberadamente no tienen un significado o una forma predeterminada (a menudo denominados área de uso privado o caracteres PUA). La desventaja de este enfoque es que donde @Perfil delantero no es compatible, el usuario se queda con una forma que no tiene ningún significado en absoluto.
El uso de los caracteres PUA también puede hacer que Internet Explorer 8 entre en Modo de compatibilidad, y las cosas oscuras recorren ese camino - vea el artículo de Jeremy Keith para más información sobre el tema.
IcoMoon es genial para crear @Perfil delantero conjuntos de iconos, y le permite elegir cualquier carácter Unicode como la base para un icono.
Sin embargo, tenga cuidado: a algunos navegadores y dispositivos no les gusta que se utilicen ciertos caracteres Unicode @Perfil delantero, y no renderizará el icono. Podría valer la pena ejecutar el carácter Unicode sugerido a través de Unify. Esto le dará una indicación de qué tan seguro es usar ese carácter en una @Perfil delantero conjunto de iconos.
Un problema con el uso de caracteres Unicode como fuente alternativa es que a menudo son poco compatibles con los lectores de pantalla (de nuevo, Unify tiene algunos datos sobre esto), por lo que deberá pensar detenidamente cómo se usa el ícono.
Si su ícono es puramente decorativo al lado de una etiqueta de texto que sería leída por un lector de pantalla, entonces no me preocuparía demasiado. Sin embargo, si su icono es independiente, es posible que desee agregar una etiqueta de texto oculta para ayudar a los usuarios del lector de pantalla. Incluso si el lector de pantalla lee el carácter de Unicode, es probable que no se parezca a lo que lo está usando. Por ejemplo, si estás usando & # x2261; para el icono de navegación de la "hamburguesa" de las tres líneas horizontales, VoiceOver en iOS lo leerá como "Idéntico a".
Muy pocas fuentes tendrán caracteres para el rango completo de Unicode, por lo que si elige una fuente, asegúrese de probar algunos caracteres que probablemente necesite.
Tratar Segoe UI Symbol o Arial Unicode MS para los iconos aislados. Es probable que estas fuentes estén en una PC y en una Mac, Lucida grande Tiene un gran número de caracteres Unicode. Si desea utilizar estos, simplemente agréguelos a la Familia tipográfica Entrada CSS para que el usuario vea el carácter Unicode en estas fuentes si están instaladas.
Sería útil si hubiera alguna forma de detectar si un carácter Unicode era compatible o no antes de usarlo, pero no hay una forma garantizada de hacerlo..
Modernizr tiene un poco de JavaScript para probar y probar el soporte de Emoji, pero esto funciona al verificar un solo píxel para ver si hay algo allí. Entonces, si el personaje que quieres probar no cubre ese espacio, incluso cuando se muestra, entonces la prueba te dará un resultado incorrecto. Y solo porque un carácter Unicode se muestra correctamente, no significa que los otros 109.999 serán.
En definitiva, probarlo. Y asegúrese de que, si el personaje no es compatible, el usuario aún pueda entender lo que está pasando.
No es solo en las páginas web que puede usar Unicode en ninguno de los dos, los correos electrónicos también se pueden mejorar con ellos..
Sin embargo, esta es la misma historia; Algunos clientes y dispositivos de correo electrónico los admiten, otros no. Campaign Monitor ha realizado algunas pruebas que podrían ayudarte a decidir si deberías usarlas.
Cuando ellos son Apoyados, pueden ser muy efectivos. Por ejemplo, si se usa un carácter Emoji en una línea de asunto, ese icono de color podría sobresalir bien en una bandeja de entrada.
Eso casi concluye esta introducción a Unicode. Espero que haya sido útil y que haya ayudado a comprender mejor cómo funciona Unicode y cómo usarlo..
Si tiene alguna pregunta, solo pregunte en la sección de comentarios..
