Cuando un profesional se dedica al desarrollo de proyectos digitales hay una máxima, lo que se ve en el navegador es lo que es. Da igual qué backend o qué estilos tenga nuestra página web si a la hora de renderizarlo en el navegador se ve de forma distinta a la esperada. La librería JavaScript Modernizr es la solución para evitar disgustos: es el mejor testeador posible para detectar cuáles son las características del proyecto que soporta cada navegador.
Concretamente, Modernizr es una librería que revisa 18 características de estilos CSS3 y 40 más relacionadas con el documento HTML, sobre todo su última versión disponible, HTML5. Esto es interesante porque los navegadores más modernos ejecutan recursos que los más antiguos no pueden. La idea es aprovechar las ventajas de los primeros sin dejar de servir en los segundos. Así se ajusta el diseño a la experiencia de usuario real que tendrá la web para todos los navegadores. Facilita la creación de proyectos digitales todoterreno.
Instalación y herramientas de Modernizr
El proceso de descarga e instalación de la librería en una web:
– El primer paso es descargar el archivo con el código fuente de Modernizr. El código en lenguaje JavaScript se encuentra en dos variables distintas: por un lado la de Desarrollo, que es un script completo con todas las funcionalidades de la librería, que está sin comprimir y que es perfecto para la fase de desarrollo. Por otro lado la variable de Producción, que son las librerías específicas de testeo de páginas web una vez que estas ya están subidas al servidor de producción. Es recomendable instalar solo los módulos que se usen. Este es el listado completo de funcionalidades y modulos de Modernizr.
– Para usar esta librería JavaScript es necesario incorporar el script de Modernizr en el <head> de la web, justo después de las declaraciones de estilos CSS del site. Primero cargan los estilos y después la librería. El script que habría que añadir en el <head> del proyecto es el siguiente:
<script src=”modernizr.js"></script>
Modernizr utiliza fundamentalmente dos herramientas para detectar cuáles son las funcionalidades concretas disponibles en cada navegador:
1. Objeto JavaScript: una vez instalada y cargada la librería Modernizr, el objeto JavaScript permite detectar qué funcionalidades del proyecto están soportadas en cada navegador, tanto lenguaje HTML como estilos CSS. Este tipo de detección de funcionalidades disponiblesse produce a través de variables booleanas de true (cierto) o false (falso). True significa que el navegador soporta la funcionalidad; false que no lo hace.
if (Modernizr.awesomeNewFeature) { showOffAwesomeNewFeature(); } else { getTheOldLameExperience(); }
Dos casos prácticos a partir del ejemplo teórico de arriba. El primero prueba si el navegador usado por el usuario soporta los eventos touch de nuestro proyecto. El segundo detecta si se pueden aplicar sombras:
if (Modernizr.touch){
//el navegador soporta eventos touch
} else {
//el navegador no soporta eventos touch
}
if (Modernizr.boxshadow) { // Podemos aplicar sombras! } else { // La propiedad box-shadow no está disponible }
2. Clases CSS: la librería carga de forma automática todas las clases CSS que corresponden a las funcionalidades de estilos que reconoce un navegador moderno: canvas, eventos touch, sombras, geolocalización, vídeo, audio, gradientes, opacidad, marco para imágenes, almacenamiento, animación, funcionalidades con bases de datos… En este sentido, este sería el documento HTML tipo con estas clases:
La mayoría de funcionalidades modernas en HTML5 y CSS3 son ejecutadas en los navegadores modernos. No sucede lo mismo con los antiguos. En ese caso, el desarrollador lo que debe hacer es crear las clases necesarias para imitar esa funcionalidad para los navegadores menos recientes: usar el CSS clásico para facilitar esa propiedad.
Si se desea sombreado y Modernizr no ha instalado esa propiedad de forma automática porque el navegador es antiguo, se incluye a mano:
Modernizr dispone de un método que permite a los desarrolladores la carga bajo demanda de librerías o plugins que aumentan las funcionalidades de los navegadores menos modernos. La librería se cargaría solo si el usuario visita una página web con algún estilo concreto no disponible en el navegador.
Esto se consigue con la carga de uno de estos plugins o polyfill mediante el método Modernizr.load(). Así se mantiene la UX en navegadores antiguos.
Los pasos a seguir:
– Con Modernizr se puede detectar si una funcionalidad está o no disponible dentro del navegador utilizado por el usuario. En el caso de que esa propiedad no esté disponible en el navegador, el método Modernizr.load() puede cargar el polyfill específico para esa función.
– ¿Cómo usar el método Modernizr.load() para incorporar librerías? El código necesario es sencillo, en este caso incorpora geolocalización:
Se espera que durante los próximos años se regule el ‘open finance’, lo que dará lugar a un nuevo ecosistema de datos abiertos El open finance está abriéndose paso en el terreno legal mediante la consolidación de varias iniciativas que le darán blindaje jurídico. Una vez esto se haya completado, los clientes confiarán en un […]
Las APIs son el futuro de la automatización de servicios bancarizados. Albert Pla, Head of SME eSales en Global Markets de BBVA, explica esta tecnología. Las API son una de las herramientas más recientes y esperadas de Open Banking. Con ellas es posible automatizar procesos empresariales y realizar operaciones bancarias sin salir de los entornos […]
Los pagos en tiempo real se han convertido en una de las innovaciones más relevantes de la industria financiera. Su crecimiento en los últimos años está siendo muy importante gracias a las posibilidades que proporciona a las empresas, especialmente en las relaciones con sus clientes.
Por favor, si no lo encuentras, recuerda revisar la sección de correo no deseado
×
El correo electrónico con tu ebook está en camino
Te hemos enviado dos mensajes. Uno con el ebook solicitado y otro para confirmar tu correo electrónico y empezar a recibir la newsletter de BBVA API_Market
×
TRATAMIENTO DE DATOS PERSONALES
¿Quién es el Responsable del tratamiento de tus datos personales?
Banco Bilbao Vizcaya Argentaria, S.A. (“BBVA”), con domicilio social en Plaza de San Nicolás 4, 48005, Bilbao, España, C.I.F. A-48265169 Dirección de correo electrónico: contact.bbvaapimarket@bbva.com
¿Para qué y por qué utilizamos tus datos personales?
Para aquellas de las siguientes actividades para la que nos prestes tu consentimiento marcando la casilla correspondiente:
para la ejecución y gestión de tu solicitud, en concreto, recibir la newsletter de BBVA API_Market por medios electrónicos;
para enviarte comunicaciones comerciales, eventos y encuestas relativas a BBVA API_Market a la dirección de correo electrónico que nos hayas facilitado.
¿Durante cuánto tiempo conservaremos tus datos?
Conservaremos tus datos hasta que te des de baja para dejar de recibir nuestra newsletter o, en su caso, las comunicaciones comerciales, eventos y encuestas a las que te hayas suscrito. Tanto si te das de baja como si BBVA decide finalizar el servicio, tus datos serán eliminados.
¿Cómo puedo darme de baja para dejar de recibir la newsletter y/o comunicaciones de BBVA API_Market?
Puedes darte de baja en cualquier momento y sin necesidad de indicarnos ninguna justificación, remitiendo un correo electrónico a la siguiente dirección: contact.bbvaapimarket@bbva.com
¿A quién comunicaremos tus datos?
No cederemos tus datos personales a terceros, salvo que estemos obligados por una ley o que tú lo consientas previamente.
¿Cuáles son tus derechos cuando nos facilitas tus datos?
Consultar los datos personales que se incluyan en los ficheros de BBVA (derecho de acceso)
Solicitar la modificación de tus datos personales (derecho de rectificación)
Solicitar que no se traten tus datos personales (derecho de oposición)
Solicitar la supresión de tus datos personales (derecho de supresión)
Limitar el tratamiento de tus datos personales en los supuestos permitidos (limitación del tratamiento)
Recibir así como a transmitir a otra entidad, en formato electrónico, los datos personales que nos hayas facilitado y aquellos que se han obtenido de tu relación con BBVA (derecho de portabilidad)
Te responsabilizas de la veracidad de los datos personales que facilitas a BBVA y de mantenerlos debidamente actualizados.
Si consideras que no hemos tratado tus datos personales de acuerdo con la normativa, puedes contactar con el Delegado de Protección de Datos en la dirección dpogrupobbva@bbva.com
Puedes encontrar más información en el documento “Política de Protección de Datos Personales” de esta página web.
×
TRATAMIENTO DE DATOS PERSONALES
¿Quién es el Responsable del tratamiento de tus datos personales?
Banco Bilbao Vizcaya Argentaria, S.A. (“BBVA”), con domicilio social en Plaza de San Nicolás 4, 48005, Bilbao, España, C.I.F. A-48265169 Dirección de correo electrónico:contact.bbvaapimarket@bbva.com
¿Para qué y por qué utilizamos tus datos personales?
Para la ejecución y gestión de tu solicitud, en concreto, descargar el e-book/s solicitado.
BBVA informa te informa de que, salvo que indiques tu oposición enviando un correo a la siguiente dirección:contact.bbvaapimarket@bbva.com, BBVA podrá enviarte comunicaciones comerciales, encuestas y eventos relativas a productos y/o servicios de BBVA API Market a través de medios electrónicos.
¿Durante cuánto tiempo conservaremos tus datos?
Conservaremos tus datos mientras sea necesario para la gestión de la solicitud, así como para el envío de comunicaciones comerciales, eventos y/o, encuestas. BBVAconservará tus datos hasta que te des de baja para dejar de recibir dichas comunicaciones o, en su caso, hasta que finalice el servicio.Después, destruiremos tus datos.
¿Cómo puedo darme de baja para dejar de recibir newsletters y/o comunicaciones de BBVA API Market?
Puedes darte de baja en cualquier momento y sin necesidad de indicarnos ninguna justificación, remitiendo un correo electrónico a la siguiente dirección:contact.bbvaapimarket@bbva.com
¿A quién comunicaremos tus datos?
No cederemos tus datos personales a terceros, salvo que estemos obligados por una ley o que tú lo consientas previamente.
¿Cuáles son tus derechos cuando nos facilitas tus datos?
Consultar los datos personales que se incluyan en los ficheros de BBVA (derecho de acceso)
Solicitar la modificación de tus datos personales (derecho de rectificación)
Solicitar que no se traten tus datos personales (derecho de oposición)
Solicitar la supresión de tus datos personales (derecho de supresión)
Limitar el tratamiento de tus datos personales en los supuestos permitidos (limitación del tratamiento)
Recibir así como a transmitir a otra entidad, en formato electrónico, los datos personales que nos hayas facilitado y aquellos que se han obtenido de tu relación con BBVA (derecho de portabilidad)
Puedes ejercitar ante BBVA los citados derechos a través de la siguiente dirección:contact.bbvaapimarket@bbva.com
Te responsabilizas de la veracidad de los datos personales que facilitas a BBVA y de mantenerlos debidamente actualizados.
Si consideras que no hemos tratado tus datos personales de acuerdo con la normativa, puedes contactar con el Delegado de Protección de Datos de BBVA en la dirección dpogrupobbva@bbva.com
Puedes encontrar más información en el documento “Política de Protección de Datos Personales ” de esta página web.
Banco Bilbao Vizcaya Argentaria, S.A. titular de este portal utiliza cookies y/o tecnologías similares propias y de terceros para fines técnicos, de personalización, analíticos, de publicidad comportamental o publicidad relacionada con tus preferencias sobre la base de un perfil elaborado a partir de tus hábitos de navegación (por ejemplo, páginas visitadas). Si deseas obtener información más detallada, consulta nuestra Política de Cookies.
Panel de configuración de cookies
Este es el configurador avanzado de cookies propias y de terceros. Aquí puedes modificar parámetros que afectarán directamente a tu experiencia de navegación en esta web.
Cookies técnicas (necesarias)
Estas cookies son importantes para darte acceso seguro a zonas con información personal o para reconocerte cuando inicias sesión.
Denominación
Titular
Duración
Finalidad
gobp.lang
BBVA
1 mes
Preferencia de idioma
aceptarCookies
BBVA
1 año
Configuración Cookies aceptadas
_abck
BBVA
1 año
Ayuda a protegerse contra los ataques de sitios web maliciosos
bm_sz
BBVA
4 horas
Ayuda a protegerse contra los ataques de sitios web maliciosos
ADRUM_BTs
Salesforce Marketing Cloud
Sesión
Requerido para la supervisión del servicio, inherente al SFMC
ADRUM_BT1
Salesforce Marketing Cloud
Sesión
Requerido para la supervisión del servicio, inherente al SFMC
ADRUM_BTa
Salesforce Marketing Cloud
Sesión
Requerido para la supervisión del servicio, inherente al SFMC
ADRUM_BT
Salesforce Marketing Cloud
Sesión
Requerido para la supervisión del servicio, inherente al SFMC
xt_0d95e
Salesforce Marketing Cloud
Sesión
Recordar las preferencias del usuario (si las hay)
__s9744cdb192d044faa1bf201d29fafd1e
Salesforce Marketing Cloud
Sesión
Recordar las preferencias del usuario (si las hay)
wpml_browser_redirect_test
WPML
Sesión
Traducción de textos del portal
wp-wpml_current_language
WPML
24 horas
Traducción de textos del portal
Permiten medir, de forma anónima, el número de visitas o la actividad. Gracias a ellas podemos mejorar constantemente tu experiencia de navegación.
Dispones de una mejora continua en la experiencia de navegación.
Con tu selección no podemos ofrecerte una mejora continua en la experiencia de navegación.
Denominación
Titular
Duración
Finalidad
AMCV_***
Adobe Analytics
Sesión
ID de visitante único que se usan en las soluciones de Marketing Cloud
AMCVS_***
Adobe Analytics
2 años
ID de visitante único que se usan en las soluciones de Marketing Cloud
demdex (safari)
Adobe Analytics
180 días
Crear y almacenar identificadores únicos y persistentes
sessionID
Adobe Analytics
Sesión
Cookie interna de Launch usada para identificar al usuario
gpv_URL
Adobe Analytics
Sesión
plugin Adobe Analytics: getPreviousValue Capturar el valor de una determinada variable en la siguiente vista de página, en este caso la prop1
gpv_level1
Adobe Analytics
Sesión
Cookie utilizada para almacenar el levl1 del DataLayer de la página anterior.
gpv_pageIntent
Adobe Analytics
Sesión
Cookie utilizada para almacenar el pageIntent de la página anterior.
gpv_pageName
Adobe Analytics
Sesión
Cookie utilizada para almacenar el pagename de la página anterior.
aocs
Adobe Analytics
Sesión
Cookie que almacena los primeros valores recogidos al inicio de un proceso.
TTC
Adobe Analytics
Sesión
Cookie usada para almacenar el tiempo transcurrido entre el evento App Page Visit y App Completed.
TTCL
Adobe Analytics
Sesión
Cookie usada para almacenar el tiempo transcurrido entre el evento LogIn y App Completed.
s_cc
Adobe Analytics
Sesión
Determinar si las cookies están activas
s_hc
Adobe Analytics
Sesión
Cookie usada por Adobe con propositos de analítica.
s_ht
Adobe Analytics
Sesión
Cookie usada por Adobe con propositos de analítica.
s_nr
Adobe Analytics
2 años
Determinar el número de visitas de usuario
s_ppv
Adobe Analytics
Persistente
plugin Adobe Analytics: getPercentPageViewed Determinar el procentaje de página que visualiza un usuario
s_sq
Adobe Analytics
Sesión
Funcionalidades ClickMap/ActivityMap
s_tp
Adobe Analytics
Sesión
Cookie usada por Adobe con propositos de analítica.
s_visit
Adobe Analytics
2 años
Cookie usada por Adobe para saber cunado una sesión se ha iniciado.
Permiten que la publicidad que te mostramos sea personalizada y relevante para ti. Gracias a estas cookies no verás anuncios que no te interesen.
Dispones de una publicidad adaptada a ti y a tus preferencias.
Con tu selección pierdes la personalización de la publicidad, solo verás anuncios genéricos.
Denominación
Titular
Duración
Finalidad
OT2
VersaTag
90 días
Cookie de VersaTag usada para almacenar un id de usuario y el numero de visitas del usuario.
u2
VersaTag
90 días
Cookie de VersaTag en la que se almacena el ID del usuario
TargetingInfo 2
MediaMind
1 año
Cookie que sirve para asignar un número unico random que genera MediaMind.
Estas cookies están relacionadas con características generales como, por ejemplo, el navegador que utilizas.
Dispones de una experiencia y contenidos personalizados.
Con tu selección no podemos ofrecerte una navegación y contenidos personalizados.
Denominación
Titular
Duración
Finalidad
mbox
Adobe Target
9 días
Cookie usada por Adobe Target para hacer test de personalizacion de experencia del usuario.
×
Parece que estás navegando desde México, así que vamos a mostrarte el contenido personalizado para tu localización. Cambiar
Parece que estás navegando desde España, así que vamos a mostrarte el contenido personalizado para tu localización. Cambiar
Selecciona el país
Para poder acceder al área privada y sandbox correspondiente, selecciona el país de las APIs que quieres utilizar.
×
×
×
Preferencias de Navegación
Elige el país del que quieres que te mostremos su contenido por defecto.