No primeiro artigo desta série iniciamos o desenvolvimento de um formulário HTML totalmente adaptado para ser bem visualizado em dispositivos móveis. Neste artigo podemos conferir tudo o que é necessário para se ter um ambiente propício para este desenvolvimento bem como testá-lo. Também iniciamos com o esclarecimento de algumas tags importantes que irão ser vistas durante toda a série. Neste artigo iremos inserir os elementos e também fazer a estilização para que o aplicativo tenha um bom visual e também seja totalmente voltado para a visualização mobile. Acaso ainda não tenha acessado, recomendo fortemente que acesse o artigo Construindo um formulário HTML para dispositivos móveis (Parte I) para que não reste nenhuma dúvida quanto aos aspectos relacionados ao primeiro artigo.

ADICIONAR ELEMENTOS HTML AO FORMULÁRIO

Tecnicamente, não há nenhuma diferença entre os elementos utilizados para a boa visualização em dispositivos móveis se compararmos ao desenvolvimento tradicional, para computadores. Apenas alguns pormenores são adicionados para que o usuário não tenha qualquer dificuldade na hora de acessar o seu aplicativo. Adicione o seguinte conteúdo ao arquivo index.html e após iremos explicá-lo detalhadamente.

<html>
    <head>
    	<meta name="viewport" content="height= device-height; width: device-width; user-scalable=0;" />
        <meta charset="UTF-8" />
        <title>Aplicativo Web para Dispositivos móveis</title>
    </head>
    <body onload="window.scrollTo(0, 1);">
        <h1>Adicionar Evento</h1>
		<form>
			<div>
				<label for="nome-evento"> Nome do Evento: </label> <br />
				<input type="text" name="evento[nome]" id="nome-evento" />
			</div>
			<div>
				<label for="data-evento"> Data do Evento: </label> <br />
				<input type="text" name="evento[data]" id="data-evento" />
			</div>
			<div>
				<label for="descricao-evento"> Descrição do Evento: </label> <br />
				<input type="text" name="evento[descricao]" id="descricao-evento" />
			</div>
			<input type="submit" name="Salvar" value="Salvar" />
		</form>
    </body>
</html>

adicionar evento

No código acima temos a criação de um formulário básico para o cadastro de um novo evento, basicamente temos a criação de 3 campos sendo nome, data e descrição de um evento e depois o botão de salvar. Algo bem simples e muito semelhante ao que seria aplicado em uma página HTML convencional, perceba que mantemos as tags necessárias para a boa visualização em dispositivos móveis.

Algo que também pode ter incomodado no primeiro exemplo de página que demos é que alguns caracteres não foram apresentados corretamente e para isso utilizamos a tag <meta charset=”UTF-8″ /> com isso o formulário pôde ser bem apresentado e corretamente visto.

PREPARANDO O HTML PARA RECEBER O CSS

É bem verdade que o formulário já está disponível e funcionaria muito bem se já estivéssemos a programar os aspectos para salvar os dados em algum banco de dados, mas é necessário que o nosso formulário tenha um aspecto melhor, visualmente mais bonito e para isso aplicamos regras CSS. Certamente o visual é um dos aspectos mais importantes na interação homem-máquina, isso porque estes aspectos visuais alteram a experiência deste usuário dentro do sistema.

A esta altura até podíamos iniciar a criação das folhas de estilos mas do jeito que está, por hora, nosso formulário não está muito semântico, ou seja, não possui muitas relações entre sim e podemos o melhorar em alguns aspectos a fim de economizar algumas linhas de CSS e também ter um melhor rendimento na renderização, substitua agora o conteúdo do formulário (tudo o que está entre as tags <form></form>, incluindo as tags) por este que é apresentado no bloco de código a seguir:

<form id="evento" onsubmit="return false;">
   <ul>
	<li><input type="text" name="evento[nome]" id="nome-evento" placeholder="Nome do Evento" /></li>
	<li><input type="text" name="evento[data]" id="data-evento" placeholder="Data do Evento"/></li>
	<li><textarea rows="4" name="evento[descricao]" id="descricao-evento" placeholder="Descrição do Evento"></textarea></li>
	<li class="botao-salvar"><input type="submit" name="Salvar" value="Salvar" /></li>
   </ul>
</form>

adicionar evento

Perceba que substituimos uma estrutura toda baseada em divs por uma lista, isso economiza várias linhas de HTML além de fornecer aos navegadores a informação de que aqueles elementos possuem alguma relação entre sim, também será muito mais fácil estilizar todas os elementos do formulário, sem a necessidade de criar classes específicas.

Note também que retiramos por completo as informações de label(rótulos) isso porque utilizamos um atributo que pode ser novo para você o placeholder. Considero o placeholder como uma das novas especificações do HTML 5 mais fantásticas, o resultado que ele traz já era conseguido através de inúmeras linhas de JS e agora é apenas necessário um pequeno atributo nas tags input’s para que a informação seja passada ao usuário. Sem a utilização de label’s o nosso formulário ficou muito mais leve tanto visualmente como fisicamente, ou seja, carregará mais rapidamente. Em um formulário com apenas três campos o ganho pode não ser muito significativo mais em um extenso formulário certamente o ganho de performance será sentido, ainda mais levando em consideração que o usuário estará, provavelmente navegando através de uma rede 3G.

PRINCIPAIS PROPRIEDADES CSS 3

