Existen diferentes técnicas con las cuales podemos mejorar la experiencia del usuario del iPhone en nuestro sitio, la primera de ellas es definir el tamaño del Viewport de la página. El Viewport se refiere al área donde será mostrado el documento (en el caso del iPhone, la pantalla de 320×480px).
El Viewport que típicamente usaremos para el iPhone será:
<meta name="viewport" content="width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
El siguiente paso será detectar si el agente se trata de un iPhone y modificar la página o el CSS que vamos ha generar. Lo podemos conseguir desde las cabeceras HTTP, como este ejemplo en PHP:
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) { /* iPhone user */ }
También podemos usar una expresión CSS3 para que el iPhone use otra hoja de estilos:
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
Al enviar un CSS especial para el iPhone, debemos pensar en que el estilo de nuestra página sea bastante sencillo y legible, evitar saturar de elementos, y hacer los enlaces lo suficientemente grandes para que el usuario no tenga problemas para seguirlos. Siempre hay que tener en cuenta las dimensiones y el área real de contenido que disponemos en Safari.
Nuestro siguiente paso será aprender a usar algunos enlaces especiales que el iPhone reconoce, los eventos javascript que podemos usar, los tipos de letra disponibles, y probablemente los tipos de archivos que MobileSafari puede manejar.
Si nuestro interés es el desarrollar una Webapp, la mejor herramienta que podemos utilizar es iUI un framework gratuito que nos permite imitar la interface y la funcionalidad de las aplicaciones nativas del iPhone.
La gran ventaja de iUI es que este se encarga de dar los estilos a la página, manejar las peticiones AJAX y eventos que sucedan mientras el usuario navegue; lo único que debemos hacer es generar el código HTML necesario para que iUI reconozca las diferentes partes de nuestra Webapp.
Básicamente tenemos que generar ciertas estructuras con DIVs y ULs, junto a ciertos nombres de clases que darán los estilos necesarios y permitirán al iUI decidir qué acción tomar.
Existen 2 ejemplos que demuestran las capacidades de iUI, un mockup de Digg y un reproductor de música que nos muestran como cargar páginas adicionales por medio de peticiones AJAX, crear la navegación a la partir de una lista y la barra de herramientas, usar diálogos y formularios.
Desarrollar y diseñar sitios para el iPhone no es complicado si sabemos lo básico, con un poco de tiempo y esfuerzo podemos hacer que un sitio se vea bien en el iPhone; o incluso desarrollar una Webapp que aproveche todas las características del iPhone.
Usuarios que han visto este tema también han visto...
- Sidebar a la izquierda o a la derecha
- Particionamiento de disco duro con FDISK
- ¿Cómo escribir una oferta de trabajo?
- Cómo conseguir buenas posiciones en Google
- Por qué son insuficientes los estándares y la revisión automática
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.