Iphone

Usando los eventos de los dispositivos táctiles

Cuando estamos desarrollando interfaces web adaptables a dispositivos móviles, principalmente táctiles, tenemos que tener en cuenta que no disponemos de un ratón. Con lo cual, a priori, no nos es posible interactuar con eventos del estilo onMouseMove, ouMouseOver, etc.

Por suerte para los desarrolladores, disponemos de la opción de capturar las acciones del touch en estos dispositivos gracias a los eventos, onTouchStart, onTouchMove y onTouchEnd. Leer mas...

29oct

Cómo agregar iconos de favoritos en la pantalla principal del iPhone

Categoria(s) HTML5 Comentar

Para permitir agregar un icono de nuestra web a los iconos favoritos en la pantalla principal del IPhone, basta con seguir estos sencillos pasos:

1.- Crear una imagen de 57×57 píxeles y guardarla en formato PNG.

2.- Subir el png creado al servidor.

3.- Añadir la siguiente línea de código entre las etiquetas <head> de la cabecera de la web: Leer mas...

29sep

Como detectar iPad/iPhone con javascript

Categoria(s) Diseño | HTML5 Comentar

A veces nos puede resultar muy útil si queremos identificar un aparato de apple en nuestro navegador, para ello nos basta con:

function iPhone()
{
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));
}
function iPad()
{
     return ( (navigator.platform.indexOf("iPad") != -1));
}

21sep

Realizar auto zoom de nuestra web en iPhone

Categoria(s) Diseño | HTML5 | Ipad Comentar

Algo que puede resultar de mucha ayuda es que los visitantes de nuestra web, vena con el zoom nuestra página, recordemos que si no la tenemos adapta el uso del zoom desde el iPhone es imprescindible para leer correctamente los contenidos. Para ello nos basta con poner lo siguiente:

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Y listo ya tenemos el zoom al máximo.

14sep

Como podemos evitar el modo sleep y el auto bloqueo en IPhone-IPad

Categoria(s) Ipad Comentar

Para todos aquellos que os podáis encontrar en un periodo de iniciación en la programación de IPhone o IPad. Una cosa muy útil es el hecho de poder evitar el auto bloqueo del terminal, para que nuestra aplicación se pueda seguir ejecutando, puede que en algunos casos aunque el usuario no interactué con la pantalla queramos tener una aplicación abierta igualmente, como para reproducir animaciones. Leer mas...

12sep

Usar media Querys para seleccionar estilos para Ipad o Iphone

Categoria(s) CSS3 | HTML5 Comentar

Una de esas pequeñas aportaciones maravillosas que nos trae el HTML 5, es que nos permite la utilización de media querys, en este caso os vamos a enseñar a usarlas para poder seleccionar la hoja de estilo correspondiente a la resolución.

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

Como es obvio aquí el truco esta en tener diferentes hojas de estilo que se adapten a las diferentes resoluciones, quedándosenos así una web adaptable totalmente.