[Front End] Creación de ícono personalizado – ¡Estilo Fontawesome!

¿Qué se te viene a la mente al ver estos íconos?

Seguramente, ya los has visto en alguna página web y reconoces su significado sin importar si tu idioma es el español, inglés o chino, debido a que los íconos se han convertido en un lenguaje universal. Con un simple ícono, representación visual simbólica de un objeto u concepto, nos ahorramos explicaciones largas e innecesarias. Además, si te encuentras en un sitio web, los íconos te facilitan la navegación [5][7].

Ejemplo: El famoso ícono de la “lupa” nos indica que iniciaremos una búsqueda.

En LiOnline buscamos diseñar sitios web enfocados en obtener una positiva experiencia del usuario y los íconos nos ayudan en ello pues hacen que las interfaces sean más intuitivas y amigables es decir de fácil entendimiento por parte de los usuarios.

El sitio web de nuestro cliente BYC Grupo Inmobiliario, empresa de venta/alquiler de propiedades, cuenta con íconos que representan las características que posee una propiedad:

  • Número de habitaciones – ícono de una cama
  • Número de baños – ícono de una ducha
  • Cantidad de fotos disponibles para esa propiedad – ícono de imagen
  • Metros cuadrados – ícono de un plano.

Imagen 1 – Sitio web de nuestro cliente ByC

Imagen 2 – Propiedad en Venta de ByC

Luego de haber entendido qué son los íconos y porqué son importantes, nos moveremos a ¿cómo los implementamos (creamos) en un sitio web. Antes del 2014, los íconos estaban en  *.jpg, *.png u otro archivo de imagen. Siguiendo el ejemplo de ByC, entonces podíamos tener un archivo “cama.png”, o “ducha.png”. ¿Qué problemas nos trae trabajar los íconos como archivo de imagen?

  • La solicitud de mútiples imágenes al servidor, hace que el sitio web se cargue lentamente.
  • Las imágenes pierden resolución/nitidez al aumentar su tamaño
  • Al tener un ícono en imagen, no es posible modificar, por ejemplo, el color. Había que crear la misma imagen pero con diferente versión de color.
  • No se pueden animarse las imágenes fácilmente.

Por tanto, definitivamente utilizar un archivo de imagen para un ícono no era una buena solución [1][4]

Veámoslo de forma gráfica: En la imagen 3, tenemos un ícono de “casa” (no es un archivo imagen) y un ícono de “regla” (archivo tasacion.png), con un zoom adecuado ambos se ven con buena resolución. ¡Ok!

 

Imagen 3 – Íconos para representar los servicios de  ByC

Sin embargo, hagamos un zoom ++++, ¿qué ha sucedido? en la imagen 4, vemos que la “casa” ha mantenido su resolución a pesar de haber aumentado de tamaño, algo que no sucede con la “regla” la cual vemos borrosa.

Imagen 4- Ícono en imagen vs Ícono en icon-font

Por suerte, hoy tenemos una solución para eso: “Icon Font”, el ícono de la “casa” es de ese tipo.

¿Qué es un Icon Font? ¿Cómo lo utilizo? ¿Puedo crear mi propio ícono?, ¡aquí responderemos esas preguntas!

Leer más

Mundo y mente sin fronteras: Pensamientos de una inmigrante

Joven (brasileño): Hola, disculpa soy nuevo en esta ciudad, ¿Podrías indicarme un buen lugar para comer?

Yo: Hola. Sí claro (le doy las indicaciones)

Joven: Qué lindo acento, ¿de donde eres?

Yo (sonrío): Soy de Lima, Perú

Joven (intenta hablar en español): Yo conozco Lima y Cuzco, todo muy bonito.

Yo (en español): Qué chévere, Cuzco es una de las ciudades más turísticas en Perú. (…) Disculpa, ¿entendiste mis indicaciones?.

Joven: Sí claro, hablas bien portugués. Muchas Gracias

Barão Geraldo – Campinas – São Paulo – Brasil

Quise empezar este artículo con esa pequeña conversación real que sucedió el último día de Julio 2018 en Campinas – Brasil, para demostrar lo enriquecedor que es compartir experiencias de nuestras culturas. ¡Qué orgullo decir que soy del Perú en tierras extranjeras!

Aprendí amar a un país que me acogió desde hace unos años: Brasil. Su idioma, su música, su arte, su naturaleza, sus tradiciones y especialmente su gente que siempre me trató con respeto, amabilidad, cariño y me dio la mano cuando lo necesitaba, hicieron que poco a poco Brasil se volviera un “hogar”. ¿Será que este trato al extranjero es el mismo en cualquier otro país? ¿ … en mi país, Perú?

No, decepcionada digo no.

Leer más