Categoria: Design

Postagens, notícias e tutoriais sobre design de interação, design gráfico e web design.

Como fazer efeito float label animado com CSS3 puro
O último post sobre como criar um efeito ON/OFF em um checkbox usando CSS3 puro fez muito sucesso. Dessa forma, pensei o que mais poderia ser legal para fazer com CSS3. Analisando um pouco o comportamento do Android, me lembrei de um componente bem interessante que é o input com um label float animado. Basicamente, ao preencher o conteúdo, o label sobe e vai para um pouco acima do input, como no exemplo abaixo:

Telefone

Nome de Usuário

Agora… como fazer?

O segredo está novamente nas pseudoclasses e operadores. Graças as pseudoclasses eu posso definir, com alguns gatilhos, o comportamento de um determinado elemento HTML.

No caso, esse gatilho é o placeholder, então é fundamental que o input possua um placeholder (vazio ou não) para criar o efeito. Pois o que identifica que algo foi preenchido ou não é justamente o placeholder. Sem o placeholder definido, o efeito não funciona. A pseudoclasse referente ao required também é usada em nosso exemplo:
```
<div class="label-float">
  <input type="text" placeholder=" "/>
  <label>Telefone</label>
</div>

<div class="label-float">
  <input type="text" placeholder=" " required/>
  <label>Nome de Usuário</label>
</div>
```
Já para o efeito de transição, usaremos o transition e o comportamento do absolute que, por definição, tem seus eixos referentes ao pai, no caso desse ser relative. Então basta usar o CSS abaixo:
```
.label-float{
  position: relative;
  padding-top: 13px;
}

.label-float input{
  border: 0;
  border-bottom: 2px solid lightgrey;
  outline: none;
  min-width: 180px;
  font-size: 16px;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -webkit-appearance:none;
  border-radius: 0;
}

.label-float input:focus{
  border-bottom: 2px solid #3951b2;
}

.label-float input::placeholder{
  color:transparent;
}

.label-float label{
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 13px;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
}

.label-float input:required:invalid + label{
  color: red;
}
.label-float input:focus:required:invalid{
  border-bottom: 2px solid red;
}
.label-float input:required:invalid + label:before{
  content: '*';
}
.label-float input:focus + label,
.label-float input:not(:placeholder-shown) + label{
  font-size: 13px;
  margin-top: 0;
  color: #3951b2;
}
```
Como sempre, estou disponibilizando o exemplo completo no JsFiddle!

Gostou? Então curta a página no Facebook e compartilhe com os coleguinhas!
17 de dezembro de 2018

Input Checkbox Switch ON / OFF apenas com CSS3

O CSS é o mecanismo utilizado pelos navegadores para informar a estes como deve ser exibido determinado elemento HTML. Desde a versão 3 muitas coisas novas permitiram que a web fosse cada vez bonita e funcional.

Eu estava um pouco cansado do trabalho e para relaxar fiquei pensando em uma solução simples para simular um Switch ON/OFF que pudesse ser aplicado no lugar de um checkbox. E, para isso, usei simplesmente CSS3 e pseudoclasses:

Basicamente, pseudoclasses nos permitem adicionar instruções específicas de acordo com determinados comportamentos ou condições dos elementos HTML. Neste pequeno exemplo, eu usei a pseudoclasse :checked, para verificar se está marcado ou não, e as que adicionam complementos antes e depois do elemento, são as :before e :after, respectivamente.

Mas o que você quer mesmo é o código, então para ficar fácil de você pegar, basta clicar visualizar o exemplo abaixo no JsFiddle:

Agora, se tudo o que você quer é o código puro, segue abaixo:

HTML e CSS

<div class="check-radio">
  <input type="checkbox"/>
</div>

/**
* CSS do componente
**/
.check-radio{
  position: relative;
}

.check-radio input{
  -webkit-appearance: none;
  appearance: none;
  background-color: #eee;
  width: 40px;
  height: 15px;
  border-radius: 10px;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}

.check-radio input:focus{
  outline: none;
  cursor: pointer;
}

.check-radio input:before{
  content: '';
  margin-top: -2.5px;
  display: block;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #333, 0 2px 5px rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  transition: left .3s ease-out;
  -webkit-transition: left .3s ease-out;
}

.check-radio input:after{
  content: 'FF';
  display: block;
  margin-top: -2.5px;
  left: 20px;
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  transition: left .3s ease-out;
  -webkit-transition: left .3s ease-out;
  color: #666;
}

.check-radio input:checked{
  background-color: lime;
}

.check-radio input:checked:before{
  left: 22.5px;
  box-shadow: inset 0 0 0 2px green, 0 2px 5px rgba(0,0,0,.5);
}

.check-radio input:checked:after{
  content: 'N';
  left: 43.5px;
  color: green;
}

Por hoje é só… esse post foi rapidinho… Se gostou, compartilhe e nos siga nas redes sociais. VelhoBit, no Facebook, Twitter e Instagram.

15 de dezembro de 2018

Destacando um Elemento HTML (coachmark): Efeito Spotlight ( com CSS3 e Javascript puro)
Obs. Se você só quer o código pronto, pule para o final do post. Ou acesse o link do JSFiddle.

As vezes precisamos encontrar formas de destacar elementos na tela (coachmark). Isso é muito útil principalmente quando você está tratando de pequenos tutoriais, afim de ajudar os usuários. Convém, também, entregar soluções simples e esteticamente elegantes para que ajudem no relacionamento com a ferramenta.

Faz algum tempo, um cliente meu quis criar um modo tutorial em seu sistema. Esse tutorial não deveria permitir que outras áreas da tela fossem clicadas até que a pessoa confirmasse que compreendeu. Como designer, lembrei que, anos atrás, no Android, a Google usava uma espécie de spotlight, mas não vi nada a respeito para websites. E, também, eu precisava que fosse dinâmico. Então eu resolvi usar meus conhecimentos de CSS3 e Javascript para usar essa ideia. E é disso que eu falarei neste tutorial.

