aNieto2K » Apple http://www.anieto2k.com Desarrollo web, Wordpress, y alguna cosilla más Sun, 05 Feb 2012 10:15:00 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Convierte una aplicación web en nativa para iPhone/iPad http://www.anieto2k.com/2010/10/22/convierte-una-aplicacion-web-en-nativa-para-iphoneipad/ http://www.anieto2k.com/2010/10/22/convierte-una-aplicacion-web-en-nativa-para-iphoneipad/#comments Fri, 22 Oct 2010 14:01:52 +0000 aNieto2k http://www.anieto2k.com/2010/10/22/convierte-una-aplicacion-web-en-nativa-para-iphoneipad/ las aplicaciones web móviles son el futuro y de que la conectividad que ellas permiten están haciendo que la mayoría de negocios se esten migrando a Internet es la facilidad con la que navegadores móviles como Safari Mobile nos permiten transformar una página web en una aplicación nativa para estos dispositivos (al menos en apariencia).

iphone-app (Ver Imagen)

En matt.might.net publican una serie de parámetros que deberemos conocer para conseguir que la apariencia de nuestra página sea prácticamente igual a la de cualquier aplicación nativa que descarguemos de la App Store y sin necesidad de tener que convertirla a Object C.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2010/10/22/convierte-una-aplicacion-web-en-nativa-para-iphoneipad/feed/ 2 Detectando el iPad desde la web http://www.anieto2k.com/2010/04/08/detectando-el-ipad-desde-la-web/ http://www.anieto2k.com/2010/04/08/detectando-el-ipad-desde-la-web/#comments Thu, 08 Apr 2010 06:34:26 +0000 aNieto2k http://www.anieto2k.com/?p=9806 David Walsh, publica un artículo donde nos muestra una serie de opciones, en diferentes lenguajes, para detectar el iPad desde nuestra aplicación web. Básicamente se encarga de comprobar el userAgent que el dispositivo deja impreso en las cabeceras en las que solicita la página para detectarlo y condicionar la respuesta al usuario.

UserAgent

Como ya vimos en "Prepara tu página para el iPad" como condicionar nuestro navegador para simular al iPad, donde usabamos este userAgent para indicarle a Safari que lo usara para solicitar las páginas web. 
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Javascript

Con javascript usaremos el objeto navigator para comprobar si la palabra iPad aparece en el userAgent del navegador. 
var isiPad = navigator.userAgent.match(/iPad/i) != null;
// Uso
if (isiPad) ...

PHP

Haremos lo mismo desde el servidor mediante la búsqueda de la palabra iPad para la versión en PHP. 
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
// Uso
if ($isiPad)...

HtAccess

Quizas las versión más limpia sea la de delegar al servidor web la tarea de detectar el navegador y redireccionar a nuestra versión para iPad. 
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]
No tenemos excusas para no adaptar nuestro contenido a los nuevos dispositivos móviles, hagámoslo.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2010/04/08/detectando-el-ipad-desde-la-web/feed/ 3 Prepara tu página para el iPad http://www.anieto2k.com/2010/04/03/prepara-tu-pagina-para-el-ipad/ http://www.anieto2k.com/2010/04/03/prepara-tu-pagina-para-el-ipad/#comments Sat, 03 Apr 2010 10:30:19 +0000 aNieto2k http://www.anieto2k.com/?p=9778 ¿Que necesitamos saber? Apple, como ya hizo con su iPhone, nos ha facilitado una serie de recomendaciones e información referente al iPad para que los desarrolladores web no tengamos muchos problemas en la adaptación.

Viewport

Si para la versión de tu web para el iPhone indicaste un viewport con un valor fijo en pixels tendrás que cambiarlo ya que la nueva versión dispone de una variable que indica el tamaño del dispositivo y nos evita tener que intuirlo o detectarlo nosotros mismos. 
// Antes
<meta name="viewport" content="width=320" /> <!--- WRONG //--->

// Ahora
<meta name="viewport" content="width=device-width" />

Solucionando posiciones fixed CSS

El conocido position:fixed; no funciona de igual forma en Safari, iPhone e iPad por ese motivo debemos tener especial cuidado al usarlo. En Safari (sobre OSX y Windows) siempre mantiene el elemento fixed en pantalla, sobre iPhone e iPad esto no ocurre ya que el usuario puede ampliar o reducir la página haciendo que el elemento salga del foco visible. El posicionamiento fijo usa el visor como bloque de contención para estos elementos fixed. En Safari, al redimensionar la pantalla todo se redimensiona, en el iPhone/iPad no podemos reducir la pantalla, únicamente podemos atacar al contenido y este si puede crecer o decrecer.

User Agent

