Categorias
HTML5 Tutoriais

Crie accordion sem javascript

 

<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:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Details </title>
	<style>
		details{
			border-radius:3px;
			padding:5px;

		}
		summary{
			border-radius:3px;
			border:1px solid #ddd;
			padding:5px;
			outline:none; 
		}

		details[open]{
			background:#ddd;
			border:1px solid #333;
		}
		details[open] summary{
			border:none;
		}
	</style>
</head>
<body>

<details open>
	<summary>Autor</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, nemo, dolores numquam fugit ipsum velit eaque repudiandae ea libero est.</p>
</details>

<details>
	<summary>Livros</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, nemo, dolores numquam fugit ipsum velit eaque repudiandae ea libero est.</p>
</details>

<details>
	<summary>Jobs</summary>
	<p> Consequuntur, consequatur ut earum dolore placeat doloribus in voluptatem culpa.</p>
</details>
</body>
</html>

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:

 

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

Categorias
HTML5 Tutoriais

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 este recurso bem útil e otimizar a experiência do usuário, imagine uma listagem de lojas o usuário deseja ligar para uma loja específica, se não utilizar a tag <a> o usuário precisa copiar o texto, sair do browser e colar no discador. Mas para resolver isso com apenas um clique é bem simples:

<a href="sms:1234567?body=Hello BB10">Enviar um SMS via link</a>

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.

 

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

<a href="tel:1234567">Ligue já!</a>

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

Categorias
HTML5 Mobile Dev Group São Paulo Tutoriais

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:

<input type=”date” id=”data”>

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.

<input type=”time” id=”hora”>

month

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

<input type="month" name="mes" id="mes">

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 type="number" name="num" id="num">

range

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

<input type=”range” name=”media” id=”media” min="0" max="100">

color

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

<input name="cor" id="cor" type="color" >

url

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

<input name="mail" id="mail" type="email">

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:

<input name="mail" id="mail" type="email">

tel

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

<input name="phone" id="phone" type="tel">

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.

<input type="search" id="busca">

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

Categorias
HTML5 Mobile Dev Group São Paulo Tutoriais

Trabalhando cards com Webworks

Os cards permitem abrir em seu app recursos de outras aplicações, normalmente o card fornece uma capacidade de executar tarefas específicas, por exemplo, o acesso a câmera ou acesso a agenda para selecionar um contato, tudo isso de forma bem simples uma tela sobrepõe o app, uma ação específica é executada em seguida o card fecha assim voltando para aplicação original.

Um aplicativo pode requisitar um card por vez, no entanto um card pode requisitar outro card, mas nesse caso o aconselhável é usar esse recurso com moderação para sua aplicação não ficar confusa. Apesar de parecer parte de aplicação ele é responsável por manter suas ações a aplicação não interfere no card durante o seu funcionamento.

Tipos de Cards

Existem três tipos de Cards: compositores para criação e edição de conteúdo, pickers para escolha de conteúdo e os visualizadores de conteúdo.

O uso de Cards não é restrito para aplicações nativas, também é possível fazer o uso desse recurso com aplicações em WebWorks. Neste tutorial vou listar alguns exemplos com uso de cards. Inicialmente precisamos criar nosso arquivo config.xml, para habilitar o uso de cards vamos adicionar a seguinte linha em nosso config:

<feature id="blackberry.invoke.card" />

Essa API não requer um elemento para liberar o seu uso. Abaixo veja como ficou o config.xml:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0"
        id="callCards">
    <name>Call Cards</name>
    <content src="local:///index.html" />
    <author>Fellyph Cintra</author>
    <description>Tutorial para a chamada de cards.</description>
    
    <feature id="blackberry.invoke.card" />
   
    <rim:permissions>
        <rim:permit>access_shared</rim:permit>
    </rim:permissions>
</widget>

No código abaixo montei uma chamada para o card de email, todas as funções do exemplo já estão comentadas

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
   
	<title>Tutorial Cards</title>
	<script src="local:///chrome/webworks.js" type="text/javascript"></script>
	<script>
		// configurando o objeto para ser repassado ao email. A chamada do card de email é possível configurar o assunto, o corpo de email, para quem vai o email e quem será copiado no email.
		var detailsEmail = {
			    subject: "Assunto do email",
			    body: "Corpo do email",
			    to: ["fellyph@gmail.com"],
			    cc: ["fellyph@hotmail.com"]
			}

		// adicionamos um listener para quando o webworks estiver pronto ele inicialize a nossa aplicação.
		document.addEventListener("webworksready", initApp);
		
		
		function initApp() {
			 // quando o app for inicializado ele cria um botão que invoca o card de email.
			 var buttonDinamic = document.createElement('button');
			 buttonDinamic.onclick = enviaEmail;
			 buttonDinamic.innerHTML = ["Clique aqui para enviar um email"];
			 document.body.appendChild(buttonDinamic);
		}

		function enviaEmail(){
			//invocando o email composer, como o nome sugere criar um email através de cards 
			blackberry.invoke.card.invokeEmailComposer(detailsEmail, 

			//função dispara quando ocorreu tudo bem com a utilização do card
			function (done) {
			    alert("done : " + done);
			},

			//função disparada caso a ação seja cancelada
			 function (cancel) {
			    alert("cancel : " + cancel);
			},

			//função disparada caso ocorra um erro com o card
			function (invokeError) {
			    alert("error : " + invokeError);
			});
		}
	</script>
