Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

El Qué, Por Qué y Cómo de URIs de Datos en el Diseño Web

by
Length:MediumLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Echemos un vistazo a cómo mejorar el rendimiento de su sitio reduciendo el número de solicitudes HTTP que realiza. Vamos a aprovechar una técnica conocida como el esquema URI de datos; codificando tanto imágenes como fuentes en cadenas de datos puras que se pueden integrar directamente en su marcado y hojas de estilo.

Miniatura: Broccolidryiconsaniconsetitisfullof…icons de Visual Idiot (estaremos usando estos íconos en un minuto..) 


A medida que las conexiones a Internet se hicieron más rápidas y las computadoras más potentes, el rendimiento del sitio web solía ser a menudo una práctica pasada por alto. Hoy en día, asegurarse de que su sitio web está funcionando bien es absolutamente vital para mantener a los usuarios y los motores de búsqueda felices, especialmente cuando se accede al sitio utilizando datos móviles y teléfonos con poca potencia y otros dispositivos.


El Qué, Por Qué y Cómo de los URI de Datos

Ya hemos visto CSS Hojas de Sprite: Mejores Prácticas, Herramientas y Aplicaciones Útiles antes en Webdesigntuts+, demostrando cómo puede mejorar el rendimiento reduciendo las solicitudes HTTP y reduciendo el tamaño general del archivo de imagen. ¿Pero sabía usted que puede representar una imagen (en realidad cualquier dato binario) en su HTML o CSS usando sólo una cadena de texto ASCII?

Esta técnica se conoce como el esquema URI de datos, y de hecho no es nueva. Aunque los URIs de Datos han estado flotando por ahí por más de diez años, sólo han ganado popularidad recientemente con la compatibilidad de navegadores generalizada y un enfoque en mejorar el rendimiento del sitio.

¿Cuáles son los Beneficios de Usar URIs de Datos?

El principal beneficio del uso de URI de datos es la mejora del rendimiento. Los recursos que se utilizan en su sitio son obtenidos por su navegador mediante una solicitud HTTP. Esto incluye todo, desde hojas de estilo, archivos JavaScript, hasta imágenes. Independientemente de la velocidad de la conexión a Internet, casi todos los navegadores limitan la cantidad máxima de solicitudes HTTP simultáneas a dos a la vez, resultando efectivamente en un cuello de botella de datos. Cuantas más peticiones HTTP se necesiten, más pobre será el rendimiento general del sitio.

La combinación de datos de imagen en HTML o CSS del sitio elimina instantáneamente la necesidad de que el navegador obtenga recursos adicionales. Aunque los datos crudos de Base64 se consideran generalmente alrededor del 33% más grandes que su contraparte optimizada (por ejemplo, una imagen), después de la optimización de archivos CSS y la compresión gzip, la diferencia en el tamaño del archivo es generalmente insignificante.

¿Cómo se Ven los URIs de Datos?

Un URI de Datos es esencialmente datos binarios codificados en un formato Base64, junto con alguna información adicional para el navegador incluyendo un tipo MIME, un Charset y el formato de codificación (Base64).

El URI de datos (en su forma más simple) se ve así:

Para utilizar un URI de datos como una imagen HTML en línea, el formato tiene este aspecto:

Para utilizar un URI de datos como una imagen de fondo de repetición en CSS, el formato es el siguiente:

Alternativamente, combine los elementos de fondo con la abreviatura CSS:

Si bien hemos utilizado imágenes para ilustrar el uso de URIs de Datos, casi cualquier medio se puede utilizar, incluyendo archivos multimedia, fuentes (como veremos en breve) y mucho más.

Cómo Utilizar URIs de Datos

OK, vamos a ser prácticos con un par de ejemplos. Tomemos la siguiente imagen (un mosaico que he descargado de Subtle Patterns), lo convierto en un URI de Datos y uso CSS para crear un fondo de repetición para un sitio o una interfaz.

Repeating Background Tile

Aunque los URIs de Datos pueden parecer bastante complejos, el proceso para crear uno es muy simple.

En primer lugar, diríjase al Web Semantics Data URI Converter y cargue la imagen seleccionando la ubicación del archivo de la imagen y haciendo clic en la herramienta 'Convertir imagen':

