Desde hace unos meses CSSLab tiene un theme especial si entras a través de un iPhone. Y ante la inminente llegada de este codiciado aparato al resto del mundo, he entrado de lleno estudiando desarrollos para esta plataforma. Los aplicativos me la están ganando, ya que se hacen con Objective-C el que no es mi fuerte (me costó un montón un simple Hello World). Pero hoy he dedicado mis investigaciones para desarrollos web propios para iPhone, a través de aplicaciones ricas en cuanto a interacción (RIA).

Lo bueno es que iPhone usa Safari como browser (hasta ahora, único). Estoy muy acostumbrado con su uso y manejo, así que conozco bien sus potenciales. Para ser específico, el motor de iPhone es el WebKit 419.3, (el que correspondería al de Safari 2 para plataformas Mac OS X). Es posible crear sitios que sólo sean vistos por este Safari, tal como una hoja de estilos media=“handheld” es leída sólo por [dispositivos móviles][1]; ya iPhone no lo interpreta, utiliza por defecto la hoja de estilos principales (sea media=“all” ó media=“screen”).

Entonces ¿cómo lo hace?

Para crear estilos sólo para iPhone, podemos linkear una hoja de estilos externa pero con un cambio en el atributo media:

<link href="estilos_iphone.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" />

Este cambio en media es propio de CSS3, una de las ventajas de Safari. Dice precisamente que para anchos de pantalla de hasta 480px (que es el ancho máximo del iPhone en apaisado) utilice tal hoja de estilos. Ahora, para los otros anchos (computadores personales):

<link href="estilos_iphone.css" rel="stylesheet" media="only screen and (min-device-width: 481px)" />

Nuevamente, esto sólo funcionará en Safari 2+ para Mac OS X ó Windows; para que se comporte debidamente en todos los browsers, recomiento primero linkear la hoja de estilos general como siempre lo han hecho (media=“screen”), y a continuación la del iPhone con el media=“only screen and (max-device-width: 480px)” que ya mostré.

La otra manera (que utilizaré en los ejemplos, los que podrás notar diferencia si los ves con un iPhone, claro) [ya la había mencionado en un artículo anterior][2], y se usan juntos del mismo estilo:

@media screen {<br />
     <span class="commentcss">// estilos para todos los browsers</span><br />
}<br />
@media screen and (max-device-width: 480px) {<br />
     <span class="commentcss">// estilos sólo para iPhone</span><br />
}

[Ver ejemplo 1][3]{.verejemplo}

También puedes detectar si el sitio se está leyendo desde el iPhone y redireccionarlo a otra página mediante PHP (que fue lo q usé para CSSLab), como por ejemplo:

if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) {<br />
     <span class="commentcss">// redirecciona</span><br />
}

![Dimensiones de pantalla para iPhone en CSSLab.cl][4]

Otro punto a tener en cuenta es la etiqueta y el valor viewport. Con él podemos manejar varias propiedades al momento de cargar la página en sus iPhone. Sus valores son:

  • width: controla el ancho el cual la página se mostrará en primera instancia. Cuando cargas una página, Safari la adapta para el el 100% del alto y del ancho para que quepa dentro de la primera vista. Si el ancho de tu sitio es de 800px, pero quieres que al momento de cargar la página se desplieguen los primeros 400px, lo defines mediante este valor.
  • height: similar al anterior, la página se cargará mostrando el alto que determinemos en primera instancia, aunque éste sea mayor.
  • user-scalable: determina si el usuario puede o no hacer zoom (in-out) a la página. El valor por defecto es ‘yes’.
<meta name="viewport" content="width=300, user-scalable=no" />

[Ver ejemplo 2][5]{.verejemplo}

Otro punto es la capacidad de esconder la barra de URL que tiene Safari, y desplegar la página sin ella. A través de Javascript podemos hacer ese desplazamiento apenas la página cargue, de la siguiente manera:

setTimeout(function(){<br />
     window.scrollTo(0, 1);<br />
});

[Ver ejemplo 3][6]{.verejemplo}

Esto funciona sólo si el alto de la página es mayor al de la ventana al momento de cargarse.

