Detección de dispositivos del lado del servidor con JavaScript

 

 

 


Índice
  1. Érase una vez, detección de dispositivos
  2. Copiar, pegar, listo
  3. Bajo el capó
  4. Una nota sobre el rendimiento
  5. Casos de uso
    1. Optimización de la experiencia del usuario
    2. ¿Poner más en CSS?
    3. Ayuda con anuncios publicitarios
  6. Conclusión
    1. Otras lecturas

Más sobre Jon Arne Sæterås ↬

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • ¡Registro!
  • El diseño web responsivo y herramientas como Modernizr se han vuelto muy populares. Recientemente, las técnicas combinadas, en las que la optimización se realiza tanto en el lado del servidor como en el del cliente, se han convertido en una tendencia. La herramienta WURFL.js lanzada recientemente encaja en esta categoría. En este artículo, Jon Arne Sæterås y Luca Passani analizarán algunos casos de uso básicos sobre cómo utilizar WURFL.js para optimizar la experiencia del usuario tanto en HTML como CSS, y un ejemplo de cómo elegir los anuncios adecuados para mostrar en diferentes dispositivos. .

    Hoy en día, existen muchas estrategias para elegir al desarrollar un sitio web moderno e independiente del dispositivo. ¿Cómo se deben determinar las capacidades del dispositivo o navegador? ¿La lógica de presentación debería ser del lado del servidor o del lado del cliente? Tradicionalmente, la optimización móvil tenía que realizarse en el lado del servidor.

    En los últimos años, el diseño web adaptable y herramientas como Modernizr se han vuelto muy populares. Recientemente, las técnicas combinadas (a menudo llamadas RESS ), donde la optimización se realiza tanto en el lado del servidor como en el del cliente, se han convertido en una tendencia. La herramienta WURFL.js lanzada recientemente encaja en esta categoría.

    En este artículo, veremos algunos casos de uso básicos sobre cómo utilizar WURFL.js para optimizar la experiencia del usuario tanto en HTML como CSS, y un ejemplo de cómo elegir los anuncios correctos para mostrar en diferentes dispositivos. También veremos en qué se diferencia WURFL.js de la popular biblioteca de detección de funciones Modernizr, pero la complementa.

     

    Érase una vez, detección de dispositivos

    Ya sea que usemos expresiones regulares en JavaScript, Modernizr o un repositorio completo de descripción de dispositivos (DDR) para la detección del lado del servidor, el propósito suele ser el mismo: brindar a los usuarios una mejor experiencia. Esto suele ocurrir en dos niveles:

    • presentación de contenidos e interacción con el servicio,
    • Análisis del comportamiento de los usuarios para determinar patrones de uso.

    El desafío es hacer esto de manera que sea escalable, mantenible y, en la medida de lo posible, fácil de implementar. Para algunos proyectos, el costo y la complejidad de implementar herramientas de terceros en servidores es demasiado alto. Sin embargo, es posible encontrar una solución de bajo mantenimiento que permita que un sitio web se vea bien y funcione bien, a pesar de la constante diversificación de dispositivos. Aquí es donde WURFL.js juega un papel, al proporcionar una alternativa escalable a la detección tradicional de dispositivos del lado del servidor, al mismo tiempo que complementa otras técnicas y herramientas del lado del cliente.

    Antes de profundizar, veamos los conceptos básicos.

    Copiar, pegar, listo

    No es necesario registrarse y WURFL.js se puede utilizar sin coste alguno. Entonces, lo primero que debe hacer es copiar y pegar esta línea de HTML en su página:

    script type='text/javascript' src=“//wurfl.io/wurfl.js"/script

    Se admiten tanto HTTP como HTTPS. Si planea utilizar la información del dispositivo proporcionada por el script para tomar decisiones de representación, es posible que desee incluir el script en el headelemento. De lo contrario, puede cargarlo de forma asincrónica.

    Ahora que el script está en su página HTML, puede acceder al objeto WURFL en JavaScript. El objeto WURFL tiene este aspecto y está listo para usar:

    { complete_device_name:"Apple iPhone 5", form_factor:"Smartphone", is_mobile:true}

    El objeto tiene tres propiedades:

    • complete_device_nameEste es el nombre con el que se conoce el dispositivo; normalmente, la marca y el modelo o una categoría de dispositivos o una definición más genérica.
    • form_factor
      • escritorio
      • aplicación
      • tableta
      • teléfono inteligente
      • Característica del teléfono
      • Televisión inteligente
      • robot
      • otros no móviles
      • otro móvil
    • is_mobileEsto es trueo false, truesi el dispositivo es una tableta u otro dispositivo móvil.

    Por supuesto, puedes hacer inmediatamente cosas como esta:

    console.log(WURFL);

    O esto:

     

    alert(WURFL.complete_device_name);

    Bajo el capó

    Debido a que WURFL.js detecta el dispositivo basándose en la User-Agentcadena y otra información proporcionada en el encabezado HTTP, el contenido del archivo JavaScript dependerá del dispositivo. Por lo tanto, no puede simplemente copiar el contenido del archivo y ponerlo en línea en HTML o combinarlo con otro recurso de JavaScript.

    Para entender esto en detalle, veamos la ilustración de arriba. El navegador realiza una solicitud de example.com(1). El marcado devuelto por el servidor web (2) contiene la scriptreferencia a WURFL.js. A continuación, el navegador procesa el HTML y comienza a buscar recursos, entre ellos wurfl.io/wurfl.js(3). Cuando la solicitud llega a WURFL.io, WURFL analiza la solicitud HTTP. Por lo general, según esa solicitud, habrá un acceso instantáneo, el dispositivo se identifica sin más preámbulos y se devuelve un único objeto WURFL JavaScript. Sin embargo, en ciertos casos cuando el dispositivo no se puede identificar solo en el lado del servidor (en particular, en el caso de dispositivos iOS), el archivo JavaScript contendrá algunas comprobaciones más para determinar el dispositivo. Luego, el navegador evalúa JavaScript y el objeto WURFL está listo para usar (4).

    WURFL.js es capaz de, por ejemplo, distinguir entre un iPhone 5 y un iPhone 5S , gracias a esta lógica extra del lado del cliente. Esto es importante porque este caso de uso no está respaldado ni por User-Agentanálisis puro ni por pruebas de Modernizr.

    Una nota sobre el rendimiento

    Si usa WURFL.js para tomar decisiones de renderizado o, por alguna razón, necesita colocar la scriptetiqueta dentro head(sin posponerla), entonces el navegador esperará a que el script se descargue y evalúe antes de renderizar la página. Dependiendo del caso de uso, esta podría ser la única forma; pero, para que conste, WURFL.js también se puede cargar de forma asincrónica para aumentar el rendimiento de renderizado.

    El tamaño del objeto JSON devuelto será bastante pequeño y variará entre 0,5 y 3 o 4 KB, según el dispositivo. En comparación con Modernizr (aproximadamente 14 KB) y jQuery (96 KB), WURFL.js es posiblemente liviano.

    Casos de uso

    Suponiendo que tiene WURFL.js en funcionamiento, veamos algunos casos en los que usar WURFL.js tiene más sentido, ya sea por sí solo o junto con Modernizr y/u otras soluciones. Para ilustrar, nos referiremos al sitio web WURFL.io , que utiliza WURFL.js de múltiples maneras. Quick news about games, health, travel, tv, movies

    Optimización de la experiencia del usuario

    Cuando se trata de diseño móvil, responsivo y adaptable y todo eso, lo más común que se puede hacer en un sitio web es mejorar la experiencia del usuario para ciertas familias de dispositivos o factores de forma. Por supuesto, muchas cosas se pueden manejar mediante consultas de medios, pero a veces se necesita la ayuda de algo de JavaScript.

    Cuando visita WURFL.io en su computadora portátil, la sección superior de la página tiene un fondo de video, un simple desplazamiento de paralaje y texto que cambia dinámicamente según el dispositivo o navegador. Se ve muy bien en una computadora portátil, pero los fondos de video, sin mencionar el desplazamiento de paralaje, no serían ideales en una tableta o teléfono inteligente, por decirlo suavemente.

     

    Por supuesto, podríamos usar Modernizr o decidir si implementamos estas características de otras maneras. Pero en muchos casos, conocer el dispositivo físico es tan importante (quizás más importante) que saber si el navegador afirma ser compatible con una función. Podríamos encontrarnos con un problema por el cual el navegador afirma ser compatible, pero en realidad el soporte no es lo suficientemente bueno como para brindar una excelente experiencia de usuario.

    Para evitar estas situaciones, debería utilizar WURFL.js y Modernizer juntos. Tenga en cuenta también que comparar directamente WURFL.js y Modernizr no es del todo justo. Modernizr detecta las funciones reclamadas por el navegador, mientras que WURFL.js clasifica el dispositivo de diferentes maneras. Por lo tanto, si no sabe si un dispositivo o factor de forma en particular admite una determinada característica detectable por el navegador, entonces será mejor que utilice Modernizr o una solución completa de detección de dispositivos .

    Sin embargo, en este ejemplo, nos basaremos en WURFL.js y exigiremos que solo los clientes que no sean móviles obtengan el fondo del vídeo y el desplazamiento de paralaje:

    /*video background*/if(!WURFL.is_mobile){ $('#vid').videoBG({ mp4:'assets/Birds_Animation.mp4.mp4', ogv:'assets/Birds_Animation.oggtheora.ogv', webm:'assets/Birds_Animation.webmhd.webm' });}/*The parallax scrolling*/window.onscroll = function () { if (!WURFL.is_mobile){ heroImage.style[prefixedTransform] = "translate3d(0px," + window.scrollY / 2.3 + "px, 0px)"; herovid.style[prefixedTransform] = "translate3d(0px," + window.scrollY / 1.1 + "px, 0px)"; heroText.style["opacity"] = (1 - ((window.scrollY / 6) / 100)); }}

    El ejemplo anterior simplemente comprueba si el dispositivo es móvil (un teléfono o una tableta) e introduce las funciones correspondientes. Por supuesto, también podríamos aprovechar las estrategias más detalladas WURFL.form_factor.

    ¿Poner más en CSS?

    Los ejemplos anteriores muestran cómo hacer uso de los datos del dispositivo en JavaScript. Sin embargo, también podemos hacer que la información del dispositivo esté disponible en CSS. Podemos asignar diferentes estilos dependiendo del dispositivo, factor de forma y si es móvil. La primera técnica que veremos es similar a cómo funciona Modernizr. Modernizr agrega una determinada clase al documento HTML dependiendo de si su prueba devuelve trueo false.

    Digamos que desea definir algún comportamiento específico en el CSS para dispositivos móviles. Debería agregar el siguiente fragmento de JavaScript a su página:

    document.documentElement.className += ' ' + (WURFL.is_mobile ? ’ : 'no-') + "mobile";

    Esto agregará una clase al htmlelemento. Para dispositivos móviles, diría html class=”is_mobile”; para otros dispositivos, diría html class=”no-is_mobile”.

    Si conoce Modernizr, probablemente esté familiarizado con este enfoque. Su CSS podría adoptar la siguiente forma:

    .mobile #menu a{ padding .5em;}.no-mobile #menu a{ padding .1em;}

    En este ejemplo sencillo, hemos aumentado el relleno de los elementos del menú para que sean fáciles de tocar con el pulgar gordo.

     

    Este método se puede utilizar para todas las capacidades de WURFL.js. Sin embargo, debido a que complete_device_namey form_factorno son valores booleanos (como is_mobile), la parte CSS puede convertirse en un gran dolor de cabeza. Entonces, un poco más de flexibilidad podría resultar útil. Aquí hay un ejemplo usando data-atributos:

    document.documentElement.setAttribute('data-device_name', WURFL.complete_device_name);document.documentElement.setAttribute('data-form_factor', WURFL.form_factor );

    Esto colocará atributos de datos con capacidades WURFL en el htmlelemento. Obtenemos varias características interesantes con este método: podemos apuntar a dispositivos específicos, factores de forma e incluso grupos de dispositivos combinados con factores de forma mediante el uso de selectores CSS:

    html[data-form_factor = 'Smartphone'] #menu a{ background: green;}

    Gracias al selector de atributos * comodín , podemos incluso hacer coincidir cadenas:

    html[data-device_name*='Nokia'] [data-form_factor = 'Feature Phone'] { background: yellow;}

    El CSS anterior coincidirá con los teléfonos básicos Nokia de cualquier modelo. También ilustra cómo se ve el DOM con los dos métodos implementados (en este caso, con un iPhone 5S).

    Ayuda con anuncios publicitarios

    Existen muchas redes publicitarias diferentes, cada una con su propia especialización. Algunos son buenos para dispositivos móviles, otros para computadoras de escritorio. Algunos admiten anuncios de texto, otros tienen anuncios de tamaño fijo. Si ya no tiene un nivel principiante en redes publicitarias, es posible que desee asumir cierto control sobre esto. WURFL.js puede ayudarle a tomar sus propias decisiones o influir en la red para que tome las decisiones correctas para usted.

    El enfoque obvio es pedir WURFL.is_mobileque se elijan redes o anuncios que sean buenos para dispositivos móviles y otros que sean buenos para dispositivos no móviles.

    if(WURFL.is_mobile){ displayMobileAd();}else{ displayDesktopAd();}

    Además, desde una perspectiva de diseño, es bueno poder ajustar los tamaños y proporciones de los anuncios a sus puntos de interrupción y diseñar para diferentes factores de forma de los anuncios. En casos extremos, podrías hacer algo como esto:

    switch(WURFL.form_factor){ case "Smartphone": if(WURFL.complete_device_name.indexOf("Apple") !=-1){ showAppStoreAds(); }else( showWebAds(); ) break; case "Tablet": showSpecificProportionAds(); break; case "Feature Phone": showTextAds(); break; default: showGoogleAdwords(); break;}

    Conclusión

    Si ha abordado la diversidad de dispositivos en el pasado, sabrá que muchos desarrolladores han estado buscando trucos de JavaScript para detectar navegadores, dispositivos y sus respectivas funciones. Tradicionalmente, un DDR requería la instalación de bibliotecas y datos del lado del servidor y la actualización del repositorio de descripción del dispositivo. WURFL.js es una opción disponible gratuitamente para gestionar estos problemas.

    Es posible que desee considerar WURFL.js o bibliotecas similares para análisis, optimización de la experiencia del usuario o publicidad, y la biblioteca puede complementar muy bien a Modernizr. Si bien Modernizr detecta compatibilidad con ciertas funciones del navegador, WURFL.js proporciona información sobre el dispositivo físico del usuario.

    WURFL.js es un puente entre el lado del servidor y el lado del cliente, lo que facilita a los desarrolladores web front-end aprovechar la funcionalidad que solía pertenecer al servidor. También se puede utilizar para sitios web actuales que han sido diseñados de manera responsiva o que mejoran progresivamente.

    Otras lecturas

    • Creación de un sitio web mejor responsivo
    • Aligerando el diseño de su sitio web responsivo con RESS
    • Perder usuarios si el diseño web responsivo es su única estrategia
    • Pruebas para y con Windows Phone

    (al, il, mrn)Explora más en

    • Móvil
    • javascript
    • Dispositivos





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Detección de dispositivos del lado del servidor con JavaScript

    Detección de dispositivos del lado del servidor con JavaScript

    Índice Érase una vez, detección de dispositivos

    programar

    es

    https://pseint.es/static/images/programar-deteccion-de-dispositivos-del-lado-del-servidor-con-javascript-850-0.jpg

    2024-04-04

     

    Detección de dispositivos del lado del servidor con JavaScript
    Detección de dispositivos del lado del servidor con JavaScript

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20