Observe a orientação do device com JavaScript

js-logo

Com Javascript podemos observar a orientação do device, também é possível realizar este tratamento com CSS, mas isso fica restrito a questões visuais, caso queria realizar algum tratamento lógico em nossa aplicação podemos utilizar JavaScript. Temos “N” possibilidades de acompanhar a orientação do device, nesse post vou mostrar duas maneiras bem simples, a primeira observando o evento ‘orientationchange’, para isso adicionamos um listener em em nossa janela com o seguinte código:

O código acima acompanha quando a orientação do device muda, mas como sabemos que o usuário está em landscape ou portrait, para isso pegamos a orientação do device, com window.orientation essa propriedade retorna a rotação do device:

Com as informações sobre a rotação do device sabemos que 90 ou -90 o device está em landscape e diferente disso portrait. No código acima foi disparado somente um alert, mas poderíamos chamar alguma outra função, editar uma classe de um elemento ou adicionar uma conteúdo específico para o usuário.

A segunda opção seria com matchMedia ela faz parte da Web API Interface com ela podemos validar media queries por exemplo:

Podemos validar qualquer media query no CSS3 temos uma regra para  verificar a orientação vamos utilizar ela para pegar  o orientação do nosso device:

Temos ai duas opções para verificar a orientação do device.

Trabalhando gestos com Hammer.js

hammer-jsHammer é uma biblioteca JavaScript que dispara eventos para os gestos realizados em suas aplicações com HTML+JS. O Hammer.js é simples de usar, como muitas bibliotecas ele usa o esquema “jQuery-like”.

Para utilizar a biblioteca de gestos precisamos dos seguintes passos, carregar a biblioteca do Hammer disponível no link: http://eightmedia.github.io/hammer.js/, além de encontrar o fonte lá você vai encontrar exemplos de como usar a biblioteca. Com os arquivos importados agora vamos ao código, inicialmente selecionamos o elemento o qual vamos “ouvir” os gestos e depois especificamos o gesto que vamos acompanhar.

Exemplo:

No código acima temos um exemplo que acompanha o movimento de swipe, quando realizado ele dispara um alert. E o que podemos fazer com isso? Slide de fotos, invocar menus, ações em jogos, mudança de conteúdo. Podemos notar que no código acima recebemos um evento na função chamada pelo Hammer, vamos usar o “console.log” para inspecionar esse item e o resultado será o seguinte:Captura de Tela 2014-01-03 às 16.16.03

Ele retorna um objeto com uma sério de propriedades, no final da lista temos algumas propriedades importantes, type(tipo do evento), timeStamp, target(onde foi realizado o evento), srcElement(O elemento responsável por chamar o evento) e  gesture um objeto que capta as infos sobre o “toque” realizado pelo usuário, esse item vamos detalhar a seguir:

Captura de Tela 2014-01-03 às 16.16.26

No objeto gesture temos como pegar a angulação que foi realizado o toque, a velocidade x e y, escala, distância, rotação e direção do toque. É muito informação que pode ser trabalhada

Agora vamos a um evento mais prático:

No exemplo acima em nosso elemento com id box, adicionamos uma tag nav com id menu esse item que vamos exibir e esconder. No código JavaScript no final do nosso arquivo verificamos no objeto gesture qual o valor do direction, caso “right” adicionamos o class active, caso contrario adicionamos o class “hide” a transição nos fazemos com CSS3 o código eu mostro a seguir:

Um exemplo simples mas muito usado em muitas aplicações. O exemplo completo desse tutorial você pode conferir no GitHub: https://github.com/fellyph/Tutorial-bbUI/tree/master/hammer/www

 

 

Limites do LocalStorage

Sempre quando falo de localStorage as pessoas me perguntam: “Qual o limite do LocalStorage?” sempre respondia o valor padrão de 5MB, mas esse valor é apenas uma especificação da W3C. Segundo ela:

A mostly arbitrary limit of five megabytes per origin is suggested. Implementation feedback is welcome and will be used to update this suggestion in the future.

Ela sugere(não é obrigatório) que o espaço reservado por origem seja de 5MB e no futuro esse limite pode ser atualizado, a origem citada anteriormente no caso é por cada domínios. As variações a1.exemplo.com , a2.exemplo.com , a3.exemplo.com são considerada a mesma origem.

