2009-11-02 19 views
9

Vi que algunas páginas web se muestran de manera diferente en un iPod Touch (y iPhone); se parecían mucho a las aplicaciones nativas de iPhone.Aplicación web en un iPhone: diseñándola para que parezca una aplicación nativa de iPhone

Creo que esto se puede hacer con estilos y, opcionalmente, representando HTML diferente en el lado del servidor, basado en el agente de usuario de la solicitud.

Entonces, ¿cómo obtengo este efecto? Y, también, ¿hay algún emulador del navegador de iPhone OS, entonces podría probar mi aplicación antes de realmente lanzarla, para ver si incluso se muestra?

Respuesta

13

iui es una buena solución, pero también sugiero http://www.jqtouch.com/ que se basa en jquery. Está creciendo radicalmente. Y también puede usar el grupo de Google http://groups.google.com/group/iphonewebdev

+2

definitivamente la mejor cosa para usar. –

+0

gran cosa, gracias. Usaré jQuery en este proyecto, así que lo intentaré. – kender

+0

Nunca he visto esto antes; Definitivamente verifico esto. – tahdhaze09

1

Consulte aquí la información sobre CSS y JavaScript de Joe Hewitt para aplicaciones web de aspecto nativa de iPhone: http://ajaxian.com/archives/iphone-native-looking-skin

para simular la apariencia de una página web en el iPhone, puede intentar esto: http://www.testiphone.com/. (Pero, por supuesto, si usted es serio acerca de esto, utilizar un iPhone real o iPod Touch.)

+2

me gustaría utilizar el sitio testiphone utilizando un navegador Webkit ya que el navegador del iPhone está basado en Webkit. Eso debería darle la aproximación más cercana al navegador de iPhone. –

0

Todo el CSS/Javascript características que necesita están documentadas en el sitio para desarrolladores de Apple.

de inicio aquí: http://developer.apple.com/safari/

de Apple tiene una serie de archivos PDF que describen lo que necesita hacer para personalizar para el iPhone y el iPod.

Aunque puede descargar Safari para Windows y Mac, no tendrá la misma resolución configurada que un iPhone o iPod.

1

Puede usar el marco jqtouch para hacer que sus páginas web se vean y se comporten de forma similar a una aplicación de iphone nativo. El autor tiene un enlace a una demostración en su página principal que puede consultar con su iPhone.

En cuanto a las pruebas: Apple tiene un sdk para iphone que puede descargar si se ha registrado para ser un desarrollador de Apple. Pero actualmente, estoy probando simplemente apuntando mi iphone a mi servidor de desarrollo.

+0

ese es el problema si no tengo realmente el iPhone :) – kender

+1

Te recomendamos obtener uno si vas a hacer sitios web de iPhone. El simulador es increíble y todo, pero es mucho más rápido que un iPhone real (y ocasionalmente tiene problemas diferentes a los reales). – ceejayoz

+0

Seguro que obtendré uno (probablemente iPod touch, ya que no necesito otro teléfono). La aplicación web no es solo una cosa de iPhone, solo es una idea hacerla como una aplicación para los usuarios de iPhone. Por lo tanto, antes de lanzarlo en vivo obtendría el dispositivo real, pero antes es solo otro gasto que puedo evitar :) – kender

0

El iPhone SDK de Apple en realidad viene con un simulador de iPhone que le permite probar sus páginas en una versión real de Mobile Safari. Creo que el software es solo para Mac OS X.

Vas a tener que autenticarse con sus credenciales de iTunes para obtener la descarga.

+0

si tienes el código X y Dashcode instalado, entonces el simulador de iPhone está con él. Soy perezoso, simplemente empiezo y vacío el proyecto para el iPhone en Dashcode y lo ejecuto, y aparece el simulador. – PurplePilot

0

Si posee una Mac, realmente debería intentar try Dashcode (que es una parte del iPhone SDK).

4

Actualmente estoy trabajando con el equipo de desarrollo de iUI en el estilo CSS actual para el proyecto y debo decir que estoy bastante impresionado por el poder del pequeño broswer. La mayoría de las funciones de webkit están disponibles para el usuario final, incluidos -webkit-gradients para que pueda sacar la mayor parte de los elementos de la interfaz de usuario con cero imágenes. Si bien puede representar la página de manera diferente en la cadena User-Agent, recomiendo alejarse de esto a partir de esto, ya que puede apuntar al iPhone con un diagrama de estilos.

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

Esto le permite utilizar el mismo marcado HTML, y cambiar la forma en que se ve su iPhone.

Para iPhone OS Emulators, apple has you covered, en el lado de Windows es Safari, y no olvides cambiar el agente de uso de iPhone en las opciones de desarrollo. Sin embargo, utilizo Chrome ya que también usa el motor de webkit, por lo que la mayoría de los CSS son sintaxis de la misma manera.

Sin embargo, la mayoría de las personas tiene un iTouch o iPhone si haces este tipo de trabajo de desarrollo. Su mejor apuesta es probar en el teléfono 2G ya que tiene el mayor nivel de restricción (y la más lenta de todas las CPU). Esto le da un caso de error que, si lo considera aceptable, solo mejorará para las personas con 3G y 3GS.

Algunos grandes recursos en la materia incluyen:

Apple's Webapps Page

Apple's Developer Safari Page - Incluye el enlace a iPhone Simulator (sólo Mac).

ADC: Safari Reference Library

ADC SRL: Getting Started with Web Apps

ADC SRL: Getting Started with iPhone Web Apps

debe decir: iPhone Human Interface Guidelines for Web Applications - Metrics, Layout Guidelines, and Tips

Submit your WebApp

Cuestiones relacionadas