Web Semantics Data URI conversion tool

Una vez procesado, si se desplaza hacia abajo de la página, verá cómo esta imagen se ve codificada en base64:

Web Semantics Data URI conversion tool

Dado que necesitamos un fondo de repetido para nuestro proyecto, tendremos que modificar el CSS que nos proporciona la herramienta.

Para un fondo repetido, copie y pegue el siguiente CSS:

Tomemos un ejemplo aún más fácil, convirtiendo la siguiente imagen en un URI de Datos y colocándola en nuestro marcado como una imagen en línea:

Repeating Background Tile

Simplemente siga los pasos anteriores para convertir la imagen en una imagen codificada en base64 y copie el marcado HTML generado por la herramienta (en el panel "Como Una Imagen") y péguelo directamente en su marcado HTML de la misma manera que lo haría para insertar una imagen en línea regular.

El código final para este ejemplo tiene este aspecto:

Cuándo Usar URIs de datos (y Cuándo Evitarlos)

No existen realmente reglas rígidas y rápidas sobre cuándo usar los URIs de datos para reemplazar elementos del sitio, pero hay una serie de inconvenientes y peculiaridades a considerar cuando se elige si usar o no los URIs de Datos.

  • Si usted planea apoyar
  • Los URIs de Datos no son almacenados en caché por el navegador, por lo que tendrán que ser descargado en cada página, incluso si ya han sido renderizados por el navegador.
  • Los URIs de Datos son más adecuados para los recursos pequeños, pero pueden utilizarse para recursos más grandes (por ejemplo, fotografías) sin incurrir en mayores penalizaciones de rendimiento (después de comprimir en gzip son alrededor de 2-3% más grande que el archivo original). Tenga en cuenta, sin embargo, que el usuario del sitio no verá nada hasta que se descargue todo el elemento, lo que podría ser indeseable para los usuarios en dispositivos móviles o con conexión a Internet lenta.
  • Los URI de datos hacen que sus documentos CSS y HTML se vean muy desordenados. Para sitios grandes y  un uso generalizado de URIs de datos, las hojas de estilo y marcado se vuelven más difíciles de leer, navegar y mantener.
  • Cada vez que realice un cambio en un recurso (por ejemplo, una hoja de sprites), tendrá que volver a codificar el archivo de imagen, agregando más pasos a su flujo de trabajo.

Fuentes de Ícono Codificadas en Base64

¿Me recuerda diciendo que cualquier dato binario puede ser utilizado en el esquema URI de datos? Ahora que hemos mirado las imágenes codificadas en base64, vamos a echar un vistazo a convertir una fuente de icono en un URI de datos e implementarla en un proyecto.

De hecho, los URIs de datos son una combinación perfecta para las fuentes de íconos, especialmente si sólo está planeando utilizar algunos símbolos con un tamaño de archivo pequeño.

Vamos a utilizar la aplicación web en línea IcoMoon para generar un conjunto de fuentes personalizadas, generar el URI de datos y el código CSS final.

Primero diríjase al sitio de IcoMoon y haga clic en el enlace "Comenzar a usar la aplicación":

IcoMoon Custom Font App

Luego busque los conjuntos de fuentes para seleccionar sus fuentes de íconos personalizados o, alternativamente utilice el campo de búsqueda situado en la parte superior izquierda de la página para encontrar fuentes que coincidan con las etiquetas "Comentario", "Corazón", "Ojo" y "Buscar".

He utilizado el conjunto de fuentes Broccolidry de Visual Idiot en este ejemplo.

Select Your Custom Font Set

A continuación, vaya a la página de configuración de descargas haciendo clic en el botón 'Fuente' en la parte inferior de la pantalla:

Move the Font Download Settings Page

En la página de configuración de descargas, cambie la línea de base al 10%, haga clic en el icono de configuración para que aparezcan las opciones avanzadas y seleccione la casilla de verificación "Base64 Codificar e incrustar en CSS". Haga clic en el icono "Guardar" para descargar su fuente.

Download Settings

Una vez que haya descargado y extraído la fuente personalizada, puede abrir el archivo 'index.html' para ver su fuente y sus pares unicode:

