Ipad

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

02nov

iPad: carga de archivos css según su orientación de pantalla

Categoria(s) CSS3 | Ipad Comentar

Código breve que muestra, en caso de que desarrollemos distintos estilos css para las posibles vistas en el iPad:

<link rel="stylesheet" media="all and (orientation:portrait)" href="ipad_portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="ipad_landscape.css">

Otra forma de hacer algo parecido, es hacer la web en porcentajes, si bien el resultado final no siempre va a ser el mejor, en la mayoría de los casos.

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));
}

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.

09sep

CSS3/iPad: CSS adaptado (media queries)

Categoria(s) CSS3 Comentar

Si la web a desarrollar la queremos hacer compatible con los nuevos dispositivos móviles, en este caso el iPad, podemos utilizar las siguientes reglas en CSS3.

Regla general de visualización en iPad:

@media only screen and (device-width: 768px) {
  /*-- Estilos propios para esta condición --*/
}

Regla para visualización en el iPad con orientation:portrait

@media only screen and (min-device-width: 481px)
and (max-device-width: 1024px) and (orientation:portrait) {
  /*-- Estilos propios para esta condición --*/
}

Regla para visualización en el iPad con orientation:landscape Leer mas...