7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML5

HTML5: la API de información de red

Scroll to top

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

Introducción

Uno de los conceptos más discutidos en el mundo del diseño web es el diseño responsivo. Miles de artículos han sido escritos acerca del diseño responsivo y por lo tanto no será punto de discución en este artículo. Sin embargo, el diseño responsivo tiene una limitación importante, en su mayor parte está basado en el tamaño de la ventana del navegador.

Mientras este enfoque funciona bien para ofrecer imágenes con tamaño y resolución adecuada, no es ideal para todas las situaciones, contenidos de video por ejemplo. Lo que realmente necesitamos en estos casos es más información acerca de la conexión de red del dispositivo.

Imagina que estas visitando YouTube desde tu smartphone o tablet. Te encuentras en casa y conectado a través del Wi-Fi. En tales casos, no se preocupa por el número de bytes que están siendo descargados, sólo está interesado en el contenido de video de alta calidad. Esto es todo lo contrario si está conectado a una red de conexión lenta. En este caso, usted quiere ver el video, la calidad es secundario.

Debería estar claro que cada desarrollador que quiere que un sitio sea realmente rápido tiene que optimizar todos los recursos para mostrar las páginas lo más rápido posible. Sin embargo, en el siguiente ejemplo, ofrecer un video de alta resolución no es una pérdida de ancho de banda del usuario, pero si una mejora en la experiencia de usuario.

La API de Información de Red es justamente lo que necesitamos para encontrar más información sobre la conexión del dispositivo.

1. ¿Qué es?

La API de Información de Red proporciona acceso al tipo de conexión que el sistema está usando para comunicarse con la red, celular, Wi-Fi, Bluetooth, etc. También proporciona unos scripts que notifican si el tipo de conexión cambia. Esto es lo que permite a los desarrolladores hacer cambios dinámicos al DOM y/o informar al usuario que el tipo de conexión ha cambiado.

La primer versión de la especificación de la API de Información de Red fue lanzada en el 2011, pero desde entonces la API ha cambiado varias veces. Como prueba de esto, la versión actual es el borrador de un simple editor, lo que significa que está obligado a cambiar en el futuro.

A pesar de los cambios, los casos de uso de esta API son tan interesantes que realmente vale la pena explorarlos. En este artículo, hablaremos sobre la última versión de la especificación, pero también veremos algunas de las propiedades y eventos depreciados por razones que explicaré después.

2. Implementación

La versión actual de la API de Información de Red expone un objeto connection que pertenece al objeto window.navigator. El objeto connection contiene una propiedad, type, que retorna el tipo de conexión del agente de usuario. La propiedad type puede tener uno de los siguientes valores:

  • bluetooth
  • cellular
  • ethernet
  • none
  • wifi
  • other
  • unknown

Algunos de estos valores, como bluetooth y wifi, son fáciles de entender mientras que otros necesitan un poco más de explicación. El tipo cellular se refiere a una conexión móvil, tal como EDGE, 3G, 4G, etc. El tipo other significa que la versión actual no es de valor unknown, pero tampoco es alguna de las otras. El tipo unknown significa que el usuario tiene una conexión de red estable, pero es incapaz de determinar que tipo de conexión es.

Además de type, la API de Información de Red expone el evento ontypechange. Es disparado cada vez que cambia el tipo de conexión de red.

Los desarrolladores pueden usar la API de Información de Red para cambiar algunas características basadas en el tipo de conexión actual. Por ejemplo, podemos frenar un proceso que ocupa un ancho de banda significativo si se detecta que el dispositivo utiliza una conexión móvil. La API también nos permite asignar una clase específica a un elemento html, por ejemplo high-bandwidth, de la misma manera que Modernizr lo hace. Podemos utilizar CSS para cambiar una o más propiedades a un elemento, como la imagen de fondo.

Ahora que ya sabemos que hace la API de Información de Red y en que nos puede beneficiar al usarla, vamos a ver que navegadores soportan la API.

3. Soporte de navegadores

Al momento de escribir esto, la API de Información de Red sólo es compatible con Firefox, utilizando su prefijo, y Chrome Canary. En Chrome Canary, tenemos que habilitar la opción experimental web platform features para usar la API. Puede encontrar más información en éste artículo escrito por Paul Irish.

Como si el soporte para la API de Información de Red fuera ya bastante escaso, Firefox hasta la versión 30, la versión más reciente, soporta las especificaciones de la versión anterior de la API. Debido a esto y en caso de que quiera interactuar justo ahora con la API, es importante echar un vistazo a las propiedades y eventos expuestos por las especificaciones anteriores.

Las especificaciones anteriores exponen dos propiedades, bandwidth y metered. La propiedad bandwidth es un valor decimal que representa una estimación del ancho de banda actual en megabytes por segundo (MB/s). La propiedad metered es un valor lógico que especifica si la conexión de red de un dispositivo está sujeta a alguna limitación. La especificación anterior también define un evento onchange para notificar acerca de los cambios de las propiedades previamente mencionadas.

Para que tenga una idea de la nueva y anterior versión de especificación, en la siguiente sección desarrollaremos un ejemplo que use ambas.

4. Demo

Hasta ahora, hemos cubierto las propiedades y eventos expuestos por la API así como los casos de uso de la misma. En esta sección, vamos a crear una página web sencilla para ver a la API en acción.

La demo consiste en una página HTML5 que tiene una lista desordenada con tres elementos. Cada elemento contiene un fragmento de texto para verificar el valor de las propiedades expuestas por la anterior y la nueva especificación de la API. Los elementos de la lista están ocultos por defecto y sólo se muestran si las propiedades correspondientes son soportadas.

La demo también detecta si el navegador implementa la especificación anterior de la API (para Firefox) y si el navegador soporta la API de Información de Red en absoluto. En el primer caso, observarás el mensaje Old API version supported, en el segundo caso el mensaje API not supported será mostrado.

Probar el soporte para la API es muy sencillo como se puede ver a continuación:

Para detectar si la versión implementada es la anterior especificación, podemos solicitar la presencia de la propiedad metered como se muestra a continuación:

Una vez que hemos probado el soporte de la API y hemos descubierto que versión de la especificación es compatible con el navegador, podemos adjuntar un controlador al evento. Dentro del controlador actualizaremos el texto del elemento de la lista correspondiente, por ejemplo type para la nueva especificación de la API.

Puede encontrar el código completo de la demo a continuación y también interactuar con él si así lo requiere.

Conclusión

En este artículo, te presenté la API de Información de Red. En la primera parte del artículo, hablamos sobre qué es la API y qué puede hacer por nosotros. También aprendimos las propiedades y eventos que expone la API. Como lo mencioné en Soporte de navegadores, el soporte para la API es bastante escaso, pero esto es debido a varios cambios de las especificaciones.

La API es muy sencilla de usar y no hay excusas para no tomar ventaja de la información que nos ofrece una vez que sea soportada por más navegadores. ¿Qué opinas de esta API? ¿La usarás cuando sea soportada por más navegadores?

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.