Sendo assim, precisamos preparar nossos
websites, e uma parte essencial disso diz respeito aos toques na tela, criando
gestos ou qualquer coisa que o usuário desejar. Ao longo desse artigo, traremos
algumas formas comuns de criar elementos voltados para o toque dentro de nossa
aplicação. Veremos como realizar a utilização dos eventos touch dos navegadores e também como criar os nossos customizados
para oferecer uma experiência de usuário otimizada.
A programação voltada para toque tem sido um dos pontos mais focados pelos desenvolvedores nos últimos anos. Isso porque o número de dispositivos com esse tipo de monitor tem aumentado exponencialmente, sejam tablets, smartphones ou mesmo laptops ou desktops com esse tipo de recurso.
Pensando nisso, o desenvolvimento web também não pode ficar para trás e possui alguns meios de fazermos uso desse recurso para criarmos experiências interessantes para nossos usuários.
Nesse contexto, podemos falar de eventos. Os eventos estão presentes em todos os tipos de programação com interação com o usuário. Eles vão desde um simples clique de mouse até o fato de o mouse ter ficado um determinado tempo sobre um controle, ou ainda o fato de a página ter sido carregada.
O desenvolvimento web não é diferente, e possui alguns eventos especialmente preparados para esse tipo de desenvolvimento. Com relação aos eventos voltados ao toque, temos alguns especiais, uma vez que o clique do mouse não é a mesma que o toque na tela, além de existir a possibilidade de gestos do usuário.
Ao longo desse artigo, traremos a utilização desses eventos dentro do contexto do ASP.NET MVC para sermos capazes de criar experiências diferentes para o usuário que possuir esse tipo de recursos em seus dispositivos.
A ideia é que tenhamos um conhecimento dos eventos que podem ser utilizados para isso, criando uma caixa de desenho dentro de uma aplicação ASP.NET MVC.
Além disso, veremos como é possível criarmos eventos customizados para lidarmos com algum determinado movimento que o usuário pode fazer na tela: o swipe, que consiste em um gesto simples da direita para a esquerda ou vice-versa.
Eventos comuns no desenvolvimento web mobile
O desenvolvimento web, assim como o desenvolvimento desktop, trabalha com o conceito de eventos. Esses eventos lidam com inúmeros elementos que podem acontecer durante a execução de uma aplicação, desde o mais simples toque de botão até uma página sendo maximizada, por exemplo.
A ideia por trás deles é que possamos programar exatamente o que acontecerá no momento que um evento desse tipo ocorre, o que nos permite controlar o envio de dados de um formulário no clique de um botão ou o carregamento de dados essenciais durante o carregamento de uma página.
Existem vários eventos com os quais podemos lidar e precisamos entender quais deles são úteis para o desenvolvimento web móvel, que é o que desejamos.
Nesse caso, há vários problemas de incompatibilidade e precisamos entender quais são as opções e quais os dispositivos que podemos ter como alvo.
Atualmente, a maior parte dos dispositivos possuem esse tipo de suporte, de um jeito ou outro, mas é interessante ressaltarmos o Windows Phone 7, que possui suporte touch rudimentar, não passando muito da emulação dos eventos de clique do mouse.
Vamos começar trazendo algumas APIs e o que elas suportam. Note que as APIs são suportadas por apenas alguns dispositivos, o que pode nos forçar a lidar com mais de uma delas para que nossa aplicação funcione da mesma forma em vários dispositivos. A Tabela 1 traz os principais eventos suportados nessas APIs.
Aqui, precisamos comentar a respeito das duas primeiras APIs da tabela (click e mouse*). Esses eventos não são utilizados para o desenvolvimento de experiências touch, ainda que forneçam uma boa opção para compatibilidade entre desktop e mobile. Por isso, não daremos atenção a eles nesse artigo. Nessa tabela o caractere “*” representa várias opções, como em “Eventos do tipo Mouse*”, que engloba eventos como mouseup e mousedown.
API |
Descrição |
Plataforma-alvo |
Eventos de Clique (Click) |
A emulação de eventos de clique está presente em todos os browsers para dispositivos móveis. O motivo é óbvio: sem essa emulação, não haveria possibilidade de um website originalmente desenhado para desktop funcionar em um smartphone ou similar. |
TODAS |
Eventos do tipo Mouse* |
Outro conjunto de eventos de mouse que são emulados em dispositivos móveis. A ideia é muito similar aos eventos de clique: garantir compatibilidade entre mobile e desktop. |
TODAS |
Eventos do tipo Touch* |
Eventos que fazem parte do mecanismo padrão para o desenvolvimento touch. Esses eventos estão presentes em todos os browsers do webkit (BOX 1), o que significa que estão presentes para a grande maioria dos usuários. Os eventos de destaque são touchstart, touchmove, touchend e touchcancel. |
Browsers do webkit, mais o Mozilla Firefox |
Eventos do tipo Gesture* |
Possuem pequenas diferenças com relação aos eventos Touch* e, portanto, não são muito utilizados. |
iOS 2 e superiores |
Eventos do tipo MSPointer* |
Eventos utilizados nos dispositivos da Microsoft (Windows Phone 8 e Windows 8). São, inerentemente, mais complexos que os eventos Touch*, embora tenham o mesmo fim. Eles encapsulam eventos de mouse, canetas de toque e toque em um tipo de evento. Podem ser destacados os eventos MSPointerDown e Up, MSPointerEnter e Leave e MSPointerMove. |
A partir do Internet Explorer 10 (Windows 8 e Windows Phone 8) |
Eventos do tipo MSGesture* |
São extensões dos eventos do tipo MSPointer*, mas tem capacidade para lidar com gestos mais complexos. |
A ... |
Confira outros conteúdos:
Black November
Desconto exclusivo para as primeiras 200 matrículas!
Pagamento anual
12x no cartão
De: R$ 69,00
Por: R$ 54,90
Total: R$ 658,80
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- 12 meses de acesso
Pagamento recorrente
Cobrado mensalmente no cartão
De: R$ 79,00
Por: R$ 54,90 /mês
Total: R$ 658,80
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- Fidelidade de 12 meses
- Não compromete o limite do seu cartão
<Perguntas frequentes>
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.
Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.