Apesar de eu ter usado originalmente jQuery, para compartilhar com todos, resolvi fazer uma versão com Javascript puro, de forma que você poderá adicionar a qualquer aplicação web que você já tenha.

Criando a Estrutura: HTML e o CSS3

Para criar o efeito, vamos usar uma propriedade interessante do CSS3 chamada clip-path. O clip-path permite que criemos elementos vetoriais que serão usados como máscaras. Já utilizamos essa propriedade em um outro exemplo, no caso, sobre um loader.

Exemplo de uso do clip-path:

Dessa forma, se já não tiver, teu projeto deve possuir um container principal que é pai de todos os elementos, mas abaixo do <body>. Se não houver, o crie, é até uma questão lógica de organização para evitar problemas futuros. Veja um código de exemplo:
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
	</div>
</body>
</html>
```
A div container vai ser justamente o elemento que iremos clippar. Para ajudar em nosso exemplo, vamos criar um form básico dentro do container, ficando assim:
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
		 <div class="form">
		  First name:<br>
		  <input type="text" name="firstname" id="firstname" value="Mickey">
		  <br>		  <br>
		  Last name:
		  <br>
		  <input type="text" name="lastname" id="lastname" value="Mouse">
		  <br><br>
		  <input type="submit" id="submeter" value="Submit">
		  <div class="btn_ajuda">?</div>
		</div> 
	</div>
</body>
</html>
```
Para finalizar nosso HTML, vamos colocar a caixa de mensagens. Repare que no código abaixo a caixa de mensagem vai ter uma div chamada spacer. O objetivo dessa div vai ser adicionar o espaço do elemento referência, para que o código funcione também em dispositivos móveis e ela deverá ficar fora do container da aplicação. Mais à frente isso vai ficar mais bem explicado.
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
		 <div class="form">
		  First name:<br>
		  <input type="text" name="firstname" id="firstname" value="Mickey">
		  <br>		  <br>
		  Last name:
		  <br>
		  <input type="text" name="lastname" id="lastname" value="Mouse">
		  <br><br>
		  <input type="submit" id="submeter" value="Submit">
		  <div class="btn_ajuda">?</div>
		</div> 
	</div>

		
		<div class="mensagem_area" id="mensagemAjuda">
			<div class="spacer"></div>
			<div class="mensagem">
				<h2></h2>
				<p></p>
				<button onclick="ocultarAjuda()">
				  OK, entendi
				</button>
			</div>
		</div>
</body>
</html>
```
Agora que o HTML está pronto, vamos para o CSS inicial. A primeira fase é estabelecer todo comportamento da div que estamos usando como container. Também precisamos adicionar uma cor ao plano de fundo, que vai ser a cor que usaremos como base para a área em lowlight.

A animação ficará a cargo do recurso transition do CSS3. Importante ressaltar que uma animação criada por CSS é mais leve e possui melhor frequência do que uma criada pelo Javascript. Isso porque o navegador tenta usar a renderização da GPU nesses casos. Dessa forma, vamos aplicar o parâmetro transition para aplicar o efeito.
```
body{
		    margin: 0;
		    font-family: sans-serif;
		    background-color: #15d115;
}
		    
.container{
			background-color: white;
			min-width: 100%;
/* Obs. A largura do clip-path, abaixo, está definido
como 3840 de diâmetro, porque ultrapassa
o tamanho do 4K - O clip-path considera o raio.
Posteriormente, você poderá trabalhar com
adição de classes, se você quiser evitar
a definição inicial desse tamanho,
mas é necessário haver uma para poder
ativar a animação.*/
			clip-path: circle(1920px at center);
			-webkit-clip-path: circle(1920px at center);
		    transition: 2s ease-in-out;
		    -webkit-transition: 1s ease-in-out;

		    position: absolute;
		    min-width: 100%;
		    min-height: 100%;
}
```
O parâmetro position como absolute, com suas larguras e alturas mínimas marcados como 100% servirão para emular o comportamento do body. Isso só é necessário porque alguns sistemas costumam ter áreas menores do que a primeira dobra do navegador. Nesse caso, apenas, é necessário aplicar esses três parâmetros.

Já para o CSS do bloco de mensagem, você pode fazer algo do jeito que preferir. Apenas é importante lembrar que esse bloco deverá ficar com position absolute, ou fixed, dependendo de como for sua aplicação, para que possa se encaixar no local correto.
```
.mensagem_area{
		 position: fixed;
		 opacity: 0;
		  pointer-events: none;
		  transition: 2s ease-in-out;
		  -webkit-transition: 1s ease-in-out;
		  color: white;
		    
		  display: flex;
		  justify-content: flex-start;
		  flex-wrap: wrap;
}
.mensagem_area.show{
		    opacity: 1;
		    max-width: 100%;
		    pointer-events: all;
}
.mensagem_area .spacer{
	visibility: hidden;  
}
.mensagem_area .mensagem{
		    width: 250px;
		    padding: 15px;
		    box-sizing: border-box;
 }
