Contenido

Trucos y consejos para desarrollar para el iPhone

4 Jul

+ 22

Via Ajaxian, leo este fantástico artículo en el que nos dá algunos consejos para desarrollar para el iPhone.

iphone.jpg

Deshacerse de la toolbar

Al parecer la toolbar en la que mostramos la hora, estado de la conexión y batería, molesta un poco … pues la eliminamos 😀

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

¿Y si giramos el movil?

Un problema que las páginas web tendrán con el nuevo iphone es el del giro del móvil, ya que si este pasa de vertical a horizonal cuando la página ya ha cargado, esta no se redimensiona, por consecuente tendremos que controlar este punto. Joe Hewitt ha montado un ejemplo para los privilegiados que lo posean.

addEventListener("load", function() {
    setTimeout(updateLayout, 0);
}, false);

var currentWidth = 0;

function updateLayout() {
    if (window.innerWidth != currentWidth)  {
        currentWidth = window.innerWidth;
        var orient = currentWidth == 320 ? "profile" : "landscape";
        document.body.setAttribute("orient", orient);
        setTimeout(function(){
            window.scrollTo(0, 1);
        }, 100);
    }
}

setInterval(updateLayout, 400);

Meta viewport

Debido a la resolución de pantalla que el iPhone posee, algunos están investigando con el meta viewport.

<meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=1.0; minimum-scale=0.6666" />

noscroll.png

View Source

Como la versión de Safari para iPhone (ni de cualquier navegador para cualquier movil) dispone de la posibilidad de ver el código fuente, tendremos que montarlo mediante javascript 😀

javascript:var%20sourceWindow%3Dwindow.open%28%27about%3Ablank%27%29%3B%0Avar%20newDoc%3DsourceWindow.document%3B%0AnewDoc.open%28%29%3B%0AnewDoc.write%28%27%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20%27%2Bdocument.location.href%2B%27%3C/title%3E%3Cmeta%20name%3D%22viewport%22%20id%3D%22viewport%22%20content%3D%22initial-scale%3D1.0%3B%20user-scalable%3D0%3B%20maximum-scale%3D0.6667%3B%20width%3D480%22/%3E%3Cscript%3Efunction%20do_onload%28%29%7BsetTimeout%28function%28%29%7Bwindow.scrollTo%280,1%29%3B%7D,100%29%3B%7Dif%28navigator.userAgent.indexOf%28%22iPhone%22%29!%3D-1%29window.onload%3Ddo_onload%3B%3C/script%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E%27%29%3B%0AnewDoc.close%28%29%3B%0Avar%20pre%3DnewDoc.body.appendChild%28newDoc.createElement%28%22pre%22%29%29%3B%0Apre.appendChild%28newDoc.createTextNode%28document.documentElement.innerHTML%29%29%3B 

Drag & Drop

Pese a los problemas con eventos de ratón, la gente está agudizando el ingenio y usando textarea consiguen hacer que cuadrados se muevan por la pantalla 😀

fingermouse.png

Otras cosillas interesantes

Apple cree que únicamente hay que especificar una sola CSS. Y debido a que ingnora por completo el tipo handheld (dispositivos móviles) podemos usar cualquier otra como si de un navegador de escritorio se tratara.

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

Para el <meta name="viewport" /> nos aconseja una serie de parámetros.

  • width: Por defecto 980. Rango [200,10.000].
  • height: Por defecto calculado en base a la anchura. Rango [223,10.000].
  • initial-scale, es la escala de rendirezaje cuando la página carga por primera vez. Por defecto toda la página. Rango [minimum-scale, maximum-scale].
  • user-scalable, determina si el usuario puede o no escalar la página. Defecto yes (SI).

Al igual que con el PC, podemos hacer que nuestras aplicaciones interactuen con las demás opciones del teléfono.

  • Llamada telefónica:
<a href="tel:1-408-555-5555">1-408-555-5555</a>;
  • Mail:
<a href="mailto:frank@wwdcdemo.example.com">John Frank</a>
  • Google Maps
