Webs compatibles con SmartPhones

Los smartphones, sí esos cacharritos que aunque han credido en tamaño siguen siendo móviles, están cada día más presentes en nuestras vidas. El parque de este tipo de terminales ha crecido como la espuma después de que Apple con su famoso iPhone y RIM con Blackberry empezaran a acaparar el mercado gracias a terminales cada vez más asequibles y que “nos hacen la vida más fácil”. Atrás quedó la hegemonía de marcas como Nokia a la que nadie parecía poder toserle en la cara y el desplome absoluto de otras marcas que ya parecían estar casi moribundas como Motorola.

El nuevo concepto de teléfono móvil del siglo XXI no se parece en nada a los de principios de siglo. Recordad que solo han pasado 12 años desde que en el año 2000 solo la mitad de la población española tenía un terminal móvil y que los que lo tenían alucinaban con terminales que hacen “pipipipipopo” como tomo de llamadas con pantallas minúsculas monocromáticas. Marcas como Alcatel, Nokia y Ericsson (antes de ser Sony-Ericsson) eran las que mandaban. ¿Y tanto ha cambiado la cosa en 12 años? Y tanto… los terminales empezaron a empequeñecerse. La moda era que cuanto más pequeño era el teléfono, más “portátil” era y por lo tanto “más chic”, hasta que RIM sacó su primera Blackberry y poco tiempo después Apple le puso las cosas duras con el primer iPhone.

De “navegar”, y lo pongo entre comillas porque aquello más que navegar era una broma, usando la tecnología WAP en los primeros móviles con GPRS, amén de los sablazos que metían las compañías en aquel entonces por usar transmisión de datos por la red GSM, hasta los primeros navegadores que traían las blackberrys, que se parecían más al Lynx de Unix/Linux que otra cosa hemos llegado a terminales como los de hoy en día, que poco tienen que envidiar a los de sus hermanos mayores en los ordenadores de sobremesa. En los terminales con Android podemos instalar Firefox. Apple diréctamente hizo una versión de Safari para su terminal (El navegador que llevan por defecto los Macs y que también está para Windows). Sin embargo todavía hoy en día existe un “pequeño problema”. La pantalla.. No podemos comparar una pantalla de un móvil que por lo normal suele trabajar a 320 o 480 pixels de ancho con una de un ordenador que empieza a moverse medio bien a 1024 y más teniendo en cuenta que la resolución más estándar en nuestros días es tener 1280 pixels de ancho en casi todas las resoluciones de monitor, ya sean en 4:3 o en 16:9.

Para poder hacer una aplicación que sea 100% compatible con un smartphone móvil tenemos varias opciones:

  • Primera: Pasar ligeramente de todo y hacer una web que se muestre bien pero que haya que estar haciendo zoom (típico gesto de los usuarios de iPhone con los deditos para ampliar o alejar la pantalla)
  • Segunda: Hacer una rutina en JavaScript o PHP/ASP/Ruby/… que detecte qué tipo de terminal tenemos y nos redirija a una versión para móviles de la web en cuestión. Esto es bastante típico hoy en día en periódicos online.
  • Tercero: Hacer una versión híbrida que detecte el móvil y “adapte” la web, normalmente mediante JavaScript, para que salga corréctamente con la resolución de un smartphone. Esto puede ser por ejemplo quitar div’s laterales tipo menús, o información que se pueda colocar en otro lado de la pantalla y que de esta forma el texto no se desplac

Sea cual sea la versión que escojamos está claro que lo suyo es la segunda o tercera opción. Muchos usuarios lo agradecerán. Por mi parte las primeras pruebas las estoy haciendo con la segunda, más que nada porque me permite aprender de una forma más ordenada y cuando ya esté todo avanzado quizás una tercera versión nos ahorrará reescribir código innecesario. Sin embargo, como lo primero es aprender allá vamos.

Primeramente habrá que detectar que estamos usando un móvil, ¿cómo? He aquí las diferentes variantes:

