responsive web design - ai
TRANSCRIPT
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
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
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 - Mobilelei de fitts
Exemplos Lei Fittshttp://www.ibrau.com.br/artigoleidefitts.htm
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 02:
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.