La gran ventaja que aporta la programación de webs adaptables se basa prevalentemente en programar el archivo css por medio de css media queries. Básicamente, la hoja css se encarga de mostrar un estilo adaptado en cada dispositivo, pc, mac, smartphone o tablet. Se empezando a oír voces, como el joven Brad Frost, que hace una sagaz critica, razonando que esto pronto será un «parche», no una solución. Sí es verdad que con la proliferación de dispositivos, llegará un momento que las reglas del css media queries se volveran tan complicadas de implementar, como lo ha sido desde siempre adaptar las web a los diferentes tipos de navegador, explorer, safari o firefox. Por tanto el «adelanto» en realidad no lo será tanto como nos suponíamos, pero de momento parece que es lo único que tenemos.
Y cómo se adapta la publicidad de Google Adsens?
Ya sabemos que no podemos modificar el código javascript facilitado por Google porque incurriríamos en una infracción, vamos a ver lo que nos dicen en su web: sí se puede poner este y solo este código, sin modificarlo:
<script type="text/javascript"> google_ad_client = "ca-pub-XXXXXXX"; if (window. innerWidth >= 800) { google_ad_slot = "1234567890"; google_ad_width = 728; google_ad_height = 90; } else if (window. innerWidth >= 400) { google_ad_slot = "1234567890"; google_ad_width = 300; google_ad_height = 250; } else { google_ad_slot = "1234567890"; google_ad_width = 468; google_ad_height = 60; } //--> </script> Desde BCN Cluster nos preguntamos qué pasaría si se cambiasen las medidas del anuncio, si esto se consideraría una infracción o no, o si se controlan los anuncios mediante css: sobre este tema no se sabe nada, pero la verdad es que el código facilitado por Google aún no va fino.
En la página en inglés, un extenso artículo nos amplía el sistema de selección de estilo css por parte del navegador de un cualquier dispositivo, según esta muestra de código:
<meta name="viewport" content="width=device-width, initial-scale=1"> La linea anterior, que tiene que estar en la etiqueta <head>, es la primera condición imprescindible para un diseño adaptable.
@media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ } .... Las anteriores líneas de código, en cambio, son los estilos propiamente dichos, uno para cada dispositivo, o rangos de dispositivos, donde modificaremos las características de nuestros divs y clases Esta disposición, que se suele llamar «CSS Media-queries«, podríamos definir un conjunto de reglas para un dispositivo tablet como Galaxy o iPad tanto para cuando el dispositivo esté en posición horizontal como en vertical, ocultando y mostrando diferentes elementos de nuestro esquema o cambiar las dimensiones de la capa que contiene los anuncios de Adwords, pero como ya comentamos, no está claro si está permitido o no: habrá que probar 😉