Em nosso caso o espaço disponível para o localStorage em aplicações em HTML5 na plataforma BlackBerry 10 é de 25MB, para armazenamento de texto 25MB é muita informação. Caso chegue ao limite do armazenamento será levantada uma exceção : QUOTA_EXCEEDED_ERR.

Caso queria saber o limite de armazenamento do seu browser, existe esse teste online: http://arty.name/localstorage.html

Segundo o site citado acima podemos modificar o limite de armazenamento no Opera, Firefox e no Chrome/Safari/IE

Crie accordion sem javascript

html5-logo

<details> é uma tag que podemos encapsular de desencapsular um determinado conteúdo, para obter informações adicionais sobre uma determinada informação, resumindo um accordion. Para trabalhar com esse recurso além da elemento <details>, precisamos do elemento <summary>, ele deve ser incluso como filho do <details>. Com este elemento conseguimos prover uma legenda ou um capítulo para o conteúdo restante, ele também será responsável por clicarmos nele e o conteúdo ser exibido.

O elemento <details> tem um atributo chamado open, ele define se o conteúdo será inicialmente visível ou não. Por default essa propriedade é false. Com esse recurso produz uma interatividade sem nenhum javascript.

Vamos ao código:

No código acima adicionei um CSS para dar um acabamento visual, nele vou fazer duas observações, o summary por default quando clicado exibe um highlight para remove-lo basta adicionar a propriedade “outline:none; “. A segunda observação é referente a como estilizar um item quando ele está ativo, para isso utilizamos o seguinte seletor “details[open]”. No código HTML o primeiro item tem a propriedade open setada assim ele inicia com seu conteúdo exibido. e o resultado será o seguinte:

Captura de Tela 2013-12-24 às 19.44.09

Um recurso simples que economiza o uso de Javascript. O código desse tutorial você pode encontrar no meu gitHub no seguinte link: https://github.com/fellyph/Tutorial-bbUI/tree/master/details

Chame o card de SMS ou o card de discagem com um simples link

Você sabia que é possível preparar um envio de uma SMS via tag <a>. Isso é um recurso bem antigo(início de 2010) dos primórdios do HTML Mobile e podemos usar tal recurso no BlackBerry 10. Seu uso é bem simples:

Como podemos ver no código acima na propriedade href do nosso link iniciamos com “sms:” para indicar que vamos enviar um sms e o número na sequência 1234567 é o número o qual você quer enviar a mensagem. Depois utilizamos uma “?” para passar um segundo parâmetro o corpo da mensagem.

Quando clicamos no links é invocado o card pa composição da mensagem, como na imagem abaixo:

IMG_00000670

Outra opção é usar a tag <a> ligar para algum número específico, isso é possível com o seguinte código:

Quando o usuário clicar no link, caso possua o Skype ele será invocado para fazer a ligação.

Caso queira baixo esses exemplos, eles estão no meu gitbub no link: https://github.com/fellyph/Tutorial-bbUI/tree/master/link/www

Utilizando localStorage para armazenar dados no Device

localstorage

No HTML5 uma features mais utilizada para aplicações móveis é o armazenamento local. Ou DOM Storage como é chamado, ele foi introduzido na especificação da Web Applications 1.0 depois também adicionada na especificação da W3C Web Storage. Com o DOM Storage podemos armazenar dados do usuário no device de forma fácil e segura, em comparação aos cookies, esse recurso era a única opção de armazenamento local sem o uso de plugin foi fortemente utilizado quando o HTML era somente para Desktop.

LocalStorage é um dos recursos do DOM Storage que vamos abordar nesse post, com ele podemos armazenar dados apenas em formato de texto, mas claro podemos contornar essa limitação. Vamos a um exemplo básico de armazenamento.

No código acima adicionamos uma variável com nome “device” que irá armazenar a String “BlackBerry”. Para visualizar se a informação foi realmente salva, vamos em developer tools em seu browser ou no “debug mode” caso esteja “buildando” em seu device, depois Resources > LocalStorage e procuramos a informação device no painel. Como podemos ver na imagem abaixo:

Captura de Tela 2013-12-22 às 13.36.22

Agora que sabemos que a informação foi salva vamos resgatar esse valor com o seguinte código:

No código acima passamos a função getItem e como parâmetro passamos a key do dado que queremos resgatar, na linha seguinte apenas damos um alert para exibir a informação.

Caso queria remover essa informação do localStorage utilizamos o seguinte código:

