El otro día preguntaron cómo hacer un slide, un carrusel, en modo responsive y mi respuesta fue que lo mejor era eliminarlo para los móviles, ya que es un elemento complementario, pero no fundamental... trataré de explicarme.
Para hacer una buena página web responsive creo que no basta con emplear imágenes elásticas y cajitas fluidas; también es importante filtrar la información que se envía desde el servidor. Por lo general, las condiciones en las que se visita una web desde un smart-phone no son las mismas que desde un ordenador. Lo normal es tener contratada una tarifa plana que al llegar a cierta cantidad de datos se satura y además la conexión 3G es mucho peor que la proporcionada por una wifi y se va leyendo en el metro o el autobús y... en fin, que cada dato enviado es una lata.
Por lo tanto, lo mejor es dosificar los datos enviados, es decir, quitar los más pesados, como las imágenes, sobre todo cuando no cumplen una función comunicativa esencial, sino que son elementos de diseño más o menos accesorios. Es el caso de los slides o carruseles de imágenes.
Existen varias maneras de detectar desde qué dispositivo se está conectando un usuario a una web, pero quizás sean las que emplean PHP las más interesantes, ya que, como corre del lado del servidor, podemos estar seguros de que funcionará siempre. Y lo bueno es que Serban Ghita y Victor Stanciu han desarrollado una clase que facilita muchísimo este proceso: Mobile-Detect.
Es fácil de usar:
1. Se descarga desde github y se sube al server:
2. Se incluye en la página web mediante la sentencia
require_once ('Mobile_Detect.php');
3. Se crea una instancia:
$detect = new Mobile_Detect();
4. Y ya se recurre a los condicionales que se necesiten:
<?php
if ($detect->isMobile()) {
// Detecta si es un móvil
}
if ($detect->isTablet()) {
// Si es un tablet
}
if ($detect->isAndroidOS()) {
// Si es Android
}
if ($detect->isiOS()){
//Si es iOS
}
?>
Por ejemplo, imaginemos que tenemos un script que carga un carrusell:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
// aquí una barbaridad de código y librerías para que funcione el carrusel
</script>
</head>
<body>
// aquí una barbaridad de imágenes muy pesadas para el carrusel
</body>
</html>
Ahora vamos a decirle que lo que hay entre las líneas 5 y 7, así como lo que hay en la línea 10, solo se cargue si el dispositivo no es un móvil (si la comprobación da false).
<!DOCTYPE html>
<html>
<head>
<?php require_once ('Mobile_Detect.php');
$detect = new Mobile_Detect(); ?>
<title></title>
<?php if ($detect->isMobile()==false) { ?>
<script>
// aquí una barbaridad de código y librerías para que funcione el carrusel
</script>
<?php } ?>
</head>
<body>
<?php if ($detect->isMobile()==false) { ?>
// aquí una barbaridad de imágenes muy pesadas para el carrusel
<?php } ?>
</body>
</html>
Está chulo, ¿no? 🙂
Genial esta biblioteca. Y si queréis implementar vuestro propio código he encontrado un post dónde lo explican de forma sencilla, http://www.bloogie.es/tecnologia/programacion/499-detectar-dispositivos-moviles-y-tablets-con-php
Gracias por el aporte, Juan.
Buenísimo el aporte! Genial! Ahora tengo una duda: cómo subo/configuro la clase Mobile-Detect al servidor? No tengo ni idea…Gracias (hace un año que estoy en esto y soy algo nuevón)
Hola Edgard, gracias.
Bajas el archivo desde GitHub y los subes al directorio de tu web con cualquier programa de FTP, como Filefilla. En general, conviene incluir todo este tipo de utilidades extra en un subdirectorio llamado inc, pero también la puedes poner en el raíz.
abrazos.
Hola podrian actualizar el link:
https://github.com/serbanghita/Mobile-Detect
porque sale error y no se puede descargar el archivo.
gracias por el aporte.
saludos
Hola Víctor, el enlace está bien. Quizás se cayó momentáneamente.
Gracias!
Ya intente de nuevo y sale lo mismo, te puedo pedir de favor si me puedes enviar los archivos fuente a mi correo egocentricdc@live.com.mx gracias por tu ayuda y por el aporte
saludos.
Gracias por el tips, era justo lo que necesitaba!!
Hola quisiera saber si a demas de saber q el usuario se conecta mediante un celular se puede averiguar el N° del mismo para consultar en una base de datos y permitirle el acceso a la navegacion de la aplicacion web. Mas o menos seria restringir el acceso para un celular determinado y q no pueda acceder desde otro que no sea el celular que yo le di
Gracias me es de gran utilidad y esta bien explicado
Gracias.
No funciono.
Esta geniaaaaall!! Muchísimas gracias. Funcionó a la perfección 😀
me alegro : )
Gracias! Es lo que buscaba 🙂
me alegro : )
Genial!!!!