Alinhamento com Flexbox

Flex é uma propriedade incrível do CSS que permite organizar elementos. Se outrora tínhamos que fazer inúmeras gambiarras com float, o flex nos permite controlar o comportamentos dos filhos de um container. Para centralizar verticalmente um objeto, podemos usar a direção de coluna, em seu container pai.

Alinhamento com position

Com um pouco de matemática, conseguimos fazer um alinhamento vertical com o position absolute. Porém, é importante lembrar que o objeto será flutuante e que seu pai, necessariamente, precisa ser um position relative. O problema de usar esse tipo de alinhamento é que o conteúdo da posição precisa ser fixo. Felizmente, hoje, conseguimos fazer cálculos com variáveis de CSS, o que facilita a forma de implementarmos essa técnica. A vantagem dessa técnica é poder usar, justamente, em ambientes flutuantes que se sobreponham. Porém, caso você não precise que ele se alinhe ao pai, mas à viewport, você pode usar também o position como fixed.

Alinhamento com Grid

Outra forma moderna de alinhar verticalmente é através do uso de grids. A vantagem de usar grids é que o tamanho do conteúdo do elemento alinhado corresponderá ao tamanho da grid que se deseja utilizar. Ou seja, é adaptável de acordo com a viewport, e não referente ao seu conteúdo. Para isso, basta definirmos a quantidade de colunas e linhas que desejamos e estabelecemos onde o objeto alinhado vai iniciar e terminar.

Exemplo de uso (Modal Alinhado ao Centro)

Para mostrar como pode ser usado os alinhamentos, que tal criarmos um simples modal alinhado ao centro da tela?

Um modal é composto por uma cortina que reveste o conteúdo original, seguido de um painel com alguma informação dentro. É convenção de que os modals carreguem essas informações no centro da tela, afim de que a informação fique direcionada e encapsulada, levando, assim, o usuário à uma atenção maior àquela informação. Ou seja, isolar e destacar. O exemplo abaixo foi feito usando a primeira estratégia de alinhamento vertical aqui apresentada, pois, desta forma, o tamanho do modal que vai ser a referência para a centralização. Alguns efeitos foram adicionados para ilustrar melhor.

Todo ano a Pantone, maior empresa do mundo no ramo de sistemas de cores, elege as cores que serão usadas para representar o ano seguinte.

A ideia da empresa é, principalmente, criar um catálogo a fim de representar as tendências para o ano seguinte. Catálogo este criado pela The Pantone Color Institute, que busca utilizar de padrões e tons que são significativamente mais globais e genéricos em termos culturais, sobre o que se esperar do ano seguinte.

No ano de 2019, definiu-se que a cor que movimentaria o ano de 2020 foi o Classic Blue (19-4052):

As Cores de 2021: Otimismo e Força

Diante da maior crise sanitária da era moderna, a Pantone sugere que as cores de 2021 deverão representar o casamento entre otimismo e força, e escolheu como suas representantes as cores PANTONE 13-0647 Illuminating (similar ao amarelo canário) e o PANTONE 17-5104  Ultimate Gray (similar ao cinza elefante).

“Ao combinar PANTONE 17-5104 Ultimate Grey e PANTONE 13-0647 Illuminating para ser nossa cor Pantone do ano em 2021, destacamos como dois elementos diferentes se unem para expressar uma mensagem de força e esperança, que é ao mesmo tempo duradoura e edificante, transmitindo a ideia de que não se trata de uma cor ou de uma pessoa, é sobre vários”. — disse Laurie Pressman, vice presidente da Pantone Color Institute. — “Elas comunicam uma compreensão mais profunda da importância dos relacionamentos e da necessidade que temos uns dos outros. A união dessas duas cores diferentes mostra a força e o otimismo que resultam da junção de diferentes ingredientes”.

É importante salientar que Pantone é uma empresa privada e seus sistemas são proprietários, então você não deverá encontrar atualizações em paletas automatizadas em aplicativos como GIMP e Inkscape, mas nada impede que você crie suas próprias paletas manualmente, replicando as cores, ou até encontre algumas na internet feitas por terceiros.

Todavia, as cores e assets já estão disponíveis em serviços como o Adobe Stock e Freepik Premium:

Algumas variações de paletas usando as cores Pantone 2021 já estão disponíveis publicamente no Adobe Color. Dessa forma, já é possível usar as cores em novos projetos através da Creative Cloud, no Adobe XD, Illustrator, Photoshop e InDesign, além de plataformas para projetos de mídias sociais e vídeos, nos dispositivos móveis.

Brasil

No Brasil, através do Twitter, algumas pessoas tem manifestado reações sobre a decisão da Pantone.

Com informações do da Adobe, Dezeen, Freepik e Pantone.

Sistemas de Design são documentações, online ou físicas, que descrevem a padronização e uso de elementos de um projeto, com o objetivo de que ele possa ser usado em diferentes aplicações, mantendo uma identidade compartilhada. Essa identidade pode ser referenciada a um projeto, linha, segmento ou empresa. São usados elementos como formas, grades, tipografia, assets, iconografia, recomendações de uso, dentre outros. Algo muito semelhante ao que o design gráfico já está acostumado ao criar um Manual de Identidade Visual.

Um exemplo comum, do dia a dia dos usuários de computador, é o Microsoft Office. Trata-se de um conjunto de aplicativos que, por serem da mesma linha, precisam seguir a mesma identidade. Para que os desenvolvedores possam trabalhar com esse padrão, um sistema de design certamente foi desenvolvido para que a equipe de desenvolvimento possa trabalhar de forma coerente.

O Sistema de Design garante ao usuário uma fluidez no uso das aplicações e reconhecimento das propriedades do software. Facilitando, dessa forma, não só a identificação, como ajudando o usuário a pressupor determinados recursos ou localizações de ferramentas.

Experiência Compartilhada

Grandes empresas de tecnologia desenvolvem seus próprios sistemas de design para que desenvolvedores terceiros possa criar experiências mais coesas e confortáveis para o usuário. Seguir esses sistemas pode ser requerimento ou uma simples recomendação, dependendo da loja e sistema operacional que precisar aprovar.

Aplicativos, mobile e desktop, são os mais comuns a receberem influencias direta dos sistemas de design de sistemas operacionais que, recomenda-se, devem ser mesclados aos sistemas da própria empresa. Para esses casos temos como exemplo:

• Apple HIG
• Google Material Design
• Microsoft Fluent Design
• IBM Carbon Design System
• Salesforce Lightning
• SAP Fiori
• Canonical Vanilla Design

Como dito anteriormente, seguir um sistema de design de sistema operacional é fundamental para manter uma experiência fluida para o usuário. Por isso que, por exemplo, é possível sentir diferenças entre uma mesma aplicação desenvolvida para Windows, Android e dispositivos Apple, porque cada desenvolvedora, apesar de manter sua própria identidade, adapta-se para o ambiente em que o usuário estará.

Não necessariamente o designer ou desenvolvedor são obrigados a seguir um determinado sistema de design de terceiros. Às vezes, a melhor opção é justamente criar o seu próprio sistema ou criar uma barreira para ter uma identidade única para sua aplicação.

Algumas empresas, como a Google, estimulam para que os designers utilizem seus sistemas também em sites ou aplicativos web. Para isso, dão descrições específicas de usabilidade e ferramentas que possam agilizar o desenvolvimento dessas aplicações.

Frameworks e Bibliotecas

Para facilitar o desenvolvimento, muitas empresas oferecem frameworks e bibliotecas, tanto web quanto para desktop e mobile, afim de estimular o desenvolvedor a seguir aquele determinado padrão.

É interessante para as grandes desenvolvedoras que outras empresas sigam seus padrões de design, pois, dessa forma, ditam tendências e criam assimilações dos usuários com suas próprias plataformas, principalmente quando essas outras empresas utilizam ferramentas e APIs das grandes.

A exemplo de frameworks e bibliotecas temos:

• Twitter Bootstrap
• Google Material Library
• Microsoft UI Fabric

Porém, nem sempre essas opções suprem a demanda, pois não são compatíveis com outras bibliotecas e tecnologias. Por isso, muitos grupos de desenvolvedores trabalham para criar frameworks e bibliotecas abertas que seguem os padrões estipulados pelos sistemas de design. Como por exemplo:

• React UWP (Fluent Design)
• Materialize (Material Design)
• Material UI (Material Design)
• Ratchet (Apple Guideliness iOS)
• Semantic UI (Inspirado na Apple e Material Design)

Utilizar Sistemas de Design, além de facilitar o processo de desenvolvimento, ajuda a manter o usuário mais confortável no ambiente em que ele está acostumado. Criar ou adaptar o seu próprio sistema também ajuda a criar uma identidade única para seu conjunto de aplicativos e serviços.

Que outros sistemas de design e frameworks vocês podem recomendar? Deixem nos comentários.

DISCLAIMER: Para preservar você, o blog e a mim, o upload.php do exemplo não está fazendo upload de verdade, então você não vai ter acesso ao arquivo no final, porém, no link do github está o código funcional.

HTML

Antes de prosseguir, vou alertar que estou usando o font-awesome no exemplo, apenas para não ter que fazer nenhum upload de imagens por hora, mas ele não é obrigado para o que vamos fazer.

Iniciaremos com um HTML bem simples. Vamos definir apenas a área de upload, da lista e uma área onde ficará o input. Esse input deve ser do tipo file e deve estar com o atributo mutiple definido. Nada muito especial por enquanto, pois nosso trunfo está mais no CSS e Javascript.

<div class="area-upload">
			<label for="upload-file" class="label-upload">
				<i class="fas fa-cloud-upload-alt"></i>
				<div class="texto">Clique ou arraste o arquivo</div>
			</label>
			<input type="file" accept="image/jpg,image/png" id="upload-file" multiple/>
			
			<div class="lista-uploads">
			</div>
		</div>

CSS3

O CSS que usaremos tem pontos específicos aos quais devemos prestar atenção. Por isso, vamos ver por trechos:

.area-upload{
	box-shadow: 0 5px 20px rgba(0,0,0,.2);
	margin: 20px auto;
	padding: 20px;
	box-sizing: border-box;
	
	width: 100%;
	max-width: 700px;
	position: relative;
}

.area-upload label.label-upload{
	border: 2px dashed #0d8acd;
	min-height: 200px;
	text-align: center;
	width: 100%;
	
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #0d8acd;
	position: relative;
	
	-webkit-transition: .3s all;
	-moz-transition: .3s all;
	-o-transition: .3s all;
	transition: .3s all;
}

.area-upload label.label-upload.highlight{
	background-color: #fffdaa;
}

.area-upload label.label-upload *{
	pointer-events: none;
}

A área de upload é definida pelo CSS a partir de um espaço abrangente. O label, vai ser a referência que vamos usar para atingir toda a área pré-determinada e é o que vai também receber o estilo que indicará onde e quando pode soltar o objeto. Dessa forma, deve estar com um position: absolute, pegando toda a área do upload. Um detalhe importante é que esse label não pode possuir filhos com eventos do mouse, pois isso pode acarretar em funcionamento inadequado ao fazer um hover em uma área não indicada.

A área marcada como hightlight é justamente para demonstrar ao usuário que ele já pode soltar o arquivo.

.area-upload input{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	-webkit-appearance: none;
	opacity: 0;
}

O input vai nos servir de área de drop. Isso já é um padrão tanto para Windows, MacOS e Linux – de receber um (ou mais arquivos) arrastando os dados para o botão. Retirando a aparência padrão, podemos nos aproveitar dessa função e economizar várias linhas de código do Javascript. Não havendo a necessidade de configurarmos eventos de arquivos.

.area-upload .lista-uploads .barra{
	background-color: #e6e6e6;
	margin: 10px 0;
	width: 100%;
	position: relative;
}

.area-upload .lista-uploads .barra .fill{
	background-color: #a1f7ff;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-width: 0;
	
	-webkit-transition: .2s all;
	-moz-transition: .2s all;
	-o-transition: .2s all;
	transition: .2s all;
}

.area-upload .lista-uploads .barra.complete .fill{
	background-color: #bcffdf;
}

.area-upload .lista-uploads .barra .text{
	z-index: 10;
	text-align: center;
	padding: 3px 5px;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	color: black;
	font-size: 12px;
}
.area-upload .lista-uploads .barra .text a{
	color: black;
	font-weight: bold;
}

.area-upload .lista-uploads .barra.error .fill{	
	background-color: #c02929;
	color: white;
	min-width: 100%;
}

.area-upload .lista-uploads .barra.error .text{
	color: white;
}

Talvez a área que possa confundir um pouco mais, principalmente os mais novatos, seja o CSS referente as barras de loading. As barras são definidas como relative e seu conteúdo como absolute. Dessa forma, podemos herdar a porcentagem do upload e usá-la diretamente no min-width do elemento. Usamos min-width, ao invés de width para utilizar o transition, dando uma leveza no upload ao invés de pequenos estalos.

Javascript

Inicialmente iremos definir os efeitos de drag and drop. Utilizaremos os eventos específicos para adicionar ou retirar o css de hightlight. Aquele que falamos acima ao montar o CSS.

let drop_ = document.querySelector('.area-upload #upload-file');
drop_.addEventListener('dragenter', function(){
	document.querySelector('.area-upload .label-upload').classList.add('highlight');
});
drop_.addEventListener('dragleave', function(){
	document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});
drop_.addEventListener('drop', function(){
	document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});

Agora precisamos validar os dados antes de colocar em nosso servidor. Compusemos uma validação que verifica o tipo de arquivo e a quantidade máxima de 2MB. Essa validação é totalmente no front-end. É recomendado que você também faça uma validação posterior no back-end para evitar fraudes. Essa função receberá como parâmetro um arquivo, o qual faremos a validação.

function validarArquivo(file){
	console.log(file);
	// Tipos permitidos
	var mime_types = [ 'image/jpeg', 'image/png' ];
	
	// Validar os tipos
	if(mime_types.indexOf(file.type) == -1) {
		return {"error" : "O arquivo " + file.name + " não permitido"};
	}

	// Apenas 2MB é permitido
	if(file.size > 2*1024*1024) {
		return {"error" : file.name + " ultrapassou limite de 2MB"};
	}

	// Se der tudo certo
	return {"success": "Enviando: " + file.name};
}

Para enviar os arquivos, usaremos uma função AJAX simples. Fazemos um request no método POST. Nesta função, iremos capturar também a porcentagem do upload e atualizaremos a barra a partir desta, através do evento progress. Essa nossa função receberá o índice, para identificar o arquivo que está sendo enviado e a barra que será modificada.

function enviarArquivo(indice, barra){
	var data = new FormData();
	var request = new XMLHttpRequest();
	
	//Adicionar arquivo
	data.append('file', document.querySelector('#upload-file').files[indice]);
	
	// AJAX request finished
	request.addEventListener('load', function(e) {
		// Resposta
		if(request.response.status == "success"){
			barra.querySelector(".text").innerHTML = "<a href=\"" + request.response.path + "\" target=\"_blank\">" + request.response.name + "</a> <i class=\"fas fa-check\"></i>";
			barra.classList.add("complete");
		}else{
			barra.querySelector(".text").innerHTML = "Erro ao enviar: " + request.response.name;
			barra.classList.add("error");
		}
	});
	
	// Calcular e mostrar o progresso
	request.upload.addEventListener('progress', function(e) {
		var percent_complete = (e.loaded / e.total)*100;
		
		barra.querySelector(".fill").style.minWidth = percent_complete + "%"; 
	});
	
	//Resposta em JSON
	request.responseType = 'json';
	
	// Caminho
	request.open('post', 'upload.php'); 
	request.send(data);
}

Por fim, iremos juntar um pouco de cada coisa que fizemos, adicionando uma função em um evento change do input do upload. Neste momento, também é feito o laço dentre o(s) arquivo(s) selecionado(s) para validar e, se for válido, fazer o upload, utilizando os outros métodos acima mencionados. É neste momento também que serão criadas dinamicamente as barras: uma para cada arquivo.

document.querySelector('#upload-file').addEventListener('change', function() {
var files = this.files;
for(var i = 0; i < files.length; i++){
var info = validarArquivo(files[i]);
    //Criar barra
    var barra = document.createElement("div");
    var fill = document.createElement("div");
    var text = document.createElement("div");
    barra.appendChild(fill);
    barra.appendChild(text);

    barra.classList.add("barra");
    fill.classList.add("fill");
    text.classList.add("text");

    if(info.error == undefined){
        text.innerHTML = info.success;
        enviarArquivo(i, barra); //Enviar
    }else{
        text.innerHTML = info.error;
        barra.classList.add("error");
    }

    //Adicionar barra
    document.querySelector('.lista-uploads').appendChild(barra);
};
});

PHP

E pra terminar com chave de ouro, um PHPzinho que receberá esses arquivos e retornará um json com a confirmação de sucesso ou erro. Não aplicamos muitas validações nesse PHP pois nosso foco era neste exemplo está no front-end, mas é suficiente para que você compreenda sua funcionalidade.

<?php
ini_set('upload_max_filesize', '2M');
header('Content-Type: application/json');
$file = $_FILES['file'];

$ret = [];

if(move_uploaded_file($file['tmp_name'],'uploads/'.$file['name'])){
    $ret["status"] = "success";
    $ret["path"] = 'uploads/'. $file['name'];
    $ret["name"] = $file['name'];
}else{
    $ret["status"] = "error";
    $ret["name"] = $file['name'];
}

echo json_encode($ret, JSON_PRETTY_PRINT);
?>

E, como sempre, você pode baixar o código inteiro no Github e usar direto na sua aplicação.

Gostou? Se sim, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.

Importância

Quando o desenvolvedor está em reunião com seu cliente, ou apenas lendo os requerimentos, este já vislumbra em sua mente o processo pelo qual o usuário conseguirá atingir seu objetivo. Além disso, também pensa em como comandos e dados devem influenciar uns aos outros (o que chamamos de regra de negócio do software). Mas nossa mente não é exatamente o melhor local para armazenar informações, pois a memória humana é volátil, se adapta e, o que é mais comum, se esquece de informações que podem ser importantes.

Por isso, é normal que um profissional, desde o seu primeiro pensamento, já comece a fazer rabiscos e anotações em uma caderneta ou em um guardanapo. Dessa forma, ele vai poder planejar não apenas o leiaute, mas todo comportamento do usuário e, inclusive, ajudar a modelagem de dados e lógica do projeto.

Esboços ou Sketchs

Um esboço ou sketch, é o primeiro passo para a criação da interface gráfica de um aplicativo. Basicamente é o que o desenvolvedor em primeiro passo. Desenhos simples, com muitas marcações, textos e números, que devem ser suficientes apenas para a compreensão deste e/ou do designer responsável (caso o designer não seja o próprio desenvolvedor). Esses esboços são feitos em papel, de preferência em um bloco de anotações, com lapiseira ou caneta. Fazer à mão é importante para que a fluidez do pensamento resolva melhores definições, assim como a ideia flui melhor dentro da cabeça de que o está projetando.

Para quem tem uma frequência muito alta de rascunhos, existem cadernetas específicas para isso, tendo formatos e linhas de base adequadas para o tipo de dispositivo. Outras pessoas preferem andar com papéis impressos com os templates base. Sites como o SneakPeekit e o PaperBrowser, disponibilizam templates para esboços.

Wireframes

Wireframes são leiautes demonstrativos da diagramação de elementos na tela, geralmente contendo indicadores. Trata-se de uma evolução de um esboço, sendo mais bem trabalhado, indicando a disposição dos diversos elementos e conteúdo. Por originalmente serem desenhados em papeis milimetrados ou pautados, são também chamados de esboços de grade. Esta etapa ainda pode ser feita por alguém sem muita experiência com design, pois é basicamente uma forma de organizar as ideias rabiscadas anteriormente no papel. Se você designer, é comum pular essa etapa, indo do esboço direto para o mockup.

Hoje os wireframes são feitos digitalmente, por ferramentas específicas, como o Balsamiq Wireframes ou através de conjuntos de bibliotecas e plugins que podem ser incorporados aos aplicativos da Adobe, como o Illustrator.

Mockups

Agora é a vez do designer (ou seu lado designer) brilhar. Os mockups são leiautes com exemplos finais, ou muito próximo destes, da interface gráfica. Basicamente serve de mapa para a implementação da mesma, com exemplos das telas, componentes e estilos já finalizados. Os mockups são bem mais trabalhados que os wireframes e raramente possuem indicadores internos, para não atrapalhar a compreensão da GUI (Interface Gráfica do Usuário). Muitas vezes, é comum mostrar os mockups também em cenas de interações, ajudando a demonstrar o uso e a ter uma melhor ideia do resultado final.

Dentre diversas ferramentas para criação de mockups, temos o Adobe XD (gratuito), o Sketch e há quem até hoje prefira criar bibliotecas no Photoshop, Illustrator, Pixelmator ou similares. Sendo opção ou não do designer seguir as diretrizes de interface humana recomendado para o sistema ou aplicação.

Human Interface Guidelines

Se você é designer, você ainda deve trabalhar no chamado Human Interface Guidelines ou Diretrizes de Interface Humana, como alguns gostam de chamar. Trata-se das instruções básicas de como deve ser a GUI da aplicação, de um contexto de uma suite agregada ou até mesmo, como em sistemas operacionais, instruções de como outros designers devem implementar soluções para essa aplicação.