El nuevo User-Agent que tendremos que conocer será el siguiente: 
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

¿Como testear con Safari en nuestro sobremesa?

Usando el anterior User-Agent, podemos especificarle a Safari que nos identifique con si de un iPad se tratara. Simplemente tendremos que acceder al menú Desarrollo  (sino lo tenemos, lo activamos desde Preferencias > Advanzado > "Mostrar el menú Desarrollo en la barra de menús") e indicamos el user-agent del iPad en Desarrollo > Agente de usuario > Otra...

safari-ipad (Ver Imagen)

Resultado

Usando esta configuración en Safari podemos disfrutar de la versión iPad en nuestro gMail, por ahora solo en Safari, no he probado con ningún plugin que cambie el User-Agent de Firefox.

gmail-ipad (Ver Imagen)

Ya no hay excusas :D

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2010/04/03/prepara-tu-pagina-para-el-ipad/feed/ 14 Administra tu WordPress desde el iPad http://www.anieto2k.com/2010/04/03/administra-tu-wordpress-desde-el-ipad/ http://www.anieto2k.com/2010/04/03/administra-tu-wordpress-desde-el-ipad/#comments Sat, 03 Apr 2010 09:45:24 +0000 aNieto2k http://www.anieto2k.com/?p=9769 está apunto de hacerlo) y si eres un apple fanboy que ya lo tenga ya puedes administrar tu WordPress como Diós manda desde el iPad con WordPress for iPhone OS 2.4. Una aplicación que podrás descargar desde iTunes e instalar en tu iPad para administrar tu WordPress.

wordpress-ipad-compose (Ver Imagen)

Básicamente me parece la versión del iTouch inflada con un inflador de playa, mucho más grande y cómoda de usar, pero sin aportar nada nuevo. Via
wordpress-ipad-comment (Ver Imagen) wordpress-ipad-portrait (Ver Imagen)
mzl.ktqrwwft.480x480-75 (Ver Imagen)

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2010/04/03/administra-tu-wordpress-desde-el-ipad/feed/ 2 PastryKit, framework JS/CSS para trabajar con iPhone de Apple http://www.anieto2k.com/2009/12/16/pastrykit-framework-jscss-para-trabajar-con-iphone-de-apple/ http://www.anieto2k.com/2009/12/16/pastrykit-framework-jscss-para-trabajar-con-iphone-de-apple/#comments Wed, 16 Dec 2009 07:26:08 +0000 aNieto2k http://www.anieto2k.com/?p=9406 PastryKit, es un framework destinado para crear aplicaciones para iPhone como si fueran nativas. El framework, desarrollado por Apple, forma parte de una página pública que Apple ofrece como "Manual de usuario" online del iPhone. La página solo está disponible desde el iPhone, así que si intentamos acceder desde cualquier navegador nos redireccionará a otra versión. Desde Safari, podemos acceder indicando el Agente de usuario adecuado:

PastryKit (Ver Imagen) La URL a la que debemos acceder es: 

http://help.apple.com/iphone/3/mobile/
En ella podemos ver los ficheros JS y CSS del framework. Por el momento, es lo único que tenemos ya que no hay documentación al respecto por parte de Apple, aunque ahora será cuestión de tiempo que alguien saque una documentación no oficial que nos muestre las opciones de esta herramienta.

JS:

  • http://help.apple.com/ipodtouch/3/mobile/dist/PastryKit-ug-compact.js
  • http://help.apple.com/ipodtouch/3/mobile/javascript.js

CSS:

  • http://help.apple.com/ipodtouch/3/mobile/style/stylesheet.css
Via

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/12/16/pastrykit-framework-jscss-para-trabajar-con-iphone-de-apple/feed/ 5 Jaipho, galería de imágenes en javascript para el iPhone http://www.anieto2k.com/2009/11/24/jaipho-galeria-de-imagenes-en-javascript-para-el-iphone/ http://www.anieto2k.com/2009/11/24/jaipho-galeria-de-imagenes-en-javascript-para-el-iphone/#comments Tue, 24 Nov 2009 10:53:50 +0000 aNieto2k http://www.anieto2k.com/?p=9323 Jaipho, nos permite crear una galería de imágenes ideal para los dispositivos iPhone.

iui (Ver Imagen) La apariencia, muy similar a la galería del propio iPhone, nos permite visualizar muy fácilmente esas imágenes que queremos mostrar al mundo. Demo / Descargar / Manual de instalación

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/11/24/jaipho-galeria-de-imagenes-en-javascript-para-el-iphone/feed/ 0 Geolocalización en el iPhone/iTouch 3.0 http://www.anieto2k.com/2009/07/17/geolocalizacion-en-el-iphoneitouch-3-0/ http://www.anieto2k.com/2009/07/17/geolocalizacion-en-el-iphoneitouch-3-0/#comments Fri, 17 Jul 2009 08:58:52 +0000 aNieto2k http://www.anieto2k.com/?p=8665 as muchas mejoras que el nuevo firmware del iPhone 3.0 ha traido es la posibilidad de geolocalizar dispositivos desde Safari.

