aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Bueno, parece que poco a poco los dispositivos táctiles comienzan a invadirnos. Algo que era de esperar, después de la aceptación que tanto el iPhone como dispositivos Android están teniendo en el mercado móvil. Poco a poco estas herramientas empezarán a estar sobre los sofás de cualquier geek.

Por este motivo no parece descabellado revisar un poco nuestro código para que nuestras páginas se adapten a la nueva resolución de pantalla que el iPad usará.

¿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…

(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.

(Ver Imagen)

Ya no hay excusas 😀

El iPAD ha llegado (o 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.

(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

Continua —>

Jaipho, nos permite crear una galería de imágenes ideal para los dispositivos iPhone.

(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

Una de las muchas mejoras que el nuevo firmware del iPhone 3.0 ha traido es la posibilidad de geolocalizar dispositivos desde Safari.

(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.

(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.

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.

(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

El calendario del iPhone va a dejar de ser únicamente conocido por ese nombre ya que ahora con jQuery podemos conseguir un calendario de similar aspecto para nuestras páginas web.

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.

Hace más de un año que iMeneame vió la luz, la versión para el iPhone de Meneame.net (versión no oficial) ha tenido que aguantar con un diseño realmente horrible (evidentemente mio) hasta que me he topado con Lucas Savelli de WydStudio.

Gracias a Lucas, iMeneame ha adquirido un aspecto más moderno y más eficiente para el dispositivo que fue creado. Debido a que el contenido lo saco del RSS de Meneame me veo condicionado a lo que este formato nos devuelve, las limitaciones del XSL tampoco han ayudado mucho, pero creo que el resultado es más que satisfactorio apesar de las salvedades encontradas.

Espero que os guste, y me comuniqueis todos los fallos e impresiones.

Mobile Safari es el navegador que nos encontramos en los iPhone/iPod Touch y sus aplicaciones web está revolucionando la navegación móvil de una forma espectacular. Hace unas semanas vimos como ocultar la barra de navegación usando Javascript y vimos que de esta forma agrandamos la parte visible de la página mostrando más información a usuario, algo realmente importante en este tipo de dispositivos.

Ahora via Ajaxian, descubro la forma de hacer mediante el uso de tags <meta /> en nuestro <head />:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Podemos ver una demo directamente desde este enlace.

Diego Martín Lafuente (aka MiniD) nos ha sorprendido esta madrugada con la presentación de un framework CSS/XHTML para desarrollar aplicaciones web para el iPhone e iPod Touch.

IMG

El framework, sigue la línea de iUI desarrollado por Joe Hewitt, emulando una aplicación nativa evitando romper el equilibrio que Apple consiguió con su dispositivo.

Gracias a que el iPhone/iTouch utiliza Safari, nos permite utilizar las propiedades en selectores de CSS3 extendiendo las posibilidades que Diego ha sabido aprovechar, que junto a un HTML estandarizado y semánticamente correcto nos permite hacer una aplicación de cálidad con muy poca inversión de tiempo.

Diego nos ha dejado una demo para que veamos que ta ha quedado, sinó dispones de un iPhone/iTouch, puedes visualizarlo correctamente con Safari. Un 10 Diego (No serás Maradona??)