Desarrollos Web para iPhone

10/jul/2008 24

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; 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, y se usan juntos del mismo estilo:

@media screen {
     // estilos para todos los browsers
}
@media screen and (max-device-width: 480px) {
     // estilos sólo para iPhone
}

Ver ejemplo 1

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’)) {
     // redirecciona
}

Dimensiones de pantalla para iPhone en CSSLab.cl

Otro punto a tener en cuenta es la etiqueta <meta> 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

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(){
     window.scrollTo(0, 1);
});

Ver ejemplo 3

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

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

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

Sobre HTML:

  • No soporta subida de archivos <input type="file" /> (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 <frameset>.
  • Utilizar columnas para mejor manejo de zoom (evitar ancho completo).

Links:

Comentarios

  1. fearlex [#]

    Woahhhh pues yo todavia no me animo, aunque guardé este link bien guardado, para cuando me anime 😉 (no esta muy lejos)

  2. David Sola [#]

    Simple, conciso y basico. Muy bién.

  3. Jorge Epuñan [#]

    maldicion… basico y simple, y eso q estudie un monton, recopile de videos y pdf’s de apple para redactar lo mas completo sobre iPhone… creo q no se noto eso. decepcion…

  4. H3RN4N [#]

    A mi particularmente me pareció muy bueno (muy bien explicado). Nada más me queda llevarlo a la práctica. Muchas gracias Jorge! 😉

  5. Guille [#]

    Buenas a todos,

    Estamos trabajando en un “to-do” del día con posibilidad de añadir contactos a los que mandar tareas y todo vía web, en Español y gratis.

    La web es http://www.noutmi.com/

    tiene interfaz adaptada a iPhone (Solo la hemos probado en simuladores así que agradeceremos vuestros comentarios si algo no se ve bien.)

    Saludos ¡¡¡¡

  6. David Suazo Quintana [#]

    Me parece una exelente ayuda, muy buenos datos a tener en cuenta, comenzaré hoy mismo a crear mi sitio para iphone y ipod touch, se agradece el aporte.
    Saludos.

  7. Kiwihaus » iA Notebook » links for 2008-11-04 [#]

    […] CSSLab Tutorial para hacer html para iphone (tags: iphone CSS) […]

  8. Arturo [#]

    Muy Buenas,
    Una preguntilla, cómo hariaís para hacer que cuando se pulse una imagen reproduzca un sonido. Sin abrir el reproductor de musica, si no que lo reproduzca en la misma pantalla que te encontrabas…
    Un Saludo

  9. Teto [#]

    Jorge…. eres el mejor… llevo bastante tiempo leyéndote y por fin me animo a comentarte lo extraordinario que me pareces!!! un saludo!!!

  10. klass [#]

    Disculpen mi ignorancia, estoy provando estos códigos,
    por cierto, geniales, únicos en la red!
    El caso esk soy novata en esto, me ha funcionado todo bien menos el que detecta si el sitio se está leyendo desde el iPhone, dónde hay que colocarlo?

    Grácias Jorge y saludos a todos!

  11. Jorge Epuñan [#]

    klauss: la deteccion q proporciono es mediante PHP y lo ingresas en la cabecera de tu archivo html (tendras q hacerlo .php), o sea, antes q todo.

    teto: gracias por los elogios, solo trato de entregar mas de lo q me propongo.

    salu2.

  12. klauss [#]

    grácias jorge!! voy a provarlo!!
    Saludos!

  13. Salvador Arias [#]

    Hola.
    Cómo le hago con código HTML para detectar que estan tratando de entrar desde un iPhone/iPod a esta dirección: http://semanay.nayarit.gob.mx y redirigirla a http://semanay.nayarit.gob.mx/iPhone

    Gracias de Antemano

  14. Verónicka García [#]

    Estube revisando todo el tuto y me parecio perfecto!!!!

    Solo me quedo una duda, con respecto al codigo en donde se detecta si estan entrando por un iphone.

    Entiendo que se debe poner en el encabezado. Pero mi duda es como sabe o mas bien en que parte del codigo le decimos a que pagina redireccionar???

    Podrian ayudarme con eso…

    Mil8mil de gracias…

  15. Jorge Epuñan [#]

    Veronika: el ejemplo q puse esta la deteccion por PHP, asi q la redireccion en ese lenguaje seria:

    if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) {
    header( 'Location: http://www.blabla.com/' );
    }

    Exito!

  16. Verónika García [#]

    Gracias, Jorge

    Una duda mas, mi servidor en donde tengo hospedada mi página no maneja lenguaje php.

    Hay alguna manera de hacer esto pero en lenguaje de java???

  17. Jorge Epuñan [#]

    Veronika: una rapida busqueda en Google me arroja el sgte link: User Agent String.Com.
    Saludos.

  18. Daniel [#]

    Estos desarrollos web son muy utiles para que puedas entrar en las plataformas moviles. Puedes usar algo como phonegap para desarrollar apps usando web y al mismo tiempo los elementos nativos de la plataforma. Es decir, el gps, la brujula, el acelerometro. Creo que estos desarrollos hibridos son la mejor solucion. Nosotros estamos haciendo un par de desarrollos asi, podras verlos en Desarrollos Iphone

  19. Jorge Epuñan [#]

    gracias Daniel, he leido sobre phonegap y espero probarlo pronto, ya tengo algo en mente.

    Salu2.

  20. Alberto [#]

    Hola Jorge

    ¿Este texto iría en el código de la index.html?

    if (stristr($_SERVER[‘HTTP_USER_AGENT’], ‘iPhone’)) {
    header( ‘Location: http://www.blabla.com/‘ );
    }

    Muchas gracias!

  21. Jorge Epuñan [#]

    Alberto: asi es, lo agregas en la cabecera.. pero OJO! q es PHP. recuerda ponerle entre < ?php ?>

    Exito.

  22. Construir para Retina Display ↩ CSSLab [#]

    […] y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si […]

  23. Íconos y pantallas iPhone/iPad ↝ CSSLab [#]

    […] todos los sitios que requieran ser visualizados en sus teléfonos y tabletas. En mis tiempos mozos, cuando comencé a jugar con web móvil sólo existía 1 tamaño y 1 resolución. Años han pasado y a continuación está la lista […]

  24. Alan Sánchez [#]

    Hola buenas tardes me gustaría saber si con la lineas de “PHP” donde detecta si se esta leyendo desde un iphone:

    if (stristr($_SERVER[‘HTTP_USER_AGENT’], ‘iPhone’)) {
    // redirecciona
    }

    Podría cambiarlo por iPad para que lo detecte de igual forma?
    ¡Saludos!

Responder a fearlex ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab