El iPhone y el iPod Touch disponen de un navegador realmente bueno para tratarse de dispositivos móviles. Mobile Safari muestra las páginas web prácticamente igual que lo haría su versión de escritorio, lo que hace que en muchos casos no sea necesario hacer un diseño específico de nuestra web para estos dispositivos.

Sin embargo, el tamaño de la pantalla del iPhone y del iPod Touch (a partir de ahora hablaremos sólo de iPhone para abreviar) hace que se nos haga incómodo navegar, teniendo que hacer zoom en múltiples ocasiones, lo que entorpece bastante la navegación. Afortunadamente, adaptar nuestra página web al iPhone es una tarea relativamente sencilla y gracias a Mobile Safari podemos lograr hacer que nuestra web tenga el aspecto de una aplicación nativa del iPhone.

Como podréis adivinar por el título, el tutorial está dividido en partes (que iré redactando poco a poco y publicando una vez las haya acabado de escribir). Esta primera parte la dedicaré a explicar cómo preparar nuestro entorno de desarrollo.

Servidor local

Antes de ponernos a diseñar necesitaremos instalar un servidor en nuestro equipo. Hay muchas opciones, sin embargo yo me quedaría con Apache + MySQL + PHP (conocido como WAMP, MAMP o LAMP, dependiendo de si se utiliza Windows, Mac o Linux).

En Windows solía usar WampServer, una aplicación gratuita y fácil de instalar y administrar, y ahora en Mac utilizo la versión gratuita de Mamp. Como hace tiempo que no toco Linux, lo dejaré de lado en este tutorial. De todos modos, más adelante veréis que algunas de las herramientas útiles para comprobar nuestro diseño no están disponibles para Linux (algunas ni siquiera para Windows).

Una vez instalado el servidor, basta con que accedamos a localhost, 127.0.0.1 o nuestra dirección IP. Los tres métodos deberían mostrarnos exactamente lo mismo.

Mobile Safari

Configurando Safari

Ya tenemos el servidor local, con lo que podemos trabajar con MySQL y PHP y si nuestro CMS está escrito en PHP, podremos instalarlo en nuestro servidor local y diseñar directamente para él (yo, por ejemplo, suelo diseñar directamente para WordPress). Ahora necesitamos un navegador que funcione de forma similar a Mobile Safari para comprobar nuestro trabajo, y para ello tenemos 3 opciones diferentes.

Si disponemos de un iPhone lo tenemos muy fácil. En la barra de direcciones basta con introducir la IP de nuestro equipo servidor y listo. Recordad que ambos dispositivos deben estar en la misma red.

En caso de que no dispongamos de un iPhone pero sí de un Mac, tenemos la opción de hacernos desarrolladores para el iPhone, con lo cual tendremos acceso al iPhone Simulator, un simulador del iPhone que, adivinad… tiene Mobile Safari, con lo que podremos probar nuestros diseños en una simulación del iPhone. No es una opción demasiado interesante si no somos desarrolladores, pero si ya lo somos, siempre tenemos la posibilidad de usar el simulador para probar páginas web en lugar de aplicaciones.

Por último, tenemos la opción de usar Safari cambiando el agente de usuario por el del iPhone. Esto es algo que se puede hacer también en otros navegadores, sin embargo como Safari y Mobile Safari parten del mismo motor de renderizado, es más conveniente usar estos, ya que así nos aseguramos de que lo que vemos durante las pruebas es lo más parecido al resultado final.

Un diseño sólo para iPhone

Bien, ahora ya podemos comenzar a diseñar para el iPhone y lo primero que deberíamos hacer es asegurarnos de que nuestro diseño especial sólo se use en el iPhone. Para ello recurriremos al tutorial que publiqué la semana pasada sobre cómo detectar navegadores mediante PHP. De momento nuestro diseño podría comenzar así:

function is_browser($name, $version='') {
	$user_agent = $_SERVER['HTTP_USER_AGENT']; // Cargamos el UserAgent en una variable
	$wtr = false; // Esta variable es la que indica si se ha accedido con el navegador que buscamos o no. Por defecto es false, sólo cambia si se accede con el navegador buscado
	$wtmb = ''; // Esta variable almacena el navegador del dispositivo móvil (sólo si buscamos un navegador de dispositivo móvil, esto no incluye ni Android ni iPod ni iPhone)
	// Primero veamos a quién buscamos y luego comprobemos si es él
	switch ($name) {
		// Caso Internet Explorer
		case 'IE':
			if (strrpos($user_agent, "MSIE") === false) {} else {
				if ($version != '') {
					if (strrpos($user_agent, 'MSIE '.$version) === false) {} else { $wtr = true; }
				} else {
					$wtr = true;
				}
			}
			break;
		// Caso Firefox
		case 'FF': if (strrpos($user_agent, "Firefox") === false) {} else { $wtr = true; } break;
		// Caso Opera
		case 'OP': if (strrpos($user_agent, "Opera") === false) {} else { $wtr = true; } break;
		// Caso Konqueror
		case 'KQ': if (strrpos($user_agent, "Konqueror") === false) {} else { $wtr = true; } break;
		// Caso Chrome
		case 'CH': if (strrpos($user_agent, "Chrome") === false) {} else { $wtr = true; } break;
		// Caso Safari
		case 'SF': if (strrpos($user_agent, "Safari") === false) {} else { $wtr = true; } break;
		// Caso iPod
		case 'IPD': if (strrpos($user_agent, "iPod") === false) {} else { $wtr = true; } break;
		// Caso iPhone
		case 'IPH': if (strrpos($user_agent, "iPhone") === false) {} else { $wtr = true; } break;
		// Caso iPod o iPhone
		case 'IPO':
			if (strrpos($user_agent, "iPod") === false) {} else { $wtr = true; }
			if (strrpos($user_agent, "iPhone") === false) {} else { $wtr = true; }
			break;
		// Caso Android
		case 'AD': if (strrpos($user_agent, "Android") === false) {} else { $wtr = true; } break;
		// Caso navegador móvil
		case 'MB':
			$mua = array(
				'PIE4' => 'compatible; MSIE 4.01; Windows CE; PPC; 240x320',
				'PIE4_Smartphone' => 'compatible; MSIE 4.01; Windows CE; Smartphone;',
				'PIE6' => 'compatible; MSIE 6.0; Windows CE;',
				'Minimo' => 'Minimo',
				'OperaMini' => 'Minimo',
				'AvantGo' => 'AvantGo',
				'Plucker' => 'Plucker',
				'NetFront' => 'NetFront',
				'SonyEricsson' => 'SonyEricsson',
				'Nokia' => 'Nokia',
				'Motorola' => 'mot-',
				'BlackBerry' => 'BlackBerry',
				'WindowsMobile' => 'Windows CE',
				'PPC' => 'PPC',
				'PDA' => 'PDA',
				'Smartphone' => 'Smartphone',
				'Palm' => 'Palm'
			);
			foreach($mua as $nav => $ua){ if(strstr($user_agent, $ua) != false) { $wtmb = $nav; } }
			if ($wtmb != '') { $wtr = true; }
			break;
		// Caso genérico
		default: $wtr = false; break;
	}
	return $wtr;
}

if (is_browser('IPO')) {
/* Diseño especial para el iPhone / iPod Touch */
} else {
/* Diseño general para el resto de navegadores */
}

Y esto es todo de momento.

Más adelante…

En las próximas partes comenzaremos a diseñar para el iPhone. Explicaré desde cómo aprovechar las posibilidades de Mobile Safari para ahorrarnos trabajo (por ejemplo, creando degradados con CSS en lugar de con imágenes) hasta qué medidas usar, cómo detectar rotaciones del dispositivo (si está en vertical u horizontal)… en resumen, cómo simular la interfaz de una aplicación.

Eso sí, habrá unas cuantas partes más. En principio no tengo decidido cuántas habrá en total (ya he comentado al principio que no las tengo escritas), así que podéis pedir en los comentarios que me centre en alguna cosa en especial.