</head>

<body>
		
</body>
</html>

Quando o usuário clicar no botão ele irá chamar o card e o resultado será o seguinte:

Esse exemplo pode ser útil para uma funcionalidade, por exemplo, uma “fale conosco” onde o usuário do seu app envia um email com dúvidas e sugestões sobre sua aplicação.

Lembrando que os cards são recurso nativos do OS não conseguimos simular esse recurso no Ripple

Para conferir os arquivos deste exemplo você pode acessar o github:

Categorias
HTML5 Mobile Dev Group São Paulo Tutoriais

Entenda todos os pontos do certificado Built for BlackBerry

Lançamos o desafio no início desse mês o Built for BlackBerry Brazil Challenge 2013, com uma premiação total de R$ 25.000,00. Divididas em 4 grupos, AIR , Cascades, HTML5 e o Dev Group com maior números de apps. Para quem não conhece o Built for BlackBerry é uma selo da BlackBerry que certifica que sua aplicação segue os padrões de qualidade da empresa. Além do desafio que é um bom incentivo, os números mostram que as aplicações Built for BlackBerry tem um acréscimo de até 300% em seus downloads. Isso é possível com os benefícios fornecidos pela BlackBerry, destaque nas mídias sociais, media digital, e-mail marketing e destaque na loja.

Ótima notícia!

Mas o que classifica uma aplicação como “Built for BlackBerry“? Nesse post vou listar os pontos necessários para eleger sua aplicação como “Built for BlackBerry”. Aplicativos de produtividade, lifestyle apps, games, independente de sua categoria podem ser submetidos. Uma das condições básicas que seu aplicativo precisa, é ser escrito em uma das três opções: Adobe AIR, SDK Nativo ou WebWorks. Aplicativos Android, web launchers ou aplicativos simples como leitores de Feed RSS, não são elegíveis para o programa.

Critérios

Inicialmente o aplicativo necessita estar aprovado na loja da BlackBerry World e os pontos analisados serão:

  • Benefícios ao usuário
  • Experiência do usuário(UX)
  • Performance
  • Segurança
  • Integração de serviços

Benefícios ao usuário

– Proporcionar entretenimento, esse ponto não se limita apenas aos jogos.
– A aplicação deve aumentar a produtividade dos usuários de forma sutil.
– Facilitador da comunicação do usuário, o aplicativo deve fornecer recursos para compartilhar seu conteúdo facilmente. Esse ponto não é obrigatório em jogos.
– Esteticamente agrável

Experiência do usuário(UX)

Experiência do usuário é um ponto fundamental para o sucesso de sua aplicação. O programa lista os seguintes pontos referente a experiência do usuário:

– Siga as diretrizes de User interface(UI) do BlackBerry 10, se ainda não conhece você pode conferir aqui: https://developer.blackberry.com/design/bb10/
– Utilizar o framework do BlackBerry 10 com cascades, não garante que você esta respeitando as guia de UI
– Adicione ajuda e dicas ao longo de sua app para guiar o usuário utilizar sua aplicação
– Utilize uma estética agradável, gráficos com boa qualidade.
– Faça bom uso da tela, concentrando-se no conteúdo.

Navegação da aplicação
A UI de sua aplicação deve tornar fácil para o usuário realizar as principais tarefas.

– Coloque as ações mais importantes e freqüentes em um local de fácil acesso, utilizando “Action bar” e “Tab Menu”
– Mantenha a ações menos freqüentes e ações muito específicas no Action Menu.
– Utilize o recurso de touch-and-hold para ativar o menu de contexto para acesso direto a opções específicas ao conteúdo selecionado.
– Utilize o Application Menu para ações globais na aplicação, exemplo, help, configurações ou logoff(exceto para games).
– Crie controles personalizados para funções específicas de sua aplicação, claro seguindo a experiência do BlackBerry 10, exemplo:

– Crie atalhos para funcionalidades para uma interação mais fluida, utilizando comandos de teclado.
– Economize espaço, evite duplicação de ações ou menus.

Progress Feedback
Os usuários devem perceber o andamento das atividades de sua aplicação, dê o feedback quando sua aplicação estiver processando algo, não forneça uma tela totalmente preta sem nenhuma resposta. Os indicadores de progresso são sempre uma ótima opção, mas otimize seu código ao máximo para reduzir a presença deles e só utilizar quando necessário.

Performance

