Categorias
HTML5 Mobile Dev Group São Paulo

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

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: