Continuando nossa série de desenvolvimento de um formulário HTML para dispositivos móveis, hoje nós iremos ir mais a fundo nas questões relativas às singularidades de cada dispositivo, tentaremos otimizar nosso formulário para que ele seja bem visualizado em diversos aparelhos com uma boa aparência. Também iremos considerar que os aplicativos para dispositivos móveis podem ser visualizados em modo retrato ou paisagem e isso afeta a exibição dos mesmos. Para você que chegou até este artigo mas ainda não leu nossos outros artigos desta série, recomendo que acesse primeiro estes outros artigos para que tenham mais embasamento para o decorrer deste artigo. No primeiro artigo consideramos as tecnologias que seriam utilizadas e também os primeiros passos para se programar com essas tecnologias, já no segundo fizemos a programação em geral dos estilos e deixamos o formulário com uma ótima aparência. Seguem os artigos:

TRATANDO OS ESTILOS PARA DIFERENTES TAMANHOS DE TELA

formulário para dispositivos móveis

Quando tratamos de desenvolvimento para dispositivos móveis estamos dispostos a desenvolver para uma série de sistemas operacionais e também diversos tamanhos de tela, seria adequado definir a aplicação de forma que fosse perfeitamente visualizada em cada aparelho, isso levaria a um trabalho muito grande no desenvolvimento, para melhorar esta situação, definimos apenas algumas opções, definimos um tamanho de tela que definimos como um marco, ou seja, definiremos um CSS para até um tamanho de tela e outro para esse tamanho de tela em diante. Geralmente esse valor é o de 480px, que é um valor razoável, ou seja, fica bom em dispositivos pequenos que geralmente possuem uma resolução de 320px e em médios que possuem uma média de 480px de resolução.

Com isso teremos a seguinte situação, quando a tela for menor que 480px, o CSS small.css será carregado,caso contrário a folha de estilo responsável será o large.css, isso é feito da seguinte forma:

<link media="only screen and (max-device-width: 480px)" href="small.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 481px)" href="large.css" type="text/css" rel="stylesheet" />

Dica: Há uma boa prática relacionada ao uso de folhas de estilos personalizadas em qualquer situação, veja todos os elementos que são gerais, ou seja, cores de títulos, margens, muitos aspectos serão utilizados em todas as situações e deixe dentro das folhas apenas os tamanhos relativos a cada tamanho de tela. Esta técnica já é bastante utilizada para a programação de templates, quando se deseja ter a opção de cores, ou seja, é definido todos os CSS em comum e colocados em uma única folha de estilo, chamando as folhas de estilos das cores de acordo com a preferência do usuário ou web designer.

COMO TRATAR AS MUDANÇAS DE ORIENTAÇÕES DE TELA

Além dos diferentes tipos de dispositivos e seus tamanhos de tela, os aparelhos móveis possuem um fator que não encontramos em um desktop, a mudança de orientação. Quando manuseamos uma aplicação para celular ou tablet (pelo menos as boas), podemos perceber que ela responde bem tanto em um modo como em outro e é assim que nossa aplicação deve responder. Como não estamos a desenvolver aplicativos nativos, ou seja, utilizando uma linguagem de programação própria para Android, estaremos utilizando um navegador web para exibir os resultados e tudo o que temos são linguagens que rodam no cliente como HTML, Jquery para interagir com o usuário, neste aspecto utilizaremos fantásticas funções do JQuery que ajudam e muito quando o assunto é a especificidade da tela.

Apesar de podermos utilizar valores não absolutos para definir o tamanho dos elementos de nossa aplicação é sempre bom ter em mãos a informação da mudança de orientação do dispositivo para ajustar um ou outro elemento que possa ser exibido ou não de acordo com o modo que a aplicação está sendo visualizada. Peço que se você ainda não possui conhecimentos quanto ao uso de Jquery, um fantástico framework javascript, pesquise um pouco sobre o assunto na web, para que você possa entender com mais clareza o que será estudado a partir deste momento além de lhe ajudar em disversos outros aspectos relativos ao desenvolvimento web tanto para computadores quanto para dispositivos móveis. Para deixar sua vida um pouco mais fácil, deixarei um artigo de introdução ao Jquery, publicado aqui mesmo no Escola Criatividade:

Vamos então ao HTML necessário! Crie um arquivo chamado orientacao.html e coloque este conteúdo no mesmo.

<!DOCTYPE html>
<html>
	<head>
		<title>Orientação de Tela</title>
		<meta name="viewport" content="width = device-width; initial-scale=1.0; maximun-scale=1.0; user-scalable=0;" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="orientacao.js"></script>
	</head>
	<body>
		<h1>Orientação da Tela</h1>
		<ul id="detalhes">
			<li>Tipo: <span id="tipo"></span></li>
			<li>Largura: <span id="largura"></span></li>
			<li>Altura: <span id="altura"></span></li>
			<li>Orientação: <span id="orientacao"></span></li>
			<li>Orientação detectada: <span id="orientacao-detectada"></span></li>
			<li>Classe de rotação: <span id="rotacao"></span></li>
		</ul>
	</body>
</html>

Depois do HTML vamos então ao código javascript que fará toda a “mágica” relacionada a detecção do tamanho de tela e orientação do dispositivo, crie um arquivo chamado orientacao.js e coloque o seguinte conteúdo no mesmo.

/**
 * @author Jair Rebello
 * Arquivo: orientacao.js
 */

$(document).ready(function (){
	var detect = "onorientationchange" in window;
	var orientTimer = 0;

	var ROTATION_CLASSES = {
		"0" : "none",
		"90" : "right",
		"-90" : "left",
		"180": "flipped"
	};
	$(window).bind(detect ? "orientationchange" : "resize", function(evt) {
		clearTimeout(orientTimer);
		orientTimer = setTimeout( function(){
			$("#tipo").html("Evento chamado: " + evt.type);
			$("#orientacao").html(window.orientation);
			$("#largura").html(window.innerWidth);
			$("#altura").html(window.innerHeight);

			var aspect = 1;
			if (window.innerHeight !== 0){
				aspect = window.innerWidth / window.innerHeight;
			}
			var orientation = aspect <= 1 ? "retrato" : "paisagem";
			var rotationText = null;
			rotationText = ROTATION_CLASSES[window.orientation.toString()];
			$("#orientacao-detectada").html(orientation);
			$("#rotacao").html(rotationText);
		}, 500);
	});
});

Com o código que já produzimos temos o seguinte resultado:

Podemos perceber que a cada vez que o dispositivo muda de orientação, um método javascript é automaticamente chamado e atualiza as informações de nossa listagem. Assim como atualizamos os valores podíamos também realizar a troca de um CSS ou mesmo aumentar e diminuir elementos diretamente através de Jquery.

ENTENDENDO O CÓDIGO JQUERY

A primeira vista este código pode parecer um tanto quanto complicado, afinal ele, definitivamente, não é utilizado em desenvolvimento convencional, ou seja, para computadores. Estes códigos são utilizados sobretudo para dar uma melhor aparência quando as páginas são visualizadas em dispositivos móveis.

A primeira linha de código, de fato, detecta se o navegador do dispositivo suporta o reconhecimento de mudança de orientação de tela, sem isso não será possível realizar o restante das instruções.

var detect = "onorientationchange" in window;

Em seguinda iremos criar um método para que seja chamado automaticamente a cada vez que o usuário mudar a orientação do dispositivo ou mesmo haja algum redimensionamento na tela:

$(window).bind(detect ? "orientationchange" : "resize", function(evt) {
...
});

Os métodos orientationchange e resize são métodos que são acionados muito rapidamente, já que a tela vai aumentando aos poucos até chegar ao ponto que o usuário deseja e a orientação da tela pode ser alterada por seguidas vezes, isso faria com que o método que trata estas mudanças fosse executado muitas vezes causando uma sobrecarga no dispositivo. Para isso fizemos com que o método fosse executado apenas alguns milissegundos após a última mudança no dispositivo, com isso asseguramos que apenas será executado quando o usuário chegar ao ponto que deseja, neste exemplo incluímos o tempo de 500 milissegundos. Perceba que para isso acontecer toda vez que algum redimensionamento ou mudança de orientação é feita zeramos o tempo e o método espera os 500 milissegundos.

clearTimeout(orientTimer);
orientTimer = setTimeout( function(){
    ...
}, 500);

