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.

8º Encontro FEMUG SP + 8º Encontro Mobile Dev Group São Paulo

Olá pessoal venho anunciar o nosso primeiro encontro do ano, esse encontro será uma parceria com o grupo FEMUG-SP. O grupo organizado pelo Daniel Filho, para quem não conhece o grupo vai uma breve descrição:

O “Front-End Meet-Up Group” é um projeto que nasceu da necessidade de unir os desenvolvedores Front-End de São Paulo, e então tornou-se uma idéia coletiva, para que o acesso à informação seja feito em qualquer lugar que haja interesse do aprendizado.

 

O FEMUG realiza encontros periódicos sem um local fixo cada mês uma empresa fica responsável por seder o espaço para o evento, neste mês o encontro será realizado na BlackBerry. O Tema ainda não foi definido, ele é fechado dias antes do evento, para acompanhar a discussão sobre o encontro acesse a lista no seguinte link: http://bit.ly/FEMUG-SP

As conversas sobre o encontro começaram no ano passado Demian Borba, conheceu Daniel Filho no FEEC Brasil em Recife, isso mesmo em Recife nós conhecemos o grupo de São Paulo. E nesse mês será um prazer receber o FEMUG nas instalações da BlackBerry Brasil, também convidamos os integrantes do Mobile Dev Group São Paulo participarem do encontro. Quem não acompanha o nosso Dev Group no Facebook vai perguntar “Que grupo é esse?”. No final do ano passado em uma reunião realizada entre os managers do Brasil decidimos mudar o nome dos grupos de “BlackBerry Dev Group” para “Mobile Dev Group”.

Essa mudança visa abrir os grupos para desenvolvedores de outras plataformas, com o foco no enriquecimento do conhecimento entre os desenvolvedores independente da plataforma, atualmente temos muitas tecnologias convergentes em várias plataformas, por exemplo, AIR, Unity e Phone Gap. O Apoio da BlackBerry aos grupos continua com o mesmo foco os desenvolvedores.

E agora chega de “Blá Blá Blá” vamos ao que interessa o encontro será nesta Quarta-feira, 15 de Janeiro de 2014 às 20:00h no Escritório da BlackBerry Brasil:

Centro Empresarial Nações Unidas, Torre norte – 35º andar
Av. das Nações Unidas, 12901 – Itaim Bibi
São Paulo

Interessado em participar do evento por favor se inscrever no seguinte link: http://www.eventick.com.br/femug-sp-8

E até lá pessoal.

 

 

 

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

Corra! Esquive! Pule! com Retro Runners

1239614_726074764076210_802183363_n

Retro Runner podemos dizer que é um dos games brasileiros de mais sucesso na BlackBerry World, descoberta do Tech Center São Paulo. O game com seu estilo 8-bits  desenvolvido em Unity foi destaque internacional. Hoje o game está disponível para q10, z10 e z30.

Agora vamos conhecer um pouco sobre a CountrySide produtora do game

1. Qual o seu nome? (ou quais os seus nomes?) E qual seu(s) perfil(is) no Twitter?
Arthur Ciappina e Marcelo Barce. Não utilizamos o Twitter.

2. Qual o nome do seu app? Qual o endereço do app na BlackBerry World? Para qual plataforma ele está disponível?

Retro Runners, disponível para BlackBerry, Android, iOS e Windows Phone.
O endereço na Blackberry World é: http://appworld.blackberry.com/webstore/content/40718890/

3. Qual tecnologia você utilizou para desenvolver seu(s) app(s)?

Unity 3D

png-5

4. Nos conte sobre o(s) seu(s) app(s), o que ele(s) faz(em)? Qual é o seu público-alvo? Como você definiu os requisitos e funcionalidades?

Retro Runners é um jogo de corrida infinita 3D com aspecto retrô (baseado nas gerações 8 e 16 bits). O jogo era apenas um exercício, pois eu (Marcelo) não sabia programar e o Arthur não tinha experiência com 3D. Mas depois de ver que o jogo estava dando certo, nós decidimos levá-lo até o fim e comercializá-lo. Como nós já trabalhamos e estudamos neste ramo, nós sabíamos coisas que deveriam ser incluídas no jogo para ele ter uma boa aceitação no mercado.

Além de que, o fato de os jogos de corrida infinita estarem em alta no mercado mobile somado ao fato de jogos com visual “retrô” também estarem em alta (principalmente após o fenômeno Minecraft), nos dava a certeza de que o jogo tinha potencial para atingir um público amplo.

png-3

5. O que fez você(s) escolher(em) a plataforma BlackBerry?


Retro Runners é o nosso primeiro jogo, e o BlackBerry nos mostrou ser uma boa plataforma porque além de ter apenas aparelhos com hardware bom, possui uma loja de aplicativos muito mais limpa do que a dos concorrentes e que nos daria o merecido destaque.

