Bit - loader

Optimización de sitios y aplicaciones Web – Tercera Parte


Netmind - Optimización de sitios y aplicaciones Web – Tercera Parte    Artículo | Optimización Web
| 13/03/18

En la entrada anterior, hablamos de la optimización de imágenes, pero refiriéndonos a las imágenes “planas”, que complementan un texto recordando al lector los elementos visuales que lo explican o acompañan: el contexto. En el contexto se espera que la imagen ayude a la comprensión, bien por tratarse de algo nuevo, o de algo muy significativo.

 

Pero cuando diseñamos una interfaz de usuario moderna, aquellos elementos que aparecen o se usan con más frecuencia, suelen ir acompañados de iconos o glifos, cuyo propósito es el de servir como símbolo visual rápido que recuerde la intención de uso (copiar, pegar, guardar…). Recordemos que un carácter es una unidad textual mientras que un glifo es una unidad gráfica, que no tiene por qué corresponder con una letra, o signo de puntuación, aunque puede formar parte de ella. El siguiente gráfico muestra la diferencia mostrando el carácter “a” y distintos glifos que lo representan:

 

Optimización de sitios y aplicaciones Web – Tercera Parte 0

 

Estos iconos se venían representando mediante pequeños gráficos de poco peso, que tenían el inconveniente de que, para ser capaces de representar distintos estados (hover, active, etc.) debían ser duplicados (o multiplicados, dependiendo del número de estados). Esto suponía –al menos- 2 gráficos por estado, y por tanto 2 peticiones HTTP. Si tenemos 100 iconos en una aplicación, la cosa podía terminar con 200 peticiones o más (aunque las técnicas de sprites minimizaban el problema de carga, pero seguía siendo una solución pobre, ya que los distintos tamaños requeridos también podían forzar más implementaciones, si se quiere mantener la calidad visual).

 

La solución propuesta

Lo propuesto por los diseñadores actuales es el uso de glifos vectoriales. Un glifo vectorial es una imagen obtenida a partir de “instrucciones de dibujo” (o de renderización), que, por tanto, no pierde calidad al ser interpretada en distintos tamaños, y puede modificarse en tiempo de ejecución (a diferencia del mapa de bits propio de los formatos que hemos visto en las imágenes: JPG, PNG, etc.).

Pero lo más interesante es que un glifo puede ser transformado al dibujarlo, utilizando mecanismos bien definidos (y soportados incluso mediante CSS3), para que adopte distintos tamaños, colores, transparencias, efectos visuales varios, etc. Es lo mejor de los dos mundos.

Pero, aún mejor, podemos empotrar esos glifos en un archivo de fuentes (Fonts), de forma que una familia de fuentes utilizada por nosotros contenga todos los elementos visuales necesarios, que se descargarán de una sola vez (el archivo “Font”, en el formato que nos interese: TTF, EOT, SVG, WOFF, etc.

De ahí que marcos de trabajo como BootStrap incluyan esta posibilidad de manera predeterminada, ofreciendo un juego de glifos en estos formatos que incluyen símbolos muy conocidos para acompañar la interfaz de usuario.

 

Glifos en Visual Studio

Si estamos creando una página Web en Visual Studio, solo tenemos que añadir BootStrap (inferior a la versión 4, eso sí) desde el Administrador de paquetes NuGet, y comprobar cómo se instalan (junto a las librerías CSS y JS), esos glifos en un directorio “Fonts” que es creado en caso de no existir:

(En la versión 4, esta opción ya no se usa así, pero hablaremos de la solución en el próximo artículo) Una vez hecho esto, solo tenemos que hacer referencia a la librería Bootstrap en la cabecera (etiqueta <head>):

 

Optimización de sitios y aplicaciones Web – Tercera Parte 1

 

Y, al escribir el atributo class de cualquier elemento de <body>, el editor nos ofrecerá la posibilidad de seleccionar glifos a partir de la clase base con un conjunto de 250 iconos gratuitos que representan la mayoría de los símbolos comunes usados en sitios Web (además a la izquierda de cada uno aparece su aspecto visual):

 

Optimización de sitios y aplicaciones Web – Tercera Parte 2

 

Si mostramos la página después de seleccionar alguno de ellos indicando su clase base (glyphicon), podremos ver el resultado. Por ejemplo, para poner un icono de un libro al lado de la etiqueta H1 anterior, añadiríamos:

 

Optimización de sitios y aplicaciones Web – Tercera Parte 3

Y tendríamos como resultado la siguiente salida:

 

Optimización de sitios y aplicaciones Web – Tercera Parte 4

 

En la próxima entrada continuaremos analizando esta parte imprescindible de la construcción de interfaces de usuario modernas, viendo cómo podemos aprovechar esta construcción para aportar dinamismo y animación asociados a los cambios de estado de la interfaz.



Entradas relacionadas
Nuestro sitio utiliza cookies para análisis. Si no estás seguro de ello, echa un vistazo a nuestra política de privacidad.