<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>
  • Incluir un video en nuestras aplicaciones
<EMBED SRC="poster.jpg" HREF="movie.m4v" TYPE="video/x-m4v" TARGET="myself" SCALE="1" ...>

La redimensión del texto es algo que en los dispositivos moviles se ha de tener muy en cuenta, por eso iPhone dispone de -webkit-text-size-adjust para hara conseguir que esta propiedad sea posible.

-webkit-text-size-adjust: [none|auto|x%]

Las imagenes tambien deben de ser tenidas en cuenta ya que no podemos olvidar de que es un movil.

Formatos soportados:

  • GIF (hasta 2mb)
  • PNG (hasta 8mb)
  • TIFF (hasta 8mb)
  • JPG (hasta 128mb)
  • Apple ha abierto una seccion en su sitio de desarrollo dedicada al iPhone: http://developer.apple.com/iphone/

    Una cosa buena que ya ha empezado a provocar el iPhone es empujar aún más lo que se puede hacer en DHTML.

    Al cambiar el hardware esperado (esto es lo que es el iPhone. Cuando dicen por ahi que no soporta Ajax o Web 2.0 realmente lo que dicen es «no sabemos que hacer sin un raton de los de toda la vida») nos fuerzan a no estancarnos. Lo de las textareas no creo que se le hubiera ocurrido a nadie si no hubiera sido necesario.

    No del todo relacionado pero… no te pasa a ti que ahora cuando quieres hacer una aplicacion nueva no te sucede que no se te ocurre como no usar las cosas nuevas que conoces? (si, eso lo he escrito bien). A mi me cuesta estos dias no usar xhr, no usar efectos, etc. 🙂

  • A lot of this information was discovered in the http://www.iPhoneWebDev.com community. We have been working hard to fill in the gaps of missing information. Since Friday we’ve figured out some best practices for viewport settings, discovered how to hide the URL bar to make more space available to web apps, how to detect orientation changes (portrait to landscape and back), tested AJAX and javascript performance, and have made progress on quite a few issues and work arounds for a number of bugs. If you are an iPhone web coder, check out our list archives, examples, and come join our community of developers helping developers!

  • Los enlaces:
    <a href="tel:1-408-555-5555"></a>

    ¿Valen también para los teléfonos normales?

  • #3 Supongo que en EEUU eso es un telf normal 😀

    Pero si, eso debe de ser una interacción con el telefono y por ello simplemente será un enlace a «Llamar».

    Saludos

  • Como se ve que no me leeis. Ash. Que depresiones me pillaria… 🙂

    http://eduo.info/2007/06/25/url-telefonico-de-iphone/

    Esto es un estandar de URL oficial. El unico dispositivo que lo usa actualmente es Safari en el iPhone, aunque lo propuso Nokia originalmente.

    El estandar define como van, los guiones son por supuesto opcionales y reconoce tanto marcados internacionales estandar (+34 44433354) como locales del pais ( 012 234 3444). Realmente lo que hará es marcar el numero que se haya puesto y ya.

    Tiene previsiones para esperas, tonos, codigos especiales de tarjeta, etc.

    Algo gracioso es que podrias comprar una tarjeta de esas de llamar a Mexico, ponerte un url de telefono con el numero y las esperas y las teclas y seleccionarlo como enlace desde el telefono y funcionaria.

    Tambien contempla URLs para Fax y para Modem, bastante interesantes.

    Egeal: ese enlace no serviria porque no enlaza nada. Te falta contenido a enlazar.

  • me parece o es un sueño, perocomo es eso de que mi phone se puede conectar a la television y como se hace, o que cable conector especial necesito . gracias

  • habro un pagina en safari y no habre algunas fotos o ligas pone una caja con un signo ? como puedo hacer para se habran completa gracias

  • nesesito saver como hacer que el iPhone aparesca como disco extraible cuando lo conecto como si fuera una USB por que no se como meterle documentos de word

  • Hola, estoy buscando quien puede hacerme mi ecommerce o aplicacion para IPHONE…

    Gracias saludos

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.