.mensagem_area .mensagem h2{
		    font-size: 18px;
		    font-weight: bold;
		    margin: 0;
}
.mensagem_area .mensagem p{
		    font-size: 16px;
}
```
Criando as Funções Javascript

Agora basta que a gente crie as funções de aparecer e desaparecer o spotlight. Originalmente eu havia usado jQuery, pois ele possui soluções rápidas e funcionais como o offset nativo e outerWidth, mas com uma pesquisa rápida conseguir adaptar, apesar do código ter ficado um pouquinho maior.

O código consiste em 4 blocos:
- Capturar largura e posição em relação ao document, do objeto referência (que será passado como parâmetro), fazendo os cálculos apropriados para adição do círculo. Você irá reparar que é usado como base o raio e não o diâmetro, pois é a referência do parâmetro clip-path;
- Adicionar o clip ao container;
- Adicionar os textos da mensagem a partir dos parâmetros passados;
- Aplicar os estilos com os novos parâmetros. O timeout que precede a adição da classe show da mensagem existe para que o texto apareça após a transição do spotlight.
```
function mostrarAjuda(id_obj, titulo, mensagem){
	//Pegar raio e posição
	var raio = document.querySelector('#' + id_obj).offsetWidth / 2;
	var offset = document.querySelector('#' + id_obj).getBoundingClientRect();
		offset.top = offset.top + document.body.scrollTop;
		offset.left = offset.left + document.body.scrollLeft;
	
	//Adicionar clip
	var clip = "circle(" + parseInt(raio).toString() + "px at " + parseInt(offset.left + raio).toString() + "px " + parseInt(offset.top + offset.height/2).toString() + "px)";
	
	var container = document.querySelector('#container');
		container.style.clipPath = clip;
		container.style.webkitClipPath = clip;
		
	//Textos
	document.querySelector("#mensagemAjuda h2").innerHTML = titulo;
	document.querySelector("#mensagemAjuda p").innerHTML = mensagem;
	
	//Estilos
	document.querySelector("#mensagemAjuda .spacer").style.width = parseInt(raio * 2 + offset.left).toString() + "px";
	document.querySelector("#mensagemAjuda .spacer").style.height = parseInt(raio).toString() + "px";
	document.querySelector("#mensagemAjuda").style.top = parseInt(offset.top).toString() + "px";

	setTimeout(function(){
		document.querySelector("#mensagemAjuda").classList.add("show");
	}, 1500);
	
}
```
Por fim, basta adicionar uma função que restaure as configurações originais dos estilos e textos.
```
function ocultarAjuda(){
	//Limpar
	document.querySelector("#mensagemAjuda").classList.remove("show");
	container.style.clipPath = "circle(1920px at center)";
	container.style.webkitClipPath = "circle(1920px at center)";
	setTimeout(function(){
		document.querySelector("#mensagemAjuda h2").innerHTML = "";
		document.querySelector("#mensagemAjuda p").innerHTML = "";
	}, 2000);
}
```
Como sempre, deixei o código completo para você testar ou copiar. No caso, o código está no jsfiddle e você pode visualizar abaixo:

Se você gostou da publicação, curta e compartilhe esta página com o maior número de pessoas. Aproveite e curta nossa página do Facebook.

ATUALIZAÇÃO: Que tal experimentar uma versão com blur, usando o html2canvas? Obs. É meio pesado. Dê preferência a usar em projetos para desktop.
7 de dezembro de 2018
Como Criar Sua Própria Fonte e A Usar Como Ícone?
Quem está estudando para ser designer, precisa estudar um assunto muito importante: Tipografia. E, por muitas vezes, precisa criar a própria família tipográfica, ou seja, como criar fontes. Além disso, podemos usar uma tipografia personalizada como ícones, tornando o site ou o sistema, desenvolvido em HTML5, ainda mais leve e bonito.

Este tutorial visa ajudar você com o processo técnico de converter os símbolos e criar sua própria fonte OTF, TTF, SVG, etc. Também um pequeno resumo de como implementar sua fonte em CSS3 para funcionar como ícone.

Para começar, você vai precisar instalar o Inkscape em seu computador. Baixe a versão mais recente do aplicativo Inkscape. Ele está disponível para Windows, Linux e Mac. Caso você use o MacOSX, será necessário instalar o XQuartz.

Você vai precisar também de algum programa para desenho vetorial, pode usar qualquer um de sua preferência, como o Illustrator, CorelDRAW ou o próprio Inkscape.

Crie seu símbolo para cada caractere

Primeiramente, é necessário criar os glifos. Você pode utilizar o Illustrator ou qualquer outro programa de ilustrações vetoriais. Exporte o arquivo no formato SVG. Você pode, se quiser, colocar todas as ilustrações no mesmo arquivo. Os desenhos não deverão ter contornos, somente preenchimento e devem ser compostos somente de preto.

Anexando Glifos aos Caracteres no Inkscape

No Inkscape, selecione File>New>fontforge_glyph. Essa opção adiciona as predefinições necessárias para criação coerente da família tipografica.

Com o documento criado, importe os glifos (File>Import) criado anteriormente por você. Caso você tenha feito todos os glifos no mesmo arquivo, o Inkscape irá importar todos agrupados na organização que foi salvo.

Quando o arquivo é importado, ele vem agrupado e com algumas configurações que o Inkscape não reconhece corretamente.
Siga os passos abaixo para não haver erros e incompatibilidades:

Selecione o objeto, clique com o botão direito e escolha Ungroup. Faça isso quantas vezes for necessário até o objeto estar totalmente desagrupado;

Ainda com o objeto selecionado, vá no menu Path>Combine;

Em seguida vá no menu Path>Union;

Essas ações são necessárias para que o glifo se torne um unico objeto e possa ser anexado corretamente ao caractere escolhido.

O próximo passo é abrir a tela de edição de fontes. Selecione o menu Text>SVG Font Editor.

Será aberto o painel SVG Font Editor, que permite você criar uma fonte no formato SVG (interpretado pela maioria dos smartphones). A primeira coisa a se fazer é criar um nome e família para a fonte. No painel de edição de fonte, e com a guia GLOBAL SETTINGS ativada, clique no botão New. Em seguida, clique duas vezes no nome que foi gerado para que possa modificar e colocar o nome que você quiser.

Agora, ainda no mesmo painel, abra a guia GLYPH e clique no botão Add Glyph, ele irá criar uma nova linha na tabela Glyph name/Matching string. Você deve dar dois cliques no nome criado para editar o nome. Ao lado, você deve dar dois cliques no espaço vazio (logo abaixo de Matching String) e você descobrirá (sim, está escondido) que você pode editar esse campo. Simplesmente digite a letra a qual você quer assimilar o glifo.

No exemplo a seguir, assimilei o meu glifo de Editar a letra “e” minúscula. Vale salientar que você pode vincular a qualquer caractere que deseja, inclusive caracteres especiais como #,ø,®,†, etc.

Por fim, selecione o objeto (ou grupo) que você quer vincular ao caractere e clique no botão Get curves from selection. Para verificar se foi adicionado corretamente, digite, em Preview Text, o caractere que deseja verificar.

ATENÇÃO: Caso o ícone não apareça no Preview Text corretamente, como aparecer pequeno ou simplesmente não aparecer, você deve repetir os passos acima de Ungroup, Combine e Union do objeto. Provavelmente o objeto não foi preparado corretamente e por isso não relacionou como deveria.

Salve o arquivo normalmente. No formato padrão de SVG do Inkscape.

Transformando a fonte SVG em OTF ou TTF

O arquivo SVG está pronto. Agora precisamos converter para uma fonte usável pelo sistema operacional. Há muitos sites que fazem essa conversão.

O que recomendo que faça a conversão é o FreeFontConverter. Basta importar o seu arquivo SVG, escolher o formato (Aconselho OTF, primeiramente, que tem melhor acabamento) e depois clicar em convert. Ele fará o download automaticamente da fonte.

ATENÇÃO: Caso dê erro durante a conversão, você pode tentar salvar o arquivo em SVG Optmized, no Inskscape.

Você pode ver que a fonte pode ser instalada normalmente no seu sistema operacional.

Usando a fonte personalizada em CSS e usando-a como ícone

Para preparar um pacote com sua fonte personalizada, para ser usada em um site, o site FontSquirrel disponibiliza o WebfontGenerator. Para usá-lo basta enviar a sua fonte em OTF ou TTF, concorde com os termos e gere o kit.

Feito o download, está na hora de incorporamos a fonte no seu CSS. Para isso, basta você copiar as fonts que foram geradas no kit para uma pasta font (ou outra de sua preferência) no seu site e chamar via CSS.
```
@font-face {
    font-family: "minhafonteregular";

    src: url("fonts/minhafonte-webfont.eot");
    src: url("fonts/minhafonte-webfont.eot?#iefix") format("embedded-opentype"),
         url("fonts/minhafonte-webfont.woff") format("woff"),
         url("fonts/minhafonte-webfont.ttf") format("truetype"),
         url("fonts/minhafonte-webfont.svg#minhafonteregular") format("svg");

    font-weight: normal;
    font-style: normal;
}
```
Para usar como ícone em um botão (ou em qualquer outro componente HTML5), basta você usar a opção content, do CSS3, como descrito abaixo:
```
button.editar{
        padding:10px;
}