JavaScript:

Se podría mejorar, pero por lo normal nos interesará saber, mediante la propiedad navigator.userAgent el tipo de navegador que está usando. En dicha propiedad con buscar iphone, android, o lo que nos interese sería suficiente para detectar al smartphone. El siguiente código es una buena prueba de ello:

<script type=”text/javascript”>
var navegador = navigator.userAgent.toLowerCase();
if( navegador.search(/iphone|ipod|android/) > -1 ){
document.location = ‘https://miversionparamoviles.com’;
}
</script>

Evidentemente la búsqueda en userAgent podemos extenderla más usando palabras como blackberry,palm, etc…

PHP:

if (eregi( ‘ipod|iphone|android|opera mini|blackberry|palm os|windows ce’, $_SERVER[‘HTTP_USER_AGENT’] )) {

código aquí….

}

Ya sabemos cómo detectar que usamos un móvil, ahora prepararemos nuestra web:

Las webs para SmartPhones suelen estar preparadas según XHTML, sin embargo por lo normal suelen trabajar bien en cualquier tipo de código que sea estándard a W3C. Sin embargo para evitar problemas de compatibilidad prepararemos nuestro DOCTYPE según dicho acuerdo. Para comenzar nuestra cabecera se debe de preparar de la siguiente manera:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” id=”v1.06″ xml:lang=”es” lang=”es”>

Esto evitará más de un susto a más de uno. Ahora viene lo realmente interesante. Queremos que sea 100% compatible con smartphones. Lo primero de todo es evitar que se pueda hacer zoom y cosas raras que los usuarios suelen hacer cuando no se ve bien una web porque o salen las letras muy pequeñas o todo lo contrario. ¡Por supuesto contamos con que haremos las pruebas en un smartphone a medida que vayamos haciendo nuestro proyecto! Toda esta magia la hace el llamado ViewPort. ViewPort es una propiedad que pasaremos a través de un METATAG al navegador y al mismo tiempo también define la visión que va a tener el smartphone. Llamamos viewport a la parte visual que tiene la pantalla del smartphone. De momento para mis pruebas he utilizado el siguiente:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />

Esta línea modifica el viewport del smartphone y le indica que se ajuste en forma vertical a la resolución de nuestro smartphone y al msimo tiempo que la escala de visualización sea 1. Esto es importante porque imaginaos que haceis una aplicación web y que en un iPhone se ve de maravilla pero que en una Blackberry se viera realmente pequeña. Con “tocar” estos valores, poniendo el valor initial-scale a otro mayor ampliaríamos la visión del viewport, por poner un ejemplo, aunque se puede hacer de muchas otras maneras.

Sigamos…

<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type” />
<meta http-equiv=”cache-control” content=”no-cache” />
<meta http-equiv=”cache-control” content=”no-store” />
<meta http-equiv=”cache-control” content=”max-age=0″ />
<meta http-equiv=”cache-control” content=”must-revalidate” />

Estos meta son realmente interesantes. El que no hay que olvidar nunca poner es que indica el content-type. Los navegadores para SmartPhones trabajan en codificación UTF-8. Algunos son compatibles con el estándar ISO-8859-1 que usamos en España, pero es mejor no arriesgar. Los siguientes indican que no se utilice caché, de esta forma evitaremos problemas a la hora de recargar la página ya que a fin de cuentas un smartphone NO ES UN ORDENADOR.

y finalmente ya podemos empezar con nuestro código..

<body> Blabvlablablablbll </body>

Hay que tener cuidado en no usar cosas especialmente raras, por ejemplo, las tablas de las que se ha abusado tanto en el pasado para maquetar corréctamente las webs tienen poco sentido gracias a los bloques (divs) de los que se disponen de hoy en día.

Se pueden usar CSS sin ningún tipo de problema, al menos los que yo he probado, pero hay que intentar no usar propiedades demasiado nuevas o “extrañas” que sean útiles en navegadores modernos para hacer algún truco poco documentado.