¿Qué es Mobile RESS? . Habitualmente cuando los desarrolladores necesitan adaptar sus aplicaciones a dispositivos móviles optan por utilizar técnicas de Responsive Web Design . Estas técnicas permiten que nuestra aplicación web se muestre de una forma diferente dependiendo si el entorno es tablet, móvil o web. Para ello normalmente nos apoyamos en CSS y Media Queries que obrarán el milagro.
El resultado suele ser bueno , pero hay que pagar un precio y es que la página web sigue siendo la misma aunque partes de ella no se muestren. Esto puede ser un problema, cuando nuestra página web es accedida desde un ordenador estamos conectados a internet con una buena línea. Sin embargo esto no tiene porque ser cierto cuando hablamos de un dispositivo móvil.
Para solventar este tipo de problemas necesitamos otro enfoque a nível de Arquitectura. No es suficiente con utilizar Responsive Web Design. El problema se volverá más seguro cuanto más usuarios accedan a la aplicación desde localizaciones remotas o con mala cobertura móvil.
Mobile RESS (Responsive Web Design Server Side)
La solución viene a partir de un enfoque del lado del servidor. Si queremos mejorar el rendimiento de las aplicaciones móviles el servidor deberá enviar a cada dispositivo la información que le encaja y no toda la página.
Mobile RESS y librerías
Implementar este tipo de soluciones no es excesivamente complejo y existen clases y librerías en todas las plataformas que nos ayudan a implementarla de forma rápida. Una de las más habituales sin complicarnos demasiado la vida es MobileESP que tiene un gran soporte multiplaforma y aporta una clase denominada UAgentInfo que dispone de un amplio conjunto de métodos para decirnos que dispositivo se esta conectando en estos momentos a nuestra web. Vamos a ver un ejemplo de código a través de un JSP sencillo.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="com.handinteractive.mobile.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
UAgentInfo agente=new UAgentInfo(request.getHeader("User-Agent"),request.getHeader("Accept"));
if (agente.detectTierTablet()) {
out.println("estamos en una tableta");
}
else if (agente.detectTierIphone()) {
out.println("estamos en un telefono");
}else {
out.println("estamos en la web");
}
%>
</body>
</html>
Dependiendo del dispositivo con el que se cargue la web la página JSP generará una estructura de información u otra. En el caso de un emulador de telefono como Opera Mobile Emulator:
En el caso de la web clásica:
Otros artículos relacionados: Arquitecturas SPA ,HTML5 History API
hola, hay varias cosas que no entiendo al respecto, no existe algun video o curso al respecto?
pues yo no tengo ninguno 🙁
Cuando hago diseño de UI en mis aplicaciones, siempre lo hago siguiendo el enfoque ‘mobile first’, que dice que primero debes empezar por las pantallas más pequeñas e ir subiendo de dimensiones de acuerdo a las pantallas de los dispositivos más grandes. Este enfoque te ahora muchos problemas mas que nada técnicos que tendrías si empiezas por pantallas grandes, adaptar esas interfaces a pantallas cada vez más pequeñas significa muchas veces reestructurar la maquetación. Y ahora una aplicación o website responsive no solo depende de CSS, también tenemos acceso a media queries mediante JavaScript 😉 Saludos, estimado Sr. Álvarez. PD:… Read more »
Me apunto la idea ,gracias por los comentarios 🙂