Agora vamos para um exemplo prático aplicando essas três funções que virmos acima, no caso: salvar, ler e excluir os dados no localStorage.

O Exemplo é bem simples ele verifica se tem o dado “name”, caso tenha, exibe o nome. Caso contrário adiciona um input para cadastrar o dado. Quando o nome é exibido também adicionamos um button para chamar a função de excluir os dados. Nos Exemplos anteriores apenas adicionamos e removemos algumas strings, para trabalhar com objetos no localStorage precisamos usar a Classe JSON, com ela é possível fazer a ponte entre texto e objetos.

No código acima verificamos se existe um dado com uma key “user”, caso exista ele resgata a informação na variável “texto” em seguida converte o texto em objeto com a classe JSON através da função parse que passamos como parâmetro o nosso texto armazenado no localStorage, na sequência adicionamos o conteúdo no body do nosso arquivo. Caso o usuário não tenha nenhuma informação salva, o código irá criar um objeto “user” e em seguida “stringificar” o nosso objeto assim salvado os dados em nosso localStorage. Esse exemplo não é muito funcional apenas exemplifica como é salvar um objeto em nosso localStorage.

Agora vamos partir para um exemplo mais funcional, vamos montar uma todo-list utilizando localStorage, desta vez vamos separar o código no arquivo todo-list.html, js/app.js e css/style.css. Caso queira baixar o exemplo ele e os anteriores estão disponíveis no gitHub no seguinte link: https://github.com/fellyph/Tutorial-bbUI/tree/master/localstorage

Inicialmente nosso HTML:

Nosso CSS:

Detalhe para o ultimo seletor que trata quando o item da lista possui o atributo data-done igual a true, ele vai adicionar uma linha sobre o texto.

Agora o nosso JS:

Tentei comentar os pontos mais importantes do código, no exemplo acima o usuário pode cadastrar as tasks que serão vinculadas uma data, quando o usuário clica no item da lista a propriedade “data-done” muda entre true ou false. caso o usuário queira limpar sua listas de task clica no botão “Limpar tarefas…” o código irá varrer da lista os itens com valor da propriedade data-done igual a true e retirar da lista.

Além do LocalStorage temos o SessionStorage, a diferença entre os dois é que o sessionStorage como o nome sugere ele guarda as informações apenas na seção ou seja no caso de um app mobile, quando o app é finalizado a informação é removida.

Use o Input type apropriado para cada tipo de dado

Com o HTML5 foram introduzidos os novos inputs types isso representou um ganho enorme para os usuários mobile que utilizam formulários em seu app e site, utilizar o input type correto é muito importante para experiência do usuário. Nesse tutorial vou listar os principais inputs type para você utilizar em sua aplicação.

date

Este campo é preparado para receber uma data, será exibido para o usuário um calendário para cadastrar a informação. O resultado da utilização do input é o seguinte:

IMG_00000575

time

Este campo campo é utilizado para realizar cadastro de hora. Da mesma forma do date ele irá habilitar um interface adaptada para cadastro da informação.

IMG_00000576

month

Campo é similar ao date mas resgata apenas a entrada de mês e ano sem o time zone.

IMG_00000572

number

Input para cadastro específico de números, para o usuário mobile ele exibe apenas o teclado numérico como a imagem a seguir:
input_number

range

Cria um elemento slide para receber um valor dentro de um intervalo especificado pelas propriedades min e max.

range

color

Permite ao usuário selecionar uma cor específica retornando um valor hexadecimal.

IMG_00000571

url

Este elemento cria uma validação para url em invoca um teclado específico para o cadastro da info.

email

Assim como o type url esse item realiza uma validação esperando uma info com @. Caso o usuário tente cadastrar uma informação inválida teremos o seguinte alerta:

IMG_00000582

tel

Input Similar ao number com apenas números, mas com o teclado semelhante ao discador:

IMG_00000581

search

Neste campo é adicionado um “x” no canto esquerdo quando é adicionado algum conteúdo, o “x” tem a função de limpar o conteúdo. Como o nome sugere este Input é utilizado em campos de busca.

search

Esse itens além de ter o suporte no Blackberry 10 também tem suporte nas maiorias dos browsers e muito coisa nova esta vindo por ai. Além de novos inputs temos novas propriedades que será o tema do próximo post sobre input.

O código dos exemplos confere aqui :

https://github.com/fellyph/Tutorial-bbUI/tree/master/tutorial-input/www