Possibilidades de Interação com HTML

De MAGTAB Wiki
Ir para: navegação, pesquisa

O HTML é uma linguagem de programação completa e que possibilita uma infinidade de possibilidades de interação com o usuário. É possível criar aplicativos inteiros com HTML. Mas para ajuda-lo na decisão do que fazer e por onde começar, montamos a lista abaixo. Conforme pensamos em novas possibilidades, atualizamos a lista.

Disponibilizamos no fim algumas referências externas com outras dicas e exemplos.

Animação

O CSS é folha de estilos para HTML, e é amplamente usado para definir o visual dos sites. Em sua versão mais nova, o CSS3, é possível também criar animações. Todas as propriedades do CSS podem ser animadas, que possibilita uma infinidade de animações diferentes, como mudar a cor do fundo, mover um elemento, fazer uma transformação 3D, entre muitas outras coisas. No link a seguir, várias destas possibilidades são demonstradas:

http://leaverou.github.com/animatable/

Vídeo

O HTML5 permite a execução e controle de vídeos. O formato aceito é o MP4 (MPEG 4 com vídeo codificado em H264 e áudio em AAC). Por Javascript, é possível controlar propriedades do vídeo, como velocidade da execução, pular para um pedaço específico, deixá-lo em tela cheia, controlar o volume e até extrair um snap do vídeo para manipulá-lo posteriormente. Também é possível adicionar propriedades CSS no vídeo, sendo possível por exemplo, animar a posição do vídeo na tela, ou aplicar uma transformação 3D no mesmo.

http://www.html5rocks.com/pt/tutorials/video/basics/

Áudio

O HTML5 permite a execução e controle de arquivos de áudio. O formato aceito é o MP3 ou o WAV, porém recomendamos o uso do MP3 pelo tamanho menor do arquivo. É possível que o áudio seja tocado automaticamente, toque em loop, controlar o volume, ou pular para determinado trecho do áudio, por exemplo. É possível também customizar os controles de play/pause/seek do áudio usando CSS.

Do iOS6 em diante audio auto-play não é mais suportado. É necessário a interação do usuário para que o som toque.

https://developer.mozilla.org/pt-BR/docs/Using_HTML5_audio_and_video

Geolocalização

Permite o acesso à localização do usuário, caso ele aceite provê-la. Usando Javascript, é possível recuperar dados como latitude, longitude e a precisão em metros da localização do usuário.

http://www.w3schools.com/html/html5_geolocation.asp

Acelerômetros

Todos os dispositivos mobiles de última geração possuem sensores de movimento, chamados acelerômetros. A partir da versão 4.2 do iOS é possível ter acesso a esses dados. Com informações do acelerômetro é possível ter informações sobre o vetor de gravidade e saber exatamente pra que lado o aparelho está apontado - e por exemplo, fazer objetos caírem na direção que o usuário move o aparelho, ou identificar que o usuário está rodando ou movendo em qualquer eixo o aparelho - e por exemplo, mover uma imagem dando a impressão do usuário estar navegando em um ambiente virtual.

Um exemplo prático, abra esse link no seu iPhone ou iPad: http://goo.gl/1jT5M

Webfonts

Permite a utilização de fontes customizadas. Os formatos de fonte suportados são TrueType (.ttf) e OpenType (.otf). Algumas vantagens da utilização das webfonts, ao invés de salvar o texto como imagem, é que é possível, por CSS, controlar a altura da linha, o espaçamento de caracteres, sombras, alinhamento, além de todo o controle sobre o texto via javascript.

http://www.html5rocks.com/en/tutorials/webfonts/quick/?redirect_from_locale=pt

F.A.Q

Posso utilizar acelerômetros?

Sim. Com as informações de acelerômetros é possível saber sobre movimentos do aparelho em 3 eixos e em alguns aparelhos com suporte a giroscópio é possível saber para onde o aparelho está apontando.

Com o relógio?

É possível ter acesso a horário local, mas não a agenda ou alarmes do aparelho.

Posso ter animações?

Sim. Utilize preferencialmente CSS3 para animações mais fluídas.

Posso ter mais de uma tela?

Sim, mas desde que as telas estejam todas programadas dentro da mesma interatividade.

Se você pretende fazer uma interatividade com diversas telas offline, é importante observar o limite de 20Mb para upload na plataforma da MAGTAB. Essa limitação existe para evitarmos abusos e oferecer uma melhor experiência no tempo de download ao leitor. Para telas online, que baixem conteúdos direto da Internet, não há restrições.

Capta dados de utilização?

Não fazemos captação de uso ou aberturas das interatividades em HTML5. Portanto, caso queira fazer essa análise, sugerimos utilizar o Google Analytics ou solução similar para tal.

Pela interatividade HTML, não é possível ter acesso a dados do usuário, como por exemplo agenda telefônica, contatos, ou calendário. Mas você pode pela interatividade HTML solicitar esse tipo de informação ao usuário.

Capta dados de navegação e interatividade do leitor?

Nós captamos o download, leitura, tempo de leitura e a demografia (geo-posicionamento). Detalhes de interação dentro da peça precisam ser captados pela própria interatividade, como descrito acima.

Pode mudar de tela conforme mudança de data?

Sim, é possível mostrar uma tela específica pra cada data e horário, isso pode ser tratado dentro do código da interatividade.

É importante entender que a interatividade será baixada apenas uma vez pelo usuário, e permanecerá offline depois disso. Então é importante que caso a interatividade offline deva "expirar" depois de um tempo, isso deve ser tratado dentro do código. Novas versões publicadas na edição só serão baixadas em novos downloads, ou seja, apenas aparecerá para novos usuários.

A interatividade HTML tem acesso a qualquer outra informação que não é possível ter por HTML?

Sim, nós oferecemos uma API de acesso a algumas informação não disponíveis diretamente por HTML, mas são funções normalmente relacionadas a revista ou a dados que somente o App tem acesso.

A documentação desta API pode ser encontrada no link:

API HTML

Referências Externas

Exemplos em vídeo de anúncios em HTML5:

https://www.google.com.br/search?q=html5+ads+ipad&hl=pt-BR&safe=off&sa=N&qscrl=1&prmd=imvns&source=univ&tbm=vid&tbo=u&ei=p7mBUNT_JIqE8ATtsIH4Bw&ved=0CC0QqwQ4FA&biw=1867&bih=986


Conheça todas as funcionalidades a fundo do HTML5 que são suportadas pelos navegadores Mobile (salvo raras exceções, se funcionar no navegador, irá funcionar como interação HTML5):

http://caniuse.com/#compare=ios_saf+4.2-4.3,ios_saf+5.0-5.1,ios_saf+6,android+4,android+4.1


Alguns experimentos bem interessantes realizados pelo Google explorando as possibilidades do HTML5:

http://www.chromeexperiments.com/mobile/


Uma matéria interessante da Mashable sobre anúncios mobile com HTML5:

http://mashable.com/2010/09/24/html5-mobile-advertising/


Diversos exemplos e discussões sobre as capacidades e usos do HTML5:

http://www.html5rocks.com/