iPhoneros.net - Foro de iPhone

iPhoneros.net

iPhone & iPod Touch FANS


Regresar   iPhoneros.net - Foro de iPhone > Soporte Técnico Ayuda iPhone - iPod touch > Tutoriales

Registrarse Blogs Buscar Posts de hoy Marcar como leído
  #1 (permalink)  
Viejo 15-nov-2008, 16:55
iPhoneor PLATINO
 
Registrado: mayo-2008
Posts: 5,512
iPhone 3G
Firmware 2.2
Predeterminado Trucos y consejos para desarrollar para el iPhone

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







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
Code:
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.

Code:
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.
Code:
<meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=1.0; minimum-scale=0.6666" />

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
Code:
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

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.
Code:
<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:
Code:
<a href="tel:1-408-555-5555">1-408-555-5555</a>;
  • Mail:
Code:
<a href="mailto:frank@wwdcdemo.example.com">John Frank</a>
  • Google Maps
Code:
<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>
  • Incluir un video en nuestras aplicaciones
Code:
<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.
Code:
-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)

fuente Trucos y consejos para desarrollar para el iPhone | aNieto2K
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit!
Citar y responder


Responder

Tags
desarrollar aplicaciones, desarrollar web, trucos, tutoriales

Herramientas Buscar en esta discusión
Buscar en esta discusión:

Búsqueda avanzada
Estilo

Reglas del foro
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is activado
Emotíconos está activado
El código [IMG] está activado
El código HTML está desactivado
Trackbacks are activado
Pingbacks are activado
Refbacks are activado
Ir a


Todas las horas son GMT -3. La hora es 10:08.


Usando: vBulletin Version 3.7.4
Copyright ©2000 - 2009

SEO by vBSEO 3.2.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34