Otro punto a considerar es la capacidad de interactuar con elementos propios de iPhone a través de simple HTML y enlaces, por ejemplo:

  • Para hacer una llamada telefónica a través de un link:
<a href="tel:6666666">Hacer llamado</a>
  • Para enviar un e-mail:
<a href="mailto:usuario@dominio.com">Envia un e-mail</a>
  • Para buscar un lugar en Google Maps:
<a href="http://maps.google.com/maps?q=santiago+chile">Santiago, Chile</a>

[Ver ejemplo 4][7]{.verejemplo}

El ultimo punto que mencionaré en este artículo, es el poder de Safari cuando hablamos de estilos. Principalmente, cuando queremos aplicar estilos para elementos de formulario. WebKit tiene propiedades propias que podemos finalmente utilizar sin vergüenza: radio, opacidad y sombras, entre otros:

[Ver ejemplo 5][8]{.verejemplo}

Finalmente, algunos aspectos técnicos sobre Safari y la plataforma misma iPhone.

Aspectos técnicos:⌗

  • HTML 4.01
  • XHTML 1.0
  • CSS 2.1 y algo de CSS 3
  • Javascript 1.4
  • Manipulación del DOM
  • Ajax

Sobre dimensiones:⌗

  • el ancho de la pantalla es de 320px.

Sobre imágenes:⌗

  • Soporte para GIF animados (aunque no deben pasar de 2mb), JPG, PNG y TIFF (hasta 8mb).

Sobre medios:⌗

  • Soporte para PDF y Quicktime.
  • No soporta Java ó películas Flash.

Sobre Javascript:⌗

  • Limitado a 5 segundos, 10mb y máximo 8 documentos al mismo tiempo.
  • Algunos eventos no son soportados: mouseover, mouseout, onmouseenter, onmouseleave, onmousemove, onSelect, onresize y onScroll.
  • No permite cortar/copiar/pegar, drag&drop y selecccionar texto/elementos.

Sobre estilos:⌗

  • Safari para iPhone no reconoce los media types print y handheld.
  • Soporta estilos propios de WebKit.
  • No soporta pseudoclass :hover.
  • 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.

![Tipografías soportadas por iPhone en CSSLab.cl][9]

Sobre HTML:⌗

  • No soporta subida de archivos (se deshabilita).
  • Enlaces pueden ser directos para números telefónicos, emails y mapas de Google.
  • No soporta tooltips, aunque muestra el contenido del atributo title="" si mantienes presionado el enlace.

Algunas buenas prácticas a considerar:⌗

  • Siempre separar HTML y CSS
  • Usar HTML bien estructurado y válido
  • Escalar y optimizar imágenes apropiadamente, no a través de estilos o atributos HTML.
  • Evitar uso de .
  • Utilizar columnas para mejor manejo de zoom (evitar ancho completo).

[1]: http://www.csslab.cl/2006/03/07/css-para-moviles/ “Enlace en CSSLab a “CSS para móviles”” [2]: http://www.csslab.cl/2008/06/24/tip-precoz-2-combinando-media/ “Enlace en CSSLab a “Tip Precoz 2: combinando @media”” [3]: http://www.csslab.cl/ejemplos/webiphone/ejemplo1.html “Enlace en CSSLab a “Ejemplo 1 iPhone”” [4]: http://www.csslab.cl/wp-content/uploads/2008/07/dimensiones.jpg [5]: http://www.csslab.cl/ejemplos/webiphone/ejemplo2.html “Enlace en CSSLab a “Ejemplo 2 iPhone”” [6]: http://www.csslab.cl/ejemplos/webiphone/ejemplo3.html “Enlace en CSSLab a “Ejemplo 3 iPhone”” [7]: http://www.csslab.cl/ejemplos/webiphone/ejemplo4.html “Enlace en CSSLab a “Ejemplo 4 iPhone”” [8]: http://www.csslab.cl/ejemplos/webiphone/ejemplo5.html “Enlace en CSSLab a “Ejemplo 5 iPhone”” [9]: http://www.csslab.cl/wp-content/uploads/2008/07/fonts.gif