➡ 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
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.
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
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.
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. 😘
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
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 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.
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.
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.
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:
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> </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.
Identidade Visual é a representação gráfica de uma empresa, instituição, produto ou ideia. Trata-se de ícones, símbolos ou tipos organizados de forma estética com um significado objetivo atribuído.
Mas e logomarca? Existe ou não existe?
Há uma discussão muito grande em torno dos termos logomarca, logotipo e identidade visual, dentro da área do design gráfico e publicidade. Diversos livros sobre publicidade definem logomarca como sendo uma coisa diferente de identidade visual, confundindo por diversas vezes a definição deste último com o de identidade corporativa.
Muitos sites e designers defendem o termo logomarca, ou o atacam, utilizando argumentos como origens etimológicas ou a popularização do nome. Mas é nítido que usar um termo errado pode complicar a comunicação com outros profissionais ou, simplesmente, torná-la menos prática.
Logomarca é uma dos diversos erros de interpretação de palavras estrangeiras como tantos outros que existem no português brasileiro. O termo foi usado como tradução livre da palavra inglesa logo mark. No inglês, a palavra mark é usada como sinal, notação, aceno, algo que aponta para algo visível, ou seja marcação. A marca, como usamos, no inglês é escrito como brand. Não é incomum termos palavras usadas de forma errada devido a traduções brasileiras. A palavra porta, por exemplo, como em porta UBS, é uma tradução errada de port, que significa porto (local de entrada e saída de items). Ou até de neologismos como customizar (do inglês custom) e randômico (do inglês random), que em português seria personalizar e aleatório respectivamente.
Em alguns livros de publicidade, entretanto, é fácil encontrar o termo logomarca e vários publicitários o utilizam normalmente. As definições mais comuns nesse meio diferenciam Logomarca de Identidade Visual afirmando que, o primeiro, trata-se da criação gráfica pura, sem conceito, enquanto que o segundo seria a logomarca vinculada a um conceito. Entretanto, como um designer pode desenvolver um projeto sem criar um conceito e um estudo? Seria no mínimo irresponsabilidade.
Em resumo, logomarca é uma tradução inapropriada do termo logomark que, por sua vez, foi originalmente usado para representar símbolos e marcações de empresas em diversos ambientes. O uso do termo logomarca pode ser usado sem problemas entre leigos, para facilitar a comunicação, mas deve ser desencorajado em ambientes profissionais.
Mas e quanto a logotipo?
O logotipo, assim como o símbolo, é uma parte da identidade visual, trata-se da parte referente a tipografia, não pura, mas a tipografia “estilizada”. O logotipo é a tipografia modificada e organizada para se comunicar com o conceito e o símbolo (quando houver). Algumas identidades visuais são compostas apenas de logotipo, como a Samsung, a Aiwa, dentre outras. As vezes a identidade visual é composta somente de símbolo, como a Apple e a Pepsi.
Mas afinal, quanto custa uma identidade visual?
O custo de uma identidade visual depende principalmente da responsabilidade acerca dela. Basicamente da quantidade de pessoas que irão apreciá-la, da quantidade de lugares que ela será exposta, diversificação de público, valor de mercado e sua importância para a venda do produto.
Sendo direto, o valor médio de uma identidade visual gira em torno de R$8.000,00 para pequenas empresas. Esses são os valores baseados em algumas tabelas verificadas como a ADG, Adegraf, Abap, dentre outras. Essas tabelas já foram poucos praticáveis e com valores bem mais altos, mas adaptações mais recentes trouxeram para uma realidade mais aceitável.
Para empresas de médio e grande porte, o valor vai depender muito da importância da marca em relação ao produto. Partindo de 10 mil à milhões de reais.
Por exemplo, uma marca que não é focada no consumidor final tende a ter uma responsabilidade menor que o oposto, possuindo assim um custo de produção menor.
O custo de um serviço como esse não deve estar atrelado ao tempo ou horas, mas sim à responsabilidade. O tempo que o designer leva para projetar ou tomar decisões não é proporcional ao seu estudo e conhecimento prévio, ao contrário. A tendência é que profissionais com mais experiência consigam tomar decisões mais rápidas, porém bem pensadas.
Rascunho da criação da identidade visual da Atlasian
Por que esse valor supostamente tão alto?
Criar uma identidade visual não é algo simples. Todo o comportamento gráfico da empresa vai girar em torno dessa identidade. Todas as cores, tipografias, formas, campanhas publicitárias, etc. vão ser baseadas nas decisões tomadas pelo designer responsável por essa identidade visual.
Desde o site até o endo marketing, tudo vai girar em torno dos conceitos criados para essa identidade. Conceitos esses que vão perdurar por anos e serão determinantes para o sucesso da empresa.
Essas escolhas são pensadas a partir de estudos profundos sobre mercado, concorrência e público, seguindo o planejamento estratégico da empresa. Além disso, o designer precisa pensar na complexidade, relacionamento com outras marcas, tamanho mínimo e máximo, possibilidades de uso, acessibilidade, adequação, etc. E nem todo designer está apto a fazer qualquer identidade visual. Muitas formas de comunicação estão agregadas a estilos e compreensão aprofundada de um público e direcionamento específico. Por isso, estúdios de design consideram pessoas diferentes para nichos diferentes.
Apesar de alguns atropelos do jornalista, o mini-documentário Alexandre Wollner e a Formação do Design Moderno no Brasil, ajuda a entender melhor a importância do desenvolvimento do design de uma identidade visual (é um vídeo um pouco cansativo, mas muito instrutivo).
Identidades Visuais de Alexandre Wollner
Valores das Gráficas Rápidas e Pseudo-Designers
Uma identidade visual definirá como a empresa será representada por anos. É uma compactação do conceito da identidade corporativa da empresa, é a imagem fixa de seus consumidores e apreciadores. Por isso, existem estudos, testes de comportamento, escolha de cores, medidas, formas e padrões baseados em antropologia e interpretações sociais. É necessário conhecer a empresa, pesquisar histórico, o comportamento dos consumidores atuais e dos quais se deseja atingir.
Mas não é isso o que acontece com gráficas rápidas e pseudo designers. Estes simplesmente abrem um “CorelDRAW” e começam a pegar pedaços de identidades visuais e “logomarcas” que encontram em sites de pesquisas, como o Google. Alguns usam imagens prontas de sites como o freepik, sob a justificativa de ser aberto para qualquer um usar. Com isso, montam algo não apropriado, sem estudo e conceito, igual a montar um quebra cabeças de vários jogos diferentes e ainda colar o encaixe das peças com cola branca.
Com isso, como não há um real trabalho sério e acabam por cobrar valores irrisórios como 120 ou no máximo 300 reais, mas que geralmente não tende a ser algo funcional.
Então empresas muito pequenas não podem ter identidades visuais?
Podem, claro. Mas primeiro vamos entender a necessidade de cada empresa.
Uma padaria pequena não necessariamente precisa ter uma identidade visual própria. Muitas nem mesmo tem fachada e apenas escrevem o nome “Padaria (…)” em seu topo. Alguns fazem apenas letreiros mais bonitinhos, onde o profissional é contratado para fazer um letreiro (e não a identidade visual) o que justificaria, nesse caso, usar imagens do freepik ou sites similares.
Todavia, chega a um momento na vida de um empresário em que ele realmente quer fazer algo que represente a marca dele. Na grande maioria das vezes, esses pequenos comerciantes buscam ajuda do Sebrae ou de consultorias que os auxiliam e buscam profissionais para fazer esse serviço.
É aí onde deve entrar o estudante ou o profissional ainda novato. E como estudante não me refiro a universitários apenas, mas àquela pessoa que se interessa em aprender. Refiro-me as pessoas que leem livros teóricos, que começam a estudar colorimetria, psicodinâmica, física, psicologia, filosofia do design, etc. e não simplesmente as pessoas que acompanham tutoriais na internet. Esses indivíduos precisam fazer seu portfólio e desenvolver trabalhos próprios, por isso não só podem como devem cobrar menos.
É muito provável que alguém inexperiente cometa alguns erros básicos, por isso que estão começando com negócios pequenos em que a responsabilidade não seja tão grande (mas ainda sim há). O importante é a ética e o comprometimento de tentar fazer o melhor que puder, sem roubar imagens prontas da internet e revender (o que é até ilegal).
Esses aspirantes podem cobrar valores de no mínimo R$1.200,00 reais e ir aumentando com o tempo. Vale lembrar que os custos de um profissional ou de um aluno são maiores do que parecem, e o tempo para o desenvolvimento de uma identidade visual séria gira em torno de um mês. Esse valor serve como uma base para iniciar no mercado.
Nomes como Paul Rand, Massimo Vignelli e o próprio Alexandre Wollner são exemplos clássicos de profissionais focados na criação de identidades visuais e responsáveis por diversos trabalhos importantes pelo mundo. Sendo estes referência para estudo e inspiração.
American Airlines – A identidade visual original foi criada por Massimo Vignelli
Concluindo
Criar uma identidade visual é um trabalho dispendioso e pode se estender por meses dependendo da importância do projeto. Não é o tipo de trabalho que pode ser feito em poucos dias ou em duas semanas. O contratante tem que estar ciente que é algo que vai muito além de gosto e a decisão do que haverá na identidade visual deverá ser do profissional capacitado. A opinião e decisão de formas, cores e padrões não podem partir de pessoas inexperientes, pois elas tendem a basear suas escolhas em gostos pessoais. Como um médico que faz um diagnóstico e passa os remédios corretos, o mesmo fará o designer, e a receita deve ser seguida à risca para um bom resultado.
Criar uma Identidade Visual é responsabilidade demais para uma Gráfica Rápida fazer ou um pseudo profissional. Além disso, o preço ridículo cobrado por esses engôdos faz com que os empresários não compreendam os reais custos de um profissional, além de sujar a imagem da categoria.
As empresas também precisam entender que a identidade visual é de uma importância incomensurável para a empresa. Um designer de verdade não está lá para agradar seus clientes diretamente, mas o cliente do seu cliente. A função social do designer é ajudar a melhorar os resultados de uma empresa ou artefato.
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 e 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:
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ãoX = (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.
Quando se fala em design, muitas pessoas compreendem como algo artístico ou estético, geralmente relacionado com o visual. Mas design vai muito mais além. Design é projeto. É entender o comportamento do usuário de acerca de um artefato e otimizar para que sua função seja executada da forma mais simples e objetiva possível.
Na área de TI, temos uma vertente do design que é chamada de Design de Interação. Como o próprio nome diz, corresponde aos fatores de interatividade do usuário com o sistema. É função do designer de interação projetar como o usuário vai enviar, receber e responder (ou seja, interagir) o sistema ao qual está usando. Por conta disso, o designer de interação precisa possuir uma série de habilidades específicas que adentram a área de desenvolvimento como um todo, com conhecimentos que vão desde movimentos artísticos à performance de banco de dados. Abaixo vamos listar as algumas das competências agregadas a um designer de interação.
Estética
Sem dúvida a parte do design que as pessoas mais lembram é a estética e por isso estamos falando dela primeiro. A estética depende do conhecimento relacionado a arte e filosofia. Estética não significa beleza, mas sim ajustar a aparência de acordo com a proposta do projeto. Muitas vezes, a estética é uma consequência de algo bem desenvolvido e é a última parte em que o designer trabalha.
Um termo muito usado na área de TI para se referir a estética de um sistema ou aplicativo é Look & Feel (Aparência e Sensação). Esse termo define a sensação que o usuário tem acerca de todo padrão estético de uma interface gráfica. Essa ideia é clara a medida em que as pessoas tendem a sentir sensações distintas ao utilizar aplicativos e, principalmente, sistemas operacionais diferentes. A sensação de usar o Windows, o MacOSX ou uma GUI (Graphic User Interface – Interface Gráfica de Usuário) para Linux / Unix, mesmo que usando o mesmo aplicativo, é diferente e até um pouco difícil de explicar tal diferença.
Legibilidade
A legibilidade é um conceito que envolve a compreensão simples dos elementos da tela. Lembre-se que, dentro da visão de comunicação, texto não são somente palavras escritas, mas sim qualquer símbolo que possua um significado, como um ícone, uma imagem ou um som. A legibilidade é o que torna o texto compreensível em seu contexto. Trocando em miúdos, trata-se de como os elementos podem ser facilmente interpretados pelo usuário.
A legibilidade vai desde as escolhas dos termos e palavras escolhidas à iconografia e tipografia. Até mesmo qual fonte será usada e sua espessura, se os ícones forem esqueumórficos ou minimalistas, se os espaçamentos vão ser maiores ou menores, tudo isso está envolvido no conceito de legibilidade.
É neste ponto do projeto que também se pensa em contrastes. Compreende-se contraste não apenas a diferença do preto no branco, mas em todas as reduções de nuances que facilitam a legibilidade. Quanto menos etapas de algo, mais contraste ela tem. Grande/Pequeno, Claro/Escuro, Cores Opostas, etc.
Usabilidade
Uma das principais preocupações do designer de interação é o quão fácil pode ser para o usuário chegar ao seu objetivo. A usabilidade está vinculada a legibilidade, mas vai além. Para isso, o designer precisa definir elementos que direcionem a atenção do usuário e que facilite a localização instintiva dos items interativos. É pensando na usabilidade que o profissional irá diagramar a tela e preparar protótipos de comportamento.
Dentro da usabilidade, o Designer de Interação deve fazer pelo menos um desses materiais:
Wireframe: Trata-se de um rascunho que define as funcionalidades do sistema. Pode ser um desenho à mão ou feito no computador, mas não possui compromisso com a fidelidade do projeto final. Sua importância é definir conceitos básicos enquanto está sendo desenvolvido o design final da interface.
Mockup: Imagens estáticas que representam as interfaces com a aparência mais próxima possível da final. O objetivo é demonstrar para equipe ou para o investidor como o projeto deverá ficar no final. O mockup também serve como base para criação do código referente a GUI do sistema.
Protótipo: Similar ao Mockup, porém simulando as interações, com ações de cliques e movimentos. Contudo, os dados geralmente são fictícios e funciona em ambiente controlado. Seu objetivo é permitir um melhor planejamento da interação, como também mostrar exemplos a investidores ou usuários teste.
É fazendo testes de usabilidade que o designer de interação vai determinar diversos fatores de espaçamentos, tamanhos de ícones e acessibilidade. Ainda, é neste momento que deve-se sair da zona de conforto e experimentar o leiaute em diferentes contextos.
Funcionalidade e Programação
Design é dar uma função à forma. Uma forma sem função, sem motivo de existir, não é design, mas arte. Diferente da arte, o design necessita de um função à quem este serve. Tudo o que se decide em um projeto, desde a sua elaboração estética até sua agilidade, existe para retornar um resultado, que é o objetivo da existência de um determinado sistema ou aplicativo.
Por isso, o designer de interação não deve apenas conhecer da parte gráfica e estética, mas também das idiossincrasias referente a área na qual está trabalhando. Neste caso, tecnologia e desenvolvimento.
Assim como um designer de moda precisa entender de costura e um designer de interiores de arquitetura, um designer de interação precisa saber como programar, ao menos o front-end, e como implementar o design que ele próprio elabora. Mesmo que ele não seja o responsável direto por aplicar esse código, é necessário que possua um conhecimento profundo de front-end e razoável quanto a back-end e banco de dados. Inclusive, muitas vezes, a responsabilidade de criação de novos componentes de interatividade é justamente do designer de interação.
Isso é necessário pois a Experiência do Usuário (UX- User eXperience), item chave do trabalho de um designer de interação, depende de todos os fatores tecnológicos que acompanham o desenvolvimento de um projeto (e até mesmo antes do usuário ter acesso ao sistema). Em determinado ponto, o designer precisa testar a confiabilidade dos dados, o tempo de resposta, praticidade de atualização, necessidade de fragmentação e, inclusive, o tempo de reparo de um eventual problema e a saúde do código. O relacionamento com o programador as vezes é esquecido, mas a experiência do programador e dos outros profissionais da empresa são tão importantes quanto a experiência do usuário, pois isso se refletirá em todo desempenho e qualidade do projeto.
Afim de compreender, conversar, sugerir e implementar, o designer de interação precisa ter conhecimentos específicos de diferentes linguagens de programação e marcação, além de suas tecnologias agregadas, tendo foco principalmente (mas não apenas) no front-end, como:
HTML;
CSS;
Javascript;
Lógica de programação;
Documentos DOM específicos de algumas plataformas;
Kits de plataformas (como Android Kit, iOS e UWP);
Linguagens Back-End como PHP, Java, Python, ASP ou outras que forem sendo necessárias aprender em seu cotidiano.
Ambiente Controlado vs Produção
Se por um lado o designer de interação deve possuir conhecimentos acerca do comportamento e da área de tecnologia, por outro, grande parte daqueles que se afirmam profissionais não estão trabalhando pensando em ambiente de produção.
Não é incomum ver os chamados “Designers de Dribble“, ou “Designers de Ambiente Controlado“. Basicamente, quando alguém busca no Google por UI Design vai encontrar centenas de interfaces impressionantes e incríveis, com cores vibrantes e lindas que nem a Apple conseguiria fazer tão perfeito. A verdade é que esses designs funcionam apenas em ambiente controlado, que não representam a usabilidade real e ainda frustram aqueles que estão começando.
Na próxima vez que buscar por inspiração (se for o seu caso), comece a refletir quando achar algo no Google, coisas como: E se o nome da cidade for maior do que o desse exemplo? E se o número nessa área superar o esperado? Será que o usuário vai compreender esse nome truncado? Qual o tempo hábil para fazer determinado efeito e se vale a pena? Qual o funcionamento em telas menores? Além disso, uma das coisas mais complexas do design de interfaces é criar padrões para formulários que sejam funcionais independente do tamanho de seus dados ou localização. O que é ainda mais complicado em sistemas densos como ERPs e outros específicos.
Pensando nessas respostas é que empresas que desenvolvem sistemas operacionais possuem suas próprias guidelines, que descrevem o comportamento de usabilidade em ambientes reais e traz fortes sugestões de padronização.
Claro que um profissional não precisa seguir à risca esses padrões, porém eles são fundamentais para a base do desenvolvimento de interfaces mobile e desktop pois não é bom que fujam demais do padrão do Sistema Operacional e o usuário sinta-se perdido. Entretanto sites e sistemas web possuem maior flexibilidade, ficando a cargo do Designer de Interação desenvolver o próprio Guidelines para os serviços e produtos relacionados com esse sistema.
Concluindo, Design é Projeto
Design não é desenho. Design não é ilustração. Design não é leiaute. Design é projeto. Então, diferente do que muitos pensam, alguns inclusive que se intitulam design, a área não é arte pela arte. O design serve à função e, como tal, o profissional que projeta algo precisa possuir conhecimento em diversas áreas relacionadas àquela específica vertente na qual está trabalhando. Logo, o designer de interação, além dos conhecimentos empíricos do design, como tipografia, colorimetria, filosofia, matemática (geometria), antropologia e comportamento, também precisa possuir a habilidades específicas em programação front-end e back-end (full-stack), história e negócios da área de Tecnologia da Informação.
Se você gostou deste post, curta e compartilhe ele nas mídias sociais. Caso não tenha gostado, tenha alguma dúvida ou queira fazer uma observação, deixe um comentário.
Inteligência artificial é um tema que está em discussão constante no novo milênio. O uso de chatbots tem sido cada vez mais utilizado em diversos ambientes, seja para atendimento, monitoramento, suporte ou outras aplicações diversas. Designers de Interação e Programadores tem usado cada vez mais essas tecnologias para poder criar uma experiência melhor e mais dinâmica para o usuário.
Dentro da área da computação cognitiva, uma das empresas que está em muita evidência no mercado é a IBM, com sua tecnologia Watson.
A tecnologia Watson é uma amálgama de serviços de inteligência artificial que permite ao desenvolvedor criar plataformas de comunicação automatas com seus usuários. Para isso, a IBM disponibiliza diversas APIs de comunicação com determinados serviços. Para nosso exemplo de chatbot usaremos o serviço de Conversação do Watson.
Criar um chatbot com o Watson é bem mais simples do que parece. Porém, devemos deixar claro que a proposta deste tutorial é ser básico, ser um ambiente de entrada, simplificado porém funcional para o desenvolvedor ou designer interessado nesse tipo de tecnologia.
Atenção, você precisa de um servidor que possa ser autenticado na internet. Ou seja, não adianta testar de Xampp ou Wampp, você precisa testar ao menos de uma hospedagem compartilhada.
Preparando o Ambiente
Primeiramente você vai precisar de uma conta na Bluemix. A Bluemix é uma plataforma em nuvem de projetos da Big Blue (apelido dado a IBM pelo mercado). Para isso, basta entrar no site da empresa e clicar em Teste Gratuito 30 Dias.
Depois disso, siga as instruções para você preencher os seus dados básicos.
Após o preenchimento de seus dados, será pedido para você criar uma organização. Por algum motivo, você não verá a opção de América do Sul referente ao local, todavia você pode continuar selecionando SUL DOS EUA que não vai impedir o funcionamento do chatbot. Simplesmente siga as demais opções até chegar ao final.
Assim que você finalizar, é possível ver uma área para criar Apps. Por hora você pode ignorar completamente isso. À primeira vista, o Bluemix parece ser um pouco difícil de navegar e encontrar algo por conta da diversidade de opções e APIs disponíveis.
No canto superior esquerdo você vai ver um menu hambúrguer. Clique nesse menu e selecione a opção Serviços. Lá, você vai ver a opção Watson.
Como nosso tutorial é sobre chatbot, devemos criar um serviço do tipo Conversação. Clique no botão Criar serviço Watson e, na página que se abrirá, selecione a opção Conversation. A configuração do serviço é bem similar ao cadastro do próprio Bluemix.
Esse serviço possui versões Lite (que é gratuita), Padrão e Premium (que precisa de consulta). Na versão Lite, que estamos usando para este tutorial, você possui até 10 mil requisições por mês e não poderá salvar os logs dos chats. Porém a versão padrão não é cara, cada requisição é uma fração inferior a metade de um centavo, o que é um valor aceitável para um sistema corporativo.
Agora é necessário “ensinar” ao Watson o que você quer que ele responda. Apesar dele já possuir uma inteligência base interna, que reconhece erros e contextos, você precisa treina-lo para que ele dê as respostas corretas para determinadas perguntas.
Para iniciar, você precisa criar um novo Workspace(por enquanto, pode ignorar o espaço de trabalho de exemplo).
Atenção ao idioma do espaço de trabalho que você está criando.
Treinando o Watson
Uma vez criado o espaço de trabalho (Workspace), iniciaremos o processo de treinamento do Watson. Para isso, você deve primeiro criar um intent. Um intent é uma intenção de comunicação, ou seja, é um conjunto de interações padronizadas que o usuário poderá fazer com o chatbot.
Cada intenção que for criada precisa ter pelo menos 5 exemplos de interações para poder funcionar. A partir daí o Watson também irá entender perguntas similares. Não é necessário se preocupar com muitas variações. A tecnologia é inteligente o suficiente para trabalhar com diferenças básicas, erros de digitação e compreender contextos. Em nosso exemplo, vamos criar uma intenção com o nome de #Saudações e preencher com algumas interações básicas de saudações.
Uma vez criada as intenções desejadas (em nosso exemplo criamos apenas uma), você deverá criar as possíveis respostas para essas intenções e suas variações. Para isso, você deve ir na área de Dialog.
Um diálogo (Dialog), como o nome já diz, consiste em um conjunto de interações e condições dessas interações, com uma resposta, que pode ou não resultar em um feedback para encerrar um processo de comunicação.
No Watson, o diálogo é organizado em um sistema de árvores, que possui uma lógica de nós e subnós. Para nosso exemplo, vamos criar um novo nó para responder a intenção de saudação que criamos anteriormente. Clique em Add node.
Após dar um nome ao nó, você deve colocar o que o bot irá reconhecer. A intenção é representada pelo símbolo de hash (#). Então, basicamente diz: Se o bot reconhecer a intenção #Saudação, então responda com:
Você pode colocar quantas respostas você quiser. Quanto mais respostas você colocar, maior a quantidade de diálogo possível, deixando o ambiente de comunicação mais natural e otimizando o aprendizado.
Como opções adicionais você pode colocar as respostas em forma sequencial ou aleatória. Ainda é possível criar condições específicas de contextos ou aguardar por respostas específicas à retóricas do chatbot.
Com tudo isso preenchido, você já pode testar o chatbot. O próprio ambiente do bluemix possui uma área para testes. Clique no ícone com o balãozinho no canto superior direito e experimente o diálogo que você acabou de criar.
Implementando o Back-end
A API do Bluemix funciona através de comunicação cURL Essa comunicação é feita a partir de envios de informações via método POST e mediante autorização de acesso. Por isso, vamos precisar de algumas informações básicas do serviço de comunicação que criamos.
Então, antes de criamos o código, você vai precisar das seguintes informações:
Workspace ID
Username
Password
O Workspace ID pode ser adquirido lá naquela tela de criação/seleção de ambientes de trabalho (Workspaces). Basta clicar no botão de menu, no canto superior direito do cartão referente ao workspace que criamos, em seguida clicando em View Details.
Para conseguir o login e senha do serviço de conversação, volte a tela onde você cria os serviços e vá na opção Credenciais de Serviço. Nessa área você pode visualizar ou criar novas credenciais, conseguindo assim o username e password que vamos precisar mais adiante.
ATENÇÃO
A IBM mudou a forma de autenticação. Agora, ao invés de você ter acesso ao username e password, as novas conexões usarão a autenticação AIM e não mais a autenticação por username password. Mais detalhes, veja a documentação: https://console.bluemix.net/apidocs/assistant.
Agora vamos ao código.
A API REST do Watson, como dito acima, funciona a partir de comunicação cURL e vai retornar um json completo com todas as informações para a comunicação. Para criarmos uma conversa simples, precisamos definir o código. Fique atento ao que precisa ser preenchido.
Exemplo usando PHP
conversa.php
Como o retorno é json, precisamos definir a página como text/plain, para evitar qualquer renderização incorreta.
header("Content-Type: text/plain");
Iremos definir então as informações que pegamos acima através das configurações do serviço de conversação. Lembre-se de substituir o código abaixo por seus dados.
Precisamos agora capturar o texto que será enviado para o servidor do Watson. Para testes usaremos o $_REQUEST, do PHP. Por segurança, quando for trabalhar em modo de produção, troque para $_POST.
$texto = $_REQUEST["texto"];
Agora é necessário definir um identificador. Para manter o contexto de conversa, e o Watson saber que está conversando ainda com a mesma pessoa, é necessário passar um identificador. Esse identificador deverá ser único por conversa. Caso você esteja implementando em um sistema de gestão, por exemplo, você pode usar o nome de usuário, id, e-mail, ou algum outro tipo de identificação única.
No nosso teste criaremos uma hash única md5 e a armazenaremos em uma sessão. Dessa forma, garantimos a criação temporária de um identificador único funcional. Nosso bloco então ficará:
A URL da API REST deverá ser concatenada com o Workspace e o método que você está chamando. Dentro do gateway de conversação há vários métodos, desde status a tratamento de workspaces e diálogos. Através da documentação, você poderá explorar todos os métodos acessíveis para o Watson: https://www.ibm.com/watson/developercloud/conversation/api/v1/.
Em nosso exemplo básico, entretanto, iremos utilizar apenas o método message. É importante lembrar que é necessário adicionar a data da versão da API como parâmetro para que possa funcionar.
Para enviar os dados para o Watson, precisamos criar uma pequena string json. Como em nosso exemplo só precisamos enviar o texto e o identificador, podemos simplesmente concatenar o texto, deixando-o pronto para envio.
Agora começa a comunicação. Para acessar a API, algumas exigências são feitas. É necessário ser enviado em método POST um json e ser uma comunicação segura, com identificação de usuário e senha. O bloco referente a comunicação ficará então:
Com a área de chat criada, está na hora de adicionarmos os scripts necessários para fazer a comunicação com o back-end. Para facilitar, usaremos o método ajax do jQuery. Atenção aos comentários no código abaixo, pois eles explicam para quê serve cada linha.
<!--Importar jQuery. Retire caso sua página já faça a importação. -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Submeter Formulário
$("#mensagem").submit(function(){
//Caso o usuário envie uma mensagem vazia
if($("#mensagem #texto").val() === ""){
//Adiciona na área de Chat a mensagem enviada pelo usuário
$("#chat").append("<div class=\"texto usuario\">...</div>");
//Faz um scroll para a mensagem mais recente, caso necessário
$(".mensagens").animate({scrollTop: $("#chat").height()});
setTimeout(function(){
//Adiciona uma resposta padrão afirmando que o usuário deixou o campo vazio
$("#chat").append("<div class=\"texto chatbot\">Você precisa digitar alguma coisa para prosseguir.</div>");
//Faz um scroll para a mensagem mais recente, caso necessário
$(".mensagens").animate({scrollTop: $("#chat").height()});
},1000);
return false;
}
//Inicia método AJAX
$.ajax({
//Substitua o caminho da URL pelo que você salvou o arquivo de backend
url: "/pasta/conversa.php?texto=" + $("#mensagem #texto").val(),
dataType: 'json', // Determina o tipo de retorno
beforeSend: function(){
//Adiciona a mensagem de usuário à lista de mensagens.
$("#chat").append("<div class=\"texto usuario\">" + $("#mensagem #texto").val() + "</div>");
},
success: function(resposta){
//Limpa o que o usuário digitou e foca no input para próxima interação.
$("#mensagem #texto").val("");
$("#mensagem #texto").focus();
//Caso haja um erro, o Watson retornará a mensagem de erro ao usuário
//Basta ler o objeto error para o usuário.
if(resposta.error){
$("#chat").append("<div class=\"texto chatbot\">" + resposta.error + "</div>");
return false;
}
//Colocar a resposta do Watson para o usuário ler
//A mensagem de texto pode ser lida a partir da lógica
//do json de exemplo da imagem no post
var mensagemChatbot = "<div class=\"texto chatbot\">";
mensagemChatbot += resposta.output.text[0];
mensagemChatbot += "</div>";
setTimeout(function(){
$("#chat").append(mensagemChatbot);
$(".mensagens").animate({scrollTop: $("#chat").height()});
},1000);
}
});
return false;
});
</script>
Observe que no código acima existe um método setTimeOut que ocorre sempre antes de adicionar a resposta do Watson. Isso é feito por uma decisão de experiência do usuário.
Uma resposta muito rápida pode causar uma confusão de interpretação e estranhamento.
Quando você está conversando com alguém, a tendência é, ao enviar uma mensagem, esperar que a pessoa ao menos pense na resposta e digite antes de responder. Um pequeno atraso de um segundo na resposta é um tempo mínimo esperado para dar uma maior naturalidade a conversa e ainda permitir que o usuário se prepare para receber uma mensagem. Essa é uma decisão puramente de UX. Caso queira, você pode retirar o setTimeout e irá funcionar normalmente, mas ao testar você poderá sentir que esse tempo de resposta faz falta.
Para finalizar, vamos colocar um estilo CSS para ficar mais agradável ao usuário.
Veja o exemplo abaixo, utilizamos exatamente o mesmo código. Lembre-se que há apenas poucas interações e respostas criadas para este tutorial, então não espere ter uma conversa muito avançada com este chatbot.
Obs. Está sendo utilizada no exemplo uma conta Lite, então é possível que quando você testar já tenha acabado o limite mensal.
Caso você deseje um pouco mais de segurança, recomendamos que você utilize um arquivo .htdocs na pasta em que está o conversa.php, com o conteúdo abaixo. Evitando, assim, acesso externo.
#Evitar Acesso Externo
Order Deny,Allow
Deny from all
Allow from 127. # localhost
Implementar um chatbot do IBM Watson é mais simples do que você pensava, não é? Mas lembre-se que esse é só um tutorial básico para demonstrar como usar a API REST. Você pode, verificar todos os métodos e parâmetros que podem ser utilizados diretamente pela documentação.
Caso tenha apreciado este conteúdo, dê uma passada lá na página da VelhoBit no Facebook e deixe seu like. Compartilhe este post com colegas e interessados na área de tecnologia e não deixe de conferir o restante dos artigos no blog.
Dentro do design de interação, a automação de dados é importante para agilizar cadastros, além de garantir uma maior segurança dessas informações. Preencher dinamicamente o máximo de campos possível é sempre uma opção interessante para otimizar processos e manter um ambiente ágil.
Uma das formas mais utilizadas é o preenchimento automático de endereço a partir do CEP (clique aqui, caso queira saber como fazer). Porém, uma outra alternativa muito interessante, e sempre procurada, é o preenchimento dinâmico dos dados de uma empresa a partir do CNPJ.
Para isso, há uma API pública bem interessante de uma organização chamada ReceitaWS, que é uma empresa destinada a fornecer dados de pessoas jurídicas a partir da Receita Federal. Sua API pública é bem funcional e garante uma quantidade enorme de CNPJs atualizados. O ReceitaWS também possui uma API comercial para quem precisa de dados mais refinados e precisos.
Obs. Só deixando claro que isto NÃO é um anúncio.
Conectando com o ReceitaWS
A API do ReceitaWS aconselha o acesso via cURL. Falando de forma simples, é como se o servidor fizesse o acesso a um site como se fosse um navegador. Por questões de segurança e para impedir o acúmulo de processos, muitas APIs bloqueiam o acesso direto. Por isso a comunicação não pode ser feita apenas com a URL.
Apesar de ser possível fazer acesso cURL em praticamente qualquer linguagem, vamos usar PHP (atualização: ou Java) no nosso exemplo, por você poder usar em praticamente qualquer hospedagem.
Esse acesso deverá ser feito para a URL: https://www.receitaws.com.br/v1/cnpj/[cnpj], onde [cnpj] corresponde ao número do CNPJ que você irá consultar.
Para iniciar, devemos criar um arquivo onde vai ser carregado os dados e impresso o retorno.
cnpj.php
É extremamente importante que o nosso arquivo possua um cabeçalho que imprima como text/plain. Isso porque teremos uma resposta em jSon e passar este cabeçalho irá garantir a leitura correta dos dados.
header("Content-Type: text/plain");
Em seguida, devemos capturar o CNPJ enviado pela requisição e guardar em uma variável.
$cnpj = $_REQUEST["cnpj"];
Agora começa a parte interessante. Iremos usar o método cURL do PHP para poder acessar a URL e passar o CNPJ. Leias os comentários para entender seu funcionamento.
$ch = curl_init(); //Inicializa
curl_setopt($ch, CURLOPT_URL, "https://www.receitaws.com.br/v1/cnpj/".$cnpj); //Acessa a URL
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //Permite a captura do Retorno
$retorno = curl_exec($ch); //Executa o cURL e guarda o Retorno em uma variável
curl_close($ch); //Encerra a conexão
Por fim, devemos terminar com a impressão do retorno.
Para o retorno poder ser lido de forma simples, mesmo que por um humano, iremos usar o JSON_PRETTY_PRINT. Para isso, temos que converter a String de retorno usando o método Json Decode, em seguida imprimindo o resultado com o JSON_PRETTY_PRINT.
$retorno = json_decode($retorno); //Ajuda a ser lido mais rapidamente
echo json_encode($retorno, JSON_PRETTY_PRINT);
O código completo ficará:
<?php
//Garantir que seja lido sem problemas
header("Content-Type: text/plain");
//Capturar CNPJ
$cnpj = $_REQUEST["cnpj"];
//Criando Comunicação cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://www.receitaws.com.br/v1/cnpj/".$cnpj);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //Descomente esta linha apenas se você não usar HTTPS, ou se estiver testando localmente
$retorno = curl_exec($ch);
curl_close($ch);
$retorno = json_decode($retorno); //Ajuda a ser lido mais rapidamente
echo json_encode($retorno, JSON_PRETTY_PRINT);
?>
Se quiser testar, basta acessar o seu arquivo php pelo navegador, por exemplo:
seusite.com/pasta/cnpj.php?cnpj=XXXXXXXXXXXXX
Atualização (Java):
Você também pode fazer com Java. O exemplo abaixo é uma forma bem simples de fazer.
Por segurança, precisamos evitar que outros sites acessem o nosso json. Isso para evitar que o servidor caia devido a diversas requisições de fontes desconhecidas. A forma mais simples de fazer isso, e compatível com praticamente qualquer hospedagem / servidor, é através do arquivo .htaccess.
Na mesma pasta onde foi criado o arquiv cnpj.php deve ser criado um arquivo chamado:
.htaccess
Nesse arquivo deve conter as seguintes informações:
#Evitar Acesso Externo
Order Deny,Allow
Deny from all
Allow from 127. #localhost
Basicamente, o que está sendo dito é que nenhum servidor pode acessar o conteúdo desta pasta, exceto o localhost (127.0.0.1). Caso você queira adicionar mais algum IP autorizado, basta adicionar o IP ou domínio do endereço que deseja.
ATENÇÃO: Caso você seja usuário Cloudflare, adicone os seguintes IPs em sua lista de permissões do .htaccess:
Allow from 199.27.128.0/21
Allow from 173.245.48.0/20
Allow from 103.21.244.0/22
Allow from 103.22.200.0/22
Allow from 103.31.4.0/22
Allow from 141.101.64.0/18
Allow from 108.162.192.0/18
Allow from 190.93.240.0/20
Allow from 188.114.96.0/20
Allow from 197.234.240.0/22
Allow from 198.41.128.0/17
Allow from 162.158.0.0/15
Allow from 104.16.0.0/12
Allow from 172.64.0.0/13
Atualização (Java):
Caso você use o Java, a forma de configurar as permissões de acesso irá variar de acordo com o servidor que você utilizar.
Caso você utilize o Tomcat, você deve utilizar o CORS para fazer esse controle de permissão.
Para isso, edite o arquivo web.xml, e procure pelo filtro do CORS. O bloco deverá ficar algo semelhante ao código abaixo, segundo a mesma lógica do exemplo acima, do PHP:
OBS. O uso do CORS pode dar problemas com clientes que façam acesso por cliente sem DNS, ou seja, com acesso que não é feito por conexão http ou https, como por exemplo,
o Cordova/Phonegap. Nesse caso, aconselha-se simplesmente não usar o CORS, ou editar a bibliotca.
Enviando o CNPJ e Imprimindo os Dados da Empresa
Já para imprimir os dados e ler o json de retorno, precisamos usar um formulário HTML e um pouco de Javascript. Para poder facilitar a compreensão, usaremos o bom e velho jQuery, já explicado em conteúdos anteriores.
A primeira coisa é criar o formulário que devemos usar.
Como iremos aplicar a consulta após o usuário deixar o campo CNPJ, deveremos adicionar a chamada no focusout do CNPJ, ficando
<script type="text/javascript">
$("#cnpj").focusout(function(){
//Aqui vai o código
});
</script>
Agora é bem simples. Basta usarmos o método Ajax, que já utilizamos em tutoriais anteriores para fazermos conexões. O código abaixo possui diversos comentários para facilitar o entendimento de cada bloco.
<script type="text/javascript">
$("#cnpj").focusout(function(){
//Início do Comando AJAX
$.ajax({
//O campo URL diz o caminho de onde virá os dados
//É importante concatenar o valor digitado no CNPJ
url: '/pasta/cnpj.php?cnpj='+$("#cnpj").val(),
//Atualização: caso use java, use cnpj.jsp, usando o outro exemplo.
//Aqui você deve preencher o tipo de dados que será lido,
//no caso, estamos lendo JSON.
dataType: 'json',
//SUCESS é referente a função que será executada caso
//ele consiga ler a fonte de dados com sucesso.
//O parâmetro dentro da função se refere ao nome da variável
//que você vai dar para ler esse objeto.
success: function(resposta){
//Confere se houve erro e o imprime
if(resposta.status == "ERROR"){
alert(resposta.message + "\nPor favor, digite os dados manualmente.");
$("#post #nome").focus().select();
return false;
}
//Agora basta definir os valores que você deseja preencher
//automaticamente nos campos acima.
$("#post #nome").val(resposta.nome);
$("#post #fantasia").val(resposta.fantasia);
$("#post #atividade").val(resposta.atividade_principal[0].text + " (" + resposta.atividade_principal[0].code + ")");
$("#post #telefone").val(resposta.telefone);
$("#post #email").val(resposta.email);
$("#post #logradouro").val(resposta.logradouro);
$("#post #complemento").val(resposta.complemento);
$("#post #bairro").val(resposta.bairro);
$("#post #cidade").val(resposta.municipio);
$("#post #uf").val(resposta.uf);
$("#post #cep").val(resposta.cep);
$("#post #numero").val(resposta.numero);
}
});
});
</script>
Que tal agora testarmos o funcionamento?
Digite um CNPJ (apenas números) no campo CNPJ abaixo e depois saia dele (focusout), clicando em outro campo ou pressionando a tecla TAB de seu teclado.
É mais fácil do que parece, não é? Aproveite para compartilhar isso com seus amigos que estão estudando ou que essa informação possa ser útil 👍. Aproveite e deixe um like na nova página da Velhobit, no Facebook.