map-location (Ver Imagen)

Código

// Obtenemos la localización
function displayLocation(position){
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;

 // Hacemos algo ...
}

// En caso de error
function handleError(error){
 switch (error.code){
 // Si el usuario no nos dá permisos.
 case error.PERMISSION_DENIED:
 alert('Sorry. Permission to find your location has been denied.')
 break

 // Si la posición no puede ser localizada.
 case error.POSITION_UNAVAILABLE:
 alert('Sorry. Position unavailable.')
 break
 default:
 alert(error.code)
 }
}

// Llamamos al método de localización
navigator.geolocation.watchPosition(displayLocation, handleError);
Como vemos en el código anterior, lanzamos el método watchPosition() del objeto navegator.geolocation pasándole dos parámetros, uno para el caso de ir todo correcto (displayLocation) y handleError nos capturará cualquier error que pueda ocurrir en el proceso. En dislayLocation vemos como el objeto que recibimos como parámetro (position) nos ofrece las coordenadas que podremos usar para nuestro script.

map-permission (Ver Imagen) Por otro lado el usuario deberá aceptar si quiere compartir su geolocalización o seguir en el anonimato. Esto puede dar lugar a un nuevo tipo de aplicaciones para este dispositivo.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/07/17/geolocalizacion-en-el-iphoneitouch-3-0/feed/ 6 Activar la navegación por teclado en los navegadores de MacOs X http://www.anieto2k.com/2009/06/10/activar-la-navegacion-por-teclado-en-los-navegadores-de-macos-x/ http://www.anieto2k.com/2009/06/10/activar-la-navegacion-por-teclado-en-los-navegadores-de-macos-x/#comments Wed, 10 Jun 2009 08:45:50 +0000 aNieto2k http://www.anieto2k.com/?p=8426 456 Berea St nos muestran como activar la navegación por teclado en los diferentes navegadores disponibles para MacOs X. Al parecer, por defecto esta opción no viene completamente activa lo que hace que la navegación con teclado es parcial e incompleta. De esta forma podremos ponernos en el caso del usuario que no tiene ratón y quiere navegar por nuestra web (por ejemplo :D).

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/06/10/activar-la-navegacion-por-teclado-en-los-navegadores-de-macos-x/feed/ 1 NimbleKit, aplicaciones nativa para iPhone con HTML y JS http://www.anieto2k.com/2009/05/27/nimblekit-aplicaciones-nativa-para-iphone-con-html-y-js/ http://www.anieto2k.com/2009/05/27/nimblekit-aplicaciones-nativa-para-iphone-con-html-y-js/#comments Wed, 27 May 2009 21:32:55 +0000 aNieto2k http://www.anieto2k.com/?p=8327 NimbleKit es una extensión de Xcode con el que podremos desarrollar aplicaciones para el iPhone/iPod Touch pero sin necesidad de saber Object C. Se trata de intentar hacer que los desarrolladores web tengamos posibilidad de realizar estas aplicaciones e incluso subirlas al App Store de Apple. Todo ello, desarrolllando como lo venimos haciendo, usando tecnologías como HTML y Javascript.

road-map (Ver Imagen) Dispone de una serie de funciones que activarán los elementos nativos del dispositivo. Además de ...

  • Control completo de la apariencia de la aplicación
  • Posibilidad de reproducir sonido en streaming
  • Controlar la vibración
  • Soporte de la Agenda
  • Acceso a ficheros
  • Acceso a Internet

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/05/27/nimblekit-aplicaciones-nativa-para-iphone-con-html-y-js/feed/ 3 Crear un iCal (estilo iPhone) con jQuery http://www.anieto2k.com/2009/02/14/crear-un-ical-estilo-iphone-con-jquery/ http://www.anieto2k.com/2009/02/14/crear-un-ical-estilo-iphone-con-jquery/#comments Sat, 14 Feb 2009 01:17:37 +0000 aNieto2k http://www.anieto2k.com/?p=7525 con jQuery podemos conseguir un calendario de similar aspecto para nuestras páginas web.

ical_jquery

Mediante unas tablas, un poco de CSS y un mucho de jQuery obtenemos el resultado que podemos ver en el ejemplo. Tambien podemos descargar el código y usarlos en nuestras aplicaciones web.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2009/02/14/crear-un-ical-estilo-iphone-con-jquery/feed/ 16