responsive web design - ai

34
mobile - AI Renato Bongiorno

Upload: renato-bongiorno-bonfanti

Post on 17-Jul-2015

131 views

Category:

Internet


1 download

TRANSCRIPT

mobile - AI

Renato Bongiorno

AI - Mobile

Atividades e conceitos da aula:

- Touchevents

- Lei de Fitts

AI - Mobiletouch events

Definem um conjunto de elementos que representa a os pontos de contato em uma superfície sensível

ao toque - dedo ou caneta stylus-pen e as mudanças que podem ocorrer com a navegação do

usuário.

AI - Mobiletouch events

Problema: A maioria das aplicações web estão adaptadas somente a lidar com eventos de mouse e não com multiplos

toque - touch e mouse.

Problema: Limitações na experiência do navegador e realizar a entrada de dados simultanea independente do

dispositivo.

AI - Mobiletouch events

Solução: Uso da especificação touch-events W3C.

http://www.w3.org/TR/touch-events/

AI - Mobiletouch events

Touch Interface

Descreve um ponto de acesso individual para cada ponto de acesso.

AI - Mobiletouch events

TouchList Interface

Lista que define os pontos individuais de contatos touch.

TouchEvent Interface

Define os eventos:

● touchstart● touchend● touchmove● touchcancel

AI - Mobiletouch events

TouchList Interface

Lista que define os pontos individuais de contatos touch.

AI - Mobiletouch events

AI - Mobiletouch events

TouchEvent Interface - Define os eventos:

● touchstart - o usuário coloca um ponto de toque na superfície sensível ao toque

● touchend - o usuário remove um ponto de contato da superfície de toque

● touchmove - indicar quando o usuário move um ponto de contato ao longo da superfície de toque

● touchcancel - um ponto de contato foi interrompido de uma maneira aplicação específica

AI - Mobiletouch events

Interação com eventos do mouse

Caso o user-agent identifique ambas as formas de interação com o dispositivo - touch e mouse -

automaticamente a ação touchstart é acionada e enviada antes de qualquer evento de mouse.

AI - Mobilepoint events

Interação com eventos de Ponteiro

http://www.w3.org/Submission/pointer-events/

Visa solucionar o problema das várias formas de interação com o site reduzindo o custo de codificação para vários

tipos de entrada e também para ajudar com a ambigüidade com o que é eventos de mouse e o que não é - definindo

eventos que tratam chamados de ponteiro

AI - Mobilepoint events

Interação com eventos de Ponteiro

Este modelo torna fácil para escrever sites e aplicativos que funcionam bem, não importa o hardware do usuário

O objetivo principal é o de proporcionar um único conjunto de eventos e interfaces que permitem a

criação fácil para cross-device de entrada

AI - Mobilepoint events

Interação com eventos de Ponteiro

AI - Mobilepoint events

Interação com eventos de Ponteiro

Os eventos para manipulação de entrada de ponteiro parecem muito com os de mouse: pointerdown, pointermove,

pointerup, pointerover, pointerout, etc

Eventos de ponteiro fornecem todas as propriedades usuais presentes em eventos de mouse (coordenadas do cliente,

elemento alvo, estados de botões, etc), além de novas propriedades para outras formas de entrada: pressão,

geometria de contato, inclinação.

AI - Mobilepoint events

Interação com eventos de Ponteiro

tiltX - O ângulo do plano (em graus, no intervalo de [-90,90]) entre o plano YZ e o plano que contém a caneta e a área de touch. Define a posição

positiva ou negativa - Exemplo abaixo - tiltX = Positivo

AI - Mobilepoint events

Interação com eventos de Ponteiro

tiltY- O ângulo do plano (em graus, no intervalo de [-90,90]) entre o plano XZ e o plano que contém a caneta e a área de touch. Define a posição

positiva ou negativa - Exemplo abaixo - tiltY = Negativo

AI - Mobilepoint events

Interação com eventos de Ponteiro

touch-action CSS - Define como será o comportamento da página em relação a regiao e ao comportamento do toque - exemplo - nível de

zoom

AI - Mobilepoint events

Interação com eventos de Ponteiro

Exemplo W3C - Reconhecendo tipo de dispositivo:

window.addEventListener("pointerdown", detectInputType, false);function detectInputType(event) {

switch(event.pointerType) {case event.POINTER_TYPE_MOUSE:

alert("You used a mouse!");break;

case event.POINTER_TYPE_PEN:alert("You used a pen stylus!");break;

case event.POINTER_TYPE_TOUCH:alert("You used touch!");break;

case event.POINTER_TYPE_UNAVAILABLE:alert("Not sure what device was used!");break;

}}

AI - Mobilelei de fitts

Lei de Fitts

"A dificuldade para atingir um alvo está relacionado em função da distância do alvo e de seu tamanho"

Na ergonomia, a Lei de Fitts (“Fitts’ law“) é um modelo de movimento humano que prevê o tempo necessário para rapidamente mover a uma área designada com base na

distância e tamanho desta área - Publicado por Paul Fitts em 1954

AI - Mobilelei de fitts

Lei de Fitts

Se um botão (ou qualquer elemento clicável) tiver um tamanho maior e uma distância maior de qualquer outro elemento da

tela, a probabilidade de clicar em um elemento errado é menor.

AI - Mobilelei de fitts

Lei de Fitts

Dica - a área de ação do botão tenha, pelo menos, 12px de largura e 24px de altura, que é o tamanho do cursor padrão do

mouse

Assim não resta dúvida se o cursor está dentro ou fora do botão

AI - Mobilelei de fitts

Lei de Fitts

Dica - Posicione menus de acesso nas extremidades da tela

Para um destro, o canto inferior direito é o mais rápido de acessar, seguidos do canto superior esquerdo, superior direito e inferior esquerdo.

AI - Mobilelei de fitts

Lei de Fitts

Cálculo da Lei de Fitts

T = Tempo de movimento.

a, b = Variáveis. Neste caso, a representa o tempo de início/término da ação e b representa a velocidade do mouse ou mão.

A = distância do movimento do início ao centro do alvo (ou botão).

W = largura do alvo/botão ao longo do eixo do movimento.

AI - Mobilelei de fitts

É comum encontrar botões grandes nas interfaces?

A navegação secundária está sempre o mais perto possível da navegação principal?

Os cantos do monitor são usados como alvo?

AI - Mobilelei de fitts

Exemplos Lei Fitts

http://lachy.id.au/dev/css/examples/2004/08/fittslaw.html

AI - Mobileatividade

Reunir as Agências

Apresentação em Plenária:

Realizar pesquisa e apresentar as características que consideram essenciais para o desenvolvimento de um dispositivo móvel para as

UI Guidelines dos fabricantes:

AI - Mobileatividade

Grupo 01:

AI - Mobileatividade

Grupo 03:

AI - Mobileatividade

Grupo 04:

AI - Mobileatividade

Reunir as Agências

Apresentação em Plenária:

Cada equipe escolhe um site de sua preferência e realiza a navegação de forma completa e cria um relatório detalhando as diferenças e

experiencias entre a navegação desktop e mobile.

Além disso, especifica os pontos fortes e fracos na experiencia de interação de interfaces touchscreen vs mouse.