Como Construir um formulário HTML5 para dispositivos móveis (Parte I)
Autor: wallace | Publicado: 2013-04-27T22:07:00-03:00






Há um crescimento gigantesco do número de pessoas que acessam a internet através de seu smartphone ou tablet, isso faz com que cada vez mais estas pessoas busquem por soluções que possam ser utilizadas através do próprio celular ou tablet. Esta nova geração de usuários preferem sistemas ou mesmo sites que possam ser visualizados de forma adequada em seus dispositivos, fazendo com tempo seja economizado e o acesso seja realmente móvel, hoje iremos dar início ao desenvolvimento de um formulário completo em HTML totalmente otimizado e desenvolvido para que seja bem visualizado e totalmente operacionalizável através de um smartphone ou mesmo um tablet.

TECNOLOGIAS UTILIZADAS

Há muitas formas de criar aplicativos que rodem diretamente no smartphone, mas a abordagem de se produzir aplicativos nativos é sempre um pouco complicado, pois você deverá criar um aplicativo para cada plataforma que se deseja executar o aplicativo, caso queira aprender a desenvolver aplicativos nativos para Android, temos uma série completa produzida aqui no Escola Criatividade, alguns destes artigos são listados abaixo:

Introdução ao Desenvolvimento para Android (Parte I)
Desenvolvimento para Android: Conexão e Envio via FTP
Introdução ao Desenvolvimento para Android (Parte IV)


No artigo de hoje iremos aprender uma nova abordagem que é a de construir aplicativos mais genéricos, ou seja, eles poderão ser executados em qualquer plataforma móvel moderna, sem muitas alterações, já que o mesmo utilizará tecnologias que são comuns a estes dispositivos tais como o HTML, CSS e o JavaScript.

Na construção de aplicativos para dispositivos móveis há um grande foco na construção dos códigos JavaScript, sejam eles JQuery ou não, estes códigos JavaScript são o que darão mais vida ao nosso aplicativo, realizando validações, efeitos visuais tornando o aplicativo o mais próximo de um aplicativo nativo. Além das técnicas de desenvolvimento web utilizadas em um aplicativo comum, executado no navegador de um computador temos de encontrar formas de fazer com que nosso aplicativo seja bem interativo e tenha uma ótima qualidade.





PREPARANDO O AMBIENTE DE DESENVOLVIMENTO

Para o desenvolvimento de aplicativos baseados em HTML preparados ou não para dispositivos móveis é recomendado ter um servidor web para tal tarefa, também é possível realizar testes apenas acessando os arquivos diretamente no computador hospedeiro mas esta não é a melhor estratégia. Eu sempre recomendo o uso do pacote WAMP Server pois o mesmo já instala de uma só vez um servidor web, no caso o Apache, o PHP e também o MySQL que usaremos lá na frente para salvar dados em um banco de dados. Se quiser mais detalhes sobre este pacote, escrevi um pouco sobre ele no artigo sobre o Yii Framework e pode ser acessado neste link:&nbsp;PHP Orientado a Objetos: Introdução ao Yii Framework.

Além de ter um servidor web para rodar a sua aplicação também será necessário ter um dispositivo móvel, é preferível que o mesmo seja Android ou rode o iOS da Apple. Este dispositivo deve compartilhar alguma rede com o computador hospedeiro, a melhor forma de se ter um ambiente como este é conectando ambos a uma rede wifi. Depois disso apenas verifique o IP do servidor e insira no navegador do seu dispositivo.

UTILIZANDO HTML EM DISPOSITIVOS MÓVEIS

Se você já está acostumado a desenvolver sites, sistemas web certamente não terá dificuldades para criar aplicativos para dispositivos móveis utilizando o HTML, isso porque praticamente todo o código utilizando em um sistema web convencional será utilizado em um sistema dedicado aos celulares ou tablets, temos apenas de ter alguns detalhes em mente. O primeiro de todos é que um dispositivo móvel não possui, geralmente, toda a largura de banda encontrada em um computador conectado a uma rede local. Muitas vezes estes aplicativo serão executados no trânsito, no trabalho, em um passeio, isso faz com que a preocupação com performance que já deve ocorrer em aplicativos&nbsp;convencionais&nbsp;seja redobrada neste caso.

Para a construção destes aplicativos iremos utilizar o HTML 5, que possui uma linguagem de marcação muito mais limpa fazendo com que o código resultante seja muito mais leve e rápido. Depois disso é necessário adicionar algumas tags especiais que farão toda a diferença no momento da renderização,fazendo com que o dispositivo não trate a página HTML como uma página comum e sim como uma página preparada para ser executada em um dispositivo móvel.

TESTANDO O FUNCIONAMENTO DO AMBIENTE

Antes de continuar o desenvolvimento é muito importante fazer um pequeno teste para vermos se o dispositivo que iremos testar os aplicativos consegue acessar adequadamente o computador hospedeiro. Para isso você terá que saber o IP do computador que irá hospedar a aplicação. Geralmente para acessar a aplicação podemos acessar pelo endereço:&nbsp;http://ip-do-servidor/nome-da-aplicacao. Aproveitando este momento em que iremos testar uma aplicação aproveitaremos para verificar como uma página HTML se comporta se não fizermos as adaptações necessárias para que elas fiquem otimizadas para os mecanismos de busca. Crie uma pasta na raiz de seu servidor web, no caso do wamp é a pasta www, você pode usar qualquer IDE para facilitar o seu desenvolvimento, por aqui usamos o&nbsp;Aptana, que é um fantástico ambiente baseado noEclipse&nbsp;que é bastante otimizado para o desenvolvimento de páginas HTML e folhas de estilo CSS.

Dentro da pasta crie uma página HTML com o nome pagina-nao-otimizada.html e insira o seguinte conteúdo:




1

2

3

4

5

6

7

8

9

10

11

12

13

14

15


&lt;html&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Aplicativo Web para Dispositivos móveis&lt;/title&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Aplicativo Web para Dispositivos móveis&lt;/h1&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.&lt;/p&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;

&lt;/html&gt;






Depois de acessar a página e ter a convicção de que a aplicação está disponível para visualização e testes podemos constatar alguns fatos:

O navegador até conseguiu renderizar a página corretamente, mas o texto está muito pequeno, sendo praticamente impossível ler a primeira vista. Isso acontece porque o navegador do dispositivo assumiu a verdade que esta página foi feita para um computador convencional, desta forma ele apresentou a página de uma maneira muito reduzida para exibir a página com o máximo de conteúdo possível.
Também é possível perceber que há opções de aumentar o zoom e diminuir bem como barra de rolagens que possibilitam navegar entre as páginas.


TAG VIEWPORT

A tag ViewPort é uma tag não normalizada pela W3C mas muito usado quando o assunto é desenvolvimento de aplicativos web para dispositivos móveis, ela foi inicialmente intriduzida pela Apple em seu navegador Safari para que as páginas fosse corretamente exibidas nos dispositivos menores tais como iPhone, iPod e mesmo os iPad’s. Mesmo não sendo uma tag normalizada ela é muito difundida e quase todos os navegadores móveis conseguem reconhecer os valores passados nesta tag, Opera, Mozilla, Chrome e navegadores padrão do Android reconhecem normalmente esta tag. Sem o uso desta tag especificamente o navegador é induzido a acreditar que a página é uma página convencional e irá renderizar da maneira que observamos no exemplo anterior.

Para inserir a tag viewport você fará a inclusão do seguinte código:




1


&lt;meta name="viewport" content="height= device-height; width: device-width; user-scalable=0;" /&gt;






Com a inclusão desta tag estamos informando basicamente 3 dados para o navegador móvel, são elas:

Width: Estamos informando o valor&nbsp;device-width,&nbsp;ou seja, o navegador irá assumir como largura da tela o tamanho da tela do dispositivo, outros valores podem ser informados, absolutos ou não;
Height:&nbsp;Estamos informando o valor&nbsp;device-height,&nbsp;ou seja, o navegador irá assumir como altura da tela o tamanho da tela do dispositivo;
User-scalable:&nbsp;Caso seja marcado com zero não permite ao usuário utilizar escalas na tela, caso o valor seja 1 é permitido.


Depois de incluir a tag viewport, volte a acessar a página através da URL, perceba que o navegador renderizou a página de uma maneira totalmente diferente, agora não é mais necessário realizar qualquer aumentar de zoom, pois o texto está em um tamanho de acordo com o tamanho do dispositivo. Perceba tambem que não é possível aumentar e&nbsp;diminuir&nbsp;o zoom já que definimos o valor da variável responsável por esta opção como sendo false (0).

COM A CARA DE UM APLICATIVO

O objetivo desta série é criar aplicativos web que sejam totalmente preparados para serem executados a partir de dispositivos móveis, pensando nisso não seria nada elegante ter uma barra de endereços sendo mostrada juntamente com nossa página HTML, isso além de não apresentar uma boa estética pode fazer com que o usuário seja levado ao erro, alterando o conteúdo da barra de endereço fazendo com que saia da página que estamos acessando no momento. Para isso iremos inserir o seguinte código na página:





1


&lt;body onload="window.scrollTo(0, 1);"&gt;






Coloque isto no lugar do&nbsp;&lt;body&gt;&nbsp;e torne a visualizar o conteúdo da página, verá que não mais é possível visualizar a barra de endereços.

Neste artigo tivemos a introdução do desenvolvimento web para dispositivos móveis, em breve teremos mais artigos aprofundando este assunto que certamente fará com que você tenha outros olhos quando o assunto é desenvolvimento web, certamente desenvolver nesta perspectiva fará você economizar muito tempo, já que você não terá que aprender muitos dos aspectos da API do Android, até lá!

Abraços,