Desempenho de sua aplicação é crucial para uma boa experiência do seu usuário, para receber a certificação seu app passará por uma série de teste sobre performance.

– Sua aplicação deve gerenciar o uso de CPU de forma inteligente. Se o seu aplicativo faz alto uso da CPU do device isso irá impactar no alto consumo de sua bateria.
– Teste de desempenho de memória, irão verificar em seu app se ele está com vazamento de memória.
– Testes de redes, sua aplicação deve fazer um acesso a dados externos de forma otimizada, para evitar altos custos de dados para os usuários.
– Tratamento para execução em background, ponto importante para gerir o acesso aos recursos do dispositivo. Somente aplicativos das categorias citadas a seguir podem fazer uso de recursos rodando em segundo plano:

  • Streaming de áudio
  • Reprodução de áudio local
  • Conexões que exigem acessos periódicos para manter o serviço ativo
  • Acesso periódicos a determinado conteúdo que demanda a necessidade de estar sempre atualizado.
  • Serviços de gravação
  • Comunicação com GPS
  • Comunicação com DLNA e HDMI
  • Comunicação via USB
  • Monitoramento de conexão ou periférico
  • Tarefas de longa duração, exemplo, editores de vídeo, downloads ou descompactadores
  • Conexões de curto alcance(Bluetooth, Wi-Fi, NFC)

Integração com os serviços do BlackBerry 10

Para qualificar seu app no programa Built for BlackBerry, ele precisa conter pelo menos uma integração com os serviços do BlackBerry 10, são eles:

Serviço de pagamento, a plataforma BlackBerry 10 fornece este recurso para aumentar os lucros de seu aplicativo, onde é possível implementar um sistema de cobrança compatível com o seu app, exemplo, uma assinatura anual para conteúdo especial, pacote de serviços extras, versão premium de seu app sem publicidade.

Plataforma Social BBM, os possibilidades de integração com o BBM são inúmeras, com a API é possível, acessar contatos, perfis de usuários, bate-papo e compartilhamento de arquivos.

Serviço de publicidade, este serviço da BlackBerry é uma ótima forma de obter receita para a sua aplicação.

Serviço de Analytics, é fornecido gratuitamente pela Webtrends é uma ótima ferramenta de analise para melhoria do seu app.

Locate Service, ajuda a fornecer aos clientes a capacidade de informações sobre a sua localização, mesmo com a ausência de GPS, ótimo recurso que consome menos bateria comparado ao GPS.

Serviços de mapa, orientar o usuário sobre os seus arredores, destacar pontos de interesse.

Push notification, oferece uma maneira eficiente e confiável de enviar notificações ao usuário. Também permite a sua aplicação processar alertas em segundo plano. Cuidado na utilização desse recurso para não aborrecer o usuário.

Invocation Framework, permite que sua aplicação invoque outra aplicação para agilizar uma tarefa específica, exemplo, chamar o browser para abrir um site web ou facebook para compartilhar um conteúdo específico.

NFC, é elemento chave para comunicação entre outras plataformas que suportam a tecnologia, permite a troca de dados através de uma aproximação dos aparelhos.

Segurança

Questões de segurança são simples e diretas, Não prejudique o cliente. São listados 4 pontos:
1 – Não transmita as senhas em texto puro.
2 – Não faça transações monetárias desconhecidas.
3 – Não utilizar os dados de seu usuário de forma maliciosa.
4 – Fornecer uma política de privacidade.

Idiomas

Infelizmente o Português não está elegível para o Built for BlackBerry, caso queria submeter sua aplicação para o programa ela deve conter um dos idiomas abaixo:

  • Inglês
  • Francês
  • Italiano
  • Alemão
  • Espanhol

*No caso de um app em português ela precisa ter duas versões uma em inglês e outra em português.

Games

Alguns pontos listados acima não são obrigatório para games, por passar uma avaliação mais subjetiva, além disso precisa atender os seguintes critérios:

Game Engine, seu game der ser desenvolvido do forma nativa ou utilizar uma engine como, Gameplay, Unity, marmalade, Shiva ou Cocos2d-x. No caso de utilização de uma egine proprietária, mais testes para avaliação de qualidade serão realizados.

Análise por avaliação na loja, seu aplicativo precisa ter pelo menos de 4 a 5 estrelas em sua avaliação na BlackBerry World.

Fechamos aqui todos os pontos analizados para o desenvolvedor submeter sua aplicação para o programa Built for BlackBerry. O manager Alexandre Cisneiros já tinha feito um post anteriormente sobre o Built for BlackBerry sobre um projeto modelo que foi adicionado o github da blackberry:

http://localhost/blackberrydeveloper/categorias/html5/quer-criar-apps-built-for-blackberry-com-html5-comece-por-aqui/

No youtube oficial da BlackBerry temos alguns vídeos do JAM America sobre integração de serviços :

Temos o vídeo da palestra do Demian sobre questões de UI/UX para o programa:

Esse vídeo dá dicas para ter seu app aprovado no programa: