Escrito por
Jesus Mager
Okhosting IT INvestigation

Como todos sabemos, en el artículo de moda en muchos países es el conocido iPhone de Apple. Una de las mayores innovaciones se ha convertido en una herramienta cotidiana para muchos usuarios de Internet móvil. Su innumerable cantidad de programas descargables desde iTunes puede convertir este teléfono en una consola de juego móvil, una aplicación científica o una computadora portátil entre muchos otros.

Sin embargo, lo que todos los usuarios han resaltado como la característica más auténtica del gadget es su perfecta integración con Internet, donde podemos revisar el correo electrónico, observar videos de youtube sin esfuerzo, navegar en Internet sin la frustración de los viejos móviles y por supuesto la conectividad con la tienda online de Apple entre muchas otras cosas.

El crecimiento de la popularidad del iPhone es tan evidente, que en el portal NetApplications evalúa que iPhone tiene el 0.75% de uso en Internet. Lo cual nos quiere decir que tener una página apta para ser vista de para iPhone es no solo relevante si no muy importante. Despreciar a uno de cada cien navegantes que quieran acceder a nuestra página no es una buena idea, y por lo tanto el Web Master debe tener en cuenta crear un entorno amigable para este dispositivo móvil.

Primero veamos que características debe tener una página apta para iPhone:

• El tamaño de nuestras páginas de no deben exceder los 10 megas.
• Los javascripts tienen un límite de ejecución de 5 segundos
• Se utiliza Quicktime para poder reproducir video y audio, por lo tanto hay que utilizar formatos soportados por este sistema multimedia.
• Se debe separar la página html y de etilo ccs como se mostrará más adelante.
• El ancho de la resolución del teléfono es de 480 píxeles., pero la pantalla del navegador es de 320 píxeles.
• Se soporta PDF
• No es conveniente usar applets Java u otros plugins que tendrán problemas de adaptación y problemas de versiones y soporte. (No son soportadas por ahora)
• Las tipografías soportadas son American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New, Georgia, Helvetica, Helvetica Neue, Marker Felt, Times New Roman, Trebuchet MS, Verdana y Zapfino.
• Utiliza los formatos de imagen tif, jpg, y png.
• Soporta HTML 4, XHTML 1.0, CSS 2.1 y algunas características de CSS 3, Javascript 1.4, DOM y Ajax.
• No es conveniente utilizar un diseño web con frames.
• No se soporta el tipo file de input, por lo tanto no es posible subir archivos desde nuestro iphone a alguna página.

Como hemos mencionado, es importante hacer que nuestra página maneje de forma distinta la visualización y presentación en caso de ser observada por safari u otro navegador de iphone. Para esto utilizaremos:

Donde el estilo es separado por la condición de la resolución máxima del dispositivo. En dispositivos con resolución mayor se aplicará un fondo de pantalla gris, sin ningún atributo adicional. Pero para una pantalla con resolución máxima de 480 píxeles, que es el caso del iPhone se desplegará un estilo distinto, con fondo rojo, etc…

Ahora bien, el navegador también nos indica que características tiene el cliente, por lo tanto es posible cargar una página totalmente distinta en el monto en que es detectado el sistema operativo de iPhone, esto utilizando tecnología del lado del servidor. El ejemplo que se dará es una condición en PHP para poder generar una página adecuada para el iPhone.

Como vemos, es posible determinar aspectos distintos para la visualización que deseamos dar, sin embargo el iphone nos permite no solo cambiar la presentación si no también crear contenido especial para el, y pone a disposición una serie de configuraciones especiales

Por ejemplo, para poder ocultar la barra de direcciones URL que tiene safari y utilizar más espacio para nuestra página es posible hacerlo con un pedazo de código en JavaScript.

window.onload = function() { 
	setTimeout(function(){ 
		window.scrollTo(0, 1); 
	});
}

Si necesitas registrar un dominio .com .mx visita www.okhosting.com y compralo por $200 pesos al año iva incluido.

Pero no solo se puede manipular la ventana del navegador, si no incluir características del teléfono con nuestra página web sin esfuerzo alguno.

El iPhone incluye la posibilidad de que en la página no solo aparezcan enlaces a otras páginas si no a números telefónicos que nos permitirá marcar en el momento de presionar sobre ellos y de esta forma enviar una copia pega molesto o peor aun, usar un papel y pluma. Se realiza con el añadido de tel: antes del número como se muestra en el siguiente ejemplo:

 Contacta mi empresa 

El ya conocido malito también se encuentra disponible de una forma totalmente integrada en el ambiente del teléfono, donde al presionar el enlace vinculado a una dirección mail, se nos lleva inmediatamente al programa mail.

 Envía un e-mail 

Por último el iPhone tiene incluido la la librería de google maps en sus recursos de sistema, por lo tanto es posible hacer uso de esto en nuestra página web sin tener que entrar a aprender la UI de google maps, lo cual nos ahorrará no solo trabajo si no también preocupación por el como se integrará esto en la vista del usuario final. Con un simple enlace a google maps es posible utilizar la perfecta integración de este en el teléfono.

 Guadalajara en Google Maps 

Esperamos que este artículo haya sido de utilidad para todos los usuarios de Okhosting.com Recordamos que es posible hacer un copy paste del código antes descrito si no esta el usuario familiarizado con HTML o programación. El crear paginas web compatibles con diversos tipos de usuarios nos abrirá nuevas puertas de posibles cuentas. El sector de usuarios que utilizan iPhone es normalmente interesante para el mercado en Internet ya que tienen mayores recursos para gastar en productos electrónicos en línea. Este es un factor que no debemos pasar por alto.

Para más información acerca del tema recomiendo visitar las siguientes páginas:

http://www.csslab.cl/2008/07/10/desarrollos-web-para-iphone/
http://es.appleweblog.com/2007/06/normas-y-consejos-de-desarrollo-para-iphone