Mag 6 2013

Internet Explorer 10: il multitouch a portata di mano

Internet Explorer 10 Multitouch

Non solo sicurezza  e velocità, Internet Explorer 10 continua ad essere protagonista indiscusso del 2013 e grazie al multitouch offre un’esperienza di navigazione senza eguali.

Perché un browser multitouch? Negli ultimi anni il touch, ha rivoluzione il modo in cui interagiamo con i nostri dispositivi, per questo Microsoft si è concentrata sul “tatto”, andando a creare l’unico browser ottimizzato per il multitouch, per offrire una migliore user experience agli utenti di tablet, pc e monitor touchscreen.

Internet Explorer 10, è il primo browser a schermo intero, i controlli vengono infatti automaticamente nascosti e basta un semplice tocco, per poterli richiamare immediatamente. I Preferiti invece, sono facilmente raggiungibili facendo scorrere il dito dal basso verso l’alto. Ma non finisce qui: IE 10, abilitando una semplice opzione, trova in automatico la pagina successiva da visualizzare solo scorrendo in avanti con il proprio dito..

Con l’avvento dell’HTML 5, viene cambiato sensibilmente il modo di sviluppare per il Web. Il supporto  all’HTML5 nei moderni browser come IE10 rende possibile la creazione di ricche esperienze interattive su tablet, pc e smartphone. Grazie alle innovazioni introdotte dal nuovo linguaggio di markup e le gesture multitouch, i siti web diventano più intuitivi e anche divertenti.

Per l’occasione, Microsoft ha sviluppato Exploretouch.ie, un sito web che va al di là delle semplici gesture e consente agli utenti di utilizzare i gesti tattili per mixare file audio e creare un’originale traccia sonora sulle note del cantante e DJ Blake Lewis. L’aspetto visivo del sito è intensificato da un’esplosione psichedelica di colori ad ogni tocco dell’utente.

Gli effetti audio-visivi utilizzati sul sito evidenziano il modo in cui l’HTML5 e i browser dotati di accelerazione hardware, come Internet Explorer 10, aiutino a renderizzare questi effetti in modo veloce e fluido.

Microsoft mette a disposizione degli sviluppatori i codici per le gesture multitouch supportate da Internet Explorer 10, che noi vi riportiamo.

Touch Controller – Creazione di un oggetto MSGesture

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

 
<!doctype html>
<html>
<head>
  <title>Gesture detection example</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
    .gestureSurface {
      width: 640px;
      height: 480px;
      background-color: red;
      -ms-touch-action: none;
    }
  </style>
</head>
<body>
<div class="gestureSurface"></div>
<script>
 
  // Set up gesture recognition on the gesture surface
  var surface = document.querySelector('.gestureSurface');
 
  // Initialise MSGesture
  var msGesture = new MSGesture();
  // Set the target element
  msGesture.target = surface;
 
</script>
</body>
</html>

Identificazione eventi globali

1
2
3
4
5
6
7
8
9
10

 
  // Add event listeners
  surface.addEventListener('MSPointerDown', function(event) {
    // Add pointer to track
    msGesture.addPointer(event.pointerId);
  });
  // Reset when gesture starts 
  surface.addEventListener('MSGestureStart', resetGesture);
  // Try to detect when gesture changes
  surface.addEventListener('MSGestureChange', detectGesture);

Implementazione dello Swipe:  pinch and rotate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

 
// Define constant values
var MIN_ROTATION = 20;
var MIN_SCALE = .3;
var MIN_SWIPE_DISTANCE = 50;
 
// Define variables 
var rotation, scale, recognized, translationX, translationY;
 
/**
 *  Reset gesture 
 */
function resetGesture(event) {
  rotation = 0;
  scale = 1;
  translationX = translationY = 0;
  recognized = false;
}
 
/**
 *  Detect gesture
 */
function detectGesture(event) {
  // Disable built-in inertia
  if (event.detail == event.MSGESTURE_FLAG_INERTIA) {
    return;
  }
 
  // Update total values
  rotation += event.rotation * 180 / Math.PI;
  scale *= event.scale;
  translationX += event.translationX;
  translationY += event.translationY;
 
  // Try to detect a gesture when not recognized
  if (!recognized) {
 
    // Gesture direction
    var direction;
 
    // Check for horizontal swipe
    if (Math.abs(translationX) > MIN_SWIPE_DISTANCE) {
      recognized = true;
      // Check direction
      direction = translationX < 0 ? 'left' : 'right';
      console.log('Horizontal swipe: ', direction);
    // Check for vertical swipe
    } else if (Math.abs(translationY) > MIN_SWIPE_DISTANCE) {
      recognized = true;
      // Check direction
      direction = translationY < 0 ? 'up' : 'down'
      console.log('Vertical swipe: ', direction);
    }
 
    // Check for rotation
    if (Math.abs(rotation) >= MIN_ROTATION) {
      recognized = true;
      console.log('Rotate: ', rotation < 0 ? 'left' : 'right');
    // Check for Pinch/Stretch
    } else if (Math.abs(scale - 1) > MIN_SCALE) {
      recognized = true;
      console.log('Scale: ', scale > 1 ? 'stretch' : 'pinch');
    }
  }
}

E voi cosa ne pensate di questa nuova versione di Internet Explorer?   Se ancora non l’avete provata, potete procedere al download cliccando qui.

 

Articolo Sponsorizzato

© 2008 Ziogeek.com

Tag: ,

Potrebbero interessarti...

Sovrn

By • News aggregator •