Autor: Rodrigo Portillo

  • BitMail – Projeto de Envio de Mailmarketing em Lote

    BitMail – Projeto de Envio de Mailmarketing em Lote


    Download

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

  • Review do Pixelmator Pro

    Review do Pixelmator Pro

    Todo mundo que trabalha com design, fotografia ou simplesmente é um entusiasta em edição de fotos, certamento já deve ter ouvido falar do Photoshop. Todavia, há outras boas opções no mercado. Uma das mais recentes e mais fortes é o Pixelmator Pro, versão ainda mais completa do já muito bom Pixelmator, conhecido editor de imagens para Macintosh.

    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.

  • Efeito Neon com CSS 3, SVG e um tiquinho de Javascript (Texto e Imagem)

    Efeito Neon com CSS 3, SVG e um tiquinho de Javascript (Texto e Imagem)

    O final do ano é o momento perfeito para aprender CSS com efeitos divertidos para o Ano Novo. Graças aos navegadores modernos, podemos fazer animações e efeitos interessantes e divertidos de forma leve e funcional. Que tal fazer um efeito neon divertido e interessante sem nenhum framework?

    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.

    Opção de Exportar para Telas, no Adobe Illustrator CC
    Opção de Exportar para Telas, no Adobe Illustrator CC

    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?

    Clique aqui para ver em uma nova aba

    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


    Clique aqui para ver em uma nova aba

    Sabre Jedi (liga/desliga) com Som


    Clique aqui para ver em uma nova aba

    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.

  • Emojis 🤔. O Que São Realmente? Qualquer um Pode Fazer?

    Emojis 🤔. O Que São Realmente? Qualquer um Pode Fazer?

    ➡ Emojis estão alta na comunicação social e hoje são peças-chave em diversas mídias, sendo aplicadas mais e mais como uma espécie de linguagem universal. Mas afinal, de onde vieram os emojis e qual a diferença deles em relação aos antigos emoticons?

    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.

    Obs. Para quem não está acostumado com o termo hexadecimal, se trata de um sistema numérico com base em 16 digitos. Diferente do sistema decimal mais comum, que vai de 0 a 9, o sistema hexadecimal passa pelos digitos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Através desse sistema, é possível criar uma variação maior e mais adequada de numerais, o que auxilia na definição de elementos, como neste caso, caracteres.

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

    Table ASCII
    Table ASCII

    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.

    Unicode Logo

    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.

    Emoticons do Live Messenger - smileys
    Emoticons do Live Messenger – smileys

    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ô 🤖.

    Exemplos de variação de emojis do mesmo tipo
    Exemplos de variação de emojis do mesmo tipo

    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.

    A Adobe na sua atualização de 2016, trouxe algumas novas famílias tipográficas baseadas em emojis.
    A Adobe na sua atualização de 2016, trouxe algumas novas famílias tipográficas baseadas em emojis.

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

  • Borda Branca no Contorno Preto do Illustrator – Como Resolver?

    Borda Branca no Contorno Preto do Illustrator – Como Resolver?

    Muitas pessoas, principalmente os menos experiêntes, da área de design não conseguem imaginar o mundo antes da editoração eletrônica. E, realmente, quem não acompanhou sua evolução, pode acreditar que o WYSIWYG (What You See Is What You Get) é algo absoluto. Mas a verdade é que há limitações técnicas que impedem que o que seja mostrado no monitor seja exatamente o que vai ser impresso.

    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.

    Detalhe de Borda Esbranquiçada que fica ao redor de objetos pretos
    Detalhe de Borda Esbranquiçada que fica ao redor de objetos 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.

    Variações de Pretos
    Variações de Tipos de Pretos

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

    Erros de registro ocorrem quando, por algum motivo, as chapas de impressão não estão bem alinhadas, causando um posicionamento errado do local onde a cor foi originalmente planejada.
    Erros de registro ocorrem quando, por algum motivo, as chapas de impressão não estão bem alinhadas, causando um posicionamento errado do local onde a cor foi originalmente planejada.

    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.

    Tipos de Pretos Compostos

    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.

  • 🎃 Brincando de Assustar com CSS, HTML e um tiquinho de Javascript

    🎃 Brincando de Assustar com CSS, HTML e um tiquinho de Javascript

    Fotos misteriosas aparecem o tempo todo na internet. A grande maioria já foi provado ser uma farsa. Mas será que é possível criar alguma coisa para assustar nossos amiguinhos e, de quebra, ainda aprender um pouco sobre CSS?

    Mas é claro!

    Primeiro quero que entrem no site do Vale do Medo e vejam a história sobre essa foto (acima). Após olharem bem para a foto, por alguns segundos, volte aqui para o site para entender a pegadinha.

    Essa foto nada mais é do que duas imagens sobrepostas, sendo a de cima um PNG (onde está o homem sem rosto). Porém, a imagem que fica acima é restrita a qualquer ação com o mouse. Já se você tentar imprimir, o CSS vai cuidar para que o PNG não seja impresso. Além disso, tem uma pitada de Javascript (no exemplo, com jQuery), que vai cuidar para ativar o aparecimento e desaparecimento do homem sem rosto.

    Criando as imagens

    Originalmente foram baixas duas imagens da internet. Uma de um corredor qualquer e outra de um homem vestido todo de azul. As imagens usadas na postagem foram essas abaixo:

    Para poder dificultar encontrar a imagem no Google, invertemos a foto original e adicionamos um tom mais sombrio, azulado. Paralelo a isso, encontramos uma foto de um homem todo de azul, também no Google. E trabalhamos essa foto para ficar com um aspecto mais combinado com a foto original.

    É importante trabalhar com as duas imagens ao mesmo tempo, mas atento a deixá-las em camadas separadas. Trabalhar em sombras com transparências é fundamental para que a imagem fique mais realista.

    Exporte a imagem de fundo em .jpg e a imagem de frente em .png. Como a imagem PNG pode ficar um pouco pesada, dependendo do tamanho da imagem, acesse o site TinyPNG para reduzir ao máximo a imagem PNG.

    A imagem PNG vai ter na verdade vai ter as mesmas dimensões que a imagem em JPG, porém com uma área de transparência maior.

    Você terá então duas imagens, igual a como se faz em desenhos animados, onde o fundo é separado do objeto a ser animado.

    Código HTML

    Uma vez criado e separado as imagens, precisamos criar o código HTML. Para isso, devemos criar um container e dentro desta uma imagem, depois mais um outro container ou elemento similar. No nosso caso, usaremos uma div, um p e, claro, um img.

    <div class="imagem">
    <p><img src="fundo.jpg"/></p>
    <p>&nbsp;</p>
    </div>

    Esse pequeno trecho é mais do que suficiente.

    Código CSS

    Já para o CSS precisamos compreender um pouco de hierarquia e pseudo-classes. A div “imagem” será a referência para <p>, onde estará a imagem PNG. Logo, para que seus filhos possam se localizar, será necessário defini-la como relativa. Assim, os filhos que forem definidos como absolutos considerarão o ponto inicial (0, 0) o ponto referencial (x, y) de seu pai. Além disso, devemos colocar no <p> o background image onde ficará nosso PNG, ficando assim:

    .imagem{
        position: relative;
    }
    
    .imagem p{
        margin: 0;
    }
    
    .imagem p:first-child{
        position: absolute;
        width:100%;
        height:100%;
    
        background-image: url('homem.png');
        background-size: 100%;
        pointer-events: none;
    
        z-index:10;
    }
    
    .imagem p img{
        width: 100%;
        height: auto;
    }
    
    /*Será aplicado quando a imagem for dar o 'sustinho'*/
    .bu{
        transform: scale(3);
        left: 47%;
        /* O left 48 foi usado porque o homem na imagem está à esquerda*/
        /* Adicionar esse espaço foi necessário para centralizá-lo.*/
    }

    Muita atenção ao pointer-events: none. É esse o atributo que impedirá o botão direito, ou qualquer ação, de funcionar por cima da imagem do homem. Atenção também a pseudo-classe first-child, pois ela determina que o elemento a receber determinado estilo é o primeiro <p>.

    Observe que as larguras e tamanhos estão definidos como 100%. O que vai resultar em que o tamanho do conteúdo será relacionado ao tamanho do container.

    Porém, como fazer para que a imagem não seja possível imprimir?

    Media Queries não são apenas para responsividade de dispositivos móveis. Uma das coisas mais interessantes é poder especificar estilos para impressão. Simplesmente podemos adicionar algumas linhas:

    @media print {
    	.postid-265 .imagem > p:first-child{
    		display: none;
    	}
    }

    Javascript (jQuery)

    Agora vamos adicionar um pouquinho de Javascript. Vamos utilizar jQuery porque o WordPress e a grande maioria dos CMS usados para sites já utilizam essa biblioteca.

    Preste atenção para que a imagem fique oculta até que ela seja completamente carregada. Isso porque a imagem jpg tenderá, nesse caso, a ser mais pesada do que a PNG. Se as imagens estiverem visíveis antes, é possível que a imagem da mais leve seja mostrada antes da outra, o que vai estragar a sensação de ser uma única imagem.

    jQuery(".imagem").hide(); //Esconde a imagem
    
    //Mostra a imagem apenas depois que a imagem é carregada
    jQuery(".postid-859 .imagem img").one("load", function() {
        jQuery(".postid-859 .imagem").show();
    }).each(function() {
        if(this.complete) $(this).load();
    });
    //Faz a imagem do homem aparecer, adicionando uma classe a ela
    //Neste exemplo colocamos pelo scroll para contar apenas quando aparecer a foto
    $(document).scroll(function() {
        if ($(this).scrollTop() > jQuery(".postid-859 .imagem").position().top) {
             setTimeout(function(){
                  jQuery(".postid-859 .imagem > p:first-child").addClass("bu");
             },5000); //5 segundos
             //Faz a imagem desaparecer logo depois do susto
             setTimeout(function(){
                  jQuery(".postid-859 .imagem > p:first-child").hide();
             },5800); //5.8 segundos
        }
    });

    O código inteiro então ficaria:

    <div class="imagem">
    <div class="imagem">
    <p><img src="fundo.jpg"/></p>
    <p>&nbsp;</p>
    </div>
    <style>
    .imagem{
        position: relative;
    }
    .imagem p{
        margin: 0;
    }
    .imagem p:first-child{
        position: absolute;
        width:100%;
        height:100%;
        background-image: url('homem.png');
        background-size: 100%;
        pointer-events: none;
        z-index:10;
    }
    .imagem p img{
        width: 100%;
        height: auto;
    }
    /*Será aplicado quando a imagem for dar o 'sustinho'*/
    .bu{
        transform: scale(3);
        left: 47%;
        /* O left 48 foi usado porque o homem na imagem está à esquerda*/
        /* Adicionar esse espaço foi necessário para centralizá-lo.*/
    }
    @media print {
     .postid-265 .imagem > p:first-child{
     display: none;
     }
    }
    </style>
    <script>
    jQuery(".imagem").hide(); //Esconde a imagem
    
    //Mostra a imagem apenas depois que a imagem é carregada
    jQuery(".postid-859 .imagem img").one("load", function() {
        jQuery(".postid-859 .imagem").show();
    }).each(function() {
        if(this.complete) $(this).load();
    });
    
    //Faz a imagem do homem aparecer à frente, adicionando uma classe a ela
    //Neste exemplo colocamos pelo scroll para contar apenas quando aparecer a foto
    jQuery(document).scroll(function() {
        if (jQuery(this).scrollTop() > jQuery(".postid-859 .imagem").position().top) {
             setTimeout(function(){
                  jQuery(".postid-859 .imagem > p:first-child").addClass("bu");
             },5000); //5 segundos
             //Faz a imagem desaparecer logo depois do susto
             setTimeout(function(){
                  jQuery(".postid-859 .imagem > p:first-child").hide();
             },5800); //5.8 segundos
        }
    });
    </script>

    E agora, a imagem finalizada:

     

    Simples, não é?

    É uma brincadeira básica, mas ajuda você a pensar logicamente e a conhecer algumas coisinhas legais sobre CSS e Javascript. Deixe seu comentário.

  • Vamos falar sobre impressão?

    Vamos falar sobre impressão?

    Talvez um dos assuntos mais polêmicos na área do design gráfico é a preparação para impressão. Não espere aqui um tutorial sobre como preparar seu arquivo no Photoshop, Illustrator ou InDesign, nada disso. Precisamos falar sobre questões teóricas acerca da tecnologia da impressão para que você, designer ou aspirante, compreenda melhor e tome decisões racionais acerca do material impresso. Para isso, vamos precisar entender um pouco de história.

    O ano é 1985 e a Apple havia lançado a pouco o Macintosh. Esse computador nos trazia uma tecnologia surpreendente de uso de tipografias fantásticas na tela, porém, apenas na tela. As impressoras matriciais eram as principais tecnologias de impressão. A editoração eletrônica ainda era um mercado inexistente. Até que uma nova empresa apareceu no mercado, a Adobe, trazendo uma nova tecnologia no quesito de WYSIWYG (What You See Is What You Get – O que você vê é o que você obtém): a tecnologia PostScript.

    PostScript é uma linguagem de programação que descreve o comportamento de uma página para um dispositivo de saída, em especial uma impressora. Ela foi criada com o objetivo específico de montar páginas, imagens e tipografias para interpretação de impressoras à laser, fazendo com que o Macintosh realmente pudesse imprimir as impressionantes tipografias que estavam na tela. Graças a isso, foi criado um novo e fascinante mercado que abriu as portas da tecnologia da informação aos profissionais de design gráfico. Com o tempo, foi se tornando mais e mais integrada, graças a programas como o Illustrator, CorelDRAW, PhotoPhinish, Pagemaker e demais.

    Mas como funciona a impressora e a impressão?

    A impressora recebe as informações da página através de um sistema/equipamento chamado spooler. Esse spooler codifica e descreve as informações passadas pelo computador para informações que a impressora consegue interpretar. Existem diferentes tipos de impressoras e cada uma se comporta de uma forma específica, mas vamos nos focar nos tipos de impressoras que usam tecnologias WYSIWYG.

    Hoje, os dois principais métodos de impressão profissional mais usados são os chamados Impressão Offset Impressão Digital.

    Na Impressão Offset, a gráfica cria chapas de impressão, que serão usadas como uma espécie de “carimbo” para cada cor usada. Nas chapas, as retículas (pequenos pontos que compõe a imagem) já estão estabelecidas. O mesmo papel então passa por todas as chapas que “carimbam” a cor. Quando a impressora trabalha com mais de uma cor, as retículas, por estarem muito próximas, dão a sensação de que novas cores foram geradas. A esse fenômeno damos o nome de cores subtrativas. Ao usar o CMYK, quatro chapas passam pelo papel. Caso haja uma cor especial a mais, como dourado, prateado, verniz ou cores fora do gamut comum, uma chapa adicional é colocada para essa cor. Por usar chapas, ou seja, um processo mecânico e analógico, esse sistema é mais recomendado para grandes tiragens, pois a chapa é o maior custo da impressão, em contra partida a impressão em volume é muito mais rápida. Nesse caso, o PostScript está não na impressora em si, mas no equipamento que vai gerar a matriz.

    Exemplo de chapa flexível em uma impressora offset.

    Por outro lado, a Impressão Digital (nada a ver com o dedo) destina-se ao conceito mais linear onde a impressão das cores são feitas diretamente no papel simultaneamente, através de um processo direto sem matriz. Daí vem as impressoras à laser, jato, plotters, etc. Esse processo é muito interessante pois você tem uma resposta direta ao material que está produzindo. Para pequenas tiragens ele pode ser o ideal porque não precisa da criação de chapas, porém acaba por ser um processo lento por depender de informações passadas para a impressora. Nesse caso, o PostScript tende a estar diretamente na impressora ou em um spooler externo. A impressão digital também é muito usada para fazer provas, pois ajudará o gráfico (profissional de uma gráfica) a fazer ajustes e testes que calibrem melhor para aquele resultado aprovado.

    Hoje, a tecnologia de impressão digital vem melhorando muito, com impressoras cada vez mais rápidas e com mais quantidade de cores, garantindo melhor qualidade com degradês, que antes só eram atingidos por impressão offset. Não é muito incomum você encontrar processos híbridos, onde apenas as cores especiais são adicionadas por offset e a impressão CMYK é feita diretamente pelas impressoras digitais.

    Para entender mais sobre cores, leia nosso artigo sobre fidelidade de cores na impressão:

    Fidelizando as Cores de Impressão

    Quais são os tipos de imagens existentes?

    Antes mesmo de preparar o arquivo, precisamos entender os tipos de imagens computacionais existentes. Podemos gerar imagens de três de formas: Matricial, Vetorial e Fractal. Como fractal é algo específico para simulações e ambientação 3D, não iremos nos prender a esse tipo de imagem agora. Porém, se quiser saber mais, leia nosso artigo sobre O Número de Ouro no Design.

    Imagens Vetoriais: São imagens geradas a partir de cálculos matemáticos vetoriais, ou seja, que representam uma função e é estendida em um plano cartesiano. Cada função é definida por equações que determinam as localizações de seus pontos. São totalmente baseadas na geometria euclidiana e utilizam cálculos feitos em tempo real para imprimir a imagem na tela. O que é armazenado em memória são as informações das equações. A cada vez que a imagem é exibida ela precisa ser renderizada novamente pelo processador. Por ela ser gerada de forma dinâmica, a qualidade dela não é perdida, pois sempre que altera um tamanho são recalculados os traços a partir de novos valores dessa equação.

    São exemplos de arquivos de imagens vetorais os arquivos gerados nativamente pelo Illustrator, CorelDRAW e instruções como SVG, EPS, tipografias em geral, etc.

    O comprimento de um vetor é expressado pela seguinte equação (considerando apenas duas dimensões):

    Para adicionar mais dimensões (sim, é possível trabalhar com mais do que 3, mas aí você começa a adentrar o fractal), basta adicionar mais um somando à equação, que corresponda ao eixo desejado.

    Imagens Matriciais: São imagens compostas por uma matriz matemática que define informações através de blocos. Uma matriz nada mais é do que um arranjo (array) em duas dimensões. Cada informação pode conter outras matrizes, matematicamente falando, ou vetores nela. Imagens matriciais são altamente usadas na área de fotografia por poderem guardar informações individualmente em blocos. As imagens matriciais geralmente são confundidas com o modelo Bitmap, até por erro semântico de muitos softwares. Mas Bitmap é na verdade um modelo de cor usado em matrizes que possuem apenas duas variações em cada célula.

    São exemplos de arquivos de imagens matriciais os gerados nativamente por programas como Photoshop, CorelPhotoPaint, Paint, pós-processamento de máquinas fotográficas e instruções como JPG, TIFF, PNG, etc.

    Uma imagem matricial comum pode ser expressada da seguinte forma:

    Entretanto, as imagens matriciais não são apenas formadas por instruções fixas, elas podem ser formadas por camadas sobrepostas, chamadas de canais de cor, que não necessariamente precisam ser de cor, fisicamente falando, mas sim instruções relacionadas com suas matrizes.

    Por exemplo, uma imagem RGB possui 3 canais de cor, sendo uma camada para o vermelho, uma camada para o verde e uma para o azul. A Imagem CMYK possui quatro camadas de cor, sendo uma ciano, uma magenta, um amarelo e um preto. Algumas imagens também podem possuir mais camadas que representem cores especiais ou transparência, como no caso do RGBA, onde a quarta camada é chamada de alpha, que corresponde as instruções de transparência.

    Programaticamente, o que determina a quantidade de cores que uma imagem matricial pode ter é baseado na quantidade de variações de informação em cada vetor na célula de uma matriz. Ou seja, a quantidade de variações de cada camada de cor. Quanto mais bits em uma imagem, mais cores ela vai ter e é expressada matematicamente pela expressão X = (2^b)*c, onde X é a quantidade de variações, b é a quantidade de bits por canal e c é a quantidade de canais.

    Isso quer dizer que quando a imagem é dita que tem 8 bits e um único canal, ela só pode ter 256 variações (0-255), que é o modelo padrão dos tons de cinza. Caso eu adicione mais canais, no caso do RGB: 3 canais, eu vou ter 256 variações em CADA camada, ou seja, 24 bits. É possível aumentar a quantidade de bits por camada, como 16 ou 32, porém é necessário ter um monitor com um gamut de cores muito maior e também será necessário um poder muito maior de processamento para executar determinadas tarefas nessa imagem. Para a grande maioria dos casos, 8 bits de cor é suficiente. Até porque é raro encontrar impressoras e monitores que façam bom uso de um range superior.

    É importante salientar que todo vetor é convertido em matriz em um dispositivo de saída. Mesmo o PostScript sendo capaz de enviar e interpretar cálculos vetoriais, a impressora e o monitor dependem de pontos ou pixels para exibir as imagens.

    Resolução e Densidade de Pixels

    Diferente do que pode ser aprendido em muitos cursinhos e tutoriais do Youtube, a quantidade de PPI aplicada não é simplesmente 300 para impressão. Na verdade, isso vai depender da aplicabilidade do material que você está construindo.

    Resolução é um termo utilizado para compreender a relação entre a quantidade de pontos em uma imagem e o seu tamanho físico. Como estamos tratando de editoração eletrônica, deveremos considerar esses pontos = pixels (mais à frente abordaremos os pontos na impressão). Todo o monitor moderno é composto de uma matriz de pixels que possuem um vetor de 3 pixels dentro deles. Cada pixel no monitor representa diretamente um pixel do seu arquivo. Então quando é usada uma imagem com a resolução 1920×1080 (ou pouco mais de 2 megapixels, pois é o resultado da razão da multiplicação de largura e altura dividido por 1000² – pois mega representa mil kilos) não é uma definição de tamanho físico da imagem, mas sim da quantidade de pontos que a imagem vai ocupar em um dispositivo de saída. Por isso que uma imagem fullHD em um monitor 4K vai parecer menor, mesmo que as telas tenham o mesmo tamanho físico, pois o monitor 4K possui muito mais pixels na mesma área.

    A essa densidade de pixels damos o nome de PPI (Pixel per Inch) e ela representa a quantidade de pixels que temos em uma polegada. Dispositivos de saídas digitais são definidos em polegadas diagonais, ou seja, um monitor de 21 polegadas tem a dimensão de 21 polegadas em sua diagonal e a densidade de pixels é a razão entre a quantidade de pixels e suas dimensões. Por exemplo, um monitor de 23 polegadas, Full HD, vai ter menos pontos por polegadas que um monitor de 21 polegadas. Isso porque o monitor de 23 polegadas irá ter pixels maiores ou um espaçamento entre pixels maiores e, literalmente, a nitidez do monitor vai ser pior, por conta de sua baixa densidade de pixels.

    Quanto maior o PPI, maior a quantidade de informações em uma polegada diagonal, logo, a imagem será melhor.

    Com essa informação, podemos começar a tentar compreender como devemos preparar o arquivo para impressão, pois devemos definir a quantidade de pixels por polegadas para nosso trabalho. Mas aí entramos em um outro problema, as impressoras possuem pixels?

    Impressoras não possuem pixels, por tanto, não podemos aplicar a lógica do PPI em impressoras, mas sim o DPI (Dots per Inch) ou Pontos por Polegada. O DPI trabalha com as medidas físicas dos pontos da impressora. Na verdade, tratam-se de pequenas retas extremamente curtas, e por isso seu nome é retícula (lembre-se que uma reta é um conjunto de pontos que não podem ser reconhecidos).

    As impressoras trabalham com dois tipos de retículas, as retículas lineares e as retículas estocásticas. Ambos os tipos de retículas ainda podem ter variações em sua padronização e fusão (sobreposição), causando diferentes resultados. As retículas lineares são mais usadas em impressões offset e de grandes formatos. Elas causam um comportamento de pontos que chamamos de rosetas, que são essas pequenas “flores” geradas pela proximidade dos pixels. Essas rosetas podem ser de vários tipos e por isso cabe ao designer observar bem as chapas antes da impressão. Já em impressoras digitais, elas costumam resultar no que chamamos de retículas estocásticas (porém também há offsets que usam esse tipo de retícula), que possuem um pontilhamento menos uniforme e mais sobreposto. Essas retículas, por sua vez, podem ser organizadas de forma padronizada (onde elas respondem a uma lógica matricial) ou por erro difusão (onde são aparentemente mais aleatórias, mas compõe melhor a imagem).

    Dica: Para analisar a qualidade dos impressos, use um conta-fios. Caso você não tenha à disposição de conseguir um (pela dificuldade de encontrar), compre uma daquelas lentes macro de 10 reais para smartphones. São suficientes para você visualizar bem as retículas de seu projeto e analisar a qualidade da impressão ou da chapa.

    Então, o DPI, diferente do PPI, especifica a quantidade de retículas (ou pontos) supracitadas, em uma polegada quadrada, para ser impresso. Ou seja, uma imagem com muito PPI, por exemplo 600PPI, poderá ter uma perda de qualidade considerável caso a seja impresso em apenas 50DPI. Essa relação pode parecer um pouco complexa, mas o exemplo abaixo poderá ajudar a compreender a diferença.

    Existe uma relação entre DPI e PPI? Sim, mas não é um relacionamento direto. Essa relação é mais teórica para que o profissional possa escolher suas imagens (principalmente as que compra) de acordo com sua necessidade. Uma imagem que vai ser impressa em um outdoor, por exemplo possui apenas 10LPI, o que não faz sentido uma imagem muito pesada, se só vai imprimir a 20DPI.

    Sim, além de DPI, PPI, você também deve se lembrar de LPI. Em dispositivos que usam meio-tom (ou seja, que a percepção da graduação depende dos espaçamentos dos pontos), trabalha-se com uma unidade de medida de resolução chamada LPI ou Lines Per Inch. Essa unidade de medida usa a quantidade de linhas que há em uma polegada, porque essas linhas especificam os espaçamentos entre os pontos. Isto pois, os dispositivos que trabalham com LPI usam a base de retículas lineares padronizadas para poder gerar suas imagens. O cálculo na verdade é simples, x DPI = 2.x LPI.

    Atualização: Um rapaz na comunidade do Illustrator Brasil no Facebook me lembrou que o LPI não está relacionado apenas a capacidade técnica da impressora, mas a possibilidade do papel de suportar uma impressão mais precisa sem danificá-lo, a partir de sua gramatura. Vale salientar também que isso pode depender também do tipo de pigmento.

    Dessa formas deixamos claro que a relação entre DPI e PPI vai depender da complexidade do documento em relação a quantidade de pontos em sua impressão. Isso quer dizer que de nada adianta você ter uma imagem de 300PPI em uma impressão de 20DPI (como um outdoor), de modo que você pode usar imagens com menor resolução em pixels, garantindo uma maior agilidade e menor custo de desenvolvimento.

    ATENÇÃO: Muitas vezes alguns programas e gráficas confundem o termo PPI e DPI, por isso fique atento ao buscar ou utilizar uma imagem de qualidade suficiente.

    Tipos de Imagens

    Como estamos falando de editoração eletrônica, precisamos conhecer os tipos de imagens que temos disponível no mercado. Cada tipo de imagem trabalha com uma tecnologia específica de compactação e armazenamento, que faz com que ela seja mais ou menos ideal dependendo do tipo de trabalho que vai ser desenvolvida com ela.

    Além das imagens de projeto, como .PSD e .PSB (do Photoshop), .AI (do Illustrator), .INDD (do InDesign) e outros formatos que são específicos de certos aplicativos, devemos ficar atentos na hora de utilizarmos fotos e imagens para outros fins.

    Sempre que possível é imprescindível que usemos imagens vetoriais, pois elas irão garantir uma melhor adaptação a qualquer PPI ou DPI. Imagens vetoriais podem ser armazenadas em arquivos EPS, SVG e PDF, de forma a ser utilizada em QUALQUER programa gráfico. Mas o problema mesmo é quando entramos para a questão das imagens matriciais. Para imagens matriciais temos, como principais:

    PNG: Não deve ser utilizada de forma alguma para impressão. Ela só suporta 24 bits para cores, ou seja, não vai funcionar em CMYK, o que faz ser impossível incorporar um perfil de cor ideal para impressão nela. Muitas pessoas a exportam por conta de sua possibilidade de trabalhar com 32 bits apenas para o canal alpha, de forma a produzir transparência. Mas mais cedo ou mais tarde, ela vai ter que ser convertida para outro formato para imprimir (mesmo que você não perceba), e isso vai causar uma perda de qualidade das cores.

    JPG: Não deve ser utilizada para impressão também. O JPG, ou Jpeg, é um tipo de compactação que remove pixels com cores e tons similares e os deixa iguais a outros, reduzindo assim a quantidade de variações dentro da imagem matricial. A imagem JPG compacta essas informações dos pixels e reconstrói as imagens sempre que é aberta. A questão é que sua qualidade de compactação depende de quantos pixels similares ela vai “juntar” em um único modelo de pixel, criando artefatos e borrões. Essa compactação não é tão visível em um display, mas é extremamente visível na impressão, principalmente nas de alta qualidade, por isso não se deve usar esse formato.

    TIFF: Agora sim um formato ideal para impressão. Além do suporte a diversos canais (inclusive o alpha), ele permite que você use compactações que não agridam a qualidade da imagem, como o LZW e o ZIP. Estas compactações não removem informações da imagem e isso até ajuda para uma modificação posterior. Em contra partida, por ser bem pouco compactada e compactável, o TIFF apresenta um peso até 40 vezes maior em tamanho de arquivo do que o JPG, mas com uma qualidade infinitamente superior.

    Como preparar as fotos e imagens para impressão?

    A preparação do arquivo para impressão deve começar desde sua criação. Começando pelas imagens.

    O ideal é que antes mesmo de começar a ajustar as fotos, você já saiba qual gráfica vai utilizar. Caso não saiba, você pode configurar (em caso de impressão no Brasil), seu perfil de cores CMYK para FOGRA39, que é uma convenção nacional. Muitas gráficas optam por enviar um arquivo de perfil ICM ou ICC para você. Se for o caso, importe o perfil enviado.

    No Photoshop:

    No Illustrator:

    Caso você use programas similares, como o Affinity, CorelDRAW, Inkscape ou Gimp, procure em suas documentações sobre o gerenciamento de cores.

    No caso do Photoshop, você pode trabalhar o arquivo em RGB sem problemas. O importante é você se certificar que está trabalhando com cores de prova. Para isso, acesse o menu Visualizar > Cores de Prova e você poderá trabalhar com cores mais próximas ao impresso, caso seu monitor esteja corretamente calibrado. No caso do Illustrator, essa opção pode ser trocada no menu Arquivo > Modo de Cor do Documento > CMYK e você vai trabalhar com cores mais próximas ao impresso.

    Definir 300 DPI PPI é verdade ou mito que é para impressão?

    Mito. Isso dependerá completamente do que você vai trabalhar. Outdoors ou outros impressos cujo DPI da impressora não será muito grande, pode utilizar tranquilamente poucos Pixels por Polegada na imagem e não terá perdas de qualidade. Mas se você vai trabalhar com altíssima definição de impressão com até mais que 1000 DPI, e que se trata de conteúdo para ver de perto, você deverá usar imagens com um PPI muito maior.

    Em geral, se a ideia for reutilizar a imagem, é ideal que você trabalhe com uma quantidade mais alta de PPI para poder reutilizar em outros projetos. Geralmente para revistas, você deve considerar algo como à partir de 300PPI e não 300PPI exatamente. Quanto mais PPI mais nítida vai ser a imagem final, e em caso de revistas o DPI da impressão costuma ser bem mais alto.

    Em contra partida, se o seu foco for ePub ou algo web, depende do seu público. Como calculamos acima, a densidade de pixel média atual para um monitor é de 96PPI. Porém, para smartphones, pode chegar a até mais de 400PPI, então isso vai depender do uso que você fará da sua imagem.

    Atenção a você que é usuário do Illustrator. Você deve configurar para que a renderização de efeitos seja feita em 300PPI, caso contrário você poderá encontrar problemas na qualidade da impressão dos mesmos. Uma opção similar deve ser configurada caso use o CorelDRAW ou Inkscape, por isso, fique atento também.

    Finalizando o arquivo para Impressão

    É importante salientar que os arquivos a serem enviados para a gráfica devem ser o mais bem finalizados possível de acordo com o que a gráfica pede. Siga os padrões pedido pela gráfica e sempre envie os arquivos em PDF. Mas atenção, PDFs tendem a compactar imagens em JPG nos padrões pedidos por muitas gráficas (A maioria pede X1-A). Por isso, opte por desabilitar a compactação das imagens de seu PDF quando for gerá-lo em seu programa.

    Fique atento também para incorporar o perfil de cores ao arquivo para que ninguém cometa uma gafe na hora de abri-lo, pois o programa da pessoa pode estar com outro perfil de cores configurado. A incorporação do perfil garante que o que você escolheu esteja atrelado ao arquivo (sabe aquela mensagem sobre perfil que aparece as vezes quando você abre um arquivo no Photoshop?).

    Outra opção que você tem ao salvar arquivos para impressão é através do EPS (Encapsulated Post Script) que, diferente do PDF, possui uma informação de página por arquivo. Ou seja, um arquivo uma página. A vantagem desse formato está principalmente na impressão de livros. Apesar de não fazer mais tanta diferença hoje em dia, antigamente o tempo para envio do arquivo para o spooler era muito longo. Esse tempo quando se fala em um livro ilustrado de 400 páginas acabava por sendo muito demorado. Com o EPS você pode enviar apenas a página que pode ter tido um eventual problema, agilizando o processo de produção.

    A seleção de DPI é feita apenas no momento da impressão e se a impressora tiver suporte ao DPI desejado. Nem todos os programas possuem essa opção nativamente, mas você sempre poderá configurar o DPI através das opções do sistema operacional. No caso do Windows, as opções avançadas da impressora garantem o acesso ao DPI da impressora (mesmo as caseiras, como na imagem abaixo).

    Concluindo

    Apesar de parecer um pouco longo, este artigo é apenas uma breve pincelada para introduzir questões acerca de uma melhor impressão. Para saber mais, consulte termos como tipos de rosetas, tabelas de LPIs, moiré, trapping, tipos de impressoras, impressão sobreposta, dispositivos de saída e outras coisas sobre impressão.

    Se você ainda não o fez, visite uma gráfica offset e peça para acompanhar o processo de impressão passo a passo. Acompanhe como os profissionais gráficos trabalham, para que você possa entender determinados pontos do processo. Por fim, evite ao máximo gráficas online, pois você não possuirá o controle real da prova e analisar o resultado final da impressão em tempo hábil será uma tarefa difícil.

    Para tirar dúvidas, ente no grupo de Design e Desenvolvimento no Facebook.