Com isso estamos preparado para realizar a detecção da orientação, bem como do tamanho da tela do dispositivo. Nas primeiras instruções pegamos os valores de largura e altura assim como a orientação, neste caso a orientação virá com os valores {0, 90, -90 e 180}. Se a tela estiver em retrato o valor virá {0} se estiver em modo paisagem em sentido horário retornará o valor de {90} e assim por diante. Também preenchemos a página com o valor do método que está sendo chamado se é o método de orientação de tela ou o de redimensionamento.

$("#tipo").html("Evento chamado: " + evt.type);
$("#orientacao").html(window.orientation);
$("#largura").html(window.innerWidth);
$("#altura").html(window.innerHeight);

Depois de determinar os tamanhos da tela e também a orientação, iremos definir se a tela do dispositivo está em modo paisagem ou retrato, isto é definido dividindo o valor da largura pela altura se a largura for menor que a altura significa que a tela está em modo retrato e se for maior, que está em modo paisagem, simples assim.

var aspect = 1;
if (window.innerHeight !== 0){
   aspect = window.innerWidth / window.innerHeight;
}
var orientation = aspect <= 1 ? "retrato" : "paisagem";

Agora nos resta apenas colocar em tela o valor obtido da orientação:

var rotationText = null;
rotationText = ROTATION_CLASSES[window.orientation.toString()];
$("#orientacao-detectada").html(orientation);
$("#rotacao").html(rotationText);

CONCLUSÃO

Neste artigo pudemos verificar toda a lógica necessária para realizar a detecção dos tamanhos de tela, bem como a orientação que o dispositivo se encontra. Com estes códigos em mão podemos estilizar nosso formulário ou qualquer outra página HTML, para que a mesma se comporte de forma diferente de acordo com a orientação da tela. Mesmo não sendo uma prática tão comum também podemos utilizar estes valores para alterar os estilos diretamente pelo Jquery, particulamente prefiro sempre utilizar os atributos de metatags, disponíveis no HTML como o fizemos neste artigo.

No próximo e último artigo desta série iremos realizar a programação de toda a regra de validação do formulário, para isso utilizaremos mais uma vez o Jquery, pois com ele podemos escrever bem menos código e conseguir um bom resultado, Até já!

Abraços,

 

Autor: Jair Rebello

Blog do Autor | Artigos do Autor:

Analista de Sistemas, empreendedor e blogueiro que dedica parte de seu tempo para a partilha de material de grande qualidade relacionados a Wordpress, SEO, Tableless, JQuery, PHP, Android e outras tecnologias mais. Pode me encontrar no Escola Sites ou O Android.

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Matheus Ps
    3 de fevereiro de 2013

    Muito bom, parabéns!
    Apenas uma coisa:
    O método JQuery .bind está ultrapassado, e agora é recomendado o método .on …

    No mais, ótimo!



  2. Francisco
    19 de setembro de 2013

    Olá Jair Rebello parabens pelo blog está excelente.

    Gostaria de saber se voce pode me ajudar.

    Estou desenvolvendo um sistema em PHP para um Lava Rapido.

    E criei dentro de um form um list menu e essa lista veio de uma base de dados MySQL.

    Eu consigo quando escolha algo da lista marcar o preço em outro campo do form, se escolher outro item da mesma lista não troca.

    Outra coisa, no campo valor, acessando o PHP pelo Tablet tem como deixar pra mostrar o teclado numerico apenas e nao o teclado inteiro.

    Pois tem paginas que quando clica no campo numerico só aparece os numeros pra digitar.

    Não sou de ficar perguntando a toa, mas essa questao do list menu, já faz uns 3 dias que estou procurando bastante e tentando resolver.



  3. Michel Campillo
    22 de setembro de 2013

    Adaptar os tamanhos de tela em função do tipo de aparelhos móveis é um quebra-cabeça bem complicado.



  4. Rafael Almeida
    21 de outubro de 2013

    O HTML5 trouxe tanta coisa nova… Puxa vida, algumas como o type email são tão obvias… Porque nós tivemos que esperar tanto?



  5. Almeida
    15 de fevereiro de 2015

    Muito bom o artigo. Embora codar não seja uma atividade tão simples para iniciantes, mesmo assim o seu tutorial consegue ajudar bastante na compreensão e utilidade dos códigos.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz