Frameworks para interfaces móveis

Tamanho: px

Começar a partir da página:

Download "Frameworks para interfaces móveis"

Angélica Rijo Azenha
5 Há anos
Visualizações:

Para obter o Ratchet, é necessário acessar a página http://goratchet.com/ e realizar seu download: Extraia os arquivos do Ratchet em um diretório.

1 Frameworks para interfaces móveis Vamos agora incrementar o projeto do nosso aplicativo em HTML5 com um framework para interfaces móveis. Nesse tutorial usaremos o Ratchet que é um framework gratuito para prototipação de interfaces. Para obter o Ratchet, é necessário acessar a página e realizar seu download: Extraia os arquivos do Ratchet em um diretório. Você perceberá que vários arquivos acompanham o framework (arquivos de exemplo, arquivos do Github, etc). Estamos interessados apenas no conteúdo do diretório dist por enquanto. Copie este diretório ou seu conteúdo e o cole no diretório da sua aplicação HTML5.

2 Agora abra o arquivo index.html em um editor de texto e adicione a referência ao Ratchet em seu cabeçalho. Adicione ao elemento head os links contendo o caminho para os <link rel="stylesheet" href="style.css" type="text/css" /> arquivos CSS e JS do Ratchet: Pronto, os efeitos e a formatação predefinida pelo Ratchet foram adicionados ao seu aplicativo! É importante salientar que a formatação feita através das regras CSS modificam o conteúdo do Hipertexto em cascata. Isso significa que as regras são aplicadas para cada um dos nós do documento segundo a ordem em que são processadas e a hierarquia dos nós. Por esse motivo, as regras de estilo que definimos em nossa folha style.css podem sobrescrever as regras definidas pelo CSS do Ratchet ou serem sobrescritas por ele. Caso seja necessário ou desejável fazer modificações na formatação do Ratchet, você pode adicionar seu style.css abaixo do link do ratchet.css. Desse modo sua formatação será processada por último e então será aplicada corretamente ao documento. Visto que o Ratchet já contém toda a formatação necessária para nossa interface, <link rel="stylesheet" href="style.css" type="text/css" />

3 vamos retirar o link ao style.css da nossa página: Para formatar o conteúdo da sua página basta adicionar as classes predefinidas eplo Ratchet em cada etiqueta HTML. Essas classes podem ser encontradas na documentação do Ratchet e são exemplificadas na página Para formatar nosso título, precisaremos adicionar as classes bar e bar-nav ao nosso elemento header e adicionar também a classe title ao nosso elemento h1. Abra sua aplicação no navegador e perceba o resultado da formatação. Vamos continuar formatando nossa aplicação adicionando outras classes para os <!DOCTYPE html> <html lang="pt-br">... <body> <header class="bar bar-nav"> <h1 class="title"> Calculadora Flex </h1> </header> <div class="content" > <form class="form input-group"> <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> <div class="bar bar-standard bar-footer"> <button class="btn btn-primary btn-block" onclick="calcflex()" type="button">gasolina ou Etanol?</button> </body> </html> demais componentes da nossa interface.

Veja como seu aplicativo ficou: Muitas outras coisas ainda podem ser melhoras. Outros componentes podem ser adicionados para melhorar a usabilidade ou mesmo a aparência do aplicativo.

4 Veja como seu aplicativo ficou: Muitas outras coisas ainda podem ser melhoras. Outros componentes podem ser adicionados para melhorar a usabilidade ou mesmo a aparência do aplicativo. Podemos, por exemplo, dividir a tela em duas diferentes telas. Visto que os valores de consumos de gasolina e álcool não mudam com frequência, poderíamos criar uma nova tela de configuração. Para isto, basta criar um novo documento HTML e criar um link para ele. Criamos um link na barra superior e adicionamos a ele um ícone. Dividimos o conteúdo entre dois documentos: o antigo index.html e um novo config.html. Na página de configurações, mudamos o título e adicionamos um link para voltar à página principal. O resultado pode ser visto abaixo:

5 Se você quiser transformar seu aplicativo HTML em um aplicativo híbrido, é necessário acrescentar algumas configurações ao código. Precisamos nos certificar de que o aplicativo não poderá ser redimensionado. Também precisamos nos certificar de que o arquivo HTML não será executado a partir do navegador, mas sim em tela cheia, como uma aplicação nativa. <meta name="viewport" content="initial-scale=1, maximum-scale=1, userscalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> Por isso adicionamos alguns novos trechos de código no cabeçalho do nosso código-fonte: Seu aplicativo está pronto! Sugestão: Para aprender mais, visite a página do Ratchet, leia sua documentação e experimente os exemplos online. Experimente também outros frameworks e compare as vantagens de cada um.

Documentos relacionados

Aplicativos móveis com HTML5

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