Entradas con la etiqueta ‘ipad’

JS – Dibujar en Canvas

Publicado por Iván Gajate el 3 de agosto de 2013 en JavaScript | Los comentarios están cerrados.

Un ejemplo básico para dibujar en canvas.



Descargar zip

Además, como el canvas es transparente, podemos simular que se dibuja sobre nuestra página, tal y como hice en el banner de Cuenta tu imposible de adidas :).

Utilizo HammerJS para que funcione también en iPad y dispositivos móviles.

Cubiq Swipeview

Publicado por Iván Gajate el 2 de julio de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

He encontrado un efecto de swipe (deslizar con el dedo) para las galerías de fotos que simulan un iPad en un navegador de sobremesa.

Normalmente lo que se hace es arrastrar y que al final “salte” el evento de siguiente, y eso no mola. El usuario espera que se vaya visualizando el arrastre según mueve el dedo (o el ratón).

Con esta librería funciona tipo iPad, y la verdad va muy fino en iPad, desktop, Android 

http://cubiq.org/swipeview

Hammer.js

Publicado por Iván Gajate el 24 de junio de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Interesante librería que he descubierto gracias a q-interactiva 😉
Sirve para detectar los eventos de touch, drag, swipe, etc… *todos* los dispositivos (escritorio, iPad y otras tabletas, móviles…), y parece que funciona muy bien 🙂

http://eightmedia.github.io/hammer.js/

Funciona como plugin de jQuery o de forma independiente y pesa ná y menos 🙂

jQuery UI para iPad

Publicado por Iván Gajate el 31 de mayo de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Los eventos en el iPad funcionan diferente que en un ordenador. Si utilizamos deslizadores, botones o cualquier elemento de interfaz de usuario de jQuery UI, no nos funcionará en iPad.

Para solucionarlo basta con incluir jQuery UI Touch Punch y listo, nuestro deslizador funcionará sin problemas en iPad 🙂

 

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

JS – Fijar el escenario en iPad

Publicado por Iván Gajate el 2 de mayo de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Normalmente en iPad se puede arrastrar hacia abajo la ventana de una página web mas allá de su límite (elastic scrolling lo llaman ellos).
Esto nos puede fastidiar si queremos hacer una aplicación de dibujo alguna aplicación donde se tengan que arrastrar cosas con el dedo.
Podemos evitar este comportamiento anulando el comportamiento por defecto así:

// Evito que se pueda arrastrar el fondo
document.addEventListener('touchmove', function(e){ e.preventDefault(); });

jQuery – Evento click en iPad

Publicado por Iván Gajate el 27 de abril de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Si queremos detectar el click en alguna parte de nuestra ventana en un iPad, no nos funcionará el evento click normal, sino que hay que escuchar el touch.
Para simplificarlo en una línea podemos hacer esto, y en cada dispositivo ya cogerá el que le corresponda:

var clickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
 
jQuery("body").bind(clickEvent, funcionClick);

JS – Transformaciones 3D con CSS3

Publicado por Iván Gajate el 22 de abril de 2013 en css, Desarrollo Web, JavaScript | 1 comentario »

Estoy trasteando un poco y las transformaciones 3D que permiten las CSS3 y jugando un poco con la posición del cursor.

He utilizado este plugin de jQuery de Rico Sta. Cruz que facilita las transformaciones 3D

Básicamente capturo la posición del ratón cada vez que se mueve y hago el cálculo del ángulo.

 

$(document).bind("mousemove", (function(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
}));

Y en iPad simulo la posición del cursor con la inclinación del dispositivo. Sorprendentemente va muy fluido!! 🙂

 
// En iPad la rotacion la determina la inclinacion del dispositivo
window.addEventListener("deviceorientation", function(e) {
	mouseX = $(document).width()*0.5 + e.beta*10;
	mouseY = $(document).height()*0.5 - e.gamma*5;
}, true);

Descargar el ejemplo completo