Para quem já trabalha ou trabalhou com identidades visuais, se assemelha muito aos manuais destas, porém ainda mais detalhados, mas com as informações sobre espaçamentos, iconografia, tipografia, cores, etc, incluindo, mas não se resumindo, a um conjunto de mockups que possuem exemplos das telas. Essas informações devem ser seguidas à risca por quem for implementar, sejam outros designers ou programadores front-end.

As Diretrizes são fundamentais principalmente em um sistema com uma quantidade de telas indefinida, como sistemas de gestão. Elas vão servir de guia para a criação de novas telas e componentes, além de inspiração para futuros materiais de publicidade e até sites.

Se você vai fazer uma aplicação para um determinado sistema operacional, ou apenas quer usar um como referência para não se preocupar tanto com o design, existem algumas diretrizes bem famosas, dentre elas a da Apple (disponível para iOS/MacOS/TVOS/WatchOS), o Material Design do Google (aplicável para sites e Android), o Fluent Design da Microsoft (também disponível o UXGuide legado) e tantos outros mais genéricos que você pode encontrar ou comprar pela internet.

UI Kits

Se você está trabalhando com mockups e wireframes, geralmente você está trabalhando focado no funcionamento em um sistema operacional. Para montar seu leiaute de forma mais simples e sem perder muito tempo se adequando à diretriz escolhida, as desenvolvedoras costumam também disponibilizar UI Kits.

Esses kits de interface de usuário são arquivos ou bibliotecas que possuem os principais elementos gráficos genéricos do sistema. Geralmente é incluído elementos como botões, inputs, padrões de texto, cores, etc. Os principais UI kits, incluindo Android e iOS estão disponíveis direto pelas respectivas empresas ou através das desenvolvedoras dos principais softwares de mockups.

Protótipo

O último passo antes (ou até durante) a implementação é a prototipagem. Basicamente, ele é um passo acima do mockup. Uma etapa onde o designer de interação não apenas demonstra o leiaute per se, mas as ações e interações entre as telas e elementos. Há várias formas de se criar um protótipo.

Algumas pessoas mais experientes preferem criar HTMLs simples, com animações e ações apenas com dados de exemplos, para demonstrar o comportamento, sem se importar ainda com tecnologias ideais ou funcionalidade, pois a ideia é ser apenas demonstrativo.

Hoje em dia, entretanto, é mais comum usar ferramentas de prototipagem. Quase todas as ferramentas modernas de mockup também fazem prototipagem, como o Adobe XD, Sketch, Figma, Zeplin, dentre outros. Esses aplicativos possuem diversas ferramentas não só de interação, como demonstração de transições e testes em dispositivos móveis.

Outra forma de prototipagem são as criadas para apresentação em vídeo. Geralmente são criadas para vender uma ideia e não tem ainda um planejamento do software. Algumas ferramentas de prototipagem, como o InVision, Fuse e o Proto.io possuem ferramentas específicas para exportação em vídeo. Há também quem prefira fazer as transições do protótipo direto no After Effects, para dar um charme a mais para essas apresentações, geralmente com o uso de bibliotecas de animações.

Concluindo

O processo de esquematização visual de uma aplicação é fundamental para que a equipe envolvida no desenvolvimento tenha um guia de como deverá ser projetada a aplicação. Desde o esboço até a prototipagem, essas técnicas ajudam na compreensão, agilidade e segurança do projeto. O esforço para conhecer bem os termos ajuda na comunicação entre os integrantes da equipe, garantindo uma melhor interação entre todos.

Se gostou do que leu, curta a página no Facebook e compartilhe a informação.

Exemplo

HTML

Para começar, vamos criar o form e a tabela. Nada complicado e semanticamente correto.

<form id="search" onsubmit="highlightColumn();return false">
  <input type="text" id="word"/>
  <button>
  Buscar Palavra
  </button>
</form>


<div id="areaTabela" class="area-tabela">
  <table>
    <thead>
      <tr>
        <th>Coluna A</th>
        <th>Coluna B</th>
        <th>Coluna C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abacaxi</td>
        <td>manga</td>
        <td>limão</td>
      </tr>
      <tr>
        <td>coelho</td>
        <td>espinafre</td>
        <td>jerimum</td>
      </tr>
      <tr>
        <td>tomate</td>
        <td>cebola</td>
        <td>rapadura</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

Precisamos fazer o CSS. De forma geral, não precisamos criar tantas opções. O importante é você criar as classes referentes ao highlight e ao highlight da coluna. Tem um charminho de escala e sombra, mas você faz como achar melhor.

.area-tabela table{
  margin-top:20px;
  border-spacing: 0;
  border: 1px solid grey;
  width: 100%;
}

.area-tabela table td, .area-tabela table th{
  width:80px;
  padding: 5px 10px;
  font-size: 14px;
  
  transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}

.area-tabela table th{
  background-color: grey;
  color: white;
  font-weight: normal;
}

.area-tabela table tr:nth-child(even) td{
  background-color: #efefef;
}

.area-tabela table tr td.high_col{
  background-color: #e5f7f8;
}
.area-tabela table tr:nth-child(even) td.high_col{
  background-color: #d1eff0;
}

.area-tabela table tr th.high_col{
  background-color: #063b5a;
}

.area-tabela table tr td.high_col.high{
  background-color: #93fffc;
  font-weight: bold;
  transform: scale(1.05);
  box-shadow: 0 3px 5px rgba(0,0,0,.5);
}

Javascript

Agora vem a parte que pode complicar um pouco. A primeira coisa que precisamos fazer é certificar-se, em um laço, que limparemos as classes high_col e high dos outros elementos. Em seguida, iremos usar a função evaluate para verificar se o texto digitado está contido em uma das células. Para capturar os td’s da coluna ativa, iremos verificar o índice da célula encontrada e usaremos isso para colocar a classe nas outras células e cabeçalho dessa coluna.

function highlightColumn(){
	//Clear
  document.querySelectorAll("#areaTabela table tr td").forEach((item)=>{
	item.classList.remove("high");
  item.classList.remove("high_col");
});
  document.querySelectorAll("#areaTabela table tr th").forEach((item)=>{
	item.classList.remove("high_col");
});
  
	var word = document.querySelector("#word").value;
 	
  if(word == ""){
  	return false;
  }
  
  //pegar o elemento
  var el = document.evaluate("//td[contains(.,'" + word + "')]", document.querySelector("#areaTabela"), null, XPathResult.ANY_TYPE, null ).iterateNext();
 
  //Se quiser a palavra completa e não trecho dela, troque a linha acima por:
  //var el = document.querySelector("td[text()='"+word+"']");
  
  //Check if el exists
  if(el == undefined){
    return false;
  }
  
  //Highlight column
  var index = (Array.prototype.slice.call(el.parentNode.children).indexOf(el));
  
  document.querySelectorAll("#areaTabela table tr td:nth-child("+(index+1)+"), #areaTabela table tr th:nth-child("+(index+1)+")").forEach((item)=>{
    item.classList.add("high_col");
  });
  
  //Highlight Element
  el.classList.add("high");
  
  return false;
}