Note que utilizamos muitas definições do CSS 3, certamente o CSS 3 alinhado com o HTML 5 trouxe o que os aplicativos para dispositivos móveis necessitam, uma boa visualização e leveza no carregamento. Se ainda não possui domínio sobre as novas especificações do CSS, considere pesquisa mais sobre, irá perceber que podes acrescentar efeitos visuais incríveis em suas páginas HTML de uma forma muito mais rápida e leve.

Um exemplo bem claro disso são as bordas arredondadas. Quando iniciei minha caminhada pelo desenvolvimento web, era sempre requisitado, seja pelo cliente ou mesmo pelo web design o acrescimento de bordas arredondadas, mas era muito difícil, trabalhoso e no final das contas pesava e muito na página final, isso porque eram utilizadas imagens para chegar a um resultado visual agradável, hoje temos o CSS e com um simples -webkit-border-radius temos bordas arredondadas e um visual muito mais elegante e moderno.

Abaixo listo algumas das principais novas definições CSS.

  • border-radius: De longe a propriedade CSS mais usada, ela é utilizada para a criação de bordas arredondadas, basta definir quantos pixels será este arrendondamento podendo chegar até a um círculo, dependendo da quantidade de pixels utilizados. Utilizando a propriedade convencional, o navegador irá renderizar todas as bordas com o arrendodamento que foi definido, mas se for a necessidade do programados também pode ser definido os quatro cantos separamente como o faremos quando for definir os títulos H1.
  • box-shadow: Assim como as bordas arredondadas, as sombras apenas eram conseguidas através da utilização de imagens fazendo com que as páginas ficassem extremamente pesadas. Neste cenário foi definida a propriedade box-shadow que é usada para aplicar um sombreamento em elementos HTML. Uma variante também muito utilizada é a text-shadow, utilizada em elementos de texto mas que pretende o mesmo resultado.
  • -webkit-appearance: Esta propriedade é usada para informar ao navegador que tipo de controle será usado para aquele elemento, se o valor passado for none como no nosso exemplo a definição será dada pelos “elementos pais”.
  • opacity: Utilizada para aplicar transparências, é muito utilizada para aplicar efeitos hover, quando o utilizador passa o mouse em cima do elemento que o estilo está aplicado, também foi uma evolução incrível visto que para conseguir o mesmo efeito eram necessárias linhas e mais linhas de JS.
  • -webkit-transform: Utilizada para criar “transformações” em elementos HTML, a principal delas é a rotação quando definido o valor rotate(x) nesta propriedade o elemento irá rotacionar, criando um visual diferenciado e incrível, antes apenas alcançado através de JS e/ou imagens.
Com estas pequenas definições, podemos concluir que o CSS 3 veio para auxiliar e muito no desenvolvimento web, fazendo com que as especificações ficassem mais simples e com um resultado ainda melhor.

ESTILIZAÇÃO DO FORMULÁRIO HTML

Agora que temos o formulário HTML bem preparado vamos criar um novo arquivo o style.css que irá guardar as definições CSS, isso fará com que nosso formulário tenha uma melhor visualização. Depois de criar o arquivo acrescente o seguinte conteúdo:

body{
	margin: 0px;
	min-height: 480px;
	font-family: arial;
}
form ul{
	margin: 0px;
	padding: 5px;
	list-style-type: none;
}
form ul li{
	margin: 0 0 4px 0;
	-webkit-border-radius: 4px;
	border: 1px solid #555;
	padding: 5px;
}
form ul li.botao-salvar{
	-webkit-border-radius: 0px;
	border: 0;
	padding: 0px;
}
input, textarea{
	-webkit-appearance: none;
	border: 0;
	width: 99%;
}
input[type=submit]{
	border: 1px solid white;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #f8f8f8), color-stop(1.0, #aaa));
	-webkit-box-shadow: 0 0 4px #333;
	width: 100%;
	padding: 6px;
}

Creio que o resultado até agora do fomulário esteja muito bom. Vamos adiante.

MAIS UM POUCO DE CSS: ESTILIZANDO O CABEÇALHO

O cabeçalho de um aplicativo, onde geralmente é definido o título daquela página é algo importante, já que, via de regra, é a primeira informação vista pelo usuário, então que tal dar aos cabeçalhos de nossos formulários uma melhor apresentação? Acrescente ao arquivo style.css a seguinte definição CSS:

h1{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #666), color-stop(0.5, #3a3a3a));
	-webkit-box-shadow: 0 2px 1px #aaa;
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	font-size: 18px;
	color: white;
	padding: 10px 8px;
	margin: 0 6px 6px 6px;
	text-align: center;
}

adicionar evento

O resultado ficou incrivelmente bom não acha?

CONCLUSÃO

Neste artigo podemos aprender como definir corretamente formulários HTML para dispositivos móveis, também aprendemos as definições CSS necessárias para uma boa estilização destes formulários, o que certamente fez com que o formulário tivesse um incrível visual se assemelhando a um aplicativo nativo do Android.

No próximo artigo iremos definir os códigos necessários para que o nosso aplicativo tenha uma melhor visualização quanto a mudança de orientação nos dispositivos móveis, isso porque nos dispositivos móveis temos um “problema” a mais se compararmos aos computadores convecionais, que é esta mudança de orientação, o usuário pode tanto querer utilizar o aplicativo posicionando seu dispositivo na vertical como na horizontal e é importante que o aplicativo responda corretamente a esta disposição do dispositivo, não obrigado o utilizador a manusear o aplicativo apenas de uma única forma. Até lá!

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. bacana
    3 de maio de 2015

    simples mas útil!!!


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