button.editar:before{
        font-family: "minhafonteregular";
        font-size:36px;
        content:"e";
        -webkit-content:"e";
        -moz-content:"e";
        -o-content:"e";
        -ms-content:"e";
}
```
E basta adicionar a tag Button com a classe determinada:

<button class=”editar”> </button>

ATENÇÃO (iOS): Devido a padrões do iOS, o ícone só vai aparecer se tiver uma cor de fundo (devido ao webkit-appearance), se você quiser, entretanto, usar a cor padrão, utilize o CSS abaixo:

button{
background-color: buttonface;
}

Abaixo, você pode ver o exemplo usado no vídeo (no topo do post), que tem uma forma um pouco diferente de usar.

Qualquer dúvida, deixe um comentário, mande uma mensagem no skype ou por email. Siga @velhobit no Twitter e curta nossa página no Facebook.

Até o próximo Tutorial.
29 de novembro de 2018
Adobe Lightroom CC – O melhor app para tirar fotos com o smartphone

Quando os primeiros celulares com câmera apareceram, eles possuíam sensores simples e baixa qualidade. Com a chegada dos smartphones, a câmera começou a ser uma das características mais exigidas em qualidade pelos consumidores. Porém, as técnicas de pós-processamento e compressão aplicadas nas fotos podem entregar um resultado indesejado ou com uma qualidade aquém do que a câmera pode entregar.

Para resolver esse ponto, diversos apps foram lançados. A Adobe, com conhecimento de causa, resolveu lançar uma versão do Adobe Lightroom CC para smartphones e adicionou a opção de câmera profissional. O Lightroom já é o aplicativo para desktop mais usado por fotógrafos profissionais há anos e agora a versão para mobile e desktop compartilham as mesmas opções (assim como está acontecendo com diversos outros programas da Adobe).

Caso não queira ler o texto, assista o vídeo vertical demonstrando o uso do aplicativo.

O Adobe Lightroom CC está disponível para Android e iOS de forma gratuita. No caso do Android, algumas funções disponíveis estarão disponíveis dependendo do modelo aparelho. Essa distinção do Android acontece por causa da forma com que o app comunica-se com a câmera, obrigando o desenvolvedor a criar algumas soluções específicas por aparelho. Por isso, consulte a página do GooglePlay, caso use Android, para verificar quais dispositivos possuem as funções completas. No caso do iOS, todas as funções estão disponíveis para os dispositivos com ao menos 12Megapixels na câmera.

Câmera

Assim que você abre o app do Adobe Lightroom CC, você verá, no canto inferior direito, a opção de abrir a câmera. Além disso, ele já carrega as fotos mais recentes e álbuns.

De início temos uma câmera comum, com funções comuns da maioria das câmeras digitais, como temporizador e grade. Tirar uma foto com as funções automáticas da câmera já apresentam uma qualidade muito boa em relação aos apps de câmeras normais e até os nativos de alguns smartphones.

A primeira diferença entre as fotos tiradas com a câmera normal e as câmeras dos smartphone é a possibilidade de tirar fotos em DNG. DNG é uma sigla para Digital Negative (Negativo Digital), um formato RAW da Adobe. RAW são formatos de arquivos raiz, ou seja, são as fotos tiradas diretamente pela câmera sem qualquer compressão ou pós-processamento. A vantagem tirar fotos em RAW é que elas são mais ideais para uma edição posterior, pois guardam informações que normalmente são perdidas com a compressão JPG, principalmente quanto a luminosidade. Como nem tudo são flores, esse formato ocupa mais espaço do seu smartphone, então é aconselhável que você use smartphones com ao menos 32GB de espaço interno ou cartão de memória.

Mas atenção, nem todo smartphone Android compatível com o app possui essa opção. Consulte a página do Adobe Lightroom CC, na Google Play Store para mais detalhes.

Para ativar o modo DNG, pressione a sigla (JPG ou DNG) no topo ou lateral do app (dependendo da orientação)

Dentre as opções comuns disponível em todas as áreas da câmera, inclusive no modo automático, vale destacar o Recorte de Layout. Trata-se de uma opção para demarcar com listras todos os pontos da imagem que estão em branco absoluto. Em termos de fotografia, isso é importante para saber onde a foto pode estar “estourando”, indicando áreas muito brancas que não poderão ser editadas posteriormente (pois a diminuição do brilho só a deixaria cinza).

Mas onde o Lightroom se destaca de verdade é no modo PRO. O modo profissional do Adobe Lightroom CC dá opções de exposição, velocidade do obturador, ISO, compensação de cor e, o mais legal, foco manual. Por questão de objetividade, vamos nos concentrar nas funções principais para uma melhor foto em termos de fidelidade, podendo você depois explorar melhor as ferramentas.

O modo de exposição permite você adicionar ou remover luminosidade à imagem. O controle de Exposição está definido pelo botão Exp, no canto inferior ou lateral direita, dependendo da orientação. Basicamente é você deixar a imagem mais clara ou mais escura.

Uma das ferramentas mais importantes é a Velocidade do Obturador, definido pelo botão Sec. A velocidade do Obturar controla o tempo em que o obturador vai ficar aberto para gravar a imagem no sensor. Isso significa que quanto mais tempo aberto, mais luz e, por consequência, mais informação será armazenada.

A velocidade, nessa ferramenta, é definida pela fração de segundo, indo de 1/10000 à 1/4. Quanto mais rápido, menos luz vai entrar, mas você conseguirá pegar imagens onde tem mais movimento (como corridas, eventos esportivos, etc. – use em ambientes claros), e quanto mais lento mais luz vai entrar, o que deixará a foto bem mais nítida, porém você deverá deixar a câmera imóvel – ideal uso de tripé – por mais tempo. A velocidade baixa é excelente para fotos em locais mais escuros (dispensando, muitas vezes, até o flash), natureza morta e objetos que exijam muitos detalhes. Você deverá ajustar essa configuração de acordo com cada caso.

A segunda função mais importante é o Foco Manual, definido pelo ícone [+]. Por padrão o foco está no automático e pode ser definido com o toque na tela, como a câmera nativa. Porém, você poderá controlar o foco manualmente, mesmo com smartphone de apenas uma câmera, e isso dá resultados muito interessantes. Vale salientar que isso é um foco real e não um pós-processamento comum em muitos aparelhos. A linha do foco vai de mais perto (ideal para macros) para mais longe (ideal para imagens em campos abertos), que você pode alternar pelo ponto que você deseja que seja o seu assunto da foto.

Você deve ter reparado que o objeto em foco ficou com um contorno verde. Essa detecção de bordas é fundamental para você entender bem onde está o foco. Diferente de câmeras profissionais, que possuem o visor (Viewfinder) – o buraquinho para colocar o olho – o smartphone é totalmente dependente da tela. Como uma tela possui limitações, as bordas ajudam a ter mais certeza de onde está o foco da imagem.

Lembrando que o resultado final, obviamente, não gravará as linhas de bordas.

O último modo a ser apresentado é o HDR. O High Dynamic Range (HDR) é uma técnica de sobreposição de diversas fotos tiradas em exposições diferentes, que são mescladas para tirar uma foto mais natural.

Quando olhamos para uma parede com uma janela, ou o céu através dos galhos das árvores, nossos olhos e nosso cérebro conseguem interpretar as nuances de luminosidade em cada assunto. A lente, entretanto, não consegue fazer o mesmo, precisando focar a luminosidade a partir de um ponto específico. Quando você alterna a exposição você está justamente modificando o ponto de qual luminosidade o sensor deve se basear.

Para poder usar o modo HDR é importante que o usuário use um tripé ou não se mexa, pois várias fotos serão tiradas em um curto intervalo de tempo, em exposições diferentes. O processamento do HDR ocorre aos poucos, em plano de fundo, pelo aplicativo, de forma que poderá demorar um pouco para a imagem aparecer na biblioteca. Esse processamento consiste na junção inteligente dessas imagens ao ponto que seja ajustado para que os tons fiquem mais fiéis ao olho humano. O Adobe Lightroom CC ainda irá fazer um ajuste automático da imagem, que poderá ser desfeito ou modificado de acordo com a vontade do fotógrafo.

No modo HDR você ainda tem ainda algumas ferramentas, como foco e exposição.

Foto após o processamento do HDR

Ferramentas de Edição

Após tirar a fotografia, você provavelmente irá querer ajustar brilho, contraste, nitidez, cores, etc. O Adobe Lightroom CC mobile traz as mesmas opções que estão incluídas na versão desktop. Para quem é assinante da Adobe, ainda tem algumas opções a mais, mas iremos nos concentrar nas principais opções disponíveis na versão gratuita.

Entretanto, se você possuir um dos planos, a foto será sincronizada com o Adobe Cloud, ficando disponível na versão web ou desktop do Lightroom, podendo você, se for de sua preferência, editar a foto no iPad, Tablet Android ou no computador.

Para iniciar a edição, basta voltar para a biblioteca e escolher a foto que você deseja editar. Lembre-se que imagens em DNG terão um resultado melhor para edição.

Iniciando pelo controle de luminosidade, o usuário poderá editar o brilho, contraste e pontos claros e escuros específicos na imagem. Apenas com uma foto RAW (neste caso, DNG) você vai conseguir realmente clarear uma foto escura. Se você tentar fazer isso com uma foto JPG, por conta da compactação, simplesmente você vai ter um acinzentado e não os tons reais de cores da imagem.

Quanto ao controle de cores, vale uma observação importante. Além de temperatura, matiz e outras opções mais comuns, você vai encontrar a opção de Vibratilidade e a de Saturação.

Enquanto a Saturação define realmente a intensidade da cor, indo de tons de cinza até cores extremamente intensas, a Vibratilidade aumenta a saturação das cores menos saturadas para que fiquem mais próximas as mais saturadas, deixando a imagem mais homogênea. Quando diminuída, por exemplo, pode previnir que a cor de pele fique muito saturada em imagens muito coloridas (como em fotos tiradas em praias).

A qualidade das cores da imagem vai depender, principalmente, no ajuste refinado entre saturação e vibratilidade. A boa escolha desses tons vai resultar em uma imagem de qualidade ou uma imagem com cores berrantes ou desbotadas.

Alta Vibração e menos Saturação

Alta Saturação e menos Vibração

Tons intensos, mas mais homogêneos

O controle de Nitidez é extremamente importante, não apenas pelo que o próprio nome diz (aumentar a nitidez da imagem), como é a área onde se configura o redutor de ruído. Quanto menos luz é captada pelo sensor, mais ruído pode ser causado na imagem. Esse ruído pode atingir toda a composição geral da imagem ou apenas ser variações de cores. Você pode ajustar o redutor de ruído direto nessa ferramenta de Nitidez. Vale lembrar que quanto mais nitidez, mais redução de ruído você deverá usar.

Fotos tiradas com menor tempo de abertura do obturador tende a possuir mais ruídos.

Porém, a nitidez nem sempre é a melhor forma de efetivamente deixar a imagem mais definida. Em uma imagem eletrônica, a nitidez se refere a intensidade do pixel em relação ao pixel mais próximo. Em relação a composição da imagem como um todo, a definição dos objetos devem ser feitas a partir do contraste dos elementos, como em um desenho feito à lápis. A ferramenta Efeitos possui as opções de Claridade e Desembaçar que adicionarão uma definição maior da imagem. Para isso, ela mexerá em pontos específicos dos níveis e contrastes e sua intensidade poderá ser reduzida ou aumentada de acordo com o resultado desejado.

Vale salientar que o ajuste de Claridade aumenta o contraste pela mesma forma que a claridade do sol deixa a sombra mais escura e, por isso, com os elementos mais definidos.

A foto DNG não pode ser compartilhada diretamente e não estará em seu app de fotos. Para exportar a foto, você deverá clicar no ícone de compartilhamento e escolher a opção desejada. Ao salvar no rolo da câmera, o Adobe Lightroom CC irá perguntar se você quer salvar em uma resolução mais leve, para publicar em mídias sociais, ou com a maior resolução possível, o que dependerá da quantidade de megapixels de seu dispositivo.

Concluindo

Tirar fotos com o smartphone, de forma mais profissional, é ideal para quem trabalha com social media, websites, e-commerces e outros ambientes que exijam o compartilhamento rápido digital. Com configurações mais refinadas, é possível chegar a fotografias bem próximas a câmeras profissionais ou, ao menos, suficientes para a maioria dos casos.

O que vimos aqui foram as principais ferramentas, com dicas para melhor qualidade de foto. O ideal é que você pratique, teste, experimente a maior quantidade possível de opções e ferramentas, para chegar no resultado ideal para você.

O Adobe Lightroom CC é gratuito, mas há mais opções disponíveis para quem usa qualquer um dos planos da Adobe.

Dica: Você pode usar uma lente macro simples para tirar foto de animais pequenos, com ajuda do foco manual e da abertura do obturador.

14 de novembro de 2018

Como Selecionar o Item de Uma Tabela HTML

Uma dúvida foi postada no grupo de Design e Programação de nossa página, lá no Facebook, hoje. Essa pergunta era referente a como selecionar de uma linha de uma tabela HTML?

Para tal, basta usar um pouco de Javascript e CSS.

Montando a Tabela

Vamos montar, para testar, uma tabela simples, respeitando a semântica HTML básica. Vamos aproveitar para colocar logo um botão, que vai ser por onde podemos visualizar os dados da linha selecionada:

<table id='minhaTabela'>
     <thead>
          <tr>
               <th>ID</th>
               <th>Nome</th>
               <th>Idade</th>
          <tr>
     </thead>
     <tbody>
          <tr>
               <td>01</td>
               <td>Rodrigo</td>
               <td>33</td>
               </tr>
          <tr>
               <td>02</td>
               <td>Taynara</td>
               <td>21</td>
          </tr>
          <tr>
               <td>03</td>
               <td>Raveny</td>
               <td>22</td>
          </tr>
          <tr>
               <td>04</td>
               <td>Sérgio</td>
               <td>51</td>
          </tr>
          <tr>
               <td>05</td>
               <td>Alice</td>
               <td>20</td>
          </tr>
     </tbody>
</table>

<button id="visualizarDados">Visualizar Dados</button>

Agora precisamos incluir um estilo para que a tabela fique mais elegante.

É importantíssimo prestar atenção ao class “selecionado” que vai ser a referência para o seu javascript saber qual linha está selecionada na tabela.

#minhaTabela{
  width:80%;
  margin:0 auto;
  border:0;
  box-shadow: 0 5px 30px darkgrey;
  border-spacing: 0;
}

#minhaTabela thead th{
  font-weight: bold;
  background-color: black;
  color:white;
  
  padding:5px 10px;
}

#minhaTabela tr td{
  padding:5px 10px;
  text-align: center;
  
  cursor: pointer; /**importante para não mostrar cursor de texto**/
}

#minhaTabela tr td:last-child{
  text-align: right;
}

/**Cores**/
#minhaTabela tr:nth-child(odd){
  background-color: #eee;
}

/**Cor quando passar por cima**/
#minhaTabela tr:hover td{
  background-color: #feffb7;
}

/**Cor quando selecionado**/
#minhaTabela tr.selecionado td{
  background-color: #aff7ff;
}

button#visualizarDados{
  background-color: white;
  border: 1px solid black;
  width:50%;
  margin: 10px auto;
  padding:10px 0;
  display: block;
  color: black;
}

Javascript

Para sermos mais justos, vamos fazer o exemplo usando Javascript puro. No nosso exemplo, vamos contemplar a opção de selecionar uma única linha ou mais de uma linha, opção determinada apenas por um parâmetro. Ainda vamos ver como manipular os dados.

Inicialmente, precisamos capturar a tabela e adicionar, à ação de clique, uma função que adicione ou remova a classe de seleção:

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
	var linha = linhas[i];
  linha.addEventListener("click", function(){
  	//Adicionar ao atual
		selLinha(this, false); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
	});
}

A função selLinha() vai ser responsável por adicionar ou remover a class “selecionado” do nó. Passamos também um parâmetro que vai determinar se poderá selecionar mais que uma linha ou apenas uma. O primeiro laço, caso múltiplos seja falso, irá apenas desmarcar todos as linhas antes de marcar a linha clicada.

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function selLinha(linha, multiplos){
  if(!multiplos){
  	var linhas = linha.parentElement.getElementsByTagName("tr");
        for(var i = 0; i < linhas.length; i++){
           var linha_ = linhas[i];
           linha_.classList.remove("selecionado");    
        }
  }
  linha.classList.toggle("selecionado");
}

Agora vamos adicionar uma função ao clique do botão para que a gente possa visualizar os dados selecionados. Para isso, iremos justamente capturar apenas as linhas que tiverem a class “selecionado” e, através de um laço, vamos concatenar os valores dentro dos nós <td> da(s) linha(s) selecionada(s).

/**
Exemplo de como capturar os dados
**/
var btnVisualizar = document.getElementById("visualizarDados");

btnVisualizar.addEventListener("click", function(){
	var selecionados = tabela.getElementsByClassName("selecionado");
  //Verificar se eestá selecionado
  if(selecionados.length < 1){
  	alert("Selecione pelo menos uma linha");
    return false;
  }
  
  var dados = "";
  
  for(var i = 0; i < selecionados.length; i++){
  	var selecionado = selecionados[i];
    selecionado = selecionado.getElementsByTagName("td");
    dados += "ID: " + selecionado[0].innerHTML + " - Nome: " + selecionado[1].innerHTML + " - Idade: " + selecionado[2].innerHTML + "\n";
  }
  
  alert(dados);
});

Vamos Testar?

ID	Nome	Idade
01	Rodrigo	33
02	Taynara	21
03	Raveny	22
04	Sérgio	51
05	Alice	20

No entanto, se você preferir ver todo código completo, acesse o JsFiddle incorporado abaixo:

Gostou do post curtinho? Tem dúvidas? Deixe seu comentário e compartilhe com quem você achar que vai gostar. Aproveite para entrar no nosso grupo de Design e Programação no Facebook ou em nossa página. Acompanhe-nos no Twitter e Instagram.

26 de junho de 2018

Gráfico / Loader Radial com CSS e Javascript Puro
Disclaimer: If you are coming from an english or international chat/group, please roll to jsfiddle at the end of this post and get all comments and explanations in english or access jsfiddle link.

Bibliotecas de gráficos existem aos montes. A maioria pesada e com poucas (ou complexas) opções de personalização. De modo que, pensei, será que é possível usar a animação do CSS para criar um gráfico leve? Como exercício, talvez eu pudesse desenvolver uma solução de gráfico radial que pudesse funcionar bem. Esse questionamento veio a partir da pergunta de uma pessoa, em um grupo, que queria criar um loading infinito com CSS.

Criando o CSS

Para poder criar a animação do load, pensei em diversas formas que já são usadas como solução, como o gradient ou gambiarras com contornos, mas eles não usam realmente o conceito da animação do raio a partir do centro. Para resolver, pensei em apelar para a trigonometria. Dividi então o círculo em 4 triângulos retângulos.

A partir daí podemos considerar a animação a partir de cada dos vértices da hipotenusa, se abrindo do raio, formando o triângulo retângulo, como no exemplo abaixo:
```
<style>
 .triangulo{
    width: 200px;
    height: 200px;
    background-color: #c1f347;
    margin:0 auto;
    animation: triangle 3s infinite  alternate;
}

