Si en anteriores semanas os hablábamos de las páginas web Responsive, esta semana os traemos una nueva tecnología que damos por hecho que será la evolución lógica y que creará tendencia a partir de este año 2013, hablamos del RESS, o lo que es lo mismo, Responsive Web Server Side , que nace para solucionar las carencias que ofrecía el responsive web, principalmente nace para resolver todos los problemas que presenta el responsive web y para conseguir exprimir al máximo la experiencia del lado del servidor, es la conjunción perfecta entre servidor y cliente responsive.
Para poder usar esta tecnología lo primero que hay que saber es que dispositivo es el que se está usando el usuario, tamaño, funciones y otras características que pueden definir la información a mostrar, por ejemplo un caso práctico sería un menú horizontal en una web para visualizar en un ordenador de sobremesa y un menú desplegable o mediante otra técnica similar para móvil, el lado del servidor mostrará la información y el lado del cliente mostrará la forma de visualizarse, os podéis descargar los archivos de GitHub, hemos podido ver que también corre con Bootstrap , la última elección que os comentamos en otro artículo y que os recomendamos encarecidamente leer, en nuestra caso actualmente estamos desarrollando un tienda bajo Prestashop y acoplando Bootstrap a nuestro grid personalizado.
Una vez hemos descargado RESS , veremos una gran serie de archivos , así que centrémonos en los elementos que nos importan y son los más importantes.
- Wurfl.php -> inicia el cliente y guardará los datos de configuración, para posteriormente detectar el dispositivo sobre el que se está ejecutando.
- Ress.php -> Se encarga de detectar mediante javascript el ancho del dispositivo , permitiendo detectar tanto el dispositivo como la orientación.
Las imágenes también son muy importante para RESS, ya que en función del dispositivo que carguemos nos permitirá visualizar el tamaño adecuado en función de si estamos en un móvil o en un portátil, o sobremesa. Gracias al código que utiliza, nombrando correctamente las imágenes podremos mandar un código u otro, por ejemplo en Prestashop que está usando variables tipo large, médium o similar, tan solo tendríamos que escribir algo tal que así
- medium-foto1.jpg
- large-foto1.jpg
- extra-large-foto1.jpg
Por lo que para usarlo como una variable en RESS sería muy sencillo:
- <img alt=»imagen de prueba» src=»img/<? Php echo $ RESS [» />
De esta manera Prestashop que gestiona múltiples imágenes iría mostrando la adecuada en función del dispositivo. Siguiendo este método de trabajo podréis ver que es muy sencillo mostrar o ocultar información por el lado del servidor, haciendo una sencilla consulta del dispositivo y en función de si nos devuelve un verdadero o falso mostrar la información que toca.
En el ejemplo que nos muestra REES podemos ver una prueba de rendimiento entre tres dispositivos comunes, donde podemos ver parte del potencias de RESS
- Grande: 84 solicitudes, 696KB transferido | 2-6 (onload: 1-3, DOMContentLoaded: 600ms-3).
- Medio: 84 solicitudes, 685KB transferido | 2-6 (onload: 1-3, DOMContentLoaded: 600ms-3).
- Small: 25 solicitudes, 221KB transferido | 560 ms (onload: 580ms, DOMContentLoaded: 320ms).
Resumiendo nos encontramos en un momento, en el que los usuarios acceden desde diferentes puntos con diferentes dispositivos, el problema actual al igual que paso a finales de los 90 con el flash, es que las webs aún no están preparadas para este cambio, pero el responsive web será una tecnología que estará presenta en un futuro muy próximo en la mayoría de páginas de calidad y por cierto Google ya comienza a premiar a este tipo de webs, por o que os recomendamos que vayáis pensando en usar este tipo de tecnologías.