Obs. Se você quiser buscar pelo valor específico, substitua o evaluate por document.querySelector(“td[text()='”+word+”‘]”). Dessa forma não será selecionado nenhuma célula a menos que o valor seja exato.

Simples não é?

Como sempre, o exemplo e código completo está disponível abaixo, desta vez no jsFiddle. Basta copiar o código se quiser usar diretamente em seu projeto.

Se gostou, compartilhe e curta a página no Facebook. Entre também no grupo através do link abaixo.

Continuando com os exercícios de lógica com CSS e HTML, iremos desta vez ver se é possível criar um FAB (Float Action Button) sem usar Javascript. E, adianto, sim, é possível. Se você quer ver os outros exercícios, acesse a categoria de Tutoriais, deste site.

Editado -> Para quem quer aplicar uma interação melhor, eu adicionei um exemplo de uso com Javascript no final do Post.

Esse tipo de botão é comum em aplicativos Android com Material Design. Se trata de um botão flutuante que fica em uma das extremidades inferiores (geralmente a direita) que abre uma lista com outros botões. Bem, se você está nesta página, basta olhar logo abaixo .

HTML + CSS

Um dos desafios é conseguir fazer algo semanticamente correto. Então, o leiaute em si consistirá em um container que contém um botão e uma lista de botões. Cada botão terá uma etiqueta (label) que será a descrição do que ele pode fazer.

<div class="fab"  ontouchstart="">
  <button class="main" >
  </button>
  <ul>
    <li>
      <label for="opcao1">Opção 1</label>
      <button id="opcao1">
      ⎈
      </button>
    </li>
    <li>
      <label for="opcao2">Opção 2</label>
      <button id="opcao2">
      ⎗
      </button>
    </li>
    <li>
      <label for="opcao3">Opção 3</label>
      <button id="opcao3">
      ☏
      </button>
    </li>
  </ul>
</div>

No exemplo, há apenas 3 opções e com caracteres genéricos. Você pode substituir por imagens (mas tomando cuidado com o tamanho destas) ou usando font-icons, como o Font-Awesome, o MaterialDesign Lite ou até mesmo criar os seus próprios font-icons, como mostra este tutorial. Também pode colocar quantos items quiser na lista, apenas tomando cuidado para não ficar alto demais e enrolar o usuário.

Como sempre usaremos as pseudoclasses para poder reconhecer ações. No caso, utilizaremos a pseudoclasse :active e :focus para detectar o “click” ou o “foco” (quando o tab fica em cima). Você também notará a existência de um símbolo de positivo (+). No CSS, o símbolo + é um indicativo de que o item que deverá ser formatado é o item logo após o DOM atual, porém no mesmo container hierárquico. Ou seja, quando você declara input + p, você quer aplicar o estilo no p imediatamente após o input.

Sem mais enrolações, segue o CSS

.fab{
  position: fixed;
  bottom:10px;
  right:10px;
}

.fab button{
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background-color: #cb60b3;
  border: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  font-size: 24px;
  color: white;
    
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab button.main{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #5b19b7;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.fab button.main:before{
  content: '⏚';
}

.fab ul{
  position:absolute;
  bottom: 0;
  right: 0;
  padding:0;
  padding-right:5px;
  margin:0;
  list-style:none;
  z-index:10;
  
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab ul li{
  display: flex;
  justify-content: flex-start;
  position: relative;
  margin-bottom: -10%;
  opacity: 0;
  
  -webkit-transition: .3s ease-out;
  -moz-transition: .3s ease-out;
  transition: .3s ease-out;
}

.fab ul li label{
  margin-right:10px;
  white-space: nowrap;
  display: block;
  margin-top: 10px;
  padding: 5px 8px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  border-radius:3px;
  height: 18px;
  font-size: 16px;
  pointer-events: none;
  opacity:0;
  
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab button.main:active,
.fab button.main:focus{
  outline: none;
  background-color: #7716ff;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
 }
 
.fab button.main:active:before,
.fab button.main:focus:before{
  content: '↑';
}

.fab button.main:active + ul,
.fab button.main:focus + ul{
  bottom: 70px;
}

.fab button.main:active + ul li,
.fab button.main:focus + ul li{
  margin-bottom: 10px;
  opacity: 1;
}

.fab button.main:active + ul li:hover label,
.fab button.main:focus + ul li:hover label{
  opacity: 1;
}

O que estamos fazendo é aplicar um estilo na lista assim que o botão ganha foco ou é ativado. Você pode, se preferir, adicionar também ao passar em cima com o mouse, bastando adicionar, junto aos demais comandos do botão principal, a pseudoclasse :hover e repetindo o resto da declaração.

Simples, não é? E, como sempre, o exemplo no JsFiddle para você ir experimentando e fazendo seus próprios testes. Compartilhe com a galera!

Versão com Javascript:

Como vi uma pergunta em um grupo do Facebook, resolvi rapidinho então fazer uma variação do que foi feito no anterior, para atingir o mesmo efeito do input login do novo login do Google. Ah e, mais uma vez, sem javascript .

HTML e CSS

Se precisarem de alguma explicação mais aprofundada, dê um olhada no artigo anterior. Só uma observação importante é que o top, do label, deverá ser ajustado de acordo com o tamanho da letra e a tipografia usada, pois tipografias diferentes mudam a sensação de tamanho.

<div class="label-float">
  <input type="text" placeholder=" ">
  <label>Telefone</label>
</div>
<br>
<div class="label-float">
  <input type="text" placeholder=" " required="">
  <label>Nome de Usuário</label>
</div>

.label-float{
  position: relative;
  padding-top: 13px;
}

.label-float input{
  border: 1px solid lightgrey;
  border-radius: 5px;
  outline: none;
  min-width: 250px;
  padding: 15px 20px;
  font-size: 16px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -webkit-appearance:none;
}

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

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

.label-float label{
  pointer-events: none;
  position: absolute;
  top: calc(50% - 8px);
  left: 15px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  background-color: white;
  padding: 5px;
  box-sizing: border-box;
}

.label-float input:required:invalid + label{
  color: red;
}
.label-float input:focus:required:invalid{
  border: 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;
  top: 0;
  color: #3951b2;
}

E, como sempre, o link, com o exemplo do jsFiddle, se você deseja apenas experimentar e treinar um pouco:

Compartilhe se você achou legal!

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!

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.

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>

		<!-- Mensagem de Ajuda-->
		<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.

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.

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).

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.

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.

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.

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.

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?

Visualizar Dados

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.

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.

<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:

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.

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!

Se você digitar apenas console, no Console, você poderá ver a gama de Métodos que o Objeto tem disponível.

Neste tutorial, mostraremos alguns métodos e como utilizá-los de forma a permitir uma finalização que ajude o designer e desenvolvedor a obter respostas mais ideais para o problema. Você pode testar os comandos aqui mesmo, basta pressionar CTRL+SHIFT+I, ou simplesmente clicar com o botão direito e inspecionar elemento. Ao clicar na aba console, você poderá digitar os comandos e visualizar os resultados.

O método log é o mais básico e permite que você adicione uma

console.log("Oi Mundo");

Porém o simples log de texto não necessariamente pode ser o ideal. Você pode, se assim precisar, adicionar alguma informação visual para que o log seja lido de forma mais intuitiva. Para isso, basta usar uma string de formato %c e instruções CSS. O exemplo abaixo, colocará o texto branco, negrito e com sombra:

console.log('%c Oi mundo', 'color:white; font-weight:bold; text-shadow: 0 0 1em black;font-size: 72px');

Com isso é possível até mesmo adicionar imagens, através do background-image:

console.log('%c       ', 'font-size: 100px; background: url(http://cdn.nyanit.com/nyan2.gif) no-repeat;');

Passando para um ponto mais sério, você também pode visualizar no console objetos diferentes de Strings. É possível, por exemplo, visualizar um objeto JSON, o que é algo muito funcional para visualizar o resultado de métodos AJAX.

console.log({teste: 'texto de teste', valor: 22})

No caso de você colocar um JSON ou um array, você poderá estender e visualizar os detalhes desse objeto.

Erros e Alertas

Além do log, o Console também tem objetos que servem como point-breaks para testes e validações. Os métodos error() e warn() permite que você adicione informações de forma mais relevante e alertiva. Esses dois métodos também permitem usar a  string de formato %c .

console.error("Problema Sério");
console.warn("Problema Leve");

Você deve notar que, ao lado da linha onde é demonstrada o alerta/erro, há uma palavra anonymous, entre parênteses. Essa informação define qual o método relacionado com a origem do erro. Por exemplo, se o erro ou alerta ocorrer dentro de um método, será mostrado o método onde ocorreu o erro.

var teste = function(){console.error("Oi")};
teste();

Essa informação é extremamente útil para auxiliar o desenvolvedor a saber qual a origem do problema.

Identação

Outra opção muito útil para definir detalhes no log é a identação. Na verdade, é uma organização em grupo e subgrupos das informações. Dessa forma, o desenvolvedor pode apresentar dados mais organizados para o testador.

console.group("Frases");
console.group("Saudações");
console.log("Oi!");
console.log("Olá!");
console.groupEnd();
console.group("Despedidas");
console.log("Tchau!");
console.log("Até mais.");
console.groupEnd();

Tabelas

O método table() permite você mostrar informações de dados em uma tabela. Ele é um método muito útil para ler objetos, JSON e vetores. De forma automática, esse método irá reconhecer os dados e organizá-los nessa tabela. Se por acaso você passar um array, as chaves mostradas serão apenas os índices numéricos.

console.table({'Dia': '10:00', 'Noite': '22:00'});

Calcular Tempo

O cálculo de tempo é fundamental para medir performance.  O método time() permite usar uma etiqueta para poder iniciar e finalizar uma contagem de tempo. Para isso, basta seguir o exemplo abaixo:

console.time("calcularTempo");
for(var i; i < 100; i++){

}
console.timeEnd("calcularTempo");

Esse tempo será calculado baseado no tempo que a máquina cliente demora para realizar determinada ação, por isso, esse valor pode variar de computador para computador.

Strings de Substituição

Além do %c, usado para CSS, você pode usar outras Strings com objetivos específicos.

Dependendo do navegador (como o Firefox), você pode ter opções adicionais de máscara quanto aos valores. Para saber os detalhes, você precisa verificar na documentação do navegador, mas são muito similares as Strings usadas no console em C e no Java.

Por exemplo:

console.log("O valor da compra de %d %s é de %f, com os dados %o", 3,'carros',38500.30,{'carro':'fusca'});

Concluindo

O uso apropriado do console do navegador pode ajudar os desenvolvedores a fazerem testes e obterem resultados mais fiéis destes. Além disso, pode exibir mensagens importantes para alertar um usuário leigo a não mexer nessas opções (como faz o Facebook). De qualquer forma, o conhecimento das opções do console são fundamentais para qualquer profissional web que trabalha com front-end.

1 – Tamanhos de Fontes, Espaçamentos e Entre Linhas

Uma das coisas mais irritantes em blogs e sites de notícia é a forma como as vezes eles comprimem as fontes para poder encaixar mais anúncios. Esses textos acabam por ser cansativos de ler e, por conta disso, vale a pena investir um pouco de tempo e cuidado para melhorar essa leitura.

Cada família tipográfica possui seu próprio espaçamento e tamanho, por isso, as medidas podem variar de acordo com a que você escolher usar. Muitos sites utilizam tamanhos de 12px com line-height normal. Apesar de caber mais informações dessa forma, isso causa uma péssima experiência.

No geral, devemos aumentar o espaçamento entre-linhas e manter um bom tamanho de fonte.

Obs. É importante declarar a metatag para o escalonamento, em seu <header>:

<meta name="viewport" content="width=device-width, initial-scale=1">

O espaçamento e tamanho da fonte pode variar dependendo de sua preferência. O blog do Google, por exemplo, usa algo como:

.post p{
    font-size: 16px;
    letter-spacing: 0;
    line-height: 26px;
}

O importante é que se caso você queira aumentar ou diminuir a fonte, por algum motivo, você deve proporcionalmente alterar também o line-height.

Em algumas tipografias, pode ser necessário diminuir ou aumentar o letter-spacing. Essa propriedade indica o espaçamento entre as letras. Sites que usam uma tipografia serifada pode se beneficiar, em alguns casos, do aumento do letter-spacing. O contrário para algumas famílias sem serifa e scripts.

.post p{
     font-size: 17px;
     line-height: 1.52947;
     letter-spacing: -.021em;
}

Não há problemas em usar frações ou unidades de medida quebradas. Ao contrário, geralmente esses pequenos pontos o ajudam a fazer a tipografia melhor.

Para testar com mais facilidade, você pode usar o console do Google Chrome (botão direito e inspecionar elemento), mudando os valores em tempo real.

2 – Justificação de Texto e Separação Silábica

Sabemos que em desktops e laptops, temos espaço horizontal sobrando. Tanto que restringimos o espaço da leitura para evitar ficar linhas muito longas. Por conta disso, não utilizamos textos justificados para essas mídias.

Porém, dispositivos móveis, como tablets e smartphones, a coisa muda de figura. Estamos acostumados a ler textos justificados em ambientes que estão a certa distância e pouco espaço horizontal, por uma questão organizacional da própria vista. Com o CSS3, e adoção de certas propriedades pelos principais navegadores para dispositivos móveis, podemos adicionar separação silábica na justificação, deixando o texto mais simples de ler e sem espaçamentos perturbadores entre as palavras.

Para isso, basta adicionar, através de media-queries:

/**Apenas em Dispositivos Móveis**/
only screen
and (-webkit-min-device-pixel-ratio: 1)
and (max-device-width: 640px)
and (min-device-width: 320px),
screen and (max-width: 600px){
    .post p{
        text-align: justify;
        -webkit-hyphens: auto; /**Chrome/Android**/
        -moz-hyphens: auto; /**Firefox**/
        -ms-hyphens: auto; /**Edge**/
        hyphens: auto; /**Outros**/
    }
}

Obs. Algumas versões do Android não são compatíveis com o hyphens. Então verifique se vale a pena para você de acordo com seu público.

3 – Tipografias Especiais (WebFonts)

A maioria das tipografias funcionam de forma razoável, mas você pode querer personalizar para se adequar mais ao seu blog, site ou sistema.

A forma mais barata e simples de fazer isso é através do site Google WebFonts. Lá você pode encontrar as fonts de forma bem simples e implementar facilmente em seu código.

Basta escolher uma font desejada e clicar no +, no canto superior direito do bloco específico.

Uma vez escolhida a(s) font(s) desejada(s), basta você clicar na janela que abre na parte inferior e seguir as instruções. Basicamente, você deve adicionar a tag de <script> em seu <header>. Uma vez feito isso, basta chamar a font-family, no CSS, no modo que está no exemplo.

Obs. É recomendável que você vá na aba Customize (Personalizar) para que você desmarque as fonts não desejadas. Lembre-se que quanto maior a quantidade de variações, mais pesado vai ser para abrir seu site.

Outra opção, que segue mais ou menos a mesma lógica do Google Webfonts é o Adobe Typekit. O Adobe Typekit está disponível para todos os usuários pagantes da suite Adobe. Ele pode ser acessado simplesmente abrindo janela do CreativeCloud, no Mac ou Windows, e clicando no botão Gerenciar fontes.

Ao fazer isso, o usuário é automaticamente encaminhado para o site do Typekit da Adobe, onde ele pode criar um novo Webkit. Nele você pode criar ou manipular um kit já existente.

Caso você clique em + Create new kit, você será direcionado a um popup com as instruções para você preencher seu site ou IP para trabalhar com a tipografia. Esse cadastro é necessário pois você tem um número limitado de kits que você pode aplicar em sua conta da Adobe.

Uma vez confirmado, o site te encaminhará para a página onde você receberá a tag <link> que você deverá colocar em seu <header>. Uma vez feito isso, você já pode começar a escolher as fonts que vai usar na página. Por fim, você pode visualizar a forma de aplicação e demais opções no menu no canto esquerdo. Ao finalizar, lembre-se de clicar no botão PUBLISH, pois só então ele ficará disponível no seu site.

Agora, se você já tem uma font legal ou a encontrou em um site como o DaFont, você pode utilizá-la também em seu site ou blog. 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), em seu site. Caso esteja usando o WordPress, coloque dentro da pasta dos eu tema.  Em seguida, é só 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; /**Você vai precisar especificar o weight para cada espessura de font diferente**/
    font-style: normal;
}

Para usar onde você quiser, basta chamar o font-family, através do nome que você determinou no font-face.

.post h1,
.post h2{
     font-family: "minhafonteregular";
}

Outras Dicas

• Evite contrastes de cores. Nunca deixe o branco sobre preto ou vice-versa, use tons cinzas ou ton sur ton. Altos contrastes pode deixar a leitura mais cansativa.
• Evite cores intensas. Não use cores berrantes na tipografia. Se precisar destacar algo opte sempre por algo mais pastel ou sereno.
• Abuse dos espaçamentos. Tome cuidado ao deixar imagens muito próximas do texto, principalmente de anúncios, para não confundir. Lembre-se, a boa tipografia não é definida pelo espaço em que ela ocupa, mas pelo espaço entre ela.

Então, o que achou dessas três dicas? Gostaria de outras dicas como essa? Então compartilhe com quem você acha que se interesse e deixe um comentário.

Mesmo os profissionais com conhecimento em programação front-end e web, ou especialistas em web design, possuem dificuldades para organizar projetos tão diferentes entre si em uma mesma página ou conjunto.

Um dos melhores serviços, porém pouco conhecido, para organização de portfólio é o Adobe Portfolio.

Behance

Em 2012, a Adobe adquiriu o Behance por 150 milhões de dólares em dinheiro (ou seja, nada de troca de ações ou acordos posteriores). A ideia da Adobe era vincular a mídia social de portfólios à sua suite Creative Cloud. Com isso a Adobe resolveu vincular o serviço Behance ProSite a todos os clientes de sua plataforma. Em 2016, a Adobe oficializou o nome Adobe Portfolio como uma evolução dessa ferramenta.

Não é incomum a Adobe comprar softwares e serviços. Seus principais aplicativos como Photoshop, Illustrator, Indesign, Premiere, After Effects e até mesmo a tecnologia aplicada ao Creative Cloud são resultados de compras e evoluções de ferramentas com o passar dos anos.

Adobe Portfolio

O Adobe Portfolio é um serviço vinculado ao Adobe Creative Cloud, seja pelo plano de fotografia ou pelo plano completo, que pode ser acessado diretamente pelo painel do Creative Cloud ou através do site https://myportfolio.com.

O aplicativo web consiste em um conjunto de ferramentas que permite que você faça sua própria página na web, de forma personalizável, a partir de uma série de templates bases. Todos esses templates possuem características básicas, como responsividade, imagens destacadas grandes e opções de criação de páginas.

Ao escolher o leiaute, caso já possua uma conta no Behance, simplesmente importe os projetos que você já tem cadastrado lá. Caso não tenha, você pode enviar as mídias e detalhes do projeto diretamente pela ferramenta. Agora, se o seu negócio é fotografia, o Adobe Portfolio ainda possui integração com o Lightroom, podendo ser atualizado diretamente pela aplicação mobile ou pela versão 2017, no Desktop. Inclusive, metadados são suportados.

Uma vez importado seus projetos, você pode adicionar diversas opções, como ícones de mídias sociais, links para páginas externas, adicionar sua identidade visual, modificar cores, editar e adicionar textos, dentre outras opções de design.

Antes de publicar, você ainda deve configurar as opções do site per si, como título, menus, organizações de dados no geral. Ainda deve especificar o favicon e pode criar um subdomínio myportfolio.com ou usar o seu próprio domínio (porém sem suporte a SSL), seguindo as informações passadas de DNS, em seu registar.

#Dica: Você pode encontrar o sitemap para utilizar no Google Console através de subdominio.myportfolio.com/sitemap.xml.

Uma solução rápida e prática

O Adobe Portfolio é uma solução eficiente que resolve a maioria dos casos. Possui responsividade, integrações simplificadas e muitas opções de personalização. Existem outras ferramentas para portfolios, algumas gratuitas ou vinculadas a templates de CMS, porém nenhuma é realmente tão simplificada. Além disso, a licença Creative Cloud (praticamente obrigatória para quem é designer) já te dá o direito de usar a ferramenta em sua totalidade, sendo, ao menos, uma plataforma a mais para divulgação de trabalho.

BitMail é um aplicativo desktop para envio de e-mails em lotes, criado com a tecnologia Electron / NodeJS. Este projeto é de código aberto e ainda está em beta e diversas funcionalidades não funcionam direito e apresentam falhas com o uso em alguns servidores de e-mail.

Star

Sobre o Projeto

Há duas semanas comecei a estudar NodeJS (em Dez de 2017) e, por consequência de interesse de criação de aplicativos para desktop, estudar um pouco de Electron. Apesar de já ter experiência com Javascript, estava interessado em entender a manipulação de arquivos locais.

Como quando estudo algo prefiro criar um projeto minimamente útil, resolvi criar uma variação de um projeto que criei anos atrás para um cliente e que também é de código aberto, o PortilloMail (eu sei, não é um nome muito criativo), criado em PHP e compatível com a maioria dos servidores compartilhados.

Como ainda estou novo em NodeJS, ainda preciso resolver alguns problemas, que vou citar abaixo, mas o aplicativo já é utilizável em diversas circunstâncias.

• COMO PREPARAR O ARQUIVO CSV?
• COMO CRIAR MEU PRÓPRIO TEMPLATE?
• FAQ (PERGUNTAS FREQUENTES)

Como Enviar E-mails?

O BitMail foi feito para ser extremamente simples. Sua tela inicial possui todas as informações básicas necessárias para enviar um e-mail.

A primeira coluna (da esquerda para a direita) refere-se ao remetente da mensagem. Basta colocar o nome de quem está enviando, a senha e o host.

Por enquanto, estamos listando apenas o host Gmail e Outlook, porém, você pode optar por personalizar para configurar o SMTP da sua própria hospedagem. Com o tempo iremos atualizar com outros padrões de hospedagens mais famosas.

A coluna do meio é referente a mensagem. Nela você coloca as informações básicas como Assunto e Mensagem (pode usar emojis) e deverá selecionar um arquivo CSV previamente configurado, que consta os e-mails e senhas dos destinatários.

A última coluna é a coluna de envio. Nela você deverá digitar um e-mail para teste. Apenas após você confirmar o teste, o botão ENVIAR vai ficar funcional.

A barra inferior é a barra de templates. O aplicativo permite que você crie arquivos HTML e os use como templates. Como a ideia é servir de mailmarketing, você mesmo pode criar o seu template. Leia aqui sobre como incluir seu próprio template. Se o quadrado preto estiver selecionado, isso quer dizer que você não irá utilizar nenhum template e irá enviar a mensagem do jeito que estiver dentro da caixa mensagem (inclusive com tags HTML).

Para poder garantir que seu e-mail não fique preso em uma caixa de SPAM ou que você seja interrompido pelo limite da sua hospedagem ou servidor de e-mails, o aplicativo é limitado a 200 e-mails por hora. Você pode editar isso, tal como preencher as configurações da sua hospedagem, no PAINEL AVANÇADO.

Antes de usar, é extremamente aconselhável que você leia o FAQ e saiba como preparar o arquivo CSV.

Se você tiver interesse em como criar o seu próprio template, você também pode ler sobre isso aqui.

Requerimentos

Após a instalação do NodeJS, você vai precisar de uma série de bibliotecas para poder fazer compilar.

Você pode baixar o NodeJS para Windows diretamente pelo site oficial ou pode usar o seguinte comando para distribuições baseadas em Debian (instalando também seu gerenciador de pacotes):

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Após a instalação do NodeJS, acesse o console e instale o Electron:

npm install electron --save-dev --save-exact

Para o envio dos e-mails, o pacote nodemailer se faz necessário. Para instala-lo, acesse o console e use:

npm install nodemailer

Por fim, para diminuir o código de leitura de arquivo, pois precisava que ele fosse síncrono e mais simples, resolvi usar o n-readlines. Provavelmente, em atualizações futuras não irei usar, mas por enquanto:

npm install n-readlines

Para poder compilar, acesse o console e na pasta onde você salvou o projeto, execute:

npx electron .

Pronto. Você agora já pode utilizar.

Obs. A única biblioteca front-end utilizada, para facilitar o desenvolvimento, foi o jQuery. Além do jQuery e das bibliotecas node utilizadas, o resto foi programado por mim. Então peguem leve nas críticas.

Follow @velhobit

Interface Gráfica

O Pixelmator Pro foi criado pensando em profissionais de fotografia e manipulação digital. Por ser exclusivo para Mac e construído em cima da API Metal, toda sua estrutura gráfica segue os padrões usados na plataforma.

A tela de criação de novo arquivo agora mostra uma série de formatos pré-definidos. O mais interessante é que além de formatos mais conhecidos, como tamanhos de papel e de vídeo, sãos as predefinições de mídias sociais, que apresentam especificações prontas para diversos padrões de imagens para Instagram, Facebook, Twitter e outros.

A tela ainda permite escolher a profundidade de cor (até 16 bits) e tipos de unidade de medida para especificar o novo documento.

A interface do Pixelmator Pro apresenta uma formatação muito comum em aplicativos para correção de fotografia, com a maioria das opções e ferramentas apresentadas no lado direito da tela, deixando praticamente todo resto do espaço para a visualização do projeto. Ele segue uma estrutura bem similar ao Pixelmator para iPad. Ainda há algumas opções a mais no topo, como abas (quando necessário) e uma barra de camadas à esquerda, quando houver mais de uma.

Diferente de seu antecessor, essa versão do Pixelmator agora traz uma uma iconografia monocromática em cinzas, tal como sua tipografia, para não distrair o profissional.

Pincel e Pintura

A ferramenta pincel apresenta uma variedade enorme de pontas e compatibilidade com diversas pen-mouses e tablets. Totalmente personalizável, ela simula bem o comportamento de mistura de tintas e também permite importar e exportar pontas.

Ferramenta Organizar

Aqui a ferramenta mover / selecionar, equivalente, é nomeada de Organizar. Através dela você consegue modificar propriedades do documento ou de suas camadas, como rotacionar, ampliar, mover, alinhar e outros pontos organizacionais.

O diferencial aqui está no fato de que o controle é totalmente adaptado para os movimentos do trackpad.

Recortando um Objeto da Cena

Talvez um dos mais impressionantes recursos do Pixelmator Pro seja a ferramenta de Seleção Rápida. Ela funciona como uma mescla de Varinha Mágica com Pincel de Seleção, se comparado com o sistema da Adobe. É mostrado primeiro uma pré-visualização e, ao arrastar, o usuário pode definir a área de recorte de forma realmente rápida e simples e, o melhor, com uma qualidade que nos deixa realmente impressionados.

Uma outra promessa extremamente curiosa da aplicação é que ela promete a nomeação automática de camadas a partir de Machine Learning. Dessa forma, o designer não precisa se preocupar tanto com a nomeação de camadas e será mais simples uma atualização ou manutenção desse documento.

Ajustes de Fotos

Muito além dos ajustes de fotos tradicionais, que precisam de painéis e seleções individuais, o Pixelmator Pro apresenta uma área que é muito similar a editores de câmera RAW, inclusive o próprio Lightroom, porém com a vantagem adicional de ser possível salvar predefinições para que sejam utilizadas posteriormente. Ainda possui o modo que garante que a imagem original sempre seja preservada, lembrando muito a nova versão do software para fotografia da Adobe.

Efeitos e Pseudo Filtros

A opção de efeitos, que fizeram tanto sucesso no Pixelmator vanilla está de volta na versão Pro, porém mais poderoso, usando a segunda versão da API Metal, da Apple. Graças ao Metal, o uso otimizado da GPU permite que efeitos sejam aplicados e visualizados em tempo real, mesmo em imagens mais pesadas. Nos testes usamos um MacBook Pro de entrada, Mid 2012, sem GPU dedicada, e tivemos um resultado surpreendentemente bom mesmo com imagens de alta resolução.

O Pixelmator Pro traz efeitos já conhecidos de distorção, desfoque, mosaico, nitidez, dentre outros, e mais alguns que são exclusivos da plataforma, como o divertidíssimo efeito Caleidoscópio. Cada efeito tem suas particularidades e pode ser editados a partir de alças que são visualizados por cima da imagem.

Vetores

Em sua versão comum, é apresentado um conjunto de ferramentas vetorais com estilos e predefinições intitulado de Vectomator. Além de disponibilizar uma série de ícones e vetores prontos (a maioria precisa ser baixado), você ainda pode desenhar vetores simples de uma forma muito similar ao Illustrator. Infelizmente, sua exportação fica restrita a imagens matriciais, não sendo funcional para criação, por exemplo, de identidades visuais.

Tipografia

A tipografia talvez seja o ponto mais fraco da ferramenta. Apesar do excelente acabamento tipográfico do MacOSX, as funcionalidades entregadas pelo Pixelmator Pro são muito limitadas. Apesar de haver opções interessantes, o aplicativo não entrega tudo o que poderia, obrigando o usuário a ter que converter o texto para forma ou pixel para que possa usar opções comuns, como sombra projetada.

Uma Verdadeira Opção ao Photoshop

Ninguém duvida que o Photoshop é uma aplicação extremamente robusta e completa. Todavia, está anos parado no tempo no quesito usabilidade e interface gráfica. Muitos filtros do Photoshop ainda não usam bem a GPU e não possui resposta em tempo real na maioria de seus filtros e efeitos. Já o Pixelmator, talvez por ser uma empresa jovem, ou por ser exclusivo para MacOSX  pode, assim, usar em totalidade API da Maçã. O resultado é mais poder de processamento gráfico para gerar resultados impressionantes.

Sendo uma opção muito boa, o Pixelmator Pro é ideal para retoques de fotos, composições e criação de anúncios para mídias sociais, web, ícones e diversos assets para projetos gráficos. Porém pode ser extremamente bem usado também para material impresso.

Com o preço único de 59,90 dólares (aproximadamente 200 reais), o Pixelmator Pro, se seguir o método de sua versão anterior, vai receber ainda diversas atualizações e se tornará talvez a melhor opção para edição de fotos para usuários MacOSX.

E você? Já conhecia o Pixelmator? Já tem opinião sobre esse aplicativo? Deixe seu comentário.

ATENÇÃO: Devido a quantidade de código e efeitos nesta página, pode apresentar lentidão se você for testar os exemplos abaixo em dispositivos móveis mais antigos (e até alguns mais recentes). Se você fizer o uso comedido, você não encontrará esse tipo de problemas.

Adicionando a Logo SVG

Para poder funcionar de forma leve, precisamos que a imagem que vamos adicionar seja em SVG. Dessa forma podemos manipular seus parâmetros de forma simples e adicionar efeitos.

Vários programas permitem exportar os objetos em SVG. Inkscape (que é de código aberto e gratuito), Illustrator ou CorelDRAW, todos eles possuem uma área de exportação específica.

No Illustrator, você pode usar a opção Exportar para Telas. Importante salientar que, para ficar com um melhor acabamento, coloque apenas contornos, sem preenchimento no objeto.

O resultado será um arquivo de extensão SVG. O interessante é que você pode abrir esse arquivo em qualquer editor de texto e ver os detalhes. Você deverá guardar esse arquivo para uso posterior no HTML.

Montando o HTML

Uma vez criado o SVG, precisamos montar o HTML. Para isso, basta criar a área e organizar as classes e ids de forma apropriada, ficando:

<div class="area_neon">
	<center>
		<h1 id="texto_neon" class="neon">Bit Color | Velho Bit</h1>
	</center>
</div>

Apenas isso.

Em seguida, vamos colocar o SVG acima do h1. Para isso, basta copiar o código gerado acima do SVG. Em seguida, adicione a classe específica que vamos usar no CSS e mude (caso necessário) para uma id mais fácil de compreender.

Ficando algo similar a:

<div class="area_neon">
	<center>
		<svg class="neon_img" id="img_neon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.06 238.87"><path d="M189.39,53.25c9.32,0,16.87,7.85,16.87,17.54s-7.55,17.54-16.87,17.54-16.86-7.85-16.86-17.54,7.55-17.54,16.86-17.54m7.9,20.35a4.71,4.71,0,1,0-4.53-4.71,4.62,4.62,0,0,0,4.53,4.71m-7.9-26.35c-12.6,0-22.86,10.56-22.86,23.54s10.26,23.54,22.86,23.54,22.87-10.56,22.87-23.54S202,47.25,189.39,47.25Z"/><path d="M127,11.43c1.35,0,2.77,0,4.26,0,35.29.62,54.9,18.2,66,28.77,13.49,12.84,20.56,33,20.59,48.14,0,10.68-42.82,16-64.66,17.32-3.78.23-6.93.35-9.12.35-.59,0-1.1,0-1.55,0h-.41c-2.07,0-8.64.48-10.44,6.46-.32,1-1.23,6.3,2.46,6.3,1.3,0,3.17-.65,5.85-2.37a4.89,4.89,0,0,1,2.68-.89c4.62,0,6.69,8.54,5.11,9.14a2,2,0,0,1-.66.14c-1.25,0-1.54-1.8-1.56-4.17,0-1.4-1.78-2.23-3.59-2.23s-3.53.77-3.87,2.52c7.15,4.17,4.93,14.15,3.6,16.46-.3.53-.65.74-1,.74-1.14,0-2.18-2.4-1.19-3.17,1.29-1,3.47-3.36,2.28-6.13-1.09-2.52-2.4-3.86-4-3.86s-3.46,1.36-5.63,4.24c-1.56,2.05-2.59,2.81-3.86,2.81-2.26,0-5.25-2.45-13.19-4.32a20.2,20.2,0,0,0-4.66-.49,39.34,39.34,0,0,0-10.77,1.7c-19.4,5.66-43.45,25.47-33,59.46,5,16.33,16.27,22.2,27.42,22.2s22.05-5.79,26.72-12.88a15.84,15.84,0,0,0,1.65-3.22,31.73,31.73,0,0,0,1-3.51c1.78-7.59-.07-13.52-2.9-17.44-2.35-3.28-5.38-5.16-7.54-5.44,3.93,4.38-1.27,18.71-9.88,18.71a8.68,8.68,0,0,1-1-.06c-14-1.8-17-17.39-8.69-26.5a19.81,19.81,0,0,1,15-6.62,26.8,26.8,0,0,1,9.65,1.91,30.65,30.65,0,0,1,4.2,2c.41.24.8.49,1.19.76,11.21,7.84,13.5,30.64,3.89,47.88-6.57,11.8-18.72,21-37.41,21a63.65,63.65,0,0,1-7.51-.46c-1.1-.14-2.22-.3-3.36-.5-.51-.08-1-.16-1.55-.26A74.23,74.23,0,0,1,31.3,196.3C18.35,178.52,12.6,155,17.19,130.83,25.76,85.85,50.4,61,72.53,46.29a201.71,201.71,0,0,1,28.21-15.2c3.29-1.51-2.65-9.48-1.51-12.25,1.41-3.43,3.85-7.41,27.8-7.41m60.5,81.15c11.57,0,20.95-9.75,20.95-21.79S199.1,49,187.53,49s-20.95,9.75-20.95,21.79S176,92.58,187.53,92.58M127,5.43c-24.18,0-30.38,3.91-33.35,11.12-1.39,3.39-.07,6.87,1.1,10l.24.63A195.09,195.09,0,0,0,69.21,41.29C38,62,18.54,91.71,11.3,129.71c-4.73,24.85.79,50.41,15.15,70.13a80.46,80.46,0,0,0,50.06,32l1.27.22.4.07c1.32.22,2.51.4,3.64.53a68.58,68.58,0,0,0,8.23.51c18.86,0,34-8.54,42.66-24.06,11-19.83,8.39-45.86-5.7-55.71-.58-.41-1.12-.75-1.64-1.05a38.22,38.22,0,0,0-5-2.4,32.54,32.54,0,0,0-11.84-2.32,25.73,25.73,0,0,0-19.44,8.57,23.09,23.09,0,0,0-4.88,23.24c2.7,7.36,9,12.2,17.22,13.26a13.29,13.29,0,0,0,1.78.11c6,0,11.55-4,14.77-10.52a17.89,17.89,0,0,1-.29,7.33,24.29,24.29,0,0,1-.84,2.83,9.16,9.16,0,0,1-1,2c-3.25,4.94-12,10.18-21.71,10.18-7.38,0-17.13-3.12-21.69-18-3.56-11.62-2.91-22.08,1.94-31.08,5.2-9.64,15.3-17.44,27-20.86a33.17,33.17,0,0,1,9.09-1.46,14.3,14.3,0,0,1,3.28.33,47.43,47.43,0,0,1,8.41,2.82,15.44,15.44,0,0,0,6.16,1.66,8.84,8.84,0,0,0,4.83-1.44,8.36,8.36,0,0,0,.44,2.05,7.74,7.74,0,0,0,7.12,5.5,7.18,7.18,0,0,0,6.19-3.74,20.89,20.89,0,0,0,2.22-9.85,7.92,7.92,0,0,0,.78-.26c2.66-1,5.16-4,4.18-9.35a15.67,15.67,0,0,0-4.95-9c1.37,0,2.86-.13,4.43-.23,5.4-.33,24.35-1.68,41.4-5.27,13.47-2.84,28.92-7.45,28.9-18,0-15.51-7-37.75-22.46-52.48-10.14-9.65-31.24-29.74-70-30.42-1.5,0-3,0-4.36,0Zm60.5,81.15c-8.24,0-14.95-7.08-14.95-15.79S179.29,55,187.53,55s14.95,7.08,14.95,15.79-6.71,15.79-14.95,15.79Z"/></svg>
		<h1 id="texto_neon" class="neon">Bit Color | Velho Bit</h1>
	</center>
</div>

Porém, para ficar mais legal, devemos usar uma tipografia mais apropriada. No Google Fonts podemos encontrar tipografias interessantes, com cantos arredondados, que nos darão resultados mais interessantes.

Uma vez escolhida a fonte, clique no Select this Font (no Google Fonts) e ele vai dar um código similar a este abaixo, que você deverá colocar dentro do header do seu HTML.

<link href="https://fonts.googleapis.com/css?family=Nunito:400" rel="stylesheet">

Trabalhando com o CSS

Neste momento precisamos pensar em instâncias. O Neon pode estar ligado ou desligado. Por isso, precisamos pensar nos objetos das duas formas.

Leia os comentários no código para entender o seu funcionamento.

<style>
		/*
		Configuração do container
		onde ficará os Neons
		*/
		.area_neon{
			background-color: #0F0F0F;
			font-family: 'Nunito', sans-serif;
			
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			padding: 20px;
			padding-top: 40px;
			position: absolute;
		}
		
		/*
		Base do Neon apagado (TEXTO).
		Iremos simular um efeito as lâmpadas
		de neon apagadas.
		*/
		.area_neon h1.neon{
			font-weight: 400;
			font-size: 7em;
			
			/**
			O filtro BLUR deve ser mantido em 0, porque 
			iremos usa-lo quando ligado.
			Para a animação de transição funcionar
			corretamente, ele precisa ser declarado
			mesmo desligado.
			**/
			filter: blur(0);
			
			/**
			Para simular a lâmpada, colocaremos um
			contorno bem suave, para delimitar o
			objeto, porém com o fundo
			quase transparente
			**/
			-webkit-text-stroke: 1px rgba(255,255,255,0.1);
			color: rgba(255,255,255,0.1);
			
			/**
			O TextShadow e o BackgroundClip
			irá servir para colocar um efeito de 
			profundidade no objeto
			**/
			text-shadow: -5px 5px 5px black;
  			-webkit-background-clip: text;
			
			/**
			O Transition é responsável por
			adicionar uma sensação de animação
			entre os eventos.
			**/
			transition: all ease 1s;
		}
		
		/**Texto com o Neon Ligado**/
		.area_neon h1.neon.on{
			/**
			Será fundametal o desfoque para dar
			a sensação de luminosidade.
			**/
			filter: blur(1px);
			
			/**
			Um objeto com luz precisa possuir seu 
			centro branco, caso contrário, vai dar
			a sensação de que está apenas com um
			sombreamento e não com luz.
			
			Por isso, devemos manter a cor branca,
			que vai representar o centro luminoso,
			e a borda da cor que desejamos usar.
			
			O TextShadow será a luminosidade do
			ambiente vinda da luz do Neon.
			
			O contorno e a sombra deverão ser
			da cor que você escolher para o neon,
			mas a cor do texto deverá ser sempre
			branca.
			**/
			color: white;
			-webkit-text-stroke: 1px #00FFB3;
			text-shadow: 0 0 5px #CCFFF7, 0 0 200px #00FFDB;
			-webkit-background-clip: none;
		}
		
		/**
		O neon para a imagem SVG terá que ser
		um pouco diferente, mas podemos
		manter a mesma lógica.
		**/
		.area_neon svg.neon_img{
			width: 50%;
			margin: 0 auto;
			
			/**
			Ao invés de usarmos color, usaremos 
			o parâmetro FILL para poder determinar a cor
			do objeto e o STROKE para a borda.
			
			Porém usaremos as mesmas lógicas
			usadas no Texto
			**/
			fill: rgba(255,255,255,0.1);
			stroke: rgba(255,255,255,0.1);
			
			filter: blur(0) drop-shadow(-5px 5px 5px black);
 			/**
			Usaremos o drop-shadow aplicado no filter,
			para poder ter o efeito similar ao do texto.
			**/
			
			transition: all ease 1s;
		}
		/**SVG com o neon Ligado**/
		.area_neon svg.neon_img.on{
			/**
			Aqui aplicamos a mesma lógica usada
			no texto, porém adaptada para o tipo de objeto.
			**/
			fill: white;
			stroke: #F0FF00;
			filter: blur(1px) drop-shadow(0 0 10px #F0FF00)  drop-shadow(0 0 200px #F0FF00) ;
		}
	</style>

Ligando o Neon

Vamos usar o Javascript puro para ligarmos a luz. Tudo o que precisamos é adicionar on ao parâmetro classe das tags HTML correspondentes.

Para isso vamos criar a função turnOn():

<script>
function turnOn(){
	var texto = document.getElementById("texto_neon");
	texto.className = texto.className.concat(" on");

	var imagem = document.getElementById("img_neon");
	imagem.setAttribute("class", imagem.getAttribute("class").concat(" on"));
	//Repare que temos que usar setAttribute no SVG. Isso porque o SVG não possui o mesmo comportamento de uma tag HTML comum
}
</script>

Agora vamos testar?

Você pode pegar o Código Completo deste tutorial diretamente no GitHub.

Download

Todavia, também podemos ter outros efeitos interessantes seguindo essa mesma lógica.

Feliz ano novo com Contagem Regressiva

Sabre Jedi (liga/desliga) com Som

Lembrando que todos os códigos demonstrados aqui podem ser baixados pelo GitHub.

Star

Deixe seu comentário e compartilhe este post. Curta a página do VelhoBit no Facebook! e entre para o grupo Design e Desenvolvimento.

Para entender mais sobre os emojis e sua história, primeiro precisamos entender sobre charsets e como o sistema operacional compreende e padroniza as informações referentes ao texto.

Do Bit à Organização

No princípio era o bit, o bom e Velho Bit . O caractere era traduzido diretamente de um conjunto de 1 byte e impresso no dispositivo de saída de acordo com as variações desse byte. Óbvio que falar que a letra A era equivalente a um conjunto de 1 e 0, logo se tornou ultrapassado e foi necessário codificar isso de forma mais inteligente. Com a popularização cada vez maior dos mainframes, os conjuntos de caracteres precisaram seguir padrões mais organizados e específicos para universalizar a escrita computacional. Foi nesse momento que foi criado o padrão hexadecimal para especificação de caracteres.

A programação hexadecimal, no início da era da computação, era muito usada para simplificar a compreensão de códigos. Posteriormente, com linguagens de programação, como o COBOL, a forma de escrita foi simplificada justamente a partir dos caracteres hexadecimais.

Porém, outros sistemas também foram usados para padronização de caracteres, como o próprio sistema decimal e o sistema octal. A partir dessa interpretação, foi criado nos anos 60 o primeiro documento oficial de padronização desses elementos, através de sistemas básicos, o ASCII (American Standard Code for Information Interchange).

O ASCII consiste em um padronização e é conhecido como o sistema básico de codificação de caracteres. Como a computação moderna nasceu nos EUA, é de se esperar que o padrão ASCII cobriria muitos caracteres usados em seu idioma. Por isso, era necessário que essa padronização fosse regulamentada a partir de uma entidade mais internacionalizada. Por se tratar de glifos, algo que já era padronizado em máquinas de escrever e prensas tipográficas, nada mais natural que a responsável por essa padronização fosse a ISO (Organização Internacional de Normalização), que é composta por vários países. De pleno acordo, foi criado o padrão ISO 646, formalizado como o padrão US-ASCII, por usar uma base de caracteres ocidentais norte-americanos.

A partir daí o ISO formalizou diversas outras tabelas de codificação de caracteres, gerando uma enorme variação adaptada para cada região ou base de caracteres, havendo variações latinas, saxônicas e orientais. Como muitos países possuem idiossincrasias em seus caracteres, a quantidade desses padrões foram crescendo e gerando uma dificuldade de controle, resultando quase em uma despadronização. Se você é programador, provavelmente já deve ter tido muitos problemas com a Windows 1252, que é uma vertente da normalização ISO 8859-1 e já deve ter tido que converter alguns arquivos por problemas de caracteres, seja no banco de dados ou na interpretação da leitura de arquivos.

O Consórcio Unicode

Visto que o ISO não era padronizado exatamente por uma organização da área de tecnologia, algumas questões acerca de caracteres ficaram insolúveis ou eram demasiadas burocráticas para fazer determinadas atualizações. Por isso, diversas empresas de tecnologia se juntaram para organizar um consórcio mais específico e organizado para uma diversidade maior de caracteres, em padrões adequados para a computação.

O Unicode (Universal Code) foi criado para organizar caracteres do ponto de vista mais computacional e adequado, baseado em experiencias anteriores da Xerox (sim, saíram muito mais coisas de lá do que apenas a interface gráfica). Fazem parte do Unicode empresas como a Adobe Systems, Apple, Facebook, Google, Huawei, IBM, Microsoft, Oracle Corporation, Yahoo! e várias outras que entram e aparecem, ou simplesmente seguem essas regras. Essa universalização foi fundamental para a criação de padrões que são altamente usados por praticamente todas as empresas no mercado de tecnologia. Sem dúvida, se você é programador ou designer, já deve ter usado constante, ou buscado por ele, o padrão UTF-8.

UTF-8 significa Unicode Transformation Format de 8 bits. É um padrão que, além de dar muito espaço para criação de caracteres, também é totalmente compatível com o padrão ASCII, tornando tudo mais simples e descomplicado para codificação adequada de caracteres. Existem outras codificações UTF, mas, por regra, o último numeral representa a quantidade de bits da codificação e, claro, quanto mais bits, mais espaço para adição de novos caracteres.

A Comunicação Social

Se por um lado haviam engenheiros desenvolvendo melhores formas de entrada e saída de caracteres, por outro a internet trouxe uma nova forma de se comunicar. Graças a velocidade com que as conexões foram ficando mais ágeis, diminuindo a distância entre os países, sistemas de chat foram ficando cada vez mais populares. Do antigo BBS ao mIRC, mais pessoas digitavam e buscavam formas mais simples e rápidas de demonstrar intenções e rostos a partir de padrões visuais. Foi daí que surgiram os famosos emoticons.

Emoticons (emotion icon) foi o termo dado a pequenas figurinhas que podia-se fazer a partir de representação com caracteres. Quem nunca usou o famoso , para representar felicidade, ou , para mandar uma piscadela charmosa? Isso acontece porque nosso cérebro é perfeito para reconhecer padrões e podemos criar assimilações de diversas expressões ou situações.

Logo, o emoticon se tornou algo popular, por se tratar de uma forma moderna e mais expressiva de comunicação. Se tornaram cada vez mais detalhadas e com mais caracteres e, muitas vezes, com caracteres pouco conhecidos, como ( ͡° ͜ʖ ͡°), ¯\_(ツ)_/¯, (╬ ಠ益ಠ) e até alguns que exigiam mais de uma linha e espaços de caracteres iguais.

Visto essa popularização, programas como MSN Messenger (mais tarde renomeado para Live Messenger), ICQ, Chat da UOL, dentre outros, começaram a introduzir ícones mais complexos que representassem essas expressões. Emoticons ganharam um status mais visual e reconhecível na comunicação e obtiveram o apelido de smiles, termo importado a partir do famoso símbolo Smiley, criado pelo artista gráfico Harvey Ball, e seguindo a mesma lógica estética.

Agora mais complexos, em PNG, coloridos e até animados, os emoticons se tornaram elementos obrigatórios na comunicação em programas de chats modernos.

E, Finalmente, os Emojis

Uma vez que os emoticons fizeram muito sucesso em chats e se tornaram uma forma padrão de comunicação na internet, as empresas que correspondem ao consórcio Unicode resolveram organizar para que os emoticons fizessem parte também de suas codificações de caracteres, a fim de que as pessoas pudessem receber emoticons padronizados e que as expressões fossem mais próximas possíveis uma das outras, para facilitar o entendimento. Daí surgiram os emojis.

Emoji é um termo japonês para pictograma, que ao pé da letra seria uma junção de imagem e letra e fora criado em 1999 por Shigetaka Kurita para uma plataforma móvel de internet. Em 2009, vendo a necessidade de melhorar a integração com seus dispositivos móveis, a Apple e a Google fizeram uma requisição ao consórcio para inclusão dos emojis dentro dos sistemas Unicode. A versão 6.0 do padrão Unicode, em 2010 trouxe ao mundo a integração com os emojis.

Com a popularidade do emoji pela adoção das frabricantes, a versão 7.0 do Unicode trouxe um pacote com 250 glifos inspirados em tipografias como Webdings e Wingdings. Até a finalização deste post, o Unicode Emoji estava em sua versão 11.0 (beta) com uma lista “xigante” de emojis vinculados ao UTF.

Dessa forma, é importante deixar claro que a inclusão de um novo emoji depende do requerimento de uma fabricante a aprovação de todo consórcio. Dessa forma, é criada uma padronização na visualização desses emojis. Todavia, ainda fica pendente a implementação desse emoji no sistema operacional usado pela fabricante e na atualização desse sistema. Por isso acontece de às vezes emojis enviados pelo iOS não serem visíveis em um Android, ou vice-versa, principalmente pelo problema de fragmentação deste último.

A Aparência dos Emojis

Apesar do acordo dos emojis especificar por escrito quais emojis podem ser aplicados, cabem as fabricantes disponibilizarem a aparência estética desses emojis. Ou seja, cada Sistema Operacional, ou determinados dispositivos e aplicativos, possuirão seus estilos de emoji, adequando-se ao design de sua aplicação. Isso as vezes causa problemas de interpretação, pois alguns emojis são extremamente diferentes entre fabricantes, como no caso do emoji do ET e do Robô .

Fazendo parte também do consórcio, mais recentemente a Adobe resolveu incorporar uma nova estrutura de font para a utilização de emojis personalizados. As fonts SVG foram especificadas por outro consórcio muito conhecido, a W3C, onde especificou o uso de SVG à estrutura de fonts vetoriais. Apesar de não ter sido muito adotada para web, e já estar sendo quase abandonada, a Adobe viu nessa estrutura a chance de lançar famílias tipográficas inteiras baseadas em emojis, que é o caso do EmojiOne. Porém existem também diversos serviços e bibliotecas que substituem os glifos específicos por um padrão personalizado de emoji, no caso para quem pretende usar algo mais personalizado para sistemas web.

Concluindo

Os emojis são o resultado de uma evolução natural da comunicação online. Elas são formas de demonstrar emoções e ideias com apenas um caractere e da forma mais universal possível. Não se trata simplesmente de uma terra sem lei, pois todos pertencem a um consórcio específico da área de tecnologia e as empresas devem seguir esses padrões para o funcionamento correto em navegadores e sistemas operacionais.

De código aberto, qualquer um pode acessar o site do Emoji Unicode e verificar suas tabelas e documentações para criar e implementar as próprias imagens ou comportamentos em seus sistemas.

Se você gostou deste post, compartilhe e, se quiser, deixe seu comentário.

Apesar dessas limitações, os softwares de ilustração e editoração tentam simular situações referentes a cores, formas e até possíveis erros. Já falamos, inclusive, sobre cores e como manter a fidelidade aqui mesmo no site. Porém, nem sempre essa simulação é perfeita, mas faz-se necessário indicar ao profissional possíveis erros. Por isso, o Illustrator pode apresentar comportamentos que podem parecer bugs, mas que na verdade são apenas alertas e devem ser interpretados como tal.

Um dos casos mais comuns e extremamente discutido nos sites de tecnologia é o caso de uma “borda branca” que fica ao redor de alguns elementos mais escuros ou pretos.

Diferentes tipos de preto

Primeiro precisamos reforçar: isso não é um bug. É um alerta do comportamento esperado para um determinado tipo de preto.

Na impressão existem diferentes tipos de preto. Os mais conhecidos são referenciados como preto simples, preto composto e preto absoluto.

Como já sabemos, quem trabalha com impressão costuma trabalhar no modo CMYK (ou outro modo subtrativo), onde temos a cor aplicada a partir de quantidade de pigmento no papel. O preto simples é aquele que possui apenas o pigmento preto em sua composição. Porém, o tom desse preto pode variar de acordo com a marca do pigmento, papel onde vai ser aplicado e da calibração da impressora. Todas essas variações acabam por causar uma sensação diferente de preto em cada impresso. Com o tempo, técnicas de calibração e padronizações, essa diferença tem diminuído, mas ainda existe. Nos softwares de edição, esse preto geralmente é representado por um cinza muito escuro. Apesar  disso não ser uma simulação absoluta, essa técnica é usada para que o profissional saiba onde está sendo utilizado o preto simples.

Por outro lado, as vezes a densidade do preto não é apropriada para o projeto, ou um erro de registro pode fazer com que fique uma borda branca ao redor do elemento. Existe várias formas para evitar erros visíveis de registro, como trapping ou, neste caso, sobreposição. Então o preto composto é uma técnica usada para diminuir erros de registro ou intensificar o tom do preto, onde é adicionado uma quantidade razoável de outros pigmentos nos elementos desejados da imagem.

Porém, há pessoas que exageram, aplicando o preto absoluto. O preto absoluto nada mais é do que aplicar 100% de todos os pigmentos disponíveis. Não é uma técnica recomendada, principalmente em alguns tipos de papeis, por poder causar borrões, relevo ou outros problemas que variam de acordo com a técnica de impressão usada.

Como Corrigir Esse “Problema”?

Isso na verdade não é um problema do Illustrator, é apenas um indicador. É a forma do Illustrator alertar o usuário que a impressão desse elemento pode causar erros de registro. Ou seja, não significa que essa borda vai aparecer, mas há boas chances de que, se ocorrer um erro na impressão, esse problema aparecerá.

Primeiro vale lembrar que isso só acontece em documentos abertos no modo CMYK. Então se você não está fazendo um documento para impressão, troque para o modo RGB e você não vai ter esse problema (Arquivo > Modo de Cor de Documento > RGB).

Porém, a forma ideal de resolver esse problema, é você aplicar uma quantidade razoável de outros pigmentos ao preto que você está utilizando. Por exemplo, se você está usando o preto para contornar algo magenta, acrescente cerca de 20% a 50% de magenta para esse objeto, o mesmo pode ser feito para outras cores.

Apesar de ser uma solução rápida para diversos casos, principalmente onde há muitas cores próximas, uma terceira possibilidade, porém não muito ideal, devido aos problemas já supracitados, é usar o preto absoluto, onde simplesmente é colocado C=100, M=100, Y=100, K=100 ao preto que deseja aplicar.

Melhorando a Qualidade da Compreensão de Cores

Se por um lado pode parecer incômodo esse alerta, por outro é ainda mais interessante que você busque uma visualização melhor do material que vai ser impresso.

Para isso, o Illustrator nos trás algumas configurações referentes a forma como o preto é demonstrado.

Para acessar essas configurações, vá ao meno Editar (ou Illustrator, no MacOS) > Preferências > Aparência do Preto. Nessa tela, você pode especificar como vai ser o comportamento do preto na impressão ou exibição. É extremamente recomendado que, se você vai trabalhar com algo que vai ser impresso, marque as opções como Exibir Todos os Pretos Com Precisão. O resultado vai ser uma emulação da diferenciação dos tipos de pretos, de acordo com a porcentagem de pigmentos que você aplicar.

Com tudo isso, podemos concluir que o caso da borda, queixa muito comum de usuários do Illustrator, nada mais é do que o indicador de comportamento de preto para impressão. É um caso específico do uso em modo CMYK e é bem-vindo para uma melhor qualidade do material final impresso. É interessante usar a visualização de preto composto, unido a visualização de cores de prova (Visualizar>Cores de Prova), para garantir um controle mais ideal e fidelidade.

Compartilhe este post com todos da comunidade de Illustrator ou com aqueles que você imagine que vai tirar um bom proveito das informações aqui passadas.

Obrigado pelo seu tempo.