Além disso, os programas de incentivo, foram boas oportunidades para entrarmos nesse mercado, visto que estando em nosso primeiro projeto, não tínhamos condição de adquirir tais ferramentas.

6. Qual foi a sua experiência em utilizar o SDK da BlackBerry? Você(s) recomendaria(m) para outros desenvolvedores? Por que?

Não utilizamos o SDK do BlackBerry. Mas posso dizer que desenvolver para BlackBerry no Unity foi tão simples quanto as outras plataformas, então, não vejo motivos para um desenvolvedor não lançar um jogo para BlackBerry.

7. Em quanto tempo você desenvolveu o(s) aplicativo(s), desde o momento da ideia até a publicação na BlackBerry World? Quais foram as principais fases?

Foram 3 meses, nos quais aprendi a programar e desenvolvi ao mesmo tempo.
A idéia inicial era apenas “fazer uma corrida infinita”, então, eu diria que as fases mais importantes, foram as fases em que eu adicionei novos elementos de game design, como por exemplo os itens especiais, o cenário e level design dinâmico (que muda de acordo com o progresso do jogador), os achievements.

Além é claro, do momento em que eu descobri que era melhor programar o jogo em C#, isso ocorreu bem no meio desses 3 meses de projeto, e eu converti o jogo inteiro de JavaScript para C#. Numa empresa consolidada, essa linha de trabalho seria um fracasso e daria prejuízos, mas no nosso caso, como o projeto era acima de tudo um processo de aprendizado, os 3 meses de desenvolvimento foram muito enriquecedores.

8. Quais foram os principais desafios durante o desenvolvimento? E quais as principais soluções? Algum sucesso marcante? Algum fracasso? Lições aprendidas? Quais?

Uma coisa que sempre achei, é que no mercado de games, falta muito respeito e suporte ao consumidor, e esta era uma das coisas que eu tinha como prioridade nos meus princípios. Então, desde o lançamento, sempre respondemos e-mails, aceitamos sugestões e solucionamos todos os problemas reportados, isso nos rendeu MUITAS críticas positivas e em pouco tempo nós já encontrávamos pessoas dizendo por aí: “Os desenvolvedores são muito atenciosos”.

É difícil citar todas as lições aprendidas porque o processo todo, do início do desenvolvimento ao final, foi uma grande lição, mas uma coisa que nós não imaginávamos e que aprendemos após lançar o jogo, diz respeito a localização(tradução) do jogo. Nós utilizamos muito texto, e isso, além de tomar muito espaço na interface, requer mais trabalho de tradução. Traduzir por si só não é o problema, o problema é que, ao traduzir, textos mudam de tamanho, e isso afeta todo o layout.

Foi aí que nós entendemos, porque os grandes sucessos mobile, como Angry Birds, optaram por colocar um símbolo de Play ao invés de colocar um texto “Play”, isso facilita muito. Esses símbolos (como o Play/Pause) são uma linguagem global compreensível em qualquer lugar do mundo, e devem ser usadas quando se quer atingir um público sem fronteiras.

9. Algum fato interessante que você(s) gostaria(m) de compartilhar com os desenvolvedores que estão lendo este post?

Nós não acreditávamos tanto no potencial de jogos mobile com suporte a gamepad, mas depois que implementamos o suporte a gamepad no BlackBerry, vimos que era REALMENTE bacana jogar com um controle, além de ser uma ótima alternativa para pessoas que não gostam de controles touchscreen. A implementação é simples e inclusive publiquei um tutorial a respeito em meu site pessoal.

10. O que você(s) acha(m) do suporte da BlackBerrry aos desenvolvedores?

Se por um lado a documentação BlackBerry referente a Unity ainda carece de muita informação, por outro lado, o pessoal do suporte está sempre disponível e disposto a ajudar.

11. Quais são os seus planos para atualizações do(s) seu(s) aplicativo(s)?

Ainda queremos implementar integração social na versão Blackberry do Retro Runners, mas isso só será possível após lançarmos mais um jogo, pois como somos apenas 2 pessoas, cada dia utilizado para fazer update é um dia a menos na produção do jogo novo, e nós já excedemos a nossa “cota” de updates atual. Quando publicarmos o novo jogo, certamente haverão mais updates do Retro Runners.

12. Alguma mensagem para outros desenvolvedores que estão considerando criar aplicativos para a plataforma BlackBerry 10?

Aproveite esta oportunidade para crescer no mercado mobile, pois as plataformas que dominam o mercado atualmente não oferecem oportunidades tão boas de destaque, nem o mesmo incentivo aos desenvolvedores. Os aparelhos BlackBerry são bons e com certeza também não te darão dores de cabeça no que diz respeito a desempenho.

O Retro Runners foi por duas vezes destaque do site BlackBerry foi por muito tempo top5 da categoria retro da BlackBerry World. O Review do CrackBerry você confere aqui:

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