Aplicativos móveis com HTML5 Preparando o ambiente de desenvolvimento O código HTML pode ser escrito em qualquer editor de texto comum. Você pode utilizar o editor padrão do seu sistema operacional (Bloco de notas, Gedit, TextEdit, etc). Neste tutorial iremos utilizar o Sublime Text2. Diferente do bloco de notas, o Sublime reconhece a sintaxe padrão do HTML e adiciona cores ao código facilitando sua visualização. Para baixar o Sublime, acesse: http://www.sublimetext.com/2 Ao invés de salvar o conteúdo no formato padrão para texto (extensão.txt), o código HTML é salvo com a extensão.html. Depois de salvo, o documento pode ser aberto em qualquer navegador Web. Para visualizar como o documento HTML é renderizado em um navegador móvel, é possível utilizar simuladores. Alguns exemplos neste tutorial serão apresentados com o emulador do Opera. Para baixar o Opera Mobile Classic Emulator, acesse: http://www.opera.com/pt-br/developer/mobile-emulator
Programação com HTML O aplicativo que iremos fazer como exemplo neste tutorial é uma adaptação do aplicativo Álcool ou Gasolina?. A ideia é digitar o valor da gasolina e do álcool ao chegar num posto e, dado os valores de consumo do seu automóvel, o programa te ajuda a decidir rapidamente com qual dos dois abastecer. Conteúdo (HTML) Vamos começar com o código HTML. Abra seu navegador e inicie criando a estrutura básica do documento HTML: <!DOCTYPE html> <html lang="pt-br"> <head></head> <body></body> </html> Salve o documento como index.html em um diretório de sua preferência. Se você abrir esse documento em um navegador, você perceberá que não há nenhum conteúdo ainda. Vamos acrescentar alguns elementos no cabeçalho do documento agora. Adicione a codificação UTF-8 ao documento e o título da página, como no código a seguir: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title> Calculadora Flex </title> </head> <body></body> </html>
Abrindo sua página no navegador novamente, você perceberá que o título adicionado ao documento agora aparecerá no topo da janela e/ou da aba aberta. Vamos continuar adicionando conteúdo ao nosso documento HTML. Agora adicione ao elemento body, o cabeçalho da página com um título e o formulário. Note que além dos elementos do formulário (labels, inputs e button) foram acrescentados elementos div para auxiliar na estruturação e formatação. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title> Calculadora Flex </title> </head> <body> <header> <h1> Calculadora Flex </h1> </header> <div class="content" > <form class="form"> <label for="gas_cons">consumo com Gasolina:</label> <input type="number" name="gas_cons" id="gas_cons"> <label for="eta_cons">consumo com Etanol:</label> <input type="number" name="eta_cons" id="eta_cons"> <label for="gas_price">gasolina:</label> <input type="number" name="gas_price" id="gas_price" placeholder="preço da Gasolina"> <label>etanol:</label> <input type="number" name="eta_price" id="eta_price" placeholder="preço do Etanol"> </form> <button type="button">gasolina ou Etanol?</button> </body> </html>
Abrindo seu documento no navegador web ou no simulador do Opera, você verá todo o conteúdo da nossa aplicação. Para deixar ele com a formatação da nossa aplicação final nós precisaremos adicionar estilo ao documento. Essa parte é feita em um documento CSS. Aplicação sem formatação Apresentação (CSS) No documento HTML deve estar contido apenas o conteúdo da aplicação. Toda a formatação (tipo de fonte, cores, margens, etc) devem estar em uma folha de estilos. O CSS (Cascading Style Sheets Folhas de Estilo em Cascata) pode ser adicionado dentro do documento HTML ou em um documento externo. A melhor abordagem é criar um documento externo e referencia-lo no cabeçalho do documento HTML. Abra uma nova página no seu editor de texto e digite as seguintes regras: body { background: #e7e7e7; font-size: 1em; margin: 10px; font-family: Verdana; As regras acima definem a formatação do elemento body do HTML. Nelas nós declaramos a cor de fundo da página, o tamanho da fonte, a margem de todo o corpo do documento e o tipo de fonte de todo o texto da página. Essa é nossa primeira formatação. Salve essa página como style.css no mesmo diretório do arquivo index.html. Agora volte ao código HTML no index.html e adicione a referência a nossa folha de estilos no cabeçalho, como descrito no código abaixo:
<head> <meta charset="utf-8"> <title>calculadora Flex</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> Agora já é possível perceber que a nova formatação foi acrescentada ao nosso documento. Vamos acrescentar novas regras no código CSS e deixar nosso documento como nossa aplicação final. De uma só vez iremos formatar nosso título, as caixas de entrada do formulário, as etiquetas do formulário e o botão. h1 { input { font-size: 1.3em; font-weight: bold; text-transform: uppercase; width: 50px;.form label{ display:block; width: 200px; float: left; button{ margin-top: 50px; Agora nossa aplicação está formatada.
Interatividade (Javascript) Para adicionar interatividade à nossa página precisamos utilizar o Javascript. Por exemplo, queremos que nossa aplicação armazene de forma permanente os dados de consumo para que não seja preciso digita-los toda vez que se chegar ao posto. Para fazer isto nós podemos utilizar o recurso de Local Storage introduzido pelo HTML5. Para gravar dados na memória local, utiliza-se o método: localstorage.setitem( <key>, <dado> ); Para resgatar o dado salvo, utiliza-se o método: localstorage.getitem( <key> ); Assim que a nossa aplicação for aberta o valor de consumo armazenado deve ser recuperado na memória e adicionado à caixa de entrada corresponde no formulário. Se a memória estiver vazia estamos adicionando os valores 1.3 para gasolina e 1 para álcool. Esses valores são arbitrários e podem ser mudados. Abra uma nova página em seu editor de texto e adicione o código abaixo: window.onload = LoadLocalData(); function LoadLocalData(){ var gas_con = localstorage.getitem('calcflex_gas_con'); var eta_con = localstorage.getitem('calcflex_eta_con'); Quando o documento for aberto será executada a função LoadLocalData() if (gas_con == null) { localstorage.setitem('calcflex_gas_con', '1.3'); document.getelementbyid("gas_cons").value="1.3"; document.getelementbyid("gas_cons").value = localstorage.getitem('calcflex_gas_con'); if (eta_con == null) { localstorage.setitem('calcflex_eta_con', '1'); document.getelementbyid("eta_cons").value="1"; document.getelementbyid("eta_cons").value = localstorage.getitem('calcflex_eta_con'); function CalcFlex(){ var gas_con = localstorage.getitem('calcflex_gas_con'); var eta_con = localstorage.getitem('calcflex_eta_con'); var gas_price = document.getelementbyid("gas_price").value; var eta_price = document.getelementbyid("eta_price").value;
effic_dif = gas_con / eta_con; price_dif = gas_price / eta_price; if (effic_dif > price_dif){ alert('abasteça com Gasolina'); alert('abasteça com Etanol'); document.queryselector('#gas_cons').addeventlistener('keyup',function(){ localstorage.setitem('calcflex_gas_con', this.value);, false); document.queryselector('#eta_cons').addeventlistener('keyup',function(){ localstorage.setitem('calcflex_eta_con', this.value);, false); Salve este novo documento com o nome lstorage.js no mesmo diretório dos seus arquivos index.html e style.css. Para acessá-lo no seu documento HTML, volte ao index.html e adicione a referência ao novo documento javascript. Carregar o arquivo javascript depois de haver carregado o conteúdo HTML é uma boa prática de programação Web. Logo, acrescentaremos a referência ao JS logo após o elemento body:... </body> <script src="lstorage.js"></script> </html> Adicione também a chamada à função CalcFlex() no botão: <button onclick="calcflex()" type="button">gasolina ou Etanol?</button> Agora a aplicação está completa! Você pode executá-la em seu navegador web, no simulador ou mesmo em seu aparelho celular. Basta carregar o diretório em seu aparelho ou em um servidor online e abrir o arquivo index.html em um navegador nativo. Aplicação vista no navegador Firefox em um smartphone Aplicação vista no navegador Chrome em um desktop
Caso você tenha se perdido em algum momento, vamos recapitular como ficaram nossos Index.html arquivos finais. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>calculadora Flex</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <header> <h1>calculadora Flex</h1> </header> <div class="content" > <form class="form"> <label for="gas_cons">consumo com Gasolina:</label> <input type="number" name="gas_cons" id="gas_cons"> <label for="eta_cons">consumo com Etanol:</label> <input type="number" name="eta_cons" id="eta_cons"> <label for="gas_price">gasolina:</label> <input type="number" name="gas_price" id="gas_price" placeholder="preço da Gasolina"> <label>etanol:</label> <input type="number" name="eta_price" id="eta_price" placeholder="preço do Etanol"> </form> <button onclick="calcflex()" type="button">gasolina ou Etanol?</button> </body> <script src="lstorage.js"></script> </html>
style.css body { h1 { background: #e7e7e7; font-size: 1em; margin: 10px; font-family: Verdana; font-size: 1.3em; font-weight: bold; text-transform: uppercase; input { width: 50px;.form label{ display:block; width: 200px; float: left; button{ margin-top: 50px; lstorage.js window.onload = LoadLocalData(); function LoadLocalData(){ var gas_con = localstorage.getitem('calcflex_gas_con'); var eta_con = localstorage.getitem('calcflex_eta_con'); if (gas_con == null) { localstorage.setitem('calcflex_gas_con', '1.3'); document.getelementbyid("gas_cons").value="1.3"; document.getelementbyid("gas_cons").value = localstorage.getitem('calcflex_gas_con'); if (eta_con == null) { localstorage.setitem('calcflex_eta_con', '1'); document.getelementbyid("eta_cons").value="1";
document.getelementbyid("eta_cons").value = localstorage.getitem('calcflex_eta_con'); function CalcFlex(){ var gas_con = localstorage.getitem('calcflex_gas_con'); var eta_con = localstorage.getitem('calcflex_eta_con'); var gas_price = document.getelementbyid("gas_price").value; var eta_price = document.getelementbyid("eta_price").value; effic_dif = gas_con / eta_con; price_dif = gas_price / eta_price; if (effic_dif > price_dif){ alert('abasteça com Gasolina'); alert('abasteça com Etanol'); document.queryselector('#gas_cons').addeventlistener('keyup',function( ){ localstorage.setitem('calcflex_gas_con', this.value);, false); document.queryselector('#eta_cons').addeventlistener('keyup',function( ){ localstorage.setitem('calcflex_eta_con', this.value);, false);