@keyframes triangle {
    from   {
        clip-path: polygon(50% 0%, 0% 100%, 0 100%);
    }
    to {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
}
<style>
```
OK, conseguimos criar os triângulos com o clip-path do CSS. Graças ao ele podemos colocar caminhos de uma imagem a partir de vértices. Mas como colocar isso nos 4 triângulos? Não faria o menor sentido colocar os triângulos um do lado do outro. Como fazer então para utilizar um caminho completo para dar o efeito de transição radial?

Para isso, basta fazermos um cálculo simples. Quantos vértices seriam necessários para criar um polígono que dê a volta? Bem, basta contarmos o vértices do quadrado (4) mais um ao centro que define os triângulos e mais um para fechar a animação. Ou seja, precisamos de um hexagono.
```
<style>
 .hexagono{
     width: 250px;
     height: 250px;
     background-color: #f98b2a;
     margin: 0 auto;
     animation: hexagon 3s infinite  alternate;
}

@keyframes hexagon {
     from   {
          clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
          background-color: #2af9f7;
     }
    to {
          clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
     }
}
<style>
```
Agora basta manipular os vértices do hexagono para se comportar similar ao triângulo retângulo, levando os pontos do vértice, em fila, sempre ao próximo ponto do quadrado.
```
<style>
 .quadrado{
    width: 250px;
    height: 250px;
    background-color: #f98b2a;
    margin:0 auto;
    animation: square 3s infinite  alternate;
}

@keyframes square {
    0%   {
        clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
        background-color: #36ff9a;
    }
    25%  {
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
        background-color: #fccf40;
    }
    50%{
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
        background-color: #f40696;
    }
    75%  {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%, 0 0, 50% 50%);
        background-color: #55aadd;
    }
    100% {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 50% 50%);
        background-color: #36ff9a;
    }
}
<style>
```
Basta colocar agora a animação como linear, para evitar as pausas (o padrão possui um ease) e adicionar um elemento acima com um overflow: false e um border-radius: 50%, de forma a ficar realmente circular:

Controlando com Javascript

Podemos fazer um jeitinho para que o Javascript controle a animação. Para isso, podemos usar algumas propriedades que controlam a animação. Em especial, vamos poder pausar e continuar a animação, através do parâmetro animationPlayState.

O código completo está disponível pelo jsFiddle. O código está todo comentado e pode ser testado diretamente abaixo:

0%

Obs. Não use filtro blur ou muitas sombras se quiser compatibilidade com o Safari iOS.

Provavelmente, esta não é a melhor solução para criação de um gráfico radial. Mas é interessante vermos que podemos desenvolver novas soluções, e mais leves, a partir de tecnologias mais recentes. Se você gostou, compartilhe, se tem alguma dúvida, comente. Aproveite para curtir nossa página do Facebook e entrar no grupo, através do link abaixo.
1 de maio de 2018
CSS – Como usar transition com display:block?
Todos sabemos que transições são importantes para diminuir a sensação de repentinidade para o usuário e preparar o cérebro para, aos poucos, compreender a nova informação.

Porém, o transition do CSS3 não funciona uniformemente com todos os parâmetros. Quem nunca quis que um elemento HTML em tela sumisse aos poucos?

O mais comum é utilizar o bom e velho display: none;, porém este simplesmente não funciona ao aplicar um transition. Usemos a lógica de que a passagem de um bloco para um nada não é uma transição. No CSS, uma transição inicialmente precisa ser um comando baseado em números.

Como usar o CSS para fazer a transição de um objeto sumir?

Para realizar esta ação, vamos usar um pequeno truque. Ao invés de simplesmente não mostrar o objeto, vamos desativar sua propriedade de ser manipulável com o mouse ou toque. Para isso podemos usar a propriedade pointer-events, ficando:
```
div{
    opacity: 1;
    transition: opacity .5s linear;
}

div.hide{
    opacity: 0;
    pointer-events: none;
}
```
Para fazer o objeto desaparecer vamos usar um pouco de JavaScript apenas para adicionar ou remover a classe CSS da div:
```
function ocultar(){
    var element = document.getElementById("idDaDiv");
          element.classList.add("hide");
}
function mostrar(){
    var element = document.getElementById("idDaDiv");
          element.classList.remove("hide");
}
```
Vamos testar?

Mas e se você quiser que ele também não ocupe um espaço? Pois pode ficar um buraco perturbador. Nesse caso você pode modificar a altura do elemento para poder aproveitar melhor esse espaço. Todavia, a propriedade height não é animável (talvez por possuir uma propriedade auto). Para esse caso, você precisa usar o max-height para realizar esta animação.
```
div {
  overflow:hidden;
  max-height: 200px;
  transition: max-height 1s ease-in-out;
}

div.hide {
  max-height: 0;
  pointer-events: none;
}
```
Lembre-se que para evitar que o conteúdo seja mostrado independente da div que você vai aplicar a transição, será necessário colocar a propriedade overflow como hidden. Também é importante salientar que a propriedade max-height só é animável caso você use as medidas fixas em pixels. Como ele determina apenas o tamanho máximo, não vai influenciar se você colocar um tamanho maior que o esperado, o que se torna funcional também para responsividade.

Vamos Testar?

Se acredita que essa dica de CSS é útil para mais alguém, compartilhe e curta esta página!
24 de abril de 2018

Categoria: Design

Agora… como fazer?

HTML e CSS

Criando a Estrutura: HTML e o CSS3

Exemplo de uso do clip-path:

Criando as Funções Javascript

Crie seu símbolo para cada caractere

Anexando Glifos aos Caracteres no Inkscape

Transformando a fonte SVG em OTF ou TTF

Usando a fonte personalizada em CSS e usando-a como ícone

Câmera

Ferramentas de Edição

Concluindo

Montando a Tabela

Javascript

Vamos Testar?

Criando o CSS

Controlando com Javascript

Como usar o CSS para fazer a transição de um objeto sumir?