Index.html allows you to view your font pairings

Uso de su Fuente de Íconos Personalizados

Ahora que hemos creado nuestro conjunto de fuentes de íconos personalizados, veamos cómo podemos usarlo en un proyecto.

Primero abra la hoja de estilo proporcionada en la descarga de IcoMoon y localice el siguiente CSS. Dado que estamos tratando de reducir las solicitudes HTTP, vamos a copiar y pegar todo el CSS proporcionado en nuestra propia hoja de estilo principal.

Estas pocas líneas de CSS ahora tendrán su fuente de íconos personalizada lista para trabajar en todos los navegadores modernos. Si desea respaldar el modo de compatibilidad de IE9 y las versiones antiguas de IE, deberá agregar una regla adicional (tenga en cuenta que se requerirán recursos adicionales, pero sólo cuando el agente de usuario los solicite).

¿Curioso acerca de estas soluciones para IE? Paul Irish tiene una gran publicación en el blog de una sintaxis @font-face a prueba de balas.

Ahora que nuestras reglas han sido creadas, hay dos maneras en que podemos incluir la fuente personalizada en nuestro diseño, las cuales usan entidades Unicode para hacer referencia al icono relevante. Lo bueno de la aplicación IcoMoon es que todo el CSS ya ha sido generado para nosotros y está listo para ser copiados en nuestra hoja de estilos principal, dependiendo de qué enfoque decidamos usar (o ambos).

Usando su Fuente de Íconos: Enfoque del Ícono de Datos

La primera técnica para usar su fuente de íconos es el enfoque de los íconos de datos, que mantiene nuestro marcado limpio y agradable y es compatible con lectores de pantalla.

Digamos que queremos incluir un ícono de comentario (en este caso con el valor unicode de & #x22;) dentro de un elemento span en nuestra página.

Nuestro HTML:

El CSS relevante (tomado directamente de la hoja de estilos de IcoMoon descargada) es el siguiente (los comentarios son míos).

Si bien este enfoque es agradable y racionalizado y evita la hinchazón de clases adicional en su marcado, puede que no sea la mejor opción para un código mantenible. A menos que su memoria de caracteres Unicode sea tanto enciclopédica como fotográfica, este enfoque no contiene ninguna información dentro del HTML que le indique qué ícono se mostrará.

Usando su Fuente de Ícono: Método de Clase Adicional

Como un enfoque alternativo, puede optar por utilizar clases CSS adicionales en su HTML para mostrar el ícono. Esto tiene la ventaja de introducir información descriptiva semántica directamente en su marcado, mejorando la legibilidad de su código.

Para utilizar este enfoque, agregue un elemento en su HTML con un nombre de clase tal como se proporciona en la hoja de estilo de IcoMoon:

Nuestro CSS se verá así (los comentarios son míos).

Ahora, con un poco de estilo adicional, puede implementar fácilmente grandes fuentes de íconos dentro de su próximo proyecto -- sin estropear su árbol de elementos con recursos adicionales.


Conclusión

Gracias por tomarse el tiempo para explorar algunas de las formas en que puede sacar el máximo provecho de los URIs de Datos para su próximo proyecto.

Es importante recordar que los URIs de Datos no siempre son la mejor solución. Mientras que el uso de CSS3, SVG y Fuentes de Íconos tiene algunos beneficios muy convincentes sobre el uso de imágenes (especialmente en el ámbito del diseño adaptivo), los beneficios de codificar sus imágenes en base64 son más matizados. Al considerar si utilizar o no URIs de Datos en su próximo proyecto, compare los tiempos de carga y las solicitudes HTTP reducidas con la capacidad de mantenimiento del código. - ¡Solo considere los URIs de datos como otra herramienta en su caja de herramientas!

¿Disfrutó este tutorial y ahora está ansioso por empezar a utilizar estas técnicas de una manera más práctica? Mantenga sus ojos abiertos a nuevo contenido premium pronto donde utilizaremos URIs de Datos extensivamente para crear un diseño ligero de interfaz de usuario. ¡Mire este espacio!

¿Cómo ha utilizado las fuentes de íconos y los URIs de datos en sus proyectos? ¡Suscríbase y deje un comentario!


Recursos adicionales

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.