Skip to content

nebil/alto-en-x

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Un sitio bajo en kilobytes y casi sin dependencias (únicamente normalize.css) que permite crear sellos ad libitum.
La idea es poder generar etiquetados —como los que aparecen en los alimentos— con el uso de estándares web.

Requisitos

Para funcionar de forma correcta, este sitio necesita un navegador relativamente moderno.
Sin embargo, cualquier web browser que entienda SVG 1.1 debería cumplir con esta tarea.
Por ejemplo, la última versión de Mozilla Firefox o Google Chrome será más que suficiente.

🦊Mucho gusto. Así es, con un poco de imaginación, los zorros podemos hablar.
      Por supuesto, estás invitado a hacer clic en mi seguro, libre y fantástico pelaje.

Uso alternativo

Es posible, además, crear sellos con el query string; en efecto, basta con agregar ?input=<texto> al final del URL.
Por ejemplo, https://nebil.github.io/alto-en-x/?input=ejemplo nos generará un sello que dirá “alto en ejemplo”.

Diseño

De la geometría

El sello está escrito en SVG, con el propósito de representar un octágono* regular de múltiples bordes.
Lamentablemente, no es posible definir este tipo de bordes a partir de la actual especificación de SVG,
pero es altamente probable que sí estén disponibles en la siguiente versión 😀 —que quizá nunca veremos. 🙄
Por lo tanto, el workaround consiste en elaborar cuatro <polygon> superpuestos, con bordes de distinto ancho.

De la tipografía

El manual elaborado por el Ministerio de Salud establece que

La familia Arial es la tipografía utilizada en la iconografía,
específicamente su presentación bold para la mayor legibilidad de los textos.

Sin embargo, debemos recordar que Arial es una familia comercial. 💰
Algunos navegadores cuentan con ella, otros con Helvetica, y las personas libres disfrutan de Liberation Sans.
Pero, lamentablemente, existen dispositivos que no conocen ninguna de ellas. ¿Qué podemos hacer ante esto?

Introducing Arimo: one family to rule them all.

O en otras palabras, Arimo —que es idéntico a Liberation Sans— es el nuevo typeface estándar,
con el objetivo de ofrecer un mismo sello, visualmente consistente, en todos los navegadores**.
Además, por temas de seguridad, las imágenes generadas desde SVG no aceptan tipofaces externas.
Para resolver este problema, Arimo fue transformada a base64, para luego ser insertada en el octágono.

Créditos

Desde acá, aprovecharé de agradecer

Licencia

Copyright © 2017, Nebil Kawas García
El código de este repositorio está bajo el Mozilla Public License v2.0.


* también conocido como octógono, pero mantendremos las raíces helénicas.
** donde “ todos los navegadores” quiere decir “ojalá, todos los navegadores”.